How to Create a Fully Responsive Footer Using HTML and CSS

Ready to Get Coding?

This code is your playground! We've provided the building blocks to create this footer, but the fun part is making it your own. Click the button and get hands-on with the code. Here are some ideas to spark your creativity:

edit & experiment

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create a Fully Responsive Footer Using HTML and CSS</title>
</head>

<body>
    <footer>
        <div class="top-footer">
            <div class="about-us">
                <figure>
                    <img src="https://zonetocode.com/edit-and-experiment/image/zonetocode.png" alt="logo">
                </figure>
                <p>We are thrilled to have you here. ZoneToCode is your one-stop destination for high-quality tutorials
                    and insights into
                    the world of web development and cutting-edge technology.</p>
            </div>

<div class="quick-links">
                <header>
                    <h2>quick links</h2>
                </header>
                <ul>
                    <li><a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                                <path fill="none" stroke="#428a87" stroke-width="2"
                                    d="M5 9h7V5.483a.2.2 0 0 1 .341-.142L19 12l-6.659 6.659a.2.2 0 0 1-.341-.142V15H5" />
                            </svg>
                            <span>home</span>
                        </a></li>
                    <li><a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                                <path fill="none" stroke="#428a87" stroke-width="2"
                                    d="M5 9h7V5.483a.2.2 0 0 1 .341-.142L19 12l-6.659 6.659a.2.2 0 0 1-.341-.142V15H5" />
                            </svg>
                            <span>service</span>
                        </a></li>
                    <li><a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                                <path fill="none" stroke="#428a87" stroke-width="2"
                                    d="M5 9h7V5.483a.2.2 0 0 1 .341-.142L19 12l-6.659 6.659a.2.2 0 0 1-.341-.142V15H5" />
                            </svg>
                            <span>about</span>
                        </a></li>
                    <li><a href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                                <path fill="none" stroke="#428a87" stroke-width="2"
                                    d="M5 9h7V5.483a.2.2 0 0 1 .341-.142L19 12l-6.659 6.659a.2.2 0 0 1-.341-.142V15H5" />
                            </svg>
                            <span>privacy policy</span>
                        </a></li>
                </ul>
            </div>

<div class="our-centers">
                <header>
                    <h2>our centers</h2>
                </header>
                <ul>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
                            <path fill="#428a87"
                                d="M16 4v2h6.586l-6.536 6.536a6.954 6.954 0 0 0-2.05 4.95V28h2V17.485a4.968 4.968 0 0 1 1.464-3.535L24 7.414V14h2V4ZM6 7.414L7.414 6L13 11.586L11.586 13z" />
                        </svg>
                        <p>Malad (West), Mumbai 400064</p>
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
                            <path fill="#428a87"
                                d="M16 4v2h6.586l-6.536 6.536a6.954 6.954 0 0 0-2.05 4.95V28h2V17.485a4.968 4.968 0 0 1 1.464-3.535L24 7.414V14h2V4ZM6 7.414L7.414 6L13 11.586L11.586 13z" />
                        </svg>
                        <p>Andheri(West), Mumbai 400058</p>
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
                            <path fill="#428a87"
                                d="M16 4v2h6.586l-6.536 6.536a6.954 6.954 0 0 0-2.05 4.95V28h2V17.485a4.968 4.968 0 0 1 1.464-3.535L24 7.414V14h2V4ZM6 7.414L7.414 6L13 11.586L11.586 13z" />
                        </svg>
                        <p>Ghatkopar(East), Mumbai 400077</p>
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 32 32">
                            <path fill="#428a87"
                                d="M16 4v2h6.586l-6.536 6.536a6.954 6.954 0 0 0-2.05 4.95V28h2V17.485a4.968 4.968 0 0 1 1.464-3.535L24 7.414V14h2V4ZM6 7.414L7.414 6L13 11.586L11.586 13z" />
                        </svg>
                        <p>Mulund(W), Mumbai 400080.</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom-footer">
            <div class="copyright-sec">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                    <path fill="#ffffff"
                        d="M10.08 10.86c.05-.33.16-.62.3-.87s.34-.46.59-.62c.24-.15.54-.22.91-.23c.23.01.44.05.63.13c.2.09.38.21.52.36s.25.33.34.53s.13.42.14.64h1.79c-.02-.47-.11-.9-.28-1.29s-.4-.73-.7-1.01s-.66-.5-1.08-.66s-.88-.23-1.39-.23c-.65 0-1.22.11-1.7.34s-.88.53-1.2.92s-.56.84-.71 1.36S8 11.29 8 11.87v.27c0 .58.08 1.12.23 1.64s.39.97.71 1.35s.72.69 1.2.91c.48.22 1.05.34 1.7.34c.47 0 .91-.08 1.32-.23s.77-.36 1.08-.63s.56-.58.74-.94s.29-.74.3-1.15h-1.79c-.01.21-.06.4-.15.58s-.21.33-.36.46s-.32.23-.52.3c-.19.07-.39.09-.6.1c-.36-.01-.66-.08-.89-.23c-.25-.16-.45-.37-.59-.62s-.25-.55-.3-.88s-.08-.67-.08-1v-.27c0-.35.03-.68.08-1.01zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8z" />
                </svg>
                <p>2024 - 2025 ZonetoCode. All rights reserved.</p>
            </div>
            <ul class="social-media-sec">
                <li>
                    <a href=""><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
                            <circle cx="4.983" cy="5.009" r="2.188" fill="#ffffff" />
                            <path
                                d="M9.237 8.855v12.139h3.769v-6.003c0-1.584.298-3.118 2.262-3.118c1.937 0 1.961 1.811 1.961 3.218v5.904H21v-6.657c0-3.27-.704-5.783-4.526-5.783c-1.835 0-3.065 1.007-3.568 1.96h-.051v-1.66H9.237zm-6.142 0H6.87v12.139H3.095z"
                                fill="#ffffff" />
                        </svg></a>
                </li>
                <li><a href="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                            <path fill="#ffffff"
                                d="M18.205 2.25h3.308l-7.227 8.26l8.502 11.24H16.13l-5.214-6.817L4.95 21.75H1.64l7.73-8.835L1.215 2.25H8.04l4.713 6.231l5.45-6.231Zm-1.161 17.52h1.833L7.045 4.126H5.078L17.044 19.77Z" />
                        </svg>
                    </a></li>
                <li><a href="">
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
                            <path fill="#ffffff"
                                d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5Z" />
                        </svg>
                    </a></li>
            </ul>
        </div>
    </footer>
