I am working on a Login component and trying to center the content like this image. I have tried using horizontal lines but it's not working as expected. Check out my desired output here: [Output 2]. Can someone help me achieve this with simple HTML and CSS?
Login.vue
<template>
<div class="main">
<div class="container">
<img id="side-img" src="../assets/sideImg.png" alt="notFound" />
<p id="side-content">Online Book Shopping</p>
<div class="box">
<div class="headings">
<h5 class="signin" id="login" @click="isLogin = true">Login</h5>
<h5 class="signup" id="signup" @click="isLogin = false">signup</h5>
</div>
<form ref="myForm">
<div class="username">
<p>EmailID</p>
<input type="email" id="Email-input" class="emailbox" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
</div>
<div class="password-section">
<p>Password</p>
<input :type="password_type" class="password" id="passField" v-model="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" required>
<i class="bi bi-eye-slash" id="togglePassword" ></i>
</div>
<div class="forget-section">
<a href="">Forgot-password</a>
</div>
<div class="btn-section">
<button type="submit" class="login-btn">Login</button>
</div>
<div class="seperator">
<h5>OR</h5>
</div>
</form>
</div>
</div>
</div>
</template>
<script>
</script>
<style lang="scss" scoped>
@import "colors";
.main .container{
margin-top: 185px;
left: 320px;
width: 624px;
height: 391px;
background: #F5F5F5 0% 0% no-repeat padding-box;
border-radius: 21px;
opacity: 1;
}
img{
margin-top: 52px;
margin-left: 53px;
width: 245px;
height: 245px;
background: transparent 0% 0% no-repeat padding-box;
opacity: 1;
border-radius: 50%;
}
.container p{
color:$light_black;
margin-top: 31px;
margin-left: 71px;
margin-bottom: 39px;
width: 309px;
height: 24px;
text-align: left;
font: normal normal medium 18px/24px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: uppercase;
opacity: 1;
font-weight: 500;
}
.box{
background: $pale_white 0% 0% no-repeat padding-box;
box-shadow: 0px 5px 15px #00000029;
border: 1px solid #E4E4E4;
border-radius: 6px;
opacity: 1;
height: 425px;
width:389px;
margin-top: -406px;
margin-left: 358px;
}
.headings{
display:flex;
float:left;
opacity: 1;
padding-top: 28px;
color: $light_black;
text-transform: uppercase;
padding-left:69px;
width: 89px;
height: 33px;
text-align: left;
font: normal normal medium 25px/33px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: uppercase;
}
.signup{
padding-left: 92px; /* 82 */
}
.username p{
text-align: left;
font: normal normal normal 12px/13px Roboto;
letter-spacing: 0px;
color: #0A0102;
text-transform: capitalize;
opacity: 1;
width: 36px;
height: 13px;
margin-top:91px;
margin-left: 69px;
margin-bottom: 0px;
}
.emailbox{
background: $pale_white 0% 0% no-repeat padding-box;
border: 1px solid $border_clr;
border-radius: 2px;
opacity: 1;
margin-left: 69px;
width: 252px;
height: 35px;
}
.password-section p{
text-align: left;
font: normal normal normal 12px/13px Roboto;
letter-spacing: 0px;
color: $light_black;
text-transform: capitalize;
opacity: 1;
width: 44px;
height: 13px;
margin-top: 15px;
margin-left: 69px;
margin-bottom: 0px;
}
.password{
background: $pale_white 0% 0% no-repeat padding-box;
border: 1px solid $border_clr;
border-radius: 2px;
opacity: 1;
width: 252px;
height: 35px;
margin-left: 69px;
}
.forget-section a{
text-decoration: none;
color:#9D9D9D;
width: 81px;
height: 13px;
// font: normal normal normal 1px/13px Roboto;
letter-spacing: 0px;
color: #9D9D9D;
opacity: 1;
margin-left:202px;
margin-top:3px;
}
.btn-section .login-btn{
margin-left:69px;
margin-top:14px;
width: 252px;
height: 37px;
background: #A03037 0% 0% no-repeat padding-box;
border-radius: 3px;
opacity: 1;
font: normal normal normal 15px/20px Roboto;
letter-spacing: 0px;
color: #FFFFFF;
}
.headings{
cursor:pointer;
}
.box:hover{
box-shadow: 0 1px 5px $grey;
}
.bi-eye-slash{
margin-left:-27px;
// cursor: pointer;
// position: relative;
}
</style>