← Back to Layouts
LOVELY COMPLEX ★ 2009

Name: FriendRewind
Author: FriendRewind
Author: IrumiIsCookies
Category: Colorful
Created: November 7, 2026
I'm so dope boi
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":"frame36","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 */

.profile-pic{position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;}
.profile-pic img{position:absolute;top:8%!important;left:8%!important;width:84%!important;height:84%!important;object-fit:cover;z-index:1;border-radius:12px!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/1/img_69704c9cd21a47.02288483.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>

/* =====================================================
   LOVELY COMPLEX ★ 2009 SHOUJO SCRAPBOOK
   Platform: FriendRewind
   Palette: User's original 10 colours
   ===================================================== */


/* -----------------------------------------------------
   01. COLOUR PALETTE + GLOBAL SETTINGS
   ----------------------------------------------------- */

:root {
    --gold: #E2A100;
    --mustard: #D9B300;
    --ochre: #A97605;
    --lemon: #E9D300;
    --pink: #E92989;
    --paper: #FFF9FF;
    --orange: #EE8C18;
    --peach: #FFD7A6;
    --blue: #2FA8CB;
    --rust: #AE4700;

    --ink: #593716;
    --white: #FFF9FF;

    --outline: 2px solid var(--ochre);
    --sticker-shadow: 4px 4px 0 var(--ochre);

    --display-font: "Trebuchet MS", sans-serif;
    --body-font: Tahoma, Verdana, sans-serif;
}


/* -----------------------------------------------------
   02. PAGE BACKGROUND
   Creamy paper with a retro dot pattern
   ----------------------------------------------------- */

body.profile-page {
    background-color: var(--paper);

    background-image:
        radial-gradient(
            circle,
            rgba(169, 118, 5, 0.22) 1px,
            transparent 1.5px
        );

    background-size: 14px 14px;
    background-attachment: fixed;

    color: var(--ink);
    font-family: var(--body-font);
    font-size: 13px;
    line-height: 1.65;
}


/* -----------------------------------------------------
   03. TOP SITE NAVIGATION
   ----------------------------------------------------- */

body.profile-page nav {
    font-family: var(--display-font);
    font-weight: bold;
}

body.profile-page nav .top {
    background-color: var(--pink);
    color: var(--white);

    border-bottom: 4px solid var(--rust);
    box-shadow: 0 4px 0 var(--peach);
}

body.profile-page nav .links {
    background-color: var(--gold);
    color: var(--ink);

    border-bottom: 3px solid var(--ochre);
}

body.profile-page nav a {
    color: var(--white);
    text-decoration: none;
    font-weight: bold;
    transition: 0.2s ease;
}

body.profile-page nav .links a {
    color: var(--ink);
    padding: 5px 8px;
}

body.profile-page nav a:hover {
    background-color: var(--blue);
    color: var(--white);
}


/* -----------------------------------------------------
   04. MAIN PROFILE WRAPPER
   ----------------------------------------------------- */

body.profile-page .master-container {
    max-width: 1000px;
    width: 94%;

    margin: 30px auto;
    padding: 12px;

    background-color: var(--paper);
    border: 3px solid var(--ochre);

    box-shadow:
        7px 7px 0 var(--peach),
        12px 12px 0 rgba(233, 41, 137, 0.16);
}


/* -----------------------------------------------------
   05. ASYMMETRICAL PROFILE LAYOUT
   Left column = approximately 40%
   Right column = remaining space
   ----------------------------------------------------- */

body.profile-page .row.profile {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

body.profile-page .row.profile > .col.w-40.left {
    flex: 0 0 38%;
    min-width: 0;

    position: relative;
    top: 12px;
}

body.profile-page .row.profile > .col.right {
    flex: 1 1 62%;
    min-width: 0;

    position: relative;
    top: -4px;
}


/* -----------------------------------------------------
   06. PROFILE NAME + TOP IDENTITY AREA
   ----------------------------------------------------- */

body.profile-page .profile-name,
body.profile-page .master-container h1 {
    color: var(--pink);
    font-family: var(--display-font);
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 2px;

    text-shadow:
        2px 2px 0 var(--white),
        4px 4px 0 var(--peach);
}


/* -----------------------------------------------------
   07. PROFILE PICTURE
   A scrapbook-style photo frame
   ----------------------------------------------------- */

body.profile-page .profile-pic {
    background-color: var(--white);
    padding: 9px;

    border: 3px solid var(--pink);

    box-shadow:
        5px 5px 0 var(--gold),
        9px 9px 0 var(--peach);

    transform: rotate(-1deg);
    margin-bottom: 18px;
}

body.profile-page .profile-pic img {
    max-width: 100%;
    height: auto;
}


/* -----------------------------------------------------
   08. PROFILE MODULES + CARDS
   ----------------------------------------------------- */

body.profile-page .master-container .section {
    background-color: var(--paper);
    color: var(--ink);

    border: 2px solid var(--ochre);
    padding: 12px;

    overflow-wrap: anywhere;
}

body.profile-page .master-container .heading {
    background-color: var(--gold);
    color: var(--white);

    border: 2px solid var(--ochre);
    border-bottom: 0;

    padding: 8px 10px;

    font-family: var(--display-font);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;

    text-shadow: 1px 1px 0 var(--rust);
}

body.profile-page .master-container .heading a {
    color: var(--white);
}


/* Alternate section heading colours */

body.profile-page .col.left .heading {
    background-color: var(--orange);
}

body.profile-page .col.right .heading {
    background-color: var(--pink);
}

body.profile-page .master-container .heading:hover {
    background-color: var(--blue);
}


/* -----------------------------------------------------
   09. ABOUT ME + BIOGRAPHY
   ----------------------------------------------------- */

body.profile-page .blurbs .section {
    background-color: var(--peach);

    background-image:
        linear-gradient(
            transparent 95%,
            rgba(169, 118, 5, 0.13) 95%
        );

    background-size: 100% 24px;
}

body.profile-page .blurbs .heading {
    background-color: var(--pink);
}


/* -----------------------------------------------------
   10. BASIC DETAILS + INTERESTS
   ----------------------------------------------------- */

body.profile-page .general-about .section,
body.profile-page .url-info .section {
    background-color: var(--lemon);
}

body.profile-page .table-section {
    margin-bottom: 18px;
}

body.profile-page .table-section td {
    padding: 7px;
    border-color: var(--ochre);
}

body.profile-page .table-section td:first-child {
    background-color: var(--peach);
    color: var(--rust);
    font-weight: bold;
}

body.profile-page .table-section td:last-child {
    background-color: var(--paper);
}


/* -----------------------------------------------------
   11. CONTACT / ADD FRIEND BUTTONS
   ----------------------------------------------------- */

body.profile-page .contact {
    background-color: var(--pink);
    border: 3px solid var(--rust);

    padding: 10px;
    margin: 18px 0;

    box-shadow: var(--sticker-shadow);
}

body.profile-page .contact a {
    color: var(--white);
    font-weight: bold;
}

body.profile-page .contact a:hover {
    color: var(--lemon);
}


/* -----------------------------------------------------
   12. FRIENDS GRID
   ----------------------------------------------------- */

body.profile-page .friends {
    background-color: var(--lemon);
    padding: 10px;
}

body.profile-page .friends .section {
    background-color: var(--peach);
}

body.profile-page .friends img {
    border: 3px solid var(--white);
    outline: 2px solid var(--pink);

    box-shadow: 3px 3px 0 var(--ochre);
}

body.profile-page .friends a {
    color: var(--rust);
}


/* -----------------------------------------------------
   13. COMMENTS
   ----------------------------------------------------- */

body.profile-page #comments .comments-table {
    background-color: var(--paper);
    border: 2px dashed var(--pink);
    padding: 8px;
}

body.profile-page #comments .comments-table td {
    border-color: var(--peach);
    padding: 8px;
}

body.profile-page #comments .comments-table tr:nth-child(odd) {
    background-color: var(--peach);
}

body.profile-page #comments .comments-table tr:nth-child(even) {
    background-color: var(--paper);
}


/* -----------------------------------------------------
   14. LINKS + HOVER EFFECTS
   ----------------------------------------------------- */

body.profile-page .master-container a {
    color: var(--rust);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.profile-page .master-container a:hover {
    color: var(--pink);
    text-decoration: underline;
}


/* -----------------------------------------------------
   15. HEADINGS + TYPOGRAPHY
   ----------------------------------------------------- */

body.profile-page .master-container h2,
body.profile-page .master-container h3 {
    font-family: var(--display-font);
    color: var(--rust);
    letter-spacing: 1px;
}

body.profile-page .master-container p {
    line-height: 1.8;
}

body.profile-page .master-container strong,
body.profile-page .master-container b {
    color: var(--rust);
}

body.profile-page .master-container em,
body.profile-page .master-container i {
    color: var(--pink);
}


/* -----------------------------------------------------
   16. SCRAPBOOK STICKER EFFECTS
   ----------------------------------------------------- */

body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview {
    margin-bottom: 22px;
}

body.profile-page .blog-preview .section,
body.profile-page .photos-preview .section,
body.profile-page .videos-preview .section {
    box-shadow: 4px 4px 0 var(--peach);
}

body.profile-page .blog-preview .heading {
    background-color: var(--blue);
}

body.profile-page .photos-preview .heading {
    background-color: var(--orange);
}

body.profile-page .videos-preview .heading {
    background-color: var(--lemon);
    color: var(--rust);
    text-shadow: none;
}


/* -----------------------------------------------------
   17. IMAGES + DECORATIVE BORDERS
   ----------------------------------------------------- */

body.profile-page .master-container img {
    max-width: 100%;
}

body.profile-page .master-container img:not(.profile-pic img) {
    border-color: var(--pink);
}

body.profile-page hr {
    border: 0;
    border-top: 3px dashed var(--orange);
    margin: 20px 0;
}


/* -----------------------------------------------------
   18. PROFILE MUSIC BAR
   ----------------------------------------------------- */

body.profile-page .music-bar {
    background-color: var(--gold);
    color: var(--white);

    border-top: 4px solid var(--rust);
    box-shadow: 0 -4px 0 var(--peach);
}

body.profile-page .music-bar a {
    color: var(--white);
}

body.profile-page .music-bar a:hover {
    color: var(--lemon);
}


/* -----------------------------------------------------
   19. SCROLLBAR
   ----------------------------------------------------- */

body.profile-page ::-webkit-scrollbar {
    width: 12px;
}

body.profile-page ::-webkit-scrollbar-track {
    background-color: var(--peach);
}

body.profile-page ::-webkit-scrollbar-thumb {
    background-color: var(--orange);
    border: 2px solid var(--peach);
}

body.profile-page ::-webkit-scrollbar-thumb:hover {
    background-color: var(--pink);
}


/* -----------------------------------------------------
   20. TEXT SELECTION
   ----------------------------------------------------- */

body.profile-page ::selection {
    background-color: var(--pink);
    color: var(--white);
}


/* -----------------------------------------------------
   21. CURSOR
   Replace the URL with a direct image URL if desired.
   ----------------------------------------------------- */

body.profile-page,
body.profile-page a,
body.profile-page button {
    cursor: url("YOUR-CURSOR-URL.cur"), auto;
}


/* -----------------------------------------------------
   22. SMALL SCREEN FALLBACK
   ----------------------------------------------------- */

@media (max-width: 650px) {

    body.profile-page .master-container {
        width: auto;
        max-width: 100%;
        margin: 12px auto;
        padding: 8px;
    }

    body.profile-page .row.profile {
        display: block;
    }

    body.profile-page .row.profile > .col.w-40.left,
    body.profile-page .row.profile > .col.right {
        width: auto;
        max-width: 100%;
        position: static;
    }

    body.profile-page .row.profile > .col.w-40.left {
        margin-bottom: 20px;
    }
}

/* END: LOVELY COMPLEX ★ 2009 */

</style>