Footer

The footer adopts the same minimal and grounded design language as the rest of the system, offering visual balance at the page’s end without drawing excess attention. Its clean layout, consistent spacing, and semantic structure reinforce usability while serving as a calm closing element across breakpoints.

HTML


<footer class="footer-container">
  <div class="footer-logo-copy">
    <span class="footer-label">&copy; Rahul Singh, 2025</span>
  </div>
  <div class="footer-logo">
    <a href="#"><img src="../Assets/Logo/Logo Color White Background.png" alt="Logo"></a>
  </div>
  <div class="footer-socials">
    <span class="footer-label">Let's Connect:</span>
    <a href="#"><img src="../Assets/LinkedIn.svg" alt="LinkedIn"></a>
    <a href="#"><img src="../Assets/Instagram.svg" alt="Instagram"></a>
    <a href="#"><img src="../Assets/Email.svg" alt="Email"></a>
  </div>
</footer>

CSS


.footer-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px 32px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-default-light);
  background: var(--surface-light);
}

.footer-logo-copy,
.footer-logo,
.footer-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0;
  width: 100%;
}

.footer-logo-copy {
  gap: 8px;
  flex-wrap: wrap;
}

.footer-logo {
  height: 48px;
  /* padding: 8px 2px; */
  gap: 4px;
}

.footer-logo img {
  width: 48px;
  height: 48px;
}

.footer-socials {
  flex-wrap: nowrap;
  gap: 32px;
  align-content: center;
}

.footer-socials img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.footer-label {
  font-family: var(--font-label);
  font-size: var(--label-large-font-size);
  font-weight: 500;
}

/* If the image is a raster or SVG where color is not respected, use filter: */
.footer-socials img:hover {
  filter: brightness(0) saturate(100%) invert(32%) sepia(87%) saturate(2643%) hue-rotate(203deg) brightness(75%) contrast(94%);
}

/* If the image is an SVG and uses fill, use the following instead: */
/* .footer-socials img:hover {
     fill: var(--icon-primary);
} */


@media (max-width: 999px) {
  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

Accessibility

The footer maintains high WCAG AAA contrast across all text and interactive elements, ensuring legibility in both light and dark environments. Its minimalist structure and clear spacing support quick scanning without visual strain, reinforcing a calm, accessible conclusion to each page.