Com fazer menu com HTML | CSS  

🎬#parte2: Continue Assistindo! • Com fazer menu com HTM...
✨ Compre na Amazon:
amzn.to/3UgqOhL
Neste vídeo remos um código HTML e CSS com um botão de menu responsivo com três linhas que se transformam em uma "X" quando clicadas. Ao clicar no botão, as linhas mudam de cor para vermelho.
Na estrutura HTML, temos um input do tipo checkbox com a classe menu Toggle que controla o estado do menu. Este input é associado a um rótulo (label) com a classe menu-btn, que contém três elementos span com a classe line. Estes span representam as linhas do botão de menu.
No CSS, o botão do menu é estilizado para ter uma aparência de botão, com as três linhas posicionadas verticalmente. As linhas são inicialmente horizontais e, quando o menu é clicado, se transformam em uma "X". A classe .active-line é adicionada às linhas quando o menu está ativo, alterando sua cor para vermelho.
O script JavaScript escuta o evento de mudança do input do tipo checkbox e adiciona ou remove a classe .active-line das linhas, dependendo do estado do menu. Isso cria o efeito de mudança de cor das linhas quando o menu é clicado.
#parte2 #layoutresponsive #html
✨IDE: ( Integrated Development Environment )Microsoft Visual Studio.
✨IDE: ( Integrated Development Environment ) Visual Studio Code.
EXTENSÕES VISUAL STUDIO CODE:
LIVE SERVER: Carrega a página automaticamente.
BEAUTIFY : Padroniza a formatação do código
COLOR HIGHLIGHT : Mostra as cores que você está criando no arquivo css.
INTELLISENSE FOR CSS: Fornece o auto completo da classe que você escreveu no seu código.
✨Tema do VS Code: Escuro+ (Escuro padrão)
✨Software Editor de videos: Shotcut.
✨Software para gravar a tela do computador: OBS Studio.
Google Fontes:
fonts.google.com/
⭐ Biblioteca JavaScript
cdnjs.cloudflare.com/ajax/lib...
Fontes de ícones
🔎fontawesome.com/v5.15/icons?d...
🔎fontawesome.com/
HTML E CSS:
🔎www.w3schools.com/default.asp
Site de verificação de erro:
🔎validator.w3.org/
Tabelas de cores:
🔎www.flextool.com.br/tabela_co...
Imagem para baixar:
🔎pixabay.com/pt/
Site para criar Thumbnails:
🔎www.canva.com/