<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 ---------->
<header class="business-header bg-overlay CONTACT US ">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="detalis all holder image price">
<div class="detalis holder about image price">
<h2>CONTACT <span> US </span></h2>
</div>
<div class="detalis about image price">
<h2>LOREM IPSUM DOLOR</h2>
</div>
<div class="hr-title-holder about image price">
<div class="hr-title">
<hr>
</div>
</div>
</div>
<div class="contact holder ">
<p>Duis convallis vel urna et vestibulum. Suspendisse gravida lacinia tellus in rhoncus. Proin rutrum pulvinar nulla, ut sollicitudin lectus imperdiet vitae. Pellentesque portabi neque nisi.</p>
</div>
<div class="col-md-4 col-xs-12">
<div class="contact holder">
<input type="text" name="#" placeholder="NAME">
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="contact holder">
<input type="text" name="#" placeholder="ENTER EMAIL">
<button class="btn btn-block btn-primary" type="submit">Sign up</button>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="contact holder">
<input type="text" name="#" placeholder="ENTER PHONE NUMBER">
</div>
</div>
<div class="col-md-9 col-xs-12">
<ul id="topbar">
<li><a href="#" class="btn btn-primary btn-success holder "><span class="fa fa-home"></span>576 London Boulevard</a></li>
<li><a href="#" class="btn btn-primary btn-success holder"><span class="fa fa-phone"></span> New Asset</a></li>
<li><a href="#" class="btn btn-primary btn-success holder"><span class="fa fa-paper-plane"></span> New Asset</a></li>
</ul>
</div>
<div class="col-md-3 col-xs-12">
<ul class="social-media all">
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-youtube"></a></li>
<li><a href="#" class="fa fa-pinterest"></a></li>
<li><a href="#" class="fa fa-google"></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- end contact us -->
<!-- start the end -->
<header class="business-header bg-overlay end ">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-md-6 col-xs-12">
<div class="end holder animate shake">
<h2>Copyright © 2016<span> Design : Karim Sharf</span></h2>
</div>
</div>
<div class="col-md-6 col-xs-12">
<div class="row form-group">
<div class="input-group">
<input type="text" class="form-control holder" placeholder="Subscrilbe to our neWsletter">
<span class="input-group-addon success"><span class="send">send</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- end the end -->
/*start contact us*/
.bg-overlay.CONTACT.US {
margin-top: 30px;
height: 550px;
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),url('file:///C:/Users/NewVision/Desktop/new%20project/img/fitness9.jpg') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.contact.holder input{
width: 100%;
padding: 0px;
padding-left: 9px;
font-size: 20px;
background: rgba(14, 13, 14, 0.58);
border: 1px solid #d4145a;
padding: 4px 14px 6px 15px;
height: 51px;
}
.contact.holder p {
margin-top: 51px;
margin-bottom: 45px;
color: white;
padding-right: 9%;
padding-left: 9%;
font-size: 20px;
}
.detalis.all.holder.image.price {
margin-top: 54px;
}
.detalis.holder.about.image.price h2 {
color: #3f3939;
}
button.btn.btn-block.btn-primary {
margin-top: 30px;
width: 100%;
padding: 0px;
padding-left: 9px;
font-size: 20px;
background: rgb(212, 20, 90);
border: 1px solid #d4145a;
padding: 4px 14px 6px 15px;
height: 51px;
margin-bottom: 30px;
}
button.btn.btn-block.btn-primary:hover{
background:hsla(338, 83%, 45%, 0.85);
}
#topbar li{
list-style:none;
padding:10px;
display:inline-block;
float: left;
}
a.btn.btn-primary.btn-success.holder{
color: #fff;
background: none;
border: none;
color: darkgray;
font-size: 24px;
font-family: inherit;
}
a.btn.btn-primary.btn-success.holder:hover {
color: rgba(169, 169, 169, 0.79);
}
span.fa.fa-home {
margin-right: 12px;
font-size: 31px;
color: rgba(213, 208, 208, 0.86);
}
span.fa.fa-phone{
margin-right: 12px;
font-size: 31px;
color: rgba(213, 208, 208, 0.86);
}
span.fa.fa-paper-plane{
margin-right: 12px;
font-size: 31px;
color: rgba(213, 208, 208, 0.86);
}
a.fa.fa-twitter {
text-decoration: none;
color:#8f8c8c;
}
a.fa.fa-twitter:hover{
color:rgb(28, 82, 240);
}
a.fa.fa-facebook{
text-decoration: none;
color:#8f8c8c;
}
a.fa.fa-facebook:hover{
color: blue;
}
a.fa.fa-youtube{
text-decoration: none;
color:#8f8c8c;
}
a.fa.fa-youtube:hover{
color:red;
}
a.fa.fa-pinterest{
text-decoration: none;
color:#8f8c8c;
}
a.fa.fa-pinterest:hover{
color:red;
}
a.fa.fa-google {
text-decoration: none;
color:#8f8c8c;
}
a.fa.fa-google:hover{
color:red;
}
ul.social-media.all li {
list-style: none;
display: table-cell;
}
ul.social-media.all a {
width: 6px;
padding: 17px;
padding-right: 25px;
margin-top: 8px;
font-size: 30px;
}
/*end contact us*/
/*start the end*/
.bg-overlay.end {
height: 119px;
background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)),url('file:///C:/Users/NewVision/Desktop/new%20project/img/background1.jpg') center center no-repeat scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.end.holder h2 {
font-size: 20px;
color: rgb(125, 120, 120);
margin-top: 61px;
letter-spacing: 2px;
float: left;
}
.end.holder span {
color: #d4145a;
}
.input-group-addon.success {
color: rgb(255, 255, 255);
background-color: rgb(92, 184, 92);
border-color: rgb(76, 174, 76);
}
.row.form-group {
width: 79%;
margin-top: 43px;
float: right;
}
input.form-control.holder {
height: 45px;
border: 1px solid #d4145a;
background: rgba(43, 35, 35, 0.21);
border-radius: inherit;
font-size: 16px;
word-spacing: 1px;
letter-spacing: 2px;
}
.input-group-addon.success {
color: rgb(255, 255, 255);
background-color: rgb(212, 20, 90);
border-color: rgb(212, 20, 90);
font-size: 18px;
padding: 2px 23px;
border-radius: inherit;
}
.end.holder.animate.shake{
-webkit-animation-duration: 4s;
-webkit-animation-delay: 40s;
-webkit-animation-iteration-count: unset;
}
