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 31 comments ( View all | Add 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
Losing brain	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
☆maxie☆	1729317044 using!! this is so good, tyyy!!! Report Comment tysm!!!! :D by J3ST.rr; 1729494892; Report
otis ☆ !!	1726966348 using ^_^ !! Report Comment
angry bosnian dude	1723300259 Using 🙏 Report Comment
🎀 𝕾𝖐𝖎𝖓𝖑𝖊𝖘𝖘 𝕷𝖊𝖌𝖊𝖓𝖉 🎀	1715415044 usingg Report Comment
chmese	1715263432 using!! (btw I changed it a bit) Report Comment
dean	1713045057 using Report Comment
Ray ♡ (Dean's Bf)	1709606348 Using Report Comment
Baby bae	1708388557 using Report Comment