vidy
aba000b62a
- Facebook post (1080x1080): government claim angle for school admins - Instagram story (1080x1920): 5 reasons schools love Novizun - WhatsApp promo (1200x628): dark theme product spotlight - School flyer (2480x3508): A4 print flyer for teachers/admins - Shopee banner (1500x400): dark theme shop header - Facebook cover (1640x856): brand anthem cover image All rendered via headless Chrome at exact pixel dimensions.
90 lines
4.4 KiB
HTML
90 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1200">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { width: 1200px; height: 628px; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.card {
|
|
width: 1200px; height: 628px; position: relative; overflow: hidden;
|
|
background: linear-gradient(135deg, #1a1816 0%, #2a2622 100%);
|
|
display: flex;
|
|
}
|
|
/* Left content */
|
|
.left { flex: 1; padding: 56px 0 56px 64px; display: flex; flex-direction: column; justify-content: center; }
|
|
.urgency {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 6px 14px; background: rgba(201,141,29,0.2); border-radius: 999px;
|
|
font-size: 12px; font-weight: 700; color: #e6b04c; margin-bottom: 20px; width: fit-content;
|
|
}
|
|
.urgency-pulse { width: 6px; height: 6px; border-radius: 50%; background: #e6b04c; }
|
|
h1 { font-size: 42px; font-weight: 800; color: #faf9f6; line-height: 1.12; margin-bottom: 16px; letter-spacing: -0.02em; }
|
|
.highlight { color: #e6b04c; }
|
|
.desc { font-size: 16px; color: #a9a49c; line-height: 1.5; margin-bottom: 28px; max-width: 400px; }
|
|
.price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
|
|
.price { font-size: 48px; font-weight: 800; color: #e6b04c; }
|
|
.price-old { font-size: 20px; color: #6b665e; text-decoration: line-through; }
|
|
.shop-btn {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 14px 32px; background: #e6b04c; color: #1a1816;
|
|
border-radius: 12px; font-size: 16px; font-weight: 700; width: fit-content;
|
|
}
|
|
/* Right — product tiles */
|
|
.right {
|
|
width: 500px; position: relative; overflow: hidden;
|
|
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 56px 64px 56px 32px;
|
|
align-content: center;
|
|
}
|
|
.product-tile {
|
|
aspect-ratio: 1; border-radius: 24px; position: relative;
|
|
}
|
|
.pt1 { background: linear-gradient(135deg, #c98d1d 0%, #a87214 100%); }
|
|
.pt2 { background: linear-gradient(135deg, #2dbad2 0%, #1a7d8e 100%); }
|
|
.pt3 { background: linear-gradient(135deg, #f472b6 0%, #c44f8e 100%); }
|
|
.pt4 { background: linear-gradient(135deg, #a78bfa 0%, #7c5fcf 100%); }
|
|
.product-tile span {
|
|
position: absolute; bottom: 16px; left: 16px;
|
|
font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85);
|
|
background: rgba(0,0,0,0.25); backdrop-filter: blur(8px);
|
|
padding: 4px 10px; border-radius: 6px;
|
|
}
|
|
.stars { position: absolute; bottom: 20px; right: 64px; display: flex; gap: 4px; }
|
|
.star { color: #e6b04c; font-size: 18px; font-weight: 700; }
|
|
.rating-text { font-size: 14px; color: #a9a49c; font-weight: 600; }
|
|
/* Floating shapes */
|
|
.shape { position: absolute; border-radius: 50%; }
|
|
.shape-1 { width: 200px; height: 200px; background: #c98d1d; opacity: 0.08; top: -40px; right: 200px; }
|
|
.shape-2 { width: 120px; height: 120px; background: #2dbad2; opacity: 0.06; bottom: -30px; right: 100px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="shape shape-1"></div>
|
|
<div class="shape shape-2"></div>
|
|
<div class="left">
|
|
<div class="urgency"><div class="urgency-pulse"></div>NEW ARRIVAL</div>
|
|
<h1>PicassoTiles 102pc<br/>Ninja Set <span class="highlight">$89.90</span></h1>
|
|
<p class="desc">102-piece magnetic building set with 8 characters. Perfect for STEM learning at home or school.</p>
|
|
<div class="price-row">
|
|
<span class="price">$89.90</span>
|
|
</div>
|
|
<div class="shop-btn">Shop on Shopee →</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="product-tile pt1"><span>Ninja Set</span></div>
|
|
<div class="product-tile pt2"><span>Ice Castle</span></div>
|
|
<div class="product-tile pt3"><span>Character Set</span></div>
|
|
<div class="product-tile pt4"><span>Construction</span></div>
|
|
</div>
|
|
<div class="stars">
|
|
<span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span>
|
|
<span class="rating-text">4.9/5</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|