Responsive Social proof section [BEM, Pure CSS and Animation]
Design comparison
Solution retrospective
This challenge was fun to create using the BEM methodology π² and Flexbox.
Your feedbacks are highly appreciated ππ½
UPGRADESπ:
- Animation
- Accessibility
- BEM
As always, happy coding!π¨π½βπ»
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! π Here are some suggestions to help improve your code:
- Along with the blank
Alt Tag, you also want to include thearia-hidden=βtrueβto your βstarsβ to fully remove them from assistive technology.
More Info:π
https://www.w3schools.com/html/html_images_picture.asp
- The profile images are not decorative. Their
alt tagshould not be blank. It should state the following; βHeadshot of -personβs full name-β
More Info:π
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!ππ
Marked as helpful0 - Along with the blank
- @danurag1906Posted almost 2 years ago
Hey @xyzeez ! Your design looks great.
Here are some tips that may help you.
You can use "translate-x" property to displace the rating element horizontally. Simillarlly you can use "translate-y" property to displace the user review box vertically.
Hope it helps your design
0@xyzeezPosted almost 2 years agoThank you so much, @danurag1906!
Could you please submit a pull request on my repo to further understand your point?
0@danurag1906Posted almost 2 years ago@xyzeez Hey! I have gone through your code on github. In the div containing star2 and star3 class use "transform: translateX(value);" property . And the value could be in "rem" or "px" as you want.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateX
Use the above link for further reference. Hope it helps!
0@xyzeezPosted almost 2 years ago@danurag1906 Thank you so much. Currently, I used
align-selfto arrange the items but you're suggesting I use thetranslateXproperty. I respect of self-improvement, How do yo think that property would help my code more rather than using thealign-self? Same goes for the testimonials containers.Thank you so much :)!
0 - @Nadine-GreenPosted almost 2 years ago
HEY THERE!
You will need to set a
max-widthfor the desktop design of your elements because, if you notice, they keep expanding, adding this property will prevent them from doing thatHOPE I COULD BE OF HELP :)
HAPPY CODING!
0@xyzeezPosted almost 2 years ago@Nadine-Green Do you mean the <body> ? also, what width do you suggest I add?
0@xyzeezPosted almost 2 years agoThank you so much, @Nadine-Green!
Could you please submit a pull request on my repo to further understand your point?
0
Please log in to post a comment
Log in with GitHub
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