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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Author

Note: Delete this note and update the table of contents based on what sections you keep.

I mainly started this project for the goal of refreshing my knowledge of vanilla JS, since one can get too used to the latest technologies such as react, firebase, mongoDB... etc. It is a common routine for me to start a new little project which i can take it easy with, and i really suggest it for my fellow developers.

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: solution URL here
• Live Site URL: live site URL here

as every vanilla html, css, js project go, i start with building the foundamental structure of a section in html, then i move to styling it using css, then when finishing with the final look that I am satified with, i try to make responsive with every pc screen. then i reapeat this process with every section in the page. after I am finished, I started working on the mobile version, which took me a couple of adjestment using @media.

Why didn't I work with "Mobile-first workflow"?. just because :p.

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

• color picker - I used this to pick the right color from the design image provided in the starter code

• Frontend Mentor - Mohamed Rami Megherbi
• Twitter - Mohamed Rami Megherbi