Hey @ArmsAndArrows !
Good job on this one !
I react about your description : I think I would have preferred to use flex
instead of grid
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 handle gap
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 tiny html { 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 helpful
@ArmsAndArrows
Posted
@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 =)