Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
335 lines (327 loc) · 27.8 KB
/
Copy pathindex.html
File metadata and controls
335 lines (327 loc) · 27.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Single Product Store Template (HTML) | Everbottle</title>
<meta name="description" content="Free single product store template in one HTML file. Colour and size picker, add to cart, sticky buy bar, savings calculator, reviews and FAQ. Mobile friendly.">
<meta name="keywords" content="single product website template, one product store template free, product landing page HTML, ecommerce product page template, free HTML template, one page website template">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/">
<meta name="theme-color" content="#1F2E25">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free Single Product Store Website Template (HTML)">
<meta property="og:description" content="Free single product store template in one HTML file. Colour and size picker, add to cart, sticky buy bar, savings calculator, reviews and FAQ. Mobile friendly.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/screenshot.png"><meta property="og:image:alt" content="Free Single Product Store 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 Single Product Store Website Template (HTML)">
<meta name="twitter:description" content="Free single product store template in one HTML file. Colour and size picker, add to cart, sticky buy bar, savings calculator, reviews and FAQ. Mobile friendly.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/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='16' fill='%235B7B65'/><rect x='24' y='10' width='16' height='8' rx='2' fill='%23fff'/><rect x='20' y='18' width='24' height='38' rx='8' fill='%23fff'/></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=Albert+Sans:wght@400;500;600;700;800&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/ecommerce/single-product-store/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/",
"name": "Free Single Product Store Website Template (HTML)",
"description": "Free single product store template in one HTML file. Colour and size picker, add to cart, sticky buy bar, savings calculator, reviews and FAQ. Mobile friendly.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/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/ecommerce/single-product-store/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/#template",
"name": "Free Single Product Store Website Template (HTML)",
"description": "Free single product store template in one HTML file. Colour and size picker, add to cart, sticky buy bar, savings calculator, reviews and FAQ. Mobile friendly.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "single product website template, one product store template free, product landing page HTML, ecommerce product page template",
"author": {
"@type": "Person",
"name": "mmrahmanbappi",
"url": "https://github.com/mmrahmanbappi"
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"downloadUrl": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "E-commerce Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Single Product Store Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/ecommerce/single-product-store/"
}
]
}
]
}
</script>
<style>
:root{--sage:#5B7B65;--sage-l:#E9F0EA;--forest:#1F2E25;--sun:#F2B544;--text:#24302A;--muted:#66736B;--line:#DDE5DE;--bg:#F7F9F7;
--font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--wrap:1200px}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:17px;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{margin:0;line-height:1.05;color:var(--forest);letter-spacing:-.025em;font-weight:800}h3{font-weight:700}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--sun);padding:10px;z-index:99}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:6px}
.site-header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:800;font-size:22px;text-decoration:none;color:var(--forest);letter-spacing:-.02em}.logo span{color:var(--sage)}
.menu{display:flex;gap:26px;list-style:none;margin:0;padding:0}.menu a{text-decoration:none;font-weight:600}.menu a:hover{color:var(--sage)}
.cart{background:var(--forest);color:#fff;border-radius:999px;padding:8px 16px;font-weight:700;text-decoration:none;font-size:15px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}.burger span{display:block;width:20px;height:2px;background:var(--forest);margin:4px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid transparent;font-family:var(--font);font-size:17px;cursor:pointer}
.btn-f{background:var(--forest);color:#fff}.btn-f:hover{background:var(--sage)}
.prod{padding:40px 0 80px}
.prod-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.gal{position:sticky;top:90px}
.main-img{background:var(--sage-l);border-radius:24px;overflow:hidden;aspect-ratio:1/1}
.main-img img{width:100%;height:100%;object-fit:cover;transition:filter .3s}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumbs button{border:2px solid transparent;border-radius:14px;overflow:hidden;padding:0;cursor:pointer;background:var(--sage-l);aspect-ratio:1/1}
.thumbs button[aria-pressed="true"]{border-color:var(--forest)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.info .rt{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}.info .rt b{color:var(--sun);letter-spacing:2px}
.info h1{font-size:clamp(36px,4.4vw,56px);margin:10px 0}
.info .lead{font-size:19px;color:var(--muted)}
.price{font-size:34px;font-weight:800;color:var(--forest);margin:18px 0}.price small{font-size:16px;font-weight:500;color:var(--muted);margin-left:8px}
.opt{margin:20px 0}
.opt .lab{font-weight:700;margin-bottom:10px;display:block}.opt .lab span{font-weight:500;color:var(--muted)}
.swatches{display:flex;gap:10px}
.swatches button{width:42px;height:42px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--forest)}
.sizes{display:flex;gap:10px;flex-wrap:wrap}
.sizes button{border:1.5px solid var(--line);background:#fff;border-radius:12px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}
.sizes button[aria-pressed="true"]{border-color:var(--forest);background:var(--sage-l)}
.buy{display:flex;gap:12px;margin:24px 0 14px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px}
.qty button{width:44px;height:52px;border:0;background:none;font-size:20px;cursor:pointer}.qty span{min-width:28px;text-align:center;font-weight:700}
.buy .btn{flex:1}
.ship{display:grid;gap:8px;font-size:15px;color:var(--muted);margin-top:16px;padding:16px;background:var(--bg);border-radius:16px}
.ship b{color:var(--forest)}
.acc details{border-bottom:1px solid var(--line);padding:16px 0}
.acc summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between}.acc summary::-webkit-details-marker{display:none}.acc summary::after{content:"+"}.acc details[open] summary::after{content:"−"}
.acc p{margin:10px 0 0;color:var(--muted);font-size:16px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--forest);color:#fff;padding:14px 22px;border-radius:999px;font-weight:600;transition:transform .3s;z-index:70}
.toast.show{transform:translate(-50%,0)}
.feat{background:var(--forest);color:#C9D6CD}
.feat h2{color:#fff}
section{padding:90px 0}
.head{text-align:center;max-width:700px;margin:0 auto 50px}.head h2{font-size:clamp(34px,4.6vw,58px)}.head p{color:var(--muted);font-size:19px;margin-top:14px}
.feat .head p{color:#A9BBAE}
.f-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.f-card{background:#2A3D31;border-radius:20px;padding:26px}
.f-card b{font-size:40px;font-weight:800;color:var(--sun);display:block;line-height:1}
.f-card h3{color:#fff;font-size:19px;margin:12px 0 6px}.f-card p{margin:0;font-size:15px}
.temp{max-width:760px;margin:50px auto 0}
.tb{display:grid;grid-template-columns:150px 1fr 60px;gap:12px;align-items:center;margin-bottom:12px;font-weight:600;color:#fff}
.tb .t{height:18px;background:#2A3D31;border-radius:9px;overflow:hidden}.tb .t i{display:block;height:100%;border-radius:9px}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.calc img{border-radius:24px;aspect-ratio:4/3;object-fit:cover;width:100%}
.calc h2{font-size:clamp(32px,4vw,50px);margin-bottom:14px}
.calc label{font-weight:700;display:block;margin:20px 0 8px}
.calc input[type=range]{width:100%;accent-color:var(--sage)}
.res{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.res div{background:var(--sage-l);border-radius:16px;padding:18px}.res b{font-size:34px;font-weight:800;color:var(--forest);display:block;line-height:1.1}.res span{font-size:15px;color:var(--muted)}
.reviews{background:var(--bg)}
.rv-top{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:start}
.score b{font-size:64px;font-weight:800;color:var(--forest);line-height:1}.score .st{color:var(--sun);letter-spacing:3px;font-size:20px}
.dist .r{display:grid;grid-template-columns:40px 1fr 40px;gap:10px;align-items:center;font-size:14px;margin:6px 0}
.dist .t{height:8px;background:#E2E8E3;border-radius:4px;overflow:hidden}.dist .t i{display:block;height:100%;background:var(--sun)}
.rv-list{display:grid;gap:14px}
.rv{background:#fff;border-radius:18px;padding:22px;margin:0;border:1px solid var(--line)}
.rv .st{color:var(--sun);letter-spacing:2px}.rv p{margin:8px 0}.rv cite{font-style:normal;font-size:14px;color:var(--muted)}
.faq{max-width:800px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:19px;display:flex;justify-content:space-between;gap:16px;color:var(--forest)}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";color:var(--sage);font-size:24px;line-height:1}.faq details[open] summary::after{content:"−"}
.faq details p{margin:10px 0 0;color:var(--muted)}
.sticky{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;z-index:50;transform:translateY(100%);transition:transform .3s}
.sticky.show{transform:none}
.sticky img{width:48px;height:48px;border-radius:10px;object-fit:cover}
.sticky .pi{display:flex;gap:12px;align-items:center}.sticky b{display:block}.sticky small{color:var(--muted)}
footer{padding:40px 0 100px;color:var(--muted);font-size:15px;border-top:1px solid var(--line)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer ul{list-style:none;padding:0;margin:0;display:flex;gap:20px;flex-wrap:wrap}footer a{text-decoration:none}footer a:hover{color:var(--forest)}
@media (max-width:980px){.menu{display:none}.burger{display:block}.menu.open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:#fff;padding:20px;border-bottom:1px solid var(--line);gap:14px}
.prod-grid,.calc,.rv-top{grid-template-columns:1fr}.gal{position:static}.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){section{padding:64px 0}.f-grid,.res{grid-template-columns:1fr}.tb{grid-template-columns:100px 1fr 50px}.sticky .pi small{display:none}.cart{display:none}}
.toast{visibility:hidden}.toast.show{visibility:visible}
</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="single-product-store.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>
<header class="site-header">
<nav class="wrap nav" aria-label="Main">
<a href="#" class="logo">ever<span>bottle</span></a>
<ul class="menu" id="menu"><li><a href="#product">Shop</a></li><li><a href="#why">Why Everbottle</a></li><li><a href="#reviews">Reviews</a></li><li><a href="#faq">FAQ</a></li></ul>
<a href="#product" class="cart">Cart (<span id="cc">0</span>)</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="prod" id="product" aria-labelledby="p-title">
<div class="wrap prod-grid">
<div class="gal">
<div class="main-img"><img id="mainImg" src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=1000&q=80&auto=format&fit=crop" alt="Everbottle insulated steel water bottle in sage green" width="1000" height="1000" fetchpriority="high"></div>
<div class="thumbs" role="group" aria-label="Product photos">
<button type="button" aria-pressed="true" data-src="1602143407151-7111542de6e8" data-alt="Everbottle in sage green"><img src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=200&q=70&auto=format&fit=crop" alt="" width="200" height="200"></button>
<button type="button" aria-pressed="false" data-src="1553062407-98eeb64c6a62" data-alt="Everbottle packed in a travel backpack"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=200&q=70&auto=format&fit=crop" alt="" width="200" height="200"></button>
<button type="button" aria-pressed="false" data-src="1497032628192-86f99bcd76bc" data-alt="Everbottle on a work desk"><img src="https://images.unsplash.com/photo-1497032628192-86f99bcd76bc?w=200&q=70&auto=format&fit=crop" alt="" width="200" height="200"></button>
<button type="button" aria-pressed="false" data-src="1492691527719-9d1e07e534b4" data-alt="Everbottle on a mountain hike"><img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=200&q=70&auto=format&fit=crop" alt="" width="200" height="200"></button>
</div>
</div>
<div class="info">
<div class="rt"><b aria-hidden="true">★★★★★</b>4.9 from 12,840 reviews</div>
<h1 id="p-title">Everbottle insulated water bottle</h1>
<p class="lead">Keeps drinks ice cold for 24 hours and hot for 12. Made from recycled stainless steel, with a leak-proof lid that fits every car cup holder.</p>
<div class="price"><span id="price">$34</span><small>Free delivery over $50</small></div>
<div class="opt"><span class="lab">Colour: <span id="colName">Sage</span></span><div class="swatches" role="group" aria-label="Colour" id="sw">
<button type="button" aria-pressed="true" aria-label="Sage" data-n="Sage" data-f="none" style="background:#6F8F77"></button>
<button type="button" aria-pressed="false" aria-label="Ocean" data-n="Ocean" data-f="hue-rotate(75deg) saturate(1.2)" style="background:#4F7F9A"></button>
<button type="button" aria-pressed="false" aria-label="Clay" data-n="Clay" data-f="hue-rotate(-110deg) saturate(1.1)" style="background:#A86B55"></button>
<button type="button" aria-pressed="false" aria-label="Charcoal" data-n="Charcoal" data-f="grayscale(1) brightness(.55)" style="background:#3A3D3B"></button></div></div>
<div class="opt"><span class="lab">Size</span><div class="sizes" role="group" aria-label="Size" id="sz"><button type="button" aria-pressed="false" data-p="28">500 ml</button><button type="button" aria-pressed="true" data-p="34">750 ml</button><button type="button" aria-pressed="false" data-p="42">1 litre</button></div></div>
<div class="buy"><div class="qty"><button type="button" id="qm" aria-label="Decrease quantity">−</button><span id="qn">1</span><button type="button" id="qp" aria-label="Increase quantity">+</button></div><button class="btn btn-f" type="button" id="add">Add to cart</button></div>
<div class="ship"><span>🚚 <b>Order in the next 4 hours</b> for delivery on Friday</span><span>↩️ <b>100-day trial</b>. Don't love it? Send it back free.</span><span>🛡️ <b>Lifetime warranty</b> against leaks and dents.</span></div>
<div class="acc">
<details><summary>Details and materials</summary><p>18/8 stainless steel, 90% recycled. Double-wall vacuum insulation. BPA-free lid with a carry loop. Dishwasher safe lid, hand-wash bottle.</p></details>
<details><summary>Dimensions</summary><p>750 ml: 26 cm tall, 7.4 cm wide, 390 g. Fits standard car cup holders and bike bottle cages.</p></details>
</div>
</div>
</div>
</section>
<section class="feat" id="why" aria-labelledby="why-title">
<div class="wrap">
<div class="head"><h2 id="why-title">Why 400,000 people carry one every day.</h2><p>Designed in Copenhagen, tested on commutes, gym sessions and mountain tops.</p></div>
<div class="f-grid">
<div class="f-card"><b>24h</b><h3>Ice cold</h3><p>Cold water stays cold from morning until the next morning.</p></div>
<div class="f-card"><b>12h</b><h3>Piping hot</h3><p>Coffee or tea stays hot through a full working day.</p></div>
<div class="f-card"><b>0</b><h3>Leaks</h3><p>A tested seal means you can throw it in your bag upside down.</p></div>
<div class="f-card"><b>90%</b><h3>Recycled steel</h3><p>And we plant a tree for every bottle sold.</p></div>
</div>
<div class="temp" aria-label="How long drinks stay cold compared with other bottles">
<div class="tb"><span>Everbottle</span><div class="t"><i style="width:100%;background:var(--sun)"></i></div><span>24h</span></div>
<div class="tb"><span>Typical steel bottle</span><div class="t"><i style="width:50%;background:#8FA898"></i></div><span>12h</span></div>
<div class="tb"><span>Plastic bottle</span><div class="t"><i style="width:8%;background:#6E8577"></i></div><span>2h</span></div>
</div>
</div>
</section>
<section aria-labelledby="calc-title">
<div class="wrap calc">
<img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=900&q=75&auto=format&fit=crop" alt="Hiker on a mountain top above the clouds at sunrise" width="900" height="675" loading="lazy">
<div><h2 id="calc-title">How much could you save?</h2><p style="color:var(--muted)">Move the slider to see what switching from bottled water saves you in a year.</p>
<label for="bpw">Bottles of water you buy each week: <span id="bv">7</span></label><input type="range" id="bpw" min="1" max="30" value="7">
<div class="res" aria-live="polite"><div><b id="saved">364</b><span>plastic bottles saved a year</span></div><div><b id="money">$546</b><span>saved a year (at $1.50 a bottle)</span></div></div></div>
</div>
</section>
<section class="reviews" id="reviews" aria-labelledby="rev-title">
<div class="wrap">
<div class="head"><h2 id="rev-title">What customers say</h2></div>
<div class="rv-top">
<div><div class="score"><b>4.9</b><div class="st" aria-hidden="true">★★★★★</div><p style="color:var(--muted);margin:6px 0 16px">12,840 reviews</p></div>
<div class="dist"><div class="r"><span>5 ★</span><div class="t"><i style="width:91%"></i></div><span>91%</span></div><div class="r"><span>4 ★</span><div class="t"><i style="width:6%"></i></div><span>6%</span></div><div class="r"><span>3 ★</span><div class="t"><i style="width:2%"></i></div><span>2%</span></div><div class="r"><span>2 ★</span><div class="t"><i style="width:1%"></i></div><span>1%</span></div></div></div>
<div class="rv-list">
<blockquote class="rv"><div class="st" aria-label="5 stars">★★★★★</div><p>"Put ice in at 7am, still had ice at 9pm after a day at the beach. Unreal."</p><cite>Jordan P. · Verified buyer · 750 ml, Ocean</cite></blockquote>
<blockquote class="rv"><div class="st" aria-label="5 stars">★★★★★</div><p>"Finally a bottle that doesn't leak in my laptop bag. Bought two more for my kids."</p><cite>Amira S. · Verified buyer · 500 ml, Sage</cite></blockquote>
<blockquote class="rv"><div class="st" aria-label="4 stars">★★★★☆</div><p>"Great bottle. The 1 litre is a bit heavy when full, but it keeps coffee hot all day."</p><cite>Ben T. · Verified buyer · 1 litre, Charcoal</cite></blockquote>
</div>
</div>
</div>
</section>
<section id="faq" aria-labelledby="faq-title">
<div class="wrap">
<div class="head"><h2 id="faq-title">Questions</h2></div>
<div class="faq">
<details open><summary>How long does an insulated bottle keep water cold?</summary><p>Everbottle keeps drinks cold for up to 24 hours and hot for up to 12 hours, thanks to its double-wall vacuum insulation.</p></details>
<details><summary>Is it dishwasher safe?</summary><p>The lid is dishwasher safe. Wash the bottle by hand with warm soapy water to protect the finish.</p></details>
<details><summary>What is the 100-day trial?</summary><p>Use your bottle for up to 100 days. If you're not happy, send it back and we'll refund you in full, including delivery.</p></details>
<details><summary>Where do you deliver?</summary><p>We deliver to 40 countries. Delivery is free on orders over $50 and usually takes 2 to 5 working days.</p></details>
</div>
</div>
</section>
</main>
<footer>
<div class="wrap foot">
<a href="#" class="logo">ever<span>bottle</span></a>
<ul><li><a href="#">Shipping</a></li><li><a href="#">Returns</a></li><li><a href="#">Warranty</a></li><li><a href="#">Contact</a></li></ul>
<span>© <span id="yr">2026</span> Everbottle ApS | 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>
<div class="sticky" id="sticky" aria-hidden="true"><div class="pi"><img src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?w=100&q=70&auto=format&fit=crop" alt="" width="48" height="48" id="stImg"><div><b>Everbottle</b><small id="stInfo">Sage · 750 ml</small></div></div><button class="btn btn-f" type="button" id="add2">Add to cart · <span id="stPrice">$34</span></button></div>
<div class="toast" id="toast" role="status">Added to cart</div>
<script>
const $=id=>document.getElementById(id);let col='Sage',filt='none',price=34,size='750 ml',q=1,cart=0;
function upd(){$('price').textContent='$'+price;$('stPrice').textContent='$'+price*q;$('stInfo').textContent=col+' · '+size;$('colName').textContent=col;$('mainImg').style.filter=filt;$('stImg').style.filter=filt;$('qn').textContent=q}
$('sw').addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;document.querySelectorAll('#sw button').forEach(x=>x.setAttribute('aria-pressed',x===b));col=b.dataset.n;filt=b.dataset.f;
document.querySelector('.thumbs [data-src="1602143407151-7111542de6e8"]').click();upd()});
$('sz').addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;document.querySelectorAll('#sz button').forEach(x=>x.setAttribute('aria-pressed',x===b));price=+b.dataset.p;size=b.textContent;upd()});
document.querySelectorAll('.thumbs button').forEach(b=>b.addEventListener('click',()=>{document.querySelectorAll('.thumbs button').forEach(x=>x.setAttribute('aria-pressed',x===b));const m=$('mainImg');m.src=`https://images.unsplash.com/photo-${b.dataset.src}?w=1000&q=80&auto=format&fit=crop`;m.alt=b.dataset.alt;m.style.filter=b.dataset.src==='1602143407151-7111542de6e8'?filt:'none'}));
$('qm').addEventListener('click',()=>{q=Math.max(1,q-1);upd()});$('qp').addEventListener('click',()=>{q++;upd()});
function add(){cart+=q;$('cc').textContent=cart;const t=$('toast');t.textContent=`Added ${q} × Everbottle (${col}, ${size}) to cart`;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2400)}
$('add').addEventListener('click',add);$('add2').addEventListener('click',add);
new IntersectionObserver(([en])=>{const s=$('sticky');s.classList.toggle('show',!en.isIntersecting&&en.boundingClientRect.top<0);s.setAttribute('aria-hidden',en.isIntersecting)}).observe($('add'));
function calc(){const b=+$('bpw').value;$('bv').textContent=b;$('saved').textContent=(b*52).toLocaleString();$('money').textContent='$'+Math.round(b*52*1.5).toLocaleString()}$('bpw').addEventListener('input',calc);calc();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>