橙色欧美风格的宠物护理机构企业网站源码下载



6 23 8



模板描述:橙色欧美风格 宠物护理机构 企业网站,橙色欧美风格的宠物护理机构企业网站源码下载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="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
<link href="css/component.css" rel="stylesheet" type="text/css"  />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" 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">
<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
<link href="css/component.css" rel="stylesheet" type="text/css"  />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="//fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" 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/jquery.picEyes.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/classie.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/main.js"></script>
<script src="js/easy-responsive-tabs.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>
<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/jquery.picEyes.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/classie.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script src="js/main.js"></script>
<script src="js/easy-responsive-tabs.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script>

3. HTML代码

<!--
author: xmoban.cn
Author URL: http://www.xmoban.cn
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Airy Pets an animals Category Bootstrap responsive Website Template | Home :: xmoban.cn</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" /><!-- Bootstrap css -->
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Font awesome style-sheet -->
<link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/><!-- Responsive tabs -->
<link href="css/component.css" rel="stylesheet" type="text/css"  /> <!-- For-Nav-CSS -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><!-- style sheet -->
<!--fonts-->
<!--//fonts-->
</head>
<body class="cbp-spmenu-push" id="home">
  <!-- Banner -->
        <div id="house" class="top-header">
				<div class="col-md-6 logo-w3l w32">
					<h1 class="location"><a href="index.html">Airy Pets</a></h1>
				</div>
				<div class="col-md-6 logo-w3l w31 sea">
					<div class="right-w3l">
						<ul class="top-links">
							<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-linkedin"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
						</ul>
					</div>
						<div class="w3ls_search">
				<div class="cd-main-header">
					<ul class="cd-header-buttons">
						<li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li>
					</ul> <!-- cd-header-buttons -->
				</div>
				<div id="cd-search" class="cd-search">
					<form action="#" method="post">
						<input name="Search" type="search" placeholder="Click enter after typing">
					</form>
				</div>
			</div>
				</div>
				<div class="clearfix"></div>
		</div>
		<!--bottom-->
		<div class="button">
			<button id="showLeftPush"><img src="images/menu.png" alt=""></button>
		</div>
		<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
			<h3>Menu</h3>
				<a href="#home" class="scroll">Home</a>
						<a href="#services" class="scroll">Services</a>
						<a href="#adopt" class="scroll">Adoption</a>
					    <a href="#team" class="scroll">Team</a>
						<a href="#gallery" class="scroll">Gallery</a>
						<a href="#contact" class="scroll">Contact Us</a>
		</nav>
	      <!--start-slider-->
		<div class="banner">
		     <div class="banner-slider">
				<div class="container">
			     <div id="top" class="callbacks_container">
					<ul class="rslides" id="slider4">
						<li>
						    <div class="banner-info">
								<div class="banner-right-agileits">
								  <h3>Welcome to airy pets.</h3>
								   <p>We offer all the best quality products and services for your adorable pets.</p>
								   <a href="#services" class="scroll banner-button" >Our Services</a>
								</div>
							</div>
					     </li>
						  <li>
						     <div class="banner-info">
								<div class="banner-right-agileits">
									<h3>we take care of your pets</h3>
									 <p>Discover the amazing health services that we can offer to your pets.</p>
									 <a href="#about" class="scroll banner-button" >About Us</a>
								 </div>
							 </div>
						 </li>
						 <li>
							<div class="banner-info">
								<div class="banner-right-agileits">
									<h3>Adopt a pet.</h3>
									 <p>We have many adorable pets who need a home. Share the Love, adopt!</p>
									 <a href="#adopt" class="scroll banner-button" >Adopt today</a>
								</div>	
							</div>							
						 </li>
					</ul>
				</div>
				</div>
			</div>
				<div class="clearfix"></div>
		</div>
		<!--//end-slider-->
	<!-- //Banner -->
<!-- about -->
<div class="about" id="about">
	<div class="container">
		<h3 class="tittle">About Us</h3>
			<div class="col-md-6 agileits_works-grid1">
			</div>
				<div class="col-md-6 agileits_works-grid">
				    <div class="wthree-text">
					   <h6 class="subheading-w3ls">In Simple words</h6>
					   <p class="para-w3-agileits">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,Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis 
					voluptatibus</p>
					   <ul class="about-agile">
						<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Popular tips & advice</li>
						<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Vet Services</li>
						<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Pets for sale</li>
						<li><i class="fa fa-long-arrow-right" aria-hidden="true"></i>Professional care</li>
					</ul>
					</div>
				</div>
	</div>
</div>
<!-- //about-bottom -->
<!--sevices-->
<div class="services" id="services">
	<div class="container">
	<h3 class="tittle two">Our Services</h3>
		<div class="col-md-4 ab-head1">
				<div class="item item-type-move">
						<div class=" item-hover" >
							<div class="item-info">
								<div class="headline">
									Pet Health
									<div class="line"></div>
								</div>
								<div class="date-month">Service 1</div>							
							</div>
							<div class="mask"></div>
						</div>
						<div class="item-img">
							<img src="images/s1.jpg" alt=" " class="img-responsive" /> 
						</div>
				</div>
				<div class="clearfix"> </div>	
				<p class="para-w3-agileits two">Aenean pulvinar diam vel felis volutpat dictum. Aenean ac tellus suscipit sapien scelerisque tempus non mollis massa.</p>
		</div>
		<div class="col-md-4 ab-head1">
				<div class="item item-type-move">
						<div class=" item-hover" >
							<div class="item-info">
								<div class="headline">
									Pet Grooming
									<div class="line"></div>
								</div>
								<div class="date-month">Service 2</div>							
							</div>
							<div class="mask"></div>
						</div>
						<div class="item-img">
							<img src="images/s2.jpg" alt=" " class="img-responsive" /> 
						</div>
				</div>
				<div class="clearfix"> </div>	
				<p class="para-w3-agileits two">Aenean pulvinar diam vel felis volutpat dictum. Aenean ac tellus suscipit sapien scelerisque tempus non mollis massa.</p>
		</div>
		<div class="col-md-4 ab-head1">
				<div class="item item-type-move">
						<div class=" item-hover" >
							<div class="item-info">
								<div class="headline">
									Pet Sitting
									<div class="line"></div>
								</div>
								<div class="date-month">Service 3</div>							
							</div>
							<div class="mask"></div>
						</div>
						<div class="item-img">
							<img src="images/s3.jpg" alt=" " class="img-responsive" /> 
						</div>
				</div>
				<div class="clearfix"> </div>	
				<p class="para-w3-agileits two">Aenean pulvinar diam vel felis volutpat dictum. Aenean ac tellus suscipit sapien scelerisque tempus non mollis massa.</p>
		</div>
</div>
</div>
<!--//sevices-->
<!-- 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 -->
<!--adopt -->
<div class="adopt" id="adopt">
	<div class="container">
	<h3 class="tittle">Adoption</h3>
	<div class="adopt-top">
		<div class="col-md-4  adopt-img-agileits-w3layouts">
		</div>
		<div class="col-md-8 adopt-text-agileits-w3layouts">
			<h6 class="subheading-w3ls">Looking to adopt a pet</h6>
			<p class="para-w3-agileits">Fusce mollis imperdiet interdum donec eget metus auguen unc vel mauris ultricies, vest ibulum orci eget, viverra elit. Aliquam erat volutpat phasellus ac sodales felis tiam non metus ali quam eros accumsan mollis eget vi tae.</p>
			<p class="para-w3-agileits">Fusce mollis imperdiet interdum donec eget metus auguen unc vel mauris ultricies, vest ibulum orci eget, viverra elit. Aliquam erat volutpat phasellus ac sodales felis tiam non metus ali quam eros accumsan mollis eget vi tae.</p>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="adopt-bottom">
	<div class="col-md-6 faq-left">
		<h6 class="subheading-w3ls">Frequent Questions</h6>
	<ul class="faq">
		<li class="item1 wow fadeInDown animated" data-wow-delay=".5s"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span> How do I Apply</a>
				<ul>
					<li class="subitem1"><p>Fusce mollis imperdiet interdum donec eget metus auguen unc vel mauris ultricies, vest ibulum orci eget, viverra elit.</p></li>										
				</ul>
					</li>
					<li class="item2 wow fadeInDown animated" data-wow-delay=".5s"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span> What documents do I need to Adopt?</a>
				<ul>
					<li class="subitem1"><p>Fusce mollis imperdiet interdum donec eget metus auguen unc vel mauris ultricies, vest ibulum orci eget, viverra elit.</p></li>										
				</ul>
					</li>
					<li class="item3 wow fadeInDown animated" data-wow-delay=".5s"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span> How to choose an Pet?</a>
				<ul>
					<li class="subitem1"><p>Fusce mollis imperdiet interdum donec eget metus auguen unc vel mauris ultricies, vest ibulum orci eget, viverra elit.</p></li>										
				</ul>
				</li>
				<li class="item4 wow fadeInDown animated" data-wow-delay=".5s"><a href="#"><span class="glyphicon glyphicon-chevron-down"></span> Are the animals neutered?</a>
			<ul>
				<li class="subitem1"><p>Fusce mollis imperdiet interdum donec eget metus auguen unc vel mauris ultricies, vest ibulum orci eget, viverra elit.</p></li>										
			</ul>
		</li> 
	</ul>
	<div class="faq-bottom">
	</div>
	</div>	
		<div class="col-md-6 about-img-w3-agileits">
					<!--responsive-tabs-->
					<div id="horizontalTab">
					<ul class="resp-tabs-list">
					<li><img src="images/a1.jpg" alt="image" /></li>
					<li><img src="images/a2.jpg" alt="image" /></li>
					<li><img src="images/a3.jpg" alt="image" /></li>
					<li><img src="images/a4.jpg" alt="image" /></li>
					</ul>
					<div class="resp-tabs-container">
					<div class="tab1">
						<img src="images/a11.jpg" alt="image" />
						<div class="pet-info">
							<ul>
								<li><span>Lorem Ipsum</span></li>
								<li><span>Gender : </span>Female</li>
								<li><span>Age : </span>1 years</li>
							</ul>
						</div>
							<div class="clear"></div>
					</div>
					<div class="tab2">
					<img src="images/a22.jpg" alt="image" />
					<div class="pet-info">
						<ul>
							<li><span>Fusce mollis</span></li>
							<li><span>Gender : </span>Male</li>
							<li><span>Age : </span>3 Months</li>
						</ul>
					</div>
					</div>
					<div class="tab3">
						<img src="images/a33.jpg" alt="image" />
						<div class="pet-info">
							<ul>
								<li><span>Aliquam erat</span></li>
								<li><span>Gender : </span>Male</li>
								<li><span>Age : </span>2 years</li>
							</ul>
						</div>
					</div>
					<div class="tab4">
					<img src="images/a44.jpg" alt="image" />
					<div class="pet-info">
						<ul>
							<li><span>Pellentesque</span></li>
							<li><span>Gender : </span>Female</li>
							<li><span>Age : </span>6 Months</li>
						</ul>
					</div>
					</div>
					</div>
			</div>
			</div>
	</div>	
</div>
</div>
<!-- //adopt -->
<!-- team -->
	<div class="team" id="team">
	<div class="container-fluid">
			<h3 class="tittle">Meet Our Team</h3>
			<div class="row team-row">
					<div class="col-md-3 team-grids">
						<div class="thumbnail team-w3agile">
							<img src="images/t1.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>Joanna Vilken</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="thumbnail team-w3agile">
							<img src="images/t2.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>John Cassedi</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-md-3 team-grids">
						<div class="thumbnail team-w3agile">
							<img src="images/t3.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>John Doe</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="thumbnail team-w3agile">
							<img src="images/t4.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>Maria Silveira</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-md-3 team-grids">
						<div class="thumbnail team-w3agile">
							<img src="images/t5.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>Jane Doe</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="thumbnail team-w3agile">
							<img src="images/t6.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>Arnold Joshua</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="col-md-3 team-grids">
						<div class="thumbnail team-w3agile">
							<img src="images/t7.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>Leenguen</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
						<div class="thumbnail team-w3agile">
							<img src="images/t8.jpg" class="img-responsive" alt="">
							<div class="social-icons team-icons right-w3l fotw33">
							<div class="caption">
								<h4>Joe Jessica</h4>
								<p>Lorem Ipsum generators on the Internet tend to repeat as necessary</p>						
							</div>
								<ul class="top-links">
									<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-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
	</div>
		</div>
<!-- //team -->
 <!--/gallery-->
 <div class="gallery" id="gallery">
	<div class="container">
	<h3 class="tittle">Our Gallery</h3>
		<div class="agile_gallery_grids w3-agile">
				<ul class="clearfix demo">
					<li>
						<div class="gallery-grid1">
							<img src="images/g1.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g2.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g3.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
							<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g4.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g5.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g6.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g7.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g8.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g9.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g10.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
								<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g11.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery-grid1">
							<img src="images/g12.jpg" alt=" " class="img-responsive" />
							<div class="p-mask">
									<h4><span>Airy Pets</span></h4>
								<p>Neque porro quisquam est, qui dolorem ipsum.</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
	</div>
</div>
<!--//gallery-->
<!--footer-->
<div class="contact-agile" id="contact">
			<div class="container">
				<h3 class="tittle">Contact Us</h3>
				<div class="contact-middle">
					<form action="#" method="post">
					<div class="form-agileinfo">
						<p>Name</p>
						<input type="text" name="your name" placeholder="Your name" required="" />
						<p>Email</p>
						<input type="email" name="your email" placeholder="Your email" required="" />
					</div>
					<div class="form-agileits-w3layouts">
					<p>Comments</p>
						<textarea  name="your message" placeholder="Your message" required="" ></textarea>
							<input type="submit"   value="Send Message">
					</div>
					<div class="clearfix"></div>
					</form>
				</div>
			</div>
		</div>
		<div class="col-md-8 footer-w3layouts">
		<div class="footer-top-agile">
		<h2><a href="index.html">Airy Pets</a></h2>
		<div class="footer-contact-w3ls">
			<p class="num-w3ls">+44 (0) 79 7318</p>
			<p class="email-w3l">Email: <a href="mailto:info@example.com">info@example.com</a></p>
		</div>
		<div class="clearfix"></div>
		</div>
		<div class="footer-bottom-wthree">
			<div class="nav-footer-w3l">
				<a href="#home" class="scroll">Home</a>
				<a href="#services" class="scroll">Services</a>
				<a href="#about" class="scroll">About</a>
				<a href="#adopt" class="scroll">Adoption</a>
				<a href="#contact" class="scroll">Contact</a>
			</div>
			<div class="footer-button"><a href="#contact" class="scroll">Get in touch</a></div>
			<div class="clearfix"></div>
		</div>
		</div>
		<div class=" col-md-4 map-w3ls">
		<div class="address-agileinfo">
			<h6 class="subheading-w3ls two">Address</h6>
			<p>1143 New Hampshire Ave NW, Washington, DC 20037, USA</p>
		</div>
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6209.852593501853!2d-77.0416869731965!3d38.902800718279195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xae69b9ad9dbd5ebf!2sRenaissance+Washington%2C+DC+Dupont+Circle+Hotel!5e0!3m2!1sen!2sin!4v1479208161830"></iframe>
		</div>
		<div class="clearfix"></div>
			<div class="copy">
		        <p>© 2017 Airy Pets . All Rights Reserved | Design by <a href="http://www.51qianduan.com//">xmoban.cn</a> </p>
		    </div>
<!--/footer -->
<!-- js -->
<!--gallery-js -->
				<script>
					$(function(){
						//picturesEyes($('.demo li'));
						$('.demo li').picEyes();
					});
				</script>
<!--//gallery-js -->
<!-- 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 -->
<!-- nav-script -->
			<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
			<script>
				var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
					showLeftPush = document.getElementById( 'showLeftPush' ),
					showRightPush = document.getElementById( 'showRightPush' ),
					body = document.body;
				showLeftPush.onclick = function() {
					classie.toggle( this, 'active' );
					classie.toggle( body, 'cbp-spmenu-push-toright' );
					classie.toggle( menuLeft, 'cbp-spmenu-open' );
					disableOther( 'showLeftPush' );
				};
				function disableOther( button ) {
					if( button !== 'showLeftPush' ) {
						classie.toggle( showLeftPush, 'disabled' );
					}
					if( button !== 'showRightPush' ) {
						classie.toggle( showRightPush, 'disabled' );
					}
				}
			</script>
		<!-- nav-script -->
		<!-- banner-slide -->
					   <script>
						// You can also use "$(window).load(function() {"
						$(function () {
						  // Slideshow 4
						  $("#slider4").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 -->
<!--search-bar-->
	<script src="js/main.js"></script>	
<!--//search-bar-->
<!--responsive-tabs-script-->
<script>
$(document).ready(function () {
$('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion           
width: 'auto', //auto or any width like 600px
fit: true,   // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
$('#verticalTab').easyResponsiveTabs({
type: 'vertical',
width: 'auto',
fit: true
});
});
</script>
<!--//responsive-tabs-script-->
<!-- script for faq -->
						<script type="text/javascript">
							$(function() {
								var menu_ul = $('.faq > li > ul'),
									   menu_a  = $('.faq > li > a');
								menu_ul.hide();
								menu_a.click(function(e) {
									e.preventDefault();
									if(!$(this).hasClass('active')) {
										menu_a.removeClass('active');
										menu_ul.filter(':visible').slideUp('normal');
										$(this).addClass('active').next().stop(true,true).slideDown('normal');
									} else {
										$(this).removeClass('active');
										$(this).next().stop(true,true).slideUp('normal');
									}
								});
							});
						</script>
<!-- script for faq -->
<!-- smooth scrolling moving-top -->
	<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>
<!-- //smooth scrolling moving-top -->
<!-- smooth scrolling -->
<!-- //smooth scrolling -->
	<a href="#home" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!-- //smooth scrolling -->
</body>
</html>



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 橙色 动物宠物 宠物 宠物店 宠物医院 动物园
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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