Skip to content

Commit c97c069

Browse files
jcsmith3jcsmith3
committed
Added style to main project
1 parent cd8d742 commit c97c069

File tree

2 files changed

+199
-73
lines changed

2 files changed

+199
-73
lines changed

‎starter/02-HTML-Fundamentals/blog.css‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
html {
2+
font-family: sans-serif;
3+
width: 100%;
4+
background-color: rgba(255, 255, 255, 0.715);
5+
}
6+
h2,
7+
h3,
8+
h4 {
9+
color: #1098ad;
10+
font-family: "Courier New", Courier, monospace;
11+
}
12+
p,
13+
li {
14+
color: rgba(55, 54, 54, 0.766);
15+
}
16+
h1 {
17+
color: #1098ad;
18+
font-size: 26px;
19+
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
20+
text-transform: uppercase;
21+
font-style: italic;
22+
}
23+
24+
h2 {
25+
font-size: 32px;
26+
}
27+
28+
h3 {
29+
font-size: 28px;
30+
}
31+
32+
h4 {
33+
font-size: 24px;
34+
text-transform: uppercase;
35+
text-align: center;
36+
}
37+
38+
p {
39+
font-size: 18px;
40+
line-height: 1.3;
41+
}
42+
43+
a {
44+
text-decoration: none;
45+
color: #1098ad;
46+
}
47+
48+
a:hover {
49+
text-decoration: underline;
50+
font-weight: 500;
51+
}
52+
53+
a:visited {
54+
color: #1098ad;
55+
}
56+
57+
a:active {
58+
color: red;
59+
font-style: italic;
60+
}
61+
62+
article {
63+
border-bottom: 1px solid rgba(96, 96, 96, 0.149);
64+
}
65+
66+
#post_title {
67+
text-align: center;
68+
}
69+
70+
.main_nav {
71+
width: 100%;
72+
display: flex;
73+
flex-wrap: wrap;
74+
justify-content: center;
75+
}
76+
.main_nav a {
77+
padding: 0 5px;
78+
font-size: 20px;
79+
}
80+
#post_data {
81+
font-style: italic;
82+
font-size: 16px;
83+
}
84+
85+
.content img {
86+
width: 100%;
87+
}
88+
89+
.thumbnail {
90+
width: 75px;
91+
height: 75px;
92+
}
93+
94+
#related_posts {
95+
list-style: none;
96+
}
97+
.post_card {
98+
display: flex;
99+
}
100+
101+
.post_card p {
102+
margin: 0;
103+
padding: 0;
104+
}
105+
106+
#copyright {
107+
font-size: 12px;
108+
color: lightgray;
109+
}

‎starter/02-HTML-Fundamentals/index.html‎

Lines changed: 90 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -4,103 +4,120 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="blog.css" />
78
<title>The Basic Language of the Web: HTML</title>
89
</head>
910
<body>
1011
<header>
11-
<h1>📘 The Code Magazine [DEMO]</h1>
12-
<nav>
12+
<h1>📘 The Code Magazine</h1>
13+
<nav class="main_nav">
1314
<a href="#">Blog</a>
1415
<a href="#">Challenges</a>
1516
<a href="#">Flexbox</a>
1617
<a href="#">Flexbox</a>
1718
</nav>
1819
</header>
1920
<main>
20-
<article>
21-
<section>
22-
<h2>The Basic Language of the Web: HTML</h2>
23-
<img src="./images/laura-jones.jpg" />
24-
<p>Posted by <strong>Laura Jones</strong> on Monday,June 21st 2027</p>
25-
</section>
26-
<section>
27-
<div>
28-
<img src="./images/post-img.jpg" alt="picture of code" />
29-
<p>
30-
All modern websites and web applications are built using three
31-
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These
32-
are the languages of the web.
33-
</p>
34-
<p>
35-
In this post, let's focus on HTML. We will learn what HTML is all
36-
about, and why you too should learn it.
37-
</p>
38-
</div>
39-
<div>
40-
<h2>What is HTML?</h2>
41-
<p>
42-
HTML stands for
43-
<strong>H</strong>yper<strong>T</strong>ext<strong>M</strong>arkup
44-
<strong>L</strong>anguage. It's a markup language that web
45-
developers use to structure and describe the content of a webpage
46-
(not a programming language).
47-
</p>
48-
<p>
49-
HTML consists of elements that describe different types of
50-
content: paragraphs, links, headings, images, video, etc. Web
51-
browsers understand HTML and render HTML code as websites.
52-
</p>
53-
</div>
54-
<div>
21+
<header id="post_header">
22+
<h2 id="post_title">The Basic Language of the Web: HTML</h2>
23+
<img class="thumbnail" src="./images/laura-jones.jpg" />
24+
<p id="post_data">
25+
Posted by <strong>Laura Jones</strong> on Monday,June 21st 2027
26+
</p>
27+
</header>
28+
<section>
29+
<article class="content">
30+
<img src="./images/post-img.jpg" alt="picture of code" />
31+
<p>
32+
All modern websites and web applications are built using three
33+
<em>fundamental</em> technologies: HTML, CSS and JavaScript. These
34+
are the languages of the web.
35+
</p>
36+
<p>
37+
In this post, let's focus on HTML. We will learn what HTML is all
38+
about, and why you too should learn it.
39+
</p>
40+
</article>
41+
<article>
42+
<h3>What is HTML?</h3>
43+
<p>
44+
HTML stands for
45+
<strong>H</strong>yper<strong>T</strong>ext<strong>M</strong>arkup
46+
<strong>L</strong>anguage. It's a markup language that web
47+
developers use to structure and describe the content of a webpage
48+
(not a programming language).
49+
</p>
50+
<p>
51+
HTML consists of elements that describe different types of content:
52+
paragraphs, links, headings, images, video, etc. Web browsers
53+
understand HTML and render HTML code as websites.
54+
</p>
55+
<aside>
5556
<p>In HTML, each element is made up of 3 parts:</p>
5657
<ol>
5758
<li>The opening tag</li>
5859
<li>The closing tag</li>
5960
<li>The actual element</li>
6061
</ol>
6162
<p>You can learn more at the <a href="#">MDN Web Docs</a>.</p>
62-
</div>
63-
<div>
64-
<h2>Why should you learn HTML?</h2>
65-
<p>
66-
There are countless reasons for learning the fundamental language
67-
of the web. Here are 5 of them:
68-
</p>
69-
<ul>
70-
<li>To be able to use the fundamental web dev language</li>
71-
<li>
72-
To hand-craft beautiful websites instead of relying on tools
73-
like Worpress or Wix
74-
</li>
75-
<li>To build web applications</li>
76-
<li>To impress friends</li>
77-
<li>To have fun 😃</li>
78-
</ul>
79-
<p>Hopefully you learned something new here. See you next time!</p>
80-
</div>
81-
</section>
82-
</article>
63+
</aside>
64+
</article>
65+
<article>
66+
<h3>Why should you learn HTML?</h3>
67+
<p>
68+
There are countless reasons for learning the fundamental language of
69+
the web. Here are 5 of them:
70+
</p>
71+
<ul>
72+
<li>To be able to use the fundamental web dev language</li>
73+
<li>
74+
To hand-craft beautiful websites instead of relying on tools like
75+
Worpress or Wix
76+
</li>
77+
<li>To build web applications</li>
78+
<li>To impress friends</li>
79+
<li>To have fun 😃</li>
80+
</ul>
81+
<p>Hopefully you learned something new here. See you next time!</p>
82+
</article>
83+
</section>
8384
<section>
84-
<h3>Related posts</h3>
85-
<ul>
86-
<li>
87-
<img src="./images/related-1.jpg" alt="guy coding" />
88-
<a href="#">How to Learn Web Development</a>
89-
<p>By Jonas Schmedtmann</p>
85+
<h4>Related posts</h4>
86+
<ul id="related_posts">
87+
<li class="post_card">
88+
<img
89+
class="thumbnail"
90+
src="./images/related-1.jpg"
91+
alt="guy coding"
92+
/>
93+
<div>
94+
<a href="#">How to Learn Web Development</a>
95+
<p>By Jonas Schmedtmann</p>
96+
</div>
9097
</li>
91-
<li>
92-
<img src="./images/related-2.jpg" alt="ligtning" />
93-
<a href="#">The Unkown Powers of CSS</a>
94-
<p>By Jim Dillon</p>
98+
<li class="post_card">
99+
<img
100+
class="thumbnail"
101+
src="./images/related-2.jpg"
102+
alt="ligtning"
103+
/>
104+
<div>
105+
<a href="#">The Unkown Powers of CSS</a>
106+
<p>By Jim Dillon</p>
107+
</div>
95108
</li>
96-
<li>
97-
<img src="./images/related-3.jpg" alt="code" />
98-
<a href="#">Why JavaScript is Awesome</a>
99-
<p>By Matilda</p>
109+
<li class="post_card">
110+
<img class="thumbnail" src="./images/related-3.jpg" alt="code" />
111+
<div>
112+
<a href="#">Why JavaScript is Awesome</a>
113+
<p>By Matilda</p>
114+
</div>
100115
</li>
101116
</ul>
102117
</section>
103-
<footer>Copyright &copy; 2027 by The Code Magazine</footer>
118+
<footer>
119+
<p id="copyright">Copyright &copy; 2027 by The Code Magazine</p>
120+
</footer>
104121
</main>
105122
</body>
106123
</html>

0 commit comments

Comments
 (0)