← Back to Layouts
Modern Facebook Profile

Name: FriendRewind
Author: FriendRewind
Author: Dr.Awesome Gamer
Category: Modern
Created: September 26, 2026
This is supposed to look like the modern Facebook profile
See Layout
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":"","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":3,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":15,"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 */

.contact {
    border: 3px solid #4169E1 !important;
    border-radius: 5px !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 1px solid #DAA520 !important;
    border-radius: 15px !important;
  }
</style><style>


/* FR_MANUAL_EXTRAS */
/* --- 1. GLOBAL PAGE BACKGROUND --- */
body {
  background-color: #f0f2f5 !important; /* Modern FB light gray background */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  color: #050505 !important;
}

/* --- 2. MAIN CONTAINER & BOXES --- */
/* Turns classic retro boxes into clean, white modern cards with soft shadows */
.profile, .container, 
.profile .blurbs, .profile .friends, 
.profile .contact, .profile .table-section, .url-info {
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  padding: 16px !important;
  margin-bottom: 12px !important;
}

/* --- 3. HEADERS (Classic Blue Accent) --- */
/* Strips away old gradients and uses a flat, clean look with FB blue text */
.profile .blurbs .heading, 
.profile .friends .heading,
.profile .contact .heading, 
.profile .table-section .heading {
  background: transparent !important;
  color: #1877f2 !important; /* Facebook Blue */
  border-bottom: 1px solid #e4e6eb !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding-bottom: 8px !important;
  border-radius: 0 !important;
}

/* --- 4. PROFILE PICTURE & AVATAR --- */
.profile-pic img {
  border-radius: 50% !important; /* Modern circular profile picture */
  border: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  padding: 0 !important;
}

/* --- 5. LINKS & BUTTONS --- */
a {
  color: #1877f2 !important;
  text-decoration: none !important;
}

a:hover {
  text-decoration: underline !important;
}

/* --- 6. CLEAN UP NAVIGATION BAR --- */
nav .links, nav .top {
  background-color: #ffffff !important;
  border-bottom: 1px solid #e4e6eb !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

nav .links a {
  color: #65676b !important;
  font-weight: 600;
}

nav .links a:hover {
  background-color: #f2f3f5 !important;
  color: #1877f2 !important;
  border-radius: 6px;
}
</style>