Festival Marketplace

Tags: retro, vintage, 80s, 90s, food, store, checkers, white

Description:

Theme based after vintage supermarkets from the 80's and 90's. It's sort of an amalgamation of things I found in photos on the Cari site, and a mishmash of elements that don't work too well together but look nice anyways. This is a very nice theme to use if you want your page to look like the store your grandma goes to to buy groceries!

ALSO, ALL the colors that aren't used on the lattice background for interests or the basket background are customizable. I'm not saying It'll look better if you make the background bright red or anything, but the opportunity is there!

ALSO ALSO, The entire page uses web-safe colors. There isn't really any way to set this on the shadows or profile pictures, but anything that can be web-safe is. There isn't any practical or good reason for this, I just like web safe colors :]

Update note about mobile? The theme looks alright but I might need to fix the taskbar sometime. Not likely but I'll think about it.

Preview:

click on the image for a larger preview

Code:

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

<style>
  @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Tilt+Warp&display=swap');
</style>
<style>
:root {
/** USED COLORS**/
--white: #fff;
--white-t: #fffc;
--black: #000;
--black-t: #0009;
--pale-olive: #996;
--green-canvas: #cc9;
--cream: #ffc;
--baked-brown: #963;
--darker-gray: #666;
--darker-gray-t: #6669;
--darker-blue: #30c;
--logo-blue: #6cf;
--lighter-blue: #c66;
--lightest-blue: #cff;
--dark-orange: #930;
--adobe-t: #c636;
--light-orange: #f63;
--peach: #f9c;
--light-peach: #fcc;
--strange-yellow: #fc3;
--pitch-red: #300;
--brick-red: #930;
--shirt-red: #933;
--red: #c00;
--darker-green: #363;
--dark-green: #396;

accent-color: #363;
accent-color: var(--dark-green);

/** UNUSED SYSTEM COLORS **/
  --light-gray: #f2f0f0;
  --gray: #e3e3e3;
  --dark-gray: #919191;
  --even-lighter-blue: #BFDBFE;
  --lightest-blue: #DBEAFE;
  --even-lighter-orange: #fcdbb8;
  --green: #34D399;
  --light-green: #E6F8DD;
  --medium-green: #A0C99C;

}
body { transition: 0.2s; }
body {
background-color: var(--cream);
background-image:
url("https://groonklie.com/spacehey-junk/grocer/white-block.PNG"),
url("https://groonklie.com/spacehey-junk/grocer/white-block.PNG"),
url("https://groonklie.com/spacehey-junk/grocer/side-checker-left-t.PNG"),
url("https://groonklie.com/spacehey-junk/grocer/side-checker-right-t.PNG");
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-attachment: fixed, fixed, scroll, scroll;
background-position: 0 top, 0 bottom, left 0, right 0; }

h1, .blurbs .heading h4, .friends .heading h4, .comments .heading h4,
.contact .heading h4, .blog-preview h4
{ font-family: 'Instrument serif', times new roman, serif; letter-spacing: 1px; }
h1 { color: var(--darker-blue); font-size: 60px !important; }
/** NEON NAME - Cooler but doesn't really look as good **/
/** h1 { color: var(--lightest-blue); font-size: 60px !important;
text-shadow: 0px 0px 2px var(--white), 0px 0px 10px var(--darker-blue),
0px 0px 20px var(--darker-blue), 0px 0px 20px var(--darker-blue); } **/
h2 { font-size: 28px } .section h4 { font-size: 20px; }
h4, .friends .heading h4, .comments .heading h4, .contact .heading h4 { font-size: 26px; }
.blog-preview h4 { font-size: 40px; text-align: center; }
p, h2, h3 { color: var(--darker-gray); } .section h4 { color: var(--darker-gray) !important; }
.blurbs .heading, .friends .heading, .comments .heading {
background-color: transparent !important; border-bottom: solid var(--darker-gray) 2px; color: var(--darker-gray) !important; }
p, .section, body, .logout-btn { font-family: 'PT Serif', times new roman, serif; }
.online img, .online p { color: var(--dark-green) !important; vertical-align: middle; }
a { transition: 0.2s; }

