Colors
Navy
#161D6F
hsl(235, 67%, 26%)
rgb(22, 29, 111)
rgba(22, 29, 111, 1)
Blue
#0B2F9F
hsl(225, 87%, 33%)
rgb(11, 47, 159)
rgba(11, 47, 159, 1)
Teal
#98DED9
hsl(176, 51%, 73%)
rgb(152, 222, 217)
rgba(152, 222, 217, 1)
Mint
#C7FFD8
hsl(138, 100%, 89%)
rgb(199, 255, 216)
rgba(199, 255, 216, 1)
These colors can be used for websites but also for applications, we can use them as background, headers, text and others.
Yellow
#FABC3F
hsl(40, 95%, 61%)
rgb(250, 188, 63)
rgba(250, 188, 63, 1)
Orange
#E85C0D
hsl(22, 89%, 48%)
rgb(232, 92, 13)
rgba(232, 92, 13, 1)
Red
#C7253E
hsl(351, 69%, 46%)
rgb(199, 37, 62)
rgba(199, 37, 62, 1)
Maroon
#821131
hsl(343, 77%, 29%)
rgb(130, 17, 49)
rgba(130, 17, 49, 1)
These colors can be used for websites but also for applications, we can use them as background, headers, text and others.
Fonts
Roboto
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
Lato
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
Kanit
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
As the use of typewriters grew in the late 19th century
We will use these styles for the title, subtitle, paragraphs, etc.
Text Styles
H1: Main page heading
Font-weight: 700 (bold)
Font-size: 26px
Font-family: Roboto
Line-height: 1.6
Letter-spacing: 3px
H2: Subheading
Font-weight: 500 (bold)
Font-size: 18px
Font-family: Lato
Line-height: 1.2
Letter-spacing: 2px
P: Paragraph text
Font-weight: 400 (regular)
Font-size: 14px
Font-family:Lato
Media Queries
@media only screen and (max-width: 600px)<------->(phones, 600px and down)
@media only screen and (min-width: 600px)<------->(portrait tablets and large phones, 600px and up)
@media only screen and (min-width: 768px)<------->(landscape tablets, 768px and up)
@media only screen and (min-width: 992px)<------->(laptops/desktops, 992px and up)
@media only screen and (min-width: 1200px)<------->(large laptops and desktops, 1200px and up)
Resize the browser window to see how the background color of this div changes on different screen sizes