Modello di sito Web HTML di Starbucks

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

23 July 2025

Codice sorgente del gioco HTML5 Eggy Car

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>

Modello di sito Web HTML di Starbucks

Consigliato

Pagina di accesso

Un codice di mcdonge13

Codice sorgente del gioco HTML5 Eggy Car

HTML

CSS

JS

Consigliato

Pagina di accesso

Un codice di mcdonge13

Codice sorgente del gioco HTML5 Eggy Car

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS