Submitted over 1 year ago

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

Lucas 👾• 104,580

@correlucas

Preview site View code

This is a solution for...

Art gallery website

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

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:

🍚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!

Community feedback

Adriano• 33,950

@AdrianoEscarabote

Posted over 1 year ago

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

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@AdrianoEscarabote Thank you my friend. Soon I'll need your help working with Js ✌️👏

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

This looks great! But previous comments already established that....

I noticed one thing: the .h1-heading text where you used mix-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

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@wendyhamel Hey Wendy, thank you for the feedback. I dont understand which problem happen with the H1 heading. You mean that is not 100% visible in the mobile version? If you explain me better maybe I can change it.

Thanks

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

@correlucas You can already see it in the screenshot made by FEM. The letter 'Y' from Gallery looks like there is smoke around it. (It's the hair of the lady in the art piece). Because of mix-blend-mode: difference the black of the text fades where the hair of the lady comes behind it.

Marked as helpful

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@wendyhamel Ah okay. I didn't tried to fix this effect because I liked a lots the blend between the text and the background.

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

@correlucas It does look nice here yes. I agree. But it got me thinking and I wanted to try to get the text to be on top of the image and not blending with it. I've been working on it in a codepen. The solution that worked was not my favorite, it needed an extra layer of text. Maybe I'll look for more ways to do it later on.

Marked as helpful

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@wendyhamel this is nice, if you want you can share your solution with the text effect working on without blend the photo. 👏

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

@correlucas It's just a quick example. I used a svg as background so I could change the color. my mix-blend-mode example

Huey.io• 240

@huey-io

Posted over 1 year ago

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

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@huey-io Thank you bro. One more left ✌️

{ D D D }• 150

@DavidDelannoyDeveloppement

Posted over 1 year ago

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! 😉

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@DavidDelannoyDeveloppement Thank you for the kind words David 👏👏

Khaya• 300

@khaya05

Posted over 1 year ago

Great job man. Your solution is impressive and very inspiring!!!

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@khaya05 Thank you Khaya

Jorge pereira• 230

@jorgealves-b

Posted over 1 year ago

I will try to do this beautiful work

Lucas 👾• 104,580

@correlucas

Posted over 1 year ago

@jorgealves-b thanks

Nick C.• 710

@niemal

Posted about 1 year ago

The top section animation with the smooth roll-up is just beautiful. Good job!

Sinisa Vukmirovic• 1,690

@SinisaVukmirovic

Posted over 1 year ago

Just...too good!

Please log in to post a comment

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