# Prompt: Build a "SANDRO." Streetwear E-Commerce Website

## Project Overview

Build a single-page streetwear fashion e-commerce website called "SANDRO." using pure HTML, CSS, and vanilla JavaScript (no frameworks, no libraries, no build tools). The brand identity is bold, urban streetwear with a black, yellow (#FEC00F), and warm cream (#FCF8EC) color scheme. The site should feel premium, modern, and magazine-like.

---

## Project Structure

shopping-store/
├── index.html
├── css/style.css
├── js/main.js
└── images/
    ├── hero_model.png, experiences_model.png, banner_bg.png
    ├── hoodie_product.png, sweatshirt_product.png, product-3.jpg
    ├── product-four.png, mint_green_tshirt.png, black_denim_jacket.png
    ├── color_block_windbreaker.png, white_minimalist_hoodie.png
    ├── olive_cargo_pants.png, mustard_chunky_sweater.png
    ├── black_bomber_jacket.png, retro_graphic_sweatshirt.png
    ├── product-1.jpg, product-2.jpg, product-4.jpg, product-5.jpg

---

## Design System

Color Palette:
  --bg-color: #fcf8ec | --dark-color: #1a1a1a | --yellow-color: #fec00f
  --yellow-hover: #e0aa0d | --grey-bg: #e2e4e9 | --white: #ffffff

Typography (Google Fonts):
  "Bebas Neue" → headings/logo | "Anton" → hero/display | "Inter" → body/nav

Icons: Remix Icons v4.5.0 via CDN
  https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css

---

## Section 1: Sticky Header

Floating rounded dark navbar — position: fixed, top: 10px, margin: 0 40px, border-radius: 12px
- Logo "SANDRO." (Bebas Neue, 2.5rem, white)
- Nav: Home | New Arrival | Shop | Sale | Accessories
- Right: search icon, yellow cart circle (45px, #fec00f) with count badge, hamburger (mobile)

---

## Section 2: Hero

Two-column flexbox, min-height: 85vh, padding: 100px 40px 0

Left:
- 3 stacked avatar circles + "+2k" yellow circle
- Title (Anton 5.5rem): EXPRESS YOURSELF / TO YOUR FULLEST
  "EXPRESS" → background: #fec00f, padding: 5px 15px, border-radius: 4px
- CTA: "Check it Out ↗" — border: 2px solid #fec00f, fills yellow on hover

Right:
- background: #e2e4e9, border-radius: 30px, height: 80vh
- Hero model image, mix-blend-mode: multiply

Marquee (overlaying hero, bottom: 10%):
- background: #1a1a1a, color: #fec00f, rotate(-3deg), width: 110%, left: -5%
- "* BEST SELLING COLLECTION * BEST BACK PACK * DENIM JACKETS * SUMMER COLLECTION * SLIM FIT JOGGERS *"
- translateX(0) → translateX(-50%), 20s linear infinite

---

## Section 3: New Release Products Grid

CSS Grid — auto-fit, minmax(250px, 1fr), gap: 30px
12 cards each with: grey image wrapper (border-radius: 16px), slide-up ADD TO CART bar on hover

Products:
1. hoodie_product.png — US$49.00 — Vibrant Yellow Streetwear Hoodie [+ 3 color swatches]
2. sweatshirt_product.png — US$89.00 — Stylish Orange Streetwear Jacket [+ 3 color swatches]
3. product-3.jpg — US$89.00 — Maroon Oversized T-Shirt
4. product-four.png — US$89.00 — Beige Cargo Joggers
5. mint_green_tshirt.png — US$35.00 — Mint Green Oversized T-Shirt
6. black_denim_jacket.png — US$75.00 — Black Distressed Denim Jacket
7. color_block_windbreaker.png — US$65.00 — Neon Color-Block Windbreaker
8. white_minimalist_hoodie.png — US$55.00 — White Minimalist Cotton Hoodie
9. olive_cargo_pants.png — US$45.00 — Olive Slim-Fit Cargo Pants
10. mustard_chunky_sweater.png — US$60.00 — Mustard Chunky Knit Sweater
11. black_bomber_jacket.png — US$85.00 — Sleek Black Bomber Jacket
12. retro_graphic_sweatshirt.png — US$50.00 — Retro 90s Graphic Sweatshirt

---

## Section 4: Experiences Section

Two-column flexbox, padding: 80px 0, gap: 50px

Left: Bebas Neue 5rem heading: "NEW KINDS OF GREAT EXPERIENCES." + yellow underline bar

Right (relative):
- experiences_model.png, border-radius: 20px, width: 80%, margin-left: auto
- "EXPLORE MORE" dark circle badge (100px, #1a1a1a bg, #fec00f text, rotate 15deg, top-right)
- Floating white product card (150px, hoodie image, bottom-right)
- Description overlay (semi-transparent cream, width: 300px, left side, vertically centered):
  "We all have a story to tell, born from adventures, new encounters and experiences.
   We inspire to venture locally and open our minds to new ways of interacting with the world."

---

## Section 5: Best Product Collections

Bebas Neue 4rem centered heading:
"STEP UP YOUR STYLE GAME WITH OUR BEST PRODUCT COLLECTIONS"

3-column grid, gap: 20px, margin-top: 60px:

Card 1 (400px, #e2e4e9, border-radius: 20px):
- Full hero model image
- Vertical "ZERO-9" outlined text (rotated -90deg, -webkit-text-stroke: 1px #1a1a1a)
- White pill button "EXPLORE #0079 ↗" at bottom center

Card 2 (same, translateY(-40px)):
- Sweatshirt product image
- Vertical "2021" in yellow (rotated 90deg)

Card 3 (split vertically):
- Top: grey rounded card with product-5.jpg
- Bottom (120px): #1a1a1a bg, 3 avatar circles + 80px yellow "Explore More" badge (Bebas Neue)

---

## Section 6: Hand-in-Hand Banner

Full-width, height: 60vh, centered overlay content
- banner_bg.png, object-fit: cover, brightness(0.6)
- Bebas Neue 6rem white heading: "HAND-IN-HAND / WITH APPAREL / COMPANIES."
- Yellow play circle (80px, #fec00f, ri-play-fill icon), scale(1.1) on hover

---

## Section 7: Instagram Footer

Centered, padding: 80px 20px
Title (Bebas Neue 3rem): "FOLLOW US ON INSTAGRAM @SANDRO" (@SANDRO in #fec00f)

5-image collage (flex row, height: 300px, gap: 10px):
- Images 1,2,4,5: 150px × 200px, border-radius: 12px
  rotate(-5deg) Y(20px) / rotate(5deg) Y(-10px) / rotate(-3deg) Y(10px) / rotate(5deg) Y(-20px)
- Center (product-5.jpg): 250px × 300px, scale(1.1), z-index: 5, Instagram icon centered on top

---

## Slide-in Cart Panel

position: fixed, right: -100% → right: 0 on class "open-cart"
background: #1a1a1a, max-width: 450px, height: 100vh, z-index: 1001
Transition: right 0.5s cubic-bezier(0.8, 0, 0.2, 1)

Header: "YOUR CART" (Anton 2rem, #fec00f) + close button
Items: scrollable list — image (80px), name, price×qty (yellow), +/- buttons, red delete btn
Footer: total (Anton 1.5rem) + full-width yellow checkout button (turns white on hover)

---

## JavaScript

Cart (localStorage persistence):
- addToCart(productCard) — extract .product-name, .product-price, .product-image from DOM
- removeItem(name) | changeQuantity(name, delta) — remove if qty reaches 0
- updateCartDisplay() — re-render list, recalculate total + badge (#cart-count, #total-price)
- updateLocalStorage() — JSON.stringify(cartItems) to localStorage
- window.onload — restore from localStorage

Flying animation on ADD TO CART:
- Clone product image, getBoundingClientRect() for start position
- Transition to cart icon position, 2s cubic-bezier(0.19,1,0.22,1), scale→0.5, opacity→0
- Remove from DOM after 1.2s

onclick on each ADD TO CART bar: addToCart(this.parentElement.parentElement)
Cart toggle: add/remove class "open-cart" on cart panel
Mobile menu: toggle "nav-active" on .main-nav — vertical dropdown, bouncy cubic-bezier entrance

---

## Responsive

Tablet (≤1024px): hero stacks vertically, single-column collections, nav gap 15px
Mobile (≤768px): hamburger menu, hero title 3.5rem, section titles 2.5rem, cart panel 100% width

Page title: "SANDRO. | Express Yourself To Your Fullest"
lang="en" + viewport meta tag | image paths: images/filename.ext