Design comparison
Solution retrospective
First time trying to make something bigger than component. I can see that I could make code more clear but for next projects I'll try to consider this experience.
Also, I stuck for a while on a testimonial card, because screen resizing makes names disalign horizontally. I've tried to find whats going on by looking on other projects. But eventually that happened because of grid gaps. After applying padding-top everything start working as expected.
Community feedback
- @FlorianJourdePosted over 1 year ago
Hey @ArmsAndArrows !
Good job on this one !
I react about your description : I think I would have preferred to use
flex
instead ofgrid
property fro testimonials items. You could try something like that, instead :.testimonial { display: flex; flex-direction: column; align-items: center; gap: 6.3rem; }
And yes,
flex
can handlegap
property ! 🤯Also, do you know that you can set an anchor to hyperlink ? You can try it with your arrow element :
<a href="#features" class="hero__arrow"><img src="images/icon-arrow-down.svg" alt="arrow icon"></a>
Just set an ID to your
.features
section, maybe add a tinyhtml { scroll-behavior: smooth; }
to allow smooth scroll, and your page is now more dynamic, without adding any line of JS ! Pretty cool, huh ?Keep up the good work !
Marked as helpful0@ArmsAndArrowsPosted over 1 year ago@FlorianJourde
- I tried flex, but text amount in each testimonial review is different so as screen getting resized it disaligns last elements, that was the case to use grid. I'll play more with flex with same code to find out more.
- Yeah, I know about hash link that reffers to id of an element , but I totally forget to use it, thank you =)
1
Please log in to post a comment
Log in with GitHubJoin 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