In your workspace create a directory called hw04 and copy from hw03
the file poemlayout.html (and its supporting CSS document). Also copy
the entire directory called mysite. Go ahead and do a commit/push of
those initial files.
Play all 24 levels of the flexbox froggy game:
https://flexboxfroggy.com Jot down your solution to the final level
and leave it as a comment on this lab day assignment in Canvas. As you
play the game remember that each frog represents a div/rectangle on the
screen.
Do all your work in the hw04 directory of your workspace. Start by editing your
poemlayout.css as follows: (1) Remove all media queries and (2) remove all float
commands. Now look at the layout of your page. It should still have colors and widths set
for various blocks, but all the blocks should be displayed in a vertical orientation.
Add the display: flex property to the body of your page and
observe the change.
Begin by systematically applying flex-box changes to your code in order
to approximate the layout here:
https://josephus.hsutx.edu/classes/w1/source/images/poemlayout.jpg.
NOTE: You may decide to remove the display: flex property from the
body and put it elsewhere. Also note, it is possible to nest flex
environments. There are a number of ways to get this to work. See if you
can find a relatively minimal way to do it.
Once you've achieved the proper layout you can commit your work.
NOTE: In a typical page design you would not have different colored
backgrounds for each rectangle. We are only doing that here so you can
easily see what is happening.
One of the requirements in the homework assignment is to use CSS commands
to cause an unordered list to create an attractive horizontal menu. Read
Part 2 of the homework assignment and search for a horizontal menu that you
like the look of and play around with that concept.
When you have completed the form, show your work to the instructor. If
you finish early you can start work on the homework assignment.