Password Generator UI design

Source code

<!DOCTYPE html>
<html>
    <head>
     <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0 "> 
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    
    <link href="https://fonts.googleapis.com/css?family=Aleo|Slabo+27px" rel="stylesheet">
    
    <style>
        body {
    margin:0; padding:3px;
    box-sizing:border-box;
    user-select:none;
    font-family: 'Aleo', serif;
}
#set
{
    display:block ;
    position:relative;
    margin:auto;
}
#count
{
   display:inline-block;
   position:relative ;
   margin:4%; margin-bottom:2%;
   color:#000; font-size:18px;
   text-indent:40px;
   font-weight:bolder;
   
}

#see
{
    display:inline-block ;
    color:gray;
    margin:auto; float:right;
    margin-right:40px;
    margin-top:10px;
    cursor:pointer;
    transition-duration:0.2s;
}

input[id='password']
{
    border:none; width:80%;
    outline:none;
    border-bottom:5px solid #efefef;
    display:block; 
    position:relative;
    font-size:27px;
    text-align:center;
    top:50px;
    margin-left:35px;
    margin-bottom:40px;
    user-select:auto;
    font-family: 'Slabo 27px', serif;
    transition-duration:600ms;
}

i
{
    font-size:23px;
    transition-duration:600ms;    
}

#check0,#check1,#check2,#check3,#check4
{
   display:block;
   position:relative;
   margin:4%;
   color:tomato; font-size:18px;
   width:92%  ;
   
}

span
{
    margin:10px;
}

input:hover
{
    border-bottom:5px solid #3498db;
}
    </style>
             
        <title>Password validator</title>
    </head>
    <body>
    
     <input type="password" id="password" placeholder="Enter password"
     onInput="check()" />
    
    <br>
       
      <div id="set" >
        
     <div id="count">Length : 0</div>
         
     <i id="see" onclick="see()" class="far fa-eye"></i>
          
      </div>
       
    <div id="check0">
      <i class="far fa-check-circle"></i>  <span> Length more than 5.</span>
    </div>
     <div id="check1">
      <i class="far fa-check-circle"></i>  <span> Length less than 10.</span>
    </div>
     <div id="check2">
      <i class="far fa-check-circle"></i>  <span> Contains numerical character.</span>
    </div>
     <div id="check3">
      <i class="far fa-check-circle"></i>   <span>Contains special character.</span>
      </div>
       <div id="check4">
      <i class="far fa-check-circle"></i>  <span>Shouldn't contain spaces.</span>
    </div>
     
     <script>
         var is_visible = false ;

Conclusion

In this post, I have talked about Password Generator UI design. Tell us What You Say About The Post by Making a Comment and if you have any questions Contact Us at the Contact Us page. Hope You Enjoy In Our Website.

Refrence:
123kurd-widgets.blogspot.com

Our Posts Are Protected By DMCA.com. Don't Copy Our Post. 123Kurd Widgets All Rights Reversed.

Rate this post:

123Kurd Widgets

Password Generator UI design

Conclusion

1 comment

Post a Comment