splatoon layout

Tags:
Description:

specifically orange and yellow splatoon layout!
feel free to edit however you'd like
credit not needed
Code:

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

<style>
}}
a:hover {
     animation: changeColor 5s linear infinite;
}
@keyframes changeColor{
    0%{color:white;}
    20%{color: #FFBDE1;}
    40%{color: white;}
    60%{color: #FFBDE1;}
    80%{color: white;}
    100%{color: #FFBDE1;}
}
.tableLeft{
background-color:white;
border:1px solid #FFBDE1;
}
div#header {
    background-color: white;
    background-position: 0px -400px;
text-align: center;
text-transform: lowercase;
    background-size: 100px;
    background-repeat: repeat;
}
div#hSub {
    color: white !important;
    background-color: #FFE6F4;
    text-align: center;
text-transform: lowercase;;
}
 {
    animation-name: floating ;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    max-height: 650px;
    overflow-y: scroll;
    padding: 10px;
}
img{
    animation-name: floating;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes floating { 
    0% { transform: translate(0,  0px); } 
    50%  { transform: translate(0, 20px); } 
    100%   { transform: translate(0, -0px); } 
}
}
</style>

<style>
    }
@keyframes shake{
    0% {
        transform:translate(1px,1px) rotate(0deg);
    }
 
    10% {
        transform:translate(-1px,-2px) rotate(-1deg);
    }
 
    20% {
        transform:translate(-3px,0px) rotate(1deg);
    }
 
    30% {
        transform:translate(3px,2px) rotate(0deg);
    }
 
    40% {
        transform:translate(1px,-1px) rotate(1deg);
    }
 
    50% {
        transform:translate(-1px,2px) rotate(-1deg);
    }
 
    60% {
        transform:translate(-3px,1px) rotate(0deg);
    }
 
    70% {
        transform:translate(3px,1px) rotate(-1deg);
    }
 
    80% {
        transform:translate(-1px,-1px) rotate(1deg);
    }
 
    90% {
        transform:translate(1px,2px) rotate(0deg);
    }
 
    100% {
        transform:translate(1px,1px) rotate(0deg);
    }
</style>

<style>
    body {
        background: white
    }
</style>

<style>
   /* changes ALL headings to different colors. */
   .profile .blurbs .heading,
   .profile .friends .heading{
       background-color: #FF8C4D;
   }
   
</style>
<style>
    .profile .contact .heading,
    .profile .table-section .heading{
        background-color:#FF8C4D;
    }
</style>

<style>
    .profile {
        background:#FFFDFB;
    }
</style>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
p,h1,h2,h3,h4{
font-family: 'Press Start 2P', cursive;
}
</style>

<style>
    /* color of the normal text on your page. I have set this to purple so that you know which text is affected. Feel free to change it to what you prefer*/
p, h2 {
     color: #000000;
}
</style>

<style>
    }
/* color of friend's names in the comments, number of friends and your name. This I set to orange */ 
h1, .count, .friends a p {
     color: #000000;
}
</style>

<style>
    /*This is the color of the links on your page. I have set them to green so you can see what they are. Feel free to change them to your preferred color*/
a {
     color: #000000;
}
</style>
<style>
    /* color of the normal text on your page. I have set this to purple so that you know which text is affected. Feel free to change it to what you prefer*/
p, h2 {
     color: #000000;
}
</style>

<style>
    }
nav
{
font-family: 'Press Start 2P', cursive;
}
nav .top
{

}
nav .links
{
text-align: center;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions
{
border: 2px #000000;
}
a
{
color: #000000;
}
a:hover
{
color: #F36A2B;
}
</style>
<style>
    }
.profile h1
{
font-family: 'Press Start 2P', cursive;
background-color: rgb(22,22,22);
text-align: center;
font-size: 2em;
border: 2px solid limegreen;
}
.profile .blurbs .section h4, .count
{
color: #000000;
}
h4
{
</style>
<style>
}

.general-about{
  position: relative;
  margin-top: 20px;
}
</style>
<style>



:root {
        --logo-blue: #ED6324;
        --darker-blue: #FF9C6F;
        --lighter-blue: #FF9C6F;
        --even-lighter-blue: #FF9C6F;
        --lightest-blue: #FF9C6F;
        --dark-orange: #FF9C6F;
        --light-orange: #FF9C6F;
        --even-lighter-orange: #FF9C6F;
        --green: #FF9C6F;
    }

</style>

<style>
/* this adjusts the size/font of your name */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
font-size: 30px !important;
font-family: 'Press Start 2P', cursive;
text-transform:uppercase !important;
padding-left: 2px !important;
}
</style> 

<style> 
/* this changes the color of your name */
.profile h1{
background: -webkit-linear-gradient(#FF9C6F, #F9DC62);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

<style>
/* this changes the color of your headers */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
h4{
font-size: 12x !important;
font-family: 'Press Start 2P', cursive;
text-transform:uppercase !important;
padding-left: 2px !important;
/* gradient text, you can replace existing colors with whatever ones you want */
background: -webkit-linear-gradient(#000000, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* the color of the number of your friends */
    .count {
        color: #F9DC62;
    }
</style>

<style>
/* main profile background/the box that has all your text */
/* use https://rgbacolorpicker.com/ to pick a different color and adjust it's opacity */
main {
border-radius:15px;
border: 2px dotted rgba(248, 95, 36)
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgba(249, 220, 98);
border: 3px dotted rgba(248, 95, 36);
}
</style>

<style>
/* friend comments */
.profile .friends .comments-table td {
background-color: rgba(2h);
border: 1px solid rgba(2h1);  
}
.comments-table td*{
}
</style>

<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: "🐙"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "🐙"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🐙"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "🐙"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "🐙"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🐙"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "🐙"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🐙️"
}   
</style>

<style>
    /*============= box shadows ===================*/

.mood, .blog-preview, .contact {
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #;
}

.table-section, .blurbs, .friends {
    margin-bottom: 30px !important;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #;
}

.friends {
    margin-top: 10px!important;
}

.profile-info {
    background: #F9DC62;
    border: var(--borders)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 30px;
    box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #;
}
</style>

<style>
    /*============= online icon  ===================*/

.online {
    content: url(https://i.kym-cdn.com/photos/images/original/000/774/723/f32.gif); 20px
}
</style>

<style>
    footer{
    background: #ED6324;
    border: var(--borders);
    padding:10px;
    margin-top: 10px;
}
/* .details-table td:first-child{display:none;}  this hides the movies,books,heroes titles*/
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-3/cur210.ani), url(https://cur.cursors-4u.net/cursors/cur-3/cur210.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/04/22/dance-dance-revolution-green-glitter.html" target="_blank" title="Dance Dance Revolution Green Glitter"><img src="https://cur.cursors-4u.net/cursor.png" alt="Dance Dance Revolution Green Glitter" style="position:absolute; top: 0px; right: 0px;"/></a>
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 0 of 0 comments ( View all | Add Comment )