Preview Card for Perfume

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Hassan, It looks good!... You have accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <div class="main-container">
        //...
     </div>
  </main>
  

  • Heading levels should only increase by one, Make sure you are using the headings in order... Ordered headings make it easier to navigate and understand when using assistive technologies.

  • All page content should be contained by landmarks, Contain the attribution with <footer>.

  • The <center> element is obsolete... So I suggest you center the component on the page with Flexbox, by giving the parent element <main> the following properties:

  main {     /* <--- Add */
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
   }
  
  .main-container { 
      height: 386px;
      width: 525px;
      /* margin-top: 15vh;        /* <---- Remove */
      border-radius: 15px;
      background-color: #ffffff;
      text-align: left;
      padding: 0;
  }
  
  

  I hope this is helpful to you... Keep coding👍

  Marked as helpful

  0