Skip to content

Commit f162eb3

Browse files
author
thomas.wei
committed
.
1 parent 5205f32 commit f162eb3

File tree

3 files changed

+142
-9
lines changed

3 files changed

+142
-9
lines changed

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
<!DOCTYPE html>
2+
<link rel="stylesheet" href="./style.css" />
3+
24
<html>
35
<head>
46
<title>BLOG</title>

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

Lines changed: 16 additions & 9 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 rel="stylesheet" href="./style.css" />
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"
@@ -74,7 +77,7 @@ <h3>What is HTML?</h3>
7477
<p>In HTML, each element is made up of 3 parts:</p>
7578

7679
<ol>
77-
<li>The opening tag</li>
80+
<li class="first-li">The opening tag</li>
7881
<li>The closing tag</li>
7982
<li>The actual element</li>
8083
</ol>
@@ -96,7 +99,9 @@ <h3>Why should you learn HTML?</h3>
9699
</p>
97100

98101
<ul>
99-
<li>To be able to use the fundamental web dev language</li>
102+
<li class="first-li">
103+
To be able to use the fundamental web dev language
104+
</li>
100105
<li>
101106
To hand-craft beautiful websites instead of relying on tools like
102107
Worpress or Wix
@@ -112,7 +117,7 @@ <h3>Why should you learn HTML?</h3>
112117
<aside>
113118
<h4>Related posts</h4>
114119

115-
<ul>
120+
<ul class="un-list-removal">
116121
<li>
117122
<img
118123
src="img/related-1.jpg"
@@ -121,12 +126,12 @@ <h4>Related posts</h4>
121126
width="75"
122127
/>
123128
<a href="#">How to Learn Web Development</a>
124-
<p>By Jonas Schmedtmann</p>
129+
<p class="related-author">By Jonas Schmedtmann</p>
125130
</li>
126131
<li>
127132
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
128133
<a href="#">The Unknown Powers of CSS</a>
129-
<p>By Jim Dillon</p>
134+
<p class="related-author">By Jim Dillon</p>
130135
</li>
131136
<li>
132137
<img
@@ -136,11 +141,13 @@ <h4>Related posts</h4>
136141
height="75"
137142
/>
138143
<a href="#">Why JavaScript is Awesome</a>
139-
<p>By Matilda</p>
144+
<p class="related-author">By Matilda</p>
140145
</li>
141146
</ul>
142147
</aside>
143148

144-
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
149+
<footer>
150+
<p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
151+
</footer>
145152
</body>
146153
</html>

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
h1,
2+
h2,
3+
h3,
4+
h4,
5+
p,
6+
li {
7+
font-family: 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-style: italic;
21+
}
22+
h2 {
23+
font-size: 40px;
24+
}
25+
h3 {
26+
font-size: 30px;
27+
}
28+
h4 {
29+
font-size: 20px;
30+
text-transform: uppercase;
31+
text-align: center;
32+
}
33+
p {
34+
font-size: 22px;
35+
line-height: 1.5;
36+
}
37+
li {
38+
font-size: 20px;
39+
}
40+
41+
/* footer p {
42+
font-size: 16px;
43+
} */
44+
45+
#copyright {
46+
font-size: 16px;
47+
}
48+
49+
/* article header p {
50+
font-style: italic;
51+
} */
52+
53+
#author {
54+
font-style: italic;
55+
}
56+
57+
.related-author {
58+
font-size: 18px;
59+
font-weight: bold;
60+
}
61+
62+
/* ul {
63+
list-style: none;
64+
} */
65+
66+
.un-list-removal {
67+
list-style: none;
68+
}
69+
70+
.main-header {
71+
background-color: #f7f7f7;
72+
}
73+
74+
aside {
75+
background-color: #f7f7f7;
76+
border-bottom: 5px solid #1098ad;
77+
border-top: 5px solid #1098ad;
78+
}
79+
80+
body {
81+
/* background-color: #c8c4c4; */
82+
}
83+
84+
/* .first-li {
85+
font-weight: bold;
86+
} */
87+
88+
li:first-child {
89+
font-weight: bold;
90+
}
91+
92+
li:last-child {
93+
font-style: italic;
94+
}
95+
96+
li:nth-child(even) {
97+
color: blueviolet;
98+
}
99+
100+
/* article p:last-child {
101+
color: red;
102+
} */
103+
104+
/* styling links, 有href的會套用 */
105+
a:link {
106+
color: #1098ad;
107+
text-decoration: none;
108+
}
109+
110+
a:visited {
111+
/* color: #777; */
112+
color: #1098ad;
113+
}
114+
115+
a:hover {
116+
color: orange;
117+
font-weight: bold;
118+
text-decoration: underline orangered;
119+
}
120+
121+
a:active {
122+
background-color: black;
123+
font-style: italic;
124+
}

0 commit comments

Comments
 (0)