Currently, I am working on creating a login page and signup page for my program. The goal is to stack them on top of each other with only one being displayed at a time. However, I am facing an issue where they are not stacking properly. I attempted using the position: absolute method as suggested by someone, but it caused formatting issues across the entire website. I am also incorporating bootstrap classes into this project.
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<h1 class="burning_text">WELCOME!</h1>
<div id="main-menu" class="container-fluid">
<div class="row">
<div class="col"></div>
<div class="col" id="outer_container">
<div id="main_container">
<form id="login_form" class="form-horizontal bg-secondary animate__animated" action="javascript:void(0);">
<div class="row">
<div class="row form-group" style="position:relative; left:10%;">
<label class="temporary control-label">Name:</label>
<input id="login_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
</div>
<div class="row form-group" style="position: relative; left: 10%">
<label class="temporary control-label">Password:</label>
<input id="login_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
<button id="login_alter_button" type="button" style="position: relative; bottom: 35%; left: 100%; height: 40px;"><i class="fas fa-eye-slash"></i></button>
</div>
<div class="row form-group">
<button class="btn btn-info" id="login_submit_button" style="margin: 40px; position: relative; top: 50%; right:130%;">login <i class="fas fa-door-open" style="font-size: 48px;"></i></button>
</div>
<div class="row">
<button class="btn btn-primary" id="switch_signup_button" type="button" style="position: relative; left: 207%; font-size: 15px; height: 30px;">switch to signup <i class="fas fa-sign-in-alt"></i></button>
</div>
</div>
</form>
<form id="signup_form" class="form-horizontal bg-primary animate__animated" action="javascript:void(0);">
<div class="row">
<div class="row form-group" style="position:relative; left:10%;">
<label class="temporary control-label">Name:</label>
<input id="signup_name_input" class="form-control" type = "text" required maxlength="40" placeholder="username">
</div>
<div class="row form-group" style="position: relative; left: 7%">
<div class="col-10">
<label class="temporary control-label">Password:</label>
<input id="signup_password_input" class="form-control" type = "password" required maxlength="40" placeholder="password">
</div>
<div class="col-2">
<button id="signup_alter_button" type="button" style="position: relative; top: 45%; right: 90%; padding: 5px;"><i class="fas fa-eye-slash"></i></button>
</div>
</div>
<div class="row form-group">
<button class="btn btn-info" id="signup_submit_button" style="margin: 40px">signup <i class="fa fa-user-plus" style="font-size:48px;"></i></button>
</div>
<div class="row">
<button class="btn btn-secondary" id="switch_login_button" type="button" style="position: relative; left: 93%; top: 80%; font-size: 15px; height: 30px;">switch to login <i class="fas fa-user"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="col"></div>
</div>
</div>
The current issue is that they appear stacked in a block fashion due to the CSS classes:
#login_form
{
left: 100%;
font-size: large;
font-family: Rockwell;
display: block;
}
#signup_form
{
font-size: large;
font-family: Rockwell;
display: block;
position: relative;
z-index: -1;
bottom: 50%;
}