Olá equipe Alura, tudo bem?
Esta aula de fixação oferece o material completo do projeto para baixarmos.
Dica: você pode baixar o projeto completo até aqui para conferir seu código ou usá-lo como base para os próximos exercícios.
Baixei o material, porém não está completo, tem apenas a parte desktop.
Queria verificar com o meu código para esclarecer algumas dúvidas, mas não foi possível.
Há um link para baixarmos o material completo? Onde estaria?
link do material oferecido nesta aula ( https://github.com/alura-cursos/posicione-elementos-com-flexbox/archive/9bfdb0aacfae71bd163baa4d58fcfe754f709e75.zip )
Abaixo, segue o meu código CSS até este ponto do curso:
.cabecalhoPrincipal .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.cabecalhoPrincipal-nav {
display: flex;
}
.cabecalhoPrincipal-nav-link-app{
order: -1;
}
.conteudoPrincipal-cursos{
display: flex;
flex-wrap:wrap;
}
.conteudoPrincipal-cursos-link{
width:23%;
margin: 1%;
justify-content: space-between;
}
.conteudoPrincipal-cursos-link:nth-child(4n){
margin-right:0;
}
.conteudoPrincipal-cursos-link:nth-child(4n+1){
margin-left:0;
}
.videoSobre .container {
display:flex;
}
.videoSobre-sobre{
text-align:center;
display:flex;
flex-direction:column;
flex-grow:2;
}
.videoSobre-video{
flex-grow:1;
flex-shrink:2;
}
.videoSobre-sobre-list{
flex-grow:1;
}
.rodapePrincipal-patrocinadores .container {
display: flex;
justify-content: space-between;
}
.rodapePrincipal-patrocinadores-list {
display: flex;
align-items: center;
justify-content: space-around;
width: 70%;
margin-right: 5%;
}
.rodapePrincipal-contatoForm {
width:25%;
}
.rodapePrincipal-contatoForm-fieldset{
display: flex;
}
.rodapePrincipal-navMap-list{
display: flex;
/*flex-direction: column;
flex-wrap: wrap;*/
flex-flow: column wrap;
height: 250px;
}
/* parte mobile */
@media(max-width:768px){
.cabecalhoPrincipal .container{
flex-direction:column;
align-items:initial;
text-align:center;
}
.cabecalhoPrincipal-nav {
flex-direction:column;
}
.conteudoPrincipal-cursos{
flex-direction:column;
}
.conteudoPrincipal-cursos-link{
width:100%;
}
.videoSobre .container{
flex-direction:column;
}
.videoSobre-video{
margin:0 auto;
}
.rodapePrincipal-navMap-list{
height:auto;
margin-left:1%;
}
.rodapePrincipal-patrocinadores .container{
flex-direction:column;
align-items:center;
}
.rodapePrincipal-patrocinadores-list{
/*
flex-direction:column;
*/
margin:0;
width:100%;
}
.rodapePrincipal-contatoForm{
width:100%;
}
}
As dúvidas que tenho:
- o ajuste dos itens filho da lista de cursos
nth-child(4n)
enth-child(4n+1)
, feitos na versão desktop, não deveriam ser reajustados na versão mobile, para não ficarem desalinhados? - no rodapé dos patrocinadores, os logos deveriam ficar lado a lado ou um embaixo do outro? E teria algum espaçamento entre eles?
- a imagem do vídeo não sofreu redução de 2x em relação aos outros elementos da
div
ao diminuir o tamanho da tela. Na verdade, com a tela em 320px de largura, a imagem ultrapassa as bordas laterais (sangra a imagem). É isso mesmo? - nesta mesma
div
, na versão desktop, não percebi alterações mudando o valor doflex-grow
do vídeo e do texto.
Por enquanto, são essas as dúvidas.
Ah! Utilizei o Chrome para visualizar a p
Agradeço sua atenção e aguardo informações.
Abs e bom trabalho!!!