<!DOCTYPE html>
<html>
<head>
    <title>Coffee Shop Menu</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="header">
        <h1>Bean & Brew Cafe</h1>
        <p>Discover our selection of drinks and snacks.</p>
    </div>

    <div class="menu-container">
        <img class="coffee-image" src="https://mimo.app/i/gray-coffee-maker.png" alt="Gray Coffee Maker">
        
        <ul class="menu-list">
            <li class="menu-item">Espresso</li>
            <li class="menu-item">Cappuccino</li>
            <li class="menu-item">Latte</li>
            <li class="menu-item">Croissant</li>
            <li class="menu-item">Blueberry Muffin</li>
            <li class="menu-item">Matcha Cookie</li>
        </ul>
    </div>

</body>
</html>

index.html

/* Styling for the body */
body {
    font-family: "Helvetica", sans-serif;
}

.header {
    text-align: center;
    color: #5A2D0C;
    background-color: #FFEBCD;
    padding: 20px;
    font-weight: bold;
}

/* Styling for the menu list */
.menu-list {
    background-color: #E6E6FA; /* Pastel lavender background */
    padding: 20px; /* Adds space around the text */
}

/* Styling for menu items */
.menu-item {
    display: block; /* Removes bullets */
    font-size: 18px; /* Adjusts font size */
}

/* Styling for the coffee image */
.coffee-image {
    margin-right: 20px; /* Adds space on the right */
    margin-top: 15px; /* Adds space on top */
    width: 100px; /* Sets a fixed width */
    position: relative; /* Enables z-index */
    z-index: 2; /* Ensures the image stays on top */
    float: right; /* Makes the image float to the right of the menu */
}