Desafio Hover Lista de exercícios

Projeto Hover HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seu Título Aqui</title>
    <link rel="stylesheet" href="style.css"> <!-- Aqui está o link para o seu CSS -->
</head>
<body>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <div class="texto">
                <h1 class="apresentacao__conteudo__titulo">Isabel Trindade Araújo</h1>
                <h2>Estudante de <strong class="titulo-blog">Desenvolvimento Front-end</strong></h2>
                <p class="apresentacao__conteudo__texto">
                    Sou estudante apaixonada por desenvolvimento front-end, com foco em <strong class="texto-destaque">REACT, HTML e CSS</strong>. 
                    Busco criar interfaces web modernas, responsivas e intuitivas, sempre focando em uma experiência de usuário de alta qualidade. 
                    Atualmente, estou participando do programa <strong class="texto-destaque2"> ONE - Oracle Next Education</strong>, onde estou aprimorando meus conhecimentos em tecnologias e práticas de desenvolvimento de software. 
                    Estou empolgada para aplicar tudo o que aprendi em projetos desafiadores e inovadores.
                </p>
                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href="https://github.com/IsabelTr"> 
                        <img src="./assets/github.png">
                        GitHub</a>

                        <a class="apresentacao__links__link" href="https://www.instagram.com/isabeltr_/"> 
                            <img src="./assets/instagram (1).png">
                            Instagram</a>

                            <a class="apresentacao__links__link" href="https://www.linkedin.com/in/isabeltrindadearaujo/"> 
                                <img src="./assets/linkedin.png">
                                Linkedin</a>
                </div>
            </div>
            <div class="imagem">
                <img src= "./assets/imagemisabel.jpeg" alt="minha" class="imagem-circular">
            </div>
        </section>
    </main>
</body>
</html>

** CSS:**

* {
    margin: 0;
    padding: 0;
}
body {
    box-sizing: border-box;
    background-color: #F5F5F5;
    height: 100%;
    margin: 0;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}
h1 {
    font-weight: bold;
    color: #FF79C6;
    text-align: center;
    margin: 10px 0;
    font-size: 56px;
}

h2 {
    color: #ffb6c5;
    font-size: 19px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin: 20px 0;
}

.titulo-blog {
    color: #BB66FF;
    font-weight: bolder;
}

p {
    color: grey;
}

.texto-destaque {
    color: #FF79C6;
    font-weight: bold;
    background-color: white;
    padding: 0 5px;
    border-radius: 5px;
}
.texto-destaque2 {
    color: #FF79C6;
    font-weight: bold;
    background-color: white;
    padding: 0 5px;
    border-radius: 5px;
}
.imagem-circular {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin: 20px;
}

.apresentacao {
    margin: 10% auto;
    width: 70%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}
.apresentacao__conteudo {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content:center;
}

.apresentacao__links__subtitulo{
    color:#ffb6c5;
}

.apresentacao__links {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}

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

.apresentacao__links__link img {
    margin-right: 10px; 
    width: 24px; 
    height: auto; 
    align-self: center; 
}

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

Oi, Isabel! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você organizou os elementos e aplicou estilos bem definidos. A interação com hover nos links ficou ótima e traz um toque profissional à página.

Parabéns por praticar.

Para saber mais:

Escolher boas cores para um site é essencial para um design agradável e acessível. Existem ferramentas online que ajudam a criar paletas harmoniosas e verificar o contraste entre cores para garantir boa legibilidade. Confira algumas opções:

Coolors – Gera paletas de cores automaticamente e permite ajustar manualmente.
Adobe Color – Ferramenta da Adobe para criar esquemas de cores e verificar acessibilidade.
WebAIM Contrast Checker – Testa a acessibilidade do contraste entre cores segundo as diretrizes WCAG.
Accessible Colors – Sugere ajustes de cores para melhorar acessibilidade.

Usando essas ferramentas, você pode garantir que as cores do seu site sejam não apenas bonitas, mas também acessíveis para todos os usuários.

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

Aprenda programação do zero e conquiste

novas oportunidades