diff --git a/assets/css/main.css b/assets/css/main.css
index cbac8ce..dc5c7b3 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -7,21 +7,28 @@ body {
margin: 0px;
height: 100%;
}
-main {
+
+main, textarea, textfield {
font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
+}
+
+main {
margin: 0.75rem;
height: 100%;
margin-bottom: 0;
margin-top: 0;
min-height: calc(100vh - 10vh);
}
+
.main-page {
max-width: 2300px;
margin: 0 auto;
}
+
hr {
margin: 2rem 0px;
}
+
nav {
z-index: 4;
position: -webkit-sticky;
@@ -39,21 +46,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 +72,7 @@ nav {
padding-right: 0.3rem;
}
}
+
a {
color: black;
text-decoration: none;
@@ -72,19 +84,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 +136,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 +145,7 @@ nav {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
+
p:hover,
.currentpage {
opacity: 60%;
@@ -147,6 +165,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 +173,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 +189,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 +215,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 +242,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 +274,7 @@ nav {
overflow: auto;
max-height: 70vh;
}
+
/*---- main ----*/
.container {
position: relative;
@@ -250,6 +283,7 @@ nav {
margin: auto;
margin-top: 1rem;
}
+
.carousel {
z-index: 1;
width: 100%;
@@ -259,6 +293,7 @@ nav {
position: relative;
overflow: hidden;
}
+
.slider-bg {
height: 100%;
width: 100%;
@@ -279,6 +314,7 @@ nav {
border-radius: 0.5rem;
transform: scale(1.1);
}
+
.slider section {
overflow: hidden;
z-index: 1;
@@ -293,6 +329,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 +340,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 +389,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 +425,7 @@ nav {
-ms-user-select: none;
user-select: none;
}
+
.control {
text-align: center;
}
@@ -393,6 +440,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 +448,7 @@ nav {
height: 23rem;
border-radius: 7px;
text-decoration: none;
+
div {
z-index: 1;
position: inherit;
@@ -409,12 +458,15 @@ nav {
border-radius: 7px;
transition: 0.5s;
}
+
h2 {
font-size: 1.9rem;
}
+
p {
font-size: 1.2rem;
}
+
h2,
p {
color: white;
@@ -424,6 +476,7 @@ nav {
opacity: 0;
transition: 0.5s;
}
+
.bg-img {
/* background: url(/assets/img/t404_null-logo.png); */
background-size: cover;
@@ -432,11 +485,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 +508,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 +516,7 @@ nav {
height: 30rem;
border-radius: 7px;
text-decoration: none;
+
div {
z-index: 1;
position: inherit;
@@ -469,12 +526,15 @@ nav {
border-radius: 7px;
transition: 0.5s;
}
+
h2 {
font-size: 1.9rem;
}
+
p {
font-size: 1.1rem;
}
+
h2,
p {
/* color: black; */
@@ -484,6 +544,7 @@ nav {
opacity: 0;
transition: 0.5s;
}
+
.bg-img {
/* background: url(/assets/img/t404_null-logo.png); */
background-size: cover;
@@ -493,6 +554,7 @@ nav {
width: 30rem;
}
}
+
.card:hover {
.bg-img {
filter: brightness(40%);
@@ -500,6 +562,7 @@ nav {
width: 8vw;
border-radius: 7px 0px 0px 7px;
}
+
h2,
p {
padding: 0.3rem 5vw 0.3rem 10vw;
@@ -515,6 +578,7 @@ nav {
grid-gap: 1rem;
justify-content: center;
padding: 0;
+
li {
border-radius: 7px;
background-color: #ddd;
@@ -526,6 +590,7 @@ nav {
font-size: 3rem;
margin-top: 3vw;
margin-bottom: 7vw;
+
a {
text-decoration: none;
color: black;
@@ -536,6 +601,7 @@ nav {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
+
a:hover {
opacity: 70%;
background-size: 100% 0.2em;
@@ -547,10 +613,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 +632,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 +646,7 @@ nav {
padding: 2rem;
border-radius: 7px;
font-size: 1.2rem;
+
a {
text-decoration: none;
color: #fff;
@@ -586,6 +657,7 @@ nav {
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
+
a:hover {
color: #ccc;
background-size: 100% 0.2em;
@@ -598,9 +670,11 @@ nav {
text-decoration: none;
list-style-type: none;
font-size: 1.4rem;
+
li {
padding: 1rem;
}
+
a {
text-decoration: none;
color: #46f;
@@ -611,22 +685,104 @@ 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) {
+
+
+.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;
+ }
+
+ :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;
+ }
+}
+
+textarea, textfield {
+ padding: 5px;
+ font-size: 0.95rem;
+}
+
+
+@media screen and (width >=1180px) and (width<=1690px) {
/*if(width<1620px&&width>=1125px)*/
nav {
@@ -635,6 +791,7 @@ nav {
position: relative;
width: 17.5rem;
padding: 0rem 0rem;
+
a {
transition: 0.2s;
display: flex;
@@ -642,33 +799,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 +844,13 @@ nav {
nav {
font-size: 1.4rem;
+
ul {
img {
height: 2.5rem;
}
}
+
.social {
font-size: 2rem;
}
@@ -693,19 +859,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 +884,7 @@ nav {
border-radius: 7px;
margin: 0.3rem 0;
}
+
.dropdown-menu p:hover {
background-color: #ddd;
}
@@ -720,31 +892,37 @@ 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;
}
}
-}
+}
\ No newline at end of file
diff --git a/contacts/index.html b/contacts/index.html
index 352e368..e8e1b10 100644
--- a/contacts/index.html
+++ b/contacts/index.html
@@ -200,6 +200,12 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
Email
+ info@t404null.com
+
+ request@t404null.com
+
+ t404.null@t404null.com
+
Or:
t404.null@gmail.com
t404owo@gmail.com
@@ -221,6 +227,9 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
+
+ (Or) Contact me here
+