← Back to Layouts
Smash Bros Melee

Name: FriendRewind
Author: FriendRewind
Author: Gray
Category: Games
Created: July 3, 2026
Layout inspired by the Super Smash Bros. Melee menus
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>

body {

background-image: url("https://friendrewind.com/uploads/gallery/13697/img_6a47f5bfd8f004.60060620.webp") !important;

background-color: black !important;

background-attachment: fixed !important;

margin: 0;

padding: 0;

}

main{
     
     background-color: rgba(0, 0, 0, 0.7) !important;
}
    main{

    color: #b8babc !important;
        
    }

  .top{
        
    background-color:  #000000 !important;
  } 
    .top{
        
    color: #FFCA00;
        
    } 
    .top input{
        
    background-color: #505050 !important;
    border-color:#2c2c2c;
    }
        .links{
        
    background-color: #000000 !important;

        
    }
    button{
        
    background-color: #000000 !important;
    color: #FFCA00; 
    border-color: #FFCA00;
    }

    table.details-table{

        
    background-color: gold !important;
     


}
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
border: 3px solid gold !important;
background-image: url('https://files.catbox.moe/sjz3cj.png') !important; 


   
    }
    .details-table td:first-child{
        background: rgba(0, 0, 0, 0.9) !important;
    }
    
    .profile .details-table td{
     
     background: rgba(0, 0, 0, 0.9) !important;
     background-image: url('https://files.catbox.moe/sjz3cj.png') !important;   
   
    }

        .comments-table td{
        
    background: rgba(0, 0, 0, 0.7) !important;

        
    }
    .contact .heading{
        
    background: rgba(0, 0, 0, 0.1) !important;
    }
    .table-section .heading{
        
    background: rgba(0, 0, 0, 0.1) !important;
    
    }
    .blurbs .heading{
        
    background: rgba(0, 0, 0, 0.1) !important;
    
    color: #FFCA00 !important;   
    }
    .profile .blurbs .section h4{
        color: #1228bc !important;
    }
    
    .profile .blurbs .heading, .profile .friends .heading {
        color:#FFCA00;
    }
    
    .count {
        color:#FFCA00;
    }
    
    .friends .heading{
    background: rgba(0, 0, 0, 0.1) !important;    


    }
    .profile .contact .heading h4{
        color:#FFCA00;
    }
    
    .profile .table-section .heading h4{
        color:#FFCA00;
    }
    
.url-info{display: none !important;}
a{
        
    color: #FFCA00 !important;
        
    }
    a:hover{
        
    color: #FFCA00 !important;
        
    }

    .friends-grid p{
        
    color: #ffffff !important;
        
    }

    .top{

        border-radius: 15px 15px 0 0 !important;

    }
    main{

        border-radius: 0 0 15px 15px !important;

    }
    .general-about .profile-pic img{
        border-radius: 5%;
    }
    .profile .friends .person img:not(.icon){
        border-radius: 5%;
    }
    nav, footer, .profile .contact{
        border-radius: 5px 5px 5px 5px;
        border-color: #FFCA00;
    }
    .profile .table-section{
        border-radius: 5px 5px 5px 5px;
        border-color: #FFCA00;        
    }   
    table.details-table{
                border-radius: 0px 0px 1px 1px;
    }
    table.comments-table{
        border-radius: 5px 5px 5px 5px;
        border-color: #FFCA00; 
        background-image: url('https://files.catbox.moe/1iqq2l.png')  
    }
    .comment-replies{
        border-radius: 5px 5px 5px 5px;
        border-color: #FFCA00; 
        background-image: url('https://files.catbox.moe/1iqq2l.png')
    }

   .comment-reply{
        background-color: rgba(0, 0, 0, 0.7);
}
     footer{
background-color:rgba(0, 0, 0, 10) !important;
 color: #0e21a5;

}
.logout-btn, .logout-form{
color:#FFCA00;
}
.logout-btn:hover{
color:#FFCA00 !important;
}

.profile-info{
        border-radius: 5px 5px 5px 5px;
        border-color: #FFCA00;
    }
</style>




<style>h1{color: red !important;}</style>
<style>body{color: silver !important;}</style>
<style>body{font-family: segoe ui semibold !important;}</style>
<style>

.profile-pic > img { display:none; }

.profile-pic:after { background-image: URL("https://files.catbox.moe/z4zywh.png"); display: inline-block; content:"" }

.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */

.general-about .profile-pic:after { background-size: cover; width: 120px; height: 170px; } /* profile */ 

</style>

<style>.online { visibility: hidden; } .online img { content: url("https://files.catbox.moe/b9juua.png"); animation-name: none; visibility: visible; height: 43px; width: 90px; }</style>

<style>

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:#FFCA00 !important;
   letter-spacing:normal !important;
   font-weight: bold !important;
   filter: brightness(100%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
    content: var(--topic6);
}
</style></style>