TEMPLATE v2

Page title

Phoebe Conetits

Mmm dd, yyyy

Updated Mmm dd, yyyy

Brief summary or abstract goes here as appropriate, or links to other relevant pages on the site, e.g. a companion tool or a previously-written page.

Indie web developers: feel free to adapt, copy, steal, or pilfer whatever you want from this page for NON-COMMERCIAL USE. No credit is required or really expected, but I would appreciate it if you sent me a message with a link to your site so I can see it :D

Section title

Paragraph here

Sample list:

First thing
Second thing
Third thing

Horizontal rule:

Nobody told me about the details tag before this thing is so cool?

I'm sure I'll find some way to integrate this into the page. Seems like an interesting alternative to anchors for footnotes? We'll see.

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.

Section title

Surround some text with span tags with the "tooltip" class like thisand then nest another span with your hover text inside like this for mobile-friendly tooltips.

paragraph with footnote. (Default Text 1) Remember to make IDs correspond to JavaScript footnote objects but end them with "_il" for "inline" to avoid potential naming collisions.

Sometimes you'll need to use special characters. Trail off like this… Multiply numbers with a ×, like 2 × 2 = 4. Use – and — when appropriate; remember that a character's dialogue gets "cut—" off like this.

Rule of thumb for italicizing, linking, etc. punctuation: the punctuation should be formatted the same as the word it's attached to like this, like this, or like this. However, if the punctuation is paired then it should be formatted like the rest of the text "like this" or (like this).

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Paragraph with footnote. (Default Text 2)

Section title

The second box will mostly not be generally needed

Image. — White text on a red background.

Photo. — White text on an orange background.

Graph. — Black text on a yellow background.

Chart. — White text on a green background.

Warning: adding an element in between two figures will break :nth-child! This paragraph is located between the blue and purple images.

Paragraph with footnote. (Default Text 3)

While there is CSS to extend this section's container to the overflowing floated elements, it's highly unlikely that you'll actually have this many individual images with captions in practice.

Who Doesn't Love Tables, the Best HTML Element?

Species	Type	Gen	Color	A somewhat lengthy description
Table Title Here
Bulbasaur	Grass/Poison	Gen I	Green	Bulbasaur was the Grass-type starter Pokémon in the Kanto region. It gets access to status moves in the form of Leech Seed and powders and beats the first two gyms easily.
Cyndaquil	Fire	Gen II	Blue	Cyndaquil was the Fire-type starter Pokémon in the Johto region. Cyndaquil is a friend. Its final form, Typhlosion, gets access to Thunderpunch, which helps deal with Water-types.
Mudkip	Water	Gen III	Blue	I heard you like them. Mudkip was the subject of an Internet meme. Mudkip evolves into Swampert, which was one of the premier bulky waters in the Gen III metagame.
Here's a datapoint that takes up 5 columns
Furfrou	Normal	Gen VI	White	Furfrou is a scruffy poodle. That's it. It's not even a Pokémon. It's a scruffy poodle. Furfrou can be petted and given silly haircuts.

A table. This table is provided to help test responsive layouts. This figure caption is provided to show how the figure caption renders. This is extraneous text to make it wide enough to ensure it wraps to a new line.

Aren't tables lovely? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Gallery Example

Often rather than single images you'll want multiple images in a block. The gallery class uses grids to automatically arrange images.

White text on a red background.
White text on an orange background.
Black text on a yellow background.
White text on a green background.
White text on a blue background.
White text on a purple background.
Black text on a light grey background.
White text on a dark grey background.

The width of the grid columns is a magic number chosen so there will be two at the cutoff between the desktop and mobile layouts with some extra room for borders and whatnot.

Footnotes

Warning: footnotes require JavaScript to function correctly. Internal links will be broken, and sources may missing or extraneous.(Providing a pre-generated copy of the footnotes as a fallback option would be polite.)