Based off the Poor Man's Styleguide. This site also incorporates elements from the styleguide pages of 10kph and HillHouse.

Go home or View sitemap

Colors

#295379

#f19944

#ecc1bb

#d7786b

#ffdc5dba

#6d5f5d

#fbfaf1

#dfd6d1

#bbd9d9

Fonts

Body: Solway, slab-serif
italic, bold

H1: Make Summer Fun
italic, bold

H5: Mademoiselle
italic, bold

Every Font I've Imported

Ambery Garden Regular

Alagard

DK Aint Nothing Fancy

AvantGarde

Summer Beach Regular

Blackmud

BM neco A29

Calamity

Cattie

Chick

Fashion Wacks Regular

Garamond

Gourmet Eatery

Grandstander

Gill Sans Nova Heavy

Gill Sans Nova ExtraBold

GillSans Medium

Homemade Apple

Hello Ketta

Handwriting Regular

Inaptly Regular

Jupiter Pro Regular

Katto

LM Mono 10 Regular

Mademoiselle Medium

Maxi Marker

Miracle Moon

Might Makes Right BB Regular

PP Mondwest Regular

Morning Tea

Nightburn

Pixel Operator

Pixelated Times New Roman Regular

Quiet Meows

Redsema Regular

Relia Maliks

Rusty Hooks Regular

Ripple Font

Romance A

Scrap It Up

Segoe UI

Senja Santuy

Solway

Spirit

Make Summer Fun

Noto Sans Symbols Regular

Typewriter Inked Regular

Vidaloka

CC Wall Scrawler Regular

Zurich BT Black


Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading with text

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading with text

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading with text

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading with text

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading with text

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.


Block Elements

Paragraphs and Images

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.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Test Image

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Figure-Caption

A placeholder figure image.
The figcaption element example

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.


Text Elements

The a element, external a element, and a element with title examples

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example


Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

                    

List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2.2
    • List Item 3.3
  • List Item 4

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2