← Back to Layouts
:D

Name: FriendRewind
Author: FriendRewind
Author: Фелиция
Category: Classic
Created: October 8, 2026
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":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"file:///Users/varvara/Downloads/5ee78ef60e15c503cdfc1e33eb03bbf1.png","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"file:///Users/varvara/Downloads/5ee78ef60e15c503cdfc1e33eb03bbf1.png","navBgMode":"tile","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 */

body, body.profile-page {
  background-image: url("file:///Users/varvara/Downloads/5ee78ef60e15c503cdfc1e33eb03bbf1.png") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

.myspace-header .top-nav {
  background-image: url("file:///Users/varvara/Downloads/5ee78ef60e15c503cdfc1e33eb03bbf1.png");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
}

.myspace-header .main-nav-wrapper {
  background-image: url("file:///Users/varvara/Downloads/5ee78ef60e15c503cdfc1e33eb03bbf1.png");
  background-repeat: repeat;
  background-size: auto;
  background-position: center;
}
</style><style>


/* FR_MANUAL_EXTRAS */
/* =========================================================
   FELICIA // HEISEI RETRO × WANCORЕ
   old japanese web / weird personal homepage
   ========================================================= */


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

body {
    background-color: #eee4d1;

    background-image:
        linear-gradient(
            rgba(238, 228, 209, 0.88),
            rgba(238, 228, 209, 0.88)
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 3px,
            rgba(80, 55, 40, 0.035) 4px
        );

    color: #3d302c;

    font-family:
        "MS Gothic",
        "MS PGothic",
        "Arial",
        sans-serif;

    image-rendering: pixelated;
}


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

a {
    color: #a94f61;
    text-decoration: underline;
}

a:hover {
    color: #315f72;

    text-shadow:
        1px 0 #e8a6b0,
        -1px 0 #e8a6b0;
}


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

main,
.container,
.profile-container {

    background: #f4ead8;

    border:
        2px solid #513f39;

    box-shadow:
        5px 5px 0 #b99e8b,
        inset 0 0 0 2px #fff7e8;

    border-radius: 0;
}


/* =========================
   PROFILE HEADER
   ========================= */

.profile-header {

    background:
        repeating-linear-gradient(
            90deg,
            #d48b98 0px,
            #d48b98 8px,
            #c77988 8px,
            #c77988 16px
        );

    border-bottom:
        3px double #513f39;

    color: #fff8e9;

    padding: 12px;

    text-shadow:
        2px 2px #70434c;
}


/* =========================
   PROFILE NAME
   ========================= */

h1 {

    font-family:
        "MS Gothic",
        "MS PGothic",
        monospace;

    color: #fff4dc;

    background: #3c5964;

    display: inline-block;

    padding:
        4px 12px;

    border:
        2px solid #2c3d43;

    box-shadow:
        3px 3px 0 #7e5960;

    letter-spacing: 2px;

    text-shadow:
        1px 1px #263137;
}


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

h2,
h3,
h4 {

    color: #914858;

    font-family:
        "MS Gothic",
        "MS PGothic",
        monospace;

    letter-spacing: 1px;

    border-bottom:
        2px dotted #92766b;

    padding-bottom: 4px;
}


/* =========================
   AVATAR
   ========================= */

.profile-pic {

    border:
        3px solid #3e5961;

    border-radius: 0;

    padding: 4px;

    background: #fff4dc;

    box-shadow:
        4px 4px 0 #bd7d89;

    image-rendering: pixelated;
}

.profile-pic:hover {

    transform:
        translate(-2px, -2px);

    box-shadow:
        6px 6px 0 #bd7d89;
}


/* =========================
   GENERAL BOXES
   ========================= */

.blurbs,
.friends-grid,
.comments,
.profile-section,
.profile-box {

    background:
        #fff5df;

    border:
        2px solid #756056;

    border-radius: 0;

    box-shadow:
        3px 3px 0 #c39e91;

    padding: 8px;
}


/* =========================
   BOX HEADERS
   ========================= */

.section-title,
.heading,
.box-title {

    background:
        #3e5961;

    color:
        #fff4df;

    border:
        2px solid #293c42;

    padding:
        4px 7px;

    font-family:
        "MS Gothic",
        monospace;

    font-size:
        13px;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

    box-shadow:
        2px 2px 0 #bd7d89;
}


/* =========================
   MINI PROFILE LABELS
   ========================= */

.profile-section strong,
.profile-box strong {

    color: #a34f60;
}


/* =========================
   FRIEND GRID
   ========================= */

.friends-grid img {

    border:
        2px solid #59463f;

    border-radius:
        0;

    padding:
        2px;

    background:
        #fff5df;

    filter:
        saturate(0.8)
        contrast(0.95);

    transition:
        0.15s;
}

.friends-grid img:hover {

    transform:
        translateY(-2px)
        rotate(-1deg);

    filter:
        saturate(1.1);

    box-shadow:
        3px 3px 0 #bd7d89;
}


/* =========================
   COMMENTS
   ========================= */

#comments {

    background:
        #eee0ca;

    border:
        2px solid #604b43;

    border-radius:
        0;
}

#comments .comment {

    border-bottom:
        1px dashed #a88b7e;

    padding:
        8px;
}


/* =========================
   BUTTONS
   ========================= */

button,
input[type="submit"],
.btn {

    background:
        #d28a96;

    color:
        #fff5e3;

    border:
        2px solid #67434b;

    border-radius:
        0;

    padding:
        5px 10px;

    font-family:
        "MS Gothic",
        monospace;

    box-shadow:
        2px 2px 0 #604a42;

    cursor:
        pointer;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {

    background:
        #3f626d;

    color:
        white;

    transform:
        translate(1px, 1px);

    box-shadow:
        1px 1px 0 #604a42;
}


/* =========================
   INPUTS
   ========================= */

input,
textarea,
select {

    background:
        #fff8e9;

    color:
        #3d302c;

    border:
        2px solid #776158;

    border-radius:
        0;

    padding:
        5px;

    font-family:
        "MS Gothic",
        monospace;
}

input:focus,
textarea:focus,
select:focus {

    outline:
        none;

    border-color:
        #9c5262;

    background:
        #fff1e4;
}


/* =========================
   RETRO STATUS BAR
   ========================= */

.profile-status {

    background:
        #293f47;

    color:
        #e9dcc7;

    border:
        2px solid #172a30;

    padding:
        5px;

    font-family:
        monospace;

    font-size:
        11px;

    box-shadow:
        3px 3px 0 #bd7d89;
}


/* =========================
   PIXEL DIVIDERS
   ========================= */

hr {

    border:
        none;

    height:
        8px;

    background:

        repeating-linear-gradient(
            90deg,

            #a85262 0px,
            #a85262 8px,

            transparent 8px,
            transparent 12px,

            #41616b 12px,
            #41616b 20px,

            transparent 20px,
            transparent 24px
        );

    margin:
        14px 0;
}


/* =========================
   SELECTION
   ========================= */

::selection {

    background:
        #a95667;

    color:
        #fff5df;
}


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

::-webkit-scrollbar {

    width:
        12px;
}

::-webkit-scrollbar-track {

    background:
        #d9c7b0;

    border-left:
        1px solid #806a5e;
}

::-webkit-scrollbar-thumb {

    background:
        #a95b68;

    border:
        2px solid #e8dbc5;
}

::-webkit-scrollbar-thumb:hover {

    background:
        #3f626d;
}


/* =========================
   OLD WEB EFFECT
   ========================= */

body::after {

    content: "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        9999;

    opacity:
        0.045;

    background-image:

        repeating-linear-gradient(
            0deg,

            rgba(40,20,20,0.5) 0px,
            rgba(40,20,20,0.5) 1px,

            transparent 1px,
            transparent 3px
        );
}


/* =========================
   WANCORЕ GLITCH
   ========================= */

@keyframes oldWebGlitch {

    0% {
        transform: translate(0);
    }

    94% {
        transform: translate(0);
    }

    95% {
        transform: translate(-2px, 1px);
    }

    96% {
        transform: translate(2px, -1px);
    }

    97% {
        transform: translate(0);
    }
}

h1,
.profile-header {

    animation:
        oldWebGlitch 7s infinite;
}


/* =========================
   TINY PIXEL FEEL
   ========================= */

img {

    image-rendering:
        auto;
}

.gif,
.pixel {

    image-rendering:
        pixelated;
}


/* =========================
   FINAL DECORATIVE FEEL
   ========================= */

.profile-container::before {

    content:
        "♡ FELICIA'S PERSONAL WEBPAGE // 2000—2005 ♡";

    display:
        block;

    background:
        #c97c89;

    color:
        #fff2df;

    border:
        2px solid #61434a;

    padding:
        4px 7px;

    margin-bottom:
        8px;

    font-family:
        monospace;

    font-size:
        10px;

    letter-spacing:
        1px;
}
</style>