Responsive Social Proof Section with Sass and Animate.css

Solution retrospective
Hey!
This was a fun challenge that I spiced up a little with some CSS animations from Animate.css.
Feedback definitely appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @zuolizhu
Hi ApplePieGiraffe,
Amazing job on this challenge! I like the animation you added 😆, it must be a lot of fun to use the Animation.css library isn't it 😏.
The code looks very clean and easy to read 😯. I found that you made some reusable utility classes, good practice!
I noticed that you are using
transform
to make the shift of the positions of some elements 👀. There is nothing wrong with that at this project. However, I feel it is kind annoying when measuring the distance between two sections if the one of them have thetransform
😐.In your example,
<section class="bottom" ...
has 192px height. But the reviews within it already exceeded the height 🧐.If there is another section down below this section and have
margin-top
maybe 10rem, then the actually margin-top you will see is less than 10 rem because of the transform 🤯.So instead of
transform-y-sm
andtransform-y-md
I would go.mt-sm { margin-top: 3rem; } .mt-md { margin-top: 6rem; }
You might see that the first
review
figure will be stretched 😬, no problem, addalign-items: flex-start;
to your.bottom
will fix it 😎.I would also add a
max-width: 1110px;
(I think FrontendMentor loves the number 1110, they always use this number for the container size 🤣) to themain
, this will make sure your page won't tear apart in the extra wide screen.Your project becomes better and better, can't wait to see your next project!
Happy coding 🙌!
- Account deleted
This comment was deleted almost 4 years ago
- @ezraguy
Hey @ApplePieGiraffe, very responsive and very professional! and the animations make it look even better! Great Work!
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