Stats Preview Card

Community feedback

• 

  Natalia Bubiak•185

  @NataliaKiwibirdPosted over 3 years ago

  The desktop design looks pretty well, the responsiveness is not done though. I'd recommend going back to the challenge and finish it, as mobile design is key nowadays.

  For the image filter use pseudoelement :after and set opacity and mix-blend-mode. Instead of <table>, I'd use <ul> and style it with flex and flex-direction: row. It's always good to look at other people's solutions and see how they approach particular components. For example, this is mine: https://www.frontendmentor.io/solutions/stats-preview-card-using-html-css-flexbox-bem-_Sdvvyfd3

  Marked as helpful

  0
• 

  Ronald Arias•80

  @rpariasPosted over 3 years ago

  Hi, in order to round only 2 corners you can use the same property: border-radius: 0 10px 10px 0;

  The first value is the top-left corner, the second is the top-right corner, the third is the bottom-right and the last is the bottom-left.

  To add the magenta layer on top of the image you can use the property mix-blend-mode. Something like this:

  .picture { position: relative; }

  .picture::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; mix-blend-mode: revert; background-color: var(--soft-violet); }

  In addition, you can take a look at this video: https://www.youtube.com/watch?v=mT10ZJdlh9Y

  Marked as helpful

  0