Style Guide

Typograpy

Web Design & Development

H1 Heading H1

Web Design & Development

H2 Heading H2

Web Design & Development

H3 Heading H3

Web Design & Development

H4 Heading H4
Web Design & Development
H5 Heading H5
Web Design & Development
H6 Heading h6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

P Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

small-P small paragraph text

Document Structure

HEADER - Semantic container
HeaderBackground - Allows full screen background color.
HeaderContainer - margin: 0 10%; - Provides auto margins & matches Header width to Section width.
NavbarWrapper - max-width: 1200px; margin: 0 auto; - Establishes max-width and centers the content. Matches Navbar content to SectionContainer content.
MAIN - Semantic container. Padding-top: 10vh; - This compensates for the Navbar size.
SECTION - padding: 40px 0, margin: 0 10% - Establishes uniform space between sections (Should almost always contain a Heading element).
SectionContainer-1200 - max-width: 1200px, margin: 0 auto; - Establishes max-width and centers the content.
Wrapper -
FOOTER - Semantic container
FooterBackground - Allows full screen background color.
FooterContainer - margin: 0 10%; - Provides auto margins & matches Footer width to Section width.
FooterWrapper - max-width: 1200px; margin: 0 auto; - Establishes max-width and centers the content. Matches Content content to SectionContainer content.

Colors

White
Black
Dark Gray
Bckgrnd Light
Header
HTML5

#e34f26
CSS3

#2163af
JS

#f7df1e
Bootstrap

#563d71
PHP

#8585ad
color
color