黑色欧美风格的特色美食餐厅企业网站源码下载



4 14 5



模板描述:黑色欧美风格 特色美食餐厅 企业网站,黑色欧美风格的特色美食餐厅企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" property="" />
<link rel="stylesheet" href="css/lightbox.css">
<link href="//fonts.googleapis.com/css?family=Bigshot+One" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/lightbox-plus-jquery.min.js"> </script>
<script src="js/jquery-2.2.3.min.js"></script>
<script defer src="js/jquery.flexslider.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/search.js"></script>
<script type="text/javascript" src="js/numscroller-1.0.js"></script>
<script src="js/bootstrap.js"></script>

3. HTML代码

	<!-- banner -->
	<div class="w3ls-banner">
		<div class="bannerw3-agileinfo">
			<!-- header -->
			<div class="header">
				<div class="container">  
					<div class="agile-hdleft nav navbar-nav navbar-left">
						<p><i class="fa fa-phone"></i> +01 222 111 444 </p> 
					</div>
					<div class="agile-hdmdl nav navbar-nav">
						<div class="w3social-icons"> 
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
							</ul>
						</div>  
					</div>
					<div class="agileits-hdright nav navbar-nav navbar-right">
						<p><a href="mailto:example@mail.com"><i class="fa fa-envelope-o"></i>  mail@example.com</a></p>
					</div>
					<div class="clearfix"> </div>   
				</div>	
			</div>	
			<!-- //header --> 
			<!-- banner-text -->
			<div class="banner-text agileinfo"> 
				<div class="container">
					<div class="flexslider">
						<ul class="slides">
							<li>
								<div class="banner-w3lstext">
									<div class="col-sm-4 bnr-tleft">
										<img src="images/img1.png" alt=""/>
									</div>
									<div class="col-sm-8 bnr-tright">
										<h2>Welcome</h2>
										<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida mauris non mi gravida, at sollicitudin odio efficitur. Mauris ex nulla, aliquam ornare facilisis nec convallis pulvinar a non nunc non leo sollici</p>
									</div>
									<div class="clearfix"> </div>
								</div>
							</li>
							<li>
								<div class="banner-w3lstext">
									<div class="col-sm-4 bnr-tleft">
										<img src="images/img2.png" alt=""/>
									</div>
									<div class="col-sm-8 bnr-tright">
										<h3>Spicy Tacos</h3>
										<p>Integer gravida mauris non mi gravida, at sollicitudin odio efficitur. Lorem ipsum dolor sit amet elit consectetur adipiscing. Mauris ex nulla, aliquam ornare facilisis nec convallis pulvinar a non nunc non leo sollicitudin</p>
									</div>
									<div class="clearfix"> </div>
								</div> 
							</li>
							<li>
								<div class="banner-w3lstext">
									<div class="col-sm-4 bnr-tleft">
										<img src="images/img1.png" alt=""/>
									</div>
									<div class="col-sm-8 bnr-tright">
										<h3>Tasty Food</h3>
										<p>Mauris ex nulla, aliquam ornare facilisis nec convallis pulvinar a non nunc non leo sollicitudin, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida mauris non mi gravida, at sollicitudin odio efficitur. </p>
									</div>
									<div class="clearfix"> </div>
								</div> 
							</li>
						</ul> 
					</div> 	 
				</div>
			</div>
			<!-- //banner-text -->  
			<!-- navigation -->
			<div class="top-nav w3-agiletop">
				<div class="container">
					<div class="navbar-header w3llogo">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							Menu
						</button>
						<h1><a href="index.html">Tacos</a></h1> 
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<div class="w3menu navbar-left">
							<ul class="nav navbar">
								<li><a href="index.html" class="active">Home</a></li>
								<li><a href="#about" class="scroll">About</a></li>  
								<li><a href="#gallery" class="scroll">Gallery</a></li> 
								<li><a href="#team" class="scroll">Team</a></li> 
								<li><a href="#blog" class="scroll">Blog</a></li> 
								<li><a href="#contact" class="scroll">Contact</a></li>
							</ul>
						</div> 
					</div>
					<div class="w3ls-bnr-search navbar-right">
						<!-- cd-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 agileinfo">
							<form action="#" method="post">
								<input name="Search" type="search" placeholder="Enter Your Search term ...">
							</form>
						</div> 
						<!-- //cd-search --> 
					</div> 
				</div>	
			</div>	
			<!-- //navigation --> 
		</div>	
	</div>	
	<!-- //banner -->
	<!-- about -->
	<div id="about" class="w3l-about"> 
		<div class="container">
			<div class="agileits-title">
				<h3>About Us</h3>
			</div>
			<div class="col-md-6 w3labout-left">
				<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
					<ul id="myTab" class="nav nav-tabs" role="tablist">
						<li role="presentation"><a href="#expeditions" id="expeditions-tab" role="tab" data-toggle="tab" aria-controls="expeditions" aria-expanded="true">01.</a></li>
						<li role="presentation"><a href="#tours" role="tab" id="tours-tab" data-toggle="tab" aria-controls="tours">02.</a></li>
						<li role="presentation" class="active"><a href="#tree" role="tab" id="tree-tab" data-toggle="tab" aria-controls="tree">03.</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div role="tabpanel" class="tab-pane fade in active" id="expeditions" aria-labelledby="expeditions-tab">
							<div class="tab-info">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis pharetra turpis, a scelerisque enim venenatis luctus. Cras blandit dolor a facilisis tincidunt. Vivamus sed orci aliquam aliquet tellus ut ornare nunc. Sed interdum interdum accumsan. Aenean nec purus ac orci finibus facilisis. </p>
								<p>Donec ultricies faucibus ante in mattis. Praesent tristique, eros vitae consequat rutrum, mi leo vulputate quam.</p>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="tours" aria-labelledby="tours-tab">
							<div class="tab-info">
								<p>Vivamus mattis pharetra turpis, a scelerisque enim venenatis luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit dolor a facilisis tincidunt. Vivamus sed orci aliquam aliquet tellus ut ornare nunc. Sed interdum interdum accumsan. Aenean nec purus ac orci finibus facilisis. </p>
								<p>Praesent tristique, eros vitae consequat rutrum, mi leo vulputate quam. Donec ultricies faucibus ante in mattis. </p>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="tree" aria-labelledby="tree-tab">
							<div class="tab-info">
								<p>Cras blandit dolor a facilisis tincidunt. Vivamus sed orci aliquam aliquet tellus ut ornare nunc. Sed interdum interdum accumsan. Aenean nec purus ac orci finibus facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis pharetra turpis, a scelerisque enim venenatis luctus. </p>
								<p>Faucibus ante in mattis donec ultricies . Praesent tristique, eros vitae consequat rutrum, mi leo vulputate quam.</p>
							</div>
						</div>
					</div>
				</div>
			</div> 
			<div class="col-md-6 w3labout-right">
				<h5>Who we are</h5>
				<h4>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software</h4>
				<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
	<!-- //about --> 
	<!-- Stats -->
	<div class="stats services news-w3layouts"> 
		<div class="container">    
			<div class="stats-agileinfo agileits-w3layouts">
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img">
						<i class="fa fa-users" aria-hidden="true"></i>
					</div>
					<h6>Happy Clients</h6>
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='157000' data-delay='.5' data-increment="100">157000</div>
				</div>
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img w3-agileits">
						<i class="fa fa-calendar-check-o" aria-hidden="true"></i>
					</div>
					<h6>Branches</h6>
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='850' data-delay='8' data-increment="1">850</div>
				</div>
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img w3-agileits">
						<i class="fa fa-briefcase" aria-hidden="true"></i>
					</div>	
					<h6>Our Events </h6> 
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='5000' data-delay='.5' data-increment="10">5000</div>
				</div>
				<div class="col-sm-3 col-xs-6 stats-grid">
					<div class="stats-img w3-agileits">
						<i class="fa fa-trophy" aria-hidden="true"></i>
					</div>
					<h6>Awards</h6>
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='110' data-delay='8' data-increment="1">110</div>
				</div>
				<div class="clearfix"></div>
			</div> 
		</div>
	</div>
	<!-- //Stats -->   
	<!-- services -->
	<div class="services">
		<div class="container">   
				<div class="agileits-title">
					<h3>Our Services</h3>
				</div>
				<div class="w3-services-grids">
					<div class="col-md-3 col-xs-6 w3l-services-grid">
						<div class="w3ls-services-img">
							<i class="fa fa-cutlery" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Vaesent purus</h4>
							<p>Donec non nibh in dui sagittis finibus. Duis suscipit arcu vel rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="col-md-3 col-xs-6 w3l-services-grid">
						<div class="w3ls-services-img">
							<i class="fa fa-heart-o" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Suscipit duis </h4>
							<p>Nibh in dui sagittis donec non finibus. Duis suscipit arcu vel rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="col-md-3 col-xs-6 w3l-services-grid">
						<div class="w3ls-services-img">
							<i class="fa fa-check-square-o" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Tempor purus</h4>
							<p>Sagittis donec non nibh in dui finibus. Duis suscipit arcu vel rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="col-md-3 col-xs-6 w3l-services-grid">
						<div class="w3ls-services-img">
							<i class="fa fa-truck" aria-hidden="true"></i>
						</div>
						<div class="agileits-services-info">
							<h4>Praesent tempor</h4>
							<p>Arcu vel donec non nibh in dui sagittis finibus. Duis suscipit rhoncus molestie eget placerat mauris. </p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div> 
		</div>
	</div>
	<!-- //services -->
	<!-- wthree-slid -->
	<div class="wthree-slid">
		<div class="col-sm-6 col-xs-4 wthree-slid-left"> 
		</div>
		<div class="col-sm-6 col-xs-8 wthree-slid-right">
			<h3>occaecat cupidatat non proident, sunt in culpa qui officia</h3>
			<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
				sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			<h4>Working Hours:</h4>
			<h5><b>Monday – Saturday :</b> 8:00 a.m – 11:00 p.m <br>
				<b>Sunday : </b> 10 a.m – 12 p.m <br>
				<span class="glyphicon glyphicon-earphone"></span> +11 999 8888 7777 
			</h5> 
		</div>
		<div class="clearfix"> </div>
	</div>
	<!-- wthree-slid -->
	<!-- gallery -->
	<div id="gallery" class="gallery">
		<div class="container">  
			<div class="agileits-title">
				<h3>Our Gallery</h3>
			</div>
			<div class="gallery-w3lsrow">
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g1.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g1.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g2.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g2.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g3.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g3.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g4.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g4.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g5.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g5.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g6.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g6.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g7.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g7.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>
				<div class="col-sm-3 col-xs-4 gallery-grids">
					<div class="w3ls-hover">
						<a href="images/g8.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen.">
							<img src="images/g8.jpg" class="img-responsive zoom-img" alt=""/>
							<div class="view-caption">
								<h5>Latest Gallery</h5>
								<span class="glyphicon glyphicon-search"></span>
							</div>
						</a>
					</div>
				</div>  
				<div class="clearfix"> </div> 
			</div>
			<!--  light box js -->
			<script src="js/lightbox-plus-jquery.min.js"> </script> 
			<!-- //light box js--> 
		</div> 
	</div>
	<!-- //gallery -->
	<!-- testimonials -->
	<div class="testimonials">
		<div class="container"> 
			<div class="agileits-title w3ls-title1">
				<h3>Testimonials</h3>
			</div>
			<section class="slider">
				<div class="flexslider1">
					<ul class="slides">
						<li>
							<div class="testimonials-grid agileinfo"> 
								<i class="fa fa-quote-left" aria-hidden="true"></i>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
									sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
									Ut enim ad minim veniam sed do eiusmod.</p>
								<h5>John Doe,<span> Tempor</span></h5>
							</div>
						</li>
						<li>
							<div class="testimonials-grid">
								<i class="fa fa-quote-left" aria-hidden="true"></i>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
									sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
									Ut enim ad minim veniam sed do eiusmod.</p>
								<h5>Elit semper,<span> Veniam</span></h5>
							</div>
						</li>
						<li>
							<div class="testimonials-grid">
								<i class="fa fa-quote-left" aria-hidden="true"></i>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
									sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
									Ut enim ad minim veniam sed do eiusmod.</p>
								<h5>Daniel Nyari,<span> Enim </span></h5>
							</div>
						</li>
					</ul>
				</div>
			</section>
				<!-- FlexSlider --> 
					<script type="text/javascript">
					$(window).load(function(){
					  $('.flexslider1').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				  </script>
				<!-- End-slider-script -->
		</div>
	</div>
	<!-- //testimonials -->
	<!-- team -->
	<div id="team" class="team">
		<div class="container">	
			<div class="agileits-title">
				<h3>Team</h3>
			</div> 
			<div class="teamw3-agileinfo">
				<div class="col-md-3 col-xs-6 team-wthree-grid">
					<div class="btm-right">
						<img src="images/t1.jpg" alt=" ">
						<div class="w3social-icons captn-icon"> 
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
								<li><a href="#"><i class="fa fa-twitter"></i></a></li> 
							</ul>
						</div>
						<div class="captn">
							<h4>James</h4>	
						</div>
					</div>
				</div>
				<div class="col-md-3 col-xs-6 team-wthree-grid">
					<div class="btm-right">
						<img src="images/t2.jpg" alt=" ">
						<div class="w3social-icons captn-icon"> 
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
								<li><a href="#"><i class="fa fa-twitter"></i></a></li> 
							</ul>
						</div>
						<div class="captn">
							<h4>Williams Allen</h4>	
						</div>
					</div>
				</div>
				<div class="col-md-3 col-xs-6 team-wthree-grid">
					<div class="btm-right">
						<img src="images/t3.jpg" alt=" ">
						<div class="w3social-icons captn-icon"> 
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
								<li><a href="#"><i class="fa fa-twitter"></i></a></li> 
							</ul>
						</div>
						<div class="captn">
							<h4>Richard</h4>	
						</div>
					</div>
				</div>
				<div class="col-md-3 col-xs-6 team-wthree-grid">
					<div class="btm-right">
						<img src="images/t4.jpg" alt=" ">
						<div class="w3social-icons captn-icon"> 
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
								<li><a href="#"><i class="fa fa-twitter"></i></a></li> 
							</ul>
						</div>
						<div class="captn">
							<h4>John Doel</h4>	
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //team -->
	<!-- works -->
	<div id="blog" class="blog">
		<div class="container"> 
			<div class="agileits-title">
				<h3>Our Blog</h3>
			</div> 
			<div class="wthree-blog-grids">
				<div class="col-md-6 w3-agileits-blog-grid">
					<div class="col-sm-4 col-xs-3 blog-left">
						<h4>24/01</h4>
						<ul>
							<li>Posted : <a href="#">Admin</a></li>
							<li>Likes : 31<li>
							<li>Comments : (4)</li>
						</ul>
					</div>
					<div class="col-sm-8 col-xs-9 blog-right">
						<a href="#" data-toggle="modal" data-target="#myModal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque imperdiet luctus gravida.</a>
						<p>Sed ut feugiat felis. Morbi tempor ut nibh id consectetur. Morbi turpis arcu, interdum at feugiat non, iaculis id dui. Cras vestibulum dapibus volutpat. Fusce id molestie mauris, nec pulvinar nibh. </p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-md-6 w3-agileits-blog-grid">
					<div class="col-sm-4 col-xs-3 blog-left">
						<h4>09/12</h4>
						<ul>
							<li>Posted : <a href="#">Admin</a></li>
							<li>Likes : 80<li>
							<li>Comments : (8)</li>
						</ul>
					</div>
					<div class="col-sm-8 col-xs-9 blog-right">
						<a href="#" data-toggle="modal" data-target="#myModal">Etiam ut nibh quis magna placerat euismod ac id eros. Cras eleifend nulla vel eros blandit.</a>
						<p>Duis sodales eleifend laoreet. Vestibulum luctus venenatis massa, in vulputate mi porta ac. Maecenas sollicitudin eros lectus, a rutrum nisi vulputate quis. Proin tempus, lectus vitae gravida</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //blog -->
	<!-- contact -->
	<div id="contact" class="contact">
		<div class="container"> 
			<div class="agileits-title">
				<h3>Contact us</h3>
			</div>
		</div>	
		<div class="contact-row agileits-w3layouts">  
			<div class="col-md-5 contact-w3lsleft map">
				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.948805392833!2d-73.99619098458929!3d40.71914347933105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1479793484055"></iframe>
			</div>
			<div class="col-md-7 contact-w3lsright">
				<h6><span>Sed interdum </span>interdum accumsan nec purus ac orci finibus facilisis sapien Sed interdum . </h6>
				<div class="col-xs-6 address-row">
					<div class="col-xs-2 address-left">
						<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 address-right">
						<h5>Visit Us</h5>
						<p>Broome St, Canada, <br>NY 10002, New York </p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-xs-6 address-row w3-agileits">
					<div class="col-xs-2 address-left">
						<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 address-right">
						<h5>Mail Us</h5>
						<p><a href="mailto:info@example.com"> mail@example1.com </a></p>
						<p><a href="mailto:info@example.com"> mail@example2.com</a></p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="col-xs-6 address-row">
					<div class="col-xs-2 address-left">
						<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 address-right">
						<h5>Call Us</h5>
						<p>+01 222 333 4444<br></p>
						<p>+01 222 333 5555</p>
					</div>
					<div class="clearfix"> </div>
				</div> 
				<div class="col-xs-6 address-row">
					<div class="col-xs-2 address-left">
						<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
					</div>
					<div class="col-xs-10 address-right">
						<h5>Working Hours</h5>
						<p>Mon - Fri : 8:00 am to 10:30 pm<br>
						Sat - Sun : 9:00 am to 11:30 pm</p>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>	
			</div>
			<div class="clearfix"> </div>
		</div>	
		<div class="container"> 
			<div class="contact-w3ls-row">
				<form action="#" method="post">
					<div class="col-md-5 col-sm-5 contact-right agileits-w3layouts">
						<textarea name="Message" placeholder="Message" required=""></textarea>
					</div>
					<div class="col-md-7 col-sm-7 contact-left agileits-w3layouts">
						<input type="text" name="First Name" placeholder="First Name" required="">
						<input type="text" class="email" name="Last Name" placeholder="Last Name" required="">
						<input type="text" name="Number" placeholder="Mobile Number" required="">
						<input type="email"  class="email" name="Email" placeholder="Email" required="">
						<input type="submit" value="SUBMIT">
					</div> 
					<div class="clearfix"> </div> 
				</form>
			</div>  
		</div> 
	</div>
	<!-- //contact -->  
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="footer-top">
				<div class="col-md-4 amet-sed"> 
					<div class="agileits-title">
						<h3>Tacos </h3>
					</div> 
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
				</div>
				<div class="col-md-4 amet-sed amet-medium">
					<div class="agileits-title">
						<h3>Twitter Feed</h3>
					</div> 
					<p><a href="#" data-toggle="modal" data-target="#myModal">@ Tacos</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt lorem sed velit fermentum eget placerat. </p>
					<p><a href="#" data-toggle="modal" data-target="#myModal">@ Tacos</a> Sed tincidunt lorem sed velit fermentum eget placerat. Lorem ipsum dolor sit, consectetur adipiscing elit. </p>
				</div>
				<div class="col-md-4 amet-sed ">
					<div class="agileits-title">
						<h3>Follow Us</h3>
					</div> 
					<div class="w3social-icons"> 
						<ul>
							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#"><i class="fa fa-google-plus"></i></a></li> 
							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
						</ul>
					</div>
					<div class="support">
						<form action="#" method="post">
							<input type="email" placeholder="Enter email...." required=""> 
							<input type="submit" value="SUBMIT" class="botton">
						</form> 
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<p class="footer-class">&copy; 2017 Tacos . All Rights Reserved | Design by  <a href="http://www.51qianduan.com//" target="_blank">xmoban.cn</a> </p>
		</div>
	</div>
	<!-- //footer --> 
	<!-- modal -->
	<div class="modal about-modal w3-agileits fade" id="myModal" tabindex="-1" role="dialog">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
				</div> 
				<div class="modal-body">
					<img src="images/img3.jpg" alt=""> 
					<h4>Blanditiis deleniti</h4>
					<h6>24/01/17</h6>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at. Donec fringilla lacus eu pretium rutrum. Cras aliquet congue ullamcorper. Etiam mattis eros eu ullamcorper volutpat. Proin ut dui a urna efficitur varius. uisque molestie cursus mi et congue consectetur adipiscing elit cras rutrum iaculis enim, Lorem ipsum dolor sit amet, non convallis felis mattis at. Maecenas sodales tortor ac ligula ultrices dictum et quis urna. Etiam pulvinar metus neque, eget porttitor massa vulputate. </p>
				</div> 
			</div>
		</div>
	</div>
	<!-- //modal -->   
	<!-- js --> 
	<script src="js/jquery-2.2.3.min.js"></script> 
	<!-- //js -->
	<!-- FlexSlider --> 
	<script type="text/javascript">
		$(window).load(function(){
		  $('.flexslider').flexslider({
			animation: "slide",
			start: function(slider){
			  $('body').removeClass('loading');
			}
		  });
		});
	</script>
	<!-- End-slider-script --> 
	<script src="js/SmoothScroll.min.js"></script> 
	<!-- start-smooth-scrolling -->
	<script type="text/javascript" src="js/easing.js"></script>	
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
	<!-- //end-smooth-scrolling -->	
	<!-- smooth-scrolling-of-move-up -->
	<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-of-move-up -->  
	<!-- search jQuery -->
	<!-- //search jQuery --> 
	<!-- Progressive-Effects-Animation-JavaScript -->  
	<!-- //Progressive-Effects-Animation-JavaScript --> 
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 扁平化 企业 行业 公司 工厂 黑色 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 餐饮 美食 饭店 餐饮行业 美食行业
×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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