Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
isa(terminator)

Author: graftoyo
Category: alternative
Created: May 18, 2026
Comments (0)

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

<style>
<style> 

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

*{
  box-sizing:border-box;
}

html{
  overflow-x:hidden;
}

body{
  margin:0 !important;
  padding:0 !important;

  font-family:'Cormorant Garamond', serif !important;

  color:#f2efeb !important;

  background:
    linear-gradient(rgba(8,8,8,.45), rgba(8,8,8,.78)),
    url("https://files.catbox.moe/voml7i.jpg") fixed center/cover !important;

  overflow-x:hidden !important;

  filter:
    contrast(.96)
    brightness(.94)
    saturate(.82)
    sepia(.06);

  position:relative;
}

body::before{
  content:"";

  position:fixed;
  inset:0;

  background:
    url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

  opacity:.08;

  pointer-events:none;

  z-index:0;
}

body::after{
  content:"";

  position:fixed;
  inset:0;

  background:
    radial-gradient(circle at center,
    transparent 35%,
    rgba(0,0,0,.55) 100%);

  pointer-events:none;

  z-index:0;
}

main,
section,
div,
table,
tbody,
tr,
td,
nav,
footer,
aside{
  background:transparent !important;
}

nav{
  position:relative;
  z-index:20;
}

nav .top{
  background:
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.75)),
    url("https://files.catbox.moe/d971kh.jpg") !important;

  background-size:cover !important;
  background-position:center !important;

  height:320px !important;

  border-bottom:
    1px solid rgba(255,255,255,.05);

  box-shadow:
    0 15px 40px rgba(0,0,0,.45);
}

nav .links{
  background:
    rgba(16,13,13,.90) !important;

  backdrop-filter:blur(4px);

  border-top:
    1px solid rgba(255,255,255,.04);

  border-bottom:
    1px solid rgba(255,255,255,.04);

  padding:10px !important;

  text-align:center;
}

nav .links a{
  color:#f4f1ec !important;

  font-size:14px !important;

  letter-spacing:.7px;

  margin:0 8px;
}

nav .links a:hover{
  color:#b34b4b !important;
}

main{
  width:min(1450px,92%) !important;

  margin:
    -80px auto 40px auto !important;

  padding:28px !important;

  position:relative;

  z-index:10;

  background:
    rgba(15,12,12,.58) !important;

  backdrop-filter:blur(6px);

  border:
    1px solid rgba(255,255,255,.05);

  box-shadow:
    0 25px 60px rgba(0,0,0,.55);

  overflow:hidden;
}

.profile{
  display:flex !important;

  flex-direction:row-reverse !important;

  gap:30px !important;

  align-items:flex-start;

  width:100% !important;

  margin:0 !important;
}

.profile .left{
  flex:1 !important;

  min-width:0;
}

.profile .right,
.sidebar{
  width:320px !important;

  flex-shrink:0;
}

.blurbs,
.comments,
.interests,
.profile .right,
.contact,
.mood,
.profile .table,
.table-section,
.profile-info,
.url-info{
  position:relative;

  background:
    rgba(20,16,16,.78) !important;

  border:
    1px solid rgba(255,255,255,.05) !important;

  border-radius:4px;

  padding:22px !important;

  margin-bottom:22px !important;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(0,0,0,.34) !important;
}

.blurbs::after,
.comments::after,
.interests::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.02),
      transparent 40%
    );

  pointer-events:none;
}

.profile h1{
  font-family:'Rock Salt', cursive !important;

  font-size:30px !important;

  color:#ffffff !important;

  text-align:center;

  margin-bottom:18px !important;

  transform:rotate(-1deg);

  text-shadow:
    0 0 15px rgba(0,0,0,.9);
}

h2,
h3,
h4,
strong,
b{
  color:#ffffff !important;

  letter-spacing:1px;
}

p,
span,
li,
td,
div{
  color:#f1ece7 !important;

  text-shadow:
    0 0 4px rgba(0,0,0,.85);
}

a,
a:visited{
  color:#f3efea !important;

  text-decoration:none !important;

  transition:.25s ease;
}

a:hover{
  color:#b64a4a !important;

  opacity:.78;
}

.online{
  color:#b64a4a !important;

  filter:none !important;
}

.interests h2::after{
  content:" basement tapes";

  font-family:'Rock Salt', cursive;

  font-size:10px;

  margin-left:8px;

  color:#b64a4a;

  opacity:.45;
}

.comments h2::after{
  content:" late night voicemail";

  font-family:'Rock Salt', cursive;

  font-size:10px;

  margin-left:8px;

  color:#b64a4a;

  opacity:.45;
}

.profile-info{
  background:
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.55)),
    url("https://files.catbox.moe/voml7i.jpg") !important;

  background-size:cover !important;
  background-position:center !important;

  min-height:220px;
}

.url-info{
  background:
    linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.55)),
    url("https://files.catbox.moe/d971kh.jpg") !important;

  background-size:cover !important;
  background-position:center !important;

  min-height:260px;
}

.profile .contact .heading,
.profile .table-section .heading,
.profile .blurbs .heading,
.profile .friends .heading,
.comments .heading,
.interests .heading,
.mood .heading{
  background:
    rgba(18,14,14,.92) !important;

  border:
    1px solid rgba(255,255,255,.04) !important;

  color:#fff !important;
}

table{
  width:100%;

  border-collapse:collapse;
}

td{
  background:
    rgba(30,22,22,.74) !important;

  border:
    1px solid rgba(255,255,255,.03) !important;

  padding:10px !important;
}

td:first-child{
  background:
    rgba(52,30,30,.86) !important;

  width:35%;

  color:#fff !important;
}

img{
  max-width:100%;
}

.profile .friends .person img:not(.icon),
.comments img{
  border:
    1px solid rgba(255,255,255,.08);

  filter:
    sepia(.08)
    brightness(.94);

  box-shadow:
    0 6px 18px rgba(0,0,0,.35);
}

html::before,
html::after{
  content:"";

  position:fixed;

  background-size:contain;
  background-repeat:no-repeat;

  pointer-events:none;

  z-index:9999;
}

html::before{
  width:220px;
  height:220px;

  top:20px;
  right:20px;

  opacity:.85;

  transform:rotate(8deg);

  background-image:
    url("https://files.catbox.moe/mj187l.png");
}

html::after{
  width:230px;
  height:230px;

  bottom:7px;
  right:497px;

  opacity:.75;

  background-image:
    url("https://files.catbox.moe/pglyjc.gif");

  background-size:contain;
  background-repeat:no-repeat;
  background-position:bottom right;
}

.blurbs:hover,
.comments:hover,
.interests:hover{
  transform:
    translateY(-2px);

  transition:.35s ease;

  box-shadow:
    0 18px 40px rgba(0,0,0,.42) !important;
}

*{
  outline:none !important;
}

::-webkit-scrollbar{
  width:10px;
}

::-webkit-scrollbar-track{
  background:#0d0b0b;
}

::-webkit-scrollbar-thumb{
  background:
    rgba(255,255,255,.14);
}

::-webkit-scrollbar-thumb:hover{
  background:
    rgba(182,74,74,.45);
}

@media screen and (max-width:900px){

  main{
    width:96% !important;

    margin:
      -40px auto 20px auto !important;

    padding:16px !important;
  }

  .profile{
    flex-direction:column !important;
  }

  .profile .right,
  .sidebar{
    width:100% !important;
  }

  nav .top{
    height:220px !important;
  }

  html::before{
    display:none;
  }

  html::after{
    width:140px;
    height:140px;

    bottom:5px;
    left:10px;
  }

  .blurbs,
  .comments,
  .interests,
  .profile .right{
    padding:16px !important;
  }

}

.profile h1{
  visibility:hidden !important;
}

nav .left img {
  content: url("https://i.postimg.cc/MHxpJjvt/V1.png");
}


.online {
content: url(https://files.catbox.moe/bb97ow.gif);
}


</style></style>