feat: adding flexbox to our project.

Author: Uribouz

starter/04-CSS-Layouts/index.html

@@ -35,18 +35,19 @@ <h1>📘 The Code Magazine</h1>
       <article>
         <header class="post-header">
           <h2>The Basic Language of the Web: HTML</h2>
+          <div class="author-box">
+            <img
+              src="img/laura-jones.jpg"
+              alt="Headshot of Laura Jones"
+              height="50"
+              width="50"
+              class="author-img"
+            />
 
-          <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>
+            <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 +127,42 @@ <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

@@ -200,7 +200,7 @@ nav a:link {
   display: block; */
 
   margin-right: 30px;
-  margin-top: 10px;
+  /* margin-top: 10px; */
   display: inline-block;
 }
 
@@ -269,13 +269,13 @@ nav p {
   font-size: 18px;
 } */
 
+/* * Float
 .author-img {
   float: left;
   margin-bottom: 20px;
 }
 
 .author {
-  /* padding-left: 80px; */
   margin-top: 10px;
   margin-left: 20px;
   float: left;
@@ -289,34 +289,73 @@ nav {
   float: right;
 }
 
-/* Remem */
-/* * Old way to clearing float problem  */
+ Old way to clearing float problem 
 .clear {
   clear: both;
 }
 
-/* * New way to clearing float problem: clearfix hacked  */
+ New way to clearing float problem: clearfix hacked 
 .clearfix::after {
   clear: both;
   content: "";
   display: block;
 }
 
-/* * !!! Remember that 'float' is an old way to layout website */
+ !!! Remember that 'float' is an old way to layout website 
 
 article {
-  /* background-color: green; */
   width: 825px;
   float: left;
 }
 
 aside {
-  /* background-color: red; */
   width: 300px;
   float: right;
 }
 
 footer {
-  /* background-color: yellow; */
-  clear: both; /* * Clear the float: return to normal-flow */
+  clear: both; 
+   Clear the float: return to normal-flow
+}
+
+*/
+
+/* * Flex */
+.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:link {
+  font-size: 17px;
+  font-weight: bold;
+  font-style: normal;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.related-author {
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: normal;
+  font-style: italic;
 }