<div class="main">

<div class="my_form">
	<form>
		<div class="section"><span>1</span>Name &amp; Email</div>
		<div class="inner-wrap">
			<label>First Name <input type="text" name="f_name" /></label>
			<label>Last Name <input type="text" name="l_name" /></label>
			<label>Email Address <input type="email" name="email" /></label>
		</div>
	
		<div class="section"><span>2</span>Contact</div>
		<div class="inner-wrap">
			<label>Phone Number <input type="text" name="phone" /></label>
			<label>Address <textarea name="address" rows="6"></textarea></label>
		</div>
	
		<div class="section"><span>3</span>Passwords</div>
			<div class="inner-wrap">
			<label>Password <input type="password" name="field5" /></label>
			<label>Confirm Password <input type="password" name="field6" /></label>
		</div>
		<div class="button-section">
		 <input type="submit" name="Sign_up" value="SUBMIT" />
		</div>
	</form>
</div>

</div>
 /******************************         
 http://www.freetimelearning.com  
 http://www.freetimelearn.com          
 *******************************/
.main{ margin:40px auto 20px !important; width:450px;}
.my_form{
    width:450px;
    padding:30px;
    margin:40px auto;
    background: #FFF;
    border-radius: 4px;
    -webkit-border-radius:4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.my_form .inner-wrap{
    padding: 30px;
    background: #F2F2F2;
    border-radius: 2px;
    margin-bottom: 15px;
}
.my_form h1{
    background: #2A88AD;
    padding: 20px 30px 15px 30px;
    margin: -30px -30px 30px -30px;
    border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
}
.my_form h1 > span{
    display: block;
    margin-top: 2px;
    font: 13px Arial, Helvetica, sans-serif;
}
.my_form label{
    display: block;
    font: 13px Arial, Helvetica, sans-serif;
    color: #000;
    margin-bottom: 15px;
}
.my_form input[type="text"],
.my_form input[type="date"],
.my_form input[type="datetime"],
.my_form input[type="email"],
.my_form input[type="number"],
.my_form input[type="search"],
.my_form input[type="time"],
.my_form input[type="url"],
.my_form input[type="password"],
.my_form textarea,
.my_form select {
    display: block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    padding: 8px;
	margin:5px auto;
    border-radius: 2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border: 1px solid #CEF;
}

.my_form .section{
    font: normal 20px 'Bitter', serif;
    color: #2A88AD;
    margin-bottom: 5px;
}
.my_form .section span {
    background: #2A88AD;
    padding: 5px 10px 5px 10px;
    position: absolute;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border: 4px solid #fff;
    font-size: 14px;
    margin-left: -45px;
    color: #fff;
    margin-top: -3px;
}
.my_form input[type="button"], 
.my_form input[type="submit"]{
    background: #2A88AD;
    padding: 8px 30px;
    border-radius: 2px;
	cursor:pointer;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
    font: normal 30px 'Bitter', serif;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
    border: 1px solid #257C9E;
    font-size: 15px;
}
.my_form input[type="button"]:hover, 
.my_form input[type="submit"]:hover{
    background: #2A6881;
    -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
    box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}

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.