藍色簡潔風格的裝飾材料公司企業網站源碼下載



7 24 9



模板描述:藍色簡潔風格 裝飾材料公司 企業網站,藍色簡潔風格的裝飾材料公司企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/easy-responsive-tabs.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countup.js"></script>

3. HTML代碼

<!-- banner -->
	<div id="home" class="w3ls-banner"> 
<!-- header -->
	<div class="header-w3l">
		 <div class="header-main">
			 <div class="header-top-agileits">
		   	 <div class="container">
				<div class="header-left">
					<h3><i class="fa fa-phone" aria-hidden="true"></i> (077) 806 5658</h3>
				</div>
				<ul class="agile_forms"  data-aos="fade-left">
					<li><a class="active" href="#" data-toggle="modal" data-target="#myModal2"><i class="fa fa-sign-in" aria-hidden="true"></i> Login</a> </li>
					<li><a href="#" data-toggle="modal" data-target="#myModal3"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Register</a> </li>
				</ul>
				<div class="clearfix"> </div>
				</div>
			</div>
		   	 <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 data-aos="fade-down"><a  href="index.html">Plafond</a></h1>
					</div>
					<!-- navbar-header -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav navbar-right" data-aos="fade-up">
							<li><a href="index.html" class="active">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li class="dropdown menu__item">
										<a href="#" class="dropdown-toggle menu__link"  data-toggle="dropdown" data-hover="Pages" role="button" aria-haspopup="true" aria-expanded="false">Pages<span class="caret"></span></a>
										<ul class="dropdown-menu">
											<li><a href="codes.html">Short Codes</a></li>
											<li><a href="icons.html">Web Icons</a></li>
										</ul>
									</li>
							<li><a href="gallery.html" >Projects</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
					<div class="clearfix"> </div>	
				</nav>
		   </div>
		   </div>
		<div class="clearfix"> </div>
		<!-- //Nav -->
	</div>	
	<!-- //header -->
		<!-- banner-text -->
		<div class="slider">
			<div class="callbacks_container">
				<ul class="rslides callbacks callbacks1" id="slider4">
					<li>
						<div class="w3layouts-banner-top">
                            <div class="agileits-banner-info">
									<h3>Expert Roofing Services <span>Contractor</span></h3>
								</div>	
						</div>
					</li>
					<li>
						<div class="w3layouts-banner-top w3layouts-banner-top1">
							<div class="agileits-banner-info">
									<h3>professional & Trained  <span>Workers</span></h3>
								</div>	
						</div>
					</li>
					<li>
						<div class="w3layouts-banner-top w3layouts-banner-top2">
						        <div class="agileits-banner-info">
									<h3>Trusted & Reliable <span>Contractors</span></h3>
								</div>	
						</div>
					</li>
					<li>
						<div class="w3layouts-banner-top w3layouts-banner-top3">
							   <div class="agileits-banner-info">
									<h3>We Will Help You to Fix <span>Your Roof</span></h3>
								</div>	
						</div>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
			<!--//banner text-->
		</div>
<!--banner form-->
<div id="horizontalTab">
					<ul class="resp-tabs-list">
					<li>Enquiry</li>
					<li>Selection</li>
					<li>Subscribe</li>
					</ul>
					<div class="resp-tabs-container">
					<div class="tab1">
					<h6>Fill in our Enquiry Form</h6>
							<form action="#" method="post">
								<div class="fields left-agileits">
									<input type="text" name="Firstname" placeholder="First Name" required="" />
								</div>
								<div class="fields right-agileits">
									<input type="text" name="Laststname" placeholder="Last Name" required="" />
								</div>
								<div class="fields">
									<input type="email" name="Email" placeholder="Email" required="" />
								</div>
							<div class="fields">
								<textarea name="Comments" placeholder="Comments, Complements or Questions" required=""></textarea>
							</div>
								<input type="submit" value="Send my enquiry">
							</form>
							<div class="clearfix"></div>
					</div>
					<div class="tab2">
					<div class="register">
						<h6>Select Your Choice</h6>
							<form action="#" method="post">
								<div class="fields left-agileits">
									<input type="text" name="Width" placeholder="Approx Area Width in Mts" required="" />
								</div>
								<div class="fields right-agileits">
									<input type="text" name="Height" placeholder="Approx Area height in Mts" required="" />
								</div>
								<div class="fields left-agileits">
									<select class="form-control">
										<option>Roof Type</option>
										<option>M shaped</option>
										<option>Open Glabe</option>
										<option>Hip & Valley</option>
										<option>Intersection / Overlaid Hip</option>
										<option>Dutch Glabe</option>
										<option>Dormer</option>
									</select>
								</div>
								<div class="fields right-agileits">
									<select class="form-control">
										<option>Walls & Ceiling</option>
										<option>Painting</option>
										<option>Painting + Minor repairs</option>
										<option>Painting + Decorative stones</option>
										<option>Tiling</option>
										<option>Dutch Glabe</option>
										<option>Dormer</option>
									</select>
								</div>
								<div class="clearfix"></div>
								<div class="filter-price">
									<h3>Price range</h3>
									<ul class="dropdown-menu6">
										<li>                
											<div id="slider-range"></div>							
											<input type="text" id="amount" style="border: 0; color: #ffffff; font-weight: normal;" />
										</li>			
									</ul>
								</div>
								<input type="submit" value="Send">
							</form>
							</div>
					</div>
					<div class="tab3">
						<div class="reset">
								<form action="#" method="post">
								<h6>Subscribe to our email & get updates right in your inbox</h6>
								<div class="fields">
									<input type="email" Name="Email" placeholder="Email" required="">
								</div>
									<input type="submit" value="Subscribe">
								</form>
							</div>
					</div>
					</div>
			</div>
<!--//banner form--> 
	</div>	
	<!-- //banner --> 
<!-- //banner -->
<!-- Modal2 -->
		<div class="modal fade" id="myModal2" tabindex="-1" role="dialog">
														<div class="modal-dialog">
														<!-- Modal content-->
															<div class="modal-content">
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	<div class="signin-form profile">
																	<h3 class="agileinfo_sign">Login</h3>	
																			<div class="login-form">
																				<form action="#" method="post">
																					<input type="email" name="email" placeholder="E-mail" required="">
																					<input type="password" name="password" placeholder="Password" required="">
																					<div class="tp">
																						<input type="submit" value="Login">
																					</div>
																				</form>
																			</div>
																			<div class="login-social-grids">
																				<ul>
																					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
																					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
																					<li><a href="#"><i class="fa fa-rss"></i></a></li>
																				</ul>
																			</div>
																			<p><a href="#" data-toggle="modal" data-target="#myModal3" > Don't have an account?</a></p>
																		</div>
																</div>
															</div>
														</div>
													</div>
													<!-- //Modal2 -->	
													<!-- Modal3 -->
													<div class="modal fade" id="myModal3" tabindex="-1" role="dialog">
														<div class="modal-dialog">
														<!-- Modal content-->
															<div class="modal-content">
																<div class="modal-header">
																	<button type="button" class="close" data-dismiss="modal">&times;</button>
																	<div class="signin-form profile">
																	<h3 class="agileinfo_sign">Register</h3>	
																			<div class="login-form">
																				<form action="#" method="post">
																				   <input type="text" name="name" placeholder="Username" required="">
																					<input type="email" name="email" placeholder="Email" required="">
																					<input type="password" name="password" placeholder="Password"  id="password1" required="">
																					<input type="password" name="password" placeholder="Confirm Password"  id="password2" required="">
																					<input type="submit" value="Register">
																				</form>
																			</div>
																			<p><a href="#"> By clicking register, I agree to your terms</a></p>
																		</div>
																</div>
															</div>
														</div>
													</div>
		<!-- //Modal3 -->
<!-- banner-bottom -->
	<div class="about">
		<div class="agileits_w3layouts_heding">
				<p>What we do</p>
				<h3><span>About</span> Us</h3>
				<img src="images/head1.png" alt="Lines" />
			</div>
			<div class="banner_bottom_right">
			</div>
			<div class="col-md-7 banner_bottom_left">
				<h3>We Provide Professional Services</h3>
				<p class="para-w3layouts white"> Quis nostrum exercitationem ullam corporis suscipit 
					laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure 
					reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, 
					vel illum qui dolorem eum fugiat quo voluptas nulla pariatur.</p>
					<p class="para-w3layouts white">Mauris tempus commodo lectus ac egestas. Vestibulum sed bibendum arcu, at commodo purus. 
					Curabitur vitae mauris nunc. Curabitur imperdiet.Mauris tempus commodo lectus ac egestas. Vestibulum sed bibendum arcu, at commodo purus. Curabitur vitae mauris nunc. Curabitur imperdiet, sem nec porta interdum, metus sem sodales urna, ac fringilla nisi neque et ante. Aliquam ac efficitur leo, quis rutrum felis. Maecenas in libero vel nisi iaculis faucibus id tempus arcu.</p>
				<div class="wthree_more wthree_more1">
					<a href="about.html">Read More</a>
				</div>
			</div>
				<div class="clearfix"> </div>
	</div>
<!-- //banner-bottom -->
<!-- /services -->
	<div class="agile_services">
		<div class="container">
			<div class="agileits_w3layouts_heding">
				<p>We provide best Solutions</p>
				<h3>Our <span>Services</span></h3>
				<img src="images/head1.png" alt="Lines" />
			</div>
			<div class="markets-grids">
				<div class="col-md-4 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
						    <i class="fa fa-rupee" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Roof installation</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
							<a href="#" data-toggle="modal" data-target="#myModal1">Learn More</a>
					</div>
				</div>
				<div class="col-md-4 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-home" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Roof repair</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
							<a href="#" data-toggle="modal" data-target="#myModal1">Learn More</a>
					</div>
				</div>
				<div class="col-md-4 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-university" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Roof leak repair</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
							<a href="#" data-toggle="modal" data-target="#myModal1">Learn More</a>
					</div>
				</div>
				<div class="col-md-4 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-building" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Emergency roof repair</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
							<a href="#" data-toggle="modal" data-target="#myModal1">Learn More</a>
					</div>
				</div>
				<div class="col-md-4 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-bank" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Roof management</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
							<a href="#" data-toggle="modal" data-target="#myModal1">Learn More</a>
					</div>
				</div>
				<div class="col-md-4 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-building-o" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Roof coating</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
							<a href="#" data-toggle="modal" data-target="#myModal1">Learn More</a>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //services -->
<!-- Modal1 -->
						<div class="modal fade" id="myModal1" tabindex="-1" role="dialog">
							<div class="modal-dialog">
							<!-- Modal content-->
								<div class="modal-content">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal">&times;</button>
										<div class="agileits_w3layouts_heding">
											<h3>Pla <span>Fond</span></h3>
											<img src="images/head1.png" alt="Lines" />
										</div>
										<div class="col-md-6 img-modal-w3l"><img src="images/g1.jpg" alt=" " class="img-responsive"></div>
										<div class="col-md-6 modal-info">
											<h5>Roof installation</h5>
											<p>Mauris sollicitudin scelerisque commodo.Nunc dapibus mauris sed metus.</p>
											<h5>Roof repair</h5>
											<p>Mauris sollicitudin scelerisque commodo.Nunc dapibus mauris sed metus.</p>
										</div>
										<div class="clearfix"> </div>
										<div class="col-md-6 modal-info text-right">
											<h5>Roof leak repair</h5>
											<p>Mauris sollicitudin scelerisque commodo.Nunc dapibus mauris sed metus.</p>
											<h5>Emergency roof repair</h5>
											<p>Mauris sollicitudin scelerisque commodo.Nunc dapibus mauris sed metus.</p>
										</div>
										<div class="col-md-6 img-modal-w3l"><img src="images/g8.jpg" alt=" " class="img-responsive"></div>
										<div class="clearfix"> </div>
										<div class="col-md-6 img-modal-w3l"><img src="images/g9.jpg" alt=" " class="img-responsive"></div>
										<div class="col-md-6 modal-info">
											<h5>Roof management</h5>
											<p>Mauris sollicitudin scelerisque commodo.Nunc dapibus mauris sed metus.</p>
											<h5>Roof coating</h5>
											<p>Mauris sollicitudin scelerisque commodo.Nunc dapibus mauris sed metus.</p>
										</div>
										<div class="clearfix"> </div>
									</div>
								</div>
							</div>
						</div>
