single price grid component

Hey, You did amazing work congratulations for completing this challenge

to fix accessibility issues :

• use main and wrap inside it section.container instead using section and wrap inside it div.container so all page content should be contained by landmarks

• Go down orderly when you are using the headings <h1> down to <h2> down to <h3> and so on . so use <h1> instead <h2> in section div.item-1 and change font-size if you want .

to make your code more responsive

• don't use <br> to separate sentence vertically in div.item-3 but these text are items of list so it is recommendable to use unordered list and style it instead using <p> and <br> as this

       <ul>
               <li>  Tutorials by industry experts </li>
               <li>  Peer & expert code review </li>
               <li>  Coding exercises </li>
               <li>  Access to our GitHub repos </li>
               <li>  Community forum </li>
               <li>  Flashcard decks </li>
               <li>  New videos every week </li>
        </ul>

• give your div semantic names instead using div.item-1 , div.item-2 and div.item-3 use this :

<main>
      <header>
        <h1>  Join our community </h1>
        <h2>  30-day, hassle-free money back guarantee </h2>
        <p> 
          Gain access to our full library of tutorials along with expert code reviews. 
          Perfect for any developers who are serious about honing their skills. 
        </p>
      </header>
        <div class="price">
           <h3> Monthly Subscription </h3>
          <p>  $29  <span>per month</span></p>
          <p>  Full access for less than $1 a day</p>
          <button class="register">   Sign Up </button>
        </div>

        <div class="whyus">
           <h3>  Why Us </h3>
           <ul>
             
               <li>  Tutorials by industry experts </li>
               <li>  Peer & expert code review </li>
               <li>  Coding exercises </li>
               <li>  Access to our GitHub repos </li>
               <li>  Community forum </li>
               <li>  Flashcard decks </li>
               <li>  New videos every week </li>
           </ul>
        </div>
    </main>

• you forget to use border-radius for section.container to get more awesome preview .

• you can comment footer tag to get identical preview design .

• you can use variables to give your style semantic names :

:root 
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}

h1 
{
font-family:var(--font-family)/*to call  value of the variable*/
}

• finally you can use the BEM approach for your next projects. It's a popular CSS naming convention for writing cleaner and more readable CSS classes. ---> Why BEM? , The Block, Element, Modifier BEM

Regardless You did amazing I hope this is useful to you... Keep coding👍