Skip to content

Instantly share code, notes, and snippets.

@raaims
Last active May 5, 2021 06:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raaims/8f864f6259a03c9b67ac01eb9c1c330a to your computer and use it in GitHub Desktop.
Save raaims/8f864f6259a03c9b67ac01eb9c1c330a to your computer and use it in GitHub Desktop.
CSS Blitz - Switch logo

Start coding


CSS Blitz - Switch logo

  • ⌛ You have 15 minutes to implement this, take your time (but not too much)!
  • 💅 Feel free to embellish and make it pretty!
  • 📦 Some basic CSS is provided for you. There are some TODO comments in there to help you out.
  • 🔍 You can search online if you get stuck.
  • 🎉 When you're done, Fork the Codepen page and share with us the URL.

* * *

Tips and hints

  • Use the :checked pseudo-class!
  • Use the general sibling (~) selector!
  • You can always ask questions, don't be shy 😊
  • Use transition on the initial click animation
  • Use animation on the extra "drop" animation
  • YOLO

CHALLENGE

You can do this if you finished early or if you have some free time. This uses the same logic as the one above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment