Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Desafio Página-Presente

Olá Pessoal,

Acabei de concluir o curso "HTML e CSS: Cabeçalhos, footer e variáveis CSS" Estou com dúvida de como iniciar o desafio da pagina de presente.

Posso separar em 3 sections? e na última que tem várias imagens, deixar com 6 divs? ou somente as tags das imgs? (se tivesse um texto junto seria melhor com div?). Qual é a forma mais semântica para organizar o código nesse exemplo?

É meu primeiro desafio do zero...

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

3 respostas
solução!

Olá Daniel, tudo bem?

Sobre as sections, faz bastante sentido a maneira que você está aplicando.

Temos alguns pontos para conversar, bora lá!

- 6 Divs ou 6 imgs?

Em cada imagem, terá algum texto ou outro elemento associado? Se não tiver, o ideal é que esses elementos sejam cada um uma tag <img>.

- Div que une as 6 imagens Entretanto, dentro dessa section você tem um título e as imagens, sendo que para dispor essas 6 imagens da maneira que elas estão, o ideal é que tenha uma <div> que englobe as 6 imagens e as separe do título.

- Header, main e footer Sobre a semântica, essas 3 seções podem ser colocadas dentro de uma tag main, o container acima da primeira seção pode ser o header e o container abaixo da última sessão pode ser o footer.

Dessa forma:

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

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar, abraços!

Olá,

Estou quase concluíndo o desafio, mas estou com uma dúvida agora na parte das fotos, poderia me ajudar?

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeAs fotos estão na esquerda e não consigo alinhar elas no centro com a mesma distância entre as bordas.

        <section class="apresentacao__conteudo__bot">
            <h2 class="apresentacao__conteudo__bot__titulo">Nossas Fotos</h2>
            <div class="apresentacao__conteudo__bot__fotos">
                <img class="ft" src="./assets/aniver2.png" alt="">
                <img class="ft" src="./assets/aniver3.png" alt="">
                <img class="ft" src="./assets/aniver4.png" alt="">
                <img class="ft" src="./assets/aniver5.png" alt="">
                <img class="ft" src="./assets/aniver6.png" alt="">
                <img class="ft" src="./assets/aniver7.png" alt="">    
            </div>
        </section>
.apresentacao__conteudo__bot{

    display: flex;
    flex-direction: column;
}

.apresentacao__conteudo__bot__titulo{
    font-size:30px;
    text-align: center;
}

.apresentacao__conteudo__bot__fotos{
    padding: 0 10%;

}

.ft{
    width: 300px;
}

Você colocou display: flex na section mas esqueceu de alinhar os filhos:

.apresentacao__conteudo__bot{
    display: flex;
    flex-direction: column;
    /* Alinhamento do conteúdo */
    align-items: center;
}

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software