You can use any of these layouts for whatever you want and edit them as much as you please, just please don't remove the credits in a place that's visible and links back to my site, I hope my templates can be of use to you!

Chocolayout

A chocolate themed template made for The 32-Bit Cafe's Tea Party 2026, it's mobile responsive (although it looks better on a computer)

CSS

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

body{ font-family: "Instrument Serif", serif; letter-spacing:2px; color: #4d2d0f; background-color: black; background-image: url('https://i.pinimg.com/736x/ac/93/bb/ac93bbceb579de4c7b63c6a8fc3ec7df.jpg'); }

#main{ width:405px; height:390px; background-color: #fff3e8; margin: 0 auto; padding: 10px; background-image: url('https://file.garden/aTiWCoGB_i5vfo0E/Border%20chocolate.png'); margin-top: 50px; padding:55px; overflow: scroll; }

#sidebarleft{ width:250px; height:480px; background-color: #fff3e8; padding: 10px; overflow: scroll; float: left; border: 5px dotted #4d2d0f; }

#sidebarright{ width:250px; height:480px; background-color: #fff3e8; padding: 10px; overflow: scroll; float: right; border: 5px dotted #4d2d0f; }

.button{ width: 150px; margin:5px; padding:20px; border-radius: 10px; background-color: #4d2d0f; color: #fff3e8; text-align:center; }

footer { width: 100%; position: fixed; bottom: 0; font-size: 13px; opacity: 80%; padding: 6px; text-align: center; z-index: 2; background-color: #4d2d0f; color: white; }

.title{ font-family: "Caveat", cursive; font-size: 40px; text-decoration-line: underline; text-decoration-style: dotted; }

img { max-width:100%; }

a{ color:#fa78ff; }

a:hover{ color:#f03232; }

ul { list-style-image: url('https://file.garden/aTiWCoGB_i5vfo0E/Favicon%20Chocolate%20heart%20spin.gifv'); }

::-webkit-scrollbar{ width: 6px; }

::-webkit-scrollbar-track{ background-color: #fff3e8; }

::-webkit-scrollbar-thumb{ background-color: #4d2d0f; }

@media only screen and (max-width:650px) { #sidebarleft{ margin: 0 auto; float: none; }

#sidebarright{ margin: 0 auto; float: none; } }

HTML

<div class="title">Sidebar</div>

<p>this is a sidebar, you can use it to display your navigation menu or anything you like</p>

</div>

<div class="title">Sidebar</div>

<p>this is another sidebar designed to balance the rest of the site and make it feel more symetrical and just like the one on the left you can use it to display any kind of information you want </p>

</div>

<div class="title">Chocolayout</div>

<p>Hello! this is a simple layout themed after chocolate and designed for <a href="https://32bit.cafe/tea26/" target="_blank">32-Bit Cafe 2026 Spring Tea Party</a> it includes 2 sidebars and one main box in the middle and all of them are scrollable</p>

<ul>You can list anything you want and it will have cutesy chocolate hearts in each bullet point

<li>Example 1</li>

<li>Example 2</li>

<li>Example 3</li>

</ul>

</div>

Explore

Neighbors

My button

Other websites

Miscella- neous

Chocolayout

CSS

HTML