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.
79 lines
4.0 KiB
HTML
79 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1500">
|
|
<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: 1500px; height: 400px; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.banner {
|
|
width: 1500px; height: 400px; position: relative; overflow: hidden;
|
|
background: linear-gradient(135deg, #1a1816 0%, #2d2a26 60%, #1a1816 100%);
|
|
display: flex; align-items: center;
|
|
}
|
|
/* Tile decorations */
|
|
.tiles { position: absolute; right: 0; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; padding: 12px; opacity: 0.08; }
|
|
.tiles div { border-radius: 12px; }
|
|
.tiles div:nth-child(1) { background: #c98d1d; } .tiles div:nth-child(2) { background: #2dbad2; }
|
|
.tiles div:nth-child(3) { background: #f472b6; } .tiles div:nth-child(4) { background: #a78bfa; }
|
|
.tiles div:nth-child(5) { background: #fbbf24; } .tiles div:nth-child(6) { background: #34d399; }
|
|
.tiles div:nth-child(7) { background: #c98d1d; } .tiles div:nth-child(8) { background: #2dbad2; }
|
|
.tiles div:nth-child(9) { background: #f472b6; } .tiles div:nth-child(10) { background: #a78bfa; }
|
|
/* Content */
|
|
.content { position: relative; z-index: 2; padding: 0 80px; display: flex; align-items: center; gap: 64px; width: 100%; }
|
|
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
|
|
.logo-icon { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 48px; height: 48px; }
|
|
.logo-icon div { border-radius: 8px; }
|
|
.li1 { background: rgba(230,176,76,0.9); } .li2 { background: rgba(45,186,210,0.7); }
|
|
.li3 { background: rgba(230,176,76,0.5); } .li4 { background: rgba(45,186,210,0.8); }
|
|
.logo-text { font-size: 28px; font-weight: 700; color: #faf9f6; white-space: nowrap; }
|
|
.divider { width: 1px; height: 64px; background: rgba(255,255,255,0.15); flex-shrink: 0; }
|
|
.tagline { flex: 1; }
|
|
.tagline h2 { font-size: 20px; font-weight: 600; color: #faf9f6; margin-bottom: 4px; }
|
|
.tagline p { font-size: 14px; color: #918c84; }
|
|
.badges { display: flex; gap: 10px; flex-shrink: 0; }
|
|
.sm-badge {
|
|
padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
}
|
|
.sm-badge--amber { background: rgba(201,141,29,0.2); color: #e6b04c; }
|
|
.sm-badge--teal { background: rgba(45,186,210,0.2); color: #6ccee0; }
|
|
.sm-badge--white { background: rgba(255,255,255,0.08); color: #dcd9d5; }
|
|
/* CTA */
|
|
.shop-btn {
|
|
padding: 12px 28px; background: #e6b04c; color: #1a1816;
|
|
border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="banner">
|
|
<div class="tiles">
|
|
<div></div><div></div><div></div><div></div><div></div>
|
|
<div></div><div></div><div></div><div></div><div></div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="logo">
|
|
<div class="logo-icon"><div class="li1"></div><div class="li2"></div><div class="li3"></div><div class="li4"></div></div>
|
|
<span class="logo-text">Novizun</span>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="tagline">
|
|
<h2>Singapore's trusted STEM toy vendor — authentic PicassoTiles & Play-Doh</h2>
|
|
<p>GeBIZ registered · Tax invoices with UEN · 100% authentic</p>
|
|
</div>
|
|
<div class="badges">
|
|
<span class="sm-badge sm-badge--amber">4.9★ Shopee</span>
|
|
<span class="sm-badge sm-badge--teal">15+ Schools</span>
|
|
<span class="sm-badge sm-badge--white">MOE Claims</span>
|
|
</div>
|
|
<span class="shop-btn">Shop Now →</span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|