card html y css

Community feedback

• 

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi! You've done great 💪

  Here are some suggestions to improve your code:

  your design works fine on your screen but larger screens is not taking full width because you added

  width: 1440px;
  height: 800px;
  

  in .container To solve it follow these steps:

  add

  width: 100%;
  height: 100vh;
  

  in .container add margin: 0; padding: 0; in body element to reset default margin and padding

  body {
  margin: 0;
  padding: 0;
  }
  

  • You need to add the alt attribute to your image like this <img class="img-escritorio" src="images/image-product-desktop.jpg" alt="product picture" height="450px">

  The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

  You can learn more Here

  Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  Click here for more information

  Good job, and happy coding!

  1