白色欧美风格的专业院校整站网站源码下载



17 65 22



模板描述:白色欧美风格 专业院校 整站网站,白色欧美风格的专业院校整站网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="//fonts.googleapis.com/css?family=Comfortaa:300,400,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Nunito:300,400,700" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/footer-pic.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/jQuery.lightninBox.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/staff.css" rel="stylesheet" type="text/css" media="all"/>
<link href='css/aos.css' rel='stylesheet prefetch' type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/modernizr.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/grayscale.js"></script>
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<script src="js/top.js"></script>
<script src="js/bgfader.js"></script>
<script src="js/jarallax.js"></script>
<script src="js/jquery.picEyes.js"></script>
<script src="js/jQuery.lightninBox.js"></script>
<script src='js/aos.js'></script>
<script src="js/index.js"></script>

3. HTML代码

<!-- navigation -->
<div class="navbar-wrapper">
	<div class="container">
		<nav class="navbar navbar-inverse navbar-static-top">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html"><h1>Scholastic</h1></a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav cl-effect-18">
					<li class="active"><a href="index.html" class="page-scroll" data-hover="Home">Home</a></li>
					<li><a href="#about" class="page-scroll" data-hover="About">About</a></li>
					<li><a href="#service" class="page-scroll" data-hover="Services">Services</a></li>
					<li><a href="#team" class="page-scroll" data-hover="Team">Team</a></li>
					<li><a href="#portfolio" class="page-scroll" data-hover="Portfolio">Portfolio</a></li>
					<li><a href="#contact" class="page-scroll" data-hover="Contact">Contact</a></li>
				</ul>
			</div>
			<div class="search-w3ls">
				<form action="#" method="post">
					<div class="input-group">
						<input type="text" class="form-control" name="search" id="search2" placeholder="Search" required/>
						<span class="input-group-btn">
							<button class="btn btn-default" type="submit" ><i class="fa fa-search"></i></button>
						</span>
					</div>
				</form>
			</div>
        </nav>
	</div>	
</div>
<!-- /navigation -->
<!-- banner section -->
<section class="banner-w3ls">
	<div class='header'>
		<div class="container">
			<div class="banner-agileits">
				<h2>Scholastic Is The Sound Of The Future</h2>	
				<ul class="social-icons1">
					<li><a href="#"><i class="fa fa-facebook"></i></a></li>
					<li><a href="#"><i class="fa fa-youtube"></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>
	</div>	
</section>
<!-- /banner section -->
<!-- info section -->
<section class="info-w3l" id="info" data-aos="zoom-in">
	<div class="col-lg-4 col-md-4 col-sm-12 info-wthree1">
		<div class="col-xs-2">
			<i class="fa fa-university" aria-hidden="true"></i>
		</div>
		<div class="col-xs-10">
			<div class="info-agile">
				<h3>Lorem Ipsum Dolor</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra. Nullam gravida est et leo malesuada, at mattis nibh placerat.</p>
			</div>
		</div>
		<div class="clearfix"></div>
		<hr>
	</div>
	<div class="col-lg-4 col-md-4 col-sm-12 info-wthree2">
		<div class="col-xs-2">
			<i class="fa fa-certificate" aria-hidden="true"></i>
		</div>
		<div class="col-xs-10">
			<div class="info-agile">
				<h3>Adipiscing Elit</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra. Nullam gravida est et leo malesuada, at mattis nibh placerat.</p>
			</div>
		</div>
		<div class="clearfix"></div>
		<hr>
	</div>
	<div class="col-lg-4 col-md-4 col-sm-12 info-wthree3">
		<div class="col-xs-2">
			<i class="fa fa-cogs" aria-hidden="true"></i>
		</div>
		<div class="col-xs-10">
			<div class="info-agile">
				<h3>Phasellus Sed</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra. Nullam gravida est et leo malesuada, at mattis nibh placerat.</p>
			</div>
		</div>
		<div class="clearfix"></div>
		<hr>
	</div>
	<div class="clearfix"></div>
