Firstname Lastname

This is a notice box, to warn about stubs / spoilers / etc.
Show all spoilers / Hide all spoilers

Character Name

Basic Information
Full Name:	Firstname Lastname Nicknames Name ^(comment) Name ^(comment) Name ^(comment) Name ^(comment)
Age:	00
Born:	00 MONTH 19XX ZODIAC sun Arcadia, New Jersey
Death:	00 MONTH 20XX ^{(determinant)}
Cause of Death:	CAUSE ^(WHY) CAUSE ^(WHY) CAUSE ^(WHY)
Physical Description
Gender:	GENDER Pronouns Pro/nouns
Hair Colour:	xyz
Eye Colour:	xyz
Height:	xyz
Extras:	xyz
Biographical Information
Love Interests:	xyz
Relatives:	xyz ^(comment) xyz ^(comment)
Friends:	xyz
Profession:	xyz
Affiliation:	xyz
TITLE:	lorem ipsum dolor sit amet consectetuer adipiscing elit

⚠ This page is for the Prime timeline. You may be looking for someone else.

❝ Mountain dew game fuel. ❞

This is an example of a real link. This is an example of a redlink that doesn't go anywhere. This is an example of spoiler tagged text, and here's a link inside it You can adjust the colors of these (and everything else in the template) by going into the CSS file and changing the color variables at the top of the file.^[1]

Table of Contents

Personality
Appearance

Redshift
Vortex Club
Promises

Background

Younger Years
New York

Powers

Abilities
Limits
Consequences

Alternates
Relationships

Friends
Family
Enemies
Romantic

Associated Deaths
Trivia
Gallery
References

Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

Personality

There are some utility classes in the CSS:

Adding .text-center to anything centers the text
Adding .text-big to anything makes the text big
Adding .redlink to <a> makes it red (see above)
See below for effect of .clear-both

Appearance

This code has two mobile responsiveness breakpoints: one at 1000px and one at 576px. The sidebar goes on top on small screens. On desktop, you can test this by resizing the window.

Life is Weird (Redshift)

The table of contents is open by default. You can make it closed by default by removing the word open from the tag.

This is a static template, so you'll have to set up the table of contents on each page manually. Add an id="headername" to each header in your code, then add a corresponding link with href="#headername" to the table of contents. IDs cannot contain spaces or begin with a number.

There's no elegant way to make sub-ordered-lists appear like 1.1, 1.2, etc. in HTMLCSS. On MediaWiki sites, they just auto generate the numbers right onto the page, which is messy and not ideal for a static site. You'll have to make do with a/b/c, sorry.

Vortex Club timeline

Most things in this code (the notice boxes, floating images, infoboxes, etc.) can be dropped into your page wherever you want with minimal issues. Just copy and paste.

Life is Weird: Promises

Background

Make sure any <h2> elements directly under a section with a right-floating image have the class "clear-both" applied. This makes it "clear" any floating elements and appear below them, to avoid display weirdness on large screens.

Younger Years

New York

Powers

Main article: Rewind

Abilities ^[2]

NAME - Lorem ipsum dolor sit.
NAME - Lorem ipsum dolor sit.
NAME - Lorem ipsum dolor sit.
NAME - Lorem ipsum dolor sit.

Limits

Consequences

Alternates

Main article: Timelines

This code has two mobile responsiveness breakpoints: one at 1000px and one at 576px. The sidebar goes on top on small screens. On desktop, you can test this by resizing the window.

Relationships

Friends

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

Family

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

Enemies

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

Romantic

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.

NAME (determinant) - Lorem ipsum dolor sit, amet consectetuer adipiscing elit. Lorem ipsum dolor sit amet consectetuer adipiscing elit; lorem ipsum dolor sit amet consectetuer adipiscing elit, lorem ipsum dolor sit. Amet consectetuer adipiscing elit, lorem ipsum dolor sit amet consectetuer adipiscing elit.