Basic HTML and CSS and flexbox

Community feedback

• 

  Ahmed Faisal•5,095

  @afrusselPosted over 3 years ago

  There are lot of issues on your work. It's hard to explain line by line. Please take a look of my solution to find out your issues. https://afrussel.github.io/stats-preview-card-component-fm/

  Marked as helpful

  0

  ---

  

  nauski•80

  @nauskiPosted over 3 years ago

  @afrussel Your css looks much cleaner. It's difficult to select the correct approach, so many things affecting other things.

  0
• 

  Lucas Estevam•210

  @tl-lucasestevamPosted over 3 years ago

  First, congratulations on building the project! To put the color in the image you can use a ::before, but first, it's interesting to clean the CSS of the image leaving it like this:

  .right img {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  

  The object-fit: cover will prevent your image from losing resolution, you can access the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

  In this case, the style of the before would look like this:

  .right {
      flex-basis: 50%;
      margin-right: 0px;
      position: relative;
  }
  

  .right.overlay::before {
      content: '';
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: hsl(277, 64%, 61%);
      mix-blend-mode: multiply;
      z-index: 100;
  }
  

  Marked as helpful

  0

  ---

  

  nauski•80

  @nauskiPosted over 3 years ago

  @tl-lucasestevam Thank you, I got the image showing correctly now.

  0