Para cada tarefa, crie classes separadas em style.css e aplique-as nas tags corretas.
📌 Estrutura de arquivos: index.html + style.css
Reproduza o bloco. Estime o tamanho do pai visualmente:
#2c3e50, dimensões em px#e74c3c, dimensões em %Reproduza o bloco. Estime o tamanho do pai visualmente:
#8e44ad, dimensões em px#f1c40f, dimensões em %Reproduza os blocos aninhados. Estime o tamanho do pai visualmente:
#16a085, dimensões em px#e67e22, dimensões em %Três blocos filhos em coluna dividem a altura do pai. Estime o tamanho do pai visualmente:
#2d3436, dimensões em px#e74c3c, dimensões em %#3498db, dimensões em %#2ecc71, dimensões em %O pai depende da janela do navegador, dois filhos em coluna. Estime os valores visualmente:
#c0392b, largura em vw, altura em vh#f1c40f, dimensões em %#9b59b6, dimensões em %O pai depende da janela do navegador, três filhos em coluna. Estime os valores visualmente:
#6c5ce7, largura em vw, altura em vh#e17055, dimensões em %#00cec9, dimensões em %#fdcb6e, dimensões em %O pai depende da janela, o filho depende do pai. Estime os valores visualmente:
#00b894, largura em vw, altura em vh#fd79a8, dimensões em %O pai depende da janela, o filho depende do pai. Estime os valores visualmente:
#e17055, largura em vw, altura em vh#0984e3, dimensões em %Três níveis: pai a partir da janela, cada filho a partir do seu próprio pai. Estime os valores visualmente:
#2c3e50, largura em vw, altura em vh#e74c3c, dimensões em %#f1c40f, dimensões em %% é calculado a partir do seu pai direto!Três blocos filhos em coluna dentro de um pai. Estime os valores visualmente:
#2c3e50, largura em vw, altura em vh#e74c3c, dimensões em %#f39c12, dimensões em %#2ecc71, dimensões em %
📌 Importante:
Cada classe é escrita separadamente em style.css.
Use apenas HTML e CSS.
Pratique as unidades:
%,
vw,
vh.