Guitar Hero 3/Arcade Layout

Tags: emo, 2000s, 2007, guitar hero, the used

Description:

It took me a while to work on this, but I finally did it. I created a Guitar Hero 3: Legends of Rock layout with the 2007 song "Pretty Handsome Awkward" by The Used as the background music, rawr XD. This is the 1st layout I've made, so let me know if I need to fix anything (such as the text colors). 12/21/2023 update: Added a 15 second loading page and a marquee of the star power (light blue) notes to the layout. :)

Preview:

click on the image for a larger preview

Code:

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

<style>body:before{content:" ";height:100vh;width:100vw;display:block;position:fixed;top:0;left:0;z-index:100;background-image:url('https://i.postimg.cc/0QgSst4n/ezgif-com-video-to-gif-converted-1.gif');background-size:cover;background-repeat:no-repeat;background-position:center;animation:yourAnimation 15s ease 0s 1 normal forwards;pointer-events:none}@keyframes yourAnimation{0.0%{opacity:1}75%{opacity:1}100%{opacity:0}}</style> 

<div class="snowflakes">
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
<div class="snowflake"><img src="https://i.postimg.cc/wMWWB8LL/guitar-hero-star-power-at-Duck-Duck-Go-1-removebg-preview.png"/></div>
</div>

<style>
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}



</style>




<style>

nav .top .left .logo{
        content: url(https://cdn.discordapp.com/attachments/1064462871947378729/1100305609745768500/logoaso.png);
    }

    body {
        background-image: url(https://i.postimg.cc/6qpjtNw2/Guitar-Hero-3-DLC-Pretty-Handsome-Awkward-Expert-100-FC-309-236-You-Tube.png);
        background-size: 1349px;
        background-attachment: fixed;
        background-position: center;
        }
        
        
    main {
        background: transparent;
    }
     .col.w-40.left h1{
        margin-bottom: 0;
    }
     .profile h1 {
        /*padding-left: 5px;*/
        /*font-size: 12px;*/
         color: plum;
        text-shadow: 0 0 5px #fff;
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);

    
    border-radius: 6px 6px 0px 0px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
        
    }
    
    .profile .mood p{
         color: darkmagenta;
        text-shadow: 0 0 5px #fff;
    }
    .profile .mood{
    padding-top: 5px;
    padding-left:5px;
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
    }
    
     .general-about .profile-pic img {
         padding-left:15px;
        padding-top:15px;
        height: 140px;
    }

    .general-about {
    height: 152px;
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 0px 0px 6px 6px;
     border-style: outset;
        border-width: 1px;
        border-color: rgba(129, 124, 124, 0) #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
}
    .general-about .details {
        height: 145px;
        background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        margin-top:;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        
    }
    
.profile .contact, .profile .url-info,.profile .table-section {
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
}

.profile .contact .heading{
    background: transparent;
    text-align: left;
}
.profile .contact .heading h4, DIV.url-info > P:nth-child(1) > B, DIV.blog-preview > H4{
    color: black;
    text-shadow: 0 0 5px #fff;
}


    .blog-preview {
    box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6px;
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
    }
    
    .profile .table-section{
         box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6px;
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        margin-bottom: 20px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
    }
    
    .profile .table-section .heading{
        background:transparent;
          color: black;
    text-shadow: 0 0 5px #fff;
        
    }
    table.details-table{
         background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        margin-top:;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        
    }
    .table-section td:first-child, td:first-child a:not(.comments-table td a) {
   background: ;
   color: white;
}
    
    .profile .blurbs{
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        padding-bottom: 3px;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
        
    }
    .profile .blurbs .heading{
        background:transparent;
         color: darkorchid;
    text-shadow: 0 0 5px #fff;
        
    }
    .profile .blurbs .section h4{
         color:violet;
    }
    .profile .blurbs .inner{
         background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
        
    }
    
    .profile .friends{
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
        padding-bottom:3px;
        margin-bottom:20px;
    }
    .profile .friends .heading{
        background:transparent;
         color: orchid;
    text-shadow: 0 0 5px #fff;
        
    }
    .profile .friends .inner{
        background:#f2f2f2;
        margin-right: 3px;
        margin-left: 3px;
        padding-top: 4px;
        border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
    }
    .count{
        color:orchid;
    }
.comments-table td{
    background:transparent !important;
      border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd #ddd #eef;
color:lime;
        
}

    footer {
        box-shadow: 0 15px 20px rgba(129, 124, 124, 0.2);
    backdrop-filter: blur(14px);
    background-color: rgba(255, 255, 255, 0.2);
    
    border-radius: 6px;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ddd rgba(129, 124, 124, 0) #eef;
        box-shadow: 0px 1px 3px 3px rgba(70,70,70,0.25);
        padding-bottom:3px;
    }
   .table-section td:first-child, td:first-child {
   background: #ddd;
   color: white;
}
.table-section td {
   background-color: white;
     border-style: outset;
        border-width: 1px;
        border-color: #eef #ccc #ccc #eef;
        
}

nav .top{
    background: #BA55D3;
}

nav .links{
    background:linear-gradient(white 7px, gray);
    text-align:center;
    border-bottom:solid black 2px;
    border-top: solid black 2px;
}


nav .links a {
   color: purple;
   font-size: 12px;
   margin:4px;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "┊★┊" ;
    color: black;}

</style>

<div><iframe src="https://www.youtube.com/embed/NrqOf-RNhfk//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" data-ruffle-polyfilled="" width="0" height="0" frameborder="0">
</iframe></div>

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

MetalHeart	1703305781 COOL! Report Comment
Jesterrr	1703212368 I took the song embed, it's one of my favs Report Comment
destiny zapata	1689918266 AWESOME!! wish i knew how to code. very talented and awesome looks great Report Comment
frankie!	1689694713 uzing!1!111 ^__^ Report Comment
pickledtoaster	1686851856 using >_< Report Comment
Zee ✩	1686177991 using! Report Comment
ㅤ/ᐠ - ˕ -マ nikolai .ᐟ	1684884261 uzing!! :3 Report Comment
✖ Nathan Annihilation ✖	1684199940 this is sickkk Report Comment
⭑Arlene⭑	1684012182 using Report Comment