GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Estée Lauder Promo</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Common */18 .navy { background:#0c1633; color:#ffffff; }19 .row { display:flex; align-items:center; }20 .center { display:flex; justify-content:center; align-items:center; }21 .underline { text-decoration: underline; }22 .divider { width:1px; height:24px; background:#8ea0c2; margin: 0 28px; opacity:0.5; }23 24 /* Status bar */25 .status-bar {26 position:absolute; top:0; left:0; width:100%; height:80px; background:#000; color:#fff;27 padding:0 30px; box-sizing:border-box; font-family: Arial, Helvetica, sans-serif;28 font-size:32px;29 }30 .status-bar .right { margin-left:auto; gap:18px; }31 /* Top promo banner */32 .promo {33 position:absolute; top:80px; left:0; width:100%; height:160px; box-sizing:border-box;34 padding:0 80px;35 font-family: Arial, Helvetica, sans-serif;36 letter-spacing:0.5px;37 }38 .promo .text { font-size:42px; font-weight:600; }39 .promo .link { font-size:40px; margin-left:20px; }40 .promo .chev { position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px; }41 .promo .chev.left { left:18px; }42 .promo .chev.right { right:18px; }43 .promo svg { width:60px; height:60px; }44 45 /* Header */46 .header {47 position:absolute; top:240px; left:0; width:100%; height:140px; background:#fff;48 border-bottom: 1px solid #e6e8ee;49 padding:0 40px; box-sizing:border-box;50 }51 .header .brand {52 font-family: "Georgia", "Times New Roman", serif;53 font-size:72px; letter-spacing:6px; color:#1a2236;54 }55 .header .left, .header .right { gap:38px; }56 .header svg { width:58px; height:58px; }57 .header .signin { font-size:34px; color:#1a2236; font-family: Arial, Helvetica, sans-serif; }58 59 /* Hero image */60 .hero {61 position:absolute; top:380px; left:0; width:100%; height:900px;62 }63 .img-box {64 width:100%; height:100%;65 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;66 font-family: Arial, Helvetica, sans-serif; font-size:40px;67 }68 .hero .overlay {69 position:absolute; bottom:40px; left:0; width:100%;70 text-align:center; color:#ffffff;71 font-family: Arial, Helvetica, sans-serif;72 }73 .hero .overlay .top { font-weight:700; letter-spacing:1px; font-size:34px; text-transform:uppercase; }74 .hero .overlay .sub { font-size:36px; margin-top:6px; }75 76 /* Content section */77 .content {78 position:absolute; top:1280px; left:0; width:100%; height:860px; background:#fff;79 padding:70px 80px; box-sizing:border-box; text-align:center;80 color:#1a2236;81 }82 .content .kicker {83 font-family: Arial, Helvetica, sans-serif; font-weight:800; letter-spacing:3px;84 font-size:40px; text-transform:uppercase;85 }86 .content .headline {87 font-family: "Georgia", "Times New Roman", serif;88 font-size:96px; line-height:1.05; margin-top:36px;89 }90 .content .subline {91 font-family: "Georgia", "Times New Roman", serif;92 font-size:56px; color:#3a4258; margin-top:30px;93 }94 .content .value {95 font-family: Arial, Helvetica, sans-serif; font-size:48px; font-weight:800; margin-top:60px;96 }97 .content .price {98 font-family: Arial, Helvetica, sans-serif; font-size:42px; color:#3a4258; margin-top:16px;99 }100 101 /* CTA section */102 .cta {103 position:absolute; top:2140px; left:0; width:100%; height:220px; background:#0c1633; color:#fff;104 box-sizing:border-box; padding:24px 40px;105 }106 .cta .button {107 width:100%; height:110px; border:2px solid #ffffff; border-radius:8px;108 font-family: Arial, Helvetica, sans-serif; font-size:48px; font-weight:800; letter-spacing:3px;109 }110 .cta .links {111 margin-top:26px; width:100%; display:flex; align-items:center; justify-content:center;112 font-family: Arial, Helvetica, sans-serif; font-size:36px; letter-spacing:3px; color:#cdd4e8;113 }114 .cta .links span { padding:0 4px; }115 116 /* Home indicator */117 .home-indicator {118 position:absolute; bottom:20px; left:50%; transform:translateX(-50%);119 width:260px; height:18px; border-radius:9px; background:#cfcfcf; opacity:0.9;120 }121 122 /* Simple button hover (visual only) */123 .button:hover { background:rgba(255,255,255,0.08); }124</style>125</head>126<body>127<div id="render-target">128 129 <!-- Status bar -->130 <div class="status-bar row">131 <div>10:52</div>132 <div class="right row">133 <!-- placeholders for status icons -->134 <span>80°</span>135 <span>•</span>136 <span>▭</span>137 <span>🔋</span>138 </div>139 </div>140 141 <!-- Promo banner -->142 <div class="promo navy row">143 <div class="chev left">144 <svg viewBox="0 0 24 24" fill="none">145 <path d="M15 4 L7 12 L15 20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>146 </svg>147 </div>148 <div class="text">Shop Now & Pay Later with Afterpay</div>149 <div class="link underline">Learn More</div>150 <div class="chev right">151 <svg viewBox="0 0 24 24" fill="none">152 <path d="M9 4 L17 12 L9 20" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>153 </svg>154 </div>155 </div>156 157 <!-- Header -->158 <div class="header row">159 <div class="left row">160 <!-- Menu icon -->161 <svg viewBox="0 0 24 24" stroke="#1a2236" fill="none">162 <path d="M3 6 H21 M3 12 H21 M3 18 H21" stroke-width="2" stroke-linecap="round"/>163 </svg>164 <!-- Search icon -->165 <svg viewBox="0 0 24 24" stroke="#1a2236" fill="none">166 <circle cx="11" cy="11" r="7" stroke-width="2"/>167 <path d="M20 20 L16 16" stroke-width="2" stroke-linecap="round"/>168 </svg>169 </div>170 <div class="center" style="flex:1;">171 <div class="brand">ESTÉE LAUDER</div>172 </div>173 <div class="right row">174 <div class="signin">SIGN IN</div>175 <!-- Bag icon -->176 <svg viewBox="0 0 24 24" stroke="#1a2236" fill="none">177 <path d="M6 9 H18 V20 H6 Z" stroke-width="2"/>178 <path d="M8 9 C8 6 10 4 12 4 C14 4 16 6 16 9" stroke-width="2" stroke-linecap="round"/>179 </svg>180 </div>181 </div>182 183 <!-- Hero image -->184 <div class="hero">185 <div class="img-box center">[IMG: Estee Lauder holiday gift set on blue background]</div>186 <div class="overlay">187 <div class="top">Choose Your Look</div>188 <div class="sub">Celestial Glow</div>189 </div>190 </div>191 192 <!-- Content block -->193 <div class="content">194 <div class="kicker">LIMITED EDITION</div>195 <div class="headline">11 Full-Size Favorites<br>& More</div>196 <div class="subline">for the Price of One<br>Full-Size Advanced Night Repair*</div>197 <div class="value">A $615 Value</div>198 <div class="price">$85 with any purchase**</div>199 </div>200 201 <!-- CTA Section -->202 <div class="cta">203 <div class="button center">SHOP NOW</div>204 <div class="links">205 <span>LIVE CHAT</span>206 <div class="divider"></div>207 <span>JOIN LOYALTY</span>208 <div class="divider"></div>209 <span>OFFERS</span>210 </div>211 </div>212 213 <!-- Home indicator -->214 <div class="home-indicator"></div>215 216</div>217</body>218</html>