Skip to content

Commit b4d5c24

Browse files
author
Web Dev Simplified
committed
Make Lesson Files Exactly Like Video Files
1 parent 2c84f6a commit b4d5c24

File tree

2 files changed

+45
-47
lines changed

2 files changed

+45
-47
lines changed

‎Introduction to CSS/Lesson 3/store.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</head>
88
<body>
99
<header class="main-header">
10-
<nav class="nav main-nav">
10+
<nav class="main-nav nav">
1111
<ul>
1212
<li><a href="index.html">HOME</a></li>
1313
<li><a href="store.html">STORE</a></li>
@@ -29,23 +29,23 @@ <h2 class="section-header">MUSIC</h2>
2929
</div>
3030
<div class="shop-item">
3131
<span class="shop-item-title">Album 2</span>
32-
<img class="shop-item-image"class="shop-item-image" src="Images/Album 2.png">
32+
<img class="shop-item-image" src="Images/Album 2.png">
3333
<div class="shop-item-details">
3434
<span class="shop-item-price">$14.99</span>
35-
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
35+
<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 class="shop-item-image"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 class="shop-item-image"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 class="shop-item-image"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 class="shop-item-image"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>
@@ -106,7 +106,7 @@ <h2 class="section-header">CART</h2>
106106
</div>
107107
</div>
108108
<div class="cart-total">
109-
<strong class="cart-total-text">Total</strong>
109+
<strong class="cart-total-title">Total</strong>
110110
<span class="cart-total-price">$39.97</span>
111111
</div>
112112
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>

‎Introduction to CSS/Lesson 3/styles.css

+37-39
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ html, body {
8181
margin: 0 auto;
8282
padding: 0 1.5em;
8383
}
84-
8584
.section-header {
8685
font-family: "Metal Mania";
8786
font-weight: normal;
@@ -170,18 +169,6 @@ html, body {
170169
background-color: #2D9CDB;
171170
}
172171

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-
185172
.tour-row {
186173
border-bottom: 1px solid black;
187174
padding-bottom: 1em;
@@ -215,23 +202,17 @@ html, body {
215202
max-width: 19%;
216203
}
217204

218-
.shop-items {
219-
display: flex;
220-
flex-wrap: wrap;
221-
justify-content: space-around;
222-
}
223-
224205
.shop-item {
225206
margin: 30px;
226207
}
227208

228209
.shop-item-title {
229210
display: block;
230211
width: 100%;
212+
text-align: center;
231213
font-weight: bold;
232214
font-size: 1.5em;
233215
color: #333;
234-
text-align: center;
235216
margin-bottom: 15px;
236217
}
237218

@@ -241,14 +222,19 @@ html, body {
241222

242223
.shop-item-details {
243224
display: flex;
244-
padding: 5px;
245225
align-items: center;
226+
padding: 5px;
246227
}
247228

248229
.shop-item-price {
249230
flex-grow: 1;
250231
color: #333;
251-
font-size: 1em;
232+
}
233+
234+
.shop-items {
235+
display: flex;
236+
flex-wrap: wrap;
237+
justify-content: space-around;
252238
}
253239

254240
.cart-header {
@@ -257,25 +243,17 @@ html, body {
257243
color: #333;
258244
}
259245

260-
.cart-row {
261-
display: flex;
262-
}
263-
264-
.cart-row:last-child {
265-
border-bottom: 1px solid black;
266-
}
267-
268-
.cart-row:last-child .cart-column {
269-
border: none;
270-
}
271-
272246
.cart-column {
273247
display: flex;
274248
align-items: center;
249+
border-bottom: 1px solid black;
275250
margin-right: 1.5em;
276251
padding-bottom: 10px;
277252
margin-top: 10px;
278-
border-bottom: 1px solid black;
253+
}
254+
255+
.cart-row {
256+
display: flex;
279257
}
280258

281259
.cart-item {
@@ -299,31 +277,51 @@ html, body {
299277
}
300278

301279
.cart-item-image {
302-
border-radius: 10px;
303280
width: 75px;
304281
height: auto;
282+
border-radius: 10px;
283+
}
284+
285+
.btn-danger {
286+
color: white;
287+
background-color: #EB5757;
288+
border: none;
289+
border-radius: .3em;
290+
font-weight: bold;
291+
}
292+
293+
.btn-danger:hover {
294+
background-color: #CC4C4C;
305295
}
306296

307297
.cart-quantity-input {
308298
height: 34px;
299+
width: 50px;
309300
border-radius: 5px;
310301
border: 1px solid #56CCF2;
311302
background-color: #eee;
312303
color: #333;
313-
width: 50px;
314304
padding: 0;
315305
text-align: center;
316306
font-size: 1.2em;
317307
margin-right: 25px;
318308
}
319309

310+
.cart-row:last-child {
311+
border-bottom: 1px solid black;
312+
}
313+
314+
.cart-row:last-child .cart-column {
315+
border: none;
316+
}
317+
320318
.cart-total {
321319
text-align: end;
322-
margin-right: 10px;
323320
margin-top: 10px;
321+
margin-right: 10px;
324322
}
325323

326-
.cart-total-text {
324+
.cart-total-title {
327325
font-weight: bold;
328326
font-size: 1.5em;
329327
color: black;

0 commit comments

Comments
 (0)