Rick roll

Co-authored-by: Julian; <JDobeshow@users.noreply.github.com>
Co-authored-by: Akito123321 <Akito123321@users.noreply.github.com>
This commit is contained in:
MrLetsplay 2022-04-05 15:34:07 +02:00
parent 6b4b3854aa
commit c8fe6efe40
2 changed files with 139 additions and 36 deletions

View File

@ -22,6 +22,8 @@
body { body {
text-align: center; text-align: center;
font-family: 'Courier'; font-family: 'Courier';
overflow-x: hidden;
padding-top: 10px;
} }
footer { footer {
@ -34,11 +36,87 @@
padding: 10px; padding: 10px;
margin:-2px 0 0 -2px; margin:-2px 0 0 -2px;
} }
.impostor-image {
animation: amogus 1000s infinite linear;
}
.article { .article {
text-align:left; text-align:left;
} }
.leftRight {
animation: left2Right 20s infinite linear;
}
.rightLeft {
animation: right2Left 20s infinite linear;
}
.video {
animation: rickRoll 10s infinite linear;
}
@keyframes rickRoll {
0% {
transform: translateX(0vw);
scale: 1;
}
25% {
transform: translateX(50vw);
scale: -1;
}
50% {
transform: translateX(100vw);
scale: 1;
}
75% {
transform: translateX(50vw);
scale: -1;
}
100% {
transform: translateX(0vw);
scale: 1;
}
}
@keyframes left2Right {
0% {
transform: translateX(-50vw);
}
25% {
transform: translateX(0vw);
}
50% {
transform: translateX(50vw);
}
75% {
transform: translateX(100vw);
}
100% {
transform: translateX(150vw);
}
}
@keyframes right2Left {
0% {
transform: translateX(150vw);
}
25% {
transform: translateX(100vw);
}
50% {
transform: translateX(50vw);
}
75% {
transform: translateX(0vw);
}
100% {
transform: translateX(-50vw);
}
}
/* Bootstrap: small */ /* Bootstrap: small */
@media only screen and (max-width: 576px) { @media only screen and (max-width: 576px) {
.gurke { .gurke {
@ -52,6 +130,24 @@
margin:0 -2px -2px 0; margin:0 -2px -2px 0;
} }
} }
@keyframes amogus {
0% {
transform: rotateZ(0deg);
}
25% {
transform: rotateZ(90deg);
}
50% {
transform: rotateZ(180deg);
}
75% {
transform: rotateZ(270deg);
}
100% {
transform: rotateZ(360deg);
}
}
</style> </style>
</head> </head>
@ -62,7 +158,7 @@
<div class="col-md-4 gurke" style="background-color: rgb(239, 228, 176);"> <div class="col-md-4 gurke" style="background-color: rgb(239, 228, 176);">
<h1>Cringe CEO</h1> <h1>Cringe CEO</h1>
<a href="https://nsfw.cringe-studios.com/Ecchi.png" > <a href="https://nsfw.cringe-studios.com/Ecchi.png" >
<img src="https://nsfw.cringe-studios.com/arrayser.webp" alt="Picture of the Cringe CEO" width="50%" style="border-radius: 50%;" /> <img class="impostor-image" src="https://nsfw.cringe-studios.com/arrayser.webp" alt="Picture of the Cringe CEO" width="50%" style="border-radius: 50%;" />
</a><br /> </a><br />
<br /> <br />
<div class="article"> <div class="article">
@ -82,7 +178,7 @@
</div> </div>
<div class="col-md-4 gurke" style="background-color: rgb(152, 255, 152);"> <div class="col-md-4 gurke" style="background-color: rgb(152, 255, 152);">
<h1>Kölian</h1> <h1>Kölian</h1>
<img src="https://nsfw.cringe-studios.com/mrletsplay.webp" alt="JulianA" width="50%" style="border-radius: 50%;" /><br /> <img class="impostor-image" src="https://nsfw.cringe-studios.com/mrletsplay.webp" alt="JulianA" width="50%" style="border-radius: 50%;" /><br />
<br /> <br />
<div class="article"> <div class="article">
<p>Alias: <b><code>MrLetsplay</code></b></p> <p>Alias: <b><code>MrLetsplay</code></b></p>
@ -92,7 +188,7 @@
</div> </div>
<div class="col-md-4 gurke" style="background-color:rgb(236, 173, 173)"> <div class="col-md-4 gurke" style="background-color:rgb(236, 173, 173)">
<h1>Bolbert</h1> <h1>Bolbert</h1>
<img src="https://nsfw.cringe-studios.com/blobert.webp" alt="JulianB" width="50%" style="border-radius: 50%;" /><br /> <img class="impostor-image" src="https://nsfw.cringe-studios.com/blobert.webp" alt="JulianB" width="50%" style="border-radius: 50%;" /><br />
<br /> <br />
<div class="article"> <div class="article">
<p>Alias: <b><code>Blobert</code></b></p> <p>Alias: <b><code>Blobert</code></b></p>
@ -106,7 +202,7 @@
<br/> <br/>
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12 leftRight">
<div class="article"> <div class="article">
<h1>Projects</h1> <h1>Projects</h1>
<b>Cringe Studios Github: <a href="https://github.com/CringeStudios" target="_blank">Cringe Studios;</a></b> <b>Cringe Studios Github: <a href="https://github.com/CringeStudios" target="_blank">Cringe Studios;</a></b>
@ -124,7 +220,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12 rightLeft">
<div class="article"> <div class="article">
<h1>Honorable Mentions</h1> <h1>Honorable Mentions</h1>
<ul> <ul>
@ -136,7 +232,12 @@
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="container">
<div class="row video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div> </div>
<footer> <footer>
&copy; Cringe Studios &copy; Cringe Studios

