OFF Layout! Created by Sallycita Face (UPDATED!!ヾ(•ω•`)o )

Tags: #off, #layout, #simple

Description:

Please comment if you are going to use it (´▽｀) Edit: I had to update it because I saw the images had been deleted x,d but calm down I already fixed it, no more q the background will no longer be green but white with gray tones <,3

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sallycita Face (https://layouts.spacehey.com/layout?id=101593) -->

<style>

.logo {

content:url("https://a.deviantart.net/avatars/o/f/off-game-fanclub.png?1");

}

</style>

<style>
main, body{
background-color:#b6b6b6;
color:white;
}

nav .top, .logout-btn{
background-color:#c2c2c2;
color:white;
}

a:link{
color:#ffffff;
}

.profile .blurbs .heading, .profile .friends .heading {
background:#8f8f8f;
color:white;
}

footer{
background-color:transparent;
}

nav .top{
  background-color:
}

nav .links{
background-color:#8f8f8f;
}

nav .links a:link{
text-shadow: 0 0 7px white;
}

.profile .table-section, .profile .contact, .profile .url-info{
  border: 2px solid transparent;
}

.profile .contact .heading, .profile .table-section .heading{
  background-color:#8f8f8f
}
 .details-table td:first-child, .details-table td{
   background:transparent;
   color:white;
}

.profile .friends .person p, a, .count, .profile .blurbs .section h4{
  color: white;
}

table.comments-table td, table.comments-table td:first-child{
  background-color:transparent;
}

table.comments-table{
  border:1px solid transparent;
}
</style>



<style>main:before {
	width: 100%;
	height: 125px ;
	display: block;
	content: "";
	background-image: url('https://th.bing.com/th/id/R.9375ed13121bd9085dcc68b22ee4f0ef?rik=M72HUwW8L80i6Q&pid=ImgRaw&r=0');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>



<style>body { cursor: url('data:image/x-icon;base64,AAACAAEAICAQAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAAAIAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////ANvb2wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAABEAAgAAAAAAAAAAAAAAAAARAAEgAAAAAAAAAAAAAAAAEQARAAAAAAAAAAAAAAAAABEBEAAAAAAAAAAAAAAAAAARARAAAAAAAAAAAAAAAAAAEREAAAAAAAAAAAAAAAAAABARAAAAAAAAAAAAAAAAAAASEQABAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAABERAAAAAAAAAAAAAAAAAAAREQEQAAAAAAAAAAAAAAAAEBERAAAAAAAAAAAAAAAAARAREAAAAAAAAAAAAAAAABEQEQAAAAAAAAAAAAAAAAABAAEAAAAAAAAAAAAAAAAAAAAAAAAAEREAAAAAAAAAAAABEAAAAQAAEAAAAAAAAAAAAREAABAAAAEAAAAAABAAAAAAAAAQAAABAAAAAAAAAAAAAAAAEAAAAQAAAAAgAAAAAAAAABAAAAEAAAAAAAAAAAAAAAABAAAQAAAAIgAAAAAAAAAAABERAAAAAiAAAAAAAAAAAAAAAAAAACIAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD////////////gj///8M////CH///wh///8If///AP///wH///8B////Af///wM///8CP///Aj///wB///8Af///AP///gH///wB///8A+H/+EfA//GDgH/jgx4/xgMeP4+DHj8f/x4+H/+AfD//wPh//+Hw////8f////P////w=='), auto; }</style>



<!-- (c) Layout created by flycel ☣ (https://layouts.spacehey.com/layout?id=24665) -->

<style> 
.contact {
        font-size: #px;
        font-family: fontfamily;
        border: dotted 0px!important;
        background-image: url("URL")!important;
        background: ;
        border-top: 0px;
        
    }
    .contact .inner a img {
        font-size: 0;
    }
    .contact .inner a img:before {
        font-size: 1em;
        display: block
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	    /* add to friends */
	    content: url("https://cdn.discordapp.com/emojis/1074066418338906253.webp?size=28")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://cdn.discordapp.com/emojis/1037459611684442142.webp?size=28")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://cdn.discordapp.com/emojis/959234900928651274.webp?size=28")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://cdn.discordapp.com/emojis/1119418869619101696.webp?size=28")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://cdn.discordapp.com/emojis/959232711841710090.webp?size=28")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: URL("https://cdn.discordapp.com/emojis/959934259047591956.webp?size=28")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://cdn.discordapp.com/emojis/966474816540508200.webp?size=28")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://cdn.discordapp.com/emojis/959232513832800296.webp?size=28&animated=true")
    } 
</style>

<!-- (c) Layout created by 𝘚𝘢𝘭𝘭𝘺𝘤𝘪𝘵𝘢 𝘍𝘢𝘤𝘦 (https://layouts.spacehey.com/layout?id=99848) -->

<style>

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://media1.tenor.com/m/L_M9cY88cM8AAAAd/off-game-off.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 5s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>


<!-- (c) Layout created by 𝘚𝘢𝘭𝘭𝘺𝘤𝘪𝘵𝘢 𝘍𝘢𝘤𝘦 (https://layouts.spacehey.com/layout?id=99822) -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/t-9xbgTHpLA?si=sVsFUQnACKNR9wAB//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>





<!-- (c) Layout created by 𝘚𝘢𝘭𝘭𝘺𝘤𝘪𝘵𝘢 𝘍𝘢𝘤𝘦 (https://layouts.spacehey.com/layout?id=101336) -->

<style>
@keyframes walking-OFF{
  from{ left:-100px; }
  to{ left:calc(100% + 200px); }
}
#OFF{
  position: fixed;
  left: -130px;
  bottom: -1px;
  width: 130px;
  animation: walking-OFF 18s infinite linear;
  pointer-events: none;
}
</style>
<img id="OFF" src="https://64.media.tumblr.com/2ef584648412645795775c25e3649db4/11135b0e8b2f0c86-97/s250x400/05487e891daf7d71efd3b71b4a9f70b9934910c0.gifv"/>


<!-- (c) Layout created by 𝘚𝘢𝘭𝘭𝘺𝘤𝘪𝘵𝘢 𝘍𝘢𝘤𝘦 (https://layouts.spacehey.com/layout?id=103511) -->

<style>
.online {content:url('https://64.media.tumblr.com/8e5322a80695707c07664ef4c05f9de7/4c9b84dd07e5450e-62/s250x400/ce4603bae7606c89048f9ff26c5f72365011bace.gifv'); background: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>


<style>
/* Transparent Lite by Twilight Sparkle! https://spacehey.com/twilight */
/* Please keep the credit and don't take credit yourself! Even if you change it, leave a mention of the base you used, all I ask (and politely, I can't stop you anyway) */
body{
  background-image:url(https://scitydreamer.files.wordpress.com/2020/02/off-retrospective-8.jpg); /* put your background URL here */
  background-attachment:fixed;background-size:cover; /* remove this line if you want it to tile */
}




}

#q,
footer {
    background: 0 0; /* footer transparency */
    color: #0000;
}

footer {
    padding: 0; /* closer footer */
}

footer .links li:not(:last-child)::after,
nav .links li:not(:last-child)::after {
    color: #fff; /* make the bars between nav items white */
}

#q {
    border: 0;
    outline: 0;
    border-bottom: 1px solid #000; /* better search bar */
}

button {
    border: none; /* more better search bar */
}

.comments-table td:first-child {
    width: 20%; /* authors do not need to be that big, goodnight */
}</style>


<style>
.profile .url-info p:last-child:after {content: ""; display: block; background-image: url(https://media.tenor.com/HilufNwn_tMAAAAi/batter-batter-off.gif);  width: auto; height: 70px; background-position: top center; background-size: 20%; background-repeat: no-repeat;}
.profile .url-info p {text-align: center;}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.