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 AV0N_01 (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 16 of 16 comments ( View all | Add 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
juno / jules ˚. ୭ 🐋	1707949261 Using!! Report Comment
zombeh	1707163001 Using Report Comment
Amaiyah :p	1706570604 i love this smm, will be using! Report Comment
koushi	1706145535 so cool! def using :) Report Comment thank youu!! :D by AV0N_01; 1706205346; Report
Proton	1704470061 This looks cool! Going to use Report Comment TYSMM!! :D by AV0N_01; 1704471742; Report
Split	1703992368 probs using! Report Comment
𝖒𝖆𝖗𝖝𝖞	1703028373 Can I use this??? Thanks a lot Report Comment
Salcito	1702935619 using!! Report Comment
ZOMBIEAUGZ	1702156606 THIS IS SO AWESOME????? AND USIMH Report Comment THANK YOUUU :D by AV0N_01; 1702217882; Report
︎︎Jay0bscenee︎︎	1702092688 THIS IS SO SICK!!! Report Comment TYSMMM :D by AV0N_01; 1702128391; Report
vampire's coat (alehhh) 🍉	1701617980 THis is SI CO Report Comment so cool* soery by vampire's coat (alehhh) 🍉; 1701617988; Report aaaa tysmmm!!! :D by AV0N_01; 1701629814; Report np!!!! by vampire's coat (alehhh) 🍉; 1701629846; Report do yiu take requests??? by vampire's coat (alehhh) 🍉; 1701629865; Report OMG SORRY FOR LATE REPLY X( And yeah! I'm not the quickest worker and I'm not an expert in coding though, but I'll certainly try my best! by AV0N_01; 1701712178; Report its okay! its just because i wanted to make a suggestion, but not until you're not stressed with all of the work!! :DD by vampire's coat (alehhh) 🍉; 1701712277; Report oh, it's no worries at all! I'll be happy to work on any suggestions you have! :D by AV0N_01; 1701712434; Report may i make one? by vampire's coat (alehhh) 🍉; 1701712540; Report Yeah, ofc! :) by AV0N_01; 1701712624; Report can you make a lucy kaede themed one, please? or a whimsical owl one? by vampire's coat (alehhh) 🍉; 1701712975; Report ofc!! :D by AV0N_01; 1701713549; Report thank you a lot! :) do the layout when you can, pleaz <333 not gon rush u!! by vampire's coat (alehhh) 🍉; 1701713635; Report thank you a lot! :) do the layout when you can, pleaz <333 not gon rush u!! by vampire's coat (alehhh) 🍉; 1701713642; Report aaaa thank youuu<3 by AV0N_01; 1701713753; Report np, np!! by vampire's coat (alehhh) 🍉; 1701714148; Report Hi :D! I've finished the layout here: "https://layouts.spacehey.com/layout?id=92741" lmk if there's anything you want me to change :) by AV0N_01; 1703620504; Report TYSM by vampire's coat (alehhh) 🍉; 1703621225; Report