Free Stuff

this page is basically just here to host free site templates/themes i don't mind people using. if get the stable resources to upgrade to a Neocities supporter, they'll likely move to being hosted onsite for simplicity's sake.

you don't have to ask before you use my stuff, but if you do like something and/or use it somewhere, I'd love to hear about it! if you're on Neocities, feel free to drop a comment there.

everything on this page is free to use and edit, but if you'd like to drop me a few pennies for it, you can use Ko-Fi.

CSS/HTML Templates

Please credit me if anyone asks! A link back to this page is included in most of my themes - you're allowed to move it or remove it, and edit these sites as much as you like - just remember to help others find their footing and toss them a link back here if they ask. Simple free stuff like this is how I learned to use HTML myself, and I'd like to pay that forward.

If you notice anything broken, email me about it so I can fix it!

If my code comments contribute to a wrong understanding of how something works, please get in touch. I'm a newbie sharing what I think is what I've learned - and I learned by websearching. Thank you, and I hope this stuff is helpful to someone.

FLOATY ANIMATION

A small, super-simple HTML/CSS combo that shows how to make stuff gently bob up and down, similar to my splash page. Includes comments that you can look at in the code. The idea is you look at the HTML and compare it to the CSS and go, "oh, I think I see how that fits together!" If you need help figuring out how to animate something a different way, you'll have to search that for yourself. Sorry!

Download .rar

CHARACTER CARD

A character profile template, complete with an inventory section with hover tooltips.

This could probably be used as a quirky personal bio page, too.

Live Preview

CSS

HTML

/* --- CSS CHARACTER TEMPLATE "TRIGHTS" by GOODMODE --- */
/* Feel free to change colours, borders, fonts, etc. as you see fit. */
/* Please don't remove the credit link. This code is free to use, edit, and mangle - the credit is there to let others find it too! */
/* P.S. Trans rights! */

.charcard {
	background-color: #fff;
	border: 5px solid #BABABA;
	border-radius: 15px;
	width: 920px;
	margin: 10px;
	padding: 15px;
}

.charcard ::selection {
	background: #252525;
	color: #fff;
}

.charcard b {
	color: #252525;
	text-shadow: 2px 2px 5px #BABABA;
}

.charcard i {
	color: #707070;
}

.charcard td#refpic {
	background-repeat:no-repeat;
	width: 300px;
	border: 5px solid #252525;
	border-radius: 15px;
	background-size: 300px;
	padding: 0px;
}

.charcard td#stats {
	text-align: center;
	vertical-align: top;
}

.charcard h1#chname {
	font-family: 'Bebas Neue', cursive;
	font-size: 2.5em;
	text-shadow: 2px 2px 5px #252525;
	margin: 10px 0px 0px 0px;
}

.charcard h1#chinfo {
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	font-style: italic;
	margin: -10px 0px 0px 0px;
}

.chbio {
	max-height: 260px;
	overflow: auto;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9em;
}

.chbio p {
	padding: 0px 25px 5px 25px;
}

.invheader {
	margin: 0px 0px -80px 30px;
	padding: 0px;
	font-family: 'Bebas Neue', cursive;
	font-size: 2em;
	text-shadow: 2px 2px 5px #252525;
	color: #252525;
}

.inventory {
	margin: 60px 0px 0px 0px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px;
	background-color: #F1F1F1;
}

.inventory img {
	width: 100px;
	height: 100px;
}

.invslot {
	width: 100px;
	height: 100px;
	margin: 10px;
	padding: 5px;
	text-align: center;
	background-color: #F1F1F1;
}

.invslot:hover {
	background-color: #fff;
}

#invtooltip {
	display: none;
	background: #fff;
	border: 1px solid #BABABA;
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px -60px;
	min-width: 200px;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.7em;
	position: relative;
	z-index: 99 !important;
}

.charcard a:hover + #invtooltip {
	display: block;
}

.charcredit {
	font-family: 'Bebas Neue', cursive;
	font-size: 0.7em;
	line-height: 0px;
	color: #fff;
	text-align: right;
	text-shadow: 1px 1px 1px #BABABA;
}

.charcredit a {
	color: #fff;
	text-decoration: none;
}

.charcredit a:hover {
	color: #252525;
}

/* --- END OF CHARACTER CARD CODE --- */

</head>

<body>

<table>
		<tr height="400px">
			
			<td id="refpic" style="background-image: url('img/charcardtest.png');"></td>
			
			<td id="stats">
				<h1 id="chname">Character Name</h1>
				<br>
				<h1 id="chinfo">They/them   |   Human   |   Shitpost Wizard</h1>
				<br>
				<div class="chbio"><p><b>O Sphinx of black quartz, judge my vow!</b> Lorem ipsum dolor sit amet, <i>consectetur adipiscing elit,</i> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <b><i>Ut enim ad minim veniam,</i></b> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
			</td>
			
		</tr>
	</table>

