白色簡潔風格的格調精品餐廳整站網站源碼下載



7 27 10



模板描述:白色簡潔風格 格調精品餐廳 整站網站,白色簡潔風格的格調精品餐廳整站網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Antic+Didone' 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/responsiveslides.min.js"></script>
<script src="js/responsiveslides.min.js"></script>

3. HTML代碼

<!-- banner -->
	<div id="home" class="banner">
		<div class="banner1">
			<div class="head-logo">
				<a href="#"><img src="images/logo.png" alt=" "></a>
			</div>
			<div class="clearfix"> </div>
			<div class="banner-info">
				<h2><span>W</span>ELCOME</h2>
				<p>TELEFONISCHE RESERVIERUNGEN: +43 1 406 59 13 </p>
			</div>
			<div class="top-nav">
				<span class="menu"><img src="images/menu.png" alt="" /></span>
					<ul class="nav1">
						<li><a href="#home" class="scroll">Home</a></li>
						<li><a href="#mittagsmenü" class="scroll">Mittagsmenü</a></li>
						<li><a href="#speisekarte" class="scroll">Speisekarte</a></li>
						<li><a href="#galerie" class="scroll">Galerie</a></li>
						<li><a href="#kontakt" class="scroll">Kontakt</a></li>
						<div class="clearfix"> </div>
					</ul>
			</div>
		</div>
	</div>	
					<script> 
							   $( "span.menu" ).click(function() {
								 $( "ul.nav1" ).slideToggle( 300, function() {
								 // Animation complete.
								  });
								 });
					</script>
<!-- //banner -->
<!-- banner-bottom -->
	<div class="container">
	<div id="mittagsmenü" class="banner-bottom">
		<div class="mag">
			<h4>Mittagsmenü</h4>
			<span> </span>
		</div>
		<div class="dor">
			<div class="dor-left">
				<div class="dor-left-fig">
					<img src="images/12.jpg" alt=" " />
				</div>
				<div class="dor-left-text">
					<h3>Dorsch Gebacken</h3>
					<ul>
						<li>?l, zum Einpinseln</li>
						<li>?l für den Br?ter</li>
						<li>Tamarindenpaste (Tamarindenmark)</li>
						<li>Schalotte(n)</li>
						<li>Knoblauch</li>
					</ul>
				</div>
			</div>
			<div class="dor-right">
				<div class="dor-right-image">
					<p>€ 5,70</p>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="dor1">
			<div class="dor-left1">
				<div class="dor-right-image1">
					<p>€ 5,70</p>
				</div>
			</div>
			<div class="dor-right1">
				<div class="dor-left-fig1">
					<img src="images/4.jpg" alt=" " />
				</div>
				<div class="dor-left-text1">
					<h3>Bruschetta</h3>
					<ul>
						<li>?l, zum Einpinseln</li>
						<li>?l für den Br?ter</li>
						<li>Tamarindenpaste (Tamarindenmark)</li>
						<li>Schalotte(n)</li>
						<li>Knoblauch</li>
					</ul>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="dor1">
			<div class="dor-left">
				<div class="dor-left-fig">
					<img src="images/5.jpg" alt=" " />
				</div>
				<div class="dor-left-text">
					<h3 class="tal">Tallianette</h3>
					<ul>
						<li>?l, zum Einpinseln</li>
						<li>?l für den Br?ter</li>
						<li>Tamarindenpaste (Tamarindenmark)</li>
						<li>Schalotte(n)</li>
						<li>Knoblauch</li>
					</ul>
				</div>
			</div>
			<div class="dor-right">
				<div class="dor-right-image">
					<p>€ 5,70</p>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	</div>
<!-- //banner-bottom -->
<!-- aktionen -->
	<div class="aktionen">
	<div class="container">
		<div class="aktionen-text">
			<h4>Alle Menüs T?glich erh?ltlich von Mo-Fr von 11.00-22.00 Uhr        
				<span>au?er Feiertags solange der Vorrat reicht.</span></h4>
		</div>
		<div class="aktionen-text-bottom">
			<h3>Aktionen</h3>
		</div>
