galaxy/Cards/Tsiangana_brave-kangaroo-28.html

<div class="card">
  <div class="paleta">
    <div class="circle">
      <div class="component">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          fill="currentColor"
          class="bi bi-palette"
          viewBox="0 0 16 16"
        >
          <path
            d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
          ></path>
          <path
            d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
          ></path>
        </svg>
      </div>
    </div>
    <div class="cores cor1">
      <div class="div1"><span class="func">Hover me</span></div>
      <div class="div2">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">0E3746</div>
    </div>
    <div class="cores cor2">
      <div class="div3"></div>
      <div class="div4">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">EAE8DC</div>
    </div>
    <div class="cores cor3">
      <div class="div5"></div>
      <div class="div6">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">F4F2EC</div>
    </div>
    <div class="cores cor4">
      <div class="div7"></div>
      <div class="div8">
        <div class="component">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="22"
            height="22"
            fill="currentColor"
            class="bi bi-palette"
            viewBox="0 0 16 16"
          >
            <path
              d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
            ></path>
            <path
              d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"
            ></path>
          </svg>
        </div>
      </div>
      <div class="nome">BE2623</div>
    </div>
  </div>
</div>

<style>
/* From Uiverse.io by Tsiangana  - Tags: simple, card, modern, color, card hover */
.card {
  width: 320px;
  height: 220px;
  perspective: 1000px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 1px 1px 20px #c7c7c7;
}

.card .paleta {
  width: 100%;
  height: 180px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.component {
  height: 23px;
}

.card .paleta .cores {
  width: 80px;
  height: 180px;
  cursor: pointer;
  transition: 0.3s linear;
  overflow: hidden;
}
.card .paleta .cores:hover {
  width: 120px;
  transition: 0.4s linear;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  box-shadow: 1px 1px 8px #c7c7c7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card .paleta .cor1 {
  background-color: #0e3746;
  border-radius: 0px 0px 0px 10px;
}
.card .paleta .cor2 {
  background-color: #eae8dc;
}
.card .paleta .cor3 {
  background-color: #f4f2ec;
}
.card .paleta .cor4 {
  background-color: #be2623;
  border-radius: 0px 0px 10px 0px;
}

.card .paleta .cores .nome {
  width: 100%;
  height: 30px;
  background-color: #fff;
  text-align: center;
  font-size: 11px;
  font-family: Roboto, sans-serif;
  font-weight: 550;
}

.card .paleta .func {
  width: 100px;
  display: block;
  transform: rotate(-90deg);
  position: absolute;
  bottom: 40px;
  margin-left: -41px;
  padding-left: 5px;
  color: #fff;
  font-size: 15px;
  font-family: sans-serif;
  font-weight: 500;
}

.div1 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div2 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div1:hover + .div2 {
  background-color: #0e3746;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

.div3 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div4 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div3:hover + .div4 {
  background-color: #eae8dc;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

.div5 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div6 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div5:hover + .div6 {
  background-color: #f4f2ec;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

.div7 {
  cursor: pointer;
  transition: background-color 0.3s;
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 150px;
}

.div8 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: -60px;
  left: 135px;
  box-shadow: 1px 1px 8px #c7c7c7;
  align-items: center;
  justify-content: center;
  display: none;
}

.div7:hover + .div8 {
  background-color: #be2623;
  display: flex;
  color: #fff;
  animation: cssAnimation_0 1512ms 1 ease-out;
}

@keyframes cssAnimation_0 {
  to {
    transform: rotate(360deg) translate(0px, 0px);
  }
}

</style>