<div class="invheader">INVENTORY</div>
				
				<div class="inventory">
				
					<div class="invslot">
						<a><img src="img/gallery/turoplush.png"></a>
						<div id="invtooltip">
							<b>CREEPY DOLL</b>
							<br>
							<i>Why would anyone want this.</i>
						</div>
					</div>
					
					<div class="invslot">
						<a><img src="img/404.png"></a>
						<div id="invtooltip">
							<b>ERROR 404</b>
							<br>
							<i>Item not found! Did someone steal it?</i>
						</div>
					</div>
					
					<div class="invslot">
						<a><img src="img/gallery/chumug.png"></a>
						<div id="invtooltip">
							<b>CUP OF CHU</b>
							<br>
							<i>Stir gently.</i>
						</div>
					</div>
				
				</div>
				
				<div class="charcredit"><a href="http://goodmode.neocities.org" target="_blank">Template by GOODMODE</a></div>
	</div>

Sparklehorse

A simple static site layout with soft colours, a navigation menu on the right, and some sparkly links.

Content wraps around the float menu. Some webkit outlines/gradients to experiment with.

CSS

HTML

/* SPARKLEHORSE by GOODMODE */
/* http://goodmode.neocities.org/ */

/* NAVIGATION MENU */
/* This is the menu box with the pagetitle and links in it,
	as well as a picture of Princess Celestia from MLP:FiM.
	You can remove/replace her in the HTML file! */
	
	body {
	background-color: #dcd8dc;
	font-family: Georgia;
}

div.nav {
	float: right;
	width: 300px;
	margin: 10px 20px 10px 10px;
	background-color: #ffffff;
	border-radius: 50px;
	border: 5px solid #d4a2e3;
	text-align: center;
}

div.nav img {
	width: 200px;
	height: auto;
	border-radius: 20px;
	border: 10px solid #e5c87b;
}

/* MAIN CONTENT */
/* This is where all your site text and content goes.
	This is a very simple layout intended for small sites,
	so there's not much flashy about this - just a styled
	paragraph, header, and links. */

div.content {
	padding: 5px 10px 10px 10px;
	background-color: #fff;
	margin: 10px 10px 10px 10px;
}

