Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resolução de Atividades - "10 Lista de exercícios"

1 - Organizando ícones nas redes sociais

HTML:

                <a class = "apresentacao__links__link" href = "https://github.com/Victor-M-S-Rodrigues07"> 

                    <img src = "Assets-aula2-curso3-html-e-css-main/assets/github.png" alt = "Ícone do GitHub">
                    GitHub
                </a>

                <a class = "apresentacao__links__link" href = "https://www.linkedin.com/in/victor-m-rodrigues/">

                    <img src = "Assets-aula2-curso3-html-e-css-main/assets/linkedin.png" alt = "Ícone do LinkedIn">
                    LinkedIn
                </a>

                <a class = "apresentacao__links__link" href = "https://twitch.tv/guilimadev">

                    <img src = "Assets-aula2-curso3-html-e-css-main/assets/twitch.png" alt = "Ícone da Twitch">
                    Twitch
                </a>

2 - Centralizando ícones e textos nos botões

CSS:

.apresentacao__links__link {

    width: 378px;
    text-align: center;
    padding: 16px 0px;
    border: 2px solid #22D4FD;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 24px;
    text-decoration: none;
    color: #F6F6F6;
    display: flex;
    justify-content: center;
}

3 - Espaçamento entre ícones e textos

CSS:

.apresentacao__links__link {

    width: 378px;
    text-align: center;
    padding: 16px 0px;
    border: 2px solid #22D4FD;
    border-radius: 8px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 24px;
    text-decoration: none;
    color: #F6F6F6;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
}

4 - Personalizando o efeito Hover

CSS:

.apresentacao__links__link:hover {

    border: solid 2px #0000FF;
}

Projeto:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

5 - Alterando o cursor e o fundo dos botões

CSS:

.apresentacao__links__link:hover {

    background-color: #272727;
    cursor: pointer;
}

Projeto:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Obs: Não sabia do "Pointer", o meu já vira pointer automaticamente.

1 resposta
solução!

olá! ficou mt bom, parabéns colega!