This commit is contained in:
tylermurphy534 2022-12-04 13:11:33 -05:00
parent 36bfb65f9d
commit 1544f459f7
22 changed files with 192 additions and 79 deletions

BIN
data/apocalypse.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
data/counting.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

BIN
data/education.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

BIN
data/food.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
data/housing.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
data/munson/1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 MiB

BIN
data/munson/10.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
data/munson/3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
data/munson/4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
data/munson/5.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

BIN
data/munson/6.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 177 KiB

BIN
data/munson/7.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
data/munson/8.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
data/munson/9.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
data/obama.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 399 KiB

BIN
data/onion.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
data/phone.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

BIN
data/recharge.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
data/silence.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

BIN
data/twitter.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>munson</title> <title>munson</title>
@ -16,7 +16,7 @@
<span style="display:inline-block;animation:1s title linear infinite;animation-delay:-0.41s">t</span> <span style="display:inline-block;animation:1s title linear infinite;animation-delay:-0.41s">t</span>
<span style="display:inline-block;animation:1s title linear infinite;animation-delay:-0.21s">f</span> <span style="display:inline-block;animation:1s title linear infinite;animation-delay:-0.21s">f</span>
</p> </p>
<table> <table class="top">
<tr> <tr>
<td style="animation-delay:-0.61s"> <td style="animation-delay:-0.61s">
<a href="http://munsonmakesamillion.com/" target="_blank"> <a href="http://munsonmakesamillion.com/" target="_blank">
@ -25,7 +25,7 @@
</td> </td>
<td style="animation-delay:0s"> <td style="animation-delay:0s">
<a href="https://www.rit.edu/news/umbrella-mistaken-as-weapon-campus" target="_blank"> <a href="https://www.rit.edu/news/umbrella-mistaken-as-weapon-campus" target="_blank">
Get an umbrella? ☂️ Got an umbrella? ☂️
</a> </a>
</td> </td>
<td style="animation-delay:+0.21s"> <td style="animation-delay:+0.21s">
@ -36,64 +36,6 @@
</tr> </tr>
</table> </table>
<marquee behavior="alternate"> <marquee behavior="alternate">
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/roo.webp"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/roo.webp"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/roo.webp"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/roo.webp"/>
<img src="data/awshit.png"/>
<img src="data/counter.png"/>
<img src="data/election.png"/>
<img src="data/girl.png"/>
<img src="data/pepsi.png"/>
<img src="data/rats.png"/>
<img src="data/awshit.png"/> <img src="data/awshit.png"/>
<img src="data/counter.png"/> <img src="data/counter.png"/>
<img src="data/election.png"/> <img src="data/election.png"/>
@ -101,12 +43,67 @@
<img src="data/pepsi.png"/> <img src="data/pepsi.png"/>
<img src="data/rats.png"/> <img src="data/rats.png"/>
<img src="data/roo.webp"/> <img src="data/roo.webp"/>
<img src="data/onion.webp"/>
<img src="data/twitter.webp"/>
<img src="data/silence.webp" />
<img src="data/recharge.webp" />
<img src="data/phone.webp" />
<img src="data/obama.png" />
</marquee> </marquee>
<p class="sprinkler"> <p class="sprinkler">
Call 1-800-1ST-YEAR to get a sprinkler to go off in a room near you! Call 1-800-1ST-YEAR to get a sprinkler to go off in a room near you!
</p> </p>
<p id="middle">
important stuff
</p>
<table class="middle">
<tr>
<td>
<a href="http://rochesterapex.com/" target="_blank">
<img src="data/housing.gif"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.reveddit.com/v/rit/comments/z719e8/theyre_lying_to_us_about_the_females_here_blowing/?utm_source=share&utm_medium=ios_app&utm_name=iossmf" target="_blank">
<img src="data/counting.gif"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.democratandchronicle.com/story/news/2021/08/31/peter-kiwitt-former-rit-professor-sex-trafficking/5589597001/" target="_blank">
<img src="data/education.gif"/>
</a>
</td>
</tr>
<tr>
<td>
<a href="https://www.rit.edu/fa/diningservices/gracies#1" target="_blank">
<img src="data/food.gif"/>
</a>
</td>
</tr>
</table>
<iframe src="https://john.citrons.xyz/embed?ref=rit.wtf" class="john"></iframe>
<p class=munson>
The munson art gallery
</p>
<div id="munson">
<img src="data/munson/1.jpg"/>
<img src="data/munson/3.jpg"/>
<img src="data/munson/4.jpg"/>
<img src="data/munson/5.jpg"/>
<img src="data/munson/6.jpg"/>
<img src="data/munson/7.jpg"/>
<img src="data/munson/8.jpg"/>
<img src="data/munson/9.jpg"/>
<img src="data/munson/10.jpg"/>
</div>
<div class="thicc"></div> <div class="thicc"></div>
<div class="buttons"> <div class="buttons">
<img src="data/apocalypse.gif" style="cursor: pointer;" onclick="document.documentElement.classList.toggle('wank')"/>
<img src="data/amd.gif"/> <img src="data/amd.gif"/>
<img src="data/asexules.gif"/> <img src="data/asexules.gif"/>
<img src="data/dither.gif" style="cursor: pointer;" onclick="document.documentElement.classList.toggle('dither')"/> <img src="data/dither.gif" style="cursor: pointer;" onclick="document.documentElement.classList.toggle('dither')"/>
@ -120,7 +117,7 @@
</a> </a>
</div> </div>
<footer> <footer>
<video autoplay muted> <video autoplay muted loop>
<source src="data/munson.mp4" type="video/mp4"> <source src="data/munson.mp4" type="video/mp4">
</video> </video>
</footer> </footer>

150
style.css
View file

@ -1,29 +1,33 @@
body { html, body, #mainBod {
margin: 0; margin: 0;
padding: 0;
} }
#mainBod { #mainBod {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
overflow: auto;
background-image: url("data/rit.webp"); background-image: url("data/rit.webp");
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
animation: animatedBackground 1s linear infinite alternate; animation: bg 1s linear infinite alternate;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0;
font-family: "Comic Sans", "Comic Sans MS", "Chalkboard", font-family: "Comic Sans", "Comic Sans MS", "Chalkboard",
"ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive, "ChalkboardSE-Regular", "Marker Felt", "Purisa", "URW Chancery L", cursive,
sans-serif; sans-serif;
} }
.wank {
transform: rotateZ(180deg) translateY(-100vh);
}
.thicc { .thicc {
flex: 1; flex: 1;
} }
a { .top {
color: yellow;
}
table {
width: 50%; width: 50%;
background-color: black; background-color: black;
color: white; color: white;
@ -31,21 +35,69 @@ table {
text-align: center; text-align: center;
} }
table td { #middle {
font-size: 30px;
width: fit-content;
margin-left: 12.5%;
background-color: black;
color: orange;
animation: across 2s linear infinite;
}
td a {
color: yellow;
}
td:hover {
background-color: orange;
}
td:hover a {
color: black;
}
.top td {
animation: border 1s linear infinite alternate; animation: border 1s linear infinite alternate;
} }
.middle {
width: 75%;
align-self: center;
text-align: center;
background-color: black;
margin-bottom: 2em;
}
.middle td {
border: 2px solid orange;
}
.middle td:hover {
border: 2px solid black;
background-color: orange;
}
footer { footer {
background-size: cover; background-size: cover;
position: sticky; position: sticky;
bottom: 0; bottom: 0;
height: 10%; height: 10%;
margin: 0;
}
.buttons {
position: sticky;
bottom: 10%;
align-self: center;
margin: 0;
margin-top: 1em;
} }
footer video { footer video {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: fill; object-fit: fill;
margin: 0;
animation: spin 10s linear infinite; animation: spin 10s linear infinite;
} }
@ -110,11 +162,6 @@ marquee img {
0px 0px 38px rgba(255,0,0,.2); 0px 0px 38px rgba(255,0,0,.2);
} }
.buttons {
align-self: center;
margin-bottom: 2em;
}
html.dither>body>div{ html.dither>body>div{
background: url("data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY="); background: url("data:image/webp;base64,UklGRjAAAABXRUJQVlA4TCQAAAAvA8AAAIVS27ahb3uzOUmSJoqqrOq6P47of8DQdcprYdP8/VY=");
filter: contrast(2000); filter: contrast(2000);
@ -137,7 +184,44 @@ filter: initial;
animation: flash 0.3s linear infinite; animation: flash 0.3s linear infinite;
} }
@keyframes animatedBackground { .munson {
text-align: center;
width: 80%;
font-size: 50px;
padding: 0;
margin: 0;
margin-bottom: 1em;
animation: colorflash 1s linear infinite;
margin-left: 10%;
}
#munson {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#munson img {
height: 20em;
width: 100%;
}
#munson img:hover {
animation: scale 0.3s linear;
animation-fill-mode: forwards;
}
.john {
margin-left: auto;
display: block;
margin-right: auto;
max-width: 732px;
width: 100%;
height: 94px;
border: none;
margin-bottom: 2em;
}
@keyframes bg {
from { from {
background-position: 0 0; background-position: 0 0;
} }
@ -147,10 +231,10 @@ filter: initial;
} }
@keyframes spin { @keyframes spin {
from { 0%, 100% {
transform: rotateY(0deg) rotateX(0deg); transform: rotateY(0deg) rotateX(0deg);
} }
to { 50% {
transform: rotateY(3000deg) rotateX(3000deg); transform: rotateY(3000deg) rotateX(3000deg);
} }
} }
@ -173,6 +257,19 @@ filter: initial;
} }
} }
@keyframes colorflash {
0%, 100%, 49% {
border: 5px solid orange;
background-color: black;
color: orange;
}
50%, 99% {
border: 5px solid black;
background-color: orange;
color: black;
}
}
@keyframes border { @keyframes border {
0%, 0%,
100% { 100% {
@ -185,3 +282,22 @@ filter: initial;
border: 2px solid rgb(0, 0, 255); border: 2px solid rgb(0, 0, 255);
} }
} }
@keyframes across {
0%,
100% {
transform: translateX(0vw);
}
50% {
transform: translateX(62.5vw);
}
}
@keyframes scale {
from {
transform: scale3d(100%, 100%, 100%);
}
to {
transform: scale3d(120%, 120%, 120%);
}
}