✨💼 Updated with Glitch

.glitch-assets

@@ -15,3 +15,28 @@
 {"uuid":"yEDZsSX7I7P2NlF1","deleted":true}
 {"uuid":"VY2dLeOvcf8ffuEw","deleted":true}
 {"uuid":"XPQ2UUJettC9yQ6L","deleted":true}
+{"name":"a8ea3519-e4b3-4ddc-9bc1-631b3cc82ce0.image.png","date":"2024-05-21T03:34:43.481Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/a8ea3519-e4b3-4ddc-9bc1-631b3cc82ce0.image.png","type":"image/png","size":42241,"imageWidth":1391,"imageHeight":762,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fa8ea3519-e4b3-4ddc-9bc1-631b3cc82ce0.image.png","thumbnailWidth":330,"thumbnailHeight":181,"uuid":"7tvho3fs1o1pmI1y"}
+{"uuid":"7tvho3fs1o1pmI1y","deleted":true}
+{"name":"b84e965f-2214-46b2-b8d2-a990df908700.image.png","date":"2024-05-23T14:27:13.319Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/b84e965f-2214-46b2-b8d2-a990df908700.image.png","type":"image/png","size":1431254,"imageWidth":3000,"imageHeight":3000,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fb84e965f-2214-46b2-b8d2-a990df908700.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T2HN3K7XP7SdGaMG"}
+{"uuid":"T2HN3K7XP7SdGaMG","deleted":true}
+{"name":"logo.png","date":"2024-05-23T19:57:39.675Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/logo.png","type":"image/png","size":17305,"imageWidth":1000,"imageHeight":170,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Flogo.png","thumbnailWidth":330,"thumbnailHeight":57,"uuid":"aUDkZYylJwHEzvCI"}
+{"name":"nerdfonts.woff2","date":"2024-06-02T11:32:16.478Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/nerdfonts.woff2","type":"font/woff2","size":963444,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fnerdfonts.woff2","thumbnailWidth":210,"thumbnailHeight":210,"uuid":"hm5XV39Zoiona8W1"}
+{"uuid":"hm5XV39Zoiona8W1","deleted":true}
+{"name":"bc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","date":"2024-06-02T17:14:30.412Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/bc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","type":"image/png","size":475875,"imageWidth":1280,"imageHeight":1280,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fbc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"XDK6WgmNeQhtHjUb"}
+{"uuid":"XDK6WgmNeQhtHjUb","deleted":true}
+{"name":"fof-genesis.png","date":"2024-06-02T17:14:30.412Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png","type":"image/png","size":475875,"imageWidth":1280,"imageHeight":1280,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fbc911aa7-f66b-47d5-b2a2-8da01e550784.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"XDK6WgmNeQhtHjUb"}
+{"name":"818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","date":"2024-06-02T17:17:30.235Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","type":"image/png","size":1061446,"imageWidth":1200,"imageHeight":437,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","thumbnailWidth":330,"thumbnailHeight":121,"uuid":"vgJVArrAyvLmUYk1"}
+{"uuid":"vgJVArrAyvLmUYk1","deleted":true}
+{"name":"vnmc2023.png","date":"2024-06-02T17:17:30.235Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/vnmc2023.png","type":"image/png","size":1061446,"imageWidth":1200,"imageHeight":437,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F818d1ab4-9f4c-43e7-babb-bb5f88bc441f.image.png","thumbnailWidth":330,"thumbnailHeight":121,"uuid":"vgJVArrAyvLmUYk1"}
+{"name":"23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop (1).jpg","date":"2024-06-02T17:25:30.638Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop%20(1).jpg","type":"image/jpeg","size":489485,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop%20(1).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"v0vCS54O9bhLoGcJ"}
+{"name":"c6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","date":"2024-06-02T17:25:30.774Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/c6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","type":"image/jpeg","size":424341,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fc6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"59oiOcwfsxcwtmyF"}
+{"name":"729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop (2).jpg","date":"2024-06-02T17:25:31.518Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop%20(2).jpg","type":"image/jpeg","size":519419,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop%20(2).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"JpKznRKXqbXqt1zl"}
+{"uuid":"59oiOcwfsxcwtmyF","deleted":true}
+{"name":"glitch1.jpg","date":"2024-06-02T17:25:30.774Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch1.jpg","type":"image/jpeg","size":424341,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Fc6ef145d-2185-4761-a943-00f48e5c9d93.glitch-art-desktop.jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"59oiOcwfsxcwtmyF"}
+{"uuid":"JpKznRKXqbXqt1zl","deleted":true}
+{"name":"glitch2.jpg","date":"2024-06-02T17:25:31.518Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg","type":"image/jpeg","size":519419,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F729b1214-a441-499f-8b09-0e8d820cbeaa.glitch-art-desktop%20(2).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"JpKznRKXqbXqt1zl"}
+{"uuid":"v0vCS54O9bhLoGcJ","deleted":true}
+{"name":"glich3.jpg","date":"2024-06-02T17:25:30.638Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glich3.jpg","type":"image/jpeg","size":489485,"imageWidth":2880,"imageHeight":1800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F23e5b0b2-d99f-4f23-9ac8-12e966738d48.glitch-art-desktop%20(1).jpg","thumbnailWidth":330,"thumbnailHeight":207,"uuid":"v0vCS54O9bhLoGcJ"}
+{"name":"8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","date":"2024-06-02T18:31:27.051Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","type":"image/png","size":2624160,"imageWidth":1200,"imageHeight":1200,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T6g81VqtzSI3OCCx"}
+{"uuid":"T6g81VqtzSI3OCCx","deleted":true}
+{"name":"oblitus-requiem.png","date":"2024-06-02T18:31:27.051Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png","type":"image/png","size":2624160,"imageWidth":1200,"imageHeight":1200,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T6g81VqtzSI3OCCx"}

assets/css/main.css

@@ -1,87 +1,316 @@
+body {
+  margin: 0px;
+}
+main {
+  font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
+  margin: 0.75rem;
+}
+hr {
+  margin: 2rem 0px;
+}
 nav {
-  z-index: 3;
+  z-index: 4;
   position: -webkit-sticky;
   position: sticky;
-  top: 0.5rem;
+  top: 10px;
   background-color: #f5f5f5;
-  font-family: Jost, "Noto Sans Japanese", sans-serif;
+  font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
-  padding: 0.1rem;
+  font-size: 1.25rem;
-  margin: 0.2rem;
+  padding: 4px;
-  margin-top: 1rem;
+  margin: 10px;
+  margin-top: 15px;
   border-radius: 12px;
   box-shadow: 0px 0px 12px 0.1px #d0d0d0;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
   ul {
-    padding-left: 1rem;
+    padding-left: 15px;
     list-style-type: none;
     margin: 0px;
-    margin-bottom: 0.4rem;
+    align-content: center;
     li {
       display: inline-block;
-      padding-right: 0.25rem;
+      padding-right: 4px;
       vertical-align: middle;
       p {
         padding-top: 0.4rem;
         vertical-align: middle;
-        margin: 1rem 1rem;
+        margin: 0.5rem 1rem;
       }
     }
     img {
       margin-top: 0.25rem;
       height: 1.5rem;
       vertical-align: middle;
-      padding-right: 0.25rem;
+      padding-right: 0.3rem;
     }
   }
+  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;
+  }
   .vertical-line {
     width: 0.1rem;
     background-color: black;
     height: 100%;
   }
-  a {
+  .social {
-    color: black;
+    font-size: 2.5rem;
-    text-decoration: none;
+    padding-bottom: 0.4rem;
+    transition: 0.3s;
+  }
+  .social:hover {
+    opacity: 50%;
   }
 }
-/*main {
+
-    position: relative;
+footer {
-}*/
+  font-family: Jost, "Noto Sans Japanese", sans-serif;
+  background-color: white;
+  bottom: 0px;
+  z-index: 3;
+  padding: 1rem;
+  background-color: #ddd;
+  margin: 0px;
+  margin-top: 1rem;
+  text-align: center;
+}
+
+/*---nav---*/
+
+.menu {
+  padding-top: 0.4rem;
+  padding-bottom: 0.8rem;
+  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;
+  }
+  p:hover,
+  .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.25s ease-in-out;
+  span {
+    transition: 0.25s ease-in-out;
+    box-sizing: border-box;
+    display: block;
+    background-color: #000;
+    border-radius: 2px;
+  }
+  #hamburger {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0%;
+    left: 0%;
+    span {
+      width: 70%;
+      height: 5%;
+      top: 17.5%;
+      left: 16%;
+      position: relative;
+      margin: 12% 0;
+    }
+    span:nth-child(1) {
+      transition-delay: 0.3s;
+    }
+    span:nth-child(2) {
+      transition-delay: 0.4s;
+    }
+    span:nth-child(3) {
+      transition-delay: 0.5s;
+    }
+  }
+  #cross {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 0%;
+    left: 1.5%;
+    transform: rotate(45deg);
+
+    span:nth-child(1) {
+      height: 0%;
+      width: 5%;
+      position: absolute;
+      right: 46%; /*a / */
+      top: 10%;
+      transform: translate(-50%);
+      transition-delay: 0s;
+    }
+    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%;
+    }
+    span:nth-child(1) {
+      transition-delay: 0s;
+    }
+    span:nth-child(2) {
+      transition-delay: 0.1s;
+    }
+    span:nth-child(3) {
+      transition-delay: 0.2s;
+    }
+  }
+  #cross {
+    span:nth-child(1) {
+      height: 80%;
+      transition-delay: 0.3s;
+    }
+    span:nth-child(2) {
+      width: 80%;
+      transition-delay: 0.3s;
+    }
+  }
+}
+
+.dropdown {
+  display: none;
+}
+
+/*---- main ----*/
 .container {
   position: relative;
   height: 50vw;
-  width: 95%;
+  width: 100%;
   margin: auto;
   margin-top: 1rem;
 }
 .carousel {
+  z-index: 1;
   width: 100%;
   height: 100%;
-  border: 1px solid #DDD;
+  border: 1px solid #ddd;
-  border-radius: 7px;
+  border-radius: 0.5rem;
   position: relative;
+  overflow: hidden;
 }
-.slider {
+.slider-bg {
-  width: 100%;
   height: 100%;
-}
+  width: 100%;
-.slider section {
+  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;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
   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: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
+  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;
+  }
+  h1 {
+    font-size: 2rem;
+    grid-row-start: 2;
+    grid-row-end: 3;
+  }
+  p {
+    font-size: 1.25rem;
+    grid-row-start: 3;
+    grid-row-end: 4;
+  }
+  p,
+  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: 4rem;
+  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;
@@ -90,23 +319,365 @@ nav {
   left: 1rem;
 }
 .pgctrl {
+  z-index: 1;
   position: absolute;
-  bottom: 0px;
+  bottom: 0.5rem;
   left: 50%;
+  vertical-align: middle;
   transform: translate(-50%);
-  padding: 0px;
+  padding: 0px 0.5rem;
-  margin: 0px;
+  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;
 }
 
-footer {
+/* Cards */
-  font-family: Jost, "Noto Sans Japanese", sans-serif;
+
+.album-cards {
+  margin: auto;
+  justify-content: center;
+  display: grid;
+  grid-template-rows: repeat(auto-fill, 23rem);
+  grid-template-columns: repeat(auto-fill, 23rem);
+  grid-gap: 1rem;
+  .card {
+    transition: 0.75s;
+    color: black;
+    background-color: #ddd;
+    height: 23rem;
+    border-radius: 7px;
+    text-decoration: none;
+    div {
+      z-index: 1;
+      position: inherit;
+      height: 100%;
+      width: 100%;
+      background-color: #ddd;
+      border-radius: 7px;
+      transition: 0.5s;
+    }
+    h2 {
+      font-size: 1.9rem;
+    }
+    p {
+      font-size: 1.2rem;
+    }
+    h2,
+    p {
+      color: white;
+      padding: 0.3rem 0.75rem 0.3rem 0.75rem;
+      position: relative;
+      z-index: 3;
+      opacity: 0;
+      transition: 0.5s;
+    }
+    .bg-img {
+      /*       background: url(/assets/img/t404_null-logo.png); */
+      background-size: cover;
+      position: absolute;
+      height: 23rem;
+      width: 23rem;
+    }
+  }
+  .card:hover {
+    .bg-img {
+      filter: blur(5px) brightness(50%);
+      -webkit-filter: blur(5px) brightness(50%);
+    }
+    h2,
+    p {
+      filter: none;
+      opacity: 1;
+    }
+  }
+}
+
+.half-image-cards {
+  margin: auto;
+  justify-content: center;
+  display: grid;
+  grid-template-rows: repeat(auto-fill, 23rem);
+  grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
+  grid-gap: 1rem;
+  .card {
+    transition: 0.75s;
+    color: black;
+    background-color: #ddd;
+    height: 23rem;
+    border-radius: 7px;
+    text-decoration: none;
+    div {
+      z-index: 1;
+      position: inherit;
+      height: 100%;
+      width: 100%;
+      background-color: #ddd;
+      border-radius: 7px;
+      transition: 0.5s;
+    }
+    h2 {
+      font-size: 1.9rem;
+    }
+    p {
+      font-size: 1.1rem;
+    }
+    h2,
+    p {
+      /*       color: black; */
+      padding: 0.3rem 10vw 0.3rem 5vw;
+      position: relative;
+      z-index: 3;
+      opacity: 0;
+      transition: 0.5s;
+    }
+    .bg-img {
+      /*       background: url(/assets/img/t404_null-logo.png); */
+      background-size: cover;
+      position: absolute;
+      background-position: center left;
+      height: 23rem;
+      width: 30rem;
+    }
+  }
+  .card:hover {
+    .bg-img {
+      filter: brightness(40%);
+      -webkit-filter: brightness(40%);
+      width: 8vw;
+      border-radius: 7px 0px 0px 7px;
+    }
+    h2,
+    p {
+      padding: 0.3rem 5vw 0.3rem 10vw;
+      filter: none;
+      opacity: 1;
+    }
+  }
+}
+
+.topic {
+  padding: 1rem;
+  font-size: 3rem;
+  margin-top: 3vw;
+  margin-bottom: 7vw;
+  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;
+  }
+  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;
+  padding: 5% 20%;
+  strong {
+    color: #fff;
+  }
+  .text-box {
+    background-color: rgba(0, 0, 0, 75%);
+    color: #ddd;
+    padding: 2rem;
+    border-radius: 7px;
+    font-size: 1.2rem;
+    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;
+    }
+    a:hover {
+      color: #ccc;
+      background-size: 100% 0.2em;
+    }
+  }
+}
+
+@media screen and (min-width: 1125px) and (max-width: 1620px) {
+  /*if(width<1700px&&width>=1335px)*/
+
+  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;
+      opacity: 0;
+      transition: 0.3s;
+      display: none;
+      .dropdown-social {
+        position: relative;
+        width: 17.5rem;
+        padding: 0rem 0rem;
+        a {
+          transition: 0.2s;
+          display: flex;
+          padding: 1rem;
+          border-radius: 7px;
+          margin: 0.3rem 0;
+        }
+        a:hover {
+          background-color: #ddd;
+        }
+        strong {
+          margin-left: auto;
+          margin-right: auto;
+          align-content: center;
+        }
+        p {
+          margin: 0.5rem 0;
+        }
+      }
+      .dropdown-menu {
+        display: none;
+      }
+    }
+    .menu,
+    .dropdown-open.dropdown,
+    .dropdown-open.dropdown-social {
+      opacity: 1;
+      display: initial;
+    }
+    .social,
+    .dropdown-open.dropdown-menu {
+      opacity: 0;
+      display: none;
+    }
+    .burger {
+      display: block;
+    }
+  }
+}
+
+@media screen and not (min-width: 1125px) {
+  /*if(width<1185px)*/
+
+  nav {
+    font-size: 1.4rem;
+    ul {
+      img {
+        height: 2.5rem;
+      }
+    }
+    .social {
+      font-size: 2rem;
+    }
+
+    .burger {
+      height: 100px;
+      width: 100px;
+    }
+    .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;
+      .dropdown-social,
+      .dropdown-menu {
+        position: relative;
+      }
+      .dropdown-menu {
+        width: 18rem;
+        padding: 0rem 0rem;
+      }
+      .dropdown-social {
+        display: flex;
+        flex-wrap: wrap;
+      }
+      .dropdown-menu p,
+      .dropdown-social a {
+        transition: 0.2s;
+        padding: 1rem;
+        border-radius: 7px;
+        margin: 0.3rem 0;
+      }
+      .dropdown-menu p:hover {
+        background-color: #ddd;
+      }
+
+      .dropdown-social a:hover {
+        opacity: 50%;
+      }
+      hr {
+        margin: 0.75rem 0rem;
+        padding: 1rem;
+        border: 1px solid #aaa;
+      }
+    }
+    .social-name {
+      display: none;
+    }
+    .social,
+    .menu-item {
+      display: none;
+    }
+    .dropdown-open {
+      transition: 0.3s;
+      opacity: 1;
+      display: initial;
+      .dropdown,
+      .dropdown-social,
+      .downdown-menu {
+        display: initial;
+      }
+    }
+    .burger {
+      display: block;
+    }
+  }
 }

