<div class="main">
<div class="my_form">
<form>
<div class="section"><span>1</span>Name & 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);
}
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.