construcao-de-paginas-web
  • Construção de páginas web
  • Comece por aqui
    • Informação muda tudo
      • Informação muda tudo
    • Como nos comunicamos através da internet
      • Como nos comunicamos através da internet
    • Primeiras marcações
      • Primeiras marcações
      • Desafios
    • Conhecendo a linha de comando
      • Conhecendo a linha de comando
      • Desafios
    • Estruturando páginas
      • Estruturando páginas
      • Desafios
    • Páginas semânticas
      • Páginas semânticas
      • Desafios
    • Construindo formulários
      • Construindo formulários
      • Desafios
    • Começando com Git
      • Começando com Git
      • Desafios
    • Trabalhando com repositórios remotos
      • Trabalhando com repositórios remotos
    • Adicionando Áudio, Imagens, Vídeos
      • Desafios
      • Adicionando Áudio, Imagens, Vídeos
    • Começando com CSS
      • Começando com CSS
      • Desafios
    • As unidades de medidas CSS
      • As unidades de medidas CSS
      • Desafios
    • Modelo de caixa com CSS
      • Modelo de caixa com CSS
      • Desafios
    • As cores na web
      • As cores na web
    • Tipografia
      • Tipografia
    • Introdução ao modelo flexível de caixas
      • Introdução ao modelo flexível de caixas
      • Desafios
    • Posicionamento de elementos com CSS
      • Posicionamento de elementos com CSS
      • Desafios
    • Criando páginas para múltiplos dispositivos
      • Criando páginas para múltiplos dispositivos
      • Desafios
    • Criando páginas acessíveis
      • Acessibilidade
      • Desafios
  • Código de Conduta
  • Contribuindo no VaiNaWeb
Powered by GitBook
On this page
  • Descrevendo um filme
  • Evoluindo minha página

Was this helpful?

  1. Comece por aqui
  2. Introdução ao modelo flexível de caixas

Desafios

Descrevendo um filme

Nesse desafio vamos escolher um filme e criar todo o conteúdo da nossa página sobre ele. Sigam a seguinte estrutura:

  1. Crie um documento HTML com a estrutura básica completa

  2. Crie um header, com um nav

  3. Crie uma lista não ordenada dentro da nav com 3 itens

  4. Adicione as propriedades do Flexbox para centralizar os elementos e deixar a lista em linha

  5. Adicione uma cor, um padding, e position fixed no topo

  6. Crie um main com quatro sections

  7. Em cada section adicione um parágrafo

  8. Adicione um background de sua preferência em cada section

  9. Adicione um padding com o valor de sua preferência nas sections

  10. Adicione uma borda sólida, com uma largura, e cor de sua preferência em cada uma das sections

Evoluindo minha página

  1. Clone seu projeto em sua máquina novamente

  2. Adicione uma nova section

  3. Adicione a essa section um título de nível dois e seis divs com uma altura, cor e largura

  4. Use as propriedades do Flexbox para estilizar a página

PreviousIntrodução ao modelo flexível de caixasNextPosicionamento de elementos com CSS

Last updated 6 years ago

Was this helpful?