using flex for aligning content

Author: rameskum

practice/04 - CSS Layouts/index.html

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

practice/04 - CSS Layouts/style.css

@@ -198,7 +198,6 @@ nav a:link {
     display: block; */
 
     margin-right: 30px;
-    margin-top: 10px;
     display: inline-block;
 }
 
@@ -268,7 +267,7 @@ nav p {
 } */
 
 /* FLOATS */
-
+/*
 .author-img {
     float: left;
     margin-bottom: 20px;
@@ -310,4 +309,45 @@ aside {
 
 footer {
     clear: both;
+}
+ */
+
+/*FLEXBOX*/
+.main-header {
+    display: flex;
+    align-items: center; /* align items vertically */
+    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-author {
+    margin-bottom: 0;
+    font-size: 14px;
+    font-weight: normal;
+    font-style: italic;
+}
+
+.related-link:link {
+    font-size: 17px;
+    font-weight: bold;
+    font-style: normal;
+    margin-bottom: 5px;
+    display: block;
 }