Card by ElSombrero2

Made by

@ElSombrero2

Theme:

Light

#card

#e8e8e8

458 views

CSSAdd prefixes

1.card {
2  width: 190px;
3  height: 254px;
4  overflow: visible;
5  cursor: pointer;
6}
7
8.card::before, .content {
9  border-radius: 5px;
10  box-shadow: 0px 0px 5px 1px #00000022;
11  transition: transform 300ms, box-shadow 200ms;
12}
13
14.card::before {
15  position: absolute;
16  content: ' ';
17  display: block;
18  width: 100%;
19  height: 100%;
20  background-color: #ee9933;
21  transform: rotateZ(5deg);
22}
23
24.description {
25  width: 100%;
26  text-align: center;
27  margin-top: 20px;
28}
29
30.info {
31  color: #00000066;
32}
33
34.price::before {
35  content: '$';
36}
37
38.price {
39  font-weight: bold;
40  color: #ee9933;
41}
42
43.description p {
44  margin-bottom: 10px;
45}
46
47.card .content {
48  position: absolute;
49  width: 100%;
50  height: 100%;
51  background-color: white;
52  padding: 20px;
53  display: flex;
54  flex-direction: column;
55  align-items: center;
56  transform: rotateZ(-5deg);
57}
58
59.content .img {
60  width: 150px;
61  height: fit-content;
62}
63
64.card:hover::before, .card:hover .content {
65  transform: rotateZ(0deg);
66}
67
68.card:active::before, .card:active .content {
69  box-shadow: none;
70}

.card {
  width: 190px;
  height: 254px;
  overflow: visible;
  cursor: pointer;
}

.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;
}

HTML

1<div class="card">
2  <div class="content">
3    <svg xml:space="preserve" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" width="800px" height="800px">
4    <g>
5      <path d="M170.207,358.652H49.942c-19.975,0-36.169,16.798-36.169,37.519v6.254
6        c0,20.721,16.194,37.519,36.169,37.519l198.511,14.958L170.207,358.652z" style="fill:#D33D3D;"></path>
7      <path d="M462.058,358.652H342.483l-74.863,89.721l194.438-8.429c19.975,0,36.169-16.798,36.169-37.519
8        v-6.254C498.226,375.45,482.032,358.652,462.058,358.652z" style="fill:#D33D3D;"></path>
9    </g>
10    <g>
11      <path d="M435.773,231.163h55.511c10.278-1.948,23.917-11.214,17.415-48.429
12        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
13        h378.629" style="fill:#EFAC52;"></path>
14      <path 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
15        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
16        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
17        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
18        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
19        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
20        l0.022-0.381C511.987,450.467,511.998,450.282,512,450.035z" style="fill:#EFAC52;"></path>
21    </g>
22    <g>
23      <path d="M84.182,394.634c4.558,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
24        C75.927,390.939,79.622,394.634,84.182,394.634z" style="fill:#E95353;"></path>
25      <path d="M135.83,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
26        C127.575,390.939,131.271,394.634,135.83,394.634z" style="fill:#E95353;"></path>
27      <path d="M373.42,394.634c4.559,0,8.255-3.695,8.255-8.255v-27.727h-16.51v27.727
28        C365.165,390.939,368.86,394.634,373.42,394.634z" style="fill:#E95353;"></path>
29      <path 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
30        H416.814z" style="fill:#E95353;"></path>
31    </g>
32    <g>
33      <path d="M92.552,294.842c-1.849,0-3.71-0.62-5.248-1.888l-35.298-29.116l-35.322,29.095
34        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
35        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" style="fill:#7DC44E;"></path>
36      <path d="M94.551,296.426c-1.863,0-3.728-0.63-5.251-1.888l-40.552-33.442
37        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
38        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
39        C98.277,295.798,96.413,296.426,94.551,296.426z" style="fill:#7DC44E;"></path>
40      <path d="M175.675,296.45c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
41        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
42        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
43        C179.399,295.822,177.537,296.45,175.675,296.45z" style="fill:#7DC44E;"></path>
44      <path d="M256.797,296.473c-1.862,0-3.727-0.63-5.251-1.888l-40.555-33.444
45        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
46        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
47        C260.52,295.846,258.659,296.473,256.797,296.473z" style="fill:#7DC44E;"></path>
48      <path d="M338.238,296.497c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
49        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
50        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
51        C341.961,295.87,340.099,296.497,338.238,296.497z" style="fill:#7DC44E;"></path>
52      <path d="M419.36,296.518c-1.863,0-3.728-0.63-5.251-1.888l-40.553-33.444
53        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
54        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
55        C423.083,295.891,421.221,296.518,419.36,296.518z" style="fill:#7DC44E;"></path>
56      <path 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
57        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
58        C505.218,295.516,502.856,296.54,500.477,296.54z" style="fill:#7DC44E;"></path>
59    </g>
60    <path 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
61      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
62      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" style="fill:#FCAF29;"></path>
63    <path d="M22.564,181.828C43.807,83.691,136.003,9.839,246.507,9.839
64      H227.43c-110.504,0-202.699,73.852-223.946,171.989c0,0-9.843,49.334,27.244,49.334h19.077
65      C12.718,231.163,22.564,181.828,22.564,181.828z" style="opacity:0.15;fill:#202020;enable-background:new    ;"></path>
66    <g style="opacity:0.15;">
67      <path d="M19.079,479.283V465.37c0.002-0.253,0.013-0.442,0.026-0.63l0.021-0.368l-0.023-0.438
68        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
69        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
70        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
71        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
72        c0,12.615,9.895,22.877,22.058,22.877h19.077C28.974,502.161,19.079,491.898,19.079,479.283z" style="fill:#202020;"></path>
73    </g>
74    <g>
75      <path d="M32.85,402.424v-6.254
76        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
77        h19.079C49.046,439.944,32.85,423.145,32.85,402.424z" style="opacity:0.15;fill:#202020;enable-background:new    ;"></path>
78      <path d="M185.031,362.143c-1.351-1.644-1.631-3.922-0.722-5.846
79        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
80        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
81        L185.031,362.143z" style="opacity:0.15;fill:#202020;enable-background:new    ;"></path>
82    </g>
83    <path 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
84      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" style="fill:#8C5549;"></path>
85    <path d="M32.85,345.444v-20.662c0-7.294,5.914-13.208,13.208-13.208
86      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
87      C38.764,358.652,32.85,352.739,32.85,345.444z" style="opacity:0.15;fill:#202020;enable-background:new    ;"></path>
88    </svg>
89    <div class="description">
90      <p class="title">
91        <strong>Spicy Burger</strong>
92      </p>
93      <p class="info">
94        30 Min | 165 Sell
95      </p>
96      <p class="price">
97        2.50
98      </p>
99    </div>
100  </div>
101</div>

