From 8b78b5bc3ab9255751eb620a06111c92563399f8 Mon Sep 17 00:00:00 2001 From: Smig Tech Date: Tue, 3 Oct 2023 15:37:18 -0400 Subject: [PATCH] feat: completed front end basics --- calculator/css/style.css | 64 ++++++++++++++++++++++++++++++++++++++++ calculator/index.html | 40 +++++++++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 calculator/css/style.css diff --git a/calculator/css/style.css b/calculator/css/style.css new file mode 100644 index 0000000..bbbe444 --- /dev/null +++ b/calculator/css/style.css @@ -0,0 +1,64 @@ +.container { + width: 500px; + padding: 15px 0; + background-color: #C7B198; + border-radius: 10px; +} + +.screen { + height: 100px; + background-color: #DFD3C3; + margin: 10px 18px 15px; + border: 2px solid #596E79; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: flex-end; + font-family: 'Orbitron', sans-serif; + font-weight: 500; + font-size: 4.5em; + padding: 4px; + color: #000; +} + +.buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: center; + width: 500px; +} + +.btn { + padding: 20px; + border: 2px solid #596E79; + border-radius: 5px; + cursor: pointer; + margin: 5px; + font-size: 25px; + width: 110px; +} + +#clear { + background-color: #F1C93B; +} + +#action { + background-color: #7EAA92; +} + +#zero { + width: 230px; +} + +body { + display: flex; + justify-content: center; + align-content: center; + align-items: center; + height: 75vh; + min-height: 500px; + margin-top: 80px; + padding: 10px; + background-color: #F0ECE2; +} \ No newline at end of file diff --git a/calculator/index.html b/calculator/index.html index e69de29..8e99803 100644 --- a/calculator/index.html +++ b/calculator/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + Calculator + + +
+
+ 0 +
+
+ + + + + + + + + + + + + + + + + + + +
+
+ + \ No newline at end of file