<!-- //Modal1 -->
<!-- schedule-bottom -->
	<div class="schedule-bottom">
		<div class="col-md-6 agileinfo_schedule_bottom_left">
			<img src="images/schedule.jpg" alt=" " class="img-responsive" />
		</div>
		<div class="col-md-6 agileits_schedule_bottom_right">
			<div class="w3ls_schedule_bottom_right_grid">
				<h3>Interesting <span>Facts</span></h3>
				<p>Suspendisse varius turpis efficitur erat laoreet dapibus. 
					Mauris sollicitudin scelerisque commodo.Nunc dapibus mauris sed metus finibus posuere.</p>
				<div class="col-md-4 w3l_schedule_bottom_right_grid1">
					<i class="fa fa-shield" aria-hidden="true"></i>
					<h4>Projects Done</h4>
					<h5 class="counter">653</h5>
				</div>
				<div class="col-md-4 w3l_schedule_bottom_right_grid1">
					<i class="fa fa-users" aria-hidden="true"></i>
					<h4>Happy Clients</h4>
					<h5 class="counter">823</h5>
				</div>
				<div class="col-md-4 w3l_schedule_bottom_right_grid1">
					<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
					<h4>Business partners</h4>
					<h5 class="counter">45</h5>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="clearfix"> </div>
	</div>
<!-- //schedule-bottom -->
<!-- features -->
<div class="features">
<div class="container">
	<div class="agileits_w3layouts_heding">
		<p>We provide best Solutions</p>
		<h3>Our <span>Features</span></h3>
		<img src="images/head1.png" alt="Lines" />
	</div>
	<div class="col-md-6 features-left-w3l">
	<div class="f-left">
		<div class="feature-grid-agileinfo">
		<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
			<div class="feature-text-w3ls">
				<h6>24/7 Services</h6>
				<p>Mauris sed metus finibus posuere.</p>
			</div>
			<div class="feature-img-wthree">
				<img src="images/f2.jpg" alt="Lines" />
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="feature-grid-agileinfo mid-agileits">
		<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
			<div class="feature-text-w3ls">
				<h6>Roof repair</h6>
				<p>Mauris sed metus finibus posuere.</p>
			</div>
			<div class="feature-img-wthree">
				<img src="images/f1.jpg" alt="Lines" />
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="feature-grid-agileinfo">
		<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
			<div class="feature-text-w3ls">
				<h6>Quality roof materials</h6>
				<p>Mauris sed metus finibus posuere.</p>
			</div>
			<div class="feature-img-wthree">
				<img src="images/f3.jpg" alt="Lines" />
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	</div>
	<div class="col-md-6 features-right-w3l">
	<div class="f-right">
		<div class="feature-grid-agileinfo">
		<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
			<div class="feature-img-wthree">
				<img src="images/f3.jpg" alt="Lines" />
			</div>
			<div class="feature-text-w3ls">
				<h6>Affordable Price</h6>
				<p>Mauris sed metus finibus posuere.</p>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="feature-grid-agileinfo mid-agileits">
			<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
			<div class="feature-img-wthree">
				<img src="images/f2.jpg" alt="Lines" />
			</div>
			<div class="feature-text-w3ls">
				<h6>Personalized service</h6>
				<p>Mauris sed metus finibus posuere.</p>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="feature-grid-agileinfo">
		<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
			<div class="feature-img-wthree">
				<img src="images/f1.jpg" alt="Lines" />
			</div>
			<div class="feature-text-w3ls">
				<h6>Maintenance of roofs</h6>
				<p>Mauris sed metus finibus posuere.</p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	</div>
