This webzone is NOT empty.
diff --git a/uglypage.html b/uglypage.html new file mode 100644 index 0000000..a5d8b5a --- /dev/null +++ b/uglypage.html @@ -0,0 +1,22 @@ + + + + + +This webzone is NOT empty.
+
+I added something!
+Post number 1:
+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.
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
+ + + diff --git a/uglystyle.css b/uglystyle.css new file mode 100644 index 0000000..c5560c2 --- /dev/null +++ b/uglystyle.css @@ -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; +}