premade layouts!

90s

Brittany Layout

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 Layout

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 Layout

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;
}

Xtreme Layout

not done yet!!

HTML

CSS

10s

Shoelaces Layout

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>the music player is from <a href="https://www.scmplayer.net/">here</a>; remember to set up your own music and don't just stick with cosmic love. ...unless you want to, it's a good track.</p>
<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

Gleepgloorp Layout

not done yet!!!!!!!

HTML

CSS

Table Of Contents

90s

Brittany Layout

Spice Layout

00s

Millennium Layout

Xtreme Layout

10s

Shoelaces Layout

20s

Gleepgloorp Layout