Splatoon 3 Layout

Tags: splatoon, cute, splatoon3, nintendo, videogame, colorful
Description:

Made 4 my friend!! :) I tried out some new code and put it in here!! :D I made some of my own pixels w/ the graphics from splatoon!! sadly, i could not find a squid shaped cursor tho :(!! Sorry if my coding is messy! :)
Preview:

click on the image for a larger preview
Code:

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

<style>
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
}
</style>

<style>
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content:url("https://media.discordapp.net/attachments/903364339464044575/1090822930855899136/43D8BA88-10ED-4C94-AC5E-1F3AF0B1BCB8.gif");
    color: #E9589A;
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/mechanics/mec-5/mec467.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/30/sony-psp-2.html" target="_blank" title="Sony PSP"><img src="https://cur.cursors-4u.net/cursor.png" alt="Sony PSP" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
.profile {
background: url(https://w.wallhaven.cc/full/9m/wallhaven-9ml9e8.jpg);
}
body {
        background-image: url('https://images6.alphacoders.com/126/1262652.jpg');
        background-size: 1550px;
        background-attachment: fixed;
        background-position: center;
    }
</style>

<style>
main {
border: 5px solid white;
border-radius: 5px;
position: relative;
         }

footer {
background: url(https://w.wallhaven.cc/full/9m/wallhaven-9ml9e8.jpg);
background-position: 0px 0px;
border-radius: 5px;
border: 5px solid blue;
}

.blurbs {
border: 2px solid white;
}

.blurbs .inner {
background: black;
}

.friends {
border: 2px solid white;
}

.friends .inner {
background: black;
}

.profile-info {
background: black;
border: 2px solid white;
}

.blog-preview {
border: 2px solid white;
background: black;
}

.contact {
background: black;
}

.url-info {
background: black;
}

.table-section {
background: black;
}

</style>

<style>
.general-about img {
        -webkit-mask-image: url(https://cdn.discordapp.com/attachments/920463473199153162/1174410545781284984/iconnnnn.png?ex=65677e0d&is=6555090d&hm=e0e65d5186561fe3a4ea94b9929c57a8acf72334c9804a64e31d052b850175e4&);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }

.friends img {
        -webkit-mask-image: url(https://cdn.discordapp.com/attachments/920463473199153162/1174410545781284984/iconnnnn.png?ex=65677e0d&is=6555090d&hm=e0e65d5186561fe3a4ea94b9929c57a8acf72334c9804a64e31d052b850175e4&);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
</style>

<style>
@import url('https://fonts.cdnfonts.com/css/foo-2');
@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');

p{
font-family: 'Single Day', cursive;
font-size: 125%;
color: white;
}

h2,h3,h5 {
font-family: 'Foo', sans-serif;
font-size: 175%;
color: yellow;
}

h1,h4 {
font-family: 'Foo', sans-serif;
font-size: 175%;
color: blue;

</style>

<style>
:root {
--logo-blue: ;
--darker-blue: yellow;
--lighter-blue: ;
--even-lighter-blue: ;
--lightest-blue: ;
--light-orange: black;
--dark-orange: white;
--even-lighter-orange: ;

main {
    background: white;
    color: white;
    padding: 6px 0px;
    font-size: 80%;
}
</style>

<style>
    nav .top {
        background-image: url(https://catwithmonocle.com/wp-content/uploads/2021/09/splatoon3-artwork-01-1920x1080-1.jpg);
        height: 410px;
        background-size: 796px;
        background-position: 0px -10px;
        border-radius: 5px;
        position: relative;
        border: 2px solid white;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
</style>

<div class="neo-agent-three-a"></div>
<style>

    .neo-agent-three-a {
        background: url(https://cdn.wikimg.net/en/splatoonwiki/images/1/14/S3_render_New_Agent_3_Hero_Suit_2.png) no-repeat;
        background-size: 70%!important;
        position: fixed;
        right: -100px;
        bottom: -190px;
        height: 599px;
        width: 433px;
        opacity: 100%;
    }
</style>

<style>
    .online {
        color: white;
        font-weight: bold;
        font-size: 98%;
    }
    .online img {
        content: url(https://cdn.wikimg.net/en/splatoonwiki/images/8/89/S3_icon_squid_light_green.png?20230320202226);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }

</style>

<style>
/* customizable snowflake styling */
 	.snowflake {
 	color: #fff;
 	font-size: 1em;
 	font-family: Arial, sans-serif;
 	text-shadow: 0 0 1px #000;
 	}
 	 
 	@-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>
 	<div class="snowflakes"> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> <div class="snowflake"> <img src="https://cdn.discordapp.com/attachments/1101680008633790474/1190174526986797126/Inkling_squid_swimming.gif?ex=65a0d767&is=658e6267&hm=d4b1bad32d93715f85438f92f4de8b1b2a3adfd9a511c14bf32b3b5e558b26af&"/> </div> </div>


<style>
/* contact icons */
.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/attachments/799489023956484137/1190316711103176784/Splatoon_2_-_Splat_-_Blue_15.png?ex=65a15bd2&is=658ee6d2&hm=28a590e89a04d90ab22d4460a58340634e6578ec75655149924313c200badfd4&)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://cdn.discordapp.com/attachments/799489023956484137/1190314461714727013/S3_symbol_Big_Man.png?ex=65a159ba&is=658ee4ba&hm=d99afbb6749d02b4cd217b41a8a684d071b6d58853c0accd5de6ee68ac3f573c&")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://cdn.discordapp.com/attachments/799489023956484137/1190314462452924457/CABE384B-4F2D-42E5-B013-334C7D9D1CD8.gif?ex=65a159ba&is=658ee4ba&hm=c17ca8caef8541e6764e75de5c2d2030e176ada46bc6948215ba39c1afe5cdb6&")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://cdn.discordapp.com/attachments/799489023956484137/1190314462218035230/CI_NSwitch_Splatoon2_Gear_Splat_5.png?ex=65a159ba&is=658ee4ba&hm=96573fc67aec5537b0f78ead96e3b128b419822503432faacfdb057bb6ee6bdb&)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://cdn.discordapp.com/attachments/799489023956484137/1190314461475643423/S3_symbol_Frye.png?ex=65a159ba&is=658ee4ba&hm=31357eab4b6687908b82a27ca30282d81a68375a4f21786be44c456de21fb380&)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://cdn.discordapp.com/attachments/799489023956484137/1190314461274308658/S3_symbol_Shiver.png?ex=65a159ba&is=658ee4ba&hm=7e00b5f327d62f6d499c869873df096b3cfb4e92d98afaeb2015c3fa0ad7e454&)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group  */
content: url("https://cdn.discordapp.com/attachments/799489023956484137/1190316710725693480/Deep_Cut_combined_logo.png?ex=65a15bd2&is=658ee6d2&hm=9dfc683da6ead41da9c9a208e2b0d23b9406d83cc4ee1e1ef400cfb8fa86fd58&")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://media.discordapp.net/attachments/903364339464044575/1080112357126176768/DA550B9B-7AA6-4715-8354-92F1EA1357DA.gif)
}   
</style>

<style>
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}
</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 2 of 2 comments ( View all | Add Comment )
keti ^u^
1719760498
i have the exact photo in the background as a poster!!!!!!!!!!!
Report Comment
Day
1706229603
omg, it's beautiful. I never thought I would find a person who likes splatoon by Spacehey. I'm using it ! ᔦꙬᔨ
Report Comment