Card by Smit-Prajapati

1.card {
2  width: 280px;
3  height: 280px;
4  background: white;
5  border-radius: 32px;
6  padding: 3px;
7  position: relative;
8  box-shadow: #604b4a30 0px 70px 30px -50px;
9  transition: all 0.5s ease-in-out;
10}
11
12.card .mail {
13  position: absolute;
14  right: 2rem;
15  top: 1.4rem;
16  background: transparent;
17  border: none;
18}
19
20.card .mail svg {
21  stroke: #fbb9b6;
22  stroke-width: 3px;
23}
24
25.card .mail svg:hover {
26  stroke: #f55d56;
27}
28
29.card .profile-pic {
30  position: absolute;
31  width: calc(100% - 6px);
32  height: calc(100% - 6px);
33  top: 3px;
34  left: 3px;
35  border-radius: 29px;
36  z-index: 1;
37  border: 0px solid #fbb9b6;
38  overflow: hidden;
39  transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
40}
41
42.card .profile-pic img {
43  -o-object-fit: cover;
44  object-fit: cover;
45  width: 100%;
46  height: 100%;
47  -o-object-position: 0px 0px;
48  object-position: 0px 0px;
49  transition: all 0.5s ease-in-out 0s;
50}
51
52.card .profile-pic svg {
53  width: 100%;
54  height: 100%;
55  -o-object-fit: cover;
56  object-fit: cover;
57  -o-object-position: 0px 0px;
58  object-position: 0px 0px;
59  transform-origin: 45% 20%;
60  transition: all 0.5s ease-in-out 0s;
61}
62
63.card .bottom {
64  position: absolute;
65  bottom: 3px;
66  left: 3px;
67  right: 3px;
68  background: #fbb9b6;
69  top: 80%;
70  border-radius: 29px;
71  z-index: 2;
72  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px inset;
73  overflow: hidden;
74  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
75}
76
77.card .bottom .content {
78  position: absolute;
79  bottom: 0;
80  left: 1.5rem;
81  right: 1.5rem;
82  height: 160px;
83}
84
85.card .bottom .content .name {
86  display: block;
87  font-size: 1.2rem;
88  color: white;
89  font-weight: bold;
90}
91
92.card .bottom .content .about-me {
93  display: block;
94  font-size: 0.9rem;
95  color: white;
96  margin-top: 1rem;
97}
98
99.card .bottom .bottom-bottom {
100  position: absolute;
101  bottom: 1rem;
102  left: 1.5rem;
103  right: 1.5rem;
104  display: flex;
105  align-items: center;
106  justify-content: space-between;
107}
108
109.card .bottom .bottom-bottom .social-links-container {
110  display: flex;
111  gap: 1rem;
112}
113
114.card .bottom .bottom-bottom .social-links-container svg {
115  height: 20px;
116  fill: white;
117  filter: drop-shadow(0 5px 5px rgba(165, 132, 130, 0.1333333333));
118}
119
120.card .bottom .bottom-bottom .social-links-container svg:hover {
121  fill: #f55d56;
122  transform: scale(1.2);
123}
124
125.card .bottom .bottom-bottom .button {
126  background: white;
127  color: #fbb9b6;
128  border: none;
129  border-radius: 20px;
130  font-size: 0.6rem;
131  padding: 0.4rem 0.6rem;
132  box-shadow: rgba(165, 132, 130, 0.1333333333) 0px 5px 5px 0px;
133}
134
135.card .bottom .bottom-bottom .button:hover {
136  background: #f55d56;
137  color: white;
138}
139
140.card:hover {
141  border-top-left-radius: 55px;
142}
143
144.card:hover .bottom {
145  top: 20%;
146  border-radius: 80px 29px 29px 29px;
147  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
148}
149
150.card:hover .profile-pic {
151  width: 100px;
152  height: 100px;
153  aspect-ratio: 1;
154  top: 10px;
155  left: 10px;
156  border-radius: 50%;
157  z-index: 3;
158  border: 7px solid #fbb9b6;
159  box-shadow: rgba(96, 75, 74, 0.1882352941) 0px 5px 5px 0px;
160  transition: all 0.5s ease-in-out, z-index 0.5s ease-in-out 0.1s;
161}
162
163.card:hover .profile-pic:hover {
164  transform: scale(1.3);
165  border-radius: 0px;
166}
167
168.card:hover .profile-pic img {
169  transform: scale(2.5);
170  -o-object-position: 0px 25px;
171  object-position: 0px 25px;
172  transition: all 0.5s ease-in-out 0.5s;
173}
174
175.card:hover .profile-pic svg {
176  transform: scale(2.5);
177  transition: all 0.5s ease-in-out 0.5s;
178}