藍色扁平風格的石油工業整站網站源碼下載



5 19 7



模板描述:藍色扁平風格 石油工業 整站網站,藍色扁平風格的石油工業整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<link rel="stylesheet" type="text/css" href="css/team.css" />
<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=Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet">

2. 引入JS

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script src="js/slick.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>
<script src="js/odometer.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代碼

<!-- banner -->
<div class="header">
		<div class="w3layouts_header_left">
			<ul>
					<li><a href="#" data-toggle="modal" data-target="#myModal2"><i class="fa fa-user" aria-hidden="true"></i> Log in</a></li>
					<li><a href="#" data-toggle="modal" data-target="#myModal3"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Sign up</a></li>
				</ul>
		</div>
		<div class="w3layouts_header_right">
			<ul>
				<li><i class="fa fa-phone" aria-hidden="true"></i>(+000) 123 456</li>
				<li><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:[email protected]">[email protected]</a></li>
			</ul>
		</div>
		<div class="clearfix"> </div>
	</div>
	<div class="top_heder_agile_info">
		<div class="w3ls_agile_header_inner">	
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" 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 class="navbar-brand" href="index.html"><i class="fa fa-tint" aria-hidden="true"></i> OIL INDUSTRY <span>The Real Quality</span> </a></h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="menu menu--juliet">
						<ul class="nav navbar-nav">
							<li class="active"><a href="index.html">Home</a></li>
							<li><a href="services.html" >Services</a></li>
							<li><a href="gallery.html">Gallery</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Short Codes <b class="caret"></b></a>
								<ul class="dropdown-menu agile_short_dropdown">
									<li><a href="icons.html">Web Icons</a></li>
									<li><a href="typography.html">Typography</a></li>
								</ul>
							</li>
							<li><a href="mail.html">Mail Us</a></li>
						</ul>
						<div class="agileinfo_social_icons">
							<ul class="agileits_social_list">
								<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
								<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
								<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
							</ul>
						</div>
					</nav>
				</div>
			</nav>
		</div>
	</div>
<!-- //banner -->
<!-- banner -->
	<div class="banner-silder">
			 <div class="banner">
					<ul>
					</ul>
				  <ol>
				  </ol>
				  <i class="left"></i><i class="right"></i>
				  <div class="banner_wthree_agile_info">
				     <section class="rw-wrapper">
						<div class="rw-sentence">
							<span>The Finest Quality </span>
							<br />
							<span>of Oil And</span>
							<div class="rw-words rw-words-1">
								<span></span>
								<span>Gas Resources</span>
								<span>Fuel</span>
							    <span>Gas Resources</span>
								<span>Gas Flaring</span>
							</div>
						</div>
			         </section>
					 <div class="wthree_more">
					   <a href="single.html" data-toggle="modal" data-target="#myModal" class="button--wayra button--border-thick button--text-upper button--size-s">Learn More</a>
				     </div>
						<div class="social_list_w3ls">
							<a href="#" class="w3_agile_facebook_agile"><span class="fa fa-facebook" aria-hidden="true"></span></a>
							<a href="#" class="agile_twitter_agile"><span class="fa fa-twitter" aria-hidden="true"></span></a>
							<a href="#" class="w3_agile_dribble_agile"><span class="fa fa-dribbble" aria-hidden="true"></span></a>
							<a href="#" class="w3_agile_vimeo_agile"><span class="fa fa-vimeo" aria-hidden="true"></span></a>
						</div>
				  </div>
		     </div>
	</div>
