紅色簡潔風格的英文教育培訓機構源碼下載



6 22 8



模板描述:紅色簡潔風格 英文教育 培訓機構,紅色簡潔風格的英文教育培訓機構源碼下載html模板下載

代碼結構

1. 引入CSS

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link href="//fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i&amp;subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" 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 type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/jquery.wmuSlider.js"></script>
<script src="js/jarallax.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">
	<div class="header-top">
		<div class="container">
			<div class="header-top-right">
				<p><i class="fa fa-envelope" aria-hidden="true"></i><a href="mailto:[email protected]">[email protected]</a></p>
				<p><i class="fa fa-phone" aria-hidden="true"></i> +1 234 567 8901</p>
			</div>
		</div>
	</div>
		<div class="head">
			<div class="container">
					<div class="navbar-top">
							<!-- Brand and toggle get grouped for better mobile display -->
							<div class="navbar-header">
							  <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>
								 <div class="navbar-brand logo ">
									<h1 class="animated wow pulse" data-wow-delay=".5s">
									<a href="index.html">E-Progress</a></h1>
								</div>
							</div>
							<!-- Collect the nav links, forms, and other content for toggling -->
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							 <ul class="nav navbar-nav link-effect-4">
							<li class="active"><a href="index.html" data-hover="Home">Home</a> </li>
								<li><a href="about.html" data-hover="About">About </a> </li>
								<li><a href="gallery.html"  data-hover="Gallery">Gallery</a></li>
								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-hover="Pages" data-toggle="dropdown">Pages <b class="caret"></b></a>
									<ul class="dropdown-menu">
										<li><a href="icons.html">Icons</a></li>
										<li><a href="typography.html">Short Codes</a></li>
									</ul>
							  </li>
								<li><a href="contact.html" data-hover="Contact">Contact</a></li>
							  </ul>
							</div><!-- /.navbar-collapse -->
						</div>
					  <div class="clearfix"></div>	
			</div>
		</div>
		<div class="bannerinfo">
			<div class="container">
				<div class="col-md-5 bannergrid">
					<div class="top">
						<h5>Education is the Powerful Weapon</h5>
						<h2>The Future Experience</h2>
					</div>
					<div class="bottom">
						<div class="col-md-6 bannergrid1 clr">
							<i class="fa fa-book" aria-hidden="true"></i>
							<h4>Learning</h4>
							<div class="clearfix"></div>	
							<p>Learning is the act of acquiring new</p>					
						</div>
						<div class="col-md-6 bannergrid1 clr1">
						<i class="fa fa-graduation-cap" aria-hidden="true"></i>
							<h4>Education</h4>							
							<div class="clearfix"></div>			
							<p>an enlightening experience</p>	
						</div>
						<div class="clearfix"></div>
						<div class="col-md-6 bannergrid1 clr2">
						<i class="fa fa-pencil" aria-hidden="true"></i>
							<h4>Study</h4>								
							<div class="clearfix"></div>			
							<p>Reading is a complex cognitive process</p>	
						</div>
						<div class="col-md-6 bannergrid1 clr3">
						<i class="fa fa-university" aria-hidden="true"></i>
							<h4>University</h4>							
							<div class="clearfix"></div>			
							<p>an institute for higher education </p>	
						</div>
						<div class="clearfix"></div>
						<div class="col-md-6 bannergrid1 clr4">
						<i class="fa fa-bicycle" aria-hidden="true"></i>
							<h4>Exam</h4>								
							<div class="clearfix"></div>			
							<p>To test student's knowledge</p>	
						</div>
						<div class="col-md-6 bannergrid1 clr5">
						<i class="fa fa-cog" aria-hidden="true"></i>
							<h4>Result</h4>									
							<div class="clearfix"></div>		
							<p>Merit level of the experience</p>		
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="clearfix"></div>	
				</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 -->
<!-- welcome -->
<div class="welcome">
	<div class="container">  
		<div class="welcome-grids"> 
			<div class="col-md-6 welcome-w3right">
				<img src="images/welcome.jpg" class="img-responsive" alt="" />
				<div class="wthree-model-video">
					<a class="#" data-toggle="modal" data-target="#myModal1">
						<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
					</a>
				</div>
			</div>
			<div class="col-md-6 welcome-w3left">
				<h3>Temporibus autem quibusdam omnis dolor amet?</h3>
				<h4>Voluptas assumenda est, omnis dolor repellendus. 
					Temporibus autem quibusdam et</h4>
				<p>Voluptas assumenda est, omnis dolor repellendus. 
					Temporibus autem quibusdam et aut officiis debitis aut 
					rerum necessitatibus saepe.Nam libero tempore, cum soluta nobis est eligendi optio cumque 
					nihil impedit quo minus id quod maxime placeat facere possimus</p>
				<div class="readmore-w3">
					<a class="readmore" href="#" data-toggle="modal" data-target="#myModal1">View More</a>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</div>
