galaxy/Cards/jvcrz_quiet-robin-20.html

<div class="card">
  <div class="gradient"></div>
  <p class="title">uiverse</p>
  <p class="label">
    ui/ux designer trying to be an fullstack devolper<br />
    mom i love u
  </p>
  <div class="ico">
    <svg
      height="24"
      width="24"
      viewBox="0 0 108 152.01"
      xmlns="http://www.w3.org/2000/svg"
    >
      <svg
        viewBox="0 0 108 152.01"
        xmlns="http://www.w3.org/2000/svg"
        data-name="Camada 2"
        id="Camada_2"
      >
        <defs></defs>
        <g data-name="Camada 2" id="Camada_2-2">
          <path
            d="M108,28.84v-.7c0-15.55-12.6-28.14-28.15-28.14H29.18c-.42,0-.84.01-1.26.03C12.43.69.08,13.4,0,29.03c.06,10.2,4.92,19.15,12.21,24.22-7.34,4.89-12.21,13.54-12.21,23.38,0,10.61,5.65,19.82,13.95,24.45C5.76,105.87.27,114.17.02,123.66H.02c.18,7.75,3.4,14.73,8.5,19.84.61.61,1.25,1.2,1.92,1.75.18.17.37.31.56.45,5.12,3.87,11.67,6.23,18.81,6.31,0,0,.01.01.02,0,.39,0,.78-.01,1.17-.01.01.01.02.01.03,0,.02.01.03.01.05,0,.04.01.07.01.11,0,.43-.01.86-.03,1.28-.06,15.65-1.05,27.98-12.99,27.98-27.57,0-9.89,0-18.15-.03-25.01,5.04,4.41,11.64,7.07,18.86,7.07,13.5,0,24.83-9.32,27.89-21.87h0c.41-2.82.67-5.68.77-8.58h0c-.57-9.6-5.85-17.93-13.57-22.71,8.18-5.05,13.63-14.11,13.63-24.43ZM47.47,123.51c0,8.53-6.92,15.45-15.45,15.45h-1.05c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h16.5v17.55ZM47.47,92.47h-16.5c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h16.5v33ZM47.47,45.97h-16.5c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h16.5v33ZM77.02,92.51h0c-9.11,0-16.5-7.39-16.5-16.5s7.39-16.5,16.5-16.5h0c9.11,0,16.5,7.39,16.5,16.5s-7.39,16.5-16.5,16.5ZM77.02,45.97h-16.5V12.97h16.5c9.11,0,16.5,7.39,16.5,16.5s-7.39,16.5-16.5,16.5Z"
            class="cls-1"
          ></path>
        </g>
      </svg>
    </svg>
    <svg
      height="24"
      width="24"
      viewBox="0 0 139.79 159.78"
      xmlns="http://www.w3.org/2000/svg"
    >
      <svg
        viewBox="0 0 141.27 159.36"
        xmlns="http://www.w3.org/2000/svg"
        data-name="Camada 2"
        id="Camada_2"
      >
        <defs></defs>
        <g data-name="Camada 2" id="Camada_2-2">
          <path
            d="M0,0l2.3,27.43h108.91l-2.51,30.22H5.44l2.45,27.43h98.53l-3.04,36.56-33.07,9.24-32.29-9.02h0s-1.84-22.14-1.84-22.14H9.19l1.29,14.44,2.6,29.2,6.41,1.72-.13.04,50.95,14.24,50.94-14.24h-.02s5.82-1.63,5.82-1.63l1.25-.34,2.61-29.21,2.58-28.86,2.45-27.43,2.7-30.22h.12l2.51-27.43H0Z"
            class="cls-1"
          ></path>
        </g>
      </svg>
    </svg>
    <svg
      height="24"
      width="24"
      viewBox="0 0 141.27 159.36"
      xmlns="http://www.w3.org/2000/svg"
    >
      <svg
        viewBox="0 0 139.79 159.78"
        xmlns="http://www.w3.org/2000/svg"
        data-name="Camada 2"
        id="Camada_2"
      >
        <defs></defs>
        <g data-name="Camada 2" id="Camada_2-2">
          <path
            d="M136.99,0H2.8C1.16,0-.13,1.4,0,3.03l11.31,136.3c.23,2.72,2.11,5.02,4.73,5.78l47.73,13.8c4,1.16,8.25,1.17,12.27.05l47.29-13.28c2.64-.74,4.54-3.04,4.78-5.77L139.78,3.04c.14-1.63-1.15-3.04-2.79-3.04ZM112.56,43.8c-.17,1.82-1.69,3.21-3.51,3.22l-60.04.35c-2.15.01-3.79,1.91-3.5,4.04l1.56,11.32c.24,1.76,1.74,3.06,3.52,3.06h56.41c2.09,0,3.73,1.8,3.53,3.88l-4.32,46.79c-.13,1.43-1.11,2.64-2.48,3.06l-33.11,10.32c-.68.21-1.41.21-2.09,0l-32.64-9.94c-1.39-.42-2.38-1.64-2.5-3.09l-1.8-20.56c-.18-2.07,1.45-3.86,3.54-3.86h9.74c1.82,0,3.35,1.38,3.53,3.2l.81,8.08c.15,1.46,1.17,2.68,2.58,3.07l17.12,4.75c.64.18,1.32.17,1.96-.02l16.4-4.9c1.38-.41,2.38-1.62,2.52-3.05l1.73-17.6c.21-2.09-1.43-3.9-3.53-3.9h-53.92c-1.82,0-3.35-1.38-3.53-3.19l-4.56-44.55c-.21-2.09,1.43-3.91,3.53-3.91h80.41c2.09,0,3.73,1.8,3.53,3.88l-.9,9.55Z"
            class="cls-1"
          ></path>
        </g>
      </svg>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by jvcrz  - Tags: simple, material design, black, card, hover, dark, theme */
.card {
  font-family: "Poppins", sans-serif;
  width: 562px;
  height: 289px;
  border-radius: 8px;
  background-color: rgba(36, 36, 36, 0.05);
  padding: 16px 32px 16px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
}

.cls-1 {
  fill: #fff;
}

.title {
  font-size: 36px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
}

.label {
  font-size: 18px;
  color: #ffffff;
  opacity: 0.8;
  line-height: 1.4;
  font-weight: 300;
}

.ico {
  position: absolute;
  bottom: 16px;
  left: 92px;
  display: flex;
  gap: 32px;
  opacity: 0;
  transition: left 0.3s ease, opacity 0.3s ease;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-image: linear-gradient(to bottom, #0085d7, #5cc9ff);
  border-radius: 8px 0 0 8px;
  transition: width 0.3s ease;
}

.card:hover::before {
  width: 10px;
}

.card:hover {
  border-left-width: 10px;
}

.title,
.label {
  transition: transform 0.3s ease;
}

.card:hover .title,
.card:hover .label {
  transform: translateX(20px);
}

.card:hover .ico {
  left: 52px;
  opacity: 0.3;
}

.gradient {
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: #ffffff;
  border-radius: 50%;
  filter: blur(200px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover .gradient {
  opacity: 0.04;
}

</style>