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

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.