紅色簡潔風格的英文駕校企業網站源碼下載



5 16 6



模板描述:紅色簡潔風格 英文駕校 企業網站,紅色簡潔風格的英文駕校企業網站源碼下載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/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="css/JiSlider.css" rel="stylesheet">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" property="" />
<link href="//fonts.googleapis.com/css?family=Alegreya+Sans:100,100i,300,300i,400,400i,500,500i,700,700i,800,800i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext" rel="stylesheet">

2. 引入JS

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/JiSlider.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/counterup.min.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

3. HTML代碼

<!-- banner -->
<div class="banner-silder">
	<!-- header -->
	<div class="header-w3l">
		<div class="col-md-6 header">
			<div class="col-xs-4 agileits_w3layouts_logo">
				<i class="fa fa-car car-w3l" aria-hidden="true"></i>
				<h1><a href="index.html">Joy Ride</a><span>Driving School</span></h1>
				<div class="clearfix"></div>
			</div>
			<div class="col-xs-4 w3_agileits_header_text">
				<h3>Call Us: 012 345 6789</h3>
			</div>
			<div class="col-xs-4 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>
					<li><a href="#" class="w3_agile_vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>	
		<!-- Nav -->
		<div class="col-md-6 w3_agile_menu">
			<div class="agileits_w3layouts_nav">
				<div id="toggle_m_nav">
					<div id="m_nav_menu" class="m_nav">
						<div class="m_nav_ham w3_agileits_ham" id="m_ham_1"></div>
						<div class="m_nav_ham" id="m_ham_2"></div>
						<div class="m_nav_ham" id="m_ham_3"></div>
					</div>
				</div>
				<div id="m_nav_container" class="m_nav wthree_bg">
					<nav class="menu menu--sebastian">
						<ul id="m_nav_list" class="m_nav menu__list">
							<li class="m_nav_item active" id="m_nav_item_1"> <a href="index.html" class="link link--kumya"><i class="fa fa-home" aria-hidden="true"></i><span data-letters="Home">Home</span></a></li>
							<li class="m_nav_item" id="moble_nav_item_2"> <a href="services.html" class="link link--kumya"><i class="fa fa-cog" aria-hidden="true"></i><span data-letters="Services">Services</span></a></li>
							<li class="m_nav_item" id="moble_nav_item_3"> <a href="gallery.html" class="link link--kumya"><i class="fa fa-picture-o" aria-hidden="true"></i><span data-letters="Gallery">Gallery</span></a></li>
							<li class="dropdown menu__item menu__item--current m_nav_item">
								<a href="#" class="dropdown-toggle menu__link link link--kumya" data-toggle="dropdown"><i class="fa fa-clone" aria-hidden="true"></i><span data-letters="Short Codes">Short Codes<b class="caret"></b></span></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 class="m_nav_item" id="moble_nav_item_6"> <a href="mail.html" class="link link--kumya"><i class="fa fa-envelope-o" aria-hidden="true"></i><span data-letters="Mail Us">Mail Us</span></a></li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
		<div class="clearfix"> </div>
		<!-- //Nav -->
	</div>	
	<!-- //header -->
	<div id="JiSlider" class="jislider">
		<ul>
			<li>
				<div class="w3layouts-banner-top">
					<div class="container">
						<div class="agileits-banner-info">
							<p>Welcome to Our Driving School</p>
							<h3>Offering careful training</h3>
							<div class="agileits_w3layouts_more menu__item">
								<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
							</div>
							<div class="thim-click-to-bottom">
								<a href="#about" class="scroll">
									<i class="fa fa-long-arrow-down" aria-hidden="true"></i>
								</a>
							</div>
							<div class="ftr-text">
								<p><a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i>[email protected]</a></p>
							</div>
						</div>	
					</div>
				</div>
			</li>
			<li>
				<div class="w3layouts-banner-top w3layouts-banner-top1">
					<div class="container">
						<div class="agileits-banner-info">
							<p>Welcome to Our Driving School</p>
							<h3>Drive a New Car With Us</h3>
							<div class="agileits_w3layouts_more menu__item">
								<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
							</div>
							<div class="thim-click-to-bottom">
								<a href="#about" class="scroll">
									<i class="fa fa-long-arrow-down" aria-hidden="true"></i>
								</a>
							</div>
							<div class="ftr-text">
								<p><a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i>[email protected]</a></p>
							</div>
						</div>	
					</div>
				</div>
			</li>
			<li>
				<div class="w3layouts-banner-top w3layouts-banner-top2">
					<div class="container">
						<div class="agileits-banner-info">
							<p>Welcome to Our Driving School</p>
							<h3>Online Driving Classes</h3>
							<div class="agileits_w3layouts_more menu__item">
								<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
							</div>
							<div class="thim-click-to-bottom">
								<a href="#about" class="scroll">
									<i class="fa fa-long-arrow-down" aria-hidden="true"></i>
								</a>
							</div>
							<div class="ftr-text">
								<p><a href="mailto:[email protected]"><i class="fa fa-envelope" aria-hidden="true"></i>[email protected]</a></p>
							</div>
						</div>	
					</div>
				</div>
			</li>
		</ul>
		<h5 class="w3l-posi">Designed By <span>W3layouts</span></h5>
	</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="myModal" 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>
					<img src="images/model1.jpg" alt=" " class="img-responsive">
					<h5>Donec lobortis pharetra dolor</h5>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, rds which don't look even slightly believable..</p>
			</div>
		</div>
		<!-- //Modal content-->
	</div>
