Plantilla de sitio web HTML de Starbucks

1,745 DP

Abrir en el editor Publica tu código

Plantilla de sitio web HTML de Starbucks

Recomendado

16 December 2024

Un código de meriem

16 February 2026

Juego de la serpiente en JavaScript con inicio y reinicio

16 January 2026

Reproductor de juegos Flash con emulador Ruffle

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>

CSS