Skip to content

Commit aeb0b47

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
finish course 027 css color
1 parent b906282 commit aeb0b47

File tree

2 files changed

+44
-9
lines changed

2 files changed

+44
-9
lines changed

starter/03-CSS-Fundamentals/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
1818

19-
<header>
19+
<header class="main-header">
2020
<h1>📘 The Code Magazine</h1>
2121

2222
<nav>
@@ -38,7 +38,9 @@ <h2>The Basic Language of the Web: HTML</h2>
3838
width="50"
3939
/>
4040

41-
<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>
4244

4345
<img
4446
src="img/post-img.jpg"
@@ -113,7 +115,7 @@ <h3>Why should you learn HTML?</h3>
113115
<aside>
114116
<h4>Related posts</h4>
115117

116-
<ul>
118+
<ul class="related">
117119
<li>
118120
<img
119121
src="img/related-1.jpg"
@@ -122,12 +124,12 @@ <h4>Related posts</h4>
122124
width="75"
123125
/>
124126
<a href="#">How to Learn Web Development</a>
125-
<p>By Jonas Schmedtmann</p>
127+
<p class="related-author">By Jonas Schmedtmann</p>
126128
</li>
127129
<li>
128130
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
129131
<a href="#">The Unknown Powers of CSS</a>
130-
<p>By Jim Dillon</p>
132+
<p class="related-author">By Jim Dillon</p>
131133
</li>
132134
<li>
133135
<img
@@ -137,11 +139,11 @@ <h4>Related posts</h4>
137139
height="75"
138140
/>
139141
<a href="#">Why JavaScript is Awesome</a>
140-
<p>By Matilda</p>
142+
<p class="related-author">By Matilda</p>
141143
</li>
142144
</ul>
143145
</aside>
144146

145-
<footer>Copyright &copy; 2027 by The Code Magazine.</footer>
147+
<footer id="copyright">Copyright &copy; 2027 by The Code Magazine.</footer>
146148
</body>
147149
</html>

starter/03-CSS-Fundamentals/style.css

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,13 @@ h4,
55
p,
66
li {
77
font-family: sans-serif;
8+
color: #444444;
9+
}
10+
h1,
11+
h2,
12+
h3 {
13+
color: #1098ad;
814
}
9-
1015
h1 {
1116
font-size: 26px;
1217
text-transform: uppercase;
@@ -40,6 +45,34 @@ footer p {
4045
font-size: 16px;
4146
}
4247

43-
article header p {
48+
/* article header p {
49+
font-style: italic;
50+
} */
51+
52+
#author {
4453
font-style: italic;
54+
font-size: 18px;
55+
}
56+
57+
.related-author {
58+
font-size: 18px;
59+
font-weight: bold;
60+
}
61+
62+
.related {
63+
list-style: none;
64+
}
65+
66+
.main-header {
67+
background-color: #f7f7f7;
68+
}
69+
70+
aside {
71+
background-color: #f7f7f7;
72+
border-top: 5px solid #1098ad;
73+
border-bottom: 5px solid #1098ad;
4574
}
75+
76+
/* body {
77+
background-color: blue;
78+
} */

0 commit comments

Comments
 (0)