Menu Bar Update

public/css/footer.css

@@ -0,0 +1,161 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap');
+* {
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  width: 100%;
+  background: #0a0a0a;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+#container {
+  height: 100%;
+  width: 100%;
+  background: #000;
+  overflow: hidden;
+}
+
+.a_star {
+  transition-duration: 1s;
+}
+
+#cursor {
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
+  -moz-backdrop-filter: brightness(500%);
+  -webkit-backdrop-filter: brightness(500%);
+  backdrop-filter: brightness(500%);
+}
+
+
+/* Footer CSS */
+.footercontainer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  min-height: 100vh;
+  background: #141414;
+}
+.text {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.text h1 {
+  color: #2567f5;
+  margin-top: -900px;
+}
+footer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  background: #2567f5;
+  height: 190px;
+  padding: 20px 50px;
+  flex-direction: column;
+}
+footer .social_icon,
+footer .menu {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 10px 0;
+  flex-wrap: wrap;
+}
+footer .social_icon li,
+footer .menu li {
+  list-style: none;
+}
+footer .social_icon li a {
+  font-size: 2em;
+  color: #141414;
+  margin: 0 10px;
+  display: inline-block;
+  transition: 0.5s;
+}
+footer .social_icon li a:hover {
+  transform: translateY(-10px);
+}
+footer .menu li a {
+  font-size: 1.2em;
+  font-family: "Quicksand", sans-serif;
+  color: #141414;
+  margin: 0 10px;
+  display: inline-block;
+  text-decoration: none;
+  opacity: 0.75;
+  transition: 0.5s;
+}
+footer .menu li a:hover {
+  opacity: 1;
+}
+footer p {
+  color: #141414;
+  text-align: center;
+  margin-top: 15px;
+  margin-bottom: 10px;
+  font-size: 1.1em;
+  opacity: 0.75;
+}
+footer .wave {
+  position: absolute;
+  top: -100px;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: url(../assets/wave.png);
+  background-size: 1000px 100px;
+}
+footer .wave1 {
+  z-index: 1000;
+  opacity: 1;
+  bottom: 0;
+  animation: animateWave 4s linear infinite;
+}
+footer .wave2 {
+  z-index: 999;
+  opacity: 0.5;
+  bottom: 0;
+  animation: animateWave-02 4s linear infinite;
+}
+footer .wave3 {
+  z-index: 1000;
+  opacity: 0.2;
+  bottom: 15px;
+  animation: animateWave-02 4s linear infinite;
+}
+footer .wave4 {
+  z-index: 999;
+  opacity: 0.7;
+  bottom: 20px;
+  animation: animateWave-02 4s linear infinite;
+}
+@keyframes animateWave {
+  0% {
+    background-position-x: 1000px;
+  }
+  100% {
+    background-position-x: 0px;
+  }
+}
+@keyframes animateWave-02 {
+  0% {
+    background-position-x: 0px;
+  }
+  100% {
+    background-position-x: 1000px;
+  }
+}

public/css/home.css

@@ -1,36 +1,112 @@
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@600&display=swap");
 * {
-    padding: 0px;
-    margin: 0px;
-    box-sizing: border-box;
+  padding: 0px;
+  margin: 0px;
+  box-sizing: border-box;
 }
 
 body {
-    height: 100vh;
-    width: 100%;
-    background: #0a0a0a;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
+  height: 100vh;
+  width: 100%;
+  background: #0a0a0a;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 #container {
-    height: 100%;
-    width: 100%;
-    background: #000;
-    overflow: hidden;
+  height: 100%;
+  width: 100%;
+  background: #000;
+  overflow: hidden;
 }
 
 .a_star {
-    transition-duration: 1s;
+  transition-duration: 1s;
 }
 
 #cursor {
-    position: absolute;
-    height: 200px;
-    width: 200px;
-    border-radius: 50%;
-    -moz-backdrop-filter: brightness(500%);
-    -webkit-backdrop-filter: brightness(500%);
-    backdrop-filter: brightness(500%);
-}
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  border-radius: 50%;
+  -moz-backdrop-filter: brightness(500%);
+  -webkit-backdrop-filter: brightness(500%);
+  backdrop-filter: brightness(500%);
+}
+
+/* Menu Bar CSS */
+.contain {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  background: transparent;
+}
+.box {
+  width: fit-content;
+  height: 50vh;
+  background: transparent;
+  position: absolute;
+  text-align: left;
+  z-index: 1;
+  opacity: 0;
+  left: -500px;
+  pointer-events: none;
+  transition: 0.5s;
+}
+.active.box {
+  opacity: 1;
+  left: 0px;
+  pointer-events: fill;
+}
+.menu_item_box {
+  z-index: 2;
+  width: fit-content;
+  height: auto;
+  background-color: #fff;
+  margin: 30px;
+  position: absolute;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.line1,
+.line2,
+.line3 {
+  width: 30px;
+  height: 3px;
+  margin: 8px 5px;
+  background-color: #ffffff;
+  border-radius: 50px;
+}
+.active .line1 {
+  transform: translate(0px, 12px) rotate(45deg);
+}
+.active .line2 {
+  opacity: 0;
+}
+.active .line3 {
+  transform: translate(0px, -12px) rotate(-45deg);
+}
+nav {
+  padding-top: 10px;
+}
+nav ul {
+  margin: 0px 30px;
+}
+nav ul li {
+  list-style: none;
+  margin-bottom: 12px;
+  transition: 0.2s;
+}
+nav ul li a {
+  color: #fff;
+  font-family: "Quicksand", sans-serif;
+  font-size: 20px;
+  padding: 10px 30px;
+  display: block;
+  text-decoration: none;
+}
+nav ul li a:hover {
+  color: #ffff00;
+}