| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Taroo Builders - Agency Design Collection</title> |
|
|
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Libre+Caslon+Text:wght@400;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1" rel="stylesheet" /> |
|
|
| <style> |
| :root { |
| --bg: #f5f1eb; |
| --surface: #ffffff; |
| --primary: #735c00; |
| --primary-light: #d4af37; |
| --primary-dark: #554300; |
| --text: #1a1510; |
| --text-muted: #4d4635; |
| --border: #d0c5af; |
| --radius: 16px; |
| --shadow: 0 20px 45px rgba(115, 92, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.03); |
| --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: var(--bg); |
| color: var(--text); |
| min-height: 100vh; |
| overflow-x: hidden; |
| background-image: |
| radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 50%), |
| radial-gradient(circle at bottom left, rgba(115, 92, 0, 0.08), transparent 50%), |
| repeating-linear-gradient(45deg, transparent, transparent 50px, rgba(115, 92, 0, 0.02) 50px, rgba(115, 92, 0, 0.02) 51px); |
| } |
| |
| .container { |
| width: min(1300px, calc(100% - 48px)); |
| margin: auto; |
| padding: 80px 0; |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 70px; |
| position: relative; |
| } |
| |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| padding: 8px 18px; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.8); |
| border: 1px solid var(--border); |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--primary-dark); |
| margin-bottom: 24px; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| box-shadow: 0 4px 10px rgba(0,0,0,0.02); |
| } |
| |
| .badge span { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--primary); |
| box-shadow: 0 0 8px var(--primary); |
| } |
| |
| h1 { |
| font-family: 'EB Garamond', serif; |
| font-size: clamp(42px, 5.5vw, 68px); |
| font-weight: 600; |
| letter-spacing: -0.02em; |
| line-height: 1.1; |
| margin-bottom: 18px; |
| } |
| |
| h1 em { |
| font-family: 'EB Garamond', serif; |
| font-style: italic; |
| font-weight: 500; |
| color: var(--primary); |
| } |
| |
| .subtitle { |
| max-width: 650px; |
| margin: auto; |
| font-size: 16px; |
| line-height: 1.7; |
| color: var(--text-muted); |
| } |
| |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); |
| gap: 24px; |
| margin-top: 50px; |
| } |
| |
| @media (min-width: 1200px) { |
| .grid { |
| grid-template-columns: repeat(4, 1fr); |
| } |
| } |
| |
| @media (min-width: 900px) and (max-width: 1199px) { |
| .grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| |
| .card { |
| position: relative; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 30px; |
| cursor: pointer; |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| min-height: 270px; |
| transition: var(--transition); |
| box-shadow: var(--shadow); |
| } |
| |
| .card:hover { |
| transform: translateY(-6px); |
| border-color: var(--primary); |
| box-shadow: 0 25px 50px rgba(142, 122, 92, 0.12); |
| } |
| |
| .card-top { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 25px; |
| } |
| |
| .icon-wrapper { |
| width: 54px; |
| height: 54px; |
| border-radius: 16px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 24px; |
| transition: var(--transition); |
| } |
| |
| .arrow-icon { |
| font-size: 20px; |
| color: var(--text-muted); |
| transition: var(--transition); |
| } |
| |
| .card:hover .arrow-icon { |
| color: var(--text); |
| transform: translate(2px, -2px); |
| } |
| |
| .card-body { |
| flex-grow: 1; |
| margin-bottom: 25px; |
| } |
| |
| .site-title { |
| font-family: 'EB Garamond', serif; |
| font-size: 24px; |
| font-weight: 600; |
| margin-bottom: 10px; |
| letter-spacing: -0.01em; |
| } |
| |
| .site-description { |
| font-size: 14px; |
| line-height: 1.6; |
| color: var(--text-muted); |
| } |
| |
| .card-footer { |
| display: flex; |
| align-items: center; |
| } |
| |
| .tag { |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| padding: 6px 14px; |
| border-radius: 999px; |
| background: var(--bg); |
| color: var(--text-muted); |
| transition: var(--transition); |
| } |
| |
| .card:hover .tag { |
| background: var(--primary); |
| color: white; |
| } |
| |
| |
| .card[data-brand="cosmic"] .icon-wrapper { |
| background: linear-gradient(135deg, #ffe088 0%, #e9c349 100%); |
| color: #554300; |
| box-shadow: 0 4px 12px rgba(233, 195, 73, 0.3); |
| } |
| .card[data-brand="cyberpunk"] .icon-wrapper { |
| background: linear-gradient(135deg, #00ff88 0%, #00e479 100%); |
| color: #007139; |
| box-shadow: 0 4px 12px rgba(0, 228, 121, 0.3); |
| } |
| .card[data-brand="editorial"] .icon-wrapper { |
| background: linear-gradient(135deg, #ffffff 0%, #e5e2e1 100%); |
| color: #000000; |
| border: 2px solid #1c1b1b; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| } |
| .card[data-brand="swiss"] .icon-wrapper { |
| background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); |
| color: #1a1a1a; |
| border: 1px solid #333; |
| } |
| .card[data-brand="classic"] .icon-wrapper { |
| background: linear-gradient(135deg, #d4af37 0%, #b8936a 100%); |
| color: #ffffff; |
| box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3); |
| } |
| .card[data-brand="blueprint"] .icon-wrapper { |
| background: linear-gradient(135deg, #0f4c81 0%, #0a3a5e 100%); |
| color: #ffffff; |
| box-shadow: 0 4px 12px rgba(15, 76, 129, 0.3); |
| } |
| .card[data-brand="brutalist"] .icon-wrapper { |
| background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%); |
| color: #ffffff; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); |
| } |
| .card[data-brand="digital"] .icon-wrapper { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| color: #ffffff; |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); |
| } |
| .card[data-brand="glass"] .icon-wrapper { |
| background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(230,230,250,0.9) 100%); |
| color: #4a5568; |
| border: 1px solid rgba(255,255,255,0.3); |
| backdrop-filter: blur(10px); |
| box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2); |
| } |
| .card[data-brand="chrome"] .icon-wrapper { |
| background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%); |
| color: #1a1a1a; |
| box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4); |
| } |
| .card[data-brand="retro"] .icon-wrapper { |
| background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%); |
| color: #ffffff; |
| box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3); |
| } |
| .card[data-brand="stellar"] .icon-wrapper { |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); |
| color: #f39c12; |
| box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3); |
| } |
| .card[data-brand="vintage"] .icon-wrapper { |
| background: linear-gradient(135deg, #d4a574 0%, #b8936a 100%); |
| color: #3e2723; |
| box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3); |
| } |
| .card[data-brand="zen"] .icon-wrapper { |
| background: linear-gradient(135deg, #f5f5dc 0%, #e8e8d0 100%); |
| color: #4a5f4a; |
| box-shadow: 0 4px 12px rgba(74, 95, 74, 0.2); |
| } |
| .card[data-brand="organic"] .icon-wrapper { |
| background: linear-gradient(135deg, #a8d5ba 0%, #8bc4a0 100%); |
| color: #2d5f3f; |
| box-shadow: 0 4px 12px rgba(139, 196, 160, 0.3); |
| } |
| .card[data-brand="swiss-alt"] .icon-wrapper { |
| background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%); |
| color: #ffffff; |
| box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3); |
| } |
| |
| @media (max-width: 768px) { |
| .container { |
| padding: 50px 0; |
| } |
| h1 { |
| font-size: 34px; |
| } |
| .grid { |
| grid-template-columns: 1fr; |
| gap: 20px; |
| } |
| .card { |
| min-height: auto; |
| } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| <header> |
| <div class="badge"> |
| <span></span> |
| Taroo Builders Studio |
| </div> |
| <h1><em>Taroo</em> Builders Design Collection</h1> |
| <p class="subtitle"> |
| Explore 16 premium agency design systems crafted for high-end digital experiences. Each template represents a distinct visual language and aesthetic approach. Click any card below to view the full implementation. |
| </p> |
| </header> |
|
|
| <main class="grid"> |
| |
| <div class="card" data-brand="cosmic" onclick="launch('01_cosmic_elegance')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">✨</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Cosmic Elegance</h2> |
| <p class="site-description">Aspirational luxury meets celestial wonder. Warm gold accents, EB Garamond serifs, glassmorphism, and constellation-inspired patterns.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Luxury Agency</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="cyberpunk" onclick="launch('02_cyberpunk_light_agency')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">⚡</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Cyberpunk Light</h2> |
| <p class="site-description">High-tech meets minimalism. Neon green accents on sterile white, JetBrains Mono typography, and sharp geometric brutalism.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Tech Agency</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="editorial" onclick="launch('03_paper_ink_editorial_website')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">📰</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Paper & Ink Editorial</h2> |
| <p class="site-description">Premium journalism meets architecture. Libre Caslon headlines, IBM Plex Sans body, ink-on-newsprint aesthetics.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Editorial Agency</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="swiss" onclick="launch('04_swiss_grid_master_agency_website')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">◼️</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Swiss Grid Master</h2> |
| <p class="site-description">Precision-engineered layouts with mathematical grids, Helvetica typography, and strict alignment principles.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Minimalist</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="classic" onclick="launch('05_taroo_builders_agency_website')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">🏛️</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Taroo Builders Agency</h2> |
| <p class="site-description">Classic agency presentation with refined typography, balanced layouts, and professional color schemes.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Professional</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="blueprint" onclick="launch('06_taroo_builders_blueprint_agency')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">📐</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Blueprint Agency</h2> |
| <p class="site-description">Architectural precision with technical drawings, blueprint aesthetics, and engineering-inspired design patterns.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Technical</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="brutalist" onclick="launch('07_taroo_builders_brutalist_grid')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">▦</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Brutalist Grid</h2> |
| <p class="site-description">Raw, uncompromising design with exposed structures, bold typography, and concrete-inspired textures.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Bold Design</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="digital" onclick="launch('08_taroo_builders_digital_studio')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">💻</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Digital Studio</h2> |
| <p class="site-description">Modern digital-first agency with interactive elements, dynamic animations, and contemporary aesthetics.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Digital First</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="glass" onclick="launch('09_taroo_builders_frosted_glass_luxe')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">💎</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Frosted Glass Luxe</h2> |
| <p class="site-description">Premium glassmorphism with translucent layers, soft shadows, and ethereal blur effects for luxury feel.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Glassmorphism</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="chrome" onclick="launch('10_taroo_builders_liquid_chrome_agency_website')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">🌊</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Liquid Chrome</h2> |
| <p class="site-description">Fluid metallic aesthetics with reflective surfaces, dynamic gradients, and futuristic chrome effects.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Futuristic</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="retro" onclick="launch('11_taroo_builders_retro_tech_website')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">📟</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Retro Tech</h2> |
| <p class="site-description">Nostalgic technology vibes with vintage computing aesthetics, pixel fonts, and retro color palettes.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Vintage Tech</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="stellar" onclick="launch('12_taroo_builders_stellar_minimalism')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">⭐</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Stellar Minimalism</h2> |
| <p class="site-description">Clean space-inspired design with astronomical elements, deep contrast, and expansive whitespace.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Space Design</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="vintage" onclick="launch('13_taroo_builders_vintage_poster')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">🎨</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Vintage Poster</h2> |
| <p class="site-description">Classic poster design with hand-crafted typography, aged textures, and retro color treatments.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Retro Design</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="zen" onclick="launch('14_taroo_builders_zen_concept')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">🧘</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Zen Concept</h2> |
| <p class="site-description">Peaceful minimalism with Japanese-inspired aesthetics, natural elements, and calming neutral tones.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Zen Design</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="organic" onclick="launch('15_taroo_organic_waves_website')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">🌿</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Organic Waves</h2> |
| <p class="site-description">Flowing natural forms with curved layouts, organic shapes, and earth-inspired color harmonies.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Organic Design</span> |
| </div> |
| </div> |
|
|
| |
| <div class="card" data-brand="swiss-alt" onclick="launch('16_taroo_swiss_grid_agency')"> |
| <div class="card-top"> |
| <div class="icon-wrapper">📏</div> |
| <span class="material-symbols-outlined arrow-icon">north_east</span> |
| </div> |
| <div class="card-body"> |
| <h2 class="site-title">Swiss Grid Agency</h2> |
| <p class="site-description">International typographic style with systematic grids, asymmetric balance, and sans-serif excellence.</p> |
| </div> |
| <div class="card-footer"> |
| <span class="tag">Swiss Style</span> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| function launch(folder) { |
| window.location.href = `./${folder}/index.html`; |
| } |
| </script> |
| </body> |
| </html> |
|
|
