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

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>

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

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

Quopyright Layout

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

Table Of Contents

90s

Brittany Layout

Spice Layout

00s

Millennium Layout

Xtreme Layout

10s

Shoelaces Layout

20s

Quopyright Layout