3 TRI - 2ºA

Ao comparar os diferentes tamanhos de tela do protótipo do Figma, podemos observar a seguinte afirmação:

• O layout smartphone (celular) permite adicionarmos mais informações no

  cabeçalho e rodapé do site, como o logotipo completo e mais de um menu

  suspenso.

• A tela de tamanho desktop (computador) possui menor espaço em seu ca-

  beçalho, sendo necessário o uso de um logotipo reduzido e menu suspenso.

• A tela de tamanho smartphone (celular) possui menor espaço em seu cabe-

  çalho, sendo necessário o uso de um logotipo reduzido e menu suspenso.

• As telas do protótipo do Figma são todas do mesmo tamanho, independen-

  te do dispositivo.

Navegadores da internet, como o Google Chrome, priorizam, em suas pesquisas, resultados com páginas web responsivas, ou seja, que se ​ (a)   a diversos tamanhos de ​ (b)   . Com o intuito de garantir um bom lugar nas pesquisas da internet, surgiu o desenvolvimento de sites e aplicativos com a abordagem ​ (c)   (em português “móvel primeiro”), que prioriza a experiência do usuário de dispositivos ​ (d)   .

• adaptam
• telas
• mobile-first
• móveis

A propriedade CSS display: flex; aplicada em um elemento HTML o transforma em um flex-container (container flexível), e os outros elementos que estão

dentro se transformam em flex-itens (itens flexíveis).

Sendo assim, ordene todos os blocos que serão responsáveis por transformar um

cabeçalho em um flex-container, no CSS.

• .cabeçalho {

• }

• display: flex;

Inácio precisa criar um menu de navegação no cabeçalho do seu site sobre brinquedos colecionáveis de carro. Inicialmente ele planeja colocar 2 itens na sua lista (menu):

- Clássicos;

- Esportivos.

Ordene todos os blocos com as tags indicadas para criar uma lista em HTML.

• <li><a href=”#”>Clássicos</a></li>

• <ul>

• </ul>

• <li><a href=”#”>Esportivos</a></li>

Luiza está criando um e-commerce e quer desenvolver um menu com o seguinte comando:

- Ao clicar no ícone de classe carrinho, a lista minhas-compras deve ser exibida com todos os seus itens;

- Quando clicar novamente, a lista minhas-compras deve desaparecer.

Com base no cenário acima, ordene todos os blocos que farão a lista minhas-

-compras aparecer quando o ícone carrinho for clicado.

• .minhas-compras {

• :checked~

• .carrinho

• display: block;}

Ezequiel está criando uma área de destaque no seu site e ela deve conter:

- Título: Gosta de carrinhos de brinquedo?

- Texto: Você está no lugar certo para acelerar sua coleção!

Ordene todos os blocos para montar o código da área de destaque do site:

• </section>

• <h2>Você gosta de carrinhos de brinquedo?</h2>

• <p>Você está no lugar certo para acelerar sua coleção!</p>

• <section>

Abaixo, temos uma sequência de descrição de propriedades CSS que serão aplicadas aos elementos com a classe .carrossel___titulo:

- Selecione a classe .carrossel___titulo em sua folha de estilo;

- Coloque a cor laranja no texto;

- O texto deve estar horizontalmente centralizado.

Espaçamento interno com o topo 2em, lado direito e esquerdo 0 e lado inferior

1em. Ordene todos os blocos e relacione a descrição das propriedades com o código CSS:

• text-align: center;

• padding: 2em 0 1em 0;

• color: orange;

• .carrossel__titulo {

• }

Fernanda está criando um carrossel interativo e precisa criar slides com suas respectivas imagens.

A seguir, ordene todos os blocos que serão responsáveis por criar um novo slide

e adicionar sua imagem ao HTML:

• </div>

• <img src=”foto1” alt=”Foto 1”>

• <div class=”slide”>

Reordenar o seguintNa página AluraBooks, utilizamos o plugin SwiperJS para criar um carrossel de

imagens. Observe o conteúdo do plugin abaixo:

- Paginação (bolinhas de navegação);

- Pacote com slides;

- Slide e imagem do livro 1;

- Fechamento do pacote de slides.

Agora, ordene todos os blocos e monte o carrossel, considerando a abertura e o

fechamento de cada tag HTML.

• </div>

• <div class=”pacote-slides”>

• <div class=”paginacao”></div>

• <div class=”slide”><img src=”livro1.svg” alt=”Livro 1”></div>

Marina acessou a documentação de elementos HTML para fixar o que aprendeu na aula. Ela encontrou as seguintes afirmações: I. O elemento (a)   é usado como um container para agrupar, organizar e di- vidir o conteúdo de elementos (itens) HTML. II. O elemento (b)   serve para representar um cabeçalho. Geralmente é colo- ocado no topo de uma página. III. O elemento (c)   é usado para criar uma nova seção, como um capítulo de livro ou uma nova página de um site.

• div
• header
• section