3+ Footer Components - Vanilla CSS

A footer is a section at the bottom of a webpage that typically contains information such as contact details, links to important pages, copyright notices, and social media icons. It serves as a navigation aid and provides additional information to visitors. In this collection, you'll find various designs for footer components that you can easily incorporate into your website's design. Whether you prefer a basic footer or a more visually appealing style, these components are designed to complete your website's look and enhance user experience.

Footer with Social Links and Legal Information

Enhance compliance with a footer featuring social links and legal information.Learn how to create a footer layout that includes social media links for connectivity and legal information for compliance

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>


<section>
  <footer class="top">
    <img src="https://www.frontendcomponent.com/favicon.ico" />
    <div class="links">
      <div class="links-column">
        <h2>Get Started</h2>
        <a>Introduction</a>
        <a>Documentation</a>
        <a>Usage</a>
        <a>Globals</a>
        <a>Elements</a>
      </div>
      <div class="links-column">
        <h2>Resources</h2>
        <a>API</a>
        <a>Visibility</a>
        <a>Accessibility</a>
        <a>Community</a>
        <a>Marketplace</a>
      </div>
      <div class="links-column socials-column">
        <h2>Social Media</h2>
        <p>
          Follow us on social media to find out the latest updates on our
          progress.
        </p>
        <div class="socials">
          <a class="fa-brands fa-facebook"></a>
          <a class="fa-brands fa-instagram"></a>
          <a class="fa-brands fa-linkedin"></a>
        </div>
      </div>
    </div>
  </footer>
  <footer class="bottom">
    <p class="copyright">© 2023 All rights reserved</p>
    <div class="legal">
      <a> License </a>
      <a> Terms </a>
      <a> Privacy </a>
    </div>
  </footer>
</section>

body {
  margin: 0;
  background: #1f1d58;
  font-family: "Euclid Circular A", "Poppins";
  color: #f7f7f7;
}

html,
body {
  height: 100%;
}

section {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #29277a;
  padding-top: 60px;
}

footer.top > img {
  height: 50px;
  margin: 0 auto 50px;
}

footer {
  position: relative;
  margin: 0 30px;
  color: rgb(255 255 255 / 50%);
}

footer.top {
  display: grid;
  border-bottom: 2px solid rgb(255 255 255 / 20%);
  padding-bottom: 20px;
}

footer.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column-reverse;
  gap: 8px;
  padding: 20px 0;
  text-align: center;
}

footer.top .links {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 30px;
  margin-bottom: 30px;
}

.links-column {
  display: grid;
  gap: 10px;
  text-align: center;
}

footer h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgb(255 255 255 / 96%);
}

footer p {
  margin: 0;
}

.legal > a {
  margin: 0 0 0 4px;
}

.legal,
.copyright {
  font-size: 12px;
}

.legal > span {
  margin-right: 10px;
}

footer.top .socials {
  position: absolute;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 56px;
}

footer.top .socials > a {
  font-size: 24px;
}

.socials-column :is(h2, p) {
  display: none;
}

@media (width > 400px) {
  .links-column {
    text-align: left;
  }

  footer.top .links {
    grid-template-columns: repeat(2, 1fr);
    margin-right: 50px;
  }

  footer.bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 20px;
    text-align: left;
  }

  footer.top .socials {
    left: 0;
    translate: 0;
  }

  footer.top > img {
    margin: 0 0 50px;
  }
}

@media (width >= 640px) {
  footer.top .links {
    grid-template-columns: repeat(3, 1fr);
  }

  footer.top .socials {
    position: static;
  }

  footer.bottom {
    justify-content: flex-start;
  }

  .socials-column :is(h2, p) {
    display: block;
  }
}

```
No need of JavaScript
```

Footer with Links

Enhance your website's usability with a footer featuring helpful links. Learn how to create a functional footer layout that provides users with easy access to important pages and resources.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>


<section>
  <footer class="top">
    <img src="https://www.frontendcomponent.com/favicon.ico" />
    <div class="links">
      <div>
        <h2>Platform</h2>
        <a>Directus Core</a>
        <a>Open Data Platform</a>
        <a>Feature List</a>
        <a>Road Map</a>
        <a>Marketplace</a>
      </div>
      <div>
        <h2>Cloud</h2>
        <a>Dashboard</a>
        <a>Register</a>
        <a>Pricing</a>
        <a>System Status</a>
        <a>Partner Program</a>
      </div>
    </div>
  </footer>
  <footer class="bottom">
    <div class="legal">
      <span> © 2023 All rights reserved </span>
      <a> License </a>
      <a> Terms </a>
      <a> Privacy </a>
    </div>
    <div class="links">
      <a class="fa-brands fa-github"></a>
      <a class="fa-brands fa-linkedin"></a>
      <a class="fa-brands fa-docker"></a>
    </div>
  </footer>
</section>

