-
Notifications
You must be signed in to change notification settings - Fork 0
/
store.html
137 lines (126 loc) · 7.19 KB
/
store.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Online Garage Sale</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Javascript -->
<script src="store.js" async></script>
<!-- Icons -->
<script src="https://kit.fontawesome.com/8fc8fc7333.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Start nav -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#inventory">Inventory</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i class="fa-solid fa-cart-shopping"></i><span class="badge badge-warning cartCount">0</span></a>
</li>
</ul>
</div>
</nav>
<!-- End nav -->
<!-- Start cart -->
<section class="container content-section collapse" id="collapseExample">
<h2 class="section-header mt-5 text-center"></i></h2>
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<div class="cart-items">
<!-- Cart items added will show up here -->
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button onclick="checkoutClicked()" class="btn btn-primary btn-purchase" type="button">Check Out</button>
</section>
<!-- End cart -->
<!-- Start inventory -->
<section class="container content-section">
<h2 class="section-header text-center mt-5" id="inventory">INVENTORY</h2>
<div class="card-deck">
<div class="row mt-5 justify-content-center">
<div class="card card-custom mx-2 mb-3 col-xl-4 shop-item">
<img class="card-img-top shop-item-image" src="/img/dresser.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title shop-item-title">Antique Dresser</h5>
<p class="card-text">Solid wood dresser - gently used</p>
<span class="shop-item-price">$210.00</span>
<button class="btn btn-primary mt-auto shop-item-button" type="button">Add to Cart</button>
</div>
</div>
<div class="card card-custom mx-2 mb-3 col-xl-4 shop-item">
<img class="card-img-top shop-item-image" src="/img/bed.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title shop-item-title">Full Size Bed Set</h5>
<p class="card-text">Full size bedframe and mattress</p>
<span class="shop-item-price">$70.00</span>
<button class="btn btn-primary mt-auto shop-item-button" type="button">Add to Cart</button>
</div>
</div>
<div class="card card-custom mx-2 mb-3 col-xl-4 shop-item">
<img class="card-img-top shop-item-image" src="/img/lamps.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title shop-item-title">Pair of Lamps</h5>
<p class="card-text">Two lamps for the price of one!</p>
<span class="shop-item-price">$80.00</span>
<button class="btn btn-primary mt-auto shop-item-button" type="button">Add to Cart</button>
</div>
</div>
</div>
<div class="row mt-5 justify-content-center">
<div class="card card-custom mx-2 mb-3 col-xl-4 shop-item">
<img class="card-img-top shop-item-image" src="/img/mcm.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title shop-item-title">MCM Buffet w/ Side Tables</h5>
<p class="card-text">MCM buffet with matching side tables</p>
<span class="shop-item-price">$129.00</span>
<button class="btn btn-primary mt-auto shop-item-button" type="button">Add to Cart</button>
</div>
</div>
<div class="card card-custom mx-2 mb-3 col-xl-4 shop-item">
<img class="card-img-top shop-item-image" src="/img/coffee-table.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title shop-item-title">Coffee Table</h5>
<p class="card-text">Gently used coffee table</p>
<span class="shop-item-price">$79.99</span>
<button class="btn btn-primary mt-auto shop-item-button" type="button">Add to Cart</button>
</div>
</div>
<div class="card card-custom mx-2 mb-3 col-xl-4 shop-item">
<img class="card-img-top shop-item-image" src="/img/tv-stand.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title shop-item-title">TV Stand</h5>
<p class="card-text">Refinished MCM TV stand or console table</p>
<span class="shop-item-price">$89.99</span>
<button class="btn btn-primary mt-auto shop-item-button" type="button">Add to Cart</button>
</div>
</div>
</div>
</div>
</section>
<!-- End inventory -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>