I am looking to create an onclick popup feature.
https://i.sstatic.net/qoaTy.png
This is the progress I have made so far.
https://i.sstatic.net/Grxpd.png
Currently, the layout takes up the entire page and I'm having difficulty aligning labels with checkboxes as they appear below the checkboxes and cannot be moved. I would appreciate any suggestions, especially in using bootstrap. As a beginner, I am finding it challenging to grasp all the concepts, despite reading documentation.
CSS:
body{
padding:0;
margin:0;
}
.signupContainer{
height:100%;
position:absolute;
overflow:hidden;
background-color: white;
box-shadow: 15px 9px 26px rgba(0, 0, 0, 0.2);
border-radius: 20px;
margin: 0 auto;
}
.box{
position:absolute;
height:100%;
width:50%;
margin-top: 55px;
font-family: 'Poppins', sans-serif;
padding-bottom: 140px;
}
.box h1{
text-align:center;
margin: 0 auto;
font-size:30px;
margin-bottom: 20px;
}
.box input{
font-family: 'Poppins', sans-serif;
display:block;
width:300px;
margin:0px auto;
padding:5px;
text-align: center;
background: #F8F8F8;
color:#fff;
border:0;
border-radius: 20px;
margin-bottom: 20px
}
.box input:focus,.box input:active,.box button:focus,.box button:active{
outline:none;
}
.box label {
font-family: 'Poppins', sans-serif;
}
.box button{
background: #FE6047;
border:0;
color:#fff;
padding:5px;
font-size:20px;
width:300px;
margin:20px auto;
display:block;
cursor:pointer;
border-radius: 20px;
}
.box button:active{
background:#27ae60;
}
.box p{
font-size:14px;
text-align:center;
}
.box p span{
cursor:pointer;
color:#666;
}
input[type=checkbox] {
margin: 2px 0 0;
align-self: flex-start;
}
HTML:
<div class="signupContainer col-6">
<div class="box col-12">
<h1 class="col">Sign up</h1>
<input type="text" class="col" placeholder="Username"/>
<input type="email" class="col" placeholder="Email"/>
<input type="text" class="col" placeholder="Country"/>
<input type="password" class="col" placeholder="Password"/>
<input type="password" class="col" placeholder="Repeat Password"/>
<label for="seller" class="checkbox-inline"><input type="checkbox" id="seller" >Seller</label>
<label for="buyer" class="checkbox-inline"><input type="checkbox" id="buyer" > Buyer</label>
<button class="col">Sign Up</button>
</div>
</div>
Any advice or tips would be greatly appreciated as I continue to learn and improve this project!