Atividade-Pratica-da-Semana-2-do-Replit (3)

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Atividade-Pratica-da-Semana-2-do-Replit/index.html
 
 Índice das Questões
 
 Observações: Use as classes de cores de fundo do Bootstrap 5 para diferenciar as DIVs. São elas: bg-primary, bg-secondary, bg-success, bg-info, bg-warning, bg-danger e bg-dark. Quando necessário, use a classe p-5 para gerar volume nos elementos DIV.
 
 Questão 01
 Questão 02
 Questão 03
 Questão 04
 Questão 05
 Questão 06
 Questão 07
 Questão 08
 Questão 09
 Questão 10
 
Atividade-Pratica-da-Semana-2-do-Replit/questao01.html
 
 Voltar ao Índice
 Questão 01
 Usando classes do Bootstrap 5, crie um leiaute de 3 linhas por 3 colunas, com espaçamento de 3 unidades entre as células de leiaute. Cada célula deve conter um elemento DIV com uma cor de fundo temática diferente dos demais DIVs e a página deve ter uma cor de fundo preta com 10% de opacidade.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao02.html
 
 Voltar ao Índice
 Questão 02
 Usando classes do Bootstrap 5, crie 4 parágrafos que tenham diferentes cores de fundo temáticas e cores de fonte com bom contraste em relação ao plano de fundo. Cada parágrafo deve ter 30 palavras e um link com fonte na mesma cor de fonte do parágrafo, na última linha, para voltar à página de índice de questões.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao03.html
 
 Voltar ao Índice
 Questão 03
 Usando classes do Bootstrap 5, crie um leiaute de 2 linhas por 4 colunas em que cada célula de leiaute contenha um ícone da biblioteca de ícones do Bootstrap que, por sua vez, deve ser associada via CDN. Cada ícone deve estar centralizado em sua célula de leaiute, ter tamanho de 80px e ter uma cor temática e tipo próprios.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao04.html
 
 Voltar ao Índice
 Questão 04
 Usando classes do Bootstrap 5, crie um leiaute de 3 linhas, sendo que cada linha deve conter um elemento DIV ocupando 4 colunas e cada elemento DIV deve ter volume gerado apenas por margens internas (paddings). Feito isso, usando as classes relacionadas a margens, organize os elementos DIV da seguinte forma: na primeira linha, deve estar alinhado à esquerda; na segunda linha, deve estar centralizado; e, na terceira linha, deve estar alinhado à direita.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao05.html
 
 Voltar ao Índice
 Questão 05
 Usando classes do Bootstrap 5, faça um leiaute com 2 linhas, sendo que:
 		A primeira linha deve conter 5 colunas iguais com DIVs de bordas coloridas de espessura variando de 1 a 5;
		A segunda linha deve conter 4 colunas iguais com DIVs de fundo light contendo, respectivamente, borda à esquerda, borda à direita, borda no topo e borda no rodapé, todas de espessura 5.
 * Use paddings para gerar volume nos elementos DIV e margens inferiores em cada linha para separá-las verticalmente.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao06.html
 
 Voltar ao Índice
 Questão 06
 Usando classes do Bootstrap 5, faça um leiaute com uma linha contendo 6 colunas iguais, onde cada coluna deve ter um elemento DIV com um tipo diferente de arredondamento de canto (topo, rodapé, esquerda, direita, pílula e círculo). Adicione também sombras de tamanho grande a todas as DIVs.
 * Use paddings para gerar volume nos elementos DIV.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao07.html
 
 Voltar ao Índice
 Questão 07
 Usando classes do Bootstrap 5, crie 4 parágrafos com um texto de 60 palavras cada e formate-os da seguinte maneira:
 		O primeiro deve ter alinhamento à esquerda, fonte em itálico e palavras com iniciais maísculas;
		O segundo deve ter alinhamento centralizado, fonte "leve" e palavras em maísculas;
		O terceiro deve ter alinhamento à direita, fonte em negrito e monoespaçada;
		O quarto deve ter alinhamento à esquerda, fonte em seminegrito e texto truncado na primeira linha.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao08.html
 
 Voltar ao Índice
 Questão 08
 Usando classes do Bootstrap 5, crie um leiaute de página responsivo com duas regiões com as seguintes características:
 		A primeira região deve conter o título "Meu Blog";
		A segunda região deve conter o título "Meu Artigo" e 3 parágrafos com 100 palavras cada;
		Até o breakpoint LG, a primeira região deve ficar no topo da página e a segunda região deve vir logo abaixo, sendo que ambas devem ocupar 100% da largura da área de visualização;
		No breakpoint LG ou superior, a primeira região deve ocupar 3 colunas de largura e a segunda região deve ocupar 9 colunas de largura, de forma que a primeira região fique à esquerda da segunda e que o contêiner fique centralizado na área de visualização.
 * Envolva as regiões com um elemento DIV das classes container-fluid e contaner-lg para cumprir os requisitos de largura da página. A classe conteiner-fluid faz o contêiner ocupar 100% da largura da área de visualização, enquanto a classe container-lg faz o contêiner ocupar a largura do breakpoint LG ou superior quando estiver nessa resolução e ficará centralizado na área de visualização.
 
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao09.html
 
 Voltar ao Índice
 Questão 09
 Usando classes do Bootstrap 5, complemente o resultado da questão anterior adicionando um menu fictítio contendo 6 itens com títulos "Artigo 1" ... "Artigo 6". Esse menu deve ser mostrado na primeira região, logo abaixo do título "Meu Blog". Em resoluções até o breakpoint LG, os itens devem ficar um embaixo do outro, alinhados à esquerda, enquanto no breakpoint LG ou superior, devem ficar um ao lado do outro, centralizado na região.
 
 
 
 
Atividade-Pratica-da-Semana-2-do-Replit/questao10.html
 
 Voltar ao Índice
 Questão 10
 Usando classes do Bootstrap 5, complemente o resultado da questão anterior de forma que esse
 enunciado e a primeira região do leiaute não sejam mostrados quando a página for impressa. Adicione também
 um parágrafo com o texto "Fonte: meublog.com.br" que só deve ser mostrado ao imprimir a página.