added some javascript for theme changing
need to test on other machine
This commit is contained in:
Simon O'Shea
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 769 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 330 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 630 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 935 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 347 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 853 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
@@ -0,0 +1,611 @@
|
||||
/**
|
||||
normal chrome dark theme color
|
||||
@media(prefers-color-scheme:dark){body{background-color:rgb(50,54,57);}}
|
||||
|
||||
#ball-left
|
||||
{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
top: 2.5rem;
|
||||
left: 20%;
|
||||
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
animation-name: left-ball;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#ball-right
|
||||
{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
bottom: 2.5rem;
|
||||
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
animation-name: right-ball;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes left-ball
|
||||
{
|
||||
0%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #fcd2d1;
|
||||
}
|
||||
20%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-ball
|
||||
{
|
||||
0%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #fcd2d1;
|
||||
}
|
||||
20%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: white;
|
||||
}
|
||||
}**/
|
||||
|
||||
@media(prefers-color-scheme:dark){body{background-color:rgb(23,38,38);}}
|
||||
|
||||
@keyframes border-color
|
||||
{
|
||||
0%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: white;
|
||||
border-left-color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #fcd2d1;
|
||||
border-left-color: #fcd2d1;
|
||||
}
|
||||
20%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #fcfad1;
|
||||
border-left-color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #d4fcd1;
|
||||
border-left-color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #d1f6fc;
|
||||
border-left-color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #dfd1fc;
|
||||
border-left-color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #d1eefc;
|
||||
border-left-color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #eed1fc ;
|
||||
border-left-color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #f1d1fc;
|
||||
border-left-color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #fcdcd1;
|
||||
border-left-color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: white;
|
||||
border-left-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes color
|
||||
{
|
||||
0%
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
color: #fcd2d1; /*light pink*/
|
||||
}
|
||||
20%
|
||||
{
|
||||
color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hover
|
||||
{
|
||||
0%
|
||||
{
|
||||
color: #f45a5a;
|
||||
font-size: 1rem;
|
||||
}
|
||||
25%
|
||||
{
|
||||
color: #84E0D5;
|
||||
}
|
||||
50%
|
||||
{
|
||||
color: #f4a75a;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
75%
|
||||
{
|
||||
color: #b0e084;
|
||||
}
|
||||
100%
|
||||
{
|
||||
color: #FCB283;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-arrow
|
||||
{
|
||||
0%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
10%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
20%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
30%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
40%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
50%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
60%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
70%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
80%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
90%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
100%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-arrow
|
||||
{
|
||||
0%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
10%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
20%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
30%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
40%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
50%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
60%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
70%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
80%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
90%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
100%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
html, body
|
||||
{
|
||||
line-height: 15pt;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
body
|
||||
{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
background-image: url("bg.png");
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
h1
|
||||
{
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
|
||||
|
||||
animation-name: color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
a, section
|
||||
{
|
||||
display: inline-block;
|
||||
height: 1rem;
|
||||
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: .8rem;
|
||||
|
||||
scrollbar-width: none;
|
||||
|
||||
animation-name: color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
animation-name: hover;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
hr
|
||||
{
|
||||
color: white;
|
||||
border: .5px solid;
|
||||
border-radius: 25px;
|
||||
|
||||
animation-name: color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
audio
|
||||
{
|
||||
display: inline;
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
#line-top
|
||||
{
|
||||
margin-top: 1rem;
|
||||
margin-bottom: -.2rem;
|
||||
}
|
||||
|
||||
#line-bottom
|
||||
{
|
||||
margin-top: -.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#right-arrow
|
||||
{
|
||||
display: inline-block;
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
animation: right-arrow 10s infinite, color 20s infinite;
|
||||
}
|
||||
|
||||
#left-arrow
|
||||
{
|
||||
display: inline-block;
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
|
||||
position: relative;
|
||||
margin-top:0;
|
||||
margin-bottom: 0;
|
||||
|
||||
animation: left-arrow 10s infinite, color 20s infinite;
|
||||
}
|
||||
|
||||
#black-box
|
||||
{
|
||||
width: 20rem;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
|
||||
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
padding-top: 0%;
|
||||
margin-left: 10rem;
|
||||
text-align: center;
|
||||
|
||||
overflow: scroll;
|
||||
scrollbar-width: none;
|
||||
|
||||
animation-name: border-color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,611 @@
|
||||
/**
|
||||
normal chrome dark theme color
|
||||
@media(prefers-color-scheme:dark){body{background-color:rgb(50,54,57);}}
|
||||
|
||||
#ball-left
|
||||
{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
top: 2.5rem;
|
||||
left: 20%;
|
||||
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
animation-name: left-ball;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
#ball-right
|
||||
{
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
bottom: 2.5rem;
|
||||
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
|
||||
animation-name: right-ball;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes left-ball
|
||||
{
|
||||
0%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #fcd2d1;
|
||||
}
|
||||
20%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
left: 30%;
|
||||
background-color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
left: 25%;
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-ball
|
||||
{
|
||||
0%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #fcd2d1;
|
||||
}
|
||||
20%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
left: 67.25%;;
|
||||
background-color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
left: 72.25%;;
|
||||
background-color: white;
|
||||
}
|
||||
}**/
|
||||
|
||||
@media(prefers-color-scheme:dark){body{background-color:rgb(23,38,38);}}
|
||||
|
||||
@keyframes border-color
|
||||
{
|
||||
0%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: white;
|
||||
border-left-color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #fcd2d1;
|
||||
border-left-color: #fcd2d1;
|
||||
}
|
||||
20%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #fcfad1;
|
||||
border-left-color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #d4fcd1;
|
||||
border-left-color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #d1f6fc;
|
||||
border-left-color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #dfd1fc;
|
||||
border-left-color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #d1eefc;
|
||||
border-left-color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #eed1fc ;
|
||||
border-left-color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #f1d1fc;
|
||||
border-left-color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: #fcdcd1;
|
||||
border-left-color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
border-right-style: solid;
|
||||
border-left-style: solid;
|
||||
|
||||
border-right-color: white;
|
||||
border-left-color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes color
|
||||
{
|
||||
0%
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
10%
|
||||
{
|
||||
color: #fcd2d1; /*light pink*/
|
||||
}
|
||||
20%
|
||||
{
|
||||
color: #fcfad1;
|
||||
}
|
||||
30%
|
||||
{
|
||||
color: #d4fcd1;
|
||||
}
|
||||
40%
|
||||
{
|
||||
color: #d1f6fc;
|
||||
}
|
||||
50%
|
||||
{
|
||||
color: #dfd1fc;
|
||||
}
|
||||
60%
|
||||
{
|
||||
color: #d1eefc;
|
||||
}
|
||||
70%
|
||||
{
|
||||
color: #eed1fc;
|
||||
}
|
||||
80%
|
||||
{
|
||||
color: #f1d1fc;
|
||||
}
|
||||
90%
|
||||
{
|
||||
color: #fcdcd1;
|
||||
}
|
||||
100%
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hover
|
||||
{
|
||||
0%
|
||||
{
|
||||
color: #f45a5a;
|
||||
font-size: 1rem;
|
||||
}
|
||||
25%
|
||||
{
|
||||
color: #84E0D5;
|
||||
}
|
||||
50%
|
||||
{
|
||||
color: #f4a75a;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
75%
|
||||
{
|
||||
color: #b0e084;
|
||||
}
|
||||
100%
|
||||
{
|
||||
color: #FCB283;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes right-arrow
|
||||
{
|
||||
0%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
10%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
20%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
30%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
40%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
50%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
60%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
70%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
80%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
90%
|
||||
{
|
||||
transform: translateX(15%);
|
||||
}
|
||||
100%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes left-arrow
|
||||
{
|
||||
0%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
10%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
20%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
30%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
40%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
50%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
60%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
70%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
80%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
90%
|
||||
{
|
||||
transform: translateX(-15%);
|
||||
}
|
||||
100%
|
||||
{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
html, body
|
||||
{
|
||||
line-height: 15pt;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
body
|
||||
{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
background-image: url("bg.png");
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
h1
|
||||
{
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
|
||||
|
||||
animation-name: color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
|
||||
a, section
|
||||
{
|
||||
display: inline-block;
|
||||
height: rem;
|
||||
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
font-size: .8rem;
|
||||
|
||||
scrollbar-width: none;
|
||||
|
||||
animation-name: color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
a:hover
|
||||
{
|
||||
animation-name: hover;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
hr
|
||||
{
|
||||
color: white;
|
||||
border: .5px solid;
|
||||
border-radius: 25px;
|
||||
|
||||
animation-name: color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
audio
|
||||
{
|
||||
display: inline;
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
bottom: 0%;
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
#line-top
|
||||
{
|
||||
margin-top: 1rem;
|
||||
margin-bottom: -.2rem;
|
||||
}
|
||||
|
||||
#line-bottom
|
||||
{
|
||||
margin-top: -.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#right-arrow
|
||||
{
|
||||
display: inline-block;
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
animation: right-arrow 10s infinite, color 20s infinite;
|
||||
}
|
||||
|
||||
#left-arrow
|
||||
{
|
||||
display: inline-block;
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
|
||||
position: relative;
|
||||
margin-top:0;
|
||||
margin-bottom: 0;
|
||||
|
||||
animation: left-arrow 10s infinite, color 20s infinite;
|
||||
}
|
||||
|
||||
#black-box
|
||||
{
|
||||
width: 20rem;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
|
||||
|
||||
border-right-width: 4px;
|
||||
border-left-width: 4px;
|
||||
|
||||
padding-top: 0%;
|
||||
margin-left: 10rem;
|
||||
text-align: center;
|
||||
|
||||
overflow: scroll;
|
||||
scrollbar-width: none;
|
||||
|
||||
animation-name: border-color;
|
||||
animation-duration: 20s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="homepage-css.css">
|
||||
<meta Content-Type: text/html/javascript; charset=utf-8/>
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<title>~ welcome home</title>
|
||||
|
||||
<body>
|
||||
|
||||
<div id = "black-box">
|
||||
|
||||
<br>
|
||||
|
||||
<hr id = "top" style = "width: 13rem;">
|
||||
|
||||
<h1> <b> <h2 id = "left-arrow"><-</h2> example title <h2 id = "right-arrow">-></h2> </b> </h1>
|
||||
|
||||
<hr id = "bottom" style = "width: 13rem;">
|
||||
|
||||
<section id = "entertainment">
|
||||
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<hr id = "top" style = "width: 7.5rem;">
|
||||
|
||||
<h1> <b> <h2 id = "left-arrow"><-</h2> example title <h2 id = "right-arrow">-></h2> </b> </h1>
|
||||
|
||||
<hr id = "bottom" style = "width: 7.5rem;">
|
||||
|
||||
<section id = "work">
|
||||
|
||||
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<hr id = "top" style = "width: 3.5rem;">
|
||||
|
||||
<h1> <b> <h2 id = "left-arrow"><-</h2> example title <h2 id = "right-arrow">-></h2> </b> </h1>
|
||||
|
||||
<hr id = "bottom" style = "width: 3.5rem;">
|
||||
|
||||
<section id = "forums">
|
||||
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
<a href = "https://trali.blue/projects/homepage.html">example link</a>
|
||||
<br>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<audio controls loop>
|
||||
<source src = "koan sound + asa - fuego (sakuraburst remix).mp3" />
|
||||
</audio>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<script src="script.js">
|
||||
</script>
|
||||
|
||||
</hmtl>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="bar">
|
||||
<a href="../../index.html" class="nav">HOME</a>
|
||||
-
|
||||
<a href="../../projects.html" class="nav">back</a>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
|
||||
<br><br><br><br><h1>~ the boards i've made in their various states ~</h1><br>
|
||||
<p>
|
||||
<img src="bin/fb photos/firstboard.jpg" width="30%" />-
|
||||
<img src="bin/fb photos/firstboard2.png" width="30%" /><br>the first board i have ever made!<br>check out those counter-sunk holes...<br><br><br>
|
||||
<img src="bin/fb photos/firstboard3.jpg" width="30%" /><br>my first board in its<br>Completed Stage<br><br><br>
|
||||
<img src="bin/fb photos/gunny1back.jpg" width="30%" /><br>second deck ever, made for a friend.<br>not the best quality :(<br><br><br>
|
||||
|
||||
<img src="bin/fb photos/opus.jpg" width="20%" />
|
||||
<img src="bin/fb photos/opus2.jpg" width="20%" /><br>
|
||||
<img src="bin/fb photos/opus3.jpg" width="40%" /><br>my magnum opus, a gift for my friend to make up for the last one breaking.<br>incredibly sturdy and a very nice shape. side profile is so sexy too. best one i've produced!<br><br><br>
|
||||
|
||||
<img src="bin/fb photos/dunc.png" width="30%" />
|
||||
<img src="bin/fb photos/harrison&ant.png" width="30%" /><br>
|
||||
<img src="bin/fb photos/jacob1.jpg" width="30%" />
|
||||
<img src="bin/fb photos/jacob2.jpg" width="30%" /><br>more rough-stage decks i made as <br>christmas 2022 gifts for the homies<br><br><br><br>
|
||||
</p>
|
||||
|
||||
|
||||
<br><br><br><h1>~ obstacles i've made ~</h1><br>
|
||||
<p>
|
||||
<img src="bin/fb photos/pad w rail.jpg" width="40%" /><br>manny pad + rail<br><br><br>
|
||||
|
||||
<img src="bin/fb photos/ledge.png" width="30.25%" />
|
||||
<img src="bin/fb photos/grassbox.jpg" width="40%" /><br>crazy cool ledge i found at goodwill, it's very ornate.<br> i laid fake grass along the bottom to make it feel <br>like an authentic gap spot, and it came out great!<br><br><br><br><br>
|
||||
|
||||
<img src="bin/fb photos/quarterpipe-side.jpg" width="26.45%" />
|
||||
<img src="bin/fb photos/quarterpipe-back.jpg" width="40%" /><br>
|
||||
quarterpipe<br>(art by my roommate)<br><br><br><br><br>
|
||||
<img src="bin/fb photos/brick.jpg" width="40%" /><br>brick.<br>rubbed and laquered. primitive, but effective!<br><br><br><br><br>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user