黑色簡潔風格的精致健康餐廳整站網站源碼下載



7 25 9



模板描述:黑色簡潔風格 精致健康餐廳 整站網站,黑色簡潔風格的精致健康餐廳整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Gentium+Book+Basic:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/jquery-ui.css" />
<link href="css/animate.css" rel='stylesheet' type='text/css' />

2. 引入JS

<script src="js/jquery.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/jquery-ui.js"></script>
<script src="js/wow.min.js"></script>

3. HTML代碼

	<div class="header" id="home">
		<div class="container">
			<div class="header-top">
		<div class="logo wow fadeInLeft" data-wow-delay="0.5s">
			<a href="index.html"><img src="images/logo.png" class="img-responsive" alt=""/></a>
			</div>
			<div class="top-menu">
				<span class="menu"> </span>
						<ul>
						<li><a href="#home" class="scroll"><span data-hover="home">home</span></a></li>
						 <li><a href="#about" class="scroll"><span data-hover="about">about</span></a></li>
						 <li><a href="#igredients" class="scroll"><span data-hover="igredients">igredients</span></a></li>
							 <li><a href="#menu" class="scroll"><span data-hover="menu">menu</span></a></li>
								 <li><a href="#reviews" class="scroll"><span data-hover="reviews">reviews</span></a></li>
									 <li><a href="#reservations" class="scroll"><span data-hover="reservations">reservations</span></a></li>	
									</ul>
					</div>
					 <!--script-nav-->
		 <script>
		 $("span.menu").click(function(){
		 $(".top-menu ul").slideToggle("slow" , function(){
		 });
		 });
		 </script>
				<div class="social-icon">
					<a href="#"><i class="icon1"></i></a>
					<a href="#"><i class="icon2"></i></a>
					<a href="#"><i class="icon3"></i></a>
					</div>
				<div class="clearfix"></div>
				</div>
				<div class="baneer-center wow fadeInLeft" data-wow-delay="0.5s">
					<h1>the right ingredients for the right food</h1>
					<img src="images/divider.png"  alt=""/>
					</div>
					<div class="buttons">
						<a class="button" href="#">booka table</a>
						<a class="button1"href="#">see the menu</a>
					</div>
					</div>
				</div>
				<div class="content">
					<div class="about" id="about">
						<div class="container">
							<div class="col-md-6 about-leftgrid wow bounceInRight animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
								<h2>Just the right food</h2>
								<img src="images/img2.png" alt=""/>
								<p>If you’ve been to one of our restaurants, you’ve seen – and tasted – what keeps our customers coming back for more. Perfect materials and freshly baked food, delicious Lambda cakes,  muffins, and gourmet coffees make us hard to resist! Stop in today and check us out!</p>
							    <img src="images/cook.png" class="cook"  alt=""/>
							</div>
							<div class="col-md-6 about-rightgrid  wow bounceInLeft animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
								<img src="images/dish.png"  alt=""/>
								</div>
							<div class="clearfix"></div>
						</div>
					</div>
					<div class="igredients" id="igredients">
						<div class="container">
						<div class="fine-igredients wow bounceInRight animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
							<div class="fine-igredient">
							<h3>Fine igredients</h3>
							<img src="images/divider.png"   alt=""/>
							<p>If you’ve been to one of our restaurants, you’ve seen – and tasted – what keeps our customers coming back for more. Perfect materials and freshly baked food, delicious Lambda cakes,  muffins, and gourmet coffees make us hard to resist! Stop in today and check us out!</p>
							</div>
							<div class="igredients-imgs">
								<div class="igredients-img">
									<img src="images/pic-1.png" class="img-responsive"  alt=""/>
								</div>
								<div class="igredients-img">
									<img src="images/pic-2.png" class="img-responsive"  alt=""/>
								</div>
								<div class="igredients-img">
									<img src="images/pic-3.png" class="img-responsive"  alt=""/>
								</div>
								<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
							</div>
							</div>
				</div>
				<div class="menu9" id="menu">
					<div class="container">
						<div class="col-md-6 menu-grids wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
							<div class="menu-grid1">
							<h3>appetisers</h3>
								<img src="images/img2.png"  alt=""/>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>tzatsiki</h4>
									</div>
									<div class="dollar">
										<h4>$3.99</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>Refreshing traditional cucumber and garlic yoghurt dip.</p>
								</div>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Aubergine_Salad</h4>
									</div>
									<div class="dollar">
										<h4>$5.50</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>.Pureed eggplant, garlic, green pepper and tomato dip.</p>
								</div>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Aubergine_Salad </h4>
									</div>
									<div class="dollar">
										<h4>$5.25</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>Pureed eggplant, garlic, green pepper and tomato dip.</p>
								</div>
								</div>
									<div class="menu-grid2">
								<h3>Salads</h3>
								<img src="images/img2.png"  alt=""/>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Olive_Special</h4>
									</div>
									<div class="dollar">
										<h4>$3.99</ph4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>Refreshing traditional cucumber and garlic yoghurt dip.</p>
								</div>
								<div class="menu1-grid">
									<a href="#">special</a>
								<div class="menu-grid5">
									<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Greek_Salad</h4>
									</div>
									<div class="dollar">
										<h4>$5.50</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>.Pureed eggplant, garlic, green pepper and tomato dip.</p>
								</div>
								</div>
								</div>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Gusto_Salad </h4>
									</div>
									<div class="dollar">
										<h4>$5.25</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>Pureed eggplant, garlic, green pepper and tomato dip.</p>
								</div>
								</div>
								</div>
						<div class="col-md-6 menu-grids1  wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
							<div class="menu-grid3">
						<h3>Starters</h3>
								<img src="images/img2.png"  alt=""/>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Haloumi</h4>
									</div>
									<div class="dollar">
										<h4>$3.99</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>Refreshing traditional cucumber and garlic yoghurt dip.</p>
								</div>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Spinach_Pie</h4>
									</div>
									<div class="dollar">
										<h4>$5.50</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>.Pureed eggplant, garlic, green pepper and tomato dip.</p>
								</div>
								</div>
								<div class="menu-grid4">
								<h3>Main Dishes</h3>
								<img src="images/img2.png"   alt=""/>
								<div class="menu-grid">
								<div class="tzatsikis">
								<div class="tzatsiki">
									<h4>Cornish_Mackerel</h4>
									</div>
									<div class="dollar">
										<h4>$3.99</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>Refreshing traditional cucumber and garlic yoghurt dip.</p>
								</div>
								<div class="menu1-grid">
									<a href="#">special</a>
								<div class="menu-grid5">
									<div class="menu-grid">
										<div class="tzatsikis">
											<div class="tzatsiki">
												<h4>Roast_Lamb </h4>
										</div>
									<div class="dollar">
										<h4>$5.50</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>.Pureed eggplant, garlic, green pepper and tomato dip.</p>
								</div>
								</div>
								</div>
								<div class="menu-grid">
									<div class="tzatsikis">
										<div class="tzatsiki">
										<h4>Fried_Chicken</h4>
									</div>
										<div class="dollar">
											<h4>$5.25</h4>
										</div>
									<div class="clearfix"></div>
								</div>
								<p>Pureed eggplant, garlic, green pepper and tomato dip.</p>
								</div>
								<div class="menu-grid">
									<div class="tzatsikis">
										<div class="tzatsiki">
											<h4>Pastitsio</h4>
									</div>
									<div class="dollar">
										<h4>$3.99</h4>
									</div>
									<div class="clearfix"></div>
								</div>
								<p>Refreshing traditional cucumber and garlic yoghurt dip.</p>
									</div>
								</div>
							<div class="clearfix"></div>
						</div>
						</div>
					</div>
					<div class="reviews" id="reviews">
						<div class="container">
						<div class="review-info  wow bounceInLeft animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
							<h3>Gauest Reviews</h3>
								<img src="images/divider.png" alt="" />
								<p>"If you’ve been to one of our restaurants, you’ve seen – and tasted – what keeps our customers coming back for more. Perfect materials and freshly baked food, delicious Lambda cakes,  muffins, and gourmet coffees make us hard to resist! Stop in today and check us out!</p>
							<p>- food inc, New York</p>
							</div>
							</div>
					</div>
					<div class="reservations" id="reservations">
						<div class="container">
							<div class="col-md-6 grid-section wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
						<div class="reservation-leftgrid">
							<img src="images/pic-4.jpg" class="img-responsive"  alt="" />
							</div>
								<div class="reservation-leftgrid1">
								<img src="images/pic-5.jpg" class="img-responsive"  alt="" />
								</div>
								<div class=" clearfix"></div>
									</div>
						<div class="col-md-6 reservation-rightgrid wow bounceIn animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
						<h4>Just the right food</h4>
							<img src="images/img2.png" alt=""/>
								<p>If you’ve been to one of our restaurants, you’ve seen – and tasted – what keeps our customers coming back for more. Perfect materials and freshly baked food.</p>
								<span>Delicious Lambda cakes,  muffins, and gourmet coffees make us hard to resist! Stop in today and check us out! Perfect materials and freshly baked food.</span>
								<div class="contact">
									<div class="contact-text">
									<h5>name</h5>
										<input type="text" class="text" value="your name *" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'your name*';}">
											</div>
											<div class="contact-text">
											<h5>name</h5>
												<input type="text" class="text" value="your e-mail *" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'your e-mail*';}">									
										</div>
										<div class="contact-text">
											<h5>date</h5>
											<input class="date" id="datepicker" type="text" value="date*" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'date*';}">
											</div>	
											<div class="contact-text">
												<h5>party number</h5>
												<div class="dropdown-button">           			
									            	<select class="dropdown" tabindex="10" data-settings='{"wrapperClass":"flat"}'>
									            			<option value="0">party number</option>	
															<option value="1">0000001</option>
															<option value="2">0000002</option>
															<option value="3">0000003</option>
															<option value="4">0000004</option>
															<option value="5">0000005</option>
															<option value="6">0000006</option>
															<option value="7">0000007</option>
															<option value="8">0000008</option>
															<option value="9">0000009</option>
						 									 </select>
														</div>
												</div>
												<div class="clearfix"></div>
										</div>
										<input type="button" class="btn btn-1 btn-1c" value="Book now!">
								</div>
								<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<div class="footer-section wow fadeInLeft" data-wow-delay="0.5s">
					<div class="container">
						<div class="footer-grids">
						<div class="col-md-4 footer-grid">
							<h5>about us</h5>
								<img src="images/divider.png" alt=""/>
								<p>Lambda's new and expanded Chelsea location represents a truly authentic <span>Greek</span> patisserie, featuring breakfasts of fresh croissants and</p> 
								<p>steaming bowls of café.Lamda the best restaurant in town</p>
							</div>
							<div class="col-md-4 footer-grid">
							<h5>Opening Hours</h5>
								<img src="images/divider.png" alt=""/>
								<p><span>Mon-Thu:</span> 7:00am-8:00pm</p> 
									<p><span>Fri-Sun:</span> 7:00am-10:00pm</p>
									<a href="#"><img src="images/cards.png" alt="" /></a>
							</div>
							<div class="col-md-4 footer-grid">
							<h5>Our Location</h5>
								<img src="images/divider.png" alt=""/>
								<p>19th Paradise Street Sitia</p>
									<p>128 Meserole Avenue</p>
									<div class="footer-socialicons">	
										<a href="#"><i class="icon4"></i></a>
										<a href="#"><i class="icon5"></i></a>
										<a href="#"><i class="icon6"></i></a>
										</div>
							</div>
							<div class="clearfix"></div>
							</div>
							<div class="footer-bottom">
							<p> Copyright &copy;2015  All rights  Reserved | Template by<a href="http://w3layouts.com" target="target_blank">W3Layouts</a></p>
					</div>
					<script type="text/javascript">
						$(document).ready(function() {
							/*
							var defaults = {
					  			containerID: 'toTop', // fading element id
								containerHoverID: 'toTopHover', // fading element hover id
								scrollSpeed: 1200,
								easingType: 'linear' 
					 		};
							*/
							$().UItoTop({ easingType: 'easeOutQuart' });
						});
					</script>
				<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
						</div>
					</div>



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 扁平化 企業 行業 公司 工廠 黑色 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 餐飲 美食 飯店 餐飲行業 美食行業
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表