Scandinavian Bakery
Minimalist design with bold typography and large imagery, combining Nordic aesthetics with playful copy. Features Space Grotesk font, monochromatic color scheme, and generous white space
Preview
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;600&display=swap');
</style>
</head>
<body style="background-color:#ffffff;margin-top:auto;margin-bottom:auto;margin-left:auto;margin-right:auto;font-family:'Space Grotesk', sans-serif">
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:600px;margin:0 auto">
<!-- Minimal Header -->
<tr>
<td style="padding:60px 20px">
<h1 style="font-weight:600;font-size:48px;text-align:center;color:#1a1a1a;margin:0;letter-spacing:-1px">FIKA & CO</h1>
</td>
</tr>
<!-- Hero Section -->
<tr>
<td style="padding:0 20px">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587" alt="Fresh Sourdough" style="width:100%;height:500px;object-fit:cover" />
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="padding:40px 0">
<h2 style="font-size:32px;font-weight:600;color:#1a1a1a;margin:0;letter-spacing:-0.5px">Oh hey! We baked you something rad today 🍞</h2>
</td>
</tr>
</table>
</td>
</tr>
<!-- Featured Products -->
<tr>
<td style="padding:0 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="padding:0 0 80px">
<img src="https://images.unsplash.com/photo-1509440159596-0249088772ff" alt="Pastries" style="width:100%;height:400px;object-fit:cover;margin-bottom:24px" />
<h3 style="font-size:24px;font-weight:600;color:#1a1a1a;margin:0 0 16px 0">Today's Lineup = Pure Joy</h3>
<p style="font-size:18px;line-height:1.5;color:#666;margin:0">Carbs so good they'll make your day. No joke.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Menu Grid -->
<tr>
<td style="padding:0 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="background:#f7f7f7">
<tr>
<td style="padding:60px">
<h2 style="font-size:32px;font-weight:600;color:#1a1a1a;margin:0 0 40px 0;letter-spacing:-0.5px">The Good Stuff ✨</h2>
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="padding-bottom:24px">
<p style="font-size:20px;color:#1a1a1a;margin:0;font-weight:600">Sourdough Loaf</p>
<p style="font-size:18px;color:#666;margin:8px 0 0 0">Totally worth the gluten</p>
</td>
<td style="text-align:right;padding-bottom:24px">
<p style="font-size:20px;color:#1a1a1a;margin:0;font-weight:600">68 kr</p>
</td>
</tr>
<tr>
<td style="padding-bottom:24px">
<p style="font-size:20px;color:#1a1a1a;margin:0;font-weight:600">Cardamom Bun</p>
<p style="font-size:18px;color:#666;margin:8px 0 0 0">Better than a hug</p>
</td>
<td style="text-align:right;padding-bottom:24px">
<p style="font-size:20px;color:#1a1a1a;margin:0;font-weight:600">32 kr</p>
</td>
</tr>
<tr>
<td style="padding-bottom:24px">
<p style="font-size:20px;color:#1a1a1a;margin:0;font-weight:600">Rye Bread</p>
<p style="font-size:18px;color:#666;margin:8px 0 0 0">Dark & mysterious</p>
</td>
<td style="text-align:right;padding-bottom:24px">
<p style="font-size:20px;color:#1a1a1a;margin:0;font-weight:600">58 kr</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- Full-width Image Section -->
<tr>
<td style="padding:80px 0">
<img src="https://images.unsplash.com/photo-1517433670267-08bbd4be890f" alt="Baking" style="width:100%;height:600px;object-fit:cover" />
</td>
</tr>
<!-- Pre-order Call Out -->
<tr>
<td style="padding:0 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="border:2px solid #1a1a1a">
<tr>
<td style="padding:60px;text-align:center">
<h2 style="font-size:32px;font-weight:600;color:#1a1a1a;margin:0 0 24px 0;letter-spacing:-0.5px">Want the Good Stuff? Pre-order!</h2>
<p style="font-size:18px;line-height:1.5;color:#666;margin:0 0 32px 0">Because nobody likes FOMO 😉</p>
<a href="#" style="display:inline-block;padding:20px 40px;background:#1a1a1a;color:white;text-decoration:none;font-weight:600;font-size:18px">Order Now</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Opening Hours -->
<tr>
<td style="padding:80px 20px">
<table width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tr>
<td style="text-align:center">
<h3 style="font-size:24px;font-weight:600;color:#1a1a1a;margin:0 0 24px 0">Come Say Hi!</h3>
<p style="font-size:18px;line-height:1.5;color:#666;margin:0">
Södermalm, Stockholm<br/>
Mon-Fri: 7-18 • Sat-Sun: 8-16
</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:60px 20px;text-align:center;background:#f7f7f7">
<p style="font-size:18px;color:#1a1a1a;margin:0 0 24px 0;font-weight:600">Follow Our Bread Journey</p>
<table width="100%" max-width="300px" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="margin:0 auto">
<tr>
<td style="padding:0 12px">
<a href="#" style="font-size:16px;color:#666;text-decoration:none">Instagram</a>
</td>
<td style="padding:0 12px">
<a href="#" style="font-size:16px;color:#666;text-decoration:none">TikTok</a>
</td>
<td style="padding:0 12px">
<a href="#" style="font-size:16px;color:#666;text-decoration:none">Pinterest</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>