diff --git a/index.html b/index.html index 291feee..d5385fb 100644 --- a/index.html +++ b/index.html @@ -4,38 +4,46 @@ Calculator - +
0
+
-
- - - +
+
+ + + +
+
+ + + + + + + + + + + +
-
- - - - - + +
+
+ + + + + +
-
- - - - - - - - - - - -
+
+
diff --git a/style.css b/style.css index 830576d..cb9e554 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,99 @@ * { margin: 0; padding: 0; + font-family: "Digital-7", sans-serif; +} + +body { + display: flex; + padding: 32px 12px; + background-color: #F4F1DE; +} + +#main-container { + display: flex; + margin: auto; + height: 600px; + width: 400px; + border: 12px solid #3D405B; + border-radius: 6px; +} + +#calculator-body { + display: flex; + flex-direction: column; + flex: 1; + border: 1px solid black; +} + +#display { + display: flex; + justify-content: flex-end; + align-items: center; + background-color: grey; + color: white; + font-size: 64px; + height: calc(600px / 6); + padding-right: 12px; + border: 2px solid black; +} + +#keypad { + display: flex; + flex: 1; + background-color: black; +} + +#left-keys { + display: flex; + flex-direction: column; + flex: 1; +} + +#right-keys { + display: flex; + flex: 1; +} + +#function-keys { + display: flex; + flex: 1; +} + +#function-keys button { + background-color: #F2CC8F; +} + +#operator-keys { + flex: 1; + display: flex; + flex-direction: column; +} + +#operator-keys button { + background-color: #e07b5f; +} + +#number-keys { + display: flex; + flex-wrap: wrap; + flex: 1; +} + +#number-keys button { + background-color: #81B29A; + flex-shrink: 0; +} + +#zero { + min-width: 200px; +} + +button { + min-width: 100px; + min-height: 100px; + flex: 1; + font-size: 36px; + color: white; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }