Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - Cards com Efeito Hover com html e Css

#LayoutResponsive #FrontEnd #Css3 #Html5 Neste vídeo vamos criar quatros cards diferentes com efeito hover na imagem e texto. Em cada imagem e texto vamos colocar uma transformação com transições , cores e imagem diferentes. Para isso utilizamos a pseudo class nth:child com efeito hover. 📚 Muito Obrigado por Assistir! 00:00 INTRODUÇÃO COM HTML5 00:55 - CRIANDO UMA DIV CLASS CONTAINER 02:15 - COMO CRIAR O ESTILO CSS 03:40 - COMO CRIAR CARD OVERFLOW HIDDEN COM CSS 04:15 - COMO ALINHAR ITENS AO CENTRO COM DISPLAY FLEX 04:45 - CRIANDO UMA DIV TEXTO CSS 05:12 - COMO UTILIZAR NTH-CHILD COM HOVER 05:20 - COMO CRIAR SCALE E ROTATE NO TEXTO 05: 48 - COMO USAR O TRANSITION TIMING FUNCTION CUBIC-BEZIER 07:25 - CRIANDO A PSEUDO CLASS NTH-CHILD HOVER IMG 08:10 - COMO CRIAR TRANSFORM SKEW EM IMAGEM 08:25 - COMO CRAIR O TRANSFORM MATRIX EM IMAGEM 📌Saiba Mais https://www.youtube.com/c/WebOnlineDesenvolve 📌Repositório GitHub https://github.com/WebOnlineDesenvolve/formulario/tree/main/card%20com%20hover 📌 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 *************************************************