Single price grid component

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 h1 instead h3 in div.container-top and change font-size if you want .

To make your code more Responsive

• if you want to center span.per month you can use this :

html

 <span class="dollar-sign">$29 </span><span class="month-text"> per month</span> 

css

span
{
vertical-align:middle
}

OR use this :

html

<p class="price"> <span class="dollar-sign">$29 </span><span class="month-text"> per month</span> </p>

css

p.price 
{
  display:flex;
  align-items:center
}
span
{
display:inline-flex
}
p.price span.month-text 
{
padding-left:10px;
}

• don't give classes colors name but give it semantic name to make code more readable and if you change colors, classes will be meaningless so you can use :

<p class="heading-details"> 30-day, hassle-free money back guarantee</p>

instead of using

<p class="bright-yellow-color">30-day, hassle-free money back guarantee </p>

• you can use variables in css and save colors or fixed sizes in variables like this :

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

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

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