Skip to content
Submitted about 18 hours ago

States preview card component built with HTML, CSS

Rafiza Hanif Rahd•50
@raffee12
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

What are you most proud of, and what would you do differently next time?

I learnt HTML, CSS alone and I built this project that was the most proud thing . Next time I want do project with CSS framework like tailwind, and pre-processor like sass.

What challenges did you encounter, and how did you overcome them?

Adding some gradient effect on the image and also the adjusting the image was bit challenging I watched some Youtube tutorial and not very perfectly but fixed the challenge.

What specific areas of your project would you like help with?

Creating the gradient on the image was so challenging to me. And I also didn't do this correctly so I will encourage any help regarding this.

Community feedback

  • Lo-Deck•2,790
    @Lo-DeckPosted about 17 hours ago

    Hi well done for this challenge,

    You need to use more semantic tag to improve your HTML, it's better for screen-reader and SEO.

    like <div class="wrapper"> to <main class="wrapper">.

    You can look at this CSS properties mix-blend-mode when you need to blend color. MDN.

    There is a problem with height: 40vh; I have a band at the bottom of the wrapper, and it disappeared when I desactivate the property. Check it out with the developper tools.

    Hope to be helpful.

    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