Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind

FriendRewind

← Back to Layouts

Three cheers of sweet revenge layout

Author: Vampireprincess

Category: Goth

Created: August 8, 2025

Comments (1)

JONNEH 11/29/2025 12:09 AM

THATS SO FREAKING COOL

You must log in to comment.

CSS Code

<style>
/* Generated by Visual Builder v3 */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap');

html::before {
    content: "";
    position: fixed;
    top: -100%; left: -50%;
    width: 300%; height: 300%;
    background-image: url('https://img1.picmix.com/output/pic/normal/3/7/2/6/11636273_17a49.gif');
    opacity: 0.2;
    pointer-events: none;
    animation: grain 8s steps(10) infinite;
    z-index: -2;
  }

@keyframes grain {
    0%, 100% { transform:translate(0, 0) }
    10% { transform:translate(-5%, -10%) }
    20% { transform:translate(-15%, 5%) }
    30% { transform:translate(7%, -25%) }
    40% { transform:translate(-5%, 25%) }
    50% { transform:translate(-15%, 10%) }
    60% { transform:translate(15%, 0%) }
    70% { transform:translate(0%, 15%) }
    80% { transform:translate(3%, 35%) }
    90% { transform:translate(-10%, 10%) }
  }

body {
  background-image: url("https://mir-s3-cdn-cf.behance.net/project_modules/max_632_webp/57637e3466329.5601ac8885dea.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  color: #000000;
  font-family: 'Josefin Sans', sans-serif;
}

:root{--cd-image:url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');}
.profile-pic{position:relative;width:183px;filter:drop-shadow(0 0 0.25rem gray);} 
.profile-pic:after{content:"";background:url('https://fluorescent-lights.neocities.org/f0rzNHe.png'),linear-gradient(150deg,rgba(255,255,255,0.4),rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.6));background-size:contain,cover;position:absolute;top:0;left:0;width:100%;height:100%;}
.profile-pic:before{content:"";background:var(--cd-image);position:absolute;top:5px;left:-20px;width:150px;height:150px;background-repeat:no-repeat;z-index:-1;animation:cdspin 5s linear infinite;transition:left .5s ease;}
.profile-pic:hover:before{left:-75px;}
@keyframes cdspin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.profile-pic .pfp-fallback{float:right;width:163px;height:160px;border:none;}
.general-about .profile-pic img{max-width:inherit;}

.profile-pic img{border-radius:50%;}

@keyframes boxGlow{0%,100%{box-shadow:0 0 8px rgba(0,123,255,0.4), 0 0 0px rgba(0,123,255,0.2);}50%{box-shadow:0 0 25px rgba(0,123,255,0.8), 0 0 35px rgba(0,123,255,0.4);}} .contact{animation:boxGlow 2.5s infinite ease-in-out !important;}

@keyframes boxGlow{0%,100%{box-shadow:0 0 8px rgba(0,123,255,0.4), 0 0 0px rgba(0,123,255,0.2);}50%{box-shadow:0 0 25px rgba(0,123,255,0.8), 0 0 35px rgba(0,123,255,0.4);}} .table-section, .friends, .blurbs, .section, .module, .profileInfo{animation:boxGlow 2.5s infinite ease-in-out !important;}

main::before {
    content: "";
    display: block;
    width: 100%;
    height: 300px;
    background-image: url('https://e1.pxfuel.com/desktop-wallpaper/923/723/desktop-wallpaper-my-chemical-romance-3-logo-treatments-my-chemical-romance-logo.jpg');
    background-size: cover;
    background-position: center center;
  }


.profile {
  background-image: url("https://img1.picmix.com/output/pic/normal/3/9/8/0/10940893_86d92.gif") !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-position: top center !important;
}

nav, nav .top, nav .links {
  background-color: #2b333f;
}

.blurbs, .section, .module, .profileInfo, .table-section {
    background-color: #ffffff;
    border-radius: 8px;
  }

.contact {
    border: 1px solid #be0e00 !important;
    border-radius: 5px !important;
  }

.contact .heading {
    background-color: #be0e00 !important;
    color: #ffffff !important;
  }

.table-section, .friends, .blurbs, .section, .module, .profileInfo {
    border: 1px solid #c81400 !important;
    border-radius: 5px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #c81400 !important;
    color: #ffffff !important;
  }

h1, h2, h3, h4, h5, h6 {
  color: #000000;
}

a { color: #bc0000; }

.contact {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROP2iEhTe0_hVKmlwr1mwSRq1UH9cypqEOCw&s");
  background-size: cover;
  background-position: center center;
}

.url-info {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROP2iEhTe0_hVKmlwr1mwSRq1UH9cypqEOCw&s");
  background-size: cover;
  background-position: center center;
}

.table-section {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROP2iEhTe0_hVKmlwr1mwSRq1UH9cypqEOCw&s");
  background-size: cover;
  background-position: center center;
}

.tunes {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROP2iEhTe0_hVKmlwr1mwSRq1UH9cypqEOCw&s");
  background-size: cover;
  background-position: center center;
}

.blog-preview {
  background-image: url("https://s.itl.cat/pngfile/s/113-1139806_my-chemical-romance.jpg");
  background-size: cover;
  background-position: center center;
}

.blurbs {
  background-image: url("https://s.itl.cat/pngfile/s/113-1139806_my-chemical-romance.jpg");
  background-size: cover;
  background-position: center center;
}

.friends {
  background-image: url("https://s.itl.cat/pngfile/s/113-1139806_my-chemical-romance.jpg");
  background-size: cover;
  background-position: center center;
}

#comments {
  background-image: url("https://s.itl.cat/pngfile/s/113-1139806_my-chemical-romance.jpg");
  background-size: cover;
  background-position: center center;
}

.comments-table td {
  background-image: url("https://s.itl.cat/pngfile/s/113-1139806_my-chemical-romance.jpg");
  background-size: cover;
  background-position: center center;
}</style>