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

Geek	1743120978 USING!! Report Comment
Dan_8	1742768702 Using Report Comment
Ello707	1741111679 using(: Report Comment
Juno	1739650254 using :3 Report Comment
Nina the dream-a	1739471091 using Report Comment
LizzlovesAvi (⁠ ⁠ꈍ⁠ᴗ⁠ꈍ⁠)	1739311613 Usándoooo (⁠≧⁠▽⁠≦⁠) Report Comment
🗯️ anxcao 🗯️	1739228194 usssinnggg Report Comment
knuckalina	1738806807 using!!! Report Comment
Garfield	1738638625 Using. Report Comment
Masonzzz	1738365698 Using!!1!1!:33 Report Comment
Ultamite_bozo	1738355338 using! Report Comment
Loverboy	1738278676 using! Report Comment
cleme	1738201762 using! Report Comment
•𝖒𝖞 𝖇𝖗𝖆𝖎𝖓 𝖎𝖘 𝖗𝖆𝖍•	1738183784 AHHH USING TYSM Report Comment
Borgur	1738033817 using!! Report Comment
Natan021	1737935928 using!! THX!! Report Comment
MonkeyGrrr!!	1737736238 usingggg!! Report Comment
V1SC3RA !!!	1737259985 USINGGG :3 Report Comment
Mr Romantical 🦑	1736789116 Using!! Report Comment
♡ Emerson ♡	1736721733 I'm using thank you ! Report Comment