Create a login panel - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Login Panel

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Login Panel

Description

Create a login panel

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head></head> 
 <body translate="no"> 
  <title>newtab</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <style type="text/css">

body{<!-- w ww  .  java  2s.  com-->
   background-color: blue;
}
legend i{
   font-size: 52px !important;
   padding: 24px;
   padding-left: 33px;
   padding-right: 33px;
   color:#ffffff;
   background-color: black;
   border: 1px solid pink;
   border-radius: 168px;
}
form{
   width: 300px;
   margin: 0 auto;
}
input{
   margin-bottom: 20px;
   width: 264px;
   height: 40px;
   text-align: center;
   border:none;
   color:#717171;
}
a{
   padding-left: 29%;
   text-decoration: none;
   color:#f5683d;
}
#loginbutton{
   background-color: #4591fb;
   color:#ececec;
}
fieldset{
   margin-right: 0;
   margin-left: 0;
   border-color:red;
   background-color: #ececec;
}


      </style> 
  <form> 
   <fieldset> 
    <legend style="margin:0 auto;"> <i class="fa fa-user"></i> </legend> 
    <div> 
     <h1 style="font-size: 29PX; color:red;text-align: center;"> Member Login</h1> 
     <input type="name" name="username" placeholder="username"> 
     <br> 
     <input type="password" name="pswd" placeholder="password"> 
     <br> 
     <input type="button" value="LOGIN" id="loginbutton"> 
     <a href="#">Forgot Password?</a> 
    </div> 
   </fieldset> 
  </form>  
 </body>
</html>

Related Tutorials