← Back to Layouts
ftgyh

Name: FriendRewind
Author: FriendRewind
Author: ErenYeager
Category: :D
Created: August 10, 2026
hnjl
Comments (0)

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

<style>
<style>
/* Generated by FriendRewind.com Visual Builder */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes:wght@400;700&display=swap');

* { cursor: url(https://cdn.cursors-4u.net/previews/hello-kitty-hello-kitty-914ded28-preview-32.webp), auto !important; }

body, body.profile-page {
  background-image: url("https://i.pinimg.com/736x/6c/c3/b0/6cc3b053d2be1d2a449b0d466de82702.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #e1899f !important;
  font-family: 'Great Vibes', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

.profile-pic{position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;}
.profile-pic img{position:absolute;top:9.0%!important;left:7.6%!important;width:84%!important;height:85%!important;object-fit:cover;z-index:1;clip-path:inset(2.2% 2.6% 3.2% 2% round 16% 20% 22% 16%)!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/1/img_68e46a2e779929.30369018.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

@keyframes boxFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} .contact{animation:boxFloat 3s infinite ease-in-out;}

@keyframes boxFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}} .table-section, .friends, .blurbs, .module, .profileInfo{animation:boxFloat 3s infinite ease-in-out;}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://i.pinimg.com/736x/83/ad/e5/83ade50feeb340a7a062f7d4503eddee.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.profile {
  background-image: url("https://i.pinimg.com/1200x/1d/07/2f/1d072f32fcf20e7dadaec395187405ad.jpg") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: top center !important;
}

.myspace-header .main-nav li a {
  color: #fa0000;
}

.myspace-header .main-nav li a:hover {
  color: #54071e;
}

.contact {
    border: 1px solid #5f0718 !important;
    border-radius: 5px !important;
  }

.contact .heading {
    background-color: #5f0718 !important;
    color: #000000 !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 1px solid #40071b !important;
    border-radius: 5px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #40071b !important;
    color: #000000 !important;
  }

.profile, .table-section, .module, .blurbs, .section, .profileInfo, .friend-space, .badges-section, .url-info, .contact, .interests {
  color: #e1899f !important;
}

h1, h2, h3, h4, h5, h6, .table-section h4, .module h4, .blurbs h4, .section h4 {
  color: #d9abb6 !important;
}

a, .profile a, .table-section a, .module a { color: #cc0000 !important; }

.contact {
  background-image: url("https://i.pinimg.com/736x/1b/36/99/1b36991ca9f5f1c7af5a7d87a8648e5a.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.url-info {
  background-image: url("https://i.pinimg.com/736x/0b/7d/d4/0b7dd45ba247c3b16bcc0ba563d7a379.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blog-preview {
  background-image: url("https://i.pinimg.com/736x/bb/cc/70/bbcc70af95547e9bb54b128cd522b7f5.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blurbs {
  background-image: url("https://i.pinimg.com/736x/f0/c8/46/f0c84650dd07f9a1e46d7dec06875547.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.friends {
  background-image: url("https://media1.tenor.com/m/hdVDLbT1oW4AAAAC/kuromi-cute-kuromilove.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.comments-table td {
  background-image: url("https://i.pinimg.com/736x/d3/48/dd/d348dd6322742d70f7d9af8e4a6e0a7d.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
</style>





<style>
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 125vh;

  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSiE_GZEDj6-Iw4MtOJaCBx3y_MlkFU6GZxMLzTa_VEenWB6uDeqOTmGZI&s=10");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 999999;
  pointer-events: none;

  animation: loadingScreen 1s ease forwards;
}

@keyframes loadingScreen {
  20% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>







<style>
/* Change the color of the navigation links bar */

.main-nav-container {
  background-color: #fff0f8 !important;
  background-image: none !important;
}
</style>




<style>
.general-about .details p:nth-of-type(2) {
  position: relative !important;
  width: fit-content !important;
  margin: 12px auto !important;
  padding: 8px 14px !important;

  background: #640034 !important;
  border: 2px solid #540000 !important;
  border-radius: 15px !important;
}

.general-about .details p:nth-of-type(2)::after {
  content: "" !important;
  position: absolute !important;
  bottom: -9px !important;
  left: 25px !important;

  border-width: 9px 9px 0 !important;
  border-style: solid !important;
  border-color: #540000 transparent transparent !important;
}
</style>





<style>
*::-webkit-scrollbar {
  width: 12px !important;
}

*::-webkit-scrollbar-track {
  background: #E3A8C8 !important;
}

*::-webkit-scrollbar-thumb {
  background: #99000B !important;
  border: 2px solid #fff0f8 !important;
  border-radius: 10px !important;
}
</style>







<style>
/* SPARKLE IMAGE AROUND PROFILE PICTURE */

.profile-pic {
    position: relative !important;
    overflow: visible !important;
}

.profile-pic::after {
    content: "" !important;

    position: absolute !important;
    top: -30px !important;
    left: -30px !important;

    width: calc(100% + 60px) !important;
    height: calc(100% + 60px) !important;

    background-image: url("https://media3.giphy.com/media/v1.Y2lkPTZjMDliOTUyNXpvbjI2ajdwbnRyOGN3NHB5djhmdmdqaDd3MDQ2dmk5YjVqcG42MCZlcD12MV9zdGlja2Vyc19zZWFyY2gmY3Q9cw/QAIDj9nTtP9UfaB87e/giphy.gif") !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    opacity: 0 !important;
    transform: scale(.85) !important;

    transition:
        opacity .25s ease,
        transform .25s ease !important;

    pointer-events: none !important;
    z-index: 9999 !important;
}

/* SHOW SPARKLES ON HOVER */

.profile-pic:hover::after {
    opacity: 1 !important;
    transform: scale(1) !important;
}
</style>





<style>
/* HEART-SHAPED PROFILE PICTURE */

.profile-pic {
    width: 180px !important;
    height: 165px !important;
    overflow: visible !important;
}

.profile-pic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    clip-path: polygon(
        50% 100%,
        8% 60%,
        2% 45%,
        3% 30%,
        10% 18%,
        21% 10%,
        34% 10%,
        44% 16%,
        50% 25%,
        56% 16%,
        66% 10%,
        79% 10%,
        90% 18%,
        97% 30%,
        98% 45%,
        92% 60%
    ) !important;

    filter:
        drop-shadow(3px 0 0 #ff9fc7)
        drop-shadow(-3px 0 0 #ff9fc7)
        drop-shadow(0 3px 0 #ff9fc7)
        drop-shadow(0 -3px 0 #ff9fc7) !important;
}
</style></style>