Footer Layouts

Various footer layouts using flexbox. Features multi-column layouts, newsletter signup forms, social media links, and responsive designs. Perfect for website footers of any size.

PREVIEW

CODE

/* Simple Footer */
    .simple-footer {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    @media (min-width: 768px) {
      .simple-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }

    /* Multi-Column Footer */
    .footer-grid {
      display: grid;
      gap: 2rem;
    }

    @media (min-width: 768px) {
      .footer-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    /* Newsletter Section */
    .newsletter-form {
      display: flex;
      gap: 0.5rem;
    }

    /* Footer Bottom */
    .footer-bottom {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      align-items: center;
    }

    @media (min-width: 768px) {
      .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
      }
    }