← Back to Layouts
ektadiary the first

Name: FriendRewind
Author: FriendRewind
Author: ektadiary
Category: Personal
Created: July 25, 2026
entirely an archive.
use it if you want anyways ! probably requires a ton of customization for most profiles
Comments (0)

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

<style>
<div class="tranny" style="width: 100%;height: 200px;top: 0;display: block;z-index: -2;position: absolute;opacity: 30%; right: 0;"><div style="background-color: #5BCEFA;width: 100%;height: 20%;top: 0;display: block;z-index: -2;position: relative;"></div><div style="background-color: #F5A9B8;width: 100%;height: 20%;top: 0;display: block;z-index: -2;position: relative;"></div><div style="background-color: white;width: 100%;height: 20%;top: 0;display: block;z-index: -2;position: relative;"></div><div style="background-color: #F5A9B8;width: 100%;height: 20%;top: 0;display: block;z-index: -2;position: relative;"></div><div style="background-color: #5BCEFA;width: 100%;height: 20%;top: 0;display: block;z-index: -2;position: relative;"></div></div>

<div class="troon" style="width: 50%;height: 400px;top: 37%;display: block;z-index: -2;position: absolute;opacity: 30%;left: 0;"><div style="background-color: #b67fdd;width: 100%;height: 33%;top: 0;display: block;z-index: -2;position: relative;"></div><div style="background-color: white;width: 100%;height: 33%;top: 0;display: block;z-index: -2;position: relative;"></div><div style="background-color: #49821e;width: 100%;height: 33%;top: 0;display: block;z-index: -2;position: relative;"></div></div>



<div class="ibumi"><img src="/proxy/image.php?url=https%3A%2F%2Ffiles.catbox.moe%2Fwkyfq8.webp" loading="lazy"></div>
<div class="koku"><img src="/proxy/image.php?url=https%3A%2F%2Ffiles.catbox.moe%2F5j92xj.png" loading="lazy" width="350px"></div>
<div class="mimi"><img src="/proxy/image.php?url=https%3A%2F%2Ffiles.catbox.moe%2Fwawe4x.png" loading="lazy"></div>
<div class="sitter"><img src="/proxy/image.php?url=https%3A%2F%2Ffiles.catbox.moe%2Fmcu9xq.png" loading="lazy"></div><div class="guiatr"><img src="/proxy/image.php?url=https%3A%2F%2Ffiles.catbox.moe%2Fkt6auj.webp" loading="lazy"></div>
<div class="cok"><img src="https://friendrewind.com/uploads/gallery/17742/img_6a5949502cd660.35262744.gif" loading="lazy" width="180px"></div>
<div class="frimpy"><img src="https://friendrewind.com/uploads/gallery/17742/img_6a594c46739490.31408010.webp" loading="lazy" width="200px"></div>
<div class="trent"><img src="/proxy/image.php?url=https%3A%2F%2Ffiles.catbox.moe%2F9jxv9g.webp" loading="lazy"></div>
<div class="mould"><img src="https://friendrewind.com/uploads/gallery/17742/img_6a596cc554f5a6.66857719.webp" loading="lazy" width="700px"></div>
<div class="worm"><img src="https://friendrewind.com/uploads/gallery/17742/img_6a5971c64349f9.17678671.webp" loading="lazy" width="600px"></div>
<div class="horsehair"><img src="https://friendrewind.com/uploads/gallery/17742/img_6a5987b8b5b600.27201461.gif" loading="lazy" width="130px"></div>
<div class="mag"><img src="https://friendrewind.com/uploads/gallery/17742/img_6a5987bd6f0820.80015240.gif" loading="lazy" width="620px"></div>
<div class="sticks"><img src="/proxy/image.php?url=https%3A%2F%2Ffiles.catbox.moe%2Fpnvqag.webp" width="330px"></div>
<div class="house"><img loading="lazy" src="https://friendrewind.com/uploads/gallery/17742/img_6a5ba87ed69572.78891095.gif" width="165px"></div>
<div class="grh"><img loading="lazy" src="https://friendrewind.com/uploads/gallery/17742/img_6a5c081e0acb68.63285359.webp" width="150px"></div>

<style>
  /*styling for the floating image divs*/
.ibumi{
display:block;
position:absolute;
pointer-events:none;
top: 150px;
  margin-left: 680px;
width:204px;
z-index:25;
}
.koku{
display: block;
  position: absolute;
  pointer-events: none;
top: 640px;
  margin-left: -800px;
  z-index: 25;
  transform: rotate(-13deg);
}
.mimi{
display: block;
  position: absolute;
  pointer-events: none;
top: 1290px;
  margin-left: 600px;
  z-index: 25;
width:380px;
}
.sitter{
display: block;
  position: absolute;
  pointer-events: none;
bottom: 0px;
  margin-left: 450px;
  z-index: 25;
width:470px;
}
.guiatr {
  display: block;
  position: absolute;
  pointer-events: none;
  bottom: 1200px;
  margin-left: -790px;
  z-index: -1;
  width: 800px;
  transform: rotate(-20deg);
filter: hue-rotate(-10deg);
}
  .cok {
display: block;
  position: absolute;
  pointer-events: none;
  top: 60px;
  margin-left: 350px;
  z-index: 600;
  transform: rotate(20deg);
  filter: hue-rotate(60deg) saturate(180%) brightness(120%);
  image-rendering: crisp-edges;
}
  .frimpy {
display: block;
  position: absolute;
  pointer-events: none;
top: 150px;
  margin-left: 280px;
  z-index: 600;
  filter: hue-rotate(-30deg);
}
    .trent{
display: block;
  position: absolute;
  pointer-events: none;
top: 755px;
  margin-left: 420px;
  z-index: 600;
      filter: hue-rotate(-80deg) saturate(180%);
}
    .worm{
display: block;
  position: absolute;
  pointer-events: none;
top: 345px;
  margin-left: 420px;
  z-index: -1;
  filter: hue-rotate(-30deg) blur(0.06rem);
  right: -70px;
opacity: 40%;
}
    .mould{
display: block;
  position: absolute;
  pointer-events: none;
z-index: -1;
  filter: hue-rotate(-70deg);
  left: -150px;
  opacity: 60%;
  transform: rotate(170deg);
top: -90px;
}
    .horsehair{
display: block;
  position: absolute;
  pointer-events: none;
top: -40px;
  margin-left: -575px;
  z-index: 600;
  transform: rotate(-10deg) scaleX(-1);
filter: brightness(120%) saturate(150%) hue-rotate(160deg);
}
.mag{display: block;
  position: absolute;
  pointer-events: none;
  bottom: 863px;
  z-index: -1;
  filter: hue-rotate(-60deg);
  opacity: 60%;
right: -50px;
}
.sticks{
display: block;
  position: absolute;
  pointer-events: none;
top: 250px;
  margin-left: -230px;
  z-index: 20;
  transform: scaleX(-1);
  filter: hue-rotate(50deg) saturate(170%);
}
.house{
display: block;
  position: absolute;
  pointer-events: none;
  top: 990px;
  margin-left: -190px;
  z-index: 600;
  transform: rotate(-70deg);
}
.grh{
display: block;
  position: absolute;
  pointer-events: none;
  top: 1370px;
  margin-left: -100px;
  z-index: 600;
  filter: hue-rotate(-80deg);}
</style>


<style>
 /*hide the interest labels*/
  .details-table > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1), 
  .details-table > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1), 
  .details-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1),
  .details-table > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1),
  .details-table > tbody:nth-child(1) > tr:nth-child(5) > td:nth-child(1), .details-table > tbody:nth-child(1) > tr:nth-child(6) > td:nth-child(1),
  .details-table > tbody:nth-child(1) > tr:nth-child(7) > td:nth-child(1)
  {display:none;}
.details-table > tbody:nth-child(1) > tr:nth-child(4){display:none!important;}
  .offline, .last-login{display:none;}
  img{height:revert-layer ;}
.profile-display{display:none;}
  :root {
  --light-gray: #f2f0f0;
  --gray: #e3e3e3;
  --dark-gray: #919191;
  --darker-gray: #545454;
  --logo-blue: #ad1e46;
  --darker-blue: #1E40AF;
  --lighter-blue: rgb(102, 153, 204);
  --even-lighter-blue: #BFDBFE;
  --lightest-blue: ;
  --red: #FF0000;
  --dark-orange: #550030;
  --light-orange: #57c9ae;
  --even-lighter-orange:#f4ffe7;
  --strange-yellow: #2d5957;
  --green: #34D399;
  --light-green: #E6F8DD;
  --medium-green: #A0C99C;
  --dark-green: #1a010c;
}
  .myspace-header{max-width: inherit!important;}
body{background:url(https://files.catbox.moe/5vhe28.webp); padding-bottom: 0px !important;
  margin-bottom: 50px !important;}
  .col.w-40.left, body.profile-page:not(.layout-navcss):not(.layout-navbg) .row.profile .col.left{padding-left:7px!important; }
  .col.right, body.profile-page:not(.layout-navcss):not(.layout-navbg) .row.profile .col.right{padding:7px!important; padding-right:7px!important;}
  .master-container{max-width:1250px; border: 6px solid var(--dark-orange);}
  p{font-size: 17px;}
  
 /* main::before{content: "";
  display: block;
  width: 100%;
  height: 200px;
  background-image: url('https://f4.bcbits.com/img/0009148399_102.avif');
  background-size: cover;
  background-position: center center;
    border-bottom: 4px solid var(--dark-orange);
}*/
  body.profile-page{background-color{var(--dark-green);}}
  main{color:var(--even-lighter-orange); padding: 0;}
.profile{
    background-color: var(--dark-green); background:url(https://files.catbox.moe/ety9dw.webp);}
  .myspace-header, .myspace-header .top-nav{background:var(--logo-blue)!important; background-color:var(--logo-blue)!important;  color: var(--even-lighter-orange)!important;}
nav .links a:hover{color: var(--dark-orange) !important;  color: var(--even-lighter-orange)!important;}
html body.layout-bodybg.profile-page div.master-container footer p a:hover{color: var(--even-lighter-orange) !important;}
.main-nav a:hover {
    background-color: var(--dark-orange) !important; color: var(--even-lighter-orange)!important;}
footer .links li:not😊last-child)::after, nav .links li:not😊last-child)::after{content: " ";}
#moreDropdownMenu a:hover, #profileDropdownMenu a:hover{    background-color: var(--dark-orange) !important;}
  .myspace-header .main-nav-wrapper {
    background: var(--dark-orange);
  border:none!important;}
  a{color:var(--logo-blue);} a:hover, a:active{color:var(--dark-orange);}
.profile .friends .person p{color: var(--strange-yellow);} .profile .friends .person p:hover{color:var(--dark-orange);}
  .home-actions .heading, .profile .contact .heading, .profile .table-section .heading, .setting-section .heading{background:var(--light-orange);}
  .home-actions, .profile .contact, .profile .table-section, .profile .url-info, .setting-section{border: 3px solid var(--light-orange);}
}
friends, div#comments.friends {
  border: 3px solid var(--light-orange);
}

  div.row.profile div.col.w-40.left div.table-section.interests div.heading, .contact > div:nth-child(1){color:var(--dark-orange)!important;}
h1{background:var(--light-orange); color:var(--dark-orange);   padding: 3px 0px 0px 9px;}
.general-about{padding-bottom: 140px; border: 3px solid var(--light-orange);}

.general-about .profile-pic img{margin: 7px 0px 7px 7px; border: 2px solid var(--logo-blue);}
.profile .mood p {
  margin: 4px 0 4px 7px;}

.mood, .blog-preview, .myspace-header .dropdown-menu, .inner, .contact, .url-info, .myspace-header .dropdown-menu:hover, .myspace-header .search-input, .general-about{background-color: var(--even-lighter-orange); color:var(--strange-yellow); background-image:url(https://files.catbox.moe/rec8tb.jpg); background-blend-mode: soft-light;}

.mood{border: 3px solid var(--light-orange); color: var(--strange-yellow);}
.blog-preview{
  color: var(--strange-yellow);
  border: 3px solid var(--light-orange);}
h4{margin: 0;
  background: var(--light-orange);
  color: var(--dark-orange);
  padding: 2px 5px 4px 4px;}
.profile-playlist-widget{border-radius:0; color: var(--even-lighter-orange);}
.interests table{margin-bottom: 0!important;}
footer{margin: 0!important; background-color: var(--dark-orange); border-top:none!important; color: var(--even-lighter-orange);}
nav .links{background-color: var(--logo-blue);}
.myspace-header .main-nav li a{border:0!important; color: var(--even-lighter-orange); text-shadow:0!important;}
.links .li{text-shadow: 0 !important;}
.links .li::after{content: " ";}
main-nav navigation:hover{background:red!important;}

.nav-logo.logo{filter: brightness(0) saturate(100%) invert(99%) sepia(86%) saturate(307%) hue-rotate(38deg) brightness(107%) contrast(101%);}
.profile-mood{background: var(--light-orange);
  color: var(--dark-orange);
  padding: 4px; margin:0!important;}
.count{color:var(--logo-blue);}
.icon{display:none;}

.blurbs, .friends{border: 3px solid var(--light-orange);}

 #comments.friends::before{content: "";
  display: block;
  width: 100%;
  height: 85px;
  background-image: url('https://files.catbox.moe/fgjpm6.png');
  background-size: contain;
  background-position: center center;}

div.table-section:nth-child(2) > div:nth-child(2) > p:nth-child(1){margin:0!important;}

html{filter: hue-rotate(-20deg) brightness(90%) saturate(115%) contrast(120%);}
  *{ border-radius: 0!important; box-shadow:none!important;  text-shadow:none!important; 
font-family: "MS PGothic", sans-serif;
cursor: url(https://friendrewind.com/uploads/gallery/17742/img_6a57941c33a214.69485187.webp), auto !important; 
}
.profile-playlist-widget, #profile-playlist-container, #profile-playlist-mount, .profile-playlist-mount{
                max-width: 495px !important; border-radius: 0!important;
              }
col.w-40.eft{ width: 495px!important;}

  .profile-playlist-widget .pp-header h3 { color: var(--even-lighter-orange)!important; }  /* "Profile Tunes" title */
      .profile-playlist-widget .song-info    { color: var(--even-lighter-orange) !important; }     /* song name */
  
.myspace-header .main-nav li:hover {background:var(--dark-orange);}
body.profile-page nav#nav .links li:hover {background:var(--dark-orange);}
.myspace-header .dropdown-menu a{color: var(--logo-blue) !important;}
.myspace-header .dropdown-menu{border: 3px solid var(--logo-blue);}
.myspace-header .search-button{background:var(--dark-orange); color:var(--even-lighter-orange); border: 2px solid var(--dark-orange);}
.myspace-header .search-input{border: 2px solid var(--dark-orange);}

/*#frw-im-button{background-color:var(--logo-blue)!Important; color: var(--even-lighter-orange)!Important;}  #frw-im-button::before{background: none; transition: none!Important; border: 3px solid var(--dark-orange)!Important;} .person-icon-glossy{ background: none; border: 2px solid var(--dark-orange)!Important;} .music-bar::before{background:none;} .music-bar{background-color:black;} */


.volume-slider{ border: 2px solid var(--dark-orange)!Important; background: var(--logo-blue)!Important;} .bar-playlist-container{filter: hue-rotate(125deg);} .bar-im-container{filter: hue-rotate(-30deg);}
  
  .myspace-header .main-nav:after{content:""; background-image: url(https://friendrewind.com/uploads/gallery/17742/img_6a594697662760.18375814.gif); width: 200px;
  background-size: contain;
  filter: hue-rotate(110deg) saturate(150%);
  height: 26px;
  background-position: bottom; margin-top: auto;}

html body.layout-bodybg.profile-page div.master-container main div.row.profile div.col.right div.friends div.inner div#top8-grid.friends-grid div.person a, html body.layout-bodybg.profile-page div.master-container main div.row.profile div.col.right div.friends div.inner div#top8-grid.friends-grid div.person a img.pfp-fallback{margin:0!important;}

.details > p:nth-child(2){height: 22px; overflow: unset;} .pp-equalizer span{background:var(--logo-blue);} .profile-playlist-widget .pp-drag{color:var(--light-orange);}
</style></style>