蓝色欧美风格的教育服务机构企业网站源码下载



15 57 20



模板描述:蓝色欧美风格 教育服务机构 企业网站,蓝色欧美风格的教育服务机构企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/style.css" rel='stylesheet' type='text/css' />
<link href='http://fonts.useso.com/css?family=Poiret+One|Lily+Script+One|Raleway:400,300,500,600,200,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/swipebox.css">

2. 引入JS

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/jquery.swipebox.min.js"></script>

3. HTML代码

<!--start-home-->
		<div class="head" id="home">
		    <div class="header-top">
			    <div class="container">  
					   <p class="col-md-6 location"><i class="glyphicon glyphicon-map-marker"></i>16A, Honey Street</p>
					 <p class="col-md-6 phone"><i class="glyphicon glyphicon-earphone"></i>Phone:<span class="seprat">+128-546-6853</p>
				  <div class="clearfix"> </div>
				 </div>
			</div>
			  <div class="container">  
			     <div class="main">	
				   <div class="wht-head">	
					 <div class="logo">
						<a href="index.html" ><h1><i class="glyphicon glyphicon-education"></i>Educator</h1></a>
					 </div>
					<!--top-nav-->
					 <span class="menu"> </span>
					  <div class="top-menu">
					  <nav>
						<ul class="cl-effect-16">
							<li><a class="active scroll" href="#home" data-hover="Home">Home</a></li>
							<li><a class="scroll" href="#service" data-hover="Services">Services</a></li>
							<li><a class="scroll" href="#about" data-hover="About">About</a></li>
							<li><a class="scroll" href="#teach" data-hover="Teachers">Teachers</a></li>
							<li><a class="scroll" href="#gallery" data-hover="Gallery">Gallery</a></li>
							<li><a class="scroll" href="#contact" data-hover="Contact">Contact</a></li>
							<div class="clearfix"></div>
						</ul>
					</nav>		
					</div>
					<!-- script-for-menu -->
					<script>
					$( "span.menu" ).click(function() {
					  $( ".top-menu" ).slideToggle( "slow", function() {
						// Animation complete.
					  });
					});
				</script>
				<!-- script-for-menu -->
				<div class="clearfix"></div>
			</div>
			 <div class="banner">
					<div class="banner-slider">
						<div  id="top" class="callbacks_container">
						<ul class="rslides" id="slider3">
						<li>
						  <div class="banner-info">
						     <h3>Teach Truth...</h3>
						    <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna.<lable> Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet,</lable> consectetuer dolor sit.</p>
						  </div>
						</li>
						<li>
						  <div class="banner-info">
						   <h3>Study Anywhere </h3>
						  <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna.<lable> Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet,</lable> consectetuer dolor sit.</p>		 
						 </div>
						<li>
					     <div class="banner-info">
						    <h3>Teach Truth...</h3>
						    <p>Lorem Ipsum Maecenas tristique orci ac sem. Duis ultricies pharetra magna.<lable> Donec accumsan malesuada orci. Donec sit amet eros. Lorem ipsumipsum dolor sit amet,</lable> consectetuer dolor sit.</p>
						  </div>
						</li>
					</ul>
			     </div>
			   </div>
			 </div>
			 <!--banner-slide-->
				<script>
				    // You can also use "$(window).load(function() {"
				    $(function () {
				      // Slideshow 4
				      $("#slider3").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>
			 <!--//banner-slide-->
			  <div class="clearfix"></div>
			 <!--end-banner-->
			 	<!--start-services-->
					<div class="services" id="service">
					 <h3 class="tittle two">Services</h3>
						<div class="serve-grids">
							<div class="col-md-3 service-grid">
								<div class="icon">
								 <i class="glyphicon glyphicon-time"></i>
								</div>
								<h5>Amet Dolor</h5>
								<p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="col-md-3 service-grid">
								<div class="icon">
								 <i class="glyphicon glyphicon-book"></i>
								</div>
								<h5>Amet Dolor</h5>
								<p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="col-md-3 service-grid">
								<div class="icon">
								 <i class="glyphicon glyphicon-send"></i>
								</div>
								<h5>Amet Dolor</h5>
								<p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
							<div class="col-md-3 service-grid">
								<div class="icon">
								 <i class="glyphicon glyphicon-gift"></i>
								</div>
								<h5>Amet Dolor</h5>
								<p>Sed ut perspiciis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
							</div>
						<div class="clearfix"></div>
					</div>
				</div>
			<!--//end-services-->
	<!--start-teachers-->
			<div class="teachers" id="teach">
				  <h3 class="tittle">Teachers</h3>
					<div class="teachers-grids">
					<ul class="ch-grid">
					<li>
						<div class="ch-item ch-img-1">				
							<div class="ch-info-wrap">
								<div class="ch-info">
									<div class="ch-info-front ch-img-1"></div>
									<div class="ch-info-back">
										<h3>Educator</h3>
										<p>by Ana Villa-Zamora <a href="#">View on Dribbble</a></p>
									</div>	
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item ch-img-2">
							<div class="ch-info-wrap">
								<div class="ch-info">
									<div class="ch-info-front ch-img-2"></div>
									<div class="ch-info-back">
										<h3>Educator</h3>
										<p>by Arnel Baluyot <a href="#">View on Dribbble</a></p>
									</div>
								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="ch-item ch-img-3">
							<div class="ch-info-wrap">
								<div class="ch-info">
									<div class="ch-info-front ch-img-3"></div>
									<div class="ch-info-back">
										<h3>Educator</h3>
										<p>by Jamal Charanek <a href="#">View on Dribbble</a></p>
									</div>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
	</div>
   <!--//end-teachers-->
   <!--start-about-->
				<div class="about" id="about">
				  <h3 class="tittle two">About US</h3>
				   <div class="ab-top">
					<div class="col-md-7 ab-left">
					<h3 class="sub-text">Welcome to Our Education...</h3>
					 <p>Donec orci arcu, convallis id massa ac, imperdiet aliquet massa. Vivamus sit amet felis vitae nibh porttitor faucibus a eget risus. Aliquam bibendum quam leo, id vehicula enim elementum et. Aenean id turpis mattis, sagittis urna vehicula, euismod risus. Praesent mattis est et vulputate accumsan.Proin luctus, justo sit amet laoreet venenatis, libero velit tincidunt mi, nec fermentum ante massa id quam. In gravida erat vel diam blandit consequat. Morbi ut interdum nunc, eu egestas arcu.</p>
					  <p class="para">Donec orci arcu, convallis id massa ac, imperdiet aliquet massa.Donec orci arcu, convallis id massa ac, imperdiet aliquet massa.</p>
					</div>
					<div class="col-md-5 ab-img">
						<div  id="top" class="callbacks_container">
							<ul class="rslides" id="slider4">
							<li>  <img src="images/ab.jpg" alt=" " title="ab" /></li>
							<li>  <img src="images/ab2.jpg" alt=" " title="ab" /></li>
							<li>  <img src="images/ab.jpg" alt=" " title="ab" /></li>
						  </ul>
						</div>
				   <script>
					// You can also use "$(window).load(function() {"
					$(function () {
					  // Slideshow 4
					  $("#slider4").responsiveSlides({
						auto: true,
						pager:false,
						nav: true,
						speed: 500,
						namespace: "callbacks",
						before: function () {
						  $('.events').append("<li>before event fired.</li>");
						},
						after: function () {
						  $('.events').append("<li>after event fired.</li>");
						}
					  });
					});
				  </script>
					</div>
					  <div class="clearfix"></div>
				   </div>
				</div>
			<!--start-gallery-->
		<div class="gallery" id="gallery">
			<h3 class="tittle">Gallery</h3>
			<div class="gallery-bottom">
			 <div class="view view-fifth">
                    <a href="images/g1.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title"><img src="images/g1.jpg" alt="" class="img-responsive">
						<div class="mask">
							<h2>Educator</h2>
							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
							<a href="#" class="info">More</a>
						</div>
					</a>
                </div>
                <div class="view view-fifth">
                   <a href="images/g2.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title"><img src="images/g2.jpg" alt="" class="img-responsive">
						<div class="mask">
							<h2>Educator</h2>
							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
							<a href="#" class="info">More</a>
						</div>
					</a>
                </div>
                <div class="view view-fifth">
                    <a href="images/g3.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title"><img src="images/g3.jpg" alt="" class="img-responsive">
						<div class="mask">
							<h2>Educator</h2>
							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
							<a href="#" class="info">More</a>
						</div>
					</a>
                </div>
                <div class="view view-fifth">
                   <a href="images/g4.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title"><img src="images/g4.jpg" alt="" class="img-responsive">
						<div class="mask">
							<h2>Educator</h2>
							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
							<a href="#" class="info">More</a>
						</div>
					</a>
                </div>
				 <div class="view view-fifth">
                    <a href="images/g5.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title"><img src="images/g5.jpg" alt="" class="img-responsive">
						<div class="mask">
							<h2>Educator</h2>
							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
							<a href="#" class="info">More</a>
						</div>
					</a>
                </div>
                <div class="view view-fifth">
                    <a href="images/g6.jpg" class="b-link-stripe b-animate-go  swipebox"  title="Image Title"><img src="images/g6.jpg" alt="" class="img-responsive">
						<div class="mask">
							<h2>Educator</h2>
							<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
							<a href="#" class="info">More</a>
						</div>
					</a>
                </div>
                <div class="clearfix"> </div>
            </div>
		</div>
		<!--contact-->
			<div class="contact" id="contact">
					<h3 class="tittle two">Contact</h3>
						<div class="contact-top">
							<div class="col-md-8 contact-top-right">
								<form>
									<input type="text" class="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
									 <input type="text" class="text" value="Email Address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email Address';}">
									<textarea value="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
									<div class="sub-button">
										<input type="submit" value="SEND">
									</div>
								</form>
							</div>
							<div class="col-md-4 contact-top-left">
							<div class="contact-top-one">
								<h4>Address:</h4>
									<p>Newyork Still Road.
									<span>756 gt globel Place,</span>
										CD-Road,M 07 435.
									</p>
							</div>
							<div class="contact-top-one">
								<h4>Phone:</h4>
									<p>Telephone: +1 234 567 9871
									<span>FAX: +1 234 567 9871</span>
									</p>
							</div>
							<div class="contact-top-one">
								<h4>E-mail:</h4>
								<p><a href="mailto:info@example.com">mail@example.com</a></p>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<!--contact-->
			<div class="copy">
		              <p>&copy; 2015 Educator. All Rights Reserved | Design by <a href="http://www.51qianduan.com//">xmoban.cn</a> </p>
		            </div>
					<!--footer-->
	</div>
	<script src="js/jquery.swipebox.min.js"></script> 
	    <script type="text/javascript">
			jQuery(function($) {
				$(".swipebox").swipebox();
			});
</script>
	<!--//gallery-->
	</div>
</div>	
	<!--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-->
						<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>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 艺术创意 创意 艺术 文艺 文艺范 艺术气息 教育培训 教育 培训 教育培训行业 教育行业 培训行业

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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