Art Gallery using SCSS/Flexbox/Grid/JS/Intersecting Observer API

Hello, Huynh Nguyen! 👋

Good effort on this challenge! 👍 The site also has some scrolling animation however, it's not respecting the user prefers-reduced-motion settings. So, I recommend making sure that for the users who don't want to see any animations, the animation won't run.

On 870px viewport width, the footer three-column layout is too narrow.

@media (min-width: 860px)
.footer {
    /* padding: 10rem 16.5rem; */
   /* reduce the amount of padding */
}

More suggestions from me.

• There's no header element on this site. header element contains nav and the logo of the site. In this case, the first section should be lived inside the main landmark. It should be the first section of the main content.
• The "Modern Art Gallery" inside the header looks different from the design. It's possible to do the reverse text color based on background color by using mix-blend-mode property. I recommend reading this CSS Tricks blog post about it.
• The arrow icon is also different from the original design. There are icon-arrow-right.svg and icon-arrow-left.svg that you can use.
• For the images, I recommend using the picture element instead of img elements. It is a good challenge to use picture elements. In this case, it is used for the art direction. You can learn about it on the MDN documentation for picture element.
• Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
• Each page should only contain one h1. I recommend making the h1 on the footer as h2 instead.
• Each social media icon should be wrapped by link elements. As you may already know that these are actually the social media links for the company.
• I recommend removing the commented text content. It's not a big deal but, it's going to reduce the file size of both HTML. It means that the site would load faster because of it.

Now, specifically for CSS.

• I don't recommend changing the html or the :root font size. It can cause huge accessibility implications for those users with different font size or zoom requirements. I suggest reading this article by Josh Comeau where he tells about the problem of the 62.5% trick (and more!). Also, I recommend reading what an accessibility expert (Grace Snow) has said about it.
• I suggest making the img element as a block element (by default, it is an inline element) and setting max-width: 100%. I also suggest writing it as part of the CSS reset. This way, you don't have to keep specifying it each time you want to style the img element.

One last thing, for some reason, I can't Tab through the links. I don't know what causes it. But, hopefully, you can solve the issue.

That's it! Hope you find this useful!