{"id":28223434,"url":"https://github.com/lmuffato/project-facebook-signup-trybe","last_synced_at":"2025-06-26T01:03:07.856Z","repository":{"id":139798685,"uuid":"412898222","full_name":"lmuffato/Project-facebook-signup-Trybe","owner":"lmuffato","description":"Projeto facebook signup - Projeto avaliativo da Trybe do Bloco 06: HTML e CSS: Forms, Flexbox e Responsivo","archived":false,"fork":false,"pushed_at":"2021-10-02T19:54:45.000Z","size":23158,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"lmuffato-facebook-project","last_synced_at":"2025-06-12T00:42:05.257Z","etag":null,"topics":["css","flexbox-css","forms","front-end","html","trybe-projects"],"latest_commit_sha":null,"homepage":"https://github.com/tryber/sd-010-a-project-facebook-signup/pull/94","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lmuffato.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-10-02T19:54:06.000Z","updated_at":"2021-11-22T23:34:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"f4251caa-9e8c-439d-9f68-c753bf1bbfec","html_url":"https://github.com/lmuffato/Project-facebook-signup-Trybe","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/lmuffato/Project-facebook-signup-Trybe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-facebook-signup-Trybe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-facebook-signup-Trybe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-facebook-signup-Trybe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-facebook-signup-Trybe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lmuffato","download_url":"https://codeload.github.com/lmuffato/Project-facebook-signup-Trybe/tar.gz/refs/heads/lmuffato-facebook-project","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lmuffato%2FProject-facebook-signup-Trybe/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261978909,"owners_count":23239417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","flexbox-css","forms","front-end","html","trybe-projects"],"created_at":"2025-05-18T08:09:37.456Z","updated_at":"2025-06-26T01:03:07.824Z","avatar_url":"https://github.com/lmuffato.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"### Termos e acordos\n\nAo iniciar este projeto, você concorda com as diretrizes do Código de Ética e Conduta e do Manual da Pessoa Estudante da Trybe.\n\n---\n\n# Boas vindas ao repositório do projeto Página de Login do Facebook!\n\nVocê já usa o GitHub diariamente para desenvolver os exercícios, certo? Agora, para desenvolver os projetos, você deverá seguir as instruções a seguir. Atenção a cada passo, e se tiver qualquer dúvida, nos envie por _Slack_! #vqv 🚀\n\nAqui você vai encontrar os detalhes de como estruturar o desenvolvimento do seu projeto à partir desse repositório, utilizando uma branch específica e um _Pull Request_ para colocar seus códigos.\n\n---\n\n## Sumário\n\n- [Habilidades](#habilidades)\n- [Entregáveis](#entregáveis)\n  - [O que deverá ser desenvolvido](#o-que-deverá-ser-desenvolvido)\n  - [Desenvolvimento](#desenvolvimento)\n  - [Data de entrega](#data-de-entrega)\n- [Instruções para entregar seu projeto](#instruções-para-entregar-seu-projeto)\n  - [Antes de começar a desenvolver](#antes-de-começar-a-desenvolver)\n  - [Durante o desenvolvimento](#durante-o-desenvolvimento)\n  - [Depois de terminar o desenvolvimento (opcional)](#depois-de-terminar-o-desenvolvimento-opcional)\n  - [Dicas](#dicas)\n- [Como desenvolver](#como-desenvolver)\n- [ESLint](#eslint)\n- [Requisitos do projeto](#requisitos-do-projeto)\n- [Lista de requisitos obrigatórios](#lista-de-requisitos-obrigatórios)\n  - [1. Crie uma barra azul na parte superior da página](#1-crie-uma-barra-azul-na-parte-superior-da-página)\n  - [2. Posicione o logotipo do Facebook no canto esquerdo na barra superior](#2-posicione-o-logotipo-do-facebook-no-canto-esquerdo-na-barra-superior)\n  - [3. Adicione um formulário de autenticação no canto direito da barra superior](#3-adicione-um-formulário-de-autenticação-no-canto-direito-da-barra-superior)\n  - [4. Crie uma classe no CSS](#4-crie-uma-classe-no-CSS)\n  - [5. Adicione um subcontainer para agrupar o rótulo e campo \"E-mail ou telefone\" dentro do formulário criado na etapa 3](#5-adicione-um-subcontainer-para-agrupar-o-rótulo-e-campo-\"E-mail-ou-telefone\"-dentro-do-formulário-criado-na-etapa-3)\n  - [6. Adicione um subcontainer para agrupar o rótulo e campo \"Senha\" dentro do formulário criado na etapa 3](#6-adicione-um-subcontainer-para-agrupar-o-rótulo-e-campo-\"Senha\"-dentro-do-formulário-criado-na-etapa-3)\n  - [7. Adicione um subcontainer com o botão \"Entrar\" dentro do formulário criado na etapa 3](#7-adicione-um-subcontainer-com-o-botão-\"Entrar\"-dentro-do-formulário-criado-na-etapa-3)\n  - [8. Crie um container com a classe main-content abaixo da barra azul para agrupar o conteúdo principal da página](#8-crie-um-container-com-a-classe-main-content-abaixo-da-barra-azul-para-agrupar-o-conteúdo-principal-da-página)\n  - [9. Crie um subcontainer para colocar o conteúdo do lado esquerdo](#9-crie-um-subcontainer-para-colocar-o-conteúdo-do-lado-esquerdo)\n  - [10. Crie um subcontainer para colocar o conteúdo do lado direito](#10-crie-um-subcontainer-para-colocar-o-conteúdo-do-lado-direito)\n  - [11. Crie um campo de entrada de texto para o nome do usuário dentro do formulário criado no requisito 10](#11-crie-um-campo-de-entrada-de-texto-para-o-nome-do-usuário-dentro-do-formulário-criado-no-requisito-10)\n  - [12. Crie um campo de entrada de texto para o sobrenome do usuário dentro do formulário criado no requisito 10](#12-crie-um-campo-de-entrada-de-texto-para-o-sobrenome-do-usuário-dentro-do-formulário-criado-no-requisito-10)\n  - [13. Crie um campo de entrada de texto para o celular ou email do usuário dentro do formulário criado no requisito 10](#13-crie-um-campo-de-entrada-de-texto-para-o-celular-ou-email-do-usuário-dentro-do-formulário-criado-no-requisito-10)\n  - [14. Crie um campo de entrada para senha do usuário dentro do formulário criado no requisito 10](#14-crie-um-campo-de-entrada-para-senha-do-usuário-dentro-do-formulário-criado-no-requisito-10)\n  - [15. Crie um campo de entrada para data de nascimento do usuário dentro do formulário criado no requisito 10](#15-crie-um-campo-de-entrada-para-data-de-nascimento-do-usuário-dentro-do-formulário-criado-no-requisito-10)\n  - [16. Crie um campo de entrada para gênero do usuário dentro do formulário criado no requisito 10](#16-crie-um-campo-de-entrada-para-gênero-do-usuário-dentro-do-formulário-criado-no-requisito-10)\n  - [17. Crie um botão para finalizar o cadastro dentro do formulário criado no requisito 10](#17-crie-um-botão-para-finalizar-o-cadastro-dentro-do-formulário-criado-no-requisito-10)\n  - [18. Validar se todos os campos foram preenchidos ao clicar no botão Cadastre-se](#18-validar-se-todos-os-campos-foram-preenchidos-ao-clicar-no-botão-cadastre-se)\n  - [19. Adicione um novo campo de texto no formulário se a pessoa usuária selecionar a opção `Personalizado` no campo Gênero](#19-adicione-um-novo-campo-de-texto-no-formulário-se-a-pessoa-usuária-selecionar-a-opção-personalizado-no-campo-gênero)\n  - [20. Substitua o conteúdo do container com a classe right-content se o formulário estiver completamente preenchido e validado](#20-substitua-o-conteúdo-do-container-com-a-classe-right-content-se-o-formulário-estiver-completamente-preenchido-e-validado)\n  - [Requisito Bônus](#requisito-bônus)\n- [Avisos finais](#avisos-finais)\n\n---\n\n## Habilidades\n\nNeste projeto, verificaremos se você é capaz de:\n\n  * Criar formulários em HTML;\n\n  * Utilizar CSS Flexbox para criar layouts flexíveis;\n\n  * Criar regras CSS específicas para serem aplicadas a dispositivos móveis;\n\n  * Construir páginas que alteram o seu layout de acordo com a orientação da tela;\n\n---\n\n## Entregáveis\n\nPara entregar o seu projeto você deverá criar um Pull Request neste repositório.\n\nLembre-se que você pode consultar nosso conteúdo sobre [Git \u0026 GitHub](https://app.betrybe.com/course/fundamentals/git) sempre que precisar!\n\n### O que deverá ser desenvolvido\n\nNeste projeto, você irá desenvolver a página inicial do Facebook. O projeto deve ser o mais parecido possível. Respeitando os requisitos, tente fazer uma cópia perfeita!\n\n### Desenvolvimento\n\n⚠️ É importante que seus arquivos tenham exatamente estes nomes! ⚠️\n\nO seu Pull Request deverá conter os arquivos `index.html`, `style.css` e `script.js`, que conterão seu código HTML, CSS e JavaScript, respectivamente.\n\nVocê pode adicionar outros arquivos se julgar necessário. Qualquer dúvida, procure o time de instrução.\n\n### Data de Entrega\n\n  - Será `1` dia de projeto.\n  - Data de entrega para avaliação final do projeto: `29/03/2021 - 14:00h`.\n\n---\n\n## Instruções para entregar seu projeto:\n\n### Antes de começar a desenvolver:\n\n1. Clone o repositório\n  * `git clone https://github.com/tryber/sd-010-a-project-facebook-signup.git`.\n  * Entre na pasta do repositório que você acabou de clonar:\n    * `cd sd-010-a-project-facebook-signup`\n\n2. Crie uma branch a partir da branch `master`\n  * Verifique que você está na branch `master`\n    * Exemplo: `git branch`\n  * Se não estiver, mude para a branch `master`\n    * Exemplo: `git checkout master`\n  * Agora, crie uma branch onde você vai guardar os `commits` do seu projeto\n    * Você deve criar uma branch no seguinte formato: `nome-de-usuario-nome-do-projeto`\n    * Exemplo: `git checkout -b joaozinho-facebook-project`\n\n3. Crie na raiz do projeto os arquivos que você precisará desenvolver:\n  * Verifique que você está na raiz do projeto\n    * Exemplo: `pwd` -\u003e o retorno vai ser algo tipo _/Users/joaozinho/code/**sd-010-a-project-facebook-signup**_\n  * Crie os arquivos index.html, style.css e script.js\n    * Exemplo: `touch index.html style.css script.js`\n\n4. Adicione as mudanças ao _stage_ do Git e faça um `commit`\n  * Verifique que as mudanças ainda não estão no _stage_\n    * Exemplo: `git status` (devem aparecer listados os novos arquivos em vermelho)\n  * Adicione o novo arquivo ao _stage_ do Git\n      * Exemplo:\n        * `git add .` (adicionando todas as mudanças - _que estavam em vermelho_ - ao stage do Git)\n        * `git status` (devem aparecer listados os arquivos em verde)\n  * Faça o `commit` inicial\n      * Exemplo:\n        * `git commit -m 'iniciando o projeto. VAMOS COM TUDO :rocket:'` (fazendo o primeiro commit)\n        * `git status` (deve aparecer uma mensagem tipo _nothing to commit_ )\n\n5. Adicione a sua branch com o novo `commit` ao repositório remoto\n  * Usando o exemplo anterior: `git push -u origin joaozinho-facebook-project`\n\n6. Crie um novo `Pull Request` _(PR)_\n  * Vá até a página de _Pull Requests_ do [repositório no GitHub](https://github.com/tryber/sd-010-a-project-facebook-signup/pulls)\n  * Clique no botão verde _\"New pull request\"_\n  * Clique na caixa de seleção _\"Compare\"_ e escolha a sua branch **com atenção**\n  * Clique no botão verde _\"Create pull request\"_\n  * Adicione uma descrição para o _Pull Request_, um título claro que o identifique, e clique no botão verde _\"Create pull request\"_\n  * **Não se preocupe em preencher mais nada por enquanto!**\n  * Volte até a [página de _Pull Requests_ do repositório](https://github.com/tryber/sd-010-a-project-facebook-signup/pulls) e confira que o seu _Pull Request_ está criado\n\n---\n\n### Durante o desenvolvimento\n\n* Faça `commits` das alterações que você fizer no código regularmente;\n\n* Lembre-se de sempre após um (ou alguns) `commits` atualizar o repositório remoto;\n\n* Os comandos que você utilizará com mais frequência são:\n\n  1. `git status` _(para verificar o que está em vermelho - fora do stage - e o que está em verde - no stage)_;\n\n  2. `git add` _(para adicionar arquivos ao stage do Git)_;\n\n  3. `git commit` _(para criar um commit com os arquivos que estão no stage do Git)_;\n\n  5. `git push -u nome-da-branch` _(para enviar o commit para o repositório remoto na primeira vez que fizer o `push` de uma nova branch)_;\n\n  4. `git push` _(para enviar o commit para o repositório remoto após o passo anterior)_.\n\n---\n\n### Dicas\n\n- Para colocar sua página no [GitHub Pages](https://pages.github.com/), não é necessário remover o conteúdo que já está lá, você pode apenas adicionar essa nova página. Para isso, todo o conteúdo desse projeto deve ser colocado em uma pasta `/projetos/facebook-signup`.\n\n---\n\n## Como desenvolver\n\nVocê irá desenvolver este projeto em **dupla** e é fundamental que siga as instruções do repositório.\n\nTodos os requisitos tem como base a página do **Facebook**. Use a imagem do site, além de acessar [este link com a página antiga de cadastro/login](https://web.archive.org/web/20200101163229if_/https://pt-br.facebook.com/). Tente ser o mais fiel possível.\n\nUse a inspeção de código para verificar a estrutura da página de cadastro/login do **Facebook**.\n\n![Página Facebook](./facebook.png)\n\n---\n\n### Observações técnicas:\n\nAlgumas coisas devem seguir um padrão pré-estabelecido para que os teste de correção funcionem corretamente.\n\n⚠️ Leia-os atentamente e siga à risca o que for pedido. Em particular, **atente-se para os nomes de _ids_ que alguns elementos de seu projeto devem possuir**. ⚠️\n\n⚠ **Alguns requisitos pedem para utilizar flexbox. Tenha atenção no que é solicitado caso vá usar algum framework CSS para que os requisitos sejam atendidos.** ⚠\n\nO não cumprimento de um requisito, total ou parcialmente, impactará em sua avaliação.\n\n* Os requisitos do seu projeto são avaliados automaticamente, sendo utilizada a resolução de tela de `1366 x 768` (1366 pixels de largura por 768 pixels de altura).\n\n  * #### ⚠️ Logo, recomenda-se desenvolver seu projeto usando a mesma resolução, via instalação [deste plugin](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en) do `Chrome` para facilitar a configuração da resolução. ⚠️\n\n* Atente-se para o tamanho das imagens que você utilizará neste projeto. **Não utilize imagens com um tamanho maior que _500Kb_.**\n  * #### ⚠️ Utilize uma ferramenta [como esta](https://picresize.com/pt) para redimensionar as imagens. ⚠️\n\n  * Caso a avaliação falhe com alguma mensagem de erro parecida com `[409:0326/130838.878602:FATAL:memory.cc(22)] Out of memory. size=4194304`, provavelmente as imagens que você está utilizando estão muito grandes. Tente redimensioná-las para um tamanho menor.\n\n* Para verificar se a sua avaliação foi computada com sucesso, você pode verificar os **detalhes da execução do avaliador**.\n\n  * Na página do seu _Pull Request_, acima do \"botão de merge\", procure por _**\"Evaluator job\"**_ e clique no link _**\"Details\"**_;\n\n  * Na página que se abrirá, procure pela linha _**\"Cypress evaluator step\"**_ e clique nela;\n\n  * Analise os resultados a partir da mensagem _**\"(Run Starting)\"**_;\n\n  * Caso tenha dúvidas, consulte [este vídeo](https://vimeo.com/420861252) ou procure a monitoria.\n\n* Você tem liberdade para adicionar novos comportamentos ao seu projeto, seja na forma de aperfeiçoamentos em requisitos propostos ou novas funcionalidades, **desde que tais comportamentos adicionais não conflitem com os requisitos propostos**.\n\n  * Em outras palavras, você pode fazer mais do que for pedido, mas nunca menos.\n\n* Contudo, tenha em mente que **nada além do que for pedido nos requisitos será avaliado**. _Esta é uma oportunidade de você exercitar sua criatividade e experimentar com os conhecimentos adquiridos._\n\n---\n\n## ESLint\n\n⚠️ Lembre-se que o seu projeto só será avaliado se estiver passando pelos _checks_ do **ESLint**.\n\nPara garantir a qualidade do código, vamos utilizar neste projeto os linters ESLint e StyleLint. Assim o código estará alinhado com as boas práticas de desenvolvimento, sendo mais legível e de fácil manutenção! Para rodá-los localmente no projeto, execute os comandos abaixo:\n\n```bash\nnpm run lint\nnpm run lint:styles\n```\n\nQuando é executado o comando npm run lint:styles, será avaliado se os arquivos com a extensão CSS estão com o padrão correto.\nQuando é executado o comando npm run lint, será avaliado se os arquivos com a extensão JS e JSX estão com o padrão correto.\n\n---\n\n## Requisitos do projeto\n\nCaso você faça o download de bibliotecas externas, utilize o diretório libs (à partir da raiz do projeto) para colocar os arquivos (*.css, *.js, etc...) baixados.\n\n### Lista de requisitos obrigatórios:\n\n### 1. Crie uma barra azul na parte superior da página\n\n  Pontos importantes:\n  * A barra deve ter a classe top-bar\n  * A classe top-bar deve determinar que o elemento é um flex container\n  * A classe top-bar deve possuir a propriedade `background-color: rgb(66, 103, 178)`\n\n\n### 2. Posicione o logotipo do Facebook no canto esquerdo na barra superior\n\n  Pontos importantes:\n  * Deve existir um elemento img com a classe facebook-logo\n  * O logotipo deve estar alinhado a esquerda dentro da barra azul\n  * O atributo src do logotipo deve apontar para imgs/facebook-logo.png\n\n\n### 3. Adicione um formulário de autenticação no canto direito da barra superior\n\n  Pontos importantes:\n  * O formulário deve estar alinhado a direita dentro da barra azul\n  * Existe formulário com uma classe chamada facebook-login\n  * O formulário deve ser um flex container\n\n\n### 4. Crie uma classe no CSS \n\n  Pontos importantes:\n  * Essa classe deve se chamar form-group\n  * Essa classe deve possuir a propriedade `diplay: flex`\n  * Alinhe o eixo principal dessa classe para ser o eixo vertical\n\n\n### 5. Adicione um subcontainer para agrupar o rótulo e campo \"E-mail ou telefone\" dentro do formulário criado na etapa 3\n\n  Pontos importantes:\n  * Este subcontainer deve ter a classe `form-group`\n  * Dentro do subcontainer `form-group` criado, deve haver um rótulo com o id user-email-phone-label e o texto \"Email ou telefone\"\n  * Dentro do subcontainer `form-group` criado, abaixo do rótulo deve haver campo de entrada de texto para receber o email ou o telefone do usuário com o id user-email-phone'\n\n### 6. Adicione um subcontainer para agrupar o rótulo e campo \"Senha\" dentro do formulário criado na etapa 3\n\n  Pontos importantes:\n  * Deve haver um novo subcontainer utilizando a classe `form-group`\n  * Dentro do novo subcontainer `form-group` criado, deve haver um rótulo com o id user-password-label e o texto \"Senha\"\n  * Dentro do novo subcontainer `form-group` criado, abaixo do rótulo deve haver campo de entrada para senha com o id user-password\n\n### 7. Adicione um subcontainer com o botão \"Entrar\" dentro do formulário criado na etapa 3\n\n  Pontos importantes:\n  * Deve haver um novo subcontainer utilizando a classe `form-control`\n  * Crie uma classe no CSS form-control com a propriedade `align-self: flex-end`\n  * Dentro do novo subcontainer `form-control` criado, deve haver um botão com o id \"button-login\" e o texto \"Entrar\"\n  * O botão deve estar alinhado a direita do campo de entrada para senha\n  * Ao clicar no botão com o id #button-login deve exibir um alert com o valor do campo \"Email ou telefone\"\n\n### 8. Crie um container abaixo da barra azul para agrupar o conteúdo principal da página\n\n  Pontos importantes:\n  * Crie um elemento com a classe main-content\n  * O elemento deve ser um flex container no eixo horizontal\n  * O elemento deve posicionado abaixo da barra azul\n\n\n### 9. Crie um subcontainer para colocar o conteúdo do lado esquerdo\n\n  Pontos importantes:\n  * Crie o subcontainer dentro do container com a classe main-content\n  * O subcontainer deve ter a classe left-content\n  * A classe left-content deve ter uma largura de 800px\n  * Dentro do container com a classe left-content deve existir um parágrafo com id facebook-slogan e o texto \"O Facebook ajuda você a se conectar e compartilhar com as pessoas que fazem parte da sua vida.\"\n  * Dentro do container com a classe left-content deve existir abaixo do parágrafo com id facebook-slogan uma imagem com id facebook-networking e o src com o endereço `imgs/networking.png`.\n\n\n### 10. Crie um subcontainer para colocar o conteúdo do lado direito\n\n  Pontos importantes:\n  * Crie o subcontainer dentro do container com a classe main-content\n  * O novo subcontainer deve ter a classe right-content\n  * A classe right-content deve ter uma largura de 300px\n  * Utilize na classe main-content a propriedade justify-content com o valor mais apropriado para alinhar os conteúdos\n  * Dentro do subcontainer com a classe right-content deve existir um elemento h1 com o texto \"Abra uma conta\"\n  * Dentro do subcontainer com a classe right-content deve existir um elemento com a classe quick-easy com o texto \"É rápido e fácil.\" posicionado abaixo do texto \"Abra uma conta\"\n  * Dentro do subcontainer com a classe right-content deve existir um elemento form abaixo do texto \"É rápido e fácil.\"\n  * O elemento com a classe right-content deve estar a direita do elemento com a classe left-content\n\n\n### 11. Crie um campo de entrada de texto para o nome do usuário dentro do formulário criado no requisito 10\n\n  Pontos importantes:\n  * O campo deve ter o atributo name com o valor \"firstname\"\n  * O campo deve ter um placeholder com o valor \"Nome\"\n\n\n### 12. Crie um campo de entrada de texto para o sobrenome do usuário dentro do formulário criado no requisito 10\n  Pontos importantes:\n  * O campo deve ter o atributo name com o valor \"lastname\"\n  * O campo deve ter um placeholder com o valor \"Sobrenome\"\n  * Esse campo deve estar alinhado a direita do campo de Nome\n\n\n### 13. Crie um campo de entrada de texto para o celular ou email do usuário dentro do formulário criado no requisito 10\n\n  Pontos importantes:\n  * O campo deve ter o atributo name com o valor \"phone_email\"\n  * O campo deve ter um placeholder com o valor \"Celular ou email\"\n  * Posicione esse campo abaixo do campo do nome do usuário\n\n\n### 14. Crie um campo de entrada para senha do usuário dentro do formulário criado no requisito 10\n\n  Pontos importantes:\n  * O campo deve ter o atributo name com o valor \"password\"\n  * O campo deve ser do tipo \"password\"\n  * O campo deve ter um placeholder com o valor \"Nova senha\"\n  * Posicione esse campo abaixo do celular/email\n\n\n### 15. Crie um campo de entrada para data de nascimento do usuário dentro do formulário criado no requisito 10\n\n  Pontos importantes:\n  * Um rótulo abaixo do campo nova senha com o id label-birthdate e o texto \"Data de nascimento\"\n  * O campo deve ter o atributo name com o valor \"birthdate\"\n  * O campo deve ser do tipo \"text\"\n  * O campo deve ter um placeholder com o valor \"dd/mm/aaaa\"\n  * Posicione esse campo abaixo do rótulo\n\n\n### 16. Crie um campo de entrada para gênero do usuário dentro do formulário criado no requisito 10\n\n  Pontos importantes:\n  * Um rótulo abaixo do campo nova senha com o id label-gender e o texto \"Gênero\"\n  * O campo deve ser formado por três `radio buttons` com as opções \"Feminino\", \"Masculino\" e \"Personalizado\"\n  * Os `radio buttons` devem ter o atributo name com o valor \"gender\"\n  * Posicione os radio buttons para ficar na mesma linha\n  * Posicione os radio buttons para ficar abaixo do label\n\n\n### 17. Crie um botão para finalizar o cadastro dentro do formulário criado no requisito 10\n\n  Pontos importantes:\n  * Um botão com o texto \"Cadastre-se\" e id \"facebook-register\"\n  * Deve ter a propriedade type igual a submit\n\n\n### 18. Validar se todos os campos foram preenchidos ao clicar no botão Cadastre-se\n\n  Pontos importantes:\n  * Exibir uma mensagem \"Campos inválidos\" dentro do formulário caso pelo menos um campo não esteja preenchido\n\n\n### 19. Adicione um novo campo de texto no formulário se a pessoa usuária selecionar a opção `Personalizado` no campo Gênero\n\n  Pontos importantes:\n  * O novo campo dever ser uma campo de texto com o atributo name \"gender-custom\" e um placeholder \"Gênero (opcional)\"\n  * O novo campo deve estar posicionado entre as opções de gênero e o botão \"Cadastrar-se\"\n\n\n### 20. Substitua o conteúdo do container com a classe right-content se o formulário estiver completamente preenchido e validado\n\n  Pontos importantes:\n  * Deve haver um texto no modelo \"Olá, Jonh Doe\" (substitua John Doe pelo nome e sobrenome preenchido no formulário)\n  * Exibir o e-mail ou telefone\n  * Não exibir a senha\n  * Exibir a data de nascimento\n  * Caso a opção selecionada no campo Gênero seja Feminino exibir \"Feminino\"\n  * Caso a opção selecionada no campo Gênero seja Masculino exibir \"Masculino\"\n  * Caso a opção selecionada no campo Gênero seja Personalizado exibir \"Personalizado\":\n\n\n### Requisito Bônus\n\nEsse requisito **não** é verificável pelo avaliador automático.\n\n**Realize o desenvolvimento da versão mobile do Facebook.**\n\n![Página Facebook](./facebook-mobile.png)\n\n---\n### Depois de terminar o desenvolvimento\n\nPara sinalizar que o seu projeto está pronto para o _\"Code Review\"_ dos seus colegas, faça o seguinte:\n\n* Vá até a página **DO SEU** _Pull Request_, adicione a label de _\"code-review\"_ e marque seus colegas:\n\n  * No menu à direita, clique no _link_ **\"Labels\"** e escolha a _label_ **code-review**;\n\n  * No menu à direita, clique no _link_ **\"Assignees\"** e escolha **o seu usuário**;\n\n  * No menu à direita, clique no _link_ **\"Reviewers\"** e digite `students`, selecione o time `tryber/students-sd-010-a`.\n\nCaso tenha alguma dúvida, [aqui tem um vídeo explicativo](https://vimeo.com/362189205).\n\n---\n\n### Revisando um pull request\n\nÀ medida que você e as outras pessoas que estudam na Trybe forem entregando os projetos, vocês receberão um alerta via Slack para também fazer a revisão dos Pull Requests das outras pessoas estudantes. Atenção às mensagens do \"Pull Reminders\" no Slack!\n\nUse o material que você já viu sobre [Code Review](https://course.betrybe.com/real-life-engineer/code-review/) para te ajudar a revisar os projetos que chegaram para você.\n\n\n# Avisos finais\n\nAo finalizar e submeter o projeto, não se esqueça de avaliar sua experiência preenchendo o formulário. Leva menos de 3 minutos!\n\nLink: [FORMULÁRIO DE AVALIAÇÃO DE PROJETO](https://bit.ly/3ta7hA0)\n\nO avaliador automático não necessariamente avalia seu projeto na ordem em que os requisitos aparecem no readme. Isso acontece para deixar o processo de avaliação mais rápido. Então, não se assuste se isso acontecer, ok?\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmuffato%2Fproject-facebook-signup-trybe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flmuffato%2Fproject-facebook-signup-trybe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flmuffato%2Fproject-facebook-signup-trybe/lists"}