kaioloureiro/huddle

Huddle Landing Page

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Solution Page on Frontend Mentor
• Live Site URL: Huddle Landing Page – Demo

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

Learned how to work a little bit with svg, changing it colors:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
	<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" />
</svg>

svg {
	fill: hsl(300, 69%, 71%);
}

Continued development

Implementing full responsiveness, which is still a weakness of mine, is in my plans.

Author

• GitHub - Kaio Loureiro
• Frontend Mentor - @kaioloureiro
• LinkedIn - Kaio Loureiro