Modelo de site HTML da Starbucks

Abrir no Editor Publique Seu Código

Recomendado

14 June 2025

PÁGINA INICIAL DO SITE DO BANCO

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starbucks Coffee Company</title>
    <link rel="icon" href="https://www.starbucks.com/favicon.ico" type="image/x-icon">
    <style>
        /* Basic styling for demonstration - not part of the core request but helps visualize structure */
        body { font-family: sans-serif; margin: 0; color: #1e3932; }
        header { background-color: #f7f7f7; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; }
        header .logo { font-size: 24px; font-weight: bold; color: #00704a; }
        nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
        nav ul li { margin-right: 20px; }
        nav ul li a { text-decoration: none; color: #1e3932; font-weight: bold; }
        .secondary-nav { display: flex; align-items: center; }
        .secondary-nav a { text-decoration: none; color: #1e3932; margin-left: 15px; }
        .button { background-color: #00704a; color: white; padding: 8px 15px; border-radius: 20px; text-decoration: none; font-weight: bold; }
        main { padding: 20px; }
        section { margin-bottom: 40px; padding: 20px; border-radius: 8px; }
        .hero { background-color: #d4e9e2; text-align: center; padding: 50px 20px; }
        .hero h1 { color: #00704a; font-size: 3em; margin-bottom: 10px; }
        .hero p { font-size: 1.2em; color: #1e3932; }
        .featured-products { background-color: #f0f0f0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
        .product-card { background-color: white; padding: 15px; border-radius: 8px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .product-card img { max-width: 100%; height: auto; margin-bottom: 10px; }
        footer { background-color: #1e3932; color: white; padding: 40px 20px; text-align: center; }
        footer .footer-links { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
        footer .footer-links div { margin: 0 20px; text-align: left; }
        footer .footer-links h4 { color: #00704a; margin-bottom: 10px; }
        footer .footer-links ul { list-style: none; padding: 0; }
        footer .footer-links ul li { margin-bottom: 5px; }
        footer .footer-links ul li a { color: white; text-decoration: none; }
        footer .social-media a { color: white; font-size: 24px; margin: 0 10px; text-decoration: none; }
        footer .copyright { margin-top: 20px; font-size: 0.9em; color: #ccc; }
    </style>
</head>
<body>
    <header>
        <div class="logo">Starbucks</div>
        <nav>
            <ul>
                <li><a href="#">Menu</a></li>
                <li><a href="#">Rewards</a></li>
                <li><a href="#">Gift Cards</a></li>
            </ul>
        </nav>
        <div class="secondary-nav">
            <a href="#">Find a Store</a>
            <a href="#" class="button">Sign In</a>
            <a href="#" class="button">Join Now</a>
        </div>
    </header>

<main>
        <section class="hero">
            <h1>Sip into Spring with Our New Drinks!</h1>
            <p>Discover refreshing new flavors and classic favorites.</p>
            <a href="#" class="button" style="background-color: #00704a; color: white; padding: 12px 25px; margin-top: 20px; display: inline-block;">Order Now</a>
        </section>

<section class="featured-products">
            <h2>Featured Products</h2>
            <div class="product-card">
                <img src="https://via.placeholder.com/200x200?text=New+Latte" alt="New Spring Latte">
                <h3>Spring Blossom Latte</h3>
                <p>A delightful blend of floral notes and espresso.</p>
                <a href="#" class="button" style="background-color: #00704a;">Learn More</a>
            </div>
            <div class="product-card">
                <img src="https://via.placeholder.com/200x200?text=Breakfast+Sandwich" alt="Breakfast Sandwich">
                <h3>Impossible™ Breakfast Sandwich</h3>
                <p>Plant-based patty with savory flavors.</p>
                <a href="#" class="button" style="background-color: #00704a;">Order Food</a>
            </div>
            <div class="product-card">
                <img src="https://via.placeholder.com/200x200?text=Coffee+Beans" alt="Starbucks Coffee Beans">
                <h3>Pike Place® Roast</h3>
                <p>Smooth, well-rounded blend of Latin American coffees.</p>
                <a href="#" class="button" style="background-color: #00704a;">Buy Beans</a>
            </div>
        </section>

<section style="background-color: #f0f2f5; text-align: center; padding: 40px 20px;">
            <h2>Starbucks® Rewards</h2>
            <p>Join Starbucks® Rewards and get free food and drinks, exclusive offers, and more.</p>
            <a href="#" class="button" style="background-color: #00704a; color: white; padding: 12px 25px; margin-top: 20px; display: inline-block;">Join Now</a>
        </section>
    </main>

<footer>
        <div class="footer-links">
            <div>
                <h4>About Us</h4>
                <ul>
                    <li><a href="#">Our Company</a></li>
                    <li><a href="#">Our Coffee</a></li>
                    <li><a href="#">Stories and News</a></li>
                    <li><a href="#">Investor Relations</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
            </div>
            <div>
                <h4>Order and Pick Up</h4>
                <ul>
                    <li><a href="#">Order on the App</a></li>
                    <li><a href="#">Order on the Web</a></li>
                    <li><a href="#">Delivery</a></li>
                </ul>
            </div>
            <div>
                <h4>Customer Service</h4>
                <ul>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
        </div>
        <div class="social-media">
            <a href="#" aria-label="Facebook">FB</a>
            <a href="#" aria-label="Twitter">TW</a>
            <a href="#" aria-label="Instagram">IG</a>
        </div>
        <div class="copyright">
            <p>© 2024 Starbucks Coffee Company. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>

Modelo de site HTML da Starbucks

Recomendado

Um Código de Metehan

mudança de luz

PÁGINA INICIAL DO SITE DO BANCO

HTML

CSS

JS

Recomendado

Um Código de Metehan

mudança de luz

PÁGINA INICIAL DO SITE DO BANCO

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS