From 4d17c72ba98e779ff28b32f8df694432b8ca797a Mon Sep 17 00:00:00 2001
From: Stone-Red-Code <56473591+StoneRed5@users.noreply.github.com>
Date: Tue, 5 Jan 2021 15:59:20 +0100
Subject: [PATCH] Added quotes

Added quotes and footer to the projects page
---
 footer.html   | 44 ++++++++++++++++++++++++++++++++++
 index.html    | 66 +++++++++++++++++----------------------------------
 nav.html      |  4 ++--
 projects.html | 27 +++++++++++++++++----
 quotes.js     | 21 ++++++++++++++++
 style.css     | 22 +++++++++++++++--
 6 files changed, 132 insertions(+), 52 deletions(-)
 create mode 100644 footer.html
 create mode 100644 quotes.js
diff --git a/footer.html b/footer.html
new file mode 100644
index 0000000..3382dfe
--- /dev/null
+++ b/footer.html
@@ -0,0 +1,44 @@
+<footer class="page-footer">
+    <div class="row m-0 p-3 d-flex align-items-center fg-theme">
+        <div class="col">
+            <div>Get in contact:</div>
+        </div>
+        <div class="col d-flex justify-content-end">
+            <div>
+                <a href="http://github.com/Stone-Red-Code"><img
+                        src="https://img.icons8.com/ios-glyphs/30/000000/github.png" /></a>
+                <a href="http://discord.com/users/374173830819872789"><img
+                        src="https://img.icons8.com/ios-glyphs/30/000000/discord-logo.png" /></a>
+            </div>
+        </div>
+    </div>
+    <div class="row m-0 p-3 justify-content-start bg-dark ">
+        <div class="col col-sm-4">
+            <h3>About me</h3>
+            <p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. A quia nihil
+                fugit<br>
+                repellendus, aut officia libero. Magnam nobis, cumque sint ea laudantium sequi illum saepe
+                harum<br>
+                voluptas excepturi aspernatur eveniet?</p>
+        </div>
+        <div class="col-sm-4">
+            <h3>Languages & Tools:</h3>
+            <a href="https://docs.microsoft.com/en-us/dotnet/csharp"><img
+                    src="https://img.icons8.com/color/50/000000/c-sharp-logo.png" height="40" /></a>
+            <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5"><img
+                    src="https://img.icons8.com/color/48/000000/html-5.png" height="40" /></a>
+            <a href="https://visualstudio.microsoft.com/vs"><img
+                    src="https://img.icons8.com/fluent/50/000000/visual-studio-2019.png" height="40" /></a>
+            <a href="https://code.visualstudio.com/"><img
+                    src="https://img.icons8.com/fluent/48/000000/visual-studio-code-2019.png" height="40" /></a>
+        </div>
+        <div class="col-sm-4">
+            <h3>Links</h3>
+            <div><a href="https://icons8.com">Icons8</a></div>
+            <div><a href="https://github.com/anuraghazra/github-readme-stats">GitHub-Readme-Stats</a></div>
+        </div>
+
+    </div>
+    <div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2020 Copyright: Heigl David
+    </div>
+</footer>
\ No newline at end of file
diff --git a/index.html b/index.html
index 7d6c52d..afcd1ef 100644
--- a/index.html
+++ b/index.html
@@ -8,14 +8,14 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
-
 </head>
 
 <body>
     <div class="container-fluid">
 
-        <div class="jumbotron-fluid header d-flex justify-content-center align-items-center">
+        <div class="header">
             <h1>Stone-Red-Code</h1>
+            <div id="quotes"></div>
         </div>
 
         <!--Navigation bar-->
@@ -36,18 +36,20 @@
         <div class="container main">
             <div class="row">
                 <div class="col-sm-8 d-flex justify-content-start">
-               <a href="http://github.com/Stone-Red-Code"><img class="stats" src="https://github-readme-stats.vercel.app/api?username=Stone-Red-Code&show_icons=true&bg_color=40444B&theme=dark&hide_border=true&count_private=true"></a>
-            </div>
-            <div class="col d-flex justify-content-start">
-               <a href="http://github.com/Stone-Red-Code"><img class="mostUsedLangs" src="https://github-readme-stats.vercel.app/api/top-langs/?username=Stone-Red-Code&bg_color=40444B&theme=dark&hide_border=true)](https://github.com/anuraghazra/github-readme-stats"></a>
-            </div>
+                    <a href="http://github.com/Stone-Red-Code"><img class="stats"
+                            src="https://github-readme-stats.vercel.app/api?username=Stone-Red-Code&show_icons=true&bg_color=40444B&theme=dark&hide_border=true&count_private=true"></a>
+                </div>
+                <div class="col d-flex justify-content-start">
+                    <a href="http://github.com/Stone-Red-Code"><img class="mostUsedLangs"
+                            src="https://github-readme-stats.vercel.app/api/top-langs/?username=Stone-Red-Code&bg_color=40444B&theme=dark&hide_border=true)](https://github.com/anuraghazra/github-readme-stats"></a>
+                </div>
             </div>
             <div class="row">
                 <div class="col">
                     <div class="jumbotron">
                         <h2>About this site</h2>
                         <p>This site is not finished and it's still being worked on.<br>
-                            Keep in mind, some things here are just placeholders and will be replaced or removed.
+                            Keep in mind, some things here are just placeholders and will be eventually replaced or removed.<br>
                             On this page I will post all my current projects and updates.
                         </p>
                     </div>
@@ -56,50 +58,26 @@
         </div>
         <!--end Main-->
 
-
         <!--Footer-->
-        <footer class="page-footer">
-            <div class="row m-0 p-3 d-flex align-items-center fg-theme">
-                    <div class="col">
-                        <div>Get in contact:</div>
-                    </div>
-                    <div class="col d-flex justify-content-end">
-                        <div>
-                            <a href="http://github.com/Stone-Red-Code"><img src="https://img.icons8.com/ios-glyphs/30/000000/github.png"/></a>
-                            <a href="http://discord.com/users/374173830819872789"><img src="https://img.icons8.com/ios-glyphs/30/000000/discord-logo.png"/></a>
-                        </div>
-                    </div>
-            </div>
-            <div class="row m-0 p-3 justify-content-start bg-dark ">
-                <div class="col col-sm-4">
-                    <h3>About me</h3>
-                    <p class="text-white-50">Lorem ipsum dolor sit amet consectetur adipisicing elit. A quia nihil fugit<br>
-                        repellendus, aut officia libero. Magnam nobis, cumque sint ea laudantium sequi illum saepe harum<br>
-                        voluptas excepturi aspernatur eveniet?</p>
-                </div>
-                <div class="col-sm-4">
-                    <h3>Languages & Tools:</h3>
-                    <a href="https://docs.microsoft.com/en-us/dotnet/csharp"><img src="https://img.icons8.com/color/50/000000/c-sharp-logo.png" height="40"/></a>
-                    <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5"><img src="https://img.icons8.com/color/48/000000/html-5.png" height="40"/></a>
-                    <a href="https://visualstudio.microsoft.com/vs"><img src="https://img.icons8.com/fluent/50/000000/visual-studio-2019.png" height="40"/></a>
-                    <a href="https://code.visualstudio.com/"><img src="https://img.icons8.com/fluent/48/000000/visual-studio-code-2019.png" height="40"/></a>
-                </div>
-                <div class="col-sm-4">
-                    <h3>Links</h3>
-                    <div><a href="https://icons8.com">Icons8</a></div>
-                    <div><a href="https://github.com/anuraghazra/github-readme-stats">GitHub-Readme-Stats</a></div>
-                </div>
-                
-            </div>
-            <div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2020 Copyright: Heigl David</div>
-        </footer>
+        <div id="footer-placeholder">
+
+        </div>
+
+        <script src="//code.jquery.com/jquery.min.js"></script>
+        <script>
+            $.get("footer.html", function (data) {
+                $("#footer-placeholder").replaceWith(data);
+            });
+        </script>
         <!--end Footer-->
+
         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
             integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
             crossorigin="anonymous"></script>
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
             crossorigin="anonymous"></script>
+        <script src="quotes.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/nav.html b/nav.html
index 47f9522..5879949 100644
--- a/nav.html
+++ b/nav.html
@@ -1,6 +1,6 @@
-<nav class="navbar navbar-expand-sm navbar-light sticky-top fg-theme">
+<nav class="navbar navbar-expand-sm navbar-light sticky-top fg-theme animate">
     
-     <a class="navbar-brand" href="http://github.com/Stone-Red-Code"><img class="rounded" src="http://github.com/Stone-Red-Code.png" height="45"></a>
+    <a class="navbar-brand" href="http://github.com/Stone-Red-Code"><img class="rounded" src="http://github.com/Stone-Red-Code.png" height="45"></a>
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
         <span class="navbar-toggler-icon"></span>
diff --git a/projects.html b/projects.html
index 9911e65..642a5f6 100644
--- a/projects.html
+++ b/projects.html
@@ -8,12 +8,14 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <link rel="stylesheet" href="style.css">
+    <!--<link rel="stylesheet" href="animations.css">-->
 </head>
 
 <body>
     <div class="container-fluid">
-        <div class="jumbotron-fluid header d-flex justify-content-center align-items-center">
+        <div class="header">
             <h1>Projects</h1>
+            <div id="quotes"></div>
         </div>
 
         <!--Navigation bar-->
@@ -29,12 +31,13 @@
         </script>
         <!--end of Navigation bar-->
 
+        <!--Main-->
         <div class="container main">
             <div class="row">
                 <div class="col">
                     <div class="jumbotron p-5">
                         <h2>Helfer V4</h2>