</div>
</div>
<!-- //features -->
<!-- portfolio -->
	<div id="portfolio" class="portfolio">
		<ul id="flexiselDemo1">	
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g1.jpg">
						<img src="images/g1.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g8.jpg">
						<img src="images/g8.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g2.jpg">
						<img src="images/g2.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g3.jpg">
						<img src="images/g3.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g4.jpg">
						<img src="images/g4.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g5.jpg">
						<img src="images/g5.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g6.jpg">
						<img src="images/g6.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
			<li>
				<div class="w3_agile_portfolio_grid">
					<a href="images/g7.jpg">
						<img src="images/g7.jpg" alt=" " class="img-responsive" />
						<div class="w3layouts_news_grid_pos">
							<div class="wthree_text main-txt-w3ls"><h3>Pla<span>fond</span></h3></div>
						</div>
					</a>
				</div>
			</li>
		</ul>
	</div>
<!-- //portfolio -->
<!-- testimonials -->
<div class="testimonials">
		<div class="container">
		<div class="agileits_w3layouts_heding">
				<p class="white-w3ls">What Client Says</p>
				<h3 class="white-w3ls"><span>Client </span> Reviews</h3>
				<img src="images/head1.png" alt="Lines" />
			</div>
			<div class="w3_agileits_testimonial_grids">
				<section class="slider">
					<div class="flexslider">
						<ul class="slides">
							<li>
								<div class="w3_agileits_testimonial_grid">
									<div class="test-bg-w3ls">
										<h4>Celina <span>Lorem Ipsum</span></h4>
										<p class="para-w3layouts white">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
										dolore eu fugiat nulla pariatur.</p>
									</div>
									<img src="images/t1.jpg" alt=" " class="img-responsive" />
								</div>
								<div class="w3_agileits_testimonial_grid">
									<div class="test-bg-w3ls">
										<h4>Marry Jane <span>Lorem Ipsum</span></h4>
										<p class="para-w3layouts white">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
										dolore eu fugiat nulla pariatur.</p>
									</div>
									<img src="images/t2.jpg" alt=" " class="img-responsive" />
								</div>
							</li>
							<li>
								<div class="w3_agileits_testimonial_grid">
									<div class="test-bg-w3ls">
										<h4>Schroeder <span>Lorem Ipsum</span></h4>
										<p class="para-w3layouts white">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
										dolore eu fugiat nulla pariatur.</p>
									</div>
									<img src="images/t3.jpg" alt=" " class="img-responsive" />
								</div>
								<div class="w3_agileits_testimonial_grid">
									<div class="test-bg-w3ls">
										<h4>Frankie Doe <span>Lorem Ipsum</span></h4>
										<p class="para-w3layouts white">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
										dolore eu fugiat nulla pariatur.</p>
									</div>
									<img src="images/t1.jpg" alt=" " class="img-responsive" />
								</div>
							</li>
							<li>
								<div class="w3_agileits_testimonial_grid">
									<div class="test-bg-w3ls">
										<h4>Mario Andretti <span>Lorem Ipsum</span></h4>
										<p class="para-w3layouts white">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
										dolore eu fugiat nulla pariatur.</p>
									</div>
									<img src="images/t2.jpg" alt=" " class="img-responsive" />
								</div>
								<div class="w3_agileits_testimonial_grid">
									<div class="test-bg-w3ls">
										<h4>Kathleen <span>Lorem Ipsum</span></h4>
										<p class="para-w3layouts white">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
										dolore eu fugiat nulla pariatur.</p>
									</div>
									<img src="images/t3.jpg" alt=" " class="img-responsive" />
								</div>
							</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
<!-- testimonials -->
<!-- newsletter -->
	<div class="w3layouts_newsletter">
		<div class="container">
			<div class="agileits_w3layouts_heding">
				<p>Get Updates</p>
				<h3><span>Don't Forget to </span> Sign Up</h3>
				<img src="images/head1.png" alt="Lines" />
			</div>
			<div class="w3layouts_newsletter_right">
			<p class="para-w3layouts white"> Quis nostrum exercitationem ullam corporis suscipit 
					laboriosam, nisi ut aliquid ex ea commodi consequatur, Quis autem vel eum iure 
					reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
				<form action="#" method="post">
					<input type="text" name="Name" placeholder="Name" required="">
					<input type="email" name="Email" placeholder="Email Address" required="">
					<input type="submit" value="Subscribe">
				</form>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //newsletter -->
<!-- contact -->
	<div class="w3l_footer">
		<div class="container">
	<div class="col-md-4">
	<h2><a href="index.html">Plafond</a></h2>
	</div>
	<div class="col-md-8 botttom-nav-agileits">
		<ul class="nav-w3ls">
			<li><a href="index.html">Home</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="gallery.html" >Projects</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
		<div class="w3l-social">
			<ul>
				<li><a href="#"><i class="fa fa-facebook"></i></a></li>
				<li><a href="#"><i class="fa fa-twitter"></i></a></li>
				<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
			</ul>
		</div>
		<div class="clearfix"> </div>
	</div>	
	<div class="clearfix"> </div>
	</div>
</div>
<!-- //contact -->
<!-- footer -->
	<div class="w3_agile_footer">
		<div class="container">
			<p>? 2017 Plafond. All rights reserved | Design by <a href="http://www.cqetom.live/">xmoban.cn</a></p>
			<div class="arrow-container animated fadeInDown">
				<a href="#home" class="arrow-2 scroll">
					<i class="fa fa-angle-up"></i>
				</a>
				<div class="arrow-1 animated hinge infinite zoomIn"></div>
			</div>
		</div>
	</div>
<!-- //footer -->
<!-- js -->
<!-- //js -->
<!--banner form script-->
									<script type='text/javascript'>//<![CDATA[ 
									$(window).load(function(){
									 $( "#slider-range" ).slider({
												range: true,
												min: 0,
												max: 9000,
												values: [ 1000, 7000 ],
												slide: function( event, ui ) {  $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
												}
									 });
									$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) );
									});//]]>  
									</script>
<!--//banner form script-->
			<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>
<!--Rersponsive tabs-->
<script>
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion           
width: 'auto', //auto or any width like 600px
fit: true,   // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
$('#verticalTab').easyResponsiveTabs({
type: 'vertical',
width: 'auto',
fit: true
});
});
</script>
<!-- //Rersponsive tabs -->
<!-- flexSlider -->
					<script type="text/javascript">
					$(window).load(function(){
					  $('.flexslider').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				  </script>
<!-- //flexSlider -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->
<!-- start-smooth-scrolling -->
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
	</script>
<!-- start-smooth-scrolling -->
<!-- password-script -->  
<script type="text/javascript">
		window.onload = function () {
			document.getElementById("password1").onchange = validatePassword;
			document.getElementById("password2").onchange = validatePassword;
		}
		function validatePassword(){
			var pass2=document.getElementById("password2").value;
			var pass1=document.getElementById("password1").value;
			if(pass1!=pass2)
				document.getElementById("password2").setCustomValidity("Passwords Don't Match");
			else
				document.getElementById("password2").setCustomValidity('');	 
				//empty string means no validation error
		}
</script>
<!-- //password-script -->
<!-- stats -->
	<script>
		$('.counter').countUp();
	</script>
<!-- //stats -->



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 藍色 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 寬屏 全屏 滿屏 裝修裝飾 裝潢 裝修 裝飾
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子