Un código de lebdev

1,904 lebdev

Abrir en el editor Publica tu código

Recomendado

19 October 2025

Transformación de formas de partículas con controles en Three.js

15 December 2025

Botón de luz HTML con icono y texto

9 December 2025

Formulario de inicio de sesión y registro HTML/CSS

HTML

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

CSS