← Back to Layouts
Green Day

Name: FriendRewind
Author: FriendRewind
Author: ye
Category: Vintage
Created: May 1, 2026
Punk
See Layout
Comments (2)

Geegee💖 05/02/2026 8:03 AM
This layout is so peak
Danny's Dewberry cookies 05/02/2026 1:38 PM
using (awesome as fuhk btw)
You must log in to comment.
CSS Code

<style>

body, .bodyContent  {    background-image:url(https://dl.glitter-graphics.com/pub/461/461898tg93ryqz0h.gif);   background-position:Center Center;   background-attachment:fixed;   background-repeat:repeat;   border-width:0px;   border-style:Solid;   scrollbar-face-color:EE8896;   scrollbar-highlight-color:EEA9A4;   scrollbar-3dlight-color:EEA9A4;   scrollbar-shadow-color:A4859A;   scrollbar-darkshadow-color:767689;   scrollbar-arrow-color:FF60B9;   scrollbar-track-color:8D195A;   cursor:default;   

</style>
<style>

nav .links {
background: #ab030f;
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap')
p{
  font-size:150%;
  color: white
}
</style>


<style>
.heading{
 background-color: #9e0000!important;
}
</style> 

<style>
.table section td{
background-color: red!important;
}
</style>

<style>
.contactTable a img {visibility:hidden; border:0px!important;}.contactTable a {display:block; height:28px; width:115px;background-color:transparent!important;}.contactTable .text {font-size:1px!important;}.contactTable .text, .contactTable a, .contactTable img {filter:none!important;background-color:none!important;} .contactTable .whitetext12 {display:none;;   

}     

img {    filter:none;   

}    

</style> 

<style>
.online{

content: url("https://i.imgur.com/W68ZI43.gif") !important;

}
<style>
footer {
background-color: #000000;
}
i {
font-color: white;
}
p {
font-size: 14px;
}
h4 {
font-size: 16px;
}
</style>


<style>
    .top{
        
    background-color: COLOR !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3258/3258863ywwhp2pold.png') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
        
    }
</style>

<style>
.profile {
  background:url(https://dl.glitter-graphics.com/pub/1646/1646053f8u4ahyue0.jpg);
}
</style>

<style>
body {
a:link: white;
}
</style>
<style>
a:link { /* base link appearance */

color:#FF2F00;
background-color: ;
text-decoration:none ;
text-shadow: 0px 0px 10px red;
}
a:visited { /* visited link */

color:red;
background-color: ;
text-decoration:none ;
}
a:hover { /* link hover */
        webkit-filter: blur(0.5px);
        filter: blur(2px);
color:white ;
background-color: ;
text-decoration:none ;
}


a:active { /* link when clicked */

color:;
background-color: ;
text-decoration: ;

}

.navbar li.active, b, strong{
color:white!important;
text-shadow: 0px 0px 10px red;
}
.profile .blurbs .section h4{ /* "about me" & "who i'd like to meet" headings */
        
background-color: ;
color:white;
text-shadow: 0px 0px 10px red;
 } 

.blurbs{
box-shadow: 0px 0px 5px red;
 text-align: center;
 align-content: center !important;
background-image: url("https://i.pinimg.com/1200x/43/85/ef/4385efcff364375598a52d701d8e7671.jpg");
color: white;
 }
.details-table td p {
color:white;
padding: 3px;

}
.general-about{ 
color:white ;
background-image: url("https://i.pinimg.com/1200x/43/85/ef/4385efcff364375598a52d701d8e7671.jpg");
background-size:cover;
border-radius: ;
padding: 15px;
} 
.profile-pic:hover{
box-shadow: 0px 0px 20px red; 
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-filter:blur(1px); 
-webkit-transition: .5s ease-in; }
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
  
}
.friends{
box-shadow: 0px 0px 5px red;
color:white !important;
background-image:url("https://media.tenor.com/ZAkCelwUw3QAAAAM/american-idiot-green-day.gif") !important;
background-size:768px 256px;
background-repeat:no repeat;
background-position:center center;


}
.friends .heading{
color:white !important;
border-radius: ;
border:;
background:linear-gradient(180deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%) !important;

}
.friends b{ /* "username has X friends" text */
        
color:white !important;
background: ;
}
.profile .friends .person p{ /* your friend's name text */
color:white;
}
.count, .friends a p { /* "username has X friends" number color */
color:red;
} 
.online{ /* "online!" */

content: url("https://dl.glitter-graphics.com/pub/2676/2676095s5wx73uxv2.gif") !important;
filter:drop-shadow(0px 0px 2px red) ;
}
.top{ 

background: url('https://dl.glitter-graphics.com/pub/1646/1646058ic7vjq6wl2.gif') !important ;
color:white;
font-weight: bold;
font-family: "Nova Round", system-ui;
  font-weight: 400;
  font-style: normal;
    }

.contact .heading { 
color:white!important;  
border-radius: px;
border: ;
background:linear-gradient(180deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%)  !important;
text-align: center!important;;

}

.contact { /* the "contact username" box itself */
box-shadow: 0px 0px 5px red;
border: transparent!important ;
background-image: url('https://i.pinimg.com/1200x/22/d9/fd/22d9fda2f4f88b86aff396a9adf8de82.jpg') !important ;
Width: 360px; /* the standart size but you can change it to anything */
Height: 170px;
color:white;


}
.contact a { /* options of the contact box */
color: white;
font-family: ;
font-size: 11px; /* standart size but you can change it to anything */
}
.contact .inner a img {

margin-right: -2px;
font-size: 0;
}
li.active .icon { /* the notification icon */

content: url("https://gifcity.carrd.co/assets/images/gallery01/f55beb02.gif?v=20a350bf"); 
width: 20px;
height: 10x;
}

.comments-table td{
color:white;
border:transparent;
background: transparent!important;


}
.profile .comments-table{ /* friend's comment area*/

color:white!important;
border:transparent !important;
border-radius:;

padding:5px;

}

.comments-table td:first-child img:hover{ /* comments profile picture */
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-filter:blur(1px); 
-webkit-transition: .5s ease-in; }

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
} 
  }     


}
.friends-grid img: {

}
.friends-grid img:hover {
animation: shake 0.5s; 
animation-iteration-count: infinite; 
-webkit-filter:blur(1px); 
-webkit-transition: .5s ease-in; }

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
} 
 
