stats-preview-card-component-main

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you. CSS🏷️: I WILL LIKE TO GO STRAIGHT TO THE POINT your image -product image is not really responsive when resizing the screen.

secondly your images look more of white you can correct this by making the background color of the image div purple and then reduce the opacity of the images to about 0.8 so as to make it have a slight purple color

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

PiCTURE TAG 📸:

• Looks like you're currently using media queries for swapping different version of image, So let me introduce the picture element.

• The <picture> tag is commonly used for responsive images, where different image sources are provided for different screen sizes and devices, and for art direction, where different images are used for different contexts or layouts.

• Example:

<picture>
  <source media="(max-width: 768px)" srcset="small-image.jpg">
  <source media="(min-width: 769px)" srcset="large-image.jpg">
  <img src="fallback-image.jpg" alt="Example image">
</picture>

• In this example, the <picture> tag contains three child elements: two <source> elements and an <img> element. The <source> elements specifies different image sources and the conditions under which they should be used.

• Using this approach allows you to provide different images for different screen sizes without relying on CSS, and it also helps to improve page load times by reducing the size of the images that are served to the user

• If you have any questions or need further clarification, you can always check out my submission for this challenge and feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Replace <div class="card-container"> with the main tag to make the content/ page accessible. click here for more on web-accessibility and semantic html

To center .card-container on the page using flexbox or grid instead of margin:

• USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

• USING GRID: add min-height:100vh; display: grid place-items: center to the body

body{
min-height: 100vh;
display: grid;
place-items: center;
}

For the color of the image, there is no need to give the img a background-color but rather add mix-blend-mode: multiplyto the img.

img{
width: 100%;
display: block
mix-blend-mode: multiply;
opacity: 0.8;
}

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you. CSS: I WILL LIKE TO GO STRAIGHT TO THE POINT your images look more of white you can correct this by making the background color of the image div purple and then apply this property to the div:

"background-blend-mode: multiple;"

I hope you find this helpful 😄 Above all, the solution you submitted is great !