Css_1.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee Masters</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" />
</head>

<body>
    <nav class="main-nav">
        <h1 class="brand">
            <img src="https://btholt.github.io/complete-intro-to-web-dev-v3/images/coffee_masters_logo.png"
                alt="coffee_masters_logo" class="logo" />
            Coffee Masters
        </h1>
    </nav>
    <div class="page">
        <section class="order-box">
            <h2 class="box-title">ITEMS</h2>
            <ul class="items">
                <li class="item">
                    <div class="item-quantity">1x</div>
                    <div class="item-title">Cappucino</div>
                    <div class="item-price">$6.00</div>
                    <ul class="item-options-list">
                        <li class="item-option">Light Foam</li>
                    </ul>
                </li>
                <li class="item">
                    <div class="item-quantity">1x</div>
                    <div class="item-title">Cappucino</div>
                    <div class="item-price">$7.90</div>
                    <ul class="item-options-list">
                        <li class="item-option">Almond Milk</li>
                        <li class="item-option">Double Espresso Shot</li>
                    </ul>
                </li>
                <li class="item">
                    <div class="item-quantity">1x</div>
                    <div class="item-title">Croissant</div>
                    <div class="item-price">$5.37</div>
                    <ul class="item-options-list">
                        <li class="item-option">Butter</li>
                    </ul>
                </li>
            </ul>
        </section>
        <section class="payment">
            <div class="name-box box">
                <h2 class="box-title">NAME</h2>
                <div class="input-group">
                    <label class="user-input-label" for="name">Name for order</label>
                    <input type="text" class="user-input" id="name" />
                </div>
            </div>
            <div class="cc-box box">
                <h2 class="box-title">PAYMENT</h2>
                <div class="input-group">
                    <label class="user-input-label" for="cc">Card Number</label>
                    <input type="number" class="user-input" id="CC" />
                </div>
                <div class="input-group">
                    <label class="user-input-label" for="ccv"> CCV number</label>
                    <input type="text" class="user-input short-input" id="ccv" />
                </div>
            </div>
        </section>
        <section class="total">
            <table class="totals-table">
                <tbody>
                    <tr>
                        <th>Subtotal</th>
                        <th>$19.27</th>
                    </tr>
                    <tr>
                        <th>Tax</th>
                        <th>$0.96</th>
                    </tr>
                    <tr class="final-totals">
                        <th>Total</th>
                        <th>$20.23</th>
                    </tr>
                </tbody>
            </table>
            <button class="checkout" type="button">Place Order</button>
        </section>
    </div>

</body>

</html>