FlixBotDev
Login
← Retour galerie

Footers · html-css · intermediate

Mega CTA

Bannière CTA finale + liens minimalistes sous le fold

Ouvrir Studio

Aperçu live

Code

:root {
      --ink: #040506;
      --acid: #b8ff2e;
      --muted: rgba(255, 255, 255, 0.5);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: var(--ink);
      font-family: "Segoe UI", system-ui, sans-serif;
      color: #fff;
    }

    .banner {
      margin: 0 1.25rem;
      padding: 2.5rem 2rem;
      border-radius: 28px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #12151c 0%, #0a0c10 60%);
      border: 1px solid rgba(184, 255, 46, 0.2);
      box-shadow: 0 0 60px rgba(184, 255, 46, 0.08);
      text-align: center;
    }

    .banner::before {
      content: "";
      position: absolute;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(184, 255, 46, 0.25), transparent 70%);
      top: -80px;
      right: -40px;
      pointer-events: none;
    }

    .banner h2 {
      font-size: clamp(1.6rem, 4vw, 2.4rem);
      font-weight: 950;
      letter-spacing: -0.04em;
      margin-bottom: 0.6rem;
      position: relative;
    }

    .banner p {
      color: var(--muted);
      margin-bottom: 1.4rem;
      position: relative;
    }

    .banner a {
      display: inline-flex;
      padding: 0.9rem 1.7rem;
      border-radius: 999px;
      background: var(--acid);
      color: #06100a;
      font-weight: 850;
      text-decoration: none;
      box-shadow: 0 0 36px rgba(184, 255, 46, 0.35);
      position: relative;
      transition: transform 0.2s ease;
    }

    .banner a:hover { transform: translateY(-2px); }

    footer {
      padding: 2rem 1.5rem 1.5rem;
    }

    .links {
      max-width: 900px;
      margin: 0 auto 1.5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.5rem;
      justify-content: center;
    }

    .links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.2s ease;
    }

    .links a:hover { color: var(--acid); }

    .copy {
      text-align: center;
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.35);
    }

Envie de tweak les tokens ? Code Studio