黃色簡潔風格的房地產銷售企業網站源碼下載



6 23 8



模板描述:黃色簡潔風格 房地產銷售 企業網站,黃色簡潔風格的房地產銷售企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Text+Me+One' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery-2.2.3.min.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代碼

	<!-- banner --> 
	<div class="banner">    
		<!-- header --> 
		<div class="w3header">
			<div class="container">
				<nav class="navbar navbar-default">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<h1><a  href="index.html">TOWNSHIP</a></h1> 
					</div>
					<!-- navbar-header -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
						<ul class="nav navbar-nav navbar-right">
							<li><a href="index.html" class="active">Home</a></li>
							<li><a href="about.html">About</a></li> 
							<li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
								<ul class="dropdown-menu">
									<li><a href="icons.html">Web Icons</a></li>
									<li><a href="codes.html">Short Codes</a></li>
								</ul>
							</li> 
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="contact.html">Contact Us</a></li>
						</ul> 
						<div class="clearfix"> </div>	
					</div>
				</nav>
			</div>  
		</div>
		<!-- //header -->
		<div class="banner-info">
			<div class="container">
				<section class="slider">
					<div class="flexslider">
						<ul class="slides">
							<li>
								<div class="agileits_w3layouts_banner_info">
									<h3>Residential and commercial building, remodeling &amp; renovations experience</h3>
									<div class="agileits_w3layouts_more">
										<a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
									</div>
									<span class="border-modern-item-1"></span>
									<span class="border-modern-item-2"></span>
									<span class="border-modern-item-3"></span>
									<span class="border-modern-item-4"></span>
								</div>
							</li>
							<li>
								<div class="agileits_w3layouts_banner_info">
									<h3>Entrust us with your project and you will not be dissapointed!</h3>
									<div class="agileits_w3layouts_more">
										<a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
									</div>
									<span class="border-modern-item-1"></span>
									<span class="border-modern-item-2"></span>
									<span class="border-modern-item-3"></span>
									<span class="border-modern-item-4"></span>
								</div>
							</li>
							<li>
								<div class="agileits_w3layouts_banner_info">
									<h3>Residential and commercial building, remodeling &amp; renovations experience</h3>
									<div class="agileits_w3layouts_more">
										<a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
									</div>
									<span class="border-modern-item-1"></span>
									<span class="border-modern-item-2"></span>
									<span class="border-modern-item-3"></span>
									<span class="border-modern-item-4"></span>
								</div>
							</li>
						</ul>
					</div>
				</section>
			<!-- flexSlider -->
				<script type="text/javascript">
					$(window).load(function(){
					  $('.flexslider').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				</script>
			<!-- //flexSlider -->
			</div>
		</div>
	</div>	 
	<!-- //banner --> 
	<!-- social-icons --> 
	<div class="social-wthree-icons bnragile-icons">
		<ul>
			<li><a href="#" class="fa fa-facebook icon icon-border facebook"> </a></li>
			<li><a href="#" class="fa fa-twitter icon icon-border twitter"> </a></li>
			<li><a href="#" class="fa fa-google-plus icon icon-border googleplus"> </a></li>
			<li><a href="#" class="fa fa-dribbble icon icon-border dribbble"> </a></li> 
		</ul>
			<div class="clearfix"> </div>
	</div>  
	<!-- //social-icons --> 
	<!-- welcome -->
 	<div class="welcome">
		<div class="container">
			<div class="ab-w3l-spa">
				<label class="wel"></label>
				<h2 class="w3ls_head">Welcome </h2>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. ever since the 1500s.Itaque earum rerum hic tenetur a sapiente delectus reiciendis maiores hasellusMaecenas ac hendrerit purus. Lorem ipsum dolor sit amet.Lorem Ipsum is simply dummy text of the printing and typesetting industry</p> 
				<div class="agileits_w3layouts_more">
					<a href="#" data-toggle="modal" data-target="#myModal">Read More</a>
				</div>
			</div>
				<!-- services -->
			<div class="services">
				<div class="agileits-services">
					<div class="services-right-grids">
						<div class="col-sm-4 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-anchor" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci enim, posuere sed tincidunt et, pellentesque eget mi.</p>
							</div>
						</div>
						<div class="col-sm-4 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-comment" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci enim, posuere sed tincidunt et, pellentesque eget mi.</p>
							</div>
						</div>
						<div class="col-sm-4 services-right-grid">
							<div class="services-icon hvr-radial-in">
								<i class="fa fa-heartbeat" aria-hidden="true"></i>
							</div>
							<div class="services-icon-info">
								<h5>Phasellus suscipit</h5>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci enim, posuere sed tincidunt et, pellentesque eget mi.</p>
							</div>
						</div>
							<div class="clearfix"> </div>
					</div>
				</div>
			</div>
	<!-- //services -->
		</div>
    </div>
	<!-- //welcome -->
	<!-- mid-content -->
	<div class="mid-content-w3agile">
		<div class="col-md-6 mid-content-left">
			<h3>pellentesque vitae nulla</h3>
			<p><span>1.</span>Nulla lectus erat, tincidunt ut tincidunt quis, pellentesque vitae nulla. Sed aliquet tincidunt ipsum eu dictum. Fusce eu euismod dui. Donec nisl nibh, malesuada eu dolor a, fermentum sodales lacus. In hac habitasse platea dictumst.</p>
			<p><span>2.</span>Nulla lectus erat, tincidunt ut tincidunt quis, pellentesque vitae nulla. Sed aliquet tincidunt ipsum eu dictum. Fusce eu euismod dui. Donec nisl nibh, malesuada eu dolor a, fermentum sodales lacus. In hac habitasse platea dictumst. </p>
			<p><span>3.</span>Nulla lectus erat, tincidunt ut tincidunt quis, pellentesque vitae nulla. Sed aliquet tincidunt ipsum eu dictum. Fusce eu euismod dui. Donec nisl nibh, malesuada eu dolor a, fermentum sodales lacus. In hac habitasse platea dictumst. </p>
		</div>
		<div class="col-md-6 mid-content-right">
			<div class="services-grids">
				<div class="col-md-6 services-grid">
					<div class="services-grid-info effect-1">
						<h4>Aenean</h4>
					</div>
				</div>
				<div class="col-md-6 services-grid">
					<div class="services-grid-info services-grid-info1 effect-1">
						<h4>Maecenas</h4>
					</div>
				</div>
				<div class="col-md-6 services-grid">
					<div class="services-grid-info services-grid-info2 effect-1">
						<h4>Vivamus</h4>
					</div>
				</div>
				<div class="col-md-6 services-grid">
					<div class="services-grid-info services-grid-info3 effect-1">
						<h4>Aliquam </h4>
					</div>
				</div>
				<div class="clearfix"> </div>
		</div>
	</div>
	<div class="clearfix"> </div>
	</div>
	<!-- //mid-content -->
	<!-- ad -->
<div class="container">
<!-- 自適應廣告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1112982054462406"
     data-ad-slot="7771152246"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- /ad -->
	<!-- bestoffers -->
	<div class="bestoffers-agile-info">
		<div class="container">
			<div class="ab-w3l-spa">
				<label class="wel"></label>
				<h2 class="w3ls_head">Best Offers</h2>
			</div>
			<div class="offers-w3ls">
				<div class="col-md-4 offers-w3ls-grid">
					<img src="images/g6.jpg" alt=" " class="img-responsive">
					<h4>ducimus qui</h4>
					<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
					<h5>$500.00</h5>
				</div>
				<div class="col-md-4 offers-w3ls-grid">
					<img src="images/g8.jpg" alt=" " class="img-responsive">
					<h4>excepturi sint</h4>
					<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
					<h5>$450.00</h5>
				</div>
				<div class="col-md-4 offers-w3ls-grid">
					<img src="images/g9.jpg" alt=" " class="img-responsive">
					<h4>accusamus et</h4>
					<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</p>
					<h5>$400.00</h5>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //bestoffers -->
		<!-- testimonials -->
	<div class="testimonials">
		<div class="container">
			<div class="ab-w3l-spa">
				<label class="wel"></label>
				<h3 class="w3ls_head">Testimonials</h3>
			</div>
			<div class="wthree_testimonial_grids">
				<div class="col-md-6 wthree_testimonial_grid_left">
					<div class="w3ls_testimonial_grid_left_grid">
						<div class="col-xs-4 agileinfo_testimonials_left">
							<img src="images/f2.jpg" alt=" " class="img-responsive" />
							<h4>John Crisp</h4>
							<p>Curabitur</p>
						</div>
						<div class="col-xs-8 agileinfo_testimonials_right">
							<div class="agileits_testimonials_right_grid">
								<p>Donec euismod consequat mi, pretium volutpat nibh tempor nec. 
									Quisque id justo sagittis iaculis.</p>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="w3lxy">
						<h5>Quisque et massa odio. Maecenas mi turpis, viverra ac rutrum  </h5>
						<p>Nullam mollis leo magna, in condimentum odio vestibulum id. Phasellus condimentum iaculis libero ut commodo. Aenean tincidunt diam nec neque egestas euismod. Quisque egestas purus vel aliquam condimentum. Fusce sed luctus dui, vitae tincidunt orci. Curabitur enim nunc, sagittis sit amet maximus ac, egestas eu nulla. Integer nec mattis quam, sagittis ultrices mauris. Aenean eu semper mi. </p>
					</div>
				</div>
				<div class="col-md-6 wthree_testimonial_grid_right">
					<h5>Maecenas mi turpis, viverra ac rutrum in, imperdiet sed ligula. </h5>
					<p>Nullam mollis leo magna, in condimentum odio vestibulum id. Phasellus condimentum iaculis libero ut commodo. Aenean tincidunt diam nec neque egestas euismod. Quisque egestas purus vel aliquam condimentum. Fusce sed luctus dui, vitae tincidunt orci. Curabitur enim nunc, sagittis sit amet maximus ac, egestas eu nulla. Integer nec mattis quam, sagittis ultrices mauris. Aenean eu semper mi. </p>
				<div class="w3ls_testimonial_grid_left_grid w3l_testimonial_grid_left_grid www">	
						<div class="col-xs-8 agileinfo_testimonials_right agileits_w3layouts_farm_man">
							<div class="agileits_testimonials_right_grid w3_testimonials_right_grid">
								<p>Cras et sapien vitae leo egestas fermentum. Sed condimentum dolor a quam 
									egestas commodo. Proin sed metus lacus.</p>
							</div>
						</div>
						<div class="col-xs-4 agileinfo_testimonials_left">
							<img src="images/f3.jpg" alt=" " class="img-responsive" />
							<h4>Thomus Carl</h4>
							<p>Maecenas</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //testimonials -->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="col-md-5 footer-grids">
				<h3>Subscribe</h3>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
				<form action="#" method="post">
					<input type="email" name="email" placeholder="Enter your email" required="">
					<input type="submit" value="">
				</form> 
			</div>
			<div class="col-md-4 footer-grids">
				<h3>Review</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sheets containing lorem lpsum passages sed do consectetur adipisicing elit.</p>
			</div> 
			<div class="col-md-3 footer-grids"> 
				<h3>Contact Me</h3>
				<p>123 T. Globel Place.<br>
				<span>Office: 908-0000</span>
				<span>Support to: <a href="mailto:[email protected]">[email protected]</a></span>
				</p>
			</div>
			<div class="clearfix"> </div> 
		</div>
	</div>
	<div class="footer-copy">
		<div class="container">
			<p>? 2017 Township. All rights reserved | Design by <a href="http://www.cqetom.live/">xmoban.cn</a></p>
		</div>
	</div>	
	<!-- //footer --> 
	<!-- //Modal1 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
		<!-- Modal1 -->
		<div class="modal-dialog">
			<!-- Modal content-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
							<h4>TOWNSHIP</h4>
							<img src="images/1.jpg" alt=" " class="img-responsive">
							<h5>We know what you love</h5>
							<p>Providing guests unique and enchanting views from their rooms with its exceptional amenities, makes Star Hotel one of bests in its kind.Try our food menu, awesome services and friendly staff while you are here.</p>
					</div>
				</div>
		</div>
	</div>
<!-- //Modal1 -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子