h1 {
	font-family: Bookman Old Style;
	color: #e5c87b;
	font-size: 25px;
	letter-spacing: 3px;
	-webkit-margin-after: 0px;
	-webkit-margin-end: 0px;
	background: -webkit-linear-gradient(#725d27, #e5c87b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

div.content p {
	text-indent: 1em;
	color: #342538;
}

/* GENERAL LINKS */
/* This bit styles the links on your site so that they show up nicely in a body of text. */

a:link, a:active, a:visited {
	color: #9f58b3;
	text-decoration: none;
}

a:hover {
	color: #853d99;
	background-image: url('sparkle.gif')
}

/* NAVIGATION MENU LINKS */
/* This bit styles the links on your menu so they look different to regular text links. */

div.nav ul {
	list-style-type: none;
	text-shadow:
		1px 1px 0 #c7a03a,
		1px 1px 0 #c7a03a,
		1px 1px 0 #c7a03a,
		1px 1px 0 #c7a03a;
	width: auto;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

div.nav li {
	height: 20px;
	background-color: #e5c87b;
	border-radius: 10px;
	text-align: center;
}

/* FOOTER */
/* This is a bar that shows up at the bottom. I use mine for credits and contact info, but
	you could probably use it for affiliates or something else.
	Feel free to move the linkback to GOODMODE, but please do link back
	SOMEWHERE that people can find... I learned to code from freebies like this,
	and I want to pay it forward! */
	
div.footer {
	background-color: fff;
    background-color: rgba(255,	255,	255, 0.6);
	padding: 10px 10px 10px 10px;
	margin: 10px 10px 10px 10px;
	font-size: 0.8em;
	text-align: center;
}

/* some colour codes in case you want to continue the princess horse theme */
/* crown: #e5c87b   gems: #9f58b3     hairgreen: #69c7a2   hairblue: #4ab3ce   hairpurple: #6295e2   hairpink: #d4a2e3  */
/* sunorange: #d4a2e3    sunyellow: #e1d38b */

<html>

<head>
<title>this is a pagetitle</title>
<link rel="stylesheet" href="sparklehorse.css" type="text/css">
</head>

<div class="nav">
<h1>Sparkle Horse</h1><br><center><img src="celestia.png"></center>
<p>this is the navigation menu. you could write a bio or just put subheaders here</p>
<ul><li><a href="http://www.google.co.uk">google</a></li><li><a href="http://crouton.net/">crouton</a></ul>
</div>

<body>

<div class="content">
<p>Lorem ipsum dolor sit amet. The quick brown <a href="http://www.google.co.uk">fox</a> jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack. Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack.</p>
<p>some other stuff. i dunno. <b>megatron</b> is a <i>memelord,</i> etc etc</p>
<h1>this is a header</h1>
<p>spyro 1 was a hell of a game!!!</p>
<h1>filler text spam to test a longer page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="footer">
layout by <a href="https://goodmode.neocities.org/">GOODMODE</a>
</div>

</body>

</html>

Clutter

A simple static site layout with a float menu and flex boxes that will wrap if the browser size is changed.

Kind of a rush job but maybe someone out there will get some use out of it.

CSS

HTML

/* CLUTTER by GOODMODE */
/* http://goodmode.neocities.org/ */

/* BODY */
/* This determines the page background and the base font size.
	Feel free to change it, but please, PLEASE, I am begging you,
	don't make it like 8px. Tiny fonts kill me and everyone else.
	I MAY HAVE A VENDETTA... */

body { 
	background-color: #EDEDED;
	font-size: 18px;
	color: #4a4a4a;
	margin: 30px;
}

/* PAGE CONTENT CONTAINER */
/* This is the div that contains all the good stuff.
	It doesn't look like much on its own, but it lets you
	control the flexy layout and makes sure everything goes
	in the right place. */

.content {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

/* NAVIGATION MENU */
/* This is the menu box with the pagetitle and links in it,
	as well as a picture of Tomoko from Watamote.
	You can remove/replace her in the HTML file! */

.nav {
	float: left;
	position: relative;
	max-width: 250px;
	min-width: 200px;
	padding: 10px 10px 10px 10px;
	background-color: #fff;
	text-align: center;
	border-radius: 10px;
	background-image: url('texture.jpg');
	color: #ffffff;
	font-family: 'Courier New';
}

.nav img {
	width: 100px;
	border-radius: 100px;
}

.nav ul {
	list-style-type:none;
	margin:0;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0px;
	padding-right: 0px;
	background: rgba(0,0,0,0.7);
	border-radius: 10px;
}

.nav a:link, a:active, a:visited, a:hover {
	font-weight: normal;
}

.nav li:hover {
	background-image: url('texture.jpg');
}

/* CONTENT BOXES */
/* This bit controls what those white boxes full of text look like.
	You could change the colour, the font, round off the corners,
	or whatever you prefer. */

.box {
	margin: 20px;
	background: #fff;
	padding: 10px 30px 10px 30px;
	max-width: 600px;
}

/* GENERAL PAGE LINKS */

a:link, a:active, a:visited, a:hover {
	font-weight: bold;
	text-decoration: none;
	text-shadow: 
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	text-transform: uppercase;
	color: #ffffff;
}

/* HEADERS */

h1 {
	font-family: 'Courier New';
	font-size: 2em;
	color: #ffffff;
	font-weight: bold;
	text-shadow: 
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	letter-spacing: 4px;
	-webkit-margin-before: 0px;
	-webkit-margin-after: 0px;
}

/* PARAGRAPHS AND BOLD/ITALICS ETC */

p {
	font-family: 'Courier New';
	color: #000;
}

b {
	font-weight: bold;
	color: green;
}

i {
	color: 6a006a;
}

/* MAKE SURE IMAGES NEVER STRETCH THE PAGE */

img {
	max-width: 100%;
}

<html>

<head>
	<title>this is a title</title>
	<link rel="stylesheet" href="clutter.css" type="text/css">
</head>

<body>

<div class="nav">
	<h1>WHAT</h1>
	<br>
	<img src="coffee.png" title="describe the image here. this is a pic from Watamote">
	<p>you could put a description here or just use it for the navigation bar</p>
	<ul>
		<li><a href="http://www.google.co.uk">Google</a></li>
		<li><a href="http://crouton.net">Crouton</a></li>
		<li><a href="http://www.ascii-middle-finger.com/">🖕</a></li>
	</ul>
</div>

<div class="box">
		<p>Lorem ipsum dolor sit amet. The quick brown <a href="http://www.google.co.uk">fox</a> jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack. Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack.</p>
		<br><p>some other stuff. i dunno. <b>megatron</b> is a <i>memelord,</i> etc etc</p>
	</div>
	
	<div class="box">
		<p>Lorem ipsum dolor sit amet. The quick brown <a href="http://www.google.co.uk">fox</a> jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack. Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack.</p>
		<br><p>some other stuff. i dunno. <b>megatron</b> is a <i>memelord,</i> etc etc</p>
	</div>
	
	<div class="box">
		<p>Lorem ipsum dolor sit amet. The quick brown <a href="http://www.google.co.uk">fox</a> jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack. Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack.</p>
		<br><p>some other stuff. i dunno. <b>megatron</b> is a <i>memelord,</i> etc etc</p>
	</div>
	
	<div class="box">
		<p>Lorem ipsum dolor sit amet. The quick brown <a href="http://www.google.co.uk">fox</a> jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack. Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack.</p>
		<br><p>some other stuff. i dunno. <b>megatron</b> is a <i>memelord,</i> etc etc</p>
	</div>
	
	<div class="box">
		<p>Lorem ipsum dolor sit amet. The quick brown <a href="http://www.google.co.uk">fox</a> jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack. Lorem ipsum dolor sit amet. The quick brown fox jumped over the lazy dog. The grumpy wizards make toxic brew for the evil queen and Jack.</p>
		<br><p>some other stuff. i dunno. <b>megatron</b> is a <i>memelord,</i> etc etc</p>
	</div>
</div>

</body>

</html>