From fa9c9667fe35a49d069c4b21c8cad47f3048ef20 Mon Sep 17 00:00:00 2001
From: Nathan King <nathanking3590@gmail.com>
Date: Tue, 6 Jun 2023 14:24:02 +0100
Subject: [PATCH] add modal

---
 index.html | 16 ++++++++++++++++
 style.css  | 44 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/index.html b/index.html
index 388e894..36bce7e 100644
--- a/index.html
+++ b/index.html
@@ -55,5 +55,21 @@ <h1>Quote from a Bot</h1>
         <img src="./images/loader.gif" alt="loader">
     </div>
 
+    <div class="modal hidden">
+        <div class="modal-box">
+            <div class="modal-close">
+                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M17 2L2 17" stroke="#1212B2" stroke-width="3"/>
+                    <path d="M2 2L17 17" stroke="#1212B2" stroke-width="3"/>
+                </svg>
+            </div>
+            <div class="modal-content">
+                <h2>Ash Ketchum</h2>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+                <code>Lorem ipsum dolor sit amet.</code>
+            </div>
+        </div>
+    </div>
+
 </body>
 </html>
diff --git a/style.css b/style.css
index 207beb8..05c20ae 100644
--- a/style.css
+++ b/style.css
@@ -74,4 +74,48 @@ main {
 
 .hidden {
     display: none;
+}
+
+.modal {
+    background-color: rgb(161 210 255 / 80%);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+    padding: 24px;
+}
+
+.modal-box {
+    position: relative;
+    width: 100%;
+    max-width: 512px;
+    margin: 24px auto;
+    background-color: #ffffff; 
+    border: 2px solid #1212b2;
+}
+
+.modal-content {
+    padding: 16px;
+}
+
+.modal-close {
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    height: 36px;
+    width: 36px;
+    background-color: #ffaafb;
+    border: 2px solid #1212b2;
+    border-radius: 50%;
+}
+
+.modal-content > code {
+    display: block;
+    font-size: 10px;
+    color: #6885e0;
 }
\ No newline at end of file