Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Red (Taylor's Version)

Author: 𝐒𝐩𝐞𝐧𝐜𝐞𝐫
Category: Taylor Swift
Created: June 13, 2026
🍁 Inspired by the cozy autumn aesthetic and visuals of Red (Taylor's Version), this layout features warm red tones, vintage images, floating accents, and a clean design that is perfect for any Swiftie!

✨ Features:
❤️ Matching Red themed graphics and sidebar images
🎵 Custom music player section
📖 Blog, Friends, Photos, and Videos sections styled to match the theme
🍂 Soft autumn inspired color palette
✨ Clean and easy-to-read profile layout

💕 Bio Section:
📝 The "My Life ❤️" section automatically shows whatever you enter in your profile's Bio/About Me field when editing your profile. Add your favourite lyrics, a short introduction, fun facts, quotes, or anything else you want visitors to see!

❤️🍁 Perfect for fans of cozy fall vibes, vintage aesthetics, and all things Red 🍁❤️

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>
@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; /* stays behind intro */

    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>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const intro = document.querySelector("body:before");

  setTimeout(() => {
    document.body.classList.add("intro-done");
  }, 3000);
});
</script></style>