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

Responsive Photosnap project using grid, flexbox, tailwindcss

#react#tailwind-css#react-router

@ortonb110

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


Hi there 👋, I’m Orton and this is my solution for this challenge.

Built With:

TailwindCSS npm - prettier React.js I couldn't get the sidebar to have a dark backdrop and I humbly ask for help. Any suggestions on how I can improve are welcome!

Thank you. 😊✌️

Community feedback

Joe-Praise 180

@Joe-Praise

Posted

Hey orton, congratulations you've come a long way!🚀

Although, on your mobile view i noticed when you navigate to a new page the nav bar doesn't close and there's no backdrop to help ease the process.

Here's tutorial on how to implement the backdrop using react portal --> React Modal Tutorial with Portals

Marked as helpful

0
P
Aydan 420

@AydanKara

Posted

Great work Orton. It´s look amazing. Congratulations. To get sidebar to have dark backdrop, you can put "bg-black and the text-white" to first <div> from <nav>. I don't have much experience with tailwind css, but it can be done.

Marked as helpful

0

@ortonb110

Posted

@AydanKara Thank you, I will make the necessary changes. I'm grateful.

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