Popup Style 4

Date: August 29, 2023
Developed By: Paul Baretto

HTML

 <div class="main" id="popup-4">

        <h2 class="pop-title">Sign-up at the bottom</h2>
        
        <div class="close-btn-div">
            <span class="showbtn">Sign Up</span>
        </div>
     
        <div class="popbox ">
            <div class="pop-wrapper ">
                <div class="pop-wrapper-inner-container">
                <div class="form-container">
                    <div class="flex-box">
                        <div class="col-50 col windowoutleft">
                            <div class="bg">
                                <div class="img-container">
                                 <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/featured-img.png" alt="Woman Vector">
                                </div>
                            </div>
                        </div>
                        <div class="col-50 col form-col windowoutright ">
                            <div class="grid-wrap">
                                <div class="join">
                                    <h3>JOIN US TODAY</h3>
                                </div>
                                <form action="">
                                    <h4>Create You Account</h4>
                                    <div class="username inputdiv">
                                        <input class="input" type="text" placeholder="Username">
                                    </div>
                                    <div class="password inputdiv">
                                        <input class="input pass" type="password" placeholder="Password">
                                        <label for="">
                                            <input type="checkbox" name="checkbox" class="checkbox">
                                            <span class="checkbox-span"><i class="fa-regular fa-eye"></i></span>
                                        </label>
                                    </div>
                                    <div class="email inputdiv">
                                        <input class="input" type="email" placeholder="Email">
                                    </div>
                                    <div class="submit">
                                        <input   type="submit" value="Create" >
                                    </div>
                                </form>
                                <p>- or -</p>
                                <div class="icons">
                                    <div class="icon"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/08/insta-1.png" alt="Instagram"></a></div>
                                    <div class="icon"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/08/facebook.png" alt="FaceBook"></a></div>
                                    <div class="icon"><a href="#"><img src="https://nuitwebtek.com/wp-content/uploads/2023/08/gmail.png" alt="Gmail"></a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

CSS

.dummy-section{
    display: none;
}

#popup-4 .pop-title{
    text-align: center;
    color: #000;
    padding-block: 20px;
    font-size: 30px;
}
#popup-4.main {
    --inter: 'Inter', sans-serif;
    --vietnampro: 'Be Vietnam Pro', sans-serif;
    --bayon: 'Bayon', sans-serif;
    --text-bg: #A25AF7;
    --input-color: #827DDC;
    --input-font-weigth: 400;
    --bg-color: linear-gradient(240deg, #AC5CFF 0%, #4447AD 100%);
    --sm-bg-color:#A25AF7;
    --btn-bg: linear-gradient(206deg, #AC5CFF 0%, #4447AD 100%);
}

#popup-4 .main{
    background-image: url(https://cdn.jsdelivr.net/gh/PaulBaretto/HTML-CSS-JS-Stuff@master/blog-card-01/assets/images/img-3.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        position: relative;
}
#popup-4 .close-btn-div{
    position: fixed;
    /* right: 0; */
    /* top: 40%; */
    bottom: 0;
    left: 20px;
    display: inline;
    z-index: 99;
    /* transform: rotate(-90deg); */
    transition: transform 0.2s linear;
    transform: translateY(10px);
}
#popup-4 .showbtn{
    cursor: pointer;
    padding: 20px;
    font-size: 20px;
    background: var(--btn-bg);
    border-radius: 10px 10px 0 0;
    border: none;
    color: #fff;
    transition: 0.1s;
    display:block;
}
#popup-4 .close-btn-div:hover{
    transform: translateX(0);
}
.popbox{
    position: fixed;
    top: 0;
    left:0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
    overflow: hidden;
    transition: 1.4s;
    /*   */
}

.pop-wrapper{
    position: relative;
    display: grid;
    height: 100%;
    align-items: center;
}
.pop-wrapper::before{
    position: absolute;
    content: '';
    background: #dddddd8a;
    width: 100vw;
    height: 100vh;
    transform: translateY(-100%);
    z-index: -3;
    transition: 0.6s linear;
}
.showpopup .pop-wrapper::before {
    transform: translateY(0);
}
.windowoutleft{
    transform: translateX(-200%);
    transition: 1.1s linear;
    z-index: 1;
}
.windowoutright{
    transform: translateX(200%);
    transition: 1.1s linear;
    z-index: 0;
}
.showpopup.popbox{
    z-index: 98;
    position: fixed;
}
.showpopup .windowoutleft{
    transform: translateX(0);
}
.showpopup .windowoutright{
    transform: translateX(0);
}
.form-container {
    max-width: 1230px;
    margin-inline: auto;
}

#popup-4 .flex-box {
    display: flex;
}

#popup-4 .col {
    width: 100%;
}

#popup-4 .col-50 {
    width: 50%;
}

.bg {
    background: var(--bg-color);
    border-radius: 35px 0 0 35px;
    height: 100%;
    position: relative;
}

.img-container {
    max-width: 100%;
    display: flex;
    justify-content: center;
    height: 100%;
}

.windowoutleft .img-container img {
    max-width: 100%;
    filter: brightness(1);
    object-fit:contain;
}

.form-col {
    background: #fff;
    box-shadow: 0px 0px 23.846153259277344px 0px rgba(0, 0, 0, 0.40);
    position: relative;
    border-radius: 0 35px 35px 0;
}

.grid-wrap {
    height: 100%;
    display: grid;
    text-align: center;
    gap: 20px;
    padding-right: 20px;
}

.join {
    background: var(--text-bg);
    margin-top: 20px;
    border-radius: 0 20px 0 0;
    padding: 10px 0;
}

.join h3 {
    font-family: var(--bayon);
    font-weight: 400;
    font-size: 50px;
    color: #fff;
    text-align: center;
    padding-block: 15px 10px;
    margin-bottom:0;
}

.grid-wrap form {
    display: grid;
    gap: 15px;
    justify-content: center;
}

#popup-4 form h4 {
    font-family: var(--vietnampro);
    font-size: 25px;
    color: #000;
    font-weight: 600;
}

#popup-4 .inputdiv {
    display: inline;
    border-bottom: 2px solid #827DDC;
}

#popup-4 .inputdiv .input {
    border: none;
    outline: none;
    width: 100%;
    text-align: center;
    color: var(--input-color);
    font-size: 15px;
    font-weight: 400;
    font-family: var(--vietnampro);
    padding-bottom: 10px;
    margin-bottom:0;
}

#popup-4 .inputdiv .input::placeholder {
    color: var(--input-color);
    font-size: 15px;
    font-weight: 400;
    font-family: var(--vietnampro);
}

#popup-4 .submit {
    display: inline;
}


#popup-4 .submit input {
    border: none;
    outline: none;
    width: 50%;
    background: var(--btn-bg);
    padding: 10px;
    border-radius: 30px;
    color: #fff;
    font-family: var(--vietnampro);
    font-size: 20px;
    cursor: pointer;
}
#popup-4 .grid-wrap p{
    font-size: 18px;
    color: #000;
    font-family: var(--inter);
}
#popup-4 .icons{
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-bottom: 15px;
}


#popup-4 label{
    position: relative;
    bottom: 45px;
    right:10px;
}
#popup-4 .checkbox{
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
    right: 0;
    top: 15px;
    z-index: 1;
    cursor: pointer;
}
#popup-4 .checkbox-span{
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 15px;
    z-index: 0;
}
#popup-4 .checkbox-span::before {
    position: absolute;
    content: '';
    background: #000;
    width: 4px;
    height: 100%;
    border-radius: 3px;
    transform: rotate(45deg);
    right: 8px;
    bottom: 2px;
    filter: opacity(0.7);
    transition: 0.2s;
}
#popup-4 .hide-checkbox-icon.checkbox-span::before{
    /* height: 0; */
    transform: rotate(0deg);
    transform: translateX(10px);
    opacity: 0;
    width: 100%;
}


@media (max-width:1440px){
    #popup-4 .form-containe{
        max-width: 1220px;
    }
}
@media (max-width:1250px){
    #popup-4 .form-container{
        max-width: 1020px;
    }
}

/* mobile media  */
@media (max-width:900px){
    #popup-4 .flex-box{
        flex-direction: column;
        padding-inline: 20px;
    }
    #popup-4 .col{
        width: 100%;
    }
    #popup-4 .bg{
        border-radius: 35px 35px 0 0;
        background: var(--sm-bg-color);
    }
    #popup-4 .img-container{
        width: 50%;
        margin-inline: auto;
    }
    #popup-4 .grid-wrap{
        padding-right: 0;
    }
    #popup-4 .form-col{
        border-radius: 0 0 35px 35px;
    }
    #popup-4 .join{
        border-radius: 0 0 20px 0;
        margin-top: 0;
    }
    #popup-4 .inputdiv input,.inputdiv input::placeholder{
        font-size: 20px;
    }
}

JS

  let showbtn = document.querySelector('.showbtn');
   let thebody = document.querySelector('body');
   let popbox = document.querySelector('.popbox');
   let popwrapper = document.querySelector('.pop-wrapper');
 
 function btn() {
  popbox.classList.toggle('showpopup');
  
  // for body to get overflow hidden whan pop-up is active 
  if(popbox.classList.contains('showpopup')){
    thebody.style.overflowY = 'hidden';
    popwrapper.addEventListener('click', (e) => {
      if(e.target === popwrapper){
        popbox.classList.remove('showpopup')
        thebody.style.overflowY = 'auto';
        showbtn.innerHTML = 'Sign Up';
      }
    })
    showbtn.innerHTML = 'Close X';
  }else{
    thebody.style.overflowY = 'auto';
    showbtn.innerHTML = 'Sign Up';
  }
}
showbtn.addEventListener('click', btn);
 


// password show/hide 

let pass = document.querySelector('.pass');
let check = document.querySelector('.checkbox');

check.addEventListener('click',(showPassWord));
function showPassWord(){
  if(pass.type === 'password'){
    pass.type = 'text';
    let test = document.querySelector('.checkbox-span')
    test.classList.toggle('hide-checkbox-icon')
  }else{
    pass.type = 'password';
  }
  
};

Links

<!-- font awosome  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
<!-- google fonts  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Bayon&family=Be+Vietnam+Pro:ital,wght@0,200;0,400;0,600;1,300&family=Inter&display=swap"
    rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet">