Super cool gothic thingy :3

Tags: goth, black, gothic, red

Description:

a cool gothic layout, includes an animated heart pfp, custom bell icon, intro animation, boo cursor, and it moves up and down (idk how to explain)
any pictures, gifs, videos, music, etc can be added or removed to more fit what you want :)
also it looks better on desktop then phone sorry :')

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Viz (test acc) (https://layouts.spacehey.com/layout?id=94396) -->

<style>
body{
background-color: color !important;
background-image: url('https://i.pinimg.com/564x/fb/57/6a/fb576a13af84eea036eb7c73c07adbf2.jpg') !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-size: cover !important; }
</style>

<style>
main{
background-color: rgba(225, 225, 225, 0.8) !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-size: cover !important; }
</style>

<style>
.general-about img {-webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}
</style>

<style>.logo{content: url(https://cdn.spacehey.net/layouts/27290_ea831d2637910e894ec437dac1f4fedf.jpg?token=M31RYWA7T5hnRsPm6GT7ekC-E19CpKIBbSnLBezzjKA&expires=1704492108);width: 165px !important;height: 42px !important;}</style>

<style>
.heading{
background-color: black !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-size: cover !important; }
</style>

<style>
.top{
background-color: black !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-size: cover !important; }
</style>

<style>.online{content: url("https://blinkies.cafe/b/blinkiesCafe-SH.gif") !important;}</style>

<style>li.active .icon { content:url('https://media.tenor.com/MvvH659by6cAAAAj/skull-skull-emoji.gif'); width: xxxpx;height: xxxpx;}</style>

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

<style>table.comments-table{display: block;height: 250px!important;overflow-y: scroll;}</style>

<style>
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/games/gam-13/gam1211.cur), auto !important;} /* End https://www.cursors-4u.com */
</style>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Rubik+Glitch&display=swap');
font-family: 'Rubik Glitch', system-ui;
</style>

<style>h1{font-family: Rubik Glitch !important;}</style>

<style>
.comments-table td{
background-color: darkred !important;
background-image: url('url') !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-size: cover !important; }
</style>

<style>a{color: red !important;}</style>

<img src="https://i.pinimg.com/originals/ba/c4/12/bac4122b648918bc0957725e14f3972b.gif"/>

<style>
  @import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
font-family: 'DotGothic16', sans-serif;
</style>

<style>body{font-family: DotGothic16 !important;}</style>

<style>body{color: darkred !important;}</style>

<style>
table, th, td {
border: 0px solid;
}

: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 red !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>
.links{
background-color: black !important;
background-image: url('picture url') !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-size: cover !important; }
</style>

<style> .contact{
border: 2px solid black !important;
}
</style>

<style>
.url-info{
border: 2px solid black !important;
}
</style>

<style>
table.details-table{
border: 2px solid black !important;
}

}
</style>

<style>
.friends{
border: 2px solid black !important;
}
</style>

<style>@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 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .col, main, footer, nav::before, .online, nav .links, nav .top { animation: float 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes float { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 8px); } 100% { transform: translate(0, -0px); }</style>

  <style>
.profile .table-section{
    border:2px solid black;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:#000000;
    border: 1px solid black;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: red;
    text-shadow: 1px 1px 2px black;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }
 /*customising friend space heading*/
  .profile .friends .heading{
    background: #c50576;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 2px black
  </style>

<style>
footer{
background-color: rgba(225, 225, 225, 0.7) !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: top left !important;
background-size: cover !important; }
</style>


      <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/68/c5/3b/68c53bb8239febd3a5b6958b75a444d2.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: youranimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes youranimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>


Put your about me here ( or delete this if you dont want an about me )

<img src="https://lh3.googleusercontent.com/drive-viewer/AK7aPaBai9Uxb1Y7fki5pgIPQDjZRWbAb6SZJpujffSjyAUXMRA8bMXOwO8NORmlQemcP49znmLTMsa5RmXfCY0G_FvTtkU52w=s2560"/>

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

Ender	1774097425 Using the heart hope u dont mind! Report Comment
𓆩Brooke𓆪	1771452397 Could I just use the heart beat icon ??? if so, how do I do that ?? Report Comment
꒰ s̲αɱ (´ཀ`)	1769129682 usando Report Comment
✪⚠︎☢︎︎𝖠ꪱᜒᑯ౿𐓣 ౿ᥣ ρɑɣɑડ𝗈☢︎︎⚠︎✪	1766616270 usingg!! itz super cute!! Report Comment
poetic tragedy 🦇	1758429559 using Report Comment
Lilith<3	1752634098 us1ng!! :)) Report Comment
𖤐 maddie	1750401298 using!!!!!!!! Report Comment
☥Rhonaven☥	1741120923 using Report Comment
𓈒 𝒞 Bambi 𓏏𓏏	1737248261 using this ^_^ Report Comment
eye_collector	1732365435 took the animated heart pfp from here, hope you don't mind 👉👈 Report Comment
Xx_T4bri5_xX	1731327141 USING!! Report Comment
iwbao	1726921300 whjyd youmprank me i dont have autsim Report Comment
Rain	1715196618 using :) Report Comment
Totari ✮	1714191347 hai what's the code for just the heart pfp? Report Comment not sure, ive been lookin though lolol by lunar; 1724893581; Report .general-about img {-webkit-mask-image: url(https://images.emojiterra.com/google/noto-emoji/unicode-15/animated/1fac0.gif);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;} by ⍣✩ Al ✩⍣; 1726677218; Report
ੈ✩‧₊˚༺𝑳𝑨𝑵𝑮𝑨༻ੈ✩‧₊˚	1709051998 Using :D Report Comment
Str3wburryn	1707157080 Usinggg Report Comment
Ken	1706972046 using Report Comment
marbi	1706853265 using:3 Report Comment
𝖈𝖆𝖘𝖕𝖊𝖗	1706845255 using ^_^ Report Comment
Rag3	1706672550 using!! Report Comment