Website redesign 💃

- New navbar
- Made everything responsive
- Made everything, overall, look a lot cooler

about.html

@@ -1,31 +1,44 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>About - awexx</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>About >> Awex</title>
+	<!-- Stylesheets -->
+    <link rel="stylesheet" href="assets/css/style-new.css">
+    <link rel="stylesheet" href="assets/css/footer.css">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
+    <!-- Scripts -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
-    <link rel="stylesheet" href="assets/css/style.css">
-    <link rel="shortcut icon" type="image/png" href="assets/img/logo.png"/>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <meta content="awex" property="og:title">
-    <meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
+    <script src="assets/js/medalclips.js"></script>
+    <!-- Metadata -->
+	<meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" type="image/png" href="https://awexxx.xyz/assets/img/logo.png"/>
+    <meta content="Awexxx" property="og:title">
+  	<meta content="Name's awex / Alex. I'm the main web developer for the PlagueCraft Network, as well as one of the owners." property="og:description">
     <meta content="https://awexxx.xyz/about" property="og:url">
-    <meta content="assets/img/logo.png" property="og:image">
+    <meta content="https://awexxx.xyz/assets/img/logo.png" property="og:image">
     <meta content="#9c2d1c" data-react-helmet="true" name="theme-color">
 </head>
 <body>
-    <h3 style="padding-top:20px;">Awexx</h3>
-   <br>
-   <ul id="navbar">
-      <li><a href="https://awexxx.xyz/">HOME</a></li>
-      <li><a href="#">ABOUT ME</a></li>
-      <li><a href="https://awexxx.xyz/hivemc">HIVEMC STATS LOOKUP</a></li>
-   </ul>
-</nav>
-<hr>
+    <div id="rc_logo">
+        <a href="#" title="Logo">AWEX</a>
+        </div>  
+        
+        <div class="rc_nav" id="centered_nav">
+        <a href="https://awexxx.xyz/" title="Home">Home</a>
+        <a href="#" title="About">About</a>
+        <a href="https://awexxx.xyz/hivemc" title="HiveMC">HiveMC Lookup</a>
+        <a href="https://awexxx.xyz/mcw?type=embed" title="MCW">MCW</a>
+        <a href="javascript:void(0);" title="Menu" style="font-size:18px;" class="icon" onclick="myFunction()">&#9776;</a>
+        </div>
+
+    <section class="home" style="background-image: url('assets/img/mcw-code.png');">
+    </section>
+    <div>
+<br />
 
 <h2>Awex is a web designer/developer for the PlagueCraft Network.</h2>
 <hr>
@@ -33,18 +46,84 @@
 <p>As of 2021, Awex has contributed to multiple projects, many such as the MedalSMP, ForestGroveSMP, and more!<br>
 Awex initially started learning HTML and CSS in late 2020 and picked it up fairly quickly! He now manages web stability & services at <a href="https://plaguecraft.xyz" target="_blank">the PlagueCraft Network!</a></p>
 
-  <p>Awex is currently learning Game Development, Electron/Node, and more! You can always view his projects by taking a glance at his <a href="https://github.com/awexxx" target="_blank">GitHub</a> page.</p>
+  <p>Awex is currently learning Game Development, Electron/Node, and more! You can always view his projects by taking a glance at his <a href="https://github.com/awexxx" target="_blank">GitHub</a> page.<br>
+<i>By the way, both the home and about page (this page lol) has a different snip of my code! Check all of 'em out ^^^</i></p>
 
-  <img style="padding-bottom:20px;" id="center" src="https://plaguecraft.xyz/storage/assets/img/logo.png">
-
-  <div class="footer-basic">
+<div class="footer-basic">
     <footer>
-        <div class="social"><a href="https://github.com/awexxx" target="_blank"><i class="icon ion-social-github"></i></a><a href="https://twitter.com/_awexx" target="_blank"><i class="icon ion-social-twitter"></i></a></div>
-        <ul class="list-inline">
-            <li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact</a></li>
+        <div class="social"><a href="https://instagram.com/_awexx"><i class="icon ion-social-instagram"></i></a><a href="https://twitter.com/_awexxx"><i class="icon ion-social-twitter"></i></a><a href="https://github.com/awexx/"><i class="icon ion-social-github"></i></a></div>
+         <ul class="list-inline">
+            <li class="list-inline-item"><a href="mailto:alex@plaguecraft.xyz">Contact Me</a></li>
+            <li class="list-inline-item"><a href="https://awexxx.xyz/mcw">Medal Clip Webhook</a></li>
         </ul>
-        <p class="copyright">awexx <i class="fa fa-copyright"></i> 2021<br>
+        <p class="copyright">Awexxx © 2021<br>
+            <div id="quote"></div>
+            <script>
+                var quoteArray = ['You forget a thousand things every day, you make sure this is one of em.', 'THE DAMN SEMI COLON', `console.log('go away')`, `if else if else if else if else if else if else if elsfi fisafhjdskflsdf`, 
+                `HELP PLEASE IM STUFK IN THE FOOTER CHOSOING THESE RESPONSES PLEASDSJAIF DSAF`]
+                var rand = quoteArray[Math.random() * quoteArray.length | 0]
+                document.querySelector("#quote").innerHTML = "<p>" + rand + "</p>"
+                if(rand === `console.log('go away')`) {
+                    console.log(`go away (no, this isn't a mistake, i actually hard coded this in lmao)\nYou found the easter egg :)`)
+                }
+            </script>
+
     </footer>
 </div>
-</body>
-</html>
+
+    </body>
+    </html>
+
+    <style>
+        .home {
+    width: 100%;
+    height: 102vh;
+    background-position: center top;
+	background-size:cover;
+
+    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
+       -moz-animation: fadein 2s; /* Firefox < 16 */
+        -ms-animation: fadein 2s; /* Internet Explorer */
+         -o-animation: fadein 2s; /* Opera < 12.1 */
+            animation: fadein 2s;
+}
+
+body {
+    background-color:#a3a3a3;
+    text-align:center;
+}
+
+body{
+        background-color:#878787;
+        text-align:center;
+    }
+    
+    a{
+    color:black;
+    }
+
+    a:hover {
+        color:white;
+    }
+
+    i{
+      font-size:20px;
+    }
+  
+    body p{
+    text-align:center;
+    color:#d4d4d4;
+    font-size:20px;
+  }
+    </style>
+
+    <script>
+        function myFunction() {
+    var x = document.getElementById("centered_nav");
+    if (x.className === "rc_nav") {
+        x.className += " responsive";
+    } else {
+        x.className = "rc_nav";
+    }
+    }
+    </script>