Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

social-review-card Solution

@itsleeparker

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey there this is my third post here , as a begginer I am feeling good coding up all the site ,I tried to solve this problem however my CSS is going too long , I am open for suggestions and I would love to hear your opinion on this one. Thats it from my side

Community feedback

@itsleeparker

Posted

Thanks for the feedback dude will remember it

0
darryncodes 6,430

@darryncodes

Posted

Hi Adnan,

Good job, pretty much a perfect match!

Two suggestions form me:

  • i like to use transform: translate x/y to achieve the staggered card affect instead of absolute positioning. I think it's a little simpler from a responsive design perspective
  • you could clear up your accessibility report if you changed <div class="attribution"> to <footer class="attribution"> and made your <h5> a <h2>. You shouldn't skip heading levels

All the best!

0

@benjoquilario

Posted

Hi! itsleeparker Great job on finishing this one. Everything looks great responsive well.

Some Suggestion:

  • Remove the height: 100vh or just add the min-height: 100vh on the body tag. Because this will only limit the body to have a height 100% of the remaining viewport or screen.

  • Also remove the width: 50vh; on your body tag at media (min-width: 345px) and (max-width: 500px). Because this will only limit the body to have a width: 100% of the remaining viewport or screen.

  • Also on your <img tag> you forgot to add the alt attribute. The alt attribute provides an alternative text for an image, if the user for some reason cannot view it. In your case since the photo of image is not decorative you should add the alt attribute on it Example: alt="Colton Smith".

aside from those everything is looks fine! Good luck

0

@itsleeparker

Posted

@benjoquilario Thankyou so much for help dude will keep that in mind 👍

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord