Skip to main content

LOGIN FORM MWLF-105 download here free // DOWNLOAD FREE OF COST LOGIN DESIGN//

 




DOWNLOAD HERE


<!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">
    <title>MWLF105</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
body{
    background: black;

}
    .frame{
        background: gray;
        margin:30px auto;
        border: 2px solid grey;
        width: 500px;
        height: 500px;
        box-shadow: 0px 0px 10px white;
    }
    #circle{
        margin: 30px auto;
        border-radius: 40%;
        height: 150px;
        width: 120px;
        /* background: black; */
        border: 2px solid black;
        box-shadow: 0px 0px 5px black;
        /* display: block; */
        /* gap: 10px; */
   
    }
    .flex{
        margin:35px auto;
        display: flex;
    }
    #eye1{
margin: auto;


height: 30px;
width: 30px;
border-radius: 50%;
background: black;
box-shadow: 0px 0px 5px white;
}
#eye2{

    margin: auto;
    border-radius: 50%;
height: 30px;
width: 30px;
background: black;
box-shadow: 0px 0px 5px white;
}
#smile{
   
margin: 40px auto;
height: 5px;
width: 70px;
border-radius: 50%;
background: black;
box-shadow: 0px 0px 5px white;

}


.login{
   
    /* border: 2px solid black; */
    margin: 50px auto;
    width: 60%;
}
input[type='email'],input[type='password']{
    width: 100%;
    height: 40px;
    font-size: 20px;
    margin: 10px auto;
    border: 2px solid black;
    background: gray;
    border-radius: 5px;
   
}
input[type='button']{
    height: 50px;
    border-radius: 5px;
    margin: 30px auto;
    width: 100px;
   font-size: 30px;
    border: 2px solid black;
    cursor: pointer;
    background: gray;
    color: black;
}
</style>
<body>
    <div class="frame">
        <div id="circle">
            <div class="flex">
            <div id="eye1" ></div>
            <div id="eye2"></div>
        </div>
            <div id="smile"></div>
        </div>
        <div class="login">
     <input type="email" placeholder="Email" id="email" onkeydown="eye()" onkeyup="eye()">
     <input type="password" placeholder="Password" id="pass" onkeydown="eye2()" onkeyup="eye2()"><br>
     <input type="button" value="Login" id="login">
    </div>
    </div>
</body>
<script>
    function eye(){
        var eye=document.getElementById("eye1");
        var eye2=document.getElementById("eye2");
        eye.style.background="red";
        eye.style.transition="1s";
        eye2.style.background="red";
        eye2.style.transition="3s";


        var smile=document.getElementById("smile");
        smile.style.background="red";
        smile.style.transition=".5s";
        smile.style.height="30px";

        var circle=document.getElementById("circle");
        circle.style.border="2px solid red";
        circle.style.transition="2s";


        var email=document.getElementById("email");
        email.style.border="2px solid red";
        email.style.transition="3s";

        var pass=document.getElementById("pass");
        pass.style.border="2px solid red";
        pass.style.transition="3s";

        var login=document.getElementById("login");
        login.style.border="2px solid red";
        login.style.color="red";
        login.style.transition="4s";

    }
function eye2(){
    var pass=document.getElementById("pass").value.length;
    if(pass==8){    
         var eye=document.getElementById("eye1");
        var eye2=document.getElementById("eye2");
        var circle=document.getElementById("circle");
        eye.style.background="aqua";
        eye.style.transition="1s";
        eye2.style.background="aqua";
        eye2.style.transition="1s";
        circle.style.border="2px solid aqua";
        circle.style.transition="2s";


        var email=document.getElementById("email");
        email.style.border="2px solid aqua";
        email.style.transition="3s";

        var pass=document.getElementById("pass");
        pass.style.border="2px solid aqua";
        pass.style.transition="3s";
       
        var login=document.getElementById("login");
        login.style.border="2px solid aqua";
        login.style.color="aqua";
        login.style.transition="4s";

       
        var smile=document.getElementById("smile");
        smile.style.background="aqua";
        smile.style.height="9px";
        smile.style.width="90px";
        smile.style.transition="1s";
        smile.style.rotate="3deg";
       
       
    }
 
    console.log(pass);
}
</script>
</html>

Labels:

Comments

Post a Comment

Popular posts from this blog

How to convert Url to Imege/File By Deluge for Creator || Using the Upload Api || How to upload Imege in zoho creator from crm

This code snippet appears to be part of a script or program that involves invoking URLs to handle file uploads. Let's break it down: 1 Invoke the URL to retrieve a file ( Logo ) : Logo is the url of Imege like Logo =" https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg" response = invokeurl [ url :Logo type :GET ]; Here, the code is making a GET request to a URL stored in a variable named Logo . This request likely retrieves some file data. 2. Setting parameters : response.setParamName("file"); This line sets a parameter named "file" in the response obtained from the previous request. It prepares the response to be sent as a file in a subsequent request. Logo_imge = invokeurl [ url :"https://creator.zoho.com/api/v2.1/clientnamexxxxx/appnamexxxx/report/demo_report/" + CreatorID + "/Logo/upload" type :POST files:response connection:"creator" ]; 4. Logging info "Logo_imge==" + Logo_imge; This p...
Post a Comment
Read more

Creator 's Html snippet with EJS tag

  An Introduction to EJS: The Embedded JavaScript Templating Engine When it comes to creating dynamic web applications, rendering HTML pages with server-side data is an essential task. Many developers turn to templating engines to simplify this process, and one of the most popular choices is EJS (Embedded JavaScript) . If you're unfamiliar with EJS or are considering it for your next project, this blog will provide a comprehensive introduction to its benefits, features, and how to get started with it. What is EJS? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. The main goal of EJS is to make it easier to embed JavaScript code directly into your HTML templates. It allows you to add dynamic content, use logic like conditionals and loops, and even include reusable components. EJS is commonly used in Node.js applications for rendering server-side views, and it integrates seamlessly with Express.js, one of the most popular web frameworks fo...
1 comment
Read more

How to Add Multiple Portal By Deluge ||How How to add Different Portal Permission Set

Creating a portal to assign users to specific profiles using Deluge scripting in Zoho Creator can streamline your application’s user management. In this context, the code snippet provided assigns a user to the "Customer" profile based on their email and enables their portal access. Here's a breakdown and explanation: ### Code Explanation: 1. **Assign User to Profile:**    ```deluge    portal = thisapp.portal.assignUserInProfile(input.Email, "Customer");    ```    This line assigns the user, identified by their email, to the "Customer" profile. The `assignUserInProfile` function is a method in the Deluge scripting language that allows developers to specify which profile a user belongs to within the application. 2. **Enable Portal Access:**    ```deluge    input.Portal_Status = "Enabled";    ```    This line updates the `Portal_Status` field to "Enabled," indicating that the user now has access to the portal. ...
1 comment
Read more