• Track: Common Core
• Curso: Criando um site interativo
• Unidad: Layout da Web com HTML & CSS

Para completar este desafio, criamos um repositório boilerplate (template inicial) com todos os recursos necessários. Isso inclui imagens, estrutura de pastas e arquivos onde você irá escrever seu código.

Com os arquivos HTML e CSS relacionados criar uma página igual ao exemplo mostrado.

• Criar um corpo HTML padrão com diversas partes e inserir todo o conteúdo de texto e imagens conforme a sequência mostrada na página.
• Formatar no CSS o posicionamento correto dos botões, textos, imagens etc através principalmente das classes criadas para cada parte do HTML.
• Formatar as cores, fontes, botões caixas de texto, etc com cores e tamanhos semelhantes ao exemplo.
• Utilizar principalmente flexbox para o posicionamento dos elementos adicionados na página através dos elementos-mãe e as propriedades para elementos-filhas.

O desafio consiste em replicar o site Freelancer e o resultado desejado é este:

• Encontrará um arquivo-base index.html no qual deverá escrever a estrutura de seu projeto e linkar seus arquivos de estilo(CSS).

• Na pasta css terá um arquivo-base main.css onde você irá adicionar os estilos necessários em seu projeto.

• Dentro da pasta assets se encontra a pasta images onde estão todas as imagens necessárias para completar seu projeto.

• Você deverá atualizar o arquivo README.md explicando o conteúdo de seu repositório.

• Esta página utiliza duas fontes: Montserrat e Lato.

• A paleta de cores pode ser obtida inspecionando o site original, porém para pouparmos tempo você pode usar as seguintes: #2c3e50, #18bc9c e #212529.

• Os ícones das redes sociais podem ser encontrados em Font Awesome.

• Neste desafio, encontrará coisas que possivelmente ainda não viu em classe, como formulários. Não se preocupe, temos certeza que se sairá bem. Aqui ficam algumas dicas:

  • Para o formulário, revise tags como form, input, button.

• O sublinhado com estrela que aparece em algumas seções do site, no endereço original, foi feita com um ícone e pseudo-elementos (:after, :before). Este é um desafio divertido, sendo assim não se preocupe em focar nesta parte de início, ma vez que não é o objetivo principal do desafio! :)

• Pode conferir o site original para que tenha uma ideia do resultado final.

  Nota: o site original tem certos efeitos e funcionalidades que estão fora do alcance desse desafio. Mantenha o foco em obter um leiaute o mais próximo possível, usando o que aprendemos até agora :)

• Nomes de classes, ids e etc
• Indentação
• Arquivo README.md atualizado e escrito corretamente