galaxy/Cards/catraco_bright-bird-12.html

<div class="card">
  <div class="card-title">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 36 36"
      height="20"
      width="20"
    >
      <path
        stroke-width="2"
        d="M34.4898 14.9959V23.1184C34.4898 31.2408 31.2408 34.4898 23.1184 34.4898H13.3714C5.24898 34.4898 2 31.2408 2 23.1184V13.3714C2 5.24898 5.24898 2 13.3714 2H21.4939"
      ></path>
      <path
        stroke-width="2"
        d="M34.4898 14.9959H27.9918C23.1184 14.9959 21.4939 13.3714 21.4939 8.49796V2L34.4898 14.9959Z"
      ></path>
      <path
        stroke-linejoin="round"
        stroke-width="2"
        d="M10.1224 19.8694H19.8694"
      ></path>
      <path
        stroke-linejoin="round"
        stroke-width="2"
        d="M10.1224 26.3673H16.6204"
      ></path>
    </svg>

    Caprese Salad
  </div>

  <div class="card-blocks">
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Fresh ripe tomatoes
    </div>
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Fresh mozzarella cheese
    </div>
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Fresh basil leaves
    </div>
    <div class="card-block">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 34 33"
        height="20"
        width="20"
      >
        <path
          d="M16.932 32.9048C7.97083 32.9048 0.687073 25.621 0.687073 16.6599C0.687073 7.69873 7.97083 0.41497 16.932 0.41497C25.8931 0.41497 33.1769 7.69873 33.1769 16.6599C33.1769 25.621 25.8931 32.9048 16.932 32.9048ZM16.932 2.6817C9.22509 2.6817 2.9538 8.95299 2.9538 16.6599C2.9538 24.3668 9.22509 30.638 16.932 30.638C24.6389 30.638 30.9101 24.3668 30.9101 16.6599C30.9101 8.95299 24.6389 2.6817 16.932 2.6817Z"
        ></path>
        <path
          d="M14.7854 22.0699C14.4832 22.0699 14.196 21.9491 13.9845 21.7375L9.70783 17.4609C9.2696 17.0227 9.2696 16.2973 9.70783 15.8591C10.1461 15.4209 10.8714 15.4209 11.3097 15.8591L14.7854 19.3348L22.5527 11.5674C22.9909 11.1292 23.7163 11.1292 24.1545 11.5674C24.5928 12.0057 24.5928 12.731 24.1545 13.1693L15.5863 21.7375C15.3747 21.9491 15.0876 22.0699 14.7854 22.0699Z"
        ></path>
      </svg>
      Extra virgin olive oil
    </div>
  </div>

  <div class="card-options">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 33 29"
      height="25"
      width="25"
    >
      <path
        d="M32.4898 3.52308V22.827C32.4898 24.4018 31.2072 25.8467 29.6324 26.0416L29.1291 26.1065C26.4665 26.4637 22.7161 27.5677 19.6963 28.8341C18.641 29.2724 17.4721 28.4769 17.4721 27.3242V4.74073C17.4721 4.14002 17.813 3.58802 18.3488 3.29578C21.3198 1.68848 25.8171 0.259766 28.8693 0H28.9667C30.915 0 32.4898 1.57483 32.4898 3.52308Z"
      ></path>
      <path
        d="M14.1573 3.29578C11.1862 1.68848 6.68898 0.259766 3.63673 0H3.52308C1.57483 0 0 1.57483 0 3.52308V22.827C0 24.4018 1.2826 25.8467 2.85743 26.0416L3.36072 26.1065C6.02333 26.4637 9.7737 27.5677 12.7935 28.8341C13.8488 29.2724 15.0178 28.4769 15.0178 27.3242V4.74073C15.0178 4.12379 14.6931 3.58802 14.1573 3.29578ZM4.88685 8.2151H8.53981C9.20546 8.2151 9.75747 8.76711 9.75747 9.43276C9.75747 10.1146 9.20546 10.6504 8.53981 10.6504H4.88685C4.2212 10.6504 3.6692 10.1146 3.6692 9.43276C3.6692 8.76711 4.2212 8.2151 4.88685 8.2151ZM9.75747 15.521H4.88685C4.2212 15.521 3.6692 14.9853 3.6692 14.3034C3.6692 13.6377 4.2212 13.0857 4.88685 13.0857H9.75747C10.4231 13.0857 10.9751 13.6377 10.9751 14.3034C10.9751 14.9853 10.4231 15.521 9.75747 15.521Z"
      ></path>
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 33 33"
      height="25"
      width="25"
    >
      <path
        d="M17.6909 6.30132H5.05221C2.27431 6.30132 0 8.57563 0 11.3535V29.8079C0 32.1634 1.68949 33.1706 3.75261 32.0172L10.1369 28.4596C10.8192 28.0859 11.9239 28.0859 12.5899 28.4596L18.9742 32.0172C21.0536 33.1544 22.7431 32.1634 22.7431 29.8079V11.3535C22.7431 8.57563 20.4688 6.30132 17.6909 6.30132Z"
      ></path>
      <path
        d="M32.4898 5.05221V23.5066C32.4898 25.8621 30.8003 26.8531 28.7372 25.7159L25.6019 23.9615C25.342 23.8153 25.1795 23.5391 25.1795 23.2467V11.3553C25.1795 7.22905 21.8168 3.86632 17.6905 3.86632H11.0789C10.4778 3.86632 10.0554 3.23277 10.3316 2.71293C11.1763 1.10466 12.8658 0 14.7989 0H27.4376C30.2155 0 32.4898 2.27431 32.4898 5.05221Z"
      ></path>
    </svg>

    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 34 31"
      height="25"
      width="25"
    >
      <path
        d="M18.054 30.8433C17.476 31.0522 16.524 31.0522 15.946 30.8433C11.016 29.1191 0 21.9264 0 9.73538C0 4.35393 4.233 0 9.452 0C12.546 0 15.283 1.53258 17 3.90112C18.717 1.53258 21.471 0 24.548 0C29.767 0 34 4.35393 34 9.73538C34 21.9264 22.984 29.1191 18.054 30.8433Z"
      ></path>
    </svg>
  </div>
</div>

<style>
/* From Uiverse.io by catraco - Tags: icon, 3d, gradient, card, card template, cool card, card animation, card hover */
.card {
  width: 280px;
  height: 200px;
  background-image: linear-gradient(45deg, #ffcdb2, #ffb4a2);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  border-radius: 1em;
  padding: 1em;
  position: relative;
  border-left: none;
  border-right: solid 6px #6d6875;
  border-bottom: solid 1px #6d6875;
  box-shadow: 5px 0px 10px #00000030;
  transition: 0.5s ease-in-out;
}

.card:hover {
  border-right: none;
  border-left: solid 6px #6d6875;
  box-shadow: -5px 0px 10px #00000030;
}

.card .card-title {
  font-size: 1em;
  font-weight: 600;
  color: #6d6875;
  stroke: #6d6875;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.card .card-block {
  font-size: 0.8em;
  font-weight: 300;
  color: #6d6875;
  fill: #6d6875;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0;
}

.card .card-options {
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0%) rotate(5deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  fill: #ffcdb2;
  height: 80%;
  background-color: #6d6875;
  border-radius: 0 1em 1em 0;
  padding: 1em;
  gap: 1em;
  opacity: 0;
  transition: 0.5s;
}

.card:hover .card-options {
  opacity: 1;
  transform: translate(50%) rotate(0deg);
}

</style>