welcome to the tea party!

this is a free to use code/layout made (originally) for 32bitcafe's spring 2025 tea party, though i was without internet during the actual deadline for that event, so i'm posting it a bit later.

get the code

html * & css

* (right click, view page source, select all & paste into your blank html document!)

features

responsive for mobile / small screens
two navigation sidebars on either side of the main content
- navigation links are images* that reveal a link title on hover/focus!
  - * these can be images, emojis, unicode symbols, etc — if you want it to be full words you'll have to tinker with the css, but any of those options will work out of the box!
- text boxes for updates or other bits of text
- you can also make the image links into buttons that reveal text boxes — these are good if you want link menus!
easy to customize colors/fonts/sizes with css variables

alternate examples

click for full-size images! these were made by only adjusting the variables at the top of the css.

elements *

* h1 inside article — a h1 outside of an article looks like the 'tea party' at the top!

header 2

header 3

header 4

header 5

^ hr
bold, italic, underline, link, mark, code

an image within an article!

this is a blockquote

classes

add .small to an element for it to sit side-by-side with another .small article like this.

add .scroll for an element to scroll if it gets too long.

.accent will make an element's background var(--accent-lighter) (or var(--accent-dark) if your body has the .dark class).

.center will center the text in an element.

add .dark to the body if you want a palette where your box backgrounds are dark & text is light. this makes sure the bold & other colored text stays visible!

credits

header font - mademoiselle

background & teacup pngs made from vintage art + fabric! find them on my materials page!

sample palettes

default variables: /* colors */ --background-image: url(); --background-color: #85cc52 ; --text: #5e333f ; --box-background: #85cc52; --accent: #e1373a ; --accent-dark: #883727 ; --accent-light: #f3729f ; --accent-lighter: #ffd1e9 ; /* fonts */ --base-font: monospace; --text-size: 12px; --secondary-font: 'Mademoiselle.ttf', serif; /* misc styling */ --background-image-size: 350px; --max-width: 800px; --spacing: 15px; --border-radius: 8px; --text-underline: wavy var(--accent-light); --border: dashed var(--accent) 1px; --shadow-color: var(--accent); --shadow-color-hover: var(--accent-light); --title-color: var(--box-background); --nav-width: 120px;

raspberry tea (light): --background-color: #fcacb6 ; --text: #52202e ; --box-background: #fbf4f1; --accent: #cc3042 ; --accent-dark: #4b4b4b ; --accent-light: #69a57a ; --accent-lighter: #dbede2 ;

black tea with milk (dark): --background-color: #150b18 ; --text: #F5E1D0 ; --box-background: #2d2020; --accent: #ffe2d8 ; --accent-dark: #a95a44 ; --accent-light: #dc924d ; --accent-lighter: #efc19a ;

lavender earl grey (light): --background-color: #d4cae8 ; --text: #253657 ; --box-background: #f8e9e5; --accent: #8475b0 ; --accent-dark: #6f4367 ; --accent-light: #84b8a7 ; --accent-lighter: #d2e6da ;

green tea (light): --background-color: #d4e8ab ; --text: #3d332c ; --box-background: #f6f3c9; --accent: #3f6e1e ; --accent-dark: #232323 ; --accent-light: #a4c464 ; --accent-lighter: #e5f0b4 ;