Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
sound.on.acid

Author: BloxHead, The Creator
Category: Acid
Created: January 30, 2026
Sounds Like: Acid
Comments (0)

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

<style>
<style>

/* Base page */
body{
background:#e5e5e5!important;
font-family:Arial,Helvetica,sans-serif!important;
}

/* Only hide small sections, NOT whole profile */
.blurps,.contact,.extended{display:none!important;}

/* Wrapper injected into page flow */
#rewindspace{
width:100%;
background:#e5e5e5;
padding-bottom:40px;
}

/* Top bar */
#topbar{
background:#000;
color:#fff;
padding:10px 40px;
display:flex;
justify-content:space-between;
font-size:13px;
}

#logo{font-size:22px;font-weight:bold;}

/* Music nav */
#musicnav{
background:#fff;
max-width:1100px;
margin:12px auto;
padding:10px 20px;
border-radius:25px;
font-size:12px;
}

/* Artist bar */
#artist{
max-width:1100px;
margin:auto;
background:linear-gradient(#f2f2f2,#dadada);
padding:15px;
display:flex;
align-items:center;
gap:15px;
border-radius:6px;
}

#signup{
background:#d8ff00;
padding:6px 18px;
border-radius:4px;
border:1px solid #aaa;
font-weight:bold;
}

/* Grid */
#grid{
max-width:1100px;
margin:15px auto;
display:flex;
gap:15px;
}

/* Left */
#left{width:220px;}

.navbtn{
background:linear-gradient(#fafafa,#ddd);
padding:8px;
margin:5px 0;
border-radius:5px;
border:1px solid #bbb;
font-weight:bold;
}

.navbtn.active{
background:linear-gradient(#666,#444);
color:white;
}

/* Boxes */
.box{
background:white;
border:1px solid #ccc;
border-radius:6px;
padding:10px;
margin-bottom:12px;
font-size:12px;
}

/* Flash */
.flash{
height:260px;
background:linear-gradient(#ff2f2f,#ff9b40);
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:44px;
font-weight:bold;
}

</style>

<div id="rewindspace">

<div id="topbar">
<div id="logo">my_____</div>
<div>Sign up | Login | Browse | Music | Topics | Video | Games</div>
</div>

<div id="musicnav">
Music | My Playlists | Music Videos | Charts | New Releases | Featured Playlists | Music News | Karaoke | Events | For Artists
</div>

<div id="artist">
<div id="pfp"></div>
<h2 id="username"></h2>
<div id="signup">Sign Up</div>
</div>

<div id="grid">

<div id="left">
<div class="navbtn active">Profile</div>
<div class="navbtn">Music</div>
<div class="navbtn">Photos</div>
<div class="navbtn">Stream</div>
<div class="navbtn">Friends</div>
<div class="navbtn">Comments</div>
</div>

<div style="flex:1">

<div class="box">
<b>General Info</b><br><br>
<div id="details"></div>
</div>

<div class="box">
<b>Music</b><br><br>
Run this Flash Player Enabler
<div class="flash">Something went wrong :(</div>
</div>

</div>

<div style="width:300px">

<div class="box">
<b>Bio</b><br><br>
<div id="bio"></div>
</div>

</div>

</div>
</div>

<script>

/* Safe dynamic pulling */
var avatar=document.querySelector("img");
if(avatar){document.getElementById("pfp").append(avatar.cloneNode(true));}

var name=document.querySelector("h1");
if(name){document.getElementById("username").innerText=name.innerTe</style>