</div>
<!-- //Modal1 -->
<!-- //banner -->
<!-- about -->
<div class="about" id="about">
	<div class="container">
		<div class="w3-agileits-about-grids">
			<div class="col-md-5 agile-about-left">
				<h3 class="w3l-title title">Welcome</h3>
				<h5>Our Company is the leading manufacturer of traffic, regulatory and safety signs in the country today.</h5>
				<p>Lorem ipsum dolor sit amet, do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				</div>
			<div class="col-md-7 agile-about-right">
				<img src="images/ab.jpg" alt="" />
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //about -->
<!-- middle -->
<div class="middle-w3l">
	<div class="col-md-4 w3ls-special-img w3l-grid-1">
		<div class="w3ls-special-text effect-1">
			<h4>New Adult Drivers</h4>
			<ul>
				<li>Ultimate Beginner</li>
				<li>Adult Intermediate</li>
				<li>Adult Beginner</li>
			</ul>
			<div class="agileits_w3layouts_more menu__item middle-button-w3">
				<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
			</div>
		</div>
	</div>
	<div class="col-md-4 w3ls-special-img w3l-grid-2">
		<div class="w3ls-special-text effect-1">
			<h4>New Teen Drivers</h4>
			<ul>
				<li>Complete Course Options</li>
				<li>Partial Course Options</li>
				<li>Teen Starter Courses</li>
			</ul>
			<div class="agileits_w3layouts_more menu__item middle-button-w3">
				<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
			</div>
		</div>
	</div>
	<div class="col-md-4 w3ls-special-img w3l-grid-3">
		<div class="w3ls-special-text effect-1">
			<h4>Excellent Training</h4>
			<ul>
				<li>Complete Course Options</li>
				<li>Partial Course Options</li>
				<li>Teen Starter Courses</li>
			</ul>
			<div class="agileits_w3layouts_more menu__item middle-button-w3">
				<a href="#" class="menu__link" data-toggle="modal" data-target="#myModal">Learn More</a>
			</div>
		</div>
	</div>
	<div class="clearfix"> </div>
</div>
<!-- //middle -->
<!-- work -->
<div class="what-w3ls">
	<div class="container">
		<h3 class="w3l-title work-title">Work Process</h3>
		<div class="what-grids">
			<div class="col-md-6 what-grid">
				<img src="images/work.jpg" class="img-responsive" alt=""/>
				<div class="what-agile-info">
					<h4>100% Driving Success</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut dignissimos ea est, impedit incidunt.</p>
				</div>
			</div>
			<div class="col-md-6 what-grid1">
				<div class="what-top">
					<div class="what-left">
						<i class="fa fa-car" aria-hidden="true"></i>
					</div>
					<div class="what-right">
						<h4>Full Car Insurance</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut dignissimos ea est, impedit incidunt, laboriosam consectetur adipisicing elit.</p>
					</div>
						<div class="clearfix"></div>
				</div>
				<div class="what-top1">
					<div class="what-left">
						<i class="fa fa-bullhorn" aria-hidden="true"></i>
					</div>
					<div class="what-right">
						<h4>Experienced Instructors</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut dignissimos ea est, impedit incidunt, laboriosam consectetur adipisicing elit.</p>
					</div>
						<div class="clearfix"></div>
				</div>
				<div class="what-top1">
					<div class="what-left">
						<i class="fa fa-road" aria-hidden="true"></i>
					</div>
					<div class="what-right">
						<h4>DRIVING EDUCATION</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut dignissimos ea est, impedit incidunt, laboriosam consectetur adipisicing elit.</p>
					</div>
						<div class="clearfix"></div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //work -->
<!-- stats -->
<div class="stats">
	<div class="container">
		<h3 class="w3l-title stat-title">Stats</h3>
		<div class="agileits_stats_grids">
			<div class="col-md-3 col-xs-4 agileinfo_stats">
				<div class="agileinfo_stats_grid">
					<p class="counter">654</p>
					<h3>Customers</h3>
				</div>
				<p class="w3l-par-st">Dolor sit amet, consectetur elit lorem ipsum sit.</p>
			</div>
			<div class="col-md-3 col-xs-4 agileinfo_stats mid-w3l-stat">
				<div class="agileinfo_stats_grid">
					<p class="counter">432</p>
					<h3>Branches</h3>
				</div>
				<p class="w3l-par-st">Dolor sit amet, consectetur elit lorem ipsum sit.</p>
			</div>
			<div class="col-md-3 col-xs-4 agileinfo_stats">
				<div class="agileinfo_stats_grid">
					<p class="counter">231</p>
					<h3>Popularity</h3>
				</div>
				<p class="w3l-par-st">Dolor sit amet, consectetur elit lorem ipsum sit.</p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //stats -->	
<!-- testimonials -->
<div class="testimonials">
	<div class="container">
		<h3 class="w3l-title work-title">Testimonials</h3>
		<div class="w3_testimonials_grids">
			<div class="slider">
				<div class="flexslider">
					<ul class="slides">
						<li>
							<div class="col-md-7 w3_testimonials_grid_left">
								<p><img src="images/q1.png" alt=" " class="" />Morbi cursus, turpis quis laoreet blandit, odio turpis imperdiet nisl, 
									quis bibendum lorem purus lobortis nunc. Suspendisse tincidunt eu sapien 
									pellentesque interdum. Aenean lacus sapien, blandit vel nibh in, imperdiet 
									egestas erat.<img src="images/q2.png" alt=" " class="" /></p>
							</div>
							<div class="col-md-5 w3_testimonials_grid_right">
								<img src="images/te1.jpg" alt=" " class="img-responsive" />
							</div>
							<div class="clearfix"> </div>
						</li>
						<li>
							<div class="col-md-7 w3_testimonials_grid_left">
								<p><img src="images/q1.png" alt=" " class="" />Morbi cursus, turpis quis laoreet blandit, odio turpis imperdiet nisl, 
									quis bibendum lorem purus lobortis nunc. Suspendisse tincidunt eu sapien 
									pellentesque interdum. Aenean lacus sapien, blandit vel nibh in, imperdiet 
									egestas erat.<img src="images/q2.png" alt=" " class="" /></p>
							</div>
							<div class="col-md-5 w3_testimonials_grid_right">
								<img src="images/te2.jpg" alt=" " class="img-responsive" />
							</div>
							<div class="clearfix"> </div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- //testimonials -->
<!-- footer -->
<div class="footer">
	<div class="container">
		<div class="agileits_w3layouts_footer_grids">
			<div class="col-md-4 agileits_w3layouts_footer_grid">
				<h3>Call Us</h3>
				<ul>
					<li><span>Office Phone :</span> (+123) 2302 232</li>
					<li><span>Fax :</span> (+123) 123 456 455</li>
				</ul>
			</div>
			<div class="col-md-4 agileits_w3layouts_footer_grid">
				<h3>Visit Us</h3>
				<p>132 New Lenox, 868 1st Avenue <i>4th Street NYC.</i></p>
			</div>
			<div class="col-md-4 agileits_w3layouts_footer_grid">
				<h3>Write Us</h3>
				<ul>
					<li><span>Email :</span> <a href="mailto:[email protected]">[email protected]</a></li>
					<li><span>Enquiry :</span> <a href="mailto:[email protected]">[email protected]</a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="agileits_w3layouts_logo logo2">
			<h2><a href="index.html">Joy Ride</a><span>Driving School</span></h2>
			<div class="w3social-icons"> 
				<ul>
					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
					<li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
					<li><a href="#"><i class="fa fa-twitter"></i></a></li>
					<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
				</ul>
			</div>  
		</div>
	</div>
</div>
<div class="wthree_copy_right">
	<div class="container">
		<p>? 2017 Joy Ride. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
	</div>
</div>
<!-- //footer -->
<!-- js-scripts -->		
<!-- js -->
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Necessary-JavaScript-File-For-Bootstrap --> 
<!-- //js -->
<!-- banner-slider -->
<script>
$(window).load(function () {
	$('#JiSlider').JiSlider({color: '#fff', start: 3, reverse: true}).addClass('ff')
})
</script><script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- //banner-slider -->
<!-- menu -->
<!-- //menu -->
<!-- Stats-Number-Scroller-Animation-JavaScript -->
<script src="js/waypoints.min.js"></script> 
<script src="js/counterup.min.js"></script> 
<script>
	jQuery(document).ready(function( $ ) {
		$('.counter').counterUp({
			delay: 10,
			time: 1000 
		});
	});
</script>
<!-- //Stats-Number-Scroller-Animation-JavaScript -->
<!-- flexSlider -->
<script type="text/javascript">
$(window).load(function(){
  $('.flexslider').flexslider({
	animation: "slide",
	start: function(slider){
	  $('body').removeClass('loading');
	}
  });
});
</script>
<!-- //flexSlider -->
<!-- smooth scrolling -->
<!-- //smooth scrolling -->
<!-- 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 -->
<!-- //js-scripts -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子