Skip to content

Commit ba92bb0

Browse files
author
Andy Chau
committed
Session 3 challenges
1 parent 10103d1 commit ba92bb0

File tree

5 files changed

+336
-0
lines changed

5 files changed

+336
-0
lines changed

‎final/03-CSS-Fundamentals/challenges/challenge1.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Session 3 - Challenge #1</title>
8+
<link href="challenge1.css" rel="stylesheet" />
9+
</head>
10+
<body>
11+
<article class="product">
12+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
13+
<img
14+
src="../img/challenges.jpg"
15+
alt="Chuck Taylor All Star Shoe"
16+
height="250"
17+
width="250"
18+
/>
19+
20+
<p class="price"><strong>$65.00</strong></p>
21+
<p class="shipping">Free shipping</p>
22+
<p>
23+
Ready to dress up or down, these classic canvas Chucks are an everyday
24+
wardrobe staple.
25+
</p>
26+
27+
<a class="more-info" href="https://www.converse.com"
28+
>More information &rarr;</a
29+
>
30+
31+
<h3 class="details-title">Product details</h3>
32+
<ul class="details-list">
33+
<li>Lightweight, durable canvas sneaker</li>
34+
<li>Lightly padded footbed for added comfort</li>
35+
<li>Iconic Chuck Taylor ankle patch</li>
36+
</ul>
37+
38+
<button class="add-cart">Add to cart</button>
39+
</article>
40+
</body>
41+
</html>

‎final/03-CSS-Fundamentals/challenges/challenge2.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font-family: sans-serif;
8+
line-height: 1.4;
9+
}
10+
11+
/* PRODUCT */
12+
.product {
13+
border: 4px solid black;
14+
width: 825px;
15+
margin: 50px auto;
16+
}
17+
18+
.product-title {
19+
text-align: center;
20+
font-size: 22px;
21+
text-transform: uppercase;
22+
background-color: #f7f7f7;
23+
padding: 15px;
24+
}
25+
26+
/* PRODUCT INFORMATION */
27+
.price {
28+
font-size: 24px;
29+
}
30+
31+
.shipping {
32+
font-size: 12px;
33+
text-transform: uppercase;
34+
font-weight: bold;
35+
color: #777;
36+
margin-bottom: 20px;
37+
}
38+
39+
.more-info:link,
40+
.more-info:visited {
41+
color: black;
42+
}
43+
44+
.more-info:hover,
45+
.more-info:active {
46+
text-decoration: none;
47+
}
48+
49+
/* PRODUCT DETAILS */
50+
.details-title {
51+
text-transform: uppercase;
52+
font-size: 16px;
53+
margin-bottom: 15px;
54+
margin-top: 30px;
55+
}
56+
57+
.details-list {
58+
list-style: square;
59+
margin-left: 20px;
60+
}
61+
62+
.details-list li {
63+
margin-bottom: 10px;
64+
}
65+
66+
/* BUTTON */
67+
.add-cart {
68+
background-color: #000;
69+
border: none;
70+
color: #fff;
71+
font-size: 20px;
72+
text-transform: uppercase;
73+
cursor: pointer;
74+
padding: 15px;
75+
width: 100%;
76+
border-top: 4px solid black;
77+
}
78+
79+
.add-cart:hover {
80+
color: #000;
81+
background-color: #fff;
82+
}

‎final/03-CSS-Fundamentals/challenges/challenge2.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Session 3 - Challenge #2</title>
8+
<link href="challenge2.css" rel="stylesheet" />
9+
</head>
10+
<body>
11+
<article class="product">
12+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
13+
<img
14+
src="../img/challenges.jpg"
15+
alt="Chuck Taylor All Star Shoe"
16+
height="250"
17+
width="250"
18+
/>
19+
<p class="price"><strong>$65.00</strong></p>
20+
<p class="shipping">Free shipping</p>
21+
<p class="product-description">
22+
Ready to dress up or down, these classic canvas Chucks are an everyday
23+
wardrobe staple.
24+
</p>
25+
<a href="https://converse.com" target="_blank" class="more-info"
26+
>More information &rarr;</a
27+
>
28+
29+
<h3 class="details-title">Product details</h3>
30+
<ul class="details-list">
31+
<li>Lightweight, durable canvas sneaker</li>
32+
<li>Lightly padded footbed for added comfort</li>
33+
<li>Iconic Chuck Taylor ankle patch.</li>
34+
</ul>
35+
<button class="add-cart">Add to cart</button>
36+
</article>
37+
</body>
38+
</html>

