Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

THE TORTURED POETS DEPARTMENT

Author: 𝐒𝐩𝐞𝐧𝐜𝐞𝐫

Category: Taylor Swift

Created: June 12, 2026

🖤 Inspired by the handwritten confessions and monochrome aesthetic of The Tortured Poets Department, this layout features muted tones, poetic visuals, vintage manuscript imagery, floating accents, and a clean editorial design perfect for any Swiftie drawn to the literary side of heartbreak!

✨ Features:
🖋️ TTPD inspired graphics, typewriter-style details, and minimalist sidebar images
🎵 Custom music player section
📖 Blog, Friends, Photos, and Videos sections styled to match the poetic theme
🕯️ Soft, muted, manuscript-inspired color palette
✨ Clean, readable, journal-like profile layout

💕 Bio Section:
📝 The "My Life 🖤" section automatically displays whatever you enter in your profile's Bio/About Me field when editing your profile. Add lyrics, poetic lines, thoughts you never said out loud, quotes, or anything else you want visitors to read like pages from a private notebook.

🖤📜 Perfect for fans of quiet chaos, poetic heartbreak, manuscript aesthetics, and all things THE TORTURED POETS DEPARTMENT 📜🖤

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 (1)

GDUnicorn 06/12/2026 7:05 PM

DUDE MY FRIEND WOULD LOVE THIS

You must log in to comment.

CSS Code

<style>
<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 class="snowflake">🕯️</div>
<div class="snowflake">✒️</div>

<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: 'Cormorant Garamond', Georgia, 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.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&display=swap');

.profile .left h1 {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 38px;
    color: #4f4943;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 500;
}

.heading,
.profile .blurbs .heading,
.profile .friends .heading {
    font-family: 'Cormorant Garamond', serif !important;
    letter-spacing: 2px;
    font-weight: 600;
    text-transform: uppercase;
}

.details p {
    text-align: center;
    font-family: Georgia, "Cormorant Garamond", 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, "Cormorant Garamond", 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; }

@keyframes snowflake-pulse {
  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;
}
</style>

<a href="/spencer" class="layout-credit">Layout by 𝐒𝐩𝐞𝐧𝐜𝐞𝐫 ♡</a>

<style>
.layout-credit {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 99999;

    background: rgba(248, 244, 239, 0.95);
    color: #6d655d !important;

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

    font-family: Georgia, "Cormorant Garamond", 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;
}

.layout-credit:hover {
    color: #4f4943 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 12px rgba(109,101,93,.25);
}

#footer-music-bar,
.music-bar {
position: relative !important;
overflow: hidden !important;

background: rgba(248,244,239,.96) !important;
border: 1px solid #d7cec3 !important;
border-radius: 10px !important;

color: #4f4943 !important;

box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 4px 15px rgba(79,73,67,.08) !important;
}

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

#footer-music-bar::after,
.music-bar::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
opacity: .12;
}

.bar-now-playing {
color: #8b8177 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}

.music-bar .bar-title,
#footer-music-bar .bar-title {
color: #4f4943 !important;
font-style: italic !important;
}

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

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

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

.music-bar .bar-btn,
#footer-music-bar .bar-btn {
color: #6d655d !important;
}

.music-bar .bar-btn:hover,
#footer-music-bar .bar-btn:hover {
color: #4f4943 !important;
}

.volume-slider {
accent-color: #6d655d !important;
}

.volume-slider::-webkit-slider-runnable-track {
background: #d7cec3 !important;
}

.volume-slider::-webkit-slider-thumb {
background: #4f4943 !important;
border: 2px solid #f8f4ef !important;
}

.volume-slider::-moz-range-track {
background: #d7cec3 !important;
}

.volume-slider::-moz-range-thumb {
background: #4f4943 !important;
border: 2px solid #f8f4ef !important;
}

.bar-progress {
background: #d7cec3 !important;
border-radius: 999px !important;
overflow: hidden !important;
}

.bar-progress-fill {
background: #6d655d !important;
border-radius: 999px !important;
}

.volume-slider {
background: transparent !important;
accent-color: #6d655d !important;
}

.volume-slider::-webkit-slider-runnable-track {
height: 6px !important;
background: #d7cec3 !important;
border-radius: 999px !important;
}

.volume-slider::-moz-range-track {
height: 6px !important;
background: #d7cec3 !important;
border-radius: 999px !important;
}

.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #4f4943 !important;
border: 2px solid #f8f4ef !important;
margin-top: -4px !important;
box-shadow: 0 0 5px rgba(79,73,67,.25) !important;
}

.volume-slider::-moz-range-thumb {
width: 14px !important;
height: 14px !important;
border-radius: 50% !important;
background: #4f4943 !important;
border: 2px solid #f8f4ef !important;
}

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

.music-bar .bar-btn:hover,
#footer-music-bar .bar-btn:hover {
color: #4f4943 !important;
transform: scale(1.05);
}

#messages-btn,
.messages-btn,
#footer-messages-btn,
.chat-button,
.messenger-button {
    background: rgba(248,244,239,.96) !important;
    border: 1px solid #d7cec3 !important;
    border-radius: 999px !important;

    color: #4f4943 !important;
    font-family: Georgia, "Cormorant Garamond", serif !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 4px 12px rgba(79,73,67,.12) !important;
}

#messages-btn:hover,
.messages-btn:hover,
#footer-messages-btn:hover,
.chat-button:hover,
.messenger-button:hover {
    background: #f5f1eb !important;
    color: #2f2a26 !important;
}

#frw-im-button {
    background: rgba(248,244,239,.96) !important;
    background-image: none !important;

    border: 1px solid #d7cec3 !important;
    border-radius: 20px !important;

    color: #4f4943 !important;
    text-shadow: none !important;

    font-family: Georgia, "Cormorant Garamond", serif !important;
    font-weight: bold !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 4px 12px rgba(79,73,67,.12) !important;
}

#frw-im-button:hover {
    background: #f5f1eb !important;
    background-image: none !important;
    color: #2f2a26 !important;
}

#frw-im-button,
#frw-im-button * {
    color: #4f4943 !important;
    fill: #4f4943 !important;
}

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

.profile .blurbs .section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.profile .blurbs .section p {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}</style>