Cosmo

Latest comments

• 

  Sai•50

  @A-C-SaiSubmitted over 2 years ago

  

  NFT preview card component

  #accessibility#styled-components

  1

  92
  

  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
• 

  Shikhar Srivastava•210

  @shikharsSubmitted over 2 years ago

  

  NFT preview card component

  1

  50
  

  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
• 

  Antoine Estievenart•240

  @Kehs719Submitted almost 3 years ago

  

  Article preview component

  1

  30
  

  Cosmo•590

  @cosmoartPosted almost 3 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 almost 3 years ago

  

  Interactive rating component using flexbox

  2

  60
  

  Cosmo•590

  @cosmoartPosted almost 3 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 almost 3 years ago

  

  3-column-preview-card-component

  1

  61
  

  Cosmo•590

  @cosmoartPosted almost 3 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
• 

  B Naveen kumar reddy•50

  @Naveen6677Submitted almost 3 years ago

  

  Frontend Mentor | Interactive rating component

  1

  50
  

  Cosmo•590

  @cosmoartPosted almost 3 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