Create 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 Login panel

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,400,600,700,800);
.main{<!--from ww w .j a va  2 s  .co m-->
   position:relative;
   background-color:#16A085;
   width:550px;
   height:350px;
}
.mainRibbon{
   position:relative;
   background-color:#ECF0F1;
   width:70%;
   height:60%;
   margin:0 auto;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
   border-radius:6px;
}
.textBoxStyle{
   position:relative;
   border:1px solid rgba(26,188,156,0);
   border-radius:4px;
   width:80%;
   text-indent:20px;
   box-shadow:none;
   -webkit-box-shadow:none;
   line-height:1.4285;
   -webkit-transition: border-color .25s linear;
   transition: border-color .25s linear;
   margin:6% 10% 0% 10%;
   padding-top:6px;
   padding-bottom:6px;
   padding-left:1px;
}
.textBoxStyle:focus{
   border-color:rgba(26,188,156,1);
}
.btnLogin{
   background-color:#16A085;
   width:80%;
   border-radius:6px;
   margin:6% 10% 0 10%;
   -webkit-transition: background .25s linear;
   transition: background .25s linear;
}
.btnLogin:hover{
   background-color:red;
   cursor:pointer; cursor:hand;
}
.btnLogin > p{
   color:white;
   margin:0;
   padding-top:1%;
   padding-bottom:1%;
   font-family:'Open Sans';
   -webkit-font-smoothing: subpixel-antialiased;
   font-size:17px;
   text-align:center;
}
.icon{
   position:absolute;
   background:rgba(0, 0, 0, 0);
   width:auto;
   height:auto;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
}
.icon > p{
   color:white;
   font-size:60px;
   line-height:60px;
   padding:0;
   margin:0;
}

      </style> 
 </head> 
 <body> 
  <div class="main"> 
   <div class="icon"> 
    <p class="text icon">?</p> 
   </div> 
   <div class="mainRibbon"> 
    <input type="text" class="textBoxStyle" placeholder="Enter your username"> 
    <input type="text" class="textBoxStyle" placeholder="Password"> 
    <div class="btnLogin"> 
     <p>Log in</p> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials