halloween / gothic lolita / pixel art layout

Tags: layout, cute, 2000s, gif, goth, black, blue, pixelart, halloween, lolita

Description:

cutesy layout with tons of pixelated charm~ this layout is free to edit! please leave a comment if you use this- it took me a lot of time to make and i'd like to see how it grows. if any of the assets break, lmk in the comments.

!! click here for a bigger sample image !!

to get the custom interests to work, place the tags at the top of the layout code into the "movies" section of your page.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Valentine (https://layouts.spacehey.com/layout?id=30714) -->

<!-- place into movies section -->
<tr>
  <td><p>Anime</p></td>
<td>
<!-- replace with content -->
</td>
</tr>
<tr>
  <td><p>Games</p></td>
<td>
<!-- replace with content -->
</td>
</tr>

<style>
body {
background: url('https://foollovers.com/mat/w-s-hw/ta20-bg-halloween.gif'), url('https://foollovers.com/mat/stripe02/da03-bg-stripe.gif');
background-repeat: repeat-x, repeat;
background-attachment: fixed;
font-family: MS PGothic;
}
.container {
width: 902px;
background: #4C6896;
color: white;
border-left: 3px solid black;
border-right: 3px solid black;
margin: 0 auto;
}
main {
background: #4C6896;
color: white;
padding: 0;
}
a {
color: white;
}
a:hover {
color: #EB9C5C;
}
.pfp-fallback {
border: 2px dotted #EB9C5C;
}
.pfp-fallback img {
filter: grayscale(100%);
}
.count, nav .links .special a {
color: #EB9C5C;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
color: white;
}
nav .links a {
text-shadow: 0 0 7px #4C6896;
}
nav .links a:hover {
color: #EB9C5C;
}
nav {
background: none;
background-image: url('https://foollovers.com/mat/w-s-hw/h05-bg-halloween.gif');
}
nav .top {
background: none;
}
nav .links {
background: rgba(255, 255, 255, 0);
padding: 0;
text-align: center;
}
nav .links:after {
margin-top: 6px;
content: "";
display: block;
background: url('https://fluorescent-lights.neocities.org/lace-divider.gif');
height: 46px;
}
.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions, .blog-preview, .blurbs, .friends {
border: 23px solid rgba(0,0,0,0);
border-image: url("https://fluorescent-lights.neocities.org/frill-border.gif") 23 round;
}
.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading, .profile .inner, .url-info p, .edit-link.right-side, .blog-preview *, .mood, .general-about, .left span + p, .profile h1 {
background: black;
background-clip: padding-box;
}
.blog-preview * {
margin: 0;
}
.profile .url-info {
padding: 0;
}
.inner {
padding: 0;
}
.profile-info {
border: 23px solid rgba(0,0,0,0);
border-image: url("https://fluorescent-lights.neocities.org/frill-border.gif") 23 round;
padding: 0;
display: block;
}
.profile-info .inner h3 {
margin: 0;
}
.profile .contact .f-row {
margin: 0;
padding: 7px;
}
.table-section .inner p {
margin: 0;
}
.edit-link.right-side {
margin: 0;
padding: 3px 5px 3px 0;
}
.contact .icon {
display: none;
}
.contact .f-col:before {
content: "";
width: 12px;
height: 11px;
display: inline-block;
background: url('https://foollovers.com/mat/i-s-hw02/d09-halloween-pumpkin.gif');
}
#h-cat {
height: 140px;
width: 98px;
background: url('https://foollovers.com/mat/i-s-hw04/ia11-halloween-cat.gif');
background-size: contain;
position: fixed;
image-rendering: pixelated;
bottom: 0;
right: 30px;
z-index: -1;
}
#p-cat {
height: 72px;
width: 46px;
background: url('https://foollovers.com/mat/i-s-hw02/p04-halloween-cat.gif');
background-size: contain;
position: fixed;
image-rendering: pixelated;
bottom: 0;
right: 140px;
z-index: -1;
}
.profile h1 {
border: 23px solid rgba(0,0,0,0);
border-bottom: 0;
border-image: url("https://fluorescent-lights.neocities.org/frill-border.gif") 23 round;
margin: 0;
color: #EB9C5C;
text-align: center;
}
.profile h1:after {
content: "";
display: block;
height: 7px;
background: url('https://foollovers.com/mat/line02/pac03.gif');
margin-top: 7px;
padding-bottom: 7px;
background-repeat: repeat-x;
}
.general-about, .left span + p {
border: 23px solid rgba(0,0,0,0);
border-top: 0;
border-bottom: 0;
border-image: url("https://fluorescent-lights.neocities.org/frill-border.gif") 23 round;
margin: 0;
}
.left span + p {
padding-bottom: 10px;
}
.mood {
border: 23px solid rgba(0,0,0,0);
border-top: 0;
border-image: url("https://fluorescent-lights.neocities.org/frill-border.gif") 23 round;
margin: 0 0 10px 0;
}
.mood p:first-child {
padding-top: 10px;
}
.general-about .profile-pic {
margin: 0;
position: relative;
left: 7px;
}
.details p {
margin: 0 7px 0 153px;
}
.details p:first-child {
padding-bottom: 7px;
}
.details p:not(:first-child) {
padding: 7px 0;
}
.details p:not(:last-child) {
border-bottom: 2px dotted #EB9C5C;
}
.general-about .profile-pic img {
max-width: 130px;
max-height: 130px;
}
.profile .contact .heading h4, .profile .table-section .heading, .profile .blurbs .heading h4, .profile .friends .heading, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .setting-section .heading h4, .statistics .heading h4, .blog-preview h4, .url-info b {
color: #EB9C5C;
text-align: center;
display: block;
}
.profile .contact .heading h4:after, .profile .table-section .heading:after, .profile .blurbs .heading h4:after, .profile .friends .heading:after, .blog-entry .comments .heading h4:after, .bulletin .comments .heading h4:after, .home-actions .heading h1:after, .setting-section .heading h4:after, .statistics .heading h4:after, .blog-preview h4
.profile .blurbs .section:after, .blog-preview h4:after, .url-info b:after {
content: "";
display: block;
height: 7px;
background: url('https://foollovers.com/mat/line02/pac03.gif');
margin-top: 7px;
background-repeat: repeat-x;
}
.url-info p:last-child {
text-align: center;
padding-top: 7px;
}
.profile .blurbs .section {
margin: 0;
}
.profile .blurbs .section .edit-link {
margin: 0;
}
.profile .blurbs .section:last-child {
display: none;
}
.profile .blurbs .section h4 {
display: none;
}
.online {
color: #EB9C5C;
display: flex;
align-items: end;
}
footer:before {
content: "";
display: block;
height: 46px;
background: url('https://fluorescent-lights.neocities.org/lace-divider-2.gif');
}
footer {
background: none;
background-image: url('https://foollovers.com/mat/w-s-hw/h05-bg-halloween.gif');
margin: 0;
padding: 0 0 10px 0;
}
footer p {
margin: 0;
margin-top: 10px;
}
.details-table td:first-child, .details-table td, .comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
background: none;
}
table.comments-table {
border-collapse: collapse;
border: 0px solid black;
}
.comment-replies {
border: none;
border-top: 1px solid white;
}
.details-table td:first-child {
color: #EB9C5C;
}
.details-table td:first-child p {
text-align: center;
}
.table-section:nth-last-child(2) .details-table td:first-child p:before, .table-section:nth-last-child(2) .details-table td:first-child p:after {
content: url('https://foollovers.com/mat/i-s-hw02/h16-halloween-pumpkin.gif');
margin: 0 5px;
}
.online::before {
  content: "";
  width: 26px;
  height: 21px;
  background: url('https://foollovers.com/mat/i-s-hw/f02-halloween-pumpkin.gif');
    background-size: auto;
  background-size: contain;
  display: inline-block;
  margin-right: 5px;
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  animation-duration: 2s;
}
.online img {
display: none;
}
.table-section:nth-last-child(2) .details-table tr:nth-child(1) td:first-child:after {
content: "";
height: 100px;
width: 100px;
background: url('https://foollovers.com/mat/i-s-hw02/la06-halloween-ghost.gif');
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.table-section:nth-last-child(2) .details-table tr:nth-child(2) td:first-child:after {
content: "";
height: 100px;
width: 100px;
background: url('https://foollovers.com/mat/i-s-hw/qfa01-halloween-pumpkin.gif');
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.table-section:nth-last-child(2) .details-table tr:nth-child(3) td:first-child:after {
content: "";
height: 100px;
width: 100px;
background: url('https://fluorescent-lights.neocities.org/pumpkitties.gif');
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.table-section:nth-last-child(2) .details-table tr:nth-child(4) td:first-child:after {
content: "";
height: 100px;
width: 100px;
background: url('https://fluorescent-lights.neocities.org/books.gif');
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.table-section:nth-last-child(2) .details-table tr:nth-child(5) td:first-child:after {
content: "";
height: 100px;
width: 100px;
background: url('https://fluorescent-lights.neocities.org/crystal-ball.gif');
display: inline-block;
background-repeat: no-repeat;
background-position: center;
}
.table-section:nth-last-child(2) .details-table tr:nth-last-child(-n+3) {
display: none;
}
.blog-preview p {
display: flex;
align-items: center;
padding-top: 10px;
}
.blog-preview p:before {
content: "";
width: 78px;
height: 26px;
display: inline-block;
background: url('https://fluorescent-lights.neocities.org/03a-blog.gif');
background-size: contain;
margin-right: 5px;
}
.profile .friends .person p {
color: #EB9C5C;
}
.profile .friends .inner .friends-grid {
text-align: center;
}
.profile #comments {
margin: 20px 0;
}
.general-about {
min-height: 160px;
}
</style>
<!-- additional elements -->
<span id="h-cat"></span>
<span id="p-cat"></span>
<center><img src="https://fluorescent-lights.neocities.org/candles.gif"/></center>

<!-- about me contents -->
put about me here!
<!-- end of about me -->

<!-- please do not remove the credits below -->
<br/><br/>
<center>
<sub style="color: lightgray">layout by <a style="color: lightgray" href="https://spacehey.com/fluorescent_lights">[fluorescent lights]</a>. asset credits: most assets from <a style="color: lightgray" href="https://foollovers.com">[foollovers]</a>. additional assets:  
<a style="color: lightgray" href="https://deviantart.com/lewdtea/art/Candles-613931364">[Candles by LewdTea]</a> 
<a style="color: lightgray" href="https://deviantart.com/hyraea/art/Pumpkin-Kitties-263522789">[Pumpkin Kitties by Hyraea]</a> 
<a style="color: lightgray" href="https://deviantart.com/king-lulu-deer/art/Stack-of-Books-768393991">[Stack of Books by King-Lulu-Deer]</a> 
<a style="color: lightgray" href="https://www.deviantart.com/king-lulu-deer/art/Crystal-Ball-768533152">[Crystal Ball by King-Lulu-Deer]</a></sub></center>

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 61 comments ( View all | Add Comment )

SUMLIGHTZ	1713256592 using Report Comment the top section of code needs to be placed in the "movies" section of your edit profile page to display correctly, fyi by Valentine; 1713257002; Report
VEN!!	1713237495 using :3 Report Comment
Yui	1709704509 usando!! Report Comment
River	1707361692 using Report Comment
SEVERUS	1707189263 Using >_< 🫶 Report Comment
COCO 🍰	1705941882 using! Report Comment
˚₊‧꒰ა ♱ ໒꒱ ‧₊˚ Emerald ˚₊‧꒰ა ♱ ໒꒱ ‧₊˚	1705756145 using Report Comment
St4ri4!!	1704502438 using! Report Comment
Lil_Pink	1704472636 using<3 Report Comment
meldrawzmoonz☆*:・ﾟ	1703904718 Using!! <3 Report Comment
damien ♱	1701757841 ( using !!! ^_^ ) Report Comment
Seraphram 𓆩♡𓆪	1701716424 REALLY cool layout with a lot of work put in, thank you for sharing! I'll be checking it out! <3 Report Comment
pinkdemonica	1701025028 using! Report Comment
SMM	1698116566 Using Report Comment
flesh	1697810194 using ^_^ Report Comment
rainbox	1696947392 using! :) Report Comment
Monokuro_Kiss	1696684932 using Report Comment
R♡ZI	1696519907 using!! this is so cute! Report Comment
Purple/Starz ☆⌒(*＾-゜)v🍉	1696475671 using! <3 Report Comment
SODA!!	1695543232 using! this is so coo, Report Comment