UiBlitz - Developers Hub: Build. Learn. Earn

Portfolio Bento Grid

HTML

@teamuiblitz100

<div class="wrapper">
 
  <!-- Sidebar -->
  <nav class="sidebar">
    <a>Podcast</a>
    <a>Portfolio</a>
    <a>Research</a>
    <a>Clients</a>
  </nav>
 
  <div class="main">
 
    <!-- ── ABOUT CARD ── -->
    <div class="about-card">
      <div class="blob2"></div>
 
      <div class="about-label">
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
          <path d="M8 1v14M1 8h14M2.93 2.93l10.14 10.14M13.07 2.93L2.93 13.07" stroke="white" stroke-width="1.7" stroke-linecap="round"/>
        </svg>
        About Me
      </div>
 
      <div class="avatar-ring">
        <img
          src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=400&h=400&fit=crop&crop=faces&q=80"
          alt="Jon Daniel portrait"
          onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces&q=80';"
        >
      </div>
 
      <div class="name-block">
        <div class="hi">Im,</div>
        <div class="nm">Jon<br>Daniel</div>
      </div>
 
      <div class="about-footer">
        <div class="email-row">
          <span>inquiry@jondaniel.design</span>
          <svg width="12" height="9" viewBox="0 0 13 10" fill="none">
            <rect x=".5" y=".5" width="12" height="9" rx="1.5" stroke="rgba(255,255,255,.6)" stroke-width="1"/>
            <path d="M1 1.5l5.5 4L12 1.5" stroke="rgba(255,255,255,.6)" stroke-width="1"/>
          </svg>
        </div>
        <div class="vinyl">
          <svg class="vinyl-svg" viewBox="0 0 50 50" width="50" height="50">
            <defs><path id="cp" d="M25,25 m-19,0 a19,19 0 1,1 38,0 a19,19 0 1,1 -38,0"/></defs>
            <text><textPath href="#cp" style="font-size:5.4px;fill:rgba(255,255,255,.5);font-family:'DM Sans',sans-serif;letter-spacing:1.1px">MY DESIGN PORTFOLIO · 2025 ·</textPath></text>
          </svg>
          <div class="vinyl-dot"></div>
        </div>
      </div>
    </div>
 
    <!-- ── RIGHT COL ── -->
    <div class="right-col">
 
      <div class="heading-row">
        <h1>Portfolio</h1>
        <div class="bracket"></div>
      </div>
 
      <div class="bottom-grid">
 
        <div class="media-stats" style="display:flex;flex-direction:column;gap:12px;min-width:0">
 
          <!-- Feature flamingo image -->
          <div class="feature-wrap">
            <img
              src="https://images.unsplash.com/photo-1571752726703-5e7d1f6a986d?w=900&h=500&fit=crop&q=85"
              alt="Flamingo tropical nature"
              onerror="this.onerror=null;this.src='https://images.unsplash.com/photo-1532274402911-5a369e4c4bb5?w=900&h=500&fit=crop&q=80';"
            >
            <div class="play-btn" title="Play reel">
              <svg width="13" height="15" viewBox="0 0 14 16" fill="none">
                <path d="M2 1l11 7-11 7V1z" fill="#1A1A1A"/>
              </svg>
            </div>
          </div>
 
          <!-- Small cards -->
          <div class="small-cards">
 
            <!-- Clients / Apple -->
            <div class="mini-card clients-card">
              <div class="ca"></div>
              <svg width="28" height="34" viewBox="0 0 28 34" fill="white">
                <path d="M21 17.5c0-2.9 2.3-4.3 2.4-4.4C22 11.1 20 10.8 19.2 10.7c-1.8-.2-3.5 1-4.3 1-.8 0-2.2-1-3.7-.9-1.9.1-3.6 1.1-4.6 2.8-2 3.4-.5 8.4 1.4 11.2 1 1.3 2 2.8 3.5 2.8 1.4-.1 1.9-.9 3.6-.9 1.7 0 2.2.9 3.6.9 1.5 0 2.5-1.4 3.4-2.7 1.1-1.5 1.5-3 1.5-3.1 0 0-2.7-1-2.6-3.3zM18 7.4c.8-1 1.3-2.3 1.1-3.6-1.1.1-2.5.7-3.2 1.7-.7.8-1.3 2.1-1.1 3.3 1.2.1 2.4-.6 3.2-1.4z"/>
              </svg>
              <span>Clients</span>
            </div>
 
            <!-- Orb -->
            <div class="mini-card orb-card">
              <div class="ca"></div>
              <div class="orb"></div>
            </div>
 
            <!-- 172 Awards -->
            <div class="mini-card awards-card">
              <div class="ca dk"></div>
              <div class="num"><span class="count" data-target="172">0</span></div>
              <div class="lbl">Global Design<br>Awards.</div>
            </div>
 
          </div>
        </div>
 
        <!-- Stats -->
        <div class="stats-col">
          <div class="stat-card teal">
            <div class="ca"></div>
            <div class="num"><span class="count" data-target="251">0</span></div>
            <div class="lbl">Projects</div>
          </div>
          <div class="stat-card violet">
            <div class="ca"></div>
            <div class="num"><span class="count" data-target="156">0</span></div>
            <div class="lbl">Awards</div>
          </div>
        </div>
 
      </div>
    </div>
 
  </div>
</div>

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
 
:root{
  --purple:#7C6FF7;
  --teal:#5DC5B8;
  --violet:#9B7FD4;
  --yellow:#F5B731;
  --dark:#1A1A1A;
  --white:#fff;
  --bg:#E2E2EA;
  --r:20px;
}
 
body{
  background:var(--bg);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Sans',sans-serif;
  padding:32px 16px;
  overflow-x:hidden;
}
 
/* WRAPPER */
.wrapper{
  background:var(--white);
  border-radius:28px;
  box-shadow:0 40px 100px rgba(0,0,0,.17),0 8px 24px rgba(0,0,0,.07);
  width:100%;max-width:1140px;
  display:flex;
  padding:22px 22px 22px 0;
  gap:0;
  opacity:0;transform:translateY(36px);
  animation:wrapIn .85s cubic-bezier(.22,1,.36,1) .05s forwards;
}
@keyframes wrapIn{to{opacity:1;transform:none}}
 
/* SIDEBAR */
.sidebar{
  display:flex;flex-direction:column;justify-content:center;
  gap:26px;padding:40px 0 40px 18px;min-width:34px;
}
.sidebar a{
  font-size:10.5px;font-weight:500;color:#aaa;
  letter-spacing:.1em;writing-mode:vertical-rl;
  transform:rotate(180deg);text-decoration:none;
  cursor:pointer;transition:color .25s;
}
.sidebar a:hover{color:var(--dark)}
 
/* MAIN GRID */
.main{
  flex:1;display:grid;
  grid-template-columns:clamp(220px,26%,285px) 1fr;
  gap:16px;padding:0 0 0 16px;min-width:0;
}
 
/* ── ABOUT CARD ── */
.about-card{
  background:var(--purple);
  /* notch top-left via clip-path */
  border-radius:0 var(--r) var(--r) var(--r);
  clip-path:polygon(30px 0%,100% 0%,100% 100%,0% 100%,0% 30px);
  padding:22px 20px 20px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
/* notch visual fill matching bg */
.about-card::before{
  content:'';
  position:absolute;top:0;left:0;
  width:42px;height:42px;
  background:var(--bg);
  clip-path:polygon(0 0,100% 0,0 100%);
  z-index:5;border-radius:0 0 10px 0;
}
/* glow blob top-right */
.about-card::after{
  content:'';
  position:absolute;
  width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 68%);
  top:-70px;right:-60px;pointer-events:none;
}
.blob2{
  position:absolute;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(170,130,255,.28) 0%,transparent 70%);
  bottom:-30px;left:-30px;pointer-events:none;
}
 
.about-label{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;color:rgba(255,255,255,.9);
  margin-bottom:14px;z-index:2;
  opacity:0;transform:translateY(10px);
  animation:fadeUp .55s ease .5s forwards;
}
 
/* Avatar */
.avatar-ring{
  width:clamp(130px,50%,162px);aspect-ratio:1;border-radius:50%;
  border:3px solid rgba(255,255,255,.4);
  box-shadow:0 0 0 10px rgba(255,255,255,.11);
  align-self:center;overflow:hidden;position:relative;z-index:2;
  opacity:0;transform:scale(.75);
  animation:popIn .7s cubic-bezier(.34,1.56,.64,1) .62s forwards;
}
@keyframes popIn{to{opacity:1;transform:scale(1)}}
.avatar-ring img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:grayscale(100%) contrast(1.08);display:block;
  transition:filter .4s;
}
.avatar-ring:hover img{filter:grayscale(0%) contrast(1)}
 
