Skip to content
OverviewSolutions
30
Comments
7

BreinerJT

@BreinerJT530 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

View more solutions

Latest comments

  • BreinerJT•530
    @BreinerJT

    Hello Jenny, congratulations on completing this challenge. U need to add object-fit: cover; to your img element, this will fix it. Also, maybe the errors in the shopping cart image are because in your head tag the styles.css are loading first then the styles from font awesome so probably moving the font awesome style tag above the style.css link will fix it.

    Marked as helpful
  • BreinerJT•530
    @BreinerJT

    Hello Ana, congratulations on completing this challenge.

    Your svg body is like this:

    <path fill="#FFF" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"></path>

    You need to delete the fill property after the path tag and your hover should work. This will only work on svg tags within the html code but not in svg tags in image tags.

  • BreinerJT•530
    @BreinerJT

    Hello Paulo, congratulations on completing this challenge. You should stop using events on the HTML code and use event listeners on javascript instead. You can read about this here

    Marked as helpful
  • BreinerJT•530
    @BreinerJT

    Hello Jose, Congratulations on finishing this challenge!

    For your .creation-items is not necessary create a class for every element like you do (.creation-item-one, .creation-item-two, etc), the pseudo class :nth-of-type will make this easy for you and help to maintain the html code cleaner. About the hover effect, your .creation-item:hover::before is ok but you need to create first a .creation-item:before, like this:

      .creation-item:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255);
    opacity: .7;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.creation-item:hover::before {
    content: '';
    position: absolute;
    width: 100%;
}

    This one make the transition go from left to right because .creation-item:before width is set to 0 and your .creation-item:hover::before has a widht set to 100%. U can also set the width to 100%, height to 0% in the.creation-item:before and height to 100% in the .creation-item:hover::before and this will make the transition go from top to bottom.

    Marked as helpful
  • BreinerJT•530
    @BreinerJT

    U can change the color just using color: (hsl(0, 36%, 70%)); in your class search__input.

    Marked as helpful
  • BreinerJT•530
    @BreinerJT

    You should limit the digits in the output, when you try operations with decimals results the output do not display correctly (e.g 1.2 / 3) everything else looks good.

View more comments