Developer: Robin Bosch
Designed by Frontend Mentor
The user should be able to view the page correctly on the most common devices and on every screen size.
Hover states should be reflected accurately.
The following designs were given to build the project:
The Desktop design with a shown width of 1440px
The Mobile design with a shown width of 375px
Hover states
The expanded navigation menu on mobile
- Getting the hero images to fit on all screen sizes
- Making sure the text sizes are correct according to the design
- Working with SVG and changing their color in inline SVG
- Working with overflowing images
- HTML
- CSS
- JS
All was written in plain HTML, CSS and JS. No framework was used in this one. JS is used just for the mobile navigation menu.
HTML validation was done with the W3 HTML validator and came back with no warnings.
CSS validation was done with the W3 CSS validator and came back with warnings regarding the variables which are currently not checked.
Accessibility was checked with the browser extension of the WAVE validator and came back with contrast errors for the text which is given from the design.
The website was tested on the following devices:
- Windows 11 PC (Screen resolution: 2560x1440)
- Xiaomi MI 9 with Android 11 (Screen resolution: 1080x2280)
- Xiaomi Pad 6 with Android 12 (Screen resolution: 1800x2880)
Other screen resolutions were tested in the browser with dev tools from 2560x1440 down to 320x568.
Two helpful reference guides I use:
- Frontend mentor - For providing me with this challenge and the designs.
- Reset CSS from Andy Bell
This project is published under the MIT license.
The challenge itself is excluded from this license.
License