All solutions

🤖 Hi guys! Here's my solution to the "NFT preview card component" challenge!

These challenges are really cool to do, I feel like I'm improving a bit with each one. In this one in special I tried new things, first I used CSS variables for color, which makes it really easy to change the color later if needed.

I also had to study how to make the eye overlay on hover effect, since the images needed to be overlapping it was a bit challenging to do at first. I went a step further and tried to make the image expand on click, but since it needed JS and I wanted to stick with just HTML and CSS, I ended up using active. It was not ideal since you have to maintain left mouse click pressed, but it did the trick.

As a newbie, I'll be happy to hear any feedback and advice!

🤖 Hi guys! Here's my solution to the "Product preview card component" challenge!

This was fun! Really glad I managed to do both mobile and desktop designs, learned a lot during this process. This was the first time I used the <picture> tag, had to do some research to figure out how to change images when transitioning from mobile to desktop. At first, I tried using hidden= "true" in HTML, and it wasn't working the way I wanted.

I tried to keep it looking as close as I could to the design using only the .jpg, just added a box-shadow.

As a newbie, I'll be happy to hear any feedback and advice!

🤖 Hi guys! Here's my solution to the "QR code component" challenge!

Came back to this project after a while to improve the code, made some major changes in the CSS, and implemented display: grid instead of flex.

♻️ Changes:

• Decided to refactor this project and use CSS grid instead of flex.

As a newbie, I'll be happy to hear any feedback and advice!