</body>

</html>

/* --------------------------------------- Font family link --------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  --primary-color: #428a87;
  --white-color: #ffffff;
  --bg-color: #f0f1f3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.2s linear;
  text-decoration: none;
  font-family: "Nunito Sans", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  background-color: var(--bg-color);
}

ul li {
  list-style: none;
}

footer {
  background-color: var(--white-color);
}

footer .top-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 6rem 9rem;
}

.top-footer .about-us {
  width: 30%;
}

.top-footer .about-us figure {
  display: flex;
  justify-content: center;
}

.top-footer .about-us figure img {
  width: 70%;
}

.top-footer .about-us p {
  letter-spacing: 0.5px;
  padding-top: 1rem;
  text-align: justify;
  font-weight: 500;
}

.top-footer header h2 {
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: capitalize;
}

.top-footer ul {
  margin-top: 0.6rem;
}

.top-footer ul li {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  font-size: 1.05rem;
  font-weight: 600;
  width: 100%;
}

.top-footer ul.quick-links li {
  padding: 0.2rem 0.6rem 0.2rem 1.5rem;
}

.top-footer .quick-links li a {
  display: flex;
  align-items: center;
  text-transform: capitalize;
  gap: 0.3rem;
  width: 100%;
  padding: 0.2rem 0.6rem;
}

.top-footer .quick-links li a span {
  color: black;
}

.top-footer .quick-links li a:hover span {
  color: var(--primary-color);
}

.top-footer .our-centers li {
  padding: 0.2rem 0.6rem;
  gap: 0.3rem;
}

.top-footer .our-centers li svg {
  cursor: pointer;
}

footer .bottom-footer {
  background-color: #0f172a;
  padding: 1rem 9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom-footer .copyright-sec,
.bottom-footer .social-media-sec {
  display: flex;
  align-items: center;
}

.bottom-footer .copyright-sec p {
  padding-left: 0.2rem;
  color: var(--white-color);
  font-size: 1rem;
  font-weight: 500;
}

.bottom-footer .social-media-sec {
  gap: 0.6rem;
}

.social-media-sec a {
  padding: 0.3rem;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-media-sec a:hover {
  background-color: var(--primary-color);
}

@media only screen and (max-width: 1024px) {
  footer .top-footer {
    padding: 4rem;
    row-gap: 1.5rem;
  }

.top-footer .about-us,
  .top-footer ul.quick-links {
    width: 50%;
  }

footer .bottom-footer {
    padding: 1rem 4rem;
  }
}

@media only screen and (max-width: 568px) {
  footer .top-footer {
    padding: 2rem;
    row-gap: 1.5rem;
  }

.top-footer .about-us,
  .top-footer ul.quick-links {
    width: 100%;
  }

footer .bottom-footer {
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
}

@media only screen and (max-width: 420px) {
  footer .top-footer {
    padding: 1rem;
    row-gap: 1.5rem;
  }

footer .bottom-footer {
    padding: 1rem;
  }

.bottom-footer .copyright-sec {
    display: flex;
    justify-content: center;
    align-items: start;
  }

.bottom-footer .copyright-sec p {
    text-align: center;
  }
}

Don't be afraid to experiment!

The beauty of coding is that there's usually more than one way to achieve something. Feel free to break things and try again. That's the best way to learn and become a confident coder.

Get your custom static website starting at just ₹5000!

follow uS

share on

How to Create a Fully Responsive Footer Using HTML and CSS

Ready to Get Coding?

Don't be afraid to experiment!

similar articles

Breadcrumb using HTML & CSS

Login Form using HTML and CSS

accordion using html, css and javascript

leave a comment

check it out!

The Future of Neuralink

follow uS

share on

Ready to Get Coding?

**Don't be afraid to experiment! **

Breadcrumb using HTML & CSS

Login Form using HTML and CSS

accordion using html, css and javascript

The Future of Neuralink

Don't be afraid to experiment!