<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 ----------> <section class="contact" id="contact"> <div class="container"> <div class="heading text-center wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;"> <h2> <span>Keep In</span> Touch</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi eligendi <br> saepe deleniti sequi sint quaerat.</p> </div> <div class="main wow fadeInUp" style="visibility: visible; animation-name: fadeInUp;"> <div class="row"> <div class="col-lg-8 left"> <h3>Send Message</h3> <form> <div class="row"> <div class="col-sm-6"> <input type="text" class="form-control" placeholder="Name"> </div> <div class="col-sm-6"> <input type="email" class="form-control" placeholder="Email"> </div> </div> <div class="form-group"> <textarea class="form-control" rows="5" id="comment" placeholder="Message"></textarea> </div> <button class="btn btn-block" type="submit">Send Now!</button> </form> </div> <!-- Left --> <div class="col-lg-4"> <div class="right"> <h4>Contact Information</h4> <div class="info d-flex align-items-center"> <i class="fa fa-map-marker" aria-hidden="true"></i> <span>c - 165, Your Street Jaipur, <br>IN 91 554</span> </div> <div class="info d-flex align-items-center"> <i class="fa fa-chrome" aria-hidden="true"></i> <span>+1-456-456-7890 </span> </div> <div class="info d-flex align-items-center"> <i class="fa fa-phone" aria-hidden="true"></i> <span>info@yourdomain.com </span> </div> <div class="social"> <a href="#0"> <i class="fa fa-dribbble" aria-hidden="true"></i> </a> <a href="#0"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> <a href="#0"> <i class="fa fa-github" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div> </div> </section>

.contact { padding-bottom: 100px; } .contact .heading { margin-bottom: 50px; } .contact .heading h2 { font-size: 30px; font-weight: 700; color: #404356; margin: 0; margin-bottom: 15px; } .contact .heading h2 span { color: #7035cf; font-weight: 300; } .contact .heading p { font-size: 14px; font-weight: 400; color: #525f7f; line-height: 26px; margin: 0; } .contact .main { background: #ffffff; box-shadow: 1px 1px 20px 0 rgba(0,0,0,0.08); } .contact .main h3 { font-size: 20px; font-weight: 500; color: #4a545e; margin: 0; margin-bottom: 20px; } .contact .form-control { padding: 25px; font-size: 13px; margin-bottom: 10px; background: #f8f8f9; border: 0; border-radius: 5px; } .contact button.btn { padding: 10px; border-radius: 5px; font-size: 15px; background: linear-gradient(to right, rgba(114,96,206,1) 0%, rgba(70,96,241,1) 100%); color: #ffffff; } .contact .main .left { padding: 40px 60px; } .contact .main .right { background:#5d5db7; background-size: cover; padding: 40px; color: #ffffff; height: 100%; } .contact .main .right h4 { font-size: 20px; font-weight: 700; margin-bottom: 30px; } .contact .main .right .info { margin-bottom: 35px; } .contact .main .right .info i { font-size: 25px; color: #ffffff; } .contact .main .right .info span { font-size: 14px; font-weight: 400; line-height: 20px; margin-left: 15px; } .contact .main .right .social a { text-decoration: none; font-size: 30px; color: #ffffff; margin-right: 20px; }