diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..2afd4d8
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,89 @@
+* {
+  font: Helvetica, sans-serif;
+}
+
+body {
+  padding: 10%;
+  background-color: #006d18;
+  background: linear-gradient(-45deg, #58f5c6, #01278d, #fac95f, #a30ddf);
+  background-size: 400% 400%;
+  animation: gradient 12s ease infinite;
+  height: 100vh;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+h1 {
+  text-align: center;
+}
+
+input {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: auto;
+  padding: 1em;
+  padding-left: 4em;
+  box-sizing: border-box;
+  border: 0.2em solid #239c78;
+  border-radius: 1em;
+  background-size: 2em;
+  background-position: 1em;
+  background-repeat: no-repeat;
+  background-color: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(5px);
+  background-image: url("../images/youtube_bw.png");
+}
+
+input:focus {
+  transition: width 0.4s ease-in-out, border-radius 1.2s ease-in-out, background-color 1.2s ease-in-out, background-image 1.2s ease-in-out;
+  width: 70%;
+  color: #006d18;
+  border-radius: 0.1em;
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
+  background-image: url("../images/youtube_wb.png");
+}
+
+input:not(:placeholder-shown) {
+  width: auto;
+}
+
+button {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  width: 30%;
+  padding: 1em;
+  padding-left: 4em;
+  box-sizing: border-box;
+  border: 0.2em solid #239c78;
+  border-radius: 1em;
+  background-size: 2em;
+  background-position: 1em;
+  background-repeat: no-repeat;
+  background-color: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(5px);
+  background-image: url("../images/download_bw.png");
+}
+
+button:focus {
+  transition: width 0.4s ease-in-out, border-radius 1.2s ease-in-out, background-color 1.2s ease-in-out, background-image 1.2s ease-in-out;
+  width: 30%;
+  color: #006d18;
+  border-radius: 0.1em;
+  background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
+  background-image: url("../images/download_wb.png");
+}
+
+/*# sourceMappingURL=index.css.map */
diff --git a/css/index.css.map b/css/index.css.map
new file mode 100644
index 0000000..649c0ae
--- /dev/null
+++ b/css/index.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["index.scss"],"names":[],"mappings":"AAUA;EACI,MAXS;;;AAcb;EACI;EACA,kBAfY;EAgBZ;EACH;EACA;EACA;;;AAGD;EACC;IACC;;EAED;IACC;;EAED;IACC;;;AAIF;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA,OAzDY;EA0DZ;EACA;EACA;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA,OAtFY;EAuFZ;EACA;EACA;EACA","file":"index.css"}
\ No newline at end of file
diff --git a/css/index.scss b/css/index.scss
new file mode 100644
index 0000000..21fcaf2
--- /dev/null
+++ b/css/index.scss
@@ -0,0 +1,93 @@
+$font-stack: Helvetica, sans-serif;
+$primary_color: #006d18;
+$secondary_color: #239c78;
+$bg_grad_color_1: #58f5c6;
+$bg_grad_color_2: #01278d;
+$bg_grad_color_3: #fac95f;
+$bg_grad_color_4: #a30ddf;
+$short-fade: 0.4s;
+$long-fade: 1.2s;
+
+* {
+    font: $font-stack;
+}
+
+body {
+    padding: 10%;
+    background-color: $primary_color;
+    background: linear-gradient(-45deg, $bg_grad_color_1, $bg_grad_color_2, $bg_grad_color_3, $bg_grad_color_4);
+	background-size: 400% 400%;
+	animation: gradient 12s ease infinite;
+	height: 100vh;
+}
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
+h1 {
+    text-align: center;
+}
+input {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+    padding: 1em;
+    padding-left: 4em;
+    box-sizing: border-box;
+    border: 0.2em solid $secondary_color;
+    border-radius: 1em;
+    background-size: 2em;
+    background-position: 1em; 
+    background-repeat: no-repeat;
+    background-color: rgba(255,255,255,0.2);
+    backdrop-filter: blur(5px);
+    background-image: url('../images/youtube_bw.png');
+}
+input:focus {
+    transition: width $short-fade ease-in-out, border-radius $long-fade ease-in-out, background-color $long-fade ease-in-out, background-image $long-fade ease-in-out;
+    width: 70%;
+    color: $primary_color;
+    border-radius: 0.1em;
+    background-color: rgba(0,0,0,0.7);
+    backdrop-filter: blur(5px);
+    background-image: url('../images/youtube_wb.png');
+}
+input:not(:placeholder-shown){
+    width: auto;
+}
+button {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    width: 30%;
+    padding: 1em;
+    padding-left: 4em;
+    box-sizing: border-box;
+    border: 0.2em solid $secondary_color;
+    border-radius: 1em;
+    background-size: 2em;
+    background-position: 1em; 
+    background-repeat: no-repeat;
+    background-color: rgba(255,255,255,0.2);
+    backdrop-filter: blur(5px);
+    background-image: url('../images/download_bw.png');
+}
+button:focus {
+    transition: width $short-fade ease-in-out, border-radius $long-fade ease-in-out, background-color $long-fade ease-in-out, background-image $long-fade ease-in-out;
+    width: 30%;
+    color: $primary_color;
+    border-radius: 0.1em;
+    background-color: rgba(0,0,0,0.7);
+    backdrop-filter: blur(5px);
+    background-image: url('../images/download_wb.png');
+}
\ No newline at end of file
diff --git a/images/download_bw.png b/images/download_bw.png
new file mode 100644
index 0000000..a4e248a
Binary files /dev/null and b/images/download_bw.png differ
diff --git a/images/download_wb.png b/images/download_wb.png
new file mode 100644
index 0000000..5747925
Binary files /dev/null and b/images/download_wb.png differ
diff --git a/images/youtube_bw.png b/images/youtube_bw.png
new file mode 100644
index 0000000..8719dc7
Binary files /dev/null and b/images/youtube_bw.png differ
diff --git a/images/youtube_wb.png b/images/youtube_wb.png
new file mode 100644
index 0000000..5fb5a52
Binary files /dev/null and b/images/youtube_wb.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..29a964a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YT-Downloader</title>
+    <link rel="stylesheet" href="css/index.css"
+</head>
+<body>
+    <script src="js/index.js"></script>
+    <h1>Video Downloader</h1>
+    <center>
+        <form id="DownloadForm">
+            <input type="text" name="url" id="url" placeholder="Enter your url here">
+            <button type="submit" id="downloadbutton" onclick="ytdl()">Download</button>
+        </form>
+    </center>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..c375ab4
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,27 @@
+// https://www.youtube.com/watch?v=HzqnQThFSX8&list=RDHzqnQThFSX8&start_radio=1
+console.log("Log test");
+
+function ytdl(){
+    var url = document.getElementById("url");
+    if(url.value === ""){
+        alert("Please enter a URL")
+        return
+    }
+    console.log(url.value);
+    if(url.value.includes("youtube.com/watch?v=")){
+        var ytid_prep1 = url.value.split("=");
+        if(ytid_prep1[1].includes("&")){
+            var ytid_prep2 = ytid_prep1[1].split("&");
+            var ytid = ytid_prep2[0];
+        } else {
+            var ytid = ytid_prep1[1];
+        }
+    } else if(url.value.includes("youtu.be/")){
+        var ytid_prep1 = url.value.split(".be/");
+        var ytid = ytid_prep1[1];
+    } else {
+        alert("URL is not compliant with this website - I am kinda sorry(Just kidding)")
+    }
+    console.log(ytid);
+
+}
\ No newline at end of file