Art Gallery Landing Page

Hey, Ramesh! 👋

To create the color effect for the heading, I recommend reading the "Reverse Text Color Based on Background Color Automatically in CSS | CSS-Tricks" article.

But, there are a lot of things that need to get fixed.

• Anchor tag can't be a child element of a button element (and vice versa). Choose, whether it is a button or a link.
• For your information, anchor tags are for navigation, while the button elements are for actions like opening a modal, submitting a form, toggling element, etc. It is essential to use the correct elements.
• Why does the site have two h1 elements?
• Why is there a :hover effect on the .hero-img-div? It's not an interactive element.
• All page content should live inside the main landmark except the footer.
• Don't use aside! All of them (except the footer) are the main content of the page. So, it should live inside the main landmark. I recommend learning more about HTML landmark elements.
• I recommend making the images of the gallery on the HTML. Use picture element to control which image should be used based on the media condition.

There are more things to be fixed but, most of them are fundamental issues. So, I recommend learning about web accessibility. Then, refactor the HTML first before the styling. A11Y Project website is a good site to learn more about web accessibility.

For example, if you want to learn more about heading tags and how to use them correctly, I recommend reading the Accessible heading structure" article from the A11Y Project website.

Hope this helps!