Entrar Ainda não tem acesso?
1
resposta

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

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos 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;
        }
        body{
            height: 100vh;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }
        header{
            background-color: blueviolet;
            padding: 15px;
            text-align: center;
        }
        main{
            flex: 1;
            display: flex;
            align-items: center;
            text-align: center;
            justify-content: space-between;
            padding: 0 15px;
        }
        .texto-destaque{
            background-color: blueviolet;
            color: white;
        }
        .titulo-blog{
            color: white;
        }
        .texto{
            display: flex;
            justify-content: start;
        }
        .imagem{
            display: flex;
            justify-content: end;
            max-width: 100%;
            height: auto;
        }
        .urgente{
            color: red;
        }
        a {
            color: blueviolet;
            border: none;
            margin: 0 10px;
        }
        a:houver{
            color:white
        }
        footer{
            background-color: aquamarine;
            padding: 15px;
            text-align: center;
        }

        @media (max-width: 600px){
            main {
                flex-direction: column;
                text-align: center;
            }
            .imagem{
                margin: 15px;
            }
            .texto{
                margin-top: 15px;
            }
        }
    </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 class="texto"> <strong class="urgente"> Seja bem vindo a minha <span class="texto-destaque">primeira</span> página</strong> </p>
        <img class="imagem" 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>

Tela em web

Tela em dispositivos menores

A Tela acima, tem scroll, é feita para dispositivos menores..

1 resposta
por Mike de Sousa
| 1390.2k xp | 2525 posts
Alura Scuba Team Suporte Educacional

Olá, Paola, como vai?

O seu código está muito bom, você está utilizando boas práticas para a estruturação da página. Tem apenas alguns detalhes que você pode ajustar:

  • A classe .imagem tem um display: flex que não é necessário, pois você não está utilizando flexbox para o conteúdo dentro da imagem.
  • No seletor a:houver, o correto seria a:hover, para aplicar o estilo de hover corretamente quando o usuário passar o mouse sobre o link.

Fora isso, o código está bem estruturado e demonstra um bom entendimento dos conceitos abordados no exercício. Continue explorando e refinando suas habilidades, pois isso é essencial para o desenvolvimento de layouts responsivos e acessíveis.

Agradeço por compartilhar o seu trabalho. O fórum está à disposição para qualquer outra dúvida ou discussão.

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