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 20 of 32 comments ( View all | Add Comment )

𝕮𝖆𝖒 ☣︎	1788219528 Usinggg Report Comment
Lunacute	1783418611 using >w< Report Comment
Ventipxxp	1774662141 usinggg Report Comment
Lux (^_^)	1772307141 using !! Report Comment
Chevy	1771703056 using Report Comment
Chevy	1771703056 using Report Comment
Chevy	1771703056 using Report Comment
krustysplatoon	1770353795 useing Report Comment
profesional boy kisser	1763238492 using! Report Comment
「ℨ𝔞𝔱𝔠𝔬♡	1760243483 using!!! >< Report Comment
˚₊‧꒰ა doha ໒꒱	1760027012 Using, love it sm!!! Report Comment
Ekko	1759070076 using Report Comment
𝖊𝖑	1758851613 usingg Report Comment
〖♤♥_CANNIBALHEART_♥♤〗	1755314262 USING Report Comment
Pin	1751722879 Using Report Comment
irem	1751509879 using Report Comment
ashlynn	1750589834 usinggg Report Comment
Skrota	1747194022 using! Report Comment
emily	1740979381 usinggggg Report Comment
ruby	1733464408 using Report Comment