diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ff3ce74
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+
+
+Log-In
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..353a0ac
--- /dev/null
+++ b/index.js
@@ -0,0 +1,32 @@
+
+function login(){
+//taking i/p
+var username = document.getElementById("usernameid").value;
+var password = document.getElementById("passwordid").value;
+
+//checking for null values
+if(username === "" || password === ""){
+document.getElementById("loginfail").style.display="block";
+return false;
+}
+
+//request-xml
+var xmlReq = new XMLHttpRequest();
+
+xmlReq.open("POST", "https://moodshare.herokuapp.com/login", true);
+xmlReq.setRequestHeader("Access-Control-Allow-Origin", "*");
+xmlReq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
+xmlReq.send("username="+username+"&password="+password);
+
+//result of req
+xmlReq.onreadystatechange = function(){
+if(xmlReq.readyState == 4 && xmlReq.status == 202){
+document.getElementById("loginresult").style.display="block";
+}
+else if(xmlReq.readyState == 4 && xmlReq.status == 401){
+document.getElementById("loginfail").style.display="block";
+document.getElementById("passwordid").value = "";
+}
+};
+
+}
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..c79eab5
--- /dev/null
+++ b/main.css
@@ -0,0 +1,48 @@
+body {
+ background-image: url(back.jpeg);
+ background-size:cover;
+}
+#loginresult
+{
+ display:none;
+}
+
+#loginfail
+{
+ display:none;
+}
+
+.form {
+ margin-top:15%;
+ margin-left:30%;
+ margin-right:30%;
+}
+h1
+{
+ color:#fff;
+}
+
+.insert {
+ border:1px solid #AED0EA;
+ border-radius:8px;
+ box-shadow:0 0 10px #D7EBF9;
+}
+#Btn { padding-left:40px;
+ padding-right:40px;
+
+}
+@media only screen and (min-width: 150px) and (max-width:600px)
+{
+body
+{
+ font-size: 90%;
+}
+.form
+{
+ margin:5px;
+}
+#Btn { padding-left:20px;
+ padding-right:20px;
+
+}
+}