Page Template Mockups

These pages and templates will be built by the IncrediFlix development team.

Movies Page
Movie Template
FlixTV Template
Register a Class

Color Palette

These are the most important colors and they will be used throughout the site.

Primary

Class: bg-color-primary
Hex: #00ABD6
rgb(0, 171, 214)

Secondary

Class: bg-color-secondary
Hex: #FF0B34
rgb(255, 11, 52)

Tertiary

Class: bg-color-tertiary
Hex: #B3C100
rgb(179, 193, 0)

Accent 1

Class: bg-color-accent1
Hex: #FFCC00
rgb(255, 204, 0)

Accent 2

Class: bg-color-accent2
Hex: #F12762
rgb(241, 39, 98)

Accent 3

Class: bg-color-accent3
Hex: #C95FEE
rgb(201, 95, 238)

Dark

Class: bg-color-dark
Hex: #333333
rgb(51, 51, 51)

White

Class: bg-white
Hex: #FFFFFF
rgb(255, 255, 255)

OffWhite

Class: bg-offwhite
Hex: #F5F5F5
rgb(245, 245, 245)

Basic Typography

Most of your site is made of text, so typography is very important!

Header 1

Font: Montserratt / Color: #606060 / Size: 60px

Header 2

Font: Montserratt / Color: #606060 / Size: 48px

Header 3

Font: Montserratt / Color: #606060 / Size: 36px

Header 4

Font: Montserratt / Color: #606060 / Size: 24px

Header 5

Font: Montserratt / Color: #606060 / Size: 16px

Header 6

Font: Montserratt / Color: #606060 / Size: 12px

This is a Large H2 Heading

This is some supplemental body text to go along with your headers. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis pellentesque, vulputate ante ac, laoreet magna. Nulla congue lorem quis risus dictum, eu convallis lectus hendrerit. Etiam id pulvinar ex. Integer ac risus a neque viverra placerat non eget nisl. Maecenas sed metus vel ante dignissim varius.

This is a medium H3 Heading

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros. Vivamus sit amet massa egestas, maximus tellus luctus, rhoncus velit. Morbi vehicula sollicitudin leo at ultrices. Etiam imperdiet, dolor eu sodales varius, magna neque faucibus justo, ut congue velit metus quis dolor. Maecenas efficitur id dolor vel laoreet.

These are all items in an un-ordered list.

This is a list item.
This is also a list item.
Here’s one more.
And just for good measure…
Here’s one last one.

Font Weights

Weight 100

class=”wt-100″

Weight 300

class=”wt-300″

Weight 400

class=”wt-400″

Weight 500

class=”wt-500″

Weight 700

class=”wt-700″

Weight 900

class=”wt-900″

A normal size h4 Heading

Here’s some teaser text to make you want to click the link below.

This is a link

A normal size h4 Heading

Here’s some teaser text to make you want to click the link below.

This is a link

A normal size h4 Heading

Here’s some teaser text to make you want to click the link below.

This is a link

A Colored Background Section

A Heading with a large topline and highlights

This is some supplemental body lead text to go along with your headers. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu felis pellentesque laoreet magna.

Light button color

Site Elements

All pages and sections of the site are made up of a collection of elements. Below are some of the most common.

Graphic Icon Block Title

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros.

This is a link to somewhere

Graphic Icon Block Title

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros.

This is a link to somewhere

Graphic Icon Block Title

Here’s some more supplemental body text to help describe your point. Suspendisse non porttitor urna, et gravida eros.

This is a link to somewhere