Huddle Single Introductory Section 🎯 [ SEMANTIC HTML - TAILWIND CSS ]

Tailwind can't detect which classes are being used, because it can't find your HTML file. If you update the content field in tailwind.config.js to include the path of index.html, it should work!

Is there a reason for the margin-left on the container of the mockup image? I think it looks much better without that declaration.

Hey, there! 👋

Congrats on completing the challenge. I really liked your attention to details in your HTML and CSS. Also, I do have suggestions as well:

HTML:

• It's better use aria-hidden: true on decorative images and icons, making it unreachable for screen readers. You can read more here on MDN Docs
• Also, setting an arbitrary size for images <img width="709" height="506" > might not be a good idea since they can cause weird overflows on small devices

CSS:

• I see that you used fancy link in your attribution section. But, the way you implemented might impact the GPU performance. In other words, it's very costly to use width property when animating things. Also, you might have noticed not smooth, but quite rough animation on hover. I would rather switch to transform or scale properties.

This code:

.attribution a::before {
      width: 0%;
}

.attribution a:hover::before {
      width: 100%;
}

can be turned into this:

.attribution a::before {
      transform: scaleX(0);
      transform-origin: < left | right >;
}

.attribution a:hover::before {
      transform: scaleX(100%);
}

It might not boost your website performance, but taking care and preventing this issue can help you in the long run.

Good luck on your coding journey!

Your solutions is 99.9% perfect, the best i've ever seen, well done!