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

using flexbox , js

esraagamalā€¢ 600

@EsraaGamal-22

Desktop design screenshot for the Room homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


rate my design please, Any feedback and suggestions on how I can improve are very welcome!

Community feedback

P
ApplePieGiraffeā€¢ 30,565

@ApplePieGiraffe

Posted

Hi, esraagamal! šŸ‘‹

Nice work on this challenge! I like the animation in your hamburger menu! šŸ™Œ

In addition to emestabillo's feedback on your arrow buttons, I suggest,

  • Making the background of the arrows change to a lighter color (rather than changing their opacity) upon hover so that the content of the page doesn't show through the back of the buttons.
  • Also, there's quite a bit of space between the navigation links in the header of the page. Decreasing that space would bring them closer together and easier to see.

Keep coding (and happy coding, too)! šŸ˜

1

esraagamalā€¢ 600

@EsraaGamal-22

Posted

@ApplePieGiraffe thanks alot for your opinion šŸ˜„ , can you see my code after the update?

0
P
ApplePieGiraffeā€¢ 30,565

@ApplePieGiraffe

Posted

@EsraaGamal-22

I see you've fixed both of those issues. Great work! šŸ‘

šŸ˜

0
P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hi Esraa, it's me again lol :-) Much improved wow, I can see a lot more control of the design. Just two things here:

  • It looks like you had a bit of a time aligning the arrows as the screen sizes change. One suggestion is nesting the arrows inside slide-pics (so that it becomes their parent), and then using position: relative on this image container. You would still need media queries because the layout is different on desktop, but it probably won't be as many as you have now.

  • The images start to look huge compared to the text between 900px to 1200px

Hope this helps :-)

1

esraagamalā€¢ 600

@EsraaGamal-22

Posted

@emestabillo Hi Em šŸ˜„ , can you my code after the update?

0
P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

@EsraaGamal-22 Looks better Esraa. I think if you set bottom: 0 from the start for the arrows, the styling to larger widths would be easier. Just my opinion :-) But overall looks good!

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