/* Add your website's styles here */

/* Styles for the pop-up */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.popup-content {
    background-color: white;
    color:red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
Create the JavaScript (script.js) to show the pop-up:
javascript
Copy code
// Function to display the pop-up
function showPopup() {
    var popup = document.getElementById("popup-container");
    popup.style.display = "block";
}

// Function to close the pop-up
function closePopup() {
    var popup = document.getElementById("popup-container");
    popup.style.display = "none";
}

// Call the showPopup function when the page loads (you can control when to call this based on your expiry logic)
window.onload = function() {
    showPopup();
};
This code creates a pop-up that is initially hidden but is displayed when the page loads. You can customize the pop-up's appearance by modifying the CSS styles. You should also integrate this code with your website's expiration logic to control when the pop-up is displayed based on your specific requirements.