Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
229 lines (228 loc) · 30.9 KB
/
Copy pathindex.html
File metadata and controls
229 lines (228 loc) · 30.9 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>6 Free Events & Community Website Templates (HTML) 2026</title><meta name="description" content="6 free events & community website templates in one HTML file: wedding, conference, nonprofit and charity and more. Mobile friendly and SEO ready."><meta name="robots" content="index, follow, max-image-preview:large"><link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/events-community/">
<meta property="og:type" content="website"><meta property="og:site_name" content="Free HTML Templates"><meta property="og:title" content="6 Free Events & Community Website Templates (HTML) 2026"><meta property="og:description" content="6 free events & community website templates in one HTML file: wedding, conference, nonprofit and charity and more. Mobile friendly and SEO ready."><meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/events-community/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/events-community/og.jpg"><meta property="og:image:alt" content="6 Free Events & Community Website Templates (HTML) 2026"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><link rel="image_src" href="https://mmrahmanbappi.github.io/100-free-html-templates/business/digital-marketing-agency/screenshot.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="6 Free Events & Community Website Templates (HTML) 2026"><meta name="twitter:description" content="6 free events & community website templates in one HTML file: wedding, conference, nonprofit and charity and more. Mobile friendly and SEO ready."><meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/events-community/og.jpg">
<meta name="theme-color" content="#16181F"><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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' rx='14' fill='%2316181F'/><text x='32' y='42' text-anchor='middle' font-family='Arial' font-weight='700' font-size='26' fill='%23FFC53D'>100</text></svg>">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "CollectionPage",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/",
"name": "6 Free Events & Community Website Templates (HTML) 2026",
"description": "6 free events & community website templates in one HTML file: wedding, conference, nonprofit and charity and more. Mobile friendly and SEO ready.",
"inLanguage": "en",
"isPartOf": {
"@type": "WebSite",
"name": "Free HTML Templates",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
"mainEntity": {
"@type": "ItemList",
"numberOfItems": 6,
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/wedding/",
"name": "Amara & Theo: free wedding website template"
},
{
"@type": "ListItem",
"position": 2,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/conference-event/",
"name": "Buildwell Summit: free conference website template"
},
{
"@type": "ListItem",
"position": 3,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/nonprofit-charity/",
"name": "Clearwater Fund: free nonprofit and charity website template"
},
{
"@type": "ListItem",
"position": 4,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/community-center/",
"name": "Maple Street Community Centre: free community center website template"
},
{
"@type": "ListItem",
"position": 5,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/musician-band/",
"name": "The Low Tides: free band and musician website template"
},
{
"@type": "ListItem",
"position": 6,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/podcast/",
"name": "Second Draft: free podcast website template"
}
]
}
},
{
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Events & Community Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/events-community/"
}
]
},
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Are these HTML templates really free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Every template is free for personal and commercial use under the MIT license. You don't need to sign up, pay or add a credit link."
}
},
{
"@type": "Question",
"name": "Do I need to know coding to use them?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Basic editing is enough. Open the index.html file in a text editor such as VS Code or Notepad, change the words, phone numbers and image links, then save the file."
}
},
{
"@type": "Question",
"name": "How do I put a template online for free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Upload the index.html file to GitHub Pages, Netlify or Cloudflare Pages. All three have free plans and take about ten minutes to set up."
}
},
{
"@type": "Question",
"name": "Can I use a template for a client's website?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. The MIT license lets you use, change and sell websites built with these templates, including work you do for clients."
}
},
{
"@type": "Question",
"name": "Are the templates good for SEO?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Each template has a page title and description, social sharing tags, schema markup, alt text on every image and a clear heading order, so Google can read and rank the page."
}
},
{
"@type": "Question",
"name": "Will the templates work on mobile phones?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Every template adjusts to phones, tablets and desktop screens, and has been checked at common screen sizes."
}
}
]
}
]
}
</script>
<style>*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}
:root{--ink:#16181F;--ink2:#2A2D38;--mu:#5E6372;--bg:#EDEFF3;--card:#fff;--ln:#DADDE5;--ac:#3D5AFE;--ac2:#2C45D6;--yl:#FFC53D;--h:"Bricolage Grotesque",system-ui,sans-serif;--b:"Hanken Grotesk",system-ui,sans-serif}
html{scroll-behavior:smooth}body{margin:0;font-family:var(--b);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px}
img{max-width:100%;height:auto;display:block}a{color:inherit}.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--yl);padding:8px;z-index:99}:focus-visible{outline:3px solid var(--yl);outline-offset:2px}
h1,h2,h3{font-family:var(--h);margin:0;letter-spacing:-.02em}
.top{display:flex;justify-content:space-between;align-items:center;height:70px;gap:16px}.brand{display:flex;align-items:center;gap:10px;font-family:var(--h);font-weight:800;font-size:20px;text-decoration:none}
.brand i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--yl);font-style:normal;font-size:15px}
.top nav{display:flex;gap:22px;font-weight:600;font-size:15px}.top nav a{text-decoration:none}.top nav a:hover{color:var(--ac)}
.hero{padding:26px 0 70px;overflow:hidden}.hg{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}.hg>*{min-width:0}
.crumb{font-size:15px;color:var(--mu);margin-bottom:14px}.crumb a{color:var(--ac);font-weight:600}
.kick{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ln);border-radius:40px;padding:6px 14px 6px 8px;font-size:14px;font-weight:600;margin-bottom:22px}.kick b{background:var(--yl);border-radius:20px;padding:2px 10px}
.hero h1{font-size:clamp(46px,6.6vw,92px);line-height:.95;font-weight:800}.hero h1 .num{display:block;font-size:1.55em;line-height:.85;color:transparent;-webkit-text-stroke:2.5px var(--ink);letter-spacing:-.04em}
.hero h1 .hl{background:linear-gradient(transparent 62%,var(--yl) 62% 92%,transparent 92%)}
.hero p.lead{font-size:20px;color:var(--mu);max-width:34em;margin:22px 0 28px}
.btns{display:flex;gap:12px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;text-decoration:none;font:700 16px var(--b);padding:14px 22px;border-radius:12px}.btn:hover{background:var(--ac)}.btn.l{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ln)}.btn.l:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:34px;padding:0;list-style:none}.stats li{font-size:14px;color:var(--mu)}.stats b{display:block;font-family:var(--h);font-size:30px;color:var(--ink);line-height:1.1}
.wall{height:560px;display:grid;grid-template-columns:1fr 1fr;gap:16px;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);transform:rotate(-4deg)}
.col{display:flex;flex-direction:column;gap:16px;animation:up 40s linear infinite}.col.b{animation-direction:reverse;animation-duration:46s}
.col a{display:block;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 14px 30px rgba(22,24,31,.14);border:4px solid #fff;transition:transform .25s}.col a:hover{transform:scale(1.03)}.col img{aspect-ratio:16/10;object-fit:cover;object-position:top}
@keyframes up{to{transform:translateY(-50%)}}
.bar{position:sticky;top:0;z-index:40;background:rgba(237,239,243,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.bar .wrap{display:flex;gap:14px;align-items:center;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.srch{position:relative;flex:1 1 280px;max-width:420px}.srch input{width:100%;font:16px var(--b);padding:11px 14px 11px 40px;border:1.5px solid var(--ln);border-radius:12px;background:#fff}.srch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%)}
.chips{display:flex;gap:6px;flex-wrap:wrap;order:3;flex:1 1 100%;padding:2px}.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;font:600 14px var(--b);background:#fff;border:1.5px solid var(--ln);border-radius:40px;padding:8px 14px;cursor:pointer;color:var(--ink);white-space:nowrap}.chips button span{color:var(--mu);font-weight:500;margin-left:4px}
.chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.chips button[aria-pressed=true] span{color:#B9BDC9}
.count{font-size:14px;color:var(--mu);white-space:nowrap;margin-left:auto}
main{padding:40px 0 30px}.sec{margin-bottom:64px;scroll-margin-top:90px}.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.sh h2{font-size:clamp(28px,3.4vw,42px);font-weight:800}.sh p{color:var(--mu);margin:6px 0 0;max-width:56em;font-size:16px}.sh a.all{font-weight:700;color:var(--ac);text-decoration:none;white-space:nowrap}.sh a.all:hover{text-decoration:underline}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.card{background:var(--card);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--ln);transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(22,24,31,.12)}
.shot{position:relative;background:var(--c);padding:12px 12px 0}.shot .chrome{display:flex;gap:5px;padding:0 4px 8px}.shot .chrome i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}
.shot img{border-radius:8px 8px 0 0;aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}
.idx{position:absolute;right:14px;top:8px;font:700 12px var(--b);color:rgba(255,255,255,.85)}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}.card .ty{font-size:13px;font-weight:700;color:var(--mu);display:flex;align-items:center;gap:6px}.card .ty i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.card h3{font-size:21px;margin:4px 0 6px}.card p{color:var(--mu);font-size:15px;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .fn{font-size:13px;color:var(--mu);margin:-6px 0 14px}.links{margin-top:auto;display:flex;gap:8px}.links a{flex:1;text-align:center;text-decoration:none;font-weight:700;padding:10px;border-radius:10px;font-size:14px;border:1.5px solid var(--ln)}
.links a:first-child{background:var(--ink);color:#fff;border-color:var(--ink)}.links a:first-child:hover{background:var(--ac);border-color:var(--ac)}.links a:last-child:hover{border-color:var(--ink)}
.none{background:#fff;border-radius:18px;padding:40px;text-align:center;color:var(--mu)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-bottom:64px}.how div{background:var(--ink);color:#fff;border-radius:18px;padding:24px;position:relative;overflow:hidden}
.how b{display:block;font-family:var(--h);font-size:22px;margin:8px 0 6px}.how p{margin:0;color:#B9BDC9;font-size:15px}.how span{font-family:var(--h);font-weight:800;font-size:54px;line-height:1;color:var(--yl)}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:40px}.faq details{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:16px 20px}.faq summary{font-weight:700;cursor:pointer}.faq p{margin:10px 0 0;color:var(--mu);font-size:16px}
footer{border-top:1px solid var(--ln);padding:28px 0 36px;color:var(--mu);font-size:14px}footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}footer a{font-weight:600}
@media (max-width:980px){.hg{grid-template-columns:1fr}.wall{height:340px;transform:rotate(-3deg)}.how{grid-template-columns:1fr}.faq{grid-template-columns:1fr}}
@media (max-width:760px){.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:30px}.srch{max-width:none}}
@media (max-width:640px){.top nav{display:none}.srch{flex:1 1 100%}.count{margin-left:0}.hero h1 .num{-webkit-text-stroke-width:2px}.wall{height:260px}.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.col{animation:none}.card,.col a{transition:none}}/* Shared look with mmrahmanbappi.github.io */
:root{--ink:#171518;--ink2:#403b42;--mu:#5f5d61;--bg:#eeeeea;--card:#fff;--ln:#d9d8d2;--ac:#b23a0a;--ac2:#8f2f08;--yl:#ff7b4f;--h:"Inter",system-ui,sans-serif;--b:"Inter",system-ui,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--ink:#f2f1ed;--ink2:#d7d5d9;--mu:#a3a1a6;--bg:#141316;--card:#222126;--ln:#302f35;--ac:#ff7b4f;--ac2:#ff9670;color-scheme:dark}}
h1,h2,h3{letter-spacing:-.035em}h1{font-weight:560!important}h2,h3{font-weight:600!important}
header.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px)}
.brand i{border-radius:50%!important}
.top nav a.gh{border:1.5px solid var(--ink);border-radius:999px;padding:.35rem 1rem;color:var(--ink);font-weight:600}
.btn{border-radius:999px!important}
.idx{background:rgba(0,0,0,.6);color:#fff!important;padding:1px 7px;border-radius:6px}
@media (prefers-color-scheme:dark){:root{--ac:#ff8a63}}
.brand i{color:var(--bg)!important}.kick{background:var(--card)}.kick b{color:#fff}
.btn{color:var(--bg)}.btn.l{background:var(--card)}.col a{background:var(--card)}.srch input{background:var(--card);color:var(--ink)}
.chips button{background:var(--card);color:var(--ink)}.chips button[aria-pressed=true]{color:var(--bg)}.links a:first-child{color:var(--bg)}
.none{background:var(--card)}.how div{color:var(--bg)}.faq details{background:var(--card)}
.bar{background:color-mix(in srgb,var(--bg) 92%,transparent)!important}.chips button span{color:inherit!important;background:color-mix(in srgb,currentColor 14%,transparent)!important}
.kick b{background:#b23a0a!important;color:#fff!important}
@media (max-width:700px){.top nav a:not(.gh){display:none}}</style>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-D8QGLFQD12"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-D8QGLFQD12');
</script>
</head><body>
<a class="skip" href="#templates">Skip to templates</a>
<header class="wrap top"><a class="brand" href="https://mmrahmanbappi.github.io/100-free-html-templates/"><i>100</i>Free HTML Templates</a><nav aria-label="Main"><a href="https://mmrahmanbappi.github.io/100-free-html-templates/#templates">Templates</a><a href="#how">How it works</a><a href="#faq">FAQ</a><a href="https://mmrahmanbappi.github.io/">All projects</a><a class="gh" href="https://github.com/mmrahmanbappi/100-free-html-templates">GitHub</a></nav></header>
<section class="hero" aria-labelledby="h1"><div class="wrap hg"><div><div class='crumb'><a href='../'>All templates</a> / Events & Community</div><span class="kick"><b>Free</b>MIT license, no sign up</span><h1 id="h1">Free events & community <span class='hl'>website templates</span></h1><p class="lead">Websites for weddings, conferences, charities, community centres, bands and podcasts, with working countdowns, RSVP forms, agendas and ticket pickers.</p><div class="btns"><a class="btn" href="#templates">Browse the templates</a><a class="btn l" href="#how">How to use them</a></div><ul class='stats'><li><b>6</b>templates</li><li><b>1</b>HTML file each</li><li><b>MIT</b>license</li></ul></div><div class="wall" aria-hidden="true"><div class="col"><a href="wedding/" tabindex="-1"><img src="wedding/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="nonprofit-charity/" tabindex="-1"><img src="nonprofit-charity/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="musician-band/" tabindex="-1"><img src="musician-band/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="wedding/" tabindex="-1"><img src="wedding/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="nonprofit-charity/" tabindex="-1"><img src="nonprofit-charity/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="musician-band/" tabindex="-1"><img src="musician-band/screenshot.png" alt="" width="1440" height="900" loading="eager"></a></div><div class="col b"><a href="conference-event/" tabindex="-1"><img src="conference-event/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="community-center/" tabindex="-1"><img src="community-center/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="podcast/" tabindex="-1"><img src="podcast/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="conference-event/" tabindex="-1"><img src="conference-event/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="community-center/" tabindex="-1"><img src="community-center/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="podcast/" tabindex="-1"><img src="podcast/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a></div></div></div></section>
<div class='bar'><div class='wrap'><div class='srch' role='search'><svg width='16' height='16' viewBox='0 0 24 24' aria-hidden='true'><circle cx='10' cy='10' r='7' fill='none' stroke='#5E6372' stroke-width='2.5'/><path d='M15 15l6 6' stroke='#5E6372' stroke-width='2.5'/></svg><label for='q' style='position:absolute;left:-999px'>Search templates</label><input id='q' type='search' placeholder='Search: dentist, booking, dark...'></div><span class='count' id='cnt' aria-live='polite'></span></div></div>
<main id="templates"><div class="wrap"><section class='sec' aria-labelledby='cat-t'><div class='sh'><div><h2 id='cat-t'>6 free events & community templates</h2><p>Click a template to see the live demo, or download it straight away.</p></div><a class='all' href='../'>All 100 templates</a></div><div class='grid'><article class="card" data-cat="events-community" data-s="amara & theo wedding a romantic wedding site in eucalyptus and blush with a script heading. it counts down to the big day, tells the couple's story, and the rsvp asks each guest for their meal. wedding website template, wedding rsvp html template free, save the date website template" style="--c:#7C9A8E"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#079</span><img src="wedding/screenshot.png" alt="Amara & Theo, free wedding website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Wedding</span><h3>Amara & Theo</h3><p>A romantic wedding site in eucalyptus and blush with a script heading. It counts down to the big day, tells the couple's story, and the RSVP asks each guest for their meal.</p><div class="fn">Pinyon Script + EB Garamond</div><div class="links"><a href="wedding/">Live demo</a><a href="wedding/index.html" download="wedding.html">Download</a></div></div></article><article class="card" data-cat="events-community" data-s="buildwell summit conference a bold tech conference site in midnight, magenta and mint. filter speakers by track, star talks to build your own schedule, and pick ticket quantities with a running total. conference website template, event html template free, tech conference website template" style="--c:#14142B"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#080</span><img src="conference-event/screenshot.png" alt="Buildwell Summit, free conference website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Conference</span><h3>Buildwell Summit</h3><p>A bold tech conference site in midnight, magenta and mint. Filter speakers by track, star talks to build your own schedule, and pick ticket quantities with a running total.</p><div class="fn">Familjen Grotesk</div><div class="links"><a href="conference-event/">Live demo</a><a href="conference-event/index.html" download="conference-event.html">Download</a></div></div></article><article class="card" data-cat="events-community" data-s="clearwater fund nonprofit and charity a hopeful clean water charity in deep blue and sunshine yellow. pick a monthly or one-time amount and see exactly what it pays for, watch the appeal bar move, and sign up to volunteer. charity website template, nonprofit html template free, donation website template" style="--c:#0B4F6C"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#081</span><img src="nonprofit-charity/screenshot.png" alt="Clearwater Fund, free nonprofit and charity website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Nonprofit and Charity</span><h3>Clearwater Fund</h3><p>A hopeful clean water charity in deep blue and sunshine yellow. Pick a monthly or one-time amount and see exactly what it pays for, watch the appeal bar move, and sign up to volunteer.</p><div class="fn">Spectral + Mukta</div><div class="links"><a href="nonprofit-charity/">Live demo</a><a href="nonprofit-charity/index.html" download="nonprofit-charity.html">Download</a></div></div></article><article class="card" data-cat="events-community" data-s="maple street community centre community center a friendly neighbourhood centre in teal, maple red and yellow. it shows if the centre is open now, filters weekly activities by age, prices room hire with a community discount and lists events by month. community center website template, community centre html template free, village hall website" style="--c:#1D7874"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#082</span><img src="community-center/screenshot.png" alt="Maple Street Community Centre, free community center website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Community Center</span><h3>Maple Street Community Centre</h3><p>A friendly neighbourhood centre in teal, maple red and yellow. It shows if the centre is open now, filters weekly activities by age, prices room hire with a community discount and lists events by month.</p><div class="fn">Bitter + Kumbh Sans</div><div class="links"><a href="community-center/">Live demo</a><a href="community-center/index.html" download="community-center.html">Download</a></div></div></article><article class="card" data-cat="events-community" data-s="the low tides band and musician a loud indie band site in ultraviolet and sunset orange. the album player runs through the track list, tour dates filter by region with sold out shows marked, and merch goes into a bag. band website template, musician html template free, music website template" style="--c:#3D1C6B"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#083</span><img src="musician-band/screenshot.png" alt="The Low Tides, free band and musician website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Band and Musician</span><h3>The Low Tides</h3><p>A loud indie band site in ultraviolet and sunset orange. The album player runs through the track list, tour dates filter by region with sold out shows marked, and merch goes into a bag.</p><div class="fn">Dela Gothic One + Instrument Sans</div><div class="links"><a href="musician-band/">Live demo</a><a href="musician-band/index.html" download="musician-band.html">Download</a></div></div></article><article class="card" data-cat="events-community" data-s="second draft podcast a bold podcast site in navy, orange and sand. search and filter episodes, play any of them in the sticky player with skip and speed buttons, meet the hosts and copy the rss link. podcast website template, podcast html template free, podcast landing page" style="--c:#003049"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#084</span><img src="podcast/screenshot.png" alt="Second Draft, free podcast website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Podcast</span><h3>Second Draft</h3><p>A bold podcast site in navy, orange and sand. Search and filter episodes, play any of them in the sticky player with skip and speed buttons, meet the hosts and copy the RSS link.</p><div class="fn">Anton + Radio Canada</div><div class="links"><a href="podcast/">Live demo</a><a href="podcast/index.html" download="podcast.html">Download</a></div></div></article></div></section><p class='none' id='none' hidden>No templates match that search. Try a simpler word, like shop or clinic.</p><section class='sec' id='how' aria-labelledby='how-t'><div class='sh'><div><h2 id='how-t'>How to use a template</h2><p>Three steps, no special software.</p></div></div><div class='how'><div><span>1</span><b>Download</b><p>Pick a template, open the live demo and click Download. You get one HTML file.</p></div><div><span>2</span><b>Edit</b><p>Open the file in any text editor and change the words, colours and photos to match your business.</p></div><div><span>3</span><b>Publish</b><p>Upload the file to GitHub Pages, Netlify or your own web host. Your site is live.</p></div></div></section><section class='sec' aria-labelledby='faq'><div class='sh'><div><h2 id='faq'>Questions people ask</h2></div></div><div class='faq'><details open><summary>Are these HTML templates really free?</summary><p>Yes. Every template is free for personal and commercial use under the MIT license. You don't need to sign up, pay or add a credit link.</p></details><details><summary>Do I need to know coding to use them?</summary><p>No. Basic editing is enough. Open the index.html file in a text editor such as VS Code or Notepad, change the words, phone numbers and image links, then save the file.</p></details><details><summary>How do I put a template online for free?</summary><p>Upload the index.html file to GitHub Pages, Netlify or Cloudflare Pages. All three have free plans and take about ten minutes to set up.</p></details><details><summary>Can I use a template for a client's website?</summary><p>Yes. The MIT license lets you use, change and sell websites built with these templates, including work you do for clients.</p></details><details><summary>Are the templates good for SEO?</summary><p>Yes. Each template has a page title and description, social sharing tags, schema markup, alt text on every image and a clear heading order, so Google can read and rank the page.</p></details><details><summary>Will the templates work on mobile phones?</summary><p>Yes. Every template adjusts to phones, tablets and desktop screens, and has been checked at common screen sizes.</p></details></div></section></div></main>
<footer><div class="wrap"><span>Free, MIT-licensed HTML website templates. Photos from Unsplash. Updated September 2026.</span><span><a href="https://github.com/mmrahmanbappi/100-free-html-templates">Source on GitHub</a></span></div></footer>
<script>
(()=>{const q=document.getElementById('q'),chips=document.getElementById('chips'),cnt=document.getElementById('cnt'),none=document.getElementById('none');if(!q)return;let cat='all';
const cards=[...document.querySelectorAll('.card')],secs=[...document.querySelectorAll('.sec')];
function run(){const v=q.value.trim().toLowerCase();let n=0;cards.forEach(c=>{const ok=(cat==='all'||c.dataset.cat===cat)&&(!v||c.dataset.s.includes(v));c.hidden=!ok;if(ok)n++});
secs.forEach(s=>{s.hidden=![...s.querySelectorAll('.card')].some(c=>!c.hidden)});cnt.textContent='Showing '+n+' of '+cards.length;none.hidden=n>0}
q.addEventListener('input',run);if(chips)chips.addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;chips.querySelectorAll('button').forEach(x=>x.setAttribute('aria-pressed',x===b));b.scrollIntoView({block:'nearest',inline:'center'});cat=b.dataset.c;run();document.getElementById('templates').scrollIntoView({behavior:matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth'})});run();})();
</script>
</body></html>