Entrar Ainda não tem acesso?
2
respostas

[Projeto] Flexbox: responsividade e alinhamento

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por Estanislau Antonio da Silva Junior
| 31.5k xp | 91 posts

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Portifólio De Estanislau Jr</title>
        <link rel = "stylesheet" href="atividade.css">
    </head>
    <body>
        <header></header>
        <main>
            <div class="responsivo-container"></div>
            <div><h1><span>Eleve seu negócio digital a Front-end de qualidade!</span></h1></div>
            <div><p><span>Olá! Sou Estanislau Jr Desenvolvedor Front-end com especialidade em React, HTML e Css. Ajudo pequenos negócio e designer  a colocarem em prática as boas ideias. Vamos conversar?</span>
                <div><img src="inicial.bmp" alt="Imagem do HTML e Css">
                </div>
            </main>
        </body>
        </html>
2 respostas
por Estanislau Antonio da Silva Junior
| 31.5k xp | 91 posts

Css

body{
    background-color: green;
    font-family: Arial;
    height: 100vh;
    box-sizing: border-box;
}
main{
    height: 100%;
}

.responsivo-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

Eleve seu negócio digital a Front-end de qualidade!

por Mike de Sousa
| 844.3k xp | 1398 posts
Alura Scuba Team Suporte Educacional

Olá, Estanislau, como vai?

Analisando o seu código, você está indo muito bem! A estrutura HTML e o uso do CSS para implementar o Flexbox estão no caminho certo. Vou deixar alguns pontos para ajustar e sugestões para refinar ainda mais seu projeto:

  • O elemento <span> não é necessário dentro do <h1> e <p>, já que não há estilos exclusivos aplicados a ele. Pode ser removido.
  • Dentro do <div> que contém o parágrafo (<p>), faltou fechar corretamente o <p>.

Seu progresso é muito bom! Obrigado por compartilhar seu trabalho. Continue explorando o Flexbox para responsividade e alinhamento.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)