Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

States Preview using flex-box

@ElizabethWoodhouse

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Would love feedback on my CSS and html

Community feedback

P
Jaydi 355

@ruedasjnthn

Posted

using grid will help you a lot in this challenge

use mixblend mode: multiply then set the opacity of your image to 70%, you can achieve the set design for the image using this technique

Marked as helpful

0
Alec 40

@AlecDye

Posted

Hey Elizabeth, nice job so far!

You might want to tweak a couple things:

  1. On mobile view your image doesn't stack ontop of the text and it shrinks until it disappears; try setting a flex-direction of column on your wrapper class within a media query.

  2. Don't forget about rounding of the corners of the main card; play with the border-radius on a few of your elements.

Marked as helpful

0
Amon 2,560

@A-amon

Posted

Hey! It looks good~

I have a few suggestions:

  1. Adding width:50% to .info-card and .stats-img (for laptop/large screen sizes) then, add object-fit:cover to the image.

  2. Make the stats font-size slightly bigger.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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