Is there a way to make it transparent and match the color of the card background instead of the button?
I want to know how I could separate the "change" part from the other elements besides using space-between.
In the image, for some reason, the border-radius doesn't work properly and seems to be bugged. I couldn't fix it—it looks like the image gets the border-radius, but its background doesn't apply the border-radius. This also happened on mobile displays, where a white area appears at the bottom of the image.
I’d like to know if there are other ways to create this hover effect on the image, whether it’s necessary to use ::before or not. Other than that, I think it’s straightforward.
I’d like to know if it’s necessary to do more with the media queries and if I need to create one specifically for desktop. I’d also like to know if the way I wrote the HTML and CSS is correct or if there’s anything else I can do to optimize it.
The overall match to the original design
What challenges did you encounter, and how did you overcome them?I forgot to start with the mobile design and ended up having to change the desktop design after I was already done
What specific areas of your project would you like help with?Semantics and CSS best practices
I already had a good understanding of front end technologies but my FE designs have always been bad. I'm glad to see that's only because of my non existent UI/UX skills and that with a few instructions I can accomplish some decent results (Although it might still be a bit too early to confirm it and I should see with more complex challenges lol).
I'll try to do some other challenges using HTML/CSS/JS to feel more confident and later I'll move to Tailwind and ReactJS.
Also I should try timing myself I guess.
What specific areas of your project would you like help with?I kind of improvised with units and their measurements so any tip is welcome ^-^"
Well done man! I just think you should use a separate file for the CSS, instead of putting everything in the index.html. Create a file with style.css and put all the CSS there to separate the HTML from the CSS, making it more readable as well! I liked the code!
