Game - part 1

by cgreinhold

HTML

<input id="1" type="checkbox" />
<label for="1"></label>
<input id="2" type="checkbox" />
<label for="2"></label>
<input id="3" type="checkbox" />
<label for="3"></label>
<input id="4" type="checkbox" />
<label for="4"></label>
<input id="5" type="checkbox" />
<label for="5"></label>

CSS

body {
  color: white;
  text-align: center;
  user-select: none;
  font-weight: bold;
  font-family: Arial;
  overflow: hidden;
}

label[for="1"]:before {
  content: '🍎';
}

label[for="2"]:before {
  content: '🍇';
}

label[for="3"]:before {
  content: '🥝';
}

label[for="4"]:before {
  content: '🥥';
}

label[for="5"]:before {
  content: '🍍';
}

input:checked + label:before {
  content: '🥙';
}

input:checked + label {
  pointer-events: none;
}

input {
  position: absolute;
  left: -100vw;
  zoom: 3;
}