Pride Puzzel 2025

by bluesweater

HTML

<div class="backgroundImage">
 
  
  <!--Question 1-->
        <input class="crosswordInput" style="position: absolute; left: 45px; top: 237px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
        
        <input class="crosswordInput" style="position: absolute; left: 71px; top: 237px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
          
        <input class="crosswordInput" style="position: absolute; left: 97px; top: 237px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
        
        <!-- SPATIE --> 
            
        <input class="crosswordInput" style="position: absolute; left: 134px; top: 237px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
        
        <input class="crosswordInput" style="position: absolute; left: 160px; top: 237px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
          
        <input class="crosswordInput" style="position: absolute; left: 186px; top: 237px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
        
        <input class="crosswordInput" style="position: absolute; left: 214px; top: 237px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> 
        
        
        <!--Question 2-->
        
        <input class="crosswordInput" style="position: absolute; left: 45px; top: 285px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
        
        <input class="crosswordInput" style="position: absolute; left: 70px; top: 285px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text">
          
        <input class="crosswordInput" style="position: absolute; left: 97px; top: 285px; border: none; outline: none;...

CSS

.backgroundImage
{
  position: relative;
  width: 688px;
height: 718px;
background: url(https://i.imgur.com/87k3grd.png);
}



.crosswordInput
{
  height: 22px;
  width: 20px;
  z-index:5;
  background: transparent;
  color: #302570;
}

.crossword
{
  display: none;
position: absolute;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(232, 212, 255, 0.6);
}

.textbox
{
  position: absolute;
  overflow: auto;
  width: 335px;
  height: 410px;
  top: 237px;
  left: 335px;
  border-radius: 7px;
  color: white;
}

.button
{
  position: absolute;
overflow: auto;
width: 176px;
height: 58px;
left: 505px;
top: 15px;
}

#crosswordCheck
{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  color: #000;
  cursor: pointer;
  background: transparent;
  z-index: 10;
}

#crosswordPrize
{
  color: white;
  text-align: center;
  font-size: 20px;
  text-shadow: 2px 2px 1px #a494a7;
  z-index: 11;
}

#crosswordPrizeContainer {
  position: fixed; /* instead of absolute */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background-color: rgba(147, 112, 237, 0.6)
}


/* How to make custom scrollbar */
/* Customize shape of scrollab */
.textbox::-webkit-scrollbar {
    width: 8px;
}

/* The area behind scrollbar */
.textbox::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

/* Customize the bar moving inside the tracker */
.textbox::-webkit-scrollbar-thumb {
    background-color: #302570; 
    border-radius: 5px;
}

/* Scrollbar reacts to hover */
.textbox::-webkit-scrollbar-thumb:hover {
    background-color: #4f41a2;
}

JavaScript

$( "#crosswordCheck" ).click(function() {
    var answerString = $( ".crosswordInput" ).map(function() {
        return $( this ).val();
    }).get().join( "" ).toUpperCase();
    if ( answerString == "NEWYORKBISEKSUEEL1978ZONLICHTDAVIDBOWIEAMSTERDAMPAARSLAMBDANEDERLANDHEARTSTOPPER" ) {
        $( "#crosswordPrize" ).html( '<span style="font-size: 35px!important;">Gefeliciteerd!</span><br>Je hebt de puzzel opgelost! We hebben een code voor je: <br><b>itemsPr!de</b>' );
        $( "#crosswordPrizeContainer" ).css( "display", "flex" );
    } else {
        window.alert( "Try again!" );
    }
});