| 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; color: #5C5248; } |
| 10 | .stage { |
| 11 | width: 1600px; height: 900px; position: relative; overflow: hidden; |
| 12 | background: linear-gradient(135deg, #FBF7F2 0%, #F5EEE6 100%); |
| 13 | } |
| 14 | .soft-blob { |
| 15 | position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; |
| 16 | } |
| 17 | .b1 { width: 480px; height: 480px; top: -100px; right: -60px; background: #F4E9E8; } |
| 18 | .b2 { width: 420px; height: 420px; bottom: -120px; left: -80px; background: #A3B18A; opacity: 0.3; } |
| 19 | |
| 20 | .nav { |
| 21 | position: absolute; top: 50px; left: 80px; right: 80px; |
| 22 | display: flex; justify-content: space-between; align-items: center; |
| 23 | z-index: 5; |
| 24 | } |
| 25 | .nav .logo { |
| 26 | font-size: 24px; font-weight: 700; letter-spacing: 4px; color: #5C5248; |
| 27 | } |
| 28 | .nav .logo .dot { color: #C9A876; } |
| 29 | .nav .menu { display: flex; gap: 32px; font-size: 13px; color: #8A8078; letter-spacing: 2px; } |
| 30 | .nav .menu .active { color: #5C5248; font-weight: 600; } |
| 31 | |
| 32 | .hero { |
| 33 | position: absolute; top: 160px; left: 80px; z-index: 5; |
| 34 | max-width: 700px; |
| 35 | } |
| 36 | .hero .kicker { |
| 37 | display: inline-block; |
| 38 | background: #F4E9E8; color: #8A6058; |
| 39 | font-size: 13px; font-weight: 700; letter-spacing: 3px; |
| 40 | padding: 7px 18px; border-radius: 999px; margin-bottom: 28px; |
| 41 | } |
| 42 | .hero h1 { |
| 43 | font-size: 88px; font-weight: 700; line-height: 1.05; |
| 44 | letter-spacing: 1px; color: #5C5248; |
| 45 | } |
| 46 | .hero h1 .serif { |
| 47 | font-family: "Songti SC", serif; font-weight: 600; color: #8A6058; |
| 48 | } |
| 49 | .hero h1 .green { color: #6B7F4A; } |
| 50 | .hero .sub { |
| 51 | font-size: 19px; line-height: 1.9; color: #7A6F65; |
| 52 | margin-top: 30px; max-width: 580px; |
| 53 | } |
| 54 | .hero .actions { display: flex; gap: 16px; margin-top: 40px; } |
| 55 | .btn1 { |
| 56 | background: #5C5248; color: #FBF7F2; |
| 57 | padding: 16px 34px; border-radius: 999px; |
| 58 | font-size: 15px; font-weight: 600; letter-spacing: 2px; |
| 59 | } |
| 60 | .btn2 { |
| 61 | background: rgba(255,255,255,0.7); color: #5C5248; |
| 62 | border: 1px solid rgba(92,82,72,0.2); |
| 63 | padding: 16px 34px; border-radius: 999px; |
| 64 | font-size: 15px; font-weight: 600; letter-spacing: 2px; |
| 65 | } |
| 66 | |
| 67 | /* palette cards on the right */ |
| 68 | .palette { |
| 69 | position: absolute; top: 160px; right: 80px; z-index: 5; |
| 70 | width: 520px; |
| 71 | } |
| 72 | .palette .t { |
| 73 | font-size: 13px; letter-spacing: 4px; color: #8A8078; |
| 74 | font-weight: 600; margin-bottom: 22px; |
| 75 | } |
| 76 | .palette .t::before { content: "◆ "; color: #C9A876; } |
| 77 | .row { |
| 78 | display: flex; align-items: center; gap: 20px; |
| 79 | background: rgba(255,255,255,0.55); |
| 80 | backdrop-filter: blur(8px); |
| 81 | border-radius: 18px; |
| 82 | padding: 18px 22px; margin-bottom: 14px; |
| 83 | border: 1px solid rgba(255,255,255,0.7); |
| 84 | } |
| 85 | .row .sw { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 4px 12px rgba(92,82,72,0.08); flex-shrink: 0; } |
| 86 | .row .info { flex: 1; } |
| 87 | .row .name { font-size: 17px; font-weight: 600; color: #5C5248; } |
| 88 | .row .desc { font-size: 13px; color: #8A8078; margin-top: 3px; line-height: 1.4; } |
| 89 | .row .hex { font-size: 12px; color: #A89E94; font-family: monospace; letter-spacing: 1px; } |
| 90 | |
| 91 | .footer-strip { |
| 92 | position: absolute; bottom: 50px; left: 80px; right: 80px; z-index: 5; |
| 93 | display: flex; justify-content: space-between; align-items: flex-end; |
| 94 | padding-top: 24px; border-top: 1px dashed rgba(92,82,72,0.2); |
| 95 | } |
| 96 | .stats { display: flex; gap: 50px; } |
| 97 | .stats .s .v { font-size: 32px; font-weight: 700; color: #5C5248; line-height: 1; } |
| 98 | .stats .s .l { font-size: 11px; color: #8A8078; letter-spacing: 2px; margin-top: 6px; } |
| 99 | .badge { font-size: 12px; color: #8A8078; letter-spacing: 3px; text-align: right; } |
| 100 | .badge .b { color: #5C5248; font-weight: 700; font-size: 14px; } |
| 101 | </style> |
| 102 | </head> |
| 103 | <body> |
| 104 | <div class="stage"> |
| 105 | <div class="soft-blob b1"></div> |
| 106 | <div class="soft-blob b2"></div> |
| 107 | |
| 108 | <div class="nav"> |
| 109 | <div class="logo">LAIT<span class="dot">·</span>ON</div> |
| 110 | <div class="menu"> |
| 111 | <span class="active">HOME</span> |
| 112 | <span>COLLECTION</span> |
| 113 | <span>JOURNAL</span> |
| 114 | <span>ABOUT</span> |
| 115 | </div> |
| 116 | </div> |
| 117 | |
| 118 | <div class="hero"> |
| 119 | <span class="kicker">GENTLE · 奶油色系</span> |
| 120 | <h1>把温柔<br>揉进<span class="serif">日常</span><span class="green">。</span></h1> |
| 121 | <p class="sub">奶油白打底，豆沙粉作柔光，抹茶绿添呼吸。<br>每一处都是被温柔包裹的高级感。</p> |
| 122 | <div class="actions"> |
| 123 | <div class="btn1">探索系列 →</div> |
| 124 | <div class="btn2">查看色卡</div> |
| 125 | </div> |
| 126 | </div> |
| 127 | |
| 128 | <div class="palette"> |
| 129 | <div class="t">COLOR · 六组奶油搭配</div> |
| 130 | <div class="row"> |
| 131 | <div class="sw" style="background:#FBF7F2"></div> |
| 132 | <div class="info"><div class="name">奶油白</div><div class="desc">柔白带奶调，温柔底色</div></div> |
| 133 | <div class="hex">#FBF7F2</div> |
| 134 | </div> |
| 135 | <div class="row"> |
| 136 | <div class="sw" style="background:#F4E9E8"></div> |
| 137 | <div class="info"><div class="name">豆沙粉</div><div class="desc">低饱和粉，少女与高级并存</div></div> |
| 138 | <div class="hex">#F4E9E8</div> |
| 139 | </div> |
| 140 | <div class="row"> |
| 141 | <div class="sw" style="background:#A3B18A"></div> |
| 142 | <div class="info"><div class="name">抹茶绿</div><div class="desc">自然系暖灰绿，呼吸感十足</div></div> |
| 143 | <div class="hex">#A3B18A</div> |
| 144 | </div> |
| 145 | <div class="row"> |
| 146 | <div class="sw" style="background:#9A9488"></div> |
| 147 | <div class="info"><div class="name">暖灰绿</div><div class="desc">高级中性，搭配万能</div></div> |
| 148 | <div class="hex">#9A9488</div> |
| 149 | </div> |
| 150 | </div> |
| 151 | |
| 152 | <div class="footer-strip"> |
| 153 | <div class="stats"> |
| 154 | <div class="s"><div class="v">36</div><div class="l">SKU</div></div> |
| 155 | <div class="s"><div class="v">6 组</div><div class="l">PALETTE</div></div> |
| 156 | <div class="s"><div class="v">4.8★</div><div class="l">RATING</div></div> |
| 157 | </div> |
| 158 | <div class="badge"> |
| 159 | <div>SS26 · CREAM EDITION</div> |
| 160 | <div class="b">LAITON STUDIO · 2026</div> |
| 161 | </div> |
| 162 | </div> |
| 163 | </div> |
| 164 | </body> |
| 165 | </html> |
| 166 |