Green Fight Club Layout

Tags: fight club, green, overlay, autoplay, movie, cursor, gif, icons, brad pitt

Description:

Includes: soap cursor, tilted flickering nameplate, autoplay of Fight Club OST, 2 side-gifs, etc! Free for everyone to use just lmk in the comments :)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by arlo atomickk (https://layouts.spacehey.com/layout?id=28503) -->

<style>

@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://cory.anota.do/spacehey/pdg_neon.css');

/*BODY FONT*/
   body{font-family: 'Lora', serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Special Elite', cursive;
   font-size: 180%;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*TILTED NAMEPLATE*/
:root{ --neon-text-color: #51723b; }
.profile .left h1{font-family: 'Special Elite', cursive; 
   font-size: 150%;
   transform: rotate(-10deg)}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px white, 0 0 5px #FFFFFF}

/*GIF PFP*/
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.ibb.co/nmXy1qL/the-narrator.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; border-radius: 5px;
   box-shadow: 0px 0px 5px 3px #51723b} 

main{background: none}
/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/154774.png), auto !important}

/*LINK COLOURS*/
.links, .links a, .logout-btn{
   color: white !important;
   text-shadow: 0px 0px 5px 3px white !important;
   border: none !important}

a{color: white !important}
   a:hover{color: yellow !important;
    text-decoration: underline}
   a:visited: color: yellow !important}

.top a{color: #FF0000 !important}
   .top a:hover{color: white !important
    text-decoration: underline}
   .top a:visited{color: white !important}

.links a{color: #5cad58 !important}
   .links a:hover{color: white !important
    text-decoration: underline}
   .links a:visited{color: white !important}

footer .links a{color: white !important}
   footer .links a{color: yellow !important
    text-decoration: underline}
   footer .links a{color: yellow !important}

/*BORDERS*/
.contact, .table-section{
   border-width: 2px; 
   border-radius: 4px;
   border-color: black !important;
   box-shadow: 0px 0px 5px 3px #51723b !important;
   margin-bottom: 20px !important;
   background-color: rgba(57, 104, 79, 0.8);
   padding: 1px}

.blurbs, .friends{ 
   border: solid black 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px #51723b !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/FX82KCC/L2JqDw7.jpg) !important;
   padding: 1px}

.comments-table{ 
   border: solid black 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #51723b !important;
   margin-bottom: 20px !important
   background: url(https://i.ibb.co/FX82KCC/L2JqDw7.jpg);
   padding: 1px}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/vHVWf3q/O8bsE9b.jpg);  
   background-size: 100%}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/gMgyLzj/JO6QEfa.png);
   background-size: 100%;
   margin-bottom: 5px;
   border-radius: 3px;
   border: 2px solid #39684fcc;
   border-top: 1px none !important;
   border-radius}

/*HEADER*/
.top{
   background:  !important;
   background-image: url(https://i.ibb.co/gMNypHQ/uizd0rc.jpg) !important;
   background-size: 100% !important;
   height: 250px;
   margin-top: 20px;
   border-radius: 3px;
   border: 2px solid #39684fcc;
   border-bottom: 1px none !important}

/*FOOTER*/
footer {
   height: 150px;
   background-image: url(https://i.ibb.co/3WCNrps/Yskcpag.gif);
   background-position: centre !important;
   background-size: 50%;
   border-radius: 3px;
   box-shadow: 0px 0px 5px 3px #51723b !important}

/*NAV BAR*/
.links{ 
   text-align: center;
   margin-bottom: -7px !important;
   background-color: rgba(57, 104, 79, 0.8) !important;
   border: 2px solid #39684fcc;
   border-top: none !important;
   border-bottom: none !important}

/*STARS IN NAV BAR*/
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: " ⭒ ";
    color:  white}

/*LOGO*/
.logo {
filter: invert(39%) sepia(18%) saturate(1084%) hue-rotate(53deg) brightness(95%) contrast(84%);
   box-shadow: 0px 0px 7px 5px white}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: linear-gradient(#39684fcc, black);
   border: 2px solid black;
   border-radius: 2px}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px #39684fcc}

/*INTERESTS GRID*/
:root{
   --even-lighter-blue: rgb(36, 64, 54);
   --lightest-blue: rgb(36, 64, 54);

/*FRIENDS-GRID*/
   --light-orange: url(https://i.ibb.co/93CMRRL/bC68GxB.jpg);
   --even-lighter-orange: linear-gradient(#51723b, black)}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://i.ibb.co/YZ2YHKZ/tI6Nu9B.gif);
   background-size: cover;
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white}

/*URL SECTION*/
.profile .url-info{
   background-image:url(https://i.ibb.co/MDBrTw6/j1gVMV4.gif);
   background-size: cover !important;
   border: solid #39684fcc 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px #39684fcc;
   margin-bottom: 20px !important}

/*ELEMENT SHAKE*/
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@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); }
}

/*CONTACT SECTION*/
.contact {
   margin-bottom: 20px !important;
   font-size: 12px;
   border-radius: 5px;
   border-top: 1px;
   text-align: left}

/*CONTACT ICONS*/
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.ibb.co/pfp7dLX/OEk20vw.png)}


/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/9vjkWpr/6LuOIFC.png);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*BUTTONS*/
button{
   color: white;
   background: url(https://i.ibb.co/RCW74Fr/V9Sh9t4.gif); 
   border: 2px solid white;
   padding: 2px}
   button:hover {
   color: white;
   background: url(https://i.ibb.co/RCW74Fr/V9Sh9t4.gif);
   padding: 4px}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #51723b  !important;
    border: 1px solid white !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px solid white !important;
    background-color:  #51723b !important}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   font-size: 0px;
   border: 2px solid #39684fcc;
   border-radius: 5px;
   background: url(https://i.ibb.co/3y1jdfr/L3uY58Y.gif);
   position: centre !important;
   height: 200px;
   box-shadow: 0px 0px 7px 5px #39684fcc}

/*ANIMATION OVERLAY*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/XWtQmpX/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@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%) }
}

<style>
left image
</style>
<div style="float: ; max-height: 800px; position: fixed; left: 1px; bottom: 10px; z-index: 200; width: 300px;"><img src="https://i.ibb.co/Zz35d6g/qxNyPNG.gif"/></div>

<style>
right image
</style>
<div style="float: ; max-height: 800px; position: fixed; top: 1px; bottom: 10px; right: 1px; z-index: 200; width: 300px;"><img src="https://i.ibb.co/fr7XC6n/FsNA3Ig.gif"/></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/4Icio4hHdSA//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 53 comments ( View all | Add Comment )

Andora	1741601132 Def using this Report Comment
Lyx	1740999504 heyyy i love the layout however the background doesnt show a photo instead it says image unavailable in blue im unsure if its a me issue or the image got deleted please help me because i adore this layout but it looks bad because of that bug Report Comment update, still didn’t change i also checked from a different device it looks the same. for now ill use a different layout but let me know if this one got fixed because i like it the most :3 by Lyx; 1741009510; Report
Allia	1740275745 using :) Report Comment
Insomnia	1739680239 Using Report Comment
Attiboy:3	1738875779 usingggg:3 Report Comment
Garliciscool_xoxo	1738519734 Gone useee Report Comment
malitta neangell	1733372163 usingg Report Comment
FRANCIS	1730253137 usingg Report Comment
Faust	1727725540 usingggggg Report Comment
RAMIEL	1725797745 usinggg <3 Report Comment
KayKay	1724801031 DEF USING Report Comment
suzune / fuuka	1724110438 using !!!! Report Comment
Zeitgeizt	1722983460 using <3 Report Comment
finn	1721478468 usinnggg Report Comment
zero0000	1721166119 im using this Report Comment
emma	1720932009 usingg Report Comment
NIKITλ	1720118505 using !! Report Comment
𝖕𝖊𝖓𝖊𝖑𝖔𝖕𝖊 ( ´ཀ` )	1719897367 USING Report Comment
princess	1719714935 using again!! Report Comment
vale♡	1716396957 using!! Report Comment