Form

by Adam Howard

HTML

<form style="margin: 0 auto; width: 260px; align-content: center;">
    <br>
    First Name:<br>
    <input type="text" name="firstname"  class="textbox"><br>  
    Last Name:<br>
    <input type="text" name="lastname" class="textbox"><br>
    Username:<br>
    <input type="text" name="userName" class="textbox"><br><br>
    Password:<br>
    <input type="password" name="password" pattern=".{5,20}" class="textbox"><br>
    Re-Enter Password:<br>
    <input type="password" name="passwordVerify" pattern=".{5,20}" class="textbox"><br><br>
    
    <div class="personal">
        Gender:<br>
        <input type="radio" name="gender" value="male">Male<br>
        <input type="radio" name="gender" value="female">Female<br>
    </div>
            
    <div class="personal">
        Birthday:<br>
        <input type="date"><br><br>
    </div>
    <hr id="formHr">        
    Profile Picture:<br>    
    <input type="file"><br>
        Or...<br>
    <input type="url" placeholder="Enter in a specific URL."><br><br>
    
    <button id="submit">Submit</button>
</form>

CSS

body {
    background-color: #292929;
}

br {
   margin: 20px 0;
   line-height: 25px;
}

.personal {
    margin-right: 10px;
    display: inline-block;
    padding-bottom: 15px;
    padding: 5px;
}

.textbox {
    width: 235px;
    padding: 3px;
}

#formHr {
    width: 245px;
    float: left;
    margin-bottom: 35px;
}

form {
    color: #EDEDED;
    font-family: Arial;
    font-size: 15px;
}