<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Popup with Background</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet"> <style> .landing_popup .modal-content { background: url("landin_pop_banner.jpg"); color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); background-size: cover; background-repeat: no-repeat; padding: 2rem 1rem; overflow: hidden; } .landing_popup .modal-header, .landing_popup .modal-footer { border: none; } .landing_popup .logo{ width:150px; } .landing_popup .sideOfffer{ position: absolute; right: -39%; transform: rotate(45deg); background: #F5BA22; color: #4B132F; padding: 5px; width: 100%; top: 15%; text-align: center; font-size: 1.25rem; font-weight: 500; } .landing_popup .my-custom-modal-width.modal-dialog { max-width: 70%; /* Adjust as needed */ } .landing_popup .offers_text_header h2{ font-weight: 500; font-size: 3.5rem; color: #fff; margin-top: -8%; margin-bottom: 2rem; font-family: "DM Sans", sans-serif; transform: scale(1, 1.15); } .landing_popup .offers_text_header h2 .bg-color{ color:#F5BA22; font-weight: 700; } .landing_popup .offers_body_text{ text-align: center; width: 100%; font-family: "DM Sans", sans-serif; transform: scale(1, 1.05); margin-bottom: 2rem; padding: 0px 1rem; } .landing_popup .offers_body_text h5{ text-align: center; color: #fff; font-size: 1.65rem; font-weight: 400; line-height: 2.5rem; transform: scale(1, 1.05); } .landing_popup .offers_body_text .bg-color{ color:#F5BA22; font-weight: 700; } .landing_popup .offer_note{ padding: 0px 1rem; transform: scale(1, 1.05); text-align: center; margin-bottom: 2rem; width: 100%; display: block; } .landing_popup .book_button{ border-radius: 80px; width: 55%; margin-bottom: 20px; font-size: 2rem; transform: scale(1, 1.15); font-weight: 700; color: #4B132F; padding: 0px; background:#F5BA22; border-color: #F5BA22; } .landing_popup .book_button:hover, .landing_popup .book_button.btn-primary:not(:disabled):not(.disabled):active{ background-color: transparent; border:2px solid #F5BA22; padding: 0px; color: #fff; } @media (max-width: 1024px) { .landing_popup .modal-header{ justify-content: center; } .landing_popup .offers_text_header h2 { font-size: 2.5rem; margin-top: 0px; } .landing_popup .offers_body_text h5 { font-size: 1.25rem; line-height: 1.85rem; } .landing_popup .book_button { width: 68%; font-size: 1.25rem; } .landing_popup .sideOfffer { right: -37%; top: 10%; font-size: 0.875rem; } } @media (max-width: 767px) { .landing_popup .my-custom-modal-width.modal-dialog{ max-width: 100%; } .landing_popup .offers_text_header h2 { font-size: 2rem; margin-top: 0px; } .landing_popup .sideOfffer { right: -34%; top: 7%; font-size: 0.775rem; } .landing_popup .book_button { width: 75%; font-size: 1rem; } .landing_popup .offers_body_text h5 { font-size: 1.25rem; line-height: 1.85rem; } } .btn-close-cross{ position: absolute; right: 10px; top: -1px; } </style> </head> <body class="p-5"> <!-- Button to open popup --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myPopup"> Open Popup </button> <!-- Popup Modal --> <div class="modal fade landing_popup" id="myLandingPopup" tabindex="-1" aria-labelledby="myPopupLabel" aria-hidden="true"> <div class="modal-dialog my-custom-modal-width modal-dialog-centered"> <div class="modal-content"> <!-- Header --> <div class="modal-header position-relative"> <h5 class="modal-title" id="myPopupLabel"> <image src="popup_logo.svg" class="logo"></image></h5> <button type="button" class="btn-close btn-close-white btn-close-cross" onclick="closePopup()" data-bs-dismiss="modal" aria-label="Close"></button> <div class="sideOfffer">Last Remaining rooms!</div> </div> <!-- Body --> <div class="modal-body"> <div class="offers_text_header"> <h2 class="text-center">New City. New Start <br> <div class="d-flex justify-content-center"> <p class="bg-color me-2"> 10% Off </p> Your Rent.</div></h2> </div> <div class="offers_body_text"> <h5>Just graduated or relocating for work? Settle into your new city with<span class="bg-color"> 10% off rent</span>.Book your tendency with promo code <span class="bg-color">WELCOME10.</span></h5> </div> <span class="offer_note">*Offer valid only for contracts starting before 31st of October 2025. Proof Of generate or new employment required.</span> <div class="text-center"> <a href="https://graysonsresidentials.co.uk/" target="_blank" class="btn btn-primary book_button">Book Your Room Now</a><br> <span class="font-small">Limited time only.T&C's apply</span> </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.slim.min.js" integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8=" crossorigin="anonymous"></script> <script type="text/javascript"> $(window).on('load', function() { $('#myLandingPopup').modal('show'); }); function openPopup() { document.getElementById("popup").style.display = "flex"; } function closePopup() { document.getElementById("popup").style.display = "none"; } </script> </body> </html>
