绿色简洁样式HTML5新年庆祝专题网页模板代码



2 7 3



模板描述:绿色 简洁 HTML5 新年庆祝 专题网页模板代码,绿色简洁样式HTML5新年庆祝专题网页模板代码HTML模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Arizonia&amp;subset=latin-ext" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Righteous&amp;subset=latin-ext" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Great+Vibes&amp;subset=latin-ext" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">

2. HTML代码

	<div class="main-w3pvt" id="home">
		<!-- header -->
		<header>
			<div class="container-fluid">
				<div class="header d-md-flex justify-content-between align-items-center py-3 px-lg-3 px-2">
					<!-- logo -->
					<div id="logo">
						<h1><a class="" href="index.html"><img src="images/logo.png" alt="" class="img-fluid">Celebration</a></h1>
					</div>
					<!-- //logo -->
					<!-- nav -->
					<div class="nav_w3ls">
						<nav>
							<label for="drop" class="toggle">Menu</label>
							<input type="checkbox" id="drop" />
							<ul class="menu">
								<li><a href="index.html" class="active">Home</a></li>
								<li class="mx-lg-4 mx-md-3 my-md-0 my-2">
									<!-- First Tier Drop Down -->
									<label for="drop-2" class="toggle toogle-2">Pages <span class="fa fa-angle-down" aria-hidden="true"></span>
									</label>
									<a href="#">Pages <span class="fa fa-angle-down" aria-hidden="true"></span></a>
									<input type="checkbox" id="drop-2" />
									<ul>
										<li><a href="about.html" class="drop-text">About Us</a></li>
										<li><a href="#event" class="drop-text">Event Schedule</a></li>
										<li><a href="#news" class="drop-text">Our News</a></li>
										<li><a href="#what" class="drop-text">What We do</a></li>
										<li><a href="#testi" class="drop-text">Testimonials</a></li>
										<li><a href="single.html" class="drop-text">News Details</a></li>
										<li><a href="join.html" class="drop-text">Register Form</a></li>
									</ul>
								</li>
								<li><a href="gallery.html">Gallery</a></li>
								<li class="ml-lg-4 ml-md-3 mt-md-0 mt-2"><a href="contact.html">Contact Us</a></li>
							</ul>
						</nav>
					</div>
					<!-- //nav -->
				</div>
			</div>
		</header>
		<!-- //header -->
		<!-- banner -->
		<div class="banner-w3pvt">
			<div class="container">
				<div class="banner-tops-style">
					<div class="style-banner text-center">
						<img src="images/img2.png" alt="" class="img-fluid">
						<h4 class="text-li mb-5 mt-2">2019</h4>
						<h3 class="text-wh mb-4">New Year Celebration</h3>
						<img src="images/img5.png" alt="" class="img-fluid">
					</div>
				</div>
			</div>
			<!-- animations icons -->
			<div class="icon-effects-w3-2">
				<img src="images/icon-3.png" alt="" class="img-fluid">
			</div>
			<!-- //animations icons -->
			<div class="icon-effects-w3-3">
				<img src="images/ba2.png" alt="" class="img-fluid">
			</div>
		</div>
	</div>
	<!-- //banner -->
	<!-- about -->
	<div class="what py-5 text-center">
		<div class="container py-xl-5 py-lg-3">
			<div class="title mb-sm-5 mb-4">
				<h3 class="title-w3 text-bl text-center font-weight-bold">New Year Party Celebration</h3>
				<img src="images/titt.png" alt="" class="img-fluid">
			</div>
			<img src="images/ab.jpg" alt="" class="img-fluid">
			<p class="mx-auto wstyles text-center mt-lg-5 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
				eiusmod tempor incididunt ut labore et dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
				eiusmod tempor incididunt ut labore et dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat.</p>
			<a href="join.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Join Now</a>
		</div>
	</div>
	<!-- //about -->
	<!-- middle -->
	<div class="middle py-5">
		<div class="container py-xl-5 py-lg-3">
			<div class="row py-lg-5 my-sm-4">
				<div class="col-lg-7 mt-4">
					<p class="text-li mb-2">Get, Set, Ready and Go..</p>
					<h3 class="text-wh">Let's Celebrate the New Year Party</h3>
				</div>
				<div class="col-lg-5 mt-lg-0 mt-5">
					<h4>Rock the <br>Party!!</h4>
				</div>
			</div>
		</div>
	</div>
	<!-- //middle -->
	<!-- what we do -->
	<div class="serives-agile py-5" id="what">
		<div class="container py-xl-5 py-lg-3">
			<div class="title text-center mb-sm-5 mb-4">
				<h3 class="title-w3 text-bl text-center font-weight-bold">What We Do for You</h3>
				<div class="arrw">
					<i class="fa fa-glass" aria-hidden="true"></i>
				</div>
			</div>
			<div class="row welcome-bottom text-center">
				<div class="col-lg-3 col-sm-6">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh1.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">Drinks</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-sm-0 mt-5">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh2.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">Lights</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-lg-0 mt-5">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh3.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">DJ Music</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-lg-0 mt-5">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh4.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">Carnival</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
			</div>
			<div class="row welcome-bottom text-center mt-5">
				<div class="col-lg-3 col-sm-6">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh5.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">Gifts</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-sm-0 mt-5">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh6.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">Decoration</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-lg-0 mt-5">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh7.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">Dinner</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
				<div class="col-lg-3 col-sm-6 mt-lg-0 mt-5">
					<div class="welcome-grid bg-white py-5 px-4">
						<img src="images/wh8.jpg" alt="" class="img-fluid">
						<h4 class="mt-4 mb-3 text-dark">Dancing</h4>
						<p>Quis nostrum ullam corporis suscipit.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //what we do -->
	<!-- middle section -->
	<div class="bg-colors py-5">
		<div class="container py-md-2">
			<h4 class="text-center font-weight-bold text-white">Are You Ready
				<a href="join.html" class="text-white button-clk">Joining Our Event Programs ?</a>
			</h4>
		</div>
	</div>
	<!-- newsletter -->
	<div class="newsletter_right_w3w3pvt-lau py-5">
		<div class="container py-xl-4 py-lg-3">
			<div class="row">
				<div class="col-lg-4 border-right">
					<p class="text-li">Signup for Free</p>
					<h3 class="text-white font-weight-bold mt-2 mb-3">Subscribe Newsletter</h3>
				</div>
				<div class="col-lg-8 news-right-w3ls mt-lg-0 mt-4">
					<p class="text-light mb-3">Subscribe to our latest news to be updated</p>
					<form action="#" method="post">
						<div class="row">
							<div class="col-md-5 form-group pr-md-0">
								<input class="form-control" type="text" name="Name" placeholder="Name" required="">
							</div>
							<div class="col-md-5 form-group pr-md-0">
								<input class="form-control" type="email" name="Email" placeholder="Email Address" required="">
							</div>
							<div class="col-md-2 form-group pr-md-0 mt-md-0 mt-3">
								<button class="form-control btn" type="submit">Subscribe</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- //newsletter -->
	<!-- //middle section -->
	<!-- events -->
	<div class="about-w3sec py-5" id="event">
		<div class="container py-xl-5 py-lg-3">
			<div class="title text-center mb-sm-5 mb-4">
				<h3 class="title-w3 text-bl text-center font-weight-bold">Party Event Schedule</h3>
				<div class="arrw">
					<i class="fa fa-glass" aria-hidden="true"></i>
				</div>
			</div>
			<div class="evnt-grid p-sm-5 p-4">
				<div class="row">
					<div class="col-lg-2 col-sm-3 text-center mt-2">
						<img src="images/e1.jpg" alt="" class="img-fluid" />
					</div>
					<div class="col-lg-7 col-sm-9 abt-block pr-lg-5 mt-sm-0 mt-4">
						<h3 class="mb-2">Morning Sermon and Prayer</h3>
						<p>Congue donec leo eget malesuada, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<ul class="list-unstyled mt-3">
							<li>
								<span class="fa fa-user-o mr-2"></span>Molive Joe
							</li>
							<li class="mx-md-4 mx-2">
								<span class="fa fa-clock-o mr-2"></span>7:30 - 9:30
							</li>
							<li>
								<span class="fa fa-map-marker mr-2"></span>Hall No.1
							</li>
						</ul>
					</div>
					<div class="col-lg-3 abt-block text-center">
						<a href="join.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Join Now</a>
					</div>
				</div>
			</div>
			<div class="evnt-grid p-sm-5 p-4 my-5">
				<div class="row">
					<div class="col-lg-2 col-sm-3 text-center mt-2">
						<img src="images/e2.jpg" alt="" class="img-fluid" />
					</div>
					<div class="col-lg-7 col-sm-9 abt-block pr-lg-5 mt-sm-0 mt-4">
						<h3 class="mb-2">Candel Light​ ​Service and Singing Worship</h3>
						<p>Congue donec leo eget malesuada, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<ul class="list-unstyled mt-3">
							<li>
								<span class="fa fa-user-o mr-2"></span>Molive Joe
							</li>
							<li class="mx-md-4 mx-2">
								<span class="fa fa-clock-o mr-2"></span>7:30 - 9:30
							</li>
							<li>
								<span class="fa fa-map-marker mr-2"></span>Hall No.1
							</li>
						</ul>
					</div>
					<div class="col-lg-3 abt-block text-center">
						<a href="join.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Join Now</a>
					</div>
				</div>
			</div>
			<div class="evnt-grid p-sm-5 p-4">
				<div class="row">
					<div class="col-lg-2 col-sm-3 text-center mt-2">
						<img src="images/e3.jpg" alt="" class="img-fluid" />
					</div>
					<div class="col-lg-7 col-sm-9 abt-block pr-lg-5 mt-sm-0 mt-4">
						<h3 class="mb-2">Mid Night Service and New Year Wishes</h3>
						<p>Congue donec leo eget malesuada, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
						<ul class="list-unstyled mt-3">
							<li>
								<span class="fa fa-user-o mr-2"></span>Molive Joe
							</li>
							<li class="mx-md-4 mx-2">
								<span class="fa fa-clock-o mr-2"></span>7:30 - 9:30
							</li>
							<li>
								<span class="fa fa-map-marker mr-2"></span>Hall No.1
							</li>
						</ul>
					</div>
					<div class="col-lg-3 abt-block text-center">
						<a href="join.html" style="max-width: 150px;" class="btn button-style mt-sm-5 mt-4">Join Now</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //events -->
	<!-- testimonials -->
	<div class="testimonials text-center py-5" id="testi">
		<div class="container py-xl-5 py-lg-3">
			<div class="title mb-sm-5 mb-4">
				<h3 class="title-w3 text-wh text-center font-weight-bold">What Our People Say</h3>
				<img src="images/tiw.png" alt="" class="img-fluid">
			</div>
			<div class="row pt-4 my-md-4">
				<div class="col-lg-4 testi-sections">
					<div class="testimonials_grid p-sm-5 p-4">
						<p class="sub-test"><span class="fa fa-quote-left mr-2" aria-hidden="true"></span> Nam libero tempore, cum soluta
							nobis est eligendi optio cumque nihil impedit.
						</p>
						<div class="row mt-4">
							<div class="col-5 testi-img-res text-right">
								<img src="images/te1.jpg" alt="" class="img-fluid" />
							</div>
							<div class="col-7 testi_grid text-left mt-xl-3 mt-lg-2 mt-4">
								<h5 class="mb-1">Petey Cruis</h5>
								<p>Sub heading</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 testi-sections my-lg-0 my-4">
					<div class="testimonials_grid p-sm-5 p-4">
						<p class="sub-test"><span class="fa fa-quote-left mr-2" aria-hidden="true"></span> Nam libero tempore, cum soluta
							nobis est eligendi optio cumque nihil impedit.
						</p>
						<div class="row mt-4">
							<div class="col-5 testi-img-res text-right">
								<img src="images/te2.jpg" alt="" class="img-fluid" />
							</div>
							<div class="col-7 testi_grid text-left mt-xl-3 mt-lg-2 mt-4">
								<h5 class="mb-1">Molive Joe</h5>
								<p>Sub heading</p>
							</div>
						</div>
					</div>
				</div>
				<div class="col-lg-4 testi-sections">
					<div class="testimonials_grid p-sm-5 p-4">
						<p class="sub-test"><span class="fa fa-quote-left mr-2" aria-hidden="true"></span> Nam libero tempore, cum soluta
							nobis est eligendi optio cumque nihil impedit.
						</p>
						<div class="row mt-4">
							<div class="col-5 testi-img-res text-right">
								<img src="images/te3.jpg" alt="" class="img-fluid" />
							</div>
							<div class="col-7 testi_grid text-left mt-xl-3 mt-lg-2 mt-4">
								<h5 class="mb-1">Paige Turner</h5>
								<p>Sub heading</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //testimonials -->
	<!-- news -->
	<section class="blog_w3ls py-5" id="news">
		<div class="container py-xl-5 py-lg-3">
			<div class="title text-center mb-sm-5 mb-4">
				<h3 class="title-w3 text-bl text-center font-weight-bold">Latest News</h3>
				<div class="arrw">
					<i class="fa fa-glass" aria-hidden="true"></i>
				</div>
			</div>
			<div class="row pt-4">
				<!-- blog grid -->
				<div class="col-lg-4 col-md-6">
					<div class="card border-0 med-blog">
						<div class="card-header p-0">
							<a href="single.html">
								<img class="card-img-bottom" src="images/blog2.jpg" alt="Card image cap">
							</a>
						</div>
						<div class="card-body border border-top-0 pb-5">
							<div class="mb-3">
								<h5 class="blog-title card-title font-weight-bold m-0">
									<a href="single.html">Dictum porta auris</a>
								</h5>
								<div class="blog_w3icon">
									<span>
										Dec 31,2018 - loremipsum</span>
								</div>
							</div>
							<p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
							<a href="single.html" class="blog-btn">Read More</a>
						</div>
					</div>
				</div>
				<!-- //blog grid -->
				<!-- blog grid -->
				<div class="col-lg-4 col-md-6 mt-md-0 mt-5">
					<div class="card border-0 med-blog">
						<div class="card-header p-0">
							<a href="single.html">
								<img class="card-img-bottom" src="images/blog1.jpg" alt="Card image cap">
							</a>
						</div>
						<div class="card-body border border-top-0 pb-5">
							<div class="mb-3">
								<h5 class="blog-title card-title font-weight-bold m-0">
									<a href="single.html">Dictum porta auris</a>
								</h5>
								<div class="blog_w3icon">
									<span>
										Jan 01, 2019 - loremipsum</span>
								</div>
							</div>
							<p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
							<a href="single.html" class="blog-btn">Read More</a>
						</div>
					</div>
				</div>
				<!-- //blog grid -->
				<!-- blog grid -->
				<div class="col-lg-4 col-md-6 mt-lg-0 mt-5">
					<div class="card border-0 med-blog">
						<div class="card-header p-0">
							<a href="single.html">
								<img class="card-img-bottom" src="images/blog3.jpg" alt="Card image cap">
							</a>
						</div>
						<div class="card-body border border-top-0 pb-5">
							<div class="mb-3">
								<h5 class="blog-title card-title font-weight-bold m-0">
									<a href="single.html">Dictum porta auris</a>
								</h5>
								<div class="blog_w3icon">
									<span>
										Jan 01, 2019 - loremipsum</span>
								</div>
							</div>
							<p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
							<a href="single.html" class="blog-btn">Read More</a>
						</div>
					</div>
				</div>
				<!-- //blog grid -->
			</div>
		</div>
	</section>
	<!-- //blog -->
	<!-- sponsors -->
	<section class="brands">
		<div class="container-fluid">
			<div class="row text-center">
				<div class="col-md-2 col-4 main-brand bg-grey">
					<span class="fa fa-500px mb-3" aria-hidden="true"></span>
					<h5>500px</h5>
				</div>
				<div class="col-md-2 col-4 main-brand bg-black">
					<span class="fa fa-gg mb-3" aria-hidden="true"></span>
					<h5>gg varius</h5>
				</div>
				<div class="col-md-2 col-4 main-brand bg-dark2">
					<span class="fa fa-lastfm mb-3" aria-hidden="true"></span>
					<h5>lastfm</h5>
				</div>
				<div class="col-md-2 col-4 main-brand bg-grey">
					<span class="fa fa-openid mb-3" aria-hidden="true"></span>
					<h5>openid</h5>
				</div>
				<div class="col-md-2 col-4 main-brand bg-black">
					<span class="fa fa-ravelry mb-3" aria-hidden="true"></span>
					<h5>ravelry</h5>
				</div>
				<div class="col-md-2 col-4 main-brand bg-dark2">
					<span class="fa fa-angellist mb-3" aria-hidden="true"></span>
					<h5>angellist</h5>
				</div>
			</div>
		</div>
	</section>
	<!-- //sponsors -->
	<!-- footer -->
	<footer class="footer py-sm-5 py-4 text-center">
		<div class="container py-xl-4 py-lg-3">
			<!-- logo -->
			<div class="logo-2 text-center">
				<h2><a class="" href="index.html"><img src="images/logo.png" alt="" class="img-fluid">Celebration</a></h2>
			</div>
			<!-- //logo -->
			<div class="footer-ex my-5">
				<h3 class="footer-tha">Thank You for Visiting</h3>
				<img src="images/img5.png" alt="" class="img-fluid">
			</div>
			<!-- social icons footer -->
			<div class="w3l-footer text-center">
				<ul class="list-unstyled">
					<li>
						<a href="#">
							<span class="fa fa-facebook-f"></span>
						</a>
					</li>
					<li class="mx-1">
						<a href="#">
							<span class="fa fa-twitter"></span>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="fa fa-dribbble"></span>
						</a>
					</li>
					<li class="ml-1">
						<a href="#">
							<span class="fa fa-vk"></span>
						</a>
					</li>
				</ul>
			</div>
			<!-- //social icons footer -->
		</div>
		<div class="footer-pos">
			<img src="images/gift.png" alt="" class="img-fluid">
		</div>
		<div class="footer-pos-2">
			<img src="images/gift2.png" alt="" class="img-fluid">
		</div>
	</footer>
	<!-- footer -->
	<!-- copyright -->
	<div class="copyright">
		<p class="copy-right-grids text-li text-center py-sm-4 py-3">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
</p>
		<a href="https://www.51qianduan.com/">51前端</a>
	</div>
	<!-- //copyright -->



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


热门标签: 分类 响应式 自适应 设备 风格 颜色 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 绿色 专题页 活动页 专题活动页 大气 霸气

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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