Layout Preview | FriendRewind

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

Author: anxiousn
Category: Colors
Created: May 20, 2026
yukkm
Comments (0)

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

<style>
<style>
    body{
        background-image: linear-gradient(white, gray);
    }
    .container{
        box-shadow: 0px 1px 10px black;
        width: 970px;
    }
    nav .top{
        background-image: linear-gradient(#d0d2d6, white, #9fb4cb);
    }
    nav .top .left .logo{
        display: none;
    }
    nav .top{
        height: 80px;
        border: ridge white 3px;
        margin-bottom: 10px;
    }
    nav .top .center form{
        text-align: left;
    }
    [id='q']{
        border-radius: 5px;
        border: solid lightgray;
    }
    nav .links{
        text-align: center;
        background-image: linear-gradient(lightgray, white, #9fb4cb);
        border: ridge white 2px;
        box-shadow: 0px 5px 10px gray;
        margin-bottom: 10px;
    }
    main .right{
        width: 30%;
        border-radius: 5px;
    }
    main .left{
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
    }
    .general-about .profile-pic img{
        margin-left: 180px;
        margin-top: 15px;
        box-shadow: 0px 1px 10px black;
        border: ridge white 3px;
        border-radius: 5px;
    }
    main .right{
        box-shadow: 0px 1px 10px;
    }
    
     .general-about{
        
    background: linear-gradient(to left, #7896b6, lightgray, #ebebeb);
    background-color: transparent;
    border-radius: 5px;
    border: ridge white 3px;
    text-align: center;
    height: 200px;
        
    }
    
    .profile h1{
        font-size: 55px;
        color: white;
        text-shadow: 0px 5px 5px #4d6c8e;
        border: ridge 3px white;
        border-radius: 5px;
        background: linear-gradient(white, #9fb4cb);
        text-align: center;
        height: 90px;
    }
    
    main .right{
        background: linear-gradient(to bottom, white, lightgray, #9fb4cb, #4d6c8e);
    }
    FORM > BUTTON{
        border: ridge white 3px;
        border-radius: 5px;
    }
    .profile .blurbs .heading{
        background: linear-gradient(to right, #b8c8d9, lightgray, #2d4054);
        border: ridge 3px white;
        border-radius: 5px;
         box-shadow: 2px 5px 5px gray;
    }
    .profile .blurbs .heading h4{
        color: white;
        text-shadow: 0px 2px 2px #33485e;
    }
    .profile .blurbs .inner{
        background: linear-gradient(to bottom right, #babecd, white, #5c74ac);
        border: ridge 3px;
        border-radius: 5px;
        margin-top: 10px;
        text-align: center;
    }
    DIV.blog-preview{
        text-align: center;
        border: ridge 3px white;
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
        border-radius: 5px;
         box-shadow: 2px 5px 5px gray;
        
    }
    .profile .blurbs .section h4{
        text-align: center;
        text-shadow: 0px 2px 2px #33485e;
        color: white;
        
    }
    .profile .mood{
        border: ridge 3px white;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
    }
    .profile .friends .heading{
         background: linear-gradient(to left, #b8c8d9, lightgray, #2d4054);
         border-radius: 5px;
         border: ridge 3px;
         text-align: center;
         box-shadow: 2px 5px 5px gray;
    }
    .profile .friends .heading h4{
        color: white;
        box-shadow: ;
        text-shadow: 0px 2px 2px #33485e;
    }
    .profile .friends .inner{
        text-align: center;
        background-image: linear-gradient(#c1c7ce, white, #ebebeb, lightgray);
        border: ridge 3px white;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .profile .friends .person p{
        display: none;
    }
    .profile .friends .person img:not(.icon){
        border: ridge 3px white;
        border-radius: 5px;
         box-shadow: 2px 5px 5px gray;
    }
    
    .profile .contact{
        border: ridge 3px white;
        border-radius: 5px;
        box-shadow: 2px 5px 5px gray;
        background-image: ;
        background-size: 500px;
        background-position: center;
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
        text-align: center;
        
    }
    
    .profile .contact .heading{
        background: linear-gradient(to left, #b8c8d9, lightgray, #2d4054);
        border-radius: 2px;        
    }
    .icon{
        display: none;
    }
    a{
        color: #707e8e;
    }
    .profile .url-info{
        border: ridge 3px white;
        border-radius: 5px;
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
        text-align: center;
    }
    DIV.url-info > P:nth-child(1) > B{
        color: #707e8e;
    }
    .profile .table-section .heading{
        background: linear-gradient(to left, #b8c8d9, lightgray, #2d4054);
        text-align: center;
    }
    .profile .table-section{
        border: ridge 3px white;
        border-radius: 5px;
        box-shadow: 2px 5px 5px gray;
        text-shadow:2px 2px 5px gray;
    }
    .details-table td{
        background-color: white;
        border-radius: 5px;
        box-shadow: 2px 2px 5px gray;
        
    }
       :root {
    --light-orange: ;
       --even-lighter-blue: white;
       }
       table.comments-table{
           border: outset white ;
           border-radius: 10px;
           box-shadow: 2px 2px 5px gray;
       }
       .comments-table td *{
           border-radius: 5px;
           border: none;
       }
       .count{
           color: #5874a7;
       }
       
       .details-table td *{
           color: #8b9ab3 ;
       }
       footer{
           border: ridge 3px white;
           border-radius: 5px;
           background: linear-gradient(to bottom, #b8c8d9, lightgray, #2d4054);
       }
</style>

<style>
    .comments-table td{
        background-image: linear-gradient(#ebebeb, white, #ebebeb, lightgray);
    }
    
    
</style>

<style>
    .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   }
</style>

<style>
    img {
  filter: sepia(100%) hue-rotate(190deg) saturate(100%);
 }

</style>

<style>
             ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: white;
    border: outset 5px;
    }

    ::-webkit-scrollbar-track {
    background-image: linear-gradient(white, gray);
    border: outset 5px;
    }
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/mechanics/mec-4/mec313.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/09/10/apollo-class.html" target="_blank" title="Apollo Class"><img src="https://cur.cursors-4u.net/cursor.png" alt="Apollo Class" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}
</style>

<style>
  DIV.blog-preview:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 180px;
  width: 270px;
  background-image: url(https://i.pinimg.com/564x/c7/2d/89/c72d89243173a9974b5f89c5c9f85fe2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  border-radius: 10px;
  border: ridge white 3px;
  margin-left: 17px;
  margin-top: 10px;
  filter: sepia(100%) hue-rotate(190deg) saturate(100%);
    
    
    
</style>

<style>
  .profile .mood:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 180px;
  width: 500px;
  background-image: url(https://i.pinimg.com/564x/8d/a8/04/8da8041abbadf9cee7c7d0f9a865d784.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  align-content: center;
  border-radius: 10px;
  border: ridge white 3px;
  margin-left: 13px;
  margin-top: 10px;
  margin-bottom: 10px;
  filter: sepia(100%) hue-rotate(190deg) saturate(100%);
  
</style>

<style>

   a:hover {
     color: black; 
   } 

   }
   
   nav .links {

}
nav .links a:hover {
color: black;
}
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
body{font-family: 'Righteous', cursive;;
font-size: 16px;}

.profile .blurbs .section p{
    color: #4b5972;
}
</style>

<style>
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
    
</style>



<style>
/*YOU CAN REMOVE THIS FOR A MORE.. NOSTALGIC LOOK.*/
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 20, 20, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, white, white, black);
z-index: 2;
background-size: 100% 2px, 3px 100%;
opacity: 10%;
pointer-events: none;
}
</style>

<style>

.online{content:url("https://i6.glitter-graphics.org/pub/601/601836qklq5zhm8s.gif");
     filter: sepia(100%) hue-rotate(190deg) saturate(100%);}
}

</style>


<style>

.profile .profile-info {
	background-image: url(https://i.pinimg.com/564x/27/6d/d0/276dd0db727f5c5f8388e0c752df2e12.jpg);
	border: ridge;
        border-color: white;
        border-width: 3px;
	border-radius: 5px;
	text-align: center;
	box-shadow: 0px 3px 5px gray;
	filter: sepia(100%) hue-rotate(190deg) saturate(100%);
}
</style>

<style>
.links .special a:link, .links .special a:visited  {
  color: white;
}

.links .special a:hover {
  color: white;
}
</style></style>