Skip to content

Commit 3849828

Browse files
dboyliaodboyliao
committed
vid 57 done
1 parent 8797c77 commit 3849828

File tree

3 files changed

+241
-0
lines changed

3 files changed

+241
-0
lines changed

‎flex-note.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# CSS Flex Property Guide
2+
3+
## Basic Properties
4+
5+
The `flex` property is a shorthand for:
6+
- `flex-grow`
7+
- `flex-shrink`
8+
- `flex-basis`
9+
10+
## Common Values
11+
12+
```css
13+
/* Most used flex values */
14+
flex: 0; /* flex: 0 1 auto */
15+
flex: 1; /* flex: 1 1 0% */
16+
flex: auto; /* flex: 1 1 auto */
17+
flex: none; /* flex: 0 0 auto */
18+
flex: initial; /* flex: 0 1 auto */
19+
```

‎starter/04-CSS-Layouts/challange-flex/index.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="./style.css" />
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<article class="product">
12+
<div class="product-title-container">
13+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
14+
</div>
15+
16+
<div class="product-info-box flex-box">
17+
<img
18+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
19+
alt="Chuck Taylor All Star Shoe"
20+
height="250"
21+
width="250"
22+
/>
23+
24+
<div>
25+
<div class="product-price-box flex-box">
26+
<p class="product-price"><strong>$65.00</strong></p>
27+
<p class="product-shipping">Free shipping</p>
28+
</div>
29+
<p style="width: 300px">
30+
Ready to dress up or down, these classic canvas Chucks are an
31+
everyday wardrobe staple.
32+
</p>
33+
<a class="more-info" href="https://www.converse.com"
34+
>More information &rarr;</a
35+
>
36+
<ol class="variant-list flex-box">
37+
<li></li>
38+
<li></li>
39+
<li></li>
40+
<li></li>
41+
<li></li>
42+
<li></li>
43+
</ol>
44+
</div>
45+
<div>
46+
<h3 class="product-details-header">Product details</h3>
47+
<ul class="product-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>
53+
</div>
54+
55+
<button class="add-cart">Add to cart</button>
56+
</article>
57+
</div>
58+
<a
59+
href="https://codepen.io/jonasschmedtmann/pen/MWJZZQL/c8e97f50f726b8e57ff58068647cde00"
60+
>Reference</a
61+
>
62+
</body>
63+
</html>

‎starter/04-CSS-Layouts/challange-flex/style.css

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

0 commit comments

Comments
 (0)