@@ -243,66 +243,93 @@ button:focus {
243
243
text-align : left;
244
244
}
245
245
246
+ /* --------- */
247
+ /* Social Card */
248
+ /* --------- */
249
+
246
250
.home-about-social {
247
251
text-align : center !important ;
248
252
padding-top : 25px ;
249
253
color : white !important ;
250
254
}
251
255
252
- .home-about-social-links {
253
- justify-content : center !important ;
254
- padding-top : 15px !important ;
255
- display : inline-block !important ;
256
- position : relative !important ;
257
- padding-inline-start : 0 !important ;
258
- }
259
-
260
- .home-social-icons {
261
- position : relative !important ;
262
- display : inline-block !important ;
263
- width : 40px !important ;
264
- height : 40px !important ;
265
- text-align : center !important ;
266
- font-size : 1.2em !important ;
267
- line-height : 2em !important ;
268
- background : var (--imp-text-rgba-color ) !important ;
269
- border-radius : 50% !important ;
270
- transition : 0.5s !important ;
256
+ .card {
257
+ display : flex;
258
+ height : 70px ;
259
+ width : 350px ;
271
260
}
272
261
273
- .home-social-icons ::before {
274
- content : "" ;
262
+ .card svg {
275
263
position : absolute;
276
- top : 0 ;
277
- left : 0 ;
278
- width : 100% ;
264
+ display : flex;
265
+ width : 60% ;
279
266
height : 100% ;
280
- border-radius : 50% ;
281
- background : var (--imp-text-rgba-color );
282
- transition : 0.5s ;
283
- transform : scale (0.9 );
284
- z-index : -1 ;
267
+ font-size : 24px ;
268
+ font-weight : 700 ;
269
+ opacity : 1 ;
270
+ transition : opacity 0.25s ;
271
+ z-index : 2 ;
272
+ padding : 0.25rem ;
273
+ cursor : pointer;
285
274
}
286
275
287
- .home-social-icons : hover ::before {
288
- transform : scale (1.1 );
289
- box-shadow : 0 0 15px var (--imp-text-color );
276
+ .card .social-link1 ,
277
+ .card .social-link2 ,
278
+ .card .social-link3 ,
279
+ .card .social-link4 ,
280
+ .card .social-link5 {
281
+ position : relative;
282
+ display : flex;
283
+ align-items : center;
284
+ justify-content : center;
285
+ width : 25% ;
286
+ color : whitesmoke;
287
+ font-size : 24px ;
288
+ text-decoration : none;
289
+ transition : 0.25s ;
290
+ border-radius : 50px ;
290
291
}
291
292
292
- .home-social-icons : hover {
293
- color : var (--imp-text-color );
294
- box-shadow : 0 0 5px var (--imp-text-color );
295
- text-shadow : 0 0 2px var (--imp-text-color );
293
+ .card svg {
294
+ transform : scale (1 );
296
295
}
297
296
298
- .social-icons {
299
- display : inline-block !important ;
300
- padding-right : 15px ;
301
- padding-left : 15px ;
297
+ .card .social-link2 : hover {
298
+ background-color : # 242c34 ;
299
+ animation : bounce_613 0.4s linear;
302
300
}
303
301
304
- .icon-colour {
305
- color : var (--imp-text-color ) !important ;
302
+ .card .social-link3 : hover {
303
+ background-color : # 5865f2 ;
304
+ animation : bounce_613 0.4s linear;
305
+ }
306
+
307
+ .card .social-link4 : hover {
308
+ background-color : # 0a66c2 ;
309
+ animation : bounce_613 0.4s linear;
310
+ }
311
+
312
+ .card .social-link5 : hover {
313
+ background-color : # 00ccff ;
314
+ animation : bounce_613 0.4s linear;
315
+ }
316
+
317
+ @keyframes bounce_613 {
318
+ 40% {
319
+ transform : scale (1.4 );
320
+ }
321
+
322
+ 60% {
323
+ transform : scale (0.8 );
324
+ }
325
+
326
+ 80% {
327
+ transform : scale (1.2 );
328
+ }
329
+
330
+ 100% {
331
+ transform : scale (1 );
332
+ }
306
333
}
307
334
308
335
/* --------- */
@@ -317,7 +344,7 @@ button:focus {
317
344
}
318
345
319
346
.footerHome {
320
- background-color : rgb (10 , 4 , 22 , 0.3 );
347
+ background-color : rgba (10 , 4 , 22 , 0.3 );
321
348
bottom : 0 !important ;
322
349
padding-top : 10px !important ;
323
350
padding-bottom : 8px !important ;
0 commit comments