Skip to content

Commit 19d8c84

Browse files
owen-webbowen-webb
committed
section-4: CSS grid challenge.
1 parent 5778a5c commit 19d8c84

File tree

2 files changed

+52
-39
lines changed

2 files changed

+52
-39
lines changed

‎starter/04-CSS-Layouts/challenge/index.html

Lines changed: 35 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,46 +9,44 @@
99
<body>
1010
<article class="product">
1111
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
12-
<div class="container">
13-
<img
14-
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
15-
alt="Chuck Taylor All Star Shoe"
16-
height="250"
17-
width="250"
18-
class="product-img"
19-
/>
20-
<div class="product-info">
21-
<div class="product-info-header">
22-
<p class="price"><strong>$65.00</strong></p>
23-
<p class="shipping">Free shipping</p>
24-
</div>
25-
<p class="sale">Sale</p>
26-
27-
<p class="product-description">
28-
Ready to dress up or down, these classic canvas Chucks are an everyday
29-
wardrobe staple.
30-
</p>
31-
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>
32-
33-
<div class="colors">
34-
<div class="color"></div>
35-
<div class="color color-blue"></div>
36-
<div class="color color-red"></div>
37-
<div class="color color-yellow"></div>
38-
<div class="color color-green"></div>
39-
<div class="color color-brown"></div>
40-
</div>
12+
<img
13+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
14+
alt="Chuck Taylor All Star Shoe"
15+
height="250"
16+
width="250"
17+
class="product-img"
18+
/>
19+
<div class="product-info">
20+
<div class="product-info-header">
21+
<p class="price"><strong>$65.00</strong></p>
22+
<p class="shipping">Free shipping</p>
4123
</div>
42-
43-
<div class="product-details">
44-
<h3 class="details-title">Product details</h3>
45-
<ul class="details-list">
46-
<li>Lightweight, durable canvas sneaker</li>
47-
<li>Lightly padded footbed for added comfort</li>
48-
<li>Iconic Chuck Taylor ankle patch.</li>
49-
</ul>
24+
<p class="sale">Sale</p>
25+
26+
<p class="product-description">
27+
Ready to dress up or down, these classic canvas Chucks are an everyday
28+
wardrobe staple.
29+
</p>
30+
<a href="https://converse.com" target="_blank" class="more-info">More information &rarr;</a>
31+
32+
<div class="colors">
33+
<div class="color"></div>
34+
<div class="color color-blue"></div>
35+
<div class="color color-red"></div>
36+
<div class="color color-yellow"></div>
37+
<div class="color color-green"></div>
38+
<div class="color color-brown"></div>
5039
</div>
5140
</div>
41+
42+
<div class="product-details">
43+
<h3 class="details-title">Product details</h3>
44+
<ul class="details-list">
45+
<li>Lightweight, durable canvas sneaker</li>
46+
<li>Lightly padded footbed for added comfort</li>
47+
<li>Iconic Chuck Taylor ankle patch.</li>
48+
</ul>
49+
</div>
5250
<button class="add-cart">Add to cart</button>
5351
</article>
5452
</body>

‎starter/04-CSS-Layouts/challenge/style.css

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ body {
99
line-height: 1.4;
1010
}
1111

12-
.container {
12+
/* .container {
1313
align-items: center;
1414
display: flex;
1515
gap: 40px;
16-
}
16+
} */
1717

1818
.product-img { }
1919

@@ -153,3 +153,18 @@ body {
153153
color: #000;
154154
background-color: #fff;
155155
}
156+
157+
.product {
158+
display: grid;
159+
grid-template-columns: 250px 1fr 1fr;
160+
column-gap: 40px;
161+
align-items: center;
162+
}
163+
164+
.product-title {
165+
grid-column: 1 / -1;
166+
}
167+
168+
.add-cart {
169+
grid-column: 1 / -1;
170+
}

0 commit comments

Comments
 (0)