← 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
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>