nft preview card using HTML and CSS

Community feedback

• 

  Clément Creusat•1,655

  @ccreusatPosted almost 3 years ago

  Hi !

  I would suggest :

  * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
  }
  

  box-sizing: border-box will be helpful for the box model and to not calculate width/height of elements (ex: width - padding - border etc...) find more here

  • You could add a padding: 24px; on your main-container and remove all margin-left; margin-right you have on your elements

  • You could wrap your image width a <div> and put it in position:relative;

  • Then add another div inside and wrap the icon svg :

  {
  display: flex;
      opacity: 0;
      cursor: pointer;
      position: absolute;
      inset: 0;
      place-items: center;
      place-content: center;
  }
  

  • Call the SVG like this :

  <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" fill-rule="evenodd">
              <path d="M0 0h48v48H0z"></path>
              <path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="#FFF" fill-rule="nonzero"></path>
            </g>
          </svg>
  

  • width: 105%on your .price-time is not necessary and get the design worse
  • same on .by-created, width:100% is not needed because it is a block element find more here

  Hope this comment will be helpful :)

  Marked as helpful

  0

  ---

  

  Rafi Pramasukma Ekhaputera•180

  @rafiputra2000Posted almost 3 years ago

  @ccreusat thank you very very helpful, good luck always sir 👍 👍

  1