<div class="main">

<form>
	<ul class="my-form">
		<li><label>Full Name <span class="required">*</span></label><input type="text" name="field1" class="field-divided" placeholder="First Name" />&nbsp;<input type="text" name="field2" class="field-divided" placeholder="Last Name" /></li>
		<li>
			<label>Email <span class="required">*</span></label>
			<input type="email" name="field3" class="field-long" placeholder="example@mail.com" />
		</li>
		<li>
			<label>Subject</label>
			<select name="field4" class="field-select">
			<option value="">Select One</option>
			<option value="Sample Text">Sample Text</option>
			<option value="Sample Text">Sample Text</option>
			<option value="Sample Text">Sample Text</option>
			</select>
		</li>
		<li>
			<label>Your Message <span class="required">*</span></label>
			<textarea name="field5" id="field5" class="field-long field-textarea" placeholder="Message"></textarea>
		</li>
		<li>
			<input type="submit" value="Submit" />
		</li>
	</ul>
</form>

</div>

 /******************************         
 http://www.freetimelearning.com  
 http://www.freetimelearn.com          
 *******************************/
 
.main{ margin:40px auto 20px !important; width:450px;}
.my-form {
    margin:10px auto;
    max-width: 400px;
    padding: 20px 12px 10px 20px;
    font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.my-form li {
    padding: 0;
    display: block;
    list-style: none;
    margin: 10px 0 0 0;
}
.my-form label{
    margin:0 0 3px 0;
    padding:0px;
    display:block;
    font-weight: bold;
}
.my-form input[type=text], 
.my-form input[type=date],
.my-form input[type=datetime],
.my-form input[type=number],
.my-form input[type=search],
.my-form input[type=time],
.my-form input[type=url],
.my-form input[type=email],
textarea, 
select{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border:1px solid #BEBEBE;
    padding: 7px;
    margin:0px;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;  
}
.my-form input[type=text]:focus, 
.my-form input[type=date]:focus,
.my-form input[type=datetime]:focus,
.my-form input[type=number]:focus,
.my-form input[type=search]:focus,
.my-form input[type=time]:focus,
.my-form input[type=url]:focus,
.my-form input[type=email]:focus,
.my-form textarea:focus, 
.my-form select:focus{
    -moz-box-shadow: 0 0 8px #88D5E9;
    -webkit-box-shadow: 0 0 8px #88D5E9;
    box-shadow: 0 0 8px #88D5E9;
    border: 1px solid #88D5E9;
}
.my-form .field-divided{
    width: 49%;
}

.my-form .field-long{
    width: 100%;
}
.my-form .field-select{
    width: 100%;
}
.my-form .field-textarea{
    height: 100px;
}
.my-form input[type=submit], .my-form input[type=button]{
    background:#336;
    padding: 10px 30px;
    border: none;
	cursor:pointer;
    color: #fff;
}
.my-form input[type=submit]:hover, .my-form input[type=button]:hover{
    background:#333;
    box-shadow:none;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
}
.my-form .required{
    color:red;
}