Skip to content
Submitted about 2 years ago

Preview card main page using HTML, CSS with Flex.

HaYeong•100
@hypyeon
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 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
    2
    HaYeong•100
    @hypyeonPosted about 2 years ago

    @vcarames Thank you so much for taking time reviewing my solution! Your feedback helped a lot. I can't thank you enough for the 'mix-blend-mode' ... :)

    0
    バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    @hypyeon

    Glad I could help!

    0

Please log in to post a comment

Log in with GitHub

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