| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh"> |
| 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; } |
| 9 | body { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; } |
| 10 | .stage { width: 1600px; height: 900px; position: relative; overflow: hidden; background: #FFE470; } |
| 11 | |
| 12 | .left-block { |
| 13 | position: absolute; top: 0; left: 0; width: 620px; height: 900px; |
| 14 | background: #0B2299; |
| 15 | clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); |
| 16 | } |
| 17 | .stripe { |
| 18 | position: absolute; top: 0; left: 580px; width: 14px; height: 900px; |
| 19 | background: repeating-linear-gradient(45deg, #0B2299 0 10px, transparent 10px 20px); |
| 20 | opacity: 0.5; |
| 21 | } |
| 22 | .circles { |
| 23 | position: absolute; top: 80px; right: 80px; |
| 24 | display: grid; grid-template-columns: repeat(4, 28px); gap: 16px; |
| 25 | } |
| 26 | .circles i { width: 28px; height: 28px; border-radius: 50%; background: #0B2299; opacity: 0.85; } |
| 27 | .circles i:nth-child(odd) { background: #FFFFFF; } |
| 28 | |
| 29 | .brand { |
| 30 | position: absolute; top: 70px; left: 70px; color: #FFE470; |
| 31 | font-size: 16px; font-weight: 800; letter-spacing: 5px; z-index: 5; |
| 32 | } |
| 33 | .brand::before { content: "◆"; margin-right: 10px; } |
| 34 | |
| 35 | .title { |
| 36 | position: absolute; top: 220px; left: 70px; z-index: 5; color: #FFFFFF; |
| 37 | max-width: 520px; |
| 38 | } |
| 39 | .title .kicker { |
| 40 | display: inline-block; background: #FFE470; color: #0B2299; |
| 41 | font-size: 14px; font-weight: 800; letter-spacing: 3px; |
| 42 | padding: 8px 16px; border-radius: 4px; margin-bottom: 28px; |
| 43 | } |
| 44 | .title h1 { |
| 45 | font-size: 88px; font-weight: 900; line-height: 0.98; |
| 46 | letter-spacing: -2px; |
| 47 | } |
| 48 | .title h1 .y { color: #FFE470; } |
| 49 | .title .sub { |
| 50 | font-size: 18px; font-weight: 400; margin-top: 24px; |
| 51 | opacity: 0.85; line-height: 1.7; max-width: 460px; |
| 52 | } |
| 53 | |
| 54 | .main { |
| 55 | position: absolute; top: 200px; left: 740px; right: 80px; z-index: 5; |
| 56 | } |
| 57 | .main h2 { |
| 58 | font-size: 110px; font-weight: 900; color: #0B2299; |
| 59 | line-height: 0.92; letter-spacing: -3px; |
| 60 | } |
| 61 | .main h2 span { display: block; } |
| 62 | .main .lead { |
| 63 | font-size: 22px; color: #0B2299; font-weight: 500; |
| 64 | margin-top: 30px; line-height: 1.6; max-width: 680px; |
| 65 | } |
| 66 | |
| 67 | .grid { |
| 68 | position: absolute; bottom: 80px; left: 740px; right: 80px; |
| 69 | display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; |
| 70 | } |
| 71 | .cell { |
| 72 | background: #0B2299; color: #FFFFFF; |
| 73 | padding: 24px 22px; border-radius: 8px; |
| 74 | } |
| 75 | .cell .v { font-size: 44px; font-weight: 900; color: #FFE470; line-height: 1; } |
| 76 | .cell .l { font-size: 12px; font-weight: 700; letter-spacing: 2px; margin-top: 8px; opacity: 0.85; } |
| 77 | .cell .d { font-size: 13px; margin-top: 6px; opacity: 0.7; line-height: 1.4; } |
| 78 | |
| 79 | .tag-rotate { |
| 80 | position: absolute; bottom: 80px; left: 70px; z-index: 5; |
| 81 | background: #FFE470; color: #0B2299; |
| 82 | font-size: 14px; font-weight: 800; letter-spacing: 2px; |
| 83 | padding: 10px 18px; border-radius: 4px; |
| 84 | transform: rotate(-4deg); |
| 85 | } |
| 86 | </style> |
| 87 | </head> |
| 88 | <body> |
| 89 | <div class="stage"> |
| 90 | <div class="left-block"></div> |
| 91 | <div class="stripe"></div> |
| 92 | <div class="circles"> |
| 93 | <i></i><i></i><i></i><i></i> |
| 94 | <i></i><i></i><i></i><i></i> |
| 95 | </div> |
| 96 | |
| 97 | <div class="brand">PULSE · LAUNCH 2026</div> |
| 98 | |
| 99 | <div class="title"> |
| 100 | <span class="kicker">NEW PRODUCT</span> |
| 101 | <h1>把阳光<br>装进<span class="y">未来</span></h1> |
| 102 | <p class="sub">钴蓝筑基，明黄燃场。<br>专业感与活力感的精准对撞。</p> |
| 103 | </div> |
| 104 | |
| 105 | <div class="main"> |
| 106 | <h2> |
| 107 | <span>POWER</span> |
| 108 | <span>WITH</span> |
| 109 | <span>PULSE.</span> |
| 110 | </h2> |
| 111 | <p class="lead">为下一代创作者打造的全栈协作平台，性能 ×3，延迟 ÷4，让每一次灵感都能即时落地。</p> |
| 112 | </div> |
| 113 | |
| 114 | <div class="grid"> |
| 115 | <div class="cell"><div class="v">3.2×</div><div class="l">SPEED</div><div class="d">渲染提速</div></div> |
| 116 | <div class="cell"><div class="v">98ms</div><div class="l">LATENCY</div><div class="d">端到端延迟</div></div> |
| 117 | <div class="cell"><div class="v">12万</div><div class="l">USERS</div><div class="d">月活创作者</div></div> |
| 118 | </div> |
| 119 | |
| 120 | <div class="tag-rotate">★ EARLY ACCESS OPEN</div> |
| 121 | </div> |
| 122 | </body> |
| 123 | </html> |
| 124 |