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 664 comments ( View all | Add Comment )
_karocarr	1784426508 using!! ^_^ Report Comment
verawulf	1784250481 using! Ty! Report Comment
violet.xx	1783881002 using!! <3 Report Comment
lylika	1783410101 using Report Comment
osamu	1783358642 using Report Comment
hanako_hiyuki	1781737228 Using!!! Report Comment
Lia ཐི ₍ᐢ. ̞.ᐢ₎ ཋྀ	1781670661 using Report Comment
♰ 𓏼 𝒜𝓃𝑔ℯ𝓁 ◞ Ω	1781652470 Using Report Comment
GUEST 666	1781052648 using Report Comment
Ceonecxncenho	1780686343 usingg Report Comment
js.dro	1780659461 using Report Comment
Kl3iters	1780533417 USING X3 Report Comment
onemFAERİS	1780506683 USİNNNN Report Comment
That_one_weird_mf1	1780040466 Usingg Report Comment
𖾕𖾝꙼ᩚ𛲕𖾟	1779718965 using Report Comment
Navivi	1779508249 using :3 Report Comment
beomhwa	1779491890 using Report Comment
beomhwa	1779491890 using Report Comment
Mervephobic	1779441073 usingg Report Comment
lora!!	1779041554 using!!! tysm twin this is beautiful Report Comment