Create left panel with login form - 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 left panel with login form

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">

* {<!-- w  w w.j  a va2 s.co  m-->
   margin: 0;
   padding: 0;
   outline: 0;
   font-size: 100%;
   box-sizing: border-box;
   list-style: none;
   border-collapse: collapse;
   border-spacing: 0;
   border: none;
   font-family: "Segoe UI"
}
.pane {
   width: 260px;
   background-color: #666;
   color: #fff;
   font-size: 9px;
}
.fieldWell {
   height: 100%;
   overflow: auto;
}
.bucket {
   display: block;
   padding: 4px 0;
   border-bottom: 1px solid #333;
   color: #a6a6a6;
   width: 100%;
}
.bucket > .caption {
   float: left;
   width: 80px;
   padding-left: 12px;
   font-size: 9px;
}
.properties {
   float: right;
   min-height: 28px;
   width: 163px;
   margin-right: 12px;
   border: 1px dashed #666;
   border-radius: 4px;
   background-color: #4a4a4a;
}
.property {
   width: 157px;
   height: 22px;
   margin: 2px 0 2px 2px;
   padding-left: 4px;
   background: #333;
   border-radius: 4px;
   border: 1px solid #212121;
}
.property .caption {
   float: left;
   width: 100px;
   line-height: 21px;
}
.clearfix:after {
   content: "";
   display: table;
   clear: both;
}


      </style> 
 </head> 
 <body> 
  <article class="pane"> 
   <section class="fieldWell"> 
    <div> 
     <div class="bucket clearfix"> 
      <h1 class="caption">Foo</h1> 
      <div class="properties"> 
       <div class="property"> 
        <h2> <span class="caption">Hello world</span> </h2> 
       </div> 
       <div class="property"> 
        <h2> <span class="caption">Hi there</span> </h2> 
       </div> 
      </div> 
     </div> 
    </div> 
   </section> 
  </article>  
 </body>
</html>

Related Tutorials