Google-Developer-Groups-ABESEC/GDG-Website

Update Hover Effect on Team Page

Aberta

#11 aberto em 16 de out. de 2025

Ver no GitHub
 (2 comentários) (0 reação) (0 responsável)CSS (12 forks)auto 404
good first issuehacktoberfesthacktoberfest-acceptedhelp wanted

Métricas do repositório

Stars
 (1 estrela)
Métricas de merge de PR
 (Métricas PR pendentes)

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.

Guia do colaborador

Direção de pesquisa
Localize o HTML e o CSS do cartão de Aviral Bhaiya na página da equipe. Adicione cores de fundo distintas ao passar o mouse para cada ícone social (LinkedIn azul, Instagram rosa, GitHub preto) usando seletores CSS. Certifique se de que o efeito se aplique apenas aos ícones e não ao cartão inteiro.
Pilha de tecnologia
css
Domain
frontend
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
1
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Menos de 1 hora
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Recente
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
CSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
85