Fork, Commit, Merge - Hard Issue (CSS)
nikohoffren opened this issue · comments
Fork, Commit, Merge - Hard Issue (CSS)
Design a 3D rotating card effect
Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!
How to get started
Open the tasks/css/hard directory from the root of your project.
In this directory, there is card.html which has all the necessary card-classes added for you.
Your task is to implement the 3D rotating card effect similar in video in card.css file.
So when the mouse hovers over the card, it turns around to back-side, and when the mouse leaves the card, it turns back to front-side. There is no need to use JavaScript on this issue, just plain CSS.
Note: You should only need to modify the card.css file.
Example
fork-commit-merge-css-hard.mp4
Colors
- Use
#ff9f00for the color of the front-side of the card. - Use
#4caf50for the color of the back-side of the card.
Additional Resources
If you are using VS Code and have for example Live Server extension, you can simply open card.html with the server and check if the rotating effect looks similar as in the video. If it does, you are ready to make a pull request!
If you do not have Live Server extension, you'll find information about installing and how to use it here.
Check out README.md for more instructions and how to make a pull request.
Feel free to ask any questions here if you have some problems!