Un code par lebdev

Ouvrir dans l'éditeur Publiez votre code

Recommandé

11 September 2025

Exemple de bloc de code d'animation CSS

16 April 2025

<!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>

Un code par lebdev

Recommandé

Exemple de bloc de code d'animation CSS

Un code de Metehan

Un code de DEME

HTML

CSS

JS

Recommandé

Exemple de bloc de code d'animation CSS

Un code de Metehan

Un code de DEME

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS