Skip to content
Submitted almost 2 years ago

React and Next.js 13.4 landing page using sass, grid and flex

next, react, sass/scss
Nick Carlisi•180
@nickcarlisi
A solution to the Agency landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

As always, any tips, recommendations or suggestions are welcome. A few things...

  • Not sure how to change the color of svgs on hover for the footer social logos. I tried a few things, but nothing seems to be working. Any tips?

  • For the mobile menu, I have the initial state set to display:none and then on click I change it to display:block. The problem is that I want to add transitions such as opacity and scale, but to my knowledge we're still unable to add a transition to display, which negates the other transitions. I tried making it visibility: hidden, instead of display:none, but the problem there is that the menu is covering the clickable elements below and they become unable to click.

  • Random, but is it just me or does it seem like the images that we're provided with for these projects are low quality? I know we don't want to use large file sizes for web, but they seem to be particularly small and therefor blurry on larger screen sizes. I just feel if you're adding a project to your portfolio and the images look blurry, it's going to look bad to the user/viewer. This project in particular has copy on it that says, "Increase your credibility by getting the most stunning, high-quality photos that improve your business image", but the images on the actual site are low-quality.

Code

Please log in to post a comment

Log in

Community feedback

  • Emmilie Estabillo•5,600
    @emestabillo

    Nick!!! Good to see you here! The project looks great!

    For your questions:

    1. Social logos - I would use svgs for this instead of img tags. That way, you can manipulate the fill property depending on the pseudoclass.
    2. Mobile menu - When using visibility: hidden, have you tried adding pointer-events: none to hamburgerContainer (which should be a button btw for accessibility)? I usually hide mobile menus with a combination of positioning, opacity, and then adjusting top/left/right depending on the design. This approach makes transitions possible.
    3. I see your point about the images 😄. Maybe I’ll have @mattstudert weigh in. My two cents is that a well-written readme with good UI and accessibility will often turn heads than the images in your project.
    4. A few more things:
    • Use one menu for both mobile and desktop, and adjust their UI with CSS. It’s best for accessibility and maintenance.
    • You could use the nav tag as a parent for Header contents, instead of nesting another div.
    • Learn More is most likely a link.
    • Images could use a more descriptive alt tag. The logo for example, could have Sunnyside logo, and the client images alt=“Jennie” for the Jennie block.
    • Client Testimonials is a section heading, so h2 is more appropriate. Use CSS classes to change text appearance.

    Hope this helps and lmk if anything!

    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