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 name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>NOT Empty webpage of a CHUNBOAN user</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>THE WAIFU ZONE</h1>
|
||||
<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