| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>杂志大字 / Magazine Bold</title> |
| 7 | <style> |
| 8 | *{margin:0;padding:0;box-sizing:border-box} |
| 9 | html,body{width:100%;height:100%;overflow:hidden} |
| 10 | html{display:grid;place-items:center;background:#0f1117} |
| 11 | body{display:grid;place-items:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#0f1117} |
| 12 | .slide{position:relative;width:min(100vw,calc(100vh*16/9));aspect-ratio:16/9;overflow:hidden;background:#fef3c7;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.08)} |
| 13 | .watermark{position:absolute;bottom:clamp(16px,3vw,40px);right:clamp(24px,5vw,64px);font-family:Georgia,serif;font-size:clamp(72px,14vw,200px);font-weight:900;color:#f59e0b;opacity:.06;line-height:.85;pointer-events:none} |
| 14 | .content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:7% 8%} |
| 15 | .title{font-family:Georgia,"Songti SC",serif;font-size:clamp(48px,10vw,130px);font-weight:900;color:#451a03;line-height:.92;letter-spacing:clamp(-2px,-.4vw,-4px);margin-bottom:clamp(6px,1vw,14px)} |
| 16 | .accent{width:clamp(50px,8vw,100px);height:3px;background:#d97706;margin-bottom:clamp(8px,1.4vw,18px)} |
| 17 | .desc{font-family:Georgia,"Songti SC",serif;font-size:clamp(11px,1.5vw,17px);color:#78350f;line-height:1.65;max-width:clamp(200px,38vw,480px)} |
| 18 | .palette{display:flex;gap:clamp(4px,.6vw,7px);margin-top:auto;padding-top:clamp(8px,1.5vw,20px)} |
| 19 | .sw{width:clamp(12px,1.8vw,20px);height:clamp(12px,1.8vw,20px);border-radius:3px;background:var(--c);border:1px solid rgba(0,0,0,.06)} |
| 20 | </style> |
| 21 | </head> |
| 22 | <body> |
| 23 | <div class="slide"> |
| 24 | <div class="watermark">BOLD</div> |
| 25 | <div class="content"> |
| 26 | <div class="title">杂志<br>大字</div> |
| 27 | <div class="accent"></div> |
| 28 | <div class="desc">奶油纸上跃动超大衬线，翻开的每一页都是封面</div> |
| 29 | <div class="palette"> |
| 30 | <i class="sw" style="--c:#451a03"></i> |
| 31 | <i class="sw" style="--c:#78350f"></i> |
| 32 | <i class="sw" style="--c:#f59e0b"></i> |
| 33 | <i class="sw" style="--c:#d97706"></i> |
| 34 | <i class="sw" style="--c:#fef3c7"></i> |
| 35 | </div> |
| 36 | </div> |
| 37 | </div> |
| 38 | </body> |
| 39 | </html> |
| 40 |