diff --git a/login-page/bg.webp b/login-page/bg.webp
new file mode 100644
index 0000000000000000000000000000000000000000..75b88f693474ca1f42c8287ff9ecd7443d23bd5f
Binary files /dev/null and b/login-page/bg.webp differ
diff --git a/login-page/index.html b/login-page/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..2c76f81297b5ad0d73642d7b89aab61cfd01e39c
--- /dev/null
+++ b/login-page/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta name="viewport" content="width=device-width, initial scale=1.0">
+ <title>Sign In and Sign Up Form</title>
+ <link rel="stylesheet" href="style.css">
+ <script src="https://kit.fontawesome.com/8505941c5b.js" crossorigin="anonymous"></script>
+
+</head>
+<body>
+<div class="container">
+ <div class="form-box">
+ <h1 id="title">Sign Up</h1>
+ <form>
+ <div class="input-group">
+ <div class="input-field" id="nameField">
+ <i class="fa-solid fa-user"></i>
+ <input type="text" placeholder="Name">
+ </div>
+
+ <div class="input-field">
+ <i class="fa-solid fa-envelope"></i>
+ <input type="email" placeholder="Email">
+ </div>
+
+ <div class="input-field">
+ <i class="fa-solid fa-lock"></i>
+ <input type="password" placeholder="Password">
+ </div>
+ <p>Lost password <a href="#">Click here!</a></p>
+
+
+ </div>
+ <div class="btn-field">
+ <button type="button" id="signupBtn">Sign up</button>
+ <button type="button" id="signinBtn" class="disable">Sign in</button>
+ </div>
+ </form>
+ </div>
+</div>
+<script>
+
+let signupBtn = document.getElementById("signupBtn");
+let signinBtn = document.getElementById("signinBtn");
+let nameField = document.getElementById("nameField");
+let title = document.getElementById("title");
+
+signinBtn.onclick = function(){
+ signinBtn.style.background = "#3c00a0";
+ signupBtn.style.background = "#eaeaea";
+ signupBtn.style.color = "#555";
+ signinBtn.style.color = "#fff";
+ nameField.style.maxHeight = "0";
+ title.innerHTML = "Sign In";
+ signupBtn.classList.add("disable");
+ signupBtn.classList.remove("disable");
+}
+
+signupBtn.onclick = function(){
+ signupBtn.style.background = "#3c00a0";
+ signinBtn.style.background = "#eaeaea";
+ signupBtn.style.color = "#fff";
+ signinBtn.style.color = "#555";
+ nameField.style.maxHeight = "60px";
+ title.innerHTML = "Sign Up";
+ signupBtn.classList.remove("disable");
+ signinBtn.classList.add("disable");
+}
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/login-page/style.css b/login-page/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..4a6bb3ebd2b25d53ede043cc5121d726120efdd4
--- /dev/null
+++ b/login-page/style.css
@@ -0,0 +1,93 @@
+*{
+ margin: 0;
+ padding: 0;
+ font-family: Montserrat, "Open Sans", Arial, Helvetica, sans-serif;
+ box-sizing: border-box;
+}
+
+.container{
+ width: 100%;
+ height: 100vh;
+ background-image: linear-gradient(rgba(0,0,50,0.8), rgba(0,0,50,0.8)), url(bg.webp);
+ background-position: center;
+ background-size: cover;
+ position: relative;
+}
+
+.form-box{
+ width: 90%;
+ max-width: 30%;
+ position: relative;
+ top: 0%;
+ left: 50%;
+ transform: translate(-50%, 50%);
+ background: #fff;
+ padding: 50px 60px 70px;
+ text-align: center;
+ border-radius: 25px;
+}
+
+.form-box h1{
+ font-size: 30px;
+ margin-bottom: 60px;
+ color: #3c00a0;
+ position: relative;
+}
+
+.input-field{
+ background: #eaeaea;
+ margin: 15px 0;
+ border-radius: 3px;
+ display: flex;
+ align-items: center;
+ max-height: 65px;
+ transition: max-height 0.5s;
+ overflow: hidden;
+}
+
+input{
+ width: 100%;
+ background: transparent;
+ border: 0;
+ outline: 0;
+ padding: 18px;
+}
+
+.input-field i{
+ margin-left: 15px;
+ color: #999;
+}
+
+form p{
+ text-align: center;
+ font-size: 13px;
+ margin-bottom: 10px;
+}
+
+form p a{
+ text-decoration: none;
+ color: #3c00a0;
+}
+
+.btn-field{
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+
+.btn-field button{
+ flex-basis: 48%;
+ background: #3c00a0;
+ color: #fff;
+ height: 40px;
+ border-radius: 20px;
+ border: 0;
+ outline: 0;
+ cursor: pointer;
+ transition: background 1s;
+}
+
+.btn-field button.disable{
+ background: #eaeaea;
+ color: #555;
+}