<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 ----------> <div class="container-fluid contact pt-5"> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-lg-3 getintouch mb-5"> <h4 class="display-4">Get in Touch</h4> <div class="socialmedia mt-5"> <p><a href="#" class="btn socialmedia-buttons">Facebook</a></p> <p><a href="#" class="btn socialmedia-buttons">Twitter</a></p> <p><a href="#" class="btn socialmedia-buttons">Instagram</a></p> </div> </div> <div class="col-lg-6 contactsection shadow-sm"> <div class="contactform mt-5"> <form class="form-group"> <input type="text" class="form-control mb-3" name="Name" value="" placeholder="Name"> <input type="email" class="form-control mb-3" name="Email" value="" placeholder="Email"> <textarea name="Message" class="form-control" rows="8" cols="80"></textarea> <input type="submit" class="btn btn-send mt-3" value="Send Message"> </form> </div> </div> <div class="col-lg-3 quicklinks mt-5"> <h5 class="mt-5">Quick Links</h5> <ul class="links"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link">FAQ</a></li> <li class="nav-item"><a href="#" class="nav-link">Terms</a></li> </ul> </div> </div> </div> </div>

.getintouch { color: #fff; } .nav-link { color: gray; } .nav-link:hover { color: #ffb6c1; } .contactsection { background-color: #fff; } .contact { background-color: #ffb6c1; height: 260px; } .message { color: gray; } .form-control { border: 1px solid #fff0f2; } .btn-send { padding: 10px 50px; background-color: #fff; color: #ffb6c1; border: 1px solid #fff0f2; } .btn-send:hover { background-color: #ffb6c1; color: #fff; border: 1px solid #ffb6c1; } .socialmedia-buttons { width: 150px; background-color: #fff; color: #ffb6c1; border: 1px solid #fff0f2; } .socialmedia { padding-top: 75px; } .socialmedia-buttons:hover { background-color: #ffb6c1; color: #fff; border: 1px solid #ffb6c1; } .quicklinks { padding-top: 20px; color: #000; } .links { list-style-type: none; padding-top: 50px; margin-left: -30px; }