Started work on index

2 files changed, 169 insertions, 0 deletions

diff --git a/static/scripts.js b/static/scripts.js
new file mode 100644
index 0000000..390c2c3
--- /dev/null
+++ b/static/scripts.js
@@ -0,0 +1,73 @@
+$(document).ready(function() {
+    Highcharts.chart('longterm_chart', {
+        chart: {
+            type: 'area'
+        },
+
+        title: {
+            text: 'Estimated Worldwide Population Growth by Region'
+        },
+
+        subtitle: {
+            text: 'Source: Wikipedia.org'
+        },
+
+        xAxis: {
+            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
+            tickmarkPlacement: 'on',
+            title: {
+                enabled: false
+            }
+
+        },
+
+        yAxis: {
+            title: {
+                text: 'Billions'
+            },
+
+            labels: {
+                    formatter: function() {
+                    return this.value / 1000;
+
+                }
+
+            }
+
+        },
+
+        tooltip: {
+            split: true,
+            valueSuffix: ' millions'
+        },
+
+        plotOptions: {
+            area: {
+                stacking: 'normal',
+                lineColor: '#666666',
+                lineWidth: 1,
+                marker: {
+                    lineWidth: 1,
+                    lineColor: '#666666'
+                }
+            
+        },
+
+        series: [{
+            name: 'Asia',
+            data: [502, 635, 809, 947, 1402, 3634, 5268]
+        }, {
+            name: 'Africa',
+            data: [106, 107, 111, 133, 221, 767, 1766]
+        }, {
+            name: 'Europe',
+            data: [163, 203, 276, 408, 547, 729, 628]
+        }, {
+            name: 'America',
+            data: [18, 31, 54, 156, 339, 818, 1201]
+        }, {
+            name: 'Oceania',
+            data: [2, 2, 2, 6, 13, 30, 46]
+        }]
+    }});
+})
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..2bc7b32
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,96 @@
+body {
+    font-family: Helvetica, sans-serif;
+}
+  
+header {
+    font-size: large;
+    padding-left: 1%;
+}
+
+a {
+    color: black;
+    font-weight: bold;
+    padding-top: 1px;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+header nav {
+    flex-grow: 1;
+    display: inline;
+}
+
+#externallinks {
+    background-color: black;
+    text-align: left;
+}
+
+#externallinks nav ul li a {
+    color: #f1f3f3;
+    font-size: smaller;
+}
+
+header div {
+    padding-left: 20px;
+    /* padding-bottom: 10px; */
+}
+
+nav ul {
+    margin: 0;
+    padding: 0;
+}
+
+nav li {
+    display: inline-block;
+    list-style-type: none;
+}
+
+nav a {
+    text-decoration: none;
+    display: block;
+    padding: 5px 6px 5px 6px;
+    color: black;
+}
+
+footer {
+    padding-top: 100px;
+    font-size: x-small;
+}
+
+#main_content {
+    padding-left: 2.5%;
+    padding-right: 2.5;
+}
+
+  
+#multicharts ul li {
+    list-style-type: none;
+    width: 45%;
+    display: inline-flex;
+    /* background-color: pink; */
+    min-height: 350px;
+    margin-bottom: 7px;
+    overflow: hidden;
+    flex-direction: column;
+    justify-content: space-between;
+    /* border-color: black;
+    border-width: 2px;
+    border-radius: 1;
+    border-style: ridge; */
+}
+  
+.chart_container {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+@media screen and (max-width: 1200px) {
+    #multicharts ul li {
+      width: 100%;
+      min-height: 500px;
+      height: 100%;
+    }
+}
\ No newline at end of file