"contact us"
Bootstrap 3.0.0 Snippet by karimsharf12252

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

Related: See More


Questions / Comments: