@FluffyKas
Posted
Hello,
Your solution looks pretty good! Your code is easy enough to read so well done on that part. I do have some suggestions though:
-
There are a few html elements here that you're not using correctly: a) <figure> isn't needed for wrapping images, if you're not going to pair it with a figcaption. Either just use a div or don't use a wrapper for the image at all (if you can avoid). b) <summary> is used as a sort of heading for the <details> element. If you would like to wrap things in something for styling, div serves exactly this purpose. c) Same goes for the <section> element. It's being overused, even though it's not a semantic element by itself. I suggest swapping most of your sections for divs, except maybe the outer one named "profile" that could actually be an <article>.
-
For the alt text of the profile pic, it's best to replace it with the person's name. So "Victor Crest." would be the most appropriate alt text for this.
-
If you'd like to give the
body
some height, you should usemin-height
instead so you don't lock it to a fixed value. -
There's actually a super easy way to solve the background circles! They can all be added to the same element (
body
) and then you can use viewport units to position them, much like how I did it in my solution(please forgive me for linking it here, I'm not fishing for likes, just thought it might be easier if you check out the actual code ^^).
Everything else seems really good! I'm not an expert on BEM, I rarely use it but from my little experience, your naming seems fine and it's easy to follow. Happy coding! ^^