stats-preview-card

Community feedback

• 

  Shashree Samuel•9,260

  @shashreesamuelPosted over 2 years ago

  Hey good job completing this challenge, keep up the good work

  Your solution looks great however I think the text "companies" and the preceding text should have less opacity.

  Secondly the image within the card is supposed to have a bit darker overlay, I recommend getting some information on mix-blend-mode css property for this particular challenge.

  In terms of your accessibility issues, simply wrap all your content between main tags

  I hope this helps

  Cheers Happy coding 👍

  Marked as helpful

  1
• 

  P

  cjdemille•500

  @cjdemillePosted over 2 years ago

  This is really close to the desktop version of the challenge.

  The biggest thing here from a design point is that the difference in the color on the callout text ("insights") and the overlay on the image is throwing me off. You can create an overlay of just that purple color.

  Create a new div (I'd call it container) and wrap the header image in that. In that same div, create another div with no content (I'd call it overlay).

  In your CSS, set the image's position to relative. set the height and width of the overlay div to 100%, give it a background-color of the purple (make it an hsla instead of hsl and play with the alpha channel) set the display to absolute, top to 0 and left to 0, and the z-index to something greater than 1. (Sometimes the overlay will be slightly bigger than the image itself. to correct this, set the "font-size" on the container div to 0.

  This site isn't responsive, which is what the challenge calls for. You could solve that pretty easily by adding in some media queries or a framework like bootstraps. I'd either lean into bootstraps or flex-boxes so that you can easily switch the order of the content when change screen sizes (I'd probably set the flex-direction to column on mobile and then row-reverse on desktop)

  Marked as helpful

  1