Skip to content

Commit 3721e24

Browse files
jamesacox53jamesacox53
committed
Completed Adding Flexbox to Our Project
1 parent 53fd0af commit 3721e24

24 files changed

+602
-0
lines changed

‎myWork/04-CSS-Layouts/blog.html renamed to ‎myWork/04-CSS-Layouts/Flexbox/blog.html

File renamed without changes.

‎myWork/04-CSS-Layouts/content.txt renamed to ‎myWork/04-CSS-Layouts/Flexbox/content.txt

File renamed without changes.

‎myWork/04-CSS-Layouts/css-grid.html renamed to ‎myWork/04-CSS-Layouts/Flexbox/css-grid.html

File renamed without changes.

‎myWork/04-CSS-Layouts/flexbox.html renamed to ‎myWork/04-CSS-Layouts/Flexbox/flexbox.html

File renamed without changes.

‎myWork/04-CSS-Layouts/images/challenges.jpg renamed to ‎myWork/04-CSS-Layouts/Flexbox/images/challenges.jpg

File renamed without changes.

‎myWork/04-CSS-Layouts/images/laura-jones.jpg renamed to ‎myWork/04-CSS-Layouts/Flexbox/images/laura-jones.jpg

File renamed without changes.

‎myWork/04-CSS-Layouts/images/post-img.jpg renamed to ‎myWork/04-CSS-Layouts/Flexbox/images/post-img.jpg

File renamed without changes.

‎myWork/04-CSS-Layouts/images/related-1.jpg renamed to ‎myWork/04-CSS-Layouts/Flexbox/images/related-1.jpg

File renamed without changes.

‎myWork/04-CSS-Layouts/images/related-2.jpg renamed to ‎myWork/04-CSS-Layouts/Flexbox/images/related-2.jpg

File renamed without changes.

‎myWork/04-CSS-Layouts/images/related-3.jpg renamed to ‎myWork/04-CSS-Layouts/Flexbox/images/related-3.jpg

File renamed without changes.

