Desenvolvimento Web com Front-End - Aprendendo do Zero" HTML, CSS e JS - Como Fazer Cards Responsivos com Efeito Hover

#LayoutResponsive #FrontEnd #CascadingStyleSheets #SiteResponsivo #HypertextPreprocessor #LinguagemMarcaçãoHipeTexto #CardsResponsive #FlexBox #TextShadow #BoxShadow MINUTAGEM 00:00 - INTRODUÇÃO 00:20 CRIANDO O PÁGINA HTML 02:41 - ESTILIZANDO PÁGINA HTML COM CSS 03:25 - COMO DEIXAR A PÁGINA RESPONSIVA UTILIZANDO FLEXBOX 03:56 - COMO COLOCAR LARGURA E ALTURA NA DIV 04:25 - COMO DEIXAR A IMAGEM DO TAMANHO DA DIV 04:51 - COMO APLICAR EFEITO HOVER COM BOX SHADOW 05:33 - APLICANDO VISIBILITY HIDDEN NO TEXTO 06:24 - APLICANDO VISIBLE NO TEXTO COM EFEITO HOVER 06:45 - APLICANDO TEXT SHADOW NO TEXTO COM EFEITO HOVER 06:58 - APLICANDO COR E TAMANHO TEXTO 07:19 - APLICANDO COR E TAMANHO NO PARÁGRAFO Nesse vídeo vamos fazer cards responsivo utilizando o CSS3 com a propriedade Flexbox. Também vamos utilizar a propriedades box e text shadow. No início do HTML vamos fazer uma div container para colocar o nosso conteúdo, depois faremos as outras para cada opção desejada. Na segunda colocaremos mais duas div uma chamada image e a outra texto. No CSS vamos começar com reset nos espaçamento com uma margin e padding, no corpo vamos colocar uma cor. Na nossa div colocaremos o display flex para que se comporte como um bloco, justify-content e alinhamento no centro, também vamos utilizar o flex-wrap wrap para quebra de linha quando for visualizado no dispositivo mobile. Vamos colocar tamanho, largura, alinhamento e margem no nosso conteúdo. Depois vamos colocar largura máxima para que não ultrapasse o tamanho desejado. Na imagem com efeito hover colocamos uma opção opaca, uma sombra, transição e visualização do texto quando passamos o mouse encima da imagem. No título do texto colocamos uma cor, tamanho e sombra. O mesmo se repetiu no parágrafo. 🎵 Music: Make You Move - Ofshane 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. Imagens utilizadas no vídeo: Estátua da Liberdade Imagem de Ronile por Pixabay https://pixabay.com/pt/photos/est%C3%A1tua-da-liberdade-nova-iorque-267948/ Ponte Golden Gate Imagem de Free-Photos por Pixabay https://pixabay.com/pt/photos/ponte-golden-gate-1149942/ Gran Canyon https://pixabay.com/pt/photos/grand-canyon-arco-delicado-1245911/ Imagem de Free-Photos por Pixabay Fonte de pesquisa texto: https://pt.wikipedia.org/ Dicas de sites: 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/