Published by K1ttyKatSkullz/Forenzik

published 1750874660
updated 1750874927

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

My old layout

<style>

.logo {

content:url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg/revision/latest?cb=20210623164701");

}

</style>

<style>

.logo {

content:url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg/revision/latest?cb=20210623164701");

filter: invert(100%);

}

</style>

<style>

* {cursor: url(https://cur.cursors-4u.net/others/oth-5/oth481.cur), auto !important;}

body {

font-family: 'Times New Roman', Serif;

text-align: center;

background-image: url("https://i.pinimg.com/564x/a8/01/bf/a801bf2d57f276af7447e0dcf06b88f1.jpg");

background-position: center;

background-repeat: repeat;

background-color: black;

background-attachment: fixed;

}

main {

display: contents;

}

main .left, main .right {

padding: 15px;

}

.online {

color: red;

animation-name: blink;

animation-iteration-count: infinite;

animation-timing-function: cubic-bezier(1.0,0,0,1.0);

animation-duration: 2s;

}

.online img {

display: none;

}

.profile {

color: white;

text-transform: lowercase;

text-align: left;

font-family: 'Times New Roman', Serif;

font-size: 16px;

background-color: black;

}

:root {

--logo-blue: black;

--darker-blue: grey;

--lighter-blue: black;

--even-lighter-blue: transparent;

--lightest-blue: transparent;

--light-orange: transparent;

--even-lighter-orange: transparent;

}

main .left {

text-align: center;

}

h2, h3, h4, h5 {

color: red;

font-size:17px;

}

main p {

color: white;

}

.friends-grid p {

color: grey !important;

}

footer {

color: white;

background-color: black;

}

</style>

</a><br/><span style="font-size:10px; ">My Result: Urgent!</span><br/><span style="font-size:10px; ">-= <a href="https://www.nerdtests.com/mq/uttake.php?id=157094">click to take @ NerdTests.com</a> =-</span>

</div>

</a>

<p><iframe width="560" height="315" src="https://www.youtube.com/embed/siFsdInZqC0" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""><br/>Powered by <a href="https://youtubeembedcode.com">youtube embed code generator</a> and <a href="https://evfactory.se/produkt/garo-entity-compact/">Garo Entity</a></iframe></p>

<style>

nav .links {

background-color: transparent;

background-image: url('https://64.media.tumblr.com/528b834b249e2bc3e946755e390045cb/fd59c9f71bee8cff-d1/s400x600/8608080c499391b27809df5c27ae6405bf4214e9.gifv');

background-size: cover;

text-align: center;

margin-bottom: 1em;

}

</style>

<style>

.online{content:url("https://www.myspacegens.com/images/online_now/39.gif");}

</style>

</div>

<style>

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

RAHHHHH!!!!

<style>

.noise {

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

overflow: hidden;

z-index: 400;

opacity: 0.8;

pointer-events: none;

opacity: 1;

z-index: 450;

}

.noise:before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

background: url('https://ice-creme.de/images/background-noise.png');

pointer-events: none;

will-change: background-position;

animation: noise 1s infinite alternate;

}

.lines {

position: fixed;

left: 0;

top: 0;

width: 100vw;

height: 100vh;

pointer-events: none;

z-index: 300;

opacity: 0.6;

will-change: opacity;

animation: opacity 3s linear infinite;

}

.lines:before {

content: '';

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

pointer-events: none;

background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);

background-size: 100% 4px;

will-change: background, background-size;

animation: scanlines 0.2s linear infinite;

}

.main {

}

.main .noise:before {

background-size: 170%;

}

.main .vhs {

position: absolute;

left: 2rem;

top: 2rem;

will-change: text-shadow;

animation: rgbText 2s steps(9) 0s infinite alternate;

}

.main .vhs .char {

will-change: opacity;

animation: type 1.2s infinite alternate;

animation-delay: calc(60ms * var(--char-index));

}

.main .time {

position: absolute;

right: 2rem;

top: 2rem;

will-change: text-shadow;

animation: rgbText 1s steps(9) 0s infinite alternate;

}

.main .glitchtext {

will-change: text-shadow;

animation: rgbText 1s steps(9) 0s infinite alternate;

}

@keyframes noise {

0%,

100% {

background-position: 0 0;

}

10% {

background-position: -5% -10%;

}

20% {

background-position: -15% 5%;

}

30% {

background-position: 7% -25%;

}

40% {

background-position: 20% 25%;

}

50% {

background-position: -25% 10%;

}

60% {

background-position: 15% 5%;

}

70% {

background-position: 0 15%;

}

80% {

background-position: 25% 35%;

}

90% {

background-position: -10% 10%;

}

@keyframes opacity {

0% {

opacity: 0.6;

}

20% {

opacity: 0.3;

}

35% {

opacity: 0.5;

}

50% {

opacity: 0.8;

}

60% {

opacity: 0.4;

}

80% {

opacity: 0.7;

}

100% {

opacity: 0.6;

}

@keyframes scanlines {

from {

background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);

background-size: 100% 4px;

}

to {

background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);

background-size: 100% 4px;

}

@keyframes rgbText {

0% {

text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);

}

25% {

}

45% {

text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);

}

50% {

text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);

}

55% {

text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);

}

90% {

text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);

}

100% {

text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);

}

@keyframes type {

0%,

19% {

opacity: 0;

}

20%,

100% {

opacity: 1;

}

</style>

<style>

.rgbtxt {

animation: rgbText 1s steps(9) 0s infinite alternate;

animation-name: rgbText;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes rgbText {

0% {

}

25% {

}

45% {

}

50% {

}

55% {

}

90% {

}

100% {

}

</style></div>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url(https://64.media.tumblr.com/61462a67de3c3c48674e503340ed5195/ac926009ba373921-41/s500x750/c99a9511ef6675c4e6482acedd1a8967b1f9e8c5.gifv);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 1s ease 2s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

</style>

0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )