Header Ads Widget

How To Create Funny Log-in Page Using HTML | Knowledge With Dev

Dev Kapil May 21, 2023

 In this article you will learn How to create Funny login page in HTML? in easy way. Here you will learn everything in step by learning method. Just follow the below step to create the login form.

Pre-requisites

To begin with the login page in HTML, we need to know the following:

  • HTML 
  • CSS
  • Java Script.

What Are We Creating?

The login page uses HTML, CSS and JAVA Script for the structuring and styling. We'll first create the simple structure with HTML and then move to make it look great with CSS. This is what our final output will look like:

How To Create Funny Log In Page Using HTML


At first, we'll go through the HTML code for the login page and then switch to CSS to make it look better.


Friends, I am provide you all code. You can copy and use it.

HTML;
 
 <html>
  <body>
      <div class="outer">
        <h1 style="text-align:center">Sign In</h1>
        <input class="in" type="text" placeholder="Email address or phone number" id="a"/>
        <br/>
        <br/>
       <input class="in" type="password" placeholder="Password" id="b"/>
       <br>
       <input type="submit" onmouseenter="fa()" onclick="alart('waaaa')" id="bt"/> 
      </div>
  </body> 
 </html>


CSS;


   
 .outer{ 
  background-color:#5BF93F;
  margin:auto; 
  height:300px; 
  width:400px; 
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
  border:1px solid gray; 
  position:relative;
  top:50px;
  } 
  p{ 
  margin-left:50px; 
  } 
  .in{ 
  width: 300px;
  margin-left:50px; 
  padding:10px 
  } 
  #bt{
  height:30px;
  color:#1877f2;
  margin-top:20px; 
  position:absolute; 
  left:150px; 
  } 
  #bt:hover{ 
  background:green; 
  font-size:13px; 
  cursor:pointer; 
  color:white; 
  } 
  body{
    background-color:#9FF890;
  }


JAVA Script;


 
 function fa(){ 
  if(a.value=="" || b.value==""){ 
  f() 
  document.getElementById("a").style.border="2px solid red" 
  document.getElementById("b").style.border="2px solid red" 
  bt.value="Pahila data Fill Kar" 
  } 
  else{ 
  document.getElementById("a").style.border="2px solid green" 
  document.getElementById("b").style.border="2px solid green" 
  bt.value="Ha Ab thik Hai" 
  bt.style.left="120px"; 
  } 
  } 
  flag=1 
  function f(){ 
  if(flag==1){ 
  bt.style.left="210px" 
  flag=2 
  } 
  else if(flag==2){ 
  bt.style.left="80px" 
  flag=1 
  } 
  }

If you found any difficulty in this Article, then you can ask any question by posting comment in comment box.


Visit On YouTube

Tags:

Post a Comment

0 Comments

Please don't enter any spam link in the comment box.