View File

@ -1,49 +1,51 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta 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">
<meta name="description" content="Experience the SUS!"> <meta name="description" content="Experience the SUS!">
<meta property="og:image" content="https://nsfw.cringe-studios.com/sus.png"> <meta property="og:image" content="https://nsfw.cringe-studios.com/sus.png">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:url" content="https://cringe-studios.com/"> <meta property="og:url" content="https://cringe-studios.com/">
<meta property="og:title" content="¢яιηgє $тυ∂ισѕ Infinite SUS"> <meta property="og:title" content="¢яιηgє $тυ∂ισѕ Infinite SUS">
<meta property="og:description" content="Experience the SUS!"> <meta property="og:description" content="Experience the SUS!">
<title>Infinite SUS</title> <title>Infinite SUS</title>
<style> <style>
.container{ .container{
display: flex; max-width: 100vw;
flex-wrap: wrap; display: flex;
} flex-wrap: wrap;
line-break: anywhere;
}
</style> </style>
</head> </head>
<body style="font-family: 'Courier';"> <body style="font-family: 'Courier';">
<div class="container"> <div class="container">
</div> </div>
<button type="button" onClick="loadText();">More Sus!</button> <button type="button" onClick="loadText();">More Sus!</button>
<script> <script>
const container = document.querySelector('.container'); const container = document.querySelector('.container');
function loadText(numElements = 10000){ function loadText(numElements = 10000){
let i=0; let i=0;
while(i < numElements){ let str = "";
const img = document.createElement('div'); while(i < numElements){
img.innerText = `SUS` str += "SUS";
container.appendChild(img) i++;
i++; }
} container.innerText += str;
} }
loadText(); loadText();
window.addEventListener('scroll',()=>{ window.addEventListener('scroll',()=>{
if(window.scrollY + window.innerHeight >= document.documentElement.scrollHeight){ if(window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1000){
loadText(); loadText();
} }
}) })
</script> </script>
</body> </body>
</html> </html>