👨🎨 Art Gallery Website VANILLA CSS (CSS Animations & Hover Effects)
Solution retrospective
👾 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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdrianoEscarabote
Hi Lucas, your solution is very complete, everything is incredible!
You always do an amazing job on your projects! I can say that in my opinion, this is the most beautiful solution I have ever seen for this challenge. Congratulations on your performance, here on the fem platform for reaching incredible numbers, with your super valuable feedback! and also for your effort of wanting to learn new things, and build amazing projects!
Marked as helpful - @wendyhamel
This looks great! But previous comments already established that....
I noticed one thing: the
.h1-headingtext where you usedmix-blend-mode: difference;Blends with the image as well. It would look sharp on all screen sizes if it didn't do that.Did you notice it and settled for this? Did you try anything to change it? I love to figure out these kind of challenges within the challenge. I don't know how to fix it (yet). I have a few idea's and plan on finding out what would work.
Happy Coding!
Marked as helpful - @huey-io
Such an impressive feat, happy to have you as a friend lucas your solution's always look top tier. You continue to motivate me with your work. Great job man, one more challenge left is amazing. Can't wait to see it
Marked as helpful - @DavidDelannoyDeveloppement
What a wonderful job @Lucas!!! 👏 I will be very proud when I achieve this result. You are a true source of inspiration and motivation! Congratulations and thank you! 😉
- @khaya05
Great job man. Your solution is impressive and very inspiring!!!
- @jorgealves-b
I will try to do this beautiful work
- @niemal
The top section animation with the smooth roll-up is just beautiful. Good job!
- @SinisaVukmirovic
Just...too good!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord