← Back to Layouts
:3

Name: FriendRewind
Author: FriendRewind
Author: c0rpseslovemusic
Category: Classic
Created: October 1, 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":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","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 */
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>
body, body.profile-page  {
    background-color: #000000 !important;
    background-image: url("https://i.ibb.co/q3gvyyYf/Untitled38-20260930143804.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: #b8b8b8;
    font-family: "Times New Roman", Serif;
}
body.profile-page .master-container {
    background: rgba (8, 8, 10, 0.94);
    border: 1px solid #292929;
    box-shadow 0 0 30px rgba (0,0,0,0.9);
}


body.profile-page nav {
    background: #050505
    border-bottom: 1px solid #333
}


body.profile-page nav.top {
    background: #050505
}
body.profile nav a {
    color:#999
}
body.profile-page nav a:hover {
    color:#fff
    text-shadow: 0 0 8px #777;
}
body.profile-page .heading {
    background: #111
    border: 1px solid #333
}


body.profile-page .heading h1
body.profile-page .heading h4 {
    color: #bdbdbd
    font-family: "Times New Roman", serif;
    font-style: italic;
    letter-spacing: 2px;
    text-shadow: 0 0 7px #555;
}


body.profile-page.section,
body.profile-page.blurbs,
body.profile-page.friends,
body.profile-page.comments-table,
body.profile-page.contact,
body.profile-page.table-section,
body.profile-page.url-info {
    background: rgba(12, 12, 14, 0.95)
    color: #aaa
    border: 1px solid #292929
    box-shadow: inset 0 0 15px rgba (0,0,0,.8);
}
body.profile-page p,
body.profile-page td,
body.profile-page li {
    color:#aaa
}
body.profile-page a {
    color #999
    text-decoration: none;
}
body.profile-page a:hover {
    color: #fff
    text-shadow: 0 0 8px #777;
}
body.profile-page .details-table td:first-child {
    background: #090909
    color: #777
    border-right: 1px solid #292929;
    font-style: italic;
}
body.profile-page ,.profile-pic img {
    border: 2px solid #333
    filter: grayscale (35%);
    box-shadow 0 0 15px #000;
}
body.profile-page .mood {
    color: #777
    font-style: italic;
}

body.profile-page .friends-grid img {
    border: 1px solid #333
    filter: grayscale (45%)
    transition: .3s;
}
body. .profile-page .friends-grid img:hover {
    filter: grayscale (0%);
    transform: scale (1.04);
    box-shadow: 0 0 12px #555;
}
body.profile-page #comments {
    background: #080808
}
body.profile-page.comment-count-links {
    color:#777
}
body.profile-page .music-bar {
    background: #050505
    border-top: 1px solid #292929
}
body.profile-page .music-bar: :before {
    display: none
}
body.profile-page .music-bar .bar-title,
body.profile-page .bar .bar-now-playing,
body.profile-page .bar=.bar-time-display,
body.profile-page .bar-time-total {
    color: #888
}
body.profile-page .bar-progress-fill {
    background: #777
}
body.profile-page: :-webkit-scrollbar {
    width: 9px;
}
body.profile-page: :-webkit-scrollbar-track {
    background: #050505;
}
body.profile-page: :-webkit-scrollbar-thumb {
    background: #333;
    border: 2px solid #050505;
}
</style><style>

/* 🖤 GOTH MUSIC PLAYER 🖤 /

.music-bar {
    background: #050505 !important;
    border-top: 1px solid #333333 !important;
}

.music-bar::before {
    display: none !important;
}

.music-bar .bar-title {
    color: #eeeeee !important;
}

.bar-now-playing {
    color: #888888 !important;
}

.bar-time-display,
.bar-time-total {
    color: #aaaaaa !important;
}

.bar-progress {
    background: #222222 !important;
}

.bar-progress-fill {
    background: #888888 !important;
}

.music-bar .bar-btn {
    color: #eeeeee !important;
    filter: grayscale(1) !important;
}

/ Profile Tunes box */
.profile-playlist-widget {
    background: rgba(5, 5, 5, 0.95) !important;
    border: 1px solid #333333 !important;
}

.profile-playlist-widget h3 {
    color: #eeeeee !important;
}

.profile-playlist-widget li {
    color: #aaaaaa !important;
}

.profile-playlist-widget li.current .song-info {
    color: #ffffff !important;
}

.profile-playlist-widget .song-artist {
    color: #777777 !important;
}

.pp-equalizer span {
    background: #888888 !important;
}


* {
  cursor: url('https://cdn.cursors-4u.net/previews/tiny-skull-crossbones-69fe6d68-32.webp') 32 32, auto !important;
}


