<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>IME Originals Only</title>
<link rel="preconnect" href="https://fonts.googleapis.com"
/>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700;900&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap"
rel="stylesheet" />
<style>
*, *::before, *::after
{ box-sizing: border-box; margin: 0; padding: 0; }
```
:root {
--bg: #080808;
--surface: #0f0f0f;
--card: #141414;
--border: #1e1e1e;
--accent: #C9A84C;
--accent-light: #E8C96D;
--text: #F0F0F0;
--muted: #666;
--muted2: #444;
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Barlow', sans-serif;
overflow-x: hidden;
}
::-webkit-scrollbar
{ width: 3px; }
::-webkit-scrollbar-track
{ background: var(--bg); }
::-webkit-scrollbar-thumb
{ background: var(--accent); }
/* ── ANNOUNCEMENT ── */
#announce {
background: var(--accent);
color: #000;
text-align: center;
padding: 11px 48px;
font-family: 'Oswald', sans-serif;
font-size: 11px;
letter-spacing: 3px;
font-weight: 700;
position: relative;
}
#announce-close {
position: absolute; right: 16px; top: 50%;
transform: translateY(-50%);
background: none; border: none; cursor: pointer;
font-size: 18px; color: #000;
line-height: 1;
}
/* ── NAV ── */
nav {
background: rgba(8,8,8,0.97);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 200;
backdrop-filter: blur(12px);
}
.nav-inner {
max-width: 1400px; margin: 0 auto;
padding: 0 32px;
display: flex; align-items: center;
justify-content: space-between;
height: 72px;
}
.logo {
display: flex; align-items: center; gap: 14px;
text-decoration: none;
}
.logo-badge {
width: 46px; height: 46px;
background: var(--accent);
display: flex; align-items: center; justify-content: center;
border-radius: 3px;
flex-shrink: 0;
}
.logo-badge span {
font-family: 'Oswald', sans-serif;
font-weight: 900; font-size: 13px;
color: #000; letter-spacing:
-0.5px;
}
.logo-text { line-height:
1; }
.logo-text .l1
{
font-family: 'Oswald', sans-serif;
font-weight: 700; font-size: 17px;
letter-spacing: 3px; color: var(--text);
}
.logo-text .l2
{
font-family: 'Oswald', sans-serif;
font-size: 9px; letter-spacing: 5px;
color: var(--accent); margin-top: 2px;
}
.nav-links {
display: flex; gap: 36px;
list-style: none;
}
.nav-links a {
font-family: 'Oswald', sans-serif;
font-size: 12px; letter-spacing: 2.5px;
color: var(--muted);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--accent); }
.nav-actions { display: flex;
align-items: center; gap: 16px; }
.nav-icon-btn {
background: none; border: none;
color: var(--muted); cursor: pointer;
font-size: 17px; padding: 6px;
transition: color 0.2s;
}
.nav-icon-btn:hover
{ color: var(--accent); }
.cart-btn
{
display: flex; align-items: center; gap: 10px;
background: none;
border: 1px solid var(--border);
color: var(--text);
padding: 9px 20px; border-radius: 2px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-size: 12px; letter-spacing: 2px;
font-weight: 600;
transition: all 0.2s;
}
.cart-btn:hover {
border-color: var(--accent); color: var(--accent); }
.cart-count {
background: var(--accent); color: #000;
border-radius: 50%; width: 20px; height: 20px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 900;
}
/* ── SEARCH BAR ── */
#search-bar {
display: none;
border-top: 1px solid var(--border);
padding: 14px 32px;
background: var(--surface);
}
#search-bar.open {
display: block; }
#search-input {
width: 100%; background: var(--bg);
border: 1px solid var(--border);
color: var(--text); padding: 13px 20px;
font-family: 'Oswald', sans-serif;
font-size: 13px; letter-spacing: 2px;
outline: none; border-radius: 2px;
transition: border-color 0.2s;
}
#search-input:focus { border-color: var(--accent); }
/* ── HERO ── */
.hero {
position: relative;
min-height: 88vh;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
background: linear-gradient(135deg, #080808 0%, #0d0d0d 50%, #100e04 100%);
}
.hero-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(201,168,76,0.04) 1px,
transparent 1px),
linear-gradient(90deg, rgba(201,168,76,0.04)
1px, transparent 1px);
background-size: 60px 60px;
}
.hero-watermark {
position: absolute;
font-family: 'Oswald', sans-serif;
font-weight: 900;
font-size: clamp(60px, 16vw, 200px);
color: rgba(201,168,76,0.035);
letter-spacing: -8px;
white-space: nowrap;
user-select: none;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
}
.hero-line-left {
position: absolute; left: 8%; top: 15%; bottom: 15%;
width: 1px;
background: linear-gradient(transparent,
rgba(201,168,76,0.3),
transparent);
}
.hero-line-right {
position: absolute; right: 8%; top: 15%; bottom: 15%;
width: 1px;
background: linear-gradient(transparent,
rgba(201,168,76,0.3),
transparent);
}
.hero-content {
position: relative; z-index: 1;
text-align: center;
animation: fadeUp 0.9s ease both;
}
.hero-eyebrow {
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: 6px;
color: var(--accent);
margin-bottom: 24px;
font-weight: 500;
}
.hero-title {
font-family: 'Oswald', sans-serif;
font-size: clamp(56px, 11vw, 130px);
font-weight: 900; line-height: 0.88;
letter-spacing: -3px;
text-transform: uppercase;
margin-bottom: 28px;
}
.hero-title .t1 {
color: var(--text); display: block; }
.hero-title .t2 {
color: var(--accent); display: block; }
.hero-title .t3 {
color: var(--text); display: block;
font-size: 0.42em; letter-spacing: 8px;
margin-top: 8px;
}
.hero-sub {
color: var(--muted);
font-size: 15px; max-width: 380px;
margin: 0 auto 40px;
letter-spacing: 0.5px; line-height:
1.7;
}
.hero-actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn-primary
{
background: var(--accent); color: #000;
border: none; padding: 17px 48px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 800; font-size: 13px;
letter-spacing: 3px; border-radius:
2px;
transition: all 0.25s;
text-decoration: none; display: inline-block;
}
.btn-primary:hover {
background: var(--accent-light); transform: translateY(-2px); }
.btn-outline
{
background: transparent; color: var(--text);
border: 1px solid var(--border);
padding: 17px 48px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 600; font-size: 13px;
letter-spacing: 3px; border-radius:
2px;
transition: all 0.25s;
text-decoration: none; display: inline-block;
}
.btn-outline:hover {
border-color: var(--accent); color: var(--accent); }
.hero-fade {
position: absolute; bottom: 0; left: 0; right: 0;
height: 120px;
background: linear-gradient(transparent,
var(--bg));
}
/* ── CATEGORY STRIP ── */
.cat-strip {
background: var(--surface);
border-bottom: 1px solid var(--border);
overflow-x: auto;
scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar
{ display: none; }
.cat-strip-inner {
display: flex;
max-width: 1400px; margin: 0 auto;
}
.strip-item {
padding: 18px 28px;
background: none; border: none;
border-right: 1px solid var(--border);
color: var(--muted); cursor: pointer;
white-space: nowrap;
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: 2.5px;
font-weight: 600;
transition: all 0.2s;
}
.strip-item:hover,
.strip-item.active {
color: var(--accent);
background: rgba(201,168,76,0.05);
}
/* ── SHOP SECTION ── */
.shop {
max-width: 1400px; margin: 0 auto;
padding: 64px 32px;
}
.section-header {
display: flex; justify-content: space-between;
align-items: flex-end; margin-bottom: 40px;
}
.section-eyebrow {
font-family: 'Oswald', sans-serif;
font-size: 10px; letter-spacing: 5px;
color: var(--accent);
margin-bottom: 8px;
}
.section-title {
font-family: 'Oswald', sans-serif;
font-size: 44px; font-weight: 900;
letter-spacing: -1px;
}
.product-count {
font-family: 'Oswald', sans-serif;
font-size: 12px; letter-spacing: 2px;
color: var(--muted);
}
/* ── FILTERS ── */
.filters {
display: flex; gap: 8px;
flex-wrap: wrap; margin-bottom: 40px;
}
.filter-btn
{
padding: 9px 20px;
background: transparent;
border: 1px solid var(--border);
color: var(--muted);
border-radius: 2px; cursor: pointer;
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: 2px;
font-weight: 700;
transition: all 0.2s;
}
.filter-btn:hover {
border-color: var(--accent); color: var(--accent); }
.filter-btn.active {
background: var(--accent);
border-color: var(--accent);
color: #000;
}
/* ── PRODUCT GRID ── */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill,
minmax(270px, 1fr));
gap: 20px;
}
/* ── PRODUCT CARD ── */
.product-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 3px;
overflow: hidden;
transition: all 0.3s ease;
position: relative;
animation: fadeUp 0.5s ease both;
}
.product-card:hover {
border-color: var(--accent);
transform: translateY(-5px);
box-shadow: 0 24px 48px rgba(0,0,0,0.6);
}
.card-tag {
position: absolute; top: 12px; left: 12px;
z-index: 2;
font-family: 'Oswald', sans-serif;
font-size: 9px; font-weight: 800;
letter-spacing: 2px; padding: 4px 10px;
}
.tag-new {
background: #1a1a1a; color: var(--accent);
border: 1px solid var(--accent); }
.tag-best {
background: var(--accent); color: #000; }
.tag-ltd {
background: #6b0000; color: #fff; }
.card-img
{
height: 260px;
display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.card-img-inner
{
width: 110px; height: 110px;
border: 1px solid rgba(201,168,76,0.2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(201,168,76,0.04);
transition: transform 0.4s ease;
}
.product-card:hover
.card-img-inner { transform:
scale(1.08); }
.card-img-inner
span {
font-family: 'Oswald', sans-serif;
font-weight: 900; font-size: 38px;
color: var(--accent); letter-spacing: -2px;
}
.card-img-fade
{
position: absolute; bottom: 0; left: 0; right: 0;
height: 50px;
background: linear-gradient(transparent,
var(--card));
}
.card-body {
padding: 16px; }
.card-cat {
font-family: 'Oswald', sans-serif;
font-size: 10px; letter-spacing: 2.5px;
color: var(--muted); margin-bottom:
5px;
}
.card-name {
font-family: 'Oswald', sans-serif;
font-size: 16px; font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.card-price {
font-family: 'Oswald', sans-serif;
font-size: 20px; font-weight: 800;
color: var(--accent);
margin-bottom: 14px;
}
.card-colors {
display: flex; gap: 5px;
flex-wrap: wrap; margin-bottom: 12px;
}
.color-chip {
font-size: 9px; color: var(--muted);
background: var(--surface);
padding: 3px 8px; border-radius: 1px;
letter-spacing: 1px;
}
.card-sizes {
display: flex; gap: 5px;
flex-wrap: wrap; margin-bottom: 14px;
}
.size-btn
{
font-size: 11px; padding: 5px 10px;
background: transparent; color: var(--muted);
border: 1px solid var(--border);
border-radius: 1px; cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 700; letter-spacing: 1px;
transition: all 0.15s;
}
.size-btn:hover {
border-color: var(--accent); color: var(--accent); }
.size-btn.selected { background: var(--accent); border-color: var(--accent);
color: #000; }
.add-btn
{
width: 100%; padding: 13px;
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: 2px; cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 800; font-size: 12px;
letter-spacing: 2.5px;
transition: all 0.25s;
}
.add-btn:hover {
background: var(--accent); color:
#000; }
.add-btn.added { background:
#0f2e0f; color: #4ade80; border-color:
#4ade80; }
/* ── EMPTY STATE ── */
.empty {
text-align: center; padding: 100px 20px;
color: var(--muted);
grid-column: 1 / -1;
}
.empty-icon {
font-size: 48px; margin-bottom: 16px; }
.empty-text {
font-family: 'Oswald', sans-serif;
font-size: 22px; letter-spacing: 3px;
}
/* ── BANNER ── */
.banner {
background: var(--accent);
padding: 72px 32px; text-align: center;
position: relative; overflow: hidden;
}
.banner-lines {
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
90deg, transparent, transparent 80px,
rgba(0,0,0,0.06) 80px, rgba(0,0,0,0.06) 81px
);
}
.banner-title {
position: relative;
font-family: 'Oswald', sans-serif;
font-size: clamp(32px, 6vw, 72px);
font-weight: 900; color: #000;
letter-spacing: -1px;
margin-bottom: 16px;
line-height: 1;
}
.banner-sub {
position: relative;
color: rgba(0,0,0,0.55);
font-size: 15px; max-width: 420px;
margin: 0 auto 32px; letter-spacing:
0.5px;
}
.btn-dark
{
position: relative;
background: #000; color: var(--accent);
border: none; padding: 17px 52px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 800; font-size: 13px;
letter-spacing: 3px; border-radius:
2px;
transition: all 0.2s;
}
.btn-dark:hover {
transform: translateY(-2px);
}
/* ── NEWSLETTER ── */
.newsletter {
background: var(--surface);
border-top: 1px solid var(--border);
padding: 72px 32px;
}
.newsletter-inner {
max-width: 520px; margin: 0 auto; text-align: center;
}
.newsletter-eyebrow {
font-family: 'Oswald', sans-serif;
font-size: 10px; letter-spacing: 5px;
color: var(--accent);
margin-bottom: 14px;
}
.newsletter-title {
font-family: 'Oswald', sans-serif;
font-size: 36px; font-weight: 900;
margin-bottom: 12px;
}
.newsletter-sub {
color: var(--muted); font-size: 14px;
margin-bottom: 28px; letter-spacing:
0.3px;
}
.email-row {
display: flex; }
.email-input {
flex: 1; background: var(--bg);
border: 1px solid var(--border);
border-right: none; color: var(--text);
padding: 14px 20px;
font-family: 'Oswald', sans-serif;
font-size: 12px; letter-spacing: 2px;
outline: none; border-radius: 2px 0 0 2px;
transition: border-color 0.2s;
}
.email-input:focus {
border-color: var(--accent);
}
.email-btn
{
background: var(--accent); color: #000;
border: none; padding: 14px 28px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 800; font-size: 12px;
letter-spacing: 2px; border-radius:
0 2px 2px 0;
transition: background 0.2s;
}
.email-btn:hover {
background: var(--accent-light); }
/* ── FOOTER ── */
footer {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 56px 32px 24px;
}
.footer-grid {
max-width: 1400px; margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr
1fr;
gap: 48px; margin-bottom: 48px;
}
.footer-brand-desc {
color: var(--muted); font-size: 13px;
line-height: 1.8; margin-top: 16px;
max-width: 240px;
}
.footer-col-title
{
font-family: 'Oswald', sans-serif;
font-size: 11px; letter-spacing: 3px;
color: var(--accent);
margin-bottom: 18px;
font-weight: 700;
}
.footer-link {
display: block; color: var(--muted);
text-decoration: none; font-size: 13px;
margin-bottom: 10px; letter-spacing:
0.3px;
transition: color 0.2s;
}
.footer-link:hover {
color: var(--accent); }
.footer-bottom {
max-width: 1400px; margin: 0 auto;
border-top: 1px solid var(--border);
padding-top: 24px;
display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-copy {
color: var(--muted2); font-size:
11px; letter-spacing: 1px;
}
.social-links {
display: flex; gap: 24px; }
.social-link {
color: var(--muted);
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-size: 10px; letter-spacing: 2.5px;
transition: color 0.2s;
}
.social-link:hover {
color: var(--accent); }
/* ── CART DRAWER ── */
#cart-overlay {
display: none;
position: fixed; inset: 0; z-index:
500;
}
#cart-overlay.open { display: flex; justify-content: flex-end;
}
#cart-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(4px);
}
#cart-drawer {
position: relative;
width: 400px; max-width: 90vw;
background: var(--surface);
height: 100%;
display: flex; flex-direction: column;
border-left: 1px solid var(--border);
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
.cart-header {
padding: 24px; border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center;
}
.cart-title {
font-family: 'Oswald', sans-serif;
font-size: 18px; font-weight: 700;
letter-spacing: 3px;
}
.cart-close {
background: none; border: none;
color: var(--muted); cursor: pointer;
font-size: 26px; line-height: 1;
}
#cart-items { flex: 1; overflow-y:
auto; padding: 16px; }
.cart-empty {
text-align: center; padding: 60px
20px; color: var(--muted);
}
.cart-empty-icon {
font-size: 44px; margin-bottom: 14px; }
.cart-empty-text {
font-family: 'Oswald', sans-serif;
font-size: 16px; letter-spacing: 2px;
}
.cart-item {
display: flex; gap: 12px;
padding: 16px 0; border-bottom: 1px solid var(--border);
}
.cart-item-img
{
width: 68px; height: 68px;
background: #1a1a1a; border-radius:
2px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cart-item-img
span {
font-family: 'Oswald', sans-serif;
font-weight: 900; font-size: 13px; color: var(--accent);
}
.cart-item-info {
flex: 1; }
.cart-item-name {
font-family: 'Oswald', sans-serif;
font-size: 14px; font-weight: 700; margin-bottom: 4px;
}
.cart-item-size {
font-size: 12px; color: var(--muted);
margin-bottom: 5px; }
.cart-item-price {
font-family: 'Oswald', sans-serif;
font-size: 16px; font-weight: 800; color: var(--accent);
}
.cart-item-remove {
background: none; border: none;
color: var(--muted); cursor: pointer;
font-size: 20px; align-self: flex-start;
transition: color 0.2s;
}
.cart-item-remove:hover { color: #ff4444; }
.cart-footer {
padding: 24px; border-top: 1px solid var(--border);
}
.cart-total-row {
display: flex; justify-content: space-between;
align-items: center; margin-bottom: 20px;
}
.cart-total-label {
font-family: 'Oswald', sans-serif;
font-size: 14px; letter-spacing:
2px; color: var(--muted);
}
.cart-total-amount {
font-family: 'Oswald', sans-serif;
font-size: 22px; font-weight: 800; color: var(--accent);
}
.checkout-btn
{
width: 100%; padding: 16px;
background: var(--accent); color: #000;
border: none; border-radius: 2px; cursor: pointer;
font-family: 'Oswald', sans-serif;
font-weight: 800; font-size: 14px;
letter-spacing: 3px; margin-bottom:
12px;
transition: background 0.2s;
}
.checkout-btn:hover {
background: var(--accent-light); }
.cart-note {
text-align: center; font-size: 11px;
color: var(--muted); letter-spacing: 1px;
}
/* ── ANIMATIONS ── */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── MOBILE ── */
@media (max-width:
768px) {
.nav-links { display: none; }
.footer-grid {
grid-template-columns: 1fr 1fr; }
.hero-title {
letter-spacing: -1px; }
.shop { padding:
40px 16px; }
.banner { padding:
48px 20px; }
}
@media (max-width:
480px) {
.footer-grid {
grid-template-columns: 1fr; }
.nav-inner { padding: 0 16px; }
}
```
</style>
</head>
<body>
<!-- ANNOUNCEMENT -->
<div id="announce">
🔥 FREE SHIPPING ON ORDERS
OVER $125 · NEW DROPS EVERY
FRIDAY · USE CODE
<strong>IME10</strong> FOR 10% OFF
<button id="announce-close" onclick="this.parentElement.style.display='none'">×</button>
</div>
<!-- NAV -->
<nav>
<div class="nav-inner">
<a class="logo" href="#">
<div
class="logo-badge"><span>IOO</span></div>
<div class="logo-text">
<div class="l1">IME ORIGINALS</div>
<div class="l2">ONLY</div>
</div>
</a>
<ul class="nav-links">
<li><a href="#shop">NEW
ARRIVALS</a></li>
<li><a href="#shop">MEN</a></li>
<li><a href="#shop">WOMEN</a></li>
<li><a href="#shop">COLLECTIONS</a></li>
<li><a href="#shop" style="color:var(--accent)">SALE</a></li>
</ul>
<div class="nav-actions">
<button class="nav-icon-btn"
onclick="toggleSearch()" title="Search">🔍</button>
<button class="nav-icon-btn"
title="Account">👤</button>
<button class="cart-btn"
onclick="openCart()">
🛒 CART <span
class="cart-count" id="cart-count" style="display:none">0</span>
</button>
</div>
</div>
<div id="search-bar">
<input id="search-input"
placeholder="SEARCH PRODUCTS..." oninput="filterProducts()"
/>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-grid"></div>
<div class="hero-watermark">IME ORIGINALS
ONLY</div>
<div class="hero-line-left"></div>
<div class="hero-line-right"></div>
<div class="hero-content">
<div class="hero-eyebrow">◆
SS 2025 COLLECTION ◆</div>
<h1 class="hero-title">
<span class="t1">IME</span>
<span class="t2">ORIGINALS</span>
<span class="t3">ONLY</span>
</h1>
<p class="hero-sub">Authentic streetwear
built different. Every piece, every stitch — Original.</p>
<div class="hero-actions">
<a href="#shop"
class="btn-primary">SHOP NOW</a>
<a href="#shop"
class="btn-outline">NEW
ARRIVALS</a>
</div>
</div>
<div class="hero-fade"></div>
</section>
<!-- CATEGORY STRIP -->
<div class="cat-strip">
<div class="cat-strip-inner">
<button class="strip-item active"
onclick="setStrip(this,'All')">🔥
ALL DROPS</button>
<button class="strip-item" onclick="setStrip(this,'Hoodies')">🧥
HOODIES</button>
<button class="strip-item" onclick="setStrip(this,'T-Shirts')">👕
TEES</button>
<button class="strip-item" onclick="setStrip(this,'Jackets')">🏆
JACKETS</button>
<button class="strip-item" onclick="setStrip(this,'Bottoms')">👖
BOTTOMS</button>
<button class="strip-item" onclick="setStrip(this,'Sets')">💎
SETS</button>
<button class="strip-item" onclick="setStrip(this,'Accessories')">🧢
ACCESSORIES</button>
</div>
</div>
<!-- SHOP -->
<section class="shop" id="shop">
<div class="section-header">
<div>
<div class="section-eyebrow">◆
THE COLLECTION</div>
<h2 class="section-title">SHOP
ALL</h2>
</div>
<div class="product-count"
id="product-count">8 PRODUCTS</div>
</div>
<div class="filters" id="filters">
<button class="filter-btn
active" onclick="setFilter(this,'All')">ALL</button>
<button class="filter-btn"
onclick="setFilter(this,'Hoodies')">HOODIES</button>
<button class="filter-btn"
onclick="setFilter(this,'T-Shirts')">T-SHIRTS</button>
<button class="filter-btn"
onclick="setFilter(this,'Jackets')">JACKETS</button>
<button class="filter-btn"
onclick="setFilter(this,'Sets')">SETS</button>
<button class="filter-btn"
onclick="setFilter(this,'Bottoms')">BOTTOMS</button>
<button class="filter-btn"
onclick="setFilter(this,'Sweatshirts')">SWEATSHIRTS</button>
<button class="filter-btn"
onclick="setFilter(this,'Accessories')">ACCESSORIES</button>
</div>
<div class="product-grid"
id="product-grid"></div>
</section>
<!-- BANNER -->
<div class="banner">
<div class="banner-lines"></div>
<h2 class="banner-title">NOT JUST CLOTHES.<br>A STATEMENT.</h2>
<p class="banner-sub">IME Originals Only.
Because authenticity isn't a trend — it's everything.</p>
<button class="btn-dark">OUR
STORY</button>
</div>
<!-- NEWSLETTER -->
<div class="newsletter">
<div class="newsletter-inner">
<div class="newsletter-eyebrow">◆
STAY IN THE KNOW</div>
<h3 class="newsletter-title">JOIN THE
MOVEMENT</h3>
<p class="newsletter-sub">Early access to
drops, exclusive discounts, and IME Originals news.</p>
<div class="email-row">
<input class="email-input"
type="email" placeholder="YOUR EMAIL ADDRESS" />
<button class="email-btn"
onclick="handleEmail(this)">JOIN</button>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="footer-grid">
<div>
<div class="logo">
<div
class="logo-badge"><span>IOO</span></div>
<div class="logo-text">
<div class="l1">IME ORIGINALS</div>
<div class="l2">ONLY</div>
</div>
</div>
<p class="footer-brand-desc">Authentic
streetwear from New York. Original designs, original vision. Built for those
who move different.</p>
</div>
<div>
<div class="footer-col-title">SHOP</div>
<a class="footer-link" href="#shop">New
Arrivals</a>
<a class="footer-link" href="#shop">Men</a>
<a class="footer-link" href="#shop">Women</a>
<a class="footer-link" href="#shop">Collections</a>
<a class="footer-link" href="#shop">Sale</a>
</div>
<div>
<div class="footer-col-title">INFO</div>
<a class="footer-link" href="#">About Us</a>
<a class="footer-link" href="#">Our
Story</a>
<a class="footer-link" href="#">Sustainability</a>
<a class="footer-link" href="#">Careers</a>
</div>
<div>
<div class="footer-col-title">SUPPORT</div>
<a class="footer-link" href="#">FAQ</a>
<a class="footer-link" href="#">Shipping</a>
<a class="footer-link" href="#">Returns</a>
<a class="footer-link" href="#">Size
Guide</a>
<a class="footer-link" href="#">Contact</a>
</div>
</div>
<div class="footer-bottom">
<span class="footer-copy">© 2025 IME
ORIGINALS ONLY · IMEORIGINALSONLY.COM</span>
<div class="social-links">
<a class="social-link"
href="#">INSTAGRAM</a>
<a class="social-link"
href="#">TIKTOK</a>
<a class="social-link"
href="#">TWITTER</a>
</div>
</div>
</footer>
<!-- CART DRAWER -->
<div id="cart-overlay">
<div id="cart-backdrop" onclick="closeCart()"></div>
<div id="cart-drawer">
<div class="cart-header">
<span class="cart-title"
id="cart-title">YOUR CART (0)</span>
<button class="cart-close" onclick="closeCart()">×</button>
</div>
<div id="cart-items">
<div class="cart-empty">
<div class="cart-empty-icon">🛒</div>
<div class="cart-empty-text">YOUR CART IS
EMPTY</div>
</div>
</div>
<div class="cart-footer"
id="cart-footer" style="display:none">
<div class="cart-total-row">
<span
class="cart-total-label">SUBTOTAL</span>
<span class="cart-total-amount"
id="cart-total">$0.00</span>
</div>
<button class="checkout-btn"
onclick="handleCheckout()">CHECKOUT →</button>
<div class="cart-note">FREE SHIPPING ON
ORDERS OVER $125</div>
</div>
</div>
</div>
<script>
const PRODUCTS = [
{ id:1, title:"IME
Classic Hoodie", price:65, category:"Hoodies",
colors:["Black","White","Navy"],
sizes:["S","M","L","XL","XXL"],
tag:"NEW", bg:"linear-gradient(135deg,#141414,#1e1e1e)" },
{ id:2, title:"IME
Originals Tee", price:35, category:"T-Shirts",
colors:["White","Black","Grey"],
sizes:["S","M","L","XL"],
tag:"BESTSELLER", bg:"linear-gradient(135deg,#111,#1a1a1a)" },
{ id:3, title:"IME
Varsity Jacket", price:120, category:"Jackets",
colors:["Black/Gold","Navy/White"],
sizes:["S","M","L","XL"],
tag:"LIMITED", bg:"linear-gradient(135deg,#0f0f0f,#1c1c1c)" },
{ id:4, title:"IME
Jogger Set", price:85, category:"Sets",
colors:["Black","Charcoal"],
sizes:["S","M","L","XL","XXL"],
tag:null, bg:"linear-gradient(135deg,#131313,#1d1d1d)" },
{ id:5, title:"IME
Logo Cap", price:30, category:"Accessories",
colors:["Black","White","Tan"],
sizes:["One Size"], tag:"NEW",
bg:"linear-gradient(135deg,#0f0f0f,#191919)" },
{ id:6, title:"IME
Cargo Pants", price:75, category:"Bottoms",
colors:["Black","Olive","Khaki"],
sizes:["28","30","32","34","36"],
tag:null, bg:"linear-gradient(135deg,#111,#1b1b1b)" },
{ id:7, title:"IME
Crewneck", price:55, category:"Sweatshirts",
colors:["Grey","Black","Cream"],
sizes:["S","M","L","XL"],
tag:"BESTSELLER", bg:"linear-gradient(135deg,#121212,#1e1e1e)" },
{ id:8, title:"IME
Statement Shorts", price:45, category:"Bottoms",
colors:["Black","Navy","Stone"],
sizes:["S","M","L","XL"], tag:null,
bg:"linear-gradient(135deg,#0e0e0e,#1a1a1a)" },
];
let cart = [];
let selectedSizes = {};
let activeFilter = "All";
let searchQuery = "";
function renderProducts() {
const grid = document.getElementById("product-grid");
const filtered = PRODUCTS.filter(p
=>
(activeFilter === "All"
|| p.category === activeFilter) &&
(searchQuery === "" || p.title.toLowerCase().includes(searchQuery.toLowerCase()))
);
document.getElementById("product-count").textContent = filtered.length + " PRODUCTS";
if (filtered.length
=== 0) {
grid.innerHTML
= `<div class="empty"><div class="empty-icon">🔍</div><div
class="empty-text">NO PRODUCTS FOUND</div></div>`;
return;
}
grid.innerHTML
= filtered.map((p, i) => {
const tagClass = p.tag === "LIMITED" ?
"tag-ltd" : p.tag === "BESTSELLER" ?
"tag-best" :
"tag-new";
const selSize = selectedSizes[p.id] || "";
return `
<div class="product-card"
style="animation-delay:${i*0.07}s; --card-bg:${p.bg}">
${p.tag ? `<div class="card-tag ${tagClass}">${p.tag}</div>` : ""}
<div class="card-img"
style="background:${p.bg}">
<div class="card-img-inner"><span>IOO</span></div>
<div class="card-img-fade"></div>
</div>
<div class="card-body">
<div class="card-cat">${p.category.toUpperCase()}</div>
<div class="card-name">${p.title}</div>
<div class="card-price">$${p.price}.00</div>
<div class="card-colors">${p.colors.map(c=>`<span
class="color-chip">${c.toUpperCase()}</span>`).join("")}</div>
<div class="card-sizes">${p.sizes.map(s=>`<button class="size-btn ${selSize===s?'selected':''}"
onclick="selectSize(${p.id},'${s}',this)">${s}</button>`).join("")}</div>
<button class="add-btn"
id="add-btn-${p.id}" onclick="addToCart(${p.id})">ADD TO CART</button>
</div>
</div>`;
}).join("");
}
function selectSize(pid, size, btn) {
selectedSizes[pid]
= size;
btn.closest(".card-sizes").querySelectorAll(".size-btn").forEach(b => b.classList.remove("selected"));
btn.classList.add("selected");
}
function addToCart(pid) {
const p = PRODUCTS.find(x =>
x.id === pid);
const size = selectedSizes[pid];
if (!size) {
alert("Please select a size first!"); return;
}
cart.push({ ...p, size, cartId: Date.now() });
updateCart();
const btn = document.getElementById("add-btn-"
+ pid);
btn.textContent
= "✓ ADDED TO CART";
btn.classList.add("added");
setTimeout(() => { btn.textContent = "ADD TO CART"; btn.classList.remove("added"); }, 1600);
}
function updateCart() {
const count = cart.length;
const total = cart.reduce((s,i) => s + i.price, 0).toFixed(2);
const countEl = document.getElementById("cart-count");
countEl.textContent = count;
countEl.style.display
= count > 0 ? "inline-flex" : "none";
document.getElementById("cart-title").textContent = `YOUR CART
(${count})`;
document.getElementById("cart-total").textContent = "$" + total;
document.getElementById("cart-footer").style.display
= count > 0 ? "block" :
"none";
const itemsEl = document.getElementById("cart-items");
if (count === 0) {
itemsEl.innerHTML = `<div
class="cart-empty"><div class="cart-empty-icon">🛒</div><div
class="cart-empty-text">YOUR CART IS EMPTY</div></div>`;
} else {
itemsEl.innerHTML = cart.map((item,
idx) => `
<div class="cart-item">
<div class="cart-item-img"><span>IOO</span></div>
<div class="cart-item-info">
<div class="cart-item-name">${item.title}</div>
<div class="cart-item-size">Size: ${item.size}</div>
<div class="cart-item-price">$${item.price}.00</div>
</div>
<button class="cart-item-remove" onclick="removeFromCart(${idx})">×</button>
</div>`).join("");
}
}
function removeFromCart(idx) {
cart.splice(idx, 1);
updateCart();
}
function openCart() {
document.getElementById("cart-overlay").classList.add("open");
document.body.style.overflow = "hidden";
}
function closeCart() {
document.getElementById("cart-overlay").classList.remove("open");
document.body.style.overflow = "";
}
function setFilter(btn, cat) {
activeFilter = cat;
document.querySelectorAll(".filter-btn").forEach(b => b.classList.remove("active"));
btn.classList.add("active");
renderProducts();
}
function setStrip(btn, cat) {
activeFilter = cat;
document.querySelectorAll(".strip-item").forEach(b => b.classList.remove("active"));
btn.classList.add("active");
document.querySelectorAll(".filter-btn").forEach(b => {
b.classList.toggle("active",
b.textContent.trim() === cat.toUpperCase()
|| (cat === "All" && b.textContent.trim() === "ALL"));
});
document.getElementById("shop").scrollIntoView({ behavior:
"smooth" });
renderProducts();
}
function toggleSearch() {
const bar = document.getElementById("search-bar");
bar.classList.toggle("open");
if (bar.classList.contains("open"))
document.getElementById("search-input").focus();
else { searchQuery
= ""; renderProducts(); }
}
function filterProducts() {
searchQuery = document.getElementById("search-input").value;
renderProducts();
}
function handleEmail(btn) {
const input = btn.previousElementSibling;
if (!input.value || !input.value.includes("@")) { alert("Please enter a valid email."); return; }
btn.textContent
= "✓ JOINED!";
input.value = "";
setTimeout(() => btn.textContent
= "JOIN", 2000);
}
function handleCheckout() {
window.open("https://imeoriginalsonly.myshopify.com/cart",
"_blank");
}
// Init
renderProducts();
</script>
</body>
</html>