@pikapikamart
Posted
Hey, glad to review another solution of yours. For desktop state, it looks fine but needed those font-weight
to be present to create a hierarchy and each review container is too wide and the stars and review should be in a single row. The site is responsive which is really nice, I would just suggest for padding
in the body
tag to prevent the layout from touching the screen. Mobile state looks great as well.
Others already gave their feedback on this one which is really nice, just going to add some suggestions as well:
- The
br
tag inside theh1
is not really needed. What you can do is that, set amax-width
on theh1
so that the text will be wrapped on their own. Adjust until you get the desired look. - Each of those stars could have been used as a value for the
background
property. Remember thatbackground
can accept multiple images, this way, you won't have to create those extraimg
tags. - If you insist on using
img
tags for each stars, then use analt=""
andaria-hidden="true"
on each of theimg
since they are all decorative images. - For each of the testimonial card, you can use this markup below for better navigation when using screen-reader using
blockquote
:
<figure>
<img src="" alt={person name}>
<blockquote>
<p> {qoute in here}</p>
</blockquote>
<figcaption>
person name
<p>
person role
</p>
</figcaption>
</figure>
Though you would need to use display: grid
on the figure
so that you could place each item properly like in the design.
- Each person's name doesn't really need to be heading tags, but if you still insist, use
h2
instead ofh3
so that heading tag level won't be skipped.
Those only. Again, great job for this one.
Marked as helpful
@Alejandro1709
Posted
@pikapikamart Thank you so much!