Skip to content

Commit 2c84f6a

Browse files
author
Web Dev Simplified
committed
Finish Lesson 3
1 parent b393695 commit 2c84f6a

File tree

2 files changed

+98
-40
lines changed

2 files changed

+98
-40
lines changed

‎Introduction to CSS/Lesson 3/store.html‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,31 @@ <h2 class="section-header">MUSIC</h2>
2121
<div class="shop-items">
2222
<div class="shop-item">
2323
<span class="shop-item-title">Album 1</span>
24-
<img src="Images/Album 1.png">
24+
<img class="shop-item-image" src="Images/Album 1.png">
2525
<div class="shop-item-details">
2626
<span class="shop-item-price">$12.99</span>
2727
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
2828
</div>
2929
</div>
3030
<div class="shop-item">
3131
<span class="shop-item-title">Album 2</span>
32-
<img src="Images/Album 2.png">
32+
<img class="shop-item-image"class="shop-item-image" src="Images/Album 2.png">
3333
<div class="shop-item-details">
3434
<span class="shop-item-price">$14.99</span>
3535
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
3636
</div>
3737
</div>
3838
<div class="shop-item">
3939
<span class="shop-item-title">Album 3</span>
40-
<img src="Images/Album 3.png">
40+
<img class="shop-item-image"src="Images/Album 3.png">
4141
<div class="shop-item-details">
4242
<span class="shop-item-price">$9.99</span>
4343
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
4444
</div>
4545
</div>
4646
<div class="shop-item">
4747
<span class="shop-item-title">Album 4</span>
48-
<img src="Images/Album 4.png">
48+
<img class="shop-item-image"src="Images/Album 4.png">
4949
<div class="shop-item-details">
5050
<span class="shop-item-price">$19.99</span>
5151
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
@@ -58,15 +58,15 @@ <h2 class="section-header">MERCH</h2>
5858
<div class="shop-items">
5959
<div class="shop-item">
6060
<span class="shop-item-title">T-Shirt</span>
61-
<img src="Images/Shirt.png">
61+
<img class="shop-item-image"src="Images/Shirt.png">
6262
<div class="shop-item-details">
6363
<span class="shop-item-price">$19.99</span>
6464
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
6565
</div>
6666
</div>
6767
<div class="shop-item">
6868
<span class="shop-item-title">Coffee Cup</span>
69-
<img src="Images/Cofee.png">
69+
<img class="shop-item-image"src="Images/Cofee.png">
7070
<div class="shop-item-details">
7171
<span class="shop-item-price">$6.99</span>
7272
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
@@ -81,33 +81,35 @@ <h2 class="section-header">CART</h2>
8181
<span class="cart-price cart-header cart-column">PRICE</span>
8282
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
8383
</div>
84-
<div class="cart-row">
85-
<div class="cart-item cart-column">
86-
<img src="Images/Shirt.png" width="100" height="100">
87-
<span class="cart-item-title">T-Shirt</span>
84+
<div class="cart-items">
85+
<div class="cart-row">
86+
<div class="cart-item cart-column">
87+
<img class="cart-item-image" src="Images/Shirt.png" width="100" height="100">
88+
<span class="cart-item-title">T-Shirt</span>
89+
</div>
90+
<span class="cart-price cart-column">$19.99</span>
91+
<div class="cart-quantity cart-column">
92+
<input class="cart-quantity-input" type="number" value="1">
93+
<button class="btn btn-danger" type="button">REMOVE</button>
94+
</div>
8895
</div>
89-
<span class="cart-price cart-column">$19.99</span>
90-
<div class="cart-quantity cart-column">
91-
<input type="number" value="1">
92-
<button type="button">REMOVE</button>
96+
<div class="cart-row">
97+
<div class="cart-item cart-column">
98+
<img class="cart-item-image" src="Images/Album 3.png" width="100" height="100">
99+
<span class="cart-item-title">Album 3</span>
100+
</div>
101+
<span class="cart-price cart-column">$9.99</span>
102+
<div class="cart-quantity cart-column">
103+
<input class="cart-quantity-input" type="number" value="2">
104+
<button class="btn btn-danger" type="button">REMOVE</button>
105+
</div>
93106
</div>
94107
</div>
95-
<div class="cart-row">
96-
<img src="Images/Album 3.png" width="100" height="100">
97-
<span>Album 3</span>
98-
&lt;&gt;
99-
<span>$9.99</span>
100-
&lt;&gt;
101-
<input type="number" value="2">
102-
<button type="button">REMOVE</button>
103-
</div>
104-
<div>
105-
<strong>Total</strong>
106-
<span>$39.97</span>
107-
</div>
108-
<div>
109-
<button type="button">PURCHASE</button>
108+
<div class="cart-total">
109+
<strong class="cart-total-text">Total</strong>
110+
<span class="cart-total-price">$39.97</span>
110111
</div>
112+
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
111113
</section>
112114
<footer class="main-footer">
113115
<div class="container main-footer-container">

