3 hours

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="cont"> with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  Replace the footer tag with a section tag/div tag.

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  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

  For the over overlay, wrap the img containing the icon image in a div and give it a class for the styling. <div class= "overlay">.

  Give .overlay position: absolute, right, bottom, top and left value of 0 , a background-color of cyan and opacity: 0. Give img .overlay opacity of 0.9 .

  .overlay{
  position: absolute;
  top: 0;
  left:0;
   right: 0;
  bottom: 0;
  background-color: hsl();
  opacity: 0;
  }
  img .overlay{
  opacity:0.8;
  }
  

  To center the view icon give .overlay img position absolute top and left of 50% and transform: translate(-50%, -50%).

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1