<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 ---------->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet">
<body>
<section class="about-area pt-60">
<div class="container">
<div class="row">
<div class="col-xl-12 mb-60">
<div class="section-title text-center">
<p>Famous for good food</p>
<h4>our menu</h4>
</div>
</div>
</div>
<div class="row menu_style1">
<div class="col-md-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-4.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-6.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-5.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-3.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-2.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-4.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-4.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-3.jpg" 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-4">
<div class="single_menu_list">
<img src="http://infinityflamesoft.com/html/restarunt-preview/assets/img/menu/menu-2.jpg" 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 class="row pb-60">
<div class="col-xl-12 text-center">
<div class="box_btn">
<a href="#">load more</a>
</div>
</div>
</div>
</div>
</section>
</body>
body {
font-family: 'Montserrat', sans-serif;
color: #333;
line-height: 1.6;
}
.pt-100{
padding-top:100px;
}
.pb-100{
padding-top:100px;
}
.mb-60 {
margin-bottom: 60px;
}
.section-title p {
font-size: 24px;
font-family: Oleo Script;
margin-bottom: 0px;
margin-top:50px;
}
.section-title h4 {
font-size: 40px;
text-transform: capitalize;
color: #FF5E18;
position: relative;
display: inline-block;
padding-bottom: 25px;
}
.section-title h4::before {
width: 80px;
height: 1.5px;
bottom: 0;
left: 50%;
margin-left: -40px;
}
.section-title h4::before, .section-title h4::after {
position: absolute;
content: "";
background-color: #FF5E18;
}
.single_menu_list img {
max-width: 30%;
position: absolute;
left: 0px;
top: 0;
border: 1px solid #ddd;
padding: 3px;
border-radius: 50%;
transition: .4s;
}
.menu_style1 .single_menu_list img {
position: static;
width: 100%;
display: block;
margin: 0 auto;
margin-bottom: 45px;
}
.single_menu_list h4 {
font-size: 20px;
border-bottom: 1px dashed #333;
padding-bottom: 15px;
margin-bottom: 10px;
}
.single_menu_list h4 span {
float: right;
font-weight: bold;
color: #FF5E18;
font-style: italic;
}
p {
font-weight: 300;
font-size: 14px;
}
.menu_style1 .single_menu_list {
text-align: center;
}
.single_menu_list:hover img {
border-radius: 0;
transition: .4s;
}