‎Introduction to CSS/Lesson 3/styles.css‎

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,18 @@ html, body {
170170
background-color: #2D9CDB;
171171
}
172172

173+
.btn-danger {
174+
color: white;
175+
background-color: #EB5757;
176+
border: none;
177+
border-radius: .3em;
178+
font-weight: bold;
179+
}
180+
181+
.btn-danger:hover {
182+
background-color: #CC4C4C;
183+
}
184+
173185
.tour-row {
174186
border-bottom: 1px solid black;
175187
padding-bottom: 1em;
@@ -210,20 +222,23 @@ html, body {
210222
}
211223

212224
.shop-item {
213-
margin: 10px;
214-
margin-bottom: 50px;
225+
margin: 30px;
215226
}
216227

217228
.shop-item-title {
218229
display: block;
219230
width: 100%;
220231
font-weight: bold;
221-
font-size: 2em;
232+
font-size: 1.5em;
222233
color: #333;
223234
text-align: center;
224235
margin-bottom: 15px;
225236
}
226237

238+
.shop-item-image {
239+
height: 250px;
240+
}
241+
227242
.shop-item-details {
228243
display: flex;
229244
padding: 5px;
@@ -233,11 +248,7 @@ html, body {
233248
.shop-item-price {
234249
flex-grow: 1;
235250
color: #333;
236-
font-size: 1.5em;
237-
}
238-
239-
.shop-item-button {
240-
font-size: 1.25em;
251+
font-size: 1em;
241252
}
242253

243254
.cart-header {
@@ -263,24 +274,69 @@ html, body {
263274
align-items: center;
264275
margin-right: 1.5em;
265276
padding-bottom: 10px;
266-
margin-bottom: 10px;
277+
margin-top: 10px;
267278
border-bottom: 1px solid black;
268279
}
269280

270281
.cart-item {
271-
width: 40%;
282+
width: 45%;
272283
}
273284

274285
.cart-price {
275286
width: 20%;
287+
font-size: 1.2em;
288+
color: #333;
276289
}
277290

278291
.cart-quantity {
279-
width: 40%;
292+
width: 35%;
280293
}
281294

282295
.cart-item-title {
283296
color: #333;
284297
margin-left: .5em;
285298
font-size: 1.2em;
299+
}
300+
301+
.cart-item-image {
302+
border-radius: 10px;
303+
width: 75px;
304+
height: auto;
305+
}
306+
307+
.cart-quantity-input {
308+
height: 34px;
309+
border-radius: 5px;
310+
border: 1px solid #56CCF2;
311+
background-color: #eee;
312+
color: #333;
313+
width: 50px;
314+
padding: 0;
315+
text-align: center;
316+
font-size: 1.2em;
317+
margin-right: 25px;
318+
}
319+
320+
.cart-total {
321+
text-align: end;
322+
margin-right: 10px;
323+
margin-top: 10px;
324+
}
325+
326+
.cart-total-text {
327+
font-weight: bold;
328+
font-size: 1.5em;
329+
color: black;
330+
margin-right: 20px;
331+
}
332+
333+
.cart-total-price {
334+
color: #333;
335+
font-size: 1.1em;
336+
}
337+
338+
.btn-purchase {
339+
display: block;
340+
margin: 40px auto 80px auto;
341+
font-size: 1.75em;
286342
}

0 commit comments

Comments
 (0)