黃色簡潔風格的創意建筑設計整站網站源碼下載



9 34 12



模板描述:黃色簡潔風格 創意建筑設計 整站網站,黃色簡潔風格的創意建筑設計整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8" />
<link href="css/popup-box.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/owl.carousel.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/jquery.chocolat.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.min.js"></script>
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/responsiveslides.min.js"></script>

3. HTML代碼

	<!--start-header-->
	<div class="header" id="home">
		<div class="container">
			<div class="logo">
				<a href="index.html"><img src="images/logo.png" alt=""></a>  
			</div>
			<div class="quote">
				<a href="quote.html">GET A QUOTE</a>
			</div>
			<!--start-top-nav-->
			<nav class="top-nav">
				<ul class="top-nav">
					<li><a href="index.html"  class="active">Home</a></li>
					<li><a href="about.html">About us</a></li>
					<li><a href="404.html">jobs</a></li>
					<li><a href="contact.html">Contact us</a></li>
				</ul>
					<a href="#" id="pull"><img src="images/menu-icon.png" title="menu" /></a>
			</nav>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!--end-header-->
	<!--start-banner-->
	<div class="banner">
		<div  id="top" class="callbacks_container">
			 <ul class="rslides" id="slider4">
			       <li>
						<div class="banner-1"></div>	
					</li>
					<li>
							<div class="banner-2"></div>	
					</li>
					<li>
							<div class="banner-3"></div>	
					</li>
			  </ul>
			</div>
	 	<div class="clearfix"> </div>
	</div>
		<!--End-banner-->
		<!--Slider-Starts-Here-->
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: false,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			    });
			  </script>
			<!--End-slider-script-->
	<!--start-build-->
	<div class="build">
		<div class="container">
			<div class="build-mian">
				<div class="col-md-8 build-left">
					<h1>WE READY TO BUILD<span>YOUR HOME</span></h1>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
				</div>
				<div class="col-md-4 build-right">
					<a href="#">GET A QUOTE FOR FREE</a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--End-build-->	
	<!--start-design-->	
	<div class="design">
		<div class="container">
			<div class="design-main">
				<div class="col-md-3 design-left">
					<div class="design-text">
						<img src="images/design-1.png" alt="" />
						<h3>CONSULTING</h3>
						<p>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,</p>
					</div>
				</div>
				<div class="col-md-3 design-left">
					<div class="design-text">
						<img src="images/design-2.png" alt="" />
						<h3>PLANNING</h3>
						<p>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,</p>
					</div>
				</div>
				<div class="col-md-3 design-left">
					<div class="design-text">
						<img src="images/design-3.png" alt="" />
						<h3>DESIGN</h3>
						<p>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,</p>
					</div>
				</div>
				<div class="col-md-3 design-left">
					<div class="design-text">
						<img src="images/design-4.png" alt="" />
						<h3>BUILD</h3>
						<p>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,</p>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--End-design-->
	<!--start-work-->
	<div class="work">
		<div class="container">
			<div class="work-top">
				<h3>OUR LATEST WORK</h3>
			</div>
			<div class="work-btm">
			<div  id="top" class="callbacks_container">
				<ul class="rslides" id="slider5">
					<li>	
							<div class="work-bottom">
								<div class="col-md-6 work-left">
									<img src="images/work-1.jpg" alt="">
								</div>
								<div class="col-md-6 work-right">
									<div class="work-mian">
										<p>PROJECT NAME<span class="one">: Project name here</span></p>
										<p>LOCATION<span class="two">: Austin, TX</span></p>
										<p>OWNER<span class="tre">: John Doe</span></p>
										<p>PROJECT START<span class="fvr">: Feb 2013</span></p>
										<p>PROJECT END<span class="fve">: JUNE 2014</span></p>
									</div>
										<div class="work-one">
											<p>DESCRIPTION<label>:</label><span>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus, Vivamus viverra nibh in quam bibendum interdum.  Duis convallis est ante, id pulvinar tortor tempus sed.  Pellentesque nulla tellus,</span></p>
										</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="pop-up">
								<a class="play-icon popup-with-zoom-anim" href="#small-dialog"><span> </span><img src="images/pop-up.png" alt="" /></a>
							</div>
						</li>
						<li>	
							<div class="work-bottom">
								<div class="col-md-6 work-left">
									<img src="images/work-2.jpg" alt="">
								</div>
								<div class="col-md-6 work-right">
									<div class="work-mian">
										<p>PROJECT NAME<span class="one">: Project name here</span></p>
										<p>LOCATION<span class="two">: Austin, TX</span></p>
										<p>OWNER<span class="tre">: John</span></p>
										<p>PROJECT START<span class="fvr">: JUNE 2013</span></p>
										<p>PROJECT END<span class="fve">: JAN 2014</span></p>
									</div>
										<div class="work-one">
											<p>DESCRIPTION<label>:</label><span> Viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus, Vivamus viverra nibh in quam bibendum interdum.  Duis convallis est ante, id pulvinar tortor tempus sed.  Pellentesque nulla tellus,</span></p>
										</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="pop-up">
								<a class="play-icon popup-with-zoom-anim" href="#small-dialog1"><span> </span><img src="images/pop-up.png" alt="" /></a>
							</div>
						</li>
						<li>	
							<div class="work-bottom">
								<div class="col-md-6 work-left">
									<img src="images/work-3.jpg" alt="">
								</div>
								<div class="col-md-6 work-right">
									<div class="work-mian">
										<p>PROJECT NAME<span class="one">: Project name here</span></p>
										<p>LOCATION<span class="two">: Austin, TX</span></p>
										<p>OWNER<span class="tre">: Doe</span></p>
										<p>PROJECT START<span class="fvr">: NOV 2013</span></p>
										<p>PROJECT END<span class="fve">: FEB 2014</span></p>
									</div>
										<div class="work-one">
											<p>DESCRIPTION<label>:</label><span>Vivamus quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus, Vivamus viverra nibh in quam bibendum interdum.  Duis convallis est ante, id pulvinar tortor tempus sed.  Pellentesque nulla tellus,</span></p>
										</div>
								</div>
								<div class="clearfix"></div>
							</div>
							<div class="pop-up">
								<a class="play-icon popup-with-zoom-anim" href="#small-dialog2"><span> </span><img src="images/pop-up.png" alt="" /></a>
							</div>
						</li>
							</ul>
						</div>
					<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--End-work-->	
	<!--Slider-Starts-Here-->
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider5").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: true,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			    });
			  </script>
			<!--End-slider-script-->
	<!---pop-up-box---->
		 <script type="text/javascript" src="js/modernizr.custom.min.js"></script>    
	 <!---//pop-up-box---->
	 <div id="small-dialog" class="mfp-hide">
						<div class="login">
							<img src="images/work-1.jpg" alt="" />
						</div>
	</div>
	<div id="small-dialog1" class="mfp-hide">
						<div class="login">
							<img src="images/work-2.jpg" alt="" />
						</div>
	</div>
	<div id="small-dialog2" class="mfp-hide">
						<div class="login">
							<img src="images/work-3.jpg" alt="" />
						</div>
	</div>				
					<script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
						});
				</script>			
	<!--start-footer-->
	<!-- requried-jsfiles-for owl -->
			<script>
				$(document).ready(function() {
					$("#owl-demo").owlCarousel({
						items : 5,
						lazyLoad : true,
						autoPlay : true,
						pagination : false,
					});
				});
			</script>
		<!-- //requried-jsfiles-for owl -->
	<!--start-project-->
		<!-- start content_slider -->
	<div class="project">
		<div id="example1">
			<div id="owl-demo" class="owl-carousel text-center">
				<div class="item">
					<a href="images/zoom-1.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-1.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-2.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-2.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-3.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-3.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-4.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-4.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-5.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-5.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-1.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-1.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-2.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-2.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-3.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-3.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-4.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-4.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
				<div class="item">
					<a href="images/project-5.jpg" title="Home" rel="title1">
						<img class="lazyOwl" data-src="images/project-5.jpg" alt="name">
					</a>
					<div class="project-name">
						<p>Project title here</p>
						<span> </span>
					</div>
				</div>
			</div>
		</div>
	</div>
			<!--//sreen-gallery-cursual---->
	<!--end-project-->	
	<!--start-clients-->	
	<div class="clients">
		<div class="container">
			<div class="clients-top">
				<h3>WE <span>LOVE</span> OUR CLIENTS THEY <span>LOVE</span> US!!</h3>
			</div>
			<div class="clients-btm">
				<div  id="top" class="callbacks_container">
			 	<ul class="rslides" id="slider6">
			       <li>
					<div class="clients-bottom">
						<p>“Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,”</p>
						<h4>- BIN BURHAN <span>(CEO. UniqueGraph)</span></h4>
					</div>
				</li>
				<li>
					<div class="clients-bottom">
						<p>“Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,”</p>
						<h4>- BIN <span>(CEO. UniqueGraph)</span></h4>
					</div>
				</li>
				<li>
					<div class="clients-bottom">
						<p>“Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,”</p>
						<h4>- BURHAN <span>(CEO. UniqueGraph)</span></h4>
					</div>
				</li>
			  </ul>
			</div>
	 		<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--end-clients-->
	<!--Slider-Starts-Here-->
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider6").responsiveSlides({
			        auto: true,
			        pager: false,
			        nav: false,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			    });
			  </script>
			<!--End-slider-script-->	
	<!--start-news-->	
	<div class="news">
		<div class="container">
			<div class="news-top">
				<h3>OUR LATEST NEWS</h3>
				<p>be always on the wave of latest news and updates</p>
			</div>
			<div class="news-bottom">
				<div class="col-md-4 news-left">
					<img src="images/news-1.jpg" alt="" />
					<div class="news-main">
						<h4>Upadate news title</h4>
						<ul>
							<li><span>By:Admin</span></li>
							<li><span>01/01/2014</span></li>
							<li><span>5 Comment</span></li>
						</ul>
						<p>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,id pulvinar tortor tempus sed. Pellentesque nulla tellus,</p>
						<div class="news-btn">
							<a href="#">Read More</a>
						</div>
					</div>
				</div>
				<div class="col-md-4 news-left">
					<img src="images/news-2.jpg" alt="" />
					<div class="news-main">
						<h4>Upadate news title</h4>
						<ul>
							<li><span>By:Admin</span></li>
							<li><span>01/01/2014</span></li>
							<li><span>5 Comment</span></li>
						</ul>
						<p>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,id pulvinar tortor tempus sed. Pellentesque nulla tellus,</p>
						<div class="news-btn">
							<a href="#">Read More</a>
						</div>
					</div>
				</div>
				<div class="col-md-4 news-left">
					<img src="images/news-3.jpg" alt="" />
					<div class="news-main">
						<h4>Upadate news title</h4>
						<ul>
							<li><span>By:Admin</span></li>
							<li><span>01/01/2014</span></li>
							<li><span>5 Comment</span></li>
						</ul>
						<p>Vivamus viverra nibh in quam bibendum interdum. Duis convallis est ante, id pulvinar tortor tempus sed. Pellentesque nulla tellus,id pulvinar tortor tempus sed. Pellentesque nulla tellus,</p>
						<div class="news-btn">
							<a href="#">Read More</a>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="planning">
				<p>PRECISE PROJECT PLANNING, MODERN DESIGN AND SATISFYING RESULTS!</p>
			</div>
		</div>
	</div>
	<!--end-news-->	
	<!--start-touch-->	
	<div class="touch">
		<div class="container">
			<div class="touch-main">
				<div class="col-md-4 touch-left">
					<h3>Get in touch</h3>
					<p>34789 Magic City Avenue, Los Angeles, CA, 94048</p>
					<p>Call: 123 456 789<p>
					<p>E-mail:<a href="mailto:[email protected]">[email protected]</a>
	   					<span><a href="mailto:[email protected]">[email protected]</a></span></p>
				</div>
				<div class="col-md-4 touch-left">
					<h3>@twitter</h3>
					<p>@twitterCheck out this great #codecanyon item 'Responsive Login, Sign Up and Payment Form Wizard' codecanyon.net/item/responsiv…</p>
					<label>about 2days ago</label>
				</div>
				<div class="col-md-4 touch-right">
					<ul>
						<li><a href="#"><span class="fb"> </span></a></li>
						<li><a href="#"><span class="twt"> </span></a></li>
						<li><a href="#"><span class="g"> </span></a></li>
						<li><a href="#"><span class="p"> </span></a></li>
						<li><a href="#"><span class="drb"> </span></a></li>
					</ul>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!--end-touch-->	
	<!--start-footer-->	
	<div class="footer">
		<div class="container">
			<div class="footer-text">
				<p>Template By<a href="http://w3layouts.com/"> W3layouts</a></p>
				<a href="#home" class="scroll"><img src="images/top-img.png" alt=""></a>
			</div>
		</div>
	</div>
	<!--End-footer-->			



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 黃色 設計 設計公司
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表