Skip to content
Submitted about 3 years ago

Stats Preview page sollution

Muhamad Nur Alfi Syahrin•100
@TahoeBoelat
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

Hi! This is my second project sollution in Front-End Mentor challenge. This site made with Flexbox. The problem during im solve this challenge is on my HTML structure, it is suitable for the flexbox or not? And also the gradient image, im still confuse about using the gradient on background-image css, so for the solving it im decide for editing the image first. Im very apreciate it if you give me an feedback for my sollution.

Thank's :)

Community feedback

  • Daramola Oluwafemi•60
    @hemarlePosted about 3 years ago

    hi Muhamaad. I just checked your code. Just go to the css file and add background: color: hsl(277, 64%, 61%); mix-blend-mode:screen; to the image class.

    it would look somehow like this img{ background-color : hsl(277, 64%, 61%); mix-blend-mode : screen; }

    Marked as helpful
    1
    Muhamad Nur Alfi Syahrin•100
    @TahoeBoelatPosted about 3 years ago

    @hemarle Thank you very much. The image now have a gradient. But im so sorry, im changed the CSS manually not via Github Pull-Request, im still learning about it. Again, Thank's for your help :D

    0
  • Daramola Oluwafemi•60
    @hemarlePosted about 3 years ago

    Hi. For the image, i think you are to use background-blend-mode or mix-blend-mode in order to change the color to violet

    Marked as helpful
    0
    Muhamad Nur Alfi Syahrin•100
    @TahoeBoelatPosted about 3 years ago

    @hemarle Thank you. I will try your suggestion. :)

    0
    Muhamad Nur Alfi Syahrin•100
    @TahoeBoelatPosted about 3 years ago

    @hemarle It doesnt work for me right now. Im trying for wraping the <img> tag with <div> and add :before but its not suitable with my expectation. Sorry.

    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