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.

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.

Buttons

Colors

White

Black

Dark Gray

Bckgrnd Light

Header

HTML5
‍
#e34f26

CSS3
‍
#2163af

JS
‍
#f7df1e

Bootstrap
‍
#563d71

PHP
‍
#8585ad

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

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