Used media queries to make css better for desktop. Added Java certifi…

…cate
palaster · Mar 18, 2024 · d599271 · d599271
1 parent d939f30
commit d599271
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 4 deletions.
diff --git a/certificates.html b/certificates.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<title>Palaster's Certificates</title>
+	<link rel="stylesheet" type="text/css" href="css/main.css" />
+</head>
+<body>
+	<div id="outer_div">
+		<header id="main_header">
+			<h1>Palaster</h1>
+		</header>
+
+		<nav id="main_nav">
+			<ul>
+				<li><a href="index.html">Home</a></li>
+				<li><a href="projects.html">Projects</a></li>
+                <li><a href="certificates.html">Certificates</a></li>
+				<li>Contact</li>
+			</ul>
+		</nav>
+
+		<section id="main_section">
+			<article>
+				<header>
+					Certificates
+				</header>
+				<div data-iframe-width="150" data-iframe-height="270" data-share-badge-id="4c4c931e-9512-4e65-91ed-912fdd4db840" data-share-badge-host="https://www.credly.com"></div><script type="text/javascript" async src="https://cdn.credly.com/assets/utilities/embed.js"></script>
+				<footer>
+					- Palaster
+				</footer>
+			</article>
+		</section>
+
+		<footer id="main_footer">
+			Copyright Palaster 2020
+		</footer>
+	</div>
+</body>
+</html>
diff --git a/css/main.css b/css/main.css
@@ -29,7 +29,6 @@ body {
 }
 
 #main_nav {
-	border-bottom: 1px solid black;
 	text-align: center;
 }
 
@@ -48,11 +47,11 @@ body {
 	clear: both;
 	text-align: center;
 	padding: 20px;
-	border-top: 1px solid black;
 }
 
 article {
-	border: 1px solid black;
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
 	padding: 20px;
 }
 
@@ -62,4 +61,23 @@ article header {
 
 article footer {
 	text-align: right;
-}
+}
+
+@media only screen and (min-width: 768px) {
+	#main_nav {
+		border-bottom: 1px solid black;
+	}
+
+	#main_section {
+		margin: 30px;
+	}
+
+	#main_footer {
+		border-top: 1px solid black;
+	}
+
+	article {
+		border: 1px solid black;
+		margin-bottom: 15px;
+	}
+} 
diff --git a/index.html b/index.html
@@ -16,6 +16,7 @@ <h1>Palaster</h1>
 			<ul>
 				<li><a href="index.html">Home</a></li>
 				<li><a href="projects.html">Projects</a></li>
+				<li><a href="certificates.html">Certificates</a></li>
 				<li>Contact</li>
 			</ul>
 		</nav>

diff --git a/projects.html b/projects.html
@@ -16,6 +16,7 @@ <h1>Palaster</h1>
 			<ul>
 				<li><a href="index.html">Home</a></li>
 				<li><a href="projects.html">Projects</a></li>
+				<li><a href="certificates.html">Certificates</a></li>
 				<li>Contact</li>
 			</ul>
 		</nav>