body {
  margin: 0;
  background: linear-gradient(172deg, #6644ff 50%, #ff99dd 300%);
  font-family: "Euclid Circular A", "Poppins";
  color: #f7f7f7;
}

html,
body {
  height: 100%;
}

section {
  position: fixed;
  left: 0;
  bottom: 12px;
  width: 100%;
  background: #172940;
  padding-top: 60px;
}

footer {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 0 30px;
}

@media (width < 620px) {
  footer {
    flex-direction: column;
  }

  footer.bottom {
    gap: 16px;
    flex-direction: column-reverse;
  }
}

footer > img {
  margin-top: 10px;
  width: 50px;
}

footer {
  color: #a2b5cd;
}

footer.top {
  border-bottom: 2px solid #3a4f6a;
  padding-bottom: 20px;
}

footer.bottom {
  padding: 20px 0;
  justify-content: space-between;
}

footer.top .links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.links > div {
  display: grid;
  gap: 10px;
  margin-bottom: 30px;
}

footer h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  color: #f7f7f7;
}

.legal {
  font-size: 12px;
}

.legal > a {
  margin: 0 4px;
}

.legal > span {
  margin-right: 10px;
}

footer.bottom .links {
  display: flex;
  gap: 18px;
}

footer.bottom .links > a {
  font-size: 24px;
}

@media (width < 420px) {
  footer {
    text-align: center;
    align-items: center;
  }

  footer.top .links {
    grid-template-columns: 1fr;
  }

  footer.bottom {
    align-items: center;
  }

  .legal > span {
    display: block;
    margin-right: 0;
    margin-bottom: 2px;
  }
}

```
No need of JavaScript
```

Wave Footer

Elevate your website with wave footers, adding a stylish and dynamic touch to your design. Learn how to implement wave footers to enhance the user experience of your website's bottom section.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<footer>
  <div class="background">
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px"
      y="0px"
      width="100%"
      height="100%"
      viewBox="0 0 1600 900"
    >
      <defs>
        <path
          id="wave"
          fill="rgba(105, 27, 252, 0.6)"
          d="M-363.852,502.589c0,0,236.988-41.997,505.475,0
  s371.981,38.998,575.971,0s293.985-39.278,505.474,5.859s493.475,48.368,716.963-4.995v560.106H-363.852V502.589z"
        />
      </defs>
      <g>
        <use xlink:href="#wave" opacity=".4">
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            dur="8s"
            calcMode="spline"
            values="270 230; -334 180; 270 230"
            keyTimes="0; .5; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
            repeatCount="indefinite"
          />
        </use>
        <use xlink:href="#wave" opacity=".6">
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            dur="6s"
            calcMode="spline"
            values="-270 230;243 220;-270 230"
            keyTimes="0; .6; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
            repeatCount="indefinite"
          />
        </use>
        <use xlink:href="#wave" opacty=".9">
          <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            dur="4s"
            calcMode="spline"
            values="0 230;-140 200;0 230"
            keyTimes="0; .4; 1"
            keySplines="0.42, 0, 0.58, 1.0;0.42, 0, 0.58, 1.0"
            repeatCount="indefinite"
          />
        </use>
      </g>
    </svg>
  </div>
  <section>
    <ul class="socials">
      <li><a class="fa-brands fa-x-twitter"></a></li>
      <li><a class="fa-brands fa-facebook"></a></li>
      <li><a class="fa-brands fa-linkedin"></a></li>
    </ul>
    <ul class="links">
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Portfolio</a></li>
      <li><a>Skillset</a></li>
      <li><a>Hire</a></li>
    </ul>
    <p class="legal">© 2024 All rights reserved</p>
  </section>
</footer>

body {
  margin: 0;
  background: linear-gradient(#1e152e, #161616);
  font-family: "Euclid Circular A", "Poppins";
  color: #d6dfed;
}

html,
body {
  height: 100%;
}

.background {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.socials {
  gap: 20px;
}

.socials a {
  font-size: 24px;
}

.links {
  gap: 10px;
}

.legal {
  font-size: 12px;
  margin: 0;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(3) scaleX(2.25);
  transform-origin: bottom;
  box-sizing: border-box;
  display: block;
  pointer-events: none;
}

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 370px;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 30px;
  padding-bottom: 80px;
  padding-left: 60px;
  width: 100%;
}

@media (width > 420px) {
  section {
    align-items: center;
    padding-left: 0;
    gap: 20px;
  }

  .links {
    gap: 20px;
  }
}

```
No need of JavaScript
```

Simple Footer

Complete your website with a clean and minimalist footer designed using HTML and CSS. Learn how to add essential information and links to enhance user experience and site functionality.

Author: Admin

Preview
Code

<div class="footer">
  <img src="https://www.frontendcomponent.com/favicon.ico" alt="Logo">
  <p>Copyright © 2024. All rights reserved.</p>
  <a href="#">Home</a>
  <a href="#">About Us</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

.footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.footer a {
  color: #fff;
  text-decoration: none;
  margin: 0 10px;
}

.footer img {
  width: 50px; 
  height: 50px; 
  margin-bottom: 10px;
}

```
No need of JavaScript
```