Login Example

by anAgent

HTML

<div id="LogIn">
   <div class="header">
       <span class="logo">Logo Will display Here</span>        
    </div>
    <div class="content">
        <div class="par">
            <label>Username</label>
            <div class="field">
                <input type="text" id="Username"/>
            </div>
        </div>
        <div class="par">
            <label>Password</label>
            <div class="field">
                <input type="text" id="Password"/>
            </div>
        </div>
    </div>
    <div class="actions">
        <div class="actions-left">
            <button>Login</button>                    
        </div>
        <div class="actions-right"></div>        
    </div>
</div>

CSS

#LogIn { 
    width: 400px; border: 1px solid blue;
margin-left: auto; margin-right: auto;
}
.header {display:block; width: 100%; border: 1px solid red;}
.header .logo { width:50px height:35px; background-color:#efefef;}
.content {padding:5px; display:block; border: 1px solid green;}
.actions {display:block; border: 1px solid black;}
.par {margin-top:10px; border: 3px dotted pink;}
.par .field {display:inline;}
input[type="text"] {padding: 2px 5px;width:200px;}
label{ margin-left:75px;}