"Contact Page Design with Google Maps API"
Bootstrap 4.0.0 Snippet by Anita26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: