<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="signUp">
<h3 class="Title">SignUp</h3>
<form action="#" class="signForm">
<div class="form-group">
<label for="email">Email: </label>
<div class="element">
<span><i class="fa-solid fa-envelope"></i></span>
<input type="email" id="email" name="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="signup-username">Username: </label>
<div class="element">
<span><i class="fa-solid fa-user"></i></span>
<input type="text" id="signup-username" name="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="signup-password">Password: </label>
<div class="element">
<span><i class="fa-solid fa-key"></i></span>
<input type="password" id="signup-password" name="password" placeholder="password">
</div>
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password: </label>
<div class="element">
<span><i class="fa-solid fa-key"></i></span>
<input type="password" id="confirm-password" name="confirm-password" placeholder="confirm password">
</div>
</div>
<button type="submit" class="btn">SignUp</button>
</form>
</div>
<!-- signin -->
<div class="signIn">
<h3 class="Title">SignIn</h3>
<form action="#" class="signForm">
<div class="form-group">
<label for="signin-username">Username: </label>
<div class="element">
<span><i class="fa-solid fa-user"></i></span>
<input type="text" id="signin-username" name="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="signin-password">Password: </label>
<div class="element">
<span><i class="fa-solid fa-key"></i></span>
<input type="password" id="signin-password" name="password" placeholder="password">
</div>
</div>
<button type="submit" class="btn">SignUp</button>
</form>
</div>
<div class="extracontent">
<h3 class="Title">If already have account?</h3>
<button class="togglebtn" onclick="">SignIn</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body{
background-color:white;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.Title{
color: rgba(255, 0, 0, 0.7);
}
.container{
height: 80vh;
width: 60vw;
background-color: rgba(255, 0, 0, 0.1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 1.5rem;
}
.signUp{
background-color:white ;
height: 30rem;
width: 25rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 2rem;
margin-top: 2rem;
}
.form-group{
display: flex;
justify-content: center;
flex-direction: column;
margin-top: .5rem;
}
/* inputs */
.element {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 6px;
padding: 0.4rem;
background: #fff;
}
.element span {
color: rgba(255, 0, 0, 0.7);
margin-right: 0.5rem;
display: flex;
align-items: center;
}
.element input {
border: none;
outline: none;
flex: 1;
font-size: 1rem;
}
/* btn */
.btn{
display: flex;
margin: auto;
margin-top: 2rem;
height: 2rem;
width: 10rem;
justify-content: center;
align-items: center;
border-radius: 5px;
background-color: rgba(255, 0, 0, 0.7);
outline: none;
border: none;
color: white;
font-size: 1rem;
}
/* toggle functionality */
.extracontent{
display: flex;
gap: 0.5rem;
justify-content: center;
align-items: center;
margin-top: 3rem;
}
.togglebtn{
height: 1.5rem;
width: 4rem;
color: white;
background-color: rgba(255, 0, 0, 0.7);
outline: none;
border: none;
border-radius: 5px;
}
/* media-queries */
@media (max-width: 600px) {
.container {
width: 90vw;
height: 90vh;
}
.signUp {
width: 80%;
height: 60%;
}
}
/* initial stage to hide signIn */
.signIn{
background-color:white ;
height: 20rem;
width: 25rem;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 2rem;
margin-top: 2rem;
display: none;
}
const btn = document.querySelector(".togglebtn");
const signup = document.querySelector(".signUp");
const signin = document.querySelector(".signIn");
btn.addEventListener("click",()=>{
if(btn.innerHTML == "SignIn"){
signup.style.display ="none";
signin.style.display = "flex";
btn.innerHTML = "signUp";
}
else{
signin.style.display = "none";
signup.style.display ="flex";
btn.innerHTML = "SignIn";
}
});
