Create login form panel - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Panel

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

Description

Create login form panel

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <style>
form {<!-- w ww .j av a2  s.  c o m-->
   width:301px;
   margin:0 auto;
   border:2px solid;
}

fieldset {
   border:0;
   margin:0;
   padding:0 21px 11px;
   border:2px solid Chartreuse;
   background:yellow;
}

legend {
   background:blue;
   width:100%;
   margin:0 -21px;
   padding:3px 21px;
   color:pink;
   border:0;
}

input[type="email"],
input[type="password"],
button {
   width:100%;
   margin:0 0 11px;
   padding:0 11px;
}

input[type="email"],
input[type="password"] {
   line-height:23px;
   font-size:17px;
}

button {
   line-height:27px;
   font-size:21px;
}
</style> 
 </head> 
 <body> 
  <form> 
   <fieldset> 
    <legend>Lorem </legend> 
    <p>Lorem ipsum dolor sit amet, consectetur ad</p> 
    <input type="email" id="email" name="email" placeholder="Email" value=""> 
    <input type="password" id="password" name="password" placeholder="password" value=""> 
    <button type="submit">Lorem</button> 
   </fieldset> 
  </form>  
 </body>
</html>

Related Tutorials