Anjuli08 · asthami · Oct 8, 2022
diff --git a/A login page/A login Page/index.html b/A login page/A login Page/index.html
@@ -0,0 +1,78 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      crossorigin="anonymous"
+    />
+    <title>form</title>
+</head>
+<body>
+    <div class="container">
+        <div class="content">
+            <div class="logo">
+                <img src="roject.jpg" alt="" height="150px" width="250px">
+            </div>
+            <div class="image">
+                <img src="woman.png" alt="">
+            </div>
+            <div class="text">
+                Start for free and <br> get ready to create someting interesting !
+            </div>
+        </div>
+        <form id="form">
+            <div class="social">
+                <div class="title">What do you want to make?</div>
+                <div class="question">Already have an account?<br><br>
+                <span>Sign In</span></div>
+                <div class="btn">
+                    <div class="btn1">
+                        <img src="https://img.icons8.com/color/30/000000/google-logo.png" alt="">
+                        Sign Up
+                    </div>
+                    <div class="btn2">
+                        <img src="https://img.icons8.com/ios-filled/30/ffffff/facebook-new.png" alt="">
+                        Sign Up
+                    </div>
+                </div>
+                <div class="or">Or</div>
+             </div>
+            <div>
+                <label for="Username">Username</label>
+                <i class='fas fa-user-alt'></i>
+                <input type="text" name="User" id="Username" placeholder="Harry Potter">
+                <i class="fas fa-exclamation-circle failure-icon"></i>
+                <i class="far fa-check-circle success-icon"></i>
+                <div class="error"></div>
+            </div>
+            <div>
+                <label for="Email">Email</label>
+                <i class="fa fa-envelope"></i>
+                <input type="email" name="email" id="email" placeholder="harry123@gmail.com">
+                <i class="fas fa-exclamation-circle failure-icon"></i>
+                <i class="far fa-check-circle success-icon"></i>
+                <div class="error"></div>
+            </div>
+            <div>
+                <label for="Password">Password</label>
+                <i class="fas fa-lock"></i>
+                <input type="password" name="Password" id="Password" placeholder="har23@5%3">
+                <i class="far fa-eye eye" id="togglePassword" onclick="Toggle()"></i>
+                <i class="fas fa-exclamation-circle failure-icon"></i>
+                <i class="far fa-check-circle success-icon"></i>
+                <div class="error"></div>
+            </div>
+            <button id ="button" type="submit">Submit</button>
+        </form>
+
+    </div>
+    <script src="main.js"></script>
+
+
+</body>
+</html>
diff --git a/A login page/A login Page/main.js b/A login page/A login Page/main.js
@@ -0,0 +1,47 @@
+let id=(id)=>document.getElementById(id);
+let classes=(classes)=>document.getElementsByClassName(classes);
+let username=id("Username"),
+email=id("email"),
+password=id("Password"),
+form=id("form"),
+
+erromessage=classes("error"),
+successicon=classes("success-icon"),
+failureicon=classes("failure-icon");
+form.addEventListener("submit",(e)=>{
+    e.preventDefault();
+    validation(username, 0, "Username cannot be blank");
+    validation(email, 1, "Email cannot be blank");
+    validation(password, 2, "Password cannot be blank");
+})
+let validation=(id,serial,message)=>{
+    if(id.value.trim()==="")
+    {
+        erromessage[serial].innerHTML=message;
+        failureicon[serial].style.opacity="1";
+        successicon[serial].style.opacity="0";
+
+    }
+    else{
+        erromessage[serial].innerHTML="";
+        failureicon[serial].style.opacity="0";
+        successicon[serial].style.opacity="1";
+    }
+};
+function Toggle() {
+    var temp = document.getElementById("Password"),
+    eyeicon=classes("eye");
+
+    if (temp.type === "password") {
+        temp.type = "text";
+        eyeicon.style.color="blue";
+
+    }
+    else {
+        temp.type = "password";
+        eyeicon.style.color="black";
+    }
+}
+
+
+
diff --git a/A login page/A login Page/roject (1).jpg b/A login page/A login Page/roject (1).jpg
diff --git a/A login page/A login Page/roject.jpg b/A login page/A login Page/roject.jpg
diff --git a/A login page/A login Page/style.css b/A login page/A login Page/style.css
@@ -0,0 +1,179 @@
+*{
+    margin: 5px;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family:sans-serif
+}
+form {
+    width: 45%;
+    max-width: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+}
+label{
+    font-weight: bolder;
+    display: block;
+    margin-bottom:10px;;
+}
+.title {
+    font-size: 25px;
+    font-weight: bold;
+    margin-bottom: 20px;
+
+}
+form div input {
+    width:80%;
+    height:30px;
+    padding-right: 10px;
+    padding-left: 30px;
+    padding-top:2px;
+    margin: 5px;
+    border: 2px solid black;
+    border-radius: 8px;
+    box-shadow: 1px;;
+}
+form div{
+    position: relative;
+    margin-bottom: 15px;
+
+}
+input:focus{
+    border: 2px solid grey;
+}
+form div i{
+    position: absolute;
+    padding: 10px;
+}
+.failure-icon,.error {
+  color: red;
+}
+
+.success-icon {
+  color: green;
+}
+
+.error {
+  font-size: 14.5px;
+  margin-top: 5px;
+}
+.success-icon,
+.failure-icon {
+  right: 0;
+  opacity: 0;
+}
+button{
+    margin-top:10px;
+    width: 80%;
+    height: 45px;
+    border:3px;
+    border-radius: 10px;
+    background-color: aliceblue;
+    color: black;
+    font-weight: bold;
+    font-size: medium;
+    cursor: pointer;
+    transition: all 0.1s ease;
+}
+button:hover{
+    background-color: rgb(94, 159, 245);
+}
+.eye{
+    cursor: pointer;
+}
+.eye:hover{
+    color:rgb(0, 132, 255)
+
+}
+.btn{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 10px;
+}
+.btn1,.btn2{
+    padding: 10px,5px;
+    width:100%;
+    display: flex;
+    gap:15px;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid #c4c4c4;
+    border-radius: 8px;
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+}
+.btn2{
+    background-color: blue;
+}
+.or{
+    text-align: center;
+}
+span{
+    cursor: pointer;
+    font-size: larger;
+    color: rgb(177, 41, 0);
+}
+.container
+{
+    display: flex;
+    flex-direction: row;
+}
+.content{
+    display: flex;
+    flex-direction:column;
+    justify-content: space-between;
+    background-color: rgb(94, 159, 245);
+    width: 55%;
+    min-height: 100vh;
+    padding: 10px,20px;
+}
+.text{
+    padding: 15px;
+    font-size: larger;
+    font-weight: bolder;
+}
+.image img {
+    height: 800px;
+    width: 1200px;
+    object-fit: contain;
+}
+@media(max-width:900px) {
+    .container{
+        flex-direction: column;
+    }
+    form,
+  .content {
+    width: 100%;
+  }
+
+  .btn {
+    flex-direction: column;
+  }
+  .image {
+    height: 70vh;
+  }
+}
+html,body{
+    width:100%;
+    height:100%
+}
+body{
+    background: linear-gradient(45deg, #ee7752, #e73c7e, #bd970d, #c50623);
+    background-size: 400% 400%;
+    animation: gradient 15s ease infinite;
+}
+@keyframes gradient{
+    0%{
+        background-position: 0%,5%;
+    }
+    50%{
+        background-position: 100%,50%;
+    }
+    100%{
+        background-position: 0% 50%;
+    }
+}
diff --git a/A login page/A login Page/woman.png b/A login page/A login Page/woman.png