Intro and Header

Ahem, welcome to my very first template I'm like ... fully making to share with others, so please excuse any roughness or lack of clarity. If you'd like to see a fully 'edited' version of this template, check out my example (which will have links to a cool calendar).

I will now show you how to use the most common HTML text elements: This is bold text. This is also bold text. This is italic text. This is also italic text. This is strikethrough text. This is underlined text. This is a link. This is a link that will open in a new tab. This is code (displayed in a monospace font). This is an abbreviation (Try hovering over it). This is highlighted text. This is a line break (The br stands for break.):
It's different from a paragraph because it does not add space inbetween the lines of text.

This is a paragraph. As you can see, there's a bit of space between it and the previous paragraph.

And this is a divider! You can also add a cool drop shadow to images using .image-shadow

Some of the features of this template include:

  • A decorative border to add to images using .image-deco
  • Outgoing links having an arrow attached to them
  • A marquee with an adjustable scroll speed (thanks to Salarua!)
  • A scrollable area you can place anywhere (and can change the size of by using inline CSS to just set it off the default 200px)
  • Colour variables + system-respecting dark mode colours
    • Also variables for changing the size of the whole website itself! It's currently at 900px
    • You can also swap out the headers based on dark/light mode, and change their heights!
  • Focus elements + skip to content
  • A mobile friendly layout + a mobile navigation with a dropdown toggle to hide/show the buttons
  • Helper classes like .hide-mobile and .hide-desktop to easily enable/disable mobile-specific and desktop-only things (if you're on mobile, you may see a box only meant for you!), and others like .center-item, .float-img-right (which on mobile will turn it to a non-floating item)

Some Javascript is included, though it's mostly for going back to the top of the site, and the mobile toggle for the nav.

Heading 2

This is a simple third of a box and you can keep writing here and keep going on too.

You can add whatever images you wanna do too!! Just make sure you go beyond the image if you wanna add more stuff like identity buttons and what not. It's funky as hell tho if your text doesn't go beyond the float. ... or if there's weird spacing.

Heading 3 + Credits

The image below shows how .image-shadow works! You can apply it to any image you'd like.

No I don't know either why I included one of my dragons here.

Scrollable Section

  • Date: wow cool update goes here
  • Date: wow cool update goes here
  • Date: wow cool update goes here
  • Date: wow cool update goes here
  • Date: wow cool update goes here
  • Date: wow cool update goes here

This is a box to test various inputs like dropdowns + text areas

Hi! I'm a box that only appears on mobile! I will not be here on desktop! 😳

Gallery

Wow look it's a little mini gallery you can use to show whatever images you wanna show!! It's currently set to 20% per image (so 5 images per row, but you can edit .image-gallery for that. Also a cool example of a full-width image below!

This is a full-width box
This is a half-width box
This is a half-width box
This is a third-width box
This is a two thirds-width box
This is a three quarter-width box
This is a quarter-width box