A Login form is used to enter authentication credentials to access a restricted page or form. The login
form contains a field for the username and another for the password. When the login form is submitted
its underlying code checks that the credentials are authentic, giving the user can access the restricted
page.
Ex:- E-commerce Websites, Social Media Websites, Coding Platforms,etc.
<div id="basic-log">
<form action="">
<h3 class="login-title">Login</h3>
<label for="user">Username</label>
<input type="text" id="user" placeholder="Username">
<label for="pass">Password</label>
<input type="password" id="user" placeholder="Password">
<input type="submit" value="Sign-in">
</form>
<div id="login-opt">
<span class="opt-log"><a href="#" id="google-login"><i
class="fa-brands fa-google"></i></a></span>
<span class="opt-log"><a href="# " id="telegram-login"><i
class="fa-brands fa-telegram"></i></a></span>
<span class="opt-log"><a href="# " id="facebook-login"><i
class="fa-brands fa-facebook"></i></a></span>
</div>
</div>
<div id="travel-log">
<div id="login-travel">
<div id="log-top" style="background:url('https://color-components.netlify.app/86.jpg') no-repeat center center;">
<p> Welcome Traveller</p>
<span id="log-des"> Take a deep breath and enjoy your journey!</span>
</div>
<div id="form">
<form action="">
<input type="email" id="usermail" placeholder="E-mail">
<input type="password" id="user" placeholder="Password">
<input type="text" id="user" placeholder="Phone" maxlength="10">
<input type="submit" value="Register">
</form>
</div>
<p>Already a member? <a href="#">Login</a> </p>
</div>
<div id="log-display" style="background:url(https://color-components.netlify.app/tavel-log.jpg) no-repeat center ;"></div>
</div>
<div id="Login-Signup">
<div id="login-travel">
<div id="log-top" style="background:url('https://color-components.netlify.app/86.jpg') no-repeat center center;">
<p> Welcome Traveller </p>
<span id="log-des"> Take a deep breath and enjoy your journey! </span>
</div>
<div id="login-signup">
<span class="login-Signup" id="Login" onclick="showLogin()">Login </span>
<span class="login-Signup" id="signup" onclick="showRegister()">Signup </span>
</div>
<div id="register">
<form action="">
<input type="email" id="usermail" placeholder="E-mail">
<input type="password" id="user" placeholder="Password">
<input type="text" id="user" placeholder="Phone" maxlength="10">
<input type="submit" value="Register">
</form>
</div>
<div id="login-form">
<form action="">
<input type="text" id="user" placeholder="Username">
<input type="password" id="user" placeholder="Password">
<input type="submit" value="Sign-in">
</form>
<div id="login-opt">
<span class="opt-log"><a href="#" id="google-login"><i
class="fa-brands fa-google"></i></a></span>
<span class="opt-log"><a href="# " id="telegram-login"><i
class="fa-brands fa-telegram"></i></a></span>
<span class="opt-log"><a href="# " id="facebook-login"><i
class="fa-brands fa-facebook"></i></a></span>
</div>
</div>
</div>
<div id="log-display" style="background:url(https://color-components.netlify.app/tavel-log.jpg) no-repeat center ;"></div>
</div>
function showRegister() {
document.getElementById('login-form').style.display="none";
document.getElementById('register').style.display="flex";
document.getElementById('signup').style.borderBottom="2px solid blueviolet";
document.getElementById('Login').style.borderBottom="2px solid white";
}
function showLogin() {
document.getElementById('login-form').style.display="flex";
document.getElementById('register').style.display="none";
document.getElementById('signup').style.borderBottom="2px solid white";
document.getElementById('Login').style.borderBottom="2px solid blueviolet";
}