a:hover {letter-spacing: 2px; transition-duration: 500ms !important;}


<!-- Original Layout base by ★ 𝐫𝐱𝐦𝐞𝐨 ★ -->
<!-- https://friendrewind.com/layouts/element.php?id=48 ★ -->

@keyframes onlineFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(8px); }
    100% { transform: translateY(0px); }
}

.online img, [class*="online"] img {
    visibility: hidden !important;
    display: none !important;
}

.online, [class*="online"] {
    display: inline-block !important;
    
    background-image: url(https://media4.giphy.com/media/v1.Y2lkPTZjMDliOTUyNzA1ZHcxOXYzbWJmdmNub3h6bnpvcGYyZXNoNjA0MjNjZ3FhdmZiZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/CS1EfWWymZPeo/giphy.gif) !important;
    
    width: 50px !important; 
    height: 50px !important; 
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    animation: onlineFloat 3s infinite ease-in-out !important;
}


><style>
	@-webkit-keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@-webkit-keyframes snowflakes-shake {
		0%,
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0)
		}
		50% {
			-webkit-transform: translateX(80px);
			transform: translateX(80px)
		}
	}
	
	@keyframes snowflakes-fall {
		0% {
			top: -10%
		}
		100% {
			top: 100%
		}
	}
	
	@keyframes snowflakes-shake {
		0%,
		100% {
			transform: translateX(0)
		}
		50% {
			transform: translateX(80px)
		}
	}
	
	.snowflake {
		position: fixed;
		top: -10%;
		z-index: 9999;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-animation-name: snowflakes-fall, snowflakes-shake;
		-webkit-animation-duration: 10s, 3s;
		-webkit-animation-timing-function: linear, ease-in-out;
		-webkit-animation-iteration-count: infinite, infinite;
		-webkit-animation-play-state: running, running;
		animation-name: snowflakes-fall, snowflakes-shake;
		animation-duration: 10s, 3s;
		animation-timing-function: linear, ease-in-out;
		animation-iteration-count: infinite, infinite;
		animation-play-state: running, running
	}
	
	.snowflake:nth-of-type(0) {
		left: 1%;
		-webkit-animation-delay: 0s, 0s;
		animation-delay: 0s, 0s
	}
	
	.snowflake:nth-of-type(1) {
		left: 10%;
		-webkit-animation-delay: 1s, 1s;
		animation-delay: 1s, 1s
	}
	
	.snowflake:nth-of-type(2) {
		left: 20%;
		-webkit-animation-delay: 6s, .5s;
		animation-delay: 6s, .5s
	}
	
	.snowflake:nth-of-type(3) {
		left: 30%;
		-webkit-animation-delay: 4s, 2s;
		animation-delay: 4s, 2s
	}
	
	.snowflake:nth-of-type(4) {
		left: 40%;
		-webkit-animation-delay: 2s, 2s;
		animation-delay: 2s, 2s
	}
	
	.snowflake:nth-of-type(5) {
		left: 50%;
		-webkit-animation-delay: 8s, 3s;
		animation-delay: 8s, 3s
	}
	
	.snowflake:nth-of-type(6) {
		left: 60%;
		-webkit-animation-delay: 6s, 2s;
		animation-delay: 6s, 2s
	}
	
	.snowflake:nth-of-type(7) {
		left: 70%;
		-webkit-animation-delay: 2.5s, 1s;
		animation-delay: 2.5s, 1s
	}
	
	.snowflake:nth-of-type(8) {
		left: 80%;
		-webkit-animation-delay: 1s, 0s;
		animation-delay: 1s, 0s
	}
	
	.snowflake:nth-of-type(9) {
		left: 90%;
		-webkit-animation-delay: 3s, 1.5s;
		animation-delay: 3s, 1.5s
	}
	
	.snowflake:nth-of-type(10) {
		left: 25%;
		-webkit-animation-delay: 2s, 0s;
		animation-delay: 2s, 0s
	}
	
	.snowflake:nth-of-type(11) {
		left: 65%;
		-webkit-animation-delay: 4s, 2.5s;
		animation-delay: 4s, 2.5s
	}


.logo .nav-logo {
  content: url"https://ibb.co/Z6f3M7fG"><img src="https://i.ibb.co/TBwZgdwY/281543727101960.jpg";
  width: 180px;
  height: auto;
}


<img src="YOUR-LINK">

<img src="https://64.media.tumblr.com/66be78981d48a18392116c3fa952fca8/5732e589548c1c67-e1/s100x200/be997d5173da32608fe599b3487a99f86d03ac10.gifv">

