stuff
This commit is contained in:
parent
4cb7833eb4
commit
a4bc49d460
3 changed files with 311 additions and 0 deletions
|
|
@ -4,6 +4,8 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>NOT Empty webpage of a CHUNBOAN user</title>
|
<title>NOT Empty webpage of a CHUNBOAN user</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>THE WAIFU ZONE</h1>
|
<h1>THE WAIFU ZONE</h1>
|
||||||
<p>This webzone is NOT empty.</p>
|
<p>This webzone is NOT empty.</p>
|
||||||
|
|
|
||||||
22
uglypage.html
Normal file
22
uglypage.html
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
|
<title>NOT Empty webpage of a CHUNBOAN user</title>
|
||||||
|
<link rel="stylesheet" href="uglystyle.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>THE WAIFU ZONE</h1>
|
||||||
|
<p>This webzone is NOT empty.</p>
|
||||||
|
<img src="./dance.gif">
|
||||||
|
<p>I added something!</p>
|
||||||
|
<p>Post number 1:<br>
|
||||||
|
Don't you ever think about how fast we tend to make things go through?
|
||||||
|
As in, I even find myself getting to the point of: "oh yeah, of course, I'm going to write this post in 5 seconds while I'm doing something else."
|
||||||
|
There's supposedly no time to do anything, yet, we seemingly spend all the time in the world doing nothing.</p>
|
||||||
|
|
||||||
|
<p>Post 2: After last post I was kind of uneasy, I felt like i wanted to write more. As I write in the terminal i can feel more connection with what I write. It's clunky,yet it feels calm and more real than ever. Perhaps this is what I needed </p>
|
||||||
|
<p><a href="/">Go back to the ZONE.</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
287
uglystyle.css
Normal file
287
uglystyle.css
Normal file
|
|
@ -0,0 +1,287 @@
|
||||||
|
/* THE WAIFU ZONE - UGLIEST STYLESHEET EVER */
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Comic Sans MS', 'Papyrus', 'Brush Script MT', cursive;
|
||||||
|
line-height: 0.8;
|
||||||
|
color: #ff0080;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#ff0000,
|
||||||
|
#ff0000 10px,
|
||||||
|
#00ff00 10px,
|
||||||
|
#00ff00 20px,
|
||||||
|
#0000ff 20px,
|
||||||
|
#0000ff 30px,
|
||||||
|
#ffff00 30px,
|
||||||
|
#ffff00 40px,
|
||||||
|
#ff00ff 40px,
|
||||||
|
#ff00ff 50px
|
||||||
|
);
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 5px;
|
||||||
|
animation: shake 0.3s infinite;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
0% { transform: translate(1px, 1px) rotate(0deg); }
|
||||||
|
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
||||||
|
20% { transform: translate(-3px, 0px) rotate(1deg); }
|
||||||
|
30% { transform: translate(3px, 2px) rotate(0deg); }
|
||||||
|
40% { transform: translate(1px, -1px) rotate(1deg); }
|
||||||
|
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
||||||
|
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
||||||
|
70% { transform: translate(3px, 1px) rotate(-1deg); }
|
||||||
|
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
||||||
|
90% { transform: translate(1px, 2px) rotate(0deg); }
|
||||||
|
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: left;
|
||||||
|
font-size: 5rem;
|
||||||
|
color: #ff0080;
|
||||||
|
text-shadow: 5px 5px 0px #00ff00, 10px 10px 0px #0000ff, 15px 15px 0px #ffff00;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
letter-spacing: 15px;
|
||||||
|
animation: rainbow 0.5s linear infinite, bounce 1s ease-in-out infinite;
|
||||||
|
transform: rotate(-10deg);
|
||||||
|
font-weight: 900;
|
||||||
|
text-decoration: underline overline line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rainbow {
|
||||||
|
0% { color: #ff0000; }
|
||||||
|
16% { color: #ff8000; }
|
||||||
|
33% { color: #ffff00; }
|
||||||
|
50% { color: #00ff00; }
|
||||||
|
66% { color: #0080ff; }
|
||||||
|
83% { color: #8000ff; }
|
||||||
|
100% { color: #ff0080; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-10deg); }
|
||||||
|
40% { transform: translateY(-30px) rotate(-15deg); }
|
||||||
|
60% { transform: translateY(-15px) rotate(-5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
90deg,
|
||||||
|
#ff00ff 0px,
|
||||||
|
#00ffff 5px,
|
||||||
|
#ffff00 10px,
|
||||||
|
#ff0000 15px
|
||||||
|
);
|
||||||
|
padding: 30px;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: 20px 20px 0px #000000, 40px 40px 0px #ff0000;
|
||||||
|
border: 10px dashed #00ff00;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
transform: skew(-20deg, 5deg);
|
||||||
|
animation: wiggle 0.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes wiggle {
|
||||||
|
0%, 100% { transform: skew(-20deg, 5deg) rotate(0deg); }
|
||||||
|
25% { transform: skew(-15deg, 10deg) rotate(2deg); }
|
||||||
|
50% { transform: skew(-25deg, 0deg) rotate(-2deg); }
|
||||||
|
75% { transform: skew(-10deg, 8deg) rotate(1deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
p:first-of-type {
|
||||||
|
text-align: right;
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 900;
|
||||||
|
background: repeating-conic-gradient(#ff0000 0deg, #00ff00 90deg, #0000ff 180deg, #ffff00 270deg);
|
||||||
|
animation: spin 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
from { transform: skew(-20deg, 5deg) rotate(0deg); }
|
||||||
|
to { transform: skew(-20deg, 5deg) rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
margin: 10px auto;
|
||||||
|
max-width: 200%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: 50px 50px 0px #ff00ff, -50px -50px 0px #00ff00;
|
||||||
|
border: 20px solid #ff0000;
|
||||||
|
filter: hue-rotate(180deg) saturate(5) contrast(3) brightness(2) sepia(1);
|
||||||
|
animation: crazy-spin 3s linear infinite, pulse 1s ease-in-out infinite alternate;
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes crazy-spin {
|
||||||
|
0% { transform: scaleX(-1) rotate(0deg) scale(1); }
|
||||||
|
25% { transform: scaleX(-1) rotate(90deg) scale(1.5); }
|
||||||
|
50% { transform: scaleX(-1) rotate(180deg) scale(0.5); }
|
||||||
|
75% { transform: scaleX(-1) rotate(270deg) scale(2); }
|
||||||
|
100% { transform: scaleX(-1) rotate(360deg) scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
from { filter: hue-rotate(0deg) saturate(5) contrast(3) brightness(2) sepia(1); }
|
||||||
|
to { filter: hue-rotate(360deg) saturate(10) contrast(5) brightness(3) sepia(0.5); }
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #ff0000;
|
||||||
|
text-decoration: blink;
|
||||||
|
font-weight: 900;
|
||||||
|
font-size: 4rem;
|
||||||
|
transition: none;
|
||||||
|
background: #ffff00;
|
||||||
|
padding: 20px;
|
||||||
|
border: 5px dotted #00ff00;
|
||||||
|
animation: blink-crazy 0.1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink-crazy {
|
||||||
|
0% { opacity: 1; color: #ff0000; background: #ffff00; }
|
||||||
|
25% { opacity: 0; color: #00ff00; background: #ff00ff; }
|
||||||
|
50% { opacity: 1; color: #0000ff; background: #00ffff; }
|
||||||
|
75% { opacity: 0; color: #ffff00; background: #ff0000; }
|
||||||
|
100% { opacity: 1; color: #ff00ff; background: #00ff00; }
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
animation: explode 0.2s linear infinite;
|
||||||
|
transform: scale(3) rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes explode {
|
||||||
|
0% { transform: scale(3) rotate(45deg); }
|
||||||
|
50% { transform: scale(5) rotate(180deg); }
|
||||||
|
100% { transform: scale(3) rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Post styling - MAXIMUM UGLINESS */
|
||||||
|
p:nth-of-type(3),
|
||||||
|
p:nth-of-type(4) {
|
||||||
|
border: 15px ridge #ff00ff;
|
||||||
|
font-style: normal;
|
||||||
|
background: repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
#ff0000 0px,
|
||||||
|
#00ff00 2px,
|
||||||
|
#0000ff 4px,
|
||||||
|
#ffff00 6px,
|
||||||
|
#ff00ff 8px,
|
||||||
|
#00ffff 10px
|
||||||
|
);
|
||||||
|
transform: skew(15deg, -10deg) rotate(5deg);
|
||||||
|
animation: disco 0.3s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes disco {
|
||||||
|
0% { background-position: 0px 0px; }
|
||||||
|
100% { background-position: 20px 20px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Last paragraph with link - ULTIMATE CHAOS */
|
||||||
|
p:last-of-type {
|
||||||
|
text-align: center;
|
||||||
|
background: radial-gradient(circle, #ff0000 10%, #00ff00 20%, #0000ff 30%, #ffff00 40%, #ff00ff 50%);
|
||||||
|
font-size: 2rem;
|
||||||
|
border: 20px groove #00ffff;
|
||||||
|
animation: chaos 0.5s ease-in-out infinite;
|
||||||
|
transform: perspective(100px) rotateX(30deg) rotateY(-20deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes chaos {
|
||||||
|
0% { transform: perspective(100px) rotateX(30deg) rotateY(-20deg) scale(1); }
|
||||||
|
25% { transform: perspective(100px) rotateX(-10deg) rotateY(40deg) scale(1.2); }
|
||||||
|
50% { transform: perspective(100px) rotateX(50deg) rotateY(-60deg) scale(0.8); }
|
||||||
|
75% { transform: perspective(100px) rotateX(-30deg) rotateY(80deg) scale(1.5); }
|
||||||
|
100% { transform: perspective(100px) rotateX(30deg) rotateY(-20deg) scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design - UGLY ON ALL DEVICES */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding: 2px;
|
||||||
|
animation: mega-shake 0.1s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mega-shake {
|
||||||
|
0% { transform: translate(5px, 5px) rotate(5deg); }
|
||||||
|
25% { transform: translate(-5px, -10px) rotate(-5deg); }
|
||||||
|
50% { transform: translate(-10px, 5px) rotate(10deg); }
|
||||||
|
75% { transform: translate(10px, -5px) rotate(-10deg); }
|
||||||
|
100% { transform: translate(5px, 5px) rotate(5deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 8rem;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
transform: rotate(-45deg) scale(2);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 50px;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TOTAL VISUAL DESTRUCTION */
|
||||||
|
p {
|
||||||
|
opacity: 1;
|
||||||
|
animation: strobe 0.1s linear infinite, wiggle 0.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes strobe {
|
||||||
|
0% { opacity: 1; }
|
||||||
|
50% { opacity: 0; }
|
||||||
|
100% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
p:nth-child(2) { animation-delay: 0s; filter: invert(1); }
|
||||||
|
p:nth-child(3) { animation-delay: 0.05s; filter: saturate(10); }
|
||||||
|
p:nth-child(4) { animation-delay: 0.1s; filter: hue-rotate(180deg); }
|
||||||
|
p:nth-child(5) { animation-delay: 0.15s; filter: contrast(5); }
|
||||||
|
p:nth-child(6) { animation-delay: 0.2s; filter: brightness(3); }
|
||||||
|
|
||||||
|
/* CURSOR CHAOS */
|
||||||
|
* {
|
||||||
|
cursor: grab !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
*:hover {
|
||||||
|
cursor: wait !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SCROLLBAR NIGHTMARE */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 50px;
|
||||||
|
background: repeating-linear-gradient(90deg, #ff0000, #00ff00 10px, #0000ff 20px);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: radial-gradient(circle, #ff00ff, #ffff00);
|
||||||
|
border: 10px dashed #00ffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SELECTION HORROR */
|
||||||
|
::selection {
|
||||||
|
background: #ff0000;
|
||||||
|
color: #00ff00;
|
||||||
|
text-shadow: 5px 5px 0px #0000ff;
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue