Site DASA

Uma releitura do site DASA para exercício em aula.

1 - Abra o protótipo navegável do projeto

O primeiro passo é abrir o link XD abaixo. Nele, você encontrará o protótipo que deve reproduzir com os conhecimentos adquiridos da aula.

https://xd.adobe.com/view/19ee25c1-7f41-4edf-9e84-d45146ecadd1-4cbd/

• O link te dará acesso ao protótipo navegável. Clique nas âncoras da navbar para entender qual animação o site deverá fazer ao ser programado.

• Para acessar as informações de desenvolvimento, basta clicar no botão "< / >" no canto superior direito da página. Lá, você terá acesso às imagens, cores e tamanhos de todos os itens da página.

2 - Faça o download desse arquivo

• Abra o seu terminal git bash.
• Copie o link HTTPS.
• Dê o comando git clone no seu terminal e adicione o link do repositório como no exemplo abaixo.

$ git clone git@github.com:nataliavalentin/atividade-front-end-dasa.git

3 - Abra o projeto no visual studio code

Ainda no terminal, navegue até a pasta do exercício. Para abrí-lo no visual studio code, digite:

$ code .

Desafios

Agora que seu arquivo está aberto, é hora de praticar.

DESAFIO 00:

Adicione o logo DASA na navbar. Dimensione o tamanho de acordo com o projeto XD.

DESAFIO 01:

Crie as âncoras do seu site na navbar.

DESAFIO 02:

Coloque uma imagem de fundo no header.

DESAFIO 03:

Crie o título do header e o botão "clique e assista"

DESAFIO 04:

Adicione a imagem de coração ao fundo da sessão.

DESAFIO 05:

Crie na section o título, o parágrafo e o botão Saiba Mais.

DESAFIO 06:

Adicione a foto à direita e ajuste os espaçamentos da sessão.

DESAFIO 07:

Adicione o título "últimas publicações".

DESAFIO 08:

Crie a primeira publicação. (dica: coloque a imagem e o parágrafo na mesma div, depois é só duplicar para fazer o restante).

DESAFIO 09:

Adicione o texto do footer.

DESAFIO 10:

Adicione as imagens das redes sociais.