Layout Preview | FriendRewind

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

Author: Mikaeljackson
Category: ?
Created: June 24, 2026
Comments (0)

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

<style>
<style>
         





:root{
    --headers: whitesmoke;
    --text: whitesmoke; 
    --names: whitesmoke;
    --links: gray;
    --background_image: url('https://i.pinimg.com/736x/be/5d/50/be5d50139c758dac72436e0005203773.jpg');
    --font-family: "Courier New", cursive;
    --curve: 0px;
    --borders: 2px solid gray;
}



h3, h4, h5{color: var(--headers)!important;} 
a{color: var(--links) !important;} 
p, h2, .count {color: var(--text)}
.friends a p{color: var(--names);}
nav label{color: var(--links);}
.section h4 {color: var(--headers);} 
.blurbs .heading {display:none;} 
.details p:last-child{color: var(--text);} 



body{
    background-image: var(--background_image);
    background-size: contain;
    background-position: center;
    background-color: dimgray;
}

h1{
    color: white;
    font-family: var(--font-family);
    font-size:30px !important;
    font-weight: 1;
    border: var(--borders);
    background-color: black;
    padding:5px;
    text-align: center;
}


nav{
    background-color: black;
    border: var(--borders);
    border-radius: var(--curve);
    text-align: center;
}

nav .top, nav .links {
    background-color: transparent;
    border-radius: var(--curve);
}
nav .links a{
    text-shadow:none;
}

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://static.wikia.nocookie.net/omori/images/7/75/Omori_wakeup_day_gif.gif/revision/latest?cb=20210105193031&format=original');
background-size: cover;
background-repeat: repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 


nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: "|";
    color: white;
}

nav img.logo{
    filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%) !important;
}



.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 2px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
}



.online{
    color: var(--links) !important;
    text-transform: lowercase;
    text-align: right;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(50%) sepia(5%) saturate(326%) hue-rotate(174deg) brightness(92%) contrast(82%); !important;
}



a, p, b, nav label, .section{ 
    font-family: var(--font-family);	
    font-size: 12px;
    font-weight: 1;
    text-shadow: 0px 0px 0px black;
}
h2, h3, h4, h5{
    font-family: var(--font-family);
    font-size: 16px;
    text-align: center;
    font-weight: 1;
    text-shadow: 0px 0px 0px black;
}




hr{
    height:2px;
    background: gray;
    border: none;
}


.blurbs, .mood, .friends, .contact, .profile .table, .blog-preview, .profile .table-section{
    border-radius: var(--curve);
    border: var(--borders)!important;
    background-color: black!important;
}
.comment-replies{border:4px groove gray;}
.comment-reply:not(:first-child){border-top: 2px solid var(--links);}


td{
    background-color: transparent!important;
}


main{
    background: transparent;
    border-radius: var(--curve);
    border: transparent;
    outline: none;
}

.table-section{
    border:none !important;
    border-radius: var(--curve) !important;
}


.heading{
    background: none !important;
}


.profile-info {
    background-color: black !important;
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
}


.profile-pic{
    padding: 10px;
}

.friends-grid{
    text-align: center;
}



h2, h3, h4, h5, p{padding-left:5px !important;}
.contact .heading, .profile .table-section .heading, .blog-preview .heading, .profile .friends .heading, .mood{padding: 5px!important;text-align: center;}
.mood, .friends{margin-bottom: 10px;}

.url-info{display: none;}
.general-about .details{
    background: black;
    border: var(--borders);
    padding-bottom: 70px;
    margin-bottom: 10px;
}
.contact{
    padding: 5px
}
.contact .f-col{
    padding: 0px 0px 7px;
}
.f-row{
    margin:0px!important;
}













footer{
    background: black;
    border: var(--borders);
    padding:10px;
    margin-top: 10px;
}



<style>
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 12px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid black;
}
::-webkit-scrollbar-thumb {
    background: gray; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: black;

</style></style>