final css fundamentals

marcuma · marcuma · commit 8edcadb9a428 · 2022-12-15T11:18:42.000-05:00
diff --git a/starter/03-CSS-Fundamentals/css/style.css b/starter/03-CSS-Fundamentals/css/style.css
@@ -5,6 +5,13 @@ h4,
 p,
 li {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  color: #444;
+}
+
+h1,
+h2,
+h3 {
+  color: #1098ad;
 }
 
 h1 {
@@ -36,11 +43,69 @@ li {
   font-size: 20px;
 }
 
-footer p {
+/* footer p {
+  font-size: 16px;
+  text-align: center;
+} */
+
+#copyright {
   font-size: 16px;
   text-align: center;
 }
 
-header p {
+#author {
+  font-style: italic;
+  font-size: 18px;
+}
+
+.related-author {
+  font-style: italic;
+  font-weight: bold;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  font-size: 18px;
+}
+
+.related {
+  list-style: none;
+}
+
+.main-header {
+  background-color: #f7f7f7;
+}
+
+aside {
+  background-color: #f7f7f7;
+  border-top: 5px solid #1098ad;
+  border-bottom: 5px solid #1098ad;
+}
+
+.border {
+  border-bottom: 5px solid #3a3b3b;
+}
+
+li:first-child {
+  font-weight: bold;
+}
+
+li:last-child {
   font-style: italic;
 }
+
+li:nth-child(even) {
+  /* color: red; */
+}
+
+/* Style Hyperlinks */
+a:link {
+  color: #1098ad;
+  text-decoration: none;
+}
+
+a:visited {
+  color: #1098ad;
+}
+
+a:hover {
+  color: orangered;
+  font-weight: bold;
+}
diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html
@@ -7,7 +7,7 @@
   </head>
 
   <body>
-    <header>
+    <header class="main-header">
       <h1>📘 The Code Magazine</h1>
 
       <nav>
@@ -20,7 +20,7 @@ <h1>📘 The Code Magazine</h1>
 
     <article>
       <header>
-        <h2>The Basic Language of the Web: HTML</h2>
+        <h2 class="border">The Basic Language of the Web: HTML</h2>
 
         <img
           src="img/laura-jones.jpg"
@@ -29,7 +29,9 @@ <h2>The Basic Language of the Web: HTML</h2>
           width="50"
         />
 
-        <p>Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027</p>
+        <p id="author">
+          Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
+        </p>
 
         <img
           src="img/post-img.jpg"
@@ -104,7 +106,7 @@ <h3>Why should you learn HTML?</h3>
     <aside>
       <h4>Related posts</h4>
 
-      <ul>
+      <ul class="related">
         <li>
           <img
             src="img/related-1.jpg"
@@ -113,12 +115,12 @@ <h4>Related posts</h4>
             width="75"
           />
           <a href="#">How to Learn Web Development</a>
-          <p>By Jonas Schmedtmann</p>
+          <p class="related-author">By Jonas Schmedtmann</p>
         </li>
         <li>
           <img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
           <a href="#">The Unknown Powers of CSS</a>
-          <p>By Jim Dillon</p>
+          <p class="related-author">By Jim Dillon</p>
         </li>
         <li>
           <img
@@ -128,11 +130,13 @@ <h4>Related posts</h4>
             height="75"
           />
           <a href="#">Why JavaScript is Awesome</a>
-          <p>By Matilda</p>
+          <p class="related-author">By Matilda</p>
         </li>
       </ul>
     </aside>
 
-    <footer><p>Copyright &copy; 2027 by The Code Magazine.</p></footer>
+    <footer>
+      <p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
+    </footer>
   </body>
 </html>
