红色宽屏风格响应式房地产经纪公司网页模板



5 17 6



模板描述:红色 宽屏 响应式 房地产经纪 企业网页模板,红色宽屏风格响应式房地产经纪公司网页模板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="css/font-awesome.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=devanagari,latin-ext" rel="stylesheet">

2. HTML代码

<!-- //header -->
<header class="py-4">
	<div class="container">
			<div id="logo">
				<h1> <a href="index.html"><span class="fa fa-home" aria-hidden="true"></span> Estate Town</a></h1>
			</div>
		<!-- nav -->
		<nav class="d-lg-flex">
			<label for="drop" class="toggle">Menu</label>
			<input type="checkbox" id="drop" />
			<ul class="menu mt-2 ml-auto">
				<li class="mr-lg-4 mr-3 active"><a href="#">Home</a></li>
				<li class="mr-lg-4 mr-3"><a href="services.html">Services</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="inner-ul">
					<li><a href="#about">About</a></li>
					<li><a href="#agents">Agents</a></li>
				<li><a href="#partners">Partners</a></li>
				</ul>
				</li>
				<li class="mr-lg-4 mr-3"><a href="properties.html">Properties</a></li>
				<li class="mr-lg-4"><a href="contact.html">Contact</a></li>
			</ul>
			<div class="login-icon mt-2">
				<a class="user" href="#popup3"><span class="fa fa-user-circle-o" aria-hidden="true"></span></a>
			</div>
		</nav>
		<div class="clear"></div>
		<!-- //nav -->
	</div>
</header>
<!-- //header -->
<!-- banner -->
<div class="banner" id="home">
	<div class="container">
		<div class="row banner-text">
			<div class="slider-info col-lg-6">
				<div class="agileinfo-logo mt-lg-5 pt-md-3">
					<h2>Welcome To Our Real Estate Agency </h2>
					<p>Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla
					sollicit udin velit. Sed porttitor orci vel fermentum maximus. Sed Curabitur ut turpis massa leo id viverra.</p>
				</div>
				<a class="btn mr-2 text-capitalize" href="#popup1">read more </a>
				<a class="btn text-capitalize" href="#popup2">watch video </a>
			</div>
			<div class="col-lg-6 col-md-8 mt-lg-0 mt-5 banner-image text-center">
				<img src="images/home.png" alt="" class="img-fluid"/>
				<h4 class=" mt-3 text-white text-center">Build Your Dream House </h4>
			</div>
		</div>
	</div>
</div>
<!-- //banner -->
<!-- about -->
<section class="about py-5" id="about">
	<div class="container py-md-5">
		<div class="row">
			<div class="col-lg-3 col-md-5 about-left">	
				<h3 class="heading mb-5">About us</h3>
				<div class="grid">
					<h4>120+ <span>Properties</span></h4>
				</div>
				<div class="grid my-3">
					<h4>142 <span class="ml-4">Professionals</span></h4>
				</div>
				<div class="grid my-3">
					<h4>212 <span class="ml-4">Property Sales </span></h4>
				</div>
				<div class="grid">
					<h4>120+ <span>Happy Clients </span></h4>
				</div>
			</div>
			<div class="col-lg-5 col-md-7 about-text mt-md-0 mt-5">
				<h3>Welcome To Our Real Estate Agency Website </h3>
				<p class="mt-3">Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla uter sollicitudin velit. Sed porttitor orci vel ferm semper at vel, ultrices in ligula.</p>
				<p class="mt-2">Integer pulvinar leo id viverra feugiat. Pellentesque libero justo, semper at tempus vel, ultrices in ligula. Nulla uter
				sollicitudin velit. Sed porttitor orci vel fermentum elit maximus. Curabitur ut turpis massa in condimentum libero. Pellentesque maximus.</p>
			</div> 
			<div class="col-lg-4 col-md-6 about-img">
				<img src="images/about.png" alt="" class="img-fluid"/>
			</div>
		</div>
	</div>
