cerchez07/complete-intro-to-web-dev-v3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update repo

Browse Source
This commit is contained in:
Marius Cerchez
2026-02-09 12:54:08 +00:00
committed by cerchez07
parent 2a4dcd923f
commit 0645c7f572
6 changed files with 409 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
checkout/index.html Normal file
View File

@@ -0,0 +1,98 @@
<!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>