<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="modal fade small-popup in" id="menu-filter" role="dialog" style="display: block; padding-right: 17px;">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="foodlistmodal-container">
<div class="option-holder">
<div class="foodchef-tab-container">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 foodchef-tab-menu">
<div class="list-group">
<a href="#" class="list-group-item text-center">
<h4 class="fa fa-filter"></h4><br>Main Heading
</a>
<a href="#" class="list-group-item text-center active">
<h4 class="fa fa-users"></h4><br>Put The Suitable Heading Here
</a>
<a href="#" class="list-group-item text-center">
<h4 class="fa fa-cubes"></h4><br>Put The Suitable Heading Here
</a>
<a href="#" class="list-group-item text-center">
<h4 class="fa fa-cutlery"></h4><br>The Main Heading
</a>
</div>
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="foodchef-tab">
<div class="foodchef-tab-content">
<div class="itemlistpopup">
<div class="col-sm-12">
<div class="single-item">
<div class="item-image">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/food.jpg" alt="image_alt">
</div>
<div class="item-info">
<span class="via">The Title <i class="circle-box"><span class="path1"><i class="fa fa-circle NonVeg"></i></span></i></span>
<span class="rate" data-rate="5">
<i class="fa fa-star"></i>4.3
</span>
</div>
<p class="item-quote">
This is a dummy text and can be changed as per your requirement.
</p>
<div class="item-price">
<!-- getting dish price html -->
<span class="pull-left"><i class="fa fa-usd"></i>220</span>
<span class="item-taste-content">Category</span>
</div>
</div><!-- /.single-item -->
</div>
<div class="col-sm-12">
<div class="single-item">
<div class="item-image">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/food.jpg" alt="image_alt">
</div>
<div class="item-info">
<span class="via">The Title <i class="circle-box"><span class="path1"><i class="fa fa-circle Veg"></i></span></i></span>
<span class="rate" data-rate="5">
<i class="fa fa-star"></i>4.3
</span>
</div>
<p class="item-quote">
This is a dummy text and can be changed as per your requirement.
</p>
<div class="item-price">
<!-- getting dish price html -->
<span class="pull-left"><i class="fa fa-usd"></i>220</span>
<span class="item-taste-content">Category</span>
</div>
</div><!-- /.single-item -->
</div>
</div>
</div>
<div class="foodchef-tab-content active">
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
</div>
<div class="foodchef-tab-content">
<div class="itemlistpopup">
<div class="col-sm-12">
<div class="single-item">
<div class="item-image">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/food.jpg" alt="image_alt">
</div>
<div class="item-info">
<span class="via">The Title <i class="circle-box"><span class="path1"><i class="fa fa-circle NonVeg"></i></span></i></span>
<span class="rate" data-rate="5">
<i class="fa fa-star"></i>4.3
</span>
</div>
<p class="item-quote">
This is a dummy text and can be changed as per your requirement.
</p>
<div class="item-price">
<!-- getting dish price html -->
<span class="pull-left"><i class="fa fa-usd"></i>220</span>
<span class="item-taste-content">Category</span>
</div>
</div><!-- /.single-item -->
</div>
<div class="col-sm-12">
<div class="single-item">
<div class="item-image">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/food.jpg" alt="image_alt">
</div>
<div class="item-info">
<span class="via">The Title <i class="circle-box"><span class="path1"><i class="fa fa-circle Veg"></i></span></i></span>
<span class="rate" data-rate="5">
<i class="fa fa-star"></i>4.3
</span>
</div>
<p class="item-quote">
This is a dummy text and can be changed as per your requirement.
</p>
<div class="item-price">
<!-- getting dish price html -->
<span class="pull-left"><i class="fa fa-usd"></i>220</span>
<span class="item-taste-content">Category</span>
</div>
</div><!-- /.single-item -->
</div>
</div>
</div>
<div class="foodchef-tab-content">
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
<article class="chef-list">
<div class="menu-box-image">
<a href="#" class="agent-box-image-inner">
<img src="http://gowebbi.in/demo44/foodzzap/popup-tab/images/chef.jpg" alt="img" class="img-circle">
</a>
</div>
<div class="entry-content">
<h6 class="entry-title"><a href="#">Chef Name</a></h6>
<div class="menu-description">
FoodZzap MasterChef
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
body {
color: #727272;
}
.foodlistmodal-container{
width: 100%;
margin: 0 auto;
border-radius: 2px;
overflow: hidden;
font-family: roboto;}
/* foodchef tab */
div.foodchef-tab-container{
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
-moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
div.foodchef-tab-menu{
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
div.foodchef-tab-menu div.list-group{
margin-bottom: 0;
}
div.foodchef-tab-menu div.list-group>a{
margin-bottom: 0;
}
div.foodchef-tab-menu div.list-group>a .fa,
div.foodchef-tab-menu div.list-group>a .fa {
color: #7C4DFF;
}
div.foodchef-tab-menu div.list-group>a:first-child{
border-top-right-radius: 0;
-moz-border-top-right-radius: 0;
}
div.foodchef-tab-menu div.list-group>a:last-child{
border-bottom-right-radius: 0;
-moz-border-bottom-right-radius: 0;
}
div.foodchef-tab-menu div.list-group>a.active,
div.foodchef-tab-menu div.list-group>a.active .fa,
div.foodchef-tab-menu div.list-group>a.active .fa{
background-color: #7C4DFF;
color: #ffffff;
border-color: #7C4DFF;
}
div.foodchef-tab-menu div.list-group>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #7C4DFF;
}
div.foodchef-tab-content{
background-color: #ffffff;
padding: 0 10px;
}
div.foodchef-tab div.foodchef-tab-content:not(.active){
display: none;
}
.fa:before {
font-size: 24px;
}
.foodchef-tab-container .list-group-item {
padding: 10px 5px;
border-radius:0px;
}
.foodchef-tab{ background-color: #f5f5f5;
float:left;
width:100%;
padding: 10px;
box-sizing:border-box;
}
.foodchef-tab .type-food{float: left;
width: 100%;
padding: 4px 0;}
.foodchef-tab .type-food p {
margin-bottom: 10px;
letter-spacing: 1px;
color: #7C4DFF;
text-align: left;
font-weight: 600;
}
.foodchef-tab .type-food p::before, .foodchef-tab .type-food p::after {
content: "";
padding: 0 5px;
margin: 0 10px;
border-bottom: 1px solid;
position: relative;
bottom: 9px;
}
.foodchef-tab-content article {
margin-bottom: 30px;
position: relative;
float:left;
width: 45%;
overflow: hidden;
background-color: #fff;
margin: 10px;
padding: 10px;
border-bottom: 2px solid #7C4DFF;
box-sizing:border-box;
}
.menu-box-image {
width: 88px;
height: 88px;
border-radius: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
border: 1px dashed #651FFF;
padding: 3px
}
.entry-title {
font-size: 16px;
font-family: "PT Sans", sans-serif;
overflow: hidden;
margin-bottom: 0;
line-height: 24px;
font-weight: bold;
}
.entry-title a {
color: #393939;
font-weight: 400;
font-size: 16px;
}
.agent-box-image-inner img{border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;}
.chef-list .entry-content {
padding: 10px 0;
text-align: center;
}
.menu-description {
font-size: 15px;
color: #72777b;
letter-spacing: 0.5px;
}
@media (min-width: 768px) {
#menu-filter .modal-dialog {
width: 700px;
margin: 30px auto;
left: 0;
}
}
@media (max-width: 767px) {
#menu-filter .modal-body {
padding: 10px;
}
}
.itemlistpopup .col-sm-12{padding:0;}
.itemlistpopup .single-item {
position: relative;
padding: 15px;
background: #ffffff;
overflow: hidden;
-webkit-box-shadow: 0 3px 0px 0px #7C4DFF;
-moz-box-shadow: 0 3px 0px 0px #7C4DFF;
box-shadow: 0 3px 0px 0px #7C4DFF;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin: 10px 0;
}
.itemlistpopup .single-item .item-image {
position: absolute;
}
.itemlistpopup .single-item .item-image img {
display: block;
width: 80px;
height: 80px;
margin: 0 auto;
border: 5px solid #fff;
-webkit-box-shadow: 0 4px 4px #ccc;
-moz-box-shadow: 0 4px 4px #ccc;
box-shadow: 0 4px 4px #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
max-width: 100%;
-webkit-filter: brightness(0.8);
filter: brightness(0.8);
}
.itemlistpopup .item-info {
padding: 5px 0;
}
.single-item .item-quote,
.single-item .item-info {
margin-left: 105px;
}
.single-item .item-info .via {
font-weight: 400;
padding-right: 8px;
font-size: 16px;
color:#393939;
}
.single-item .item-info .rate {
background: #333 none repeat scroll 0 0;
border-radius: 0;
color: #fff;
font-size: 13px;
line-height: 20px;
padding: 0 21px 0 5px;
position: absolute;
right: 10px;
top: 8px;
z-index: 2;
}
.single-item .item-info .rate .fa.fa-star {
color: #B388FF;
font-size: 13px;
position: absolute;
right: 5px;
top: 4px;
}
.single-item .item-info .via .circle-box {
font-size: 12px;
position: relative;
overflow:hidden;
vertical-align: text-bottom;
padding: 0 5px;
}
.fa-circle.Veg {
color: #295f05;
}
.fa-circle.NonVeg {
color: #ff0000;
}
.fa-circle{font-size: 9px;
background: #fff;
padding: 0 2px 1px;
border: 1px solid;}
.fa-circle:before{
font-size:9px;
}
.item-price .item-taste-content{ background-color: #dcdcdc;
border-radius: 0;
color: #403141;
display: inline-block;
font-size: 11px;
padding: 0 10px 2px;
margin: 10px 0 15px 43px;
}
.item-price .pull-left {
color: #7C4DFF;
margin: 15px 0;
}
.item-price .pull-left .fa-usd {
color: #7C4DFF;
margin: 0 5px 0 20px;
position: relative;
}
$(document).ready(function () {
$("div.foodchef-tab-menu>div.list-group>a").click(function (e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.foodchef-tab>div.foodchef-tab-content").removeClass("active");
$("div.foodchef-tab>div.foodchef-tab-content").eq(index).addClass("active");
});
});
