Order summary component

Hey @CinArb2 👋🏻

I have some suggestions to help you fix the accessibility issue and some other things.

• First, I suggest using <h2> or <p> instead of <h3> for Annual Plan, because headings in HTML have to increase gradually, such as h1, h2, h3…..
• Next, the music icon, should have aria-hidden="true”, because it's for decoration only. You can read more about aria-hidden here.
• To answer your question, yes, we do need to reset those two properties and not only those two. I won't go into many details about resetting CSS, but I'll leave this cool article here, which will make more sense than my brief explanation.

I hope this was helpful 👨🏻‍💻 other than that, you did a great job for your first project. Your code looks semantically correct, and those animations give some life to the project. Cheers 👾

Hi Cindy, your solution is on point 👌. From semantic point of view for this simple layout this is not necessary but I will do something like this:

<section class="hero"> -----> section is a wrapper for one or more containers
    <div class="container"> -----> container is a wrapper for hero section rows and determines 
            width of row element
        <div class="row"> -----> row is a wrapper for hero section content, on rows we can set 
            display options such as flex, grid; row can be parent for multiple card elements

            <div class="card"> -----> this is a content element of hero section and parent/wrapper for 
                all card elements
                <div class="card__header">  -----> this is a div for image
                </div>

                <div class="card__content"> -----> this is a wrapper for card content
                    <h3 class="card__heading"></h3>
                    <p class="card__text"></p>

                    <div class="card__order-box"> -----> this is a wrapper for card payment plan content
                       <div class="card__icon"></div>
                       <div class="card__price-box">
                           <h4 class="card__price-heading"></h4>
                           <span class="card__price"></span>
                       </div>
                       <a href="#" class="card__link"></a>
                    </div>

                    <a href="#" class="btn btn--order"></a> -----> buttons are reusable elements for whole 
                        site so in btn class put all styles that are mutual for all buttons and in btn--order 
                        and btn--cancel class put all styles that are unique for that particular button
                    <a href="#" class="btn btn--cancel"></a>
                </div>
            </div>
        </div>
    </div>
</section>