Popup Style 2

HTML

<section class="pop-2-section">
   
    <div class="pop-up-2-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/cactus.png" alt="" class="hero-img">
                            </div>
                        </div>
                        <div class="pop-up-content">
                            <h2 class="pop-up-title">
                                Get a Quote
                            </h2>
                            
                            <form>
                                <div class="border-theme-orange">
                                    <i class="fa-regular fa-circle-user font-color-icon"></i>
                                    <input class= "textbox" type="name" id="name" value="" placeholder="Name">
                                </div>
                                <div class="border-theme-orange">
                                    <i class="fa-regular fa-envelope font-color-icon"></i>
                                    <input class= "textbox" type="email" id="email" value="" placeholder="Enter your email">
                                </div>    
                                <p class="pop-up-2-desc">
                                In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate
                                </p>
                                <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-up-position"><a href="#ex1" class="pop-up-btn" rel="modal:open">Subscribe Now</a></p>
</section>

CSS

.pop-up-2-container{
width: 80%;
margin: auto;
}
.pop-show-link{
    width: 100%;
    height: 100%;
}
.pop-up-content{
    position: relative;
}
.pop-up-btn{
    text-decoration: none;
    font-family: 'Baloo Bhaijaan 2';
    font-size: 20px;
    background: linear-gradient(61deg, #FF9200 0%, #FFCE00 100%);
    color: white;
    padding: 10px 30px;
    display: flex;
    font-weight: 600;
    width: fit-content;
    margin: 30px auto;
    border-radius: 50px;
    transition:.25s;
}
.pop-up-btn:hover {
    box-shadow: 0 0 12px 0 #858585;
    color: #fff;
    text-decoration: none;
}
.pop-up-wrap-outer{
display: flex;
}
.pop-up-position{
    position: relative;
}
.pop-up-wrap-inner {
    background: white;
    display: grid;
    grid-template-columns: 50% 50%;
    box-shadow: #dfc456ad 0px 0px 22px 0px;
    border-radius: 30px;
    width: 100%;
    max-width:780px;
    margin: 40px auto;
    overflow: hidden;
    position: relative;
    align-items: center;
}
.pop-up-box .pop-up-title {
    background: -webkit-linear-gradient(66deg, #FF9200 50%, #FFCE00 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 34px 0 0;
    font-family: 'Baloo Bhaijaan 2';
}
 .pop-up-box .pop-up-2-desc { 
    color: #122;
    font-family: 'Baloo Bhaijaan 2';
    text-align: center;
    font-size: 16.289px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.6;
    padding-inline: 72px;
}

.border-theme-orange {
    border-bottom: 4px #FFA300 solid;
    width: 100%;
    max-width: 300px;
    margin: 15px auto;
    display: flex;
    padding-bottom: 5px;
}

 .font-color-icon{
    font-size: 22px;
    height: fit-content;
    color: #858585;
}
#ex1.pop-up-box #name.textbox, #ex1.pop-up-box #email.textbox {
    padding: 0px 20px;
    font-family: 'Baloo Bhaijaan 2';
    font-size: 16px;
    width: 100%;
    border: none;
    background:transparent;
    margin: 0px;
}
.textbox::placeholder{
    color: #757575;
}
#ex1.pop-up-box .textbox:focus-visible{
    border: transparent;
    outline: none;
}
#pop-up-submit.pop-up-submit-btn {
    text-transform: uppercase;
    width: fit-content;
    margin: 5px auto;
    border-radius: 25px;
    background: linear-gradient(61deg, #FF9200 0%, #FFCE00 100%);
    color: #FFF;
    padding: 11px 50px;
    border-color: transparent;
    margin-top: 20px ;
}
#pop-up-submit.pop-up-submit-btn:hover{
    box-shadow:0 0 12px 0 #858585 ;
}
 form{
    display: grid;
    margin: 0px 0 30px;
}
.hero-img {
    position: relative;
    left: 25px;
    top: 10px;
    width: 345px;
    height: 324px;
    object-fit: cover;
}
 .modal {
    display: none;
    vertical-align: none;
    position: relative;
    z-index: 0;
    max-width: 100%;
    box-sizing: none;
    width: 100%;
    background: transparent;
    padding: 0;
    -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 {
    top: 50px;
    right: 10px;
    background-image: url(https://nuitwebtek.com/wp-content/uploads/2023/08/pop-2-btn-close.png);
} 

.pop-up-box.modal {
    width:fit-content;
}

@media (max-width:1536px){

    .pop-up-2-container .modal a.close-modal {
        right: 10px;
    }
}
@media (max-width:1440px){
     .hero-img {
        left: 15px;
        top: 5px;
    }
    .modal a.close-modal {
        top: 50px;
        right: 10px;
    }
   .pop-up-box .pop-up-desc{
        padding-inline: 62px;
    }
}
@media (max-width:1368px){  
     .modal a.close-modal {
        top: 50px;
        right: 10px;
    }
     .hero-img {
        left: 25px;
    }
    .pop-up-box .pop-up-2-desc {
        padding-inline: 52px;
    }    
}
@media (max-width:1280px){
    .pop-up-box .pop-up-2-desc{
        padding-inline: 32px;
    }
    .hero-img {
        left: 10px;
        top: 10px;
    }
    .pop-up-box .pop-up-title{
        font-size:35px;
    }
    .modal a.close-modal {
        top: 50px;
        right: 10px;
    }
}
@media (max-width:1200px){

    .modal a.close-modal {
        top: 50px;
        right: 10px;
    }
}
@media (max-width:1024px){
     .pop-up-wrap-inner {
        width: 100%;
    }
    .modal a.close-modal {
        right: 10px;
    }
}
@media (max-width:993px){
    .pop-up-wrap-inner {
        width: 100%;
    }
    .modal a.close-modal{
        right: 10px;
    }
    .hero-img {
        left: 15px;
        top: 5px;
        width: 90%;
        height: auto;
    }
}
@media (max-width:880px){
    .pop-up-wrap-inner {
        width: 100%;
    }
    .modal a.close-modal {
        right: 15px;
        top: 50px;
    }
    
    .hero-img {
        left: 15px;
        top: 5px;
        width: 90%;
        height: auto;
    }
}
@media (max-width:768px){
    .pop-up-box .pop-up-2-desc {
        padding-inline: 20px;
    }
     .hero-img {
        top: 10px;
        left: 15px;
        width: 310px;
        height: 290px;
    }
}
@media (max-width:680px){
    .pop-up-box .pop-up-2-desc {
        font-size: 14px;
        padding-inline: 20px;
    }
    .modal a.close-modal {
        right: 15px;
        top: 50px;
    }
    .hero-img {
        left: 15px;
        top: 5px;
        width: 260px;
        height: 243px;
    }
    .textbox {
        padding: 0px 0 0 10px;
    }
    .pop-up-box .pop-up-title {
        font-size: 30px;
    }
    .modal a.close-modal{
        width: 25px;
    }
    .textbox{
        font-size: 13px;
    }
}
@media (max-width:580px){
    .pop-up-wrap-inner{
        grid-template-rows: 30% 70%;
        grid-template-columns: none;
        margin: 0px auto;
        height: 540px;
    }
     .pop-up-box .pop-up-title {
        margin: 0 0 0;
        position: relative;
        top: -195px;
    }
     form {
        display: grid;
        margin: 0px 0 10px;
    }
    .modal a.close-modal{
        top: 10px;
    }

     .font-color-icon{
        display: flex;
        padding-bottom: 5px;
    }
    .hero-img {
        top: 80px;
        width: 189px;
        height: 178px;
    }
}
@media (max-width:420px){
    pop-up-wrap-inner{
        height: 620px;
        grid-template-rows: 45% 55%;
    }
    .pop-up-box .pop-up-title {
        top: -255px;
    }
 
   .hero-img{
        left: 5px;
    }
    .modal a.close-modal {
        top: 10px;
        right: 15px;
    }
}
@media (max-width:375px){
  
    .pop-up-box .pop-up-title {
        top: -235px;
    }
     .textbox {
        font-size: 12px;
    }

     .font-color-icon{
        font-size: 18px;
    }
     .hero-img {
        width: 210px;
        height: 210px;
        top: 40px;
    }
}
@media (max-width:360px){
    .hero-img {
        width: 203px;
        height: 190px;
    }
}

Links

<link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700;800&display=swap" rel="stylesheet">

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
 <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" />

Scripts

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <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>