<div class="container">
<div class="wrap-list-foodMenu">
<div class="row list-foodMenu">
<div class="col-md-10 col-lg-6">
<!-- item foodMenu -->
<div class="item-foodMenu row" >
<div class="col-12 col-sm-2 img-list-foodMenu">
<a href="#"><img alt="foodMenu" src="https://www.tolmatol.com/uploads-images/menu-food/salad.png"></a>
</div>
<div class="col-12 col-sm-8 text-list-foodMenu ">
<div class="name-price row">
<div class="name-foodMenu col-12 col-sm-auto"><a class="hover-link-color" href="#">Pork ribollita</a></div>
<div class="line-foodMenu col">
<div class="add-line-run"></div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 info-foodMenu">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
</div>
<div class="price-foodMenu col-12 col-sm-2">$17.00</div>
</div>
</div>
</div>
<div class="row list-foodMenu">
<div class="col-md-10 col-lg-6">
<!-- item foodMenu -->
<div class="item-foodMenu row" >
<div class="col-12 col-sm-2 img-list-foodMenu">
<a href="#"><img alt="foodMenu" src="https://www.tolmatol.com/uploads-images/menu-food/salad.png"></a>
</div>
<div class="col-12 col-sm-8 text-list-foodMenu ">
<div class="name-price row">
<div class="name-foodMenu col-12 col-sm-auto"><a class="hover-link-color" href="#">Pine nut sbrisalona</a></div>
<div class="line-foodMenu col">
<div class="add-line-run"></div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 info-foodMenu">
Facilis dolore iusto minima ut at repellendus est
</div>
</div>
</div>
<div class="price-foodMenu col-12 col-sm-2">$20.00</div>
</div>
</div>
</div>
<div class="row list-foodMenu">
<div class="col-md-10 col-lg-6">
<!-- item foodMenu -->
<div class="item-foodMenu row" >
<div class="col-12 col-sm-2 img-list-foodMenu">
<a href="#"><img alt="foodMenu" src="https://www.tolmatol.com/uploads-images/menu-food/salad.png"></a>
</div>
<div class="col-12 col-sm-8 text-list-foodMenu ">
<div class="name-price row">
<div class="name-foodMenu col-12 col-sm-auto"><a class="hover-link-color" href="#">Charred octopus</a></div>
<div class="line-foodMenu col">
<div class="add-line-run"></div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 info-foodMenu">
eveniet dolorem, saepe. Et ratione libero quod ducimus saepe
</div>
</div>
</div>
<div class="price-foodMenu col-12 col-sm-2">$25.00</div>
</div>
</div>
</div>
<div class="row list-foodMenu">
<div class="col-md-10 col-lg-6">
<!-- item foodMenu -->
<div class="item-foodMenu row" >
<div class="col-12 col-sm-2 img-list-foodMenu">
<a href="#"><img alt="foodMenu" src="https://www.tolmatol.com/uploads-images/menu-food/salad.png"></a>
</div>
<div class="col-12 col-sm-8 text-list-foodMenu ">
<div class="name-price row">
<div class="name-foodMenu col-12 col-sm-auto"><a class="hover-link-color" href="#">Chocolate budino</a></div>
<div class="line-foodMenu col">
<div class="add-line-run"></div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 info-foodMenu">
nulla eum at, aliquid reiciendis.
</div>
</div>
</div>
<div class="price-foodMenu col-12 col-sm-2">$12.00</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&display=swap" rel="stylesheet">
<style>
.wrap-list-foodMenu {
padding-top: 50px;
padding-bottom: 100px;
}
.list-foodMenu>div {
padding-top: 12px;
padding-bottom: 12px;
}
.item-foodMenu {}
.img-list-foodMenu {
text-align: center;foodMenu
}
.img-list-foodMenu img {
width: 70px;
border-radius: 50%;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.img-list-foodMenu img:hover {
transform: translate(0,-4px);
box-shadow: 3px 4px 10px -5px #505050;
-moz-box-shadow: 3px 4px 10px -5px #505050;
-webkit-box-shadow: 3px 4px 10px -5px #505050;
-o-box-shadow: 3px 4px 10px -5px #505050;
-ms-box-shadow: 3px 4px 10px -5px #505050;
}
.name-foodMenu,.name-foodMenu>a {
padding-top: 8px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 21px;
color: #333333; font-weight: 500;
}
.hover-link-color:hover{
text-decoration: none;
color: #e52233;
}
.line-foodMenu{
border-bottom: 1px solid #c9c9c9;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 5px;
min-width: 0px;
padding: 0px;
}
.price-foodMenu {
padding-top: 8px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 22px;
color: #f44336; font-weight: 600;
}
.info-foodMenu {
padding-top: 8px;
font-family: OpenSans;
font-size: 14px;
color: #666666;
}
@media (max-width: 995px){
.img-list-foodMenu>a>img{float: right !important;}
.img-list-foodMenu, .text-list-foodMenu {
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 576px){
.img-list-foodMenu > a > img {float: unset !important;}
.img-list-foodMenu, .text-list-foodMenu, .price-foodMenu {
text-align: center !important;
}
.item-foodMenu {border-bottom: 1px solid #e4e4e4;}
.line-foodMenu {display: none;}
}
</style>