TEMPLATES + TUTORIALS
home

Information

Welcome to my templates! I just have a few things to share with you before we get into the templates themselves, if that's okay?

  1. Obligatory: I do not claim that the code displayed here is "easy", or even "good". It's simply code that I've used and has worked well for me, so there's likely issues with it regardless!
  2. I don't require credit at all. Whether you credit me or not is up to you, and as such, I haven't included a single coded credit within my templates. There is credit commented in the code, but I encourage you to remove this if you'd like! The internet, in my opinion, is for sharing. It feels a bit pompous for me to require credit for something I'd like to share with others (just personally speaking!).
  3. Feel free to copy my code from any of my other pages! I highly encourage sharing with others through inspecting element on my site and taking what you want/need!
  4. Edit, remove, add to, change, etc, whatever you'd like to any of the code here! The net is yours, do what you want and have fun with it!
  5. Reminder: While my stance on credit etc is as shown above, others will likely have different approaches to sharing with others. Please abide by their rules, and do not take my stance as a catch all stance.

That's all! Any questions, please email me at awhe.mail@proton.me

Please click through the tabs on the left to view the templates!


Archive relates to past index layouts that I've used.
Tutorials relates to snippets of code I've been asked about a lot!

Templates

Each template includes the code, an image preview, and a live preview!

tip: if you want to keep any of the boxes a certain height, then add "overflow:auto;" to the element!

"LAIN"

I remade my index on a whim and within 2 hours I had this template. I cleaned it up and stripped it down and added comments so that I can share it with you all! Mobile optimisation included, as well as it looking the same on both Firefox and Chrome. Zooming in or out doesn't break anything.

Posted: August 26th 2023
Live Preview
Code

"MELODY"

This template was made simply because I wanted to make something really cute and really pink. That's it. I ended up heavily editing it to use for my current (4th Aug 2023) index page anyway, but this version is just too cute...

Posted: August 4th 2023
Live Preview
Code

"VIBES"

Loved using the scanlines effect for my (7th July 2023) gamelog page so I thought I'd post a version for everyone :D ALSO: this one comes with mobile compatibility! Wahoo!

Posted: July 30th 2023
Live Preview
Code

"KONATA ZONE"

More testing out grids, and as of July 1st 2023 this layout is my current index page!

Posted: July 1st 2023
Live Preview
Code

"Crush"

Originally I was wanting to learn how to use grids in HTML, and then I wanted to make a new gamelog page. And then I thought: welp, might as well share this one too!

Posted: Jun 15th 2023
Live Preview
Code

"Original"

My very first template! I cleaned this code up for a friend and stripped it down a lot to be provided as a base. Personally, I've added a lot to it to use it as my current layout.

Posted: Jun 10th 2023
Live Preview
Code

Archive

Below is an archive of my past index codes! Listed as: the most recent is at the top

The Third

This is actually a more optimized version of previous code! I really enjoyed how compact and clean everything looks, but I grew bored of it rather quickly LOL. As per usual....

Live Preview

The Second

I think this code was the moment I realised that I was finally starting to understand a lot of what I was writing, as well as starting to have a lot more fun when it came to designing the look of this space! I still enjoy how nice and full the page looks, while still remaining simple and pleasing to my eye to look at. It was time for a change, though...

Live Preview

The First

My very first neocities layout! I really do love this one, especially how all the content is sitting in that bottom corner. However, as I extended my stay on this site I found that I was running out of the space this layout provided me and adding more to it just made it look messy. It's nice and simple, and a reminder of where I started!

Live Preview

Tutorials

Here are some snippets of code that you might find useful, as well as some explanations.

autoplay music | mobile compatibility

AUTOPLAY MUSIC

To add autoplay music, all you have to do is use the "audio" tag! Be sure to add autoplay and loop to the tag in order to have your music play upon the page loading! You can copy and paste the below code, just be sure to replace "AUDIOSOURCEHERE" with the link to your audio!

You'll want to put this tag within your BODY tags. I place mine right after < body >

Once you have the code placed where it needs to be you'll want to replace AUDIOSOURCEHERE with the actual source to your audio! In my case, I find youtube videos of the song I want to use, google youtube to mp3 and then download just the mp3 file. BE CAREFUL if doing this because many links you find in these results may include viruses, but I've had no trouble using them with ublock.

Once you have your audio file downloaded, you can either host the file on your website storage or do what I do, which is to upload the file to catbox.moe! Once it's uploaded and you replace "AUDIOSOURCEHERE" with the new audio link, your code should resemble something like this:

And... You're pretty much done!

SETTING THE VOLUME

The only other thing I could mention is a script I use to lower the volume of audio, because a lot of the audio I use is very loud and I don't want to hurt my visitors ears! I use it on this page too!

So, once you have all of the above added to your code, we can make some edits and additions :D! To start, we want to add a script that'll lower the volume of the autoplay music you add. You'll want to add this after < / style > and before < body >.

The script works with percentages too! So, for example, 0.5 or 50% both equal to half volume! You can, of course, make this lower (or louder) if you so desire. I find 0.1 / 0.2 comfortable for my listening pleasure :D

Then, you have to add two small things to the audio script we have above!
id="audio1" and onloadeddata="setHalfVolume()"

Adding the above will look like this:

This will make the audio autoplay, loop, and turn the volume down to whatever your desired amount is!

MOBILE COMPATIBILITY

Small heads up, I actually followed this tutorial for mobile friendly CSS to understand this topic myself, however, I must have read it about 50 times before I finally understood it LOL. So if you also read it and don't know what to do like me then I hope I can help you a little by explaining my own thought process!

From my understanding, we have to use the @media tag in CSS! That means somewhere between < style > and < / style > you should add: @media. But that's not all! We also want to add some other stuff to the @media query so that it knows what it's working with! It should end up looking something like... This!

Now, basically what this means is that any screen that is smaller than 640px in width will have different CSS rules applied to it, depending on what you type within the @media query brackets! You can change this numerical value if you want, but I don't recommend it. From what I've seen this is the most commonly used value, even if I don't know why :D But it works on my mobile so!

Within the @media query brackets, you should define which parts of your CSS will look different on a screen smaller than 640px! I'll provide a few examples so that it might make a little more sense to you.

The above code is the @media query CSS I use for this page! My original CSS looks like this:

Whereas, because I want it to look different on mobile, within the @media query brackets, it looks like this:

I'm declaring only the things I want to change which are the float property and the width. Everything else will stay the same as declared in the CSS unless otherwise specified!

In my experience, there shouldn't be much that you have to change. It's mostly just repositioning elements or otherwise removing them from sight on mobile. It does take a bit of trial and error, so I recommend having your phone open on the page you're editing while testing values and such to make sure it's working correctly! But to summarise: