Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Dúvidas Aula

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Compartilhando o projeto e atividade Projeto da aula anterior

por Ruan Shizuo Miyagaki
| 29.6k xp | 62 posts

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

Bom dia, tudo bem? Eu acho que as imagens agora foi, tive que tirar print pra conseguir mandar, conseguem me ajudar? Nesse assinando o cinema, quando eu coloco o align -items center, ele não fica no centro da tela os elementos, tive que usar um padding para centralizar, aguém tem sugestões de como eu posso melhorar o código? E quando eu coloco o align-items center, ele diminui o tamanho da imagem, do título, e fiquei na dúvida sobre o motivo dessa diminuição, o que está relacionado para ele diminuir, se alguém conseguir me ajudar eu agradeço

7 respostas
por Ruan Shizuo Miyagaki
| 29.6k xp | 62 posts

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

Também tem essas outras 2 imagens que não consegui mandar no mesmo comentário

por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Ruan, tudo bem?

Para que eu consiga realizar os testes necessários e te ajudar de forma mais assertiva, peço que você compartilhe o link do seu projeto em uma pasta do Google Drive com todos os arquivos que você utilizou. Para subir os arquivos no Drive, você pode seguir os passos abaixo:

  • Clique no canto superior direito em "Novo" e selecione a opção "Nova pasta";
  • Nomeie a pasta e abra ela;
  • Dentro dela arraste todos os arquivos que você usou no projeto para dentro dela, mantendo a organização que você criou na pasta local;
  • Em seguida clique no nome da pasta, selecione "Compartilhar" e selecione novamente "Compartilhar" nas opções que aparecerem;
  • Na aba que aparecer, na seção de "acesso geral" altera a opção de "Restrito" para "Qualquer pessoa com o link" e depois clique no botão "Copiar Link";
  • Por fim, cole o link aqui no fórum.

Fico no aguardo!

por Ruan Shizuo Miyagaki
| 29.6k xp | 62 posts

Boa noite, obrigado, compartilhei: https://drive.google.com/drive/folders/1_qnkTZMGiaukJMBZdEaCm6yhRQwzeI_b?usp=sharing

Pode me ajudar por favor

por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Ruan, como vai?

O problema que você está enfrentando acontece, pois na primeira seção do seu <body>, que contém as classes principale container, os estilos de ambas as classes estão se sobrepondo, fazendo com que seja necessário um padding-left no valor de 25%. Além disso, deixo aqui algumas sugestões de alteração:

No arquivo "index.html"

  • Remova a classe container da primeira seção. Ficaria assim:

    <section class="principal">
      <div class = container_filmes>
...RESTANTE DO CÓDIGO

  • Feche a tag <section> da quarta seção. IO resultado seria esse:

    <section class="container quarto">
    <img src="Cinema infantil.PNG" alt="Imagem do Cinema Kids App">
    <div class="informacoes__detalhes">
        <h2 class="cinema__titulo"> Estamos em primeiro lugar na categoria dos melhores apps de Cinema </h2>
        <p class="palavras__texto"> Venha fazer parte dessa diversão conosco</p>
    </div>
</section>

** No arquivo "styles.css"**

  • Reescreva as classes principal, container e container_filmes, de modo a não misturar os tipos de display aplicados e repetir propriedades. 

    .principal {
    display: flex;
    flex-direction: column;
    background-image: url("img/Capturar.PNG");
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    text-align: center;
    justify-content: center;
    height: 100vh;
}

.container {
    display: grid;
    grid-template-columns: 50% 50%;
    height: 50vh;
    padding: 0 10%;
    align-items: center;
    background-color: #824D74;
}

.container_filmes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Ruan Shizuo Miyagaki
| 29.6k xp | 62 posts

Boa noite Rodrigo, tudo bem, espero que sim, eu tenho uma dúvida, não consigo centralizar minha classe biton, as tags ancora, como faz pra centralizar, obrigado pela sugestão do código, mas eu editei aqui e gostei desse estilo, consegue me ajudar a como centralizar por favor, obrigado

https://drive.google.com/file/d/1-x2WXhHfkiffSZ6ZFijE9Ze_b2-wnfVz/view?usp=drive_link

solução!
por RODRIGO SILVA HARDER
| 2300.6k xp | 4888 posts
Alura Scuba Team Monitor de Fórum Ops

Oi, Ruan, tudo bem?

Desculpe a demora em te responder!

Você pode envolver suas tags <a> que representam os botões em uma tag <div> e adicionar uma classe chamada buttons:

<div class="buttons">
    <a href="cineplus.com.br" class="button"> Assinar o Cine Plus gratuitamente</a>
    <a href="downloadcineplus.com.br" class="button"> Fazer o Download do App aqui</a>
</div>

Em seguida você pode aplicar o flexbox nessa classe da seguinte maneira:

.buttons{
    display:flex;
    flex-direction: column;
    align-items: center;
}
  • O display:flex vai permitir usar propriedades de Flexbox nos elementos filhos da tag <div>, neste caso nas tags <a>;
  • O flex-direction:column vai garantir que os botões fiquem em um sobre o outro e não em uma mesma linha como é o padrão do Flexbox;
  • O align-items:center vai alinhar os elementos ao centro.

Espero que dê tudo certo. Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Ruan Shizuo Miyagaki
| 29.6k xp | 62 posts

Imagina, ajudou bastante, muito obrigado Rodrigo pela ajuda, abraços