Sweepstakes Landing Page (You Might Find Useful)

zerosugar · Apr 15, 2025

Hey,

I created this a few days ago—maybe it can help someone.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Congratulations - You're  a Winner! 🎉</title>
     <script src="https://unpkg.com/lucide@latest"></script>
    <style>
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
              font-family:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica  Neue", Arial, sans-serif;
         }

          body {
              min-height: 100vh;
              background: linear-gradient(to bottom, #2563eb,  #1d4ed8);
              color: white;
              padding: 2rem 1rem;
         }

          .confetti-overlay {
              position: fixed;
              inset: 0;
              pointer-events: none;
              opacity:  0;
              transition: opacity 1s;
         }

          .confetti-overlay.show {
              opacity: 1;
         }

          .confetti-bg {
              position: absolute;
              inset: 0;
              background-image: url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?auto=format&fit=crop&q=80');
              background-size: cover;
              opacity:  0.2;
         }

         .main-content {
              position:  relative;
              z-index: 10;
              display: flex;
              flex-direction: column;
              align-items: center;
              opacity: 0;
              transform:  translateY(1rem);
              transition: all 1s;
         }

          .main-content.show {
              opacity: 1;
              transform: translateY(0);
         }

          .header-icon {
              margin-bottom: 1.5rem;
              animation: bounce 1s  infinite;
         }

         @keyframes bounce  {
              0%, 100% { transform: translateY(0); }
              50%  { transform: translateY(-10px); }
         }

          h1 {
              font-size: 2.5rem;
              font-weight: bold;
              text-align: center;
              margin-bottom:  1rem;
              color: #fde047;
         }

         .prize-card  {
              background-color: rgba(255, 255, 255, 0.1);
              backdrop-filter: blur(12px);
              border-radius:  1rem;
              padding: 1.5rem;
              width: 100%;
              max-width: 24rem;
              margin-bottom: 2rem;
          }

         .prize-title {
              font-size: 1.5rem;

Sweepstakes Landing Page (You Might Find Useful)

zerosugar

Super Contributor

Attachments