November 2024 overview

by Kofod

HTML

<div class="layoutContainer flexBox">
    <div class="textBox">
        <div style="position: relative; z-index: 1;">
            The event overview is back!<br>
Here all the events of the month will be gathered so come back once in a while to find new titles and easily access the events! <br>
Have you seen the crossword? Give it a try, but we warn you there are no prizes to fetch this time around!
	 </div>
    </div>
    
    <img style="position: absolute; pointer-events: none; top: 0px;" src="https://i.imgur.com/eABnyU2.png">
<img style="position: absolute; pointer-events: none; left: 145px; top: 170px;" src="https://i.imgur.com/xjufZiN.png">  
    
    <div class="buttonColumns">
        <div class="column">
            <button id="openCrossword">Crossword</button>
            <button onclick="window.open('https://en.virtualpopstar.com/social/forum?category=11&topic=362869', '_blank')" style="text-decoration:line-through">October Dressup</button>
            <button onclick="window.open('https://en.virtualpopstar.com/social/forum?category=11&topic=363254', '_blank')" style="text-decoration:line-through">Outfit Repeater</button>
            <button onclick="window.open('https://en.virtualpopstar.com/social/forum?category=11&topic=363253', '_blank')" style="text-decoration:line-through">Matilda Manor</button>
            <button onclick="window.open('https://en.virtualpopstar.com/social/forum?category=11&topic=363255', '_blank')" style="text-decoration:line-through">Parasite</button>
            <button onclick="window.open('https://en.virtualpopstar.com/social/forum?category=11&topic=363303', '_blank')" style="text-decoration:line-through">DĂ­a de los Muertos comp</button>
        </div>
        
        <div style="width: 20px;">
        </div>
        
        <div class="column">
        <button onclick="window.open('https://en.virtualpopstar.com/social/forum?category=15&topic=363316', '_blank')">This week's auction</button>
        <button...

CSS

.layoutContainer
{
  position: relative;
  width: 960px;
  height: 900px;
  background: #eaeaff url(https://i.imgur.com/XhQUwRL.png);
  font-family: 'Arial', sans-serif;
    font-size: 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.flexBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.textBox
{
  position: absolute;
  overflow: auto;
  width: 700px;
  height: 50px;
  top: 100px;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 60px 0px 60px;
  border-radius: 8px;
  text-align: justify;
  text-align-last: center;
  color: #252525;
}

.buttonColumns {
    position: absolute;
    top: 200px; /* Adjust to position directly below the image */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px; /* Horizontal gap between columns */
    padding: 20px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Vertical gap between buttons in each column */
}

.column button {
    width: 250px; /* Set a uniform width for all buttons */
    height: 40px; /* Set a uniform height for all buttons */
    font-size: 12px;
    border-radius: 5px;
    border: none;
    background-color: #6272a4;
    color: #fff;
    cursor: pointer;
    text-align: center;
}

.column button:hover {
    background-color: #19193d;
}

#popupContainer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

#iframeWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
}

JavaScript

$(document).ready(function () {
    // Open the iframe popup when the Crossword button is clicked
    $('#openCrossword').on('click', function () {
        $('#popupContainer').fadeIn();
    });

    // Close the iframe popup when clicking outside the iframe
    $('#popupContainer').on('click', function (e) {
        if ($(e.target).is('#popupContainer')) {
            $(this).fadeOut();
        }
    });
});