Skip to content

Commit 7ae5240

Browse files
haivn-vibhaivn-vib
committed
flex box
1 parent 10de6bc commit 7ae5240

File tree

3 files changed

+177
-124
lines changed

3 files changed

+177
-124
lines changed

‎.vscode/settings.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5501
3+
}

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

Lines changed: 128 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -30,132 +30,140 @@ <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-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Headshot of Laura Jones"
40-
height="50"
41-
width="50"
42-
/>
43-
44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
46-
</p>
47-
48-
<img
49-
src="img/post-img.jpg"
50-
alt="HTML code on a screen"
51-
width="500"
52-
height="200"
53-
class="post-img"
54-
/>
55-
<button>❤️ Like</button>
56-
</header>
57-
58-
<p>
59-
All modern websites and web applications are built using three
60-
<em>fundamental</em>
61-
technologies: HTML, CSS and JavaScript. These are the languages of the
62-
web.
63-
</p>
33+
<div class="row">
34+
<article>
35+
<header class="post-header">
36+
<h2>The Basic Language of the Web: HTML</h2>
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 id="author">
46+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
47+
</p>
48+
</div>
6449

65-
<p>
66-
In this post, let's focus on HTML. We will learn what HTML is all
67-
about, and why you too should learn it.
68-
</p>
50+
<img
51+
src="img/post-img.jpg"
52+
alt="HTML code on a screen"
53+
width="500"
54+
height="200"
55+
class="post-img"
56+
/>
57+
<button>❤️ Like</button>
58+
</header>
59+
60+
<p>
61+
All modern websites and web applications are built using three
62+
<em>fundamental</em>
63+
technologies: HTML, CSS and JavaScript. These are the languages of
64+
the web.
65+
</p>
6966

70-
<h3>What is HTML?</h3>
71-
<p>
72-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
73-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
74-
language that web developers use to structure and describe the content
75-
of a webpage (not a programming language).
76-
</p>
77-
<p>
78-
HTML consists of elements that describe different types of content:
79-
paragraphs, links, headings, images, video, etc. Web browsers
80-
understand HTML and render HTML code as websites.
81-
</p>
82-
<p>In HTML, each element is made up of 3 parts:</p>
83-
84-
<ol>
85-
<li class="first-li">The opening tag</li>
86-
<li>The closing tag</li>
87-
<li>The actual element</li>
88-
</ol>
89-
90-
<p>
91-
You can learn more at
92-
<a
93-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
94-
target="_blank"
95-
>MDN Web Docs</a
96-
>.
97-
</p>
67+
<p>
68+
In this post, let's focus on HTML. We will learn what HTML is all
69+
about, and why you too should learn it.
70+
</p>
9871

99-
<h3>Why should you learn HTML?</h3>
72+
<h3>What is HTML?</h3>
73+
<p>
74+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
75+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
76+
language that web developers use to structure and describe the
77+
content of a webpage (not a programming language).
78+
</p>
79+
<p>
80+
HTML consists of elements that describe different types of content:
81+
paragraphs, links, headings, images, video, etc. Web browsers
82+
understand HTML and render HTML code as websites.
83+
</p>
84+
<p>In HTML, each element is made up of 3 parts:</p>
85+
86+
<ol>
87+
<li class="first-li">The opening tag</li>
88+
<li>The closing tag</li>
89+
<li>The actual element</li>
90+
</ol>
91+
92+
<p>
93+
You can learn more at
94+
<a
95+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
96+
target="_blank"
97+
>MDN Web Docs</a
98+
>.
99+
</p>
100100

101-
<p>
102-
There are countless reasons for learning the fundamental language of
103-
the web. Here are 5 of them:
104-
</p>
101+
<h3>Why should you learn HTML?</h3>
105102

106-
<ul>
107-
<li class="first-li">
108-
To be able to use the fundamental web dev language
109-
</li>
110-
<li>
111-
To hand-craft beautiful websites instead of relying on tools like
112-
Worpress or Wix
113-
</li>
114-
<li>To build web applications</li>
115-
<li>To impress friends</li>
116-
<li>To have fun 😃</li>
117-
</ul>
118-
119-
<p>Hopefully you learned something new here. See you next time!</p>
120-
</article>
121-
122-
<aside>
123-
<h4>Related posts</h4>
124-
125-
<ul class="related">
126-
<li>
127-
<img
128-
src="img/related-1.jpg"
129-
alt="Person programming"
130-
width="75"
131-
height="75"
132-
/>
133-
<a href="#">How to Learn Web Development</a>
134-
<p class="related-author">By Jonas Schmedtmann</p>
135-
</li>
136-
<li>
137-
<img
138-
src="img/related-2.jpg"
139-
alt="Lightning"
140-
width="75"
141-
height="75"
142-
/>
143-
<a href="#">The Unknown Powers of CSS</a>
144-
<p class="related-author">By Jim Dillon</p>
145-
</li>
146-
<li>
147-
<img
148-
src="img/related-3.jpg"
149-
alt="JavaScript code on a screen"
150-
width="75"
151-
height="75"
152-
/>
153-
<a href="#">Why JavaScript is Awesome</a>
154-
<p class="related-author">By Matilda</p>
155-
</li>
156-
</ul>
157-
</aside>
103+
<p>
104+
There are countless reasons for learning the fundamental language of
105+
the web. Here are 5 of them:
106+
</p>
158107

108+
<ul>
109+
<li class="first-li">
110+
To be able to use the fundamental web dev language
111+
</li>
112+
<li>
113+
To hand-craft beautiful websites instead of relying on tools like
114+
Worpress or Wix
115+
</li>
116+
<li>To build web applications</li>
117+
<li>To impress friends</li>
118+
<li>To have fun 😃</li>
119+
</ul>
120+
121+
<p>Hopefully you learned something new here. See you next time!</p>
122+
</article>
123+
124+
<aside>
125+
<h4>Related posts</h4>
126+
127+
<ul class="related">
128+
<li class="related-post">
129+
<img
130+
src="img/related-1.jpg"
131+
alt="Person programming"
132+
width="75"
133+
height="75"
134+
/>
135+
<div>
136+
<a href="#">How to Learn Web Development</a>
137+
<p class="related-author">By Jonas Schmedtmann</p>
138+
</div>
139+
</li>
140+
<li class="related-post">
141+
<img
142+
src="img/related-2.jpg"
143+
alt="Lightning"
144+
width="75"
145+
height="75"
146+
/>
147+
<div>
148+
<a href="#">The Unknown Powers of CSS</a>
149+
<p class="related-author">By Jim Dillon</p>
150+
</div>
151+
</li>
152+
<li class="related-post">
153+
<img
154+
src="img/related-3.jpg"
155+
alt="JavaScript code on a screen"
156+
width="75"
157+
height="75"
158+
/>
159+
<div>
160+
<a href="#">Why JavaScript is Awesome</a>
161+
<p class="related-author">By Matilda</p>
162+
</div>
163+
</li>
164+
</ul>
165+
</aside>
166+
</div>
159167
<footer>
160168
<p id="copyright" class="copyright text">
161169
Copyright &copy; 2027 by The Code Magazine.

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

Lines changed: 46 additions & 4 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;
@@ -28,6 +28,9 @@ body {
2828
padding: 20px 40px;
2929
margin-bottom: 60px;
3030
/* height: 80px; */
31+
display: flex;
32+
justify-content: space-between;
33+
align-items: center;
3134
}
3235

3336
nav {
@@ -87,7 +90,6 @@ h4 {
8790
p {
8891
font-size: 22px;
8992
line-height: 1.5;
90-
margin-bottom: 15px;
9193
}
9294

9395
ul,
@@ -197,7 +199,6 @@ nav a:link {
197199
display: block; */
198200

199201
margin-right: 30px;
200-
margin-top: 10px;
201202
display: inline-block;
202203
}
203204

@@ -232,7 +233,7 @@ h2 {
232233
}
233234

234235
h2::before {
235-
content: "TOP";
236+
content: 'TOP';
236237
background-color: #ffe70e;
237238
color: #444;
238239
font-size: 16px;
@@ -265,3 +266,44 @@ footer p {
265266
nav p {
266267
font-size: 18px;
267268
} */
269+
270+
.author-box {
271+
display: flex;
272+
align-items: center;
273+
gap: 15px;
274+
margin-bottom: 15px;
275+
}
276+
277+
.related-post {
278+
display: flex;
279+
align-items: center;
280+
gap: 15px;
281+
}
282+
283+
.related-author {
284+
margin-top: 15px;
285+
}
286+
.row {
287+
display: flex;
288+
gap: 75px;
289+
align-items: flex-start;
290+
}
291+
292+
aside {
293+
flex: 0 0 300px;
294+
padding: 0 15px;
295+
}
296+
article {
297+
flex: 1;
298+
}
299+
300+
ul,
301+
ol {
302+
margin-bottom: 0;
303+
margin-left: 0;
304+
}
305+
306+
ul,
307+
ol {
308+
list-style-position: inside;
309+
}

0 commit comments

Comments
 (0)