Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - COMO FAZER MENU HAMBURGUER CSS

#LayoutResponsive #FrontEnd #Css3 #Html5 📚 Muito Obrigado por Assistir! SAIBA MAIS 📌https://www.youtube.com/c/WebOnlineDesenvolve 📌https://github.com/WebOnlineDesenvolve Neste vídeo vamos criar um menu hamburguer com html e css. Primeiro vamos iniciar criando o HTML com um input do tipo checkbox que terá uma classe com o nome menu hamburguer, também teremos uma label com uma classe chamada menu-btn. Depois ainda no html vamos criar três span com uma classe com nome linha que será utilizada para as linhas do nosso menu. No CSS vamos padronizar todos os navegadores, depois vamos esconder o checkbox . Para o menu criamos as três linhas com largura e altura , posicionar no centro da nossa página, com margem, cor de fundo, sombra com profundidade. Por fim, usamos a propriedade checked do checkbox para animaçao do nosso menu. Os Mais Vendidos na Amazon em Computadores e Informática: https://amzn.to/3nWnCbr Mais Vendidos em Games e Consoles: https://amzn.to/3ufq8ed Mais Vendidos em Dispositivos Amazon e Acessórios: https://amzn.to/3EEfulQ Mais Vendidos em Apps e Jogos: https://amzn.to/39whbU9 Notebook: https://amzn.to/3EJk5TK Pcs: https://amzn.to/3zrgaas 🎵 Música ✨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. ✨Software Editor de videos: Shotcut. ✨Software para gravar a tela do computador: OBS Studio. Google Fontes: https://fonts.google.com/ ⭐ Biblioteca JavaScript https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js Fontes de ícones 🔎https://fontawesome.com/v5.15/icons?d=gallery&p=2 🔎https://fontawesome.com/ Ambiente de Desenvolvimento: codepen.io HTML E CSS: 🔎https://www.w3schools.com/default.asp Site de verificação de erro: 🔎https://validator.w3.org/ Tabelas de cores: 🔎https://www.flextool.com.br/tabela_cores.html Imagem para baixar: 🔎https://pixabay.com/pt/ Site para criar Thumbnails: 🔎https://www.canva.com/