Skip to content

Commit d41afb5

Browse files
author
Kaio Luiz Marques
committed
Omnifood project
1 parent 7d6d966 commit d41afb5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+3291
-354
lines changed

‎starter/04-CSS-Layouts/challenge3/challenge3.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 everyday
28+
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>

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

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

0 commit comments

Comments
 (0)