@MarlonPassos-git
Posted
Congratulations for the solution in general I liked it, very similar to the original version and with very flexible elements.
Some suggestions:
-
the logo could have been placed inside a header tag
-
"What is it?" should be inside an <a> tag as it will take the user to another page
-
When I use TAB to navigate between items I don't see any changes in the buttons to know if they are selected or not, this is very bad for page accessibility
-
Images are too small, it would be better to break down to 2-column images a little earlier, see https://prnt.sc/1vpy822
-
You styled your elements using the HTML tag as a reference, this is very bad to maintain in the future and can cause a lot of problems later, I recommend always using classes to style your elements
Marked as helpful
@PresidentTree
Posted
@MarlonPassos-git The reason the buttons don't show that they are selected is because I turned off the outline property since it looked weird to me to have a square outline around rounded buttons. Do you know if there is a way around this?
@MarlonPassos-git
Posted
You can customize the outline when it's in action and it will be leased according to your element's boundary radius, look how it looks with this code:
` button: focus-visible { outline: 5px solid red } `
Access the link: https://prnt.sc/1vq5jvl
There are several ways you can customize, read this article https://css-tricks.com/almanac/properties/o/outline-style/
