Bakery HTML Website Template

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flourish Bakery - Artisan Bread & Pastries</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Georgia', serif;
        }
        
        body {
            background-color: #fff9f0;
            color: #5a3921;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        header {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            color: #c75f1d;
        }
        
        .logo span {
            color: #5a3921;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 40px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: #5a3921;
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: #c75f1d;
        }
        
        .hero {
            height: 80vh;
            background-image: url('/api/placeholder/1200/800');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
        }
        
        .hero-content {
            background-color: rgba(255, 255, 255, 0.9);
            padding: 40px;
            border-radius: 10px;
            max-width: 600px;
        }
        
        .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #c75f1d;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        .btn {
            display: inline-block;
            background-color: #c75f1d;
            color: white;
            padding: 12px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #a04d13;
        }
        
        .featured {
            padding: 80px 0;
        }
        
        .section-title {
            text-align: center;
            font-size: 36px;
            margin-bottom: 60px;
            color: #c75f1d;
        }
        
        .products {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .product {
            background-color: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .product:hover {
            transform: translateY(-10px);
        }
        
        .product img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .product-info {
            padding: 20px;
        }
        
        .product-title {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .product-desc {
            color: #666;
            margin-bottom: 15px;
        }
        
        .product-price {
            font-weight: bold;
            font-size: 18px;
            color: #c75f1d;
        }
        
        .about {
            padding: 80px 0;
            background-color: #fff;
        }
        
        .about-content {
            display: flex;
            align-items: center;
            gap: 50px;
        }
        
        .about-img {
            flex: 1;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .about-img img {
            width: 100%;
            height: auto;
        }
        
        .about-text {
            flex: 1;
        }
        
        .about-text h2 {
            font-size: 36px;
            margin-bottom: 20px;
            color: #c75f1d;
        }
        
        .about-text p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
        }
        
        footer {
            background-color: #5a3921;
            color: #fff;
            padding: 40px 0;
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .footer-col {
            flex: 1;
            min-width: 200px;
            margin-bottom: 30px;
        }
        
        .footer-col h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #f0bc8c;
        }
        
        .footer-col p, .footer-col a {
            display: block;
            margin-bottom: 10px;
            color: #fff;
            text-decoration: none;
        }
        
        .footer-col a:hover {
            color: #f0bc8c;
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.1);
            margin-top: 30px;
        }
        
        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
            }
            
            .nav-links {
                margin-top: 20px;
            }
            
            .nav-links li {
                margin: 0 15px;
            }
            
            .hero {
                height: auto;
                padding: 100px 0;
            }
            
            .hero-content {
                max-width: 100%;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .footer-col {
                flex: 0 0 100%;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">Flourish<span>Bakery</span></div>
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Order</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>
    
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>Artisan Breads & Pastries</h1>
                <p>Handcrafted with love using traditional methods and the finest ingredients. Our bakery brings the authentic taste of artisanal baking to your table.</p>
                <a href="#" class="btn">Order Now</a>
            </div>
        </div>
    </section>
    
    <section class="featured">
        <div class="container">
            <h2 class="section-title">Our Bestsellers</h2>
            <div class="products">
                <div class="product">
                    <img src="/api/placeholder/400/250" alt="Sourdough Bread">
                    <div class="product-info">
                        <h3 class="product-title">Classic Sourdough</h3>
                        <p class="product-desc">Naturally leavened with our 10-year-old starter. Crispy crust, tender crumb.</p>
                        <p class="product-price">$7.50</p>
                    </div>
                </div>
                <div class="product">
                    <img src="/api/placeholder/400/250" alt="Pain au Chocolat">
                    <div class="product-info">
                        <h3 class="product-title">Pain au Chocolat</h3>
                        <p class="product-desc">Buttery, flaky pastry filled with premium dark chocolate.</p>
                        <p class="product-price">$4.25</p>
                    </div>
                </div>
                <div class="product">
                    <img src="/api/placeholder/400/250" alt="Cinnamon Roll">
                    <div class="product-info">
                        <h3 class="product-title">Cinnamon Roll</h3>
                        <p class="product-desc">Soft, swirled pastry with cinnamon, topped with cream cheese frosting.</p>
                        <p class="product-price">$5.75</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <section class="about">
        <div class="container">
            <div class="about-content">
                <div class="about-img">
                    <img src="/api/placeholder/600/400" alt="Baker">
                </div>
                <div class="about-text">
                    <h2>Our Story</h2>
                    <p>Founded in 2010, Flourish Bakery began as a small passion project in a home kitchen. Our founder, Sarah, spent years perfecting traditional European baking techniques before bringing her creations to farmers' markets around the city.</p>
                    <p>Today, we're proud to serve our community with the same dedication to quality and craftsmanship. Every loaf is naturally leavened, hand-shaped, and baked in our stone hearth oven.</p>
                    <a href="#" class="btn">Learn More</a>
                </div>
            </div>
        </div>
    </section>
    
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-col">
                    <h3>Visit Us</h3>
                    <p>123 Main Street</p>
                    <p>Portland, OR 97210</p>
                    <p>Mon-Sat: 7am - 6pm</p>
                    <p>Sunday: 8am - 3pm</p>
                </div>
                <div class="footer-col">
                    <h3>Contact</h3>
                    <p>Phone: (555) 123-4567</p>
                    <p>Email: hello@flourishbakery.com</p>
                </div>
                <div class="footer-col">
                    <h3>Follow Us</h3>
                    <a href="#">Instagram</a>
                    <a href="#">Facebook</a>
                    <a href="#">Twitter</a>
                </div>
                <div class="footer-col">
                    <h3>Newsletter</h3>
                    <p>Subscribe for updates, special offers, and baking tips.</p>
                    <a href="#" class="btn">Subscribe</a>
                </div>
            </div>
            <div class="copyright">
                <p>© 2025 Flourish Bakery. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>

Bakery HTML Website Template

Recommended

HTML Stickman with Grappling Hook Structure

HTML Message Bubble with SVG Design

Web Tasarım, Dijital Deneyim ve Podcast HTML Template

HTML

CSS

JS

Recommended

HTML Stickman with Grappling Hook Structure

HTML Message Bubble with SVG Design

Web Tasarım, Dijital Deneyim ve Podcast HTML Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS