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

• Live Site URL: Add live site URL here

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Desktop first, CSS- mobile first workflow
• Accessibility in mind

• Purely decorative images need an empty alt tag

<img src="./decorative-img.jpg" alt="" />

• You can't change color of an svg used in an img tag with the color attribute in CSS, but You can make a filter for it. It's really easy as you can use a site like the one I used: https://codepen.io/sosuke/pen/Pjoqqp

/*prettier-ignore */
.custom-filter {
  filter: 
  /* first make into black */
  brightness(0) saturate(100%) 
  /* now make it the color you want */
  invert(48%) sepia(56%) saturate(305%) hue-rotate(118deg) brightness(72%) contrast(94%);
}

• If there are more than 1 navigations you need to give them aria-labels

<nav aria-label="Primary navigation">...</nav>

• An article is not a landmark in it self so it needs to be put into one

• Don't put the word "link" into the alt description of imgs in links, otherwise a screen reader will read (example:) "Facebook link link"

• Although you can't transition the display property you can create an animation for it (so for example you can change from display: none in a smooth fashion)

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
    transform: translateX(1000%);
  }
  100% {
    display: inline-block;
    opacity: 1;
    transform: translateX(0);
  }
}