👨‍🎨 Art Gallery Website VANILLA CSS (CSS Animations & Hover Effects)

👾 Hello, Frontend Mentor coding community. This is my solution for the Art Gallery Website

When I started my journey in Frontend Mentor this was my dream challenge that I always wanted to complete. Now, after 7 months (I know it took to long, but I am a noob 💁‍♂️) its done! Challenge accepted and completed.

The challenge was really challenging, the main struggle I had building this html structure/css was with the header and the image gallery. I had some fun trying to figure out how to make the grid-template-area and after some tutorials I get how to use this tool (was my first time with grid-area).

🎨 I added some custom features:

• 👽 Hover Effects
• 🧚‍♀️ CSS Animations

🧐 Special thanks to:

• @AdrianoEscarabote - AdrianoEscarabote Profile that helped me with the Leaflet Map (I have zero knowledge with JS so I had no idea how to include the map).
• @VanzaSetia VanzaSetia Profile to explaining me how to make the h1 heading effect in the header with mix-blend-mode: difference.
• @elaineleung ElaineLeung Profile To have explained me how to add CSS Animations. Now I am really happy adding motion everywhere hahaha. She is of the FEM greatest mentors.

Tutorials used to learn grid-template-area:

• DESIGN COURSE - Easily Structure your Layout with CSS Grid's 'grid-template-areas'
• KEVIN POWELL - Why CSS grid-area is the best property for laying out content'

🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 1 missing)! Gotta Catch ’Em All

Ill be happy to hear any feedback and advice!