Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sunnyside Agency Landing Page

#sass/scss

@ArmsAndArrows

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

P
Ctrl+FJ 750

@FlorianJourde

Posted

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

0

@ArmsAndArrows

Posted

@FlorianJourde

  1. 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.
  2. 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 GitHub
Discord logo

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