<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<!-- contact-section -->
<div class="contact-map-section">
<!-- contact-map -->
<div id="contact-map"></div>
<!-- /.contact-map -->
<!-- contact-info -->
<div class="contact-section">
<div class="container">
<div class="row">
<!-- contact-block -->
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-12 col-12 nopr nopl ">
<div class="card contact-block">
<div class="card-body">
<h3 class="mb0">make a Reservation</h3>
</div>
</div>
</div>
<!-- /.contact-block -->
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12 ">
</div>
<!-- contact-block -->
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-4 col-12 nopr nopl">
<div class="card contact-block">
<div class="card-body">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 ">
<div class="contact-icon"><i class="far fa-clock"></i></div>
</div>
<div class="col-xl-9 col-lg-9 col-md-6 col-sm-12 col-12 ">
<h6 class="card-title">Opening Hours</h6>
<p class="contact-small-text">Mon - Tue <span class="float-right"> Closed</span></p>
<p class="contact-small-text"> Wed - Thu <span class="float-right">6:00 - 10:00 Pm</span></p>
<p class="contact-small-text"> Fri - Sun <span class="float-right"> 5:30 - 10:00 Pm</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.contact-block -->
<!-- contact-block -->
<div class="col-xl-4 col-lg-4 col-md-6 col-sm-4 col-12 nopr nopl">
<div class="card contact-block">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 ">
<div class="contact-icon mt20"><i class="far fa-map"></i></div>
</div>
<div class="col-xl-9 col-lg-9 col-md-6 col-sm-12 col-12 ">
<div class="card-body">
<h6 class="card-title">Contact Info</h6>
<p class="contact-small-text">463 Lyon Avenueord, Us 01757</p>
<p class="contact-small-text">info@kitchen.com</p>
<p class="contact-small-text">+ 180 - 123 - 4567</p>
</div>
</div>
</div>
</div>
</div>
<!-- /.contact-block -->
<!-- contact-block -->
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-4 col-12 nopr nopl ">
<div class="card contact-block contact-btn">
<div class="card-body">
<a href="#" class="btn btn-default btn-block">Make A Reservation</a>
</div>
</div>
</div>
<!-- /.contact-block -->
</div>
</div>
</div>
<!-- /.contact-info -->
</div>
<!-- /.contact-section -->
<div class="container"
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center mt20">
Created for <a href="https://goo.gl/jpoZin" target="_blank">easetemplate</a>
</div></div>
</div>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script>
function initMap() {
var uluru = {
lat: 23.094197,
lng: 72.558148
};
var map = new google.maps.Map(document.getElementById('contact-map'), {
zoom: 14,
center: uluru,
scrollwheel: false
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
icon: 'https://easetemplate.com/free-website-templates/kitchen/images/map_marker.png'
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBZib4Lvp0g1L8eskVBFJ0SEbnENB6cJ-g&callback=initMap">
</script>
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-family: 'PT Serif', serif; letter-spacing: 0px; font-size: 16px; color: #484337; font-weight: 400; line-height: 30px; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; color: #181714; margin: 0px 0px 15px 0px; font-family: 'Overpass', sans-serif; text-transform: uppercase; letter-spacing: 1px; }
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { margin: 0 0 20px; line-height: 1.8; font-style: italic; }
p:last-child { margin: 0px; }
ul, ol { font-style: italic; }
a { text-decoration: none; color: #181714; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
a:focus, a:hover { text-decoration: none; color: #1c5155; }
#contact-map { height: 505px; width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.contact-map-section { position: relative; }
.contact-pageheader { background: url(../images/contact_pageheader.jpg)no-repeat; background-position: top center; background-size: cover; padding-top: 180px; padding-bottom: 180px; position: relative; }
.contact-wrapper { border: 1px solid #ededed; border-radius: 8px; position: relative; bottom: 120px; }
.contact-block { padding: 35px; border: 1px solid #e3d9c3;
background-color: #fff; margin-bottom: -1px; margin-left: -1px; }
.contact-section { position: absolute; margin-bottom: 0px; left: 21%; bottom: 1px; }
.contact-content { }
.contact-icon { font-size: 40px; color: #6f9496; margin-bottom: 20px; }
.contact-small-text { margin-bottom: 0px; font-size: 14px; }
.contact-btn { padding-top: 53px; padding-bottom: 54px; }
.contact-form { background-color: transparent; border: 1px solid #e3d9c3; padding: 40px; margin-bottom: 20px; }
.nopr { padding-right: 0px; }
.nopl { padding-left: 0px; }
.card{border-radius:0px;}
.btn { font-family: 'PT Serif', serif; font-size: 16px; text-transform: capitalize; font-weight: 400; padding: 15px 30px; letter-spacing: 0px; border-radius: 0px; line-height: 2; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; word-wrap: break-word; white-space: normal !important; }
.btn-default { background-color: transparent; color: #1c5155; border: 2px solid #1c5155; }
.btn-default:hover { background-color: #1c5155; color: #fff; border: 2px solid #1c5155; }
.btn-default.focus, .btn-default:focus { background-color: #1c5155; color: #fff; border: 2px solid #1c5155; box-shadow: 0 0 0 0.2rem rgb(28, 81, 85); }
.mt20{margin-top:20px;}
.mb0{margin-bottom:0px;}
