VALENTIJNSDAG 2026!!

by bluesweater

HTML

<div class="backgroundImage">
 <div class="crosswordGrid">
  

   <input class="crosswordInput" style="position: absolute; left: 45px; top: 34px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"> <!--H-->
        
<input class="crosswordInput" style="position: absolute; left: 203px; top: 34px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--K-->
        
<input class="crosswordInput" style="position: absolute; left: 363px; top: 34px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--S-->

<input class="crosswordInput" style="position: absolute; left: 518px; top: 34px; border: none; outline: none; text-transform: uppercase; text-align: center;" type="text"><!--E-->
       


    </div>
 

<div class="textbox1"><div style="position: relative; width: 375px; top: 2px; left: 2px;">
Hoi! Vandaag is het 14 februari, en dat betekent: Valentijnsdag!!! <br>
Rechts vind je een topic en blog, doe mee en verzamel de 5 valentijnssets.  <br><br>
Zoals jullie weten zijn Cindy en ik enorme boekenwormen en we moesten wel iets met boeken doen, 
dus gaan we het hebben over bookboyfriends. Ik heb 4 hoofdpersonen, maar wie is hun boyfriend? Je kan kiezen uit onderstaand lijstje met 12 personen. <br>
1. Lor <BR>
2. Magnus <br>
3. Persephone <br>
4. Violet <br><br>

Vervolgens heb je 4 namen en hiervan neem je de 1e letters en deze vul je hieronder. Klik daarna op 'Check hier' en als je de 4 goede letters , komt er een code tevoorschijn. 
<B>LET OP!</B> deze code verschijnt niet in beeld zoals gebruikelijk, maar je moet scrollen. Dit is helaas niet anders.
Deze is te <b> claimen 21 februari 20 uur</b>. <br><br>

<i> PSST!! De 12 boeken van de boyfriends zijn te vinden door op het hartje met "boeken" te klikken (mocht je echt geen lezer zijn, kan je het hiermee en internet misschien wel achterhalen!)</i>


</div></div>
   
   ...

CSS

.backgroundImage
{
  position: relative;
  width: 688px;
height: 750px;
background: url(https://i.imgur.com/5Zebtco.png);
}

.crosswordGrid
{
  position: absolute;
  overflow: auto;
  width: 688px;
  height: 200px;
  left: 10px;
  top: 550px;
  background: url();
}

.crosswordInput
{
  height: 80px;
  width: 100px;
  z-index:5;
  background: transparent;
  color: white;
  font-size: 45px;
}

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

.textbox1
{
  position: absolute;
  overflow: auto;
  width: 385px;
  height: 215px;
  top: 161px;
  left: 80px;
  border-radius: 7px;
  
}

.textbox2
{
  position: absolute;
  overflow: auto;
  width: 385px;
  height: 156px;
 top: 401px;
  left: 80px;
  border-radius: 7px;
  
}


.button
{
  position: absolute;
overflow: auto;
width: 155px;
height: 42px;
left: 270px;
top: 690px;
background: transparent;
}

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

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


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

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

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

/* Scrollbar reacts to hover */
.textbox1::-webkit-scrollbar-thumb:hover {
    background-color: #002834;
}


/* How to make custom scrollbar */
/* Customize shape of scrollab */
.textbox2::-webkit-scrollbar {
    width:...

JavaScript

$( "#crosswordCheck" ).click(function() {
    var answerString = $( ".crosswordInput" ).map(function() {
        return $( this ).val();
    }).get().join( "" ).toLowerCase();
    if ( answerString == "nahx" ) {
        $( "#crosswordPrize" ).html( '<span style="font-size: 35px!important;">GEFELICITEERD!</span><br>HIERBIJ DE CODE<BR><BR><b>B00KB0YSSS2026</b><br><br> Doe ook mee met de andere Valentijnsacties!' );
        $( "#crosswordPrizeContainer" ).css( "display", "flex" );
    } else {
        window.alert( "Probeer opnieuw!" );
    }
});