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 ✴𝖛𝖆𝖑𝖊𝖓𝖙𝖎𝖓𝖊✴ (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 66 comments ( View all | Add Comment )

Famine	1720490780 using Report Comment
durko🧂	1719848055 usrsmng! Report Comment
MagicalGirlVibes	1719618362 Using ~ Report Comment
♱ 𝕰𝖒𝖒𝖆 ♱	1719493986 Usando Report Comment
levruc	1717256530 using Report Comment love what you're doing with it by ✴𝖛𝖆𝖑𝖊𝖓𝖙𝖎𝖓𝖊✴; 1717372266; Report
Mana	1715051825 Using, but I haven't customized it much yet. The colors of this one are so pretty and flow well together. You rarely ever see blue with orange. Report 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 ✴𝖛𝖆𝖑𝖊𝖓𝖙𝖎𝖓𝖊✴; 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