Style Guide

Style Guide

Link Icons
<a href="#put-link-here" rel="noopener" target="_blank"><i class="fa fa-play-circle"></i><strong>Put your title here.</strong> Put your description here.</a>

<a href="#put-link-here" rel="noopener" target="_blank"><i class="fa fa-book"></i><strong>Put your title here.</strong> Put your description here.</a>

<a href="#put-link-here" rel="noopener" target="_blank"><i class="fa fa-headphones"></i><strong>Put your title here.</strong> Put your description here.</a>

<a href="#put-link-here" rel="noopener" target="_blank"><i class="fa fa-file"></i><strong>Put your title here.</strong> Put your description here.</a>

Colors

THEME PRIMARY COLOR
Buttons, home HERO text, Headers that are also links

#45818e

THEME DARK
Headers, Button Hovers, backgrounds, some lines, nav items, and background for profile images.

#0c343d

THEME BODY TEXT
Body text, Footer background

#05161a

THEME GREY
Sidebars and internal nav backgrounds

#f3f3f3

Internal Nav Hover/Active

#d9d9d9

THEME LINK
Body Links, Certain labels. (logo)

#A44734

Table Background – LESSONS
Profile Nav Background Hover
Mobile Nav Background

#f1f4f9

HIGHLIGHT 2
Progress bars, some other things.

#e69138

Table background – TOPICS
Mobile Nav Background Hover

#e4ebf3

HIGHLIGHT 1
Alt buttons, alt background.

#f1c232

Highlight 1 – Hover

#d4a924
Buttons
Default buttons
Button

.btn

Transparent button

.btn.btn-transparent

Alt buttons
alt button

.btn.alt

Transparent Alt Button

.btn.btn-transparent.alt

 
 
Typography

Headline 1, font-size: 6rem; font-family: “Cormorant Garamond”;


Headline 2, font-size: 4.25rem; font-family: “Cormorant Garamond”;


Headline 3, font-size: 3rem; font-family: “Cormorant Garamond”;


Headline 4, font-size: 2.5rem; font-family: “Alegreya Sans”;


Headline 5, font-size: 1.8rem; text-transform: uppercase; letter-spacing: .1rem; font-family: “Alegreya Sans”;

Headline 6, font-size: 1.8rem; text-transform: uppercase; letter-spacing: .1rem; font-family: “Cormorant Garamond”;

Paragraph: Font-family: “Alegreya Sans”; font-size: 20px -or- 2rem; font-weight: 100;

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.

Bold, italics, Underline, and links.

Lorem ipsum dolor sit this is bold amet.

Consectetuer adipiscing elit, this is italics euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Vivamus sagittis lacus vel this is underlined faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. This is a link. It’s the same color as the logo.
– color: #A44734; font-weight: 400;


This is a blockquote. Look in the page CSS to find its styling.Mr. WordPress

Header 3

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam id dolor id nibh ultricies vehicula ut id elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Vestibulum id ligula porta felis euismod semper.

Dark section (overlay color rgba(0,0,0,0.7)


Custom Headline h5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi

Light section (overlay color rgba(255,255,255,0.7)


Custom Headline H5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi

Images



image hover: transition: 0.5sec ease
 
 

Featured



Feature Box Title

This is where the text for your Feature Box should go. It's best to keep it short and sweet.

  • Feature List Item

    This is an Feature List Item that is part of an Feature List. Notice the connector between the three graphics to show that they are related.

  • Feature List Item

    This is an Feature List Item that is part of an Feature List. Notice the connector between the three graphics to show that they are related.

  • Feature List Item

    This is an Feature List Item that is part of an Feature List. Notice the connector between the three graphics to show that they are related.

  • Icon List Item 1
  • Icon List Item 2
  • Icon List Item 3

3 Icon Row


Header of this element

short summary that highlights what this element is all about.

Header of this element

short summary that highlights what this element is all about.

Header of this element

short summary that highlights what this element is all about.