Uma releitura do site DASA para exercício em aula.
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.
- 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
Ainda no terminal, navegue até a pasta do exercício. Para abrí-lo no visual studio code, digite:
$ code .
Agora que seu arquivo está aberto, é hora de praticar.
Adicione o logo DASA na navbar. Dimensione o tamanho de acordo com o projeto XD.
Crie as âncoras do seu site na navbar.
Coloque uma imagem de fundo no header.
Crie o título do header e o botão "clique e assista"
Adicione a imagem de coração ao fundo da sessão.
Crie na section o título, o parágrafo e o botão Saiba Mais.
Adicione a foto à direita e ajuste os espaçamentos da sessão.
Adicione o título "últimas publicações".
Crie a primeira publicação. (dica: coloque a imagem e o parágrafo na mesma div, depois é só duplicar para fazer o restante).
Adicione o texto do footer.
Adicione as imagens das redes sociais.