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

Font Awesom Icons

wheelchair
person-military-rifle
scale-balanced
chart-line
fingerprint
person-walking-with-cane
house-chimney
hand-holding-dollar
hands-holding-child
dollar-sign
skull-crossbones
piggy-bank
chevron-up
chevron-down
chevron-down

Google Icons

fingerprint
ecg_hearT
school
personal_injury
Real_estate_agent
house
south
attach_money
stat_1
stat_minus_1
stat_minus_2
stat_minus_3
expand_all
arrow_drop_down_circle
storefront
store
military_tech
elderly