Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #2
ฝัง
- เผยแพร่เมื่อ 1 พ.ย. 2022
- 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 - วิทยาศาสตร์และเทคโนโลยี
Obrigado pela aula. Irei usar bastante informação no meu formulario que estou criando.
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.
Estou estudando todos os dias com seus vídeos, estou adorando, sempre aprendendo algum detalhe e coisa nova! Parabéns e obrigada!!
Muito top Larissa, parabéns pelo conteudo. Vlw!
Grava um vídeo montando um site completo, seria muito foda. Eu aprendi bastante com os seus vídeos. Parabéns você é muito boa
Clarooo, já estou planejando um vídeo assim 😄❤️
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!!!
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!!!
Muito top o video...
Obrigado por compartilhar seu conhecimento...
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.
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
Ficou lindo!
Muito legal 👏👏👏👏
Conteudo muito bem explicado, nota 10/10
Muito muito obrigada ❤️ fico feliz que tenha gostado!
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.
muito bomm. primeira vez que sigo um tutorial e da tudo certooooo aeeeeee obrigado.
Aaaa que ótimo!! Fico muito feliz em ajudar 😊
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.
Muitoo top! to aprendendo e tu explica muito bem!
Fico feliz em saber, bons estudos!
Parabéns pelos vídeos estava no linkendi e achei bem interessante sua didática, ganhou um dev. inscrito rsrs!
Oiii, fico muito feliz hehe😄, muito obrigada!
Parabens pelo conteúdo!! Muito bom!! Uma sugestão de vídeo seria: Um calendáro-agenda estilo o do google
Ótima sugestão, vou fazer!
Amei não para de gravar
Vou voltarr!
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 😁
O meu não funcionou, mas eu não entendi aonde coloca essa parte
Eu coloquei no HTML, do lado do moon, mas ficou um do lado do outro, ainda não tá funcionando
Consegui arrumar, mas msm assim não muda nada 😢
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.
mas quando se usa o transition não precisa do key frame?
@@felipegoncalves1195 não
muito bom
Muito obrigada ❤️☺️
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?
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?
top💻
Valeuuu ❤️☺️
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?
Ola, excelente aula parabéns.
tem como mostrar como podemos usar essa página de login dentro do Google sites ?
nao tem mode icon nao meu codigo como rodou ai
Oii pode dizer onde fica a class dark? Pq coloquei no meu código e não mudou nada 😅
Você poderia fazer um vídeo falando da sua trajetória como estudante e profissional na área, obrigado.
Oii, muito obrigada pela sujestão, vou fazer sim ☺️❤️
precisava ensinar o depois como fazer as autenticações com google, facebook e github, partindo desse layout em outro vídeo
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
Claroo, vou planejar um vídeo assim 😄
@@larissakich Esperando.....
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
o meu tbm ficou assim, mas é fácil de resolver, é só vc ir no form do html e adicionar a class="dark"
voce fez algum curso de front end ou js
Oii, simm, fiz alguns cursos da Alura e o b7web
hard
No meu aprece isso ----> Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'😔😔
ahh sou iniciante kkk
o meu tbm estava assim, mas no meu caso eu coloquei o script no head e não atribui o defer antes do src
só fiz colocar o defer e funcionou
Bom dia, poderia falar o nº do seu processador?
Oii, é: Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz 1.99 GHz
resumindo, "return;" retorna falso se não tiver o parametro de 0 ou 1, e volta ao começo tudo de novo.
Muito obrigada pela dica!
Se ensina também se vender um curso eu compro ahaha
Um dia pretendo fazer ksksk ❤ muito obrigada!
parabens pelo video!! poderia me passar o link desse seu tema no vscode?
Oii, muito obrigadaa! A extensão é a Tokyo Night, dá para baixar nas extensões do vscode
Não seria mais viável usar o toggle
Ao invés de add ou remove?
Siiim, acredito que funcione do mesmo jeito
Legal era só uma dúvida que eu tinha também 🤭
mais vídeos, pf .-.
Vou postar ainda essa semana 😁❤️
agora me diz onde tu colocou o icone do sol man kkkkkkkkkkkkk
no caso dentro do html certo
O seu tbm n tava indo né mn KKKKKK
Coloca o sol do lado do ícone da lua com outro class
Desse jeito espero ter ajudado 😁