diff --git a/Exercise 1/index.html b/Exercise 1/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..0180ddf34eea99189cd9ef2d71272ba7dabdd980
--- /dev/null
+++ b/Exercise 1/index.html	
@@ -0,0 +1,78 @@
+<html>
+
+<head>
+
+    <title>Building - Heat Demand</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+        crossorigin="">
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+        crossorigin=""></script>
+        
+    <script src="building_data.js"></script>
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+    <div id="mapid"></div>
+    <script>
+        var mymap = L.map('mapid').setView([48.79205, 9.20758], 16);
+        var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
+            maxZoom: 18,
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        });
+        // select one basemap from https://leaflet-extras.github.io/leaflet-providers/preview/
+        var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+            subdomains: 'abcd',
+            maxZoom: 19
+        });
+        CartoDB_Positron.addTo(mymap);
+
+        function onEachFeature(feature, layer) {
+            layer.bindPopup(
+                '<h4>' +
+                feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties
+                .Specific_s +
+                '[kWh/m².year] </p>');
+        }
+
+        function getColor(d) {
+            return d > 250 ? '#F22E22' :
+                d > 200 ? '#F56D1F' :
+                d > 150 ? '#F9A717' :
+                d > 125 ? '#FECE02' :
+                d > 100 ? '#F6EC00' :
+                d > 75 ? '#D1E023' :
+                d > 50 ? '#B2D531' :
+                d > 50 ? '#A4C711' :
+                d > 0 ? '#61B949' :
+                '#FFEDA0';
+        }
+
+        function style(feature) {
+            return {
+                fillColor: getColor(feature.properties.Specific_s),
+                weight: 1,
+                opacity: 1,
+                color: 'white',
+                // dashArray: '3',
+                fillOpacity: 0.95
+            };
+        }
+        L.geoJSON(building_data, {
+            onEachFeature: onEachFeature,
+            style: style,
+        }).addTo(mymap);
+    </script>
+
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file
