橙色宽屏形式pc+wap精品西餐料理网页模板代码

橙色宽屏形式pc+wap精品西餐料理网页模板代码

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/modernizr-2.6.2.min.js"></script>
<script src="js/respond.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/main.js"></script>

3. HTML代码

	<nav id="colorlib-main-nav" role="navigation">
		<a href="https://www.51qianduan.com/">51前端</a>
		<div class="js-fullheight colorlib-table">
			<div class="colorlib-table-cell js-fullheight">
				<div class="row">
					<div class="col-md-6 col-md-offset-3">
						<div class="form-group">
							<input type="text" class="form-control" id="search" placeholder="Enter any key to search...">
							<button type="submit" class="btn btn-primary"><i class="icon-search3"></i></button>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12 text-center">
						<ul>
							<li class="active"><a href="index.html">Home</a></li>
							<li><a href="menu.html">menus</a></li>
							<li><a href="specialties.html">specialties</a></li>
							<li><a href="reservation.html">Reservation</a></li>
							<li><a href="blog.html">Blog</a></li>
							<li><a href="about.html">About us</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</nav>
	<div id="colorlib-page">
		<header>
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="colorlib-navbar-brand">
							<a class="colorlib-logo" href="index.html"><i class="flaticon-cutlery"></i><span>Lu</span><span>to</span></a>
						</div>
						<a href="https://www.51qianduan.com/">51前端</a>
					</div>
				</div>
			</div>
		</header>
		<aside id="colorlib-hero">
			<div class="flexslider">
				<ul class="slides">
			   	<li style="background-image: url(images/img_bg_1.jpg);">
			   		<div class="overlay"></div>
			   		<div class="container-fluid">
			   			<div class="row">
				   			<div class="col-md-6 col-sm-12 col-xs-12 col-md-offset-3 slider-text">
				   				<div class="slider-text-inner text-center">
				   					<div class="desc">
				   						<span class="icon"><i class="flaticon-cutlery"></i></span>
					   					<h1>Special &amp; Fresh Food</h1>
					   					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					   					<p><a href="#" class="btn btn-primary btn-lg btn-learn">Book a table</a></p>
					   					<div class="desc2"></div>
				   					</div>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>
			   	<li style="background-image: url(images/img_bg_2.jpg);">
			   		<div class="overlay"></div>
			   		<div class="container-fluid">
			   			<div class="row">
				   			<div class="col-md-6 col-sm-12 col-xs-12 col-md-offset-3 slider-text">
				   				<div class="slider-text-inner text-center">
				   					<div class="desc">
				   						<span class="icon"><i class="flaticon-cutlery"></i></span>
					   					<h1>Exquisite Dishes From Chef</h1>
					   					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					   					<p><a href="#" class="btn btn-primary btn-lg btn-learn">Book a table</a></p>
					   					<div class="desc2"></div>
					   				</div>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>
			   	<li style="background-image: url(images/img_bg_3.jpg);">
			   		<div class="overlay"></div>
			   		<div class="container-fluid">
			   			<div class="row">
				   			<div class="col-md-6 col-sm-12 col-xs-12 col-md-offset-3 slider-text">
				   				<div class="slider-text-inner text-center">
				   					<div class="desc">
				   						<span class="icon"><i class="flaticon-cutlery"></i></span>
					   					<h1>We are Delicious Restaurant</h1>
					   					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					   					<p><a href="#" class="btn btn-primary btn-lg btn-learn">Book a table</a></p>
					   					<div class="desc2"></div>
					   				</div>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>
			   	<li style="background-image: url(images/img_bg_4.jpg);">
			   		<div class="overlay"></div>
			   		<div class="container-fluid">
			   			<div class="row">
				   			<div class="col-md-6 col-sm-12 col-xs-12 col-md-offset-3 slider-text">
				   				<div class="slider-text-inner text-center">
				   					<div class="desc">
				   						<span class="icon"><i class="flaticon-cutlery"></i></span>
					   					<h1>Book a table here in our site</h1>
					   					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
					   					<p><a href="#" class="btn btn-primary btn-lg btn-learn">Book a table</a></p>
					   					<div class="desc2"></div>
					   				</div>
				   				</div>
				   			</div>
				   		</div>
			   		</div>
			   	</li>	
			  	</ul>
			  	<div class="mouse">
				   <a href="#" class="mouse-icon">
				   	<div class="mouse-wheel"></div>
				   </a>
				</div>
		  	</div>
		</aside>
		<div class="colorlib-intro">
			<div class="container">
				<div class="row">
					<div class="col-md-3 col-sm-6 text-center">
						<div class="intro animate-box">
							<span class="icon">
								<i class="icon-map4"></i>
							</span>
							<h2>Address</h2>
							<p>198 West 21th Street, Suite 721 New York NY 10016</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-6 text-center">
						<div class="intro animate-box">
							<span class="icon">
								<i class="icon-clock4"></i>
							</span>
							<h2>Opening Time</h2>
							<p>Monday - Sunday</p>
							<span>8am - 9pm</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-6 text-center">
						<div class="intro animate-box">
							<span class="icon">
								<i class="icon-mobile2"></i>
							</span>
							<h2>Phone</h2>
							<p>+ 001 234 567</p>
							<p>+ 001 234 567</p>
						</div>
					</div>
					<div class="col-md-3 col-sm-6 text-center">
						<div class="intro animate-box">
							<span class="icon">
								<i class="icon-envelope"></i>
							</span>
							<h2>Email</h2>
							<p><a href="#">info@domain.com</a><br><a href="#">luto@email.com</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="goto-here"></div>
		<div class="colorlib-about" class="colorlib-light-grey">
			<div class="container">
				<div class="row">
					<div class="col-md-5">
						<div class="row">
							<div class="about-desc">
								<div class="col-md-12 col-md-offset-0 animate-box intro-heading">
									<span>Welcome to luto</span>
									<h2>Taste a delicious food here in Italy &amp; We are inspired since 1895</h2>
								</div>
								<div class="col-md-12 animate-box">
									<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-7">
						<div class="row">
							<div class="col-md-6 animate-box">
								<div class="about-img" style="background-image: url(images/about.jpg);">
								</div>
							</div>
							<div class="col-md-6 animate-box">
								<div class="about-img about-img-2" style="background-image: url(images/about-2.jpg);">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="colorlib-menu">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3 text-center animate-box intro-heading">
						<span class="icon"><i class="flaticon-cutlery"></i></span>
						<h2>Our Delicious Specialties</h2>
						<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 animate-box">
						<div class="dish-wrap">
							<div class="wrap">
								<div class="dish-img" style="background-image: url(images/dish-1.jpg);"></div>
								<div class="desc">
									<h2><a href="#">Luto Strawberry Dish</a></h2>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 animate-box">
						<div class="dish-wrap">
							<div class="wrap">
								<div class="dish-img" style="background-image: url(images/dish-2.jpg);"></div>
								<div class="desc">
									<h2><a href="#">Pizza with strawberries</a></h2>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 animate-box">
						<div class="dish-wrap">
							<div class="wrap">
								<div class="dish-img" style="background-image: url(images/dish-3.jpg);"></div>
								<div class="desc">
									<h2><a href="#">Luto Grilled Beef</a></h2>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="colorlib-introduction" style="background-image: url(images/cover_bg_1.jpg);" data-stellar-background-ratio="0.5">
			<div class="overlay"></div>
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3 col-md-push-3">
						<div class="intro-box animate-box">
							<h2><a href="#"></a>Foods you love to taste</h2>
							<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
							<p><a href="https://www.51qianduan.com/">51前端</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="colorlib-menu">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3 text-center animate-box intro-heading">
						<span class="icon"><i class="flaticon-cutlery"></i></span>
						<h2>Our Delicious Specialties</h2>
						<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 animate-box">
						<div class="dish-wrap">
							<div class="wrap">
								<div class="dish-img" style="background-image: url(images/dish-1.jpg);"></div>
								<div class="desc">
									<h2><a href="#">Luto Strawberry Dish</a></h2>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 animate-box">
						<div class="dish-wrap">
							<div class="wrap">
								<div class="dish-img" style="background-image: url(images/dish-2.jpg);"></div>
								<div class="desc">
									<h2><a href="#">Pizza with strawberries</a></h2>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 animate-box">
						<div class="dish-wrap">
							<div class="wrap">
								<div class="dish-img" style="background-image: url(images/dish-3.jpg);"></div>
								<div class="desc">
									<h2><a href="#">Luto Grilled Beef</a></h2>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="colorlib-testimony" style="background-image: url(images/cover_bg_2.jpg);" data-stellar-background-ratio="0.5">
			<div class="overlay"></div>
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3 text-center animate-box intro-heading">
						<h2>Our Customer Says</h2>
					</div>
				</div>
				<div class="row animate-box">
					<div class="owl-carousel">
						<div class="item">
							<div class="col-md-8 col-md-offset-2 text-center">
								<div class="testimony">
									<blockquote>
										<p>"A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
										<span>" &mdash; George Brooks</span>
									</blockquote>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="col-md-8 col-md-offset-2 text-center">
								<div class="testimony">
									<blockquote>
										<p>"Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
										<span>" &mdash; Daniel Foster</span>
									</blockquote>
								</div>
							</div>
						</div>
						<div class="item">
							<div class="col-md-8 col-md-offset-2 text-center">
								<div class="testimony">
									<blockquote>
										<p>"When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove</p>
										<span>" &mdash; Liam Jenkins</span>
									</blockquote>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="colorlib-menu">
			<div class="container">
				<div class="colorlib-menu-2">
					<div class="row">
						<div class="col-md-6 col-md-offset-3 text-center animate-box intro-heading">
							<span class="icon"><i class="flaticon-cutlery"></i></span>
							<h2>Lutong Bahay Menu</h2>
							<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life</p>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 animate-box">
							<div class="row">
								<div class="col-md-12 text-center">
									<ul class="nav nav-tabs text-center" role="tablist">
										<li role="presentation" class="active"><a href="https://www.51qianduan.com/">51前端</a></li>
										<li role="presentation"><a href="https://www.51qianduan.com/">51前端</a></li>
										<li role="presentation"><a href="https://www.51qianduan.com/">51前端</a></li>
									</ul>
								</div>
							</div>
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane active" id="main">
									<div class="row">
										<div class="col-md-6">
											<ul class="menu-dish">
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-3.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$25.99</span>
							                  <h3>Grilled Beef with potatoes</h3>
							                  <p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-4.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$30.99</span>
							                  <h3>Tuna Roast Source</h3>
							                  <p class="cat">Tuna / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-5.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$40.00</span>
							                  <h3>Roast Beef (4 sticks)</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-6.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Salted Fried Chicken</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-7.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Lumpia Shanghai</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-8.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Chicken Adobo</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							            </ul>
										</div>
										<div class="col-md-6">
											<ul class="menu-dish">
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-9.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$25.99</span>
							                  <h3>Marinated Beef</h3>
							                  <p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-10.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$30.99</span>
							                  <h3>Fried Tokwa</h3>
							                  <p class="cat">Tuna / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-11.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$40.00</span>
							                  <h3>Letson Kawali</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-12.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Fried Pork</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-13.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Chopsuey</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dish-14.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Sunny sideup egg</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							            </ul>
										</div>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane" id="desserts">
									<div class="row">
										<div class="col-md-6">
											<ul class="menu-dish">
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-1.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$25.99</span>
							                  <h3>Special Cake</h3>
							                  <p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-2.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$30.99</span>
							                  <h3>Froost Sweeten Vanilla</h3>
							                  <p class="cat">Tuna / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-3.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$40.00</span>
							                  <h3>Halo Halo </h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-4.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Nicker Backer</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-5.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Choco Cake</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-6.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Sweet Caramel Bread</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							            </ul>
										</div>
										<div class="col-md-6">
											<ul class="menu-dish">
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-7.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$25.99</span>
							                  <h3>Choco Bread</h3>
							                  <p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-8.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$30.99</span>
							                  <h3>Cream Puffs Delicious</h3>
							                  <p class="cat">Sugar / Dough / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-9.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$40.00</span>
							                  <h3>Fruit Salad</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-10.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Special Macaronni</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-11.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Biko Sweet</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/dessert-12.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Burger King</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							            </ul>
										</div>
									</div>
								</div>
								<div role="tabpanel" class="tab-pane" id="drinks">
									<div class="row">
										<div class="col-md-6">
											<ul class="menu-dish">
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-1.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$25.99</span>
							                  <h3>Cold Lemonade Juice</h3>
							                  <p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-2.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$30.99</span>
							                  <h3>May Wine</h3>
							                  <p class="cat">Tuna / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-3.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$40.00</span>
							                  <h3>Ice tea juice</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-4.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Orange Juice</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-5.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Fresh Fruits Juice</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-6.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Coconut Juice</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							            </ul>
										</div>
										<div class="col-md-6">
											<ul class="menu-dish">
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-7.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$25.99</span>
							                  <h3>Mango Juice</h3>
							                  <p class="cat">Meat / Potatoes / Rice / Tomatoe</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-8.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$30.99</span>
							                  <h3>Lemon Juice</h3>
							                  <p class="cat">Tuna / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-9.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$40.00</span>
							                  <h3>Softdrinks Coke</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-10.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Softdrinks Pepsi</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-11.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Can Juice</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							              <li>
							                <figure class="dish-entry">
							                	<div class="dish-img" style="background-image: url(images/drink-12.jpg);"></div>
							                </figure>
							                <div class="text">
							                  <span class="price">$20.50</span>
							                  <h3>Choco Juice</h3>
							                  <p class="cat">Crab / Potatoes / Rice</p>
							                </div>
							              </li>
							            </ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-12 animate-box text-center">
							<p>Even the all-powerful Pointing has no control about the blind texts it is an almost</p>
							<p><a href="#" class="btn btn-primary btn-outline btn-md">Book a table</a></p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="colorlib-reservation reservation-img" style="background-image: url(images/cover_bg_2.jpg);" data-stellar-background-ratio="0.5">
			<div class="overlay"></div>
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3 text-center animate-box intro-heading">
						<h2>Make A Reservation</h2>
						<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life</p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-8 col-md-offset-2">
						<div class="row">
							<div class="col-md-12">
								<form method="post" class="colorlib-form">
				              	<div class="row">
										<div class="col-md-6 animate-box">
											<div class="form-group">
												<label for="name">Fullname</label>
												<div class="form-field">
													<input type="text" class="form-control" placeholder="name">
												</div>
											</div>
										</div>
										<div class="col-md-6 animate-box">
											<div class="form-group">
												<label for="email">Email</label>
												<div class="form-field">
													<input type="text" class="form-control" placeholder="email">
												</div>
											</div>
										</div>
										<div class="col-md-6 animate-box">
											<div class="form-group">
												<label for="phone">Phone</label>
												<div class="form-field">
													<input type="text" class="form-control" placeholder="phone">
												</div>
											</div>
										</div>
										<div class="col-md-6 animate-box">
											<div class="form-group">
												<label for="date">Date:</label>
												<div class="form-field">
													<i class="icon icon-calendar2"></i>
													<input type="text" id="date" class="form-control date" placeholder="Date">
												</div>
											</div>
										</div>
										<div class="col-md-6 animate-box">
											<div class="form-group">
												<label for="time">Time</label>
												<div class="form-field">
													<i class="icon icon-arrow-down3"></i>
													<select name="time" id="time" class="form-control">
														<option value="#">6:30am</option>
														<option value="#">7:00am</option>
														<option value="#">7:30am</option>
														<option value="#">8:00am</option>
														<option value="#">8:30am</option>
														<option value="#">9:00am</option>
														<option value="#">9:30am</option>
														<option value="#">10:00am</option>
														<option value="#">10:30am</option>
														<option value="#">11:00am</option>
														<option value="#">11:30am</option>
														<option value="#">12:00am</option>
														<option value="#">12:30am</option>
														<option value="#">1:00pm</option>
														<option value="#">1:30pm</option>
														<option value="#">2:00pm</option>
														<option value="#">2:30pm</option>
														<option value="#">3:00pm</option>
														<option value="#">3:30pm</option>
														<option value="#">4:00pm</option>
														<option value="#">4:30pm</option>
														<option value="#">5:00pm</option>
														<option value="#">5:30pm</option>
														<option value="#">6:00pm</option>
														<option value="#">6:30pm</option>
														<option value="#">7:00pm</option>
														<option value="#">7:30pm</option>
														<option value="#">8:00pm</option>
														<option value="#">8:30pm</option>
														<option value="#">9:00pm</option>
														<option value="#">9:30pm</option>
														<option value="#">10:00pm</option>
														<option value="#">10:30pm</option>
													</select>
												</div>
											</div>
										</div>
										<div class="col-md-6 animate-box">
											<div class="form-group">
												<label for="person">Person</label>
												<div class="form-field">
													<i class="icon icon-arrow-down3"></i>
													<select name="people" id="people" class="form-control">
														<option value="#">1</option>
														<option value="#">2</option>
														<option value="#">3</option>
														<option value="#">4</option>
														<option value="#">5+</option>
													</select>
												</div>
											</div>
										</div>
										<div class="col-md-12 animate-box">
											<div class="row">
												<div class="col-md-4 col-md-offset-4">
													<input type="submit" name="submit" id="submit" value="Book a table" class="btn btn-primary btn-block">
												</div>
											</div>
										</div>
									</div>
				            </form>
			           	</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<div id="footer">
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-pb-sm">
							<h2>Lutong Bahay</h2>
							<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind.</p>
							<p class="colorlib-social-icons">
								<a href="#"><i class="icon-facebook4"></i></a>
								<a href="#"><i class="icon-twitter3"></i></a>
								<a href="#"><i class="icon-googleplus"></i></a>
								<a href="#"><i class="icon-dribbble2"></i></a>
							</p>
						</div>
						<div class="col-md-3 col-pb-sm">
							<h2>Latest Blog</h2>
							<div class="f-entry">
								<a href="https://www.51qianduan.com/">51前端</a>
								<div class="desc">
									<span>May 5, 2018</span>
									<h3><a href="#">How to cook beef Grilled with potato</a></h3>
								</div>
							</div>
							<div class="f-entry">
								<a href="https://www.51qianduan.com/">51前端</a>
								<div class="desc">
									<span>May 5, 2018</span>
									<h3><a href="#">A Japanese Master Chef</a></h3>
								</div>
							</div>
							<div class="f-entry">
								<a href="https://www.51qianduan.com/">51前端</a>
								<div class="desc">
									<span>May 5, 2018</span>
									<h3><a href="#">Special Recipe for this month</a></h3>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-pb-sm">
							<h2>Instagram</h2>
							<div class="instagram">
								<a href="https://www.51qianduan.com/">51前端</a>
								<a href="https://www.51qianduan.com/">51前端</a>
								<a href="https://www.51qianduan.com/">51前端</a>
								<a href="https://www.51qianduan.com/">51前端</a>
							</div>
						</div>
						<div class="col-md-3 col-pb-sm">
							<h2>Newsletter</h2>
							<p>A small river named Duden flows by their place and supplies it with the necessary regelialia</p>
							<div class="subscribe text-center">
								<div class="form-group">
									<input type="text" class="form-control text-center" placeholder="Enter Email address">
									<input type="submit" value="Subscribe" class="btn btn-primary btn-custom">
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-12 text-center">
							<p>
								<span class="block">&copy; <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart" aria-hidden="true"></i> by <a href="https://www.51qianduan.com/">51前端</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. --><br></span> 
								<span class="block">Demo Images: <a href="https://www.51qianduan.com/">51前端</a> &amp; <a href="https://www.51qianduan.com/">51前端</a></span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>
	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Parallax -->
	<script src="js/jquery.stellar.min.js"></script>
	<!-- Owl Carousel -->
	<script src="js/owl.carousel.min.js"></script>
	<!-- Magnific Popup -->
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/magnific-popup-options.js"></script>
	<!-- Flexslider -->
	<script src="js/jquery.flexslider-min.js"></script>
	<!-- Date Picker -->
	<script src="js/bootstrap-datepicker.js"></script>
	<!-- Main JS (Do not remove) -->
	<script src="js/main.js"></script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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