白色宽屏样式bootstrap新年快乐专题网页模板代码下载



3 8 3



模板描述:白色 宽屏 bootstrap 新年快乐 专题网页模板 代码下载,白色宽屏样式bootstrap新年快乐专题网页模板代码下载HTML模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;subset=latin-ext" rel="stylesheet">

2. HTML代码

<!-- //header -->
<header>	
	<div class="container">
		<!-- nav -->
		<nav class="py-md-4">
        <div id="logo">
			<h1> <a href="#index.html"><span class="fa fa-glass" aria-hidden="true"></span> Greetings <span class="block">New Year's Eve</span></a></h1>
		</div>
        <label for="drop" class="toggle"><span class="fa fa-bars"></span></label>
        <input type="checkbox" id="drop" />
            <ul class="menu mt-md-3">
                <li class="mr-lg-4 mr-3 active"><a href="#">Home</a></li>
                <li class="mr-lg-4 mr-3">
                <!-- First Tier Drop Down -->
                <label for="drop-2" class="toggle">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span> </label>
                <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                <input type="checkbox" id="drop-2"/>
                <ul class="drop-down">
                    <li><a href="#about">About</a></li>
                    <li><a href="#events">Events</a></li>
                    <li><a href="#team">Organizers</a></li>
                    <li><a href="#sponsers">Sponsers</a></li>
                    <li><a href="#subscribe">Subscribe</a></li>
                </ul>
                </li>
                <li class="mr-lg-4 mr-3"><a href="#contact">Contact</a></li>
                <li class="mr-3 icons"><a href="#"><span class="fa fa-facebook" aria-hidden="true"></span></a></li>
                <li class="mr-3 icons"><a href="#"><span class="fa fa-instagram" aria-hidden="true"></span></a></li>
                <li class="mr-3 icons"><a href="#"><span class="fa fa-twitter" aria-hidden="true"></span></a></li>
                <li class=" icons"><a href="#"><span class="fa fa-youtube-play" aria-hidden="true"></span></a></li>
            </ul>
        </nav>
		<!-- //nav -->
	</div>
</header>
<!-- //header -->
<!-- banner -->
<section class="banner" id="home">
	<div class="banner-layer">
		<div class="container">
			<div class="w3pvt_banner_info text-center">
				<div class="w3layouts_banner_margin">
					<h3 class="editContent">2019 </h3>
					<h2 class="editContent">Happy New Year</h2>
					<h4>Get ready to celebrate</h4>
					<a href="#events"> Upcoming Events </a>
				</div>
			</div>
			<!-- To bottom button-->
			<div class="thim-click-to-bottom mt-5 pt-md-5">
				<div class="rotate">
					<a href="#about" class="scroll">
						<span class="fa fa-angle-double-down"></span>
					</a>
				</div>
			</div>
			<!-- //To bottom button-->
		</div>
	</div>
</section>
<!-- //banner -->	
<!-- fireworks animation -->
<div class="pyro">
    <div class="before"></div>
    <div class="after"></div>
</div>
<!-- //fireworks animation -->
<!-- about -->
<section class="about py-5" id="about">
	<div class="container py-md-5">
		<div class="row about-grids">
			<div class="col-lg-6">
				<h3 class="heading mb-4">About New Years Eve Greetings</h3>
				<p>Integer pulvinar leo id viverra feuetgiat. Dolor Pellentesque libero sed justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit et. semper at tempus vel, ultrices in ligula leo sed viverra feugiat Nulla sollicit udin velit semper at  sed viverra sed viverra.</p>
				<p class="mt-2">Integer pulvinar leo id viverra feuetgiat. Dolor Pellentesque libero ut justo, semper at tempus vel, ultrices in ligula ipsum semper at tempus vel, ultrices in ligula leo sed viverra sed feugiat Nulla sollicit udin.</p>
			</div>
			<div class="col-lg-5 col-md-8 mt-lg-0 mt-4 offset-lg-1 text-center about-middle">
				<h5>New Years Eve</h5>
				<h4 class="heading mb-3">Tickets on sale now</h4>
				<p class="">Integer pulvinar leo id viverra feuetgiat. Dolor Pellentesque libero ut justo at.</p>
				<a href="#contact">Buy Ticket</a>
			</div>
		</div>
	</div>
</section>
<!-- about -->
<!-- fireworks animation -->
<div class="pyro">
    <div class="before"></div>
    <div class="after"></div>
