<div class="main">
	<div class="my_form">
	  <h2>Login to your account</h2>
	  <form>
		<input type="text" name="name" placeholder="Full Name" />
		<input type="text" name="phone" placeholder="Mobile" />
		<input type="email" name="email" placeholder="Email" />
		<input type="url" name="url" placeholder="Website" />
		<textarea placeholder="Message" onkeyup="adjust_textarea(this)"></textarea>
		<input type="button" value="Send Message" />
	  </form>
   </div>
</div>

 /******************************         
 http://www.freetimelearning.com  
 http://www.freetimelearn.com          
 *******************************/
.main{ margin:40px auto 20px !important; width:450px;}
.my_form{
    font-family: Arial, Helvetica, sans-serif;
    width: 500px;
    padding: 30px;
    background: #FFFFFF;
    margin: 50px auto;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.22);
    -webkit-box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.22);

}
.my_form h2{
    background: #F90;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFF;
    font-size: 18px;
    font-weight: 100;
    padding: 20px;
    margin: -30px -30px 30px -30px;
}
.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 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    display: block;
    width: 100%;
    padding: 7px;
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    margin-bottom: 10px;
    font: 16px Arial, Helvetica, sans-serif;
    height: 45px;
}
.my_form textarea{
    resize:none;
    overflow: hidden;
}
.my_form input[type="button"], 
.my_form input[type="submit"]{
    -moz-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    -webkit-box-shadow: inset 0px 1px 0px 0px #45D6D6;
    box-shadow: inset 0px 1px 0px 0px #F90;
    background-color: #F90;
    border: 1px solid #F60;
    display: inline-block;
    cursor: pointer;
    color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 8px 18px;
    text-decoration: none;
    text-transform: uppercase;
}
.my_form input[type="button"]:hover, 
.my_form input[type="submit"]:hover {
    background:linear-gradient(to bottom, #F60 5%, #F60 100%);
    background-color:#F60;
}

function adjust_textarea(h) {
		h.style.height = "20px";
		h.style.height = (h.scrollHeight)+"px";
	}