<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://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> <div class="contact"> <div class="container"> <div class="contact-wrap d-md-flex"> <div class="contact-wrap-left"> <i class="fas fa-paper-plane"></i> <h2>Reach Us</h2> <h4>We would love to hear from you !</h4> </div> <div class="contact-wrap-right"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input class="form-control" type="text" id="fname" placeholder="Enter Full Name" name="name"> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-envelope"></i></span> </div> <input class="form-control" type="email" id="email" placeholder="Enter Email Address" name="email"> </div> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fas fa-pencil-alt"></i></span> </div> <textarea class="form-control" id="comment" placeholder="Message"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-default">Submit</button> </div> </div> </div> </div> </div>

body{ background-color: #172b4d; } .contact{ padding: 70px 0; } .contact-wrap { width: 100%; max-width: 800px; margin: 0 auto; border-radius: 10px; overflow: hidden; } .contact-wrap-left { background: #007bff; padding: 40px; min-width: 300px; } .contact-wrap-left i { color: #fff; font-size: 20px; border: 2px solid #fff; padding: 20px; border-radius: 50%; margin-bottom: 15px; } .contact-wrap-left h2 { color: #fff; } .contact-wrap-left h4 { color: #fff; font-size: 18px; font-weight: 400; line-height: 1.4; margin-bottom: 0px; } .contact-wrap-right { background: #fff; padding: 40px 40px 30px; width: 100%; } .contact label { font-weight:600; } .contact button { background: #25274d; color: #fff; font-weight: 600; width: 180px; color: #fff; border-color: #5e72e4; background-color: #5e72e4; box-shadow: 0 4px 6px rgba(50,50,93,0.11), 0 1px 3px rgba(0,0,0,0.08); } .contact .form-group { width: 100%; } body .contact-wrap-right .input-group , .contact .form-group textarea { width: 100%; transition: box-shadow .15s ease; border: 0; box-shadow: 0 1px 3px rgb(50 50 93 / 15%), 0 1px 0 rgb(0 0 0 / 2%); margin-bottom: 15px; min-height: 40px; } body .contact-wrap-right .input-group input, body .contact-wrap-right .input-group textarea { color: #8898aa; font-size: 14px; } body .contact-wrap-right .input-group-text { color: #adb5bd; border: 0; background: rgb(173 181 189 / 20%); align-items: flex-start; padding-top: 12px; } body .contact-wrap-right .input-group .form-control { border: 0; box-shadow: none; } .contact textarea { min-height: 150px; } .contact button:focus{ box-shadow:none; }