Submitted over 2 years ago

Preview card main page using HTML, CSS with Flex.

@hypyeon

A solution to the Stats preview card component challenge

Solution retrospective

Most of them were not challenging to do, it was a good practice on CSS Flex. However, I did spend a lot of time figuring out some of CSS features but ended up giving up.. for example, the overlay feature that gives a "tinted color" added to an image. I did look for a solution on google but everything looked kind of complicated. I wanted to know if there's an easier solution such as "filter: ;" that would directly affect the color of img coating, if that makes sense. Also, I wanted to figure out how to align the preview card on the center of any screen - it was very complicated since using Flex, and align-items and justify-content, there should be the height defined but height on every screen is different - and setting it as 'auto' never worked. Thus I set it as 900px which is good for the 1440px width. But I want the card to be aligned in the center for other screen sizes too. Is it possible to make this happen while using Flex still? Other than that, I tried using <picture> syntax, advised from a coder from my previous challenge, but the 'srcset=""' never seemed to work on my VS Code. Unlike when using 'src=""', it doesn't show path for the images, nor copying and pasting the path used on 'src=""' to 'srcset=""' worked. I read about <picture> on W3School and everything, I never succeeded in yielding responsive images using the syntax.

Would really appreciate it if you could give me some advises on these, and more if there's a room for improvements! Thanks :)

------ edited!

Code

Please log in to post a comment

Community feedback

Account deletedPosted over 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:

Regarding you questions:

"if there's an easier solution such as "filter: ;" that would directly affect the color of img coating, if that makes sense."
- To get the image to look like the FEM example, you are going to want to use the Mix-Blend-Mode along with the Multiply Value and include a Opacity with the value of 0.8.
Code:
```
img {
  opacity: 0.8;
  mix-blend-mode: multiply;
 
}
```
"I wanted to figure out how to align the preview card on the center of any screen"
- To properly center you content to your page, add the following to your Body Element:
```
body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
```
" but the 'srcset=""' never seemed to work on my VS Code."
- This is probably because you are using two different CSS files for you mobile and desktop view. You only need one and you will use media query to make the changes.
If you have any questions or need further clarification, let me know.

Happy Coding! 👻🎃
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord