Gothic lolita layout! (SCREENSHOT IS NOT COMPLETE!)

Tags: layout, goth, gothic, black, lolita, dark, dark coquette
Description:

i hope you like it! not relly my style but i made this for my friend, and thought sharing it would be cool!
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by ੭    ⊹     🦭.     ƖᴜƖᴜ.   ⏜   ͑♡ (https://layouts.spacehey.com/layout?id=106038) -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/QOZDKlpybZE? si=9shIQigzWBAxcywX//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<div style="float:  ; max-height: 200px; position: fixed; left: -550px; top: -115px; z-index: 00;"><a href="https://spacehey.com/lulovesyou"><img src="https://64.media.tumblr.com/2eb1f3ab5df4d0ee6e0be84ca5c6b848/d791814ce9cb80f6-e8/s1280x1920/cfe61810b1c74a77cceaf568ddf8bf41c7a4bbf9.pnj" title="made by lulu!" width="auto" height="165"/></a></div>

<div style="float:  ; max-height: 200px; position: fixed; right: -245px; center: -5px; z-index: 200;"><img src="https://64.media.tumblr.com/1738fa1956443d3b388af2ad2de2af79/d3a112f0f9ca26e4-24/s500x750/dc23ae9e2b87cd51cdd035476f55469f908e2ccc.pnj" width="180" height="auto"/></div>

<div style="float:  ; max-height: 200px; position: fixed; left: -555px; top: -170px; z-index: 00;"><img src="https://external-media.spacehey.net/media/s9wD7T1VFQE27tnY53Aounr2LT1O4lsDAHT01DORp1Sw=/https://i.postimg.cc/nrXyxsRp/click-me-removebg-preview.png" title="not me silly..!" width="175" height="auto"/></div>

<style>
@font-face {
font-family: sant joan; src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);}

   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/e3/f4/49/e3f449cc3956ba04ae263dd4d105d399.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;} } 

   body:after {
 content: " ";
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 background: linear-gradient(rgb(100 30 35 / 50%) 5%, rgb(0 0 0 / 0%) 50%);
 z-index: 0;
 background-size: 100% 2px, 3px 100%;
 pointer-events: none;
}

 .col, main, footer, nav::before, .online, nav .links, nav .top, .container {
  animation: float 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
 .col, main, footer, nav::before, .online, nav .links, nav .top, .container {
  animation: float 3s;
  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);
  }
}

   body {
 background-color: #f9dae9;
 background-image: url('https://i.pinimg.com/236x/72/04/e4/7204e48cf081beec5fb7a49af3c74dfb.jpg');
 background-attachment: fixed;
 background-size: cover;
 font-family: 'courier new';
}
   .container{
 padding-top: 30px;
 width: 850px;
 text-align: center;
}
   main {
 background-color: rgb(150 75 75 / 50%);
 box-shadow: 0 0 7px black;
 padding: 15px;
}

 ::-webkit-scrollbar {
   width: 15px;
}
 ::-webkit-scrollbar-track {
   background: rgb( 0 0 0 / 0% );
}
 ::-webkit-scrollbar-thumb {
   background-color: #212121;
   border-radius: 10px;
   border: 3px groove #ffffff;
}
 ::-webkit-scrollbar-thumb:hover {
   background: gray;
   box-shadow: 1px 1px 9px white;
}
  
  img:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite; }

@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); }
}

   nav .top {
 background-color: transparent;
 background-image: url('https://i.pinimg.com/236x/a4/71/54/a471545cdcff4cec26daca7232205f14.jpg');
 background-size: cover;
 background-position: center;
 box-shadow: 0 0 10px black;
 border: 1px solid black;
 height: 145px;
 padding: 53px;
}
   .logo {
 content: url("https://media.discordapp.net/attachments/1052022367913779341/1239386204265250837/8a8b09b43f3feda5682154e9a7450809dbf877dc.png?ex=664c9f19&is=664b4d99&hm=dbd86532706c5e05f589858cdbbf71821971f95aac9424c1be3ba01197f85db4&=&format=webp&quality=lossless");
}
   .top label, .top button {
 color: white !important;
}
    .top input {
 color: white !important;
 background-color: black !important; 
}
   button, input {
 font-family: 'courier new';
 overflow: visible;
 background: black;
 border: 1px solid pink;
 box-shadow: 0 0 10px pink;
}
   .logout-btn, .logout-form {
 color: white;
 display: inline-block;
 font-size: 100%;
 font-family: 'courier new';
 box-shadow: none;
}
   .top a {
 color: white !important;
 font-weight: bold;
}
   .top a:hover {
 color: red !important;
 text-decoration: none !important;
 text-shadow: 1px 1px 3px red, 0px 0px 5px black;
}
 nav .links li .icon {content: url('https://gifcity.carrd.co/assets/images/gallery83/03c9df6b.gif?v=ef10e8f3');
}
   nav .links {
 background-color: transparent;
 background-image: url('https://gifcity.carrd.co/assets/images/gallery47/e75194b9.png?v=d55ea43d');
 background-size: cover;
 text-align: center;
 margin-bottom: 1em;
}
    .links a {
 color: white !important; 
 font-weight: bolder !important;
}
    .links a:hover { 
 color: black !important; 
 text-decoration: none !important;
 font-weight: bolder !important;
 text-shadow: 1px 1px 2px black, 1px 0px 5px white;
}
   .contact .heading, .table-section .heading , .blurbs .heading , .friends .heading {
 font-family: Sant Joan;
 font-size: 15px;
 font-weight: bolder;
 background: linear-gradient(#300809, #5f0c0e, #b41010) !important;
 box-shadow: 0px 0px 5px 1px white;
 margin-bottom: 15px;
 text-align: center;
}
   .heading h4 {
 color: black !important;
 text-shadow: 0px 0px 3px white, 1px 1px 5px white;
}
   .general-about {
 color: white !important;
 padding: 10px 10px 14px 10px;
}
   .online {
 padding-top: 5px;
 margin: auto;
 content:url('https://i2.glitter-graphics.org/pub/341/341842q4vbfz1x40.gif');
}
   h1{
 color: white;
 font-family: Sant Joan;
 font-size: 30px! important;
 text-shadow: 1px 1px 3px black;
}
   .profile-pic {
 position: relative;
 width: 180px;
}
      .profile-pic img {
 max-width: inherit;
 box-shadow: 0px 0px 10px black;
}

     .contact {
 background-image: url('https://i.pinimg.com/236x/17/5a/29/175a29d8591f9d1c4ef35780c025e5d3.jpg');
 background-position: center;
 background-size: cover;
 box-shadow: 0px 0px 10px black;
 border: 1px solid black !important;
 font-weight: bold;
 text-align: left;
 text-decoration: none;
 text-shadow: 1px 1px 5px black;
 margin: 10px auto;
}
    .contact a {
 color: black !important;
 text-decoration: none;
}
    .contact a:hover {
 color: pink !important;
 text-shadow: 1px 1px 2px black, 1px 0px 5px white;
}
 .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://gifcity.carrd.co/assets/images/gallery10/e278d799.gif?v=d55ea43d")}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
 /* Add to Favorites */
content:url("https://gifcity.carrd.co/assets/images/gallery10/61e05e18.gif?v=d55ea43d")}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
 /* Send Message */
content:url("https://gifcity.carrd.co/assets/images/gallery10/ff337a89.gif?v=d55ea43d)}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
 /* Forward to Friend */
content:url("https://gifcity.carrd.co/assets/images/gallery10/465b0a59.gif?v=d55ea43d")}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
 /* Instant Message */
content:url("https://gifcity.carrd.co/assets/images/gallery10/2da30f5f.gif?v=d55ea43d")}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
 /* Block User */
content:url("https://gifcity.carrd.co/assets/images/gallery10/c3489a5e.gif?v=d55ea43d")}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
 /* Add to Group */