<!-- //banner -->
<!-- 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 -->
<!-- banner-bottom -->
	<div class="banner-bottom">
		<div class="container">
		          <h2 class="w3l_header">Our Introduction</h2>
			<p class="quia">Who we are</p>
				<p class="agile_para">Lorem ipsum dolor sit amet conse ctetur adipisicing elit. 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>
			<div class="col-md-2 w3_agileits_banner_bottom_grid">
				<h5>Oil</h5>
			</div>
			<div class="col-md-10 w3_agileits_banner_bottom_grid_left">
				<ul id="flexiselDemo1">	
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g1.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Vivamus et dolor pulvinar, iaculis diam.</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g2.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Maecenas semper augue accumsan rutrum.</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g4.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">In nunc purus, luctus in venenatis.</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g3.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
										<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">habitant morbi tristique senectus diam.</a></h4>
						</div>
					</li>
					<li>
						<div class="agileits_w3layouts_banner_bottom_grid">
							<div class="wthree_banner_bottom_grid1">
								<img src="images/g5.jpg" alt=" " class="img-responsive" />
								<div class="agileinfo_banner_bottom_grid1_pos">
									<h3>The Oil</h3>
									<p>Real Quality</p>
								</div>
							</div>
							<h4><a href="#" data-toggle="modal" data-target="#myModal">Maecenas dictum honcus scelerisque.</a></h4>
						</div>
					</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //banner-bottom -->
<!-- Tooltip -->
				<div class="tooltip-content">
					<div class="modal fade features-modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
									<h4 class="modal-title">Oil Industry</h4>
								</div>
								<div class="modal-body">
									<img src="images/g4.jpg" alt="">
									<h5>Curabitur quis egestas.</h5>
									<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius lectus vitae porttitor fringilla. Donec turpis orci, elementum a nunc quis, maximus varius ipsum. Sed bibendum ex in dignissim bibendum.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //Tooltip -->
<!-- banner-bottom -->
<div class="services">
   <div class="container">
            <h3 class="w3l_header two">Services We Do</h3>
			<p class="quia">What We Do</p>
       <div class="wthree_services_bottom_left w3ls_banner_bottom_grids">
			<div class="wthree_services_bottom_left_grid">
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g1.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Oil Industry</h3>
						</div>
					</div>
				    <div class="serve_info_agile two">
					    <h4>Lorem ipsum dolor</h4>
						<p>Our working Process</p>
					 </div>
				</div>
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g2.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Oil Industry</h3>
						</div>
					</div>
						 <div class="serve_info_agile two">
					    <h4>Lorem ipsum dolor</h4>
						<p>Our working Process</p>
					 </div>
				</div>
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g3.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Oil Industry</h3>
						</div>
					</div>
						 <div class="serve_info_agile two">
					    <h4>Lorem ipsum dolor</h4>
						<p>Our working Process</p>
					 </div>
				</div>
				<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g4.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Oil Industry</h3>
						</div>
					</div>
						 <div class="serve_info_agile">
					    <h4>Lorem ipsum dolor</h4>
						<p>Our working Process</p>
					 </div>
				</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g5.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Oil Industry</h3>
						</div>
					</div>
					 <div class="serve_info_agile">
					    <h4>Lorem ipsum dolor</h4>
						<p>Our working Process</p>
					 </div>
				</div>
					<div class="col-md-4 w3_agileits_services_bottom_l_grid">
					<div class="agile_services_bottom_l_grid1">
						<img src="images/g6.jpg" alt=" " class="img-responsive" />
						<div class="w3_service_bottom_grid_pos">
							<h3>Oil Industry</h3>
						</div>
					</div>
						 <div class="serve_info_agile">
					    <h4>Lorem ipsum dolor</h4>
						<p>Our working Process</p>
					 </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
</div>
<!--//services -->
<!--/team-->
<div class="team">
   <div class="container">
            <h3 class="w3l_header">Meet Our Team</h3>
			<p class="quia">Who We Are</p>
       <div class="w3ls_banner_bottom_grids">
			<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t1.jpg" alt="">
							<div class="team-caption"> 
								<h4>Peter Parker</h4>
								<p>Security</p>
								<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>
						</div>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t4.jpg" alt="">
							<div class="team-caption"> 
								<h4>Steven Wilson</h4>
								<p>Worker</p>
								<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>
						</div>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t2.jpg" alt="">
							<div class="team-caption"> 
								<h4>Kate Winslet</h4>
								<p>Supervisor</p>
								<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>
						</div>
					</div>
					<div class="col-md-3 agileits-team-grid">
						<div class="team-info">
							<img src="images/t3.jpg" alt="">
							<div class="team-caption"> 
								<h4>Justo Congue</h4>
								<p>Worker</p>
								<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>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
		</div>
	</div>
