← Back to Layouts
Red (Taylor's Version)

Name: FriendRewind
Author: FriendRewind
Author: 𝐒𝐩𝐞𝐧𝐜𝐞𝐫
Category: Music
Created: June 13, 2026
Credit Notice: This layout is free to use; however, the creator credit is required and must remain visible on your profile at all times. Removing, hiding, modifying, or relocating the credit is not permitted. By using this layout, you agree to keep the credit displayed on your FriendRewind profile.
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>


/* FR_MANUAL_EXTRAS */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/from-where-you-are');

body:before {
  content: "";
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999; 

  background-image: url('https://c.tenor.com/SNOQVbx7NTkAAAAC/tenor.gif');
  background-size: cover;
  background-repeat: no-repeat;

  animation: introFade 3s ease-in-out forwards;
  pointer-events: none;
}

@keyframes introFade {
  0% { opacity: 1; visibility: visible; }
  90% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.hideobj {
    visibility: hidden;
    height: 20px;
    width: 0%;
}

.details-table tr:nth-child(n+1):nth-child(-n+6) td:first-child p {
    font-size: 0;
}

.details-table tr:nth-child(n+1):nth-child(-n+6) td:first-child p:before {
    content: "";
    font-size: .7rem;
}

.details-table tr:nth-child(n+1):nth-child(-n+6) td:first-child {
    display: none !important;
}

:root {
--primary: #7a1f1f;
--primary-dark: #4a1414;
--primary-light: #9f2f2f;
--accent: #c8a27a;
--bg: #fdf7f0;
--text: #3d1f1f;
--overlay: rgba(255,255,255,0.79);
--radius: 15px;
}

a,
a:visited {
  color: #7a1f1f !important;
  text-decoration: none !important;
}

a:hover {
  color: #c8a27a !important;
  text-decoration: underline !important;
}

a:active {
  color: #4a1414 !important;
}

body {
background: url("https://wallpapers.com/images/high/taylor-swift-red-aesthetic-collage-iywmwpgaoz2pfrv7.webp")
center / cover no-repeat fixed;

font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
color: var(--text);

cursor: url('https://cur.cursors-4u.net/food/foo-7/foo625.cur'), auto;
}

a, button, input, textarea, select {
cursor: inherit;
}

.profile {
    background-color: #fdf7f0;
    color: #3d1f1f;
}

main {
    border-radius: 0 0 10px 10px;
    background: rgba(255,255,255,0.79) !important;
    padding: 0;
}

.container {
border-radius: 15px 15px 0 0;
overflow: hidden;
margin-top: 30px;
padding: 10px;
} 

footer {
border-radius: 15px;
background-color: rgba(248, 244, 239, 0.92) !important;
color: #2f2a26;
box-shadow: none !important;
} 

footer .links a,
footer .copyright a,
footer .links a:hover {
    color: #ffffff !important;
}

.profile-playlist-widget {
background-color: rgba(248, 244, 239, 0.92) !important;
border: none !important;
box-shadow: none !important;
border-radius: 15px;
}

.profile-playlist-widget h3 a,
.profile-playlist-widget h3 a:visited,
.profile-playlist-widget h3 a:active,
.profile-playlist-widget h3 a:hover {
color: #7a1f1f !important;
text-decoration: none !important;
background: transparent !important;
}

.profile-playlist-widget h3 {
color: #7a1f1f !important;
font-size: .9rem;
font-weight: bolder;
text-align: center;
} 

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
    border: none;
}

a.addme {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    display: block;
}

.top input {
    border-radius: 15px;
}

button {
    border-radius: 25px !important;
    color: #7a1f1f;
    font-weight: bold;
    background-color: white !important;
}

input[type="text"],
input[type="search"] {
    background: rgba(253, 247, 240, 0.85) !important; /* soft cream-white */
    border: 2px solid #7a1f1f !important;
    border-radius: 15px !important;
    color: #3d1f1f !important;
    padding: 6px 10px;
    outline: none !important;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder {
    color: rgba(122, 31, 31, 0.6) !important;
}

input[type="text"]:focus,
input[type="search"]:focus {
    box-shadow: 0 0 8px rgba(122, 31, 31, 0.4) !important;
    border-color: #4a1414 !important;
}

button,
input[type="submit"] {
    background: #7a1f1f !important;
    color: #fdf7f0 !important;
    border: 2px solid #7a1f1f !important;
    border-radius: 25px !important;
    font-weight: bold;
    transition: 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
    background: #4a1414 !important;
    border-color: #4a1414 !important;
    color: #fdf7f0 !important;
}

nav {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
    background-color: #7a1f1f !important;
}

nav * {
    background-color: #7a1f1f !important;
}

nav .links {
    text-align: center;
    padding: 3.5px;
    font-size: 70%;
    background-color: #7a1f1f !important;
}

nav .links a {
    color: #fdf7f0 !important;
    text-shadow: none !important;
    font-weight: bolder;
}

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

main:before {
    width: 100%;
    height: 410px;
    display: block;
    content: "";
    background-image: url('https://www.taylorswiftweb.net/wp-content/uploads/2021/11/taylorswiftredtaylorsversionphotoshoot-710x300.jpg');
    background-position: center;
    background-size: cover;
}

.profile .left h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    color: #7a1f1f;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
    overflow-wrap: break-word;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
}

.details p {
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
}

.profile-pic {
    border-radius: 500px;
    overflow: hidden;
}

.online {
    visibility: hidden;
}

.online img {
    content: url("https://i7.glitter-graphics.org/pub/385/385827ribkieuvxd.gif");
    animation-name: none;
    visibility: visible;
    height: 30px;
    width: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.heading {
    padding: 5px 0 !important;
    margin: 15px 0 10px 0;
    background-color: #7a1f1f !important;
    color: #fff !important;
    text-align: center;
    border-bottom: 2px solid #c8a27a;
    border-radius: 10px;
}

.profile .blurbs .section h4 {
    color: #7a1f1f;
    font-weight: bolder;
}

table.details-table {
    border-collapse: collapse;
}

table.details-table td {
    background-color: #fff !important;
}

.details-table td:first-child {
    color: #7a1f1f !important;
}

.blog-preview p {
    background-color: none;
    padding: 5px 10px;
    border-radius: 10px;
    color: #7a1f1f;
    font-weight: bolder;
}

.blog-preview p a,
.blog-preview p a:hover,
.blog-preview p a:active,
.blog-preview p a:focus {
    color: #000 !important;
}

.profile .friends .heading {
    color: #ffffff;
}

.profile .friends {
    text-align: center;
}

.count {
    color: #7a1f1f;
}

.profile .friends .person p {
    color: #7a1f1f !important;
}

.profile .friends .person img {
    border-radius: 500px;
}

.profile .friends .person img:not(.icon) {
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(109, 101, 93, 0.35);
    border: 2px solid #fff;
    transition: 0.5s ease;
}

.profile .friends .person img:not(.icon):hover {
    transform: scale(1.1);
}

.comments-table td {
    background-color: #fff !important;
    border: none;
}

.comments-table td:first-child img {
    width: 80px;
    border-radius: 500px;
}

.comments-table {
    display: block;
    height: 1000px;
    overflow-y: scroll;
    border: none;
}

.contact .heading,
.w-40 .table-section:nth-last-child(2) .heading h4,
.w-40 .table-section:last-child .heading h4,
.blog-preview h4,
.blurbs .heading,
.blurbs .inner .section:nth-child(1) h4,
.blurbs .inner .section:nth-child(2) h4,
.friends .heading,
.friends#comments .heading {
    font-size: 0;
}

.contact .heading:before {
    content: "Contact Me ❤️";
    font-size: .9rem;
    font-weight: bolder;
}

.w-40 .table-section:nth-last-child(2) .heading:before {
    content: "What I Like ❤️";
    font-size: .9rem;
    font-weight: bolder;
}

.w-40 .table-section:last-child .heading:before {
    content: "Follow Me ❤️";
    font-size: .9rem;
    font-weight: bolder;
}

.blog-preview h4:before {
    content: "My Blogs ❤️";
    font-size: .9rem;
}

.blog-preview h4 a {
    font-size: .8rem;
    margin-left: 5px;
}

.blurbs .heading:before {
    content: "My Life ❤️";
    font-size: .9rem;
    font-weight: bolder;
}

.profile .blurbs .inner {
text-align: center !important;
} 

.blurbs .inner .section:nth-child(1) h4 {
    display: none !important;
}

.blurbs .inner .section:nth-child(2) h4:before {
    content: "Who I'd Like To Meet:";
    font-size: .9rem;
}

.profile .friends .heading h4 {
    font-size: 0 !important;
}

.profile .friends .heading {
    text-align: center;
}

.profile .friends .heading:before {
    content: "My Friends ❤️";
    font-size: .9rem;
    font-weight: bolder;
    display: inline-block;
    width: 100%;
    color: #fff;
}

.profile .friends.badges-widget .heading:before {
    content: "My Badges ❤️";
    font-size: .9rem;
    font-weight: bolder;
    display: inline-block;
    width: 100%;
    color: #fff;
}

.profile .friends#comments .heading:before {
    content: "Leave Me a Comment ❤️";
    font-size: .9rem;
    font-weight: bolder;
    display: block;
    text-align: center;
}

.bio-container {
width: 100% !important;
text-align: center !important;
}

.bio-text {
display: inline-block;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
letter-spacing: 0.3px;
color: #7a1f1f;
opacity: 0.85;
margin: 0 auto;
}

.myBox-container {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.myBox {
    border: none;
    padding: 5px;
    font: 13px/26px sans-serif;
    width: 433px;
    height: 340px;
    overflow: scroll;
    margin: 0 auto;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #fdf7f0;
    border: 1px solid #d9c3aa;
}

::-webkit-scrollbar-thumb {
    background: #7a1f1f;
    border: 2px solid #fdf7f0;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a1414;
}

.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(0,0,0,0.7);
}

@-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 emoji-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;
    cursor: default;
    -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%; animation-delay:0s,0s; }
.snowflake:nth-of-type(1) { left:10%; animation-delay:1s,1s; }
.snowflake:nth-of-type(2) { left:20%; animation-delay:6s,.5s; }
.snowflake:nth-of-type(3) { left:30%; animation-delay:4s,2s; }
.snowflake:nth-of-type(4) { left:40%; animation-delay:2s,2s; }
.snowflake:nth-of-type(5) { left:50%; animation-delay:8s,3s; }
.snowflake:nth-of-type(6) { left:60%; animation-delay:6s,2s; }
.snowflake:nth-of-type(7) { left:70%; animation-delay:2.5s,1s; }
.snowflake:nth-of-type(8) { left:80%; animation-delay:1s,0s; }
.snowflake:nth-of-type(9) { left:90%; animation-delay:3s,1.5s; }
.snowflake:nth-of-type(10){ left:25%; animation-delay:2s,0s; }
.snowflake:nth-of-type(11){ left:65%; animation-delay:4s,2.5s; }

