@R3ygoski
Posted
Hello Swati, congratulations on completing your challenge, it looks great.
I'd like to give you some suggestions to make it a bit closer to the proposed design. You can consider reducing the min-height
of .part-1
to around 460px
. This will make it misaligned, so to center it, you can use display: flex;
, justify-content:center;
, and align-items: center;
on the body
, and then add a height: 100vh
. With this, your card will be perfectly centered. You can also remove the margin
from your .container
.
As for your HTML, it's well-structured, but it lacks some semantics, which are extremely important for SEO and accessibility. Here are some tags that can be changed:
<div class="container">
could be changed to<main>
because it contains the main content of the page.<div class="part-1">
: Here, you could use a<figure>
, as the content of this part is an illustration.<div class="part-2">
: Here, you could use an<article>
, as the content here is self-explanatory and independent of the rest of the page.<div class="btn">
: Here, you could use the<button>
tag itself, as it makes more sense to be a button rather than a<div>
. But if you want to keep the div, you can add arole="button"
attribute to make it more accessible to screen readers.
Regarding accessibility, I noticed that you used two heading tags <h1>
, which can result in accessibility errors. We should only have one <h1>
, so it would be more appropriate to replace the price section with <h2>
or <span>
, as it makes more sense to be a <span>
than a subheading (h2).
Again, congratulations! Keep practicing and improving your skill. If you have any questions, please ask below and I will try to help in the best possible way.
Marked as helpful
@Swati7819
Posted
Hello Bernardo! Thank you for the appreciation and the suggestions. I will surely look into it and will work in that direction !!
Cheers !