| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>经典双色 · 米黄深蓝</title> |
| 6 | <style> |
| 7 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 8 | html, body { width: 1600px; height: 900px; overflow: hidden; font-family:"Songti SC","Noto Serif SC","SimSun",serif; } |
| 9 | .canvas { |
| 10 | width: 1600px; height: 900px; position: relative; color: #0D3D6E; |
| 11 | background: linear-gradient(135deg, #FBF5E6 0%, #F9F2E0 100%); |
| 12 | } |
| 13 | |
| 14 | /* 右侧深蓝色块 */ |
| 15 | .blue-block { |
| 16 | position: absolute; top: 0; right: 0; width: 560px; height: 900px; |
| 17 | background: linear-gradient(160deg, #1660AB 0%, #0D3D6E 100%); |
| 18 | } |
| 19 | /* 金线装饰 */ |
| 20 | .gold-line { |
| 21 | position: absolute; top: 80px; right: 560px; width: 60px; height: 2px; |
| 22 | background: #B8860B; |
| 23 | } |
| 24 | |
| 25 | /* 左上 */ |
| 26 | .brand { |
| 27 | position: absolute; top: 80px; left: 140px; |
| 28 | font-size: 16px; color: #0D3D6E; letter-spacing: 6px; |
| 29 | font-family:"Helvetica Neue",sans-serif; font-weight: 600; |
| 30 | } |
| 31 | .brand::before { content:""; display:inline-block; width:28px; height:2px; background:#B8860B; vertical-align:middle; margin-right:14px; } |
| 32 | |
| 33 | /* 标题 */ |
| 34 | .title { position: absolute; top: 180px; left: 140px; } |
| 35 | .num { |
| 36 | font-size: 26px; color: #B8860B; letter-spacing: 4px; |
| 37 | font-family:"Playfair Display","Songti SC",serif; font-style: italic; |
| 38 | margin-bottom: 20px; |
| 39 | } |
| 40 | .main-title { |
| 41 | font-size: 116px; font-weight: 800; color: #0D3D6E; |
| 42 | letter-spacing: 12px; line-height: 1.1; |
| 43 | } |
| 44 | .main-title .gold { color: #B8860B; font-style: italic; } |
| 45 | .sub-title { |
| 46 | font-size: 26px; color: #2C2416; letter-spacing: 8px; |
| 47 | margin-top: 28px; |
| 48 | } |
| 49 | |
| 50 | /* 左下正文 */ |
| 51 | .body { |
| 52 | position: absolute; left: 140px; bottom: 200px; |
| 53 | width: 540px; font-size: 22px; line-height: 2.1; |
| 54 | color: #2C2416; letter-spacing: 1.5px; |
| 55 | } |
| 56 | .body strong { color: #1660AB; font-weight: 700; } |
| 57 | |
| 58 | /* 左下数据 */ |
| 59 | .data { |
| 60 | position: absolute; left: 140px; bottom: 90px; |
| 61 | display: flex; gap: 50px; |
| 62 | } |
| 63 | .data .item .n { |
| 64 | font-size: 52px; font-weight: 800; color: #1660AB; line-height: 1; |
| 65 | font-family:"Playfair Display",serif; |
| 66 | } |
| 67 | .data .item .l { font-size: 15px; color: #2C2416; letter-spacing: 3px; margin-top: 10px; } |
| 68 | |
| 69 | /* 右侧白色卡 */ |
| 70 | .card { |
| 71 | position: absolute; top: 200px; right: 100px; |
| 72 | width: 360px; padding: 44px 40px; |
| 73 | background: rgba(249,242,224,0.95); |
| 74 | } |
| 75 | .card h3 { |
| 76 | font-size: 30px; color: #0D3D6E; letter-spacing: 4px; margin-bottom: 24px; |
| 77 | border-bottom: 2px solid #B8860B; padding-bottom: 14px; |
| 78 | } |
| 79 | .card .row { |
| 80 | display: flex; justify-content: space-between; padding: 14px 0; |
| 81 | border-bottom: 1px solid rgba(13,61,110,0.15); font-size: 18px; |
| 82 | } |
| 83 | .card .row .k { color: #2C2416; letter-spacing: 2px; } |
| 84 | .card .row .v { color: #1660AB; font-weight: 600; } |
| 85 | |
| 86 | /* 右下引文 */ |
| 87 | .quote { |
| 88 | position: absolute; right: 100px; bottom: 110px; width: 360px; |
| 89 | color: #F9F2E0; font-size: 20px; line-height: 1.9; letter-spacing: 2px; |
| 90 | } |
| 91 | .quote .em { color: #B8860B; font-weight: 700; } |
| 92 | |
| 93 | /* 底部 */ |
| 94 | .footer { |
| 95 | position: absolute; left: 140px; bottom: 50px; |
| 96 | font-size: 14px; color: #2C2416; letter-spacing: 4px; |
| 97 | font-family:"Helvetica Neue",sans-serif; |
| 98 | } |
| 99 | </style> |
| 100 | </head> |
| 101 | <body> |
| 102 | <div class="canvas"> |
| 103 | <div class="blue-block"></div> |
| 104 | <div class="gold-line"></div> |
| 105 | |
| 106 | <div class="brand">CLASSIC DUO · 经典双色</div> |
| 107 | |
| 108 | <div class="title"> |
| 109 | <div class="num">— No. 01 / Duo Palette —</div> |
| 110 | <div class="main-title">米<span class="gold">黄</span><br>深<span class="gold">蓝</span></div> |
| 111 | <div class="sub-title">一暖一冷 · 沉淀岁月的高级感</div> |
| 112 | </div> |
| 113 | |
| 114 | <div class="body"> |
| 115 | 暖米黄如<strong>典籍封面</strong>，<br> |
| 116 | 深海蓝似<strong>知识深渊</strong>。<br> |
| 117 | 双色对峙，不喧不闹，<br> |
| 118 | 是经得起时间考验的优雅。 |
| 119 | </div> |
| 120 | |
| 121 | <div class="data"> |
| 122 | <div class="item"><div class="n">02</div><div class="l">CORE COLORS</div></div> |
| 123 | <div class="item"><div class="n">100%</div><div class="l">TIMELESS</div></div> |
| 124 | <div class="item"><div class="n">∞</div><div class="l">ELEGANCE</div></div> |
| 125 | </div> |
| 126 | |
| 127 | <div class="card"> |
| 128 | <h3>配色档案</h3> |
| 129 | <div class="row"><span class="k">主色 A · 暖米黄</span><span class="v">#F9F2E0</span></div> |
| 130 | <div class="row"><span class="k">主色 B · 深海蓝</span><span class="v">#1660AB</span></div> |
| 131 | <div class="row"><span class="k">强调 · 金棕</span><span class="v">#B8860B</span></div> |
| 132 | <div class="row"><span class="k">气质</span><span class="v">沉稳 · 书卷</span></div> |
| 133 | </div> |
| 134 | |
| 135 | <div class="quote"> |
| 136 | 越是<span class="em">简单</span>的配色，<br> |
| 137 | 越需要<span class="em">克制</span>的品味。<br> |
| 138 | 经典，从不过时。 |
| 139 | </div> |
| 140 | |
| 141 | <div class="footer">CLASSIC DUO BLUE · VOL. 11 · TIMELESS PALETTE</div> |
| 142 | </div> |
| 143 | </body> |
| 144 | </html> |
| 145 |