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 23 comments ( View all | Add 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 vee; 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
RAWR XD	1706617631 USING >:3 Report Comment
Sasha Frankenstein	1706062527 Using Report Comment
sage ✰ ваня	1705768976 using! <3 Report Comment
alewscr	1705700129 using Report Comment
Aster/Alaric	1705670898 usinggg Report Comment
Moui モウイ	1705453519 using :p Report Comment
rainbowDash<3	1705382274 USING Report Comment
lex	1705296431 using! Report Comment
🍙 🍡 PHASMO!	1705153768 USING OMG Report Comment