PDF do template: Tarefas.pdf
Link no figma: Figma
Arquivos de imagens: template.zip
Estilização
-
Cor primária: #6033DF
-
Fonte: Poppins
Home
-
O conteúdo central do template tem 980px de largura e é centralizado no meio.
-
Criar header com nome do projeto (Tarefas), e link para página de login.
-
O header tem 100px de altura
-
Adicione ilustração com mais ou menos 430px de largura.
-
Adicione o título e subtítulo.
-
Adicione o botão começar agora e os valores abaixo do botão, fictícios.
-
Adicione o painel com a cor primária, que tem 350px de altura e ocupa toda a tela.
-
Adicione as duas nuvens flutuando do lado esquerdo.
-
Adicione os itens fictícios.
-
Adicione o box "nosso time" também com dados fictícios.
-
Adicione o box "depoimentos do time" também com dados fictícios.
-
O usuário poderá navegar clicando nas bolinhas.
-
Criar rodapé. O link do github por enquanto será o link para o site github.
Login e Cadastro
-
Ambas as páginas devem ser criadas com o form com método POST, e o action sendo o mesmo arquivo.
-
O login deverá possuir dois inputs, um de email com o name "email" e outro password com o name "password".
-
O cadastro deverá possuir um input type "text" com o name "name", outro com o type "email" com o name "email", e outro type "password" com o name "password".
-
Logo acima do primeiro input, em ambas as páginas, coloque um box de alerta, para que os erros do backend sejam exibidos. Por exemplo: "Conta não existe!".
-
Ambas possui um link para a outra:
-
Não possui uma conta: direcionada para o cadastro
-
Já possui uma conta: direciona para o login
Dashboard
-
Criar o header como o da home
-
Adicione a imagem e um nome de exemplo.
-
O "Fazer logout" precisa ser um link com o seguinte href: "#"
-
O conteúdo deve ter 400px, estar centralizado horizontalmente e ter 50px de margem do topo.
-
O input deve ser um form com method POST, e action para a mesma página.
-
O input deve ter o name "new_item".
-
Quando o usuário clicar em um item da lista, seja no checkbox ou no texto, o checkbox deve mudar o status de checked. O texto deverá alterar o CSS "text-decoration: line-through;" para ficar com o riscado no texto quando o checkbox estiver marcado.