Poor Layout Practices

Heading levels should be used to build hierarchy not to style a heading
Vestibulum eu nibh nisl

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum sagittis metus vitae cursus. Aliquam tincidunt sed lacus sit amet viverra. Aenean et tincidunt orci.  Ut consequat placerat risus, in pretium nibh faucibus sed. Vestibulum gravida tortor sit amet orci auctor, eu suscipit ex tincidunt. Donec vel nisi sit amet purus dapibus eleifend id quis felis. Nulla varius ultricies dui. Aliquam erat volutpat. Proin finibus metus sit amet fringilla tincidunt. Aliquam erat volutpat. Aliquam est nisi, tristique ac mauris ac, sagittis ultrices quam. Cras ultricies dui lectus, ac ullamcorper risus maximus non. Ut sed ipsum nec nunc suscipit dapibus ut at dolor. Nam varius a magna eu tincidunt. Sed nec sapien sed leo convallis mattis at at massa.

No backgrounds in first section

There are a few things wrong with this section

  1. A background should not be used in the first section.
  2. A breakout section should not appear until after the navigation.
  3. The section heading should begin with h2 and not h5.
  4. The paragraph heading should be h3 and not h4.

Can you see this accordion?

  • It’s hard to see the accordion

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum sagittis metus vitae cursus. Aliquam tincidunt sed lacus sit amet viverra. Aenean et tincidunt orci. Vestibulum eu nibh nisl. Ut consequat placerat risus, in pretium nibh faucibus sed. Vestibulum gravida tortor sit amet orci auctor, eu suscipit ex tincidunt. Donec vel nisi sit amet purus dapibus eleifend id quis felis. Nulla varius ultricies dui. Aliquam erat volutpat. Proin finibus metus sit amet fringilla tincidunt. Aliquam erat volutpat. Aliquam est nisi, tristique ac mauris ac, sagittis ultrices quam. Cras ultricies dui lectus, ac ullamcorper risus maximus non. Ut sed ipsum nec nunc suscipit dapibus ut at dolor. Nam varius a magna eu tincidunt. Sed nec sapien sed leo convallis mattis at at massa.

  • Since it’s gray on a gray background

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum sagittis metus vitae cursus. Aliquam tincidunt sed lacus sit amet viverra. Aenean et tincidunt orci. Vestibulum eu nibh nisl. Ut consequat placerat risus, in pretium nibh faucibus sed. Vestibulum gravida tortor sit amet orci auctor, eu suscipit ex tincidunt. Donec vel nisi sit amet purus dapibus eleifend id quis felis. Nulla varius ultricies dui. Aliquam erat volutpat. Proin finibus metus sit amet fringilla tincidunt. Aliquam erat volutpat. Aliquam est nisi, tristique ac mauris ac, sagittis ultrices quam. Cras ultricies dui lectus, ac ullamcorper risus maximus non. Ut sed ipsum nec nunc suscipit dapibus ut at dolor. Nam varius a magna eu tincidunt. Sed nec sapien sed leo convallis mattis at at massa.

  • ¯\_(ツ)_/¯

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum sagittis metus vitae cursus. Aliquam tincidunt sed lacus sit amet viverra. Aenean et tincidunt orci. Vestibulum eu nibh nisl. Ut consequat placerat risus, in pretium nibh faucibus sed. Vestibulum gravida tortor sit amet orci auctor, eu suscipit ex tincidunt. Donec vel nisi sit amet purus dapibus eleifend id quis felis. Nulla varius ultricies dui. Aliquam erat volutpat. Proin finibus metus sit amet fringilla tincidunt. Aliquam erat volutpat. Aliquam est nisi, tristique ac mauris ac, sagittis ultrices quam. Cras ultricies dui lectus, ac ullamcorper risus maximus non. Ut sed ipsum nec nunc suscipit dapibus ut at dolor. Nam varius a magna eu tincidunt. Sed nec sapien sed leo convallis mattis at at massa.

Text and background image

Avoid using a text chunk if the section uses a background image.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum sagittis metus vitae cursus. Aliquam tincidunt sed lacus sit amet viverra. Aenean et tincidunt orci. Vestibulum eu nibh nisl. Ut consequat placerat risus, in pretium nibh faucibus sed. Vestibulum gravida tortor sit amet orci auctor, eu suscipit ex tincidunt. Donec vel nisi sit amet purus dapibus eleifend id quis felis. Nulla varius ultricies dui. Aliquam erat volutpat. Proin finibus metus sit amet fringilla tincidunt. Aliquam erat volutpat. Aliquam est nisi, tristique ac mauris ac, sagittis ultrices quam. Cras ultricies dui lectus, ac ullamcorper risus maximus non. Ut sed ipsum nec nunc suscipit dapibus ut at dolor. Nam varius a magna eu tincidunt. Sed nec sapien sed leo convallis mattis at at massa.

Text shouldn’t be in all caps, all bold, or all italics

LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT. NAM CURSUS. MORBI UT MI. NULLAM ENIM LEO, EGESTAS ID, CONDIMENTUM AT, LAOREET MATTIS, MASSA. SED ELEIFEND NONUMMY DIAM. PRAESENT MAURIS ANTE, ELEMENTUM ET, BIBENDUM AT, POSUERE SIT AMET, NIBH. DUIS TINCIDUNT LECTUS QUIS DUI VIVERRA VESTIBULUM. SUSPENDISSE VULPUTATE ALIQUAM DUI. NULLA ELEMENTUM DUI UT AUGUE. ALIQUAM VEHICULA MI AT MAURIS. MAECENAS PLACERAT, NISL AT CONSEQUAT RHONCUS, SEM NUNC GRAVIDA JUSTO, QUIS ELEIFEND ARCU VELIT QUIS LACUS. MORBI MAGNA MAGNA, TINCIDUNT A, MATTIS NON, IMPERDIET VITAE, TELLUS. SED ODIO EST, AUCTOR AC, SOLLICITUDIN IN, CONSEQUAT VITAE, ORCI. FUSCE ID FELIS. VIVAMUS SOLLICITUDIN.

Don’t go crazy with custom HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam consequat viverra. Proin posuere ipsum sit amet turpis vulputate, quis venenatis massa placerat.