Add flexbox to blog post

Author: Ronan

starter/04-CSS-Layouts/index.html

@@ -34,17 +34,18 @@ <h1>📘 The Code Magazine</h1>
         <header class="post-header">
           <h2>The Basic Language of the Web: HTML</h2>
 
-          <img
-            src="img/laura-jones.jpg"
-            alt="Headshot of Laura Jones"
-            height="50"
-            width="50"
-            class="author-img"
-          />
-
-          <p id="author" class="author">
-            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
-          </p>
+          <div class="author-box">
+            <img
+              src="img/laura-jones.jpg"
+              alt="Headshot of Laura Jones"
+              height="50"
+              width="50"
+              class="author-img"
+            />
+            <p id="author" class="author">
+              Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
+            </p>
+          </div>
 
           <img
             src="img/post-img.jpg"
@@ -124,35 +125,41 @@ <h3>Why should you learn HTML?</h3>
         <h4>Related posts</h4>
 
         <ul class="related">
-          <li>
+          <li class="related-post">
             <img
               src="img/related-1.jpg"
               alt="Person programming"
               width="75"
               height="75"
             />
-            <a href="#">How to Learn Web Development</a>
-            <p class="related-author">By Jonas Schmedtmann</p>
+            <div>
+              <a href="#" class="related-link">How to Learn Web Development</a>
+              <p class="related-author">By Jonas Schmedtmann</p>
+            </div>
           </li>
-          <li>
+          <li class="related-post">
             <img
               src="img/related-2.jpg"
               alt="Lightning"
               width="75"
               height="75"
             />
-            <a href="#">The Unknown Powers of CSS</a>
-            <p class="related-author">By Jim Dillon</p>
+            <div>
+              <a href="#" class="related-link">The Unknown Powers of CSS</a>
+              <p class="related-author">By Jim Dillon</p>
+            </div>
           </li>
-          <li>
+          <li class="related-post">
             <img
               src="img/related-3.jpg"
               alt="JavaScript code on a screen"
               width="75"
               height="75"
             />
-            <a href="#">Why JavaScript is Awesome</a>
-            <p class="related-author">By Matilda</p>
+            <div>
+              <a href="#" class="related-link">Why JavaScript is Awesome</a>
+              <p class="related-author">By Matilda</p>
+            </div>
           </li>
         </ul>
       </aside>

starter/04-CSS-Layouts/style.css

@@ -22,7 +22,7 @@ body {
 }
 
 .main-header {
-  background-color:#f7f7f7;
+  background-color: #f7f7f7;
   /* padding: 20px;
   padding-left: 40px;
   padding-right: 40px; */
@@ -197,7 +197,7 @@ nav a:link {
   display: block; */
 
   margin-right: 30px;
-  margin-top: 10px;
+  /* margin-top: 10px; */
   display: inline-block;
 }
 
@@ -267,6 +267,7 @@ nav p {
 } */
 
 /* FLOATS */
+/*
 .author-img {
   float: left;
   margin-bottom: 20px;
@@ -308,4 +309,46 @@ aside {
 
 footer {
   clear: both;
-}
+}
+  */
+
+/* FLEXBOX */
+
+.main-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.author-box {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.author {
+  margin-bottom: 0;
+  margin-left: 15px;
+}
+
+.related-post {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.related-link {
+  font-size: 17px;
+  font-weight: bold;
+  font-style: normal;
+  display: block;
+  margin-bottom: 5px;
+}
+
+.related-author {
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  font-style: italic;
+}