This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size (375px and 1440px)
- See hover states for all interactive elements on the page
- Semantic HTML5 markup
- SCSS custom properties
- Flexbox
- Mobile-first workflow
- React - JS library
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
useEffect(() => {
const handleWindowResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
});
- getting window width on resize - This helped me setting the images that change according to devices size.
- GitHub - @MatheusHG94
- Frontend Mentor - @MatheusHG94
- Linkedin - @matheushg-7654