Entrar Ainda não tem acesso?
1
resposta

[Projeto] HTML e CSS: Classes, posicionamento e Flexbox - Módulo 1 - Parte 9

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Seletores e posicionamento e atividade Lista de exercícios

por Paola Yêda Aude Gaudiello
| 8k xp | 4 posts
Analista de Desenvolvimento Júnior 
<!DOCTYPE html>
<html lang="pt">
<head>
    <title>Porfolio Paola</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            background-color: blueviolet;
            padding: 15px;
            text-align: center;
        }
        main{
            text-align: center;
        }
        .texto-destaque{
            background-color: blueviolet;
            color: white;
        }
        .titulo-blog{
            color: white;
        }
        .urgente{
            color: red;
        }
        a {
            color: blueviolet;
            border: none;
        }
        a:houver{
            color:white
        }
        footer{
            background-color: aquamarine;
            padding: 15px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1><strong class="titulo-blog">Analista de Desenvolvimento</strong></h1>
        <h2 class="titulo-blog">Paola Yêda</h2>
    </header>
    <main>
        <p> <strong class="urgente"> Seja bem vindo a minha <span class="texto-destaque">primeira</span> página</strong> </p>
        <img src="Imagem.png" alt="Foto da Paola Yêda programando">
        
    </main>
</body>
<footer>
    <a href="https://www.instagram.com/payes__s/">Instagram</a>
    <a href="https://github.com/pygaudiello">Github</a></footer>
</html>

Ficou assim o resultado da minha lista de exercícios

Resultado visual da lista de exercícios

1 resposta
por Rafaela Petelin Silvério
| 727.4k xp | 1628 posts
Alura Scuba Team Monitora de Fórum

Oi, Paola! Como vai?

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

Gostei da maneira como você utilizou classes para estilizar elementos diferentes, como na classe .urgente e .texto-destaque. Percebi só um pequeno erro na sua declaração de pseudo-classe: o correto é usar hover em vez de houver.

Ajuste seu código assim:

a:hover {
    color: white;
}

Esse código muda a cor dos links quando o usuário passa o mouse por cima, melhorando a experiência visual do site.

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