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

[Projeto] Desafio Hover

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

* {
    margin: 0;
    padding: 0;

}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.destaque-qualificação {
    color: #B70CF0;
}

.texto-destaque{
    color: #B70CF0;
}

.apresentacao {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family:'Krona One', sans-serif;
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao__links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulo{
    font-family:'Krona One', 'sans-serif';
    font-weight: 400;
    font-size: 24px;
}

.apresentacao__links__link {
    /* background-color: #B70CF0; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid #B70CF0;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao__links__link:hover {
    background-color: #272727;
}

.apresentacao__conteudo__nome:hover {
    background-color: #B70CF0;
}

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

1 resposta
solução!

Oi, Maria Eduarda, tudo bem?

Parabéns pelo resultado, ficou ótimo! Também agradeço por compartilhar seu projeto, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Caso queira mais informações sobre as pseudo-classes do CSS, da qual o hover faz parte, recomendo a leitura da documentação abaixo que explora uma lista com as que você pode aplicar no seu projeto ou em outras aplicações que desejar.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!