SIDE ORDER LAYOUT!!!

Tags: splatoon, side order, layout

Description:

i love this dlc so badly sooo its only fair if i make a layout for it!!!! -- this layout includes: custom contact box icons, custom navigation icons, an online now graphic, a custom notification icon, a custom cursor (its tiny but its there!! trust me!!), an image banner, a slight grayscale overlay, and a music player! on top of that this one floats as well!!! (using this as a base is okay, but credit me somewhere if you do!)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ROOKS / DYNA / BEAN / RUBIX 🫀 (https://layouts.spacehey.com/layout?id=100463) -->

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono');
body{font-family: "Kode Mono" ;}
</style>


<style>

  :root {
     --logo-blue: #cea896;
     --darker-blue: #cea896;
     --lighter-blue: ;
     --even-lighter-blue: #cea896;
     --lightest-blue: white;
     --dark-orange: #5c3b2b;
     --light-orange: #cea896;
     --even-lighter-orange: ;
     --green: ;
}

body {
    background: url(https://i.ibb.co/WsYYFrq/side-order-trailer-images-v0-5qzwmhsaq2ha1.webp);
   background-attachment: fixed !important;
   background-repeat: no-repeat !important;
   background-position: top left !important;
   background-size: cover !important; 
}

main {
   background-color: #FFFFFF99;
   backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
   border-radius: 5px;
   border: 5px groove #b67e64;
   padding: 0;
   font-size: 90%;
   color: #000000;

}

  .top{
   border-radius: 5px;
   border: 5px groove #b67e64;

}

.online {
    content: url(https://64.media.tumblr.com/128d6506bbc24ba47e063d8e052bf9fc/977b16e29741e1c7-f6/s75x75_c1/99a9a26eeadfc446417478ca6ee20fd0944eca39.gif);

}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
content: url("https://64.media.tumblr.com/86ab758692a4d3f37b1c4b263e1a926f/23c9d1d5cf9aada9-4f/s75x75_c1/75d92dc431135c6d945499604f4100127b934ae8.gifv") !important;
padding-left: 4px !important;
}


</style>

<style>.top{border-radius: 25px 25px 25px 25px !important;}main{border-radius: 25px 25px 25px 25px !important;}</style>

<style>*{-moz-filter: grayscale(7%);-webkit-filter: grayscale(7%);filter: grayscale; /* ie6-9 */filter: grayscale(7%);}</style>

<style>
}


.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

</style>
<style>

.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://64.media.tumblr.com/b71b662fedf81ea7c586e33c8d3ab815/a41479ee2c190fff-5d/s75x75_c1/08c1ba4800776743528396c22de6384c4e0daf6f.gif")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://64.media.tumblr.com/c70a17a6c092b33e91545b31066276a2/d8a01f573e3e7aff-8c/s75x75_c1/df139d95dc31ea623b6e05738097a1dd93c0c701.gif")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://64.media.tumblr.com/c70a17a6c092b33e91545b31066276a2/d8a01f573e3e7aff-8c/s75x75_c1/df139d95dc31ea623b6e05738097a1dd93c0c701.gif")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://64.media.tumblr.com/b71b662fedf81ea7c586e33c8d3ab815/a41479ee2c190fff-5d/s75x75_c1/08c1ba4800776743528396c22de6384c4e0daf6f.gif")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://64.media.tumblr.com/b71b662fedf81ea7c586e33c8d3ab815/a41479ee2c190fff-5d/s75x75_c1/08c1ba4800776743528396c22de6384c4e0daf6f.gif")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: url("https://64.media.tumblr.com/c70a17a6c092b33e91545b31066276a2/d8a01f573e3e7aff-8c/s75x75_c1/df139d95dc31ea623b6e05738097a1dd93c0c701.gif")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://64.media.tumblr.com/c70a17a6c092b33e91545b31066276a2/d8a01f573e3e7aff-8c/s75x75_c1/df139d95dc31ea623b6e05738097a1dd93c0c701.gif")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://64.media.tumblr.com/b71b662fedf81ea7c586e33c8d3ab815/a41479ee2c190fff-5d/s75x75_c1/08c1ba4800776743528396c22de6384c4e0daf6f.gif")
    }

main:before {
width: 100%;
height: 180px;
display: block;
content: "";
background-image: url('https://i.ibb.co/fFZps38/Splatoon-3-DLC-2.jpg');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 150px;
}

</style>

<style>

li.active .icon { content:url('https://64.media.tumblr.com/ec5bce1c47730f52d5eae32db42186bc/7ed850f839aece3a-41/s75x75_c1/fc85dab804be4899f5ec4c2c219fe3959cb33706.gif'); width: 20px;height: 20px;}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-6/cur559.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/11/08/tiny-white-pointer.html" target="_blank" title="Tiny White Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny White Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>

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 19 of 19 comments ( View all | Add Comment )

⋆˚࿔ Cheerios 𝜗𝜚˚⋆	1743291912 using Report Comment
Tavi	1741704320 Using <3 Report Comment
𐙚　⁺　Yan　‿	1734891915 using!! Report Comment
Dallas ~	1732039526 using.... Report Comment
Naaat	1729107395 Shit, this is cool 0-0 Using! Report Comment
OctaVia	1727287770 Will use (future) Report Comment
♡𝗥♥𝗶♥𝗻♡	1727044772 will be using Report Comment
Ghostyy_	1722739198 using!! :D Report Comment
Quills(≧∇≦)/	1711858460 Using :3 Report Comment
˖ 𑣲 Hypershock ﹒　 𖤐	1711218193 using! >:D Report Comment
SPECUCHIP!!	1710378724 def using!!! so cool :3 Report Comment
Craig Tucker.	1710009339 holy shit i love this Report Comment
#🎧 𝑨𝑳𝑺 ✮⋆˙	1709704780 USINGG!! THIS IS SO FUNKY >_0 Report Comment
! whokilledzoe !	1709656026 Using X3 Report Comment
🛑 - TRAFFIC !	1709415638 USING OHMYGOD Report Comment
olivia	1709216383 this is soooo cute!! :) using this <3 Report Comment
felix \| mafioso	1709211425 im gonna use this >:D Report Comment
Cyrus	1709147046 beautiful layout! Using this for sure Report Comment
caspian (winters #1 fan)(editing)	1709140121 THIS IS COOL COOL WTF Report Comment