nft card preview component

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

• We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

• To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

• For this demonstration we use css Grid to center the component.

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

• Now remove these styles, after removing you can able to see the changes

.card__container {
   margin: auto;
   margin-top: 50px;
}

• Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hi.. 👋, Congratulations on completing the challenge 🎉 .

I have some interest and feedback with your code

That i like:

1. I appreciate the similarity of your results with the design, a bit different in position and scale but still good
2. HTML is pretty good, not too nested and combination of semantic HTML👍
3. Responsive until galaxy fold screen size (280 x 653)px 👌
4. CSS Naming is also good, represent what is it for, like <div class="price"> for price section

My Feedback:

• Javascript is not needed in this solution, you can use only css on view hover

  • 1 - Remove main.js

  • 2 - change and add this to style.css

    .card_container .banner_image_container .hover_state {
      /* display: none; */
      position: absolute;
      width: 250px;
      height: 250px;
      margin-left: 25px;
      margin-top: -16rem;
      border-radius: 10px;
      background-color: var(--cyan-color);
      /* set opacity to 0 instead display none */
      opacity: 0;
      /* add transiton to make it more smooth */
      transition: opacity 0.3s ease-in-out;
    }
    
    .card_container .banner_image_container .hover_state:hover {
      opacity: 0.3;
      cursor: pointer;
    }
    

• Using grid you can make it center, change body and card-container in style.css to :

  body {
    background: var(--main-background);
    color: white;
    min-height: 100vh;
    display: grid;
    place-items: center;
  }
  
  /* card container */
  .card_container {
    background: var(--card-dark-blue);
    width: 300px;
    height: 500px;
    border-radius: 10px;
    margin: auto;
    box-shadow: 0px 2px 10px 0px var(--card-dark-blue);
    /* remove margin */
    /* margin-top: 50px; */
  }
  

Overall, well done - your innovative approach using js is actually good! 👏, hope it's helpful 🙌

Hi, Well done on completing the challenge! 👍

• I have more suggestions regarding your code that I believe will be highly beneficial for you.

🔎 Center an element both horizontally and vertically

Using flexbox:

Set the display property of the parent element to "flex" and use the "justify-content" and "align-items" properties to center the child element both horizontally and vertically. For example:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /* other styles for the child element */
}

I hope this information was beneficial for you! 😊

Happy coding🤖