<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
Check out this super simple Form by Andrew Coyle
https://dribbble.com/shots/1677101-Form
-->
<form>
<div class="col-2">
<label>
Name
<input placeholder="What is your provider's company name?" tabindex="1" />
</label>
</div>
<div class="col-2">
<label>
Contact Name
<input placeholder="Who represents the provider's company?" tabindex="2" />
</label>
</div>
<div class="col-3">
<label>
Phone
<input placeholder="What is the provider's phone number?" tabindex="3" />
</label>
</div>
<div class="col-3">
<label>
Email
<input placeholder="What is the provider's email?" tabindex="4" />
</label>
</div>
<div class="col-3">
<label>
Shipping Method
<select tabindex="5">
<option>Select shipment method</option>
<option>Standard 3 - 5 Business Days</option>
<option>Expedited Next-Day Delivery</option>
</select>
</label>
</div>
</form>
html, body { width: 100%; height: 100%; background: #ECF3F3 }
form
{
display: block;
margin: 100px auto;
width: 950px;
overflow: hidden;
background: #FFF;
border: 1px solid #E4E4E4;
border-radius: 5px;
font-size: 0;
}
form > div
{
display: inline-block;
width: 100%;
}
form > div > label
{
display: block;
padding: 20px 20px 10px;
vertical-align: top;
font-family: Source Sans Pro, Arial, sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: #939393;
cursor: pointer;
}
form > div.col-2, form > div.col-3, form > div.col-4 { box-shadow: 1px 1px #E4E4E4 }
form > div.col-2 { width: 50% }
form > div.col-3 { width: 33.3333333333% }
form > div.col-4 { width: 25% }
form > div > label > input
{
display: inline-block;
position: relative;
width: 100%;
height: 27px;
line-height: 27px;
margin: 5px -5px 0;
padding: 7px 5px 3px;
border: none;
outline: none;
border-radius: 3px;
background: transparent;
font-size: 14px;
font-weight: 200;
opacity: .66;
transition: opacity .3s, box-shadow .3s;
}
form > div > label > select
{
display: block;
width: 100%;
margin: 16px 0 6px;
padding: 0;
background: transparent;
border: none;
outline: none;
font-size: 14px;
font-weight: 200;
opacity: .33;
}
form > div > label > input:focus, form > div > label > select:focus
{
opacity: 1;
box-shadow: 0 3px 4px rgba(0, 0, 0, .15);
}
