Addad more quotes

Scripts/loadNavBarAndFooter.js

@@ -5,3 +5,9 @@ $.get("footer.html", function (data) {
 $.get("nav.html", function (data) {
     $("#nav-placeholder").replaceWith(data);
 });
+
+$.get("header.html", function (data) {
+    $("#header-placeholder").replaceWith(data);
+    document.getElementById('header-title').innerHTML = document.querySelector('title').textContent;
+});
+

Scripts/quotes.js

@@ -1,19 +1,33 @@
-var answerArray = new Array(
+window.onload = function() {
-    "“A million sorry’s is not equal to 1 thank you.” – Emilia (Re:Zero)",
+    var answerArray = new Array(
-    "“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)",
+        "“A million sorry’s is not equal to 1 thank you.” – Emilia (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)",
+        "“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)",
-    "“Please let me believe in everything you believed in. Let me believe that life is great.” - Kanade Tachibana (Angel Beats!)",
+        "“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)",
-    "“God is so cruel. He stole all my happiness away.” - Yui Nakamura (Angel Beats!)",
+        "“Please let me believe in everything you believed in. Let me believe that life is great.” - Kanade Tachibana (Angel Beats!)",
-    "“I only wanted to love you, to make you proud.” - Yuri Nakamura (Angel Beats!)",
+        "“God is so cruel. He stole all my happiness away.” - Yui Nakamura (Angel Beats!)",
-    "“Why am I myself, and not somebody else.” – Yuu Otosaka (Charlotte)",
+        "“I only wanted to love you, to make you proud.” - Yuri Nakamura (Angel Beats!)",
-    "“Life is something you live only once, right?” – Sala Shane (Charlotte)",
+        "“Even death can’t cure idiocy.” – Yui (Angel Beats!)",
-    "“The scars that you can’t see are the hardest to heal.” – Nao Tomori (Charlotte)",
+        "“Why am I myself, and not somebody else.” – Yuu Otosaka (Charlotte)",
-    "“Life is not a game of luck. If you wanna win, work hard.” – Sora (No Game No Life)",
+        "“Trying to forget someone you love is like trying remember someone you never met.” – Yuu Otosaka (Charlotte)",
-    "“There is more than one way to win a game. You can win without fighting!” – Sora (No Game No Life)",
+        "“It's hard to admit that, you're not as strong as everyone believes you are.” – Yuu Otosaka (Charlotte)",
-    "“There’s no more trusted observer than someone who suspects you.” – Sora (No Game No Life)",
+        "“Life is something you live only once, right?” – Sala Shane (Charlotte)",
-    "“In reality, the least interesting answer is usually the correct one.” – Tet (No Game No Life)",
+        "“You seem happy from the bottom of your heart. That also makes me just as happy.” – Sala Shane (Charlotte)",
-    "“Chess is no different than tic-tac-toe.” – Shiro (No Game No Life)",
+        "“The scars that you can’t see are the hardest to heal.” – Nao Tomori (Charlotte)",
-    "“A temporary defeat is nothing if it leads to ultimate victory!” – Stephanie Dola (No Game No Life)"
+        "“Happiness is not the absence of problems, it's the ability to deal with them.” – Nao Tomori (Charlotte)",
-);
+        "“The scariest about distance is you don't know wether they'll miss you or forget about you.” – Nao Tomori (Charlotte)",
+        "“Do you think I am ok? No... I just learned to be strong and try to hide my real feelings all the time.” – 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 a real war, what fool waits for their enemy’s turn?” – Sora (No Game No Life)",
+        "“We do not stop playing games because we grow old, we grow old because we stop playing.” – 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)",
+        "“Like they say, “make the best of a bad situation.” – Aqua (KonoSuba)",
+        "“This sunlight is my worst enemy after three straight all-nighters.” – Kazuma Satou (KonoSuba)"
+    );
 
-document.getElementById('quotes').innerHTML = answerArray[Math.floor(Math.random() * answerArray.length)];
+    document.getElementById('quotes').innerHTML = answerArray[Math.floor(Math.random() * answerArray.length)];
+    document.getElementById('quotes').classList.add("fade-in");
+}

footer.html

@@ -39,6 +39,6 @@
         </div>
 
     </div>
-    <div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2020 Copyright: Heigl David
+    <div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2021 Copyright: Heigl David
     </div>
 </footer>

header.html

@@ -0,0 +1,8 @@
+<div class="header">
+    <div class="header-image">
+    </div>
+    <div class="header-text">
+        <h1 id="header-title"></h1>
+        <div id="quotes">-</div>
+    </div>
+</div>

index.html

@@ -12,15 +12,12 @@
 
 <body>
     <div class="container-fluid">
-        <div class="header">
+        <!--Header-->
-            <h1>Stone-Red-Code</h1>
+        <div id="header-placeholder"></div>
-            <div id="quotes"></div>
+        <!--end Navigation bar-->
-        </div>
 
         <!--Navigation bar-->
-        <div id="nav-placeholder">
+        <div id="nav-placeholder"></div>
-
-        </div>
         <!--end Navigation bar-->
 
         <!--Main-->
@@ -50,9 +47,7 @@
         <!--end Main-->
 
         <!--Footer-->
-        <div id="footer-placeholder">
+        <div id="footer-placeholder"></div>
-
-        </div>
         <!--end Footer-->
     </div>
 
@@ -62,9 +57,9 @@
         <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
             crossorigin="anonymous"></script>
-        <script src="Scripts/quotes.js"></script>
+            <script src="//code.jquery.com/jquery.min.js"></script>
-        <script src="//code.jquery.com/jquery.min.js"></script>
+            <script src="Scripts/loadNavBarAndFooter.js"></script>
-        <script src="Scripts/loadNavBarAndFooter.js"></script>
+            <script src="Scripts/quotes.js"></script>
 </body>
 
 </html>

nav.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-sm navbar-light sticky-top fg-theme animate">
+<nav class="navbar navbar-expand-sm navbar-light sticky-top fg-theme">
     
     <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>
 

projects.html

@@ -12,15 +12,12 @@
 
 <body>
     <div class="container-fluid">
-        <div class="header">
+        <!--Header-->
-            <h1>Projects</h1>
+        <div id="header-placeholder"></div>
-            <div id="quotes"></div>
+        <!--end Navigation bar-->
-        </div>
 
         <!--Navigation bar-->
-        <div id="nav-placeholder">
+        <div id="nav-placeholder"></div>
-
-        </div>
         <!--end of Navigation bar-->
 
         <!--Main-->
@@ -92,9 +89,7 @@
     <!--end Main-->
 
     <!--Footer-->
-    <div id="footer-placeholder">
+    <div id="footer-placeholder"></div>
-
-    </div>
     <!--end Footer-->
 </div>
 
@@ -104,9 +99,9 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
         crossorigin="anonymous"></script>
-    <script src="Scripts/quotes.js"></script>
+        <script src="//code.jquery.com/jquery.min.js"></script>
-    <script src="//code.jquery.com/jquery.min.js"></script>
+        <script src="Scripts/loadNavBarAndFooter.js"></script>
-    <script src="Scripts/loadNavBarAndFooter.js"></script>
+        <script src="Scripts/quotes.js"></script>
 </body>
 
 </html>

style.css

@@ -5,6 +5,7 @@
 html {
     position: relative;
     min-height: 100%;
+    overflow-x: hidden;
 }
 
 body {
@@ -24,25 +25,45 @@ footer {
 }
 
 .header {
-    background: url("Images/code.png");
     height: 130px;
-    background-size: auto;
+    width: 100%;
-    background-position: top;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
 }
 
+.header-image {
+    background: url("Images/code.png");
+    background-position: top;
+    height: 130px;
+    filter: blur(1px);
+}
+
+.header-text {
+    color: white;
+    position: absolute;
+    text-align: center;
+    z-index: 2;
+    left: 50%;
+    transform: translate(-50%,-140%);
+    white-space:nowrap ;
+  }
+
 #quotes {
+    font-weight: normal;
     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);
+    background-color: rgba(255, 255, 255, 0.12);
     border-radius: 0.3rem;
+    visibility: hidden;
+}
+
+.fade-in
+{
+    visibility:visible !important;
+    animation: fadeIn;
+    animation-duration: 1s;
 }
 
 .fg-theme {
@@ -120,6 +141,11 @@ a:active {
     }
 }
 
+.main{
+    animation: fadeIn;
+    animation-duration: 5;
+}
+
 @media screen and (max-width: 360px) {
     h1 {
         font-size: 30px;
@@ -128,3 +154,9 @@ a:active {
         display: none;
     }
 }
+
+@keyframes fadeIn
+{
+    from{opacity: 0%;}
+    to{opacity: 100%;}
+}