previous

page 4

next

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.

previous
next