Skip to content

Instantly share code, notes, and snippets.

@pbnkp

pbnkp/index.html

Created February 17, 2026 20:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pbnkp/1f3ee21e56ebc540b3efc9ffe31d87b5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pbnkp/1f3ee21e56ebc540b3efc9ffe31d87b5 to your computer and use it in GitHub Desktop.
Download ZIP
No-JS Carousel, Shoe store
Raw
index.html
<div class="mobile-frame">
<!-- Notch -->
<div class="notch">
<div class="notch-camera"></div>
</div>
<div class="status-bar-spacer"></div>
<!-- Header -->
<div class="header">
<button class="icon-btn">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
</button>
<div class="brand-text">Nike Store</div>
<button class="icon-btn relative">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
<div class="badge-dot"></div>
</button>
</div>
<!-- Hero -->
<div class="hero-section">
<h1 class="hero-title">
Discover <br/>
<span class="gradient-text">New Styles</span>
</h1>
</div>
<!-- Carousel -->
<div class="carousel-wrapper">
<div class="carousel-track">
<!-- Product 1 -->
<div class="product-card group">
<input type="checkbox" id="product-1" class="hidden flip-checkbox">
<div class="flip-card-inner">
<div class="card-face card-front">
<label for="product-1" class="front-trigger"></label>
<div class="image-area">
<div class="image-overlay"></div>
<div class="brand-tag">Nike</div>
<button class="heart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
</button>
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=1000" class="product-img" alt="Lumina X1">
</div>
<div class="front-content">
<div>
<div class="flex justify-between items-center" style="margin-bottom: 4px;">
<div>
<h3 style="font-size: 20px; font-weight: 700;">Lumina X1</h3>
<p style="font-size: 12px; color: #9ca3af; text-transform: uppercase; margin-top: 4px; font-weight: 500;">Pro Running</p>
</div>
<div class="flex items-center" style="gap: 4px; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 8px;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#facc15" stroke="#facc15" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<span style="font-size: 12px; font-weight: 700;">4.8</span>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<span style="font-size: 24px; font-weight: 700;">$189.00</span>
<div style="width: 40px; height: 40px; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(255,255,255,0.2);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</div>
<div class="glow-bar" style="background-color: #ef4444;"></div>
</div>
</div>
<div class="card-face card-back">
<div class="flex justify-between items-center" style="margin-bottom: 16px;">
<span style="font-size: 14px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em;">Details</span>
<label for="product-1" class="close-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</label>
</div>
<h3 class="details-title">Lumina X1</h3>
<p class="details-desc">Engineered for marathon distances with our proprietary energy-return foam.</p>
<div>
<span style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Select Size (US)</span>
<div class="size-grid">
<div class="size-option"><input type="radio" name="size-p1" id="p1-s7" class="hidden size-radio"><label for="p1-s7" class="size-label">7</label></div>
<div class="size-option"><input type="radio" name="size-p1" id="p1-s8" class="hidden size-radio"><label for="p1-s8" class="size-label">8</label></div>
<div class="size-option"><input type="radio" name="size-p1" id="p1-s9" class="hidden size-radio"><label for="p1-s9" class="size-label">9</label></div>
<div class="size-option"><input type="radio" name="size-p1" id="p1-s10" class="hidden size-radio"><label for="p1-s10" class="size-label">10</label></div>
<div class="size-option"><input type="radio" name="size-p1" id="p1-s11" class="hidden size-radio"><label for="p1-s11" class="size-label">11</label></div>
</div>
</div>
<div class="cart-container">
<button class="cart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
<span class="cart-btn-text-select">Select Size</span>
<span class="cart-btn-text-add">Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card group">
<input type="checkbox" id="product-2" class="hidden flip-checkbox">
<div class="flip-card-inner">
<div class="card-face card-front">
<label for="product-2" class="front-trigger"></label>
<div class="image-area">
<div class="image-overlay"></div>
<div class="brand-tag">Nike</div>
<button class="heart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
</button>
<img src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?auto=format&fit=crop&q=80&w=1000" class="product-img" alt="Air Flow Pro">
</div>
<div class="front-content">
<div>
<div class="flex justify-between items-center" style="margin-bottom: 4px;">
<div>
<h3 style="font-size: 20px; font-weight: 700;">Air Flow Pro</h3>
<p style="font-size: 12px; color: #9ca3af; text-transform: uppercase; margin-top: 4px; font-weight: 500;">Urban Comfort</p>
</div>
<div class="flex items-center" style="gap: 4px; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 8px;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#facc15" stroke="#facc15" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<span style="font-size: 12px; font-weight: 700;">4.6</span>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<span style="font-size: 24px; font-weight: 700;">$145.00</span>
<div style="width: 40px; height: 40px; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(255,255,255,0.2);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</div>
<div class="glow-bar" style="background-color: #22c55e;"></div>
</div>
</div>
<div class="card-face card-back">
<div class="flex justify-between items-center" style="margin-bottom: 16px;">
<span style="font-size: 14px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em;">Details</span>
<label for="product-2" class="close-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</label>
</div>
<h3 class="details-title">Air Flow Pro</h3>
<p class="details-desc">Breathable mesh construction meets urban style. Perfect for the daily commute.</p>
<div>
<span style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Select Size (US)</span>
<div class="size-grid">
<div class="size-option"><input type="radio" name="size-p2" id="p2-s8" class="hidden size-radio"><label for="p2-s8" class="size-label">8</label></div>
<div class="size-option"><input type="radio" name="size-p2" id="p2-s9" class="hidden size-radio"><label for="p2-s9" class="size-label">9</label></div>
<div class="size-option"><input type="radio" name="size-p2" id="p2-s10" class="hidden size-radio"><label for="p2-s10" class="size-label">10</label></div>
<div class="size-option"><input type="radio" name="size-p2" id="p2-s11" class="hidden size-radio"><label for="p2-s11" class="size-label">11</label></div>
<div class="size-option"><input type="radio" name="size-p2" id="p2-s12" class="hidden size-radio"><label for="p2-s12" class="size-label">12</label></div>
</div>
</div>
<div class="cart-container">
<button class="cart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
<span class="cart-btn-text-select">Select Size</span>
<span class="cart-btn-text-add">Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card group">
<input type="checkbox" id="product-3" class="hidden flip-checkbox">
<div class="flip-card-inner">
<div class="card-face card-front">
<label for="product-3" class="front-trigger"></label>
<div class="image-area">
<div class="image-overlay"></div>
<div class="brand-tag">Nike</div>
<button class="heart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
</button>
<img src="https://images.unsplash.com/photo-1515955656352-a1fa3ffcd111?auto=format&fit=crop&q=80&w=1000" class="product-img" alt="Court Vision">
</div>
<div class="front-content">
<div>
<div class="flex justify-between items-center" style="margin-bottom: 4px;">
<div>
<h3 style="font-size: 20px; font-weight: 700;">Court Vision</h3>
<p style="font-size: 12px; color: #9ca3af; text-transform: uppercase; margin-top: 4px; font-weight: 500;">Basketball</p>
</div>
<div class="flex items-center" style="gap: 4px; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 8px;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#facc15" stroke="#facc15" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<span style="font-size: 12px; font-weight: 700;">4.9</span>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<span style="font-size: 24px; font-weight: 700;">$210.00</span>
<div style="width: 40px; height: 40px; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(255,255,255,0.2);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</div>
<div class="glow-bar" style="background-color: #3b82f6;"></div>
</div>
</div>
<div class="card-face card-back">
<div class="flex justify-between items-center" style="margin-bottom: 16px;">
<span style="font-size: 14px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em;">Details</span>
<label for="product-3" class="close-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</label>
</div>
<h3 class="details-title">Court Vision</h3>
<p class="details-desc">Maximum ankle support and grip for the hardwood. Dominate the court.</p>
<div>
<span style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Select Size (US)</span>
<div class="size-grid">
<div class="size-option"><input type="radio" name="size-p3" id="p3-s9" class="hidden size-radio"><label for="p3-s9" class="size-label">9</label></div>
<div class="size-option"><input type="radio" name="size-p3" id="p3-s10" class="hidden size-radio"><label for="p3-s10" class="size-label">10</label></div>
<div class="size-option"><input type="radio" name="size-p3" id="p3-s11" class="hidden size-radio"><label for="p3-s11" class="size-label">11</label></div>
<div class="size-option"><input type="radio" name="size-p3" id="p3-s12" class="hidden size-radio"><label for="p3-s12" class="size-label">12</label></div>
<div class="size-option"><input type="radio" name="size-p3" id="p3-s13" class="hidden size-radio"><label for="p3-s13" class="size-label">13</label></div>
</div>
</div>
<div class="cart-container">
<button class="cart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
<span class="cart-btn-text-select">Select Size</span>
<span class="cart-btn-text-add">Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card group">
<input type="checkbox" id="product-4" class="hidden flip-checkbox">
<div class="flip-card-inner">
<div class="card-face card-front">
<label for="product-4" class="front-trigger"></label>
<div class="image-area">
<div class="image-overlay"></div>
<div class="brand-tag">Nike</div>
<button class="heart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
</button>
<img src="https://images.unsplash.com/photo-1608231387042-66d1773070a5?auto=format&fit=crop&q=80&w=1000" class="product-img" alt="Zenith Trek">
</div>
<div class="front-content">
<div>
<div class="flex justify-between items-center" style="margin-bottom: 4px;">
<div>
<h3 style="font-size: 20px; font-weight: 700;">Zenith Trek</h3>
<p style="font-size: 12px; color: #9ca3af; text-transform: uppercase; margin-top: 4px; font-weight: 500;">Trail Hiking</p>
</div>
<div class="flex items-center" style="gap: 4px; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 8px;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#facc15" stroke="#facc15" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<span style="font-size: 12px; font-weight: 700;">4.7</span>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<span style="font-size: 24px; font-weight: 700;">$175.00</span>
<div style="width: 40px; height: 40px; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(255,255,255,0.2);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</div>
<div class="glow-bar" style="background-color: #f97316;"></div>
</div>
</div>
<div class="card-face card-back">
<div class="flex justify-between items-center" style="margin-bottom: 16px;">
<span style="font-size: 14px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em;">Details</span>
<label for="product-4" class="close-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</label>
</div>
<h3 class="details-title">Zenith Trek</h3>
<p class="details-desc">Waterproof, rugged, and ready for any terrain. Adventure awaits.</p>
<div>
<span style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Select Size (US)</span>
<div class="size-grid">
<div class="size-option"><input type="radio" name="size-p4" id="p4-s7" class="hidden size-radio"><label for="p4-s7" class="size-label">7</label></div>
<div class="size-option"><input type="radio" name="size-p4" id="p4-s8" class="hidden size-radio"><label for="p4-s8" class="size-label">8</label></div>
<div class="size-option"><input type="radio" name="size-p4" id="p4-s9" class="hidden size-radio"><label for="p4-s9" class="size-label">9</label></div>
<div class="size-option"><input type="radio" name="size-p4" id="p4-s10" class="hidden size-radio"><label for="p4-s10" class="size-label">10</label></div>
</div>
</div>
<div class="cart-container">
<button class="cart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
<span class="cart-btn-text-select">Select Size</span>
<span class="cart-btn-text-add">Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
<!-- Product 5 -->
<div class="product-card group">
<input type="checkbox" id="product-5" class="hidden flip-checkbox">
<div class="flip-card-inner">
<div class="card-face card-front">
<label for="product-5" class="front-trigger"></label>
<div class="image-area">
<div class="image-overlay"></div>
<div class="brand-tag">Nike</div>
<button class="heart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
</button>
<img src="https://images.unsplash.com/photo-1539185441755-769473a23570?auto=format&fit=crop&q=80&w=1000" class="product-img" alt="Shadow Run">
</div>
<div class="front-content">
<div>
<div class="flex justify-between items-center" style="margin-bottom: 4px;">
<div>
<h3 style="font-size: 20px; font-weight: 700;">Shadow Run</h3>
<p style="font-size: 12px; color: #9ca3af; text-transform: uppercase; margin-top: 4px; font-weight: 500;">Night Series</p>
</div>
<div class="flex items-center" style="gap: 4px; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 8px;">
<svg width="12" height="12" viewBox="0 0 24 24" fill="#facc15" stroke="#facc15" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
<span style="font-size: 12px; font-weight: 700;">4.5</span>
</div>
</div>
</div>
<div class="flex justify-between items-center">
<span style="font-size: 24px; font-weight: 700;">$159.00</span>
<div style="width: 40px; height: 40px; border-radius: 50%; background: white; color: black; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(255,255,255,0.2);">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</div>
</div>
<div class="glow-bar" style="background-color: #1f2937;"></div>
</div>
</div>
<div class="card-face card-back">
<div class="flex justify-between items-center" style="margin-bottom: 16px;">
<span style="font-size: 14px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.1em;">Details</span>
<label for="product-5" class="close-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</label>
</div>
<h3 class="details-title">Shadow Run</h3>
<p class="details-desc">Reflective accents for night safety without compromising on stealth style.</p>
<div>
<span style="font-size: 12px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 8px;">Select Size (US)</span>
<div class="size-grid">
<div class="size-option"><input type="radio" name="size-p5" id="p5-s8" class="hidden size-radio"><label for="p5-s8" class="size-label">8</label></div>
<div class="size-option"><input type="radio" name="size-p5" id="p5-s9" class="hidden size-radio"><label for="p5-s9" class="size-label">9</label></div>
<div class="size-option"><input type="radio" name="size-p5" id="p5-s10" class="hidden size-radio"><label for="p5-s10" class="size-label">10</label></div>
<div class="size-option"><input type="radio" name="size-p5" id="p5-s11" class="hidden size-radio"><label for="p5-s11" class="size-label">11</label></div>
</div>
</div>
<div class="cart-container">
<button class="cart-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>
<span class="cart-btn-text-select">Select Size</span>
<span class="cart-btn-text-add">Add to Cart</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Nav -->
<div class="bottom-nav">
<button class="nav-item active">
<svg width="22" height="22" viewBox="0 0 24 24" fill="white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
<span class="nav-text">Home</span>
</button>
<button class="nav-item">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
<span class="nav-text">Saved</span>
</button>
<button class="nav-item">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
<span class="nav-text">Alerts</span>
</button>
<button class="nav-item">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<span class="nav-text">Profile</span>
</button>
</div>
<div class="home-indicator"></div>
</div>
Raw
script.js
// Inspo, inspired by: https://x.com/ThominoDesign/status/2010925273064317146
Raw
style.css
/* --- RESET & BASE STYLES --- */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: #111;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
color: white;
}
/* --- UTILITIES --- */
.hidden { display: none; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-col { flex-direction: column; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-full { height: 100%; }
/* --- MOBILE FRAME --- */
.mobile-frame {
width: 390px;
height: 844px;
background-color: black;
border-radius: 50px;
border: 8px solid #1f1f1f;
position: relative;
overflow: hidden;
box-shadow: 0 0 60px -15px rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
}
/* Notch */
.notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 35px;
background-color: #1f1f1f;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
}
.notch-camera {
width: 60px;
height: 16px;
background-color: black;
border-radius: 20px;
}
/* --- HEADER & NAV --- */
.status-bar-spacer { height: 48px; flex-shrink: 0; }
.header {
padding: 8px 24px 16px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 20;
}
.icon-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #1c1c1e;
border: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
}
.brand-text {
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 14px;
}
.badge-dot {
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background-color: #ef4444;
border-radius: 50%;
border: 1px solid #1c1c1e;
}
/* --- HERO TEXT --- */
.hero-section {
padding: 24px 24px;
}
.hero-title {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
}
.gradient-text {
background: linear-gradient(to right, #c084fc, #db2777);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* --- CAROUSEL CONTAINER --- */
.carousel-wrapper {
flex: 1;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.carousel-track {
width: 280px; /* Exact width of one card */
margin: 0 auto;
display: flex;
gap: 0; /* Items abut */
overflow-x: auto;
padding: 32px 0;
scroll-snap-type: x mandatory;
align-items: center;
z-index: 10;
/* Hide Scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
/* --- PRODUCT CARD (3D LOGIC) --- */
.product-card {
position: relative;
width: 280px;
height: 400px;
flex-shrink: 0;
scroll-snap-align: center;
perspective: 1000px;
/* Scroll Driven Animation */
animation: scale-on-scroll linear both;
animation-timeline: view(inline);
}
@keyframes scale-on-scroll {
0% { transform: scale(0.85); opacity: 0.5; filter: blur(2px); }
50% { transform: scale(1); opacity: 1; filter: blur(0px); }
100% { transform: scale(0.85); opacity: 0.5; filter: blur(2px); }
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.7s ease-out;
transform-style: preserve-3d;
}
/* Trigger Logic */
.flip-checkbox:checked + .flip-card-inner {
transform: rotateY(180deg);
}
/* Disable front interaction when flipped */
.flip-checkbox:checked + .flip-card-inner .front-trigger {
pointer-events: none;
}
.card-face {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
border-radius: 30px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
/* FRONT FACE */
.card-front {
background-color: #1c1c1e;
}
.front-trigger {
position: absolute;
inset: 0;
z-index: 30;
cursor: pointer;
}
.image-area {
height: 60%;
width: 100%;
position: relative;
overflow: hidden;
}
.image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, #1c1c1e, transparent, transparent);
z-index: 10;
pointer-events: none;
}
.product-img {
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.brand-tag {
position: absolute;
top: 16px;
left: 16px;
z-index: 20;
padding: 4px 12px;
background-color: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.1);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.heart-btn {
position: absolute;
top: 16px;
right: 16px;
z-index: 40; /* Above trigger */
padding: 8px;
background-color: rgba(0,0,0,0.3);
backdrop-filter: blur(8px);
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.1);
color: white;
cursor: pointer;
transition: color 0.2s;
}
.heart-btn:hover { color: #ef4444; }
.front-content {
height: 40%;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
z-index: 20;
pointer-events: none;
}
.glow-bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
opacity: 0.8;
filter: blur(2px);
}
/* BACK FACE */
.card-back {
background-color: #2c2c2e;
transform: rotateY(180deg);
padding: 24px;
display: flex;
flex-direction: column;
}
.close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 50;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.close-btn:active { transform: scale(0.95); }
.details-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
padding-right: 48px;
}
.details-desc {
font-size: 12px;
color: #9ca3af;
line-height: 1.5;
margin-bottom: 24px;
}
/* Size Selection */
.size-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: 8px;
}
.size-option {
position: relative;
aspect-ratio: 1;
}
.size-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: #9ca3af;
cursor: pointer;
transition: all 0.2s;
}
/* Checked Size State */
.size-radio:checked + .size-label {
background-color: white;
color: black;
border-color: white;
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
/* Cart Button Logic using :has() equivalent logic via sibling combinations within flex */
.cart-container {
margin-top: auto;
padding-top: 16px;
}
.cart-btn {
width: 100%;
padding: 14px;
border-radius: 12px;
font-weight: 700;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s;
border: none;
/* Default Disabled State */
background-color: #3a3a3c;
color: #6b7280;
cursor: not-allowed;
}
.cart-btn-text-add { display: none; }
.cart-btn-text-select { display: inline; }
/* Logic: If any radio in the container is checked, style the button */
/* Since we can't easily do container queries for this specific logic in pure CSS without a specific wrapper structure,
we will use the :has() selector which is now widely supported */
.card-back:has(.size-radio:checked) .cart-btn {
background-color: white;
color: black;
cursor: pointer;
box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1);
}
.card-back:has(.size-radio:checked) .cart-btn:active {
transform: scale(0.95);
}
.card-back:has(.size-radio:checked) .cart-btn-text-add { display: inline; }
.card-back:has(.size-radio:checked) .cart-btn-text-select { display: none; }
/* --- BOTTOM NAV --- */
.bottom-nav {
height: 80px;
background-color: rgba(28, 28, 30, 0.8);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: space-around;
padding-bottom: 8px;
align-items: center;
}
.nav-item {
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
color: #6b7280;
}
.nav-item.active { color: white; }
.nav-text { font-size: 10px; font-weight: 500; }
/* Home Indicator */
.home-indicator {
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 128px;
height: 4px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 999px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment