Entrar Ainda não tem acesso?
1
resposta

Lista de exercícios 7

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Criando header e footer e atividade Lista de exercícios

por Viviane De Lima Noronha
| 27.6k xp | 58 posts

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

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portfolio</title>
        <link rel="stylesheet" href="style.css">
    </head>

<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link">Home</a>
            <a class="cabecalho__menu__link">Sobre Mim</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
        <h1 class="conteudo__titulo">Eleve seu negócio digital a outro nível<strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <p class="conteudo__texto">Olá! Sou Viviane Lima, desenvolvedora Front-end com especialidade em <strong>React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
        <div class="apresentacao__links">
        <a class="links__link" href="https://instagram.com/rafaballerini"><img src="./assets/instagram.png">Instragram</a>
        <a class="links__link" href="https://github.com/guilhermeonrails"><img src="./assets/github.png"> Github</a>
    </div>
</section>
        <img src="Moça.png" alt="Foto da Joana Santos programando" class="imagem-circular">
    </main>
    <footer Class="rodape">
        <p>Desenvolvido por Viviane Noronha.</p>
    </footer>
</body>
</html>
1 resposta
por Rafaela Petelin Silvério
| 722.8k xp | 1625 posts
Alura Scuba Team Monitora de Fórum

Oi, Viviane! Tudo bem?

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

Sua estrutura HTML ficou muito organizada, e gostei especialmente de como você separou bem os elementos do cabeçalho e dos links das redes sociais, usando classes específicas. Legal ver que você já está aplicando as boas práticas sugeridas nas aulas!

Para deixar seu projeto ainda mais interativo, você pode adicionar uma transição suave nos links usando CSS assim:


.cabecalho__menu__link {
    transition: color 0.3s ease;
}

.cabecalho__link:hover {
    color: #00BFFF;
}

Este código CSS adiciona uma transição suave quando você passa o mouse sobre os links do seu cabeçalho, deixando seu portfólio ainda mais profissional.

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