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

Aurora 土⛧	1769098430 usingg Report Comment
ｉｌｌｉｍｕｓｔｄｉｅ击	1767815137 using!! Report Comment
Izzyy	1765345763 USINGGG Report Comment
frankie ! !	1765125365 usingg!! this is so awesome omgg !!! >0< Report Comment
vik	1763864462 using! this is GOOD Report Comment
briochebunn	1762991516 using :) Report Comment
𑣲┆𝘦𝘳𝘪𝘯 ˚.⋆ֹ	1761667085 using bro this is peak Report Comment
Ann	1759339152 using! (i love this) Report Comment
jaydenn_sr	1759225022 using Report Comment
☆Human☆	1757456746 using!!!! (this is so cool tysm!!) Report Comment
salemm	1755585475 using!! (sorry this is prob real annoying) Report Comment
$TЯΔY	1755387357 using (ik this probably gets annoying srry) Report Comment
varian/crowley	1755297038 using!!! Report Comment
+-.^wastepits^.-+	1754975114 using for now :0 Report Comment
~~sophia~~	1751855229 Using!!!! Report Comment
Evan ^_^	1750387875 using :-) Report Comment
ryan.	1750009029 using Report Comment
Fischi	1749827655 using :3 Report Comment
Raccoonixx	1747884691 using XD Report Comment
Jayce	1747468528 Using! Report Comment