Supernatural-inspired layout

Tags: supernatural, tvshow, red, fire, animated, simple

Description:

-Works better on PC than mobile
-Pixel-gif in the back made by Anasabdin (found on for example X, Instagram, or Tumblr)
-Credit isn't necessary, but always appreciated
-This is my first layout, so I'm sorry if something is off/the code is messy
-To use simply copy paste the code into your "about me"/"code" section

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by J3ST.rr (https://layouts.spacehey.com/layout?id=89454) -->

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

<style>
          /* main */
@import url('https://fonts.googleapis.com/css2?family=Truculenta:wght@600&display=swap');
p{
  font-family: 'Truculenta', sans-serif;
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-family: 'Truculenta', sans-serif;
  font-size: 200%;
    color: DarkRed;  
}
.profile {
background:url(https://i.pinimg.com/564x/c5/46/00/c5460047b73583b2589b3f859c13cb85.jpg);
color:black;
text-shadow: 0 0 9px black;
}
    .profile .friends .person img {
        border-radius: 500px;
    }
.contact, .table-section{
   padding: 2px;
   border-width: 2px; 
   border-radius: 4px;
   border-color: darkred !important;
   box-shadow: 0px 0px 5px 3px none !important;
   margin-bottom: 20px !important;
   background: url(https://media1.giphy.com/media/wTbpsFBs4Ek5W/giphy.gif?cid=ecf05e47mvf43hej723e3pq755te76s5t7gyp89f2jaj7o5y&ep=v1_gifs_search&rid=giphy.gif&ct=g) no-repeat fixed; background-size:cover;}

.blurbs, .friends{ 
   padding: 2px;
   border: solid darkred 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px none !important;
   margin-bottom: 20px !important
   background: url(https://media1.giphy.com/media/wTbpsFBs4Ek5W/giphy.gif?cid=ecf05e47mvf43hej723e3pq755te76s5t7gyp89f2jaj7o5y&ep=v1_gifs_search&rid=giphy.gif&ct=g) no-repeat fixed; background-size:cover;}

.comments-table{ 
   padding: 2px;
   border: solid darkred 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px none !important;
   margin-bottom: 20px !important
   background: url(https://media1.giphy.com/media/wTbpsFBs4Ek5W/giphy.gif?cid=ecf05e47mvf43hej723e3pq755te76s5t7gyp89f2jaj7o5y&ep=v1_gifs_search&rid=giphy.gif&ct=g) no-repeat fixed; background-size:cover;}

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

body{
   background: url(https://ipfs.io/ipfs/QmckUryw7XSoiritgi8C66bF91KT3hGQzqoBmmMRPpxqP8/nft.gif) no-repeat fixed; background-size:cover;}  
   background-size: 100%}

.profile{
   background: none !important;
   margin-bottom: 5px}

.top{
   background:  none !important;
   margin-bottom: 20px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px none !important}

footer {
   height: 150px;
   background-image: url(https://i.pinimg.com/564x/4b/4f/6e/4b4f6e9fa43633ba82cef0afd2a27feb.jpg);
   background-position: centre !important;
   background-size: cover;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px none !important}

.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: url(https://i.pinimg.com/564x/4b/4f/6e/4b4f6e9fa43633ba82cef0afd2a27feb.jpg) !important;
   border: none;
   border-radius: 2px}

/* clrs */
:root {
    --logo-blue: DarkRed;
    --darker-blue: Grey40;
    --lighter-blue: black;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: DarkRed;
    --light-orange: ;
    --even-lighter-orange: black;
    --green: DarkRed;
}

/* cd pfp */
:root {
--cd-image: url('https://i.postimg.cc/CM3mNQ1n/download-removebg-preview-1.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-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    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;
}

/* loading screen */
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://images2.fanpop.com/images/photos/8300000/Supernatural-Season-4-Intro-supernatural-8314300-218-124.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 5s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }


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

/* online now */
.general-about{
  position: relative;
  margin-top: 30px;
}
.online {
    content: url(http://www.myspacegens.com/images/online_now/39.gif);
}
</style>

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 39 comments ( View all | Add Comment )

~~sophia~~	1751855229 Using!!!! Report Comment
Evan ^_^	1750387875 using :-) Report Comment
Jackie /Star	1750009029 using Report Comment
Fischi	1749827655 using :3 Report Comment
Raccoonixx	1747884691 using XD Report Comment
Jayce	1747468528 Using! Report Comment
Sam // ⦻	1746168256 Using! Report Comment
Nick!	1744909320 using Report Comment
OllieMustDie	1742642376 using! Report Comment
Shelby	1741544357 using Report Comment
nia	1739104015 uussinngg :D Report Comment
Zefa	1739093808 using! changed it a bit Report Comment
Its7iemniak__	1738606824 using, thank you Report Comment
Tommy.tom2836	1738514124 usingggg Report Comment
Dean	1737925798 using!! Report Comment
Ayusu	1737728186 using the background and comments. Report Comment
Jaybird	1736402260 usieng but changing a bit of the code! ty!! Report Comment
r and b	1734158972 used! but i edited it aa Report Comment
Bob roos #2	1733673954 using it, but i edited it (a lot) Report Comment
Fennec	1733109381 so cool definitely using Report Comment