did moar stuff

Abernachy · Abernachy · commit d6b9e47a017e · 2022-01-17T14:39:22.000-05:00
diff --git a/projectfolder/02-HTML-Fundamentals/index.html b/projectfolder/02-HTML-Fundamentals/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<title>The Basic Langauge of The Web: HTML</title>
+		<title class="article-title">The Basic Language of The Web: HTML</title>
 		<!-- Another CSS option is the style element and declare your CSS in there.  This can work, but if you have a lot of CSS code, the html file becomes a longigated pain in the ass
 		<style>
 			h1 {
@@ -14,7 +14,7 @@
 	</head>
 	<body>
 		<!-- Comment Block, this his how you do comments in html-->
-		<header>
+		<header class="main-header">
 			<!-- We can do inline CSS style like below
 				<h1 style="color: blue">	
 					But we dont want do this
@@ -33,7 +33,7 @@ <h1>📘 The Code Magazine</h1>
 			<header>
 				<h2>The Basic Langauge of The Web: HTML</h2>
 				<img src="./imgs/laura-jones.jpg" src="the person who wrote this" width="50" height="50" />
-				<p>Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027</p>
+				<p id="author">Posted by <strong>Laura Jones </strong> on Monday, June 21st 2027</p>
 				<br />
 
 				<img src="./imgs/post-img.jpg" alt="This is the voice of Satan" width="500" height="200" />
@@ -79,29 +79,31 @@ <h3>Why should you learn HTML</h3>
 			<p>Hopefully you learned something new here. See you next time!</p>
 		</article>
 		<!--- Aside element is used for secondary information designed to compliment information-->
-		<asie>
-			<h3><strong>Related Post</strong></h3>
-			<ul>
+		<aside class="related-aside">
+			<h4><strong>Related Posts</strong></h4>
+			<ul class="related-list">
 				<li>
 					<img src="imgs/related-1.jpg" alt="How to Learn Web Development" height="50" width="50" />
 					<a href="#"> How to Learn Web Development</a>
-					<p>By Jonas Schmeltmann</p>
+					<p class="related-author">By Jonas Schmeltmann</p>
 				</li>
 				<br />
 				<li>
 					<img src="imgs/related-2.jpg" alt="Unknown Power of CSS" height="50" width="50" />
 					<a href="#"> The Uknown Power of CSS</a>
-					<p>By Jonas Schmeltmann</p>
+					<p class="related-author">By Jonas Schmeltmann</p>
 				</li>
 				<br />
 				<li>
 					<img src="imgs/related-3.jpg" alt="Why Javascript is Awsome" height="50" width="50" />
 					<a href="#"> Why Javascript is Awsome</a>
-					<p>By Jonas Schmeltmann</p>
+					<p class="related-author">By Jonas Schmeltmann</p>
 				</li>
 			</ul>
-		</asie>
+		</aside>
 
-		<footer>Copyright &copy 2017 by The Code Magazine</footer>
+		<footer>
+			<p id="copyright">Copyright &copy 2017 by The Code Magazine</p>
+		</footer>
 	</body>
 </html>
diff --git a/projectfolder/02-HTML-Fundamentals/style.css b/projectfolder/02-HTML-Fundamentals/style.css
@@ -1,3 +1,79 @@
+h1,
+h2,
+h3,
+h4,
+p,
+li {
+	font-family: sans-serif;
+	color: #444;
+}
+
+h1,
+h2,
+h3 {
+	color: #1098ad;
+}
+
 h1 {
-	color: blue;
+	font-size: 26px;
+	text-transform: uppercase;
+	font-style: italic;
+}
+
+h2 {
+	font-size: 40px;
+	border-bottom: 5px solid #1098ad;
+}
+
+h3 {
+	font-size: 30px;
+}
+h4 {
+	font-size: 20px;
+	text-transform: uppercase;
+	text-align: center;
+}
+p {
+	font-size: 22px;
+	line-height: 1.5;
+}
+
+li {
+	font-size: 20px;
+}
+
+/* footer p {
+	font-size: 16px;
+} */
+/* article header p {
+	font-style: italic;
+} */
+
+#author {
+	font-style: italic;
+	font-size: 18px;
+}
+
+#copyright {
+	font-style: italic;
+	font-size: 16px;
+}
+
+.related-author {
+	font-size: 18px;
+	font-weight: bold;
+}
+
+.related-list p {
+	list-style: none;
+}
+
+.main-header {
+	background-color: #f7f7f7;
+}
+
+aside {
+	background-color: #f7f7f7;
+	border-top: 5px solid #1098ad;
+	border-bottom: 5px solid #1098ad;
 }