<!--//team-->
<!-- stats -->
	<div class="stats">
		<div class="container">
			<div class="col-md-3 w3_stats_grid">
				<h3 id="w3l_stats1" class="odometer">0</h3>
				<p>Years of Experience</p>
			</div>
			<div class="col-md-3 w3_stats_grid">
				<h3 id="w3l_stats2" class="odometer">0</h3>
				<p>Awards Winning</p>
			</div>
			<div class="col-md-3 w3_stats_grid">
				<h3 id="w3l_stats3" class="odometer">0</h3>
				<p>Workers</p>
			</div>
			<div class="col-md-3 w3_stats_grid">
				<h3 id="w3l_stats4" class="odometer">0</h3>
				<p>Companies</p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //stats -->
<!-- projects -->
	<div class="projects">
		<div class="container">
	        <h3 class="w3l_header">Latest Works</h3>
			<p class="quia">View our Works</p>
			<div class="w3ls_banner_bottom_grids">
			<div class="col-md-8 projects-agileits-left">
				<div class="w3_agile_projects_grid">
					<div class="w3layouts_projects_grid projects1">
						<div class="w3layouts_projects_grid_pos">
							<div class="wthree_text">
								<h6>Industry</h6>
							</div>
						</div>
					</div>
						<div class="projects1-info-w3ls">
						<h6>Lorem ipsum dolor</h6>
						<p>Donec semper rutrum ipsum et bibendum.</p>
						</div>
						<div class="clearfix"> </div>
				</div>
				<div class="w3_agile_projects_grid">
					<div class="w3layouts_projects_grid projects2">
						<div class="w3layouts_projects_grid_pos">
							<div class="wthree_text">
								<h6>Industry</h6>
							</div>
						</div>
					</div>
						<div class="projects2-info-w3ls">
						<h6>Consectetur adipiscing</h6>
						<p>Donec semper rutrum ipsum et bibendum.</p>
						</div>
						<div class="clearfix"> </div>
				</div>
				</div>
				<div class="col-md-4 projects-agileits-right">
				<div class="w3_agile_projects_grid">
					<div class="w3layouts_projects_grid projects3">
						<div class="w3layouts_projects_grid_pos">
							<div class="wthree_text">
								<h6>Industry</h6>
							</div>
						</div>
					</div>
					<div class="projects3-info-w3ls">
						<h6>Lorem ipsum dolor</h6>
						<p>Donec semper rutrum ipsum et bibendum.</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //projects -->
<!-- testimonials -->
	<div class="testimonials"> 
		<div class="container">
			 <h3 class="w3l_header two">Testimonials</h3>
			<p class="quia">Our Clients words </p>
		   <div class="w3ls_testimonials_grids">
				 <section class="center slider">
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
									non laoreet dolor.</p>
								<h4>Rosy Crisp</h4>
									<h5>Client</h5>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/1.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
									non laoreet dolor.</p>
								<h4>Laura Paul</h4>
									<h5>Client</h5>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/2.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
						<div class="agileits_testimonial_grid">
							<div class="w3l_testimonial_grid">
								<p>In eu auctor felis, id eleifend dolor. Integer bibendum dictum erat, 
									non laoreet dolor.</p>
								<h4>Michael Doe</h4>
								<h5>Client</h5>
								<div class="w3l_testimonial_grid_pos">
									<img src="images/3.png" alt=" " class="img-responsive" />
								</div>
							</div>
						</div>
				</section>
			</div>
		</div>
	</div>
