CringeStudios/cringe-studios.com
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rick roll

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
index.html
View File

@ -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

62
sus.html
View File

@ -1,49 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Experience the SUS!">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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{
display: flex;
flex-wrap: wrap;
}
.container{
max-width: 100vw;
display: flex;
flex-wrap: wrap;
line-break: anywhere;
}
</style>
</head>
<body style="font-family: 'Courier';">
<div class="container">
<div class="container">
</div>
<button type="button" onClick="loadText();">More Sus!</button>
</div>
<button type="button" onClick="loadText();">More Sus!</button>
<script>
const container = document.querySelector('.container');
<script>
const container = document.querySelector('.container');
function loadText(numElements = 10000){
let i=0;
while(i < numElements){
const img = document.createElement('div');
img.innerText = `SUS`
container.appendChild(img)
i++;
}
}
function loadText(numElements = 10000){
let i=0;
let str = "";
while(i < numElements){
str += "SUS";
i++;
}
container.innerText += str;
}
loadText();
loadText();
window.addEventListener('scroll',()=>{
if(window.scrollY + window.innerHeight >= document.documentElement.scrollHeight){
loadText();
}
})
</script>
window.addEventListener('scroll',()=>{
if(window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1000){
loadText();
}
})
</script>
</body>
</html>