Um código por lebdev

1642 lebdev

Abrir no Editor Publique Seu Código

Recomendado

14 May 2025

Um código de kaiser.zulassungsservice.gmbh

26 October 2024

Modelo de site de portfólio de desenvolvedor HTML CSS

16 October 2025

Tela de carregamento animada em CSS com efeito de código

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>

Recomendado

Um código de kaiser.zulassungsservice.gmbh

Modelo de site de portfólio de desenvolvedor HTML CSS

Tela de carregamento animada em CSS com efeito de código

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS