GIMM 300 PA 1.

css/main.css

@@ -120,11 +120,18 @@ text-align: center;
 
 p {
 font-family: 'IBM Plex Sans', sans-serif;
-font-size: 28px;
+font-size: 20px;
 color: #78a1bb;
 text-align: center;
 }
 
+hr {
+  border-top: #78a1bb dashed 4px;
+  max-width: 75%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 iframe[src*=youtube]
 {
 text-align: center;
@@ -158,17 +165,20 @@ background-size: cover;
 }
 
 .navbar-brand {
-font-family: VT323;
+  font-family: VT323;
-font-size: 36px;
+  font-size: 36px;
-src: url("../fonts/VT323-Regular.ttf");
+  color: #FFBC42;
-color: #FFBC42;
 }
 
 .navbar-text {
-font-family: VT323;
+  font-family: VT323;
-font-size: 36px;
+  font-size: 36px;
-src: url("../fonts/VT323-Regular.ttf");
+  color: #78a1bb;
-color: #78a1bb;
+}
+
+.navbar-logo {
+  max-height: 50px;
+  padding-right: 15px;
 }
 
 .card {
@@ -201,6 +211,12 @@ height: 100%;
 color: #FFBC42;
 }
 
+.footer {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+}
+
 @font-face {
   font-family: VT323;
   src: url("https://kforney.github.io/fonts/VT323-Regular.ttf");

index.html

@@ -7,11 +7,6 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <meta property="og:title" content="">
-  <meta property="og:type" content="">
-  <meta property="og:url" content="">
-  <meta property="og:image" content="">
-
   <link rel="manifest" href="site.webmanifest">
   <link rel="apple-touch-icon" href="icon.png">
   <!-- Place favicon.ico in the root directory -->
@@ -31,7 +26,7 @@
   <nav class="navbar navbar-expand-lg navbar-dark sticky-top bg-dark shadow-lg">
     <div class="container-fluid">
       <a class="navbar-brand" href="#">
-        <img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" style="max-height: 50px;padding-right: 15px;">
+        <img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" class="navbar-logo">
           Kaj Forney
       </a>
       <span class="navbar-text">
@@ -40,6 +35,29 @@
     </div>
   </nav>
 
+  <div class="mt-5"></div>
+
+  <div class="container-lg card">
+    <div class="card-body">
+      <div class="row">
+        <div class="col">
+          <h1>Kaj Forney</h1>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <p>Greetings! I am a human who enjoys pixel art, programming, and penguins.</p>
+          <p>Sometimes, I also make games.</p>
+          <p>This site displays a few of the things I've made or helped to make.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-5"></div>
+
+  <hr />
+
   <div class="container-lg">
 
     <div class="row">
@@ -98,10 +116,7 @@
             </div>
             <div class="carousel-item">
               <img src="img/art/dadKaj.png" class="d-block w-100" alt="...">
-              <div class="carousel-caption d-none d-md-block">
+              <div class="carousel-caption d-none d-md-block"></div>
-                <h5 style="color:#283044" class="text-shadow"></h5>
-                <p style="color:#283044" class="text-shadow"></p>
-              </div>
             </div>
             <div class="carousel-item">
               <img src="img/art/symbolSet_fullSet.png" class="d-block w-100" alt="...">
@@ -126,12 +141,12 @@
     <div class="row mt-5">
       <div class="col-sm">
         <div class="youtube-container">
-          <iframe class="youtube-iframe" src="https://www.youtube.com/embed/LaloFVeUvOk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          <iframe class="youtube-iframe" src="https://www.youtube.com/embed/LaloFVeUvOk" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
       </div>
       <div class="col-sm">
         <div class="youtube-container">
-          <iframe class="youtube-iframe" src="https://www.youtube.com/embed/ahQPl9FOX7A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+          <iframe class="youtube-iframe" src="https://www.youtube.com/embed/ahQPl9FOX7A" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         </div>
       </div>
     </div>
@@ -191,80 +206,92 @@
 
   <hr class="mt-5">
 
-  <div class="container-lg">
+  <div class="container-lg mw-25 w-50">
-    <h1>SOCIAL</h1>
-
     <div class="row">
-      <div class="col-sm card">
+      <h1>Other Places I Exist</h1>
-        <div class="card-body">
-          <a href="https://mastodon.gamedev.place/@lunar_penguin">
-            <h2>
-            <i class="fa-brands fa-mastodon"></i>
-            </h2>
-            <h5>Mastodon</h5>
-          </a>
     </div>
-      </div>
+    <div class="row">
-      <div class="col-sm card">
+      <div class="col">
-        <div class="card-body">
+        <a href="https://youtube.com/@lunar_penguin">
-          <a href="https://twitter.com/KajForney">
+          <h2 title="YouTube">
-            <h2>
-              <i class="fa-brands fa-twitter"></i>
-            </h2>
-            <h5>Twitter</h5>
-          </a>
-        </div>
-      </div>
-      <div class="col-sm card">
-        <div class="card-body">
-          <a href="https://www.youtube.com/@lunar_penguin">
-            <h2>
             <i class="fa-brands fa-youtube"></i>
           </h2>
-            <h5>YouTube</h5>
         </a>
       </div>
-      </div>
+      <div class="col">
-      <div class="col-sm card">
-        <div class="card-body">
         <a href="https://twitch.tv/lunar_penguin">
-            <h2>
+          <h2 title="Twitch.tv">
             <i class="fa-brands fa-twitch"></i>
           </h2>
-            <h5>Twitch</h5>
+        </a>
+      </div>
+      <div class="col">
+        <a rel="me" href="https://mastodon.gamedev.place/@lunar_penguin">
+          <h2 title="Mastodon">
+            <i class="fa-brands fa-mastodon"></i>
+          </h2>
+        </a>
+      </div>
+      <div class="col">
+        <a href="https://www.linkedin.com/in/kajforney/">
+          <h2 title="LinkedIn">
+            <i class="fa-brands fa-linkedin"></i>
+          </h2>
         </a>
       </div>
     </div>
-      <div class="col-sm card">
+    <div class="row">
-        <div class="card-body">
+      <div class="col">
         <a href="https://lunarpenguin.itch.io">
-            <h2>
+          <h2 title="Itch.io">
             <i class="fa-brands fa-itch-io"></i>
           </h2>
-            <h5>Itch.io</h5>
         </a>
       </div>
-      </div>
+      <div class="col">
-      <div class="col-sm card">
-        <div class="card-body">
         <a href="https://github.com/kforney">
-            <h2>
+          <h2 title="Github">
             <i class="fa-brands fa-github"></i>
           </h2>
-            <h5>GitHub</h5>
+        </a>
+      </div>
+      <div class="col">
+        <a href="https://artstation.com/lunar_penguin">
+          <h2 title="ArtStation">
+            <i class="fa-brands fa-artstation"></i>
+          </h2>
+        </a>
+      </div>
+      <div class="col">
+        <a href="https://lunar--penguin.tumblr.com">
+          <h2 title="Tumblr">
+            <i class="fa-brands fa-tumblr"></i>
+          </h2>
         </a>
       </div>
     </div>
-    </div>
+    <div class="row">
-
 
     </div>
+  </div>
+
+  <div class="mt-5"></div>
+
+  <footer class="footer bg-dark">
+    <div class="container">
+      <span id="footerText" class="text-muted"></span>
+    </div>
+  </footer>
 
   <script src="js/vendor/modernizr-3.11.2.min.js"></script>
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.min.js"></script>
 
+  <script>
+    document.getElementById("footerText").innerHTML = "Copyright © Kaj Forney 2018-" + new Date(Date.now()).getFullYear();
+  </script>
+
 </body>
 
 </html>