| 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 | background: |
| 13 | radial-gradient(ellipse at 15% 25%, #8FD9D5 0%, transparent 50%), |
| 14 | radial-gradient(ellipse at 85% 15%, #C0B0E8 0%, transparent 50%), |
| 15 | radial-gradient(ellipse at 75% 85%, #FFC2B0 0%, transparent 50%), |
| 16 | linear-gradient(135deg, #FBF5F0 0%, #F5EEF5 100%); |
| 17 | } |
| 18 | /* mist overlay */ |
| 19 | .stage::before { |
| 20 | content: ""; position: absolute; inset: 0; |
| 21 | background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(251,245,240,0.4) 100%); |
| 22 | } |
| 23 | |
| 24 | .nav { |
| 25 | position: absolute; top: 50px; left: 80px; right: 80px; |
| 26 | display: flex; justify-content: space-between; align-items: center; |
| 27 | z-index: 5; |
| 28 | } |
| 29 | .nav .logo { |
| 30 | font-size: 24px; font-weight: 800; letter-spacing: 3px; color: #6B5A8A; |
| 31 | } |
| 32 | .nav .logo::before { content: "●"; color: #FFC2B0; margin-right: 10px; } |
| 33 | .nav .menu { display: flex; gap: 32px; font-size: 13px; color: #8A8090; letter-spacing: 2px; } |
| 34 | .nav .menu .active { color: #6B5A8A; font-weight: 700; } |
| 35 | |
| 36 | .hero { |
| 37 | position: absolute; top: 150px; left: 80px; z-index: 5; |
| 38 | max-width: 720px; |
| 39 | } |
| 40 | .hero .kicker { |
| 41 | display: inline-block; |
| 42 | background: #C0B0E8; color: #FFFFFF; |
| 43 | font-size: 13px; font-weight: 700; letter-spacing: 4px; |
| 44 | padding: 8px 18px; border-radius: 999px; margin-bottom: 26px; |
| 45 | box-shadow: 0 6px 18px rgba(192,176,232,0.4); |
| 46 | } |
| 47 | .hero h1 { |
| 48 | font-size: 96px; font-weight: 800; line-height: 1.02; |
| 49 | letter-spacing: 2px; color: #6B5A8A; |
| 50 | } |
| 51 | .hero h1 .mint { color: #5BB8B4; } |
| 52 | .hero h1 .coral { color: #E89A86; } |
| 53 | .hero .sub { |
| 54 | font-size: 20px; line-height: 1.8; color: #8A8090; |
| 55 | margin-top: 28px; max-width: 560px; |
| 56 | } |
| 57 | .hero .actions { display: flex; gap: 16px; margin-top: 40px; } |
| 58 | .btn1 { |
| 59 | background: #8FD9D5; color: #FFFFFF; |
| 60 | padding: 16px 34px; border-radius: 999px; |
| 61 | font-size: 15px; font-weight: 700; letter-spacing: 2px; |
| 62 | box-shadow: 0 8px 22px rgba(143,217,213,0.5); |
| 63 | } |
| 64 | .btn2 { |
| 65 | background: rgba(255,255,255,0.7); color: #6B5A8A; |
| 66 | border: 1px solid rgba(192,176,232,0.4); |
| 67 | padding: 16px 34px; border-radius: 999px; |
| 68 | font-size: 15px; font-weight: 700; letter-spacing: 2px; |
| 69 | } |
| 70 | |
| 71 | /* macaron cards on the right */ |
| 72 | .macarons { |
| 73 | position: absolute; top: 150px; right: 80px; z-index: 5; |
| 74 | width: 560px; height: 600px; |
| 75 | } |
| 76 | .mac { |
| 77 | position: absolute; border-radius: 50%; |
| 78 | box-shadow: 0 16px 36px rgba(0,0,0,0.1); |
| 79 | display: flex; flex-direction: column; |
| 80 | align-items: center; justify-content: center; |
| 81 | color: #FFFFFF; text-align: center; |
| 82 | } |
| 83 | .mac::before { |
| 84 | content: ""; position: absolute; top: 50%; left: 8%; right: 8%; height: 8px; |
| 85 | background: rgba(255,255,255,0.5); border-radius: 4px; |
| 86 | transform: translateY(-50%); |
| 87 | } |
| 88 | .mac .name { font-size: 22px; font-weight: 800; letter-spacing: 2px; z-index: 2; } |
| 89 | .mac .hex { font-size: 12px; opacity: 0.85; margin-top: 4px; letter-spacing: 1px; z-index: 2; font-family: monospace; } |
| 90 | |
| 91 | .m1 { width: 240px; height: 240px; top: 0; right: 0; background: #8FD9D5; } |
| 92 | .m2 { width: 200px; height: 200px; top: 60px; left: 0; background: #FFC2B0; } |
| 93 | .m3 { width: 220px; height: 220px; bottom: 60px; right: 60px; background: #C0B0E8; } |
| 94 | .m4 { width: 170px; height: 170px; bottom: 0; left: 30px; background: #F0D8E0; } |
| 95 | .m1 .name, .m1 .hex { color: #FFFFFF; } |
| 96 | .m2 .name, .m2 .hex { color: #C26A52; } |
| 97 | .m3 .name, .m3 .hex { color: #FFFFFF; } |
| 98 | .m4 .name, .m4 .hex { color: #A05870; } |
| 99 | |
| 100 | /* sparkles */ |
| 101 | .spark { position: absolute; color: #FFFFFF; font-size: 18px; opacity: 0.8; } |
| 102 | .s1{top:120px;left:380px}.s2{top:300px;right:30px}.s3{bottom:200px;left:250px;font-size:14px} |
| 103 | .s4{top:450px;right:200px;font-size:14px}.s5{bottom:120px;right:340px;font-size:20px} |
| 104 | |
| 105 | .bottom-bar { |
| 106 | position: absolute; bottom: 50px; left: 80px; right: 80px; z-index: 5; |
| 107 | display: flex; justify-content: space-between; align-items: flex-end; |
| 108 | padding-top: 24px; border-top: 1px dashed rgba(143,217,213,0.5); |
| 109 | } |
| 110 | .stats { display: flex; gap: 50px; } |
| 111 | .stats .s .v { font-size: 32px; font-weight: 800; color: #6B5A8A; line-height: 1; } |
| 112 | .stats .s .l { font-size: 11px; color: #8A8090; letter-spacing: 2px; margin-top: 6px; } |
| 113 | .badge { font-size: 12px; color: #8A8090; letter-spacing: 3px; text-align: right; } |
| 114 | .badge .b { color: #6B5A8A; font-weight: 700; font-size: 14px; } |
| 115 | </style> |
| 116 | </head> |
| 117 | <body> |
| 118 | <div class="stage"> |
| 119 | <div class="spark s1">✦</div> |
| 120 | <div class="spark s2">✧</div> |
| 121 | <div class="spark s3">✦</div> |
| 122 | <div class="spark s4">✧</div> |
| 123 | <div class="spark s5">✦</div> |
| 124 | |
| 125 | <div class="nav"> |
| 126 | <div class="logo">DOUCEUR</div> |
| 127 | <div class="menu"> |
| 128 | <span class="active">HOME</span> |
| 129 | <span>SHOP</span> |
| 130 | <span>FLAVORS</span> |
| 131 | <span>ABOUT</span> |
| 132 | </div> |
| 133 | </div> |
| 134 | |
| 135 | <div class="hero"> |
| 136 | <span class="kicker">DREAMY · 柔雾甜品</span> |
| 137 | <h1>云朵般<br><span class="coral">软糯</span>的<span class="mint">甜</span></h1> |
| 138 | <p class="sub">薄荷、珊瑚、薰衣草——三色柔雾，<br>像把一口云朵含在嘴里，慢慢化开。</p> |
| 139 | <div class="actions"> |
| 140 | <div class="btn1">选购礼盒 →</div> |
| 141 | <div class="btn2">查看口味</div> |
| 142 | </div> |
| 143 | </div> |
| 144 | |
| 145 | <div class="macarons"> |
| 146 | <div class="mac m1"><div class="name">薄荷</div><div class="hex">#8FD9D5</div></div> |
| 147 | <div class="mac m2"><div class="name">珊瑚</div><div class="hex">#FFC2B0</div></div> |
| 148 | <div class="mac m3"><div class="name">薰衣草</div><div class="hex">#C0B0E8</div></div> |
| 149 | <div class="mac m4"><div class="name">樱花</div><div class="hex">#F0D8E0</div></div> |
| 150 | </div> |
| 151 | |
| 152 | <div class="bottom-bar"> |
| 153 | <div class="stats"> |
| 154 | <div class="s"><div class="v">12</div><div class="l">FLAVORS</div></div> |
| 155 | <div class="s"><div class="v">100%</div><div class="l">HANDMADE</div></div> |
| 156 | <div class="s"><div class="v">4.9★</div><div class="l">RATING</div></div> |
| 157 | </div> |
| 158 | <div class="badge"> |
| 159 | <div>SS26 · PASTEL EDITION</div> |
| 160 | <div class="b">DOUCEUR STUDIO · 2026</div> |
| 161 | </div> |
| 162 | </div> |
| 163 | </div> |
| 164 | </body> |
| 165 | </html> |
| 166 |