← Back to Layouts
turquoise

Name: FriendRewind
Author: FriendRewind
Author: HopeUnfiltered
Category: Classic
Created: November 7, 2026
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"electric","pageFont":"Playfair Display","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://i.pinimg.com/1200x/e1/e9/5e/e1e95e4edaf7bae90750c798c366ebad.jpg","pageBgMode":"cover","heroImageUrl":"https://media1.tenor.com/m/5ERoRxMSQqQAAAAC/flowers-anime.gif","profileRowBgImage":"https://media1.tenor.com/m/5ERoRxMSQqQAAAAC/flowers-anime.gif","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */

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

body, body.profile-page {
  background-image: url("https://i.pinimg.com/1200x/e1/e9/5e/e1e95e4edaf7bae90750c798c366ebad.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  font-family: 'Playfair Display', '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:8%!important;left:8%!important;width:84%!important;height:84%!important;object-fit:cover;z-index:1;border-radius:12px!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_69703fa7a68662.03685764.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://media1.tenor.com/m/5ERoRxMSQqQAAAAC/flowers-anime.gif') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.profile {
  background-image: url("https://media1.tenor.com/m/5ERoRxMSQqQAAAAC/flowers-anime.gif") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top center !important;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
image:url('https://media.tenor.com/U2JgCHsRh04AAAAm/butterfly-blue.webp');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://pin.it/4KRVBG4hy') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.profile {
  background-image: url("https://i.pinimg.com/736x/0d/60/1c/0d601c26dcfc1f5f23a1e36d3759776d.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top center !important;
}

.myspace-header .top-nav {
  background: #af94ff;
  background-image: url("https://media.tenor.com/Ca2DSnkPN9IAAAAM/sesame-street-rosita.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.myspace-header .main-nav-wrapper {
  background: #af94ff;
  background-image: url("https://au.pinterest.com/pin/865605990904163593/");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

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

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

.blurbs, .module, .profileInfo, .table-section {
    background-color: #ffffff !important;
    border-radius: 0px !important;
  }

.contact {
    border: 1px solid #a04dff !important;
    border-radius: 8px !important;
  }

.contact .heading {
    background-color: #a04dff !important;
    color: #ffffff !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 3px solid #c261ff !important;
    border-radius: 7px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #c261ff !important;
    color: #ffffff !important;
  }

.contact {
  background-image: url("https://friendrewind.com/uploads/gallery/40366/img_6addd559ebd363.04708782.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.url-info {
  background-image: url("https://friendrewind.com/uploads/gallery/40366/img_6addd556ce9eb2.01170276.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.table-section {
  background-image: url("https://i.pinimg.com/1200x/f5/08/59/f50859afb0d4765815edcb5ba92b5e26.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.tunes {
  background-image: url("https://friendrewind.com/uploads/gallery/40366/img_6addd557479113.00807786.webp") !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/bc/40/2a/bc402a2872f7a044b300ffe62ae5a9b5.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/5e/36/3f/5e363f8de857e57823a989423b2833b6.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.friends {
  background-image: url("https://au.pinterest.com/pin/4601834505669858944/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#comments {
  background-image: url("https://au.pinterest.com/pin/1084945366510267924/") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>

</style>
<style>

#vinyl-gallery * {

    all: unset;

  }

 

  #vinyl-gallery {

    all: initial!important;

    width: 100%!important;

    height: 230px!important;

    margin: 30px 0!important;

    display: flex!important;

    flex-direction: row!important;

    position: relative!important;

    margin-left: -6px!important;

  }

 

  #vinyl-gallery .vinyl {

      all:unset!important;

    perspective: 500px !important;

    width: 18px!important;

    transition: width 0.5s!important;

  }

 

  #vinyl-gallery .vinyl:hover {

    width: 148px!important;

  }

 

  #vinyl-gallery img {

      all:unset!important;

    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;

    width: 180px!important;

    height: 180px!important;

    transform: rotateX(0deg) rotateY(25deg)!important;

    transform-style: preserve-3d!important;

    border-radius: 4px!important;

    border: 2px solid rgba(0, 0, 0, 0.1)!important;

object-fit: cover!important;

  }

 

  #vinyl-gallery .vinyl:hover img {

    transform: rotateX(0deg) rotateY(10deg)!important;

    width: 188px!important;

    height: 188px!important;

    margin-top: -2px!important;

  }

 

  #vinyl-gallery .title {

    color: #FFFFFF;

    display: block;

    visibility: hidden;

    position: absolute;

    bottom: 0px;

    text-align: center;

    width: 100%;

    padding-left: 6px;

  }

 

  #vinyl-gallery .vinyl:nth-child(n):hover + .title {

    visibility: visible;

  }



</style>
<style>

#vinyl-gallery * {

    all: unset;

  }

 

  #vinyl-gallery {

    all: initial!important;

    width: 100%!important;

    height: 230px!important;

    margin: 30px 0!important;

    display: flex!important;

    flex-direction: row!important;

    position: relative!important;

    margin-left: -6px!important;

  }

 

  #vinyl-gallery .vinyl {

      all:unset!important;

    perspective: 500px !important;

    width: 18px!important;

    transition: width 0.5s!important;

  }

 

  #vinyl-gallery .vinyl:hover {

    width: 148px!important;

  }

 

  #vinyl-gallery img {

      all:unset!important;

    transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s!important;

    width: 180px!important;

    height: 180px!important;

    transform: rotateX(0deg) rotateY(25deg)!important;

    transform-style: preserve-3d!important;

    border-radius: 4px!important;

    border: 2px solid rgba(0, 0, 0, 0.1)!important;

object-fit: cover!important;

  }

 

  #vinyl-gallery .vinyl:hover img {

    transform: rotateX(0deg) rotateY(10deg)!important;

    width: 188px!important;

    height: 188px!important;

    margin-top: -2px!important;

  }

 

  #vinyl-gallery .title {

    color: #FFFFFF;

    display: block;

    visibility: hidden;

    position: absolute;

    bottom: 0px;

    text-align: center;

    width: 100%;

    padding-left: 6px;

  }

 

  #vinyl-gallery .vinyl:nth-child(n):hover + .title {

    visibility: visible;

  }



</style><div id="vinyl-gallery">

  <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fau.pinterest.com%2Fpin%2F913245630701946397%2F" loading="lazy" decoding="async">

  </div>

  <div class="title">Stray Kids - KARMA</div>



  <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fau.pinterest.com%2Fpin%2F17592254769617753%2F" loading="lazy" decoding="async">

  </div>

  <div class="title">Pitbull - PLANET PIT</div>



  <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fau.pinterest.com%2Fpin%2F761319512051699435%2F" loading="lazy" decoding="async">

  </div>

  <div class="title">CORTIS - GREENGREEN</div>



  <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fi.pinimg.com%2F736x%2F62%2F33%2Fd7%2F6233d7f1fe2b6f04e2900e79ef317260.jpg" loading="lazy" decoding="async">

  </div>

  <div class="title">5 Seconds of Summer - EVERYONE'S A STAR (FULLY ENVOLVED)</div>



  <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fau.pinterest.com%2Fpin%2F796785359117456990%2F" loading="lazy" decoding="async">

  </div>

  <div class="title">ZAYN - KONNAKOL (DELUXE)</div>



 <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fau.pinterest.com%2Fpin%2F1113163232944139841%2F" loading="lazy" decoding="async">

  </div>

  <div class="title">Stray Kids - THIS &amp; THAT</div>



  <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fi.pinimg.com%2F1200x%2Faa%2Ff5%2Ff2%2Faaf5f2988291abc7cdf1988f84357828.jpg" loading="lazy" decoding="async">

  </div>

  <div class="title">The Black Eyed Peas - THE E.N.D</div>



  <div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fau.pinterest.com%2Fpin%2F915708536750769825%2F" loading="lazy" decoding="async">

  </div>

  <div class="title">CORTIS - COLOR OUTSIDE THE LINES</div>



<div class="vinyl">

    <img src="/proxy/image.php?url=https%3A%2F%2Fi.pinimg.com%2F736x%2F6e%2F9e%2Fef%2F6e9eef815c3bc651f0951b9998de70b4.jpg" loading="lazy" decoding="async">

  </div>

  <div class="title">Calvin Harris - 18 MONTHS</div></div><style></style>
<style></style><style>


/* Container that spans the full screen without blocking clicks */
.star-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent; /* Keeps your original background visible */
  pointer-events: none;    /* Allows users to click elements behind the stars */
  z-index: 9999;           /* Keeps stars on top of other content */
}

/* Base star styling */
.star {
  position: absolute;
  top: -20px;
  border-radius: 50%;
  animation: fall linear infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

/* Star Sizes */
.star.small {
  width: 3px;
  height: 3px;
}
.star.medium {
  width: 5px;
  height: 5px;
}

/* Star Colors */
.star.white {
  background-color: #ffffff;
}
.star.purple {
  background-color: #b388ff; /* Soft pastel purple */
  filter: drop-shadow(0 0 4px rgba(179, 136, 255, 0.6));
}

/* Individual Star Positions & Speeds (Soft & Varied) */
.star:nth-child(1) { left: 10%; animation-duration: 8s; animation-delay: 0s; }
.star:nth-child(2) { left: 25%; animation-duration: 12s; animation-delay: 2s; }
.star:nth-child(3) { left: 40%; animation-duration: 10s; animation-delay: 1s; }
.star:nth-child(4) { left: 55%; animation-duration: 14s; animation-delay: 4s; }
.star:nth-child(5) { left: 70%; animation-duration: 9s; animation-delay: 0.5s; }
.star:nth-child(6) { left: 85%; animation-duration: 11s; animation-delay: 3s; }
.star:nth-child(7) { left: 15%; animation-duration: 13s; animation-delay: 5s; }
.star:nth-child(8) { left: 90%; animation-duration: 7s; animation-delay: 1.5s; }

/* Soft falling and drifting animation */
@keyframes fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8; /* Fade in softly near the top */
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(105vh) translateX(50px) rotate(360deg);
    opacity: 0; /* Fade out safely off-screen */
  }
}
</style><div class="star-container">
  <div class="star white large"></div>
  <div class="star cyan medium"></div>
  <div class="star white medium"></div>
  <div class="star cyan large"></div>
  <div class="star white large"></div>
  <div class="star cyan medium"></div>
  <div class="star white medium"></div>
  <div class="star cyan large"></div>
</div>