Rick roll

Co-authored-by: Julian; <JDobeshow@users.noreply.github.com>
Co-authored-by: Akito123321 <Akito123321@users.noreply.github.com>

index.html

@@ -22,6 +22,8 @@
 		body {
 			text-align: center;
 			font-family: 'Courier';
+			overflow-x: hidden;
+			padding-top: 10px;
 		}
 
 		footer {
@@ -34,11 +36,87 @@
 			padding: 10px;
 			margin:-2px 0 0 -2px;
 		}
+
+		.impostor-image {
+			animation: amogus 1000s infinite linear;
+		}
 		
 		.article {
 			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 */
 		@media only screen and (max-width: 576px) {
 			.gurke {
@@ -52,6 +130,24 @@
 				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>
 	</head>
 
@@ -62,7 +158,7 @@
 			<div class="col-md-4 gurke" style="background-color: rgb(239, 228, 176);">
 				<h1>Cringe CEO</h1>
 				<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 />
 				<br />
 				<div class="article">
@@ -82,7 +178,7 @@
 			</div>
 			<div class="col-md-4 gurke" style="background-color: rgb(152, 255, 152);">
 				<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 />
 				<div class="article">
 					<p>Alias: <b><code>MrLetsplay</code></b></p>
@@ -92,7 +188,7 @@
 			</div>
 			<div class="col-md-4 gurke" style="background-color:rgb(236, 173, 173)">
 				<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 />
 				<div class="article">
 					<p>Alias: <b><code>Blobert</code></b></p>
@@ -106,7 +202,7 @@
 	<br/>
 	<div class="container">
 		<div class="row">
-			<div class="col-sm-12">
+			<div class="col-sm-12 leftRight">
 				<div class="article">
 					<h1>Projects</h1>
 					<b>Cringe Studios Github: <a href="https://github.com/CringeStudios" target="_blank">Cringe Studios;</a></b>
@@ -124,7 +220,7 @@
 			</div>
 		</div>
 		<div class="row">
-			<div class="col-sm-12">
+			<div class="col-sm-12 rightLeft">
 				<div class="article">
 					<h1>Honorable Mentions</h1>
 					<ul>
@@ -136,7 +232,12 @@
 					</ul>
 				</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>
 	<footer>
 		&copy; Cringe Studios

sus.html

@@ -1,49 +1,51 @@
 <!DOCTYPE html>
 <html lang="en">
 <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:type" content="website">
 	<meta property="og:url" content="https://cringe-studios.com/">
 	<meta property="og:title" content="¢яιηgє $тυ∂ισѕ Infinite SUS">
 	<meta property="og:description" content="Experience the SUS!">
-    <title>Infinite SUS</title>
+	<title>Infinite SUS</title>
 	<style>
-        .container{
+		.container{
-            display: flex;
+			max-width: 100vw;
-            flex-wrap: wrap;
+			display: flex;
-        }
+			flex-wrap: wrap;
+			line-break: anywhere;
+		}
 	</style>
 </head>
 <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>
 </html>