Card by Smit-Prajapati

#e8e8e8

1.parent {
2  width: 290px;
3  height: 300px;
4  perspective: 1000px;
5}
6
7.card {
8  height: 100%;
9  border-radius: 50px;
10  background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
11  transition: all 0.5s ease-in-out;
12  transform-style: preserve-3d;
13  box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
14}
15
16.glass {
17  transform-style: preserve-3d;
18  position: absolute;
19  inset: 8px;
20  border-radius: 55px;
21  border-top-right-radius: 100%;
22  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
23  /* -webkit-backdrop-filter: blur(5px);
24  backdrop-filter: blur(5px); */
25  transform: translate3d(0px, 0px, 25px);
26  border-left: 1px solid white;
27  border-bottom: 1px solid white;
28  transition: all 0.5s ease-in-out;
29}
30
31.content {
32  padding: 100px 60px 0px 30px;
33  transform: translate3d(0, 0, 26px);
34}
35
36.content .title {
37  display: block;
38  color: #00894d;
39  font-weight: 900;
40  font-size: 20px;
41}
42
43.content .text {
44  display: block;
45  color: rgba(0, 137, 78, 0.7647058824);
46  font-size: 15px;
47  margin-top: 20px;
48}
49
50.bottom {
51  padding: 10px 12px;
52  transform-style: preserve-3d;
53  position: absolute;
54  bottom: 20px;
55  left: 20px;
56  right: 20px;
57  display: flex;
58  align-items: center;
59  justify-content: space-between;
60  transform: translate3d(0, 0, 26px);
61}
62
63.bottom .view-more {
64  display: flex;
65  align-items: center;
66  width: 40%;
67  justify-content: flex-end;
68  transition: all 0.2s ease-in-out;
69}
70
71.bottom .view-more:hover {
72  transform: translate3d(0, 0, 10px);
73}
74
75.bottom .view-more .view-more-button {
76  background: none;
77  border: none;
78  color: #00c37b;
79  font-weight: bolder;
80  font-size: 12px;
81}
82
83.bottom .view-more .svg {
84  fill: none;
85  stroke: #00c37b;
86  stroke-width: 3px;
87  max-height: 15px;
88}
89
90.bottom .social-buttons-container {
91  display: flex;
92  gap: 10px;
93  transform-style: preserve-3d;
94}
95
96.bottom .social-buttons-container .social-button {
97  width: 30px;
98  aspect-ratio: 1;
99  padding: 5px;
100  background: rgb(255, 255, 255);
101  border-radius: 50%;
102  border: none;
103  display: grid;
104  place-content: center;
105  box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
106}
107
108.bottom .social-buttons-container .social-button:first-child {
109  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
110}
111
112.bottom .social-buttons-container .social-button:nth-child(2) {
113  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
114}
115
116.bottom .social-buttons-container .social-button:nth-child(3) {
117  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
118}
119
120.bottom .social-buttons-container .social-button .svg {
121  width: 15px;
122  fill: #00894d;
123}
124
125.bottom .social-buttons-container .social-button:hover {
126  background: black;
127}
128
129.bottom .social-buttons-container .social-button:hover .svg {
130  fill: white;
131}
132
133.bottom .social-buttons-container .social-button:active {
134  background: rgb(255, 234, 0);
135}
136
137.bottom .social-buttons-container .social-button:active .svg {
138  fill: black;
139}
140
141.logo {
142  position: absolute;
143  right: 0;
144  top: 0;
145  transform-style: preserve-3d;
146}
147
148.logo .circle {
149  display: block;
150  position: absolute;
151  aspect-ratio: 1;
152  border-radius: 50%;
153  top: 0;
154  right: 0;
155  box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
156  -webkit-backdrop-filter: blur(5px);
157  backdrop-filter: blur(5px);
158  background: rgba(0, 249, 203, 0.2);
159  transition: all 0.5s ease-in-out;
160}
161
162.logo .circle1 {
163  width: 170px;
164  transform: translate3d(0, 0, 20px);
165  top: 8px;
166  right: 8px;
167}
168
169.logo .circle2 {
170  width: 140px;
171  transform: translate3d(0, 0, 40px);
172  top: 10px;
173  right: 10px;
174  -webkit-backdrop-filter: blur(1px);
175  backdrop-filter: blur(1px);
176  transition-delay: 0.4s;
177}
178
179.logo .circle3 {
180  width: 110px;
181  transform: translate3d(0, 0, 60px);
182  top: 17px;
183  right: 17px;
184  transition-delay: 0.8s;
185}
186
187.logo .circle4 {
188  width: 80px;
189  transform: translate3d(0, 0, 80px);
190  top: 23px;
191  right: 23px;
192  transition-delay: 1.2s;
193}
194
195.logo .circle5 {
196  width: 50px;
197  transform: translate3d(0, 0, 100px);
198  top: 30px;
199  right: 30px;
200  display: grid;
201  place-content: center;
202  transition-delay: 1.6s;
203}
204
205.logo .circle5 .svg {
206  width: 20px;
207  fill: white;
208}
209
210.parent:hover .card {
211  transform: rotate3d(1, 1, 0, 30deg);
212  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
213}
214
215.parent:hover .card .bottom .social-buttons-container .social-button {
216  transform: translate3d(0, 0, 50px);
217  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
218}
219
220.parent:hover .card .logo .circle2 {
221  transform: translate3d(0, 0, 60px);
222}
223
224.parent:hover .card .logo .circle3 {
225  transform: translate3d(0, 0, 80px);
226}
227
228.parent:hover .card .logo .circle4 {
229  transform: translate3d(0, 0, 100px);
230}
231
232.parent:hover .card .logo .circle5 {
233  transform: translate3d(0, 0, 120px);
234}

.parent {
  width: 290px;
  height: 300px;
  perspective: 1000px;
}

.card {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);
  transition: all 0.5s ease-in-out;
  transform-style: preserve-3d;
  box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;
}

.glass {
  transform-style: preserve-3d;
  position: absolute;
  inset: 8px;
  border-radius: 55px;
  border-top-right-radius: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
  /* -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px); */
  transform: translate3d(0px, 0px, 25px);
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  transition: all 0.5s ease-in-out;
}

.content {
  padding: 100px 60px 0px 30px;
  transform: translate3d(0, 0, 26px);
}

.content .title {
  display: block;
  color: #00894d;
  font-weight: 900;
  font-size: 20px;
}

.content .text {
  display: block;
  color: rgba(0, 137, 78, 0.7647058824);
  font-size: 15px;
  margin-top: 20px;
}

.bottom {
  padding: 10px 12px;
  transform-style: preserve-3d;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translate3d(0, 0, 26px);
}

.bottom .view-more {
  display: flex;
  align-items: center;
  width: 40%;
  justify-content: flex-end;
  transition: all 0.2s ease-in-out;
}

.bottom .view-more:hover {
  transform: translate3d(0, 0, 10px);
}

.bottom .view-more .view-more-button {
  background: none;
  border: none;
  color: #00c37b;
  font-weight: bolder;
  font-size: 12px;
}

.bottom .view-more .svg {
  fill: none;
  stroke: #00c37b;
  stroke-width: 3px;
  max-height: 15px;
}

.bottom .social-buttons-container {
  display: flex;
  gap: 10px;
  transform-style: preserve-3d;
}

.bottom .social-buttons-container .social-button {
  width: 30px;
  aspect-ratio: 1;
  padding: 5px;
  background: rgb(255, 255, 255);
  border-radius: 50%;
  border: none;
  display: grid;
  place-content: center;
  box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;
}

.bottom .social-buttons-container .social-button:first-child {
  transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;
}

.bottom .social-buttons-container .social-button:nth-child(2) {
  transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;
}

.bottom .social-buttons-container .social-button:nth-child(3) {
  transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;
}

.bottom .social-buttons-container .social-button .svg {
  width: 15px;
  fill: #00894d;
}

.bottom .social-buttons-container .social-button:hover {
  background: black;
}

.bottom .social-buttons-container .social-button:hover .svg {
  fill: white;
}

.bottom .social-buttons-container .social-button:active {
  background: rgb(255, 234, 0);
}

.bottom .social-buttons-container .social-button:active .svg {
  fill: black;
}

.logo {
  position: absolute;
  right: 0;
  top: 0;
  transform-style: preserve-3d;
}

.logo .circle {
  display: block;
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  top: 0;
  right: 0;
  box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: rgba(0, 249, 203, 0.2);
  transition: all 0.5s ease-in-out;
}

.logo .circle1 {
  width: 170px;
  transform: translate3d(0, 0, 20px);
  top: 8px;
  right: 8px;
}

.logo .circle2 {
  width: 140px;
  transform: translate3d(0, 0, 40px);
  top: 10px;
  right: 10px;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  transition-delay: 0.4s;
}

.logo .circle3 {
  width: 110px;
  transform: translate3d(0, 0, 60px);
  top: 17px;
  right: 17px;
  transition-delay: 0.8s;
}

.logo .circle4 {
  width: 80px;
  transform: translate3d(0, 0, 80px);
  top: 23px;
  right: 23px;
  transition-delay: 1.2s;
}

.logo .circle5 {
  width: 50px;
  transform: translate3d(0, 0, 100px);
  top: 30px;
  right: 30px;
  display: grid;
  place-content: center;
  transition-delay: 1.6s;
}

.logo .circle5 .svg {
  width: 20px;
  fill: white;
}

.parent:hover .card {
  transform: rotate3d(1, 1, 0, 30deg);
  box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;
}

.parent:hover .card .bottom .social-buttons-container .social-button {
  transform: translate3d(0, 0, 50px);
  box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;
}

.parent:hover .card .logo .circle2 {
  transform: translate3d(0, 0, 60px);
}

.parent:hover .card .logo .circle3 {
  transform: translate3d(0, 0, 80px);
}

.parent:hover .card .logo .circle4 {
  transform: translate3d(0, 0, 100px);
}

.parent:hover .card .logo .circle5 {
  transform: translate3d(0, 0, 120px);
}

Toggle prefixes

14K views

Copy to Figma

14K views

Comments

successfulfadwa 29. September 2023. at 4:20

29. September 2023. at 4:20

hey may i ask you how or which application you do it bcz its stunniiing

Smit-Prajapati 29. September 2023. at 15:20

29. September 2023. at 15:20

@successfulfadwa Thanks.... I used Adobe XD for card design and HTML & SCSS.....

Mdkawsarislam2002 20. September 2023. at 6:07

20. September 2023. at 6:07

Beautiful 💖

Smit-Prajapati 20. September 2023. at 12:58

20. September 2023. at 12:58

@Mdkawsarislam2002 Thank you 🤝

rakibul111 19. September 2023. at 15:46

19. September 2023. at 15:46

nice

Smit-Prajapati 20. September 2023. at 2:11

20. September 2023. at 2:11

@rakibul111 Thanks 🤝

No variations yet

MIT License

Copyright - 2024 Smit-Prajapati (Smit Prajapati) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.