Skip to content
OverviewSolutions
26
Comments
12
Cosmo
@cosmoart

All comments

  • Sai•50
    @A-C-SaiSubmitted over 2 years ago

    Hello Friends,

    I got a few questions!! sorry for the long question :( ...

    1. To display the hover/focus styles when hovering over the cube image, I've initially added the hover styles using the ::before pseudo-element and set the opacity to 0. Then set the opacity to 1 when hovered. (Continuation of the question after code block).
    <div class="avatar">
          <img
            class="cube-img"
            src="./images/image-equilibrium.jpg"
            alt="image of cube balanced on one of it's vertex and at equilibrium"
          />
</div>

    .avatar::before {
  content: url("./images/icon-view.svg");
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 255, 247, 0.6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.1s ease-in;
}

.avatar:hover {
  cursor: pointer;
}

.avatar:hover::before {
  opacity: 1;
}

    I initially did .avatar:hover .avatar::before { opacity: 1;} instead of .avatar:hover::before { opacity: 1;} as I thought .avatar:hover .avatar::before { opacity: 1;} meant when you hover over the .avatar div changes will be made .avatar::before, but nothing changed. Could someone explain why my initial code/ thinking was incorrect?

    1. In my HTML, I added the raw SVG code using <svg> to display the SVG image. Is there any other alternative?

    2. Any best coding practices I can improve on?

    Please let me know anything else I haven't mentioned above and could improve.

    THANKS IN ADVANCE (:

    NFT preview card component

    1
    Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    0
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    1
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    0
  • Catherine•110
    @boba-milkteaSubmitted over 2 years ago
    • Changed the rating buttons to radio buttons
    • Reconstructed the style sheet with global variables If anybody knows a better way to renew the page after submitting the rating, I'll appreciate it.

    Interactive rating component using flexbox

    2
    Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    0
  • Payal Deshmukh•20
    @DeshmukhPayalSubmitted over 2 years ago

    While designing a solution for a 3-column-preview-card I faced two difficulties:

    1. using 'margin: auto; ' didn't bring the container of cards to the center
    2. display:flex; justify-content: center; align-items: center; This brought the container to the center horizontally, but vertically it was still stuck to the top of the screen. So had to use 'margin-top:9rem; ' to bring it to the center. Why both the cases didn't work properly? Is there any other solution to bring the container to the center? When hovered on Learn More button size of the respective card is slightly increasing. All feedbacks and comments are welcome.

    3-column-preview-card-component

    1
    Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    0
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    0
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    0
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    1
  • Cosmo•590
    @cosmoartPosted over 2 years ago

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

    0
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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
    0
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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👍

    0
  • Cosmo•590
    @cosmoartPosted over 2 years ago

    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 😁

    1