jonasschmedtmann
diff --git a/‎.DS_Store
6 KB b/‎.DS_Store
6 KB
diff --git a/‎final/.DS_Store
6 KB b/‎final/.DS_Store
6 KB
diff --git a/‎starter/.DS_Store
6 KB b/‎starter/.DS_Store
6 KB
diff --git a/‎starter/03-CSS-Fundamentals/index.html
Lines changed: 12 additions & 7 deletions b/‎starter/03-CSS-Fundamentals/index.html
Lines changed: 12 additions & 7 deletions
diff --git a/‎starter/03-CSS-Fundamentals/style.css
Lines changed: 67 additions & 0 deletions b/‎starter/03-CSS-Fundamentals/style.css
Lines changed: 67 additions & 0 deletions
diff --git a/‎starter/04-CSS-Layouts/index.html
Lines changed: 2 additions & 1 deletion b/‎starter/04-CSS-Layouts/index.html
Lines changed: 2 additions & 1 deletion
diff --git a/‎starter/04-CSS-Layouts/style.css
Lines changed: 10 additions & 0 deletions b/‎starter/04-CSS-Layouts/style.css
Lines changed: 10 additions & 0 deletions
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <title>The Basic Language of the Web: HTML</title>
+    <link rel="stylesheet" href="style.css" />
   </head>
 
   <body>
@@ -15,7 +16,7 @@ <h5>The Basic Language of the Web: HTML</h5>
     <h6>The Basic Language of the Web: HTML</h6>
     -->
 
-    <header>
+    <header class="main-header">
       <h1>📘 The Code Magazine</h1>
 
       <nav>
@@ -37,7 +38,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"
@@ -112,7 +115,7 @@ <h3>Why should you learn HTML?</h3>
     <aside>
       <h4>Related posts</h4>
 
-      <ul>
+      <ul class="related">
         <li>
           <img
             src="img/related-1.jpg"
@@ -121,12 +124,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
@@ -136,11 +139,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>Copyright &copy; 2027 by The Code Magazine.</footer>
+    <footer>
+      <p id="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
+    </footer>
   </body>
 </html>
@@ -0,0 +1,67 @@
+h1,
+h2,
+h3,
+h4,
+p,
+li {
+  font-family: sans-serif;
+  color: #333;
+}
+
+h1,
+h2,
+h3 {
+  color: hsla(188, 77%, 25%, 0.887);
+}
+
+h1 {
+  font-size: 30px;
+  text-transform: uppercase;
+  font-style: italic;
+}
+
+h2 {
+  font-size: 40px;
+}
+
+h3 {
+  font-size: 30px;
+}
+
+h4 {
+  font-size: 20px;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+p {
+  font-size: 22px;
+  line-height: 1.5;
+}
+
+li {
+  font-size: 20px;
+}
+
+#author {
+  font-style: italic;
+  font-size: 18px;
+}
+
+#copyright {
+  font-style: italic;
+  font-size: 16px;
+}
+
+.related-author {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.related {
+  list-style-type: none;
+}
+
+.main-header {
+  background-color: #f7f7f7;
+}
@@ -39,9 +39,10 @@ <h2>The Basic Language of the Web: HTML</h2>
             alt="Headshot of Laura Jones"
             height="50"
             width="50"
+            class="author-img"
           />
 
-          <p id="author">
+          <p id="author" class="author">
             Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
           </p>
 
 
@@ -265,3 +265,13 @@ footer p {
 nav p {
   font-size: 18px;
 } */
+
+/* FLOATS */
+.author-img {
+  float: left;
+}
+
+.author {
+  float: left;
+  padding-left: 10px;
+}