‎myWork/04-CSS-Layouts/Flexbox/index.html

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>The Basic Language of the Web: HTML</title>
6+
<link href="style.css" rel="stylesheet" />
7+
</head>
8+
9+
<body>
10+
<div class="container">
11+
<header class="main-header clearfix">
12+
<h1 class="title-text">📘The Code Magazine</h1>
13+
14+
<nav class="navigation-bar">
15+
<a href="blog.html" target="_blank">Blog</a>
16+
<a href="#">Challenges</a>
17+
<a href="flexbox.html" target="_blank">Flexbox</a>
18+
<a href="css-grid.html" target="_blank">CSS Grid</a>
19+
</nav>
20+
</header>
21+
22+
<div class="article-content">
23+
<article class="product-article">
24+
<header>
25+
<h2 class="article-header">The Basic Language of the Web: HTML</h2>
26+
27+
<div class="author-box">
28+
<img
29+
class="author-image"
30+
src="images/laura-jones.jpg"
31+
alt="Photo of Laura Jones"
32+
width="50"
33+
/>
34+
35+
<p class="author">
36+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
37+
</p>
38+
</div>
39+
40+
<img
41+
class="article-image"
42+
src="images/post-img.jpg"
43+
alt="HTML code on a screen"
44+
/>
45+
</header>
46+
47+
<p>
48+
All modern websites and web applications are built using three
49+
<em>fundamental</em>
50+
technologies: HTML, CSS and JavaScript. These are the languages of
51+
the web.
52+
</p>
53+
54+
<p>
55+
In this post, let's focus on HTML. We will learn what HTML is all
56+
about, and why you too should learn it.
57+
</p>
58+
59+
<h3 class="article-content-heading">What is HTML?</h3>
60+
61+
<p>
62+
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
63+
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
64+
language that web developers use to structure and describe the
65+
content of a webpage (not a programming language).
66+
</p>
67+
68+
<p>
69+
HTML consists of elements that describe different types of content:
70+
paragraphs, links, headings, images, video, etc. Web browsers
71+
understand HTML and render HTML code as websites.
72+
</p>
73+
74+
<p>In HTML, each element is made up of 3 parts:</p>
75+
76+
<ol class="article-list">
77+
<li>The opening tag</li>
78+
<li>The closing tag</li>
79+
<li>The actual element</li>
80+
</ol>
81+
82+
<p>
83+
You can learn more at the
84+
<a
85+
class="learn-more-at"
86+
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
87+
target="_blank"
88+
>MDN Web Docs</a
89+
>.
90+
</p>
91+
92+
<h3 class="article-content-heading">Why should you learn HTML?</h3>
93+
94+
<p>
95+
There are countless reasons for learning the fundamental language of
96+
the web. Here are 5 of them:
97+
</p>
98+
99+
<ul class="article-list">
100+
<li>To be able to use the fundamental web dev language</li>
101+
<li>
102+
To hand-craft beautiful websites instead of relying on tools like
103+
Worpress or Wix
104+
</li>
105+
<li>To build web applications</li>
106+
<li>To impress friends</li>
107+
<li>To have fun 😃</li>
108+
</ul>
109+
110+
<p>Hopefully you learned something new here. See you next time!</p>
111+
112+
<button class="like-button">❤Like</button>
113+
</article>
114+
115+
<aside class="related-aside">
116+
<h4 class="related-posts-title">Related posts</h4>
117+
<ul class="related">
118+
<li class="related-item">
119+
<img
120+
class="related-article-image"
121+
src="images/related-1.jpg"
122+
alt="Learn Web Development"
123+
width="75"
124+
height="75"
125+
/>
126+
127+
<div>
128+
<a href="#" class="related-article-title"
129+
>How to Learn Web Development</a
130+
>
131+
<p class="related-author">By Jonas Schmedtmann</p>
132+
</div>
133+
</li>
134+
<li class="related-item">
135+
<img
136+
class="related-article-image"
137+
src="images/related-2.jpg"
138+
alt="Lightning Strike"
139+
width="75"
140+
height="75"
141+
/>
142+
143+
<div>
144+
<a href="#" class="related-article-title"
145+
>The Unknown Powers of CSS</a
146+
>
147+
<p class="related-author">By Jim Dillon</p>
148+
</div>
149+
</li>
150+
<li class="related-item">
151+
<img
152+
class="related-article-image"
153+
src="images/related-3.jpg"
154+
alt="Code on Screen"
155+
width="75"
156+
height="75"
157+
/>
158+
159+
<div>
160+
<a href="#" class="related-article-title"
161+
>Why JavaScript is Awesome</a
162+
>
163+
<p class="related-author">By Matilda</p>
164+
</div>
165+
</li>
166+
</ul>
167+
</aside>
168+
169+
<footer class="article-footer">
170+
<p class="copyright">Copyright &copy; 2027 by The Code Magazine.</p>
171+
</footer>
172+
</div>
173+
</div>
174+
</body>
175+
</html>

‎myWork/04-CSS-Layouts/Flexbox/style.css

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
.container {
8+
width: 1200px;
9+
margin: 0 auto;
10+
}
11+
12+
body {
13+
color: #444444;
14+
font-family: sans-serif;
15+
}
16+
17+
.main-header {
18+
background-color: #f7f7f7;
19+
border-top: 5px solid #1098ad;
20+
padding: 10px 20px;
21+
margin-bottom: 15px;
22+
}
23+
24+
.related-aside {
25+
background-color: #f7f7f7;
26+
border-top: 5px solid #1098ad;
27+
border-bottom: 5px solid #1098ad;
28+
padding: 10px 0 0 0;
29+
width: 100%;
30+
margin: 0 auto;
31+
}
32+
33+
.title-text,
34+
.article-header,
35+
.article-content-heading {
36+
color: #1098ad;
37+
}
38+
39+
.title-text {
40+
font-size: 26px;
41+
text-transform: uppercase;
42+
font-style: italic;
43+
}
44+
45+
.article-header {
46+
font-size: 40px;
47+
margin-bottom: 8px;
48+
}
49+
50+
.article-content-heading {
51+
font-size: 22px;
52+
margin-top: 30px;
53+
margin-bottom: 10px;
54+
}
55+
56+
.related-posts-title {
57+
font-size: 18px;
58+
text-transform: uppercase;
59+
text-align: center;
60+
}
61+
62+
p {
63+
font-size: 16px;
64+
line-height: 1.5;
65+
margin-bottom: 10px;
66+
}
67+
68+
.article-list {
69+
margin: 0 25px 5px 25px;
70+
}
71+
72+
li {
73+
font-size: 15px;
74+
margin-bottom: 10px;
75+
}
76+
77+
li:last-child {
78+
margin-bottom: 0;
79+
}
80+
81+
.author {
82+
font-style: italic;
83+
font-size: 14px;
84+
margin-bottom: 0;
85+
}
86+
87+
.copyright {
88+
font-size: 14px;
89+
}
90+
91+
.related-author {
92+
font-size: 14px;
93+
font-weight: bold;
94+
}
95+
96+
.related {
97+
list-style: none;
98+
margin: 0 25px 5px 25px;
99+
}
100+
101+
a:link {
102+
color: #1098ad;
103+
text-decoration: none;
104+
}
105+
106+
a:visited {
107+
color: #1098ad;
108+
}
109+
110+
a:hover {
111+
color: orangered;
112+
font-weight: bold;
113+
text-decoration: underline orangered;
114+
}
115+
116+
a:active {
117+
background-color: black;
118+
font-style: italic;
119+
}
120+
121+
.article-image {
122+
margin-bottom: 5px;
123+
width: 100%;
124+
}
125+
126+
strong {
127+
padding: 0;
128+
}
129+
130+
.article-header {
131+
font-size: 40px;
132+
133+
position: relative;
134+
}
135+
136+
.product-article {
137+
margin-bottom: 20px;
138+
139+
position: relative;
140+
}
141+
142+
.learn-more-at {
143+
padding: 0;
144+
}
145+
146+
.like-button {
147+
font-size: 18px;
148+
padding: 10px;
149+
cursor: pointer;
150+
151+
position: absolute;
152+
bottom: 20px;
153+
right: 0;
154+
}
155+
156+
.title-text::first-letter {
157+
font-style: normal;
158+
}
159+
160+
.article-header::after {
161+
content: "TOP";
162+
background-color: #ffe70e;
163+
font-size: 12px;
164+
font-weight: bold;
165+
color: black;
166+
167+
display: inline-block;
168+
position: absolute;
169+
padding: 3px 7px;
170+
top: 5px;
171+
right: 0;
172+
}
173+
174+
/* Flexbox */
175+
176+
.main-header {
177+
display: flex;
178+
align-items: center;
179+
justify-content: space-between;
180+
}
181+
182+
.navigation-bar a {
183+
margin-right: 20px;
184+
}
185+
186+
.author-box {
187+
display: flex;
188+
align-items: center;
189+
gap: 10px;
190+
margin-bottom: 10px;
191+
}
192+
193+
.author {
194+
line-height: normal;
195+
align-self: center;
196+
}
197+
198+
.related-item {
199+
display: flex;
200+
align-items: center;
201+
gap: 6px;
202+
}
203+
204+
.related-author {
205+
margin: 3px 0 0 0;
206+
font-weight: normal;
207+
font-style: italic;
208+
font-size: 14px;
209+
}
210+
211+
.related-article-title {
212+
font-size: 16px;
213+
font-weight: bold;
214+
font-style: normal;
215+
}

0 commit comments

Comments
 (0)