Skip to content

Commit 890e7fb

Browse files
author
Andy Chau
committed
Section 4 completed
1 parent a2242f7 commit 890e7fb

File tree

14 files changed

+1586
-7
lines changed

14 files changed

+1586
-7
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/.idea/

‎Presentations/all-design-guidelines.pdf

1.34 MB
Binary file not shown.

‎final/04-CSS-Layouts/challenges/challenge1.css

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

‎final/04-CSS-Layouts/challenges/challenge1.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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 4 - 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+
<div class="container clearfix">
14+
<img
15+
src="../../../starter/04-CSS-Layouts/img/challenges.jpg"
16+
alt="Chuck Taylor All Star Shoe"
17+
height="250"
18+
width="250"
19+
class="product-img"
20+
/>
21+
<div class="product-info">
22+
<p class="price"><strong>$65.00</strong></p>
23+
<p class="shipping">Free shipping</p>
24+
<p class="sale">Sale</p>
25+
26+
<p class="product-description">
27+
Ready to dress up or down, these classic canvas Chucks are an
28+
everyday wardrobe staple.
29+
</p>
30+
<a href="https://converse.com" target="_blank" class="more-info"
31+
>More information &rarr;</a
32+
>
33+
34+
<div class="colors">
35+
<div class="color"></div>
36+
<div class="color color-blue"></div>
37+
<div class="color color-red"></div>
38+
<div class="color color-yellow"></div>
39+
<div class="color color-green"></div>
40+
<div class="color color-brown"></div>
41+
</div>
42+
</div>
43+
44+
<div class="product-details">
45+
<h3 class="details-title">Product details</h3>
46+
<ul class="details-list">
47+
<li>Lightweight, durable canvas sneaker</li>
48+
<li>Lightly padded footbed for added comfort</li>
49+
<li>Iconic Chuck Taylor ankle patch.</li>
50+
</ul>
51+
</div>
52+
</div>
53+
<button class="add-cart">Add to cart</button>
54+
</article>
55+
</body>
56+
</html>

‎final/04-CSS-Layouts/challenges/challenge2.css

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

0 commit comments

Comments
 (0)