<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> <div class="contact7"> <div class="container"> <div class="text-center"> <h1>contact us</h1> <h3>get in touch today</h3> </div> <div class="col-md-6 col-md-push-3"> <div class="contact7-form"> <!-- Form --> <form role="form" action="#"> <div class="form-group"> <textarea class="form-control" rows="10" placeholder="your message" required></textarea> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="Name" required> </div> <div class="form-group"> <input type="email" class="form-control" placeholder="email" required> </div> <div class="form-group"> <input type="text" class="form-control" placeholder="phone" required> </div> <button type="submit" class="btn btn-default">send message</button> </form> <!-- /Form --> </div> </div> </div> <div class="contact7-bottom"> <div class="container"> <div class="row"> <div class="col-md-4"> <h2>get in touch</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa.</p> </div> <div class="col-md-4"> <h2> contact Details</h2> <p><i class="fa fa-home fa-lg"></i> 123 St. building rex, abc road, new york city, USA</p> <p><i class="fa fa-lg fa-phone"></i> (00) 123 456 7890</p> <p><i class="fa fa-lg fa-fax"></i> 00) 123 456 7890</p> <p><i class="fa fa-lg fa-globe"></i><a href="#"> www.xyz.com</a></p> <p><i class="fa fa-lg fa-envelope-o"></i><a href="#"> support@abcd.com</a></p> </div> <div class="col-md-4"> <h2> where to find us</h2> <div> <iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=15+Springfield+Way,+Hythe,+CT21+5SH&aq=t&sll=52.8382,-2.327815&sspn=8.047465,13.666992&ie=UTF8&hq=&hnear=15+Springfield+Way,+Hythe+CT21+5SH,+United+Kingdom&t=m&z=14&ll=51.077429,1.121722&output=embed"></iframe> </div> </div> </div> </div> </div> </div>

.contact7 { margin-top: 60px; margin-bottom: 20px; } .contact7 h1 { margin-top: 20px; margin-bottom: 20px; font-weight: 700; font-size: 40px; text-transform: capitalize; } .contact7 h3 { font-size: 20px; text-transform: lowercase; font-style: italic; } .contact7 .contact7-form { margin-top: 50px; margin-bottom: 100px; overflow: hidden; border: 5px solid #548ce9; border-radius: 10%; padding: 30px 30px 30px 30px; } .contact7 .contact7-form form { margin-top: 20px; margin-left: 20px; margin-right: 20px; margin-bottom: 20px; } .contact7 .contact7-form .form-control { background: transparent; border: 1px solid #c7c7c7; margin-top: 25px; margin-bottom: 25px; } .contact7 .contact7-form .btn-default { background-color: #548ce9; color: #fff; border-radius: 0; } .contact7 .contact7-form .btn-default:hover { background-color: #000; color: #fff; border-radius: 0; } .contact7 .contact7-bottom { background-color: #f5f5f5; } .contact7 .contact7-bottom h2 { margin-top: 20px; margin-bottom: 50px; } .contact7 .contact7-bottom p { font-size: 17px; } .contact7 .contact7-bottom a { text-decoration: none; } .contact7 .contact7-bottom i { margin-right: 5px; } @media only screen and (max-width: 420px){ .contact7 .contact7-form { border: 5px solid #548ce9; border-radius: 0%; padding: 10px 10px 10px 10px; } }