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

Maritime-Memory!	1699587415 Using this! it looks lovely :D Report Comment
flameslayer	1697954471 thx! im using this rn :D Report Comment
jay	1697891868 using!!! Report Comment
EbonyKit	1693954232 Thanks for such a cool base! i edited in some different artwork for my profile and added music to it ;] much appreciate! Report Comment
orangenbluu	1693833541 using this !! Report Comment
kam / frank	1692135800 USIJNNGG!!!! I LVOE GHJS SM Report Comment
nics	1689523326 OMG USING RN, TYSM!!!!! Report Comment
gooberasta ❗️❗️	1689444362 ABSOLUTELY USING TY SM!!! Report Comment
Morgan <3	1688838324 USING TYY :3 Report Comment
Thea	1688512167 ITS SO GOOD!!! USING RN Report Comment
Niles	1685736546 TYSM THIS IS SO GOOD!! Report Comment
sunny	1685320387 IM GONNA USE THIS ATM !!!! Report Comment
SCXNE_KID_X333	1684610661 YES YES YES YES YES YES Report Comment
aetherz	1682354439 OMG I WAS LOOKING FOR THIS TYSM Report Comment
cybr_b0y!	1682295767 omgomg this is so cute im using this <333 Report Comment
pearlie ◟ marina	1680218556 USING!!!!!! THANK U Report Comment What code did you use to keep the squid icons next to the “contacting” part of your page :0 by Pushpop! >_<; 1682106169; Report
MilesisStupid	1680099410 Using <3 :) Report Comment
hypnotic ☆	1679985729 i clicked one sm1's profile to see what the layout looked like when being used and the music scared me so bad Report Comment One tip for browsing this site is to have the tab muted, that's what I usually do since the music can catch me off guard too <3 by KingBoo; 1680029160; Report
Nalu	1677475778 using Report Comment
> CESAR	1677207627 Might be using :3 Report Comment