Use your knowledge of media queries and absolute positioning to help these animals escape sudden danger.
- Fork this repo.
- Clone your fork.
cdinto the local folder for the project.- Open the index.html in the browser to navigate to different animal pages to see which ones you can rescue. By clicking and dragging on the corner of the browser and resizing the window you will see where the animals run into trouble.
- Take advantage of media queries using max-width for desktop down and min-width for mobile up designs. Also utilize positioning: absolute, as well as properties such as top:, left:, right: ,bottom: to set the animals' positioning. You can also use CSS transform: rotate() if you wish to turn the animals. A single media query should be used to solve each page.
Write the media queries necessary in the css files for each corresponding animal:
- For the bear, when sizing the browser from smaller to larger (mobile up), when the screen reaches 1196px stop him from falling off the cliff by setting him to stay 800px from the left side of the screen before he reaches the edge.
- For the ostrich, starting with the screen larger and dragging it smaller (desktop down) have the ostrich jump upwards 100px closer to the top of the screen to avoid being eaten by the alligator. As the screen gets smaller then he will run on top of Mr. Alligator's back.
- For the monkey, use a combination of min-width and max-width to set a media query that will allow the monkey to jump up over the Spice Girls from screen size of 406px to 1090px keeping him safe from their affection.
- For the dolphin, using min-width and max-width help her rotate and jump up through the hoop from screen sizes of 642px to 1090px. Note: you can use transform: rotate() command to accomplish this. Read about the setting for rotate here.
There is a finished working copy of this site here.
Finished Solution Example
Mozilla Dev Network - CSS Transform
View Animal Save on Learn.co and start learning to code for free.