WoMakersCode / challenges-front-end

Repositório referente à desafios de front-end da womakerscode

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Formulário de login responsivo

BiancaPereira opened this issue · comments

Sobre o desafio

No dia a dia de um desenvolvedor front-end é muito comum pedirem para que você desenvolva uma tela a partir de um protótipo (um design). Ou seja, transformar um desenho em código.

No caso desse desafio, o protótipo foi desenvolvido no Figma, que é um site muito utilizado pelos designers.

  • O desafio: Desenvolver um site responsivo, ou seja, que funcione tanto no computador como no celular.
  • Tecnologias necessárias: HTML e CSS

Protótipo: https://www.figma.com/file/ZOvAZgzFwSLxqgXRc5r75V/Desafio-frontend-Site-responsivo?node-id=0%3A1

Dicas

  • Para desenvolver um site responsivo com CSS, utilize media query;
  • Se você criar uma conta no Figma (é grátis!), você tem acesso as cores em hexadecimal do layout, pode baixar a imagem de onda, ver qual a fonte utilizada, etc;
  • Não precisa ficar igual, mas o quanto mais parecido melhor;
  • Nos campos do formulário, a label (título do campo) deve "subir" quando a pessoa clica nela e adiciona um texto;
  • Adicione validações com HTML5 no formulário (required, input tipo email);
  • Desenvolva o HTML de forma semântica;
  • Se quiser fazer com cores diferentes, mudar o design, colocar animações, fique a vontade!

Contato

Fique a vontade para comentar aqui em baixo se tiver qualquer dúvida, ou, se preferir, pode mandar um e-mail para compiladoras@gmail.com que eu te respondo!

Ao finalizar o site, deixe o link abaixo para vermos como ficou!