Free Coupon Popup

PHOTO EMBED

Tue Nov 14 2023 04:47:45 GMT+0000 (Coordinated Universal Time)

Saved by @naunie 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* Overlay styling */
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5); /* More transparent background */
      z-index: 1;
    }

    /* Popup container styling */
    #popup-container {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      z-index: 2;
      border-radius: 0px; /* Rounded corners */
    }

    /* Close button styling */
    #close-button {
      color: #F9278E;
      background-color: transparent;
      position: absolute;
      font-size: 30px;
      right: 15px;
      top: 15px;
      cursor: pointer;
      z-index: 3;
    }

    /* Popup image styling */
    #popup-img {
      max-width: 100%;
      max-height: 70vh;
      border-radius: 8px; /* Rounded corners for the image */
      border: 1px solid transparent; /* Transparent border */
    }

    /* Show-popup container styling */
    #show-popup-container {
      position: fixed;
      bottom: 140px;
      left: 20px;
      z-index: 4; /* Ensure the button is above the popup */
    }

    /* Show-popup button styling */
    #show-popup {
      cursor: pointer;
      width: auto;
      height: 60px;
      background-color: #bc1d29;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      border: none;
      border-radius: 0;
      transform: rotate(270deg);
      transform-origin: left center;
    }

    #show-popup:hover {
      background-color: #a0141f; /* Darker color on hover */
    }

     /* Responsive 912 */
 @media(max-width:840px){
	#popup-container {
padding: 40px; /* Adjust padding for smaller screens */
top: 55%; /* Center vertically */
left: 38%; 
transform: translate(-50%, -50%); /* Center the container */
}

#show-popup-container {
bottom: 170px; /* Adjust top position for smaller screens */
left: 29px; /* Adjust left position for smaller screens */
}

#show-popup {
font-size: 29px; /* Adjust font size for smaller screens */
background-color: #bc1d29;
}

#show-popup:hover {
  background-color: #a0141f; /* Darker color on hover */
}

#popup-img {
max-width: 160%; /* Adjust the width of the image */
max-height: 60vh;
border-radius: 10px; /* Rounded corners for the image */
border: 2px solid transparent; /* Transparent border */
}

#close-button {
font-size: 40px;
left: 650px; /* Adjust right position for smaller screens */
top: 2px; /* Adjust top position for smaller screens */
}
	}

    /* Responsive styles 790px */
/* Responsive styles 790px */
@media only screen and (max-width: 790px) {
  #popup-container {
    padding: 10px; /* Adjust padding for smaller screens */
    top: 55%; /* Center vertically */
    left: 40%;
    transform: translate(-50%, -50%); /* Center the container */
  }

  #show-popup-container {
    bottom: 130px; /* Adjust top position for smaller screens */
    left: 22px; /* Adjust left position for smaller screens */
  }

  #show-popup {
    font-size: 23px; /* Adjust font size for smaller screens */
    background-color: #bc1d29;
    position: fixed; /* Add this line to fix the button position */
  }

  #show-popup:hover {
    background-color: #a0141f; /* Darker color on hover */
  }

  #popup-img {
    max-width: 140%; /* Adjust the width of the image */
    max-height: 60vh;
    border-radius: 10px; /* Rounded corners for the image */
    border: 2px solid transparent; /* Transparent border */
  }

  #close-button {
    font-size: 28px;
    left: 570px; /* Adjust right position for smaller screens */
    top: 1px; /* Adjust top position for smaller screens */
  }
}

 /* Responsive styles 430px */
@media(max-width:430px) {
    #popup-container {
    padding: 10px; /* Adjust padding for smaller screens */
    top: 45%; /* Center vertically */
    left: 40%; 
    transform: translate(-50%, -50%); /* Center the container */
  }

  #show-popup-container {
    bottom: 150px; /* Adjust top position for smaller screens */
    left: 20px; /* Adjust left position for smaller screens */
  }

  #show-popup {
    font-size: 18px; /* Adjust font size for smaller screens */
    background-color: #bc1d29;
  }

  #show-popup:hover {
      background-color: #a0141f; /* Darker color on hover */
    }

  #popup-img {
    max-width: 140%; /* Adjust the width of the image */
    max-height: 60vh;
    border-radius: 10px; /* Rounded corners for the image */
    border: 2px solid transparent; /* Transparent border */
  }

  #close-button {
    font-size: 18px;
    left: 290px; /* Adjust right position for smaller screens */
    bottom: 5px; /* Adjust top position for smaller screens */
  }
}
  </style>
</head>

<body>

  <div id="show-popup-container">
    <button id="show-popup" onclick="togglePopup()">GET $6 COUPON </button>
  </div>

  <div id="overlay" onclick="closePopup()"></div>

  <div id="popup-container">
    <div id="close-button" onclick="closePopup()">X</div>
    <img id="popup-img" src="https://ep-website-media.s3.ap-southeast-1.amazonaws.com/sg/wp-content/uploads/2023/05/SG-Get-Free-S6-Coupon-Signup-popup.png" alt="Popup Image">
  </div>

  <script>
    function togglePopup() {
      document.getElementById("overlay").style.display = "block";
      document.getElementById("popup-container").style.display = "block";
    }

    function closePopup() {
      document.getElementById("overlay").style.display = "none";
      document.getElementById("popup-container").style.display = "none";
    }
  </script>

</body>

</html>
content_copyCOPY