| Server IP : 139.59.63.204 / Your IP : 216.73.217.62 Web Server : Apache/2.4.58 (Ubuntu) System : Linux ubuntu-s-1vcpu-1gb-blr1-01 6.8.0-110-generic #110-Ubuntu SMP PREEMPT_DYNAMIC Thu Mar 19 15:09:20 UTC 2026 x86_64 User : root ( 0) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/demo/html/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Bloom Public School — Nursery to Class XII</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=Nunito:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<style>
:root {
--green: #1a7a4a;
--green-mid: #25a865;
--green-light:#4cc985;
--green-pale: #e6f7ee;
--amber: #f59e0b;
--amber-pale: #fffbeb;
--sky: #0ea5e9;
--sky-pale: #e0f2fe;
--rose: #f43f5e;
--rose-pale: #fff1f2;
--cream: #fdfaf4;
--dark: #0f2718;
--text: #1e3a2a;
--muted: #5a7a65;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: var(--cream); color: var(--text); overflow-x: hidden; }
h1,h2,h3,.display { font-family: 'Playfair Display', serif; }
/* ─── Loader ─── */
#loader {
position: fixed; inset: 0; z-index: 9999;
background: var(--dark);
display: flex; align-items: center; justify-content: center; flex-direction: column;
transition: opacity .8s ease, visibility .8s ease;
}
#loader.out { opacity: 0; visibility: hidden; }
.loader-bloom {
font-size: 4rem;
animation: bloomSpin 1.5s ease-in-out infinite;
}
.loader-text {
color: rgba(255,255,255,.6); font-size: .78rem; letter-spacing: .25em;
text-transform: uppercase; margin-top: 1rem;
animation: blink 1.2s ease-in-out infinite;
}
@keyframes bloomSpin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.2); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes blink { 0%,100%{opacity:.4;} 50%{opacity:1;} }
/* ─── Navbar ─── */
#nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 500;
padding: 1.2rem 3rem;
display: flex; align-items: center; justify-content: space-between;
transition: all .4s ease;
}
#nav.stuck {
background: rgba(253,250,244,.97);
backdrop-filter: blur(16px);
box-shadow: 0 2px 30px rgba(15,39,24,.07);
padding: .8rem 3rem;
}
.nav-logo {
display: flex; align-items: center; gap: .6rem;
font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 700;
color: #fff; transition: color .3s;
}
#nav.stuck .nav-logo { color: var(--dark); }
.logo-icon {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, var(--green-light), var(--green));
display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.nav-links a {
color: rgba(255,255,255,.8); font-size: .83rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
text-decoration: none; margin-left: 2rem; transition: color .3s;
}
#nav.stuck .nav-links a { color: var(--text); }
.nav-links a:hover { color: var(--green-light) !important; }
.nav-admit {
background: var(--amber); color: var(--dark) !important;
padding: .5rem 1.4rem; border-radius: 50px; font-weight: 800 !important;
transition: transform .2s, box-shadow .2s !important;
}
.nav-admit:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,158,11,.5) !important; }
.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; }
.hamburger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; display: block; }
#nav.stuck .hamburger span { background: var(--dark); }
/* ─── Mobile Menu ─── */
#mob-menu {
display: none; position: fixed; inset: 0; z-index: 490;
background: var(--dark); flex-direction: column;
align-items: center; justify-content: center; gap: 2rem;
}
#mob-menu.show { display: flex; }
#mob-menu a { color: #fff; font-size: 1.5rem; font-family: 'Playfair Display', serif; text-decoration: none; }
/* ─── Hero ─── */
#hero {
min-height: 100vh;
background: linear-gradient(150deg, #0f2718 0%, #1a5c35 45%, #0d6e4f 100%);
position: relative; overflow: hidden;
display: flex; align-items: center;
}
/* Animated leaves */
.leaf {
position: absolute; pointer-events: none;
animation: leafFloat linear infinite;
opacity: 0;
}
@keyframes leafFloat {
0% { transform: translateY(110vh) rotate(0deg); opacity: 0; }
5% { opacity: .7; }
95% { opacity: .5; }
100% { transform: translateY(-10vh) rotate(720deg); opacity: 0; }
}
/* Dotted pattern */
.hero-dots {
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Glow blobs */
.blob {
position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.blob-1 { width: 600px; height: 600px; top: -150px; right: -100px; background: rgba(76,201,133,.15); animation: blobMove 12s ease-in-out infinite; }
.blob-2 { width: 400px; height: 400px; bottom: -100px; left: -80px; background: rgba(245,158,11,.1); animation: blobMove 15s ease-in-out infinite reverse; }
@keyframes blobMove { 0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,-30px);} }
.hero-inner { position: relative; z-index: 2; max-width: 760px; }
.hero-tag {
display: inline-flex; align-items: center; gap: .5rem;
background: rgba(76,201,133,.18); border: 1px solid rgba(76,201,133,.4);
color: var(--green-light); padding: .35rem 1rem; border-radius: 50px;
font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
margin-bottom: 1.5rem;
opacity: 0; animation: riseUp .7s .3s forwards;
}
.hero-h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 6vw, 5.8rem);
font-weight: 900; color: #fff; line-height: 1.08; margin-bottom: 1.5rem;
opacity: 0; animation: riseUp .8s .5s forwards;
}
.hero-h1 span { color: var(--amber); font-style: italic; }
.hero-sub {
color: rgba(255,255,255,.65); font-size: 1rem; line-height: 1.8; max-width: 540px; margin-bottom: 2.5rem;
opacity: 0; animation: riseUp .7s .7s forwards;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0; animation: riseUp .7s .9s forwards; }
@keyframes riseUp { to { opacity: 1; transform: translateY(0); } }
.hero-tag, .hero-h1, .hero-sub { transform: translateY(24px); }
.btn-green {
background: linear-gradient(135deg, var(--green-mid), var(--green));
color: #fff; padding: .85rem 2.2rem; border-radius: 50px;
font-size: .9rem; font-weight: 800; text-decoration: none; border: none; cursor: pointer;
box-shadow: 0 8px 30px rgba(26,122,74,.45);
transition: all .3s; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-green:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(26,122,74,.55); }
.btn-outline-w {
background: transparent; color: #fff; padding: .85rem 2.2rem; border-radius: 50px;
font-size: .9rem; font-weight: 700; text-decoration: none; border: 2px solid rgba(255,255,255,.35); cursor: pointer;
transition: all .3s;
}
.btn-outline-w:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); transform: translateY(-2px); }
/* Floating stats bar */
.hero-stats {
position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
background: rgba(255,255,255,.07); backdrop-filter: blur(20px);
border-top: 1px solid rgba(255,255,255,.1);
display: flex; justify-content: center; gap: 0;
opacity: 0; animation: riseUp .8s 1.1s forwards; transform: translateY(24px);
}
.hstat {
flex: 1; max-width: 220px; text-align: center; padding: 1.4rem 1rem;
border-right: 1px solid rgba(255,255,255,.1);
}
.hstat:last-child { border-right: none; }
.hstat-num { font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 700; color: #fff; line-height: 1; }
.hstat-lbl { color: rgba(255,255,255,.5); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .3rem; }
/* ─── Shared section styles ─── */
.sec { padding: 7rem 0; }
.sec-tag { display: inline-block; font-size: .73rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: .7rem; }
.sec-h { font-family: 'Playfair Display', serif; font-size: clamp(1.9rem, 3.5vw, 2.9rem); font-weight: 700; color: var(--dark); line-height: 1.2; }
.sec-h em { color: var(--green); font-style: italic; }
.sec-p { color: var(--muted); font-size: .92rem; line-height: 1.85; max-width: 560px; }
/* Reveal */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s, transform .7s; }
.reveal.on { opacity: 1; transform: none; }
/* ─── Programmes ─── */
#programmes { background: #fff; }
.prog-card {
border-radius: 24px; padding: 2.2rem; position: relative; overflow: hidden;
cursor: default; transition: transform .4s cubic-bezier(.175,.885,.32,1.275), box-shadow .4s;
opacity: 0; transform: translateY(40px);
}
.prog-card.on { animation: riseUp .6s forwards; }
.prog-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 30px 70px rgba(0,0,0,.1); }
.prog-icon { font-size: 2.8rem; margin-bottom: 1rem; }
.prog-name { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; margin-bottom: .4rem; }
.prog-range { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .8rem; }
.prog-desc { font-size: .86rem; line-height: 1.75; }
.prog-tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.prog-pill { font-size: .72rem; font-weight: 700; padding: .25rem .75rem; border-radius: 50px; }
/* ─── Why Bloom ─── */
#why { background: var(--cream); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.why-card {
background: #fff; border-radius: 20px; padding: 2rem;
transition: transform .35s, box-shadow .35s;
border-bottom: 4px solid transparent;
}
.why-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(15,39,24,.08); border-bottom-color: var(--green-mid); }
.why-icon { font-size: 2.2rem; margin-bottom: 1rem; }
.why-title { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: .5rem; }
.why-desc { font-size: .85rem; color: var(--muted); line-height: 1.7; }
/* ─── Academics ─── */
#academics { background: var(--dark); position: relative; overflow: hidden; }
#academics::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at 80% 20%, rgba(76,201,133,.12), transparent 55%),
radial-gradient(ellipse at 10% 80%, rgba(245,158,11,.08), transparent 50%);
}
.acad-card {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: 20px; padding: 2rem;
transition: background .3s, transform .3s; position: relative; z-index: 1;
}
.acad-card:hover { background: rgba(255,255,255,.1); transform: translateY(-5px); }
.acad-icon { font-size: 2rem; margin-bottom: 1rem; }
.acad-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.acad-desc { font-size: .85rem; color: rgba(255,255,255,.55); line-height: 1.7; }
.acad-badge { display: inline-block; background: rgba(76,201,133,.2); color: var(--green-light); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .75rem; border-radius: 50px; margin-top: .75rem; }
/* ─── Gallery / Campus Life ─── */
#campus { background: #fff; }
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 200px);
gap: 1rem;
}
.gal-item {
border-radius: 18px; overflow: hidden; position: relative;
display: flex; align-items: center; justify-content: center;
font-size: 3.5rem; cursor: pointer;
transition: transform .4s, box-shadow .4s;
}
.gal-item:hover { transform: scale(1.04); box-shadow: 0 20px 50px rgba(0,0,0,.15); z-index: 2; }
.gal-item:first-child { grid-column: span 2; grid-row: span 2; font-size: 6rem; }
.gal-label {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(15,39,24,.85), transparent);
color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
padding: .75rem 1rem;
opacity: 0; transition: opacity .3s;
}
.gal-item:hover .gal-label { opacity: 1; }
/* ─── Admissions ─── */
#admissions { background: var(--green-pale); }
.step-row { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2.5rem; }
.step-num {
width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
background: linear-gradient(135deg, var(--green-mid), var(--green));
display: flex; align-items: center; justify-content: center;
font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: #fff;
box-shadow: 0 8px 25px rgba(26,122,74,.3);
}
.step-title { font-weight: 800; color: var(--dark); margin-bottom: .3rem; }
.step-desc { font-size: .87rem; color: var(--muted); line-height: 1.65; }
.adm-form-wrap {
background: #fff; border-radius: 28px; padding: 2.8rem;
box-shadow: 0 25px 80px rgba(15,39,24,.09);
}
.fi { margin-bottom: 1.25rem; }
.fi label { display: block; font-size: .77rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text); margin-bottom: .45rem; }
.fi input, .fi select, .fi textarea {
width: 100%; padding: .8rem 1.1rem;
border: 1.5px solid #dde7e0; border-radius: 12px;
font-family: 'Nunito', sans-serif; font-size: .9rem; color: var(--dark);
background: var(--cream); outline: none; transition: all .3s;
}
.fi input:focus, .fi select:focus, .fi textarea:focus {
border-color: var(--green); background: #fff;
box-shadow: 0 0 0 4px rgba(26,122,74,.1);
}
/* ─── Testimonials ─── */
#testimonials { background: var(--cream); }
.tslider { position: relative; overflow: hidden; }
.ttrack { display: flex; gap: 1.5rem; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.tcard {
flex: 0 0 calc(33.33% - 1rem); background: #fff; border-radius: 24px;
padding: 2.2rem; box-shadow: 0 5px 30px rgba(15,39,24,.05);
transition: box-shadow .3s;
}
.tcard:hover { box-shadow: 0 15px 50px rgba(15,39,24,.1); }
.tquote { font-size: 2.5rem; color: var(--green-light); opacity: .5; font-family: 'Playfair Display', serif; line-height: 1; }
.ttext { font-size: .9rem; color: var(--muted); line-height: 1.85; margin-bottom: 1.5rem; }
.tavatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.tname { font-weight: 800; color: var(--dark); font-size: .9rem; }
.trole { font-size: .75rem; color: var(--muted); }
.stars { color: var(--amber); font-size: .85rem; margin-bottom: .75rem; }
.slider-btn {
width: 44px; height: 44px; border-radius: 50%; border: 2px solid #dde7e0;
background: #fff; cursor: pointer; font-size: 1.1rem;
display: flex; align-items: center; justify-content: center;
transition: all .3s;
}
.slider-btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
/* ─── Notice Board ─── */
#notices { background: #fff; }
.notice-item {
display: flex; gap: 1.2rem; align-items: flex-start;
padding: 1.2rem; border-radius: 16px;
border-left: 4px solid var(--green-light);
background: var(--green-pale); margin-bottom: 1rem;
transition: transform .3s;
}
.notice-item:hover { transform: translateX(5px); }
.notice-date { flex-shrink: 0; text-align: center; background: var(--green); color: #fff; border-radius: 10px; padding: .5rem .7rem; min-width: 52px; }
.notice-day { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.notice-mon { font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.notice-badge { font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 50px; }
.notice-title { font-weight: 700; color: var(--dark); font-size: .9rem; margin: .3rem 0 .3rem; }
.notice-desc { font-size: .8rem; color: var(--muted); line-height: 1.6; }
/* ─── Faculty ─── */
#faculty { background: var(--cream); }
.faculty-card {
background: #fff; border-radius: 24px; overflow: hidden;
transition: transform .4s, box-shadow .4s;
}
.faculty-card:hover { transform: translateY(-8px); box-shadow: 0 25px 60px rgba(15,39,24,.1); }
.faculty-photo { height: 220px; display: flex; align-items: center; justify-content: center; font-size: 5rem; }
.faculty-info { padding: 1.5rem; }
.faculty-name { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--dark); }
.faculty-sub { color: var(--green); font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: .3rem 0 .5rem; }
.faculty-exp { font-size: .82rem; color: var(--muted); }
/* ─── Contact ─── */
#contact { background: var(--dark); }
.ccard {
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
border-radius: 20px; padding: 1.8rem;
display: flex; gap: 1rem; align-items: flex-start;
transition: background .3s, transform .3s;
}
.ccard:hover { background: rgba(255,255,255,.1); transform: translateY(-4px); }
.cicon { width: 46px; height: 46px; border-radius: 14px; background: rgba(76,201,133,.18); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ctitle { color: rgba(255,255,255,.9); font-weight: 700; margin-bottom: .3rem; }
.cinfo { color: rgba(255,255,255,.45); font-size: .85rem; line-height: 1.65; }
/* ─── Footer ─── */
footer { background: #071510; padding: 4rem 0 1.5rem; }
.flogo { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 700; color: #fff; margin-bottom: .6rem; }
.ftag { color: rgba(255,255,255,.35); font-size: .83rem; line-height: 1.7; max-width: 240px; }
.fh { color: rgba(255,255,255,.7); font-size: .73rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1.2rem; }
footer a { color: rgba(255,255,255,.4); font-size: .87rem; text-decoration: none; display: block; margin-bottom: .65rem; transition: color .3s; }
footer a:hover { color: var(--green-light); }
.fdiv { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 2rem 0 1.2rem; }
.fcopy { color: rgba(255,255,255,.25); font-size: .78rem; text-align: center; }
/* ─── Admissions floating CTA ─── */
.admit-float {
position: fixed; top: 50%; right: 0; transform: translateY(-50%) rotate(180deg);
z-index: 400; background: var(--amber); color: var(--dark);
writing-mode: vertical-rl; padding: .9rem .6rem;
font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
text-decoration: none; border-radius: 12px 0 0 12px;
box-shadow: -4px 4px 20px rgba(245,158,11,.4);
transition: right .3s;
}
.admit-float:hover { right: 2px; }
/* ─── Toast ─── */
#toast {
display: none; position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
background: var(--green); color: #fff; padding: .85rem 2rem; border-radius: 50px;
font-size: .9rem; font-weight: 700; z-index: 600;
box-shadow: 0 10px 40px rgba(26,122,74,.4);
animation: riseUp .4s forwards;
}
@media(max-width:900px) {
.gallery-grid { grid-template-columns: repeat(2,1fr); grid-template-rows: auto; }
.gal-item:first-child { grid-column: span 2; grid-row: span 1; }
.tcard { flex: 0 0 80vw; }
}
@media(max-width:768px) {
#nav { padding: 1rem 1.25rem; }
#nav.stuck { padding: .7rem 1.25rem; }
.nav-links { display: none; }
.hamburger { display: flex; }
.hero-stats { flex-direction: column; gap: 0; }
.hstat { max-width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
}
</style>
</head>
<body>
<!-- Loader -->
<div id="loader">
<div class="loader-bloom">🌸</div>
<div class="loader-text">Bloom Public School</div>
</div>
<!-- Mobile Menu -->
<div id="mob-menu">
<a href="#programmes" onclick="closeMob()">Programmes</a>
<a href="#why" onclick="closeMob()">Why Bloom</a>
<a href="#academics" onclick="closeMob()">Academics</a>
<a href="#campus" onclick="closeMob()">Campus</a>
<a href="#admissions" onclick="closeMob()">Admissions</a>
<a href="#contact" onclick="closeMob()">Contact</a>
</div>
<!-- Navbar -->
<nav id="nav">
<div class="nav-logo">
<div class="logo-icon">🌸</div>
Bloom
</div>
<div class="nav-links">
<a href="#programmes">Programmes</a>
<a href="#why">Why Bloom</a>
<a href="#academics">Academics</a>
<a href="#campus">Campus</a>
<a href="#faculty">Faculty</a>
<a href="#notices">News</a>
<a href="#admissions" class="nav-admit">Apply Now</a>
</div>
<div class="hamburger" id="ham" onclick="toggleMob()">
<span></span><span></span><span></span>
</div>
</nav>
<!-- Hero -->
<section id="hero">
<!-- Animated floating leaves -->
<div id="leaves"></div>
<div class="hero-dots"></div>
<div class="blob blob-1"></div>
<div class="blob blob-2"></div>
<div class="max-w-7xl mx-auto px-6 w-full" style="padding-top:6rem; padding-bottom:8rem;">
<div class="hero-inner">
<div class="hero-tag">🌱 Nursery to Class XII · Est. 1998</div>
<h1 class="hero-h1">
Where Every Child<br/><span>Blooms</span> & Thrives
</h1>
<p class="hero-sub">
Bloom Public School nurtures curious minds through joyful learning, strong values, and world-class education — from the very first steps of nursery to the milestone of Class XII.
</p>
<div class="hero-btns">
<a href="#admissions" class="btn-green">🎒 Apply for Admission</a>
<a href="#programmes" class="btn-outline-w">Explore Programmes →</a>
</div>
</div>
</div>
<div class="hero-stats">
<div class="hstat">
<div class="hstat-num"><span class="ctr" data-t="2500">0</span>+</div>
<div class="hstat-lbl">Students Enrolled</div>
</div>
<div class="hstat">
<div class="hstat-num"><span class="ctr" data-t="180">0</span>+</div>
<div class="hstat-lbl">Qualified Faculty</div>
</div>
<div class="hstat">
<div class="hstat-num"><span class="ctr" data-t="25">0</span></div>
<div class="hstat-lbl">Years of Excellence</div>
</div>
<div class="hstat">
<div class="hstat-num"><span class="ctr" data-t="98">0</span>%</div>
<div class="hstat-lbl">Board Pass Rate</div>
</div>
</div>
</section>
<!-- Programmes -->
<section id="programmes" class="sec bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="sec-tag">Academic Stages</span>
<h2 class="sec-h">Our <em>Programmes</em></h2>
<p class="sec-p mx-auto mt-3 text-center">A seamless educational journey crafted for every developmental stage.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="prog-card" data-d="0" style="background:linear-gradient(145deg,#fff8e7,#fff3d0);">
<div class="prog-icon">🐣</div>
<div class="prog-name" style="color:#92400e;">Early Years</div>
<div class="prog-range" style="color:#d97706;">Nursery · LKG · UKG</div>
<div class="prog-desc" style="color:#78350f;">Play-based exploration that sparks curiosity, language, and social-emotional foundations in a safe, joyful setting.</div>
<div class="prog-tag-list">
<span class="prog-pill" style="background:#fef3c7;color:#92400e;">Play Learning</span>
<span class="prog-pill" style="background:#fef3c7;color:#92400e;">Phonics</span>
<span class="prog-pill" style="background:#fef3c7;color:#92400e;">Montessori</span>
</div>
</div>
<div class="prog-card" data-d="100" style="background:linear-gradient(145deg,#f0fdf4,#dcfce7);">
<div class="prog-icon">📚</div>
<div class="prog-name" style="color:#14532d;">Primary School</div>
<div class="prog-range" style="color:#16a34a;">Class I – V</div>
<div class="prog-desc" style="color:#166534;">Building literacy, numeracy, and critical thinking through activity-based learning aligned with NEP 2020.</div>
<div class="prog-tag-list">
<span class="prog-pill" style="background:#dcfce7;color:#14532d;">CBSE</span>
<span class="prog-pill" style="background:#dcfce7;color:#14532d;">STEM Labs</span>
<span class="prog-pill" style="background:#dcfce7;color:#14532d;">Arts</span>
</div>
</div>
<div class="prog-card" data-d="200" style="background:linear-gradient(145deg,#eff6ff,#dbeafe);">
<div class="prog-icon">🔭</div>
<div class="prog-name" style="color:#1e3a8a;">Middle School</div>
<div class="prog-range" style="color:#2563eb;">Class VI – VIII</div>
<div class="prog-desc" style="color:#1e40af;">Deepening subject knowledge, analytical skills, and co-curricular growth through projects and competitions.</div>
<div class="prog-tag-list">
<span class="prog-pill" style="background:#dbeafe;color:#1e3a8a;">Science</span>
<span class="prog-pill" style="background:#dbeafe;color:#1e3a8a;">Coding</span>
<span class="prog-pill" style="background:#dbeafe;color:#1e3a8a;">Debate</span>
</div>
</div>
<div class="prog-card" data-d="300" style="background:linear-gradient(145deg,#fdf4ff,#fae8ff);">
<div class="prog-icon">🎓</div>
<div class="prog-name" style="color:#581c87;">Senior Secondary</div>
<div class="prog-range" style="color:#9333ea;">Class IX – XII</div>
<div class="prog-desc" style="color:#6b21a8;">Comprehensive board preparation with Science, Commerce & Humanities streams, career counselling, and entrance coaching.</div>
<div class="prog-tag-list">
<span class="prog-pill" style="background:#fae8ff;color:#581c87;">Science</span>
<span class="prog-pill" style="background:#fae8ff;color:#581c87;">Commerce</span>
<span class="prog-pill" style="background:#fae8ff;color:#581c87;">Arts</span>
</div>
</div>
</div>
</div>
</section>
<!-- Why Bloom -->
<section id="why" class="sec" style="background:var(--cream);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="sec-tag">Our Difference</span>
<h2 class="sec-h">Why Families Choose <em>Bloom</em></h2>
</div>
<div class="why-grid">
<div class="why-card reveal"><div class="why-icon">🧪</div><div class="why-title">World-Class Infrastructure</div><div class="why-desc">Smart classrooms, fully-equipped science & computer labs, a 10,000 sq.ft. library, and dedicated art and music studios.</div></div>
<div class="why-card reveal"><div class="why-icon">🏅</div><div class="why-title">Outstanding Board Results</div><div class="why-desc">Consistently 98%+ pass rates with multiple students scoring above 95% in CBSE Class X and XII boards.</div></div>
<div class="why-card reveal"><div class="why-icon">⚽</div><div class="why-title">Sports Excellence</div><div class="why-desc">Football, basketball, cricket, swimming and athletics — our teams have won state-level championships for 8 consecutive years.</div></div>
<div class="why-card reveal"><div class="why-icon">🎭</div><div class="why-title">Rich Cultural Life</div><div class="why-desc">Annual fests, drama society, classical dance, choir and inter-school competitions — creativity is celebrated every day.</div></div>
<div class="why-card reveal"><div class="why-icon">🔒</div><div class="why-title">Safe & Inclusive Campus</div><div class="why-desc">CCTV-monitored, child-safe campus with trained counsellors, anti-bullying policies and a zero-tolerance approach to discrimination.</div></div>
<div class="why-card reveal"><div class="why-icon">🌍</div><div class="why-title">Global Exposure</div><div class="why-desc">International exchange programmes, MUN conferences, and collaborations with schools across 12 countries.</div></div>
<div class="why-card reveal"><div class="why-icon">💻</div><div class="why-title">Technology Integration</div><div class="why-desc">1:1 device programme for senior students, AI & robotics electives, and a dedicated EdTech lab with cutting-edge tools.</div></div>
<div class="why-card reveal"><div class="why-icon">🌱</div><div class="why-title">Eco & Sustainability</div><div class="why-desc">Green campus with solar panels, rainwater harvesting, organic garden, and a student-led environment club.</div></div>
</div>
</div>
</section>
<!-- Academics -->
<section id="academics" class="sec" style="background:var(--dark);">
<div class="max-w-7xl mx-auto px-6 relative z-10">
<div class="text-center mb-14 reveal">
<span class="sec-tag" style="color:var(--green-light);">Academic Excellence</span>
<h2 class="sec-h" style="color:#fff;">Curriculum & <em>Beyond</em></h2>
<p class="sec-p mx-auto mt-3 text-center" style="color:rgba(255,255,255,.5);">A holistic framework that goes far beyond textbooks.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<div class="acad-card reveal"><div class="acad-icon">📐</div><div class="acad-title">CBSE Curriculum</div><div class="acad-desc">Full CBSE syllabus enriched with project-based learning, collaborative assessments, and NEP 2020 compliance.</div><div class="acad-badge">Board Aligned</div></div>
<div class="acad-card reveal"><div class="acad-icon">🤖</div><div class="acad-title">AI & Robotics</div><div class="acad-desc">Elective programme for classes VIII–XII featuring Raspberry Pi, Arduino, machine learning basics, and drone programming.</div><div class="acad-badge">Future Skills</div></div>
<div class="acad-card reveal"><div class="acad-icon">📖</div><div class="acad-title">Reading Programme</div><div class="acad-desc">Structured reading from Class I with genre reading challenges, author visits, and our award-winning school library.</div><div class="acad-badge">Literacy First</div></div>
<div class="acad-card reveal"><div class="acad-icon">🔬</div><div class="acad-title">Science Olympiads</div><div class="acad-desc">Intensive coaching for NSO, IMO, and IIT-JEE aspirants with dedicated faculty and weekly mock tests.</div><div class="acad-badge">Competition Ready</div></div>
<div class="acad-card reveal"><div class="acad-icon">🎤</div><div class="acad-title">Communication Skills</div><div class="acad-desc">Public speaking, debate, and presentation skills woven into every grade — built for confident, articulate graduates.</div><div class="acad-badge">Life Skills</div></div>
<div class="acad-card reveal"><div class="acad-icon">🗺️</div><div class="acad-title">Career Counselling</div><div class="acad-desc">Professional counsellors guide Class IX–XII students through stream selection, university applications, and career planning.</div><div class="acad-badge">Class IX–XII</div></div>
</div>
</div>
</section>
<!-- Campus Life Gallery -->
<section id="campus" class="sec bg-white">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="sec-tag">Life at Bloom</span>
<h2 class="sec-h">Our Vibrant <em>Campus</em></h2>
</div>
<div class="gallery-grid reveal">
<div class="gal-item" style="background:linear-gradient(135deg,#134e1a,#1a7a4a);">🏫<div class="gal-label">Main School Building</div></div>
<div class="gal-item" style="background:linear-gradient(135deg,#1e3a8a,#3b82f6);">🔬<div class="gal-label">Science Labs</div></div>
<div class="gal-item" style="background:linear-gradient(135deg,#7c2d12,#ea580c);">⚽<div class="gal-label">Sports Ground</div></div>
<div class="gal-item" style="background:linear-gradient(135deg,#581c87,#9333ea);">🎭<div class="gal-label">Auditorium</div></div>
<div class="gal-item" style="background:linear-gradient(135deg,#713f12,#d97706);">📚<div class="gal-label">Library</div></div>
<div class="gal-item" style="background:linear-gradient(135deg,#0c4a6e,#0ea5e9);">💻<div class="gal-label">Computer Lab</div></div>
</div>
</div>
</section>
<!-- Notice Board -->
<section id="notices" class="sec" style="background:#fff;">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
<div class="reveal">
<span class="sec-tag">Latest Updates</span>
<h2 class="sec-h mb-8">Notice Board & <em>Events</em></h2>
<div class="notice-item">
<div class="notice-date"><div class="notice-day">15</div><div class="notice-mon">Mar</div></div>
<div>
<span class="notice-badge" style="background:#dcfce7;color:#14532d;">Academic</span>
<div class="notice-title">Class XII Pre-Board Examination Schedule Released</div>
<div class="notice-desc">Pre-board exams for Class XII will commence from 20th March. Time-table available at the school office and student portal.</div>
</div>
</div>
<div class="notice-item">
<div class="notice-date"><div class="notice-day">20</div><div class="notice-mon">Mar</div></div>
<div>
<span class="notice-badge" style="background:#fef3c7;color:#92400e;">Event</span>
<div class="notice-title">Annual Sports Day 2026 — Register by 18th March</div>
<div class="notice-desc">Students from Class III onwards may register for track & field, team sports, and creative events.</div>
</div>
</div>
<div class="notice-item">
<div class="notice-date"><div class="notice-day">25</div><div class="notice-mon">Mar</div></div>
<div>
<span class="notice-badge" style="background:#dbeafe;color:#1e3a8a;">Admissions</span>
<div class="notice-title">Admissions Open for 2026–27 Academic Session</div>
<div class="notice-desc">Applications for Nursery to Class IX (except IV & VII) are now open. Seats are limited — apply early to avoid disappointment.</div>
</div>
</div>
<div class="notice-item">
<div class="notice-date"><div class="notice-day">01</div><div class="notice-mon">Apr</div></div>
<div>
<span class="notice-badge" style="background:#fae8ff;color:#581c87;">Holiday</span>
<div class="notice-title">School Closed for Summer Vacations (Apr 1 – Jun 10)</div>
<div class="notice-desc">Summer camp registrations open. Contact the office for details on academic enrichment programmes during the break.</div>
</div>
</div>
</div>
<!-- Upcoming Events -->
<div class="reveal">
<span class="sec-tag">Calendar</span>
<h2 class="sec-h mb-8">Upcoming <em>Events</em></h2>
<div class="space-y-4">
<div style="background:var(--green-pale);border-radius:18px;padding:1.5rem;display:flex;gap:1.2rem;align-items:center;">
<div style="font-size:2.5rem;">🏆</div>
<div>
<div style="font-weight:800;color:var(--dark);">Inter-School Science Fair</div>
<div style="font-size:.8rem;color:var(--muted);">March 28, 2026 · Main Auditorium</div>
</div>
</div>
<div style="background:#fffbeb;border-radius:18px;padding:1.5rem;display:flex;gap:1.2rem;align-items:center;">
<div style="font-size:2.5rem;">🎵</div>
<div>
<div style="font-weight:800;color:var(--dark);">Annual Music & Dance Fest</div>
<div style="font-size:.8rem;color:var(--muted);">April 5, 2026 · Open Air Stage</div>
</div>
</div>
<div style="background:#eff6ff;border-radius:18px;padding:1.5rem;display:flex;gap:1.2rem;align-items:center;">
<div style="font-size:2.5rem;">🎓</div>
<div>
<div style="font-weight:800;color:var(--dark);">Graduation Ceremony – Class XII</div>
<div style="font-size:.8rem;color:var(--muted);">April 15, 2026 · School Ground</div>
</div>
</div>
<div style="background:#fdf4ff;border-radius:18px;padding:1.5rem;display:flex;gap:1.2rem;align-items:center;">
<div style="font-size:2.5rem;">🌍</div>
<div>
<div style="font-weight:800;color:var(--dark);">MUN Conference 2026</div>
<div style="font-size:.8rem;color:var(--muted);">May 10–12, 2026 · Conference Hall</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Faculty -->
<section id="faculty" class="sec" style="background:var(--cream);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="sec-tag">Our Educators</span>
<h2 class="sec-h">Passionate <em>Faculty</em></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="faculty-card reveal">
<div class="faculty-photo" style="background:linear-gradient(135deg,#dcfce7,#bbf7d0);">👩🏫</div>
<div class="faculty-info">
<div class="faculty-name">Mrs. Sunita Arora</div>
<div class="faculty-sub">Principal</div>
<div class="faculty-exp">M.Ed · 28 Years Experience</div>
</div>
</div>
<div class="faculty-card reveal">
<div class="faculty-photo" style="background:linear-gradient(135deg,#dbeafe,#bfdbfe);">👨🔬</div>
<div class="faculty-info">
<div class="faculty-name">Mr. Deepak Verma</div>
<div class="faculty-sub">Head of Science</div>
<div class="faculty-exp">M.Sc Physics · 19 Years</div>
</div>
</div>
<div class="faculty-card reveal">
<div class="faculty-photo" style="background:linear-gradient(135deg,#fae8ff,#f5d0fe);">👩💻</div>
<div class="faculty-info">
<div class="faculty-name">Ms. Ritu Sharma</div>
<div class="faculty-sub">Computer Science</div>
<div class="faculty-exp">MCA · AI & Robotics Lead</div>
</div>
</div>
<div class="faculty-card reveal">
<div class="faculty-photo" style="background:linear-gradient(135deg,#fef3c7,#fde68a);">👨🎨</div>
<div class="faculty-info">
<div class="faculty-name">Mr. Arun Nair</div>
<div class="faculty-sub">Arts & Culture</div>
<div class="faculty-exp">BFA Hons · Kathak Trained</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class="sec" style="background:var(--cream);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="sec-tag">Parent & Alumni Voices</span>
<h2 class="sec-h">What Families <em>Say</em></h2>
</div>
<div class="tslider reveal">
<div class="ttrack" id="ttrack">
<div class="tcard">
<div class="stars">★★★★★</div>
<div class="tquote">"</div>
<p class="ttext">Bloom has been transformative for my daughter. The teachers truly know every child individually and go beyond the curriculum to nurture their unique strengths.</p>
<div style="display:flex;align-items:center;gap:.8rem;">
<div class="tavatar" style="background:linear-gradient(135deg,#4cc985,#1a7a4a);">👩</div>
<div><div class="tname">Priya Kapoor</div><div class="trole">Parent · Class VIII</div></div>
</div>
</div>
<div class="tcard">
<div class="stars">★★★★★</div>
<div class="tquote">"</div>
<p class="ttext">I secured admission to IIT Delhi last year and credit much of my success to the rigorous and caring Science faculty at Bloom. Best school decision ever.</p>
<div style="display:flex;align-items:center;gap:.8rem;">
<div class="tavatar" style="background:linear-gradient(135deg,#60a5fa,#1d4ed8);">👨</div>
<div><div class="tname">Arjun Mehta</div><div class="trole">Alumni · IIT Delhi 2024</div></div>
</div>
</div>
<div class="tcard">
<div class="stars">★★★★★</div>
<div class="tquote">"</div>
<p class="ttext">The Nursery programme was perfect for our son's transition. He went from shy to confident in just one semester. The teachers are warm, patient and exceptional.</p>
<div style="display:flex;align-items:center;gap:.8rem;">
<div class="tavatar" style="background:linear-gradient(135deg,#f59e0b,#d97706);">👨</div>
<div><div class="tname">Rajesh Tiwari</div><div class="trole">Parent · Nursery</div></div>
</div>
</div>
<div class="tcard">
<div class="stars">★★★★★</div>
<div class="tquote">"</div>
<p class="ttext">Bloom's sports programme is world-class. My daughter represented the state in basketball — all thanks to the incredible coaching and infrastructure here.</p>
<div style="display:flex;align-items:center;gap:.8rem;">
<div class="tavatar" style="background:linear-gradient(135deg,#f472b6,#be185d);">👩</div>
<div><div class="tname">Meena Joshi</div><div class="trole">Parent · Class X</div></div>
</div>
</div>
<div class="tcard">
<div class="stars">★★★★★</div>
<div class="tquote">"</div>
<p class="ttext">The MUN and debate culture at Bloom shaped my communication skills more than anything. I now work in policy and owe a lot to those formative years.</p>
<div style="display:flex;align-items:center;gap:.8rem;">
<div class="tavatar" style="background:linear-gradient(135deg,#818cf8,#4f46e5);">👩</div>
<div><div class="tname">Kavya Nair</div><div class="trole">Alumni · Batch 2020</div></div>
</div>
</div>
</div>
</div>
<div class="flex gap-3 justify-center mt-8">
<button class="slider-btn" onclick="slide(-1)">←</button>
<button class="slider-btn" onclick="slide(1)">→</button>
</div>
</div>
</section>
<!-- Admissions -->
<section id="admissions" class="sec" style="background:var(--green-pale);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="sec-tag">Join Bloom Family</span>
<h2 class="sec-h">Admissions <em>2026–27</em></h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
<!-- Steps -->
<div class="reveal">
<h3 style="font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--dark);margin-bottom:2rem;">How to Apply</h3>
<div class="step-row">
<div class="step-num">1</div>
<div><div class="step-title">Fill the Online Form</div><div class="step-desc">Complete the enquiry form on this page with your child's details. Our admissions team will reach out within 24 hours.</div></div>
</div>
<div class="step-row">
<div class="step-num">2</div>
<div><div class="step-title">School Visit & Interaction</div><div class="step-desc">Attend a campus tour and a friendly age-appropriate interaction session (Classes I+). No formal test for pre-primary.</div></div>
</div>
<div class="step-row">
<div class="step-num">3</div>
<div><div class="step-title">Document Verification</div><div class="step-desc">Submit birth certificate, previous school records, address proof, and passport-size photographs.</div></div>
</div>
<div class="step-row">
<div class="step-num">4</div>
<div><div class="step-title">Fee Payment & Confirmation</div><div class="step-desc">Pay the registration fee to secure your child's seat. Welcome kit and orientation date will be shared upon confirmation.</div></div>
</div>
<div style="background:#fff;border-radius:18px;padding:1.5rem;margin-top:1.5rem;border-left:4px solid var(--amber);">
<div style="font-weight:800;color:var(--dark);margin-bottom:.5rem;">📌 Available Classes 2026–27</div>
<div style="font-size:.85rem;color:var(--muted);line-height:1.8;">Nursery · LKG · UKG · Class I · II · III · V · VI · VIII · IX · XI (all streams)</div>
</div>
</div>
<!-- Form -->
<div class="adm-form-wrap reveal">
<h3 style="font-family:'Playfair Display',serif;font-size:1.5rem;font-weight:700;color:var(--dark);margin-bottom:1.5rem;">Enquiry Form</h3>
<div class="grid grid-cols-2 gap-0">
<div class="fi" style="padding-right:.75rem;">
<label>Parent Name</label>
<input type="text" placeholder="Full name"/>
</div>
<div class="fi" style="padding-left:.75rem;">
<label>Child's Name</label>
<input type="text" placeholder="Child's full name"/>
</div>
</div>
<div class="fi">
<label>Mobile Number</label>
<input type="tel" placeholder="+91 98765 43210"/>
</div>
<div class="fi">
<label>Email Address</label>
<input type="email" placeholder="parent@email.com"/>
</div>
<div class="fi">
<label>Applying for Class</label>
<select>
<option value="">Select Class</option>
<option>Nursery</option><option>LKG</option><option>UKG</option>
<option>Class I</option><option>Class II</option><option>Class III</option>
<option>Class IV</option><option>Class V</option><option>Class VI</option>
<option>Class VII</option><option>Class VIII</option><option>Class IX</option>
<option>Class X</option><option>Class XI</option><option>Class XII</option>
</select>
</div>
<div class="fi">
<label>Child's Date of Birth</label>
<input type="date"/>
</div>
<div class="fi">
<label>Message / Query (Optional)</label>
<textarea rows="3" placeholder="Any questions or special requirements..."></textarea>
</div>
<button onclick="submitEnquiry()" class="btn-green" style="width:100%;justify-content:center;">
Submit Enquiry 🌸
</button>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="sec" style="background:var(--dark);">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-14 reveal">
<span class="sec-tag" style="color:var(--green-light);">Reach Us</span>
<h2 class="sec-h" style="color:#fff;">Contact <em>Bloom</em></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
<div class="ccard reveal"><div class="cicon">📍</div><div><div class="ctitle">Address</div><div class="cinfo">12, Knowledge Park III,<br/>Greater Noida – 201310</div></div></div>
<div class="ccard reveal"><div class="cicon">📞</div><div><div class="ctitle">Phone</div><div class="cinfo">+91 120 456 7890<br/>+91 98765 11223</div></div></div>
<div class="ccard reveal"><div class="cicon">✉️</div><div><div class="ctitle">Email</div><div class="cinfo">info@bloompublicschool.in<br/>admissions@bloompublicschool.in</div></div></div>
<div class="ccard reveal"><div class="cicon">🕐</div><div><div class="ctitle">School Hours</div><div class="cinfo">Mon–Sat: 7:30 AM – 2:30 PM<br/>Office: 8 AM – 5 PM</div></div></div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 pb-8">
<div>
<div class="flogo">🌸 Bloom</div>
<p class="ftag">Nurturing curious minds from nursery to Class XII since 1998. Where every child blooms.</p>
</div>
<div>
<div class="fh">Quick Links</div>
<a href="#programmes">Programmes</a>
<a href="#why">Why Bloom</a>
<a href="#academics">Academics</a>
<a href="#admissions">Admissions</a>
</div>
<div>
<div class="fh">Campus</div>
<a href="#campus">School Life</a>
<a href="#faculty">Our Faculty</a>
<a href="#notices">News & Events</a>
<a href="#testimonials">Testimonials</a>
</div>
<div>
<div class="fh">Connect</div>
<a href="#">Facebook</a>
<a href="#">Instagram</a>
<a href="#">YouTube</a>
<a href="#">LinkedIn</a>
</div>
</div>
<hr class="fdiv"/>
<p class="fcopy">© 2026 Bloom Public School, Greater Noida. All rights reserved. | Affiliated to CBSE | Reg. No. 2730156</p>
</div>
</footer>
<!-- Floating Apply Button -->
<a href="#admissions" class="admit-float">Apply Now</a>
<!-- Toast -->
<div id="toast">🌸 Enquiry submitted! We'll contact you within 24 hours.</div>
<script>
/* Loader */
window.addEventListener('load', () => {
setTimeout(() => {
document.getElementById('loader').classList.add('out');
startCounters();
spawnLeaves();
}, 1300);
});
/* Floating leaves */
function spawnLeaves() {
const container = document.getElementById('leaves');
const emojis = ['🍃','🌿','🍀','🌱','🌾','🍂'];
for (let i = 0; i < 18; i++) {
const el = document.createElement('div');
el.classList.add('leaf');
el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
el.style.left = Math.random() * 100 + 'vw';
el.style.fontSize = (0.8 + Math.random() * 1.4) + 'rem';
el.style.animationDuration = (10 + Math.random() * 15) + 's';
el.style.animationDelay = (Math.random() * 12) + 's';
container.appendChild(el);
}
}
/* Navbar */
window.addEventListener('scroll', () => {
document.getElementById('nav').classList.toggle('stuck', window.scrollY > 60);
});
/* Mobile menu */
function toggleMob() { document.getElementById('mob-menu').classList.toggle('show'); }
function closeMob() { document.getElementById('mob-menu').classList.remove('show'); }
/* Reveal */
const ro = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('on'); ro.unobserve(e.target); } });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach(el => ro.observe(el));
/* Programme cards */
const po = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
const d = e.target.dataset.d || 0;
setTimeout(() => e.target.classList.add('on'), +d);
po.unobserve(e.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.prog-card').forEach(el => po.observe(el));
/* Counter */
function startCounters() {
document.querySelectorAll('.ctr').forEach(el => {
const target = +el.dataset.t;
const dur = 1800;
const step = target / (dur / 16);
let cur = 0;
const t = setInterval(() => {
cur = Math.min(cur + step, target);
el.textContent = Math.floor(cur).toLocaleString();
if (cur >= target) clearInterval(t);
}, 16);
});
}
/* Testimonial slider */
let slideIndex = 0;
function slide(dir) {
const track = document.getElementById('ttrack');
const cards = track.querySelectorAll('.tcard');
const visible = window.innerWidth < 900 ? 1 : 3;
const max = cards.length - visible;
slideIndex = Math.max(0, Math.min(slideIndex + dir, max));
const w = cards[0].offsetWidth + 24;
track.style.transform = `translateX(-${slideIndex * w}px)`;
}
/* Form submit */
function submitEnquiry() {
const t = document.getElementById('toast');
t.style.display = 'block';
setTimeout(() => t.style.display = 'none', 4000);
}
</script>
</body>
</html>