<img src="https://64.media.tumblr.com/737d783a8e44ec3e8041644dd16b6517/4160be3cc2b84620-cf/s400x600/88cbb0ed6c500a99acd327b7b1841608eba02c5f.gifv">

<img src="https://64.media.tumblr.com/66871165180b90fb3e079bd9c5f48df3/efa59677884e5c34-03/s100x200/c770238f3e8a4ad2c130823b56d815d430379699.pnj">

<img src="https://64.media.tumblr.com/8a8e1f3cad9e150ee3a8148997eee470/29d2cb80be741d11-48/s100x200/5480d845026e0238430adaace5cf7a3a862d500b.gifv">

<img src="https://64.media.tumblr.com/52fdf7aef48efa9e72b4d106556e355e/c7622e3007499f41-bf/s100x200/7be7b3ca406ae2dc473f5b324f17f9d89082c893.webp">

<img src="https://64.media.tumblr.com/c6bdfdbbdf44b48443f6853c5f80a462/82f062ad64b65975-bd/s100x200/39bccfa9daaa8be3fe8966842986fd3b866e35d5.pnj">

<img src="https://64.media.tumblr.com/366a0031a7c146178292cd1fbf8938d7/82f062ad64b65975-68/s250x400/c182f895ee9ad7ad8d17353c8f89f9567320719b.jpg">

<img src="https://64.media.tumblr.com/e8c3fcb9c9d005fe3108d3107774da55/82f062ad64b65975-48/s100x200/8d15b71d0efccbafc99390167e088b000e630afb.pnj">

<img src="https://64.media.tumblr.com/4faa4f4104fc402c875224786de34be4/b18aff3ce9323114-61/s100x200/54db9163cb6597393db9046b9cbcec1eb40c445a.gifv">

<img src="https://64.media.tumblr.com/7336c8f0d254237f8eb33d769ff5f711/9574327874d6f544-bf/s100x200/f127da725d7289e592936d38293ab3cbb3c04063.pnj">

<img src="https://64.media.tumblr.com/ea563d51e22f624a4d1972286d972273/f02a1cb68b17106a-67/s100x200/03fd431b2e51194dc6ec6eae6d181fe5f5ba1bc0.pnj">

<img src="https://64.media.tumblr.com/8bcee53282e3138cfd102410340877e6/0f3ad1aff0d9e5ba-49/s100x200/eb7786d4c66c9ae6b776bb015efb17215a4cc36b.gifv">

<img src="https://64.media.tumblr.com/8f3d455889441ecf0ed86c666e222996/b71a6f05aae197fe-e1/s100x200/9a6c8b270c4da0569af5207182b45666f30c1787.pnj">

<img src="https://64.media.tumblr.com/9d2af22775dedfb05d93e757bb73459b/e32854c322fabf64-8e/s250x400/d977df5bff5468dfb38aa46f8d9efbec2d9f4a03.gifv">


/* Target the Friends box header */
.friends h4 {
    font-size: 0; /* Hide original text without removing the element */
    position: relative;
}

/* Insert your custom title */
.friends h4::after {
    content: "^^"; /* <-- Change this to your desired title */
    font-size: 16px;       /* Restore readable size */
    color: #FF000D;        /* Custom color */
    font-weight: bold;
}


/* Stack the profile picture, info, and online icon vertically */

.general-about {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

}



.general-about .profile-pic {

  order: 1 !important;

  float: none !important;

}



.general-about .details {

  order: 2 !important;

  width: 100% !important;

}



.general-about .online {

  order: 3 !important;

  visibility: hidden !important;

}



/* Change the online icon */

.general-about .online img {

  content: url("") !important;

  visibility: visible !important;

  display: block !important;

  width: 70px !important;

  height: auto !important;

  margin: 6px auto !important;

}

</style>
<style>

/* banner */
main:before {
	width: 100%;
	height: 170px;
	display: block;
	content: "";
	background-image: url("https://i.ibb.co/LdGY6RTt/69665125482084104.gif");
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
</style><div class="snowflakes">
  
  <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
  <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
    <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
    <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
   <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
  <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
    <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
    <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
    <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
  <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
    <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
    <div class="snowflake"><img src="https://friendrewind.com/uploads/gallery/19453/img_6aa061a79d8a42.44294385.webp" style="width:20px;"></div>
</div><style>
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background-image: url("https://i.ibb.co/35MrLxFX/Layze.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

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

  animation: loadingScreen 1s ease forwards;
}

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

  75% {
    opacity: 1;
  }

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