Frontend Mentor - Sunnyside agency landing page solution

Table of contents

• Overview This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor

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

Screenshot

![].(desktop/Screenshot.png)

Links

• Solution URL: solution.com
• Live Site URL: sunny.com

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Google Fonts
• javascript

What I learned

I learned to how to create a harmburger menu which is helped me when dealing the responsiveness of my site! especially on a mobile screen. I also improved on my knowledge of the css flexbox and the css grid

Continued development

i will like to improve my knowledge of css position which relative and absoluete. and how to build responsive sites without writing so much code when dealing with the mobile design. i will also like to improve my skills with background images, to make them to fit in the mobile design instead of looking strecthed. and the positioning of text over images.

Useful resources

• (https://stackoverflow.com/)- this helped a lot in dealing with multiple problem i occured while coding like responsivness, positioning of text over images and hamburger menu
• (https://www.w3schools.com/) this helped improve my knowledge of flexbox and grid

Author

• Website - Nicholas
• Frontend Mentor - @nick335
• Twitter - @ChigozieErigo

Questions

• how was the right-top-borderhamburger menu styled to face up??
• how do i make my code responsive with less amount of code? (feeling like i wrote a lot of code for this project which could have been avoided)
• how do we deal with positioning in terms of responsiveness, are we alawys going to change the position directly for different sizes of phone like i did?