preview card con css flexbox y css grid

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  For the color of the image, in the html wrap the img in a div and give it a class for the styling. <div class="stat-image"><img></div> in the css give .stat-image a background-color of soft violet and give the img a height of 100%, width of 100%, mix-blend-mode: multiply object-fit of cover and opacity of 0.8.

  .stat-image{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  wrap the heading in <h1> and <div class="attribution"> in the footer tag to fix the accessibility issue.

  to center . principal on the page using grid, min-height:100vh; display: grid place-items: center to the body.

  To center .principal on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Mauro Andrade•20

  @mauritoo98Posted almost 2 years ago

  @Hassiai thank you, I'll keep it in mind for the next challenge! :D

  0
• 

  Gabriel Carlos•210

  @gabscarlosPosted almost 2 years ago

  You can use a div like background-color in pink and apply opacity

  Marked as helpful

  0

  ---

  

  Mauro Andrade•20

  @mauritoo98Posted almost 2 years ago

  @gabscarlos thank you ;)

  0