a rummage bin - premade layouts!

90s

Brittany

brittany is a super-simple 90s geocities style layout with two bits of modern javascript for flavor - a quote randomizer and a gif animation toggle!

rather than being more "webcore", this is patterned after actual geocities pages! so it's a bit on the plain side with some garish bits of flair.

HTML

<!DOCTYPE html>
<html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Brittany Layout</title>
    <link rel="icon" type="image/x-icon" href="https://i.postimg.cc/PxVjBFKb/flowerico.png">

<h1><img class="animated" src="https://i.postimg.cc/fy6hbtGJ/heart.gif" alt=""> Brittany Homepage <img class="animated" src="https://i.postimg.cc/fy6hbtGJ/heart.gif" alt=""></h1>

<p>gif animation toggle: 
<button class="start">⏵</button>
<button class="stop">⏸</button>
</p>

<hr>

<p id="quote">#quote</p>

<hr>

<h2>Welcome</h2>
<p>"Brittany" is a simple center-aligned layout, designed to mimic plain Geocities homepages. Nothing fancy.</p>
<p>There are two pieces of javascript that are not necessary: one is freezeframe.js, which is used to make a toggle for animated gifs. The other is a basic script to display a random quote every time the page is refreshed. You can disable or delete them and nothing will break.</p>
<p>Since the page is so simple, it works just fine on mobile.</p>

<ul>
<li>This is a list. It's got a custom bullet point.</li>
<li>Some ideas for pages on your web site:</li>
<ul>
<li>display some of your favorite pictures you have on your computer</li>
<li>share your bookmarked sites</li>
<li>write down instructions for how to do something you're pretty good at doing</li>
</ul>
<li>Or nothing at all. Do what you want.</li>
</ul>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

<h2>Notes:</h2>
<p>Click on the counter to get one for your page. This one's counting for this page. It's customizable.</p>
<p>Add <span style="color:white; background:black;padding:5px;">class="animated"</span> to all animated GIFs if you want the freezeframe.js to be able to pause them.</p>
</div>
<hr>
<h2>Some links...</h2>
<div class="nav">
<div class="navlink"><a href="">Link</a></div>
<div class="navlink"><a href="">Link</a></div>
<div class="navlink"><a href="">Link</a></div>
<div class="navlink"><a href="">Link</a></div>
<div class="navlink"><a href="">Link</a></div>
<div class="navlink"><a href="">Link</a></div>
</div>
<a href=""><img src="https://i.postimg.cc/Fzf4mgnM/guestbook-mc.gif" class="animated" alt="guestbook"></a>

<p>Layout anticopyright: please do copy, modify, adapt, transform, and redistribute. Delete or change whatever you want.</p>

</div>

<script>
const manual = new Freezeframe('.animated', {
  trigger: false
});

document
  .querySelector('.start')
  .addEventListener('click', () => {
    manual.start();
  });

document
  .querySelector('.stop')
  .addEventListener('click', () => {
    manual.stop();
  });
</script>

<script>
window.onload = replace;

var words = {
  quote: [
"“Believe you can and you're halfway there.” —Teddy Roosevelt", 
"“Kindness is one thing you can't give away. It always comes back.” —George Skolsky", 
"“Happiness is not a station you arrive at, but a manner of traveling.” —Margaret Lee Runbeck",
"“Count your age by friends, not years. Count your life by smiles, not tears.” ―John Lennon",
"“The best way to predict the future is to create it.” ―Abraham Lincoln",
"“Your present circumstances don't determine where you can go; they merely determine where you start.” ―Nido Qubein",

/* Go ahead and change these quotes or add new ones. */

]
};

CSS

HTML,
BODY,
* {
    cursor: url("https://downloads.totallyfreecursors.com/cursor_files/heart2.cur"), url("https://downloads.totallyfreecursors.com/thumbnails/heart2.gif"), auto;
}

* {
    box-sizing: border-box;
}

body {
    background-image: url('https://i.postimg.cc/QMsh57H7/hearts.jpg');
    text-align: center;
    font-size: 14pt;
}

hr {
    width: 85%;
    max-width: 1078px;
    border-top: 5px pink ridge;
}

::selection {
    background: pink;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

li {
    padding-left: 16px;
}

li::before {
    content: "❤";
    padding-right: 8px;
    color: red;
}

ul>ul {
    margin-left: 50px;
}

b,
strong {
    color: red;
}

u {
    text-decoration-color: red;
}

a {
    color: deeppink;
    font-weight: bold;
}

a:hover,
a:focus {
    color: darksalmon;
}

h2 {
    color: red;
}

#quote {
    font-style: italic;
    font-weight: bold;
    text-decoration: underline;
}

#counter {
    width: fit-content;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

.nav {
    width: fit-content;
    margin: auto;
    margin-top: 25px;
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.navlink {
    width: 100px;
    height: 42px;
    background-image: url('https://i.postimg.cc/vBZy2d7H/43.jpg');
    padding-top: 8px;
}

#footer {
    font-size: smaller;
    width: 85%;
    max-width: 1078px;
    margin: auto;
    margin-top: 50px;
    border: 5px pink ridge;
}

.container {
    width: 80%;
    max-width: 800px;
    margin: auto;
}

Spice

spice is a more in-depth but deceptively simple geocities style, this one based on iframe & frameset layouts! your whole website on one page, with a fixed sidebar and header framing it. javascript gif toggle included, but no other javascript. just css and html.

HTML

<!DOCTYPE html>
<html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Spice Layout</title>
<link rel="icon" type="image/x-icon" href="https://i.postimg.cc/TPBY3MbT/WBB01SRO.gif">

<script src="https://file.garden/Zj2Uk_oh-G9Y8Bit/freezeframe.js"></script>

</head>
<body>

<div id="header">
<h1>Spice!</h1>
</div>

<div class="sidebar">

<div id="logo">
<img src="https://i.postimg.cc/YC9pNqfp/aniaztec.gif" class="animated">
</div>

<div class="sidebarinner">

<p>gif animation toggle: </p>
<p><button class="start">⏵</button>
<button class="stop">⏸</button>
</p>

<h2>Navigation</h2>

<ul>
<li><a href="#welcome">Welcome</a></li>
<li><a href="#two">Page 2</a></li>
<li><a href="#three">Page 3</a></li>
<li><a href="#four">Page 4</a></li>
<li><a href="#five">Page 5</a></li>
<li><a href="#six">Page 6</a></li>
<li><a href="">Guestbook</a></li>
</ul>

<h2>Cool Sites</h2>
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a>
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a> 
<a href=""><img src="https://i.postimg.cc/RCDGCgsX/buttonplaceholder.png"></a>

</div>

</div>

<div class="main">

<div id="welcome" class="page">
<h2>Welcome</h2>
<p>"Spice" is a fake frame-based layout! It mimics the look of iframes and framesets, but does not actually use them! I couldn't think of a good way to have a premade iframe setup without making a bunch of dummy pages and I was feeling lazy... you could also call this a "lazy frame" layout. The entire website is one page, which you navigate using the sidebar. A bit of javascript is used for the animated GIFs toggle, but you can delete it if you don't want any JS on your site.</p>

<p>The style of this page is a bit clunky and garish, achieving a marvelous mixture of streamlined and awkward! It's definitely got flavor. ;)</p>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

<h2>Notes:</h2>
<p>Each "page" is a div. You can use css to style the divs to look very different from each other if you want!</p>
<p>You can of course add or subtract pages as you see fit, but I figured six was plenty to start you off.</p>
<p>Remember - a navigation link has to be to "#IDNAME" not "IDNAME", and it has to be an ID not a class!</p>
<p>Add <span style="color:white; background:black;padding:5px;">class="animated"</span> to all animated GIFs if you want the freezeframe.js to be able to pause them.</p>
</div>

<div id="two" class="page">
<h2>Page Two</h2>
<p>This is the second page. I've given each page a  different color pairing from the "welcome" page so that it's easy to tell it's a whole other thing.</p>

<p>I thought it was interesting to see one or two folks using this technique but implementing it with javascript rather than pure HTML/CSS! This HTML/CSS technique is very common on Neopets pet pages, so I assumed it was common knowledge...</p>

<p>Neopets was a hub for a lot of talented and clever young people for a long time. There's lots of great resources scattered around on people's pages there still.</p>
</div>

<div id="three" class="page">
<h2>Page Three</h2>
<p>This is page three! It doesn't have the entirety of Moby Dick in it.</p>
</div>

<div id="four" class="page">
<h2>Page Four</h2>
<p>It's page four!</p>
</div>

<div id="five" class="page">
<h2>Page Five</h2>
<p>It's page five!</p>
</div>

<div id="six" class="page">
<h2>Page Six</h2>
<P>PAGE IS ON FIRE</p>
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
<img src="https://i.postimg.cc/90YWbDnf/FIREWAL.gif" class="animated">
</div>

</div>

<script>
const manual = new Freezeframe('.animated', {
  trigger: false
});

document
  .querySelector('.start')
  .addEventListener('click', () => {
    manual.start();
  });

document
  .querySelector('.stop')
  .addEventListener('click', () => {
    manual.stop();
  });
</script>

</body>
</html>

CSS

/* styling! change backgrounds and colors and such up here. */

u {
    text-decoration: dashed underline 1px; /*this makes underlines a dashed line instead of a solid one. delete this bit if you want them to be normal.*/
}

ul {
    list-style: "➢ "; /*this is the custom bullet point for lists. change or delete it if you prefer!*/
}

a {
    font-weight: bold;
    color: darkred;
}

a:hover, a:focus {
    color: red;
}

#header {
    background-image: url(https://i.postimg.cc/VsqLmhkc/orangesmear.jpg);
    font-family: 'Frijole', sans-serif;
    color: #fef4c7;
}

.sidebar {
    background-image: url(https://i.postimg.cc/BQJZ6CjP/Ricppr.gif);
}

.sidebar li {
    border-color: #cc6600;
    background-color: orange;
}

#welcome {
    background-color: #cc6600;
    color: #fef4c7;
}

#two {
    background-color: #fef4c7;
    color: #cc6600;
}

#three {
    background-color: #3b59d2;
    color: #95f7ec;
}

#four {
    background-color: black;
    color: #bda232;
}

#five {
    background-color: #e35a86;
    color: #ebfff6;
}

#six {
    background-image: url(https://i.postimg.cc/7YXHTTzs/weird4.jpg);
    color: #fef4c7;
}

/*down here is the rest of the code. you can change whatever you want down there as well.*/

* {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h1 {
    margin: 0;
    font-size: 40pt;
    text-align: center;
    font-weight: normal;
}

#header {
    border-bottom: ridge 4px;
    height: 80px;
    margin-left: 220px;
}

.sidebar {
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    border-right: ridge 4px;
    text-align: center;
    overflow: hidden;
}

#logo {
    border-bottom: 4px ridge;
    height: 150px;
    align-items: center;
    display: flex;
    justify-content: center;
}

#logo img {
    max-width: 100%;
    max-height: 100%;
}

.sidebarinner {
    overflow: auto;
    scrollbar-width: thin;
    height: calc(100% - 150px);
}

.sidebar ul {
    padding: 0;
    list-style-position: inside;
    font-size: 14pt;
}

.sidebar li {
    border-style: outset;
    border-width: 10px;
    padding: 5px;
    width: 85%;
    margin: auto;
}

.main {
    overflow: hidden;
    height: calc(94vh - 30px);
    margin-left: 220px;
}

.page {
    padding: 20px;
    height: 100%;
    overflow: auto;
    margin-bottom: 2000px;
}

00s

Millennium

millennium is a compact three-column layout modeled after fansites and personal sites from the 00s, especially anime fansites! a disproportionately huge header, nearly unreadable text, and the crosshair cursor will have you saying, "oh, i remember those. kind of annoying..." in no time!

HTML

<!DOCTYPE html>
<html>
<html lang="en-US">
  <head> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>millennium layout</title>
    <link rel="icon" type="image/x-icon" href="https://i.postimg.cc/ZR2SpzKq/pillico.png">

<div id="header"><img src="https://i.postimg.cc/gk9p0pTS/chii.png"></div>

<h1>millennium.</h1>

<div class="sidebar">

<h3>About me</h3>
<div class="sidebarbox">
<img src="https://i.postimg.cc/Df4FF0B4/icon.png" id="profilepic">
<p>
<b>Name:</b> JJJ<br>
<b>Age:</b> 55<br>
<b>Pronouns:</b> he/him<br>
<b>Likes:</b> pictures of spiderman<br>
<b>Favorite food:</b> cigars
</p>
</div>

<h3>Listening</h3>
<div class="music marquee">
<span>
<img src="https://i.postimg.cc/52gWpCNT/a-audio.gif"> i can't decide - scissor sisters
</span>
</div>

<h3>Updates</h3>
<div class="sidebarbox">

