More practice with Figma

Community feedback

• 

  Mo•840

  @MohamedAridahPosted over 2 years ago

  Hello @12Kentos, Good job it's almost identical to the design👍👏

  However i have some notes for you:

  • use min-height: 100vh for the body instead of using height: 100vh. This will allow your content to take more vertical height if content needed to. So user can see all the content.

  • instead of using these styles for .eth-cube-img

  .eth-cube-img {
      width: 30.02rem;
      height: 30.02rem;
      border-radius: 0.8rem;
  }
  

  you can just give the <img> the full width and the padding of .eth-card-container will make sure that there are space around the image. So your styles for .eth-cube-img could be:

  .eth-cube-img {
      width: 100%;
      border-radius: 0.8rem;
  }
  

  • for the hover effect you can Delete .eth-eye-img img tag and .eth-img-container styles and try pseudo elements like ::after or ::before like:

  .eth-img-container::after{
  	content: url(./images/icon-view.svg);
  	position: absolute;
  	background-color: rgb(0 255 247 / 45%);
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  	top: 0;
  	left: 0;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	cursor: pointer;
  	border-radius: 1rem;
  	overflow: hidden;
  	transition: .3s ease;
  }
  

  .eth-img-container:hover::after {
      opacity : 1;
  }
  

  • instead of using <p> element for .eth-title you can use <h1> because this is a a heading.

  • use <a> element instead of span for .eth-auth-name. It's more Semantic and on click this name this may lead to another page.

  • you can see My solution for this challenge it may be helpful for you..!

  I hope this wasn't too long for you, hoping also it was useful😍.

  Goodbye and have a nice day.

  Keep coding🚀

  Marked as helpful

  1
• 

  Nathaniel Adiah•330

  @nathanieladiahPosted over 2 years ago

  Good work on the design. The issue is that the eye image is on top of the cube image. So hovering on the eye stops it from registering a hover on the cube image. Very simple fix is to add a pointer-events: none; to the .eth-eye-img class. That makes the cursor not interact with that element but it can still interact with elements under it.

  Another solution: Since you're already using the eye image as a background image in your .eth-eye-img class, I'd suggest changing to a <div> instead of an <img> tag. That way you could set the overlay color as the background color on that element. Then set the default opacity of that div to zero and change the opacity of that div to 0.5 on hover. That way the eye and the color would overlay the cube img.

  Marked as helpful

  0