Since 1987 we have baked by hand every night – with sourdough, time and flour from the region.
Baked tonight, on the shelf in the morning. When it’s gone, it’s gone.
An order for Sunday, a question about allergens or simply a compliment – just say it. No phone call, no form.
<!doctype html> <html lang="en"> <head> <!-- Example website by Speeeak: bakery “Korn & Krume” with two Speeeak widgets (inline and floating). Design: Oliver Wermeling. Everything here is ordinary HTML/CSS – the only Speeeak-specific parts are the two <script> lines labelled “Speeeak:”. Replace YOUR-KEY (2×) with the key of your widget (Speeeak account → Widgets). Images are in img/, fonts in fonts/ (self-hosted, SIL Open Font License). --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Korn & Krume – Bakery (example site by Speeeak)</title> <link rel="stylesheet" href="fonts/fonts.css"> <!-- Fonts self-hosted (Instrument Serif, Albert Sans – SIL Open Font License), no Google servers --> <style> html { scroll-behavior: smooth; } body { margin: 0; background: #fbf6ee; color: #2a211a; font-family: 'Albert Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } a { color: #5b3a1e; text-decoration: none; } a:hover { color: #c9962e; } button { font-family: inherit; cursor: pointer; } @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(91,58,30,.35); } 70% { box-shadow: 0 0 0 22px rgba(91,58,30,0); } 100% { box-shadow: 0 0 0 0 rgba(91,58,30,0); } } @keyframes wave { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } } @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } } </style> </head> <body> <div style="position:relative;z-index:2;min-height:100vh;overflow-x:clip"> <!-- Header --> <header style="position:sticky;top:0;z-index:40;background:rgba(251,246,238,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(91,58,30,.12)"> <div style="max-width:1240px;margin:0 auto;padding:16px clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap"> <a href="#" style="display:flex;align-items:baseline;gap:6px;font-family:'Instrument Serif',Georgia,serif;font-size:28px;letter-spacing:-.01em;color:#2a211a"> <span>Korn</span><span style="font-style:italic;color:#c9962e">&</span><span>Krume</span> </a> <nav style="display:flex;align-items:center;gap:clamp(16px,3vw,36px);font-size:15px;font-weight:500"> <a href="#angebot" style="background:none;border:0;padding:6px 0;color:#5b3a1e;font-size:15px;font-weight:500;border-bottom:1px solid transparent">Our range</a> <a href="#zeiten" style="background:none;border:0;padding:6px 0;color:#5b3a1e;font-size:15px;font-weight:500;border-bottom:1px solid transparent">Opening hours</a> <a href="#kontakt" style="background:none;border:0;padding:6px 0;color:#5b3a1e;font-size:15px;font-weight:500;border-bottom:1px solid transparent">Contact</a> </nav> </div> </header> <!-- Hero --> <section style="position:relative;background:radial-gradient(900px 600px at 88% -10%, rgba(201,150,46,.22), transparent 60%)"> <div style="max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,72px);align-items:center"> <div style="display:flex;flex-direction:column;gap:28px;animation:rise .8s cubic-bezier(.2,.7,.2,1) both"> <div style="display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a0742a"> <span style="width:28px;height:1px;background:#c9962e"></span> <span>Artisan bakery · Senden · since 1987</span> </div> <h1 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(54px,8.2vw,116px);line-height:.94;letter-spacing:-.02em;color:#2a211a">Bread that tastes like <em style="font-style:italic;color:#5b3a1e">bread</em>.</h1> <p style="margin:0;max-width:480px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:#5c4a3a">Since 1987 we have baked by hand every night – with sourdough, time and flour from the region.</p> <div style="display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px"> <a href="#kontakt" style="display:inline-flex;align-items:center;gap:12px;background:#5b3a1e;color:#fbf6ee;border:0;border-radius:999px;padding:16px 26px 16px 20px;font-size:16px;font-weight:600;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(91,58,30,.7);transition:transform .25s,background .25s"> <span style="display:inline-flex;width:30px;height:30px;border-radius:50%;background:#c9962e;align-items:center;justify-content:center"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2a211a" stroke-width="2.4" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3" fill="#2a211a" stroke="none"></rect><path d="M5 11a7 7 0 0 0 14 0"></path><path d="M12 18v3"></path></svg> </span> Leave your order by voice </a> <a href="#angebot" style="background:none;border:0;padding:14px 6px;color:#5b3a1e;font-size:16px;font-weight:500;white-space:nowrap;border-bottom:1px solid rgba(91,58,30,.35)">See our range</a> </div> <div style="display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:10px;padding-top:24px;border-top:1px solid rgba(91,58,30,.14);font-size:14px;color:#7a6652"> <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Sourdough</span> <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Time</span> <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Regional flour</span> </div> </div> <div style="position:relative;animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both"> <div style="position:relative;aspect-ratio:4/5;max-height:720px;border-radius:28px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(43,26,16,.55)"> <img src="img/hero-brot.jpg" alt="freshly sliced sourdough bread, warm morning light, flour dust" style="width:100%;height:100%;object-fit:cover;display:block"> </div> <div style="position:absolute;left:-22px;bottom:34px;width:150px;height:150px;border-radius:50%;background:#2b1a10;display:grid;place-items:center;box-shadow:0 24px 50px -20px rgba(43,26,16,.7)"> <svg viewBox="0 0 160 160" style="position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite"> <defs><path id="kk-circ" d="M80,80 m-56,0 a56,56 0 1,1 112,0 a56,56 0 1,1 -112,0"></path></defs> <text font-family="Albert Sans, sans-serif" font-size="12.5" font-weight="600" letter-spacing="3" fill="#fbf6ee"><textPath href="#kk-circ">BAKED BY HAND EVERY NIGHT · SINCE 1987 · </textPath></text> </svg> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:34px;color:#c9962e;font-style:italic;line-height:1">K&K</span> </div> </div> </div> </section> <!-- Our range --> <section id="angebot" style="padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,88px)"> <div style="max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)"> <div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,48px)"> <div style="display:flex;flex-direction:column;gap:14px"> <div style="font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a0742a">01 — Our range</div> <h2 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.02em;color:#2a211a">Our range</h2> </div> <p style="margin:0;max-width:360px;font-size:15px;line-height:1.55;color:#7a6652">Baked tonight, on the shelf in the morning. When it’s gone, it’s gone.</p> </div> <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(14px,2vw,24px)"> <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s"> <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6"> <img src="img/roggenlaib.jpg" alt="Rye loaf, dark crust" style="width:100%;height:100%;object-fit:cover;display:block"> <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">01</span> </div> <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px"> <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Rye loaf</span><span style="font-size:13px;color:#7a6652">1 kg</span></div> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">€4.80</span> </div> </div> <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s"> <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6"> <img src="img/dinkelkruste.jpg" alt="Spelt crust loaf, floured" style="width:100%;height:100%;object-fit:cover;display:block"> <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">02</span> </div> <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px"> <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Spelt crust loaf</span><span style="font-size:13px;color:#7a6652">750 g</span></div> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">€4.20</span> </div> </div> <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s"> <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6"> <img src="img/croissant.jpg" alt="Butter croissant, golden brown, flaky" style="width:100%;height:100%;object-fit:cover;display:block"> <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">03</span> </div> <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px"> <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Butter croissant</span><span style="font-size:13px;color:#7a6652">each</span></div> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">€1.60</span> </div> </div> <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s"> <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6"> <img src="img/apfeltasche.jpg" alt="Apple turnover with icing" style="width:100%;height:100%;object-fit:cover;display:block"> <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">04</span> </div> <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px"> <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Apple turnover</span><span style="font-size:13px;color:#7a6652">each</span></div> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">€2.10</span> </div> </div> </div> </div> </section> <!-- Opening hours --> <section id="zeiten" style="background:#2b1a10;color:#fbf6ee;position:relative;overflow:hidden"> <div style="position:absolute;inset:0;background:radial-gradient(700px 400px at 10% 100%, rgba(201,150,46,.25), transparent 60%);pointer-events:none"></div> <div style="position:relative;max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,104px) clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,5vw,64px);align-items:end"> <div style="display:flex;flex-direction:column;gap:14px"> <div style="font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#c9962e">02 — Opening hours</div> <h2 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.02em">When the oven is <em style="font-style:italic;color:#c9962e">warm</em></h2> </div> <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;grid-column:span 1"> <div style="display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(251,246,238,.22)"> <span style="font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,238,.7)">Monday – Friday</span> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">6 am – 6 pm</span> </div> <div style="display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(251,246,238,.22)"> <span style="font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,238,.7)">Saturday</span> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">6 am – 1 pm</span> </div> <div style="display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(251,246,238,.22)"> <span style="font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,238,.7)">Sunday</span> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">8 am – 11 am</span> </div> </div> </div> </section> <!-- Contact + inline widget --> <section id="kontakt" style="padding:clamp(64px,9vw,128px) 0"> <div style="max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(32px,5vw,80px);align-items:center"> <div style="display:flex;flex-direction:column;gap:22px"> <div style="font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a0742a">03 — Contact</div> <h2 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(42px,5.6vw,76px);line-height:.98;letter-spacing:-.02em;color:#2a211a">Tell us what you’d <em style="font-style:italic;color:#5b3a1e">like</em>.</h2> <p style="margin:0;max-width:460px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:#5c4a3a">An order for Sunday, a question about allergens or simply a compliment – just say it. No phone call, no form.</p> <div style="display:flex;flex-direction:column;gap:6px;font-size:15px;color:#7a6652;margin-top:8px"> <span>Mühlenweg 3 · 48308 Senden, Germany</span> </div> </div> <div style="position:relative"> <div style="position:absolute;top:-16px;left:22px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#2b1a10;color:#fbf6ee;border-radius:999px;padding:7px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;box-shadow:0 10px 24px -12px rgba(43,26,16,.6)"> <span style="width:7px;height:7px;border-radius:50%;background:#c9962e"></span> Speeeak · Inline widget · data-art="text" </div> <div style="background:#fff;border:1px solid #eadfcc;border-radius:26px;padding:clamp(22px,3vw,34px);box-shadow:0 40px 80px -40px rgba(43,26,16,.45);display:flex;flex-direction:column;gap:22px"> <div style="display:flex;align-items:center;justify-content:space-between;gap:12px"> <div style="display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7a6652"> <span style="width:8px;height:8px;border-radius:50%;background:#c9962e"></span>Voice message </div> <span style="font-size:12px;color:#a69684">no account needed</span> </div> <!-- Speeeak: INLINE widget. One line – the recorder appears here, the height adjusts itself. data-farbe takes the bakery's brand colour, data-datenschutz links to your own privacy policy, data-rahmen="ohne" leaves out the widget's own frame, because the white card here already is one. --> <script src="https://speeeak.de/js/widget.js" data-widget="YOUR-KEY" data-art="text" data-rahmen="ohne" data-farbe="#5b3a1e" data-datenschutz="https://speeeak.io/datenschutz" async></script> </div> </div> </div> </section> <footer style="border-top:1px solid rgba(91,58,30,.14)"> <div style="max-width:1240px;margin:0 auto;padding:28px clamp(20px,4vw,48px) 110px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:13px;color:#7a6652"> <span style="font-family:'Instrument Serif',Georgia,serif;font-size:18px;color:#2a211a">Korn <span style="font-style:italic;color:#c9962e">&</span> Krume</span> <span>Mühlenweg 3 · 48308 Senden, Germany · Example site</span> </div> </footer> <!-- Speeeak: FLOATING widget – pill button bottom right on every page, click opens a window. data-art="popup" (alternatives: knopf, lasche, rund) · data-text label · data-position rechts|links data-farbe pill button and widget · data-textfarbe text colour of the pill button · data-datenschutz link to YOUR privacy policy --> <script src="https://speeeak.de/js/widget.js" data-widget="YOUR-KEY" data-art="popup" data-text="Leave a voice message" data-position="rechts" data-farbe="#5b3a1e" data-textfarbe="#fbf6ee" data-datenschutz="https://speeeak.io/datenschutz" async></script> </body> </html>