Construa o site de portfólio pessoal

1. Apresentação: Bem-vindo ao novo curso, onde você pode aprender como criar um site de portfólio pessoal do zero com apenas três tecnologias principais: HTML, CSS e JavaScript. Se você quiser criar seu próprio portfólio, isso o ajudará a se representar da melhor maneira e a ser contratado. Então este é o curso certo para você. Se você perguntar a qualquer um dos empregadores ou gerentes de projeto como escolher os melhores desenvolvedores, cada um. Mas o mais importante sobre o desenvolvedor é se representar com um bom padrão. Se você está familiarizado com HTML, CSS e JavaScript , todos já podem criar um site de portfólio pessoal muito bom que permitirá que você se expresse e mostre a todos suas habilidades e conhecimentos. Ao longo deste curso, criaremos um modelo de site de portfólio repleto de recursos e efeitos modernos e bonitos. Porque se você quiser criar um site usando apenas essas três tecnologias principais, ele definitivamente deve ser avançado e interessante. Não dizemos que ele se tornará seu próprio site de portfólio e que você poderá copiá-lo. Mas será uma grande inspiração que o ajudará a criar seus próprios sites de portfólio ou aprimorá-los, se todos tiverem um. Como já dissemos, construiremos este projeto do zero. Não usaremos nenhuma das ferramentas, bibliotecas e estruturas de terceiros Depois de criarmos um site, ensinaremos como hospedar o projeto e criar vida para torná-lo disponível para todos. Além disso, você poderá aprender como fazer o formulário funcionar para obter feedback de seus convidados, fazer com que o projeto tenha peças de ótimo tamanho para que cada usuário possa acessar o site a partir de qualquer dispositivo óptico. Acho que esse curso será interessante e útil para todos. Quero dizer, é tártaro ou desenvolvedores experientes. Então não espere e se junte a nós 2. Configuração: Olá e bem-vindo ao curso. Estamos felizes que você esteja aqui e esperamos que você aproveite o curso antes de nos aprofundarmos e começarmos a criar nossos projetos. Antes de tudo, temos que preparar nosso ambiente de trabalho. Tenho certeza de que a maioria de vocês já está preparada para escrever o código. Nesse caso, sinta-se à vontade para pular este vídeo e entrar nos projetos imediatamente. Mas se não, então esse não é o problema. Vamos prosseguir e configurar algumas ferramentas. Ao longo deste curso, precisaremos de duas ferramentas principais, que são um navegador web moderno e um editor de texto. Como navegador da web, vou usar principalmente o Google Chrome. E também, em alguns casos, precisaremos da ajuda do Mozilla Firefox. Tenho certeza de que você já sabe como instalar esses navegadores da web e acho que todos vocês já os têm. Mas de qualquer forma, vamos ver como baixá-los. Para obter o Google Chrome, precisamos acessar esse URL aqui e baixar o navegador da web. O processo de instalação é bem simples, então não vou passar por isso. Quanto ao Mozilla Firefox, você precisa usar esse URL e baixar o navegador aqui Ambos os links serão anexados a esta palestra. Tudo bem, vamos seguir em frente e falar sobre o editor de texto. Vamos usar o Visual Studio Code porque no momento, ele é um dos melhores editores de texto do mundo Obviamente, você pode se sentir à vontade e usar seu editor de texto favorito. Depende de você, mas eu recomendo usar o código VS. Para baixar o código VS, você precisa visitar este site e obter o editor de texto para Windows, Mac ou Linux. Este link também será anexado a esta palestra. O processo de instalação do visual Studio Code também é muito simples, então tenho certeza de que ele não terá problemas com ele. Tudo bem, então, depois de instalar as duas ferramentas, você estará pronto para começar Então, vamos direto aos projetos 3. Pré-visualização do projeto: Olá, bem-vindo à primeira palestra deste curso, na qual vou examinar o projeto e descrever todas essas seções em detalhes Antes disso, gostaria de mencionar que o projeto será criado com base em HTML, CSS e JavaScript. Portanto, você deve ter uma compreensão básica dessas tecnologias para acompanhar todas as palestras Tudo bem, vamos prosseguir e analisar os projetos. A primeira seção que vamos construir será a aterrissagem, na qual temos esses círculos animados. Eles se movem. Uma vez que movemos o cursor. Também no centro do empréstimo, temos a imagem do web designer e de círculos improváveis Ele se move dentro de seu próprio círculo e cria esse efeito agradável e legal. Além disso, a imagem é misturada com o fundo. Então, você aprenderá sobre como criar esse efeito usando CSS. No canto superior direito da página, temos alguns itens de navegação. Eles estão conectados às seções apropriadas. Se clicarmos neles, navegaremos até as seções relevantes. Além disso, se começarmos a rolar para baixo, os itens de navegação se transformarão no ícone do menu E se clicarmos nele, eles serão exibidos de volta. No canto superior esquerdo da página, temos o logotipo, o nome completo do designer. Nos lados esquerdo e direito do empréstimo, você pode ver o texto que está adesivo Se eu começar a rolar para baixo, ele ficará preso por um tempo. Ok? Além disso, temos aqui o botão com um bom efeito de passar o mouse Se eu clicar nesse botão, ele nos levará até a seção de projetos. Tudo bem, isso é tudo sobre a aterrissagem. Em seguida, temos a seção Sobre mim. Inclui textos grandes que, por padrão, são misturados com o plano de fundo E se eu começar a passar o mouse sobre o texto , os elétrons ficarão mais claros com bons efeitos de animação Além disso, temos aqui um botão semelhante que nos permite navegar até a seção de contato. Ok, isso é tudo sobre esta segunda seção. Em seguida, vem a seção do projeto, que eu acho que é uma das seções mais interessantes do projeto. Por padrão, vemos aqui seis projetos diferentes. Se eu passar o mouse sobre elas, as imagens começarão a rolar bem para cima em um ambiente Se eu clicar em qualquer um dos projetos, eles se expandirão. Você poderá rolar para baixo e conferir o projeto em detalhes Temos aqui o botão de fechamento. Se eu clicar nele , o projeto será fechado. Além disso, temos aqui o botão Mostrar mais. Se eu clicar nele, alguns projetos ocultos serão exibidos. A página será rolada para baixo automaticamente. O texto no botão será alterado para mostrar menos. Além disso, a seta girará de acordo com a direção de rolagem Se eu clicar no botão, os projetos se ocultarão. Tudo bem, a seguir vem a seção Serviços. Temos aqui alguns serviços diferentes exibidos em uma fonte grande. Se eu clicar neles, eles se expandirão e algumas descrições serão exibidas. Ok, depois disso será a última seção do projeto, que é o contato. Ele consiste em alguns campos de entrada diferentes. E também temos aqui um botão Enviar. Na verdade, esse formulário funciona. Quero dizer, os campos são validados e o usuário também pode enviar uma mensagem Porque assim que construirmos o projeto, nós o hospedaremos e o colocaremos no ar. Se eu sentir os campos. Em seguida, clique em enviar solicitação, o formulário será enviado e você receberá a mensagem. Como eu disse, o formulário está validado. Por exemplo, se eu deixar os campos vazios e enviar o formulário , receberemos algumas mensagens de erro. Logo no final da página, temos uma bela apresentação de slides dos ícones das mídias sociais Além disso, temos alguns recursos adicionais no projeto. Como você pode ver, o cursor tem o círculo e os pontos, e eles se movem bem com o cursor Em seguida, se eu passar o mouse sobre alguns elementos como projetos ou serviços, o círculo mudará de forma e obteremos a forma dos elementos de Harvard Além disso, temos um bom efeito com o ícone Menu e a barra de progresso. Se eu passar o mouse sobre eles , eles ficarão grudados no Mas se eu mover o cursor para longe de suas posições iniciais, eles obterão seus lugares padrão. Por fim, vou falar sobre a barra de progresso. Ele é colocado no canto inferior direito e tem uma posição fixa. Quando começarmos a rolar a página para baixo , esse círculo branco começará a parecer com a linha vermelha Quando descermos até a página, todo o círculo será preenchido. E também a seta girará. Se eu clicar na barra de progresso , navegaremos até o topo da página. Além disso, podemos clicar na barra de progresso. Isso nos permitirá navegar seção por seção. A barra de progresso funciona com a seção do projeto. Se eu expandir o projeto , a barra de progresso será atualizada e começará a funcionar de acordo com a imagem. Mas se eu fechar o projeto, a barra de progresso continuará funcionando de acordo com a página. Tudo bem, então isso é tudo sobre essas seções e características do projeto Como já dissemos, ele responderá aos diferentes tamanhos de tela Se eu inspecionar a página, mude para o modo responsivo e verifique o projeto Nos diferentes tamanhos de tela. Você verá que é responsivo. Eu gostaria de mencionar aqui uma coisa o projeto é construído em um tamanho de tela extra grande. Isso coincide com 1920 pixels de largura e 1080 pixels de altura. Se você estiver usando um tamanho de tela relativamente menor do que o do projeto, pode não parecer bom durante as palestras Portanto, eu recomendo mudar para o modo responsivo e definir a largura e a altura dessa forma De qualquer forma, você não precisa se preocupar porque, ao final do projeto, tornaremos o site responsivo Como já mencionei, hospedaremos o projeto e o disponibilizaremos usando o Netlify Então, acho que estamos prontos para começar. Em seguida, precisamos configurar algumas ferramentas e estaremos prontos. Então, vamos seguir em frente. 4. Preparar o fundo e criar estilos comuns: Tudo bem, então estamos prontos para começar a construir nossos projetos. Eu criei uma nova pasta na área de trabalho na qual eu tenho apenas as imagens. Quero dizer, temos aqui algumas pastas diferentes para imagens diferentes. Vamos abrir essa pasta no código VS e criar nossos arquivos de trabalho. Precisamos de três arquivos diferentes. O primeiro será o index.html. Então, o próximo vai assustar o CSS. Quanto ao terceiro, deve ser scripts dot js. Em seguida, abra o arquivo index.html e crie o documento HTML básico. Para isso, vou usar um dos pacotes de código embutidos do VS chamado emmet Temos que colocar um ponto de exclamação e pressionar Tab ou Enter Temos aqui tags HTML básicas. A primeira coisa que vou fazer é mudar o título. Vamos inserir aqui. Nick Brown, designer criativo. Depois disso, vamos vincular arquivos CSS e JavaScript. Vou abrir a tag de link nos elementos principais. E então temos que especificar aqui o caminho do arquivo. Para o arquivo JavaScript, precisamos abrir a tag de script logo acima da tag do corpo de fechamento. E então, no atributo source , temos que especificar o caminho do arquivo. Tudo bem, então todos os três arquivos estão vinculados e agora podemos executar o projeto no navegador Para isso. Como já mencionei anteriormente, vou usar o Live Server. Novamente, isso nos permite executar o projeto ao vivo no navegador e fazer atualizações e alterações sem atualizar a página todas as vezes Por fim, vou colocar o navegador e o editor de texto para que possamos começar. Então, a primeira coisa que vou fazer é criar esses fundos escuros. E também criaremos alguns estilos redefinidos e comuns. Em primeiro lugar, vamos começar com a marcação HTML Vamos inserir seus comentários. Contêiner de páginas. E um contêiner fora da página. Em seguida, abra a tag div e atribua ao contêiner da classe. Portanto, esse elemento incluirá todo o conteúdo da página da web Em seguida, vou criar outra tag div para o plano de fundo da página Mas primeiro, vamos inserir seus novos comentários. Na verdade, prefiro separar o código dos comentários porque isso nos permitirá escrever código mais limpo e mais compreensível Então, vamos inserir sua página BG e fora da página vg. Tudo bem, então isso é tudo sobre a marcação HTML agora, vamos para o arquivo CSS Como eu disse, vou preparar alguns estilos de redefinição e comuns. Então, vamos inserir novos comentários. Estilos comuns. De estilos comuns. Em seguida, selecione todos os elementos usando um asterisco. Então, primeiro de tudo, vou me livrar do padrão, da margem e do preenchimento de cada elemento Vamos definir os dois como zero. Então eu vou fazer a caixa de borda do tamanho da caixa. Nesse caso, o preenchimento e borda serão incluídos no tamanho do elemento Em seguida, vou remover o subjacente padrão dos links. Portanto, precisamos usar a decoração de texto com o valor nenhum. Além disso, quero me livrar dos marcadores padrão dos itens da lista Vamos definir o estilo da lista, digite como nenhum. Em seguida, vou remover o contorno padrão dos elementos Vamos defini-lo como nenhum. Na verdade, em resumo, estou na borda que aparece quando nos concentramos nos fóruns e nos botões Então, a última coisa que eu quero fazer é definir a família de fontes. Ao longo deste projeto, usaremos duas fontes diferentes do Google. Então, vamos visitar o site do Google Fonts. Então, a primeira fonte que vou pesquisar é chamada euro. Vamos selecionar todos os estilos. Para vincular a fonte, temos duas maneiras diferentes. Podemos copiar o link aqui e colá-lo no elemento principal do arquivo HTML. Ou podemos clicar em Importar, pegar esse URL e colá-lo no arquivo CSS. Esse telefone será nosso telefone padrão. Vamos defini-lo para cada elemento. Precisamos aqui, do nome da fonte, JIRA e sensorial. Tudo bem, o próximo telefone que vou procurar se chama Poppins Vou selecionar todos esses estilos, exceto os que os italianos desejam. Em seguida, pegue o link e cole-o também no arquivo CSS. Tudo bem, então todos esses estilos serão aplicados a todos os elementos que serão criados ao longo do projeto Em seguida, vou cuidar da unidade de medida. Ao longo do projeto, usaremos a rampa como unidades de medida Por padrão, uma RAM é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 pixels. Quero converter uma RAM em dez pixels porque acho que será mais conveniente e fácil de calcular. Para fazer isso, temos que diminuir o tamanho da fonte dos elementos HTML e torná-lo em 62,5% Portanto, nesse caso, um rem será igual a dez picos Tudo bem, isso é tudo em relação aos estilos comuns no momento, vamos cuidar do plano de fundo Vamos inserir novos comentários para a página precisamos de n da página BG e selecionar elementos div Então, o plano de fundo será corrigido. Se dermos uma olhada no projeto finalizado e rolar para baixo, você verá que ele está fixo e não se move Então, vamos definir sua posição para corrigir. Em seguida, vou definir essa largura e altura. Vamos definir a largura para 100%. Quanto à altura, vou fazer com que seja 100% da janela de visualização Portanto, precisamos que aqui esteja h. Ok? Depois disso, vou definir a imagem como plano de fundo. Primeiro, vamos usar uma função de gradiente linear porque eu quero deixar a imagem um pouco mais escura Vamos inserir seu valor RGBA com uma cor preta e com sete pontos de opacidade. Em seguida, use novamente o mesmo valor RGBA com a opacidade Depois disso, vou definir o caminho do URL da imagem. E temos que especificar aqui o caminho da imagem. Temos a pasta de imagens e a imagem de fundo , chamada bg dot JPG. Além disso, vamos definir a posição para o centro e também definir o plano de fundo. Repita, não repita. Por fim, quando estiver definido o tamanho do plano de fundo, vamos torná-lo colorido Tudo bem, então aqui temos nossa imagem de fundo em tela cheia Em seguida, vou cuidar do cursor. Então, vamos seguir em frente. 5. Criar círculo de mouse animado: Ok, então, depois de preparar o plano de fundo e criar alguns estilos comuns. Em seguida, vou tirar aqui do cursor. Quero dizer aquele círculo e o ponto, que se movem de acordo com os movimentos do mouse. Além disso, se pararmos o mouse, você verá que o círculo e os pontos estão se animando Além disso, se vivermos a página , eles desaparecerão. Tudo bem, então é isso que vamos fazer neste vídeo. Primeiro, vamos criar esses dois elementos no arquivo HTML. Eu vou fazer isso fora do contêiner. Vamos inserir novos comentários, Círculo do mouse e do Círculo do Mouse. Então, teremos dois elementos diferentes. O primeiro será o círculo do mouse e o segundo serão os pontos. Quero dizer ponto de mouse. Tudo bem, vamos falar sobre o HTML. Próximo. Vou estilizar os dois elementos. Então, vamos inserir novos comentários no CSS logo após os estilos comuns. Precisamos do mouse Circle. E do Mouse Circle. Em seguida, selecione Círculo do mouse. Primeiro, vou definir sua largura e altura. Vamos configurar os dois para seis RAM. Então, precisamos que a borda com os valores 0.1 seja sólida. E como cor, vou usar C7, um seis a dois E também vou fazer com que o elemento seja arredondado usando o raio da borda de 50 por cento. Tudo bem, então aqui temos o círculo. Em seguida, precisamos cuidar de sua posição. Vou fixar a posição dois. Então, no momento, o círculo não é mais viável porque acabou atrás do fundo E para corrigir isso, vamos usar a propriedade z-index Precisamos atribuir a ele algum valor maior que zero. Digamos 300. Tudo bem, isso é tudo em relação ao círculo. Por enquanto. Vamos seguir em frente e cuidar do segundo elemento, que é um ponto. Vamos selecioná-lo e definir sua largura e altura. Vou fazer com que os dois apontem fibrina e também mude a cor de fundo Vamos usar nove P 0 D E. Então aqui temos os pontos. Agora precisamos cuidar de sua posição. Temos que fixar sua posição. Na verdade, alguns desses blocos serão semelhantes para os dois elementos, então podemos selecioná-los simultaneamente. Então, podemos pegar essas três linhas de código e colar. Então você. Tudo bem, é isso. No momento, os dois elementos estão estilizados e agora é hora de fazê-los funcionar usando JavaScript. A primeira coisa que precisamos fazer é selecionar os dois elementos. Então, vamos criar uma nova variável. Vou chamá-lo de Mouse Circle. Em seguida, selecione-o usando o método seletor de consulta. Precisamos especificar aqui o nome da classe, mouse Circle. Em seguida, vou selecionar o ponto do mouse. Na verdade, podemos duplicar essa linha de código. Em seguida, altere o nome da variável. Vai ser mouse dot. E também altere o nome da classe. Precisamos do mouse dot. Ok, depois disso, precisamos criar uma função na qual temos que definir as posições superior e esquerda para ambos os elementos. No começo, vamos fazer comentários inseguros. Círculo do mouse e do círculo do mouse. Em seguida, crie uma função de seta. Vou chamá-la de Círculo do Mouse N. Essa função terá dois parâmetros, X e Y. Esses parâmetros serão os valores das propriedades superior e esquerda Para defini-los, vou usar propriedades de estilo e texto CSS. Vamos anexar a propriedade de estilo ao Mouse Circle, seguida pela propriedade fiscal CSS, na qual podemos definir vários estilos CSS. Então, como dissemos, temos que definir as posições superior e esquerda como o valor da posição difícil. Vou passar aqui o parâmetro Y, seguido pelos pixels. E então precisamos da propriedade left com um valor X pixels. Vamos duplicar essa linha de código e alterar a circunferência de dois pontos Tudo bem, agora temos que chamar essa função e definir os argumentos adequados para os parâmetros X e Temos que executar essa função quando o mouse se move. Quero dizer, temos que anexar os eventos de movimento do mouse aos elementos do corpo. E uma vez que esse evento é acionado , temos que chamar essa função. Primeiro, vamos conectar um ouvinte de eventos ao corpo. Quando um corpo de ponto do documento é seguido pelo método add event listener Então temos que passar aqui o tipo de evento, que será o movimento do mouse. E também precisamos aqui de uma função de retorno de chamada, que será executada assim que o evento for acionado Além disso, vou passar aqui o objeto do evento. No início. Vamos ver o console, como esse evento funciona. Vamos abrir as ferramentas do desenvolvedor e mudar para a guia console. Então, quando começarmos a mover o mouse, o evento ocorrerá. Certo? Agora, quero ver o objeto de evento, que passamos aqui na função de retorno de chamada Agora, se movermos o mouse, obteremos o objeto de evento do mouse no console. Se reduzirmos oito , encontraremos aqui muitas propriedades diferentes. Vamos usar o cliente X e o cliente. Por que propriedades? Na verdade, eles nos dão a distância das bordas superior e esquerda da janela de exibição Portanto, esses valores devem ser os argumentos da função. Quero dizer, esses valores serão as posições superior e esquerda do círculo e dos pontos. Então, primeiro de tudo, vamos criar variáveis. Vou usar a declaração let. Vamos nomear a variável como X. Ela deve ser igual ao ponto E do cliente X. Em seguida, duplique essa linha de código e transforme X em Y. Depois disso, temos que chamar a função, quero dizer Mouse Circle F N, e temos que passar X e Y Agora, se movermos o mouse, o círculo e os pontos se moverão com o curso Certo? Agora, como você pode ver, precisamos mudar ligeiramente as posições de ambos os elementos porque precisamos que o cursor esteja no centro do círculo com um. para conseguir isso, temos que mover os dois elementos acordo com os eixos X e Y por meio da função Transform Translate de -50 por cento E temos que passar aqui -50 por cento duas vezes. Ok, agora as posições dos dois elementos estão fixas. E a única coisa que precisamos fazer é adicionar uma pequena animação aos dois elementos. Para isso, precisamos usar quadros-chave CSS. Primeiro, vamos criar a animação para o Círculo do Mouse. Então, durante a animação, vou aumentar e diminuir o tamanho dos elementos algumas vezes. Crie quadros-chave. Vou chamá-lo de Mouse, Circle e ele. Quero dizer animação. Portanto, a 0%, a largura e a altura serão seis RAM. Então, vamos duplicar esse código. O próximo será de 25%. Vou aumentar os dois valores para oito RAM. Então, novamente, duplique o código. O próximo passo será 35 por cento. A largura e a altura serão RAM completas. Em seguida, teremos 70%. Os valores serão um bonde. Quanto à última etapa, quero dizer 100%, precisamos novamente de valores padrão, seis rampa. Tudo bem? Então, os quadros-chave estão prontos e agora temos que aplicar essas regras ao Círculo do Mouse Vamos continuar e usar a propriedade de animação. Primeiro, precisamos especificar o nome dos quadros-chave, Mouse Circle Anime especificar a duração será de 10 s. Além disso, executaremos a animação infinitamente E então vou usar uma das funções de temporização da animação, linear Tudo bem, então, como você pode ver, o círculo está se animando Vamos fazer isso de forma semelhante aos pontos do mouse. No caso dos pontos do mouse, vou aumentar o tamanho apenas uma vez Então, vamos criar quadros-chave CSS. Eu vou chamá-lo de Mouse Dots, Anime. Então, com 0%, vou criar largura e altura de 0,5 RAM. Esses são os valores padrão que a próxima etapa será de 55% Vamos mudar os valores, torná-los 1,5 g. E, no final da animação, quero dizer 100%. Precisamos, novamente, o valor padrão é 0,5 g, certo? Portanto, os quadros-chave são preparados para os pontos do mouse. Vamos prosseguir e atribuir a ele uma propriedade de animação. Precisamos aqui do nome dos quadros-chave, mouse dot anim, seguido pela duração de 10 s. Então, novamente, precisamos de infinitos e Ok? Então, como pode ver, os dois elementos são animadores e temos aqui um bom efeito Antes de terminarmos esta palestra, vou fazer algumas coisas Quando o cursor sai da página, quero ocultar os dois elementos. Para isso, vou usar um dos eventos chamado mouse leave. Vamos conectar o ouvinte do evento ao corpo. Em seguida, precisamos especificar aqui o evento que o mouse sai, seguido pela função de retorno Então, para ocultar os elementos, vou usar a opacidade com o valor zero Portanto, quando a opacidade do ponto no estilo Círculo do Mouse com valor zero, duplique essa linha de código e altere a circunferência de código e altere a circunferência Agora, se sairmos da página , o círculo e o ponto desaparecerão. E se voltarmos , eles aparecerão novamente. Tudo bem, estamos quase terminando. Só precisamos fazer mais uma coisa. Na verdade, temos aqui um pequeno problema. Se eu recarregar a página e manter mouse fora da página , o círculo e o ponto acabarão no canto superior esquerdo da página Não precisamos disso. Temos que resolver esse problema. Vou esconder os dois elementos por padrão e seguida, torná-los visíveis apenas os eventos de movimento do mouse ocorram. Portanto, precisamos atribuir a ambos os elementos a opacidade zero Em seguida, precisamos passar a opacidade um com a parte superior e deixar as posições dentro da função Então, agora, se eu recarregar a página, o problema será corrigido Tudo bem, finalmente, terminamos com o círculo do mouse. Vamos passar para a próxima palestra. 6. Criar e personalizar o Cabeçalho do site: Tudo bem, agora é hora de começar a trabalhar em nossa primeira seção, que será essa landing page Temos aqui alguns elementos diferentes com bons efeitos de animação. Esses círculos se movem quando movemos o mouse. E como você pode ver, eles se movem na direção oposta. Também no centro do Landing, temos um grande círculo no qual você pode ver a imagem do designer com alguns efeitos interessantes. Além disso, temos um logotipo no canto superior esquerdo da página e também alguns elementos de texto nos lados esquerdo e direito do Landing. Vamos começar a criar uma marcação HTML. Vamos inserir novos comentários logo após o plano de fundo da página. Precisamos da Seção um da Seção um. Em seguida, abra a tag da seção com a classe Seção um. Então, como dissemos, esta seção incluirá alguns elementos diferentes. O primeiro será o logotipo. Vamos inserir novos comentários para o logotipo. Em seguida, vou abrir a tag de link com o logotipo da turma. E como conteúdo, vou instituir você, Nick Brown. Tudo bem. Em seguida, teremos círculos animados. Então, vamos inserir novos comentários para círculos animados. Então, no geral, teremos cinco círculos. Quatro deles serão pequenos e também terão um grande círculo no centro. Vamos abrir uma tag DIV para a classe. Círculos. Será o invólucro de pequenos círculos Os círculos serão criados usando tags DIV. Então, vamos abrir o TikTok com as classes Circle e Circle one O primeiro também será o nome da classe Common. O segundo, vamos usá-lo para estilos individuais. Vamos duplicar essa linha de código três vezes e depois mudar os nomes das classes Tudo bem, além disso, precisamos de outro círculo no qual tenha a imagem do designer Vamos abrir a tag DIV. Será o invólucro. Vamos designados para a classe Main Circle. Em seguida, insira sua tag de imagem. Vamos especificar aqui o caminho da imagem. Temos uma pasta de imagens que precisamos selecionar uma pasta chamada Landing. E então a imagem será desenhada em ponto JPG. Tudo bem, é isso, sobre os círculos. Em seguida, vou criar elementos de cabeçalho, que serão colocados nos lados esquerdo e direito do Landing. Vamos inserir novos comentários. Texto em destaque. E do texto principal. Vou abrir a tag de cabeçalho H4 com o texto em destaque da classe e o texto em destaque Novamente, o nome da primeira classe será usado para estilos comuns Quanto ao segundo, vamos usá-lo para estilos individuais, como o conteúdo. Vamos inserir sua criatividade. Então eu vou duplicar essa linha de código. Altere o nome da classe para a qual precisamos destacar o texto e também altere o conteúdo que você deve criar. Tudo bem, então vamos falar sobre a marcação HTML. No momento, nada está visível aqui porque o fundo está fixo e os elementos acabaram por trás dele. Vamos resolver esse problema primeiro. Vamos inserir novos comentários para a seção um no arquivo CSS. Em seguida, selecione esta seção Elementos e altere sua posição, torne-a relativa. Agora os elementos estão visíveis e podemos começar a personalizá-los. Vamos definir a largura e a altura dessa seção. Eu vou definir com 200 por cento. Quanto à altura, será 100% da janela de visualização. Tudo bem, agora é hora de personalizar o logotipo. Vamos inserir novos comentários para o logotipo. Em seguida, selecione os elementos do link. Em primeiro lugar, vou definir sua posição. Vamos torná-lo absoluto. Como você se lembra, ele será colocado no canto superior esquerdo da página Então, vou definir a posição superior como RAM, pois ambas as posições à esquerda serão cinco corridas. Além disso, vamos aumentar o tamanho da fonte e transformá-la em Ram. Vou transformar o texto em maiúsculas Também mude a cor, deixe-a branca, certo Isso é tudo sobre o logotipo. Agora temos que seguir em frente e personalizar o resto dos elementos. Antes de começarmos pequenos círculos, quero cuidar do círculo principal porque agora, como você pode ver, temos aqui uma grande imagem que cobre quase todo o empréstimo Antes de tudo, quero colocar o conteúdo desta seção, o centro. E para isso, vamos usar o flexbox. Precisamos configurar a tela para flexionar. Então, para enviar para os elementos horizontalmente, precisamos do justify-content Quanto à centralização vertical, precisamos alinhar os itens. Centro. Ok, então o conteúdo está centralizado e agora temos que começar a trabalhar no círculo principal Em primeiro lugar, vou inserir comentários, círculos animados. E de círculos animados. Em seguida, selecione o círculo principal e defina a largura e a altura. Vou configurar os dois para 55 RAM. E também defina a posição como absoluta. No momento, a imagem está muito grande. Precisamos manter o tamanho da imagem, mas também precisamos aplicar com uma altura alta no elemento principal. Estou no círculo principal. Então, vou usar overflow hidden. Tudo bem, agora o problema está resolvido. Vamos fazer com que o elemento seja arredondado usando o raio da borda de 50%. Além disso, precisamos enviar para a imagem dentro do círculo. Para isso, podemos usar, novamente, livros de fluxo para evitar escrever o mesmo código repetidamente, vou criar uma nova classe no Common Styles Vamos chamá-la de central e atribuir a ela a flexibilidade de exibição, justificar o centro de conteúdo e alinhar o centro Em seguida, vou me livrar desses estilos do elemento da seção. E, em vez disso, podemos atribuir o centro da aula à seção e também ao círculo principal No arquivo HTML. No momento, a imagem está centralizada e precisamos personalizá-la um pouco Vamos selecionar Imagem. Agora, quero usar uma das propriedades CSS chamada modo de mistura. Isso nos permitirá misturar a imagem com esse fundo escuro. Essa propriedade pode aceitar valores diferentes. Você pode brincar com eles. Nesse cenário, acho que a melhor é a cor. Esquivar. Tudo bem, isso é sobre o círculo principal. Vamos seguir em frente e cuidar do resto dos Círculos. Vamos selecionar o invólucro, fornecer Elements. E primeiro defina sua posição, torne-a absoluta. E também defina as propriedades superior e esquerda, ambas como zero. Em seguida, vou expandir esse elemento para todo o Landing. Para isso que vou definir, podemos esconder os dois 200 por cento. Como você se lembra, criamos quatro pequenos círculos diferentes. Vou alinhá-los usando uma grade CSS. Criaremos duas colunas e duas linhas. E colocaremos cada círculo em uma célula separada da grade. Então, primeiro, vamos definir a exibição como grade e, para definir as colunas, vou usar a propriedade chamada colunas do modelo de grade. Como dissemos, teremos duas colunas semelhantes. Então, vou usar a função de repetição, que terá dois argumentos. O primeiro será o número de colunas para. Quanto ao segundo, será o tamanho. Como o tamanho. Vou usar uma unidade fracionária. Vamos duplicar essa linha de código e transformar colunas em linhas Tudo bem? Para ver o layout da grade, vou inspecionar a página E na guia Elementos, encontre os círculos. Como pode ver, temos aqui um pequeno botão chamado grade. Se eu clicar nele, o layout da grade será exibido. Temos aqui quatro células diferentes e cada círculo ficará em uma célula separada. Vamos seguir em frente e selecionar Círculo e definir sua largura e altura. Vou definir os dois para 20 para serem executados. Também para torná-los arredondados use o raio com o valor de 50% E então eu vou usar uma cor temporária. Quero dizer, a cor de fundo. Vamos configurá-lo para vermelho. Como você pode ver, todos os quatro círculos são colocados em uma célula separada. Eles são alinhados automaticamente porque temos quatro células E para círculos, não precisamos definir um layout de grade para seu círculo. A única coisa que precisamos fazer é colocar círculos no centro das células. E para isso, podemos usar uma linha, autocentralização. Ele será enviado para os elementos verticalmente. E também precisamos justificar o egocentrismo, que enviará ao Tudo bem? Agora temos que personalizar cada círculo separadamente. Vamos começar com o círculo um. Eu vou definir o plano de fundo. Vamos usar o URL e especificar a parte da imagem. Precisamos de imagens de pastas além de Landing. E então temos que selecionar Circle one, IMG dot JPG. Em seguida, vou especificar a posição, torná-la central. E também precisamos definir a repetição em segundo plano como sem repetição. E, finalmente, vamos definir o tamanho do plano de fundo, fazer com que ele cubra. Veio. Então, temos aqui uma bela imagem de fundo. Em seguida, vou criar uma borda. Vamos definir sua largura de 2,5 RAM para que o estilo da borda seja pontilhado E como cor, vamos usar um B14 para ser 18. Além disso, quero que a borda fique fora da imagem. E para isso, precisamos usar o clipe de fundo com a caixa de conteúdo do valor. Tudo bem, vamos ver lá. Bem, no primeiro círculo, agora, vou duplicar esse código três vezes. Em seguida, altere os nomes das classes. Além disso, vou mudar os nomes das imagens. Além disso, vou mudar as fronteiras. Para a segunda ordem, precisamos da mesma largura para que o estilo seja tracejado E também mude a cor. Precisamos de F, F, B, D, 07. Então, para o terceiro círculo, vou aumentar a largura. Vamos fazer disso uma RAM. Em seguida, mude o estilo. Vai ser o dobro. E também mude a cor, torne-a nove. Corça. Como parte do último círculo, a largura será 0,7. Deveria ser o dobro. E como cor, vamos usar branco. Tudo bem, então todos os quatro círculos são Personalizados. A única coisa que vou fazer é diminuir a opacidade deles Vamos atribuir ao Circle. Estou no nome de classe comum opacidade 0.5. Tudo bem? Então, finalmente, com os círculos, terminamos. Em seguida, vou cuidar dos elementos do texto, que devem ser colocados nos lados esquerdo e direito. Vamos continuar e inserir novos comentários. Para texto em destaque. Vamos selecionar os dois cabeçalhos com um nome de classe comum (texto em destaque Vou aumentar o tamanho da fonte, fazê-la funcionar. Além disso. Mude a cor, torne-as brancas e transforme o texto em maiúsculas Tudo bem, depois disso, vou alinhar os dois cabeçalhos nos lados esquerdo e Para isso, vou usar margem. Vamos selecionar o primeiro título com sua classe individual Feature text1 e usar margem com os seguintes valores Vou definir como zero na parte superior, depois R0, no lado direito. Então teremos zero na parte inferior e giraremos no lado esquerdo. Vamos duplicar esse código. Mude o nome da classe. Precisamos do Feature text2 e também alteramos os valores Vou deixar o valor do lado superior como zero. Então teremos marrom bronzeado maior que zero e depois automático. Tudo bem, então vamos considerar que os elementos estão alinhados da maneira correta. Em seguida, vou colocar as letras verticalmente em uma coluna Para isso, precisamos definir a largura como zero. E também precisamos usar uma dessas propriedades CSS chamada word wrap com uma palavra de quebra de valor. Então, os eletrodos são colocados verticalmente. Em seguida, vou aumentar o espaço entre as letras. Para isso, podemos aumentar a altura da linha. Vamos fazer com que seja 3,5. Tudo bem, então estamos quase terminando o pouso. A única coisa que eu quero fazer é mudar a posição desses elementos de cabeçalho. Se dermos uma olhada no projeto finalizado e rolar para baixo, você verá que os títulos ficam pegajosos por Então, vamos definir a posição deles e torná-la pegajosa. Portanto, se quisermos colocar os elementos na borda superior da janela de exibição, teremos que definir a posição superior como zero Tudo bem, finalmente, personalizamos uma página de destino. Agora é hora de torná-lo dinâmico. Quero dizer, temos que adicionar algumas animações e efeitos interessantes Então, vamos passar para a próxima palestra. 7. Animate Circles: Tudo bem, então nós personalizamos uma página de destino em uma palestra anterior e agora temos que torná-la dinâmica Temos que animar esses círculos com o movimento do mouse. Antes de começarmos a trabalhar nisso, quero escolher um pequeno problema. Temos duas palavras nos lados esquerdo e direito. O segundo teria sido um design, não um designer. Então, vamos alterá-lo no arquivo HTML. Certo? Então, vamos fazer a animação funcionar usando JavaScript. Vamos para o arquivo script.js. A primeira coisa que vou fazer é selecionar círculos e a imagem. Antes disso, quero fazer uma mudança rápida em você. Na verdade, esse arquivo será grande, então seria melhor colocarmos essas duas variáveis dentro dos comentários. Ok, depois disso, vou criar novos comentários para os círculos animados abaixo. Então, como dissemos, vou selecionar os círculos e a imagem. Vamos criar uma nova variável. Vou chamá-lo de Círculos. Temos vários círculos, portanto, vou usar o método seletor de consulta all Vamos especificar aqui o nome da classe Circle. Em seguida, vou selecionar a imagem. Vamos criar uma nova variável e chamá-la de IMG principal e selecionar Imagem usando o método seletor de consulta Temos que especificar aqui o nome da classe dos elementos principais, Círculo principal e, em seguida, o nome do alvo, IMG Tudo bem, depois disso, vou criar uma função, vamos chamá-la de círculos animados. Essa função terá três parâmetros. O primeiro será um objeto de evento e também terá parâmetros X e Y. Eles nos ajudarão a definir as direções dos movimentos do mouse. Então, novamente, temos que mover círculos, quer que o mouse se mova e temos que movê-los na direção oposta. que significa que se o mouse for para a esquerda, os círculos devem se mover para a direita. E o mesmo que precisamos na vertical. Se o mouse for para cima, o círculo deverá ir para baixo Tudo bem, então, antes de tudo, quero mencionar aqui a principal coisa da disfunção, que é que temos que definir a posição do mouse usando o cliente X e o cliente Por que propriedades na posição do mouse? Quero dizer a posição de oito quando ele para de se mover. Em seguida, temos que comparar esses valores com a nova posição do mouse e obteremos a direção do movimento do mouse. Então, vamos começar a escrever o código. Será mais compreensível e, na prática, precisamos criar duas variáveis para o cliente X e o cliente. Por que propriedades? Vou chamar a primeira variável de X. Ela deve ser igual a zero Em seguida, duplique essa linha de código e transforme X em Y. Depois disso, temos que armazenar os valores de declínio X e cliente Por que propriedades nessas variáveis. Então, aqui, precisamos ser iguais ao ponto E do cliente X e o mesmo que precisamos para a direção y. Então, novamente, essas variáveis armazenarão a última posição do mouse. Agora, se quisermos obter a direção do movimento do mouse, podemos simplesmente comparar os parâmetros X e Y com as variáveis amex e M Y. Para isso, precisamos usar uma instrução if na qual temos que definir se X é menor que M X. Se essa condição for verdadeira, então vou executar para o console alguns textos, como movido para a esquerda Em seguida, vou criar outra declaração if na qual temos que definir a direção y. Portanto, precisamos que Y seja menor que MY. E então eu vou correr para o console, subir. Certo? Agora podemos chamar essa função quando os eventos de movimento do mouse inspiraram, todos nós já usamos esse evento anteriormente. Então, temos que chamar essa função. Aqui. Temos que passar os argumentos E, X e Y. Ok? Então, vamos inspecionar a página e mudar para a guia do console. Se nos movermos para cima , o colocaremos no console E se eu passar para o lado esquerdo , obteremos o resultado adequado no console. Agora sabemos como obter as direções dos movimentos da boca e conseguimos definir o movimento dos círculos. Da mesma forma, podemos definir a direção do movimento do mouse para o lado direito e para baixo. Tudo bem? Então, quando o mouse se move para o lado esquerdo , os círculos devem se mover para o lado direito. E para fazer isso, temos que aumentar os valores de suas posições à esquerda. Em primeiro lugar, temos que examinar os círculos. Nós os selecionamos usando o método seletor de consulta all, que retorna objeto semelhante a uma matriz chamado lista de Portanto, temos que examinar a lista de nós e alterar a posição de atraso de cada círculo Para examinar a lista de nós, vou usar um dos métodos auxiliares de matriz chamado Temos que anexá-lo aos círculos. O método forEach usa um argumento. Será a função de retorno de chamada, que por si só usa um parâmetro e é o item atual durante o loop Então, como dissemos, temos que mudar a posição esquerda do círculo. Portanto, precisamos aqui da propriedade chamada Estilo, seguida pela esquerda. E eu vou mudar a posição em cem pixels. Agora, se eu mover o mouse para o lado esquerdo, os círculos não se moverão porque agora eles têm uma posição estática padrão. Então, temos que mudar isso e tornar relativo. Agora, se eu me mover para o lado esquerdo, os círculos se moverão para a direita. No momento, eles se moveram sem nenhum efeito. Vamos corrigir isso usando as propriedades de transmissão sun. No começo, vamos cuidar dos movimentos. Além desses círculos, também precisamos mover a imagem. Portanto, precisamos usar o estilo IMG principal, não o esquerdo. E o valor de cem pixels. Como os círculos, precisamos mudar a posição da imagem e torná-la relativa. Então, se nos movermos para a esquerda , os círculos e a imagem se moverão para o lado direito, para a direita. Vamos seguir em frente e cuidar do movimento ascendente. Podemos simplesmente pegar esse bloco de código e colá-lo dentro da segunda instrução if. A única coisa que precisávamos fazer era mudar a posição esquerda para cima. Então, se eu mover o mouse para cima , os Elementos cairão. Certo? Então, duas direções estão prontas. Agora temos que cuidar do resto das instruções. Quero dizer, quando movemos o mouse para a direita e para baixo, para isso, temos que usar declarações else if em que devemos considerar condições opostas Portanto, precisamos aqui que X seja maior que M X. Se essa condição for verdadeira, então temos que mover os elementos para o lado esquerdo Portanto, temos que diminuir os valores da posição esquerda. Vamos copiar esse código. Cole aqui e adicione sinais de menos. Precisamos do mesmo para a segunda declaração if. Vamos criar declarações de outra forma: se , como condição de que precisamos, Y for maior que Em seguida, pegue o código aqui e novamente, adicione os sinais de menos Então, como você pode ver, todas as quatro direções funcionam bem. Agora temos que tornar esse fato mais suave. Para isso, temos que usar a transição. Precisamos, você fica com uma duração de 2 s. e 2 segundos no topo. Na verdade, também precisamos da mesma transição para a imagem. Então, vamos pegar essa linha de código e colá-la na imagem. Tudo bem, agora temos um bom efeito suave. Na verdade, temos aqui um pequeno problema. Se eu recarregar a página e começar a mover o mouse, os círculos saltarão para cima E para corrigir isso, precisamos definir o topo e deixar os bens por padrão Vamos definir os dois como zero. Também precisamos do mesmo para a imagem. Tudo bem, então, finalmente, terminamos. Antes de terminarmos esta palestra, quero fazer mais uma coisa Usamos aqui 100 pixels algumas vezes. E talvez seja necessário alterar esse valor no futuro. E para isso, você deve mudá-lo em todos os lugares. Então eu acho que seria melhor se armazenássemos esse valor na variável e depois usássemos essa variável abaixo Vamos criar a variável Z e torná-la igual a cem. Então eu vou mudar a forma dos pixels com a variável Z. Tudo bem, é isso Terminamos de trabalhar nos círculos animados. Vamos seguir em frente. 8. Criar e personalizar o botão principal: Tudo bem, então, na última palestra criamos esses círculos animados E agora vou trabalhar nesse botão aqui. Tem alguns bons efeitos de foco. Depois de passar o mouse sobre ele, esse círculo amarelo se expandirá para o botão inteiro Não importa de que lado você passa o mouse. O botão de. Esse elemento amarelo aparecerá de todos os lados. E também o botão girará levemente. No momento, vemos aqui os projetos e, se clicarmos neles, ele navegará até a seção do projeto. Mas nesta palestra, vou apenas criá-la e personalizá-la Quanto à navegação, trataremos disso mais tarde. Antes de começarmos a trabalhar no botão, vou acrescentar mais algumas coisas ao empréstimo Eu quero mover esses pequenos círculos um pouco para longe do círculo principal porque eles terão mais espaço para se mover. Quanto ao círculo principal, quero expandi-lo um pouco ao passar o mouse Ok, primeiro de tudo, vamos mover os círculos. Eu vou fazer isso usando margem. Portanto, para o primeiro e o terceiro círculos, precisamos da margem esquerda com valor menos dez Quanto ao segundo e quarto círculos, vamos usar a margem direita com o valor menos dez corridos. Tudo bem, isso é tudo sobre esse pequeno círculo. Então, vamos seguir em frente e cuidar do círculo principal. Vou aumentar sua largura e altura ao passar o mouse. Então, vamos selecionar o círculo principal com mouse e, em seguida, definir a largura e a altura, ambas como 75 percursos. Além disso, vou usar a transição. Para um efeito suave. Precisamos com pontos de duração em segundo e depois altura com a mesma duração. Então, se eu passar o mouse sobre o círculo principal , nada acontecerá. A razão é que temos aqui o círculo e os pontos. Eles estão na frente da boca. E eles bloqueiam os eventos do ponteiro. Para corrigir isso, temos que atribuir a ambos os elementos Eventos de ponteiro, nenhum. Tudo bem, agora está tudo bem e podemos começar a trabalhar no botão Primeiro de tudo, vamos criar uma marcação HTML. Vamos inserir seus comentários conhecidos. Para o botão principal. Eu o chamo de principal porque teremos alguns botões de pesquisa na página da web O botão será criado usando elementos de link. Vamos atribuir a ela a classe main btn. Portanto, o botão consistirá em algumas partes diferentes. Teremos uma seta que será criada usando três linhas. E também teremos o elemento span com os projetos de texto. Vamos abrir a tag div, que envolverá o conteúdo do botão atribuído ao conteúdo btn principal da classe Em seguida, vou criar linhas usando tags div. Com a linha BGN principal da classe. Precisamos de três deles. E, finalmente, precisamos abranger o elemento com os projetos de conteúdo. Vamos inserir novos comentários no arquivo CSS. Para o botão principal. Em seguida, selecione os elementos do link e defina sua posição como absoluta. Então, agora ele é colocado no centro da página. Se eu selecionar todos os elementos , você os verá no centro. Ok, vamos adicionar mais alguns estilos. Vou definir largura e altura. Vamos fazer com que os dois tenham 13 RAM. Também altere a cor de fundo. Vou usar sua chamada ou 90 E, 0 E. E também fazer o botão arredondar usando raio de borda Ok, a seguir, vou mudar sua posição. Quero colocá-lo na parte inferior desta seção. Então, vamos colocar a 23ª rampa inferior. Então, a última coisa que vou fazer agora em relação a esse elemento é criar uma borda. Precisamos dele com os valores apontando para a RAM para que o estilo seja pontilhado Quanto à cor, vai ser branca. Tudo bem, vamos seguir em frente e personalizar o conteúdo. Selecione-o. E antes de tudo, vamos definir sua largura e altura. Vou definir para os dois 200 por cento. E também vou criar uma fronteira. Vamos atribuir a ele um ponto para ram pontilhado e também usar a cor E7 P E 08 Então, e também usar a cor E7 P E 08 neste momento, o conteúdo tem a forma Vou fazer com que seja arredondado. Então, vamos usar o raio da borda com um valor de 50 por cento. Ok? Em seguida, vou criar um pequeno espaço entre essas fronteiras. Para isso, vou atribuir ao botão principal um pequeno preenchimento Vamos fazer com que seja uma rampa de 0,1. Por padrão, definimos caixa de borda com tamanho de caixa E isso nos permite manter a largura e a altura dos elementos inalteradas E isso empurra o conteúdo do elemento. Tudo bem, vamos ver o conteúdo agora. Em seguida, vou criar a seta. Para isso, temos três elementos div vazios. Em primeiro lugar, vou esconder esse painel por um tempo Em seguida, selecione as linhas. Em primeiro lugar, vou definir a posição como absoluta. Então eu vou definir a posição de topo. Vamos fazer isso para RAM. Além disso, precisamos definir largura e altura. A largura será de três RAM. Quanto à altura, vou fazer 0,5 grama e também criar uma borda com o valor de 0,1 RAM sólido. E a cor branca. Aqui temos as linhas. À primeira vista, parece que temos aqui apenas uma linha, mas todas as três linhas são colocadas umas sobre as outras Precisamos posicionar cada um deles separadamente. Mas antes disso, vou centralizá-los dentro do conteúdo. Para isso, vou usar o flexbox. Podemos atribuir ao centro de classes de conteúdo e aos elementos HTML Tudo bem, agora as linhas estão colocadas no centro. Em seguida, temos que posicionar cada linha separadamente para criar uma seta. Vamos começar com a primeira linha. Vou selecionar a linha btn principal com o seletor enésimo filho. E temos que especificar aqui o número um. Então, vou girar a linha de acordo com o eixo z em -45 graus Então, a primeira linha é girada. Vamos fazer o mesmo com a segunda linha. Na verdade, vou duplicar esse código, depois alterar o número que precisamos e também me livrar do sinal de menos Como você pode ver, as duas linhas são giradas, mas não é disso que precisamos Agora mesmo. Eles são girados a partir do centro Quero dizer, a origem da transformação é o centro. Precisamos mudar isso. No caso da primeira linha, precisamos que a origem da transformação esteja no centro esquerdo. Quanto à segunda linha, precisamos do centro direito. Agora temos um resultado melhor, mas ainda precisamos fazer algumas mudanças. Quero mover as duas linhas horizontalmente. Quero dizer, temos que mover a primeira linha para o lado esquerdo. Quanto ao segundo, devemos movê-lo para o lado direito. Então, vou fazer isso usando a função translate x. Para a primeira linha, precisamos aqui de -0,65 RAM. Como provavelmente na segunda linha, precisamos do mesmo valor, mas sem o sinal de menos Tudo bem, então, finalmente, as duas primeiras linhas são colocadas corretamente. A única coisa que eu quero fazer é eliminar partes das bordas de ambas as linhas. Para o primeiro, precisamos do passeio, o valor nenhum. Quanto ao segundo, precisamos da borda esquerda. Nenhum. Tudo bem, vamos seguir em frente e cuidar da terceira linha. Vamos selecioná-lo usando novamente o nono seletor de filhos. Portanto, no caso da terceira linha, temos que girar oito acordo com o eixo z em 90 graus E também precisamos movê-lo usando função translate x em 0,5 rampa. Quanto à fronteira com a fronteira esquerda, nenhuma. Tudo bem, então finalmente, temos aqui uma flecha. Vamos seguir em frente e personalizar esse elemento de extensão, que agora está oculto do HTML. Vamos eliminar esse comentário daqui e seguida, selecionar elementos de extensão no arquivo CSS. Em primeiro lugar, vou definir essa posição. Vamos torná-lo absoluto. Em seguida, mova-o um pouco para baixo usando posição inferior com um valor de três rampa e também mude a cor, torne-o branco Então, aqui temos esse elemento de amplitude. Vamos adicionar mais alguns estilos. Precisamos mudar o tamanho da fonte. Vamos fazer com 1,1 RAM. Além disso, vou aumentar a espessura da fonte. Vamos fazer 600 e depois transformar o texto em maiúsculas Tudo bem, então isso é tudo sobre esse elemento de amplitude. A única coisa que vou fazer neste vídeo é girar o botão em si. Então, vamos atribuir a ela uma transformação. Gire 40 graus. Tudo bem, vamos ver. O botão é criado e personalizado. Em seguida, temos que criar um efeito de foco. Então, vamos passar para a próxima palestra. 9. Adicionar efeito do Ripple ao botão principal: Então, na aula anterior, criamos e personalizamos o botão principal na página de destino E agora temos que criar um efeito de foco. Vamos dar uma olhada no projeto finalizado mais uma vez. Então, quando passarmos o mouse sobre o botão, o círculo amarelo cobrirá o conteúdo Ele aparece do lado exato em que entramos na boca e também o conteúdo está girando levemente Criaremos esse efeito usando animações JavaScript e CSS Tudo bem, vamos até a resposta do arquivo script.js para escrever o código, inserir novos comentários, botão principal e botão principal Então, a primeira coisa que precisamos fazer é obter as coordenadas do cursor dentro do botão. Quero dizer, precisamos obter a parte superior e deixar que as posições do cursor sejam medidas a partir das bordas superior e esquerda do botão. Antes de fazer isso, precisamos selecionar o botão em si. Então, vamos criar a variável principal BTN e selecionar a parte inferior usando o método seletor de consulta Temos que especificar aqui que o nome da classe Main seja dez. Depois disso, temos que anexar a ele e o ouvinte de eventos com o mouse inserir os eventos Portanto, precisamos adicionar o método ouvinte de eventos ao evento chamado mouse enter e também a função de retorno de chamada Portanto, o método de inserção do mouse é acionado apenas uma vez quando passamos o mouse sobre o elemento Então, como dissemos, temos que obter as posições superiores esquerdas do cursor dentro do botão Para obter essas posições, precisamos usar as propriedades do cliente X e do cliente por quê? Lembre-se de que eles nos fornecem as posições superior e esquerda do cursor, medidas a partir das bordas superior e esquerda da janela de exibição Portanto, para que as posições do curso estejam dentro do botão, precisamos encontrar a diferença entre as propriedades X e Y do cliente e as posições esquerda e superior do curso. Então, para torná-lo mais compreensível, vamos escrever o código. No início. Vamos fazer uma pausa aqui e o objeto do evento. A seguir, mostrarei como obter as informações sobre os elementos. Para isso, podemos usar um dos métodos chamados get bounding client Vamos correr até o console e ver o que esse método nos oferece. Precisamos de E dot, target, dots, get bounding Então, se eu passar o mouse sobre o botão , obteremos um objeto chamado DOM react Se eu o deixar, você encontrará aqui algumas propriedades diferentes. Temos as posições, quero dizer de baixo, da esquerda para a direita e de cima. Também temos aqui a largura e a altura dos elementos. Além disso, você pode ver aqui as propriedades X e Y. E, na verdade, elas são iguais às propriedades esquerda e superior. Assim, podemos usar esses valores para calcular as posições superiores esquerdas do cursor dentro do botão Vou criar uma nova variável. Vamos ligar para a esquerda. Então, precisamos do cliente de ponto E X menos ponto E, pontos-alvo. Obtenha o método de reação do cliente limitador. E temos que usar aqui a posição esquerda. Então, vamos ver essa variável no console. Quando passarmos o mouse sobre o rechonchudo , obteremos a posição esquerda do Mas agora dentro do botão. Quero dizer, é medido a partir da borda esquerda do botão. Tudo bem? Da mesma forma, precisamos definir a posição superior. Podemos simplesmente duplicar esse código e, em seguida, alterar o nome da variável de que precisamos. Também precisamos do seu cliente, por quê? E depois, novamente, no topo. Tudo bem, então ambas as posições estão definidas e agora precisamos criar novos elementos nessas posições. Faremos isso usando um dos métodos dom chamados create Elements. Vou declarar uma nova variável fora dos eventos Vamos chamar isso de ondulação. Então, abaixo, precisamos criar novos elementos Div. Usando o método de criação de elemento. Precisamos especificar o nome da tag dentro dos parênteses Depois disso, precisamos definir as posições superiores esquerdas do E usaremos os valores que definimos aqui. Então, precisamos aqui Ripple dot, style, dot left. Em seguida, abra os crases e insira sua variável à esquerda, que acabamos Então eu vou duplicar essa linha de código e mudar da esquerda para o topo Então, o elemento é criado, mas precisamos anexá-lo ao botão Para isso, temos que usar um dos métodos chamados prepare, e ele adicionará os elementos como o primeiro filho do elemento pai. Precisamos passar aqui a ondulação do valor Então, para provar que o elemento está sendo criado ao passar o mouse, vamos mudar para a Em seguida, passe o mouse sobre o botão. Como você pode ver, o elemento profundo é criado dentro do botão. E também temos aqui as posições esquerda e superior. Tudo bem, a próxima em Personalizar este elemento no arquivo CSS Vamos criar uma nova classe. Eu vou chamar isso de ondulação. Para fazer com que as posições superiores do lado esquerdo funcionem, precisamos definir a posição do Vamos torná-lo absoluto. Em seguida, vou definir largura e altura. Vamos definir os dois em 200% e também alterar a cor de fundo. Vamos usar sua cor, u0, v0. Oh oito. Tudo bem, isso é tudo sobre esses ladrilhos do Ripple Para aplicá-los aos elementos, temos que adicionar essa classe à lista de classes de elementos. Portanto, precisamos da lista de classes Ripple Dot. Em seguida, precisamos usar o método chamado add. E temos que passar por aqui. Ondulação. Ok, então, se passar o mouse sobre o botão, os novos elementos aparecerão Se eu passar o mouse sobre o botão várias vezes , os vários elementos serão criados Mas, na verdade, vamos corrigir isso em breve. Em primeiro lugar, vamos arredondar esses elementos usando um raio de borda de 50 por cento. E também temos que movê-lo para a esquerda e para cima em -50 por cento. Para isso, vamos usar Transform do que a função de tradução com os valores -60% e novamente -50% Agora temos um resultado melhor e é hora de criar uma animação. Portanto, por padrão, a largura e a altura desse elemento serão zero. E quando passarmos o mouse sobre o botão , o tamanho do relatório deve aumentar com a animação Portanto, precisamos criar quadros-chave CSS. Eu vou chamá-lo de Ripple Anime. Então, teremos duas etapas. A zero por cento, a largura e a altura dos elementos serão zero. Isso é o que é 100%. Eu vou fazê-los 100%. Tudo bem, então os quadros-chave estão prontos. Agora, como aplicar esses estilos? Portanto, para os elementos que usam uma propriedade de animação, precisamos especificar aqui o nome dos quadros-chave, Ripple Anime, e também a duração, que será de 0,5 s. Agora, se eu passar o mouse sobre o botão, o elemento aparecerá Mas, como você pode ver, temos aqui alguns problemas. Quando o elemento aparece e seu tamanho aumenta, ele se esconde. Portanto, precisamos manter o status que temos em 100%. Para isso, precisamos usar um valor chamado forwards. Então, agora esse problema está resolvido e o elemento não tem mais altura. O próximo problema é que o tamanho do elemento não é suficiente para cobrir o botão, então temos que aumentá-lo. Vamos fazer com que, dentro da altura, ambos sejam 200%. Agora esse tamanho é duas vezes maior, mas ainda não é suficiente, porque se eu inserir o mouse e pará-lo na borda do botão, o Ripple não o cobrirá Então, vamos aumentar um pouco a pele. Vamos fazê-los 210%. Tudo bem, agora o problema está resolvido. A próxima coisa que vou cuidar é esconder as partes externas do Ripple Para isso, podemos usar simplesmente overflow hidden. Tudo bem, agora temos resultados muito melhores. A próxima coisa que eu quero fazer é me livrar do Ripple, quer que o mouse saia do botão Temos que usar um dos eventos chamado Mouse leaf. Então, vamos conectar o ouvinte de eventos BTM principal eventos ao vivo do mouse e com uma função de retorno de chamada Para nos livrarmos dos elementos, precisamos usar um dos métodos chamados remove child. E temos que especificar aqui o nome multivariável. Tudo bem, agora tudo funciona perfeitamente. A última coisa que vou fazer é girar o conteúdo do botão ao passar o mouse E também precisamos mudar a cor da borda. Então, vamos selecionar o BTN principal com o mouse, seguido pelo conteúdo do Então, vou girar os elementos em 60 graus. Precisamos transformar, girar de seis a oito graus. E também vou mudar a cor da borda que está atribuída a ela, ponto a ponto E como cor, vou usar 90 II. Além disso, precisamos de uma transição para um efeito suave. E, na verdade, temos que usá-lo duas vezes. Quero dizer, precisamos usá-lo por padrão para os elementos e também ao passar o mouse Portanto, por padrão, precisamos da transição Transform 0.2 s do que uma borda com a mesma duração. Quanto à transição ao passar o mouse, precisamos dos mesmos valores, mas Transform terá um pequeno atraso, 0,5 s. Ok, então, finalmente, terminamos O botão funciona perfeitamente. Tem alguns efeitos e animações interessantes. Eu acho o que é interessante e diferente, e espero que você tenha gostado. Agora temos que seguir em frente e cuidar da próxima seção. 10. Criar e projetar sobre mim seção: Tudo bem, terminamos de trabalhar na primeira seção da palestra anterior, e agora é hora de cuidar da próxima seção, que será sobre mim Esta seção consiste em um título e alguns textos com efeitos de animação interessantes. Por padrão, o imposto não é totalmente visível porque está mesclado com um fundo escuro E quando passarmos o mouse sobre ele, ele mudará de cor E também as palestras começarão a se animar. Além disso, teremos aqui o botão, que é semelhante ao botão que criamos na última aula Então isso é tudo sobre a segunda seção. Vamos começar a criar uma marcação HTML. Vamos inserir novos comentários para a seção dois. Em seguida, abra a tag da seção com a seção dois da classe. Então, no geral, teremos três elementos diferentes. O primeiro será o título desta seção. Então, vou inserir seus comentários, título da seção dois. Em seguida, final do título da seção dois. Em seguida, vamos abrir a tag de cabeçalho H1 com a classe, título da seção dois com o conteúdo sobre mim. Tudo bem, a seguir teremos um parágrafo para o texto. Vamos inserir novos comentários sobre meus textos e sobre textos sobre mim. E então abra a tag P com o texto da classe sobre mim. Na verdade, vou deixar esse elemento como meu típico. Vamos inserir aqui o texto usando JavaScript. Tudo bem, vamos ver sobre a marcação HTML da segunda seção, adicionaremos aqui o botão principal que listei um pouco mais tarde Então, no momento, o título não está visível porque está colocado atrás do fundo. Vamos corrigir isso em breve. Vamos começar a personalizar essa seção. Vou inserir novos comentários no arquivo CSS, seção dois e seção dois. Em seguida, selecione um elemento de seção e defina sua posição como relativa. Agora, se eu selecionar todos os elementos , veremos o título sobre mim. Vamos criar algum espaço dentro dessa seção. Eu vou fazer isso usando preenchimento. Vamos configurá-lo para dez RAM na parte superior, depois dez RAM no lado direito, 15 RAM na parte inferior e dez rem no lado esquerdo. Ok. Então, agora eu vou cuidar dos textos. Acho que seria melhor se os comentários saíssem por algum tempo Então, como eu disse, criaremos textos usando JavaScript. Mas primeiro vamos selecionar o parágrafo que envolverá o texto. Vou inserir seus novos comentários sobre mim texto de, sobre mim. Em seguida, crie uma nova variável, vou chamá-la de texto Sobre mim e selecionar o parágrafo usando o método seletor de consulta Vamos especificar aqui o nome da classe sobre mutex. Tudo bem, depois disso, vou criar uma nova variável que armazenará o texto do parágrafo Vou chamar essa variável sobre mim de conteúdo de texto. O texto em si será o seguinte. Sou designer e crio sites premiados. A melhor experiência do usuário. E eu não falei muito, basta entrar em contato comigo. Então, vamos transformar esse valor de string em uma matriz. Cada caractere, incluindo os espaços em branco, serão os itens separados de uma matriz Em seguida, criaremos elementos de extensão para cada item. E armazenaremos esses caracteres em elementos de extensão. Para transformar esse valor de string em uma matriz, vou usar o método array dot from. Precisamos passar aqui o nome da variável. Vamos ver no console como é. Vou inspecionar a página e mudar para a guia do console Como você pode ver aqui, temos uma matriz na qual você pode encontrar todos os caracteres e espaços em branco como itens separados Então, agora precisamos armazenar cada caractere nos elementos de extensão. Para isso, precisamos percorrer a matriz, criar elementos de extensão e atribuir a eles cada caractere. Então, para percorrer a matriz, vou usar um dos métodos auxiliares de matriz chamados para cada um, que terá um parâmetro, será a função de retorno de chamada, que por si só aceitará um E será o item atual da matriz durante o loop. Então, agora temos que criar elementos de extensão. E para isso eu vou usar o método create our. Vamos criar uma nova variável e chamá-la de span. E, em seguida, use o método de criação de elemento. Temos que especificar o nome da tag dentro dos parênteses Então, os elementos de extensão são criados e agora temos que atribuir a eles itens de matriz como o conteúdo do texto Portanto, precisamos abranger o conteúdo do texto em pontos e ele deve ser igual ao caractere. Finalmente, temos que acrescentar esses elementos ao parágrafo Precisamos de algo sobre mim, texto, ponto e filho. Temos que especificar aqui as variáveis pan. Tudo bem, como você pode ver, o parágrafo é exibido na página Agora temos que estilizá-lo. Primeiro. Vamos selecionar um parágrafo. Insira novos comentários sobre o mutex e desative sobre o novo texto Em seguida, selecione o parágrafo. Vou diminuir sua largura. Vamos fazer com que sejam oito por cento. Em seguida, coloque o parágrafo no centro usando margem ou linha. Depois disso, vou selecionar esse elemento de extensão. Então, primeiro de tudo, vamos mudar a família de fontes. Nesse caso, vou usar telefones chamados Poppins san-serif para aumentar o tamanho da fonte, tornando-a 15 Poppins san-serif para aumentar o tamanho da fonte, tornando-a 15 RAM. Então, vou deixar a fonte em negrito usando o peso da fonte em negrito e depois mudar Faça-o um k. Ok , a seguir, vou adicionar mais alguns estilos. Vamos aumentar um pouco o espaçamento, torná-lo 0,5. Rem. Também diminua a altura da linha, torne-a 0,9 e use sombra de texto com valores de 0,01 RAM E como cor, vou usar 90 E 0 E. Ok? Então, o texto parece bom. Em seguida, vou definir sua posição como relativa porque precisamos mudar sua posição durante a animação. A última coisa que eu quero fazer é misturar o parágrafo com um plano de fundo. Para isso, vou usar a propriedade CSS chamada modo de mistura. E eu vou configurá-lo para colorir dodge. Tudo bem, então o texto está estilizado. E agora podemos criar a animação. Durante a animação, mudaremos a cor das letras e também mudaremos ligeiramente a posição. Vamos criar quadros-chave CSS. Vou chamar isso de textos sobre mim, anime. Então, a zero por cento, vou definir a cor como AAA, que é a padrão E também vou definir a posição superior. Vamos defini-lo como zero. Então, de 10% para 90%, vou mudar a cor e a posição superior. Vamos definir a cor para branco. Quanto à posição superior , será bater. Quanto aos cem por cento, precisamos dos mesmos estilos que usamos em 0%. Tudo bem, então os quadros-chave estão prontos e temos que aplicar os estilos ao texto assim que passarmos o mouse sobre os elementos desse painel, vou fazer isso usando JavaScript Precisamos anexar um ouvinte de eventos a esse elemento span com o mouse enter event Portanto, precisamos adicionar o método de ouvinte de eventos. E temos que passar aqui o evento de entrada do mouse e também a função de retorno Em seguida, vou passar aqui um objeto de evento. E então temos que definir a animação para o alvo do objeto do evento. Portanto, precisamos focar em não estilizar a animação. Então temos que especificar aqui o nome dos quadros-chave, que é sobre meu texto E no próximo valor será a duração de 10 s. Além disso, precisamos executar a animação infinitamente Então, se eu passar o mouse sobre o texto , obteremos um bom efeito de animação Tudo bem, então, na verdade, com os textos Sobre mim, terminamos. E agora temos que cuidar desse título de seção. E também devemos adicionar a esta seção o botão de permanência. Primeiro, vamos personalizar o cabeçalho. No momento, ele está oculto, então vamos eliminar o comentário Em seguida, insira novos comentários no arquivo CSS, título da seção dois. E do título da seção dois. Em seguida, selecione os elementos do título. Vou definir o tamanho da fonte para execução. Em seguida, torne-o um pouco mais claro usando o peso de fonte 300, altere também a cor, torne-o branco e transforme o texto em Depois disso, vou cuidar de sua posição. Vamos defini-lo como absoluto. Vou centralizar os elementos verticalmente. Então, vou ficar no top 250 por cento. Na posição à esquerda, estará tan RAM. E então, para centralizar o elemento perfeitamente ao transformar, traduza y com o valor -50% Ok, então, em seguida, vou colocar o título na vertical. Para isso, precisamos ser zero. E também temos que usar uma dessas propriedades CSS chamada quebra de palavra com o valor break off. E por último, vou aumentar a altura da linha. Vamos configurá-lo para quatro. Tudo bem, então isso é tudo sobre o título. A última coisa que vou fazer nesta palestra é inserir o botão principal na segunda seção Vou pegá-lo da primeira seção e colá-lo aqui. Também altere o conteúdo que precisamos aqui. Vamos conversar. Ok, então aqui temos um botão, mas temos alguns problemas. Na verdade, ele não está centrado. Além disso, se eu passar o mouse sobre ele, não teremos nenhum efeito cascata Primeiro, vamos cuidar de sua posição. Vou instituir novos comentários. Botão principal da seção dois. E do botão principal da seção dois. Para aplicar os estilos somente a esse botão específico. Quero dizer, se quisermos substituir os estilos padrão pelos novos, precisamos selecioná-los com a combinação de seus elementos principais Portanto, precisamos fazer a seção dois, seguida pelo botão principal. Vou definir sua posição esquerda para 50 por cento. Então eu vou mudar a posição inferior. Vamos fazer com que seja menos cinco RAM. E então, para centralizar o elemento horizontalmente, precisamos transformar, traduzir x Então, o botão está centralizado e agora temos que cuidar do efeito cascata Antes de fazermos isso, vou pegar os estilos do Batson principal e colá-los nos estilos comuns Porque ao longo deste projeto, teremos alguns desses botões. Finalmente, precisamos corrigir o problema do efeito cascata. Vai ser bem simples. Precisamos selecionar todos os botões. Então, vamos mudar o nome da variável. Vou chamá-lo de main btn. E selecione-os usando o método querySelector all. Como você sabe, esse método retorna uma lista de nós. Então, tivemos que dar uma olhada nessa lista. Precisamos do BTS principal com forragem. Vamos passar aqui o btn. Então temos que pegar todo esse código e inseri-lo aqui. E temos que mudar o btn principal e o btn em todos os lugares. Tudo bem, então agora tudo vai perfeitamente. Temos aqui um efeito cascata. E, finalmente, com a segunda seção, terminamos. Vamos passar para o próximo. 11. Criar e personalizar a seção de projetos - parte 1: Tudo bem, então, quando terminarmos a segunda seção na qual criamos um texto animado Agora é hora de seguir em frente e começar a trabalhar em uma das seções mais interessantes e importantes, que é o meu trabalho. Portanto, esta seção incluirá os projetos do designer. Na verdade, esses projetos são partes do nosso curso anterior, em que criamos dez sites responsivos bem grandes do zero, para que você possa conferir Nesse caso, usamos aqui as imagens dos projetos. No momento, apenas seis projetos são exibidos. Mas abaixo temos um botão Mostrar mais. Se eu clicar nele, o resto dos projetos aparecerão com um efeito de desvanecimento O botão agora está sendo exibido, mostre menos. E se eu clicar nele , receberemos de volta apenas seis projetos. Novamente. Se eu passar o mouse sobre o projeto, ele rolará bem para cima Além disso, se eu clicar no projeto, ele se expandirá. E você poderá ver todo o projeto. Na verdade, essas são imagens semelhantes, mas com tamanhos diferentes. Essas imagens grandes são criadas rapidamente quando clicamos no projeto. Na verdade, o Delos não é para sobrecarregar a página da web Esta seção tem muitos recursos e efeitos interessantes, então vamos começar a criá-la. Primeiro de tudo, como sempre, vou começar com a marcação HTML Vamos criar novos comentários no arquivo HTML para a Seção três. Em seguida, abra a tag da seção com a seção três da classe. Então, no geral, teremos três partes diferentes. O primeiro será o título. Vamos inserir novos comentários. Título da seção três. E do título da Seção três. Em seguida, abra a tag de cabeçalho H1 com o título da seção três da classe E como conteúdo, vamos instituir meu trabalho. Tudo bem, a seguir teremos projetos. Então, precisamos aqui de novos comentários. Projetos e de projetos. Vamos abrir a tag div com uma classe. Projetos. Será o invólucro do projeto. No geral, terá dez projetos diferentes, quero dizer, dez imagens diferentes. E cada um deles será encapsulado por um elemento div. Então, vamos prosseguir e abri-lo com o projeto da turma. E então insira aqui uma imagem. Quando você especifica aqui o caminho do arquivo. Deixe-me selecionar Project one JPG. Ok, vamos duplicar esse projeto nove vezes e depois mudar rapidamente os nomes das imagens Precisamos usar os números de 2 a 10. Tudo bem, então isso é tudo sobre as imagens. Além disso, teremos o botão principal nesta seção, mas cuidaremos disso um pouco mais tarde. Isso é tudo sobre a marcação HTML. No momento, as imagens não estão visíveis porque estão colocadas atrás do fundo. Então, vamos continuar e personalizar essa seção. Vou inserir novos comentários para a Seção três. Em seguida, selecione o elemento de corte e defina sua largura e altura. Vou definir os dois em 100%. Em seguida, vou criar algum espaço dentro da seção usando o preenchimento Precisamos de 20 RAM na parte superior do que zero no lado direito, birra na parte inferior e zero no lado esquerdo E também defina a posição como relativa. Ok, agora vemos aqui as imagens e o título. Na verdade, como na seção anterior. Vou cuidar do título um pouco mais tarde. Então, vamos comentar e começar a trabalhar nos projetos. Precisamos de novos comentários para os projetos. Em seguida, selecione um elemento div. Então, primeiro de tudo, vou alinhar os projetos E para isso, vamos usar o Flexbox. Como você sabe, definimos um centro de classe para o layout flexível Então, vamos atribuí-lo ao elemento div no arquivo HTML Em seguida, vou colocar os projetos em linhas diferentes. Para isso, temos que usar o flex wrap com o valor rab. Além disso, vamos criar algum espaço na parte inferior dos projetos usando o preenchimento inferior com o valor 15 executado Tudo bem, vamos ver do wrapper. Agora mesmo. Essas imagens parecem meio feias. Eles têm tamanhos diferentes. Então, vamos em frente e personalizá-los. Vou selecionar o projeto em si. Antes de tudo, vamos definir a largura e a altura. Vou definir a largura para quatro na rampa. Quanto à altura, será de 45 metros. Depois de definirmos a largura e a altura das imagens , elas se cobriram. Para ocultar as partes externas das imagens, precisamos usar. Transborde, oculte e também crie algum espaço ao redor das imagens usando margem, o valor cinco executado Certo. Depois disso. Vou mudar a cor de fundo dos projetos. Quer dizer, eu quero criar um espaço preto ao redor das imagens. Então, vamos mudar a cor de fundo, torná-la preta. Em seguida, vou selecionar a imagem e diminuir sua largura. Vamos fazer com que seja 90%. E também, para manter a qualidade da imagem. Quero dizer, para evitar encolhê-lo, vou usar uma cobertura de alimentação de objetos Então temos aqui o fundo preto, mas como você pode ver, temos que centralizar as imagens. E para isso vamos usar o flexbox. Precisamos de display flex. E então, para centralizar, vou usar o justify-content Tudo bem, por enquanto, temos um espaço preto nos lados esquerdo e direito das imagens E também precisamos exibi-lo na parte superior das imagens. Para isso, vou mover as imagens um pouco para baixo. Então, vamos definir a posição como absoluta. Em seguida, precisamos da posição relativa ao elemento pai, que é o projeto. E depois disso, vou mudar a primeira posição. Vamos fazer com que corra. Tudo bem, agora temos espaço em preto em três lados. Em seguida, vou criar uma borda em torno dos projetos. Vamos atribuir a ele um ponto para executar pontilhado. E como cor, vamos usar 90 E 0 E. Além disso, vou fazer a borda levemente arredondada. Vamos usar o raio da borda. Desvalorizamos 0,5 g. E, finalmente, vamos mudar o título, o ponteiro do cursor Tudo bem, então é isso. Os projetos são personalizados e eu vou criar um efeito de foco Vamos dar uma olhada no projeto finalizado. Se passarmos o mouse sobre os projetos e não sobre as imagens, rolaremos bem para cima Além disso, você notará que as imagens estão inclinadas em direções diferentes Quero dizer, as imagens ímpares e pares. Para isso, usaremos quadros-chave CSS. Tudo bem, primeiro vou conseguir rolar a imagem para cima ao passar o mouse E depois disso, cuidaremos dessa parte da fila. Vou criar um efeito de foco usando JavaScript. Então, quando o mouse entra no projeto, devemos definir a posição superior da imagem. E precisamos disso para todos os projetos. Então, primeiro de tudo, temos que selecioná-los. Vamos inserir novos comentários no arquivo JavaScript. Precisamos de projetos. E projetos. Em seguida, crie uma variável e chame-a de projetos. Então, vou selecioná-los usando o método seletor de consulta all Vamos especificar aqui o nome da classe do projeto. Ok, então os projetos estão selecionados. Em seguida, temos que examiná-los e anexar cada ouvinte de eventos do projeto com o mouse enter event Portanto, precisamos que cada método que usa um parâmetro seja a função de retorno A função de retorno de chamada em si usa um parâmetro, que é o item atual durante o loop Então, como eu disse, temos que anexar um ouvinte de eventos a cada projeto Portanto, precisamos usar o método add event listener com o mouse para inserir eventos E com a função de retorno de chamada que será executada assim que passarmos o mouse sobre o projeto Ok, agora, como eu disse, temos que mudar a posição das imagens. Primeiro de tudo, temos que acessá-los. Para isso. Vou usar uma das propriedades da cúpula chamada primeiro elemento filho Então, precisamos de pontos do projeto. Criança do primeiro elemento. Agora temos acesso aos elementos da imagem e depois temos que definir a posição superior. Então, precisamos estilizar a parte superior. Portanto, todas as imagens têm alturas diferentes. E precisamos descobrir o quanto precisamos rolar cada imagem para cima Temos que subtrair a altura do projeto da altura da Por isso, temos que rolar a imagem para cima. O valor das duas posições será negativo. Então, agora precisamos definir a altura da imagem. Portanto, precisamos aqui do ponto do projeto, do primeiro elemento, os pontos secundários compensam a altura E precisamos subtrair a altura do projeto. Portanto, precisamos de projetos com deslocamento de pontos de altura. E então precisamos de suas peças. Tudo bem, então a última coisa que vou fazer agora é tornar o efeito de rolagem Portanto, precisamos fazer a transição com o top. E a duração é de 4 s. Então, como você pode ver, as imagens estão rolando para cima com mais suavidade Mas temos aqui alguns problemas. Depois que o mouse viveu o projeto, precisamos rolar a imagem para baixo volta à sua posição padrão E também precisamos do espaço preto na parte inferior que podemos simplesmente adicionar aqui, 20. Quanto à folha do mouse, precisamos anexar um novo ouvinte de eventos ao projeto Portanto, precisamos do método addEventListener com eventos ao vivo do mouse e também com eventos ao vivo do mouse e também Então, neste caso, temos que definir a posição a ser executada. Portanto, precisamos de ponto do projeto, primeiro elemento, estilo de ponto filho, ponto superior igual a, para ser executado. Ok, agora tudo funciona perfeitamente e podemos seguir em frente e cuidar desse efeito de sinalização Para isso, precisamos criar quadros-chave CSS. Primeiro, vou criá-los para as imagens antigas. Portanto, durante a animação, precisamos girar as imagens algumas vezes, horizontal e verticalmente. Vamos chamar os quadros-chave de Alt, IMG, anime. Portanto, a zero por cento, não precisamos girar os elementos Então, precisamos transformar, girar y zero. Então, na próxima etapa, a 25%, vou girar os elementos de acordo com o eixo y em menos dois graus E também precisamos girar os elementos de acordo com o eixo X em dois graus. Em seguida, adicione 30%. Vou copiar essa linha de código e colá-la aqui. Precisamos que o valor da rotação y seja de dois graus. Quanto à função girar x, precisamos aqui menos dois graus Quanto aos 100%, não precisamos girar o elemento Os quadros-chave estão prontos. Em seguida, precisamos selecionar todas as imagens. Portanto, precisamos de um projeto seguido pelo seletor de enésimo filho E temos que especificar aqui que precisamos passar o mouse seguido pela imagem Portanto, para aplicar os quadros-chave CSS, precisamos usar animação Precisamos aqui do nome dos quadros-chave, IMG, anim, seguido pela duração de 4 s. E também vou usar aqui um pequeno tempo de atraso, 0,2 s. Então, agora, se eu passar o mouse sobre a primeira imagem, nada de especial acontecerá Não vemos aqui um efeito de distorção. Isso acontece porque temos que criar um ambiente 3D para os elementos e, para isso, temos que usar uma das propriedades CSS chamada perspectiva. Vamos configurá-lo para 20 rampas. Agora, se eu passar o mouse sobre a imagem, ela ficará bem inclinada no espaço 3D Tudo bem, vamos continuar e fazer o mesmo com as imagens pares Podemos duplicar esse código inteiro. Vamos transformar tudo em asfaltar uniformemente os quadros-chave. Só precisamos mudar os locais das propriedades de transformação em etapas de 25,50 por cento Agora é possível ver que tudo funciona bem. Em seguida, adicionarei um pequeno tempo de atraso antes que a imagem role para cima Vamos fazer 0,2 s. Tudo bem, então antes de terminarmos esta palestra, vou fazer mais uma coisa Vou diminuir a opacidade cada imagem por padrão Vamos fazer 0,5 e depois aumentá-lo ao passar o mouse. Precisamos de opacidade um. E também adicione aqui a transição. Tudo bem, é isso agora. Em seguida, vamos criar um evento de clique e expandir as imagens. Então, vamos seguir em frente. 12. Criar e personalizar a seção de projetos - parte 2: Tudo bem, então na aula anterior nós o criamos e personalizamos os projetos Quero dizer, alinhamos as imagens e também criamos um efeito de foco. A próxima coisa que faremos é expandir o projeto assim que clicarmos nele, como se estivesse na versão final do projeto. Antes de fazermos isso, vou corrigir um pequeno problema que temos na seção anterior. Se eu passar o mouse sobre o botão pela parte inferior , nada acontecerá O motivo é que a seção do projeto cobre parcialmente o botão. Então, dois picos que vou diminuir a parte superior do preenchimento desta seção Vamos fazer com que sejam dez RAM. E também vou adicionar aqui a margem superior com o valor que Tan correu. Agora, como você pode ver, o problema está resolvido. Tudo bem, vamos voltar para a seção do projeto. Então, quando clicamos no projeto, temos que criar novos elementos. Quero dizer, essa grande imagem. Por padrão, ele não existe. Ele é criado apenas com o OnClick. Portanto, isso nos ajuda a não sobrecarregar a página da web porque essas imagens são realmente grandes A primeira coisa que vou fazer é anexar ouvinte do evento ao projeto com o evento de clique Primeiro, vamos inserir seus novos comentários. Imagem de grandes projetos. E eu vou escolher a imagem do projeto. Em seguida, anexe o ouvinte de eventos ao projeto. Clicaremos em eventos e ampliaremos uma função de retorno de chamada. Então, como dissemos, temos que criar um novo elemento OnClick Mas antes de criarmos a imagem, primeiro precisamos criar um invólucro da imagem Estou no fundo escuro que aparece à primeira vista. Para criar o elemento, vou usar o método create. Vamos criar uma nova variável. Vou chamá-lo de grande invólucro IMG. Em seguida, crie os elementos usando o método create element. Quando você deve especificar aqui o nome da tag, o elemento é criado. Em seguida, vou atribuir a ela um nome de classe. Na verdade, podemos fazer isso de duas maneiras diferentes. Nesse caso, vou usar a propriedade chamada className Portanto, precisamos de um grande nome de classe do ING, rapper dot. E o valor será o rapper do projeto IMG. Certo? Agora temos que adicionar um novo elemento ao contêiner. Primeiro, vamos selecionar o contêiner em si. Vou criar uma nova variável. Em seguida, selecione o contêiner usando o método querySelector. Quando você apenas especifica aqui o contêiner do nome da classe. Depois das dívidas. Para anexar o invólucro de imagem ao contêiner, precisamos usar um dos métodos chamados append A criança terá que especificar aqui um grande IMG, Robert. Tudo bem, vamos ver o invólucro. Para ver se o elemento está sendo criado ao clicar. Vamos inspecionar a página e ver a guia Elementos. Depois de clicar no projeto , os elementos serão criados. Ok, antes de criarmos a imagem em si, primeiro vou estilizar o invólucro Vamos instituir novos comentários, uma grande imagem de projeto. E de grande imagem de projeto. Em seguida, selecione o invólucro. A posição do invólucro será fixada. Além disso, vou definir as propriedades superior e esquerda. Vamos definir os dois como zero. Em seguida, vou expandir os elementos de toda a janela de exibição. E também vou mudar a cor de fundo. Vamos definir a largura e a altura, ambas em 100%. Quanto à cor de fundo, vou usar o valor RGBA Vamos inserir sua cor preta com a opacidade 0,9. Tudo bem, agora se eu clicar no projeto, o invólucro será exibido Como você sabe, o invólucro deve ser exibido de cima com uma pequena animação Então, vou criar os quadros-chave CSS. Antes disso, vamos diminuir a altura da embalagem, torná-la zero Em seguida, crie quadros-chave CSS. Vou chamá-lo de anime IMG Wrapper. Portanto, no geral, teremos duas etapas diferentes. Em 0%, a altura será zero. Quanto aos 100%, vou aumentar a altura para 100%. Em seguida, vou usar a propriedade de animação. Temos que especificar aqui o nome dos quadros-chave do anime IMG wrapper Então, o próximo valor será a duração de um segundo. Além disso, vou manter a altura cem por cento quando a animação terminar. Então, precisamos seguir em frente Então, se eu clicar no projeto, o invólucro aparecerá bem na parte superior Tudo bem, isso é sobre o rapper de imagem agora. Em seguida, vou tirar aqui a imagem em si, como o invólucro, temos que criar esse elemento Então, vou criar uma nova variável. Vamos chamá-lo de grande IMG. E depois crie elementos. Vamos especificar aqui o nome da tag IMG. Então, o elemento é criado. Em seguida, vou atribuir a ele um nome de classe para os estilos CSS Portanto, precisamos de um grande nome de classe de pontos IMG. E o valor será um projeto. Eu estou certo. Agora, para testar se a imagem é exibida com um clique, vou definir seu nome no atributo fonte e dar a ela o nome de qualquer uma das imagens. Para definir o atributo dos elementos, precisamos usar um dos métodos chamados atributos de conjunto. São necessários dois argumentos. O primeiro é o nome do atributo. Nesse caso, precisamos da fonte SRC. Na medida em que o segundo argumento será parte da imagem. Portanto, precisamos de imagens além da pasta Projetos e da imagem com o nome projeto, um grande ponto JPG. Por fim, temos que anexar uma imagem ao invólucro usando o método append Agora, se eu clicar no projeto , a imagem grande será exibida. No momento, se eu clicar em qualquer um dos projetos, a mesma imagem será exibida. Quero dizer, o primeiro. Como definimos a parte da imagem com a primeira imagem, não precisamos disso. Temos que exibir uma imagem semelhante para cada projeto. Para fazer isso, precisamos acessar o caminho da imagem que é clicada Vamos continuar e criar uma nova variável. Vou chamá-lo de caminho IMG. Para ter acesso ao atributo de origem primeiro, precisamos acessar o próprio elemento da imagem. Então, precisamos do projeto dot, primeiro elemento filho. Em seguida, precisamos obter esse atributo de origem usando o método get attribute. Temos que especificar aqui o nome do atributo como RC. Vamos ver no console o que essa variável nos fornece. Se eu clicar no projeto , obteremos o caminho da imagem no console. Se clicarmos em qualquer outro projeto , obteremos o caminho correto da imagem. Tudo bem, então, a partir desse caminho, precisamos de tudo o que é colocado no lado esquerdo dos pontos Porque imagens grandes têm um caminho semelhante, mas os nomes reais das imagens são diferentes. Eles têm muito depois dos números. Então, para pegar a primeira parte do caminho, vou usar um dos métodos auxiliares de matriz chamado split Precisamos dividir o caminho em pontos. Agora, se eu clicar no projeto, obteremos uma matriz com dois itens diferentes. O primeiro é o caminho sem extensão da imagem. Quanto à segunda, está a extinção do JPG. Para selecionar o primeiro item, precisamos definir o número do índice como zero. Agora, se eu clicar no projeto , obteremos a primeira matriz, certo? Certo. Agora temos que usar este item e adicionar ao nome da imagem, big dot JPG. Para fazer isso, temos que mudar esse caminho e torná-lo dinâmico. Vamos abrir os crases e inserir aqui o caminho da imagem variável e, em seguida, adicionar a ele um traço, ponto grande JPG Ok, então agora, se eu clicar nos projetos, obteremos as imagens adequadas, certo? Tudo estava bem e temos que estilizar as imagens. Quero dizer os grandes. Então, vamos selecioná-los. Vamos definir a largura para 100%. Além disso, vou fazer com que o Congresso goste do arredondado usando o raio da borda com o Além disso, vamos criar um preenchimento. Vou fazer com que sejam sete rem na parte superior e inferior e 20 RAM nos lados esquerdo e direito. E também diminua ligeiramente a opacidade, torne-a 0,9. Tudo bem, então as imagens parecem boas. Agora temos que adicionar a eles uma animação. Por padrão, vou ocultá-los e exibi-los quando clicarmos no projeto e o rapper aparecer Vamos continuar e criar quadros-chave CSS Vou chamá-los de ânion IMG. Então, no geral, teremos duas etapas. Em 0%, vou definir que a escala dos elementos é zero. Quanto aos 100%, vou fazer uma escala um. E também use animação. Precisamos aqui do nome dos quadros-chave, anime IMG, também da duração de 1 s. E precisamos do tempo de atraso, que será de 1 s. Nesse caso, precisamos criar a escala zero como o estilo padrão da E também temos que manter a escala em que a animação termine. Para fazer isso, podemos definir a escala de transformação como zero por padrão e, em seguida, usar encaminhamentos na propriedade de animação como já fizemos para o invólucro da imagem Ou podemos simplesmente usar aqui o valor chamado both, que fará o mesmo trabalho. Então, se eu clicar no projeto , a imagem aparecerá. No momento, ele aparece de baixo e eu quero exibi-lo de cima. Então, temos que mudar a origem da transformação. Precisamos do centro superior. Tudo bem, agora temos um resultado muito melhor. No momento, não podemos rolar a imagem para baixo. Rolamos a página em si, que está oculta. Para fazer isso, vou usar a propriedade overflow com os valores ocultos Role. Agora podemos rolar a imagem para baixo, mas, como você pode ver, temos duas barras de rolagem Um para a imagem e o segundo para a página. Para corrigir isso, devemos atribuir ao corpo o elemento overflow oculto usando JavaScript Portanto, precisamos do documento dot, body, dot style, dot overflow y com o valor oculto Tudo bem, agora tudo funciona perfeitamente. E a única coisa que vou fazer neste vídeo é criar o botão de fechar. Depois de expandirmos a imagem. Primeiro, vamos criar a marcação HTML para o Buxton Vou instituir novos comentários, projetando o botão Ocultar. E do botão Ocultar do projeto. Em seguida, abra a tag do botão com uma altura de projeto de classe, btn. Vou passar aqui uma das entidades HTML5. Vai ser a flecha. Precisamos aqui, l AQ, U0, ponto e vírgula, seguido pela Depois disso, vou personalizar o botão. Vamos inserir novos comentários no arquivo CSS para o botão. Em seguida, selecione-o. Antes de tudo, vou definir a posição do botão. Ele será colocado no canto superior direito. Então, vou definir a posição a ser corrigida. E então vou criar as propriedades superiores e as corretas, ambas as cinco executadas. Próximo. Vou tornar a cor de fundo transparente. Além disso, elimine a borda padrão. Então eu vou mudar a cor do texto. Vamos torná-lo branco. Em seguida, aumente o tamanho da fonte e transforme-a em Ram. Em seguida, vou criar algum espaço entre as letras. Vamos fazer com que seja 0,1 RAM e também mudar o tipo de curso para que ele funcione. Ok, então aqui temos o padrão de fechamento. Se eu clicar nos projetos, o invólucro da imagem os cobrirá Então, temos que consertar isso. E para isso, vamos usar a propriedade z-index com um valor maior que zero. Digamos dez. Tudo bem, então, por padrão, precisamos ocultar o botão e exibi-lo Depois de clicarmos no projeto. Para ocultar os elementos, vou usar o Transform. Escala com um valor de zero. Também há visibilidade oculta. Para exibir o botão novamente, assim que clicarmos no projeto, vou usar uma nova classe em CSS, na qual definiremos os novos estilos, esses estilos para exibir o botão. Então eu vou chamar a mudança de classe. E então temos que selecionar project hide, btn. Não usamos aqui o espaço entre essas duas classes porque selecionamos o mesmo elemento com dois nomes de classe diferentes. Se o elemento não tiver nenhuma dessas classes , esses estilos não serão aplicados ao elemento. Portanto, precisamos transformar a escala um e a visibilidade visível. Tudo bem, em seguida, devemos adicionar a mudança de classe ao botão onclick usando JavaScript Na medida em que precisamos selecionar um botão em si. Vamos criar uma nova variável e chamá-la de Project hide btn. Em seguida, selecione um botão usando o método querySelector. Vamos especificar aqui o nome da classe, project hide, btn. Em seguida, temos que adicionar a mudança de classe ao botão assim que clicarmos nos projetos. Portanto, precisamos aqui da altura do projeto, btn, dots, lista de classes, adição de pontos Não preciso especificar aqui o nome da mudança de classe. Além disso, devemos removê-lo ao clicar no próprio botão. Nesse caso, vou usar manipulador de eventos onclick porque no caso do ouvinte de eventos, o evento click é adicionado várias vezes e não precisamos Precisamos acionar um evento de clique apenas uma vez. Então, vou escrever aqui a altura do projeto, btn dot onclick, que deve ser igual a uma função de seta E aqui temos que remover a mudança de classe da lista de classes. Além disso, precisamos remover o invólucro da imagem grande Então eu vou escrever aqui big IMG, rapper dot, remove. E também precisamos mudar o valor do fluxo antigo. Por que a propriedade do elemento corpo volta a rolar. Portanto, precisamos de ponto, corpo, estilo de ponto, estouro de ponto, chamada de valores y. Tudo bem, então tudo funciona bem. A única coisa que vou fazer é adicionar uma pequena transição ao botão fechar. Precisamos fazer a transição somente quando o botão aparecer. Então, precisamos instituir com a mudança de classe. Vamos configurá-lo para transformar e durar 0,5 s. Tudo bem, então finalmente terminamos Tudo funciona perfeitamente. Em seguida, temos que cuidar desse botão Mostrar mais. Então, vamos seguir em frente. 13. Adicione recurso "Mostrar mais" a projetos - Parte 1: Ok, então criamos e personalizamos os projetos. Adicionamos alguns efeitos diferentes a eles, como os eventos de passar o mouse e clicar No momento, todos os dez projetos são exibidos na página e acho que não parece muito bom. Além disso, não ficará bem quando tornarmos nosso projeto responsivo a telas menores Então, vou esconder alguns dos projetos. Adicione também aqui um botão Mostrar mais. E quando o usuário clicar nele , exibiremos todos os dez projetos Em vez de mostrar mais, exibiremos, mostraremos isso. E também mudaremos a direção da seta. Na verdade, a seta nos mostra a direção da rolagem, o que acontece com Além disso, os projetos estão sendo exibidos e ocultados com alguns efeitos de desvanecimento Tudo bem, então é isso. O que vamos fazer neste vídeo. Vamos começar. A primeira coisa que vou fazer é esconder os últimos quatro projetos. E eu vou fazer isso usando JavaScript. Todos nós já temos aqui para cada método. Para percorrer os projetos. Projetos é uma lista de nós e cada projeto tem seu próprio número de índice Precisamos esconder os últimos quatro projetos. Os projetos que têm números de índice de seis a nove. Então, precisamos acessar esses projetos. Para isso temos que passar aqui outro parâmetro, que será o número do índice. Agora, precisamos usar uma declaração if na qual temos que definir se I é maior ou igual a seis. Se essa condição for verdadeira, teremos que ocultar os projetos. Portanto, precisamos aqui de texto CSS de pontos no estilo de projeto e ponto. E temos que passar aqui para as propriedades CSS. O primeiro será exibido com o valor nenhum. Quanto ao segundo, precisamos de opacidade zero. Então, como você pode ver, os últimos quatro projetos estão aqui. Na verdade, esse código, quero dizer, a instrução if funciona bem, mas podemos escrever de forma mais concisa Em vez da instrução if, podemos usar lógica e operador. Assim, podemos nos livrar da palavra-chave if também das chaves E temos que adicionar aqui um operador, que é expresso por dois comerciais Então, se o lado esquerdo for verdadeiro, podemos simplesmente adicionar um bloco de código no lado direito do operador. Então, como você pode ver, temos aqui exatamente o mesmo resultado. Agora, é hora de adicionar aqui o botão. Permanecerá o botão, que já usamos algumas vezes. Então, vamos para o arquivo index.html. Pegue o botão da seção anterior e cole-o aqui. Vou mudar o conteúdo que precisamos aqui, mostrar mais. E também vamos adicionar a isso outra classe, projetos, BTN. E também altere os comentários de que precisamos aqui, projetos. Mas, como você pode ver aqui, temos o botão no momento, ele está colocado no lado esquerdo da página. Então, precisamos centralizá-lo. Vamos inserir novos comentários no botão Projeto do arquivo CSS. E do botão de projetos. Em seguida, selecione o botão com os projetos className recém-adicionados btn Para centralizar o elemento, vou usar a posição esquerda com um valor de 50%. E então, para uma censura perfeita, precisamos transformar a tradução X com o valor -50 Como você pode ver, o botão é colocado no centro. Tudo bem, agora vou adicionar um ouvinte de eventos ao botão com o evento de clique Depois de clicar nele, temos que exibir os projetos ocultos. Antes de tudo, vamos inserir comentários. Botão Projeto e do botão Projeto e, em seguida, selecione o botão em si. Vou criar uma nova variável. Vamos chamá-lo de Projetos btn e selecionar botão usando o método seletor de consulta Precisamos aqui de projetos de classe btn. Tudo bem, em seguida, precisamos anexar a ele um ouvinte de eventos com eventos de clique e com uma função de retorno de chamada Então, a primeira coisa que vamos fazer é evitar a ação padrão. Quando clicamos no botão, quero dizer, depois de clicarmos no botão, navegaremos até a parte superior da página. Então, não precisamos disso. Vou passar aqui um objeto de evento. E então precisamos de pontos. Evite a inadimplência. Agora, como você pode ver, não navegamos mais para cima. Agora é hora de conseguir mostrar e ocultar os projetos. Para isso, primeiro, precisamos percorrer os projetos Então, vou usar para cada método uma função de retorno de chamada Vou te passar dois parâmetros diferentes. O primeiro será o projeto. Quanto ao segundo, precisamos novamente do número do índice. Quero dizer, agora precisamos ter acesso aos projetos ocultos. Como você se lembra, fizemos isso usando o número do índice. O número do índice é maior ou igual a seis, então significa que temos acesso somente aos projetos ocultos. Então, vou usar as afirmações aqui e if que definimos, se i for maior ou igual a seis. Portanto, se essa condição for verdadeira, teremos que conseguir mostrar e ocultar os projetos. Para isso, vou criar uma nova variável, que será o valor booleano Vou chamá-lo de Show, Hide, Bu. E, por padrão, vou configurá-lo como verdadeiro. Em seguida, precisamos de outra declaração if na qual devemos verificar se o valor booleano é verdadeiro ou falso Então eu vou passar aqui o nome da variável. Se for verdade, então temos que exibir os projetos. Portanto, precisamos de uma exibição de pontos no estilo ponto do projeto. Deve ser igual a flexão. Então eu vou duplicar essa linha de código. E precisamos aqui de opacidade com o valor um. Então, se for falso, temos que esconder os projetos. Portanto, precisamos da declaração else. Então eu vou pegar essas duas linhas e mudar os valores. Precisamos que a propriedade de exibição seja nenhuma. Quanto à opacidade , será zero Tudo bem, finalmente, temos que mudar o valor dessa variável show hide bull para verdadeiro, então temos que torná-la falsa e vice-versa. Portanto, precisamos que o touro Show Hide seja igual ao livro Not Show Hide. Se eu clicar no botão , os projetos ocultos serão exibidos. Na próxima semana, eles se esconderão. Tudo bem, depois disso, vou mudar o TextContent do botão Depois de exibirmos os projetos, o botão deve ter o conteúdo como mostrar menos. Além disso, primeiro temos que girar a seta. Vamos cuidar do conteúdo do texto. Em primeiro lugar, vou selecionar um elemento de extensão. Vamos criar uma nova variável. Na verdade, vou duplicar essa linha de código depois mudar o nome da variável Serão projetos btn, text. E também vou adicionar aqui a extensão. Tudo bem. Portanto, quando exibimos os projetos, devemos fazer com que o TextContent seja exibido menos Precisamos que aqui projetos btn textos, os conteúdos dos textos sejam iguais para mostrar menos Quando ocultamos os projetos, devemos mudar mostrar aula para mostrar mais. Então, vou duplicar essa linha de código. E precisamos mudar aqui menos do que amanhã. Então, se eu clicar o TextContent do buxom Tudo bem, em seguida, vou girar a seta onClick. Para isso, vou criar uma nova classe e CSS e selecionar as linhas com essa classe. Definiremos novos estilos e, em seguida, adicionaremos essa classe ao elemento pai das linhas. Estou no conteúdo do botão. Primeiro, vamos adicionar que a classe não mencionou elementos. Precisamos de projetos BTN. Em seguida, temos que acessar o primeiro elemento filho do botão. Nesse caso, será a ondulação. Portanto, precisamos do primeiro elemento filho e, em seguida, temos que ter acesso ao conteúdo que será irmão do repositório Então, vou usar aqui a propriedade chamada irmão do próximo elemento Então, agora temos que acessar o conteúdo e adicionar a ele uma mudança de classe. Nesse caso, vou usar um método chamado toggle. Isso nos permite adicionar a classe ao elemento, se ele não o tiver, e remover a classe, se ele o tiver. Portanto, precisamos alternar pontos na lista de classes. E vou especificar aqui o nome da classe como mudança. Tudo bem, vamos ver sobre o JavaScript. Agora temos que definir estilos e CSS. Precisamos selecionar linhas com a mudança de classe. Em seguida, precisamos de um dos combinadores CSS chamado seletor Child, que seleciona todos os elementos que são filhos dos E agora temos que especificar o nome da classe da linha, seguido pelo seletor enésimo filho dentro do número Tudo bem, então temos que girar a primeira linha de acordo com o eixo z Além disso, temos que movê-lo ligeiramente de acordo com o eixo x. Qual valor? -0,65 rodada. Isso é tudo sobre a primeira linha. Vou duplicar esse código duas vezes e depois fazer algumas alterações Para a segunda linha, precisamos girar Z com um valor de -45 graus Quanto ao valor da função translate x, será 0,65 rem Em seguida, vem a terceira linha. Precisamos girar Z com um valor de 90 graus. Quanto ao Translate, X terá -0,5 RAM. Além disso, temos que definir a borda esquerda de 2.1 RAM, cor sólida e branca. E também precisamos nos livrar da borda do lado direito. Ok, então se clicarmos no botão, a seta girará Tudo funciona bem. Até agora. Precisamos adicionar um efeito de desvanecimento aos projetos. Em seguida, temos que tornar nosso código um pouco mais limpo. E também temos que personalizar o título dessa ação. Para isso, vamos passar para a próxima palestra. 14. Adicione recurso "Mostrar mais" a projetos - Parte 2: Tudo bem, então na última palestra conseguimos mostrar e ocultar os projetos Depois de clicar no botão Mostrar mais, agora temos que adicionar alguns efeitos de desbotamento Além disso, uma vez que clicamos no botão, temos que rolar a página para baixo sem problemas Para criar efeitos diferentes. Temos que exibir os projetos com alguns intervalos. E, portanto, vamos usar o método setTimeout. Portanto, precisamos definir os diferentes tempos de atraso para a flexibilidade da tela e a de opacidade Em primeiro lugar, temos que atribuir ao projeto o display flex. E depois de algum tempo, temos que começar a exibir os projetos com intervalos diferentes Então, vou usar o método de tempo limite definido. Em seguida, vou inserir essa linha de código dentro da função como segundo argumento. Quero dizer a quantidade de tempo que vou passar aqui 600 milissegundos. Agora, quando eu clicar no botão , os projetos serão exibidos após um pequeno atraso. Ok, agora temos que cuidar da opacidade. Como eu já disse, precisamos de tempos de atraso diferentes para cada projeto. Vamos usar novamente o método setTimeout e colar aqui essa linha de código. Agora temos que definir o segundo argumento. Estou na hora do atraso. Para definir tempos de atraso diferentes para cada projeto, vou usar o parâmetro i. E temos que multiplicar isso por algum tempo, digamos 200 Agora, se eu clicar no botão, os projetos aparecerão em alguns intervalos. Certo? Agora não temos o efeito fade porque precisamos usar a transição Precisamos atribuí-lo aos projetos. Precisamos de opacidade e duração de 0,5 s. Então, como você pode ver, agora temos o efeito de esmaecimento. Certo? Agora, quando clico no botão, a página não rola para baixo automaticamente Temos que fazer isso manualmente. Então, vamos em frente e resolver esse problema. Vou usar um dos métodos chamados scroll into view E temos que anexá-lo aos elementos da seção. Então, primeiro de tudo, vamos selecioná-la e queremos criar uma nova variável. Vamos chamá-la de seção três. Em seguida, selecione elementos usando o método seletor de consulta. Precisamos especificar aqui a seção três do nome da classe e, em seguida, passar o seguinte no primeiro método setTimeout. Quando anexar o método scroll into view à seção três. Será necessário um argumento. Vai ser o objeto. Precisamos aqui de uma propriedade chamada bloco com um valor. E agora, quando clico no botão, na página ou rolo para baixo, mas sem nenhum fato claro Para corrigir isso, temos que atribuir aos elementos HTML uma das propriedades chamadas comportamento de rolagem com os valores Agora, como você pode ver, tudo funciona bem. Tudo bem, agora temos que fazer as mesmas coisas. Uma vez que escondemos os projetos. Temos que esconder que os projetos terão efeito de desvanecimento. E, novamente, com alguns intervalos, precisamos atribuir aos projetos a opacidade zero com intervalos diferentes até que os projetos precisamos atribuir aos projetos a opacidade zero com intervalos diferentes até que os projetos não exibam nenhuma. Portanto, precisamos usar novamente o método setTimeout. Mas agora, na declaração else, vamos inserir aqui essa linha de código. E como segundo argumento, quero dizer a quantidade de tempo. Vamos inserir 1.200 milissegundos. Além disso, precisamos ocultar os projetos usando opacidade com intervalos diferentes Então, novamente, precisamos do método setTimeout. Então, vamos colocar essa linha de código dentro da função. E como segundo argumento, vou passar aqui, multipliquei por 100 Agora, se eu clicar no botão, os projetos se ocultarão com fade vets E a única coisa que precisamos fazer é rolar até a página Portanto, precisamos, novamente, rolar para o método de visualização. Vamos pegar essa linha de código e colar você mesmo. Então, no momento, temos o mesmo resultado porque ainda não temos o conteúdo após a seção. Depois de adicionarmos o conteúdo, ele funcionará como se estivesse no projeto finalizado. Tudo bem, antes de prosseguir e personalizar o título desta seção, vou deixar esse código um pouco mais limpo Vou criar duas funções diferentes para mostrar e ocultar os projetos. Vamos criar uma nova função fora do evento de clique. Vou chamar a função show projects Serão necessários dois parâmetros. O primeiro será o projeto. Quanto ao segundo, deve ser o número do índice. Em seguida, vou pegar esses métodos setTimeout das instruções if e colá-los dentro da função E então temos que chamar essa função dentro da instrução if como argumentos. Temos que aprovar seus projetos. E vamos fazer o mesmo com as outras declarações. Vamos criar uma nova função. Eu vou chamar isso de projetos de altura. Também serão necessários dois parâmetros, projetos, e eu então pego os métodos setTimeout da instrução else, os colo dentro da função e, em seguida, chamo a função dentro da instrução else com os argumentos projects E eu posso ver que tudo funciona da mesma maneira. Mas agora temos um código um pouco mais limpo. Eu quero fazer mais algumas coisas. Em vez das instruções if, vou usar, novamente, a lógica e o operador. Vamos eliminar a palavra-chave if e as chaves. E então adicione aqui dois comerciais. Quanto à segunda afirmação “ if else”, vou usar um operador ternário. Vamos abrir parênteses e inserir a condição, quero dizer o touro Show, Hide Em seguida, precisamos de um ponto de interrogação. Portanto, se o valor booleano for verdadeiro, teremos que chamar a função show projects E se for falso, temos que chamar a função de projetos de altura. Tudo bem? Em seguida, vou cuidar do TextContent do botão Não precisamos que esse código esteja dentro de cada método porque ele executará esse código em cada iteração. Então, vou colocá-lo fora do, para cada método. Precisamos do valor booleano. Quero dizer, Show Hide bull, seguido pelo operador ternário. Portanto, se essa condição for verdadeira, precisamos que o conteúdo do texto seja exibido menos. Então, vamos pegar esse código daqui. Se for falso, precisamos mostrar mais. Então, vou pegar essa linha de código. Finalmente, vamos nos livrar das declarações de if else daqui. Tudo bem, então, novamente, tudo funciona da mesma maneira. Na verdade, notei que a seta está mudando de direção sem transição. E não parece muito bom. Então, vamos continuar e adicionar uma transição às linhas. Temos que selecionar os projetos btn, seguidos pelo PT principal na fila Vamos usar a transição com todos os valores e 0,5 s. Tudo bem, agora o problema está resolvido e a seta está girando suavemente Finalmente, temos que cuidar do título desta seção. Será semelhante ao título da seção anterior. Então, para evitar escrever o mesmo código repetidamente , vou atribuir a eles um nome de classe comum e usar o mesmo código para os dois títulos e também para os títulos que criaremos no futuro Em primeiro lugar, vou me livrar dos comentários do título. Em seguida, vamos atribuir aos dois cabeçalhos, classe e título de seção Então eu vou pegar o código e colar. Está nos estilos comuns. Também altere os comentários. Precisamos do título da seção e do nome da classe. Tudo bem, então temos aqui o título desta seção. Portanto, no futuro, apenas adicionaremos os nomes das classes aos cabeçalhos e eles serão automaticamente posicionados e estilizados Tudo bem, é isso. Finalmente, terminamos trabalhar na seção de projetos. Vamos seguir em frente. 15. Seção de criação e design de serviços: Ok, então, quando terminarmos a seção do projeto , agora é hora de seguir em frente e começar a trabalhar na próxima seção, que serão esses serviços. Vamos dar uma olhada no projeto finalizado. Então, aqui temos alguns serviços diferentes. Eles são exibidos em uma fonte grande. E se clicarmos neles , algum texto aparecerá com alguns bons efeitos de desvanecimento Além disso, os serviços se moverão para o lado esquerdo sem problemas. É isso que vamos criar nesta seção. Vou começar com a marcação HTML. Vamos inserir novos comentários no arquivo HTML da Seção quatro. Essa tag de seção aberta com a seção de classe para. Esta seção consistirá em duas partes principais. Teremos um título de seção e depois os serviços. Vamos inserir novos comentários para o título da seção. Em seguida, vou abrir a tag de cabeçalho H1 com um título de seção de classe E com o conteúdo. O que eu posso. Tudo bem, a seguir teremos os serviços. Vamos criar novamente novos comentários, serviços e serviços. Em seguida, abra a tag de presente, que será o invólucro dos serviços que vou atribuir a cada wrapper dos serviços que vou atribuir a de serviços de cluster Portanto, no geral, teremos seis serviços diferentes. Vamos abrir a tag div, que será o próprio serviço. Cada serviço consistirá em dois elementos diferentes. A primeira será a tag de link com um serviço de classe, btn. Em seguida, vou inserir seu elemento de extensão. Vai ser o chefe do serviço. Vamos inserir sua UX da interface do usuário. Quanto ao segundo elemento dentro do serviço , será o texto. Vamos abrir a tag P com um texto de serviço de classe. Na verdade, eu preparo as etiquetas de serviço para cada serviço, então vou copiar a primeira deste documento de texto. Ele será anexado ao arquivo de origem para que você possa baixá-lo e usá-lo. Então, como eu disse, teremos seis serviços diferentes. Então, vou duplicar esse código cinco vezes e depois mudar o conteúdo O segundo serviço será a ilustração de ícones. Então teremos a marca. O próximo será o desenvolvimento. Além disso, teremos movimento e depois fotografia. Tudo bem, então isso é tudo sobre a marcação HTML. No momento, o conteúdo não está visível, ele acabou em segundo plano. Vamos começar a personalizar essa seção. Vou inserir novos comentários na seção de arquivos CSS no final da seção quatro. Em seguida, selecione o elemento da seção e defina sua posição. Vou fazer disso um parente. E também vou definir com 200 por cento. Então, como você pode ver agora o conteúdo desta seção é possível. Temos aqui um título que já está posicionado e estilizado. E você também pode ver aqui o serviço. Tudo bem, vamos ver sobre esse elemento da seção, certo? Agora. Vamos seguir em frente e personalizar o encapsulamento dos serviços Vamos inserir novos comentários, serviços e serviços. Vou definir a largura do invólucro para 100%. Em seguida, temos que alinhar esses serviços usando o flexbox. Vou trabalhar no centro de aulas de embalagem. Ele inclui alguns estilos do Flexbox. Além disso, vou adicionar à coluna de direção flexível do invólucro Portanto, considera-se que os serviços estão colocados no centro desta seção. Tudo bem, depois disso, vou personalizar o serviço em si. Então, vamos selecioná-lo. Em primeiro lugar, vou definir a largura. Vamos defini-lo para 70%. Além disso, vou criar algum espaço na parte superior e inferior dos elementos, digamos margem para, para RAM e zero. Em seguida, crie uma borda na parte inferior. Precisamos aqui de 0,5 rem sólido. E como cor, vou usar 90 E 0 Tudo bem, a seguir vou definir a largura da parte inferior de serviço Vamos selecionar o serviço btn e definir sua largura como 200 presente. Depois disso, vamos personalizar os elementos de extensão. Em primeiro lugar, vou mudar a família de fontes. Nesse caso, vou usar um telefone chamado Poppins, Em seguida, aumente o tamanho da fonte, faça com que seja dez RAM. Além disso, vou mudar o estilo da fonte. Vai ser em itálico, então precisamos que a espessura da fonte fique em negrito E, finalmente, mude a cor. Vamos usar novamente. Tudo bem, como você pode ver, os cabeçalhos dos serviços são personalizados Por padrão. Temos que colocá-los no lado direito. Vamos fazer isso usando posições. Vou definir a posição como absoluta. Em seguida, precisamos posicionar em relação ao elemento pai porque vamos posicionar os elementos de extensão de acordo com os pais. Agora, como você pode ver, o layout está meio confuso. Para corrigir isso, precisamos definir a propriedade de exibição das peças de serviço em bloco. Porque, por padrão, o elemento de link está alinhado. E também precisamos definir a altura. Vamos fazer com que seja uma rampa 15. Tudo bem, agora considera-se que o problema está resolvido e podemos mover esses serviços para o lado direito Então, vamos definir diretamente para zero. Certo? Isso é tudo sobre o elemento link. Vamos seguir em frente e personalizar o texto. Vamos selecionar o serviço tributado. Vou aumentar o tamanho da fonte. Vamos fazer com que sejam cinco rem. Também mude a cor. Faça com que seja 777. Em seguida, vou criar algum espaço entre as letras. Faça com que seja 0,1 quarto. E por último, mude a altura. 15 correram. Tudo bem, então é isso. Tudo está personalizado e pronto para adicionar alguns efeitos a esta seção. Então, por padrão, vamos ocultar o texto do serviço. Para isso, vamos fazer com que a altura dos textos seja zero. Além disso, vou usar visibilidade oculta e opacidade zero. Tudo bem, então o texto está oculto e agora temos que exibi-lo assim que clicarmos no botão de serviço Então, vou criar uma nova classe e CSS com novos estilos. E então adicionaremos esses clusters, o parágrafo onclick usando JavaScript. Vamos ao arquivo script.js e inserir novos comentários para a Seção quatro. Então, primeiro de tudo, temos que selecionar um elemento de link. Então, devemos examiná-los e , em tal evento, ouvir cada um deles. Então, vou selecionar elementos de link usando o seletor de consulta, todo o método Temos que especificar aqui o nome da classe service btn, que precisamos para cada método com uma função de retorno de chamada como parâmetro, vou inserir seu E então temos que conectar um ouvinte de eventos ao serviço com um evento de clique e com uma função de retorno de chamada Tudo bem, então, primeiro de tudo, vou evitar a ação padrão dos elementos do link, como fizemos anteriormente Quero dizer, assim que clicarmos no link , navegaremos até a parte superior da página. Para evitar isso, precisamos do método preventDefault Primeiro, vamos passar aqui o objeto do evento e depois usar o método padrão de prevenção. Então, agora o problema está resolvido. Em seguida, precisamos acessar o parágrafo e armazená-lo na variável. Vamos criar uma nova variável com o texto do serviço de nomes. Precisamos aqui, ponto de atendimento. Os próximos elementos são irmãos, porque o parágrafo é irmão do serviço Agora precisamos adicionar a essa mudança de classe de elemento, que definiremos no arquivo CSS. Nesse caso, vou usar o método toggle porque temos que adicionar a classe do elemento onClick e depois removê-lo No próximo clique. Precisamos servir como lista de classes de pontos de texto, alternância de pontos. E temos que especificar aqui a mudança do nome da classe. Agora temos que definir novos estilos no arquivo CSS. Vamos selecionar etiquetas de serviço com mudança de classe. Para exibir o texto, precisamos dos seguintes estilos. Temos que ajustar a altura de volta para 15 RAM. Então, temos que tornar a visibilidade visível. E também temos que aumentar a opacidade. Vamos criar uma Agora , se eu clicar nos cabeçalhos , as etiquetas de serviço adequadas serão exibidas No momento, não temos aqui e são efeitos suaves. Então, precisamos usar a transição. Temos que definir a tradução em ambos os casos, quero dizer, por padrão e com a mudança de classe. Portanto, no primeiro caso, precisamos fazer a transição com os valores 0,2 s. Quanto ao segundo caso, precisamos que você especifique a altura e a opacidade Portanto, a duração será de 0,5 s em ambos os casos. Mas com a opacidade, precisamos de algum tempo de atraso. Digamos 0,5 s. Então, como você pode ver, tudo funciona bem. A única coisa que precisamos fazer é mover esse botão de serviço para o lado esquerdo do OnClick Para isso, precisamos usar JavaScript porque precisamos de alguns cálculos. Você pode pensar que só precisamos mudar a posição desse elemento do painel, mas isso não é suficiente. Se usarmos a posição de atraso com um valor zero , não poderemos usar a transição Por exemplo, se mudarmos a posição correta e a tornarmos 100%, você verá onde os elementos de extensão se posicionarão. Então, para ajustar suas posições, temos que subtrair a largura desse elemento de extensão para 100% Vou criar uma nova variável. Vamos chamá-la de posição correta. Então, como dissemos, temos que definir a posição correta do serviço btn. E temos que alterá-lo somente quando as etiquetas de serviço mudam de classe. Portanto, precisamos inserir aqui uma declaração condicional onde temos que verificar se esse service desk contém mudança de classe ou não Portanto, precisamos de pontos de imposto sobre serviços, lista de classes, pontos que contenham E temos que especificar aqui a mudança de classe. Se isso for verdade, teremos que subtrair a largura desse elemento de extensão para 100% Então, vou usar um dos métodos chamados calc. Então precisamos de 100% menos. Então, para ter acesso à largura dos elementos de extensão, vou usar um dos métodos chamados get computed style Esse método retorna um objeto com os valores de todas as propriedades CSS que o elemento tem. Dentro dos parênteses, precisamos especificar os elementos de extensão, que são filhos do serviço Portanto, precisamos do service dot first element child. E agora temos que acessar a largura. Então, isso acontecerá se a condição for verdadeira, mas se for falsa, teremos que colocar a posição correta em zero. Tudo bem? Finalmente, temos que atribuir aos elementos de extensão a posição correta Precisamos de ponto de serviço: primeiro elemento, filho, ponto estilo ponto, certo. E deve ser igual à posição correta. Agora, se eu clicar nesse gráfico de superfície e ele se mover para o lado esquerdo, na verdade, precisamos tornar esse momento mais suave Então, vamos usar a transição. Precisamos da duração certa, 0,5 s. Tudo bem, então, como você pode ver, tudo funciona perfeitamente E com esta seção, terminamos. Em seguida, temos que cuidar da seção de conteúdo. Então, vamos seguir em frente. 16. Criar e personalizar o formulário de contato: Tudo bem, então, na palestra anterior, terminamos de trabalhar na seção de projetos, e agora é hora de seguir em frente e cuidar da próxima seção, que será um contato comigo Esta seção consiste em algumas partes diferentes. Temos aqui o título seguido por alguns campos de entrada com um botão de envio. E também abaixo, temos uma apresentação de slides dos ícones de mídia social Nesta palestra, cuidaremos do formulário. Quanto a esta palestra, nós a criaremos mais tarde. O cabeçalho colocado na parte superior dos campos de entrada é dinâmico. Quero dizer que, por padrão, vemos aqui o texto. Vamos conversar. Mas se eu focar os campos de entrada , isso mudará dinamicamente Tudo bem, vamos ver o que vamos criar. Como sempre, vou começar com a marcação HTML. Vamos inserir novos comentários no arquivo HTML. Seção cinco. Da seção cinco. Em seguida, abra a etiqueta da seção com a seção cinco da classe. Portanto, na primeira parte desta seção, teremos um título de seção e os campos de entrada. Vamos inserir novos comentários para o título da Seção cinco. Em seguida, abra a tag de cabeçalho H1 com o título da seção da classe. E com o conteúdo. Entre em contato comigo. Em seguida, vou criar elementos de formulário, mas antes disso precisamos de um invólucro de formulário Vamos inserir um novo formulário de comentários e, em seguida, abrir uma tag div com uma classe para borracha Portanto, esse elemento incluirá o título e o próprio formulário. Vamos abrir a tag de cabeçalho H2 com uma classe de título de formulário. E com o conteúdo. Vamos conversar. Certo. Depois das dívidas, vou criar um elemento de formulário em si que é atribuído a cada classe Formulário de contato. Portanto, no geral, temos três campos de entrada diferentes, texto, área e um botão de envio. Vamos abrir a tag de entrada. O tipo será tributado. Além disso, precisamos aqui de um atributo de classe, contato, entradas de formulário E então precisamos de um espaço reservado. Com o joelho de conteúdo. Vamos duplicar essa linha de código duas vezes. O segundo campo de entrada será para e-mail. Então, vou mudar o tipo e também o atributo do espaço reservado O próximo campo de entrada terá texto digitado. Quanto ao atributo de espaço reservado, vou inserir seu assunto Tudo bem, depois disso, vou criar uma área de texto. Ele terá duas classes diferentes. Um dos estilos mais comuns, quero dizer Entrada de Formulário de Contato. Quanto ao segundo , será para estilos individuais. Vamos inserir a área de texto do formulário de contato. Além disso, precisamos do atributo de espaço reservado com a mensagem de conteúdo Por fim, vamos criar um botão de envio. Vou criá-lo usando elementos de entrada. O tipo será enviado. Também precisamos do atributo de classe com o formulário de valor submit btn. E então precisamos de um atributo chamado valor com as solicitações de envio de conteúdo. Tudo bem? Portanto, a marcação HTML está pronta, mas no momento não está visível Ele é colocado atrás do fundo. Então, precisamos começar a escrever um pouco de CSS. Vamos escrever novos comentários no arquivo CSS, seção cinco. Da seção cinco. Em seguida, selecione os elementos desta seção. Em primeiro lugar, vou mudar a posição. Vamos fazer disso um parente. E então eu vou definir a altura. Vamos fazer com que seja 100% da janela de visualização. Então, como você pode ver agora , o conteúdo está visível. Vou colocá-lo no centro desta seção. E para isso, vamos usar o flexbox. Vou atribuir à seção o elemento centro de classe. Portanto, considera-se que o conteúdo é colocado no centro dessa ação e agora podemos personalizar os elementos. Vamos começar com o título do formulário. Vou inserir novos comentários no formulário. Em seguida, selecione o título do Formulário. E primeiro, vamos definir sua família de fontes. Vou usar aqui Poppins SAN-serif para aumentar o tamanho da fonte, torná-la seis SAN-serif para aumentar o tamanho da fonte, torná-la seis RAM. Além disso, vou deixar a fonte um pouco mais ousada. Vamos definir a fonte como 400 e depois mudar a cor. Vou usar a cor U 90, E 0 E. Em seguida, vou criar algum espaço entre as letras. E também precisamos de algum espaço na parte inferior de um título. Então, vamos usar o espaçamento lateral com valor de 0,3 ao redor. E então precisamos de margem inferior com valor três. Rampa. Tudo bem, vamos ver o título. Vamos seguir em frente e cuidar dos campos de entrada. Vou alinhá-los usando o Flexbox. Então, vamos prosseguir e atribuir ao centro de classes do elemento do formulário Além disso, precisamos mudar a direção da flexão para colocar os campos de entrada verticalmente em uma coluna Então, vamos selecionar Formulário de contato e definir a direção flexível para a coluna Tudo bem, como você pode ver, os campos de entrada estão alinhados e agora temos que iniciá-los Vamos começar com as entradas do formulário de contato. Em primeiro lugar, vou definir a largura. Vamos fazer com 60 RAM. Em seguida, vou criar algum espaço dentro da entrada usando o preenchimento Obteremos o valor de 0,5 RAM. Além disso, vamos criar algum espaço na parte superior e inferior dos campos de entrada usando margem com valores um, RAM e zero. Tudo bem, a seguir, vou mudar a cor de fundo e também a borda Vou definir a cor de fundo para branco. Mas com uma opacidade menor, vou usar o valor RGBA com a cor branca e com a E também mude a fronteira. Vamos atribuir a ele um ponto sólido de 1 g, e colorimos 90 E 0 E. Tudo bem, depois disso, eu vou cuidar da fonte Vamos aumentar o tamanho da fonte, torná-la 1,7 rem. Além disso, vou deixar a fonte em negrito. Em seguida, mude a cor. Você usa sua cor AAA e também cria algum espaço entre as letras Vamos fazer com que seja 0,1 rem. Tudo bem, então os campos de entrada parecem muito melhores. Em seguida, vou cuidar da altura dos campos de entrada e também da área de texto. Eles terão alturas diferentes. Vamos definir a altura das entradas do formulário de contato para cinco RAM Em seguida, selecione a área de texto e defina sua máxima para 20 corridas. Tudo bem, como você pode ver, os campos de entrada e também a área de texto estão bem Antes de prosseguirmos e personalizarmos o botão de envio, vou corrigir aqui um pequeno problema. No caso da área de texto, podemos alterar sua largura e altura manualmente no canto inferior direito, onde temos o controlador de temos o Depois de alterarmos o tamanho da área de texto , isso quebrará o layout. Então, vou desativar esse recurso. Para isso, precisamos usar uma das propriedades CSS chamada redimensionar E temos que defini-lo como nenhum. Tudo bem, como você pode ver, não podemos mais alterar o tamanho da área de texto. Então, o último elemento que precisamos para personalizar esse botão de envio, vamos selecioná-lo. Em primeiro lugar, vou definir largura e altura. Vamos definir a largura para 20 RAM. Quanto à altura, vou fazer com que sejam cinco RAM. Em seguida, altere a cor de fundo. Vou usar aqui a mesma cor vermelha. E então se livre da borda padrão. Vamos fazer com que não seja nenhum. Ok, em seguida, vou colocá-lo no lado esquerdo. Para isso, vou usar a propriedade chamada align self. Poderíamos valorizar a flexibilidade, começar. Aumente também o tamanho da fonte e altere a cor do texto. Tudo bem, é isso. Todos os elementos estão estilizados e agora é hora de dinamizar a adição ao formulário Depois de nos concentrarmos nos diferentes campos de entrada, temos que exibir o título adequado. Para isso. Vou usar JavaScript. Vamos ao arquivo script.js e inserir novos comentários para a Seção cinco. Em primeiro lugar, vou selecionar o título do Formulário e também todos os campos de entrada, incluindo a área de texto. Vamos inserir seu novo formulário de comentários. Em seguida, vou selecionar um título. Então, vamos criar uma nova variável Chame-a do título e, em seguida, selecione esses elementos usando o método seletor de consulta Em seguida, precisamos selecionar as entradas. Então, vou duplicar essa linha de código depois mudar o nome Precisamos de entradas de formulários. Além disso, precisamos aqui de consulta, seletor, todo o método. E então vamos especificar aqui o nome da classe, entrada do formulário de contato. Tudo bem. Depois disso, precisamos percorrer os campos de entrada e usar o evento chamado foco. Então, vou usar para cada método com entradas de formulário. Vamos passar uma função de retorno de chamada com a entrada do parâmetro. Portanto, precisamos conectar ao ouvinte de eventos de entrada o evento chamado focus Então, uma vez que focamos os campos de entrada, temos que alterar o conteúdo do texto do título. Portanto, precisamos aqui do título do formulário, do conteúdo do texto pontilhado. Então eu vou abrir os backticks. O texto começará com o seu. E então precisamos do valor do atributo de espaço reservado. Então eu vou passar aqui entradas, pontos, lugar, suporte. Isso nos dará o valor do atributo de espaço reservado. Portanto, se eu focar qualquer uma das entradas, conteúdo padrão do título mudará Tudo funciona bem, mas precisamos alterar o conteúdo do título com algum efeito de desvanecimento Depois de focar as entradas, temos que ocultar o título e exibi-lo após algum tempo, o que deve ser igual à duração do efeito de transição Então, primeiro de tudo, precisamos ocultar o título institucional no estilo de ponto do título, opacidade do ponto igual a zero Em seguida, precisamos usar um método setTimeout. Vamos colocar essa linha de código dentro da função. E também adicione aqui, a partir do estilo de ponto do título, opacidade do ponto igual a um A duração da transição será de 0,3 s. Então vou passar aqui 300 milissegundos E então temos que usar a transição no arquivo CSS com os valores opacidade 0,3 s. Tudo bem, considerando que agora temos um bom A única coisa que precisamos fazer é recuperar aqui o conteúdo padrão do título depois de desfocarmos o campo de entrada Para conseguir isso, vou usar outro evento chamado bluer, que ocorre quando desfocamos os campos de entrada Vamos continuar e duplicar esse código. Então mude o evento que precisamos aqui, mais azul. E também precisamos alterar o conteúdo do título. Será o conteúdo padrão. Vamos conversar. Portanto, se eu clicar em qualquer lugar , exceto nos campos de entrada , a constante mudará e a padrão será exibida. Tudo bem, então isso é sobre a primeira parte da seção de conteúdo Em seguida, vamos criar uma apresentação de slides dos ícones de mídia social Então, vamos passar para a próxima palestra. 17. Criar apresentações de links para redes sociais: Tudo bem, então, no último vídeo, criamos para clientes a primeira parte da seção de contato Agora eu tenho que cuidar dessa apresentação de slides dos ícones de mídia social Como você pode ver, eles são colocados abaixo dos campos de entrada Quero dizer, na parte inferior da página, os ícones estão se movendo com alguns intervalos. O ícone no centro está ficando mais claro. Quanto ao resto dos ícones, eles são mais escuros por padrão Tudo bem, vamos começar a criar a marcação HTML Vamos inserir novos comentários para a apresentação de slides. Em seguida, abra a tag div, que será o invólucro dessa apresentação de slides Então, no geral, teremos cinco ícones diferentes de mídia social. Eles serão representados pelas imagens e também serão agrupados pelos elementos do link. Então, vou abrir a tag do link com o link da apresentação de slides da classe E então eu vou passar aqui em quais elementos. Vamos especificar o atributo de origem. Precisamos de pastas, imagens, ícones sociais e, em seguida, a apresentação de slides de imagens, MG F1, Então, no geral, teremos cinco ícones. Vamos duplicar o elemento de link quatro vezes e, em seguida, alterar rapidamente os nomes das imagens Ok, então aqui temos os ícones. No momento, eles são muito grandes e o layout está bagunçado. Então, vamos cuidar disso. Vou colocar os ícones na horizontal em uma linha. Então, vamos usar o Flexbox. Até onde vou inserir seus comentários para a apresentação de slides Em seguida, selecione os elementos div do wrapper atribuídos a ele. Display flexível. Além disso, vou definir sua largura. Em seguida, precisamos selecionar um elemento de link e alterar a largura. Vou definir a largura para 20%. E, finalmente, precisamos definir a largura da imagem em si. Então, vamos selecionar a imagem. Defina sua largura para 100%. Nesse caso, a imagem ocupará 100% da largura do elemento pai. Então, agora, como você pode ver, temos aqui resultados muito melhores. No momento, os campos de entrada e os ícones são colocados lado a lado para colocá-los uns sobre os Então, vamos mudar a direção de flexão do elemento de seção Precisamos fazer uma coluna. Tudo bem, agora precisamos algum espaço entre as entradas e os ícones Vamos usar a margem superior, o valor de dez RAM, e também criar algum espaço nos lados esquerdo e direito usando o preenchimento Vamos defini-lo como zero e executar. Por fim, vou atribuir aos ícones um preenchimento nos lados esquerdo e direito Isso reduzirá as imagens. Então, vamos definir o preenchimento para 0.1 run. Tudo bem, vamos ver sobre o CSS. Por enquanto. Temos que fazer a apresentação de slides funcionar usando JavaScript. Então, vamos para o arquivo script.js. Em primeiro lugar, vou inserir seus novos comentários para a apresentação de slides Em seguida, precisamos selecionar o desenvolvimento do wrapper. Vamos criar uma nova variável. Vou chamá-la de apresentação de slides e selecioná-la usando o método querySelector Tudo bem, então deixe-me contar como vamos fazer essa apresentação de slides funcionar Removeremos o primeiro ícone da lista e o adicionaremos de volta à lista como o último ícone. Faremos isso com alguns intervalos e também com algumas transições suaves Vamos falar sobre o processo dessa apresentação de slides. Então, como dissemos, precisamos de alguns intervalos e, para isso, vou usar um dos métodos integrados chamado set interval São necessários dois argumentos. A primeira é uma função de retorno de chamada, que é executada após cada intervalo Quanto ao segundo argumento, será a quantidade da integral em si. Vamos mudar as imagens depois de 3 s. Então vou passar de 3.000 milissegundos Ok, então, como dissemos, temos que remover o primeiro ícone e depois adicioná-lo à lista como o último. Então, primeiro de tudo, vamos selecionar o primeiro ícone. Vou criar uma nova variável. Vamos chamá-lo de primeiro ícone. Em seguida, precisamos do ponto do primeiro elemento da apresentação de slides para ter acesso ao primeiro ícone Agora, o primeiro ícone está selecionado e, para removê-lo do desenvolvimento do wrapper, vou usar um dos métodos de cúpula chamado filho removido Então, precisamos de pontos de apresentação de slides, remova a criança. E temos que especificar aqui por um segundo. Então, como você pode ver , a cada 3 s, os ícones são removidos. Como dissemos, temos que adicioná-los de volta à lista. E para isso, vou usar outro método de cúpula chamado append Por padrão, ele adiciona um elemento como o último filho. Portanto, precisamos de uma apresentação de slides com ponto e filho. E temos que especificar aqui novamente seu ícone. Ok, como você pode ver, a apresentação de slides , tudo funciona, mas precisamos adicionar alguns efeitos diferentes A primeira coisa que vou fazer é remover o primeiro ícone suavemente com um efeito de esmaecimento Para fazer isso, vou criar uma nova classe e CSS, vamos chamá-la de faded out. Portanto, essa classe incluirá duas células. Para atenuar os elementos, precisamos tornar a opacidade e a largura de ambas zero Além disso, temos que usar a transição para o primeiro ícone. Para selecionar o primeiro ícone, vou usar o seletor f child Então vamos fazer a transição do Instituto. Precisamos de largura, duração de 0,5 s e, em seguida, opacidade com a mesma Ok, isso é tudo sobre o CSS. Vamos voltar ao arquivo JavaScript. Agora precisamos adicionar classe, desapareceu. O primeiro ícone. Precisamos do primeiro ícone, ponto, lista de classes, adição de ponto. E temos que especificar aqui que o nome da classe desapareceu. Agora, o ícone está sendo removido, mas sem nenhum efeito de desvanecimento, porque efeito de transição se encontra em algum momento, na verdade na metade do segundo Portanto, precisamos esperar metade desse segundo antes de remover o elemento da lista. Para fazer isso, vou usar uma das métricas chamada setTimeout Teremos dois argumentos. A primeira será uma função de retorno de chamada. Vamos inserir aqui essas duas linhas. Quanto à quantidade de tempo, vou usar 500 milissegundos. Agora, o ícone está sendo removido com um belo efeito de desbotamento. Agora temos que adicioná-lo novamente à lista com efeito de desvanecimento Para fazer isso, temos que remover a classe desbotada dos elementos Portanto, precisamos primeiro colocar o ícone na lista de classes de pontos, remover pontos, desaparecer. Então, agora o ícone é adicionado à lista, mas sem efeito de desvanecimento Porque, novamente, temos que esperar metade do segundo. Portanto, precisamos usar novamente a função setTimeout com a mesma quantidade de tempo, 500 Então, agora ainda não temos aqui o efeito fade porque precisamos definir a transição para o último ícone Na verdade, precisamos da mesma transição que usamos para o primeiro ícone. Então, vou adicionar aqui apenas o seletor para o quinto ícone Então, agora, tudo funciona bem e podemos seguir em frente e cuidar do segundo efeito. Quero dizer, temos que tornar os ícones mais escuros por padrão e torná-los mais claros quando ocuparem o terceiro lugar na lista Primeiro, vamos deixar todos os ícones mais escuros. Para isso, vou usar uma das propriedades chamada filtro com uma função chamada brilho. Depois disso, vou criar uma nova classe e CSS, que incluirão o maior brilho. E adicionaremos essa classe para serem elementos usando JavaScript. Vamos chamar essa classe de luz e atribuir a ela o brilho do filtro com o valor 1,5. Então, agora precisamos selecionar o terceiro ícone e adicionar a ele uma luz de classe recém-criada. Vamos criar uma nova variável, chame-a de terceiro ícone. Para ter acesso ao terceiro ícone, precisamos de crianças de apresentação de slides E especificamos aqui o número três. Então, agora selecionamos o terceiro ícone e precisamos adicionar luz à sua classe. Então, precisamos de um terceiro ícone, ponto, lista de classes. Pontos, luz. Agora, como você pode ver, o ícone fica mais claro, mas mantém o brilho. Não precisamos disso. Temos que remover a luz da aula. Portanto, precisamos removê-lo do irmão anterior do terceiro ícone porque, uma vez que ele se move, não é mais o terceiro ícone na lista, mas o segundo Portanto, precisamos do terceiro ícone, ponto, elementos anteriores, irmão, ponto, lista de classes, ponto, remover a luz do nome da classe Então, agora tudo funciona bem. Só precisamos adicionar uma transição a esse efeito. Então, vamos selecionar o terceiro ícone usando o seletor f child atribuído à sua transição com o filtro de valores de 0,5 s. Então agora temos resultados muito melhores O ícone está ficando mais escuro suavemente. Mas, como você pode ver, precisamos de uma transição quando o ícone também ficar mais claro. Então, vamos adicionar aqui filtro de transição e a duração de 1,5 s. Ok, então agora estava tudo bem. E antes de terminarmos esta palestra, vou fazer mais uma coisa Se eu recarregar a página, todos os cinco ícones ficarão mais escuros. Na verdade, não precisamos disso. Precisamos tornar o Food Icon mais leve por padrão. E para fazer isso, vou adicionar uma classe mentida ao terceiro ícone no arquivo HTML. Ok, é isso mesmo. Finalmente, terminamos. Terminamos de trabalhar na seção de contato. Vamos seguir em frente. 18. Criar e personalizar a navegação: Ok, então, quando terminarmos com a seção de contato agora, vou criar e personalizar a navegação. Vamos dar uma olhada no projeto finalizado. Como você pode ver, temos aqui alguns itens de navegação diferentes. Depois de rolar a página para baixo, o menu de navegação se transformará em um ícone que consiste em duas linhas Se clicarmos nele, novamente, os itens do menu serão exibidos. Depois disso, se eu rolar , os itens serão ocultados, o ícone do Menu será exibido Se eu rolar até o topo da página, os itens do menu serão exibidos automaticamente Além disso, se eu clicar nos itens do menu , navegaremos até as seções apropriadas sem problemas. Tudo bem, é isso que vamos fazer nesta palestra. Vamos começar a criar uma marcação HTML. Vou inserir novos comentários logo após o plano de fundo da página. Então vou inserir aqui novamente novos comentários para o ícone Menu. Em seguida, abra a tag div com o ícone do menu da classe. Como você viu, o ícone do menu consistirá em duas linhas. Então, vou abrir a tag div com a linha do ícone do menu da classe Então, vamos duplicá-lo. Em seguida, vou criar itens de navegação. Vamos inserir seus novos comentários, barra de navegação e a desativação agora funcionam. Em seguida, abra o elemento de navegação HTML5 com uma barra de navegação de classe. Portanto, no geral, teremos cinco itens de navegação diferentes. Vamos abrir a tag do link com um cochilo da aula ou link com a página inicial do conteúdo Em seguida, vou duplicar os elementos do link quatro vezes e alterar o conteúdo O segundo item será sobre mim. Em seguida, teremos projetos, serviços e contatos. Tudo bem, então isso é tudo sobre a marcação HTML. Tudo está preparado, mas agora nada está visível. Vamos corrigir isso em breve. Vamos começar a escrever CSS. Em primeiro lugar, vou exibir e personalizar os itens de navegação. Vamos inserir novos comentários, de navegação e de navegação. Então, precisamos novamente de comentários para a barra de navegação. Vamos selecionar elementos de navegação. Antes de tudo, defina que sua posição será fixa. E também vou definir a melhor propriedade. Vamos fazer com que seja 2,5 rem. Então agora os quatro agora estão visíveis. Quer dizer, se eu selecionar todos os elementos, você verá os itens de navegação no canto superior esquerdo da página. Precisamos colocá-los no lado direito para isso. Vou usar o flexbox. Primeiro de tudo, vamos definir essa largura. Vou configurá-lo para 100%. Em seguida, use o flexbox. Precisamos de display flex. E para colocar os itens no lado direito, justificamos o conteúdo com valor flexível Como você pode ver, a barra de navegação é colocada no lado direito da página Tudo bem, vamos criar algum espaço no lado direito usando o preenchimento Vou ajustar o estofamento à direita, 23 rampa. Então, vamos ver no canto superior direito, seguir, vou personalizar os links. Então, vamos selecionar agora por link. Em primeiro lugar, vou definir o tamanho da fonte. Vamos fazer com que 1.5 funcione. Então vou deixar o telefone mais ousado. Vamos definir o peso da fonte para 700. Também transforme o texto em maiúsculas e mude a cor, torne-o branco. Em seguida, vou criar algum espaço entre os itens usando margem. Vamos definir como zero na parte superior e inferior e 2,5 rem nos lados esquerdo e direito. Tudo bem, como você pode ver, os itens do menu são personalizados Se eu rolar a página para baixo, você notará que os itens ficam atrás dos elementos Vou corrigir isso usando a propriedade do índice Z. Vamos configurá-lo para 100. Além disso, vou adicionar um pequeno efeito de sombra aos itens. Vamos usar sombra de texto com os valores 0,3 RAM, 0,5 RAM e a cor preta. Tudo bem, é isso. De nossa parte, terminamos. Agora, vou estilizar o ícone do menu. No início. Vamos ocultar o número usando opacidade zero e visibilidade Em seguida, insira novos comentários para o ícone Menu e selecione-o. Em primeiro lugar, vou fixar a posição do ícone do menu Então, vamos definir essa largura e altura. Vou configurar com 212 RAM. Quanto à altura, vamos fazer com que sejam sete RAM. Além disso, vou usar cor de fundo temporária. Vamos configurá-lo para vermelho. Então, aqui temos o ícone do menu. momento, ele está colocado no canto superior esquerdo da página, então precisamos mudar sua posição. Vamos definir a parte superior para zero e a posição direita para seis rampas. Tudo bem, agora é hora de mostrar as linhas. Então, vamos selecionar o ícone do menu, linha, largura e altura definidas. Vou definir a largura para quatro RAM. Quanto ao híbrido, será de 0,1 RAM. E também mude a cor de fundo, torne-a branca. Então, aqui temos as linhas, mas como você pode ver, precisamos de algum espaço entre elas. Vamos criar espaço usando margem de 0,5 rem e zero. E também vamos adicionar às linhas um pequeno efeito de sombra. O uso de box-shadow fornecerá valores de 0,31, 0,5 RAM e a cor Tudo bem, depois disso, vou colocar o ícone no centro da caixa Para isso, podemos simplesmente usar um centro de aula. Além disso, precisamos mudar a direção da flexão. Vamos configurá-lo para ligar para eles. Tudo bem, então o ícone do Menu é personalizado e podemos nos livrar do fundo vermelho O ícone está pronto e agora precisamos fazer a navegação funcionar. Por padrão, vou ocultar ícone do menu e exibir novamente os itens de navegação. Portanto, precisamos de opacidade zero, visibilidade oculta. E também temos que nos livrar dessas duas linhas a partir daqui. Então, depois de rolar a página para baixo, precisamos ocultar os itens do menu e exibir o ícone do menu Portanto, precisamos usar o evento scroll. Vamos ao arquivo JavaScript e, antes de tudo, selecionar o ícone do menu. E então, Albert, a princípio, vamos instituir comentários, navegação, navegação. Em seguida, vou selecionar o ícone do menu. Vamos criar uma nova variável e chamá-la de ícone de menu e, em seguida, selecionar os elementos usando o método querySelector Então eu vou duplicar essa linha de código, mudei o nome da variável Nós precisamos, navbar. E também vou mudar o nome da turma. Precisamos novamente agora, tudo bem, depois disso, temos que anexar um ouvinte de eventos aos documentos com o evento scroll Então, como dissemos, temos que conseguir ocultar e exibir o ícone do menu na rolagem Vou criar novas classes e um novo arquivo CSS com novos estilos. E então vamos adicioná-los aos elementos usando JavaScript. Então, vamos criar uma nova classe, vou chamá-la de ícone do menu de exibição. Para exibir o ícone do menu, precisamos de opacidade um e visibilidade visível no caso do número, precisamos ocultá-lo Então, vou criar uma nova classe. Vamos chamá-la de barra Hide Now. Nesse caso, precisamos de opacidade zero e visibilidade oculta. Tudo bem, então as aulas estão prontas e agora temos que adicioná-las ao ícone do Menu E então, no menu superior, eu posso marcar a lista de classes, adicionar pontos. E temos que especificar aqui o nome da classe, mostrar o ícone do menu. E a seguir, no caso de um aeroporto, precisamos agora de port dot, class list, dot, adicionar o nome da classe, height navbar Portanto, se eu rolar a página para baixo , os itens de navegação se ocultarão e o ícone do Menu será exibido Precisamos tornar essa mudança mais suave usando uma transição. Vamos adicionar à transição do ícone Menu com os valores opacidade e 0,2 s. Quanto à barra de navegação, vou usar novamente a opacidade de transição 0,5 s e também a visibilidade 0,5 s. Então, agora, se rolarmos para baixo, os itens serão ocultados e exibidos com alguns efeitos de desvanecimento Além disso, vou adicionar outro efeito ao napa Eu quero movê-lo para o lado direito quando ele se esconder. Então, vamos inserir sua transformação, traduzir X com o valor dez RAM. E também adicione uma propriedade de transformação à transição com a mesma duração, 0,5 s. Agora, acho que temos um efeito muito melhor. A próxima coisa que faremos é exibir novamente os itens de navegação. Depois de rolar até a página. Para isso, precisamos usar as instruções If nas quais precisamos verificar se a página está rastreada ou Portanto, precisamos de rolagem de pontos na janela. Por quê? Na verdade, essa propriedade retorna o número em pixels em que a página está rolando verticalmente no momento Portanto, se rolar por que a propriedade é igual a zero, isso significa que a página é acessada até a borda superior E temos que exibir os itens do menu e ocultar o ícone do Menu. Portanto, precisamos do ponto do ícone do menu, da lista de classes, não de remover o ícone do menu de exibição da classe. E no caso de agora, o que precisamos agora para lista de classes de pontos, remoção de pontos, altura, número. Tudo bem? Se eu rolar para cima, itens autênticos do menu serão exibidos, o ícone do menu se ocultará Ok, então estamos quase terminando a navegação. A única coisa que precisamos fazer é exibir os itens de navegação. Então, uma vez que clicamos no ícone do menu, também precisamos conectar os itens do menu para que sejam seções apropriadas. Vamos anexar um ouvinte de eventos ao ícone do Menu com um evento de clique E então temos que passar aqui essas duas linhas. Então, se eu clicar no ícone do menu, nada acontecerá porque agora o ícone do menu está colocado atrás do círculo da boca. Portanto, precisamos usar uma propriedade z-index. Vamos fazer com que seja 100. Além disso, vou mudar o cursor. Vamos deixar isso claro. Tudo bem, como você pode ver, tudo funciona bem. A última coisa que precisaremos fazer é conectar os itens do menu às seções para que possamos navegar até a seção corretamente. Depois de clicarmos nos itens. Para fazer isso, precisamos usar a referência h e os atributos id. Temos que especificar os atributos de referência h dos links para que eles correspondam aos valores dos atributos das seções. Vamos prosseguir e especificar os atributos de referência h. Vou passar suas seções com os números. Depois disso, temos que atribuir a cada elemento da seção o atributo id com valores semelhantes Precisamos de números de seção de um a cinco. Então, se eu clicar nos itens do menu , nada acontecerá. Talvez tenhamos algo errado no CSS. Vamos ir em frente e verificar. Como você pode ver, atribuí a propriedade z-index ao link da barra de navegação e não ao número Então, vamos resolver esse problema. Agora, como você pode ver, tudo funciona perfeitamente. E, finalmente, na navegação, terminamos. Em seguida, vamos criar a barra de progresso. Então, vamos passar para a próxima palestra. 19. Barra de progresso de design - Parte 1: Tudo bem, então, no último vídeo, criamos e personalizamos a navegação, e agora é hora de cuidar da barra de progresso Vamos dar uma olhada no projeto finalizado. Então aqui temos a barra de progresso, que tem a forma do círculo e sua posição é fixa. No centro do círculo. Nós temos a flecha. Quando começarmos a rolar a página para baixo , a linha vermelha aparecerá e preencherá o círculo Quando descemos até a página. Depois de rolar para baixo , a seta mudará de direção. Se começarmos a rolar para cima , a linha vermelha começará a desaparecer A barra de progresso também funciona com projetos. Quero dizer, se expandirmos qualquer um dos projetos a linha vermelha desaparecerá e a barra de progresso começará a funcionar com o projeto. Quero dizer, ele será preenchido assim que rolarmos a imagem para baixo. Se fecharmos o projeto, a barra de progresso continuará funcionando acordo com a página. Tudo bem, então vamos começar a trabalhar na barra de progresso Vou criar a marcação HTML. Vamos inserir novos comentários logo após o plano de fundo da página. Precisamos de uma barra de progresso e de uma barra de progresso. Em seguida, abra uma tag de link com uma barra de progresso da aula. Dentro do elemento link, precisaremos de quatro elementos diferentes. Agora, vamos apenas criá-los e depois explicaremos e mostraremos por que precisamos desses elementos. Vamos abrir uma tag div com o semicírculo da classe e duplicá-la três vezes Na verdade, não precisamos tocar nos elementos do segundo div. O terceiro será o topo de um círculo central. Quanto ao último elemento div, será um círculo da barra de progresso Como o conteúdo. Vamos inserir aqui uma das entidades HTML5 Precisamos de e comercial do que da linha tracejada 8595, ponto e vírgula. Tudo bem, isso é tudo sobre a marcação HTML. Vamos começar a escrever um pouco de CSS. Vamos inserir novos comentários no arquivo CSS, barra de progresso. E da barra de progresso. Em seguida, selecione os elementos do link. Primeiro, vou configurá-lo para a posição fixa. Em seguida, defina a largura e a altura. Vou fazer dos dois um bonde. E também mude a cor de fundo, torne-a branca. Como você pode ver, a barra de progresso é colocada no canto superior esquerdo da página. Precisamos mudar sua posição. Vou definir as propriedades inferior e direita. Vamos definir os dois para oito rodadas. Tudo bem, então a barra de progresso é posicionada e colocada no canto inferior direito Em seguida, vou arredondá-lo. Para isso, precisamos de um raio de borda com o valor de 50 por cento Tudo bem, isso é tudo sobre o invólucro. Vamos seguir em frente e cuidar do círculo da barra de progresso. Vamos selecionar esses elementos e definir sua largura e altura. Vou fazer com que os dois tenham 7,8 RAM. Em seguida, altere a cor do plano de fundo. Eu vou fazer com que seja preto. Em seguida, precisamos arredondá-lo usando um raio de borda de 50 por cento. Altere também a cor, torne-a branca e aumente o tamanho da fonte da seta. Vamos fazer isso para alugar. Portanto, esse elemento é intitulado, mas temos que cuidar de sua posição Ele deve ser colocado no centro da embalagem. E também temos que centralizar a seta dentro do círculo. Em ambos os casos, vou usar um centro de aula. Agora, considerado, o problema está resolvido. Tudo bem, então a barra de progresso está preparada. Ele tem o Luke padrão, e agora temos que fazer o trabalho. Como você se lembra, criamos alguns desenvolvimentos diferentes. Os primeiros desenvolvimentos, que têm um semicírculo de classe, conseguirão sentir a barra de progresso com uma cor vermelha. A primeira coisa que vou fazer é esconder o círculo preto por um tempo para um tempo para explicar e demonstrar melhor as coisas. Então, vou atribuir para exibir nenhum. Tudo bem, então o círculo preto está oculto, e agora temos que cuidar dos três elementos div que nos ajudarão a fazer uma barra de progresso funcionar Vamos selecionar os três elementos simultaneamente. Quero dizer, precisamos de semicírculo com semicírculo no topo. Vamos definir a posição, torná-la absoluta. Além disso, precisamos ser 50 por cento. Para a altura. Vou fazer com que seja 100% Além disso, vou definir as propriedades superior e esquerda. Vamos fazer com que os dois sejam zero. Então, no momento, os elementos não estão visíveis. E para corrigir isso, vou atribuir a cada um deles uma cor de fundo temporária diferente Vamos selecionar um semicírculo com o enésimo seletor de filhos. Portanto, a cor de fundo do primeiro semicírculo será verde. Então eu vou duplicar esse código. Vamos mudar a cor de fundo, torná-la azul. Em seguida, selecione a parte superior do semicírculo. Faça com que a cor de fundo seja laranja. Tudo bem, então todos os três elementos div são colocados um em cima do outro É por isso que vemos aqui a laranja. Somente. Se eu comentar essa linha , veremos aqui os elementos azuis. Primeiro, vou fazer com que a barra de progresso funcione ao mouse para simplificá-la de entender Em seguida, mudaremos o mouse e usaremos eventos de rolagem usando JavaScript Precisamos girar o primeiro semicírculo em 180 graus. Quanto ao segundo semicírculo, temos que girá-lo 360 graus porque temos que preencher o círculo inteiro Quanto ao topo do semicírculo, neste elemento laranja, temos que ocultá-lo. Então, vamos selecionar a barra de progresso com o mouse, seguida pelo primeiro semicírculo Como eu disse, temos que transformá-lo com função Rotate com o valor 180 graus. Em seguida, duplique esse código e altere o número do enésimo filho Precisamos perguntar o valor da função de rotação. Precisamos de 360 graus, certo? Além disso, precisamos usar a transição para fazer o motor de rotações. Então, precisamos da transformação 1 s. E também vou usar a função de tempo de transição linear Vamos copiar essa linha de código e colá-la. Para o segundo elemento. Precisamos aumentar a duração. Vamos fazer 2 s. Agora, se passarmos o mouse sobre os elementos , nada acontecerá porque o mouse não nos permite passar o mouse Isso mostra isso usando a propriedade z-index. Vamos configurá-lo para 200. Então, agora, se eu passar o mouse, os elementos girarão. No momento, vemos aqui apenas o elemento azul porque o verde está embaixo dele Se eu postar o fundo azul aqui , você verá os elementos verdes. Então, os elementos estão girando, mas de forma errada Quero dizer, a origem da transformação está definida como central por padrão. Mas, no nosso caso, precisamos colocá-lo no centro certo. Então, vamos usar a origem da transformação com valores, certo? Centro. Nesse caso, a origem da transformação será o centro do elemento, mas no lado direito. Ok, então, uma vez que passamos o mouse sobre a barra de progresso, temos que esconder esses elementos laranja Então, vamos selecionar a barra de progresso com o mouse, seguida pela parte superior do semicírculo e definir a opacidade Agora, as alturas dos elementos quando passamos o mouse sobre a barra de progresso Mas, na verdade, ele se esconde muito cedo. Precisamos escondê-lo quando o elemento verde terminar de girar Então, precisamos ocultá-lo após 1 s. Vamos usar a transição. Com opacidade. A duração será zero, e então precisaremos de um atraso de 1 s. Tudo bem, então agora tudo funciona bem Temos que mudar as cores e também precisamos criar esses elementos ao redor delas. Os dois primeiros desenvolvimentos devem ter uma cor vermelha. Quero dizer a cor B6 e os zeros. Quanto ao terceiro elemento, ele será branco porque a própria barra de progresso tem o fundo branco. Então, agora precisamos esconder essas partes externas dos elementos. Para isso, vamos usar overflow hidden. Tudo bem, agora temos resultados muito melhores. Finalmente, temos que tornar o círculo preto visível. Vamos remover a tela nenhuma. No momento, a parte do círculo está visível porque acabou atrás dos elementos div Para corrigir isso, vamos usar novamente, há a propriedade index com o valor 200. Ok? Agora, se eu passar o mouse sobre a barra de progresso, ela ficará bem preenchida com a cor vermelha Tudo bem, então mostramos como criar essa barra de progresso usando CSS E agora vamos mostrar como podemos fazer isso funcionar em rolagem usando JavaScript Primeiro, vamos comentar esses estilos. Quero dizer, essas toalhas estão pairando. Em seguida, vá para o arquivo JavaScript. Em primeiro lugar, vou selecionar os elementos div. Quero dizer, para elementos div que são colocados dentro da barra de progresso Vamos criar novos comentários para a barra de progresso. Então eu vou criar uma nova variável, vamos chamá-la de semicírculos. E selecione os dois primeiros elementos div que têm os nomes das classes em semicírculo Vou usar o método seletor de consulta all. Em seguida, vamos duplicar essa linha de código. Mude o nome da variável, ela será semicírculo no topo. Além disso, precisamos aqui consultar o método seletor e, em seguida, alterar o nome da classe E, finalmente, crie a variável para o último desenvolvimento, vou chamá-la de círculo de barra de progresso. Em seguida, selecione-o usando o método querySelector. E também especifique aqui o nome da classe, a barra de progresso, o círculo. Tudo bem, a seguir, vou criar uma nova função que será chamada na rolagem Vamos chamá-la de barra de progresso f n. Então, como você sabe, uma rotação completa é igual a 360 graus. Temos que converter essa parte da altura da multidão em graus. Antes de fazer isso, temos que definir algumas variáveis diferentes. A primeira será a altura da janela de visualização da página. Vai ser igual aos pontos da janela na sua altura. A próxima terá toda a altura da página. Então, vamos criar uma nova variável, chame-a de altura da página. Para obter toda a altura da página, precisamos de documentos, pontos, elementos do documento E então teremos que usar a propriedade chamada altura de rolagem E a última variável será essa parte rastreada da página Deve ser igual ao deslocamento Y da página de pontos da janela. Tudo bem, agora tudo está preparado para converter a altura dessa porção chamada em graus. Vamos criar uma nova variável. Vou chamá-lo de grau de porção rolada. Agora temos que usar a fórmula. Precisamos dividir. É chamada de porção, a diferença entre as alturas da página e a altura da porta de visualização da página. E temos que multiplicar o resultado por 360. Então, precisamos é chamado de porção. Depois, a divisão. Em seguida, precisamos da altura da página menos a altura da janela de visualização da página. Temos que multiplicar isso por 360. Ok, vamos ver no console ou essa variável nos dá, vamos pausar aqui o grau da porção rolada Na verdade, precisamos chamar a função no scroll. Já usamos o evento scroll com navegação, então vamos chamar a função aqui Vamos inspecionar a página e mudar para a guia do console. Então, depois de rolar a página para baixo e ir até o final dela, obteremos os valores adequados de 0 a Tudo bem, agora, usando essa variável, girará semicírculos Então, precisamos olhar através deles e girar cada semicírculo E depois o primeiro e o segundo desenvolvimento dentro da barra de progresso. Portanto, precisamos de semicírculos, pontos para cada passagem aqui, a função de retorno de chamada com um parâmetro EL, que significa elementos Agora precisamos girar os elementos. Então, vamos fazer uma pausa aqui. Elemento: estilo ponto, transformação de ponto. Deve ser igual à rotação e ter que passar para você as variáveis chamadas grau de porção , seguidas de graus. Então, agora, se rolarmos para baixo , a barra de rolagem começará a parecer Quando chegarmos à metade, precisamos parar o primeiro semicírculo. E também precisamos esconder o terceiro elemento div e depois o topo do semicírculo Portanto, precisamos usar uma declaração if, na qual temos que definir é chamada de grau de porção maior ou igual a 180. Portanto, se essa condição for verdadeira, teremos que dar ao primeiro semicírculo o valor fixo igual a 180 graus. Então, precisamos de semicírculos de você. Em seguida, o índice número zero e, em seguida, o estilo de transformação de ponto. E teremos que fazer com que o valor da função de rotação seja 180 graus. E também precisamos esconder o topo do semicírculo. Então, vamos inserir sua opacidade de ponto no estilo de ponto superior semicírculo igual a zero Então, agora, quando rolarmos para baixo , toda a barra de progresso será preenchida Mas temos aqui um pequeno problema. Depois de rolar para cima e rolar a porção, o grau se tornará menor que 180 Temos que mostrar a parte superior do semicírculo traseiro. Portanto, precisamos criar a declaração else. Então vamos pegar essa linha de código, colá-la aqui e alterar o valor da opacidade, torná-la uma Então, agora, como você pode ver, tudo funciona bem. Temos que fazer mais algumas coisas com a barra de progresso. E para isso, vamos passar para a próxima palestra. 20. Barra de progresso de design - Parte 2: Tudo bem, então, no último vídeo, começamos a trabalhar na barra de progresso Depois de rolarmos a página para baixo a linha vermelha aparecerá no círculo E agora vou adicionar um evento de clique à barra de progresso. Vamos dar uma olhada no projeto finalizado. Então, quando clicarmos na barra de progresso, rolaremos a página para baixo, seção por seção E quando descermos até o final da página, a seta girará No próximo clique, navegaremos até o topo da página. Além disso, se eu descer e começar a rolar para cima, a seta girará novamente. E se clicarmos na barra de progresso , navegaremos até a parte inferior da página. Certo? Então é isso que vamos fazer nesta palestra. Já criamos uma função para a barra de progresso. Vamos começar a escrever o código. A primeira coisa que precisamos fazer é anexar um manipulador de eventos de clique à barra de progresso Nesse caso, usaremos o manipulador de eventos onclick porque ele anexará o evento click somente uma vez aos elementos Vamos instituir novos comentários. Barra de progresso, clique e clique na barra de progresso. Em seguida, selecione uma barra de progresso. Vou criar uma nova variável. Em seguida, selecione os elementos usando o método seletor de consulta. Em seguida, temos que anexar o manipulador de eventos onclick à barra de progresso Portanto, a primeira coisa que precisamos fazer é impedir a ação padrão ao clicar na barra de progresso. Então, vou passar aqui um objeto de evento. E então precisamos usar o método padrão de prevenção. Depois disso, temos que selecionar todos os elementos dessa seção. Então, vamos criar uma nova variável, chamá-la de seções. Em seguida, selecione todos os elementos da seção usando o método seletor de consulta all Vou especificar aqui a seção do nome da tag. Em seguida, temos que definir as posições dos elementos desta seção e armazená-los na matriz. Então, vou criar uma nova variável. Vamos chamá-las de posições de seção. Nas posições dessas seções, quero dizer, onde estão as seções que começam toda a página e não na janela de exibição Para obter essa posição, precisamos da soma da parte rolada e da distância entre a borda superior da janela de exibição e a posição superior dessa seção Então, como dissemos, temos que armazenar esses valores na matriz. E para isso, vou usar um dos métodos auxiliares de matriz chamado map Isso nos permite executar a função para cada item da matriz e armazenar os valores na matriz. Para usar o método map, precisamos transformar a lista de nós em uma matriz Caso contrário, não funcionará. Portanto, para transformar a lista de nós em uma matriz, precisamos usar a matriz do método e passar aqui as seções Então, precisamos de um método chamado map, que usa um parâmetro. É a função de retorno de chamada, que por si só recebe um argumento, o item atual na matriz Para obter a posição desta seção, precisamos fazer o seguinte cálculo. Primeiro, precisamos usar o retorno da palavra-chave. Agora precisamos da soma da parte quadrada e da distância entre a borda superior da janela de exibição e a posição superior dessa ação Então, quando é chamado de porção mais seção ponto obtém o cliente delimitador rect Aqui. Propriedade chamada Top. Na verdade, a sintaxe ES6 nos permite escrever esse código de forma mais concisa Podemos nos livrar dos colchetes encaracolados. E também podemos remover o retorno da palavra-chave. Ok, vamos executar essa variável para o console e ver o que ela nos dá. Vamos inspecionar a página e mudar para a guia do console. Se eu clicar na barra de progresso , nada acontecerá. Mas se eu rolar para baixo e clicar nos elementos , obteremos uma matriz com cinco itens Cada um deles representa a posição dessa seção na página. Esses são os pixels. Portanto, não funcionou até rolarmos a página para baixo porque a função é chamada somente quando ocorre o evento de rolagem Portanto, temos que chamá-lo mais uma vez fora dos eventos de rolagem Agora, se eu clicar, obteremos o resultado no console Tudo bem, então precisamos usar essas posições para rolar para baixo, seção por seção No começo, vou usar esses valores manualmente para ver como funcionam. E então tornaremos esse processo dinâmico. Para rolar a página para baixo, vou usar um dos métodos chamados de rolagem E temos que anexar esse método ao objeto da janela. Esse método usa dois argumentos. Essas serão as coordenadas. O primeiro também é o pixel ao longo do eixo horizontal dos elementos. O segundo é o pixel ao longo do eixo vertical dos elementos. No nosso caso, o primeiro argumento deve ser zero porque vamos rolar vertical e horizontalmente como o segundo argumento, vou passar um dos valores da matriz, digamos o digamos Então, se eu clicar na barra de progresso, navegaremos até a terceira seção. Ok, então, como dissemos, neste caso, especificamos a posição manualmente e temos que defini-la dinamicamente Para isso, vou usar um método auxiliar de matriz chamado find Esse método retorna o valor do primeiro item na matriz que satisfaz a condição. Vamos criar uma nova variável. Eu vou chamar isso de posição. E então precisamos anexar um método fino às posições da seção. É preciso. Um parâmetro é a função de retorno de chamada. E também precisamos aqui de outro parâmetro, posição da seção e, novamente, o retorno da palavra-chave. Então, agora temos que definir a condição que precisamos conhecer, que está se tornando seção. Para rolar e navegar até essa seção. Para obter essas informações, temos que comparar a posição desta seção com a chamada porção. Portanto, precisamos que a posição da seção seja maior do que a porção rabiscada Quando essa condição for verdadeira, a instrução deixará de executada e obteremos a posição da próxima seção Então, em vez desse valor aqui, vou passar a posição. Além disso, vamos ver no console o que essa variável nos dá. Portanto, se eu clicar na barra de progresso, rolaremos a página seção por seção Além disso, você vê aqui claramente como a posição está mudando. Quando chegarmos ao final da página e clicarmos novamente, navegaremos até o topo da página, mas a posição ficará indefinida Isso aconteceu porque não foram encontrados outros casos em que a condição fosse verdadeira. Na verdade, é disso que precisamos. Precisamos rolar para cima OnClick. Mas seria estranho se deixássemos as coisas assim. E será difícil de entender para outros desenvolvedores, acho que seria melhor se escrevêssemos alguma condição. Vamos criar uma variável na qual vou definir se chegamos ao final da página ou não. Então, vou chamar as variáveis chamadas Bu. E deve ser igual à parte de rolagem mais a altura da janela de visualização da página igual à altura da página Então, se essa variável for verdadeira, significa que chegamos ao final da página. E, portanto, temos que navegar até o topo da página com um clique. Vou criar uma declaração condicional usando o operador ternário Precisamos do Scroll Bull. Então, se isso for verdade, então temos que navegar até o topo da página. Portanto, também precisamos do windows dot scroll, com os argumentos zero em ambos os lugares E se essa condição for falsa, precisamos dessa expressão aqui. Tudo bem, então tudo funciona bem. Em seguida, temos que mudar a direção da seta. Quando chegamos ao final da página , precisamos girá-la Para isso, vou usar a declaração if else. Na verdade, isso interfere em novos comentários, seta e na rotação da seta fora da seta. Portanto, precisamos verificar o mesmo valor booleano. Quero dizer, role bu. Se for verdade, então temos que girar a seta Vamos escrever aqui barra de progresso, círculo, transformação de ponto no estilo ponto. Deve ser igual a girar 180 graus. E se for falsa, então precisamos da declaração else. Vamos pegar essa linha de código e alterar o valor da função de rotação que precisamos aqui para zero Por fim, vamos usar a transição com os valores transformando 0,5 s. Então, se eu chegar ao final da página, a seta girará Se eu começar a rolar para cima , ele girará novamente. Tudo bem, então tudo funciona perfeitamente até agora. E agora temos que fazer a barra de progresso funcionar depois de abrirmos os projetos. Para isso, vamos passar para a próxima palestra. 21. Barra de progresso de design - Parte 3: Tudo bem, então, na última aula adicionamos um evento de clique à barra de progresso Podemos rolar para baixo seção por seção. Depois de clicarmos na barra de progresso, ela funciona perfeitamente na página, mas precisamos fazê-la funcionar quando clicamos no projeto e expandimos a imagem. Antes de cuidarmos disso, temos aqui um pequeno problema. Depois de abrirmos o projeto, devemos ocultar o ícone do Menu. Vou corrigir isso usando a propriedade z-index. Vamos atribuir ao invólucro de imagem do projeto a propriedade z-index com um Então, no momento, a navegação, se você não o fez, mas como você pode ver, o botão de fechamento acabou ficando atrás do projeto. Para corrigir isso, vou aumentar o valor da propriedade z-index para o botão Ocultar do projeto Vamos fazer 200. Tudo bem, agora está tudo bem e podemos continuar trabalhando na barra de progresso Como sabemos, quando clicamos no projeto, criamos uma imagem grande e seu invólucro Portanto, precisamos verificar se o invólucro da imagem foi criado ou não E então temos que fazer com que a barra de progresso funcione adequadamente. Precisamos inserir aqui um novo parâmetro. Vamos chamá-lo de grande rapper do IMG. Por padrão, vou torná-lo falso. Então, nesse caso, dizemos que estamos trabalhando na página porque o elemento não existe. Portanto, temos que criar uma declaração if else na qual temos que definir se o invólucro da imagem existe ou não Então, vamos lhe dar um grande invólucro IMG. Então, se essa condição for verdadeira, significa que o projeto está aberto e temos que inserir aqui o código que funcionará nesse caso. Mas eu prefiro inserir aqui o código da página. Então, podemos simplesmente adicionar aqui um operador NOT. Agora temos que inserir essas duas linhas. Na verdade, vou declarar essas variáveis fora da instrução if Vamos usar a palavra-chave let. Vou fazer com que as duas variáveis sejam iguais a zero. Como você pode ver, a barra de progresso funciona bem na página. Agora temos que criar uma instrução else na qual precisamos definir o código para o invólucro da imagem Na verdade, podemos pegar essas duas linhas. A altura da página será a altura de uma imagem grande. Portanto, precisamos do rapper big image dot, first element child, porque a imagem é filha do invólucro Para essa multidão, a porção será grande, AMG, rapper dot scroll top Essa propriedade nos dá o número de pixels que o conteúdo de um elemento é rabiscado verticalmente Tudo bem, agora temos que chamar uma função. Depois de clicarmos no projeto, precisamos da barra de progresso f n. E temos que passar aqui o argumento big IMG wrapper Agora, como você pode ver, a barra de progresso está atualizada. Mas quando rolarmos o projeto para baixo, ele não funcionará porque também precisamos chamar a função nessa chamada Portanto, precisamos de um grande invólucro IMG, manipulador pontos no scroll E então temos que chamar a função. Então, agora, como você pode ver, funciona bem. Mas temos aqui um pequeno problema. Uma vez que a imagem foi chamada para baixo a seta não girará Vamos verificar no console se a condição na instrução if else é verdadeira ou falsa Vou percorrer o console e rolar Bu Portanto, se rolarmos para baixo e chegarmos ao final da imagem, mais barato que o valor booleano será falso novamente, que significa que essa expressão não é igual à altura Vamos verificá-los também no console. Vou executar a parte de rolagem mais a altura da janela de visualização da página e também a altura da página Então, se rolarmos para baixo, obteremos uma diferença de dois pixels entre esses valores Na verdade, isso é meio estranho. Mas o motivo é que a imagem é um elemento embutido. E, nesse caso, temos que bloqueá-lo. Tudo bem, agora tudo funciona bem. Em seguida, precisamos fazer com que a barra de progresso funcione assim que clicarmos nela, porque no momento ela ainda funciona de acordo com a página. Precisamos dessas declarações semelhantes, caso contrário com o manipulador de eventos OnClick Vamos passar aqui a condição de não rapper de big image. Além disso, vou pegar esse código inteiro e colá-lo dentro da instrução if. Depois disso, precisamos de l instruções nas quais devemos verificar, novamente, rolar Boolean Então, se for verdade, também precisamos de um grande rolo vazio do rapper dot scroll. Com zeros, isso significa que a imagem deve ser rolada para cima E se essa condição for falsa, teremos que rolar para baixo. Então, precisamos de um grande ponto de rapper do IMG, vá até. O primeiro argumento será zero. Quanto ao segundo argumento, precisamos escolher o invólucro de Angie, os pontos Agora, se clicarmos na barra de progresso , a imagem rolará para baixo, mas sem nenhum efeito suave Para corrigir isso, temos que atribuir à propriedade do invólucro de imagem chamada comportamento de rolagem que desvalorizaria comportamento de rolagem que desvalorizaria Agora, como você pode ver, tudo funciona perfeitamente e estamos quase terminando com a barra de progresso. A única coisa que precisamos fazer é atualizar a barra de rolagem Assim que fecharmos o projeto. Na verdade, precisamos chamar a função quando clicamos no botão. Então, vamos pausar aqui a barra de progresso f n. Tudo bem, agora tudo funciona E, na verdade, com a barra de progresso, terminamos. Nos vemos na próxima palestra. 22. Refatoração de código: Tudo bem, então nas palestras anteriores, conseguimos trabalhar a barra de progresso na página Além disso, quando abrirmos o projeto, antes de prosseguirmos e começarmos a trabalhar na próxima coisa, vou refatorar nosso código de barras de progresso atual e torná-lo mais limpo Antes disso, quero corrigir um pequeno problema. Depois de clicar em qualquer um dos projetos e expandi-los. E então, se inspecionarmos a página, a barra de progresso não funcionará corretamente. Ele continuará funcionando de acordo com a página. O problema aparece quando redimensionamos a janela. Isso acontece porque, por algum motivo o evento de rolagem é acionado Para provar isso, vamos executar algo no console. Então, como você pode ver, temos aqui a rolagem, o que significa que o evento de rolagem ocorre Portanto, para corrigir esse problema, precisamos pegar o código da função nesse evento de chamada. Em seguida, declare uma nova função externa. Vou chamá-lo de scroll f n e colar o código dentro dessa função Depois disso, temos que chamar essa função com o evento scroll Então, agora, nada mudou aqui. Tudo funciona da mesma forma. Mas agora, usando a função, podemos remover eventos de rolagem e precisamos fazer isso assim que clicarmos em qualquer um dos projetos Então, precisamos aqui documentar, remover o ouvinte de eventos Em seguida, temos que especificar o evento de rolagem. E também temos que passar aqui a função que criamos, scroll f n. Então agora, quando abrirmos o projeto, a barra de progresso funcionará bem Não teremos nenhum problema depois de redimensionar a janela. Mas se fecharmos o projeto , a barra de progresso não funcionará mais. Portanto, para corrigir isso, precisamos anexar o evento de rolagem ao documento quando fecharmos o projeto Portanto, precisamos aqui document.write no ouvinte do evento. Em seguida, role o evento. E a função é chamada f n. Então, agora, se verificarmos, você verá que tudo funciona bem. E agora podemos começar a refatorar nosso código. Então, agora temos uma grande função na qual colocamos tudo relacionado à barra de progresso. Então, a primeira coisa que vou fazer é pegar um manipulador de eventos ao clicar tirá-lo da função Em seguida, vou declarar algumas variáveis fora da função Gosto de variáveis que são comuns à função e ao manipulador de eventos onclick Então, vamos colocar a parte de rolagem fora da função Além disso, precisamos declarar a variável scroll bull. Vamos defini-lo como falso. Em seguida, precisamos nos livrar da palavra-chave const a partir daqui. Além disso, precisamos declarar outra variável, o invólucro de imagem E temos que defini-lo como falso. Tudo bem? Então, como você pode ver, temos aqui um parâmetro big IMG wrapper igual a false por padrão Eu vou me livrar disso. E, em vez disso, precisamos que o invólucro de imagem seja igual ao grande invólucro IMG E agora temos que transformar em qualquer lugar o grande invólucro de Andrew em um rapper de imagens Ok, por fim, podemos transformar o manipulador de eventos onclick em listener de eventos de clique Portanto, precisamos adicionar um ouvinte de eventos. Eu não preciso me livrar desse sinal de igualdade. Tudo bem, então agora, se verificarmos, tudo funcionará perfeitamente Mas agora temos um código muito mais limpo do que o anterior. Ok, vamos passar para a próxima palestra. 23. Elementos pegajosos: Tudo bem, quando terminarmos com a barra de progresso, agora temos que seguir em frente e começar a trabalhar no próximo recurso do nosso projeto, que eu chamo de elemento fixo. Vamos dar uma olhada no projeto finalizado. Se eu passar o mouse sobre o ícone do menu ou a barra de progresso , esses elementos ficarão no cursor Mas quando movermos o cursor longe da posição padrão do elemento, os elementos voltarão para suas próprias posições. Eu acho que é um efeito agradável e legal. Então, vamos em frente e começar. Esse efeito deve acontecer em eventos de movimentação do mouse. No início, o código será escrito aqui, depois criaremos uma função e chamaremos a função aqui. Vamos inserir novos comentários. Elementos pegajosos. De elementos pegajosos. Precisamos criar um efeito. Depois de passar o mouse sobre o ícone do menu e a barra de progresso, atribuirei aos dois elementos classes adicionais Pegajoso. Em seguida, precisamos descobrir sobre qual elemento estamos passando o mouse. Para isso, podemos usar uma das funções integradas chamadas elementos de pontos. Vou criar uma nova variável. Vamos chamá-lo de elementos pairados sobre E L. Deve ser igual aos elementos de pontos do documento a partir de pontos Essa função terá dois argumentos, x e y. Vamos ver no console o que essa variável nos dá. Vamos executar elementos pairados. Então, se eu passar o mouse sobre qualquer um dos elementos na página , nós os colocaremos no console Certo? Agora temos que verificar se um elemento de Harvard contém o cluster Tiki ou não Portanto, precisamos usar uma instrução if na qual precisamos da seguinte condição. Elementos pairados, pontos, lista de classes, conteúdo de pontos. E temos que especificar aqui a classe sticky. Além disso, vamos correr para o console. Pegajoso. Agora, se eu passar o mouse sobre o ícone do menu, ficaremos presos no console. Mas se eu passar o mouse sobre a barra de progresso, não ficaremos presos no console. Isso acontece porque o círculo da barra de progresso cobre a própria barra de progresso. E não podemos passar o mouse sobre a barra de progresso. Para corrigir esse problema, podemos desativar eventos de ponteiro para o círculo da barra de progresso Vamos definir os eventos do ponteiro como num. A propósito, vamos excluir esses códigos comentados daqui. Então, agora, se eu passar o mouse sobre a barra de progresso , ficaremos presos na constante. Tudo bem, então tudo funciona bem até agora, a próxima coisa que precisamos fazer é armazenar as posições dos elementos na matriz Então, vou criar uma nova variável fora dos eventos de movimentação do mouse. Vamos chamá-la de posição do elemento pairado e configurá-la como uma matriz vazia Então, novamente, vamos armazenar aqui a posição dos elementos. Estou nas coordenadas superior e esquerda usando as propriedades offset top e offset left Antes de tudo, temos que verificar se a matriz está vazia ou não. Se estiver vazio , temos que armazenar as posições. Eu vou usar. Se forem declarações nas quais vou verificar se a matriz está vazia ou não. Portanto, precisamos comparar o comprimento do ponto de posição do elemento de Harvard com um Se essa condição for verdadeira, significa que uma matriz não contém nenhum item e temos que armazenar as posições na matriz. Portanto, precisamos que a posição do elemento pairado seja igual a uma matriz com os seguintes itens Precisamos do elemento suspenso do set top e, em seguida, dos elementos de Harvard Tudo bem, vamos testar se funciona bem. E uma vez que você corre para o console, no entanto, a posição do elemento. Então, se eu passar o mouse sobre o ícone do menu, obteremos suas posições na matriz Agora, se passarmos o mouse sobre a barra de progresso, obteremos novamente as posições do ícone do menu Como a condição na instrução if é falsa , ela não atualiza as posições na matriz. Se eu recarregar a página, a matriz ficará vazia. E se eu passar o mouse sobre a barra de progresso , obteremos aqui as posições da barra de progresso Tudo bem, agora precisamos mudar as posições superior e esquerda dos elementos pairados Então, precisamos aqui de elementos de Harvard, estilo de ponto, texto CSS Então eu vou abrir os carrapatos. A posição superior será y. Com pixels. Quanto à posição esquerda , será x. Tudo bem? Agora, se eu passar o mouse sobre os elementos, ele se moverá, mas não corretamente. Não é pegajoso. Para corrigir isso, temos que mover os elementos em -50% para cima e para o lado esquerdo Para isso, vou usar o Transform Translate com -50 por cento duas vezes Agora, as posições do ícone do menu foram alteradas, então precisamos ajustar as posições superior e direita. Na verdade, movemos os elementos em 50 por cento. Isso significa que temos que diminuir as posições em 50% da largura e da altura. A posição superior será de 3,5 RAM. Quanto à posição correta , será zero. Agora, como você pode ver, o elemento está posicionado corretamente e, quando passarmos o mouse sobre ele, ele ficará pegajoso No momento, ele se move em toda a página, mas vamos corrigir isso em breve. Vamos fazer o mesmo com a barra de progresso também. Precisamos transformar, traduzir com os valores -50 por cento duas vezes E também temos que mudar as posições inferior e direita. Precisamos de RAM total para ambas as propriedades. Agora, se eu passar o mouse sobre a barra de progresso, ela ainda não funcionará corretamente. Parece que do lado esquerdo, o mundo inteiro não acontece. O motivo é que precisamos desativar os eventos de ponteiro para os semicírculos Então, vamos usar eventos de ponteiro. Nenhum. Tudo bem, então agora tudo parece bem. Em seguida, definimos até onde queremos que o elemento se mova. Serão 100 pixels nos quatro lados. Portanto, precisamos criar uma declaração if na qual temos que definir as posições. Como você sabe, armazenamos as posições padrão na matriz. O primeiro item na matriz é a posição dos elementos pairados. Quero dizer offset top. Portanto, precisamos adicionar e subtrair 100 pixels à disposição. E você tem que compará-la com a posição superior do elemento de Harvard Então, vamos criar uma declaração if na qual precisamos da seguinte condição. Quando você passa o mouse sobre os elementos, o deslocamento do ponto superior é menor do que a posição do elemento pairado com o Portanto, se essa condição for verdadeira, teremos que retornar o elemento à sua posição padrão. Portanto, precisamos de elementos pairados. Estilo de ponto, texto css de ponto igual a uma string vazia. E também temos que limpar a matriz. Posição pairada. Deve ser igual a colchetes vazios. Agora, se eu começar a mover os elementos para cima após 100 pixels, ele voltará à sua posição padrão Tudo bem, então, neste caso, apenas fazemos o efeito funcionar apenas em uma direção Precisamos de todas as quatro direções. Vamos usar aqui o operador lógico OR. Então eu vou copiar essa condição. Agora temos que adicionar 100 pixels. E também precisamos transformar o sinal menor que em maior que. Agora, o efeito funciona quando movemos o cursor para baixo. Em seguida, temos que cuidar dos lados esquerdo e direito. Vamos usar novamente o operador lógico OR e colar a condição. No caso das direções esquerda e direita, precisamos verificar o segundo item da matriz, quero dizer deslocamento para a esquerda Então, temos que mudar o número do índice. Vai ser um. Também precisamos deslocar para a esquerda. Agora, o efeito funciona no lado esquerdo. E, por fim, precisamos da direção certa. Então, vamos copiar essa condição. Precisamos aqui mais um sinal. E também o sinal maior que. Então, como você pode ver, elemento adesivo funciona bem nos quatro lados Então, estamos quase terminando com esse efeito. Só precisamos corrigir um pequeno problema. Se eu mover, por exemplo, o ícone do Menu para cima , quando o cursor sair da página, os elementos não obterão sua posição padrão Isso acontece porque, nesse caso a distância percorrida é menor que 100 pixels e a instrução if não é executada. Portanto, precisamos atribuir aos elementos a posição padrão quando o mouse sair do elemento Então, precisamos de elementos de Harvard. Pontos na folha do mouse. Então precisamos funcionar. Vamos pegar essas duas linhas e colá-las aqui. Tudo bem, agora tudo funciona perfeitamente e temos aqui um efeito agradável e legal Antes de terminarmos esta palestra, vou mudar um pouco o código para torná-lo mais limpo Vamos criar uma nova função fora dos eventos de movimentação do mouse. Vou chamar essa função de elementos fixos. Serão necessários três parâmetros. Precisamos das coordenadas x e y e também de todo o elemento. Então eu vou pegar toda a declaração if daqui. Vamos colá-lo dentro da função. Na verdade, vou mudar essa declaração if aqui. Vamos usar lógica e operador. Depois disso, vamos chamar essa função dentro dos eventos de movimento do mouse com os argumentos x, y e elemento Harvard Então, como você pode ver, tudo funciona perfeitamente. Finalmente, terminamos. Nos vemos na próxima palestra? 24. Efeito de transformação do círculo do mouse: Tudo bem, então é hora de adicionar outro recurso ao nosso projeto, que eu acho que é um efeito legal e legal Se eu passar o mouse sobre alguns elementos, como os itens de navegação ou os projetos, também os serviços e os campos de entrada Então, o círculo da boca se transformará na forma do elemento Harvard E então, quando o mouse sair dos elementos, ele voltará à sua forma padrão, quero dizer, o círculo. Tudo bem, então vamos adicionar esses efeitos dos projetos Vou inserir novos comentários no arquivo Java logo após os elementos fixos. Vamos inserir a transformação do círculo do mouse e a transformação do círculo da boca. Em seguida, crie uma nova função. Vou chamá-la de transformação do círculo do mouse. Será necessário um parâmetro e será o elemento inteiro. Então, primeiro de tudo, vou criar esse efeito em projetos. E, no final do dia, também adicionaremos esse recurso a outros elementos. Vou adicionar novas classes a todos os projetos, como fizemos no caso dos elementos fixos. Então, vamos adicionar uma nova classe aos invólucros das imagens Vou chamar esse ponteiro de classe Enter. Em seguida, precisamos definir se o mouse acontece no elemento que tem essas classes recém-adicionadas Portanto, precisamos usar uma instrução if na qual temos que definir se o elemento pairado contém a classe pointer Portanto, precisamos de elementos pairados na lista de classes de pontos. Aquele que contém terá especificar aqui o nome da classe, ponteiro enter Vamos testar se funciona bem. Vou executar algo no console. Digamos que o ponteiro Enter. E então chame essa função no mouse. Mova eventos. Tudo bem, vamos inspecionar a página e mudar para a guia do console Então, se eu passar o mouse sobre os projetos, obteremos um ponteiro no console Mas se eu passar o mouse sobre qualquer outro elemento , nada acontecerá. Tudo bem, então tudo funciona bem até agora. Em seguida, temos que começar a trabalhar para mudar a forma do círculo da boca. Depois de encontrarmos os elementos necessários, teremos que usar o manipulador de eventos de movimento do mouse E com o movimento do mouse, temos que mudar a forma do círculo. Nós precisamos. Mova o mouse com elementos de Harvard Em seguida, temos que definir alguns estilos CSS diferentes para o círculo do mouse. Portanto, precisamos do estilo de ponto circular do mouse, textos css de pontos. Vamos começar com a largura e a altura. Na verdade, para obter a largura dos elementos Hubbard, vou usar um método chamado get bounding E temos que anexá-lo aos elementos de Harvard. Em seguida, precisamos aqui da propriedade chamada with with pixels. Da mesma forma, vamos definir a altura. Depois disso, vou definir as propriedades superior e esquerda. Podemos duplicar essa linha de código e mudar a altura para o topo E então o mesmo que precisamos para a posição esquerda também. Então, agora, se eu passar o mouse sobre os projetos , nada acontecerá porque agora a função mais circular está funcionando Então, uma vez que passamos o mouse sobre os elementos que têm o ponteiro da classe inserido, temos que parar de executar o código na função de círculo da boca E eu vou fazer isso usando um valor booleano. Vamos continuar e criar uma nova variável. Vou chamá-lo de rato, touro circulado. E eu vou defini-lo como verdadeiro. Em seguida, precisamos criar uma declaração if dentro da função de círculo da boca, onde temos que verificar se o booleano de recuperação do mouse é verdadeiro ou falso Portanto, se essa condição for verdadeira, teremos que executar essa linha de código. Na verdade, vou usar aqui um operador lógico e em vez da instrução if Depois disso, temos que alterar o valor dessa variável booleana dentro da dessa variável booleana dentro função de transformação do círculo da boca E temos que torná-lo falso. Então, no momento, ainda está, nada está acontecendo porque, por padrão, o círculo do mouse tem opacidade igual a zero. E paramos de executar o código onde ele tem a opacidade Portanto, precisamos instituir uma nova opacidade. Agora o código está funcionando, mas é claro que não é isso que queremos. O círculo do mouse, por padrão, tem de transformação com -50 por cento Na verdade, não precisamos disso. Temos que tornar os valores da função de translação zero. Portanto, precisamos transformar translação e precisamos de zero para ambas as direções. Agora, a posição do círculo é alterada. Em seguida, vou parar a animação porque, como eu disse, o círculo está se animando Então, precisamos aqui de animação, nenhuma. Então, agora o círculo não é mais animado e também obtém a largura e a altura dos elementos pairados e também obtém a largura e a altura dos elementos pairados Em seguida, temos que definir o raio da borda. Para isso, vou usar um dos métodos chamados gets computed style Temos que especificar aqui os elementos pairados. E então temos que usar uma propriedade chamada raio de borda. Agora, se eu passar o mouse sobre o projeto , o círculo do mouse terá a forma dos elementos pairados Na verdade, tudo funciona bem no Google Chrome. Mas se eu verificar o projeto no Mozilla Firefox , você verá que, por algum motivo, o raio da borda não funciona Vamos verificar no console o que o raio de borda nos fornece nos dois navegadores Vou percorrer o console. Para o raio. No Google Chrome, estamos recebendo cinco pixels. Mas no Mozilla Firefox, estamos recebendo uma string vazia Esse é um pequeno problema para o Mozilla Firefox. E a solução que eu pensei foi mudar o raio da borda para o raio da borda de qualquer um dos cantos Porque todos os elementos nos quais vamos usar esse fato têm o mesmo raio de borda nos quatro lados Então, vou usar aqui, digamos borda, parte inferior, esquerda, raio. Vamos verificar se isso funciona bem em ambos os navegadores. Então, como você pode ver, tudo funciona bem. Tudo bem, antes de prosseguirmos, vou resolver uma questão política Se eu começar a passar o mouse na parte inferior do projeto , a forma do osso circular muda porque agora estamos passando o mouse sobre a imagem Portanto, precisamos desativar os eventos de ponteiro para as imagens do projeto Então, vamos atribuir eventos de ponteiro de imagem ao projeto. Nenhum. Tudo bem, então agora estava tudo bem. Em seguida, vou adicionar uma transição a esse efeito. Precisamos aqui de algumas propriedades diferentes. Vamos começar com, com, vou usar sua duração de transição, 0,5 s. Em seguida, temos a altura do que as posições superior e esquerda. Em seguida, vem a transformação. E, finalmente, para o raio. Ok, então agora, como você pode ver, temos um resultado muito melhor. Mas ainda precisamos escolher alguns problemas. Uma vez que o mouse deixa os elementos, temos que mudar de volta a forma do círculo. Para isso, temos que usar o manipulador de eventos ao vivo do mouse. Precisamos anexá-lo ao elemento de Harvard. Quer que o mouse viva os elementos, temos que transformar o valor do círculo da boca booleano em verdadeiro Agora, se o mouse sair do projeto, ele obterá a forma padrão da bagagem Em seguida, vou corrigir outro problema. Se rolarmos a página, o círculo do mouse e os elementos não corresponderão Portanto, precisamos usar o manipulador de eventos de rolagem e anexá-lo ao documento Depois de rolar a página, a posição superior do círculo do mouse e os elementos de Harvard devem Mas isso deve acontecer quando o valor booleano for falso, que significa que estamos passando o mouse sobre o elemento que tem a resposta do ponteiro da classe Então, precisamos aqui de uma declaração if. E como condição, não precisamos girar o mouse em um círculo booleano. Portanto, se essa condição for verdadeira, as posições superiores do círculo da boca e dos elementos pairados devem Portanto, precisamos do círculo do mouse, ponto, estilo topo do ponto iguais aos elementos de Harvard Não se limite. O cliente tem um ponto reto no topo com pixels. Tudo bem, agora o problema está resolvido. Em seguida, vou resolver outro problema. Se eu clicar no projeto e expandir, a forma do projeto ainda será exibida. Portanto, precisamos nos livrar dele com um clique. Temos que fazer com que a opacidade do mouse se torne zero quando clicarmos no projeto Portanto, precisamos inserir o estilo de ponto do círculo da boca, ponto, opacidade igual a zero Tudo bem, então agora estava tudo bem. E a última coisa que precisamos fazer é criar esse efeito com outros elementos também. Vou usar novamente o ponteiro de classe Enter. Vamos continuar e adicioná-lo aos itens de navegação. Em seguida, precisamos adicionar esse copo aos serviços. Por fim, vamos adicionar a classe aos campos de entrada e ao botão de envio Vamos verificar esse efeito com os itens de navegação. Então, como você pode ver, tudo funciona bem. Então vou verificar isso com os serviços. Como você pode ver, temos aqui um pequeno problema, na verdade o mesmo problema que tivemos com os projetos. Os serviços incluem os elementos de extensão e temos dois eventos de ponteiro desativados para as extensões. Então, vamos atribuir a eles eventos de ponteiro, nenhum. Então, agora o problema está resolvido. Quanto aos campos de entrada, tudo funciona bem. Ok, é isso mesmo. Terminamos de trabalhar no recurso. Em seguida, precisamos começar a tornar o projeto responsivo a diferentes tamanhos de tela Então, vamos seguir em frente. 25. Tornar o projeto responsivo - parte 1: Ok, então terminamos de construir nossos projetos. Estou em todas as seções criadas. E agora, como já dissemos, precisamos tornar nosso projeto responsivo a diferentes tamanhos de tela O projeto é construído em um tamanho de tela extra grande. Tamanho da tela com 1920 pixels de largura e 1080 pixels de altura E temos que torná-lo responsivo a um tamanho de tela menor. Ao longo desta parte, usaremos consultas de mídia CSS. Antes de começarmos a escrever o código, vamos inspecionar a página Mude para o modo responsivo e verifique o projeto em diferentes tamanhos de tela Então, como você pode ver, ele também fica bem em telas menores. Tudo bem. Já preparei diferentes pontos de interrupção nos quais faremos algumas mudanças. Então, eu não vou perder tempo em encontrá-los. Em geral, você precisa fazer as alterações e definir o ponto de interrupção em que o projeto precisa delas. Acho que essa é a melhor maneira de tornar seu projeto responsável. Então, estamos prontos para começar. Vamos inserir novos comentários nesse arquivo CSS para responder. Portanto, o primeiro ponto de interrupção no qual faremos algumas alterações será de 1.500 pixels Nos pontos de interrupção. Vou diminuir os círculos no patamar. Então, vamos continuar e criar uma consulta de mídia CSS. Em seguida, especifique a largura máxima como 1.500 pixels. Em seguida, vou selecionar o círculo e definir a largura e a altura, ambas com 15 rampas. Além disso, também vou tornar esse círculo principal menor. Então, vamos selecioná-lo e definir sua largura e altura, ambas como 45. Aluguel. Além disso, precisamos diminuir o tamanho do círculo principal quando passarmos o mouse sobre ele Então, vamos seguir em frente e selecionar o círculo principal com o mouse. E então faça largura e altura. 55 rampa. Além disso, vou mudar o tamanho da imagem em si. Então, vamos selecionar o círculo principal, IMG, e definir a largura e a altura Ambos até 160%. Tudo bem, então isso é tudo em relação à primeira seção, vamos continuar e tirar um ano do texto Sobre mim Vou diminuir o tamanho da fonte do texto. Então, vamos selecionar o texto Sobre mim, seguido pelos elementos de extensão e definir o tamanho da fonte para 11 de aluguel. Isso é tudo sobre a segunda seção. Em seguida, vem a seção do projeto, mas não precisamos tocá-la agora. A próxima coisa que precisamos fazer é aumentar o espaço entre os serviços e a seção de contato. Então, vamos selecionar a seção quatro e definir a margem inferior para virar a rampa. Além disso, precisamos diminuir o tamanho da fonte do serviço Batson e também os textos do serviço Então, vamos seguir em frente e selecionar o serviço btn com span. Faça com que o tamanho da fonte seja nove rem. E também selecione os textos do serviço e defina o tamanho da fonte para chamar a RAM. Tudo bem, então é isso em relação a esse ponto de interrupção, tudo parece bem Podemos seguir em frente e encontrar o próximo ponto de interrupção, que será de 1.350 pixels Vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 1.350 Nos pontos de interrupção, vou diminuir o tamanho do Batson principal Selecione o btn principal e defina sua largura e altura, ambas para 12,5 g. Tudo bem, depois disso, vou esconder todos os círculos Então, vamos selecionar um círculo e atribuí-lo a ele. Não exibir nenhum. Tudo bem, então, como você pode ver, os círculos estão ocultos Em seguida, vou mudar as posições da barra de progresso porque, como você pode ver, ela cobre parcialmente os textos. Então, vamos seguir em frente e selecionar a barra de progresso. Vou definir sua posição correta para uma RAM. Quanto à posição inferior, vamos torná-la zero. Ok, então a barra de progresso está posicionada e a última coisa que teremos que fazer nesse ponto de interrupção é diminuir o tamanho da fonte do texto Sobre mim Porque todas as outras seções parecem bonitas. Então, vamos selecionar o texto Sobre mim, seguido pelos elementos de extensão, e definir o tamanho da fonte para dez rampa. Tudo bem, isso é tudo sobre esse ponto de interrupção. Vamos seguir em frente e encontrar o próximo, que terá 1.150 pixels Então, vamos criar uma nova consulta de mídia CSS com largura máxima de 1.150 Então, a primeira coisa que vou fazer é diminuir o tamanho da fonte do elemento HTML. Isso afetará os tamanhos de todos os elementos. Então, vamos definir o tamanho da fonte do elemento HTML para 55% Então, é possível ver que todos os elementos ficaram menores. E com a linha de código, temos um resultado muito melhor. Em seguida, vou esconder o mouse e o ponto do mouse, porque em telas menores não temos mais um mouse. Então, vamos selecionar os dois elementos, círculo do mouse e ponto do mouse. E atribuído a eles não exibem nenhum. Tudo bem, depois disso, vamos cuidar dos itens de navegação Eu vou diminuir o espaço entre eles. Então, vamos selecionar o link da barra de navegação e atribuir a ele uma margem com os valores zero na parte superior e inferior e duas RAM nos lados esquerdo e direito Ok, a seguir, vamos diminuir o tamanho do círculo principal. E também vou diminuir seu tamanho ao passar o mouse. Então, vamos selecionar o círculo principal e definir a largura e a altura, ambas como quatro para Ram. Então eu vou duplicar esse código aqui, passe o mouse. E também mude os valores de que precisamos aqui. 45 corridas. Ok, é isso sobre a primeira seção. Em seguida, vou diminuir o tamanho do texto acima de mim. Então, vamos selecionar esses elementos, seguidos de extensão e definir o tamanho da fonte para 7,5 redondos. Tudo bem, como você pode ver, o texto fica menor. Parece bom. Em seguida, vou cuidar do projeto. Quero dizer, uma vez que a expandimos, você pode ver que temos um grande espaço nos lados esquerdo e direito da imagem. Então, vamos cuidar disso. Vou selecionar projetos IMG. E vou definir envasamento como sete rem na parte superior e inferior e 11 rem nos lados esquerdo e direito Além disso, precisamos mover o botão de fechamento um pouco para o lado direito. Então, vamos selecionar project hide btn e definir a posição correta para execução Tudo bem, então o projeto parece bom. Em seguida, vou cuidar da seção de Serviços. Primeiro, vamos diminuir a altura do botão de serviço. Selecione o serviço btn. E disse oi para 12 rem. Em seguida, vou diminuir o tamanho da fonte dos elementos de extensão e também tributar esse serviço Então, vamos selecionar o serviço btn, span, definir o tamanho da fonte para oito RAM Quanto ao texto do serviço, vou fazer com que o tamanho da fonte seja de 3,5 rampa. Tudo bem, então a seção Serviços está bonita. Além disso, não precisamos alterar a seção de contato. Quanto à apresentação de slides dos ícones de mídia social, vou diminuir o espaço na parte superior e também vou criar algum espaço na Então, vamos selecionar a margem definida pela apresentação de slides como cinco rem na parte superior e inferior e zero nos lados esquerdo e direito Tudo bem, então é isso. Em relação a esses pontos de interrupção, tudo parece bom. Portanto, temos que seguir em frente e encontrar o próximo ponto de interrupção. E vamos fazer isso na próxima palestra. 26. Tornar o projeto responsivo - parte 2: Tudo bem, então já criamos alguns pontos de interrupção diferentes O último tinha 1.150 pixels. Vamos seguir em frente e encontrar o próximo ponto de interrupção. Então, o próximo será de 900 pixels. Como você pode ver, algumas dessas seções estão confusas. Então, vamos continuar e criar uma nova consulta de mídia CSS. Vamos especificar aqui a largura máxima como 900 pixels. Então, a primeira coisa que vou fazer é mudar a posição do ícone do menu. Vamos selecioná-lo e definir sua posição correta para menos quatro RAM Depois disso, vou personalizar os itens de navegação. Vamos selecionar um aplicativo ou link. Primeiro de tudo, vamos mudar o tamanho da fonte, torná-la 1,5 RAM. E também vou mudar o espaço entre os itens. Vamos definir a margem para 0,1. Corra. Tudo bem, em seguida, vou mover o texto do recurso para perto das bordas da página Vamos selecionar o primeiro texto e definir a margem como zero na parte superior. Então nossa linha no lado direito, zero na extremidade inferior, cinco rem no lado esquerdo. Então eu vou duplicar esse código. Altere também o nome da classe que precisamos aqui no texto em destaque e também altere os valores da propriedade de margem. Precisamos de 0,5 rem e, novamente, 0,0. Tudo bem, isso é tudo sobre a primeira seção. Em seguida, vou mover os cabeçalhos das seções um pouco para o lado esquerdo. Então, vamos selecionar o título da seção. Como você sabe, é um nome de classe comum. Vamos definir a posição esquerda para cinco corridas. Tudo bem, depois disso, vou cuidar do texto acima Então, vamos selecionar o texto Sobre mim, seguido pelo elemento span e definir o tamanho da fonte como 5,5 vezes. Além disso, vou deixar a fonte um pouco mais clara para tornar o texto visível em dispositivos menores. Vamos definir a cor para um ccc cinza claro. Tudo bem, a seguir, vou personalizar esta seção de serviços Vamos diminuir a altura do botão de superfície e também vou diminuir o tamanho da fonte. Então, vamos selecionar o serviço btn e definir a altura para nove RAM. Em seguida, precisamos selecionar o serviço btn span. Vamos mudar o tamanho da fonte, torná-la com seis RAM. E também precisamos selecionar textos de serviço. Vamos definir o tamanho da fonte para três pontos para executar. Tudo bem, então vamos considerar a seção Serviços. Parece bom. E, na verdade, no ponto de ruptura, terminamos. Vamos encontrar o próximo, que terá 700 pixels. Então, vamos criar uma nova consulta de mídia CSS com a largura máxima de 700 Então, a primeira coisa que vou fazer é diminuir o tamanho da fonte do elemento HTML. Vamos definir o tamanho da fonte para 50%. Como você pode ver, os elementos ficaram menores. E quase todas as seções parecem boas, exceto a seção de contato. Precisamos diminuir a largura dos campos de entrada. Então, vamos selecionar Entrada do Formulário de Contato e definir a largura para 50 linhas. Tudo bem, é isso em relação a esse ponto de interrupção Vamos seguir em frente e personalizar o projeto no próximo Portanto, o próximo ponto de interrupção será de 550 pixels. Vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 550 Novamente, vou diminuir o tamanho da fonte do elemento HTML. Então, vamos selecioná-lo e definir o tamanho da fonte para 40%. Em seguida, vou mudar o tamanho da imagem dentro do círculo principal. Então, vamos selecionar o círculo principal seguido pela tag IMG. Vou definir a largura e a altura, ambas em 180 por cento Tudo bem, então estamos emprestando, parece Além disso. Não precisamos mudar a segunda e a terceira seções. Quanto aos serviços, vou diminuir novamente o tamanho da fonte. Então, vamos selecionar o serviço btn com span. Defina o tamanho da fonte para 4,5 RAM. Em seguida, selecione o texto do serviço e defina esse tamanho de fonte como três rem. E também vou mudar um pouco a cor do texto da superfície. Vamos fazer bipar, bipar, bipar. Tudo bem, vamos ver sobre a seção Serviços. Em seguida, vou cuidar da seção de contato. Vamos diminuir a largura dos campos de entrada. Novamente. Vou selecionar as entradas do formulário de contato e depois definir a largura Faça com que seja executado. Tudo bem. A última coisa que vou fazer no break point é tornar os ícones de mídia social um pouco menores. Em primeiro lugar, vou selecionar uma apresentação de slides de rapper. Vamos mudar sua largura, torná-la 45 RAM. Em seguida, selecione Imagem e altere o preenchimento. Vou definir o preenchimento como zero na parte superior e inferior e a marca 1.1 nos lados esquerdo e direito Tudo bem, então é isso. Com esse ponto de interrupção, terminamos e agora é hora de personalizar o projeto No último ponto de interrupção, que será de 400 pixels Vamos criar uma nova consulta de mídia CSS com uma largura máxima de 400 Em primeiro lugar, mais uma vez, vou diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 35%. Em seguida, vou mudar a posição do logotipo. Vou colocá-lo um pouco abaixo e também no centro do empréstimo Então, vamos selecionar Logo. Primeiro de tudo, vamos mudar o tamanho da fonte, torná-la 1,7 rem. Então, para colocá-lo um pouco abaixo, vou mudar a posição superior. Vamos fazer com que seja 13 RAM. E então, para centralizar os elementos horizontalmente, precisamos definir a posição esquerda para 50 por cento. Além disso, para uma centralização perfeita, precisamos transformar, traduzir x -50 por cento. Então, vamos ver que o logotipo está perfeitamente centralizado. Em seguida, vou colocar o botão ou também no centro Então, vamos selecioná-la e definir a propriedade justify content como central No momento, a barra de navegação não está perfeitamente centralizada porque por padrão, ela tem um pequeno preenchimento no lado Então, precisamos nos livrar disso. Vamos definir o preenchimento como zero. Tudo bem, isso é tudo sobre navegação. Em seguida, vou cuidar do círculo principal e da imagem dentro dele. Vamos dar uma olhada no círculo principal e diminuir sua largura. Faça com que seja 38 RAM. Em seguida, também vou diminuir sua largura ao passar o mouse. E mude com make it 42 RAM. E também precisamos selecionar a imagem. Vamos definir a largura e a altura, ambas em 200%. Portanto, o pouso e o resto das seções parecem mercadorias. A única coisa que vou fazer é diminuir o tamanho da fonte do título do formulário. Porque quando focamos no assunto ou na mensagem, o layout fica um pouco confuso Então, vamos mudar o tamanho da fonte. Selecione um título. Defina o tamanho da fonte para cinco rampas. Tudo bem, então, finalmente, terminamos. Nosso projeto é responsivo. Se verificarmos, você verá que o projeto fica bem em diferentes tamanhos de tela. Veio. A próxima coisa que precisamos fazer é validar os campos de entrada Porque depois disso, vamos hospedar o projeto e colocá-lo no ar. Então, vamos seguir em frente. 27. Validação de formulários: Tudo bem, uma vez que tornamos nossos projetos responsivos a diferentes tamanhos de tela, agora é hora de passar para a próxima parte e adicionar ao nosso projeto e outros recursos Vou validar nosso formulário porque eventualmente, vamos hospedar o projeto e torná-lo leve Vamos dar uma olhada no projeto finalizado. Portanto, todos os quatro campos de entrada, incluindo a área de texto, são validados. Se eu deixá-los vazios e clicar no botão enviar , receberemos mensagens de erro. Na verdade, o formulário é validado de maneiras diferentes. Recebemos mensagens de erro se deixarmos os campos de entrada vazios. Além disso, se não protegermos os requisitos de comprimento. Por exemplo, se eu inserir apenas um caractere no primeiro campo de entrada , receberemos uma mensagem de erro diferente. Além disso, se perdermos o sinal de adição no campo de e-mail , também receberemos uma mensagem de erro diferente informando que o e-mail não é válido. Vamos começar a trabalhar na validação do formulário. Primeiro de tudo, precisamos fazer algumas coisas no arquivo HTML. Vou atribuir os atributos IgA a todos os campos de entrada do formulário O primeiro será o nome. Vamos copiá-lo e colá-lo para o e-mail. Em seguida, teremos assunto e mensagem. Tudo bem, a seguir, vou adicionar um parágrafo após cada campo de entrada Esses elementos serão usados para exibir a mensagem de erro. Então, vamos abrir a tag P com a mensagem da classe. Com a mensagem de erro de conteúdo. Tudo bem, isso é tudo em relação ao HTML agora, antes de começarmos a escrever um pouco de JavaScript, vou estilizar o parágrafo como parte da seção de contato, então vou inserir o código na quinta seção Vamos criar uma nova validação de formulário de comentários. E de validação de formulários. Em seguida, selecione Parágrafo. Em primeiro lugar, vou definir o tamanho da fonte. Vamos fazer uma referência à RAM. Então eu vou deixar a fonte mais ousada. Vamos definir a espessura da fonte para 700. Também mude a cor. Vou usar sua cor F phi phi e, phi e. Então aqui temos a Vou colocá-lo em maiúsculas e também vou colocá-lo no lado esquerdo Então, vamos transformar o texto em maiúsculas. Além disso, vou criar algum espaço entre as letras. Vamos configurá-lo para 0,1 de execução. E então eu vou colocar o texto no lado esquerdo. Então, vamos usar a margem com os valores 01 marca e, novamente, zero. Tudo bem, isso é tudo sobre o CSS agora. Agora podemos começar a escrever um pouco de JavaScript. Vamos prosseguir e inserir novos comentários no arquivo. Precisamos de validação de formulários. Em seguida, fim da validação do formulário. Em primeiro lugar, vou criar algumas variáveis diferentes para selecionar todos os elementos necessários. Vamos começar com um formulário, criar uma nova variável, chamá-la de formulário. Em seguida, selecione os elementos do formulário usando o método querySelector. Vamos especificar aqui o formulário de contato com o nome da turma. Em seguida, vou selecionar o primeiro campo de entrada. Vamos criar uma nova variável, chamá-la de nome de usuário. Nesse caso, vou selecionar os elementos usando id. Quer dizer, vou usar o método chamado get element by ID. Precisamos especificar aqui o nome do ID. Vamos duplicar essa linha de código três vezes. Portanto, o próximo campo de entrada será para e-mail. Então teremos um assunto. Em seguida, a próxima será uma mensagem. Além disso, vou selecionar todas as mensagens. Quero dizer os parágrafos. Então, vamos criar uma nova variável, chamá-la de mensagens e, em seguida, selecionar todos os parágrafos usando o seletor de consulta, todo Tudo bem, então todas as variáveis necessárias estão preparadas. E a próxima coisa que vou fazer é criar uma função que nos permitirá verificar se os campos de entrada estão vazios ou não. Então, vamos criar uma nova função. Vou chamá-lo de verifique os campos obrigatórios. Essa função aceitará um parâmetro que será uma matriz. E incluirá todos os campos de entrada Portanto, para verificar se os campos de entrada estão vazios ou não, primeiro precisamos percorrer a matriz. E para isso, vou usar um dos métodos auxiliares de matriz chamado for-each Será necessário um parâmetro. Será a função de retorno de chamada, que por si só pegará um parâmetro, os campos de entrada atuais da matriz Então, agora precisamos verificar se o valor da entrada está vazio ou não. Portanto, precisamos usar a instrução if. E como condição, precisamos comparar o valor do ponto de entrada com a string vazia. Na verdade, o valor do ponto de entrada não é suficiente aqui porque se inserirmos algo nos campos de entrada com um espaço em branco , esse espaço em branco será reconhecido como a parte do valor que não precisamos Então, para evitar esse tipo de coisa, quero dizer, para ignorar o espaço em branco, podemos usar um dos métodos chamados Se essa condição for verdadeira, teremos que exibir uma mensagem de erro. Para fazer isso, vou criar uma nova função. Vamos chamar isso de erro. Serão necessários dois parâmetros. O primeiro deles serão os elementos de entrada. Quanto ao segundo , será uma mensagem. Tudo bem, então a função é criada. Agora temos que ter acesso ao parágrafo e definir esse conteúdo. Além disso, precisamos ocultar a mensagem de erro por padrão e exibi-la assim que tivermos o erro. Então, vamos ao arquivo CSS e aos parágrafos de altura por padrão Para isso, vou usar visibilidade oculta e opacidade zero. Em seguida, vou definir uma nova classe, que será adicionada ao parágrafo quando eles acusarem, vou chamá-la de erro do que precisamos de mensagem E, na verdade, não precisamos de espaço aqui porque precisamos adicionar esse cluster, o elemento em si, e não seus pais. Para exibir a mensagem, precisamos que a visibilidade seja visível. E também a de opacidade. Além disso, vou usar a transição para exibir a mensagem de erro sem problemas. Vamos usar a opacidade com a duração de 0,3. Tudo bem, agora precisamos adicionar essa classe ao parágrafo E também temos que definir o conteúdo do texto da mensagem. Para ter acesso ao parágrafo, vou usar uma das propriedades chamada irmão do próximo elemento, porque o parágrafo é irmão do elemento de entrada Portanto, precisamos inserir ponto no próximo elemento, lista de classes de pontos irmãos E temos que adicionar erro de classe à lista de classes. Quanto ao TextContent, será a mensagem que usaremos aqui como parâmetro Portanto, precisamos inserir o ponto ao lado do irmão do elemento. Duvide que TextContent seja igual à massa. Ok? Portanto, a função da mensagem de erro está pronta. Podemos chamá-lo abaixo, dentro da instrução if. Serão necessários dois argumentos. O primeiro será uma entrada. Quanto à segunda , será a mensagem. Vamos abrir os backticks. Primeiro. Vou lhe passar o ID de entrada. Isso nos dará o nome do campo de entrada. E então o texto a seguir será, é obrigatório. Ok, então está tudo pronto. Só precisamos adicionar um ouvinte de eventos aos elementos do formulário e chamar a função de verificação de campos obrigatórios assim que enviarmos o formulário Portanto, precisamos formar o ouvinte de eventos de adição. O tipo de evento será enviado. Também precisamos aqui da função de retorno de chamada com objeto de evento. A primeira coisa que vou fazer é evitar a ação padrão do formulário. Precisamos evitar a inadimplência. E então precisamos chamar a função de verificação dos campos obrigatórios. Como você sabe, essa função tem um parâmetro, que é a matriz dos campos de entrada. Então, como argumento, precisamos passar aqui uma matriz dos campos de entrada. Quero dizer, precisamos passar seu nome de usuário. e-mail Assunto e mensagem do e-mail. Tudo bem, agora, se eu deixar os campos de entrada vazios e clicar no botão enviar , receberemos mensagens de erro Do que se eu preencher o campo de entrada. E clique novamente no botão enviar, a mensagem de erro não seja ocultada. Na verdade, não é isso que queremos. Precisamos criar outra função para obter sucesso a fim de remover a mensagem de erro. Então, vamos criar uma nova função, chamá-la de sucesso. Será necessário um parâmetro, será a entrada. Então, dentro dessa função, temos que remover o erro de classe do parágrafo. Portanto, temos que ter acesso ao parágrafo usando o ponto de entrada. Irmão dos próximos elementos. Então precisamos de uma lista de classes. E temos que remover o erro de classe. Em seguida, precisamos chamar essa função quando o campo de entrada não estiver vazio. Portanto, precisamos criar uma instrução else e chamar a função success com a entrada do argumento. Tudo bem? Agora, se eu clicar no botão enviar , receberemos mensagens de erro. E se eu sentir o campo de entrada e clicar novamente no botão enviar, a mensagem de erro removerá aquela parte da primeira parte da validação. Podemos verificar se os campos de entrada estão vazios ou não. Agora é hora de seguir em frente e verificar o tamanho dos caracteres que inserimos no campo de entrada. Para isso, vou criar outra função. Vamos chamá-lo de verifique o comprimento. Essa função terá dois parâmetros. O primeiro também será uma entrada. O segundo será o número mínimo de caracteres. Portanto, se o tamanho do valor do campo de entrada for menor que o número mínimo de caracteres , devemos exibir a mensagem de erro. Portanto, precisamos criar uma declaração if na qual devemos comparar o tamanho do valor do campo de entrada com o número mínimo de caracteres. Portanto, precisamos inserir pontos, valor, pontos, três pontos, comprimento menor Portanto, se essa condição for verdadeira, teremos que exibir a mensagem de erro. Portanto, temos que chamar a função de erro. Como você sabe, são necessários dois argumentos. A primeira é a entrada. Pois a segunda é a mensagem. Portanto, precisamos inserir aqui o ID do ponto em que o imposto será, deve ser. Pelo menos. Temos que passar aqui a média do segundo parâmetro. E então precisamos de personagens. Se essa condição for falsa, teremos que chamar a função de sucesso. Portanto, precisamos da declaração L do que o sucesso da função com a entrada do argumento. Tudo bem, finalmente, temos que chamar a função de comprimento de verificação para todos os campos de entrada , exceto o e-mail Porque para a validação do e-mail, criaremos uma função separada Então, é chamado de comprimento do cheque. Primeiro, para o nome de usuário. O número mínimo de caracteres será, digamos, dois. Vamos duplicar essa linha de código duas vezes. O próximo campo de entrada será assunto. E então teremos mensagem como o número mínimo de caracteres para a mensagem. Eu vou passar dos dez. Tudo bem, vamos verificar se tudo funciona bem Vou responder apenas um caractere nos primeiros campos de entrada. Se eu clicar no botão enviar , não receberemos nenhuma mensagem de erro. Para o primeiro campo de entrada. Isso acontece porque a instrução else funciona na função de verificação de combustível necessária. Então, precisamos nos livrar disso. Agora, se eu testar novamente, receberemos a mensagem correta. E, na verdade, o mesmo acontecerá com o resto dos campos de entrada. Tudo bem, agora é hora de cuidar das entradas de e-mail. Como eu disse, vamos criar uma função separada. Vamos chamá-lo, verifique o e-mail Esta função terá um parâmetro. Será a entrada. Então, para validar o endereço de e-mail, temos que usar expressões regulares Na verdade, não vou escrevê-los manualmente porque eles consistem em muitos caracteres diferentes. E isso pode ser muito confuso. Podemos simplesmente pesquisá-lo no Google. Vamos pesquisar por JavaScript, por e-mail Vamos ao primeiro link , pegar essas variáveis aqui e colá-las na função. Vamos mudar o nome da variável. Vou chamá-lo de reg X. Agora temos que verificar se o valor de entrada do e-mail corresponde a esses requisitos. Para isso, precisamos usar as instruções if e, em seguida, precisamos usar um método chamado test Vamos anexá-lo à variável reg X. E como argumento, temos que passar aqui um valor de entrada novamente com o método tree. Então, se isso for verdade, então teremos sucesso. E se for falso, precisamos de l instruções nas quais devemos chamar a função de erro com entradas e com uma mensagem O e-mail não é válido. Tudo bem, finalmente, temos que chamar essa função com o argumento email Além disso, vou mudar o tipo dos elementos de entrada porque, como você sabe, por padrão, o HTML tem a validação para o e-mail E, na verdade, não precisamos disso agora. Então, mudou o tipo, transforme-o em texto. Ok, agora, se eu inserir alguns caracteres que não se parecem com o endereço de e-mail , receberemos uma mensagem de erro dizendo que o e-mail não é válido. Mas se eu entrar aqui, digamos john@gmail.com , não receberemos nenhuma mensagem de erro. Tudo bem, então é isso em relação à validação do formulário. Antes de terminarmos esta palestra, farei mais uma coisa, conforme você vê, uma vez que focalizemos as entradas, do que os caracteres inseridos anteriormente serão exibidos Para desativá-lo, podemos usar um dos atributos chamado preenchimento automático com um valor Ok, então agora é possível ver que tudo parece perfeito. Vamos seguir em frente. 28. Hospedagem de sites no Netlify: Tudo bem, então, na palestra anterior, validamos nosso formulário e a E agora, como eu disse, é hora de hospedar nosso site e colocá-lo no ar. Para fazer isso, usaremos um dos serviços mais populares e comumente usados chamado Netlify É uma ferramenta muito boa hoje em dia. Você pode ter uma conta gratuita com vários recursos diferentes e hospedar seu site com muita facilidade. Você também pode ter uma conta Pro com alguns recursos adicionais. A primeira coisa que preciso fazer é me cadastrar no site. Como você pode ver, existem algumas maneiras diferentes de se inscrever. Então você pode se apressar e se registrar. Já nos inscrevemos, então não vou perder tempo com isso porque é um processo simples. Então, no momento, não temos nenhum site hospedado aqui. Eu vou fazer isso passo a passo com você. Então, a primeira coisa que vou fazer é abrir o prompt comum e executá-lo como administrador Na verdade, se você estiver usando Mac, precisará usar a palavra-chave sudo para executar os comandos como administrador e, em seguida, acessar os projetos No nosso caso, o projeto é colocado na área de trabalho. Então, primeiro, precisamos sair dessas duas pastas. Eu vou dirigir a cidade com a barra dianteira. E então precisamos do caminho da pasta. Se você não conhece a parte da pasta do projeto , pode abrir o código de entrevistas do terminal e ele fornecerá a parte do projeto automaticamente. Vou copiar o caminho. Na verdade, no meu caso, todos os nomes ordinais consistem em apenas uma palavra Mas se você tiver os nomes das pastas com várias palavras, precisará envolvê-los com aspas. Vamos para a pasta do projeto. Agora temos que instalar o Netlify usando o gerenciador de pacotes node npm Para isso, você deve ter instalado o Node JS. Caso contrário, você não poderá usar o npm. Para instalar o NodeJS, você precisa acessar o Node js.org Em seguida, baixe qualquer uma das versões aqui e instale. Depois de instalar o Node.JS, você poderá usar um Node Package Manager Portanto, para instalar o Netlify, você precisa executar o seguinte comando, npm I, que significa install, dash g, Netlify, dash g Isso levará algum tempo. Então, uma vez instalado, temos que criar um arquivo de configuração chamado Netlify dots TO e l. Portanto, este é um arquivo de configuração que especifica como o Nullify constrói e implanta seu site. que especifica como o Nullify temos que criar um arquivo de configuração chamado Netlify dots TO e l. Portanto, este é um arquivo de configuração que especifica como o Nullify constrói e implanta seu site. Nesse arquivo, temos que especificar a pasta Build. E então temos que definir um diretório que conterá o arquivo HTML pronto para implantação No nosso caso, não temos aqui nenhuma pasta separada para nosso arquivo HTML. Portanto, podemos simplesmente especificar o diretório da seguinte maneira. Precisamos publicar para ser igual a um ponto com aspas. Ok? A próxima etapa é inicializar o Netlify Para isso, temos que executar o Netlify nele. Agora, ele pede para criar e implantar o site manualmente ou conectar primeiro o diretório ao GitHub No momento, vou escolher criar e implantar esse site manualmente Em seguida, ele pergunta o nome da equipe. Você precisa usar a tecla de seta superior e entrar. A próxima etapa é o nome do site. Você pode deixá-lo em branco para algum nome aleatório e nullify o gerará para você Ou você pode usar algum nome exclusivo. No nosso caso, vou chamar o código do site e criar um site de portfólio. Agora, se verificarmos nossos projetos, você encontrará aqui uma nova pasta chamada Netlify, na qual temos um arquivo JSON que inclui o ID exclusivo do Certo? Agora, se recarregarmos a página , chegaremos aqui, nosso site de portfólio na seção do site Em seguida, temos que executar o Netlify, deploy. Isso nos dará um rascunho de URL. E se você acha que tudo fica bem no seu rascunho de URL , você pode executar o Netlify, deploy dash, dash, prod Finalmente, obteremos aqui a URL do site. Se acessarmos esse URL , veremos nosso site ativo no navegador para que todos possam acessá-lo. Tudo bem, então, quando o site estiver ativo, agora vou fazer o formulário funcionar Quero dizer, uma vez que inserimos as informações nos campos de entrada e enviamos o formulário, devemos recebê-las em nosso painel do Netlify Vamos dar uma olhada na documentação dos formulários. Vou pesquisar formulários do Netlify Então, aqui temos a documentação Você pode conferir e aprender como configurar os formulários. Vamos para o arquivo index.html. Precisamos fazer aqui mais algumas coisas. Temos que adicionar dois atributos aos elementos do formulário. O primeiro será ação. Com um valor postado do que precisamos , os dados amplificam o valor verdadeiro Em seguida, temos que adicionar o atributo de nome a cada elemento de entrada e também à área de texto. O primeiro será o nome do que precisamos de e-mail. O próximo será assunto. E, finalmente, precisamos de uma mensagem. Tudo bem, isso é tudo sobre o HTML. Em seguida, também precisamos fazer algumas coisas no arquivo JavaScript. No momento, temos aqui a função padrão de prevenção, que não nos permite enviar um formulário. Precisamos fazer com que esses métodos funcionem somente quando temos o erro. Para fazer isso, vou criar uma nova variável. Vamos dizer que não é válido. Portanto, para descobrir se temos um erro ou não, precisamos examinar as mensagens. Depois de descobrirmos se a mensagem de erro existe , precisamos executar a função preventDefault Em primeiro lugar, temos que transportar mensagens para uma matriz porque, no momento, é uma lista de nós Portanto, precisamos da matriz de pontos e temos que passar suas mensagens. Em seguida, vou usar um dos métodos auxiliares de matriz chamado find Esse método interrompe o ciclo quando a condição que vou passar aqui for verdadeira. Portanto, precisamos encontrar com uma função de retorno de chamada, que pegará um parâmetro e será a mensagem atual na matriz Então, se a mensagem contiver um erro de classe, isso significa que temos uma mensagem de erro. Portanto, precisamos verificar se a lista de classes de mensagem contém erro de classe. Então, quando tivermos a mensagem de erro, teremos que executar a função preventDefault Para isso, vou usar uma declaração condicional. Não precisamos ser válidos, seguidos pelo lógico e pelo operador. E então precisamos evitar a inadimplência. Tudo bem, finalmente, temos que nos livrar da função preventiva do pé a partir daqui Além disso, precisamos atualizar nosso site com o código recém-adicionado. Para isso, temos que executar novamente, Netlify, deploy dash, dash prod. Agora o site está atualizado e precisamos preencher o formulário. Agora clique no botão enviar. Como você pode ver, recebemos aqui uma pequena mensagem informando que o formulário foi enviado. Se verificarmos o painel , obteremos as informações que acabamos de enviar Então, tudo funciona bem. E, na verdade, terminamos de trabalhar em nosso projeto. Espero que tenha sido interessante, útil e que você aprenda algumas coisas novas que o ajudarão a criar seu próprio site de portfólio pessoal que terá uma aparência moderna, bonita e profissional com apenas HTML, CSS e JavaScript puros. Tudo bem, então espero que você tenha gostado deste curso. Obrigado por estar conosco. Desejo a você tudo de bom. Tchau tchau.