<!-- //welcome -->
<!-- book1 -->
<div class="book  book1 jarallax">
	<div class="container">
	<h3>Education is the most powerful weapon which you can use to </h3>
	<h3>change the world.</h3>
	<p>The function of education is to teach one to think intensively and to think critically. Intelligence plus character - that is the goal of true education. Education is an enlightening experience</p>
	</div>
</div>
<!-- //book1 -->
<!-- Education -->
<div class="education">
	<h3 class="heading">Our education process</h3>
	<div class="container">  
		<div class="col-md-4 eduleft">
			<div class="left1">
				<h3>Learning</h3>
				<p>Skills Through Study</p>
				<span class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
			</div>
			<div class="left1">
				<h3>knowledge</h3>
				<p>Academic Attainment</p>
				<span class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
			</div>
			<div class="left1">
				<h3>teaching</h3>
				<p>Practical Understanding</p>
				<span class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
			</div>
			<div class="left1">
				<h3>discussion</h3>
				<p>To Exchange Ideas</p>
				<span class="glyphicon glyphicon-adjust" aria-hidden="true"></span>
			</div>
		</div>
		<div class="col-md-8 eduright">
			<div class="right1">
				<h3>facilitating learning</h3>
				<p>Voluptas assumenda est, omnis dolor repellendus. 
					Temporibus autem quibusdam et aut officiis debitis aut 
					rerum necessitatibus saepe.Nam libero tempore, cum soluta nobis est eligendi optio cumque 
					nihil impedit quo minus id quod maxime placeat facere possimus</p>
			</div>
			<div class="right1">
				<h3>acquisition of knowledge</h3>
				<p>Voluptas assumenda est, omnis dolor repellendus. 
					Temporibus autem quibusdam et aut officiis debitis aut 
					rerum necessitatibus saepe.Nam libero tempore, cum soluta nobis est eligendi optio cumque 
					nihil impedit quo minus id quod maxime placeat facere possimus</p>
			</div>
			<div class="right1">
				<h3>teaching Subject</h3>
				<p>Voluptas assumenda est, omnis dolor repellendus. 
					Temporibus autem quibusdam et aut officiis debitis aut 
					rerum necessitatibus saepe.Nam libero tempore, cum soluta nobis est eligendi optio cumque 
					nihil impedit quo minus id quod maxime placeat facere possimus</p>
			</div>
			<div class="right1">
				<h3>Group discussion</h3>
				<p>Voluptas assumenda est, omnis dolor repellendus. 
					Temporibus autem quibusdam et aut officiis debitis aut 
					rerum necessitatibus saepe.Nam libero tempore, cum soluta nobis est eligendi optio cumque 
					nihil impedit quo minus id quod maxime placeat facere possimus</p>
			</div>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //Education -->
<!-- book -->
<div class="book jarallax">
	<div class="container">
	<h3>We work hard to prepare every student for the adult life</h3>
	<h3>Better Successful Future</h3>
	<p>Voluptas assumenda est, omnis dolor repellendus. 
		Temporibus autem quibusdam et aut officiis debitis aut 
		rerum necessitatibus saepe.Nam libero tempore, cum soluta nobis est eligendi optio cumque 
		nihil impedit quo minus id quod maxime placeat facere possimus</p>
		<div class="readmore-w3">
			<ul>
				<li><a class="readmore" href="#"  data-toggle="modal" data-target="#myModal2">Get Started</a></li>
				<li><a class="readmore" href="#"  data-toggle="modal" data-target="#myModal3">Register</a></li>
			</ul>
		</div>
	</div>
</div>
<!-- //book -->
<!-- clients-->
	<div class="clients" id="clients">
		<div class="container">
			<h3 class="heading">What our students say's</h3>
			<div class="wmuSlider example1 animated wow slideInUp" data-wow-delay=".5s">
					<div class="wmuSliderWrapper">
						<article style="position: absolute; width: 100%; opacity: 0;"> 
							<div class="banner-wrap">
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-5 c-img">
										<img src="images/c1.jpg"  alt="" />								
									</div>
									<div class="col-md-7 c-info">
										<h4>Jackie</h4>
										<h5>student1</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-5 c-img">
										<img src="images/c2.jpg"  alt="" />								
									</div>
									<div class="col-md-7 c-info">
										<h4>Charlize</h4>
										<h5>student2</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-5 c-img">
										<img src="images/c3.jpg"  alt="" />								
									</div>
									<div class="col-md-7 c-info">
										<h4>Jessica</h4>
										<h5>student3</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
						</article>
						<article style="position: absolute; width: 100%; opacity: 0;"> 
							<div class="banner-wrap">
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-5 c-img">
										<img src="images/c4.jpg"  alt="" />								
									</div>
									<div class="col-md-7 c-info">
										<h4>Daniel</h4>
										<h5>student4</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-5 c-img">
										<img src="images/c5.jpg"  alt="" />								
									</div>
									<div class="col-md-7 c-info">
										<h4>Johnson</h4>
										<h5>student5</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="col-md-4 client-grids">
									<p>In vitae tincidunt turpis. Proin in euismod dolor. Sed eget tellus venenatis, molestie lorem tempus, viverra ante vulputate.</p>
									<div class="col-md-5 c-img">
										<img src="images/c6.jpg"  alt="" />								
									</div>
									<div class="col-md-7 c-info">
										<h4>Scarllet</h4>
										<h5>student6</h5>
									</div>
									<div class="clearfix"></div>
								</div>
								<div class="clearfix"></div>
							</div>
						</article>
					</div>
				</div>
		</div>
	</div>
