GracilianoOG / fementor-product-card

My solution for the Product Preview challenge at Frontendmentor.io

💻 Product Preview Component | Frontend Mentor

This is my solution for the Product Preview Card Component Challenge from Frontendmentor.io, made with HTML and plain CSS.

It was a very fun and challenging project, I wanted to put BEM in practice by putting the full names of the classes to really fix this metodology in my head.

I had some difficulties but after reading the documentations from MDN and W3Schools I managed to finish it on my own. Also, since I'm a free user, I didn't get the Figma file so it adds an extra layer of challenge for the completion.

🔨 Technologies

• HTML
• CSS + Custom Properties
• Flexbox and Grid Layout
• BEM
• Mobile First
• Coded with Visual Studio Code

🖼️ Screenshots

You can check the project's repository here or the live preview here.

💻 Desktop Layout

📱 Mobile Layout

📌 More Info

Challenge from Frontend Mentor made by me, based on the design provided.

🔗 Links

• 🔍 Frontend Mentor
• 🔍 Product Preview Challenge
• 🔍 Heading Tags
• 🔍 Heading Levels - Accessibility
• 🔍 Picture Tag
• 🔍 Box Alignment - Flexbox
• 🔍 Article Tag
• 🔍 Section Tag
• 🔍 Lang Attribute