Popup Style 3

HTML

<section class="pop-3-section">
    <div class="pop-up-3-container">
    <!-- Modal HTML embedded directly into document -->
        <!-- <div id="ex1" class="modal"> -->
            <div class="pop-up-box modal" id="ex1">
                <div class="pop-up-wrap-outer">
                    <div class="pop-up-wrap-inner">
                        <div class="img-div">
                            <div class="img-base">
                                <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/shopy.png" alt="" class="hero-img">
                            </div>
                        </div>
                        <div class="pop-up-content">
                            <h2 class="pop-up-title">
                                Sign Up Now
                            </h2>
                            <form autocomplete="off">
                                <input class= "textbox" type="name" id="name" value="" placeholder="Name" >

                                <input class= "email textbox" type="email" id="email" value="" placeholder="ENTER YOUR EMAIL">    
                                
                                <input class="pop-up-submit-btn" id="pop-up-submit" type="submit" value="submit">
                            </form>
                        </div>
                    </div>
                </div>   
            </div>
        <!-- </div> -->
    </div>
    <!-- Link to open the modal -->
<p class="pop-btn-div"><a href="#ex1" class="pop-up-btn" rel="modal:open">Subscribe Now</a></p>

 
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Bayon';
}
.pop-up-1-container{
width: 80%;
margin: auto;
}
.jquery-modal.blocker.current{
    z-index: 99;
}
.pop-up-content {
    background: #7B2FB4;
    position: relative;
    width: 620px;
    border-radius: 200px;
    height: 270px;
    right: 120px;
  }
.pop-btn-div .pop-up-btn{
    text-decoration: none;
    background: #7B2FB4;
    color: white;
    padding: 10px 30px;
    display: flex;
    font-weight: 600;
    width: fit-content;
    margin: 30px auto;
    border-radius: 50px;
    font-size: 20px;
    letter-spacing: 2.2px;
}
.pop-btn-div .pop-up-btn:hover {
    box-shadow: 0px 0px 15px 0px #606060;
}
.pop-up-wrap-outer{
display: flex;
}
.pop-up-wrap-inner {
    display: flex;
    align-items: center;
    margin-inline: auto;
}
.pop-up-box .pop-up-title{
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    font-family: 'Bayon';
    line-height: normal;
    margin: 14px 158px 0 0;
    color: white;
    display: flex;
    justify-content: end;
} 
#ex1.pop-up-box #name.textbox, #ex1.pop-up-box #email.textbox {
    padding: 10px 20px;
    text-transform: uppercase;
    width: 300px;
    font-family: 'Bayon';
    border: none;
    background: white;
    margin: 10px auto;
    border-radius: 100px;
    outline: none;
    letter-spacing: 2.2px;
}
#pop-up-submit.pop-up-submit-btn {
    text-transform: uppercase;
    width: fit-content;
    margin: 5px auto;
    border-radius: 25px;
    background: #FCA410;
    color: white;
    padding: 11px 50px;
    border-color: transparent;
    font-weight: 700;
}
#pop-up-submit.pop-up-submit-btn:hover{
    background: linear-gradient(45deg, #FCF200 12.50%, #FFB800 50%);
}
form {
    display: grid;
    margin: 0px 106px 30px;
    justify-content: end;
}
.img-div {
    position: relative;
    left: 50px;
    top: 0;
    z-index: 1;
}
.hero-img{
    width: 350px;
    height: 350px;
    object-fit: cover;
    border-radius: 180px;
}
.modal {
    display: none;
    vertical-align: none;
    position: relative;
    z-index: 0;
    max-width: 100%;
    box-sizing: none;
    width: 90%;
    background: transparent;
    padding: 15px 30px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    text-align: center;
}
.modal a.close-modal {
    position: absolute;
    top: 0;
    right: 525px;
}

.email:invalid+ .button{
    pointer-events: none;
    opacity: 0.6;
}
@media (max-width:1536px){
    .pop-up-wrap-inner{
        position: relative;
        right: 0;
    }
    .img-div {
        left: 50px;
    }
    .modal a.close-modal {
        right: 215px;
    }
    .pop-up-box .pop-up-title{
    margin: 14px 170px 0 0;
    }
    .modal a.close-modal {
        right: 240px;
    }
}

@media(max-width:1180px){
    .img-div{
        left: 50px;
    }
    .pop-up-wrap-inner{
        right: 0;
    }
    .modal a.close-modal {
        right: 135px;
    }
}
@media (max-width:993px){
    .hero-img {
        width: 270px;
        height: 270px;
        border-radius: 135px; 
    }
    .pop-up-content {
        height: 250px;
        width: 645px;
    }
    .pop-up-box .pop-up-title{
        margin: 14px 142px 0 0;
    }
    .textbox{
        width: 250px;
        padding: 8px 20px;
    }
    .modal a.close-modal {
        right: 100px;
    }
}
@media (max-width: 880px){
    .pop-up-wrap-outer{
        justify-content: center;
    }
    .pop-up-wrap-inner{
        right: 0;
        display: grid;
        right: 0;
    }
    .hero-img {
        width: 270px;
        height: 270px;
    border-radius: 135px;
    }
    form{
        justify-content: center;
        margin: 0;
    }
    .pop-up-box .pop-up-title {
    justify-content: center;
    margin: 270px 0 0 0;
    font-size: 25px;
}
    .img-div {
        display: flex;
        justify-content: center;
        top: 70px;
        left: 0;
    }
    #ex1.pop-up-box #name.textbox, #ex1.pop-up-box #email.textbox {
        width: 100%;
        padding: 8px 20px;
        font-size: 12px;
        text-align: center;
    }
    .pop-up-content {
        height: 530px;
        width: 250px;
        left: 10px;
        right: 0;
        top: -170px;
    }
    .button{
        padding: 5px 30px;
        font-size: 12px;
    }    
    .modal a.close-modal {
        right: 210px;
        top: 85px;
    }
}
@media (max-width:480px){
    .img-div{
        top: 80px;
    }
    .modal a.close-modal {
        right: 50px;
        top: 75px;
    }
}

Links

<link href="https://fonts.googleapis.com/css2?family=Bayon&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>