Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - COMO FAZER ANIMAÇÃO EM IMAGEM CSS

Minutagem 00:00 INTRODUÇÃO 00:26 LINK PARA UTILIZAR A FONTE AWESOME 00:47 ZERANDO OS ESPAÇAMENTOS 01:00 COMO COLOCAR TAMANHO NA IMAGEM - CSS 01:28 COMO FAZER UMA DIV TIPO CLASS 01:50 COMO COLOCAR IMAGEM HTML 02:13 COMO FAZER TAG H3 02:30 CRIANDO UMA TAG HR 02:46 COMO FAZER UM BOTÃO 03:05 FONT AWESOME NO HTML 07:18 ESTILIZANDOA A DIV CONTAINER 09:48 COMO MODIFICAR IMAGEM COM O EFEITO HOVER 10:49 COMO CRIAR ANIMAÇÃO DE BOTÂO COM EFEITO HOVER 13:24 COMO APLICAR EFEITO HOVER NO BOTÃO 13:55 APLICANDO COR COM FONT AWESOME 14:27 COMO FAZER UM KEYFRAMES Nesse vídeo vamos fazer animações em produtos e botões para deixar página de e commerce mais iterativa e melhorar a experiência com usuário. No corpo do html faremos uma div para colocar as outras três, uma que agrupamos as outras duas e com sua imagens, textos e botões. No html vamos começar com reset de espaçamento, colocamos tamanho, posição, margem, alinhamento. Nas classe que colocamos imagem e texto faremos uma sombra com box shadow. Na imagem faremos um efeito hover para aumentar a imagem com a propriedade translate X e Y , escala e rotação. Também customizamos o botão com dimensões, tamanho, bordas, imagem de fundo, posicionamento, cor aplicado com efeito hover. Na classe do ícone da fonte awesome, terá uma cor vermelho e animação linear infinita com keyframes com inicio de opacidade 1 e final 0. #LayoutResponsive #FrontEnd #CascadingStyleSheets #SiteResponsivo #HypertextPreprocessor #LinguagemMarcaçãoHipeTexto 🎵 Música: Snake on the Beach - Nico Staf ✨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. 📌Fontes de ícones https://fontawesome.com/v5.15/icons?d=gallery&p=2 https://fontawesome.com/ Dicas de site: 📌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/