TELA DE LOGIN COM TEMA DARK | HTML + CSS

O mundo do desenvolvimento web está sempre mudando e se adaptando com novos designs e regras de negócios. A bola da vez é os temas darks, que servem para poupar os olhos para aqueles que passam longas horas na frente do computador.
Para o desenvolvimento dessa página de login será utilizado apenas HTML e CSS, além disso usaremos uma imagem do site StorySet, essa imagem é um svg animado, que vai dar uma cara bem bonita para o site.
Além disso essa página de login com uma paleta de cores dark será totalmente responsiva, ou seja ela funciona em tablet, celular, e computador.
Iremos também usar o google fonts para baixarmos a font Noto Sans e utilizá-la no nosso projeto.
O dark design com animações é uma das principais tendências de design de 2021, vários sites estão se adaptando para isso.

[@Markzuel]

Galera só uma correção rápida. No minuto 8:34 está como: 100vw -> 1000px 1vh -> 10px mas na verdade o correto é: 100vw -> 1000px 1vw -> 10px vw como falei é viewport width e vh viewport height. Bom aprendizado a todos!

[@hudsonmenezesdev]

Faça mais vídeos como esse por favor! Didática incrível, fácil entendimento e sem enrolação!

[@TheDededograu]

meu amigo que SURRA de intelecto que tu me deu nessa aula sua voz calma ajuda DEMAIS na absorção do conteúdo.. que didática absurda

[@erikad.miranda8077]

Não sei nem como agradecer todos vocês que tem conhecimento e vem dividir com a gente aqui no youtube! Didática perfeita! Já estou maratonando o canal e recomendando para meus amigos!!!!

[@AliciaDiniz-ie3fn]

Cara! Venho estudando há um tempo, e você foi simplesmente o professor com a didática mais incrível que eu achei. Simples, explicativo, literalmente desenhando p aprendermos hahahah faça mais vídeos assim, você me ajudou muito!

[@pedrovitor9625]

Caramba mano, eu fiz todo o passo, desde o início ao fim. Adorei cara, estou no 3º período do curso de Ciência da Computação, com certeza eu adicionei mais uma gama de conhecimentos na minha bagagem, tinha muita coisa que eu não sabia. Quero atuar na área de Cyber Security, só que eu estou amando a área de desenvolvimento, quero passar por outras áreas também e adquirir mais conhecimentos de outras áreas.

[@contra2099]

Estou vendo o seu vídeo em Junho de 2024, e a sua explicação é realmente muito boa, vc tem uma didática profissional, eu nunca tinha feito se quer uma única linha de código de qualquer coisa, em Maio de 2024, comecei o curso de HTML5 e CSS3 do professor @gustavoguanabara do @cursoemvideo, e o KZbin me sugeriu o conteúdo do seu canal, e foi uma grata surpresa, estou aprendendo com dois excelentes profissionais, como eu sou iniciante de tudo, eu achei o seu conteúdo 100%, mas ao mesmo tempo para o meu nível de conhecimento ele é muito avançado, demorei um dia inteiro para fazer o que você fez em 38 minutos. Novamente o seu conteúdo é excelente, por favor nos traga mais do seu talento.

[@Yukioamvs]

Esse foi um dos melhores videos que já vi sobre HTML e CSS, didática PERFEITA principalmente pra quem ta começando (como eu).

[@evaldojr96]

Caraca! Você ensina muito bem, voce tem futuro como professor aqui no youtube, muita gente busca tutorial explicativo e sem enrolação como esse vídeo! Por favor continue postando mais temas como esse.

[@jprogramador4908]

Parabéns meu caro, você não faz ideia do tanto que o seu conteúdo ajuda na hora de realizar projetos!

[@Markzuel]

Essa é a intenção

Caracas!! Que cara paciente, voz boa de se ouvir, didática perfeita dá pra entender tudo, Parabéns! continue com os vídeos por favor.

[@samueldourado4593]

ele sumiu, nunca mais publicou nada! :(

[@wendellsousa9025]

Cara, tenho TDAH e geralmente sinto grande dificuldade em acompanhar tutoriais, normalmente me disperso, n entendo, tenho que voltar, ou simplesmente a didatica não é interessante. Mas esse vídeo é simplesmente perfeito, não acredito que asssiti quase 40 minutos direto sem perder o foco. Parabéns demais.

[@_Couto]

oshi, o video tinha 40 minutos, kkkkkkkk, nem percebi

[@itsdanyels]

Cara, estudo programação a muito tempo, fui entrar no desenvolvimento web agora vi muitos cursos e aulas mas você é diferenciado, que didática incrível, que conhecimento extraordinário que edição linda, você é sensacional!!! Já me inscrevi sou seu seu fã!

[@nadjamessias3239]

Cara, eu achando que eu ja manjava do css, ai vem você e mostra pra mim coisas que eu nao sabia ainda kkkk, simplesmente incrivel!!!

[@hercullysg.]

Isso é bem normal, todo dia aparece coisa nova.

[@maykdouglas8358]

meu deus que canal incrível!!!! Aulas perfeitas e objetivas, ótimo trabalho!!

[@laisgomes2001]

Meu deus, esse vídeo é maravilhoso, tudo que eu precisava! Não tem enrolação e é super didático, aprendi com esse vídeo de 38min coisas que aulas de 3h não souberam explicar e o melhor de tudo, tudo na prática! Muito obrigada mesmo por ter compartilhado o seu conhecimento com a gente, mas terei que ser honesta, como que um canal com tanto potencial nos entrega um pote de ouro e nos abandona? Aguardo o retorno dos seus vídeos futuramente ^-^

[@newsuby2137]

Cara que conteúdo incrível, de verdade, acredito que até agora foi a aula mais clara de programação que eu vi na minha vida, uma didática sem igual, eu vi vários tutoriais, inclusive comprei cursos, mas nenhum deles teve essa clareza e simplicidade, obrigado por existir mano tmj. Continue postando mais vídeos.

[@grazisampaio448]

Mano quando vi que o vídeo tem um ano quase chorei, volta a fazer vídeos mano você é bom demais fazendo isso!! Eu leiga, no inicio dos meus estudos peguei muita coisa pela forma que tu fala bem!!!

[@rakroxhighlights3443]

A sensação de funcionar é muito boa, Obrigado pelo aprendizado. Acho que melhor video de código que vi até agora ! Parabéns

[@Markzuel]

Eu que agradeço, amei o elogio!

[@matheusmaciel8303]

pq vc parou de postar videos mano??? vc é muito bom explicando, parabens!!! se puder criar um curso do zero para iniciantes, seria muito bom, vc tem uma didatica incrivel!!

[@Gustavo30071995]

Eu ia comentar a mesma coisa

[@cantosgreenbr8150]

kzbin.info/www/bejne/jWS9haWHns2Nj5o&ab_channel=DevPromissor - Sugestão de tela de login, dá moral lá no canal amigo:)

[@jonjonexplora]

vdd

[@lucasfigueiredo3310]

tô iniciando em programação e me pego as vezes desmotivado com as milhares de informações porém, esse vídeo, foi muito leve! Gostei muito.

[@WashingtonLopesss]

Muito bom cara, bem prático, vendo hoje em 2022 e gostei muito, parabéns!

[@hullify]

Mano pf continue com os seus vídeos !!!! A melhor didática que achei na internet até o momento, continue com esse trabalho maravilhoso 💪

[@mentesemevolucao]

Parabéns pelo conteúdo excelente, estou cursando ADS e pretendo me tornar Full Stack, sua didática é muito boa. Vou usar esse vídeo como referência para praticar. Espero que poste mais conteúdo nesse estilo, nos ajuda muito no desenvolvimento, muito obrigado!!

[@Markzuel]

Estou elaborando novos vídeos. Fico contente que você gostou desse. Deu um trabalhão criar e editar

[@fernandopacheco3893]

Cara, você explica super bem, faz mais vídeos por favor, ou lança um curso.

[@Markzuel]

Vou continuar sim

[@bygcruz]

Não pare meu mano, seu objetivo em ajudar pessoas esta sendo alcançado com sucesso, didática muito boa!

[@leogama7970]

Amigo, muito bom! Vc é muito didático, detalhista e paciente. Trabalho EXCELENTE! Parabéns!

[@souzajose9395]

Muito bom! Obrigado por compartilhar esse conhecimento conosco!

