Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
196 lines (191 loc) · 20.8 KB
/
Copy pathindex.html
File metadata and controls
196 lines (191 loc) · 20.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free School Website Template (HTML) | Hollybrook Primary</title>
<meta name="description" content="Free school website template in one HTML file. News with category filter, upcoming events, admissions steps and term dates with a holiday countdown.">
<meta name="keywords" content="school website template, primary school HTML template free, school website design, academy website template, free HTML template, one page website template">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/education/school/">
<meta name="theme-color" content="#7B1E3A">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free School Website Template (HTML)">
<meta property="og:description" content="Free school website template in one HTML file. News with category filter, upcoming events, admissions steps and term dates with a holiday countdown.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/education/school/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/education/school/screenshot.png"><meta property="og:image:alt" content="Free School Website Template (HTML)">
<meta property="og:image:width" content="1440">
<meta property="og:image:height" content="900">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free School Website Template (HTML)">
<meta name="twitter:description" content="Free school website template in one HTML file. News with category filter, upcoming events, admissions steps and term dates with a holiday countdown.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/education/school/screenshot.png">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 56 12v18c0 16-10 26-24 30C18 56 8 46 8 30V12z' fill='%237B1E3A'/><path d='M32 18l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z' fill='%23F2B233'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://images.unsplash.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=PT+Sans:wght@400;700&display=swap" rel="stylesheet">
<!-- Structured data for this template page. When you use the template, replace it with LocalBusiness or Organization schema for your own business (see README). -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/",
"name": "Free School Website Template (HTML)",
"description": "Free school website template in one HTML file. News with category filter, upcoming events, admissions steps and term dates with a holiday countdown.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/screenshot.png"
},
"isPartOf": {
"@type": "WebSite",
"name": "Free HTML Templates",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
"breadcrumb": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/#template",
"name": "Free School Website Template (HTML)",
"description": "Free school website template in one HTML file. News with category filter, upcoming events, admissions steps and term dates with a holiday countdown.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "school website template, primary school HTML template free, school website design, academy website template",
"author": {
"@type": "Person",
"name": "mmrahmanbappi",
"url": "https://github.com/mmrahmanbappi"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"downloadUrl": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Education Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/education/"
},
{
"@type": "ListItem",
"position": 3,
"name": "School Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/education/school/"
}
]
}
]
}
</script>
<style>
:root{--mr:#7B1E3A;--mr2:#5E142C;--gd:#F2B233;--sk:#E6F1FA;--sk2:#CFE3F4;--ink:#1F2433;--gr:#545B6B;--ln:#E1E5EC;--h:"Baloo 2",system-ui,sans-serif;--b:"PT Sans",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--b);font-size:18px;line-height:1.6;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3{font-family:var(--h);font-weight:700;margin:0;line-height:1.1}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--gd);padding:8px;z-index:99}
:focus-visible{outline:3px solid var(--gd);outline-offset:2px}
.util{background:var(--mr2);color:#F4DCE3;font-size:15px}.util .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding-top:7px;padding-bottom:7px}.util a{color:#fff}
.hd{background:var(--mr);color:#fff}.nav{display:flex;justify-content:space-between;align-items:center;height:86px;position:relative}
.logo{display:flex;gap:12px;align-items:center;text-decoration:none;font-family:var(--h);font-size:24px;line-height:1.05}.logo small{display:block;font-family:var(--b);font-size:13px;opacity:.85}
.menu{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-weight:700}.menu a{text-decoration:none}.menu a:hover{color:var(--gd)}
.burger{display:none;background:none;border:2px solid #fff;color:#fff;width:44px;height:40px;border-radius:10px;font-size:20px;cursor:pointer}
.hero{position:relative;background:var(--sk)}.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding-top:50px;padding-bottom:50px}
.hero h1{font-size:clamp(40px,5.2vw,68px);color:var(--mr)}.hero p{font-size:20px;color:var(--gr);margin:16px 0 26px;max-width:30em}
.btn{display:inline-block;background:var(--mr);color:#fff;text-decoration:none;font:700 17px var(--b);padding:14px 24px;border-radius:12px;border:0;cursor:pointer}.btn.g{background:var(--gd);color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:12px}
.pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.pics img{border-radius:16px;width:100%;aspect-ratio:4/3;object-fit:cover}
.board{background:#fff;border-radius:22px;padding:26px;border:3px solid var(--mr);box-shadow:8px 8px 0 var(--gd)}
.board h2{font-size:26px;color:var(--mr)}.cd{display:flex;gap:10px;margin:14px 0}.cd div{flex:1;background:var(--sk);border-radius:12px;padding:10px;text-align:center}.cd b{display:block;font-family:var(--h);font-size:40px;line-height:1;color:var(--mr)}.cd span{font-size:14px;color:var(--gr)}
.board ul{list-style:none;padding:0;margin:14px 0 0}.board li{padding:10px 0;border-top:1px solid var(--ln);font-size:16px}.board li b{color:var(--mr)}
section{padding:80px 0}.sh{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:28px}.sh h2{font-size:clamp(34px,4.2vw,50px);color:var(--mr)}.sh p{color:var(--gr);margin:6px 0 0;max-width:34em}
.flt{display:flex;flex-wrap:wrap;gap:8px}.flt button{font:700 16px var(--b);background:#fff;border:2px solid var(--ln);border-radius:30px;padding:7px 16px;cursor:pointer;color:var(--ink)}.flt button[aria-pressed=true]{background:var(--mr);color:#fff;border-color:var(--mr)}
.news{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nw{border:2px solid var(--ln);border-radius:18px;padding:22px;display:flex;flex-direction:column}.nw .c{display:inline-block;font-size:14px;font-weight:700;padding:2px 12px;border-radius:20px;background:var(--sk);color:var(--mr);align-self:flex-start}.nw .c.Sport{background:#E3F5E6;color:#1D6B32}.nw .c.Trips{background:#FFF3D6;color:#7A5300}.nw .c.Arts{background:#F7E4F0;color:#8A2468}
.nw h3{font-size:23px;margin:12px 0 6px}.nw p{margin:0;color:var(--gr);font-size:16px;flex:1}.nw time{font-size:14px;color:var(--gr);margin-top:12px}
.ev{background:var(--sk)}.eg{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}.eg>div{min-width:0}
.el{list-style:none;padding:0;margin:0}.el li{display:grid;grid-template-columns:70px 1fr;gap:16px;background:#fff;border-radius:16px;padding:14px 16px;margin-bottom:10px;align-items:center}
.el .d{background:var(--mr);color:#fff;border-radius:12px;text-align:center;padding:6px 0;line-height:1.1}.el .d b{display:block;font-family:var(--h);font-size:28px}.el .d span{font-size:13px}
.el h3{font-size:20px}.el p{margin:2px 0 0;font-size:15px;color:var(--gr)}
.adm .steps{list-style:none;padding:0;margin:0;counter-reset:s}.adm .steps li{counter-increment:s;display:grid;grid-template-columns:54px 1fr;gap:16px;padding:14px 0}
.adm .steps li:before{content:counter(s);width:50px;height:50px;border-radius:50%;background:var(--gd);display:grid;place-items:center;font-family:var(--h);font-size:24px;font-weight:800}
.adm .steps h3{font-size:22px}.adm .steps p{margin:2px 0 0;color:var(--gr);font-size:16px}
.terms{overflow-x:auto}.terms table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;min-width:520px}.terms th,.terms td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--ln);font-size:16px}.terms th{background:var(--mr);color:#fff;font-weight:700}
.terms tr.hol td{background:#FFF7E3}.terms tr.next td{background:var(--gd);font-weight:700}
.visit .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.visit img{border-radius:22px;width:100%;aspect-ratio:3/2;object-fit:cover}
footer{background:var(--mr);color:#F4DCE3;padding:34px 0;font-size:15px}footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}footer a{color:#fff}
@media (max-width:960px){.hero .wrap,.eg,.visit .wrap{grid-template-columns:1fr}.news{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.burger{display:block}.menu{display:none;position:absolute;top:86px;left:0;right:0;background:var(--mr);flex-direction:column;padding:18px 22px;z-index:30}.menu.open{display:flex}.news{grid-template-columns:1fr}.board{box-shadow:5px 5px 0 var(--gd)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
</style>
</head>
<body>
<a class="skip" href="#main">Skip to content</a>
<!-- Template notice bar: delete this block before you publish your own site -->
<div id="template-bar" style="background:#111;color:#fff;font:500 14px/1.4 system-ui,sans-serif;text-align:center;padding:9px 16px">Free HTML template. <a href="index.html" download="school.html" style="color:#FFD166;font-weight:700">Download this template (free)</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/" style="color:#fff">See all free templates</a></div>
<div class="util"><div class="wrap"><span>School office: <a href="tel:+441632960418">01632 960418</a></span><span>Report an absence by 9am on the same number</span></div></div>
<header class="hd"><nav class="wrap nav" aria-label="Main"><a href="#" class="logo"><svg width="44" height="48" viewBox="0 0 64 64" aria-hidden="true"><path d="M32 4 56 12v18c0 16-10 26-24 30C18 56 8 46 8 30V12z" fill="#fff"/><path d="M32 18l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z" fill="#F2B233"/></svg><span>Hollybrook Primary<small>Kind, curious, brave</small></span></a>
<ul class="menu" id="menu"><li><a href="#news">News</a></li><li><a href="#events">Events</a></li><li><a href="#admissions">Admissions</a></li><li><a href="#terms">Term dates</a></li><li><a href="#visit">Contact</a></li></ul><button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu">☰</button></nav></header>
<main id="main">
<section class="hero" style="padding:0" aria-labelledby="h1"><div class="wrap"><div><h1 id="h1">A small school where every child is known by name.</h1><p>Hollybrook is a primary school for 4 to 11 year olds in Northfield, with 210 pupils, one class per year and a big green field out the back.</p><div class="row"><a class="btn" href="#admissions">Starting school in 2027</a><a class="btn g" href="#visit">Book a tour</a></div>
<div class="pics"><img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?w=700&q=75&auto=format&fit=crop" alt="Teacher at the front of a classroom with pupils raising hands" width="700" height="525" fetchpriority="high"><img src="https://images.unsplash.com/photo-1588072432836-e10032774350?w=700&q=75&auto=format&fit=crop" alt="Young children working together at a classroom table" width="700" height="525"></div></div>
<aside class="board" aria-labelledby="nb"><h2 id="nb">Notice board</h2><p style="margin:6px 0 0;font-size:16px" id="nxt"></p><div class="cd" aria-live="polite"><div><b id="cdd">0</b><span>days</span></div><div><b id="cdw">0</b><span>school weeks</span></div></div>
<ul><li><b>Parents' evening</b> sign-up is now open on the school app.</li><li><b>Flu spray</b> for Reception to Year 6, consent forms due Friday.</li><li><b>Lost property</b> will go to charity at half term. Please check!</li></ul></aside></div></section>
<section id="news" aria-labelledby="n1"><div class="wrap"><div class="sh"><div><h2 id="n1">School news</h2><p>What's been happening in class, on the field and on trips.</p></div><div class="flt" id="flt" role="group" aria-label="Filter news"><button type="button" aria-pressed="true" data-c="all">All</button><button type="button" aria-pressed="false" data-c="Trips">Trips</button><button type="button" aria-pressed="false" data-c="Sport">Sport</button><button type="button" aria-pressed="false" data-c="Arts">Arts</button><button type="button" aria-pressed="false" data-c="Notices">Notices</button></div></div>
<div class="news" id="nws" aria-live="polite"></div></div></section>
<section class="ev" id="events" aria-labelledby="e1"><div class="wrap eg"><div><div class="sh"><div><h2 id="e1">Coming up</h2><p>Parents and carers are welcome at everything marked "open".</p></div></div><ul class="el" id="el"></ul></div>
<div class="adm" id="admissions"><div class="sh"><div><h2>Admissions</h2><p>Starting in Reception in September 2027? Here's what to do and when.</p></div></div>
<ol class="steps"><li><div><h3>Come and look around</h3><p>Tours every Tuesday at 9:30am from October. Book online or call the office.</p></div></li><li><div><h3>Apply through the council</h3><p>Apply on the council website by 15 January 2027. Put us in your list of preferences.</p></div></li><li><div><h3>Offer day</h3><p>You'll hear from the council on 16 April 2027. Accept your place within two weeks.</p></div></li><li><div><h3>Settling in</h3><p>Stay and play sessions in June and a home visit from your child's teacher in July.</p></div></li></ol></div></div></section>
<section id="terms" aria-labelledby="t1"><div class="wrap"><div class="sh"><div><h2 id="t1">Term dates 2026 to 2027</h2><p>The next holiday is highlighted in yellow. INSET days (school closed to pupils) are listed too.</p></div></div><div class="terms"><table><thead><tr><th scope="col">Term or holiday</th><th scope="col">From</th><th scope="col">To</th></tr></thead><tbody id="tt"></tbody></table></div></div></section>
<section class="visit" id="visit" aria-labelledby="v1"><div class="wrap"><img src="https://images.unsplash.com/photo-1522661067900-ab829854a57f?w=900&q=75&auto=format&fit=crop" alt="Girl writing on a chalkboard" width="900" height="600" loading="lazy"><div><h2 id="v1" style="font-size:clamp(32px,4vw,46px);color:var(--mr)">Visit us</h2><p>Hollybrook Primary School, Beech Lane, Northfield, NF4 2QT.</p><p>School day: gates open 8:40am, finish 3:15pm. Breakfast club from 7:45am and after school club until 5:45pm.</p><p>Email office@hollybrook.example.sch.uk or call 01632 960418.</p></div></div></section>
</main>
<footer><div class="wrap"><p>© <span id="yr"></span> Hollybrook Primary School</p><p><a href="https://unsplash.com">Photos: Unsplash</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">More free templates</a></p></div></footer>
<script>
(()=>{const $=id=>document.getElementById(id);
const N=[["Trips","Year 4 visit the Roman fort","Togas, shields and a very windy wall walk. Photos are on the class page.","2026-09-18"],["Sport","Football team wins the cup","Our Year 5 and 6 team beat Oakfield 3 to 1 in the local league final.","2026-09-15"],["Notices","New lunch menu from October","Three weeks of new meals, chosen by our School Council. See the menu online.","2026-09-12"],["Arts","Autumn art show","Every child has one piece in the hall display. Come and see it after school.","2026-09-10"],["Sport","Swimming for Year 3","Lessons start at Northfield Pool on Wednesdays. Kit list on the app.","2026-09-08"],["Trips","Year 6 residential dates","Five days in the Lake District in May. Deposit letters go home this week.","2026-09-04"]];
function news(c){$('nws').innerHTML=N.filter(n=>c==='all'||n[0]===c).map(n=>`<article class="nw"><span class="c ${n[0]}">${n[0]}</span><h3>${n[1]}</h3><p>${n[2]}</p><time datetime="${n[3]}">${new Date(n[3]).toLocaleDateString('en-GB',{day:'numeric',month:'long',year:'numeric'})}</time></article>`).join('')}
$('flt').onclick=e=>{const b=e.target.closest('button');if(!b)return;$('flt').querySelectorAll('button').forEach(x=>x.setAttribute('aria-pressed',x===b));news(b.dataset.c)};news('all');
const E=[[7,"Harvest assembly","9:15am in the hall. Open to families."],[12,"Parents' evening","3:30pm to 7pm. Book a slot on the app."],[16,"Cake sale","After school. All money goes to the new library."],[24,"Reception phonics workshop","6pm. Learn how we teach reading."],[33,"Bonfire night disco","5pm to 7pm, KS2 only. Tickets £3."]];
const now=new Date();now.setHours(0,0,0,0);$('el').innerHTML=E.map(e=>{const d=new Date(now.getTime()+e[0]*864e5);return`<li><div class="d"><b>${d.getDate()}</b><span>${d.toLocaleDateString('en-GB',{month:'short'})}</span></div><div><h3>${e[1]}</h3><p>${e[2]}</p></div></li>`}).join('');
const T=[["Autumn term starts","2026-09-03","2026-10-23",0],["October half term","2026-10-26","2026-10-30",1],["Autumn term continues","2026-11-02","2026-12-18",0],["Christmas holiday","2026-12-21","2027-01-01",1],["Spring term starts","2027-01-05","2027-02-12",0],["February half term","2027-02-15","2027-02-19",1],["Spring term continues","2027-02-22","2027-03-26",0],["Easter holiday","2027-03-29","2027-04-09",1],["Summer term starts","2027-04-12","2027-05-28",0],["May half term","2027-05-31","2027-06-04",1],["Summer term continues","2027-06-07","2027-07-21",0],["INSET days","2026-09-01","2026-09-02",2]];
const nh=T.filter(t=>t[3]===1&&new Date(t[1])>=now).sort((a,b)=>new Date(a[1])-new Date(b[1]))[0];
const f=s=>new Date(s).toLocaleDateString('en-GB',{weekday:'short',day:'numeric',month:'short',year:'numeric'});
$('tt').innerHTML=T.map(t=>`<tr class="${t===nh?'next':t[3]===1?'hol':''}"><td>${t[0]}${t===nh?' (next holiday)':''}</td><td>${f(t[1])}</td><td>${f(t[2])}</td></tr>`).join('');
if(nh){const dd=Math.ceil((new Date(nh[1])-now)/864e5);$('cdd').textContent=dd;$('cdw').textContent=Math.max(0,Math.round(dd/7));$('nxt').textContent=`${nh[0]} starts on ${f(nh[1])}.`}
})();
</script>
<script>
(()=>{const b=document.querySelector('.burger'),m=document.getElementById('menu'),y=document.getElementById('yr');
if(b&&m){b.addEventListener('click',()=>{const o=m.classList.toggle('open');b.setAttribute('aria-expanded',o)});
m.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{m.classList.remove('open');b.setAttribute('aria-expanded',false)}))}
if(y)y.textContent=new Date().getFullYear()})();
</script>
</body>
</html>