Bineaire puzzel PASEN
by bluesweater
HTML
<div
style="position: relative; width: 688px; height: 590px; background: url('https://i.imgur.com/NSvgtLl.png');"
>
<!-- VAKJES -->
<div
id="binairepuzzel"
style="overflow: visible; position: relative; width: 340px; height: 340px; top: 150px; left: 190px; font-size: 0;"
>
<!-- 10 × 10 = 100 vakjes -->
<!-- rij 1 -->
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak vast">🐰</div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak highlight"> </div>
<div class="vak vast">🐰</div>
<!-- rij 2 -->
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak highlight"> </div>
<div class="vak vast">🐰</div>
<div class="vak vast">🐰</div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<!-- rij 3 -->
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak highlight"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak vast">🐰</div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<!-- rij 4 -->
<div class="vak vast">🐰</div>
<div class="vak"> </div>
<div class="vak vast">🐰</div>
<div class="vak highlight"> </div>
<div class="vak vast">🐰</div>
<div class="vak"> </div>
<div class="vak vast">🐰</div>
<div class="vak"> </div>
<div class="vak"> </div>
<div class="vak"> </div>
<!-- rij 5 -->
<div class="vak vast">🐰</div>
<div class="vak"> </div>
<div class="vak vast">🐰</div>
<div...
CSS
* {
font-family: Arial, sans-serif;
font-size: 13px;
color: #b05f58;
}