<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <section class="form-section" style="background-image:url(https://i.ibb.co/d2xFDtr/5257b6c12d89875.jpg);"> <div class="overlay"></div> <div class="container"> <div class="row"> <div class="heading-title"> Get in touch with us</div> </div> <div class="row"> <div class="col-md-4"> <div class="contact-box"> <ul class="list-inline"> <li> <div class="contact"> <i class="fa fa-map-marker" aria-hidden="true"></i> <p> DieSachbearbeiter Choriner Straße 49 <br> 10435 Berlin </p> </div> </li> <li> <div class="contact"> <i class="fa fa-envelope" aria-hidden="true"></i> <p> Info@example.com <br> example@yourcompany.com </p> </div> </li> <li> <div class="contact"> <i class="fa fa-mobile" aria-hidden="true"></i> <p> +91 9876543210 <br> +91 5689452158 </p> </div> </li> </ul> </div> </div> <div class="col-md-4"> <div class="form-box-inner"> <form action="" method=""> <div class="form-group"> <input type="text" class="form-control" for="" name="" value="" placeholder="Your name"> </div> <div class="form-group"> <input type="email" class="form-control" for="" name="" value="" placeholder="Your email"> </div> <div class="form-group"> <input type="text" class="form-control" for="" name="" value="" placeholder="Your number"> </div> <div class="form-group"> <textarea rows="4" cols="50" class="form-control" placeholder="Describe yourself here..."></textarea> </div> <button class="btn custom-button"> Submit Now </button> </form> </div> </div> <div class="col-md-4"> <div class="map-box"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d235526.90924712367!2d75.7237618214095!3d22.724228429904368!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3962fcad1b410ddb%3A0x96ec4da356240f4!2sIndore%2C+Madhya+Pradesh!5e0!3m2!1sen!2sin!4v1564059499022!5m2!1sen!2sin" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div> </div> </section>

.form-section{ background-attachment:fixed; background-size:cover; background-position:100% 100%; background-repeat:no-repeat; padding:0px 0; position:relative; height:100vh; } .overlay { background: #00000026; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .custom-button { width: 100%; color: #fff; text-transform: uppercase; letter-spacing: 2px; transition: 0.8s ease; background: #4DA0B0; background: -webkit-linear-gradient(to right, #D39D38, #4DA0B0); background: linear-gradient(to right, #FF5722, #3f51b5); } .custom-button:hover, .custom-button:focus{ transition: 0.8s ease; letter-spacing: 3px; background: -webkit-linear-gradient(to right, #D39D38, #4DA0B0); background: linear-gradient(to right, #FF5722, #3f51b5); } .form-box-inner .form-control { background: #ffffff8a; border: 2px solid #000000; box-shadow: none; } .form-box-inner .form-control:focus { outline:none; box-shadow:none; } .map-box iframe { width: 100%; height: 357px; } .map-box { padding: 5px; border-radius: 5px; } .heading-title{ text-shadow: 2px 3px 0 #101010, 1px 4px 0 rgba(0,0,0,0.15); text-align: center; margin: 0 auto; padding: 60px; font-size: 42px; } .contact{ text-align:center; } .contact-box{ background: #ffffff8a; height: 365px; padding:15px; } .contact-box ul li{ margin-bottom:0px; padding:8px; } .contact i { font-size: 25px; color: #f65728; } .form-box-inner { background: #ffffff8a; padding: 15px; }