Meet Landing Page (Vanilla CSS - Logo Animation / Easter eggs)
Design comparison
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 icon
to 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
- @AdrianoEscarabotePosted over 2 years ago
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 helpful1@correlucasPosted over 2 years ago@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@AdrianoEscarabotePosted over 2 years ago@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 - @DavidMorgadePosted over 2 years ago
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 helpful0@correlucasPosted over 2 years ago@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 - @y25sanchezPosted over 2 years ago
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 GitHubJoin 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