When the cards move to the right, we need the "card deck" to remain.

Click card 6 for a demo.


So, how to make this happen?

I added another row, row0 before row1 with one back and 5 empties:

  <div id='row0'>
    <img src='cards/back.png' class='card'>
    <img src='cards/0.png' class='card'>
    <img src='cards/0.png' class='card'>
    <img src='cards/0.png' class='card'>
    <img src='cards/0.png' class='card'>
    <img src='cards/0.png' class='card'>
  </div>

So it will be identical in layout to row1 or will be if we style it in the same way.
We could just repeat the CSS for #row1 but it is easier to just add it like this - note the comma:

#row1, #row0 {
  display:flex;
  ...

I'll show you on the next page how to move row1 up so it is exactly on top of row0.