Passport Article 2024

by Kofod

HTML

<div class="container">
        <div class="overlay"></div>
        <div class="doorMap"></div>
        <div class="doorContainer"></div>
        <div class="Textarea"><div><strong>Summer has arrived!<br /><br /></strong></div>
<div>We at ET would love to spend this summer with all of you!</div>
<div>So find your passports and let's go travel!<br /><br /></div>
<div>We have planned 4 destinations for you, so follow us on our trip.<br /><br /></div>
<div>Come back everyday to see what we have gotten planned for you!</div></div>
    </div>
    <div class="waitMessage">
        <div class="addTitle"></div>
        <div class="addMessage"></div>
        <button onclick="closeWaitMessage()"><strong>X</strong></button>
    </div>
    <div class="popupMessage">
        <div class="popupContent"></div>
        <button onclick="closePopupMessage()"><strong>X</strong></button>
    </div>
    <div class="textBox">
        <div></div>
    </div>

CSS

body {
            font-family: 'Patrick Hand SC', cursive;
            margin: 0;
            overflow: hidden;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            background: url('https://i.imgur.com/zv7E4Fe.png') no-repeat center center fixed;
            background-size: cover;
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://i.imgur.com/ZBDK66O.png') no-repeat center center;
            background-size: cover;
            pointer-events: none;
        }
        
        .doorMap {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://i.imgur.com/5Tkurr8.png') no-repeat center center;
            background-size: cover;
            pointer-events: none;
        }
        
        .doorContainer {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        
        .doors {
            position: absolute;
            width: 110px;
            height: 124px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            transition: backdrop-filter 0.3s, border 0.3s;
        }
        .open {
            backdrop-filter: blur(0px);
            border: 2px solid #ddd;
        }
        
        .waitMessage,
        .popupMessage {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%);
            background: #679595;
            color: black;
            padding: 20px;
            border-radius: 10px;
            text-align:...

JavaScript

$('head').append('<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap" rel="stylesheet">');

// You can change the number in order to decide how fast or slow a message should close - 100 should be fine though
function closeWaitMessage() {
    $('.waitMessage').fadeOut(100);
}

function closePopupMessage() {
    $('.popupMessage').fadeOut(100);
}

$(document).ready(function() {
    codeMessage = [];

    // Messages for all the days that appear in the above text box! - In order so make sure to keep the codeMessage number from 1 - the amount of doors you want
    codeMessage[1] = ('Welcome to New York! <br> Are you ready try out the streets styles of the big apple? <br> <a href="https://en.virtualpopstar.com/social?category=11&topic=362330" target="_blank"><img style="100px;" src="https://i.imgur.com/CE2vaaJ.png" style="width: 100px; border-radius: 6px;"></a>');
    codeMessage[2] = ('Yet another day in New York. Today we want you to help us out, because we have lost some words around town. Can you find them? <br> <a href="https://en.virtualpopstar.com/social/forum?category=3&topic=362378" target="_blank"><img src="https://i.imgur.com/CE2vaaJ.png" style="width: 100px; border-radius: 6px;"></a>');
    codeMessage[3] = ('It is time for a break. Join us at the retirement home in Florida! <br> <a href="https://en.virtualpopstar.com/social/forum?category=11&topic=362411" target="_blank"><img src="https://i.imgur.com/SM6BFae.png" style="width: 100px; border-radius: 6px;"></a>');
    codeMessage[4] = ('Are you enjoying the break? Or do we need to keep you busy? <br> <a href="https://en.virtualpopstar.com/social/forum?category=11&topic=362446" target="_blank"><img src="https://i.imgur.com/SM6BFae.png" style="width: 100px; border-radius: 6px;"></a>');
    codeMessage[5] = ('We have reached France. After all this traveling, I could do with a drink. How about a glass of wine? <br> <a...