diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..cd3a2cf Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html index af625b8..d70ffce 100644 --- a/index.html +++ b/index.html @@ -32,7 +32,25 @@ + + +
+ +
+ diff --git a/modal.js b/modal.js new file mode 100644 index 0000000..c0a7563 --- /dev/null +++ b/modal.js @@ -0,0 +1,16 @@ +var modal = document.querySelector('[data-modal]'); + +modal.addEventListener('click', function (event) { + event.preventDefault(); + var modalId = document.getElementById(modal.dataset.modal); + modalId.classList.add('open'); + + var exits = modalId.querySelectorAll('.modal-exit'); + console.log(exits) + exits.forEach(function (exit) { + exit.addEventListener('click', function (event) { + event.preventDefault(); + modalId.classList.remove('open'); + }); + }); +}); diff --git a/style.css b/style.css index 8442b2a..513e10c 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,75 @@ +/*! reset.css v1.1.0 | MIT License | github.com/pyxel-dev/reset-css */html,body,blockquote,button,dd,dl,dt,figure,fieldset,h1,h2,h3,h4,h5,h6,hr,iframe,input,legend,li,ol,p,pre,select,textarea,ul{margin:0;padding:0}*,*::before,*::after{box-sizing:border-box}body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", "Helvetica Neue", sans-serif}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:normal}img{border-style:none}img,video{height:auto;max-width:100%}iframe{border:0}label{display:inline-block}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}ul{list-style:none} + + html { background-color: #000000; -} \ No newline at end of file +} + +.info { + position: absolute; + bottom: 1rem; + right: 1rem; + cursor: pointer; + padding: .5rem; +} + +.modal { + position: fixed; + width: 100vw; + height: 100vh; + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + top: 0; + left: 0; + display: flex; + align-items: center; + justify-content: center; +} + +.modal.open { + visibility: visible; + opacity: 1; + transition-delay: 0s; +} + +.modal-bg { + position: absolute; + background: none; + width: 100%; + height: 100%; +} + +.modal-container { + border-radius: .5rem; + background: #888; + position: relative; + padding: 2rem; +} + +.modal-close { + position: absolute; + right: .5rem; + top: .5rem; + outline: none; + appearance: none; + background: none; + border: none; + cursor: pointer; +} + +.modal-container h1 { + font-size: 2rem; + font-weight: bold; + margin-bottom: .5rem; +} + +.modal-container h2 { + font-size: 1.25rem; + font-weight: bold; + margin-bottom: 2rem; +} + +.modal-container a { + color: #fff; +}