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 111 comments ( View all | Add Comment )
iiake	1725743910 using! ty!! Report Comment
spookie	1725231090 Using! ☆☆ Report Comment
luxe	1725149116 using !! ty Report Comment
fefa	1724849478 using! Report Comment
elly	1724786398 using Report Comment
llambguts	1724748164 using !! Report Comment
Cherviie !! ♪(´▽｀)	1724556937 using !! Report Comment
KAI 🍰💫	1724457430 using Report Comment
neth	1724451823 using! Report Comment
«→Scarlett⊰⁠⊹ฺ	1724380964 Using Report Comment
_Andre_Kriegman_	1724192090 using sigma Report Comment
Hamstercig6	1724101589 Using Report Comment
bawlingcat69	1724021429 Using Report Comment
Poe's Calligraphy Brush	1723951423 Using :^ Report Comment
ravvvi	1723864870 usingg Report Comment
ambrose <3	1723821909 USINGGGG :P Report Comment
kzaqii >w<	1723743126 usingg!!<3 Report Comment
Kiranᶻ 𝗓 𐰁	1723273267 usin! Report Comment
ru	1723191278 using :p Report Comment
ang3lv0m1t	1723141826 using!! Report Comment