Tarjeta flotante Ethereum

Abrir en el editor Publica tu código

Recomendado

8 February 2025

Plantilla HTML de página de pago de tarjeta Visa

21 September 2024

<div class="container">
    <div class="card">
      <svg class="img" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1"
        shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality"
        fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Layer_x0020_1">
          <metadata id="CorelCorpID_0Corel-Layer"></metadata>
          <g id="_1421394342400">
            <g>
              <polygon fill="#343434" fill-rule="nonzero"
                points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"></polygon>
              <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33">
              </polygon>
              <polygon fill="#3C3C3B" fill-rule="nonzero"
                points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"></polygon>
              <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"></polygon>
              <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"></polygon>
              <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"></polygon>
            </g>
          </g>
        </g>
      </svg>
      <div class="textBox">
        <p class="text head">Ethereum</p>
        <span>Cryptocurrency</span>
        <p class="text price">$2,919.87</p>
      </div>
    </div>

</div>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #212121; 
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; 
}
.card {
    width: 195px;
    height: 285px;
    background: #313131;
    border-radius: 20px;
    ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    transition: 0.2s ease-in-out;
  }
  
  .img {
    height: 30%;
    position: absolute;
    transition: 0.2s ease-in-out;
    z-index: 1;
  }
  
  .textBox {
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    transition: 0.2s ease-in-out;
    z-index: 2;
  }
  
  .textBox > .text {
    font-weight: bold;
  }
  
  .textBox > .head {
    font-size: 20px;
  }
  
  .textBox > .price {
    font-size: 17px;
  }
  
  .textBox > span {
    font-size: 12px;
    color: lightgrey;
  }
  
  .card:hover > .textBox {
    opacity: 1;
  }
  
  .card:hover > .img {
    height: 65%;
    filter: blur(7px);
    animation: anim 3s infinite;
  }
  
  @keyframes anim {
    0% {
      transform: translateY(0);
    }
  
    50% {
      transform: translateY(-20px);
    }
  
    100% {
      transform: translateY(0);
    }
  }
  
  .card:hover {
    transform: scale(1.04) rotate(-1deg);
  }

Tarjeta flotante Ethereum

Recomendado

Información de la tarjeta

Plantilla HTML de página de pago de tarjeta Visa

Tarjeta Shake

HTML

CSS

JS

Recomendado

Información de la tarjeta

Plantilla HTML de página de pago de tarjeta Visa

Tarjeta Shake

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS