samarabilby / calculator-app

Criar um aplicativo de calculadora utilizando HTML, CSS e JavaScript

Calc App

Fazer um Aplicativo de Calculadora utilizando HTML, CSS e Javascript

Theme 1

Backgrounds

• Very dark violet (main background): hsl(268, 75%, 9%)
• Very dark violet (toggle background, keypad background, screen background): hsl(268, 71%, 12%)

Keys

• Dark violet (key background): hsl(281, 89%, 26%)

• Vivid magenta (key shadow): hsl(285, 91%, 52%)

• Pure cyan (key background, toggle): hsl(176, 100%, 44%)

• Soft cyan (key shadow): hsl(177, 92%, 70%)

• Very dark violet (key background): hsl(268, 47%, 21%)

• Dark magenta (key shadow): hsl(290, 70%, 36%)

Text

• Light yellow: hsl(52, 100%, 62%)
• Very dark blue: hsl(198, 20%, 13%)
• White (text): hsl(0, 0, 100%)

Typography

Body Copy

• Font size (numbers): 22px

Font

• Family: League Spartan
• Weights: 100% -height: 100%;

Theme 2

Backgrounds

• Light gray (main background): hsl(0, 0%, 90%)
• Grayish red (toggle background, keypad background): hsl(0, 5%, 81%)
• Very light gray (screen background): hsl(0, 0%, 93%)

Keys

• Dark moderate cyan (key background): hsl(185, 42%, 37%)

• Very dark cyan (key shadow): hsl(185, 58%, 25%)

• Orange (key background, toggle): hsl(25, 98%, 40%)

• Dark orange (key shadow): hsl(25, 99%, 27%)

• Light grayish yellow (key background): hsl(45, 7%, 89%)

• Dark grayish orange (key shadow): hsl(35, 11%, 61%)

Text

• Very dark grayish yellow: hsl(60, 10%, 19%)
• White (text): hsl(0, 0, 100%)