<div class="card">
  <div class="content">
    <svg xml:space="preserve" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1" width="800px" height="800px">
    <g>
      <path 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" style="fill:#D33D3D;"></path>
      <path 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" style="fill:#D33D3D;"></path>
    </g>
    <g>
      <path 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" style="fill:#EFAC52;"></path>
      <path 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" style="fill:#EFAC52;"></path>
    </g>
    <g>
      <path 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" style="fill:#E95353;"></path>
      <path 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" style="fill:#E95353;"></path>
      <path 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" style="fill:#E95353;"></path>
      <path 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" style="fill:#E95353;"></path>
    </g>
    <g>
      <path 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" style="fill:#7DC44E;"></path>
      <path 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" style="fill:#7DC44E;"></path>
      <path 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" style="fill:#7DC44E;"></path>
      <path 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" style="fill:#7DC44E;"></path>
      <path 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" style="fill:#7DC44E;"></path>
      <path 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" style="fill:#7DC44E;"></path>
      <path 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" style="fill:#7DC44E;"></path>
    </g>
    <path 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" style="fill:#FCAF29;"></path>
    <path 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" style="opacity:0.15;fill:#202020;enable-background:new    ;"></path>
    <g style="opacity:0.15;">
      <path 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" style="fill:#202020;"></path>
    </g>
    <g>
      <path 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" style="opacity:0.15;fill:#202020;enable-background:new    ;"></path>
      <path 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" style="opacity:0.15;fill:#202020;enable-background:new    ;"></path>
    </g>
    <path 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" style="fill:#8C5549;"></path>
    <path 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" style="opacity:0.15;fill:#202020;enable-background:new    ;"></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>