Card by kennyotsu

Made by

@kennyotsu

Theme:

Dark

#subscription#action#alert#card

#212121

330 views

CSSAdd prefixes

1.card-id567 {
2  width: 190px;
3  height: 190px;
4  background: rgb(255, 255, 255);
5  border-radius: 1rem;
6  padding: 1rem;
7  position: relative;
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  transition: 300ms ease;
12  animation: 8s thumb-thumb infinite;
13}
14
15.card-id567 svg path {
16  transition: 300ms ease;
17  stroke: rgb(20, 20, 20);
18  opacity: 0;
19}
20
21.bold-567 {
22  font-weight: bold;
23}
24
25.blurry-splash {
26  position: absolute;
27  inset: 0;
28  width: 60px;
29  margin: 0 auto;
30  height: 60px;
31  border-radius: 1rem;
32  z-index: -1;
33  opacity: 70%;
34  filter: blur(15px);
35  background: linear-gradient(
36    120deg, rgb(119, 0, 255)
37    , rgb(22, 94, 250), rgb(44, 226, 250));
38}
39
40.prompt-id567 {
41  position: absolute;
42  color: rgb(29, 29, 29);
43  text-align: center;
44}
45
46.really-small-text {
47  text-align: center;
48  width: 100%;
49  position: absolute;
50  font-size: 8px;
51  margin-top: 28px;
52  opacity: 0.5;
53}
54
55.card-id567:hover {
56  cursor: none;
57}
58
59.card-id567:hover .prompt-id567 {
60  transition: 300ms ease;
61  opacity: 0;
62}
63
64.token-container {
65  animation: 2s spinny-token-yayyy infinite;
66  margin-bottom: 10px;
67}
68
69.prompt-id567 svg path {
70  stroke: none;
71  opacity: 1;
72}
73
74.card-id567:hover svg path {
75  opacity: 1;
76}
77
78@keyframes spinny-token-yayyy {
79  0% {
80    transform: perspective(200px) rotateY(0deg);
81  }
82
83  100% {
84    transform: perspective(200px) rotateY(360deg);
85  }
86}
87
88@keyframes thumb-thumb {
89  0%, 10%, 100% {
90    transform: scale(100%);
91  }
92
93  5% {
94    transform: scale(103%);
95  }
96
97  7% {
98    transform: scale(97%);
99  }
100}

.card-id567 {
  width: 190px;
  height: 190px;
  background: rgb(255, 255, 255);
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 300ms ease;
  animation: 8s thumb-thumb infinite;
}

.card-id567 svg path {
  transition: 300ms ease;
  stroke: rgb(20, 20, 20);
  opacity: 0;
}

.bold-567 {
  font-weight: bold;
}

.blurry-splash {
  position: absolute;
  inset: 0;
  width: 60px;
  margin: 0 auto;
  height: 60px;
  border-radius: 1rem;
  z-index: -1;
  opacity: 70%;
  filter: blur(15px);
  background: linear-gradient(
    120deg, rgb(119, 0, 255)
    , rgb(22, 94, 250), rgb(44, 226, 250));
}

.prompt-id567 {
  position: absolute;
  color: rgb(29, 29, 29);
  text-align: center;
}

.really-small-text {
  text-align: center;
  width: 100%;
  position: absolute;
  font-size: 8px;
  margin-top: 28px;
  opacity: 0.5;
}

.card-id567:hover {
  cursor: none;
}

.card-id567:hover .prompt-id567 {
  transition: 300ms ease;
  opacity: 0;
}

.token-container {
  animation: 2s spinny-token-yayyy infinite;
  margin-bottom: 10px;
}

.prompt-id567 svg path {
  stroke: none;
  opacity: 1;
}

.card-id567:hover svg path {
  opacity: 1;
}

@keyframes spinny-token-yayyy {
  0% {
    transform: perspective(200px) rotateY(0deg);
  }

  100% {
    transform: perspective(200px) rotateY(360deg);
  }
}

@keyframes thumb-thumb {
  0%, 10%, 100% {
    transform: scale(100%);
  }

  5% {
    transform: scale(103%);
  }

  7% {
    transform: scale(97%);
  }
}

HTML

1<div class="card-id567">
2  <svg shape-rendering="crispEdges" viewBox="0 -0.5 29 29" xmlns="http://www.w3.org/2000/svg">
3    <path d="M0 0h7M8 0h2M14 0h1M16 0h5M22 0h7M0 1h1M6 1h1M13 1h1M17 1h2M22 1h1M28 1h1M0 2h1M2 2h3M6 2h1M8 2h1M11 2h4M18 2h1M20 2h1M22 2h1M24 2h3M28 2h1M0 3h1M2 3h3M6 3h1M8 3h2M11 3h1M13 3h1M15 3h5M22 3h1M24 3h3M28 3h1M0 4h1M2 4h3M6 4h1M8 4h4M13 4h1M15 4h1M19 4h1M22 4h1M24 4h3M28 4h1M0 5h1M6 5h1M9 5h1M12 5h2M17 5h4M22 5h1M28 5h1M0 6h7M8 6h1M10 6h1M12 6h1M14 6h1M16 6h1M18 6h1M20 6h1M22 6h7M9 7h1M11 7h1M15 7h6M0 8h4M6 8h1M8 8h1M13 8h2M17 8h3M21 8h1M24 8h3M28 8h1M2 9h1M4 9h2M7 9h1M9 9h1M14 9h1M16 9h1M19 9h2M22 9h3M28 9h1M0 10h5M6 10h1M8 10h1M13 10h1M16 10h1M18 10h1M20 10h1M22 10h3M26 10h2M1 11h1M3 11h2M7 11h1M11 11h4M16 11h1M18 11h1M20 11h5M28 11h1M1 12h3M5 12h2M9 12h1M11 12h1M13 12h5M19 12h1M25 12h2M0 13h2M3 13h3M8 13h1M10 13h2M14 13h1M16 13h2M19 13h2M22 13h2M26 13h3M0 14h1M2 14h1M4 14h3M9 14h2M12 14h1M14 14h1M16 14h1M19 14h3M23 14h2M26 14h3M0 15h2M3 15h2M8 15h1M12 15h1M14 15h3M20 15h1M22 15h3M27 15h1M0 16h1M2 16h3M6 16h1M10 16h2M18 16h1M20 16h2M24 16h2M27 16h1M1 17h2M4 17h1M7 17h3M12 17h1M14 17h2M18 17h1M20 17h2M23 17h1M25 17h3M0 18h1M3 18h1M6 18h1M8 18h5M15 18h2M23 18h1M26 18h1M2 19h4M12 19h1M14 19h1M16 19h2M19 19h3M26 19h1M1 20h1M3 20h1M6 20h7M14 20h2M17 20h10M8 21h3M12 21h1M18 21h1M20 21h1M24 21h5M0 22h7M9 22h6M19 22h2M22 22h1M24 22h2M27 22h1M0 23h1M6 23h1M9 23h1M13 23h3M18 23h1M20 23h1M24 23h2M27 23h1M0 24h1M2 24h3M6 24h1M10 24h1M12 24h1M14 24h4M20 24h5M26 24h3M0 25h1M2 25h3M6 25h1M8 25h1M11 25h2M15 25h2M19 25h3M24 25h2M28 25h1M0 26h1M2 26h3M6 26h1M8 26h1M10 26h2M13 26h1M21 26h1M23 26h1M26 26h1M28 26h1M0 27h1M6 27h1M8 27h1M11 27h1M14 27h1M16 27h1M18 27h3M23 27h1M25 27h1M27 27h1M0 28h7M8 28h1M14 28h3M19 28h2M25 28h1M27 28h1" stroke="#000000"></path>
4  </svg>
5  
6  <div class="prompt-id567">
7    <div class="token-container">
8
9    <svg width="50" height="50" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
10      <path d="M10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20ZM10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18V18ZM10 5.05L14.95 10L10 14.95L5.05 10L10 5.05V5.05ZM10 7.879L7.879 10L10 12.121L12.121 10L10 7.879V7.879Z" fill="url(#paint0_linear_713_51)"></path>
11      <defs>
12      <linearGradient id="paint0_linear_713_51" x1="0" y1="0" x2="16.4204" y2="22.6007" gradientUnits="userSpaceOnUse">
13      <stop stop-color="#AF40FF"></stop>
14      <stop offset="0.5" stop-color="#5B42F3"></stop>
15      <stop offset="1" stop-color="#00DDEB"></stop>
16      </linearGradient>
17      </defs>
18    </svg>
19    </div>
20    <div class="blurry-splash"></div>
21    <p>Hover For Free*<br><span class="bold-567">Uiverse Points</span> </p>
22    <p class="really-small-text">*at the expense of your sanity</p>
23  </div>
24</div>