/* Name */
.name-block{
  margin-top:14px;z-index:2;
  opacity:0;transform:translateY(12px);
  animation:fadeUp .6s ease .82s forwards;
}
.name-block .hi{font-family:'Syne',sans-serif;font-size:clamp(14px,2vw,18px);font-weight:400;color:rgba(255,255,255,.78);line-height:1}
.name-block .nm{font-family:'Syne',sans-serif;font-size:clamp(28px,3.8vw,42px);font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.5px}
 
/* Footer */
.about-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:14px;z-index:2;
  opacity:0;transform:translateY(12px);
  animation:fadeUp .6s ease 1s forwards;
}
.email-row{
  display:flex;align-items:center;gap:5px;
  font-size:10px;color:rgba(255,255,255,.7);
  border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
 
/* Vinyl */
.vinyl{
  width:52px;height:52px;border-radius:50%;
  background:var(--dark);
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  animation:vinylSpin 14s linear infinite;
}
@keyframes vinylSpin{to{transform:rotate(360deg)}}
.vinyl::before{content:'';position:absolute;inset:7px;border-radius:50%;border:1.5px solid #555}
.vinyl-svg{position:absolute;inset:2px}
.vinyl-dot{width:10px;height:10px;border-radius:50%;background:#fff;z-index:2}
 
@keyframes fadeUp{to{opacity:1;transform:none}}
 
/* ── RIGHT COLUMN ── */
.right-col{display:flex;flex-direction:column;gap:14px;min-width:0}
 
.heading-row{
  display:flex;align-items:flex-end;gap:4px;
  opacity:0;transform:translateY(12px);
  animation:fadeUp .65s ease .38s forwards;
}
.heading-row h1{
  font-family:'Syne',sans-serif;
  font-size:clamp(46px,7vw,80px);font-weight:800;
  color:var(--dark);letter-spacing:-2px;line-height:1;
}
.bracket{
  width:clamp(16px,2vw,22px);height:clamp(16px,2vw,22px);
  border-top:4px solid var(--dark);border-right:4px solid var(--dark);
  margin-bottom:clamp(28px,4vw,48px);flex-shrink:0;
}
 
/* Bottom grid */
.bottom-grid{
  display:grid;
  grid-template-columns:1fr clamp(95px,11%,116px);
  gap:14px;flex:1;
}
 
/* Feature image */
.feature-wrap{
  border-radius:var(--r);overflow:hidden;
  position:relative;height:clamp(175px,22vw,228px);
  opacity:0;transform:translateY(14px);
  animation:fadeUp .7s ease .65s forwards;
}
.feature-wrap img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s ease;
}
.feature-wrap:hover img{transform:scale(1.05)}
.play-btn{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:3;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .2s,background .2s,box-shadow .2s;
}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.13);background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.play-btn svg{margin-left:3px}
 
/* Small cards */
.small-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  opacity:0;transform:translateY(14px);
  animation:fadeUp .7s ease .82s forwards;
}
 
.mini-card{
  border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:16px 10px;position:relative;overflow:hidden;
  cursor:pointer;transition:transform .25s,box-shadow .25s;
}
.mini-card:hover{transform:translateY(-4px)}
 
.clients-card{background:#454545}
.clients-card span{color:rgba(255,255,255,.8);font-size:12px;font-weight:500}
.clients-card:hover{box-shadow:0 14px 32px rgba(0,0,0,.28)}
 
.orb-card{background:#111}
.orb-card:hover{box-shadow:0 14px 32px rgba(124,111,247,.35)}
.orb{
  width:clamp(52px,7vw,72px);height:clamp(52px,7vw,72px);border-radius:50%;
  background:conic-gradient(from 0deg,#7C6FF7,#5DC5B8,#F5B731,#F07070,#A78BFA,#7C6FF7);
  animation:orbSpin 5s linear infinite;
  box-shadow:0 0 32px rgba(124,111,247,.5),0 0 64px rgba(93,197,184,.2);
}
@keyframes orbSpin{to{transform:rotate(360deg)}}
 
.awards-card{background:var(--yellow);align-items:flex-start;justify-content:flex-end;padding:14px}
.awards-card:hover{box-shadow:0 14px 32px rgba(245,183,49,.42)}
.awards-card .num{font-family:'Syne',sans-serif;font-size:clamp(26px,3.5vw,38px);font-weight:800;color:var(--dark);line-height:1}
.awards-card .lbl{font-size:11.5px;font-weight:500;color:rgba(0,0,0,.7);line-height:1.3}
 
/* Shimmer sweep on hover */
.mini-card::after,.stat-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.1) 50%,transparent 100%);
  transform:translateX(-120%);
  transition:transform .55s ease;pointer-events:none;
}
.mini-card:hover::after,.stat-card:hover::after{transform:translateX(120%)}
 
