diff --git a/css/modal.css b/css/modal.css new file mode 100644 index 0000000..befefd2 --- /dev/null +++ b/css/modal.css @@ -0,0 +1,43 @@ +.modal { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + opacity: 0; + visibility: hidden; + transform: scale(1.1); + transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; +} +.modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: white; + padding: 1rem 1.5rem; + width: 15rem; + border-radius: 0.5rem; +} +.modal-content img { + width: 14.5rem; +} +.close-button { + float: right; + width: 1.5rem; + line-height: 1.5rem; + text-align: center; + cursor: pointer; + border-radius: 0.25rem; + background-color: lightgray; +} +.close-button:hover { + background-color: darkgray; +} +.show-modal { + opacity: 1; + visibility: visible; + transform: scale(1.0); + transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; +}