Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
253 lines (252 loc) · 37.6 KB
/
Copy pathindex.html
File metadata and controls
253 lines (252 loc) · 37.6 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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>10 Free Business Website Templates (HTML) 2026</title><meta name="description" content="10 free business website templates in one HTML file: digital marketing agency, corporate company, IT service company 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/business/">
<meta property="og:type" content="website"><meta property="og:site_name" content="Free HTML Templates"><meta property="og:title" content="10 Free Business Website Templates (HTML) 2026"><meta property="og:description" content="10 free business website templates in one HTML file: digital marketing agency, corporate company, IT service company and more. Mobile friendly and SEO ready."><meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/business/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/business/og.jpg"><meta property="og:image:alt" content="10 Free Business 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="10 Free Business Website Templates (HTML) 2026"><meta name="twitter:description" content="10 free business website templates in one HTML file: digital marketing agency, corporate company, IT service company and more. Mobile friendly and SEO ready."><meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/business/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/business/",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/",
"name": "10 Free Business Website Templates (HTML) 2026",
"description": "10 free business website templates in one HTML file: digital marketing agency, corporate company, IT service company 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": 10,
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/digital-marketing-agency/",
"name": "Brightline: free digital marketing agency website template"
},
{
"@type": "ListItem",
"position": 2,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/corporate-company/",
"name": "Meridian Group: free corporate company website template"
},
{
"@type": "ListItem",
"position": 3,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/it-service-company/",
"name": "Northstack: free it service company website template"
},
{
"@type": "ListItem",
"position": 4,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/consulting-firm/",
"name": "Halden & Rowe: free consulting firm website template"
},
{
"@type": "ListItem",
"position": 5,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/startup-company/",
"name": "Fernway: free startup company website template"
},
{
"@type": "ListItem",
"position": 6,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/creative-agency/",
"name": "Studio Kiln: free creative agency website template"
},
{
"@type": "ListItem",
"position": 7,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/web-development-agency/",
"name": "Codefield: free web development agency website template"
},
{
"@type": "ListItem",
"position": 8,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/social-media-marketing/",
"name": "Loop Social: free social media marketing agency website template"
},
{
"@type": "ListItem",
"position": 9,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/branding-studio/",
"name": "Northfold: free branding studio website template"
},
{
"@type": "ListItem",
"position": 10,
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/business/freelancer-team/",
"name": "Tandem: free freelancer team 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": "Business Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/business/"
}
]
},
{
"@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> / Business</div><span class="kick"><b>Free</b>MIT license, no sign up</span><h1 id="h1">Free business <span class='hl'>website templates</span></h1><p class="lead">Website templates for agencies, companies and service businesses. Each one is a single HTML file with real example text, photos and a contact section, so you only need to swap in your own details.</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>10</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="digital-marketing-agency/" tabindex="-1"><img src="digital-marketing-agency/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="it-service-company/" tabindex="-1"><img src="it-service-company/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="startup-company/" tabindex="-1"><img src="startup-company/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="web-development-agency/" tabindex="-1"><img src="web-development-agency/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="branding-studio/" tabindex="-1"><img src="branding-studio/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="digital-marketing-agency/" tabindex="-1"><img src="digital-marketing-agency/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="it-service-company/" tabindex="-1"><img src="it-service-company/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="startup-company/" tabindex="-1"><img src="startup-company/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="web-development-agency/" tabindex="-1"><img src="web-development-agency/screenshot.png" alt="" width="1440" height="900" loading="eager"></a><a href="branding-studio/" tabindex="-1"><img src="branding-studio/screenshot.png" alt="" width="1440" height="900" loading="eager"></a></div><div class="col b"><a href="corporate-company/" tabindex="-1"><img src="corporate-company/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="consulting-firm/" tabindex="-1"><img src="consulting-firm/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="creative-agency/" tabindex="-1"><img src="creative-agency/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="social-media-marketing/" tabindex="-1"><img src="social-media-marketing/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="freelancer-team/" tabindex="-1"><img src="freelancer-team/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="corporate-company/" tabindex="-1"><img src="corporate-company/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="consulting-firm/" tabindex="-1"><img src="consulting-firm/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="creative-agency/" tabindex="-1"><img src="creative-agency/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="social-media-marketing/" tabindex="-1"><img src="social-media-marketing/screenshot.png" alt="" width="1440" height="900" loading="lazy"></a><a href="freelancer-team/" tabindex="-1"><img src="freelancer-team/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'>10 free business 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="business" data-s="brightline digital marketing agency a bright, bold website for a marketing agency. it shows your services, past results, prices and team, and has a form so clients can book a free call. digital marketing agency template, seo agency website, marketing agency html template" style="--c:#3D5AFE"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#001</span><img src="digital-marketing-agency/screenshot.png" alt="Brightline, free digital marketing agency website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Digital Marketing Agency</span><h3>Brightline</h3><p>A bright, bold website for a marketing agency. It shows your services, past results, prices and team, and has a form so clients can book a free call.</p><div class="fn">Bricolage Grotesque + DM Sans</div><div class="links"><a href="digital-marketing-agency/">Live demo</a><a href="digital-marketing-agency/index.html" download="digital-marketing-agency.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="meridian group corporate company a calm, professional website for a large company or business group. it has a company profile, business divisions, history, leadership, news and a careers section. corporate website template, company profile html template, business group website" style="--c:#3D5AFE"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#002</span><img src="corporate-company/screenshot.png" alt="Meridian Group, free corporate company website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Corporate Company</span><h3>Meridian Group</h3><p>A calm, professional website for a large company or business group. It has a company profile, business divisions, history, leadership, news and a careers section.</p><div class="fn">Newsreader + Public Sans</div><div class="links"><a href="corporate-company/">Live demo</a><a href="corporate-company/index.html" download="corporate-company.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="northstack it service company a dark, modern website for an it support or tech company. it shows your services, response times, the industries you work with, prices and a booking form. it company website template, managed it services template, cybersecurity company html" style="--c:#3D5AFE"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#003</span><img src="it-service-company/screenshot.png" alt="Northstack, free it service company website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>IT Service Company</span><h3>Northstack</h3><p>A dark, modern website for an IT support or tech company. It shows your services, response times, the industries you work with, prices and a booking form.</p><div class="fn">Unbounded + Figtree</div><div class="links"><a href="it-service-company/">Live demo</a><a href="it-service-company/index.html" download="it-service-company.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="halden & rowe consulting firm a calm, trustworthy website for a business or management consultant. it explains the problems you solve, your services, client results, partners, articles and has a booking form. consulting website template, business consultant website template free, management consulting html template" style="--c:#3D5AFE"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#004</span><img src="consulting-firm/screenshot.png" alt="Halden & Rowe, free consulting firm website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Consulting Firm</span><h3>Halden & Rowe</h3><p>A calm, trustworthy website for a business or management consultant. It explains the problems you solve, your services, client results, partners, articles and has a booking form.</p><div class="fn">Instrument Serif + Albert Sans</div><div class="links"><a href="consulting-firm/">Live demo</a><a href="consulting-firm/index.html" download="consulting-firm.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="fernway startup company a friendly, colourful website for a tech or app startup. it has a signup box, feature tiles, how it works, growth numbers, reviews, founders, a hiring banner and faq. startup website template, startup landing page template free, app landing page html template" style="--c:#3D5AFE"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#005</span><img src="startup-company/screenshot.png" alt="Fernway, free startup company website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Startup Company</span><h3>Fernway</h3><p>A friendly, colourful website for a tech or app startup. It has a signup box, feature tiles, how it works, growth numbers, reviews, founders, a hiring banner and FAQ.</p><div class="fn">Gabarito + Nunito Sans</div><div class="links"><a href="startup-company/">Live demo</a><a href="startup-company/index.html" download="startup-company.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="studio kiln creative agency a bold, big-type website for a design studio or branding agency. it shows your best projects, services, awards and team, with a project form that lets clients pick what they need. creative agency website template, design studio website template free, branding agency html template" style="--c:#3D5AFE"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#006</span><img src="creative-agency/screenshot.png" alt="Studio Kiln, free creative agency website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Creative Agency</span><h3>Studio Kiln</h3><p>A bold, big-type website for a design studio or branding agency. It shows your best projects, services, awards and team, with a project form that lets clients pick what they need.</p><div class="fn">Syne + Manrope</div><div class="links"><a href="creative-agency/">Live demo</a><a href="creative-agency/index.html" download="creative-agency.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="codefield web development agency a clean, sharp website for a web design and development company. it shows your services with starting prices, google speed scores, recent websites, a 5-step process, packages and a quote form. web development agency template, web design company website template free, web agency html template" style="--c:#0F1B2D"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#007</span><img src="web-development-agency/screenshot.png" alt="Codefield, free web development agency website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Web Development Agency</span><h3>Codefield</h3><p>A clean, sharp website for a web design and development company. It shows your services with starting prices, Google speed scores, recent websites, a 5-step process, packages and a quote form.</p><div class="fn">Archivo + Source Sans 3 + JetBrains Mono</div><div class="links"><a href="web-development-agency/">Live demo</a><a href="web-development-agency/index.html" download="web-development-agency.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="loop social social media marketing agency a fun, colourful website for a social media manager or agency. it has a phone mockup of a client profile, services, a follower growth chart, content samples, monthly plans and a free content plan form. social media marketing agency template, social media manager website template free, smm agency html template" style="--c:#2D1B4E"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#008</span><img src="social-media-marketing/screenshot.png" alt="Loop Social, free social media marketing agency website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Social Media Marketing Agency</span><h3>Loop Social</h3><p>A fun, colourful website for a social media manager or agency. It has a phone mockup of a client profile, services, a follower growth chart, content samples, monthly plans and a free content plan form.</p><div class="fn">Lexend + Karla</div><div class="links"><a href="social-media-marketing/">Live demo</a><a href="social-media-marketing/index.html" download="social-media-marketing.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="northfold branding studio an elegant, minimal website for a branding or logo design studio. it shows your services, a sample brand kit with logo, colours and fonts, case studies, a 12-week method, packages and an enquiry form. branding agency website template, brand identity studio template free, logo design agency html template" style="--c:#232323"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#009</span><img src="branding-studio/screenshot.png" alt="Northfold, free branding studio website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Branding Studio</span><h3>Northfold</h3><p>An elegant, minimal website for a branding or logo design studio. It shows your services, a sample brand kit with logo, colours and fonts, case studies, a 12-week method, packages and an enquiry form.</p><div class="fn">Bodoni Moda + Jost</div><div class="links"><a href="branding-studio/">Live demo</a><a href="branding-studio/index.html" download="branding-studio.html">Download</a></div></div></article><article class="card" data-cat="business" data-s="tandem freelancer team a warm, people-first website for a group of freelancers or a small collective. it shows each person with skills, hourly rate and availability, plus projects, a price comparison table and a brief form. freelancer website template, freelance team website template free, freelancer collective html template" style="--c:#22313F"><div class="shot"><div class="chrome" aria-hidden="true"><i></i><i></i><i></i></div><span class="idx" aria-hidden="true">#010</span><img src="freelancer-team/screenshot.png" alt="Tandem, free freelancer team website template" width="1440" height="900" loading="lazy"></div><div class="body"><span class="ty"><i aria-hidden="true"></i>Freelancer Team</span><h3>Tandem</h3><p>A warm, people-first website for a group of freelancers or a small collective. It shows each person with skills, hourly rate and availability, plus projects, a price comparison table and a brief form.</p><div class="fn">Epilogue + Mulish</div><div class="links"><a href="freelancer-team/">Live demo</a><a href="freelancer-team/index.html" download="freelancer-team.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>