Residential Sales
Property
Filters
<!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>