<!-- aktionen-grids-script-starts-here -->
			<script>
				// You can also use "$(window).load(function() {"
				$(function () {
				  // Slideshow 4
				  $("#slider3").responsiveSlides({
					auto: true,
					pager: true,
					nav: false,
					speed: 500,
					namespace: "callbacks",
					before: function () {
						 $('.events').append("<li>before event fired.</li>");
					},
					after: function () {
							$('.events').append("<li>after event fired.</li>");
					}
				 });
				});
			</script>
			<div  id="top" class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>
						<div class="aktionen-grids">
							<div class="aktionen-grid">
								<img src="images/1.jpg" alt=" " />
							</div>
							<div class="aktionen-grid">
								<img src="images/2.jpg" alt=" " />
							</div>
							<div class="aktionen-grid">
								<img src="images/3.jpg" alt=" " />
							</div>
							<div class="clearfix"> </div>
						</div>
					</li>
					<li>
						<div class="aktionen-grids">
							<div class="aktionen-grid">
								<img src="images/16.jpg" alt=" " />
							</div>
							<div class="aktionen-grid">
								<img src="images/15.jpg" alt=" " />
							</div>
							<div class="aktionen-grid">
								<img src="images/18.jpg" alt=" " />
							</div>
							<div class="clearfix"> </div>
						</div>
					</li>
					<li>
						<div class="aktionen-grids">
							<div class="aktionen-grid">
								<img src="images/17.jpg" alt=" " />
							</div>
							<div class="aktionen-grid">
								<img src="images/14.jpg" alt=" " />
							</div>
							<div class="aktionen-grid">
								<img src="images/19.jpg" alt=" " />
							</div>
							<div class="clearfix"> </div>
						</div>
					</li>
				</ul>
			</div>
<!-- aktionen-grids-script-ends-here -->
	</div>
	</div>
<!-- //aktionen -->
<!-- Speisekarte -->
	<div id="speisekarte" class="Speisekarte">
	<div class="container">
		<div class="mag">
			<h4>Speisekarte</h4>
			<span> </span>
		</div>
		<div class="Speisekarte-grids">
			<div class="Speisekarte-grid">
				<div class="Speisekarte-grid1">
					<img src="images/6.jpg" alt=" " />
					<div class="Speisekarte-grid1-text">
						<h3>Hauptgerichte & Pasta</h3>
						<ul>
							<li>Gegrilltes Hühnerfilet</li>
							<li>auf R?stgemüse, Langkornreis und</li>
							<li>Kr?uterbutter</li>
							<li>Rotes Putencurry</li>
							<li>mit Wokgemüse und Polaureis</li>
							<li>Wiener Schnitzel</li>
							<li>Penne Carbonara</li>
						</ul>
						<a href="#">Read more...</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="Speisekarte-grid2">
					<img src="images/7.jpg" alt=" ">
					<div class="Speisekarte-grid1-text">
						<h3>Beilagen</h3>
						<ul>
							<li>Gegrilltes Hühnerfilet</li>
							<li>auf R?stgemüse, Langkornreis und</li>
							<li>Kr?uterbutter</li>
							<li>Rotes Putencurry</li>
							<li>mit Wokgemüse und Polaureis</li>
							<li>Wiener Schnitzel</li>
							<li>Penne Carbonara</li>
						</ul>
						<a href="#">Read more...</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="Speisekarte-grid">
				<div class="Speisekarte-grid1">
					<img src="images/8.jpg" alt=" " />
					<div class="Speisekarte-grid1-text">
						<h3>Meals</h3>
						<ul>
							<li>Gegrilltes Hühnerfilet</li>
							<li>auf R?stgemüse, Langkornreis und</li>
							<li>Kr?uterbutter</li>
							<li>Rotes Putencurry</li>
							<li>mit Wokgemüse und Polaureis</li>
							<li>Wiener Schnitzel</li>
							<li>Penne Carbonara</li>
						</ul>
						<a href="#">Read more...</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="Speisekarte-grid2">
					<img src="images/9.jpg" alt=" ">
					<div class="Speisekarte-grid1-text">
						<h3>Salad</h3>
						<ul>
							<li>Gegrilltes Hühnerfilet</li>
							<li>auf R?stgemüse, Langkornreis und</li>
							<li>Kr?uterbutter</li>
							<li>Rotes Putencurry</li>
							<li>mit Wokgemüse und Polaureis</li>
							<li>Wiener Schnitzel</li>
							<li>Penne Carbonara</li>
						</ul>
						<a href="#">Read more...</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="Speisekarte-grid">
				<div class="Speisekarte-grid1">
					<img src="images/10.jpg" alt=" " />
					<div class="Speisekarte-grid1-text">
						<h3>Dessert</h3>
						<ul>
							<li>Gegrilltes Hühnerfilet</li>
							<li>auf R?stgemüse, Langkornreis und</li>
							<li>Kr?uterbutter</li>
							<li>Rotes Putencurry</li>
							<li>mit Wokgemüse und Polaureis</li>
							<li>Wiener Schnitzel</li>
							<li>Penne Carbonara</li>
						</ul>
						<a href="#">Read more...</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="Speisekarte-grid2">
					<img src="images/11.jpg" alt=" ">
					<div class="Speisekarte-grid1-text">
						<h3>Suppen</h3>
						<ul>
							<li>Gegrilltes Hühnerfilet</li>
							<li>auf R?stgemüse, Langkornreis und</li>
							<li>Kr?uterbutter</li>
							<li>Rotes Putencurry</li>
							<li>mit Wokgemüse und Polaureis</li>
							<li>Wiener Schnitzel</li>
							<li>Penne Carbonara</li>
						</ul>
						<a href="#">Read more...</a>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	</div>
<!-- //Speisekarte -->
<!-- gallery -->
	<div id="galerie" class="gallerie">
<!-- aktionen-grids-script-starts-here -->
			<script>
				// You can also use "$(window).load(function() {"
				$(function () {
				  // Slideshow 4
				  $("#slider2").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>
			<div  id="top" class="callbacks_container">
				<ul class="rslides" id="slider2">
					<li>
						<div class="gallery">
							<div class="gallery-banner">
							<div class="container">
								<div class="mag1">
									<h4>Galerie</h4>
									<span> </span>
								</div>
								<div class="figure">
									<span> </span>
								</div>
							</div>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery">
							<div class="gallery-banner1">
							<div class="container">
								<div class="mag1">
									<h4>Galerie</h4>
									<span> </span>
								</div>
								<div class="figure">
									<span> </span>
								</div>
							</div>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery">
							<div class="gallery-banner2">
							<div class="container">
								<div class="mag1">
									<h4>Galerie</h4>
									<span> </span>
								</div>
								<div class="figure">
									<span> </span>
								</div>
							</div>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery">
							<div class="gallery-banner3">
							<div class="container">
								<div class="mag1">
									<h4>Galerie</h4>
									<span> </span>
								</div>
								<div class="figure">
									<span> </span>
								</div>
							</div>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery">
							<div class="gallery-banner4">
							<div class="container">
								<div class="mag1">
									<h4>Galerie</h4>
									<span> </span>
								</div>
								<div class="figure">
									<span> </span>
								</div>
							</div>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery">
							<div class="gallery-banner5">
							<div class="container">
								<div class="mag1">
									<h4>Galerie</h4>
									<span> </span>
								</div>
								<div class="figure">
									<span> </span>
								</div>
							</div>
							</div>
						</div>
					</li>
					<li>
						<div class="gallery">
							<div class="gallery-banner6">
							<div class="container">
								<div class="mag1">
									<h4>Galerie</h4>
									<span> </span>
								</div>
								<div class="figure">
									<span> </span>
								</div>
							</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
<!-- //gallery -->
<!-- contact -->
	<div id="kontakt" class="contact">
	<div class="container">
		<div class="mag">
			<h4>Kontakt</h4>
			<span> </span>
		</div>
		<div class="contact-left">
			<form>
				<div class="in">
					<p>Name</p>
					<input type="text" required=" " placeholder=" ">
				</div>
				<div class="in">
					<p>Last Name</p>
					<input type="text" required=" " placeholder=" ">
				</div>
				<div class="msg">
					<p>Message</p>
					<textarea> </textarea>
				</div>
				<input type="submit" value="Send">
			</form>
		</div>
		<div class="contact-right">
				<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2658.6217599245797!2d16.359003999999995!3d48.21390100000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476d07be6e87a683%3A0x967d1263f748a734!2sVotiv+cafe!5e0!3m2!1sen!2sin!4v1423910332871" frameborder="0" style="border:0"></iframe>
		</div>
	</div>
	</div>
<!-- //contact -->
<!-- footer-top -->
	<div class="footer">
	<div class="container">
		<div class="footer-top">
			<div class="footer-top-left">
				<h3>Become a member of  
					<span>Goran Ramljak dribbble page</span></h3>
				<p>and get all the information about new freebies...</p>
			</div>
			<div class="footer-top-right">
				<div class="footer-top-right-imag">
					<img src="images/20.png" alt=" " />
					<div class="footer-top-right-imag-text">
						<h6>Konzum</h6>
					</div>
					<div class="clearfix"> </div>
					<div class="frme">
						<iframe src="http://www.w3layouts.com">
						</iframe>
					</div>
				</div>
			</div>
			</div>
			<div class="clearfix"> </div>
		<div class="footer-bottom">
			<div class="col-md-3 footer-left">
				<h5>?FFNUNGSZEITEN</h5>
				<ul>
					<li>Mo-Fr: 8-23h* Sa: 9-21h</li>
					<li>So, Feiertags: 10-21h</li>
				</ul>
			</div>
			<div class="col-md-3 footer-left">
				<h5>ANSCHRIFT</h5>
				<ul>
					<li>Reichsratsstrasse 17</li>
					<li>A - 1010 Wien</li>
				</ul>
			</div>
			<div class="col-md-3 footer-left">
				<h5>KONTAKT</h5>
				<ul>
					<li>Telefon: +431 223333</li>
					<li>E-Mail:<a href="mailto:[email protected]"> [email protected]</a></li>
				</ul>
			</div>
			<div class="col-md-3 footer-left">
				<p>Template by<a href="http://w3layouts.com/"> w3layouts</a></p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	</div>
<!-- //footer-top -->
<!-- here stars scrolling icon -->
	<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>
<!-- //here ends scrolling icon -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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