Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

E-commerce Produce Page with Dark mode

@Salah1221

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I wanted to create an animation for switching between dark and light themes, similar to the one in the Telegram mobile app, and I'm happy with the result. However, I wish I had organized my code better since it's a mess, especially with the class names in the HTML and CSS.

What specific areas of your project would you like help with?

The trick that I've used in my project for the dark/light switching animation depends solely on mix-blend-mode: difference, so I needed to invert most of the colors in the website. Would that impose a problem if used in a real-world project?

Community feedback

@SouleymaneSy7

Posted

Waaww you make this project better. Cool animation & all. Congrats for the project!!

1

@Salah1221

Posted

@SouleymaneSy7 Thanks!

1
Aecio Neto 340

@aecio-neto

Posted

Wow, nice!

I liked the transitions and dark mode. Congrats!

How long does it take for completion?

0

@Salah1221

Posted

@aecio-neto Thanks! I didn't track the total time spent on the project because I worked on it intermittently due to university.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord