Recuperação - PRO 2º ( 3ºTRI )

Pedro está desenvolvendo o seu projeto de gestão de estudos e chegou à

etapa de criação dos cartões. Pensando nisso, ordene todos os blocos abaixo

para criar corretamente a estrutura de um cartão, com o nome da sua classe e

um parágrafo inserido nele.

• class= “cartao”>

• <p> Conteúdo

• <article

• </p>

• </article>

Ana é professora na escola Alura e está desenvolvendo um projeto para

administrar as notas dos seus estudantes. Para isso, criou o seguinte código:

- Todas as notas devem estar inseridas dentro de uma seção;

- Cada div representa a nota de um estudante.

Pensando nisso, ordene todos os blocos abaixo para recriar o código de Ana.

• <div class = “estudante_nota”>

• <section>

• </section>

• </div>

• Nota do estudante

Ajustando a largura de um elemento

Qual das alternativas abaixo apresenta a propriedade do CSS que altera a

largura de um elemento para que ele ocupe toda a página?

• height: 100px;

• height: 100%;

• width: 100%;

• width: 100px;

Ana pretende deixar seu projeto mais colorido e, para isso, irá alterar a cor do

rodapé da página para azul e a cor da fonte para branca.

Ajude Ana a realizar essas alterações ordenando todos os blocos abaixo.

• blue;

• footer {

• color:

• white;}

• background-color:

Qual das alternativas abaixo apresenta a propriedade do CSS que faz com que

os elementos do nosso container fiquem lado a lado na página?

• display: flex-grow;

• display: flex;

• display: none;

• display: block;

Pedro está criando seus cartões por meio da classe cartao e deseja estilizar

somente o elemento que possui a tag <p>. Para isso, ele deseja:

- alterar a cor de fundo para verde;

- aumentar o espaçamento interno do texto;

- diminuir a fonte para 10 pixels.

Ajude Pedro a estilizar o texto ordenando todos os blocos abaixo:

• correta: .cartao p {

• background:color : green;

• font-size: 10px;}

• padding: 0.5rem;

Ana está aprimorando o layout de seu projeto de cartões de estudo. Ela deseja

que os cartões sejam exibidos em uma linha, com cada cartão ocupando um

1/3 da largura da tela, com um espaçamento fixo de 6rem entre eles. Para isso,

ela planeja usar flexbox e a função calc().

Pensando nisso, ordene todos os blocos abaixo para atingir o layout

desejado, com cada cartão ocupando 33% da largura da tela e com 6rem de

espaçamento.

• .cartao_estudos {

• calc( 33% - 6rem); }

• flex-basis:

Pedro está desenvolvendo o seu projeto de cartões de estudo e, para o plano

de fundo da página, ele selecionou uma imagem diferente. A imagem está

adicionada na pasta Imagens e o nome do arquivo é background-cartoes.png.

Pensando nisso, escolha a alternativa que apresenta corretamente o código

necessário para usar essa imagem como plano de fundo do site.

• background: url(‘Imagens/background-cartoes.png’);

• background-color: url(‘Imagens/background-cartoes.png’);

• background: url(‘img/background-cartoes.png’);

• background: ‘Imagens/background-cartoes.png’;

Ana decidiu inovar um pouco na construção do seu projeto e, para isso, criou

um novo esquema de cores. Para o texto, Ana criou uma variável chamada

nova-cor, que armazena a cor escolhida por ela. Além de alterar a cor, Ana

deseja centralizar o texto na tela.

Pensando nisso, ordene todos os blocos abaixo que modificam a cor e

centralizam o texto.

• .texto-principal{

• color: var(--nova-cor);

• text-align:center;}

Pedro deseja modificar a aparência dos textos dos seus cartões. Seu objetivo

é que o texto da categoria da pergunta tenha peso 700, para que a fonte

fique mais grossa. Além disso, Pedro deseja aplicar um espaçamento externo

superior para que o texto não fique colado ao topo da página.

Pensando nisso, ordene todos os blocos abaixo para que Pedro consiga alterar

a espessura da sua fonte utilizando um título h3 e distancie o texto do topo da

página.

• .cartao__conteudo h3 {

• font-weight: 700;

• margin-top: 1rem;}