Spritz Logo

Weaving the Power of the Web into Your Business!

Typography

This is an intro paragraph. For easy spacing, Shoelace removes top margins and applies a bottom margin to block elements. By default, text sizing and spacing is measured in em units. Shoelace also sets box-sizing: border-box globally to make it easier to properly size elements.

Heading 1

Heading 2 (Open Sans)

Heading 3 (Raleway)

Heading 4

Heading 5
Heading 6

H4 Paragraph

This is a regular paragraph. This whole top section is using a section called "flex-container". The flex container specifies two columns, each of approximately 50% width.

H5 Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu metus. Sed auctor elementum odio. Pellentesque posuere rutrum tortor. Pellentesque sed ligula quis ligula porttitor elementum. Nam hendrerit blandit mi. Aliquam magna nibh, tincidunt quis, dignissim nec, facilisis vitae, lectus. Quisque eget quam sit amet turpis varius adipiscing.

H6 Paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eu metus. Sed auctor elementum odio. Pellentesque posuere rutrum tortor. Pellentesque sed ligula quis ligula porttitor elementum. Nam hendrerit blandit mi. Aliquam magna nibh, tincidunt quis, dignissim nec, facilisis vitae, lectus. Quisque eget quam sit amet turpis varius adipiscing.


Lists can flow into multiple columns by attaching a style to a class. For example, if you want 2 columns, use .col2 as the class and set up style rules as such: .col2 { columns:2; -webkit-columns:2; -moz-columns: 2; }. Can do the same for 3 columns, etc.

Unordered List
  • This is the first list item.
  • This is the second list item.
    • Nested Item 1
    • Nested Item 2
    • Nested Item 3
  • This is the third list item.
  • This is the fourth list item.
  • This is the fifth list item.
  • This is the sixth list item.
  • This is the seventh list item.
  • This is the eighth list item.
  • This is the ninth list item.
  • This is the tenth list item.
Ordered List
  1. This is the first list item.
  2. This is the second list item.
    1. Nested Item 1
    2. Nested Item 2
    3. Nested Item 3
  3. This is the third list item.
  4. This is the fourth list item.
  5. This is the fifth list item.
  6. This is the sixth list item.
  7. This is the seventh list item.
  8. This is the eighth list item.
  9. This is the ninth list item.
  10. This is the tenth list item.

Definition List
Term 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum autem perferendis exercitationem asperiores fuga incidunt, nam dicta amet. Dolor eligendi nisi praesentium placeat officiis esse corporis molestiae. Doloremque accusamus, vel!
Term 2
Veritatis repellendus porro ipsam beatae temporibus natus id adipisci nobis accusantium quidem eum fugit cupiditate deleniti nisi nesciunt dicta officia, enim, atque corporis neque error. Unde saepe molestiae hic voluptatibus?
Image Bullet List
  • This is the first list item.
  • This is the second list item.
  • This is the third list item.
  • This is the fourth list item.
  • This is the fifth list item.

General Styles

This is link text. Styles are found in the main.css file.

This is superscript text and this is small text. These styles are found in the reset.css file.