Vamos reviver os velhos tempos do Orkut? O Orkut era um site de relacionamentos onde cada pessoa tinha um perfil, podia adicionar amigos, conhecidos, etc, e assim construir sua rede social virtual. Essa era a idéia principal do Orkut, mas, além disso, o site contava com várias ferramentas que o tornava tão atrativo.

🔨 Requisitos

• Utilize apenas HTML e CSS.
• Deve ter um Header com:
  • Logo do Orkut;
  • Menu para página de recados, amigos, comunidades e sair;
  • Mostrar email do usuário logado;
  • input de pesquisa
• Coluna com foto de perfil:
  • Aqui teremos algumas informações do usuário como nome, estado civil e cidade/estado;
  • Botão para adicionar como amigo;
  • Botão de perfil, recados, fotos, vídeos e depoimentos;
• Coluna com a história e reconhecimentos do usuário:
  • Título com o nome do usuário;
  • Quantidade de recados, fotos, vídeos, fãs;
  • Nível confiável, legal e sexy;
  • Aba social, com informações como relacionamento, aniversário, idade, interesses no orkut, quem sou eu, filhos, etnia, animas de estimação, cidade natal, página web e paixões. Fique a vontade para adicionar demais tópicos!
• Amigos adicionados e comunidades que participa:
  • Card com a quantidade de amigos, onde cada amigo adicionado deve possuir uma foto, nome e quantidade de amigos que ele possui adicionado.
  • Card com a quantidade de comunidades que participa, onde cada comunidade deve ter uma foto, nome e quantidade de membros participantes.

💻 Setup do projeto

Sua responsabilidade será implementar tanto o HTML quanto o CSS. Para isso, temos uma sugestão de informações no design disponibilizado, mas sinta-se livre para colocar outras informações relacionadas ao usuário.

Deploy

• Faça o deploy da sua solução e submeta no Codante.

🔍 Dicas

• Estude sobre seletores que podem te ajudar, como o nth-child().
• Saber e entender Flex Box será de grande ajuda.
• Adicionar uma classe em todas as tags pode acabar confundindo, para isso, o conceito de elemento pai, filhos e irmãos pode ajudar.
• Crie classes intuitivas, isso irá facilitar na hora da estilização.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

• HTML e CSS.

❓ FAQ

Posso utilizar React ou outras bibliotecas?

Você pode utilizar as ferramentas que desejar para implementar esse projeto. Porém, o objetivo principal aqui é exercitar os fundamentos de HTML e CSS e a resolução oficial será implementada dessa maneira.

Posso utilizar frameworks de estilo?

Sim! Apesar do objetivo principal desse projeto ser exercitar suas habilidades com CSS puro, fique à vontade para utilizar as ferramentas que desejar.