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 492 comments ( View all | Add Comment )
onyx !!	1755923217 using Report Comment
BABYBLUE	1755809971 using Report Comment
starved ann.	1755779636 using Report Comment
starved ann.	1755779636 using Report Comment
starved ann.	1755779635 using Report Comment
Zeynep Asia	1755718853 usingg qwq Report Comment
R0bin_L41n	1755709807 usingg Report Comment
ꉂ✚`˖ *ꜱᴡᴇᴇᴛʜᴇᴀʀᴛ୭ ˚. ᵎᵎ	1755618767 Usingg Report Comment
Calvin/Frank (Under construction)	1755231129 Using Report Comment
leo (⁠｡⁠･⁠ω⁠･⁠｡⁠)⁠ﾉ⁠♡	1755085111 Using Report Comment
jiji	1754935637 using Report Comment
~Lei~	1754757633 using Report Comment
ZᗩGᒪOT	1754292264 using Report Comment
Hazyy	1754187405 using Report Comment
ꔚMari━ ✩・*。<3	1753977286 Using Report Comment
Crimson_r3d	1753907155 using Report Comment
˚ʚ♡ɞ˚	1753900689 using c: Report Comment
Ky ♡	1753821386 using Report Comment
-.addie.-★	1753722742 using Report Comment
Throne	1753593516 Using Report Comment