Entrar Ainda não tem acesso?
1
resposta

[Projeto] Alinhe os elementos

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Posicionando mais elementos e atividade Faça como eu fiz: alinhe os elementos

por Helena Rodrigues Fernandes Marcomini
| 2.8k xp | 7 posts

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

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</title>
    <link rel="stylesheet" href="./style.css">

</head>
<header></header>
<main class="apresentacao">
<body>
    <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
    <p>Olá! Sou Joana Santos, 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> 
    <button><a href="https://www.instagram.com">Instagram</a></button>
    <button><a href="https://github.com/">GitHub</a></button>
    <img src="./Imagem.png" alt="foto de Joana Santos">
</main>
<footer></footer>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body{
    height:100vh;
    box-sizing: border-box;
    background-color: black;
    color: white;
}

.titulo-destaque {
    color: aqua;
}

.apresentacao {
    display: flex;
    align-items: center;
}
1 resposta
por Rafaela Petelin Silvério
| 1602.6k xp | 3648 posts
Alura Scuba Team

Oi, Helena! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Ficou muito bom e atende ao que a atividade pede. Só um ponto importante: <header> e <main> ficaram fora do body, o que quebra a estrutura correta do HTML. Esses elementos devem estar sempre dentro do body, pois ele representa todo o conteúdo visível da página. O ideal seria assim:

<body>
    <header></header>
    <main class="apresentacao">
        <h1>Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
        <p>Olá! Sou Joana Santos, 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> 
        <button><a href="https://www.instagram.com">Instagram</a></button>
        <button><a href="https://github.com/">GitHub</a></button>
        <img src="./Imagem.png" alt="foto de Joana Santos">
    </main>
    <footer></footer>
</body>

Esses detalhes você aprimora com o tempo. Sua dedicação ficou evidente no cuidado em alinhar os elementos e aplicar Flexbox. Parabéns pelo ótimo trabalho!

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