<div id="container">
<header>
<h1>This page cont</h1></header>
<main>
<form>
<fieldset>
<legend>Demographic Information</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name">
</div>
<div>
<label for="birthday">Birthday: </label>
<input type="date" id="birthday">
</div>
<div>
<label for="experience">Years of Professional Design Experience: </label>
<input type="number" id="experience">
</div>
</fieldset>
<fieldset>
<legend>Design Interests</legend>
<fieldset class="list">
<legend>Design Specialties</legend>
<p>Choose all that apply:</p>
<input type="checkbox" value="web"><label>Web Design</label>
<input type="checkbox" value="branding"> <label>Branding</label>
<input type="checkbox" value="editorial"> <label>Editorial</label>
<input type="checkbox" value="motion"><label>Motion</label>
<input type="checkbox" value="advertising"><label>Advertising</label>
<input type="checkbox" value="packaging"><label>Packaging</label>
</fieldset>
<label for="designer">Favorite Web/UX Designer</label>
<select id="designer">
<option>Dan Rose</option>
<option>Adam Antoszek-Rallo</option>
<option>Jen Simmons</option>
<option>Jason Santa Maria</option>
<option>Jenn Lukas</option>
<option>Tim Brown</option>
<option>Luke Wroblewski</option>
<option>Whitney Hess</option>
<option>Lena Levine</option>
<option>Jason Pamental</option>
<option>Kevin M. Hoffman</option>
<option>Samantha warren</option>
<option>Laura Franz</option>
<option>Sarah Horton</option>
<option>Chris Coyier</option>
<option>Jeffrey Zeldman</option>
<option>Brad Frost</option>
</select>
</fieldset>
<button type="submit">Submit</button>
</form>
</main>
<footer>
</footer>
</div>
/* CSS Resets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
}
/* Typography */
body {
font-family: 'Source Sans Pro', verdana, sans-serif;
}
h1 {
text-align: center;
font-weight: 300;
margin-bottom: .5em;
}
textarea {
vertical-align: middle;
}
legend {
text-transform: uppercase;
color: #999999;
border-bottom: 1px solid #999999;
width: 100%;
margin-bottom: .5em;
text-align: center;
}
p {
text-align: center;
margin-bottom: .5em;
font-style: italic;
}
fieldset fieldset legend {
text-transform: capitalize;
border-bottom: 0px;
text-align: center;
font-weight: bold;
color: #000000;
margin-bottom: 0;
}
/* Layout */
#container {
width: 100%;
max-width: 600px;
margin: 1em auto;
padding: 1em;
}
fieldset {
border: 0;
margin-bottom: 2em;
}
label {
width: 50%;
float: left;
text-align: right;
padding-right: .5em;
}
.list label {
text-align: left;
float: left;
}
.list input[type=checkbox]{
float: left;
width: 1em;
clear:left;
margin-left: 42.5%;
}
input {
width: 50%;
float: left;
padding: 5px;
}
#interests input {
float: none;
width: 10%;
}
#interests label {
width: 100%;
text-align: left;
}
#interests label input:focus {
background-color: #cccccc;
}
#designerMenu select {
width: 50%;
float: left;
}
#designerMenu label {
width: 50%;
float: left;
}
input[type=number] {
width: 25%;
}
div {
clear: both;
}
button {
width: 25%;
padding: 1em;
border-radius: .5em;
background-color: #ffffff;
display: block;
margin: 0 auto;
}
button:hover,
button:focus {
background-color: #cccccc;
}
Also see: Tab Triggers