NTF-preview-card-component

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  This looks good. Alignment , spacing and hover effects all working. You have an empty H1 tag that is not doing anything. Change the Equilibrium text to an H1. and remove the empty one. You may have to re-style it to match the design. You also want to change the cursor to a pointer when the hover effects kick in.

  Hope this helps.

  Marked as helpful

  0
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Shawky, as you told me to give feedback on your all work, so I checked your work, and I saw that you made it good and you also made it responsive ,yes below 375px your card need some space around the card as it touches the edges of mobile screen as @brodiewebdt already told you. Apart from this I noticed some issues not only in design (little bit) but in your CSS code too.

  1. In your design, you image hover effect working perfectly but have you noticed that your image border is little bit circular and the cyan overlay with eye effect not taking appropriate space I mean your overlay is overflowing. Check this and I would love to get your feedback on my work click here

  2. In your code you are breaking coding rule or principle of DRY (Don't Repeat Yourself). So according to DRY you have to not repeat your code as I saw in your sheet.css you repeat .img-container rule more than twice and you also did below code

  .img-container:hover::after {
      content: "";
      display: block;
      width: 300px;
      height: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url(../images/icon-view.svg), rgba(0, 255, 247, 0.603);
      background-repeat: no-repeat;
      background-position: center center;
  }
  

  you are hovering over image but before ::after pseudo class and I think it should be in correct order and because you added this line before the parent class then it some how a sweet bug which seems to be good but not in actual. Because of this first issue is occuring.

  I hope you understand above issues and suggestions.

  Good Luck

  0