<div class="container">
              <a class="button" href="#popup">Click here for popup</a>
              <div class="popup" id="popup">
                 <div class="popup-inner">
                   <div class="popupphoto"><img src="../images/4.jpg" alt=""></div>
                   <div class="popuptext">
                    <h1>Pure CSS popup</h1>
                    <p>This is another example of a popup made with CSS properties and functions. More examples can be found on this website in the coding page. For earlier simple examples 
                    of coding, see this coding page.</p>
                  </div>
                  <a class="closepopup" href="#">X</a>
                </div>
              </div>
            </div>
            <style>
                .container {background-color: dodgerblue; display: flex; align-items: center; justify-content: center; width: 25vw; height: 25vh;}
                .button {text-decoration: none;font-size: 1vw; display: inline-block; border-radius: 1.5vw; background-color: lightgreen; color: red; padding: 1vw 2vw; font-weight: 900;}
                .popup {display: flex; align-items: center; justify-content: center; position: fixed; width: 65vw; height: 65vh; bottom: 0;right: 0; background-image:
                  repeating-linear-gradient(95deg, red, yellow, black); z-index: 2; visibility: hidden; opacity: 0; overflow: hidden; transition: .64s ease-in-out;}
                .popup-inner {position: relative;bottom: -75vw; right: -75vh; display: flex; align-items: center; max-width: 75vw; max-height: 75vh; width: 60%; height: 80%; background-color: 
                  seagreen; transform: rotate(32deg); transition: .64s ease-in-out;}
                .popupphoto {display: flex; justify-content: flex-end; align-items: flex-end; width: 40%; height: 100%; overflow: hidden;}
                .popupphoto img {width: auto; height: 100%;}
                .popuptext {display: flex; flex-direction: column; justify-content: center; width: 60%; height: 100%; padding: 2vw;}
                .popuptext h1 {font-size: 2vw; font-weight: 600;  margin-bottom: 2vw; color: black;}
                .popuptext p {font-size: 1.25vw;color: dodgerblue; line-height: 1.5;}
                .popup:target {visibility: visible; opacity: 1; }
                .popup:target .popup-inner {bottom: 0; right: 0; transform: rotate(0);}
                .closepopup {position: absolute; right: -1vw; top: -1vw; width: 3vw; height: 3vw; font-size: 1vw; font-weight: 300; border-radius: 100%;
                  background-color: green; z-index: 4; color: red; line-height: 3vw; text-align: center; cursor: pointer; text-decoration: none;}

                @media screen and (max-width: 768px) {
                  html, body {font-size: .7vw;}
                }
            </style>
            <script>
                // When the user clicks on div, open the popup
                function myFunction() {
                var popup = document.getElementById("myPopup");
                popup.classList.toggle("show");
                }
            </script>