Tela de Login com HTML e CSS | CodePen
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- Esse é o primeiro video de uma sequência muito massa, onde nós vamos construir juntos algumas páginas com HTML e CSS puros, e depois vamos aplicar o JavaScript para criar uma autenticação sem utilizar backend =D
Siga-me nas redes sociais: thicode.netlif...
meu deus, quantos detalhes maravilhosos que eu nao sabia. Muito obrigado
Cara estou estudando há um tempão e nunca tinha visto umas aulas como estas, esse era
O tipo de aula que eu . mais queria ver ..
Muito obg Jovem , muito sucesso pra vc..
Tamo junto manoo 🤘🏽
Vi que faltou manter os labels pra cima depois de preencher os campos, isso pode ser feito dessa forma:
HTML:
Usuário
Senha
CSS:
.label-float input:focus + label,
.label-float input:valid + label {
font-size: 13px;
margin-top: 0;
color: #C58788;
}
Obs: Tem que ter os required nos inputs, senão não funciona
Bem demais. Valeu!
Obrigado
primeira coisa que notei quando terminou o video, mas não sabia resolver, obrigado!
.label-float input:focus + label ,
.label-float input:valid + label {
Obs: Tem que deixar a virgula separada. Pra mim resolvi assim. Tmj Galera
@@Matheus.Stopinskique detalhe louco. Deu certo desse jeito que você mencionou.
Impressionante. De tudo o que já vi, você faz a diferença. PARABÉNS!!!
Valeu mano!
Sou um newborn no WD, mas sua aula me inspira a continuar evoluindo. Parabéns pela didática. Mais um Inscrito!
Valeu mano!
Bicho, como você explica bem e faz um trabalho esmerado fantástico. Amei. Parabéns. Se fosse rico te pagava. Como não sou, meu sincero muito obrigado.
Muito legal! Primeiro dia e já consegui fazer a página de login de uma forma bem top!
Só faltou um 'border-style: solid' no botão. Legal!
Muito bom o vídeo. Deu quase tudo certo rsrsrs. Quando eu fiz o button, ele não recebeu as alterações. usei o gpt pra me ajudar a encontrar o meu erro, mas mesmo com a solução dele, eu não consegui finalizar o botão da tela de login
Consegui fazer esse painel de login , trocando algumas coisas pelo celular é ficou muito bom, aprendi bastante.
Cara, não sei nada de programação
Teu conteúdo é muito bom
Aprendendo muito
Obrigado irmão
Fico muito feliz em ter ajudado mano!
Começou pela lógica de programação né?
Cara, to aprendo e achei seu video muuuito didatico, a linguagem mais facil e legal que achei em 1 semana procurando, finalmente agora entendi como mexer nas divs kkkk ja me inscrevi no canal! Showw parabens!
sempre que esqueço , volto aqui grande aula mano
Parabéns pelos conteúdos mano, muito massa. Seu canal ,tá me ajudando bastante.
Valeuuuu!
muito obrigado pelo tutorial thiago lima
Sensacional. Conteúdo excelente. Obrigado por compartilhar.
Excelente vídeo!! 🚀🚀🚀
Valeu mano!
Muito bom! Bem explicado. Obrigado.
Mais vídeos tops... Esse cara não para
Top demais, me ajudou muito
Tamo junto!
Aula muito bem explicativa.
Aula muito Top!! Só faltou disponibilizar a imagem da tela de Login!! kkkkk vlw Sucesso.
Muito bom! tenho "professor" de faculdade que não sabe nem a metade!!
Valeu mano!
Ótimo conteúdo!
muito top!!!
Obrigado pelo video. cara valeu.
Tamo junto 👊🏽🚀
Obrigado pelo vídeo.
nao funciona minhas transitions
Muito bom
cara não importa qual link eu coloco aqui mesmo que seja o google esta apagando mesmo que seja do proprio youtube , então eu criei um video sobre a duvida que eu tive, que era clonar uma pagina, eu cheguei a criar o html, de uma passada e veja e na descrição tem o link da pagina com o cod e o exemplo de uma analizada. grato
Top mesmo!!! Valeu meu querido.
Alguém sabe como expandir o container junto com a imagem de fundo ao mexer no tamanho da tela?
mano, da uma olhada em @media do css... talvez te ajude
@@thi_code Valeu mano 🤝
pow nao consegui fazer pq nao tenho a imagem,eu pesquisei e coloquei mas naoo foi
olá adorei o video! você consegue fazer esse mesmo video utilizando tags semânticas?
Poxa, dificilmente terei tempo, mas acho que seria um bom exercício para você tentar substituir... da uma procurada nessas tags e para que elas são usadas, depois vc pode compartilhar seu código na comunidade no discord pra galera ver e opinar, talvez até eu possa dar uma olhada por lá...
Cara, a imagem do Imgur não aparece na minha página quando faço o link. Preciso habilitar alguma coisa lá ou no meu código? Qualquer foto genérica do Google funciona, assim como se eu colocar uma que tá no PC. Sabe qual é o motivo disso?
oi, eu peguei essa lá no imgur ( imgur.com/8tcxHWh ) mas tive que colocar o .jpg no final pra aparecer, talvez te ajude! imgur.com/8tcxHWh.jpg
o meu código não aparece a caixa para escrever o usuário e a senha 🥲
Salvee, infelizmente não consigo te ajudar por aqui... é dificil de saber detalhes do problema, mas se quiser, pode entrar na comunidade do Discord se tornando membro, lá eu consigo ver com mais calma...
Onde consigo essas imagens?
Google mano, joga aí, paisagens art, ou algo do tipo… São bem famosas, da pra achar fácil
Essa parte de mostrar como se tivesse na internet, é na versão pro? eu não achei aqui
putz, ai já não sei mais mano... faz tempo que não mexo
como eu baixo os codigos
Boa tarde! Não consigo fazer funcionar o CSS ! Estou usando Notepad++!
Verifica se ele está linkado ao html, no Codepen esse link é automático... Usa ele de preferência, depois tenta no notepad, que inclusive é o pior editor de código pra front... Recomendável o vs code
Poder feito no vscode n é msm?
Vc tem algum video transformando em apk?
Parabens, muito bem explicado. Meu botao de ENTRAR na tela de LOGIN nao está funcionando, alguem teve este problema?
Não mano, fiz como ele. Até fiz umas alterações mas ficou de boa
@@yagobarros3934 pode mandar o codigo? estou com este projeto parado por causa desse botao do capiroto ahahahah obg
Cara, seu vídeo está excelente, mas me tira uma dúvida. Como faço pra ligar está tela de login para o site?
Valeu mano, cara pra fazer de verdade é preciso passar esse código para o vs code
Thi, quando escrevo no usuário ou na senha, ao invés da label manter-se lá em cima, ela desce e fica por cima da onde escrevi. Como corrige?
Consegui assistindo seu outro vídeo da aba de cadastro! Muito obrigado
Ele simplesmente ignorou esse erro nesse vídeo, mesmo vendo
@@estevaodanielli1048 não consegui localizar este outro vídeo... sabes me disser como consertar ou informar o nome deste outro vídeo que mostra como consertar isso? Desde já, obrigada
Quando escrevo no usuário ou na senha, ao invés da label manter-se lá em cima, ela desce e fica por cima da onde escrevi. Alguém sabe por favor como posso corrigir isso?
CSS
.lable-float input:focus + label,
.lable-float input:valid + label{
font-size: 13px;
margin-top: 0;
color: #4038a0;
}
Parabéns pelo vídeo. Quando seleciono algum nome já salvo, o meu input fica com o background branco. Como posso resolver isso?
Não tem como, ou pelo menos eu não encontrei solução, é config do navegador...
eu posso usar essa sua imagem ??
vou colocar um background color entao kkk
Esse bg não é meu 😅 usa ai
Não correspondeu a. Nada cara
Excelente conteúdo!