NFT Preview Card Component

Community feedback

• 

  Hassia Issah•50,410

  @Hassiai

  Posted about 2 years ago

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  To center .container on the page using flexbox or grid instead of giving it a margin value, Add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body OR add min-height:100vh; display: grid place-items: center to the body

  • USING FLEXBOX:

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • 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 and here

  For a responsive content which wont require a media query for this challenge, give .contain a fixed max-width value. max-width:400px which is 25em/rem

  For the hover of the image, give . main-image a width of 100% and position: relative. Give .main-image img a width of 100% and display: block. Give .main-image div position: absolute, left, bottom, right and top value of 0, background-color pf cyan and opacity:0. Give .main-image img: hover .main-image div opacity: 0.9 and cursor value of pointer.

  .main-image{
  width:100%;
  position: relative;
  }
   .main-image img{
  width:100%;
  display: block;
  }
  
  main-image div{
  position: absolute;
  top:0;
  left:0;
  bottom: 0;
  right: 0;
  background-color: hsl();
  opacity: 0;
  }
  .main-image img: hover .main-image div{
  opacity:0.9;
  cursor: pointer
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  10

  Marked as helpful