Entrar Ainda não tem acesso?
1
resposta

[Projeto] Módulo 02 - Criando ícones clicáveis - Lista de Exercício 01

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Criando ícones clicáveis e atividade Desafio: personalizando com o Hover

por Laís Moraes
| 5.1k xp | 17 posts
Arquiteta
  1. Escolha algum elemento em seu portfólio, pode ser seu nome, o texto sobre você, o link de suas redes sociais ou algum item novo que você queira adicionar:
//código omitido

.apresentacao__links__link {
    background-color: #f8eef3;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #c86b73; 
    font-family: 'Montserrat', sans-serif; 
}

.apresentacao__links__link:hover {
    background-color:#ffe8ea;
    font-family: "Krona One", sans-serif;
    padding: 3%
}

//código omitido
1 resposta
por Mike de Sousa
| 1512.2k xp | 2764 posts
Alura Scuba Team Suporte Educacional

Olá, Laís, como vai?

Seu exercício está muito bem feito, você aplicou o :hover com criatividade e utilizou propriedades que geram uma boa percepção visual de interação. A transição entre cores e a mudança da fonte dão bastante personalidade ao elemento. Uma dica que pode deixar a transição mais suave seria adicionar a propriedade transition, por exemplo:

.apresentacao__links__link {
    background-color: #f8eef3;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #c86b73; 
    font-family: 'Montserrat', sans-serif; 
    transition: all 0.3s ease;
}

Isso evita mudanças bruscas quando o usuário passa o mouse sobre o link. No mais, parabéns por compartilhar sua solução e seguir explorando os conceitos.

O fórum está sempre à disposição para trocar ideias e ajudar no que for preciso.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!