content:url("https://gifcity.carrd.co/assets/images/gallery10/2e99527a.gif?v=d55ea43d")}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
 /* Report Profile */
 content:url("https://gifcity.carrd.co/assets/images/gallery90/2052e252.gif?v=d55ea43d")}

   .url-info {
 border: 0px !important;
 background-image: url(https://gifcity.carrd.co/assets/images/gallery47/e75194b9.png?v=d55ea43d);
 background-position: 20% 0;
 background-size: cover;
 margin: 1px auto !important;
 font-size: 0px;
 height: 60px;
}

   .profile .table-section {
 border: 0px baby pink;
 box-shadow: 0px 0px 10px white;
 background-color: rgb( 0 0 0 / 50% ) !important;
}
   .profile .details-table td {
 color: white !important;
 font-weight: bold !important;
 background-color: transparent !important;
}
    a {
 color: white !important;
 text-decoration: none;
}
    a:hover { 
 color: baby pink !important; 
 text-decoration: none;
 font-weight: bolder !important;
 text-shadow: 1px 1px 2px red, 1px 0px 5px red;
}

    .profile-info {
 color: baby pink !important;
 background-image: url('https://i.pinimg.com/236x/01/ad/4b/01ad4b66b6b36a1a560dacdfade68e0f.jpg');
 background-size: cover;
 background-position: center;
 border: 0px solid white;
 box-shadow: 0px 0px 10px black;
      height: 100px
}
    .blog-preview {
 color: white !important;
 font-weight: bold !important;
 padding: 5px;
}
    .blog-preview a {
 color: white !important;
 font-weight: bold !important;
}
    .blog-preview a:hover {
 color: baby pink !important;
 font-weight: bold !important;
 text-shadow: 1px 1px 2px red, 1px 0px 5px red;
}
    .blurbs {
 color: white !important;
 background-color: rgb( 0 0 0 / 50% ) !important;
 box-shadow: 0px 0px 10px black;
}
    .blurbs .section h4{
 color: white !important;
 font-weight: bold !important;
}

   .friends {
 color: white !important;
 background-color: rgb( 0 0 0 / 50% );
 box-shadow: 0px 0px 10px black;
 font-weight: bold !important;
}
   .friends:not(#comments) {
 background: url('https://i.pinimg.com/236x/af/37/71/af3771504ae4ac9f7e84a1a9e722a0f1.jpg');
 background-position: center;
 background-size: cover;
 margin-bottom: 20px;
}
   .friends a {
 color: white !important;
 font-weight: bold !important;
}
   .friends a:hover {
 color: white !important;
 text-decoration: none !important;
 font-weight: bolder !important;
 text-shadow: 1px 1px 3px #FC6C85, 1px 0px 5px white;
}
   .friends .person p{
 color: white!important;
 font-weight: bolder !important;
}
   .profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
 box-shadow: 1px 1px 5px black;
 opacity: 0.8;
 max-width: 100%;
 max-height: 200%;
 display: block;
 margin: 0 auto;
}
 .profile .friends .person img:not(.icon):hover, .comments-table td:first-child img:not(.icon):hover {
 opacity: 1;
 box-shadow: 1px 1px 5px white, 0 0 10px white;
}
   .count {
 color: red !important;
 font-weight: bold !important;
}
    .more {
 color: white !important;
 font-weight: bold !important;
}

   .comments-table {
 background-color: rgb( 0 0 0 / 75% ) !important;
 box-shadow: 0px 0px 10px white !important;
}
   .comments-table a {
 color: white;
 font-style: normal;
 text-shadow: 1px 1px 1px black;
}
   .comments-table a:hover {
 text-decoration: none !important;
 text-shadow: 1px 1px 2px white, 1px 0px 5px white;
}
   .comments-table button {
 color: white;
}
   .comments-table td {
 color: white !important;
 background-color: rgb( 0 0 0 / 0% ) !important;
 border: 3px solid rgb( 0 0 0 / 0% );
 padding: 5px;
}
   table.comments-table {
 display: block;
 height: 250px !important;
 overflow-y: scroll;
}
   .comment-replies {
 padding: 0 5px;
 border: 1px solid white;
 margin-top: 10px;
}

   footer {
 color: white !important;
 text-decoration: none !important;
 font-weight: bolder !important;
 font-size: 12px;
 background: url('https://i.pinimg.com/236x/a4/cd/22/a4cd22c06bcb4f7742f211275deb5fe8.jpg');
 background-position: center;
 background-size: cover;
 box-shadow: 0px 0px 10px black;
 border: 1px solid white;
 height: 140px;
 margin-top: 2em;
 margin-bottom: 3em;
}
   footer a {
 color: pink !important;
 font-weight: bold !important;
}
   footer a:hover {
 color: white !important;
 font-weight: bold !important;
 text-shadow: 1px 1px 2px white, 0px 0px 5px white;
}
   footer .links {
 color: white !important;
}
   footer .links a {
 color: white !important;
}
   footer .links a:hover {
 color: pink !important;
 font-weight: bolder !important;
 text-shadow: 1px 1px 2px black, 0px 0px 5px white;
}

