Amazing Polymorphism Login Form with HTML, CSS, JAVASCRIPT.


How To Make Login Form Using HTML, CSS, JAVASCRIPT (Polymorphism).


HTML AND JAVASCRITP Code:-


copy code here:-

    
       
          <!DOCTYPE html>
<html data-theme="dark">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>form</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];400;600;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/836a943e18.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="form1.css">
<link rel="shoetcut icon" type="images/logos.png" href="images/logos.png" />
</head>

<body id="body">
<!-- Form start -->
<form>
<div class="theme-toggle">
<label for="theme-toggle-btn"> <!-- Icon -->
<i style="color: #ff5e14;" onclick="myFunction()" class="fas fa-moon toggle-icon" id="btn"></i>
</label>
</div>

<h1 style="padding: 10px;"><img style="margin-right:15px;" src="images/2.png" width="20%">Login Form</h1>
<hr class="hr">

<div class="social-media-list">
<a style="background-color: #25D366;" href="#"><i class="fab fa-whatsapp"></i></a>
<a style="background-color: #3B5998;" href="#"><i class="fab fa-facebook-f"></i></a>
<a style="background: linear-gradient(45DEG,#405De6 7%,#5851DB,#833AB4,#c13584,#E1306C,#Fd1d1d, #F56040,#F77737,#FCAF45,#FFDC80);"href="#"><i class="fab fa-instagram"></i></a></div>
<div class="input-group">
<label for="email-input"><i class="fas fa-envelope-open"></i>  Email</label>
<input type="email" name="email-input" placeholder=" Email" autocomplete="off">
</div>

<div class="input-group">
<label for="password-input"><i class="fas fa-key"></i>  Password</label>
<input type="password" name="password-input" placeholder="password" autocomplete="off">
</div>

<a href="#" style="color: #ff5100;" class="forgot-password">forgot password ?</a>
<button style="box-shadow: 0px 1px 1px #b8b9be, -3px -2px 2px #000;" class="signIn-btn"><b>Sign in</b></button>
</form>



JavaScript Code:-

function myFunction() {
var element = document.getElementById("body");
element.classList.toggle("theme");

var element = document.getElementById("btn");
element.classList.toggle("fa-sun");
}










CSS Code:-

copy code here:-

 
              *{margin: 0; padding: 0; box-sizing: border-box;}

html[data-theme="light"]{
--clr-background:#ddd;
--clr-primary:#777;
--clr-secondary:#111;
--primary-shadow : -4px -4px 12px rgba(255,255,255,0.5),
4px 4px 12px rgba(0,0,0,0.1);
--secondary-shadow : -3px -3px 5px rgba(255,255,255,0.4),
3px 3px 5px rgba(0,0,0,0.09);
--inset-shadow: inset -3px -3px 5px rgba(255,255,255,0.4),
inset 3px 3px 5px rgba(0,0,0,0.09);
}
.hr{
background-color:#ff5e14;width: 130px;height: 4px;margin-left:105px;border-radius: 20px;
border:transparent;
}

html[data-theme="dark"]{
--clr-background:#222;
--clr-primary:#eee;
--clr-secondary:#fff;
--primary-shadow : -2px -2px 8px rgba(255,255,255,0.5),
4px 4px 10px rgba(0,0,0,0.5);
--secondary-shadow : -3px -3px 5px rgba(255,255,255,0.05),
3px 3px 5px rgba(0,0,0,0.5);
--inset-shadow: inset -3px -3px 5px rgba(255,255,255,0.15),
inset 3px 3px 5px rgba(0,0,0,0.5);
}
body{
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--clr-background);
font-family: 'Open Sans', sans-serif;
}
a{text-decoration:none;}

form{
width: 320px;
padding: 20px;
box-shadow: var(--primary-shadow);
position: relative;
border-radius: 20px;
}
.theme-toggle{
position: absolute;
right: 20px;
}
#theme-toggle-btn{display: none;}

.theme-toggle label{
cursor: pointer;
color: var(--clr-secondary);
}

h1{
color: var(--clr-primary);
text-align: center;
text-transform: capitalize;

}
.social-media-list{
margin: 30px 0;
text-align: center;
font-size: 25px;
}
.social-media-list a{
width: 50px;height: 50px;margin: 10px;
display: inline-flex;
justify-content: center;
align-items: center;
outline: none;
color: var(--clr-primary);box-shadow: var(--secondary-shadow);
border-radius: 50%;
}

.social-media-list a:active{box-shadow: var(--inset-shadow);}

.input-group{margin: 30px 0;}

.input-group label{
display: block;
color:var(--clr-secondary);
}
.input-group input{
margin-top: 10px;
padding: 10px;
width: 100%;
outline: none;
border: none;
border-radius: 10px;
background-color: transparent;
box-shadow: var(--inset-shadow);
color: var(--clr-secondary);
}

.forgot-password{
display: block;
color: var(--clr-primary);
text-align: center;
text-transform: capitalize;
margin: 30px 0;
font-size: 14px;
}
.signIn-btn{
display: block;
margin: 20px auto;
border:none;
outline: none;
background-color: transparent;
color: var(--clr-primary);
padding: 12px 60px;
box-shadow: var(--clr-secondary-shadow);
border-radius: 10px;
cursor: pointer;
font-size: 16px;
}

.signIn-btn:active{
box-shadow:var(--inset-shadow);
}
.social-media-list a{
position: relative;
}
.social-media-list a:before{
content: "";
position: absolute;
top:-2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 100%;
box-shadow: var(--secondary-shadow);
}
.theme{
background-color: #e0e0e0;
color: #000;
}
.theme h1, .theme a, .theme label, .theme .signIn-btn, .theme input{
color: #000;
}
         
         








Output:-




Video:-





Follow Us On Instagram:-