Single price grid component solution

Hey, You did amazing work congratulations for completing this challenge

to fix accessibility issues :

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

To make your code more Responsive

• instead of using top:100px in main.container use this to center your container in the page and avoid scroll

body {margin :0;display:flex;flex-direction:column; min-height:100vh;}

• you can use variables to give name to colors or font-size or any thing you want but choose semantic name

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

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

• give cards semantic names to make code more readable as below

<main class="container cards">
      <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>

• use grid template with main.container to make it more responsive as this

main 
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(270px,auto);
    grid-template-areas:
        'header header'
        'price whyus';
    gap: 20px 0px;
    margin: auto auto;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--white);
}

header {
    grid-area: header;
    display: grid;
    gap: 30px;
    margin: auto auto;
}

main div.price,main div.whyus
{
    min-height: 100%;
    padding: 30px 30px 0px;
    color: var(--white);
}
main div.price {
    grid-area: price;
    background: var(--Cyan);
    border-radius: 0px 0px 0px 15px;
}

main div.whyus {
    grid-area: whyus;
    background: var(--light-cyan);
    border-radius: 0px 0px 15px 0px;
}

• use media query different for each screen not used only one so use this in mobile

@media (max-width: 775px)
{
main {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
        'header'
        'whyus'
        'price';
    gap: 10px;
}

}

• instead of delete footer tag use can comment it as well structured page should contain semantic tags as header,main,footer

• 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👍