[@rhuanribeiro5428]

que didática inacreditável, eu pagaria por um curso inteiro seu de front-end. Nunca vi uma didática tão boa. Aprendi muito sobre responsividade com o seu vídeo.

[@Nicolasfrancacastrorosa]

O melhor video de html e css que eu vi em toda a minha vida parabens👏

[@victornunes8400]

Nossa muita boa a sua explicação, consegui absolver completamente tudo. Aula nota 1000 já estou esperando para mais conteúdo como esse. Muito Obrigado !!!!

[@Markzuel]

Que ótimo! Estou preparando novos vídeos

[@victornunes8400]

@@Markzuel 🎉🎉

[@Mano_Kant]

Que vídeo maravilhoso, irmão! Cê tá doido, esse vídeo tá 100x melhor do que muita aula por aí. Agregou demais nos meus estudos e fiquei super satisfeito com o projeto que fiz acompanhando sua aula! Didática completíssima, obrigado cara ❤

[@GabrielLucas-t5s]

Sou da área de segurança e aprendi muito em pouco tempo, parabén pela didática mano, vc tem talento!!!

[@tonistark4160]

O mark, volta a postar vídeo pfvr, você explica muito bem, realmente tem o dom de sar aula, posta mais pra nós

[@hoffmann11]

vaiiiiiiiiiiiiiii sf, te amo man. meu primeiro projeto da vida. nao para de trazer conteudo

[@Igor-vk8fl]

Explicação excelente, como assim só tem 2 vídeos no canal?? Faça mais por favor! Nós iniciantes precisamos de inúmeros vídeos como esse pra fixar o conteúdo na cabeça.

[@ezequiassouza5002]

Muito bom mano parabéns explica melhor que muitos professores ❤

[@David.Asbel-sf3ib]

Faça mais vídeo meu amor por favor . Vc é incrível não sabe como está ajudando as pessoas. Constrói códigos e explica o significado e ainda mostra o resultado. Nada melhor que isso

[@gunzur]

Parabéns pelo conteúdo. Nordeste no topo, sempre !

[@Markzuel]

Pra cima. Nordeste no topo!

[@debbtrbl]

simplesmente a melhor videoaula que já vi de css

[@rodrigomarques1633]

Irmão, passando para agradecer pela sua didática incrível, adorei a explicação da view port e como você explicou pra galera que tinha dúvida (eu era um desses) de como funcionava o justify-content e o align-items, muito obrigado, trabalho excelente!

[@kelsoncamargo9066]

MELHOR VÍDEO SOBRE DESENVOLVIMENTO, UTILIZANDO AS TECNOLOGIAS HTML E CSS, SEM PALAVRAS, SIMPLESMENTE SENSÁCIONAL!!!

[@well8544]

cara esse vídeo me ajudou demais! 38 minutos de puro aprendizado. Muito obrigado pelo trabalho, sua didática e atenção aos pequenos detalhes são incríveis, ganhou 1 inscrito.

[@semsentido2633]

eu adorei o video o unico que vi que explica detalhadamente o que ta acontecendo e com exemplos na tela e conceitos. incrivel

[@JoaoAlmeida10._]

que explicação top irmão, comecei a estudar esse tipo de programação ontem e já aprendi bastante coisas, pra quem não entendia quase nada digamos que agora "eu sou um iniciante com conhecimento" hahaha

[@miqueiastomaz2953]

programação

[@Gilnece]

de verdade, me ajudou muito, super didático, me explicou termos que não conhecia, coisas que eu usava no automático, sem saber o que realmente fazia.... em resumo, me deu um norte! Obrigado :)

[@nativeworld00]

Nossa mano que explicação incrível, nossa veio, um verdadeiro professor de vd. Mano ganhou um inscrito.

[@anaazv]

Explicação perfeita! Tudo muito bem detalhado, simplesmente incrível!!

[@thairincksilva]

cara nunca vi um vídeo de codigo tão didático.. os elementos animados que vocÊ coloca durante o vídeo ajudam muito na compreensão e você ensina mt bem.. pfv nao pare de fazer videos..

[@brenobazaga5226]

poderia ter continuado com os vídeos...Gostei muito da sua didática, e me ensinou muita coisa que não sabia no mundo de Front-end!! Parabéns!

[@karolnascimento6137]

verdade. Entrei no canal pra ver, ele parou de fazer :(

[@felipe.py3]

A didática desse cara é maravilhosa. Sem dúvidas um dos melhores, se não o melhor, vídeo desse tipo de conteúdo que já ví.

[@sambel2008]

SUA DIDÁTICA É MUITA BOA... TA AUTORIZADO A FAZER 3 VIDEOS POR SEMANA. BORA BORA

[@Andre_Da_VNI]

Cara, nem terminei o vídeo mas posso afirmar que está muito bom! Continue e traga mais, pois poderá contar com minha presença!!! ❤❤😁😁😁😁👨‍💻👨‍💻

[@LucianaLima-ue2bm]

Muito bom. Uma aula top. Parabéns!!

[@stalmeidas]

Me senti sentada do teu lado batendo papo enquanto a gente codava junto. Cara que habilidade incrível de ensinar! valeu mesmooo, faz mais vídeos nesse estilo por favor!!!

[@gutomazz]

MUITO BOM! Sua didática eh muito boa e tem uma linha de raciocínio que faz parecer facil. Se tu continuar com videos assim tu tem futuro

[@Jogosaomaximo]

que didática e edição incrível!! tem canal grande que não consegue transparecer a fluidez da explicação como você fez

[@G2kAll]

Que bom que cai de paraquedas nesse canal top!!!!

[@hudsonrocha4105]

Parabéns pelo vídeo. Chegando agora e já vou ver se tem mais vídeo bom.

[@Alan-Aguiar]

rapaz parabéns pela didática. não sei se tu é professor mas com esse seu vídeo eu aprendi muito mais que em muitas aulas na faculdade grato por compartilhar do seu conhecimento

[@daianesantos2401]

Dinâmica perfeita!!

[@adilsonamado8853]

Que maravilha de aula, em pouco tempo conseguiu falar de tudo de uma maneira clara e simples. por favor continue com o seu canal.

[@fxharryproductions]

Estudo incrível irmão, investe no seu potencial como professor, e segue firme como desenvolvedor, obrigado por disponibilizar seu tempo para uma aula desse nível, obrigado pelo conhecimento! Sucesso, explodi o like aqui...

[@Markzuel]

Eu que agradeço

[@Chainlenger2]

Eu amo a forma como você ensina É bem simples, intuitiva e cativante. Muito obrigado pelos tutoriais.

[@Aquiles_eumesmo]

porque você parou os vídeos? Eu amei sua didática, sua edição e tudo mais, ai fui olhar o canal pra me inscrever e fazem dois anos que vc n posta, fiquei perplexo

[@jaaango]

tem muitos criadores bons que param e nos deixam na sdd

[@rodolfogama5164]

Parabéns pelo tutorial, consegui entender tudo que você explicou.👏👏

[@SoyPardal]

Como um vídeo tão bom como esse tem poucos likes. Eu nem sei nada de CSS e aprendi muito!!

[@AntonioCarlos-fj1fu]

Show de bola, muito bem explicado sobre as funcionalidades das tag's e elementos. Parabéns.

[@wilhemwundt90]

Cara você explicou o conteúdo como se fosse estou bebendo uma agua no deserto, nossa bem explicado, nada de enrolamento. Gostei muito seu conteúdo!

[@marcosbriseno9246]

Inscrito meu caro. Bom demais. Parabéns.

[@ligialigia248]

Incrivel, sou iniciante em html e css e posso dizer que seu conteudo é maravilhoso, da pra pegar cada situação e entender facilmente, continue com seus videos e que venha mais videos assim pls!!!!!!!

[@SamuelTrigueiros]

Meu Deus, esse cara explica muito bem, impressionante a capacidade dele de passar o conteúdo. Like e inscrição já.

[@caeet]

Cara tu é um MITO! Que qualidade, se tu abrisse um curso por R$300 sobre HTML e CSS eu comprava sem nem hesitar!

[@cristianocastiel2131]

Melhor vídeo de responsividade que vi até hoje. Parabéns!!! Uma boa aula é detalhada, e você conseguiu fazer isso

[@manosanti]

Simplesmente perfeito. Didática incrível!!!

[@zohar3154]

Ele e muito bom na explicação. Um dos melhores que já vi....

[@norbertodavid4536]

Parabéns pela aula que nos deste nesse vídeo! Excelente! Muito bem explicado, alternando em montar o código e mostrar o resultado. Dessa forma, me ajudou a entender muitas coisas, que como estudante de programação, não tinha visto ainda. Parabéns por seu trabalho, e pela ótima página que você desenvolveu e nos mostrou nessa vídeo aula. Ficou top! 👏👏👏👏👏👏👏👏👏 Que Deus abençoe você e toda sua família! 🙌 Por mais conteúdos assim! 🤝

[@shockin95]

Didática maravilhosa! Por favor produza mais conteúdos assim, ajuda muito nós que estamos iniciando e construindo portfolio! :)

[@nanaffs_]

Adorei as dicas e amei ver cada design bonito também! Tá aí um canal que vou acompanhar bastante, seu trabalho é incrível!!

[@talitamota6281]

Ameiiii sua explicação, por favor nos traga mais conteúdos como este, sua didática é ótima, não pare que tenho certeza que irá ajudar muitas pessoas! Parabéns.

[@talitaribeiro8610]

Sensacional! Sua narrativa é excelente! sério, muito descomplicado! amei assistir ! Parabéns!

[@rafaelaandrade88]

Nossa super didático, principalmente eu que sou iniciante! Amei, ganhou uma inscrita e seguidora no IG!

[@Basileu]

coroi man, que simplicidade pra ensinar. eu nao sabia nada de media query, tirou a parede de bloqueio da minha mente. iscrito e seguindo no insta!

[@jhonataszrc]

Muito TOP! Parabéns pela simplicidade ao explicar os passos a passos!

[@EmanuelCamaraMarques]

Faz mais vídeos assim, você explica super bem, o que eu não estava entendendo há tempo, passei a entender facilmente com o seu vídeo!!

[@isaacpro97]

Tem 2 canais grandes por aí, fizeram uma tela dessa cheia de gambiarra, esse cara deixou o html bem enxuto... Curti muito.

[@lipzwrld]

Melhor video, foi muito bom aprender um pouco mais e aprimorar meus conhecimentos contigo irmão satisfação total 😎😎

[@diegosantos6956]

Parabénsssssssssssss. Didática incrível. Amei a musiquinha calma de fundo. Queremos mais

[@emanoelcarmo6989]

Assim como foram os outros comentários, continue os vídeos por favor, pois sua didática é excelente.

[@jairaragao1322]

Mano volta com os vídeos, você tem uma didática muito boa, as explicações foram muito claras e simples

[@JordamOne]

Você explica muito bem mano, diferente de outros canais que só mostram fazendo o código, você explica oq faz cada linha do código. Tô começando nessa área agr e esse vídeo me ajudou mt🤯🤯

[@matheusrabelo4377]

caraca que massa! foi um dos poucos videos que conseguir assistir até o final sem dormir kk

[@oFagundes]

Cara, muito legal, já vi uns vídeos da gringa mas esse foi o primeiro que me permitiu entender como trabalhar com a responsividade vlw mesmo cara

[@madufreire4042]

Melhor vídeo sobre o assunto no KZbin ☝

[@rafaelavelino4520]

Valeu pelo vídeo. Ótima didática, as imagens explicando as propriedades ajudam demais!!

[@gabrielcarvalho3347]

Seu canal é muito bom , ensinamento perfeito mano , parabéns e poste mais vídeos !!

[@yansagica9638]

Sensacional! Faz mais conteúdo nesse estilo! Ficou show!

[@MatheusSantos-tq2nw]

Sugestão de Vídeo: Montando meu próprio Portifólio. é um passo bem importante na Programação e por isso vai se encaixar muito bem na proposta de se lançar futuramente no mercado de trabalho ❤️ Obrigado pelo conteúdo nota 1000 ❤️

[@Markzuel]

Ótima sugestão, vou colocar aqui na lista para criar um roteiro para ele. Muitíssimo obrigado ❤

[@dariobatista85]

Uma didatica maravilhosa dessa e de graca no youtube! Incrivel, sem palavras.

[@angelosouza2349]

Simplesmente incrível! Parabéns pela didática.