Font size
WorksheetsAula 5 e 6 - Inserindo o efeito no cartão
Total questions: 10
Worksheet time: 5mins
Para que os nossos cartões funcionem como flashcards de estudo, precisamos que o texto da resposta esteja oculto na frente do cartão. Ele deve aparecer somente quando o cartão for virado. Pensando nisso, escolha a alternativa que apresenta corretamente o código que esconde o conteúdo adicionado na classe cartao__conteudo__resposta.
.cartao__conteudo__resposta { backface-visibility: hidden; }
.cartao__conteudo__resposta { backface: hidden; }
.cartao__conteudo__resposta { backface-visibility: visible; }
#cartao__conteudo__resposta { backface-visibility: hidden; }
Complete a frase: Para esconder o texto da resposta na frente do cartão, devemos usar a propriedade CSS ______ com o valor 'hidden'.
a) backface-visibility
b) visibility
c) display
d) opacity
O que pretende-se alcançar ao girar os cartões?
Giro vertical
Giro horizontal
Giro diagonal
Nenhum giro.
Complete a sequência correta de blocos para adicionar uma rotação horizontal nos cartões: ________ .cartao_conteudo { rotateX(180deg); }
A) transform:
B) rotateY(90deg);
C) scale(1.5);
D) translateX(50px);
O que Pedro deseja ajustar em seu projeto?
Cor do texto
Margem inferior
Tamanho da fonte
Largura do cartão
Complete a sequência correta de blocos para adicionar uma margem inferior na tag de parágrafo: p { ________ 4rem; } .cartao__conteudo.
A) padding:
B) margin-bottom:
C) border:
D) font-size:
Pedro está desenvolvendo o seu projeto e percebeu que, sempre que adiciona um novo cartão, ele aparece na mesma linha do anterior e o espaço inferior da página nunca é utilizado. Além disso, os cartões estão muito próximos uns aos outros, dificultando a navegação na página. Pensando nisso, ordene todos os blocos abaixo que adicionam a propriedade necessária para fazer uma quebra de linha nos cartões e incluir um espaçamento de 3rem entre cada cartão. wrap; gap: flex-wrap: 3rem;} #container {
wrap; gap: flex-wrap: 3rem;} #container {
flex-wrap: wrap; gap: 3rem;
display: flex; flex-direction: column;
margin-bottom: 3rem;
Qual é a sequência correta para criar a estrutura em JavaScript que Ana utilizará nos cartões?
'nome do país', 'nome da capital', 'ponto turístico'
'nome da capital', 'ponto turístico', 'nome do país'
'ponto turístico', 'nome do país', 'nome da capital'
'nome do país', 'ponto turístico', 'nome da capital'
Qual dos seguintes elementos não é necessário para criar a estrutura do cartão?
'nome do país'
'nome da capital'
'ponto turístico'
'população'
Qual é o propósito da função criarCartao() no projeto de Ana?
Criar cartões com informações sobre países
Calcular a população de um país
Traduzir o idioma de um país
Converter a moeda de um país
