Frontend Mentor - Huddle landing page with single introductory section solution

This is a solution to the Huddle landing page with single introductory section 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
• Flexbox
• Grid
• Responsive Design
• CSS Animations
• Media queries

What I learned

I learned how to use SVG/Paths in html/css. Using this knowldge I recreated the website logo as a SVG in Illustrator(the logo was a png image) and make a single path element making possible to hover it and apply effects like transitions and fill. I've learned also how can I disable hover effect in touch/mobile devices using the media query property @media (hover: hover) {}. I also applied a animation on logo, where the icon flip and rotate while logo wordmark is hovered.

Useful resources

• HTML Emojis - HTML Emojis
• SVG Path Converter - SVG Path Converter