blink182 themed layout !

Tags: black, blink182, band, punk, red, yellow, green, cool
Description:

based off the toypaj album! warning this is very messy and mediocre as it is my first layout, and a shit ton of credit to KingBoo (https://layouts.spacehey.com/layout?id=24388) for making like all of this! i just basically recolored it and added some icons and stuff, ill definitely take it down if the original creator is uncomfy!!
Code:

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

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

<style>

main:before {
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://i.pinimg.com/originals/cf/82/7d/cf827df3ef4282c0a5fee800cbcaff1b.gif');
 background-position: center center;
 background-size: cover;

</style>

<style>

/* DO NOT REMOVE THIS CODE OR CHANGE THE IMAGE. It is a warning for this specific layout. Credit to swagstuck𖤐 ۬◦.`for the loading screen code! */
body::before {
content: "";
display: block;
position: fixed;
left: -32px;
top: 0;
width: calc(100% + 32px);
height: calc(100% + 32px);
background-image: url(https://pin.it/445MJky);
background-size: cover;
background-position: center;
background-repeat: repeat;
z-index: 10000000;
animation: ScanlineAnimationRight 0.2s linear infinite;
pointer-events: none;
opacity: 1;
animation: hide 0.9s linear 1s 1 forwards;
}

@keyframes hide {
to {
opacity: 0;
}
}

:root {
        text-shadow: 0px 0px 6px;
        --darker-red: ;
        --darker-red: ;
        --lighter-red: ;
        --even-lighter-red: ;
        --lightest-red: ;
        --dark-yellow: ;
        --light-yellow: ;
        --even-lighter-yellow: ;
        --green: ;
    }

    .profile{
        background-color: #050308E3;
        border-radius: 30px;
        border: 7px solid white;
        box-shadow: 0px 0px 13px black;
    }
    
    .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;
    }
    
    main {
        background-color: transparent;
        color: white;

<img 
src="https://i.pinimg.com/originals/cf/82/7d/cf827df3ef4282c0a5fee800cbcaff1b.gif"/>

    }
    
    body {
        background-image: url(https://64.media.tumblr.com/3b8ef3909cbd35e623d50204cfb4aafc/7240eda1ab62b8d6-ab/s1280x1920/29ca5c4eeb6728ec012a23024157e3a8951dc08d.jpg)
    }
    
    a {
        color: #FFFFFF;
    }
    
    a:hover {
        animation:blinkingText 1.5s infinite;
    }
    
     nav .top {
        background-color: #ffffffE3;
        height: 100px;
        background-size: 796px;
        background-position: center;
        border-radius: 5px;
        position: relative;
        border: 7px solid white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    } 
    
    nav .top {
        border-color: pink;
        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;
    }
    
    nav .links {
        background-color: transparent;
        text-align: center;
        margin-top: 9px;
        margin-bottom: 8px;
    }
    
    .profile-pic {
        border: 6px solid white;
        box-shadow: 0px 0px 7px black;
        border-radius: 30px;
        overflow: hidden;
    }
    
    .profile-pic {
        border-color: pink;
        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 .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: white;
        border-width: 5px;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: 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;
    }
    
    table.details-table td {
        background-color: #050308 !important;
        opacity: 100%;
        border-radius: 5px;
    }
    
    .heading {
        padding: 10px 0 !important;
        text-align: center;
        background-color: #050308 !important;
        border-radius: 10px;
    }
    
    .heading {
        animation:blinkingText 2.5s infinite;
    }
    
    table.comments-table td {
        background-color: #050308 !important;
        border: 1px #1b1b1c solid;
        box-shadow: 0px 0px 5px #1b1b1c;
        overflow
    }
    
    .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;
    }
    
    .blog-preview p {
        font-size: 1.2rem;
    }
    
    .online {
        color: green;
        font-weight: bold;
        font-size: 80%;
    }
    
    .online img {
        content: url(https://64.media.tumblr.com/c15e1b19b3a28703251e3d8bf1a19cd7/6a9f82c7ed6d0c50-94/s1280x1920/9fdd39982a95a62dd8892ac16732156f41d98dfe.pnj);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }
    
    .icon, .award img {
        content: url(https://64.media.tumblr.com/184db5a7337d3fe790ca29aafcc52ffd/224a089e58d83c00-e2/s2048x3072/f9e6f2df3c5c75adbfa76db26ffde9bc2b465a89.pnj);
        height: 26px;
        width: 23px;
    }
    
    .profile .blurbs .section h4 {
        margin: 0;
        color: white;
    }
    
    @keyframes blinkingText{
        0%{     color: #eb3434;    }
        12.5%{    color: #eb3434; }
        37.5%{    color: #eb3434; }
        50%{    color: #ebd834; }
        62.5%{    color: #ebd834; }
        75%{    color: #ebd834; }
        87.5%{    color: #1ee33e; }
        100%{    color: #1ee33e; }
    }
    
    .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;
    }


    .count {
        color: blueviolet;
        text-shadow: 0px 0px 6px;
        animation:blinkingText 0.3s infinite;
    }
    
    .profile-info {
        background-color: #050308;
        height: 100px
        width: 100px
        border: 7px solid;
        border-radius: 10px
        border-width: 6px
        box-shadow: 0px 0px 7px black;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }
    
    .profile-info {
        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 .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;
        animation:blinkingText 3.2s infinite;
    }
    
     footer {
        border-radius: 2px;
        background-color: #050308E3; !important
        display: block !important;
        position: relative;
        border: 3px solid white;
        border-width: 6.5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    
    footer {
        border-color: 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;
    }
    
@keyframes flash_border {
  0% {
    border-color: #eb3434;
  }
  12.5% {
    border-color: #eb3434;
  }
  37.5% {
    border-color: #ebd834;
  }
  50% {
    border-color: #ebd834;
  }
  62.5% {
    border-color: #cceb34;
  }
  75% {
    border-color: #5beb34;
  }
  87.5% {
    border-color: #1ee33e;
  }
  100% {
    border-color: #eb3434;
  }
}

@-webkit-keyframes flash_border {
0% {
    border-color: red;
  }
  16% {
    border-color: red;
  }
  32% {
    border-color: yellow;
  }
  48% {
    border-color: lime;
  }
  64% {
    border-color: green;
}

@-moz-keyframes flash_border {
  0% {
    border-color: red;
  }
  16% {
    border-color: red;
  }
  32% {
    border-color: yellow;
  }
  48% {
    border-color: lime;
  }
  64% {
    border-color: green;
  }
}

cursor: url(https://64.media.tumblr.com/abb6231864a748f19d26c8b6228b286a/522e468b38a11f91-b2/s2048x3072/6962a986bc8a2edf0207e7e551556dae4e956d68.pnj), auto;

</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 2 of 2 comments ( View all | Add Comment )
: luna !? ੈ✩‧₊˚
1691904183
what does the layout look like?
Report Comment
mechanical_bride
1669942521
this is so cool!
Report Comment