Skip to content
OverviewSolutions
12
Comments
4
Deivid Esteferson
@deivid-esf

All comments

  • Taylor•90
    @taylorkondrlaSubmitted over 1 year ago

    I enjoyed doing this challenge. I cannot figure out how to get the tiny white line removed from underneath the photo on the left if anyone has any feedback that would be greatly appreciated!

    Product Preview Card Using HTML and CSS

    3
    Deivid Esteferson•230
    @deivid-esfPosted over 1 year ago

    Heyy, good job!!

    That line is there because you put a image inside a div, and at css you defined just the lenght (width) of image. You can solve this using: .img img{ height: 100%; }.

    Other way you can use to solve this is defined the size of a div and put the image as background, like this:

    <html>
<body>
<div class="banner"></div>
</body>
</html>

css:
.banner{
width: 100px;
height: 100px;
background-image: url('link-image');
}
    Marked as helpful
    0
  • Javier014334•40
    @Javier014334Submitted over 1 year ago

    This is my second challenge, if you have any suggestions, don't hesitate to let me know😁

    My Second Challenge

    2
    Deivid Esteferson•230
    @deivid-esfPosted over 1 year ago

    Hey Javier, good job on this challenge!

    I noticed that the elements of the second container are next to each other and there is a blank space left. If you use FlexBox, this problem can be solved.

    You can use the 'justify-content: space-between' property to distribute the items evenly, with the first item at the beginning and the last item at the end. Hope this can help you! Good luck on the other challenges.

    container { //second container with the informations
display: flex;
justify-content: space-between;
}
    Marked as helpful
    0
  • Jair Rodriguez•310
    @JairthSubmitted over 1 year ago

    It was a good challenge and to make it more interesting I used Gsap to add some simple animations, although it could have been done with CSS, but trying something new never hurts. Thanks!

    Results Summary Component Animation

    1
    Deivid Esteferson•230
    @deivid-esfPosted over 1 year ago

    Hey, Jair! Good job! I loved the animation when clicked on button. If you'll allow me to give you feedback, don't forget to review your project's color contrasts, to improve readability and visibility in your page. Good luck in others challengs :)

    Marked as helpful
    0
  • Deivid Esteferson•230
    @deivid-esfPosted over 1 year ago

    Oi, Raul! Você pode adicionar uma "div" por trás do elemento que vai receber o "border-radius". Daí para adicionar a cor, é só colocar o "background-color" na "div". Dessa forma, quando o elemento receber as bordas, a cor que está no fundo da div vai "preencher" o espaço deixado pelo arredondamento.

    Qualquer coisa pode mandar dm que te ajudo melhor com um exemplo :)

    Marked as helpful
    0