"contact"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <body><div class="container"> <section class="section1"> <div class="sec1title"> <h1>Get in touch</h1> </div> </section> <section class="section2"> <div class="contactform"> <h5>Drop us a line...</h5> <form action="#"> <label for="firstname"> <i class="cntfrmicn fa fa-user"></i> <input name="firstname" class="form-fields" type="text"> </label> <label for="email"> <i class="cntfrmicn fa fa-envelope"></i> <input name="email" class="form-fields" type="text"> </label> <label for="contact"> <i class="cntfrmicn fa fa-phone"></i> <input name="contact" class="form-fields" type="text"> </label> <label for="textarea"> <i class="cntfrmicn fa fa-comment"></i> <textarea class="form-fields" name="textarea" id="" cols="30" rows="10"></textarea> </label> <button class="form-fields button" value="Send" type="submit">Send <i class="fa fa-paper-plane"></i></button> </form> </div> <script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div class="contmap" style='overflow:hidden;height:550px;width:100%;'><div id='gmap_canvas' style='height:100%;width:100%;'></div><div><small><a href="http://embedgooglemaps.com"> embed google maps </a></small></div><div><small><a href="http://freedirectorysubmissionsites.com/">free web directories</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(19.075314480255834,72.88153973865361),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(19.075314480255834,72.88153973865361)});infowindow = new google.maps.InfoWindow({content:'<strong>My Location</strong><br>mumbai<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script> </section> </div> </body>
* { margin:0px; padding:0px; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { display: table; content: ''; } .clearfix:after { clear: both; } body { background: #ffffff; color: #333; font-weight: normal; font-size: 1em; font-family: 'Roboto', Arial, sans-serif; } input:focus, textarea:focus, keygen:focus, select:focus { outline: none; } ::-moz-placeholder { color: #666; font-weight: 300; opacity: 1; } ::-webkit-input-placeholder { color: #666; font-weight: 300; } /* contact from design */ .container { padding: 20px 50px 70px; } .sec1title { text-align: center; } .sec1title h1 { font-size: 40px; margin: 25px; text-transform: uppercase; color: #16F1D4; font-weight: 400; } .section2 { position: relative; overflow: hidden; } .section2 .contactform { position: absolute; top: 0; right: 10%; z-index: 99; background: #393939; padding: 30px 40px 70px; box-sizing: border-box; } .section2 .contactform input.form-fields, .section2 .contactform button.form-fields, .section2 .contactform textarea.form-fields { padding: 0 0 0 40px; display: block; box-sizing: border-box; width: 350px; font-size: 16px; background: #323232; margin: 7px 0; border: 1px solid #00C1A8; color: #6BECDB; opacity: 0.5; min-height: 45px; text-shadow: none; position: relative; } .section2 .contactform textarea.form-fields { padding: 8px 40px; resize: none; } .section2 .contactform button.form-fields.button { color: #16F1D4; font-size: 14px; padding: 0; text-transform: uppercase; } .section2 .contactform button.form-fields.button:hover { background: #00C1A8; color: #fff; cursor: pointer; opacity: 1; } .section2 .contactform button.form-fields.button i { margin-left:10px; } .section2 .contactform h5 { color: #16F1D4; font-size: 16px; margin-bottom: 15px; } .section2 .contactform label .cntfrmicn { color: #00C1A8; padding: 14px; position: absolute; z-index: 99; } @media only screen and (max-width: 660px) { .container { padding: 10px 20px 30px; } .contmap { height: 475px !important; } .sec1title h1 { font-size: 28px; } .section2 .contactform { padding: 10px; right: 0; width: 100%; } .section2 .contactform input.form-fields, .section2 .contactform button.form-fields, .section2 .contactform textarea.form-fields { width: 100%; } }

Related: See More


Questions / Comments: