HTML & CSS - Popup com backdrop-filter e position fixed - Projeto Front-end (HTML, CSS e Javascript) [Aula 6/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_SjYXVLwk1bU PARA BAIXAR O MINICURSO GRATUITO DE HTML E CSS: https://pages.hashtagtreinamentos.com/inscricao-minicurso-basico-html-css2?origemurl=hashtag_yt_org_minihtmlcss_SjYXVLwk1bU ----------------------------------------------------------------------- ► Arquivos Utilizados no Vídeo: https://pages.hashtagtreinamentos.com/arquivo-htmlcss-1OTOGOasmBTF87525vthvo9RIHYoLc0Vm?origemurl=hashtag_yt_org_planilhahc_SjYXVLwk1bU ► 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 sexta 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 construir um popup de inscrição para que possamos atribuir uma ação aos nossos botões e o usuário consiga visualizar esse popup sempre que clicar em um dos botões. Vamos ver algumas coisas muito interessantes como filter, backdrop filter, posicionamento (position fixed), query selector, event listener e um pouco de JavaScript! Isso será necessário tanto para formatar o nosso popup quanto para adicionar uma ação aos botões, dessa forma vamos poder visualizar o formulário popup quando o usuário clicar em um botão. Então assim que entrar na página, esse popup não fica visível, só mudará o seu estado quando o usuário clicar em um botão! Já estamos quase no final da nossa Landing Page! Espero que esteja gostando do projeto e que esteja acompanhando passo a passo para aprender tudo o que estamos ensinando! ----------------------------------------------------------------------- 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 00:15 O que já construímos? 00:28 O que está faltando? 02:28 O que temos no popup? 03:13 Div com a classe popup 05:10 Conteúdo do popup (botão fechar) 06:08 Conteúdo do popup (textos – placeholder) 07:13 Conteúdo do popup (botão vaga) 07:44 Estilização do popup + posicionamento 12:10 Propriedade filter e backdrop filter 14:27 Ajuste no formulário (popup) 16:00 Ajuste e formatações no input 19:42 Posicionamento do botão de fechar 21:10 Ajuste no botão de fechar 25:21 Display do popup 26:12 Visualização do popup (aberto e fechado) 27:40 JavaScript (atribuição ao popup – aberto/fechado) 30:26 Botão na seção aprender 30:45 Ação dos botões (query selector – event listener) 37:40 Repetindo o processo para cada botão 41:29 Ajuste no botão x para fechar 42:55 Testando todos os formulários (popups) 43:15 Como enviar o formulário? (gerenciador de e-mails) 44:05 Conclusão #htmlecss #htmlcss #html #css #hashtagprogramacao