</div>
<!-- //fireworks animation -->
<!-- events -->
<section class="events py-5 " id="events">
	<div class="container py-md-5">
		<div class="row event-grids">
			<div class="col-lg-5">
				<h3 class="heading mb-4">Upcoming Events</h3>
				<ul class="event-names mt-5">
					<li class="d-flex"><h3 class="mr-3">07 Jan</h3> Event 1 Party Night </li>
					<li class="para">Integer pulvinar leo id viverra feuetgiat. Dolor libero ut justo, semper at tempus vel, ultrices in ligula.</li>
					<li class="d-flex"><h3 class="mr-3">09 Jan</h3> Event 2 New Year </li>
					<li class="para">Integer pulvinar leo id viverra feuetgiat. Dolor libero ut justo, semper at tempus vel, ultrices in ligula.</li>
					<li class="d-flex"><h3 class="mr-3">04 Jan</h3> Event 3 Dj Show </li>
					<li class="para">Integer pulvinar leo id viverra feuetgiat. Dolor libero ut justo, semper at tempus vel, ultrices in ligula.</li>
				</ul>
			</div>
			<div class="col-lg-6 offset-lg-1 mt-lg-0 mt-4">
				<img src="images/party.jpg" alt="" class="img-fluid" />
				<h4>Please join us for a jolly night of food, drinks, dance and music.</h4>
				<a href="#contact">Join with Us</a>
			</div>
		</div>
	</div>
</section>
<!-- //events -->
<!-- fireworks animation -->
<div class="pyro">
    <div class="before"></div>
    <div class="after"></div>
</div>
<!-- //fireworks animation -->
<!-- what we do -->
<section class="services py-5 position-relative" id="services">
	<div class="container py-md-5">
		<div class="row service-grids">
			<div class="col-lg-4">
				<h3 class="heading">Are you ready to rock? <br>We planned Mind-blowing Entertainment for you</h3>
			</div>
			<div class="col-lg-7 offset-lg-1 mt-lg-0 mt-4">
				<div class="row w3layouts-row">
					<div class="col-md-4 col-sm-6 serv-grid text-center w3pvt-grid">
						<h4 class="">Dj Music</h4>
						<p>Integer pulvinar leo id viverra feuetgiat.</p>
						<span class="fa fa-headphones"></span>
					</div>
					<div class="col-md-4 col-sm-6 serv-grid1 text-center w3pvt-grid">
						<h4 class="">Party Night</h4>
						<p>Integer pulvinar leo id viverra feuetgiat.</p>
						<span class="fa fa-gift"></span>
					</div>
					<div class="col-md-4 col-sm-6 serv-grid2 text-center w3pvt-grid">
						<h4 class="">Drinks</h4>
						<p>Integer pulvinar leo id viverra feuetgiat.</p>
						<span class="fa fa-play-circle"></span>
					</div>
					<div class="col-md-4 col-sm-6 serv-grid3 text-center w3pvt-grid">
						<h4 class="">Disco Music</h4>
						<p>Integer pulvinar leo id viverra feuetgiat.</p>
						<span class="fa fa-snapchat"></span>
					</div>
					<div class="col-md-4 col-sm-6 serv-grid4 text-center w3pvt-grid">
						<h4 class="">Pub Night</h4>
						<p>Integer pulvinar leo id viverra feuetgiat.</p>
						<span class="fa fa-weixin"></span>
					</div>
					<div class="col-md-4 col-sm-6 serv-grid5 text-center w3pvt-grid">
						<h4 class="">Celebrations</h4>
						<p>Integer pulvinar leo id viverra feuetgiat.</p>
						<span class="fa fa-refresh"></span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="position-left-img">
		<img src="images/glass.png" class="img-fluid" alt="" />
	</div>
</section>
<!-- //what we do -->
<!-- fireworks animation -->
<div class="pyro">
    <div class="before"></div>
    <div class="after"></div>
</div>
<!-- //fireworks animation -->
<!-- team  -->
<section class="pb-5 py-4 team-agile position-relative" id="team">
	<div class="container py-lg-5">
		<h3 class="heading">Party Organizers</h3>
		<div class="d-flex team-agile-row pt-sm-5 pt-3">
			<div class="col-lg-3 col-sm-6 w3pvt-team">
				<div class="box20">
					<img src="images/t2.jpg" alt="" class="img-fluid" />
					<div class="box-content">
						<h3 class="title">willimson</h3>
						<span class="post">Organizer</span>
					</div>
					<ul class="icon">
						<li>
							<a href="#">
								<span class="fa fa-plus"></span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="fa fa-link"></span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-sm-0 mt-4 w3pvt-team">
				<div class="box20">
					<img src="images/t3.jpg" alt="" class="img-fluid" />
					<div class="box-content">
						<h3 class="title">Kristiana</h3>
						<span class="post">Organizer</span>
					</div>
					<ul class="icon">
						<li>
							<a href="#">
								<span class="fa fa-plus"></span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="fa fa-link"></span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4 w3pvt-team">
				<div class="box20">
					<img src="images/t1.jpg" alt="" class="img-fluid" />
					<div class="box-content">
						<h3 class="title">franklin</h3>
						<span class="post">Organizer</span>
					</div>
					<ul class="icon">
						<li>
							<a href="#">
								<span class="fa fa-plus"></span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="fa fa-link"></span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4 w3pvt-team">
				<div class="box20">
					<img src="images/t4.jpg" alt="" class="img-fluid" />
					<div class="box-content">
						<h3 class="title">franklin</h3>
						<span class="post">Organizer</span>
					</div>
					<ul class="icon">
						<li>
							<a href="#">
								<span class="fa fa-plus"></span>
							</a>
						</li>
						<li>
							<a href="#">
								<span class="fa fa-link"></span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="position-right-img">
		<img src="images/balloon.png" class="img-fluid" alt="" />
	</div>
