<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="contact-pageheader">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="contact-caption">
<h1 class="contact-title">Don’t Be Shy, Talk to Me.</h1>
<p class="contact-text">Here is a few approaches to get in touch with me. It would be ideal if you send an email, fill the contact form <strong>I'm looking forward to speaking with you.</strong>
</p>
</div>
</div>
<div class="col-lg-offset-1 col-lg-5 col-md-offset-1 col-md-5 col-sm-12 col-xs-12">
<div class="contact-form">
<h3 class="contact-info-title">Contact Me</h3>
<div class="row">
<form>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label sr-only " for="Name"></label>
<input id="name" type="text" placeholder="Name" class="form-control" required>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label sr-only " for="email"></label>
<input id="email" type="text" placeholder="Email" class="form-control" required>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label sr-only " for="Phone"></label>
<input id="phone" type="text" placeholder="Phone" class="form-control" required>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label required sr-only" for="select"></label>
<select class="form-control">
<option value="">What Are You Getting In Touch?</option>
<option value="">Relationship</option>
<option value="">Life Coaching</option>
<option value="">Leadership</option>
<option value="">Time Management</option>
</select>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb20">
<div class="form-group">
<label class="control-label sr-only" for="textarea"></label>
<textarea class="form-control pdt20" id="textarea" name="textarea" rows="4" placeholder="Message"></textarea>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-6 col-xs-12">
<button class="btn btn-primary btn-lg ">Send message</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="space-medium">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mb60">
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<div id="contact-map"></div>
</div>
<div class="col-lg-offset-1 col-lg-5 col-md-offset-1 col-md-5 col-sm-6 col-xs-12">
<div class="">
<h3 class="title-bold">Contact Info</h3>
<p>Please help us serve you better by sharing the following information.
</p>
</div>
<div class="contact-section">
<div class="contact-icon"><i class="fa fa-map-marker"></i></div>
<div class="contact-info">
<p>951 Meadow View Drive Bristol, Hog Camp Road USA06010</p>
</div>
</div>
<div class="contact-section">
<div class="contact-icon"><i class="fa fa-phone"></i></div>
<div class="contact-info">
<p>+180-123-4567</p>
</div>
</div>
<div class="contact-section">
<div class="contact-icon"><i class="fa fa-envelope"></i></div>
<div class="contact-info">
<p>john@lifecoach.com</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
Created for <a href="https://goo.gl/NPfPMk" target="_blank">easetemplate</a>
</div></div>
</div>
</div>
<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/life-coach/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 Sans', sans-serif;
letter-spacing: 0px;
font-size: 18px;
color: #525756;
font-weight: 400;
line-height: 2;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #272d2c;
margin: 0px 0px 15px 0px;
font-weight: 400;
font-family: 'PT Sans', sans-serif;
}
h1 {
font-size: 42px;
line-height: 42px;
}
h2 {
font-size: 30px;
line-height: 32px;
}
h3 {
font-size: 24px;
line-height: 30px;
}
h4 {
font-size: 18px;
line-height: 26px;
}
h5 {
font-size: 16px;
font-weight: 400;
}
h6 {
font-size: 12px;
font-weight: 400;
}
p {
margin: 0 0 20px;
line-height: 1.6;
}
p:last-child {
margin: 0px;
}
ul,
ol {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #272d2c;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
a:focus,
a:hover {
text-decoration: none;
color: #f8591b;
}
sub {
bottom: 0em;
}
.lead {
font-size: 23px;
font-weight: 400;
line-height: 1.5;
font-family: 'PT Serif', serif;
color: #272d2c;
margin-bottom: 40px;
}
.form-group {
margin-bottom: 5px;
}
.form-control {
border-radius: 0px;
color: #6b6c6d;
font-size: 14px;
font-weight: 600;
width: 100%;
height: 52px;
padding: 0px;
line-height: 1.42857143;
border-top: transparent;
border-left: transparent;
border-right: transparent;
border-bottom: 1px solid #cbcfce;
background-color: transparent;
text-transform: uppercase;
letter-spacing: 0px;
margin-bottom: 10px;
-webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
box-shadow: inset 0 0px 0px rgba(0, 0, 0, .075);
}
.form-control:focus {
color: #34b2a4 !important;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
border-bottom-color: #34b2a4;
font-size: 12px;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
input[type=checkbox],
input[type=radio] {
margin: 8px 0 0;
margin-top: 12px;
line-height: normal;
}
input::-webkit-input-placeholder {
color: #6b6c6d !important;
}
input:focus::-webkit-input-placeholder {
color: #34b2a4 !important;
bottom: 20px;
position: relative;
}
textarea::-webkit-input-placeholder {
color: #6b6c6d !important;
}
textarea:focus::-webkit-input-placeholder {
color: #34b2a4 !important;
bottom: 20px;
position: relative;
font-size: 12px;
}
.input-group-addon {
background-color: transparent;
border: 1px solid #34b2a4;
border-radius: 0px;
}
.focus {
border-top: transparent;
border-left: transparent;
border-right: transparent;
border-bottom: 1px solid #cbcfce;
background-color: #fff;
}
.focus:focus {
border-top: transparent;
border-left: transparent;
border-right: transparent;
border-bottom: 1px solid #cbcfce;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.has-success .form-control {
border-color: #3c763d;
background-color: #fff;
box-shadow: none;
}
.has-success .form-control:focus {
border-color: #3c763d;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.has-error .form-control {
border-color: #a94442;
background-color: #fff;
box-shadow: none;
}
.has-error .form-control:focus {
border-color: #34b2a4;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.input-group-addon:last-child {
border-left: 0;
border-right: transparent;
border-top: transparent;
}
.input-group-addon i {
color: #34b2a4;
}
option {
color: #6b6c6d;
}
hr {
border-top: 1px solid #e4e9e8;
margin-bottom: 40px;
margin-top: 40px;
}
.mb60{margin-bottom:60px;}
.btn {
font-family: 'PT Sans', sans-serif;
font-size: 18px;
text-transform: capitalize;
font-weight: 600;
padding: 11px 30px;
border-radius: 6px;
line-height: 1.8;
letter-spacing: 0px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
word-wrap: break-word;
white-space: normal !important;
}
.btn-primary {
background-color: #f8591b;
color: #fff;
border: 1px solid #f8591b;
}
.btn-primary:hover {
background-color: #e64c10;
color: #fff;
border: 1px solid #e64c10;
}
.btn-primary.focus,
.btn-primary:focus {
background-color: #e64c10;
color: #fff;
border: 1px solid #e64c10;
}
.space-medium {
padding-top: 80px;
padding-bottom: 80px;
}
.pdt20 {
padding-top: 20px;
}
.contact-pageheader {
position: relative;
background: rgba(145, 238, 226, 1);
background: -moz-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(145, 238, 226, 1)), color-stop(22%, rgba(145, 238, 226, 1)), color-stop(31%, rgba(145, 238, 226, 1)), color-stop(39%, rgba(145, 238, 226, 1)), color-stop(71%, rgba(57, 196, 182, 1)), color-stop(100%, rgba(57, 196, 182, 1)));
background: -webkit-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%);
background: -o-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%);
background: -ms-linear-gradient(left, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%);
background: linear-gradient(to right, rgba(145, 238, 226, 1) 0%, rgba(145, 238, 226, 1) 22%, rgba(145, 238, 226, 1) 31%, rgba(145, 238, 226, 1) 39%, rgba(57, 196, 182, 1) 71%, rgba(57, 196, 182, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91eee2', endColorstr='#39c4b6', GradientType=1);
margin-bottom: 70px;
}
.contact-caption {
position: relative;
top: 180px;
}
.contact-title {
font-family: 'PT Serif', serif;
font-size: 50px;
font-style: italic;
margin-bottom: 40px;
line-height:80px;
}
.contact-caption-text {
font-size: 23px;
color: #272d2c;
}
#contact-map {
height: 450px;
width: 100%;
position: relative;
}
.contact-form {
background-color: #fff;
padding: 30px;
text-align: center;
position: relative;
bottom: 0px;
top: 100px;
-webkit-box-shadow: 1px 2px 14px 0px rgba(0, 0, 0, 0.29);
-moz-box-shadow: 1px 2px 14px 0px rgba(0, 0, 0, 0.29);
box-shadow: 1px 2px 14px 0px rgba(0, 0, 0, 0.29);
}
.contact-section {
margin-bottom: 40px;
margin-top: 40px;
padding-bottom: 30px;
border-bottom: 1px solid #e4e9e8;
}
.contact-section .contact-icon {
float: left;
margin-bottom: 20px;
display: inline-block;
font-size: 25px;
color: #34b2a4;
padding-right: 20px;
position: initial;
}
.contact-section .contact-info {
padding-top: 10px;
font-weight: 700;
}
.contact-social {}
.contact-social ul {}
.contact-social ul li {
float: left;
}
.contact-social ul li a {
font-size: 16px;
padding-right: 10px;
color: #6b6c6d;
}
.contact-social ul li a:hover {
color: #0084bf;
}
.location-block {
border-radius: 2px;
border: 1px solid #eaeaea;
padding: 30px;
margin-bottom: 20px;
background-color: #fff;
}
.location-content {}
.location-block ul {}
.location-block ul li {
line-height: 2.2;
font-size: 15px;
}
.location-icon {
color: #0084bf;
padding-right: 10px;
font-size: 15px;
}
