Changed the main header into flexbox container with page title and navigation menu. Changed the post header to flexbox container with author image and author paragraph. Changed aside with related posts to flexbox container with related post image and box container, containing post title and author.

Author: mirmak4

starter/04-CSS-Layouts/index.html

@@ -34,17 +34,19 @@ <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"
-                    />
+                    <div class="author-box">
+                        <img
+                            src="img/laura-jones.jpg"
+                            alt="Headshot of Laura Jones"
+                            height="50"
+                            width="50"
+                        />
 
-                    <p id="author">
-                        Posted by <strong>Laura Jones</strong> on Monday, June
-                        21st 2027
-                    </p>
+                        <p class="author">
+                            Posted by <strong>Laura Jones</strong> on Monday,
+                            June 21st 2027
+                        </p>
+                    </div>
 
                     <img
                         src="img/post-img.jpg"
@@ -125,39 +127,51 @@ <h3>Why should you learn HTML?</h3>
                 </p>
             </article>
 
-            <aside>
+            <aside class="related-posts">
                 <h4>Related posts</h4>
 
-                <ul class="related">
-                    <li>
+                <ul class="related-items">
+                    <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>