Desafio Freelancer

O desafio consiste em replicar o site Freelancer e o resultado obtido foi este:

Processo de desenvolvimento

• Criei uma página HTML semântica, utilizando tags apropriadas.

• A página HTML desenvolvida procura seguir as regras de identação, aninhamento e elementos em bloco e elementos inline.

• Foi utilizado também os recursos de atributos como "class" entre outros.

• No CSS explorei bastante a utilização do Flexbox e efeitos como o hover, action e scale.

Considerações gerais para executar o projeto

• 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 :)

Leve em consideração:

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