← Back to Layouts
Old Skool

Name: FriendRewind
Author: FriendRewind
Author: Rainie Rawr [⚢]
Category: Classic
Created: September 4, 2026
my first public layout :3> the bg is from class of 09 ofc
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>

@font-face {
    font-family: 'tex gyre';
    font-style: normal;
    font-weight: 400;
    src: url('https://files.catbox.moe/p26uj6.woff') format('woff'), url('https://files.catbox.moe/hq1amh.woff2') format('woff2');
}

@font-face {
    font-family: 'CM Handwriting One';
    font-style: normal;
    font-weight: 400;
    src: url('https://files.catbox.moe/0gbfxu.woff') format('woff'), url('https://files.catbox.moe/jwifmn.woff2') format('woff2');
}

* {
    font-family: "tex gyre", sans-serif;
}

h4 {
    color: white;
}

a {
    color: #c45ffa;
    font-weight: bolder;
}

a:hover {
    color: #eafa5f;
    text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
}

.myspace-header .site-name:hover {
    background-color: transparent !important;
    padding: 0;
}

body {
    background-image: url("https://static.wikia.nocookie.net/class-of-nine/images/e/eb/School_int_2.jpg/revision/latest?cb=20240507004743");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.myspace-header {
    background: transparent;
}

.logo img, .nav-logo {
    filter: drop-shadow(3px 3px 3px black);
}

.myspace-header .search-input, .myspace-header .search-button {
    border: 1px solid black;
    color: hotpink;
}

.myspace-header .top-nav {
    background-image: linear-gradient(#00000099, #ffffff40), url("https://i5.glitter-graphics.org/pub/2809/2809625alg6rb1bzu.jpg");
    border: 1px solid black;
    border-radius: 10px;
    margin: 10px 0 10px;
}

.myspace-header .main-nav-wrapper {
    background-image: linear-gradient(#96006999, #ffffff40), url("https://i.pinimg.com/736x/54/b9/70/54b970a0977bbde0c1f4ec789de2c11f.jpg") !important;
    background-size: 150px;
    border: 1px solid black;
    border-radius: 10px;
    margin: 0 0 10px;
}

.myspace-header .main-nav {
    justify-content: center;
}

.myspace-header .main-nav-container {
    display: inline-block;
}

.myspace-header .main-nav li {
    margin: 0 10px;
}

.myspace-header .main-nav li a:hover {
    background-image: linear-gradient(#96006999, #ffffff40), url("https://i.pinimg.com/736x/54/b9/70/54b970a0977bbde0c1f4ec789de2c11f.jpg");
    background-size: 150px;
    background-attachment: fixed;
    background-position: -5px;
    box-shadow: inset 0 0 0 1px black; 
    transform: scale(1.05);
    border-radius: 10px;
    filter: hue-rotate(-30deg);
}

.myspace-header .main-nav li a {
    text-shadow: -2px -1px 1px #000, 2px -2px 1px #000, -2px 2px 1px #000, 2px 2px 1px #000, 3px 3px 3px #000;
    border-right: 0px;
    margin-top: -1px;
}

.myspace-header .dropdown-menu a {
  border: 0px !important;
  margin: -1px !important;
  color: #ffffff !important;
  text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, 0px 0px 3px #000 !important;
  font-size: 10px !important;
}

.myspace-header .dropdown-menu {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1)), url('https://i.pinimg.com/736x/ed/48/4c/ed484c3b44227ef04cab7820215972dc.jpg') !important;
  background-size: 100% 100%;
  border-radius: 10px;
}

.myspace-header .dropdown-menu a:hover, .myspace-header .dropdown-menu a:focus {
  background-image: url('https://i.pinimg.com/736x/cf/db/61/cfdb619147113b3cc6360ffcfaad7b12.jpg') !important;
  background-size: 100% !important;
  filter: none !important;
  transform: none !important;
  font-size: 12px !important;
}

main {
    position: relative;
    background-image: url("https://i9.glitter-graphics.org/pub/1418/1418029hnw29z3wxe.gif");
    background-size: 150px;
    border-radius: 10px;
}

.home-actions .heading, .profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .profile .blurbs .heading, .profile .friends .heading, .blog-preview h4 {
    background: linear-gradient(180deg,rgba(24, 28, 61, 0.85) 0%, rgba(255, 252, 252, 0.94) 10%, rgba(105, 107, 115, 1) 26%, rgba(45, 49, 61, 0.9) 39%, rgba(64, 70, 89, 0.71) 71%, rgba(100, 108, 122, 0.99) 88%, rgba(19, 19, 28, 1) 100%), url("https://i.pinimg.com/736x/77/3e/6e/773e6edab95a85d62db04dd4411d1fa7.jpg");
    background-repeat: repeat;
    background-size: 230px;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 3px 3px 3px #000;
    border-radius: 5px;
}

.home-actions, .profile .contact, .profile .table-section, .profile .url-info, .setting-section, .blog-preview {
    border: 2px solid #60a5fa !important;
}

.blog-preview h4 {
    margin-top: 0 !important;
    padding: 2px 7px;
}

.home-actions, .profile .contact, .profile .table-section, .setting-section {
    background-image: url("https://i.pinimg.com/736x/0b/6c/87/0b6c87ae51de4f1dfd690b74858936b9.jpg");
    background-size: 100%;
    border-radius: 6px
}

.profile .contact a, .profile .contact span {
    font-family: 'CM Handwriting One', sans-serif;
    text-shadow: none;
    color: #333333;
    background-color: #e0ff45cc;
}

.profile .url-info, .blog-preview {
    background-image: url("https://i.pinimg.com/736x/5e/07/f3/5e07f3af15c2d91f49bc197721b819de.jpg");
    background-size: 100%;
    border-radius: 6px
}

.profile .url-info {
    background-image: url("https://i.pinimg.com/1200x/11/ec/13/11ec13f70eadda72798235f046873748.jpg");
    background-size: 30%;
}

main::before {
    content: "";
    background-image: url(https://friendrewind.com/uploads/gallery/21369/img_6a95d4735e0088.61287310.webp);
    position: absolute;
    top: 10px;
    left: -15px;
    width: 35px;
    height: 99%;
    background-repeat: repeat-y;
    background-size: contain;
}

main .left {
    padding: 10px 10px 10px 30px;
}

.profile h1 .profile-name-text {
    font-family: 'CM Handwriting One', sans-serif;
}

.comments-table td:first-child {
    background-image: url("https://rainie.nekoweb.org/graphics/private/img-2026-08-31-17-48-33.png");
    background-size: 100% 120px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.cb-author-wrap {
    transform: rotate(-10deg) scale(0.8);
}

.comments-table .cb-content-cell {
    background-color: transparent;
}

.comments-table .cb-content-cell p, .comments-table .cb-content-cell time, .friends p:first-of-type {
    font-family: 'CM Handwriting One', sans-serif;
}

.comments-table .cb-content-cell, .comments-table td:first-child {
    border: 0;
}

.details-table td:first-child, .details-table td {
    background-image: url("https://i.pinimg.com/736x/5e/07/f3/5e07f3af15c2d91f49bc197721b819de.jpg");
    background-size: 200%;
    margin: 0;
    padding: 1px;
    border: 1px solid black;
    text-align: center;
}

.details-table td:first-child *, .details-table td * {
    font-family: 'CM Handwriting One', sans-serif;
    color: black;
}

footer {
    background-image: linear-gradient(#00000088), url("https://i5.glitter-graphics.org/pub/2809/2809625alg6rb1bzu.jpg");
    border: 1px solid black;
    border-radius: 10px;
    color: white;
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
}

footer p {
    font-weight: bold;
}

footer .links {
    background-color: #ffffffdd;
    border-radius: 10px
}

footer .links a {
    text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
    padding: 0 4px;
}

footer .links a:hover {
    background-color: transparent !important;
    color: white;
    padding: 0 4px;
}

</style>