NFT Card Component Using Tailwind

Community feedback

• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, Hamid Ali Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • add favicon <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">

  • active-state of img

  <div class="item flex flex-col items-center">
        <a class="hover-effect" href="#">
          <span class="hover-effect-container">
            <span class="hover-effect-icon ">
              <span class="top-icon">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                  <path d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z">
                  </path>
                </svg>
              </span>
            </span>
          </span>
          <div class="p-2">
            <div class="ethereum-logo">
                 <img src="./images/image-equilibrium.jpg" alt="equlibrium" class="w-4/5 border-solid rounded-xl my-6">
           </div>
          </div>
        </a>
      </div>
  

  • hover effect

  .item {
      overflow: hidden;
      position: relative;
  }
  
  
  .hover-effect {
      display: block; 
      overflow: hidden;
      position: relative;
  }
  
  .hover-effect:before {
      background-color: rgba(44,45,48,0);
      content: "";
      position: absolute;
      height: 100%;
      left: 0;
      top: 0;
      width: 100%;
  }
  
  
  .hover-effect-container {
      left: 50%;
      position: absolute;
      top: -1.25rem;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      transition: .4s;
  }
  
  .hover-effect-icon {
      color: #fff;
      display: inline-block;
      font-size: .75rem;
      text-align: center;
  }
  

  • active-state of h3 & p span

  h1:hover, p sapn:hover{
      cursor: pointer;
      color: #25e6eb;;
  }
  

  a small transition will be more attractive.

  • this is my solution of this challenge live,repo

  I hope it will work. Happy coding.

  1

  ---

  

  Hamid Ali•180

  @HamidAliZainPosted about 2 years ago

  @faha1999 Thanks

  0