- 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.
199 lines
13 KiB
HTML
199 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=2480">
|
||
<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: 2480px; height: 3508px; overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; background: #fff; }
|
||
.flyer { width: 2480px; height: 3508px; position: relative; overflow: hidden; }
|
||
/* Header bar */
|
||
.header {
|
||
position: relative; height: 320px; overflow: hidden;
|
||
background: linear-gradient(135deg, #c98d1d 0%, #a87214 100%);
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 120px;
|
||
}
|
||
.header-logo { display: flex; align-items: center; gap: 16px; }
|
||
.logo-icon {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 72px; height: 72px;
|
||
}
|
||
.logo-icon div { border-radius: 10px; }
|
||
.li1 { background: rgba(255,255,255,0.9); }
|
||
.li2 { background: rgba(255,255,255,0.7); }
|
||
.li3 { background: rgba(255,255,255,0.5); }
|
||
.li4 { background: rgba(255,255,255,0.85); }
|
||
.logo-text { font-family: 'Instrument Serif', serif; font-size: 48px; color: #fff; }
|
||
.header-right { text-align: right; color: rgba(255,255,255,0.9); }
|
||
.header-right big { font-size: 20px; font-weight: 700; }
|
||
.header-right small { font-size: 14px; }
|
||
.header-tiles { position: absolute; right: 0; top: 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 8px; opacity: 0.15; }
|
||
.ht { width: 80px; height: 80px; border-radius: 0; }
|
||
.ht:nth-child(odd) { background: #fff; }
|
||
.ht:nth-child(even) { background: transparent; }
|
||
/* Hero */
|
||
.hero { padding: 80px 120px 60px; }
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 8px 20px; background: #f3e8d0; border-radius: 999px;
|
||
font-size: 14px; font-weight: 700; color: #8a5c0f; margin-bottom: 28px;
|
||
}
|
||
.hero h1 {
|
||
font-family: 'Instrument Serif', serif; font-size: 80px; font-weight: 400;
|
||
line-height: 1.08; color: #1a1816; margin-bottom: 32px; max-width: 1800px;
|
||
}
|
||
.hero h1 em { font-style: italic; color: #c98d1d; }
|
||
.hero p { font-size: 22px; color: #6b665e; line-height: 1.6; max-width: 1400px; }
|
||
/* Schemes section */
|
||
.schemes { padding: 60px 120px; background: #faf9f6; margin: 0 120px; border-radius: 32px; }
|
||
.schemes-title {
|
||
font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
|
||
color: #c98d1d; margin-bottom: 40px;
|
||
}
|
||
.schemes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||
.scheme-card {
|
||
background: #fff; border: 1.5px solid rgba(205,201,194,0.5);
|
||
border-radius: 24px; padding: 36px;
|
||
}
|
||
.scheme-badge {
|
||
display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase;
|
||
letter-spacing: 0.08em; padding: 4px 12px; border-radius: 8px; margin-bottom: 12px;
|
||
}
|
||
.scheme-badge--moe { background: #f3e8d0; color: #8a5c0f; }
|
||
.scheme-badge--ecda { background: #d0eef3; color: #1a7d8e; }
|
||
.scheme-card h3 { font-size: 22px; font-weight: 700; color: #1a1816; margin-bottom: 8px; }
|
||
.scheme-card p { font-size: 16px; color: #6b665e; line-height: 1.5; }
|
||
.scheme-audience { font-size: 13px; font-weight: 600; color: #a9a49c; margin-top: 12px; }
|
||
/* Products */
|
||
.products { padding: 60px 120px; }
|
||
.products-title {
|
||
font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
|
||
color: #c98d1d; margin-bottom: 40px;
|
||
}
|
||
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
|
||
.product-card {
|
||
border: 1.5px solid rgba(205,201,194,0.5); border-radius: 24px;
|
||
overflow: hidden; background: #fff;
|
||
}
|
||
.product-img { height: 260px; display: flex; align-items: center; justify-content: center; }
|
||
.pi1 { background: linear-gradient(135deg, #c98d1d22, #2dbad222); }
|
||
.pi2 { background: linear-gradient(135deg, #ef444422, #3b82f622); }
|
||
.pi3 { background: linear-gradient(135deg, #c98d1d22, #a78bfa22); }
|
||
.pi4 { background: linear-gradient(135deg, #2dbad222, #fbbf2422); }
|
||
.pi5 { background: linear-gradient(135deg, #f472b622, #34d39922); }
|
||
.pi6 { background: linear-gradient(135deg, #a78bfa22, #fbbf2422); }
|
||
.product-img span { font-size: 16px; font-weight: 700; color: #1a1816; background: rgba(255,255,255,0.8); padding: 8px 16px; border-radius: 12px; }
|
||
.product-info { padding: 24px; }
|
||
.product-info h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
|
||
.product-info p { font-size: 14px; color: #6b665e; line-height: 1.5; margin-bottom: 12px; }
|
||
.product-price { font-family: 'Instrument Serif', serif; font-size: 32px; color: #c98d1d; }
|
||
/* Process */
|
||
.process { padding: 60px 120px; background: #faf9f6; margin: 0 120px; border-radius: 32px; }
|
||
.process-title {
|
||
font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
|
||
color: #2dbad2; margin-bottom: 40px;
|
||
}
|
||
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
|
||
.step { text-align: center; }
|
||
.step-num {
|
||
width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
font-size: 24px; font-weight: 800; color: #fff; margin: 0 auto 20px;
|
||
}
|
||
.sn1 { background: #c98d1d; } .sn2 { background: #2dbad2; }
|
||
.sn3 { background: #c98d1d; } .sn4 { background: #2dbad2; }
|
||
.step h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #1a1816; }
|
||
.step p { font-size: 14px; color: #6b665e; line-height: 1.5; }
|
||
/* Testimonial */
|
||
.testimonial {
|
||
margin: 0 120px; padding: 48px; background: #fff; border: 1.5px solid rgba(205,201,194,0.5);
|
||
border-radius: 24px; border-left: 6px solid #c98d1d;
|
||
}
|
||
.testimonial p { font-size: 20px; color: #1a1816; font-style: italic; line-height: 1.6; margin-bottom: 20px; }
|
||
.testimonial footer { font-size: 15px; color: #6b665e; }
|
||
.testimonial footer strong { display: block; margin-bottom: 4px; }
|
||
/* Footer CTA */
|
||
.footer-cta {
|
||
margin: 60px 120px 0; padding: 60px; text-align: center;
|
||
background: #1a1816; border-radius: 32px;
|
||
}
|
||
.footer-cta h2 {
|
||
font-family: 'Instrument Serif', serif; font-size: 40px; color: #faf9f6; margin-bottom: 16px;
|
||
}
|
||
.footer-cta p { font-size: 18px; color: #a9a49c; margin-bottom: 32px; }
|
||
.footer-btn {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 18px 56px; background: #e6b04c; color: #1a1816;
|
||
border-radius: 16px; font-size: 20px; font-weight: 700;
|
||
}
|
||
.footer-contact {
|
||
margin-top: 28px; font-size: 16px; color: #6b665e;
|
||
}
|
||
.footer-contact a { color: #e6b04c; text-decoration: none; font-weight: 600; }
|
||
.watermark {
|
||
position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
|
||
font-size: 12px; color: #a9a49c; font-weight: 600;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="flyer">
|
||
<div class="header">
|
||
<div class="header-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="header-right"><big>GeBIZ Registered Vendor</big><small>Authentic STEM Toys · Singapore</small></div>
|
||
<div class="header-tiles"><div class="ht"></div><div class="ht"></div><div class="ht"></div><div class="ht"></div><div class="ht"></div><div class="ht"></div></div>
|
||
</div>
|
||
<div class="hero">
|
||
<div class="hero-badge">✓ Government-Approved STEM Toy Vendor</div>
|
||
<h1>Authentic STEM toys your school can<br/><em>claim from government funds</em></h1>
|
||
<p>GeBIZ-registered vendor with valid UEN. PicassoTiles magnetic tiles and Play-Doh — with proper tax invoices for Edusave, PGS, ECDA, and MOE claims. Trusted by 15+ Singapore schools.</p>
|
||
</div>
|
||
<div class="schemes">
|
||
<div class="schemes-title">Claim under these government schemes</div>
|
||
<div class="schemes-grid">
|
||
<div class="scheme-card"><span class="scheme-badge scheme-badge--moe">MOE</span><h3>Edusave</h3><p>For primary and secondary school enrichment programmes. Purchase STEM learning materials with Edusave funds.</p><span class="scheme-audience">Primary & Secondary Schools</span></div>
|
||
<div class="scheme-card"><span class="scheme-badge scheme-badge--ecda">ECDA</span><h3>PGS — Preschool Grant</h3><p>For kindergartens and childcare centres to enhance learning environments with quality educational resources.</p><span class="scheme-audience">Kindergartens & Childcare</span></div>
|
||
<div class="scheme-card"><span class="scheme-badge scheme-badge--ecda">ECDA</span><h3>KidSTART Grants</h3><p>ECDA funding for centres supporting lower-income families with developmental learning tools.</p><span class="scheme-audience">Early Childhood Centres</span></div>
|
||
<div class="scheme-card"><span class="scheme-badge scheme-badge--moe">MOE</span><h3>School Funds</h3><p>General procurement budgets for classroom resources, STEM corners, and hands-on learning materials.</p><span class="scheme-audience">All MOE Schools</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="products">
|
||
<div class="products-title">Our products</div>
|
||
<div class="products-grid">
|
||
<div class="product-card"><div class="product-img pi1"><span>$29.90</span></div><div class="product-info"><h3>Character Playset</h3><p>Magnetic action figures for creative role-play. Works with all tile brands.</p><span class="product-price">$29.90</span></div></div>
|
||
<div class="product-card"><div class="product-img pi2"><span>65 colours</span></div><div class="product-info"><h3>Play-Doh 65 Pack</h3><p>65 cans with 60 different colours. Non-toxic, perfect for classroom use.</p><span class="product-price">$49.90</span></div></div>
|
||
<div class="product-card"><div class="product-img pi3"><span>$89.90</span></div><div class="product-info"><h3>102pc Ninja Set</h3><p>102 pieces with 8 characters. 2-in-1 storytelling and construction.</p><span class="product-price">$89.90</span></div></div>
|
||
<div class="product-card"><div class="product-img pi4"><span>$79.90</span></div><div class="product-info"><h3>72pc Ice Castle</h3><p>Winter castle set with translucent blocks. Promotes STEM learning.</p><span class="product-price">$79.90</span></div></div>
|
||
<div class="product-card"><div class="product-img pi5"><span>$69.90</span></div><div class="product-info"><h3>Construction Set</h3><p>Construction-themed with 8 characters. Building + pretend play.</p><span class="product-price">$69.90</span></div></div>
|
||
<div class="product-card"><div class="product-img pi6"><span>$29.90</span></div><div class="product-info"><h3>8-Piece Characters</h3><p>King, Queen, Athletes, Cowboy & more. Interactive storytelling.</p><span class="product-price">$29.90</span></div></div>
|
||
</div>
|
||
</div>
|
||
<div class="process">
|
||
<div class="process-title">How school orders work</div>
|
||
<div class="process-grid">
|
||
<div class="step"><div class="step-num sn1">1</div><h4>Send requirements</h4><p>Email us with products, quantities, and delivery address. We'll quote within 24 hours.</p></div>
|
||
<div class="step"><div class="step-num sn2">2</div><h4>We deliver</h4><p>1–3 business day delivery across Singapore with protective packaging.</p></div>
|
||
<div class="step"><div class="step-num sn3">3</div><h4>Receive invoice</h4><p>Tax invoice with UEN — ready for your finance team.</p></div>
|
||
<div class="step"><div class="step-num sn4">4</div><h4>Claim funds</h4><p>Submit the invoice under Edusave, PGS, ECDA, or MOE schemes.</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="testimonial">
|
||
<p>"PicassoTiles transformed our STEM programme. Students look forward to every hands-on lesson and collaborate much more confidently."</p>
|
||
<footer><strong>K Sarata, Admin Manager</strong>New Town Primary School</footer>
|
||
</div>
|
||
<div class="footer-cta">
|
||
<h2>Ready to equip your classroom?</h2>
|
||
<p>Email us for a bulk quote — special pricing for schools</p>
|
||
<span class="footer-btn">novizun@gmail.com →</span>
|
||
<p class="footer-contact">novizun@gmail.com · <a href="#">novizun.com</a> · <a href="#">shopee.sg/novizun</a></p>
|
||
</div>
|
||
<div class="watermark">© 2025 Novizun · Singapore's Trusted STEM Toy Vendor</div>
|
||
</div>
|
||
</body>
|
||
</html>
|