Preview Card for Perfume

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👍