Contact form with map

HTML
<div id='browser'> <div id='browser-bar'> <div class='circles'></div> <div class='circles'></div> <div class='circles'></div> <p>Contact formма</p> <span class='arrow entypo-resize-full'></span> </div> <div id='content'> <div id='left'> <div id='map'> <p>We are located here</p> <div class='map-locator'> <div class='tooltip'> <ul> <li> <span class='entypo-location'></span> <span class='selectedLocation'>Israel</span> </li> <li> <span class='entypo-mail'></span> <a href='mailto:Randomguy@gmail.com'>Randomguy@gmail.com</a> </li> <li> <span class='entypo-phone'></span> (+972 2) 629 06 32 </li> </ul> </div> </div> <div class='zoom'></div> </div> <ul id='location-bar'> <li> <a class='location' data-location='Israel' href='http://www.rudebox.org.ua/demo/contact-form-with-card-to-site-to-css3/israel.png'>Israel</a> </li> <li> <a class='location' data-location='USA' href='http://www.rudebox.org.ua/demo/contact-form-with-card-to-site-to-css3/usa.png'>USA</a> </li> <li> <a class='location' data-location='The Netherlands' href='http://www.rudebox.org.ua/demo/contact-form-with-card-to-site-to-css3/netherlands.png'>Netherlands</a> </li> <li> <a class='location' data-location='Singapore' href='http://www.rudebox.org.ua/demo/contact-form-with-card-to-site-to-css3/singapore.png'>Singapore</a> </li> </ul> </div> <div id='right'> <p>Social connections</p> <div id='social'> <a class='social'> <span class='entypo-facebook'></span> </a> <a class='social'> <span class='entypo-twitter'></span> </a> <a class='social'> <span class='entypo-linkedin'></span> </a> <a class='social'> <span class='entypo-gplus'></span> </a> <a class='social'> <span class='entypo-instagrem'></span> </a> </div> <form> <p>Contact us!</p> <input placeholder='mail' type='email'> <input placeholder='Topic' type='text'> <input placeholder='Message' type='textarea'> <input placeholder='Send' type='submit'> </form> <p>Our contacts</p> <p class='other entypo-mail'> <a href='mailto:coolcompany@gmail.com'>coolcompany@gmail.com</a> </p> <p class='other entypo-phone'>(044) 772 55 81</p> </div> </div> </div>
CSS
@import url(http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600); @import url(http://weloveiconfonts.com/api/?family=brandico|entypo); /* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; padding-right: 10px; } body { font-family: 'Open Sans', sans-serif; font-size: 100%; background: #829292; } *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; border: 0; } #controls { position: absolute; top: 7.6em; right: 1.5em; z-index: 10; background: #fff; padding: 1em 1em; opacity: .7; border-top: solid .4em #444; border-bottom: solid .4em #444; } #controls label { display: block; margin: 1em 0; } #controls label span { display: inline-block; min-width: 3.5em; } #controls label input { font-family: 'Montserrat'; font-size: 12pt; padding-bottom: .2em; width: 10em; border: none; border-bottom: solid 1px #999; color: #000; outline: none; webkit-appearance: none; } #controls p { text-align: right; font-size: 80%; margin: 1em 0 .5em 0; } #controls p.error { color: #b00; } ul { list-style: none; } a { color: white; text-decoration: none; } #browser { margin: 10px auto; color: white; width: 730px; -webkit-box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.5); } #browser-bar { background: #394141; width: 100%; padding: 8px; margin: 0 auto; font-weight: 300; font-size: 0.9em; position: relative; } #browser-bar p { text-align: center; } #browser-bar .circles { border-radius: 10px; height: 13px; width: 13px; background: #ff3434; float: left; margin-left: 7px; margin-top: 3px; } #browser-bar .circles:nth-of-type(2) { background: #ffdd33; } #browser-bar .circles:nth-of-type(3) { background: #67b678; } .arrow { position: absolute; right: 3px; top: 6px; font-size: 1.2em; color: #8e9699; } #content:after { content: ""; display: table; clear: both; } #content #left, #content #right { height: 100%; } #content #left { float: left; width: 500px; background: #7bc087; } #content #left #map { height: 388px; position: relative; background-image: url("http://www.rudebox.org.ua/demo/contact-form-with-card-to-site-to-css3/israel.png"); background-size: cover; } #content #left #map p { text-transform: uppercase; padding-top: 20px; padding-left: 30px; font-size: 0.9em; font-weight: 600; } #content #left #map .zoom { position: absolute; right: 25px; top: 25px; width: 2px; height: 70px; background: white; } #content #left #map .zoom:before, #content #left #map .zoom:after { text-align: center; font-weight: 600; position: absolute; color: #7bc087; background: white; width: 20px; } #content #left #map .zoom:before { content: '+'; top: -10px; right: -8px; } #content #left #map .zoom:after { content: '-'; bottom: -10px; right: -8px; } #content #left #map .map-locator { position: absolute; top: 40%; left: 30%; border-radius: 15px; height: 30px; width: 30px; background: rgba(0, 0, 0, 0.4); border: solid 2px white; } #content #left #map .map-locator:before { content: ''; position: absolute; top: 9px; left: 9px; width: 8px; height: 8px; background: white; border-radius: 5px; } #content #left #map .map-locator .tooltip { position: absolute; color: #394141; left: 50px; top: -10px; background: white; font-size: 0.8em; font-weight: 600; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } #content #left #map .map-locator .tooltip:before { content: ''; position: absolute; left: -10px; top: 14px; border-right: solid white 10px; border-top: solid transparent 8px; border-bottom: solid transparent 8px; } #content #left #map .map-locator .tooltip [class*="entypo-"] { min-width: 25px; display: inline-block; text-align: center; border-right: solid thin #CCC; margin-right: 5px; } #content #left #map .map-locator .tooltip li { border-bottom: solid thin #CCC; padding: 10px; white-space: nowrap; } #content #left #map .map-locator .tooltip li a { color: #51b2d6; } #content #left #map .map-locator .tooltip li:hover [class*="entypo-"] { color: #51b2d6; } #content #left ul#location-bar { width: 100%; text-align: center; display: table; } #content #left ul#location-bar li { display: table-cell; padding: 15px; background: #5fa269; border-right: solid thin #7fb587; } #content #left ul#location-bar li:last-of-type { border-right: 0; } #content #left ul#location-bar li:hover { background: #4c8254; } #content #left ul#location-bar .active { background: #4c8254; } #content #right { float: left; width: 230px; background: #454f4f; font-size: 0.75em; padding: 15px; } #content #right p { margin-bottom: 10px; text-transform: uppercase; } #content #right a:hover { color: #51b2d6; } #content #right #social { display: table; width: 100%; } #content #right .social { display: table-cell; text-align: center; } #content #right form { border-top: solid thin #8e9699; border-bottom: solid thin #8e9699; margin: 20px 0; padding: 20px 0; } #content #right form input { background: #394141; padding: 8px; margin-bottom: 8px; width: 100%; color: white; } #content #right form input:last-of-type { margin-bottom: 0; } #content #right form input[type='submit'] { text-transform: uppercase; background: #7bc087; width: 50%; color: white; } #content #right form input[type='submit']:hover { background: #58b068; -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } #content #right form input[type='textarea'] { min-height: 75px; vertical-align: text-top; } #content #right p.other { font-size: 0.7; margin-bottom: 5px; text-transform: lowercase; font-weight: 100; } #content #right p.other, #content #right p.other a { color: #8e9699; }
JAVASCRIPT
//Capture the click event on an location $("#location-bar a").click(function(event){ event.preventDefault(); $(this).parent().toggleClass('active'); var selectedMap = $(this).attr("href"); var selectedLocation = $(this).data('location'); //Update #map bkimage with the image from the location $('#map').css('background-image', 'url(' + selectedMap + ')'); //update tooltip address $('.selectedLocation').text(selectedLocation); });
Expand for more options Login