A Pen by Andrew saeed

Thumbnail
This awesome code was written by 2ndow, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 2ndow ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Andrew saeed</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
                  .content{
                width: 500px;
                height: 250px;
                margin: 70px auto;
                border: 1px solid #55894c;
                border-radius: 5px;
                box-shadow: 0 0 10px #000;
                position: relative;
                overflow: hidden;
            }
            .content h1{
                width: 100%;
                height: 30px;
                margin: 0px;
                padding: 10px;
                text-align: center;
                color: #e3d8d8;
                background: #aaa;
            }
            .content .close{
                padding: 10px;
                border: 1px solid #e3d8d8;
                border-radius: 5px;
                position: absolute;
                top: 5px;
                right: 10px;
                color: #aaa;
                font-weight: bold;
                cursor: pointer;
            }
            .content .ok{
                width: 20%;
                height: 30px;
                margin: 30% 40%;
                padding: 10px;
                border: 1px solid #e3d8d8;
                border-radius: 5px;
                text-align: center;
                color: #e3d8d8;
                font-weight: bold;
                background: #aaa;
                cursor: pointer;
            }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class="content">
            <h1>welcom <button id="close" class="close">X</button></h1>
            <p></p>
            <button class="ok">OK</button>
        </div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/2ndow/a-pen-by-andrew-saeed-bLJZea */
            .content{
                width: 500px;
                height: 250px;
                margin: 70px auto;
                border: 1px solid #55894c;
                border-radius: 5px;
                box-shadow: 0 0 10px #000;
                position: relative;
                overflow: hidden;
            }
            .content h1{
                width: 100%;
                height: 30px;
                margin: 0px;
                padding: 10px;
                text-align: center;
                color: #e3d8d8;
                background: #aaa;
            }
            .content .close{
                padding: 10px;
                border: 1px solid #e3d8d8;
                border-radius: 5px;
                position: absolute;
                top: 5px;
                right: 10px;
                color: #aaa;
                font-weight: bold;
                cursor: pointer;
            }
            .content .ok{
                width: 20%;
                height: 30px;
                margin: 30% 40%;
                padding: 10px;
                border: 1px solid #e3d8d8;
                border-radius: 5px;
                text-align: center;
                color: #e3d8d8;
                font-weight: bold;
                background: #aaa;
                cursor: pointer;
            }

/*Downloaded from https://www.codeseek.co/2ndow/a-pen-by-andrew-saeed-bLJZea */
var Mydiv = document.querySelector("div"),
    mybutton = document.getElementById("close");
function hideen() {
    "use strict";
    Mydiv.style.display = "none";
}
mybutton.addEventListener("click", hideen);
window.onkeydown = function (e) {
    "use strict";
    
    if ((e.ctrlKey && e.code == "KeyZ") || e.code == "Escape") {
        Mydiv.style.display = "none";
    }
};

Comments