assets/js/index.js

@@ -1,10 +1,18 @@
-console.log(document);
 let next = document.querySelector(".next");
 let prev = document.querySelector(".prev");
-let pgctrl = document.querySelectorAll(".pgctrl li");
+let pgctrl = [document.querySelector(".pgctrl")];
 let slider = document.querySelector(".slider");
 let carousel = document.querySelector(".carousel");
 
+let bg = document.querySelector(".slider-bg");
+
+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",
+];
+let pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"];
+
 if (!document) console.log("press f");
 if (!next) console.log("Class next missing.");
 if (!prev) console.log("Class prev missing.");
@@ -15,24 +23,42 @@ let slider_index = 0;
 let touchstartX = 0;
 let touchendX = 0;
 
-function reset() {
+//page control
-  for (var i = 0; i < slider.children.length; i++) {
+for (var i = 0; i < slider.children.length; i++) {
-    slider.children[i].style.opacity = 0;
+  let button = document.createElement("li");
-    slider.children[i].style.zIndex = 0;
+  let n = i;
-    pgctrl[i].style.opacity = 0.4;
+  button.textContent = "•"; //&bull; not &middot;
-  }
+  pgctrl[0].append(button);
 }
+pgctrl.push(document.querySelectorAll(".pgctrl li"));
+if (pgctrl[1])
+  pgctrl[1].forEach((m, n) =>
+    m.addEventListener("click", function () {
+      reset();
+      slider_index = n;
+      set();
+    })
+  );
+
+//refresh
 reset();
 set();
 function set() {
   slider.children[slider_index].style.opacity = 1;
   slider.children[slider_index].style.zIndex = 1;
-  pgctrl[slider_index].style.opacity = 1;
+  pgctrl[0].children[slider_index].style.opacity = 1;
+  if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
 }
 
-function dropdown_toggle() {
+function reset() {
-  //
+  for (var i = 0; i < slider.children.length; i++) {
+    slider.children[i].style.opacity = 0;
+    slider.children[i].style.zIndex = 0;
+    pgctrl[0].children[i].style.opacity = 0.4;
+    if (bg) bg.style.backgroundImage = null;
+  }
 }
+
 function nxt() {
   reset();
   //console.log("next");
@@ -64,18 +90,14 @@ if (next) {
 //previous
 if (prev) prev.addEventListener("click", prv);
 
-//page control
+slider.onclick = function () {
-pgctrl.forEach(function (n, m) {
+  location.assign(pg[slider_index]);
-  n.addEventListener("click", function () {
+};
-    reset();
-    slider_index = m;
-    set();
-  });
-});
 
+//touchswipe control
 function checkX() {
-  if (touchendX < touchstartX && touchstartX - touchendX > 50) nxt();
+  if (touchendX < touchstartX && touchstartX - touchendX > 60) nxt();
-  if (touchendX > touchstartX && touchendX - touchstartX > 50) prv();
+  if (touchendX > touchstartX && touchendX - touchstartX > 60) prv();
 }
 //slider.children.forEach((carousel, num) => {
 carousel.addEventListener("touchstart", (e) => {
@@ -85,6 +107,5 @@ carousel.addEventListener("touchend", (e) => {
   touchendX = e.changedTouches[0].screenX;
   checkX();
 });
-//});
 
 //location.reload(true);

index.html

@@ -2,72 +2,360 @@
 <html lang="en">
   <head>
     <title>t404:null | Home</title>
+    <meta
+      name="description"
+      content="Hello there! I'm t404:null (a.k.a t404owo).
+I write/make/produce EDM music(DTM), and for every releases I'll post my music on this website. If you have any requests or questions, feel free contact me."
+    />
     <link
       rel="icon"
       type="image/x-icon"
       href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png"
     />
+    <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
   </head>
+
   <body>
     <nav>
-      <ul>
+      <ul class="menu">
         <li>
           <a href="/">
-            <img src="/assets/img/logo.png" alt="t404:null" />
+            <img
+              src="https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/logo.png?v=1716494259675"
+              alt="t404:null"
+            />
           </a>
         </li>
-        <li><div class="vertical-line"></div></li>
         <li>
-          <a href="/"
+          <div class="vertical-line"></div>
-            ><p><strong>Home</strong></p></a
-          >
         </li>
-        <li>
+        <li class="menu-item">
-          <a href="/release"
+          <a href="/">
-            ><p><strong>Releases</strong></p></a
+            <p><strong>Home</strong></p>
-          >
+          </a>
         </li>
-        <li>
+        <li class="menu-item">
-          <a href="/songe_usage_terms"
+          <a href="/release">
-            ><p><strong>Terms of Use</strong></p></a
+            <p><strong>Releases</strong></p>
-          >
+          </a>
         </li>
-        <li>
+        <li class="menu-item">
-          <a href="/about_me"
+          <a href="/activity">
-            ><p><strong>About Me</strong></p></a
+            <p><strong>Activities</strong></p>
-          >
+          </a>
         </li>
-        <li>
+        <li class="menu-item">
-          <a href="/contacts"
+          <a href="/song_usage_terms">
-            ><p><strong>My Contacts</strong></p></a
+            <p><strong>Terms of Use</strong></p>
-          >
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/about_me">
+            <p><strong>About Me</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/contacts">
+            <p><strong>My Contacts</strong></p>
+          </a>
         </li>
       </ul>
+      <div></div>
+      <ul id="social">
+        <li class="social">
+          <a href="https://youtube.com/@t404_null">
+            <p class="nf-icons">&#xf16a;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://x.com/t404_null">
+            <p>&Xopf;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://t404null.bandcamp.com/">
+            <p class="nf-icons">&#xf2d5;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://open.spotify.com/artist/7jNOPuWk28EUX69mrp4ITL/">
+            <p class="nf-icons">&#xf04c7;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://music.apple.com/artist/t404-null/1583561849">
+            <p class="nf-icons">&#xf2eb;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://soundcloud.com/t404null">
+            <p class="nf-icons">&#xf1be;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://discord.gg/YJmkAFbKFX">
+            <p class="nf-icons">&#xf1ff;</p>
+          </a>
+        </li>
+        <li>
+          <button
+            class="burger"
+            onclick="this.classList.toggle('open');
+                                document.querySelector('.dropdown').classList.toggle('dropdown-open');"
+          >
+            <div id="hamburger">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div id="cross">
+              <span></span>
+              <span></span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <div class="dropdown">
+        <div class="dropdown-menu">
+          <a href="/">
+            <p><strong>Home</strong></p>
+          </a>
+          <a href="/release">
+            <p><strong>Releases</strong></p>
+          </a>
+          <a href="/activity">
+            <p><strong>Activities</strong></p>
+          </a>
+          <a href="/song_usage_terms">
+            <p><strong>Terms of Use</strong></p>
+          </a>
+          <a href="/about_me">
+            <p><strong>About Me</strong></p>
+          </a>
+          <a href="/contacts">
+            <p><strong>My Contacts</strong></p>
+          </a>
+        </div>
+        <hr class="dropdown-menu" />
+        <div class="dropdown-social">
+          <p>
+            <a href="https://youtube.com/@t404_null">
+              <span class="icons nf-icons">&#xf16a;</span
+              ><strong class="social-name">Youtube</strong>
+            </a>
+            <a href="https://x.com/t404_null">
+              <span class="icons"> &Xopf; </span
+              ><strong class="social-name">X/Twitter</strong>
+            </a>
+            <a href="https://t404null.bandcamp.com/">
+              <span class="icons nf-icons">&#xf2d5;</span
+              ><strong class="social-name">Bandcamp</strong>
+            </a>
+            <a href="https://open.spotify.com/artist/7jNOPuWk28EUX69mrp4ITL/">
+              <span class="icons nf-icons">&#xf04c7;</span
+              ><strong class="social-name">Spotify</strong>
+            </a>
+          </p>
+          <p>
+            <a href="https://music.apple.com/artist/t404-null/1583561849">
+              <span class="icons nf-icons">&#xf2eb;</span
+              ><strong class="social-name">Apple Music</strong>
+            </a>
+            <a href="https://soundcloud.com/t404null">
+              <span class="icons nf-icons">&#xf1be;</span
+              ><strong class="social-name">SoundCloud</strong>
+            </a>
+            <a href="https://discord.gg/YJmkAFbKFX">
+              <span class="icons nf-icons">&#xf1ff;</span
+              ><strong class="social-name">Discord</strong>
+            </a>
+          </p>
+        </div>
+      </div>
     </nav>
     <main>
       <div class="container">
         <div class="carousel">
+          <div class="slider-bg"></div>
           <div class="slider">
-            <section>Obj 1</section>
+            <section>
-            <section>Obj 2</section>
+              <div>
-            <section>Obj 3</section>
+                <h1 class="title">Obj 1</h1>
+                <p class="desc">Obj 1</p>
+              </div>
+            </section>
+            <section>
+              <div>
+                <h1 class="title">Obj 2</h1>
+                <p class="desc">Obj 2</p>
+              </div>
+            </section>
+            <section>
+              <div>
+                <h1 class="title">Obj 3 (long text)</h1>
+                <p class="desc">
+                  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+                  diam nonumy eirmod tempor invidunt ut labore et dolore magna
+                  aliquyam
+                </p>
+              </div>
+            </section>
           </div>
           <div class="control">
             <span class="prev">&lt;</span>
             <span class="next">&gt;</span>
           </div>
-          <ul class="pgctrl">
+          <ul class="pgctrl"></ul>
-            <li>•</li>
-            <li>•</li>
-            <li>•</li>
-          </ul>
         </div>
       </div>
       <div></div>
       <script src="/assets/js/index.js" type="text/javascript"></script>
       <!--💀-->
+      <hr />
+      <h1 class="topic"><a href="/release">Releases (Click for more)</a></h1>
+      <div class="album-cards">
+        <a class="card" href="/release/hello.world(Zer/O)">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://t404null.glitch.me/assets/images/image0.png);
+            "
+          ></div>
+          <h2>hello.world(Zer/O)</h2>
+          <p>First Release</p>
+          <p>What do I see... a new world...?</p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
+            "
+          ></div>
+          <h2>PoΣΣεssion (Possession)</h2>
+          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
+          <p>Ghost and monsters are gathering you...</p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
+            "
+          ></div>
+          <h2>Hyper Liminality</h2>
+          <p>t404:null &amp; trung-nova &amp; AXiS</p>
+          <p>"until you reach it... the two hyper sides."</p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
+            "
+          ></div>
+          <h2>A Lake With Endless Stars</h2>
+          <p>
+            "Under the coruscating night sky, gaze into the kaleidoscopic
+            waters..."
+          </p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
+            "
+          ></div>
+          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
+          <p>VNMC2023 Grand Finals Tiebreaker.</p>
+          <p>
+            "Even if you don't remember me now, I will bring the you I once knew
+            back from them."
+          </p>
+        </a>
+      </div>
+
+      <h1 class="topic"><a href="/activity">Activities</a></h1>
+      <div class="half-image-cards">
+        <a class="card" href="/activity">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png);
+            "
+          ></div>
+          <h2>Fanmade of Fighters I: Genesis</h2>
+          <p>BOF-like Contest Releases.</p>
+          <p>
+            Our team (Sine Fine Stellae) Achieved #2 :D<br /><br /><strong
+              >A Lake With Endless Stars</strong
+            >
+            is one of the soundtracks from Sine Fine Stellae produced by me,
+            thanks to the help of Riprider500 and more people :D
+          </p>
+        </a>
+        <a class="card" href="/activity">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/vnmc2023.png?v=1717348650235);
+            "
+          ></div>
+          <h2>VNMC 2023</h2>
+          <p>
+            (Vietnamese National Mania Championship 2023) Grand Finals
+            Tiebreaker by me (t404:null)
+          </p>
+          <p>
+            <strong
+              >Oblitus Requiem &bsol;&bsol;Against the Forsaken Legacy//</strong
+            ><br /><br />
+            "Even if you don't remember me now, I will bring the you I once knew
+            back from them."
+            <br /><br />Sivelia (the host of VNMC) has asked me making a custom
+            soundtrack round for the tourney. The soundtrack get much likes and
+            subscribers on Youtube within 2 weeks as the tournament got a big
+            impact gained. Big thank you to all VNMC staffs for that!
+          </p>
+        </a>
+        <a class="card" href="/activity">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch1.jpg);
+            "
+          ></div>
+          <h2>VNMC 2024 (???)</h2>
+          <p>???</p>
+          <p>
+            Li4tLiAuLS0gLS4uIC0tLi4u<br />&bsol;-...-4buoe2v1qZuiULSrOPuzXZBn<br />YZt0ULSr9PuzvfuiaZwo5ZBseZB39<br />fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO
+          </p>
+        </a>
+        <a class="card" href="/project">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg);
+            "
+          ></div>
+          <h2>VNMC 2024 (???) (w/ ??? as ???)</h2>
+          <p>???</p>
+        </a>
+        <a class="card" href="/activity">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glich3.jpg);
+            "
+          ></div>
+          <h2>???? 5 (????2024) (w/ ??? as ???)</h2>
+          <p>???</p>
+          <p>???</p>
+        </a>
+      </div>
     </main>
-    <footer>&copy; t404:null 2021-2023 - All Rights Reserved</footer>
+    <footer>&copy; t404:null 2021-2024 - All Rights Reserved</footer>
   </body>
 </html>

release/hello.world(Zer/O)/index.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>t404:null | hello.world(Zer/O)</title>
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png"
+    />
+    <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
+  </head>
+
+  <body>
+    <nav>
+      <ul class="menu">
+        <li>
+          <a href="/">
+            <img
+              src="https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/logo.png?v=1716494259675"
+              alt="t404:null"
+            />
+          </a>
+        </li>
+        <li>
+          <div class="vertical-line"></div>
+        </li>
+        <li class="menu-item">
+          <a href="/">
+            <p><strong>Home</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/release">
+            <p><strong>Releases</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/activity">
+            <p><strong>Activities</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/song_usage_terms">
+            <p><strong>Terms of Use</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/about_me">
+            <p><strong>About Me</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/contacts">
+            <p><strong>My Contacts</strong></p>
+          </a>
+        </li>
+      </ul>
+      <div></div>
+      <ul id="social">
+        <li class="social">
+          <a href="https://youtube.com/@t404_null">
+            <p class="nf-icons">&#xf16a;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://x.com/t404_null">
+            <p>&Xopf;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://t404null.bandcamp.com/">
+            <p class="nf-icons">&#xf2d5;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://open.spotify.com/artist/7jNOPuWk28EUX69mrp4ITL/">
+            <p class="nf-icons">&#xf04c7;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://music.apple.com/artist/t404-null/1583561849">
+            <p class="nf-icons">&#xf2eb;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://soundcloud.com/t404null">
+            <p class="nf-icons">&#xf1be;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://discord.gg/YJmkAFbKFX">
+            <p class="nf-icons">&#xf1ff;</p>
+          </a>
+        </li>
+        <li>
+          <button
+            class="burger"
+            onclick="this.classList.toggle('open');
+                                document.querySelector('.dropdown').classList.toggle('dropdown-open');"
+          >
+            <div id="hamburger">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div id="cross">
+              <span></span>
+              <span></span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <div class="dropdown">
+        <div class="dropdown-menu">
+          <a href="/">
+            <p><strong>Home</strong></p>
+          </a>
+          <a href="/release">
+            <p><strong>Releases</strong></p>
+          </a>
+          <a href="/activity">
+            <p><strong>Activities</strong></p>
+          </a>
+          <a href="/song_usage_terms">
+            <p><strong>Terms of Use</strong></p>
+          </a>
+          <a href="/about_me">
+            <p><strong>About Me</strong></p>
+          </a>
+          <a href="/contacts">
+            <p><strong>My Contacts</strong></p>
+          </a>
+        </div>
+        <hr class="dropdown-menu" />
+        <div class="dropdown-social">
+          <p>
+            <a href="https://youtube.com/@t404_null">
+              <span class="icons nf-icons">&#xf16a;</span
+              ><strong class="social-name">Youtube</strong>
+            </a>
+            <a href="https://x.com/t404_null">
+              <span class="icons"> &Xopf; </span
+              ><strong class="social-name">X/Twitter</strong>
+            </a>
+            <a href="https://t404null.bandcamp.com/">
+              <span class="icons nf-icons">&#xf2d5;</span
+              ><strong class="social-name">Bandcamp</strong>
+            </a>
+            <a href="https://open.spotify.com/artist/7jNOPuWk28EUX69mrp4ITL/">
+              <span class="icons nf-icons">&#xf04c7;</span
+              ><strong class="social-name">Spotify</strong>
+            </a>
+          </p>
+          <p>
+            <a href="https://music.apple.com/artist/t404-null/1583561849">
+              <span class="icons nf-icons">&#xf2eb;</span
+              ><strong class="social-name">Apple Music</strong>
+            </a>
+            <a href="https://soundcloud.com/t404null">
+              <span class="icons nf-icons">&#xf1be;</span
+              ><strong class="social-name">SoundCloud</strong>
+            </a>
+            <a href="https://discord.gg/YJmkAFbKFX">
+              <span class="icons nf-icons">&#xf1ff;</span
+              ><strong class="social-name">Discord</strong>
+            </a>
+          </p>
+        </div>
+      </div>
+    </nav>
+    <main>
+      <div class="release-track"
+           style="background-image: url(https://t404null.glitch.me/assets/images/image1.png);background-size:cover;background-position:center;">
+        <div class="text-box">
+          <h1 class="title">
+            <strong>hello.world(Zer/O)</strong>
+          </h1>
+          <p class="description">
+            "What can I see... a new world...?<br />It appears, that I am living
+            in a world, where no-one lives..."<br /><br />"hello.world(Zer/O)"
+            is a first release from t404:null at 08.22.2021 on Youtube,
+            Bandcamp, and Soundcloud.<br />&nbsp;It was also the first song
+            t404:null makes with tons ”easter eggs” and mixed with more-styles
+            genre called ”Full-Flavor”(200step, UK Hardcore, Electronic, Dance,
+            and more..).<br /><br />Available in:<br /><a
+              href="https://music.apple.com/album/hello-world-zer-o-single/1583561848"
+              class="text-primary"
+              >Itunes/Apple Music</a
+            ><br /><a
+              href="https://open.spotify.com/album/0MX0zluXBvEerdCL12Cd1s"
+              class="text-primary"
+              >Spotify(Release date at 09.20.2021)</a
+            ><br /><a href="https://youtu.be/0apqJaWY5QM" class="text-primary"
+              >YouTube</a
+            ><br /><a
+              href="https://music.youtube.com/watch?v=kVX6kdnvhAo"
+              class="text-primary"
+              >YouTube Music(Release date at 09.20.2021)</a
+            ><br /><a
+              href="https://m.soundcloud.com/t404null/helloworldzero"
+              class="text-primary"
+              >Soundcloud</a
+            ><br /><a
+              href="https://t404null.bandcamp.com/album/hello-world-zer-o"
+              class="text-primary"
+              >Bandcamp</a
+            >
+          </p>
+        </div>
+      </div>
+    </main>
+    <footer>&copy; t404:null 2021-2024 - All Rights Reserved</footer>
+  </body>
+</html>

release/index.html

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>t404:null | Releases</title>
+    <meta
+      name="description"
+      content="Hello there! I'm t404:null (a.k.a t404owo).
+I write/make/produce EDM music(DTM), and for every releases I'll post my music on this website. If you have any requests or questions, feel free contact me."
+    />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png"
+    />
+    <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
+  </head>
+
+  <body>
+    <nav>
+      <ul class="menu">
+        <li>
+          <a href="/">
+            <img
+              src="https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/logo.png?v=1716494259675"
+              alt="t404:null"
+            />
+          </a>
+        </li>
+        <li>
+          <div class="vertical-line"></div>
+        </li>
+        <li class="menu-item">
+          <a href="/">
+            <p><strong>Home</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/release">
+            <p><strong>Releases</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/activity">
+            <p><strong>Activities</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/song_usage_terms">
+            <p><strong>Terms of Use</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/about_me">
+            <p><strong>About Me</strong></p>
+          </a>
+        </li>
+        <li class="menu-item">
+          <a href="/contacts">
+            <p><strong>My Contacts</strong></p>
+          </a>
+        </li>
+      </ul>
+      <div></div>
+      <ul id="social">
+        <li class="social">
+          <a href="https://youtube.com/@t404_null">
+            <p class="nf-icons">&#xf16a;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://x.com/t404_null">
+            <p>&Xopf;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://t404null.bandcamp.com/">
+            <p class="nf-icons">&#xf2d5;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://open.spotify.com/artist/7jNOPuWk28EUX69mrp4ITL/">
+            <p class="nf-icons">&#xf04c7;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://music.apple.com/artist/t404-null/1583561849">
+            <p class="nf-icons">&#xf2eb;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://soundcloud.com/t404null">
+            <p class="nf-icons">&#xf1be;</p>
+          </a>
+        </li>
+        <li class="social">
+          <a href="https://discord.gg/YJmkAFbKFX">
+            <p class="nf-icons">&#xf1ff;</p>
+          </a>
+        </li>
+        <li>
+          <button
+            class="burger"
+            onclick="this.classList.toggle('open');
+                                document.querySelector('.dropdown').classList.toggle('dropdown-open');"
+          >
+            <div id="hamburger">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div id="cross">
+              <span></span>
+              <span></span>
+            </div>
+          </button>
+        </li>
+      </ul>
+      <div class="dropdown">
+        <div class="dropdown-menu">
+          <a href="/">
+            <p><strong>Home</strong></p>
+          </a>
+          <a href="/release">
+            <p><strong>Releases</strong></p>
+          </a>
+          <a href="/activity">
+            <p><strong>Activities</strong></p>
+          </a>
+          <a href="/song_usage_terms">
+            <p><strong>Terms of Use</strong></p>
+          </a>
+          <a href="/about_me">
+            <p><strong>About Me</strong></p>
+          </a>
+          <a href="/contacts">
+            <p><strong>My Contacts</strong></p>
+          </a>
+        </div>
+        <hr class="dropdown-menu" />
+        <div class="dropdown-social">
+          <p>
+            <a href="https://youtube.com/@t404_null">
+              <span class="icons nf-icons">&#xf16a;</span
+              ><strong class="social-name">Youtube</strong>
+            </a>
+            <a href="https://x.com/t404_null">
+              <span class="icons"> &Xopf; </span
+              ><strong class="social-name">X/Twitter</strong>
+            </a>
+            <a href="https://t404null.bandcamp.com/">
+              <span class="icons nf-icons">&#xf2d5;</span
+              ><strong class="social-name">Bandcamp</strong>
+            </a>
+            <a href="https://open.spotify.com/artist/7jNOPuWk28EUX69mrp4ITL/">
+              <span class="icons nf-icons">&#xf04c7;</span
+              ><strong class="social-name">Spotify</strong>
+            </a>
+          </p>
+          <p>
+            <a href="https://music.apple.com/artist/t404-null/1583561849">
+              <span class="icons nf-icons">&#xf2eb;</span
+              ><strong class="social-name">Apple Music</strong>
+            </a>
+            <a href="https://soundcloud.com/t404null">
+              <span class="icons nf-icons">&#xf1be;</span
+              ><strong class="social-name">SoundCloud</strong>
+            </a>
+            <a href="https://discord.gg/YJmkAFbKFX">
+              <span class="icons nf-icons">&#xf1ff;</span
+              ><strong class="social-name">Discord</strong>
+            </a>
+          </p>
+        </div>
+      </div>
+    </nav>
+    <main>
+      <h1 class="topic">Releases</h1>
+      <div class="album-cards">
+        <a class="card" href="/release/hello.world(Zer/O)">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://t404null.glitch.me/assets/images/image0.png);
+            "
+          ></div>
+          <h2>hello.world(Zer/O)</h2>
+          <p>First Release</p>
+          <p>What do I see... a new world...?</p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
+            "
+          ></div>
+          <h2>PoΣΣεssion (Possession)</h2>
+          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
+          <p>Ghost and monsters are gathering you...</p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
+            "
+          ></div>
+          <h2>Hyper Liminality</h2>
+          <p>t404:null &amp; trung-nova &amp; AXiS</p>
+          <p>"until you reach it... the two hyper sides."</p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
+            "
+          ></div>
+          <h2>A Lake With Endless Stars</h2>
+          <p>
+            "Under the coruscating night sky, gaze into the kaleidoscopic
+            waters..."
+          </p>
+        </a>
+        <a class="card" href="/release">
+          <div
+            class="bg-img"
+            style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
+            "
+          ></div>
+          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
+          <p>VNMC2023 Grand Finals Tiebreaker.</p>
+          <p>
+            "Even if you don't remember me now, I will bring the you I once knew
+            back from them."
+          </p>
+        </a>
+      </div>
+    </main>
+    <footer>&copy; t404:null 2021-2024 - All Rights Reserved</footer>
+  </body>
+</html>