Google-Developer-Groups-ABESEC/GDG-Website

Update Hover Effect on Team Page

Ouverte

#11 ouverte le 16 oct. 2025

Voir sur GitHub
 (2 commentaires) (0 réaction) (0 personne assignée)CSS (12 forks)auto 404
good first issuehacktoberfesthacktoberfest-acceptedhelp wanted

Métriques du dépôt

Stars
 (1 étoile)
Métriques de merge PR
 (Métriques PR en attente)

Description

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.

Guide contributeur

Direction de recherche
Localisez le HTML et le CSS de la carte d'Aviral Bhaiya sur la page de l'équipe. Ajoutez des couleurs de fond distinctes au survol pour chaque icône sociale (LinkedIn bleu, Instagram rose, GitHub noir) à l'aide de sélecteurs CSS. Assurez vous que l'effet ne s'applique qu'aux icônes et non à la carte entière.
Stack technique
css
Domaine
frontend
Type d'issue
Fonctionnalité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
1
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Moins d'une heure
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Récente
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
CSS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
85