</section>
<!-- /info section -->
<!-- services section -->
<section class="service-w3l" id="service">
	<div class="container">
		<div class="col-lg-4 col-md-12 col-sm-12" data-aos="flip-up">
			<h3>Our Services</h3>
			<p class="serv-p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique felis ipsum.</p>
		</div>
		<div class="col-lg-8 col-md-12 col-sm-12">
			<div class="col-xs-4 serv-agile1" data-aos="flip-up">
				<i class="fa fa-cog" aria-hidden="true"></i>
				<h4>Lorem Ipsum Dolor</h4>
				<p class="serv-p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra.</p>
			</div>
			<div class="col-xs-4 serv-agile2" data-aos="flip-up">
				<i class="fa fa-book" aria-hidden="true"></i>
				<h4>Adipiscing Elit</h4>
				<p class="serv-p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra.</p>
			</div>
			<div class="col-xs-4 serv-agile3" data-aos="flip-up">
				<i class="fa fa-shield" aria-hidden="true"></i>
				<h4>Phasellus Sed</h4>
				<p class="serv-p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra.</p>
			</div>
			<div class="clearfix"></div>
			<div class="col-xs-4 serv-agile4" data-aos="flip-up">
				<i class="fa fa-graduation-cap" aria-hidden="true"></i>
				<h4>Tortor Feugiat</h4>
				<p class="serv-p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra.</p>
			</div>
			<div class="col-xs-4 serv-agile5" data-aos="flip-up">
				<i class="fa fa-flask" aria-hidden="true"></i>
				<h4>Luctus Pharetra</h4>
				<p class="serv-p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra.</p>
			</div>
			<div class="col-xs-4 serv-agile6" data-aos="flip-up">
				<i class="fa fa-database" aria-hidden="true"></i>
				<h4>Nullam Gravida</h4>
				<p class="serv-p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra.</p>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
</section>
<!-- /services section -->
<!-- about section -->
<section class="about-agileits" id="about">
	<div class="container">
		<div class="col-lg-6 col-md-6 col-sm-12 about-w3ls1" data-aos="zoom-in">
			<div class="hover01 column">
				<div>
					<figure>
						<img src="images/about-img.jpg" alt="" class="img-responsive">
					</figure>
				</div>
			</div>		
		</div>
		<div class="col-lg-6 col-md-6 col-sm-12 about-w3ls2" data-aos="zoom-in">
			<div class="about-w3l">
				<h3><span class="fa fa-diamond" aria-hidden="true"></span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>	
				<p> Maecenas libero odio, dignissim eu tempor et, efficitur ut nisl. Duis elementum nulla eu iaculis maximus. Nullam enim neque, rhoncus in porta eget, maximus at elit. Duis faucibus velit non nunc luctus lobortis. Praesent interdum finibus viverra. </p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed tortor feugiat nisl luctus pharetra.</p>
				<ul class="about-links">
					<li><a href="#" class="about-link1" data-toggle="modal" data-target="#largeModal">Read More</a></li>
					<li><a href="#" class="about-link2">Download</a></li>
				</ul>
			</div>	
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<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 w3-agileits agileits-w3layouts w3layouts">About Us</h4>
				</div>
				<div class="modal-body">
					<div class="col-lg-6 col-md-6 col-sm-12">
						<img src="images/about-img.jpg" alt="" class="img-responsive">
					</div>
					<div class="col-lg-6 col-md-6 col-sm-12">
						<p class="news-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra laoreet aliquet. Sed tristique ex lectus, ut maximus ipsum tempus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor eros quis leo bibendum, eu bibendum ligula malesuada.</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- /about section -->
<!-- Staff section  -->
<section class="staff-agileinfo" id="team">
	<div class="container">
		<h3 class="text-center">Our Team</h3>
		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile1" data-aos="flip-up">
			<div class="view view-eighth">
                <img src="images/team-img1.jpg" alt="" class="img-responsive"/>
                <div class="mask">
                    <h4>Elizabeth</h4>
					<ul class="team-social">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-youtube"></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>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
					</ul>
                    <p class="info">Chairman</p>
                </div>
            </div>
		</div>
		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile2" data-aos="flip-up">
			<div class="view view-eighth">
                <img src="images/team-img2.jpg" alt="" class="img-responsive"/>
                <div class="mask">
                    <h4>James Cameron</h4>
					<ul class="team-social">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-youtube"></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>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
					</ul>
                    <p class="info">Director</p>
                </div>
            </div>
		</div>
		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile3" data-aos="flip-up">
			<div class="view view-eighth">
                <img src="images/team-img3.jpg" alt="" class="img-responsive"/>
                <div class="mask">
                    <h4>Max Payne</h4>
                    <ul class="team-social">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-youtube"></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>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
					</ul>
                    <p class="info">Manager</p>
                </div>
            </div>
		</div>
		<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6 team-agile4" data-aos="flip-up">
			<div class="view view-eighth">
                <img src="images/team-img4.jpg" alt="" class="img-responsive"/>
                <div class="mask">
                    <h4>Stephen John</h4>
                    <ul class="team-social">
						<li><a href="#"><i class="fa fa-facebook"></i></a></li>
						<li><a href="#"><i class="fa fa-youtube"></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>
						<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
					</ul>
                    <p class="info">Secretary</p>
                </div>
            </div>
		</div>
		<div class="clearfix"></div>
	</div>
