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.

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

Create an attractive Footer with Links for your website using HTML and CSS with Font Awesome icons. This tutorial will guide you through copying the code snippet, linking the necessary CSS for icons, and customizing the footer to match your website's design.

Step 1: Copy the Code Snippet

Begin by copying the HTML and CSS code snippet provided below. Select the code, click the copy button, and paste it into your project files.

Step 2: Link CSS for Font Awesome Icons

To include Font Awesome icons in 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 Links to suit your website's needs. Adjust the CSS styles for colors, typography, and layout. Modify the icons and links to direct users to relevant pages or sections of your website.

By following these steps, you can integrate and customize a Footer with Links and Font Awesome icons on your website using HTML and CSS. Enhance user navigation and engagement by adding social media links or other relevant links to this stylish footer.

Code Explanation

HTML Code

Section (`<section>`):

Used to logically group the footer content.

Top Footer (`<footer class="top">`):

Contains an image (<img>) that likely represents the logo or icon of the website (https://www.frontendcomponent.com/favicon.ico).
<div class="links"> contains two separate <div> elements, each grouping related links:
Platform:
- Contains links related to Directus Core, Open Data Platform, Feature List, Road Map, and Marketplace.
Cloud:
- Contains links related to Dashboard, Register, Pricing, System Status, and Partner Program.

Bottom Footer (`<footer class="bottom">`):

Legal Section (<div class="legal">):
- Displays copyright information (© 2023 All rights reserved).
- Includes links for License, Terms, and Privacy.
Social Links (<div class="links">):
- Contains social media icons represented as Font Awesome classes (fa-github, fa-linkedin, fa-docker), which typically link to respective social media profiles.

CSS Code

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

html,
body {
  height: 100%;
}

Sets the body to have no margin, a gradient background from purple (#6644ff) to pink (#ff99dd), and uses the fonts "Euclid Circular A" and fallback to "Poppins". Text color is light gray (#f7f7f7).
Ensures that both HTML and body elements occupy the full viewport height.

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

Styles a fixed-position section at the bottom of the viewport (position: fixed;, bottom: 12px;) spanning the full width (width: 100%;).
Sets a dark blue background (#172940) and adds top padding (60px) for content spacing.

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

Configures the footer as a flex container (display: flex;) with items aligned to the start (align-items: flex-start;).
Adds a gap of 40px between child elements and sets margins of 0 on the sides and 30px on the top and bottom.

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

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

Defines a media query for screens narrower than 620px.
Changes the flex direction of the footer to column layout (flex-direction: column;).
Adjusts spacing (gap: 16px;) and reverses the column order for the .bottom footer (flex-direction: column-reverse;).

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

Targets images directly inside the footer and applies a top margin (10px) and fixed width (50px).

footer {
  color: #a2b5cd;
}

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

Sets text color for all footer elements to a light blue-gray (#a2b5cd).
Adds a bottom border (2px solid #3a4f6a) and padding (20px) only to the .top footer section.

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

Adds padding (20px top and bottom, 0 left and right) to the .bottom footer and evenly spaces its children horizontally (justify-content: space-between;).

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

Targets .links within .top footer and styles it as a grid container (display: grid;).
Defines a grid layout with two equal columns (grid-template-columns: repeat(2, 1fr);) and a gap of 30px between grid items.

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

Targets div elements within .links and styles them as grid containers (display: grid;).
Applies a gap of 10px between child elements and adds a bottom margin of 30px.

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

Styles h2 elements within the footer with no margin (margin: 0;), a font size of 16px, a normal font weight (400), and light gray text color (#f7f7f7).

.legal {
  font-size: 12px;
}
.legal > a {
  margin: 0 4px;
}
.legal > span {
  margin-right: 10px;
}

Sets the font size for elements with class .legal to 12px.
Adds a small margin (4px) around anchor (<a>) elements within .legal.
Provides a right margin (10px) to <span> elements within .legal.

footer.bottom .links {
  display: flex;
  gap: 18px;
}
footer.bottom .links > a {
  font-size: 24px;
}

Targets .links within .bottom footer and styles it as a flex container (display: flex;) with an 18px gap between child elements.
Sets font size to 24px for anchor elements (<a>) within .links.

@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;
  }
}

Defines a media query for screens narrower than 420px.
Centers text and items within the footer (text-align: center;, align-items: center;).
Changes the grid layout to a single column for .top footer links (grid-template-columns: 1fr;).
Centers items vertically for .bottom footer (align-items: center;).
Converts <span> elements within .legal to block elements (display: block;), removes right margin, and adds bottom margin (2px).