Gothic themed layout

Tags: black, gray, grunge, simple, emo, goth

Description:

simple little goth/idk like Victorian???? themed layout, there are little helpers in the code of what things are but not everything's labeled, its a flexible layout so u do u, there are snowflakes, round profile, profile spin, and custom contact and profile icons (all changeable), pls tell me if u have any problems what so ever :) 🖤🖤🖤

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ༺♰༻Clementine༺♰༻ (Autoplay!) (https://layouts.spacehey.com/layout?id=106610) -->

<style>
}
/*these are ur color settings*/
:root {
  --text: white;
  --links: rgb(48, 25, 52);
  --shift: rgb(48, 25, 52);
  --borders: rgba(48, 25, 52);
  --background: white;
  --shadow: rgb(48, 25, 52)
}
/*this is ur main bg image*/
body {
 margin: 1px;
 background-image: url(https://i.pinimg.com/564x/47/6c/0b/476c0b401012ea57c0fb793b396598db.jpg);
 background-attachment: fixed;
 font-weight: bold;
 padding-top: 30px;
 padding-bottom: 30px;
}
.container {
  box-shadow: 0px 0px 10px var(--shadow);
  border:  var(--borders) 2px solid;
  border-radius: 10px;
}
/*this is ur spacehey logo,feel free to change it up*/
nav img.logo {
    filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%);!important;
}
}
p {
 color: var(--text);
 font-weight: bold;
}
button {
  background: var(--background);
  color: white; (--text);
  font-weight: bold;
  border: 1px solid var(--borders);
}
button:hover {
  box-shadow: 0px 0px 7px var(--shadow);
  transition: 0.2s;
  color: white;
}
.col.w-40.left .contact{
background: var(--background);
border: white
}
.col.w-40.left .table-section{ 
border: none
}

}
input {
  color: var(--text);
  font-weight: bold;
  border: var(--borders) solid 1px;
  background: var(--background);
}
input:hover {
  box-shadow: 0px 0px 7px var(--shadow);
  transition: 0.2s;
  color: white
}
nav .top , nav .links{
  background: transparent;
  text-align: center;
}
/* feel free to chnage this emoji*/
nav .links li:not(:last-child)::after {
     content: "🩶";
  color: white; (--text);
}
/*this is ur secondary bg, the one insie ur prof*/
main {
 background: url(https://i.pinimg.com/564x/b5/6e/b6/b56eb6f5026caa11060548947978595f.jpg) !important;
 border-top: 0px;
 border-bottom: 0px;
 margin-top: 0px;
 margin-bottom: 0px;
}
h1 {
  color: white;
}
/*this make ur profile round annnnnd spinnnnn*/
.profile-pic img {
  border: solid var(--borders) 2px;
  border-radius: 100px;
  box-shadow: 0px 0px 8px var(--shadow);
}
.profile-pic img:hover{
  animation: rotate 0.9s infinite linear;
}
/*this is ur online image, u can find many options on layouts*/
.online { 
  content: url(https://i.ibb.co/rZctnwP/onlinebw.gif);
}
.mood {
  padding-top: 3px;
}
.blurbs:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 30px;
  background-image: url(https://64.media.tumblr.com/88e3658f27315f077a2c46698e1131af/81b88b2ec67f7892-fd/s400x600/48c8b4296cec9d7115b43ea84c36708ada9758f2.pnj);
  background-repeat: round, no-repeat;
  background-size: 240px;
}
.blurbs .inner {
  text-align: center !important;
}
.url-info {
  display: none;
}
nav {
  background: var(--background) !important;
  color: white;(--links);
  border-radius: 2px;
}
footer {
  background: var(--background) !important;
  color: var(--links);
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 2px;
}
.comments-table, .comment-replies {
  border: none;
  border-radius: 100px;
}
.profile-info, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
  background-color: transparent;
  border: none;
}
#comments {
  height: 200px;
  overflow-y: scroll;
 border-radius: 20px;
 margin-top: 20px;
}
    .icon{
        display: none;
}
.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon){
  border: 2px solid var(--borders);
  box-shadow: 0px 0px 7px var(--shadow);
  border-radius: 100px;
}
.comments-table td:first-child img:not(.icon):hover {
  animation: rotate 0.5s;
  animation-iteration-count: infinite;
}
a, nav .links a, .special {
  color: white;(--links) !important;
  text-shadow: none;
}
a:hover, nav .links a:hover, .special {
  color: white; (--shift) !important;
  text-decoration: none !important;
  transition: 0.2s;
}
.logout-btn {
  color: white;(--links);
  box-shadow: none;
}
.logout-btn:hover {
  color: grey;(--shift);
  box-shadow: none;
  border: none;
  text-decoration: none;
  transition: 0.2s;
}
    DIV.blog-preview{
        text-align: center;
        border: ridge 3px black;
        background-image: url(https://i.pinimg.com/564x/8e/6a/dd/8e6add28eceddbbb1a29a1aae1e0cc97.jpg);
        border-radius: 5px;
         box-shadow: 0px 2px 2px white;
        
}
    .profile .blurbs .section h4{
        text-align: center;
        text-shadow: 0px 2px 2px #301934;
        color: white;

}
    .profile .mood{
        border: ridge 3px none;
        border-radius: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
}
    .profile .friends .heading{
         border-radius: 5px;
         border: ridge 3px black;
         text-align: center;
         box-shadow: 0px 2px 2px white;
}
.profile .friends .heading h4{
        color: white;
        box-shadow: ;
        text-shadow: 0px 2px 2px white;
}
    .profile .friends .inner{
        text-align: center;
        background-image: url(https://i.pinimg.com/564x/8e/6a/dd/8e6add28eceddbbb1a29a1aae1e0cc97.jpg);
        border: ridge 3px black;
        border-radius: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
}
  .profile .friends .person p{
        display: none;
}
    .profile .friends .person img:not(.icon){
        border: ridge 3px white;
        border-radius: 5px;
         box-shadow: 0px 2px 2px gray 
}
.contact .inner a img {
  font-size: 0;
}
/*these are ur contact icons, u can change the icon image to whatever u want*/
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before,
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
content: url(https://media.discordapp.net/attachments/1026163393381531669/1244304039412240394/PinClipart.com_celtic-crosses-clipart_5451917.png?ex=66549ff1&is=66534e71&hm=15fdac0c1c5ebbfc3086195f62e83ac594453dbda9501890349da9610057b157&=&format=webp&quality=lossless&width=27&height=63);
}
.profile .table-section .details-table td {
  background-color: black;
}
.profile .blurbs .heading {
  font-size: 15px;
  font-weight: bolder;
  background: transparent;
  color: white;(--links);
}
.col.right h4 {
  color: white;(--links);
  text-align: left;
}
.profile .blurbs .section h4, .profile .friends .heading, .profile .contact .heading, .profile .table-section .heading {
  background: none;
  color: white;(--text);
  font-style: italic;
}
.profile .blurbs .section h4 {
  padding-left: 5px;
}
.person p {
  color: var(--links) !important;
}
.person img{ 
  border: 2px solid var(--borders);
  box-shadow: 0px 0px 7px var(--shadow);
  border-radius: 200px;
  display: absolute;
  height: 100px;
  object-fit: cover;
  width:100px;
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

main{background: none}

/*body text setting*/
   body{font-family: 'Orbitron', sans-serif;
   color: white !important;
   font-size: 90%;
   text-shadow: 2px 2px 3px #FFFFFF, 
/*heading text setting*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 120%;
   color: white !important;
   text-shadow: 2px 2px 3px black, 0 0 25px black, 0 0 5px #FFFFFF}
}
/*this is ur text setting*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px black, 0 0 25px black, 0 0 5px black;}

}
.person:hover {
  animation: rotate 0.9s;
  animation-iteration-count: infinite;
}
.count {
  color: white; (--links);
}
footer:after{
  bottom: 0;
  font-size:0;
  left: 75%;
  position:fixed;
  pointer-events: none;
 } content:url(https://i.pinimg.com/564x/1c/4c/98/1c4c98df90fca35e88624ad50a94c67d.jpg);
  animation: slideIn 2s forwards;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
} 
@keyframes slideIn {
  0% {
    transform: translateX(900px);
  }
  100% {
    transform: translateX(0);
  }
}
/*this is ur snowflake code,u can change the emojis to whatevr u want*/
@media screen and (min-width: 0px) and (max-width: 720px) {
  footer:after { display: none; }
</style>

<div class="snowflakes">
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
<div class="snowflake">🩶</div>
</div>

<style>
.snowflake {
font-size: 20px;
}
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

/*layout by clementine*/
</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 1367 comments ( View all | Add Comment )

depravedrhody	1756954472 using! tysm <3 Report Comment
Aurora♥	1756923803 usingggg Report Comment
coreymustdie	1756922817 attempting to use the backround <3 (im new to spacehey i have no idea what im doing help) Report Comment
xtyz	1756746930 usinggg Report Comment
exmachinegrl	1756710102 uaingggg Report Comment
v4mpPrincessXoXo	1756616465 Amazing work! Using<3 Report Comment
𐔌 . ⋮SiLlY dEPrEsSeD.ᐟ ֹ ₊ ꒱	1756595306 Usando:33 Report Comment
ozzie	1756576945 usingggg!!1!!1!1 Report Comment
Tuesday	1756525314 using !!! Report Comment
hikaru ᶻ 𝗓 𐰁	1756500118 using Report Comment
FilthyL1ar	1756487546 USING FOR SURE!!!!!! Report Comment
FilthyL1ar	1756487544 USING FOR SURE!!!!!! Report Comment
FilthyL1ar	1756487544 USING FOR SURE!!!!!! Report Comment
al3xpl1cit	1756439046 using Report Comment
StxrzXloortjee	1756403362 using :) Report Comment
✨BR14NN4🤍✨	1756368290 Using Report Comment
C4L3B	1756323326 Uuussssinngggg 💚💚💚 Report Comment
☆Ronnie☆	1756309528 usinggg;p Report Comment
°-Atlas-°	1756281324 Using! Report Comment
°-Atlas-°	1756281302 Using! Report Comment