Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
EVERYMANHYBRID LAYOUT

Author: BAD HABIT
Category: PURPLE
Created: May 13, 2026
YEAH THE NAME JUST TELLS EVERYTHING
Comments (0)

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

<style>
<style>
  :root {
    --bgimage: url(https://b.catgirlsare.sexy/zKsThIJdt-D3.gif); 
    --gradienttop:    rgba(0, 0, 0, 0.9); /* NOTE: Beginning color for background gradient, transparent */
    --gradientbottom: rgba(50, 0, 100, 0.4); /* NOTE: Bottom color for background gradient, transparent */
    --bgcolor:        #0a000f; /* NOTE: Color of profile text area */
    --textcolor:      #ffffff; /* NOTE: Color of text */
    --color1:         #643cdd; /* NOTE: First color, links, header */
    --color2:         #b366ff; /* NOTE: Second color, titles */
    --border1:        double #643cdd 4px; /* NOTE: Border of whole avatar area, [border-style #RRGGBB width] */
    --border2:        double #b366ff 4px; /* NOTE: Border of inner boxes, format same as above */
    --border3:        solid #643cdd 1px; /* NOTE: Border of inner boxes, format same as above */

  body {
    background: linear-gradient(var(--gradienttop), var(--gradientbottom)),
    var(--bgimage) repeat top left; margin: 20px; background-attachment: fixed;
    
  }
  main {
    background-color: var(--bgcolor); color: var(--textcolor);
  }
  .top, nav .links {background-color: var(--color1)!important;}
  .container {outline: var(--border1); background-color: var(--bgcolor);}
  .profile-info, .inner h3 {margin: 0; padding: 0px 5px; justify-content: flex-end;}
  h1 {font-family: "Title"; font-size: 2em!important; color: var(--color2); font-weight: normal!important;}
  a {color: var(--color1)}
  a:hover, .person p:hover  {background-color: var(--textcolor)!important; color: var(--color1);}
  main p {font-size: 16px!important;}
  h4 {color: var(--color2)!important; font-size: 1.1em!important; font-weight: normal!important;}
  .heading {background-color: var(--color2)!important;}
  .heading h4, .more {color: var(--textcolor)!important;}
  .profile .contact, .profile .url-info, .profile .table-section, .blurbs, .friends {border: var(--border2);}
  td {background: none!important;}
  .details-table td:first-child {color: var(--color2);}
  .person p, .count {color: var(--color1)!important;}
  #comments {margin-top: 20px;}
  .comments-table, .comments-table td, .comment-replies {border: none; outline:none;}
  .comments-table, .comments-table td, .comment-replies {border: var(--border3)!important;}
  footer {background-color: var(--bgcolor); color: var(--textcolor);}
  @keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.90626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.83891;
    }
    30% {
      opacity: 0.65583;
    }
    35% {
      opacity: 0.67807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.84693;
    }
    50% {
      opacity: 0.96019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.71988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.71428;
    }
    85% {
      opacity: 0.70419;
    }
    90% {
      opacity: 0.7003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
  }
  @keyframes textShadow {
    0% {
      text-shadow: 0.8389924193300864px 0 1px rgba(100,100,100,0.4), -0.8389924193300864px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    5% {
      text-shadow: 1.6px 0 1px rgba(100,100,100,0.4), -1.6px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    10% {
      text-shadow: 0.04956275843481219px 0 1px rgba(100,100,100,0.4), -0.04956275843481219px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    15% {
      text-shadow: 0.80218538552878136px 0 1px rgba(100,100,100,0.4), -0.80218538552878136px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    20% {
      text-shadow: 2px 0 1px rgba(100,100,100,0.4), -2px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    25% {
      text-shadow: 1.2125630401149584px 0 1px rgba(100,100,100,0.4), -1.2125630401149584px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    30% {
      text-shadow: 0.7015590085143956px 0 1px rgba(100,100,100,0.4), -0.7015590085143956px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    35% {
      text-shadow: 1.4px 0 1px rgba(100,100,100,0.4), -1.4px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    40% {
      text-shadow: 0.9px 0 1px rgba(100,100,100,0.4), -0.9px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    45% {
      text-shadow: 0.6px 0 1px rgba(100,100,100,0.4), -0.6px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    50% {
      text-shadow: 0.08084290417898504px 0 1px rgba(100,100,100,0.4), -0.08084290417898504px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    55% {
      text-shadow: 2px 0 1px rgba(100,100,100,0.4), -2px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    60% {
      text-shadow: 0.8px 0 1px rgba(100,100,100,0.4), -0.8px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    65% {
      text-shadow: 1px 0 1px rgba(100,100,100,0.4), -1px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    70% {
      text-shadow: 0.48874025155497314px 0 1px rgba(100,100,100,0.4), -0.48874025155497314px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    75% {
      text-shadow: 0.8948491305757957px 0 1px rgba(100,100,100,0.4), -0.8948491305757957px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    80% {
      text-shadow: 0.0833037308038857px 0 1px rgba(100,100,100,0.4), -0.0833037308038857px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    85% {
      text-shadow: 0.09769827255241735px 0 1px rgba(100,100,100,0.4), -0.09769827255241735px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    90% {
      text-shadow: 0.443339761481782px 0 1px rgba(100,100,100,0.4), -0.443339761481782px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    95% {
      text-shadow: 0.1841838852799786px 0 1px rgba(100,100,100,0.4), -0.1841838852799786px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    100% {
      text-shadow: 0.6208764473832513px 0 1px rgba(100,100,100,0.4), -0.6208764473832513px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
  }
  body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
  }
  body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
  body {
    animation: textShadow 1.6s infinite;
  }
</style>





<style>
nav img.logo {
content:url("https://i.ibb.co/JLf4m2Y/d7c6w27-a7e8bc0c-584d-4094-b008-63b84110dc50.gif");
    }
</style>

<style>
main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.ibb.co/bRqXr96q/everymanhybrid-facebook-banner-by-heliumloaded94-d5zutsz-fullview.jpg');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>

 
<style>
.container {
   border: 20px solid;
   border-image: url('https://files.catbox.moe/1wovgb.png') repeat;
   border-image-slice: 75;
   border-image-outset: 0px;
}
</style></style>