This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Preview function
  • What I learned
  • Built with
  • Author

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

• Solution URL: GitHub code solution URL
• Live site Url : Vercel QR code app

• Mobile Home page

• Mobile Sidebar

• Mobile Sidebar active options

• Desktop Home page

• Desktop topbar active option

1. Creating a Click Outside Directive in Angular:

   • Implemented a click outside directive within Angular to facilitate the closing of modal windows, tooltips, or dropdown menus.
   • Linked the directive to the HTML tag to ensure that clicking outside the designated area triggers the closing action.
   • Ensured that clicking within the designated area keeps the component open.

2. Utilizing '@angular/animations' for Basic Animations:

   • Learned to integrate '@angular/animations' to animate sidebar actions in TypeScript.
   • Manipulated the opacity of a layer using triggers, states, transitions, and animations.
   • Implemented animations for opening and closing actions, enhancing user experience and interface interactivity.

3. CSS Transformations and Animations:

   • Refreshed understanding of CSS transformations for manipulating the positioning of HTML elements at various keyframes.
   • Employed CSS animations to define animation properties, enabling keyframes to animate according to specified parameters.
   • By mastering these techniques, I've enhanced my ability to create dynamic and interactive user interfaces within Angular applications.

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• @media
• @angular/animations
• @KeyFrame
• Angular

• Github Profile: Kennedy-was-taken
• Frontend Mentor : @Kennedy-was-taken