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:
parent
6b4b3854aa
commit
c8fe6efe40
111
index.html
111
index.html
@ -22,6 +22,8 @@
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: 'Courier';
|
||||
overflow-x: hidden;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@ -35,10 +37,86 @@
|
||||
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>
|
||||
@ -138,6 +234,11 @@
|
||||
</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>
|
||||
© Cringe Studios
|
||||
</footer>
|
||||
|
||||
60
sus.html
60
sus.html
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user