Skip to content

Commit 04a0d43

Browse files
larry-xuelarry-xue
committed
css layouts end!
1 parent e9b0668 commit 04a0d43

File tree

2 files changed

+77
-43
lines changed

2 files changed

+77
-43
lines changed

‎code-challenge/04/index.html

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -10,52 +10,49 @@
1010
<body>
1111
<article class="product">
1212
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
13-
<div class="container">
14-
<div class="container-img">
15-
<img class="product-img" src="../../final/02-HTML-Fundamentals/img/challenges.jpg" alt="shoe" width="250" height="250">
16-
</div>
17-
18-
<div class="container-info">
19-
<div class="row">
20-
<p class="price">
21-
<strong>$65.00</strong>
22-
</p>
23-
<p class="shipping">
24-
Free shipping
25-
</p>
26-
</div>
27-
<p class="clear">
28-
Ready to dress up or down,these classic canvas Chucks are an everydat wardrobe staple.
13+
<div class="container-img">
14+
<img class="product-img" src="../../final/02-HTML-Fundamentals/img/challenges.jpg" alt="shoe" width="250" height="250">
15+
</div>
16+
17+
<div class="container-info">
18+
<div class="row">
19+
<p class="price">
20+
<strong>$65.00</strong>
21+
</p>
22+
<p class="shipping">
23+
Free shipping
2924
</p>
30-
31-
<a class="more-info" href="#">More Information &rarr;</a>
32-
33-
<div class="color-picker">
34-
<div></div>
35-
<div></div>
36-
<div></div>
37-
<div></div>
38-
<div></div>
39-
<div></div>
40-
</div>
4125
</div>
42-
43-
<div class="container-details">
44-
<h3 class="details-title">Product details</h3>
45-
46-
<ul class="details-list">
47-
<li>
48-
Lightweight,durable canvas sneaker
49-
</li>
50-
<li>
51-
Lightly padded footbed for added comfort
52-
</li>
53-
<li>
54-
Iconic Chuck Taylor ankle patch.
55-
</li>
56-
</ul>
26+
<p class="clear">
27+
Ready to dress up or down,these classic canvas Chucks are an everydat wardrobe staple.
28+
</p>
29+
30+
<a class="more-info" href="#">More Information &rarr;</a>
31+
32+
<div class="color-picker">
33+
<div></div>
34+
<div></div>
35+
<div></div>
36+
<div></div>
37+
<div></div>
38+
<div></div>
5739
</div>
40+
</div>
41+
42+
<div class="container-details">
43+
<h3 class="details-title">Product details</h3>
5844

45+
<ul class="details-list">
46+
<li>
47+
Lightweight,durable canvas sneaker
48+
</li>
49+
<li>
50+
Lightly padded footbed for added comfort
51+
</li>
52+
<li>
53+
Iconic Chuck Taylor ankle patch.
54+
</li>
55+
</ul>
5956
</div>
6057

6158
<button class="add-cart">Add to cart</button>

‎code-challenge/04/style.css

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,9 @@ body {
181181
width: 243px;
182182
} */
183183

184-
.container {
184+
/* FLEX */
185+
186+
/* .container {
185187
display: flex;
186188
justify-content: space-between;
187189
gap: 40px;
@@ -209,4 +211,39 @@ body {
209211
.color-picker {
210212
display: flex;
211213
gap: 10px;
214+
}
215+
*/
216+
217+
/* GRID */
218+
.product {
219+
display: grid;
220+
grid-template-columns: 250px 1fr 1fr;
221+
column-gap: 40px;
222+
}
223+
224+
.product-title {
225+
grid-column: 1 / -1;
226+
}
227+
228+
.add-cart {
229+
grid-column: 1 / -1;
230+
}
231+
232+
.container-info {
233+
margin-top: 15px;
234+
}
235+
236+
.color-picker {
237+
display: flex;
238+
gap: 10px;
239+
}
240+
241+
.row {
242+
display: flex;
243+
align-items: center;
244+
justify-content: space-between;
245+
}
246+
247+
.shipping {
248+
margin-bottom: 0;
212249
}

0 commit comments

Comments
 (0)