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

Harmonia	1701560685 Using!! :D Report Comment
zilly ✰	1697341269 using!! Report Comment
Chip	1696920609 Im gonna use some of the stuff in this layout :D Report Comment
(>_<) ! -- ✩ - FRYE!!	1696745527 USING AND ADDING SOME ADJUSTMENTS TO IT Report Comment
˚˖𓍢ִִ໋🦈SH1V3R˚˖𓍢ִ✧˚.	1695870682 uses cutely Report Comment
⭐StarChips⭐	1694735815 Using, This looks awsome Report Comment
three.	1693815946 using with some edits o7 thank you Report Comment
@ AME / ANGEL	1692049151 using!! this is sick !! Report Comment
Error	1691567256 Using, your stuff looks awesome man Report Comment BENNRY by Pupelflash; 1693015431; Report
★ cherry ! ☆	1691447355 USING!! <3 Report Comment
frankie!	1691172985 using!!!!!! Report Comment
Ezra/Sheldon !!	1690915748 using !! Report Comment
Juan Ketchum	1690512152 using Report Comment
Wavy	1689934812 Totally using this :) Thanks for making this! Report Comment
gamecube	1689698678 using Report Comment
ciel	1689619147 USING!! Report Comment
sythsdeathbed	1689447054 USING TY SMMMMMMMMMM!!!!!!!! Report Comment
Dashie	1689265198 USING!! THANK YOU FOR THIS LAYOUT I LOVE IT <33 Report Comment
RAI !!	1688857810 I LOVE SPLATOON YOURE SO GOATED FOR THIS !!!!! Report Comment
bat !! 🦈	1688187259 using Report Comment