|
| 1 | +<!doctype html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | +<meta charset="utf-8"> |
| 5 | +<meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | +<title>Design Lab — HLD & LLD</title> |
| 7 | +<style> |
| 8 | +:root { |
| 9 | + --paper: #F5F7F4; --ink: #1C2522; --muted: #5F6E68; --line: #D9E1DC; |
| 10 | + --accent: #0E7568; --accent-ink: #0A5A50; --accent-wash: rgba(14,117,104,0.07); |
| 11 | + --grid-line: rgba(14,117,104,0.06); |
| 12 | + --serif: 'Charter', 'Iowan Old Style', 'Palatino', Georgia, serif; |
| 13 | + --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace; |
| 14 | +} |
| 15 | +@media (prefers-color-scheme: dark) { |
| 16 | + :root { |
| 17 | + --paper: #0F1412; --ink: #E2E9E4; --muted: #91A29A; --line: #263029; |
| 18 | + --accent: #3FBFAB; --accent-ink: #6BD4C3; --accent-wash: rgba(63,191,171,0.09); |
| 19 | + --grid-line: rgba(63,191,171,0.05); |
| 20 | + } |
| 21 | +} |
| 22 | +* { box-sizing: border-box; } |
| 23 | +body { |
| 24 | + margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; |
| 25 | + background: var(--paper); color: var(--ink); |
| 26 | + font-family: var(--serif); font-size: 17px; line-height: 1.68; |
| 27 | + background-image: |
| 28 | + linear-gradient(var(--grid-line) 1px, transparent 1px), |
| 29 | + linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); |
| 30 | + background-size: 22px 22px; |
| 31 | +} |
| 32 | +main { max-width: 640px; padding: 48px 24px; } |
| 33 | +h1 { |
| 34 | + font-family: var(--mono); font-size: clamp(26px, 5vw, 38px); font-weight: 700; |
| 35 | + letter-spacing: -0.01em; margin: 0 0 12px; |
| 36 | +} |
| 37 | +h1 .cursor { color: var(--accent); } |
| 38 | +.sub { |
| 39 | + font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; |
| 40 | + letter-spacing: 0.14em; color: var(--muted); margin: 0 0 24px; |
| 41 | +} |
| 42 | +p { color: var(--muted); max-width: 56ch; margin: 0 0 16px; } |
| 43 | +a { color: var(--accent-ink); } |
| 44 | +.chip { |
| 45 | + font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; |
| 46 | + color: var(--accent-ink); background: var(--accent-wash); |
| 47 | + border: 1px solid var(--line); padding: 5px 8px; display: inline-block; margin-right: 8px; |
| 48 | +} |
| 49 | +</style> |
| 50 | +</head> |
| 51 | +<body> |
| 52 | +<main> |
| 53 | + <h1>Design Lab — HLD & LLD<span class="cursor">▍</span></h1> |
| 54 | + <p class="sub">System design & low-level design · basics to advanced · deliberate practice</p> |
| 55 | + <span class="chip">TRACK 1 · LLD — L0…L7</span> |
| 56 | + <span class="chip">TRACK 2 · HLD — H0…H12</span> |
| 57 | + <p style="margin-top:24px;">Sets land here one at a time, same protocol as the <a href="../">DSA Pattern Lab</a>: attempt-first notes, real interview questions, the 45-minute scripts, and spaced re-solves.</p> |
| 58 | +</main> |
| 59 | +</body> |
| 60 | +</html> |
0 commit comments