← Back to Layouts
Puppy girl

Name: FriendRewind
Author: FriendRewind
Author: hollowlight88
Category: :D
Created: July 24, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style>
<style>

/* (c) Layout inspired by the original layout provided by the user */
/* Pink FriendRewind + Gothic Glow Mix */

/* ===== FONT ===== */

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Quicksand:wght@400;500;600;700&display=swap');


/* ===== BODY ===== */

body {
    background:
        linear-gradient(rgba(255, 155, 195, 0.20), rgba(255, 155, 195, 0.20)),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3d182209.64988560.webp")
        no-repeat center center fixed;

    background-size: cover;
    background-position: center;
    color: white;
    font-family: 'Quicksand', sans-serif;
}


/* ===== PROFILE TITLE ===== */

.profile h1 {
    font-family: 'UnifrakturMaguntia', cursive;
    text-align: center;
    font-size: xx-large;
    color: white;
    text-shadow:
        2px 2px #9e426d,
        0 0 5px #ff8fbd,
        0 0 10px #ff8fbd;
}


/* ===== TOP NAVIGATION ===== */

nav .top {
    margin-top: 10px;

    background:
        linear-gradient(rgba(255, 135, 185, 0.25), rgba(255, 135, 185, 0.25)),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3d18a155.43610159.webp");

    background-size: cover;
    background-position: center;

    border: 1px solid white;
    border-radius: 8px;

    box-shadow:
        0 0 8px white,
        0 0 15px #ff77b2;

    filter: brightness(1.1);
}


nav .top .left .logo {
    width: 165px;
    height: 42px;
    filter:
        drop-shadow(2px 4px 6px #7d3155)
        drop-shadow(0 0 5px white);
}


/* ===== BUTTONS + INPUTS ===== */

button,
input,
textarea {
    overflow: visible;

    background: #ffe4ef;
    color: #7c3b59;

    border: 1px solid white;
    border-radius: 5px;

    box-shadow:
        0 0 5px white,
        0 0 8px #ff8fbd;
}

button:hover {
    background: #ffb6d2;
    color: white;
}


/* ===== NAVIGATION LINKS ===== */

nav .links {
    background-color: transparent;
    padding: 3.5px 16px;

    text-align: center;

    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

nav .links a {
    text-decoration: none;

    color: white;

    text-shadow:
        0 0 2px #000,
        0 0 2px #000,
        0 0 2px #000,
        0 0 5px #ff78b5;

    font-size: max(0.98em, 12px);
}

nav .links a:hover {
    text-decoration: underline;
    color: #ff91c0;
    text-shadow:
        0 0 5px white,
        0 0 10px #ff5ca5;
}

nav .links .special a {
    color: white;
}

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after {
    content: " ♡ ";
    color: white;
}


/* ===== MAIN PROFILE ===== */

main {
    background:
        linear-gradient(
            rgba(255, 183, 210, 0.35),
            rgba(255, 183, 210, 0.35)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3dacb547.43222856.webp");

    background-size: cover;
    background-position: center;

    border: 1px solid white;
    box-shadow:
        0 0 10px white,
        0 0 20px #ff78b5;

    border-radius: 8px;

    color: white;

    text-shadow:
        1px 1px #702d4d,
        0 0 3px #9d426a;
}


/* ===== FOOTER ===== */

footer {
    text-align: center;

    font-size: 70%;

    margin: 10px 0 10px;
    padding: 10px 5px;

    background-color: rgba(255, 178, 207, 0.75);

    color: white;

    border: 1px solid white;
    border-radius: 8px;

    box-shadow:
        0 0 8px white,
        0 0 12px #ff78b5;
}


/* ===== GENERAL LINKS ===== */

a {
    color: white;
    text-decoration: none;
}

a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active {
    color: #ff4f9a;
    text-decoration: none;
    font-style: italic;
    text-shadow: 0 0 5px white;
}


/* ===== COMMENTS + MUSIC TABLES ===== */

.comments-table td:first-child,
.music-table td:first-child {
    background:
        linear-gradient(
            135deg,
            #d889ad,
            #c27ca4
        );

    text-align: center;
    font-weight: bold;

    width: 38%;

    color: white;

    border-radius: 6px;

    box-shadow:
        inset 2px 2px 5px rgba(255,255,255,.5),
        0 0 5px #ffb4d1;
}

.comments-table td,
.music-table td {
    background: rgba(255, 208, 225, 0.92);

    color: #71394f;

    vertical-align: top;

    border-radius: 6px;

    box-shadow:
        inset 0 0 5px rgba(255,255,255,.8),
        0 0 5px rgba(255,105,170,.4);
}


/* ===== PROFILE SECTION HEADINGS ===== */

.profile .blurbs .heading,
.profile .friends .heading {
    background:
        linear-gradient(
            90deg,
            #fff,
            #ffd4e4,
            #fff
        );

    color: #71394f;

    border-radius: 8px;

    padding: 4px 7px;

    box-shadow:
        0 0 10px white,
        0 0 5px #ff8fbd;

    text-shadow: none;
}


/* ===== GENERAL PROFILE SECTIONS ===== */

.profile .contact,
.profile .url-info,
.profile .table-section,
.setting-section,
.home-actions {
    width: 100%;

    border: none;

    margin: 10px 0;
}


/* ===== SECTION HEADINGS ===== */

.profile .contact .heading,
.profile .table-section .heading,
.setting-section .heading,
.home-actions .heading {

    background:
        linear-gradient(
            90deg,
            #fff,
            #ffd0e2,
            #fff
        );

    color: #6e3650;

    padding: 4px 7px;

    box-shadow:
        0 0 5px white,
        0 0 10px #ff8fbd;

    border-radius: 8px;

    text-shadow: none;
}


/* ===== URL INFO ===== */

.url-info {

    background:
        linear-gradient(
            rgba(255, 100, 170, 0.10),
            rgba(255, 100, 170, 0.10)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3e70a544.63065420.gif");

    height: 256px;

    font-size: 0;

    background-size: cover;
    background-position: center;

    border-radius: 8px;

    border: 1px solid white !important;

    box-shadow:
        0 0 11px 4px white,
        0 0 20px #ff6eae;
}


/* ===== ICONS ===== */

.icon,
.award img {
    display: inline-block;

    height: 1.4em;
    width: 1.4em;

    aspect-ratio: 1/1;

    margin: 0 0.05em 0 0.1em;

    vertical-align: -0.3em;

    color: rgba(0,0,0,0);

    filter:
        brightness(2)
        drop-shadow(0 0 3px #ff6eae);
}


/* ===== DETAILS TABLE ===== */

.details-table td:first-child {

    background:
        linear-gradient(
            135deg,
            #d69ab6,
            #bd719b
        );

    border-radius: 8px;

    color: white;

    font-weight: bold;

    width: 33%;

    box-shadow:
        0 0 10px #ffffff,
        inset 3px 5px #f8dce8,
        inset -7px -9px #9e4e79;

    padding: 11px;
}

.details-table td {

    background:
        linear-gradient(
            135deg,
            #ffe5ef,
            #f7c6da
        );

    color: #71394f;

    vertical-align: top;

    border-radius: 8px;

    box-shadow:
        0 0 10px rgba(255,255,255,.8),
        inset 5px 6px rgba(255,255,255,.4),
        inset -5px -7px #c77b9f;

    padding: 14px;

    text-shadow: none;
}


/* ===== PROFILE INFO ===== */

.profile-info {

    background:
        linear-gradient(
            rgba(255, 122, 177, 0.20),
            rgba(255, 122, 177, 0.20)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3e003760.22876814.webp");

    background-position: center;

    height: 120px;

    border: 1px solid white;

    border-radius: 8px;

    box-shadow:
        0 0 10px white,
        0 0 15px #ff78b5;

    background-size: cover;
}


/* ===== BLURB SECTION ===== */

.profile .blurbs {

    background:
        linear-gradient(
            rgba(255, 145, 190, 0.20),
            rgba(255, 145, 190, 0.20)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3e3b8428.17026593.webp");

    background-size: cover;
    background-position: center;

    border-radius: 8px;

    padding: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #ff8fbd;
}


/* ===== FRIENDS SECTION ===== */

.profile .friends {

    background:
        linear-gradient(
            rgba(255, 165, 205, 0.18),
            rgba(255, 165, 205, 0.18)
        ),
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3e720ab8.23407270.webp");

    background-size: cover;
    background-position: center;

    border-radius: 8px;

    padding: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #ff8fbd;
}


/* ===== CONTACT SECTION ===== */

.profile .contact {

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3ea66e14.45635850.webp")
        center / cover;

    padding: 8px;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #ff8fbd;
}


/* ===== EXTRA PROFILE IMAGE ===== */

main::before {

    content: "";

    display: block;

    height: 90px;

    margin-bottom: 10px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3eae6293.84171085.webp")
        center / cover;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px white,
        0 0 15px #ff78b5;
}


/* ===== FRIEND IMAGES ===== */

.profile .friends .person img:not(.icon),
.comments-table td:first-child img:not(.icon) {

    max-width: 95px;
    max-height: 95px;

    display: block;

    margin: 0 auto;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 8px white,
        0 0 10px #ff78b5;

    filter:
        saturate(1.15)
        brightness(1.05);
}


/* ===== FRIEND NAMES ===== */

.profile .friends .person p {

    color: white;

    font-weight: bold;

    width: 100%;

    overflow-wrap: break-word;

    word-break: break-word;

    font-size: 100%;

    text-align: center;

    text-shadow:
        1px 1px #7a3154,
        0 0 5px #ff78b5;
}


/* ===== PROFILE PICTURE ===== */

img.pfp-fallback {

    border: 1px solid white;

    box-shadow:
        0 0 10px white,
        0 0 15px #ff78b5;

    border-radius: 8px;
}


/* ===== OTHER IMAGE ===== */

.profile .table-section {

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3f002541.36552347.webp")
        center / cover;

    padding: 8px;

    border-radius: 8px;
}


/* ===== SECTION ACCENT ===== */

.profile .blurbs .section h4 {

    margin: 0;

    color: white;

    text-transform: uppercase;

    text-shadow:
        1px 1px #74334f,
        0 0 5px #ff78b5;
}


/* ===== COUNT ===== */

.count {

    color: white;

    text-shadow:
        0 0 4px #ff6eae;
}


/* ===== MORE IMAGE ACCENTS ===== */

.profile .home-actions {

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3f431786.28229726.webp")
        center / cover;

    padding: 8px;

    border-radius: 8px;
}


/* ===== PINK SCROLLBAR ===== */

::-webkit-scrollbar {

    width: 12px;

    background-color: #fff0f6;
}

::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow:
        inset 0 0 6px rgba(102, 0, 0, 0.30);

    background:
        linear-gradient(
            #ffb1cf,
            #e979aa
        );

    border: 2px solid #fff0f6;
}

::-webkit-scrollbar-track {

    -webkit-box-shadow:
        inset 0 0 6px rgba(0,0,0,0.3);

    border-radius: 10px;

    background-color: #fff;
}


/* ===== ONLINE STATUS ===== */

.online {

    color: #ff75ad;

    font-weight: bold;

    font-size: 95%;

    filter:
        saturate(1.2)
        drop-shadow(0 0 3px white);
}


/* ===== IMAGE HOVER ===== */

img {

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

img:hover {

    transform: scale(1.03);

    filter:
        brightness(1.08)
        drop-shadow(0 0 5px #ff79b5);
}


/* ===== SOFT PINK SCANLINES ===== */

body::after {

    content: "";

    position: fixed;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 100, 170, 0.02) 50%
        );

    z-index: 999;

    background-size:
        100% 3px,
        3px 100%;

    pointer-events: none;
}


/* ===== FLOATING ANIMATION ===== */

.col,
main,
footer,
nav::before,
.online,
nav .links,
nav .top {

    animation:
        float 3s;

    animation-iteration-count: infinite;

    animation-timing-function:
        ease-in-out;
}


@keyframes float {

    0% {
        transform: translate(0, 0px);
    }

    50% {
        transform: translate(0, 5px);
    }

    100% {
        transform: translate(0, 0px);
    }
}


/* ===== FINAL PINK GLOW ===== */

.profile .contact,
.profile .url-info,
.profile .table-section,
.profile .blurbs,
.profile .friends,
.profile-info,
main,
nav .top {

    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.profile .contact:hover,
.profile .url-info:hover,
.profile .table-section:hover,
.profile .blurbs:hover,
.profile .friends:hover {

    box-shadow:
        0 0 10px white,
        0 0 20px #ff6eae,
        0 0 30px rgba(255, 110, 174, 0.5);
}


/* ===== FINAL IMAGE ===== */

.profile .url-info::after {

    content: "";

    display: block;

    position: absolute;

    right: 10px;
    bottom: 10px;

    width: 80px;
    height: 80px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3f7d6cd5.14805628.webp")
        center / cover;

    border-radius: 50%;

    border: 2px solid white;

    box-shadow:
        0 0 10px white,
        0 0 15px #ff6eae;
}


/* ===== EXTRA IMAGE ===== */

.profile .url-info {

    position: relative;
}


/* ===== FINAL DECORATIVE IMAGE ===== */

.profile .contact::after {

    content: "";

    display: block;

    width: 100%;

    height: 70px;

    margin-top: 8px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3f7e1a28.16219394.webp")
        center / cover;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 8px #ff78b5;
}


/* ===== LAST IMAGE ===== */

.profile .friends::after {

    content: "";

    display: block;

    width: 100%;

    height: 80px;

    margin-top: 10px;

    background:
        url("https://friendrewind.com/uploads/gallery/20897/img_6a63da3fb66224.54277718.gif")
        center / cover;

    border-radius: 8px;

    border: 1px solid white;

    box-shadow:
        0 0 10px #ff78b5;
}

</style>
<style>

/* Pink FriendRewind background */

html,
body {
    background-color: #ffb6d9 !important;
    background-image: none !important;
}

</style></style>