/* Stat cards */
.stats-col{
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(14px);
  animation:fadeUp .7s ease .72s forwards;
}
.stat-card{
  flex:1;border-radius:var(--r);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:12px 14px;position:relative;overflow:hidden;
  cursor:pointer;transition:transform .25s,filter .25s;
}
.stat-card:hover{transform:scale(1.04) translateY(-2px)}
.stat-card.teal{background:var(--teal)}
.stat-card.violet{background:var(--violet)}
.stat-card .num{font-family:'Syne',sans-serif;font-size:clamp(32px,4vw,46px);font-weight:800;color:#fff;line-height:1}
.stat-card .lbl{font-size:12px;color:rgba(255,255,255,.85)}
 
/* Corner accent mark */
.ca{
  position:absolute;top:10px;right:10px;
  width:9px;height:9px;
  border-top:2px solid rgba(255,255,255,.45);
  border-right:2px solid rgba(255,255,255,.45);
}
.ca.dk{border-top-color:rgba(0,0,0,.22);border-right-color:rgba(0,0,0,.22)}
 
/* ── RESPONSIVE ── */
 
@media(max-width:860px){
  .wrapper{padding:18px 18px 18px 0}
  .main{grid-template-columns:1fr;gap:14px}
  .about-card{
    flex-direction:row;align-items:center;gap:16px;
    clip-path:polygon(26px 0%,100% 0%,100% 100%,0% 100%,0% 26px);
  }
  .about-card::before{width:36px;height:36px}
  .avatar-ring{width:96px;height:96px;flex-shrink:0;align-self:auto}
  .name-block{margin-top:0}
  .about-footer{margin-top:10px;padding-top:10px}
}
 
@media(max-width:600px){
  body{padding:14px 10px}
  .wrapper{flex-direction:column;padding:14px;border-radius:20px}
  .sidebar{flex-direction:row;justify-content:center;padding:8px 0 2px;min-width:unset}
  .sidebar a{writing-mode:horizontal-tb;transform:none;font-size:10px}
  .main{padding:0;gap:12px}
  .about-card{flex-direction:column;align-items:flex-start}
  .avatar-ring{width:120px;height:120px;align-self:center}
  .bottom-grid{grid-template-columns:1fr}
  .stats-col{flex-direction:row}
  .stat-card{padding:10px 12px}
  .feature-wrap{height:200px}
  .heading-row h1{font-size:clamp(36px,10vw,52px)}
}
 
@media(max-width:390px){
  .small-cards{grid-template-columns:1fr 1fr}
  .awards-card{grid-column:span 2;flex-direction:row;align-items:center;gap:10px;padding:12px 14px}
  .awards-card .num{font-size:28px}
  .email-row span{display:none}
}

/* ── Count-up animation ── */
function animateCount(el){
  const target=+el.dataset.target,dur=1500,start=performance.now();
  (function tick(now){
    const p=Math.min((now-start)/dur,1),e=1-Math.pow(1-p,3);
    el.textContent=Math.floor(e*target);
    p<1?requestAnimationFrame(tick):el.textContent=target;
  })(start);
}
new IntersectionObserver((entries)=>{
  entries.forEach(e=>{
    if(e.isIntersecting){
      e.target.querySelectorAll('.count').forEach(animateCount);
    }
  });
},{threshold:.3}).observe(document.querySelector('.bottom-grid'));
 
/* ── Tilt on hover (desktop) ── */
if(window.matchMedia('(hover:hover)').matches){
  document.querySelectorAll('.stat-card,.mini-card,.about-card').forEach(card=>{
    card.addEventListener('mousemove',ev=>{
      const r=card.getBoundingClientRect();
      const x=((ev.clientX-r.left)/r.width-.5)*12;
      const y=((ev.clientY-r.top)/r.height-.5)*-12;
      card.style.transform=`perspective(700px) rotateY(${x}deg) rotateX(${y}deg) translateY(-3px)`;
    });
    card.addEventListener('mouseleave',()=>card.style.transform='');
  });
}

section numbers

HTML

@idsachinkumar06762

<section class="ai-tech-section">

<div class="ai-tech-wrap">

<div class="ai-tech-heading">
<h2>AI Powered Platform</h2>
<p>Building the future with intelligent automation, scalable systems and cutting-edge technology.</p>
</div>

<div class="ai-tech-grid">

<div class="ai-tech-card">
<h3 class="ai-counter" data-target="1200">0</h3>
<span>AI Models Trained</span>
</div>

<div class="ai-tech-card">
<h3 class="ai-counter" data-target="35000">0</h3>
<span>Automation Tasks</span>
</div>

<div class="ai-tech-card">
<h3 class="ai-counter" data-target="98">0</h3>
<span>Accuracy Rate %</span>
</div>

<div class="ai-tech-card">
<h3 class="ai-counter" data-target="120">0</h3>
<span>Countries Using AI</span>
</div>

</div>

</div>

<div class="ai-particles"></div>

</section>

.ai-tech-section{
position:relative;
padding:120px 6%;
background:radial-gradient(circle at top,#0b0120,#020010);
color:white;
overflow:hidden;
}

.ai-tech-wrap{
max-width:1200px;
margin:auto;
position:relative;
z-index:2;
}

.ai-tech-heading{
text-align:center;
margin-bottom:80px;
}

.ai-tech-heading h2{
font-size:42px;
margin-bottom:15px;
background:linear-gradient(90deg,#7c3aed,#c084fc);
-webkit-background-clip:text;
color:transparent;
}

.ai-tech-heading p{
color:#cbd5f5;
font-size:16px;
}

.ai-tech-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
}

.ai-tech-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
padding:40px;
text-align:center;
transition:all .4s ease;
backdrop-filter:blur(10px);
position:relative;
}

.ai-tech-card::before{
content:"";
position:absolute;
inset:0;
border-radius:18px;
background:linear-gradient(120deg,transparent,#7c3aed,transparent);
opacity:0;
transition:.4s;
}

.ai-tech-card:hover::before{
opacity:.3;
}

.ai-tech-card:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 20px 60px rgba(124,58,237,.5);
}

.ai-counter{
font-size:44px;
font-weight:700;
color:#a78bfa;
margin-bottom:10px;
}

.ai-tech-card span{
color:#94a3b8;
font-size:14px;
}

const aiCounters = document.querySelectorAll(".ai-counter");

const aiObserver = new IntersectionObserver(entries => {

entries.forEach(entry => {

if(entry.isIntersecting){

const counter = entry.target;
const target = +counter.dataset.target;
let count = 0;

const update = () => {

const speed = target / 120;

count += speed;

if(count < target){
counter.innerText = Math.floor(count);
requestAnimationFrame(update);
}
else{
counter.innerText = target;
}

};

update();

aiObserver.unobserve(counter);

}

});

});

aiCounters.forEach(counter => aiObserver.observe(counter));

About Us

HTML

@idsachinkumar06762

<section class="ub-about">

  <div class="ub-about-wrap">

    <div class="ub-about-left">
      <h2>About Our Platform</h2>
      <p>
        We create modern UI components and templates designed for developers
        who want beautiful interfaces without wasting time on repetitive work.
        Our mission is to simplify front-end development with powerful,
        reusable UI solutions.
      </p>
    </div>

    <div class="ub-about-stats">

      <div class="ub-stat">
        <h3 class="ub-counter" data-target="1200">0</h3>
        <span>Components</span>
      </div>

      <div class="ub-stat">
        <h3 class="ub-counter" data-target="3500">0</h3>
        <span>Developers</span>
      </div>

      <div class="ub-stat">
        <h3 class="ub-counter" data-target="85">0</h3>
        <span>Templates</span>
      </div>

      <div class="ub-stat">
        <h3 class="ub-counter" data-target="24">0</h3>
        <span>Countries</span>
      </div>

    </div>

  </div>

</section>

.ub-about{
  padding:120px 6%;
  background:linear-gradient(135deg,#020617,#0f172a);
  color:white;
}

.ub-about-wrap{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:80px;
  align-items:center;
  flex-wrap:wrap;
}

.ub-about-left{
  flex:1;
}

.ub-about-left h2{
  font-size:40px;
  margin-bottom:20px;
}

.ub-about-left p{
  font-size:17px;
  line-height:1.7;
  color:#cbd5f5;
}

.ub-about-stats{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

.ub-stat{
  text-align:center;
  padding:30px;
  background:rgba(255,255,255,0.05);
  border-radius:18px;
  backdrop-filter:blur(8px);
  transition:transform .4s;
}

.ub-stat:hover{
  transform:translateY(-10px);
}

.ub-counter{
  font-size:42px;
  margin-bottom:10px;
  color:#38bdf8;
}

.ub-stat span{
  color:#94a3b8;
  font-size:14px;
}

const counters = document.querySelectorAll(".ub-counter");

const runCounter = (counter) => {

  const target = +counter.dataset.target;
  let count = 0;

  const speed = target / 120;

  const update = () => {

    count += speed;

    if(count < target){
      counter.innerText = Math.floor(count);
      requestAnimationFrame(update);
    } else {
      counter.innerText = target;
    }

  };

  update();

};

const observer = new IntersectionObserver(entries => {

  entries.forEach(entry => {

    if(entry.isIntersecting){
      runCounter(entry.target);
      observer.unobserve(entry.target);
    }

  });

});

counters.forEach(counter => observer.observe(counter));

Testimonials

HTML

@idsachinkumar06762

<section class="ub-testimonials">
  <div class="ub-testimonials-wrapper">

    <div class="ub-testimonial-card">
      <div class="ub-testimonial-avatar">
        <img src="https://i.pravatar.cc/100?img=12">
      </div>
      <p class="ub-testimonial-text">
        "Amazing UI components. Saved me hours of design work and made my project look premium."
      </p>
      <h4 class="ub-testimonial-name">Sarah Mitchell</h4>
      <span class="ub-testimonial-role">Product Designer</span>
    </div>

    <div class="ub-testimonial-card">
      <div class="ub-testimonial-avatar">
        <img src="https://i.pravatar.cc/100?img=32">
      </div>
      <p class="ub-testimonial-text">
        "The clean code and animations are perfect. I integrated it into my React project easily."
      </p>
      <h4 class="ub-testimonial-name">David Chen</h4>
      <span class="ub-testimonial-role">Frontend Developer</span>
    </div>

    <div class="ub-testimonial-card">
      <div class="ub-testimonial-avatar">
        <img src="https://i.pravatar.cc/100?img=45">
      </div>
      <p class="ub-testimonial-text">
        "UIBlitz components helped us ship our product faster with beautiful UI."
      </p>
      <h4 class="ub-testimonial-name">Emily Rodriguez</h4>
      <span class="ub-testimonial-role">Startup Founder</span>
    </div>

  </div>
</section>

.ub-testimonials{
  padding:80px 20px;
  background:linear-gradient(135deg,#0f172a,#1e293b);
}

.ub-testimonials-wrapper{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.ub-testimonial-card{
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:30px;
  text-align:center;
  color:white;
  transform:translateY(40px);
  opacity:0;
  animation:ubFadeUp 0.8s ease forwards;
  transition:all .35s ease;
}

.ub-testimonial-card:nth-child(2){
  animation-delay:.2s;
}

.ub-testimonial-card:nth-child(3){
  animation-delay:.4s;
}

.ub-testimonial-card:hover{
  transform:translateY(-10px) scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,0.3);
}

.ub-testimonial-avatar{
  width:70px;
  height:70px;
  margin:auto;
  margin-bottom:20px;
  border-radius:50%;
  overflow:hidden;
}

.ub-testimonial-avatar img{
  width:100%;
  transition:transform .4s;
}

.ub-testimonial-card:hover img{
  transform:scale(1.15);
}

.ub-testimonial-text{
  font-size:15px;
  line-height:1.6;
  margin-bottom:20px;
  color:#e2e8f0;
}

.ub-testimonial-name{
  font-size:17px;
  margin-bottom:4px;
}

.ub-testimonial-role{
  font-size:13px;
  color:#94a3b8;
}

@keyframes ubFadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

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;
      }
    }