gothic layout !!!

Tags: #goth #bat #black #skulls #myspace
Description:

a gothic layout i made with animal skulls as the background and a myspace logo :3 hope u like !!!
Preview:

click on the image for a larger preview
Code:

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

<style>
body {
        background:url(https://i.pinimg.com/564x/dc/08/04/dc08043dfe44e7eddddcb755a2726641.jpg);
}
main {
background-color: rgba(177, 0, 0, 0.36);
border-radius:15px;
border: 8px double rgba(255, 255, 255, 1);
color: white;
text-shadow: 0 0 9px white;
}
:root {
        --logo-blue: url();
        --darker-blue: white;
        --lighter-blue: black;
        --even-lighter-blue: url();
        --lightest-blue: black;
        --dark-orange: white;
        --light-orange: url();
        --even-lighter-orange: black;
        --green: white;
    }
<style>
.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview { 
  border-style:Double; 
 border-width:6px; 
 border-color:white; 
background:#000000;
}

/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.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/b9587d63e59d031c783153662d6e6161/f651789587d2564c-e6/s75x75_c1/c21ae6b510b37356d80e308f5bd0d7dc5aa1af2f.gifv);
}
.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/d563e0636285b3919ed8b477d9bbdcac/9a5e59d4a20102aa-6d/s75x75_c1/a514a5c93521064070370e2d5e814740c469827f.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/abe25dc79a23f2d5a47c19ca5a60fdd2/9a5e59d4a20102aa-26/s75x75_c1/92a119554e254c453ab572f08727d4d225bf7b4b.gifv);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content:url(https://64.media.tumblr.com/d9b6699df09ba5dade9e78336729ed7b/9a5e59d4a20102aa-47/s75x75_c1/d313c1250a331ff2b826f42aaa231cc474005987.gifv);

}
<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "fellow entities"; font-size:.8rem; font-weight:bold; 
color:white; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "comments"; font-size:.8rem; font-weight:bold;
color:white; } 
</style>
<style>
 .profile .table-section .heading h4 { font-size:0; }
.profile .table-section .heading h4:before{ content: "more about me"; font-size:.8rem; font-weight:bold; 
color:white; }
 </style>
<style>
    .contact .heading{ font-size:0; }
.contact .heading:before{ content: "add me if you dare"; font-size:.8rem; font-weight:bold;
color:white; }
 </style>
<style>
  .blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "meeeeee"; font-size:.8rem; font-weight:bold; color:white; }
</style>
<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>
  
<style>
h1{
animation: type 3s steps(27);
  color: transparent;
  font-size: 7px;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}
}
footer {
border-radius: 15px;
background-image: 
url(https://i.pinimg.com/564x/dc/08/04/dc08043dfe44e7eddddcb755a2726641.jpg);
color:white; 
}
        .online{content:url(https://www.myspacegens.com/images/online_now/39.gif) }
    </style>
<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-1/hol62.cur), auto !important;}</style>
<a href="" target="_blank" style="position:absolute; top: 0px; right: 0px;"></a>
<style>
.friends .inner {
    overflow-y: scroll;
    max-height: 400px;
}
</style>
<style>
    .profile h1{
        font-size: 40px;
        text-align: center;
    }
             ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: black;
    border: outset 4px white;
    }

    ::-webkit-scrollbar-track {
    background: linear-gradient(white, black);
    border: inset 4px gray;
    }
.logo {
content:url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg");
filter: invert(100%);
}
   a:hover {
     color: red; 
   } 
   a{
     color: ; 
   }
<style></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 2 of 2 comments ( View all | Add Comment )
zero
1711077941
Using :3
Report Comment
Digivox
1709607589
Very epic
Report Comment