Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 5 years ago

Room homepage

Sunny•525
@statanasova
A solution to the Room homepage challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Ok, now I know why I haven't seen many solutions for this challenge - it just isn't as easy as it seems :)

Generally, I am happy with how the solution turned out :) I tried to implement the original design at 1440x800px as close as possible, while keeping the layout flexible, leting it contract and expand naturally for smaller/larger screens - both horizontally and vertically.

Questions

Accessibility - menu and slider navigation use button elements. I wonder how slider image and content can be made more accessible? Feedback and references appreciated.

Slider I coded the slider with some JS, JSON and CSS transitions. Image transitions are not the best, i guess, but I'll practice that in the future. I haven't coded a slider since I discovered OwlCarousel, so let me know what you think.

I'd be glad if you shared any thoughts!

PS. I dealt with so many little quirks, that I listed some reference articles in resources.txt, it's available in the repository.

Have fun coding!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Sunny's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License