Splatoon Theme

Tags: splatoon, colorful, video game, game

Description:

A theme for splatoon fans! had a lot of fun making this one. Credit is appreciated, you can view the full thing on my profile!

Preview:

click on the image for a larger preview

Code:

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

<div class="marina"></div>
<div class="pearl"></div>

<style>

    /* Start https://www.cursors-4u.com */ * {cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1155.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1155.png), auto !important;} /* End https://www.cursors-4u.com */

    .marina {
        background: url(https://static.wikia.nocookie.net/splatoon/images/9/9d/Marina.png/revision/latest?cb=20181221143739) no-repeat;
        background-size: 85%!important;
        position: fixed;
        right: -36px;
        bottom: 0px;
        height: 370px;
        width: 320px;
        z-index: 1000;
        opacity: 100%;
    }
    .pearl {
        background: url(https://static.wikia.nocookie.net/splatoon/images/7/73/Pearl.png/revision/latest?cb=20181215192014) no-repeat;
        background-size: 85%!important;
        position: fixed;
        left: 0px;
        bottom: -20px;
        height: 370px;
        width: 320px;
        z-index: 1000;
        opacity: 100%;
    }
    .contact:after {
        width: 97%;
        height: 167px;
        display: block;
        content: "";
        background-color: transparent;
        background-image: url(https://pa1.narvii.com/6517/4ee7910710ebac2ca29f874fc2572166a3948e56_hq.gif);
        background-position: bottom;
        opacity: 100%;
        background-size: 300px;
        border: 4px solid white;
        border-radius: 20px;
    }
    
    .contact:after {
        border-color: white;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
      }
    
    body {
        background-image: url(https://preview.redd.it/obv27cf5lnr21.gif?width=500&auto=webp&s=52b4e180aa3920c42ebba4c4633d6bf0ce51ae56);
        background-size: 1400px;
        background-attachment: fixed;
        background-position: center;
    }
    
    main {
        background-color: transparent;
        color: white;
    }
    
    :root {
        text-shadow: 0px 0px 5px;
        --logo-blue: ;
        --darker-blue: ;
        --lighter-blue: ;
        --even-lighter-blue: ;
        --lightest-blue: ;
        --dark-orange: ;
        --light-orange: ;
        --even-lighter-orange: ;
        --green: ;
    }
    nav .top {
        background-image: url(https://nintendoeverything.com/wp-content/uploads/splatoon-2-anniversary.jpg);
        height: 480px;
        background-size: 800px;
        background-position: center;
        border-radius: 5px;
        position: relative;
        border: 2px solid white;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
    nav .top {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    nav .links {
        background-color: ;
        border-radius: 30px;
        height: 19px;
    }
    .profile-pic {
        border: 4px solid white;
        box-shadow: 0x 0px 7px cyan;
        border-radius: 100px;
        overflow: hidden;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }
    .profile-pic {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: #1b1b1c;
        border-radius: 23px;
        box-shadow: 0px 0px 3px black;
    }
    table.details-table td {
        background-color: #1b1b1c !important;
        opacity: 70%;
        border-radius: 20px;
    }
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: transparent !important;
        color: lime !important;
        border-bottom: 4px double magenta;
    }
    .container {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
        margin-top: 20px;
        padding: 20px;
    }
    table.comments-table td {
        background-color:  !important;
        border: 1px #1b1b1c solid;
        box-shadow: 0px 0px 5px #1b1b1c;
    }
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 100px;
        border-style: solid;
        border-color: blue;
        border-width: 3px;
        box-shadow: 0px 0px 7px black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    .profile .friends .person img {
        border-radius: 100px;
        border-style: solid;
        border-color: white;
        box-shadow: 0px 0px 7px black;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    .blog-preview p {
        font-size: 1.2rem;
        font-family: Blippo, fantasy;
    }
    .online {
        color: magenta;
        font-weight: bold;
        font-size: 98%;
    }
    .online img {
        content: url(https://www.pinclipart.com/picdir/big/13-133287_squid-clipart-pink-squid-in-splatoon-2-png.png);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }
    .icon, .award img {
        content: url(https://cdn.wikimg.net/en/splatoonwiki/images/9/96/S2_Mem_Cake_Inkling_Squid.png);
        display: inline-block;
        height: 1.5em;
        width: 1.5em;
        margin: 0 .05em em;
        vertical-align: -0.2em;
        color: rgba(0,0,0,0);
    }
    .profile .blurbs .section h4 {
        margin: 0;
        color: white;
    }
    a {
        color: magenta;
        text-shadow: 0px 0px px magenta;
        text-decoration: none;
    }
    .comments-table td:first-child {
        background-image: url(https://thumbs.gfycat.com/DamagedForsakenFoxhound-size_restricted.gif);
        background-size: 160px;
        padding: 6px;
    }
    .count {
        color: lime;
        text-shadow: 0px 0px 6px ;
    }
    .details-table td:first-child {
        background: var(--even-lighter-blue);
        color: white;
        font-weight: bold;
        width: 33%;
    }
    .profile-info {
        background-image: url(https://thumbs.gfycat.com/DamagedForsakenFoxhound-size_restricted.gif);
        background-size: 500px;
        border: 2px solid magenta;
        box-shadow: 0px 0px 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }
    .profile .friends .person p {
        color: magenta;
        text-shadow: 0px 0px px;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }
    footer {
        border-radius: 2px;
        background-color: #1b1b1c; !important
        display: block !important;
        position: relative;
        border: 0.1px solid white;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    footer {
        border-color: black;
        animation-name: flash_border;
        animation-duration: 10s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 1.4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 2s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
    }
    .profile {
        background-image: url(https://api.themezer.net/cdn/themes/56e/image.jpg);
        background-size: 800px;
        position: relative;
        border: 2px solid white;
        border-width: 4px;
        border-radius: 40px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    
    .profile {
        border-color: white;
        animation-name: flash_border;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        -webkit-animation-name: flash_border;
        -webkit-animation-duration: 3s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-name: flash_border;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite;
      }
      
      @keyframes flash_border {
  0% {
    border-color: magenta;
  }
  50% {
    border-color: lime;
  }
  100% {
    border-color: magenta;
}

@-webkit-keyframes flash_border {
0% {
    border-color: magenta;
  }
  50% {
    border-color: lime;
  }
  100% {
    border-color: magenta;
 }
}

@-moz-keyframes flash_border {
0% {
    border-color: magenta;
  }
  50% {
    border-color: lime;
  }
  100% {
    border-color: magenta;
 }
}


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

Bee-Lzebul	1753278716 Using!!!! (nodded it a bit too) Report Comment
Igor	1753116392 THIS IS SO COOL!!! using btw :3 Report Comment
₊⁺✧𝓒𝓪𝓵𝓵𝓲𝓮 𝓒𝓾𝓽𝓽𝓵𝓮𝓯𝓲𝓼𝓱✧⁺₊	1753085165 I'm using this ○( ＾皿＾)っ Hehehe… Report Comment
DedSt4r!	1752889257 Using!!! Report Comment
elle	1752831274 using! xx Report Comment
ꪶꫀꪖꪑꪮꪀꪖᦔꫀ꩜.ᐟ	1751193372 using !! Report Comment
hi lol	1750728092 using Report Comment
KoolGeo	1749946780 using Report Comment
nigel ദ്ദി ˉ͈̀꒳ˉ͈́ )	1749269041 using Report Comment
TheUnique1	1744231627 using! Report Comment
Liszto_maniac	1743965769 this is awesomeeeee, using!!! Report Comment
Eris	1741136832 using!! Report Comment
The very tired ladybug	1741023913 using! :) Report Comment
soyxsauce	1740179717 using!! Report Comment
.ai	1739953251 Using!! Report Comment
Artea	1739920265 using! Report Comment
★Rey:D	1738802570 Using! Report Comment
Sc3n3k1dz4l1fe	1738425581 Using! Report Comment
✧ oyster 🦑🐇 ✧	1736491181 Probs gonna use !! (⁎˃ᴗ˂⁎) Report Comment
Windersta	1734094848 USING! Report Comment