Snippet paragraph. Minus sit ad quo alias eos non qui sit veniam qui labore rerum consequuntur placeat reiciendis impedit et et commodi facere totam aliquid et et. link text here

voluptatum voluptates ad velit et et voluptatem officiis rerum facere veritatis ipsam et harum expedita sunt asperiores adipisci omnis qui est et sed consequuntur omnis repellat reiciendis quia nihil laboriosam Link text here.

ex ut atque et laudantium corrupti occaecati rem ut voluptas optio asperiores laborum deserunt non sint non soluta deleniti assumenda

Intro paragraph voluptatum et vitae rerum enim ut sed est voluptatem distinctio consequatur enim reiciendis laudantium et sint dicta voluptatibus maiores aliquid aut voluptas doloribus veniam ea link text here

est quia facilis et aut quidem rerum a iusto atque quisquam inventore officiis hic est alias quis voluptate enim animi consequatur fugit nemo tempora illum veniam eum quia qui nobis quo consequuntur et voluptatem aliquid qui sed et sapiente non eligendi vel perspiciatis quos minima reprehenderit accusantium cupiditate voluptas odio

Blockquote amet et delectus similique non numquam corporis sed laboriosam mollitia vel deleniti porro itaque magnam velit nesciunt at inventore voluptatem aliquid cumque ut illum aut magni minus non ratione nulla

Author name, Example Company name

H2 This is a Heading 2 with link text here

H3 This is a Heading 3 with link text here

H4 This is a Heading 4 with link text here

H5 This is a Heading 5 with link text here

H6 This is a Heading 6 with link text here

Paragraph: minima praesentium fugit sit nam soluta sed libero nihil dicta maiores atque laboriosam voluptate aut a accusamus ea tenetur voluptas rerum assumenda sint illum non voluptatum qui itaque ullam in

An extra long H2 title with more text in so we can see line height and also what happens when the copy wraps onto a new line. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias, reprehenderit. With link text here.

An extra long H3 title with more text in so we can see line height and also what happens when the copy wraps onto a new line. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias, reprehenderit. With link text here.

An extra long H4 title with more text in so we can see line height and also what happens when the copy wraps onto a new line. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias, reprehenderit. With link text here.

tempore id rerum voluptas provident numquam eum necessitatibus atque voluptatem amet maxime et ipsam blanditiis explicabo voluptates dolores ratione nemo autem quo in quidem iure facilis laborum aut quaerat in link text here

H2 with basic text before and after so can see margin

dolore animi doloribus nobis beatae quia voluptas nemo suscipit omnis facilis ipsam expedita reprehenderit enim adipisci inventore minima labore illum error molestias aut numquam quaerat impedit id qui porro praesentium

H3 with basic text before and after so can see margin

et sapiente possimus est neque magni rerum velit aut voluptas autem quis quo iure pariatur iusto eaque laborum labore odit rerum et qui corrupti et sequi aut eum voluptatibus repellendus

H4 with basic text before and after so can see margin

numquam eos labore reiciendis laudantium dolor accusantium ipsa velit ad ratione ullam tempore et reprehenderit sed error quo adipisci voluptas accusamus quae doloribus expedita quam nostrum inventore nesciunt veritatis cupiditate

H5 with basic text before and after so can see margin

voluptatem eum possimus rerum rem alias voluptas minus sapiente omnis eos dolorum et et veniam similique quod in cumque quia omnis quis deleniti iure dolor est doloremque excepturi ut maiores

H6 with basic text before and after so can see margin

illo laboriosam nulla autem harum veniam repudiandae dignissimos ipsa optio sint ducimus doloribus non enim placeat impedit aspernatur laborum tenetur eos nam quia assumenda error et alias aut voluptatem porro

• First list item is short but not really short
• Second list item wraps aut recusandae quam est link text here et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
• Third list item is short
• Fourth list item
  • Nested - First list item is short but not really short
  • Nested - Second list item wraps aut recusandae quam est link text here et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
  • Nested - Third list item is short
• Fifth list item
• Sixth list item

1. First list item is short but not really short
2. Second item wraps aut recusandae quam est link text here et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
3. Third list item is short
4. Fourth item
5. Fifth item
6. Sixth item
   1. Nested - First list item is short but not really short
   2. Nested - Second item wraps aut recusandae quam est link text here et quo quaerat facilis adipisci in nesciunt et laborum magnam debitis
   3. Nested - Third list item is short
7. Seventh item
8. Eighth item
9. Nineth item
10. Tenth item
11. Eleventh item
12. Twelth item
13. Thirteenth item
14. Fourteenth item
15. Fifteenth item
16. Sixteenth item
17. Seventeenth item
18. Eighteenth item
19. Nineteenth item
20. Twentyth item

Header one

Header two

Header three

Header four

Header five

Header six

In-page navigation

Section 1

Button text Disabled Button

Blockquotes

Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote with a cite reference:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.

multiple contributors - MDN HTML element reference - blockquote

Tables

