perfume-card

Community feedback

• 

  P

  Scott•310

  @ldgPosted about 1 month ago

  Nice work on this challenge, you got the overall design to work, as well as the responsive elements. The layout changes with the screen size too, so well done.

  I have some suggestions that I hope are helpful:

  1. On the price section where the card displays the new and old price; you built that by setting each price in separate <p> elements.

  A better way to do this is to put both prices in the same <p> tag and wrap the old price in a <span>. In this way you can more easily target the old price, without adding additional space with a second paragraph.

  To vertically align the old price to the center of the new price, you could style the containing <p> tag and set it to display: flex; align-items: center;

  The markup might look like this:

            <p class="number">$149.99</p>
              <span class="number old">$169.99</span>
            </p>
          </div>
  

  2. On the button element, I notice you added the cart icon directly to the <button> element. A better way of adding an icon to the button, is use the ::before psuedo-element to add the icon with CSS.

  To do this, first you'd want to wrap the "add to cart" text in a span so you can select it directly with css. Then in your CSS you can do something like this:

  button.button span::before {
  		content: url('./images/icon-cart.svg');
  		margin-right: 11px;
  	}
  

  NOTE: In the above example we're using the url() function to add the link to the cart icon. The "content" attribute is where you add what ever you want before the targeted element. For example if you wanted add the letter p before the button, you'd write it like this: content: 'p';

  0