Skip to content

Commit 7d6d966

Browse files
author
Kaio Luiz Marques
committed
Atualizando
1 parent e7947fc commit 7d6d966

File tree

8 files changed

+629
-37
lines changed

8 files changed

+629
-37
lines changed

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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+
<title>Document</title>
7+
</head>
8+
<body>
9+
<link href="style-challenge.css" rel="stylesheet" />
10+
<article class="product">
11+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
12+
<img
13+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
14+
alt="Foto do All Star"
15+
height="250"
16+
widht="250"
17+
class="product-img"
18+
/>
19+
<div class="info-left">
20+
<p class="price">$65.00</p>
21+
<p class="shipping">Free Shipping</p>
22+
<p>
23+
Ready do dress up or down, these classic canvas Chucks are an everyday
24+
wardrobe staple.
25+
</p>
26+
<a href="#" class="more-info">More information &rarr;</a>
27+
28+
<ul class="colors-list">
29+
<li class="black"></li>
30+
<li class="blue"></li>
31+
<li class="red"></li>
32+
<li class="orange"></li>
33+
<li class="green"></li>
34+
<li class="brown"></li>
35+
</ul>
36+
</div>
37+
<div class="info-right">
38+
<h3 class="details-title">Product Details</h3>
39+
<ul class="details-list">
40+
<li>Lightweight, durable canvas sneaker</li>
41+
<li>Lightly paddled foothed for added comfort</li>
42+
<li>Iconic Chuck Taylor ankle patch</li>
43+
</ul>
44+
</div>
45+
<button class="add-cart">Add to Cart</button>
46+
</article>
47+
</body>
48+
</html>

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

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

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
<title>Document</title>
7+
</head>
8+
<body>
9+
<link href="style-challenge.css" rel="stylesheet" />
10+
<article class="product">
11+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
12+
13+
<div class="info-row">
14+
<img
15+
src="https://i.ibb.co/Jr7Wh1d/challenges.jpg"
16+
alt="Foto do All Star"
17+
height="250"
18+
widht="250"
19+
class="product-img"
20+
/>
21+
<div class="info-left">
22+
<div class="price-row">
23+
<p class="price">$65.00</p>
24+
<p class="shipping">Free Shipping</p>
25+
</div>
26+
<p>
27+
Ready do dress up or down, these classic canvas Chucks are an
28+
everyday wardrobe staple.
29+
</p>
30+
<a href="#" class="more-info">More information &rarr;</a>
31+
32+
<div class="colors-row">
33+
<div class="colors color-black"></div>
34+
<div class="colors color-blue"></div>
35+
<div class="colors color-red"></div>
36+
<div class="colors color-orange"></div>
37+
<div class="colors color-green"></div>
38+
<div class="colors color-brown"></div>
39+
</div>
40+
</div>
41+
<div class="info-right">
42+
<h3 class="details-title">Product Details</h3>
43+
<ul class="details-list">
44+
<li>Lightweight, durable canvas sneaker</li>
45+
<li>Lightly paddled foothed for added comfort</li>
46+
<li>Iconic Chuck Taylor ankle patch</li>
47+
</ul>
48+
</div>
49+
</div>
50+
<button class="add-cart">Add to Cart</button>
51+
</article>
52+
</body>
53+
</html>

0 commit comments

Comments
 (0)