2
respostas

[Bug] baixar o projeto completo até aqui

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:

  1. o ajuste dos itens filho da lista de cursos nth-child(4n) e nth-child(4n+1), feitos na versão desktop, não deveriam ser reajustados na versão mobile, para não ficarem desalinhados?
  2. no rodapé dos patrocinadores, os logos deveriam ficar lado a lado ou um embaixo do outro? E teria algum espaçamento entre eles?
  3. 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?
  4. nesta mesma div, na versão desktop, não percebi alterações mudando o valor do flex-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!!!

2 respostas

cópia do código baixado:

.cabecalhoPrincipal .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav {
    display: flex;
}

.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;
}

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

.conteudoPrincipal-cursos-link {
    width: 23%;
    margin: 1%;
}

.conteudoPrincipal-cursos-link:nth-child(4n) {
    margin-right: 0;
}

.conteudoPrincipal-cursos-link:nth-child(4n+1) {
    margin-left: 0;
}


Olá, Carlos.

Tudo bem?

Muito obrigado pelo feedback, e desculpe o transtorno.

Aqui está o link da parte final do curso onde tem o link para o projeto final: https://cursos.alura.com.br/course/posicione-elementos-com-flexbox/task/22574

Caso prefira, aqui tem o link direto para o download do arquivo zip do projeto final: https://github.com/alura-cursos/posicione-elementos-com-flexbox/archive/6328132f40ade023bc0b03dcc6db46cf18fc4f7a.zip

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu Carlos.