December 7, 2021

Restaurant menu design

<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">&#36;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">&#36;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">&#36;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">&#36;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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *