Intro and Header

If you'd like to see a fully 'edited' version of this template, check out my example.

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 an internal link. This is a link that will open in a new tab and site. 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 glow to images using .image-glow

Some of the features of this template include:

• A decorative border to add to images using .image-deco (and the glow mentioned above)
• 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 sidebar + content! Currently it's at 250px for the sidebar and 700px for the main content
• Pixel decorations for H1 and H2 which you can swap out using variables
• 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, and .float-img-left (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.

Heading 2

Wow look it's a little mini gallery you can use to show whatever images you wanna show!!

These are multiple images in a row:

Here's a full width image!

Heading 4

Here are two columns:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

At vero eos et accusam et justo duo dolores et ea rebum.

Cool Update: words words words

Here's a cool area that can scroll as you write more in it; it's set to be at 200px by default but you can easily change that in the CSS or in the HTML directly!

You can use this to dedicate to your updates, or anything else like webrings and what not.

Heading 5

<div class="two-columns">
    <div>
        <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
        <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
    </div>
</div>

Heading 6

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorp

Selection Option 1 Option 2 Option 3

Textarea

Button