Skip to content

Commit 5488bc3

Browse files
mirmak4mirmak4
committed
Created flexbox layout for post body and related posts, so that the first one is one the left side, and the latter is on the right side of the page.
1 parent 04041f1 commit 5488bc3

File tree

2 files changed

+163
-144
lines changed

2 files changed

+163
-144
lines changed

‎starter/04-CSS-Layouts/index.html‎

Lines changed: 148 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -30,151 +30,157 @@ <h1>📘 The Code Magazine</h1>
3030
</nav>
3131
</header>
3232

33-
<article>
34-
<header class="post-header">
35-
<h2>The Basic Language of the Web: HTML</h2>
36-
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-
/>
44-
45-
<p class="author">
46-
Posted by <strong>Laura Jones</strong> on Monday,
47-
June 21st 2027
48-
</p>
49-
</div>
50-
51-
<img
52-
src="img/post-img.jpg"
53-
alt="HTML code on a screen"
54-
width="500"
55-
height="200"
56-
class="post-img"
57-
/>
58-
<button>❤️ Like</button>
59-
</header>
60-
61-
<p>
62-
All modern websites and web applications are built using
63-
three
64-
<em>fundamental</em>
65-
technologies: HTML, CSS and JavaScript. These are the
66-
languages of the web.
67-
</p>
68-
69-
<p>
70-
In this post, let's focus on HTML. We will learn what HTML
71-
is all about, and why you too should learn it.
72-
</p>
73-
74-
<h3>What is HTML?</h3>
75-
<p>
76-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
77-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a
78-
markup language that web developers use to structure and
79-
describe the content of a webpage (not a programming
80-
language).
81-
</p>
82-
<p>
83-
HTML consists of elements that describe different types of
84-
content: paragraphs, links, headings, images, video, etc.
85-
Web browsers understand HTML and render HTML code as
86-
websites.
87-
</p>
88-
<p>In HTML, each element is made up of 3 parts:</p>
89-
90-
<ol>
91-
<li class="first-li">The opening tag</li>
92-
<li>The closing tag</li>
93-
<li>The actual element</li>
94-
</ol>
95-
96-
<p>
97-
You can learn more at
98-
<a
99-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
100-
target="_blank"
101-
>MDN Web Docs</a
102-
>.
103-
</p>
104-
105-
<h3>Why should you learn HTML?</h3>
106-
107-
<p>
108-
There are countless reasons for learning the fundamental
109-
language of the web. Here are 5 of them:
110-
</p>
111-
112-
<ul>
113-
<li class="first-li">
114-
To be able to use the fundamental web dev language
115-
</li>
116-
<li>
117-
To hand-craft beautiful websites instead of relying on
118-
tools like Worpress or Wix
119-
</li>
120-
<li>To build web applications</li>
121-
<li>To impress friends</li>
122-
<li>To have fun 😃</li>
123-
</ul>
124-
125-
<p>
126-
Hopefully you learned something new here. See you next time!
127-
</p>
128-
</article>
129-
130-
<aside class="related-posts">
131-
<h4>Related posts</h4>
132-
133-
<ul class="related-items">
134-
<li class="related-post">
135-
<img
136-
src="img/related-1.jpg"
137-
alt="Person programming"
138-
width="75"
139-
height="75"
140-
/>
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>
147-
</li>
148-
<li class="related-post">
149-
<img
150-
src="img/related-2.jpg"
151-
alt="Lightning"
152-
width="75"
153-
height="75"
154-
/>
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>
33+
<div class="post-container">
34+
<article class="post-body">
35+
<header class="post-header">
36+
<h2>The Basic Language of the Web: HTML</h2>
37+
38+
<div class="author-box">
39+
<img
40+
src="img/laura-jones.jpg"
41+
alt="Headshot of Laura Jones"
42+
height="50"
43+
width="50"
44+
/>
45+
46+
<p class="author">
47+
Posted by <strong>Laura Jones</strong> on
48+
Monday, June 21st 2027
49+
</p>
16050
</div>
161-
</li>
162-
<li class="related-post">
51+
16352
<img
164-
src="img/related-3.jpg"
165-
alt="JavaScript code on a screen"
166-
width="75"
167-
height="75"
53+
src="img/post-img.jpg"
54+
alt="HTML code on a screen"
55+
width="500"
56+
height="200"
57+
class="post-img"
16858
/>
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>
175-
</li>
176-
</ul>
177-
</aside>
59+
<button>❤️ Like</button>
60+
</header>
61+
62+
<p>
63+
All modern websites and web applications are built using
64+
three
65+
<em>fundamental</em>
66+
technologies: HTML, CSS and JavaScript. These are the
67+
languages of the web.
68+
</p>
69+
70+
<p>
71+
In this post, let's focus on HTML. We will learn what
72+
HTML is all about, and why you too should learn it.
73+
</p>
74+
75+
<h3>What is HTML?</h3>
76+
<p>
77+
HTML stands for
78+
<strong>H</strong>yper<strong>T</strong>ext
79+
<strong>M</strong>arkup <strong>L</strong>anguage. It's
80+
a markup language that web developers use to structure
81+
and describe the content of a webpage (not a programming
82+
language).
83+
</p>
84+
<p>
85+
HTML consists of elements that describe different types
86+
of content: paragraphs, links, headings, images, video,
87+
etc. Web browsers understand HTML and render HTML code
88+
as websites.
89+
</p>
90+
<p>In HTML, each element is made up of 3 parts:</p>
91+
92+
<ol>
93+
<li class="first-li">The opening tag</li>
94+
<li>The closing tag</li>
95+
<li>The actual element</li>
96+
</ol>
97+
98+
<p>
99+
You can learn more at
100+
<a
101+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
102+
target="_blank"
103+
>MDN Web Docs</a
104+
>.
105+
</p>
106+
107+
<h3>Why should you learn HTML?</h3>
108+
109+
<p>
110+
There are countless reasons for learning the fundamental
111+
language of the web. Here are 5 of them:
112+
</p>
113+
114+
<ul>
115+
<li class="first-li">
116+
To be able to use the fundamental web dev language
117+
</li>
118+
<li>
119+
To hand-craft beautiful websites instead of relying
120+
on tools like Worpress or Wix
121+
</li>
122+
<li>To build web applications</li>
123+
<li>To impress friends</li>
124+
<li>To have fun 😃</li>
125+
</ul>
126+
127+
<p>
128+
Hopefully you learned something new here. See you next
129+
time!
130+
</p>
131+
</article>
132+
133+
<aside class="related-posts">
134+
<h4>Related posts</h4>
135+
136+
<ul class="related-items">
137+
<li class="related-post">
138+
<img
139+
src="img/related-1.jpg"
140+
alt="Person programming"
141+
width="75"
142+
height="75"
143+
/>
144+
<div>
145+
<a href="#" class="related-link"
146+
>How to Learn Web Development</a
147+
>
148+
<p class="related-author">
149+
By Jonas Schmedtmann
150+
</p>
151+
</div>
152+
</li>
153+
<li class="related-post">
154+
<img
155+
src="img/related-2.jpg"
156+
alt="Lightning"
157+
width="75"
158+
height="75"
159+
/>
160+
<div>
161+
<a href="#" class="related-link"
162+
>The Unknown Powers of CSS</a
163+
>
164+
<p class="related-author">By Jim Dillon</p>
165+
</div>
166+
</li>
167+
<li class="related-post">
168+
<img
169+
src="img/related-3.jpg"
170+
alt="JavaScript code on a screen"
171+
width="75"
172+
height="75"
173+
/>
174+
<div>
175+
<a href="#" class="related-link"
176+
>Why JavaScript is Awesome</a
177+
>
178+
<p class="related-author">By Matilda</p>
179+
</div>
180+
</li>
181+
</ul>
182+
</aside>
183+
</div>
178184

179185
<footer>
180186
<p id="copyright" class="copyright text">

‎starter/04-CSS-Layouts/style.css‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ body {
1414
}
1515

1616
.container {
17-
width: 800px;
17+
width: 1200px;
1818
/* margin-left: auto;
1919
margin-right: auto; */
2020
margin: 0 auto;
@@ -296,7 +296,7 @@ nav p {
296296
}
297297

298298
.related-posts {
299-
/* width: 300px; */
299+
flex: 0 0 300px;
300300
}
301301

302302
.related-author {
@@ -314,3 +314,16 @@ nav p {
314314
margin-bottom: 5px;
315315
display: block;
316316
}
317+
318+
.post-container {
319+
display: flex;
320+
gap: 75px;
321+
align-items: flex-start;
322+
margin-bottom: 60px;
323+
}
324+
325+
.post-body {
326+
/* flex-grow: 5; */
327+
flex: 1;
328+
margin-bottom: 0;
329+
}

0 commit comments

Comments
 (0)