<!-- //testimonials -->
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="col-md-4 agile_footer_grid">
				<h3>About Us</h3>
				<p>Donec purus neque, vulputate id est id, pretium semper enim. Morbi viverra 
					congue nisi vel pulvinar posuere sapien eros, sed faucibus.</p>
				<ul class="agileits_social_list">
					<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="col-md-4 agile_footer_grid">
				<h3>Latest News</h3>
				<ul class="agileits_w3layouts_footer_grid_list">
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
						<a href="#" data-toggle="modal" data-target="#myModal">Donec purus neque, vulputate 
							id est id</a>
					</li>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
						<a href="#" data-toggle="modal" data-target="#myModal">Nullam fringilla sed quam vitae</a>
					</li>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
						<a href="#" data-toggle="modal" data-target="#myModal">Cras libero arcu, accumsan ac </a>
					</li>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
						<a href="#" data-toggle="modal" data-target="#myModal">Aenean porttitor accumsan</a>
					</li>
					<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
						<a href="#" data-toggle="modal" data-target="#myModal">Nullam sed turpis gravida</a>
					</li>
				</ul>
			</div>
			<div class="col-md-4 agile_footer_grid">
				<h3>Contact Info</h3>
				<ul class="w3_address">
					<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>1234k Avenue, 4th block, <span>New York City.</span></li>
					<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i><a href="mailto:[email protected]">[email protected]</a></li>
					<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>+1234 567 567</li>
				</ul>
			</div>
			<div class="clearfix"> </div>
			<div class="w3_agileits_footer_grids">
				<div class="col-md-4 wthree_footer_grid_left">
				</div>
				<div class="col-md-8 wthree_footer_grid_right">
					<h3>Sign up for our Newsletter</h3>
					<form action="#" method="post">
						<input type="email" name="Email" placeholder="Enter your email..." required="">
						<input type="submit" value="Submit">
					</form>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="agileinfo_copyright">
				<p>? 2017 Oil Industry. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
			</div>
		</div>
	</div>
<!-- //footer -->
<!-- bootstrap-pop-up -->
	<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					Oil Industry
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div>
				<section>
					<div class="modal-body">
						<img src="images/g4.jpg" alt=" " class="img-responsive" />
						<p>Ut enim ad minima veniam, 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.
							<i>" Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
								esse quam nihil molestiae consequatur.</i></p>
					</div>
				</section>
			</div>
		</div>
	</div>
		<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">Sign In</h3>	
																			<div class="login-form">
																				<form action="#" method="post">
																					<input type="text" name="email" placeholder="E-mail" required="">
																					<input type="password" name="password" placeholder="Password" required="">
																					<div class="tp">
																						<input type="submit" value="Sign In">
																					</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>
													<!-- //Modal1 -->	
													<!-- Modal2 -->
													<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">Sign Up</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" required="">
																					<input type="password" name="password" placeholder="Confirm Password" required="">
																					<input type="submit" value="Sign Up">
																				</form>
																			</div>
																			<p><a href="#"> By clicking register, I agree to your terms</a></p>
																		</div>
																</div>
															</div>
														</div>
													</div>
													<!-- //Modal2 -->	
<!-- //bootstrap-pop-up -->
<!-- js -->
<!-- carousal -->
	<script type="text/javascript">
		$(document).on('ready', function() {
		  $(".center").slick({
			dots: true,
			infinite: true,
			centerMode: true,
			slidesToShow: 2,
			slidesToScroll: 2,
			responsive: [
				{
				  breakpoint:800,
				  settings: {
					arrows: true,
					centerMode: false,
					slidesToShow: 1
				  }
				},
				{
				  breakpoint: 480,
				  settings: {
					arrows: true,
					centerMode: false,
					centerPadding: '40px',
					slidesToShow: 1
				  }
				}
			 ]
		  });
		});
	</script>
