Skip to content
OverviewSolutions
5
Comments
3

Krysia Sherburne

@klduplessBaton Rouge, LA120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Krysia Sherburne•120
    @kldupless

    Wow, this looks great!

    To match the challenge design better, I would make a few tweaks.

    It looks like you are missing the drop shadow on the profile card. It's very subtle in the original design so it can be hard to tell!

    .card {
....
box-shadow: [put offset, blur radius, and color here]
}

    I also think the border-radius on the card needs to be a little bit bigger to match the design.

    Lastly, replace the h1 on the name & age, and h2 on the followers, likes, and photos numbers with a span or p element for proper semantic HTML - heading tags should be used for denoting structure, rather than resizing text. More on that here.

    Marked as helpful
  • Krysia Sherburne•120
    @kldupless

    You should add alt text to the cart icon to fix the accessibility error. E.g.:

    <img src="/images/cart.svg" alt="cart">

    Instead of setting individual widths on every child element of .preview-card__right, you can set padding on the parent element to better match the design and make the price aligned to the left.

    .preview-card__right
{
   flex: 1 1 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
padding: 1em;
}

    Then remove width from ..preview-card__header, .preview-card__title, .preview-card__description, .preview-card__price, and .preview-card__buyButton

    Marked as helpful
  • Krysia Sherburne•120
    @kldupless

    When you have an icon inline with text like that, you can either set a specific class for the image or use a child combinator to make the icon the same height as the text.

    E.g, this will target every image that's a child of a button element and make it the same height as the text:

    button > img {height: 1em}

    Or you can put the property on the image via a class: .button-icon {height: 1em}

    Marked as helpful