
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>
<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;
...
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