<ul>
<li>11.10.2024: New layout.</li>
<li>4.15.2009: Became mayor of New York City.</li>
<li>6.16.2004: Got sued by She-Hulk.</li>
<li>11.13.2003: Published a book.</li>
<li>11.25.1998: Died and went to hell.</li>
<li>3.11.1965: Captured Spiderman with evil robots.</li>
<li>12.10.1962: Son went to space. (He's an astronaut)</li>
</ul>

</div>

<h3>Visitors</h3>

<a href="https://www.cutercounter.com/" target="_blank"><img src="https://www.cutercounter.com/hits.php?id=huvxqkqxq&nd=6&style=2" alt="website counter"></a>

</div>

<div class="main">
<h2>Welcome.</h2>

<p>This is the "Millennium" layout, designed in the vein of 00s layouts. It is small and cluttered, with a huge header image. It has a precise and busy kind of feeling to it, I think.</p>
<p>The calendar in the sidebar uses javascript, nothing else does!</p>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

<h2>Notes</h2>

<p>Click on the counter to get one for your page. This one's counting for this page. It's customizable!</p>
</div>

<div class="sidebar">
<h3>Today</h3>

<div class="calendar-container">
    <header class="calendar-header">
         <p class="calendar-current-date"></p>
    </header>

<h3>Navigation</h3>
<div class="sidebarbox">
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
</div>

<h3>Contact</h3>
<div class="sidebarbox">
<p>Socials</p>
<p>email@email.com</p>
<p>discordname @ discord</p></div>

<h3>Boxname</h3>
<div class="sidebarbox"><p>Box content.</p></div>

</div>

</div>

<div class="footer">
<p>Layout anticopyright: please do copy, modify, adapt, transform, and redistribute. Delete or change whatever you want.</p>
</div>

</body>
</html>

CSS

/*Here's JUST THE COLORS AND DECOR, for you to customize to your aesthetic taste.*/

:root {
    --main-color: lightslategray;
    --light-color: #f5f5f5;
    --mediumlight-color: #dcdcdc;
    --medium-color: #aab2bb;
    --dark-color: #1b2136;
}

/*"Main color" = background & scrollbar.
"Light-color" = links.
"Mediumlight-color" = links on hover.
"Medium-color" = background of sidebar boxes.
"Dark-color" = text, borders, and scrollbar background.*/

ul {
    list-style-type: "✦ ";
}
/*This is the bullet point in lists.*/

i,
em {
    font-family: 'WindSong','Vivaldi',cursive;
    font-size: 1.5em;
}
/*This makes italicized text cursive and a bit bigger so it's legible. It's a bit silly, so delete it if you want it to be normal italics.*/

h2::before,
h3::before {
    content: "⁎*☆ ";
}

h3::after {
    content: " ☆*⁎"
}

/* Uncomment this if you want the layout to be centered instead of on the left side of the page:*/

/* #header, .container, .footer, h1 {margin:auto;} */

/*And here's the rest of the layout. You can fuck with it however you want, too.*/

*,
html,
body {
    cursor: crosshair;
}

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--dark-color);
}

body {
    background-color: var(--main-color);
    font-family: 'MS UI Gothic', Arial, sans-serif;
font-size:10pt;
}

::selection {
    background: var(--dark-color);
    color: var(--light-color);
}

h1 {
    letter-spacing: 15px;
    font-size: 33pt;
    width: 700px;
    padding: 5px;
    margin-top: -15px;
    margin-bottom: -12px;
}

h2 {
    letter-spacing: 10px;
}

h3 {
    margin: 0;
}

u {
    text-decoration: dotted underline 1px
}

a {
    font-weight: bold;
    color: var(--light-color);
    text-decoration: dotted 1px underline;
}

a:focus,
a:hover {
    color: var(--mediumlight-color);
    font-size: unset;
}

ul {
    text-align: left;
    padding-left: 15px;
    padding-right: 0;
    margin: 0;
    line-height: 1.2;
}

#header {width: 700px;
    height: 480px;}

#header img {
    border: 1px var(--dark-color) solid;

}

.container {
    width: 700px;
    display: flex;
    border: 1px var(--dark-color) solid;
    margin-top: 0px;
}

.sidebar {
    width: 175px;
    padding: 10px;
    gap: 10px;
    display: flex;
    font-size: small;
    flex-direction: column;
    align-items: center;
}

.sidebar img {
    max-width: 100%;
}

.sidebar p {margin-top:2px;
margin-bottom:2px;}

.sidebarbox {
    width: 150px;
    padding: 10px;
    border: 1px var(--dark-color) solid;
    background-color: var(--medium-color);
    max-height: 250px;
    overflow: auto;
    text-align: center;
}

.main {
    width: 350px;
    padding: 10px;
    border-left: 1px solid var(--dark-color);
    border-right: 1px solid var(--dark-color);
    text-align: justify;
    line-height:1;
}

.main a::after {
    content: "»";
    font-size: smaller;
    font-weight: normal;
}

.main a::before {
    content: "«";
    font-size: smaller;
    font-weight: normal;
}

.footer {
    width: 700px;
    text-align: center;
    font-size: smaller;
}

#profilepic {
    width: 100px;
    height: 100px;
    margin: auto;
    margin-bottom: 10px;
    margin-top:10px;
    outline: var(--dark-color) 1px solid;
    outline-offset: 6px;
}

.music {
    font-size: 9pt;
    overflow: hidden;
}

.marquee span {
    width: max-content;
    display: inline-block;
    animation: marquee 10s linear infinite;
    padding-left: 100%;
}

.marquee span:hover {
    animation-play-state: paused
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

100% {
        transform: translate(-100%, 0);
    }
}

/*Calendar stuff*/

.calendar-container {
    background-color: var(--medium-color);
    width: 150px;
    border-radius: 2px;
    border: 1px var(--dark-color) solid;
}

.calendar-container header {
    border-bottom: 1px var(--dark-color) solid;
    padding: 2px;
}

.calendar-container>header>p {
    margin: 0;
    text-align: center;
}

header .calendar-current-date {
    font-weight: bold;
    font-size: 1rem;
}

.calendar-body {
    padding: 5px;
}

.calendar-body ul {
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    text-align: center;
    border: 1px var(--dark-color) solid;
    margin-top: 0;
    padding-left: 0;
}

.calendar-body .calendar-dates {
    margin-bottom: 0px;
}

.calendar-body li {
    width: calc(100% / 7);
    font-size: 0.8rem;
    color: #414141;
}

.calendar-body .calendar-weekdays li {
    cursor: default;
    font-weight: 500;
}

.calendar-body .calendar-dates li {
    margin-bottom: 3px;
    margin-top: 3px;
}

.calendar-dates li.inactive {
    color: #dcdcdc;
}

.calendar-dates li.active {
    font-weight: bolder;
    text-decoration: underline wavy 1px;
}

Golden Age

seize your destiny as king of longing! Golden Age is a plain and run of the mill sidebar + body page layout, styled after normal websites from the 00s. it's flexible and versatile theme and content-wise; you can dress it up with gradients and images or keep it simple. like millennium, it is left-aligned for authenticity and not mobile-responsive.

HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="https://i.postimg.cc/F7YyqCMq/sword.gif">
<title>Golden Age Layout</title>
<link href="goldenage.css" rel="stylesheet" type="text/css" media="all">

</head>
 <body>
    
 
<div class="container">

<div class="top">

<div class="logo">
  <img src="https://i.postimg.cc/qzNsYDPP/planet3.gif">
</div>

<div class="head">

  <h1>Golden Age</h1>
</div>

<div class="subhead">
  Some kind of quote or something goes here...
</div>

</div>

<div class="sidebar">
<h1>Navigation</h1>

<img src="https://i.postimg.cc/GH4FNgW6/anybrowser.gif"> <img src="https://i.postimg.cc/GH4FNgW6/anybrowser.gif"> <img src="https://i.postimg.cc/GH4FNgW6/anybrowser.gif"> <img src="https://i.postimg.cc/GH4FNgW6/anybrowser.gif">

</div>

<div class="bodybox">

<h1>Golden Age</h1>

<p>during the so-called "golden age of web design", before the three-column "holy grail" craze, two columns was all the rage: a sidebar, a header, and a body. here's one of those setups!</p>

<p>this layout is perfect if your insatiable longing for an idealized utopian past which never existed and can never be attained is turning you into an evil shell of your former self & your desire for a hypothetical "something better" is destroying your chance at happiness in reality.</p>

<p>for authenticity the code is kind of messy (using flexboxes, grid, <i>and</i> float), the container is 800px wide and left-aligned, and if you use the site in a small window or on a small device you need to scroll and zoom to view things properly.</p>

<ul>
<li>This is a list.</li>
<li>Some ideas for pages on your web site:</li>
<ul>
<li>display some of your favorite pictures you have on your computer</li>
<li>share your bookmarked sites</li>
<li>write down instructions for how to do something you're pretty good at doing</li>
</ul>
<li>Or nothing at all. Do what you want.</li>
</ul>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

<h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

</div>

</div>

</body>
</html>

CSS

/* these are the colors for the whole layout */

:root {
    --text: #1C385B;
    --links: #74B6D4;
    --sidebar: #8282AB;
    --notwhite: #d3dde5;
    --popcolor: #CDA17D;
}

/* this is the background image for the header bar; change or delete it as you like. */
.top {
    background-image: url(https://i.postimg.cc/RNW78br5/greyes.png);
    background-position: center;
    /*this might not be the best positioning for your image; experiment/delete as needed ! */
}

/* this makes the navigation links tilt when you hover over them; delete if not wanted */
.sidebar li:nth-child(odd):hover {
    transform: rotate(10deg);
}

.sidebar li:nth-child(even):hover {
    transform: rotate(-10deg);
}

/* and this is the weird shadows on the header title. delete or change if you don't like em. */

.top h1 {
    text-shadow: 2px 2px var(--text), -2px -2px var(--notwhite);
}

/* main css */

* {
    box-sizing: border-box;
    scrollbar-color: var(--text) var(--sidebar);
}

::selection {
    background-color: var(--text);
    color: var(--notwhite)
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    background-color: var(--notwhite)
}

img {
    max-width: 100%;
}

figure {
    border: 1px solid;
}

a {
    color: var(--links)
}

a:hover {
    color: var(--notwhite)
}

blockquote {
    border-left: 4px solid var(--popcolor);
    padding-left: 15px;
    font-size: small;
    max-width: 80%;
}

.bodybox ul,
ol {
    list-style-position: inside;
    display: table;
}

.bodybox ul li,
ol li {
    margin-left: 13px;
    text-indent: -12px;
}

.container {
    width: 800px;
}

.top {
    border: 2px solid var(--text);
    background-color: var(--sidebar);
    height: 100px;
    display: grid;
    grid-template-columns: 150px repeat(3, 1fr);
    grid-template-rows: repeat(2, 50px);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    border-bottom-right-radius: 50px;
}

.logo {
    grid-area: 1 / 1 / 3 / 2;
    justify-content: center;
    display: flex;
    align-items: center;
}

.head {
    grid-area: 1 / 2 / 2 / 5;
}

.subhead {
    grid-area: 2 / 2 / 3 / 5;
    overflow: hidden;
    font-size: 13pt;
    display: flex;
    justify-content: flex-end;
    align-items: end;
    padding: 5px;
    padding-right: 35px;
    color: var(--notwhite);
    text-shadow: 1px 1px var(--sidebar);
    font-style: italic;
}

.top h1 {
    margin: 0;
    font-size: 40pt;
    text-align: center;
    color: var(--popcolor);
}

.top img {
    max-height: 100%;
}

.sidebar {
    border: 2px solid var(--text);
    background-color: var(--sidebar);
    width: 150px;
    min-height: calc(90vh - 100px);
    float: left;
    margin-right: 50px;
    margin-bottom: 20px;
    border-bottom-right-radius: 50px;
    border-top: none;
    text-align: center;
}

.sidebar h1 {
    font-size: 18pt;
}

.sidebar ul,
.sidebar li {
    padding: 0;
    list-style-type: none;
}

.sidebar li {
    margin: 20px;
}

.sidebar a {
    font-weight: bold;
    font-size: 15pt;
}

.bodybox {
    padding: 20px;
}

Xtreme

xtreme is a gradient-heavy three-column layout modeled after a different genre of website from the 00s - more gaming-type fansites, blogs, products, and forums. featuring gradients all over the goddamn place and preloaded with ads and shiny buttons! no javascript (besides the doodads and gizmos in the sidebars, which are not essential), somewhat responsive (it works on mobile, just doesn't look very good), a bit fiddly to customize.

HTML

<!DOCTYPE html>
<html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Xtreme Layout </title>
  <link rel="icon" type="image/x-icon" href="https://i.postimg.cc/W1T47Y6M/plane1c.gif">

<div id="headerbar">
<h1>Xtreme Layout</h1>
</div>

<span id="marqueehead">
"It's a website!"

</span>

<marquee>vrei sa pleci dar nu ma, nu ma iei nu ma, nu ma iei, nu ma, nu ma, nu ma iei, chipul tau si dragostea din tei, mi-amintesc de ochii tai
</marquee>

</div>

<div class="leftcolumn">

<h2>Notable News</h2>
<div class="leftcolumnbox">
<ul>
<li>The cake is a lie</li>
<li>I can haz cheezburger?</li>
<li>Keyboard cat</li>
<li>It's over 9000!!!!</li>
</ul>
</div>

<h2>Box Name</h2>
<div class="leftcolumnbox">
Box contents.
</div>

<div class="leftcolumnbox">
the email and rss icons below are from <a href="https://creazilla.com/media/vector/3208/set-of-shiny-social-media-icons">this icon pack</a>; the others (mastodon, discord, bsky, pillowfort, tumblr) i made myself based on that style. if you've got another socmed you want an icon for and dont feel like making it yourself you can drop me a line and ask me to do it for you. maybe i will do it. maybe not.
</div>

<script type="text/javascript" src="//widget.supercounters.com/ssl/online_t.js"></script><script type="text/javascript">sc_online_t(1703142,"Users Online","170ddb");</script><noscript><a href="https://www.supercounters.com/">supercounters.com</a></noscript>

<div class="socials">

</div>

<a href="https://status.cafe"><img src="https://status.cafe/assets/button.png" alt="Status Cafe"></a>

</div>

<div class="bodymain">
<div class="innermain">
<h2>Xtreme Layout</h2>
<p>This is the Xtreme Layout - it's XTREME!!!! It's the late 00s and things are epic awesomesauce and totally random. The key ingredient here is, of course, gradients and rounded corners.</p>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

<h2>Notes:</h2>
<p>This layout is responsive and mobile-friendly, although it works best on computers.</p>
<p>The top navigation bar can fit a few more navigation links if you need more!</p>
<p>The marquee is a classic HTML marquee, which is going out of style and could be rendered nonfunctional by modern web browsers.</p> 
<p>There's some javascript used in the various doodads in the sidebars, but none for the layout itself.</p>
<p>KP Radio and Navlink Ads are both DIY web projects inserted via iframe!</p>
</div>
</div>

<div class="rightcolumn">

<div class="rightbox">
<div class="innerbox">
<p>A cool green box for putting stuff in.</p>
</div>
</div>

<iframe src="https://kingposs.com/kpradiocompact.html" allowtransparency="true" frameborder="0" scrolling="no" style="overflow:hidden;width: 200px; height: 100px; margin-bottom:-30px; margin-top:15px;"></iframe>

<iframe width="180" height="180" style="border:none" src="https://dimden.neocities.org/navlink/" name="neolink"></iframe>

</div>

</div>

</body>
</html>

CSS

/*this layout has a ton of gradients, so messing with the colors is not super straightforward. sorry!

for a gradient, the first color is the one on top and the second color is the one on the bottom.*/

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    background: linear-gradient(#313131, #070201);
    background-attachment: fixed;
}

/* this is the highlight color for when you select text! you can change that with css. pretty cool huh? */
::selection {
    background-color: #f2960e;
}

/* this is the page title up top. the background is a gradient, and the text is transparent; "background-clip:text" cuts out the whole background except for the shape of the text. neat trick for making text shiny!
background-clip works for images too if you want text to have polka dots or something. */
h1 {
    background: linear-gradient(#ffffff 50%, #bababa);
    color: transparent;
    background-clip: text;
    font-family: 'Audiowide', Impact;
    font-size: 40pt;
    font-style: italic;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: -10px;
}

/* end of page title */

h2 {
    margin: 0;
    font-family: 'Impact';
    font-weight: 400;
    font-size: 24pt;
    text-align: center;
}

a {
    font-weight: bold;
    text-decoration: double underline;
}

p {
    margin: 5px;
}

/* the whole page is contained in this container. */
.container {
    width: 80%;
    height: auto;
    max-width: 1200px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

/* this is a container for the title. you could use this to put a color or a banner image behind the page title. */
#headerbar {
    width: 100%;
}

/* this is the orange navigation links bar.*/
.nav {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

border-top-left-radius: 100px; /* this is what gives it that curve on the left. delete it if you want it to be square. */

background-image: linear-gradient(#fed117, #f2960e);
    box-shadow: 0px 0px 2px #B54016;
}

/* this styles links in the navigation bar. */
.nav a {
    display: inline-block;
    font-size: 15px;
    padding: 10px 20px;
    text-transform: uppercase;
    text-decoration: none; /* this makes the links not be underlined. */

background-image: linear-gradient(#fed117, #f2960e);
    color: #fff6d3;
    text-shadow: 0px 2px 1px #da4d1b;box-shadow: 0px 0px 2px #B54016;
}

/* when a link is hovered over, swap the gradient from light -> dark to dark -> light so it looks indented! */
.nav a:hover, .nav a:focus {
    background-image: linear-gradient(#f2960e, #fed117);
    text-shadow: none;
}

/* this is the container for the bar underneath the navigation links. it has the marquee in it. */
.undernav {
    box-shadow: 0px 2px 5px #696969;
    position: relative; /* this is so that the shadow is cast on the divs under it. */
    display: flex;
    width: 100%;
    height: 34px;
}

/* this is the weird bit of space next to the marquee. the gradient bg matches the border of the marquee so it looks like it's one continuous div! */
#marqueehead {
    width: 60%;
    color: black;
    font-size: 16pt;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;

font-family: 'Caveat Brush', sans-serif;
    background: linear-gradient(#ffffff 50%, #bababa);
    
}

/* all marquees will look like this. */
marquee {
    width: 40%;
    padding: 2px;

/* these border properties make the border a shiny gradient! 
    just so you know, you can't use border-radius with a border-image, so no rounded corners. */
    border: 6px solid;
    border-image: linear-gradient(#ffffff 50%, #bababa);
    border-image-slice: 5;
    
    /* inset box shadow gives it that layered look. */
    box-shadow: inset rgba(0, 0, 0, 1) 0px 0px 5px; 
    
    background-color: #fff6d3;
    font-family: 'Geo', monospace;
    text-transform: uppercase;
    
}

/* some styling that applies to multiple divs. */

.leftcolumn img,
.rightcolumn img,
.bodymain img {
    max-width: 100%;
} /* this prevents images from being bigger than the div they're in */

.rightcolumn,
.leftcolumnbox,
.innerbox {
    overflow: auto;
    scrollbar-width: thin;
}

.bodymain,
.leftcolumn {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
} /* rounding just the bottom corners so the top lines up nicely. */

/* end of styling for multiple dive */

/* first sidebar! */
.leftcolumn {
    width: 20%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    background: linear-gradient(#bababa, #696969);
    padding: 5px;
    gap: 10px;
    font-size: 10pt;
    line-height: 1;
}

.leftcolumn h2 {
    align-self: flex-start;
    text-shadow: #ffffff 2px 2px 1px;
    margin-bottom: -7px;
    font-size: 14pt;
}

.leftcolumnbox ul {
    padding-left: 20px;
}

/* boxes for putting things in in the sidebar. another inset shadow! */
.leftcolumnbox {
    border: #070201 1px solid;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    background-color: #828282;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
}

/* socmed icon holder */
.socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* makes all the icons small and the same size. they're actually very big */
.socials img {
    width: 40px;
}

/* end of left sidebar! */

/* main section of the page */
.bodymain {
    border: 1px solid #491A09;
    background: linear-gradient(#da4d1b, #A13415);
    padding: 10px;
    width: 60%;
    font-size: 10pt;
}

/* this puts a smaller white box on top of the red gradient so the text is more legible. this off-white is on the warm side, so you'll probably want a cooler shade if you change to a cool-colored gradient! */
.innermain {
    background-color: antiquewhite;
    width: 100%;    
    border-radius: 5px;
    height: 100%;
    padding: 5px;
}

/* end of main section */

/* right sidebar! */
.rightcolumn {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
    gap: 10px;
}

.rightbox {
    background: linear-gradient(#E2ED1D, #B2ED1C);
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    max-height: 500px;
}

/* like the main div, the boxes in the right column have this inner layer for putting the text in so it's a bit more legible.
this one's a little transparent and will blur the background it's over. this'll only be noticeable if you put a picture as the background of rightbox instead of a gradient. */
.innerbox {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background-color: rgba(255, 245, 216, 0.81);
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    padding: 5px;
    height: 100%;
    scrollbar-color: #B2ED1C #E2ED1D;
    font-size: 13px;
}

/* end of right sidebar and end of the layout!! */

/* smaller screen styling */

@media only screen and (max-width: 1301px) {
    .container {
        width: 95%;
    }
}

@media only screen and (max-width: 750px) {

#headerbar {
        order: 1;
    }

.nav {
        order: 2;
    }

.undernav {
        order: 3;
    }

.bodymain {
        order: 4;
    }

.rightcolumn {
        order: 5;
    }

.leftcolumn {
        order: 6;
    }

.rightbox {
        width: 200px;
        max-height: 200px;
    }

.rightcolumn,
    .leftcolumn {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

.bodymain {
        width: 100%;
    }
}

10s

Shoelaces

shoelaces is a layout based on tumblr themes from the 2010s: a minimalist page with three columns for content, one column for a tiny bio. the #aesthetic reigns supreme!

there are two versions! the first is the 3-column style and the second is one-column. they use the same stylesheet, just different html.

HTML (3 columns)

<!DOCTYPE html>
<html>
<html lang="en-US">
  <head>
  <link rel="icon" type="image/x-icon" href="https://i.postimg.cc/j5cJQ6CC/cloud-01.gif"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shoelaces layout</title>
    <link href="shoelaceslayout.css" rel="stylesheet" type="text/css" media="all">

<div id="bottomrightcorner">
<img src="sailormoonkiss.png">
</div>

<div class="container">

<div class="sidebar">

<h1>shoelaces</h1>

<div class="bio">

<p>this is where you'd put your bio! ❤</p>
<p>if you make it longer than like one line, it'll be awkward on mobile, because this becomes a thin header. it'll still work, though! just might be hard to get through. you can test it out and see.</p>
</div>

<div class="nav">
<details>
<summary>≡</summary>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">put as many as you want!!!!!</a></li>
</ul>
</details>
</div>

</div>

<div class="columnbody">

<div class="post"><h2>welcome</h2><p><b>shoelaces</b> is a layout inspired by tumblr; it is image-forward and minimal. it is a little impersonal and compartmentalized as well as tidy, but you can customize it to feel more quirky and fun.</p>
<ul>
<li>This is a list.</li>
<li>Some ideas for pages on your web site:</li>
<ul>
<li>display some of your favorite pictures you have on your computer</li>
<li>share your bookmarked sites</li>
<li>write down instructions for how to do something you're pretty good at doing</li>
</ul>
<li>Or nothing at all. Do what you want.</li>
</ul>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>
</div>

<div class="post"><h2>notes</h2>

<p>this theme is a little fiddly. you might want to change the order your boxes are in to make it look the way you want, because of how the container arranges the columns.</p>
<p>the hamburger menu below the bio has navigation links hidden away behind it.</p>
<p>this layout is mobile-friendly and responsive. you can put as many "posts" in here as you want to.</p>
<p>the only javascript used in this layout is the music player up top! otherwise this is css + html only.</p>
</div>

<div class="imagepost post">
<img src="https://i.postimg.cc/fRPCYNp1/pic.jpg" alt="a photograph of clouds. the pastel colors and lighting look very peaceful.">
<div class="imageposttext">
<p>picture caption...</p>
</div>
</div>

<div class="post">
<h2>post title</h2>
<p>post text</p>
</div>

<div class="imagepost post">
<img src="https://i.postimg.cc/bY0mW4S2/pic1.jpg" alt="a photograph of a shoreline in cloudy weather.">
<div class="imageposttext">
<p>picture caption, but it's long so you can see what that looks like. it's scrollable! but smallllll. carry on my wayward son there'll be peace when you are dooone lay your weary head to reeest don't you cry no mooore... i don't know the rest of the words to this song... uh... guitar noises...</p>
</div>
</div>

<div class="post"><h2>CALLOUT POST</h2>
<p>you may not remember me... i was a child of three, and you a lad of eighteen. but i remember you, and i will relate to you how our histories interweave.</p>
<p>at the time, you were a rake and a rastabout spending all your money on the whores and hounds...</p>
<details><summary>Read more...</summary>
<p>you had a charming air, all cheap and debonaire, my widowed mother found so sweet. and so she took you in - her sheets still warm with him -- now filled with filth and foul disease!</p>
<p>as time wore on you proved a debt-ridden drunken mess, leaving my mother a poor consumptive wretch.</p>
<p>and then you disappeared, your gambling arrears the only thing you left behind! and then the magistrate reclaimed our small estate and my poor mother lost her mind.</p>
<p>then, one day in spring, my dear sweet mother died.</p>
<p>but before she did i took her hand as she, dying, cried,</p>
<p>"find him, bind him, tie him to a pole and break his fingers to splinters, drag him to a hole until he wakes up naked clawing at the ceiling of his grave!"</p>
<p>it took me fifteen years to swallow all my tears among the urchins in the street... until a priory took pity and hired me to keep their vestry nice and eat. but never once in the employ of these holy men did i ever ONCE turn my mind from the thought of revenge.</p>
<p>one night i overheard the prior exchanging words with a penitent whaler from the sea. the captain of his ship -- who matched you toe to tip -- was known for wanton cruelty! the following day i shipped to sea with a privateer.</p>
<p>and in the whistle of the wind i could almost hear... "find him, bind him, tie him to a pole and break his fingers to splinters, drag him to a hole until he wakes up naked clawing at the ceiling of his grave!"</p>
<p>"there is one thing i must say to you... as you sail across the sea... always your mother will watch over you as you avenge this wicked deed..."</p>
<p>and then - that fateful night! we had you in our sight after twenty months at sea! your starboard flank abeam, i was getting my muskets clean, when came this rumbling from beneath...!</p>
<p>the ocean shook, the sky went black, and the captain quailed... and before us grew the angry jaws of a giant whale!</p>
<p>don't know how i survived... the crew all was chewed alive... i must have slipped between his teeth... but, oh! what providence!</p>
<p>what divine intelligence! that you should survive as well as me!</p>
<p>it gived my heart great joy to see your eyes fill with fear!</p>
<p>so lean in close, and i will whisper the last words you will hear........</p>
</details>
</div>

<div class="post">
<h2>re: darius and noland</h2>
<p>i'll tell it like it happened.</p>
<p>it was darius and noland and me - just a few po'boys tryna get up out of missouri. took 55 to louisiana, stopped by the highway to eat. they both had crawfish, strictly chicken for me...</p>
<p>back out under thunderheads, the radio was southern soul. they interrupted clarence carter with a strange-ass local show, they were saying, "come down to lake pontchartrain! rest your soul and feed your brain! that's where you will get to see everything the water can be!"</p>
<p>the rain was coming down, the wind was howling - outside of slidell - it was the kind of night that makes you think the whole world's going to hell... we got off on an exit cuz we couldn't read the map so great. near the choctaw motel, we parked to deliberate.</p>
<p>when out of the bayou came a man like the lake had a tongue! he was right up on the glass, all yellow-eyed, black teeth, banging on the windshield, screaming like a demon at the top of his lungs! "come down to lake pontchartrain! rest your soul and feed your brain! free for you and all your friends! crawfish til the bitter end! come down to lake pontchartrain, wade to where the shallows break. that's where you will get to see everything the water can be!"</p>
<p>i was driving out of there as fast as a camry could. but the interstate was flooded and i had to take the road through the woods.</p>
<p>bad move in retrospect... the road disappeared in the rain and i stood on the brakes when i saw the sign. "lake pontchartrain."</p>
<p>darius was yelling that he saw somebody out in the swells - he jumped out running and noland was going as well. "come back!" -- why the hell would they leave the car?!</p>
<p>and that's when i heard it. make no mistake.</p>
<p>the voices were calling them from under the lake.</p>
<p>"come down to lake pontchartrain, come down to lake pontchartrain,  come down to lake pontchartrain, come down to lake pontchartrain!"</p>
<p>the crawfish were screaming, the waves danced in time... my friends went in deeper... the water, it climbed... i watched in terror - the lake opened wide and, horribly roaring... it pulled them inside.</p>
<hr>
<p>that's how it happened. why would i lie? there were no bodies. i've got nothing to hide.</p>
<p>i'm just a boy lost his friends in the rain. any more questions, just go and ask lake pontchartrain...</p>
</div>

<div class="post reversepost">
<h2>reverse post</h2>
<p>this uses your text color as the background and the post background color as the text color. just a bit of fun.</p>
</div>

</div>

</div>

</body>
</html>

HTML (1 column)

<div class="container">

<div class="sidebar">

<h1>shoelaces</h1>

<div class="bio">

</div>

<div class="pagebody">

<div class="page">
<h2>title</h2>
<p>Here's a version of the layout for a single page, like a tumblr post's permalink! It uses the same stylesheet. This way you can use the layout throughout your site and not just for a homepage. Or you can just use this version instead. Either way.</p>

<p>Include an image with a "figure" and "figcaption" like so, if you want. That'll center it.</p>

<figure>
<img src="https://i.postimg.cc/fRPCYNp1/pic.jpg" alt="a photograph of clouds. the pastel colors and lighting look very peaceful.">
<figcaption>picture caption.</figcaption>
</figure>

<details><summary>The details tag functions like a "read more" cut.</summary>
<p>Put your secrets in here. Or long posts. Or whatever.</p>
</details>

<p>One more bit of "blog decor" is the horizontal line.</p>

<hr>

<p>You could use that as a divider inside a "post", or between "posts" if you have multiple.</p>

<p class="quote">Give a paragraph the class "quote" to make it look like this! Useful if you're discussing a bit of writing or responding to a comment or have a really good quote to share.</p>
</div>

<hr>

<div class="page"><h2>another one</h2>
<p>You can have multiple boxes like this, for a one-column blog look, or one box as tall as you want.</div>

<figure><img src="https://i.postimg.cc/sDVTrK5H/pic3.jpg" alt="a photograph of a dark cloudy sky at sunset. the sky is bright red.">
<figcaption>A picture and its caption could be outside a box, too, if you want. </figcaption></figure>

</div>

</div>

</body>
</html>

CSS

/*if you just want to customize colors, you can do that up here with these!*/

:root {
    --textcolor: #070d0d;
    --backgroundcolor: #f3f8f8;
    --postbackgroundcolor: #f9f9f9;
    --accentcolor: #5a9da6;
    --accentcolorlight: #cde1e4;
}

/*and under here is the rest of the layout code. modify it however you please.*/

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--accentcolor) var(--backgroundcolor);
}

html {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--backgroundcolor);
    font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
    font-size: 8pt;
    margin: 0;
    padding: 0;
    color: var(--textcolor);
}

::selection {
    background-color: var(--accentcolorlight);
}

h1 {
    font-size: 56pt;
    margin: 0;
    position: fixed;
    bottom: 5px;
    left: 5px;
}

h2 {
    padding-left: 10px;
}

ul {
    padding-left: 30px;
    padding-right: 20px;
}

ul>ul {
    padding-left: 20px;
}

a {
    color: var(--accentcolor);
    font-weight: bold;
}

a:hover, a:focus {
    color: var(--accentcolorlight);
}

summary {
    color: var(--accentcolor);
    list-style-type: none;
    padding: 10px;
    cursor: pointer;
}

hr {
    width: 75%;
    border-top: 1px solid var(--accentcolorlight);
}

.container {
    margin: auto;
    width: fit-content;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    margin: 25px;
    margin-top: 0;
    position: fixed;
    height: 100%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: 0.5s;
}

.bio {
    background-color: #f9f9f9;
    border: 1px rgba(000, 000, 000, 0.1) solid;
    padding: 10px;
    text-align: center;
    width: 100%;
}

#profilepic {
    height: 150px;
    width: 150px;
    margin: auto;
    margin-top: -75px;
    border-radius: 100%;
    overflow: hidden;
}

#profilepic img {
    height: 100%;
}

.nav {
    text-align: center;
    border: 1px var(--accentcolorlight) solid;
    background-color: var(--postbackgroundcolor);
    max-width: 250px;
    overflow: auto;
}

.nav a {
    text-decoration: 1px underline dotted;
}

.nav summary {
    font-size: x-large;
    width: fit-content;
}

.nav details[open]>summary {
    transform: rotate(90deg)
}

.nav ul {
    list-style-type: none;
    padding: 0;
}

.nav li {
    padding: 5px;
}

#bottomrightcorner {
    position: fixed;
    width: fit-content;
    height: fit-content;
    bottom: 0px;
    right: 0px;
    z-index: -1;
}

#bottomrightcorner img {
    max-height: 300px;
}

.columnbody {
    column-count: 3;
    align-items: center;
    column-gap: 25px;
    padding: 20px;
    padding-top: 70px;
    margin-left: 300px;
    min-height: 100vh;
}

.post {
    width: 250px;
    max-height: 450px;
    min-height: 100px;
    overflow: auto;
    border: 1px rgba(000, 000, 000, 0.1) solid;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 1px 2px -1px, rgba(0, 0, 0, 0.3) 0px 1px 2px -1px;
    background-color: var(--postbackgroundcolor);
    border-radius: 5px;
    margin-bottom: 25px;
    transition: 0.5s;
}

.post img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 5px;
}

.post:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    scale: 1.3;
}

.post p {
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

.reversepost {
    background-color: var(--textcolor);
    color: var(--backgroundcolor);
}

.imagepost {
    overflow: hidden;
}

.imageposttext {
    max-height: 50px;
    overflow: auto;
    font-style: italic;
    letter-spacing: 1px;
    border-left: 2px var(--accentcolor) solid;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    text-align: justify;
}

.imageposttext p {
    margin: 0;
}

/*these are for the "page" version of the layout.*/

.pagebody {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: 300px;
    min-height: 80vh;
    padding: 50px;
    padding-right: 0;
    font-size: 12pt;
    max-width: 800px;
}

.page {
    overflow: auto;
    border: 1px rgba(000, 000, 000, 0.1) solid;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 1px 2px -1px, rgba(0, 0, 0, 0.3) 0px 1px 2px -1px;
    background-color: var(--postbackgroundcolor);
    border-radius: 5px;
    margin-bottom: 10px;
    transition: 0.5s;
    padding: 20px;
    width: 600px;
    min-height: 200px;
}

.pagebody img {
    max-width: 100%;
    border-radius: 5px;
}

.pagebody figcaption {
    font-style: italic;
    letter-spacing: 1px;
    border-left: 2px var(--accentcolor) solid;
    padding-left: 10px;
}

.quote {
    font-style: italic;
    letter-spacing: 1px;
    border-left: 2px var(--accentcolor) solid;
    padding-left: 10px;
    width: 80%;
    margin: auto;
}

/*below this are the settings for smaller screens!*/

@media only screen and (max-width: 1150px) {
    .columnbody {
        column-count: 2;
    }
}

@media only screen and (max-width: 960px) {
    .pagebody {
        width: 60%;
        margin-left: calc(auto + 300px);
        padding: unset;
        min-width: unset;
        max-width: unset;
        gap: 0;

}

.page {
        width: 100%;
        min-width: unset;
        margin: unset;
    }

}

@media only screen and (max-width: 870px) {

.pagebody {
        width: 100%;
        margin: unset;
        min-width: unset;
        max-width: unset;
        gap: 0;
        padding: unset;
    }

.page {
        width: 80%;
        min-width: unset;
        margin: unset;
    }

.container {
        width: 100%;
    }

.sidebar {
        position: absolute;
        display: block;
        top: 0;
        width: 100%;
        margin: 0;
        height: 80px;
        overflow: auto;
        background-color: var(--postbackgroundcolor);
        border: 1px rgba(000, 000, 000, 0.1) solid;
        padding-top: 10px;
        padding-bottom: 0;
    }

.bio {
        order: 2;
        background: unset;
        border: unset;
        box-shadow: unset;
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0
    }

h1 {
        position: static;
        text-align: center;
        order: 1;
        font-size: 28pt;
        margin-bottom: 0;
    }

#profilepic {
        display: none;
    }

.nav {
        position: fixed;
        top: 0;
    }

#bottomrightcorner img {
        height: 180px;
    }

.columnbody {
        margin: auto;
        column-count: 3;
        margin-top: 100px;
        padding: 5px;
    }

}

@media only screen and (max-width: 775px) {
    .columnbody {
        width: fit-content;
        column-count: 2;
    }

}

@media only screen and (max-width: 545px) {

.page {
        width: 100%;
    }

.columnbody {
        column-count: 1;
    }

.post {
        width: 100%;
        height: auto;

max-height: unset;
    }

.post img {
        max-height: unset;
    }

.post:hover {
        scale: 1;
    }

#bottomrightcorner {
        display: none;
    }

}

20s

Quopyright

a template template in the style of 2020s professional websites - mobile-friendly, no javascript!

HTML

<!DOCTYPE html>
<html>
<html lang="en-US">
  <head>
  <link rel="icon" type="image/x-icon" href="https://i.postimg.cc/TwNvFN6K/house.gif"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quopyright Layout</title>
    <link href="quopyright.css" rel="stylesheet" type="text/css" media="all">
 <link href="https://fonts.upset.dev/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  </head>
  <body> 

<div class="up"><a href="">⤒</a></div>

<div class="topnav">

<span id="logo">quopyright layout</span>

<ul>

<li><a href="">Link</a></li>

<li class="dropdown">
<a href="" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>

<li class="dropdown">
<a href="" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
    </div>
  </li>
</ul>
</div>

<div class="numberone">Quopyright.</div>

<h1>What is Quopyright?</h1>

<div class="text">
<h2>It's <s>more than</s> a layout.</h2> 
<p>Sleek. Modern. Responsive. Huge. No serifs. No fun. <b>I made it for you.</b> This sophisticated template is not just a cookie-cutter web page; it's a way of life. Using <b>cutting-edge</b> techniques and <b>next-generation</b> technology, Quopyright is the perfect webpage solution for <b>your</b> website.</p>

<p>Just kidding. This is a 2020s-style website homepage template. Completely unnecessary, since you can make a website like this easily with any old templating service - still, it's a look specific to a moment in time, and I thought it'd be fun to make.</p>

<p>There's no javascript at all here; you can find plenty of that elsewhere in the actual templating services lol. </p>
</div>

<h1>Meet the team.</h1>
<div class="loose">
<p>You could use this section to highlight collaborators or general aspects of your project you think are worth pointing out. Like special features or something.</p>
</div>

<div class="bigflex cards">
<div class="card">
<img src="https://i.postimg.cc/jj9fzQnr/shittycat.jpg">
<p><b>Xo Lastname, lead designer.</b></p>

<p>Some kind of blurb could go in here.</p>
</div>

<div class="card">
<img src="https://i.postimg.cc/rpgWK2Mz/tisgoodstuff.jpg">
<p><b>Xo Lastname, head of sales.</b></p>
<p>You could add a bunch of cards if you wanted to. I dunno.</p>
</div>

<div class="card"><img src="https://i.postimg.cc/CM9vFkcX/oourgh.png">
<p><b>Xo Lastname, web apprentice</b></p>
<p>Here's one with a LOT of text.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vitae fermentum leo. Quisque sagittis sed augue nec fringilla. Phasellus vel ipsum nisi. Maecenas quis nulla non purus tempus luctus. Praesent vitae massa tellus. Morbi ac nibh pretium, facilisis elit et, euismod velit. In hac habitasse platea dictumst. Nulla vitae ultricies orci. Nulla gravida quam sit amet tortor gravida, a cursus augue sagittis. Sed faucibus velit dolor, eget tincidunt lorem dapibus ut. Vivamus ac orci vitae leo bibendum cursus. Nulla tincidunt pharetra metus, ac eleifend lorem elementum in. Vivamus ultricies lorem eu felis tempus, nec cursus mi pellentesque. Maecenas et aliquam enim. Pellentesque nec convallis nulla. Praesent maximus ullamcorper nisl eu feugiat.</p>

<p>Proin neque neque, euismod quis elementum ac, ultricies eget leo. Nulla facilisi. Maecenas nec tortor aliquam, lobortis orci a, pharetra tellus. Suspendisse blandit vel sem et malesuada. Aenean accumsan, diam vel laoreet mattis, lacus ante posuere tortor, a efficitur odio turpis non metus. Vestibulum at elit eu est ullamcorper consectetur. Donec libero orci, molestie ultrices leo non, gravida aliquam lorem. Nullam sit amet luctus ante. Nulla vitae diam leo. Nulla tincidunt dui sem, ut lacinia ex tempor in. Nunc mollis efficitur semper.</p>

<p>Aliquam erat volutpat. Mauris est odio, convallis nec dui commodo, elementum elementum ligula. Fusce faucibus aliquam arcu. Proin a dolor et nisl dignissim tincidunt. Ut laoreet nulla a quam tincidunt, in mollis sem faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque ullamcorper sagittis mauris in imperdiet. Phasellus volutpat felis orci, vitae placerat justo ultrices scelerisque. Quisque vitae lobortis est. Sed quis leo at magna vestibulum elementum at hendrerit mauris. Nunc eu lorem et justo vulputate posuere.</p>

