1+ @import url ('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap' );
2+
3+ /* * {
4+ margin: 0;
5+ padding: 0;
6+ font-family: 'Poppins', sans-serif;
7+ } */
8+
9+ /* .body {
10+ display: flex;
11+ justify-content: center;
12+ align-items: center;
13+ flex-wrap: wrap;
14+ min-height: 200vh;
15+
16+
17+ } */
18+
19+ /* .section {
20+ position: relative;
21+ } */
22+
23+ .body ::before {
24+ content : '' ;
25+ position : absolute;
26+ top : 0 ;
27+ left : 0 ;
28+ width : 100% ;
29+ height : 120% ;
30+ background : linear-gradient (# D4145A, # FBB03B );
31+ clip-path : circle (30% at right 58% );
32+ }
33+
34+ .body ::after {
35+ content : '' ;
36+ position : absolute;
37+ top : 0 ;
38+ left : 0 ;
39+ width : 100% ;
40+ height : 120% ;
41+ background : linear-gradient (# 2E3192, # 1BFFFF );
42+ clip-path : circle (15% at 5% 30% );
43+ }
44+
45+ .section ::before {
46+ content : '' ;
47+ position : absolute;
48+ top : 0 ;
49+ left : 0 ;
50+ width : 100% ;
51+ height : 220% ;
52+ background : linear-gradient (# 009245, # FCEE21 );
53+ clip-path : circle (15% at 50% 60% );
54+ }
55+
56+ .section ::after {
57+ content : '' ;
58+ position : absolute;
59+ top : 0 ;
60+ left : 0 ;
61+ width : 100% ;
62+ height : 320% ;
63+ background : linear-gradient (# 662D8C, # ED1E79 );
64+ clip-path : circle (20% at 10% 70% );
65+ }
66+
67+ .container {
68+ position : relative;
69+ z-index : 1 ;
70+ display : flex;
71+ justify-content : center;
72+ align-items : center;
73+ flex-wrap : wrap;
74+ margin : 40px 0 ;
75+ }
76+
77+ .container .card {
78+ position : relative;
79+ width : 200px ;
80+ height : 250px ;
81+ background : rgba (255 , 255 , 255 , 0.05 );
82+ margin : 20px ;
83+ box-shadow : 0 15px 35px rgba (0 , 0 , 0 , 0.2 );
84+ border-radius : 15px ;
85+ display : flex;
86+ justify-content : center;
87+ align-items : center;
88+ backdrop-filter : blur (10px );
89+ }
90+
91+ .container .card .content {
92+ position : relative;
93+ display : flex;
94+ justify-content : center;
95+ align-items : center;
96+ flex-direction : column;
97+ opacity : 0.65 ;
98+ transition : 0.5s ;
99+ }
100+
101+ .container .card : hover .content {
102+ opacity : 1 ;
103+ transform : translateY (-20px );
104+ }
105+
106+ .container .card .content .imgBx {
107+ position : relative;
108+ width : 150px ;
109+ height : 150px ;
110+ border-radius : 50% ;
111+ overflow : hidden;
112+ border : 10px solid rgba (0 , 0 , 0 , 0.25 );
113+ }
114+
115+ .container .card .content .imgBx .img {
116+ position : relative;
117+ top : 0 ;
118+ left : 0 ;
119+ width : 100% ;
120+ height : 100% ;
121+ object-fit : cover;
122+ }
123+
124+ .container .card .content .contentBx {
125+ position : relative;
126+ justify-content : center;
127+ align-items : center;
128+ }
129+
130+ .container .card .content .contentBx .h3 {
131+ color : # fff ;
132+ text-transform : uppercase;
133+ letter-spacing : 2px ;
134+ font-weight : 500 ;
135+ font-size : 15px ;
136+ text-align : center;
137+ margin : 20px 0 10px ;
138+ line-height : 1.1em ;
139+ }
140+
141+ .container .card .content .contentBx {
142+ position : relative;
143+ justify-content : center;
144+ align-items : center;
145+ flex-wrap : wrap;
146+ margin : 0 0 ;
147+ text-align : center;
148+ }
149+
150+ .container .card .content .contentBx .h5 {
151+
152+ /* position: relative;
153+ right: 0;
154+ color: #fff; */
155+ border-radius : 0.4rem ;
156+ height : fit-content;
157+ width : fit-content;
158+ background-color : # 0be881 ;
159+ padding-left : 1rem ;
160+ padding-right : 1rem ;
161+ font-size : 1rem ;
162+ font-weight : 400 ;
163+ margin-bottom : 0 ;
164+ margin-top : 0 ;
165+ margin : auto;
166+ }
167+
168+ .container .card .content .contentBx .h5 .svg {
169+ /* position: absolute;
170+ size: 10px; */
171+ overflow : visible;
172+ width : 1.25em ;
173+ display : inline-block;
174+ font-size : inherit;
175+ height : 1em ;
176+ vertical-align : -0.125em ;
177+ }
0 commit comments