Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
191 lines (190 loc) · 20.2 KB
/
Copy pathindex.html
File metadata and controls
191 lines (190 loc) · 20.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Bakery Website Template (HTML) | Crumb & Co</title>
<meta name="description" content="Free bakery website template as a single HTML file. Custom cake builder with live price, today's bakes with sold-out labels, bread pre-orders, hours and FAQ.">
<meta name="keywords" content="bakery website template, bakery HTML template free, cake shop website, pastry shop 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/restaurant/bakery/">
<meta name="theme-color" content="#6B3A2A">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Free HTML Templates">
<meta property="og:title" content="Free Bakery Website Template (HTML)">
<meta property="og:description" content="Free bakery website template as a single HTML file. Custom cake builder with live price, today's bakes with sold-out labels, bread pre-orders, hours and FAQ.">
<meta property="og:url" content="https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/">
<meta property="og:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/screenshot.png"><meta property="og:image:alt" content="Free Bakery 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 Bakery Website Template (HTML)">
<meta name="twitter:description" content="Free bakery website template as a single HTML file. Custom cake builder with live price, today's bakes with sold-out labels, bread pre-orders, hours and FAQ.">
<meta name="twitter:image" content="https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/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='%23F6D8CF'/><path d='M12 40c0-12 9-20 20-20s20 8 20 20z' fill='%23C9824E'/><path d='M22 30l4 10M32 26v14M42 30l-4 10' stroke='%236B3A2A' stroke-width='3'/></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=Lora:ital,wght@0,500;0,700;1,500&family=Nunito+Sans:opsz,wght@6..12,400;6..12,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/restaurant/bakery/#webpage",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/",
"name": "Free Bakery Website Template (HTML)",
"description": "Free bakery website template as a single HTML file. Custom cake builder with live price, today's bakes with sold-out labels, bread pre-orders, hours and FAQ.",
"inLanguage": "en",
"primaryImageOfPage": {
"@type": "ImageObject",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/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/restaurant/bakery/#breadcrumb"
},
"mainEntity": {
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/#template"
}
},
{
"@type": "CreativeWork",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/#template",
"name": "Free Bakery Website Template (HTML)",
"description": "Free bakery website template as a single HTML file. Custom cake builder with live price, today's bakes with sold-out labels, bread pre-orders, hours and FAQ.",
"genre": "Website template",
"image": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/screenshot.png",
"url": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/",
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"encodingFormat": "text/html",
"inLanguage": "en",
"keywords": "bakery website template, bakery HTML template free, cake shop website, pastry shop 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/restaurant/bakery/index.html"
},
{
"@type": "BreadcrumbList",
"@id": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/#breadcrumb",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Free HTML Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Restaurant & Food Templates",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Bakery Template",
"item": "https://mmrahmanbappi.github.io/100-free-html-templates/restaurant/bakery/"
}
]
}
]
}
</script>
<style>
:root{--br:#6B3A2A;--cr:#C9824E;--pk:#F6D8CF;--pk-l:#FDF1EC;--sg:#8FA67E;--tx:#3A2A24;--mu:#7C6A62;--ln:#EFDDD3;--s:"Lora",Georgia,serif;--b:"Nunito Sans",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--b);font-size:18px;line-height:1.6;color:var(--tx);background:#fff}
img{max-width:100%;height:auto;display:block}a{color:inherit}h1,h2,h3{font-family:var(--s);font-weight:700;margin:0;line-height:1.08;color:var(--br)}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:var(--pk);padding:8px;z-index:99}:focus-visible{outline:3px solid var(--cr);outline-offset:3px;border-radius:8px}
.top{background:var(--br);color:var(--pk);text-align:center;font-size:15px;padding:8px}
.nav{display:flex;justify-content:space-between;align-items:center;height:80px}.logo{font-family:var(--s);font-style:italic;font-size:30px;text-decoration:none;color:var(--br)}
.menu{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-weight:700}.menu a{text-decoration:none}.menu a:hover{color:var(--cr)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--br);font-family:var(--b);font-size:16px;cursor:pointer}
.btn-b{background:var(--br);color:#fff}.btn-l{background:transparent;color:var(--br)}.burger{display:none;background:none;border:2px solid var(--br);border-radius:10px;padding:6px 10px;cursor:pointer}
.hero{background:var(--pk-l)}.hg{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:50px 0}
.hero h1{font-size:clamp(46px,6.4vw,88px)}.hero h1 em{color:var(--cr)}.hero p{font-size:20px;color:var(--mu);max-width:40ch;margin:18px 0 26px}
.hi{display:grid;grid-template-columns:1fr 1fr;gap:14px}.hi img{border-radius:24px;object-fit:cover;width:100%}.hi img:first-child{grid-row:span 2;height:100%}.hi img:not(:first-child){aspect-ratio:1/1}
section{padding:80px 0}.sh{text-align:center;margin-bottom:32px}.sh h2{font-size:clamp(38px,4.8vw,60px)}.sh p{color:var(--mu);margin:10px 0 0}
.today{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.bk{border:2px solid var(--ln);border-radius:22px;padding:18px;text-align:center;position:relative}
.bk .e{font-size:54px}.bk h3{font-size:21px;margin:6px 0 4px}.bk small{color:var(--mu)}.bk .rw{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.bk .rw b{font-size:18px}.bk button{background:var(--br);color:#fff;border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.bk.out{opacity:.55}.bk.out button{background:var(--mu);cursor:not-allowed}.bk .so{position:absolute;top:12px;right:12px;background:var(--br);color:#fff;font-size:12px;font-weight:700;border-radius:6px;padding:2px 8px}
.left{font-size:14px;color:var(--cr);font-weight:700;display:block;margin-top:4px}
.cake{background:var(--pk-l)}.cg{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.grp{margin-bottom:18px}.grp>b{display:block;margin-bottom:8px}.opts{display:flex;gap:8px;flex-wrap:wrap}.opts button{border:2px solid var(--ln);background:#fff;border-radius:14px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;color:var(--tx)}
.opts button[aria-pressed=true]{border-color:var(--br);background:var(--br);color:#fff}.opts small{display:block;font-weight:400;font-size:13px}
.cg input{width:100%;border:2px solid var(--ln);border-radius:14px;padding:11px 14px;font:inherit;background:#fff}
.prev{background:#fff;border-radius:28px;padding:26px;text-align:center;position:sticky;top:20px}.prev svg{width:100%;max-width:300px;margin:0 auto}
.prev .am{font-family:var(--s);font-size:44px;color:var(--br);margin:8px 0}.prev p{margin:0;color:var(--mu)}
.story{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.story img{border-radius:24px;aspect-ratio:4/3;object-fit:cover;width:100%}.story h2{font-size:clamp(34px,4vw,50px);margin-bottom:12px}.story p{color:var(--mu)}
.faq{max-width:800px;margin:0 auto}.faq details{border-bottom:2px solid var(--ln);padding:16px 0}.faq summary{cursor:pointer;font-weight:700;font-size:19px;list-style:none;color:var(--br)}.faq summary::-webkit-details-marker{display:none}.faq p{color:var(--mu);margin:8px 0 0}
footer{background:var(--br);color:#E9CFC4;padding:40px 0;font-size:15px}.ft{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.ft b{color:#fff;display:block;margin-bottom:6px}.ft a{color:#fff}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--br);color:#fff;padding:12px 22px;border-radius:999px;transition:.3s;z-index:70;visibility:hidden;font-weight:700}.toast.show{transform:translate(-50%,0);visibility:visible}
@media(max-width:940px){.menu{display:none}.burger{display:block}.menu.open{display:flex;flex-direction:column;position:absolute;top:80px;left:0;right:0;background:#fff;padding:20px;gap:14px;z-index:30}.nav{position:relative}
.hg,.cg,.story,.ft{grid-template-columns:1fr}.today{grid-template-columns:1fr 1fr}.prev{position:static}}
@media(max-width:520px){.today{grid-template-columns:1fr}}
</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="bakery.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="top">Order cakes 3 days ahead · Fresh bread from 7am, until it's gone</div>
<header class="wrap"><nav class="nav" aria-label="Main"><a href="#" class="logo">Crumb & Co.</a><ul class="menu" id="menu"><li><a href="#today">Today's bakes</a></li><li><a href="#cakes">Custom cakes</a></li><li><a href="#story">Our story</a></li><li><a href="#faq">FAQ</a></li></ul><a href="#today" class="btn btn-b">Basket (<span id="bc">0</span>)</a><button class="burger" aria-label="Open menu" aria-expanded="false" aria-controls="menu">☰</button></nav></header>
<main id="main">
<section class="hero" aria-labelledby="h1" style="padding:0"><div class="wrap hg"><div><h1 id="h1">Baked this morning, <em>still warm.</em></h1><p>A family bakery in Leeds since 1998. Slow-proved sourdough, buttery pastries and celebration cakes made to order, with real butter and local flour.</p><div style="display:flex;gap:12px;flex-wrap:wrap"><a href="#today" class="btn btn-b">Pre-order today's bakes</a><a href="#cakes" class="btn btn-l">Design a cake</a></div></div>
<div class="hi"><img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=700&q=80&auto=format&fit=crop" alt="Round loaves of seeded sourdough bread with wheat" width="700" height="900" fetchpriority="high"><img src="https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=500&q=75&auto=format&fit=crop" alt="Golden croissants dusted with flour" width="500" height="500"><img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=500&q=75&auto=format&fit=crop" alt="Chocolate cake with piped chocolate frosting" width="500" height="500" loading="lazy"></div></div></section>
<section id="today" aria-labelledby="t1"><div class="wrap"><div class="sh"><h2 id="t1">Today's bakes</h2><p>Pre-order now and collect from 7am. We bake a set amount each day, so when it's gone, it's gone.</p></div><div class="today" id="bakes"></div></div></section>
<section class="cake" id="cakes" aria-labelledby="c1"><div class="wrap"><div class="sh"><h2 id="c1">Design your cake</h2><p>Choose your size, flavour and finish. We need 3 days' notice.</p></div><div class="cg">
<div><div class="grp"><b>Size</b><div class="opts" id="sz"><button type="button" aria-pressed="false" data-v="6 inch" data-p="38" data-t="1">6 inch<small>serves 8</small></button><button type="button" aria-pressed="true" data-v="8 inch" data-p="52" data-t="1">8 inch<small>serves 14</small></button><button type="button" aria-pressed="false" data-v="Two tiers" data-p="95" data-t="2">Two tiers<small>serves 30</small></button></div></div>
<div class="grp"><b>Flavour</b><div class="opts" id="fl"><button type="button" aria-pressed="true" data-v="Vanilla" data-p="0" data-c="#F7E3B5">Vanilla</button><button type="button" aria-pressed="false" data-v="Chocolate" data-p="4" data-c="#6B3A2A">Chocolate</button><button type="button" aria-pressed="false" data-v="Lemon" data-p="3" data-c="#F5E07A">Lemon</button><button type="button" aria-pressed="false" data-v="Red velvet" data-p="5" data-c="#A8323A">Red velvet</button></div></div>
<div class="grp"><b>Icing</b><div class="opts" id="ic"><button type="button" aria-pressed="true" data-v="Buttercream" data-p="0" data-c="#FFF7EE">Buttercream</button><button type="button" aria-pressed="false" data-v="Pink buttercream" data-p="0" data-c="#F6C2CF">Pink</button><button type="button" aria-pressed="false" data-v="Chocolate ganache" data-p="6" data-c="#4A261B">Ganache</button></div></div>
<div class="grp"><b><label for="msg">Message on top (optional)</label></b><input id="msg" maxlength="24" placeholder="Happy birthday, Sam"></div>
<div class="grp"><b><label for="dt">Collection date</label></b><input id="dt" type="date"></div></div>
<div class="prev" aria-live="polite"><svg viewBox="0 0 300 260" aria-hidden="true"><ellipse cx="150" cy="232" rx="120" ry="14" fill="#EFDDD3"/><g id="cakeG"></g><text id="ct" x="150" y="0" text-anchor="middle" font-family="Lora" font-style="italic" font-size="15" fill="#6B3A2A"></text></svg>
<h3 id="cn">8 inch vanilla cake</h3><p id="cd">Buttercream</p><div class="am">£<span id="cp">52</span></div><button class="btn btn-b" type="button" id="cadd">Add cake to basket</button></div></div></div></section>
<section id="story" aria-labelledby="s1"><div class="wrap story"><img src="https://images.unsplash.com/photo-1509440159596-0249088772ff?w=900&q=75&auto=format&fit=crop" alt="Fresh loaves on a floured table" width="900" height="675" loading="lazy"><div><h2 id="s1">Three generations, one oven.</h2><p>Rosa opened Crumb & Co. with one oven and her mother's recipes. Today her son Daniel bakes through the night, still using the same sourdough starter from 1998.</p><p>Everything is made by hand in our kitchen behind the shop. Nothing is frozen, and leftover bread goes to the local food bank every evening.</p></div></div></section>
<section id="faq" aria-labelledby="f1" style="padding-top:0"><div class="wrap"><div class="sh"><h2 id="f1">Questions</h2></div><div class="faq">
<details open><summary>How far ahead should I order a cake?</summary><p>Please order at least 3 days before you need it. For weddings and cakes with more than two tiers, give us 2 weeks.</p></details>
<details><summary>Do you make gluten-free or vegan bakes?</summary><p>Yes. We bake gluten-free brownies and vegan banana bread every day, and can make most cakes vegan with 5 days' notice. Our kitchen uses flour and nuts, so we can't promise allergen-free.</p></details>
<details><summary>Can you deliver?</summary><p>We deliver cakes within 8 miles of the shop for £6. Bread and pastries are collection only.</p></details></div></div></section>
</main>
<footer><div class="wrap ft"><div><b>Visit</b>42 Kirkgate, Leeds LS2 7DJ</div><div><b>Opening hours</b>Tuesday to Saturday 7:00 to 16:00<br>Sunday 8:00 to 13:00 · Closed Monday</div><div><b>© <span id="yr">2026</span> Crumb & Co.</b>Photos: <a href="https://unsplash.com" rel="noopener">Unsplash</a> · <a href="https://mmrahmanbappi.github.io/100-free-html-templates/">Free HTML Templates</a></div></div></footer>
<div class="toast" id="toast" role="status"></div>
<script>
const B=[["🍞","Country sourdough","800 g",4.8,6],["🥐","Butter croissant","each",2.4,14],["🥖","French baguette","each",2.2,0],["🥯","Cinnamon bun","each",3.1,3],["🧁","Vanilla cupcake","each",2.9,11],["🍪","Oat and raisin cookie","each",1.8,20],["🥧","Apple pie","serves 6",14,2],["🍰","Carrot cake slice","each",3.8,0]];
const $=id=>document.getElementById(id);let bc=0;function toast(t){const x=$('toast');x.textContent=t;x.classList.add('show');setTimeout(()=>x.classList.remove('show'),2200)}
function bakes(){$('bakes').innerHTML=B.map((b,i)=>`<article class="bk ${b[4]?'':'out'}">${b[4]?'':'<span class="so">Sold out</span>'}<div class="e" aria-hidden="true">${b[0]}</div><h3>${b[1]}</h3><small>${b[2]}</small>${b[4]&&b[4]<=3?`<span class="left">Only ${b[4]} left</span>`:''}<div class="rw"><b>£${b[3].toFixed(2)}</b><button type="button" data-i="${i}" ${b[4]?'':'disabled'}>${b[4]?'Add':'Gone'}</button></div></article>`).join('')}
$('bakes').onclick=e=>{const b=e.target.closest('[data-i]');if(!b||b.disabled)return;B[b.dataset.i][4]--;bc++;$('bc').textContent=bc;toast(B[b.dataset.i][1]+' added');bakes()};bakes();
const on=id=>$(id).querySelector('[aria-pressed=true]');['sz','fl','ic'].forEach(id=>$(id).onclick=e=>{const b=e.target.closest('button');if(!b)return;$(id).querySelectorAll('button').forEach(x=>x.setAttribute('aria-pressed',x===b));cake()});
function tier(y,w,h,sp,ic){return `<rect x="${150-w/2}" y="${y}" width="${w}" height="${h}" rx="10" fill="${sp}"/><path d="M${150-w/2} ${y+10}q0-10 10-10h${w-20}q10 0 10 10v12${Array.from({length:6},(_,i)=>`q${-w/12} 14 ${-w/6} 0`).join('')}z" fill="${ic}"/>`}
function cake(){const s=on('sz'),f=on('fl'),c=on('ic');let g='';const t=+s.dataset.t;
if(t===2){g+=tier(150,210,78,f.dataset.c,c.dataset.c)+tier(80,140,70,f.dataset.c,c.dataset.c)}else{const w=s.dataset.v==='6 inch'?170:210;g+=tier(130,w,98,f.dataset.c,c.dataset.c)}
$('cakeG').innerHTML=g;const top=t===2?74:124;$('ct').setAttribute('y',top);$('ct').textContent=$('msg').value;
$('cn').textContent=s.dataset.v+' '+f.dataset.v.toLowerCase()+' cake';$('cd').textContent=c.dataset.v+($('msg').value?', with "'+$('msg').value+'"':'');$('cp').textContent=+s.dataset.p+ +f.dataset.p+ +c.dataset.p}
$('msg').oninput=cake;const d=new Date(Date.now()+3*864e5).toISOString().slice(0,10);$('dt').min=d;$('dt').value=d;cake();
$('cadd').onclick=()=>{bc++;$('bc').textContent=bc;toast($('cn').textContent+' added for '+$('dt').value)};
</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>