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.

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.

Make good use of space

This is a bad use of space. It shouldn’t be one-third.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra neque laoreet ipsum condimentum, quis molestie justo ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique ullamcorper justo egestas dictum. Vestibulum id malesuada orci. Nam dignissim felis eget neque luctus aliquet. Aliquam in ornare lacus. Donec orci nisi, luctus quis ultricies vitae, congue sit amet mi. Etiam dictum scelerisque iaculis. In turpis justo, imperdiet sit amet magna vulputate, faucibus rutrum felis. Suspendisse dapibus, nisl tempus tristique rhoncus, nisl orci pretium quam, a gravida neque nisl non magna. Suspendisse dui lectus, convallis at accumsan a, lobortis sit amet libero. In egestas luctus elementum.

Pellentesque fermentum, arcu sed semper tempor, ex velit fringilla lectus, nec pulvinar erat mauris vitae felis. Nulla porttitor justo odio, et varius massa pharetra consectetur. Integer lacus libero, sollicitudin ut tincidunt sit amet, sollicitudin bibendum nisl. Curabitur cursus, libero sed malesuada ornare, turpis quam rutrum justo, sit amet imperdiet quam mi et massa. Nulla ultricies massa mi, vitae volutpat massa lacinia ac. Vivamus neque mauris, scelerisque non mi et, laoreet faucibus massa. Mauris magna ipsum, consequat a lacus nec, finibus posuere justo. Ut nec mattis augue.

Pellentesque commodo pharetra dapibus. Sed suscipit euismod elit et consequat. Fusce ut tellus vitae augue pharetra bibendum. Integer sed augue ullamcorper, varius dolor a, viverra sapien. Proin scelerisque varius laoreet. Integer volutpat non arcu eget sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec lacus libero, hendrerit in neque vel, porttitor bibendum mi. Aliquam pharetra, arcu sit amet fermentum accumsan, sapien felis ultrices augue, sagittis laoreet eros tellus nec nisi. Ut sed tortor quis ipsum gravida pharetra. Aliquam at elementum massa.

Vestibulum vitae metus eget lorem suscipit ultrices ac ullamcorper dolor. Praesent egestas felis nisi, vitae auctor est dapibus nec. Praesent varius maximus ligula vitae finibus. Curabitur mollis eleifend volutpat. Etiam tincidunt iaculis eros eu convallis. Sed elit tortor, feugiat at ex eget, ultricies scelerisque eros. Cras id lacus ipsum. Curabitur tincidunt felis non nunc sagittis, sit amet dapibus ante bibendum. Fusce quis purus placerat, lobortis lacus ut, volutpat sapien.

Phasellus turpis leo, ullamcorper ac mattis vel, condimentum ut mi. Suspendisse sit amet neque vitae nisl dictum facilisis in at elit. Curabitur consequat felis ac tempus posuere. Aliquam in varius ipsum, sed tempus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis dolor ut nisi vestibulum pellentesque. Donec sit amet consequat lectus. Aliquam ultricies ante sit amet laoreet lobortis. Phasellus rutrum elit mi.