Pricing Component with Toggle

Community feedback

• 

  Marzia Jalili•9,730

  @MarziaJalili

  Posted 8 months ago

  Great job finishing the project!!!

  Some tiny tips for a more improved design

  First, the size and position of the price and the dollar sign differ. It needs some minor adjustments.

  • To match the design, you wrap a <span> element for the dollar sign and a <strong> element for the price in another <span> in each card.

  • Then, add a display of flex and align-items: center; to the parant <span>.

  In addition, when the user hovers over a button the card resizes. I assume it is caused because there is no border initilaly, it's added when it is hovered.

  • To prevent this, you could set the border first in the buttons' selectors not in the :hover selector. You could put the initial color of the border to transparnt if needed.

  Other than that, your web is on fire!!!!

  hope the feedback was helpful, for more clarity you can check out my solution as well😁😁.

  11

  Marked as helpful