From 80c60b2d68e8d2a3f524f83f690ffbbee1cd8cc1 Mon Sep 17 00:00:00 2001
From: rav4s <ravidhruvishshah@gmail.com>
Date: Fri, 18 Dec 2020 10:18:00 -0600
Subject: [PATCH] Added two-column layout

---
 static/styles.css    | 18 ++++++++++++++++++
 templates/index.html | 11 +++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 1faa6f8..e05d53b 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -51,3 +51,21 @@ body {
     float: none;
   }
 }
+
+.column {
+  float: left;
+  width: 50%;
+  padding: 10px;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+@media screen and (max-width: 600px) {
+  .column {
+    width: 100%;
+  }
+}
diff --git a/templates/index.html b/templates/index.html
index 8af0c0d..28d33e2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -12,7 +12,14 @@
         <a class="active" href="/logout">Logout</a>
       </div>
     </div>
-    <p>{{ message }}</p>
-    <p>The current sensor distance is {{ distance }} centimeters.</p>
+    <div class="row">
+      <div class="column" style="background-color:#aaa">
+        <p>{{ message }}</p>
+        <p>The current sensor distance is {{ distance }} centimeters.</p>
+      </div>
+      <div class="column" style="background-color:#bbb">
+        <p>Hello</p>
+      </div>
+    </div>
   </body>
 </html>