UiBlitz - Developers Hub: Build. Learn. Earn

Service Section

HTML

@teamuiblitz100

<!-- cursors -->
<div id="cur"></div>
<div id="cur-ring"></div>
 
<!-- floating image (one shared, image src swapped by JS) -->
<div class="float-img" id="fimg">
  <img id="fimg-src" src="" alt=""/>
  <div class="img-label" id="fimg-label"></div>
</div>
 
<div class="page">
 
  <div class="xhair"></div>
  <div class="xhair-ring"></div>
 
  <!-- top bar -->
  <div class="top-bar">
    <span class="top-label">UIblitz Studio</span>
    <div class="top-right">
      <div class="top-dot"></div>
      <span class="top-status">Available for projects</span>
    </div>
  </div>
 
  <!-- heading -->
  <div class="heading-wrap">
    <h1 class="heading">SERVICES</h1>
  </div>
 
  <!-- list -->
  <div class="list"
    data-images='[
      "https://images.unsplash.com/photo-1634986666676-ec8fd927c23d?w=700&q=85&auto=format&fit=crop",
      "https://images.unsplash.com/photo-1533090161767-e6ffed986c88?w=700&q=85&auto=format&fit=crop",
      "https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=700&q=85&auto=format&fit=crop",
      "https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=700&q=85&auto=format&fit=crop"
    ]'>
 
    <!-- Brand -->
    <div class="row"
      data-img="https://images.unsplash.com/photo-1634986666676-ec8fd927c23d?w=700&q=85&auto=format&fit=crop"
      data-label="Brand Identity">
      <span class="num">01</span>
      <span class="name">Brand</span>
      <div class="tags">
        Look &amp; Feel<br/>
        Core Elements<br/>
        Brand Guidelines
      </div>
      <p class="desc">We create engaging brand and campaign identities that resonate with your target audience — from logo design to complete brand experience.</p>
      <span class="row-arrow">↗</span>
    </div>
 
    <!-- Campaign -->
    <div class="row"
      data-img="https://images.unsplash.com/photo-1533090161767-e6ffed986c88?w=700&q=85&auto=format&fit=crop"
      data-label="Campaign">
      <span class="num">02</span>
      <span class="name">Campaign</span>
      <div class="tags">
        Campaign Tools<br/>
        Key Visuals<br/>
        Activations
      </div>
      <p class="desc">Key visuals, messaging, and adaptable designs across all touchpoints. From partnerships to events — we connect brands with unforgettable moments.</p>
      <span class="row-arrow">↗</span>
    </div>
 
    <!-- Content -->
    <div class="row"
      data-img="https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?w=700&q=85&auto=format&fit=crop"
      data-label="Content">
      <span class="num">03</span>
      <span class="name">Content</span>
      <div class="tags">
        Social Assets<br/>
        Motion &amp; Photo<br/>
        Copywriting
      </div>
      <p class="desc">Content at every stage of your strategy — from awareness visuals to engaging social assets. Videos, motion graphics, and designs that drive action.</p>
      <span class="row-arrow">↗</span>
    </div>
 
    <!-- Web -->
    <div class="row"
      data-img="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?w=700&q=85&auto=format&fit=crop"
      data-label="Web & Digital">
      <span class="num">04</span>
      <span class="name">Web</span>
      <div class="tags">
        UI Design<br/>
        Development<br/>
        Interaction
      </div>
      <p class="desc">Websites and digital products built with precision and performance. We design and develop experiences that look stunning and convert beautifully.</p>
      <span class="row-arrow">↗</span>
    </div>
 
  </div>
 
  <!-- bottom bar -->
  <div class="bottom-bar">
    <span class="b-left">Studio · 2025</span>
    <div class="b-center">
      <a href="#" class="b-link">Work</a>
      <a href="#" class="b-link">About</a>
      <a href="#" class="b-link">Contact</a>
    </div>
    <span class="b-right">Selected Services</span>
  </div>
 
</div>

    :root {
      --bg:    #f2f0eb;
      --text:  #0d0d0d;
      --muted: #999;
      --acc:   #d94f1e;
      --bdr:   rgba(0,0,0,0.09);
    }
 
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
 
    html, body {
      background: #181818;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'DM Sans', sans-serif;
      cursor: none;
    }
 
    /* ── cursor ── */
    #cur {
      position: fixed; z-index: 9999;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--acc);
      pointer-events: none;
      transform: translate(-50%,-50%);
      transition: width .3s cubic-bezier(.34,1.56,.64,1),
                  height .3s cubic-bezier(.34,1.56,.64,1),
                  background .25s, border-radius .3s;
      will-change: transform;
    }
    #cur-ring {
      position: fixed; z-index: 9998;
      width: 38px; height: 38px;
      border: 1px solid rgba(217,79,30,0.5);
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%,-50%);
      will-change: transform;
      transition: opacity .2s;
    }
 
    /* ── page card ── */
    .page {
      width: 100%; max-width: 1220px;
      background: var(--bg);
      padding: 0 80px 72px;
      position: relative;
      overflow: hidden;
    }
 
    /* top strip */
    .top-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 0 0;
      animation: fadein .5s ease both;
    }
    .top-label {
      font-size: 11px; font-weight: 600;
      letter-spacing: 3px; text-transform: uppercase;
      color: var(--muted);
    }
    .top-right {
      display: flex; align-items: center; gap: 6px;
    }
    .top-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--acc);
      animation: blink 1.8s ease-in-out infinite;
    }
    @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.2;} }
    .top-status {
      font-size: 11px; font-weight: 500;
      letter-spacing: 2px; text-transform: uppercase;
      color: var(--muted);
    }
 
    /* ── big heading ── */
    .heading-wrap {
      padding: 36px 0 56px;
      overflow: hidden;
    }
    .heading {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(96px, 13.5vw, 192px);
      font-weight: 400;
      color: var(--text);
      letter-spacing: -5px;
      line-height: 0.88;
      margin-left: -8px;
      animation: headrise .9s cubic-bezier(.16,1,.3,1) .1s both;
    }
    @keyframes headrise {
      from { opacity:0; transform:translateY(60px); }
      to   { opacity:1; transform:translateY(0); }
    }
 
    /* crosshair */
    .xhair {
      position: absolute; top: 52px; right: 80px;
      width: 24px; height: 24px;
      opacity: 0.28;
    }
    .xhair::before { content:''; position:absolute; width:1px; height:100%; background:var(--text); left:50%; top:0; }
    .xhair::after  { content:''; position:absolute; width:100%; height:1px; background:var(--text); top:50%; left:0; }
    .xhair-ring {
      position: absolute; top: 46px; right: 74px;
      width: 36px; height: 36px;
      border: 1px solid rgba(0,0,0,0.2); border-radius: 50%;
    }
 
    /* ── service list ── */
    .list { width: 100%; }
 
    /* ── single row ── */
    .row {
      position: relative;
      display: grid;
      grid-template-columns: 52px 1fr 220px 1fr;
      align-items: center;
      gap: 0 48px;
      padding: 34px 0;
      border-top: 1px solid var(--bdr);
      cursor: none;
      overflow: visible;
      transition: background .4s;
      animation: rowin .6s cubic-bezier(.16,1,.3,1) both;
    }
    .row:nth-child(1){animation-delay:.3s;}
    .row:nth-child(2){animation-delay:.42s;}
    .row:nth-child(3){animation-delay:.54s;}
    .row:nth-child(4){animation-delay:.66s;}
    .row:last-child { border-bottom: 1px solid var(--bdr); }
 
    @keyframes rowin {
      from{opacity:0;transform:translateY(22px);}
      to{opacity:1;transform:translateY(0);}
    }
 
    /* hover row bg */
    .row::before {
      content:'';
      position:absolute; inset:0;
      background: rgba(0,0,0,0.025);
      transform: scaleX(0); transform-origin:left;
      transition: transform .5s cubic-bezier(.16,1,.3,1);
      pointer-events:none; z-index:0;
    }
    .row:hover::before { transform:scaleX(1); }
 
    .row > * { position: relative; z-index:1; }
 
    /* number */
    .num {
      font-size: 11px; font-weight: 500;
      color: var(--muted); letter-spacing: 1.5px;
      transition: color .25s, font-weight .25s;
    }
    .row:hover .num { color: var(--acc); font-weight: 700; }
 
    /* name */
    .name {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(38px, 4.2vw, 60px);
      font-weight: 400;
      color: var(--text);
      letter-spacing: -1.5px;
      line-height: 1;
      transition: transform .4s cubic-bezier(.16,1,.3,1), letter-spacing .4s;
    }
    .row:hover .name {
      transform: translateX(8px);
      letter-spacing: -0.5px;
    }
 
    /* tags */
    .tags {
      font-size: 11px; font-weight: 400;
      color: var(--acc);
      line-height: 1.9;
      transition: opacity .3s;
    }
 
    /* desc */
    .desc {
      font-size: 13px; font-weight: 400;
      color: #777;
      line-height: 1.75;
      max-width: 300px;
      transition: color .3s;
    }
    .row:hover .desc { color: #333; }
 
    /* ── FLOATING IMAGE (follows cursor) ── */
    .float-img {
      position: fixed;
      width: 320px; height: 200px;
      border-radius: 6px;
      overflow: hidden;
      pointer-events: none;
      z-index: 8888;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.88) rotate(-2deg);
      transition:
        opacity .35s cubic-bezier(.16,1,.3,1),
        transform .35s cubic-bezier(.16,1,.3,1);
      box-shadow: 0 28px 72px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.18);
      will-change: transform, opacity;
    }
    .float-img.visible {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1) rotate(-1.5deg);
    }
    .float-img img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      transform: scale(1.06);
      transition: transform .5s cubic-bezier(.16,1,.3,1);
      filter: saturate(1.08) contrast(1.04);
    }
    .float-img.visible img { transform: scale(1); }
 
    /* label on image */
    .float-img .img-label {
      position: absolute; bottom: 12px; left: 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: 10px; font-weight: 600;
      letter-spacing: 2px; text-transform: uppercase;
      color: #fff;
      background: rgba(0,0,0,0.5);
      backdrop-filter: blur(10px);
      padding: 5px 12px; border-radius: 3px;
    }
 
    /* arrow */
    .row-arrow {
      position: absolute;
      right: 0; top: 50%;
      transform: translateY(-50%) translateX(10px);
      font-size: 20px; color: var(--text);
      opacity: 0;
      transition: opacity .3s, transform .35s cubic-bezier(.16,1,.3,1);
    }
    .row:hover .row-arrow {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
 
    /* ── bottom strip ── */
    .bottom-bar {
      display: flex; align-items: center; justify-content: space-between;
      margin-top: 48px;
      animation: fadein .5s ease .9s both;
    }
    .b-left {
      font-size: 11px; letter-spacing: 3px;
      text-transform: uppercase; color: var(--muted);
      font-weight: 500;
    }
    .b-center {
      display: flex; gap: 28px;
    }
    .b-link {
      font-size: 12px; font-weight: 500;
      color: var(--muted); text-decoration: none;
      letter-spacing: 0.5px;
      transition: color .2s;
    }
    .b-link:hover { color: var(--text); }
    .b-right {
      font-size: 11px; letter-spacing: 3px;
      text-transform: uppercase; color: var(--muted);
      font-weight: 500;
    }
 
    @keyframes fadein { from{opacity:0;} to{opacity:1;} }
 
    /* responsive */
    @media(max-width:920px){
      .page { padding:0 28px 52px; }
      .row  { grid-template-columns: 36px 1fr; gap:8px; }
      .tags, .desc, .row-arrow { display:none; }
      .name { font-size:clamp(30px,8vw,52px); }
      .heading { font-size:clamp(64px,16vw,110px); }
      .b-center { display:none; }
      .xhair, .xhair-ring { display:none; }
    }

(function(){
  var cur      = document.getElementById('cur');
  var curRing  = document.getElementById('cur-ring');
  var fimg     = document.getElementById('fimg');
  var fimgSrc  = document.getElementById('fimg-src');
  var fimgLbl  = document.getElementById('fimg-label');
  var mx = 0, my = 0;
  var tx = 0, ty = 0;
 
  /* smooth cursor follow */
  window.addEventListener('mousemove', function(e){
    mx = e.clientX; my = e.clientY;
    cur.style.left     = mx + 'px';
    cur.style.top      = my + 'px';
    curRing.style.left = mx + 'px';
    curRing.style.top  = my + 'px';
  });
 
  /* smooth floating image follow */
  function lerpImg(){
    tx += (mx - tx) * 0.085;
    ty += (my - ty) * 0.085;
    fimg.style.left = tx + 'px';
    fimg.style.top  = ty + 'px';
    requestAnimationFrame(lerpImg);
  }
  lerpImg();
 
  /* row hover */
  var rows = Array.from(document.querySelectorAll('.row'));
  rows.forEach(function(row){
    var imgSrc = row.getAttribute('data-img');
    var label  = row.getAttribute('data-label');
 
    row.addEventListener('mouseenter', function(){
      fimgSrc.src      = imgSrc;
      fimgLbl.textContent = label;
      fimg.classList.add('visible');
      cur.style.width     = '56px';
      cur.style.height    = '56px';
      cur.style.background = '#0d0d0d';
      cur.style.borderRadius = '4px';
      curRing.style.opacity = '0';
    });
 
    row.addEventListener('mouseleave', function(){
      fimg.classList.remove('visible');
      cur.style.width     = '10px';
      cur.style.height    = '10px';
      cur.style.background = '#d94f1e';
      cur.style.borderRadius = '50%';
      curRing.style.opacity = '1';
    });
  });
})();

Service Cards

HTML

@teamuiblitz100

<!-- BENTO GRID -->
<div class="bento">

  <!-- Top-left: text stat -->
  <div class="bento-card card-text g-1-1">
    <p class="desc">Our unwavering quality ensures you receive top-purity chemicals, always meeting your standards.</p>
    <div class="stat">99.8%<span>Product Purity</span></div>
  </div>

  <!-- Center: scientist — spans both rows -->
  <div class="bento-card card-center g-2">
    <div class="img-scientist"></div>

    <!-- scientist illustration -->
    <div style="position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:0;">
      <!-- Full-suit figure -->
      <svg viewBox="0 0 160 320" width="160" style="position:absolute;bottom:80px;left:50%;transform:translateX(-50%);" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="suitG" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#d8e8f8"/>
            <stop offset="100%" stop-color="#8aaad8"/>
          </linearGradient>
          <linearGradient id="helmG" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#c8daf0"/>
            <stop offset="100%" stop-color="#6888c8"/>
          </linearGradient>
        </defs>
        <!-- Body -->
        <rect x="30" y="100" width="100" height="200" rx="18" fill="url(#suitG)"/>
        <!-- Arms -->
        <rect x="5" y="110" width="30" height="90" rx="14" fill="url(#suitG)"/>
        <rect x="125" y="110" width="30" height="90" rx="14" fill="url(#suitG)"/>
        <!-- Gloves -->
        <ellipse cx="20" cy="205" rx="16" ry="12" fill="#5080c8"/>
        <ellipse cx="140" cy="205" rx="16" ry="12" fill="#5080c8"/>
        <!-- Helmet -->
        <ellipse cx="80" cy="72" rx="44" ry="46" fill="url(#helmG)"/>
        <!-- Visor -->
        <ellipse cx="80" cy="68" rx="30" ry="24" fill="rgba(0,60,160,0.65)"/>
        <ellipse cx="73" cy="60" rx="8" ry="5" fill="rgba(100,180,255,0.35)" transform="rotate(-20 73 60)"/>
        <!-- Respirator -->
        <rect x="56" y="110" width="48" height="30" rx="8" fill="#4a6080"/>
        <rect x="62" y="116" width="36" height="18" rx="5" fill="#2a3a54"/>
        <!-- Chest detail -->
        <rect x="60" y="150" width="40" height="25" rx="6" fill="rgba(255,255,255,0.15)"/>
        <!-- Legs -->
        <rect x="38" y="280" width="36" height="38" rx="10" fill="#7898c8"/>
        <rect x="86" y="280" width="36" height="38" rx="10" fill="#7898c8"/>
        <!-- Boots -->
        <rect x="34" y="308" width="42" height="14" rx="6" fill="#3a5070"/>
        <rect x="82" y="308" width="42" height="14" rx="6" fill="#3a5070"/>
      </svg>
    </div>

    <!-- Overlay text -->
    <div class="center-overlay">
      <div class="stat">98%<span>On-Time Rate</span></div>
      <p>You can rely on us to keep your operations running smoothly without delays.</p>
    </div>
  </div>

  <!-- Top-right: lab tubes image -->
  <div class="bento-card card-img g-3-1 img-tubes" style="min-height:200px;position:relative;">
    <!-- Extra tube decorations -->
    <div style="position:absolute;bottom:8%;left:20%;width:14px;height:70px;background:linear-gradient(180deg,rgba(100,220,180,0.8)0%,rgba(40,160,120,0.6)100%);border-radius:3px 3px 8px 8px;box-shadow:0 0 16px rgba(100,220,180,0.4)"></div>
    <div style="position:absolute;bottom:14%;left:68%;width:12px;height:55px;background:linear-gradient(180deg,rgba(255,100,100,0.8)0%,rgba(200,40,40,0.6)100%);border-radius:3px 3px 6px 6px;box-shadow:0 0 14px rgba(255,80,80,0.4)"></div>
    <!-- Rack -->
    <div style="position:absolute;bottom:8%;left:14%;right:14%;height:8px;background:rgba(180,200,220,0.3);border-radius:4px;"></div>
  </div>

  <!-- Bottom-left: lab flask image -->
  <div class="bento-card card-img g-1-2 img-lab1" style="min-height:200px;position:relative;">
    <!-- Extra glow element -->
    <div style="position:absolute;top:30%;right:20%;width:30px;height:30px;background:radial-gradient(circle,rgba(255,160,40,0.6)0%,transparent 70%);border-radius:50%;"></div>
  </div>

  <!-- Bottom-right: text stat -->
  <div class="bento-card card-text blue-tint g-3-2" style="min-height:200px;">
    <div class="stat" style="margin-top:0;">300+<span>Deliveries</span></div>
    <p class="desc" style="margin-top:12px;">Join countless satisfied customers who've relied on our consistent, expert deliveries.</p>
  </div>

</div>

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

  :root {
    --cream: #f2f0eb;
    --text: #1a1a1a;
    --muted: #888;
    --blue-accent: #2563eb;
    --card-bg: #e8e5de;
  }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    min-height: 100vh;
    color: var(--text);
  }

  /* ── NAV ── */
  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 48px;
    font-size: 0.82rem;
    color: #555;
    font-weight: 500;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }

  /* ── HERO ── */
  .hero {
    text-align: center;
    padding: 64px 24px 40px;
    max-width: 520px;
    margin: 0 auto;
    animation: fadeUp 0.6s ease both;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--blue-accent);
    margin-bottom: 16px;
  }

  .tag-dot {
    width: 8px; height: 8px;
    background: var(--blue-accent);
    border-radius: 50%;
    flex-shrink: 0;
  }

  h1 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(2rem, 5vw, 2.7rem);
    font-weight: 400;
    line-height: 1.18;
    color: var(--text);
    margin-bottom: 16px;
  }

  .hero p {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 300px;
    margin: 0 auto 36px;
  }

  .divider {
    width: 200px;
    height: 1px;
    background: rgba(0,0,0,0.12);
    margin: 0 auto 48px;
  }

  /* ── BENTO GRID ── */
  .bento {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px 80px;
    animation: fadeUp 0.6s 0.2s ease both;
  }

  .bento-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }

  /* Text cards */
  .card-text {
    background: var(--card-bg);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
  }

  .card-text p.desc {
    font-size: 0.8rem;
    color: #777;
    line-height: 1.65;
  }

  .card-text .stat {
    font-family: 'Instrument Serif', serif;
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text);
    line-height: 1.2;
    margin-top: 10px;
  }

  .card-text .stat span {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 2px;
  }

  /* Image cards */
  .card-img {
    position: relative;
    min-height: 220px;
  }

  .card-img .img-fill {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
  }

  /* CSS painted images */
  .img-lab1 {
    background:
      radial-gradient(ellipse at 30% 60%, rgba(255,140,0,0.6) 0%, transparent 40%),
      radial-gradient(ellipse at 70% 40%, rgba(0,100,200,0.5) 0%, transparent 45%),
      linear-gradient(160deg, #0a1628 0%, #0d1f3c 40%, #1a0a05 100%);
  }

  .img-lab1::before {
    content: '';
    position: absolute;
    bottom: 15%; left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 110px;
    background: linear-gradient(180deg, rgba(255,160,40,0.7) 0%, rgba(200,100,20,0.5) 100%);
    border-radius: 4px 4px 8px 8px;
    box-shadow: 0 0 30px rgba(255,140,0,0.5);
  }

  .img-lab1::after {
    content: '';
    position: absolute;
    bottom: 18%; left: 30%;
    width: 20px; height: 80px;
    background: rgba(0,150,255,0.5);
    border-radius: 3px 3px 6px 6px;
    box-shadow: 0 0 20px rgba(0,150,255,0.4);
  }

  /* Center card — scientist */
  .card-center {
    grid-row: span 2;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    min-height: 480px;
  }

  .img-scientist {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(40,80,160,0.4) 0%, transparent 60%),
      radial-gradient(ellipse at 30% 80%, rgba(0,120,200,0.3) 0%, transparent 50%),
      linear-gradient(180deg, #0a1628 0%, #0d2040 50%, #0a1520 100%);
  }

  /* Scientist figure */
  .scientist-fig {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 160px; height: 320px;
  }

  /* Suit body */
  .suit {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 110px; height: 220px;
    background: linear-gradient(160deg, #dde8f8 0%, #b8ccec 50%, #8eaad8 100%);
    border-radius: 16px 16px 8px 8px;
  }

  /* Helmet */
  .helmet {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #c8daf0 0%, #a0bce0 50%, #7898c8 100%);
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0,80,200,0.3);
  }

  .helmet::before {
    content: '';
    position: absolute;
    top: 15%; left: 15%;
    width: 70%; height: 55%;
    background: linear-gradient(135deg, rgba(0,100,200,0.6) 0%, rgba(0,60,150,0.8) 100%);
    border-radius: 50% 50% 40% 40%;
  }

  /* Respirator */
  .respirator {
    position: absolute;
    bottom: 28%; left: 50%;
    transform: translateX(-50%);
    width: 50px; height: 35px;
    background: linear-gradient(135deg, #5a7090 0%, #3a5070 100%);
    border-radius: 8px;
  }

  .respirator::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 30px; height: 20px;
    background: linear-gradient(135deg, #2a3a50 0%, #1a2a40 100%);
    border-radius: 6px;
  }

  /* Overlay text on center card */
  .center-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 22px;
    background: linear-gradient(0deg, rgba(5,15,35,0.92) 0%, transparent 100%);
  }

  .center-overlay .stat {
    font-family: 'Instrument Serif', serif;
    font-size: 1.55rem;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .center-overlay .stat span {
    display: block;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
  }

  .center-overlay p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin-top: 8px;
  }

  /* Right top — lab tubes */
  .img-tubes {
    background:
      radial-gradient(ellipse at 60% 30%, rgba(255,200,0,0.5) 0%, transparent 45%),
      radial-gradient(ellipse at 20% 60%, rgba(0,160,220,0.5) 0%, transparent 40%),
      linear-gradient(160deg, #0a1628 0%, #0e2040 60%, #080d18 100%);
  }

  .img-tubes::before {
    content: '';
    position: absolute;
    bottom: 10%; left: 55%;
    width: 18px; height: 100px;
    background: linear-gradient(180deg, rgba(255,200,0,0.85) 0%, rgba(200,140,0,0.6) 100%);
    border-radius: 3px 3px 8px 8px;
    box-shadow: 0 0 20px rgba(255,200,0,0.4);
  }

  .img-tubes::after {
    content: '';
    position: absolute;
    bottom: 12%; left: 35%;
    width: 16px; height: 80px;
    background: linear-gradient(180deg, rgba(0,180,255,0.85) 0%, rgba(0,100,200,0.6) 100%);
    border-radius: 3px 3px 8px 8px;
    box-shadow: 0 0 20px rgba(0,180,255,0.4);
  }

  /* Bottom right text card */
  .card-text.blue-tint {
    background: #dce6f5;
  }

  /* Grid layout */
  /* col1 row1 */
  .g-1-1 { grid-column: 1; grid-row: 1; }
  /* col1 row2 */
  .g-1-2 { grid-column: 1; grid-row: 2; }
  /* col2 both rows */
  .g-2   { grid-column: 2; grid-row: 1 / 3; }
  /* col3 row1 */
  .g-3-1 { grid-column: 3; grid-row: 1; }
  /* col3 row2 */
  .g-3-2 { grid-column: 3; grid-row: 2; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 700px) {
    nav { padding: 16px 20px; }
    .bento {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
    }
    .g-2 { grid-column: 1 / 3; grid-row: 1; }
    .g-1-1, .g-1-2, .g-3-1, .g-3-2 { grid-column: auto; grid-row: auto; }
    .card-center { min-height: 300px; }
  }

Hover Card Effect

HTML

@teamuiblitz100

<div class="panel">
  <div class="cards">

    <!-- Card 1: Smoke Detector -->
    <div class="card">
      <div class="card-overlay">
        <span class="ov-tag">Fire Safety</span>
        <h4>Suitsuvalve</h4>
        <p>Advanced smoke detection with instant alerts. Protects your home 24/7 with reliable sensor technology.</p>
        <button class="ov-btn">View Details <svg viewBox="0 0 16 16"><line x1="3" y1="8" x2="13" y2="8"/><polyline points="9 4 13 8 9 12"/></svg></button>
      </div>
      <div class="card-img">
        <svg viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <radialGradient id="smokeGrad" cx="40%" cy="35%" r="65%">
              <stop offset="0%" stop-color="#ffffff"/>
              <stop offset="60%" stop-color="#dde5ef"/>
              <stop offset="100%" stop-color="#c8d4e2"/>
            </radialGradient>
            <radialGradient id="smokeShadow" cx="50%" cy="60%" r="55%">
              <stop offset="0%" stop-color="rgba(150,170,200,0.3)"/>
              <stop offset="100%" stop-color="rgba(150,170,200,0)"/>
            </radialGradient>
          </defs>
          <!-- Shadow -->
          <ellipse cx="65" cy="110" rx="38" ry="8" fill="rgba(160,180,210,0.2)"/>
          <!-- Body disk -->
          <ellipse cx="65" cy="72" rx="44" ry="10" fill="url(#smokeShadow)"/>
          <ellipse cx="65" cy="65" rx="44" ry="44" fill="url(#smokeGrad)"/>
          <!-- Speaker grille lines -->
          <circle cx="65" cy="65" r="28" fill="none" stroke="#cdd7e5" stroke-width="1"/>
          <circle cx="65" cy="65" r="20" fill="none" stroke="#cdd7e5" stroke-width="1"/>
          <circle cx="65" cy="65" r="12" fill="none" stroke="#cdd7e5" stroke-width="1"/>
          <!-- Center dot -->
          <circle cx="65" cy="65" r="4" fill="#c8d4e2"/>
          <!-- Top mount -->
          <rect x="55" y="20" width="20" height="8" rx="3" fill="#d5dfe9"/>
          <rect x="60" y="14" width="10" height="10" rx="2" fill="#e0e8f0"/>
          <!-- Highlight -->
          <ellipse cx="50" cy="48" rx="10" ry="6" fill="rgba(255,255,255,0.6)" transform="rotate(-30 50 48)"/>
        </svg>
      </div>
      <div class="card-body">
        <h3>Suitsuvalve</h3>
        <button class="add-btn" aria-label="Add">
          <svg viewBox="0 0 16 16"><line x1="8" y1="2" x2="8" y2="14"/><line x1="2" y1="8" x2="14" y2="8"/></svg>
        </button>
      </div>
    </div>

    <!-- Card 2: Motion Sensor -->
    <div class="card">
      <div class="card-overlay">
        <span class="ov-tag">Motion Detection</span>
        <h4>Klassikaline koduvalve</h4>
        <p>Reliable PIR motion sensing for classic home security. Wide detection angle with low false-alarm rate.</p>
        <button class="ov-btn">View Details <svg viewBox="0 0 16 16"><line x1="3" y1="8" x2="13" y2="8"/><polyline points="9 4 13 8 9 12"/></svg></button>
      </div>
      <div class="card-img">
        <svg viewBox="0 0 130 140" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <radialGradient id="motionGrad" cx="38%" cy="30%" r="65%">
              <stop offset="0%" stop-color="#ffffff"/>
              <stop offset="55%" stop-color="#dde5ef"/>
              <stop offset="100%" stop-color="#c5d2e4"/>
            </radialGradient>
          </defs>
          <!-- Shadow -->
          <ellipse cx="65" cy="128" rx="30" ry="6" fill="rgba(160,180,210,0.2)"/>
          <!-- Body -->
          <rect x="30" y="30" width="70" height="85" rx="16" fill="url(#motionGrad)"/>
          <!-- Red stripe at top -->
          <rect x="30" y="30" width="70" height="12" rx="10" fill="#e84040" opacity="0.85"/>
          <rect x="30" y="37" width="70" height="6" rx="0" fill="#e84040" opacity="0.85"/>
          <!-- PIR lens dome -->
          <ellipse cx="65" cy="78" rx="22" ry="18" fill="#dce6f0"/>
          <ellipse cx="65" cy="78" rx="16" ry="12" fill="#cfd9e8"/>
          <ellipse cx="65" cy="78" rx="10" ry="7" fill="#c3cfe0"/>
          <!-- Two sensor dots -->
          <circle cx="58" cy="60" r="3.5" fill="#ccd6e4"/>
          <circle cx="72" cy="60" r="3.5" fill="#ccd6e4"/>
          <!-- Highlight -->
          <ellipse cx="50" cy="46" rx="9" ry="5" fill="rgba(255,255,255,0.55)" transform="rotate(-20 50 46)"/>
        </svg>
      </div>
      <div class="card-body">
        <h3>Klassikaline koduvalve</h3>
        <button class="add-btn" aria-label="Add">
          <svg viewBox="0 0 16 16"><line x1="8" y1="2" x2="8" y2="14"/><line x1="2" y1="8" x2="14" y2="8"/></svg>
        </button>
      </div>
    </div>

    <!-- Card 3: IP Camera -->
    <div class="card">
      <div class="card-overlay">
        <span class="ov-tag">Surveillance</span>
        <h4>Juhtmevaba valve</h4>
        <p>Wireless HD camera with night vision and two-way audio. Monitor your property from anywhere, anytime.</p>
        <button class="ov-btn">View Details <svg viewBox="0 0 16 16"><line x1="3" y1="8" x2="13" y2="8"/><polyline points="9 4 13 8 9 12"/></svg></button>
      </div>
      <div class="card-img">
        <svg viewBox="0 0 130 140" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <radialGradient id="camGrad" cx="35%" cy="30%" r="65%">
              <stop offset="0%" stop-color="#ffffff"/>
              <stop offset="60%" stop-color="#dde5ef"/>
              <stop offset="100%" stop-color="#c8d4e4"/>
            </radialGradient>
          </defs>
          <!-- Shadow -->
          <ellipse cx="65" cy="128" rx="28" ry="5" fill="rgba(160,180,210,0.2)"/>
          <!-- Stand -->
          <rect x="58" y="105" width="14" height="18" rx="4" fill="#d0dae6"/>
          <ellipse cx="65" cy="122" rx="18" ry="5" fill="#cad4e2"/>
          <!-- Mount arm -->
          <rect x="62" y="88" width="6" height="20" rx="3" fill="#d5dfe9"/>
          <!-- Camera body -->
          <rect x="28" y="55" width="74" height="50" rx="12" fill="url(#camGrad)"/>
          <!-- Lens -->
          <circle cx="55" cy="80" r="18" fill="#d8e2ee"/>
          <circle cx="55" cy="80" r="13" fill="#c8d4e2"/>
          <circle cx="55" cy="80" r="8"  fill="#b5c4d8"/>
          <circle cx="55" cy="80" r="4"  fill="#8899b0"/>
          <circle cx="52" cy="77" r="1.5" fill="rgba(255,255,255,0.7)"/>
          <!-- IR dots right side -->
          <circle cx="88" cy="72" r="3.5" fill="#cbd5e3"/>
          <circle cx="88" cy="84" r="3.5" fill="#cbd5e3"/>
          <circle cx="96" cy="78" r="3.5" fill="#cbd5e3"/>
          <!-- Highlight -->
          <ellipse cx="40" cy="63" rx="8" ry="4" fill="rgba(255,255,255,0.55)" transform="rotate(-20 40 63)"/>
        </svg>
      </div>
      <div class="card-body">
        <h3>Juhtmevaba valve</h3>
        <button class="add-btn" aria-label="Add">
          <svg viewBox="0 0 16 16"><line x1="8" y1="2" x2="8" y2="14"/><line x1="2" y1="8" x2="14" y2="8"/></svg>
        </button>
      </div>
    </div>

    <!-- Card 4: Smart Sensor (Blue glowing orb) -->
    <div class="card">
      <div class="card-overlay">
        <span class="ov-tag">Smart Home</span>
        <h4>Nutivalve</h4>
        <p>AI-powered smart sensor with app connectivity. Real-time notifications and seamless smart home integration.</p>
        <button class="ov-btn">View Details <svg viewBox="0 0 16 16"><line x1="3" y1="8" x2="13" y2="8"/><polyline points="9 4 13 8 9 12"/></svg></button>
      </div>
      <div class="card-img">
        <svg viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <radialGradient id="smartGrad" cx="35%" cy="28%" r="65%">
              <stop offset="0%" stop-color="#b8d8f8"/>
              <stop offset="40%" stop-color="#6aaaee"/>
              <stop offset="75%" stop-color="#3378cc"/>
              <stop offset="100%" stop-color="#1a55aa"/>
            </radialGradient>
            <radialGradient id="smartGlow" cx="50%" cy="50%" r="60%">
              <stop offset="0%" stop-color="rgba(80,160,255,0.35)"/>
              <stop offset="100%" stop-color="rgba(80,160,255,0)"/>
            </radialGradient>
            <radialGradient id="smartBody" cx="38%" cy="32%" r="65%">
              <stop offset="0%" stop-color="#ffffff"/>
              <stop offset="50%" stop-color="#e0eaf5"/>
              <stop offset="100%" stop-color="#c8d8ec"/>
            </radialGradient>
          </defs>
          <!-- Outer glow -->
          <circle cx="75" cy="62" r="46" fill="url(#smartGlow)"/>
          <!-- Body shell -->
          <ellipse cx="68" cy="72" rx="42" ry="48" fill="url(#smartBody)"/>
          <!-- Blue glowing teardrop/orb shape -->
          <ellipse cx="78" cy="52" rx="30" ry="36" fill="url(#smartGrad)" opacity="0.92"/>
          <!-- Inner shine -->
          <ellipse cx="68" cy="38" rx="12" ry="8" fill="rgba(255,255,255,0.45)" transform="rotate(-30 68 38)"/>
          <!-- Shadow bottom -->
          <ellipse cx="65" cy="118" rx="32" ry="7" fill="rgba(160,180,210,0.2)"/>
        </svg>
      </div>
      <div class="card-body">
        <h3>Nutivalve</h3>
        <button class="add-btn" aria-label="Add">
          <svg viewBox="0 0 16 16"><line x1="8" y1="2" x2="8" y2="14"/><line x1="2" y1="8" x2="14" y2="8"/></svg>
        </button>
      </div>
    </div>

  </div>
</div>

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

  body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #dde8f0;
    padding: 40px 20px;
    position: relative;
  }

  /* Soft light blue corner blobs */
  body::before, body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
  }
  body::before {
    width: 420px; height: 420px;
    top: -80px; right: -80px;
    background: radial-gradient(circle, rgba(210,225,240,0.8) 0%, transparent 70%);
  }
  body::after {
    width: 350px; height: 350px;
    bottom: -60px; left: -60px;
    background: radial-gradient(circle, rgba(205,220,238,0.7) 0%, transparent 70%);
  }

  /* Outer white panel */
  .panel {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 48px rgba(100,140,180,0.13), 0 1px 4px rgba(0,0,0,0.04);
    max-width: 860px;
    width: 100%;
    animation: fadeIn 0.5s ease both;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  /* Individual card */
  .card {
    background: #edf2f7;
    border-radius: 14px;
    padding: 0 0 22px 0;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: box-shadow 0.22s ease, transform 0.22s ease, background 0.22s;
    overflow: hidden;
    animation: cardUp 0.5s ease both;
  }

  .card:nth-child(1) { animation-delay: 0.08s; }
  .card:nth-child(2) { animation-delay: 0.16s; }
  .card:nth-child(3) { animation-delay: 0.24s; }
  .card:nth-child(4) { animation-delay: 0.32s; }

  @keyframes cardUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .card:hover {
    background: #e4ecf5;
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(100,140,190,0.18);
  }

  /* Image area */
  .card-img {
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px 10px;
  }

  .card-img svg {
    width: 100%;
    height: 100%;
    max-height: 140px;
  }

  /* Text area */
  .card-body {
    padding: 8px 18px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .card-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a2535;
    line-height: 1.35;
    margin-bottom: 18px;
  }

  .add-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.8px solid #c0ccd8;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    color: #8899aa;
    flex-shrink: 0;
  }

  .add-btn:hover {
    border-color: #5599dd;
    background: #5599dd;
    color: #fff;
    transform: scale(1.08);
  }

  .add-btn svg {
    width: 15px; height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
  }

  /* ── SVG Device Illustrations ── */

  /* ── HOVER OVERLAY ── */
  .card {
    position: relative;
  }

  .card-overlay {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(160deg, rgba(30,80,160,0.93) 0%, rgba(10,40,110,0.97) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 28px 22px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 10;
  }

  .card:hover .card-overlay {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  .card-overlay .ov-tag {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(130,200,255,0.85);
    margin-bottom: 10px;
  }

  .card-overlay h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .card-overlay p {
    font-size: 0.8rem;
    color: rgba(200,220,255,0.8);
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 22px;
  }

  .card-overlay .ov-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 50px;
    padding: 8px 18px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    font-family: 'Inter', sans-serif;
  }

  .card-overlay .ov-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.6);
  }

  .card-overlay .ov-btn svg {
    width: 13px; height: 13px;
    stroke: #fff;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* Responsive */
  @media (max-width: 640px) {
    .cards { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 380px) {
    .cards { grid-template-columns: 1fr; }
  }

How It Works

HTML

@teamuiblitz100

<section class="section">
  <h2>How It Works</h2>
  <p class="subtitle">Fashion is a form of expression. Fashion is what people wear in a specific context.</p>

  <div class="cards">

    <!-- Card 1: Select Product -->
    <div class="card">
      <div class="icon-box blue">
        <svg viewBox="0 0 24 24">
          <!-- Grid / select icon -->
          <rect x="3" y="3" width="7" height="7" rx="1"/>
          <rect x="14" y="3" width="7" height="7" rx="1"/>
          <rect x="3" y="14" width="7" height="7" rx="1"/>
          <rect x="14" y="14" width="7" height="7" rx="1"/>
        </svg>
      </div>
      <h3>Select Product</h3>
      <p>There are many variations of pass ages of Lorem Ipsum available, but the majority have suffered</p>
      <a href="#" class="read-more">
        Read more
        <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </a>
    </div>

    <!-- Card 2: Make Payment -->
    <div class="card">
      <div class="icon-box red">
        <svg viewBox="0 0 24 24">
          <!-- Phone / payment icon -->
          <rect x="5" y="2" width="14" height="20" rx="2"/>
          <line x1="9" y1="7" x2="15" y2="7"/>
          <line x1="9" y1="11" x2="15" y2="11"/>
          <line x1="9" y1="15" x2="12" y2="15"/>
          <circle cx="12" cy="18.5" r="1" fill="white" stroke="none"/>
        </svg>
      </div>
      <h3>Make Payment</h3>
      <p>There are many variations of pass ages of Lorem Ipsum available, but the majority have suffered</p>
      <a href="#" class="read-more">
        Read more
        <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </a>
    </div>

    <!-- Card 3: Receive Product -->
    <div class="card">
      <div class="icon-box green">
        <svg viewBox="0 0 24 24">
          <!-- Box / delivery icon -->
          <polyline points="21 8 21 21 3 21 3 8"/>
          <rect x="1" y="3" width="22" height="5" rx="1"/>
          <line x1="10" y1="12" x2="14" y2="12"/>
        </svg>
      </div>
      <h3>Recive Product</h3>
      <p>There are many variations of pass ages of Lorem Ipsum available, but the majority have suffered</p>
      <a href="#" class="read-more">
        Read more
        <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      </a>
    </div>

  </div>
</section>

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

  body {
    font-family: 'Nunito', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fde8e8 0%, #fce4e4 20%, #fdeaea 50%, #fde0dc 80%, #f8d8d8 100%);
    padding: 60px 20px;
  }

  /* Soft blobs */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 55% 45% at 15% 25%, rgba(255,200,200,0.55) 0%, transparent 65%),
      radial-gradient(ellipse 45% 50% at 85% 75%, rgba(255,180,180,0.45) 0%, transparent 65%),
      radial-gradient(ellipse 40% 35% at 50% 50%, rgba(255,220,200,0.3) 0%, transparent 60%);
    pointer-events: none;
  }

  .section {
    position: relative;
    max-width: 900px;
    width: 100%;
    text-align: center;
  }

  .section h2 {
    font-size: 2.6rem;
    font-weight: 900;
    color: #1a1a2e;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
  }

  .section p.subtitle {
    font-size: 0.95rem;
    color: #888;
    font-weight: 500;
    line-height: 1.65;
    max-width: 280px;
    margin: 0 auto 50px;
  }

  .cards {
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .card {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 20px;
    padding: 32px 28px 28px;
    width: 260px;
    text-align: left;
    box-shadow: 0 4px 30px rgba(200,100,100,0.08), 0 1px 4px rgba(0,0,0,0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: fadeUp 0.6s ease both;
  }

  .card:nth-child(1) { animation-delay: 0.1s; }
  .card:nth-child(2) { animation-delay: 0.22s; }
  .card:nth-child(3) { animation-delay: 0.34s; }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(200,80,80,0.13), 0 2px 8px rgba(0,0,0,0.06);
  }

  /* Icon box */
  .icon-box {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
  }

  .icon-box.blue   { background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); }
  .icon-box.red    { background: linear-gradient(135deg, #f05a7e 0%, #e03060 100%); }
  .icon-box.green  { background: linear-gradient(135deg, #3ecf8e 0%, #28a870 100%); }

  .icon-box svg {
    width: 28px;
    height: 28px;
    stroke: #fff;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .card h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1a1a2e;
    margin-bottom: 12px;
  }

  .card p {
    font-size: 0.875rem;
    color: #999;
    line-height: 1.65;
    font-weight: 500;
    margin-bottom: 22px;
  }

  .read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #e84a6a;
    text-decoration: none;
    transition: gap 0.2s;
  }

  .read-more:hover { gap: 10px; }

  .read-more svg {
    width: 16px;
    height: 16px;
    stroke: #e84a6a;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s;
  }

  .read-more:hover svg { transform: translateX(3px); }

Why Choose Us

HTML

@teamuiblitz100

<div class="section">

  <!-- Header row -->
  <div class="header">
    <div class="header-text">
      <h2>Why Choose Us?</h2>
      <p>Our commitment to your wellness goes beyond just classes and training sessions. Discover the unique benefits that set us apart and ensure you have the best experience on your wellness journey.</p>
    </div>
    <button class="btn-join-top">Join Now</button>
  </div>

  <!-- Cards -->
  <div class="grid">

    <!-- Card 1: Flexible Scheduling (featured) -->
    <div class="card featured">
      <div class="icon">
        <svg viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="4" y="6" width="26" height="24" rx="3" stroke="#e8eedd" stroke-width="1.8"/>
          <path d="M4 12h26" stroke="#e8eedd" stroke-width="1.8"/>
          <path d="M11 4v4M23 4v4" stroke="#e8eedd" stroke-width="1.8" stroke-linecap="round"/>
          <rect x="9" y="17" width="5" height="4" rx="1" fill="#e8eedd" opacity="0.7"/>
          <rect x="15" y="17" width="5" height="4" rx="1" fill="#e8eedd" opacity="0.7"/>
          <rect x="9" y="23" width="5" height="3" rx="1" fill="#e8eedd" opacity="0.5"/>
          <rect x="15" y="23" width="5" height="3" rx="1" fill="#e8eedd" opacity="0.5"/>
          <rect x="21" y="17" width="5" height="4" rx="1" fill="#e8eedd" opacity="0.7"/>
        </svg>
      </div>
      <h3>Flexible Scheduling</h3>
      <p>We offer flexible scheduling options to fit your busy lifestyle. Whether you prefer morning yoga, lunchtime fitness sessions, or evening workshops.</p>
      <button class="btn-join">Join Now</button>
    </div>

    <!-- Card 2: Personalized Programs -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- Person with arms up (yoga) -->
          <circle cx="17" cy="8" r="3.5" stroke="#2a3d28" stroke-width="1.8"/>
          <path d="M17 13v8" stroke="#2a3d28" stroke-width="1.8" stroke-linecap="round"/>
          <path d="M10 16 Q13.5 13 17 15 Q20.5 13 24 16" stroke="#2a3d28" stroke-width="1.8" stroke-linecap="round" fill="none"/>
          <path d="M14 21 Q15 26 13 30" stroke="#2a3d28" stroke-width="1.8" stroke-linecap="round"/>
          <path d="M20 21 Q19 26 21 30" stroke="#2a3d28" stroke-width="1.8" stroke-linecap="round"/>
        </svg>
      </div>
      <h3>Personalized Programs</h3>
      <p>We understand that everyone's wellness journey is unique. Our personalized programs are tailored to your individual needs.</p>
      <button class="btn-join">Join Now</button>
    </div>

    <!-- Card 3: Expert Instructors -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- Two people / instructor icon -->
          <circle cx="12" cy="9" r="3" stroke="#2a3d28" stroke-width="1.8"/>
          <path d="M6 24c0-3.31 2.69-6 6-6s6 2.69 6 6" stroke="#2a3d28" stroke-width="1.8" stroke-linecap="round"/>
          <circle cx="24" cy="8" r="2.5" stroke="#2a3d28" stroke-width="1.6"/>
          <path d="M19 22c0-2.76 2.24-5 5-5" stroke="#2a3d28" stroke-width="1.6" stroke-linecap="round" stroke-dasharray="2 1.5"/>
          <!-- Star badge -->
          <path d="M25 15l.9 2.7h2.8l-2.3 1.7.9 2.7-2.3-1.7-2.3 1.7.9-2.7-2.3-1.7h2.8z" fill="#2a3d28" opacity="0.7" transform="scale(0.7) translate(15,8)"/>
        </svg>
      </div>
      <h3>Expert Instructors</h3>
      <p>Our team of certified and experienced instructors is dedicated to helping you achieve your fitness and wellness goals.</p>
      <button class="btn-join">Join Now</button>
    </div>

    <!-- Card 4: Comprehensive Wellness -->
    <div class="card">
      <div class="icon">
        <svg viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- Heart with pulse -->
          <path d="M17 27S6 20 6 13a6 6 0 0112 0 6 6 0 0112 0c0 7-11 14-11 14z" stroke="#2a3d28" stroke-width="1.8" stroke-linejoin="round"/>
          <path d="M9 16h3l2-4 3 7 2-5 1.5 2H26" stroke="#2a3d28" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <h3>Comprehensive Wellness Approach</h3>
      <p>Our services go beyond fitness and yoga. We offer nutritional advice.</p>
      <button class="btn-join">Join Now</button>
    </div>

  </div>
</div>

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

    :root {
      --bg-outer: #6b7c5c;
      --bg-card: #e8eedd;
      --green-dark: #2a3d28;
      --green-mid: #3d5c35;
      --text: #1e2b1c;
      --muted: #5a6e52;
      --radius: 18px;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg-outer);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }

    .section {
      background: var(--bg-card);
      border-radius: 24px;
      padding: 2.8rem 2.8rem 2.5rem;
      max-width: 980px;
      width: 100%;
      box-shadow: 0 12px 60px rgba(0,0,0,0.18);
      animation: fadeUp 0.5s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── HEADER ── */
    .header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: 2rem;
    }

    .header-text h2 {
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      font-weight: 700;
      color: var(--text);
      margin-bottom: 0.55rem;
    }

    .header-text p {
      font-size: 0.8rem;
      color: var(--muted);
      line-height: 1.65;
      max-width: 480px;
    }

    .btn-join-top {
      flex-shrink: 0;
      background: var(--green-dark);
      color: #e8eedd;
      border: none;
      border-radius: 999px;
      padding: 0.65rem 1.5rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      margin-top: 0.2rem;
      transition: background 0.18s ease, transform 0.15s ease;
    }

    .btn-join-top:hover {
      background: var(--green-mid);
      transform: translateY(-1px);
    }

    /* ── CARDS GRID ── */
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }

    .card {
      background: #d8e2cc;
      border-radius: var(--radius);
      padding: 1.4rem 1.2rem 1.3rem;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.1);
    }

    .card.featured {
      background: var(--green-dark);
    }

    .icon {
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon svg {
      width: 34px;
      height: 34px;
    }

    .card h3 {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.25;
    }

    .card.featured h3 { color: #e8eedd; }

    .card p {
      font-size: 0.76rem;
      color: var(--muted);
      line-height: 1.6;
      flex: 1;
    }

    .card.featured p { color: rgba(232,238,221,0.72); }

    .btn-join {
      display: inline-block;
      background: var(--green-dark);
      color: #e8eedd;
      border: none;
      border-radius: 999px;
      padding: 0.52rem 1.2rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      width: fit-content;
      margin-top: 0.3rem;
      transition: background 0.18s ease, transform 0.15s ease;
    }

    .card.featured .btn-join {
      background: rgba(255,255,255,0.15);
      color: #e8eedd;
    }

    .btn-join:hover {
      background: var(--green-mid);
      transform: translateY(-1px);
    }

    .card.featured .btn-join:hover {
      background: rgba(255,255,255,0.25);
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 820px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 540px) {
      .section { padding: 1.8rem 1.3rem; }
      .header { flex-direction: column; gap: 1rem; }
      .grid { grid-template-columns: 1fr; }
      .btn-join-top { align-self: flex-start; }
    }

Service Section

HTML

@teamuiblitz100

<div class="card">

  <!-- LEFT -->
  <div class="left">
    <span class="badge">SERVICES</span>
    <h2>Explore our comprehensive service offerings</h2>
    <p>Focused on your unique needs, our team delivers solutions that blend deep industry knowledge and cutting-edge strategies to ensure lasting growth.</p>
    <a href="#" class="btn">
      Get Started
      <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 8h10M9 4l4 4-4 4" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
      </svg>
    </a>
  </div>

  <!-- RIGHT -->
  <div class="grid">

    <!-- Strategy Development (featured) -->
    <div class="service-card featured">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
      </div>
      <h3>Strategy Development</h3>
      <p>Crafting strategic plans that align with your goals.</p>
    </div>

    <!-- Financial Consulting -->
    <div class="service-card">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2a10 10 0 100 20A10 10 0 0012 2zm1 14.93V18h-2v-1.07A4.003 4.003 0 018 13h2c0 1.1.9 2 2 2s2-.9 2-2c0-1.1-.9-2-2-2a4 4 0 01-4-4c0-1.86 1.28-3.41 3-3.86V6h2v1.07A4.003 4.003 0 0116 11h-2c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2a4 4 0 014 4c0 1.86-1.28 3.41-3 3.93z"/>
        </svg>
      </div>
      <h3>Financial Consulting</h3>
      <p>Expert guidance to optimize your financial performance.</p>
    </div>

    <!-- Technology Solutions -->
    <div class="service-card">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M7 2v11h3v9l7-12h-4l4-8z"/>
        </svg>
      </div>
      <h3>Technology Solutions</h3>
      <p>Innovative tech strategies to enhance operational efficiency.</p>
    </div>

    <!-- Risk Management -->
    <div class="service-card">
      <div class="icon-wrap">
        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"/>
        </svg>
      </div>
      <h3>Risk Management</h3>
      <p>Identify, assess, and mitigate risks to protect your assets.</p>
    </div>

  </div>
</div>

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

    :root {
      --blue: #2d6cf5;
      --blue-dark: #1a56d6;
      --card-bg: #f4f5f7;
      --text: #111;
      --muted: #666;
      --light: #888;
      --white: #fff;
      --radius: 16px;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #d8d8d8;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }

    .card {
      background: var(--white);
      border-radius: 20px;
      padding: 3rem 3rem;
      max-width: 900px;
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 2.5rem;
      align-items: center;
      box-shadow: 0 8px 48px rgba(0,0,0,0.08);
      animation: fadeUp 0.5s ease both;
    }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:translateY(0); }
    }

    /* ── LEFT ── */
    .left { display: flex; flex-direction: column; gap: 1rem; }

    .badge {
      display: inline-block;
      border: 1.5px solid #ccc;
      border-radius: 999px;
      padding: 0.28rem 0.85rem;
      font-size: 0.72rem;
      font-weight: 500;
      color: #555;
      letter-spacing: 0.04em;
      width: fit-content;
    }

    .left h2 {
      font-size: clamp(1.3rem, 2.8vw, 1.75rem);
      font-weight: 700;
      color: var(--text);
      line-height: 1.25;
    }

    .left p {
      font-size: 0.83rem;
      color: var(--muted);
      line-height: 1.65;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--blue);
      color: var(--white);
      border: none;
      border-radius: 999px;
      padding: 0.65rem 1.35rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      width: fit-content;
      margin-top: 0.8rem;
      transition: background 0.18s ease, transform 0.15s ease;
      text-decoration: none;
    }
    .btn:hover { background: var(--blue-dark); transform: translateY(-1px); }
    .btn svg { width: 14px; height: 14px; }

    /* ── RIGHT: service cards grid ── */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .service-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      padding: 1.3rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 0.55rem;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .service-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }

    .service-card.featured {
      background: var(--blue);
    }

    .icon-wrap {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--blue);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .service-card.featured .icon-wrap {
      background: rgba(255,255,255,0.2);
    }

    .icon-wrap svg {
      width: 16px;
      height: 16px;
      fill: var(--white);
    }

    .service-card h3 {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text);
    }

    .service-card.featured h3 { color: var(--white); }

    .service-card p {
      font-size: 0.77rem;
      color: var(--light);
      line-height: 1.55;
    }

    .service-card.featured p { color: rgba(255,255,255,0.75); }

    /* ── RESPONSIVE ── */
    @media (max-width: 700px) {
      .card {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
        gap: 2rem;
      }
    }

    @media (max-width: 400px) {
      .grid { grid-template-columns: 1fr; }
    }