-                        <p>Helfer allows you to improve the looks of your Desktop! You can add useful elements to your
+                        <p>Helfer allows you to improve the looks of your Desktop. You can add useful elements to your
                             desktop like a clock, a audio visualizer or even your own mods!</p>
                         <ul style="list-style-type: none; padding: 0; margin: 0;">
                             <li><a href="https://sites.google.com/view/helfer-desktop">Website</a></li>
@@ -74,7 +77,8 @@
                         <h2>SimpleWinformsAudioVisualizer</h2>
                         <p>This is a small and simple side project i made. It displays an audio spectrum based on the system sounds.</p>
                         <ul style="list-style-type: none; padding: 0; margin: 0;">
-                            <li><a href="https://github.com/Stone-Red-Code/SimpleWinformsAudioVisualizer">GitHub</a></li>
+                            <li><a href="https://github.com/Stone-Red-Code/SimpleWinformsAudioVisualizer">GitHub</a>
+                            </li>
                         </ul>
                     </div>
                 </div>
@@ -84,7 +88,8 @@
                 <div class="col">
                     <div class="jumbotron p-5">
                         <h2>AutoBackup</h2>
-                        <p>AutoBackup is backup software that backs up your specific folders at specific time intervals.</p>
+                        <p>AutoBackup is backup software that backs up your files at specific time intervals.
+                        </p>
                         <ul style="list-style-type: none; padding: 0; margin: 0;">
                             <li><a href="https://github.com/Stone-Red-Code/AutoBackup">GitHub</a></li>
                         </ul>
@@ -93,7 +98,20 @@
             </div>
         </div>
     </div>
+    <!--end Main-->
 
+    <!--Footer-->
+    <div id="footer-placeholder">
+
+    </div>
+
+    <script src="//code.jquery.com/jquery.min.js"></script>
+    <script>
+        $.get("footer.html", function (data) {
+            $("#footer-placeholder").replaceWith(data);
+        });
+    </script>
+    <!--end Footer-->
 
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
@@ -101,6 +119,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
         crossorigin="anonymous"></script>
+    <script src="quotes.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/quotes.js b/quotes.js
new file mode 100644
index 0000000..0bd762d
--- /dev/null
+++ b/quotes.js
@@ -0,0 +1,21 @@
+var answerArray = new Array(
+    "“A million sorry’s is not equal to 1 thank you.” – Emilia (Re:Zero)",
+    "“When you said that you hate yourself, it made me want to tell you all the wonderful things I know about you.” – Rem (Re:Zero)",
+    "“No matter what happens, even when it looks like you’re gonna lose, when no one else believes in you, when you don’t believe in your self, I will believe!” – Rem (Re:Zero)",
+    "“Please let me believe in everything you believed in. Let me believe that life is great.” - Kanade Tachibana (Angel Beats!)",
+    "“God is so cruel. He stole all my happiness away.” - Yui Nakamura (Angel Beats!)",
+    "“I only wanted to love you, to make you proud.” - Yuri Nakamura (Angel Beats!)",
+    "“Why am I myself, and not somebody else.” – Yuu Otosaka (Charlotte)",
+    "“Life is something you live only once, right?” – Sala Shane (Charlotte)",
+    "“The scars that you can’t see are the hardest to heal.” – Nao Tomori (Charlotte)",
+    "“Life is not a game of luck. If you wanna win, work hard.” – Sora (No Game No Life)",
+    "“There is more than one way to win a game. You can win without fighting!” – Sora (No Game No Life)",
+    "“There’s no more trusted observer than someone who suspects you.” – Sora (No Game No Life)",
+    "“In reality, the least interesting answer is usually the correct one.” – Tet (No Game No Life)",
+    "“Chess is no different than tic-tac-toe.” – Shiro (No Game No Life)",
+    "“A temporary defeat is nothing if it leads to ultimate victory!” – Stephanie Dola (No Game No Life)"
+);
+
+window.onload = function getAnswer() {
+    document.getElementById('quotes').innerHTML = answerArray[Math.floor(Math.random() * answerArray.length)];
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 165a44b..8b7e9dd 100644
--- a/style.css
+++ b/style.css
@@ -25,11 +25,26 @@ footer {
 
 .header {
     background: url("Images/code.png");
-    height: 100px;
+    height: 130px;
     background-size: auto;
     background-position: top;
+    display: flex;
+	flex-direction: column;
+    align-items:center;
+    justify-content: center;
 }
 
+#quotes {
+    margin-top: -0.4rem;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    padding: 0.0rem 0.2rem 0.1rem 0.2rem;
+    color: white;
+    font-style:italic;
+    background-color: rgba(99, 99, 99, 0.486);
+    border-radius: 0.3rem;
+} 
+
 .fg-theme {
     background-color: var(--fg-theme);
 }
@@ -100,6 +115,9 @@ a:active {
     .stats {
         display: none;
     }
+    #quotes {
+        display: none;
+    }
 }
 
 @media screen and (max-width: 360px) {
@@ -109,4 +127,4 @@ a:active {
     .mostUsedLangs {
         display: none;
     }
-}
\ No newline at end of file
+}