‎final/03-CSS-Fundamentals/challenges/challenge3.css

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
font-family: sans-serif;
8+
line-height: 1.4;
9+
}
10+
11+
/* PRODUCT */
12+
.product {
13+
border: 4px solid black;
14+
width: 825px;
15+
margin: 50px auto;
16+
position: relative;
17+
}
18+
19+
.product-title {
20+
text-align: center;
21+
font-size: 22px;
22+
text-transform: uppercase;
23+
background-color: #f7f7f7;
24+
padding: 15px;
25+
}
26+
27+
/* PRODUCT INFORMATION */
28+
.price {
29+
font-size: 24px;
30+
}
31+
32+
.shipping {
33+
font-size: 12px;
34+
text-transform: uppercase;
35+
font-weight: bold;
36+
color: #777;
37+
margin-bottom: 20px;
38+
}
39+
40+
.sale {
41+
background-color: #ec2f2f;
42+
color: #fff;
43+
font-size: 12px;
44+
text-transform: uppercase;
45+
font-weight: bold;
46+
letter-spacing: 2px;
47+
padding: 7px 15px;
48+
display: inline-block;
49+
position: absolute;
50+
top: -17px;
51+
left: -38px;
52+
53+
/* width: 40px;
54+
text-align: center; */
55+
}
56+
57+
.more-info:link,
58+
.more-info:visited {
59+
color: black;
60+
margin-bottom: 30px;
61+
display: inline-block;
62+
}
63+
64+
.more-info:hover,
65+
.more-info:active {
66+
text-decoration: none;
67+
}
68+
69+
.color {
70+
background-color: #000;
71+
height: 22px;
72+
width: 22px;
73+
display: inline-block;
74+
margin-right: 10px;
75+
}
76+
77+
.color-blue {
78+
background-color: #2f6ee2;
79+
}
80+
.color-red {
81+
background-color: #ec2f2f;
82+
}
83+
.color-yellow {
84+
background-color: #f0bf1e;
85+
}
86+
.color-green {
87+
background-color: #90cc20;
88+
}
89+
.color-brown {
90+
background-color: #885214;
91+
}
92+
93+
/* PRODUCT DETAILS */
94+
.details-title {
95+
text-transform: uppercase;
96+
font-size: 16px;
97+
margin-bottom: 15px;
98+
margin-top: 30px;
99+
}
100+
101+
.details-list {
102+
list-style: square;
103+
margin-left: 20px;
104+
}
105+
106+
.details-list li {
107+
margin-bottom: 10px;
108+
}
109+
110+
/* BUTTON */
111+
.add-cart {
112+
background-color: #000;
113+
border: none;
114+
color: #fff;
115+
font-size: 20px;
116+
text-transform: uppercase;
117+
cursor: pointer;
118+
padding: 15px;
119+
width: 100%;
120+
border-top: 4px solid black;
121+
}
122+
123+
.add-cart:hover {
124+
color: #000;
125+
background-color: #fff;
126+
}

‎final/03-CSS-Fundamentals/challenges/challenge3.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Session 3 - Challenge #3</title>
8+
<link href="challenge3.css" rel="stylesheet" />
9+
</head>
10+
<body>
11+
<article class="product">
12+
<h2 class="product-title">Converse Chuck Taylor All Star Low Top</h2>
13+
<img
14+
src="../img/challenges.jpg"
15+
alt="Chuck Taylor All Star Shoe"
16+
height="250"
17+
width="250"
18+
/>
19+
<p class="price"><strong>$65.00</strong></p>
20+
<p class="shipping">Free shipping</p>
21+
<p class="sale">Sale</p>
22+
23+
<p class="product-description">
24+
Ready to dress up or down, these classic canvas Chucks are an everyday
25+
wardrobe staple.
26+
</p>
27+
<a href="https://converse.com" target="_blank" class="more-info"
28+
>More information &rarr;</a
29+
>
30+
31+
<div class="colors">
32+
<div class="color"></div>
33+
<div class="color color-blue"></div>
34+
<div class="color color-red"></div>
35+
<div class="color color-yellow"></div>
36+
<div class="color color-green"></div>
37+
<div class="color color-brown"></div>
38+
</div>
39+
40+
<h3 class="details-title">Product details</h3>
41+
<ul class="details-list">
42+
<li>Lightweight, durable canvas sneaker</li>
43+
<li>Lightly padded footbed for added comfort</li>
44+
<li>Iconic Chuck Taylor ankle patch.</li>
45+
</ul>
46+
<button class="add-cart">Add to cart</button>
47+
</article>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)