galaxy/Cards/ElSombrero2_orange-newt-83.html

<div class="card">
  <div class="content">
    <svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <path style="fill:#D33D3D;" d="M170.207,358.652H49.942c-19.975,0-36.169,16.798-36.169,37.519v6.254
        c0,20.721,16.194,37.519,36.169,37.519l198.511,14.958L170.207,358.652z"></path>
      <path style="fill:#D33D3D;" d="M462.058,358.652H342.483l-74.863,89.721l194.438-8.429c19.975,0,36.169-16.798,36.169-37.519
        v-6.254C498.226,375.45,482.032,358.652,462.058,358.652z"></path>
    </g>
    <g>
      <path style="fill:#EFAC52;" d="M435.773,231.163h55.511c10.278-1.948,23.917-11.214,17.415-48.429
        C487.824,84.147,395.409,9.839,284.57,9.839h-57.14c-110.504,0-202.699,73.852-223.946,171.989c0,0-9.843,49.334,27.244,49.334
        h378.629"></path>
      <path style="fill:#EFAC52;" d="M512,450.035v-4.588c0-3.04-2.464-5.503-5.503-5.503H277.226c-1.631,0-3.18,0.724-4.224,1.978
        l-17.355,20.798l-17.049-20.766c-1.045-1.272-2.605-2.01-4.252-2.01H5.503c-3.04,0-5.503,2.463-5.503,5.503v4.658
        c0.003,0.178,0.013,0.365,0.024,0.499l0.023,0.428l-0.02,0.372c-0.015,0.187-0.024,0.374-0.028,0.63v11.408
        c0.003,0.181,0.013,0.368,0.024,0.492l0.023,0.438l-0.02,0.368c-0.015,0.187-0.024,0.376-0.028,0.63v13.913
        c0,12.615,9.895,22.877,22.058,22.877h467.886c12.161,0,22.056-10.263,22.056-22.877v-13.982c-0.002-0.185-0.013-0.37-0.023-0.514
        l-0.024-0.415l0.021-0.376c0.014-0.187,0.024-0.374,0.026-0.625v-11.406c-0.002-0.187-0.013-0.372-0.023-0.51l-0.024-0.424
        l0.022-0.381C511.987,450.467,511.998,450.282,512,450.035z"></path>
    </g>
    <g>
      <path style="fill:#E95353;" d="M84.182,394.634c4.558,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
        C75.927,390.939,79.622,394.634,84.182,394.634z"></path>
      <path style="fill:#E95353;" d="M135.83,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
        C127.575,390.939,131.271,394.634,135.83,394.634z"></path>
      <path style="fill:#E95353;" d="M373.42,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
        C365.165,390.939,368.86,394.634,373.42,394.634z"></path>
      <path style="fill:#E95353;" d="M416.814,358.652v27.727c0,4.56,3.696,8.255,8.255,8.255c4.56,0,8.255-3.695,8.255-8.255v-27.727
        H416.814z"></path>
    </g>
    <g>
      <path style="fill:#7DC44E;" d="M92.552,294.842c-1.849,0-3.71-0.62-5.248-1.888l-35.298-29.116l-35.322,29.095
        c-3.519,2.898-8.722,2.395-11.62-1.125c-2.9-3.519-2.397-8.722,1.123-11.62l40.574-33.419c3.049-2.513,7.453-2.511,10.501,0.002
        l40.548,33.446c3.517,2.902,4.015,8.104,1.116,11.622C97.293,293.818,94.932,294.842,92.552,294.842z"></path>
      <path style="fill:#7DC44E;" d="M94.551,296.426c-1.863,0-3.728-0.63-5.251-1.888l-40.552-33.442
        c-3.518-2.9-4.016-8.102-1.117-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.116l35.318-29.095
        c3.519-2.898,8.722-2.395,11.622,1.123c2.898,3.519,2.395,8.722-1.125,11.622l-40.569,33.419
        C98.277,295.798,96.413,296.426,94.551,296.426z"></path>
      <path style="fill:#7DC44E;" d="M175.675,296.45c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
        c-3.519-2.9-4.017-8.102-1.118-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.114l35.318-29.093
        c3.518-2.898,8.722-2.397,11.62,1.123c2.899,3.519,2.397,8.722-1.123,11.622l-40.569,33.419
        C179.399,295.822,177.537,296.45,175.675,296.45z"></path>
      <path style="fill:#7DC44E;" d="M256.797,296.473c-1.862,0-3.727-0.63-5.251-1.888l-40.555-33.444
        c-3.517-2.9-4.017-8.102-1.116-11.62c2.9-3.519,8.102-4.017,11.62-1.118l35.305,29.116l35.32-29.097
        c3.519-2.898,8.722-2.397,11.622,1.123c2.898,3.519,2.395,8.722-1.124,11.622l-40.571,33.421
        C260.52,295.846,258.659,296.473,256.797,296.473z"></path>
      <path style="fill:#7DC44E;" d="M338.238,296.497c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
        c-3.519-2.9-4.017-8.102-1.118-11.62c2.902-3.519,8.104-4.017,11.622-1.118l35.303,29.114l35.318-29.095
        c3.519-2.898,8.722-2.397,11.621,1.123c2.899,3.519,2.396,8.722-1.123,11.622l-40.569,33.421
        C341.961,295.87,340.099,296.497,338.238,296.497z"></path>
      <path style="fill:#7DC44E;" d="M419.36,296.518c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
        c-3.519-2.9-4.017-8.102-1.118-11.62c2.901-3.519,8.104-4.017,11.622-1.118l35.303,29.116l35.325-29.097
        c3.519-2.898,8.722-2.397,11.62,1.123c2.9,3.519,2.397,8.722-1.123,11.622l-40.576,33.421
        C423.083,295.891,421.221,296.518,419.36,296.518z"></path>
      <path style="fill:#7DC44E;" d="M500.477,296.54c-1.851,0-3.71-0.62-5.25-1.888l-40.545-33.444c-3.517-2.9-4.016-8.104-1.116-11.622
        c2.901-3.517,8.104-4.015,11.622-1.116l40.546,33.444c3.517,2.902,4.016,8.104,1.116,11.622
        C505.218,295.516,502.856,296.54,500.477,296.54z"></path>
    </g>
    <path style="fill:#FCAF29;" d="M347.468,356.319c-0.905-1.935-2.849-3.171-4.985-3.171H170.207c-2.129,0-4.065,1.227-4.975,3.149
      c-0.909,1.924-0.628,4.2,0.722,5.846l85.441,104.068c1.04,1.268,2.591,2.005,4.231,2.012c0.008,0,0.015,0,0.022,0
      c1.631,0,3.18-0.724,4.227-1.978l86.835-104.068C348.078,360.537,348.374,358.254,347.468,356.319z"></path>
    <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M22.564,181.828C43.807,83.691,136.003,9.839,246.507,9.839
      H227.43c-110.504,0-202.699,73.852-223.946,171.989c0,0-9.843,49.334,27.244,49.334h19.077
      C12.718,231.163,22.564,181.828,22.564,181.828z"></path>
    <g style="opacity:0.15;">
      <path style="fill:#202020;" d="M19.079,479.283V465.37c0.002-0.253,0.013-0.442,0.026-0.63l0.021-0.368l-0.023-0.438
        c-0.011-0.124-0.022-0.311-0.024-0.492v-11.408c0.002-0.255,0.013-0.442,0.026-0.63l0.021-0.372l-0.023-0.428
        c-0.011-0.133-0.022-0.32-0.024-0.499v-4.658c0-3.04,2.463-5.503,5.503-5.503H5.503c-3.04,0-5.503,2.463-5.503,5.503v4.658
        c0.003,0.178,0.013,0.365,0.024,0.499l0.023,0.428l-0.02,0.372c-0.015,0.187-0.024,0.374-0.028,0.63v11.408
        c0.003,0.181,0.013,0.368,0.024,0.492l0.023,0.438l-0.02,0.368c-0.015,0.187-0.024,0.376-0.028,0.63v13.913
        c0,12.615,9.895,22.877,22.058,22.877h19.077C28.974,502.161,19.079,491.898,19.079,479.283z"></path>
    </g>
    <g>
      <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M32.85,402.424v-6.254
        c0-20.721,16.196-37.519,36.171-37.519H49.942c-19.975,0-36.169,16.798-36.169,37.519v6.254c0,20.721,16.194,37.519,36.169,37.519
        h19.079C49.046,439.944,32.85,423.145,32.85,402.424z"></path>
      <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M185.031,362.143c-1.351-1.644-1.631-3.922-0.722-5.846
        c0.911-1.922,2.849-3.149,4.976-3.149h-19.079c-2.129,0-4.065,1.227-4.975,3.149c-0.909,1.924-0.628,4.2,0.722,5.846
        l85.441,104.068c1.04,1.268,2.591,2.005,4.231,2.012c0.008,0,0.015,0,0.022,0c1.631,0,3.18-0.724,4.227-1.978l5.355-6.419
        L185.031,362.143z"></path>
    </g>
    <path style="fill:#8C5549;" d="M498.226,346.545c0,7.294-5.913,13.208-13.208,13.208H26.982c-7.295,0-13.208-5.914-13.208-13.208
      v-20.662c0-7.294,5.913-13.208,13.208-13.208h458.037c7.295,0,13.208,5.914,13.208,13.208L498.226,346.545L498.226,346.545z"></path>
    <path style="opacity:0.15;fill:#202020;enable-background:new    ;" d="M32.85,345.444v-20.662c0-7.294,5.914-13.208,13.208-13.208
      H26.982c-7.295,0-13.208,5.914-13.208,13.208v20.66c0,7.294,5.913,13.208,13.208,13.208h19.077
      C38.764,358.652,32.85,352.739,32.85,345.444z"></path>
    </svg>
    <div class="description">
      <p class="title">
        <strong>Spicy Burger</strong>
      </p>
      <p class="info">
        30 Min | 165 Sell
      </p>
      <p class="price">
        2.50
      </p>
    </div>
  </div>
</div>
<style>
/* From Uiverse.io by ElSombrero2 - Tags: card */
.card {
  width: 190px;
  height: 254px;
  overflow: visible;
  cursor: pointer;
  position: relative;
}

.card::before, .content {
  border-radius: 5px;
  box-shadow: 0px 0px 5px 1px #00000022;
  transition: transform 300ms, box-shadow 200ms;
}

.card::before {
  position: absolute;
  content: ' ';
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ee9933;
  transform: rotateZ(5deg);
}

.description {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.info {
  color: #00000066;
}

.price::before {
  content: '$';
}

.price {
  font-weight: bold;
  color: #ee9933;
}

.description p {
  margin-bottom: 10px;
}

.card .content {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotateZ(-5deg);
}

.content .img {
  width: 150px;
  height: fit-content;
}

.card:hover::before, .card:hover .content {
  transform: rotateZ(0deg);
}

.card:active::before, .card:active .content {
  box-shadow: none;
}
</style>