<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 -->

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;}