Time for action – creating a fancy login form

Follow these steps to create a login form in a lightbox:

1. We'll get started by setting up an HTML page and the associated files and folders, like we did in Chapter 1, Designer, Meet jQuery. Our HTML page will contain a header that displays a login form as shown in the following code. It's common for sites to allow people to log in from any page on the site.

   <header id="page-header">
     <h1>Ireland: The Emerald Isle</h1>
     <form action="#" id="login-form">
       <div><label for="username">Username:</label> <input type="text" id="username"/></div>
       <div><label for="password">Password:</label> <input type="password" id="password"/></div>
       <div><input type="submit" value="Log In"/></div>
     </form>
   </header>

2. Next, we'll open styles.css and add some CSS so that the header is displayed with the title on the left and the form on the right...