Submitted over 1 year ago

Responsive QR code component | Semantic HTML & Vanilla CSS, BEM

Johan•100

@JohanChereau

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone👋

I'm excited to share my solution to my first challenge on Frontend Mentor! 🎉

I would love to hear your feedback on the readability, structure, and overall quality of my code. Improving in these areas is a priority for me, and I'm eager to learn from your insights.
Additionally, if you have any suggestions or tips regarding accessibility, responsiveness or anything, please don't hesitate to share them.

Thank you in advance for your time. Your feedback will be invaluable as I continue my journey as a web developer. 🙏

Community feedback

Account deleted

You nailed it!

In case you didn't know you can also separate the colors from thehsl function. Having them separately let's you be more flexible with your opacity value.

Like this:

:root {
/* Define just the color values */
--clr-neutral-700: 218, 44%, 22%;
}

.title {
/* Now it's much organized if you want to work with the opacity of the above color */
--title-text: hsl(var(--clr-neutral-700), 0.8);
    
color: var(--title-text);
}

Marked as helpful

Chimobi Ekwunife•50
@MrEkwunifePosted over 1 year ago
Nice job 👍. I love it
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord