Skip to content

Commit 2200735

Browse files
JaviEstacioJaviEstacio
committed
Added: up to 4.65 Challenge jonasschmedtmann#3 
1 parent f876fae commit 2200735

File tree

3 files changed

+237
-0
lines changed

3 files changed

+237
-0
lines changed

Diff for: ‎ongoing/04-Challenge_3/img/ZrTU3VK.jpg

163 KB
Loading

Diff for: ‎ongoing/04-Challenge_3/index.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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+
<img
14+
src="img/ZrTU3VK.jpg"
15+
alt="Chuck Taylor All Star Shoe"
16+
height="250"
17+
width="250"
18+
class="product-img"
19+
/>
20+
<div class="product-info">
21+
<div class="product-price">
22+
<p class="price"><strong>$65.00</strong></p>
23+
<p class="shipping">Free shipping</p>
24+
</div>
25+
<p class="sale">Sale</p>
26+
27+
<p class="product-description">
28+
Ready to dress up or down, these classic canvas Chucks are an everyday
29+
wardrobe staple.
30+
</p>
31+
<a href="https://converse.com" target="_blank" class="more-info"
32+
>More information &rarr;</a
33+
>
34+
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>
43+
</div>
44+
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>
53+
<button class="add-cart">Add to cart</button>
54+
</article>
55+
</body>
56+
</html>

Diff for: ‎ongoing/04-Challenge_3/style.css

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

0 commit comments

Comments
 (0)