@n3kk3ll
Latest solutions
Latest comments
- @RyukioMiyamoto
Impecable work Andrii! I would just adjust the color on the <p> that's differing from the proposed design.
As for the image, what I follow when solving the challenges is considering if the image would be something static or dynamic in a real project, maybe coming from the backend. For hero sections for example, I'd use the background solution as it won't likely change or have variations.
For this QR Code challenge, in my conception, there could be another card with a different QR Code somewhere down the line, so I chose to make it a <img>.
This is my personal take on this by the way, I have no idea if it's a common/good practice, I'll have to look it up later.Keep it up!
Marked as helpful - @KYGO5000@RyukioMiyamoto
- @inkfromblood@RyukioMiyamoto
Hi Dan, great job. I looked into the why of display: block after my last comment and it seems the reason is that block elements take up all width available, while inline elements take only as much as they need to, which might make some whitespace visible.
For the border-radius, my suggestion would be to give it to the container rather than individually (altough in some situations this solution may be better), and while that initially won't do the trick, adding overflown: hidden will solve it.
Hope you find that helpful, have a great week!
Marked as helpful - @n3kk3ll@RyukioMiyamoto
Andrii you did a great job with the design! However I find it very hard to give feedback on the minified code. I'd like to point a few things anyway:
- The rating are not navigable through keyboard, which is an accessibility issue. An improvement on this would be to use <button> or <input> instead of <div>
- Your script is not preventing the user to proceed without a rating, which gives an "You selected a undefined out of 5" on submit
- Mobile ( below width +-400px ) is not applying the style to the selected rating, although it's still functional
Hope I could be of help! Keep it up!
Marked as helpful - @soitirakis@RyukioMiyamoto
Hey Andrei, good job! To fix the hover overflowing, set the img to display: block to get rid of the whitespace.
Marked as helpful - @inkfromblood@RyukioMiyamoto
Excellent work Dan! I had the same issue regarding the img height, while I solved it differently, there's a simple solution that is to add display: block to it, erasing the white space. I'm not 100% sure about why but I think the reason it works is because it makes the element take up all available space in its "line". Anyway, good job!
Marked as helpful
