index.html

<div class="public-contaniner index-panel">
    <div class="index-panel-header clearfloat">
<h3>Featured Dishes</h3>
<div class="line"></div>
<div class="btn-group">
<a href="" class="btn active"></a>
<a href="" class="btn"></a>
<a href="" class="btn"></a>
<a href="" class="btn"></a>
</div>
</div>
<div class="index-panel-body index-food-list">
<ul class="clearfloat">
<li class="food-item"><a href="" >
<img class="banner" src="images/demo2.png"></img>
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="star-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a><>
<li class="food-item"><a href="" >
<img class="banner" src="images/demo2.png"></img>
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="star-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a><>
<li class="food-item"><a href="" >
<img class="banner" src="images/demo2.png"></img>
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="star-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a><>
<li class="food-item"><a href="" >
<img class="banner" src="images/demo2.png"></img>
<div class="name">Fugiat nulla sint <span class="price">$30</span></div>
<div class="star-bar">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star nostar"></span>
</div>
</a><>
</ul>
</div>
</div>
<div class="public-contaniner index-panel">
<div class="index-panel-header clearfloat">
<h3> The Gallery</h3>
<div class="line"></div>
</div>
<div class="index-panel-body"></div>
</div> 

index.css

 .index-panel{
margin-top:200px;
}
.index-panel-header h3{
float:left;
margin-right:48px;
font-size:20px;
color:#ffff;
font-weight:normal;

}
.index-panel-header .line{
float:left;
margin-top:7px;
width:200px;
border-top:1px solid #e5e3e3;
}
.index-panel-header .btn-group{
font-size:0;
float:right;
}
.index-panel-header .btn{
display:inline-block;
margin-left:11px;
width:9px;
height:p9x;
background:#dedede;
border-radius:50%;
}
.index-panel-header  .active{
background:#9b9b9b;
}
.index-panel-body{
margin-top:75px;

}
.index-food-list{
overflow:hidden;
}
.index-food-list ul{
width:1160px;

}

.index-food-list .food-item{
float:left;
width:230px;
margin-right:60px;
}
.index-food-list .food-item .banner{
margin-bottom:30px;
height:202px;
}
.index-food-list .food-item .name{
color:#555;
margin-bottom:10px;
font-size:16px;
}
.index-food-list .food-item  .price{
float:right;
}
.index-food-list .food-item .star-bar{
font-size:0;
}
.index-food-list .food-item .star{
display:inline-block;
width:12px;
height:13px;
margin-right:5px;
background-image:url("../images/index-star.png");
background-repeat:no-repeat;
}
.index-food-list .food-item .nostar{
background-position:0 -13px;
}