Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
red black

Author: swaggy_maggot
Category: Red
Created: April 24, 2026
the og swaggy_maggot layout B)
Comments (0)

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

<style>
<style>

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
.profile h1 { font-family: 'UnifrakturMaguntia'; text-align: center; font-size: xx-large; color: #ff4444; text-shadow: 2px 2px 0 #440000, 0 0 10px #ff0000; }

body{
background: url(https://i.pinimg.com/736x/28/3f/fe/283ffe5a4b6981153079ac1f2a4faca7.jpg) no-repeat fixed; 
background-size: cover;
text-transform: lowercase;
background-position-y: bottom;
}

nav .top{
margin-top: 10px;
background: url(https://i.pinimg.com/736x/02/7c/d3/027cd33e7ca80f1fbdb1e6e072b7ea6e.jpg); 
    background-size: cover;
    background-position-y: 210px;
    border: 2px solid #660000;
    border-radius: 0px;
    box-shadow: 0 0 15px #ff0000;
    filter: brightness(0.6) grayscale(50%);
}

nav .top .left .logo {
    width: 165px;
    height: 42px;
    filter: drop-shadow(2px 4px 6px black) brightness(1.2);
}

button, input {
    overflow: visible;
    background: #222222;
    color: #ff5555;
    border: 1px solid #aa2222;
    box-shadow: 0 0 8px #ff2222;
    border-radius: 0px;
}

nav .links {
    background-color: transparent;
    padding: 3.5px 16px;
    text-align: center;
    margin-top: 10px!important;
    margin-bottom: 10px!important;
}

nav .links a {
    text-decoration: none;
    color: #cccccc;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #aa0000;
    font-size: max(0.98em, 12px);
    font-weight: bold;
}

nav .links a:hover {
    text-decoration: underline wavy #ff5555;
    color: #ffffff;
}


nav .links .special a {
    color: #ff8888;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " // ";
    color: #aa2222;
    font-weight: bold;
    text-shadow: 0 0 5px red;
}

main{
background: url(https://i.pinimg.com/736x/af/9c/73/af9c73fe967932618211aeca7275b01e.jpg); /* Dark wood/leather texture */
    border: 2px solid #550000;
    box-shadow: 0 0 25px #ff3333, inset 0 0 10px #330000;
    border-radius: 0px;
    color: #dddddd;
    text-shadow: 1px 1px 2px black;
    background-position-x: center;
    filter: brightness(0.9) contrast(1.1);
}

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background-color: #111111;
    color: #aa2222;
    border-top: 1px dashed #aa2222;
}

a {
    color: #ff7777;
    text-decoration: none;
    font-weight: bold;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #ff0000;
    text-decoration: underline overline dotted #ff5555;
    font-style: normal;
    text-shadow: 0 0 8px red;
}

.comments-table td:first-child, .music-table td:first-child {
    background: #330000;
    text-align: center;
    font-weight: bold;
    width: 38%;
    color: #ff9999;
    border: 1px solid #880000;
}

.comments-table td, .music-table td {
    background: #1a0000;
    vertical-align: top;
    color: #cccccc;
    border: 1px solid #550000;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: #220000;
    color: #ff6666;
    border-radius: 0px;
    padding: 2px 7px;
    box-shadow: 0 0 10px #ff2222, 0 0 5px #990000;
    border-left: 4px solid #ff0000;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: none;
    margin: 10px 0;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: #220000;
    color: #ff6666;
    padding: 2px 7px;
    box-shadow: 0 0 8px #ff0000;
    border-radius: 0px;
    border-right: 4px solid #ff0000;
    text-align: right;
}

.url-info{
background: url(https://media.tenor.com/8qL1fHcTpFUAAAAi/dry-bones-dance.gif); 
    height: 256px;
    font-size: 0px;
    background-size: cover;
    border-radius: 0px;
    border: 2px solid #770000 !important;
    box-shadow: 0 0 20px 4px #ff3333;
    filter: grayscale(30%) brightness(0.7);

}

.icon, .award img {
    display: inline-block;
    height: 1.4em;
    width: 1.4em;
    aspect-ratio: 1/1;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
    filter: invert(1) brightness(10) drop-shadow(0 0 2px red);
}

.details-table td:first-child {
    background: #330000;
    border-radius: 0px;
    color: #ffaaaa;
    font-weight: bold;
    width: 33%;
    box-shadow: 0 0 15px #ff2222, inset -3px -3px #550000, inset 3px 3px #aa0000;
    padding: 11px;
    border: 1px solid #aa2222;
}

.details-table td {
    background: #1f1f1f;
    vertical-align: top;
    border-radius: 0px;
    box-shadow: 0 0 15px #ff2222, inset -2px -2px #770000, inset 2px 2px #440000;
    padding: 14px;
    color: #eeeeee;
    border: 1px solid #770000;
}

.profile-info{
background: url(https://i.pinimg.com/736x/68/e7/31/68e7311a305c4fe4cff2ea4cf4139991.jpg); 
    background-position-y: center;
    height: 120px;
    border: 2px solid #660000;
    border-radius: 0px;
    box-shadow: 0 0 20px #ff0000;
    background-size: cover;
    filter: brightness(0.6) contrast(1.3);
}

.profile .blurbs .section h4 {
    margin: 0;
    color: #ff7777;
    text-transform: uppercase;
    border-bottom: 1px dashed #aa2222;
}

.count {
    color: #ff5555;
    font-weight: bold;
    text-shadow: 0 0 5px red;
}

.profile .friends .person p {
    color: inherit;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

img.pfp-fallback {
    border: 2px solid #aa2222;
    box-shadow: 0 0 20px #ff0000;
    border-radius: 0px;
    filter: grayscale(50%);
}

::-webkit-scrollbar {
    width: 12px;
    background-color: #111111;
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px #ff0000;
    background-color: #440000;
    border: 1px solid #aa2222;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #ff0000;
    border-radius: 0px;
    background-color: #222222;
}

.profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
    max-width: 95px;
    max-height: 95px;
    display: block;
    margin: 0 auto;
    filter: grayscale(70%) contrast(1.2) brightness(0.8);
    border: 1px solid #aa2222;
}
.online {
    color: #ff3333;
    font-weight: bold;
    font-size: 95%;
    filter: drop-shadow(0 0 5px red);
    text-transform: uppercase;
}


body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: repeating-linear-gradient(
        0deg, 
        rgba(0,0,0,0.15) 0px,    
        rgba(0,0,0,0.15) 1px, 
        transparent 1px, 
        transparent 2px
    );
    z-index: 2;
    background-size: 100% 2px;
    pointer-events: none;
}


.col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 5px);
}
100% {
transform: translate(0, -0px);
}

}
</style>


<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol338.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/10/14/tiny-skull-crossbones.html" target="_blank" title="Tiny Skull Crossbones"><img src="https://cur.cursors-4u.net/cursor.png" alt="Tiny Skull Crossbones" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
} </style>

<style>
button:hover {
  animation: shake 0.5s;

  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
} </style>

<style>

.online{content:url("https://media1.tenor.com/m/LsXpQfBUDHkAAAAC/skull-skulls.gif");}

</style>

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url(https://media1.tenor.com/m/roZsKmdRH6cAAAAC/yes.gif);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


<style>
.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/Hk6D7BxQ/868-sin-t-tulo-20240429140043.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style></style>