<!-- //carousal -->
<!-- //js -->
<script>
        $(function(){ 
  // parameters
  // image height
  var images_height = '650px';
  // array of images
  var images_url = [
      'images/banner1.jpg',
      'images/banner2.jpg',
      'images/banner3.jpg'
  ];
  var images_count = images_url.length;
  // create nodes
  for(var j=0;j<images_count+1;j++){
      $('.banner ul').append('<li></li>')
  }
  // pagination
  for(var j=0;j<images_count;j++){
      if(j==0){
          $('.banner ol').append('<li class="current"></li>')
      }else{
          $('.banner ol').append('<li></li>')
      }
  }
  // convert images into backgrounds
  $('.banner ul li').css('background-image','url('+images_url[0]+')');
  $.each(images_url,function(key,value){
      $('.banner ul li').eq(key).css('background-image','url('+value+')');
  });
  $('.banner').css('height',images_height);
  $('.banner ul').css('width',(images_count+1)*100+'%');
  $('.banner ol').css('width',images_count*20+'px');
  $('.banner ol').css('margin-left',-images_count*20*0.5-10+'px');
  var num = 0;
  var window_width = $(window).width();
  $(window).resize(function(){
      window_width = $(window).width();
      $('.banner ul li').css({width:window_width});
      clearInterval(timer);
      nextPlay();
      timer = setInterval(nextPlay,2000);
  });
  $('.banner ul li').width(window_width);
  // pagination dots
  $('.banner ol li').mouseover(function(){
      $(this).addClass('current').siblings().removeClass('current');
      var i = $(this).index();
      //console.log(i);
      $('.banner ul').stop().animate({left:-i*window_width},500);
      num = i;
  });
  // autoplay
  var timer = null;
  function prevPlay(){
      num--;
      if(num<0){
          $('.banner ul').css({left:-window_width*images_count}).stop().animate({left:-window_width*(images_count-1)},500);
          num=images_count-1;
      }else{
          $('.banner ul').stop().animate({left:-num*window_width},500);
      }
      if(num==images_count-1){
          $('.banner ol li').eq(images_count-1).addClass('current').siblings().removeClass('current');
      }else{
          $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
      }
  }
  function nextPlay(){
      num++;
      if(num>images_count){
          $('.banner ul').css({left:0}).stop().animate({left:-window_width},500);
          num=1;
      }else{
          $('.banner ul').stop().animate({left:-num*window_width},500);
      }
      if(num==images_count){
          $('.banner ol li').eq(0).addClass('current').siblings().removeClass('current');
      }else{
          $('.banner ol li').eq(num).addClass('current').siblings().removeClass('current');
      }
  }
  timer = setInterval(nextPlay,2000);
  // auto pause on mouse enter
  $('.banner').mouseenter(function(){
      clearInterval(timer);
      $('.banner i').fadeIn();
  }).mouseleave(function(){
      timer = setInterval(nextPlay,2000);
      $('.banner i').fadeOut();
  });
  // goto next
  $('.banner .right').click(function(){
      nextPlay();
  });
  // back to previous
  $('.banner .left').click(function(){
      prevPlay();
  });
});
    </script>
<!-- flexisel -->
		<script type="text/javascript">
		$(window).load(function() {
			$("#flexiselDemo1").flexisel({
				visibleItems: 4,
				animationSpeed: 1000,
				autoPlay: true,
				autoPlaySpeed: 3000,    		
				pauseOnHover: true,
				enableResponsiveBreakpoints: true,
				responsiveBreakpoints: { 
					portrait: { 
						changePoint:480,
						visibleItems: 1
					}, 
					landscape: { 
						changePoint:640,
						visibleItems:2
					},
					tablet: { 
						changePoint:768,
						visibleItems: 2
					}
				}
			});
		});
	</script>
<!-- //flexisel -->
<!-- odometer-script -->
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats1').html(25);
				}, 1000);
			</script>
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats2').html(330);
				}, 1000);
			</script>
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats3').html(22496);
				}, 1000);
			</script>
			<script>
				window.odometerOptions = {
				  format: '(,ddd).dd'
				};
				setTimeout(function(){
					jQuery('#w3l_stats4').html(620);
				}, 1000);
			</script>
		<!-- //odometer-script -->
<!-- start-smoth-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-smoth-scrolling -->
<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
			$().UItoTop({ easingType: 'easeOutQuart' });
			});
	</script>
<!-- //here ends scrolling icon -->
<!-- for bootstrap working -->
<!-- //for bootstrap working -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子