Skip to content

Commit 25198d5

Browse files
jamesacox53jamesacox53
committed
Completed CHALLENGE jonasschmedtmann#3 
1 parent f907831 commit 25198d5

File tree

2 files changed

+248
-0
lines changed

2 files changed

+248
-0
lines changed

‎myWork/04-CSS-Layouts/challenges/Challenge3/challenge3css.css

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
margin: 5px;
9+
position: relative;
10+
}
11+
12+
body {
13+
font-family: sans-serif;
14+
line-height: 1.4;
15+
}
16+
17+
.product {
18+
border: 4px solid black;
19+
20+
display: grid;
21+
grid-template-columns: 250px 1fr 1fr;
22+
align-items: start;
23+
justify-items: center;
24+
}
25+
26+
.product-name {
27+
text-transform: uppercase;
28+
font-size: 22px;
29+
font-weight: bold;
30+
background-color: #f7f7f7;
31+
text-align: center;
32+
padding: 10px 0;
33+
}
34+
35+
.price {
36+
font-size: 18px;
37+
font-weight: bold;
38+
}
39+
40+
.shipping {
41+
text-transform: uppercase;
42+
font-size: 14px;
43+
font-weight: bold;
44+
color: #1098ad;
45+
margin-bottom: 10px;
46+
}
47+
48+
.more-info-link:link,
49+
.more-info-link:visited {
50+
color: black;
51+
}
52+
53+
.more-info-link:hover,
54+
.more-info-link:active {
55+
color: black;
56+
text-decoration: none;
57+
}
58+
59+
.product-details-heading {
60+
text-transform: uppercase;
61+
font-size: 18px;
62+
margin-bottom: 5px;
63+
}
64+
65+
.product-details-list {
66+
list-style-type: square;
67+
margin: 10px 20px;
68+
}
69+
70+
.product-details-list li {
71+
margin-bottom: 5px;
72+
}
73+
74+
.product-details-list li:last-child {
75+
margin-bottom: 0;
76+
}
77+
78+
.add-to-cart-button {
79+
grid-row: 3;
80+
grid-column: 1 / -1;
81+
width: 100%;
82+
text-transform: uppercase;
83+
background-color: black;
84+
color: white;
85+
border: none;
86+
border-top: 4px solid black;
87+
font-size: 16px;
88+
cursor: pointer;
89+
padding: 10px 0;
90+
}
91+
92+
.add-to-cart-button:hover {
93+
background-color: white;
94+
color: black;
95+
}
96+
97+
.short-description-text {
98+
margin-bottom: 5px;
99+
}
100+
101+
.sale-banner {
102+
background-color: red;
103+
color: white;
104+
padding: 3px 10px;
105+
font-weight: bold;
106+
letter-spacing: 2px;
107+
left: -15px;
108+
top: 15px;
109+
110+
display: inline-block;
111+
position: absolute;
112+
}
113+
114+
.colors-boxes {
115+
display: flex;
116+
gap: 15px;
117+
padding-top: 20px;
118+
}
119+
120+
.color-box {
121+
padding: 15px;
122+
}
123+
124+
.black-box {
125+
background-color: black;
126+
}
127+
128+
.blue-box {
129+
background-color: blue;
130+
}
131+
132+
.red-box {
133+
background-color: red;
134+
}
135+
136+
.yellow-box {
137+
background-color: yellow;
138+
}
139+
140+
.light-green-box {
141+
background-color: lightgreen;
142+
}
143+
144+
.dark-green-box {
145+
background-color: darkgreen;
146+
}
147+
148+
body {
149+
display: flex;
150+
justify-content: center;
151+
align-items: flex-start;
152+
}
153+
154+
.box-2 {
155+
grid-row: 2;
156+
grid-column: 2;
157+
margin: 15px 0;
158+
}
159+
160+
.box-3 {
161+
grid-row: 2;
162+
grid-column: 3;
163+
margin: 15px 0;
164+
}
165+
166+
.price-details {
167+
display: flex;
168+
justify-content: space-between;
169+
}
170+
171+
.short-description-text {
172+
width: 300px;
173+
}
174+
175+
.product-image {
176+
grid-row: 2;
177+
grid-column: 1;
178+
}
179+
180+
.product-header {
181+
grid-row: 1;
182+
grid-column: 1 / -1;
183+
justify-self: stretch;
184+
}

‎myWork/04-CSS-Layouts/challenges/Challenge3/challenge3html.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Section 4 - Challenge #3</title>
6+
<link href="challenge3css.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<p class="sale-banner">SALE</p>
11+
<article class="product">
12+
<header class="product-header">
13+
<h2 class="product-name">Converse Chuck Taylor All Star Low Top</h2>
14+
</header>
15+
16+
<img
17+
class="product-image boxes"
18+
src="../images/challenges.jpg"
19+
alt="Converse Chuck Taylor All Star Low Top"
20+
height="250px"
21+
width="250px"
22+
/>
23+
24+
<div class="box-2">
25+
<div class="price-details">
26+
<h4 class="price">$65.00</h4>
27+
28+
<p class="shipping">Free shipping</p>
29+
</div>
30+
31+
<p class="short-description-text">
32+
Ready to dress up or down, these classic canvas Chucks are an
33+
everyday wardrobe staple.
34+
</p>
35+
36+
<a href="#" target="_blank" class="more-info-link"
37+
>More information &rarr;</a
38+
>
39+
40+
<div class="colors-boxes">
41+
<div class="black-box color-box"></div>
42+
<div class="blue-box color-box"></div>
43+
<div class="red-box color-box"></div>
44+
<div class="yellow-box color-box"></div>
45+
<div class="light-green-box color-box"></div>
46+
<div class="dark-green-box color-box"></div>
47+
</div>
48+
</div>
49+
50+
<div class="box-3">
51+
<h3 class="product-details-heading">Product details</h3>
52+
53+
<ul class="product-details-list">
54+
<li>Lightweight, durable canvas sneaker</li>
55+
<li>Lightly padded footbed for added comfort</li>
56+
<li>Iconic Chuck Taylor ankle patch</li>
57+
</ul>
58+
</div>
59+
60+
<button class="add-to-cart-button">Add to cart</button>
61+
</article>
62+
</div>
63+
</body>
64+
</html>

0 commit comments

Comments
 (0)