Submitted about 2 years ago

Sunnyside Agency Landing Page

sass/scss

Shchetkov Maksim•470

@ArmsAndArrows

A solution to the Agency landing page challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

Ctrl+FJ•810

@FlorianJourde

Posted about 2 years ago

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

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