Skip to content

Commit d744e3f

Browse files
lnnchaulnnchau
committed
complete challenge jonasschmedtmann#1 
1 parent b87c90c commit d744e3f

File tree

4 files changed

+225
-7
lines changed

4 files changed

+225
-7
lines changed

‎starter/03-CSS-Fundamentals/challenge.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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+
<link href="./challenge.style.css" rel="stylesheet" />
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<article class="product-info">
12+
<h3 class="product-name">Converse Chuck Taylor All Star Low Top</h3>
13+
14+
<img src="img/challenges.jpg" alt="Converse" width="250" height="250" />
15+
<p class="product-price">$65</p>
16+
17+
<p class="shipping">Free shipping</p>
18+
19+
<p>Ready to dress up...</p>
20+
21+
<a class="more-info" href="#"> More information &RightArrow;</a>
22+
23+
<h4 class="product-details-title">Product details</h4>
24+
<ul class="product-details">
25+
<li>Lightweight</li>
26+
<li>Lightly padded</li>
27+
<li>Iconic</li>
28+
</ul>
29+
30+
<button class="add-to-card-btn">Add to cart</button>
31+
</article>
32+
</body>
33+
</html>

‎starter/03-CSS-Fundamentals/challenge.style.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
font-family: sans-serif;
3+
}
4+
5+
/* PRODUCT */
6+
.product-info {
7+
border: 5px solid black;
8+
}
9+
10+
.product-name {
11+
font-size: 20px;
12+
text-transform: uppercase;
13+
text-align: center;
14+
}
15+
16+
/* PRODUCT INFORMATION */
17+
.product-price {
18+
font-size: 20px;
19+
font-weight: bold;
20+
}
21+
22+
.shipping {
23+
text-transform: uppercase;
24+
color: grey;
25+
font-weight: bold;
26+
font-size: 12px;
27+
}
28+
29+
/* MUST SPECIFY ALL FOUR STATES */
30+
.more-info:link,
31+
.more-info:visited {
32+
color: black;
33+
}
34+
35+
.more-info:hover,
36+
.more-info:active {
37+
text-decoration: none;
38+
}
39+
40+
/* PRODUCT DETAILS */
41+
.product-details-title {
42+
text-transform: uppercase;
43+
}
44+
45+
.product-details {
46+
list-style: square;
47+
}
48+
49+
/* ADD TO CARD BUTTON */
50+
.add-to-card-btn {
51+
color: white;
52+
background-color: black;
53+
text-transform: uppercase;
54+
cursor: pointer;
55+
}
56+
57+
.add-to-card-btn:hover {
58+
background-color: white;
59+
color: black;
60+
border: none;
61+
}

‎starter/03-CSS-Fundamentals/index.html

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<link href="style.css" rel="stylesheet" />
56
<title>The Basic Language of the Web: HTML</title>
67
</head>
78

@@ -15,7 +16,7 @@ <h5>The Basic Language of the Web: HTML</h5>
1516
<h6>The Basic Language of the Web: HTML</h6>
1617
-->
1718

18-
<header>
19+
<header class="main-header">
1920
<h1>📘 The Code Magazine</h1>
2021

2122
<nav>
@@ -37,7 +38,9 @@ <h2>The Basic Language of the Web: HTML</h2>
3738
width="50"
3839
/>
3940

40-
<p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
41+
<p id="author">
42+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
43+
</p>
4144

4245
<img
4346
src="img/post-img.jpg"
@@ -112,7 +115,7 @@ <h3>Why should you learn HTML?</h3>
112115
<aside>
113116
<h4>Related posts</h4>
114117

115-
<ul>
118+
<ul class="related">
116119
<li>
117120
<img
118121
src="img/related-1.jpg"
@@ -121,12 +124,12 @@ <h4>Related posts</h4>
121124
width="75"
122125
/>
123126
<a href="#">How to Learn Web Development</a>
124-
<p>By Jonas Schmedtmann</p>
127+
<p class="related-author">By Jonas Schmedtmann</p>
125128
</li>
126129
<li>
127130
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
128131
<a href="#">The Unknown Powers of CSS</a>
129-
<p>By Jim Dillon</p>
132+
<p class="related-author">By Jim Dillon</p>
130133
</li>
131134
<li>
132135
<img
@@ -136,11 +139,13 @@ <h4>Related posts</h4>
136139
height="75"
137140
/>
138141
<a href="#">Why JavaScript is Awesome</a>
139-
<p>By Matilda</p>
142+
<p class="related-author">By Matilda</p>
140143
</li>
141144
</ul>
142145
</aside>
143146

144-
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
147+
<footer>
148+
<p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
149+
</footer>
145150
</body>
146151
</html>

‎starter/03-CSS-Fundamentals/style.css

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
h1,
2+
h2,
3+
h3,
4+
h4,
5+
p,
6+
li {
7+
font-family: sans-serif;
8+
color: #444;
9+
}
10+
11+
h1,
12+
h2,
13+
h3 {
14+
color: #1098ad;
15+
}
16+
17+
h1 {
18+
font-size: 26px;
19+
text-transform: uppercase;
20+
font-size: italic;
21+
}
22+
23+
h2 {
24+
font-size: 40px;
25+
}
26+
27+
h3 {
28+
font-size: 30px;
29+
}
30+
31+
h4 {
32+
font-size: 20px;
33+
text-transform: uppercase;
34+
text-align: center; /* center of its parent element */
35+
}
36+
37+
p {
38+
font-size: 22px;
39+
line-height: 1.5; /* 1.5 times the font size */
40+
}
41+
42+
li {
43+
font-size: 20px;
44+
}
45+
46+
/* footer p {
47+
font-size: 16px;
48+
} */
49+
50+
/* article header p {
51+
font-style: italic;
52+
} */
53+
54+
#author {
55+
font-style: italic;
56+
font-size: 18px;
57+
}
58+
59+
#copyright {
60+
font-size: 16px;
61+
}
62+
63+
.related-author {
64+
font-size: 18px;
65+
font-weight: bold;
66+
}
67+
68+
.related {
69+
list-style: none;
70+
}
71+
72+
.main-header {
73+
background-color: #c2c2c2;
74+
}
75+
76+
aside {
77+
background-color: #c2c2c2;
78+
border-top: 5px solid #1098ad;
79+
border-bottom: 5px solid #1098ad;
80+
}
81+
82+
li:first-child {
83+
font-weight: bold;
84+
}
85+
86+
li:last-child {
87+
font-weight: italic;
88+
}
89+
90+
li:nth-child(even) {
91+
color: red;
92+
}
93+
94+
/* Target anchor with href attribute */
95+
/* pseudo-class -> will have higher priority than
96+
a {
97+
color: red;
98+
} */
99+
a:link {
100+
color: #1098ad;
101+
text-decoration: none; /* remove underline */
102+
}
103+
104+
/* Give visited link the same color */
105+
a:visited {
106+
color: #1098ad;
107+
}
108+
109+
a:hover {
110+
color: orangered;
111+
font-weight: bold;
112+
text-decoration: underline wavy orangered;
113+
}
114+
115+
/* When we click on the link */
116+
a:active {
117+
background-color: green;
118+
font-style: italic;
119+
}

0 commit comments

Comments
 (0)