Welcome to Gus's Template Site!
Have you ever wanted to make a website?
With Neocities, it's free and I bet it's easier than you're expecting! You have to learn a little bit of code, but I've put together this template site to make that part easier!
When you make a Neocities account, you're given a default HTML and CSS file. The HTML file is the bones of the website, and the CSS is the skin. Below, I've made some changes to those basic files to make them slightly less basic, inlcuding by making them mobile-responsive. According to Statista, 62.54% of global website in 2025 came from mobile devices!
Code to Copy
To copy the format of this site, you will need to copy/paste HTML code for the content of the site into the your index.html file and CSS code for the styles into your style.css file.
This is the HTML code that should replace everything in the index.html file:
<!-- This is a comment! It's not read by your browser. You can toggle any line in your
code into a comment by pressing Ctrl + / -->
<!-- This next section is the <head> of your website. It's metadata! You can tell where
it starts by the opening tag <head> and the closing tag <!/head>. the Everything in
between is indented to help your human eyes quickly see where it starts and ends.
To change the indentation, you can press Tab to indent and Shift + Tab to un-indent.-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- You can change the text in the <title> tag below to change your website's name on
the browser tab! Make sure you press save (or Ctrl + s) after any changes, then refresh
the view of your website by pressing Ctrl + Shift + R -->
<title>
My Website
</title>
<!-- The style.css file in the <link> tag below sets how the different HTML elements
will look on your website. The "/" tells the browser to look for the file in your
home directory/folder. You can have one CSS file for all your pages, or a different
file for each page! -->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<!-- Everything below will be the parts of your website that you see on the page! -->
<body>
<!-- A <div> is a basic element to hold other elements. You can set a class to change
the <div>'s style. More on this later!-->
<div class="holy-grail-flexbox">
<!-- Header -->
<header class="header">
Header
</header>
<!-- Main Content -->
<main class="main-content">
<div class="bordered">
<h1>
Welcome to my Website!
</h1>
<p>
This is a paragraph! Here's how you make a link:
<a href="https://neocities.org">Neocities</a>.
This is another sentence!
</p>
</div>
<div class="bordered">
<h2>
This is a slightly smaller header
</h2>
<p>
This is another div, which is an HTML element used to separate content.
</p>
<p>
Here's how you can make <strong>bold</strong> and <em>italic</em> text.
</p>
<p>
Here's how you can add an image:
</p>
<img src="/neocities.png" alt="Site hosted by Neocities">
<p>
Here's how to make a list:
</p>
<ul>
<li>First thing</li>
<li>Second thing</li>
<li>Third thing</li>
</ul>
<p>
To learn more HTML/CSS, check out these
<a href="https://neocities.org/tutorials">tutorials</a>!
</p>
</div>
</main>
<!-- Left Sidebar -->
<section class="left-sidebar">
<div class="bordered">
<p>
Here are some places you can explore for website graphics:
</p>
<ul>
<li>
<a href="https://www.nasa.gov/images/">NASA Images</a>
</li>
<li>
<a href="https://blinkie.world/home">blinkie.world</a>
</li>
<li>
<a href="https://malsgraphiclibrary.straw.page/">Miles' Graphic Library</a>
</li>
<li>
<a href="https://decohoard.carrd.co/">decohoard</a>
</li>
<li>
<a href="https://blog.spacehey.com/entry?id=1165736">spacehey.com</a>
</li>
</ul>
</div>
</section>
<!-- Right Sidebar -->
<section class="right-sidebar">
<div class="bordered">
Right sidebar
</div>
<div class="bordered">
<p>
Here's a cool NASA image! To make clicking the image take you to the original site,
we put the image tag (<img>) inside a link tag (<a>):
</p>
<a class="fit"
href="https://www.flickr.com/photos/nasawebbtelescope/55150964901/"
title="Messier 101 (Webb+Hubble)" target="_blank">
<img src="https://live.staticflickr.com/65535/55150964901_3242bd1595_3k.jpg"
alt="Messier 101 (Webb+Hubble)"/>
</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="centered">
<p>
This website was created with help from
<a href="https://gusbus.space">
Gus Becker
</a>, based on the
<a href="https://matthewjamestaylor.com/holy-grail-layout#flexbox">
Holy Grail Flexbox Layout
</a>.
</p>
</div>
</footer>
</div>
</body>
You will probably notice that your new website doesn't look exactly like this one! There are certain elements I have left out from the initial code to make it easier to follow what's going on. You can find the code for the elements I left out (like the navigation bar and header/banner image) over at More Elements.
This is the CSS code that replaces everything in the style.css file:
/* This is what a comment looks like in CSS! */
/* CSS is how you style the HTML elements of your website. You can change colors, fonts, and
the positioning of your HTML content. To learn how to do something, just try searching Google
like "css change link color". */
/* set correct box model */
* {
box-sizing: border-box;
}
body {
background-color: white;
color: black;
font-family: Verdana;
margin: 0px;
}
.bordered {
border: 1px solid black;
margin: 5px;
padding: 10px;
}
.fit img {
width: 100%;
height: auto;
}
.centered {
text-align: center;
}
/* flexbox container */
.holy-grail-flexbox {
display:flex;
flex-wrap:wrap;
}
/* columns (mobile) */
.holy-grail-flexbox > * {
width:100%;
padding:1rem;
}
/* background colors */
.header {
background: orangered;
}
.main-content {
background: white;
}
.left-sidebar {
background: gold;
}
.right-sidebar {
background: lawngreen;
}
.footer {
background: cornflowerblue;
}
/* tablet breakpoint */
@media (min-width:768px) {
.left-sidebar,
.right-sidebar {
width:50%;
}
}
/* desktop breakpoint */
@media (min-width:1024px) {
.header {
order:-2; /* header first */
}
.left-sidebar {
/* left sidebar second (first in second row) */
order:-1;
}
.main-content {
width:50%;
}
.left-sidebar,
.right-sidebar {
width:25%;
}
}
