Week 4: Lab #08
Article with Transitions
DUE: Tuesday, 2/7 @ 5pm
Make a copy of the article page from Lab #07 and modify it to incorporate the following:
- Sidebar: create a sidebar with additional information about your topic that uses the position property to overlap the main article, uses opacity to makes it mostly transparent by default, and uses a transition to become fully opaque when the mouse hovers over it.
- Multiple Background Images: set one div to use multiple overlapping background images. Use the CSS properties to have them fit in the div and properly position the way you intend.
- Miscelanious Transitions: apply hover event transitions to various elements in your article design, adjusting their opacity, position, size, etc.
- Improved Hierarchy: apply some of the principles from the information architecture presentation to the redesign of your article layout. Improve the clarity, accessibility, and legibility of the content.
Once complete, make note of any compatibility issues that you encounter across browsers or across devices (how does the design look on your phone compared to your laptop). Add those notes to the bottom of your page.
Upload your completed lab by the due date specified above and make sure that you add a working link to it on your class page, otherwise it will not be reviewed and you will not receive credit.