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
@ -19,4 +19,13 @@ window.addEventListener("DOMContentLoaded", function (e) {
            footerEl.setAttribute("position", "left")
        }
    })
-})
+})
 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%;