Odd Squad layout

Tags: black, simple, layouts, dark, silly, odd squad, tv show, xxjellyfishxx

Description:

a simple layout I made :3 comment if using (credits are not necessary) This is te first code I made where everything is made entirely by me XD

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 🩻 xXjellyfishl0vrXx 🪼 (https://layouts.spacehey.com/layout?id=89063) -->

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
.online {content:url('https://gifcity.carrd.co/assets/images/gallery27/37d954dd.gif?v=4415fedf'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>

<style>
.logo {
content:url("https://media.discordapp.net/attachments/1100566960267329586/1179903227261624360/48_sin_titulo_20231130155046.png?ex=657b7982&is=65690482&hm=ce711900711827873f516bd96a9d1f3f91fcc6286f73ecaa161743f9d5ea8ee6&");
}

<style>
 main:before {
    box-shadow: 0 0 5px #14084e;
    border: solid 1px #14084e;
	width: 100%;
	height: 100px;
	display: block;
	content: "";
	background-image: url('https://media.discordapp.net/attachments/1100566960267329586/1179906453872574544/3.jpg?ex=657b7c84&is=65690784&hm=b3bb479e83f431b18d254e89d916e238ad89f6c53ace376c7294dcaca8614372&');
	background-position: center center;
	background-size: cover;
	margin-bottom:5px;
}

<div style="float:  ; max-height: 300px; position: fixed; right: 1px; bottom: 0px; z-index: 400;">
<img src="https://static.wikia.nocookie.net/oddsquad/images/f/fb/Official-odd-squad-seal-odd-squad-transparent.png/revision/latest?cb=20170126204640" height="250"/></style>

<style>
body{background:url("https://media.discordapp.net/attachments/1100566960267329586/1179909164210868224/e97311d2f64133d52eb2a2014986eb4c.jpg?ex=657b7f0a&is=65690a0a&hm=186310050911c42012427895e9efcee3bfc3b4671db16037f5421464c1a8b261&") no-repeat fixed; background-size:cover;}
</style>

<style>
.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/en/d/df/The_Odd_Squad.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<style>
main{
  background: rgb(0, 0, 0, 0.7);
  color: white;
  border-bottom: double grey 7px;
  border-left: double grey 7px;
  border-right: double grey 7px;
}


nav .top{
  background: rgb(0, 0, 0, 0.7);
  color: white;
  border-top: double grey 7px;
  border-left: double grey 7px;
  border-right: double grey 7px;
  margin-top: 15px;</style>

<style>
nav .links{
  background: rgb(0, 0, 0, 0.7);
  color: white;
  border-left: double grey 7px;
  border-right: double grey 7px;
}



:root {
--logo-blue: white;
--darker-blue: white;
--lighter-blue: none;
--even-lighter-blue: none;
--lightest-blue: none;
--dark-orange: white;
--light-orange: none;
--even-lighter-orange: none;
--green: white;
}</style>
<style>


</style>
<style>
url-info{
    background: url('https://steamuserimages-a.akamaihd.net/ugc/687153778006583012/AA7B806B91F4A2BD04304AF73D54F0D8A09B39A7/');
    background-position: center;
    border: var(--borders)!important;
    border-radius: var(--curve);
    height: 200px;
}
.url-info p{
    opacity: 0.0;
}
<style></style>

<style>
    footer {
        border-radius: 0px;
        border: dotted 1px;
        background: url("https://media.discordapp.net/attachments/1100566960267329586/1179909164210868224/e97311d2f64133d52eb2a2014986eb4c.jpg?ex=657b7f0a&is=65690a0a&hm=186310050911c42012427895e9efcee3bfc3b4671db16037f5421464c1a8b261&")!important;
        display: block !important;</style>


<div style="float:  ; max-height: 300px; position: fixed; right: 1px; top: 0px; z-index: 400;">
<img src="https://static.wikia.nocookie.net/oddsquad/images/4/4a/Management.svg/revision/latest?cb=20180811202030" height="100"/></div>

<div style="float:  ; max-height: 300px; position: fixed; left: 1px; bottom: 0px; z-index: 400;">
<img src="https://static.wikia.nocookie.net/oddsquad/images/f/fb/Official-odd-squad-seal-odd-squad-transparent.png/revision/latest?cb=20170126204640" height="220"/></div>

<style>
</style>
<style>
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: center;}
    .blurbs{direction: ltr;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.contact .heading {display: none !important;}
.url-info{direction: ltr; text-align: right;}
</style>

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://i.makeagif.com/media/6-17-2015/xNFHxd.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>body { cursor: url('https://mikejima.crd.co/assets/images/shadow/196e7c93_original.gif?v=05e9d6fa'), auto; }</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.

Comments

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

limonth	1709777413 usingg Report Comment
MarkFlores	1705890749 Using 🐤 Report Comment
Romper!!!	1705720904 Using!! :O) Report Comment
Romper!!!	1705720882 Using!! :O) Report Comment
hoist ⊗	1704146196 using :3 Report Comment
🦇 GothVamp 🦇(autoplay)	1701459005 You just brought my childhood back with one pic :) Report Comment