diff --git a/data/battery.jpg b/data/battery.jpg new file mode 100644 index 0000000..018eacc Binary files /dev/null and b/data/battery.jpg differ diff --git a/data/ul.png b/data/ul.png new file mode 100644 index 0000000..6a4063d Binary files /dev/null and b/data/ul.png differ diff --git a/index.html b/index.html index a1a7a19..a6454f3 100644 --- a/index.html +++ b/index.html @@ -101,9 +101,17 @@ +
+

Lithium Ion Battery's

+

Lithium Ion Battery's

+
+
+ + +
- + diff --git a/style.css b/style.css index e797951..a666bce 100644 --- a/style.css +++ b/style.css @@ -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;