<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#newsletterSignupModal"> subscribe now </button> <div class="modal fade" id="newsletterSignupModal" tabindex="-1" role="dialog" aria-labelledby="newsletterSignupModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="row m-0"> <div class="details col-12 col-lg-7"> <div class="d-flex align-items-center flex-column" style="height: 100%;"> <div class="p-2 nl-itb-logo"><img src="https://multimedia.ibt-mail.com/ibt-B/photos/5e373759-92af-4c48-953e-059c7db110ca.png" width="100%" /></div> <div class="mb-auto p-2"><span class="nl-tag-line">Life's Great with Great News</span> </div> <div class="p-2"> <p class="nl-input-top-line">Stay up to date with our Daily Newsletter</p> <form class="align-self-center" action="https://www.ibt-mail.com/add_subscriber.html" accept-charset="utf-8" method="post"> <!-- Email field (required) --> <input class="input-text" type="email" name="email" placeholder="Enter your email" /> <!-- List token --> <!-- Get the token at: https://www.ibt-mail.com/campaign_list.html --> <input type="hidden" name="campaign_token" value="Y" /> <!-- Add subscriber to the follow-up sequence with a specified day (optional) --> <input type="hidden" name="start_day" value="0" /> <!-- Subscriber button --> <button type="submit" class="nl-submit-btn" value="Submit">Submit</button> </form> </div> <div class="p-2"><a href="#" class="nl-close-link" data-dismiss="modal">No thanks, go to webiste</a></div> </div> </div> <div class="col-12 col-lg-5 ad p-0 nl-right-side"> <img class="nl-right-side-img" src="https://multimedia.ibt-mail.com/ibt-B/photos/6849b256-5e6a-441c-9dca-0fc11e52f0c5.jpg" width="100%" height="100%" /> </div> </div> </div> </div> </div> </div>

.container { display: flex; justify-content: center; margin-top: 200px; background: #fff; } .modal, .fade, .show { background-color: transparent; padding-left: 15px; padding-right: 15px; text-align: center; padding-top: 5rem !important; } .modal-content { border: none !important; border-radius: 0% !important; background: #fff; } .modal-body { border: none; background-color: white; padding-bottom: 5px; } .nl-itb-logo { border-bottom: rgb(175, 138, 61) 1px solid; } .nl-tag-line { color: rgb(175, 138, 61); font-size: 22px; } .nl-input-top-line { font-size: 17px; font-weight: 700; margin-bottom: 0; } .input-text { border: rgb(175, 138, 61) 1px solid; padding: 10px; margin-top: 0.5rem; } .nl-submit-btn { margin-top: 0.5rem; background-color: rgb(175, 138, 61); border: transparent; padding: 10px 15px; color: #fff; font-size: 18px; font-weight: 700; text-transform: uppercase; } .nl-close-link { font-size: 14px; font-weight: 400; color: rgb(0, 0, 238); text-decoration-line: underline; } @media (min-width: 599px) { .modal-dialog { max-width: 700px !important; } .details { padding: 30px !important; } .text-muted a { color: #c0bfbf; font-weight: bold; text-decoration: underline; } small.para { font-weight: bold; font-size: 14px; color: #63686c; } } @media (max-width: 992px) { .nl-right-side-img { max-height: 200px; object-fit: cover; } }