diff --git a/web/NeumorphicLoginPage/index.html b/web/NeumorphicLoginPage/index.html
new file mode 100644
index 0000000..354cc4e
--- /dev/null
+++ b/web/NeumorphicLoginPage/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>repl.it</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <div class="container">
+  <div class="brand-logo"></div>
+  <div class="title">Tech Geek</div>
+    <div class="inputsFields">
+        <label>EMAIL</label>
+        <input type="text" name="email" placeholder="example@email.com">
+        <label>PASSWORD</label>
+        <input type="password" name="password" placeholder="Enter password">
+      <button type="submit">LOGIN</button>
+    </div>
+  <div class="line">Forgot password?  <span id="dot"> . </span>Sign Up for Teck Geek</div>
+</div>
+
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/web/NeumorphicLoginPage/style.css b/web/NeumorphicLoginPage/style.css
new file mode 100644
index 0000000..c768ad2
--- /dev/null
+++ b/web/NeumorphicLoginPage/style.css
@@ -0,0 +1,128 @@
+/* Importing font*/ 
+@import url('https://fonts.googleapis.com/css2?family=KoHo:wght@500&display=swap');
+
+
+/* Body */
+body{
+  margin:0;
+  width:100vm;
+  height:100vh;
+  background:#ecf0f3;
+  display:flex;
+  align-items:center;
+  text-align:center;
+  place-items:center;
+  overflow:hidden;
+  font-family: 'KoHo', sans-serif;
+  
+}
+
+
+.container{
+  width:350px;
+  height:520px;
+  background:#ecf0f3;
+  padding:40px;
+  border-radius:20px;
+  box-sizing : border-box;  
+  box-shadow : 14px 14px 20px #cbced1, -14px -14px 20px white;
+  
+  /* Centering the div element*/
+  position: absolute;
+	top:0;
+	bottom: 0;
+	left: 0;
+	right: 0;  	
+	margin: auto;
+}
+
+/* Logo */
+.brand-logo{
+  height:100px;
+  width:100px;  
+   background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTinbvOM0q29f5Ul01M4SrtmXFR1qvjIpOfo6xx5KRaGvtLlGILE5A-xXoSxDY2geCiK4g&usqp=CAU");
+   background-size: 160px;
+   background-position:-30px;
+  margin:auto;
+  border-radius:50%;
+  box-sizing : border-box;
+  box-shadow:7px 7px 10px #cdced1, -7px -7px 10px white;
+}
+ /* ---------------------- */
+
+/* Title */
+.title{
+  margin-top:10px;
+  font-weight:900;
+  font-size:1.6rem;
+  color: #1DA1F2;
+  letter-spacing:1px;
+}
+
+/* --------------- */
+
+/*  Input fields */
+
+.inputsFields{
+  text-align:left;
+  margin-top:30px;
+}
+label,input,button{
+  display:block;
+  width:100%;
+  padding:0;
+  border:none;
+  outline:none;
+  box-sizing : border-box;
+}
+
+label{
+  margin-bottom:4px;
+  font-size:16px;
+}
+label:nth-of-type(2){
+  margin-top:14px;
+}
+
+input{
+  background: #ecf0f3;
+  padding:10px;
+  padding-left:20px;
+  font-size:14px;
+  border-radius:50px;
+  height:50px;
+  box-shadow:inset 6px 6px 6px #cdced1, inset -6px -6px 6px white;
+}
+
+input::placeholder{
+  color:gray;
+}
+
+button{
+  margin-top:20px;
+  background:#1DA1F2;
+  height:40px;
+  border-radius:20px;
+  cursor:pointer;
+  font-weight:900;
+  font-family: 'KoHo', sans-serif;
+  letter-spacing:1px;
+  box-shadow:6px 6px 6px #cdced1, -6px -6px 6px white;
+  transition:0.5s;
+}
+button:hover{
+  box-shadow:none;
+}
+ /* --------------------------- */
+.line{
+  color:#1DA1F2;
+  font-size:13px;
+  letter-spacing:0.2px;
+  margin-top:15px;
+}
+
+#dot{
+  vertical-align: super;
+  font-weight:600;
+}
+
