diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4057ddb
--- /dev/null
+++ b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather in Cologne</title>
+    <style>
+        body {
+            font-family: sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-top: 50px;
+            background-color: #f0f0f0;
+        }
+        #weather-info {
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            background-color: #fff;
+            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>Weather in Cologne</h1>
+    <div id="weather-info">
+        <p>Loading weather data...</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..d1ae0a5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const weatherInfoDiv = document.getElementById('weather-info');
+    const apiUrl = 'https://api.open-meteo.com/v1/forecast?latitude=50.93333&longitude=6.95&current=temperature_2m,relative_humidity_2m,wind_speed_10m';
+
+    fetch(apiUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (data && data.current) {
+                const temperature = data.current.temperature_2m;
+                const humidity = data.current.relative_humidity_2m;
+                const windSpeed = data.current.wind_speed_10m;
+
+                weatherInfoDiv.innerHTML = `
+                    <p>Temperature: ${temperature}°C</p>
+                    <p>Humidity: ${humidity}%</p>
+                    <p>Wind Speed: ${windSpeed} km/h</p>
+                `;
+            } else {
+                throw new Error('Invalid weather data format');
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching weather data:', error);
+            weatherInfoDiv.innerHTML = '<p>Could not fetch weather data. Please try again later.</p>';
+        });
+});
