Google-Developer-Groups-ABESEC/GDG-Website

Update Hover Effect on Team Page

Offen

#11 geöffnet am 16.10.2025

Auf GitHub ansehen
 (2 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)CSS (12 Forks)auto 404
good first issuehacktoberfesthacktoberfest-acceptedhelp wanted

Repository-Metriken

Stars
 (1 Stern)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

Overview

On the Team Page, the social links in Aviral Bhaiya’s card currently have a uniform hover effect.
We want to update the hover effect so that each social link has a distinct background color corresponding to the platform for better visual distinction.

What Needs to Be Done

  • Target Aviral Bhaiya’s card on the Team Page.
  • Update the hover effect for social icons:
    1. LinkedIn → blue background.
    2. Instagram → pink background.
    3. GitHub → black background.
  • Ensure the hover effect applies only to the icons, not the entire card.
  • Keep transitions smooth and consistent with other cards.

Acceptance Criteria

  • Each social icon in Aviral Bhaiya’s card changes to the correct background color on hover.
  • The hover effect is smooth and visually appealing.
  • Other cards remain unchanged unless specified.
  • Layout or responsiveness is not broken.

Contributor Guide

Research-Richtung
Finde das HTML und CSS der Karte von Aviral Bhaiya auf der Teamseite. Füge mit CSS Selektoren unterschiedliche Hover Hintergrundfarben für jedes soziale Symbol hinzu (LinkedIn blau, Instagram pink, GitHub schwarz). Stelle sicher, dass der Effekt nur auf die Symbole und nicht auf die gesamte Karte angewendet wird.
Tech Stack
css
Domain
frontend
Issue Type
Funktion
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
1
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Unter 1 Stunde
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
CSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
85