t404owo/t404null
1
0
Fork 0
mirror of https://github.com/t404owo/t404null.git synced 2026-06-22 16:04:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: t404owo/t404null:a162a9a16c6f71e6e9e0bf961e9d77bbcbd4774b
Branches Tags
t404owo/t404null:main t404owo/t404null:glitch t404owo/t404null:test t404owo/t404null:old
..
compare: t404owo/t404null:test
Branches Tags
t404owo/t404null:main t404owo/t404null:glitch t404owo/t404null:test t404owo/t404null:old

77 Commits
a162a9a16c .. test

Author SHA1 Message Date
t404owo 95ad432968 Merge branch 'glitch' into test 2026-06-07 21:49:28 +02:00
t404owo 8ffa48ab51 Test deploy 1 
changing nf-symbols to the page's CDN
 2026-05-11 11:26:36 +00:00
t404owo 90ea452ec4 Added icons for nf-icons removal 
-# For the sake of page load...
 2026-05-11 13:07:16 +02:00
t404owo f0272c0bf7 Create placeholder.svg 2026-05-11 13:06:15 +02:00
t404owo 50781d2a9a Changed height 2026-05-09 23:01:07 +02:00
t404owo a4da668ee2 changed logo size... 2026-05-09 22:56:41 +02:00
t404owo 56a9020492 Add logo a class 
to change size lol
 2026-05-09 22:48:45 +02:00
t404owo fa323140d1 Updated icon and logo 2026-05-09 22:04:46 +02:00
t404owo 00f182d57b Replaced logo for bar 2026-05-09 19:42:26 +00:00
t404owo c16e7d98e4 Changed logo for the site 2026-05-09 19:39:38 +00:00
t404owo f3d4e659df Fix import URL for Supabase client 2025-12-07 20:32:40 +01:00
t404owo c528c7203f Fix import URL for Supabase client 2025-12-07 20:32:23 +01:00
t404owo cc95f657ae Update Supabase client import to latest version 2025-12-07 20:31:09 +01:00
t404owo 800ec53291 Change Supabase import to use CDN link 2025-12-07 20:30:48 +01:00
t404owo c3af2e62c8 Remove Supabase script from index.html 2025-12-07 20:29:55 +01:00
t404owo e6e37e5ba5 Remove Supabase script from index.html 2025-12-07 20:29:31 +01:00
t404owo b721d85d6d Include Supabase JS library in index.html 
Added Supabase JavaScript library script tag.
 2025-12-07 20:23:26 +01:00
t404owo 9f398ccb5d Change Supabase import URL to a package reference 2025-12-07 20:22:31 +01:00
t404owo bb2f59f974 Add Supabase JavaScript library to index.html 2025-12-07 20:21:57 +01:00
t404owo 4cb191f2e0 Update Supabase JS library version to 2 2025-12-07 20:14:56 +01:00
t404owo bc83fa4ed8 Update Supabase JS client version to 2 2025-12-07 20:14:41 +01:00
t404owo a5f838fbd0 Update Supabase JS client import to latest version 2025-12-07 19:44:29 +01:00
t404owo 23210ce689 Update Supabase JS library import to latest version 2025-12-07 19:44:08 +01:00
t404owo a998ad564b Update Supabase key in index.js 
Replaced the Supabase key with a publishable key.
 2025-12-07 19:38:44 +01:00
t404owo 1636d189fe Update Supabase key in index.js 
Replaced the placeholder Supabase key with a jwt key.
 2025-12-07 19:32:47 +01:00
t404owo 5c1b16789b Update Supabase import path to ESM version 2025-12-07 19:29:46 +01:00
t404owo 9001ec9e38 Fix import statement for Supabase client 2025-12-07 19:26:05 +01:00
t404owo bb23015bc4 Fix import statement for Supabase client 2025-12-07 19:24:29 +01:00
t404owo 73476e1595 Add eruda script for debugging in index.html 2025-12-07 18:36:57 +01:00
t404owo 23367f7d2e Change Supabase anon key to a publishable key 
Updated Supabase anon key to a publishable key for security.
 2025-12-07 18:35:03 +01:00
t404owo 73e96c9d69 Update index.js 2025-12-07 18:34:15 +01:00
t404owo 892c24b498 Update Supabase key in mail.js 2025-12-07 18:27:33 +01:00
t404owo d71bbe78a9 Update Supabase anon key to use publishable key 
Replaced the Supabase anon key with a publishable key to make the website run normally.
 2025-12-07 18:27:13 +01:00
t404owo efb2966d62 Update font source URL for Nerd Font 2025-10-26 02:46:45 +02:00
t404owo ddb1501e39 Update font source URL for Nerd Fonts 
Update for better icon-loading traffic.
 2025-10-26 02:31:48 +02:00
t404owo 5a8bce7125 Syntax fix+button handling 
Fixed code syntax.
Added button disable when sending.
 2025-10-20 06:44:47 +02:00
t404owo e74d3dcf43 Change form to use POST method for mail form 2025-10-19 02:36:55 +02:00
t404owo 9e18c458a5 Remove POST method from contact form 2025-10-19 02:35:30 +02:00
t404owo 254bc8a3cc Change label from 'Subject' to 'Name' 2025-10-19 02:24:53 +02:00
t404owo eefe20d81c Fix error handling in mail.js for status message 2025-10-19 02:20:14 +02:00
t404owo 123fd0a7bf Simplify mail.js 2025-10-19 02:16:30 +02:00
t404owo 524bc3be83 Refactor old.css by removing unnecessary styles 
Removed redundant CSS styles.
 2025-10-19 01:50:47 +02:00
t404owo d1ad38ba9b Increase font size for main elements 2025-10-19 01:38:24 +02:00
t404owo fd290598c1 change font size 2025-10-18 00:48:16 +00:00
t404owo 58d8e7ec39 Update index.html 2025-10-17 05:05:18 +02:00
t404owo 2d0a5c1ce5 Merge pull request #19 from t404owo/main 
Update to unstable branch
 2025-10-17 05:04:37 +02:00
t404owo 92b0e1232e remove eruda for cleaniness 2025-10-17 03:03:00 +00:00
t404owo 3ede610b6d Form alignment fix 2025-10-17 03:00:21 +00:00
t404owo 066490f850 some cosmetics fix 2025-10-17 02:49:38 +00:00
t404owo 849dfeda89 Site Update 
Added contact formular
Some Descriptions / Titles update

Terms of Usage (ToU) update.
Minor Copyright (C) update.
 2025-10-17 04:18:23 +02:00
t404owo c28949f2fc Site metadata update 2025-10-17 02:15:21 +00:00
t404owo 38e174a28f test #4.2 some size adjestment 2025-10-17 02:06:13 +00:00
t404owo 64e22d3eb9 test #4.1 another UI test 2025-10-17 02:02:28 +00:00
t404owo 40f9194271 test #4 old .css 2025-10-17 01:58:14 +00:00
t404owo 422b417c29 test #4 design check 2025-10-17 01:57:04 +00:00
t404owo 17c26b0fb0 test#3 reedited color 2025-10-17 01:48:53 +00:00
t404owo f46d90f06e test #3 style adjustment 2025-10-17 01:43:56 +00:00
t404owo 522d3a69db test#2 added id for test 2025-10-17 01:39:38 +00:00
t404owo b11e68a4d2 test#1 color fix 2025-10-17 01:36:29 +00:00
t404owo f996359f3a test #1 2025-10-17 01:33:43 +00:00
t404owo 87b9d03ca8 Merge pull request #17 from t404owo/main 
Main
 2025-10-17 02:59:06 +02:00
t404owo b0709aa77e old.css updated 2025-10-17 00:56:29 +00:00
t404owo 0a0310b410 fixed X icons thingy... 2025-10-17 00:52:43 +00:00
t404owo b6034115c8 some cosmetics fix ;D 2025-10-17 00:39:48 +00:00
t404owo f936514228 . 2025-10-16 23:58:17 +00:00
t404owo da810d6a03 JS fix 
about /release and /release/ issue
 2025-10-16 23:55:56 +00:00
t404owo d704e025a6 replaced login submit... 2025-10-16 23:50:42 +00:00
t404owo 1104fd3998 Fixed a bug.... 
"context", lmao I cringed hard, replaced w/ innerHTML.
 2025-10-16 23:46:14 +00:00
t404owo 9e7ca86494 Updated serveral stuffs 
JS: added for Empty slots a msg (user request).
Updated copyright and ToS/ToU for my tracks / properties.
 2025-10-16 23:42:15 +00:00
t404owo 1149d1fdfb made the text not too serious to delight my client ofc ;D 
Some form edit b4 CSS and JS involved....
 2025-10-16 23:11:37 +00:00
t404owo cdb6222553 updated form nor now ._." 
Time to apply CSS and JS
 2025-10-16 23:06:21 +00:00
t404owo 90b7aa5b6f Delete CNAME 2025-10-16 03:36:04 +02:00
t404owo d5915b1b59 Create CNAME 2025-10-16 03:34:39 +02:00
t404owo 81d6fd2475 updated pass to subject xD 2025-10-08 12:15:27 +00:00
t404owo 66b845fd11 uhhh removed stuffs :DDD 2025-10-08 12:14:10 +00:00
t404owo f4bc2178cb added contact form (rework soon) 2025-10-08 12:13:32 +00:00
t404owo 21b7b4b97a Merge pull request #16 from t404owo/main 
latest pull request to update the site
 2025-08-09 13:55:18 +07:00
22 changed files with 4049 additions and 2285 deletions
Expand all files Collapse all files
about_me/index.html
+244 -222
View File
@@ -1,229 +1,251 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>t404:null | Home</title>
<meta
name="description"
content="Hello there! I'm t404:null (a.k.a t404owo).
<head>
<title>t404:null | About Me</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>
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<meta charset="UTF-8" />
<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 class="nf-icons">&#xe8c9;</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>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<div id="cross">
<span></span>
<span></span>
</nav>
<main>
<div style="justify-content: center; padding: 10%">
<p style="font-size: 2.5rem">Hi there!</p>
<div class="info" style="font-size: 1.5rem">
<p>I'm t404:null (a.k.a t404owo).</p>
<p>
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).
</p>
<p>
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
</p>
<p>
About my songs / soundtracks:
<br />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.
</p>
<p>
If you have any requests or questions, feel free to
<a href="/contacts">contact me.</a>
</p>
</div>
</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>
</main>
<div class="footer">
&copy; t404:null 2021-2025 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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 style="justify-content: center; padding: 10%">
<p style="font-size: 2.5rem">Hi there!</p>
<div class="info" style="font-size: 1.5rem">
<p>I'm t404:null (a.k.a t404owo).</p>
<p>
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).
</p>
<p>
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
</p>
<p>
About my songs / soundtracks:
<br>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.
</p>
<p>
If you have any requests or questions, feel free to <a href="/contacts">contact me.</a>
</p>
</div>
</div>
</main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</body>
</html>
activity/index.html
+294 -276
View File
@@ -1,283 +1,301 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>t404:null | Home</title>
<meta
name="description"
content="Hello there! I'm t404:null (a.k.a t404owo).
<head>
<title>t404:null | Activities / Previous Events</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>
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<meta charset="UTF-8" />
<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 class="nf-icons">&#xe8c9;</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>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<div id="cross">
<span></span>
<span></span>
</nav>
<main class="main-page">
<h1 class="topic">Activities</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="/activity">
<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>
</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>
</main>
<div class="footer">
&copy; t404:null 2021-2025 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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 class= "main-page">
<h1 class="topic">Activities</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="/activity">
<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>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</body>
</html>
assets/css/main.css
+206 -4
View File
@@ -7,21 +7,35 @@ body {
margin: 0px;
height: 100%;
}
main {
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.5rem;
}
hr {
margin: 2rem 0px;
}
nav {
z-index: 4;
position: -webkit-sticky;
@@ -39,21 +53,25 @@ nav {
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;
@@ -61,6 +79,7 @@ nav {
padding-right: 0.3rem;
}
}
a {
color: black;
text-decoration: none;
@@ -72,19 +91,23 @@ nav {
-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;
@@ -120,6 +143,7 @@ nav {
.menu {
padding-top: 0.4rem;
padding-bottom: 0.8rem;
p {
background-size: 0% 0.2em;
background-image: linear-gradient(#000, #000);
@@ -128,6 +152,7 @@ nav {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
p:hover,
.currentpage {
opacity: 60%;
@@ -147,6 +172,7 @@ nav {
background-color: #f5f5f5;
border-radius: 12px;
transition: 0.2s ease-in-out;
span {
transition: 0.2s ease-in-out;
box-sizing: border-box;
@@ -154,12 +180,14 @@ nav {
background-color: #000;
border-radius: 2px;
}
#hamburger {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
span {
width: 70%;
height: 5%;
@@ -168,16 +196,20 @@ nav {
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%;
@@ -190,11 +222,13 @@ nav {
height: 0%;
width: 5%;
position: absolute;
right: 46%; /*a / */
right: 46%;
/*a / */
top: 10%;
transform: translate(-50%);
transition-delay: 0s;
}
span:nth-child(2) {
width: 0%;
height: 5%;
@@ -215,21 +249,26 @@ nav {
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;
@@ -242,6 +281,7 @@ nav {
overflow: auto;
max-height: 70vh;
}
/*---- main ----*/
.container {
position: relative;
@@ -250,6 +290,7 @@ nav {
margin: auto;
margin-top: 1rem;
}
.carousel {
z-index: 1;
width: 100%;
@@ -259,6 +300,7 @@ nav {
position: relative;
overflow: hidden;
}
.slider-bg {
height: 100%;
width: 100%;
@@ -279,6 +321,7 @@ nav {
border-radius: 0.5rem;
transform: scale(1.1);
}
.slider section {
overflow: hidden;
z-index: 1;
@@ -293,6 +336,7 @@ nav {
border-radius: 0.5rem;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
--apple-system;
div {
color: #fff;
position: relative;
@@ -303,27 +347,33 @@ nav {
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-start: 2;
/*|•|*/
grid-column-end: 3;
}
}
.slider:hover {
cursor: pointer;
}
.prev,
.next {
background-color: rgba(0, 0, 0, 0.3);
@@ -346,12 +396,15 @@ nav {
-ms-user-select: none;
user-select: none;
}
.next {
right: 1rem;
}
.prev {
left: 1rem;
}
.pgctrl {
font-family: sans-serif, --apple-system;
z-index: 1;
@@ -379,6 +432,7 @@ nav {
-ms-user-select: none;
user-select: none;
}
.control {
text-align: center;
}
@@ -393,6 +447,7 @@ nav {
grid-template-rows: repeat(auto-fill, 23rem);
grid-template-columns: repeat(auto-fill, 23rem);
grid-gap: 1rem;
.card {
transition: 0.75s;
color: black;
@@ -400,6 +455,7 @@ nav {
height: 23rem;
border-radius: 7px;
text-decoration: none;
div {
z-index: 1;
position: inherit;
@@ -409,12 +465,15 @@ nav {
border-radius: 7px;
transition: 0.5s;
}
h2 {
font-size: 1.9rem;
}
p {
font-size: 1.2rem;
}
h2,
p {
color: white;
@@ -424,6 +483,7 @@ nav {
opacity: 0;
transition: 0.5s;
}
.bg-img {
/* background: url(/assets/img/t404_null-logo.png); */
background-size: cover;
@@ -432,11 +492,13 @@ nav {
width: 23rem;
}
}
.card:hover {
.bg-img {
filter: blur(5px) brightness(50%);
-webkit-filter: blur(5px) brightness(50%);
}
h2,
p {
filter: none;
@@ -453,6 +515,7 @@ nav {
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;
@@ -460,6 +523,7 @@ nav {
height: 30rem;
border-radius: 7px;
text-decoration: none;
div {
z-index: 1;
position: inherit;
@@ -469,12 +533,15 @@ nav {
border-radius: 7px;
transition: 0.5s;
}
h2 {
font-size: 1.9rem;
}
p {
font-size: 1.1rem;
}
h2,
p {
/* color: black; */
@@ -484,6 +551,7 @@ nav {
opacity: 0;
transition: 0.5s;
}
.bg-img {
/* background: url(/assets/img/t404_null-logo.png); */
background-size: cover;
@@ -493,6 +561,7 @@ nav {
width: 30rem;
}
}
.card:hover {
.bg-img {
filter: brightness(40%);
@@ -500,6 +569,7 @@ nav {
width: 8vw;
border-radius: 7px 0px 0px 7px;
}
h2,
p {
padding: 0.3rem 5vw 0.3rem 10vw;
@@ -515,17 +585,113 @@ nav {
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;
@@ -536,6 +702,7 @@ nav {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
a:hover {
opacity: 70%;
background-size: 100% 0.2em;
@@ -547,10 +714,12 @@ nav {
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";
}
@@ -564,9 +733,11 @@ nav {
padding: 5vw 5vw;
border-radius: 10px;
border: 1px solid #ddd;
strong {
color: #fff;
}
.text-box {
max-width: 1250px;
margin: 25% auto;
@@ -576,6 +747,7 @@ nav {
padding: 2rem;
border-radius: 7px;
font-size: 1.2rem;
a {
text-decoration: none;
color: #fff;
@@ -586,6 +758,7 @@ nav {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
a:hover {
color: #ccc;
background-size: 100% 0.2em;
@@ -598,9 +771,11 @@ nav {
text-decoration: none;
list-style-type: none;
font-size: 1.4rem;
li {
padding: 1rem;
}
a {
text-decoration: none;
color: #46f;
@@ -611,22 +786,27 @@ nav {
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) {
@media screen and (width >=1180px) and (width<=1690px) {
/*if(width<1620px&&width>=1125px)*/
nav {
@@ -635,6 +815,7 @@ nav {
position: relative;
width: 17.5rem;
padding: 0rem 0rem;
a {
transition: 0.2s;
display: flex;
@@ -642,33 +823,40 @@ nav {
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;
}
@@ -680,11 +868,13 @@ nav {
nav {
font-size: 1.4rem;
ul {
img {
height: 2.5rem;
}
}
.social {
font-size: 2rem;
}
@@ -693,19 +883,24 @@ nav {
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;
@@ -713,6 +908,7 @@ nav {
border-radius: 7px;
margin: 0.3rem 0;
}
.dropdown-menu p:hover {
background-color: #ddd;
}
@@ -720,29 +916,35 @@ nav {
.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/css/old.css
+182 -157
View File
@@ -1,25 +1,7 @@
@import url("/assets/css/fonts/jost.css");
@import url("/assets/css/fonts/noto-sans-jp.css");
@import url("/assets/css/fonts/plus-jarkata-sans.css");
body {
margin: 0px;
height: 100%;
}
main {
font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
margin: 0.75rem;
height: 100%;
margin-bottom: 0;
margin-top: 0;
min-height: calc(100vh - 10vh);
}
.main-page {
max-width: 2300px;
margin: 0 auto;
}
hr {
margin: 2rem 0px;
}
nav {
z-index: 4;
position: -webkit-sticky;
@@ -28,8 +10,7 @@ nav {
*/
top: 10px;
background-color: #f5f5f5;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
--apple-system;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
font-size: 1.25rem;
padding: 4px;
margin: 10px;
@@ -39,28 +20,33 @@ nav {
display: grid;
grid-template-columns: auto 1fr auto;
}
nav ul {
padding-left: 15px;
list-style-type: none;
margin: 0px;
align-content: center;
}
nav ul li {
display: inline-block;
padding-right: 4px;
vertical-align: middle;
}
nav ul li p {
padding-top: 0.4rem;
vertical-align: middle;
margin: 0.5rem 1rem;
}
nav ul img {
margin-top: 0.25rem;
height: 1.5rem;
vertical-align: middle;
padding-right: 0.3rem;
}
nav a {
color: black;
text-decoration: none;
@@ -71,19 +57,23 @@ nav a {
-ms-user-select: none;
user-select: none;
}
nav .vertical-line {
width: 0.1rem;
background-color: black;
height: 100%;
}
nav .social {
font-size: 2.5rem;
padding-bottom: 0.4rem;
transition: 0.3s;
}
nav .social:hover {
opacity: 50%;
}
nav .dropdown {
margin: 0.75rem;
position: absolute;
@@ -97,28 +87,13 @@ nav .dropdown {
opacity: 0;
transition: 0.3s;
}
.footer {
font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
position: sticky;
/* width: 100%;
*/
background-color: white;
/* bottom: 0;
*/
/* left:0;
*/
z-index: 3;
padding: 1rem;
background-color: #ddd;
margin: 0px;
text-align: center;
align-content: center;
}
/*---nav---*/
.menu {
padding-top: 0.4rem;
padding-bottom: 0.8rem;
}
.menu p {
background-size: 0% 0.2em;
background-image: linear-gradient(#000, #000);
@@ -127,11 +102,13 @@ nav .dropdown {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
.menu p:hover,
.menu .currentpage {
opacity: 60%;
background-size: 100% 0.2em;
}
.burger {
border: none;
display: none;
@@ -145,6 +122,7 @@ nav .dropdown {
border-radius: 12px;
transition: 0.2s ease-in-out;
}
.burger span {
transition: 0.2s ease-in-out;
box-sizing: border-box;
@@ -152,6 +130,7 @@ nav .dropdown {
background-color: #000;
border-radius: 2px;
}
.burger #hamburger {
position: absolute;
height: 100%;
@@ -159,6 +138,7 @@ nav .dropdown {
top: 0%;
left: 0%;
}
.burger #hamburger span {
width: 70%;
height: 5%;
@@ -167,15 +147,19 @@ nav .dropdown {
position: relative;
margin: 12% 0;
}
.burger #hamburger span:nth-child(1) {
transition-delay: 0.2s;
}
.burger #hamburger span:nth-child(2) {
transition-delay: 0.3s;
}
.burger #hamburger span:nth-child(3) {
transition-delay: 0.4s;
}
.burger #cross {
position: absolute;
height: 100%;
@@ -184,6 +168,7 @@ nav .dropdown {
left: 1.5%;
transform: rotate(45deg);
}
.burger #cross span:nth-child(1) {
height: 0%;
width: 5%;
@@ -194,6 +179,7 @@ nav .dropdown {
transform: translate(-50%);
transition-delay: 0s;
}
.burger #cross span:nth-child(2) {
width: 0%;
height: 5%;
@@ -202,71 +188,39 @@ nav .dropdown {
top: 48%;
transition-delay: 0s;
}
.burger:hover {
opacity: 40%;
}
.burger.open #hamburger span {
width: 0%;
}
.burger.open #hamburger span:nth-child(1) {
transition-delay: 0s;
}
.burger.open #hamburger span:nth-child(2) {
transition-delay: 0.1s;
}
.burger.open #hamburger span:nth-child(3) {
transition-delay: 0.2s;
}
.burger.open #cross span:nth-child(1) {
height: 80%;
transition-delay: 0.3s;
}
.burger.open #cross span:nth-child(2) {
width: 80%;
transition-delay: 0.3s;
}
.dropdown {
display: none;
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;
@@ -279,9 +233,9 @@ nav .dropdown {
width: 100%;
height: 100%;
border-radius: 0.5rem;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif,
--apple-system;
font-family: "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
}
.slider section div {
color: #fff;
position: relative;
@@ -292,16 +246,19 @@ nav .dropdown {
grid-template-rows: 3.5fr 1fr 1fr 5rem;
grid-template-columns: 1fr auto 1fr;
}
.slider section h1 {
font-size: 2rem;
grid-row-start: 2;
grid-row-end: 3;
}
.slider section p {
font-size: 1.25rem;
grid-row-start: 3;
grid-row-end: 4;
}
.slider section p,
.slider section h1 {
width: 60vw;
@@ -310,65 +267,11 @@ nav .dropdown {
/*|•|*/
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;
@@ -379,6 +282,7 @@ nav .dropdown {
grid-template-columns: repeat(auto-fill, 23rem);
grid-gap: 1rem;
}
.album-cards .card {
transition: 0.75s;
color: black;
@@ -387,6 +291,7 @@ nav .dropdown {
border-radius: 7px;
text-decoration: none;
}
.album-cards .card div {
z-index: 1;
position: inherit;
@@ -396,12 +301,15 @@ nav .dropdown {
border-radius: 7px;
transition: 0.5s;
}
.album-cards .card h2 {
font-size: 1.9rem;
}
.album-cards .card p {
font-size: 1.2rem;
}
.album-cards .card h2,
.album-cards .card p {
color: white;
@@ -411,6 +319,7 @@ nav .dropdown {
opacity: 0;
transition: 0.5s;
}
.album-cards .card .bg-img {
/* background: url(/assets/img/t404_null-logo.png);
*/
@@ -419,15 +328,18 @@ nav .dropdown {
height: 23rem;
width: 23rem;
}
.album-cards .card:hover .bg-img {
filter: blur(5px) brightness(50%);
-webkit-filter: blur(5px) brightness(50%);
}
.album-cards .card:hover h2,
.album-cards .card:hover p {
filter: none;
opacity: 1;
}
.half-image-cards {
margin: auto;
margin-bottom: 2.5rem;
@@ -437,6 +349,7 @@ nav .dropdown {
grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
grid-gap: 1rem;
}
.half-image-cards .card {
transition: 0.75s;
color: black;
@@ -445,6 +358,7 @@ nav .dropdown {
border-radius: 7px;
text-decoration: none;
}
.half-image-cards .card div {
z-index: 1;
position: inherit;
@@ -454,12 +368,15 @@ nav .dropdown {
border-radius: 7px;
transition: 0.5s;
}
.half-image-cards .card h2 {
font-size: 1.9rem;
}
.half-image-cards .card p {
font-size: 1.1rem;
}
.half-image-cards .card h2,
.half-image-cards .card p {
/* color: black;
@@ -470,6 +387,7 @@ nav .dropdown {
opacity: 0;
transition: 0.5s;
}
.half-image-cards .card .bg-img {
/* background: url(/assets/img/t404_null-logo.png);
*/
@@ -479,18 +397,21 @@ nav .dropdown {
height: 30rem;
width: 30rem;
}
.half-image-cards .card:hover .bg-img {
filter: brightness(40%);
-webkit-filter: brightness(40%);
width: 8vw;
border-radius: 7px 0px 0px 7px;
}
.half-image-cards .card:hover h2,
.half-image-cards .card:hover p {
padding: 0.3rem 5vw 0.3rem 10vw;
filter: none;
opacity: 1;
}
.contact-cards {
display: grid;
grid-template-columns: repeat(auto-fill, 23rem);
@@ -498,16 +419,101 @@ nav .dropdown {
justify-content: center;
padding: 0;
}
.contact-cards 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;
}
.contact-email :not(textarea) {
text-align: center;
}
.contact-email .inputbox:hover {
background: #dedede;
}
.contact-email .inputbox:focus {
background: #cecece;
}
.contact-email button {
width: 100%;
height: 3rem;
border-radius: 5px;
text-align: center;
}
.contact-email .formbutton {
background: #272727;
color: #fff;
border: 0px;
transition-duration: 300ms;
cursor: pointer;
}
.contact-email .formbutton:hover {
background: #727272;
}
.contact-email .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;
}
.contact-email .error_box {
background: #fee;
border-radius: 5px;
margin: auto;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem 1rem;
margin-bottom: 1.5rem;
}
.contact-email .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;
}
.topic {
padding: 1rem;
font-size: 3rem;
margin-top: 3vw;
margin-bottom: 7vw;
}
.topic a {
text-decoration: none;
color: black;
@@ -518,22 +524,12 @@ nav .dropdown {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
.topic a:hover {
opacity: 70%;
background-size: 100% 0.2em;
}
/* overall */
.icons {
font-size: 2.25rem;
font-weight: 500;
}
@font-face {
font-family: "NerdFontsSymbols Nerd Font";
src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
}
.nf-icons {
font-family: "NerdFontsSymbols Nerd Font";
}
/* Releases */
.release-track {
background-size: cover;
@@ -544,9 +540,11 @@ nav .dropdown {
border-radius: 10px;
border: 1px solid #ddd;
}
.release-track strong {
color: #fff;
}
.release-track .text-box {
max-width: 1250px;
margin: 25% auto;
@@ -557,6 +555,7 @@ nav .dropdown {
border-radius: 7px;
font-size: 1.2rem;
}
.release-track .text-box a {
text-decoration: none;
color: #fff;
@@ -567,19 +566,23 @@ nav .dropdown {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
.release-track .text-box a:hover {
color: #ccc;
background-size: 100% 0.2em;
}
/* info */
.info {
text-decoration: none;
list-style-type: none;
font-size: 1.4rem;
}
.info li {
padding: 1rem;
}
.info a {
text-decoration: none;
color: #46f;
@@ -590,27 +593,25 @@ nav .dropdown {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
.info a:hover {
opacity: 70%;
background-size: 100% 0.2em;
}
.info .title {
font-size: 1.6rem;
}
.subdiv {
padding: 1rem;
}
.long-br {
display: block;
height: 2rem;
}
@media screen and (width >= 1180px) and (width<=1690px) {
@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;
}
nav .dropdown .dropdown-social a {
transition: 0.2s;
display: flex;
@@ -618,62 +619,78 @@ nav .dropdown {
border-radius: 7px;
margin: 0.3rem 0;
}
nav .dropdown .dropdown-social a:hover {
background-color: #ddd;
}
nav .dropdown .dropdown-social strong {
margin-left: auto;
margin-right: auto;
align-content: center;
}
nav .dropdown .dropdown-social p {
margin: 0.5rem 0;
}
nav .dropdown .dropdown-menu {
display: none;
}
nav .menu,
nav .dropdown-open.dropdown,
nav .dropdown-open.dropdown-social {
opacity: 1;
display: initial;
}
nav .social,
nav .dropdown-open.dropdown-menu {
opacity: 0;
display: none;
}
nav .burger {
display: block;
}
}
@media screen and (width<1180px) {
/*if(width<1125px)*/
nav {
font-size: 1.4rem;
}
nav ul img {
height: 2.5rem;
}
nav .social {
font-size: 2rem;
}
nav .burger {
height: 100px;
width: 100px;
}
nav .dropdown .dropdown-social,
nav .dropdown .dropdown-menu {
position: relative;
}
nav .dropdown .dropdown-menu {
width: 18rem;
padding: 0rem 0rem;
}
nav .dropdown .dropdown-social {
display: flex;
flex-wrap: wrap;
}
nav .dropdown .dropdown-menu p,
nav .dropdown .dropdown-social a {
transition: 0.2s;
@@ -681,34 +698,42 @@ nav .dropdown {
border-radius: 7px;
margin: 0.3rem 0;
}
nav .dropdown .dropdown-menu p:hover {
background-color: #ddd;
}
nav .dropdown .dropdown-social a:hover {
opacity: 50%;
}
nav .dropdown hr {
margin: 0.75rem 0rem;
padding: 1rem;
border: 1px solid #aaa;
}
nav .social-name {
display: none;
}
nav .social,
nav .menu-item {
display: none;
}
nav .dropdown-open {
transition: 0.3s;
opacity: 1;
display: initial;
}
nav .dropdown-open .dropdown,
nav .dropdown-open .dropdown-social,
nav .dropdown-open .downdown-menu {
display: initial;
}
nav .burger {
display: block;
}
assets/js/index.js
+11 -8
View File
@@ -10,14 +10,15 @@ let carousel = document.querySelector(".carousel");
let bg = document.querySelector(".slider-bg");
//Album-cards
let album_cards = document.querySelector(".album-cards");
let album_cards = document.querySelector(".album-cards"),
half_img_cards = document.querySelector(".half-image-cards");
//The Database call.
import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
const supabaseKey =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im93YmFtY3FkbXFldHJnY3pueHZhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI5NDU5NjIsImV4cCI6MjAzODUyMTk2Mn0.xNen7b513ZGwJ-Qu5iZ6K8qrmvy4QVjS10wiYbEEwKc";
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.
@@ -55,8 +56,8 @@ if (!params.get("release")) {
document.title = "t404:null | Home";
build_event(0);
}
if (path_name === "/" || path_name === "/release") build_event(1);
if (path_name === "/" || path_name === "/activity") build_event(2);
if (path_name === "/" || path_name === "/release" || path_name === "/release/") build_event(1);
if (path_name === "/" || path_name === "/activity" || path_name === "/activity/") build_event(2);
} else {
let main = document.querySelector("main");
main.innerHTML = "";
@@ -291,6 +292,7 @@ async function init_releases(d) {
<p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
</a>
*/
if(releases.length>0)album_cards.innerHTML="";
releases.forEach((a) => {
let _card = document.createElement("a"),
_bg_img = document.createElement("div"),
@@ -321,7 +323,7 @@ async function init_activities(d) {
if (d.error) {
console.error("Error fetching data:", d.error);
} else {
releases = d.data;
activities = d.data;
/*<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);
@@ -369,7 +371,8 @@ async function init_activities(d) {
<p>???</p>
<p>???</p>
</a>*/
releases.forEach((a) => {
if(activities.length>0)album_cards.innerHTML="";
activities.forEach((a) => {
let _card = document.createElement("a"),
_bg_img = document.createElement("div"),
_h2 = document.createElement("h2"),
@@ -390,7 +393,7 @@ async function init_activities(d) {
_card.appendChild(_h2);
_card.appendChild(_p_subtitle);
_card.appendChild(_p_preview);
album_cards.appendChild(_card);
half_img_cards.appendChild(_card);
});
}
}
assets/js/mail.js
+59
View File
@@ -0,0 +1,59 @@
import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
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.
const supabase = createClient(supabaseUrl, supabaseKey);
const form = document.getElementById("mail-form"),
nameInput = document.getElementById("name"),
emailInput = document.getElementById("email"),
subjectInput = document.getElementById("subject"),
messageInput = document.getElementById("message"),
statusMessage = document.querySelector(".box"),
submitButton = form.querySelector('button[type="submit"]');;
form.addEventListener("submit", async (e) => {
e.preventDefault();
const name = nameInput.value.trim();
const email = emailInput.value.trim();
const subject = subjectInput.value.trim();
const message = messageInput.value.trim();
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 }]);
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.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;
}
});
assets/svg/applemusic.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M509.9 452.2C503.5 479.6 482.7 495 454.8 500.2C430.3 504.7 409.9 505.8 390.3 490C366.4 469.9 366.1 436.6 387.6 415.6C404.6 399.4 428.5 396.1 464.4 389.8C470.4 388.7 475.6 387.3 480 382.4C486.4 375.2 484.4 378.3 484.4 219.2C484.4 208 478.9 204.9 467.4 206.9C459.2 208.3 281.7 241.5 281.7 241.5C271.5 243.7 268.3 246.7 268.3 258.2C268.3 492.9 269.4 482.1 265.8 497.7C261.6 515.9 250.4 529.6 235.6 537.2C218.8 546.5 188.4 550.6 172.2 547.6C129 539.5 113.8 489.6 143.1 461C160.1 444.8 184 441.5 219.9 435.2C225.9 434.1 231.1 432.7 235.5 427.8C245.6 416.3 237.3 171.2 240.7 157.6C241.5 152.4 243.7 148 247.8 144.7C252 141.2 259.6 139.2 261.2 139.2C465.2 101 490.1 96.1 493.6 96.1C505.1 95.3 511.7 102.1 511.7 113.7C511.9 458.2 512.8 439.7 509.9 452.2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 978 B

assets/svg/bandcamp.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM368.2 398.1L187.2 398.1L271.9 242L452.9 242L368.2 398.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 387 B

assets/svg/discord.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M524.5 133.8C524.3 133.5 524.1 133.2 523.7 133.1C485.6 115.6 445.3 103.1 404 96C403.6 95.9 403.2 96 402.9 96.1C402.6 96.2 402.3 96.5 402.1 96.9C396.6 106.8 391.6 117.1 387.2 127.5C342.6 120.7 297.3 120.7 252.8 127.5C248.3 117 243.3 106.8 237.7 96.9C237.5 96.6 237.2 96.3 236.9 96.1C236.6 95.9 236.2 95.9 235.8 95.9C194.5 103 154.2 115.5 116.1 133C115.8 133.1 115.5 133.4 115.3 133.7C39.1 247.5 18.2 358.6 28.4 468.2C28.4 468.5 28.5 468.7 28.6 469C28.7 469.3 28.9 469.4 29.1 469.6C73.5 502.5 123.1 527.6 175.9 543.8C176.3 543.9 176.7 543.9 177 543.8C177.3 543.7 177.7 543.4 177.9 543.1C189.2 527.7 199.3 511.3 207.9 494.3C208 494.1 208.1 493.8 208.1 493.5C208.1 493.2 208.1 493 208 492.7C207.9 492.4 207.8 492.2 207.6 492.1C207.4 492 207.2 491.8 206.9 491.7C191.1 485.6 175.7 478.3 161 469.8C160.7 469.6 160.5 469.4 160.3 469.2C160.1 469 160 468.6 160 468.3C160 468 160 467.7 160.2 467.4C160.4 467.1 160.5 466.9 160.8 466.7C163.9 464.4 167 462 169.9 459.6C170.2 459.4 170.5 459.2 170.8 459.2C171.1 459.2 171.5 459.2 171.8 459.3C268 503.2 372.2 503.2 467.3 459.3C467.6 459.2 468 459.1 468.3 459.1C468.6 459.1 469 459.3 469.2 459.5C472.1 461.9 475.2 464.4 478.3 466.7C478.5 466.9 478.7 467.1 478.9 467.4C479.1 467.7 479.1 468 479.1 468.3C479.1 468.6 479 468.9 478.8 469.2C478.6 469.5 478.4 469.7 478.2 469.8C463.5 478.4 448.2 485.7 432.3 491.6C432.1 491.7 431.8 491.8 431.6 492C431.4 492.2 431.3 492.4 431.2 492.7C431.1 493 431.1 493.2 431.1 493.5C431.1 493.8 431.2 494 431.3 494.3C440.1 511.3 450.1 527.6 461.3 543.1C461.5 543.4 461.9 543.7 462.2 543.8C462.5 543.9 463 543.9 463.3 543.8C516.2 527.6 565.9 502.5 610.4 469.6C610.6 469.4 610.8 469.2 610.9 469C611 468.8 611.1 468.5 611.1 468.2C623.4 341.4 590.6 231.3 524.2 133.7zM222.5 401.5C193.5 401.5 169.7 374.9 169.7 342.3C169.7 309.7 193.1 283.1 222.5 283.1C252.2 283.1 275.8 309.9 275.3 342.3C275.3 375 251.9 401.5 222.5 401.5zM417.9 401.5C388.9 401.5 365.1 374.9 365.1 342.3C365.1 309.7 388.5 283.1 417.9 283.1C447.6 283.1 471.2 309.9 470.7 342.3C470.7 375 447.5 401.5 417.9 401.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

assets/svg/placeholder.svg
+1
View File
@@ -0,0 +1 @@
assets/svg/soundcloud.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M640.2 362.6C638.9 385.7 628.7 407.4 611.8 423.1C594.9 438.8 572.6 447.5 549.5 447.2L331.5 447.2C326.7 447.2 322.1 445.2 318.7 441.8C315.3 438.4 313.4 433.8 313.4 429L313.4 194.2C313.2 190.2 314.3 186.2 316.5 182.8C318.7 179.4 321.8 176.7 325.5 175.1C325.5 175.1 345.6 161.2 387.8 161.2C413.6 161.2 438.9 168.1 461.1 181.3C478.4 191.5 493.4 205.1 505.2 221.4C517 237.7 525.2 256.2 529.4 275.8C536.9 273.7 544.7 272.6 552.5 272.6C564.2 272.5 575.8 274.8 586.7 279.3C597.6 283.8 607.2 290.6 615.4 299C623.6 307.4 630 317.3 634.3 328.3C638.6 339.3 640.6 350.9 640.2 362.6zM286.2 209.1C286.3 208.1 286.2 207.1 285.9 206.2C285.6 205.3 285.1 204.4 284.4 203.6C283.7 202.8 282.9 202.3 282 201.9C280.2 201.1 278 201.1 276.2 201.9C275.3 202.3 274.5 202.9 273.8 203.6C273.1 204.3 272.6 205.2 272.3 206.2C272 207.2 271.9 208.1 272 209.1C266 288 261.4 362 272 440.7C272.2 442.4 273 444 274.3 445.2C276.9 447.6 281.1 447.6 283.7 445.2C285 444 285.8 442.4 286 440.7C297.3 361.3 292.6 288.7 286 209.1L286.2 209.1zM242.2 236.4C242 234.6 241.1 232.9 239.8 231.7C238.5 230.5 236.7 229.8 234.8 229.8C232.9 229.8 231.2 230.5 229.8 231.7C228.4 232.9 227.6 234.6 227.4 236.4C219.5 304.3 219.5 372.9 227.4 440.8C227.7 442.6 228.6 444.2 229.9 445.3C231.2 446.4 233 447.1 234.7 447.1C236.4 447.1 238.2 446.5 239.5 445.3C240.8 444.1 241.7 442.5 242 440.8C250.8 373 250.8 304.3 242.1 236.4L242.2 236.4zM197.9 229.5C197.7 227.7 196.9 226.1 195.6 224.9C194.3 223.7 192.6 223.1 190.8 223.1C189 223.1 187.3 223.8 186 224.9C184.7 226 183.9 227.7 183.7 229.5C177 301.5 173.5 368.8 183.7 440.6C183.7 442.5 184.4 444.3 185.8 445.6C187.2 446.9 188.9 447.7 190.8 447.7C192.7 447.7 194.5 447 195.8 445.6C197.1 444.2 197.9 442.5 197.9 440.6C208.4 367.8 205.2 302.4 198 229.5L197.9 229.5zM153.9 250.1C153.9 248.2 153.1 246.3 151.8 244.9C150.5 243.5 148.6 242.8 146.6 242.8C144.6 242.8 142.8 243.6 141.4 244.9C140 246.2 139.3 248.1 139.3 250.1C131.2 313.4 131.2 377.6 139.3 440.9C139.5 442.7 140.3 444.3 141.7 445.5C143.1 446.7 144.8 447.4 146.5 447.4C148.2 447.4 150 446.7 151.3 445.5C152.6 444.3 153.5 442.7 153.7 440.9C162.5 377.6 162.6 313.4 154 250.1L153.9 250.1zM109.4 297.7C109.4 295.8 108.6 293.9 107.3 292.6C106 291.3 104.1 290.5 102.2 290.5C100.3 290.5 98.4 291.3 97.1 292.6C95.8 293.9 95 295.8 95 297.7C84.5 346.9 89.5 391.6 95.4 441.3C95.7 442.9 96.5 444.4 97.7 445.5C98.9 446.6 100.5 447.2 102.2 447.2C103.9 447.2 105.4 446.6 106.7 445.5C108 444.4 108.8 443 109 441.3C115.6 390.9 120.6 347.2 109.4 297.7zM65.3 290.2C65.1 288.4 64.2 286.7 62.9 285.4C61.6 284.1 59.7 283.5 57.9 283.5C56.1 283.5 54.3 284.2 52.9 285.4C51.5 286.6 50.7 288.3 50.5 290.2C41.2 340.4 44.3 384.6 50.8 434.7C51.5 442.3 64.4 442.2 65.2 434.7C72.4 383.8 75.7 340.9 65.5 290.2L65.3 290.2zM20.7 314.8C20.5 313 19.6 311.3 18.3 310C17 308.7 15.1 308.1 13.3 308.1C11.5 308.1 9.7 308.8 8.3 310C6.9 311.2 6 312.9 5.9 314.8C-2.6 348.5 0 376.4 6.5 410.2C6.7 411.9 7.5 413.5 8.8 414.6C10.1 415.7 11.7 416.4 13.5 416.4C15.3 416.4 16.9 415.8 18.2 414.6C19.5 413.4 20.3 411.9 20.5 410.2C28 375.7 31.7 348.4 20.9 314.8L20.7 314.8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

assets/svg/spotify.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM420.7 436.9C416.5 436.9 413.9 435.6 410 433.3C347.6 395.7 275 394.1 203.3 408.8C199.4 409.8 194.3 411.4 191.4 411.4C181.7 411.4 175.6 403.7 175.6 395.6C175.6 385.3 181.7 380.4 189.2 378.8C271.1 360.7 354.8 362.3 426.2 405C432.3 408.9 435.9 412.4 435.9 421.5C435.9 430.6 428.8 436.9 420.7 436.9zM447.6 371.3C442.4 371.3 438.9 369 435.3 367.1C372.8 330.1 279.6 315.2 196.7 337.7C191.9 339 189.3 340.3 184.8 340.3C174.1 340.3 165.4 331.6 165.4 320.9C165.4 310.2 170.6 303.1 180.9 300.2C208.7 292.4 237.1 286.6 278.7 286.6C343.6 286.6 406.3 302.7 455.7 332.1C463.8 336.9 467 343.1 467 351.8C466.9 362.6 458.5 371.3 447.6 371.3zM478.6 295.1C473.4 295.1 470.2 293.8 465.7 291.2C394.5 248.7 267.2 238.5 184.8 261.5C181.2 262.5 176.7 264.1 171.9 264.1C158.7 264.1 148.6 253.8 148.6 240.5C148.6 226.9 157 219.2 166 216.6C201.2 206.3 240.6 201.4 283.5 201.4C356.5 201.4 433 216.6 488.9 249.2C496.7 253.7 501.8 259.9 501.8 271.8C501.8 285.4 490.8 295.1 478.6 295.1z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

assets/svg/x.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M 439.895 112 L 503.879 112 L 364.133 288.199 L 528.527 528 L 399.84 528 L 298.973 382.602 L 183.699 528 L 119.629 528 L 269.066 339.5 L 111.473 112 L 243.422 112 L 334.5 244.898 Z M 417.422 485.801 L 452.855 485.801 L 224.117 152 L 186.055 152 Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 478 B

assets/svg/youtube.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M581.7 188.1C575.5 164.4 556.9 145.8 533.4 139.5C490.9 128 320.1 128 320.1 128C320.1 128 149.3 128 106.7 139.5C83.2 145.8 64.7 164.4 58.4 188.1C47 231 47 320.4 47 320.4C47 320.4 47 409.8 58.4 452.7C64.7 476.3 83.2 494.2 106.7 500.5C149.3 512 320.1 512 320.1 512C320.1 512 490.9 512 533.5 500.5C557 494.2 575.5 476.3 581.8 452.7C593.2 409.8 593.2 320.4 593.2 320.4C593.2 320.4 593.2 231 581.8 188.1zM264.2 401.6L264.2 239.2L406.9 320.4L264.2 401.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 679 B

contacts/index.html
+333 -222
View File
@@ -1,226 +1,337 @@
<!DOCTYPE html>
<!doctype html>
<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 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 class="nf-icons">&#xe8c9;</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>
<head>
<title>t404:null | Contacts</title>
<meta
name="description"
content="Hello there! I'm t404:null (a.k.a t404owo).
Here is my contact list. Feel free to contact me in case you need anything in my reach ;)"
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
<script src="/assets/js/mail.js" type="module"></script>
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<div id="cross">
<span></span>
<span></span>
</nav>
<main class="main-page">
<h1 class="topic">Contacts</h1>
<ul class="info contact-cards">
<li>
<strong class="title" style="color: #5b6"
><b class="nf-icons icons">&#xf0369;</b> Phone (Messages
Only)</strong
>
<p class="desc">+49 (0) 15236754810</p>
</li>
<li>
<strong class="title" style="color: #555"
><b class="nf-icons icons">&#xf42f;</b> Email</strong
>
<p class="desc">
<a href="mailto:info@t404null.com" class="text-info"
>info@t404null.com</a
>
<br />
<a href="mailto:request@t404null.com" class="text-info"
>request@t404null.com</a
>
<br />
<a
href="mailto:t404.null@t404null.com"
class="text-info"
>t404.null@t404null.com</a
>
<br /><br />Or:<br />
<a href="mailto:t404.null@gmail.com" class="text-info"
>t404.null@gmail.com</a
>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info"
>t404owo@gmail.com</a
>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info"
>tags4owo@gmail.com</a
>
<br />
</p>
</li>
<li>
<a
href="https://discord.gg/YJmkAFbKFX"
style="color: #5865f2; background: none"
>
<strong class="title"
><b class="nf-icons icons">&#xf1ff;</b>
Discord</strong
>
<p class="desc">https://discord.gg/YJmkAFbKFX</p>
</a>
</li>
<li>
<a
href="https://x.com/t404_null"
style="color: black; background: none"
>
<strong class="title"
><b class="nf-icons icons">&#xe8c9;</b> X /
Twitter</strong
>
<p class="desc">@t404_null</p>
</a>
</li>
</ul>
<hr />
<h1 class="topic">(Or) Contact me here</h1>
<div class="contact-email">
<form method="POST" class="form" id="mail-form">
<label for="name">Name:</label>
<input
type="text"
name="name"
id="name"
class="inputbox"
placeholder="Your Name"
required
/>
<br />
<label for="email">Email:</label>
<input
type="email"
name="email"
id="email"
class="inputbox"
placeholder="your.email@here.please"
autocomplete="email"
required
/>
<br />
<label for="subject">Subject:</label>
<input
type="text"
name="subject"
id="subject"
class="inputbox"
placeholder="Your topic here ;)"
required
/>
<br />
<label for="message">Message:</label>
<textarea
type="text"
name="message"
id="message"
class="inputbox"
placeholder="Message here."
required
></textarea>
<br />
<div class="box"></div>
<button type="submit" class="formbutton">Submit</button>
</form>
</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>
</main>
<div class="footer">
&copy; t404:null 2021-2025 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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 class= "main-page">
<h1 class="topic">Contacts</h1>
<ul class="info contact-cards">
<li>
<strong class="title" style="color:#5b6"><b class="nf-icons icons">&#xf0369;</b> Phone (Messages Only)</strong>
<p class="desc">+49 (0) 15236754810</p>
</li>
<li>
<strong class="title" style="color:#555"><b class="nf-icons icons">&#xf42f;</b> Email</strong>
<p class="desc">
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br />
</p>
</li>
<li>
<a href="https://discord.gg/YJmkAFbKFX" style="color:#5865F2; background:none;">
<strong class="title"><b class="nf-icons icons">&#xf1ff;</b> Discord</strong>
<p class="desc">https://discord.gg/YJmkAFbKFX</p>
</a>
</li>
<li><a href="https://x.com/t404_null" style="color:black; background: none">
<strong class="title"><b class="icons">&Xopf;</b> X / Twitter</strong>
<p class="desc">@t404_null</p>
</a>
</li>
</ul>
</main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</html>
</body>
</html>
index.html
+237 -226
View File
@@ -1,233 +1,244 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>t404:null</title>
<meta
name="description"
content="Hello there! I'm t404:null (a.k.a t404owo).
<head>
<title>t404:null</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" />
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init();
</script>
</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 class="nf-icons">&#xe8c9;</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>
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<div id="cross">
<span></span>
<span></span>
</nav>
<main class="main-page">
<div class="container">
<div class="carousel">
<div class="slider-bg"></div>
<div class="slider" id="pages"></div>
<div class="control">
<span class="prev">&lt;</span>
<span class="next">&gt;</span>
</div>
<ul class="pgctrl"></ul>
</div>
</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></div>
<!--💀-->
<hr />
<h1 class="topic">
<a href="/release">Releases (Click for more)</a>
</h1>
<div class="album-cards">Nothing here yet. ;D</div>
<hr />
<h1 class="topic">
<a href="/activity">Activities</a>
</h1>
<div class="half-image-cards">Nothing here yet. ;D</div>
</main>
<div class="footer">
&copy; t404:null 2021-2025 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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 class="main-page">
<div class="container">
<div class="carousel">
<div class="slider-bg"></div>
<div class="slider" id="pages"></div>
<div class="control">
<span class="prev">&lt;</span>
<span class="next">&gt;</span>
</div>
<ul class="pgctrl"></ul>
</div>
</div>
<div></div>
<!--💀-->
<hr />
<h1 class="topic">
<a href="/release">Releases (Click for more)</a>
</h1>
<div class="album-cards"></div>
<hr />
<h1 class="topic">
<a href="/activity">Activities</a>
</h1>
<div class="half-image-cards"></div>
</main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</body>
<script src="/assets/js/index.js" type="module"></script>
<script src="/assets/js/index.js" type="module"></script>
</html>
main.css
+950
View File
@@ -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;
}
}
}
release/A_Lake_With_Endless_Stars/index.html
+270 -250
View File
@@ -1,261 +1,281 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>t404:null | A Lake With Endless Stars</title>
<meta name="description"
content="”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.
<head>
<title>t404:null | A Lake With Endless Stars</title>
<meta
name="description"
content="”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.
The track is also a part of a fanmade event named ”Fanmade of Fighters”.
Available on:
YouTube
Soundcloud
Bandcamp,
Spotify
and more...">
<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 class="nf-icons">&#xe8c9;</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>
and more..."
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<div id="cross">
<span></span>
<span></span>
</nav>
<main>
<div
class="release-track"
style="
background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
background-size: cover;
background-position: center;
"
>
<div class="text-box">
<h1 class="title">
<strong>A Lake with Endless Stars</strong>
</h1>
<p class="description">
"Under the coruscating night sky, gaze into the
kaleidoscopic waters..."
</p>
<div class="long-break"></div>
<p class="description">
"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.
</p>
<p>
<br />Available on: <br />
<a
href="https://youtu.be/zutjmeOELoA"
class="text-primary"
>YouTube</a
>
<br />
<a
href="https://m.soundcloud.com/t404null/a-lake-with-endless-stars"
class="text-primary"
>Soundcloud</a
>
<br />
<a
href="https://t404null.bandcamp.com/track/a-lake-with-endless-stars"
class="text-primary"
>Bandcamp</a
>
<br />
<a
href="https://music.apple.com/us/album/a-lake-with-endless-stars-single/1686073588"
class="text-primary"
>Itunes / Apple Music</a
>
<br />
<a
href="https://open.spotify.com/album/2zRZ033WRAaoA33Q0x1Cin"
class="text-primary"
>Spotify</a
>
</p>
</div>
</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>
</main>
<div class="footer">
&copy; t404:null 2021-2024 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
background-size: cover;
background-position: center;
"
>
<div class="text-box">
<h1 class="title">
<strong>A Lake with Endless Stars</strong>
</h1>
<p class="description">
"Under the coruscating night sky, gaze into the kaleidoscopic
waters..."
</p>
<div class="long-break"></div>
<p class="description">
"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.
</p>
<p>
<br />Available on: <br />
<a href="https://youtu.be/zutjmeOELoA" class="text-primary"
>YouTube</a
>
<br />
<a
href="https://m.soundcloud.com/t404null/a-lake-with-endless-stars"
class="text-primary"
>Soundcloud</a
>
<br />
<a
href="https://t404null.bandcamp.com/track/a-lake-with-endless-stars"
class="text-primary"
>Bandcamp</a
>
<br />
<a
href="https://music.apple.com/us/album/a-lake-with-endless-stars-single/1686073588"
class="text-primary"
>Itunes / Apple Music</a
>
<br />
<a
href="https://open.spotify.com/album/2zRZ033WRAaoA33Q0x1Cin"
class="text-primary"
>Spotify</a
>
</p>
</div>
</div>
</main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</body>
</html>
release/Oblitus_Requiem/index.html
+282 -220
View File
@@ -1,229 +1,291 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>t404:null | Oblitus Requiem \\Against the Forsaken Legacy//</title>
<meta name="description"
content="”Oblitus Requiem \\Against the Forsaken Legacy//” is a custom track for a Grand Finals Tiebreaker of VNMC2023 made by t404:null, and is released on Youtube, Bandcamp and Soundcloud at Aug. 12th 2023...
<head>
<title>
t404:null | Oblitus Requiem \\Against the Forsaken Legacy//
</title>
<meta
name="description"
content="”Oblitus Requiem \\Against the Forsaken Legacy//” is a custom track for a Grand Finals Tiebreaker of VNMC2023 made by t404:null, and is released on Youtube, Bandcamp and Soundcloud at Aug. 12th 2023...
Available on:
YouTube
Soundcloud
Bandcamp,
Spotify (31.08.2023)
and more...">
<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 class="nf-icons">&#xe8c9;</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>
and more..."
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<div id="cross">
<span></span>
<span></span>
</nav>
<main>
<div
class="release-track"
style="
background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
background-size: cover;
background-position: center;
"
>
<div class="text-box">
<h1 class="title">
<strong
>Oblitus Requiem \\Against the Forsaken
Legacy//</strong
>
</h1>
<p class="description">
"Even if you don't remember me now, I will bring the you
I once knew back from them."
</p>
<div class="long-break"></div>
<p class="description">
"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;"
</p>
<p class="description">
"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...
</p>
<p>
<br />Available on: <br />
<a
href="https://youtu.be/c1WtqWyt1IU"
class="text-primary"
>YouTube</a
>
<br />
<a
href="https://m.soundcloud.com/t404null/oblitus-requiem"
class="text-primary"
>Soundcloud</a
>
<br />
<a
href="https://t404null.bandcamp.com/album/oblitus-requiem-against-the-forsaken-legacy"
class="text-primary"
>Bandcamp</a
>
<br />
<a
href="https://music.apple.com/album/oblitus-requiem-against-the-forsaken-legacy-single/1702294902"
class="text-primary"
>Itunes / Apple Music</a
>
<br />
<a
href="https://open.spotify.com/album/7xJY39U6M3Z5NuNzt2GnCK"
class="text-primary"
>Spotify</a
>
</p>
</div>
</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>
</main>
<div class="footer">
&copy; t404:null 2021-2024 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
background-size: cover;
background-position: center;
">
<div class="text-box">
<h1 class="title">
<strong>Oblitus Requiem \\Against the Forsaken Legacy//</strong>
</h1>
<p class="description"> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
<div class="long-break"></div>
<p class="description"> "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;" </p>
<p class="description"> "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... </p>
<p>
<br />Available on: <br />
<a href="https://youtu.be/c1WtqWyt1IU" class="text-primary">YouTube</a>
<br />
<a href="https://m.soundcloud.com/t404null/oblitus-requiem" class="text-primary">Soundcloud</a>
<br />
<a href="https://t404null.bandcamp.com/album/oblitus-requiem-against-the-forsaken-legacy" class="text-primary">Bandcamp</a>
<br />
<a href="https://music.apple.com/album/oblitus-requiem-against-the-forsaken-legacy-single/1702294902" class="text-primary">Itunes / Apple Music</a>
<br />
<a href="https://open.spotify.com/album/7xJY39U6M3Z5NuNzt2GnCK" class="text-primary">Spotify</a>
</p>
</div>
</div>
</main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</html>
</body>
</html>
release/hello.world(Zer/O)/index.html
+275 -214
View File
@@ -1,8 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>t404:null | hello.world(Zer/O)</title>
<meta name="description" content="”What do I see... a new world...?
<head>
<title>t404:null | hello.world(Zer/O)</title>
<meta
name="description"
content="”What do 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.2022 on Youtube, spotify.
@@ -14,216 +16,275 @@ Spotify(Release date at 09.20.2021)
YouTube
YouTube Music(Release date at 09.20.2021)
Soundcloud
Bandcamp">
<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 class="nf-icons">&#xe8c9;</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>
Bandcamp"
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<div id="cross">
<span></span>
<span></span>
</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>
</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>
</main>
<div class="footer">
&copy; t404:null 2021-2024 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</html>
</body>
</html>
release/index.html
+218 -197
View File
@@ -1,200 +1,221 @@
<!DOCTYPE html>
<!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 class="nf-icons">&#xe8c9;</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>
<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://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<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>
</nav>
<main class="main-page">
<h1 class="topic">Releases</h1>
<div class="album-cards">Nothing here yet. ;D</div>
<script src="/assets/js/index.js" type="module"></script>
</main>
<div class="footer">
&copy; t404:null 2021-2025 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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 class= "main-page">
<h1 class="topic">Releases</h1>
<div class="album-cards">
</div>
<script src="/assets/js/index.js" type="module"></script>
</main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</html>
</body>
</html>
song_usage_terms/index.html
+480 -289
View File
@@ -1,292 +1,483 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>t404:null | Home</title>
<meta name="description" content="Hello there! Please be friendly and read this ”terms of using my songs” before using my(t404:null's) song for any purposes." />
<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 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 class="nf-icons">&#xe8c9;</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>
<head>
<title>t404:null | Usage of my song(s) / track(s)</title>
<meta
name="description"
content="Hello there! Please be friendly and read this ”terms of using my songs” before using my(t404:null's) song for any purposes."
/>
<link
rel="icon"
type="image/x-icon"
href="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/avatar.png"
/>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href="/">
<img
src="https://gitlab.com/t404null/cdn.t404null.com/-/raw/main/logo.png"
alt="t404:null"
class="logo"
/>
</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 class="nf-icons">&#xe8c9;</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 nf-icons">&#xe8c9;</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>
<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>
</nav>
<main>
<h1 class="topic">
<strong>Song Usage Terms and Policies</strong>
<br />
</h1>
<ul class="info">
<li>
<strong class="title"
>Usage of my song(s) / track(s)</strong
>
<br />
In any cases, use for purpose against the law, against
public order and morals, or for purposes those are (exclude
educational use) for religious use, political use, or for
use to hate, disparage or be offensive to myself or a third
party (including other possible ways) are strictly not being
allowed. <br />
Also, you're not being allowed to steal my song(s)/track(s)!
I'm not transferring anyone the right to have the ownership
from any of my song(s)/track(s) once it's set. <br />(All
released tracks and songs go to
<a href="/release">this page</a>)
<div class="long-br"></div>
All use of the music/track(s)/song(s) is at your own risk.
I'm not responsible for any damage, problems caused by your
use of my music/track(s)/song(s) and won't be involved in by
any way.
</li>
<li>
<strong class="title"
>1.) In the case if you want to use my song(s) /
track(s) as a corporation / a company material</strong
>
<br />
If you wish to use my song as a corporation / a company
material, no matter how you use it, please contact me and
get confirmation at one of the following email address(es):
<br />
<a href="mailto:request@t404null.com" class="text-info"
>request@t404null.com</a
>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info"
>t404.null@gmail.com</a
>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info"
>t404owo@gmail.com</a
>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info"
>tags4owo@gmail.com</a
>
<br />
</li>
<li>
<div class="subdiv">
<strong class="title"
>1.1.) In the case if you want to use my song(s) /
track(s) as an educational institution or a
volunteer organization / a company for
volunteer</strong
>
<br />
You are allowed use my songs as well as individuals.
<br />
If you can, it would be (very) helpful for me if you
could confirm it once in the following email adress(es):
<br />
<a href="mailto:info@t404null.com" class="text-info"
>info@t404null.com</a
>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info"
>t404.null@gmail.com</a
>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info"
>t404owo@gmail.com</a
>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info"
>tags4owo@gmail.com</a
>
<br />
<br />
Please note that this is intended primarily, but not
exclusively, for educational institutions related to
music.
</div>
</li>
<li>
<strong class="title"
>2.) In the case if you want to use my song(s) /
track(s) as individual/single person (for BGMs for
video(s) / stream(s), Remixing(or arranging)
etc.)</strong
>
<br />
You are allowed to use my songs / tracks without my certain
permission(s) if: <br />- The song(s) / track(s) that /
those is / are included in
<a href="https://t404null.glitch.me/allowed_to_use"
>this page.</a
>
<br />- The song(s) / track(s) that / those is / are
included in an/more album(s) or EP(s) / Single(s) that /
those is / are not involved to the copyright of any games
that/those don't allow you to use their song(s). <br />- The
song(s) / track(s) that / those has / have been uploaded to
<a href="https://youtube.com/@t404_null"
>my YT (YouTube) channel</a
>
(<a href="https://www.youtube.com/@t404_null"
>https://www.youtube.com/@t404_null</a
>), that is not originally written for a game (this includes
rhythm game(s) those are not allowing you to use their
song(s)), organization, or a company.
<div class="long-br"></div>
Particularly, for YouTube, Bilibili or Twitch (etc), if you
want to use any of my song(s)/track(s) as a background music
for videos or stream, it does not matter if it is monetized
or not. However, please note that it may be registered in
Content ID in YouTube. <br />If the song you want to use is
a remix, and the original song may have been come from other
sources, or it may be an unofficial remix that has not been
licensed by the "original author". In such cases, I won't be
able to give my proper permission, so you have to contact
the person who made the song / soundtrack, or the person who
is responsible for the copyright of that song/track.
<div class="long-br"></div>
<strong
>Make sure please credit me if it's possible!!!</strong
>
<div class="long-br"></div>
<strong
>List of allowed-to-use songs (Last updated: Aug 22,
2021):</strong
>
<a href="/allowed_to_use"
>https://t404null.glitch.me/allowed_to_use</a
>
</li>
<li>
<strong class="title"
>3.) In the case if you are Individuals who wish to use
the music itself as a file that is downloadable,
extractable, or users can easily get the song data
itself</strong
>
<br />Conditions vary depending on the method(s) of
use/using:
</li>
<li>
<div class="subdiv">
<strong class="title"
>3.1.) If you want to distribute song(s)/track(s) as
an unofficial custom map / chart for a rhythm game
(Osu!, Geometry Dash, A Dance of Fire and
Ice(ADOFAI), Beat Saber, etc.)</strong
>
<br />You are allowed to use the music/track(s)/song(s)
under the same conditions as case "2.)" above. <br />In
this case, no charts / maps can be sold for a fee. (Free
distribution allowed only) <br />Here are some explicits
that you are allowed to make: <br />- Mapping / making a
chart or playing it in a monetized stream or video
<br />- Distributing a chart or play data / recorded
video on the site which has ad.
<div class="long-br"></div>
In any case, I have no permission(s) or involvement(s)
other than the use of my music.
</div>
</li>
<li>
<div class="subdiv">
<strong class="title"
>3.2.) If you want to distribute the music as an
official chart / official music for a rhythm game
(in short, if you're a developer/offical
charter/owner of that game) or if you want to use my
song/track as a BGM that is included for a program /
a game or its directory</strong
>
<br />
Please contact me at one of the following email
address(es): <br />
<a href="mailto:request@t404null.com" class="text-info"
>request@t404null.com</a
>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info"
>t404.null@gmail.com</a
>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info"
>t404owo@gmail.com</a
>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info"
>tags4owo@gmail.com</a
>
<br />
</div>
</li>
<li>
<div class="dubdiv">
<strong class="title"
>3.3.) If you want to repost my song</strong
>
<br />
Please contact me at one of the following email
address(es): <br />
<a href="mailto:request@t404null.com" class="text-info"
>request@t404null.com</a
>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info"
>t404.null@gmail.com</a
>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info"
>t404owo@gmail.com</a
>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info"
>tags4owo@gmail.com</a
>
<br />
</div>
</li>
<li>
<strong class="title">4.) Other Uses</strong>
<br />
Please contact me at one of the following email address(es):
<br />
<a href="mailto:info@t404null.com" class="text-info"
>info@t404null.com</a
>
<div class="long-br"></div>
Or:
<br />
<a href="mailto:t404.null@gmail.com" class="text-info"
>t404.null@gmail.com</a
>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info"
>t404owo@gmail.com</a
>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info"
>tags4owo@gmail.com</a
>
<br />
</li>
<div class="long-br"></div>
&copy; t404:null 2021-2025 - All Rights Reserved.
</ul>
</main>
<div class="footer">
&copy; t404:null 2021-2025 - All Rights Reserved
</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 nf-icons">&#xe8c9;</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">
<strong>Song Usage Terms and Policies</strong>
<br />
</h1>
<ul class="info">
<li>
<strong class="title">Usage of my song(s) / track(s)</strong>
<br /> In any cases, use for purpose against the law, against public order and morals, or for purposes those are (exclude educational use) for religious use, political use, or for use to hate, disparage or be offensive to myself or a third party (including other possible ways) are strictly not being allowed.
<br /> Also, you're not being allowed to steal my song(s)/track(s)! I'm not transferring anyone the right to have the ownership from any of my song(s)/track(s) once it's set. <br />(All released tracks and songs go to <a href="/release">this page</a>)
<div class="long-br"></div> All use of the music/track(s)/song(s) is at your own risk. I'm not responsible for any damage, problems caused by your use of my music/track(s)/song(s) and won't be involved in by any way.
</li>
<li>
<strong class="title">1.) In the case if you want to use my song(s) / track(s) as a corporation / a company</strong>
<br /> If you wish to use my song as a corporation / a company, no matter how you use it, please contact me and get confirmation at one of the following email address(es): <br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
</li>
<li>
<div class="subdiv">
<strong class="title">1.1.) In the case if you want to use my song(s) / track(s) as an educational institution or a volunteer organization / a company for volunteer</strong>
<br /> You are allowed use my songs as well as individuals. <br /> If you can, it would be (very) helpful for me if you could confirm it once in the following email adress(es): <br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br /> Please note that this is intended primarily, but not exclusively, for educational institutions related to music.
</div>
</li>
<li>
<strong class="title">2.) In the case if you want to use my song(s) / track(s) as individual/single person (for BGMs for video(s) / stream(s), Remixing(or arranging) etc.)</strong>
<br /> You are allowed to use my songs / tracks without my certain permission(s) if: <br />- The song(s) / track(s) that / those is / are included in <a href="https://t404null.glitch.me/allowed_to_use">this page.</a>
<br />- The song(s) / track(s) that / those is / are included in an/more album(s) or EP(s) / Single(s) that / those is / are not involved to the copyright of any games that/those don't allow you to use their song(s).
<br />- The song(s) / track(s) that / those has / have been uploaded to <a href="https://youtube.com/@t404_null">my YT (YouTube) channel</a> (<a href="https://www.youtube.com/@t404_null">https://www.youtube.com/@t404_null</a>), that is not originally written for a game (this includes rhythm game(s) those are not allowing you to use their song(s)), organization, or a company.
<div class="long-br"></div> Particularly, for YouTube, Bilibili or Twitch (etc), if you want to use any of my song(s)/track(s) as a background music for videos or stream, it does not matter if it is monetized or not. However, please note that it may be registered in Content ID in YouTube.
<br />If the song you want to use is a remix, and the original song may have been come from other sources, or it may be an unofficial remix that has not been licensed by the "original author". In such cases, I won't be able to give my proper permission, so you have to contact the person who made the song / soundtrack, or the person who is responsible for the copyright of that song/track.
<div class="long-br"></div>
<strong>Make sure please credit me if it's possible!!!</strong>
<div class="long-br"></div>
<strong>List of allowed-to-use songs (Last updated: Aug 22, 2021):</strong>
<a href="/allowed_to_use">https://t404null.glitch.me/allowed_to_use</a>
</li>
<li>
<strong class="title">3.) In the case if you are Individuals who wish to use the music itself as a file that is downloadable, extractable, or users can easily get the song data itself</strong>
<br />Conditions vary depending on the method(s) of use/using:
</li>
<li>
<div class="subdiv">
<strong class="title">3.1.) If you want to distribute song(s)/track(s) as an unofficial custom map / chart for a rhythm game (Osu!, Geometry Dash, A Dance of Fire and Ice(ADOFAI), Beat Saber, etc.)</strong>
<br />You are allowed to use the music/track(s)/song(s) under the same conditions as case "2.)" above. <br />In this case, no charts / maps can be sold for a fee. (Free distribution allowed only)
<br />Here are some explicits that you are allowed to make:
<br />- Mapping / making a chart or playing it in a monetized stream or video
<br />- Distributing a chart or play data / recorded video on the site which has ad.
<div class="long-br"></div>
In any case, I have no permission(s) or involvement(s) other than the use of my music.
</div>
</li>
<li>
<div class="subdiv">
<strong class="title">3.2.) If you want to distribute the music as an official chart / official music for a rhythm game (in short, if you're a developer/offical charter/owner of that game) or if you want to use my song/track as a BGM that is included for a program / a game or its directory</strong>
<br /> Please contact me at one of the following email address(es): <br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br />
</div>
</li>
<li>
<div class="dubdiv">
<strong class="title">3.3.) If you want to repost my song</strong>
<br /> Please contact me at one of the following email address(es): <br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br />
</div>
</li>
<li>
<strong class="title">4.) Other Uses</strong>
<br /> Please contact me at one of the following email address(es): <br />
<a href="mailto:t404.null@gmail.com" class="text-info">t404.null@gmail.com</a>
<br />
<a href="mailto:t404owo@gmail.com" class="text-info">t404owo@gmail.com</a>
<br />
<a href="mailto:tags4owo@gmail.com" class="text-info">tags4owo@gmail.com</a>
<br />
</li>
<div class="long-br"></div> &copy; t404:null 2021-2024 - All Rights Reserved.
</ul>
</main>
<div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
</body>
</html>
</body>
</html>