Responsive Footer using HTML and CSS

Hey, developers welcome to Day 45 of our 90Days 90Projects challenge. And in Day 45 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, simple responsive footer html css, footer code in html and css, simple footer html css code, simple footer html css code

HTML Code

<!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 </title>
    <link rel="stylesheet" href="styles.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 class="footer">
        <div class="social-items">
            <a href="#"><i class="fa-brands fa-instagram"></i></a>
            <a href="#"><i class="fa-brands fa-youtube"></i></a>
            <a href="#"><i class="fa-brands fa-github"></i></a>
            <a href="#"><i class="fa-brands fa-twitter"></i></a>
        </div>

        <ul class="list">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Services</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#">Terms</a>
            </li>
            <li>
                <a href="#">Privacy Policy</a>
            </li>
        </ul>
        <p class="copyright"> @ All rights reserved geekshelp.in 2023 </p>
    </footer>
</body>

</html>



CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-weight: 400;
    font-family: 'Segoe UI';
}

.footer {
    padding: 40px 0;
    background-color: #cc0ee9;
}

.social-items {
    color: #fff;
    text-align: center;
}

.social-items a {
    color: #fff;
    width: 40px;
    height: 40px;
    margin: 1rem;
    opacity: 0.8;
    line-height: 38px;
    font-size: 1.4rem;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    border: 1.4px solid #ccc;
}

.social-items a:hover {
    opacity: 1;
}

.list {
    padding: 0;
    margin-top: 0;
    font-size: 18px;
    line-height: 1.6;
    list-style: none;
    margin-bottom: 0;
    text-align: center;
}

.list a {
    opacity: 0.8;
    color: #fff;
    text-decoration: none;
}

.list li {
    padding: 0 15px;
    display: inline-block;
}

.list a:hover {
    opacity: 1;
}

.copyright {
    font-size: 14px;
    margin-top: 15px;
    text-align: center;
    color: rgb(181, 175, 175);
}

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