Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component 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

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: Live Demo

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

• CSS BEM classes Names

<main class="card">
<div class="card__info">
  
      <p class="card__info--title">  Perfume</p>
      <h1> Gabrielle Essence Eau De Parfum    </h1>
      <p> A floral, solar and voluptuous interpretation composed by Olivier Polge, 
        Perfumer-Creator for the House of CHANEL. 
      </p>
  
</main>

• Picture element to make image responsive in html

  <picture class="card__picture">
      <source media="max-width:767px" srcset="./images/image-product-mobile.jpg" alt=" Gabrielle Essence Eau De Parfum   ">
      <img  src="./images/image-product-desktop.jpg" alt="parfum" title=" Gabrielle Essence Eau De Parfum  ">
   </picture>  

Useful resources

• HTML Notes for professional book - HTML Notes for professional book help me in many important Notes.
• CSS BEM - helped me in name classes in best pratice

Author

• Frontend Mentor - @zenab12
• Twitter - @zenabmo90454136
• Linkedin -@zienabmuhammad