This is a flexbox and positioning exercise that will focus on using the display:flex; property in section one and the position property in section two. Each area will have a different task for you to accomplish. Click the button below to download your code to start.
Download the Zipped FileYou will find a different task in each of the sections below.
Use position:absolute; and proper coordinates to position Froggie over top of the dashed lines.
Use position:relative and proper coordinates to move the dark green lily pad to be over top of the dashed lines below.
Use position:fixed and proper coordinates to bring the golden Froggie with you for the rest of your journey in this exercise.
The golden Froggie should be vertically centered on the orange bar to the right on your screen at all times.
Use position:static to bring red Froggie back to his friends.
Use display:flex to bring green Froggie, red Froggie, and purple Froggie into a row instead of a column.
These three froggie amigos are realizing that they need a little horizontal space between them. Can you help them out?
Use justify-content to add an even amount of horizontal space between them.
We have some unhappy froggies on our hands (don't let their smiles fool you). Green Froggie is tired of being all the way to the left, purple Froggie is tired of being all the way to the right, and red Froggie is happy chilling in the middle.
Use order to rearrange everyones position in the row so they are happy.