HTML & CSS - Clip Path e Drop Shadow na Seção Aprender - Projeto Front-end (HTML, CSS e Javascript) [Aula 4/7]

Quer saber mais sobre o nosso Curso Completo de HTML e CSS? Clique no link abaixo para garantir sua vaga na próxima turma: https://dlp.hashtagtreinamentos.com/html-css/espera/impressionador?origemurl=hashtag_yt_org_listaesperahc_zxnWgjOmAEM PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_zxnWgjOmAEM ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1Ncacnkx8ezCrrCjUAP-v8wwc4qjt068f?origemurl=hashtag_yt_org_planilhahc_zxnWgjOmAEM ► Site da MasterClass de Full Stack que foi Utilizada na Aula: https://lp.hashtagtreinamentos.com/full-stack/aula/inscricao ----------------------------------------------------------------------- Caso prefira o vídeo em formato de texto: https://www.hashtagtreinamentos.com/landing-page-html-e-css ----------------------------------------------------------------------- PARA CONTRATAR A HASHTAG PARA SUA EMPRESA: https://www.hashtagtreinamentos.com/treinamentos-corporativos?fonte=yt ----------------------------------------------------------------------- Fala Impressionadores! Hoje vamos para quarta aula do Curso de HTML e CSS que tem como objetivo te ensinar a criar uma Landing Page do ZERO! Nessa aula nós vamos criar a seção aprender da nossa Landing Page, que é muito similar ao que fizemos na seção passos (da aula anterior). Além disso, nós vamos criar o hexágono no CSS com ajuda do clip path generator, para criar essa forma. Depois disso, vamos criar camadas do hexágono e a sombra no hexágono, pois ela não é simplesmente o nosso box shadow, ela vai ser um drop shadow! Por fim, nós vamos utilizara posição relativa de um elemento no CSS para poder posicionar o hexágono no local correto, para isso vamos utilizar o position e translate! Para concluir vamos fazer alguns ajustes no hexágono, para que o visual fique igual ao que temos na página de modelo que estamos utilizando! ----------------------------------------------------------------------- Vídeos Recomendados ► Curso Básico de HTML e CSS https://www.youtube.com/watch?v=vtX9BzESWnQ&list=PLpdAy0tYrnKwmcenKePWr9TQ9deRanAr7&pp=iAQB ► Como Baixar e Configurar o VSCode para HTML e CSS https://youtu.be/WyXcfCPlIlk ----------------------------------------------------------------------- Hashtag Programação ► Inscreva-se em nosso canal: http://bit.ly/3c0LJQi ► Ative as notificações (clica no sininho)! ► Curta o nosso vídeo! ----------------------------------------------------------------------- Redes Sociais ► Blog: https://bit.ly/2MRUZs0 ► YouTube: http://bit.ly/3c0LJQi ► Instagram: https://bit.ly/3o6dw42 ► Facebook: http://bit.ly/3qGtaF2 Aqui nos vídeos do canal da Hashtag Programação ensinamos diversas dicas de HTML e CSS para que você consiga se desenvolver nessa linguagem de programação e criar seus próprios projetos! ----------------------------------------------------------------------- Conteúdo da Aula 00:00 Introdução 02:08 O que já fizemos? 02:28 O que está faltando? 02:45 Seção aprender (Similar à seção passos) 13:14 Hexágono no CSS (clip path generator) 16:50 Formatações do hexágono 20:58 Camadas do hexágono (ajustes e formatações) 26:50 Sombra no hexágono (filter drop shadow) 31:00 Reduzir/aumentar tamanho com proporção (aspect-ratio) 32:23 Posição relativa de um elemento no CSS (position e translate) 40:55 Replicando o processo para os outros temas da seção 42:48 Replicando o hexágono para a logo 53:00 Ajustes (hexágono intermediário) 54:15 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao