Room Homepage
A homepage for an interior design company, with a very minimalistic design, boasting an image carousel and elements aligning well across all devices.
Links
The challenge
Users should be able to:
- View the optimal layout for the site depending on their device’s screen size
- See hover states for all interactive elements on the page
- Navigate the slider using either their mouse/trackpad or keyboard
A very simple keyboard navigation system:
| Key | Action |
|---|---|
| ← | Go to the previous slide |
| → | Go to the next slide |
Screenshot
Desktop
Mobile
My process
Built with
What I learned
I learned that grid elements overlap each other willingly, as long as you specify the area it’s supposed to take. I think this works really well for the design layout provided. For example, the arrow buttons should line up with the text box below, and using flexbox wouldn’t be possible? I think it is possible with a lot of calculations and moving via translations, but it’s definitely much messier than applying a grid layout.
Continued development
I had some trouble with the styling of the CSS grid, and I should have finished this faster as the only difficult thing was realizing it should be one whole grid, instead of 2 flexboxes on each row.