- 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.
111 lines
4.8 KiB
HTML
111 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1080">
|
|
<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=Instrument+Serif:ital@0;1&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: 1080px; height: 1080px; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; background: #faf9f6; }
|
|
.card {
|
|
width: 1080px; height: 1080px; position: relative; overflow: hidden;
|
|
background: linear-gradient(160deg, #fff8ee 0%, #faf9f6 40%, #f0fbfc 100%);
|
|
}
|
|
/* Decorative tiles */
|
|
.tile-grid {
|
|
position: absolute; top: 0; right: 0; width: 420px; height: 420px;
|
|
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 12px;
|
|
opacity: 0.15;
|
|
}
|
|
.tile { border-radius: 16px; }
|
|
.t1 { background: #c98d1d; }
|
|
.t2 { background: #2dbad2; }
|
|
.t3 { background: #f472b6; }
|
|
.t4 { background: #a78bfa; }
|
|
.t5 { background: #c98d1d; opacity: 0.5; }
|
|
.t6 { background: #2dbad2; opacity: 0.5; }
|
|
.t7 { background: #fbbf24; }
|
|
.t8 { background: #34d399; }
|
|
.t9 { background: #c98d1d; opacity: 0.3; }
|
|
/* Badge */
|
|
.badge {
|
|
position: absolute; top: 64px; left: 64px;
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 8px 20px; background: #d0eef3; border: 1.5px solid rgba(45,186,210,0.3);
|
|
border-radius: 999px; font-size: 13px; font-weight: 700; color: #1a7d8e;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dbad2; }
|
|
/* Content */
|
|
.content { position: absolute; bottom: 0; left: 0; right: 0; padding: 64px; }
|
|
.section-label {
|
|
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
|
|
color: #c98d1d; margin-bottom: 20px; display: block;
|
|
}
|
|
h1 {
|
|
font-family: 'Instrument Serif', serif; font-size: 56px; font-weight: 400;
|
|
line-height: 1.08; color: #1a1816; margin-bottom: 24px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
h1 em { font-style: italic; color: #c98d1d; }
|
|
.subtitle {
|
|
font-size: 18px; color: #6b665e; line-height: 1.6; margin-bottom: 40px;
|
|
max-width: 560px;
|
|
}
|
|
/* Trust pills */
|
|
.trust-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
|
|
.pill {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 10px 18px; background: #fff; border: 1px solid rgba(205,201,194,0.5);
|
|
border-radius: 12px; font-size: 14px; font-weight: 600; color: #1a1816;
|
|
}
|
|
.pill-icon { font-size: 16px; }
|
|
/* CTA */
|
|
.cta-row { display: flex; align-items: center; gap: 16px; }
|
|
.cta-primary {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 16px 36px; background: #c98d1d; color: #fff;
|
|
border-radius: 14px; font-size: 16px; font-weight: 700; text-decoration: none;
|
|
box-shadow: 0 4px 16px rgba(201,141,29,0.3);
|
|
}
|
|
.cta-secondary {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 16px 28px; background: transparent; color: #1a1816;
|
|
border: 1.5px solid #cdc9c2; border-radius: 14px; font-size: 16px; font-weight: 600;
|
|
}
|
|
/* Watermark */
|
|
.watermark {
|
|
position: absolute; bottom: 24px; right: 36px;
|
|
font-size: 11px; font-weight: 600; color: #a9a49c; letter-spacing: 0.04em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="tile-grid">
|
|
<div class="tile t1"></div><div class="tile t2"></div><div class="tile t3"></div>
|
|
<div class="tile t4"></div><div class="tile t5"></div><div class="tile t6"></div>
|
|
<div class="tile t7"></div><div class="tile t8"></div><div class="tile t9"></div>
|
|
</div>
|
|
<div class="badge"><div class="badge-dot"></div>GeBIZ / VCG Registered Vendor</div>
|
|
<div class="content">
|
|
<span class="section-label">For Singapore Schools</span>
|
|
<h1>STEM toys schools can<br/><em>actually claim</em> from government.</h1>
|
|
<p class="subtitle">Authentic PicassoTiles & Play-Doh with proper tax invoices. Claim from Edusave, PGS, ECDA, MOE funds.</p>
|
|
<div class="trust-row">
|
|
<span class="pill"><span class="pill-icon">✓</span> Tax Invoice + UEN</span>
|
|
<span class="pill"><span class="pill-icon">✓</span> 15+ School Partners</span>
|
|
<span class="pill"><span class="pill-icon">✓</span> 100% Authentic</span>
|
|
</div>
|
|
<div class="cta-row">
|
|
<span class="cta-primary">novizun.com →</span>
|
|
<span class="cta-secondary">Get a Quote</span>
|
|
</div>
|
|
</div>
|
|
<div class="watermark">NOVIZUN · Singapore</div>
|
|
</div>
|
|
</body>
|
|
</html>
|