Skip to content

Commit 044db0d

Browse files
JaviEstacioJaviEstacio
committed
Added: Up to 4.58 - Challenge jonasschmedtmann#2 
1 parent ee6901c commit 044db0d

File tree

8 files changed

+620
-131
lines changed

8 files changed

+620
-131
lines changed

‎final/04-Challenge_2/img/ZrTU3VK.jpg‎

163 KB
Loading

‎final/04-Challenge_2/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link href="style.css" rel="stylesheet" />
6+
7+
<title>Challenge 2</title>
8+
</head>
9+
10+
<body>
11+
<article class="product">
12+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
13+
<div class="container">
14+
<img
15+
src="/img/ZrTU3VK.jpg"
16+
alt="Chuck Taylor All Star Shoe"
17+
height="250"
18+
width="250"
19+
class="product-img"
20+
/>
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+
28+
<p class="product-description">
29+
Ready to dress up or down, these classic canvas Chucks are an
30+
everyday wardrobe staple.
31+
</p>
32+
<a href="https://converse.com" target="_blank" class="more-info"
33+
>More information &rarr;</a
34+
>
35+
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>
43+
</div>
44+
</div>
45+
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>
55+
<button class="add-cart">Add to cart</button>
56+
</article>
57+
</body>
58+
</html>

‎final/04-Challenge_2/style.css‎

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

0 commit comments

Comments
 (0)