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

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
```

Learn to build a Footer with Social Links and Legal Information for your website using HTML and CSS with Font Awesome icons. This tutorial provides a detailed walkthrough, including copying the code snippet and linking the essential CSS for icons, enabling you to personalize and integrate this footer into your site seamlessly.

Step 1: Copy the Code Snippet

Start by copying the HTML and CSS code snippet provided below. Simply select the code, click copy, and paste it into your project files.

Step 2: Link CSS for Font Awesome Icons

To incorporate Font Awesome icons into your footer, link the Font Awesome CSS file in the <head> section of your HTML document:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="styles.css"> <!-- Your custom CSS file -->

Step 3: Customize and Make it Yours

Personalize the Footer with Social Links and Legal Information to fit your website's requirements. Adjust the CSS styles for colors, typography, and layout. Modify the icons and links to direct users to your social media profiles and legal pages.

Follow these steps to integrate and customize a Footer with Social Links and Legal Information on your website using HTML and CSS. Enhance user engagement by providing easy access to your social media platforms and essential legal pages.

Code Explanation

HTML Code

`<section>` Element:

Contains two <footer> elements, each representing a distinct footer section within the <section>.

First `<footer>` with class="top":

An <img> element with a src attribute pointing to a favicon (https://www.frontendcomponent.com/favicon.ico).
A <div> with class="links", serving as a container for multiple columns of links.
Three <div> elements with class="links-column", each containing:
- An <h2> heading representing a category of links.
- Several <a> tags representing individual links within each category.
The last .links-column with class="socials-column" also includes a paragraph (<p>) providing a brief description and a <div> with class="socials" containing social media icons represented by <a> tags with specific classes (fa-brands fa-facebook, fa-brands fa-instagram, fa-brands fa-linkedin).

Second `<footer>` with class="bottom":

A <p> element with class="copyright" displaying copyright information (© 2023 All rights reserved).
A <div> element with class="legal", which contains several <a> tags linking to legal documents such as license, terms, and privacy policies.

CSS Code

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

html,
body {
  height: 100%;
}

Sets the basic styles for the body and html, including a dark background color (#1f1d58), a specific font family ("Euclid Circular A", "Poppins"), and text color (#f7f7f7). Ensures full height (100%) for both html and body.

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

Styles the <section> element fixed at the bottom of the viewport (position: fixed; bottom: 0; left: 0; width: 100%;), with a dark blue background (#29277a) and padding at the top (padding-top: 60px;).

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

Styles the <img> inside .top footer, setting its height to 50px and adjusting margins to 0 auto 50px (top and bottom margins auto, left and right margin zero).

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

Defines general styles for all <footer> elements, positioning them relatively (position: relative;), setting horizontal margins to 30px, and adjusting text color to a lighter shade of white (rgb(255 255 255 / 50%)).

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

Styles the .top footer with a grid layout (display: grid;), a bottom border (border-bottom: 2px solid rgb(255 255 255 / 20%);), and padding at the bottom (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;
}

Styles the .bottom footer with flexbox (display: flex;), aligning items center (align-items: center;), spacing items between (justify-content: space-between;), reversing the column direction (flex-direction: column-reverse;), setting a gap between items (gap: 8px;), padding (padding: 20px 0;), and centering text (text-align: center;).

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

Styles .links inside .top footer with a grid layout (display: grid;), defining one column (grid-template-columns: repeat(1, 1fr);), setting a gap between grid items (gap: 30px;), and adding bottom margin (margin-bottom: 30px;).

@media (width < 620px) {
  footer {
    flex-direction: column;
  }
  footer.bottom {
    gap: 16px;
    flex-direction: column-reverse;
  }
}

Provides responsive styling for screens narrower than 620px. Changes footer direction to column (flex-direction: column;), adjusts gap (gap: 16px;), and reverses column direction in .bottom footer (flex-direction: column-reverse;).