Created
July 8, 2026 15:38
-
-
Save Crestmont21/2dd5ab0e69fa6821e30ae79970e819f8 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>THE ARCHIVE | Private Wardrobe</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;400;600&family=Playfair+Display:ital@0;1&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { --gold: #c5a059; --light-grey: #f8f8f8; --dark: #1a1a1a; } | |
| body { font-family: 'Inter', sans-serif; margin: 0; background: #fff; color: var(--dark); line-height: 1.6; } | |
| /* Header & Navigation */ | |
| header { padding: 40px 20px; text-align: center; border-bottom: 1px solid #eee; position: sticky; top: 0; background: white; z-index: 100; } | |
| h1 { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 400; letter-spacing: 4px; margin: 0; text-transform: uppercase; } | |
| nav { margin-top: 20px; } | |
| nav a { margin: 0 15px; text-decoration: none; color: #888; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s; } | |
| nav a:hover { color: var(--dark); border-bottom: 1px solid var(--dark); } | |
| /* Grid Layout */ | |
| .container { max-width: 1400px; margin: auto; padding: 40px 20px; } | |
| .category-title { font-family: 'Playfair Display', serif; font-style: italic; font-size: 2rem; margin: 60px 0 30px; border-bottom: 1px solid #eee; padding-bottom: 10px; } | |
| .wardrobe-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 40px; | |
| } | |
| /* Item Cards */ | |
| .item-card { transition: 0.4s; position: relative; } | |
| .item-card:hover { transform: translateY(-5px); } | |
| .img-wrap { width: 100%; height: 400px; background: var(--light-grey); overflow: hidden; display: flex; align-items: center; justify-content: center; } | |
| .img-wrap img { max-width: 90%; max-height: 90%; object-fit: contain; mix-blend-mode: multiply; } | |
| .details { padding: 15px 0; text-align: left; } | |
| .brand { font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; display: block; } | |
| .item-name { color: #666; font-size: 0.8rem; display: block; margin-top: 4px; } | |
| .status-tag { position: absolute; top: 10px; right: 10px; background: white; padding: 4px 8px; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; border: 1px solid #eee; } | |
| /* Mobile Optimization */ | |
| @media (max-width: 768px) { | |
| .wardrobe-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } | |
| .img-wrap { height: 250px; } | |
| h1 { font-size: 1.5rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>The Archive</h1> | |
| <nav> | |
| <a href="#outerwear">Outerwear</a> | |
| <a href="#knitwear">Knitwear</a> | |
| <a href="#dresses">Dresses</a> | |
| <a href="#shoes">Shoes</a> | |
| <a href="#accessories">Accessories</a> | |
| </nav> | |
| </header> | |
| <div class="container"> | |
| <!-- OUTERWEAR --> | |
| <h2 id="outerwear" class="category-title">Outerwear & Jackets</h2> | |
| <div class="wardrobe-grid"> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597312157121/1647597312157121_in_xl.jpg" alt="Utzon"></div> | |
| <div class="details"> | |
| <span class="brand">UTZON</span> | |
| <span class="item-name">Cassidy Reversible Shearling Coat</span> | |
| </div> | |
| </div> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597317926410/1647597317926410_in_xl.jpg" alt="Comme Des Garçons"></div> | |
| <div class="details"> | |
| <span class="brand">COMME DES GARÇONS GIRL</span> | |
| <span class="item-name">Club-collar Button Jacket</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- KNITWEAR --> | |
| <h2 id="knitwear" class="category-title">Knitwear</h2> | |
| <div class="wardrobe-grid"> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597283256034/1647597283256034_in_xl.jpg" alt="Khaite"></div> | |
| <div class="details"> | |
| <span class="brand">KHAITE</span> | |
| <span class="item-name">Dianna Striped Cashmere-blend Cardigan</span> | |
| </div> | |
| </div> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597290518296/1647597290518296_in_xl.jpg" alt="Lisa Yang"></div> | |
| <div class="details"> | |
| <span class="brand">LISA YANG</span> | |
| <span class="item-name">Lova Cashmere Sweater</span> | |
| </div> | |
| </div> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597305314972/1647597305314972_in_xl.jpg" alt="Staud"></div> | |
| <div class="details"> | |
| <span class="brand">STAUD</span> | |
| <span class="item-name">Blake Cable-Knit Cardigan</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DRESSES & SKIRTS --> | |
| <h2 id="dresses" class="category-title">Dresses & Skirts</h2> | |
| <div class="wardrobe-grid"> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597302482902/1647597302482902_in_xl.jpg" alt="Reformation"></div> | |
| <div class="details"> | |
| <span class="brand">REFORMATION</span> | |
| <span class="item-name">Juliette Crepe Midi Dress</span> | |
| </div> | |
| </div> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597293738541/1647597293738541_in_xl.jpg" alt="Vince"></div> | |
| <div class="details"> | |
| <span class="brand">VINCE</span> | |
| <span class="item-name">Washed-Satin Midi Skirt</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SHOES --> | |
| <h2 id="shoes" class="category-title">Footwear</h2> | |
| <div class="wardrobe-grid"> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597313673337/1647597313673337_in_xl.jpg" alt="Manolo"></div> | |
| <div class="details"> | |
| <span class="brand">MANOLO BLAHNIK</span> | |
| <span class="item-name">Ganeus Mary-Jane Flats</span> | |
| </div> | |
| </div> | |
| <div class="item-card"> | |
| <div class="img-wrap"><img src="https://cache.net-a-porter.com/content/images/products/1647597310829466/1647597310829466_in_xl.jpg" alt="Jimmy Choo"></div> | |
| <div class="details"> | |
| <span class="brand">JIMMY CHOO</span> | |
| <span class="item-name">Gilbert Leather Pumps</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer style="text-align: center; padding: 80px 0; color: #ccc; font-size: 0.7rem; letter-spacing: 2px;"> | |
| PRIVATE ACCESS ONLY | © 2024 | |
| </footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment