Skip to content
OverviewSolutions
26
Comments
12
Cosmo
@cosmoart

All comments

  • Cosmo•590
    @cosmoart

    Hi Sai!, Congratulations on completing this challenge, it looks great!, .avatar:hover .avatar::before { opacity: 1;} Translates to: When hovered in .avatar you will give an opacity of 1 to the ::before child from .avatar named .avatar.

    It would be something like this:

    	<div class="avatar">
<div class="avatar"></div>
</div>

    You can see it more clearly by hovering over the selector from a code editor like Visual Studio Code.

    Another way to display the SVG is using the <img> tag, something like this:

    <img src="image.svg" alt="...">

    If you want to know more about the differences is to use each one you can see this question on stackoverflow

    I hope you find it useful, Happy coding! 👋

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hi Shikhar!, Congratulations on completing this challenge!, The card does not take up the entire height of the screen: it has the size that its children together with the gap make it have. You can see it clearly from the devtools.

    My recommendation would be that you use relative units and change the gap to a height along with a justify-content: space-between

    As a last recommendation, personally I don't like the shadow that the card has: it is very "dirty" and striking, I would change it for something more elegant and discreet, something like this:

    box-shadow: 0 0 10px 10px hsl(217deg 79% 6% / 15%);

    I hope this helps you, Happy coding! 👋

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hi Antoine!, Your solution looks great, The reverse animation does not work because there is no animation called opacityOut, I recommend that in this case you use transitions that are simpler and easier to use.

    I hope this helps you, happy coding 😁

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hey!👋 It looks great!... You can use input radios and forms to take advantage of the use of input submit, the required attribute, and to improve accessibility. In addition, you can display the value selected by the user in a very easy way:

    "You selected " + document.querySelector('input[name="feedback"]:checked').value + " out of 5"

    If you want you can review how I made the JS for this challenge

    I hope this is useful for you... happy coding 😁

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hi Payal! Looks great!... Both cases didn't work because the body didn't have enough height to center its elements. If you want to center a card like the one in this challenge, I recommend you use this method:

    .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    Regarding the change in size of the cards when hovering on the button, it is because you are using border: which increases the size of the button, forcing the other boxes to do so as well. To fix it you can use outline or use an invisible border:

    button{
    border: 2px solid transparent;
}
button:hover{
    border: 2px solid red;
}

    As a last recommendation, I suggest you use a more semantic html: you can use <main>, <section>, <figure> etc.

    I hope this is useful for you... Keep it up👍

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hi Naveen! Congratulations on completing this challenge... You can use input radios and forms to take advantage of the use of input submit, the required attribute, and to improve accessibility. In addition, you can display the value selected by the user in a very easy way:

    "You selected " + document.querySelector('input[name="feedback"]:checked').value + " out of 5"

    I hope this is useful for you... Keep it up👍

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hi Larisa! Congratulations on completing this challenge... There are several better ways to center the card, I personally recommend using the position: absolute method:

    main{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

    I also suggest you use a more semantic HTML, you can use <main>, <section> or <article> etc.

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hi! Eriks, It looks great!... Here are some pros and cons. If you want more complete information you can visit this stack overflow question

    Pros:

    • You save an HTML tag.
    • It is much easier to handle from the CSS
    • You can put content on top of the image more easily than using <img>

    Cons:

    • You cannot use the alt attribute.
    • Search engines and screen readers can not read them
    • Users will not be able to select the image
    Marked as helpful
  • Cosmo•590
    @cosmoart

    I don't know why the solution screenshot is showing the two cards lol

  • Cosmo•590
    @cosmoart

    Hey Aleksandra! It looks great!... Here are some suggestions:

    • Document should have one main landmark, Contain the component with <main>.
    • I recommend using align-items: flex-start; in the .container for a better visualization in the mobile version.

    I hope this is helpful to you... Keep it up👍

    Marked as helpful
  • Cosmo•590
    @cosmoart

    Hey Melvin 👋! It looks great!🎉 ... My suggestion would be to make the card a bit smaller on the tablet version, you could also consider using the <picture> element to make the images responsive without the need for css.

    I hope this is helpful to you... Keep it up👍

  • Cosmo•590
    @cosmoart

    Hi Kapline! 👋 Congratulations on completing this challenge... I also had the problem of using img for the stars, luckily I solved it by editing the svg of the stars and using background in the before pseudo-element. I address this issue in my repository: https://github.com/cosmoart/Social-proof-section-solution#what-i-learned

    I hope this helps you 😁