<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>Our Location</h4> <p>3481 Melrose Place, Beverly Hills <br> CA 90210</p> <h4>Call us on</h4> <p>(+1) 517 397 7100 <br> (+1) 617 497 8200</p> <h4>Send your message</h4> <p>Info@company.com.<br>admin@company.com</p> <h4>Our Working Hours</h4> <p>Mon-Fri 9.00AM to 5.00PM.</p> <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 CSS */ .contact-form, .contact-add-box { background-color: #dd3333 ; color:#fff; margin-bottom: 30px; padding: 30px; } .contact-section h4 { font-size: 24px; margin-bottom: 20px; color: #fff; font-weight: 600; text-transform: capitalize; } .form-control { height: 45px; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 0px; font-size: 16px; color: #fff; padding: 0 10px 0 20px; } .form-control::-moz-placeholder { color: yellow; font-size:14px; letter-spacing:1px; } .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: 18px; outline: none; } .contact-btn:hover { border: 2px solid #fff; background:green; } /* Contact Add CSS */ .contact-add-box {background:#fff; color:#000; letter-spacing:1px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);} .contact-add-box h4 {font-weight:700;font-size:16px; color:#333; margin:15px 0px 15px 0px;} .contact-add-box p {font-size:13px; color:#000;} /* Social CSS */ /* Social Icons */ .social-icons {margin:30px 0px 14px 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; }