marianadacunha / avocadoland-landing-page

:computer: Landing Page created for the third challenge proposed by FreeCodeCamp.

General Info

Repository for the code of a landing page, as proposed by FreeCodeAcademy.

"This is an introduction to the Responsive Web Design Projects. By working on projects you have the opportunity of applying all the skills, principles and concepts you have learnt so far HTML, CSS, Visual Design, Accessibility, etc."

This page was build using HTML and CSS, only.

Objective

Build a page that is functionally similar to this this.

Preview

You can see the live site clicking here.

avocadoland-landing-page's Issues

[Fix] Dimensionamento do <iframe> com vídeo por CSS

Problema

Atualmente, o dimensionamento do componente <iframe> é feito é feito no HTML, como aqui.

Solução

Alterar para definir o width e heigth por CSS, assim utilizando também media queries para fazer o conteúdo ser responsivo. Dica: alterar em #video.

Form aceita submissão com campo vazio

Prevenir que o formulário seja submetido sem o campo e-mail preenchido.

Bônus: desabilitar o botão caso o valor não esteja preenchido.

Ajustar título do card

Ajustar título do card, para que preencha melhor o espaço do card.

Atualmente:

Esperado:

Alinhamento do header

Os elementos do header não estão alinhados. Fazer com que eles estejam alinhados.

Atualmente:

Esperado:

Elemento "Features" não centralizado

Problema: A seção "features" não está alinhada. Dessa forma, o elemento parece estar mais alinhado à direita.

Atual:

Esperado:

[Mobile] Botão submit quebrado

Problema

O botão submit está quebrado quando o layout é mobile:

Trocar width: 10vw; em #submit por outra unidade, por exemplo, pixels.