Product Preview Card Challenge with flexbox

Community feedback

• 

  sivin•350

  @Sivin-WiPosted about 1 year ago

  • Code Reformat :

       <div class="btn">
            <button><i class="fa fa-shopping-cart" aria-hidden="true"></i>&nbsp;Add to Cart</button>
         </div>
    

  Important thing : "fa fa-shopping-cart" . take icon from " font awesome 4.7 🤔" icons.

  • Hover Effect:

    .btn> button {
        padding: 1em 4.4em;
        border-radius: 0.5em;
        background-color: hsl(158, 36%, 37%);
         border: none;
        color: hsl(0, 0%, 100%);
       }
    
    btn>button:hover {
        background-color: hsl(169, 38%, 25%);
       cursor: pointer;
    }
    

  • Try to learn FlexBox
  • Try It if it Work or not 🐱

  1

  ---

  

  MatthewA77•40

  @MatthewA77Posted about 1 year ago

  @Sivin-Wi

  Hi, thank you for the feedback. Can you explain the meaning of your solution :)

  0

  

  sivin•350

  @Sivin-WiPosted about 1 year ago

  @MatthewA77

  keep Learning & Try to catch me 👻

  0

  

  sivin•350

  @Sivin-WiPosted about 1 year ago

  @MatthewA77 use flexbox to align items faster way & for using svg code first try to save svg code to the file and add extension to file while saving eg: " img.svg " and use <img> element to add img src to " src attribute " . don't add svg code directly on html code it couldn't work ✊

  0

  

  sivin•350

  @Sivin-WiPosted about 1 year ago

  @MatthewA77

  don't add space between "button:hover"

  0

  

  MatthewA77•40

  @MatthewA77Posted about 1 year ago

  @Sivin-Wi

  Okayyy thanks for the tips on the svg stuff. I will catch you hahahaha 😎😎

  0
• 

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  Hi Matt, great job!

  If you want to add hover effect to the button you have to indicated it like this #add-to-cart:hover {}

  And if you want to center the card just remove margin from your body tag and add this:

  body {
     display: grid;
     place-items: center;
     min-height: 100vh;
  }
  

  Let me know if these was helpful

  1

  ---

  

  MatthewA77•40

  @MatthewA77Posted about 1 year ago

  @MaximilianoDanielGarcia

  Thanks for the feedback, I already apply the :hover to the button through CSS but it only works when I hover my cursor on the svg element

  0

  

  MaximilianoDanielGarcia•1,980

  @MaximilianoDanielGarciaPosted about 1 year ago

  @MatthewA77

  I review your code and you have one space between the id and the hover selector

  #add-to-cart :hover {
      background-color: #1E4033;
      cursor: pointer;
  }
  

  Just, remove it and that's it.

  1

  

  MatthewA77•40

  @MatthewA77Posted about 1 year ago

  @MaximilianoDanielGarcia

  Wow I never expected that haha.. Thanks btw for the solution, very much appreciated.

  0