#fr-spencer-player .w-40.left .details-table,
#fr-spencer-player .w-40.left .details-table tbody,
#fr-spencer-player .w-40.left .details-table tr {
    display: block !important;
    width: 100% !important;
}

#fr-spencer-player .w-40.left .details-table td:first-child {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

#fr-spencer-player .w-40.left .details-table td:last-child {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#fr-spencer-player .w-40.left .interest-content img {
    max-width: 433px !important;
    width: 100% !important;
    height: auto !important;
}

.profile-playlist-widget li.current,
.profile-playlist-widget li.current a,
.profile-playlist-widget li.current .song-info {
    color: #2f2a26 !important;
    text-decoration: none !important;
}

.profile-playlist-widget .pp-equalizer {
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 2px !important;
    min-width: 12px !important;
    height: 14px !important;
}

.profile-playlist-widget .pp-equalizer span {
    display: block !important;
    width: 2px !important;
    background: #7a1f1f !important;
    opacity: 1 !important;
}

.profile-playlist-widget li.current .pp-equalizer span {
    background: #9f2f2f !important;
}

.profile-playlist-widget .pp-drag,
.profile-playlist-widget .pp-drag * {
    color: #7a1f1f !important;
}

.profile-playlist-widget button {
    background: none;
    border: none;
    color: #2f2a26 !important;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 4px;
    border-radius: 2px;
    transition: all 0.2s;
    margin-left: auto;
}

.profile-playlist-widget button:hover {
    color: #7a1f1f !important;
}

.profile-playlist-widget li:hover,
.profile-playlist-widget li:focus,
.profile-playlist-widget li:focus-within {
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.profile-playlist-widget *:hover,
.profile-playlist-widget *:focus {
    outline: none !important;
    box-shadow: none !important;
}

.profile-playlist-widget .song-info,
.profile-playlist-widget .song-info a,
.profile-playlist-widget li .song-info {
    color: #7a1f1f !important;
}

.profile-playlist-widget .song-artist,
.profile-playlist-widget .song-artist a {
    color: #c8a27a !important;
}

.profile-playlist-widget li.current .song-info,
.profile-playlist-widget li.current .song-info a {
    color: #7a1f1f !important;
    font-weight: bold;
}

.profile-playlist-widget li.current .song-artist,
.profile-playlist-widget li.current .song-artist a {
    color: #9f2f2f !important;
}

#footer-music-bar .bar-btn {
    color: #fdf7f0 !important;
    transition: 0.2s ease;
}

#footer-music-bar .bar-btn:hover {
    color: #000 !important;
    transform: scale(1.1);
}

.fall-emoji {
position: fixed;
top: -10%;
z-index: 9999;
pointer-events: none;
font-size: 1.5rem;
animation: emoji-fall 12s linear infinite,
           snowflakes-shake 4s ease-in-out infinite;
}
.fall-emoji:nth-of-type(1) { left:5%; animation-delay:0s; }
.fall-emoji:nth-of-type(2) { left:15%; animation-delay:2s; }
.fall-emoji:nth-of-type(3) { left:25%; animation-delay:4s; }
.fall-emoji:nth-of-type(4) { left:35%; animation-delay:1s; }
.fall-emoji:nth-of-type(5) { left:45%; animation-delay:3s; }
.fall-emoji:nth-of-type(6) { left:55%; animation-delay:5s; }
.fall-emoji:nth-of-type(7) { left:65%; animation-delay:2s; }
.fall-emoji:nth-of-type(8) { left:75%; animation-delay:6s; }
.fall-emoji:nth-of-type(9) { left:85%; animation-delay:1s; }
.fall-emoji:nth-of-type(10){ left:95%; animation-delay:4s; }
</style><div class="fall-emoji">❤️</div>
<div class="fall-emoji">🍂</div>
<div class="fall-emoji">🧣</div>
<div class="fall-emoji">🍁</div>
<div class="fall-emoji">✨</div>
<div class="fall-emoji">❤️</div>
<div class="fall-emoji">🍂</div>
<div class="fall-emoji">🧣</div>
<div class="fall-emoji">🍁</div>
<div class="fall-emoji">✨</div>


<a href="/spencer" class="layout-credit">Layout by 𝐒𝐩𝐞𝐧𝐜𝐞𝐫 ♡</a><style>
.layout-credit,
.layout-credit:visited,
.layout-credit:active {
    position: fixed;
    top: 12px;
    left: 12px;

    z-index: 2;

    background: rgba(122,31,31,.95);
    color: #fdf7f0 !important;

    padding: 7px 12px;
    border-radius: 15px;
    border: 1px solid #7a1f1f;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;

    text-decoration: none !important;
    box-shadow: 0 0 10px rgba(109,101,93,.15);
    transition: 0.2s ease;
}

body:before {
    animation: introFade 3s ease-in-out forwards;
    pointer-events: all;
}

body.intro-done .layout-credit {
    opacity: 1;
}

.music-bar {
  background: linear-gradient(180deg,
    #9f2f2f 0%,
    #8a2323 50%,
    #7a1f1f 100%) !important;

  border-top: none !important;
  border-bottom: none !important;
  outline: none !important;

  box-shadow:
    0 -2px 14px rgba(122, 31, 31, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  color: #fdf7f0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.music-bar,
.music-bar * {
  border: none !important;
  outline: none !important;
}

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

.music-bar * {
  color: #fdf7f0 !important;
  text-shadow: none !important;
}

.music-bar button,
.music-bar .bar-btn {
  background: transparent !important;
  border: none !important;
  color: #fdf7f0 !important;
}

.music-bar button:hover,
.music-bar .bar-btn:hover {
  color: #c8a27a !important;
}

.music-bar input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  background: transparent !important;
  outline: none !important;
}

.music-bar input[type="range"]::-webkit-slider-runnable-track {
  height: 4px !important;
  border-radius: 10px !important;
  background: linear-gradient(
    90deg,
    #fdf7f0 0%,
    #d9c3aa 25%,
    #9f2f2f 60%,
    #7a1f1f 100%
  ) !important;
}

.music-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fdf7f0 !important;
  border: 2px solid #7a1f1f !important;
  cursor: pointer !important;
  margin-top: -5px !important;
  box-shadow: 0 0 10px rgba(122, 31, 31, 0.45);
}

.music-bar input[type="range"]::-moz-range-track {
  height: 4px !important;
  border-radius: 10px !important;
  background: linear-gradient(
    90deg,
    #fdf7f0,
    #d9c3aa,
    #9f2f2f,
    #7a1f1f
  ) !important;
}

.music-bar input[type="range"]::-moz-range-progress {
  background: #9f2f2f !important;
  height: 4px !important;
  border-radius: 10px !important;
}

.music-bar input[type="range"]::-moz-range-thumb {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #fdf7f0 !important;
  border: 2px solid #7a1f1f !important;
  cursor: pointer !important;
}

.profile-playlist-widget,
.profile-playlist-widget .playlist,
.profile-playlist-widget ul,
.profile-playlist-widget li {
    background: transparent !important;
}

#footer-music-bar .pp-progress,
#footer-music-bar .pp-progress *,
#footer-music-bar .progress,
#footer-music-bar .progress *,
#footer-music-bar [class*="progress"] {
    background-color: #7a1f1f !important;
}

.music-bar input[type="range"] {
    accent-color: #7a1f1f !important;
}

.music-bar .bar-progress {
    background: rgba(255,250,245,.25) !important;
    border-radius: 999px !important;
}

.music-bar .bar-progress-fill {
    background: linear-gradient(
        90deg,
        #fdf7f0 0%,
        #f3e7d8 40%,
        #d9c3aa 100%
    ) !important;
    border-radius: 999px !important;
    box-shadow: 0 0 6px rgba(243,231,216,.45) !important;
}
</style>