Section 2

Definition Lists

Definition List Title

Definition list division.

Startup

A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.

Do It Live

I'll let Bill O'Reilly explain this one.

Unordered Lists (Nested)

• List item one
  • List item one
    • List item one
    • List item two
    • List item three
    • List item four
  • List item two
  • List item three
  • List item four
• List item two
• List item three
• List item four

Ordered List (Nested)

8. List item one - start at 8
   1. List item one
      1. List item one -reversed attribute
      2. List item two
      3. List item three
      4. List item four
   2. List item two
   3. List item three
   4. List item four
9. List item two
10. List item three
11. List item four

HTML Tags

Address Tag (<address>)

1 Infinite Loop
Cupertino, CA 95014
United States

Anchor Tag aka. Link (<a href="">)

This is an example of a link.

Abbreviation Tag (<abbr>)

The abbreviation srsly stands for "seriously".

Acronym Tag (< acronym title="">) (deprecated in HTML5)

The acronym ftw stands for "for the win".

Big Tag (<big>) (deprecated in HTML5)

These tests are a big deal, but this tag is no longer supported in HTML5.

Cite Tag (<cite>)

The <cite> HTML element is used to mark up the title of a cited creative work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata

"Code is poetry." —Automattic

Code Tag (<code>)

This tag styles blocks of code.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;
}
You will learn later on in these tests that word-wrap: break-word; will be your best friend.

Delete Tag (<del cite="">)

This tag will let you strike out text. Use along with <ins> to show deleted text followed by inserted text

Insert Tag (<ins cite="">)

This tag should denote inserted text.

Emphasize Tag (<em>)

The emphasize tag should emphasize text. It will likely look the same as Italicized text

Italicize Tag (<i>)

The italicize tag should italicize text.

Horizontal Rule Tag (< hr >)

---

This sentence is following a <hr> tag.

Keyboard Tag (<kbd>)

This scarcely known tag emulates keyboard text, which is usually styled like the <code> tag.

Preformatted Tag (<pre>)

This tag is for preserving whitespace as typed, such as in poetry or ASCII art.

The Road Not Taken

 Robert Frost


  Two roads diverged in a yellow wood,
  And sorry I could not travel both          (\_/)
  And be one traveler, long I stood         (='.'=)
  And looked down one as far as I could     (")_(")
  To where it bent in the undergrowth;

  Then took the other, as just as fair,
  And having perhaps the better claim,          |\_/|
  Because it was grassy and wanted wear;       / @ @ \
  Though as for that the passing there        ( > º < )
  Had worn them really about the same,         `>>x<<´
                                               /  O  \
  And both that morning equally lay
  In leaves no step had trodden black.
  Oh, I kept the first for another day!
  Yet knowing how way leads on to way,
  I doubted if I should ever come back.

  I shall be telling this with a sigh
  Somewhere ages and ages hence:
  Two roads diverged in a wood, and I—
  I took the one less traveled by,
  And that has made all the difference.


  and here's a line of some really, really, really, really long text, just to see how it is handled and to find out how it overflows;

Quote Tag (<q>) for short, inline quotes

Developers, developers, developers… -Steve Ballmer

Strike Tag (<strike>) (deprecated in HTML5) and S Tag (< s >)

This tag shows strike-through text.

Small Tag (<small>)

This tag shows smaller text.

Strong Tag (<strong>)

This tag shows bold text.

Bring Attention To element (<b>)

This tag shows bold text. The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element. Historically, the <b> element was meant to make text boldface, and most browsers still draw the text in boldface. However, styling information has been deprecated since HTML4, so the meaning of the <b> element has been changed. You should not use <b> for styling text or granting importance. If you wish to create boldface text, you should use the CSS font-weight property. If you wish to indicate an element is of special importance, you should use the <strong> element.

Subscript Tag (<sub>)

Getting our science styling on with H₂O, which should push the "2" down.

Further use of sub_script, which should lift the "script" text up. This is just more text to see if the <sub> tag added extra line height to the line of text it's on. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui.

Superscript Tag (<sup>)

Still sticking with science and Albert Einstein's E = MC², which should lift the "2" up.

This is just more text to see if the <sup> tag added extra line height to the line of text it's on. Further use of super^script, which should push the "script" text down. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Donec sed odio dui.

Teletype Tag (<tt>) (deprecated in HTML5)

This rarely used tag emulates teletype text, which is usually styled like the <code> tag.

Underline Tag (<u>) (Re-introduced in HTML5 with other semantics)

This tag shows underlined text.

Variable Tag (<var>)

This allows you to denote variables.

Details and Summary elements

The <details> and <summary> elements when used together create a native accordian / revealed text pattern.

I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?

A keyboard.

Section 3

Revealer text - hover me

This text is revealed when the Revealer text heading is hovered, we could do it on focused too. Be aware that if this element has top/bottom margin that it will still apply to the flow even when it's height is 0. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod quidem molestiae distinctio provident in culpa sit debitis porro est magnam?