diff --git a/home/index.html b/home/index.html
new file mode 100644
index 0000000..2217821
--- /dev/null
+++ b/home/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Login
+
+
+
+
+ Welcome!
+
+
+
\ No newline at end of file
diff --git a/home/styles.css b/home/styles.css
new file mode 100644
index 0000000..4d87407
--- /dev/null
+++ b/home/styles.css
@@ -0,0 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: #121212;
+ height: 100vh;
+}
+
+.backgroundImage {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: blur(10px);
+ pointer-events: none;
+}
+
+.welcome {
+ color: white;
+ position: relative;
+ left: 30px;
+ top: 30px;
+ font-size: 60px;
+ font-family: 'Poppins', sans-serif;
+}
\ No newline at end of file
diff --git a/images/background.jpg b/images/background.jpg
new file mode 100644
index 0000000..22b4234
Binary files /dev/null and b/images/background.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ef48c85
--- /dev/null
+++ b/index.html
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/login/index.html b/login/index.html
new file mode 100644
index 0000000..acd9953
--- /dev/null
+++ b/login/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+
+ Login
+
+
+
+
+
+
+
Login
+
+
+
Username
+
Please put a username
+
Invalid Username
+
+
+
+
+
+
Password
+
Please put a password
+
Invalid Password
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/login/java.js b/login/java.js
new file mode 100644
index 0000000..22afa18
--- /dev/null
+++ b/login/java.js
@@ -0,0 +1,52 @@
+const input = document.querySelectorAll("input");
+
+input.forEach(InputElement => { InputElement.addEventListener('input', function() {
+ let username = document.getElementById("usernameInput").value;
+ let password = document.getElementById("passwordInput").value;
+
+ document.getElementById("usernameError").style.display = "none";
+ document.getElementById("passwordError").style.display = "none";
+
+ if(!(username == "") && !(password == "")) {
+ document.getElementById("usernameWarning").style.display = "none";
+ document.getElementById("passwordWarning").style.display = "none";
+ }
+ else if(!(username == "")){
+ document.getElementById("usernameWarning").style.display = "none";
+ } else if(!(password == "")) {
+ document.getElementById("passwordWarning").style.display = "none";
+ }
+})});
+
+function login() {
+ let username = document.getElementById("usernameInput").value;
+ let password = document.getElementById("passwordInput").value;
+
+ if(username == "" && password == "") {
+ document.getElementById("usernameWarning").style.display = "inline";
+ document.getElementById("passwordWarning").style.display = "inline";
+ return;
+ }
+ else if(username == ""){
+ return document.getElementById("usernameWarning").style.display = "inline";
+ } else if(password == "") {
+ return document.getElementById("passwordWarning").style.display = "inline";
+ }
+
+ if(username == "admin" && password == "admin") {
+ console.log("Logged in!");
+ window.location.href = "/home"
+ } else {
+ document.getElementById("usernameError").style.display = "inline";
+ document.getElementById("passwordError").style.display = "inline";
+ return;
+ }
+}
+
+function enterKey(event) {
+ if(event.keyCode === 13) {
+ login()
+ } else {
+ return;
+ }
+}
\ No newline at end of file
diff --git a/login/styles.css b/login/styles.css
new file mode 100644
index 0000000..fa96784
--- /dev/null
+++ b/login/styles.css
@@ -0,0 +1,169 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ background-color: #121212;
+ height: 100vh;
+}
+
+.backgroundImage {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ filter: blur(10px);
+ pointer-events: none;
+}
+
+.loginBackground {
+ position: relative;
+ width: 500px;
+ height: 600px;
+ background-color: #152238;
+ border-radius: 10px;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.loginComponents {
+ position: relative;
+ width: 95%;
+ height: 95%;
+ left: calc(50% + 1px);
+ top: calc(50% + 1px);
+ transform: translate(-50%, -50%);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-family: 'Poppins', sans-serif;
+ color: white;
+}
+
+.loginHeading {
+ font-size: 50px;
+ font-weight: 500;
+ width: 100%;
+ text-align: center;
+}
+
+.usernameComponents {
+ position: relative;
+ left: 50%;
+ transform: translate(-50%);
+ width: max-content;
+}
+
+.usernameArea {
+ gap: 10px;
+ display: flex;
+ align-items: center;
+}
+
+.usernameTitle {
+ color: rgb(209, 209, 209);
+ font-weight: 300;
+ font-size: 19px;
+}
+
+.usernameWarning {
+ color: orange;
+ font-weight: 300;
+ font-size: 15px;
+ display: none;
+}
+
+.usernameError {
+ color: red;
+ font-weight: 300;
+ font-size: 15px;
+ display: none;
+}
+
+.usernameInput {
+ all: unset;
+ background-color: #0e1829;
+ height: 40px;
+ width: 320px;
+ border-radius: 7px;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-weight: 300;
+}
+
+.passwordComponents {
+ position: relative;
+ left: 50%;
+ top: 20px;
+ transform: translate(-50%);
+ width: max-content;
+}
+
+.passwordArea {
+ gap: 10px;
+ display: flex;
+ align-items: center;
+}
+
+.passwordTitle {
+ color: rgb(209, 209, 209);
+ font-weight: 300;
+ font-size: 19px;
+}
+
+.passwordWarning {
+ color: orange;
+ font-weight: 300;
+ font-size: 15px;
+ display: none;
+}
+
+.passwordError {
+ color: red;
+ font-weight: 300;
+ font-size: 15px;
+ display: none;
+}
+
+.passwordInput {
+ all: unset;
+ background-color: #0e1829;
+ height: 40px;
+ width: 320px;
+ border-radius: 7px;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-weight: 300;
+}
+
+.signInButton {
+ all: unset;
+ position: relative;
+ left: 50%;
+ width: 120px;
+ height: 50px;
+ background-color: #0e1829;
+ text-align: center;
+ transform: translate(-50%);
+ cursor: pointer;
+ margin-top: 50px;
+ transition: 0.3s background-color;
+ border-radius: 8px;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.signInButton:hover{
+ background-color: #0a121f;
+}
\ No newline at end of file