Product preview card component - Solution

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Roland, well done here! I'll try to answer your questions:

  1. About the icon, there actually is already an icon provided in this challenge (icon-cart.svg), and all you need to do is insert it into the HTML, like this:

     <button>
         <img src="images/icon-cart.svg" alt="">
          <span class="product__cta-text / fw-bold">Add to Cart</span>
     </button>
     

     If you want to use Font Awesome, I believe you might need to set up an account with them, and then there should be a link that they provide for you to put inside the head tag.

  2. To make only the left side corners of an image rounded, use border-radius: 10px 0 0 10px. In the mobile view for the top part only, use border-radius: 10px 10px 0 0.

  Looking at your component in the inspector, I think you can try using display:flex to position your text and image sections, because right now I see you using float and that can be hard to make adjustments. You can have a look at how flexbox can be used in my solution: https://www.frontendmentor.io/solutions/card-component-using-cube-css-tNaBY0y_Nx

  Marked as helpful

  0

  ---

  

  Roland Jae V. Patalita•20

  @Rjae07Posted over 2 years ago

  @elaineleung

  Hello Maam Elaine,

  Thank you for the feedback will remember this in taking my next challenge.

  Thanks once again!.

  1
• 

  devnnga•20

  @devnngaPosted over 2 years ago

  For the rounded corners, use border - right top and border - right bottom to target those specific areas.

  Marked as helpful

  0
• 

  ColonelSandurz•90

  @ColonelSandurzPosted over 2 years ago

  Hi Roland

  I am new to this site but I can at least assist I hope with question 2. Using border-radius defaults to manipulating all four corners, but you can specify a particular corner as shown below.

  border-top-left-radius: 10px;

  border-bottom-left-radius: 10px;

  I am not sure if there is another way to do this ( I know in CSS there are many ways to do one thing) but this works fine for me.

  Marked as helpful

  0

  ---

  

  Roland Jae V. Patalita•20

  @Rjae07Posted over 2 years ago

  @ColonelSandurz

  Thank you for the feedback, will remember this with my next challenge.

  Thank you!.

  0
• 

  João Júnior•110

  @joao-juniorPosted over 2 years ago

  A solução mais simples para incluir o icone dentro do botão é adicionar uma tag img dentro do button e você pode colocar o display flex no button para arrumar o posicionamento:

  <button class="button"> <img src="images/icon-cart.svg"> Add to Cart </button>

  0