<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ray503/pen/yVgROe?limit=all&page=66&q=food" />
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
<style class="cp-pen-styles">body{
font-family: 'Lato', Arial, sans-serif;
}
.header{
background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url(http://gdurl.com/vbZj);
background-size:cover;
text-align:center;
}
.header-standout{
margin-bottom:30px;
color:#ffffff;
font-size:60px;
}
.header-short{
margin-bottom:30px;
color:#ffffff;
}
.header-box{
margin:200px 0px 200px 0px;
}
.reserve .btn{
color:#000000;
background:#ffffff;
padding:18px 30px 18px 30px;
}
/*OUR CHEF*/
.to-close{
margin-bottom:60px;
}
.our-chef{
padding:70px 0px 70px 0px;
}
.chef{
height:333px;
width:600px;
}
.chef-btn .btn{
background:#000000;
color:#ffffff;
font-size:25px;
}
.too-close{
margin-bottom:30px;
}
.chef-space{
margin-bottom:20px;
}
/*0UR CHEF CLOSE*/
/*MENU*/
#our-menu h2 {
text-align: center;
display: block;
}
#our-menu {
background:linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url(http://gdurl.com/5PCr) no-repeat;
padding: 70px 0px 70px 0px;
color: #fff;
-webkit-background-size: cover;
background-size: cover;
}
#our-menu h3 {
font-size: 24px;
font-weight: 300;
text-transform: uppercase;
text-align: center;
}
.menu-tabs {
border-bottom: 2px solid #DDD;
margin: 0 0 40px 0;
text-transform: uppercase;
font-weight: 500;
border-bottom: none;
text-align: center;
}
.menu-tabs > li.active > a,
.menu-tabs > li.active > a:focus,
.menu-tabs > li.active > a:hover {
border-width: 0;
}
.menu-tabs > li > a {
border: none;
color: #666;
}
.menu-tabs > li.active > a,
.menu-tabs > li > a:hover {
border: none;
color: #fff !important;
background: transparent;
}
.menu-tabs > li > a::after {
content: "";
background: #fff;
height: 2px;
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
transition: all 250ms ease 0s;
transform: scale(0);
}
.menu-tabs > li.active > a::after,
.menu-tabs > li:hover > a::after {
transform: scale(1);
}
.menu-tabs li,
.menu-tabs li a {
display: inline-block;
}
.menu-tabs li {
float: none;
}
.menu-tabs>li.active>a,
.menu-tabs>li.active>a:hover,
.menu-tabs>li.active>a:focus {
background: none;
color: #fff;
}
.menu-tabs li a {
color: #D2D2D2;
border-radius: 0;
display: inline-block;
margin: 0 6px;
}
.menu-group-item {
margin-bottom: 20px;
}
.menu-item-price {
font-size: 20px;
font-weight: 600;
}
.menu-title {
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-weight: 500;
display: block;
margin: 5px 0;
}
.menu-descp {
color: #868686;
}
/*MENU CLOSE*/
/*GALLERY*/
.my-work{
padding: 70px 0px 70px 0px;
background:#f2f2f2;
}
#lightbox .modal-content {
display: inline-block;
text-align: center;
}
#lightbox .close {
opacity: 1;
color: rgb(255, 255, 255);
background-color: rgb(25, 25, 25);
padding: 5px 8px;
border-radius: 30px;
border: 2px solid rgb(255, 255, 255);
position: absolute;
top: -15px;
right: -55px;
z-index:1032;
}
/*RECENT CREATIONS*/
.newest-creations{
padding:70px 0px 70px 0px;
text-align:center;
}
.creation-h2{
margin-bottom:60px;
}
.newest .btn{
color:white;
background:#000000;
padding:10px 15px 10px 15px;
}
.create{
margin:0 auto;
width:250px;
height:250px;
}
/*OUR-TEAM*/
.our-team{
text-align:center;
background:linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),url(http://gdurl.com/Tbjc);
background-repeat: none;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
color:#ffffff;
padding:60px 0px 60px 0px;
}
.team-member{
margin-bottom:60px;
}
.fa-twitter,.fa-facebook,.fa-linkedin{
color:#000000;
}
.fa-circle{
color:#ffffff;
}
/*CONTACT US*/
.contact-us{
text-align:center;
padding:70px 0px 70px 0px;
}
.contact-us h2{
margin-bottom:30px;
font-weight:600;
}
.contact-us h4{
margin-bottom:20px;
}
.contact-btn .btn{
color:#ffffff;
background:#000000;
font-size:18px;
padding:15px 20px 15px 20px;
}
.info-box {
padding-left: 95px;
position: relative;
margin-bottom: 60px
}
.info-box:hover div {
color: #fff!important
}
.info-box div {
position: absolute;
width: 64px;
height: 64px;
border: 1px solid;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
left: 0;
line-height: 64px;
text-align: center;
font-size: 30px;
color: #036!important;
border-color: #036!important;
-o-transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-ms-transition: all .3s;
transition: all .3s
}
.info-box:hover div {
background-color: #036
}</style></head><body>
<div class="header">
<div class="container">
<div class="header-box">
<h1 class="header-standout">DULLUCCESS</h1>
<h3 class="header-short">Duis vel massa fringilla, suscipit risus sit amet, molestie eros.</h3>
<div class="reserve">
<a class="btn">MAKE A RESERVATION</a>
</div>
</div>
</div>
</div>
<div class="our-chef">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">OUR CHEF</h2>
<h4 class="to-close text-center">Duis vel massa fringilla, suscipit risus sit amet, molestie eros. Proin at cursus mi. Donec euismod lectus vel lacus luctus sollicitudin. Sed sed purus sapien.</h4>
</div>
<div class="col-sm-12 col-md-6">
<img src="http://gdurl.com/8Ouc" class="chef img-responsive" alt="">
</div>
<div class="col-sm-12 col-md-6">
<h3 class="too-close">Mauris quis eros tortor</h3>
<p class="chef-space">Duis vel massa fringilla, suscipit risus sit amet, molestie eros. Proin at cursus mi. Donec euismod lectus vel lacus luctus sollicitudin. Sed sed purus sapien. <strong>Duis pulvinar magna nunc, eget lobortis eros auctor id.</strong> Praesent hendrerit enim eu commodo interdum.</p>
<p class="chef-space"><strong>Mauris quis eros tortor.</strong> Ut quis justo tellus. Duis vel massa fringilla, suscipit risus sit amet, molestie eros. Proin at cursus mi. </p>
<p> </p>
<div class="chef-btn">
<p><a class="btn btn-lg btn-block">More</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Our Menu section starts -->
<section id="our-menu">
<div class="container">
<h2>Our Menu</h2>
<div class="menu-table">
<!-- Menu tabs -->
<ul class="nav nav-tabs menu-tabs" role="tablist">
<li class="active">
<a href="#soups-salads-appetizers" aria-controls="soups-salads-appetizers" role="tab" data-toggle="tab" class="icon icon-home"><span>Breakfast</span></a>
</li>
<li>
<a href="#organic-pastas" aria-controls="prganic-pastas" role="tab" data-toggle="tab">Lunch</a>
</li>
<li>
<a href="#pizza" aria-controls="pizza" role="tab" data-toggle="tab">Dinner</a>
</li>
<li>
<a href="#entrees" aria-controls="entrees" role="tab" data-toggle="tab">Desserts</a>
</li>
<li>
<a href="#desserts" aria-controls="desserts" role="tab" data-toggle="tab">Drinks</a>
</li>
</ul>
<!-- Menu Tab panes -->
<div class="tab-content">
<div class="tab-pane active fade in" id="soups-salads-appetizers">
<div class="row">
<div class="menu-group">
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-9">
<span class="menu-title">Crispy Risotto Balls</span>
<span class="menu-descp">mozzarella, Grana Padano, herb aioli, marinara</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 34
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-9">
<span class="menu-title">Minestrone Soup</span>
<span class="menu-descp">cranberry beans, vegetables, Grana Padano</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 45
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-9">
<span class="menu-title">Lentil Soup</span>
<span class="menu-descp">parmesan chicken broth, potato, bacon, Grana Padano, parsley</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 54
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-9">
<span class="menu-title">Mixed Greens</span>
<span class="menu-descp">red wine vinaigrette, pears, walnuts, goat cheese</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 23
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-9">
<span class="menu-title">Chopped Salad</span>
<span class="menu-descp">chickpea, green olive, pistachio, pepperoni, oregano, red wine vinaigrette, pecorino</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 46
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-9">
<span class="menu-title">Orange Salad</span>
<span class="menu-descp">green olives, red onions, tarragon, extra virgin olive oil</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 64
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-9">
<span class="menu-title">Shaved Kale</span>
<span class="menu-descp">creamy anchovy dressing, pecorino, bread crumbs</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 75
</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="organic-pastas">
<div class="row">
<div class="menu-group">
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Spaghetti Aglio e Olio</span>
<span class="menu-descp">olive oil, garlic, chili, Grana Padano (add anchovy 2.00)</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 54
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Chitarra al Pomodoro</span>
<span class="menu-descp">tomatoes, garlic, basil, Grana Padano</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-3">
<span class="menu-item-price">
$ 87
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Pappardelle</span>
<span class="menu-descp">smoked pork, mascarpone, apples</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 45
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Pistachio Ravioli</span>
<span class="menu-descp">pistachio, mint, lemon brown butter, Grana Padano</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 43
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="images/item5.jpg" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Garganelli</span>
<span class="menu-descp">braised beef, olives, gremolata, Grana Padano</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 43
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="images/item1.jpg" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Italian Ramen</span>
<span class="menu-descp">spaghettini, soft cooked egg, chicken, basil, Grana Padano</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 87
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Lasagna Bianca</span>
<span class="menu-descp">béchamel, butternut squash, onion, fontina, brown butter, sage</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 78
</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="pizza">
<div class="row">
<div class="menu-group">
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Margherita</span>
<span class="menu-descp">tomato, mozzarella, basil</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 38
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Pastaria Marinara</span>
<span class="menu-descp">tomato, onion, garlic, oregano, basil, pecorino (very minimal cheese)</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 48
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Pappardelle</span>
<span class="menu-descp">smoked pork, mascarpone, apples</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 73
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Four Cheese</span>
<span class="menu-descp">mozzarella, fontina, gorgonzola dolce, Grana Padano (no tomato)</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 48
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Fennel Salami</span>
<span class="menu-descp">tomato, mozzarella</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 43
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">The Holmes</span>
<span class="menu-descp">tomato, mozzarella, mushroom, prosciutto, oregano, Grana Padano</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 75
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Sweet Potato</span>
<span class="menu-descp">béchamel, fontina, red onion, lemon zest, herbs</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 38
</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade " id="entrees">
<div class="row">
<div class="menu-group">
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Wood Oven Roasted Chicken</span>
<span class="menu-descp">roasted cauliflower, potato, lemon,caper, parsley</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 70
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Red Wine Braised Beef</span>
<span class="menu-descp">creamy corn polenta, roasted baby carrots, parsley</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 30
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Wood Oven Roasted Salmon</span>
<span class="menu-descp">fennel confit, farro, zucchini, calabrian chili, preserved lemon</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 49
</span>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="desserts">
<div class="row">
<div class="menu-group">
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Mama Rodolico’s Tiramisu</span>
<span class="menu-descp">roasted cauliflower, potato, lemon,caper, parsley</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 53
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Dark Chocolate Tart</span>
<span class="menu-descp">whipped cream and candied hazelnuts</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 37
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Yoghurt Panna Cotta</span>
<span class="menu-descp">cherry compote</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 73
</span>
</div>
</div>
<div class="menu-group-item clearfix col-lg-6 col-md-6 col-sm-12">
<div class="col-md-3 col-lg-3 col-sm-3 hidden-xs">
<img src="http://gdurl.com/caeA" alt="" class="img-circle">
</div>
<div class="col-md-7 col-lg-7 col-sm-7 col-xs-7">
<span class="menu-title">Cannoli</span>
<span class="menu-descp">pastry cream with strawberry balsamic and salted pistachios</span>
</div>
<div class="col-md-2 col-lg-2 col-sm-2 col-xs-2">
<span class="menu-item-price">
$ 48
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="my-work">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">Food Gallery</h2>
<h4 class="text-center">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000</h4>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img class="new" src="http://gdurl.com/czdE" alt="...">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="http://gdurl.com/czdE" alt="...">
</a>
</div>
</div>
</div>
</div>
<div class="newest-creations">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="creation-h2">OUR NEWEST CREATIONS</h2>
</div>
<div class="col-md-3">
<img class="create img-responsive" src="http://gdurl.com/czdE">
<h4>Contrary to popular belief</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</p>
<div class="newest">
<a class="btn">View Creation</a>
</div>
</div>
<div class="col-md-3">
<img class="create img-responsive" src="http://gdurl.com/czdE">
<h4>Contrary to popular belief</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</p>
<div class="newest">
<a class="btn">View Creation</a>
</div>
</div>
<div class="col-md-3">
<img class="create img-responsive" src="http://gdurl.com/czdE">
<h4>Contrary to popular belief</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</p>
<div class="newest">
<a class="btn">View Creation</a>
</div>
</div>
<div class="col-md-3">
<img class="create img-responsive" src="http://gdurl.com/czdE">
<h4>Contrary to popular belief</h4>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical</p>
<div class="newest">
<a class="btn">View Creation</a>
</div>
</div>
</div>
</div>
</div>
<div class="our-team">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="team-member">OUR AWESOME TEAM</h2>
</div>
<div class="col-md-3">
<img src="http://gdurl.com/IiYh" class="co-worker img-circle">
<h3>John Doe</h3>
<p class="skill"<em>Foreman</em></p>
<ul class="list-inline social-buttons">
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<img src="http://gdurl.com/IiYh" class="co-worker img-circle">
<h3>John Doe</h3>
<p class="skill"<em>Foreman</em></p>
<ul class="list-inline social-buttons">
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<img src="http://gdurl.com/IiYh" class="co-worker img-circle">
<h3>John Doe</h3>
<p class="skill"<em>Foreman</em></p>
<ul class="list-inline social-buttons">
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<img src="http://gdurl.com/IiYh" class="co-worker img-circle">
<h3>John Doe</h3>
<p class="skill"<em>Foreman</em></p>
<ul class="list-inline social-buttons">
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-2x"></i>
<i class="fa fa-linkedin fa-stack-1x"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="contact-us">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>BOOK A TABLE NOW</h2>
<h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</h4>
<div class="contact-btn">
<a class="btn">Make a Resevation</a>
</div>
</div>
</div>
</div>
</div>
<div class="info-section">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="info-box">
<div>
<i class="fa fa-envelope" aria-hidden="true"></i>
</div>
<h3>Contact Us</h3>
<p>something@restaurant.com<p>
</div>
</div>
<div class="col-md-4">
<div class="info-box">
<div>
<i class="fa fa-phone-square" aria-hidden="true"></i>
</div>
<h3>Call Us</h3>
<p>something@restaurant.com<p>
</div>
</div>
<div class="col-md-4">
<div class="info-box">
<div>
<i class="fa fa-map-o" aria-hidden="true"></i>
</div>
<h3>Our Location</h3>
<p>something@restaurant.com<p>
</div>
</div>
</div>
</div>
</div>
<div class="footer-section">
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,</p>
<p><a href="#">Read more.......</a></p>
</div>
<div class="col-md-3">
<div class="subscribe">
<h3>Subscribe</h3>
<p>Ut vel ultrices ligula. Curabitur consectetur lobortis velit, eget semper lobortis velit, eget semper</p>
<p>Ut vel ultrices ligula. Curabitur consectetur lobortis velit,</p>
<form role="form" class="subscribe-form">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter email to subscribe">
<span class="input-group-btn">
<button class="btn btn-theme-dark btn-lg" type="submit">Ok</button>
</span>
</div>
</form>
</div>
</div>
<div class="col-md-3">
<h3>Our hours</h3>
<p><span class="text-color">Monday: </span>Closed</p>
<p><span class="text-color">Tue-Wed :</span> 9:Am - 10PM</p>
<p><span class="text-color">Thu-Fri :</span> 9:Am - 10PM</p>
<p><span class="text-color">Sat-Sun :</span> 5:PM - 10PM</p>
</div>
<div class="col-md-3">
<h3>Contact Us</h3>
<p class="lead">
Ipsum Street, Lorem Tower, MO, Columbia, 302012
</p>
<p class="lead"><a href="#">+01 1800 100 1000</a></p>
<p><a href="#">info@resto.com</a></p>
</div>
</div>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="" alt="" />
</div>
</div>
</div>
</div>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe width="100%" height="350" src=""></iframe>
</div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script >//modal light box by https://bootsnipp.com/mouse0270
$(document).ready(function() {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function(event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});
//# sourceURL=pen.js
</script>
</body></html>
