Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #2

Подписаться 20 тыс.

Просмотров 14 тыс.

50% 1

Olá pessoal!
Essa é a parte 2 do formulário com modo DARK e LIGHT.
Para fazer esse formulário eu utilizei HTML, CSS (com FLEXBOX) e JAVASCRIPT.
Repositório do GitHub:
github.com/Larissakich/dark_l...
Site para baixar imagens/ícones:
icons8.com.br/icons/set/google
CDN Font Awesome:
cdnjs.cloudflare.com/ajax/lib...
Fonte Poppins:
@import url('fonts.googleapis.com/css2?fam...
Extensões mais usadas no VSCode:
Live Server
colorize
Elm Emmet
Tema utilizado no VSCode:
Tokyo Night
Redes Sociais:
Instagram: @lariikich
LinkedIn: / larissakich

Наука

Опубликовано:

1 ноя 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 75

@iremarpereiradasilva2250 Месяц назад

Parabéns professora pelos tutoriais de primeira qualidade, nos ajuda de mais, tudo é top, o conteúdo e sua didática, muito bem explicado, nós agradecemos muito. Pedimos que sempre nos ajude, pois para nós iniciantes é muito complexo o mundo da programação. Muito obrigado mesmo.

@wesleyversart5390 Месяц назад

Opa Larissa, assisti seu vídeo hoje e me ajudou muito. Provavelmente você já deve ter achado a forma mais fácil de fazer a transição pro dark e light. Apenas compartilhando com a galera, pra fazer essa transição de forma mais fácil é só colocar a propriedade transition: 0.5 linear no #login_form.

@felipemanson7552 Год назад

Grava um vídeo montando um site completo, seria muito foda. Eu aprendi bastante com os seus vídeos. Parabéns você é muito boa

@larissakich Год назад

Clarooo, já estou planejando um vídeo assim 😄❤️

@klebersanzony Год назад

Super apoiooooooo!!!! amooo seus vídeos!!! Assisto em 0.5 kkkk pq é muito rápido e é incrível do mesmo jeito!!! Só tenho a agradecer viu!!!

@alissontomazelli Год назад

Muito top o video... Obrigado por compartilhar seu conhecimento...

@cristianocarvalho7237 10 месяцев назад

Estou começando na programação e pegando muitas dicas com os seus vídeos. Obrigado por estar compartilhando os seus conhecimentos e por favor não pare de postar projetos pequenos com dicas, mas fundamentais pra quem está no início da estrada.

@herbertfarias6106 11 месяцев назад

Muito top Larissa, parabéns pelo conteudo. Vlw!

@klebersanzony Год назад

Usei transition ao invés de keyframes pra animação do Dark e tbm para o Scale dos ícones e do botão. Agora sei 2 formas de fazer kkkk, gratidão Lariiii!!!

@luanareinholzPersonal Год назад

Estou estudando todos os dias com seus vídeos, estou adorando, sempre aprendendo algum detalhe e coisa nova! Parabéns e obrigada!!

@whoamiservidorasdad 8 месяцев назад

Otimo tutorial, eu gostei muito a forma que você ensinou javascript me ajudou de mais, tem umas pessoas que usar o javascript igual um cavalo e não dar para entender, se você tivesse um curso de Javascript com toda certeza eu compraria

@vitorsiqueira7306 Год назад

Parabéns muito legal e didático. Uma recomendação: fazer o mesmo projeto usando o Tailwind CSS e o Bootstrap para efeito de comparação e estudo.

@MundoEcoSport День назад

Ola, excelente aula parabéns. tem como mostrar como podemos usar essa página de login dentro do Google sites ?

@bryansantos6509 Год назад

Caso o de alguem n funcionou o Js faltou colocar o class do sun ao lado do moon Desse jeito aqui vai funcionar, espero ter ajudado 😁

@juliakarollynedeo.dossanto2297 7 месяцев назад

O meu não funcionou, mas eu não entendi aonde coloca essa parte

@juliakarollynedeo.dossanto2297 7 месяцев назад

Eu coloquei no HTML, do lado do moon, mas ficou um do lado do outro, ainda não tá funcionando

@juliakarollynedeo.dossanto2297 7 месяцев назад

Consegui arrumar, mas msm assim não muda nada 😢

@wesleyeliel8546 7 месяцев назад

Muito bom o vídeo, ajudou muito, um modo bem mais simples no JS é usar a função "toggleMode()", é literalmente uma função de ligar e desligar, como um interruptor de luz.

@AndreyTM4757 Год назад

Conteudo muito bem explicado, nota 10/10

@larissakich Год назад

Muito muito obrigada ❤️ fico feliz que tenha gostado!

@Lontra_Z-tv4te 6 месяцев назад

muito bomm. primeira vez que sigo um tutorial e da tudo certooooo aeeeeee obrigado.

@larissakich 6 месяцев назад

Aaaa que ótimo!! Fico muito feliz em ajudar 😊

@brunobenetti8533 Год назад

Muitoo top! to aprendendo e tu explica muito bem!

@larissakich Год назад

Fico feliz em saber, bons estudos!

@mayksilvaofc 10 месяцев назад

Olá, cai aqui do nada. Parabéns, você explica muito bem. Está de parabéns! Continue sempre assim, você vai longe. Eu sou leigo em programação e estou tentando aprender. Como faço para vincular a tela de login no meu site?

@juniornascimento1074 Год назад

Parabéns pelos vídeos estava no linkendi e achei bem interessante sua didática, ganhou um dev. inscrito rsrs!

@larissakich Год назад

Oiii, fico muito feliz hehe😄, muito obrigada!

@aminthassilva5827 Год назад

Muito bom, aprendendo bastante. Tenho uma dúvida, quando clico no Login, ele volta para o light, acredito que é porque ele da um refresh na página, teria alguma forma de ele manter no dark-mode?

@mariaairam2892 Год назад

Ficou lindo!

@vraposodev Год назад

Parabens pelo conteúdo!! Muito bom!! Uma sugestão de vídeo seria: Um calendáro-agenda estilo o do google

@larissakich Год назад

Ótima sugestão, vou fazer!

@naturezaviva74 Год назад

Muito legal 👏👏👏👏

@thaliaramos1450 Год назад

oi lariii, o vídeo foi incrível, obrigada!! estou com um problema, qnd clica no botão ele tb faz a mudança de light pra dark por poucos segundos mesmo n tendo evento nenhum evento de click no botão, vc sabe como resolver?

@lyrisnunes3982 Год назад

Amei não para de gravar

@larissakich Год назад

Vou voltarr!

@aron.9262 7 месяцев назад

precisava ensinar o depois como fazer as autenticações com google, facebook e github, partindo desse layout em outro vídeo

@machosedoeu 10 месяцев назад

nao tem mode icon nao meu codigo como rodou ai

@gabrielcesario8011 9 месяцев назад

Você poderia fazer um vídeo falando da sua trajetória como estudante e profissional na área, obrigado.

@larissakich 9 месяцев назад

Oii, muito obrigada pela sujestão, vou fazer sim ☺️❤️

@clerdsonjuca3823 Год назад

muito bom

@larissakich Год назад

Muito obrigada ❤️☺️

@AlexSoaresGtr Год назад

Oi, moça !! Poderia se desse pra vc, fazer um vídeo da sua rotina pra estudar programação? Eu também estudo programação focado no front-end. E as vezes bate uma síndrome do impostor, mas nada muito grave. Era só pra vê como vc organiza seus conteúdos pra estudar

@larissakich Год назад

Claroo, vou planejar um vídeo assim 😄

@mauriciotertuliano2020 Год назад

@@larissakich Esperando.....

@ja1_antonio Год назад

top💻

@larissakich Год назад

Valeuuu ❤️☺️

@jefersonfernandes8091 Год назад

parabens pelo video!! poderia me passar o link desse seu tema no vscode?

@larissakich Год назад

Oii, muito obrigadaa! A extensão é a Tokyo Night, dá para baixar nas extensões do vscode

@futurando1321 Год назад

voce fez algum curso de front end ou js

@larissakich Год назад

Oii, simm, fiz alguns cursos da Alura e o b7web

@BiancaCaroline-kt9mt Год назад

quando eu crio a classe .dark#login_form no css ele não funciona :( sendo que as outras funções como alterar o icon funciona. poderia me ajuda nisso kkkk