Skip to content

Commit 04616e5

Browse files
rameskumrameskum
committed
challenge - css grid
1 parent 01e82e2 commit 04616e5

File tree

2 files changed

+60
-40
lines changed

2 files changed

+60
-40
lines changed

‎practice/04 - CSS Layouts/challenge.css

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,19 @@ body {
7878
.color-blue {
7979
background-color: #2f6ee2;
8080
}
81+
8182
.color-red {
8283
background-color: #ec2f2f;
8384
}
85+
8486
.color-yellow {
8587
background-color: #f0bf1e;
8688
}
89+
8790
.color-green {
8891
background-color: #90cc20;
8992
}
93+
9094
.color-brown {
9195
background-color: #885214;
9296
}
@@ -125,17 +129,17 @@ body {
125129
background-color: #fff;
126130
}
127131

128-
.product-description{
132+
.product-description {
129133
margin-bottom: 10px;
130134
}
131135

132-
.product-img{
136+
.product-img {
133137
width: 250px;
134138
}
135139

136140
.product-info {
137-
/* (825 - 8 - 250 - 2 * 40) / 2 */
138-
/* width: 243px;*/
141+
/* (825 - 8 - 250 - 2 * 40) / 2 */
142+
/* width: 243px;*/
139143
margin-top: 20px;
140144
flex: 1;
141145
}
@@ -146,11 +150,11 @@ body {
146150
flex: 1;
147151
}
148152

149-
.clearfix::after {
153+
/*.clearfix::after {
150154
content: '';
151155
display: block;
152156
clear: both;
153-
}
157+
}*/
154158

155159
.container {
156160
/*background-color: #94d82d;*/
@@ -163,4 +167,19 @@ body {
163167
align-items: center;
164168
justify-content: space-between;
165169
margin-bottom: 20px;
170+
}
171+
172+
/* GRID Layout */
173+
.product {
174+
display: grid;
175+
grid-template-columns: 250px 1fr 1fr;
176+
column-gap: 40px;
177+
}
178+
179+
.product-title {
180+
grid-column: 1/-1;
181+
}
182+
183+
.add-cart {
184+
grid-column: 1/-1;
166185
}

‎practice/04 - CSS Layouts/challenge.html

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,46 +11,47 @@
1111
<body>
1212
<article class="product">
1313
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
14-
<div class="container">
15-
<img
16-
alt="Chuck Taylor All Star Shoe"
17-
class="product-img"
18-
height="250"
19-
src="https://i.imgur.com/ZrTU3VK.jpeg"
20-
/>
14+
<!-- Required for felx -->
15+
<!-- <div class="container">-->
16+
<img
17+
alt="Chuck Taylor All Star Shoe"
18+
class="product-img"
19+
height="250"
20+
src="https://i.imgur.com/ZrTU3VK.jpeg"
21+
/>
2122

22-
<div class="product-info">
23-
<div class="product-price">
24-
<p class="price"><strong>$65.00</strong></p>
25-
<p class="shipping">Free shipping</p>
26-
</div>
27-
<p class="sale">Sale</p>
23+
<div class="product-info">
24+
<div class="product-price">
25+
<p class="price"><strong>$65.00</strong></p>
26+
<p class="shipping">Free shipping</p>
27+
</div>
28+
<p class="sale">Sale</p>
2829

29-
<p class="product-description">
30-
Ready to dress up or down, these classic canvas Chucks are an everyday
31-
wardrobe staple.
32-
</p>
33-
<a class="more-info" href="https://converse.com" target="_blank">More information &rarr;</a>
30+
<p class="product-description">
31+
Ready to dress up or down, these classic canvas Chucks are an everyday
32+
wardrobe staple.
33+
</p>
34+
<a class="more-info" href="https://converse.com" target="_blank">More information &rarr;</a>
3435

35-
<div class="product-colors">
36-
<div class="color"></div>
37-
<div class="color color-blue"></div>
38-
<div class="color color-red"></div>
39-
<div class="color color-yellow"></div>
40-
<div class="color color-green"></div>
41-
<div class="color color-brown"></div>
42-
</div>
36+
<div class="product-colors">
37+
<div class="color"></div>
38+
<div class="color color-blue"></div>
39+
<div class="color color-red"></div>
40+
<div class="color color-yellow"></div>
41+
<div class="color color-green"></div>
42+
<div class="color color-brown"></div>
4343
</div>
44+
</div>
4445

45-
<div class="product-details">
46-
<h3 class="details-title">Product details</h3>
47-
<ul class="details-list">
48-
<li>Lightweight, durable canvas sneaker</li>
49-
<li>Lightly padded footbed for added comfort</li>
50-
<li>Iconic Chuck Taylor ankle patch.</li>
51-
</ul>
52-
</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>
5353
</div>
54+
<!-- </div>-->
5455
<button class="add-cart">Add to cart</button>
5556
</article>
5657
</body>

0 commit comments

Comments
 (0)