<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 class="footer"> <div class="container"> <div class="row"> <div class=" col-md-3 col-sm-6 footer-col"> <div class="footer-content sologan-col"> <img src="https://www.collegenp.com/uploads/2018/08/Shivapuri-Secondary-School-Jajarkot.jpg" alt="school logo"> <p class="lead sologan">We value every student in our care and it is our aim to provide quality education with the best possible environment.</p> <div class="social-link"> <a href="#"><i class="fab fa-facebook-f fa-sm"></i></a> <a href="#"><i class="fab fa-linkedin fa-sm"></i></a> <a href="#"><i class="fab fa-twitter fa-sm"></i></a> </div> </div> </div> <div class=" col-md-3 col-sm-6 footer-col"> <div class="footer-content "> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Admission</a></li> <li><a href="#">Courses Offered</a></li> <li><a href="#">Achievements</a></li> <li><a href="#">Scholarships</a></li> </ul> </div> </div> <div class=" col-md-3 col-sm-6 footer-col"> <div class="footer-content ex-pages"> <ul> <li><a href="#">Notice</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Resources</a></li> <li><a href="#">Blog</a></li> <li><a href="#">FAQ</a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6 footer-col"> <div class="footer-content address"> <p class="basic-info">Shivapuri Technical School</p> <p class="basic-info">061-432744, 9856072552, 9856022782, 9846033351</p> <p class="basic-info">example@gmail.com</p> </div> </div> </div> </div> <div class="footer-bottom"> <div class="container "> <p class="paragraph text-white text-center"> © 2022 Shivapuri Technical School Powered by InGrails<a href="https://veda-app.com/" target="_blank"> Powered by Veda</a> </p> </div> </div> </footer> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/lib/owl.carousel.min.js"></script> <script src="js/main.js"></script> <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide"></script> <script> </script> </body> </html>

.footer{ font-family: Inter; letter-spacing: 0em; background-color: #1E1D60; font-size: 1rem; font-weight: 400; color:white; line-height: 1.5rem; text-align: left; justify-content: center; align-items: center; padding: 15px; position: relative; width: 100%; height: 100%; overflow: hidden; padding-top: 2.5rem; } .footer-content{ font-size: 0.875rem; line-height: 1.3125rem; font-family: Inter; } .footer-content img{ width: 9rem; height:5.57rem; margin-bottom:1rem; } .sologan{ font-size: 1rem; line-height:1.5rem; overflow-wrap: break-word; } .social-link a{ margin-right:1rem; z-index: 1; } .social-link a i { border-radius: 50%; font-size: 1.5rem; color:white; /* text-decoration: none; */ } .footer-content ul{ list-style: none; } .footer-content ul li{ margin-bottom:1rem; } .footer-content ul li a{ font-size: 1rem; /* font-weight: 200; */ line-height: 1.5rem; text-decoration: none; color: inherit; } @media only screen and (max-width: 991px) { .sologan-col { margin-left: -2.5rem; } } @media only screen and (max-width: 767px) { .sologan-col { margin-left: 0rem; } .footer-content ul{ padding-inline-start:0rem; } } @media only screen and (max-width: 575px) { .footer-content{ margin-top: 2rem; } .footer-content p { margin-left: -1rem; } } @media only screen and (max-width: 767px){ .ex-pages{ margin-top: 1rem; } } .footer-content p{ width:15.35rem !important; font-size: 1rem; line-height: 1.5rem; } @media only screen and (max-width:574px){ .address{ margin-left: 1rem; } } .basic-info{ margin-bottom:2rem; } .footer-content p i { padding-right:0.8rem; } .footer-bottom{ margin-left:auto; margin-right:auto; margin-top:1.5rem; border-top:2px solid #FFCC06; width:85%; align-items: center; padding: 1rem 0rem 0rem 0rem; } .footer-bottom a { text-decoration: none; color:white; } .footer-bottom a:hover { color:rgb(58, 223, 163); text-decoration:none; cursor:pointer; }