Sonic Theme (updated)

Tags: game, cool, sonic, video game, layout

Description:

im back from the dead with a new layout, which is sonic inspired!! feel free to change things u dont like, credit is appreciated. u can view the full thing on my profile! update: changed some things to make layout look a bit cleaner

Preview:

click on the image for a larger preview

Code:

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

<style>
    .contact:after {
        width: 98%;
        height: 167px;
        display: block;
        content: "";
        background-color: transparent;
        background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.nintendojo.com%2Fwp-content%2Fuploads%2F2017%2F08%2FSonic-Gif.gif&f=1&nofb=1);
        background-position: bottom;
        opacity: 100%;
        background-size: 450px;
        border-style: dashed;
        border-color: white;
        border-radius: 7px;
    }
    
    .profile {
        background-image: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2F3.bp.blogspot.com%2F-XDafvqDBAtM%2FUAgtXHlh9iI%2FAAAAAAAAEXM%2FuyXbPrkXf18%2Fw1200-h630-p-k-no-nu%2FBlueCheckerPatternPaper.png&f=1&nofb=1);
        background-size: 900px;
        position: relative;
        border: 3.5px dashed white;
        border-width: 5px;
        border-radius: 20px;
        box-shadow: 0px 0px 10px black;
        display: block;
    }
    
    .profile {
        border-color: white;
        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: white;
  }
  50% {
    border-color: blue;
  }
  100% {
    border-color: white;
  }
}

@-webkit-keyframes flash_border {
0% {
    border-color: white;
  }
  50% {
    border-color: blue;
  }
  100% {
    border-color: white;
  }
}

