<div class="main">

	<div class="containmain">
	  <div class="center">
		<form class="form" action="demo_form.asp" autocomplete="on">
		  <input type="text" class="topform" placeholder="Username" name="fname"><br>
		  <input type="password" class="bottomform" placeholder="Password" name="lname"><br>
		  <input type="submit">
		</form>
		</div>
	</div>

</div>

 /******************************         
 http://www.freetimelearning.com  
 http://www.freetimelearn.com          
 *******************************/
 
.main{ margin:40px auto 20px !important; width:450px;}
body{
	background:#F2F2F2;
	}
.containmain{
  width:100%;
  display:none;
}
.center{
  margin: 50px auto;
  width:400px;
  background:#FC3;
  padding-top:1%;
  padding-right:3%;
  padding-bottom:5%;
}

input {
     width:100%;
    outline: none;
    padding: 25px;
  border:none;
  
    
}

input[type=submit] {
  background:#DBBB06;
  border:none;
  color:white;
  padding:15px;
  width:290px;
  font-size:15px;
  cursor:pointer;

}

input[type=submit]:hover{
  
color:#000;
background:#F0F000

}

.form{
  
  width:250px;
  margin: 0 auto;
  margin-top:40px;
}

.topform{
  border-bottom:2px solid lightgrey;
  margin:10px 0px;
  padding:15px 20px;
  background-image: url('http://www.flaticon.com/png/256/16612.png');
  background-repeat: no-repeat;
  background-color:white;
  background-size: 7%;
  background-position: 50% 50%;
}




.bottomform{
  padding:15px 20px;
  margin-top:0px;
  margin-bottom:15px;
  background-image: url('http://www.flaticon.com/png/256/25239.png');
  background-repeat: no-repeat;
  background-color:white;
  background-size: 11%;
  background-position: 50% 50%;
}

$(window).load(function(){

  $('.containmain').slideDown(700);

});

$(window).ready(function(){
  $(".topform , .bottomform").focus(function() {
    $(this).css({'background-image': 'none'});
});
  
  
  if ($('.topform').is(':empty')){
  
  $(".topform").focusout(function(){
   imageUrl = 'http://www.flaticon.com/png/256/16612.png';
    $(this).css('background-image', 'url(' + imageUrl + ')'); 
  });
    
  } else if ($('.topform').not(':empty')){
  
     $(this).css('background-image', 'none'); 
    
  }
  
  
    $(".bottomform").focusout(function(){
   imageUrl = 'http://www.flaticon.com/png/256/25239.png';
    $(this).css('background-image', 'url(' + imageUrl + ')'); 
  });
 
  $('.close').click(function(){
    $('.containmain').slideUp(function(){
   
    
      $('.close').text("Open").addClass("not");
    
    
    });
                                
                               
    
    
  
  });
  
  
  $("#close").click(function(){
  
    if ($( "#close" ).hasClass( "not" )){
      $('.containmain').slideDown(function(){
  
    $('.close').text("Close").removeClass("not");
  });
 
  }
  
  });
  
  
  
  
  
});