Skip to content

Commit e8d8936

Browse files
JenifferGenovesJenifferGenoves
committed
Model box
1 parent 8c5c3ad commit e8d8936

File tree

2 files changed

+188
-136
lines changed

2 files changed

+188
-136
lines changed

‎starter/03-CSS-Fundamentals/index.html

+138-130
Original file line numberDiff line numberDiff line change
@@ -16,143 +16,151 @@ <h5>The Basic Language of the Web: HTML</h5>
1616
<h6>The Basic Language of the Web: HTML</h6>
1717
-->
1818

19-
<header class="main-header">
20-
<h1>📘 The Code Magazine</h1>
19+
<div class="container">
20+
<header class="main-header">
21+
<h1>📘 The Code Magazine</h1>
22+
23+
<nav>
24+
<a href="blog.html">Blog</a>
25+
<a href="#">Challenges</a>
26+
<a href="#">Flexbox</a>
27+
<a href="#">CSS Grid</a>
28+
</nav>
29+
30+
<!--Test paragraphs
31+
<p>Test paragraphs</p> -->
32+
</header>
2133

22-
<nav>
23-
<a href="blog.html">Blog</a>
24-
<a href="#">Challenges</a>
25-
<a href="#">Flexbox</a>
26-
<a href="#">CSS Grid</a>
27-
</nav>
34+
<article>
35+
<header class="post-header">
36+
<h2>The Basic Language of the Web: HTML</h2>
2837

29-
<!--Test paragraphs
30-
<p>Test paragraphs</p> -->
31-
</header>
38+
<img
39+
src="img/laura-jones.jpg"
40+
alt="Headshot of Laura Jones"
41+
height="50"
42+
width="50"
43+
/>
3244

33-
<article>
34-
<header>
35-
<h2>The Basic Language of the Web: HTML</h2>
45+
<p id="author">
46+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
47+
</p>
3648

37-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Headshot of Laura Jones"
40-
height="50"
41-
width="50"
42-
/>
49+
<img
50+
src="img/post-img.jpg"
51+
alt="HTML code on a screen"
52+
width="500"
53+
height="200"
54+
class="post-img"
55+
/>
56+
</header>
4357

44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
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.
4663
</p>
4764

48-
<img
49-
src="img/post-img.jpg"
50-
alt="HTML code on a screen"
51-
width="500"
52-
height="200"
53-
/>
54-
</header>
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>
5569

56-
<p>
57-
All modern websites and web applications are built using three
58-
<em>fundamental</em>
59-
technologies: HTML, CSS and JavaScript. These are the languages of the
60-
web.
61-
</p>
62-
63-
<p>
64-
In this post, let's focus on HTML. We will learn what HTML is all about,
65-
and why you too should learn it.
66-
</p>
67-
68-
<h3>What is HTML?</h3>
69-
<p>
70-
HTML stands for <strong>H</strong>yper<strong>T</strong>ext
71-
<strong>M</strong>arkup <strong>L</strong>anguage. It's a markup
72-
language that web developers use to structure and describe the content
73-
of a webpage (not a programming language).
74-
</p>
75-
<p>
76-
HTML consists of elements that describe different types of content:
77-
paragraphs, links, headings, images, video, etc. Web browsers understand
78-
HTML and render HTML code as websites.
79-
</p>
80-
<p>In HTML, each element is made up of 3 parts:</p>
81-
82-
<ol>
83-
<li class="first-li">The opening tag</li>
84-
<li>The closing tag</li>
85-
<li>The actual element</li>
86-
</ol>
87-
88-
<p>
89-
You can learn more at
90-
<a
91-
href="https://developer.mozilla.org/en-US/docs/Web/HTML"
92-
target="_blank"
93-
>MDN Web Docs</a
94-
>.
95-
</p>
96-
97-
<h3>Why should you learn HTML?</h3>
98-
99-
<p>
100-
There are countless reasons for learning the fundamental language of the
101-
web. Here are 5 of them:
102-
</p>
103-
104-
<ul>
105-
<li class="first-li">
106-
To be able to use the fundamental web dev language
107-
</li>
108-
<li>
109-
To hand-craft beautiful websites instead of relying on tools like
110-
Worpress or Wix
111-
</li>
112-
<li>To build web applications</li>
113-
<li>To impress friends</li>
114-
<li>To have fun 😃</li>
115-
</ul>
116-
117-
<p>Hopefully you learned something new here. See you next time!</p>
118-
</article>
119-
120-
<aside>
121-
<h4>Related posts</h4>
122-
123-
<ul class="related">
124-
<li>
125-
<img
126-
src="img/related-1.jpg"
127-
alt="Person programming"
128-
width="75"
129-
width="75"
130-
/>
131-
<a href="#">How to Learn Web Development</a>
132-
<p class="related-author">By Jonas Schmedtmann</p>
133-
</li>
134-
<li>
135-
<img src="img/related-2.jpg" alt="Lightning" width="75" heigth="75" />
136-
<a href="#">The Unknown Powers of CSS</a>
137-
<p class="related-author">By Jim Dillon</p>
138-
</li>
139-
<li>
140-
<img
141-
src="img/related-3.jpg"
142-
alt="JavaScript code on a screen"
143-
width="75"
144-
height="75"
145-
/>
146-
<a href="#">Why JavaScript is Awesome</a>
147-
<p class="related-author">By Matilda</p>
148-
</li>
149-
</ul>
150-
</aside>
151-
152-
<footer>
153-
<p id="copyright" class="copyright text">
154-
Copyright &copy; 2027 by The Code Magazine.
155-
</p>
156-
</footer>
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>
98+
99+
<h3>Why should you learn HTML?</h3>
100+
101+
<p>
102+
There are countless reasons for learning the fundamental language of
103+
the web. Here are 5 of them:
104+
</p>
105+
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+
width="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+
heigth="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>
158+
159+
<footer>
160+
<p id="copyright" class="copyright text">
161+
Copyright &copy; 2027 by The Code Magazine.
162+
</p>
163+
</footer>
164+
</div>
157165
</body>
158166
</html>

‎starter/03-CSS-Fundamentals/style.css

+50-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,49 @@
1-
/* * {
2-
border-top: 5px solid #1098ad;
1+
* {
2+
/*border-top: 5px solid #1098ad; */
3+
margin: 0;
4+
padding: 0;
35
}
4-
*/
6+
7+
/* PAGE SECTIONS */
58
body {
69
color: #444;
710
font-family: sans-serif;
11+
border-top: 10px solid #1098ad;
12+
position: relative;
813
}
914

15+
.container {
16+
width: 800px;
17+
/* margin-left: auto;
18+
margin-right: auto; */
19+
margin: 0 auto;
20+
}
1021
.main-header {
1122
background-color: #f7f7f7;
1223
/* padding: 20px;
1324
padding-left: 40px;
1425
padding-right: 40px; */
1526
padding: 20px 40px;
27+
margin-bottom: 60px;
28+
height: 80px;
29+
}
30+
31+
nav {
32+
font-size: 18px;
33+
}
34+
35+
.post-header {
36+
margin-bottom: 40px;
1637
}
1738

1839
aside {
1940
background-color: #f7f7f7;
2041
border-top: 5px solid #1098ad;
2142
border-bottom: 5px solid #1098ad;
43+
/* padding-top: 50px;
44+
padding-bottom: 50px; */
45+
padding: 50px 0;
46+
width: 500px;
2247
}
2348

2449
/* h1,
@@ -45,10 +70,13 @@ h1 {
4570

4671
h2 {
4772
font-size: 40px;
73+
margin-bottom: 30px;
4874
}
4975

5076
h3 {
5177
font-size: 30px;
78+
margin-bottom: 20px;
79+
margin-top: 40px;
5280
}
5381

5482
h4 {
@@ -60,10 +88,18 @@ h4 {
6088
p {
6189
font-size: 22px;
6290
line-height: 1.5;
91+
margin-bottom: 15px;
92+
}
93+
94+
ul,
95+
ol {
96+
margin-left: 50px;
97+
margin-bottom: 20px;
6398
}
6499

65100
li {
66101
font-size: 20px;
102+
margin-bottom: 10px;
67103
}
68104

69105
/* footer p {
@@ -115,12 +151,14 @@ li:first-child {
115151

116152
li:last-child {
117153
font-style: italic;
154+
margin-bottom: 0px;
118155
}
119156

157+
/*
120158
li:nth-child(2) {
121-
/*odd- even
122-
color: red; */
123-
}
159+
odd- even
160+
color: red;
161+
}*/
124162

125163
/* Misconception: This won't work */
126164

@@ -168,3 +206,9 @@ footer p {
168206
color: green !important;
169207
}
170208
*/
209+
210+
.post-img {
211+
/* width: 800px; */
212+
width: 100%;
213+
height: auto;
214+
}

0 commit comments

Comments
 (0)