popup - 03

code:

            <div class="modal" id="demo-modal">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="header"><h3>Popup | modal | pure CSS</h3></div>
                    </div>	
                    <div class="modal-body">
                        <p> This responsive modal is made by using simple CSS functions and properties. The CSS used in this example is minimal. The only concern is to add the necessary 
                        rules to maintain the form and shape of the content in the popup.</p>
                        <h3>A link or button is also needed</h3>
                        <p> One can also foresee a link or button outside the modal. By clicking on this link the content of the modal will show up. </p>
                        <hr>
                        <p><strong>Hope this can help you!</strong></p>
                        <hr>			
                    </div>
                    <div class="modal-footer">
                        <a class="modal-close" href="#">[✖] close modal
                    </div>
                </div>
            </div> 
            <style>
                 .modal{top: 10vw; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 9999;	 overflow: auto; position: fixed; visibility: hidden; margin-top: -1vw; transition: all .3s ease-in-out; 
                    -moz-transition: all .3s ease-in-out;-webkit-transition: all .3s ease-in-out;}
                 .modal:target { opacity: 1;  margin-top: 0vw; visibility: visible;}
                 .modal-content { width: 70%; padding: 2vw; background-image:repeating-linear-gradient(55deg, black, yellow, red);  max-width: 25vw; margin: 5vw auto; 
                     position: relative;border-radius: 2vw; box-shadow: 0 0 0.6vw darkgrey;}
                 a{display: block; background-color:darkgreen; color: red; text-align: center; margin-top: 2vw; margin-left: 2vw; width: 10vw; border: .11vw dashed burlywood; }
            </style>