How To Make Responsive Footer Using HTML And CSS

Footers are essential components of web design, providing important information and navigation options for users. In this tutorial, we’ll walk through the steps to create a responsive footer for your website, complete with contact information, a newsletter subscription form, and social media icons.

Responsive Footer Using HTML And CSS

Step 1: Set up your HTML structure

First, let’s set up the basic HTML structure for the footer. We’ll divide it into three sections: contact information, social media links, and newsletter subscription.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML & CSS Responsive Footer</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        />
        <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
        <h1>HTML, CSS Responsive Footer</h1>
        <footer>
            <div class="container">
                <div class="footer-content">
                    <h3>Contact Us</h3>
                    <p>
                        <i class="fa-solid fa-envelope"></i> Email:
                        [email protected]
                    </p>
                    <p><i class="fa-solid fa-phone"></i> Phone: 123-456-7890</p>
                </div>

                <div class="footer-content">
                    <h3>Follow Us</h3>
                    <ul class="social-links">
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-facebook"></i>
                                Facebook
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-x-twitter"></i> Twitter
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-linkedin"></i>
                                Linkedin
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i class="fa-brands fa-github"></i> GitHub
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="footer-content">
                    <h3>Newsletter</h3>
                    <p>
                        Enter your email address to subscribe to this blog and
                        receive notifications of new posts by email. (Join
                        20,575 other subscribers)
                    </p>
                    <div class="subscribe">
                        <form action="">
                            <input
                                type="email"
                                name="email"
                                placeholder="Your email"
                                required
                            />
                            <input type="submit" value="Subscribe" />
                        </form>
                    </div>
                </div>
            </div>
        </footer>
    </body>
</html>

Step 2: Style your footer with CSS

Now, let’s style the footer to make it visually appealing and responsive.

/* Adding Custom Font using Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
}

footer {
    background-color: #111218;
    color: #ccc;
    padding: 40px 0;
}

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-content {
    flex: 1;
    padding: 0 40px;
}

.footer-content h3 {
    margin-top: 0;
    color: #fff;
}

.footer-content ul {
    list-style-type: none;
    padding: 0;
}

.footer-content ul li {
    margin-bottom: 10px;
}

.footer-content ul li a {
    color: inherit;
    text-decoration: none;
}

.footer-content ul li a:hover {
    color: #ffffff;
}

.subscribe form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.subscribe input {
    padding: 10px;
    outline: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    font-size: 16px;
}

.subscribe input[type="submit"] {
    cursor: pointer;
    background-image: linear-gradient(#f7f8fa, #e7e9ec);
    box-shadow: rgba(255, 255, 255, 0.6) 0 1px 0 inset;
    text-transform: uppercase;
    font-size: 14px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    footer {
        padding: 20px 0;
    }
    .footer-content {
        flex-basis: 100%;
        margin-bottom: 20px;
        padding: 0 20px;
    }
}

Step 3: Add social media icons

We’ll use Font Awesome for social media icons. Therefore we have Included the Font Awesome library in the HTML file:

<head>
    <!-- Font Awesome stylesheets -->
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
    />
</head>

Font Awesome provides various icon classes that you can use directly in your HTML. For example, <i class="fa-brands fa-facebook"></i> will display the Facebook icon.

Step 4: Make it responsive

We need to media queries to make the footer responsive for different screen sizes. In the provided CSS code, we’ve already included a media query that adjusts the layout for screens smaller than 768px wide.

@media (max-width: 768px) {
    footer {
        padding: 20px 0;
    }
    .footer-content {
        flex-basis: 100%;
        margin-bottom: 20px;
        padding: 0 20px;
    }
}

Finally, we’ve learned how to create a responsive footer with HTML, CSS, and social icons. Footers are an essential part of web design, providing valuable information and navigation options for users. By following these steps, you can create a visually appealing and functional footer for your website.

Feel free to modify the styles and content according to your website’s needs. If you have any questions or need further assistance, don’t hesitate to ask!