Day 10: Starbucks Landing Page Clone using HTML & CSS

#webdev #css #html #coding

Hi Coders!!

On Day 10 of my frontend journey, I designed a Starbucks landing page clone using pure HTML and CSS.

This project gave me great hands-on practice with CSS positioning, layout structure, and visual design techniques like Flexbox and absolute positioning.

Core Concepts :

1.Navigation Bar (Sticky and Responsive Idea):

Built a top navigation bar with logo, links, search box, and profile icon.
Applied Flexbox (display: flex) for horizontal alignment.
Used position: sticky to make the navbar stick at the top when scrolling.
Added smooth hover effects on links for better user interaction.

2.Positioning Mastery (Absolute & Relative):

The subscription section was challenging:
- Background and foreground images (coffee cup) were layered using position: absolute/relative and z-index.
- Text content and buttons were positioned precisely on top of the image.
Learned to handle overlapping elements and space them without breaking the layout.

3.Flexbox & Spacing:

Used Flexbox in .co-image section to lay out 6 handcrafted curation items (Bestseller, Drinks, Food, etc.).
Practiced justify-content: space-evenly to spread these items evenly across the page.
Added hover scaling effects on these images using CSS transitions-simple but visually attractive.

4.Card Design (Barista Recommends Section):

Designed a recommendation card containing:
- Product image, name, quantity details, price, and an “Add Item” button.
Used nested Flexbox for aligning image and text inside the card.
Styled the “Add Item” button with rounded corners, shadow, and background color matching Starbucks branding.

Focused On:

1.CSS Positioning (Relative & Absolute) - to layer and align elements (coffee image, background, text).
2.Flexbox - for horizontal alignment of navbar and variety sections.
3.Hover effects - minor interaction added to category images.
4.Button & Card UI Design - custom buttons and neatly spaced product cards.
5.Used CSS Box Shadows, Border Radius, and Transitions for modern UI looks.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Starbucks Clone</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="./starbucks.css">
</head>

<body>
    <div class="nav">
        <div class="logo">
            <img src="./Assets/logo.png" alt="">
        </div>
        <div class="links">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Gift</a></li>
                <li><a href="">Order</a></li>
                <li><a href="">Pay</a></li>
                <li><a href="">Store</a></li>
            </ul>
        </div>
        <div class="search">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" placeholder="Looking for something specific?">
        </div>
        <div class="profile">
            <img src="./Assets/account_thin.svg" alt="">
        </div>
    </div>

    <header>
        <div class="header-section">
            <div class="head">
                <p>Starbucks</p>
            </div>
            <div class="right-head">
                <button>Know more</button>
            </div>
        </div>
    </header>

    <div class="subcription">
        <div class="image">
            <img class="bg" src="./Assets/BG_WEB_08b7ce409f.png" alt="">
            <img src="./Assets/Coffee cup.png" alt="" class="coffee">
        </div>
    </div>
    <div class="content">
        <h5>Starbucks</h5>
        <h4>Beverage Subscription</h4>
        <p> Starbucks Subscription is Back! Sip Your Favourites for Less. Tap for Details. T&C Apply.</p>
    </div>
    <div class="term">
        <p>*T&C Apply</p>
    </div>
    <div class="know">
        <button>Know more</button>
    </div>
    <div class="line">
        <hr>
    </div>

    <div class="veriety">
        <h2> Handcrafted Curations </h2>
    </div>
    <div class="co-image">
        <div class="one">
            <img src="./Assets/Bestseller.jpg" alt="">
            <p>Bestseller</p>
        </div>
        <div class="two">
            <img src="./Assets/Drinks.jpg" alt="">
            <p>Drinks</p>
        </div>
        <div class="three">
            <img src="./Assets/Food.jpg" alt="">
            <p>Food</p>
        </div>
        <div class="four">
            <img src="./Assets/Merchandise.jpg" alt="">
            <p>Merchandise</p>
        </div>
        <div class="five">
            <img src="./Assets/CoffeeAtHome.jpg" alt="">
            <p>Coffee At Home</p>
        </div>
        <div class="six">
            <img src="./Assets/ReadyToEat.jpg" alt="">
            <p>Ready To Eat</p>
        </div>
    </div>

    <div class="recommand">
        <h2>Barista Recommends</h2>
        <div class="card">
            <div class="img-veg">
                <div class="java-chip">
                    <img src="./Assets/java chip.webp" alt="">
                </div>
                <div class="veg">
                    <img src="./Assets/veg.svg" alt="">
                    <h5>Java Chip Frappuccino</h5>
                    <p class="quantity">Tall (345ml) 392kcal</p>
                </div>
            </div>
            <div class="rate">
                <p><i class="fa-regular fa-indian-rupee-sign"></i>420.00</p>
                <button>Add Item</button>
            </div>
        </div>
    </div>
</body>

</html>

"The full CSS code is not mentioned here. I don’t know how to add the file link on GitLab yet, but next time I will link the file so you can see the complete project on GitLab."

Challenges:

How to layer multiple images properly without overlapping text wrongly.
Managing navbar spacing and alignment across different screen sizes.
Keeping the recommendation card layout clean and readable.

Key Learnings Today:

1.The difference and practical use of absolute vs relative positioning.
2.The power of Flexbox for both horizontal and vertical alignment.
3.Importance of hover interactions and transitions for better UX.
4.How small details (shadows, padding, rounded corners) greatly improve UI appearance.