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

Photosnap multi-page website | React/React-Router/TailwindCSS

Joshua Hellardβ€’ 545

@jhellard

Desktop design screenshot for the Photosnap multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey again, everyone! πŸ‘‹ This will be my 10th submission! πŸŽ‰

This one took me a while, working with TailwindCSS was nice with small projects but it can be a little tough to keep everything organized on larger projects.

I am happy with the results, any feedback is welcome!

Community feedback

P
visualdennisβ€’ 8,375

@visualdenniss

Posted

Great work! It takes a lot of patience and hard work to build multi-page sites like this. It looks very good overall and also responsive.

On larger screens, above 1440px, the empty space and some sections of the page with white background blend into each other. If you prefer, you can add a box-shadow to the whole container to make the app distinct from the body. E.g.

.max-w-[1440px] { max-width: 1440px; box-shadow: inset 0 1px 1px 0 hsl(0deg 0% 100% / 10%), 0 50px 100px -20px rgb(50 50 93 / 25%), 0 30px 60px -30px rgb(0 0 0 / 30%); }

You can additionally link the links in the sections on the front page to other pages. Similar to you did with navigation. Also those 4 images, which lift up on hover on the homepage, could lead to Stories page on click.

A tiny observation: in price section, the gradient above the PRO plan seems to be in the wrong direction, but you can fix this easily as well.

Hope you find my feedback helpful!

Marked as helpful

0

Joshua Hellardβ€’ 545

@jhellard

Posted

@visualdenniss Thanks for the suggestions! I'll add some links to the pages for sure. I was unsatisfied with the background blending like it is, will definitely check out adding some shadows.

0

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