É hora da sua primeira tarefa neste curso.
Na primeira atribuição,
vamos fornecer-lhe a página aboutus.html sem estilo.
O arquivo zip que contém essa
página aboutus.html está disponível nas instruções de atribuição.
Então você precisa baixar a página e, em seguida, mover essa página para a sua pasta con Fusion.
Depois disso, você aplicará
classes Bootstrap e a grade Bootstrap Flexbox para estilizar a página, em
seguida, você move a página para a pasta Con Fusion,
então você pode visualizar a página em seu navegador digitando
localhost:3000/aboutus.html e seu servidor de compilação luz até a página aboutus.html,
então esta é a única maneira que você pode obter para ver a página.
Então, para começar,
a página vai ficar assim,
uma página completamente Unstyle que apenas contém conteúdo.
Agora seu trabalho é passar por três tarefas, a fim de formatar esta página.
Vejamos as três tarefas com mais detalhes.
Sua primeira tarefa é aplicar
o CSS Bootstraps e as classes Javascript para a
página aboutus.html para que esta página seja instantaneamente transformada nesta página,
onde assim que você adicionar as classes Bootstraps CSS e JavaScript,
o cabeçalho e rodapé serão formatados automaticamente corretamente,
porque eu simplesmente copiei o cabeçalho no rodapé da página index.html para
esta página e deixei toda a formatação Bootstrap como tal,
mas o conteúdo real da página ainda é deixado sem estilo.
Então, agora, como segunda tarefa,
você vai aplicar a grade Bootstraps Flexbox incluindo o Container,
as linhas e as classes de coluna a
este conteúdo ou à página para que você possa estilizá-lo corretamente.
Agora, quando aplicar as classes,
você vai aplicar as classes de linha e coluna para o aboutus para apenas deixá-lo como tal.
Em seguida, você vai aplicar as classes de linha e coluna para
este conteúdo para que este conteúdo ocupe apenas metade da tela
e, em seguida, você vai aplicar as classes de linha e coluna para
este conteúdo de modo que tem ocupa toda a largura da tela.
Então, escolha as classes de linha e coluna corretamente para aplicar a isso.
Você pode usar as classes CSS personalizadas que já
implementamos para o index.html adicionando o arquivo style.css,
também para estilizar o conteúdo nesta página.
Então, quando você concluir a segunda tarefa,
sua página vai acabar sendo estilizada assim.
Então você pode ver que a página aboutus existe em sua própria.
Em seguida, parte Nossa História,
observe que em um tamanho de tela pequeno a grande,
a Nossa História ocupará apenas metade da largura da tela.
Em seguida, a parte Liderança Corporativa ocupa toda a largura da tela neste caso.
Esta é a segunda tarefa que você precisa concluir em sua tarefa.
Para a terceira tarefa, como você pode ver,
este layout de conteúdo parece bom para tamanhos de tela maiores,
mas quando você vai para o tamanho de tela extra pequeno especialmente como este,
você percebe que o conteúdo é demais nesta seção.
Então, o que gostaríamos de fazer é usar outra classe Bootstrap fornecida para nós chamado,
[inaudível] e DSM block.
Há um link para as classes responsivas nos recursos de atribuição,
para que você possa conferir a documentação do bloco [inaudível] e DSM.
Você precisa aplicá-los para que esta descrição fique
oculta nos tamanhos de tela extra pequenos.
Então, quando você as classes para esta parte de liderança corporativa,
o mesmo conteúdo agora será colocado para fora sem a descrição, de
modo que ele será escondido no tamanho extra telas pequenas.
Mas quando você vai para o pequeno tamanho de tela grande,
o conteúdo ficará visível.
Assim, você pode notar que para o tamanho de tela extra pequeno,
o conteúdo está oculto,
mas para o tamanho da tela pequena,
esse conteúdo de descrição será mostrado claramente.
Então esta é a sua terceira tarefa na sua missão.
Enquanto você está nisso, você também pode aplicar as mesmas classes às
descrições em nossa página index.html
para que as descrições detalhadas dos itens de conteúdo também sejam ocultas
na página index.html quando ela é visualizada em tamanhos de tela extra pequenos.
Isso conclui sua primeira tarefa.
Além disso, quando você enviar sua tarefa,
faça uma captura de tela de página inteira do seu layout,
tanto em
tamanho de tela pequeno a extra grande quanto no tamanho de tela extra pequeno,
e depois inclua isso como parte de seu envio.
Para fazer uma captura de tela de página inteira no Chrome,
você pode usar uma extensão do Chrome disponível para nós,
o link para a extensão do Chrome é fornecido nos
recursos de atribuição que seguem a descrição da atribuição.
Depois de concluir sua atribuição,
caso você esteja salvando suas alterações em um Repositório Git,
não se esqueça de confirmar as alterações em
seu Repositório Git com a Atribuição de Mensagem Um.