99 lines
3.2 KiB
HTML
99 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="with=device-width, initia-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
|
|
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
</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 for="name" class="user-input-label">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 for="cc" class="user-input-label">Card number</label>
|
|
<input type="text" class="user-input" id="cc" />
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="ccv" class="user-input-label">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>
|
|
<td>Subtotal</td>
|
|
<td>$19.27</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tax</td>
|
|
<td>$0.96</td>
|
|
</tr>
|
|
<tr class="final-totals">
|
|
<td>Total</td>
|
|
<td>$20.23</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<button class="checkout" type="button">Place order</button>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|