@chiptaylor
Latest solutions
Latest comments
- @Will-1-Am
Nice work on submitting this challenge, Glen.
The html file has a "class" element that has been highlighted in the above report, but I think this was a typing error and it should be a "div" element?
Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content.
The background-color set on ".btn" should be very-light-grey and not white as stated in the spec, but to be fair is very difficult to discern - I also got caught out on this one. 😅
I really like the idea that the buttons don't loose their alignment with one another. As very small viewport width the button text does wrap to additional lines and this can be resolved by applying a min-width on the cards container.
I hope this helps. Happy coding!
- @kj1999@Will-1-Am
Hey Kiran, nice work on submitting this challenge project.
You might consider using before and after pseudo elements to position the background images properly. It is definitely a bit tricky so check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/jOydXYZ?editors=1100) for an example that you can test. This will enable you to use a more declarative approach to the layout - eg specify the top left for the position of your background asset.
Consider using other element types in place of the h2 elements for the stats section. A heading really only makes sense if it has child content, and the statistics just would be better tagged with something more meaningful and will make the html more intuitive for other developers.
I hope this helps. Happy coding! 🤓
- @elianiubo@Will-1-Am
Hey Elia, nice work on submitting your first challenge!
Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content. A border radius can be applied to a container wrapping the body contents to resolve the missing rounded corners.
Hopefully, this will help you along on your coding journey.
- @Muskan2905@Will-1-Am
Hey, nice work on submitting your second challenge!
You might consider wrapping your body content in another container and using flex-box to . Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content.
Stopping the button text from wrapping to a second line could be done using a min-width on your card or col.
Hopefully, this will help you along on your coding journey.
- @RahulKandari-Github@Will-1-Am
Hey Rahul, nice work on submitting this challenge!
You might consider wrapping your body content in another container and using flex-box to center everything horizontally and vertically. Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) where you can see the html and css and test til your heart's content.
While the specification doesn't actually supply links, it can be assumed that they will ultimately link somewhere and so the button elements should really be anchor elements. I also made this error 😅 but this resource helped to set me straight (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
Stopping the button text from wrapping to a second line could be done using a min-width on your card or col.
Hopefully, this will help you along on your coding journey.
- @rhonall@Will-1-Am
Hey Rhona, nice work on submitting your challenge project.
You might consider different elements for the h2 tags you use for the numbers in the stats section of the card since they don't really make sense as headings - although I can see how one would reach for h2 as I chose it myself initially 😅.
You make use of a lot of div elements in your html and it might be useful to replace some of them with more suitable elements (e.g. the challenge is to produce a component that is reusable, possibly in other projects - check out this link which helped me (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).
I hope this helps you along in your coding journey.
