move the card thingie

web/index.html

@@ -383,7 +383,7 @@
     </div>
 
     <footer class="annoying">
-        Do you have our card already?
+        Do you have our card already? <a class="button--inline fn-close-cookies">&#10006;</span>
     </footer>
 
 </body>

web/script.js

@@ -1,9 +1,22 @@
 
-function togglemenu(){
+function togglemenu() {
     let menu = document.getElementById("menu");
-    if(menu.style.display !== "none"){
+    if (menu.style.display !== "none") {
         menu.style.display = "none";
     } else {
         menu.style.display = "block";
     }
-}
+}
+
+window.addEventListener("DOMContentLoaded", function (e) {
+    var footerEl = document.querySelector(".annoying");
+    document.querySelector(".fn-close-cookies").addEventListener("click", (e) => {
+        e.preventDefault();
+        var pos = footerEl.getAttribute("position");
+        if(pos == "left") {
+            footerEl.setAttribute("position", "right")
+        } else {
+            footerEl.setAttribute("position", "left")
+        }
+    })
+})

web/style.css

@@ -281,11 +281,16 @@ footer.annoying {
     bottom: .5rem;
     right: .5rem;
     background-color: var(--green);
-    animation: slide 10s ease-in-out;
+    animation: slide 1s ease-in-out;
     padding: .5rem;
     font-size: 16px;
 }
 
+footer.annoying[position="left"] {
+    right: auto;
+    left: .5rem;
+}
+
 .container--events {
     display: grid;
     grid-template-columns: 1fr 3fr;
@@ -343,4 +348,20 @@ footer.annoying {
 .event:hover h3 {
     background-color: var(--black);
     color: white;
+}
+
+button, .button, .button--inline {
+    display: inline-flex;
+    padding: .25rem;
+    cursor: pointer;
+    background-color: rgba(5, 5, 5, 0);
+    transition: .2s ease-in;
+    justify-content: center;
+    align-items: center;
+    line-height: 100%;
+    border-radius: 2px;
+}
+
+.button--inline:hover {
+    background-color: rgba(5, 5, 5, 0.3);
 }