Website redesign 💃

- New navbar - Made everything responsive - Made everything, overall, look a lot cooler
2021-06-05 10:38:34 -04:00
parent 99bbf5adf1
commit 1f73421727
9 changed files with 764 additions and 123 deletions
@@ -0,0 +1,65 @@
+.footer-basic {
+    padding:35px 0;
+    background-color:#4a4a4a;
+    color:#4b4c4d;
+  }
+  
+  .footer-basic ul {
+    padding:0;
+    list-style:none;
+    text-align:center;
+    font-size:18px;
+    line-height:1.6;
+    margin-bottom:0;
+  }
+  
+  .footer-basic li {
+    padding:0 10px;
+  }
+  
+  .footer-basic ul a {
+    color:white;
+    text-decoration:none;
+    opacity:0.8;
+  }
+  
+  .footer-basic ul a:hover {
+    opacity:1;
+  }
+  
+  .footer-basic .social {
+    text-align:center;
+    padding-bottom:25px;
+  }
+  
+  .footer-basic .social > a {
+    font-size:24px;
+    width:40px;
+    height:40px;
+    line-height:40px;
+    display:inline-block;
+    text-align:center;
+    border-radius:50%;
+    border:1px solid white;
+    margin:0 8px;
+    color:white;
+    opacity:0.75;
+  }
+  
+  .footer-basic .social > a:hover {
+    opacity:0.9;
+  }
+  
+  .footer-basic .copyright {
+    margin-top:15px;
+    text-align:center;
+    font-size:13px;
+    color:white;
+    margin-bottom:0;
+  }
+
+  #quote p{
+    text-align:center;
+    font-size:15px;
+    color:white;
+  }
@@ -0,0 +1,336 @@
+@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
+html,
+body {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Quicksand", sans-serif;
+    font-size: 62.5%;
+    font-size: 10px;
+    background-color:#a3a3a3;
+}
+
+#panel {
+    margin: 50px auto;
+    width: 300px;
+    padding: 30px 25px;
+    background: white;
+    border-radius: 25px;
+    display:none;
+}
+
+#panel a {
+    color:black;
+}
+
+a{
+color:#ababab;
+}
+
+a:hover {
+    color:white;
+}
+
+hr{
+    border-color:white;
+    width:50%;
+}
+
+/* Navbar section */
+
+#rc_logo {
+    left: 30px;
+    padding: 22px;
+    padding-left:2px;
+    position: absolute;
+    color: #fff;
+    font-size: 19px;
+    text-decoration: none;
+   }
+   
+   #rc_logo a { 
+   color: inherit; 
+   text-decoration: none;
+   } 
+   
+   .rc_nav {
+     overflow: hidden;
+     background-color: #363841;
+     text-align: center;
+     z-index: 6;
+   }
+   
+   .rc_nav a {
+    display: inline-block;
+    margin-right: -4px;  /* inline-block gap fix */
+    color: #fff;
+    padding: 22px 22px;
+    text-decoration: none;
+    font-size: 18px;
+    -webkit-transition: background 0.3s linear;
+    -moz-transition: background 0.3s linear;
+    -ms-transition: background 0.3s linear;
+    -o-transition: background 0.3s linear;
+    transition: background 0.3s linear;
+    z-index: 9;
+   }
+   
+   .rc_nav a:hover {
+     color: gray;
+   }
+   
+   .rc_nav .icon {
+     display: none;
+   }
+   
+   .rc_content {
+     text-align: center; 
+     padding-left:14px; 
+     margin-top: 100px;  
+     color: #8e909b;
+   }
+   
+   
+   @media screen and (max-width: 820px) {
+     .rc_nav a {display: none;}
+     .rc_nav a.icon {
+       float: right;
+       display: block;
+       width: 60px;
+     }
+   }
+   
+   @media screen and (max-width: 820px) {
+     .rc_nav responsive {position: relative; top: 73px;}
+     .rc_nav .icon {
+       position: fixed;
+       right: 0;
+       top: 0;
+
+        border-radius: 20%;
+     }
+     .rc_nav.responsive a {
+       float: none;
+       display: block;
+       text-align: center;
+     }
+
+     #rc_logo {
+        position: fixed;
+     }
+   
+   }
+
+
+/* Animation */
+/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */
+
+.navTrigger {
+    cursor: pointer;
+    width: 30px;
+    height: 25px;
+    margin: auto;
+    position: absolute;
+    right: 30px;
+    top: 0;
+    bottom: 0;
+}
+
+.navTrigger i {
+    background-color: #fff;
+    border-radius: 2px;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 4px;
+}
+
+.navTrigger i:nth-child(1) {
+    -webkit-animation: outT 0.8s backwards;
+    animation: outT 0.8s backwards;
+    -webkit-animation-direction: reverse;
+    animation-direction: reverse;
+}
+
+.navTrigger i:nth-child(2) {
+    margin: 5px 0;
+    -webkit-animation: outM 0.8s backwards;
+    animation: outM 0.8s backwards;
+    -webkit-animation-direction: reverse;
+    animation-direction: reverse;
+}
+
+.navTrigger i:nth-child(3) {
+    -webkit-animation: outBtm 0.8s backwards;
+    animation: outBtm 0.8s backwards;
+    -webkit-animation-direction: reverse;
+    animation-direction: reverse;
+}
+
+.navTrigger.active i:nth-child(1) {
+    -webkit-animation: inT 0.8s forwards;
+    animation: inT 0.8s forwards;
+}
+
+.navTrigger.active i:nth-child(2) {
+    -webkit-animation: inM 0.8s forwards;
+    animation: inM 0.8s forwards;
+}
+
+.navTrigger.active i:nth-child(3) {
+    -webkit-animation: inBtm 0.8s forwards;
+    animation: inBtm 0.8s forwards;
+}
+
+@-webkit-keyframes inM {
+    50% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(45deg);
+    }
+}
+
+@keyframes inM {
+    50% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(45deg);
+    }
+}
+
+@-webkit-keyframes outM {
+    50% {
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(45deg);
+    }
+}
+
+@keyframes outM {
+    50% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(45deg);
+    }
+}
+
+@-webkit-keyframes inT {
+    0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+    }
+    100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+    }
+}
+
+@keyframes inT {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        transform: translateY(9px) rotate(0deg);
+    }
+    100% {
+        transform: translateY(9px) rotate(135deg);
+    }
+}
+
+@-webkit-keyframes outT {
+    0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        -webkit-transform: translateY(9px) rotate(0deg);
+    }
+    100% {
+        -webkit-transform: translateY(9px) rotate(135deg);
+    }
+}
+
+@keyframes outT {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        transform: translateY(9px) rotate(0deg);
+    }
+    100% {
+        transform: translateY(9px) rotate(135deg);
+    }
+}
+
+@-webkit-keyframes inBtm {
+    0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+    }
+    100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+    }
+}
+
+@keyframes inBtm {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        transform: translateY(-9px) rotate(0deg);
+    }
+    100% {
+        transform: translateY(-9px) rotate(135deg);
+    }
+}
+
+@-webkit-keyframes outBtm {
+    0% {
+        -webkit-transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        -webkit-transform: translateY(-9px) rotate(0deg);
+    }
+    100% {
+        -webkit-transform: translateY(-9px) rotate(135deg);
+    }
+}
+
+@keyframes outBtm {
+    0% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    50% {
+        transform: translateY(-9px) rotate(0deg);
+    }
+    100% {
+        transform: translateY(-9px) rotate(135deg);
+    }
+}
+
+.affix {
+    padding: 0;
+    background-color: #111;
+}
+
+.myH2 {
+	text-align:center;
+	font-size: 4rem;
+}
+.myP {
+	text-align: justify;
+	padding-left:15%;
+	padding-right:15%;
+	font-size: 20px;
+}
+@media all and (max-width:700px){
+	.myP {
+		padding:2%;
+	}
+}
@@ -5,8 +5,9 @@

 console.log(`Initiated the Hive Lookup Script`);
 const avatarURL = 'https://minotar.net/avatar/'
-const playerName = document.getElementById("inputBox").value;

+            async function getGamesData() {
+                const playerName = document.getElementById("inputBox").value;
        if (document.getElementById("gameBox").value === 'sg' || document.getElementById("gameBox").value === 'Survival Games' ) {
            const apiURL = `https://api.hivemc.com/v1/player/${playerName}/sg`;
        const data = await fetch(apiURL).then(response => response.json());
@@ -254,4 +255,5 @@ const playerName = document.getElementById("inputBox").value;
            document.querySelector("#link").innerHTML = "<a href=" + apiURL + ">Raw JSON Link"
            var link = document.getElementById("link");
            link.style.display = "block"; 
-        }
+        }
+    }