.profile-info a{ /* "username is your friend" text */
color:white!important;
  
}  
.profile-info { /* "username is your friend" box */
background-image:url('https://i.pinimg.com/originals/8c/08/91/8c0891cec4d20569b02bdff91e84e82a.gif')!important;
background-position: center center;
background-size: cover;
margin:0px;
border: 0px; 
border-radius:px;
box-shadow: 0px 0px 5px red;

         
}
.table-section .inner .details-table tr:nth-child(/* number of row */) td:nth-child(1) img {
/* the bottom links */
content: url();
  
}

table.comments-table{
color:white!important;
display: block;
padding: 5px;
height: 300px!important;
overflow-y: scroll;
border-width: 5px;
 

}

.friends-grid{
color:white!important;
background-color: transparent;
display: block;
padding: 5px;
height: 300px!important;
overflow-y: scroll;
border-width: 5px;




}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-button {

  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  border-radius:0px;
  background:red ;
  border: 0px none #;

}
::-webkit-scrollbar-thumb:hover {
  background:black;
}
::-webkit-scrollbar-thumb:active {
  background:black ;
}
::-webkit-scrollbar-track {
  background: black;
  border: 0px ridge #ffffff;

}
::-webkit-scrollbar-track:hover {
  background:red;
}
::-webkit-scrollbar-track:active {
  background:red;
}
::-webkit-scrollbar-corner {
  background: transparent;
}


@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
.retro-player {
    display: flex;
    background: linear-gradient(red, black);
    border: 1px solid #999;
    padding: 5px;
    height: 45px;
    align-items: center;
    box-shadow: inset 1px 1px 0 #fff;
}
.player-controls button {
    width: 35px;
    height: 35px;
    border-radius: 0px;
    background: linear-gradient(black, red);
    border: 1px solid #888;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin-right: 8px;
    transition:ease 0.1s;
}
.player-controls button:hover {
    width: 35px;
    height: 35px;
    border-radius: 0px;
    background: linear-gradient(black, red);
    border: 2px inset #888;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    margin-right: 8px;
}



.table-section .heading{ /* interests section heading text */
background:linear-gradient(180deg,rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(255, 0, 0, 1) 100%) !important;
color: white!important;
border-radius: ;
border:transparent !important;


}

.table-section{ /* interests section + links section background */
box-shadow: 0px 0px 5px red;
color:white;
border:transparent !important;
background-image: url('https://i.pinimg.com/1200x/22/d9/fd/22d9fda2f4f88b86aff396a9adf8de82.jpg') ;

}

.details-table td p {
color:white;
padding: 3px;

}
:root { /* changes various background colors */
--logo-blue: #730004; /* top area */
--darker-blue: #730004; /* all the links */
--lighter-blue: #730004; /* most of the headings */
--even-lighter-blue: #730004; /* interests text/music movies heroes etc boxes */
--lightest-blue: #730004;  /* the boxes besides the interests text */
--dark-orange: #730004;  /*  */
--light-orange: #730004;  /*  */
}
</style>

<style>

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://media0.giphy.com/media/v1.Y2lkPTZjMDliOTUycW11cjdiYnJ3M2U5MHQ3MzB6eG5jZXpobTdlazN4eTQxaHhrZDNwbiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/IMhcgoGM1furpLjm3A/giphy.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0;}}

</style>


<style>
/* Sickle - https://www.cursors-4u.com/cursor/hol40 */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/sickle-10978fb4-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */
</style>