3.8 KiB
| id | title | challengeType | forumTopicId | dashedName |
|---|---|---|---|---|
| 587d78af367417b2b2512b04 | Construa uma landing page para um produto | 3 | 301144 | build-a-product-landing-page |
--description--
Objetivo: criar uma aplicação no CodePen.io que tenha função semelhante a esta: https://codepen.io/freeCodeCamp/full/RKRbwL.
Atenda às especificações de usuário abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript e CSS para completar este projeto. É recomendado utilizar CSS puro, pois é disso que trataram as lições até agora. É bom você adquirir alguma prática com CSS. Você pode usar Bootstrap ou SASS se quiser. Outras tecnologias (como, por exemplo, jQuery, React, Angular ou Vue) não são recomendadas para este projeto. Use-as por sua conta e risco. Outros projetos te darão uma chance de trabalhar com diferentes bibliotecas, como o React. Vamos aceitar e tentar corrigir todos os relatórios de problemas que usem a stack de tecnologias sugerida para esse projeto. Boa programação!
Especificação de usuário nº 1: a landing page do produto deve ter um elemento header com um id="header" correspondente.
Especificação de usuário nº 2: deve haver uma imagem dentro do elemento header com um id="header-img" correspondente. Um logotipo da empresa seria uma boa imagem para colocar aqui.
Especificação de usuário nº 3: dentro do elemento #header, deve haver um elemento nav com um id="nav-bar".
Especificação de usuário nº 4: deve haver pelo menos três elementos clicáveis dentro do elemento nav e cada um deles deve ter a classe nav-link.
Especificação de usuário nº 5: ao clicar em um botão com a classe .nav-link no elemento nav, o usuário deve ser levado para a seção correspondente na landing page.
Especificação de usuário nº 6: é possível assistir a um vídeo do produto no elemento de id="video".
Especificação de usuário nº 7: a landing page deve ter um formulário (form) com um id="form".
Especificação de usuário nº 8: dentro do formulário, deve haver um campo de entrada (input) com id="email", onde deve ser possível digitar um endereço de e-mail.
Especificação de usuário nº 9: o campo de entrada #email deve ter um placeholder (texto ilustrativo) para que o usuário saiba para que serve o campo.
Especificação de usuário nº 10: o campo de entrada #email deve usar a validação do próprio HTML5 para confirmar que o texto inserido é um endereço de e-mail.
Especificação de usuário nº 11: dentro do formulário, deve haver um campo de entrada (input) do tipo botão com id="submit".
Especificação de usuário nº 12: quando o elemento #submit for clicado, o e-mail deve ser enviado para uma página estática (use esta URL fictícia: https://www.reecodecamp.com/email-enviar).
Especificação de usuário nº 13: a barra de navegação deve estar sempre na parte superior da viewport.
Especificação de usuário nº 14: a landing page deve ter pelo menos uma media query.
Especificação de usuário nº 15: a landing page deve utilizar pelo menos uma vez o CSS Flexbox.
Você pode fazer o seu projeto usando este modelo da CodePen e, logo após, clicar em Save para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
Quando tiver terminado, envie a URL do seu projeto depois de ele haver passado em todos os testes.
--solutions--
// solution required