Compare commits

..

2 Commits

@ -17,6 +17,15 @@
</head> </head>
<body> <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"> <div class="nav">
<h3 onclick="togglemenu()">Counter <br> Tourist <br> Information</h3> <h3 onclick="togglemenu()">Counter <br> Tourist <br> Information</h3>
@ -25,7 +34,7 @@
<h4><a href="#surroundings">The surroundings</a></h4> <h4><a href="#surroundings">The surroundings</a></h4>
<h4><a href="#events">Events</a></h4> <h4><a href="#events">Events</a></h4>
<h4><a href="./poinxs/">POINXS</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> </div>
<div class="landingimage"> <div class="landingimage">

@ -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";
}
}

@ -115,6 +115,35 @@ p {
margin-bottom: 1rem; 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 { .index {
background: var(--green); background: var(--green);
width: 100%; width: 100%;

Loading…
Cancel
Save