| 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", sans-serif; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | } |
| 13 | .top { |
| 14 | position: absolute; top: 0; left: 0; width: 1600px; height: 560px; |
| 15 | background: #A299F4; |
| 16 | } |
| 17 | .bottom { |
| 18 | position: absolute; bottom: 0; left: 0; width: 1600px; height: 340px; |
| 19 | background: #CCEC6D; |
| 20 | } |
| 21 | /* center diamond */ |
| 22 | .diamond { |
| 23 | position: absolute; |
| 24 | top: 50%; left: 50%; |
| 25 | transform: translate(-50%, -50%) rotate(45deg); |
| 26 | width: 300px; height: 300px; |
| 27 | background: #F454AE; |
| 28 | border-radius: 32px; |
| 29 | box-shadow: 0 20px 60px rgba(244,84,174,0.45); |
| 30 | } |
| 31 | .title { |
| 32 | position: absolute; |
| 33 | top: 150px; left: 100px; |
| 34 | color: #FFFFFF; |
| 35 | z-index: 5; |
| 36 | } |
| 37 | .title .kicker { |
| 38 | font-size: 18px; font-weight: 700; letter-spacing: 6px; |
| 39 | background: #000000; color: #CCEC6D; |
| 40 | padding: 6px 16px; border-radius: 999px; |
| 41 | display: inline-block; margin-bottom: 22px; |
| 42 | } |
| 43 | .title h1 { |
| 44 | font-size: 110px; font-weight: 900; line-height: 0.95; |
| 45 | letter-spacing: -3px; |
| 46 | } |
| 47 | .title h1 .accent { color: #CCEC6D; } |
| 48 | .title .sub { |
| 49 | font-size: 24px; font-weight: 500; margin-top: 18px; |
| 50 | opacity: 0.95; max-width: 620px; |
| 51 | } |
| 52 | /* dots */ |
| 53 | .dots { |
| 54 | position: absolute; top: 120px; right: 110px; |
| 55 | display: grid; grid-template-columns: repeat(6, 14px); gap: 18px; |
| 56 | z-index: 4; |
| 57 | } |
| 58 | .dots i { |
| 59 | width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; opacity: 0.55; |
| 60 | } |
| 61 | .bottom-content { |
| 62 | position: absolute; bottom: 70px; left: 100px; right: 100px; |
| 63 | display: flex; gap: 40px; z-index: 5; |
| 64 | } |
| 65 | .pill { |
| 66 | background: #000000; color: #FFFFFF; |
| 67 | padding: 26px 36px; border-radius: 28px; |
| 68 | flex: 1; |
| 69 | } |
| 70 | .pill .num { font-size: 56px; font-weight: 900; line-height: 1; color: #F454AE; } |
| 71 | .pill .lbl { font-size: 16px; font-weight: 600; margin-top: 10px; color: #CCEC6D; letter-spacing: 1px; } |
| 72 | .pill .desc { font-size: 14px; color: #FFFFFF; opacity: 0.8; margin-top: 8px; line-height: 1.5; } |
| 73 | .stamp { |
| 74 | position: absolute; top: 60px; right: 90px; z-index: 6; |
| 75 | background: #FFFFFF; color: #F454AE; |
| 76 | font-size: 16px; font-weight: 800; |
| 77 | padding: 12px 22px; border-radius: 999px; |
| 78 | transform: rotate(6deg); |
| 79 | box-shadow: 0 8px 24px rgba(0,0,0,0.15); |
| 80 | } |
| 81 | .wave { |
| 82 | position: absolute; bottom: 340px; left: 0; width: 1600px; height: 24px; |
| 83 | background: |
| 84 | radial-gradient(circle at 12px 0, #FFFFFF 12px, transparent 13px) repeat-x; |
| 85 | background-size: 24px 24px; |
| 86 | z-index: 3; |
| 87 | } |
| 88 | </style> |
| 89 | </head> |
| 90 | <body> |
| 91 | <div class="stage"> |
| 92 | <div class="top"></div> |
| 93 | <div class="bottom"></div> |
| 94 | <div class="wave"></div> |
| 95 | <div class="diamond"></div> |
| 96 | |
| 97 | <div class="stamp">✦ NEW DROP / SS26</div> |
| 98 | |
| 99 | <div class="dots"> |
| 100 | <i></i><i></i><i></i><i></i><i></i><i></i> |
| 101 | <i></i><i></i><i></i><i></i><i></i><i></i> |
| 102 | <i></i><i></i><i></i><i></i><i></i><i></i> |
| 103 | <i></i><i></i><i></i><i></i><i></i><i></i> |
| 104 | </div> |
| 105 | |
| 106 | <div class="title"> |
| 107 | <span class="kicker">YOUTH BRAND · 2026</span> |
| 108 | <h1>快乐<br><span class="accent">不要克制</span></h1> |
| 109 | <p class="sub">把多巴胺穿在身上，让每一次出街都自带 BGM。新品季全线上新，限量首发。</p> |
| 110 | </div> |
| 111 | |
| 112 | <div class="bottom-content"> |
| 113 | <div class="pill"> |
| 114 | <div class="num">+218%</div> |
| 115 | <div class="lbl">SOCIAL BUZZ</div> |
| 116 | <div class="desc">话题阅读量同比翻倍</div> |
| 117 | </div> |
| 118 | <div class="pill"> |
| 119 | <div class="num">36 SKU</div> |
| 120 | <div class="lbl">NEW ARRIVAL</div> |
| 121 | <div class="desc">本月上新色系 36 款</div> |
| 122 | </div> |
| 123 | <div class="pill"> |
| 124 | <div class="num">5.2万</div> |
| 125 | <div class="lbl">WAITING LIST</div> |
| 126 | <div class="desc">首发预约已破五万</div> |
| 127 | </div> |
| 128 | </div> |
| 129 | </div> |
| 130 | </body> |
| 131 | </html> |
| 132 |