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

Astro!! ☆	1732315137 using!! Report Comment
Scott Pilgrim 🎸💫	1728763727 using :D Report Comment hi, scott pilgrim by the real rody lamoree; 1732205438; Report
literallysonic	1727999296 will be using! Report Comment
ChaosDude	1725471631 we will be using 🙏 Report Comment
davi	1725241260 using :]] Report Comment
nam	1723852341 USING Report Comment
Kiro	1723321380 Using!!⭐️ Report Comment
Ronnie	1722294957 Using Report Comment
Ronnie	1722294956 Using Report Comment
Pines_b0y	1720935985 Ussing Report Comment
Madotsuki	1718414602 Using!! Report Comment
Madotsuki	1718414596 Using!! Report Comment
Madotsuki	1718414596 Using!! Report Comment
EpicgamerMCCola	1715515917 Using! Report Comment
Synni	1715479698 using this Report Comment
sonic	1709322141 using! Report Comment
REN !!	1709308393 Using <3 Report Comment
sol	1708799822 omgsies using !! Report Comment
🍍🌴	1707590966 Using this Honestly this layout looks so cool Report Comment
BlueStarBoy	1706812515 Thank you for creating this master piece, totally gonna use! Report Comment