Objetivo: Criar um site estático, semelhante ao Linkedin a partir de conceitos de html5 e css. As etapas de criação são entregues diariamente, ao longo de sete dias pela Natália F. Dev, Desenvolvedora Front-end e Alura Star.
| 🪧 Vitrine.Dev | |
|---|---|
| ✨ Nome | 7DaysOfCode - HTML e CSS (MyLinkedin) |
| 🏷️ Tecnologias | HTML, CSS |
| 🚀 URL | https://kazzenbs.github.io/mylinkedin---7Daysofcode/ |
| 🔥 Desafio | https://7daysofcode.io/matricula/html-css-linkedin |
| 🕔 Status | Completo ✅ |
Projeto feito como desafio do 7DaysOfCode de HTML e CSS, da Alura.
Neste projeto foi possível treinar conceitos como:
- Flexbox CSS
- Posicionamento de elementos
- Variáveis CSS
✅ Day 1 - sessão de perfil ---
Essa seção contém a imagem de capa, a foto de perfil, nome, título, informações de contato, informações da carreira e, no final da seção, botões de ação.
Obs: nessa imagem de perfil usei da propriedade position (absolute / relative) para sobrepor e definir o ponto de referência para movimentação.
✅✅ Day 2 - Navbar ---
O navbar contém dois blocos de elementos. No lado esquerdo, a imagem com a logo do LinkedIn e uma barra de pesquisa. No lado direito, um conjunto de links levando para outras áreas da rede social, sendo eles: Início, Minha rede, Vagas, Mensagens, Notificações, e Soluções.
✅✅✅ Day 3 - Publicações em Destaque
O objetivo consiste em mostrar três cards que representam os resumos de algumas publicações, contendo: imagem da publicação, legenda, quantidade de reações e de comentários.
✅✅✅✅ Day 4 - implementar duas partes da tela : a seção de “Atividades recentes” e a seção “Sobre”
Seção de “Atividades recentes” é muito parecida com o que você já fez na seção “Publicações em Destaque”. A diferença é que a imagem é exibida em escala menor e alinhada ao lado esquerdo; a descrição da publicação ocupa mais espaço do que antes; e a parte inferior da seção possui um link para visualizar mais atividades (redireciona para a própria página).
“Sobre” é bem mais simples em questão de estrutura e estilização. Apenas um título e um parágrafo de texto justificado.
✅✅✅✅✅ Day 5 - Seção Experiências
Lista de experiências, exibindo o nome da empresa, tempo total de serviço na empresa, cargos, tipo de cargo, duração, e por fim, o local da mesma.
✅✅✅✅✅✅ Day 6 - Seções Formação acadêmica e Idiomas
As duas seções que estão faltando na réplica são “Formação acadêmica” e “Idiomas”. Então, a tarefa de hoje foi basicamente codificar cada uma delas.
