Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
351 lines (340 loc) · 28.3 KB
/
Copy pathindex.html
File metadata and controls
351 lines (340 loc) · 28.3 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
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Cyber Security Website Template (HTML) | Bastion</title>
<meta name="description" content="Free cyber security company website template in one HTML file. Services, threat stats, security self-check, 24/7 response, packages, FAQ and an emergency line.">
<meta name="keywords" content="cyber security website template, cybersecurity company template free, security services HTML template, SOC managed security website, 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/saas-landing/cyber-security/">
<meta name="theme-color" content="#0B1F3A">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free Cyber Security Website Template (HTML)">
<meta property="og:description" content="Free cyber security company website template in one HTML file. Services, threat stats, security self-check, 24/7 response, packages, FAQ and an emergency line.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/screenshot.png"><meta property="og:image:alt" content="Free Cyber Security 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 Cyber Security Website Template (HTML)">
<meta name="twitter:description" content="Free cyber security company website template in one HTML file. Services, threat stats, security self-check, 24/7 response, packages, FAQ and an emergency line.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/screenshot.png">
<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='10' fill='%230B1F3A'/><path d='M32 10l18 7v12c0 12-8 20-18 24-10-4-18-12-18-24V17z' fill='none' stroke='%23E23D3D' stroke-width='5'/></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=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;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/saas-landing/cyber-security/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/",
"name": "Free Cyber Security Website Template (HTML)",
"description": "Free cyber security company website template in one HTML file. Services, threat stats, security self-check, 24/7 response, packages, FAQ and an emergency line.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/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/saas-landing/cyber-security/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/#template",
"name": "Free Cyber Security Website Template (HTML)",
"description": "Free cyber security company website template in one HTML file. Services, threat stats, security self-check, 24/7 response, packages, FAQ and an emergency line.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "cyber security website template, cybersecurity company template free, security services HTML template, SOC managed security website",
"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/saas-landing/cyber-security/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "AI & SaaS Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cyber Security Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/saas-landing/cyber-security/"
}
]
}
]
}
</script>
<style>
:root{--navy:#0B1F3A;--navy-2:#15325A;--red:#E23D3D;--red-d:#C22A2A;--steel:#EEF1F4;--steel-2:#DDE3EA;--green:#1E9E64;--amber:#E0A21B;--text:#1D2B3E;--muted:#5A687A;--line:#D3DAE3;
--display:"Barlow Condensed","Arial Narrow",sans-serif;--body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;--wrap:1220px}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.6;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:inherit}p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;line-height:1;color:var(--navy);text-transform:uppercase;letter-spacing:.005em}h3{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--red);color:#fff;padding:10px;z-index:99}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.alert{background:var(--red);color:#fff;font-weight:600;font-size:16px}
.alert .wrap{display:flex;justify-content:center;gap:12px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.alert a{font-weight:700}
.site-header{position:sticky;top:0;z-index:40;background:var(--navy);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:28px;text-decoration:none;color:#fff;letter-spacing:.04em}
.logo svg{width:30px;height:30px}
.menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}.menu a{text-decoration:none;font-weight:600;color:#C4CFDD}.menu a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;font-weight:700;text-decoration:none;border:2px solid transparent;font-family:var(--body);font-size:17px;cursor:pointer;border-radius:4px}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-d)}
.btn-white{background:#fff;color:var(--navy)}.btn-line{border-color:#fff;color:#fff}.btn-navy{background:var(--navy);color:#fff}
.burger{display:none;background:none;border:2px solid #fff;border-radius:4px;padding:8px 10px;cursor:pointer}.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0}
.hero{position:relative;background:var(--navy);color:#C4CFDD;overflow:hidden}
.hero img.bg{position:absolute;right:0;top:0;width:55%;height:100%;object-fit:cover;opacity:.55;mask-image:linear-gradient(90deg,transparent,#000 40%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%)}
.hero .wrap{position:relative;padding-top:100px;padding-bottom:110px}
.hero h1{color:#fff;font-size:clamp(52px,7.6vw,110px);max-width:12ch}
.hero h1 span{color:var(--red)}
.hero .lead{font-size:21px;max-width:46ch;margin:24px 0 32px;color:#D5DEE9}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.certs{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.certs span{border:1px solid #2F4B72;border-radius:4px;padding:6px 14px;font-weight:600;font-size:15px;color:#fff}
.threat{background:var(--steel);border-bottom:1px solid var(--line)}
.threat .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.threat div{padding:34px 24px;border-right:1px solid var(--line)}.threat div:last-child{border-right:0}
.threat b{font-family:var(--display);font-size:52px;color:var(--red);display:block;line-height:1}
.threat span{font-size:16px;color:var(--muted)}
section{padding:110px 0}
.head{max-width:760px;margin-bottom:50px}.head h2{font-size:clamp(40px,5.4vw,72px)}.head p{color:var(--muted);font-size:19px;margin-top:14px}
.tag{font-weight:700;color:var(--red);font-size:15px;display:block;margin-bottom:12px}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{border:1px solid var(--line);border-top:4px solid var(--navy);padding:30px;background:#fff}
.card:hover{border-top-color:var(--red)}
.card h3{font-size:30px;margin-bottom:10px}.card p{margin:0 0 12px;color:var(--muted);font-size:17px}
.card ul{padding-left:18px;margin:0;font-size:16px}
.check{background:var(--navy);color:#C4CFDD}
.check h2{color:#fff}.check .head p{color:#9FB0C6}
.check-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}
.qs{display:grid;gap:10px}
.qs label{display:flex;gap:14px;align-items:center;background:var(--navy-2);border:1px solid #2F4B72;border-radius:6px;padding:16px 18px;cursor:pointer;font-weight:600;color:#fff}
.qs input{width:22px;height:22px;accent-color:var(--green);flex:none}
.score{background:#fff;color:var(--text);border-radius:8px;padding:30px;position:sticky;top:100px}
.score .num{font-family:var(--display);font-size:92px;font-weight:800;line-height:1;color:var(--red)}
.score .num small{font-size:36px;color:var(--muted)}
.meter{height:12px;background:var(--steel-2);border-radius:6px;margin:14px 0 18px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:var(--red);transition:width .4s,background .4s}
.score h3{font-size:30px;margin-bottom:8px}.score p{color:var(--muted);font-size:17px}
.resp{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.resp img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.timeline{list-style:none;padding:0;margin:0;border-left:3px solid var(--line)}
.timeline li{position:relative;padding:0 0 24px 26px}
.timeline li::before{content:"";position:absolute;left:-9px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--red);border:3px solid #fff;box-shadow:0 0 0 2px var(--red)}
.timeline b{font-family:var(--display);font-size:24px;color:var(--navy);text-transform:uppercase;display:block}
.timeline span{color:var(--muted);font-size:17px}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pack{border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;background:#fff}
.pack.hot{border:2px solid var(--navy);background:var(--steel)}
.pack h3{font-size:32px}.pack .amt{font-family:var(--display);font-size:50px;font-weight:800;color:var(--navy);margin:10px 0 0}
.pack .amt small{font-family:var(--body);font-size:16px;font-weight:500;color:var(--muted)}
.pack ul{list-style:none;padding:0;margin:18px 0 26px;font-size:16px}.pack li{padding:8px 0 8px 28px;position:relative;border-bottom:1px solid var(--line)}
.pack li::before{content:"";position:absolute;left:2px;top:14px;width:12px;height:12px;background:var(--green);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%)}
.pack .btn{margin-top:auto}
.case{background:var(--steel)}
.case-box{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.case-box blockquote{margin:0}.case-box blockquote p{font-size:clamp(22px,2.6vw,30px);font-weight:600;color:var(--navy);line-height:1.35}
.case-box cite{font-style:normal;color:var(--muted)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kpis div{background:#fff;padding:24px;border-left:4px solid var(--red)}
.kpis b{font-family:var(--display);font-size:46px;color:var(--navy);display:block;line-height:1}.kpis span{font-size:16px;color:var(--muted)}
.faq{max-width:840px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:20px;display:flex;justify-content:space-between;gap:18px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--red)}
.faq details[open] summary::after{content:"−"}.faq details p{margin:10px 0 0;color:var(--muted)}
.contact{background:var(--navy);color:#C4CFDD}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}
.contact h2{color:#fff;font-size:clamp(40px,5vw,68px)}
.hotline{background:var(--red);color:#fff;border-radius:6px;padding:24px;margin-top:26px}
.hotline b{font-family:var(--display);font-size:40px;display:block;line-height:1.1}
form{background:#fff;border-radius:6px;padding:30px;color:var(--text)}
label{display:block;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--navy)}
input,select,textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;border:1px solid var(--line);border-radius:4px;margin-bottom:16px;color:var(--text);background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy)}
form .btn{width:100%}
footer{background:#07152A;color:#8FA1B8;padding:40px 0;font-size:15px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer ul{list-style:none;padding:0;margin:0;display:flex;gap:22px;flex-wrap:wrap}footer a{text-decoration:none}footer a:hover{color:#fff}
@media (max-width:1000px){.menu,.nav>.btn{display:none}.burger{display:block}
.menu.open{display:flex;flex-direction:column;position:absolute;top:74px;left:0;right:0;background:var(--navy);padding:22px 24px;gap:16px}
.hero img.bg{width:100%;opacity:.25;mask-image:none;-webkit-mask-image:none}
.threat .wrap{grid-template-columns:1fr 1fr}.threat div:nth-child(2){border-right:0}
.svc,.packs{grid-template-columns:1fr 1fr}.check-grid,.resp,.case-box,.contact-grid{grid-template-columns:1fr}.score{position:static}}
@media (max-width:600px){body{font-size:17px}section{padding:76px 0}.svc,.packs,.threat .wrap,.kpis{grid-template-columns:1fr}.threat div{border-right:0;border-bottom:1px solid var(--line)}}
</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="cyber-security.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="alert"><div class="wrap"><span>Under attack right now?</span><a href="tel:+18005550199">Call our 24/7 incident line: +1 (800) 555-0199</a></div></div>
<header class="site-header">
<nav class="wrap nav" aria-label="Main">
<a href="#" class="logo"><svg viewBox="0 0 64 64" aria-hidden="true"><path d="M32 6l20 8v14c0 13-9 22-20 27-11-5-20-14-20-27V14z" fill="none" stroke="#E23D3D" stroke-width="6"/></svg>Bastion</a>
<ul class="menu" id="menu"><li><a href="#services">Services</a></li><li><a href="#check">Security check</a></li><li><a href="#response">24/7 response</a></li><li><a href="#packages">Packages</a></li><li><a href="#faq">FAQ</a></li></ul>
<a href="#contact" class="btn btn-red">Free security review</a>
<button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu"><span></span><span></span><span></span></button>
</nav>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-title" style="padding:0">
<img class="bg" src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=1400&q=70&auto=format&fit=crop" alt="Glowing circuit board lines suggesting digital security" width="1400" height="900" fetchpriority="high">
<div class="wrap">
<h1 id="hero-title">Stop attacks <span>before</span> they stop your business.</h1>
<p class="lead">Bastion is a cyber security company for small and mid-sized businesses. Our analysts watch your systems 24/7, block threats in minutes and help you pass audits without the stress.</p>
<div class="actions"><a href="#contact" class="btn btn-red">Book a free security review</a><a href="#check" class="btn btn-line">Take the 1-minute check</a></div>
<div class="certs" aria-label="Certifications"><span>ISO 27001 certified</span><span>SOC 2 Type II</span><span>CREST approved</span><span>Cyber Essentials Plus</span></div>
</div>
</section>
<div class="threat" aria-label="Threat numbers"><div class="wrap"><div><b>43%</b><span>of cyber attacks target small businesses</span></div><div><b>$4.9M</b><span>average cost of a data breach</span></div><div><b>11 min</b><span>our average time to contain a threat</span></div><div><b>1,200+</b><span>businesses protected</span></div></div></div>
<section id="services" aria-labelledby="svc-title">
<div class="wrap">
<div class="head"><span class="tag">Services</span><h2 id="svc-title">Security that covers every door.</h2><p>Attackers look for the weakest point. We protect your people, devices, cloud and data as one system.</p></div>
<div class="svc">
<article class="card"><h3>24/7 monitoring</h3><p>Our security operations centre watches your network, laptops and cloud around the clock.</p><ul><li>Threat detection and response</li><li>Live alerts to your team</li></ul></article>
<article class="card"><h3>Penetration testing</h3><p>Ethical hackers test your website, apps and network the way a real attacker would.</p><ul><li>Web and app testing</li><li>Clear report with fixes</li></ul></article>
<article class="card"><h3>Staff training</h3><p>Short, practical training and fake phishing emails that teach staff to spot scams.</p><ul><li>Monthly phishing tests</li><li>10-minute lessons</li></ul></article>
<article class="card"><h3>Cloud security</h3><p>Lock down Microsoft 365, Google Workspace, AWS and Azure with the right settings.</p><ul><li>Configuration review</li><li>Access and login controls</li></ul></article>
<article class="card"><h3>Compliance</h3><p>Get ready for ISO 27001, SOC 2, HIPAA, PCI or GDPR with a clear plan and templates.</p><ul><li>Gap analysis</li><li>Audit support</li></ul></article>
<article class="card"><h3>Incident response</h3><p>If you've been hacked, our team is on the call in 15 minutes to stop it and recover.</p><ul><li>Ransomware recovery</li><li>Forensics and reporting</li></ul></article>
</div>
</div>
</section>
<section class="check" id="check" aria-labelledby="check-title">
<div class="wrap">
<div class="head"><span class="tag">1-minute check</span><h2 id="check-title">How protected is your business?</h2><p>Tick every statement that's true for your company. Your answers stay on this page and aren't sent anywhere.</p></div>
<div class="check-grid">
<div class="qs" id="qs">
<label><input type="checkbox">Everyone uses two-step login for email and key apps</label>
<label><input type="checkbox">We back up important data daily and have tested a restore</label>
<label><input type="checkbox">Laptops and phones update automatically</label>
<label><input type="checkbox">Staff have had phishing training in the last 12 months</label>
<label><input type="checkbox">Someone monitors our systems outside office hours</label>
<label><input type="checkbox">We have a written plan for what to do if we're hacked</label>
</div>
<div class="score" aria-live="polite"><div class="num"><span id="sc">0</span><small>/6</small></div><div class="meter"><i id="mt"></i></div><h3 id="sh">High risk</h3><p id="sp">Most attacks on businesses like yours use gaps you can close in a week. Book a free review and we'll show you where to start.</p><a href="#contact" class="btn btn-navy">Get my free review</a></div>
</div>
</div>
</section>
<section id="response" aria-labelledby="resp-title">
<div class="wrap resp">
<img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?w=900&q=75&auto=format&fit=crop" alt="Laptop glowing in a dark room" width="900" height="675" loading="lazy">
<div><span class="tag">24/7 incident response</span><h2 id="resp-title" style="font-size:clamp(38px,4.8vw,64px);margin-bottom:30px">What happens when we spot a threat.</h2>
<ol class="timeline">
<li><b>Minute 0: Detect</b><span>Our tools flag unusual activity, like a login from a new country at 3am.</span></li>
<li><b>Minute 4: Confirm</b><span>A real analyst checks the alert and rules out false alarms.</span></li>
<li><b>Minute 11: Contain</b><span>We isolate the device or account so the attacker can't go further.</span></li>
<li><b>Hour 1: Report</b><span>You get a plain-English summary of what happened and what we did.</span></li>
</ol></div>
</div>
</section>
<section class="case" aria-labelledby="case-title">
<div class="wrap case-box">
<div><span class="tag">Client story</span><h2 id="case-title" style="font-size:clamp(34px,4vw,54px);margin-bottom:24px">A ransomware attack, stopped in 9 minutes.</h2><blockquote><p>"At 2am someone got into an old staff account. Bastion locked it before a single file was encrypted. We only found out when we read their report over breakfast."</p><cite>Karen Holt, Managing Partner, Holt & Webb Accountants</cite></blockquote></div>
<div class="kpis"><div><b>9 min</b><span>from alert to contained</span></div><div><b>0</b><span>files lost</span></div><div><b>0 hrs</b><span>of downtime</span></div><div><b>£0</b><span>ransom paid</span></div></div>
</div>
</section>
<section id="packages" aria-labelledby="pack-title">
<div class="wrap">
<div class="head"><span class="tag">Packages</span><h2 id="pack-title">Protection at a fixed monthly price.</h2><p>Priced per employee. No setup fees, and a 30-day notice period.</p></div>
<div class="packs">
<article class="pack"><h3>Essentials</h3><div class="amt">$15<small> /employee/month</small></div><ul><li>Managed antivirus and firewall</li><li>Email phishing protection</li><li>Quarterly phishing tests</li><li>Business-hours support</li></ul><a href="#contact" class="btn btn-navy">Get a quote</a></article>
<article class="pack hot"><h3>Protect</h3><div class="amt">$32<small> /employee/month</small></div><ul><li>Everything in Essentials</li><li>24/7 monitoring and response</li><li>Monthly staff training</li><li>Cloud security review</li><li>Incident response included</li></ul><a href="#contact" class="btn btn-red">Get a quote</a></article>
<article class="pack"><h3>Comply</h3><div class="amt">Custom</div><ul><li>Everything in Protect</li><li>Yearly penetration test</li><li>ISO 27001 or SOC 2 support</li><li>Virtual security officer</li></ul><a href="#contact" class="btn btn-navy">Talk to us</a></article>
</div>
</div>
</section>
<section id="faq" aria-labelledby="faq-title" style="padding-top:0">
<div class="wrap">
<div class="head"><span class="tag">FAQ</span><h2 id="faq-title">Questions</h2></div>
<div class="faq">
<details open><summary>Do small businesses really need cyber security?</summary><p>Yes. Small businesses are targeted because they usually have weaker protection. Basic steps like two-step login, backups and staff training stop most common attacks.</p></details>
<details><summary>What is a security operations centre (SOC)?</summary><p>A SOC is a team of security analysts who watch your systems all day and night, investigate alerts and respond to attacks. With Bastion, you get this without hiring your own team.</p></details>
<details><summary>How much does managed cyber security cost?</summary><p>Our packages start at $15 per employee per month. Most businesses with 24/7 monitoring pay $32 per employee per month.</p></details>
<details><summary>What should I do if I think we've been hacked?</summary><p>Don't turn devices off or pay any ransom. Disconnect affected devices from the network and call our 24/7 incident line on +1 (800) 555-0199.</p></details>
</div>
</div>
</section>
<section class="contact" id="contact" aria-labelledby="contact-title">
<div class="wrap contact-grid">
<div><h2 id="contact-title">Get a free security review.</h2><p style="font-size:20px;margin-top:20px">In 45 minutes, a senior analyst will review your setup and give you a short list of the risks that matter most, even if you never hire us.</p><div class="hotline">Already under attack?<b>+1 (800) 555-0199</b>Answered 24 hours a day, 365 days a year.</div></div>
<form action="https://formspree.io/f/your-form-id" method="POST" aria-label="Request a free security review">
<label for="n">Name</label><input id="n" name="name" autocomplete="name" required>
<label for="e">Work email</label><input id="e" name="email" type="email" autocomplete="email" required>
<label for="c">Company</label><input id="c" name="company" autocomplete="organization">
<label for="s">Number of employees</label><select id="s" name="size"><option>1 to 25</option><option>26 to 100</option><option>101 to 500</option><option>500 or more</option></select>
<label for="m">What worries you most?</label><textarea id="m" name="message" rows="3"></textarea>
<button class="btn btn-red" type="submit">Book my free review</button>
</form>
</div>
</section>
</main>
<footer>
<div class="wrap foot">
<a href="#" class="logo" style="font-size:24px">Bastion</a>
<ul><li><a href="#services">Services</a></li><li><a href="#packages">Packages</a></li><li><a href="#faq">FAQ</a></li><li><a href="#">Report a vulnerability</a></li></ul>
<span>© <span id="yr">2026</span> Bastion Security Ltd. | Photos: <a href="https://unsplash.com" rel="noopener">Unsplash</a> | <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">Free HTML Templates</a></span>
</div>
</footer>
<script>
const boxes=[...document.querySelectorAll('#qs input')];
const msgs=[["High risk","Most attacks on businesses like yours use gaps you can close in a week. Book a free review and we'll show you where to start.","#E23D3D"],["Some risk","You have good basics, but a few gaps attackers look for. A review will show which ones to fix first.","#E0A21B"],["Well protected","Great work. A yearly review and penetration test will keep it that way as you grow.","#1E9E64"]];
function upd(){const n=boxes.filter(b=>b.checked).length,m=n<3?msgs[0]:n<6?msgs[1]:msgs[2];
document.getElementById('sc').textContent=n;const mt=document.getElementById('mt');mt.style.width=(n/6*100)+'%';mt.style.background=m[2];
document.getElementById('sh').textContent=m[0];document.getElementById('sp').textContent=m[1];document.getElementById('sc').parentElement.style.color=m[2]}
boxes.forEach(b=>b.addEventListener('change',upd));
</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>