Templates Footer

<footer class="footer-simple">
  <div class="footer-simple__inner">
    <span>© 2025 MonSite. Tous droits réservés.</span>
    <nav class="footer-simple__links">
      <a href="#">Confidentialité</a>
      <a href="#">CGU</a>
      <a href="#">Contact</a>
    </nav>
  </div>
</footer>

.footer-simple {
  background: #1A1A2E;
  padding: 24px 0;
}
.footer-simple__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-simple__inner span { color: rgba(255,255,255,0.5); font-size:.875rem; }
.footer-simple__links { display: flex; gap: 24px; }
.footer-simple__links a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}
.footer-simple__links a:hover { color: white; }

<footer class="footer-cols">
  <div class="footer-cols__inner">
    <div class="footer-cols__grid">
      <div class="footer-cols__brand">
        <a href="#" class="footer-cols__logo">MonSite</a>
        <p>La meilleure plateforme pour vos projets.</p>
      </div>
      <div class="footer-cols__col">
        <h4>Produit</h4>
        <ul>
          <li><a href="#">Fonctionnalités</a></li>
          <li><a href="#">Tarifs</a></li>
          <li><a href="#">Changelog</a></li>
        </ul>
      </div>
      <div class="footer-cols__col">
        <h4>Entreprise</h4>
        <ul>
          <li><a href="#">À propos</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-cols__bottom">
      <span>© 2025 MonSite</span>
      <span>Fait avec ❤️</span>
    </div>
  </div>
</footer>

.footer-cols { background:#fff; border-top:1px solid #e5e7eb; padding:48px 0 24px; }
.footer-cols__inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.footer-cols__grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:32px; }
.footer-cols__logo { font-size:1.25rem; font-weight:800; color:#6C63FF; text-decoration:none; display:block; margin-bottom:10px; }
.footer-cols__brand p { color:#6b7280; font-size:.875rem; line-height:1.6; }
.footer-cols__col h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-cols__col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-cols__col a { color:#6b7280; text-decoration:none; font-size:.875rem; transition:color .2s; }
.footer-cols__col a:hover { color:#6C63FF; }
.footer-cols__bottom { display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid #e5e7eb; font-size:.875rem; color:#9CA3AF; }

<footer class="footer-social">
  <div class="footer-social__inner">
    <a href="#" class="footer-social__logo">MonSite</a>
    <p>Suivez-nous sur les réseaux sociaux</p>
    <div class="footer-social__links">
      <a href="#" class="footer-social__link" aria-label="GitHub">GH</a>
      <a href="#" class="footer-social__link" aria-label="Twitter">TW</a>
      <a href="#" class="footer-social__link" aria-label="LinkedIn">LI</a>
      <a href="#" class="footer-social__link" aria-label="YouTube">YT</a>
    </div>
    <p class="footer-social__copy">© 2025 MonSite — Tous droits réservés</p>
  </div>
</footer>

.footer-social { background:#fff; border-top:1px solid #e5e7eb; padding:48px 0; text-align:center; }
.footer-social__inner { max-width:600px; margin:0 auto; padding:0 24px; }
.footer-social__logo { display:inline-block; font-size:1.5rem; font-weight:800; color:#6C63FF; text-decoration:none; margin-bottom:8px; }
.footer-social__inner p { color:#6b7280; font-size:.875rem; margin-bottom:24px; }
.footer-social__links { display:flex; justify-content:center; gap:12px; margin-bottom:32px; }
.footer-social__link {
  width:44px; height:44px;
  background:#f9fafb; border:1.5px solid #e5e7eb; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#6b7280; text-decoration:none; font-size:.875rem; font-weight:700;
  transition:all .2s;
}
.footer-social__link:hover {
  background:#6C63FF; color:white; border-color:#6C63FF;
  transform:translateY(-3px); box-shadow:0 8px 20px rgba(108,99,255,.3);
}
.footer-social__copy { font-size:.8rem; color:#9CA3AF; }

<footer class="footer-newsletter">
  <div class="footer-newsletter__inner">
    <div class="footer-newsletter__grid">
      <div>
        <span class="footer-newsletter__logo">MonSite</span>
        <p>Restez informé des dernières actualités.</p>
      </div>
      <div class="footer-newsletter__form-col">
        <h4>Newsletter</h4>
        <form id="newsletter-form">
          <input type="email" id="nl-email" placeholder="votre@email.com" required />
          <button type="submit">S'inscrire →</button>
        </form>
        <p id="nl-msg" class="footer-newsletter__msg"></p>
      </div>
    </div>
    <div class="footer-newsletter__bottom">
      <span>© 2025 MonSite. Tous droits réservés.</span>
    </div>
  </div>
</footer>

.footer-newsletter { background:linear-gradient(135deg,#0D0D1A,#1A1A3E); padding:56px 0 24px; }
.footer-newsletter__inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.footer-newsletter__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:40px; }
.footer-newsletter__logo { display:block; font-size:1.5rem; font-weight:800; color:white; margin-bottom:12px; }
.footer-newsletter__form-col h4 { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.7); margin-bottom:14px; }
.footer-newsletter__form-col form { display:flex; gap:8px; }
.footer-newsletter__form-col input { flex:1; padding:12px 20px; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.2); border-radius:999px; color:white; font-size:.875rem; outline:none; transition:all .2s; }
.footer-newsletter__form-col input:focus { border-color:#6C63FF; }
.footer-newsletter__form-col button { padding:12px 24px; background:linear-gradient(135deg,#6C63FF,#0FCCCE); color:white; border:none; border-radius:999px; font-weight:700; cursor:pointer; }
.footer-newsletter__form-col button:hover { transform:translateY(-2px); }
.footer-newsletter__msg { margin-top:8px; font-size:.8rem; }
.footer-newsletter__msg.success { color:#10B981; }
.footer-newsletter__msg.error   { color:#EF4444; }
.footer-newsletter__bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:24px; text-align:center; color:rgba(255,255,255,.35); font-size:.875rem; }

const form  = document.getElementById('newsletter-form');
const email = document.getElementById('nl-email');
const msg   = document.getElementById('nl-msg');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  msg.className = 'footer-newsletter__msg';
  const val = email.value.trim();
  const ok  = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);

  if (!val) {
    msg.textContent = '⚠ Email requis.';
    msg.classList.add('error');
  } else if (!ok) {
    msg.textContent = '⚠ Email invalide.';
    msg.classList.add('error');
  } else {
    msg.textContent = '✅ Inscription réussie !';
    msg.classList.add('success');
    email.value = '';
    setTimeout(() => msg.textContent = '', 4000);
  }
});

<footer class="footer-enterprise">
  <div class="footer-enterprise__inner">
    <div class="footer-enterprise__grid">

      <!-- Brand -->
      <div class="footer-enterprise__brand">
        <a href="#" class="footer-enterprise__logo">🚀 MonEntreprise</a>
        <p>Nous construisons les outils de demain pour les développeurs d'aujourd'hui.</p>
        <div class="footer-enterprise__social">
          <a href="#" aria-label="GitHub">GH</a>
          <a href="#" aria-label="Twitter">TW</a>
          <a href="#" aria-label="LinkedIn">LI</a>
        </div>
      </div>

      <!-- Colonnes -->
      <div class="footer-enterprise__col">
        <h4>Produit</h4>
        <ul>
          <li><a href="#">Features</a></li>
          <li><a href="#">Tarifs</a></li>
          <li><a href="#">API</a></li>
          <li><a href="#">Docs</a></li>
        </ul>
      </div>
      <div class="footer-enterprise__col">
        <h4>Entreprise</h4>
        <ul>
          <li><a href="#">À propos</a></li>
          <li><a href="#">Carrières</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
      <div class="footer-enterprise__col">
        <h4>Légal</h4>
        <ul>
          <li><a href="#">Confidentialité</a></li>
          <li><a href="#">CGU</a></li>
          <li><a href="#">Cookies</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-enterprise__bottom">
      <span>© 2025 MonEntreprise SAS. Tous droits réservés.</span>
      <span>🇫🇷 France</span>
    </div>
  </div>
</footer>

.footer-enterprise { background:#0F0F1E; padding:64px 0 24px; }
.footer-enterprise__inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.footer-enterprise__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-enterprise__logo { display:block; font-size:1.1rem; font-weight:800; color:white; text-decoration:none; margin-bottom:12px; }
.footer-enterprise__brand p { color:rgba(255,255,255,.45); font-size:.875rem; line-height:1.7; margin-bottom:20px; max-width:280px; }
.footer-enterprise__social { display:flex; gap:8px; }
.footer-enterprise__social a { width:36px; height:36px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:9px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); text-decoration:none; font-size:.8rem; font-weight:700; transition:all .2s; }
.footer-enterprise__social a:hover { background:#6C63FF; color:white; border-color:#6C63FF; transform:translateY(-2px); }
.footer-enterprise__col h4 { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.4); margin-bottom:16px; }
.footer-enterprise__col ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-enterprise__col a { color:rgba(255,255,255,.45); text-decoration:none; font-size:.875rem; transition:color .2s; }
.footer-enterprise__col a:hover { color:white; }
.footer-enterprise__bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:.875rem; color:rgba(255,255,255,.25); }
@media(max-width:768px) { .footer-enterprise__grid { grid-template-columns:1fr 1fr; } .footer-enterprise__brand { grid-column:1/-1; } }

Des footers conçus comme une signature de fin de page

Une collection triée par rôle dans l'expérience

Footers pensés pour cadrer la fin de page

Footers pour relation, communauté et visibilité

Footers conçus pour engager et convertir