Added sections for different html elements

01864770 · Kristian Tan · 13d04c55 · 01864770 · 01864770
Commit 01864770 authored Nov 12, 2019 by Kristian Tan
Show whitespace changes
Inline Side-by-side

Showing with 46 additions and 15 deletions

main.css static/css/main.css +21 -0

main.html templates/main.html +25 -15

No files found.
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -7,3 +7,24 @@ body{
    text-align: center;
    background-color: aqua;
 }
+
+.container{
+    display: flex;
+    flex-direction: row;
+    background-color: red;
+}
+
+.device_list{
+    width: 25%;
+    background-color: red;
+}
+
+.spacer{
+    width: 10%;
+    background-color: green;
+}
+
+.smart_meter{
+    width: 65%;
+    background-color: coral;
+}
\ No newline at end of file
--- a/templates/main.html
+++ b/templates/main.html
@@ -9,7 +9,9 @@
 </div>

 <body>
-   <h1>Device Listing and Status</h1>
+    <div class="container">
+        <div class="device_list">
+           <h3>Device Listing and Status</h3>

           {% for pin in pins %}
           <p>The {{ pins[pin].name }}
@@ -24,6 +26,14 @@
           {% if message %}
           <h2>{{ message }}</h2>
           {% endif %}
+        </div>

+        <div class="spacer"></div>
+
+        <div class="smart_meter"></div>
+    </div>
 </body>
+
+
+
 </html>
\ No newline at end of file