Please subscribe our channel and support me.
Please like and 1 comment this video.


If you are visiting my channel for the first time then please subscribe
Go to my Youtube channel : class="simple-endpoint" dir="auto" href="https://www.youtube.com/channel/UCP43UNTq7UZD1cu_qTbmC9A"
spellcheck="false">https://www.youtube.com







Html Code




<div class="loginForm">
<div class="swith-button">
<a class="login active">Log In</a>
<a class="sineup">Sign Up</a>
</div>
<div class="logo"><img src="https://www.abhyasedu.com/img/login.png" alt=""></div>
<div class="title">Your <span> Logo</span></div>
<form action="/" class="form">
<input type="name" class="name ar" placeholder="Full Name" />
<input type="userName" class="username" placeholder="UserName" />
<input type="password" class="password" placeholder="Password" />
<input type="cpassword" class="cpassword ar" placeholder="Conform Password" />
<div class="show-password"><span class="show"></span> Show Password</div>
<button class="submit">Sign Up</button>
<div class="link"><a href="#">Forgot password?</a></div>
</form>
</div>




Css Code



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

body {
background: #51b3e6;
font-family: roboto;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.loginForm {
background-color: #f7f7f7;
color: #202020;
padding: 20px 10px;
border-radius: 5px;
border: solid 2px #ffffff;
box-shadow: 2px 10px 10px 0 #0004;
}

.loginForm .swith-button {
display: block;
text-align: center;
margin-bottom: 10px;
}

.loginForm .swith-button a {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
padding: 4px;
margin-right: 5px;
font-weight: 600;
cursor: pointer;
}

.loginForm .swith-button a.active {
color: #0003ff;
border-bottom: solid 2px #0003ff;
}

.loginForm form {
width: 330px;
display: block;
overflow: hidden;
padding: 0 20px;
}

.loginForm .logo img {
width: 330px;
height: auto;
}

.loginForm .title {
display: block;
text-align: center;
font-weight: 600;
font-size: 24px;
color: #0003ff;
margin-bottom: 40px;
}

.loginForm .title span {
font-weight: 400;
color: #202020;
}


.loginForm input {
display: block;
width: 100%;
height: 40px;
padding: 0 12px;
background: #ebebeb;
outline-color: #005fa2;
border: none;
margin: 5px auto 20px;
transition: all 0.3s;
}

.loginForm input.ar {
height: 0;
margin: 0 !important;
}

.loginForm .show-password {
font-size: 13px;
display: flex;
align-items: center;
font-weight: 600;
margin-top: 30px;
}

.loginForm .show-password .show {
width: 18px;
height: 18px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
border: solid 2px #0003ff;
border-radius: 4px;
margin-right: 10px;
cursor: pointer;
}

.loginForm .show-password .show[array="true"]::after {
content: "";
width: 10px;
height: 10px;
position: absolute;
background: #0003ff;
border-radius: 2px;
}

.loginForm .submit {
display: block;
padding: 8px 16px;
float: right;
width: auto;
border: none;
outline: none;
background: #005fa2;
color: #f7f7f7;
margin-top: 20px;
transition: all 0.3s;
}

.loginForm .submit:hover {
box-shadow: 0 4px 8px #0008;
background: #00406e;
cursor: pointer;
}

.loginForm .link {
display: block;
overflow: hidden;
width: 100%;
font-size: 12px;
margin-top: 20px;
}




JavaScript Code



var a = document.querySelector('.swith-button').getElementsByTagName('a')
var nx = document.querySelectorAll('.ar');
var button = document.querySelector('.submit');
for (const item of a) {
item.addEventListener('click', function () {
if (this.className == 'sineup') { for (const item of nx) { item.classList.remove('ar') } }
else { for (const item of nx) { item.classList.add('ar') } }

for (const element of a) {
element == this
? element.classList.add('active')
: element.classList.remove('active');
}
button.innerHTML = this.innerHTML;
});
}

document.querySelector('.show').addEventListener('click', function () {
var password = document.querySelector('.password');
this.getAttribute('array') == 'true'
? (this.setAttribute('array', false), password.setAttribute('type', 'password'))
: (this.setAttribute('array', true), password.setAttribute('type', 'text'));

});




Source Code : fatch="1NI8d3GjpjT8zi_VabdmVhRcYHj06gt9Q" dir="auto" tm="100" spellcheck="false">Your link is creating. Please
wait..




I will remove the timer if 1000 subscriber on my channel and All video source code without timer, will be provided.


@ Recommendations Videos


blogger theme design : spellcheck="false">https://youtu.be/DAIJTjRzxLk


Login Form : spellcheck="false">https://youtu.be/HWbAr1XN3Lc


Forms design : spellcheck="false">https://youtu.be/M2ERkDXjEuw


Responsive CSS card : spellcheck="false">https://youtu.be/Ol9_5cYtAaw


Navigation design : spellcheck="false">https://youtu.be/LNEgZBdWPGM



Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976,
allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and
research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational
or personal use tips the balance in favor of fair use .


Thanks..