Frontend Mentor - Meet landing page solution!

This is a solution to the Meet landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Screenshot

Links

• Solution URL: Frontend Mentor Solution
• Live Site URL: Live Site at Vercel

My process

Built with

• Semantic HTML5 markup
• BEM
• Grid
• Responsive Design

What I learned

For sure the best thing I learned in this challenge, was CSS property 'order', because using this property I was able to animate the logo on hover using the selector "~" affecting one div that was before the element hovered, in this case was the logo icon that get animated when I hover on the word "meet".

Example:

".meet { order: 2; transition: ease-out 1s; }

/* logo hover effect */ .meet, .icon { transition: ease-out 1s; }

.meet:hover~.icon { transform: rotate(720deg); filter: blur(1px); transition: cubic-bezier(0.65, 0.05, 0.36, 1) 1s; }

.icon:hover { transform: rotate(-720deg); filter: blur(1px); transition: cubic-bezier(0.65, 0.05, 0.36, 1) 1s; }"

Useful resources

• W3 Schools - Order - Order Property

Author

• Github - correlucas
• Frontend Mentor - @correlucas