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

rae	1782418069 using! :3 Report Comment
Kenzie	1782239377 Using Report Comment
fizzy :3	1779332646 possibly using Report Comment
Renn	1777405623 USINGGGGG Report Comment
impala67	1776364783 using! Report Comment
h1ghway2hell	1774161538 usinggg Report Comment
thays mqs	1773765879 usinggg Report Comment
VampDean	1773243221 usinggg Report Comment
Samuel	1771915053 using!! Report 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
𑣲┆colt ˚.⋆ֹ	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