Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Meet Landing Page (Vanilla CSS - Logo Animation / Easter eggs)

Lucas 👾 104,580

@correlucas

Desktop design screenshot for the Meet landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


👾 Hello, Frontend Mentor coding community. This is my solution for the Meet Landing Page.

Another Challenge update for a challenge I've done a month ago. This challenge was important because was doing it that I've learned how to use better the container to keep the column width consistent and even more important because I've learned to use order to manipulate the elements on hover using the general sibling selector (hover on the meet and then in the iconto see what happen to the speed it turns), the logo was created with two different svgs.

I did some personal design improvements:

  • 👨‍🔬 Logo animation with rotation and blur.
  • 👨‍💻 Hero Section with hover changing profile images
  • 🎨 Image grid zoom on hover + grayscale

Custom card colors and quote icon.

I'm looking forward for feedback!

Thanks!

Community feedback

Adriano 33,950

@AdrianoEscarabote

Posted

Boaa, Mestre! Gostei das animações e dos detalhes escondidos.

Sempre que olho os seus projetos fico com vontade de desenvolver um, na mesma altura, mas ainda me falta habilidade. Porem, sempre saio com algumas ideias para adicionar nos meus layouts Hauahuaha

Acredito que você já zerou o game no modo css puro, e ta na hora de se aventurar com algum framework, você não acha? Hauahuaha

Não tem o que melhorar. Parabéns.

Marked as helpful

1

Lucas 👾 104,580

@correlucas

Posted

@AdrianoEscarabote Pior que não, ainda preciso aprender mexer com as animações a meta é terminar os 8 desafios que faltam e usar framework pros desafios com JS. Pior que eu sou noob, só sei o básico de boostrap, quando eu começar quero aprender o básico de bootstrap e tailwind. Quais vc usa?

1
Adriano 33,950

@AdrianoEscarabote

Posted

@correlucas boaa, eu também quero aprender a mexer com animações, inclusive começarei a me aventurar mais para esse lado agora.

Quando estava iniciando aprendi um pouco de bulma e recentemente um pouco do bootstrap, mas ainda não to com o foco para aprender algum framework. Penso assim… vê se você concorda comigo. Depois que aprendemos e masterizamos nosso css, vai ser mais fácil para dominar um framework né? Auahuhauha. Penso assim porque não há tanta mudança dependendo do framework. Mas posso ta falando besteira...

0
David 8,000

@DavidMorgade

Posted

Hello Lucas, as always, your projects look amazing, you are the king of CSS here on FrontEndMentor.

I noticed that you didn't add the blank space on the bottom that is probably a margin-bottom on the footer, but I think the way you manage it fits better!

The animation of the logo looks great, the gray scale on the four card layout is awesome too!, love it!

Consider adding dark mode for this challenge in the future, I think it would fit perfectly.

And at last I may ask you, have you consider using SASS? I think it will fit perfect your style of coding + the code will look a lot cleaner!

Congratulations!

Marked as helpful

0

Lucas 👾 104,580

@correlucas

Posted

@DavidMorgade Hello David, thanks for the kind words, maybe one day I'll be good in CSS, but not yet hahaha just a noob.

Indeed I tried to get rid from the white gap in the bottom, but I think is a matter that my solution doesn't have the same height in comparison to the challenge jpeg... I tried a lots but then I quit.

About the hero image with the grayscale is something I'm trying to fix, I've used content: "" to import and apply the effect on the image, but the transitions ins't smooth is something I've to fix in the future.

The dark mode is something I want to apply to my next challenge that I'm finishing, the one called SUITE LANDING PAGE. But I'm in a slow pace...

I didn't try yet SASS because I want to finish all HTML + CSS challenges before study something else, I want to try also Javascript when I reach this goal. I miss 8 challenges before study something different than HTML and CSS. Because I want to have a solid knowledge before dive into other stuff.

Thanks for the time you employed to write this comment, David.

Happy coding!

1

@y25sanchez

Posted

I learn so much looking at your codes, I love the hover effect that you used in the "gallery-grid".

Keep up the good work!

2

Please log in to post a comment

Log in with GitHub
Discord logo

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