<p>Cras at pellentesque libero, ac dignissim purus. Sed laoreet odio vitae leo mollis accumsan. Integer tristique justo arcu, in bibendum lorem ultrices hendrerit. Vivamus ultrices, nisl non lacinia eleifend, mauris lorem pulvinar eros, in laoreet sem nunc vitae orci. Vivamus metus diam, ultrices id ipsum ut, posuere commodo tellus. Donec lacinia vulputate ultricies. Nunc vitae feugiat nisl. Nunc ornare fringilla sagittis.</p>

<p>Donec accumsan non mi egestas scelerisque. Etiam tincidunt purus id varius porta. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse accumsan dolor nec arcu aliquam, vel molestie augue varius. Aenean eget urna et massa dapibus sollicitudin. Sed porttitor tellus elit, tempus porttitor ligula rhoncus ut. Aliquam convallis vitae ipsum nec volutpat. Mauris vitae finibus elit. Cras suscipit vel orci non commodo.</p>
</div>

</div>

<h1>Quopyright's Powers</h1>

<div class="text">
<p>You can jump back up to the top of the page using the arrow in the bottom right corner. Handy! The navigation bar up top can have dropdown menus, if you want.</p>
<ul>
<li>This is a list.</li>
<li>Some ideas for pages on your web site:</li>
<ul>
<li>display some of your favorite pictures you have on your computer</li>
<li>share your bookmarked sites</li>
<li>write down instructions for how to do something you're pretty good at doing</li>
</ul>
<li>Or nothing at all. Do what you want.</li>
</ul>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

<button>This is a button.</button>
</div>

</div>

<div class="foot"><p>Here's the footer. Copyright copyright blah blah blah. Cookie policy and permissions and credits or whatever. Also a good place to put socials.</p>
</div>

</body>
</html>

CSS

/* these are the two accent colors! everything else is just black and white. */

:root {
    --accentcolor: #febe98;
    --darkercolor: #964F4C;
}

/* this is the image for the huge image box at the top! it'll be sized up if it's too small, so keep that in mind!  */
.numberone {
    background-image: url("https://file.garden/Zj2Uk_oh-G9Y8Bit/14072949342_0e4e993c13_o.png");
}

/* here's the rest vv */

* {
    box-sizing: border-box;
    transition: 0.5s;
}

body {
    margin: 0;
    background-color: white;
    padding: 0;
    font-family: 'Poppins', 'Helvetica', sans-serif;
}

::selection {
    background-color: var(--accentcolor);
}

h1 {
    margin-top: 100px;
    margin-bottom: 25px;
    width: 100%;
    text-align: center;
    font-size: 30pt;
}

h2 {
    background-color: var(--accentcolor);
    width: fit-content;
}

h3 {
    text-align: center;
}

button {
    padding: 14px 16px;
    border: 2px solid black;
    font-size: 13pt;
    background-color: white;
    font-weight: bold;
    box-shadow: 5px 5px var(--accentcolor);
    cursor:pointer;
    transition: 0.1s;
}

button:active {
    box-shadow: none;
}

u {
    text-decoration: wavy underline 1px var(--accentcolor);
}

a {
    color: var(--darkercolor);
    font-weight: bold;
}

a:hover,
a:focus {
    color: var(--accentcolor);
    background-color:var(--darkercolor)
}

/* this is the arrow in the corner that takes you to the top of the page. */
.up {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: fixed;
    bottom: 5px;
    right: 5px;
    background-color: var(--darkercolor);
    opacity: 0.7;
    text-align: center;
    color: white;
    font-size: 35px;
}

.up a {
    text-decoration: none;
    color: white;
}

.up:hover {
    opacity: 1;
}

/* end of "back to top" arrow */

/* this is the bar at the top of the page */

.topnav {
    background-color: black;
    padding-right: 45px;
    padding-left: 15px;
    width: 100%;
    height: 75px;
    color: white;
    font-size: 16pt;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo {
    padding: 15px;
    font-weight: bold;
    font-size: 22pt;
}

.topnav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: fit-content;
}

.topnav li {
    float: left;
}

.topnav a {
    display: inline-block;
    font-weight: 400;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
    background-color: var(--darkercolor);
    color: white;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    width: 175px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--accentcolor);
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* that's all the top navbar */

/* this is the big huge image box styling */
.numberone {
    background-position: center;
    background-size: cover;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 80pt;
    font-weight: 900;
    text-align: center;
    color: white;
    line-height: 1;
}

/* this is the flexbox for the main sections */

.bigflex {
    width: 100%;
    min-height: 70vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    line-height: 1;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 60px;
    margin: auto;
}

/* this is the text div for the section */

.text {
    width: 45%;
    line-height: 1.5;
}

/* and this is the image div for the section */

.pic {
    width: 450px;
    height: 450px;
    border-radius: 100%;
    border: 10px solid var(--accentcolor);
    overflow: hidden;
    text-align: center;
}

.pic img {
    height: 100%;
    /*change this to width:100% if your image is taller than it is wide.*/
}

.loose {
    max-width: 60%;
    margin: auto;
    text-align: center;
}

/* this is the section with the colored background and the little info cards. */

.cards {
    align-items: center;
    background-color: var(--accentcolor);
    color: var(--darkercolor);
}

/* "cards" is the container and "card" is for the actual card(s) */

.card {
    width: 20%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 5px;
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(16px);
    min-width: 200px;
    text-align: center;
    border-radius: 20px;
    padding: 10px;
    max-height: 500px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--darkercolor) var(--accentcolor)
}

.card:hover {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 15px;
    scale: 1.1;
}

.card p {
    margin: auto;
    margin-top: 10px;
    line-height: 1.1;
}

.card img {
    border-radius: 100%;
    height: 150px;
    border: 1px solid;
}

/* aaand here's the footer */

.foot {
    background-color: black;
    padding: 5px;
    width: 100%;
    height: 85px;
    color: white;
    font-size: 10pt;
    text-align: center;
}

/* this is styling for mobile */

@media only screen and (max-width: 810px) {
.topnav {font-size:14pt;
padding-left:5px;
padding-right:5px;
height:auto;}

.text {width:90%;}

.numberone {font-size:60px;}

.foot {height:auto;}
}

Indeed Web

indeed web is a blog layout for infiltrating the indieweb, if you have a need to do such a thing! no javascript, mobile-friendly, with only one accent color to keep it simple.

HTML

<!DOCTYPE html>
<html>
<html lang="en-US">
  <head>
  <link rel="icon" type="image/x-icon" href=""> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Indeed</title>
    <link href="indeedlayout.css" rel="stylesheet" type="text/css" media="all">
  </head>

<body>

<div class="container">

<div class='header'>

<h1>Indeed Web</h1>
<h2>by Xo Xixxii</h2>

</div>

<div class='bio'>

<div>
<p>Jake, 35, he/him. US-based programmer & indie web enthusiast; proud to be a father, an ally, and a geek!</p>
</div>

</div>

<div id='navbar'>
<a href=''>Now</a> 
<a href=''>About</a> 
<a href=''>Uses</a> 
<a href=''>Blog</a> 
<a href=''>RSS</a>
</div>

<div class="box">
<h1>Box Name</h1>
<h2>Indeed.</h2>
<p>Indeed Web is a jolly twist on the most popular form of IndieWeb site design, with a little pop of color and optional jaunty box titles to give it some character. If you feel the need to disguise yourself as a professional computer man with a blog, perhaps this can help!</p>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

</div>

<div class="box reversebox">
<h1>Box Name</h1>
<h2>Opposite Day!</h2>
<p>This is a reverse box.</p>
</div>

<div class="box">
<h2>Inside title.</h2>
<p>Text inside your box goes here.</p>
</div>

<div class="footer">
<p>Footer text footer text...</p>
<img src="https://xixxii.neocities.org/lorenribozonebutton2.png"> <img src="https://xixxii.neocities.org/images/buttons/cc0.png">
</div>

</div>

<a href="#" id="pagetop">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path fill="var(--ci-primary-color, currentColor)" d="M256,496A240,240,0,0,1,86.294,86.294,240,240,0,0,1,425.706,425.706,238.432,238.432,0,0,1,256,496Zm0-448C141.309,48,48,141.309,48,256s93.309,208,208,208,208-93.309,208-208S370.691,48,256,48Z" class="ci-primary"/>
  <polygon fill="var(--ci-primary-color, currentColor)" points="356.686 315.313 256 214.628 155.314 315.313 132.686 292.687 256 169.373 379.314 292.687 356.686 315.313" class="ci-primary"/>
</svg>
</a>

</body>
</html>

CSS

/* these are the colors! there's only three. the background, the text, and the accent color. */

:root {
    --bgcolor: #1f1c1c;
    --txtcolor: #ece9e3;
    --popcolor: #DD1155;
}

/* JAUNTY TITLES - DELETE THIS SECTION IF YOU WANT NORMAL HEADERS IN YOUR BOXES */
.box>h1 {
    border: 2px var(--txtcolor) solid;
    background-color: var(--bgcolor);
    width: fit-content;
    padding: 10px;
    margin-left: -30px;
    margin-top: -50px;
    transform: rotate(-5deg)
}

.box>h2 {
    margin-top: 0;
}

.reversebox>h1 {
    border: 2px var(--popcolor) solid;
    background-color: var(--txtcolor);
    transform: rotate(5deg);
    position: absolute;
    right: 0;
    margin-right: -15px;
    margin-left: unset;
}

/* END OF JAUNTY TITLES */

/* the rest of the layout vv */

::selection {
    background-color: var(--popcolor)
}

* {
    box-sizing: border-box;
    scrollbar-color: var(--popcolor) var(--bgcolor);
    scrollbar-width: thin;
}

body {
    background-color: var(--bgcolor);
    color: var(--txtcolor);
    font-family: Verdana, Helvetica, sans-serif;
    text-underline-offset: 1px;
}

u {
    text-decoration: underline double var(--popcolor);
}

a {
    font-weight: bolder;
    color: var(--popcolor);
    text-decoration: underline dotted 1px;
}

a:hover {
    color: var(--txtcolor);
    background-color: var(--popcolor)
}

img {
    max-width: 100%;
}

.container {
    /* everything in this layout is inside this container. increase the percentage and max-width to make it wider! */
    width: 50%;
    margin: auto;
    min-width: 400px;
    max-width:700px;
}

.header>h1 {
    font-size: 50pt;
    line-height: 0.9;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0;
}

.header>h2 {
    text-align: right;
    font-family: Georgia;
    margin-top: 0px;
    font-style: italic;
    font-weight: 400;
    font-size: 13pt;
}

.bio {
    min-height: 150px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    font-size: 10pt;
}

.bio>div {
    max-width: 70%;
}

#profilepic {
    width: 128px;
    height: 128px;
    border-radius: 100%;
    object-fit: cover;
    outline: var(--txtcolor) 2px solid;
    outline-offset: 2px;
}

#navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: var(--bgcolor);
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 5px;
    background-color: var(--txtcolor);
}

#navbar>a {
    color: var(--bgcolor);
    font-weight: bolder;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px;
}

#navbar>a:hover {
    border-radius: 5px;
    background-color: var(--popcolor);
    color: var(--txtcolor);
}

.box {
    padding: 15px;
    margin-top: 50px;
    border: var(--txtcolor) 2px solid;
    font-size: 11pt;
}

.reversebox {
    background-color: var(--txtcolor);
    color: var(--bgcolor);
    border: var(--popcolor) 2px solid;
    position: relative;
}

#pagetop {
    position: fixed;
    bottom: 20px;
    right: 25px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    color: var(--popcolor);
    opacity: 0.4;
}

#pagetop:hover {
    opacity: 1;
    background-color: unset;
}

.footer {
    text-align: center;
    font-size: 9pt;
    padding: 25px;
    padding-top: 5px;
    margin-top: 100px;
    border-top: 1px var(--txtcolor) solid;
}

/* adjustment for small screens */
@media only screen and (max-width: 700px) {
    .container {
        width: 95%;
        min-width: unset;
    }

#profilepic {
        height: 90px;
        width: 90px;
    }
}

Cardio

cardio is a carrd-inspired dreamy layout for if you want one of these transparent-box gradient-background landing page situations. mobile-friendly & very simple.

HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="cards.gif">
  
<title>Cardio Layout</title>
<link href="card.css" rel="stylesheet" type="text/css" media="all">

<div class="container">

</ul>
</nav>

<div class="glassbox">
<h1>Cardio</h1>

<p>this is a carrd-esque layout for a shimmery glowy landing page type of site. it works just fine on mobile. the navigation starts to look silly if you have more than 6 or so links in it, but you can do it if you want! </p>

<h2>Header 2</h2>

<ul>
  <li>This is a list.</li>
  <li>You could put all kinds of things in it.</li>
</ul>

<blockquote><p>This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<button>This is a button.</button> <a href="">This is a link.</a>
</div>

</div>

 </body>
</html>

CSS

/* change the colors here!

the background gradient goes from (bgcolor) at the bottom left to (accent) at the top right.

links are bgcolor and the border on blockquotes are [accent]. text is textcolor, obviously. it's a very dark red at the moment.

the boxes will look nicest with lighter-colored backgrounds, but do whatever you want!

:root {
    --bgcolor: #a80086;
    --textcolor: #311a1a;
    --accent: #ffde4d;
}

body {
    /*if you'd like to have an image background instead of the gradient, replace this - */

background: linear-gradient(30deg, var(--bgcolor) 0%, var(--accent) 100%);

/* with this:

background:url(URLOFYOURIMAGEHERE);

/* here's the font, if you want to change that */
    font-family: "Nunito Sans", sans-serif;
}

/* rest of the layout */

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bgcolor);
    background-attachment: fixed;
    color: var(--textcolor);
    padding: 0;
    margin: 0;
}

::selection {
    background-color: var(--bgcolor);
    color:var(--accent);
}

a {
    color: var(--bgcolor);
    text-decoration: dotted underline 1px;
}

a:hover {
    color: var(--accent);
    background-color: var(--textcolor);
}

blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 15px;
    font-size: small;
}

button {
    font-family: inherit;
    color: inherit;
}

h1:first-child {
    margin-top: 0;
}

.container {
    display: flex;
    flex-wrap: wrap;
    width: 900px;
    margin: 100px auto;
    height: 400px; /* You can change the height of the shiny box here. Delete the line if you want it to just be as long as your text content is. Make it bigger if you want it a particular height. */
    max-width: 100%;
}

nav {
    width: 30%;
    min-width: 200px;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 13pt;
}

#picture {
    height: 150px;
    width: 150px;
    border-radius: 100%;
    object-fit: cover;
    border: 5px solid rgba(255, 255, 255, 0.4);
    box-shadow: 1px 2px 5px rgba(189, 189, 189, 0.1);
    margin-bottom: 20px;
}

nav ul {
    width: 70%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

button,
nav li {
    padding: 5px;
    margin-top: 5px;
    backdrop-filter: blur(7px);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 1px 2px 5px rgba(189, 189, 189, 0.5);
    transition: 0.2s
}

nav li:hover,
nav li:focus {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

button:hover, button:focus {
    box-shadow: 1px 1px 5px rgb(255, 255, 255);
    border: 1px solid white;
}

button:active {
    box-shadow: inset 1px 2px 5px rgba(189, 189, 189, 0.9);
}

nav a:hover, nav a:focus {
    color: var(--textcolor);
}

.glassbox {
    width: 70%;
    height: 100%;
    min-width: 300px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
    padding: 25px;
    backdrop-filter: blur(7px);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 1px 3px 10px rgba(189, 189, 189, 0.5);
    line-height: 1.1;
}

/* mobile styling */
@media only screen and (max-width: 750px) {
    .container {
        margin:35px auto;
        gap: 30px;
        height: unset;
    }

nav,
    .glassbox {
        width: 100%;
        min-width: unset;
    }

nav {
        flex-wrap: wrap;
        flex-direction: row;
    }

#bigtitle {
        text-align: center;
        font-size: 46pt;
        line-height: 1;
    }

}

general

milk crate

milk crate is a little box to put your little website in! it has a nifty little tab for navigation as its only frill. mobile-friendlyish (navigation tab doesn't work in safari on iphone, which im trying to figure out), no javascript.

HTML

<!DOCTYPE html>
<html>
<html lang="en-US">
  <head>
  <link rel="icon" type="image/x-icon" href="milkcarton.gif"> 
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>milk crate</title>
    <link href="milkcratelayout.css" rel="stylesheet" type="text/css" media="all">
<link rel="preconnect" href="fonts.upset.dev">
<link href="https://fonts.upset.dev/css2?family=Bagel+Fat+One&family=Baloo+Paaji+2:wght@400..800&display=swap" rel="stylesheet">
  </head>
  <body>

<h1>milk crate</h1>

<div class="box">

<div class="innerbox">

<p>milk crate is a layout that puts your website in a small centered box! it gives you a big canvas for decoration outside of the box. this layout has an informal and personal feeling to it i think!</p>

<h2>heading 2</h2>
<ul>
<li>This is a list.</li>
<li>Some ideas for pages on your web site:</li>
<ul>
<li>display some of your favorite pictures you have on your computer</li>
<li>share your bookmarked sites</li>
<li>write down instructions for how to do something you're pretty good at doing</li>
</ul>
<li>Or nothing at all. Do what you want.</li>
</ul>

<p><b>This is bolded.</b> <i>This is italicized.</i> <u>This is underlined.</u> <a href="http://www.neocities.org">This is a link.</a></p>

<button>This is a button.</button>

</div>

<img src="https://i.postimg.cc/XYkDqrLN/milkcrate2.png" class="rightcorner">

<div class="sidebox">
<p>navigation</p>
<ul>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>
</div>

</div>

</body>
</html>

CSS

/* change the colors here! */
:root {
    --bgcolor: #e8c4c4;
    --lightcolor: #fef7dd;
    --popcolor: #ebc061;
    --darkcolor: #56263e;
    --darkestcolor: #361626;
}

/* the rest of the layout vv */

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bgcolor);
    color: var(--darkestcolor);
    font-family: "Baloo Paaji 2", "Atkinson Hyperlegible", Verdana, sans-serif;
    z-index: 1;
}

::selection {
    background-color: var(--popcolor)
}

h1 {
    color: var(--lightcolor);
    font-family: "Bagel Fat One", "Arial Black", sans-serif;
    font-size: 50pt;
    font-weight: normal;
    text-shadow: 2px 2px var(--darkcolor);
    max-width: 600px;
    margin: auto;
    margin-bottom: -25px;
    position: relative;
    z-index: 4;
}

a {
    color: var(--darkestcolor);
    border-radius: 5px;
    font-weight: bold;
    text-decoration: dotted underline 1px;
    text-shadow: var(--bgcolor) 1px 1px;
}

a:hover {
    color: var(--popcolor)
}

img {
    max-width: 100%;
}

button {
    border: var(--darkcolor) 2px solid;
    background-color: var(--lightcolor);
    box-shadow: var(--bgcolor) 3px 3px;
    border-radius: 3px;
    font-family: inherit;
    font-weight:bold;
    font-size: 14pt;
    color: inherit;
}

button:active {
    box-shadow: none;
    border-color: var(--darkestcolor)
}

button:hover,
button:focus {
    border-color: var(--popcolor)
}

.box {
    border: var(--darkcolor) 6px solid;
    border-radius: 6px;
    width: 600px;
    max-width: 100%;
    height: 450px;
    margin: auto;
    position: relative;
}

.innerbox {
    width: 100%;
    height: 100%;
    background-color: var(--lightcolor);
    overflow: auto;
    line-height: 1.2;
    position: relative;
    z-index: 3;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--popcolor) var(--lightcolor);
}

.sidebox {
    position: absolute;
    height: 200px;
    right: -25px;
    top: 80px;
    width: 150px;
    line-height: 1.3;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: var(--darkcolor);
    color: var(--lightcolor);
    text-align: center;
    z-index: 1;
    transition: 0.5s;
    padding-right: 25px;
    box-shadow: 5px 0px 5px inset var(--darkestcolor);
    border-left: 6px solid var(--darkcolor);
    overflow: hidden;
}

.sidebox p {
    position: absolute;
    background-color: var(--darkcolor);
    z-index: -1;
    transform: rotate(270deg);
    right: -23px;
    top: 45%;
    margin: 0;
    line-height: 0.8;
}

.sidebox ul {
    list-style-type: none;
    padding: 0;
    height: 190px;
    margin: 5px;
    margin-left: -5px;
    scrollbar-width: thin;
    scrollbar-color: var(--popcolor) var(--lightcolor);
    overflow: auto;
}

.sidebox li {
    margin: 5px;
}

.sidebox a {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    color: var(--popcolor);
    text-shadow: none;
}

.sidebox a:hover {
    background-color: var(--popcolor);
    color: var(--darkestcolor)
}

.sidebox:hover,
.sidebox:focus {
    position: absolute;
    right: -150px;
}

.leftcorner {
    position: absolute;
    bottom: -75px;
    left: -75px;
    max-height: 150px;
    z-index: 5;
}

.rightcorner {
    position: absolute;
    bottom: -75px;
    right: -75px;
    max-height: 150px;
    z-index: 5;
}

/* modifications for smaller screens - most notably changing the navigation tab's location and appearance so it moves to the bottom of the box. */

@media only screen and (max-width: 889px) {
    .sidebox {
        top: unset;
        right: 75px;
        bottom: -23px;
        border-top-right-radius: unset;
        border-bottom-left-radius: 20px;
        border-left: none;
        border-top: 6px var(--darkcolor) solid;
        box-shadow: 0px 5px 5px inset var(--darkestcolor);
        padding: unset;

}

.sidebox p {
        transform: unset;
        bottom: 5px;
        top: unset;
        right: unset;
        left: 26%;
    }

.sidebox:hover,
    .sidebox:focus {
        right: 75px;
        bottom: -200px;
    }

.sidebox ul {
        height: 160px;
        margin: 5px;
        margin-left: 5px;
    }

}

@media only screen and (max-width: 760px) {
    .leftcorner {
        display: none;
    }

.rightcorner {
        display: none;
    }

}

/* temporary fix for mobile; this makes the nav menu always-expanded on mobile, because it was broken in safari on iphones. working on another option. stay tuned. */

@media only screen and (max-width: 500px) {
.sidebox {top:440px;
right:0;}
.sidebox:hover, .sidebox:focus {top:440px;
right:0;}
}

}

camellia

camellia is a leaf-shaped variant on the "small box" format! comes with a bunch of additional space to make up for its limitations. a bit kooky and fiddly but still with a soothing slightly classy feeling, i think. an interesting mix of vibes. mobile-friendly, no javascript. this one does have some pieces you could break that would fuck up the layout pretty badly, so it might not be best for beginners... that said, breaking things is a great way to learn how they work!

this layout is mobile-friendly, uses no javascript, and even (bonus?) works just fine if you do something like CSS Naked Day and delete all your css. if that's something you like to do.

this layout was made for the spring 2025 32-bit cafe codejam!

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="icon" type="image/x-icon" href="leaf.gif"> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>camellia</title>
<link href="tealeaf.css" rel="stylesheet" type="text/css" media="all">
<link href="https://fonts.upset.dev/css2?family=Coiny&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>

<div class="container">

<div class="shape-left"></div>
<div class="shape-right"></div>

<div class="leaftext">

<h1>camellia.</h1>

<p>
This is layout is a liiiittle fiddly the shaping of the text in this leaf means that there's a hard limit on how much you can put in this section. But don't worry! There's plenty more room - click the big circle!
</p>

<h2>Header 2</h2>
<p>
<b>This is bold.</b> <a href="https://www.google.com/">This is a link.</a> <i>This is italics.</i></p>

<blockquote>This is a blockquote. Phasellus hendrerit lorem in est suscipit tincidunt. Nunc facilisis vehicula venenatis. Suspendisse faucibus nec neque vel suscipit. Aenean mollis, ligula sed bibendum placerat, diam justo posuere dolor, sed rutrum est ex at nibh. Suspendisse potenti.
</p>
</blockquote>

<ol>
<li>This is a numbered list.</li>
<li>This is a numbered list.</li>
</ol>

<button>Button</button>

<p>Curabitur pellentesque blandit sodales. Mauris rhoncus feugiat dapibus. Nunc luctus ipsum odio. Vestibulum consequat suscipit malesuada. Sed eu pretium erat, eu lacinia ante. Phasellus ultricies, risus at volutpat dapibus, dolor magna molestie felis, vitae porta magna ligula eget augue. Nam viverra suscipit varius. Proin ac dignissim lacus. Donec at pharetra enim. Quisque sagittis sapien nec eros congue molestie. Nam rhoncus pulvinar est vel laoreet. Phasellus eu pretium arcu. Etiam faucibus eget orci ut porta. Quisque lobortis pharetra velit, eget malesuada sem mattis id. Aliquam libero ligula, ultricies sit amet egestas eu, luctus vitae turpis.
</p>
<p>
If you put any text after this, it will get cut off! Alas!!
</p>

</div>

<button popovertarget="popuppage">click!!</button>

</div>

<div class="topright">

<div class="updatescontent"> 
<p>Here you can put recent updates to your website. Or something else! It's a box.</p>

<ul>
<li>You can make many entries in this list. The box will scroll.</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>

<img src="dangle.png" id="vines">

</details>

<details name="minibox" id="two">

<summary>navigation</summary>

<p>Navigation links can go in here.</p>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>

</div>

<details name="minibox" id="three">

<summary>a third box</summary>

<div class="updatescontent">
<p>And here's a third box just in case.</p>

</div>

</details>

</div>

</div>

<div popover id="popuppage">

<button popovertarget="popuppage" popovertargetaction="hide" id="close">
close
</button>

<h1>camellia... continued!</h1>
  
<p> Ta-da! A page within a page, tucked away to facilitate the presentation of the leaf shape. This one is a normal shape!</p>

<p>This layout is mobile-friendly, uses no javascript, and even (bonus?) works just fine if you do something like CSS Naked Day. I wouldn't recommend it if you're completely unfamiliar with HTML or CSS because you might find it a little confusing, but I've tried to put in comments to make everything reasonably clear.</p>

</body>
</html>

CSS

/* CUSTOMIZING ZONE!!!

if you want to customize the colors, you can change them up here by changing these values! */

:root {
    --leafcolor: #718227;
    --boxbgcolor: #9fb348;
    --bordercolor: #323a0d;
    --textcolor: #eee3c8;
    --linkcolor: #decf92;
    --contrastcolor: #f7ea76;
}

/* and here are the two fonts used, so you can change them up here if you want. */

body {
    font-family: 'Montserrat', 'verdana', sans-serif;
    font-size: 10pt;
}

.container h1 {
    font-family: 'Coiny', 'Arial Black', sans-serif;
    font-size: 52pt;
}

/* you can change the bullet point for lists with this. just delete it if you want normal bullet points! */

ul li {
    list-style-type: "✿ ";
}

/* below is the rest of the layout! */

/* overall CSS */

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--leafcolor) var(--textcolor);
}

body {
    background-color: var(--textcolor);
}

::selection {
    background-color: var(--contrastcolor);
    color: var(--bordercolor)
}

a {
    font-weight: bold;
    color: var(--linkcolor);
}

a:visited {
    color: var(--bordercolor);
}

a:hover,
a:focus {
    color: var(--contrastcolor)
}

button {
    cursor: pointer;
    background-color: var(--contrastcolor);
    font: inherit;
    font-size: smaller;
    border: 1px var(--bordercolor) solid;
    border-radius: 10px;
    padding: 6px;
}

button:active {
    filter: brightness(80%);
}

blockquote {
    border-left: 5px solid var(--contrastcolor);
    padding-left: 20px;
    text-align: left;
}

ul {
    padding-left: 80px;
    text-align: left;
    list-style-position: inside;
}

ol {
    list-style-position: inside;
    padding-left: 80px;
}

img {
    max-width: 100%;
}

summary {
    cursor: pointer;
}

hr {
    width: 50%;
    border-top: var(--bordercolor) 1px solid
}

/* leaf shape stuff. the border-radius gives the div the leaf shape, and shape-left and shape-right make the text fit inside that shape. */

.container {
    margin: 100px auto;
    background-color: var(--leafcolor);
    width: 700px;
    border-bottom-left-radius: 600px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 600px;
    border-top-left-radius: 0px;
    height: 700px;
    position: relative;
    text-align: justify;
    color: var(--textcolor);
    border: 1px solid var(--bordercolor);
}

.shape-left {
    float: left;
    shape-outside: polygon(0.12% -0.44%, 0.96% 11.71%, 0px 696px, 100.14% 99.76%, 99.63% 92.1%, 88.73% 89.24%, 71.98% 84.13%, 51.53% 75.38%, 33.62% 65.34%, 19.96% 54.53%, 8.5% 41.32%, 14px 224px, 0.1% 21.32%, 0.24% 0.09%, 41.45% 0.35%, 73.01% 2.96%, 96% 7.67%, 84.51% -0.7%);
    width: 50%;
    height: 700px;
    shape-margin: 15px;
}

.shape-right {
    float: right;
    width: 50%;
    height: 700px;
    shape-outside: polygon(347px 2px, 3px 2px, 1.7% 8.3%, 19.91% 12.96%, 40.06% 20.36%, 59.25% 30.24%, 72.02% 38.47%, 81.85% 47.44%, 90% 56.61%, 95.1% 64.9%, 98.67% 75.97%, 100.02% 84.84%, 99.11% 96.48%, 98.85% 99.85%, 60.55% 99.92%, 37.99% 98.25%, 20.44% 96.14%, -1.55% 92%, 21.97% 99.59%, 99.62% 101%);
    shape-margin: 10px;
}

/* end of leaf shape */

/* this is the pagetitle h1 specifically, the one inside the leaf. */
.container h1 {
    position: absolute;
    text-align: left;
    top: -50px;
    left: -20px;
    letter-spacing: 3px;
    line-height: 1;
    text-shadow: -1px -1px 0 var(--leafcolor), 1px -1px 0 var(--leafcolor), -1px 1px 0 var(--leafcolor), 1px 1px 0 var(--leafcolor);
}

/* this is for the three miniboxes. they're all in a container called topright. */

.topright {
    position: absolute;
    right: 0;
    width: 250px;
    top: 50px;
}

.topright ul {
    padding-left: 0;
}

.topright details {
    position: absolute;
}

.topright summary {
    background: var(--leafcolor);
    border: 1px solid var(--bordercolor);
    border-radius: 5px;
    padding: 2px;
    padding-left: 15px;
    padding-right: 20px;
    width: fit-content;
    list-style-type: "+ ";
}

.topright details[open] summary {
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom: none;
    list-style-type: "- "
}

.updatescontent {
    background-color: var(--boxbgcolor);
    color: var(--bordercolor);
    height: 200px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid var(--bordercolor);
    position: relative;
    z-index: 3;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--textcolor) var(--bordercolor);
    padding: 15px;
    text-align: left;
    font-size: small;
    width: 250px;
}

.updatescontent p {
    margin-top: 0;
}

#two {
    margin-top: 50px;
    margin-left: 50px;
}

#three {
    margin-top: 100px;
    margin-left: 100px;
}

#vines {
    margin-top: -20px;
    z-index: 1;
    position: absolute;
    pointer-events: none;
}

/* end of top right miniboxes. */

/* this is the container for the big round button that opens the popup! */
.buttonbox {
    position: absolute;
    bottom: 0;
}

/* and this is the styling for the button itself. */
.buttonbox button {
    width: 150px;
    height: 150px;
    border-radius: 100%;
    border: 1px solid var(--bordercolor);
    background-color: var(--leafcolor);
    cursor: pointer;
    font: inherit;
    font-weight: bold;
    font-size: 16pt;
    color: var(--textcolor);
}

/* end of button stuff. */

/* this is the styling for the popup page */

#popuppage {
    overflow: auto;
    height: 650px;
    width: 600px;
    margin: 120px auto;
    color: var(--bordercolor);
    background: var(--textcolor);
    border: 1px solid var(--bordercolor);
    padding: 15px;
    border-radius: 5px;
    resize: both;
}

/* this is the styling for the button that closes the popup page. */
#close {
    position: absolute;
    top: 0;
    right: 5px;
    background-color: transparent;
    font: inherit;
    border: none;
}

#popuppage h2, #popuppage h1 {
    margin-top: 0;
}

/* below is the styling for small screens and mobile! a lot of things move around; "topright" goes on the bottom left, for one thing... */

@media only screen and (max-width: 600px) {

.container {
        border-radius: 10px;
        width: 95%;
        padding: 20px;
        height: unset;
        margin-bottom: 150px;
    }

blockquote {
        margin: auto;
    }

ul,
    ol {
        padding-left: 20px;
    }

.container h1 {
        margin-top: 30px;
        margin-left: 10px;
        font-size: 35pt;
    }

.shape-left {
        display: none;
    }

.shape-right {
        display: none;
    }

.buttonbox {
        bottom: -120px;
        right: 0;
    }

.buttonbox button {
        height: 100px;
        width: 100px;
    }

.topright {
        top: unset;
        bottom: -100px;
        left: 0;
        height: auto;
    }

#one,
    #two,
    #three {
        margin: unset;
        position: static;
    }

#vines {
        display: none;
    }

#popuppage {
        width: 100%;
    }
}

pre-dawn coffee

pre-dawn coffee is a hazy dreamy theme inspired by too-early mornings, road trips, and truck stops... i tried to emulate that washed-out grey look the world has right before the sun comes up. it's a pretty simple & uncluttered setup, with the navigation tucked away out of sight. simplebut stylish, i think!

this layout was made for the spring 2025 32-bit cafe codejam!

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="icon" type="image/x-icon" href="https://i.imgur.com/DM0LNmG.png"> 
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pre-Dawn Coffee</title>
<link href="https://fonts.upset.dev/css2?family=Prosto+One&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>

<body>

<h1>Pre-dawn Coffee</h1>

</ul>
</div>
</details>
</div>
</div>

<h2>Header 2</h2>
<p>This is a premade layout template made to try and capture that just-woke-up early-morning feeling... it's wan, hazy, and quiet. The sun's not quite out yet, but it's not nighttime any more.</p>

<p>Click on the coffeepot to open the navigation menu! and if you scroll down, you can click the sun in the top left to return to the top of the page.</p>

<h3>Header 3</h3>

<p><b>This is bold.</b> <a href="">This is a link.</a> <i>This is italic.</i></p>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<button>This is a button.</button>

<p>There is a filter applied to all images to make them a bit washed-out; hovering removes the filter. Check it out!</p>
<img src="https://i.imgur.com/daUKqhG.jpeg" width="300px">

<hr>

</div>

<div class="insertR">
<p>If you want, you could insert a box like this. There's "insertR" and "insertL"; insertR will float on the right, and insertL will float on the left (see below).</p> 
<p>Text wraps around them nicely.</p>
</div>

<div class="insertL">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>

</div>

CSS

/* if you want to change the colors, do that here! changing these will change colors for the whole layout.

note that the divbackground color has some transparency for the see-through effect, so keep that in mind if you want to change colors!

:root {
    --fontcolor: #37465f;
    --gradientdark: #6a77bd;
    --gradientlight: #A8ACFF;
    --divbackground: rgba(208, 218, 235, 0.7);
    --paleborder: #d0daeb;
    --sunshine: #f1edc8;
}

/* change the fonts here! */

body {
    font-family: Verdana, sans-serif;
    font-size: 10pt;
}

h1,h2,h3,h4 {
    font-family: "Prosto One", "Arial Black", Verdana, sans-serif;
}

/* vv here's the rest of the layout vv */

* {
    box-sizing: border-box;
    scrollbar-color: var(--gradientdark) var(--gradientlight);
}

::selection {
    background-color: var(--fontcolor);
    color: var(--paleborder)
}

body {
    background: var(--gradientlight);
    background: url(https://i.imgur.com/BO2nRFq.png)
        /* this is the lamppost background image. feel free to remove or change it! */
        ,
    linear-gradient(180deg, var(--gradientlight) 0%, var(--gradientdark) 100%);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: var(--fontcolor);

}

img {
    filter: saturate(50%) grayscale(60%);
    max-width: 100%;
    transition: 1s;
}

img:hover, img:focus {
    filter: none;
}

h1 {
    font-size: 38pt;
}

h2 {
    font-size: 24pt;
}

h3 {
    font-size: 18pt;
}

a {
    text-decoration: double underline 1px;
    font-weight: bold;
    color: var(--gradientdark);
}

a:hover, a:focus {
    filter: brightness(200%)
}

a:visited {filter:brightness(50%)}

blockquote {
    border-left: 2px solid var(--gradientdark);
    padding-left: 10px;
    font-style: italic;
    text-align: justify;
}

button {
    font-family: inherit;
    font-size: 8pt;
    border: 1px solid var(--gradientdark);
    background-color: var(--paleborder);
    padding: 4px;
    border-radius: 10px;
    color: var(--gradientdark);
    cursor: pointer;
}

button:hover,button:focus {
    border: 1px solid var(--paleborder)
}

button:active {
    background-color: var(--gradientlight);
}

hr {
    border-top: solid var(--gradientdark) 1px;
    border-bottom: none;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 50%
}

.container {
    margin: 50px auto;
    width: 80%;
    max-width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.main {
    backdrop-filter: blur(9px) saturate(120%);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
    background-color: var(--divbackground);
    width: 100%;
    border-radius: 75px;
    border: var(--paleborder) solid 1px;
    padding: 25px;
    position: relative;
}

#coffee {
    position: absolute;
    top: -120px;
    right: 0px;
    z-index: 10;
}

#coffee summary {
    list-style-type: none;
}

#coffee summary img {
    cursor: pointer
}

.menucontainer {
    position: relative;
}

.navmenu {
    position: absolute;
    background-color: var(--paleborder);
    border-radius: 0px;
    border: 1px solid var(--gradientdark);
    box-shadow: 0px 5px 10px var(--gradientdark);
    opacity: 0.87;
    width: 175px;
}

.navmenu ul {
    padding: 0;
    margin: 0;
}

.navmenu li {
    list-style-type: none;
    border-bottom: 1px solid var(--gradientdark);
    text-align: center;
    padding: 5px;
    background-color: var(--paleborder);
}

.navmenu li:hover, .navmenu li:focus {
    background-color: var(--gradientdark);
    color: var(--paleborder);
}

.navmenu a:hover, .navmenu a:focus {
    filter: none;
}

.topofpage a {
    height: 50px;
    width: 50px;
    background-color: var(--sunshine);
    box-shadow: 0px 0px 30px 10px var(--sunshine);
    border-radius: 100%;
    position: fixed;
    top: 20px;
    left: 20px;
    opacity: 0.7;
    transition:1s;
}

.topofpage a:hover, .topofpage a:focus {
    filter: none;
    opacity: 1
}

.insertR,.insertL {
    width: 30%;
    min-width:180px;
    height: 250px;
    border: var(--fontcolor) 1px solid;
    shape-outside: margin-box;
    overflow: auto;
    scrollbar-width: thin;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--paleborder);
    border-radius: 10px;
}

.insertR {
    margin-left: 15px;
    float: right
}

.insertL {
    margin-right: 15px;
    float: left;
}
@media only screen and (max-width: 650px) {
    .container {
        width: 95%
    }

.main {
        padding: 15px;
        border-radius: 50px
    }

h1 {
        font-size: 28pt
    }

h2 {
        font-size: 20pt
    }

.navmenu {
        left: -20%
    }

.topofpage a {
        height: 30px;
        width: 30px;
    }

#coffee {
        scale: 0.8
    }
}

cozy cafe

cozy cafe is a DIY sort of template with a ton of box options - i made a variety of types of divs for you in CSS, so you just need to figure out a combination of boxes that you like! it's a layout type that would normally be made with grid, i think, but i did it with a flexbox because i don't like grid.

this layout was going to be made for the spring 2025 32-bit cafe codejam, but i didn't end up submitting it because i didn't think it really fit the theme.

HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="img.png">
<title>cozy cafe</title>
<link href="cafe.css" rel="stylesheet" type="text/css" media="all">

<link href="https://fonts.upset.dev/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/chalkduster" rel="stylesheet">

</head>
 <body>

<div class="container">

<div class="large">
<h1>About this</h1>
<p>This is a modular layout with a bunch of different boxes you can combine and arrange to suit your preferences! Ideally, this gives you a bunch of flexibility without you needing to do any CSS if you don't want to!</p>
 
<p>There are 4 sizes of box: small, medium, half, and large.</p>

<p>Boxes can be customized by adding additional classes: short, reverse, borderless, tiltright, tiltleft, empty, taped, and picturebox!</p>

<p>There's additionally a simple gallery setup for displaying lots of pictures.</p>

<p>On this demo page I've put examples of every kind of box. Sorry if it's a little overwhelming or too much information... you can experiment with different combinations of boxes to see what you like!</p>

<p>This layout works on mobile & is javascript-free.</p>

<p>This was going to be for the 32-bit Cafe Tea Party jam, but I thought it wasn't really coffee- or tea-related enough to justify submitting it....</p>

<hr>

<h1>Filler text</h1>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<button>Button.</button>

</div>

<div class="small">
<h2>small</h2>
<p>A basic "small" div. It takes up a third of the width of the container.</p>
</div>

<div class="medium">
<h2>medium</h2>
<p>This is a "medium" div. It takes up two-thirds of the width of the container!</p>
</div>

<div class="half">
<h2>half</h2>
<p>A "half" div will take up half the width.</p>
</div>

<div class="half short">
<h2>half short</h2>
<p>For a short box, add the "short" class! A box can have multiple div classes, like this one here.</p>
</div>

<div class="small reverse">
<h2>reverse</h2>
<p>For a div with the background color as the text color and the text color as the background color, add the "reverse" class.</p>
</div>

<div class="small borderless">
<h2>borderless</h2>
<p>For a box with no visible borders, add the "borderless" class!</p>
</div>

<div class="small tiltright">
<h2>tilt</h2>
<p>To put a div at a jaunty little tilt to the right (like this one!), add the class "tiltright". For the same but to the left, do "tiltleft".</p>
</div>

<div class="small empty">
<h2>Empty</h2>
<p>If you add the "empty" class, it won't have a background color. Combine with "borderless" to make an invisible div!</p>
</div>

<div class="medium taped">
<h2>taped</h2>
<p>You can add a little bit of tape to a div by adding the "taped" class! This also gives it a very slight shadow. Be aware that "taped" divs can't scroll if you put too much text in them, though!!</p>
</div>

<div class="small">
<h2>images</h2>
<p>Add the class "picturebox" to a div if you want an image inside of it to fill the whole box. On the left is an example of a medium picturebox! The image will be resized and cropped by the CSS.</p> 
<p>This works with big images and with small images. Try swapping between these two, if you want to see what that looks like. (the first one is very small, the second one is very big; they'll both be resized to fill the box!)</p>

</div>

<div class="large short">
<h2>gallery</h2>
<p>One more thing! A little 4-column gallery snippet for you, if you want it. Put an approximately equal number of images in four column divs and voila!</p>
<p>On mobile, it'll switch to 2 columns.</p>
</div>

<div class="gallery">
<h2>cool placeholder wizards</h2>

</div>

</div>

</div>

</div>

<div class="footer">
<h1>cozy cafe</h1>
<ul>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
        <li><a href="">link</a></li>
</ul>
</div>

</body>
</html>

CSS

/* CUSTOMIZING ZONE!

here you can change the colors and the font for the page without needing to mess around with the rest of the CSS :)

first are the colors: */

:root {
    --pagebackgroundcolor: #4a0000;
    --divbackgroundcolor: #26170e;
    --textcolor: #faeac1;
    --linkcolor: #bc3a0f;
    --highlightcolor: #cd9000;

}

/* and these are the two fonts: */

body {
    font-family: 'Noto Sans', sans-serif;
    font-size: 10pt;
}

h1,h2,h3,h4 {
    font-family: 'Chalkduster', sans-serif;
}

/* add a background image if you want! */

body {
    background-image: url();
}

/* down here is the rest of the layout's CSS! */

* {
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: var(--divbackgroundcolor) var(--highlightcolor)
}

::selection {
    background-color: var(--highlightcolor);
    color: var(--divbackgroundcolor);
}

body {
    background-color: var(--pagebackgroundcolor);
    color: var(--textcolor);
}

img {
    max-width: 100%;
}

a {
    color: var(--linkcolor)
}

a:hover,
a:focus {
    color: var(--highlightcolor)
}

a:visited {
    color: var(--linkcolor);
    filter: brightness(50%);
}

button {
    background-color: var(--divbackgroundcolor);
    border: 1px outset var(--textcolor);
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    padding: 10px;
    cursor: pointer
}

button:hover,
button:focus {
    border-color: var(--highlightcolor)
}

button:active {
    border: 1px inset var(--highlightcolor)
}

blockquote {
    border-left: 3px solid var(--highlightcolor);
    padding-left: 15px;
    border-radius: 15px;
}

hr {
    width: 70%;
    border: 1px solid var(--highlightcolor);
}

h1,
h2,
h3,
h4 {
    margin: 0;
    margin-bottom: 10px;
}

/* this is the container that holds the whole layout. */

.container {
    margin: 30px auto;
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: 20px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 150px;
}

/* these are the regular div boxes. */

.large,
.small,
.medium,
.half {
    border: 1px solid;
    background-color: var(--divbackgroundcolor);
    padding: 15px;
    overflow: auto;
    scrollbar-width: thin;
    position: relative;
    height: 300px;
}

.large {
    width: 100%;
    height: 500px;
}

.small {
    width: calc(33% - 10px);
}

.medium {
    width: 66%;
}

.half {
    width: calc(50% - 5px);
}

/* here are all the fancy optional box types! */

.short {
    height: 150px;
}

.reverse {
    background-color: var(--textcolor);
    color: var(--divbackgroundcolor);
}

.borderless {
    border: none;
}

.tiltright {
    transform: rotate(3deg)
}

.tiltleft {
    transform: rotate(-3deg)
}

.empty {
    background-color: transparent;
}

.taped {
    overflow: visible;
    position: relative;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
}

.taped::before {
    content: " ";
    background-color: rgba(255, 250, 238, 0.4);
    height: 45px;
    width: 40%;
    position: absolute;
    top: -20px;
    left: 30%;
    clip-path: polygon(100% 0%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 100% 100%, 0% 100%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0px 76%, 0px 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0px 10%, 1% 6%, 0% 0%);
    pointer-events: none;
}

.picturebox {
    padding: 0;
    overflow: hidden;
    background-color: transparent;
}

.picturebox img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* end of fancy optional box types */

/* this is the fixed footer that holds the navigation links! */

.footer {
    height: 75px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    background-color: var(--divbackgroundcolor);
    border: 1px solid var(--textcolor);
    left: 0;
    transition: .5s;
}

.footer h1 {
    font-size: 40pt;
    margin-top: -55px;
    color: var(--textcolor);
    text-align: center;
}

.footer ul li {
    display: inline;
}

.footer ul {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 0;
    padding-top: 3px;
    margin: 0;
    font-size: 12pt;
}

.footer a {
    color: var(--textcolor);
}

.footer a:hover,
.footer a:focus {
    color: var(--linkcolor)
}

/* end of footer */

/* here's the stuff for the gallery div! */

.gallery {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    overflow: auto;
}

.gallery h2 {
    width: 100%;
}

.gallery img {
    margin-top: 5px;
    border: 1px solid;
}

.column {
    width: 25%;
    padding: 5px;
}

/* end of gallery div! */

/* this is the styling for small screens/mobile! */
@media only screen and (max-width: 500px) {

.container,
    .small,
    .medium,
    .half {
        width: 100%
    }

.column {
        width: 50%;
    }
}

Boko

boko is an ereader-inspired layout meant for longform text! it is mobile-friendly and comes with a small options menu where you can give readers alternate fonts and a bigger font size. it uses only a bit of javascript for the options menu. not much going on here really; just a plain n simple look for when you want to make the text the focus and shift everything else out of the way.

HTML

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<html lang="en-US">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Boko Layout</title>
<link href="boko.css" rel="stylesheet" type="text/css" media="all">

<link href="https://fonts.upset.dev/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
        
</head>
 <body>
 

<header tabindex="0">
<h1>Boko</h1>
<h2>A Layout for Reading</h2>
</header>

<div class="options" tabindex="0">
<span class="tab">⚙︎</span>

<p>These are some options. They use JavaScript.</p>
<p>
<label for="fontFamily">Font:</label>
<select name="fontFamily" id="fontFamily">

<option value="Libre Baskerville">Serif (Libre Baskerville)</option>

<option value="Nunito Sans">Sans Serif (Nunito Sans)</option>

<option value="EXACT FONT NAME">A third font</option>

</select>
</p>
<p>
    <button onclick="emBiggen()">bigger text</button>
    <button onclick="neverMind()">never mind</button>
</p>
</div>

<nav tabindex="0">

<h2>navigation</h2>
<ul>
<li><a href="">table of contents</a></li>
<li><a href="">home</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
<li><a href="">link</a></li>
</ul>

</nav>

<section class="epigraph" tabindex="0">
    <p>I don’t know if you have had the same experience, but the snag I always come up against when I’m telling a story is this dashed difficult problem of where to begin it. It’s a thing you don’t want to go wrong over, because one false step and you’re sunk. I mean, if you fool about too long at the start, trying to establish atmosphere, as they call it, and all that sort of rot, you fail to grip and the customers walk out on you.</p>
    <p class="credit">- Bertie Wooster</p>
</section>

<section class="book" tabindex="0">
<h1>About Boko</h1>

<p>Boko is a tidy text-focused layout made for reading stories, books, or long articles. Long-form text. Navigation and options are both tucked away but fixed with scroll, to keep them accessible without distracting from the main text body. Hopefully. This layout should work on any screen size.</p>

<p>The Javascript options (top right corner) let readers switch the font and text size a bit for additional reading comfort.</p>

<p>Navigation is to the left on larger screens and on the bottom on smaller ones.</p>

<p>This demo is using 2 fonts from googlefonts via fonts.upset.dev; you might want to upload your fonts to your site.</p>

<p>The font picker code is by <a href="https://pastebin.com/u/punkwasp/1/T9knsFhz">punkwasp</a>!</p>

<p>

<h2>Header Level 2</h2>

<ol>
 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>This is a blockquote.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ul>

<pre><code>
    #header h1 a {
      display: block;
      width: 300px;
      height: 80px;
    }
    </code></pre>

<button>Button</button>
</section>

function emBiggen() {
        document.body.style.fontSize = "17pt";

};

function neverMind() {document.body.style.fontSize = "11pt";}

</script>

</body>
</html>

CSS

/* change the colors here!

the page background is set to "light", and the text body background is "lightest".

the background of the navigation and options tabs is a transparent version of lightest, hence "translightest". 
"black" is the offblack text color. "shadow" is the color of the boxshadow.

:root {
    --light: #cdb79f;
    --lightest: #d6c2ad;
    --translightest: #d6c2addf;
    --link: #512800;
    --black: #171411;
    --shadow: #917b654e;
}

*,
*::after {
    box-sizing: border-box;
    scrollbar-color: var(--link) var(--lightest);
}

::selection {
    background-color: var(--black);
    color: var(--light)
}

body {
    background-color: var(--light);
    color: var(--black);
    font-family: "Libre Baskerville", serif;
    font-size: 11pt;
}

h1,
h2 {
    line-height: 1;
    margin-top: 10px;
}

a {
    color: var(--link);
    font-weight: bold;
}

a:hover,
a:focus {
    filter: brightness(200%);
}

blockquote {
    border-left: 2px solid var(--link);
    padding-left: 10px;
}

select,
option {
    background-color: inherit;
    border: 1px solid;
    font: inherit;
}

button {
    font-family: inherit;
    background-color: inherit;
    border: 1px solid;
    border-radius: 10px
}

button:hover,
button:focus {
    box-shadow: 2px 2px var(--shadow);
}

button:active {
    box-shadow: 2px 2px var(--shadow) inset;
}

pre,
code {
    background-color: var(--black);
    color: var(--lightest);
}

img {
    max-width: 100%;
}

.book {
    max-width: 800px;
    line-height: 1.4;
    font-weight: 400;
    box-shadow: 1px 2px 5px var(--shadow);
    padding: 20px;
    margin: 50px auto;
    background-color: var(--lightest);
}

.tab {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    transition: 1s;
    color: #7d6e5f;
}

nav,
.options {
    position: fixed;
    box-shadow: 3px 3px 10px #917b657a;
    padding: 10px;
    background-color: var(--translightest);
    backdrop-filter: blur(3px);
    transition: 1s;
}

nav {
    top: 30%;
    left: -200px;
    width: 200px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

nav h2 {
    font-size: large;
}

nav:hover,
nav:focus {
    left: 0px;
}

nav .tab {
    right: -20px;
    top: 30%;
    width: 20px;
    height: 50%;
    padding-right: 5px;
    padding-left: 5px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 10pt;
}

nav .tab:hover,
nav:hover .tab,
nav.tab:focus,
nav:focus .tab {
    opacity: 0;
}

.options {
    position: fixed;
    top: -100px;
    right: 5px;
    height: 100px;
    font-size: 10pt;
}

.options:hover,
.options:focus {
    top: 5px;
}

.options .tab {
    bottom: -40px;
    right: 0px;
    font-size: 24pt;
    border: none;
}

.options p {
    margin: 5px
}

.epigraph {
    width: 50%;
    font-style: italic;
    margin: 50px auto;
    max-width: 700px;
}

.credit /*this is just for the quote attribution for the epigraph*/ {
    text-align: right;
    font-style: normal;
    font-size: smaller;
}

/* smaller screen styling */
@media only screen and (max-width: 800px) {

nav {
        top: unset;
        bottom: -100px;
        left: 0;
        width: 100%;
        height: 100px;
        border-radius: unset;
    }

nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

nav:hover,
    nav:focus {
        bottom: 0;
    }

nav .tab {
        right: unset;
        left: 25%;
        width: 50%;
        top: -20px;
        height: 20px;
        padding-right: 5px;
        padding-left: 5px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 0px;
        background-color: var(--translightest);
        backdrop-filter: blur(3px);
    }

nav #symbol {
        transform: rotate(270deg)
    }
}

@media only screen and (max-width: 500px) {
    .epigraph {
        width: 90%;
    }

}

Navigation

Navigation

Layout Categories

90s

Brittany

Spice

00s

Millennium

Golden Age

Xtreme

10s

Shoelaces

20s

Quopyright

Indeed Web

Cardio

general

milk crate

camellia

pre-dawn coffee

cozy cafe

Boko