<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 ----------> <div class="contact-wrap"> <div class="container"> <div class="contact-details clearfix"> <h2>fujifilm philippines</h2> <div class="row"> <div class="col s12 m5"> <div class="contact-other"> <p>30/F Oakwood Premier Joy-Nostalg Center No. 17 ADB Avenue, Ortigas Center, Pasig City 1600, Philippines.</p> </div> <div class="contact-other"> <i class="fa fa-phone"><span class="hide">hidden</span></i> <p>+63 (02) 550-2420</p> </div> </div> <div class="col s12 m4"> <div class="contact-other"> <i class="fa fa-envelope-o"><span class="hide">hidden</span></i> <p>info.philippines@fujifilm.com</p> </div> <div class="contact-other"> <i class="fa fa-internet-explorer"><span class="hide">hidden</span></i> <a href="http://fujifilm.com.ph">http://fujifilm.com.ph</a> </div> </div> <div class="col m3 hide-on-small-only"> <div class="contact-other img"> <img src="https://image.ibb.co/d0z4i5/placeholder.png" alt="" /> </div> </div> </div> </div> <div class="contact-form-map"> <div class="row"> <div class="col m6 push-m6 s12"> <div id="map"></div> </div> <div class="col m6 pull-m6 s12"> <form class="contact-form" autocomplete="off" method="get"> <div class="input-field"> <i class="material-icons prefix">person</i> <input id="icon_prefix" type="text" class="validate"> <label for="icon_prefix" data-error="incomplete">Complete Name</label> </div> <div class="input-field"> <i class="material-icons prefix">email</i> <input id="email" type="email" class="validate"> <label for="email" data-error="incorrect email address">Email</label> </div> <div class="input-field"> <i class="material-icons prefix">mode_edit</i> <textarea id="textarea" class="materialize-textarea"></textarea> <label class="textarea-label" for="textarea" data-error="please write your message">Textarea</label> </div> <div class="input-wrap"> <input type="checkbox" id="d"> <label for="d">You agree on our terms and conditions</label> </div> <div class="input-wrap"> <button id="confirm" type="submit">Submit</button> </div> </form> </div> </div> </div> </div> </div> <script> $('#d').change(enableBtn); $('.input').blur(enableBtn); function enableBtn() { if ($('#d').is(':checked') == false || $('.input-field').parent('.input-wrap').hasClass('invalid') == true || $('.input').val().length < 2) { $("#confirm").prop("disabled", true); } else { $("#confirm").prop("disabled", false); } } enableBtn(); google.maps.event.addDomListener(window, 'load', init); function init() { var mapOptions = { // How zoomed in you want the map to start at (always required) zoom: 11, // The latitude and longitude to center the map (always required) center: new google.maps.LatLng(40.6700, -73.9400), // New York // How you would like to style the map. // This is where you would paste any style found on Snazzy Maps. styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"simplified"},{"gamma":"1.00"}]},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"lightness":"-53"},{"color":"#535353"}]},{"featureType":"administrative.province","elementType":"labels.text.fill","stylers":[{"color":"#ffe8e8"},{"saturation":"100"},{"lightness":"-14"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"color":"#ee3131"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"color":"#e57878"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"visibility":"simplified"},{"lightness":"65"},{"saturation":"-100"},{"hue":"#ff0000"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"simplified"},{"saturation":"-100"},{"lightness":"80"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"poi.attraction","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway.controlled_access","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#e7c8c8"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#ee3131"},{"saturation":"-100"}]},{"featureType":"transit.station","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#ee3131"},{"visibility":"simplified"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"hue":"#ff0000"}]},{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#e3e3e3"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#ee3131"}]}] }; // Get the HTML DOM element that will contain your map // We are using a div with id="map" seen below in the <body> var mapElement = document.getElementById('map'); // Create the Google Map using our element and options defined above var map = new google.maps.Map(mapElement, mapOptions); // Let's also add a marker while we're at it var marker = new google.maps.Marker({ position: new google.maps.LatLng(40.6700, -73.9400), map: map, title: 'Fujifilm Philippines' }); } </script>

.contact-wrap { padding: 40px 0; font-family: 'roboto'; background:url("https://www.toptal.com/designers/subtlepatterns/patterns/light_grey.png") repeat; } .contact-wrap .contact-details { background:#e3e3e3; color:#5f5f5f; padding:30px 25px 10px; margin-bottom: 40px; } .contact-wrap .contact-details h2 { text-transform:uppercase; margin: 0 0 15px; font-size:30px; font-weight:bold; color:#000; } .contact-wrap .contact-other i, .contact-wrap .contact-other a{ display: inline-block; margin-right: 10px; color:#dd183f; } .contact-wrap .contact-other.img { text-align: center; } .contact-wrap .contact-other.img img{ max-width:55%; } .contact-wrap .contact-other p{ display: inline-block; margin: 0 0 10px; font-size:15px } .contact-form button { background: #ff4081; border: none; border-radius: 2px; color: #fff; height: 36px; padding: 0px 15px; font-size: 14px; font-weight: 500; text-transform: uppercase; text-align: center; line-height: 36px; vertical-align: middle; font-family: 'Roboto', sans-serif; margin-top: 20px; } .contact-form button i { color: #fff; } .contact-form button[disabled] { background: #ddd; color: #757575; } #map { width: 100%; height: 400px; } @media (max-width:600px) { #map {height:200px;margin-bottom: 20px;} }