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

Rain	1715196618 using :) Report Comment
Totari ✮	1714191347 hai what's the code for just the heart pfp? Report Comment
ੈ✩‧₊˚༺𝑳𝑨𝑵𝑮𝑨༻ੈ✩‧₊˚	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
RAWR XD	1706617631 USING >:3 Report Comment
Sasha Rodriguez-Cerra	1706062527 Using Report Comment
🦇✰𝕁𝕦𝕝𝕚𝕖𝕟 ℂ𝕠𝕣𝕧𝕠✰🥀	1705768976 using! <3 Report Comment
alewscr	1705700129 using Report Comment
Aster/Alaric	1705670898 usinggg Report Comment
Mxui.com	1705453519 using :p Report Comment
rainbowDash<3	1705382274 USING Report Comment
lex	1705296431 using! Report Comment
_CH0cOz	1705153768 USING OMG Report Comment
homulily<3	1705081469 usingg ,,!! Report Comment
Lukki	1705042330 Using!!:3 Report Comment
cade <3	1704587452 using!! Report Comment