Preview Card Component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Do not forget ⚠️ to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.

  • Do not uppercase❌ "companies", "templates" and "queries" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.

  • Along with the blank alt tag, you also want to include the aria-hidden=“true” ⚠️ to your “image” to fully remove them from assistive technology.

  More Info: 📚

  [MDN Aria-Hidden] (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden#description)

  • This challenges requires the use of two images 🎑 at different breakpoints. ⚠️ The picture element will facilitate this.

  Here is an example of how it works: EXAMPLE

  Syntax:

    <picture>
      <source media="(min-width: )" srcset="">
      <img src="" alt="">
    </picture>
  

  More Info: 📚

  https://www.w3schools.com/html/html_images_picture.asp

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  0

  ---

  

  Cesar Valencia•310

  @cvalencia1991Posted almost 2 years ago

  @vcarames thank you very much for view my code im going to implement that

  0

  

  Cesar Valencia•310

  @cvalencia1991Posted almost 2 years ago

  @vcarames hi I have to question, the way that I implement its good o i should use the picture implementation

  2. how can i delete te roles of the project i don't know how to fix it, could you please put it in my GitHub lines to update, i really appreciate it

  0
• 

  Aayush Kumar•110

  @AK-CHP1Posted almost 2 years ago

  Hi @cvalencia1991! Congratulations on completing this project. I think you can further improve the typography of your paragraph by adding line-height: 1.5. Also consider using CSS grids to properly leave gaps around your cards. Your .stylenumber element also seems larger than the card's heading, consider making it quite smaller.

  Rest looks great!

  Marked as helpful

  0

  ---

  

  Cesar Valencia•310

  @cvalencia1991Posted almost 2 years ago

  @AK-CHP1 i did it thank you

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

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

  To center .wrapper on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  For the color of the image , in the html give the <div> containing the image a class. e.g.: <div class= "images"> in the css give .images a background-color of soft violet. Give the img a width of 100% , mix-blend-mode: multiply; and opacity:0.8.

  in the html
  <div class= "images">`
  <img>
  <img>
  </div>
  in the css:
  .image{
   background-color: hsl();
  }
  img{ 
  width: 100%
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  0

  ---

  

  Cesar Valencia•310

  @cvalencia1991Posted almost 2 years ago

  @Hassiai thank you very much for the feedback im going to implement it

  0

  

  Cesar Valencia•310

  @cvalencia1991Posted almost 2 years ago

  @Hassiai it works thank you very much but when I try to change em unit to rem or vh it does not deploy well the image, thank you very much for the feedback

  0