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.
171 lines
7.0 KiB
HTML
171 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1640">
|
|
<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: 1640px; height: 856px; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.card {
|
|
width: 1640px; height: 856px; position: relative; overflow: hidden;
|
|
background: linear-gradient(150deg, #fff8ee 0%, #faf9f6 30%, #f0fbfc 70%, #e8f8fb 100%);
|
|
}
|
|
|
|
/* Decorative tile clusters */
|
|
.tile-cluster {
|
|
position: absolute; display: grid; gap: 10px; opacity: 0.12;
|
|
}
|
|
.cluster-1 { top: -20px; right: 120px; grid-template-columns: repeat(4, 80px); grid-template-rows: repeat(3, 80px); }
|
|
.cluster-2 { bottom: -30px; right: 400px; grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(2, 60px); opacity: 0.08; }
|
|
.tile { border-radius: 14px; }
|
|
.tc1 { background: #c98d1d; }
|
|
.tc2 { background: #2dbad2; }
|
|
.tc3 { background: #f472b6; }
|
|
.tc4 { background: #a78bfa; }
|
|
.tc5 { background: #fbbf24; }
|
|
.tc6 { background: #34d399; }
|
|
|
|
/* Warm blob */
|
|
.blob {
|
|
position: absolute; border-radius: 50%; filter: blur(100px);
|
|
}
|
|
.blob-1 { width: 500px; height: 500px; background: rgba(201,141,29,0.1); top: -150px; left: -100px; }
|
|
.blob-2 { width: 400px; height: 400px; background: rgba(45,186,210,0.08); bottom: -100px; right: 200px; }
|
|
|
|
/* Main content — left aligned */
|
|
.content {
|
|
position: absolute; top: 50%; left: 100px;
|
|
transform: translateY(-50%);
|
|
max-width: 900px;
|
|
}
|
|
|
|
/* Vendor badge */
|
|
.vendor-badge {
|
|
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; margin-bottom: 28px;
|
|
}
|
|
.badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #2dbad2; }
|
|
|
|
/* Headline */
|
|
.section-label {
|
|
font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
|
|
color: #c98d1d; margin-bottom: 16px; display: block;
|
|
}
|
|
h1 {
|
|
font-family: 'Instrument Serif', serif; font-size: 72px; font-weight: 400;
|
|
line-height: 1.05; color: #1a1816; margin-bottom: 20px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
h1 em { font-style: italic; color: #c98d1d; }
|
|
|
|
.tagline {
|
|
font-size: 20px; color: #6b665e; line-height: 1.5; margin-bottom: 36px;
|
|
max-width: 620px;
|
|
}
|
|
|
|
/* Trust pills row */
|
|
.trust-row { display: flex; gap: 14px; flex-wrap: wrap; }
|
|
.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;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
|
}
|
|
.pill-icon { font-size: 15px; }
|
|
.pill-icon.amber { color: #c98d1d; }
|
|
.pill-icon.teal { color: #2dbad2; }
|
|
|
|
/* Right side — product showcase */
|
|
.products {
|
|
position: absolute; top: 50%; right: 80px;
|
|
transform: translateY(-50%);
|
|
display: grid; grid-template-columns: repeat(2, 180px); gap: 16px;
|
|
}
|
|
.product-tile {
|
|
width: 180px; height: 180px; border-radius: 24px; position: relative;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
|
|
}
|
|
.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: 14px; left: 14px;
|
|
font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.9);
|
|
background: rgba(0,0,0,0.2); backdrop-filter: blur(8px);
|
|
padding: 4px 10px; border-radius: 6px;
|
|
}
|
|
|
|
/* Logo / brand mark */
|
|
.brand {
|
|
position: absolute; bottom: 40px; left: 100px;
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
.brand-logo {
|
|
width: 40px; height: 40px; border-radius: 10px;
|
|
background: #c98d1d; display: flex; align-items: center; justify-content: center;
|
|
font-family: 'Instrument Serif', serif; font-size: 22px; color: #fff;
|
|
}
|
|
.brand-name { font-size: 18px; font-weight: 700; color: #1a1816; letter-spacing: -0.01em; }
|
|
.brand-tagline { font-size: 12px; color: #a9a49c; font-weight: 500; }
|
|
|
|
/* URL */
|
|
.url {
|
|
position: absolute; bottom: 44px; right: 80px;
|
|
font-size: 14px; font-weight: 600; color: #2dbad2;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="blob blob-1"></div>
|
|
<div class="blob blob-2"></div>
|
|
|
|
<div class="tile-cluster cluster-1">
|
|
<div class="tile tc1"></div><div class="tile tc2"></div><div class="tile tc3"></div><div class="tile tc5"></div>
|
|
<div class="tile tc4"></div><div class="tile tc1"></div><div class="tile tc6"></div><div class="tile tc2"></div>
|
|
<div class="tile tc3"></div><div class="tile tc4"></div><div class="tile tc1"></div><div class="tile tc5"></div>
|
|
</div>
|
|
<div class="tile-cluster cluster-2">
|
|
<div class="tile tc2"></div><div class="tile tc5"></div><div class="tile tc3"></div>
|
|
<div class="tile tc1"></div><div class="tile tc6"></div><div class="tile tc4"></div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="vendor-badge"><div class="badge-dot"></div>GeBIZ / VCG Registered Vendor</div>
|
|
<span class="section-label">Authentic STEM Toys · Singapore</span>
|
|
<h1>Where schools find<br/><em>claim-ready</em> STEM toys.</h1>
|
|
<p class="tagline">PicassoTiles & Play-Doh with proper tax invoices and UEN. Claim from Edusave, PGS, ECDA & MOE funds.</p>
|
|
<div class="trust-row">
|
|
<span class="pill"><span class="pill-icon amber">✓</span> Tax Invoice + UEN</span>
|
|
<span class="pill"><span class="pill-icon teal">✓</span> GeBIZ Approved</span>
|
|
<span class="pill"><span class="pill-icon amber">✓</span> 15+ School Partners</span>
|
|
<span class="pill"><span class="pill-icon teal">✓</span> Bulk Discounts</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="products">
|
|
<div class="product-tile pt1"><span>PicassoTiles</span></div>
|
|
<div class="product-tile pt2"><span>Play-Doh</span></div>
|
|
<div class="product-tile pt3"><span>Ninja Set</span></div>
|
|
<div class="product-tile pt4"><span>Ice Castle</span></div>
|
|
</div>
|
|
|
|
<div class="brand">
|
|
<div class="brand-logo">N</div>
|
|
<div>
|
|
<div class="brand-name">Novizun</div>
|
|
<div class="brand-tagline">STEM Toys for Schools & Homes</div>
|
|
</div>
|
|
</div>
|
|
<div class="url">novizun.com</div>
|
|
</div>
|
|
</body>
|
|
</html>
|