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: (https://github.com/Yakub-Egamnazarov/sunnyside-project)
- Live Site URL: (https://yakub-egamnazarov.github.io) - live site will be active for one month, if there is another website, on this link, let me know, through the feed, I will update the likn.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
- SASS library used, in npm package.json you can see in developer dependency.
In this project I found out how to make mobile navigation section in the header, and did a lot of pratice on responsive design. Flexbox properties were used to easy changing the look of the website for different display sizes.
I learned how to use mixins in scss (sass) along with the 7-1 approach in order to write code fast.
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
I would add more animation interactions for each sections, like: dynamin appearance of the sections from sides when scrolling.
Another one would be when mobile menu button toggled, it is difficult to add animation for
- where is the list of links. For the future development, it would good to add some animation for its appearance with cubic-bezier functions to make it realistic.
- Website - Yakub Egamnazarov - my git-hub profile
- Frontend Mentor - @Yakub-Egamnazarov
- Twitter - Yakub Egamanzarov