</section>
<!-- /Staff section -->
<!-- subscribe section -->
<section class="subs jarallax">
	<div class="container">
		<div class="col-lg-6 col-md-6 subs-w3ls1" data-aos="zoom-in">
			<h3>Subscribe To Us</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis augue at auctor mollis. Aliquam sollicitudin accumsan scelerisque. Sed aliquet elit vitae ex posuere, a fringilla metus congue.</p>
		</div>
		<div class="col-lg-6 col-md-6 subs-w3ls1" data-aos="zoom-in">
			<div class="subscribe">
				<form action="#" method="post">
					<div class="form-group1">
						<input class="form-control" id="mail" name="email" placeholder="Enter Your Email Address" type="email" required>
					</div>
					<div class="form-group2">
						<button class="btn btn-outline btn-lg" type="submit">Subscribe</button>
					</div>
					<div class="clearfix"></div>
				</form>
			</div>	
		</div>
		<div class="clearfix"></div>
	</div>
</section>
<!-- /subscribe section -->
<!-- Portfolio section -->
<section class="portfolio-agileinfo" id="portfolio">
	<h3 class="text-center">Our Portfolio</h3>
	<div class="gallery-grids">
		<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
			<ul id="myTab" class="nav nav-tabs" role="tablist" data-aos="zoom-in">
				<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">All</a></li>
				<li role="presentation"><a href="#teach" role="tab" id="teach-tab" data-toggle="tab" aria-controls="teach">Teaching</a></li>
				<li role="presentation"><a href="#train" role="tab" id="train-tab" data-toggle="tab" aria-controls="train">Training</a></li>
				<li role="presentation"><a href="#learn" role="tab" id="learn-tab" data-toggle="tab" aria-controls="learn">Learning</a></li>
				<li role="presentation"><a href="#award" role="tab" id="award-tab" data-toggle="tab" aria-controls="award">Awards</a></li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
					<div class="tab_img">
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img1.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img1.jpg" class="img-responsive" alt="w3ls" />
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Training</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img2.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img2.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Teaching</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img3.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img3.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Learning</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img4.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img4.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Learning</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="tab_img">
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img5.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img5.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Learning</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img6.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img6.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Teaching</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img7.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img7.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img8.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img8.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Training</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img9.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img9.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img10.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img10.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img11.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img11.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Teaching</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img12.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/port-img12.jpg" class="img-responsive" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div role="tabpanel" class="tab-pane fade" id="teach" aria-labelledby="teach-tab">
					<div class="tab_img">
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img2.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="2">
								<img src="images/port-img2.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Teaching</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img6.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="2">
								<img src="images/port-img6.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Teaching</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img11.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="2">
								<img src="images/port-img11.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Teaching</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>	
				</div>
				<div role="tabpanel" class="tab-pane fade" id="train" aria-labelledby="train-tab">
					<div class="tab_img">
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img1.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="3">
								<img src="images/port-img1.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Training</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img8.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="3">
								<img src="images/port-img8.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Training</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>	
				</div>
				<div role="tabpanel" class="tab-pane fade" id="learn" aria-labelledby="learn-tab">
					<div class="tab_img">
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img3.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="4">
								<img src="images/port-img3.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Learning</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img4.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="4">
								<img src="images/port-img4.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Learning</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img5.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="4">
								<img src="images/port-img5.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Learning</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>	
				</div>
				<div role="tabpanel" class="tab-pane fade" id="award" aria-labelledby="award-tab">
					<div class="tab_img">
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img7.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="5">
								<img src="images/port-img7.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img9.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="5">
								<img src="images/port-img9.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img10.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="5">
								<img src="images/port-img10.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="col-md-3 col-sm-6 col-xs-6 portfolio-grids" data-aos="zoom-in">
							<a href="images/port-img12.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="5">
								<img src="images/port-img12.jpg" class="img-responsive zoom-img" alt="w3ls"/>
								<div class="b-wrapper">
									<i class="fa fa-search-plus" aria-hidden="true"></i>
									<h5>Awards</h5>
									<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
								</div>
							</a>
						</div>
						<div class="clearfix"> </div>
					</div>	
				</div>
			</div>
		</div>
	</div>	
