iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 40 forks source link

21º Desafio: Criando inputs com animação de Waves - Peso 2 #26

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Oi, crianças inocentes! Estou aqui para lançar um desafio super legal para vocês. O desafio consiste em criar um formulário incrível com efeitos de onda nos campos de entrada (ou inputs, como dizemos na programação).

O objetivo é deixar o formulário com uma aparência legal, como se os labels do campos estivessem nadando em um oceano de ondas. Para isso, vocês terão que usar as poderosas linguagens HTML, CSS e JavaScript.

Para começar, é importante lembrar que não é permitido o uso de frameworks existentes. Vocês terão que colocar a mão na massa e criar tudo do zero. Mas não se preocupem, vou dar exemplo e dicas para ajudá-los.

Exemplo: CPT2303081012-380x433

E por último, mas não menos importante, lembrem-se de que a prática leva à perfeição. Então, não desistam e continuem tentando até alcançarem o resultado esperado. Divirtam-se!

Additional tips

Uma dica importante é criar uma animação com CSS para simular as ondas nos campos de entrada. Para isso, você pode usar a propriedade "animation" do CSS. É importante definir a duração, o tipo de animação e a direção que as ondas irão seguir.

Outra dica é usar JavaScript para interagir com os campos de entrada. Por exemplo, quando o usuário clicar em um campo, você pode aumentar a intensidade das ondas ou mudar a cor do campo.

rafaelnamel0 commented 1 year ago

Equipe ThreeCoders

RESULTADO FINAL: https://rafaelnamel0.github.io/DESAFIO-21/

Código: https://rafaelnamel0.github.io/DESAFIO-21/

iurygdeoliveira commented 1 year ago

Equipe ThreeCoders

RESULTADO FINAL: https://rafaelnamel0.github.io/DESAFIO-21/

Código: https://rafaelnamel0.github.io/DESAFIO-21/

resposta aceita