Skip to content

Commit 7aeb33a

Browse files
jamesacox53jamesacox53
committed
Completed CHALLENGE jonasschmedtmann#2 
1 parent bc76943 commit 7aeb33a

File tree

9 files changed

+236
-1
lines changed

9 files changed

+236
-1
lines changed

‎myWork/04-CSS-Layouts/challenges/Challenge1/challenge1html.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h2 class="product-name">Converse Chuck Taylor All Star Low Top</h2>
1515

1616
<div class="box-1">
1717
<img
18-
src="../../images/challenges.jpg"
18+
src="../images/challenges.jpg"
1919
alt="Converse Chuck Taylor All Star Low Top"
2020
height="250px"
2121
width="250px"

‎myWork/04-CSS-Layouts/challenges/Challenge2/challenge2css.css

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

‎myWork/04-CSS-Layouts/challenges/Challenge2/challenge2html.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Section 4 - Challenge #2</title>
6+
<link href="challenge2css.css" rel="stylesheet" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<p class="sale-banner">SALE</p>
11+
<article class="product">
12+
<header>
13+
<h2 class="product-name">Converse Chuck Taylor All Star Low Top</h2>
14+
</header>
15+
16+
<div class="boxes">
17+
<img
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+
</div>
60+
61+
<button class="add-to-cart-button">Add to cart</button>
62+
</article>
63+
</div>
64+
</body>
65+
</html>

‎myWork/04-CSS-Layouts/challenges/images/challenges.jpg

120 KB
Loading

‎myWork/04-CSS-Layouts/challenges/images/laura-jones.jpg

6.64 KB
Loading

‎myWork/04-CSS-Layouts/challenges/images/post-img.jpg

53.4 KB
Loading

‎myWork/04-CSS-Layouts/challenges/images/related-1.jpg

50.2 KB
Loading

‎myWork/04-CSS-Layouts/challenges/images/related-2.jpg

33 KB
Loading

‎myWork/04-CSS-Layouts/challenges/images/related-3.jpg

43.5 KB
Loading

0 commit comments

Comments
 (0)