|
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>Firstname Lastname</title> |
7 | | -<link rel="preconnect" href="https://fonts.googleapis.com"> |
8 | | -<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
9 | | -<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> |
10 | | -<style> |
11 | | -:root{ |
12 | | ---bg:#0f1115; |
13 | | ---bg-elev:#141821; |
14 | | ---fg:#b9c2cf; |
15 | | ---fg-strong:#e6ebf2; |
16 | | ---muted:#6c7a90; |
17 | | ---accent:#5dd6ff; |
18 | | ---ring: rgba(93, 214, 255, 0.35); |
19 | | -} |
20 | | -*{box-sizing:border-box} |
21 | | -html,body{height:100%} |
22 | | -body{ |
23 | | -margin:0; |
24 | | -font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; |
25 | | -background: radial-gradient(1200px 600px at 10% -10%,#182032,transparent), var(--bg); |
26 | | -color:var(--fg); |
27 | | -line-height:1.6; |
28 | | -} |
29 | | -/* --- Navbar --- */ |
30 | | -.nav{ |
31 | | -position:sticky; top:0; z-index:50; |
32 | | -backdrop-filter:saturate(130%) blur(8px); |
33 | | -background: color-mix(in oklab, var(--bg) 80%, transparent); |
34 | | -border-bottom:1px solid rgba(255,255,255,0.06); |
35 | | -} |
36 | | -.nav-inner{ |
37 | | -max-width:1100px; margin:0 auto; |
38 | | -display:flex; align-items:center; justify-content:space-between; |
39 | | -padding:14px 20px; |
40 | | -gap:16px; |
41 | | -} |
42 | | -.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:0.2px} |
43 | | -.brand a{ |
44 | | -text-decoration:none; color:var(--fg-strong); |
45 | | -font-size:1.05rem; |
46 | | -transition: color .18s ease; |
47 | | -} |
48 | | -.brand a:hover{color:var(--accent)} |
49 | 1 |
|
50 | | - |
51 | | -.links{display:flex; gap:6px; align-items:center} |
52 | | -.links a{ |
53 | | ---pad: 10px 12px; |
54 | | -padding: var(--pad); |
55 | | -border-radius: 10px; |
56 | | -text-decoration:none; |
57 | | -color:var(--fg); |
58 | | -font-weight:500; |
59 | | -font-size:.95rem; |
60 | | -transition: color .18s ease, background-color .18s ease, transform .06s ease; |
61 | | -} |
62 | | -.links a:hover{color:var(--fg-strong); background:rgba(255,255,255,.06)} |
63 | | -.links a:active{transform:translateY(1px)} |
64 | | -.links a.active{color:var(--fg-strong); background:rgba(93,214,255,.12); box-shadow:0 0 0 2px var(--ring) inset} |
65 | | - |
66 | | - |
67 | | -/* --- Mobile menu --- */ |
68 | | -.menu-btn{display:none; border:0; background:transparent; color:var(--fg); padding:8px; border-radius:10px} |
69 | | -.menu-btn:hover{background:rgba(255,255,255,.06)} |
70 | | -.menu-icon{width:24px; height:24px; display:inline-block} |
71 | | - |
72 | | - |
73 | | -@media (max-width: 720px){ |
74 | | -.nav-inner{padding:10px 14px} |
75 | | -.links{display:none} |
76 | | -.menu-btn{display:inline-flex; align-items:center; justify-content:center} |
77 | | -.drawer{position:fixed; inset:60px 14px auto; background:var(--bg-elev); border:1px solid rgba(255,255,255,.08); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.35); display:none} |
78 | | -.drawer a{display:block; margin:8px; padding:12px 14px; border-radius:10px} |
79 | | -.drawer.open{display:block} |
80 | | -} |
81 | | - |
82 | | - |
83 | | -/* --- Demo content --- */ |
84 | | -main{max-width:1100px; margin:40px auto; padding:0 20px} |
85 | | -</html> |
0 commit comments