<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="container"> <div class="row"> <div class="col-md-7"> <h1 class="title">Get in touch with us.</h1> <p class="subtitle">We appreciate all feedback we receive – positive and constructive - and love to hear what you think about our programmes and services. </p> </div> </div> <div class="row map-form"> <div class="col-md-7"> <form class="form"> <div class="form__row"> <input type="text" class="form__field" name="name" id="name" required> <span class="floating-label">Full Name</span> </div> <div class="form__row"> <input type="text" class="form__field" name="email" id="email" required> <span class="floating-label">Email Address</span> </div> <div class="form__row"> <input type="text" class="form__field" name="phone" id="phone" required> <span class="floating-label">Phone Number with Country Code</span> </div> <div class="form__row"> <label class="form__title" for="job-function">Subject</label> <select class="form__field form__field--select" name="job-function" required> <option value="" selected="selected">Select a Subject</option> <option value="op1">Subject 1</option> <option value="op2">Subject 2</option> <option value="op3">Subject 3</option> <option value="op4">Subject 4</option> </select> </div> <div class="form__row"> <label class="form__title">Message</label> <textarea class="form__message" name="text" placeholder="Enter your message for us here. We will get back to you within 2 business days." required></textarea> </div> <input class="form__submit" type="submit" value="Send Message"> </form> </div> <div class="col-md-5"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10119.185074069741!2d29.031845602028582!3d41.05911758161741!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6477d93f7badc778!2sTRT+World!5e0!3m2!1str!2str!4v1496302367803" width="100%" height="320" frameborder="0" style="border:0" allowfullscreen></iframe> <h2>Contact Details</h2> <h3>Address</h3> <p>TRT World Headquarters Ahmet Adnan Saygun Street No:83<br> 34347 Ulus, Besiktas<br> İstanbul / TURKEY</p> <div class="col-md-5 col-sm-6" style="padding-left:0px;"> <h3>Telephone</h3> <p>+90 (212) 326 3000<br> +90 (212) 403 4600</p> </div> <div class="col-md-5 col-sm-6" style="padding-left:0px;"> <h3>Email</h3> <p>enquiry@trtworld.com<br> pr@trtworld.com</p> </div> </div> </div> </div>

.title{ font-size:36px; opacity:0.87; font-weight:bold; line-height:1.5; letter-spacing:-0.4px; color:#1e1e1e; margin:0; font-family:Produkt; } .subtitle{ font-size:20px; line-height:1.6; opacity:0.87; color:#1e1e1e; margin:20px 0px 0px 0px; font-family: AktivGrotesk; } .map-form{ margin-top:40px; } .map-form h2{ margin:30px 0px 0px 0px; font-size:24px; line-height:1.5; font-weight:bold; opacity:0.5; letter-spacing:-0.4px; color:#1e1e1e; font-family:Produkt; } .map-form h3{ margin:20px 0px 0px 0px; font-size:16px; font-weight:500; line-height:1.5; color:#1e1e1e; opacity:0.5; font-family:Produkt; } .map-form p{ margin:10px 0px 0px 0px; opacity:0.87; font-size:16px; line-height:1.5; color:#1e1e1e; font-family: AktivGrotesk; } .map-form .form { padding:20px; background-color:#f0f0f2; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25); margin-bottom:20px; } .map-form .form__row { position: relative; margin-bottom: 20px; } .map-form .form__field { display: block; width: 100%; color: #1e1e1e; height: 50px; position: relative; padding: 10px 8px 8px 8px; border: 1px solid #8f8f8f; text-indent: 0; -webkit-appearance: none; border-radius: 3px; font-family: AktivGrotesk; } .map-form input:focus ~ .floating-label, .map-form input:not(:focus):valid ~ .floating-label{ top: 2px; left: 8px; font-size: 10px; font-family: AktivGrotesk; opacity: 1; font-weight:bold; line-height:1.6; color:#00b6ca; } .map-form .floating-label { position: absolute; pointer-events: none; left: 11px; top: 11px; transition: 0.2s ease all; color:#1e1e1e; opacity:0.5; line-height:1.5; font-size:16px; font-family: AktivGrotesk; } .map-form .form__field:focus { outline: 0; } .map-form .form__field--select { padding: 8px; color: #8f8f8f; width:auto; cursor:pointer; height:40px; min-width:126px; } .map-form option { color: #333; } .map-form .form__submit { padding: 8px 24px; text-align: center; line-height: 1.5; background-color: #00b6ca; color: #f0f0f2; cursor: pointer; border: 0; outline: 0; transition: all 0.3s ease-in-out; font-size: 16px; font-weight: bold; font-family: AktivGrotesk; } .map-form .form__title{ font-size:14px; font-weight:bold; line-height:1.43; color:#1e1e1e; opacity:0.5; margin-bottom:10px; font-family: AktivGrotesk; } .map-form .form__message{ width: 100%; font-size: 16px; line-height: 1.5; color: #1e1e1e; border: solid 1px #8f8f8f; border-radius: 3px; padding: 12px 8px; min-height: 200px; resize: none; font-family: AktivGrotesk; } .map-form .form__message:focus{ outline:none; }