Hi @MarlonPassos-git lovely job on this one! š looks great!
With regard the div elements, they aren't necessarily bad, it's just that people use them when there are better elements available... Your use looks fine to me.
Some points to think about:
-
I would suggest the second button, not the download one, should be a link rather than a button. If the click takes you to another page it's a link, if it starts an action its a button.
-
For the numbered circles, I would suggest just putting a
margin: autoon either side of the div, and using a pseudo element for the line? Your way works fine though. This might avoid the need to hard code in some values though. -
For the animations, it's better to use something like
transform: translateY(56px)rather thantop. Changing a transform is much less work for the browser with the same effect (looks nice though!) -
For the images, the width and hight attributes are to prevent layout shift once the image loads, not really a11y. You should add both attributes, but without the
pxthis might help?
I can't comment on your pixel perfection as you are ahead of me here!
Hope this helps a little!
Cheers š
Dave
Marked as helpful
@MarlonPassos-git
Posted
@dwhenson Hi Dave, thanks for the feedback. so in relation to the button yes I used an <a> tag, I just didn't put the link because I didn't really feel it hahaha. wow I didn't know this from the margin: auto and this trabsform, this will really make it much easier in the next projects. And thanks again for taking the time to review my work :)
