Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
soundonacid

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

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

<style>
<style>

/* Hide default FriendRewind layout */
.profile, .left, .right, .blurbs, .friends, .contact, .extended {
display:none!important;
}

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

/* Main */
#rewindspace{
position:absolute;
top:0;
left:0;
width:100vw;
min-height:100vh;
background:#e5e5e5;
z-index:9999;
}

/* 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:white;
width:1100px;
margin:12px auto;
padding:10px 20px;
border-radius:25px;
font-size:12px;
}

/* Artist Bar */
#artist{
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{
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;
}

/* Box */
.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;
}

/* Avatar hijack */
#pfp img{
width:220px;
border-radius:4px;
}

</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 class="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 class="navbtn">Badges</div>

</div>

<div style="flex:1">

<div class="box">
<b>General Info</b><br><br>
<div class="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 class="box">
<b>Stream</b><br>No recent updates.
</div>

</div>

<div style="width:300px">

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

</div>

</div>
</div>

<script>

/* Pull FriendRewind data */
document.querySelector("#pfp").append(document.querySelector(".avatar img"));
document.querySelector(".username").innerText=document.querySelector(".profile h1").innerText;
document.querySelector(".bio").append(document.querySelector(".about"));
document.querySelector(".details").append(document.querySelector(".details"));

</script></style>