Added "fun" page

Images/fun/DVD_logo.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 210 107"><title>DVD logo</title><path d="M118.895,20.346c0,0-13.743,16.922-13.04,18.001c0.975-1.079-4.934-18.186-4.934-18.186s-1.233-3.597-5.102-15.387H81.81H47.812H22.175l-2.56,11.068h19.299h4.579c12.415,0,19.995,5.132,17.878,14.225c-2.287,9.901-13.123,14.128-24.665,14.128H32.39l5.552-24.208H18.647l-8.192,35.368h27.398c20.612,0,40.166-11.067,43.692-25.288c0.617-2.614,0.53-9.185-1.054-13.053c0-0.093-0.091-0.271-0.178-0.537c-0.087-0.093-0.178-0.722,0.178-0.814c0.172-0.092,0.525,0.271,0.525,0.358c0,0,0.179,0.456,0.351,0.813l17.44,50.315l44.404-51.216l18.761-0.092h4.579c12.424,0,20.09,5.132,17.969,14.225c-2.29,9.901-13.205,14.128-24.75,14.128h-4.405L161,19.987h-19.287l-8.198,35.368h27.398c20.611,0,40.343-11.067,43.604-25.288c3.347-14.225-11.101-25.293-31.89-25.293h-18.143h-22.727C120.923,17.823,118.895,20.346,118.895,20.346L118.895,20.346z"/><path d="M99.424,67.329C47.281,67.329,5,73.449,5,81.012c0,7.558,42.281,13.678,94.424,13.678c52.239,0,94.524-6.12,94.524-13.678C193.949,73.449,151.664,67.329,99.424,67.329z M96.078,85.873c-11.98,0-21.58-2.072-21.58-4.595c0-2.523,9.599-4.59,21.58-4.59c11.888,0,21.498,2.066,21.498,4.59C117.576,83.801,107.966,85.873,96.078,85.873z"/><polygon points="182.843,94.635 182.843,93.653 177.098,93.653 176.859,94.635 179.251,94.635 178.286,102.226 179.49,102.226 180.445,94.635 182.843,94.635"/><polygon points="191.453,102.226 191.453,93.653 190.504,93.653 187.384,99.534 185.968,93.653 185.013,93.653 182.36,102.226 183.337,102.226 185.475,95.617 186.917,102.226 190.276,95.617 190.504,102.226 191.453,102.226"/></svg>

Scripts/fun.js

@@ -0,0 +1,47 @@
+let speed = 20;
+let scale = 0.15;
+let canvas;
+let ctx;
+
+let image = {
+    x: -4,
+    y: -4,
+    xspeed: 5,
+    yspeed: 5,
+    img: new Image()
+};
+
+(function main() {
+    canvas = document.getElementById("mainpanel");
+    ctx = canvas.getContext("2d");
+    image.img.src = 'http://github.com/Stone-Red-Code.png';
+    canvas.style.width = '100%';
+    canvas.style.height = '100%';
+    canvas.width = 1000;
+    canvas.height = 500;
+    update();
+})();
+
+function update() {
+    setTimeout(() => {
+        ctx.fillStyle = 'transparent';
+        ctx.fillRect(image.x, image.y, image.img.width * scale, image.img.height * scale);
+        ctx.drawImage(image.img, image.x, image.y, image.img.width * scale, image.img.height * scale);
+
+        image.x += image.xspeed;
+        image.y += image.yspeed;
+
+        checkCollision();
+        update();
+    }, speed)
+}
+
+function checkCollision() {
+    if (image.x + image.img.width * scale >= canvas.width || image.x <= 0) {
+        image.xspeed *= -1;
+    }
+
+    if (image.y + image.img.height * scale >= canvas.height || image.y <= 0) {
+        image.yspeed *= -1;
+    }
+}

Scripts/quotes.js