Contact Us

HTML

@teamuiblitz100

<div class="page">

  <!-- ── LEFT ── -->
  <div class="left">
    <div class="logo">Vibrant</div>

    <div class="hero-text">
      <span class="the">The</span>
      <span class="power">Power</span>
    </div>

    <div class="arrow-down">&#8964;</div>

    <!-- CSS/SVG hand illustration -->
    <div class="hand-wrap">
      <svg class="hand-svg" viewBox="0 0 260 560" fill="none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="skinGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#b08a72"/>
            <stop offset="40%" stop-color="#8a6650"/>
            <stop offset="100%" stop-color="#5a3e30"/>
          </linearGradient>
          <linearGradient id="skinLight" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stop-color="#c4a08a"/>
            <stop offset="100%" stop-color="#7a5540"/>
          </linearGradient>
          <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="4" dy="8" stdDeviation="12" flood-color="#00000055"/>
          </filter>
        </defs>

        <!-- Palm -->
        <ellipse cx="130" cy="420" rx="80" ry="95" fill="url(#skinGrad)" filter="url(#shadow)"/>

        <!-- Thumb (left, angled outward) -->
        <path d="M60 400 Q30 370 35 340 Q40 310 65 315 Q85 318 90 350 Q92 380 80 400Z" fill="url(#skinGrad)"/>
        <ellipse cx="50" cy="338" rx="16" ry="12" fill="#c4a080" transform="rotate(-20,50,338)"/>

        <!-- Index finger -->
        <path d="M95 335 Q90 280 95 220 Q100 170 115 150 Q125 135 135 148 Q145 162 140 220 Q138 280 138 335Z" fill="url(#skinGrad)"/>
        <!-- Knuckle lines -->
        <path d="M98 310 Q116 306 137 310" stroke="#7a5540" stroke-width="1.5" fill="none" opacity="0.6"/>
        <path d="M100 270 Q116 265 136 270" stroke="#7a5540" stroke-width="1.5" fill="none" opacity="0.5"/>
        <!-- Fingernail -->
        <ellipse cx="125" cy="158" rx="10" ry="14" fill="#d4b8a0" opacity="0.9"/>
        <ellipse cx="125" cy="155" rx="8" ry="10" fill="#e8d4c0" opacity="0.7"/>

        <!-- Middle finger (tallest) -->
        <path d="M143 330 Q143 268 147 200 Q151 145 163 122 Q172 108 182 120 Q192 134 190 200 Q188 268 186 330Z" fill="url(#skinGrad)"/>
        <path d="M146 305 Q165 300 185 305" stroke="#7a5540" stroke-width="1.5" fill="none" opacity="0.6"/>
        <path d="M147 260 Q165 255 184 260" stroke="#7a5540" stroke-width="1.5" fill="none" opacity="0.5"/>
        <ellipse cx="172" cy="130" rx="10" ry="14" fill="#d4b8a0" opacity="0.9"/>
        <ellipse cx="172" cy="127" rx="8" ry="10" fill="#e8d4c0" opacity="0.7"/>

        <!-- Ring finger (bent/folded) -->
        <path d="M191 335 Q196 300 198 270 Q200 248 206 240 Q213 232 220 240 Q226 250 222 275 Q218 305 210 335Z" fill="url(#skinGrad)"/>
        <ellipse cx="214" cy="242" rx="9" ry="7" fill="#c4a080" opacity="0.85"/>
        <path d="M194 310 Q208 306 220 310" stroke="#7a5540" stroke-width="1.2" fill="none" opacity="0.55"/>

        <!-- Pinky (folded/tucked) -->
        <path d="M213 350 Q218 325 222 305 Q226 290 233 286 Q240 283 244 292 Q248 304 242 325 Q237 342 228 355Z" fill="url(#skinGrad)"/>
        <ellipse cx="238" cy="288" rx="8" ry="6" fill="#c4a080" opacity="0.8"/>

        <!-- Wrist continuation -->
        <rect x="75" y="490" width="110" height="70" rx="8" fill="url(#skinGrad)"/>
        <!-- Wrist crease lines -->
        <path d="M80 510 Q130 504 200 510" stroke="#7a5540" stroke-width="1.5" fill="none" opacity="0.4"/>
        <path d="M82 525 Q130 520 198 525" stroke="#7a5540" stroke-width="1.2" fill="none" opacity="0.3"/>

        <!-- Palm detail lines -->
        <path d="M85 440 Q110 420 140 435 Q160 445 175 440" stroke="#7a5540" stroke-width="1.5" fill="none" opacity="0.4"/>
        <path d="M75 460 Q100 450 130 455 Q155 458 175 452" stroke="#7a5540" stroke-width="1.2" fill="none" opacity="0.3"/>
        <!-- Life line -->
        <path d="M105 480 Q95 455 98 430 Q102 410 115 400" stroke="#7a5540" stroke-width="1.2" fill="none" opacity="0.35"/>
      </svg>
    </div>

    <div class="intro">
      <h3>Introducing<br>Thumper</h3>
      <p>A haptic communicator that creates precise taps. Sign up for a chance to try one.</p>
      <button class="btn-learn">Learn More</button>
    </div>
  </div>

  <!-- ── RIGHT ── -->
  <div class="right">
    <button class="close-btn" aria-label="Close">&#x2715;</button>

    <h2>Contact us</h2>
    <p class="tagline">Interested in trying one? Use the form below to get in touch.</p>

    <div class="form-grid">
      <div class="field">
        <label for="name">Name</label>
        <input id="name" type="text" placeholder=""/>
      </div>
      <div class="field">
        <label for="company">Company</label>
        <input id="company" type="text" placeholder=""/>
      </div>
      <div class="field">
        <label for="email">Email</label>
        <input id="email" type="email" placeholder=""/>
      </div>
      <div class="field">
        <label for="subject">Subject</label>
        <input id="subject" type="text" placeholder=""/>
      </div>
      <div class="field full">
        <label for="message">Message</label>
        <textarea id="message"></textarea>
      </div>
    </div>

    <button class="btn-submit">Submit</button>
  </div>

</div>

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

    :root {
      --yellow: #d4f000;
      --black: #111;
      --gray-bg: #c8c8c8;
      --white: #fff;
    }

    body {
      font-family: 'Barlow', sans-serif;
      background: var(--gray-bg);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ══════════════════════════════
       LAYOUT: two-panel split
    ══════════════════════════════ */
    .page {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      position: relative;
    }

    /* ══════════════════════════════
       LEFT PANEL
    ══════════════════════════════ */
    .left {
      position: relative;
      background: var(--gray-bg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 2rem 2.5rem;
    }

    /* Hand illustration via CSS */
    .hand-wrap {
      position: absolute;
      right: -20px;
      top: 0;
      bottom: 0;
      width: 55%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    /* SVG hand */
    .hand-svg {
      width: 100%;
      height: 100%;
      max-width: 320px;
    }

    .logo {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: 1.5rem;
      color: var(--yellow);
      letter-spacing: -0.01em;
      position: relative;
      z-index: 2;
    }

    .hero-text {
      position: relative;
      z-index: 2;
      margin-top: 1.5rem;
    }

    .hero-text .the {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(4rem, 10vw, 7rem);
      color: var(--white);
      line-height: 0.9;
      display: block;
    }

    .hero-text .power {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900;
      font-size: clamp(4rem, 10vw, 7rem);
      color: var(--white);
      line-height: 0.9;
      display: block;
      margin-left: 2rem;
    }

    .arrow-down {
      color: var(--white);
      font-size: 1.4rem;
      margin: 1.5rem 0 1.5rem 0.4rem;
      position: relative;
      z-index: 2;
    }

    .intro {
      position: relative;
      z-index: 2;
      margin-top: auto;
      padding-bottom: 2.5rem;
    }

    .intro h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: clamp(1.5rem, 3.5vw, 2.2rem);
      color: var(--white);
      margin-bottom: 0.6rem;
      font-style: italic;
    }

    .intro p {
      font-size: 0.88rem;
      color: #e8e8e8;
      line-height: 1.55;
      max-width: 240px;
      margin-bottom: 1.3rem;
    }

    .btn-learn {
      display: inline-block;
      background: var(--yellow);
      color: var(--black);
      font-family: 'Barlow', sans-serif;
      font-weight: 700;
      font-size: 0.88rem;
      padding: 0.7rem 1.8rem;
      border: none;
      cursor: pointer;
      text-transform: none;
      letter-spacing: 0.01em;
      transition: filter 0.18s ease, transform 0.15s ease;
    }

    .btn-learn:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
    }

    /* ══════════════════════════════
       RIGHT PANEL — Contact
    ══════════════════════════════ */
    .right {
      background: var(--yellow);
      padding: 2.2rem 3rem 2.5rem;
      position: relative;
      display: flex;
      flex-direction: column;
      animation: slideIn 0.5s ease both;
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(30px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    .close-btn {
      position: absolute;
      top: 1.4rem;
      right: 1.8rem;
      font-size: 1.6rem;
      color: var(--black);
      cursor: pointer;
      line-height: 1;
      background: none;
      border: none;
      font-weight: 300;
      transition: transform 0.18s ease;
    }

    .close-btn:hover { transform: rotate(90deg); }

    .right h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-weight: 800;
      font-size: clamp(2rem, 4vw, 2.8rem);
      color: var(--black);
      margin-bottom: 0.5rem;
      margin-top: 1.5rem;
    }

    .right .tagline {
      font-size: 0.88rem;
      color: #333;
      margin-bottom: 1.6rem;
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem 1.2rem;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .field.full { grid-column: 1 / -1; }

    .field label {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--black);
      letter-spacing: 0.01em;
    }

    .field input,
    .field textarea {
      background: var(--white);
      border: none;
      outline: none;
      padding: 0.65rem 0.7rem;
      font-family: 'Barlow', sans-serif;
      font-size: 0.88rem;
      color: var(--black);
      border-radius: 0;
      transition: box-shadow 0.18s ease;
    }

    .field input:focus,
    .field textarea:focus {
      box-shadow: inset 0 0 0 2px var(--black);
    }

    .field textarea {
      height: 130px;
      resize: vertical;
    }

    .btn-submit {
      background: var(--black);
      color: var(--white);
      border: none;
      padding: 0.85rem;
      font-family: 'Barlow', sans-serif;
      font-weight: 700;
      font-size: 0.95rem;
      cursor: pointer;
      margin-top: 1rem;
      transition: background 0.18s ease, transform 0.15s ease;
      letter-spacing: 0.02em;
    }

    .btn-submit:hover {
      background: #333;
      transform: translateY(-1px);
    }

    /* ══════════════════════════════
       RESPONSIVE
    ══════════════════════════════ */
    @media (max-width: 768px) {
      .page {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
      }

      .left {
        min-height: 55vw;
        padding: 1.5rem;
      }

      .hand-wrap { width: 45%; right: -10px; }

      .right {
        padding: 1.8rem 1.5rem 2rem;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }

      .field.full { grid-column: 1; }

      .close-btn { top: 1rem; right: 1rem; }
    }

    @media (max-width: 480px) {
      .hero-text .the,
      .hero-text .power {
        font-size: 3.5rem;
      }
    }

Login Form

HTML

@teamuiblitz100

<div class="wrapper">

  <!-- LEFT: Flame panel -->
  <div class="panel">
    <div class="flame-glow"></div>
    <div class="panel-text">
      <h2>Convert your ideas into successful business.</h2>
    </div>
  </div>

  <!-- RIGHT: Form -->
  <div class="form-side">

    <!-- Burst / star logo -->
    <svg class="logo" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g>
        <!-- Starburst / asterisk shape -->
        <line x1="20" y1="2"  x2="20" y2="38" stroke="#e86c1a" stroke-width="3" stroke-linecap="round"/>
        <line x1="2"  y1="20" x2="38" y2="20" stroke="#e86c1a" stroke-width="3" stroke-linecap="round"/>
        <line x1="6.7" y1="6.7"  x2="33.3" y2="33.3" stroke="#e86c1a" stroke-width="3" stroke-linecap="round"/>
        <line x1="33.3" y1="6.7" x2="6.7" y2="33.3" stroke="#e86c1a" stroke-width="3" stroke-linecap="round"/>
        <line x1="2.5" y1="12" x2="37.5" y2="28" stroke="#e86c1a" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
        <line x1="12"  y1="2.5" x2="28" y2="37.5" stroke="#e86c1a" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
        <line x1="37.5" y1="12" x2="2.5" y2="28" stroke="#e86c1a" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
        <line x1="28"  y1="2.5" x2="12" y2="37.5" stroke="#e86c1a" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
      </g>
    </svg>

    <h1>Get Started</h1>
    <p class="subtitle">Welcome to HextaStudio — Let's get started</p>

    <div class="divider"></div>

    <div class="field">
      <label for="email">Your email</label>
      <input id="email" type="email" placeholder="hi@hextastudio.in"/>
    </div>

    <div class="field">
      <label for="password">Create new password</label>
      <input id="password" type="password" placeholder="••••••••••••"/>
    </div>

    <button class="btn">Create new account</button>

    <p class="login-prompt">Already have account? <a href="#">Login</a></p>

  </div>
</div>

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

    :root {
      --orange: #e86c1a;
      --orange-dark: #c95a10;
      --text: #111;
      --muted: #888;
      --border: #e0ddd8;
      --input-bg: #fff;
      --radius: 12px;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #3b1c0a;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }

    .wrapper {
      background: #fff;
      border-radius: 24px;
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      max-width: 860px;
      width: 100%;
      overflow: hidden;
      box-shadow: 0 32px 80px rgba(0,0,0,0.45);
      animation: rise 0.55s cubic-bezier(.22,.68,0,1.2) both;
    }

    @keyframes rise {
      from { opacity: 0; transform: translateY(24px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ── LEFT PANEL ── */
    .panel {
      position: relative;
      background: #0a0a0a;
      border-radius: 16px;
      margin: 12px;
      overflow: hidden;
      min-height: 460px;
      display: flex;
      align-items: flex-end;
      padding: 2rem;
    }

    /* Flame columns via CSS gradients */
    .panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55px 260px at 28% 105%, #ff6a00cc 0%, #e84d0080 40%, transparent 70%),
        radial-gradient(ellipse 45px 220px at 50% 110%, #ff9500bb 0%, #e8600070 35%, transparent 65%),
        radial-gradient(ellipse 60px 300px at 70% 108%, #ff4500bb 0%, #c83200aa 45%, transparent 72%),
        radial-gradient(ellipse 35px 180px at 38% 112%, #ffb347aa 0%, transparent 55%),
        radial-gradient(ellipse 40px 200px at 62% 115%, #ff7f00aa 0%, transparent 60%);
      animation: flicker 4s ease-in-out infinite alternate;
    }

    /* Subtle noise texture overlay */
    .panel::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
      opacity: 0.5;
      pointer-events: none;
    }

    @keyframes flicker {
      0%   { opacity: 1;    transform: scaleY(1) translateY(0); }
      30%  { opacity: 0.92; transform: scaleY(1.01) translateY(-3px); }
      60%  { opacity: 0.97; transform: scaleY(0.99) translateY(2px); }
      100% { opacity: 1;    transform: scaleY(1.02) translateY(-4px); }
    }

    /* Second animated flame layer */
    .flame-glow {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 80px 160px at 40% 100%, #ff8c0044 0%, transparent 60%),
        radial-gradient(ellipse 100px 200px at 60% 100%, #ff450033 0%, transparent 65%);
      animation: flicker2 3s ease-in-out infinite alternate;
    }

    @keyframes flicker2 {
      0%   { transform: translateY(0) scaleX(1); opacity: 0.8; }
      50%  { transform: translateY(-8px) scaleX(1.03); opacity: 1; }
      100% { transform: translateY(-3px) scaleX(0.98); opacity: 0.85; }
    }

    .panel-text {
      position: relative;
      z-index: 2;
    }

    .panel-text h2 {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      color: #fff;
      line-height: 1.2;
      text-shadow: 0 2px 20px rgba(0,0,0,0.5);
    }

    /* ── RIGHT PANEL ── */
    .form-side {
      padding: 2.8rem 2.8rem 2.8rem 2.4rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    /* Star / burst logo */
    .logo {
      width: 38px;
      height: 38px;
      margin-bottom: 1.4rem;
    }

    .form-side h1 {
      font-family: 'Instrument Serif', serif;
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      color: var(--text);
      margin-bottom: 0.35rem;
    }

    .subtitle {
      font-size: 0.87rem;
      color: var(--muted);
      margin-bottom: 1.6rem;
    }

    .divider {
      height: 1px;
      background: var(--border);
      margin-bottom: 1.6rem;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 0.38rem;
      margin-bottom: 1.1rem;
    }

    .field label {
      font-size: 0.8rem;
      font-weight: 500;
      color: #555;
    }

    .field input {
      background: var(--input-bg);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 0.72rem 0.95rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.92rem;
      color: var(--text);
      outline: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .field input:focus {
      border-color: var(--orange);
      box-shadow: 0 0 0 3px rgba(232,108,26,0.12);
    }

    .field input::placeholder { color: #bbb; }

    .btn {
      width: 100%;
      background: var(--orange);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 0.85rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      margin-top: 0.4rem;
      transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
      box-shadow: 0 4px 18px rgba(232,108,26,0.35);
    }

    .btn:hover {
      background: var(--orange-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 22px rgba(232,108,26,0.45);
    }

    .btn:active { transform: translateY(0); }

    .login-prompt {
      text-align: center;
      font-size: 0.83rem;
      color: var(--muted);
      margin-top: 1rem;
    }

    .login-prompt a {
      color: var(--text);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .login-prompt a:hover { color: var(--orange); }

    /* ── RESPONSIVE ── */
    @media (max-width: 640px) {
      .wrapper {
        grid-template-columns: 1fr;
        border-radius: 20px;
      }

      .panel {
        min-height: 200px;
        margin: 10px 10px 0;
        border-radius: 14px;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
      }

      .panel-text h2 {
        text-align: center;
      }

      .form-side {
        padding: 2rem 1.6rem 2.2rem;
      }
    }

Contact Us

HTML

@teamuiblitz100

<div class="card">

  <!-- LEFT: Info -->
  <div class="info">
    <h1>Get in touch</h1>

    <div class="info-block">
      <div class="label">Email:</div>
      <div class="value">Moneta@gmail.com</div>
    </div>

    <div class="info-block">
      <div class="label">Phone:</div>
      <div class="value">+17631683</div>
    </div>

    <div class="info-block">
      <div class="label">Address:</div>
      <div class="value">
        123 Innovation Avenue, Suite 456<br>
        Tech District, San Francisco, CA 94107<br>
        United States
      </div>
    </div>

    <div class="social">
      <div class="label">Follow us</div>
      <div class="social-icons">
        <!-- Instagram -->
        <a href="#" aria-label="Instagram">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.206.056 2.003.24 2.47.403a4.92 4.92 0 011.772 1.153 4.918 4.918 0 011.153 1.772c.163.467.347 1.264.403 2.47.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.056 1.206-.24 2.003-.403 2.47a4.92 4.92 0 01-1.153 1.772 4.918 4.918 0 01-1.772 1.153c-.467.163-1.264.347-2.47.403-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.206-.056-2.003-.24-2.47-.403a4.92 4.92 0 01-1.772-1.153A4.918 4.918 0 011.56 19.53c-.163-.467-.347-1.264-.403-2.47C1.1 15.795 1.087 15.415 1.087 12s.013-3.584.07-4.85c.056-1.206.24-2.003.403-2.47A4.918 4.918 0 012.713 2.908a4.92 4.92 0 011.772-1.153c.467-.163 1.264-.347 2.47-.403C8.416 2.175 8.796 2.163 12 2.163zm0-2.163C8.741 0 8.333.013 7.053.072 5.775.131 4.902.333 4.14.63a7.07 7.07 0 00-2.565 1.67A7.07 7.07 0 00.63 4.14C.333 4.902.131 5.775.072 7.053.013 8.333 0 8.741 0 12c0 3.259.013 3.668.072 4.948.059 1.277.261 2.15.558 2.913a7.072 7.072 0 001.67 2.564 7.072 7.072 0 002.564 1.67c.763.297 1.636.499 2.913.558C8.332 23.987 8.741 24 12 24c3.259 0 3.668-.013 4.948-.072 1.277-.059 2.15-.261 2.913-.558a7.072 7.072 0 002.564-1.67 7.072 7.072 0 001.67-2.564c.297-.763.499-1.636.558-2.913.059-1.28.072-1.689.072-4.948 0-3.259-.013-3.667-.072-4.947-.059-1.277-.261-2.15-.558-2.913a7.072 7.072 0 00-1.67-2.564A7.072 7.072 0 0019.86.63C19.098.333 18.225.131 16.948.072 15.668.013 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
          </svg>
        </a>
        <!-- Facebook -->
        <a href="#" aria-label="Facebook">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.235 2.686.235v2.97h-1.513c-1.491 0-1.956.93-1.956 1.886v2.268h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"/>
          </svg>
        </a>
        <!-- LinkedIn -->
        <a href="#" aria-label="LinkedIn">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
          </svg>
        </a>
        <!-- X / Twitter -->
        <a href="#" aria-label="X">
          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
          </svg>
        </a>
      </div>
    </div>
  </div>

  <!-- RIGHT: Form -->
  <div class="form-col">
    <div class="form-row">
      <div class="field">
        <label for="name">Your Name</label>
        <input id="name" type="text" placeholder="Your full name"/>
      </div>
      <div class="field">
        <label for="email">Email address</label>
        <input id="email" type="email" placeholder="Your email address"/>
      </div>
    </div>

    <div class="field">
      <label for="message">Message</label>
      <textarea id="message" placeholder="Write something...."></textarea>
    </div>

    <button class="btn">Send Message</button>
  </div>

</div>

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

    :root {
      --bg: #ccc9c1;
      --card: #ffffff;
      --text: #111111;
      --muted: #888880;
      --input-bg: #f4f3ef;
      --border: #e5e4df;
      --btn: #111111;
      --btn-text: #ffffff;
      --radius: 10px;
    }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem 1rem;
    }

    .card {
      background: var(--card);
      border-radius: 18px;
      padding: 3rem 3.5rem;
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 3.5rem;
      max-width: 820px;
      width: 100%;
      box-shadow: 0 8px 48px rgba(0,0,0,0.07);
      animation: fadeUp 0.5s ease both;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* LEFT COLUMN */
    .info h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(2rem, 5vw, 2.8rem);
      color: var(--text);
      line-height: 1.1;
      margin-bottom: 2rem;
    }

    .info-block {
      margin-bottom: 1.4rem;
    }

    .info-block .label {
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 0.25rem;
    }

    .info-block .value {
      font-size: 0.95rem;
      color: var(--text);
      line-height: 1.55;
    }

    .social {
      margin-top: 2rem;
    }

    .social .label {
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      margin-bottom: 0.65rem;
    }

    .social-icons {
      display: flex;
      gap: 0.55rem;
    }

    .social-icons a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      background: var(--text);
      border-radius: 50%;
      color: #fff;
      text-decoration: none;
      transition: transform 0.18s ease, background 0.18s ease;
    }

    .social-icons a:hover {
      background: #444;
      transform: translateY(-2px);
    }

    .social-icons svg {
      width: 15px;
      height: 15px;
      fill: currentColor;
    }

    /* RIGHT COLUMN */
    .form-col {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .field label {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--text);
      letter-spacing: 0.01em;
    }

    .field input,
    .field textarea {
      background: var(--input-bg);
      border: 1.5px solid transparent;
      border-radius: var(--radius);
      padding: 0.65rem 0.85rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.88rem;
      color: var(--text);
      outline: none;
      transition: border-color 0.18s ease, background 0.18s ease;
      resize: none;
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: #bbb;
    }

    .field input:focus,
    .field textarea:focus {
      border-color: var(--text);
      background: #fff;
    }

    .field textarea {
      height: 130px;
    }

    .btn {
      margin-top: 0.3rem;
      background: var(--btn);
      color: var(--btn-text);
      border: none;
      border-radius: var(--radius);
      padding: 0.85rem 1.5rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.92rem;
      font-weight: 500;
      cursor: pointer;
      letter-spacing: 0.02em;
      transition: background 0.18s ease, transform 0.15s ease;
    }

    .btn:hover {
      background: #333;
      transform: translateY(-1px);
    }

    .btn:active {
      transform: translateY(0);
    }

    /* RESPONSIVE */
    @media (max-width: 680px) {
      .card {
        grid-template-columns: 1fr;
        gap: 2.2rem;
        padding: 2rem 1.6rem;
      }

      .form-row {
        grid-template-columns: 1fr;
      }
    }

Logistics Banner

HTML

@teamuiblitz100

<section class="hero">

  <!-- Background -->
  <div class="hero-bg"></div>
  <div class="hero-overlay"></div>

  <!-- Hero text -->
  <div class="hero-content">
    <h1 class="hero-title">Logistics You Can Count On, Start to Finish.</h1>
    <p class="hero-desc">We specialise in heavy haulage, freight solutions, and earthmoving transport. With a commitment to delivering excellence, we ensure your goods reach their destination safely, efficiently, and on time.</p>
    <div class="hero-btns">
      <button class="btn-primary">
        Contact Us
        <span class="btn-arrow">
          <svg viewBox="0 0 13 13" fill="none"><path d="M2.5 10.5L10.5 2.5M10.5 2.5H5M10.5 2.5V8" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </span>
      </button>
      <button class="btn-ghost">Learn More</button>
    </div>
  </div>

  <!-- Stats bar -->
  <div class="stats-bar">
    <div class="stat">
      <div class="stat-num">10%</div>
      <div class="stat-label">First Nations Employment</div>
    </div>
    <div class="stat">
      <div class="stat-num">35+</div>
      <div class="stat-label">Clients Nationally</div>
    </div>
    <div class="stat">
      <div class="stat-num">150K+</div>
      <div class="stat-label">Tonnes of material transported yearly</div>
    </div>
  </div>

</section>

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

  body { font-family: 'DM Sans', sans-serif; background: #0a0a0a; }

  /* ── HERO ── */
  .hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Background truck image — positioned left */
  .hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?w=1600&q=90');
    background-size: cover;
    background-position: center left;
    z-index: 0;
  }

  /* Dark overlay — heavy RIGHT, fades left, heavy bottom */
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to left,   rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 35%, rgba(0,0,0,0.25) 60%, transparent 80%),
      linear-gradient(to top,    rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 18%, transparent 40%),
      linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 20%);
  }

  /* ── CONTENT ── */
  .hero-content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem 5vw 3rem;
    max-width: 680px;
    margin-left: auto;
  }

  .hero-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(3rem, 7vw, 5.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 1.4rem;
    animation: fadeUp 0.9s ease both;
  }

  .hero-desc {
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    color: rgba(255,255,255,0.7);
    line-height: 1.75;
    max-width: 520px;
    margin-bottom: 2.2rem;
    animation: fadeUp 0.9s 0.2s ease both;
  }

  .hero-btns {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    animation: fadeUp 0.9s 0.35s ease both;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    color: #111;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.75rem 1.5rem 0.75rem 1.8rem;
    border-radius: 100px;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .btn-primary:hover { background: #e8e8e8; transform: translateY(-1px); }

  .btn-arrow {
    width: 30px; height: 30px;
    background: #111;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

  .btn-arrow svg { width: 13px; height: 13px; }

  .btn-ghost {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color 0.2s;
    letter-spacing: 0.01em;
  }

  .btn-ghost:hover { color: #fff; }

  /* ── STATS BAR ── */
  .stats-bar {
    position: relative;
    z-index: 10;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: stretch;
    padding: 2.2rem 5vw;
    gap: 0;
    animation: fadeUp 0.9s 0.5s ease both;
  }

  .stat {
    flex: 1;
    padding: 0 2rem;
    border-right: 1px solid rgba(255,255,255,0.1);
  }

  .stat:first-child { padding-left: 0; }
  .stat:last-child  { border-right: none; }

  .stat-num {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 0.4rem;
  }

  .stat-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-weight: 400;
    line-height: 1.4;
  }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 768px) {
    .hero-content { padding: 4rem 1.4rem 2rem; }
    .hero-title   { font-size: clamp(2.4rem, 9vw, 3.5rem); }
    .stats-bar    { flex-direction: column; gap: 1.5rem; padding: 1.8rem 1.4rem; }
    .stat         { padding: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 1.2rem; }
    .stat:last-child { border-bottom: none; padding-bottom: 0; }
  }

Solar Panel Hero Section

HTML

@teamuiblitz100

<section class="hero">

  <div class="bg-sky"></div>
  <div class="clouds"></div>
  <div class="sun-glow"></div>
  <div class="ground"></div>

  <!-- ── Realistic SVG Wind Turbines ── -->
  <svg class="turbines-svg" viewBox="0 0 1440 600" preserveAspectRatio="xMidYMax meet" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <!-- Blade gradient: white tip → light gray base -->
      <linearGradient id="blade-grad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%"   stop-color="#e8f0ee" stop-opacity="0.95"/>
        <stop offset="50%"  stop-color="#d0ddd8" stop-opacity="0.9"/>
        <stop offset="100%" stop-color="#b8ccc6" stop-opacity="0.85"/>
      </linearGradient>
      <linearGradient id="tower-grad" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%"   stop-color="#c5d8d2"/>
        <stop offset="50%"  stop-color="#e2ecea"/>
        <stop offset="100%" stop-color="#b0c8c2"/>
      </linearGradient>
    </defs>

    <!-- ═══════════════════════════
         TURBINE MACRO (reusable via JS)
         Each turbine = tower + nacelle + hub + 3 blades
    ═══════════════════════════ -->

    <!-- TURBINE 1 — x=130, tower bottom=600, height=300 -->
    <g opacity="0.88">
      <!-- Tower: tapered trapezoid -->
      <polygon points="124,600 136,600 132,310 128,310" fill="url(#tower-grad)"/>
      <!-- Nacelle (body housing) -->
      <rect x="121" y="303" width="22" height="10" rx="3" fill="#d4e4e0"/>
      <!-- Hub -->
      <circle cx="130" cy="308" r="5" fill="#c0d4ce" stroke="#a8c0b8" stroke-width="1"/>
      <!-- Rotating blades group -->
      <g class="rotor-1" style="transform-box:fill-box">
        <!-- Blade 1: long tapered aerodynamic shape -->
        <path d="M130,308 C128,295 125,270 128,245 C129,238 131,238 132,245 C135,270 132,295 130,308Z" fill="url(#blade-grad)"/>
        <!-- Blade 2: rotated 120deg -->
        <path d="M130,308 C128,295 125,270 128,245 C129,238 131,238 132,245 C135,270 132,295 130,308Z" fill="url(#blade-grad)" transform="rotate(120 130 308)"/>
        <!-- Blade 3: rotated 240deg -->
        <path d="M130,308 C128,295 125,270 128,245 C129,238 131,238 132,245 C135,270 132,295 130,308Z" fill="url(#blade-grad)" transform="rotate(240 130 308)"/>
      </g>
    </g>

    <!-- TURBINE 2 — x=290, taller -->
    <g opacity="0.92">
      <polygon points="282,600 296,600 291,260 287,260" fill="url(#tower-grad)"/>
      <rect x="279" y="252" width="26" height="12" rx="3" fill="#d4e4e0"/>
      <circle cx="290" cy="258" r="6" fill="#c0d4ce" stroke="#a8c0b8" stroke-width="1.2"/>
      <g class="rotor-2" style="transform-box:fill-box">
        <path d="M290,258 C287,243 284,212 287,183 C288,175 292,175 293,183 C296,212 293,243 290,258Z" fill="url(#blade-grad)"/>
        <path d="M290,258 C287,243 284,212 287,183 C288,175 292,175 293,183 C296,212 293,243 290,258Z" fill="url(#blade-grad)" transform="rotate(120 290 258)"/>
        <path d="M290,258 C287,243 284,212 287,183 C288,175 292,175 293,183 C296,212 293,243 290,258Z" fill="url(#blade-grad)" transform="rotate(240 290 258)"/>
      </g>
    </g>

    <!-- TURBINE 3 — x=480 -->
    <g opacity="0.85">
      <polygon points="473,600 485,600 481,320 477,320" fill="url(#tower-grad)"/>
      <rect x="470" y="313" width="20" height="10" rx="3" fill="#d4e4e0"/>
      <circle cx="479" cy="318" r="5" fill="#c0d4ce" stroke="#a8c0b8" stroke-width="1"/>
      <g class="rotor-3" style="transform-box:fill-box">
        <path d="M479,318 C477,305 474,278 477,253 C478,246 480,246 481,253 C484,278 481,305 479,318Z" fill="url(#blade-grad)"/>
        <path d="M479,318 C477,305 474,278 477,253 C478,246 480,246 481,253 C484,278 481,305 479,318Z" fill="url(#blade-grad)" transform="rotate(120 479 318)"/>
        <path d="M479,318 C477,305 474,278 477,253 C478,246 480,246 481,253 C484,278 481,305 479,318Z" fill="url(#blade-grad)" transform="rotate(240 479 318)"/>
      </g>
    </g>

    <!-- TURBINE 4 — x=680, tallest -->
    <g opacity="0.95">
      <polygon points="671,600 687,600 682,220 676,220" fill="url(#tower-grad)"/>
      <rect x="668" y="211" width="28" height="13" rx="3.5" fill="#d8e8e4"/>
      <circle cx="680" cy="218" r="7" fill="#c0d4ce" stroke="#a8c0b8" stroke-width="1.5"/>
      <g class="rotor-4" style="transform-box:fill-box">
        <path d="M680,218 C677,200 673,165 676,133 C677,124 683,124 684,133 C687,165 683,200 680,218Z" fill="url(#blade-grad)"/>
        <path d="M680,218 C677,200 673,165 676,133 C677,124 683,124 684,133 C687,165 683,200 680,218Z" fill="url(#blade-grad)" transform="rotate(120 680 218)"/>
        <path d="M680,218 C677,200 673,165 676,133 C677,124 683,124 684,133 C687,165 683,200 680,218Z" fill="url(#blade-grad)" transform="rotate(240 680 218)"/>
      </g>
    </g>

    <!-- TURBINE 5 — x=870 -->
    <g opacity="0.88">
      <polygon points="863,600 875,600 871,280 867,280" fill="url(#tower-grad)"/>
      <rect x="860" y="272" width="22" height="11" rx="3" fill="#d4e4e0"/>
      <circle cx="869" cy="277" r="5.5" fill="#c0d4ce" stroke="#a8c0b8" stroke-width="1"/>
      <g class="rotor-5" style="transform-box:fill-box">
        <path d="M869,277 C867,263 864,235 867,208 C868,200 870,200 871,208 C874,235 871,263 869,277Z" fill="url(#blade-grad)"/>
        <path d="M869,277 C867,263 864,235 867,208 C868,200 870,200 871,208 C874,235 871,263 869,277Z" fill="url(#blade-grad)" transform="rotate(120 869 277)"/>
        <path d="M869,277 C867,263 864,235 867,208 C868,200 870,200 871,208 C874,235 871,263 869,277Z" fill="url(#blade-grad)" transform="rotate(240 869 277)"/>
      </g>
    </g>

    <!-- TURBINE 6 — x=1080 -->
    <g opacity="0.82">
      <polygon points="1073,600 1087,600 1083,300 1077,300" fill="url(#tower-grad)"/>
      <rect x="1070" y="292" width="24" height="11" rx="3" fill="#d4e4e0"/>
      <circle cx="1080" cy="297" r="5.5" fill="#c0d4ce" stroke="#a8c0b8" stroke-width="1"/>
      <g class="rotor-6" style="transform-box:fill-box">
        <path d="M1080,297 C1078,283 1075,255 1078,228 C1079,220 1081,220 1082,228 C1085,255 1082,283 1080,297Z" fill="url(#blade-grad)"/>
        <path d="M1080,297 C1078,283 1075,255 1078,228 C1079,220 1081,220 1082,228 C1085,255 1082,283 1080,297Z" fill="url(#blade-grad)" transform="rotate(120 1080 297)"/>
        <path d="M1080,297 C1078,283 1075,255 1078,228 C1079,220 1081,220 1082,228 C1085,255 1082,283 1080,297Z" fill="url(#blade-grad)" transform="rotate(240 1080 297)"/>
      </g>
    </g>

    <!-- TURBINE 7 — x=1300 -->
    <g opacity="0.78">
      <polygon points="1293,600 1307,600 1303,340 1297,340" fill="url(#tower-grad)"/>
      <rect x="1290" y="333" width="20" height="10" rx="3" fill="#d4e4e0"/>
      <circle cx="1300" cy="338" r="5" fill="#c0d4ce" stroke="#a8c0b8" stroke-width="1"/>
      <g class="rotor-7" style="transform-box:fill-box">
        <path d="M1300,338 C1298,325 1295,298 1298,273 C1299,266 1301,266 1302,273 C1305,298 1302,325 1300,338Z" fill="url(#blade-grad)"/>
        <path d="M1300,338 C1298,325 1295,298 1298,273 C1299,266 1301,266 1302,273 C1305,298 1302,325 1300,338Z" fill="url(#blade-grad)" transform="rotate(120 1300 338)"/>
        <path d="M1300,338 C1298,325 1295,298 1298,273 C1299,266 1301,266 1302,273 C1305,298 1302,325 1300,338Z" fill="url(#blade-grad)" transform="rotate(240 1300 338)"/>
      </g>
    </g>

  </svg>

  <!-- Navbar -->
  <nav class="navbar">
    <div class="logo">Sunrock</div>
    <div class="nav-links">
      <a href="#" class="active">Home</a>
      <a href="#">Solutions</a>
      <a href="#">Projects</a>
      <a href="#">About us</a>
      <a href="#">Contact</a>
    </div>
    <div class="nav-right">
      <button class="open-menu">Open menu</button>
      <div class="flag">🇬🇧</div>
    </div>
  </nav>

  <!-- Hero content -->
  <div class="hero-content">
    <h1 class="hero-title">Clean and smart solar energy for your business.</h1>
    <p class="hero-sub">Sustainable energy solutions made easy, reliable, and tailor-made for Europe.</p>
    <a href="#" class="cta-btn">
      Let's Talk Solar Solutions
      <span class="cta-icon">
        <svg viewBox="0 0 13 13" fill="none"><path d="M2.5 10.5L10.5 2.5M10.5 2.5H5M10.5 2.5V8" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </span>
    </a>
  </div>

  <!-- Glass info cards -->
  <div class="glass-cards">
    <div class="g-card">
      <div class="g-card-icon">⚡</div>
      <h3>Clean energy generated</h3>
      <p>Since 2019, we've generated over 946 GWh of clean, sustainable energy — a commitment to a greener, healthier future.</p>
    </div>
    <div class="g-card" style="align-self:flex-end">
      <h3>Impact</h3>
      <p>Our clean energy solutions currently benefit over 525,555 people — thousands of homes, businesses, and communities powered by renewable energy.</p>
    </div>
  </div>

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

  :root { --blue: #1a6ef5; }

  body { font-family: 'DM Sans', sans-serif; background: #0a1628; overflow-x: hidden; }

  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Sky gradient */
  .bg-sky {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      #5bbfbe 0%, #7dd4c8 18%, #8eddd0 35%,
      #6fc9b8 55%, #3a8f6e 72%, #1e5c3a 88%, #0f3320 100%
    );
    z-index: 0;
  }

  /* Drifting clouds */
  .clouds {
    position: absolute; top: 0; left: 0;
    width: 300%; height: 45%; z-index: 1;
    animation: driftClouds 38s linear infinite;
    background:
      radial-gradient(ellipse 320px 90px  at 12% 40%, rgba(255,255,255,0.55) 0%, transparent 70%),
      radial-gradient(ellipse 200px 60px  at 20% 58%, rgba(255,255,255,0.38) 0%, transparent 65%),
      radial-gradient(ellipse 380px 100px at 36% 28%, rgba(255,255,255,0.5)  0%, transparent 70%),
      radial-gradient(ellipse 250px 75px  at 52% 18%, rgba(255,255,255,0.45) 0%, transparent 65%),
      radial-gradient(ellipse 300px 85px  at 68% 42%, rgba(255,255,255,0.52) 0%, transparent 68%),
      radial-gradient(ellipse 350px 95px  at 90% 24%, rgba(255,255,255,0.48) 0%, transparent 70%);
  }
  @keyframes driftClouds { from{transform:translateX(0)} to{transform:translateX(-33.33%)} }

  /* Sun glow */
  .sun-glow {
    position: absolute; top: -80px; left: 50%;
    transform: translateX(-50%);
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,240,150,0.25) 0%, rgba(255,220,80,0.1) 40%, transparent 70%);
    z-index: 2;
    animation: sunPulse 6s ease-in-out infinite;
  }
  @keyframes sunPulse {
    0%,100%{transform:translateX(-50%) scale(1);opacity:.8}
    50%{transform:translateX(-50%) scale(1.08);opacity:1}
  }

  /* Ground */
  .ground {
    position: absolute; bottom: 0; left: 0; right: 0; height: 20%; z-index: 4;
    background: linear-gradient(to top, #0d3520 0%, #1a5c35 60%, transparent 100%);
  }

  /* ── SVG turbines layer ── */
  .turbines-svg {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%; height: 80%;
    z-index: 5;
    pointer-events: none;
  }

  /* Blade rotation animations — each turbine different speed */
  .rotor-1 { animation: spin 4s   linear infinite; transform-origin: 50% 50%; }
  .rotor-2 { animation: spin 3.2s linear infinite; transform-origin: 50% 50%; }
  .rotor-3 { animation: spin 5s   linear infinite; transform-origin: 50% 50%; }
  .rotor-4 { animation: spin 3.8s linear infinite; transform-origin: 50% 50%; }
  .rotor-5 { animation: spin 4.5s linear infinite; transform-origin: 50% 50%; }
  .rotor-6 { animation: spin 5.5s linear infinite; transform-origin: 50% 50%; }
  .rotor-7 { animation: spin 3.5s linear infinite; transform-origin: 50% 50%; }

  @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }

  /* ── NAVBAR ── */
  .navbar {
    position: relative; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.4rem 3rem;
  }

  .logo {
    font-family: 'Syne', sans-serif; font-size: 1.35rem;
    font-weight: 800; color: #fff; letter-spacing: 0.06em; text-transform: uppercase;
  }

  .nav-links {
    display: flex; align-items: center; gap: 0.3rem;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: 0.35rem;
  }

  .nav-links a {
    font-size: 0.82rem; color: rgba(255,255,255,0.75); text-decoration: none;
    padding: 0.45rem 1.1rem; border-radius: 100px; transition: background 0.2s, color 0.2s;
  }

  .nav-links a.active { background: #fff; color: #111; font-weight: 500; }
  .nav-links a:hover:not(.active) { color:#fff; background:rgba(255,255,255,0.1); }

  .nav-right { display: flex; align-items: center; gap: 0.85rem; }

  .open-menu {
    background: rgba(255,255,255,0.12); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.2); color: #fff;
    font-family: 'DM Sans',sans-serif; font-size: 0.82rem;
    padding: 0.5rem 1.1rem; border-radius: 100px; cursor: pointer; transition: background 0.2s;
  }
  .open-menu:hover { background: rgba(255,255,255,0.2); }

  .flag {
    width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3);
    font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1);
  }

  /* ── HERO CONTENT ── */
  .hero-content {
    position: relative; z-index: 15; flex: 1;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; text-align: center;
    padding: 1rem 2rem 10rem;
    animation: fadeUp 1s ease both;
  }

  @keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

  .hero-title {
    font-family: 'Syne', sans-serif; font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-weight: 700; color: #fff; line-height: 1.12; max-width: 720px;
    margin-bottom: 1rem; text-shadow: 0 2px 24px rgba(0,0,0,0.2);
    animation: fadeUp 1s 0.15s ease both;
  }

  .hero-sub {
    font-size: clamp(0.88rem,1.5vw,1rem); color: rgba(255,255,255,0.82);
    line-height: 1.6; max-width: 420px; margin-bottom: 2rem;
    animation: fadeUp 1s 0.3s ease both;
  }

  .cta-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: rgba(255,255,255,0.92); color: #111;
    font-family: 'DM Sans',sans-serif; font-size: 0.88rem; font-weight: 500;
    padding: 0.75rem 1.5rem; border-radius: 100px; border: none; cursor: pointer;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: fadeUp 1s 0.45s ease both; text-decoration: none;
  }
  .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }

  .cta-icon {
    width: 28px; height: 28px; background: var(--blue); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .cta-icon svg { width: 13px; height: 13px; }

  /* ── GLASS CARDS ── */
  .glass-cards {
    position: absolute; bottom: 3rem; left: 0; right: 0; z-index: 16;
    display: flex; justify-content: space-between; padding: 0 3rem;
    pointer-events: none; animation: fadeUp 1s 0.6s ease both;
  }

  .g-card {
    background: rgba(255,255,255,0.13); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.22); border-radius: 18px;
    padding: 1.2rem 1.4rem; max-width: 280px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  }

  .g-card-icon {
    width: 36px; height: 36px; background: rgba(255,255,255,0.2);
    border-radius: 10px; display: flex; align-items: center;
    justify-content: center; margin-bottom: 0.8rem; font-size: 1rem;
  }

  .g-card h3 {
    font-family: 'Syne',sans-serif; font-size: 0.95rem;
    font-weight: 600; color: #fff; margin-bottom: 0.5rem;
  }

  .g-card p { font-size: 0.72rem; color: rgba(255,255,255,0.72); line-height: 1.65; }

  @media (max-width: 768px) {
    .navbar { padding: 1rem 1.2rem; }
    .nav-links { display: none; }
    .glass-cards { flex-direction: column; gap: 0.75rem; padding: 0 1rem; bottom: 1.5rem; }
    .g-card { max-width: 100%; }
    .hero-content { padding-bottom: 20rem; }
  }

Slider

HTML

@teamuiblitz100

<div class="card">

  <!-- CSS scroll-snap slider -->
  <div class="slider" id="slider">
    <div class="slide" id="slide-1"></div>
    <div class="slide" id="slide-2"></div>
    <div class="slide" id="slide-3"></div>
  </div>

  <!-- Brand title -->
  <div class="brand-title">
    <span>GORN</span>
    <span style="padding-left:2.8rem">EE</span>
    <span style="padding-left:4.8rem">TYR</span>
  </div>

  <!-- Glass panel — static, always visible -->
  <div class="glass-panel">
    <div class="topbar">
      <span class="contact-label">Contact us</span>
      <div class="icon-row">
        <div class="icon-btn">
          <svg viewBox="0 0 14 14" fill="none">
            <rect x="1" y="3" width="12" height="8" rx="1.5" stroke="rgba(255,255,255,0.65)" stroke-width="1.2"/>
            <path d="M1 4.5l6 4 6-4" stroke="rgba(255,255,255,0.65)" stroke-width="1.2" stroke-linecap="round"/>
          </svg>
        </div>
        <div class="icon-btn">
          <svg viewBox="0 0 14 14" fill="none">
            <circle cx="7" cy="7" r="5" stroke="rgba(255,255,255,0.65)" stroke-width="1.2"/>
            <path d="M7 4.5V7l1.5 1.5" stroke="rgba(255,255,255,0.65)" stroke-width="1.2" stroke-linecap="round"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="panel-content">
      <p class="slide-label">Mountain Tour</p>
      <p class="slide-title">Hiking & Adventure</p>
      <p class="slide-desc">At modern mountain resorts, cable cars operate even in summer. Hiking can reach altitudes of 3000 meters and above.</p>
      <button class="buy-btn">Buy a tour</button>
    </div>
  </div>

  <!-- Right diamond nav -->
  <div class="right-nav">
    <div class="vline"></div>
    <a class="diamond" href="#slide-1"></a>
    <a class="diamond" href="#slide-2"></a>
    <a class="diamond" href="#slide-3"></a>
    <div class="vline"></div>
  </div>

  <!-- Bottom arrows — JS scroll by one slide width -->
  <div class="nav-arrows">
    <button class="nav-btn" onclick="document.getElementById('slider').scrollBy({left:-document.getElementById('slider').offsetWidth,behavior:'smooth'})">
      <svg viewBox="0 0 12 12" fill="none"><path d="M7.5 2L4 6l3.5 4" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
    <button class="nav-btn" onclick="document.getElementById('slider').scrollBy({left:document.getElementById('slider').offsetWidth,behavior:'smooth'})">
      <svg viewBox="0 0 12 12" fill="none"><path d="M4.5 2L8 6l-3.5 4" stroke="#fff" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
  </div>

  <!-- Dots -->
  <div class="dots">
    <a class="dot" href="#slide-1"></a>
    <a class="dot" href="#slide-2"></a>
    <a class="dot" href="#slide-3"></a>
  </div>

  <!-- Counter -->
  <div class="counter" id="counter">01 / 03</div>

</div>

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

  body {
    background: #1a2a1a;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
  }

  /* ── Card ── */
  .card {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  }

  /* ── CSS-only scroll snap slider ── */
  .slider {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .slider::-webkit-scrollbar { display: none; }

  /* ── Each slide ── */
  .slide {
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
  }

  .slide:nth-child(1) { background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=900&q=85'); }
  .slide:nth-child(2) { background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=900&q=85'); }
  .slide:nth-child(3) { background-image: url('https://images.unsplash.com/photo-1494500764479-0c8f2919a3d8?w=900&q=85'); }

  /* Gradient overlay */
  .slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      rgba(15,30,15,0.82) 0%,
      rgba(15,30,15,0.42) 42%,
      transparent 70%
    );
  }

  /* ── Glass panel ── */
  .glass-panel {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 46%;
    background: rgba(25,45,25,0.3);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid rgba(255,255,255,0.1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.4rem 1.6rem;
    pointer-events: none;
  }

  /* top bar */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .contact-label {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
  }

  .icon-row { display: flex; gap: 0.45rem; }

  .icon-btn {
    width: 26px; height: 26px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
    background: rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: center;
  }

  .icon-btn svg { width: 12px; height: 12px; }

  /* content */
  .panel-content {}

  .slide-label {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.4rem;
  }

  .slide-title {
    font-size: 1.05rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 0.6rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255,255,255,0.35);
  }

  .slide-desc {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin-bottom: 1.1rem;
  }

  .buy-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    padding: 0.45rem 1.1rem;
    border-radius: 100px;
    cursor: pointer;
    pointer-events: all;
    transition: background 0.2s;
  }

  .buy-btn:hover { background: rgba(255,255,255,0.2); }

  /* ── Big title ── */
  .brand-title {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-62%);
    width: 100%;
    z-index: 9;
    pointer-events: none;
    padding-left: 1rem;
  }

  .brand-title span {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 11vw, 7.5rem);
    color: rgba(255,255,255,0.85);
    line-height: 0.88;
    letter-spacing: 0.04em;
    display: block;
    text-shadow: 0 4px 24px rgba(0,0,0,0.25);
  }

  /* ── Nav arrows (anchor links) ── */
  .nav-arrows {
    position: absolute;
    bottom: 1.2rem; right: 1.4rem;
    z-index: 20;
    display: flex;
    gap: 0.5rem;
  }

  .nav-btn {
    width: 34px; height: 28px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
  }

  .nav-btn:hover { background: rgba(255,255,255,0.24); }
  .nav-btn svg { width: 12px; height: 12px; }

  /* ── Dot indicators ── */
  .dots {
    position: absolute;
    bottom: 1.3rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 6px;
  }

  .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
  }

  .dot:hover { background: rgba(255,255,255,0.7); }

  /* ── Right diamond nav ── */
  .right-nav {
    position: absolute;
    right: 1.3rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .vline { width: 1px; height: 30px; background: rgba(255,255,255,0.25); }

  .diamond {
    width: 9px; height: 9px;
    border: 1.5px solid rgba(255,255,255,0.5);
    transform: rotate(45deg);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
  }

  .diamond:hover { background: rgba(255,255,255,0.5); }

  /* slide counter */
  .counter {
    position: absolute;
    bottom: 1.2rem; left: 1.6rem;
    z-index: 20;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
  }

  @media (max-width: 580px) {
    .card { height: 500px; }
    .glass-panel { width: 100%; border-right: none; }
    .brand-title { display: none; }
  }

 const slider = document.getElementById('slider');
  const counter = document.getElementById('counter');

  slider.addEventListener('scroll', () => {
    const idx = Math.round(slider.scrollLeft / slider.offsetWidth);
    counter.textContent = `${String(idx + 1).padStart(2,'0')} / 03`;
  }, { passive: true });