| summary | time | deliverables |
|---|---|---|
Use position relative & absolute to make this robot head explode when hovered. |
1 hour |
1 HTML file, 1 CSS file, images |
- Fork this repository.
- Use
positionand coordinates to put the robot’s head together. - Hovering anywhere over the robot should explode the head to reveal the brain and insides.
- Some of the CSS is already written for you, specifically the widths of the robot pieces.
- DO NOT change the HTML.
- Run it through Markbot and make sure it passes all the checks.
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
- Final screenshots in the “screenshots” folder.
- Watch this video to see how it interacts.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.
These challenges are here if you’d like to try a little more work—they are for extra experience and learning. They are completely optional and not graded. Show them to me if you’d like—I’d love to see them.
- Use the CSS
transitionproperty to make the bits animated when hovered.
Watch this video to see how it interacts.