"footer"
Bootstrap 4.1.1 Snippet by ishu511

<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 ----------> <!-- strting footer --> <section id ="footer"> <div class="container"> <div class="row"> <div class="col-lg-12 logo"> <h3>AYUSH THAKUR</h3> </div><!--logo--> </div> <div class="row"> <div class="col-lg-3"> <div class="important_links"> <h5>Important Links</h5> </div> <ul> <li><a class="footer_menu" href="#">Home</a></li> <li><a class="footer_menu" href="#">About Us</a></li> <li><a class="footer_menu" href="#">Our Services</a></li> <li><a class="footer_menu" href="#">Testimonials</a></li> <li><a class="footer_menu" href="#">Contact Us</a></li> </ul> </div> <div class="col-lg-4"> <div class="important_links"> <h5>Contact Information</h5> </div> <div class="box-contact-info"> <div class="icon"> <img src="image/home.png"> <a href="#"><p>This is a dummy address@ designcurtains street 123</p></a> </div> <div class="icon"> <img src="image/call.png"> <a href="#"><p>0123456789</p></a> </div> <div class="icon"> <img src="image/massager.png"> <a href="#"><p>info@designcurtains.com</p></a> </div> <div class="soicial_media_footer"> <a href="#"> <img src="image/footer-icon/tw.png"></a> <a href="#"> <img src="image/footer-icon/fb.png"></a> <a href="#"> <img src="image/footer-icon/in.png"></a> <a href="#"> <img src="image/footer-icon/p1.png"></a> </div> </div> </div> <div class="col-lg-5"> <div class="important_links"> <h5>Contact Form</h5> </div> <div class="footer-form"> <form> <input type="text" placeholder="First Name*" required> <input type="text" placeholder="Last Name*" requierd> <input type="text" placeholder="Telephone*" requierd> <input type="email" placeholder="Email*" requierd> <textarea placeholder="Enquiry*"></textarea> <input class="submitr" type="button" name="Submit" value="Submit"> </form> </div> </div> </div> </div> </section> <section id="copyright"> <div class="container-fluid text-center"> <div class="row"> <div class="col-lg-12"> <p>Copyright © 2018 Design Curtains. All Rights Reserved.</p> </div> </div> </div> </section>
/****footer**/ #footer { background-image: url(https://www.planwallpaper.com/static/images/3865967-wallpaper-full-hd_XNgM7er.jpg); background-repeat: no-repeat; width: 100%; background-size: cover; min-height: 600px; } #footer h3 { text-align: center; font-size: 50px; color: white; margin-top: 10px;\ font-weight: 900; } .col-sm-12.logo { padding: 50px 0;padding-bottom: 57px; } .important_links h5 { color: white;text-transform: uppercase; font-weight: 400; position: relative; } .important_links h5::after { position: absolute; content: ""; background: #fff; /* top: 0; */ left: 5px; right: 0; height: 2px; width: 30px; bottom: -19px; } #footer li { list-style: none; } #footer ul { padding: 0px 12px 0; margin-top: 49px; } .footer_menu { line-height: 39px; color: white; font-size: 15px; font-weight: 300; position: relative; } .footer_menu:hover { color: #D5A440; } .footer_menu::after { content: ""; background-image: url(../image/arrow.png); background-repeat: no-repeat; position: absolute; right: 0; left: -22px; width: 10%; height: 10px; top: 50%; transform: translateY(-50%); } .box-contact-info .icon:first-child { margin-top: 54px; overflow: hidden; } .icon { margin-top: 54px; overflow: hidden; } .icon p { font-size: 15px; line-height: 28px; font-weight: 300; } .icon img { display: inline-block; float: left; padding-right: 15px; padding-top: 9px; } .icon p { width: 86%; display: inline-block; margin: 0; margin-top: 0px; font-size: 15px; color: white; line-height: 22px; margin-top: 3px; font-weight: 300; } .icon1 img { display: inline-block; float: left; padding-right: 15px; padding-top: 4px; } .icon1 p { width: 86%; display: inline-block; margin: 0; margin-top: 0px; font-size: 15px; color: white; line-height: 22px; margin-top: 3px; font-weight: 300; } .icon { margin-top: 30px; } .soicial_media_footer { margin-top: 18px; } .soicial_media_footer a:first-child { padding-left: 0; } .soicial_media_footer a { display: inline-block; padding: 0 5px; } #email { width: 58%; float: left; } .row.form { margin-top: 49px; } #email { width: 76%; background: transparent; float: left; color: white; padding: 6px 21px 4px 19px; border-radius: 0px; } .row.form1 { margin-top: 23px; } .footer-form input { margin: 1px; /* line-height: 37px; */ padding: 9px 13px; box-sizing: border-box; width: 48%; margin: 5px 3px; background: no-repeat; color: #fff; border: 2px solid; } .footer-form textarea{margin: 1px; /* line-height: 37px; */ padding: 9px 13px; box-sizing: border-box; width: 48%; margin: 5px 3px; background: no-repeat; color: #fff; border: 2px solid;} .footer-form textarea { margin: 1px; /* line-height: 37px; */ padding: 9px 13px; box-sizing: border-box; width: 98%; margin: 5px 3px; background: no-repeat; color: #fff; border: 2px solid; margin-top: 7px; } .submitr { width: 98%; margin-top: 8px; background: #01478c; border: solid 2px transparent; text-transform: uppercase; cursor: pointer; } .submitr:hover{background: #0056b3;} form { margin-top: 27px; } .footer-form input::placeholder { opacity: 1; color: #fff; } .footer-form textarea::placeholder { opacity: 1; color: #fff; } .container-fluid.text-center { background: #01478c; color: white; } #copyright p {padding: 12px 0;;font-weight: 300; color:#FFFFFF; margin: 0px}

Related: See More


Questions / Comments: