Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
That0neGuy_101

Author: that.0neguy
Category: >:[
Created: June 24, 2026
Comments (0)

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

<style>
<style>
@keyframes navBob {
0% {margin-top: 10px;}
50% {margin-top: 20px;}
100% {margin-top: 10px;}
}

body {
    background: url("https://i.pinimg.com/736x/5a/19/62/5a1962a4426812ec35d4d9afd732aedb.jpg") center center / cover no-repeat fixed;
}

.top {
animation-name: navBob;
animation-duration: 3.5s;
animation-iteration-count: infinite;
}

main {
background-color: rgba(0, 0, 5, 0.1);
color: rgb(247, 247, 250);
border-radius: 20px;
margin-top: 40px;
margin-bottom: 30px;
}

p, h3, h5 {
text-align: justify;
text-justify: inter-word;
}

.pfp-fallback {
box-shadow: 0 0 5px 5px rgba(10, 10, 10, 0.2);
}

a, .count, h1, h3 {
color: rgb(250, 249, 247) !important;
text-shadow: 0 0 8px rgba(18, 12, 1, 0.8) !important;
}

.inner .section h4 {
color: rgb(0, 0, 5) !important;
}

nav {
border-radius: 30px !important;
}

nav .top {
background-color: rgba(0, 0, 0, 0.35) !important;
background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0)
) !important;

}
nav .links {
background-color: rgba(0, 0, 0, 0);
text-align: center;
}

.contact .icon {
content: url(https://i.imgur.com/5aJai0G.png);
width: 20px;
height: 20px;
}

hr {
  color: #ffffff; }important


.details-table td, .comments-table td {
background-color: rgba(0, 0, 0, 0) !important;
color: rgb(255, 255, 255) !important;
}

.heading {
    background-image: url("https://i.imgur.com/bhESlIV.jpeg") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
  /* About Me / Bio */
.bio {
    background: url("https://i.imgur.com/EPoQriD.jpeg") center/cover no-repeat !important;
}
.heading {
background-color: rgba(0, 0, 0, 0) !important;
color: rgb(255, 255, 255) !important;
text-align: center;
}

footer {
background-color: rgba(0, 0, 0, 0);
background-image: linear-gradient(rgba(0, 0, 10, 0), rgba(0, 0, 10, 0.1), rgba(0, 0, 10, 0.05), rgba(0, 0, 10, 0));
color: rgb(10, 10, 10);
}</style>


CD Profile Picture
<style>
.profile-pic{
    position:relative !important;
    overflow:visible !important;
}

/* avatar */
.profile-pic img{
    position:relative;
    z-index:2;
}

/* CD */
.profile-pic::before{
    content:"";
    position:absolute;

    width:150px;
    height:150px;

    top:5px;
    left:-20px;

    background-image:url("https://i.imgur.com/Pdh8W3r.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    z-index:0;

    animation: spin 5s linear infinite;

    transition: transform 0.4s ease, left 0.4s ease;
}

/* spin animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* hover pop-out */
.profile-pic:hover::before{
    left: -80px;
    transform: scale(1.15) rotate(10deg);
}

/* overlay */
.profile-pic::after{
    content:"";
    position:absolute;

    top:0;
    right:0;
    bottom:0;
    left:0;

    background:
        url("https://fluorescent-lights.neocities.org/f0rzNHe.png"),
        linear-gradient(
            150deg,
            rgba(255,255,255,.4),
            rgba(255,255,255,.2),
            rgba(255,255,255,.1),
            rgba(255,255,255,.6)
        );

    background-size:contain,cover;

    pointer-events:none;
    z-index:3;
}</style></style>