Formulário com Modo DARK e LIGHT | HTML, CSS (com FLEXBOX) e JS | #1

Подписаться 20 тыс.

Просмотров 45 тыс.

50% 1

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

Наука

Опубликовано:

1 ноя 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@user-rx1lz4vk3h 2 месяца назад

Muito Obrigado pela sua ajuda, seus videos são demais, se puder trazer mais, voce explica muito bem. Sucesso sempre

@dayanapassos2711 Год назад

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 👏🏼👏🏼👏🏼👏🏼

@larissakich Год назад

Muito muito obrigada, tento sempre deixar ele o mais claro possível ❤️

@kirito-kun341 Год назад

Provavelmente você ja sabe, mas quando descobri o SMACSS, NameSpace e BEM o código fica de outro nível

@iremarpereiradasilva2250 Месяц назад

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.

@jpedro8537 Год назад

Sensacional, ótima didática. Conteúdo de extrema qualidade, código super limpo. Subscribe

@diegoalves4234 Год назад

muitoooo massa o vídeo, trás mais vídeos assim, explicando as coisas etc pff

@ramon3056 Год назад

Parabens logo de inicio ja gostei to mandando 👍 e vou apertar o sino.

@paulorodrigues1391 10 месяцев назад

Parabéns pelo conteúdo, realmente muito bom.

@emersonmarcio6556 Год назад

Muito massa!! Parabéns!! 👏👏👏

@felipebrito10 10 месяцев назад

Ficou fera, Lari!

@diesnei8067 Год назад

Didática excelente! Layout bem simples e moderno, amei cores que você utilizou

@larissakich Год назад

Aaaa muito muito obrigada! Fico muito feliz que tu tenha gostado! ❤️

@mescono642 Год назад

Durante o vídeo aprendi diversas coisas muito uteis para a minha criação de sites, grato.

@mika-qm7vs 11 месяцев назад

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.

@jefersonsilvadeveloper Год назад

Top, parabéns e obrigado!!!

@CentralOtaku Год назад

Unico video que consegui fazer esse bendito formulario, valeu minha nobre

@larissakich Год назад

Muito obrigada! Que bom que consegui te ajudar 😁

@dinamarciasantos4984 Год назад

Conteúdo muito bom, e bem explicativo, parabéns👏👏

@larissakich Год назад

Muito obrigadaaa ❤️ que bom que gostou!

@marianagoncalves6833 Год назад

Parabéns pelo vídeo, ficou perfeito!!!

@larissakich Год назад

Muito muito obrigada ❤️

@app2028 Год назад

muito bom super obrigado por compartilhar sua experiência!

@larissakich Год назад

Muito obrigada❤️

@FgS_5 Год назад

Conteudo de ouro. Parabéns

@larissakich Год назад

Muito obrigada❤!!

@naturezaviva74 Год назад

Parabéns 😍!

@BLESSED_BOY_777 Год назад

canal mttt bom para quem quer aprender programação

@larissakich Год назад

Muito obrigadaaaa ❤️

@jovemvisionaarioo Год назад

crlhhhh muito brabaa!!!!👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏👏

@Rapha_Dev Год назад

muito bom !!!!! amei o video ❤❤❤❤

@larissakich Год назад

Aaa que bom que gostou ❤️ muito obrigada!

@mojave999 Год назад

obrigada! muito boa tua didática

@larissakich Год назад

Oii, muito obrigada! Me motiva bastante ❤️

@AIRoyalty Год назад

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

@marcusvinicius6103 Год назад

boa !! 🌹🤘

@larissakich Год назад

Valeuuu ❤️

@fabiojorge8999 Год назад

Didática perfeita! Obrigado pelo compartilhar seu conhecimento! Qual é o tema que vc usa no vsCode?

@ii-rc6nr Год назад

Tokyo Night

@discernews6364 9 месяцев назад

Onde vc fez ou esta fazendo sua formação/curso Dev ?

@alansantos-cg7kw Месяц назад

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 RU-vid, 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 ?

@pedrodev7460 Год назад

olá, me Chamo Pedro Lucas gostei muito. Você da aula ou curso de html e css?

@larycaldas1988 Год назад

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.

@bryansantos6509 Год назад

Como coloca as pastas uma em baixo da outra? A minha fica tudo do lado do assets

@machosedoeu 10 месяцев назад

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

@ronin7205 Год назад

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?

@leemagic5376 10 месяцев назад

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.

@yushany Год назад

O meu não muda a cor de fundo :(

@jr10.juninho Год назад

poderia fazer um vídeo como fazer um menu website ?

@Perfilprivadosx1 2 дня назад

Tem como mandar todos os códigos apenas para copiar e colar, para apenas modificar

@startdev33 Год назад

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.

@yushany Год назад

O meu não muda a cor de fundo :(

@tiagoribeiro7037 Год назад

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.

@RampageV123 9 месяцев назад

Qual tema você usa ?

@Ceearense 9 месяцев назад

Como q publica essa página no Google?

@iagomarques9248 Год назад

sensational

@iagomarques9248 Год назад

cala a boca

@ohhtutu Год назад

@@iagomarques9248 ???KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK

@iamBiancaSouza Год назад

oie, qual o tema do teu vs?

@larissakich Год назад

Oii, é o Tokyo Night

@benmoraes5511 Год назад

9:11

@gabrielluna7085 Год назад

como centraliza os ícones na horizontal ? No meu continua na vertical

@eduardariver7602 Год назад

display: flex; flex-direction: row;

@machosedoeu 10 месяцев назад

@@eduardariver7602 sabe pq o cursor n ta pegando?

@shirakotakamoda1862 Год назад

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

@joceyrmartins Год назад

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?

@larissakich Год назад

Oii, por aqui não consigo te ajudar muito bem, mas verifica se você fez todas as importações corretamente

@joceyrmartins Год назад

@@larissakich então verifiquei tudo por completo, para mim não deu certo ainda. Estou tentando todas a possibilidades. :D

@joceyrmartins Год назад

@@larissakich será que é alguma extensão? qual vc usa?

@larissakich Год назад

Acredito que para imagens não seja por conta de extensão, me chama lá no Instagram que fica mais fácil

@joceyrmartins Год назад

@@larissakich Ok vou chamar lá.

@Gabriel-ny2om Год назад

Pq a maioria das pessoas quando estão querendo virar dev só pensam em front end??

@jhonkaylonmartins7597 Год назад

E o opção mais "fácil"

@shirakotakamoda1862 Год назад

Detalhe que deixou o projeto incompleto

@nickcaralhopqpmano Год назад

O que me ferra é JC, nunca estudei isso, só css e Html

@erickpereira82 Год назад

Meu Deus é sério que precisa criar tudo isso de Div?...é div pra cada letra que escreve

@larissakich Год назад

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.

@erickpereira82 Год назад

@@larissakich Não moça, não comentei por mal, é realmente uma dúvida pois estou aprendendo, ai fiquei assustado kkkkkk

@samarapaixao8607 10 месяцев назад

Qual tema você usa??

@carloshenriquegoncalvesval1818 9 месяцев назад

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

@larissakich 9 месяцев назад

Oii, fiz com variáveis para o código ficar mais organizado, mas se preferir pode fazer sem

@carloshenriquegoncalvesval1818 9 месяцев назад

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