New UI Update, still WIP

activity/index.html

@@ -231,7 +231,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
             Li4tLiAuLS0gLS4uIC0tLi4u<br />&bsol;-...-4buoe2v1qZuiULSrOPuzXZBn<br />YZt0ULSr9PuzvfuiaZwo5ZBseZB39<br />fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO
           </p>
         </a>
-        <a class="card" href="/project">
+        <a class="card" href="/activity">
           <div
             class="bg-img"
             style="

assets/css/main.css

@@ -1,6 +1,7 @@
 @import url("/assets/css/fonts/jost.css");
-@import url('/assets/css/fonts/noto-sans-jp.css');
+@import url("/assets/css/fonts/noto-sans-jp.css");
-@import url('/assets/css/fonts/plus-jarkata-sans.css');
+@import url("/assets/css/fonts/plus-jarkata-sans.css");
+@import url("/assets/css/old.css");
 
 body {
   margin: 0px;
@@ -12,7 +13,7 @@ main {
   height: 100%;
   margin-bottom: 0;
   margin-top: 0;
-  min-height: calc(100vh - 10rem);
+  min-height: calc(100vh - 10vh);
 }
 hr {
   margin: 2rem 0px;
@@ -24,7 +25,8 @@ nav {
   /*   width:100%; */
   top: 10px;
   background-color: #f5f5f5;
-  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
+  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
+    --apple-system;
   font-size: 1.25rem;
   padding: 4px;
   margin: 10px;
@@ -96,7 +98,6 @@ nav {
 
 .footer {
   font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
-  height: 1rem;
   position: sticky;
   /*   width: 100%; */
   background-color: white;
@@ -107,6 +108,7 @@ nav {
   background-color: #ddd;
   margin: 0px;
   text-align: center;
+  align-content: center;
 }
 
 /*---nav---*/
@@ -284,7 +286,8 @@ nav {
   width: 100%;
   height: 100%;
   border-radius: 0.5rem;
-  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
+  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
+    --apple-system;
   div {
     color: #fff;
     position: relative;
@@ -617,8 +620,8 @@ nav {
   display: block;
   height: 2rem;
 }
-@media screen and (min-width: 1125px) and (max-width: 1620px) {
+@media screen and (width >= 1125px) and (width<=1620px) {
-  /*if(width<1700px&&width>=1335px)*/
+  /*if(width<1620px&&width>=1125px)*/
 
   nav {
     .dropdown {
@@ -666,8 +669,8 @@ nav {
   }
 }
 
-@media screen and not (min-width: 1125px) {
+@media screen and (width<1125px) {
-  /*if(width<1185px)*/
+  /*if(width<1125px)*/
 
   nav {
     font-size: 1.4rem;

assets/css/old.css

@@ -0,0 +1,708 @@
+@import url("/assets/css/fonts/jost.css");
+@import url("/assets/css/fonts/noto-sans-jp.css");
+@import url("/assets/css/fonts/plus-jarkata-sans.css");
+body {
+  margin: 0px;
+  height: 100%;
+}
+main {
+  font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
+  margin: 0.75rem;
+  height: 100%;
+  margin-bottom: 0;
+  margin-top: 0;
+  min-height: calc(100vh - 10vh);
+}
+hr {
+  margin: 2rem 0px;
+}
+nav {
+  z-index: 4;
+  position: -webkit-sticky;
+  position: sticky;
+  /* width:100%;
+	 */
+  top: 10px;
+  background-color: #f5f5f5;
+  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
+    --apple-system;
+  font-size: 1.25rem;
+  padding: 4px;
+  margin: 10px;
+  margin-top: 15px;
+  border-radius: 12px;
+  box-shadow: 0px 0px 12px 0.1px #d0d0d0;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+}
+nav ul {
+  padding-left: 15px;
+  list-style-type: none;
+  margin: 0px;
+  align-content: center;
+}
+nav ul li {
+  display: inline-block;
+  padding-right: 4px;
+  vertical-align: middle;
+}
+nav ul li p {
+  padding-top: 0.4rem;
+  vertical-align: middle;
+  margin: 0.5rem 1rem;
+}
+nav ul img {
+  margin-top: 0.25rem;
+  height: 1.5rem;
+  vertical-align: middle;
+  padding-right: 0.3rem;
+}
+nav a {
+  color: black;
+  text-decoration: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+nav .vertical-line {
+  width: 0.1rem;
+  background-color: black;
+  height: 100%;
+}
+nav .social {
+  font-size: 2.5rem;
+  padding-bottom: 0.4rem;
+  transition: 0.3s;
+}
+nav .social:hover {
+  opacity: 50%;
+}
+nav .dropdown {
+  margin: 0.75rem;
+  position: absolute;
+  background-color: #f5f5f5;
+  box-shadow: 0px 0px 12px 0.1px #d0d0d0;
+  padding: 0.25rem 0.5rem;
+  border-radius: 7px;
+  right: 0;
+  top: 6rem;
+  display: none;
+  opacity: 0;
+  transition: 0.3s;
+}
+.footer {
+  font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
+  position: sticky;
+  /* width: 100%;
+	 */
+  background-color: white;
+  /* bottom: 0;
+	 */
+  /* left:0;
+	 */
+  z-index: 3;
+  padding: 1rem;
+  background-color: #ddd;
+  margin: 0px;
+  text-align: center;
+  align-content: center;
+}
+/*---nav---*/
+.menu {
+  padding-top: 0.4rem;
+  padding-bottom: 0.8rem;
+}
+.menu p {
+  background-size: 0% 0.2em;
+  background-image: linear-gradient(#000, #000);
+  background-position-y: 104%;
+  background-position-x: 0%;
+  background-repeat: no-repeat;
+  transition: 0.3s ease-in-out;
+}
+.menu p:hover,
+.menu .currentpage {
+  opacity: 60%;
+  background-size: 100% 0.2em;
+}
+.burger {
+  border: none;
+  display: none;
+  width: 70px;
+  height: 70px;
+  margin: 0 0;
+  position: relative;
+  position: relative;
+  cursor: pointer;
+  background-color: #f5f5f5;
+  border-radius: 12px;
+  transition: 0.2s ease-in-out;
+}
+.burger span {
+  transition: 0.2s ease-in-out;
+  box-sizing: border-box;
+  display: block;
+  background-color: #000;
+  border-radius: 2px;
+}
+.burger #hamburger {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0%;
+  left: 0%;
+}
+.burger #hamburger span {
+  width: 70%;
+  height: 5%;
+  top: 17.5%;
+  left: 16%;
+  position: relative;
+  margin: 12% 0;
+}
+.burger #hamburger span:nth-child(1) {
+  transition-delay: 0.2s;
+}
+.burger #hamburger span:nth-child(2) {
+  transition-delay: 0.3s;
+}
+.burger #hamburger span:nth-child(3) {
+  transition-delay: 0.4s;
+}
+.burger #cross {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0%;
+  left: 1.5%;
+  transform: rotate(45deg);
+}
+.burger #cross span:nth-child(1) {
+  height: 0%;
+  width: 5%;
+  position: absolute;
+  right: 46%;
+  /*a / */
+  top: 10%;
+  transform: translate(-50%);
+  transition-delay: 0s;
+}
+.burger #cross span:nth-child(2) {
+  width: 0%;
+  height: 5%;
+  position: absolute;
+  right: 11%;
+  top: 48%;
+  transition-delay: 0s;
+}
+.burger:hover {
+  opacity: 40%;
+}
+.burger.open #hamburger span {
+  width: 0%;
+}
+.burger.open #hamburger span:nth-child(1) {
+  transition-delay: 0s;
+}
+.burger.open #hamburger span:nth-child(2) {
+  transition-delay: 0.1s;
+}
+.burger.open #hamburger span:nth-child(3) {
+  transition-delay: 0.2s;
+}
+.burger.open #cross span:nth-child(1) {
+  height: 80%;
+  transition-delay: 0.3s;
+}
+.burger.open #cross span:nth-child(2) {
+  width: 80%;
+  transition-delay: 0.3s;
+}
+.dropdown {
+  display: none;
+}
+/*---- main ----*/
+.container {
+  position: relative;
+  height: 50vw;
+  width: 100%;
+  margin: auto;
+  margin-top: 1rem;
+}
+.carousel {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ddd;
+  border-radius: 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+.slider-bg {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+  filter: blur(5px) brightness(75%);
+  -webkit-filter: blur(5px) brightness(60%);
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  transition: 0.3s;
+  padding: auto;
+  border-radius: 0.5rem;
+  transform: scale(1.1);
+}
+.slider section {
+  overflow: hidden;
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  transition: 0.3s;
+  padding: auto;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+  font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
+    --apple-system;
+}
+.slider section div {
+  color: #fff;
+  position: relative;
+  z-index: 2;
+  margin: 0px;
+  display: grid;
+  justify-content: center;
+  grid-template-rows: 3.5fr 1fr 1fr 5rem;
+  grid-template-columns: 1fr auto 1fr;
+}
+.slider section h1 {
+  font-size: 2rem;
+  grid-row-start: 2;
+  grid-row-end: 3;
+}
+.slider section p {
+  font-size: 1.25rem;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+.slider section p,
+.slider section h1 {
+  width: 60vw;
+  text-align: center;
+  grid-column-start: 2;
+  /*|•|*/
+  grid-column-end: 3;
+}
+.slider:hover {
+  cursor: pointer;
+}
+.prev,
+.next {
+  background-color: rgba(0, 0, 0, 0.3);
+  color: #fff;
+  position: absolute;
+  height: 5rem;
+  width: 5rem;
+  font-size: 4.5rem;
+  top: 50%;
+  transform: translate(0, -50%);
+  z-index: 2;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  font-family: serif;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.next {
+  right: 1rem;
+}
+.prev {
+  left: 1rem;
+}
+.pgctrl {
+  font-family: sans-serif, --apple-system;
+  z-index: 1;
+  position: absolute;
+  bottom: 0.5rem;
+  left: 50%;
+  vertical-align: middle;
+  transform: translate(-50%);
+  padding: 0px 0.5rem;
+  margin: 0px 0px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 10px;
+  list-style: none;
+  display: flex;
+  z-index: 2;
+  font-size: 4rem;
+  color: white;
+  cursor: pointer;
+  transition: 0.75s;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.control {
+  text-align: center;
+}
+/* Cards */
+.album-cards {
+  margin: auto;
+  margin-bottom: 2.5rem;
+  justify-content: center;
+  display: grid;
+  grid-template-rows: repeat(auto-fill, 23rem);
+  grid-template-columns: repeat(auto-fill, 23rem);
+  grid-gap: 1rem;
+}
+.album-cards .card {
+  transition: 0.75s;
+  color: black;
+  background-color: #ddd;
+  height: 23rem;
+  border-radius: 7px;
+  text-decoration: none;
+}
+.album-cards .card div {
+  z-index: 1;
+  position: inherit;
+  height: 100%;
+  width: 100%;
+  background-color: #ddd;
+  border-radius: 7px;
+  transition: 0.5s;
+}
+.album-cards .card h2 {
+  font-size: 1.9rem;
+}
+.album-cards .card p {
+  font-size: 1.2rem;
+}
+.album-cards .card h2,
+.album-cards .card p {
+  color: white;
+  padding: 0.3rem 0.75rem 0.3rem 0.75rem;
+  position: relative;
+  z-index: 3;
+  opacity: 0;
+  transition: 0.5s;
+}
+.album-cards .card .bg-img {
+  /* background: url(/assets/img/t404_null-logo.png);
+	 */
+  background-size: cover;
+  position: absolute;
+  height: 23rem;
+  width: 23rem;
+}
+.album-cards .card:hover .bg-img {
+  filter: blur(5px) brightness(50%);
+  -webkit-filter: blur(5px) brightness(50%);
+}
+.album-cards .card:hover h2,
+.album-cards .card:hover p {
+  filter: none;
+  opacity: 1;
+}
+.half-image-cards {
+  margin: auto;
+  margin-bottom: 2.5rem;
+  justify-content: center;
+  display: grid;
+  grid-template-rows: repeat(auto-fill, 30rem);
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
+  grid-gap: 1rem;
+}
+.half-image-cards .card {
+  transition: 0.75s;
+  color: black;
+  background-color: #ddd;
+  height: 30rem;
+  border-radius: 7px;
+  text-decoration: none;
+}
+.half-image-cards .card div {
+  z-index: 1;
+  position: inherit;
+  height: 100%;
+  width: 100%;
+  background-color: #ddd;
+  border-radius: 7px;
+  transition: 0.5s;
+}
+.half-image-cards .card h2 {
+  font-size: 1.9rem;
+}
+.half-image-cards .card p {
+  font-size: 1.1rem;
+}
+.half-image-cards .card h2,
+.half-image-cards .card p {
+  /* color: black;
+	 */
+  padding: 0.3rem 10vw 0.3rem 5vw;
+  position: relative;
+  z-index: 3;
+  opacity: 0;
+  transition: 0.5s;
+}
+.half-image-cards .card .bg-img {
+  /* background: url(/assets/img/t404_null-logo.png);
+	 */
+  background-size: cover;
+  position: absolute;
+  background-position: center left;
+  height: 30rem;
+  width: 30rem;
+}
+.half-image-cards .card:hover .bg-img {
+  filter: brightness(40%);
+  -webkit-filter: brightness(40%);
+  width: 8vw;
+  border-radius: 7px 0px 0px 7px;
+}
+.half-image-cards .card:hover h2,
+.half-image-cards .card:hover p {
+  padding: 0.3rem 5vw 0.3rem 10vw;
+  filter: none;
+  opacity: 1;
+}
+.contact-cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 23rem);
+  grid-gap: 1rem;
+  justify-content: center;
+  padding: 0;
+}
+.contact-cards li {
+  border-radius: 7px;
+  background-color: #ddd;
+}
+.topic {
+  padding: 1rem;
+  font-size: 3rem;
+  margin-top: 3vw;
+  margin-bottom: 7vw;
+}
+.topic a {
+  text-decoration: none;
+  color: black;
+  background-size: 0% 0.2em;
+  background-image: linear-gradient(black, black);
+  background-position-y: 104%;
+  background-position-x: 0%;
+  background-repeat: no-repeat;
+  transition: 0.3s ease-in-out;
+}
+.topic a:hover {
+  opacity: 70%;
+  background-size: 100% 0.2em;
+}
+/* overall */
+.icons {
+  font-size: 2.25rem;
+  font-weight: 500;
+}
+@font-face {
+  font-family: "NerdFontsSymbols Nerd Font";
+  src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
+}
+.nf-icons {
+  font-family: "NerdFontsSymbols Nerd Font";
+}
+/* Releases */
+.release-track {
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+  min-height: calc(100vh - 25rem);
+  padding: 5vw 5vw;
+  border-radius: 10px;
+  border: 1px solid #ddd;
+}
+.release-track strong {
+  color: #fff;
+}
+.release-track .text-box {
+  margin: 25% 0;
+  background-color: rgba(0, 0, 0, 75);
+  height: 100%;
+  color: #ddd;
+  padding: 2rem;
+  border-radius: 7px;
+  font-size: 1.2rem;
+}
+.release-track .text-box a {
+  text-decoration: none;
+  color: #fff;
+  background-size: 0% 0.2em;
+  background-image: linear-gradient(#ccc, #ccc);
+  background-position-y: 104%;
+  background-position-x: 0%;
+  background-repeat: no-repeat;
+  transition: 0.3s ease-in-out;
+}
+.release-track .text-box a:hover {
+  color: #ccc;
+  background-size: 100% 0.2em;
+}
+/* info */
+.info {
+  text-decoration: none;
+  list-style-type: none;
+  font-size: 1.4rem;
+}
+.info li {
+  padding: 1rem;
+}
+.info a {
+  text-decoration: none;
+  color: #46f;
+  background-size: 0% 0.2em;
+  background-image: linear-gradient(#46f, #46f);
+  background-position-y: 104%;
+  background-position-x: 0%;
+  background-repeat: no-repeat;
+  transition: 0.3s ease-in-out;
+}
+.info a:hover {
+  opacity: 70%;
+  background-size: 100% 0.2em;
+}
+.info .title {
+  font-size: 1.6rem;
+}
+.subdiv {
+  padding: 1rem;
+}
+.long-br {
+  display: block;
+  height: 2rem;
+}
+@media screen and (width >= 1125px) and (width<=1620px) {
+  /*if(width<1620px&&width>=1125px)*/
+  nav .dropdown .dropdown-social {
+    position: relative;
+    width: 17.5rem;
+    padding: 0rem 0rem;
+  }
+  nav .dropdown .dropdown-social a {
+    transition: 0.2s;
+    display: flex;
+    padding: 1rem;
+    border-radius: 7px;
+    margin: 0.3rem 0;
+  }
+  nav .dropdown .dropdown-social a:hover {
+    background-color: #ddd;
+  }
+  nav .dropdown .dropdown-social strong {
+    margin-left: auto;
+    margin-right: auto;
+    align-content: center;
+  }
+  nav .dropdown .dropdown-social p {
+    margin: 0.5rem 0;
+  }
+  nav .dropdown .dropdown-menu {
+    display: none;
+  }
+  nav .menu,
+  nav .dropdown-open.dropdown,
+  nav .dropdown-open.dropdown-social {
+    opacity: 1;
+    display: initial;
+  }
+  nav .social,
+  nav .dropdown-open.dropdown-menu {
+    opacity: 0;
+    display: none;
+  }
+  nav .burger {
+    display: block;
+  }
+}
+@media screen and (width<1125px) {
+  /*if(width<1125px)*/
+  nav {
+    font-size: 1.4rem;
+  }
+  nav ul img {
+    height: 2.5rem;
+  }
+  nav .social {
+    font-size: 2rem;
+  }
+  nav .burger {
+    height: 100px;
+    width: 100px;
+  }
+  nav .dropdown .dropdown-social,
+  nav .dropdown .dropdown-menu {
+    position: relative;
+  }
+  nav .dropdown .dropdown-menu {
+    width: 18rem;
+    padding: 0rem 0rem;
+  }
+  nav .dropdown .dropdown-social {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  nav .dropdown .dropdown-menu p,
+  nav .dropdown .dropdown-social a {
+    transition: 0.2s;
+    padding: 1rem;
+    border-radius: 7px;
+    margin: 0.3rem 0;
+  }
+  nav .dropdown .dropdown-menu p:hover {
+    background-color: #ddd;
+  }
+  nav .dropdown .dropdown-social a:hover {
+    opacity: 50%;
+  }
+  nav .dropdown hr {
+    margin: 0.75rem 0rem;
+    padding: 1rem;
+    border: 1px solid #aaa;
+  }
+  nav .social-name {
+    display: none;
+  }
+  nav .social,
+  nav .menu-item {
+    display: none;
+  }
+  nav .dropdown-open {
+    transition: 0.3s;
+    opacity: 1;
+    display: initial;
+  }
+  nav .dropdown-open .dropdown,
+  nav .dropdown-open .dropdown-social,
+  nav .dropdown-open .downdown-menu {
+    display: initial;
+  }
+  nav .burger {
+    display: block;
+  }
+}

assets/js/index.js

@@ -6,12 +6,41 @@ let carousel = document.querySelector(".carousel");
 
 let bg = document.querySelector(".slider-bg");
 
+/*
+<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@1.28.0/dist/umd/supabase.min.js"></script>
+<script>
+  const supabaseUrl = 'https://owbamcqdmqetrgcznxva.supabase.co';
+  const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im93YmFtY3FkbXFldHJnY3pueHZhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI5NDU5NjIsImV4cCI6MjAzODUyMTk2Mn0.xNen7b513ZGwJ-Qu5iZ6K8qrmvy4QVjS10wiYbEEwKc';
+  //anon key, you cant access private stuffs or add hilarious stuffs w/ this...
+  //(unless sending me some malicious links but I delete your msg)
+  const supabase = supabase.createClient(supabaseUrl, supabaseKey);
+  async function fetchData() { 
+      let { data, error } = await supabase.
+      from('events')
+      .select('*'); //note it only shows u public stuffs
+      if (error) { 
+          console.error('Error fetching data:', error); 
+      } else {
+           console.log('Data:', data);
+           //edit tmr
+      } 
+  } 
+  fetchData();
+</script>
+
+*/
+
 let img = [
   "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
   "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Oblitus_Requiem.png?v=1693055600835",
-  "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png?v=1683474226492",
+  "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
 ];
-let pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"];
+let pg = [
+  "/",
+  "release/Oblitus_Requiem",
+  "release/A_Lake_With_Endless_Stars"
+];
+
 
 if (!document) console.log("press f");
 if (!next) console.log("Class next missing.");
@@ -50,6 +79,14 @@ function set() {
   if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
 }
 
+
+// setInterval(getinfo, 60000);
+// async function getinfo() {
+//   let res = await fetch("");
+//   const info = await res.json();
+//   if (bg) bg.style.backgroundImage = `url('${info.slider[1].img}')`;
+// }
+
 function reset() {
   for (var i = 0; i < slider.children.length; i++) {
     slider.children[i].style.opacity = 0;

index.html

@@ -192,7 +192,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
             <section>
               <div>
                 <h1 class="title">This page is still under construction.</h1>
-                <p class="desc">The page is still under development, in cases, this page will change after reload or after a few days and a reload.</p>
+                <p class="desc">The page is still under development. In cases, this page will change after reload or after a few days and a reload.</p>
               </div>
             </section>
             <section>
@@ -300,7 +300,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
           <p>???</p>
           <p> Li4tLiAuLS0gLS4uIC0tLi4u <br />&bsol;-...-4buoe2v1qZuiULSrOPuzXZBn <br />YZt0ULSr9PuzvfuiaZwo5ZBseZB39 <br />fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO </p>
         </a>
-        <a class="card" href="/project">
+        <a class="card" href="/activity">
           <div class="bg-img" style="
               background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg);
             "></div>