section-4: Style inner components with flexbox.

Author: owen-webb

starter/04-CSS-Layouts/index.html

@@ -36,17 +36,19 @@ <h1>📘 The Code Magazine</h1>
         <header class="post-header">
           <h2>The Basic Language of the Web: HTML</h2>
 
-          <img
+          <div class="author-box">
+            <img
             src="img/laura-jones.jpg"
             alt="Headshot of Laura Jones"
             class="author-image"
             height="50"
             width="50"
-          />
+            />
 
-          <p id="author" class="author">
-            Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
-          </p>
+            <p id="author" class="author">
+              Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
+            </p>
+          </div>
 
           <img
             src="img/post-img.jpg"
@@ -126,35 +128,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

@@ -197,7 +197,6 @@ nav a:link {
   display: block; */
 
   margin-right: 30px;
-  margin-top: 10px;
   display: inline-block;
 }
 
@@ -266,7 +265,9 @@ nav p {
   font-size: 18px;
 } */
 
-.author {
+/* FLOATS */
+
+/* .author {
   float: left;
   margin-left: 20px;
   margin-top: 10px;
@@ -307,4 +308,45 @@ aside {
 
 footer {
   clear: both;
+} */
+
+/* FLEX */
+
+.main-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.author-box {
+  align-items: center;
+  display: flex;
+  margin-bottom: 15px;
+}
+
+.author {
+  margin-bottom: 0;
+  margin-left: 15px;
+}
+
+.related-author {
+  font-size: 14px;
+  font-style: italic;
+  font-weight: normal;
+  margin-bottom: 0;
+}
+
+.related-link:link {
+  display: block;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.related-post {
+  align-items: center;
+  display: flex;
+  gap: 20px;
+  margin-bottom: 30px;
 }