<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 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://images.pexels.com/photos/1583339/pexels-photo-1583339.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")> <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-6 col-sm-6"> <div class="contact-box"> <ul class="list-inline"> <li> <div class="contact"> <i class="fa fa-map-marker" aria-hidden="true"></i> <p> 73 juta street<br> braamfontein </p> </div> </li> <li> <div class="contact"> <i class="fa fa-envelope" aria-hidden="true"></i> <p> Info@example.com <br> info@abedesigns.co.za </p> </div> </li> <li> <div class="contact"> <i class="fa fa-mobile" aria-hidden="true"></i> <p> +27876543210 <br> +27689452158 </p> </div> </li> </ul> </div> </div> <div class="vl"></div> <div class="col-md-6 col-sm-6"> <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> </div> </section>

/*.vl { border-bottom: 0; border-right: 3px solid #000; display: block; float: center; margin-right: 0px; padding-right: 0px; height: 360px; top: 0%; bottom: 30%; transform: translate(2px, 0px); } */ .form-section{ background-attachment:fixed; background-size:cover; background-position:100% 100%; background-repeat:no-repeat; padding:20px 0; position:relative; height:max-content; } .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: rgba(0,0,0,0.3); 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: #D95640; } .form-box-inner { background: #ffffff8a; padding: 15px; }