Skip to content

Commit 776b5db

Browse files
lnnchaulnnchau
committed
complete challenge jonasschmedtmann#2 - flexbox
1 parent a17a206 commit 776b5db

File tree

2 files changed

+219
-0
lines changed

2 files changed

+219
-0
lines changed

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link href="./challenge.style.css" rel="stylesheet" />
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<article class="product-box">
12+
<p class="sale">Sale</p>
13+
<h3 class="product-name">Converse Chuck Taylor All Star Low Top</h3>
14+
15+
<div class="product-info-content">
16+
<img src="img/challenges.jpg" alt="Converse" width="250" height="250" />
17+
18+
<div class="product-info">
19+
<div class="price-shipping">
20+
<p class="product-price">$65</p>
21+
22+
<p class="shipping">Free shipping</p>
23+
</div>
24+
25+
<p class="product-description">
26+
Ready to dress up or down, these classic canvas Chucks are an
27+
everyday wardrobe staple.
28+
</p>
29+
30+
<a class="more-info" href="#"> More information &RightArrow;</a>
31+
32+
<div class="color-board">
33+
<div class="color-board-item color-black"></div>
34+
<div class="color-board-item color-blue"></div>
35+
<div class="color-board-item color-red"></div>
36+
<div class="color-board-item color-yellow"></div>
37+
<div class="color-board-item color-green"></div>
38+
<div class="color-board-item color-brown"></div>
39+
</div>
40+
</div>
41+
42+
<div class="product-details">
43+
<h4 class="product-details-title">Product details</h4>
44+
<ul class="product-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>
50+
</div>
51+
<button class="add-to-card-btn">Add to cart</button>
52+
</article>
53+
</body>
54+
</html>

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

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

0 commit comments

Comments
 (0)