<div class="card-id567">
  <svg shape-rendering="crispEdges" viewBox="0 -0.5 29 29" xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h7M8 0h2M14 0h1M16 0h5M22 0h7M0 1h1M6 1h1M13 1h1M17 1h2M22 1h1M28 1h1M0 2h1M2 2h3M6 2h1M8 2h1M11 2h4M18 2h1M20 2h1M22 2h1M24 2h3M28 2h1M0 3h1M2 3h3M6 3h1M8 3h2M11 3h1M13 3h1M15 3h5M22 3h1M24 3h3M28 3h1M0 4h1M2 4h3M6 4h1M8 4h4M13 4h1M15 4h1M19 4h1M22 4h1M24 4h3M28 4h1M0 5h1M6 5h1M9 5h1M12 5h2M17 5h4M22 5h1M28 5h1M0 6h7M8 6h1M10 6h1M12 6h1M14 6h1M16 6h1M18 6h1M20 6h1M22 6h7M9 7h1M11 7h1M15 7h6M0 8h4M6 8h1M8 8h1M13 8h2M17 8h3M21 8h1M24 8h3M28 8h1M2 9h1M4 9h2M7 9h1M9 9h1M14 9h1M16 9h1M19 9h2M22 9h3M28 9h1M0 10h5M6 10h1M8 10h1M13 10h1M16 10h1M18 10h1M20 10h1M22 10h3M26 10h2M1 11h1M3 11h2M7 11h1M11 11h4M16 11h1M18 11h1M20 11h5M28 11h1M1 12h3M5 12h2M9 12h1M11 12h1M13 12h5M19 12h1M25 12h2M0 13h2M3 13h3M8 13h1M10 13h2M14 13h1M16 13h2M19 13h2M22 13h2M26 13h3M0 14h1M2 14h1M4 14h3M9 14h2M12 14h1M14 14h1M16 14h1M19 14h3M23 14h2M26 14h3M0 15h2M3 15h2M8 15h1M12 15h1M14 15h3M20 15h1M22 15h3M27 15h1M0 16h1M2 16h3M6 16h1M10 16h2M18 16h1M20 16h2M24 16h2M27 16h1M1 17h2M4 17h1M7 17h3M12 17h1M14 17h2M18 17h1M20 17h2M23 17h1M25 17h3M0 18h1M3 18h1M6 18h1M8 18h5M15 18h2M23 18h1M26 18h1M2 19h4M12 19h1M14 19h1M16 19h2M19 19h3M26 19h1M1 20h1M3 20h1M6 20h7M14 20h2M17 20h10M8 21h3M12 21h1M18 21h1M20 21h1M24 21h5M0 22h7M9 22h6M19 22h2M22 22h1M24 22h2M27 22h1M0 23h1M6 23h1M9 23h1M13 23h3M18 23h1M20 23h1M24 23h2M27 23h1M0 24h1M2 24h3M6 24h1M10 24h1M12 24h1M14 24h4M20 24h5M26 24h3M0 25h1M2 25h3M6 25h1M8 25h1M11 25h2M15 25h2M19 25h3M24 25h2M28 25h1M0 26h1M2 26h3M6 26h1M8 26h1M10 26h2M13 26h1M21 26h1M23 26h1M26 26h1M28 26h1M0 27h1M6 27h1M8 27h1M11 27h1M14 27h1M16 27h1M18 27h3M23 27h1M25 27h1M27 27h1M0 28h7M8 28h1M14 28h3M19 28h2M25 28h1M27 28h1" stroke="#000000"></path>
  </svg>
  
  <div class="prompt-id567">
    <div class="token-container">

    <svg width="50" height="50" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 20C4.477 20 0 15.523 0 10C0 4.477 4.477 0 10 0C15.523 0 20 4.477 20 10C20 15.523 15.523 20 10 20ZM10 18C12.1217 18 14.1566 17.1571 15.6569 15.6569C17.1571 14.1566 18 12.1217 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2C7.87827 2 5.84344 2.84285 4.34315 4.34315C2.84285 5.84344 2 7.87827 2 10C2 12.1217 2.84285 14.1566 4.34315 15.6569C5.84344 17.1571 7.87827 18 10 18V18ZM10 5.05L14.95 10L10 14.95L5.05 10L10 5.05V5.05ZM10 7.879L7.879 10L10 12.121L12.121 10L10 7.879V7.879Z" fill="url(#paint0_linear_713_51)"></path>
      <defs>
      <linearGradient id="paint0_linear_713_51" x1="0" y1="0" x2="16.4204" y2="22.6007" gradientUnits="userSpaceOnUse">
      <stop stop-color="#AF40FF"></stop>
      <stop offset="0.5" stop-color="#5B42F3"></stop>
      <stop offset="1" stop-color="#00DDEB"></stop>
      </linearGradient>
      </defs>
    </svg>
    </div>
    <div class="blurry-splash"></div>
    <p>Hover For Free*<br><span class="bold-567">Uiverse Points</span> </p>
    <p class="really-small-text">*at the expense of your sanity</p>
  </div>
</div>