freya/rit.wtf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

batterys

Browse source
This commit is contained in:
tylermurphy534 2022-12-05 16:37:03 -05:00
parent da971b4a0f
commit 0d8150e756
4 changed files with 69 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
data/battery.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
data/ul.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 18 KiB

10
index.html
View file

@ -101,9 +101,17 @@
<img src="data/munson/9.jpg"/>
<img src="data/munson/10.jpg"/>
</div>
<div id="batterys">
<p style="--rot: 0deg;">Lithium Ion Battery's</p>
<p style="--rot: 270deg;">Lithium Ion Battery's</p>
</div>
<div id="batterys" style="margin-bottom: 30vw;">
<img style="--rot: 0deg;" src="data/battery.jpg"/>
<img style="--rot: 270deg;" src="data/battery.jpg"/>
</div>
<div class="thicc"></div>
<div class="buttons">
<img src="data/apocalypse.gif" class="clickable" image.png onclick="document.documentElement.classList.toggle('wank')"/>
<img src="data/apocalypse.gif" class="clickable" onclick="document.documentElement.classList.toggle('wank')"/>
<img src="data/amd.gif"/>
<img src="data/asexules.gif"/>
<img src="data/dither.gif" class="clickable" onclick="document.documentElement.classList.toggle('dither')"/>

67
style.css
View file

@ -10,7 +10,7 @@ html, body, #mainBod {
overflow: auto;
background-image: url("data/rit.webp");
width: 100vw;
min-height: 100%;
min-height: 100vh;
height: 100vh;
animation: bg 1s linear infinite alternate;
display: flex;
@ -21,7 +21,7 @@ html, body, #mainBod {
}
.wank {
transform: rotateZ(180deg) translateY(-100vh);
transform: rotateZ(180deg);
}
.thicc {
@ -37,7 +37,7 @@ html, body, #mainBod {
}
#middle {
font-size: 2em;
font-size: 2vw;
width: fit-content;
background-color: black;
color: orange;
@ -78,11 +78,16 @@ td:hover a {
}
.middle td {
border: 2px solid orange;
border: .25vw solid orange;
height: 5vw;
}
.middle img {
height: 5vw;
}
.middle td:hover {
border: 2px solid black;
border: .25vw solid black;
background-color: orange;
}
@ -104,6 +109,10 @@ footer {
margin-top: 1em;
}
.buttons img {
height: 2em;
}
footer video {
width: 100%;
height: 100%;
@ -115,11 +124,11 @@ footer video {
marquee {
margin-top: 2em;
display: block;
height: 12em;
height: 12vw;
}
marquee img {
height: 12em;
height: 12vw;
}
.title {
@ -232,6 +241,50 @@ html.dither>body>div>div{
margin-bottom: 2em;
}
#batterys {
perspective: 5000000em;
position: relative;
height: 2em;
width: 100%;
overflow-x: visible;
margin-bottom: 13vw;
}
#batterys p {
text-align: center;
font-size: 4vw;
color: #fff;
width: 50.1vw;
background-color: #232323;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
display: inline-block;
position: absolute;
left: 50%;
animation: spincube 2.5s linear infinite;
}
#batterys img {
display: inline-block;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
display: inline-block;
position: absolute;
left: 50%;
width: 48.1vw;
border: black 1vw solid;
animation: spincube 2.5s linear infinite;
}
@keyframes spincube {
from {
transform: translateX(-50%) rotateY(var(--rot)) translateZ(25vw);
}
to {
transform: translateX(-50%) rotateY(calc(var(--rot) + 90deg)) translateZ(25vw);
}
}
@keyframes bg {
from {
background-position: 0 0;