From a97d1e9891328fb7eae9de2fb47d924fbfd0ef09 Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Tue, 26 Dec 2023 18:50:51 -0700
Subject: [PATCH] Create basic calculator look

---
 index.html | 34 ++++++++++++++++------------------
 style.css  | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 62 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 772e456..19b3d60 100644
--- a/index.html
+++ b/index.html
@@ -11,24 +11,22 @@
     <main>
         <div class="calculator">
             <div class="screen"></div>
-            <div class="buttons">
-                <button class="num">1</button>
-                <button class="num">2</button>
-                <button class="num">3</button>
-                <button class="operator">+</button>
-                <button class="num">4</button>
-                <button class="num">5</button>
-                <button class="num">6</button>
-                <button class="operator">-</button>
-                <button class="num">7</button>
-                <button class="num">8</button>
-                <button class="num">9</button>
-                <button class="operator">*</button>
-                <button class="num">0</button>
-                <button class="clear">C</button>
-                <button class="equal">=</button>
-                <button class="operator">/</button>
-            </div>
+            <button class="num">1</button>
+            <button class="num">2</button>
+            <button class="num">3</button>
+            <button class="operator">+</button>
+            <button class="num">4</button>
+            <button class="num">5</button>
+            <button class="num">6</button>
+            <button class="operator">-</button>
+            <button class="num">7</button>
+            <button class="num">8</button>
+            <button class="num">9</button>
+            <button class="operator">*</button>
+            <button class="num">0</button>
+            <button class="clear">C</button>
+            <button class="equal">=</button>
+            <button class="operator">/</button>
         </div>
     </main>
     <footer>
diff --git a/style.css b/style.css
index e69de29..2c6ab10 100644
--- a/style.css
+++ b/style.css
@@ -0,0 +1,46 @@
+body {
+    text-align: center;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0;
+    background-color: #111;
+    color: #eee;
+}
+
+header {
+    flex: 0 0 auto;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+
+}
+
+.calculator {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto;
+    grid-gap: 5px;
+    background: purple;
+    padding: 10px;
+}
+
+.screen {
+    grid-column: 1 / span 4;
+    height: 100px;
+    background: #eee;
+}
+
+button {
+    height: 100px;
+    width: 100px;
+    font-size: 50px
+}
+
+footer {
+    flex: 0 0 auto;
+}
\ No newline at end of file