<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="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <div class="contact-section" > <div class="container"> <div class="row"> <div class="col-md-8 col-sm-12"> <div class="contact-form"> <form> <h4>leave a comment</h4> <div class="row"> <div class="comment-box"></div> <div class="col-md-6 form-group"> <input name="fname" class="form-control" placeholder="First Name" type="text"> </div> <div class="col-md-6 form-group"> <input name="lname" class="form-control" placeholder="Last Name" type="text"> </div> <div class="col-md-6 form-group"> <input name="subject" class="form-control" placeholder="Subject" type="text"> </div> <div class="col-md-6 form-group"> <input name="email" class="form-control" placeholder="Email" type="email"> </div> <label class="col-md-12 control-label" for="textarea"></label> <div class="col-md-12"> <textarea class="form-control" id="textarea" name="textarea"></textarea> </div> <div class="col-md-12 text-right"> <button class="contact-btn" type="submit">send message</button> </div> </div> </form> </div> </div> <div class="col-md-4 col-sm-12"> <div class="contact-add-box"> <h4>get in touch</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget leo.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget leo.</p> <ul class="address-details"> <li><i class="glyphicon glyphicon-cog"></i>25 hill street,London RTL NW.</li> <li><i class="glyphicon glyphicon-cog"></i>00 123 456 789.</li> <li><i class="glyphicon glyphicon-cog"></i>Info@webmail.com</li> </ul> <div class="social-icons"> <ul > <li><a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a> </li> <li><a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a> </li> <li> <a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a> </li> <li> <a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a> </li> </ul> </div> </div> </div> </div> </div> </div>

.contact-form, .contact-add-box { background-color: #EFEFEF; margin-bottom: 30px; padding: 30px; } .contact-section h4 { font-size: 24px; margin-bottom: 20px; color: #af0808; font-weight: 600; text-transform: capitalize; } .form-control { height: 45px; border: 1px solid #242424; border-radius: 0px; font-size: 16px; color: #242424; padding: 0 10px 0 20px; } .contact-form textarea.form-control { height: 140px; resize: inherit; border-radius: 0px; } .comment-box { color: #fff; font-size: 16px; line-height: 1.5em; font-weight: 500; text-transform: capitalize; } .contact-btn { border: 2px solid transparent; background-color: #AF0808; color: #fff; margin-top: 10px; padding: 10px 20px 10px 20px; font-size: 20px; outline: none; } .contact-btn:hover { border: 2px solid #242424; background:green; } /* Contact Add Box */ .address-details {margin-top:45px;margin-bottom:45px;} .contact-add-box ul { list-style:none; font-size:15px; font-weight:500; line-height:25px; } .contact-add-box i { color: #af0808; padding-right:10px; } /* Social Icons */ .social-icons {margin:48px 0px 48px 0px ;} .social-icons i{ margin-right: 10px; padding: 0px; font-size:35px; color:#323232; box-shadow: 0 0 3px rgba(0, 0, 0, .2); } .social-icons li {margin:0px;padding:0;display:inline-block;} #social-fb:hover { color: #3B5998; transition:all .001s; } #social-tw:hover { color: #4099FF; transition:all .001s; } #social-gp:hover { color: #d34836; transition:all .001s; } #social-em:hover { color: #f39c12; transition:all .001s; }