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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

38 151 51



模板描述:白色 宽屏 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="[email protected]" 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自适应 蓝色 普通自适应 欧美风 红色 中国风 绿色 韩系 灰色 日系 简洁简约 黄色 炫酷 紫色 卡通动画 橙色 精美 实用通用 艺术创意 粉色 大气 白色 棕色 清新 彩色 绘画 其他风格 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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