The goal of this activity is to practice placing content over a background image. In order to experiment with this, use either flexbox or css grid to organize content and position items well so that the background and forground have dialog with one another.
- Due: January 28 @ 11:59PM
- Your 404 Page must use a background image
- Your 404 Page must have content displayed ontop of the background image
- Try making the background image take up the full screen with
height: 100vh; - This is a great place to express humour and personality. Have some fun with it
- Also take this as an opportunity to practice working with icons and different typography
- Don't forget to check how everything looks at a mobile screen size as well as on desktop
- Submit to brightspace
- You can submit either codepen or a live github repo
- Make sure to submit a zipped version of your 404 page
- In the text submission, submit a link to the live page and to the codebase (if github). If it's a codepen, the link to codepen is fine.
- Code Development
- If there is any broken design aspects, please note where you think they're being caused in your code base with comments.
- Broken designs without some kind of note will be docked partial marks
- If there is any broken design aspects, please note where you think they're being caused in your code base with comments.
- Code Quality
- Maintain a proper aspect ratio with your background image
- If the background image is distorted. Note in a comment what you think is causing it
- layout must use either flexbox or css grid
- Maintain a proper aspect ratio with your background image
- Flare ideas:
- complex layout (more than 1 column) using grid
- animations: using either transitions or keyframes
- innovative layout (for example: can be simple and eye catching using unorthadox positioning of content or choice of content)