Stats preview card component

Hi there,

• you can make the overlay with pseudo elements ::before and ::after if you are not sure what i am talking about you can learn from my solution

• remove all the margin from the container cf and give the body these properties to center the element display:flex justifiy-content:center align items: center min-height:100vh flex-direction:column

• check the HTML report to fix accessiblity issues

i hope this is helpful and goodluck

Hi Ando,

I love the hover effect you've created using box-shadow, it looks great!

Here are a few things to consider that may help improve your solution:

a) Making the Image purple. There are a number of ways you can achieve this. You can either think of the purple as an image overlay, or an image underlay.

If you think of it as an overly, consider a div that sits on top of and covers your entire image. If you make the background colour of that div hsl(277, 64%, 61%) you will have a purple block covering your image. If you then lower the div's opacity so it becomes transparent, you will be able to see the image through the div and the colour of the div will be imparted onto the image. If you've not yet learnt about opacity you can find a reference here: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

If you think about the colour as being below the image, you will instead give your image a parent container and make the background colour of that container hsl(277, 64%, 61%). If you then give the image height: 100% and width:auto; it will fill that container and retain its aspect ration. At this point you will only be able to see the image. It will be on top of the purple colour. In order to see the colour through the image, you can use mix-blend-mode on the image. ie mix-blend-mode: multiply; opacity: 0.8;

See this link to learn about mix-blend mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode.

In my experience the second solution above is more accurate for solving this challenge, but I think it is worth considering both when thinking about how to solve for getting colour into a grayscale image.

b) I notice you have also added classes to almost all of your html elements. This is not the best practice when styling. It is better to use selectors that have a lower specificity for the bulk of your style declarations. See these two links on CSS selectors and specificity to understand more: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

c) HTML image elements will provide better accessibility if you include an alt attribute with a description of the image. It allows assistive technology like screen readers to relay the image description to their users. ie <img alt="A meaningful description of the image">

d) Using media queries to help your solution translate correctly on for Mobile: 375px. Here is a link to learn about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries Your browser dev tools can help to check your solution on different screen sizes.

e) You can centre your design using flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I hope some of the above proves valuable to you. Well done on your first iteration, I look forward to seeing the next.

Happy coding Ando.