Skull/bat inspired Layout

Tags: skull, dark, layout, simple

Description:

Hi! This is the first layout i've ever made, idk how any of this works honestly, but i tried my best. Hope this works correctly, if you use this and something works weirdly, pls lmk and i'll try to fix it! Feel completly free to edit it as much as you like, i used a template, so everything is pretty much specified. You can comment if you use it!

Preview:

click on the image for a larger preview

Code:

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


<style>body:before{content:" ";height:100vh;width:100vw;display:block;position:fixed;top:0;left:0;z-index:100;background-image:url('https://i.pinimg.com/originals/0b/55/2a/0b552ad754b585fc5dc678a75ab99e3f.gif');background-size:cover;background-repeat:no-repeat;background-position:center;animation:yourAnimation 7s ease 0s 1 normal forwards;pointer-events:none}@keyframes yourAnimation{0.0%{opacity:1}75%{opacity:1}100%{opacity:0}}</style> .<br/>


<style>
/*Main Body (Background Color/Background Image)*/
    body{
    background-color: black!important;
    background-image: url('https://i.pinimg.com/564x/cb/41/05/cb4105d1f6849a450711d525db37eff2.jpg') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
    font-family: MS Gothic;
</style>
    
<style>
/*Profile (Background Color/Background Image)*/
    main{
    background-color: rgba(9, 9, 7, 0.9);
    color:black !important  
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER!important;}  
    

    
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;}
        
    main{
        border-radius: 25px 25px 25px 25px !important;}
</style>
        
<!-- (c) Layout created by 𝕬𝖓𝖆𝖙𝖔𝖑𝖎𝖆 (https://layouts.spacehey.com/layout?id=27290) -->

<style>
  
  .logo {
  
  content:url("https://media.discordapp.net/attachments/1083062800752054305/1085761642761048075/image0.jpg")
  
  }
  
  </style>
<style>
/*Top (Background Color/Background Image)*/
   .top{
    background-color: #171717 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED!important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
  
 
</style>
    
<style>
/*Top Links (Background Color/Background Image)*/
 .links{
     text-align:center;
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Search Users Box (Background Color/Background Image)*/
    .top input{
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Buttons (Background Color/Background Image)*/
    button{
    border-radius: 25px 25px 25px 25px !important;
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Profile Name (Background Color/Backround Image)*/
    h1{
    text-align:center;
    background-color: gray!important;
    background-image: url('URL') !important;
    background-attachment:SCROLL !important;
    background-repeat:REPEAT !important;
    background-position: CENTER!important;}
</style>

<style>
<style>
<!-- (c) Layout created by ★KizzedOut★ (https://layouts.spacehey.com/layout?id=98585) -->

<style>
.general-about{
  position: relative;
  margin-top: 100px;
}.online{
content: url(https://cdn.discordapp.com/attachments/987617264645840947/1191523042963234846/output-onlinegiftools.gif?ex=65a5bf4e&is=65934a4e&hm=f17c066dc83df2c6dca3a2fcf3e851079cb8ff5d522f122064279d019f7a3aa6&);}
</style>


<style>
/*General About (Background Color/Background Image)*/
<!-- (c) Layout created by Valentine (https://layouts.spacehey.com/layout?id=29048) -->

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.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;
}
</style> 


<style>
/*Mood (Background Color/Background Image)*/
    .mood{
    text-align:center;
    background-color: transparent !important;
    background-attachment:SCROLL!important;
    background-repeat: NOT-REPEAT!important;
    background-position: CENTER!important;}
</style>

<style>
/*Contact Heading (Background Color/Background Image)*/
    .contact .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: gray !important;
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Contact Box (Background Color/Background Image)*/
    .contact{
    background-color: gray!important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Interests Section/Social Links Heading (Background Color/Backround Image)*/
    .table-section .heading{
    border-radius: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: black !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Interests Table & Links Table (Background Color/Background Image)*/
    table.details-table{
    background-color: #171717!important;
    background-attachment: FIXED!important;
    background-repeat: REPEAT!important;
    background-position: CENTER!important;}
    
    .profile .details-table td{
    background-color: gray !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT!important;
    background-position: CENTER!important;}
</style>

<style>
/*Blogs Heading (Background Color/Background Image)*/
    .blog-preview h4{
    border-radius: 25px 25px 25px 25px !important;
    background-color: gray;
    background-repeat: repeat;
    background-position: center;}
   
</style>

<style>
    .blog-preview{
padding: 15px 10px 14px 10px;
    position: relative;
    margin-top: 20px;
    border: 5px ridge ;
</style>


<style>
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: gray!important;
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
    .blurbs{
    padding: 15px 10px 14px 10px;
    position: relative;
    margin-top: 20px;
    border: 5px ridge darkgray;
    
/*Hide "About Me" & "Who I'd Like To Meet" Headers*/
 .blurbs .section h4{display: none !important;}
</style>

<style>
    .friends .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: gray!important;
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Friends (Background Color/Background Image)*/
    .friends{
     background-color: rgba(41, 41, 41, 0.5);
    color:black !important  
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Comments (Background Color/Background Image)*/
    .comments-table td{
    background-color: Black!important;
    background-image: url('URL') !important;
    background-attachment: FIXED!important;
    background-repeat: REPEAT!important;
    background-position: CENTER!important;
    border-radius: 25px 25px 25px 25px !important;}
</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
display: block;
height: 300px!important;
overflow-y: scroll;}
.comments-table td:first-child, .music-table td:first-child {
    background: #171717;
    background: #171717;
    text-align: center;
    font-weight: bold;
    width: 38%;

</style>

<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 5px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);}

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);}
</style>

<style>
/*Footer Links (Background Color/Background Image)*/
    footer{
    background-color: rgba(41, 41, 41, 0.5);
    color:black !important  
    background-attachment: FIXED!important;
    background-repeat: REPEAT!important;
    background-position: CENTER!important;}
</style>

<style>
/*Change Text Colors*/
    .top{
    color: White;}    
    
    main{
    color: WHITE !important;}
    
    footer{
    color: White;}
</style>

<style>
/*Change Link Colors*/
    a{
    color: White!important;}
    
    a:hover{
    color: white!important;}
    
    a:visited{
    color: white!important;}
    
    .top a{
    color: WHITE!important;}
    
    .top a:hover{
    color: WHITE !important;}
    
    .top a:visited{
    color: WHITE!important;}
    
    .links a{
    color: WHITE !important;}
    
    .links a:hover{
    color: WHITE!important;}
    
    .links a:visited{
    color: White!important;}
   
    .friends-grid p{
    color: WHITE !important;}

    footer .links a{
    color: WHITE !important;}
   
    footer .links a:hover{
    color: WHITE !important;}
   
    footer .links a:visited{
    color: WHITE !important;}


</style>

<style>
/*Change Interests Section Titles*/
table, th, td {
  border: 0px trans;text-align:center;border-radius: 15px;}

:root {
  --topic1: "General";
  --topic2: "Music";
  --topic3: "Movies";
  --topic4: "Television";
  --topic5: "Books";
  --topic6: "Heroes";

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);}
</style>

<style>

<style>
@import url('https://fonts.cdnfonts.com/css/gnarly-skeleton-black-personal');
</style>
                
                                                

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-2/oth116.cur), auto !important;}</style>
<a href="" target="_blank" style="position:absolute; top: 0px; right: 0px;"></a>

<style>

}
</style>

<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}

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

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
	/* Add to Friends */
	content: url("https://64.media.tumblr.com/d65212d0050b2057686a31a3033377a4/9a5e59d4a20102aa-17/s75x75_c1/f537b0a0585d89556f1dfac7a609449e0dcd6813.gifv")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://64.media.tumblr.com/6625acfa135f373639d42c4c2afa265c/9a5e59d4a20102aa-4d/s75x75_c1/25095466d0f9bed2e5f9c034c38d543b922ca8da.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://64.media.tumblr.com/4da5613524cf08c02a1e948372de3c58/9a5e59d4a20102aa-8c/s75x75_c1/c12e1e1f72eb764678556e937ffac6c94bd10d57.pnj")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://64.media.tumblr.com/d0dba451bf4f1a1cc1e6f11df8877f9f/9a5e59d4a20102aa-e9/s75x75_c1/3e8f2ba972afa71346a8b31879c8fcf95cb0eb93.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://64.media.tumblr.com/76b1c52769848b74f755869e2427177d/9a5e59d4a20102aa-84/s75x75_c1/455e346408285b4892df391028fd0cad95ed22b0.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://64.media.tumblr.com/abe25dc79a23f2d5a47c19ca5a60fdd2/9a5e59d4a20102aa-26/s75x75_c1/92a119554e254c453ab572f08727d4d225bf7b4b.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://64.media.tumblr.com/d9b6699df09ba5dade9e78336729ed7b/9a5e59d4a20102aa-47/s75x75_c1/d313c1250a331ff2b826f42aaa231cc474005987.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://64.media.tumblr.com/d563e0636285b3919ed8b477d9bbdcac/9a5e59d4a20102aa-6d/s75x75_c1/a514a5c93521064070370e2d5e814740c469827f.gifv")

}   
</style>

<style>
/*Rounds profile picture*/
    .profile-pic img{
border-radius:25px;}
</style>

<style>
/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/

/*"Contacting You" Box Title*/
.contact .heading{ font-size:0; text-align:center; }
.contact .heading:before{ content: "Contact Me"; font-size:.8rem; font-serif-bold; }

/*"Latest Blogs Entries" Title*/
.blog-preview h4{ font-size:0; text-align:center;}
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "New Blog Entries  |"; font-size:.8rem; }

/*"Your Blurbs" Title*/
.blurbs .heading{ font-size:0; text-align:center;}
.blurbs .heading:before{ content: "Personality"; font-size:.8rem; font-weight:bold; }

/*"Your Friend Space" Title*/
.friends .heading{ font-size:0; text-align:center;}
.friends .heading:before{ content: "New Friends"; font-size:.8rem; font-weight:bold; }

/*"Your Friend Comments" Title*/
.friends#comments .heading{ font-size:0; text-align:center; }
.friends#comments .heading:before{ content: "Your Friends Comments"; font-size:.8rem; font-weight:bold; }
</style>

<style>
/*contact box border*/
    .contact{
border: 1px transparent !important;
border-radius: 15px;}
</style>

<style>
/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url('https://i.pinimg.com/originals/ed/04/04/ed04042096d8d2db481889520bbc9c3b.gif');
    background-position: center;
    border: var(--borders)!important;
    border-radius: 55px;
    height: 200px;}

.url-info p{
    opacity: 0.3;}
</style>

<style>
/*removes boxes around the interests/links table*/
body  
    {
--lighter-blue: none;
}
</style>

<style>
/*hides white box around comments table*/
    .table.comments-table:{
.comments-table td:first-child, .music-table td:first-child {
    background: #000000;
    
</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 19 of 19 comments ( View all | Add Comment )

Pin	1751722879 Using Report Comment
irem	1751509879 using Report Comment
DeerH3arted9	1750652344 using! Report Comment
ashlynn	1750589834 usinggg Report Comment
Skrota	1747194022 using! Report Comment
em	1740979381 usinggggg Report Comment
ruby	1733464408 using Report Comment
☆COLE_THE_V4MP☆	1727587780 Using!! Report Comment
nya	1726945586 using :3 Report Comment
Mila	1708880457 using Report Comment
⤷ Keebo !	1708550624 usingggggg (feb. 21, 2024) Report Comment
Go Weon	1708526916 usinggg Report Comment
★ syd ★	1707968785 using ^^ Report Comment
Marzy Mello	1707672645 Using as of 2/11/24 Report Comment
florin ≽^•⩊•^≼	1707629226 using!!! :3 Report Comment
★ ° sidy ๑ ׅ!	1707599475 Usando Report Comment
Constantine	1707414243 using!! looks sick Report Comment TYY, hope it works correctly for ya<33 by L0b0t0mmy; 1707420049; Report
Salem !!	1707271091 Totally rad, def using Report Comment That's so sweet! Tyyy, hope it works for ya!! <3 by L0b0t0mmy; 1707280740; Report