<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;
}

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.