Responsive Footer using HTML and CSS

Hey, developers welcome to Day 36 of our 90Days 90Projects challenge. And in Day 36 we are going to create a Responsive Footer using HTML and CSS.


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

Responsive Footer using HTML and CSS


Image Resource - Download Now

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Responsive Footer Design </title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <footer id="footer">
        <div class="upper-footer">
            <div class="up-left">
                <div class="image">
                    <img src="./logo.png" alt="">
                </div>
                <div class="content">
                    <h2 class="footer-heading"> About Us</h2>
                    <p class="description">
                        Geeks Help is an independent website, especially for Web Developers, Programming Beginners, BCA
                        and Computer Science Students. We provide programming, web development content with free PDF and
                        web development projects.
                    </p>
                </div>
            </div>
            <div class="up-right">
                <h2 class="footer-heading"> Follow us</h2>
                <ul>
                    <li class="linkedIn"><a href="https://www.linkedin.com/in/rajuwebdev"><i
                                class="fa-brands fa-linkedin-in"></i></a></li>
                    <li class="instagram"><a href="https://www.instagram.com/raju_webdev"><i
                                class="fa-brands fa-instagram"></i></a></li>
                    <li class="youtube"><a href="https://www.youtube.com/@geekshelp"><i
                                class="fa-brands fa-youtube"></i></a></li>
                    <li class="github"><a href="https://github.com/rajusheoran4"><i class="fa-brands fa-github"></i></a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="down-footer">
            <p class="leftPara">Copyright &copy; 2021-23 GeeksHelp.in</p>
            <ul class="footer-li">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Work With Us</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms and Conditions</a></li>
            </ul>
        </div>
    </footer>
</body>
</html>



CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

#footer {
    width: 100%;
    padding-top: 2rem;
}

.upper-footer {
    display: flex;
    justify-content: space-around;
}

.up-left {
    width: 700px;
    display: flex;
}

.image {
    width: 200px;
    position: relative;
}

.up-left img {
    position: absolute;
    width: 100%;
}

.content {
    width: 400px;
    margin-left: 3rem;
}

.description {
    font-size: 15px;
    font-weight: 100;
}

.footer-heading {
    color: #404040;
    font-size: 1.2rem;
    margin-bottom: .6rem;
    text-transform: uppercase;
}

.up-right ul {
    display: flex;
    list-style: none;
}

.up-right ul li {
    height: 40px;
    width: 40px;
    padding: 6px;
    font-size: 1.4rem;
    border-radius: 5px;
    margin: 0 0.8rem 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-right ul li a {
    color: white;
}

.linkedIn {
    background-color: #0077b5;
}

.instagram {
    background: linear-gradient(15deg, #ffb13d, #dd277b, #4d5ed4);
}

.youtube {
    background-color: #f50000;
}

.github {
    background-color: #24292E;
}

.down-footer {
    width: 100%;
    color: #404040;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.footer-li {
    display: flex;
    list-style: none;
}

.footer-li li {
    padding: 0 1rem;
}

.footer-li li a {
    color: #404040;
    text-decoration: none;
}

@media screen and (max-width: 821px) {
    .up-left {
        width: 100%;
    }

    .upper-footer,
    .down-footer,
    .up-left {
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .image {
        margin: 2rem 0;
    }

    .content {
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }

    .footer-heading {
        margin: 1rem 0;
        text-align: center;
    }

    .down-footer {
        flex-direction: column-reverse;
    }

    .down-footer .leftPara {
        margin-top: 1rem;
    }

    .footer-li {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        line-height: 25px;
        margin: 1rem auto;
    }
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad