Repository navigation
Expand file tree
/
Copy pathlayout-dark.html
More file actions
386 lines (364 loc) · 29.8 KB
/
Copy pathlayout-dark.html
File metadata and controls
386 lines (364 loc) · 29.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>egghead — home · full layout mock (night shift)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400..1000&family=Caveat:wght@600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
// night shift: same names, inverted roles — markup stays close to the light kit
paper: '#0D141F',
cream: '#F2EAD8',
shell: '#101926',
yolk: '#F7C948',
'yolk-deep': '#E8B229',
'yolk-shadow': '#C28E12',
ink: '#EDE4D3',
'ink-soft': '#9AABC0',
rust: '#C2664E',
sky: '#A8D4E2',
sage: '#9DBE8D',
navy: '#1E2A38',
},
fontFamily: {
sans: ['Nunito', 'system-ui', 'sans-serif'],
hand: ['Caveat', 'cursive'],
},
boxShadow: {
'btn': '0 1px 0 rgba(255,255,255,.55) inset, 0 3px 0 #B8860F, 0 8px 14px -3px rgba(0,0,0,.55)',
'btn-hover': '0 1px 0 rgba(255,255,255,.6) inset, 0 3px 0 #B8860F, 0 12px 20px -4px rgba(0,0,0,.6)',
'btn-press': '0 2px 4px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.08)',
'btn-dark': '0 1px 0 rgba(255,255,255,.12) inset, 0 3px 0 #0A1119, 0 8px 14px -3px rgba(0,0,0,.6)',
'btn-ghost': '0 1px 0 rgba(255,255,255,.10) inset, 0 -2px 0 rgba(0,0,0,.30) inset, 0 2px 0 #0B121C, 0 4px 8px -2px rgba(0,0,0,.5)',
'card': '0 1px 0 rgba(255,255,255,.07) inset, 0 1px 2px rgba(0,0,0,.35), 0 12px 28px -8px rgba(0,0,0,.55), 0 2px 4px -1px rgba(0,0,0,.3)',
'card-deep': '0 1px 0 rgba(255,255,255,.09) inset, 0 16px 40px -10px rgba(0,0,0,.65), 0 4px 8px -2px rgba(0,0,0,.4)',
'well': 'inset 0 2px 6px rgba(0,0,0,.55), inset 0 1px 2px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.06)',
'sticky': '0 2px 4px rgba(0,0,0,.35), 0 10px 20px -5px rgba(0,0,0,.55)',
'knob': '0 1px 0 rgba(255,255,255,.14) inset, 0 -2px 3px rgba(0,0,0,.35) inset, 0 3px 6px rgba(0,0,0,.55)',
'tab-up': '0 1px 0 rgba(255,255,255,.08) inset, 0 -4px 8px -4px rgba(0,0,0,.4)',
},
backgroundImage: {
'yolk-grad': 'linear-gradient(180deg, #FFD968 0%, #F7C948 45%, #EFB838 100%)',
'navy-grad': 'linear-gradient(180deg, #344660 0%, #243246 55%, #1C2839 100%)',
'cream-grad': 'linear-gradient(180deg, #28394E 0%, #1E2C3E 100%)',
'shell-grad': 'linear-gradient(180deg, #22303F 0%, #141E2A 100%)',
'rust-grad': 'linear-gradient(180deg, #B5604E 0%, #A05040 55%, #8F4536 100%)',
'sky-grad': 'linear-gradient(180deg, #C2E2EE 0%, #A8D4E2 60%, #95C6D7 100%)',
},
borderRadius: { 'xl2': '1.25rem' },
}
}
}
</script>
<style type="text/tailwindcss">
body {
background-color: #0A101A;
background-image:
radial-gradient(ellipse 80% 60% at 50% -10%, rgba(70,110,160,.22), transparent),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .65 0 0 0 0 .75 0 0 0 0 .95 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.press:active { transform: translateY(2px); box-shadow: 0 2px 4px rgba(0,0,0,.45) inset, 0 1px 0 rgba(255,255,255,.08) !important; }
.press { transition: transform .08s ease, box-shadow .12s ease, filter .12s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
@media (hover: hover) { .press:hover { filter: brightness(1.08); } }
.flink { @apply block text-sm font-bold text-ink-soft hover:text-ink py-1 rounded-md; }
</style>
</head>
<body class="font-sans text-ink antialiased min-h-screen">
<div class="max-w-5xl mx-auto px-6 pt-6 pb-10 space-y-14">
<!-- ============ PRIMARY NAV ============ -->
<nav class="flex items-center gap-2.5 bg-cream-grad rounded-2xl shadow-card border border-[#2A3A4F] pl-4 pr-3 py-3" aria-label="Primary">
<a href="#" class="press flex items-center gap-2.5 pr-1.5 rounded-xl">
<img src="assets/thumbs/logomark-skeuo.png" alt="eggo" width="34" height="34" class="drop-shadow-[0_3px_4px_rgba(0,0,0,.55)]" />
<span class="font-black text-xl tracking-tight">egghead</span>
</a>
<span class="hidden md:block w-1.5 h-1.5 rounded-full bg-yolk/70 mx-1"></span>
<div class="hidden md:flex items-center gap-1.5">
<a href="#" aria-current="page" class="press bg-yolk-grad text-navy font-extrabold text-sm px-4 pt-[9px] pb-[7px] rounded-full shadow-btn border border-yolk-shadow/40">Learn</a>
<a href="#" class="press text-ink-soft hover:text-ink font-bold text-sm px-4 py-2 rounded-full hover:bg-white/5">Courses</a>
<a href="#" class="press text-ink-soft hover:text-ink font-bold text-sm px-4 py-2 rounded-full hover:bg-white/5 inline-flex items-center gap-1.5">Topics
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"/></svg>
</a>
<a href="#" class="press text-ink-soft hover:text-ink font-bold text-sm px-4 py-2 rounded-full hover:bg-white/5 inline-flex items-center gap-1.5">Pro
<span class="w-1.5 h-1.5 rounded-full bg-yolk shadow-[0_0_5px_#F7C948]"></span>
</a>
</div>
<div class="ml-auto hidden lg:flex items-center gap-2.5 bg-shell rounded-full px-4 py-2 shadow-well border border-[#2E3F54] w-56">
<svg width="15" height="15" viewBox="0 0 17 17" fill="none" stroke="#9AABC0" stroke-width="2" stroke-linecap="round"><circle cx="7" cy="7" r="5.5"/><path d="M11.5 11.5L15.5 15.5"/></svg>
<span class="text-ink/35 font-semibold text-sm">Search…</span>
<kbd class="ml-auto text-[10px] font-extrabold bg-cream-grad rounded-md px-1.5 py-0.5 shadow-btn-ghost border border-[#36485F] text-ink-soft">⌘K</kbd>
</div>
<a href="#" class="press hidden sm:block text-sm font-bold text-ink px-4 py-2.5 rounded-xl bg-cream-grad shadow-btn-ghost border border-[#36485F]">Sign in</a>
<a href="#" class="press bg-yolk-grad text-navy font-extrabold text-sm px-5 pt-[11px] pb-[9px] rounded-xl shadow-btn hover:shadow-btn-hover border border-yolk-shadow/40">Join free</a>
</nav>
<!-- ============ HERO ============ -->
<section class="grid md:grid-cols-[1.5fr_1fr] gap-10 items-center pt-4">
<div class="space-y-6">
<span class="inline-flex items-center gap-1.5 bg-cream-grad text-xs font-extrabold px-3.5 py-1.5 rounded-full shadow-btn-ghost border border-[#36485F]">
<span class="w-2 h-2 rounded-full bg-sage shadow-[0_0_5px_#9DBE8D]"></span> new path: Claude Code Mastery
</span>
<h1 class="text-5xl md:text-[3.4rem] font-black leading-[1.04] tracking-tight">Learn the tools<br/>that <span class="relative inline-block">compound<span class="absolute inset-x-[-2px] bottom-1.5 h-4 bg-yolk/40 -z-10 rounded-sm rotate-[-1deg]"></span></span>.</h1>
<p class="font-semibold text-ink-soft text-lg max-w-md">Concise video lessons on AI dev tools and modern web craft. Made by working engineers who respect your time.</p>
<div class="flex flex-wrap items-center gap-4 pt-1">
<a href="#" class="press bg-yolk-grad text-navy font-extrabold text-base px-7 pt-[15px] pb-[13px] rounded-xl shadow-btn hover:shadow-btn-hover border border-yolk-shadow/40">
<span class="inline-flex items-center gap-2.5">
<svg width="13" height="14" viewBox="0 0 13 14" fill="currentColor"><path d="M1 1.8c0-.8.9-1.3 1.6-.9l9 5.2c.7.4.7 1.4 0 1.8l-9 5.2c-.7.4-1.6-.1-1.6-.9V1.8z"/></svg>
Start learning
</span>
</a>
<a href="#" class="press bg-navy-grad text-cream font-extrabold px-7 pt-[15px] pb-[13px] rounded-xl shadow-btn-dark border border-black/40">
<span class="inline-flex items-center gap-2">Explore the path
<svg width="15" height="12" viewBox="0 0 15 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 6h12M9 1.5L13.5 6 9 10.5"/></svg>
</span>
</a>
</div>
<p class="font-hand text-2xl text-rust rotate-[-1deg]">no fluff. all signal. two minutes at a time. ✏️</p>
</div>
<div class="relative hidden md:block">
<img src="assets/thumbs/spot-eggo-unboxing.png" alt="Eggo popping out of a cardboard box"
class="w-60 mx-auto drop-shadow-[0_10px_16px_rgba(0,0,0,.6)]" />
<!-- sticky note: paper stays paper, even at night -->
<div class="absolute -right-2 -top-6 w-40 bg-gradient-to-b from-[#FBEFA9] to-[#F3DF7E] p-3.5 pt-5 shadow-sticky rotate-[3deg] rounded-[2px]">
<span class="absolute -top-2.5 left-1/2 -translate-x-1/2 w-12 h-4 bg-[#E8D9A8]/80 rotate-[-2deg] shadow-sm"></span>
<p class="font-hand text-xl leading-tight text-[#1E2A38]">having fun IS the work ★</p>
</div>
<!-- stat chips -->
<div class="flex justify-center gap-3 mt-5">
<div class="bg-shell rounded-xl px-4 py-2.5 shadow-well border border-[#2E3F54] text-center"><p class="font-black">1,200+</p><p class="text-[10px] font-extrabold uppercase tracking-wider text-ink-soft">Lessons</p></div>
<div class="bg-shell rounded-xl px-4 py-2.5 shadow-well border border-[#2E3F54] text-center"><p class="font-black">180+</p><p class="text-[10px] font-extrabold uppercase tracking-wider text-ink-soft">Courses</p></div>
<div class="bg-shell rounded-xl px-4 py-2.5 shadow-well border border-[#2E3F54] text-center"><p class="font-black">12M+</p><p class="text-[10px] font-extrabold uppercase tracking-wider text-ink-soft">Views</p></div>
</div>
</div>
</section>
<!-- ============ TOPIC SHELF ============ -->
<section class="flex flex-wrap items-center gap-3">
<span class="text-xs font-extrabold uppercase tracking-[0.2em] text-rust mr-1">Browse</span>
<a href="#" class="press bg-yolk-grad text-navy text-xs font-black uppercase tracking-wider px-3.5 pt-[7px] pb-[5px] rounded-full shadow-btn border border-yolk-shadow/40">Start here</a>
<a href="#" class="press bg-rust-grad text-cream text-xs font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full border border-[#7E3C2E] [box-shadow:0_1px_0_rgba(255,255,255,.25)_inset,0_-2px_0_rgba(0,0,0,.2)_inset,0_2px_4px_rgba(0,0,0,.45)]">Claude Code</a>
<a href="#" class="press bg-sky-grad text-navy text-xs font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full border border-[#86B8C9] [box-shadow:0_1px_0_rgba(255,255,255,.5)_inset,0_-2px_0_rgba(0,0,0,.1)_inset,0_2px_4px_rgba(0,0,0,.4)]">Cursor</a>
<a href="#" class="press bg-gradient-to-b from-[#AECB9E] to-[#8FB07E] text-navy text-xs font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full border border-[#7FA06E] [box-shadow:0_1px_0_rgba(255,255,255,.5)_inset,0_-2px_0_rgba(0,0,0,.1)_inset,0_2px_4px_rgba(0,0,0,.4)]">MCP</a>
<a href="#" class="press bg-shell text-ink-soft text-xs font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full shadow-well border border-[#36485F]">TypeScript</a>
<a href="#" class="press bg-shell text-ink-soft text-xs font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full shadow-well border border-[#36485F]">Automation</a>
<a href="#" class="text-sm font-extrabold text-ink-soft hover:text-ink ml-1">all topics →</a>
</section>
<!-- ============ MAIN GRID ============ -->
<section class="grid md:grid-cols-3 gap-6 items-start">
<!-- start here index card: paper stays paper -->
<div class="relative bg-gradient-to-b from-[#FCF6DF] to-[#F5E9C4] rounded-lg shadow-card-deep border border-[#E8D9A8] p-6 rotate-[-0.6deg] text-[#1E2A38]">
<span class="absolute -top-3 left-6 bg-cream-grad text-ink text-[10px] font-black uppercase tracking-[0.15em] px-3 py-1.5 rounded-md shadow-btn-ghost border border-[#36485F]">Start here</span>
<span class="absolute top-3 right-3 w-8 h-8 bg-sky-grad rounded-sm shadow-sm [clip-path:polygon(0_0,100%_0,100%_100%)]"></span>
<h3 class="text-xl font-black mt-1">AI Dev Essentials</h3>
<p class="text-sm font-semibold text-[#43536A] mt-1 mb-4">The fundamentals you need to work effectively with AI tools and agents.</p>
<ul class="space-y-2 text-sm font-bold">
<li class="flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-sage/30 border border-sage grid place-items-center text-[10px] text-[#5C7A4C]">✓</span> Work with AI, not just in it</li>
<li class="flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-sage/30 border border-sage grid place-items-center text-[10px] text-[#5C7A4C]">✓</span> Use tools that compound</li>
<li class="flex items-center gap-2"><span class="w-5 h-5 rounded-full bg-sage/30 border border-sage grid place-items-center text-[10px] text-[#5C7A4C]">✓</span> Build repeatable workflows</li>
</ul>
<a href="#" class="press inline-block mt-5 bg-yolk-grad text-navy font-extrabold text-sm px-6 pt-[13px] pb-[11px] rounded-xl shadow-btn hover:shadow-btn-hover border border-yolk-shadow/40">Explore the path →</a>
<span class="absolute bottom-0 right-0 w-7 h-7 bg-gradient-to-tl from-[#E2D3A4] to-[#F5E9C4] rounded-tl-xl shadow-[-2px_-2px_4px_rgba(120,90,30,.15)] [clip-path:polygon(100%_0,100%_100%,0_100%)]"></span>
</div>
<!-- latest lessons -->
<div class="bg-cream-grad rounded-2xl shadow-card border border-[#2A3A4F] overflow-hidden md:col-span-2">
<div class="px-6 py-4 flex items-center justify-between border-b border-[#243246]">
<span class="font-black text-lg">⚡ Latest lessons</span>
<a href="#" class="press text-sm font-extrabold text-ink-soft bg-cream-grad px-3.5 py-1.5 rounded-lg shadow-btn-ghost border border-[#36485F]">View all →</a>
</div>
<div class="divide-y divide-[#243246]">
<div class="flex items-center gap-4 px-6 py-4 hover:bg-white/5 transition-colors">
<div class="relative shrink-0 w-28 h-[4.2rem] bg-navy-grad rounded-lg shadow-btn-dark border border-black/40 overflow-hidden">
<div class="absolute inset-2 space-y-1">
<div class="h-1 w-3/4 bg-sage/70 rounded-full"></div>
<div class="h-1 w-1/2 bg-cream/40 rounded-full"></div>
<div class="h-1 w-2/3 bg-yolk/60 rounded-full"></div>
</div>
<span class="absolute bottom-1 right-1.5 bg-black/60 text-cream text-[10px] font-bold px-1 rounded">12:34</span>
</div>
<div class="min-w-0">
<span class="text-[10px] font-black uppercase tracking-wider text-rust">Claude Code</span>
<p class="font-extrabold leading-snug truncate">Use hooks to enforce code quality</p>
<p class="text-sm font-semibold text-ink-soft truncate">PreToolUse and PostToolUse hooks in action.</p>
</div>
<button class="press ml-auto shrink-0 w-10 h-10 grid place-items-center rounded-lg bg-cream-grad shadow-btn-ghost border border-[#36485F] text-ink-soft">
<svg width="13" height="16" viewBox="0 0 16 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M2 2.5C2 1.7 2.7 1 3.5 1h9c.8 0 1.5.7 1.5 1.5V19l-6-4.5L2 19V2.5z"/></svg>
</button>
</div>
<div class="flex items-center gap-4 px-6 py-4 hover:bg-white/5 transition-colors">
<div class="relative shrink-0 w-28 h-[4.2rem] bg-navy-grad rounded-lg shadow-btn-dark border border-black/40 overflow-hidden">
<div class="absolute inset-2 space-y-1">
<div class="h-1 w-2/3 bg-sky/70 rounded-full"></div>
<div class="h-1 w-3/4 bg-cream/40 rounded-full"></div>
<div class="h-1 w-1/3 bg-rust/80 rounded-full"></div>
</div>
<span class="absolute bottom-1 right-1.5 bg-black/60 text-cream text-[10px] font-bold px-1 rounded">9:47</span>
</div>
<div class="min-w-0">
<span class="text-[10px] font-black uppercase tracking-wider text-[#7FB6CC]">MCP</span>
<p class="font-extrabold leading-snug truncate">Delegate tasks with subagents</p>
<p class="text-sm font-semibold text-ink-soft truncate">Break work down. Run in parallel.</p>
</div>
<button class="press ml-auto shrink-0 w-10 h-10 grid place-items-center rounded-lg bg-cream-grad shadow-btn-ghost border border-[#36485F] text-ink-soft">
<svg width="13" height="16" viewBox="0 0 16 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M2 2.5C2 1.7 2.7 1 3.5 1h9c.8 0 1.5.7 1.5 1.5V19l-6-4.5L2 19V2.5z"/></svg>
</button>
</div>
<div class="flex items-center gap-4 px-6 py-4 hover:bg-white/5 transition-colors">
<div class="relative shrink-0 w-28 h-[4.2rem] bg-navy-grad rounded-lg shadow-btn-dark border border-black/40 overflow-hidden">
<div class="absolute inset-2 space-y-1">
<div class="h-1 w-1/2 bg-yolk/70 rounded-full"></div>
<div class="h-1 w-2/3 bg-cream/40 rounded-full"></div>
<div class="h-1 w-3/4 bg-sage/60 rounded-full"></div>
</div>
<span class="absolute bottom-1 right-1.5 bg-black/60 text-cream text-[10px] font-bold px-1 rounded">7:02</span>
</div>
<div class="min-w-0">
<span class="text-[10px] font-black uppercase tracking-wider text-[#8FB07E]">Cursor</span>
<p class="font-extrabold leading-snug truncate">Write rules your agent actually follows</p>
<p class="text-sm font-semibold text-ink-soft truncate">Project rules, user rules, and when each wins.</p>
</div>
<button class="press ml-auto shrink-0 w-10 h-10 grid place-items-center rounded-lg bg-cream-grad shadow-btn-ghost border border-[#36485F] text-ink-soft">
<svg width="13" height="16" viewBox="0 0 16 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path d="M2 2.5C2 1.7 2.7 1 3.5 1h9c.8 0 1.5.7 1.5 1.5V19l-6-4.5L2 19V2.5z"/></svg>
</button>
</div>
<!-- learning path row -->
<div class="flex items-center gap-4 px-6 py-4 hover:bg-white/5 transition-colors">
<span class="shrink-0 w-11 h-11 grid place-items-center rounded-xl bg-yolk-grad text-navy shadow-btn border border-yolk-shadow/40 font-black text-sm">CC</span>
<div class="min-w-0 flex-1">
<p class="font-extrabold leading-snug">Claude Code Mastery</p>
<div class="mt-1.5 h-3 bg-shell rounded-full shadow-well border border-[#2E3F54] p-0.5 max-w-[14rem]">
<div class="h-full w-5/6 bg-yolk-grad rounded-full"></div>
</div>
</div>
<span class="text-sm font-bold text-ink-soft shrink-0">2h 19m</span>
<a href="#" class="press shrink-0 w-9 h-9 grid place-items-center rounded-lg bg-cream-grad shadow-btn-ghost border border-[#36485F] font-black text-ink-soft">→</a>
</div>
</div>
</div>
</section>
<!-- ============ INSTRUCTOR + NOTES STRIP ============ -->
<section class="flex flex-wrap items-center gap-8">
<div class="flex items-center gap-3">
<span class="w-12 h-12 rounded-full bg-gradient-to-b from-[#C2D8E4] to-[#9FBFD0] shadow-knob border-2 border-white grid place-items-center font-black text-[#43536A]">JL</span>
<div><p class="font-extrabold leading-tight">John Lindquist <span class="text-sky">✔</span></p><p class="text-xs font-bold text-ink-soft">Founder & Instructor</p></div>
</div>
<div class="relative w-48 bg-gradient-to-b from-[#D3E9F2] to-[#BBDCE9] p-4 pt-6 shadow-sticky rotate-[1.5deg] rounded-[2px]">
<span class="absolute -top-2.5 left-1/2 -translate-x-1/2 w-14 h-5 bg-[#E8D9A8]/80 rotate-[-3deg] shadow-sm"></span>
<p class="font-hand text-2xl leading-tight text-[#1E2A38]">Progress,<br/>not perfection. ♡</p>
</div>
<div class="relative rotate-[-1deg]">
<span class="inline-block bg-[#EDE0B8]/90 px-6 py-2.5 font-hand text-2xl text-[#1E2A38] shadow-sm [clip-path:polygon(2%_8%,98%_0,100%_92%,1%_100%)]">make complex things feel doable →</span>
</div>
<div class="inline-flex items-center gap-3 bg-shell rounded-xl px-4 py-3 shadow-well border border-[#2E3F54] ml-auto">
<span class="w-9 h-9 grid place-items-center rounded-full bg-yolk-grad shadow-btn border border-yolk-shadow/40 text-base">⚡</span>
<div>
<p class="font-extrabold leading-tight">7-day streak</p>
<p class="text-xs font-bold text-ink-soft">3 lessons today · keep shipping</p>
</div>
</div>
</section>
<!-- ============ THE SEND-OFF ============ -->
<section class="relative bg-navy-grad rounded-2xl shadow-btn-dark border border-black/40 p-8 md:p-12 overflow-hidden">
<span class="absolute font-mono font-bold text-cream/10 text-4xl left-[6%] top-[16%] rotate-[-14deg] select-none">{ }</span>
<span class="absolute font-mono font-bold text-cream/10 text-2xl left-[30%] bottom-[14%] rotate-[8deg] select-none">;</span>
<span class="absolute font-mono font-bold text-cream/10 text-3xl left-[52%] top-[10%] rotate-[10deg] select-none">λ</span>
<span class="absolute font-mono font-bold text-cream/10 text-2xl left-[44%] bottom-[24%] rotate-[-6deg] select-none">( )</span>
<span class="absolute font-mono font-bold text-cream/[.08] text-5xl right-[20%] bottom-[6%] rotate-[12deg] select-none">=></span>
<span class="absolute right-[10%] top-[14%] w-9 h-9 rounded-full bg-yolk-grad shadow-[0_0_28px_rgba(247,201,72,.6)] grid place-items-center font-black text-[10px] text-navy rotate-[8deg] select-none">JS</span>
<div class="relative max-w-xl space-y-4">
<h3 class="text-3xl md:text-4xl font-black leading-tight text-cream">Stop scrolling.<br/>Start shipping.</h3>
<p class="font-semibold text-cream/70 max-w-md">Free account, no fluff — concise lessons on the tools that compound.</p>
<div class="flex flex-wrap items-center gap-4 pt-1">
<a href="#" class="press bg-yolk-grad text-navy font-extrabold text-base px-7 pt-[15px] pb-[13px] rounded-full shadow-btn hover:shadow-btn-hover border border-yolk-shadow/40">Create free account</a>
<a href="#" class="press text-cream font-bold text-sm bg-white/10 px-5 py-3 rounded-xl border border-white/15 shadow-[0_1px_0_rgba(255,255,255,.15)_inset,0_2px_0_rgba(0,0,0,.4)]">Browse courses →</a>
</div>
<p class="font-hand text-xl text-cream/60 rotate-[-0.5deg]">two minutes at a time, since 2013 ✏️</p>
</div>
</section>
<!-- ============ FOOTER ============ -->
<div class="relative pt-8">
<div class="absolute -top-1 right-8 z-10 w-44 bg-gradient-to-b from-[#FBEFA9] to-[#F3DF7E] p-4 pt-5 shadow-sticky rotate-[2.5deg] rounded-[2px]">
<span class="absolute -top-2.5 left-1/2 -translate-x-1/2 w-14 h-5 bg-[#E8D9A8]/80 rotate-[-2deg] shadow-sm"></span>
<p class="font-hand text-xl leading-tight text-[#1E2A38]">you made it to the bottom. eggo is proud of you ★</p>
</div>
<footer class="bg-cream-grad rounded-2xl shadow-card border border-[#2A3A4F] overflow-hidden">
<div class="grid lg:grid-cols-[1.3fr_2fr_1.4fr] gap-10 p-8 md:p-10">
<div class="space-y-4">
<a href="#" class="press inline-flex items-center gap-2.5 rounded-xl">
<img src="assets/thumbs/logomark-skeuo.png" alt="eggo" width="40" height="40" class="drop-shadow-[0_3px_4px_rgba(0,0,0,.55)]" />
<span class="font-black text-2xl tracking-tight">egghead</span>
</a>
<p class="font-hand text-2xl text-ink-soft leading-snug rotate-[-1deg]">learn by doing,<br/>two minutes at a time.</p>
<div class="flex items-center gap-2 pt-1">
<a href="#" aria-label="GitHub" class="press w-10 h-10 grid place-items-center rounded-xl bg-cream-grad shadow-btn-ghost border border-[#36485F] text-ink-soft">
<svg width="17" height="17" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
</a>
<a href="#" aria-label="X" class="press w-10 h-10 grid place-items-center rounded-xl bg-cream-grad shadow-btn-ghost border border-[#36485F] text-ink-soft">
<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M12.6 0h2.45l-5.35 6.12L16 16h-4.93l-3.86-5.05L2.8 16H.35l5.72-6.54L0 0h5.06l3.49 4.62L12.6 0zm-.86 14.53h1.36L4.32 1.39H2.86l8.88 13.14z"/></svg>
</a>
<a href="#" aria-label="YouTube" class="press w-10 h-10 grid place-items-center rounded-xl bg-cream-grad shadow-btn-ghost border border-[#36485F] text-ink-soft">
<svg width="18" height="14" viewBox="0 0 20 14" fill="currentColor"><path d="M19.6 2.2A2.5 2.5 0 0 0 17.8.4C16.2 0 10 0 10 0S3.8 0 2.2.4A2.5 2.5 0 0 0 .4 2.2 26 26 0 0 0 0 7a26 26 0 0 0 .4 4.8 2.5 2.5 0 0 0 1.8 1.8c1.6.4 7.8.4 7.8.4s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8A26 26 0 0 0 20 7a26 26 0 0 0-.4-4.8zM8 10V4l5.2 3L8 10z"/></svg>
</a>
<a href="#" aria-label="RSS" class="press w-10 h-10 grid place-items-center rounded-xl bg-cream-grad shadow-btn-ghost border border-[#36485F] text-ink-soft">
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="3" cy="13" r="1.5" fill="currentColor" stroke="none"/><path d="M2 8a6 6 0 0 1 6 6"/><path d="M2 3a11 11 0 0 1 11 11"/></svg>
</a>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 gap-6">
<nav aria-label="Learn" class="space-y-2.5">
<span class="text-xs font-extrabold uppercase tracking-wider text-rust block">Learn</span>
<a href="#" class="flink">Courses</a>
<a href="#" class="flink">Lessons</a>
<a href="#" class="flink">Learning paths</a>
<a href="#" class="flink inline-flex items-center gap-1.5">Pro <span class="w-1.5 h-1.5 rounded-full bg-yolk shadow-[0_0_5px_#F7C948]"></span></a>
</nav>
<nav aria-label="Topics" class="space-y-2.5">
<span class="text-xs font-extrabold uppercase tracking-wider text-rust block">Topics</span>
<a href="#" class="flink">Claude Code</a>
<a href="#" class="flink">MCP</a>
<a href="#" class="flink">Cursor</a>
<a href="#" class="flink">TypeScript</a>
<a href="#" class="flink text-ink-soft/70">all topics →</a>
</nav>
<nav aria-label="Community" class="space-y-2.5">
<span class="text-xs font-extrabold uppercase tracking-wider text-rust block">Community</span>
<a href="#" class="flink">Instructors</a>
<a href="#" class="flink">Teach on egghead</a>
<a href="#" class="flink">Discord</a>
<a href="#" class="flink">Support</a>
</nav>
</div>
<div class="space-y-3">
<span class="text-xs font-extrabold uppercase tracking-wider text-rust block">The egghead digest</span>
<p class="text-sm font-semibold text-ink-soft">One email a week. What shipped, what's worth your time, zero filler.</p>
<div class="flex items-center gap-2 bg-shell rounded-full p-1.5 pl-5 shadow-well border border-[#2E3F54]">
<input type="email" placeholder="you@example.com" class="bg-transparent outline-none w-full placeholder:text-ink/35 font-semibold text-sm" />
<button class="press shrink-0 bg-yolk-grad text-navy font-extrabold text-sm px-5 pt-[11px] pb-[9px] rounded-full shadow-btn border border-yolk-shadow/40">Subscribe</button>
</div>
<span class="font-hand text-lg text-ink-soft block rotate-[-0.5deg]">no spam. just signal. ✓</span>
</div>
</div>
<div class="flex flex-wrap items-center gap-x-5 gap-y-3 px-8 md:px-10 py-4 bg-shell-grad border-t border-[#243246] shadow-[inset_0_1px_0_rgba(255,255,255,.06)]">
<span class="text-xs font-bold text-ink-soft">© 2013–2026 egghead.io</span>
<span class="font-hand text-lg text-ink-soft/80 rotate-[-1deg]">the egg does not crack 🥚</span>
<nav class="flex items-center gap-4 text-xs font-bold text-ink-soft" aria-label="Legal">
<a href="#" class="hover:text-ink">Terms</a>
<a href="#" class="hover:text-ink">Privacy</a>
<a href="#" class="hover:text-ink">FAQ</a>
</nav>
<span class="ml-auto inline-flex items-center gap-1.5 bg-cream-grad text-[11px] font-extrabold px-3 py-1.5 rounded-full shadow-btn-ghost border border-[#36485F] text-ink-soft">
<span class="w-2 h-2 rounded-full bg-sage shadow-[0_0_5px_#9DBE8D]"></span> all systems sunny-side up
</span>
<span class="inline-flex bg-shell rounded-full p-1 shadow-well border border-[#2E3F54] gap-0.5">
<button aria-label="light mode" class="press w-7 h-7 grid place-items-center rounded-full text-xs opacity-50">☀️</button>
<button aria-label="dark mode" aria-pressed="true" class="w-7 h-7 grid place-items-center rounded-full bg-cream-grad shadow-btn-ghost border border-[#36485F] text-xs">🌙</button>
</span>
<button class="press inline-flex items-center gap-1.5 text-xs font-extrabold text-ink bg-cream-grad px-3.5 py-2 rounded-lg shadow-btn-ghost border border-[#36485F]">↑ Back to top</button>
</div>
</footer>
</div>
</div>
</body>
</html>