白色简洁形式html创意公司官网网页模板代码



7 25 9



模板描述:白色 简洁 html 创意公司官网 网页模板代码,白色简洁形式html创意公司官网网页模板代码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">

2. HTML代码

	<!-- main banner -->
	<div class="main-top" id="home">
		<!-- header -->
		<header>
				<!-- nav -->
				<nav class="py-lg-4 py-3 px-xl-5 px-lg-3 px-2">
					<div id="logo">
						<h1><a class="" href="index.html">Employment</a></h1>
					</div>
					<label for="drop" class="toggle">Menu</label>
					<input type="checkbox" id="drop" />
					<ul class="menu mt-2">
						<li class="active"><a href="index.html">Home</a></li>
						<li class="mx-lg-3 mx-md-2 my-md-0 my-2"><a href="#about">About Us</a></li>
						<li><a href="#services">Services</a></li>
						<li class="mx-lg-3 mx-md-2 my-md-0 my-2">
							<!-- First Tier Drop Down -->
							<label for="drop-2" class="toggle toogle-2">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>
								<li><a href="#gallery" class="drop-text">Gallery</a></li>
								<li><a href="#team" class="drop-text">Team</a></li>
								<li><a href="#blog" class="drop-text">Blog</a></li>
								<li><a href="#stats" class="drop-text">Statistics</a></li>
								<li><a href="#testi" class="drop-text">Testimonials</a></li>
							</ul>
						</li>
						<li><a href="#contact">Contact Us</a></li>
					</ul>
				</nav>
				<!-- //nav -->
		</header>
		<!-- //header -->
		<!-- banner -->
		<div class="main-w3pvt">
			<div class="container">
				<div class="style-banner text-center">
					<h4 class="mb-2">Welcome to Our Corporate Website!</h4>
					<h1 class="font-weight-bold mb-3">We <span>Help</span> Achieve Your <span>Biggest</span> Goals</h1>
					<p>Sed ut perspiciatis unde omnis iste natus error doloremque laudantium</p>
					<!-- popup button -->
					<a href="#popup1" style="max-width: 150px; margin: 0 auto;" class="btn button-style mt-sm-5 mt-4">Read
						More</a>
					<!-- //popup button -->
				</div>
			</div>
		</div>
		<!-- //banner -->
	</div>
	<!-- //main banner -->
	<!-- popup -->
	<div id="popup1" class="popup-effect">
		<div class="popup">
			<img src="images/blog3.jpg" 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 -->
	<!-- about -->
	<section class="about py-5" id="about">
		<div class="container py-xl-5 py-lg-3">
			<div class="row py-lg-4">
				<div class="col-lg-6 pr-xl-5 about-left">
					<h5 class="text-uppercase text-color let">Welcome to Our Website!</h5>
					<h3 class="text-black font-weight-bold let mt-3 mb-lg-5 mb-3">Your <span class="font-italic font-weight-light">Success</span>
						in Business <br>is Our Duty</h3>
					<h4 class="text-black font-weight-light let">Rich and Successful <br>Experience</h4>
				</div>
				<div class="col-lg-6 pl-xl-5 mt-lg-0 mt-4">
					<p>Donec consequat sapien ut leo cursus rhoncus. Nullam dui mi, vulputate ac metus
						at, semper varius orci. Nulla accumsan ac elit in congue. Class aptent taciti sociosqu ad litora torquent
						per conubia.</p>
					<p class="pt-4 mt-4 border-top"><span class="fa fa-quote-left text-color mr-3"></span>Donec consequat sapien ut
						leo
						cursus rhoncus. Nullam dui mi, vulputate ac metus
						at, semper varius orci. Nulla accumsan ac elit in congue. Class aptent taciti sociosqu ad
						litora torquent per.</p>
				</div>
			</div>
		</div>
	</section>
	<!-- //about -->
	<!-- about bottom -->
	<div class="banner-bottom py-5">
		<div class="d-flex grids-w3 py-xl-5 py-lg-3">
			<div class="col-lg-4 w3pvt-lauits_banner_bottom_left">
				<div class="w3pvt-lauinfo_banner_bottom_pos">
					<div class="row">
						<div class="col-sm-4 col-3 wthree_banner_bottom_grid_left icons-w3pvt1 text-right">
							<span class="fa fa-forumbee"></span>
						</div>
						<div class="col-sm-8 col-9 wthree_banner_bottom_grid_right">
							<h4 class="mb-3">Development</h4>
							<p>Morbi viverra lacus commodo felis semper lectus feugiat.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4 w3pvt-lauits_banner_bottom_left my-lg-0 my-4">
				<div class="w3pvt-lauinfo_banner_bottom_pos active">
					<div class="row">
						<div class="col-sm-4 col-3 wthree_banner_bottom_grid_left icons-w3pvt2 text-right">
							<span class="fa fa-line-chart"></span>
						</div>
						<div class="col-sm-8 col-9 wthree_banner_bottom_grid_right">
							<h4 class="mb-3">Integration</h4>
							<p>Morbi viverra lacus commodo felis semper lectus feugiat.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-lg-4 w3pvt-lauits_banner_bottom_left">
				<div class="w3pvt-lauinfo_banner_bottom_pos">
					<div class="row">
						<div class="col-sm-4 col-3 wthree_banner_bottom_grid_left icons-w3pvt3 text-right">
							<span class="fa fa-thumbs-o-up"></span>
						</div>
						<div class="col-sm-8 col-9 wthree_banner_bottom_grid_right">
							<h4 class="mb-3">Responsibility</h4>
							<p>Morbi viverra lacus commodo felis semper lectus feugiat.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //about bottom -->
	<!-- middle grid -->
	<section class="bottom-banner-w3layouts text-center">
		<div class="d-flex">
			<div class="col-lg-6 banner-about">
				<h3 class="title-wthree text-black mb-4">
					<span class="mb-2 text-color">Some Info</span>We are Ahead of the Market
				</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit sedc dnmo eiusmod tempor incididunt ut,elit sedc labore
					et dolore magna aliqua uta enim ad minim ven iam quis nostrud exercitation
					ullamco. Sed semper leo metus, a lacinia eros semper at. </p>
				<!-- button -->
				<a href="#about" class="btn button-style button-style-2 mt-sm-5 mt-4">Read More</a>
				<!-- //button -->
			</div>
			<div class="col-lg-6 p-lg-0 text-lg-right text-center mt-lg-0 mt-md-4">
				<img src="images/img.jpg" class="img-fluid" alt="">
			</div>
		</div>
	</section>
	<!-- //middle grid -->
	<!-- services -->
	<section class="services py-5" id="services">
		<div class="container py-xl-5 py-lg-3">
			<h3 class="title-wthree text-black text-center mb-5">
				<span class="text-color">What We Do?</span>Our Services
			</h3>
			<div class="row pt-lg-4">
				<div class="col-lg-4">
					<div class="d-flex services-box">
						<div class="icon-w3pvt">
							<span class="fa fa-line-chart"></span>
						</div>
						<!-- //Icon ends here -->
						<div class="service-content ml-4">
							<h3>Business Plan</h3>
							<p class="mt-3">
								Quisque sagittis lacus eu lorem sodalesd inagittis lacg enean adipiscing.
							</p>
						</div>
						<!-- //Service-content ends here -->
					</div>
				</div>
				<div class="col-lg-4 my-lg-0 my-3">
					<div class="d-flex services-box">
						<div class="icon-w3pvt">
							<span class="fa fa-pie-chart"></span>
						</div>
						<!-- //Icon ends here -->
						<div class="service-content ml-4">
							<h3>Marketing Plans</h3>
							<p class="mt-3">
								Quisque sagittis lacus eu lorem sodalesd inagittis lacg enean adipiscing.
							</p>
						</div>
						<!-- //Service-content ends here -->
					</div>
				</div>
				<div class="col-lg-4">
					<div class="d-flex services-box">
						<div class="icon-w3pvt">
							<span class="fa fa-bar-chart"></span>
						</div>
						<!-- //Icon ends here -->
						<div class="service-content ml-4">
							<h3>Optimize Deals</h3>
							<p class="mt-3">
								Quisque sagittis lacus eu lorem sodalesd inagittis lacg enean adipiscing.
							</p>
						</div>
						<!-- //Service-content ends here -->
					</div>
				</div>
			</div>
			<!-- .Row ends here -->
			<div class="row mt-lg-5 mt-3 py-lg-3">
				<div class="col-lg-4">
					<div class="d-flex services-box">
						<div class="icon-w3pvt">
							<span class="fa fa-internet-explorer"></span>
						</div>
						<!-- //Icon ends here -->
						<div class="service-content ml-4">
							<h3>Strategy</h3>
							<p class="mt-3">
								Quisque sagittis lacus eu lorem sodalesd inagittis lacg enean adipiscing.
							</p>
						</div>
						<!-- //Service-content ends here -->
					</div>
				</div>
				<div class="col-lg-4 my-lg-0 my-3">
					<div class="d-flex services-box">
						<div class="icon-w3pvt">
							<span class="fa fa-google-wallet"></span>
						</div>
						<!-- //Icon ends here -->
						<div class="service-content ml-4">
							<h3>Business Growth</h3>
							<p class="mt-3">
								Quisque sagittis lacus eu lorem sodalesd inagittis lacg enean adipiscing.
							</p>
						</div>
						<!-- //Service-content ends here -->
					</div>
				</div>
				<div class="col-lg-4">
					<div class="d-flex services-box">
						<div class="icon-w3pvt">
							<span class="fa fa-recycle"></span>
						</div>
						<!-- //Icon ends here -->
						<div class="service-content ml-4">
							<h3>Market Research</h3>
							<p class="mt-3">
								Quisque sagittis lacus eu lorem sodalesd inagittis lacg enean adipiscing.
							</p>
						</div>
						<!-- //Service-content ends here -->
					</div>
				</div>
			</div>
			<!-- .Row ends here -->
		</div>
		<!-- .Container ends here -->
	</section>
	<!-- .Services ends here -->
	<!-- //services -->
	<!-- middle section -->
	<section class="middle py-5" id="middle">
		<div class="container py-xl-5 py-lg-3">
			<div class="text-mid-w3 text-center mx-auto">
				<h4 class="text-wh font-weight-bold let mb-3">Making Your Business Ideas Come True</h4>
				<p class="text-li">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris Sed ut perspiciatis
					unde omnis iste natus error, consectetur elit,Adipisicing elit tempor.</p>
				<!-- popup button -->
				<a href="#popup2" style="max-width: 150px; margin: 0 auto;" class="btn button-style-2 mt-sm-5 mt-4">Read
					More</a>
			</div>
		</div>
	</section>
	<!-- popup -->
	<div id="popup2" class="popup-effect">
		<div class="popup">
			<img src="images/blog2.jpg" 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="#middle">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- //middle section -->
	<!-- blog -->
	<div class="blog_w3ls py-5" id="blog">
		<div class="pb-xl-5 pb-lg-3">
			<h3 class="title-wthree text-black text-center mb-5">
				<span class="text-color">Posts</span>Latest Blog
			</h3>
			<div class="blog-grids">
				<div class="container">
					<div class="row">
						<!-- blog grid -->
						<div class="col-lg-4 col-md-6">
							<div class="card border-0 med-blog">
								<div class="card-header p-0">
									<img class="card-img-bottom" src="images/blog1.jpg" alt="Card image cap">
								</div>
								<div class="card-body border border-top-0">
									<h5 class="blog-title card-title m-0">At vero eos
									</h5>
									<p class="my-3">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
									<a href="https://www.51qianduan.com/">51前端</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">
									<img class="card-img-bottom" src="images/blog2.jpg" alt="Card image cap">
								</div>
								<div class="card-body border border-top-0">
									<h5 class="blog-title card-title m-0">Tccus et ius
									</h5>
									<p class="my-3">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
									<a href="https://www.51qianduan.com/">51前端</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">
									<img class="card-img-bottom" src="images/blog3.jpg" alt="Card image cap">
								</div>
								<div class="card-body border border-top-0">
									<h5 class="blog-title card-title m-0">Dumus qui bla
									</h5>
									<p class="my-3">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
									<a href="https://www.51qianduan.com/">51前端</a>
								</div>
							</div>
						</div>
						<!-- //blog grid -->
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- popup -->
	<div id="popup3" class="popup-effect">
		<div class="popup">
			<img src="images/blog1.jpg" 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="#blog">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- //blog -->
	<!-- stats section -->
	<div class="middlesection-w3pvt-lau py-5 bg bg1" id="stats" data-selector=".bg.bg1">
		<div class="container py-xl-5 py-lg-3">
			<div class="left-build-wthree aboutright-w3pvt-lauwthree">
				<div class="row text-center py-sm-3">
					<div class="col-md-3 col-6 w3layouts_stats_left w3_counter_grid ">
						<p class="counter ">1680</p>
						<p class="para-text-w3ls text-li ">Popularity</p>
					</div>
					<div class="col-md-3 col-6 w3layouts_stats_left w3_counter_grid2 ">
						<p class="counter ">1200</p>
						<p class="para-text-w3ls text-li ">Happy Customers</p>
					</div>
					<div class="col-md-3 col-6 w3layouts_stats_left w3_counter_grid1 mt-md-0 mt-4 ">
						<p class="counter ">400</p>
						<p class="para-text-w3ls text-li ">Rates</p>
					</div>
					<div class="col-md-3 col-6 w3layouts_stats_left w3_counter_grid1 mt-md-0 mt-4">
						<p class="counter ">800</p>
						<p class="para-text-w3ls text-li ">Awards Won</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //stats section -->
	<!-- team -->
	<section class="banner-w3layouts-bottom py-lg-5 py-4" id="team">
		<div class="container">
			<div class="inner-sec-wthree py-lg-5 py-4 speak">
				<h3 class="title-wthree text-black text-center mb-5">
					<span class="text-color">Amazing People</span>Our Great Team
				</h3>
				<div class="row mt-lg-5 mt-4">
					<div class="col-lg-4">
						<div class="team-gd text-center">
							<div class="team-img mb-4">
								<img src="images/team3.jpg" class="img-fluid" alt="user-image">
							</div>
							<div class="team-info">
								<h3 class="mt-md-4 mt-3"><span class="sub-tittle-team">Designer</span> Jason Donoghue</h3>
								<p>Lorem Ipsum has been the industry's standard since the 1500s.</p>
							</div>
						</div>
					</div>
					<div class="col-lg-4 my-lg-0 my-3">
						<div class="team-gd text-center">
							<div class="team-img mb-4">
								<img src="images/team1.jpg" class="img-fluid" alt="user-image">
							</div>
							<div class="team-info">
								<h3 class="mt-md-4 mt-3"><span class="sub-tittle-team">Designer</span> Mariana Noe</h3>
								<p>Lorem Ipsum has been the industry's standard since the 1500s.</p>
							</div>
						</div>
					</div>
					<div class="col-lg-4">
						<div class="team-gd text-center">
							<div class="team-img mb-4">
								<img src="images/team2.jpg" class="img-fluid" alt="user-image">
							</div>
							<div class="team-info">
								<h3 class="mt-md-4 mt-3"><span class="sub-tittle-team">Designer</span> Daniel Doe</h3>
								<p>Lorem Ipsum has been the industry's standard since the 1500s.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //team -->
	<!-- gallery -->
	<div class="gallery" id="gallery">
		<h3 class="title-wthree text-black text-center mb-5">
			<span class="text-color">Gallery</span>Our Projects
		</h3>
		<div class="news-grids gal">
			<div class="row no-gutters">
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal1"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
				</div>
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal2"><img src="images/g2.jpg" alt="news image" class="img-fluid"></a>
				</div>
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal3"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
				</div>
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal4"><img src="images/g4.jpg" alt="news image" class="img-fluid"></a>
				</div>
			</div>
			<div class="row no-gutters">
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal5"><img src="images/g5.jpg" alt="news image" class="img-fluid"></a>
				</div>
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal6"><img src="images/g6.jpg" alt="news image" class="img-fluid"></a>
				</div>
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal7"><img src="images/g7.jpg" alt="news image" class="img-fluid"></a>
				</div>
				<div class="col-md-3 col-6 gal-img">
					<a href="#gal8"><img src="images/g8.jpg" alt="news image" class="img-fluid"></a>
				</div>
			</div>
		</div>
	</div>
	<!-- gallery popups -->
	<!-- popup-->
	<div id="gal1" class="popup-effect">
		<div class="popup">
			<img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal2" class="popup-effect">
		<div class="popup">
			<img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal3" class="popup-effect">
		<div class="popup">
			<img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal4" class="popup-effect">
		<div class="popup">
			<img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal5" class="popup-effect">
		<div class="popup">
			<img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal6" class="popup-effect">
		<div class="popup">
			<img src="images/g6.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal7" class="popup-effect">
		<div class="popup">
			<img src="images/g7.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- popup-->
	<div id="gal8" class="popup-effect">
		<div class="popup">
			<img src="images/g8.jpg" alt="Popup Image" class="img-fluid" />
			<p class="mt-4 ">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat
				dolor.</p>
			<a class="close" href="#gallery">&times;</a>
		</div>
	</div>
	<!-- //popup -->
	<!-- //gallery popups -->
	<!-- //gallery -->
	<!-- partners -->
	<section class="partners py-md-5 py-2" id="partners">
		<div class="container py-xl-5 py-4">
			<h3 class="title-wthree text-black text-center mb-5">
				<span class="text-color">Sponsors</span>Our Partners
			</h3>
			<div class="row grid-part text-center pt-4">
				<div class="col-sm-2 col-4">
					<div class="parts-w3pvt bg-white">
						<a href="#"><span class="fa fa-angellist"></span></a>
					</div>
				</div>
				<div class="col-sm-2 col-4">
					<div class="parts-w3pvt bg-white">
						<a href="#"><span class="fa fa-opencart"></span></a>
					</div>
				</div>
				<div class="col-sm-2 col-4">
					<div class="parts-w3pvt bg-white">
						<a href="#"><span class="fa fa-lastfm"></span></a>
					</div>
				</div>
				<div class="col-sm-2 col-4 mt-sm-0 mt-3">
					<div class="parts-w3pvt bg-white">
						<a href="#"><span class="fa fa-openid"></span></a>
					</div>
				</div>
				<div class="col-sm-2 col-4 mt-sm-0 mt-3">
					<div class="parts-w3pvt bg-white">
						<a href="#"><span class="fa fa-skyatlas"></span></a>
					</div>
				</div>
				<div class="col-sm-2 col-4 mt-sm-0 mt-3">
					<div class="parts-w3pvt bg-white">
						<a href="#"><span class="fa fa-ravelry"></span></a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!-- //partners -->
	<!-- contact -->
	<section class="contact" id="contact">
		<h3 class="title-wthree text-black text-center mb-5">
			<span class="text-color">Send</span>Contact Us
		</h3>
		<div class="d-flex contact-top">
			<div class="col-lg-6 contact_grid_left">
				<div class="row">
					<div class="col-sm-6">
						<ul class="list-unstyled">
							<li>
								<div class="row">
									<div class="col-xl-2 col-3 text-center">
										<span class="fa fa-home"></span>
									</div>
									<div class="col-xl-10 col-9">
										<h6>Address</h6>
										<p>The company name
											<br>New York City. </p>
									</div>
								</div>
							</li>
							<li class="mt-sm-5 mt-4">
								<div class="row">
									<div class="col-xl-2 col-3 text-center">
										<span class="fa fa-comment"></span>
									</div>
									<div class="col-xl-10 col-9">
										<h6>Social</h6>
										<p><a href="#">Facebook.com</a>
											<br><a href="#">twitter.com</a>
									</div>
								</div>
							</li>
						</ul>
					</div>
					<div class="col-sm-6 mt-sm-0 mt-4">
						<ul class="list-unstyled">
							<li>
								<div class="row">
									<div class="col-xl-2 col-3 text-center">
										<span class="fa fa-envelope"></span>
									</div>
									<div class="col-xl-10 col-9">
										<h6>Email</h6>
										<a href="https://www.51qianduan.com/">51前端</a>
										<br>
										<a href="https://www.51qianduan.com/">51前端</a>
									</div>
								</div>
							</li>
							<li class="mt-5">
								<div class="row">
									<div class="col-xl-2 col-3 text-center">
										<span class="fa fa-phone"></span>
									</div>
									<div class="col-xl-10 col-9">
										<h6>Phone</h6>
										<p>1234567890</p>
										<p>0987654321</p>
									</div>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-lg-6 contact_grid_right">
				<form action="#" method="post">
					<div class="row contact_top">
						<div class="col-sm-6">
							<input type="text" name="Name" placeholder="Name" required="">
						</div>
						<div class="col-sm-6 mt-sm-0 mt-4">
							<input type="email" name="Email" placeholder="Email" required="">
						</div>
					</div>
					<textarea name="Message" onfocus="this.value='' ;" onblur="if (this.value=='' ) {this.value='Message...' ;}"
					 required="">Message...</textarea>
					<button type="submit" class="btn">Send</button>
				</form>
			</div>
		</div>
	</section>
	<!-- //contact -->
	<!-- footer -->
	<footer class="footer py-sm-5 py-4 text-center">
		<div class="container py-xl-4 py-lg-3">
			<a href="https://www.51qianduan.com/">51前端</a>
			<div class="logo-2 text-center">
				<h2><a class=" text-wh let font-weight-bold" href="index.html">Employment</a></h2>
			</div>
			<!-- social icons footer -->
			<div class="w3l-footer text-center mt-4">
				<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>
			<!-- copyright -->
			<p class="copy-right-grids text-li text-center mt-sm-5 mt-4">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
			</p>
			<!-- //copyright -->
		</div>
	</footer>
	<!-- footer -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 白色 宽屏 全屏 满屏 设计 设计公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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