<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 ----------> <div class="wrapper"> <h1>contact the team</h1> <div class="postcard"> <div class="inner-postcard-left"> <h2>Send us a message</h2> <form> <input name="name" type="text" placeholder="First Name"> <input name="name" type="text" placeholder="Last Name"> <input name="name" type="text" placeholder="Email Address"> <textarea name="message" placeholder="Your Message"></textarea> <input name="send" type="button" value="send"> </form> </div><!-- /.inner-postcard-left --> <div class="inner-postcard-right"> <div class="thumbnail"> <p>please affix stamp here</p> </div><!-- /.thumbnail --> <div class="contactinfo"> <h2>postcard</h2> <p> If you have a lot to say please feel free to ping us an email at <a href="">hola@something.com</a>.</p> <p class="thanks">Thank You</p> </div> </div><!-- /.inner-postcard-right --> <div class="address"> <p><strong>Google Campus</strong> | 4-5 Bonhill Street | London EC2A 4BX</p> </div><!-- /.address --> </div><!-- /.postcard --> <iframe src="https://www.google.com/maps/d/embed?mid=zwWpMQnXB1RM.kc0PnJkc4NUg" width="298" height="336"></iframe> </div><!-- /.wrapper -->

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300|Courgette); body { margin: 0; color: #666; font-family: 'Roboto Slab', serif; font-weight: 400; } .wrapper { width: 960px; margin: 50px auto; overflow: hidden; } h1,h2 { font-weight: normal; text-transform: uppercase; letter-spacing: 0.1em; } h1 { font-size: 22px; text-align: center; } h2 { margin: 0 0 15px 0; font-size: 14px; text-align: left; } .postcard { float: left; width: 618px; height: 336px; border: 1px solid #ccc; margin: 20px 10px; } .inner-postcard-left { float: left; width: 268px; border-right: 1px solid #ccc; margin: 40px 0 30px 30px; } .inner-postcard-right { float: right; width: 269px; margin: 40px 30px 30px 0; } iframe { float: right; width: 298px; height: 336px; border: 1px solid #ccc; margin: 20px 10px; } form { color: #333; } input[type=text], textarea { width: 227px; padding: 5px; border: 1px solid #ccc; margin-bottom: 10px; font-family: 'Roboto Slab', serif; font-size: 10px; } input[type=button] { padding: 5px 8px; border: 1px solid #ccc; color: #333; background-color: #fff; font-family: 'Roboto Slab', serif; font-size: 12px; letter-spacing: 0.05em; cursor: pointer; text-transform: uppercase; } input[type=button]:hover { background-color: #eaeaea; } .thumbnail { float: right; width: 70px; height: 80px; border: 1px solid #ccc; } .thumbnail > p { font-size: 10px; line-height: 1.6; text-align: center; text-transform: uppercase; letter-spacing: 0.3em; } .contactinfo { float: right; width: 100%; margin-top: 10px; } .contactinfo p { padding: 2px; font-size: 12px; line-height: 1.5; } .thanks { padding-bottom: 0; font-family: 'Courgette', cursive; font-size: 18px !important; } img { display: block; max-width: 100%; } .address { width: 558px; margin-left: 30px; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: 0.5em; clear: both; } a:link, a:visited { color: #000; text-decoration: none; } a:hover { color: inherit; text-decoration: underline; }