</section>
<!-- //about -->
<!-- why choose us -->
<section class="choose bg-light py-5">
	<div class="container py-md-3">
		<h3 class="heading mb-5"> What are you looking for?</h3>
		<div class="feature-grids row">
			<div class="col-lg-3 col-sm-6">
				<div class="f1 bg-white icon1 p-4">
					<span class="fa fa-building"></span>
					<h3 class="my-3">Apartments</h3>
					<p>Excepteur sint occaecat non proident maximus.</p>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-sm-0 mt-4">
				<div class="f1 bg-white icon2 p-4">
					<span class="fa fa-home"></span>
					<h3 class="my-3">Houses</h3>
					<p>Excepteur sint occaecat non proident maximus.</p>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4">
				<div class="f1 bg-white icon3 p-4">
					<span class="fa fa-dollar"></span>
					<h3 class="my-3">Properties</h3>
					<p>Excepteur sint occaecat non proident maximus.</p>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 mt-lg-0 mt-4">
				<div class="f1 bg-white icon4 p-4">
					<span class="fa fa-cogs"></span>
					<h3 class="my-3">Sales</h3>
					<p>Excepteur sint occaecat non proident maximus.</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //why choose us -->
<!-- Offered Services -->
<section class="process py-5" id="services">
	<div class="container py-md-3">
		<h3 class="heading mb-5">Offered Services</h3>
		<div class="row process-grids">
			<div class="col-lg-3 col-md-6 my-lg-4 w3pvt-ab position-relative">
				<div class="">
					<img src="images/ser1.png" alt="" class="img-fluid rounded-circle">
				</div>
				<h4 class="feed-title my-3">Rental Apartments</h4>
				<p> Excepteur ut occaecat ipsum proident, sunt int culpa quis. Phasellus lacinia id erat risu quis sunt int dolor.</p>
			</div>
			<div class="col-lg-3 col-md-6 my-lg-4 mt-md-0 mt-4 w3pvt-ab position-relative">
				<div class="">
					<img src="images/ser2.png" alt="" class="img-fluid rounded-circle">
				</div>
				<h4 class="feed-title my-3">Houses For Sale</h4>
				<p> Excepteur ut occaecat ipsum proident, sunt int culpa quis. Phasellus lacinia id erat risu quis sunt int dolor.</p>
			</div>
			<div class="col-lg-3 col-md-6 my-lg-4 mt-sm-5 mt-4 w3pvt-ab position-relative">
				<div class="">
					<img src="images/ser3.png" alt="" class="img-fluid rounded-circle">
				</div>
				<h4 class="feed-title my-3">Property Sale</h4>
				<p> Excepteur ut occaecat ipsum proident, sunt int culpa quis. Phasellus lacinia id erat risu quis sunt int dolor.</p>
			</div>
			<div class="col-lg-3 col-md-6 mt-lg-4 mt-sm-5 mt-4 w3pvt-ab">
				<div class="">
					<img src="images/ser4.png" alt="" class="img-fluid rounded-circle">
				</div>
				<h4 class="feed-title my-3">Construction</h4>
				<p> Excepteur ut occaecat ipsum proident, sunt int culpa quis. Phasellus lacinia id erat risu quis sunt int dolor.</p>
			</div>
		</div>
	</div>
</section>
<!-- Offered Services -->
<!-- video -->
<section class="video bg-light py-5" id="video">
	<div class="container">
		<div class="inner-sec-w3ls py-lg-5 py-3">
			<div class="row">
				<div class="col-lg-6 video-right px-lg-5 px-2">
					<h3 class="tittle-w3">Perfect Business Real Estate Agency</h3>
					<p class="mt-4">Lorem ipsum dolor sit amet Neque porro quisquam est qui dolorem Lorem int ipsum dolor sit amet when an unknown printer took a galley of type.Vivamus id tempor felis. Cras sagittis mi sit amet malesuada mollis. Mauris porroinit consectetur cursus tortor vel interdum dolorem Lorem int ipsum dolor sit amet.</p>
				</div>
				<div class="col-lg-6 video-img mt-lg-0 mt-4">
					<img src="images/right.png" alt="" class="img-fluid">
				</div>
			</div>
		</div>
	</div>
