Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

Taylor Swift | TTPD

Author: 𝐒𝐩𝐞𝐧𝐜𝐞𝐫

Category: Aesthetic

Created: June 12, 2026

The inspiration behind this particular layout for FriendRewind comes from Taylor Swift's time period known as The Tortured Poets Department. This was meant to be somewhat emotional, yet messy – in a good way – and convey the feeling of going through memories that still have not been processed.

There is an overall dark theme with some soft cyan colors incorporated as well as grainy textures that add to the atmosphere of the design. The idea behind it was to create a more atmospheric environment, almost like everything had a certain meaning to it.

The profile parts were done with some translucent elements and small animations added to make them seem alive while maintaining the custom profiles aesthetics from the TTPD days.

Overall, it was merely created to look and feel personal.

Comments (1)

GDUnicorn 1 hr ago

DUDE MY FRIEND WOULD LOVE THIS

You must log in to comment.

CSS Code

<style>
<style>
body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url('https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExeHQ0YmlzdG9kc2ZoY3pkaHdsNHZ4ejl3Y2UzY3F3eHAxY2cwdmdiMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/am0uNhFYUXeK1zU4lP/giphy.gif');
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 3s ease 0s 1 normal forwards;
    pointer-events: none;
}

@keyframes yourAnimation {
    0% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

.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;
}

* {
    cursor: url('https://cur.cursors-4u.net/cursors/cur-5/cur425.cur'), auto !important;
}

*::-webkit-scrollbar {
    width: 18px;
}

*::-webkit-scrollbar-track {
    background: #fff;
}

*::-webkit-scrollbar-thumb {
    background-color: #00a3ad;
    border-radius: 10px;
    border: 3px solid #00a3ad;
}

:root {
    --logo-blue: #e9e3da;
    --darker-blue: #6d655d;
    --lighter-blue: #f5f1eb;
    --even-lighter-blue: #ffffff;
    --lightest-blue: #faf8f5;
    --dark-orange: #4f4943;
    --light-orange: #d7cec3;
    --even-lighter-orange: #f3efe9;
    --green: #8b8177;
}

body {
    background: url("https://berkeleybeacon.com/wp-content/uploads/2024/04/IMG_8985.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.profile {
    background-color: #f8f4ef;
    opacity: 0.92;
    color: #2f2a26;
}

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

* {
    font-family: Georgia, "Times New Roman", serif;
}

.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: #8b8177 !important;
text-decoration: none !important;
background: transparent !important;
}

.profile-playlist-widget h3 {
color: #8b8177 !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: #8b8177;
    font-weight: bold;
    background-color: white !important;
}

nav {
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

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

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

nav .links {
    text-align: center;
    padding: 3.5px;
    font-size: 70%;
}

a:hover {
    color: #000;
}

main:before {
    width: 100%;
    height: 410px;
    display: block;
    content: "";
    background-image: url('https://i.pinimg.com/736x/36/92/c7/3692c76d9950c0a7294ef428a6bc4528.jpg');
    background-position: center;
    background-size: cover;
}

@import url('https://fonts.cdnfonts.com/css/from-where-you-are');

.profile .left h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    color: #4f4943;
    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("http://i.picasion.com/gl/93/lUgI.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: #6d655d !important;
    color: #fff !important;
    text-align: center;
    border-bottom: 2px solid;
    border-radius: 10px;
}

.profile .blurbs .section h4 {
    color: #8b8177;
    font-weight: bolder;
}

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

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

.details-table td:first-child {
    color: #8b8177 !important;
}

.blog-preview p {
    background-color: none;
    padding: 5px 10px;
    border-radius: 10px;
    color: #8b8177;
    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: #8b8177;
}

.profile .friends .person p {
    color: #8b8177 !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;
}

.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: #4f4943;
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: #f5f1eb;
    border: 1px solid #d7cec3;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #6d655d;
    border-radius: 10px;
    border: 2px solid #f5f1eb;
}

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

.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 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;
    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; }

50%{transform:scale(1.25)}}

#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 li.current {
    background: rgba(109, 101, 93, 0.12) !important;
    border-left: 2px solid #4f4943 !important;
}

.profile-playlist-widget li.current .pp-equalizer {
    display: flex !important;
    align-items: flex-end;
    gap: 2px;
    margin-right: 6px;
    opacity: 0.85;
}

.profile-playlist-widget li.current .pp-equalizer span,
.profile-playlist-widget li.current .pp-equalizer svg {
    background-color: #2f2a26 !important;
    fill: #2f2a26 !important;
    color: #2f2a26 !important;
}

.profile-playlist-widget .pp-drag {
    color: #2f2a26 !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: #4f4943 !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;
}

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

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

<div class="bio-container">
    <p class="bio-text">Insert your bio here 🤍</p>
</div>

<div class="snowflakes">
    <div class="snowflake">🤍</div>
    <div class="snowflake">🕯️</div>
    <div class="snowflake">🖋️</div>
    <div class="snowflake">📜</div>
    <div class="snowflake">🤍</div>
    <div class="snowflake">🤍</div>
    <div class="snowflake">🕯️</div>
    <div class="snowflake">🖋️</div>
    <div class="snowflake">📜</div>
    <div class="snowflake">🤍</div>
</div></style>