Starbucks HTML Website Template

2,011 DP

<!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

Starbucks HTML Website Template

Recommended