@FluffyKas
Posted
Heyo,
This looks like a pretty good solution, well done ^_^ There's a few things you could do here though:
-
To make the background pattern cover the whole width you can add a
background-size: contain
to thebody
. -
Buttons come with a lot of default styles that need to be overwritten, like font-family. If you don't specify font-family, your buttons will just use the browser's default (as they do now).
-
You could add some hover states to the buttons and links, it would look nice!
-
If you'd like to make any text bold, style them with css and not with adding <b> tags, as that has a semantic meaning to it (that I don't think is necessary here).
-
Add alt texts to your images. Not sure why this wasn't picked up by the accessibility report. All images need to have alt texts. If you consider these images decorative, you can leave them empty, but they still need to be there.
-
You have an unnecessary flexbox on your
main
, this could be removed entirely. -
To make the hero image responsive, you could add this:
display: block;
max-width: 100%;
height: auto;
- There's also an unnecessary width and height on the payment section, you could just remove them.
I hope some of these tips were helpful. Happy coding!