<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="title"> <h4><span>fresh food for good health</span>our menu</h4> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="single-menu"> <img src="https://via.placeholder.com/150" alt=""> <div class="menu-content"> <h4>chicken fried salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single-menu"> <img src="https://via.placeholder.com/150" alt=""> <div class="menu-content"> <h4>chicken fried salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single-menu"> <img src="https://via.placeholder.com/150" alt=""> <div class="menu-content"> <h4>chicken fried salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> <div class="col-md-6"> <div class="single-menu"> <img src="https://via.placeholder.com/150" alt=""> <div class="menu-content"> <h4>chicken fried salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single-menu"> <img src="https://via.placeholder.com/150" alt=""> <div class="menu-content"> <h4>chicken fried salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> <div class="single-menu"> <img src="https://via.placeholder.com/150" alt=""> <div class="menu-content"> <h4>chicken fried salad <span>$45</span></h4> <p>Aperiam tempore sit,perferendis numquam repudiandae porro voluptate dicta saepe facilis.</p> </div> </div> </div> </div> </div>

*{ margin:0; padding:0; box-sizing:border-box } @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body{ font-family: 'Poppins', sans-serif; } .title{ text-align:center; margin-bottom:60px; } .title h4{ text-transform:capitalize; font-size:36px; position:relative; display:inline-block; padding-bottom:10px; } .title h4 span{ display:block; font-size:18px; font-style:italic; margin-bottom:10px; } .title h4:before{ position:absolute; content:""; width:100px; height:2px; background-color:#ff7720; bottom:0; left:50%; transform:translateX(-50%); } .menu{ display:flex; flex-wrap:wrap; justify-content:space-between; } .single-menu{ flex-basis:580px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #ddd; } .single-menu:nth-child(5), .single-menu:nth-child(6){ border-bottom:0; } .single-menu{ display:flex; flex-direction:row; align-items:center; } .single-menu:hover img{ border-radius:0; } .single-menu img{ max-width:180px; margin-right:30px; border-radius:50%; border:1px solid #ddd; padding:3px; transition:.5s; } .single-menu h4{ text-transform:capitalize; font-size:22px; border-bottom:1px dashed #333; margin-bottom:5px; padding-bottom:5px; } .single-menu h4 span{ float:right; color:#ff7720; font-style:italic; }