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;
}