</section>
<!-- //team -->
<!-- register -->
<section class="register py-5" id="register">
	<div class="container py-md-5">
		<div class="row">
			<div class="col-sm-9 ml-auto">
				<h3>we want you to be part of this year’s celebration. order your tickets today</h3>
				<a href="#contact">Contact Now </a>
			</div>
		</div>
	</div>
</section>
<!-- //register -->
 <!-- contact -->
    <div class="contact-wthree py-5" id="contact">
        <div class="container py-md-3">
            <div class="text-center pb-4">
                <h3 class="heading mb-4">contact us</h3>
            </div>
            <div class="row ">
				<div class="col-lg-3 col-md-4">
					<div class="address wthree-location">
						<h4><span class="fa fa-map-marker"></span> Address</h4>
						<p>71 Pilgrim Avenue 44 Shirley Ave. Goldfield Rd. Broome St, Newyork.</p>
					</div>
					<div class="address my-4 wthree-phone">
						<h4><span class="fa fa-phone"></span> Phone</h4>
						<p>+12 456 123 7890</p>
						<p>+12 856 123 7890</p>
					</div>
					<div class="address my-4 wthree-email">
						<h4><span class="fa fa-envelope-open"></span> Email Address</h4>
						<p><a href="https://www.51qianduan.com/">51前端</a></p>
						<p><a href="https://www.51qianduan.com/">51前端</a></p>
					</div>
				</div>
                <div class="col-lg-9 col-md-8">
                    <!-- register form grid -->
                    <div class="register-top1">
                        <form action="#" method="post" class="register-wthree">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>
                                            First name
                                        </label>
                                        <input class="form-control" type="text" placeholder="Johnson" name="email"
                                            required="">
                                    </div>
                                    <div class="col-md-6 mt-md-0 mt-4">
                                        <label>
                                            Last name
                                        </label>
                                        <input class="form-control" type="text" placeholder="Kc" name="name" required="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-6">
                                        <label>
                                            Mobile
                                        </label>
                                        <input class="form-control" type="text" placeholder="xxxx xxxxx" name="email"
                                            required="">
                                    </div>
                                    <div class="col-md-6 mt-md-0 mt-4">
                                        <label>
                                            Email
                                        </label>
                                        <input class="form-control" type="email" placeholder="example@email.com" name="email"
                                            required="">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>
                                            Your message
                                        </label>
                                        <textarea placeholder="Type your message here" class="form-control"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-w3layouts btn-block">Send</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!--  //register form grid ends here -->
                </div>
            </div>
        </div>
    </div>
    <!-- //contact -->
<!-- our sponsers -->
<section class="sponsers text-center py-5" id="sponsers">
	<div class="container py-3">
		<h3 class="heading mb-4">Our Sponsers</h3>
		<div class="row sponser-grids">
			<div class="col-lg-2 col-md-4 col-6">
				<a href="#"><img src="images/brand1.png" class="img-fluid" alt="" /></a>
			</div>
			<div class="col-lg-2 col-md-4 col-6">
				<a href="#"><img src="images/brand2.png" class="img-fluid" alt="" /></a>
			</div>
			<div class="col-lg-2 col-md-4 col-6">
				<a href="#"><img src="images/brand1.png" class="img-fluid" alt="" /></a>
			</div>
			<div class="col-lg-2 col-md-4 col-6">
				<a href="#"><img src="images/brand2.png" class="img-fluid" alt="" /></a>
			</div>
			<div class="col-lg-2 col-md-4 col-6">
				<a href="#"><img src="images/brand1.png" class="img-fluid" alt="" /></a>
			</div>
			<div class="col-lg-2 col-md-4 col-6">
				<a href="#"><img src="images/brand2.png" class="img-fluid" alt="" /></a>
			</div>
		</div>
	</div>
</section>
<!-- //our sponsers -->
<!-- subscribe -->
<section class="subscribe text-center py-sm-5 pt-5 pb-4" id="subscribe">
	<div class="container pt-md-3">
		<h4>Subscribe</h4>
		<h3 class="heading mb-4">Stay In The Loop</h3>
		<div class="footer-text">
			<p class="mb-2">Sign up to get our newsletter for all the latest news, shows, and events</p>
			<form action="#" method="post" class="d-flex">
				<input type="email" name="Email" class=" mr-md-2 mr-1" placeholder="Email Address" required="">
				<button class="btn">Subscribe</button>
			</form>
		</div>
		<div class="copyright mt-sm-5 mt-4 text-center">
			<p>Copyright &copy; 2018.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
		</div>
		<!-- to top -->
		<a href="https://www.51qianduan.com/">51前端</a>
		<!-- //to top -->
	</div>
</section>
<!-- //subscribe -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 分类 响应式 自适应 设备 风格 颜色 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 专题页 活动页 专题活动页 白色

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到