<style type="text/css">* {cursor: url(https://cur.cursors-4u.net/anime/ani-9/ani870.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/04/13/hello-kitty-in-black-magic-hat.html" target="_blank" title="Hello Kitty In Black Magic Hat"><img src="https://cur.cursors-4u.net/cursor.png" alt="Hello Kitty In Black Magic Hat" style="position:absolute; top: 0px; right: 0px;"/></a>

<!-- (c) Layout created by TWILAS LAY0UT SHACK (https://layouts.spacehey.com/layout?id=720) -->

<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
} </style>








<style>:root {
        --logo-blue: light purple ;
        --darker-blue: light purple ;
        --lighter-blue: light purple ;
        --even-lighter-blue: light purple ;
        --lightest-blue: light purple ;
        --dark-orange: light purple ;
        --light-orange: light purple ;
        --even-lighter-orange: black ;



<style/> 


<style>nav {
  overflow-x: hidden;
  position: middle;

}

nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(http://dl2.glitter-graphics.net/pub/590/590942t6xxcct7g8.jpg); }</style>


<style>main:before {
	width: 100%;
	height: 1000px ;
	display: block;
	content: "";
	background-image: url('http://dl7.glitter-graphics.net/pub/3558/3558937gaz0dti28b.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>

<style> 

body { 

font-family: Courier;
font-size: 15pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
}



h1 {
  color: black;
  text-shadow: 1px 1px 2px black, 0 0 25px purple, 0 0 5px gold;
} 

h1, h2, h3, h4,p {color: white;} 

:root { 

--black: white;
</style>




<style>
#comments .inner {
    max-height: 545px;
    overflow: scroll;
}
</style> 















<style>table table table td img { display:inline; }table td td{ width:0; } table { width:450px; } table table { width:auto; } table table td { padding:3px; } table table table td { padding:0; } table table table { width:220px!important; height:0; } td.text td a img { width:auto!important; } table table table table table, table table table table table td { width:0!important; padding:0!important; } td.text a img { width:100px!important; } td.text td.text a img { width:35px!important; } td td td div strong { width:170px!important; display:block; } embed,object { display:block;width:220px;height:38px; } table table td img, td.text td.text .orangetext15, td.text td.text table table div { display:none; }</style>





<style>
main{background:#00000088} table, tr, td { background-color:transparent;}div table tr td {background-color: BD9D00 !important;}div table tr td a:link, div table tr td a:visited, div table tr td a:hover {color: DDCCEE !important; font-weight: bold !important;}table {background-color: transparent !important;}table table table td {background-color: A50000 !important;}table table table table td {color: FFFFFF !important;}.clearfix {background-color: 000000 !important;}.profileInfo {border: 000000 2px solid !important;}.interestsAndDetails, .userProfileDetail, .contactTable {background-color: 000000 !important; border: BD9D00 2px solid !important; width: 200px !important;}.extendedNetwork , .latestBlogEntry, .blurbs, .friendSpace,.friendsComments {background-color: 000000 !important; border: FF0000 2px solid !important;}span, .btext, .redtext15 {background-color: transparent !important;}a {font-weight: normal !important; color: FF9BD4 !important;}b, span, .btext, .orangetext15, .whitetext12  {color: transparent !important;}.text  {color: 000000 !important;}.blacktext8 {color: FF0000 !important;}a.text:link, a.text:visited {font-weight: bold; color:FF0000 !important;}div object {background-color: A50000 !important; border: FF0000 2px solid !important;}ul li div span div {background-color: FF0000 !important; border: FF0000 2px solid !important;}table.contactTable tr td.text {background-color: 000000 !important;}table.contactTable td.tdborder table td{background-color: 000000 !important;}table.contactTable td.tdborder{background-color: 000000 !important;}div ul li a.open:link,div ul li a.open:visited,div ul li a.open:hover{background-color: 1548ae !important;}div ul li small{color: FF0000 !important;}.bodyContent{background-color: transparent;}body {background:url(http://dl2.glitter-graphics.net/pub/590/590942t6xxcct7g8.jpg);background-attachment:fixed;background-repeat:repeat;}table tr td div, div div a.text:link, div div a.text:visited, div div a.text:hover, div div a.text:active, div div p a:link, div div p a:visited, div div p a:hover, div div p a:active {color: FFFFFF !important;}








.profile .contact { background: url(http://dl7.glitter-graphics.net/pub/3558/3558937gaz0dti28b.gif);
background-size: cover;
background-position: center;
}

 </style>

<style>body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('http://dl7.glitter-graphics.net/pub/3558/3558937gaz0dti28b.gif');
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 4s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
<style/></style>

<style>
footer {
border-radius: 15px;
background-image: url(http://dl2.glitter-graphics.net/pub/590/590942t6xxcct7g8.jpg);
}
</style>












<style>
/* profile-info */

.profile-info {
    position: fixed;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    width: 100vw;
    border: 0;
    z-index: 20;
    -webkit-backdrop-filter: blur(20px);
}
.profile-info a {
    color: #FFF;
}


.profile-info { border:double 0px #Ffd1dc88;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
background: transparent url(http://dl9.glitter-graphics.net/pub/185/185499fkwlunybl0.gif) no-repeat center center;
background-size: contain;
    </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 461 comments ( View all | Add Comment )
Decumius!!	1752448689 using!! Report Comment
hypnotist	1752274280 Usinng:33 Report Comment
Thea	1752238644 usingg Report Comment
C0FF33_B34N	1752228755 Using :3 Report Comment
꧁𝐊𝐚𝐲'꧂	1752148339 using :P Report Comment
neptune	1752099554 using, tysm!! Report Comment
MarianGraves94	1752071095 Using! Report Comment
꧁ℬ𝒷𝓁𝒪ℋ𝒪𝒦 𝒯𝐼𝒪𝒥𝐼ℰℬ𝒪𝒰 ꧂	1751819970 использую <3 Report Comment
Sandi!	1751763368 Usingg!!!!! Report Comment
val	1751701921 using!! Report Comment
𝒩orayaki	1751602036 using Report Comment
letsallloveelian	1751587512 using Report Comment
gothlovesbobamilktea	1751564725 using Report Comment
lunie !!	1751483343 usingg Report Comment
Chelll🎀	1751380953 Using!! Report Comment
Kay!!( ˶ˆᗜˆ˵ )	1751377597 using :p Report Comment
Daniyah★🎸🎧⋆｡ °⋆	1751055822 Using Report Comment
Daniyah★🎸🎧⋆｡ °⋆	1751055822 Using Report Comment
Daniyah★🎸🎧⋆｡ °⋆	1751055822 Using Report Comment
2cuteRaven	1750825915 Usingg! <3 Report Comment