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>Fashion Home</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Hero */20 .hero {21 position: relative;22 width: 100%;23 height: 700px;24 }25 .hero-img {26 width: 100%;27 height: 100%;28 background: #E0E0E0;29 border-bottom: 1px solid #BDBDBD;30 display: flex;31 align-items: center;32 justify-content: center;33 color: #757575;34 font-size: 34px;35 letter-spacing: 0.5px;36 }37 .hero::after {38 /* soft dark gradient to improve text contrast */39 content: "";40 position: absolute;41 inset: 0;42 background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.65) 100%);43 pointer-events: none;44 }45 .hero-copy {46 position: absolute;47 left: 56px;48 bottom: 84px;49 z-index: 2;50 color: #fff;51 }52 .trend-title {53 font-family: Georgia, "Times New Roman", serif;54 font-size: 96px;55 line-height: 1.02;56 margin: 0 0 10px 0;57 letter-spacing: -1px;58 font-weight: 500;59 }60 .trend-sub {61 font-size: 34px;62 letter-spacing: 2px;63 opacity: 0.95;64 }65 66 /* Products row */67 .products {68 padding: 36px 36px 24px;69 display: flex;70 align-items: flex-start;71 justify-content: space-between;72 gap: 24px;73 }74 .product {75 width: 320px;76 text-align: center;77 }78 .prod-img {79 width: 320px;80 height: 520px;81 background: #E0E0E0;82 border: 1px solid #BDBDBD;83 display: flex;84 align-items: center;85 justify-content: center;86 color: #757575;87 font-size: 28px;88 }89 .prod-title {90 margin: 26px 0 8px;91 font-size: 44px;92 font-weight: 400;93 color: #111;94 }95 .prod-price {96 font-size: 38px;97 color: #333;98 }99 100 /* Section heading */101 .section-heading {102 font-family: Georgia, "Times New Roman", serif;103 font-size: 92px;104 margin: 34px 0 22px 56px;105 font-weight: 600;106 letter-spacing: -0.5px;107 color: #111;108 }109 110 /* Featured grid */111 .featured {112 display: grid;113 grid-template-columns: 1fr 1fr;114 column-gap: 26px;115 padding: 0 36px;116 }117 .feat-card .feat-img {118 width: 100%;119 height: 720px;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 display: flex;123 align-items: center;124 justify-content: center;125 color: #757575;126 font-size: 30px;127 }128 129 /* Bottom navigation */130 .tabbar {131 position: absolute;132 left: 0;133 right: 0;134 bottom: 0;135 height: 184px;136 background: #fff;137 border-top: 1px solid #EAEAEA;138 display: flex;139 justify-content: space-around;140 align-items: center;141 padding-bottom: 32px; /* space above home indicator */142 }143 .tab {144 width: 25%;145 display: flex;146 flex-direction: column;147 align-items: center;148 gap: 14px;149 color: #9E9E9E;150 font-size: 32px;151 }152 .tab.active { color: #111; }153 .tab svg {154 width: 56px;155 height: 56px;156 stroke-width: 2.5;157 }158 .bag-badge {159 position: absolute;160 top: -6px;161 right: -14px;162 width: 36px;163 height: 36px;164 background: #111;165 color: #fff;166 font-size: 24px;167 border-radius: 50%;168 display: flex;169 align-items: center;170 justify-content: center;171 }172 173 /* Home indicator */174 .home-indicator {175 position: absolute;176 left: 50%;177 transform: translateX(-50%);178 bottom: 14px;179 width: 200px;180 height: 10px;181 background: #000;182 opacity: 0.7;183 border-radius: 6px;184 }185</style>186</head>187<body>188<div id="render-target">189 <!-- Hero banner -->190 <section class="hero">191 <div class="hero-img">[IMG: Fashion hero - model with oversized yellow coat]</div>192 <div class="hero-copy">193 <h1 class="trend-title">The Trend Edit</h1>194 <div class="trend-sub">FALL TRENDS WE'RE LOVING ></div>195 </div>196 </section>197 198 <!-- Products row -->199 <section class="products">200 <div class="product">201 <div class="prod-img">[IMG: Co-ord Set]</div>202 <div class="prod-title">Co-ord Set</div>203 <div class="prod-price">₹1,790</div>204 </div>205 <div class="product">206 <div class="prod-img">[IMG: Lace Up A-Line Dress]</div>207 <div class="prod-title">Lace Up A-Line</div>208 <div class="prod-price">₹1,990</div>209 </div>210 <div class="product">211 <div class="prod-img">[IMG: Color Block Knit + Cargo Pants]</div>212 <div class="prod-title">Color Block Knit</div>213 <div class="prod-price">₹1,390</div>214 </div>215 </section>216 217 <!-- Recommendation heading -->218 <h2 class="section-heading">You might also like</h2>219 220 <!-- Featured two-up -->221 <section class="featured">222 <div class="feat-card">223 <div class="feat-img">[IMG: Brown striped sweater with shorts]</div>224 </div>225 <div class="feat-card">226 <div class="feat-img">[IMG: Green cardigan with jeans]</div>227 </div>228 </section>229 230 <!-- Bottom Tab Bar -->231 <nav class="tabbar">232 <div class="tab active">233 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">234 <path d="M3 10.5l9-7 9 7v9.5a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z"/>235 </svg>236 <div>Home</div>237 </div>238 <div class="tab">239 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">240 <circle cx="11" cy="11" r="7"/>241 <path d="M20 20l-3.5-3.5"/>242 </svg>243 <div>Menu</div>244 </div>245 <div class="tab" style="position: relative;">246 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">247 <path d="M6 8l1-3h10l1 3"/>248 <rect x="5" y="8" width="14" height="12" rx="2" ry="2"/>249 </svg>250 <div class="bag-badge">1</div>251 <div>Bag</div>252 </div>253 <div class="tab">254 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">255 <circle cx="12" cy="8" r="4"/>256 <path d="M4 21c1.5-4 6-6 8-6s6.5 2 8 6"/>257 </svg>258 <div>Me</div>259 </div>260 </nav>261 262 <div class="home-indicator"></div>263</div>264</body>265</html>