<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 ----------> <!--=====================================footer==================================================--> <footer> <div class="container"> <div class="row"> <div class="col-lg-3"> <div class="footer-logo"> <img src="https://anerdsworld.com/wp-content/uploads/2016/10/PG-Clucks-960x750.png"> <h3>Suivez-nous sur</h3> </div> <div class="soical-media"> <img src="./img/facebook.png"> <img src="./img/you-tube.png"> <img src="./img/indtrafgram.png"> <img src="./img/p.png"> </div> </div> <div class="col-lg-3"> <div class="improtent"><h2>Liens importants</h2> </div> <div class="fotter-menu"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Histoire de la marque</a></li> <li><a href="#">Nos produits</a></li> <li><a href="#">Où nous trouver?</a></li> <li><a href="#">Coaching Vip</a></li> <li><a href="#">Revendeurs</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </div> <div class="col-lg-3"> <div class="improtent"><h2>Contactez nous</h2></div> <address> <img src="./img/laocation.png"><p>My Hair Evolution 123 dummy address lorem ipsum.</p> <img src="./img/mail.png"><p>info@myhairevolution.com</p> <img src="./img/call.png"><p>+1 123 456 789</p> </address> <div class="fotter-menu"> <ul> <li><a href="#">Livraison</a></li> <li><a href="#">Retour </a></li> <li><a href="#">Termes</a></li> </ul> </div> </div> <div class="col-lg-3"> <div class="improtent"><h2>Carte</h2></div> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1735769.8535458827!2d77.29538994999999!3d31.820213499999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1546855523797" width="100%" height="200" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </div> </div> </div> </footer> <section id="copyright"> <div class="container"> <div class="row"> <div class="col-md-12"> <p>© 2018</p> </div> </div> </div> </div> </section> <div class="container"> <div class="row"> <div class="col-md-12"> <h2 class="ayush">AYUSH THAKUR</h2> </div> </div> </div>

footer { background: #f7f7f7; padding: 48px 0; } .footer-logo img { width: 67%; margin-left: 0; display: block; } .footer-logo h3 { color: #9E2499; text-transform: capitalize; margin-top: 10px; margin-bottom: 20px; } .improtent h2 { font-size: 24px; margin-bottom: 20px; font-weight: 600; position: relative; color:#9E2499; } .improtent h2::after { position: absolute; background: #FF5241; content: ""; width: 54px; height: 2px; bottom: -10px; left: 0; } .fotter-menu ul li a { position: ; line-height: 38px; font-size: 19px; color: #4d4d4d; font-weight: 500; } .fotter-menu ul li { list-style: none; position: relative; } .fotter-menu ul li::after { position: absolute; background-image: url(../img/arrow.png); width: 15px; height: 11px; content: ""; left: -24px; bottom: 6px; background-repeat: no-repeat; } address { display: inline-block; margin-top: 19px; } address img { display: ; float: left; padding-right: 12px; margin-top: 11px; } .map iframe { width:100%; height: 281px; padding: 7px; background: white; } #copyright { background: #9E2499; text-align: center; } #copyright p { font-size: 20px; color: white; display: inline-block;padding-top: 21px; overflow: hidden; } .fotter-menu ul li a:hover { color: #9E2499; text-decoration: none; transition: all ease-in-out 0.2s; } .ayush { color: red; text-align: center; width: 100%; font-size: 35px; text-shadow: 2px 2px 1px yellow; }