Hi Ayush!
<p class="card__cancel">Cancel Order</p>
--> This should be a link since it is interactive.
So, I went into the dev tool and made some changes:
- I added a div with a class stats__pricing that wrapped only around your stats__heading and stats__rate.
<div class="stats__pricing"><h3 class="stats__heading">Annual Plan</h3><span class="stats__rate">$59.99/year</span></div>
-
I turned your .stats__heading into an h3.
-
Then I added
justify-content: space-evenly
to the .card__stats in the CSS -
Removed the left margin of 1 rem from the .stats__heading, so this is all that's left
.stats__heading { font-weight: 700; color: var(--Dark-blue); }
- Removed position relative and margins from .stats__rate, so this is all that's left
.stats__rate { color: var(--Desaturated-blue); }
Note: I didn't see an H1 in there... preferably I would change the Order Summary to an H1 rather than H2 and then use the H2 for the Annual Plan and use CSS to style it differently.
Marked as helpful
@aayusranjan
Posted
@perezjprz19 thank you much I learned more thing after looking your solution to writing a good code I will improve myself. And thanks for goin through my solution