@@ -1,5 +1,5 @@
-window.onload = function() {
-    var answerArray = new Array(
+
+    let 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)",
@@ -30,4 +30,3 @@ window.onload = function() {
     
     document.getElementById('quotes').innerHTML = answerArray[Math.floor(Math.random() * answerArray.length)];
     document.getElementById('quotes').classList.add("fade-in");
-}

footer.html

@@ -1,3 +1,5 @@
+<br>
+
 <footer class="page-footer">
     <div class="row m-0 p-3 d-flex align-items-center fg-theme">
         <div class="col">
@@ -39,6 +41,6 @@
         </div>
 
     </div>
-    <div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2021 Copyright: Me
+    <div class="row p-1 m-0 justify-content-center align-items-center bg-secondary">©2021 Copyright: Stone_Red
     </div>
 </footer>

fun.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fun</title>
+    <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">
+        <!--Header-->
+        <div id="header-placeholder"></div>
+        <!--end Navigation bar-->
+
+        <!--Navigation bar-->
+        <div id="nav-placeholder"></div>
+        <!--end of Navigation bar-->
+
+        <!--Main-->
+        <div class="container main">
+            <div class="row">
+                <div class="col">
+            <div class="jumbotron p-2">
+                <canvas id="mainpanel"></canvas>
+            </div>
+                </div>
+            </div>
+        </div>
+        <!--end Main-->
+
+        <!--Footer-->
+        <div id="footer-placeholder"></div>
+        <!--end Footer-->
+    </div>
+
+    <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/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
+        crossorigin="anonymous"></script>
+    <script src="//code.jquery.com/jquery.min.js"></script>
+    <script src="Scripts/loadNavBarAndFooter.js"></script>
+    <script src="Scripts/fun.js"></script>
+</body>
+
+</html>

header.html

@@ -5,4 +5,5 @@
         <h1 id="header-title"></h1>
         <div id="quotes">-</div>
     </div>
+    <script src="Scripts/quotes.js"></script>
 </div>

index.html

@@ -68,7 +68,6 @@
         crossorigin="anonymous"></script>
     <script src="//code.jquery.com/jquery.min.js"></script>
     <script src="Scripts/loadNavBarAndFooter.js"></script>
-    <script src="Scripts/quotes.js"></script>
 </body>
 
 </html>

nav.html

@@ -1,6 +1,7 @@
 <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>
+    <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>
@@ -15,6 +16,16 @@
             <li class="nav-item">
                 <a class="nav-link" href="projects.html">Projects</a>
             </li>
+            <li>
+                <div class="dropdown nav-item" style="float: left;">
+                    <a class=" dropdown-toggle nav-link" href="#" role="button" id="dropdownMenuLink"
+                        data-toggle="dropdown" style="float: left;">More</a>
+
+                    <div class="dropdown-menu dropdown-menu-right">
+                        <a class="dropdown-item nav-link" href="fun.html">Fun</a>
+                    </div>
+                </div>
+            </li>
         </ul>
     </div>
 </nav>

projects.html

@@ -101,7 +101,6 @@
         crossorigin="anonymous"></script>
         <script src="//code.jquery.com/jquery.min.js"></script>
         <script src="Scripts/loadNavBarAndFooter.js"></script>
-        <script src="Scripts/quotes.js"></script>
 </body>
 
 </html>

style.css

@@ -97,6 +97,7 @@ h3 {
     color: black;
 }
 
+
 a:link {
     color: gray;
     text-decoration: underline;
@@ -122,12 +123,18 @@ a:active {
 
 .nav-link {
     text-decoration: var(--fg-theme);
+    text-decoration: none!important;
 }
 
 .toolIcon img {
     width: 100;
 }
 
+.dropdown-item:active
+{
+    background-color: lightgray;
+}
+
 @media screen and (max-width: 768px) {
     h2 {
         font-size: 20px;
@@ -141,14 +148,18 @@ a:active {
     .header-text {
         margin-top: 1.1rem;
     }
+    
     #quotes {
         display: none;
     }
 }
 
-.main{
-    animation: fadeIn;
-    animation-duration: 5;
+@media screen and (max-width: 580px)
+{
+    .dropdown-menu{
+        background-color: var(--fg-theme)!important;
+        border: none;
+    }
 }
 
 @media screen and (max-width: 360px) {