diff --git a/about_me/index.html b/about_me/index.html index 7e69ece..203a7ea 100644 --- a/about_me/index.html +++ b/about_me/index.html @@ -1,229 +1,251 @@ - + - - t404:null | About Me - - - - - + /> + + + + - - +
+
+

Hi there!

+
+

I'm t404:null (a.k.a t404owo).

+

+ I write/make music (DTM), and I'll post every releases + and events on this website. I also do program and + develope stuffs (as t404owo). +

+

+ To be honest, I currently am a highschool student and + producing songs is still a part-time thing for me. And + since I'm not too experienced at making songs. I hope + you can help and support me for reaching my 1st goal + being an artist/producer like Camellia, Au5/Blacklolita + or BlackY. :D +

+

+ About my songs / soundtracks: +
The music genre I enjoy to make is hard-EDM + (includes Hardcore, Dubstep and more...) or + melodic/orchestric, I might make music with styles those + seem simillar to Camellia's, Blacklolita's or any + artist's musics. +

+

+ If you have any requests or questions, feel free to + contact me. +

+
- - - -
-
- -

- Home -

- - -

- Releases -

- - -

- Activities -

- - -

- Terms of Use -

- - -

- About Me -

- - -

- My Contacts -

- +
+
+ © t404:null 2021-2025 - All Rights Reserved
-
-
-

- - - - - - - - - - - - - - 󰓇 - - -

-

- - - - - - - - - - - - -

-
- - -
-
-

Hi there!

-
-

I'm t404:null (a.k.a t404owo).

-

- I write/make music (DTM), and I'll post every releases and events on - this website. I also do program and develope stuffs (as t404owo). -

-

- To be honest, I currently am a highschool student and producing - songs is still a part-time thing for me. And since I'm not too - experienced at making songs. I hope you can help and support me for - reaching my 1st goal being an artist/producer like Camellia, - Au5/Blacklolita or BlackY. :D -

-

- About my songs / soundtracks: -
The music genre I enjoy to make is hard-EDM (includes Hardcore, Dubstep and more...) or melodic/orchestric, I might make music with styles those seem simillar to Camellia's, Blacklolita's or any artist's musics. -

-

- If you have any requests or questions, feel free to contact me. -

-
-
-
-
© t404:null 2021-2025 - All Rights Reserved
- + diff --git a/activity/index.html b/activity/index.html index 7b33257..eeb895a 100644 --- a/activity/index.html +++ b/activity/index.html @@ -1,283 +1,301 @@ - + - - t404:null | Activities / Previous Events - - - - - + /> + + + + - - +
+

Activities

+
+ +
+

Fanmade of Fighters I: Genesis

+

BOF-like Contest Releases.

+

+ Our team (Sine Fine Stellae) Achieved #2 :D

A Lake With Endless Stars + is one of the soundtracks from Sine Fine Stellae + produced by me, thanks to the help of Riprider500 and + more people :D +

+ + +
+

VNMC 2023

+

+ (Vietnamese National Mania Championship 2023) Grand + Finals Tiebreaker by me (t404:null) +

+

+ Oblitus Requiem \\Against the Forsaken + Legacy//

+ "Even if you don't remember me now, I will bring the you + I once knew back from them." +

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! +

+ + +
+

VNMC 2024 (???)

+

???

+

+ Li4tLiAuLS0gLS4uIC0tLi4u
\-...-4buoe2v1qZuiULSrOPuzXZBn
YZt0ULSr9PuzvfuiaZwo5ZBseZB39
fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO +

+ + +
+

VNMC 2024 (???) (w/ ??? as ???)

+

???

+ + +
+

???? 5 (????2024) (w/ ??? as ???)

+

???

+

???

+
- - - -
-
- -

- Home -

- - -

- Releases -

- - -

- Activities -

- - -

- Terms of Use -

- - -

- About Me -

- - -

- My Contacts -

- +
+
+ © t404:null 2021-2025 - All Rights Reserved
-
-
-

- - - - - - - - - - - - - - 󰓇 - - -

-

- - - - - - - - - - - - -

-
- - -
-

Activities

-
- -
-

Fanmade of Fighters I: Genesis

-

BOF-like Contest Releases.

-

- Our team (Sine Fine Stellae) Achieved #2 :D

A Lake With Endless Stars - is one of the soundtracks from Sine Fine Stellae produced by me, - thanks to the help of Riprider500 and more people :D -

- - -
-

VNMC 2023

-

- (Vietnamese National Mania Championship 2023) Grand Finals - Tiebreaker by me (t404:null) -

-

- Oblitus Requiem \\Against the Forsaken Legacy//

- "Even if you don't remember me now, I will bring the you I once knew - back from them." -

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! -

- - -
-

VNMC 2024 (???)

-

???

-

- Li4tLiAuLS0gLS4uIC0tLi4u
\-...-4buoe2v1qZuiULSrOPuzXZBn
YZt0ULSr9PuzvfuiaZwo5ZBseZB39
fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO -

- - -
-

VNMC 2024 (???) (w/ ??? as ???)

-

???

- - -
-

???? 5 (????2024) (w/ ??? as ???)

-

???

-

???

- -
-
-
© t404:null 2021-2025 - All Rights Reserved
- + diff --git a/assets/css/main.css b/assets/css/main.css index 416f00b..bb6eb2e 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -12,6 +12,7 @@ main, textarea, textfield { font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; + font-size: 1.25rem; } main { @@ -27,6 +28,10 @@ main { margin: 0 auto; } +.logo { + height: 3.5rem; +} + hr { margin: 2rem 0px; } @@ -604,6 +609,7 @@ nav { margin-top: 0.5rem; margin-left:-5px; padding: 5px; + font-size:0.95rem; } :not(textarea) { @@ -676,7 +682,6 @@ nav { textarea, textfield { padding: 5px; - font-size: 0.95rem; resize: vertical; min-height: 5rem; } @@ -944,4 +949,4 @@ textfield { display: block; } } -} \ No newline at end of file +} diff --git a/assets/css/old.css b/assets/css/old.css index f19649d..4269c06 100644 --- a/assets/css/old.css +++ b/assets/css/old.css @@ -2,34 +2,6 @@ @import url("/assets/css/fonts/noto-sans-jp.css"); @import url("/assets/css/fonts/plus-jarkata-sans.css"); -body { - margin: 0px; - height: 100%; -} - -main, -textarea, -textfield { - font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; -} - -main { - margin: 0.75rem; - height: 100%; - margin-bottom: 0; - margin-top: 0; - min-height: calc(100vh - 10vh); -} - -.main-page { - max-width: 2300px; - margin: 0 auto; -} - -hr { - margin: 2rem 0px; -} - nav { z-index: 4; position: -webkit-sticky; @@ -116,24 +88,6 @@ nav .dropdown { 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; @@ -265,51 +219,7 @@ nav .dropdown { transition-delay: 0.3s; } -.dropdown { - display: none; - overflow: auto; - max-height: 70vh; -} - /*---- 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; @@ -362,67 +272,6 @@ nav .dropdown { 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; @@ -590,6 +439,7 @@ nav .dropdown { margin-top: 0.5rem; margin-left: -5px; padding: 5px; + font-size: 0.95rem; } .contact-email :not(textarea) { @@ -657,14 +507,6 @@ nav .dropdown { margin-bottom: 1rem; } -textarea, -textfield { - padding: 5px; - font-size: 0.95rem; - resize: vertical; - min-height: 5rem; -} - .topic { padding: 1rem; font-size: 3rem; @@ -688,21 +530,6 @@ textfield { 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; @@ -776,15 +603,6 @@ textfield { font-size: 1.6rem; } -.subdiv { - padding: 1rem; -} - -.long-br { - display: block; - height: 2rem; -} - @media screen and (width >=1180px) and (width<=1690px) { /*if(width<1620px&&width>=1125px)*/ @@ -919,4 +737,4 @@ textfield { nav .burger { display: block; } -} \ No newline at end of file +} diff --git a/assets/js/index.js b/assets/js/index.js index 8b2c414..db41dea 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -17,8 +17,8 @@ half_img_cards = document.querySelector(".half-image-cards"); import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm"; const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co"; -const supabaseKey = - "sb_publishable_b0fMYw5I1X97gQXJLVBnrA_-0L4qHGv"; +const supabaseKey = "sb_publishable_b0fMYw5I1X97gQXJLVBnrA_-0L4qHGv"; + //anon key, you cant access private stuffs or add hilarious stuffs w/ this... //(unless sending me some malicious links but I delete your msg) //the moment you notice you need an API endpoint. diff --git a/assets/js/mail.js b/assets/js/mail.js index d39a0e6..46f1d00 100644 --- a/assets/js/mail.js +++ b/assets/js/mail.js @@ -13,7 +13,8 @@ const form = document.getElementById("mail-form"), emailInput = document.getElementById("email"), subjectInput = document.getElementById("subject"), messageInput = document.getElementById("message"), - statusMessage = document.querySelector(".box"); + statusMessage = document.querySelector(".box"), + submitButton = form.querySelector('button[type="submit"]');; form.addEventListener("submit", async (e) => { e.preventDefault(); @@ -23,14 +24,16 @@ form.addEventListener("submit", async (e) => { const subject = subjectInput.value.trim(); const message = messageInput.value.trim(); - if (!name || !email || !subject || !message || - name.length==0 || email.length==0 || subject.length==0 || message.length==0) { - statusMessage.textContent = "Please fill in all fields."; - statusMessage.style = "background: #FFDCDC"; - return; - } - + try { + + [name, email, subject, message].forEach(obj => { + if (!obj || obj.length===0) { + throw new Error("field_missing"); + } + }); + + if (submitButton) submitButton.disabled = true; const { data, error } = await supabase .from("mail") .insert([{ name, email, subject, message }]); @@ -38,13 +41,19 @@ form.addEventListener("submit", async (e) => { if (error) { throw error; } - + statusMessage.textContent = "Message sent successfully!"; statusMessage.style = "background: #DDF6D2"; form.reset(); + if (submitButton) submitButton.disabled = false; } catch (error) { console.error("Error sending message:", error); - statusMessage.textContent = "Error sending message. Please try again."; + statusMessage.textContent = (error.message === "field_missing") ? + /*if (error==="field_missing")*/ + "Please fill in all fields." : + /*else*/ + "Error sending message. Please try again."; statusMessage.style = "background: #FFDCDC"; + if (submitButton) submitButton.disabled = false; } }); diff --git a/assets/svg/applemusic.svg b/assets/svg/applemusic.svg new file mode 100644 index 0000000..befa88d --- /dev/null +++ b/assets/svg/applemusic.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/bandcamp.svg b/assets/svg/bandcamp.svg new file mode 100644 index 0000000..683c2ac --- /dev/null +++ b/assets/svg/bandcamp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/discord.svg b/assets/svg/discord.svg new file mode 100644 index 0000000..ba2efa3 --- /dev/null +++ b/assets/svg/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/placeholder.svg b/assets/svg/placeholder.svg new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/assets/svg/placeholder.svg @@ -0,0 +1 @@ + diff --git a/assets/svg/soundcloud.svg b/assets/svg/soundcloud.svg new file mode 100644 index 0000000..cd91f85 --- /dev/null +++ b/assets/svg/soundcloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/spotify.svg b/assets/svg/spotify.svg new file mode 100644 index 0000000..54a52a1 --- /dev/null +++ b/assets/svg/spotify.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/x.svg b/assets/svg/x.svg new file mode 100644 index 0000000..7794ba3 --- /dev/null +++ b/assets/svg/x.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/svg/youtube.svg b/assets/svg/youtube.svg new file mode 100644 index 0000000..c285286 --- /dev/null +++ b/assets/svg/youtube.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/contacts/index.html b/contacts/index.html index a002f72..4815246 100644 --- a/contacts/index.html +++ b/contacts/index.html @@ -1,257 +1,337 @@ - + - - t404:null | Contacts - - - - - - - - - +
+

Contacts

+ +
+

(Or) Contact me here

+
+
+ + +
+ + +
+ + +
+ + +
+
+ +
- - - -
-
- -

- Home -

- - -

- Releases -

- - -

- Activities -

- - -

- Terms of Use -

- - -

- About Me -

- - -

- My Contacts -

- +
+
+ © t404:null 2021-2025 - All Rights Reserved
-
-
-

- - - - - - - - - - - - - - 󰓇 - - -

-

- - - - - - - - - - - - -

-
- - -
-

Contacts

- -
-

- (Or) Contact me here -

-
-
- - -
- - -
- - -
- - -
-
- -
-
-
-
© t404:null 2021-2025 - All Rights Reserved
- + diff --git a/index.html b/index.html index e67dd64..55df46c 100644 --- a/index.html +++ b/index.html @@ -1,237 +1,244 @@ - + - - t404:null - - - - - - - - - +
+
+
+
+
+
+ < + > +
+
    +
    - - - -
    -
    - -

    - Home -

    -     - -

    - Releases -

    -     - -

    - Activities -

    -     - -

    - Terms of Use -

    -     - -

    - About Me -

    -     - -

    - My Contacts -

    -     +
    + +
    +

    + Releases (Click for more) +

    +
    Nothing here yet. ;D
    +
    +

    + Activities +

    +
    Nothing here yet. ;D
    +
    +
    + © t404:null 2021-2025 - All Rights Reserved
    -
    -
    -

    - - - - - - - - - - - - - - 󰓇 - - -

    -

    - - - - - - - - - - - - -

    -
    - - -
    -
    -
    -
    -
    -
    - < - > -
    -
      -
      -
      -
      - -
      -

      - Releases (Click for more) -

      -
      - Nothing here yet. ;D -
      -
      -

      - Activities -

      -
      - Nothing here yet. ;D -
      -
      -
      © t404:null 2021-2025 - All Rights Reserved
      - + - + diff --git a/main.css b/main.css new file mode 100644 index 0000000..7d19842 --- /dev/null +++ b/main.css @@ -0,0 +1,950 @@ +@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"); +@import url("/assets/css/old.css"); + +body { + margin: 0px; + height: 100%; +} + +main, +textarea, +textfield { + font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system; + font-size: 1.25rem; +} + +main { + margin: 0.75rem; + height: 100%; + margin-bottom: 0; + margin-top: 0; + min-height: calc(100vh - 10vh); +} + +.main-page { + max-width: 2300px; + margin: 0 auto; +} + +.logo { + height: 3.75rem; + width: auto; +} + +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; + + ul { + padding-left: 15px; + list-style-type: none; + margin: 0px; + align-content: center; + + li { + display: inline-block; + padding-right: 4px; + vertical-align: middle; + + p { + padding-top: 0.4rem; + vertical-align: middle; + margin: 0.5rem 1rem; + } + } + + img { + margin-top: 0.25rem; + height: 1.5rem; + vertical-align: middle; + 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%; + } + + .social { + font-size: 2.5rem; + padding-bottom: 0.4rem; + transition: 0.3s; + } + + .social:hover { + opacity: 50%; + } + + .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; + + 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.2s ease-in-out; + + span { + transition: 0.2s 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.2s; + } + + span:nth-child(2) { + transition-delay: 0.3s; + } + + span:nth-child(3) { + transition-delay: 0.4s; + } + } + + #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; + overflow: auto; + max-height: 70vh; +} + +/*---- 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; + + 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: 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; + + .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; + 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; + + .card { + transition: 0.75s; + color: black; + background-color: #ddd; + height: 30rem; + 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: 30rem; + 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; + } + } +} + +.contact-cards { + display: grid; + grid-template-columns: repeat(auto-fill, 23rem); + grid-gap: 1rem; + justify-content: center; + padding: 0; + + li { + border-radius: 7px; + background-color: #ddd; + } +} + +.contact-email { + .inputbox { + outline: none; + height: 3rem; + width: 100%; + display: block; + background: #efefef; + color: black; + border: 0px solid #505050; + border-radius: 5px; + transition: 0.3s; + margin-top: 0.5rem; + margin-left: -5px; + padding: 5px; + font-size: 0.95rem; + } + + :not(textarea) { + text-align: center; + } + + .inputbox:hover { + background: #dedede; + } + + .inputbox:focus { + background: #cecece; + } + + button { + width: 100%; + height: 3rem; + border-radius: 5px; + text-align: center; + } + + .formbutton { + background: #272727; + color: #fff; + border: 0px; + transition-duration: 300ms; + cursor: pointer; + } + + .formbutton:hover { + background: #727272; + } + + .form { + border-radius: 5px; + align-items: center; + justify-content: center; + margin: auto; + padding: 4rem 2.5rem; + width: 65%; + background: #fdfdfd; + box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px; + } + + .error_box { + background: #ffeeee; + border-radius: 5px; + + margin: auto; + align-items: center; + justify-content: center; + text-align: center; + padding: 1rem 1rem; + margin-bottom: 1.5rem; + } + + .box { + height: 2rem; + width: 100%; + text-align: center; + border-radius: 5px; + margin: auto; + align-items: center; + justify-content: center; + padding: 0.5rem 0px; + margin-bottom: 1rem; + } +} + +textarea, +textfield { + padding: 5px; + resize: vertical; + min-height: 5rem; +} + +.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("https://www.nerdfonts.com/assets/fonts/Symbols-2048-em Nerd Font Complete.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; + + strong { + color: #fff; + } + + .text-box { + max-width: 1250px; + margin: 25% auto; + background-color: rgba(0, 0, 0, 75%); + height: 100%; + 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; + } + } +} + +/* info */ +.info { + text-decoration: none; + list-style-type: none; + font-size: 1.4rem; + + li { + padding: 1rem; + } + + 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; + } + + a:hover { + opacity: 70%; + background-size: 100% 0.2em; + } + + .title { + font-size: 1.6rem; + } +} + +.subdiv { + padding: 1rem; +} + +.long-br { + display: block; + height: 2rem; +} + +@media screen and (width >=1180px) and (width<=1690px) { + /*if(width<1620px&&width>=1125px)*/ + + nav { + .dropdown { + .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 (width<1180px) { + /*if(width<1125px)*/ + + nav { + font-size: 1.4rem; + + ul { + img { + height: 2.5rem; + } + } + + .social { + font-size: 2rem; + } + + .burger { + height: 100px; + width: 100px; + } + + .dropdown { + .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; + } + } +} diff --git a/release/A_Lake_With_Endless_Stars/index.html b/release/A_Lake_With_Endless_Stars/index.html index 7556817..5b607dc 100644 --- a/release/A_Lake_With_Endless_Stars/index.html +++ b/release/A_Lake_With_Endless_Stars/index.html @@ -1,261 +1,281 @@ - + - - t404:null | A Lake With Endless Stars - - - - - - +
      +
      +
      +

      + A Lake with Endless Stars +

      +

      + "Under the coruscating night sky, gaze into the + kaleidoscopic waters..." +

      +
      +

      + "A Lake with Endless Stars" is the first song in 2023 + from t404:null and is realeased at 9.4.2023 on + Soundcloud, YouTube and Bandcamp and 9.5.2023 on + distrubution platforms. +

      +

      +
      Available on:
      + YouTube +
      + Soundcloud +
      + Bandcamp +
      + Itunes / Apple Music +
      + Spotify +

      +
      - - - -
      -
      - -

      - Home -

      -       - -

      - Releases -

      -       - -

      - Activities -

      -       - -

      - Terms of Use -

      -       - -

      - About Me -

      -       - -

      - My Contacts -

      -       +
      +
      + © t404:null 2021-2024 - All Rights Reserved
      -
      -
      -

      - - - - - - - - - - - - - - 󰓇 - - -

      -

      - - - - - - - - - - - - -

      -
      - - -
      -
      -
      -

      - A Lake with Endless Stars -

      -

      - "Under the coruscating night sky, gaze into the kaleidoscopic - waters..." -

      -
      -

      - "A Lake with Endless Stars" is the first song in 2023 from t404:null - and is realeased at 9.4.2023 on Soundcloud, YouTube and Bandcamp and - 9.5.2023 on distrubution platforms. -

      -

      -
      Available on:
      - YouTube -
      - Soundcloud -
      - Bandcamp -
      - Itunes / Apple Music -
      - Spotify -

      -
      -
      -
      -
      © t404:null 2021-2024 - All Rights Reserved
      - + diff --git a/release/Oblitus_Requiem/index.html b/release/Oblitus_Requiem/index.html index 07d1252..59f9a42 100644 --- a/release/Oblitus_Requiem/index.html +++ b/release/Oblitus_Requiem/index.html @@ -1,229 +1,291 @@ - + - - t404:null | Oblitus Requiem \\Against the Forsaken Legacy// - - - - - - +
      +
      +
      +

      + Oblitus Requiem \\Against the Forsaken + Legacy// +

      +

      + "Even if you don't remember me now, I will bring the you + I once knew back from them." +

      +
      +

      + "For what I am going to do, for the bloodshed I am going + to create, for the acts people will deem sinful I am + going to commit;" +

      +

      + "Oblitus Requiem \\Against the Forsaken Legacy//" is a + custom track made for Grand Finals Tiebreaker of + VNMC2023 (Vietnamese National Mania Championship (4K)) + made by t404:null, and is released / published on + Youtube, Bandcamp and Soundcloud at Aug. 12th 2023... +

      +

      +
      Available on:
      + YouTube +
      + Soundcloud +
      + Bandcamp +
      + Itunes / Apple Music +
      + Spotify +

      +
      - - - -
      -
      - -

      - Home -

      -       - -

      - Releases -

      -       - -

      - Activities -

      -       - -

      - Terms of Use -

      -       - -

      - About Me -

      -       - -

      - My Contacts -

      -       +
      +
      + © t404:null 2021-2024 - All Rights Reserved
      -
      -
      -

      - - - - - - - - - - - - - - 󰓇 - - -

      -

      - - - - - - - - - - - - -

      -
      - - -
      -
      -
      -

      - Oblitus Requiem \\Against the Forsaken Legacy// -

      -

      "Even if you don't remember me now, I will bring the you I once knew back from them."

      -
      -

      "For what I am going to do, for the bloodshed I am going to create, for the acts people will deem sinful I am going to commit;"

      -

      "Oblitus Requiem \\Against the Forsaken Legacy//" is a custom track made for Grand Finals Tiebreaker of VNMC2023 (Vietnamese National Mania Championship (4K)) made by t404:null, and is released / published on Youtube, Bandcamp and Soundcloud at Aug. 12th 2023...

      -

      -
      Available on:
      - YouTube -
      - Soundcloud -
      - Bandcamp -
      - Itunes / Apple Music -
      - Spotify -

      -
      -
      -
      -
      © t404:null 2021-2024 - All Rights Reserved
      - - \ No newline at end of file + + diff --git a/release/hello.world(Zer/O)/index.html b/release/hello.world(Zer/O)/index.html index c359161..f4a4f19 100644 --- a/release/hello.world(Zer/O)/index.html +++ b/release/hello.world(Zer/O)/index.html @@ -1,8 +1,10 @@ - + - - t404:null | hello.world(Zer/O) - - - - - - +
      +
      +
      +

      + hello.world(Zer/O) +

      +

      + "What can I see... a new world...?
      It appears, + that I am living in a world, where no-one lives..." +
      +
      "hello.world(Zer/O)" is a first release from + t404:null at 08.22.2021 on Youtube, Bandcamp, and + Soundcloud.
       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..).
      +
      Available in:
      + Itunes/Apple Music +
      + Spotify(Release date at 09.20.2021) +
      + YouTube +
      + YouTube Music(Release date at 09.20.2021) +
      + Soundcloud +
      + Bandcamp +

      +
      - - - -
      -
      - -

      - Home -

      -       - -

      - Releases -

      -       - -

      - Activities -

      -       - -

      - Terms of Use -

      -       - -

      - About Me -

      -       - -

      - My Contacts -

      -       +
      +
      + © t404:null 2021-2024 - All Rights Reserved
      -
      -
      -

      - - - - - - - - - - - - - - 󰓇 - - -

      -

      - - - - - - - - - - - - -

      -
      - - -
      -
      -
      -

      - hello.world(Zer/O) -

      -

      "What can I see... a new world...?
      It appears, that I am living in a world, where no-one lives..."
      -
      "hello.world(Zer/O)" is a first release from t404:null at 08.22.2021 on Youtube, Bandcamp, and Soundcloud.
       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..).
      -
      Available in:
      - Itunes/Apple Music -
      - Spotify(Release date at 09.20.2021) -
      - YouTube -
      - YouTube Music(Release date at 09.20.2021) -
      - Soundcloud -
      - Bandcamp -

      -
      -
      -
      -
      © t404:null 2021-2024 - All Rights Reserved
      - - \ No newline at end of file + + diff --git a/release/index.html b/release/index.html index ca1d9f2..ea7df0e 100644 --- a/release/index.html +++ b/release/index.html @@ -1,201 +1,221 @@ - + - - t404:null | Releases - - - - - - +
      +

      Releases

      +
      Nothing here yet. ;D
      + +
      +
      + © t404:null 2021-2025 - All Rights Reserved
      -
      -
      -

      - - - - - - - - - - - - - - 󰓇 - - -

      -

      - - - - - - - - - - - - -

      -
      - - -
      -

      Releases

      -
      - Nothing here yet. ;D -
      - -
      -
      © t404:null 2021-2025 - All Rights Reserved
      - - \ No newline at end of file + + diff --git a/song_usage_terms/index.html b/song_usage_terms/index.html index a6bdff8..fd67115 100644 --- a/song_usage_terms/index.html +++ b/song_usage_terms/index.html @@ -1,314 +1,483 @@ - + - - t404:null | Usage of my song(s) / track(s) - - - - - - - +
      +

      + Song Usage Terms and Policies +
      +

      + +
      +
      + © t404:null 2021-2025 - All Rights Reserved
      -
      -
      -

      - - - - - - - - - - - - - - 󰓇 - - -

      -

      - - - - - - - - - - - - -

      -
      - - -
      -

      - Song Usage Terms and Policies -
      -

      - -
      -
      © t404:null 2021-2025 - All Rights Reserved
      - - \ No newline at end of file + +