Splatoon 3 Story Mode Theme

Tags: video game, video games, splatoon, game

Description:

Layout created for splatoon lovers! Feel free to use, credit is very appreciated. If you don't feel like crediting, please consider commenting on this layout to boost it :)

Preview:

click on the image for a larger preview

Code:

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

<style>
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/cursors/cur-10/cur936.ani), url(https://cur.cursors-4u.net/cursors/cur-10/cur936.gif), auto !important;} /* End https://www.cursors-4u.com */
</style>

<div class="new-agent-3"></div>
<div class="little-buddy"></div>

<style>

    .new-agent-3 {
        background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0e4455ae-e71f-4f48-90bc-9e84c0e45449/dfehf8j-5cc2a1bf-a554-4761-bdf4-305b8093c19a.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBlNDQ1NWFlLWU3MWYtNGY0OC05MGJjLTllODRjMGU0NTQ0OVwvZGZlaGY4ai01Y2MyYTFiZi1hNTU0LTQ3NjEtYmRmNC0zMDViODA5M2MxOWEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.tBECeZ7N_Tvno-nr8zOTJbCM2vOHGAqTlWZO6YGwV6w) no-repeat;
        background-size: 70%!important;
        position: fixed;
        right: -80px;
        bottom: -5px;
        height: 410px;
        width: 320px;
        opacity: 100%;
    }

    .little-buddy {
        background: url(https://i.redd.it/yrze80oy7e691.png) no-repeat;
        background-size: 44%!important;
        position: fixed;
        left: 50px;
        bottom: -190px;
        height: 370px;
        width: 320px;
        z-index: 1000;
        opacity: 100%;
    }

    nav .top {
        background-image: url(https://fs-prod-cdn.nintendo-europe.com/media/images/08_content_images/games_6/nintendo_switch_7/nswitch_splatoon3/CI_NSwitch_Splatoon3_NewSquidbeakSplatoon_01.jpg);
        height: 410px;
        background-size: 796px;
        background-position: 0px -90px;
        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;
    }
    body {
        background-image: url(https://pbs.twimg.com/media/FADaBqaXIAE2Ock.jpg);
        background-size: 1350px;
        position: center;
        background-attachment: fixed;
    }
    main {
        background-color: transparent;
        color: white;
    }
    .contact:after {
        width: 97%;
        height: 300px;
        display: block;
        content: "";
        background-color: transparent;
        background-image: url(https://pbs.twimg.com/media/FHHq0BOXwAkCRob?format=jpg&name=900x900);
        background-position: center;
        opacity: 100%;
        background-size: 320px;
        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;
      }
    
    .profile {
        background-image: url(https://api.themezer.net/cdn/themes/56e/image.jpg);
        background-size: 810px;
        border-radius: 25px;
        border-style: solid;
        border-color: white;
        border-width: 5px;
        box-shadow: 0px 0px 13px black;
        padding: 6px;
        margin-top: 14px;
    }
    
    .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;
      }
      :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 .links {
        background-color: ;
        border-radius: 30px;
        height: 19px;
    }
    
    .profile-pic {
        border: 5px solid white;
        box-shadow: 0px 0px 7px black;
        border-radius: 30px;
        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: transparent;
    }
    table.details-table td {
        background-color: #1b1b1c !important;
        opacity: 100%;
        border-radius: 5px;
    }
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: transparent !important;
        color: yellow !important;
        border-bottom: 4px solid blueviolet;
    }
    .heading {
        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;
      }
    .container {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
        margin-top: 20px;
        padding: 3px;
    }
    table.comments-table td {
        background-color:  !important;
        border: 1px #1b1b1c solid;
        box-shadow: 0px 0px 5px #1b1b1c;
    }
     .comments-table td:first-child img {
        width: 90px;
        border-radius: 30px;
        border-style: solid;
        border-color: blue;
        border-width: 4.7px;
        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: 30px;
        border-style: solid;
        border-color: white;
        border-width: 4.7px;
        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: yellow;
        font-weight: bold;
        font-size: 80%;
    }
    .online img {
        content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/83d8a5fd-a0f4-4b68-90d3-dac405f2061f/dexyz8z-7fc4c9ac-ee31-4c98-8224-f881926969c1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzgzZDhhNWZkLWEwZjQtNGI2OC05MGQzLWRhYzQwNWYyMDYxZlwvZGV4eXo4ei03ZmM0YzlhYy1lZTMxLTRjOTgtODIyNC1mODgxOTI2OTY5YzEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Qo1Tcb8SbG7WNMpKOF_Rwa8mViMq2M7e5J1K2XDsiSE);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }
    .icon, .award img {
        content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0e4455ae-e71f-4f48-90bc-9e84c0e45449/dfemiop-58798c7f-2d49-48d7-8f67-0779ae018f7d.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBlNDQ1NWFlLWU3MWYtNGY0OC05MGJjLTllODRjMGU0NTQ0OVwvZGZlbWlvcC01ODc5OGM3Zi0yZDQ5LTQ4ZDctOGY2Ny0wNzc5YWUwMThmN2QucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.3XuK2_hoEUT3muSspe1TefnezdK3pTaWofF67Ulcj-8);
        height: 26px;
        width: 23px;
    }
    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: yellow;
    }
    a {
        color: blueviolet;
        text-shadow: 0px 0px px blueviolet;
        text-decoration: none;
    }
    a:hover {
        animation:blinkingText 1s infinite;
    }
    @keyframes blinkingText{
        0%{     color: blueviolet;    }
        50%{    color: yellow; }
        100%{    color: blueviolet; }
    }
    .comments-table td:first-child {
        background-image: url(https://i.gifer.com/origin/f3/f32b67d4642f47b3fa8a67287da72de1_w200.gif);
        background-size: 180px;
        padding: 6px;
    }
    .count {
        color: blueviolet;
        text-shadow: 0px 0px 6px;
        animation:blinkingText 1s infinite;
    }
    .details-table td:first-child {
        background: var(--even-lighter-blue);
        color: white;
        font-weight: bold;
        width: 33%;
    }
    .profile-info {
        background-image: url(https://i.gifer.com/origin/f3/f32b67d4642f47b3fa8a67287da72de1_w200.gif);
        background-size: 200px;
        height: 100px
        width: 100px
        border: 7px solid yellow;
        box-shadow: 0px 0px 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }
    .profile-info {
        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 .friends .person p {
        color: blueviolet;
        text-shadow: 0px 0px e;
        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;
    }
    
      @keyframes flash_border {
  0% {
    border-color: yellow;
  }
  50% {
    border-color: blueviolet;
  }
  100% {
    border-color: yellow;
}

@-webkit-keyframes flash_border {
0% {
    border-color: yellow;
  }
  50% {
    border-color: blueviolet;
  }
  100% {
    border-color: yellow;
 }
}

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

nigel ˶ᵔ ᵕ ᵔ˶	1749095382 using :) Report Comment
toonkilla	1742512145 using! Report Comment
HEADLOCK	1740789730 Using! Report Comment
Gatotraumatizado	1739706418 Imma use it too Report Comment
Alex :3	1739638961 using!! Report Comment
★Just Ana☆	1731880602 Im using it You did great work!! I absolutley LOVE IT :D Report Comment
ikainakanon	1731848968 using !! + planning to use more in the future incase i switch :> Report Comment
Damien	1726277400 Using :) Report Comment
wannaCrrry	1726016003 using!!!! :3 Report Comment
CH4RL0TTE>XD	1724474146 using tyy~! <3 Report Comment
kitty!	1724286409 using Report Comment
꒰୨♡୧◞ 。callie/apollo ⭑.ᐟ (silliest)	1722548453 gonna use this!! ^_^ Report Comment
Bit!Pak	1718773735 using! Report Comment
callisto	1709967795 USING COUGH Report Comment
gloopy	1708833086 using!! :0) Report Comment
MackySauce	1707295698 using!! tysm :O Report Comment
SEBESTIAN.EXE	1706539011 Def using :0 Report Comment
Angelica	1706361994 Using!! Report Comment
Harmonia	1701560685 Using!! :D Report Comment
zilly ✰	1697341269 using!! Report Comment