column layout with style sheet

Haritha2298 · Feb 18, 2020 · 5e61703 · 5e61703
1 parent 7d9f747
commit 5e61703
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 6 deletions.
diff --git a/.ipynb_checkpoints/EDA-checkpoint.ipynb b/.ipynb_checkpoints/EDA-checkpoint.ipynb
diff --git a/app/__init__.py b/app/__init__.py
@@ -0,0 +1,9 @@
+from flask import Flask
+
+from flask_bootstrap import Bootstrap
+
+app = Flask(__name__)
+
+bootstrap = Bootstrap(app)
+
+from app import routes
diff --git a/app/routes.py b/app/routes.py
@@ -0,0 +1,7 @@
+from flask import render_template
+from app import app
+
+@app.route('/')
+@app.route('/index')
+def index():
+    return render_template('index.html')
diff --git a/app/static/style.css b/app/static/style.css
@@ -0,0 +1,25 @@
+* {
+  box-sizing: border-box;
+}
+
+/* Create two unequal columns that floats next to each other */
+.column {
+  float: left;
+  padding: 10px;
+  height: 300px; /* Should be removed. Only for demonstration */
+}
+
+.left {
+  width: 25%;
+}
+
+.right {
+  width: 75%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -0,0 +1,38 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="style.css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- <style>
+        * {
+          box-sizing: border-box;
+        }
+        
+        /* Create two unequal columns that floats next to each other */
+        .column {
+          float: left;
+          padding: 10px;
+          height: 300px; /* Should be removed. Only for demonstration */
+        }
+        
+        .left {
+          width: 25%;
+        }
+        
+        .right {
+          width: 75%;
+        }
+        
+        /* Clear floats after the columns */
+        .row:after {
+          content: "";
+          display: table;
+          clear: both;
+        }
+        </style>  -->
+    </head>
+    <body>
+        <!-- <div>Visualization: <a href="/index">Home</a></div> -->
+        <hr>
+        {% block content %}{% endblock %}
+    </body>
+</html>
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% block content %}
+  <h2>Visualization</h2>
+
+  <div class="row">
+
+    <div class="column left" style="background-color:#aaa;">
+      <h2>Navigation Bar</h2>
+    </div>
+
+    <div class="column right" style="background-color:#bbb;">
+      <h2>Map of Amsterdam</h2>
+    </div>
+
+  </div>
+
+{% endblock %}
+
diff --git a/run.py b/run.py
@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from app import routes