Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - COMO FAZER CARD ANIMADO HTML E CSS

MINUTAGEM DO VÍDEO 00:00 - INTRODUÇÃO 00:26 - CABEÇALHO HTML 00:43 - COMO FAZER UMA DIV NO CORPO HTML 01:04 - COMO COLOCAR IMAGEM PÁGINA HTML 01:18 - CRIANDO UMA DIV PARA O TEXTO 01:27 - COMO FAZER UMA TAG H2 01:33 - COMO FAZER UM PARÁGRAFO NO HTML 02:26 - COMO ESTILIZAR UMA PÁGINA HTML 02:35 - RESERTANDO OS VALORES DE ESPAÇAMENTO 02:55 - ALINHANDO OS ITENS DO BODY 03:14 - COMO COLOCAR IMAGEM DE FUNDO PÁGINA HTML 03:35 - ALINHANDO E POSIONANDO DA DIV GERAL 04:20 - COMO CRIAR FORMA E TAMANHO DE UMA DIV 05:40 - COMO COLOCAR ALTURA COM EFEITO HOVER 06:04 - DIV IMAGE TAMANHO E POSIÇÃO 06:57 - TAMANHO E POSIÃO DA IMAGEM 07:21 - COMO DEIXAR TEXTO INVISÍVEL - VISIBILITY HIDDEN 08:29 - COMO DEIXAR TEXTO VISÍVEL COM EFEITO HOVER 09:03 - COMO FAZER BORDA ARREDONDADA NA IMAGEM #CardAnimado #CardResponsivo #LayoutResponsive #FrontEnd #HTML5 #CSS3 #CascadingStyleSheets #SiteResponsivo #HypertextPreprocessor Nesse vídeo vamos começar criando uma div para englobar todas as divs , imagens e texto do corpo da página HTML. Depois vamos criar uma segunda div, onde vamos colocar mais duas div dentro dela. Uma para colocar a imagem e a outra para o texto, isso vai se repetir nos três cards. No CSS vamos iniciar resetando os valores de espaçamentos e depois colocaremos uma font-family :Times New Roman', Times, serif. No corpo da nossa página vamos colocar uma imagem de fundo, alinhar os itens no centro, também usamos o display flex para organizar de forma flexível. Na div geral que contém todas as outras divs, vamos colocar um tamanho, um espaçamento uma posição e alinhar os itens no centro, também vamos organizar de forma flexível e também utilizamos o flex wrap para forçar os itens de forma flexível a ficar na mesma linha ou coluna. Na próxima div vamos especificar o valor máximo de largura, uma altura, uma posição com espaçamento e margem, uma borda arredondada, uma cor de fundo, uma direção com transição. Também utilizamos um efeito hover com altura. Como nas outras div também colocamos tamanhos, posição e margem e posicionamento. Continuando com uma imagem especificando que seu tamanho não pode ultrapassar 100% e com bordas arredondas de 10px. No texto iremos esconder colocando uma visibilidade hidden com transição. Com efeito hover vamos monstrar o texto com uma (visibility: visible) com transição delay.. MÚSICA: Meet & Fun! - OfShane FOTOS: Fundo do vídeo Imagem de GREG MONTANI por Pixabay CACHORRO Imagem de SALFOTO por Pixabay https://pixabay.com/pt/photos/h%C3%ADbrido-c%C3%A3o-animal-de-estima%C3%A7%C3%A3o-6274156/ ZEBRA Imagem de PETE BALL por Pixabay https://pixabay.com/pt/photos/zebra-selvagem-qu%C3%A9nia-%C3%A1frica-6275284/ GIRAFA Imagem de WOLFGANG_HASSELMANN por Pixabay Texto utilizado no vídeo: Fonte: Cachorro https://pt.wikipedia.org/wiki/C%C3%A3o Zebra https://pt.wikipedia.org/wiki/Zebra Girafa https://pt.wikipedia.org/wiki/Girafa 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. 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/