@-moz-keyframes flash_border {
0% {
    border-color: white;
  }
  50% {
    border-color: blue;
  }
  100% {
    border-color: white;
  }
}


    body {
        background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.gifer.com%2FTrVX.gif&f=1&nofb=1);
        background-size: 1500px;
        background-attachment: fixed;
        background-position: center;
    }
    
    main {
        background-color: transparent;
        color: blue;
    }
    
    :root {
        text-shadow: 1.2px 1.2px 0px white;
        --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://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fs.aolcdn.com%2Fhss%2Fstorage%2Fmidas%2F676c44ef4aa1d78b005e65f8a952e7b2%2F205034593%2Fsonicmaniascreen.gif&f=1&nofb=1);
        height: 423px;
        background-size: 800px;
        background-position: top;
        border-radius: 5px;
        position: relative;
        border: 3.5px dashed 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: 26px;
    }
    
    .profile-pic {
        border-style: dashed;
        border-color: blue;
        box-shadow: 0x 0px 7px cyan;
        border-radius: 100px;
        overflow: hidden;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }
    
        .profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border-color: blue;
        border-radius: 8px;
        box-shadow: 0px 0px 5px cyan;
    }
    
    table.details-table td {
        background-color:  !important;
    }
    
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: transparent !important;
        color: gold !important;
        border-bottom: 2px solid blue;
    }
    
    .container {
        border-radius: 0px 0px 0 0;
        overflow: hidden;
        margin-top: 20px;
        padding: 20px;
    }
    
        table.comments-table td {
        background-color:  !important;
        border: 2px blue solid;
        
    }
    
    .comments-table td:first-child img {
        width: 80px;
        border-radius: 100px;
        border-style: dashed;
        border-color: blue;
        border-width: 3px;
        box-shadow: 0px 0px 7px cyan;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }
    
    .profile .friends .person img {
        border-radius: 100px;
        border-style: dashed;
        border-color: blue;
        box-shadow: 0px 0px 7px cyan;
        animation-name: example;
        animation-iteration-count: infinite;
        animation-duration: 0.8s;
    }
    
        .blog-preview p {
        font-size: 1.2rem;
        font-family: Blippo, fantasy;
    }
    
        .online {
        color: gold;
        font-weight: bold;
        font-size: 98%;
    }
    
    .online img {
        content: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fimages.wikia.com%2Fsonic%2Fimages%2F4%2F43%2FSuper_sonic.gif&f=1&nofb=1);
        height: 2.9em;
        margin-right: 5px;
        animation-name: blink;
        animation-iteration-count: infinite;
        animation-duration: 1s;
    }
    
    .icon, .award img {
        content: url(https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fmedia.giphy.com%2Fmedia%2FyoK20ShoZh25W%2Fgiphy.gif&f=1&nofb=1);
        display: inline-block;
        height: 2.0em;
        width: 2.5em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }
    
    .profile .blurbs .section h4 {
        margin: 0;
        color: gold;
    }
    
        a {
        color: red;
        text-shadow: 0px 0px 1px magenta;
        text-decoration: none;
    }
    
    .comments-table td:first-child {
        background-image: url();
        background-size: 157px;
        padding: 0px;
    }
    
    .count {
        color: red;
        text-shadow: 0px 0px 1px magenta;
    }
    
    .details-table td:first-child {
        background: var(--even-lighter-blue);
        color: gold;
        text-shadow: 1px 1px 0px white;
        font-weight: bold;
        width: 33%;
    }
    
    .profile-info {
        background-image: url('');
        background-size: 500px;
        border: 2px double black;
        box-shadow: 0px 0px 7px red;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 5px;
        margin-bottom: 10px;
    }
    
     .profile .friends .person p {
        color: red;
        text-shadow: 0px 0px 1px magenta;
        font-weight: bold;
        width: 100%;
        word-break: break-word;
        font-size: 100%;
        text-align: center;
    }
    
    footer {
        border-radius: 2px;
        background-color: white; !important
        display: block !important;
        position: relative;
        border: 1px dashed blue;
        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 example {
0% {
transform:translate(0px,0.3px);
}
8% {
    transform:translate(0px,0.5px);
}

16% {
    transform:translate(0px,1px);
}

24% {
    transform:translate(0px,1.5px);
}

32% {
    transform:translate(0px,2px);
}

40% {
    transform:translate(0px,2.5px);
}

48% {
    transform:translate(0px,3px);
}

56% {
    transform:translate(0px,3.5px);
}

64% {
    transform:translate(0px,3px);
}

72% {
    transform:translate(0px,2.5px);
}

80% {
    transform:translate(0px,2px);
}

88% {
    transform:translate(0px,1.5px);
}

96% {
    transform:translate(0px,0.5px);
}

100% {
    transform:translate(0px,0.3px);
}
</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 22 comments ( View all | Add Comment )

ChaosMatt	1701025178 Using!!! Report Comment
Lord Dargos	1700705171 Using Report Comment
Firey	1691953039 you make like HOURS? Report Comment
Aliengaze	1691637489 using ;O Report Comment
Blueh3dge	1689174575 USING TY Report Comment
cloud☁︎	1689023251 Is there a way I can copy the code specifically for the rings replacing the icons in the section where you can add someone as a friend etc? Really want to use that element specifically! Report Comment
DS/Junkware	1688590045 using Report Comment
Alxx X3	1684450484 UZINGG XD Report Comment
LiLMiKE2224	1680790475 This is sick i will use Report Comment
Meztli	1680151202 AAAA THIS IS SO COOL TYSM :D Report Comment
VALEN ☆	1680039553 IM USING THIS!!! Report Comment
Terios	1679897590 using it tysm!! Report Comment
☆ LINK / LINKLE / GRIM	1678922467 using ! Report Comment
tHeQuIcKbRoWnFoX	1671041028 broooooo i love this will use Report Comment
★Mick	1668790597 using this tysm!! Report Comment
MockeryLloyd	1656915463 Using this!!^^ Report Comment
ToasT_HoE	1656133293 Using!! Thanks for the layout! :) Report Comment
Clem	1653613814 using! this is dope as hell dude!! Report Comment
Haydiebear	1650418068 this is sick!! def using it Report Comment
Postaldawg☆	1650404548 THIS IS SO COOL ! Report Comment