Skip to content

Commit 8c22d4f

Browse files
kalpshah485kalpshah485
authored
Merge pull request #2 from kalpshah485/feat/layout-flexbox-grid
feat: completed section 4 of the udemy course.
2 parents 64dad00 + 0cc181d commit 8c22d4f

File tree

6 files changed

+531
-142
lines changed

6 files changed

+531
-142
lines changed

‎04-CSS-Layouts/blog.css

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: sans-serif;
9+
line-height: 1.4;
10+
}
11+
12+
/* .container {
13+
display: flex;
14+
gap: 40px;
15+
align-content: space-between;
16+
} */
17+
18+
/* PRODUCT */
19+
.product {
20+
border: 4px solid black;
21+
width: 825px;
22+
margin: 50px auto;
23+
position: relative;
24+
display: grid;
25+
grid-template-columns: 250px 1fr 1fr;
26+
column-gap: 40px;
27+
}
28+
29+
.product-title {
30+
text-align: center;
31+
font-size: 22px;
32+
text-transform: uppercase;
33+
background-color: #f7f7f7;
34+
padding: 15px;
35+
grid-column: 1/-1;
36+
}
37+
38+
/* PRODUCT INFORMATION */
39+
.product-info {
40+
margin-top: 20px;
41+
}
42+
43+
.price {
44+
font-size: 24px;
45+
}
46+
47+
.shipping {
48+
font-size: 12px;
49+
text-transform: uppercase;
50+
font-weight: bold;
51+
color: #777;
52+
}
53+
54+
.sale {
55+
background-color: #ec2f2f;
56+
color: #fff;
57+
font-size: 12px;
58+
text-transform: uppercase;
59+
font-weight: bold;
60+
letter-spacing: 2px;
61+
padding: 7px 15px;
62+
display: inline-block;
63+
position: absolute;
64+
top: -17px;
65+
left: -38px;
66+
}
67+
68+
.product-description {
69+
margin-bottom: 10px;
70+
}
71+
72+
.more-info:link,
73+
.more-info:visited {
74+
color: black;
75+
margin-bottom: 30px;
76+
display: inline-block;
77+
}
78+
79+
.more-info:hover,
80+
.more-info:active {
81+
text-decoration: none;
82+
}
83+
84+
.colors {
85+
display: flex;
86+
gap: 10px;
87+
}
88+
89+
.color {
90+
background-color: #000;
91+
height: 22px;
92+
width: 22px;
93+
}
94+
95+
.color-blue {
96+
background-color: #2f6ee2;
97+
}
98+
.color-red {
99+
background-color: #ec2f2f;
100+
}
101+
.color-yellow {
102+
background-color: #f0bf1e;
103+
}
104+
.color-green {
105+
background-color: #90cc20;
106+
}
107+
.color-brown {
108+
background-color: #885214;
109+
}
110+
111+
/* PRODUCT DETAILS */
112+
.product-details {
113+
margin-top: 20px;
114+
}
115+
116+
.details-title {
117+
text-transform: uppercase;
118+
font-size: 16px;
119+
margin-bottom: 15px;
120+
}
121+
122+
.details-list {
123+
list-style: square;
124+
margin-left: 20px;
125+
}
126+
127+
.details-list li {
128+
margin-bottom: 10px;
129+
}
130+
131+
.row {
132+
display: flex;
133+
justify-content: space-between;
134+
align-items: center;
135+
margin-bottom: 20px;
136+
}
137+
138+
/* BUTTON */
139+
.add-cart {
140+
background-color: #000;
141+
border: none;
142+
color: #fff;
143+
font-size: 20px;
144+
text-transform: uppercase;
145+
cursor: pointer;
146+
padding: 15px;
147+
width: 100%;
148+
border-top: 4px solid black;
149+
grid-column: 1 / -1;
150+
}
151+
152+
.add-cart:hover {
153+
color: #000;
154+
background-color: #fff;
155+
}

‎04-CSS-Layouts/blog.html

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,56 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title>BLOG</title>
4+
<meta charset="UTF-8" />
5+
<title>Blog Page</title>
6+
<link rel="stylesheet" href="blog.css" />
57
</head>
68
<body>
7-
<h2>BLOG</h2>
8-
<a href="index.html">Back to home</a>
9+
<article class="product">
10+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
11+
<!-- <div class="container"> -->
12+
<img
13+
src="img/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="row">
21+
<p class="price"><strong>$65.00</strong></p>
22+
<p class="shipping">Free shipping</p>
23+
</div>
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
28+
everyday wardrobe staple.
29+
</p>
30+
<a href="https://converse.com" target="_blank" class="more-info"
31+
>More information &rarr;</a
32+
>
33+
34+
<div class="colors">
35+
<div class="color"></div>
36+
<div class="color color-blue"></div>
37+
<div class="color color-red"></div>
38+
<div class="color color-yellow"></div>
39+
<div class="color color-green"></div>
40+
<div class="color color-brown"></div>
41+
</div>
42+
</div>
43+
44+
<div class="product-details">
45+
<h3 class="details-title">Product details</h3>
46+
<ul class="details-list">
47+
<li>Lightweight, durable canvas sneaker</li>
48+
<li>Lightly padded footbed for added comfort</li>
49+
<li>Iconic Chuck Taylor ankle patch.</li>
50+
</ul>
51+
</div>
52+
<!-- </div> -->
53+
<button class="add-cart">Add to cart</button>
54+
</article>
955
</body>
1056
</html>

‎04-CSS-Layouts/css-grid.html

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,35 @@
3636
/* STARTER */
3737
font-family: sans-serif;
3838
background-color: #ddd;
39-
font-size: 40px;
39+
font-size: 30px;
4040
margin: 40px;
4141

4242
/* CSS GRID */
43+
display: grid;
44+
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
45+
grid-template-columns: repeat(4, 1fr);
46+
grid-template-rows: 1fr 1fr;
47+
/* gap: 30px; */
48+
column-gap: 20px;
49+
row-gap: 40px;
50+
51+
display: none;
52+
}
53+
54+
.el--8 {
55+
grid-column: 2 / 3;
56+
grid-row: 1/2;
4357
}
4458

59+
.el--2 {
60+
grid-column: 1 / -1;
61+
grid-row: 2;
62+
}
63+
64+
/* .el--6 {
65+
grid-row: 3 / 6;
66+
} */
67+
4568
.container--2 {
4669
/* STARTER */
4770
font-family: sans-serif;
@@ -53,6 +76,17 @@
5376
height: 600px;
5477

5578
/* CSS GRID */
79+
display: grid;
80+
grid-template-columns: 125px 200px 125px;
81+
grid-template-rows: 250px 100px;
82+
gap: 50px;
83+
84+
/* aligning */
85+
86+
justify-content: center;
87+
align-content: center;
88+
align-items: center;
89+
justify-items: center;
5690
}
5791
</style>
5892
</head>

‎04-CSS-Layouts/flexbox.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,27 @@
3636
/* STARTER */
3737
font-family: sans-serif;
3838
background-color: #ddd;
39-
font-size: 40px;
39+
font-size: 34px;
4040
margin: 40px;
4141

4242
/* FLEXBOX */
43+
display: flex;
44+
align-items: center;
45+
justify-content: flex-start;
46+
gap: 30px;
47+
}
48+
49+
.el--1 {
50+
align-self: flex-start;
51+
}
52+
53+
.el--5 {
54+
align-self: stretch;
55+
order: 1;
56+
}
57+
58+
.el--6 {
59+
order: -1;
4360
}
4461
</style>
4562
</head>

0 commit comments

Comments
 (0)