Stats preview card component in HTML5, SCSS, BEM, Gulp, Flexbox, Grid

Community feedback

• 

  Lucas 👾•104,160

  @correlucas

  Posted almost 3 years ago

  👾Hello Yari, congratulations for your solution!

  Your solution its really accurate, all the elements and colors are matching the design files.

  I've some tips for you and you see if is good idea to apply or not to your code Yari.

  If you want to improve a bit your code you can use less elements to wrap the two columns, there's no need for so many divs. Look that you container is fully responsive so you don't need to set so many media queries since the container is fluid it will contract and fit the information inside, so you can use only the mobile media query.

  Instead of managing both mobile and desktop image versions with media query and background-image a quick fix is to use the <picture> tag and wrap both images inside the html setting when the images should switch, with no need for media query for image changes.

  To reach the exact same color for the image overlay, you can use mix-blend-mode: multiply; and opacity: 0.8;.

  Hope it helps Yari, and happy coding!

  11

  Marked as helpful