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...

ความคิดเห็น • 82

  • @zampierr
    @zampierr 2 ปีที่แล้ว +9

    meu deus, quantos detalhes maravilhosos que eu nao sabia. Muito obrigado

  • @JB_2023EXC
    @JB_2023EXC ปีที่แล้ว +7

    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..

    • @thi_code
      @thi_code  ปีที่แล้ว

      Tamo junto manoo 🤘🏽

  • @mattigor5476
    @mattigor5476 2 ปีที่แล้ว +19

    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

    • @thaynaramaciel3850
      @thaynaramaciel3850 2 ปีที่แล้ว +1

      Bem demais. Valeu!

    • @V.maarcos
      @V.maarcos 2 ปีที่แล้ว +1

      Obrigado

    • @alanalves5030
      @alanalves5030 ปีที่แล้ว +1

      primeira coisa que notei quando terminou o video, mas não sabia resolver, obrigado!

    • @Matheus.Stopinski
      @Matheus.Stopinski ปีที่แล้ว

      .label-float input:focus + label ,
      .label-float input:valid + label {
      Obs: Tem que deixar a virgula separada. Pra mim resolvi assim. Tmj Galera

    • @LifeStyleZ66
      @LifeStyleZ66 ปีที่แล้ว +1

      ​​@@Matheus.Stopinskique detalhe louco. Deu certo desse jeito que você mencionou.

  • @jorgedinisandrade
    @jorgedinisandrade 2 ปีที่แล้ว +2

    Impressionante. De tudo o que já vi, você faz a diferença. PARABÉNS!!!

    • @thi_code
      @thi_code  2 ปีที่แล้ว +1

      Valeu mano!

  • @emiliorodrigues270
    @emiliorodrigues270 11 หลายเดือนก่อน +2

    Sou um newborn no WD, mas sua aula me inspira a continuar evoluindo. Parabéns pela didática. Mais um Inscrito!

    • @thi_code
      @thi_code  11 หลายเดือนก่อน

      Valeu mano!

  • @miroribeiro3791
    @miroribeiro3791 2 ปีที่แล้ว +1

    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.

  • @taynaraluana2623
    @taynaraluana2623 ปีที่แล้ว +1

    Muito legal! Primeiro dia e já consegui fazer a página de login de uma forma bem top!

  • @rodrigomartins5895
    @rodrigomartins5895 11 หลายเดือนก่อน +2

    Só faltou um 'border-style: solid' no botão. Legal!

  • @yurinerdz
    @yurinerdz 5 หลายเดือนก่อน

    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

  • @eldark6793
    @eldark6793 ปีที่แล้ว

    Consegui fazer esse painel de login , trocando algumas coisas pelo celular é ficou muito bom, aprendi bastante.

  • @viniciuslins2075
    @viniciuslins2075 2 ปีที่แล้ว +1

    Cara, não sei nada de programação
    Teu conteúdo é muito bom
    Aprendendo muito
    Obrigado irmão

    • @thi_code
      @thi_code  2 ปีที่แล้ว

      Fico muito feliz em ter ajudado mano!

    • @johnyzinhonamada
      @johnyzinhonamada 2 ปีที่แล้ว

      Começou pela lógica de programação né?

  • @alvaroalvarez9365
    @alvaroalvarez9365 2 ปีที่แล้ว +2

    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!

  • @programer115
    @programer115 2 ปีที่แล้ว

    sempre que esqueço , volto aqui grande aula mano

  • @talilotarlison
    @talilotarlison 2 ปีที่แล้ว +1

    Parabéns pelos conteúdos mano, muito massa. Seu canal ,tá me ajudando bastante.

    • @thi_code
      @thi_code  ปีที่แล้ว +1

      Valeuuuu!

  • @user-gb1rb8kb8n
    @user-gb1rb8kb8n 10 หลายเดือนก่อน

    muito obrigado pelo tutorial thiago lima

  • @KlausWolfgram
    @KlausWolfgram ปีที่แล้ว

    Sensacional. Conteúdo excelente. Obrigado por compartilhar.

  • @SystemWizard
    @SystemWizard ปีที่แล้ว +1

    Excelente vídeo!! 🚀🚀🚀

    • @thi_code
      @thi_code  ปีที่แล้ว

      Valeu mano!

  • @juscelinobritob
    @juscelinobritob 2 ปีที่แล้ว +1

    Muito bom! Bem explicado. Obrigado.

  • @danielfernandesfrigo6819
    @danielfernandesfrigo6819 2 ปีที่แล้ว

    Mais vídeos tops... Esse cara não para

  • @gustavogouveia2327
    @gustavogouveia2327 ปีที่แล้ว +1

    Top demais, me ajudou muito

    • @thi_code
      @thi_code  ปีที่แล้ว

      Tamo junto!

  • @nilsonmaia9609
    @nilsonmaia9609 ปีที่แล้ว

    Aula muito bem explicativa.

  • @flaviorodrigues1074
    @flaviorodrigues1074 ปีที่แล้ว

    Aula muito Top!! Só faltou disponibilizar a imagem da tela de Login!! kkkkk vlw Sucesso.

  • @dainermaciel
    @dainermaciel 2 ปีที่แล้ว +1

    Muito bom! tenho "professor" de faculdade que não sabe nem a metade!!

    • @thi_code
      @thi_code  2 ปีที่แล้ว

      Valeu mano!

  • @jordansiqueira9420
    @jordansiqueira9420 2 ปีที่แล้ว +1

    Ótimo conteúdo!

  • @incrediblecats6078
    @incrediblecats6078 2 ปีที่แล้ว +1

    muito top!!!

  • @felisbertopaquete2044
    @felisbertopaquete2044 2 ปีที่แล้ว +1

    Obrigado pelo video. cara valeu.

    • @thi_code
      @thi_code  2 ปีที่แล้ว

      Tamo junto 👊🏽🚀

  • @jailtonsantana4048
    @jailtonsantana4048 2 ปีที่แล้ว

    Obrigado pelo vídeo.

  • @nelianedaisy
    @nelianedaisy ปีที่แล้ว +1

    nao funciona minhas transitions

  • @eniohenrique1813
    @eniohenrique1813 2 ปีที่แล้ว

    Muito bom

  • @mundodigital467
    @mundodigital467 2 ปีที่แล้ว

    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

  • @Matheus.Stopinski
    @Matheus.Stopinski ปีที่แล้ว +1

    Top mesmo!!! Valeu meu querido.
    Alguém sabe como expandir o container junto com a imagem de fundo ao mexer no tamanho da tela?

    • @thi_code
      @thi_code  ปีที่แล้ว

      mano, da uma olhada em @media do css... talvez te ajude

    • @Matheus.Stopinski
      @Matheus.Stopinski ปีที่แล้ว +1

      @@thi_code Valeu mano 🤝

  • @PatoMaycon
    @PatoMaycon ปีที่แล้ว

    pow nao consegui fazer pq nao tenho a imagem,eu pesquisei e coloquei mas naoo foi

  • @Alitinhaofc
    @Alitinhaofc 8 หลายเดือนก่อน

    olá adorei o video! você consegue fazer esse mesmo video utilizando tags semânticas?

    • @thi_code
      @thi_code  8 หลายเดือนก่อน +1

      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á...

  • @herdina7
    @herdina7 2 ปีที่แล้ว +1

    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?

    • @bruguer1
      @bruguer1 ปีที่แล้ว +1

      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

  • @marcelojunyor3
    @marcelojunyor3 ปีที่แล้ว +1

    o meu código não aparece a caixa para escrever o usuário e a senha 🥲

    • @thi_code
      @thi_code  ปีที่แล้ว

      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...

  • @Hsteezi
    @Hsteezi 4 หลายเดือนก่อน +1

    Onde consigo essas imagens?

    • @thi_code
      @thi_code  4 หลายเดือนก่อน +1

      Google mano, joga aí, paisagens art, ou algo do tipo… São bem famosas, da pra achar fácil

  • @Henrique.bezerril
    @Henrique.bezerril ปีที่แล้ว

    Essa parte de mostrar como se tivesse na internet, é na versão pro? eu não achei aqui

    • @thi_code
      @thi_code  ปีที่แล้ว +1

      putz, ai já não sei mais mano... faz tempo que não mexo

  • @egarcia8811
    @egarcia8811 ปีที่แล้ว

    como eu baixo os codigos

  • @sergiodetoni8467
    @sergiodetoni8467 2 ปีที่แล้ว +1

    Boa tarde! Não consigo fazer funcionar o CSS ! Estou usando Notepad++!

    • @thi_code
      @thi_code  2 ปีที่แล้ว +1

      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

  • @samarapaixao8607
    @samarapaixao8607 ปีที่แล้ว

    Poder feito no vscode n é msm?

  • @ThiagoSilva-qk3tf
    @ThiagoSilva-qk3tf ปีที่แล้ว

    Vc tem algum video transformando em apk?

  • @maxalves1457
    @maxalves1457 2 ปีที่แล้ว +1

    Parabens, muito bem explicado. Meu botao de ENTRAR na tela de LOGIN nao está funcionando, alguem teve este problema?

    • @yagobarros3934
      @yagobarros3934 2 ปีที่แล้ว +1

      Não mano, fiz como ele. Até fiz umas alterações mas ficou de boa

    • @maxalves1457
      @maxalves1457 2 ปีที่แล้ว

      @@yagobarros3934 pode mandar o codigo? estou com este projeto parado por causa desse botao do capiroto ahahahah obg

  • @videosaleatorios008
    @videosaleatorios008 11 หลายเดือนก่อน

    Cara, seu vídeo está excelente, mas me tira uma dúvida. Como faço pra ligar está tela de login para o site?

    • @thi_code
      @thi_code  11 หลายเดือนก่อน

      Valeu mano, cara pra fazer de verdade é preciso passar esse código para o vs code

  • @estevaodanielli1048
    @estevaodanielli1048 2 ปีที่แล้ว +2

    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?

    • @estevaodanielli1048
      @estevaodanielli1048 2 ปีที่แล้ว

      Consegui assistindo seu outro vídeo da aba de cadastro! Muito obrigado

    • @patnz6166
      @patnz6166 2 ปีที่แล้ว

      Ele simplesmente ignorou esse erro nesse vídeo, mesmo vendo

    • @annahelenadrumond9430
      @annahelenadrumond9430 2 ปีที่แล้ว

      @@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

  • @annahelenadrumond9430
    @annahelenadrumond9430 2 ปีที่แล้ว

    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?

    • @MrPanrox
      @MrPanrox 2 ปีที่แล้ว +1

      CSS
      .lable-float input:focus + label,
      .lable-float input:valid + label{
      font-size: 13px;
      margin-top: 0;
      color: #4038a0;
      }

  • @brunosanches9563
    @brunosanches9563 2 ปีที่แล้ว

    Parabéns pelo vídeo. Quando seleciono algum nome já salvo, o meu input fica com o background branco. Como posso resolver isso?

    • @thi_code
      @thi_code  2 ปีที่แล้ว

      Não tem como, ou pelo menos eu não encontrei solução, é config do navegador...

  • @hardgss
    @hardgss ปีที่แล้ว

    eu posso usar essa sua imagem ??
    vou colocar um background color entao kkk

    • @thi_code
      @thi_code  ปีที่แล้ว

      Esse bg não é meu 😅 usa ai

  • @eliassenna630
    @eliassenna630 2 ปีที่แล้ว

    Não correspondeu a. Nada cara

  • @rebornbot
    @rebornbot 2 ปีที่แล้ว

    Excelente conteúdo!