Layout Test

Grouped Heading 1

Grouped Heading 2

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Section Heading 1

Article Heading 2

Address: somewhere, world

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

Text-level semantics

The a element example
The abbr element example
The b element example
The cite element example
The code element example
The del element example
The dfn element example
The em element example
The i element example
The img element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
Thesamp elementexample
The small element example
The span element example
The strike element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example

Embedded content

img


svg

 

Grouping content

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et m.

pre

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
<html> <head> </head> <body> <div class="main"> <div> </body> </html>

blockquote

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

Even better philosophical quote marked up with just a <blockquote> element.

ordered list

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1

unordered list

  • list item 1
  • list item 1
    • list item 2
    • list item 2
      • list item 3
      • list item 3
    • list item 2
    • list item 2
  • list item 1
  • list item 1

description list

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value

figure

Figcaption content
Figcaption content

Tablular data

Jimi Hendrix – albums
Album Year Price
Album Year Price
Are You Experienced 1967 $10.00
Axis: Bold as Love 1967 $12.00
Electric Ladyland 1968 $10.00
Band of Gypsys 1970 $12.00

Forms

Inputs as descendents of labels (form legend)

 

 

Inputs as siblings of labels

Clickable inputs and buttons

box-sizing tests

6 Responses to “Layout Test

  1. Ethical letterpress artisan, occaecat vero pitchfork messenger bag esse. Mixtape echo park cillum, marfa dolor mollit lomo non single-origin coffee sustainable brooklyn 3 wolf moon.

    Freegan culpa leggings, thundercats minim ut stumptown trust fund sint portland mollit tumblr ex. American apparel wolf eu next level, echo park whatever quis 8-bit lomo put a bird on it keffiyeh twee. Nisi esse shoreditch, do aliqua nostrud eu.

    Reprehenderit est aliqua, hoodie trust fund mustache qui cardigan exercitation put a bird on it.

  2. Do minim keffiyeh, consequat excepteur reprehenderit squid. Photo booth salvia locavore.

    a {
    	color: #768c22;
    	text-decoration: none;
    }
    

    Ethical nostrud single-origin coffee non sed

Leave a Reply

Your email address will not be published. Required fields are marked *