Code Challenge: Toggle With CSS
For this code challenge, you have been tasked with improving the aesthetic of a web page by implementing a color mode toggle and adding animations.
The goal of this challenge is to test your understanding of HTML and CSS by completing the task items:
- On the top right corner of the page, you should find the moon icon. Clicking on it should toggle between light and dark mode but nothing happens at the moment. You are required to create a class titled
dark-modewith your focus on styling the class to attain dark mode.
pictureelement has been created in the
index.htmlfile. You are to add images inside the element using the html
sourceelement. The goal is to add two images. One of them will be rendered when
500pxand the other on larger viewports.
We have provided some template code in the sandbox to get you started. Implement your solution in the sandbox below:
Code challenge solution
Verify your solution with the official solution in this sandbox.
Want to conduct interviews on this platform?
Check out CoderPad : pick any interview question or create your own, then invite your candidate to a shared live-coding session on an IDE like this one. You even get 2 free interviews per month forever using this registration link!