Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - COMO FAZER BOTÃO PARA REDES SOCIAIS | HTML E CSS

#LayoutResponsive #FrontEnd #Css3 #Html5 📚 Muito Obrigado por Assistir! 00:00 | INTRODUÇÃO 01: 00 | COMO ADICIONAR LINK DAS REDES SOCIAIS. 02:45 | COMOCRIAR BOTÃO PARA REDES SOCIAIS 04:05 | COMO USAR PSEUDO CLASSE NTH CHILD 05:55 | COMO CRIAR EFEITO HOVER EM CARDS Neste video vamos criar icones com links para redes sociais com efeito hover. No html teremos uma div container, depois uma nav com listas , dentro da lista uma tag 'a' para direcionar os links das redes sociais. Ainda dentro da tag 'a' temos uma tag span com uma font awesome. No estilo começamos zerando os espaçamentos e colocando uma fonte, uma largura de 100%,uma altura e uma posição relativa também temos uma propriedade 'overflow hidden' para o conteúdo não utrapassar a div. Na div icons onde teremos os icones da redes sociais teremos largura, altura, posição com o top de 30% e o left de menos 150 px para que parte dela fique escondida. Na lista também temos cor de fundo, cor de texto, sem decoração, espaçamento, display e transição. Para que cada logo tenha uma cor específica utilizamos a pseudo classe nth-child com uma cor de fundo. Também posicionamos a font awesome dentro dos cards. No efeito hover temos uma transformação com translate x para monstrar informção da rede. SAIBA MAIS 📌https://www.youtube.com/c/WebOnlineDesenvolve 📌https://github.com/WebOnlineDesenvolve 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 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/ *********************************************** TELA FINAL DO VÍDEO: Saiba Mais: Canal do Savio Ferraz - Animações feitas por @Savio Ferraz *************************************************