Skip to content

Commit 04041f1

Browse files
committed
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.
1 parent 6d105c8 commit 04041f1

File tree

2 files changed

+182
-119
lines changed

2 files changed

+182
-119
lines changed

starter/04-CSS-Layouts/index.html

Lines changed: 35 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -34,17 +34,19 @@ <h1>📘 The Code Magazine</h1>
3434
<header class="post-header">
3535
<h2>The Basic Language of the Web: HTML</h2>
3636

37-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Headshot of Laura Jones"
40-
height="50"
41-
width="50"
42-
/>
37+
<div class="author-box">
38+
<img
39+
src="img/laura-jones.jpg"
40+
alt="Headshot of Laura Jones"
41+
height="50"
42+
width="50"
43+
/>
4344

44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June
46-
21st 2027
47-
</p>
45+
<p class="author">
46+
Posted by <strong>Laura Jones</strong> on Monday,
47+
June 21st 2027
48+
</p>
49+
</div>
4850

4951
<img
5052
src="img/post-img.jpg"
@@ -125,39 +127,51 @@ <h3>Why should you learn HTML?</h3>
125127
</p>
126128
</article>
127129

128-
<aside>
130+
<aside class="related-posts">
129131
<h4>Related posts</h4>
130132

131-
<ul class="related">
132-
<li>
133+
<ul class="related-items">
134+
<li class="related-post">
133135
<img
134136
src="img/related-1.jpg"
135137
alt="Person programming"
136138
width="75"
137139
height="75"
138140
/>
139-
<a href="#">How to Learn Web Development</a>
140-
<p class="related-author">By Jonas Schmedtmann</p>
141+
<div>
142+
<a href="#" class="related-link"
143+
>How to Learn Web Development</a
144+
>
145+
<p class="related-author">By Jonas Schmedtmann</p>
146+
</div>
141147
</li>
142-
<li>
148+
<li class="related-post">
143149
<img
144150
src="img/related-2.jpg"
145151
alt="Lightning"
146152
width="75"
147153
height="75"
148154
/>
149-
<a href="#">The Unknown Powers of CSS</a>
150-
<p class="related-author">By Jim Dillon</p>
155+
<div>
156+
<a href="#" class="related-link"
157+
>The Unknown Powers of CSS</a
158+
>
159+
<p class="related-author">By Jim Dillon</p>
160+
</div>
151161
</li>
152-
<li>
162+
<li class="related-post">
153163
<img
154164
src="img/related-3.jpg"
155165
alt="JavaScript code on a screen"
156166
width="75"
157167
height="75"
158168
/>
159-
<a href="#">Why JavaScript is Awesome</a>
160-
<p class="related-author">By Matilda</p>
169+
<div>
170+
<a href="#" class="related-link"
171+
>Why JavaScript is Awesome</a
172+
>
173+
<p class="related-author">By Matilda</p>
174+
</div>
161175
</li>
162176
</ul>
163177
</aside>

0 commit comments

Comments
 (0)