h1, .blurbs .heading h4, .friends .heading h4, .contact .heading h4
{ text-transform: uppercase; }

.top, nav .links {
background-color: var(--shirt-red) !important;
background-image: url("https://groonklie.com/spacehey-junk/grocer/orange-chex.PNG") !important;
background-size: 64px !important; }

.top {
background-position: 8px 30px !important;
box-shadow: 0px 32px 2px var(--shirt-red) inset; height: 94px; }
nav .links {
background-position: 40px 30px !important;
box-shadow: 0px -20px 10px var(--lighter-blue) inset, 0px 4px 2px var(--brick-red) inset, 0px 10px 8px var(--white) inset ; }

.logo { translate: 0px 10px; width: 200px !important; height: 76px !important;
content: url("https://groonklie.com/spacehey-junk/grocer/logo.PNG");
filter: drop-shadow(-3px 2px 2px var(--shirt-red)); transition: 0.2s; }
.logo:hover { filter: drop-shadow(-4px 3px 2px var(--shirt-red)); translate: 0px 8px; }
nav .links {   }


main { border: solid var(--baked-brown) 1px; border-radius: 0px 0px 64px 64px; }
main, footer { box-shadow: 0px 4px 4px var(--adobe-t); }
main {
background-image: url("https://groonklie.com/spacehey-junk/grocer/red-diamond.PNG"), url("https://groonklie.com/spacehey-junk/grocer/red-diamond.PNG"),  url("https://groonklie.com/spacehey-junk/grocer/yellow-checkers.PNG");
background-size: auto, auto, auto 32px; background-repeat: no-repeat;
background-position-y: bottom; background-position-x: 30%, 70%, center;
image-rendering: pixelated; padding-bottom: 64px;
}
.container {
image-rendering: pixelated;
}
.contact .heading {  background-color: var(--brick-red) !important;
background-image: url("https://groonklie.com/spacehey-junk/grocer/ridges.PNG") !important;
box-shadow: 0px 4px 6px 2px var(--pitch-red) inset; padding-top: 16px !important;}

.profile .contact { border: 4px solid var(--dark-green); padding-bottom: 32px !important; }

.profile .contact { background-color: var(--red) !important;
box-shadow: 0px 0px 6px 6px var(--brick-red) inset, 0px 4px 6px var(--darker-gray-t);
background-image: url("https://groonklie.com/spacehey-junk/grocer/ridges.PNG") }

.contact .heading h4, .contact a {
text-shadow: 0px 1px 0px var(--green-canvas), 0px 4px 2px var(--pitch-red);
text-align: center !important; padding: auto; width: 100%;
} 

.contact a { color: var(--white); }
.contact a:hover { text-decoration: none; color: var(--cream) !important; }

.icon { display: none; }

