Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #1
ฝัง
- เผยแพร่เมื่อ 1 พ.ย. 2022
- Olá pessoal
Neste vídeo ensinarei a você como criar um formulário com tema LIGHT, no próximo vídeo vou ensinar a fazer o modo DARK também, e o funcionamento do botão que altera entre esses dois modos.
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 - วิทยาศาสตร์และเทคโนโลยี
![[TH] Esports World Cup : Knockout Stage Day 2](http://i.ytimg.com/vi/sP-b00j1C58/mqdefault.jpg)
![[TH] VCT Pacific Stage 2 - Playoffs Day 1 // GEN vs RRQ | TLN vs TS](http://i.ytimg.com/vi/JhkzKOhvOps/mqdefault.jpg)
muitoooo massa o vídeo, trás mais vídeos assim, explicando as coisas etc pff
Sensacional, ótima didática. Conteúdo de extrema qualidade, código super limpo.
Subscribe
Parabens logo de inicio ja gostei to mandando 👍 e vou apertar o sino.
Muito Obrigado pela sua ajuda, seus videos são demais, se puder trazer mais, voce explica muito bem. Sucesso sempre
Parabéns pelo conteúdo, realmente muito bom.
Ficou fera, Lari!
Muito massa!! Parabéns!! 👏👏👏
Didática excelente! Layout bem simples e moderno, amei cores que você utilizou
Aaaa muito muito obrigada! Fico muito feliz que tu tenha gostado! ❤️
Conteúdo muito bom, e bem explicativo, parabéns👏👏
Muito obrigadaaa ❤️ que bom que gostou!
Parabéns pelo vídeo, ficou perfeito!!!
Muito muito obrigada ❤️
Unico video que consegui fazer esse bendito formulario, valeu minha nobre
Muito obrigada! Que bom que consegui te ajudar 😁
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.
Top, parabéns e obrigado!!!
Por coincidência hoje estava lendo sobre código limpo e vi que vc se preocupa muito com isso. Tmb amei a sequência que vc vem estilizando de fora pra dentro: background, form, h1, ícones, imputs e foi seguindo a sequência dos elementos. Me dá um nervoso quando a pessoa edita os imputs, depois o background, mexe no ícone, depois edita o botão e por aí vai. Eu que tô bem no início já percebia que o código estava uma zona e por isso fui ver se tinha uma forma de editar direito e conheci sobre código limpo. Agora vi isso na prática com vc. Muito bom 👏🏼👏🏼👏🏼👏🏼
Muito muito obrigada, tento sempre deixar ele o mais claro possível ❤️
Provavelmente você ja sabe, mas quando descobri o SMACSS, NameSpace e BEM o código fica de outro nível
Durante o vídeo aprendi diversas coisas muito uteis para a minha criação de sites, grato.
Olá, eu amei seu conteúdo, só faltou uma coisa e eu não sei como fazer, gostaria da sua ajuda, queria colocar para celular, ou seja que ficasse responsivo, eu fui testar vendo pelo celular não ficou legal,se vc pode mostrar,como fazer para adaptar para depósito móvel eu agradeço.
muito bom super obrigado por compartilhar sua experiência!
Muito obrigada❤️
Conteudo de ouro. Parabéns
Muito obrigada❤!!
Parabéns 😍!
canal mttt bom para quem quer aprender programação
Muito obrigadaaaa ❤️
muito bom !!!!! amei o video ❤❤❤❤
Aaa que bom que gostou ❤️ muito obrigada!
crlhhhh muito brabaa!!!!👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏
obrigada! muito boa tua didática
Oii, muito obrigada! Me motiva bastante ❤️
boa !! 🌹🤘
Valeuuu ❤️
Didática perfeita! Obrigado pelo compartilhar seu conhecimento!
Qual é o tema que vc usa no vsCode?
Tokyo Night
Gosto muito do conteúdo do seu canal, sua voz é agradável, você tem uma boa didática, como Designer eu sempre admiro as fonts, paleta de cores, espaçamento etc.
Enfim eu poderia ficar aqui o dia todo apontando os pontos positivos de assistir seus vídeos, mas infelizmente como nada é perfeito (e nem precisa ser) eu particularmente fico incomodada com o vício de linguagem "pixeis"
De maneira nenhuma quero ser grosseira porque eu gosto do conteúdo e tenho aprendido com ele, e não sou ninguém pra pedir que você mude o jeito.
Mais uma vez quero salientar que sua voz é tão agradável.
olá, me Chamo Pedro Lucas
gostei muito.
Você da aula ou curso de html e css?
moça se possivel tem como auemntar o tamanho das fontes do visual studio nos proximos projetos seus? meu monitor e pequano e nem é fullhd
sensational
cala a boca
@@iagomarques9248 ???KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK
Incrivel, parabéns pelo ótimo conteúdo! Alguem saberia me informar qual a diferença do background para o background-color? Pelo que vi amabs preenchem o fundo com cor.
O meu não muda a cor de fundo :(
Background é uma propriedade que reuni as características de: Background-color (estiliza a cor), background-position (estiliza a posição), background-repeat (estiliza a repetição), background-size (estiliza o tamanho que será ocupado), de forma resumida, seria isso.
O meu não muda a cor de fundo :(
poderia fazer um vídeo como fazer um menu website ?
olá, boa tarde!
Estou iniciando no front-end, faz um mês, porem, estou tendo certas dificuldades, pois geralmente pego alguns exercícios que acho interessante no TH-cam, e tendo replicar, portanto, percebo que quando o projeto requer algumas transições em CSS ou mesmo precisa de algumas linhas de código Javascript ele não funciona mesmo os código estando igual ao original.
por acaso sabe o que pode esta acontecendo?
é o meu navegador que não esta conseguindo lê os códigos?,
é o meu vscode que não está configurado direito?
ou será que sou ruim mesmo, pois não sei como resolver isso ?
Onde vc fez ou esta fazendo sua formação/curso Dev ?
Como coloca as pastas uma em baixo da outra? A minha fica tudo do lado do assets
vc pode me ajudar pf?? no css fiz o ID do mode icon mas nao aparece o cursor dai eu nao consigo mudar pro dark nao sei pq n aparece no html ta tudo certinho
Olá pessoal. alguem poderia me ajudar num código? eu gostaria de fazer aparecer na tela do canto uma imagem + audio quando o mouse passar umas 3 vezes por personagens diferentes de um projeto que to fazendo, como se fosse uma tela de seleçao de personagens. ai a cada 3 ou 4 vezes que o mouse passa pelos personagens essa imagem e audio aparecem.
Tem como mandar todos os códigos apenas para copiar e colar, para apenas modificar
o meu código ficou idêntico, passei e repassei um milhão de vezes, porém eu não consegui tirar as bordas das caixas de texto, o comando pra isso é o outline:none certo?
9:11
Qual tema você usa ?
Como q publica essa página no Google?
como centraliza os ícones na horizontal ? No meu continua na vertical
display: flex;
flex-direction: row;
@@eduardariver7602 sabe pq o cursor n ta pegando?
oie, qual o tema do teu vs?
Oii, é o Tokyo Night
Detalhe que deixou o projeto incompleto
Um grande defeito dos seus 2 vídeos é que você não explica como colocar o sol e o Butão de mudar pro sol da lua e da lua pro sol
Oi dá um help pra mim, eu fiz tudo do jeito que vc fez, mas minhas imagens do google, facebook e github não ficaram carregadas na tela. Aparece o nome delas lá e etc, mas a imagem não carrega o que pode ser?
Oii, por aqui não consigo te ajudar muito bem, mas verifica se você fez todas as importações corretamente
@@larissakich então verifiquei tudo por completo, para mim não deu certo ainda. Estou tentando todas a possibilidades.
:D
@@larissakich será que é alguma extensão? qual vc usa?
Acredito que para imagens não seja por conta de extensão, me chama lá no Instagram que fica mais fácil
@@larissakich Ok vou chamar lá.
Pq a maioria das pessoas quando estão querendo virar dev só pensam em front end??
E o opção mais "fácil"
O que me ferra é JC, nunca estudei isso, só css e Html
Meu Deus é sério que precisa criar tudo isso de Div?...é div pra cada letra que escreve
Fiz dessa forma pois achei melhor de organizar, mas existem outras tags semânticas que podem ser usadas, se você quiser pode organizar como achar melhor, não precisa copiar.
@@larissakich Não moça, não comentei por mal, é realmente uma dúvida pois estou aprendendo, ai fiquei assustado kkkkkk
Qual tema você usa??
Usar a color normal n seria melhor ? Pq daí o código ficaria um pouco menos. Só deixaria o gradient msm o resto colocaria a color normal sem var
Oii, fiz com variáveis para o código ficar mais organizado, mas se preferir pode fazer sem
como assim mais organizado? vc teve q escrever o codigo la em cima depois repedir o nome das var novamente pra chamar os codigos. dai eu achei q teve um pouco mais de escrita, n sei se isso afeta muito o tamanho de uma pagina @@larissakich