Skip to content

Commit 0c155b6

Browse files
committed
Adding styles for social icons
1 parent 3d8e68d commit 0c155b6

File tree

1 file changed

+70
-43
lines changed

1 file changed

+70
-43
lines changed

app/globals.css

+70-43
Original file line numberDiff line numberDiff line change
@@ -243,66 +243,93 @@ button:focus {
243243
text-align: left;
244244
}
245245

246+
/* --------- */
247+
/* Social Card */
248+
/* --------- */
249+
246250
.home-about-social {
247251
text-align: center !important;
248252
padding-top: 25px;
249253
color: white !important;
250254
}
251255

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;
271260
}
272261

273-
.home-social-icons::before {
274-
content: "";
262+
.card svg {
275263
position: absolute;
276-
top: 0;
277-
left: 0;
278-
width: 100%;
264+
display: flex;
265+
width: 60%;
279266
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;
285274
}
286275

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;
290291
}
291292

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);
296295
}
297296

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;
302300
}
303301

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+
}
306333
}
307334

308335
/* --------- */
@@ -317,7 +344,7 @@ button:focus {
317344
}
318345

319346
.footerHome {
320-
background-color: rgb(10, 4, 22, 0.3);
347+
background-color: rgba(10, 4, 22, 0.3);
321348
bottom: 0 !important;
322349
padding-top: 10px !important;
323350
padding-bottom: 8px !important ;

0 commit comments

Comments
 (0)