HTML Source Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>Indian Coding Wala Footer</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous"> <link href="style.css" rel="stylesheet"> </head> <body> <header id="header" class="header fixed-top"> <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> <footer id="footer" class="footer"> <div class="footer-top"> <div class="container"> <div class="row gy-4"> <div class="col-lg-5 col-md-12 footer-info"> <a href="#" class="logo d-flex align-items-center"> <span>Indian Coding Wala </span> </a> <p>Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components. </p> <div class="social-links mt-3"> <a href="#" class="twitter"><i class="bi bi-twitter"></i></a> <a href="#" class="facebook"><i class="bi bi-facebook"></i></a> <a href="#" class="instagram"><i class="bi bi-instagram"></i></a> <a href="#" class="linkedin"><i class="bi bi-linkedin"></i></a> </div> </div> <div class="col-lg-2 col-6 footer-links"> <h4>All Links</h4> <ul> <li><i class="bi bi-chevron-right"></i> <a href="#">Home</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">About us</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">Services</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">Terms of service</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">Privacy policy</a></li> </ul> </div> <div class="col-lg-2 col-6 footer-links"> <h4>Our Services</h4> <ul> <li><i class="bi bi-chevron-right"></i> <a href="#">Web Design</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">Web Development</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">Product Management</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">Marketing</a></li> <li><i class="bi bi-chevron-right"></i> <a href="#">Graphic Design</a></li> </ul> </div> <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start"> <h4>Contact Us</h4> <p> GW32+88F, Fatima Nagar, Wanowrie, Pune, Maharashtra 411040 <br> <strong>Phone:</strong> +91 000000000000<br> <strong>Email:</strong> indiancodingwala.com<br> </p> </div> </div> </div> </div> <div class="container"> <div class="copyright"> © Indian Coding Wala. All Rights Reserved </div> </div> </footer> </body> </html>
CSS Source Code
:root { scroll-behavior: smooth; } body { font-family: "Open Sans", sans-serif; color: #444444; } a { color: #4154f1; text-decoration: none; } a:hover { color: #717ff5; text-decoration: none; } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .footer { background: #f6f9ff; padding: 0 0 30px 0; font-size: 14px; } .footer .footer-top { background: white no-repeat right top; background-size: contain; border-top: 1px solid #e1ecff; border-bottom: 1px solid #e1ecff; padding: 60px 0 30px 0; } @media (max-width: 992px) { .footer .footer-top { background-position: center bottom; } } .footer .footer-top .footer-info { margin-bottom: 30px; } .footer .footer-top .footer-info .logo { line-height: 0; margin-bottom: 15px; } .footer .footer-top .footer-info .logo img { max-height: 40px; margin-right: 6px; } .footer .footer-top .footer-info .logo span { font-size: 30px; font-weight: 700; letter-spacing: 1px; color: #012970; font-family: "Nunito", sans-serif; margin-top: 3px; } .footer .footer-top .footer-info p { font-size: 14px; line-height: 24px; margin-bottom: 0; font-family: "Nunito", sans-serif; } .footer .footer-top .social-links a { font-size: 20px; display: inline-block; color: rgba(1, 41, 112, 0.5); line-height: 0; margin-right: 10px; transition: 0.3s; } .footer .footer-top .social-links a:hover { color: #012970; } .footer .footer-top h4 { font-size: 16px; font-weight: bold; color: #012970; text-transform: uppercase; position: relative; padding-bottom: 12px; } .footer .footer-top .footer-links { margin-bottom: 30px; } .footer .footer-top .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer .footer-top .footer-links ul i { padding-right: 2px; color: #d0d4fc; font-size: 12px; line-height: 0; } .footer .footer-top .footer-links ul li { padding: 10px 0; display: flex; align-items: center; } .footer .footer-top .footer-links ul li:first-child { padding-top: 0; } .footer .footer-top .footer-links ul a { color: #013289; transition: 0.3s; display: inline-block; line-height: 1; } .footer .footer-top .footer-links ul a:hover { color: #4154f1; } .footer .footer-top .footer-contact p { line-height: 26px; } .footer .copyright { text-align: center; padding-top: 30px; color: #012970; } .footer .credits { padding-top: 10px; text-align: center; font-size: 13px; color: #012970; }
https://www.youtube.com/watch?v=DHovQt9gncE
.png)
Social Plugin