Portfolio 4 Columns

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Exomm – Lead Popup</title>
  <style>
    /* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: #f5f5f5;
      color: #111;
    }

    /* ── Demo Page Background ── */
    .demo-page {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      padding: 40px 20px;
      text-align: center;
    }
    .demo-page h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: #111; }
    .demo-page p  { color: #666; font-size: 1rem; max-width: 400px; }
    .demo-btn {
      margin-top: 8px;
      padding: 12px 28px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.95rem;
      cursor: pointer;
      transition: background .2s;
    }
    .demo-btn:hover { background: #333; }

    /* ── Overlay ── */
    #popup-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }
    #popup-overlay.visible {
      opacity: 1;
      pointer-events: all;
    }

    /* ── Popup Card ── */
    .popup-card {
      background: #fff;
      border-radius: 20px;
      width: 100%;
      max-width: 480px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.18);
      transform: translateY(24px) scale(0.97);
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
    }
    #popup-overlay.visible .popup-card {
      transform: translateY(0) scale(1);
    }

    /* ── Top Banner ── */
    .popup-banner {
      background: linear-gradient(135deg, #0f0f0f 0%, #2a2a2a 100%);
      padding: 36px 36px 28px;
      text-align: center;
      position: relative;
    }
    .popup-badge {
      display: inline-block;
      background: rgba(255,255,255,0.12);
      color: #e0e0e0;
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 16px;
      border: 1px solid rgba(255,255,255,0.15);
    }
    .popup-headline {
      font-size: clamp(1.35rem, 3.5vw, 1.75rem);
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
      margin-bottom: 10px;
    }
    .popup-headline span {
      background: linear-gradient(90deg, #a78bfa, #60a5fa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .popup-subtext {
      font-size: 0.88rem;
      color: #aaa;
      line-height: 1.6;
    }

    /* ── Perks List ── */
    .popup-perks {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 24px 36px 0;
    }
    .perk-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.88rem;
      color: #444;
    }
    .perk-icon {
      width: 22px;
      height: 22px;
      background: #f0f0f0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.75rem;
    }

    /* ── Form Area ── */
    .popup-form {
      padding: 20px 36px 32px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .input-row {
      display: flex;
      gap: 10px;
    }
    .popup-input {
      flex: 1;
      padding: 13px 16px;
      border: 1.5px solid #e5e5e5;
      border-radius: 10px;
      font-size: 0.92rem;
      color: #111;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
      background: #fafafa;
      width: 100%;
    }
    .popup-input::placeholder { color: #bbb; }
    .popup-input:focus {
      border-color: #a78bfa;
      box-shadow: 0 0 0 3px rgba(167,139,250,0.12);
      background: #fff;
    }
    .popup-cta {
      padding: 14px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 10px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .2s, transform .15s;
      letter-spacing: 0.01em;
    }
    .popup-cta:hover  { background: #2a2a2a; transform: translateY(-1px); }
    .popup-cta:active { transform: translateY(0); }

    /* ── Success State ── */
    .success-state {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 36px;
      text-align: center;
      gap: 12px;
    }
    .success-icon {
      width: 60px;
      height: 60px;
      background: #f0fdf4;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      margin-bottom: 4px;
    }
    .success-title { font-size: 1.3rem; font-weight: 700; color: #111; }
    .success-msg   { font-size: 0.88rem; color: #666; max-width: 280px; line-height: 1.6; }
    .success-close {
      margin-top: 8px;
      padding: 11px 28px;
      background: #111;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 0.9rem;
      cursor: pointer;
    }

    /* ── Footer note ── */
    .popup-footnote {
      text-align: center;
      font-size: 0.75rem;
      color: #bbb;
      padding: 0 36px 24px;
    }
    .popup-footnote a { color: #bbb; text-decoration: underline; }

    /* ── Close Button ── */
    .popup-close {
      position: absolute;
      top: 14px;
      right: 16px;
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,0.1);
      border: none;
      border-radius: 50%;
      color: #fff;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s;
      line-height: 1;
    }
    .popup-close:hover { background: rgba(255,255,255,0.2); }

    /* ── Mobile tweaks ── */
    @media (max-width: 480px) {
      .popup-banner { padding: 28px 24px 22px; }
      .popup-perks  { padding: 20px 24px 0; }
      .popup-form   { padding: 16px 24px 28px; }
      .popup-footnote { padding: 0 24px 20px; }
      .input-row    { flex-direction: column; }
      .success-state { padding: 40px 24px; }
    }
  </style>
</head>
<body>

<!-- ── Demo Page ── -->
<div class="demo-page">
  <h1>Exomm</h1>
  <p>Your homepage content goes here. The popup will appear automatically after 3 seconds.</p>
  <button class="demo-btn" onclick="showPopup()">Preview Popup Again</button>
</div>

<!-- ── Popup ── -->
<div id="popup-overlay" role="dialog" aria-modal="true" aria-labelledby="popup-title">
  <div class="popup-card">

    <!-- Banner -->
    <div class="popup-banner">
      <button class="popup-close" onclick="closePopup()" aria-label="Close">&times;</button>
      <div class="popup-badge">Free Resource</div>
      <h2 class="popup-headline" id="popup-title">
        Grow Smarter with<br><span>Exomm Insights</span>
      </h2>
      <p class="popup-subtext">Join 5,000+ professionals getting our weekly playbook — free.</p>
    </div>

    <!-- Default Form State -->
    <div id="form-state">
      <!-- Perks -->
      <ul class="popup-perks" role="list">
        <li class="perk-item">
          <div class="perk-icon">✦</div>
          Actionable strategies delivered weekly
        </li>
        <li class="perk-item">
          <div class="perk-icon">✦</div>
          Exclusive templates & frameworks
        </li>
        <li class="perk-item">
          <div class="perk-icon">✦</div>
          No spam. Unsubscribe anytime.
        </li>
      </ul>

      <!-- Form -->
      <div class="popup-form">
        <div class="input-row">
          <input class="popup-input" type="text"  id="lead-name"  placeholder="First name" autocomplete="given-name" />
          <input class="popup-input" type="text"  id="lead-last"  placeholder="Last name"  autocomplete="family-name" />
        </div>
        <input class="popup-input" type="email" id="lead-email" placeholder="Your email address" autocomplete="email" />
        <button class="popup-cta" onclick="handleSubmit()">Get Free Access →</button>
      </div>

      <p class="popup-footnote">
        By signing up you agree to our <a href="#">Privacy Policy</a>. We respect your inbox.
      </p>
    </div>

    <!-- Success State -->
    <div class="success-state" id="success-state">
      <div class="success-icon">🎉</div>
      <p class="success-title">You're in!</p>
      <p class="success-msg">Thanks for joining Exomm. Check your inbox for your first edition shortly.</p>
      <button class="success-close" onclick="closePopup()">Back to Site</button>
    </div>

  </div>
</div>

<script>
  // ── Auto-trigger after 3 seconds ──
  setTimeout(showPopup, 3000);

  function showPopup() {
    document.getElementById('popup-overlay').classList.add('visible');
    document.body.style.overflow = 'hidden';
  }

  function closePopup() {
    document.getElementById('popup-overlay').classList.remove('visible');
    document.body.style.overflow = '';
  }

  // Close on overlay click
  document.getElementById('popup-overlay').addEventListener('click', function(e) {
    if (e.target === this) closePopup();
  });

  // Close on Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') closePopup();
  });

  function handleSubmit() {
    const name  = document.getElementById('lead-name').value.trim();
    const email = document.getElementById('lead-email').value.trim();
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!name) { alert('Please enter your first name.'); return; }
    if (!emailRegex.test(email)) { alert('Please enter a valid email address.'); return; }

    // ── Hook your form submission here (e.g. Mailchimp, HubSpot, etc.) ──
    // fetch('/your-api-endpoint', { method: 'POST', body: JSON.stringify({ name, email }) });

    document.getElementById('form-state').style.display = 'none';
    const s = document.getElementById('success-state');
    s.style.display = 'flex';
  }
</script>
</body>
</html>
Women Shoes

Claue Watch

Handmade Craft

Shoe Cleaner

Branding Design Mockup

Handmade Candle

Poster Mockup

Leather bag
