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
  • What I learned
• Author
• Acknowledgments

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: Frontend Mentor
• Live Site URL: Github Pages

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• JavaScript
• Git and Github
• Normalize CSS - For styles

I practiced how to code a design given to me. This proyect was a little hard and slow without the sketches because I had to get sizes and colors with image editors like gimp and paint. I think the result is similar and I am satisfied with my results.

I learned some methods and events of javascript

addEventListener("mouseover" , (e) => {}):
addEventListener("mouseleave" , (e) => {}):
e.target.matches("");

• Website - JSamuel
• Github - @JSamuelAP
• Frontend Mentor - @JSamuelAP
• LinkeIn- @JSamuelAP
• Twitter - @JSamuelAP
• Email - [email protected]

Before start, take a good look at the differences between mobile, desktop and active states designs, this will help you to plan the HTML structure, styles, identify where you will use flexbox or grid, where you will img tags or background-image, etc.c If you don't have the sketches, use some image editor to get measures between elements, sizes and colors.