.table-section {
background-image: url("https://groonklie.com/spacehey-junk/grocer/lattice.PNG");
background-color: transparent; filter: drop-shadow(2px 2px 3px var(--darker-gray-t));
border: solid #696 3px !important; border-radius: 64px 64px 16px 16px;
}
.table-section a { color: var(--white); font-weight: bold; text-shadow: 0px 0px 2px var(--black); }
.table-section .heading {
background-image: url("https://groonklie.com/spacehey-junk/grocer/roofing.PNG") !important; border-radius: 100%; width: 70%; margin: auto; translate: 0px -8px;
box-shadow: 0px 1px 4px 4px var(--brick-red) inset, 0px 8px 4px 2px var(--black-t); border: solid var(--pale-olive) 6px; outline: solid var(--green-canvas) 4px inset; }
.table-section .heading h4 {
color: var(--strange-yellow) !important; font-family: 'Tilt Warp', sans-serif; text-align: center; text-transform: uppercase; text-shadow: 0px 2px 0px var(--pitch-red);
}
.details-table td, details-table td:first-child {
background-color: var(--white-t) !important; backdrop-filter: blur(2px); border: solid #696 3px; }
.details-table td:first-child {
font-size: 16px; text-align: right; vertical-align: top; border-radius: 16px 2px 2px 16px; }
.details-table td { vertical-align: middle; border-radius: 2px 16px 16px 2px; }
.details-table td p { color: var(--darker-green) !important; }
.details-table td a { color: var(--dark-orange); } .details-table td a:hover { color: var(--light-orange); }
.profile-pic img {
background-image: url("https://groonklie.com/spacehey-junk/grocer/wicker.PNG");
background-color: #c96;
border-radius: 16px; outline: solid #fc9 8px; image-rendering: pixelated;
box-shadow: 1px -1px 4px 4px #633 inset;
}
.person { image-rendering: crisp; filter: drop-shadow(0px 2px 2px var(--darker-gray-t)); }
.person img { transition:0.2s; } .person img:hover { translate: 0px -2px; }
.person img, .comments-table td:first-child img {
height: 95px; width: 95px;
mask-image: url("https://groonklie.com/spacehey-junk/grocer/profile-border.PNG");
mask-size: 100%; mask-repeat: no-repeat;
-webkit-mask-image: url("https://groonklie.com/spacehey-junk/grocer/profile-border.PNG");
-webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat;
}

footer, .comments-table td:first-child {
background-image: url("https://groonklie.com/spacehey-junk/grocer/footer-bg-tiled.PNG");
background-attachment: fixed; background-position: center;
background-color: var(--brick-red); image-rendering: pixelated;
}
.comments-table td {
border-radius: 4px 16px 16px 4px; 
vertical-align: middle;
background: var(--brick-red);
box-shadow: 0px -2px 4px 4px var(--pitch-red) inset;
}
.comments-table td p { color: var(--white); padding-left: 8px; }
.comments-table td:first-child {
border-radius: 36px 4px 4px 36px;
vertical-align: top;
}
.comment-replies {
border-radius: 16px !important; border-color: var(--peach);
width: 90%; margin: 8px auto; }
footer { border-radius: 64px 64px 20px 20px; margin-bottom: 40px; }
footer p { color: var(--white) !important; }
footer a, .comments-table td:first-child p,
.comments-table td a { color: var(--peach) !important; }
footer a:hover, .comments-table td:first-child p:hover,
.comments-table td a:hover, nav .links a:hover { color: var(--light-peach) !important; }
footer p, footer a { font-weight: bold; font-size: 10px; text-shadow: 0px 2px 1px var(--pitch-red), -1px 1px 1px var(--pitch-red), 1px 1px 1px var(--pitch-red); }
nav .links li:not(:last-child)::after { color: var(--pitch-red); }
</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 28 comments ( View all | Add Comment )

moshangel	1762312736 this is so creative omg Report Comment
Maqsood	1760775605 Awesome layout... Will be using! Report Comment
Maqsood	1760775605 Awesome layout... Will be using! Report Comment
jellie (˶ᵔ ᵕ ᵔ˶)	1760141237 using! Report Comment
ariel-Ares	1758226230 Instrument Serif is the font that Donald Trump and his current administration use Report Comment I chose it for this layout because it looked like a tacky antiquated 80's font, I just looked on the white house site and I think I used it better LOL by Groonklie; 1758469236; Report
Attic Wife Composed of Sucrose ! !	1747343683 Thank you very much, much for making this layout available, and congratulations, it is very well produced ! ! 人´∀.｀) Report Comment
Ross	1742493127 probably using ! Report Comment
Kepler Io	1740075056 Using :) Report Comment
MrReinraus	1738421567 using Report Comment
Cayo	1738146746 Using! ^^ Report Comment
FRIJOL!	1730752486 Using!! Report Comment
fritz !! :-)	1730607986 using!! :3 Report Comment
chris	1729011452 usando Report Comment
Bernard / Zamir	1728041166 Using! Report Comment
🔮🖋	1723777773 There's something so nostalgic about this layout... Like, it genuinely look like something from the 80's or 90's. I really like it! Report Comment
Andrew	1720726806 using Report Comment
candddy!	1718554732 using Report Comment
Drearts	1707779687 using! Report Comment
gone for good (got a life now)	1702404606 usin Report Comment
valleyonline	1701057322 using! Report Comment