Modèle de site Web HTML Starbucks

1,580 DP

Ouvrir dans l'éditeur Publiez votre code

Recommandé

26 March 2026

Comparaison de la mise en page HTML de Roblox et Fortnite

21 August 2024

Page de chargement animée

10 February 2026

Jeux débloqués : Jouez gratuitement à des jeux en ligne à l’école

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