</section>
<!-- //video -->
<!-- Team page -->
<section class="section py-5" id="agents">
    <div class="container py-lg-5">
		<h3 class="heading mb-5"> Our Agents Team</h3>
		<div class="section_header">
			<div class="row">
				<div class="col-md-3 col-sm-6">
					<div class="teamy_preview">
						<img src="images/team1.jpg" class="teamy_avatar" alt="The demo photo">
					</div>
					<div class="teamy_content mt-3">
						<h3 class="teamy_name">Suzan Lois</h3>
						<span class="teamy_post">Estate Agent</span>
					</div>
					<div class="teamy_back">
						<div class="teamy_back-inner">
							<a href="#0" class="social"> 
								<span class="fa fa-facebook"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-twitter"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-envelope-open"></span>
							</a>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 mt-sm-0 mt-4">
					<div class="teamy_preview">
						<img src="images/team2.jpg" class="teamy_avatar" alt="The demo photo">
					</div>
					<div class="teamy_content mt-3">
						<h3 class="teamy_name">Dora Caelan</h3>
						<span class="teamy_post">Estate Agent</span>
					</div>
					<div class="teamy_back">
						<div class="teamy_back-inner">
							<a href="#0" class="social"> 
								<span class="fa fa-facebook"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-twitter"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-envelope-open"></span>
							</a>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 mt-md-0 mt-4">
					<div class="teamy_preview">
						<img src="images/team3.jpg" class="teamy_avatar" alt="The demo photo">
					</div>    
					<div class="teamy_content mt-3">
						<h3 class="teamy_name">Rosanna</h3>
						<span class="teamy_post">Estate Agent</span>
					</div>
					<div class="teamy_back">
						<div class="teamy_back-inner">
							<a href="#0" class="social"> 
								<span class="fa fa-facebook"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-twitter"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-envelope-open"></span>
							</a>
						</div>
					</div>
				</div>
				<div class="col-md-3 col-sm-6 mt-md-0 mt-4">
					<div class="teamy_preview">
						<img src="images/team4.jpg" class="teamy_avatar" alt="The demo photo">
					</div>
					<div class="teamy_content mt-3">
						<h3 class="teamy_name">Rose Alpha</h3>
						<span class="teamy_post">Estate Agent</span>
					</div>
					<div class="teamy_back">
						<div class="teamy_back-inner">
							<a href="#0" class="social"> 
								<span class="fa fa-facebook"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-twitter"></span>
							</a>
							<a href="#0" class="social">
								<span class="fa fa-envelope-open"></span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</section>
<!-- //Team page -->
<!--/Partners-->
<section class="partners py-5" id="partners">
	<div class="container py-md-3">
		<h3 class="heading text-white mb-5">Our Estate Partners</h3>
		<div class="inner-sec-w3ls">
			<div class="sponsers-icon text-center">
				<ul class="list-unstyled partners-icon row">
					<li class="col-md-2 col-4">
						<i class="fa fa-codepen" aria-hidden="true"></i>
					</li>
					<li class="col-md-2 col-4 border-left border-right">
						<i class="fa fa-lastfm" aria-hidden="true"></i>
					</li>
					<li class="col-md-2 col-4 border-right">
						<i class="fa fa-codiepie" aria-hidden="true"></i>
					</li>
					<li class="col-md-2 col-4 border-right mt-md-0 mt-3">
						<i class="fa fa-drupal" aria-hidden="true"></i>
					</li>
					<li class="col-md-2 col-4 border-right mt-md-0 mt-3">
						<i class="fa fa-dashcube" aria-hidden="true"></i>
					</li>
					<li class="col-md-2 col-4 mt-md-0 mt-3">
						<i class="fa fa-skyatlas" aria-hidden="true"></i>
					</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!-- //Partners -->
<!-- footer -->
<footer class="footer-emp-w3ls py-5">
	<div class="container py-xl-5 py-lg-3">
		<div class="row footer-top">
			<div class="col-lg-4 col-sm-6 footer-grid-wthree">
				<h1 class="footer-title text-uppercase text-white mb-4">Who We Are</h1>
				<div class="contact-info">
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium ipsum doloremque elit laudantium, totam rem
						aperiam, eaque ipsa quae. Excepteur ut occaecat proident, sunt voluptatem et accusantium doloremque elit dolor.</p>
					<h4 class="mt-3">Trusted by more than 1000+ people</h4>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 footer-grid-wthree mt-sm-0 mt-5">
				<h3 class="footer-title text-uppercase text-white mb-4">Latest News</h3>
				<div class="contact-info">
					<div class="footer-style-w3ls">
						<h4 class="mb-2"><span class="fa mr-1 fa-twitter"></span> Sed ut piciatis unde natus</h4>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem....</p>
						<p class="date">23 Nov 2018.</p>
					</div>
					<div class="footer-style-w3ls mt-3">
						<h4 class="mb-2"><span class="fa mr-1 fa-twitter"></span> Modi tempra incunt sit</h4>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem....</p>
						<p class="date">24 Nov 2018.</p>
					</div>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 footer-grid-wthree mt-lg-0 mt-5">
				<h3 class="footer-title text-uppercase text-white mb-4">Contact Us</h3>
				<div class="contact-info">
					<div class="footer-style-w3ls">
						<h4 class="mb-2"> <span class="fa mr-1 fa-map-marker"></span> Location</h4>
						<p>Estate Agency, 5th cross, 4th building, New York City.</p>
					</div>
					<div class="footer-style-w3ls my-3">
						<h4 class="mb-2"><span class="fa mr-1 fa-phone"></span> Phone</h4>
						<p>+121 098 8907 9987</p>
					</div>
					<div class="footer-style-w3ls">
						<h4 class="mb-2"><span class="fa mr-1 fa-envelope-open"></span> Email</h4>
						<p><a href="https://www.51qianduan.com/">51前端</a></p>
					</div>
				</div>
			</div>
			<div class="col-lg-2 col-sm-6 footer-grid-wthree mt-lg-0 mt-5">
				<h2 class="footer-title text-uppercase text-white mb-4">Quick Links</h2>
				<ul class="links list-unstyled">
					<li>
						<a class="" href="#home"> Home</a>
					</li>
					<li>
						<a class="" href="#about"> About Us</a>
					</li>
					<li>
						<a class="" href="services.html"> Services Page</a>
					</li>
					<li>
						<a class="" href="#">Agents</a>
					</li>
					<li>
						<a class="" href="properties">Properties Page</a>
					</li>
					<li>
						<a class="" href="contact.html">Contact Page</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<a href="https://www.51qianduan.com/">51前端</a>
	<div class="copy-right-top border-top mt-4">
		<p class="copy-right text-center pt-xl-5 pt-4">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
		</p>
	</div>
</footer>
<!-- //footer -->
<!-- popup -->
<div id="popup1" class="popup-effect">
	<div class="popup">
		<img src="images/home.png" alt="Popup Image" class="img-fluid" />
		<p class="mt-4 ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
			laudantium, totam rem aperiam, eaque ipsa quae ab illo quasi architecto beatae vitae dicta
			sunt explicabo.</p>
		<a class="close" href="#">&times;</a>
	</div>
</div>
<!-- //popup -->
<!-- popup -->
<div id="popup2" class="popup-effect">
	<div class="popup">
		<iframe src=""></iframe>
		<p class="mt-4 ">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
			laudantium, totam rem aperiam, eaque ipsa quae ab illo quasi architecto beatae vitae dicta
			sunt explicabo.</p>
		<a class="close" href="#">&times;</a>
	</div>
</div>
<!-- //popup -->
<!-- popup for login -->
<div id="popup3" class="popup-effect">
	<div class="popup">
		<div class="login px-sm-4 mx-auto mw-100">
			<h5 class="text-center mb-4">Login to Estate Town</h5>
			<form action="#" method="post">
				<div class="form-group">
					<label class="mb-2">Email address</label>
					<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="" required="">
					<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
				</div>
				<div class="form-group">
					<label class="mb-2">Password</label>
					<input type="password" class="form-control" id="exampleInputPassword1" placeholder="" required="">
				</div>
				<button type="submit" class="btn btn-primary submit mt-2">Login</button>
				<p class="text-center mt-2">
					<a href="#popup4"> Don't have an account?</a>
				</p>
			</form>
		</div>
		<a class="close" href="#">&times;</a>
	</div>
</div>
<!-- //popup for login -->
<!-- popup for register -->
<div id="popup4" class="popup-effect">
	<div class="popup">
		<div class="login px-sm-4 mx-auto mw-100">
			<h5 class="text-center mb-4">Register Now</h5>
			<form action="#" method="post">
				<div class="form-group">
					<label>Full Name</label>
					<input type="text" class="form-control" id="validationDefault01" placeholder="" required="">
				</div>
				<div class="form-group">
					<label>Phone Number</label>
					<input type="text" class="form-control" id="validationDefault02" placeholder="" required="">
				</div>
				<div class="form-group">
					<label class="mb-2">Password</label>
					<input type="password" class="form-control" id="password1" placeholder="" required="">
				</div>
				<div class="form-group">
					<label>Confirm Password</label>
					<input type="password" class="form-control" id="password2" placeholder="" required="">
				</div>
				<button type="submit" class="btn btn-primary submit">Register</button>
				<p class="text-center mt-3">
					<a href="#">By clicking Register, I agree to your terms</a>
				</p>
			</form>
		</div>
		<a class="close" href="#">&times;</a>
	</div>
</div>
<!-- //popup for register -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 红色 大气 霸气 房地产 房地产公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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