CSS Transitions
Create a private GitHub repo called transitions and set the main branch to be the github pages branch. Then clone the repo on to your local computer.
See the GitHub Setup Instructions for more help with creating the repo.
The point of this assignment is to add interactive CSS transitions to the contact card in the starter code. Begin by downloading the starter code (transitions.zip) from the Brightspace assignment page and add them to your cloned repo.
The starter CSS is provided. You will need to add transitions to AT LEAST three of the elements in the contact card which will be triggered when the user hovers over any part of the card. Use different timings as well as different transforms and property changes for each of your transitions.
When adding your transitions, think about you want the user to play attention to. Do you want the user to notice one element over another? Use transitions to highlight the most important elements on the contact cards.
If you want to add more CSS classes to the HTML to help you target things, you may. However, do not change the content in the HTML.
If you want to change the initial CSS for the cards, you may.
Remember to add lots of comments to your code explaining the transitions you have included.
As you make changes to the CSS or HTML, commit each change to your repo and push it up to GitHub. You will need to test the page through GitHub Pages on GitHub.io to see if your fixes worked.
Submission
- On the Assignment page in BS LMS, submit both the github.io URL and the github.com URL.
- You will need to test the page through GitHub Pages on GitHub.io to see if your CSS works.
- Be sure to invite me to your repo via my Algonquin College Github account (garrarj), otherwise I will not be able to view and mark your repo.