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
- See hover states for all interactive elements on the page
- Solution URL: Github Repository
- Live Site URL: live site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
For this challenge, we could have several options to achieve what we want. first of all i wanted to try this one with CSS background-image way. in this method, i defined every div that we could have in our page and by assigning a background image with CSS on them, i controlled changing pictures from mobile state to desktop state. I think i could also assign a picture directly to divs and then hide mobile or desktop images in opposite cases with CSS or even js. but i preferred this method and despite the complexity, it added to the project, i liked the experience. But if i had to start over this project, I will not do it with this approach, because with no content the divs were hard to assign a non-specific height or width and it added a little to the time i finished the project. overall i liked the experience and I hope I can do much better work in the future.
I do feel that it could be done much faster and easier with ReactJS. but I decided to go with vanilla JS and I didn't regret the experience. Maybe next time...
- Website - @comendrun
- Frontend Mentor - @comendrun
- Twitter - @comendrun