"Contact Us Page Design witn Fontawsome Icon"
Bootstrap 3.0.0 Snippet by Divscodebd

Post to Facebook Tweet this

<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 ----------> <html> <head> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body> <section> <div class="container"> <div class="col-md-4"> <iframe class="my-video" src="https://www.youtube.com/embed/_kvp5phEGLE" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div> <div class="col-md-4"> <iframe class="my-video" src="https://www.youtube.com/embed/NAbuWCcGPG4" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div> <div class="col-md-4"> <iframe class="my-video" src="https://www.youtube.com/embed/mc3aTxClUAk" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe> </div> <div class="col-md-12"> </div> </div> </section> <section class="welcome-website"> <div class="container"> <div class="row mar-top-30"> <div class="col-sm-4"> <div class="box text-center contact-us-box"> <div class="incon-box"> <i class="fa fa-map" aria-hidden="true"></i> </div> <h3 class="box-tittle">Our Location </h3> <p class="box-text">350 Fifth Avenue, 34th floor New York NY 10118-3299 USA</p> </div> </div> <div class="col-sm-4"> <div class="box text-center contact-us-box"> <div class="incon-box"> <i class="fa fa-phone" aria-hidden="true"></i> </div> <h3 class="box-tittle">Contact Us Anytime</h3> <p class="box-text">Mobile: (+1) 800 555 888 </p> <p class="box-text">Fax: (+1) 800 666 999 </p> </div> </div> <div class="col-sm-4"> <div class="box text-center contact-us-box"> <div class="incon-box"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </div> <h3 class="box-tittle">Write Some Words</h3> <p class="box-text">Support24/7@domain.com</p> <p class="box-text">Info@domain.com</p> </div> </div> </div> </div> </section> <section class="latest-area-blog"> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 text-center"> <div class="section-title"> <h2> Leave a <span>Message</span></h2> </div> </div> </div> <div class="row mar-top-30"> <div class="col-md-6"> <div class="panel panel-default panel-box"> <div class="panel-body"> <form> <div class="row"> <div class="col-md-6"> <div class="form-group contact-form"> <label for="email">Email address:</label> <input type="email" class="form-control" id="email"> </div> </div> <div class="col-md-6"> <div class="form-group contact-form"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd"> </div> </div> </div> <div class="form-group contact-form"> <label for="comment">Comment:</label> <textarea class="form-control" rows="5" id="comment"></textarea> </div> <button type="submit" class="btn btn-default send-btn">Submit</button> </form> </div> </div> </div> <div class="col-md-6"> <div class="panel panel-default panel-box"> <div class="panel-body"> <iframe class="iframe-map" src="https://www.google.com/maps/embed?pb=!1m17!1m11!1m3!1d855.6786703104566!2d90.3633005235195!3d23.806705209025257!2m2!1f0!2f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c0d8c70a5c45%3A0x97e74920666ff64!2sDevsZone!5e1!3m2!1sen!2sbd!4v1510729160411" frameborder="0" style="border:0" allowfullscreen=""></iframe> </div> </div> </div> </div> </div> </section> </body> </html>
/********************************/ .welcome-website { padding: 50px 0px; background: #f5f5f5; } .box { cursor: pointer; box-shadow: 0px 2px 10px -4px #333745; padding: 20px 0px; margin-bottom: 20px; background: #fff; } .incon-box i { font-size: 35px; color: #fff; background: #00137f; height: 55px; width: 55px; line-height: 50px; border: 3px solid transparent; transition: all .4s ease-in; } .my-video{ width:100%; } .box-tittle { font-size: 20px; text-transform: uppercase; color: #333745; line-height: 60px; } .box:hover .incon-box i { background: #fff; border: 3px solid #00137f; color: #00137f; transition: all .4s ease-in; } /********Cotact Us Box ************/ .contact-us-box { position: relative; margin-top: 25px; padding: 50px; } .contact-us-box .incon-box { position: absolute; top: -20px; left: 40%; } . .contact-form label { color: #00137f; } .contact-form input { height: 40px; border-radius: 0px; } .contact-form textarea { border-radius: 0px; } .iframe-map { width: 100%; height: 300px; } .section-title h2 { font-size: 30px; color: #222; position: relative; padding-bottom: 10px; } .panel-box { border-radius: 0px!important; } .section-title h2 span { color: #00137f; } .send-btn{ background: #00137f; border: 1px solid #00137f; border-radius: 0; color: #FFFFFF; display: block; font-family: 'Roboto', sans-serif; padding: 12px 45px; }

Related: See More

Vuetify Material Dashboard
Simple & Clean 404 Error Page Design
Bootstrap 4 Navbar with Icon Top
Hamburger Icon Animations

Questions / Comments: