nft card preview component

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 2 years ago

  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!

  00
• 

  dimar hanung•560

  @dimar-hanung

  Posted about 2 years ago

  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 🙌

  00
• 

  Panji•2,090

  @pperdana

  Posted about 2 years ago

  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🤖

  00