</section>
<!-- /Portfolio section -->	
<!-- contact section -->
<section class="contact-wthree jarallax" id="contact">
	<div class="container">
		<h3 class="text-center">Contact Us</h3>
		<div class="col-lg-2 col-md-2 col-sm-2" data-aos="zoom-in">
			<img src="images/contact-img1.jpg" alt="" class="img-circle img-responsive">
		</div>
		<div class="col-lg-10 col-md-10 col-sm-10" data-aos="zoom-in">
			<h4>Be In Touch With Us</h4>
			<p class="contact-agile">We are always available</p>
		</div>
		<div class="col-lg-12" data-aos="zoom-in">
			<ul class="contact-info">
				<li>
					<i class="fa fa-phone-square" aria-hidden="true"></i>
					<p class="contact-p1">321 7654 000098</p>
					<p class="contact-p2">123 4567 890000</p>
				</li>
				<li>
					<i class="fa fa-envelope" aria-hidden="true"></i>
					<p class="contact-p1"><a href="mailto:mail1@example.com">mail1@example.com</a></p>
					<p class="contact-p2"><a href="mailto:mail2@example.com">mail2@example.com</a></p>
				</li>
				<li>
					<i class="fa fa-address-book" aria-hidden="true"></i>
					<p class="contact-p1">77 Jack Street,</p>
					<p class="contact-p2">Chicago, USA.</p>
				</li>
			</ul>
		</div>	
		<div class="clearfix"></div>	
		<form action="#" method="post" name="sentMessage" id="contactForm" novalidate>
            <div class="col-lg-4 col-md-4 col-sm-4" data-aos="zoom-in">    
				<div class="control-group form-group">
                    <div class="controls">
                        <label>Full Name:</label>
                        <input type="text" class="form-control" id="name" required data-validation-required-message="Please enter your name.">
                        <p class="help-block"></p>
                    </div>
				</div>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4" data-aos="zoom-in">	
                <div class="control-group form-group">
					<div class="controls">
                        <label>Phone Number:</label>
						<input type="tel" class="form-control" id="phone" required data-validation-required-message="Please enter your phone number.">
                    </div>
                </div>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4" data-aos="zoom-in">			
                <div class="control-group form-group">
                    <div class="controls">
                        <label>Email Address:</label>
                        <input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address.">
                    </div>
                </div>
			</div>
			<div class="clearfix"></div>
			<div class="col-lg-12" data-aos="zoom-in">	
                <div class="control-group form-group">
                    <div class="controls">
                        <label>Message:</label>
                        <textarea rows="10" cols="100" class="form-control" id="message" required data-validation-required-message="Please enter your message" maxlength="999" style="resize:none"></textarea>
					</div>
                </div>
                <div id="success"></div>
                <!-- For success/fail messages -->
			</div>
			<div class="col-lg-12" data-aos="zoom-in">	
                <button type="submit" class="btn btn-primary">Send Message</button>
            </div>
			<div class="clearfix"></div>	
		</form>	
	</div>
</section>
<!-- /contact section -->
<!-- map section -->
<div class="map" data-aos="zoom-in">
	<iframe class="googlemaps" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d380510.6741687111!2d-88.01234121699822!3d41.83390417061058!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1455598377120" style="border:0" allowfullscreen></iframe>
</div>
<!-- /map section -->
<!-- footer section -->
<section class="footer-wthree">
	<div class="container">
		<div class="col-lg-4 col-md-4 col-sm-12 footer-grid" data-aos="zoom-in">
			<h3>Latest Tweets</h3>
			<span class="line1"></span>
			<ul class="tweet-agile">
				<li>
					<i class="fa fa-twitter-square" aria-hidden="true"></i>
					<p class="tweet-p1"><a href="mailto:support@company.com">@example</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a href="#">http://ax.by/zzzz</a></p>
					<p class="tweet-p2">Posted 3 days ago.</p>
				</li>
				<li>
					<i class="fa fa-twitter-square" aria-hidden="true"></i>
					<p class="tweet-p1"><a href="mailto:support@company.com">@example</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a href="#">http://cx.dy/zzzz</a></p>
					<p class="tweet-p2">Posted 3 days ago.</p>
				</li>
			</ul>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-12 footer-grid" data-aos="zoom-in">
			<span class="line4"></span>
			<h3>Latest Pics</h3>
			<span class="line2"></span>
			<ul class="clearfix demo">
				<li><img src="images/footer-pic1.jpg" alt="" class="img-responsive"/></li>
				<li><img src="images/footer-pic2.jpg" alt="" class="img-responsive"/></li>
				<li><img src="images/footer-pic3.jpg" alt="" class="img-responsive"/></li>
				<li><img src="images/footer-pic4.jpg" alt="" class="img-responsive"/></li>
				<li><img src="images/footer-pic5.jpg" alt="" class="img-responsive"/></li>
				<li><img src="images/footer-pic6.jpg" alt="" class="img-responsive"/></li>	
				<li><img src="images/footer-pic7.jpg" alt="" class="img-responsive"/></li>
				<li><img src="images/footer-pic8.jpg" alt="" class="img-responsive"/></li>
				<li><img src="images/footer-pic9.jpg" alt="" class="img-responsive"/></li>
			</ul>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-12 footer-grid" data-aos="zoom-in">
			<span class="line5"></span>
			<h3>Latest News</h3>
			<span class="line3"></span>
			<ul class="footer-news">
				<li>
					<div class="news-content">
						<a href="#" class="news-header" data-toggle="modal" data-target="#news1"><h4>News From Blog</h4></a>
						<p class="news-p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra laoreet aliquet. </p>
						<p class="news-p2">Posted On January 16, 2017</p>
					</div>
					<div class="news-pic">
						<a href="#" data-toggle="modal" data-target="#news1"><img src="images/news-pic1.jpg" alt="" class="img-responsive"></a>
					</div>
					<div class="clearfix"></div>
				</li>
				<li>
					<div class="news-content">
						<a href="#" class="news-header" data-toggle="modal" data-target="#news2"><h4>News From Blog</h4></a>
						<p class="news-p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra laoreet aliquet. </p>
						<p class="news-p2">Posted On January 16, 2017</p>
					</div>
					<div class="news-pic">
						<a class="#" data-toggle="modal" data-target="#news2"><img src="images/news-pic2.jpg" alt="" class="img-responsive"></a>
					</div>
					<div class="clearfix"></div>
				</li>
			</ul>
		</div>
		<div class="clearfix"></div>
		<span class="line6"></span>
    </div>
	<p class="copyright">&copy; 2017 Scholastic. All Rights Reserved | Design by <a href="http://www.51qianduan.com//" target="_blank">xmoban.cn</a></p>
	<div class="modal fade" id="news1" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<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 w3-agile agileits-w3layouts w3layouts">Latest News</h4>
				</div>
				<div class="modal-body">
					<div class="col-lg-6 col-md-6 col-sm-12">
						<img src="images/news-img1.jpg" alt="" class="img-responsive">
					</div>
					<div class="col-lg-6 col-md-6 col-sm-12">
						<p class="news-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra laoreet aliquet. Sed tristique ex lectus, ut maximus ipsum tempus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor eros quis leo bibendum, eu bibendum ligula malesuada.</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="news2" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
		<div class="modal-dialog modal-lg">
			<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 w3-agile agileits-w3layouts w3layouts">Latest News</h4>
				</div>
				<div class="modal-body">
					<div class="col-lg-6 col-md-6 col-sm-12">
						<img src="images/news-img2.jpg" alt="" class="img-responsive">
					</div>
					<div class="col-lg-6 col-md-6 col-sm-12">
						<p class="news-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pharetra laoreet aliquet. Sed tristique ex lectus, ut maximus ipsum tempus a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor eros quis leo bibendum, eu bibendum ligula malesuada.</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				</div>
			</div>
		</div>
	</div>		
</section>
<!-- /footer section -->
<!-- back to top -->
<a href="#0" class="cd-top">Top</a>
<!-- /back to top -->	
<!-- js files -->
<script src="js/modernizr.min.js"></script> 
<!-- js for banner section -->
<script>
	var myBgFader = $('.header').bgfader([
	'images/banner1.jpg',
	'images/banner2.jpg',
	'images/banner3.jpg',
	'images/banner4.jpg',
	], {
	'timeout': 3000,
	'speed': 3000,
	'opacity': 0.4
	})
	myBgFader.start()
</script>
<!-- /js for banner section -->
<!-- js for parallax effect -->
<script type="text/javascript">
    /* init Jarallax */
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>
<!-- /js for parallax effect -->
<!-- js for footer pic lightbox -->
<script>
$(function(){
	//picturesEyes($('li'));
	$('ul.demo li').picEyes();
});
</script>
<!-- /js for footer pic lightbox -->
<!-- js for portfolio lightbox -->
<script type="text/javascript">
	$(".lightninBox").lightninBox();
</script>
<!-- /js for portfolio lightbox -->
<!-- /js files -->	



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 bootstrap bootstrap自适应 bootstrap响应式 门户 pc+wap 移动+电脑 手机+电脑 学校 高校 大学 小学 中学 初中 简洁 简约 简单 白色 宽屏 全屏 满屏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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