<!--//clients-->
<!-- contact -->
<div class="contact">
	<h3 class="heading">Contact Us</h3>
	<p>Voluptas assumenda est, omnis dolor repellendus. 
		Temporibus autem quibusdam et aut officiis debitis aut 
		rerum necessitatibus saepe.Nam libero tempore, </p>
	<div class="container">
		<div class="contact-grids">
			<div class="col-md-7 contact-grid wow fadeInUp animated" data-wow-delay=".5s">
				<form action="#" method="post">		
					<input type="text" placeholder="Name" name="name" required="">
					<input type="email" placeholder="Email" name="email" required="">
					<div class="clearfix"> </div>
					<textarea placeholder="Message.." name="message" required=""></textarea>
					<input type="submit" value="Send Now" >
				</form>
			</div>
			<div class="col-md-5 contact-grid wow fadeInUp animated" data-wow-delay=".5s">
				<div class="call ">
					<div class="col-xs-1 contact-grdl">
						<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
					</div>
					<div class="col-xs-3 contact-grdr">
						<h3>Call us :</h3>
					</div>
					<div class="col-xs-8 contact-grdr">
						<ul>
							<li>+3402 890 679</li>
							<li>+5356 890 679</li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="call">
					<div class="col-xs-1 contact-grdl">
						<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
					</div>
					<div class="col-xs-3 contact-grdr">
						<h3>Locate us :</h3>
					</div>
					<div class="col-xs-8 contact-grdr">
						<ul>
							<li>345 Diamond Street,</li>
							<li>Australia.</li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="call">
					<div class="col-xs-1 contact-grdl">
						<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
					</div>
					<div class="col-xs-3 contact-grdr">
						<h3>Mail us :</h3>
					</div>
					<div class="col-xs-8 contact-grdr">
						<ul>
							<li><a href="mailto:[email protected]">[email protected]</a></li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //contact -->
<!-- copyright -->
<div class="copyright">
	<div class="container">
		<div class="copyrighttop">
			<ul>
				<li><h4>Follow us on:</h4></li>
				<li><a class="facebook" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
				<li><a class="facebook" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
				<li><a class="facebook" href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
				<li><a class="facebook" href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
			</ul>
		</div>
		<div class="copyrightbottom">
			<p>? 2017 E-Progress. All Rights Reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
		</div>
		<div class="clearfix"></div>
	</div>
</div>
<!-- //copyright -->
<!-- model-video -->
	<!-- Modal5 -->
	<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> 
					<iframe src="https://player.vimeo.com/video/77456946?title=0&byline=0&portrait=0"></iframe>
				</div>
			</div>
		</div>
	</div>
	<!-- //Modal5 -->
<!-- //model-video -->
<!-- popup for sign in form -->
<div class="modal video-modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModal1">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div id="small-dialog1" class="mfp-hide book-form">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h3>Sign In </h3>
					<form action="#" method="post">
						<input type="text" name="Email" class="email" placeholder="Email" required=""/>
						<input type="password" name="Password" class="password" placeholder="Password" required=""/>	
						<ul>
						<li>
							<input type="checkbox" id="brand1" value="">
							<label for="brand1"><span></span>Remember me</label>
						</li>
						</ul>
						<a href="#">Forgot Password?</a><br>
						<div class="clearfix"></div>
							<input type="submit" value="Get Started">
					</form>
			</div>
		</div>
	</div>
</div>
<!-- //popup for sign in form -->
<!-- popup for sign up form -->
<div class="modal video-modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModal2">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div id="small-dialog2" class="mfp-hide book-form">
			<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h3>Sign Up</h3>
					<form action="#" method="post">
						<input type="text" name="Name" placeholder="Your Name" required=""/>
						<input type="text" name="Email" class="email" placeholder="Email" required=""/>
						<input type="password" name="Password" class="password" placeholder="Password" required=""/>	
						<input type="password" name="Password" class="password" placeholder="Confirm Password" required=""/>
						<input type="submit" value="Register Now">
					</form>
			</div>
		</div>
	</div>
</div>
<!-- //popup for sign up form -->
<!-- Default-JavaScript-File -->
<!-- //Default-JavaScript-File -->
<!-- clients js file-->
	<script src="js/jquery.wmuSlider.js"></script> 
		<script>
			$('.example1').wmuSlider();         
		</script> 
<!-- //clients js file -->
<!-- Jarallax -->
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</script>
<!-- //Jarallax -->
<!-- smooth 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 -->
<!-- smooth scrolling -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子