add modal

5 months ago · 3afc8bd2fa
parent bc6e453c89
commit 3afc8bd2fa
3 changed files with 49 additions and 2 deletions
--- a/web/index.html
+++ b/web/index.html
@ -17,6 +17,15 @@
 </head>

 <body>
+
+    <div class="modaloverlay" id="modal">
+        <div class="modaltext">    
+            <div class="closemodal" onclick="closemodal()">&#10006;</div>
+            <h3>So why did we make this?</h3>
+            <p>great description of why what and how.. <br><br><br><br><br><br></p>
+        </div>
+    </div>
+
    <div class="nav">

        <h3 onclick="togglemenu()">Counter <br> Tourist <br> Information</h3>
@ -25,7 +34,7 @@
            <h4><a href="#surroundings">The surroundings</a></h4>
            <h4><a href="#events">Events</a></h4>
            <h4><a href="./poinxs/">POINXS</a></h4>
-            <h4>Sustainability</h4>
+            <h4 onclick="closemodal()"><a style="cursor:pointer;">About</a></h4>
        </div>
    </div>
    <div class="landingimage">
--- a/web/script.js
+++ b/web/script.js
@ -20,3 +20,12 @@ window.addEventListener("DOMContentLoaded", function (e) {
        }
    })
 })
+
+function closemodal(){
+    let modal = document.getElementById("modal");
+    if (modal.style.display !== "none") {
+        modal.style.display = "none";
+    } else {
+        modal.style.display = "block";
+    }
+}
--- a/web/style.css
+++ b/web/style.css
@ -115,6 +115,35 @@ p {
    margin-bottom: 1rem;
 }

+.modaloverlay{
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background: #212529;
+    z-index: 10000;
+    color: white;
+    padding: 5%;
+
+
+}
+
+.modaltext{
+    max-width: 80ch;
+    margin: auto;
+}
+
+.closemodal{
+    position: absolute;
+    left: 73%;
+    padding: 4px;
+    border: 2px solid white;
+}
+
+.closemodal:hover{
+    background-color: rgba(255, 255, 255, .5);
+    cursor: pointer;
+}
+
 .index {
    background: var(--green);
    width: 100%;