Skip to content

Commit 9448808

Browse files
quechauquechau
committed
add Challenge No.3 Section 4 Layouts.
1 parent 53b4f55 commit 9448808

File tree

2 files changed

+49
-44
lines changed

2 files changed

+49
-44
lines changed

‎starter/02-HTML-Fundamentals/challange_2.html

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,49 @@
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="img/challenges.jpg"
15-
all="Chuck Taylor All Star Low Top"
16-
height="250"
17-
width="250"
18-
class="product-img"
19-
/>
12+
<!-- <div class="container"> -->
13+
<img
14+
src="img/challenges.jpg"
15+
all="Chuck Taylor All Star Low Top"
16+
height="250"
17+
width="250"
18+
class="product-img"
19+
/>
2020

21-
<div class="product-info">
22-
<div class="product-price">
23-
<p class="price"><strong>$65.00</strong></p>
24-
<p class="shipping">Free shipping</p>
25-
</div>
26-
<p class="sale">Sale</p>
27-
<p class="product-description">
28-
Ready to dress up or down, these classic canvas Chucks are an
29-
everyday wardrobe staple.
30-
</p>
31-
<a
32-
class="more-info"
33-
href="https://www.converse.com/country-language-selector"
34-
>More information &rarr;</a
35-
>
36-
37-
<div class="product-colors">
38-
<div class="color"></div>
39-
<div class="color color-blue"></div>
40-
<div class="color color-red"></div>
41-
<div class="color color-yellow"></div>
42-
<div class="color color-green"></div>
43-
<div class="color color-brown"></div>
44-
</div>
21+
<div class="product-info">
22+
<div class="product-price">
23+
<p class="price"><strong>$65.00</strong></p>
24+
<p class="shipping">Free shipping</p>
4525
</div>
46-
<div class="product-details">
47-
<h3 class="details-title">Product details</h3>
48-
<ul class="details-list">
49-
<li>Lightweight, durable canvas sneaker</li>
50-
<li>Lightly padded footbed for added comfort</li>
51-
<li>Iconic Chuck Taylor ankle patch.</li>
52-
</ul>
26+
<p class="sale">Sale</p>
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
32+
class="more-info"
33+
href="https://www.converse.com/country-language-selector"
34+
>More information &rarr;</a
35+
>
36+
37+
<div class="product-colors">
38+
<div class="color"></div>
39+
<div class="color color-blue"></div>
40+
<div class="color color-red"></div>
41+
<div class="color color-yellow"></div>
42+
<div class="color color-green"></div>
43+
<div class="color color-brown"></div>
5344
</div>
5445
</div>
46+
<div class="product-details">
47+
<h3 class="details-title">Product details</h3>
48+
<ul class="details-list">
49+
<li>Lightweight, durable canvas sneaker</li>
50+
<li>Lightly padded footbed for added comfort</li>
51+
<li>Iconic Chuck Taylor ankle patch.</li>
52+
</ul>
53+
</div>
54+
<!-- </div> -->
5555
<button class="add-cart">Add to cart</button>
5656
</article>
5757
</body>

‎starter/02-HTML-Fundamentals/style-for-challange-2.css

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,15 @@ body {
99
line-height: 1.4;
1010
}
1111

12-
.clearfix::after {
12+
/* .clearfix::after {
1313
content: "";
1414
display: block;
1515
clear: both;
16-
}
17-
.container {
18-
/* background-color: red; */
16+
} */
17+
/* .container {
1918
display: flex;
2019
gap: 40px;
21-
}
20+
} */
2221

2322
.product-img {
2423
}
@@ -29,6 +28,10 @@ body {
2928
width: 825px;
3029
margin: 50px auto;
3130
position: relative;
31+
32+
display: grid;
33+
grid-template-columns: 250px 1fr 1fr;
34+
column-gap: 40px;
3235
}
3336

3437
.product-title {
@@ -37,6 +40,7 @@ body {
3740
text-transform: uppercase;
3841
background-color: #f7f7f7;
3942
padding: 15px;
43+
grid-column: 1 / -1;
4044
}
4145

4246
/* PRODUCT INFOMATION */
@@ -161,6 +165,7 @@ body {
161165
padding: 15px;
162166
width: 100%;
163167
border-top: 4px solid black;
168+
grid-column: 1 / -1;
164169
}
165170

166171
.add-cart:hover {

0 commit comments

Comments
 (0)