![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpglaKk_XjGzpwn4iT7mKEtYmQa7V9k4VmaX0j1XFhbBMOThPGNvEmtL67pDQWGqOwS_vS-5Jb2ahYrU89otx4tIzTfealbyc6YazR4epR463zoP4c0Rau1yXAFhD6ZBEH3hRaOAsgZgJG/s320/PicsArt_04-17-07.04.00.jpg)
BalrajTemplates
<div class="container"> <div style="text-align:center"> <h2>Contact Us</h2> <p>Swing by for a cup of coffee, or leave us a message:</p> </div> <div class="row"> <div class="column"> <div id="map" style="width:100%;height:500px"></div> </div> <div class="column"> <form action="/action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <label for="country">Country</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> <label for="subject">Subject</label> <textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea> <input type="submit" value="Submit"> </form> </div> </div> </div> <!-- Initialize Google Maps --> <script> function myMap() { var myCenter = new google.maps.LatLng(51.508742,-0.120850); var mapCanvas = document.getElementById("map"); var mapOptions = {center: myCenter, zoom: 12}; var map = new google.maps.Map(mapCanvas, mapOptions); var marker = new google.maps.Marker({position:myCenter}); marker.setMap(map); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script> <!-- To use this code on your website, get a free API key from Google. Read more at: https://www.balraj-uk.blogspot.com/graphics/google_maps_basic.asp -->
BalrajTemplates, Mastering Technical SEO The Ultimate Guide to Using Tools for Agencies,How To Get Google To Index And Ranking Your Site Faster Crawling Blogger Template,BloggerTemplates.* { box-sizing: border-box; } /* Style inputs */ input[type=text], select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #4CAF50; color: white; padding: 12px 20px; border: none; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } /* Style the container/contact section */ .container { border-radius: 5px; background-color: #f2f2f2; padding: 10px; } /* Create two columns that float next to eachother */ .column { float: left; width: 50%; margin-top: 6px; padding: 20px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .column, input[type=submit] { width: 100%; margin-top: 0; } }
No comments:
Post a Comment