Crie um site mega responsivo: HTML, CSS, JavaScript (2024)

1. Introdução: Olá e bem-vindo ao nosso curso prático, um site mega responsivo construído com HTML, CSS e Javascript. Quero agradecer a você por escolher se matricular neste curso Se você está empolgado em mergulhar direto na criação de um site de várias páginas no mundo real , você veio ao lugar certo Ao longo deste curso, serei seu guia na construção de um site completo, moderno e adaptável do zero usando HTML, CSS e chavscript Aqui você não encontrará longas discussões teóricas. Em vez disso, você receberá instruções práticas passo para equipá-lo com as habilidades necessárias para desenvolver sites impressionantes Neste vídeo introdutório, fornecerei uma visão geral do nosso projeto e detalharei o que vamos realizar Nosso projeto foi projetado para ser um site de várias páginas e se adaptará a diferentes tamanhos de tela e dispositivos Começaremos criando um cabeçalho de site seguido pela barra de navegação completa com menus suspensos fáceis de usar para cada item de navegação. Em seguida, vamos nos aprofundar na seção Serviços, que será seguida pela seção de projetos com um filtro dinâmico para categorias de projetos Clicar em qualquer um dos links exibirá os projetos correspondentes. No futuro, desenvolveremos uma seção de modelos que consiste em duas partes. A primeira parte está visível aqui e a segunda parte ganha vida com o clique de um botão Play. O player de vídeo está totalmente funcional. Ele oferece controle sobre a reprodução do volume. Você pode pular para trás e para frente. Além disso, podemos escolher a velocidade. Além disso, você pode encontrar aqui o modo imagem em imagem e reprodução em tela cheia Após a seção de modelos, criaremos uma seção de contato, que será seguida por um rodapé para finalizar o site Como eu disse, nosso site tem várias páginas e você pode navegar para páginas diferentes clicando nos links na barra de navegação. Você descobrirá a página de um cliente com depoimentos de cliente com depoimentos Em seguida, teremos uma página de projeto com uma abordagem envolvente. Em seguida, a próxima página será uma página de contato equipada com formulários e opções de bate-papo. Além disso, temos aqui uma página de conta para fazer login e, finalmente, uma página de preços. Como mencionei anteriormente, o site responde a vários tamanhos de tela Se você inspecionar a página, alternar para o modo responsivo e visualizá-la em diferentes tamanhos de tela e dispositivos , verá que ela é adaptável e tem uma aparência muito boa Tudo bem, gostaria de observar que este projeto foi projetado para telas extra grandes com uma resolução de 1920 pixels e 1080 pixels de altura Se você estiver usando uma tela menor, recomendo alternar para o modo responsivo durante as palestras e especificar a largura e a altura adequadamente Isso garantirá que o projeto tenha a melhor aparência em telas menores até que seja totalmente responsivo Ok, espero que você goste de trabalhar neste projeto tanto quanto eu. Sem mais delongas, vamos começar. 2. Configuração: Olá e bem-vindo ao curso. Estamos muito satisfeitos por ter você aqui e estamos confiantes de que você achará este curso agradável Antes de começarmos a mergulhar em nosso projeto, vamos primeiro preparar nosso ambiente de trabalho. Se você já está configurado e pronto para escrever código, pode pular este vídeo e ir direto para o projeto No entanto, se você ainda não estiver preparado , tudo bem. Orientaremos você na configuração algumas ferramentas essenciais ao longo deste curso. Você precisará de duas ferramentas principais um navegador moderno e um editor de texto. Para o nosso navegador, usarei o Google Chrome, mas também recomendo o Mozilla, o Firefox Você provavelmente já tem esses navegadores, mas vamos ver rapidamente como baixá-los Para obter o Google Chrome, basta visitar esse URL e baixar o navegador. O processo de instalação é simples, por isso não vamos gastar muito tempo nele Para Mozilla, Firefox, você pode obtê-lo neste URL. Ambos os links serão incluídos nesta palestra para sua conveniência Tudo bem, agora vamos falar sobre o editor de texto. Usaremos o Visual Studio Code , que é um dos melhores editores de texto disponíveis atualmente No entanto, você pode usar seu editor de texto preferido, se tiver um. Ainda depende inteiramente de você. Eu recomendo dar um código do Visual Studio a. Tente baixar o código do Visual Studio, visite este site e selecione a versão para seu sistema operacional, Windows, Mac ou Linux. O processo de instalação Visual Studio Code também é simples Você não deve encontrar nenhum problema. Depois de instalar essas duas ferramentas, você estará pronto para começar o curso. Vamos direto ao assunto. 3. Primeiros passos: Olá, bem-vindo à nossa nova seção , na qual começaremos a construir nosso projeto. Eu criei uma nova pasta na área de trabalho. É chamado de site responsivo. Se eu abrir, você encontrará aqui duas pastas diferentes. A primeira são imagens nas quais eu tenho todas as imagens diferentes que vamos usar ao longo do projeto. Quanto à segunda pasta, ela se chama vídeos. Eu tenho aqui um único vídeo. Ok, vamos abrir essa pasta no código VS. Além dessas duas pastas, também vou criar outras pastas. Como você sabe, nosso projeto é um site de várias páginas, então teremos alguns HTM, CSS e Jas diferentes Vou armazená-los em pastas separadas. A primeira pasta será, na verdade, precisamos aqui da pasta e do arquivo. A primeira pasta será HTML, na qual criarei um arquivo HTML com pontos de índice. Em seguida, a próxima pasta será, na verdade, precisamos criá-la fora da pasta HTML. A segunda pasta será CSS. Vou criar aqui um arquivo SS de estilo. Em seguida, precisamos criar uma pasta para v script, qual vou inserir o arquivo de script. Tudo bem, vamos abrir arquivo HTML e criar o documento HTML básico. Para isso, vou usar um pacote integrado do código VS. É chamado de Amet. Se eu inserir um ponto de exclamação e pressionar Enter, obteremos aqui a taxa básica de HTML A primeira coisa que vou fazer aqui é alterar o título em vez do documento. Vou inserir um site responsivo. A próxima coisa que vou fazer é vincular arquivos CSS e Jovscp Para isso, precisamos abrir a tag de link no elemento principal. Em seguida, no atributo de referência H, temos que especificar o caminho do arquivo. Primeiro de tudo, temos que sair da pasta atual, que é HTML. Para isso, vou instituir dois pontos. Em seguida, agora podemos escolher a pasta necessária. Vai ser CSS e então precisamos do estilo SS. Tudo bem, da mesma forma que vou vincular o arquivo Jovsc Em primeiro lugar, temos que abrir a script logo acima da tag de encerramento do corpo. Em seguida, vou inserir seu atributo de origem no qual temos que especificar a parte do arquivo. Novamente, precisamos sair da pasta atual. Precisamos aqui de dois pontos seguidos pelo avanço. Em seguida, temos que escolher a pasta JS e selecionar script ou arquivo JS. Tudo bem, todos os três arquivos estão conectados. Agora vou abrir a pasta no navegador usando o Live Server. Como você pode ver, o projeto está sendo executado no navegador. Na verdade, se você não estiver familiarizado com o pacote de servidor ativo, poderá encontrá-lo no código VS. Vamos fechar essas mensagens. Você pode pesquisar o servidor ativo aqui nos pacotes. Você pode instalar esse pacote e executar o projeto no navegador. Quando você está usando o pacote de servidor ativo e está fazendo algumas alterações e atualizações no projeto , não precisa atualizar a página toda vez que ela recarrega automaticamente a página e executa as alterações e atualizações do seu Tudo bem, a próxima coisa que vou fazer é colocar o editor e o navegador lado a lado, assim. Para tornar nosso processo de trabalho mais conveniente e simples, você pode alternar entre o navegador e o editor. Então, a próxima coisa que vou fazer é trazer alguns outros links de CDN também ao longo do projeto Vamos usar o telefone, alguns ícones. Para usá-los, precisamos prosseguir e procurar telefones CDN JS Em seguida, temos que copiar o primeiro link daqui. Em seguida, precisamos abrir a tag de link no elemento principal e colar o link CDN aqui no atributo de referência H. Além disso, vou usar os telefones do Google durante todo o projeto. Vamos visitar o site do Google Phones. Vou procurar telefones aqui. O primeiro telefone que vou usar durante todo o projeto será o Croson One Vamos seguir em frente e selecionar esse estilo. Em seguida, vou pesquisar um telefone chamado Uli. Não sei se estou pronunciando corretamente, nesse telefone, vamos selecionar esse estilo O último telefone que vou usar será o Ta. Vamos selecionar alguns estilos diferentes. Em seguida, vou pegar esse link daqui e colá-lo no elemento principal. Tudo bem, então é isso. Nosso ambiente de trabalho está preparado e agora temos que seguir em frente e começar a criar a marcação HT para isso. Vamos passar para a próxima palestra. 4. Cabeçalho HTML: criando a estrutura de marcação: Tudo bem, na palestra anterior preparamos nosso ambiente de trabalho. Criamos arquivos e pastas diferentes. Além disso, criamos o documento HTML básico no qual temos os links para a fonosômica, também para os também para Agora é hora de começar a criar a marcação HTML da nossa primeira seção Se dermos uma olhada no projeto finalizado, você verá aqui o cabeçalho do site com a navegação. Nesta palestra, vamos criar a marcação HTML. Marcação para o banner e também para os planos de fundo. Quanto à navegação, cuidaremos disso um pouco mais tarde. Vamos começar a criar a marcação HTM. Na verdade, vou ampliar um pouco o código. A primeira coisa que vou fazer é criar os comentários para o contêiner que precisamos aqui, no final do contêiner, vou separar todas as seções e partes umas das outras com os comentários. Vamos abrir a tag com o contêiner da classe. Em seguida, vamos criar o cabeçalho. Mas antes disso eu vou inserir aqui novamente os comentários para o cabeçalho. Vamos inserir aqui a tag HTML de cinco cabeçalhos. Em seguida, precisamos criar o banner. Mas, novamente, vamos inserir aqui o comentário para o banner que precisamos aqui. Fim do banner. Vamos abrir a tag p com o banner do nome da classe. O banner incluirá três arquivos diferentes. Teremos dois títulos e também a parte inferior, o primeiro será H um elemento de título com o texto Criar Em seguida, precisamos de três elementos de cabeçalho. O texto será um tema moderno e bonito. Agora, na parte inferior, vou embrulhar o botão com o elemento link porque, no final do dia, quando clicamos no botão, precisamos ir para a página diferente. Precisamos de elementos. Agora eu vou em sinal de libra. Em seguida, vamos criar o tipo de botão que será botão. Então eu vou me juntar hoje. Certo, isso é, é sobre o banner. Em seguida, temos que cuidar dos planos de fundo. Vou inserir seus comentários para os planos de fundo. Em seguida, vou abrir uma tag com os planos de fundo do nome da classe No geral, teremos três origens diferentes. O primeiro será o plano de fundo principal. Vou abrir a tag principal do BG. Vamos duplicar essa linha de código duas vezes. Altere os nomes das classes que precisamos aqui, G um e depois G dois. Tudo bem, acho que é isso sobre a marcação da tabela do cabeçalho. Vamos dar uma olhada. Temos aqui apenas três elementos visíveis, os títulos e o botão Esses fundos não são visíveis porque temos aqui apenas os elementos vazios e profundos Tudo bem, agora é hora de estilizar esses elementos. E para isso, vamos para a próxima palestra. 5. Criando estilos CSS padrão: Ok, na última palestra, criamos a marcação HTM para nossa primeira seção, que será o cabeçalho do site, essa parte do Agora temos que começar a escrever um pouco de CSS. Vou abrir o arquivo CSS de estilo. Na verdade, vou colocar o arquivo no lado direito do editor de código. Nesse caso, os dois arquivos estão visíveis e é mais conveniente para nós. Nesta palestra, vamos criar alguns estilos padrão que serão usados para cada elemento que precisamos aqui Fim dos estilos padrão, então vou selecionar cada elemento e, para isso, temos que usar um asterisco Nesse caso, todos os elementos são selecionados. A primeira coisa que vou fazer é eliminar a margem padrão e o preenchimento dos elementos Se verificarmos o navegador, você pode ver aqui o espaço entre os elementos. Portanto, isso significa que os elementos têm alguma margem padrão. Vamos definir a margem para zero. Além disso, também vou definir o preenchimento para zero. Agora, se verificarmos os elementos, você pode ver que o espaço foi removido. Ok, em seguida, vou definir o tamanho da caixa para a caixa de borda. Na verdade, a caixa de borda é uma forma de instruir o navegador da Web a facilitar o dimensionamento dos elementos em uma página da Web ao definir a altura interna de um elemento caixa de borda faz com que o navegador inclua a borda e o preenchimento nessas medidas Se você disser que um elemento deve ter 100 pixels de largura, esses 100 pixels incluem a borda e o preenchimento, e o conteúdo real dentro da caixa se ajusta para caber nesse espaço Isso ajuda você a controlar o tamanho de um elemento de forma mais conveniente Ok, em seguida, vou definir a decoração como N. Nesse caso, removemos o sublinhado dos links Em seguida, vou usá-lo e configurá-lo como não. Com esse código, removemos os contornos padrão dos elementos, como entradas ou botões Finalmente, vou definir a família de telefones para cada elemento. Como você sabe, pegamos alguns telefones diferentes no site de telefones do Google. Vou usar um dos telefones, vamos chamá-lo de Ut. Tudo bem. Então, como você pode ver, a fonte é alterada para cada elemento. Depois disso, vou definir o tamanho da fonte do elemento H mal para 62,5%. O que esse código faz é definir tamanho da fonte de todo o documento HTML 62,5% do Por padrão, a maioria dos navegadores tem um tamanho de fonte padrão para texto, que normalmente é de cerca de 16 pixels. Quando você define o tamanho do telefone para 62,5%, significa que todo o texto na sua página da web terá 62,5% do Isso geralmente é usado como um ajuste no design da web. 62,5% de 16 pixels são dez pixels, que é um bom número redondo Isso facilita o trabalho com unidades relativas, como M. Vamos usar a RAM como unidade de medida em todo o projeto. É por isso que eu defini o tamanho da fonte do HTML para 62,5%. Por exemplo, se você definir algo com dois Ram de largura, ele terá 20 pixels de largura porque cada Ram tem dez Isso torna mais conveniente e fácil trabalhar com os tamanhos do seu web design Se verificarmos os resultados, você verá que os elementos ficaram menores. Isso se deve ao tamanho da fonte do elemento HTML, que agora está definido como 62,5%. É sobre os estilos padrão Vamos passar para a próxima palestra. 6. Fundos de estilo no cabeçalho: Tudo bem, na última palestra começamos a escrever CSS Criamos alguns estilos padrão e agora temos que seguir em frente e cuidar do cabeçalho. Em primeiro lugar, vou inproteger os comentários do contêiner depois selecionarei o contêiner Vamos seguir em frente e definir dentro da altura. A largura será de 100% Já a altura também será de 100%. Além disso, vou mudar a cor do plano de fundo. Vamos definir a cor de fundo para branco. No momento, nada mudou aqui. Em seguida, vamos seguir em frente e cuidar do cabeçalho. Vou instituir comentários para o cabeçalho. Em seguida, vamos selecionar Cabeçalho com um nome de tag. Vou definir com altura. A largura será de 100%. Quanto à altura, vou estudar até 100 de altura da janela de visualização Isso significa que o cabeçalho ocupará 100% da porta de visualização como altura. Tudo bem, agora vou estilizar os planos de fundo e depois vamos seguir em frente e cuidar do banner Vamos inserir aqui novos comentários para os planos de fundo Em seguida, selecionarei os desenvolvimentos dentro dos planos de fundo, os três desenvolvimentos que precisamos aqui, fundo, seguidos pelo seletor, e vou definir a posição todos os três desenvolvimentos Primeiro de tudo, precisamos posicionar os elementos. Nesse caso, vou posicionar os elementos de acordo com os elementos pais, que neste caso são o cabeçalho. Para posicionar o elemento acordo com seu elemento pai, temos que atribuir ao elemento pai a posição , mas com um valor relativo. Depois disso, vou selecionar o primeiro plano de fundo que, no nosso caso, é fundo principal I ground, que você vê aqui, este. Vamos seguir em frente e selecionar a média de fundo. Em primeiro lugar, conforme definido nas alturas, vou definir 150% para as alturas, que também serão 150% Nesse caso, o elemento ocupará 150% da altura do elemento pai Nesse caso, o elemento pai é o plano de fundo. Mas, como você pode ver, os planos de fundo não têm nenhuma altura interna O fundo principal ocupará 150% do w e da altura do elemento do cabeçalho Neste momento, temos aqui os mesmos resultados. Nada é visível, quero dizer, o fundo. Agora vou definir o plano de fundo com a função de gradiente linear A direção será para a direita. Então, precisamos de três cores diferentes. A primeira é que, na verdade, precisamos aqui de duas à esquerda e não de duas à direita. A primeira cor será transparente. Então, precisamos que as segundas cores sejam roxas. O escuro, precisamos aqui de 4400 pi. Além disso, precisamos aqui da segunda cor, ela será roxa novamente. Mas o mais leve, eu vou usar aqui 4400b Deixe-me explicar o que esse código faz aqui. Como você pode ver, esse código cria um plano de fundo para o cabeçalho. Ele usa um gradiente que começa no lado esquerdo e vai do transparente ao roxo escuro até um roxo ligeiramente mais claro Ele dá ao fundo uma transição suave de cores da esquerda para a direita, indo do roxo escuro para o roxo mais claro e depois transparente. Tudo bem, em seguida, vou definir a posição dos elementos para que a posição seja -95%. Além disso, vou definir a posição esquerda, que será -10%. Vamos verificar o navegador O elemento está posicionado e agora temos que girar esse elemento usando a propriedade de transformação Vou usar aqui duas funções, rotacionar z e inclinar x. Vou explicar cada uma delas separadamente A função de rotação Z terá o valor de -15 graus. Além disso, precisamos aqui inclinar x com o valor de 30 graus. A primeira função, quero dizer, a função de rotação Z, faz com que um elemento na página da web gire ou incline no sentido anti-horário Isso dá ao elemento uma leve inclinação para a esquerda, como se você estivesse girando um porta-retratos levemente para o lado Quanto à segunda função skew, x, ela faz com que um elemento em uma página da web se incline ou incline para a direita É como inclinar o elemento para um lado, fazendo com que pareça um solo paralelo Como você pode ver, temos aqui esses resultados. Agora temos que arredondar o canto do fundo e, para isso, vou usar a propriedade chamada para o raio, que terá quatro valores diferentes Os primeiros três valores também são zero. O último valor que indica o canto inferior esquerdo do elemento, será dez m. Agora, como pode ver, o canto do elemento é arredondado. Por fim, vou diminuir um pouco a opacidade. Digamos que 2,9 Tudo bem. Como você pode ver, temos aqui uma barra de rolagem. Na verdade, não precisamos disso. Para me livrar da barra de rolagem, vou atribuir à propriedade do contêiner chamada overflow hidden, que nos permite ocultar a barra de rolagem Ok, então tudo parece bem. Em seguida, vou cuidar do segundo plano de fundo, quero dizer, do plano de fundo. Este que é colocado sob o plano de fundo principal. Vamos seguir em frente e selecionar o plano de fundo. Defina dentro das alturas. Nesse caso, vou definir com 50% e, em seguida, a altura será 100%. Novamente, vou usar fundo com função de gradiente linear Nesse caso, precisamos aqui da direção padrão. Eu não vou inserir aqui dois à esquerda ou dois à direita ou qualquer coisa. A primeira cor será transparente. Então eu vou adicionar aqui o valor percentual que vou explicar muito em breve. Vamos inserir aqui a segunda cor. Vai ser F 26 C. Então precisamos aqui da terceira cor. Vai ser o F724b. Aqui, o valor percentual, quero dizer 60%, especifica a posição em que a transição de cores ocorre dentro do gradiente linear Em termos simples, isso significa que o plano de fundo começará transparente, depois mudará para a primeira cor quando 60% do gradiente estiver concluído e continuará a transição para a segunda cor nos 40% restantes do Nesse código, 60% do gradiente será transparente e, em seguida, mudará suavemente para a primeira cor, criando uma transição suave de cores no Ok, vamos cuidar da posição. Vou definir a posição para -40%. Além disso, precisamos da posição correta Será de -10% do elemento posicionado. Agora, como suposição, precisamos girá-lo como o primeiro plano de fundo que vou usar Na verdade, precisamos aqui das mesmas propriedades e valores. Vamos copiar esse código e colar aqui. O fundo é girado e parece bom. vamos arredondar o canto do fundo usando caso, vamos arredondar o canto do fundo usando um raio de borda Precisamos aqui de 0.000.5 ran. O plano de fundo parece muito bom, mas temos aqui um pequeno problema. Precisamos colocar esse plano de fundo sob o plano de fundo principal. Para isso, vou usar a propriedade de índice Z. Por padrão, cada elemento tem uma propriedade de índice Z com o valor zero. Mas se adicionarmos aqui o índice com o valor, digamos um que seja maior que zero , o plano de fundo acabará atrás de mim sob o plano de fundo em. Tudo bem, sobre o segundo plano de fundo, agora temos que cuidar do terceiro plano de fundo, que no nosso caso é o segundo plano de fundo. Na verdade, acho que seria melhor se duplicássemos esse código aqui Vamos mudar o nome da classe. A largura e a altura serão semelhantes, 50% e 100%. Quanto ao gradiente linear, vou alterá-lo um pouco Precisamos aqui de 70% Além disso, precisamos aqui de cores diferentes. A segunda cor será um 5995. Quanto à terceira cor, vou instituir E. Então precisamos aqui 9458 Quanto às posições, vou definir duas posições para 60%. A posição correta será 10%. Precisamos da mesma propriedade de transformação aqui. O raio da borda será novamente o mesmo. Vamos verificar os resultados agora. Como você pode ver, o plano de fundo acabou ficando atrás do plano de fundo principal. Para corrigir isso, precisamos, novamente, da propriedade de índice Z. Mas, nesse caso, o valor da propriedade do índice z deve ser maior do que z index um. Vamos configurá-lo para dois. Agora, o fundo deve estar visível e, sim, está visível. A única coisa que vou fazer é adicionar opacidade. Quero diminuir a opacidade 2.4 Além disso, vou adicionar ao fundo alguns efeitos de sombra que precisamos Sombra da caixa com os valores sete e quatro Ram. Os seis Ram, e a cor será RGBA 000 e a opacidade 0,9 Esse código adiciona uma sombra a um elemento na página da web Deixe-me explicar o que esses valores fazem. O primeiro número sete Ram determina a distância horizontal da sombra do elemento O segundo valor, quatro Ram, determina a distância vertical da sombra do elemento O terceiro número seis Ram controla o tamanho ou a barra da sombra. Quanto à cor, especifica a cor da sombra. Nesse caso, é uma sombra muito escura, quase preta, porque temos três zeros aqui, que indica a cor preta Mas temos aqui a opacidade de 0,9, o que torna a cor preta escura um pouco mais clara Eventualmente, temos aqui esse efeito de sombra agradável e legal. Tudo bem, na verdade, isso gira em torno do plano de fundo. Vou parar aqui e passar para a próxima palestra, na qual estilizaremos o banner do cabeçalho 7. Como criar banner no cabeçalho: Tudo bem, na última aula, estilizamos os planos de fundo do cabeçalho Como você pode ver, temos aqui três fundos diferentes que estão posicionados e têm uma aparência muito bonita Agora temos que cuidar do banner, que agora está colocado no canto superior esquerdo da página. Na verdade, ele é colocado atrás do fundo. Maine. inserir novos bens comuns para o banner Em seguida, vou selecionar o Banner e definir sua posição, que será absoluta. Como você sabe, quando usamos a posição absoluta, precisamos da posição relativa para o elemento pai. Como você pode ver, a dama do cabeçalho tem uma posição relativa. Em seguida, vou definir as duas posições para 18%. Então, teremos aqui a posição esquerda. Vai ser 20%. Como você pode ver, o banner mudou de posição. É colocado sob o plano de fundo principal. Então, temos que corrigir isso usando a propriedade index. Vou definir o índice 24. Agora, como pode ver, o problema está resolvido. Tudo bem, agora é hora de personalizar cada um dos elementos separadamente. Vou começar com o primeiro elemento do cabeçalho, que é H um. Então, vamos selecionar Banner, seguido pelo elemento de cabeçalho H one. Em primeiro lugar, vou mudar a família de telefones. Nesse caso, vamos usar o telefone chamado mull. Vai ser cursivo. Então eu vou aumentar o tamanho do telefone, torná-lo 13 Ram. Vamos verificar o navegador. O tamanho do telefone foi alterado e também temos aqui uma família de telefones diferente. Em seguida, vou mudar a cor, vai ser branca. Vou adicionar aqui algum efeito de sombra. Nesse caso, vamos usar sombra de texto. Funciona de forma semelhante à sombra da caixa. Vou interferir nos valores de 01 Ram, então teremos três Ram. Quanto à cor que vou usar, será preta, mas neste caso com uma opacidade menor, ou será 0,3. Como você pode ver, o cabeçalho parece muito bom Em seguida, vou levá-lo ao segundo elemento do título, que é três. Vamos selecionar Bender, seguido pelos três elementos de cabeçalho H Vou mudar o tamanho da fonte, neste caso, serão três RAM. Em seguida, vou alterar o peso da fonte. Vamos tornar os pesos das fontes mais leves e configurá-los para 300. Em seguida, vou transformar o texto em maiúsculas. Agora vou mudar a cor do título. Vai ser branco. Novamente, use a sombra tecnológica. Vamos pegar essa linha de código. A única coisa que vou fazer aqui é diminuir a opacidade Vai ser 0.1 Finalmente, vou criar algum espaço usando margem. A margem na parte superior será zero. Então teremos zero no lado direito. Em seguida, temos o fundo, serão três Ram. Quanto ao lado esquerdo, vou configurá-lo para um Ram. Tudo bem, é isso, sobre o segundo título. Agora é hora de personalizar a parte inferior. Vamos selecionar Banner seguido pelo botão. Em primeiro lugar, vou me sentar com altura. Vamos começar com 215 Ram. Então, a altura será de cinco fram. Também vou mudar o plano de fundo. Vamos usar novamente gradientes lineares. A direção da transição de cores será duas, certo? Então precisamos aqui da primeira cor que será A três EC, é uma cor roxa. Então precisamos de outra cor roxa, que será 84, depois 30. É novamente uma cor roxa, mas a mais escura Vamos verificar o botão que temos aqui. Fundo agradável e legal com gradiente. Em seguida, vou me livrar da borda padrão. Vamos configurá-lo como nenhum, pois vou arredondar o botão usando o raio da borda Vamos enviá-lo para a RAM e verificar o navegador passo a passo ou botão. Parece ótimo. Em seguida, vou definir o tamanho do telefone para 1,6 Ram. Além disso, vou fazer com que o peso do telefone aumente. Em seguida, vamos transformar o texto em maiúsculas. O texto parece muito bom, mas precisamos adicionar um pouco mais de estilo a ele. Precisamos criar algum espaço entre as letras usando o espaçamento entre letras Vai ter 0,1 Ram e também mudará a cor. Precisamos de cores mais claras. Vou definir a cor para branco. Agora, o botão parece bem bonito e legal. Em seguida, adicionarei o efeito de sombra ao elemento usando a sombra pox com o valor de 01 Ram, três Ram E a cor será RTB A com a menor opacidade 0.1 Como você pode ver, o botão tem o efeito Em seguida, vou criar algum espaço no lado esquerdo usando a margem esquerda. Vai ser uma rampa. E também altere o tipo do cursor, torne-o ponteiro. Ok, antes de terminarmos esta palestra, quero acrescentar mais uma coisa ao nosso botão Vou criar um efeito de foco. Depois de passarmos o mouse sobre o botão, precisamos movê-lo para cima usando a função transform translate Vamos selecionar Banner, seguido pelo botão. E precisamos aqui do mouse da pseudoclasse. Vamos usar a função transform translate y. Isso nos permite mover os elementos de acordo com o eixo y. Quero dizer verticalmente. Vou adicionar aqui um valor negativo. Vai ser -0,2 Ram. Se eu verificar o navegador, como você pode ver, quando passarmos o mouse sobre o botão , ele subirá um pouco Vamos tornar esse efeito mais suave usando a transição. Vou adicionar aqui a transformação. E a duração do efeito será de 0,3 segundo. Agora, se eu passar o mouse sobre o botão , obteremos esse efeito agradável e legal Tudo bem, na verdade, isso está sobre o banner. Em seguida, cuidaremos da navegação, do logotipo e da barra de navegação, esses itens de navegação com seus menus suspensos Vamos seguir em frente e cuidar disso. 8. Criando a marcação HTML da navegação: Olá, bem-vindo à sua nova seção, na qual criaremos uma barra de navegação para nosso projeto. Na última seção, criamos o cabeçalho do site, que consiste em um banner. Ele é colocado no lado esquerdo da página. E também temos aqui três planos de fundo diferentes que eu acho que parecem muito bons Vamos dar uma olhada no projeto finalizado. A barra de navegação consistirá em um logotipo. Ele é colocado no canto superior esquerdo da página. Além disso, teremos os itens de navegação que são colocados horizontalmente em uma linha Cada item de navegação tem um menu suspenso, exceto o botão. Nesta palestra, vamos criar uma marcação HTML para o logotipo e também para os itens de navegação Quanto aos menus suspensos, cuidaremos deles um Ok, vamos abrir o código do VS e começar a criar a marcação HTML Em primeiro lugar, vou inserir aqui comentários para a navegação. Em seguida, vou abrir o HTML Five Novelment com a oferta do nome da classe Em seguida, precisamos criar o logotipo. Primeiro, vou inserir os comentários para o logotipo. Então eu vou abrir o link Elements. Usamos aqui o elemento Link, porque quando clicamos no logotipo, temos que ir para a página principal, o índice HTML. Se eu acessar qualquer uma das páginas aqui e clicar no logotipo, devemos voltar para a página principal I, o índice do arquivo HTM No atributo de referência H, vou indicar o índice HTML. Então, precisamos aqui de um desenvolvimento com o logotipo da classe. O logotipo consistirá em alguns elementos de extensão diferentes. Vamos abrir a tag span e inserir o código. E então precisamos, novamente, abranger elementos com o texto Create. Em seguida, vou abrir outra tag de span. Vou inserir seus modelos. Ok, é isso mesmo, sobre o logotipo. Em seguida, precisamos criar os itens de navegação. Vou inserir seus comentários sobre os itens. E então eu vou abrir a lista de todos os elementos com o nome da classe, sem itens. A lista consistirá em seis itens de lista diferentes. Precisamos aqui de elementos LI e a classe não terá nenhum item. Então, dentro do elemento LI, vou abrir um link como o logotipo, precisamos especificar aqui os nomes das páginas. No começo, estou aqui na aula, não haverá link e depois o primeiro item será em casa. Depois de clicar no primeiro item, devemos voltar à página principal. Quero dizer, o índice do arquivo HTML. Vamos dar uma olhada na versão final. Se eu acessar qualquer uma das páginas e clicar em Início, voltaremos à página principal. Vou instituir novamente, indexar o HTML em geral. Teremos seis itens de lista diferentes. Portanto, vou duplicar o elemento LI cinco vezes depois alterar os itens O segundo item serão os clientes. Precisamos mudar o nome do arquivo HTML. Na verdade, esses arquivos ainda não foram criados. Nós cuidaremos deles nas próximas seções. Nesse caso, estou apenas especificando os nomes dos arquivos HTML Nós os criaremos mais tarde. Ok, o terceiro item serão os produtos. Mude o arquivo HTML, precisamos ouvir os produtos em seguida. Entraremos em contato e, em seguida, vou acessar suas contas Finalmente, precisamos ouvir os preços. Como eu disse, vai ser o botão e não o link. Vou mudar o nome da classe que precisamos aqui agora, PTN. Altere também o nome do arquivo HL. Vai precificar o HTML. Tudo bem. Acho que é isso sobre a marcação HTML Vamos dar uma olhada nos projetos. Como você pode ver, os itens de navegação e também o logotipo são colocados atrás do fundo. Além disso, o layout dos planos de fundo é ligeiramente alterado Precisamos cuidar deles e resolver esses problemas. Vamos seguir em frente e passar para a próxima palestra. 9. Como criar o logotipo do site: Tudo bem, na última palestra, criamos a marcação HDML para a barra de navegação do E agora é hora de estilizar esse elemento. Nesta palestra, vamos estilizar o logotipo. Vamos voltar ao arquivo CSS e começar a escrever o código CSS. Precisamos adicionar aqui novos comentários para a navegação. Vou selecionar elementos de navegação, que têm o nome da classe Não, primeiro de tudo, vou definir sua posição. Vai ser consertado. Além disso, precisamos definir as propriedades superior e esquerda. Ambos serão zero agora, nada mudou aqui. Como você pode ver, os elementos da navegação são colocados em segundo plano e precisamos corrigir isso. Para corrigir esse problema, precisamos usar uma propriedade de índice e vou atribuir a ela um valor maior. Digamos que dez. Agora, como você pode ver, os elementos não são mais colocados atrás do plano de fundo. Em seguida, vou definir a largura e a altura da navegação definida com, será 100%. Quanto à altura, vou configurá-la para 12 Ram. Além disso, vou adicionar aqui uma cor de fundo temporária para ver melhor onde a barra de navegação está posicionada Vamos definir a cor. Digamos que cinza claro. Vai ser CC. Aqui temos nossa soneca. Ele é colocado na parte superior da página da web. Em seguida, vou criar algum espaço usando preenchimento. O preenchimento na parte superior e inferior será zero. Quanto ao lado esquerdo e direito, vou ajustá-lo para 15 rapidamente. Como você pode ver, temos aqui algum espaço nos lados esquerdo e direito. Em seguida, vou usar o flex box para alinhar os elementos Como você sabe agora, a parte consiste em duas partes diferentes. Temos o logotipo e os itens de navegação. Precisamos colocar os dois elementos em uma linha horizontalmente nos lados esquerdo e direito Para isso, precisamos usar o Display Flex. Como você pode ver, o logotipo e os itens de navegação são colocados lado a lado. Para colocá-los nos lados esquerdo e direito, vou usar justificar o conteúdo com o espaço de valores entre Agora, como você pode ver, o logotipo é colocado no lado esquerdo. Quanto aos itens de navegação, eles são colocados no lado direito do Não. Ok. Em seguida, vou colocar os itens, quero dizer, os elementos da barra de navegação no centro, verticalmente E para isso vou usar outra propriedade do CSS, Flexbox, chamada Align Items E eu vou colocá-lo no centro. Agora, os elementos são colocados no centro verticalmente. Tudo bem, isso é sobre a barra do agora, agora mesmo. Em seguida, vou cuidar do logotipo. Precisamos inserir novos comentários para o logotipo. Em seguida, vou selecionar Developments, que tem o logotipo do nome da classe. Novamente, vou usar livros Flex para alinhar os elementos. Vamos configurar a tela para flexionar. Nesse caso, vou colocar os itens verticalmente um em cima do outro Para isso, temos que mudar a direção do livro flexível e ele será uma coluna Agora, como você pode ver, os elementos são colocados verticalmente. Em seguida, vou selecionar o primeiro elemento de extensão no logotipo. Quero dizer esse. Para isso, precisamos aqui do logotipo. Em seguida, abranja os elementos. Agora temos que usar uma das pseudoclasses chamada enésimo seletor de filhos Aqui temos que especificar o número. Como eu disse, precisamos selecionar o primeiro elemento de extensão. Portanto, vou sentar um para você. Em primeiro lugar, vou mudar a família de telefones. Vamos usar este telefone chamado de toupeiras. Além disso, vamos aumentar o tamanho do telefone. Vou configurá-lo para três Ram. Vamos dar uma olhada aqui, temos os primeiros elementos de extensão. Vamos alterar o peso da fonte. Vou fazer com que seja ousado. Vamos transformar o texto em maiúsculas e mudar a cor. Eu vou usar a cor branca. Aqui temos o primeiro elemento de extensão do logotipo. Na verdade, vamos seguir em frente e nos livrar desse pano de fundo temporário. Acho que não precisamos mais disso agora. O logotipo parece muito melhor. Em seguida, vou selecionar o elemento span que é colocado dentro do primeiro elemento do painel, este é criado pelo texto Para isso, precisamos primeiro do logotipo seguido pelo elemento span com o seletor de gráfico E, novamente, precisamos do elemento span. Vamos mudar o tamanho do telefone. Vai ser 1,8 Ram. O tamanho dessa parte, esse elemento panorâmico, é alterado agora que o texto fica menor. Temos que mover o elemento para cima, como o texto aqui. Para isso, vou usar transform. Com a função translate y, ela move o elemento de acordo com o eixo y. Quero dizer, ele move o elemento verticalmente. Para mover o elemento para cima, precisamos usar um valor negativo Nesse caso, será 0,8. Como você pode ver, o elemento não subiu. O problema é que o Spanelon é um elemento embutido. E depois de ter o elemento embutido, propriedade de transformação não é aplicada Portanto, precisamos transformar elementos de um bloco em linha para bloco embutido para aplicar a propriedade de transformação Agora, o problema deve ser resolvido. Tudo bem, como você pode ver, o elemento está colocado e a propriedade de transformação funciona bem. Em seguida, vou selecionar o segundo elemento de extensão. Quero dizer, este modelo, na verdade, vamos copiar esse seletor daqui E altere o seletor ni. Precisamos de dois. Vamos mudar a família da fonte. Vai ser Croson One Cosi. Então, precisamos do tamanho da fonte , será de 1,5 Rams. Eu vou mudar a cor. Vamos adicioná-lo ao DDT, que é uma cor cinza claro Aqui temos a segunda palmada. Em seguida, vou criar algum espaço entre as letras usando o espaçamento entre letras, e será 0,1 Ram Além disso, vou colocar os elementos no lado direito. E para isso vamos usar a propriedade line com o valor, à direita, o texto é colocado no lado direito. Mas, na verdade, não é disso que precisamos aqui. Se dermos uma olhada na versão final, você verá que o segundo elemento giratório está bem colocado no lado direito Temos que movê-lo um pouco para o lado direito e também para cima novamente, vou usar a propriedade de transformação Precisamos aqui traduzir a função como os valores para os quais vou passar aqui. 0,2 Ram, também linha aqui, menos um Ram. O primeiro valor, 2,2 Ram, move o elemento para a direita horizontalmente em 22 pixels Quanto ao segundo valor, menos uma RAM, ele move o elemento verticalmente em dez pixels O sinal negativo, no caso da direção, é para cima. Quanto aos valores positivos, eles os moveriam para baixo Agora temos o mesmo problema aqui. Vamos atribuir também o bloco de exibição em linha ao segundo elemento Agora, como você pode ver, o problema está resolvido. Temos aqui bons e legais resultados. Por fim, quero adicionar um pequeno efeito de sombra ao logotipo. Quero dizer, os elementos de amplitude. Vamos selecionar todos os elementos de extensão na propriedade de sombra do texto do logotipo com os valores 0,5 Ram, uma Ram. Então a cor vai ser RGBA, cor preta com menor opacidade, e vai ser 0,2 Tudo bem, então aqui temos Parece muito bom com o logotipo. Terminamos agora, é hora de seguir em frente e personalizar os itens de navegação. Vamos continuar e fazer isso na próxima palestra. 10. Itens de navegação de estilo: Tudo bem, na última palestra, criamos o logotipo do site Agora é hora de seguir em frente e continuar estilizando a barra de navegação Nesta palestra, vou estilizar os itens de navegação. Vamos ao código VS. Em primeiro lugar, antes de começarmos a estilizar os itens de navegação, quero mover a navegação para cima. Quero dizer, fora do cabeçalho. Vamos cortar o código daqui e colá-lo aqui. Ok, depois do logotipo, vou ver novos comentários para itens de navegação. Em seguida, vou selecionar o elemento UL que tem o nome da classe Now items. Em primeiro lugar, vou definir a largura. Vai ser 50% Então eu vou colocar os itens de navegação lado a lado, horizontalmente em uma linha Porque agora eles estão colocados verticalmente. Para fazer isso, vou usar o Flex box. Precisamos do Display Flex. Agora, se verificarmos os resultados, você verá que os itens são colocados horizontalmente em uma linha Em seguida, vou criar algum espaço entre os itens e, para isso, vou usar uma das propriedades da caixa flexível chamada justificar conteúdo E vou atribuir a ele um valor chamado espaço par. Isso criará um espaço uniforme entre os itens. Tudo bem, depois disso, vamos selecionar os elementos LI que têm o nome da classe do item. Vou me livrar das balas padrão para isso. Vamos usar o estilo de lista e atribuir a ele o valor none. Como você pode ver, as balas sumiram. Em seguida, selecionarei os elementos de link que precisamos aqui. Sem link. Vamos aumentar o tamanho do telefone. Vou chegar até Ram, depois vou transformar o texto em maiúsculas. Na verdade, precisamos aqui da transformação de texto e do caso de aplicação do valor. E também mude a cor. A cor vai ser branca. Vamos verificar o resultado. Como você pode ver, os itens de navegação parecem muito bons. Em seguida, vou criar algum espaço entre as letras. Vamos fazer com que seja 0,1 Ram. Depois disso, adicionarei um pequeno efeito de sombra aos elementos do link usando a sombra tecnológica. Os valores serão de 0,5 grama por Ram. E a cor preta RGBA com a opacidade de 0,2 Tudo bem, então eu acho que os itens do botão parecem Agora temos que cuidar do último item que será o botão, quero dizer, o botão de preços. Vamos selecionar esse elemento usando o nome da classe agora, PTN. Vamos definir dentro da altura. Vou definir a largura para 13 Ram. Quanto à altura, vou fazer com que sejam cinco Ram. Altere também a cor do plano de fundo. Vamos configurá-lo para branco. Como você pode ver, as alturas com não são aplicadas aos elementos e temos aqui o mesmo problema. Quero dizer, o elemento link, por padrão, é um elemento embutido e, portanto, dentro das alturas não são aplicadas ao elemento, temos que alterá-lo Nesse caso, vou usar o Display Flex porque também precisaremos de outras propriedades da caixa flexível É por isso que eu uso aqui linho e não bloco ou bloco embutido. Agora, se eu verificar o resultado, você verá que a altura interna é aplicada ao elemento que colocará o conteúdo no centro da caixa. E, para isso, vou usar o conteúdo do Justify com o centro de valor E também precisamos do centro de itens de linha, do centro conteúdo justificado Alinhe o elemento no centro horizontalmente. Quanto ao centro do item Linha, ele coloca o elemento no centro verticalmente Agora temos aqui a centralização perfeita. Na verdade. Vou colocar os elementos do link e também a parte inferior no centro verticalmente Para isso, podemos adicionar aqui centro de itens de linha e o problema será corrigido. Agora, os elementos do link e o botão estão bem posicionados no centro Vamos seguir em frente e adicionar aqui mais alguns estilos. Em seguida, vou fazer com que o botão seja arredondado usando o raio, que será a forma, agora o botão está arredondado Além disso, vou adicionar um pequeno efeito de sombra na parte inferior usando sombra caixa com valores de 01 Ram. Então teremos aqui três Ram. A cor será RTP A com a opacidade 0.1 Temos aqui um bom Depois disso, vou tirar o telefone. Vamos aumentar o tamanho do telefone. Serão dois carneiros. Vou usar espaçamento entre letras. Vai ser um 0,1 Ram. Vamos mudar a cor. Vou usar a cor F88 344. Será uma cor laranja, como os itens do botão. Vou colocar o texto em maiúsculas. Vamos usar texanos em maiúsculas. Tudo bem, os itens do botão com o botão parecem muito bons Vou adicionar um efeito de foco ao botão. Na verdade, vou usar o efeito de foco semelhante. Vamos selecionar o botão PTN. Com o passar o mouse, precisamos nos transformar. O valor de Translate Y será -0,2 n. Se eu passar o mouse sobre o botão, ele se moverá para Mas, como você vê, precisamos de uma transição suave. Use a propriedade de transição que precisamos aqui para transformar. A duração do efeito será de 0,3 segundo. Agora temos aqui um efeito de foco agradável e legal. Tudo bem, na verdade, são cerca dos n itens. Agora temos que adicionar a cada item de navegação o menu suspenso, como no projeto finalizado. Para isso, vamos seguir em frente e passar para a próxima palestra. 11. Como criar a marcação HTML do primeiro menu suspenso: Tudo bem, na última palestra personalizamos os itens de navegação e também o botão E agora é hora de seguir em frente e começar a criar o menu suspenso. Quero dizer, o menu suspenso do primeiro item de navegação. Vamos dar uma olhada no projeto finalizado. Se eu passar o mouse sobre o primeiro item de navegação , o menu suspenso aparecerá Como você pode ver, o primeiro menu suspenso consiste em duas partes principais. Temos o lado esquerdo e também temos o lado direito. No lado esquerdo, temos a lista dos recursos. Como você pode ver, quando passamos o mouse sobre os itens da lista, há um pequeno efeito de foco O lado direito é mais complexo. Temos aqui os ícones dos telefones com efeito de foco. Além disso, temos alguns elementos textuais com cores diferentes E lá embaixo você pode ver o botão. Tudo bem, é isso. O que vamos criar nesta palestra. Vou criar a marcação HTML e, em seguida, criaremos o menu principal da cidade Tudo bem, vamos ao código do VS e começar a criar a marcação HTML Temos que inserir os comentários logo após o elemento link, dentro do elemento LI. Vamos inserir seus comentários no menu suspenso. Vai ser a primeira lista suspensa que precisamos aqui, uma lista suspensa. Em seguida, no menu suspenso, abrirei elementos profundos que terão duas classes diferentes. O primeiro será um nome de classe comum, no menu suspenso. Além disso, precisamos aqui, colocar um. Em seguida, vou inserir aqui outro elemento profundo que será o lado esquerdo do menu suspenso que precisamos aqui. Solte um para a esquerda. Além disso, vamos criar o lado direito. Vamos duplicar essa linha de código e alterar o nome da classe Precisamos que você deixe um, certo? Tudo bem, primeiro, vamos cuidar do lado esquerdo. Vou inserir aqui H, três elementos de cabeçalho com os recursos de texto. Depois do título, precisamos de outro desenvolvimento que seja o mínimo, quero dizer, o invólucro dentro do desenvolvimento Vou criar outro que será o item de recursos. Então, vou adicionar aqui o nome da classe, item de recursos. Cada item da lista consistirá em dois elementos. O primeiro será um phonosomicons. Para o segundo, teremos aqui sanelement se dermos uma olhada no projeto finalizado e verificarmos o lado esquerdo Como você pode ver, temos os fonossomicons e também o panelement Vamos inproteger os elementos I com as classes FA solid A star e, em vez disso, aqui o elemento span, o texto será composto por todos os recursos Tudo bem, no geral, teremos 11 itens de lista diferentes. Portanto, vou duplicar o item da lista de recursos dez vezes. Em seguida, temos que alterar os nomes das classes dos telefones e também o conteúdo dos elementos do span Os segundos elementos serão um sólido, caixas A empilhadas Quanto a esse elemento de ventilador, serão mais de 100 elementos. Então, o terceiro fonossômico será um arquivo A sólido Quanto a esse elemento de ventilador, vou inserir mais de 1.000 layouts O próximo fonossômico será um sólido, uma ponta de caneta. Além disso, precisamos mudar esse painel. Vou inserir seu design sem código. Depois disso, o microfone do será uma chave sólida Quanto a este painel, vou inserir seu construtor de temas Então, o próximo ícone será um sólido, uma compra de carros. Como precisamos mudar esse painel, que será o Comércio Eletrônico. Então, teremos uma rede cabeada que também altere esses painéis Teremos aqui o fluxo de trabalho. Então, o próximo será um sólido, uma lâmpada. Quanto a esse painel, vamos inserir aqui o marketing. Em seguida, teremos aqui uma fase sólida de desenvolvedores de código. O próximo ícone será uma área de trabalho sólida. Quanto a este painel, vou inserir exemplos paralelos. Finalmente, precisamos aqui do último ícone que solidifica o painel que será a integração. Ok, vamos falar sobre a primeira parte, quero dizer, o lado esquerdo do menu suspenso. Aqui temos todos os fonomicônicos e as palmadas. Em seguida, temos que pegar aqui do lado direito. Em primeiro lugar, precisamos aqui do título três, que serão serviços. Depois de seguir, vou abrir este menu suspenso de serviços. Então, dentro do desenvolvimento, vou abrir outro D que será o próprio serviço suspenso. Incluirá elementos e também um desenvolvimento que incluirá , em si mesmo, dois elementos de extensão. Vamos inserir aqui o elemento I, que será uma chave Aa solida Então, como eu disse, precisamos aqui de desenvolvimento com o serviço suspenso de nomes de classes. Vou instituir dois elementos de amplitude. O primeiro será o thin builder. Vamos duplicar essa linha de código. O segundo elemento de extensão será o construtor fino número um. Agora vou duplicar o serviço suspenso. No geral, teremos sete serviços suspensos. Vamos duplicar esse código seis vezes. Agora precisamos alterar a fonética e também o conteúdo dos elementos de amplitude O segundo fonsomicon será sólido. Na verdade, precisamos remover esse T aqui, caso contrário, o ícone não será exibido. Vamos nos livrar disso. Como eu disse, o fonómio será um sólido, uma lâmpada Quanto ao mercado de painéis. Quanto ao segundo painel, vou inserir aqui módulos, layouts e temas Então, o próximo fonossômico será um sólido, uma nuvem. Quanto a esses panelementos, vamos entrar na nuvem. E o segundo será o armazenamento em nuvem para designers. O próximo fosmicon será um sólido, um cérebro. Vamos mudar os painéis. Ai Spanel vai criar sites com IA Então, o próximo ícone será um grupo sólido de pessoas. Quanto aos panelementos, precisamos de equipes. Em seguida, a segunda será a colaboração para agências. Então precisamos de um globo sólido. Quanto à hospedagem panelmentseed, a segunda será a hospedagem rápida dos sites Agora temos que mudar o último serviço de cima para baixo. Precisamos de uma coroa sólida. Quanto aos elementos de amplitude, vamos interferir no IP e o segundo será o suporte para 2047 e essas contas Tudo bem, todos os serviços suspensos estão preparados. A última coisa que precisamos fazer é criar o botão que deve ser colocado aqui. Vamos abrir o tipo de botão que será botão. Quanto ao conteúdo, vou me inscrever hoje. Tudo bem Espero que tudo esteja correto. Veremos isso nas próximas palestras. Vamos verificar os resultados que temos aqui. Serviços, todos os ícones são exibidos. Agora temos que seguir em frente e estilizar a primeira lista suspensa para Vamos passar para a próxima palestra. 12. Características de estilo no primeiro menu suspenso: Tudo bem, então, na última aula, criamos a marcação HTML para nosso primeiro menu suspenso. Quero dizer, o menu suspenso do link inicial. Agora é hora de começar a personalizar o menu suspenso. Vamos ao arquivo CSS e logo após o navlink, insira novos comentários no menu suspenso Será o primeiro menu suspenso de que precisamos aqui. Solte um, depois do menu suspenso um. Tudo bem, vamos em frente e selecione um menu suspenso. Em primeiro lugar, vou definir sua posição como absoluta. Vamos posicionar esse elemento de acordo com o elemento pai, que não é um item. Não vou atribuir a nenhum item a posição relativa. Precisamos disso para posicionar elementos infantis. Nesse caso, selecione um de acordo com o elemento pai, que não é um item. Tudo bem, vamos definir as propriedades de cima e de esquerda. A posição superior será 4,9 m. Quanto à posição esquerda, vou fazer -24 m. Vamos verificar o resultado. Como você pode ver, o menu suspenso está posicionado. Agora vou definir a cor de fundo e ela será branca. Tudo bem, aqui temos o menu suspenso. Agora precisamos definir o, com a altura do elemento. Eu vou definir com 96 Ram. Quanto à altura, será de 60 Ram. Em seguida, colocarei recursos e serviços lado a lado, horizontalmente E para isso vou usar o Flex box, precisamos exibir o Flex Se verificarmos o resultado, você verá que os recursos e serviços, ou seja, os lados esquerdo e direito do menu de cima para baixo, são colocados lado a lado na horizontal Tudo bem, depois disso, vou tornar o menu de cima para baixo um pouco arredondado usando o raio da borda Vou configurá-lo para um Ram. Além disso, vou criar um pequeno efeito de sombra usando a sombra Po. Os valores serão 01 Ram, depois três Ram como cor. Vou usar o valor RGBA. A cor será preta com menor opacidade, 0,2, como você pode ver nos cantos do menu suspenso ao redor dela E também temos aqui efeitos de sombra agradáveis e legais. Em seguida, vou criar algum espaço dentro do menu suspenso para isso. Vamos usar pudim Vou configurá-lo para dois carneiros. Tudo bem, é isso. Sobre o elemento drop one, quero dizer o elemento do invólucro Em seguida, vou cuidar dos lados esquerdo e direito. Vou selecionar uma opção para a esquerda e definir sua largura. Serão 30% Além disso, vou criar algum espaço no lado direito do elemento usando preenchimento, certo? O valor será de quatro m. Agora, na primeira parte em que estou, o lado esquerdo tem a largura e também temos algum espaço depois do lado esquerdo. Em seguida, vou duplicar esse código e fazer o mesmo para o lado direito também A largura do lado direito será de 70%. Além disso, precisamos aqui de preenchimento à esquerda E vai ser para correr. Tudo bem, em seguida, vou cuidar dos títulos dos dois lados Precisamos dos mesmos estilos para os dois títulos. Vou selecionar os dois. Precisamos derrubar um à esquerda, H três. Vamos duplicar o código e mudar a esquerda para a direita. Vamos adicionar aqui estilos para o título. Em primeiro lugar, vou mudar a família de telefones. Vai ser a letra cursiva de Molly. Em seguida, vou definir o tamanho do telefone para 1,8 Ram. Precisamos de cor. Será a cor 86987 Então, como você pode ver, os títulos parecem bons. Em seguida, vou criar algum espaço na parte inferior usando preenchimento. No fundo, será um Ram. Além disso, precisamos de margem. Na parte inferior, serão três RAM e criarão uma borda na parte inferior. Precisamos aqui na parte inferior, a largura será de 0,2 Ram. Então precisamos de sólido como a cor que vou usar aqui, RGBA, 134-15-2167 e a opacidade será 0,5. Eu usei aqui a Vamos verificar. Como você pode ver, temos aqui uma borda bonita e fresca na parte inferior. E, na verdade, os títulos dos lados esquerdo e direito parecem muito bons Tudo bem. Em seguida, vamos selecionar o item da lista de recursos. Esta parte dos dois elementos que são colocados dentro do item da lista de recursos. Vou selecionar o item da lista de recursos, vamos definir a margem. Precisamos de 1,5 quadro na parte superior e inferior e zero nos lados esquerdo e direito Em seguida, vou colocar os elementos horizontalmente, lado a lado usando a caixa flexível Também precisamos de um item de linha. Ele alinhará os elementos no centro verticalmente e, em seguida, alterará o tipo do cursor, tornando-o Ok, agora temos algum espaço entre os itens e também o cursor está alterado. Depois disso, vou personalizar os ícones e, em seguida, os elementos de extensão. Vamos começar com os ícones. Vou selecionar o item de recursos seguido pelos elementos. Vamos dizer que o tamanho da fonte será de dois Rams. Vou definir a largura para quatro Ram e depois mudar a cor. A cor será cinza, que usamos recentemente. Vamos verificar. Como você pode ver, os ícones parecem muito bons. Vamos continuar personalizando os elementos do ventilador. Vou selecionar novamente o item da lista de recursos seguido pelos elementos do ventilador. Vou aumentar o tamanho do telefone, será de 1,8 Ram. Quanto à cor, vou usar a mesma cor. Quero dizer, a cor cinza. Como você pode ver, os painéis parecem muito bons. A única coisa que precisamos fazer nesta palestra é criar um pequeno efeito de foco. Depois de passarmos o mouse sobre o ícone ou o elemento span, eles devem mudar de cor Vamos seguir em frente e fazer isso. Vou selecionar Recursos, um item da lista com o mouse Também precisamos dos elementos dela. Temos que selecionar elementos de extensão. Depois de passarmos o mouse sobre os elementos, precisamos mudar a cor A cor vai ser de duas a duas. É de cor cinza escuro. Agora, se eu passar o mouse sobre o, você verá que a cor mudou Mas precisamos de uma transição suave. Vamos adicionar aos dois elementos a propriedade de transição. Precisamos da sua cor. E a duração será de 0,3 segundos. Agora, se eu passar o mouse sobre os itens, eles mudarão de cor suavemente Eu acho que parece muito bom. Em seguida, temos que cuidar do lado direito. E para isso, vou passar para a próxima palestra. 13. Serviços de estilo no primeiro menu suspenso: Ok, na última palestra, estilizamos o lado esquerdo do menu suspenso, quero dizer, a quero dizer E agora temos que cuidar da segunda parte do nosso menu suspenso Quero dizer, a parte de serviços, do lado direito. Vamos até o código VS e selecione Serviços suspensos. Eu vou definir a altura, vai ser 45 carrinhos de bebê Além disso, vou alinhar os elementos usando novamente o livro S flax Precisamos de display flex. Temos que mudar a direção porque temos que alinhar os elementos verticalmente Portanto, precisamos que a direção da flexão seja a coluna. Tudo bem, agora vou selecionar o serviço suspenso em si novamente. Vamos usar a caixa flexível. Precisamos de display flex. Em seguida, temos que criar um espaço na parte inferior do elemento usando a margem inferior. Vai ser um 3,5 Ram. Em seguida, vou mudar o cursor e fazer com que ele aponte. Tudo bem, agora vou alinhar os elementos no centro verticalmente Vou adicionar aqui um centro de itens de linha. Como você pode ver, os ícones e os elementos textuais são colocados no centro Depois disso, vou personalizar os ícones. Vamos continuar e selecionar o serviço suspenso, seguido pelo elemento. Eu vou aumentar dentro da altura. Vou configurar os dois para 5,5 Ram. Isso também é o mesmo para a altura. Então, vamos mudar o plano de fundo. Vamos mudar o plano de fundo. Vou usar a função de gradiente linear. A direção da transição de cores será duas, certo? Quanto às cores, a primeira cor será B1501. Quanto à segunda cor, vou usar 723 Essas são as cores roxas. Os mais claros e os mais escuros podem ver a fonética. Quero dizer, essas caixas têm o gradiente linear. Em seguida, vou para os itens flexíveis. Temos que colocá-los em duas colunas. Vou usar flex wrap no valor p. Agora, os itens são colocados em duas colunas Temos aqui resultados muito melhores. Depois disso, adicionarei aqui mais alguns estilos. Precisamos arredondar as caixas e, para isso, vamos usar o raio da borda com o valor de 50%. Agora os elementos são arredondados e temos que colocar os ícones no centro desses círculos Para isso, vou usar o livro X. Precisamos exibir linho e, em seguida, justificar um centro de conferências e um centro de itens de linha Agora, como você pode ver, os ícones estão perfeitamente centralizados. Depois disso, vamos personalizar os ícones. Precisamos aumentar o tamanho do telefone. Serão 2,5 Ram. Então eu vou mudar a cor. Vamos torná-lo branco. Além disso, vou definir o Po Shadow para 0,5 m, dois Ram. Na verdade, precisamos aqui m. Quanto à cor, vou usar o valor RGBA, mas neste caso precisamos usar a cor roxa O primeiro valor será de um a seis. Então teremos aqui 35. Então, o próximo será 218 como opacidade. Eu vou dizer 2.3 Ok, os ícones parecem muito bons. Em seguida, adicionarei um pequeno espaço no lado direito de cada ícone. Vamos adicionar aqui a margem. Certo e vá até a rampa. Ok, depois disso, vou criar um pequeno efeito de foco Depois de passarmos o mouse sobre os serviços, devemos aumentar o tamanho dos ícones Vou selecionar o serviço suspenso Com o mouse. Então, precisamos de elementos. Para aumentar o tamanho do elemento, vou usar a função de escala. Precisamos transformar, precisamos transformar escala. E vou inserir aqui 1.1 Agora, se eu passar o mouse sobre os ícones, eles aumentarão, quero dizer, o tamanho do ícone Vamos tornar esse efeito mais suave. Use a transição. Precisamos nos transformar aqui. E a duração será de 0,3 segundo. Agora temos aqui resultados muito melhores. O tamanho do ícone aumenta com o efeito suave. Tudo bem, em seguida, vou cuidar do item de serviço suspenso. Quero dizer, esses elementos textuais, temos aqui dois elementos diferentes e temos que colocá-los verticalmente. Vamos continuar e selecionar o item de serviço suspenso. Use o Flex box. Precisamos exibir linho. Então temos que mudar a direção. Vai ser uma coluna. Agora, como você pode ver os elementos textuais, os elementos de extensão são colocados verticalmente Como você pode ver agora, todos os ícones têm a mesma cor de fundo. Se dermos uma olhada no projeto finalizado, você verá que cada item tem uma cor de fundo diferente. Precisamos cuidar disso. Vou selecionar o primeiro serviço suspenso que precisamos aqui, seletor de filhos E temos que especificar aqui o número um. Então, precisamos de elementos. Vamos examinar o plano de fundo também, precisamos pegar a sombra da caixa a partir daqui. Agora, como você pode ver no primeiro fômicon, tem a cor de fundo roxa Na verdade, vou duplicar esse código seis vezes porque, no geral, temos sete ícones Temos aqui sete elementos. Vamos mudar os seletores do gráfico. Precisamos ouvir os números de 1 a 7 Agora temos que mudar as cores de fundo O segundo ícone serão as cores de fundo. 31 DCA. Um. Quanto à segunda cor, vou instituir 23683 e também mudar a sombra da caixa que precisamos 35214131. Vamos verificar o navegador. Então, como você pode ver, o segundo fônico agora tem uma cor verde Quero dizer a cor de fundo. Vamos cuidar do terceiro item. Precisamos aqui, cores, 351, EC. Para o segundo chamador , será 22 DCF Também altere a sombra da caixa que precisamos aqui, 45 e, novamente, 45207 A terceira fonêmica está pronta. Vamos seguir em frente e cuidar do quarto item. A cor será 0030. Esse é o segundo que precisamos aqui, 03. 48. Em seguida, vou mudar a sombra da caixa que precisamos aqui. 3180216. Vamos verificar o navegador. O quarto telefone, o Atomican, é personalizado. Vamos passar para o quinto. Precisamos aqui do F9625. Quanto ao segundo chamador, será FA 751 E então mude a sombra da caixa que precisamos aqui, 250, depois 11728 Temos aqui a cor de fundo laranja. Vamos passar para o próximo microfone do telefone, que é o sexto aqui. Três a 93f. Então, a segunda cor será 2371f, enquanto a sombra será 35, depois 113255 Aqui temos o sexto ícone e agora temos que cuidar do último ícone de fontes. A primeira cor será 28235. Quanto à segunda cor, precisamos aqui, 202, 52c, uma sombra de caixa Vamos inserir aqui 32, depois 3744. Ok, então todas as ômicas telefônicas estão preparadas. Eles parecem muito bonitos. E agora temos que cuidar dos elementos de amplitude. Quero dizer, esses elementos textuais. Em primeiro lugar, vou cuidar do primeiro elemento de extensão. Vamos selecionar o item de serviço suspenso e, em seguida, precisamos abranger a seleção da criança. Precisamos do primeiro elemento de amplitude. Vamos mudar a família telefônica. Vai ser Molly Cursive. Em seguida, vou definir a fonte. Muito ousado. A cor será 150f1. Em seguida, vou definir o espaçamento entre letras para 0,1 m. Vamos transformar o texto em maiúsculas Precisamos aqui transformar o texto e não renderizar o valor em maiúsculas Como você pode ver, os estilos são aplicados ao primeiro elemento do pan. No momento, eles têm a mesma cor, temos que mudar isso. E também precisamos aumentar o tamanho dos elementos da panela. Vamos selecionar aqui, abrir o item de serviço e seguir o painel Defina o tamanho do telefone para 1,6 Ram. Agora, a fonte dos dois elementos de rotação é aumentada. Quanto às cores, vou selecionar o primeiro serviço. Em seguida, precisamos exibir o item de serviço seguido pelos elementos giratórios. Novamente, precisamos aqui de um seletor de chi. Precisamos do primeiro elemento de rotação. Vamos pegar a cor daqui e inseri-la abaixo. Agora, somente o primeiro elemento de extensão tem a cor roxa. Em seguida, precisamos fazer o mesmo com o resto dos elementos. Vou duplicar esse código seis vezes. Vamos mudar os seletores. Precisamos de números de um a sete, como fizemos os microfones fonográficos, a segunda cor Vai ser 31c1. É uma cor verde. Então, o terceiro spannelment será 3f51c. Vamos mudar todas as cores e depois verificar o navegador. Em seguida, precisamos de 0030. Então, o quinto item será f9625. Então, precisamos de 3293 FF. Quanto aos últimos elementos de amplitude que precisamos aqui, 28 a 35. Tudo bem, vamos verificar o navegador. Como você pode ver, todos os elementos de span têm as chamadas adequadas. Agora temos que personalizar os elementos do segundo intervalo. Para isso, vamos selecionar o menu suspenso Service Item Span, e precisamos aqui de um seletor de bate-papo com o número dois Vou ajustar o telefone para 300 e também mudar a cor. Vamos usar aqui 66, precisamos aqui do sinal de libra, depois 6672 É uma cor cinza. Como você pode ver, as cores são alteradas para os elementos do segundo intervalo. Por fim, temos que personalizar o botão. Vamos continuar e selecionar o botão direito do menu suspenso. Primeiro de tudo, vamos definir a largura. Será 100% e a altura será de quatro Ram. E também altere a cor de fundo. Vamos usar aqui a cor 3776. Aqui temos o fundo. Precisamos nos livrar da borda dobrável. Vamos configurá-lo para nove e também fazer os cantos arredondados usando o raio da borda Serão dois Ram. Agora, a parte inferior parece muito melhor. Vamos cuidar da fonte. Vou definir o tamanho da fonte para um fórum de um ponto. Então, o peso da fonte ficará em negrito. Como vou transformar o texto em maiúsculas, mudar as cores, a cor será branca Em seguida, adicionarei algum espaço entre as letras. E, finalmente, mude o cursor, faça-o apontar. Tudo bem, então a segunda parte do menu suspenso está preparada e estilizada Parece muito bom. Agora temos que fazer o menu suspenso funcionar. Quero dizer, temos que ocultá-lo por padrão e depois exibi-lo quando passamos o mouse sobre o romance, seja, a primeira casa do romance, também precisamos criar esse Para isso. Vamos passar para a próxima palestra. 14. Como fazer o menu suspenso funcionar: Tudo bem, na última aula, terminamos de estilizar o menu suspenso. E agora temos que fazer isso funcionar. Por padrão, o menu suspenso deve estar oculto e, quando passamos o mouse sobre o item de navegação , ele deve aparecer com uma transição suave Vamos dar uma olhada no projeto finalizado. Como você pode ver, o menu suspenso está oculto por padrão. Depois de passar o mouse sobre o item de navegação , ele aparecerá Você pode ver aqui esse triângulo que precisamos criar nesta palestra também Vamos continuar e voltar ao código VS. Em primeiro lugar, vou criar o triângulo para o qual vou usar depois do pseudo-elemento O triângulo fará parte do item de navegação, portanto, não precisamos aqui nenhum item seguido pelo seletor infantil Precisamos do primeiro item de navegação. E então eu vou usar após o pseudo-elemento, o conteúdo vai ficar vazio Então eu vou definir a posição. Vai ser absoluto. Vou posicionar o elemento de acordo com o elemento pai. Nesse caso, o elemento pai não é um item. Mas agora, como você pode ver, ele já tem a posição relativa. Em seguida, vou definir as propriedades superior e esquerda. As duas posições serão de 2,9 Ram. Quanto à posição esquerda, vou chegar a 50%. O triângulo deve ser colocado no centro do item de navegação. Para centralizar o elemento, vou usar a função transform translate x com o valor -50%. O triângulo será criado com um pequeno truque usando bordas Vou usar a borda esquerda com os valores sólidos e a cor será transparente. Então eu vou duplicar esse código duas vezes. Vamos mudar da esquerda para a borda direita, os valores serão os mesmos. Então precisamos do fundo da borda. Em vez de transparente, vou usar a cor branca. Como você pode ver, o triângulo é criado e colocado no centro da luz de navegação. Agora vou ocultar esse elemento e também o menu suspenso. Para ocultar o elemento, vou usar opacidade zero e visibilidade Também precisamos da mesma coisa para o menu suspenso. Agora, como você pode ver, os dois elementos estão ocultos. E agora temos que apelar contra eles. Depois de passarmos o mouse sobre nenhum item I aqui, nenhum item com o mouse seguido pelo F para ver os elementos, precisamos dessas duas propriedades para exibir o Precisamos que a opacidade seja única e a visibilidade visível. Além disso, vou adicionar aqui o menu suspenso. Vamos colocar aqui a opacidade 1 e a visibilidade viável. Agora, se eu passar o mouse sobre o item nenhum no triângulo, é sim, precisamos aqui para soltar um Agora, os dois elementos estão sendo exibidos. A única coisa que preciso fazer é tornar essa aparência um pouco mais suave E para isso eu vou usar a transição. Os valores serão todos de 0,3 segundos. Agora, se eu passar o mouse sobre o item do botão , obteremos uma aparência agradável, legal e suave do menu suspenso e do Tudo bem, isso é sobre o primeiro menu suspenso. Agora temos que cuidar do segundo. E para isso, vamos para a próxima palestra. 15. Criando a marcação HTML para o segundo menu suspenso: Ok, na última palestra, terminamos de trabalhar no primeiro menu suspenso, que funciona bem e parece muito bom e legal Agora é hora de seguir em frente e cuidar do segundo menu suspenso. Vamos dar uma olhada no projeto finalizado. Se passarmos o mouse sobre o segundo item, que é clientes, o segundo menu suspenso aparecerá Como você pode ver, ele consiste em quatro partes diferentes. Cada um deles tem uma cor de fundo bonita e legal com alguns efeitos de gradiente linear Além disso, cada parte consiste em um P. Então temos aqui o título e algum texto. Ok, então é isso sobre o segundo menu suspenso. Como de costume, criaremos a marcação HTM e depois cuidaremos do estilo Precisamos encontrar o segundo item de navegação , que é clientes. Logo após os elementos do link, vou inserir comentários para o segundo menu suspenso. Em seguida, vou abrir os desenvolvimentos com aulas. Uma lista suspensa também, precisamos de uma lista suspensa de duas. Em seguida, vou para o Open Development, que terá o item de clientes com o nome da classe. Como eu disse, cada item consistirá em um ícone de telefone. Em seguida, teremos o título e o parágrafo. Vamos abrir os elementos I, que terão classes a regulares e, em seguida, um envelope A. Depois disso, precisamos aqui de H, três elementos de cabeçalho. O texto será de agências de web design. Além disso, precisamos aqui de um parágrafo com um pouco de porcaria para colocar aqui uma dama, vou digitar loam Então temos que especificar aqui o número de palavras. Nesse caso, vou inserir suas 15 palavras fictícias. Agora vou apertar Enter. Como você pode ver, temos aqui um texto fictício com 15 palavras Tudo bem, vamos falar sobre o primeiro item. Como você sabe, teremos quatro itens no total. Vou duplicar esse desenvolvimento três vezes. E então temos que mudar aqui os ícones e também os títulos. O segundo item, quero dizer, o segundo ícone será sólido. Então precisamos da FA Earth America. Quanto ao título, vou inserir aqui, donos de lojas online. Em seguida, precisamos alterar o terceiro item. Na verdade, temos aqui um pequeno erro, normal. Vamos mudar as classes do terceiro ícone. Serão FA Brands, depois A sketch. Quanto ao elemento de título, vou instituir web design, free lancers Agora temos que cuidar do último item. Precisamos mudar as classes do ícone, precisamos de FA solid FA store. Quanto ao elemento de título, vou inserir seus proprietários de pequenas empresas. Tudo bem, então eu acho que isso é sobre a marcação H tel. Vamos dar uma olhada. Como você pode ver, temos aqui o segundo menu suspenso. Quero dizer, a marcação H Tl. E agora é hora de estilizar esses elementos. E para isso, vamos para a próxima palestra. 16. Estilizando o segundo menu suspenso: Tudo bem, na aula anterior, criamos a marcação HTML para nosso segundo menu suspenso E agora é hora de estilizá-lo e depois fazê-lo funcionar. Vamos voltar ao código do VS e vou adequar novos recursos comuns para o segundo menu suspenso de que precisamos aqui Passe dois e, em seguida, final do menu suspenso dois. Como você sabe, teremos cinco menus suspensos diferentes e todos eles terão estilos comuns Em vez de escrever os mesmos estilos repetidamente, vou selecionar todos eles usando um nome de classe comum, que atribuímos aos menus suspensos. O nome da classe está aqui, no menu suspenso. Vou selecionar todos eles. Pegue alguns desses estilos aqui nos estilos comuns. Bem, essas duas linhas de código, posição I, posição absoluta e posição superior. Também teremos aqui a cor de fundo. Depois, essas três linhas de código, raio de borda, caixa de transporte e preenchimento Além disso, vou pegar esses estilos e adicioná-los aqui também. Em seguida, vou mudar aqui, veio em vez de menu suspenso, que precisamos aqui, menu suspenso. Na verdade, vou pegar esse código e colá-lo aqui. Além disso, vou remover a seleção infantil daqui porque precisamos de um triângulo para cada item de navegação. Na verdade, acho que está tudo pronto. Vamos ao navegador e verificamos se está tudo funcionando bem. Como você pode ver, alguns desses estilos são aplicados à lista suspensa, e a já está no segundo menu suspenso. Vamos até o código do VS, selecione a segunda lista suspensa e adicione alguns estilos a ela. Precisamos aqui definir a largura como 90 Ram. Então precisamos de altura , serão 37 Rams. Vou definir a posição esquerda, será -27 Ram E então precisamos usar livros flexíveis. Vamos configurar a tela para flexionar e verificar os resultados. Como você pode ver, agora temos resultados muito melhores. Os itens são bem colocados horizontalmente em uma fileira. Agora temos que selecioná-los. Personalizar. Vamos selecionar o item do cliente com o qual vou definir como 100%. Então, precisamos que a margem seja zero. E então 0,5 Ram. Precisamos aqui de 0,5 Ram. Além disso, vou definir o preenchimento, vamos configurá-lo para 0,7 Ram Agora temos algum espaço entre os itens. Em seguida, volto a usar livros flexíveis, a fim de alinhar os elementos dentro do item do cliente Vamos configurar a tela para flexionar. Então, precisamos mudar a direção porque temos que alinhar os elementos verticalmente E para isso, temos que definir a direção da flexão para a coluna. Além disso, vou usar o centro de Align Items. Está bem? Como você pode ver, os elementos dentro dos itens são colocados no centro usando livros flexíveis Vamos colocar o cursor no ponteiro. Ok, a próxima coisa que vou fazer é mudar a cor de fundo de cada item do cliente. Como você lembra, cada item tem uma cor de fundo diferente com gradiente linear Então, vamos fazer isso para cada item. Vou selecionar o primeiro usando o seletor de filhos. Vou especificar aqui o número um. Quanto ao plano de fundo, como eu disse, precisamos usar gradiente linear A primeira coisa que precisamos fazer aqui é definir a direção. Vou ajustá-lo para 135 graus. Em seguida, vou definir a primeira cor, que será sete. Quanto à segunda cor , será um sete. Vamos verificar os resultados. Como você pode ver, o primeiro item tem cor de fundo. Vou fazer com que os cantos do item sejam arredondados. Para isso, vamos usar aqui o raio da borda com a rampa de valor um Agora temos um bom raio de fronteira aqui. Vamos mudar a cor do resto dos itens também. Vou duplicar esse código três vezes, depois vou mudar os números Precisamos de números de um a quatro. Quanto às cores, vou trocá-las. A primeira cor para o segundo item será F 2f6ff Quanto ao segundo, será CAD nove F. Vamos verificar o segundo item que temos aqui na cor azul celeste Em seguida, precisamos alterar as cores do terceiro item. A primeira cor será F1fd, F sete. Quanto à segunda cor, vamos torná-la F, F, F. É verde E agora temos que mudar as cores do último item, vamos inserir aqui FFF four ED Para a segunda cor, vamos adicionar aqui 87c5. Tudo bem, então todos os quatro itens têm uma cor de fundo bonita e legal com efeito de gradiente linear Agora temos que cuidar dos elementos dentro dos itens. Vamos começar com os átomos do telefone. Antes de tudo, vou aumentar o tamanho dos itens. Vamos selecionar aqui os elementos e definir o tamanho do telefone para dez Ram. Como você pode ver, o tamanho dos ícones é maior. Agora temos que mudar as cores de cada item separadamente. Precisamos selecionar o primeiro item seguido pelo ícone do telefone. Vamos definir a cor para AC 63 A. Considerando que o primeiro ícone do telefone mudou de cor, vamos fazer o mesmo com o resto dos ícones. Vou duplicar esse código três vezes e alterar os números do seletor de gráficos e também alterar as cores A segunda cor será 15f3. Então teremos aqui um F C F 77. Quanto ao último ícone que vou usar aqui, cor FF 8645 Como você pode ver, os ícones são muito bonitos, eles têm cores diferentes. Agora temos que cuidar dos cabeçalhos, então vamos selecionar os cabeçalhos Precisamos do item do seu cliente seguido pelo elemento de cabeçalho H três. Vou aumentar o tamanho do telefone. Vai ser de 2,5 fram. Então teremos aqui o peso do telefone. Vou configurá-lo para 300. Em seguida, precisamos transformar o texto em maiúsculas. Além disso, vou definir uma linha para o centro. A próxima coisa que vou fazer é alterar a altura da linha. Vamos configurá-lo para 3,5 Ram. E também crie algum espaço na parte inferior da margem com o valor 0,7 Ram. Agora, os títulos parecem muito melhores. Como convidados, temos que mudar as cores dos títulos, e as cores devem corresponder às cores dos ícones Eu vou fazer isso de uma forma simples. Vou adicionar aqui um seletor para o título, precisamos do item do seu cliente Então, precisamos do seletor de gráficos. Precisamos especificar aqui um. Temos que adicionar aqui H três elementos de cabeçalho. Vamos copiar o seletor e adicioná-lo aos demais elementos Vou alterar os números do seletor de gráficos. Precisamos aqui de números de um a quatro. Vamos ao navegador. Como você pode ver, os títulos têm as cores adequadas e têm uma aparência muito bonita A única coisa que preciso fazer é personalizar o gráfico de potência. Vamos selecionar o item do cliente, seguido pelos elementos. Vamos definir o tamanho da fonte para 1,6 Ram. Então, o peso da fonte será 300. E também vou centralizar o uso do centro da linha de texto. Agora, tudo parece muito bom, na verdade. Com o segundo menu suspenso, terminamos. Agora é hora de seguir em frente e cuidar do terceiro menu suspenso. 17. Criando a marcação HTML para o terceiro menu suspenso: Tudo bem, na aula anterior, terminamos de estilizar o segundo menu suspenso Quero dizer, o menu suspenso do cliente. Agora é hora de seguir em frente e criar o terceiro menu suspenso Vamos dar uma olhada no projeto finalizado. Se passarmos o mouse sobre o item do produto , veremos aqui o terceiro menu suspenso, que eu acho muito bom. Temos aqui alguns ícones diferentes e também alguns detalhes sobre os produtos. E lá embaixo você pode se sentar. A primeira coisa que precisamos fazer é criar a marcação HTML, precisamos encontrar o terceiro item de navegação que é produtos e depois do elemento link, quero dizer, a tag de fechamento do link, temos que inserir novos comentários no menu suspenso Em seguida, vou abrir a tag com o menu suspenso de classes e o menu suspenso três. Em seguida, vou abrir outra etiqueta de imersão, que serão os produtos Será o invólucro do conteúdo. Em seguida, vou inserir aqui o produto em si. Esse elemento incluirá elementos fonosômicos e dois elementos de amplitude Se dermos uma olhada no menu suspenso, você verá aqui os elementos fonosômicos e também os dois elementos de extensão e Vamos inserir aqui elementos I com as classes sólidas, uma chave inglesa que precisamos Então eu vou abrir T. Vou inserir aqui dois elementos de extensão. O primeiro será o Theme and Page Builder. Em seguida, precisamos do segundo elemento de extensão no qual vou inserir o texto a seguir, o tema número um e o Visual Page Builder. Vamos falar sobre os produtos em geral, teremos cinco produtos, portanto, vou duplicar esse item quatro vezes E então temos que fazer aqui pequenas mudanças. Vou mudar os fonossomicons e também o conteúdo do elemento span O segundo fonossomicon será um arquivo sólido e, em seguida, o primeiro elemento de extensão será o plug-in Page Builder Quanto ao segundo elemento de extensão, vou abordar temas e layouts in-situ Então, o terceiro fonossômico será uma fase sólida de abertura de um livro Quanto aos elementos do pan, vou inserir o tema extra da sua revista. Quanto ao segundo sanelement, vamos inserir o melhor tema para o blogueiro As 16h serão um envelope sólido como O primeiro será o Mal Bloom E-mail opt-in. Quanto ao segundo, o painel será o melhor plug-in de opção de e-mail Para o último item do produto, o telefone será sólido. Quanto aos painéis que sou, insira seu Quanto aos segundos telefones, Micon promoverá o compartilhamento social Tudo bem, e a última coisa que eu tenho que fazer é criar o botão que precisamos inserir abaixo Vamos abrir o botão. O tipo será botão. Quanto ao conteúdo, vou entrar para baixar Ok. Isso fica por volta do terceiro menu suspenso. Quero dizer, a marcação H t. Vamos verificar os resultados. Se eu passar o mouse sobre o item do produto, você verá aqui o menu suspenso Ele já tem alguns estilos, porque definimos alguns estilos comuns na última aula para menus suspensos Portanto, ele já tem alguns estilos. Agora temos que fazer com que pareça a versão final para isso Vamos passar para a próxima palestra 18. Estilizando o terceiro menu suspenso: Na última aula, criamos a marcação HTML para o terceiro menu suspenso Como você pode ver, o menu suspenso já tem alguns estilos porque já definimos alguns estilos comuns para cada menu suspenso. Agora temos que continuar e finalizar o estilo do terceiro menu suspenso Vamos até o código do VS e inserir novos comentários no menu suspenso. Vamos seguir em frente e selecionar o menu suspenso três. Vou definir largura e altura. A largura será 40. Quanto à altura, vou configurá-la para 47 ran em seguida, defino a posição esquerda, será 50%. Além disso, precisamos censurar o elemento usando transform translate x -50%. O elemento está perfeitamente posicionado no centro Por fim, estou adicionando que, na verdade, o menu suspenso tem preenchimento, mas vou sobrescrever o estilo padrão Vamos usar o preenchimento agora. Por padrão, cada menu suspenso tem o teclado dois. E eu vou mudar o acolchoamento na parte superior e vou fazer dele um Ram Quanto ao resto dos lados, vou deixar como dois M. Tudo bem, depois disso, vou personalizar os produtos. Esse elemento, na verdade, como eu disse, os produtos serão semelhantes aos serviços da primeira lista suspensa, o telefone, os atômicos e também esses elementos de extensão serão semelhantes Se eu der uma olhada na versão final, você verá que elas são bem parecidas. Vou usar esses blocos do primeiro menu suspenso. Vamos rolar para cima e descobrir que eles oferecem serviços suspensos. Aqui nós os temos. Vou adicionar aqui produtos. Vamos ver o que temos agora. Como você pode ver, os ícones e os painéis são colocados horizontalmente Vamos adicionar aqui os produtos I. Agora, os fonossomicons não estão visíveis porque temos que definir definir Para isso, na verdade, vamos nos livrar desses espaços a partir daqui. Vou adicionar aqui os produtos infantis 1. Então, se verificarmos o resultado, você verá que o primeiro fonossomicon tem sua cor de fundo e parece muito bom Temos que fazer a mesma coisa com o resto dos ícones. Vou copiar esse seletor e editar aqui. Vamos mudar o seletor de âncora. Precisamos aqui de dois, depois fazemos o mesmo para o terceiro item, também para o quarto, e precisamos do mesmo para o quinto ícone também. No geral, teremos cinco produtos. Vamos verificar, como você pode ver no telefone, ícones incríveis parecem muito bons. Também precisamos do mesmo efeito de foco aqui. Quero dizer, esse efeito de foco, vamos adicionar o seletor de produtos aqui também Precisamos passar o mouse e depois os elementos. Agora temos o mesmo efeito de foco. Tudo bem, a próxima coisa que eu tenho que fazer é cuidar dos elementos da coluna vertebral. Vou adicionar aqui o produto que é o invólucro dos elementos de extensão Agora, esses elementos giratórios estão alinhados verticalmente. A próxima coisa que vou fazer é adicionar aqui o produto e, em seguida, o elemento span. Isso mudará o tamanho do telefone dos elementos de extensão. Como você pode ver, o tamanho do telefone foi alterado. Agora temos que personalizar cada elemento de extensão. Vou começar com o primeiro. Vamos adicionar aqui os produtos e, em seguida, o elemento span. Com o seletor de gráfico, precisamos do primeiro elemento de amplitude. Se eu verificar, você dirá que o primeiro elemento de extensão é personalizado. Agora temos que mudar as cores do primeiro elemento do ventilador. Precisamos das cores adequadas. Nós o temos no primeiro menu suspenso. Estou indo para um novo seletor de produtos aqui. Precisamos do produto filho 1. Em seguida, precisamos do desenvolvimento seguido pelos elementos span, novamente com o seletor filho Agora temos que aderir a um. Vamos verificar. Como você pode ver, o primeiro elemento da panela tem uma cor diferente. A mesma cor que temos para o ícone. Vamos fazer o mesmo com o resto dos elementos de extensão. Vou copiar esse seletor aqui. Precisamos alterar o número do produto. Vai ser o segundo. Então, vamos fazer o mesmo com o terceiro produto. Em seguida, temos o produto número quatro e, em seguida, precisamos do mesmo para o produto número cinco. Como você pode ver, todos os elementos de extensão, os primeiros elementos de extensão, mudaram de cor e têm uma aparência muito boa. Agora temos que cuidar dos elementos do segundo intervalo. Vou adicionar aqui o seletor para os produtos que precisamos aqui, o intervalo com o seletor filho, intervalo com o seletor filho, precisamos aqui do segundo phanlementow Como você pode ver, o segundo fenômeno parece muito bom. Tudo bem, a próxima coisa que vou fazer é definir o espaço entre os produtos. Vou voltar para a terceira lista suspensa. Vamos selecionar produtos e definir a margem. Precisamos de margem na parte superior e inferior, 1,7 Ram. Quanto ao lado esquerdo e direito , será zero. Agora temos que cuidar do fundo. Vamos continuar e estilizá-lo. Selecione três opções suspensas seguidas pela parte inferior. Eu vou definir a largura, vai ser 100%, então a altura será de quatro m. Vamos mudar a cor do fundo. Vai ser a cor roxa que precisamos aqui, 9544c. Em seguida, vou me livrar da borda da falha. Além disso, vou arredondar o botão usando o raio da borda , serão dois Ram Depois disso, vou cuidar do telefone. Vamos mudar o tamanho do telefone. Vai ser 1.4, então eu vou fazer os parafusos do telefone Vamos transformar o texto em maiúsculas e mudar a cor. Precisamos que a cor seja branca. O botão parece muito bom. Em seguida, vou aumentar o espaço entre as letras. Vamos fazer com que seja 0.1 Também mude o ponteiro do cursor. Finalmente, vou colocar o botão ligeiramente para baixo. Vamos fazer isso usando transform. Traduza y com o valor um r. Ok, então é isso. O terceiro menu suspenso parece muito bom. E agora temos que seguir em frente e cuidar da próxima. 19. Como criar a marcação HTML para o quarto menu suspenso: Tudo bem, na aula anterior, terminamos de estilizar o terceiro menu suspenso, o que eu acho muito bom E agora temos que seguir em frente e começar a criar o próximo menu suspenso. Quero dizer, o menu suspenso para o link de contato. Vamos dar uma olhada no projeto finalizado. Aqui temos o quarto menu suspenso. Consiste em fônons e alguns links. E também temos aqui embaixo do botão. Ok, vamos começar a criar a marcação HTM. Temos que encontrar o quarto item sem contato. E vou inserir aqui comentários para o menu suspenso quatro. Em seguida, vou abrir a tag profunda, que terá duas classes diferentes. O primeiro será o menu suspenso de nomes de classes comuns. Quanto ao segundo, será um menu suspenso de nomes de classes individuais, abaixo de quatro. Em seguida, precisamos abrir outro elemento profundo e serão as opções de contato. Em seguida, vou inserir outra tag. Ele consistirá em elementos de ph e span. Vou abrir um envelope A sólido para as aulas. Em seguida, vou instituir um painel, que entrará em contato geral Teremos seis desenvolvimentos diferentes. Vamos duplicá-lo cinco vezes, depois trocar os pontões e também os O segundo ícone será um bem comum sólido. Quanto ao elemento de amplitude, vou interferir no bate-papo com as vendas. Então, o próximo fonossomicon será um sólido, um usuário que interferirá em contas e pílulas interferirá Então, o próximo fonossômico será sólido. Uma chave inglesa Quanto aos elementos de amplitude, vou interferir no suporte técnico, então teremos aqui um grupo de pessoas sólido. Além disso, vou mudar o conteúdo desse painel. Será como a comunidade. Finalmente, precisamos alterar o último item. O telefone será uma linha de arquivo sólida. Quanto aos painéis, vou falar na documentação Ok, a última coisa que temos que fazer é criar o fundo. Vamos inserir aqui a tag do botão com o botão de tipo. Quanto ao conteúdo do botão, vou compartilhar conosco. Ok, isso é mais menos a marcação H tl do quarto menu suspenso Como você pode ver, temos aqui a marcação H Tl, que já tem alguns estilos porque definimos alguns estilos comuns para menus suspensos Portanto, esses estilos também são aplicados à quarta lista suspensa Precisamos continuar estilizando o menu suspenso. E para isso, vamos para a próxima palestra. 20. Estilizando a quarta lista suspensa: Na aula anterior, preparamos a marcação HTML para nosso quarto menu suspenso. E agora temos que estilizá-lo. Vamos ao código VS e inserir novos comentários. Quatro. Quatro opções e, em seguida, selecionarei o menu suspenso com o nome da classe individual. Abaixo de quatro, precisamos definir com altura. A largura será de 28 Ram. Quanto à altura, vou definir 233 Ram. Como você pode ver, o tamanho do menu suspenso é maior. Em seguida, vou mudar a posição. Eu quero colocá-lo no centro. Para isso, temos que definir a posição esquerda e torná-la 50%. Então, para centralizar o elemento perfeitamente, precisamos usar transform, translate x para o valor -50% Agora, como você pode ver, o menu suspenso está perfeitamente centralizado Por fim, vou definir o preenchimento. Vamos definir o preenchimento para uma RAM na parte superior e depois para RAM no resto dos sites Precisamos m três vezes o preenchimento aplicado ao elemento Ok, em seguida, vou personalizar o desenvolvimento. Quero dizer desenvolvimento que inclui o ícone fonêmico e esse elemento pan Vamos continuar e selecionar Opções de contato. Seguido por uma profundidade, vou definir a margem, que será de 1,4 m na parte superior e inferior e zero nos lados esquerdo e direito. Além disso, vou definir o ponteiro. Como você pode ver, a margem é aplicada. Temos algum espaço entre os desenvolvimentos. Em seguida, vou tirar o fontossomicon. Vamos selecionar as opções de contato, seguidas pelo elemento. Vou definir a largura de 24m. Então, o tamanho da fonte do fontossomicon será dois E também precisamos mudar a cor. Vou usar a cor 3293. Vamos verificar o resultado. Como você pode ver, os ossomicons do telefone parecem muito bons. Em seguida, temos que personalizar os elementos do span. Vou selecionar as opções de contato, seguidas pelo elemento span. A primeira coisa que vou fazer é alterar o tamanho do telefone. Vai ser 1,6 Ram. Em seguida, vou transformar o texto em maiúsculas. Também mude a cor. Vou usar a mesma cor que usamos para o phonesomicon Além disso, crie algum espaço entre as letras usando o espaçamento entre letras com o valor 0,1 Ram Vamos ao navegador. Como você pode ver, os elementos do painel parecem muito bons. E a única coisa que precisa fazer é estilizar a parte inferior, que é colocada abaixo. Vamos prosseguir e selecionar o menu suspenso na parte inferior. Em primeiro lugar, vou definir com altura. A largura será de 100%. Quanto à altura, vou configurá-la para formar. Também precisamos mudar a cor de fundo. Vamos usar aqui a cor 2371. Aqui temos o próximo botão, precisamos retirá-lo da ordem padrão. Além disso, vou fazer com que o botão seja arredondado. Vamos seguir em frente e definir a fronteira como não. Quanto ao raio da fronteira, vou fazê-lo funcionar agora Nosso botão é muito melhor. Em seguida, temos que cuidar da fonte. Primeiro de tudo, vamos definir o tamanho da fonte. Vai ser 1,4 Ram. Em seguida, vou deixar o telefone mais ousado usando a espessura da fonte em negrito Também transforme o texto em por caixa e altere a cor. A cor vai ser branca. A fonte parece muito boa. A única coisa que preciso fazer é criar algum espaço entre as letras usando o ritmo das letras, 0,1 ram Além disso, vou fazer o ponteiro do cursor novamente. É isso mesmo. O quarto menu suspenso parece muito bom. Nós terminamos de trabalhar nisso. Em seguida, temos que cuidar do próximo menu suspenso, que será o quinto menu suspenso e o último. Vamos passar para a próxima palestra. 21. Como criar marcação HTML no quinto menu suspenso: Tudo bem, na palestra anterior, terminamos de trabalhar em nosso quarto menu suspenso Eu criei o menu suspenso do link de contato. Eu acho que parece muito bom. E agora temos que seguir em frente e cuidar do último menu suspenso, que será para o link da conta Vamos dar uma olhada no projeto finalizado. Aqui temos nosso último menu suspenso. Como você pode ver, ele consiste em alguns elementos diferentes. Temos duas entradas diferentes para nome de usuário e senha. Então você pode ver aqui a caixa de seleção que é seguida pelo botão. E abaixo, você pode ver alguns links. Se você esquecer seu nome de usuário ou senha, esses links ajudarão você a recuperar sua conta. Isso é quase o último menu suspenso. Como de costume, vou criar a marcação HTML e depois estilizar a marcação Vamos encontrar o link das contas e criar novos comentários para o menu suspenso cinco. Em seguida, vou abrir o desenvolvimento, que terá duas classes diferentes, lista suspensa e uma lista suspensa de cinco. Em seguida, vou abrir a tag do formulário. Vamos nos livrar do atributo de ação, não precisamos dele. Vou adicionar aqui o nome da classe, que será o formulário de conta. Dentro dos elementos do formulário que vou criar, que serão o grupo de entrada de contagem, ele incluirá dois campos de entrada. Vou abrir a tag de entrada com texto do tipo, e também precisamos aqui um atributo de espaço reservado como valor Vou inserir aqui, nome de usuário. Vamos duplicar essa linha de código. O segundo campo de entrada será para senha. Eu vou mudar o tipo. Também será uma senha. Vamos alterar o atributo de espaço reservado que precisamos aqui, senha Ok, vamos ver o grupo de entrada. Em seguida, vou criar um desenvolvimento que incluirá entrada e rótulo. Quero dizer entrada para caixa de seleção. Vamos adicionar um nome de classe ao desenvolvimento e ele será verificado. Em seguida, vou instituir elementos de entrada. O tipo será caixa de seleção. Além disso, precisamos do seu atributo de ID com a verificação do valor. Em seguida, vou abrir o rótulo e nos quatro atributos vou colocar a verificação também como texto, vou inserir seu, lembre-se de mim, usamos seu atributo ID e também quatro atributos com os mesmos valores. Vamos dar uma olhada no navegador. Se eu clicar no rótulo , a caixa de seleção será marcada. É por isso que usamos esses dois atributos com os mesmos valores. Tudo bem, em seguida, vou inserir seu botão com o botão de digitação Vou inserir seu cadeado de membro de texto. Depois disso, vou criar um parágrafo no qual inseriremos o seguinte texto esquecido Então precisamos de seus elementos de extensão, nome de usuário. Em seguida, precisamos, novamente, abranger elementos com o passe de texto. Finalmente, precisamos aqui de um ponto de interrogação. Ok, isso é sobre a marcação HTML para o menu suspenso cinco. Aqui temos a marcação HTML. Em seguida, temos que estilizar esses elementos. E para isso, vamos para a próxima palestra. 22. Estilizando o quinto menu suspenso: Na palestra anterior, preparamos a marcação HTM para nosso último menu suspenso. Quero dizer, o menu suspenso para vincular a conta. Agora temos que personalizá-lo. Na verdade, terminaremos a navegação nesta palestra. Vamos dar uma olhada no projeto finalizado, no menu suspenso. O último menu suspenso deve ter a mesma aparência. Vamos até o código do VS e inserir novos comentários no menu suspenso cinco. Em seguida, vou selecionar cinco, o elemento profundo do rapper, e definir sua altura máxima A largura será de 30 ram. Quanto à altura, vou fazer com que seja de 32 Ram. Como você pode ver, o tamanho do menu de cima para baixo mudou . Em seguida, vou censurar o elemento. Vou fazer isso usando a posição esquerda 50%. Além disso, precisamos transformar a tradução x com o valor -50%. Isso nos permite censurar o elemento perfeitamente Como você pode ver, o menu suspenso está centralizado. A próxima coisa que vou fazer é definir o preenchimento. Vou fazer com que o preenchimento seja de 2,5 Ram nos quatro lados. O preenchimento é criado, o espaço dentro do menu suspenso É isso sobre o desenvolvimento do invólucro. Em seguida, vou selecionar Grupo de entrada. Vou alinhar as entradas usando a caixa de linho. Precisamos de display flex. Em seguida, precisamos alinhar as entradas verticalmente. E para isso, temos que mudar a direção da caixa flexível e transformá-la em coluna Ok, isso é tudo sobre o grupo de entrada. Em seguida, precisamos personalizar a entrada em si. Vamos selecionar o grupo de entrada, seguido pela tag de entrada. Em primeiro lugar, vou definir a altura escrita. A largura será de 100%. Quanto à altura, vou fazer com que seja cinco. Além disso, vamos mudar a cor do plano de fundo. Nesse caso, vou usar a cor RGBA. O primeiro valor será 191, depois o próximo será 213 Pois o terceiro valor será 240. Então precisamos definir a opacidade, e eu vou definir a opacidade 2.4 Como você pode ver, o tamanho das E também temos aqui uma cor de fundo diferente. A próxima coisa que vou fazer é criar algum espaço dentro das entradas, e também precisamos de algum espaço entre os campos de entrada Vou definir o preenchimento de 2,5 RAM na superior e inferior e uma RAM nos lados esquerdo e direito Em seguida, vou separar as entradas usando a margem inferior. Serão três corridas. Como você pode ver, o espaço dentro das entradas é criado e também separamos as entradas umas das outras A próxima coisa que vou fazer é me livrar da borda padrão usando border none. Vou fazer com que as entradas sejam ligeiramente arredondadas. Temos que fazer isso usando o raio da borda e o valor será 0,5. Agora, as entradas parecem muito melhores A próxima coisa que vou fazer é cuidar da inadimplência. Vou mudar o tamanho da fonte. Vamos definir o tamanho da fonte para 1,6 Ram. E também vou mudar a cor. Vamos usar a cor 444, que é cinza escuro Agora, a fonte e a cor são alteradas, na verdade, com o campo de entrada, terminamos. A próxima coisa que vou fazer é mudar a cor do atributo placeholder Para isso, temos que selecionar o grupo de entrada e, em seguida, a entrada, que será seguida pelo espaço reservado, pseudoelemento de espaço reservado Este é um pseudo-elemento, precisamos aqui de cor Vou usar a cor 888, que é cinza mais claro Ok, então, como você pode ver, a cor do atributo placeholder é alterada, na verdade, com as entradas. Nós terminamos. A próxima coisa que vou fazer é cuidar da caixa de seleção e do rótulo. Vou selecionar o desenvolvimento do wrapper que tem verificação do nome da classe Vou mover a caixa de seleção e o rótulo um pouco para cima para isso. Vamos usar a margem superior com o valor menos dois. Como você pode ver, os elementos subiram. Em seguida, vou cuidar do rótulo, vamos verificar, seguido pelo rótulo, vou definir o tamanho da fonte para 1,6 ram. Então precisamos de uma lagoa. Serão 300, 300. Também vou mudar a cor. Vamos usar a cor 777. Ok, a caixa de seleção e a etiqueta parecem boas. Agora eu vou cuidar do fundo. Vamos selecionar o formulário da conta. Seguido pela parte inferior, vou definir com 100% e, em seguida, a altura ficará cheia de RAM. Eu vou mudar a cor da parte de trás. Vamos usar aqui a cor dois, D dois DCF, o tamanho da parte inferior e também a cor traseira são alterados Em seguida, vou me livrar da borda padrão. Vou fazer com que o botão seja arredondado. Não precisamos aqui de fronteira nenhuma. Além disso, precisamos do raio da borda com o valor Ram. Agora devemos ter resultados muito melhores. O botão parece muito bom. Agora temos que cuidar do telefone. Vamos mudar o tamanho do telefone. Vamos configurá-lo para 1,4 Ram. Então, precisamos que os pesos das fontes sejam mais ousados. Além disso, vou transformar o texto em maiúsculas e mudar de cor, torná-lo branco. Temos um resultado muito melhor. botão parece bom, mas temos que adicionar alguns estilos Mos a esse elemento. Vou aumentar o espaço entre as letras. Vamos fazer com que seja de 0,1 Ram. Também mude o cursor, torne-o ponteiro. Precisamos de algum espaço na parte superior e inferior da parte inferior. Vou definir a margem para três Ram no topo. Então precisamos de zero no lado direito, 1,5 RAM na parte inferior e zero no lado esquerdo. Agora temos resultados muito melhores. Temos algum espaço na parte superior e inferior do botão. E, na verdade , isso é tudo sobre o botão. Em seguida, temos que personalizar o parágrafo abaixo. Vamos selecionar Formulário de conta. Vamos definir o tamanho do telefone para 1,5 Fram. Então precisamos de texto, uma linha para ficar no centro. Além disso, vou adicionar aqui o peso do telefone 300. Aqui temos o parágrafo. Lembre-se de que temos aqui dois links. Quero dizer nome de usuário e senha, temos que personalizar essas duas palavras. Eles são elementos de amplitude. Temos aqui dois elementos de amplitude. Vou selecionar o formulário da conta e depois estender. Vamos mudar a cor do elemento. Vai ser 2371. Então, precisamos que o cursor seja um ponteiro. Além disso, vou trocar por oito, digamos 2400, ok? Então, tudo parece muito bom, na verdade. Com o menu suspenso, terminamos. Além disso, podemos dizer que, com a navegação, terminamos. Em seguida, temos que cuidar da próxima seção da landing page, que é essa. É muito bom. Vamos passar para a próxima palestra e começar a criar esta seção 23. Como criar a seção de marcação HTML para serviços: Tudo bem, na última palestra terminamos de trabalhar na navegação Criamos todos os menus suspensos. E agora temos que seguir em frente e começar a criar a próxima seção da nossa landing page. Vamos dar uma olhada no projeto finalizado. A próxima seção será uma seção sobre os serviços. A seção consistirá em um título e, em seguida, teremos nove serviços diferentes. Cada serviço consistirá em um título de ponsomicon e Além disso, teremos aqui planos de fundo bonitos e legais Essas formas diferentes que eu acho que parecem bonitas e legais. Tudo bem, como de costume, começaremos a criar essa seção criando a marcação HTML Vamos voltar ao código do VS e, após o cabeçalho, criar novos comentários para os serviços. Em seguida, vou abrir a tag de seção com os serviços de classe. Em seguida, vou abrir a tag que será o invólucro do conteúdo e vou atribuir seu nome ao wrapper de serviços Dentro do invólucro, vou abrir a tag de cabeçalho H one e vou inserir seu conteúdo, o que oferecemos Depois do cabeçalho, vou abrir a tag dip e será a lista de serviços Vamos adicionar a essa lista de serviços de nomes de classes de elementos. Dentro da lista, vou criar os serviços. Vamos abrir a tag com o serviço de nome da classe. Como eu disse, cada serviço incluirá título do fonossomicon e também parágrafo com Vou instituir os elementos I com a turma. Um laptop FA sólido. Depois de PhonomiConi, vou abrir a tag de cabeçalho H three, será a criação do site após o elemento Vou abrir a tag, vou inserir texto fictício com, digamos, 20 palavras Aqui está. Ok, é isso mesmo. Sobre o primeiro serviço, teremos nove serviços no total. Vou duplicar esse elemento oito vezes. Então eu vou mudar a fonética e os títulos. O segundo fonômio será FA sólido, setas FA sólidas Para os elementos do título , será o gerenciamento de conteúdo. Em seguida, o terceiro ícone será das marcas FA, o registrador Quanto ao elemento de título, vou usar um blog privilegiado Então, o próximo phonomicon será um sólido, um globo. Quanto ao elemento de cabeçalho, será comércio. Então teremos aqui uma marca, um mecanismo de busca. Então temos que mudar o elemento do título, ele será CEO. Então eu vou mudar o fonossomicon, ele vai ficar sólido Quanto ao elemento de cabeçalho, isso é gerenciamento de usuários. O próximo phonomicon será um ingresso sólido para FA. Vamos mudar o elemento de cabeçalho H three, será um suporte multilíngue. Em seguida, teremos aqui uma sólida hashtag de FA , pois o título será integração de mídia social. E o último ícone do serviço será Parents FA, rocket chat É isso aí, sobre os serviços. Vamos dar uma olhada no resultado. Aqui temos todos os serviços e todos os ícones são exibidos. A única coisa que precisa fazer é criar dois planos de fundo Essas duas formas, precisamos de dois elementos profundos logo acima da seção de fechamento. Precisamos aqui dos serviços de nome de classe G um e, em seguida, dos serviços PG dois. OK. A marcação HTML da seção de serviços é criada Os dois últimos elementos, quero dizer, esses planos de fundo ainda não estão visíveis porque são apenas elementos vazios Agora é hora de personalizar essa seção. E para isso, vamos para a próxima palestra. 24. Seção de serviços de estilo: Tudo bem, então, na aula anterior, criamos a marcação HTML para nossa nova seção, quero dizer, a seção de serviços Agora é hora de seguir em frente e começar a estilizar esta seção. Vamos voltar ao código do VS e inserir novos comentários após o cabeçalho Precisamos aqui de comentários para serviços. Em seguida, em relação aos serviços, vou selecionar o elemento da seção. Em primeiro lugar, vou definir dentro da altura. A largura será de 100%. Quanto à altura, vou fazer a altura 170, a altura da janela de visualização Isso significa que a altura ocupará 170% do pote de visão Se verificarmos o navegador, você verá que a seção terá uma altura de 170% da visualização colocada Ok, vamos falar sobre o elemento da seção por enquanto. Em seguida, vou selecionar o wrapper de serviços. Vou definir com 60% e depois vou mudar a cor do plano de fundo. Vai ser branco. Além disso, vou adicionar aqui a sombra da caixa para tornar o elemento visível. A sombra da caixa terá os seguintes valores, 02 Ram, então teremos seis Ram. Quanto à cor, vou usar o valor RGBA. Vou inserir aqui 130, depois 162235. E então precisamos de opacidade, e será 0,3. Agora, como você pode ver, o elemento tem sombra em forma de caixa e está visível na Depois disso, vou cuidar da posição da embalagem Vamos definir a posição como absoluta. Vou posicionar o wrapper de serviços de acordo com seus elementos principais, que neste caso são serviços Precisamos de uma posição relativa para o elemento pai. Vou definir a posição para 50% e, em seguida, a posição esquerda será 50%. Estou tentando censurar perfeitamente o elemento na página por isso Como você já sabe, temos que usar a transformação com a função de tradução. E temos que adicionar aqui -50% e -50% Precisamos aqui de dois -50% porque estamos tentando censurar o elemento vertical Agora, se eu verificar o navegador, você verá que o elemento está perfeitamente centralizado nas duas direções Quero dizer vertical e horizontalmente. Tudo bem, depois disso, vou criar algum espaço usando preenchimento. Vamos definir o preenchimento na parte superior e inferior para seis RAM. Quanto aos lados esquerdo e direito, vou fazer com que o preenchimento seja zero Temos algum espaço na parte superior e inferior. Em seguida, vou tornar o elemento ligeiramente arredondado usando o raio da borda com valor um Ram Além disso, vou alinhar os elementos usando a caixa de linho que precisamos aqui para exibir Em seguida, vou colocar os itens flexíveis na vertical. Precisamos mudar a direção da caixa flexível. Vai ser uma coluna. Além disso, vou alinhar os itens no centro. Como você pode ver, os itens são colocados verticalmente na coluna e o conteúdo também é colocado no centro Tudo bem, vamos falar sobre a embalagem dos serviços. Em seguida, sou o estilo dos elementos do título. Vamos selecionar o wrapper de serviços com H um elemento de cabeçalho Vou mudar a família telefônica. Nesse caso, vou usar telefones chamados Mull cursive. Então eu vou aumentar o tamanho do telefone , serão três Ram. Além disso, vamos transformar o texto em maiúsculas. Em seguida, o telefone ficará em negrito e também mudará o chamador. Vou usar o chamador 39. 4353. É de cor cinza escuro. Vamos verificar o título. Como você pode ver, o título parece muito bom. Vou aumentar o espaço entre as letras usando o espaçamento entre letras Vai ser 0,1 Ram. Além disso, vou criar algum espaço na parte inferior do elemento usando a parte inferior marchante com valor oito Ram Ok, é isso mesmo, sobre o título. Em seguida, vou cuidar menos dos serviços. Vamos selecionar a lista de serviços. Vou usar novamente, caixa flexível. Vamos configurar a tela para flexionar. Então, para empacotar os itens flexíveis, para colocar os itens em algumas linhas diferentes, temos que usar wrap com o valor p. Além disso, justifico o centro de conteúdo para centralizar os itens flexíveis horizontalmente No momento, nada mudou aqui porque precisamos atribuir altura aos serviços, quero dizer, aos próprios itens. Depois de fazermos isso, os itens serão colocados em algumas funções diferentes , como na versão final. Ok, como convidado, temos que selecionar o serviço em si e definir com altura. A largura será de 28 Ram. Quanto à altura, vou fazer com que seja de 35 Ram. Agora, como você pode ver, temos três linhas diferentes e, em cada linha, você pode ver os três itens. Tudo bem, o layout está pronto. Agora temos que personalizar os itens. Vou criar um espaço entre os itens nos lados esquerdo e direito. Vou usar margem. Precisamos aqui de zero na parte superior e inferior e 2,5 quadros nos lados esquerdo e direito Agora temos espaço entre os serviços. A próxima coisa que vou fazer é usar novamente, a caixa flexível Vamos configurar a tela para flexionar. Em seguida, vou mudar a direção porque os elementos dentro dos serviços precisam ser colocados verticalmente Para isso, temos que definir a direção da flexão para a coluna. Em seguida, vou centralizar os itens usando uma linha. Os itens centralizam e justificam o conteúdo que precisamos aqui no centro de conteúdo Como você pode ver, os elementos dentro dos serviços são colocados no centro. A próxima coisa que vou fazer é cuidar dos fonoícones Vamos selecionar o serviço, seguido pelo elemento que vou definir dentro da altura, ambos até dez. Em seguida, vou mudar a cor do plano de fundo. Vai ser branco. Também precisamos de box shadow , será 01 Ram Ram. Então, precisamos da cor RGBA. Os valores serão 75, depois 1192 para um, e a opacidade será 0,15. Aqui temos Vou fazer essas caixas ao redor usando o raio da borda, será de 50%. Agora temos os círculos A próxima coisa que vou fazer é colocar os ícones no centro desses círculos. Para isso eu vou usar novamente, Flex box. Precisamos do Display Flex e , em seguida, de um centro de itens de linha e do centro de conteúdo Justify Agora, os ícones são colocados no centro dos círculos. Vamos torná-los maiores usando, vou definir o tamanho da fonte para formar. Além disso, vou criar algum espaço na parte inferior dos ícones. Vamos definir a margem inferior a dois M. Ok, aqui temos os ícones do telefone. Agora, como convidados, temos que mudar as cores de cada ícone. Vou começar com o primeiro ícone, mas antes de fazermos isso, vou dar uma olhada na versão final. Como você pode ver, cada ícone tem uma cor diferente. Mas se você observar as cores, notará que temos aqui um efeito de gradiente linear Eu vou criar esse efeito. Em primeiro lugar, vou selecionar o primeiro serviço usando o seletor de bate-papo Então precisamos do elemento. Para criar um efeito de gradiente linear com o elemento de texto, vou usar a técnica a seguir Primeiro de tudo, precisamos de um plano de fundo com função de gradiente linear Estou inserido aqui. A primeira cor será branca. Quanto à segunda cor, vou inserir uma em 59. Além disso, vou adicionar aqui 60%. Isso significa que transição de cores começará após 60% dos elementos. Se verificarmos o navegador , você verá que o fonossomicon ainda tem a cor preta, mas o fundo do círculo Na verdade, não precisamos disso. Temos que mudar a cor do ícone em si. Para fazer isso, vou adicionar aqui duas propriedades diferentes. O primeiro será um clipe de fundo da web key. O valor será texto. Quanto à segunda propriedade, será a cor do campo de texto da chave da web. Vou adicionar aqui transparente como valor. Agora, como você pode ver, temos aqui um resultado agradável e interessante O ícone ponme tem efeito de gradiente linear Vamos fazer o mesmo com o resto dos ícones. Vou duplicar esse código oito vezes, porque no geral teremos nove ícones Vamos mudar os números do seletor. E também precisamos mudar as cores. A segunda cor será FA 751c. O segundo ícone parece muito bom. Vamos mudar todos os ícones quando você tem três, a cor é de três a 93. Então teremos aqui quatro. A cor será 31 DCA 1. Então teremos o quinto ícone. Quanto à cor, vou adicionar aqui 4400b. Então teremos o sexto item. Vamos adicionar aqui f4800. Então teremos o sétimo ícone. Quanto à cor, vou inserir aqui o F26 AC. Então precisamos aqui do ícone número oito. Quanto ao chamador, vamos usar 0010. Precisamos mudar o último ícone. Vai ser b6004. Como você pode ver, todos os ícones têm diferentes cores de fundo com gradiente linear E eles parecem muito bonitos. Ok, agora temos que cuidar dos títulos nos serviços Vamos selecionar o serviço três. Vou mudar a família telefônica. Vai ser croson um, cursiva, então o tamanho do telefone vai ser Tom Eu vou mudar a cor. Vamos definir a cor para 5728. Precisamos aqui do símbolo da libra. Finalmente, vou adicionar aqui a margem. Vamos definir a margem para dois Ram na parte superior e inferior e zero nos lados esquerdo e direito. Posso ver que os títulos estão muito bons. Agora temos que cuidar dos parágrafos. Vamos seguir em frente e selecionar o serviço. Vou definir o tamanho da libra para 1,6 Ram, mas depois precisamos alinhar o texto no centro Por fim, mude a cor. Vou usar aqui, 889b9. Tudo bem Como você pode ver, os serviços parecem muito bons. Estamos quase terminando a seção. A única coisa que eu tenho que fazer é cuidar dos planos de fundo Quero dizer essas formas aqui. Vamos seguir em frente e fazer isso. Vou começar com o círculo. Vamos selecionar o serviço PG one. Vou definir a largura e a altura do bonde. Então eu vou mudar o plano de fundo. Precisamos usar gradientes lineares. A direção será de dois direitos. Então, precisamos de transparente como a primeira cor. A segunda cor será transparente, assim como a terceira cor, vou adicionar aqui f437 Aqui temos os elementos em segundo plano. Como eu disse, será um círculo, então vou usar raio da caldeira com o valor de 50%. Além disso, vou mudar a posição do elemento Vamos definir a posição como absoluta. Então, precisamos posicionar para ser zero. Quanto à posição correta, será de 10% Como você pode ver, o círculo está na posição. Na verdade, cobre os serviços. Nós não precisamos disso. Para corrigir isso, adicionarei uma propriedade de índice ao wrapper de serviços com valor maior que zero Vamos configurá-lo para um. Como pode ver, o problema está resolvido, ok? A única coisa que tem a ver com o círculo é diminuir a opacidade Para que pareça muito melhor, vou definir a opacidade 2.3 Como você pode ver, agora temos resultados muito É isso aí, sobre o círculo. Agora vou cuidar do segundo plano de fundo, que é retângulo Na verdade, vou duplicar esse código. Vamos mudar o nome da classe. Serão os serviços G dois. Precisamos das mesmas alturas internas e do plano de fundo. Vou mudar a cor que precisamos aqui, 74b5. Então eu vou mudar o raio da fronteira. Nesse caso, precisamos de 15 Ram. Além disso, vou mudar a posição superior para a inferior. Vai ser de 5%. Quanto à posição correta, precisamos mudá-la para a esquerda. A posição esquerda será 12. 12% Vamos verificar os resultados que temos aqui, o retângulo e eu vou girá-lo levemente Vamos usar a rotação de transformação Z e o valor será menos dez graus Na verdade, algo está errado aqui porque na versão final temos um resultado diferente. Vamos verificar o código. É estranho porque tudo parece estar correto. Ah, sim, precisamos mudar a direção. Nesse caso, a direção deve ser para a esquerda e não para a direita. Acho que isso resolve o problema. O problema está resolvido e tudo parece estar perfeito. Ok, é isso sobre esta seção, acho que parece muito boa e você gosta dela. A próxima coisa que eu tenho que fazer é cuidar da navegação, porque uma vez que rolamos para baixo, temos que tornar a navegação fixa, fixada na parte superior Esse efeito aqui, quando rolamos , a navegação muda de plano de fundo. Ele é fixado na borda superior da página. Para criar esse efeito, vamos passar para a próxima palestra. 25. Criando barra de navegação pegajosa no scroll: Tudo bem, na palestra anterior, terminamos de estilizar a seção de serviços Parece muito bom. Como dissemos, vamos cuidar da navegação. Não temos que fazer nenhum adesivo. Depois de rolar a página para baixo, vamos dar uma olhada no projeto finalizado. Depois de rolar a página para baixo, precisamos mudar algumas coisas. Precisamos mudar a cor de fundo da navegação. Além disso, precisamos alterar as cores do logotipo e dos itens de navegação. Temos que personalizar a parte inferior. E também temos que mudar as posições dos menus suspensos. Ok, então é isso, o que vamos fazer nesta palestra. Agora é hora de usar um pouco de Javascript. Vamos abrir o arquivo script JS. A primeira coisa que vou fazer é selecionar a navegação. Vou criar uma nova variável. Vou chamá-lo de par. Precisamos selecionar a navegação e, para isso, vou usar o método de seleção de consulta. Temos que especificar aqui o nome da classe, que não fará parte. OK. A navegação é selecionada. E agora precisamos verificar se a posição de rolagem vertical de uma página da web é maior que zero. Vou usar um objeto de janela. Na verdade, janela se refere à janela do navegador da web ou à banheira atual que você está visualizando. Precisamos usar o objeto de janela e adicionar a ele um ouvinte de eventos O tipo de evento será o scroll. Além disso, vou colocar aqui uma função de retorno de chamada que será executada assim que rolarmos a página para baixo Agora precisamos verificar se a janela está rolada ou não. Para isso, vou usar a instrução if como a condição que vou inserir aqui. Rolagem da janela Y. Na verdade, a rolagem Y é uma propriedade que informa quantos pixels a página foi rolada verticalmente a partir do topo Se for maior que zero, significa que você rola para baixo a partir do topo da página. Temos que verificar se a rolagem da janela y é maior que zero. Se for verdade, adicionarei uma nova classe à barra de navegação E então definiremos novos estilos no arquivo CSS. Para essa classe recém-criada, vou usar a barra de navegação Em seguida, vou acessar a lista de turmas do cochilo, temos que adicionar aqui uma nova turma e vou chamá-la de pegajosa Novamente, se a página for rolada para baixo, a nova turma ficará adesiva Em seguida, precisamos de declarações. Se a propriedade window scroll y não for maior que zero, teremos que remover back class sticky do napper Precisamos da lista de classes do Napper Dot. Em seguida, temos que usar o método de remoção. E temos que especificar aqui novamente, pegajoso. Tudo bem, isso é sobre o script Java. Agora vou voltar ao arquivo CSS. Temos que selecionar o Napper com uma classe fixa. Vou inserir o Napper Sticky, e temos que definir novos estilos Vou diminuir a altura, vai ser um carneiro. E também vou mudar a cor de fundo. Vamos configurá-lo para branco. Agora, se rolarmos para baixo , os novos estilos serão aplicados ao cochilo Como você pode ver, a cor de fundo é branca e também a altura do cochilo diminuiu Ok, a próxima coisa que vou fazer é tornar esse efeito mais suave E para isso temos que usar os valores de transição, toda a duração será de 0,3 segundo. Depois de rolarmos, o efeito será mais suave. Tudo bem, em seguida, vou adicionar um pequeno efeito de sombra à barra Of. Vamos usar aqui a sombra da caixa com os valores 01 Ram, dez Ram, e a cor será RGB, A 130-16-2235, e a opacidade será 0,6 quando rolarmos 130-16-2235, e a opacidade Você verá aqui um efeito de sombra agradável e fresco. Tudo bem, a próxima coisa que vou fazer é mudar a cor do logotipo. Vamos prosseguir e selecionar os elementos de extensão. Usando novamente, sticky, precisamos aqui sticky, depois logotipo, seguido pelo elemento span Eu vou mudar a cor. Vai ser das 0926 às sete. Além disso, vou me livrar da sombra tecnológica do logotipo. Digamos que não, na verdade, a cor não mudou. Há algo errado. Temos que adicionar esse código abaixo após o código em que estilizamos esses elementos do painel para que esse código funcione Se rolarmos para baixo , veremos que a cor do logotipo foi alterada. Ok, agora precisamos da mesma coisa para a ausência de itens. vamos encontrar nenhum link que precisemos aqui, sticky. Então sem link, temos que mudar a cor. Vai ser da mesma cor, 092627. Além disso, precisamos nos livrar da sombra tecnológica. Vamos configurá-lo como nenhum. Como você pode ver, a cor dos itens O foi alterada. Em seguida, temos que mudar a posição do triângulo, que é o elemento posterior do item de navegação Além disso, vou mudar a posição do menu suspenso. Vamos adicionar aqui o Sticky, seguido pelos elementos do anúncio Vamos colocar na posição dois. Precisamos aqui de colchetes encaracolados. Precisamos nos posicionar para ter seis Ram. Quanto ao menu suspenso, vamos usar o sticky seguido pelo menu suspenso Vou definir a posição do bonde e também vou mudar a sombra da caixa Vamos fazer com que seja 0110 Ram. E a cor será essa com menor opacidade, 0,4 Agora, como você pode ver, posições do triângulo e dos menus de cima para baixo foram alteradas E também temos aqui uma bela e legal caixa de sombra. A única coisa que precisa fazer é personalizar o botão. Na verdade, temos aqui um pequeno problema. Não precisamos desse triângulo aqui. Eu vou consertar isso. Vamos encontrar o pseudo-elemento, que é um triângulo Temos que excluir aqui o botão. E podemos fazer isso da seguinte maneira. Você pode ver aqui que selecionamos o item. E depois dos pseudoelementos, para extrair um elemento daqui, temos que usar uma das pseudoclasses Temos que especificar aqui a parte inferior, na verdade, é o último item acima, para que possamos inferir uma pseudoclasse chamada Isso excluirá a parte inferior daqui. Agora, se verificarmos, como você pode ver, não temos mais aqui o triângulo. O problema está resolvido. Tudo bem, a última coisa que preciso fazer é personalizar a parte inferior quando rolarmos para baixo. Então, vamos em frente e encontre o botão. Deve ser depois das quedas. Aqui está. Vamos selecionar o botão com a classe Sticky. Vou mudar o plano de fundo. Vamos usar gradientes lineares. Precisamos que a direção tenha dois direitos. Quanto às cores, a primeira cor será F459. Quanto à segunda cor, vou inserir aqui F3598 Então temos que sair da caixa Shadow , não vai ser nenhuma. Além disso, vou mudar a cor do botão. Vai ser branco, como você pode ver. O botão parece muito bom, na verdade. É isso mesmo , tudo parece e funciona perfeitamente Podemos passar para a próxima palestra e começar a cuidar da próxima seção 26. Criando a marcação HTML para projetos: Na palestra anterior, criamos uma barra adesiva. Depois de rolar a página para baixo, você verá que temos aqui uma barra fixa de não na borda superior da página da web. Eu acho que parece muito bom e legal. A próxima coisa que precisamos fazer é criar outra seção chamada projeto. Se dermos uma olhada no projeto finalizado , veremos aqui a seção do projeto, que eu acho muito impressionante e legal. A seção consiste no título do parágrafo, então temos aqui uma pequena navegação com diferentes categorias dos sites. Você pode ver aqui negócios, alimentação, saúde, viagens. Caso contrário, se eu clicar em qualquer uma das categorias , obteremos aqui os pacotes de sites adequados A navegação funciona perfeitamente. Temos aqui o botão Visualizar tudo e, se clicarmos nele, todos os projetos serão exibidos. Acho que essa seção será muito interessante. Usaremos HTML CSS e também Java script. Agora é hora de começar a criar a seção. Como de costume, vou começar com a marcação HTML. Vamos inserir novos comentários aqui. Vou abrir a tag de seção com os projetos da classe. Então, como eu disse, começaremos com o título e o parágrafo. Vou abrir H, um elemento de cabeçalho com o texto 100 mais sites completos. Em seguida, teremos um parágrafo que incluirá um texto fictício, como você já sabe Para criar um texto fictício, temos que escrever um Lom e depois especificar o número de palavras No nosso caso, vou criar 30 palavras. Aqui temos nosso fictício parágrafo após parágrafo. Precisamos criar navegação. Vamos abrir a tag com o filtro geral de classes, teremos seis links diferentes. Cinco deles serão categorias diferentes. Quanto ao sexto link , será o botão Exibir tudo. Vou abrir o link com o link do filtro de classes. Então, como texto, vou inserir sua empresa. Além disso, precisamos que você insira um atributo chamado tipo de dados no qual temos que especificar o tipo, quero dizer, a categoria do projeto. Nesse caso, precisamos de negócios. Vamos duplicar o elemento do link cinco vezes e depois alterar as categorias O segundo será comida. Também precisamos alterar o tipo de dados. Então, a próxima será a saúde. Então teremos que viajar aqui. Então, o próximo será outro. Finalmente, precisamos de uma visão aqui. Quanto ao tipo de dados, vou inserir aqui tudo. Tudo bem, então vamos falar sobre a navegação do filtro. Em seguida, temos que criar os projetos. Vou abrir uma tag profunda com a lista de projetos do nome da classe na qual vou criar o projeto. Cada projeto consistirá em três imagens diferentes, como temos aqui no projeto finalizado. Como você pode ver, cada projeto consiste em três imagens diferentes. Precisamos inserir aqui três imagens diferentes. Mas antes disso, temos que adicionar aqui atributo do tipo de dados para especificar a categoria aqui também. A primeira categoria será de negócios. Vou inserir três imagens diferentes. Vamos abrir a imagem. Vou especificar aqui o caminho da imagem. Primeiro de tudo, precisamos ser a pasta atual. Em seguida, selecione a pasta de imagens e encontre a primeira imagem que será web one, imagem um. Vamos duplicar esse código duas vezes e alterar os nomes das imagens que precisamos aqui Web uma imagem dois e, em seguida, web uma imagem três. Tudo bem, é isso. Sobre o primeiro projeto, como você pode ver, temos aqui o parágrafo do título, depois vemos aqui a navegação. E também três imagens diferentes que agora são muito maiores. Mas vamos corrigir isso. Vamos duplicar projetos 11 vezes, porque no geral teremos 12 projetos diferentes Vamos seguir em frente e fazer algumas mudanças. O segundo tipo de dados será outro. Também precisamos aqui mudar o nome das imagens que precisamos aqui, Web two. Então, o terceiro projeto será para alimentação. Precisamos aqui de três. Então, o próximo projeto será Health Web four. Em seguida, teremos outras, vamos mudar os nomes das imagens que precisamos. Web cinco. Então, o próximo tipo de data será saúde. Quanto às imagens, precisamos da web six. Então teremos sua web seven. O próximo projeto será na categoria de viagens, será web eight. Então o próximo é foot web nine. Então teremos negócios. Vamos deixar o valor adicionado aqui zero. Precisamos da web ten. Então teremos foot web 11. E o último tipo será o negócio. Não vou mudar isso quanto aos nomes das imagens que precisamos aqui, Web 12. OK. Pronto, a marcação HTML para a seção do projeto está pronta Vamos dar uma olhada no navegador. Como você pode ver, temos aqui todos os 12 projetos. Tudo está pronto. E agora é hora de começar a estilizar esta seção para isso. Vamos passar para a próxima palestra. 27. Cabeçalho de projetos de estilo e navegação por filtro: Na aula anterior, preparamos a marcação HTML para nossa seção de projetos Como você pode ver, todas as imagens estão aqui para a web. É hora de estilizar esta seção. Nesta palestra, vamos estilizar a primeira parte da seção, quero dizer, o parágrafo do título e o filtro Em seguida, também vamos estilizar os pacotes do site Ok, vamos para o código V logo após seção de serviços para definir novos comentários para projetos. Em seguida, vou selecionar a seção de projetos. Primeiro de tudo, vou definir largura e altura. A largura será de 100%. Quanto à altura, também vou torná-la 100%. Em seguida, vou criar algum espaço na parte superior e inferior do preenchimento da seção Vou definir o preenchimento para 25 Ram, depois 015 Ram e zero Além disso, vou alinhar elementos usando o flex book na tela Então, para alinhar os elementos verticalmente, precisamos mudar a direção A direção da flexão será a coluna. Vou alinhar os itens no centro. Como você pode ver no conteúdo, os itens flexíveis são colocados no centro Além disso, temos algum espaço na parte superior e inferior da seção. A próxima coisa que vou fazer é selecionar H um elemento de cabeçalho. Precisamos aqui dos projetos H one. Vou mudar a família telefônica. Vai ser mull cursive. Além disso, precisamos que o tamanho do telefone seja maior. Vamos configurá-lo para seis Ram. Em seguida, vou criar algum espaço na parte inferior usando a margem inferior. Vamos definir a margem inferior para que eu também mude a cor do título. A cor será f4800. Vamos dar uma olhada no título. Então, como você pode ver, o título parece muito bom. Em seguida, vou cuidar do parágrafo. Vou selecionar projetos P. Vamos definir com até 90 Ram. Em seguida, vou para uma linha de texto no centro. A próxima coisa que eu quero fazer é aumentar o tamanho do telefone. Vamos configurá-lo para dois Ram. Além disso, precisamos mudar a cor. Vamos definir a cor para 57 a oito. Além disso, crie algum espaço na parte inferior. Vamos definir a margem inferior para quatro RAM. Como você pode ver, o parágrafo parece muito bom. Em seguida, vou cuidar da navegação. Vamos continuar e selecionar Filtro Desligado. A primeira coisa que vou fazer é definir a largura. Vai ser 80% , então vou definir a altura para dez Ram. Também altere a cor de fundo. Vai ser branco. Em seguida, vou usar o box shadow para tornar a navegação visível. Vou definir o box shadow para 02 Ram. Oito Ram como cor. Vou usar o TBA. Os valores serão 130 e depois 162. Vamos selecionar esses valores. Vou configurar o Opacity 2.2 Ok, aqui temos o filtro Em seguida, vou torná-lo ligeiramente arredondado, usando o raio da borda Vamos configurá-lo para um Ram. Então eu vou usar o flex box. Vamos configurar a tela para flexionar. Vou alinhar os itens no centro verticalmente. Como você pode ver, os itens são colocados verticalmente no centro Agora vou criar um espaço entre os itens usando justificar o espaço de conteúdo Com esse valor , podemos criar um espaço uniforme entre os itens flexíveis Finalmente, precisamos de algum espaço entre a navegação e as imagens. Vou fazer isso usando margem inferior com o valor seis. Ok, agora a navegação está separada das imagens. Em seguida, vou personalizar o link. Na navegação do filtro, vou selecionar o link de navegação do filtro Vamos definir a largura e a altura. A largura será de 14 Ram. Então eu vou definir a altura para quatro Ram. Vamos mudar a cor de fundo. Vai ser F245. Como você pode ver, a largura e a altura e também uma cor traseira são aplicadas aos elementos do link. Em seguida, vou criar os elementos ao redor usando o raio da borda Serão quatro, então precisamos colocar os links no centro. Para isso, vou usar novamente o CSS Flexbox. Precisamos do Display Flex, depois do Justify Content Center e de um centro de itens de linha Como você pode ver, os links são colocados no centro. Vamos definir o tamanho da fonte para a forma de um ponto. Então, precisamos do peso da fonte, ela ficará em negrito. Além disso, precisamos transformar o texto maiúsculas e depois mudar a cor. Vai ser 919 AA. Vamos dar uma olhada. A navegação parece muito boa. Vou criar um espaço entre as letras usando o espaçamento entre letras Vamos configurá-lo para 0,1 execução. Tudo bem, agora vou criar alguns efeitos de foco Depois de passarmos o mouse sobre os links, eles devem mudar a cor de fundo E também quero movê-los um pouco para cima. Vamos selecionar o link do filtro com o mouse. Vou mudar a cor de fundo. Vai ser um D F dois. Também precisamos mover o elemento um pouco para cima. Precisamos transformar, traduzir Y e o valor será -0,1. O efeito ho funciona bem, mas precisamos de um efeito mais suave Vamos adicionar a transição A de 0,3 segundos. Agora tudo funciona bem. Na verdade, acho que a altura dos links é um pouco menor. Vamos verificar a versão finalizada. Sim, é definitivamente menor. Vamos aumentar a altura, torná-la cinco. Agora temos melhores resultados. A próxima coisa que vou fazer é tornar o botão de visualização ativo por padrão. Como você pode ver, a parte inferior da vista tem uma cor de fundo diferente e também a cor do telefone é branca. Para fazer isso, vou adicionar uma nova classe ao último link que visualizo. Vamos adicionar aqui Ativo. Em seguida, vou selecionar a classe ativa e alterar a cor do plano de fundo. Vai ser f401 E também precisamos da cor do texto, branco Temos que adicionar às classes e não ao atributo do tipo de dados. Isso foi um pequeno erro. Agora, o estilo deve ser aplicado. A única coisa que preciso fazer é mudar a cor do fundo. Vou selecionar ativo com o mouse. Vamos mudar a cor de fundo. Vai ser o C611. Agora, tudo funciona bem. Terminamos de trabalhar na primeira parte da nossa seção. Em seguida, temos que personalizar esses pacotes de sites. No momento, temos aqui imagens maiores. Temos que cuidar ainda mais disso. Vamos passar para a próxima palestra. 28. Pacotes de sites de estilo: Tudo bem, na aula anterior, temos o estilo, a primeira parte da seção do projeto, quero dizer, o parágrafo do título e a navegação pelo filtro E agora temos que cuidar dos pacotes do site. No geral, temos aqui 12 pacotes de sites. Eles estão alinhados em linhas diferentes. Temos quatro linhas. Em cada linha, temos três sites. Vamos ao código do VS e começar a estilizar. Na segunda parte da seção do projeto, temos que selecionar projetos e eu vou definir a largura e a altura. A largura será de 33 Ram. Quanto à altura, vou definir a altura 233 Ram também Em seguida, vou selecionar e estilizar as imagens. No momento, eles são muito maiores, então temos que cuidar disso e torná-los menores. Vou selecionar a primeira imagem de que precisamos, a imagem do projeto e, em seguida, o seletor infantil Precisamos aqui da primeira imagem. Vou definir a largura como 22. Quanto à altura, vou fazer com que seja 100%. A primeira imagem está menor agora, mas na verdade está esticada e não parece boa Para corrigir esse problema, vou selecionar a imagem e usar a propriedade chamada pés do objeto com a cobertura do valor. Agora, como você pode ver, as imagens estão muito bonitas. Em seguida, vou duplicar esse código duas vezes. Vamos mudar os números aqui. Precisamos de um nono filho dois e um nono filho três. A segunda imagem será de 20 Ram. Quanto à altura, vou configurá-la para 30 Ram. Então temos a imagem número três. A largura será de 100%. Quanto à altura, vou fazer com que seja de 70%. Tudo bem, próxima coisa que vou fazer é selecionar a lista de projetos. Vou definir com e altura. A largura será de 70%. Quanto à altura, vou torná-la 100%. Em seguida, vou usar o Flex Box para alinhar os elementos Precisamos do Display Flex. Então, precisamos do Justify Content Center para centralizar os itens flexíveis horizontalmente Em seguida, precisamos encapsular com o valor p para alinhar os pacotes de sites em linhas diferentes Como você pode ver agora, temos imagens alinhadas em linhas diferentes No momento, eles não parecem muito bons, mas vamos corrigir isso em breve. A próxima coisa que vou fazer é definir a posição da imagem como absoluta. Então, precisamos da posição relativa para o elemento pai, que neste caso é o projeto. Precisamos da sua posição relativa porque vamos posicionar as imagens de acordo com o elemento pai. Agora todas as imagens têm posição absoluta. A próxima coisa que vou fazer é definir a posição de cada imagem 50%. Em seguida, precisamos de posições para a primeira imagem. Vou definir a posição esquerda para 50%. Para posicionar perfeitamente a imagem no centro, precisamos usar transform translate com os valores -50% novamente -50% . As primeiras imagens são colocadas perfeitamente no centro do Em seguida, vou adicionar efeito de sombra à primeira imagem. Vamos usar o box shadow. Vou adicionar aqui os seguintes valores. Precisamos de 01 RAM, depois de RAM completa e RTB A. Vou usar a cor preta com a opacidade 0.4 Como você pode ver, as primeiras imagens têm o efeito de sombra. Eles não estão totalmente visíveis. Para corrigir isso, vou usar a propriedade index. Vamos definir o índice 22. Agora, eles devem estar totalmente visíveis. Sim, eles são visíveis. Em seguida, vou cuidar da segunda imagem. Vamos definir a posição esquerda para -5% Além disso, precisamos traduzir, na verdade, não traduzir, transformar e, em seguida, precisamos traduzir Y -50%. As segundas imagens são posicionadas Novamente, uma propriedade de índice, porque elas não estão totalmente visíveis. Vamos definir um índice como um. Agora eles estão visíveis, mas estão colocados atrás das primeiras imagens, e é disso que precisamos. Vou adicionar aqui a sombra da caixa. Os valores serão 03 Ram, oito Ram. A cor será RGBA, 130162. Vamos selecionar esse valor e alterar a opacidade. Vai ser 0,9 Agora, as segundas imagens têm esse efeito de sombra agradável e legal. Na verdade, vou arredondar os cantos das imagens. Vamos usar para o raio. Vamos configurá-lo para um Ram. Agora, as imagens parecem muito melhores. A próxima coisa que vou fazer é cuidar da terceira imagem. Vou definir a posição correta para a terceira imagem para -10%. Novamente, precisamos transformar, traduzir Y -50% para que as terceiras imagens estejam Vamos adicionar aqui a sombra da caixa. Na verdade, precisamos dos mesmos valores. Vamos copiá-los daqui e colar abaixo. Agora, as terceiras imagens estão posicionadas e têm sombra em forma de caixa. A única coisa que preciso fazer é separar os pacotes de sites uns dos outros Eu adiciono aqui a margem cinco. Além disso, vou apontar o cursor, ok? Então, tudo parece perfeito e, onde os projetos que realizamos, estou nos pacotes do site Tudo é estilizado e parece muito bom. Agora temos que fazer essa navegação funcionar. Depois de clicar em qualquer uma das categorias , as imagens apropriadas devem ser exibidas. Para fazer isso, vou passar para a próxima palestra. 29. Fazendo a navegação com filtro funcionar: Tudo bem, na palestra anterior, terminamos de estilizar a seção do projeto Como você pode ver, tudo parece muito bom. E agora temos que fazer a navegação funcionar. Quero dizer, uma vez que clicamos em qualquer uma das categorias , os pacotes de sites adequados devem ser exibidos Vamos dar uma olhada no projeto finalizado. Se eu clicar em qualquer um dos links , os sites apropriados serão exibidos. Se eu clicar no botão Exibir tudo , todos os sites serão exibidos. Tudo bem, é isso que vamos fazer nesta palestra. Vamos para o arquivo JS do script. Na verdade, a primeira coisa que vou fazer aqui é adicionar comentários para o Napper, porque eu esqueci Precisamos aqui agora de um. E então eu vou inserir novos comentários para a seção do projeto. Primeiro, vou selecionar todos os elementos do link e armazená-los na variável. Vamos criar uma nova variável. Vou chamá-lo de links de filtro. Em seguida, temos que selecionar todos os links usando o método seletor de consulta all Esse método nos permite selecionar vários elementos com o mesmo nome de classe. Nesse caso, precisamos aqui de filtro de nome de classe, sem link. Esse método retorna uma lista de nós que é uma coleção. É uma matriz semelhante a um objeto. Agora temos que examinar a lista de nós. Quero dizer, filtrar links e adicionar um ouvinte de eventos a cada link Precisamos de links de filtro seguidos por um método de forragem. Na verdade, para cada método existe um método auxiliar de matriz. No script Go, ele é usado para examinar os elementos de uma matriz ou lista de nós e realizar uma ação ou operação específica em cada elemento. Temos que garantir uma função de retorno de chamada. Essa função será executada para cada elemento na lista de nós. Vou garantir uma discussão. Será um link de filtro. Ele representa o elemento atual está sendo processado na lista de nós. Agora podemos adicionar um ouvinte de eventos ao link do filtro. O tipo do evento também será click. Vou garantir uma função de retorno de chamada que será executada assim que clicarmos no link Se dermos uma olhada no navegador e clicarmos em qualquer um dos links aqui , navegaremos até o topo do site. Na verdade, é um comportamento padrão do elemento link. E temos que evitar esse comportamento padrão para que precisamos passar aqui e até mesmo objetos, então podemos usar o método chamado previne default. Agora, se eu clicar nos links, não navegaremos mais até o topo da página. Tudo bem, como você sabe, o último link, quero dizer, o botão ver tudo tem uma classe padrão ativa. Depois de clicarmos em qualquer um dos links, devemos remover essa classe, quero dizer, classe ativa do elemento atual e temos que adicioná-la ao elemento clicado Para fazer isso, vou selecionar elementos usando o método seletor de consulta Vou especificar aqui o nome da classe. Precisamos de um link de filtro e temos que adicionar aqui a classe ativa. Depois de ativo, o elemento de link é selecionado. Agora podemos remover a classe ativa desse elemento. Precisamos da propriedade da lista de classes. Em seguida, precisamos remover o método. E temos que especificar aqui o nome da classe ativa. Depois de clicarmos nos elementos do link, a classe ativa será removida do elemento e adicionada ao elemento clicado Agora, para adicionar a classe ativa ao elemento clicado, precisamos aqui filtrar link, classe, lista, adicionar e precisamos Lei de classe do Instituto. Tudo bem, então vamos verificar o navegador. Se clicarmos em qualquer um dos links , você verá que o plano de fundo foi alterado. Na verdade, funciona bem. Tudo bem, agora temos que cuidar dos projetos. Vamos selecionar todos os projetos usando novamente o seletor de consultas, todos os métodos que precisamos especificar aqui, o nome da classe, o projeto Agora, vou esconder todos os projetos. Depois de clicar no link do filtro, precisamos examinar os projetos, que são um nó, pelo menos uma coleção, e temos que ocultar cada projeto. Para fazer isso, vou selecionar projetos seguidos por um método de forragem Vou passar aqui a função de retorno de chamada. O argumento será projeto. Agora, para ocultar os projetos, vou adicionar uma nova classe ao projeto. E então usaremos essa classe em CSS. Para ocultar o elemento, precisamos da lista de classes do projeto. E temos que especificar aqui o nome da classe. Nesse caso, vou chamá-lo de esconderijo. Agora vamos ao arquivo CSS e selecione o projeto com a classe hide. Para ocultar o elemento, vou usar display none. Agora, se clicarmos em qualquer um dos links , todos os projetos serão aquecidos. Ok, agora precisamos ocultar e exibir projetos de acordo com as categorias. E para isso, precisamos usar aqui uma declaração condicional. Quero dizer, se a declaração. Vamos criar a declaração if como condição que vou passar aqui a seguir. Precisamos filtrar link dot get attribute. Vou passar aqui um atributo chamado tipo de dados. Como você se lembra, adicionamos atributos de tipo de dados aos links e também aos projetos. Se essa expressão for igual aos atributos de obtenção do projeto, digite os dados. Essa condição se o tipo de dados do link de filtro clicado corresponder ao tipo de dados do projeto Em outras palavras, é verificar se o link do filtro e o projeto pertencem à categoria ou ao tipo. Se essa condição for verdadeira, teremos que manter os projetos correspondentes exibidos. Mas isso não é tudo que temos que adicionar aqui ou declaração, temos que verificar outra condição que será filter link get attribute. Temos que especificar aqui o atributo do tipo de dados. Se isso for igual a tudo, essa parte da condição verifica se o tipo de dados do link do filtro clicado está definido como tudo Essa condição é usada para indicar que todos os projetos devem ser exibidos , independentemente do tipo ou da categoria. Tudo bem, a condição da declaração está pronta. Se for verdade, então temos que mostrar o projeto. Portanto, temos que remover a altura da turma do projeto. Precisamos da lista de classes do projeto, remova. Temos que especificar aqui a altura do nome da classe. Tudo bem, então acho que é isso, agora a navegação deve funcionar. Vamos clicar, temos aqui algum problema. Vamos inspecionar a página e verificar a guia do console. Temos um erro aqui que diz que o projeto não está definido. Precisamos da 29ª linha. Na verdade, precisamos passar declarações if aqui. É por isso que o projeto não é reconhecido. Agora, o problema deve ser resolvido. Vamos verificar. Se clicarmos novamente, teremos algum problema. Não é possível ler as propriedades da remoção de leitura indefinida. Vamos verificar essa linha de código aqui, lista de classes com L maiúsculo. Agora, se eu verificar , tudo funcionará perfeitamente. Finalmente, a navegação funciona bem. Na verdade, com a seção do projeto, terminamos. Espero que tenha sido interessante e você aprenda algumas coisas novas. Vamos passar para a próxima palestra. 30. Como criar a seção de marcação HTML para modelos: Tudo bem, na palestra anterior terminamos de trabalhar na seção de projetos Parece muito bom e também funciona bem. Quero dizer essa navegação por filtro. Agora é hora de seguir em frente e começar a criar a próxima seção. Vamos dar uma olhada no projeto finalizado. A próxima seção será uma seção chamada modelos. Esta seção consiste em duas partes diferentes. A primeira parte é o que você vê aqui agora. Quanto à segunda parte , será o vídeo. Vamos continuar descrevendo a seção. A primeira parte incluirá os lados esquerdo e direito. No lado esquerdo, você pode ver o parágrafo do título e a parte inferior. Quanto ao lado direito, você pode ver aqui três imagens diferentes. E também na parte inferior abaixo, você pode ver o efeito parcial das imagens. Começaremos com a primeira parte e depois passaremos para o vídeo. Primeiro de tudo, precisamos criar a marcação HTML. Vamos ao código do VS e inserir novos comentários logo após os projetos, precisamos de comentários para os modelos. Em seguida, vou abrir os elementos da seção com os modelos de nome da classe. Como eu disse, a primeira parte da nossa seção consistirá em duas partes diferentes. Quero dizer o lado esquerdo e o lado direito. Vou abrir a tag p, que serão os modelos restantes. Ele consistirá no parágrafo do título e no botão. Vou abrir os elementos do cabeçalho H one , que serão modelos. Em seguida, precisamos de um parágrafo. O parágrafo consistirá em algum texto fictício. Vou inserir aqui, Lorem, e então o número de palavras será 30 Aqui temos o texto fictício. Então, precisamos do tipo de fundo, mas também teremos aqui o nome da classe, onde serão os modelos, PTN. Quanto ao texto que vou inserir sobre o modelo, ok, é isso mesmo. Sobre o lado direito. Isso é tudo sobre o lado esquerdo, não o lado direito. Agora precisamos cuidar do lado direito. Vou abrir uma tag profunda que será um modelo. Certo? Teremos aqui três imagens diferentes e uma bunda de brincadeira Vamos inserir elementos de imagem. Vou especificar o caminho da imagem que precisamos para sair da pasta do carro e, em seguida, selecionar as imagens. Vou selecionar a web oito, imagem um. Então, imagem da web dois, precisamos da web oito imagem três. Tudo bem, vamos falar sobre as imagens. Em seguida, precisamos do botão play. Vou abrir a tag com o botão do nome da classe. Criaremos esse bastão usando telefones ligados. Estou abrindo uma tag do primeiro botão com o nome da classe Play PTN. Em seguida, vou inserir seus elementos com as classes FA solid FA play que contém a marcação HTML está pronta para a seção de modelos Estou na primeira parte da seção. Aqui temos os elementos. Agora é hora de seguir em frente e personalizar esses elementos. E para isso, vamos para a próxima palestra. 31. Seção de modelos de estilo: Tudo bem, então, na aula anterior, criamos a marcação HTML para a seção de modelos e agora temos que estilizar essa Vamos ao código do VS e inserir novos comentários no arquivo CSS. Precisamos de bens comuns para modelos. Em seguida, vou selecionar a seção de modelos. Em primeiro lugar, vou definir largura e altura. A largura será de 100%. Quanto à altura, vou torná-la com 100 de altura da janela de visualização Será 100% da janela de visualização. Em seguida, vou mudar o plano de fundo. Vamos usar a função de gradiente linear. A direção da transição de cores será duas à esquerda. Em seguida, vou inserir seu primeiro chamador. Vai ser 8430. Então teremos a segunda cor. Vai ser 8430. Na verdade, é da mesma cor da terceira pessoa que ligou. Vai ser 409. Vamos dar uma olhada no navegador. Então, como você pode ver, temos aqui a classificação linear em gordura. Em seguida, vou esconder o lado direito por um tempo. Vamos selecionar modelos, certo. Adicione aqui, não exiba nenhum. Como você pode ver, a parte direita está oculta e temos aqui apenas o lado esquerdo. Em primeiro lugar, vou personalizar o lado esquerdo e depois cuidaremos do lado direito também. Vamos continuar e selecionar os modelos restantes. Vou definir a largura 50%, ela ocupará a metade da seção. Então eu vou definir a posição como absoluta. Vou posicionar os modelos deixados de acordo com os elementos principais. Precisamos de uma posição relativa para os modelos. Em seguida, vou definir as propriedades superior e esquerda. Ambos serão zero. Além disso, vamos criar algum espaço dentro do elemento usando preenchimento. Vou definir o preenchimento para 25 Ram na parte superior. Então teremos dez Ram no lado direito, zero na parte inferior e dez Ram no lado esquerdo. Novamente, aqui temos os elementos, também o espaço dentro do lado esquerdo. Em seguida, vou cuidar do título. Vamos seguir em frente e selecionar modelos. Deixou um elemento de cabeçalho. Em primeiro lugar, vou definir a família de telefones. Vamos ligar para Molly Cursive. Em seguida, vou definir o tamanho do telefone , serão sete Rams. Vamos transformar texto em caso de ópera. Então, precisamos de algum espaço entre as letras. Vamos configurar 2,5 Ram. Então eu vou mudar a cor. Vai ser branco. Como você pode ver, o título parece muito bom. Vamos adicionar mais alguns estilos a ele. Vou criar alguns efeitos de sombra usando sombra. Precisamos aqui de 0,5 Ram. Em segundo lugar, a cor será RGBA, cor preta com opacidade de 0,3 Por fim, vou criar algum espaço na parte inferior do título usando a margem inferior, o valor será Ok, então vamos falar sobre o próximo título. Eu vou cuidar do parágrafo. Vamos continuar e selecionar os modelos restantes. Em primeiro lugar, vou definir a largura do parágrafo. Serão 60 Ram. Em seguida, vamos definir o tamanho da fonte para 1,6 Rams. Vou definir o peso da fonte que precisamos aqui. Peso, serão 300 para criar um espaço entre as letras. Vamos configurá-lo para 2.1 Ram e mudar a cor. A cor será 222. Aqui temos o parágrafo. Em seguida, vou usar novamente o Tech Shadow. Vamos copiar essa linha de código e adicioná-la aqui. Vou diminuir a opacidade. Vamos fazer com que seja 0,1 Ram. Na verdade, não Ram, mas apenas 0.1 Finalmente, quando você ouvir uma parte inferior maior para criar o espaço na parte inferior, vamos adicioná-la a sete. Ok, vamos ver o próximo parágrafo. Precisamos personalizar a parte inferior. Vamos seguir em frente e selecionar modelos. Na verdade, não precisamos mais de modelos aqui. Precisamos de modelos BTN que tenham seu nome de classe individual. Primeiro de tudo, vamos definir com 213 Ram. Então, a altura do fundo será de seis Ram. Em seguida, precisamos da cor de fundo. Vou configurá-lo para branco. Vamos dar uma olhada na parte inferior. Precisamos nos livrar da borda padrão e também tornar a parte inferior arredondada. Precisamos aqui da fronteira nenhuma e depois do raio da fronteira. Serão três Ram. Ok, depois disso, temos que cuidar das fontes. O tamanho da fonte será de 1,8 Ram. Então eu vou deixar a questão ousada. Além disso, vamos transformar o texto em maiúsculas. Então, precisamos de espaçamento entre letras para criar algum espaço entre as letras Vai ter 0,1 RAM e também mudará a cor dos telefones. A cor será A, A, três EC. Vamos dar uma olhada agora. O botão parece muito bom. A única coisa que precisamos fazer é criar algum efeito de sombra usando o box shadow. Precisamos aqui, 01 Ram, três Ram, e a cor também será RGBA com a opacidade Além disso, precisamos aqui apontar. Ok, então é isso, sobre o lado esquerdo, agora temos que cuidar do lado direito. Como você sabe agora, o lado direito está oculto. Vou me livrar do display none daqui. Vou definir a largura e a altura do lado direito. A largura será de 50%. Então, precisamos de altura, vou configurá-la para 100% vou definir a posição como absoluta. Então, as duas posições serão zero. Temos que definir a posição correta, que também será zero. Como você pode ver, os elementos são colocados no lado direito da seção. Em seguida, vou tirar você das imagens. Em primeiro lugar, vou selecionar todas as imagens de que precisamos aqui, modelos, à direita, seguidas pela combinação de imagens. As imagens terão dois estilos comuns. A primeira será a posição absoluta. Além disso, teremos aqui um raio de fronteira e será um Ram Em seguida, precisamos personalizar cada imagem separadamente. Vamos começar com a primeira que precisamos aqui, a imagem correta do modelo, seguida pelo enésimo seletor filho Selecione a primeira imagem, temos que definir a largura. Serão 40 Ram. Além disso, vou definir a posição da primeira imagem. A posição superior será de 50%. Então, precisamos da posição correta, será de 25%. Precisamos centralizar a imagem verticalmente E para isso eu vou usar transform translate Y com o valor de -50% aqui Tenha a primeira imagem, essa. Vamos torná-la visível usando propriedade index porque ela acabou ficando atrás das outras imagens. Vamos definir o índice como um. Agora você pode ver aqui que a primeira imagem está totalmente visível. Em seguida, vou criar um efeito de sombra usando a sombra Po. Os valores serão 0,27 Ram e a cor será RGBA com opacidade 0,4. Além disso, vou diminuir um pouco a opacidade da imagem Vamos configurá-lo como 2.8 Novamente, aqui temos a primeira imagem. Parece muito bom. Vamos seguir em frente e personalizar a segunda imagem. Na verdade, vou duplicar esse código depois alterar o enésimo seletor de bate-papo Serão dois, a largura será de 20 Ram. Então, precisamos aqui posicionar 20% em vez da posição correta. Vou usar aqui a posição esquerda. E o valor será de 18%. Não precisamos aqui transformar, traduzir. Vamos nos livrar disso. A sombra da caixa terá valores diferentes. Precisamos aqui de 18 gramas. Quanto à opacidade, será 0,6 Também elimina a opacidade a partir daqui. Em seguida, dê uma olhada no navegador. Aqui temos a segunda imagem. Parece muito bom e está posicionado corretamente. Em seguida, temos que cuidar da terceira imagem. Vou duplicar esse código, alterar o enésimo seletor de bate-papo. Serão três. A largura da imagem será sete. Então, a posição será 22%. Em seguida, precisamos da posição correta, é 5%. Além disso, temos que alterar a opacidade da sombra da caixa, que será 0,5. Em seguida, adicione aqui a opacidade, será 0,5 Vou me livrar da propriedade do índice porque não precisamos Acho que é isso sobre a terceira imagem. Vamos dar uma olhada. Como você pode ver, todas as três imagens estão alinhadas e têm uma aparência muito boa Ok, agora temos que cuidar do botão play. Vamos selecionar o botão Development Play. Vou definir a posição como absoluta, então restam 57% para a posição A posição será de 23%. Vamos dar uma olhada. O botão não está visível. Acabou por trás das imagens que precisamos aqui, a propriedade de índice. Vamos definir o índice para três. Agora, o botão deve estar visível aqui. Botão. Em seguida, temos que selecionar Play BTN e definir a altura Serão 20 Ram. Quero dizer, as duas propriedades. Em seguida, vou mudar a cor de fundo. Vamos configurá-lo para branco. Além disso, vou arredondar o elemento usando o raio da borda com o valor de 50%. Aqui, toque BTN I, o círculo Em seguida, precisamos nos livrar da borda padrão da parte inferior. Digamos que fronteira com nenhuma. Então precisamos de sombra de caixa. Os valores serão 01 Ram. Dez Ram. Precisamos de RGBA, cor preta com opacidade de 0,6 Finalmente, precisamos que o cursor seja apontado aqui O círculo, a parte inferior, parece muito bom. Em seguida, temos que criar a parte de trás da parte inferior. Essa parte aqui, esse círculo transparente. E eu vou criar esse elemento usando quatro pseudoelementos Vou selecionar play BTN seguido pelos quatro pseudo-elementos Vamos definir o conteúdo, ele estará vazio. Em seguida, precisamos de peso e altura. Vamos configurar os dois para 26 Ram. Em seguida, vou definir a cor de fundo para RGBA. Precisamos aqui da cor branca, que é 25053 vezes, mas precisamos de menor opacidade, que é 25053 vezes, mas precisamos de menor opacidade, 0,1 à direita. Agora, antes do elemento não está visível porque temos que definir sua posição. Vamos definir a posição como absoluta. A posição superior será de 50%, então a posição esquerda também será de 50%. Estou tentando centralizar o elemento para isso. Como você já sabe, precisamos aqui transformar translate com os valores -50% novamente -50% Agora o elemento deve estar visível Aqui temos os elementos. Vamos torná-lo arredondado usando o raio da borda. Vai ser de 50%. Além disso, precisamos de sombra de caixa. Na verdade, vou pegar Box Shadow daqui. Quero dizer, os valores de que precisamos apenas para alterar a opacidade. Vai ser 0,3 Agora podemos ver claramente o círculo a seguir, temos que cuidar do fásico É muito menor agora. Agora vamos selecionar os elementos. Precisamos do Play BTN. O tamanho do telefone será de sete Ram. Quanto à cor do ícone, vou defini-la para 2025. Para, como você pode ver, o telefone como ícone ficou maior e ficou muito bonito. Em seguida, temos que criar os efeitos de foco. Os efeitos. Primeiro de tudo, vou cuidar do jogo BTN, vamos selecioná-lo com o mouse, vou aumentar a escala do elemento Para isso, precisamos transformar a escala. E será 1,2. Precisamos da transição dela, todos os 0,3 segundos. Agora, como você pode ver, a escala aumenta quando passamos o mouse sobre o botão Agora temos que tornar os quatro elementos um pouco menores. Ao passar o mouse, precisamos selecionar Jogar. Btn com o mouse seguido pelos elementos de força. Precisamos diminuir a escala dos elementos. Vamos pegar esse código aqui. E faça a escala 0,9 que precisamos aqui para fazer a transição de todos os 0,3 segundos. Quando passarmos o mouse sobre a parte inferior, a escala do elemento diminuirá Mas, como você pode ver, o elemento se move para baixo. Isso acontece porque ser forçado a acessar o elemento, por padrão, transformou a tradução aqui. Precisamos copiar, traduzir e editar aqui também. Vamos copiar a função de tradução e editar aqui. Agora, o problema deve ser resolvido. Como você pode ver, tudo funciona muito bem. Agora temos que criar o efeito polar. Quer dizer, temos que criar elementos que cubram parcialmente as imagens com algum efeito de desfoque Vou criar antes os elementos da seção. Precisamos aqui de modelos seguidos pelos quatro elementos. Vamos definir o conteúdo, ele estará vazio. Então precisamos de uma altura aproximada, vou colocar os dois no bonde Então precisamos de antecedentes. Vou usar a função de gradiente linear. A direção da transição de cores será duas partes inferiores. Então, a primeira cor será transparente. Então precisamos de uma segunda cor, e será oito por 30, essa. Quanto à terceira cor, precisamos usar o mesmo 84430 A agora, antes que o elemento não esteja visível Porque acabou atrás de outros elementos, atrás do elemento de seção. Para tornar o elemento visível, precisamos do índice com valor quatro. O elemento não está visível. Na verdade, isso acontece porque temos que definir a posição. Eu esqueci isso. Precisamos de uma posição absoluta. Então a posição inferior será -5% Quanto à posição correta, vou dizer dois, 10% Agora o elemento deve estar visível Sim, é visível. Em seguida, precisamos usar uma propriedade chamada filter, que nos permitirá criar um efeito polar. Vou usar filtro com função polar e o valor será sete. Como você pode ver, temos aqui um efeito muito bom e legal. Agora temos um pequeno problema. O botão e a parte superior atrás do elemento anterior. Para corrigir isso, precisamos aumentar o valor da propriedade do índice. No momento, são três. Vamos fazer com que seja cinco, que é maior que quatro. Agora, o problema deve ser resolvido. Está bem? Tudo parece muito bom. E, na verdade, com o estilo da primeira parte da seção de modelos, terminamos a seguir Temos que incorporar o vídeo a esta seção. Para isso, vamos passar para a próxima palestra. 32. Criando a marcação HTML para player de vídeo: Na aula anterior, estilizamos a seção do modelo, seja, a primeira parte da Agora é hora de seguir em frente e começar a segunda parte. Quero dizer, temos que levar o vídeo para a seção. Vamos dar uma olhada no projeto finalizado. Se eu clicar no botão de reprodução, o vídeo será exibido. Se eu clicar no botão play , ele começará a tocar. Na verdade, todos os controles funcionam bem. Aqui temos aqui opções de velocidade. No momento, o vídeo está sendo reproduzido no modo normal. Se eu clicar em, digamos, dois X , ele começará a tocar rapidamente. Em seguida, temos aqui a foto. No modo imagem, você pode arrastar e soltar essa pequena janela. Também temos aqui o modo de tela cheia. Se eu clicar nele, o vídeo será reproduzido no modo de tela cheia. É isso aí, o que vamos fazer, se eu clicar no botão X , o vídeo será fechado. Vamos começar a criar a marcação HTML. Na marcação HTML, focaremos muitos elementos diferentes e acompanharemos a palestra Vou inserir novos comentários logo acima da tag da seção de encerramento que precisamos para o vídeo. Em seguida, abra o elemento, será um contêiner de vídeo no qual vou inserir outro fundo e será um vídeo. Vou criar um padrão de fechamento x. Essa é uma tag aberta com a classe PTN. Em seguida, insira o elemento com as classes com uma marca FA x sólida. Depois disso, vou abrir outro será um invólucro de controles Em seguida, precisamos de outra tag de mergulho e será uma linha do tempo do vídeo na qual teremos uma área de progresso Esse elemento incluirá a tag span com zero. Além disso, teremos aqui outro mergulho e será parte do progresso Esse elemento estará vazio. Em seguida, precisamos criar controles de vídeo nos quais teremos opções diferentes. Quero dizer, opções no lado esquerdo, no centro e no lado direito, e no lado direito, precisamos de elementos profundos com as opções de classes à esquerda. Vou duplicar essa linha de código duas vezes. Como eu disse, precisamos de opções no centro, também no lado direito. Vamos cuidar das opções. Na verdade, precisamos de suas opções e não de opções. Vamos cuidar das opções do lado esquerdo aqui , botão que terá quatro volumes. Vou inproteger o elemento I com as classes um volume sólido alto Em seguida, vou criar uma tag de entrada. O tipo será alcance. Além disso, vou adicionar aqui alguns atributos diferentes. O primeiro será o mínimo. Vou configurá-lo para zero. Então teremos o máximo e será um. E também precisamos de outro atributo chamado step. O valor será “ Tudo bem”, é mais ou menos o intervalo. Em seguida, vou criar outro desenvolvimento, que será um temporizador de vídeo Dentro. O cronômetro de vídeo terá três elementos de extensão diferentes O primeiro será o horário atual. Eu vou ganhar zero. Vamos duplicar o elemento span duas vezes. O segundo será separador. Vou inserir. Avançar. Quanto ao terceiro elemento de amplitude , será a duração do vídeo. Em seguida, vou cuidar das opções no centro. Teremos aqui três botões diferentes. Vamos criar Button com a classe retrocedendo. Vou inserir seus elementos. Vai ser o FAS FA atrasado. Vamos duplicar o botão duas vezes. O segundo elemento do botão será para a pose de jogo. Vamos mudar o nome da classe. Para o elemento, será FASFA play. Quanto aos elementos do terceiro botão, precisamos aqui, para frente em vez de para trás Vamos falar sobre as opções no centro. Em seguida, temos opções no lado direito. Vou inserir seu Desenvolvimento. Será conteúdo de reprodução. Vou inserir seu botão, que será a velocidade de reprodução Aqui, vou usar o símbolo do Google Material em vez do elemento. Vamos ao navegador e pesquisar os símbolos do Google Material. Precisamos visitar o site do Google Fonts, onde pegamos as fontes de Selecionar Esse estilo será arredondado. Em seguida, vou pesquisar vídeos em câmera lenta. Esse é o ícone que precisamos. Vamos clicar nesse ícone. E então eu vou copiar esse link daqui. Precisamos colar o link no elemento principal. Em seguida, temos que copiar esse elemento de extensão daqui. Vamos inserir o elemento span dentro do botão. Em seguida, verifique se o ícone é exibido. Como você pode ver, temos aqui o ícone, ele é exibido. Em seguida, precisamos adicionar aqui as opções de velocidade. No geral, teremos cinco opções de velocidade diferentes de que precisamos. A primeira opção será dois x. Vamos duplicar o desenvolvimento quatro vezes e alterar as opções O segundo será 1,5, então teremos aqui o normal. A próxima será 0,75 Quanto à última opção de velocidade, será 0,5. Além disso, precisamos adicionar também os atributos aos desenvolvimentos O atributo será a velocidade dos dados, e precisamos inserir aqui os valores semelhantes que precisamos aqui dois. Então 1,5 como o normal, vou usar aqui um. Então teremos aqui 0,75 e, finalmente, 0,5. É isso aí, sobre as opções de velocidade Em seguida, precisamos adicionar aqui o ícone para a foto. No modo imagem, precisamos de um botão com a classe Pick in Peak. Isso significa que, na verdade, precisamos aqui de pico em pico. Isso significa imagem no modo imagem. Novamente, precisamos pegar o ícone daqui. Vamos pesquisar imagem em imagem. Esse é o ícone. Vou pegar o elemento span e colá-lo aqui dentro do botão. Se verificarmos o navegador, você verá que o ícone é exibido. Tudo bem, em seguida, precisamos de outro botão para o modo de tela cheia. Vamos adicionar aqui a tela de cluster. Vou usar o elemento com as classes FA solid, FA, expand. Finalmente, precisamos incorporar o vídeo. Temos que inserir aqui o vídeo em si. Precisamos abrir a tag de vídeo no atributo source. Temos que especificar o caminho do arquivo. Primeiro de tudo, precisamos sair da pasta atual. Em seguida, precisamos selecionar uma pasta chamada vídeos. E temos que selecionar esse arquivo aqui. Tudo bem, então eu acho que isso é sobre a marcação HTML. Espero que tudo esteja correto aqui. Temos todos os elementos no momento, tudo está confuso. Você pode ver aqui os elementos do cabeçalho. E isso acontece porque o vídeo é sobre nosso projeto. É a prévia do nosso projeto. É por isso que você vê aqui os elementos do cabeçalho. Resolveremos esses problemas e personalizaremos esses elementos nas próximas palestras. Vamos seguir em frente. 33. Player de vídeo com estilo: Na palestra anterior, preparamos a marcação HDML para o vídeo, quero dizer, para a segunda parte da seção de modelos Agora é hora de estilizar esses elementos. No momento, tudo está confuso aqui, mas vamos resolver isso em breve A primeira coisa que vou fazer antes de começarmos a estilizar esses elementos é corrigir um pequeno problema. Como você pode ver, esse ícone não é exibido aqui. Se verificarmos o código HTML, você descobrirá que estamos faltando aqui D. Quero dizer, precisamos de uma face sólida. Agora, o problema deve ser resolvido. Como você pode ver, o ícone é exibido. Ok, agora vamos para o arquivo CSS e criar novos comuns para o vídeo Vou selecionar o contêiner de vídeo. Primeiro de tudo, vou definir a posição do vídeo. Vai ser consertado. Em seguida, vou definir as propriedades superior e esquerda. Vou colocar o topo em zero. Então a posição esquerda será zero. Vou definir dentro da altura. Vamos definir os dois para 100%. Em seguida, vou mudar a cor do plano de fundo. Vamos definir a cor de fundo para um valor RGBA. Os valores serão de dois a sete, depois dois a dois e, em seguida, teremos 253 Quanto à opacidade, vou configurá-la como 2.9 Aqui temos o Mas temos aqui o problema. Acabou por trás de alguns elementos. Para corrigir esse problema, precisamos definir a propriedade do índice. Vamos configurá-lo para um valor maior. Digamos que 100. Agora , o problema está resolvido. O contêiner de vídeo é criado, tem o estilo Avançar, vou selecionar o vídeo I, esse elemento aqui Vamos selecionar Vídeo e definir sua largura. Serão 90 m. Quanto à altura, vou definir a altura como O. Além disso, precisamos selecionar o vídeo em si. Quero dizer esse elemento aqui, vamos selecioná-lo usando o nome da tag e definir a altura como 100%. Nesse caso, ele ocupará 100% da altura do elemento pai. Agora, aqui temos o vídeo. A próxima coisa que vou fazer é colocá-lo no centro do contêiner. Para fazer isso, vou usar livros de linho. Precisamos do Display Flex, depois do Justify Content Center e do centro de itens de linha Agora, como você pode ver, o vídeo é colocado no centro da página. Em seguida, vou adicionar um pouco de sombra ao vídeo. Vamos usar o box shadow. Vou inserir aqui os seguintes valores. Precisamos de zero, depois de um Ram. Ten Ram como cor. Vou usar o RGBA. Os valores serão 2052, depois de um a nove, a opacidade Vou para 32.7 Como você pode ver, o vídeo tem um efeito de sombra agradável e legal Depois disso, vou tirar o invólucro dos controles. Vamos definir com 100% e depois vou definir a posição como absoluta. Em seguida, vou definir a posição esquerda, ela será zero. Quanto à posição inferior, vou colocá-la em duas de -5,5 m, a embalagem de controles e a tampa abaixo. Isso acontece porque precisamos de uma posição relativa para o vídeo. Agora, como você pode ver, o invólucro de controles está posicionado corretamente. Para ver melhor, vou adicionar aqui uma cor de fundo temporária. Digamos que você leia aqui, temos o invólucro de controles Tudo bem, vamos nos livrar dessa cor de fundo. A próxima coisa que vou fazer é cuidar da linha do tempo do vídeo Vamos selecionar esse elemento. Vou definir a posição absoluta. Então eu vou definir com 100%. Quanto à altura, será de 0,7 Ram. Em seguida, vou colocar o cursor no ponteiro. Além disso, para exibir esse elemento, vou usar novamente uma cor de fundo temporária. Vamos configurá-lo para vermelho. Aqui temos a linha do tempo do vídeo. Em seguida, temos que sair da área de progresso. Eu vou me livrar dessa cor a partir daqui. E então eu vou selecionar a área de progresso. Precisamos de altura, será de 0,3 Ram. Então precisamos da cor de fundo dela. Vou usar a cor RGBA. Vai ser branco, mas com menor opacidade, mas com menor opacidade, 0,6 Aqui temos a área de progresso Em seguida, vou cuidar dos elementos de extensão. Quero dizer, neste elemento de amplitude, que é colocado dentro da área de progresso, vou selecionar a área de progresso, seguida pelo T. Vamos definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que é a área de progresso. Depois disso, vou definir as propriedades do canto superior esquerdo. No momento, vou até um vão de linha no centro da área de progresso. Para isso, vou definir a posição para -2,5 quadros. Então precisamos da posição esquerda, que será de 50% Para centralizar o elemento perfeitamente, precisamos transformar a função translate x com o valor -50%. Em seguida, mudarei a cor Será 333 e também definirá o tamanho da fonte. Vou configurá-lo para 1,3 Ram. Aqui temos o elemento Pan. Em seguida, vou cuidar da barra de progresso. Vamos continuar e selecionar a Barra de progresso. Vou definir uma largura. Vamos configurá-lo para 50% por um tempo. Então a altura será de 100%. Vou mudar a cor do fundo. Vai ser 2289. É de cor azul. Aqui temos a barra de progresso. Em seguida, vou para o círculo da barra de progresso. Vou criar esse círculo usando antes do elemento que precisamos aqui, a barra de progresso, seguida pela quatro, o elemento que vou definir como vazio. Em seguida, vou definir a altura de ambos para 1,3 m. Então, precisamos raio de borda de 50%. Porque vamos criar o círculo e também mudar a cor do fundo, vou usar a mesma cor azul Em seguida, precisamos da posição para exibir o elemento. A posição será absoluta. Precisamos de uma posição relativa para o elemento de potência. Então, as duas posições serão 50%. Então, precisamos da posição correta. Vou configurá-lo para zero. Então, para centralizar o elemento verticalmente, precisamos transformar translate Y -50% Agora o círculo deve estar visível Aqui está. Tudo bem, em seguida, vou cuidar dos controles de vídeo. Vamos selecionar os controles de vídeo. Precisamos de controles no contêiner. Primeiro de tudo, vamos definir a largura. Vai ser 100%. Então eu vou alinhar os elementos. Quero dizer itens flexíveis usando livros flexíveis. Precisamos do Display flex. Em seguida, precisamos centralizar os itens de linha para centralizar os itens flexíveis verticalmente Além disso, vou criar espaço entre os itens flexíveis Usando o espaço entre, quero dizer justificar o espaço entre os conteúdos Vamos verificar o resultado. Como você pode ver, os controles estão alinhados. Em seguida, vou criar algum espaço dentro do elemento usando preenchimento. O preenchimento será de uma RAM na parte superior e inferior e duas RAM nos lados esquerdo e direito Além disso, vou mudar a cor do plano de fundo. Vai ser RGBA, cor preta com opacidade de 0,5 Ok, então aqui temos Em seguida, vou cuidar das opções aqui. Temos três opções, quero dizer, opções no lado esquerdo. Então, temos opções no centro e opções no lado direito. Espero que você se lembre deles daqui. Opções restantes. Então, temos o centro de opções e as opções certas. Vamos seguir em frente e selecionar Opções. Vou configurar a tela para flexionar. Em seguida, vou definir a largura de cada opção. Vou dividir 100% por três para atribuir a cada elemento a largura uniforme. Para isso, calculamos a função, que nos permite fazer alguns cálculos Como eu disse, precisamos dividir 100% por três. Em seguida, vou alinhar os itens no centro, principalmente usando o alinhamento de itens no Tudo bem, depois disso, vou selecionar o segundo elemento de opções e o terceiro elemento de opções porque precisamos de algum alinhamento individual para essas opções, vou selecionar as opções filho dois Precisamos aqui justificar o centro de conteúdo. Então, vamos duplicar esse código, alterar o seletor de filhos. Precisamos de três. Quanto ao valor da propriedade justify content, ela será flexível Agora, como você pode ver, as opções estão perfeitamente alinhadas. Agora temos que cuidar dos botões. Vamos selecionar o botão, quero dizer, o botão Opções, vou definir a altura até, então precisamos nos livrar da borda padrão na parte inferior. Vamos definir a borda como nenhuma. Em seguida, vou me livrar da cor de fundo padrão. Vou definir a cor de fundo como transparente. E depois mude a cor do texto. Vai ser branco. Finalmente, precisamos que o cursor seja um ponteiro. Tudo bem, agora como você pode ver os botões, os ícones estão bem bonitos. Em seguida, vou selecionar elementos. Precisamos de opções. Vou aumentar o tamanho do telefone, digamos para 1,9 m. Tudo bem, vamos lá. Mas, em seguida, vou cuidar do elemento de entrada, que é uma faixa do volume. Vou selecionar Opções de entrada. Eu vou definir a altura. Vai ser 0,4 Ram, então a largura vai ser 7,5 Além disso, precisamos de algum espaço no lado direito usando a margem, certo? Vamos dizer isso para um Ram. Acho que o elemento de entrada, a faixa do volume. Muito bom. Em seguida, precisamos cuidar dos elementos do intervalo do cronômetro de vídeo Vamos selecionar a linha do tempo do vídeo. Precisamos do elemento span. Vamos definir a cor para branco. Como você pode ver, os elementos do span ficaram brancos. Precisamos, das opções de velocidade, eu vou para as opções de velocidade, vamos definir a largura. Serão 9,5 Ram. Então, precisamos que a posição seja absoluta. Posição relativa para os elementos principais. Nesse caso, pai é um conteúdo de reprodução, precisamos aqui da posição relativa Em seguida, precisamos definir a posição inferior para as opções de velocidade. Será como na posição esquerda, vou configurá-la para menos quatro Ram Em seguida, vou mudar a cor do plano de fundo. Vai ficar branco aqui, temos as opções de velocidade. A próxima coisa que vou fazer é torná-lo ligeiramente arredondado. Vamos definir o raio da borda de 2,4 run. Tudo bem, é isso. Sobre as opções de velocidade, o próximo desenvolvimento, precisamos cuidar desses elementos de texto, quero dizer, dos mais profundos. Vou selecionar Opções de velocidade, seguido pelo desenvolvimento. Vamos definir o tamanho do telefone para 1,4 Ram. Em seguida, vou criar algum espaço dentro do desenvolvimento. Digamos pudim, 2,5 Ram por cima. Então precisamos de zero no lado direito, 0,5 na parte inferior e 1,5 Ram no lado esquerdo. Em seguida, use novamente, mais perto de 0,2 Ok, agora as opções de velocidade parecem muito melhores. Em seguida, precisamos ativar uma das opções de velocidade. Na verdade, vou tornar este ativo normal. A opção de velocidade padrão que vou adicionar ao terceiro desenvolvimento, que é normal, será a opção ativa. Em seguida, vou selecionar aqui a opção ativa. Vamos mudar a cor de fundo. Vai ser a cor azul que usamos recentemente. Então, precisamos que a cor seja branca. Ok, então, como você pode ver, temos aqui uma opção de velocidade padrão agradável e legal, o que é normal. Tudo bem, a última coisa que vou fazer com os controles é colocar esses ícones perfeitamente no centro. Quero dizer, a centralização vertical, como você vê, eles não estão perfeitamente centralizados Para fazer isso, vou selecionar aqui Opções e depois Opções Spin. Vou definir W e altura 100%. Em seguida, vou usar a altura da linha. Vou configurá-lo para dobrar. Agora, como você pode ver, o problema está resolvido. Tudo bem, então a única coisa que vou fazer neste vídeo é cuidar do botão X de fechamento. Ele deve ser colocado aqui. Vamos continuar e selecionar PTM. Na verdade, precisamos do elemento aqui, quero dizer, o ícone. Vou definir a posição como absoluta. Então, precisamos que a posição seja -6%. A posição correta será zero Além disso, vou aumentar o tamanho da fonte em 3.022,2 Ram E então faça o cursor apontar. Tudo bem, então é isso. Terminamos de estilizar o vídeo, parece muito bom Em seguida, temos que fazer com que funcione para isso. Vamos passar para a próxima palestra. 34. Fazendo brincadeira/pare no trabalho de Button: Na palestra anterior, terminamos de estilizar o player de vídeo e agora temos que fazê-lo funcionar Para isso, vou usar o Javascript. Vamos para o código VS e abrir o script ou arquivo JS. Vou inserir novos comentários para o vídeo. Em seguida, vou selecionar alguns elementos diferentes. O primeiro será um contêiner de vídeo. Vou selecionar esse elemento usando o método seletor de consultas Precisamos especificar aqui o nome da classe, contêiner de vídeo. Em seguida, vou selecionar o vídeo em si. Quero dizer, o arquivo de vídeo. Vamos chamar o vídeo principal variável. E selecione esse elemento usando o nome da tag. Selecionamos esse elemento aqui. O vídeo também, vou criar outra variável e ela será reproduzida BTN. Vamos selecionar esse elemento que precisamos aqui, nome da classe, pose, e também temos o elemento interno porque é um telefone, também um microfone Ok, selecionamos três elementos diferentes, o contêiner de vídeo, o vídeo em si e também o botão de reprodução. Agora temos que adicionar um ouvinte de eventos ao botão play com clique no evento Depois de clicar no botão play, o vídeo deve ser reproduzido. Então, no próximo clique, deveria. Vou adicionar um ouvinte de eventos à peça BTN. Vamos especificar aqui o evento de clique. Além disso, vou instituir uma função de retorno de chamada. Essa função será executada assim que clicarmos no botão. Precisamos verificar se o vídeo foi publicado ou não. Se estiver, significa que o vídeo não está sendo reproduzido. Se o vídeo for publicado, ele deverá começar a ser reproduzido. Precisamos da declaração if na qual vou inserir a seguinte condição. Precisamos da postagem principal do vídeo. É uma propriedade embutida em Java script. Se for verdade, então devemos reproduzir o vídeo. Para isso, vou usar a função embutida que é chamada de argila. Tudo bem, em seguida, precisamos declaração L na qual temos que postar o vídeo. Precisamos de um método chamado post. Tudo bem, vamos ao navegador e verificamos. Clique no botão. Como você pode ver, o vídeo está sendo reproduzido. Agora, quando eu clicar no botão, ele fará uma pausa. Tudo bem, então tudo funciona bem. Em seguida, precisamos mudar o ícone. Quer dizer, se o vídeo estiver sendo reproduzido , devemos exibir aqui o botão de pose. E assim que publicarmos o vídeo , devemos voltar aqui com o botão play. Precisamos substituir os botões, quero dizer, os ícones. Para isso, vou adicionar até mesmo um ouvinte ao vídeo principal O evento será disputado. Além disso, vou adicionar aqui a função de retorno de chamada. Ele será executado assim que o vídeo for reproduzido. Se o vídeo estiver sendo reproduzido, teremos que substituir a classe do ícone do telefone. Precisamos de uma lista de placas e, em seguida, precisamos usar o método replace Precisamos substituir a classe atual, que é uma peça teatral. Precisamos substituí-lo por um post FA. Isso mudará o ícone. Precisamos da mesma coisa para o evento de pose que precisamos aqui. Então eu vou adicionar aqui FAA play Tudo bem, vamos verificar se funciona. Assim que clicarmos, o vídeo será reproduzido e o ícone também será alterado. Então, como você pode ver, tudo funciona perfeitamente. Tudo bem, por enquanto é isso. Vamos passar para a próxima palestra. 35. Atualização na barra de progresso: Tudo bem, na palestra anterior, programamos o botão play Depois de clicar nele, o vídeo começará a ser reproduzido. Além disso, o ícone mudará. Então, se eu clicar no botão Publicar , o vídeo será pausado Tudo funciona perfeitamente até agora. Em seguida, temos que cuidar da barra de progresso. No momento, o padrão é de 50%, precisamos alterá-lo e atualizar a largura da barra de progresso de acordo com o progresso do vídeo. Vamos voltar ao arquivo Javas. Em primeiro lugar, vou selecionar a barra de progresso. Vamos criar uma nova variável. Vai ser uma barra de progresso. Vou selecionar esse elemento usando, novamente, o método seletor de consultas Vou especificar aqui o nome da classe, a barra de progresso. Em seguida, vou alterar a largura da barra de progresso. Como eu disse agora, tem 50% e vou torná-lo zero. Como você pode ver, a largura da parte de progresso é zero. Na verdade, antes que o elemento acabe fora do player de vídeo, vou mudar a posição. No momento, ele tem a posição correta definida como zero e eu vou fazer com que seja -1,3 m. Agora o problema está resolvido Em seguida, adicionarei um ouvinte do evento ao vídeo principal E o evento será uma atualização de horário. evento de atualização de tempo é acionado periodicamente à medida que o tempo de reprodução dos vídeos avança. Vou adicionar o ouvinte do evento ao vídeo principal. Como eu disse, o evento será uma atualização de horário. Precisamos aqui da função de retorno de chamada. Ele será executado assim que o tempo de reprodução dos vídeos progredir Vou usar a estruturação e pegar duas propriedades, hora atual e duração do objeto do evento. Precisamos aqui de alvos. E vou colocar aqui o objeto do evento como argumento. Essa linha de código extrai duas propriedades, hora atual e duração do objeto alvo do pensamento Nesse contexto, o alvo representa o elemento de vídeo, neste caso, o vídeo principal. A hora atual representa o tempo atual de reprodução do vídeo em segundos. E a duração representa a duração total do vídeo, também em segundos. Vou mostrar essas duas propriedades no console. Vamos inserir aqui a hora e a duração atuais. Em seguida, vou ao navegador, inspecionarei a página e verificarei a guia do console Depois de clicar no botão play , você verá aqui a hora atual mostrada em segundos. E também temos aqui a duração total, tempo total do vídeo. Ok, vamos voltar ao arquivo Charles. Vou me livrar dessa linha de código. A próxima coisa que vou fazer é definir o valor percentual da parte de progresso. Para isso, precisamos criar uma nova variável. Vou chamá-lo de pessoa. Será igual ao tempo atual dividido pela duração. Temos que multiplicá-lo por 100. Essa linha calcula a porcentagem do vídeo que foi reproduzida Ele divide a hora atual pela duração e multiplica o resultado por 100 para convertê-lo em um valor percentual Esse valor representa o progresso da reprodução do vídeo Agora temos que adicionar esse valor ao estilo da barra de progresso. Para isso, temos que selecionar a barra de progresso. Então, precisamos da propriedade de estilo seguida pela largura. Em seguida, vou abrir e, em seguida, vou abrir as cadeias de caracteres do modelo. Temos que passar aqui valor percentual que acabamos de definir. Precisamos de calibrações seguidas pelo sinal de porcentagem. Essa linha atualiza a largura de um elemento da barra de progresso para representar visualmente o progresso do vídeo. Ele define a propriedade de largura do estilo CSS das barras de progresso para o valor calculado da pessoa, seguido pelo sinal de porcentagem. Isso fará com que a barra de progresso aumente ou diminua. Enquanto o vídeo é reproduzido, ou seis, tudo está pronto para funcionar. A barra de progresso. Se eu clicar no botão Reproduzir , a barra de progresso será atualizada adequadamente, para que tudo funcione bem. Tudo bem, vamos falar sobre esse vídeo, vamos para o próximo. 36. Pular vídeo para trás e para a frente: Na palestra anterior, programamos a barra de progresso Quando começarmos a reproduzir o vídeo, a barra de progresso será atualizada automaticamente à medida que o vídeo avança. A próxima coisa que vou fazer é programar esses botões de pular para frente e para trás Se dermos uma olhada no projeto finalizado e clicarmos nos botões para trás e para frente, como você pode ver, eles funcionam O vídeo é reencadernado. Vamos até o arquivo geos e selecionamos dois elementos, o phonomiconsan Os botões pulam para frente e para trás. Então, vou criar uma variável e vou chamá-la de skip backward Vou selecionar o elemento usando o método seletor de consulta Precisamos aqui pular para trás, seguido pelos elementos. Vamos duplicar esse código e mudar de trás para frente. Precisamos, tudo bem, agora adicionar um ouvinte de eventos aos dois botões com o evento de clique E então temos que definir pular o vídeo adicionando e subtraindo uma certa quantidade de tempo à hora atual do Vamos adicionar um ouvinte de eventos ao contrário. Precisamos de um evento de clique. Em seguida, temos que passar aqui uma função de retorno de chamada que será executada assim que clicarmos na parte inferior Como eu disse, temos que subtrair uma certa quantidade de tempo até a hora atual do vídeo Portanto, precisamos do vídeo principal dela, na hora atual. Precisamos do tempo atual dela, então menos é igual, vou subtrair 5 segundos Agora, se eu começar a reproduzir o vídeo, se eu clicar no botão Voltar, ele pulará o vídeo em 5 segundos O botão pular para trás funciona bem. Em seguida, temos que fazer o mesmo com o botão pular para frente. Vou duplicar esse código. Precisamos mudar a variável, ela vai avançar Temos que adicionar aqui 5 segundos novamente. Aqui, subtraímos 5 segundos do tempo atual de reprodução do vídeo Ele retrocede o vídeo 5 segundos quando o botão retroceder Da mesma forma, adicionamos 5 segundos ao tempo de reprodução recorrente do vídeo e ele avança o vídeo em 5 segundos quando o botão de avançar é clicado 5 segundos quando o botão de avançar é clicado Se verificarmos os resultados e clicarmos nos botões de pular , você verá que tudo funciona perfeitamente bem Vamos ver os botões de retroceder e avançar. Vamos passar para a próxima palestra. 37. Trabalhando em button de volume: Na aula anterior, programamos os botões pular para trás e pular Se reproduzirmos o vídeo e clicarmos nesses botões, eles pularão o vídeo Eles funcionam bem. Em seguida, temos que cuidar do botão de volume. Se dermos uma olhada no projeto finalizado e reproduzirmos o vídeo, você ouvirá o som do vídeo. Se eu clicar no botão de volume , ele silenciará o som do vídeo E você também pode ver que o ícone foi alterado. Programaremos esse botão nesta palestra e, em seguida, cuidaremos do controle deslizante Tudo bem, vamos ao código VS. Em primeiro lugar, vou adicionar aqui comentários porque o código está ficando maior. E para evitar confusões, vamos adicionar os comentários. Vou adicionar aqui a barra de progresso, o fim da barra de progresso. Então temos aqui o botão Play Pose. Na verdade, precisamos adicionar essa linha aqui. E então temos os botões Skip. Tudo bem, agora é hora de cuidar do botão de volume. Vou selecionar o volume. Batson. Vamos mudar o nome. Em seguida, temos que alterar o nome da classe que será volume I do telefone, então ícone. Então eu vou adicionar aqui novos comentários. Vou adicionar um ouvinte de eventos ao botão de volume. Com o evento de clique, precisamos do volume BTN, adicione o ouvinte do evento. Vou inserir seu evento de clique. E também precisamos da função de retorno de chamada, que será executada assim que clicarmos no botão de volume Agora temos que usar a declaração na qual vou verificar o estado atual do botão de volume. Dentro da condição dentro da declaração e depois eu vou explicá-la. Não precisamos de um operador seguido pela lista de classes de PCN de volume. Em seguida, vou usar o método chamado contains. Vou especificar aqui o nome da classe que é um volume alto. Essa condição verifica se o botão de volume não tem o volume FA alto. O método class contains é usado para determinar se uma classe está presente no elemento. Se o botão não tiver a classe alta de volume FA, significa que o volume atualmente não está definido para o nível mais alto. Se essa condição for verdadeira, teremos que definir o volume 2.5. Isso significa que definimos a propriedade de volume do elemento de vídeo principal para 50%. Em seguida, precisamos substituir o ícone. Se essa condição for verdadeira, teremos que substituir o telefone. Então, ícone, precisamos substituir a lista de classes PTN de volume. Temos que passar aqui a marca X do volume FA. Esse ícone nos mostra que o som está mudo. Agora precisamos desse nome de classe. Vamos copiar e colar aqui. Tudo bem, depois disso, temos que usar a instrução L na qual temos que definir o volume do vídeo para zero. Temos que silenciar o som. Precisamos do volume principal do vídeo. Deve ser igual a zero. Além disso, precisamos substituir o ícone que precisamos aqui, volume FA alto e, em seguida, a marca do volume X. Deixe-me explicar mais uma vez. Essa linha substitui a marca de volume X da classe FA, que representa um ícone mudo, FA de volume alto, que representa um ícone de alto volume Isso atualiza visualmente o ícone do bóson de volume para indicar que o volume agora está em um nível mais alto Quanto a esta linha aqui, ela substitui o volume alto da classe FA marca X do volume FA Atualizar visualmente o ícone do botão de volume para indicar que o volume está mudo. Vamos ao navegador e verificar se ele funciona bem. Vou reproduzir o vídeo, o som. Se eu clicar no botão volar , ele silenciará o som e o ícone mudará Como você pode ver, tudo funciona bem. O botão de volume está programado. Em seguida, temos que cuidar desse controle deslizante aqui para isso. Vamos passar para a próxima palestra. 38. Trabalhando no controle deslizante de volume: Na palestra anterior, programamos o botão de volume Agora, como eu disse, temos que cuidar do controle deslizante de volume, esse elemento de entrada aqui Vamos dar uma olhada no projeto finalizado e reproduzir o vídeo. Você pode interagir com o controle deslizante e alterar o volume de acordo Se eu arrastar esse círculo para o lado esquerdo , ele silenciará o vídeo e o ícone mudará de acordo Isso é o que vamos fazer nesta palestra. Vamos voltar ao código do VS, selecionar os elementos de entrada, mas antes de tudo, vou alterar os comentários. Vamos deixar aqui o volume porque vamos adicionar o código do controle deslizante aqui também Vou deixar aqui apenas o volume. Em seguida, vou selecionar os elementos de entrada. Precisamos de um controle deslizante de volume. Vou mudar o nome da classe. Precisamos que ele vá embora. É a parte das opções no lado esquerdo. Precisamos da esquerda e depois da entrada para a direita, o elemento é selecionado. Em seguida, temos que adicionar um ouvinte de eventos ao elemento que precisamos aqui no controle deslizante de volume, temos que adicionar um ouvinte de eventos O evento será uma contribuição. Esse evento é acionado sempre que o valor do elemento de entrada é alterado. Nesse caso, quando o usuário interage com o controle deslizante de volume Vou passar sua entrada e, em seguida, precisamos de uma função de erro que será executada assim que o evento ocorrer. Agora vou definir o volume do vídeo. Precisamos do volume principal do vídeo. Temos que pegar o valor do objeto alvo. Precisamos aqui do valor-alvo. Temos que multiplicar por um. E vou explicar por que fazemos isso. Essa linha define a propriedade de volume do elemento de vídeo principal para o valor atual do controle deslizante de volume, que, nesse caso, tem como objetivo avaliar a multiplicação Essa conversão garante que o valor seja tratado como um número, não como uma string. Em seguida, temos que usar a declaração if. Precisamos de uma declaração if com a seguinte condição. O vídeo principal é igual a zero. Essa condição verifica se o volume dos vídeos está definido como zero. Em outras palavras, se está mudo ou não. Se o volume estiver mudo, teremos que atualizar o ícone do botão de volume para indicar mudo Se não estiver mudo, precisamos atualizar o ícone para indicar alto volume Precisamos, novamente, usar essas linhas. Precisamos aqui dessa linha de código. E então, na instrução L, precisamos substituir a marca x pelo ícone de volume alto. Vou passar essa linha de código aqui. Tudo bem, finalmente vou adicionar aqui valor do controle deslizante de volume igual ao volume do vídeo principal Essa linha de código define o valor do controle deslizante de volume para corresponder ao nível de volume atual do elemento principal do vídeo Isso garante que a posição da alça do controle deslizante reflita visualmente a configuração atual do volume quando a página é carregada ou quando o controle deslizante é exibido pela primeira vez Tudo bem, vamos ao navegador e verificar se está tudo funcionando bem. Eu vou reproduzir o vídeo. Então, vamos rastrear o controle deslizante. Na verdade, o controle deslizante não funciona. Vamos verificar o código. Talvez tenhamos um erro em algum lugar aqui. Precisamos do volume principal do vídeo. Esqueci de escrever essa propriedade aqui. Agora eu acho que o código deve funcionar. Vamos verificar. Agora, ainda temos algum problema. Vamos voltar ao código VS. O problema é que estamos perdendo aqui o objeto de evento. Agora eu acho que deveria funcionar. Sim. Agora esse controle deslizante funciona bem E podemos interagir com ele e alterar o volume de acordo. Tudo bem, então isso é tudo sobre o volume. Vamos passar para a próxima palestra. 39. Opções de velocidade de controle: Na palestra anterior, conseguimos controlar o volume Quer dizer, programamos botão de volume e também o controle deslizante de volume E agora é hora de seguir em frente e cuidar das opções de velocidade. Se dermos uma olhada no projeto finalizado e reproduzirmos o vídeo, podemos escolher aqui qualquer velocidade. Vamos jogar Two X. Como você pode ver, o vídeo está sendo reproduzido mais rápido A mesma coisa que temos com menor velocidade de taxa. O vídeo está sendo reproduzido em uma taxa mais baixa. Está bem? É isso aí, o que vamos fazer nesta palestra. Vamos ao código VS. Vou selecionar dois elementos diferentes. O primeiro será o botão de velocidade. Vou selecionar o elemento no método eletrônico de investigação. Vamos especificar aqui o nome da classe. Vai ser a velocidade de reprodução. Precisamos aqui do elemento span porque o Batson é um elemento spin Além disso, vou selecionar as opções de velocidade. Precisamos aqui de opções de velocidade. Quero dizer, no invólucro que desenvolve esse elemento aqui, precisamos especificar o nome da classe e serão as opções de velocidade Está bem? Então, a primeira coisa que vou fazer é gerenciar a exibição e ocultação das opções de velocidade. Depois de clicar no botão de velocidade, agora, as opções de velocidade ficam visíveis por padrão. No momento, as opções de velocidade estão visíveis por padrão. Precisamos mudar isso. Vou adicionar um clique em Eventos ao botão de velocidade. Na verdade, precisamos aqui novos comentários sobre as opções de velocidade. Em seguida, adicionarei um ouvinte de eventos ao botão de velocidade com o evento de clique Além disso, precisamos aqui de uma função de retorno de chamada que será executada quando você clicar no botão de velocidade Vou adicionar às opções de velocidade uma nova classe com um método total Vou usar esse nome de classe no arquivo CSS e definiremos novos estilos para esse novo nome de classe. Vou usar as opções de velocidade seguidas pela propriedade da lista de classes. Então, como eu disse, precisamos do método togal, precisamos especificar aqui o nome da classe Vou chamar isso de show. Em seguida, temos que ir ao arquivo CSS e selecionar Opções de velocidade com a classe show recém-criada. Antes de tudo, precisamos ocultar as opções de velocidade. Vou definir a opacidade como zero e a visibilidade Então, precisamos dessas duas propriedades com valores diferentes. A opacidade será uma, pois a visibilidade também será visível Para tornar o efeito mais suave, vamos fazer a transição Precisamos de opacidade aqui. Então, a duração será de 0,15 segundos. Além disso, vou acrescentar que aqui está tudo bem. Como você pode ver, as opções de velocidade estão ocultas. Agora, quando eu clicar no botão , eles serão exibidos. Ok, tudo funciona bem. A próxima coisa que vou fazer é ocultar as opções de velocidade quando clicamos em qualquer lugar da página, no documento. Para fazer isso, adicionarei um ouvinte de eventos ao documento Precisamos de um ouvinte de eventos com eventos de clique. Além disso, vou inserir aqui uma função de retorno de chamada. Eu vou usar declarações no início. Vou inserir aqui a condição e depois vou explicá-la. Precisamos de um alvo que não seja igual ao alcance. Então, precisamos da segunda condição com nosso operador. Será para direcionar o nome da classe. Não é igual ao nome da classe do elemento span. Quero dizer, este, símbolos materiais arredondados. Deixe-me explicar o que essa condição significa. Essa condição verifica se o destino do elemento clicado não é um elemento de extensão ou não tem o nome da classe Material symbols arredondado, em outras palavras Ele verifica se o elemento clicado é algo diferente de um elemento de extensão específico Com essa classe, quero dizer nome da classe, símbolos materiais redondos. Se essa condição for verdadeira, teremos que remover a classe Show das opções de velocidade. Vou pegar esse código e transformar o método togal em remove Agora, se acessarmos o navegador exibirmos as opções de velocidade e clicarmos em qualquer lugar da página, algo está errado aqui. Vamos verificar a guia do console. O erro diz que não está definido, pois imaginei que esquecemos inserir aqui até mesmo o objeto como parâmetro Agora, o código deve funcionar. Vamos exibir as opções de velocidade e clicar em qualquer lugar da página. Agora tudo funciona bem. Tudo bem, a próxima coisa que vou fazer é gerenciar a seleção dessas opções. Precisamos selecionar os desenvolvimentos que são colocados dentro do pacote de opções de velocidade I, precisamos selecionar essas opções aqui Para isso, vou criar uma nova variável. Vamos duplicar esse código. Eu vou mudar o nome. Serão opções de velocidade, itens que precisamos adicionar aqui de você. Em seguida, vou examinar as opções de velocidade, os desenvolvimentos. Vamos usar aqui itens de opções de velocidade variável recém-criados. Então, precisamos de cada método que nos permita iterar pela coleção Vou adicionar aqui a função de retorno de chamada que precisa de um parâmetro Vai ser uma opção, é um item atual do loop. Vou adicionar um ouvinte uniforme à opção com evento de clique Então, precisamos aqui novamente de uma função de retorno de chamada. Esse código percorre cada um dos desenvolvimentos selecionados usando o método forage. Para cada desenvolvimento, que representa uma opção de velocidade de reprodução, ele configura um ouvinte de eventos de clique Em seguida, temos que definir a taxa de velocidade da reprodução. De acordo com as opções de velocidade clicadas. Precisamos da sua taxa principal de reprodução de vídeo. É uma propriedade embutida, em script Java. Deve ser igual ao Option Dataset Do Speed. Definimos a taxa de reprodução que é igual à velocidade do conjunto de dados da opção Estamos extraindo os valores desses atributos aqui. Como você se lembra, adicionamos o atributo de velocidade de dados a cada opção de velocidade com os valores adequados Estamos acessando esses valores aqui. Novamente, essa linha indica a propriedade da taxa de reprodução do elemento de vídeo principal em relação ao valor armazenado no atributo de velocidade de dados do elemento clicado A propriedade do conjunto de dados permite que você acesse atributos de dados personalizados em elementos HTML Nesse caso, ele é usado para armazenar os valores de velocidade de reprodução associados a cada opção Estou falando sobre esses valores aqui. Ok, a próxima coisa que vou fazer é mudar a opção ativa. Como você sabe por padrão, a opção ativa é normal. Adicionamos classe ao elemento HTML. Esse elemento aqui. Você pode ver aqui a opção ativa da classe. Precisamos mudar essa classe. Temos que remover essa classe desse elemento e adicioná-la ao elemento clicado Para fazer isso, precisamos de opções de velocidade. Em seguida, temos que selecionar elementos com a opção de classe ativa. Precisamos aqui da opção ativa. E temos que remover da propriedade da classe, a opção ativa do nome da classe, e adicioná-la à opção de clique. Precisamos de uma lista de turmas. a aula será uma opção ativa. Tudo bem, acho que é isso, agora o código deve funcionar. Vamos selecionar Opção. Vamos reproduzir o vídeo. Em seguida, selecione a opção Velocidade. Algo está errado aqui. Vamos verificar as opções de velocidade da guia do console, os itens. Essa forragem não é uma função. Vamos verificar essa linha de código Opções de velocidade, itens, forragem. Na verdade, aqui, tudo parece correto. Vamos verificar as variáveis. Sim, precisamos aqui do seletor de consultas, método All, porque estamos selecionando cinco elementos diferentes Agora vamos verificar os resultados. Vamos reproduzir o vídeo com a opção Selecionar velocidade. Ainda assim, não funciona. Agora vou verificar novamente o código. Acho que aqui tudo parece estar correto. O ruim é que não estamos chegando aqui. Qualquer erro. Vou verificar se o evento de clique funciona corretamente. Vou correr para o console, esse elemento aqui. Vou clicar na opção de velocidade e depois marcar Console. Não estamos recebendo aqui os resultados. Isso significa que o evento de clique não funciona aqui. Talvez as opções de velocidade estejam ficando atrás de alguns elementos, é por isso que o evento de clique não funciona. Vou tentar aqui adicionar uma propriedade de índice com um valor maior. Digamos que dez. Vamos verificar se funciona. Esse era o problema. Agora tudo funciona bem. Podemos alterar as opções de velocidade sem nenhum problema. Tudo bem, então isso é sobre as opções de velocidade. Desculpe pelos últimos mal-entendidos, mas na verdade acho que não é ruim É bom para você, para os alunos, porque ao escrever o código, você se depara com essas situações. Muitas vezes você deve saber como resolver o problema, encontrar a caixa e assim por diante. Ok, é isso mesmo. Vamos passar para a próxima palestra. 40. Imagem nos modos imagem e tela cheia: Na última palestra, programamos as opções de velocidade. Agora temos que seguir em frente e cuidar desses dois botões. O primeiro é o modo imagem em imagem. Quanto ao segundo, é um modo de tela cheia. Vamos dar uma olhada no projeto finalizado. Depois de clicarmos na imagem no modo imagem , chegaremos aqui nesta pequena janela, você pode rastrear e soltar a janela. É assim que funciona o modo imagem em imagem. Quanto ao modo de tela cheia, se clicarmos no ciclo aqui , o vídeo será reproduzido. No modo de tela cheia, você pode minimizar a janela a partir daqui, ok? Então, vamos programar esses dois botões nesta palestra. Vamos ao código VS. Primeiro de tudo, vou criar uma nova variável. Vamos chamar isso de foto, eu escolho PTN. Precisamos selecioná-lo usando o método seletor de consultas. Vamos especificar aqui o nome da classe. Escolha em palheta, seguida pelo painel que precisamos aqui. Pensamentos. Em seguida, vou criar aqui novos comentários. Na verdade, vamos nos livrar dessa linha de código a partir daqui. Precisamos de comentários para o modo imagem na imagem Vou adicionar um ouvinte de eventos à imagem na imagem BTN a variável que acabamos Vamos adicionar aqui um ouvinte de imagem com evento de clique. Além disso, precisamos aqui de uma função de retorno de chamada para reproduzir o vídeo na imagem No modo imagem, temos que usar uma das funções integradas do Javas É chamado de solicitação de imagem na imagem. Temos que anexar esse método ao vídeo principal. Como eu disse, precisamos solicitar foto a foto. Tudo bem, vamos ao navegador e clique neste ícone aqui. Como você pode ver, temos aqui uma pequena janela que você pode arrastar. E a imagem da janela no modo imagem funciona perfeitamente. OK. Agora é o modo de tela cheia. Por sua vez, vamos para o código VS e criar uma nova variável. Vou duplicar essa linha de código. Precisamos de BTN em tela cheia e vou mudar aqui o nome da classe Precisamos do elemento I em tela cheia. Em seguida, vou instituir novos comentários para o modo de tela cheia. Na verdade, vou pegar esse código. Vamos colar aqui e alterar o botão que precisamos aqui, BTN em tela cheia Quanto ao método em vez do método de solicitação, precisamos solicitar o método de tela cheia. Agora vamos ao navegador e clique no botão Tela cheia. Isso não funciona. aqui um erro ao não ler as propriedades de. Agora vamos verificar o código. Tela cheia, BTN, vamos verificar a variável que temos aqui um tipo Tudo o que precisamos aqui, dois ls. Agora deve funcionar. Vamos clicar no ícone de tela cheia. E sim, temos aqui o modo de tela cheia. Funciona bem. Tudo bem, isso é sobre os modos de imagem e tela cheia Ambos funcionam bem Em seguida, temos que cuidar da linha do tempo do vídeo. Vamos passar para a próxima palestra. 41. Trabalhando na linha do tempo de vídeo: Na palestra anterior, programamos imagem ilustrada e os botões de tela cheia Ambos os modos funcionam bem. Agora temos que seguir em frente e cuidar da linha do tempo do vídeo Quero dizer, temos que tornar a parte do progresso dinâmica. E também temos que exibir a hora atual do vídeo e também a duração do vídeo. Vamos dar uma olhada no projeto finalizado. Como você pode ver, temos aqui a duração do vídeo. Se começarmos a reproduzir o vídeo, a hora atual será exibida como se eu clicasse aqui em qualquer lugar. Em seguida, atualizaremos a barra de progresso . Ok, é isso mesmo. O que vamos fazer nesta palestra. Vamos ao código VS. Vou selecionar um elemento chamado linha do tempo do vídeo. Vamos criar uma variável e chamá-la de linha do tempo do vídeo. Vou selecionar esse elemento usando o método seletor de consultas Precisamos especificar aqui o nome da classe. Será a linha do tempo do vídeo. Em seguida, vou inserir os comentários para a linha do tempo do vídeo. Em seguida, adicionarei um ouvinte de eventos à linha do tempo do vídeo com um evento de clique Quero lembrá-lo de onde esse elemento que temos no arquivo HTML aqui é a linha do tempo do vídeo Ele envolve a área de progresso. Vou adicionar o ouvinte do evento à linha do tempo do vídeo. Vamos usar esse método de ouvinte de eventos e, em seguida, especificar aqui o evento de clique Em seguida, precisamos da função de retorno que será executada assim que você clicar na linha do tempo Vou definir nova variável com a qual será a linha do tempo Vou fazer com que seja igual à largura do cliente da linha de tempo do vídeo. Essa linha calcula a largura do elemento da linha de tempo do vídeo e o armazena em uma variável Essa largura representa a largura total da linha do tempo, necessária para determinar onde o usuário clicou em relação à linha do Para deixar claro, vou executar no console essa largura variável da linha do tempo. Vamos inspecionar a página. Na verdade, vou anexar essa janela ao topo atual. Se eu clicar na linha do tempo do vídeo , obteremos 900, são pixels. A largura total da linha de tempo do vídeo é de 900 pixels. Novamente, a propriedade de largura do cliente calcula a largura do elemento Tudo bem, vamos nos livrar dessa linha de código. Em seguida, vou definir a hora atual do vídeo. Precisamos da hora atual do vídeo principal. Deve ser igual à seguinte expressão que vou usar aqui, offset x. Vou explicar essas coisas em um momento Precisamos da linha do tempo dela com a variável que definimos aqui. Em seguida, temos que multiplicá-lo pela duração do vídeo principal. Deixe-me explicar o que acontece aqui. Essa linha calcula e define o tempo de reprodução atual do elemento de vídeo principal com base em onde o usuário clicou na linha do Veja como funciona. Do offset X representa a posição horizontal do evento de clique dentro do elemento da linha do tempo do vídeo Ele indica onde o usuário clicou ao longo da linha do tempo. Vou correr até o ponto do console. Offset X. Na verdade, precisamos passar o parâmetro dela. Se eu clicar na linha do tempo do vídeo , obteremos a posição em que o usuário clica na linha do tempo Estamos chegando aqui, as posições exatas em pixels. Tudo bem, a seguir temos aqui o deslocamento x dividido pela linha do tempo Com isso, calcula a posição relativa do clique na linha do tempo como uma fração da largura total da linha do tempo Essa fração varia de 0 a 1 Em seguida, temos a multiplicação pela duração do vídeo principal Ela representa a duração total do vídeo em segundos. O resultado do cálculo determina a posição exata de reprodução no vídeo Ele define a propriedade de hora atual do vídeo principal para essa posição, permitindo efetivamente que o usuário busque o ponto de clique no vídeo. Se eu correr para o vídeo principal do console, verificar a hora atual , se acessarmos o navegador e clicarmos na linha do tempo, obteremos a hora atual do vídeo em segundos. OK. Em seguida, vou criar uma nova variável. Vou chamar isso de hora do vídeo. Vamos selecionar o elemento usando o método seletor de consultas. Vou especificar aqui o nome da classe, a hora atual. Vou lembrá-lo de onde está esse elemento. Temos aqui a hora atual. É um elemento de amplitude. Por padrão, temos zeros aqui. Agora temos que exibir a hora atual do vídeo nesse elemento. Temos que exibir a hora atual aqui. Para isso, precisamos inserir a hora atual do vídeo, texto interno é igual à hora atual Vamos ao navegador e começaremos a reproduzir o vídeo. Como você pode ver, estamos chegando aqui em segundos. Mas temos que formatar esse valor. Nós não precisamos disso. Precisamos exibir a hora atual no formato que temos aqui na versão final. Precisamos desse formato aqui. Para fazer isso, vou voltar ao código VS. Vou criar uma nova função. Na verdade, vou inserir essa função aqui. Vamos chamar a função format time. Vai ser uma função de seta. Vou inserir aqui um parâmetro. Vai chegar a hora. A primeira coisa que vou fazer é definir segundos. Precisamos de uma nova variável chamada segundos. Vai ser igual ao piso t e temos que inserir aqui o módulo de tempo 60 Essa linha calcula os segundos restantes tomando o módulo do valor do tempo Com 60, ele garante que os segundos contenham um valor 0 a 59. Da mesma forma que precisamos definir os segundos Vamos duplicar essa linha de código que precisamos Minutos, temos que dividir o tempo por 60, então precisamos do módulo 60 Essa linha calcula o número de minutos dividindo o valor do tempo por 60 e tomando o valor mínimo A operação do módulo é usada novamente para garantir que minutos sejam de 0 a 59. Em seguida, temos que definir as horas Vou duplicar essa linha de código. Precisamos de horas, depois matemática para o tempo dividido por 3.600 Não precisamos mais aqui Módulo 60, esta linha calcula o número de horas dividindo o valor do tempo por o valor do tempo 600 significa que 60 segundos são multiplicados por 60 minutos. Ele fornece o número total de horas e o valor do tempo. Em seguida, precisamos garantir que segundos, minutos e horas de um dígito sejam formatados com um zero à esquerda para consistência na exibição Por exemplo, se os segundos forem menores que dez, devemos adicionar um zero à esquerda. Para fazer isso, vou fazer com que segundos sejam iguais a 2 segundos, então a condição é menor que dez. Precisamos do ponto de interrogação dela. Se essa condição for verdadeira, então precisamos aqui das sequências de caracteres do modelo zero seguidas pelos segundos. Se for falso, precisamos de apenas alguns segundos. Também precisamos da mesma coisa para os minutos e as horas. Vamos duplicar essa linha de código duas vezes aqui, minutos e depois horas. Tudo bem, a próxima coisa que vou fazer é usar a instrução if, onde temos que verificar se as horas são iguais a zero. Precisamos de declaração e temos que verificar o horário. Precisamos de horas iguais a zero. Se essa condição for verdadeira, teremos que retornar o seguinte resultado que precisamos aqui, minutos e segundos. Então temos que voltar. Vamos pegar esse código a partir daqui. Cole aqui. E eu vou adicionar aqui horas com coluna, ok? A declaração condicional a seguir verifica se o valor das horas é igual a zero Se for, significa que o tempo é inferior a 1 hora. E a função retorna uma string no formato minutos e segundos. Se as horas forem maiores que zero, significa que há horas no valor do tempo. E a função retorna uma string no formato horas, minutos e segundos. Agora, quando a função estiver pronta, podemos formatar a hora atual. Vou chamar a função aqui como argumento que vou inserir aqui, hora atual. Portanto, agora a hora atual deve estar visível. Vamos reproduzir o vídeo. Opa, temos aqui um erro. O nosso não está definido. Vamos verificar a declaração. Sim, temos aqui um erro de digitação. Precisamos de horas sem. Eu cometi esse erro várias vezes. Agora, vamos verificar. Sim, temos aqui a atualização da hora atual. Ok, vamos falar sobre a hora atual. Em seguida, temos que cuidar da duração do vídeo. Vamos voltar ao código VS. Vou criar uma nova variável. Vamos chamar isso de duração do vídeo. Vou selecionar esse elemento usando, novamente, o método seletor de consultas Vamos especificar aqui o nome da classe, a duração do vídeo. Temos esse elemento próximo à hora atual, e o separador aqui é a duração do vídeo Vou adicionar um ouvinte do evento à duração do vídeo. Desculpe, para o vídeo principal. O evento terá dados carregados. O evento de dados carregados é acionado quando o vídeo carrega dados suficientes para iniciar a reprodução Em seguida, precisamos interferir em uma função de retorno de chamada. Essa função será executada quando dados suficientes forem carregados para iniciar a reprodução Aqui temos que definir o conteúdo da duração do vídeo que precisamos. Aqui em nossa propriedade de texto , será a duração principal do vídeo. Ok, vamos verificar os resultados. Como você pode ver, temos aqui o total de segundos. Temos que transformá-lo no mesmo formato que usamos atualmente. Para fazer isso, basta chamar a função format time. E temos que considerar a duração do vídeo principal como argumento. Se verificarmos os resultados , você verá que temos aqui a hora atual mostrada no mesmo formato que usamos para a hora atual. Ok, por enquanto é isso. Vamos passar para a próxima palestra. 42. Criando uma barra de progresso arrastável: Na palestra anterior, trabalhamos na linha do tempo do vídeo Quero dizer, a hora atual do vídeo e também a duração do vídeo. Ambos funcionam bem e são atualizados assim que reproduzimos o vídeo. Em seguida, temos que cuidar da barra de progresso. Temos que criar a barra de progresso arrastável. Além disso, temos que cuidar desse tempo. Aqui, temos que atualizar a hora atual. Depois de arrastarmos a barra de progresso, vamos ver os projetos finalizados. Como você pode ver, posso arrastar a barra de progresso e também a hora atual está sendo atualizada de acordo. Precisamos criar isso. Na verdade, neste vídeo, vamos ao código VS. A primeira coisa que vou fazer é adicionar um ouvinte do evento à linha do tempo do vídeo O evento será um marco. O evento de marco é acionado no momento em que o botão do mouse é pressionado sobre um elemento É mais específico para a ação de pressionar o botão do mouse sem exigir que o botão seja solto. Esse evento geralmente é usado para detectar o início de uma interação do usuário, como começar a arrastar uma extremidade Além disso, esse evento ocorre antes do evento de clique se o mouse não for movido para longe do final. A diferença entre o evento de clique e o evento de mouse para baixo é a seguinte O evento de clique é acionado após uma ação de clique completa, que envolve pressionar e soltar o botão do mouse sobre um elemento Isso requer que o evento de mouse para baixo e mouse para cima ocorra no mesmo elemento. Além disso, o evento de clique geralmente é usado para ações que devem ocorrer depois usuário seleciona ou ativa um elemento, como pressionar o botão para enviar o formulário e assim por diante. Agora vou passar aqui uma função de retorno de chamada. Em seguida, precisamos novamente da linha do tempo do vídeo com o ouvinte do evento. Nesse caso, o evento será o movimento do mouse. Agora estamos adicionando um ouvinte de imagem para o evento de movimentação do mouse Agora temos que chamar a função chamada barra de progresso de Dale. No momento, essa função ainda não foi criada, mas vamos criá-la em um momento. Estamos adicionando um ouvinte de eventos para o evento de movimentação do mouse. Quando o usuário move o mouse, a função da barra de progresso arrastável é chamada Ele atualizará a barra de progresso e o tempo do vídeo conforme o usuário arrasta. Eu vou criar essa função. Vamos criar uma nova variável e depois usar esse nome aqui. Precisamos aqui de um objeto de evento e, em seguida, de uma função de seta. A primeira coisa que vou fazer é pegar essas duas linhas daqui. Como você lembra, essa linha de código armazena a largura do elemento da linha de tempo do vídeo. Quanto à segunda linha de código, ela calcula e atualiza a hora atual do vídeo com base em onde o usuário clica na linha do tempo Além dessas duas linhas de código, vou passar aqui, a largura do estilo da barra de progresso igual ao deslocamento x. E precisamos aqui de pixels Agora encontramos a largura da barra de progresso. deslocamento x fornece o deslocamento horizontal do ponteiro do mouse entre o evento e a borda de colocação do nó de destino Configurando efetivamente a barra de progresso até o ponto em que o usuário clica ou arrasta Agora, se acessarmos o navegador e a barra de progresso, ele funcionará. Como você pode ver, podemos arrastar a barra de progresso agora mesmo. Estou pressionando o botão do mouse, mas se eu passar o mouse sobre a linha do tempo do vídeo , poderei arrastar a barra de progresso Nós não precisamos disso. Não precisamos arrastar a barra de progresso ao passar o mouse, precisamos arrastar a barra de progresso assim que clicarmos na linha do tempo do vídeo Para corrigir esse problema, vou duplicar esse código Precisamos transformar a linha do tempo do vídeo em um contêiner de vídeo. Esse elemento envolve todo o conteúdo do vídeo. Agora vou remover o ouvinte do evento da linha do tempo do vídeo Ok, agora o problema deve ser resolvido. Na verdade, precisamos do mouse para cima e para baixo. Ok, agora vamos ao navegador e verificamos os resultados. Agora, estou pressionando o botão do mouse, mas quando eu soltar o botão e passar o mouse sobre a linha do tempo do vídeo , não conseguiremos rastrear a barra de progresso Ok, então o problema está resolvido. Em seguida, precisamos atualizar a hora atual do vídeo. Para isso, vou usar essa linha de código. Vamos inseri-lo aqui. Precisamos adicionar aqui o vídeo principal. Agora, se eu acompanhar a barra de progresso, você verá que a hora atual está sendo atualizada adequadamente. Funciona bem. Tudo bem, em seguida, temos que cuidar da hora atual. Depois de rastrear a barra de progresso, quero dizer, temos que trabalhar nesse elemento aqui. Como você lembra, é um elemento de extensão. Dentro da área de progresso, temos que cuidar desse elemento. Vou adicionar um ouvinte do evento à linha do tempo do vídeo. O evento será um movimento do mouse. Então, precisamos de objetos de evento seguidos pela função de retorno Vou selecionar esse elemento. Precisamos criar a variável, será o tempo de progresso. Precisamos aqui selecionar o documento. Vamos especificar aqui o elemento chamado área de progresso. Então, precisamos do elemento span. Depois disso, vou definir o deslocamento x do elemento. Vamos criar o deslocamento x. E ele deve ser igual ao deslocamento X. Temos aqui o deslocamento horizontal do ponteiro do mouse entre o evento e a borda do pudim do elemento alvo, que é a linha do tempo do vídeo E ele deve ser igual ao deslocamento X. Temos aqui o deslocamento horizontal do ponteiro do mouse entre o evento e a borda do pudim do elemento alvo, que é a linha do tempo do vídeo. Em seguida, temos que definir a posição esquerda do tempo de progresso. Precisamos aqui do estilo de progresso temporal restante. Vai ser deslocado em X, e precisamos de pixels Agora, definimos a propriedade CSS esquerda do elemento progress in para o valor do offset X. Movendo a pré-visualização do tempo para alinhar com o cursor do mouse na linha do tempo Se eu acessar o navegador e passar o mouse sobre a linha do tempo do vídeo, você verá que o elemento span se move ao longo da linha do tempo do vídeo Em seguida, temos que definir a largura da linha do tempo. Vou copiar essa linha de código. Agora temos que definir a hora atual do elemento span. Vamos criar uma variável. Vai ser a hora da barra de progresso. Eu vou resumir esse valor aqui. Agora calculamos o tempo correspondente à posição atual do mouse na linha do tempo Ele faz isso dividindo o mouse da posição x definida pela largura total da linha do tempo, fornecendo uma fração que representa onde o mouse está na linha do Essa fração é então multiplicada pela duração total do vídeo principal para obter o tempo correspondente no vídeo Agora temos que formatar a hora e exibi-la. Vou anexar à propriedade de texto interno do tempo de progresso. Então, precisamos formatar a hora. Vou passar por aqui o progresso em tempo parcial. Tudo bem, vamos ao navegador. Como você pode ver, quando eu passo o mouse sobre a linha do tempo do vídeo, a hora está Mas temos aqui um pequeno problema. Por padrão, precisamos ocultar a hora aqui e também o círculo. Então, quando passarmos o mouse sobre a linha do tempo do vídeo, eles devem aparecer Precisamos de CSS. Vou selecionar os dois elementos. Área de progresso, extensão. Além disso, precisamos de uma barra de progresso antes do elemento. Vou escondê-los usando a exibição. Em seguida, ao passar o mouse, passe o mouse sobre a linha do tempo do vídeo. Em seguida, a área de progresso se estende. Então precisamos aqui da barra de progresso. Antes, precisamos exibir de volta os elementos usando o bloco de exibição. Como você pode ver agora, o círculo e o elemento span estão ocultos. Depois de passar o mouse sobre a linha do tempo do vídeo, eles serão exibidos novamente Tudo bem, então tudo funciona bem. Criamos a barra Gable Progress. Vamos passar para a próxima palestra. 43. Escondendo e mostrando os controles: Tudo bem, na palestra anterior, criamos uma barra de progresso rastreável E agora temos que gerenciar a ocultação e a exibição dos controles de vídeo. Além disso, temos que programar o botão de fechamento X e o botão play na página de destino. Vamos dar uma olhada nos projetos finalizados. Se eu reproduzir o vídeo e parar o mouse, os controles do vídeo se esconderão após 3 segundos. Se eu mover o mouse, eles aparecerão de volta. Como eu disse, vamos gerenciar isso neste vídeo. E também temos que programar o botão de fechamento X, que fecha o vídeo, e também programará o botão de reprodução Se eu clicar nele, o vídeo aparecerá. Ok, vamos ao código VS. A primeira coisa que vou fazer é encontrar o invólucro de controle e ocultá-lo usando capacidade zero de visibilidade oculta Como você pode ver, os controles de vídeo estão ocultos. Em seguida, temos que ir ao arquivo JS do script e criar, na verdade, vou e aqui, novos comentários para os controles. Precisamos criar uma função. Vou chamá-lo de controles, isso vai ser uma função de seta. Em seguida, vou usar um dos métodos Javascri integrados chamado função de tempo Motet é um método Java scot incorporado que define um cronômetro e executa uma função ou um trecho de código especificado Quando o cronômetro expirar, vou passar aqui uma função de retorno de chamada Esse é o primeiro argumento. Então temos que colocar aqui o segundo argumento, que é a quantidade de tempo, e ele é expresso em milissegundos. Vou colocar aqui 3.000 novamente. O primeiro argumento de set time out é outra função de erro. Essa função interna define o que acontecerá quando o cronômetro acabar. Já o segundo argumento é o atraso de tempo em milissegundos. Aqui, está definido para 3.000 milissegundos, o que equivale a 3 Ok, agora, como bloco de código que vou usar a classe de contêiner de vídeo remove, vou especificar aqui o nome da classe. Vamos chamá-lo de mostrar controles. A classe show controls adicionará estilos em CSS que tornarão os controles do player de vídeo visíveis. Ao remover essa classe, os controles ficam ocultos da exibição. Em seguida, vou chamar essa função. Agora temos que ir ao arquivo CSS e usar os controles show da classe. Em primeiro lugar, vou encontrar o invólucro de controles. Em seguida, selecionarei o contêiner de vídeo, seguido pelos controles de exibição da classe. Em seguida, temos que selecionar o invólucro de controles. Temos que tornar visíveis os controles. Em primeiro lugar, vou definir que a posição será zero, quero dizer, a posição inferior. Então, precisamos da capacidade 1 e da visibilidade visível. Além disso, vou usar a transição para obter um efeito mais suave. Precisamos de tudo isso, então a duração será de 0,08 segundo E precisamos que aqui esteja. Em seguida, adicionarei a classe show controls ao contêiner de vídeo no arquivo HTM Vamos inserir aqui os controles de exibição e, em seguida, acessar o navegador. Se eu esperar 3 segundos , os controles desaparecerão. Agora temos que exibi-los assim que o mouse for movido. Para isso, vou adicionar aqui o contêiner de vídeo com o ouvinte de eventos O evento será transferido. Precisamos colocar aqui a chamada da função. Agora, precisamos adicionar à classe show controls do contêiner de vídeo. Agora, se eu parar de mover o mouse por 3 segundos , os controles de vídeo se esconderão e, assim que eu mover o mouse, eles aparecerão. Ok, precisamos exibir os controles enquanto o vídeo é exibido. Para isso, vou voltar ao arquivo filho e criar uma declaração aqui logo acima da função set time out. Precisamos de uma declaração, na qual temos que verificar se o vídeo principal foi exibido ou não. Então precisamos da declaração de devolução. Deixe-me explicar. O que eu estou fazendo aqui? Esta declaração verifica uma condição. E com base nos resultados da condição, ou continua executando o resto da função ou excede os retornos da função mais cedo A postagem é uma propriedade que retorna um valor de bullying. Verdadeiro ou falso. A declaração if, se a condição for verdadeira, se o vídeo for publicado, a condição dentro da declaração if será satisfeita. Se a condição for satisfeita, a instrução de retorno será executada. A declaração de retorno excede imediatamente a função de controle de altura. Significa que nenhum código após a instrução de retorno na função de controle é executado. Em termos simples, se o vídeo for exibido, a função não faz nada e para de ser executada ali mesmo. Se a condição for falsa, o que significa que o vídeo está sendo reproduzido, a condição da instrução if não é satisfeita e a instrução return não é executada. A função então executa o bloco de tempo limite definido, que espera por 3 segundos e, em seguida executa o código em sua função de retorno de chamada, removendo a classe show controls do contêiner Isso faz com que os controles de vídeo fiquem ocultos após o atraso. Espero que você entenda o que essa linha de código faz. Vamos ao navegador. Se eu reproduzir o vídeo e depois pausá-lo, os controles não desaparecerão O código funciona bem. A próxima coisa que vou fazer é parar de executar a função de tempo limite definido Depois de movermos o mouse para isso, vou criar uma nova variável. Vai ser um cronômetro. Vou cancelar a variável sem atribuir nenhum valor a ela Em seguida, vou atribuir a função de tempo limite definido a essa variável, o cronômetro Depois disso, vou usar um dos métodos Java Sc incorporados chamado clear time out. Vou passar aqui o temporizador variável. Ele deixará de executar a função de tempo limite definida. E também precisamos aqui chamar a função de controle de altura. Tudo bem, vamos ao navegador e verificar se está tudo funcionando bem. Vou reproduzir o vídeo e esperar 3 segundos. Os controles estão ocultos. Se eu mover o mouse , eles serão exibidos novamente. Se eu postar o vídeo , os controles ficarão visíveis. Acho que tudo funciona perfeitamente. E agora temos que cuidar do botão de fechamento X e também do botão play na seção de modelos. Vamos voltar ao arquivo chavs e criar novas variáveis. Vou duplicar esse código, precisamos do botão Play. Vou selecionar esse elemento com o nome da classe. Jogue. Padrão Btn x PTN X. Vamos inserir aqui. X PTN seguido pela terra. Ok, agora precisamos adicionar eventos de clique aos dois padrões. Vamos inserir aqui o botão Reproduzir, Adicionar ouvinte de eventos. E vou especificar aqui o evento de clique. Então, precisamos aqui de uma função de retorno de chamada. Vou adicionar ao contêiner de vídeo uma nova classe, que usaremos. Então, no arquivo CSS, precisamos da lista de classes de contêineres de vídeo. Vou inserir o nome da classe. Vamos chamá-lo de show video. Em seguida, vou duplicar esse botão de alteração de código. Vai ser o bastão X. Em seguida, vou mudar o método para remover. Além disso, vou postar o vídeo assim que fecharmos o contêiner de vídeo de que precisamos aqui mainvideook Tudo está pronto no jovscript. Vamos para o arquivo CSS. E antes de tudo, vou esconder o contêiner de vídeo que precisamos aqui, capacidade zero e visibilidade dez. Em seguida, vou selecionar o contêiner de vídeo com o vídeo de exibição da aula. Vou exibir o vídeo. Precisamos de opacidade 1 e visibilidade visível. Além disso, vou usar a transição para obter efeitos mais suaves Precisamos de transição e, em seguida, opacidade de 0,3 segundos, ok Como você pode ver, por padrão, o vídeo está oculto. Se eu clicar no botão play, o player de vídeo será exibido. Se eu clicar no botão de fechamento X, ele se esconderá. Tudo bem, acho que tudo o que transamos está bem e, na verdade, com o reprodutor de vídeo, terminamos. Espero que tenha sido interessante. Usamos muito Javascript e acho que você aprendeu algumas coisas novas. Ok, agora é hora de seguir em frente para criar a próxima seção do nosso projeto. Para isso, vamos passar para a próxima palestra. 44. Criando a marcação HTML para a seção Subscribe: Tudo bem, na aula anterior, terminamos de trabalhar na seção de modelos Quer dizer, terminamos de trabalhar na segunda parte da seção de modelos, que era um reprodutor de vídeo. Criamos o reprodutor de vídeo e o fizemos funcionar com sucesso. E agora temos que seguir em frente e começar a criar a próxima seção do nosso projeto. Vamos dar uma olhada na versão final. A próxima seção é uma seção de assinatura. É uma seção agradável e legal, mas pequena. Temos aqui uma caixa escura no centro da página. Ele inclui alguns elementos diferentes. Temos aqui o ícone do Google Material, seguido pelo parágrafo do título, e também temos aqui um elemento de entrada com um botão. A caixa tem um efeito de sombra agradável e fresco. Ok, isso é tudo sobre a seção de assinaturas. Vamos ao código VS. E primeiro de tudo, vou criar a marcação HTML logo após a seção de modelos, vou inserir novos comentários Será uma assinatura, então precisamos terminar a assinatura. Em seguida, vou abrir a tag da seção com a inscrição. O primeiro elemento que vou inserir dentro do elemento de seção será o invólucro Vamos abrir com o invólucro de assinatura seguida, criarei o ícone que precisamos desenvolver com a classe subscribe Será o símbolo do Google Material. Vou visitar o site Google Material Symbols. Vamos clicar nesse link aqui. Vou pesquisar um ícone chamado Mark. Leia. Aqui temos o ícone. Vou cortar esse painel a partir daqui e colá-lo no desenvolvimento, vou transformar o contorno em arredondado Vamos verificar o navegador. Como você pode ver, temos aqui o ícone do Google Material. Em seguida, vou criar os elementos do título H one com o texto subscribe. Agora, a seguir, temos o parágrafo. O texto será digite seu e-mail para receber atualizações. Após o parágrafo, abro a tag com o grupo de entrada de inscrição da classe. Dentro do desenvolvimento, teremos uma tag de entrada com o tipo e-mail. Além disso, vou adicionar aqui atributo de espaço reservado e será seu e-mail Em seguida, precisamos do fundo. O tipo ficará na parte inferior do texto. Vou me inscrever. OK. O último elemento que vou criar será a sombra. Quero dizer, precisamos inserir nome da turma e assinar Shadow Isso vai ser um elemento vazio. É isso sobre a marcação HD. Vamos dar uma olhada no navegador. Temos aqui todos os elementos. Agora é hora de seguir em frente e começar a estilizar esses elementos. Vamos seguir em frente. 45. Seção de assinatura de estilo: Na última palestra, criamos uma marcação HTML para a seção de inscrição Agora, como eu disse, temos que estilizar esses elementos. Vamos dar uma olhada, mais uma vez, no projeto finalizado. Aqui temos a seção de inscrição. Temos que estilizar esses elementos e também criar esse efeito de sombra agradável e legal. Ok, vamos ao código VS no arquivo CSS. Vou inserir novos comentários logo após a seção de modelos que precisamos aqui, inscreva-se. Em seguida, selecionarei os elementos da seção com o nome da classe Subscribe. A primeira coisa que vou fazer é definir com altura. Vou definir com 100%. Quanto à altura, será 100 de altura da janela de visualização Quero dizer, 100% da janela de visualização. Além disso, vamos mudar a cor de fundo. Vou usar gradiente linear. A cor do plano de fundo será semelhante ao plano de fundo das seções do modelo Vou definir a direção em que faltará duas. Então precisamos passar aqui três cores. O primeiro será 8430. Vou usar essa cor novamente, 8430. Quanto à terceira cor , será 409, ok? A cor do plano de fundo é alterada e também a largura e altura são aplicadas ao elemento da seção. Vamos voltar ao código do VS e cuidar do alinhamento dos elementos Vou usar a caixa Flex do CS. Precisamos do Display Flex. Em seguida, vou colocar o conteúdo no centro da seção. Para isso, precisamos justificar o conteúdo e, em seguida, um centro de itens de linha Como você pode ver, os elementos são colocados no centro da seção. Em seguida, vou arrumar a embalagem da assinatura, que é essa caixa escura Vamos selecionar o invólucro de assinatura. Vamos definir dentro das alturas. A largura será 80, isso é para a altura. Eu vou fazer com que sejam 50. E então mude a cor de fundo, será 231, D34 Aqui temos o invólucro. Em seguida, vou fazer os cantos arredondados. Para isso, temos que usar o raio. O valor será de uma RAM. Além disso, vou alinhar os elementos usando novamente a caixa flexível Precisamos de display flex. Em seguida, vou mudar a direção porque precisamos alinhar os itens flexíveis verticalmente Precisamos que a direção flexível seja uma coluna. Em seguida, vou criar um espaço uniforme entre os itens flexíveis Para isso, precisamos justificar o conteúdo não centralizado, mas o espaço uniformemente Finalmente, vou para uma linha de itens no centro horizontalmente Para isso, precisamos de uma linha de centros de itens, precisamos centralizar aqui, ok. Como você pode ver, os elementos são colocados verticalmente no centro Em seguida, vou cuidar do ícone. Vamos selecionar o ícone Inscrever-se, seguido pelo elemento span. Vou aumentar o tamanho do telefone. Serão dez gramas. Além disso, vou mudar a cor do ícone. A cor será 035. Temos aqui um ícone bonito e legal. Em seguida, vou cuidar do título. Vamos selecionar o wrapper Subscribe, seguido pelo elemento de cabeçalho H one Vou aumentar o tamanho do telefone , serão quatro RAM. Em seguida, vou alterar o peso da fonte. Vamos torná-lo mais leve. Defina o peso da fonte para 300. Em seguida, vou mudar a cor. Vou usar a cor AA. É de cor cinza. Em seguida, vou mover o elemento um pouco para cima usando a margem superior. Precisamos de um valor negativo e será menos cinco quadros Ok, o título parece muito bom. Em seguida, vou pegar aqui o parágrafo, na verdade, vamos duplicar esse código e, em seguida, alterar o seletor que precisamos O tamanho do telefone será de 1,8 Ram. Então, precisamos do mesmo valor de peso do telefone. A cor será 999. É uma cor cinza ligeiramente mais escura. Quanto ao topo da margem, vou sair daqui menos cinco Ram. É isso mesmo. Sobre o próximo parágrafo, temos que cuidar da entrada e da parte inferior. Em primeiro lugar, vou selecionar o wrapper, ou seja, grupo de entrada Subscribe. Vamos definir a largura. Serão 50 Ram. Então eu vou mudar a altura. Vamos configurá-lo para 5,5 quadros. Na verdade, para tornar esse elemento visível, vou adicionar aqui uma cor temporária de bacon. Vamos configurá-lo para vermelho. Aqui temos o invólucro, grupo de entrada Subscribe. Em seguida, vou cuidar dos elementos de entrada. Então, precisamos, novamente, inscrever o grupo de entrada, seguido pelos elementos de entrada. Em primeiro lugar, vou definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que é o grupo de entrada. Em seguida, vou definir a altura como 100%. Nesse caso, elemento de entrada ocupará a altura de seu elemento pai. Quero dizer 50 Ram e 5,5 Ram. Vamos dar uma olhada no navegador. Aqui temos os elementos. Vamos nos livrar dessa cor de fundo. Não precisamos mais disso. OK. Depois disso, vou mudar a cor de fundo. Vamos configurá-lo para 1b16 a nove. Além disso, vou me livrar da borda da falha e, em seguida, fazer os cantos da entrada arredondar usando o raio da borda com o valor de cinco Ram, o elemento de entrada parece muito melhor Em seguida, vou criar algum espaço dentro da entrada usando pudim Portanto, o preenchimento será uma RAM na parte superior, depois uma RAM no lado direito, uma RAM na parte inferior e duas RAM no lado esquerdo Agora temos algum espaço dentro da entrada. Em seguida, precisamos cuidar do telefone. Vamos definir o tamanho do telefone para 1,6 Ram. Então, a tarifa telefônica será de 300. Além disso, vou mudar a cor. Vamos usar um 05 FD. Ok, então tudo parece muito bom. Em seguida, vou cuidar do atributo placeholder Vamos continuar e selecionar o grupo Inscrever Entrada, seguido pelo elemento de entrada. E então precisamos de um pseudo elemento de espaço reservado. Vou mudar o tamanho do telefone. Vai ser 1.6 Além disso, vou mudar a cor. Vamos usar a mesma cor. Os vendedores podem ver que o espaço reservado foi alterado. Ok, vamos falar sobre os elementos de entrada. Em seguida, temos que cuidar da parte inferior, que agora está colocada atrás do elemento de entrada. Vamos selecionar, precisamos aqui assinar o grupo de entrada, seguido pelo elemento inferior. Vamos definir dentro da altura. A largura será de 16 Ram. Então, a altura será de 100% Ela ocupará a altura do elemento pai, 5,5 Ram. Na verdade, você pode escrever aqui 100% ou herdar. Funcionará da mesma forma, mas eu prefiro 100%, não sei por quê. Em seguida, vou definir a cor do plano de fundo. Vamos definir o plano de fundo para 644 EF. A próxima coisa que vou fazer é mudar a posição do botão para ver como ele fica. Vamos definir a posição como absoluta. Então, precisamos posicionar para ser zero. E também precisamos definir a posição correta como zero. Agora o botão está visível. Vamos remover a borda da falha e também fazer com que o botão seja arredondado. Não precisamos da borda, então o raio da borda será de cinco quadros, o botão ficará muito melhor Em seguida, vou tirar você do telefone. O lado do telefone terá 1,5 fram, precisamos de dois ponteiros, vai ser ousado Além disso, vou transformar o texto em maiúsculas, depois mudar a cor e torná-lo branco. Vamos verificar o resultado. Como você pode ver, o botão parece muito bom. A única coisa que precisamos fazer é criar algum espaço entre as letras. E também vou adicionar ao botão um pequeno efeito de sombra. Vou definir o espaçamento entre letras para 0,2 m. Quanto à sombra da caixa, será 01, depois cinco como cor Vou usar o RGBA com a opacidade de 0,2, essa é a Finalmente, vamos definir o ponto do cursor. Ok, é isso mesmo. O botão está pronto e na verdade, todos os elementos estão estilizados A única coisa que eu tenho que fazer é criar um efeito de sombra. Quero dizer esse efeito aqui. Como lembramos, criamos os elementos chamados Subscribe Shadow, o desenvolvimento que está vazio. Então, vou selecionar esse elemento. Em primeiro lugar, definida em alturas, a largura será de 80%. Isso é para a altura. Vou configurá-lo para 12 Ram. Então, precisamos da cor de fundo. Vou configurá-lo para 116 a nove. Aqui temos a sombra. Vamos mudar a posição. Vou definir a posição como absoluta. Precisamos posicionar esse elemento acordo com os elementos da seção. Precisamos de uma posição relativa para os elementos da seção em que vou definir a posição inferior como menos sete Ram Quanto à posição esquerda, será de 50%, precisamos centralizar o elemento horizontalmente Para isso, temos que usar a transformação com a função de tradução. Nesse caso, precisamos traduzir x e o valor será -50%. Como você pode ver, o elemento está centralizado Agora vou girar os elementos pelo eixo x verticalmente Para isso, precisamos usar a função rotacionar x. E o valor será de siento graus. Agora o elemento é girado em seguida, vou torná-lo arredondado Usando o raio da borda , será 30% do elemento arredondado E agora temos que torná-lo desfocado, como no projeto finalizado Para fazer isso, vou usar a propriedade de filtro com a função chamada polar e o valor será três Ram. Além disso, vou definir a opacidade 2.7 Agora temos aqui o efeito de sombra, mas temos que transformá-lo em três efeitos D como temos no projeto finalizado Para criar um ambiente de três D, vou atribuir à seção uma propriedade do elemento chamada perspectiva. Isso nos permite criar o ambiente de três D, o valor será de 50 Ram. Além disso, precisamos de uma propriedade chamada estilo de transformação para o elemento pai da sombra, que é o invólucro de assinatura Precisamos aqui transformar o estilo com o valor preservado, três D. Agora, o efeito de três D será aplicado. Vamos dar uma olhada. Como você pode ver, temos aqui um efeito de sombra agradável e legal. São três efeitos D que se localizam na seção de inscrição. Eu acho que parece muito bonito e moderno. Vamos passar para a próxima palestra. 46. Como criar marcação HTML para rodapé: Tudo bem, na última palestra, terminamos de estilizar a seção de inscrição Parece muito bonito e moderno. E agora temos que seguir em frente e criar a última seção da primeira página, a página inicial. Vai ser rodapé. Aqui temos o rodapé. É simples, mas acho que parece muito bom. Temos aqui links diferentes, também os ícones dos telefones. Abaixo, você pode ver os itens de navegação que funcionam. Se clicarmos em qualquer um dos itens de navegação , navegaremos até a página correta. Como você pode ver, todos os links funcionam bem. Ok, vamos em frente e, primeiro de tudo, como de costume, criar a marcação HTML Vou inserir seus novos comentários no rodapé. Então eu vou abrir H de cinco pés. Incluirá duas partes diferentes. Teremos que ver essa parte aqui e no rodapé no rodapé. Os itens de navegação que precisamos aqui. Puxe profundamente com a parte superior do rodapé da classe. Além disso, também vou criar a parte inferior do rodapé. No topo, incluirá ícones de mídia social. Vou abrir um encontro com a turma nas redes sociais. É que precisamos de mídia aqui. Será um nome de classe individual. Mas, além disso, vou adicionar aqui um nome de classe comum. E será o item de rodapé, eu estou no título três, o texto vai nos seguir Então, precisamos aqui de um desenvolvimento que envolverá os ícones. Vou chamá-lo de ícones, vou inserir os ícones do seu telefone. A primeira será a Fase A da Marca. No geral, teremos sete ícones diferentes, portanto, vou duplicar essa linha de código seis vezes depois alterar os nomes das classes O segundo será o FA Instagram. Então teremos aqui um link. Então, o próximo será um Twitter. No momento, o Twitter tem um nome diferente, mas de qualquer forma, vou inseri-lo aqui. Em seguida, teremos o Pinterest. Então, o próximo ícone será um tribble. Finalmente, teremos que, ok, para que todos os ícones do telefone também sejam criados. Vamos verificar se todos eles estão visíveis e exibidos. Aqui temos sete ícones diferentes e todos eles são exibidos. Ok, em seguida, vou cuidar do próximo item de filtro e serão alguns links. Primeiro, vou inserir seus três elementos de cabeçalho H, serão recursos. Então, precisamos de elementos de link. O primeiro terá mais de 1.000 layouts. Vou duplicar essa linha de código cinco vezes porque teremos seis links diferentes Quero dizer, o segundo elemento de link terá mais de 100 elementos. Então, o próximo não será um design de código. Então, o próximo será o comércio eletrônico. Na verdade, links são alguns links abdominais que você pode inserir aqui o que quiser Depende absolutamente de você. Em seguida, o próximo elemento será o fluxo de trabalho. Finalmente, sou um marketing inseguro. Ok, é isso mesmo. Sobre o segundo item de rodapé, na verdade, vou duplicar esse elemento Então eu vou mudar o título. Vamos mudar aqui a primeira letra, ela deve ser maiúscula. O segundo título será serviços. Neste item de rodapé, teremos cinco. Link. Então, vou excluir um deles e depois alterar o conteúdo dos elementos do link. O primeiro será o Marketplace. Então teremos o Theme Builder. O próximo será Cloud. Então teremos aqui Finalmente, vou falar sobre temas de introdução Ok, isso é sobre o segundo Fem, na verdade, é o terceiro item do rodapé e o segundo, o último item do rodapé, será Teremos aqui quatro links. Vou inserir aqui sobre nós. Em seguida, bloquearemos, as próximas serão as operadoras. O último elemento do link será o contato. Tudo bem, isso é sobre os itens do rodapé. Na verdade, é isso, sobre a parte superior do rodapé. Vou dar uma olhada na parte inferior do rodapé. Teremos aqui seis elementos de link diferentes e eles serão itens de navegação. Vou abrir elementos de link no atributo de referência H. Vou inserir o HTML do índice porque esse elemento de link nos levará até a página inicial. Então, vamos duplicar essa linha de código cinco vezes, porque no geral temos seis itens de navegação diferentes O segundo será para clientes. Então, teremos produtos agora, esses links, quero dizer, essas páginas não foram criadas. Nós os criaremos nas próximas palestras. Mas de qualquer forma, vou especificar aqui os nomes dos arquivos. O próximo será o contato. Então teremos uma conta. Por fim, acho que, em termos de preços, em termos de preços, se trata da margem extrema Todos os elementos são criados. Vamos verificar o navegador. Como você pode ver, temos aqui todos os links e também os asomicons do telefone Agora é hora de estilizar esses elementos. E para isso, vamos para a próxima palestra. 47. Rodapé de estilo: Na aula anterior, criamos a marcação HDML para o rodapé e agora é hora de estilizar esses Vamos dar uma olhada mais uma vez no projeto finalizado. Aqui temos o rodapé, que é simples, mas acho que parece muito bonito e moderno Vamos ao código VS e começar a escrever CSS. Na verdade, antes de fazermos isso, vou adicionar aqui um elemento porque esqueci de criá-lo na última aula Precisamos aqui do conteúdo do rodapé que envolverá o conteúdo do rodapé Vamos cortar esse encerramento, Deep Talk, e colá-lo abaixo. Ok, é isso mesmo. O H na marcação está pronto. Vou instituir seus novos comentários no rodapé. Em seguida, vou selecionar o elemento de rodapé. Em primeiro lugar, vou definir a largura e a altura. A largura será de 100%. Quanto à altura, vou fazer com que seja de 60 pontos de vista da altura do vaso. Quero dizer 60% da janela de visualização. Além disso, vamos criar algum espaço dentro do rodapé usando preenchimento O pudim terá dez carneiros na parte superior, depois zero no lado direito, três carneiros na extremidade inferior zero no lado esquerdo Está bem? Como você pode ver, a largura, altura e também o pudim são aplicados aos elementos Em seguida, vou cuidar do conteúdo do rodapé. Vamos selecionar esses elementos. Antes de tudo, defina largura e altura. A largura será de 100%. Quanto à altura, também vou torná-la 100%. Em seguida, vou alinhar os elementos usando a caixa CSS Flex, precisamos exibir Em seguida, vou colocar os elementos, quero dizer, os itens flexíveis, verticalmente em uma coluna Precisamos mudar a direção da flexão e ela será uma coluna Em seguida, vou criar espaço entre os itens flexíveis usando justificar um espaço concreto Além disso, vamos alinhar os itens no centro. Novamente, como você pode ver os elementos, quero dizer que os lados superior e inferior estão alinhados Em seguida, vou cuidar da parte superior. Vamos seguir em frente e selecionar o pé até o topo. Vou definir com 100%. Em seguida, vou alinhar os elementos horizontalmente em E para isso, vamos usar novamente livros flexíveis. Para criar espaço entre os itens flexíveis, vou usar o conteúdo de justificação com o espaço de valores Está bem? Os elementos, a primeira parte na parte superior do rodapé, estão bem alinhados OK. Em seguida, vou cuidar das mídias sociais. Vou selecionar o rodapé da mídia social. E eu vou definir a largura. Vai ser 30% Como pode ver, a largura do primeiro item de rodapé nos ícones de mídia social aumentou É 30% do rodapé. Em seguida, vou selecionar o item de rodapé. É um nome de classe comum para todos os quatro itens de rodapé Precisamos usar CSS, livros flexíveis Vou alinhar itens flexíveis verticalmente em uma coluna. Como convidados, temos que mudar a direção e será uma coluna. Como você pode ver, os itens flexíveis são colocados em uma coluna. Em seguida, vamos cuidar dos títulos. Vou selecionar o item de rodapé na página três. Precisamos dos mesmos estilos para todos os elementos do título. Vou mudar a família de telefones, ela será cursiva e, em seguida, o tamanho do telefone será 2,5 Rams Vou mudar a cor, vamos usar a cor 007 Além disso, vou criar algum espaço na parte inferior usando a margem. Dois últimos Ram. Como você pode ver, os títulos parecem muito bons Em seguida, temos que cuidar dos ícones. Vamos selecionar ícones, seguidos pelo elemento. Vou aumentar o tamanho do telefone, será de 2,5 Ram. Em seguida, precisamos de espaço no lado direito de cada ícone. Vou usar a marcha para a direita com valor dois Ram. E também altere o ponteiro do Coursermate. Ok, agora temos ícones maiores. Como convidados, temos que mudar a cor de cada item. Vamos começar com o primeiro. Vou selecionar os ícones I, seguidos pelo enésimo seletor filho Precisamos do primeiro item, na verdade, do ícone, a cor será 187 72. Vamos verificar o resultado. Como você pode ver, a cor do primeiro item foi alterada. Vamos fazer o mesmo com o resto dos ícones. Vou duplicar esse código seis vezes porque no geral, temos sete ícones Na verdade, precisamos de sete ícones e oito. Vou alterar os números dos seletores do gráfico. Precisamos de números, precisamos de números de um a sete. Além disso, precisamos mudar as cores. A segunda cor será C323. Então teremos um 662. O próximo será 112. Então teremos aqui D081. O sexto item é a cor 4x89. Também precisamos aqui da cor vermelha, que é F0000. Ok, então, como você pode ver, as cores dos ícones foram alteradas e eles ficam bem bonitos. Em seguida, temos que cuidar dos links aqui, vou selecionar o item de rodapé. Vamos mudar o tamanho do telefone. Vai ser 1,8 Ram. Então, precisamos de espaço na parte inferior usando a margem inferior. E será de 1,5 Ram. E também mude a cor do link. Vai ser 394353. É de cor cinza escuro. Aqui temos os links. Na verdade, acho que temos muito espaço entre eles. Vamos diminuir a margem. Potson, chegue a 1,4 Ram. Vamos fazer com que seja de 1,3 Ram. Acho que agora temos melhores resultados. Em seguida, tivemos que cuidar da parte inferior. Vamos selecionar rodapé na parte inferior. Vou definir a largura para 100%. Depois, precisamos alinhar os elementos usando o Flexbox Precisamos exibir o Flex. Em seguida, vou criar espaço entre os itens flexíveis usando o espaço de conteúdo do justify Além disso, vou usar o centro de alinhamento de itens para centralizar os itens flexíveis horizontalmente Como você pode ver, os elementos do link estão bem posicionados na linha horizontal e estão alinhados Agora vou criar uma borda na parte superior, a borda que temos aqui. Vamos usar a borda superior e os valores serão 0,2 Ram sólido como cor. Vou usar o valor RGBA, precisamos de zero, depois 122, então o próximo valor será 170 Quanto à opacidade, vou torná-la 0,2. Além disso, precisamos de algum espaço na parte superior aqui, na parte superior entre os itens de navegação e a borda Vamos criar esse espaço em estofamento, no topo de um carneiro. Tudo bem, finalmente temos que personalizar os elementos do link. Vou selecionar a parte inferior do pé seguida pelo elemento link. Precisamos de uma família de fontes. Vai ser croissant one curs, então eu vou definir o tamanho da fonte dois E também altere a cor do elemento de link. Vai ser 007 AA, ok? Como você pode ver, os elementos do link parecem muito bons. Na verdade, com o rodapé terminamos. Podemos dizer que terminamos trabalhar na página principal, a página inicial. Tudo parece muito bom. Em seguida, temos que cuidar das páginas, clientes, produtos, contatos, preços da conta. Temos que criar cinco páginas diferentes. Além disso, temos que fazer com que todo o projeto responsivo a diferentes tamanhos de tela e dispositivos Ainda assim, temos que fazer muitas coisas. Vamos passar para a próxima palestra. 48. Criando uma barra de rolagem personalizada: Na palestra anterior, terminamos de trabalhar no rodapé Parece muito bom. Como eu disse, temos que seguir em frente e começar a criar as páginas porque a página inicial já está estilizada e personalizada Antes de prosseguirmos e começarmos a criar as páginas, quero fazer mais uma coisa. Se dermos uma olhada no projeto finalizado, você descobrirá aqui que temos aqui uma barra de rolagem personalizada. É diferente da barra de rolagem padrão. Quero dizer, desta aqui. Nesta palestra, vou mudar a barra de rolagem. Vamos para o código VS e rolar para cima logo após os estilos padrão Vou inserir novos itens comuns para a barra de rolagem personalizada Em seguida, selecionarei os elementos do corpo seguidos por um dos elementos do CD. É chamado de Webkit Scroll Bar. Agora vou definir a largura da barra de rolagem. Vamos configurá-lo para 1,5 Ram. Em seguida, precisamos definir outro pseudoelemento e ele é chamado de web kit, barra de rolagem, polegar, que é essa parte aqui Agora vou definir o plano de fundo e vamos usar aqui o gradiente linear A primeira cor será 830. Para o segundo, vou usar o B55. Agora, se verificarmos, você verá que o polegar foi alterado Temos aqui um polegar com uma cor de fundo diferente. Agora temos que cuidar da pista. Na verdade, agora ele pode ver que a pista está branca. De qualquer forma, vou defini-lo porque você pode precisar de uma faixa diferente com cores diferentes. No futuro, você deve saber como mudar isso. Vou selecionar Corpo, depois webkit, rolagem, barra, faixa Vamos tornar a cor de fundo branca. A faixa é branca. Se mudarmos a cor e a criarmos, digamos verde, a faixa mudará sua cor de fundo. É assim que você pode alterar a cor de fundo da trilha da barra de rolagem Vamos voltar aqui. Cor branca novamente. É isso mesmo. Alteramos a barra de rolagem padrão e a tornamos moderna e agradável. Agora é hora de passar para a próxima palestra, na qual temos que começar a criar as páginas 49. Personalizando o Navbar: Tudo bem, então, na aula anterior, criamos uma barra de rolagem personalizada que parece muito boa e é diferente das barras de rolagem padrão e padrão Agora, como eu disse, temos que começar a criar as páginas. Nesta palestra, vou começar a criar a página do cliente Vamos ao projeto finalizado e conferimos mais uma vez a página do cliente. Aqui temos a página do cliente , que consiste em um título. Então temos aqui alguns depoimentos de diferentes E abaixo temos o mesmo rodapé que criamos para a página principal, quero dizer, a página inicial também Temos aqui a navegação. É semelhante à navegação principal. A única coisa que tem a ver com a navegação é mudar a cor do logotipo e também dos itens de navegação. E também temos que mudar o plano de fundo, cor e a cor do botão. Ok, vamos começar a trabalhar na página do cliente. A primeira coisa que vou fazer é criar um novo arquivo aqui na pasta HTML. O arquivo será de clientes, faça HTML. Vamos abrir esse arquivo. Vou movê-lo para cá. A página dos clientes. Quero dizer, o arquivo HTML é criado. Agora, vou pegar todo o conteúdo. Vamos copiar o código inteiro e colá-lo aqui. Em seguida, vou excluir todas as seções , exceto a navegação. Vamos excluir tudo, exceto a navegação que temos aqui. Toda a navegação a partir da página inicial. Além disso, todos os links que estamos usando ao longo deste projeto. Vamos verificar o navegador. Acesse a página do cliente. Aqui temos a navegação e a página inteira está vazia. Como eu disse, temos que mudar um pouco a navegação. Quero dizer, temos que mudar as cores do logotipo e dos itens de navegação. Vou adicionar um novo nome de classe à enésima barra e ela terá várias páginas Em seguida, vou para o arquivo CSS e precisamos encontrar o elemento span do logotipo. Aqui está. Vou selecionar essa classe recém-adicionada, várias páginas o suficiente, seguida pelo logotipo Então, precisamos do elemento span. Vamos mudar a cor do texto. Vai ser das 0926 às sete. Além disso, vou me livrar do efeito de sombra porque quando temos o fundo branco , a sombra não parece muito boa. Vou definir a sombra do texto como não. Vamos verificar o navegador. Como você pode ver, a cor do logotipo mudou e agora está muito melhor. Vamos ver aqui os itens de navegação. Vou encontrar elementos de link aqui, não temos nenhum link. E eu vou aqui com várias páginas seguidas por nenhum link. Então eu vou mudar a cor. A cor vai ser 0926 a sete. E também vou me livrar da sombra tecnológica. Vamos configurá-lo como nenhum. Como você pode ver, a cor dos itens entorpecidos é alterada Ok, agora temos que cuidar da bunda. Vamos encontrar o fundo que é colocado após as gotas. À medida que eu subo cinco. Então devemos encontrar aqui sim, PTN. Vou selecionar várias páginas para cima, seguidas por nenhum item Então temos que selecionar, na verdade, precisamos aqui de itens e itens. Em seguida, não precisamos de PTN. Vou mudar o plano de fundo que precisamos aqui. Gradientes lineares A direção da transição de cores será duas, certo? Então, a primeira cor será F459. Quanto à segunda cor, vou usar o F3598 Então, como você pode ver, a cor do solo é alterada. Em seguida, vou mudar a cor do texto e ele ficará branco. Além disso, vou me livrar da sombra da caixa. Vamos configurá-lo para nenhum, ok? Como você pode ver, a navegação parece muito boa. A única coisa que preciso fazer em relação à navegação mudar a sombra da caixa dos menus suspensos. Eu vou mudar isso um pouco. Vamos encontrar uma lista suspensa então. Vou adicionar aqui, na verdade, precisamos colocar o código aqui. Vou selecionar um número de várias páginas, seguido pelos itens O. Então precisamos descer. A sombra da caixa será 0110. Então, precisamos da cor RGP 130. Então, o próximo será 162. Então precisamos de 235, e a opacidade será 0,4 Ok Agora, como você pode ver, temos aqui um efeito de sombra diferente e acho que é muito melhor do que o anterior para o fundo branco. Tudo bem, então com a navegação terminamos. Vamos verificar se o Tiki no bar funciona bem. Para isso, vou aumentar a altura do contêiner por um tempo. Vou usar atributos de estilo. Então precisamos de alturas. Vamos configurá-lo para 150, coloque a altura. E agora verifique os resultados. Como você pode ver, a barra adesiva funciona bem. Temos aqui uma barra de rolagem personalizada, mas vamos alterá-la. Não precisamos da barra de rolagem roxa aqui. Pelo que me lembro. Temos aqui uma barra de rolagem verde. Vamos mudar isso um pouco mais tarde. Ok, tudo funciona bem. A navegação parece muito boa. Em seguida, temos que adicionar o conteúdo à página do cliente. Para isso, vamos passar para a próxima palestra. 50. Como criar a seção de marcação HTML para Depoimentos: Na palestra anterior, começamos a trabalhar na página do cliente Personalizamos a navegação e agora é hora de adicionar o conteúdo à página. Vamos dar uma olhada no projeto finalizado. A página do cliente incluirá os depoimentos dos Vamos criar a marcação HTML para o conteúdo da página do cliente Vamos ao código do VS e, logo após a navegação, vamos inserir novos comentários para os depoimentos Em seguida, vou abrir a seção com os depoimentos do nome da turma O primeiro elemento que vou inserir aqui será o cabeçalho. Precisamos de desenvolvimentos com o cabeçalho dos depoimentos do nome da classe Em seguida, vou abrir a tag de cabeçalho H one com o texto que os clientes estão dizendo sobre nós. Então precisamos ativar porque vamos adicionar trust pilot. Depois do elemento de cabeçalho, vou abrir uma tag profunda com as estrelas do nome da classe. Vamos ter estrelas aqui. Vou inserir aqui um símbolo do Google Material. Vamos ao navegador e pesquisar os símbolos de materiais do Google. Em seguida, precisamos encontrar o ícone chamado classe de hotel. Esse é o ícone que precisamos. Na verdade, vou torná-lo arredondado, depois pegar o elemento span e colá-lo aqui. Se verificarmos o navegador , você verá aqui a estrela exibida na página. Em seguida, adicionarei o Tug com o nome da classe Trust Pilot Em seguida, precisamos do elemento Span, coloque o texto Trust Pilot. Depois disso, vou adicionar aqui cinco estrelas. Vamos abrir um puxão profundo. Em seguida, acesse o navegador e procure o ícone chamado estrela. Precisamos desse ícone. Vamos pegar o elemento span e colá-lo dentro do desenvolvimento. No geral, teremos cinco estrelas. Portanto, vou duplicar essa linha de código quatro vezes. Vamos verificar o navegador. Como você pode ver, temos aqui cinco estrelas. Ok, a próxima coisa que vou fazer é criar outro desenvolvimento, que será um invólucro de depoimentos. No geral, teremos 12 depoimentos diferentes. Vamos começar com o depoimento do nome da turma. Vamos criar o primeiro e depois duplicar o depoimento e fazer algumas alterações O depoimento incluirá dois elementos diferentes. Teremos o topo do depoimento e o corpo do depoimento. Vamos começar com o nome da classe. O depoimento incluirá a imagem do cliente e também o nome Vou inserir a tag de imagem e, em seguida, precisamos especificar o caminho da imagem. Antes disso, precisamos sair da pasta atual. No momento, estamos na pasta Htiml. Temos que sair da pasta, precisamos de pontos e s. Depois temos que entrar na pasta de imagens e selecionar o cliente um Preciso de um nome, vou abrir a tag span. O nome será John Smith. Aqui temos a imagem do cliente e também o nome. Ok, vamos falar sobre o principal elemento do depoimento. Em seguida, precisamos de um corpo testemunhal. Os elementos incluirão título das estrelas e o parágrafo. Na verdade, é título, também é parágrafo. Vamos inserir aqui estrelas. Vou pegar esses elementos com cinco estrelas e depois colá-los aqui. Em seguida, precisamos de um parágrafo com texto fictício. Precisamos de cinco palavras. Vou inserir seu Lorin cinco depois inserir outro parágrafo Na verdade, se dermos uma olhada no projeto finalizado, você descobrirá que temos aqui parágrafos diferentes O comprimento dos parágrafos é diferente. No momento, vou deixar esse elemento vazio e depois cuidaremos dele um pouco mais tarde. Ok, então vamos falar sobre a marcação HTML para o primeiro depoimento Como eu disse, teremos 12 depoimentos diferentes. Vou duplicar esse código 11 vezes, depois vou fazer algumas alterações Precisamos mudar, na verdade, antes de tudo, vou inserir aqui o número de palavras. Quero dizer, precisamos de Lauren 30. Então temos que cuidar do segundo depoimento que precisamos aqui, cliente dois Então o nome será Jack Brown. Estou usando alguns nomes de domínio, você pode usar o que quiser Em seguida, vou inserir Lauren 40. Então teremos aqui o cliente três. O nome será Smith. Quanto ao parágrafo, vou interferir em Lauren 50 Então temos aqui o cliente quatro, e o nome será Nick Peters. Quanto ao parágrafo, teremos aqui 30 palavras. Precisamos de Lauren 30. OK. Em seguida, precisamos do cliente cinco com o nome Philip Dough. Quanto ao parágrafo , será Laura 13 Na verdade, precisamos aqui de 12 itens. É o primeiro 112345. São seis itens, então vou duplicá-lo seis vezes. Agora espero que tenhamos 12 depoimentos. É o quinto depoimento. Agora precisamos aqui do cliente seis. Então o nome será Jane Smith. Quanto ao parágrafo, será Lauren 40. Então, o próximo cliente é o cliente sete com o nome de Jessica Mendes, e o parágrafo será Lauren 40 Foi o sétimo depoimento. Precisamos aqui do cliente oito com o nome Steve Thompson. O parágrafo será Lauren 50. Precisamos aqui de nove e será Maria Green. E o parágrafo será, hum, 60. Então temos aqui o cliente dez. É Alexis, Alexis Smith, e precisamos do Lorem Em seguida, cliente 11, Bob Brown, Lum 20 Finalmente, precisamos do cliente 12. Vai ser Rose Hanson. Quanto ao parágrafo, vou inserir aqui, Laurum 40. Ok, então acho que a marcação de horário H está pronta e espero que tudo esteja correto aqui Vamos ao navegador e verificamos. Aqui temos imagens com nomes e parágrafos diferentes. Acho que tudo o que não temos aqui, a imagem do 11º cliente Talvez tenhamos cometido um erro. Aqui é o cliente 11. Agora, o problema está resolvido. Acho que tudo parece estar correto. Agora temos que personalizar esta seção. Vamos passar para a próxima palestra. 51. Seção de Depoimentos de Estilo: Na aula anterior, criamos a marcação HTML para a página do cliente Criamos a seção de depoimentos. Você pode ver aqui todos os elementos. Agora temos que começar a estilizar esses elementos. Mas antes de fazermos isso, vou fazer uma coisa. Como você pode ver, temos aqui barra de rolagem que tem a cor de fundo roxa Mas se dermos uma olhada no projeto finalizado, você verá que a barra de rolagem tem uma cor verde diferente Eu vou cuidar disso como a primeira coisa. Vamos ao código VS e, primeiro de tudo, criar um novo arquivo na pasta CSS. Serão clientes. Então eu vou mover esse arquivo aqui. Precisamos vincular o arquivo CSS dos clientes ao arquivo HTML. Quero dizer, clientes pontilham HTML. Vou duplicar esse código. E precisamos alterar aqui o nome do arquivo que será clientes. Ok, uma vez que os arquivos estejam conectados. Em seguida, vou até o arquivo CSS do bloco e pegarei esse código. Quero dizer, o código em que mudamos a cor de fundo da barra de rolagem Bump. Vamos copiar esse código e, em seguida, acessar os clientes do arquivo CS. Em primeiro lugar, vou inserir seus comentários na barra de rolagem personalizada e depois colar o código Aqui precisamos mudar essas duas cores. A primeira cor será 0067 A. Quanto à segunda cor, vou usar 34 DC 87 Como você pode ver, a cor, quero dizer, a cor de fundo da barra de rolagem foi alterada. E parece muito bom. Tudo bem, então vamos ver a barra de rolagem. Em seguida, temos que levá-lo para a seção de depoimentos. Vou inserir seus novos comentários para depoimentos. Em seguida, precisamos selecionar o elemento da seção que tem depoimentos de nomes de classes Em primeiro lugar, vou definir a altura com a mão dos elementos da seção. Vou definir os dois para 100%. Em seguida, vou mover a seção para baixo usando a margem superior. Vou definir o topo, na verdade, estamos criando o espaço entre a borda superior da página e a seção. Em seguida, vou usar o CSS Flexbox para alinhar os itens flexíveis Vou configurar a tela para flexionar. Então eu vou mudar a direção porque vamos alinhar os elementos verticalmente Precisamos que a direção flexível seja uma coluna. E também precisamos alinhar os itens no centro, como você pode ver, o conteúdo colocado no centro Na verdade, precisamos alterar o tamanho das imagens porque agora elas são muito maiores. Vou selecionar o topo do depoimento seguido pela pilha de imagens Vamos definir a altura da imagem, ambas para seis Ram. Em seguida, vou colocar os pés do objeto para cobrir para evitar o encolhimento das imagens e a perda da qualidade da Então eu vou fazer as imagens arredondadas. Para isso, precisamos do raio com um valor de 50% de química Como você pode ver, temos aqui um resultado muito melhor porque as imagens ficaram menores. Em seguida, vou cuidar do cabeçalho. Estou aqui, cabeçalho do depoimento. Precisamos alinhar o texto no centro. Em seguida, vou cuidar do elemento de cabeçalho H one. Vamos selecionar cabeçalho do depoimento seguido pelo elemento de título H one Antes de tudo, vamos mudar a família de telefones. Vai ser Molly Cursive. Em seguida, vou definir o tamanho do telefone como pi. Além disso, precisamos mudar a cor usada aqui, cor 0926 para sete Vamos verificar o navegador. Temos aqui o título. Agora, vou aumentar o espaço entre as letras. Vamos configurá-lo para 0,2 Ram. Além disso, vou diminuir a largura do cabeçalho. Vamos configurá-lo para 70% Como você pode ver, o título é colocado no lado esquerdo da página. Temos que colocá-lo no centro e, para isso, vou usar a margem, embora isso nos permita colocar o elemento no centro. Se você quiser centralizar o elemento, precisará usar largura e margem juntas. Lembre-se disso. Agora, como você pode ver, o título é colocado no centro. Em seguida, vou alterar a altura da linha. Vamos definir a altura da linha em oito. Ok, em seguida eu vou cuidar das estrelas. Vamos selecionar o desenvolvimento do wrapper que tem os nomes de classe Stars Vou usar o flex box para alinhar os elementos. Como você pode ver, os elementos são colocados horizontalmente em uma linha Em seguida, vou cuidar da posição do elemento. Vamos definir a posição como absoluta. Precisamos posicionar os elementos de acordo com seu elemento pai. Precisamos de uma posição relativa para o pai, que é o cabeçalho do depoimento Agora vou definir as duas posições, serão 50%. Quanto à posição correta, vou fazer com que sejam 15%. Ok, vamos verificar os resultados. Os elementos são colocados de forma adequada e correta. Em seguida, vou cuidar do piloto de confiança, mas, como vejo, as estrelas estão delineadas Se dermos uma olhada no projeto final, você verá que as estrelas não estão delineadas, elas estão preenchidas Vamos visitar os símbolos do Google Material. Vamos conferir o site. Como você pode ver na seção de filtros, temos aqui uma opção chamada campo e precisamos ativá-la. Agora, se eu pesquisar o ícone , você verá que é um campo. Se eu clicar no ícone, você verá que temos aqui exatamente o mesmo elemento de extensão, exatamente o mesmo nome da classe e a estrela do conteúdo. A única diferença que temos aqui é que, nesse caso, quando estamos usando os ícones do campo, o valor da propriedade do campo é igual a um. Mas se verificarmos o link em nosso arquivo H Neal, você verá que temos aqui a propriedade do campo Seu valor apropriado é zero. Se eu mudar de zero para um e verificar o navegador, você verá que todas as estrelas estão preenchidas. Está bem? O problema está resolvido. Vamos seguir em frente e cuidar do próximo elemento, que é o piloto de confiança. Vou selecionar trust pilot e definir a margem na parte superior, porque precisamos de algum espaço na parte superior, vamos definir a margem superior em um m. Ok, a próxima coisa que vou fazer é cuidar desse elemento de texto aqui. Quero dizer, confie no piloto. Vamos ao piloto de código e confiança do VS seguido pelos panelements, se dermos uma olhada na marcação HTML Você pode ver aqui que esse elemento, o elemento trustpilot, inclui diferentes elementos de extensão Temos aqui o texto span trustpilot e também temos aqui os símbolos com elementos span No nosso caso, precisamos selecionar somente esse elemento de extensão. Para isso, vou usar um dos combinadores CSS, Este sinal aqui Isso nos permite selecionar somente o primeiro elemento secundário de extensão aqui. Se eu adicionar aqui estilos como tamanho de fonte 2,5 Ram, então pinte 0926 a sete Além disso, vou usar espaçamento entre letras. Digamos que seja 2,3 Ram. Então, se verificarmos o navegador, você verá que somente esse elemento de extensão é estilizado, essas estrelas não são alteradas Se eu me livrar de, assine aqui e depois mude a cor e obterá resultados diferentes. Como você pode ver, agora todos esses elementos do pan foram alterados. Mas se adicionarmos aqui o combinador , o painel mudará Ok, espero que esteja claro para você, vou recuperar esses ladrilhos. Ok, a seguir temos que cuidar das estrelas. Vou selecionar o Trust Pilot, seguido pelo desenvolvimento. E então precisamos do Span. Vamos mudar a cor. Vai ser 00. Então precisamos do tamanho da fonte três, Ram. Além disso, vou usar margem. A margem será zero na parte superior e inferior de -0,25 Ram. Está nos lados esquerdo e direito. Ok, as estrelas estão muito bonitas. Em seguida, vou cuidar dessa estrela aqui. Vou selecionar estrelas seguidas pelo elemento span. Agora precisamos usar a mesma técnica. Precisamos do primeiro elemento filho. Vou usar novamente o combinador CSS. Vamos mudar o tamanho da fonte. Serão cinco Ram. Então precisamos de cor. Vou definir a cor para 00b 67. E também precisamos marchar pelo lado direito. Vamos configurá-lo para uma RAM. Acho que terminamos com o cabeçalho. Tudo parece muito bom. Em seguida, temos que cuidar dos depoimentos. Vou acessar o código VS e selecionar o depoimento. Vou definir a largura e a altura do depoimento A largura será de 33 Ram. Quanto à altura, vou configurá-la para 100%. Em seguida, vou colocar os depoimentos em linhas diferentes Para isso, vou selecionar a embalagem de depoimentos. Vamos definir com 80% e depois vou usar o Flex Box Precisamos do Display Flex para colocar os itens flexíveis em linhas diferentes Temos que usar envoltório flexível. Além disso, vou justificar o conteúdo e colocá-lo no centro. Agora, como você pode ver, os depoimentos estão alinhados. Em seguida, vou criar um espaço dentro da embalagem de depoimentos que vou usar Precisamos que o preenchimento seja de dez RAM na parte superior e inferior e zero nos lados esquerdo e direito OK. Tudo parece muito bom. Em seguida, temos que voltar ao depoimento, e vou adicionar aqui alguns estilos diferentes Precisamos de margem para criar espaço entre os depoimentos Vamos adicioná-lo a dois Ram nos quatro lados. Então eu vou definir box shadow para 01 Ram, dez Ram. A cor será 113. Zero, então precisamos de 162. próximo será 235 e, quanto à opacidade, vou usar 0,4. Agora, os depoimentos Em seguida, vou torná-los arredondados. Para isso, precisamos de um raio de borda com o valor um Ram. Além disso, vou criar algum espaço dentro do depoimento usando preenchimento Vamos configurá-lo para dois m nos quatro lados. Tudo bem. Em seguida, vou cuidar do topo do depoimento. Quero dizer a imagem e o nome. Em primeiro lugar, vou selecionar a embalagem que é a parte superior do depoimento Na verdade, é o depoimento no topo e não no topo do depoimento. Vamos usar o Flex Books, vamos exibir o Flex Em seguida, vou alinhar os itens no centro. Além disso, vamos criar espaço na parte inferior usando a margem. Parte inferior, 1,5 Ram. Tudo bem, depois disso, vou selecionar os elementos de extensão, quero dizer, o nome do cliente. Vamos escrever esse código após a imagem, vou selecionar o topo do depoimento, seguido pelo elemento span Vou aumentar o tamanho do telefone. Digamos que seja de 1,8 Ram. O texto será em maiúsculas. Precisamos transformar texto em maiúsculas. Em seguida, vou definir a margem esquerda para dois Ram. Em seguida, precisamos de cor, e será 588 Finalmente, precisamos que o espaçamento entre letras seja de 0,1 execução. Ok, então todos os nomes parecem muito bons. Em seguida, temos que cuidar dos elementos profundos dentro do corpo do depoimento Quero dizer, o invólucro das estrelas. Vamos selecionar o corpo do depoimento seguido pelo desenvolvimento Vou definir a margem para um Ram na parte superior e inferior e zero nos lados esquerdo e direito. Agora temos algum espaço. Em seguida, vou cuidar das estrelas. Vamos selecionar o corpo do depoimento, seguido pelo desenvolvimento. E então precisamos de amplitude. Vou aumentar o tamanho do telefone, vai ser de três M. Depois mudo a cor. Eu vou usar aqui, essa cor verde. As estrelas estão muito bonitas. A única coisa que precisamos fazer é cuidar desses parágrafos aqui Vamos começar com o primeiro parágrafo. Vou selecionar o corpo do depoimento, seguido pelos elementos E então precisamos do seletor N de filhos. Precisamos de um seletor de crianças. Você pode pensar que eu escrevo aqui um. Mas se dermos uma olhada no arquivo de e-mail HT, você verá que o parágrafo é o segundo membro do desenvolvimento. Em vez de um, precisamos aqui de dois. Vamos aumentar o tamanho do telefone. Vai ser 1,8 Ram. Então precisamos de uma família telefônica. Vou configurá-la para a letra cursiva de Molly. Vamos mover essa linha para a próxima. Vou colocar o peso do telefone em negrito. E eu vou mudar a cor. Vai ser das 0926 às sete. Finalmente, vou usar aqui, margin, Bottom one, Ram. Ok, vamos verificar os resultados. O primeiro parágrafo parece muito bom. Em seguida, temos que pegar aqui o segundo parágrafo. Na verdade, vou duplicar esse código depois alterar o seletor de gráficos Serão três. Vou me livrar da família de telefones, então o tamanho do telefone será de 1,6 RAM. Então, precisamos que o peso do telefone seja 300, a cor será 466 Finalmente, precisamos de margem. Um Ram inferior. Ok, é isso mesmo. Os depoimentos são estilizados e parecem muito bonitos. Com a seção de depoimentos, terminamos. Mas antes de terminarmos a palestra, vou fazer mais uma coisa Se dermos uma olhada no projeto finalizado, você verá que temos aqui o I no pé que criamos para a página inicial. A única coisa que vou fazer é copiar a marcação HTM do rodapé da página inicial Vamos copiá-lo e colá-lo na página do cliente. Se eu copiar e colar aqui o rodapé e depois verificar o navegador, você verá que temos aqui exatamente o mesmo rodapé que tínhamos na página inicial Ok, é isso aí, a página do cliente está pronta. Em seguida, temos que cuidar da página de produtos. E para isso, vamos para a próxima palestra. 52. Como criar a página de marcação HTML para produtos: Na seção anterior, criamos a página do cliente. Parece muito bom e legal. Agora é hora de seguir em frente e começar a criar nossa próxima página, que será a página do produto. Vamos para a versão final do nosso projeto e para a página do produto. A página de produtos consiste em algumas partes diferentes. Teremos aqui o cabeçalho, que inclui dois cabeçalhos. Então temos aqui esta parte que inclui dois lados, esquerdo e direito. No lado esquerdo, temos alguns elementos textuais. E no botão do lado direito, você pode ver imagens lindas e legais do projeto. Então temos aqui uma seção que é algo como uma seção promocional. Temos aqui um efeito de terror agradável e legal. Abaixo, você pode ver o rodapé que usamos nas páginas I anteriores, na página inicial e na página do cliente É tudo sobre isso. A página do produto, eu acho que parece muito bonita, legal e também moderna. É hora de começar a criar esta página. Vou acessar o código VS. Vou criar uma nova página, quero dizer, arquivo HTML e vou chamá-la de produtos HTML. Além disso, vamos criar o arquivo CSS e chamá-lo de produtos SS. Vou fechar dois arquivos e, na verdade, precisamos de clientes. Vamos abri-lo. Vou copiar todo o conteúdo e colá-lo. Os produtos do arquivo HTML, precisamos manter aqui esses elementos HTML padrão. Só precisamos alterar o nome do arquivo CS. Serão os produtos que precisaremos aqui. Em seguida, vou deixar aqui a navegação. Vou deletar a seção de depoimentos. Vamos excluir a seção de depoimentos. Eu acho que é isso. O arquivo HTML está pronto. Vamos dar uma olhada na página de produtos. Como você pode ver, temos aqui a navegação e o rodapé Vou esconder o rodapé por um tempo. A fim de tornar nosso processo de trabalho mais conveniente. Temos maneiras diferentes de esconder os elementos. Nesse caso, vou usar o atributo chamado. Como você pode ver, o rodapé está oculto. Está bem? Então, como eu disse, vamos começar a criar uma página de produtos. E a primeira coisa que precisamos fazer é preparar a marcação HTML, como costume, na seção de novos comentários inseguros para produtos Em seguida, vou abrir os elementos da seção com o nome da classe products. Em seguida, precisamos de desenvolvimentos, que serão a embalagem do conteúdo Vou chamá-lo de embalagem de produtos. Como eu disse, a página do produto incluirá três partes diferentes. O primeiro será o cabeçalho que precisamos aqui, cabeçalho Produtos, que incluirá dois elementos de cabeçalho. O primeiro será H um elemento de cabeçalho. Vou inserir aqui, temas e plugins. Então, precisamos de H três elementos de cabeçalho. O texto será classificado os temas e plug-ins mais populares do mundo Ok, vamos sentar sobre o cabeçalho. Em seguida, temos que criar a segunda parte. Vou chamá-lo de conteúdo de produtos. Vamos criar desenvolvimentos com o nome da classe, Conteúdo de produtos. Não sei se é um bom nome, mas de qualquer forma vou chamá-lo. Dentro do conteúdo dos produtos. Teremos dois lados. Quero dizer, o lado esquerdo e o lado direito. Precisamos de desenvolvimentos que restarão ao conteúdo do produto. Eu também vou criar o lado direito. Precisamos de conteúdo de produtos, certo? Ok, vamos cuidar do lado esquerdo. No lado esquerdo, teremos H um elemento de cabeçalho com o texto construído. Em seguida, vou inserir aqui parágrafo com um texto fictício de loam ipsum O número de palavras será 13. Também precisamos do botão. O tipo será, precisamos aqui do atributo de tipo e será botão. Vou aderir ao nome da turma. A classe será de produtos, PTN. Conforme o texto do botão, vou aqui mesmo aprender sobre nós que estamos do lado esquerdo. Agora vamos cuidar do lado direito. E o lado direito terá cinco imagens diferentes. Precisamos da sua etiqueta de imagem. Em seguida, temos que especificar o caminho do arquivo. Primeiro de tudo, temos que sair da pasta atual. Em seguida, temos que entrar na pasta de imagens. E eu vou selecionar a web dois, imagem um. Vamos duplicar essa linha de código quatro vezes porque precisaremos de cinco imagens A segunda imagem será a web dois, a imagem dois. Então teremos a web dois, imagem três. A próxima será a web cinco, imagem um, e a web cinco, imagem dois. Isso é tudo sobre o conteúdo dos produtos. Temos aqui as imagens no momento, elas são muito maiores, mas cuidaremos disso. A próxima coisa que vou fazer é criar a terceira parte da seção. A terceira parte será, como eu disse, a promoção de produtos. Teremos duas partes. A primeira parte será formas. Essas formas aqui. Temos aqui um círculo, dois círculos e o retângulo que vou inserir aqui Desenvolvimentos e serão formas promocionais de produtos Teremos aqui um retângulo, depois vou criar um círculo pequeno e depois precisamos de um círculo grande Depois disso, vou inserir outro desenvolvimento e será o conteúdo promocional. Dentro do conteúdo promocional, precisamos de elementos de cabeçalho H one. O texto será de 100.000. Precisamos aqui de mais de 100.000 clientes que já estão criando sites incríveis e modernos com código e criação. Então, precisamos nos juntar à comunidade mais capacitada. Ok, isso é sobre o elemento de cabeçalho. Em seguida, precisamos aqui de Batson. O tipo vai ser Patson. Quanto ao texto que precisamos aqui, além disso, inscreva-se hoje, mas vou interferir no parágrafo do texto. Oferecemos uma garantia de devolução do dinheiro em 30 dias. Junte-se a nós Ok. E, finalmente, vou inserir seu desenvolvimento. Vai ser Promo Shadow. Vamos criar esse efeito de sombra agradável e legal. É por isso que criamos esse desenvolvimento aqui. Ok, acho que todos os elementos foram criados e a marcação HTML está pronta Agora temos que estilizar esses elementos. E para isso, vamos para a próxima palestra. 53. Seção de conteúdo de produtos de estilo: Tudo bem, na aula anterior, criamos a marcação HTML para a página de produtos Agora é hora de estilizar esses elementos. Na verdade, antes de começarmos a estilizar esta seção, vou mudar algo no arquivo HTML Eu adicionei aqui cinco imagens diferentes, mas na verdade precisamos de apenas três delas. As três primeiras imagens foram um erro meu, e me desculpe por isso, vou deletar essas duas imagens porque não precisamos delas. Em seguida, vou cuidar do CSS, pois lembre-se de que criamos um novo arquivo CSS na aula anterior É chamado de CSS do produto. Vou abri-lo, vamos mover esse arquivo para o lado direito. Em seguida, vou fechar o arquivo CSS dos clientes. A primeira coisa que vou fazer é aderir aos comentários dos produtos. Em seguida, vou selecionar o elemento da seção. São produtos. Em primeiro lugar, vou definir dentro da altura. A largura será de 100%. Quanto à altura, também vou torná-la 100%. Além disso, vou criar espaço na parte superior da seção usando a marcha de cima para baixo para correr Ok, então a largura e a altura são aplicadas à seção. E também temos aqui o espaço entre a navegação e a seção. Além disso, a barra de rolagem é exibida. Se dermos uma olhada no projeto finalizado, você verá que temos aqui uma barra de rolagem com uma cor de fundo diferente. Eu vou mudar isso. Vamos voltar ao código VS. Vou abrir o arquivo CSS de estilo. Precisamos corrigir todo esse código e colá-lo aqui. Então eu vou deletar esse código. Nós não precisamos disso. Além disso, precisamos excluir a trilha da barra de rolagem. Em seguida, vamos mudar as cores aqui. A primeira cor será 14b3. Essa é a segunda cor que vou usar aqui, 538 FT vende Você pode ver que a cor de fundo da barra de rolagem foi alterada. E parece muito bom e é apropriado para as cores desta página. Em seguida, vou cuidar da embalagem dos produtos. Vamos selecionar esse elemento, a largura e a altura. Ambos serão 100%. Então eu vou usar o Flex Box para alinhar os elementos Precisamos do Display Flex. Então eu vou mudar a direção porque vamos alinhar os elementos verticalmente Precisamos que a direção flexível seja uma coluna. E também vou alinhar os itens no centro horizontalmente Como você pode ver, o conteúdo é colocado no centro. Em seguida, vou cuidar do cabeçalho. Vamos selecionar o cabeçalho dos produtos. Precisamos alinhar o texto no centro usando texto. Centro de alinhamento. O texto do título é colocado no centro. Em seguida, temos que cuidar dos títulos. Vou começar com o primeiro título, que é H um. Precisamos do cabeçalho do produto seguido pelo elemento de cabeçalho H one. Em primeiro lugar, vou definir a família de telefones. Vai ser, não precisamos, precisamos de uma família telefônica. Vai ser a letra cursiva de Molly. Em seguida, vou alterar o tamanho da fonte. O tamanho da fonte será de seis rodadas. Como precisamos de espaçamento entre letras para criar espaço entre as letras, será 0,2 Ram E, finalmente, vou mudar a cor do título. A cor será 26353. Ok, o primeiro título parece muito bom. Em seguida, temos que cuidar do segundo título, que é três. Vamos selecionar. Cabeçalho do produto seguido pelos três elementos do cabeçalho H. Em primeiro lugar, vou definir o tamanho da fonte. Serão três Ram. Então precisamos de peso. Eu vou fazer com que sejam 300. Também mude a cor. A cor será 567599 e, em seguida, crie uma margem. Estou no espaço, a margem será de dois Ram na parte superior, depois zero no lado direito, depois 15 Ram na parte inferior, zero no lado esquerdo. Então, aqui temos o cabeçalho. Ambos os títulos parecem muito bons e agora temos que cuidar do conteúdo do produto Quero dizer, essa parte aqui, como eu disse, e como você vê, as imagens são maiores. Eu vou mudar o tamanho das imagens e depois vamos estilizar o resto dos elementos. Vou selecionar produtos, conteúdo. Nesse momento, precisamos da sua imagem com o enésimo seletor infantil. Vou selecionar a primeira imagem. Precisamos definir a largura. Serão 35 Ram. Então, vamos duplicar esse código duas vezes, alterar os números dos enésimos seletores secundários Precisamos de 2.3. A segunda imagem terá o mesmo valor de 20 Ram. Quanto à terceira imagem, será de 30 Ram. Agora as imagens ficam menores e podemos estilizar o resto dos elementos. Vou selecionar o invólucro, que é o conteúdo do produto Em primeiro lugar, vou definir dentro da altura. A largura será de 80%. Quanto à altura, vou fazer com que seja 90 Ram. Então, para tornar esse elemento visível, precisamos adicionar sombra de caixa para o valor 01 Ram, dez Ram, e a cor será o valor RGBA O primeiro valor será 130, depois teremos 162, então precisamos 235 E, finalmente, a opacidade será 0,4. Agora, como você pode ver, o elemento, quero dizer, o conteúdo do produto, o elemento do invólucro Em seguida, vou aderir o preenchimento para criar algum espaço dentro do elemento O acolchoamento será de cinco Ram nos quatro lados. Além disso, vamos arredondar os cantos do elemento usando o raio da borda E o valor será de uma RAM. Temos aqui o acolchoamento e também os cantos ao redor dele. Em seguida, vou alinhar elementos dentro do conteúdo dos produtos usando CSS, Flax box Vou adicionar aqui a bandeira de exibição e também precisamos alinhar os itens no centro Na verdade, temos aqui um pequeno problema. Essa parte deve ser colocada fora do conteúdo do produto. Esse pode ser o problema. Por engano, adicionei formatura dentro do conteúdo do produto Vamos cortar esse código e adicioná-lo fora dos desenvolvimentos. Agora, o problema deve ser resolvido. Bem, temos aqui o mesmo problema. Vamos encontrar o conteúdo dos produtos. Esse é o fechamento, a tag do conteúdo dos produtos. Portanto, como eu disse, temos que pegar o código do conteúdo cromado e colá-lo fora do conteúdo do produto Agora, o problema deve ser resolvido com certeza. E sim, como você pode ver, o conteúdo do conteúdo Romo é colocado fora do conteúdo dos produtos Agora, uma vez corrigido esse problema, precisamos personalizar os elementos dentro do conteúdo do produto. Temos que começar com o conteúdo restante dos produtos. Vamos definir que a largura será de 40% do conteúdo do produto. Quanto à altura, vou chegar a 100% e depois vou criar um preenchimento Quero dizer, algum espaço dentro do elemento. O preenchimento será de 15 gramas na parte superior e inferior e zero nos lados esquerdo e direito Em seguida, temos que alinhar os elementos usando a caixa flexível. Vou usar o Display Flex. Em seguida, temos que colocar os itens flexíveis verticalmente em uma coluna Portanto, temos que mudar a direção em que será a coluna. Além disso, vou criar espaço entre os itens flexíveis usando justificar o espaço do conteúdo Isso adicionará um espaço uniforme entre os itens flexíveis. Como você pode ver, os elementos do lado esquerdo estão alinhados Em seguida, temos que personalizar cada um dos elementos. Temos que começar com o título. Vou selecionar H um elemento de cabeçalho. Precisamos deixar o conteúdo dos produtos, seguido pelo elemento de cabeçalho H one. Antes de tudo, vamos mudar a família de telefones. Vai ser croissant one Co . Em seguida, temos que alterar o tamanho do telefone. Serão dez ram. Aqui temos o título. Se eu der uma olhada no projeto finalizado e no título, você verá que o título tem um efeito de gradiente linear Temos aqui a cor azul. Como você pode ver, a cor tem efeito de gradiente linear. Vamos para o código VS e definir o plano de fundo como gradiente linear Precisamos mudar a direção da cor. A transição será de duas, certo? Então, a primeira cor será 35730. Isso é para a segunda cor, vai ser de dois a 509 E também vou aderir 80% para mudar a transição de cores. Em seguida, temos que usar a seguinte propriedade. É chamado de clipe de fundo do Web kit Ele deve ser definido como texto. Finalmente, precisamos de cores transparentes. Agora, o título deve ter um efeito de gradiente linear. Nós temos aqui. Acho que é diferente do projeto finalizado. Vamos verificar as cores que precisamos. 357.3 deve ser 730 e depois 22509. Ok, vamos agora ter aqui exatamente a mesma cor de fundo. Quero dizer, a infecção de grau linear que temos no projeto finalizado Ok, vamos sentar acima do cabeçalho. Em seguida, temos que cuidar do parágrafo, selecionar os produtos, o conteúdo restante, seguido pelos elementos. Antes de tudo, vamos mudar a família de telefones. Vou usar seu telefone chamado Mull per, então o tamanho do telefone será 1,6 Ram Além disso, vou mudar a cor do texto. A cor será 537983. Em seguida, vou diminuir o espaço entre o título e o parágrafo usando a margem superior. Nesse caso, precisamos de um valor negativo menos cinco Ram. Como você pode ver, o parágrafo está lado a lado. Na verdade, vou mudar a altura da linha , será de 2,5 Ram. Agora temos aqui um fato um pouco melhor. Ok, é isso sobre o parágrafo A seguir, vou cuidar da parte inferior. Vamos selecionar Produtos, Conteúdo à esquerda, seguidos pelos elementos inferiores. A largura da parte inferior será de 50% do lado esquerdo. A altura será de seis aríetes. Vou mudar o plano de fundo e vou usar um gradiente linear O gradiente linear será o mesmo que usamos para o título Vou copiar o valor. Como você pode ver, temos aqui o mesmo efeito de gradiente linear Em seguida, temos que nos livrar da borda padrão da parte inferior. Vamos definir a borda como nenhuma e também fazer os cantos arredondados usando o raio da borda O valor será de cinco Ram. Agora o botão está bem bonito, temos que cuidar do telefone. Vamos definir o tamanho do telefone. Para 1,6 Ram. Em seguida, temos que transformar o texto em maiúsculas. Vamos definir a cor para branco, mas depois precisamos de espaçamento entre letras O espaço entre as letras será de 0,2 Ram. E, finalmente, vamos nos aproximar de 0,0. Como você pode ver, o botão parece muito bom. Na verdade, com o lado esquerdo, terminamos. Tudo parece muito bom. Em seguida, temos que cuidar do lado direito. Vou selecionar o lado direito. Quero dizer elementos com o nome da classe, conteúdo do produto. Certo, vamos definir a largura. Serão 60% dos elementos principais. Em seguida, vou selecionar Imagem. Vamos usar esse seletor aqui. Vamos adicionar aqui alguns estilos comuns. A primeira será a posição. Vou definir a posição como absoluta. E então precisamos da posição relativa para os elementos pais, quero dizer, o conteúdo dos produtos. Porque vamos alinhar as imagens de acordo com os elementos de conteúdo dos produtos Vou adicionar aqui a posição relativa. Em seguida, vou fazer com que os cantos das imagens sejam arredondados usando o raio da borda Vai ser um Ram. Além disso, precisamos de sombra de caixa para todas as imagens com os valores 02 Ram, oito Ram e a cor será preta. Quanto à opacidade, vou fazer com que seja 0,5. Ok, então aqui temos as imagens com sombra de caixa Em seguida, temos que posicionar as imagens para isso. Vamos adicionar alguns estilos às imagens individuais. Vou adicionar aqui a altura , vai ser 70. Então, para manter a qualidade da imagem, para evitar encolhê-la, vou usar a capa para pés de objetos Precisamos aqui cobrir e conter. Ok, em seguida, temos que cuidar das posições. As duas posições serão de 50%, então precisamos da posição correta. Vou configurá-lo para 15%. Em seguida, precisamos centralizar verticalmente dentro do elemento de conteúdo do produto Para isso, temos que usar transform com a função translate y e o valor será -50%. Como você pode ver, a primeira imagem está alinhada e colocada no centro dos elementos I Em seguida, temos que cuidar da segunda imagem. Vou adicionar aqui. A posição será de 20% para a posição correta, indo de 30 a 33%. A segunda imagem está alinhada e agora temos que cuidar da terceira imagem, a Na verdade, não precisamos nos posicionar, precisamos da posição inferior. A posição inferior será de 20%, então precisamos posição correta, 3%. É isso aí. As imagens estão alinhadas e, na verdade, com o elemento de conteúdo do produto, estamos prontos Em seguida, temos que retirar o conteúdo para isso. Vamos passar para a próxima palestra. 54. Seção de promoção de produtos de estilo: Na palestra anterior, estilizamos a primeira parte da página do produto Quero dizer conteúdo de produtos. Agora temos que cuidar da segunda parte, que é a promoção de produtos. Todos os elementos são criados e preparados e precisamos estilizá-los novamente. Vamos dar uma olhada no projeto finalizado. Vamos personalizar essa seção aqui. E temos que criar esse efeito de foco agradável e legal. Ok, vamos até o código VS e selecione a promoção de produtos. Vou definir largura e altura. A largura será de 100%. Isso é para a altura. A altura da janela de visualização será de 150, seja, 50% da visualização Vamos verificar o navegador. Como você pode ver, a altura não é aplicada ao elemento promocional do produto. Talvez tenhamos algum erro no arquivo HTML. Aqui temos a promoção de produtos. promoção de produtos deve incluir o conteúdo desta seção. Na verdade, vamos verificar a tag de fechamento. Ok, temos alguns erros aqui. Temos que cortar esse código a partir daqui porque ele não faz parte do conteúdo do produto. Vamos colar aqui. Além disso, temos que incluir conteúdo promocional na promoção dos produtos. Temos que incluir esse elemento aqui. Agora eu acho, e espero que tudo esteja correto e que o código funcione aqui. Temos a altura que é igual a um 50% da janela de visualização Além disso, a largura é aplicada 100% OK. Depois disso, eu vou cuidar das formas, essas três formas aqui. Vou começar com o retângulo Romo. Vamos selecionar esses elementos. Antes de tudo, precisamos definir a largura e a altura. Ambos terão 60 m , depois vou mudar a cor do fundo. Na verdade, vou usar gradiente linear. Vou definir a direção da transição de cores e vou configurá-la para 135 graus. Nesse caso, a direção será diagonal. A primeira cor será 184b. Quanto à segunda cor, vou torná-la transparente. E também vou definir o valor percentual. Vai ser 8%. Aqui temos o retângulo e o fundo com gradiente linear Em seguida, vou cuidar da posição desse elemento. A posição será absoluta. Para posicionar esse elemento de acordo com os elementos principais, que são a promoção de produtos, vou usar a posição relativa. Em seguida, vamos definir as posições esquerda e superior. Vou começar com a primeira posição. Vai ser 25% Então a posição esquerda será 10% Vamos verificar o navegador. Como você pode ver, o retângulo está posicionado a seguir. Vou torná-lo arredondado porque se dermos uma olhada no projeto finalizado, você verá que ele é arredondado. Vou usar o raio da borda com o valor dez Ram, pois você pode ver os cantos do retângulo ao redor dele Em seguida, vou girar esse elemento. Para isso, precisamos transformar a função Z de rotação. Precisamos girar o elemento na direção z no valor que vou inserir em 45 graus. Como você pode ver, o retângulo é girado. E, finalmente, vou diminuir a opacidade do retângulo Vamos fazer com que seja 0,2 Ok, é isso mesmo. Sobre o retângulo promocional. Em seguida, vou tirar você do círculo. Quero dizer, o pequeno. Vamos selecionar um pequeno círculo, definir dentro da altura. A largura será em forma. Quanto à altura, vou fazer com que ela se forme também. Então, precisamos da cor de fundo, que será A D00 Em seguida, precisamos arredondar os elementos usando o raio da borda com o valor de 50% Let's Verifique o navegador. Aqui temos o círculo. Depois disso, eu vou cuidar da posição. Vamos definir sua posição como absoluta. Então precisamos posicionar 20%. Quanto à posição correta, vou fazer com que seja 40%. Como você pode ver, o círculo está posicionado E a última coisa que vou fazer é diminuir um pouco a opacidade. Vamos definir a opacidade para 0,7 Ok, vamos ver, no pequeno círculo Em seguida, temos que cuidar do círculo grande. Vamos em frente e, na verdade, vou duplicar esse código, alterar o nome da classe Precisamos aqui de um grande círculo com alturas de 50 Ram. Em seguida, temos que mudar a cor de fundo. Vou usar a cor 34 DC, depois 87. É uma cor verde. Então, precisamos do raio da borda, 50% também da posição absoluta Em seguida, precisamos colocar alguma posição e será 25%. Quanto à posição correta, vou dizer para 12%. Vamos nos livrar da opacidade Não precisamos disso no caso do círculo grande. Ok, então aqui já temos o grande círculo verde e todas as formas. Em seguida, temos que cuidar do conteúdo promocional. Quero dizer esse elemento aqui. Vamos selecionar o conteúdo promocional. Vou definir a largura para 60% e a altura será de 45 quadros Além disso, vou mudar o plano de fundo usando um gradiente linear Vamos usar a função de gradiente linear. Antes de tudo, vamos definir a direção da transição de cores. Nesse caso, vou usar dois, certo? Então, a primeira cor será 184 PB. Quanto à segunda cor, vou usar 13036 Aqui temos o conteúdo promocional. Vou colocá-lo aqui no centro. Para isso, precisamos mudar a posição. Vou definir a posição como absoluta. Então, para centralizar o elemento perfeitamente, precisamos da mesma técnica. Precisamos usar o canto superior esquerdo e transformar as propriedades. Vou definir a posição superior para 50% então a posição esquerda será 50%. Além disso, precisamos transformar com função de tradução e os valores serão -50% e novamente -50%. Agora, neste caso, o elemento está perfeitamente centralizado dentro da seção Em seguida, vou fazer a caixa um pouco arredondada. Para isso, precisamos de um raio de borda com o valor 1,5 de. Vou criar algum espaço dentro da caixa, mas precisamos de espaço apenas nos lados esquerdo e direito. Precisamos colocar com valor 0,5 quadro. Ok, depois disso, vou alinhar o conteúdo do conteúdo promocional, quero dizer esse elemento Para alinhar os elementos, vou usar a caixa S Flex Precisamos do Display Flex. Então eu vou mudar a direção porque vamos colocar os itens flexíveis verticalmente Portanto, temos que mudar a direção e será uma coluna. Em seguida, vou centralizar o conteúdo nas duas direções. Estou na horizontal e na vertical. E para isso precisamos justificar um centro de conteúdo e também um centro de itens de linha Vamos verificar o navegador. Como você pode ver, o conteúdo é colocado no centro. Em seguida, vou mudar o ponteiro de registro do cursor para que tudo esteja pronto Em seguida, temos que personalizar cada elemento aqui dentro do conteúdo promocional. Vou começar com o título. Vamos selecionar o conteúdo promocional, seguido pelo elemento de cabeçalho H one. Vou configurar a família telefônica para pensar em letra cursiva. Então, o tamanho do telefone será de quatro RAM. Além disso, vou aumentar o espaço entre as letras. Digamos que 2,2 Ram. Vou colocar o texto em maiúscula. Portanto, temos que usar a transformação de texto com o valor de capitalizar Finalmente, mude a cor, torne-a branca. O título é personalizado, mas, como você pode ver, precisamos alinhar o texto no centro Para isso, vou adicionar aqui o centro de texto. Agora, o texto é colocado no centro. Tudo bem, isso é tudo sobre o título. Em seguida, temos que tirar o botão. Vamos selecionar Conteúdo promocional, seguido pelo elemento botão. Primeiro de tudo, vamos definir dentro das alturas. A largura será de 25 Ram. Então, precisamos de alturas que serão de seis Ram. Vamos mudar a cor de fundo. Vou usar 34 DC. Quero dizer essa cor aqui, que usamos no caso do círculo grande. Ok, vamos verificar o navegador. Então aqui temos o botão. Na verdade, precisamos de algum espaço entre esses três elementos. Vou criar esse espaço usando margem. Vamos definir a margem para sete Ram na parte superior e depois zero no lado direito. Cinco quadros na parte inferior e zero no lado esquerdo. Agora temos espaço. Em seguida, temos que nos livrar da borda padrão e também fazer com que o botão seja arredondado. Precisamos de borda nenhuma e, em seguida, raio de borda com o botão Ram de valor cinco Parece bom, mas temos que cuidar da fonte. Vamos mudar o tamanho da fonte. Serão dois Ram. Então, precisamos que o peso da fonte esteja em negrito. Além disso, vou transformar o texto em maiúsculas, depois mudar a cor e torná-lo branco. Finalmente, precisamos de algum espaço entre as letras. Vamos configurá-lo para 0,2 Ram. E também mude o custo, torne-o um ponteiro. É isso aí, sobre o botão, parece muito bom. Finalmente, temos que cuidar do parágrafo. Então, vamos selecionar o conteúdo promocional. Vamos definir o tamanho da fonte para 2,5 Ram. Então, o peso do telefone será 300. Além disso, precisamos que a cor seja branca. Em seguida, vou colocar o texto em maiúscula. Precisamos de uma transformação de texto com o valor a ser capitalizado. E, finalmente, crie espaço entre as letras em 32,1 Ram. Ok, o parágrafo também parece muito bom e, na verdade, todos os três elementos do conteúdo promocional são personalizados. Em seguida, temos que criar a sombra. Quero dizer essa sombra aqui. Como você se lembra, criamos um elemento vazio chamado sombra promocional. Vou selecionar esse elemento. Precisamos de uma sombra promocional. Vamos ter dentro das peles, a largura será de 90% as peles serão de dez Vamos mudar a cor de fundo. Vou usar a cor 0525c. Aqui temos a sombra. Em seguida, temos que cuidar de sua posição. Vamos definir a posição absoluta. Então, precisamos que a posição inferior seja de -20%, a posição da sombra é alterada Em seguida, temos que arredondá-lo para o raio. Vamos configurá-lo para dez Ram. Mas então eu vou girar os elementos usando a função transform rotate x. E o valor será de 20 graus. O elemento está ligeiramente girado. Em seguida, temos que criar o efeito de desfoque. Para isso, precisamos filtrar com função blar e o valor será de três ram, o elemento ficará desfocado e agora temos que diminuir um pouco a opacidade Vamos definir a opacidade 2.7 Ok, a sombra está quase Em seguida, temos que criar o ambiente de três D. E o efeito da sombra será muito mais frio. Vou voltar ao código VS. Para criar os três ambientes D, temos que usar uma propriedade chamada Perspective. E vou adicioná-lo ao invólucro, que é a promoção do produto que configura o Perspective em 50 Ram Então, para aplicar essa propriedade à sombra, precisamos adicionar outra propriedade ao pai do elemento de sombra promocional. Nesse caso, o pai é o conteúdo promocional e temos que adicionar aqui o estilo de transformação. Com o valor preservado, três D. Agora, como você pode ver, temos aqui um resultado muito melhor e legal. Ok, agora é hora de criar o efeito de foco. Ao passar o mouse. Vou mover o conteúdo promocional para o usuário. Esse efeito aqui se aproxima do usuário. Temos que fazer isso usando a propriedade de transformação. Em primeiro lugar, vou adicionar aqui, mouse sobre o conteúdo do Romo Então, precisamos nos transformar. Se eu usar aqui apenas a função Translate Z, então vamos sobrescrever esse código aqui Precisamos pegar essa função e adicioná-la aqui. E temos que adicionar aqui função Translate Z com o valor dez. Para que o efeito funcione bem como convidado, temos que tornar esse efeito Para isso, precisamos de uma transição com os valores a e 0,5 segundo. Agora temos fatos legais e legais sobre quem. Em seguida, precisamos alterar o plano de fundo da promoção do produto. Além disso, precisamos mover essas formas também. Para fazer isso, vou usar o script Java. Você pode pensar que podemos fazer isso usando CSS. Mas depois de selecionar os elementos, precisamos mudar o estilo do elemento pai, que é a promoção do produto. Não podemos fazer isso usando CSS. É por isso que vou usar Javascript. Na verdade, vamos criar um novo arquivo Javascript dentro da pasta JS. Vou chamá-lo de produtos JS. Em seguida, precisamos vincular esse elemento ao arquivo HTML. Vamos duplicar esse código aqui e alterar o nome do arquivo Serão os produtos S. Vou mover esse arquivo aqui. Antes de tudo, precisamos selecionar dois elementos diferentes. O primeiro é o invólucro. Vamos criar uma nova variável e chamá-la de produtos. Vou selecionar esse elemento usando o método seletor de consultas Vamos especificar aqui o nome da classe. Vamos duplicar essa linha. A segunda variável será o conteúdo promocional. Vamos mudar o nome da classe. Precisamos aqui de conteúdo promocional. Depois disso, adicionarei o ouvinte do evento ao conteúdo promocional Não precisamos de pontos, precisamos de conteúdo promocional. Na verdade, precisamos de conteúdo aqui. Como eu disse, vou adicionar esses elementos no ouvinte do evento e o evento passará o mouse sobre É a mesma coisa que o efeito de passar o mouse. Em seguida, temos que passar aqui a função abc, que será executada quando passarmos o mouse sobre os elementos, quero dizer, o conteúdo promocional Vou adicionar uma nova classe ao elemento promocional dos produtos. Em seguida, usaremos essa nova classe no arquivo CSS e definiremos o novo estilo. Vou adicionar aqui a propriedade da lista de classes promocionais de produtos e, em seguida, adicionar o método. Vou chamar o nome da classe de animate. Temos que adicionar à promoção dos produtos ao passar o mouse. Mas, uma vez que passamos o mouse, temos que remover esse nome de classe do elemento promocional do produto. Portanto, vou duplicar esse código aqui. Em eventos com o mouse out, temos que remover a animação de classe dos produtos que a promoção pode vender Isso é tudo sobre o roteiro do governo. Em seguida, temos que voltar ao arquivo CSS e encontrar a promoção de produtos. Vou selecionar esse elemento usando a classe animate. Precisamos de uma animação seguida de promoção profissional do produto Temos que mudar a cor de fundo. Vou usar o valor RGBA e será dez. 59, depois 156, e a opacidade será 0,7. Além disso, use a transição para efeitos mais suaves, precisamos aqui de todos os 0,3 segundos Se eu passar o mouse sobre o conteúdo promocional , o plano de fundo será alterado Tudo funciona bem. Em seguida, temos que cuidar das formas. Vou selecionar Promo Retangle. Com a classe animate, precisamos de animações seguidas pelo retângulo promocional ao passar o Vou aumentar a opacidade dos elementos. Digamos que 2.8 Além disso, precisamos aumentar o tamanho do retângulo usando a função de escala Mas além da função de escala, temos que adicionar aqui a função Z de rotação também Para evitar sobrescrever o código, vou pegar esse código aqui Adicione também aqui a função de escala. Vou aumentar a escala do retângulo. Vamos fazer com que seja 1.4. Além disso , precisamos de uma transição. Vai ser tudo de 0,3 segundo. Ok, vamos passar o mouse sobre o conteúdo do Romo. Como você pode ver, a escala do retângulo aumenta ao passar o mouse Além disso, a opacidade do elemento também aumenta. Tudo bem, vamos passar para as próximas formas. Quero dizer, temos que cuidar do pequeno círculo. Selecione-o usando a animação da classe. No caso do círculo pequeno, vou aumentar a opacidade para Além disso, vou aumentar a escala. Vamos fazer com que seja 1.4 também. Vamos adicionar aqui a pesquisa de transição de 0,3 segundo. Como você pode ver, também temos um efeito agradável e interessante com o pequeno círculo. Em seguida, temos que assumir a terceira forma, que é esse grande círculo aqui. Vamos selecionar um círculo grande com a classe animada. No caso do círculo grande, só precisamos aumentar a escala. Vamos configurá-lo para 1,4 e também adicionar a chamada de transição de 0,3 segundo. Tudo bem, então tudo parece muito bom. A única coisa que temos que fazer é tirar a sombra. Também temos que mudar a sombra ao passar o mouse. Vamos encontrar a sombra e depois selecioná-la. Com a animação da classe ao passar o mouse, vou aumentar a altura Serão 13 Ram. Vou mudar a posição inferior. Digamos que dois -15% , então eu vou mudar, também o efeito polar que precisamos aqui, 2,5 Ram Finalmente, vamos alterar a opacidade, torná-la 0,9. Vou adicionar aqui a transição p 0,3 segundo Se eu passar o mouse sobre o conteúdo , a sombra mudará Na verdade, temos aqui um efeito agradável e legal. Ok, com a seção promocional de produtos, terminamos. A única coisa que precisamos fazer no caso da página de produtos é adicionar aqui o rodapé Quero dizer, o pé em que o adicionamos à página do cliente, lembre-se de que, para fazer isso basta copiar o rodapé daqui e colá-lo Na verdade, já tenho aqui o rodapé. Não precisávamos copiar e colar, só precisávamos nos livrar desse atributo a partir daqui. Acabei de esquecer que temos aqui o rodapé. Agora, tudo deve funcionar bem. Podemos dizer que com a página do produto terminamos. Tudo parece e funciona bem. Ok, vamos falar sobre a página do produto. Em seguida, temos que cuidar da página de contato. Vamos passar para a próxima palestra. 55. Como criar a marcação HTML para a página de contato: Na palestra anterior, terminamos de trabalhar na página do produto Parece muito bom e legal. Agora temos que seguir em frente e começar a cuidar da próxima página, que é a página de contato. Vamos dar uma olhada no projeto finalizado. Aqui temos a página de contato. Consiste em um cabeçalho em que temos dois cabeçalhos diferentes Além disso, você pode ver aqui duas partes diferentes. No lado esquerdo, você pode ver alguns campos de entrada diferentes. Podemos entrar em contato com a equipe de suporte. Quanto ao lado direito, você pode ver aqui um suporte técnico, podemos conversar com o suporte. E você também pode ver aqui algumas opções diferentes. Também temos aqui um círculo agradável e legal por trás da seção da equipe de suporte. Ok, isso é sobre a seção de contato. Vamos ao código do VS e organizar os arquivos de trabalho para uma nova página. Vou fechar esses arquivos. Em seguida, vou criar um novo arquivo na pasta HTML. Será contato com Html. Além disso, vou criar um arquivo de contatos. Em seguida, vou mover esse arquivo aqui no lado esquerdo. Em seguida, vamos copiar todo o conteúdo no arquivo HTM do produto e colá-lo aqui Então eu vou fechar esse arquivo. Precisamos mudar o nome do arquivo CSS. Vai ser Contact CSS. Em seguida, temos que remover a seção do produto. Esta seção aqui. Vamos nos livrar disso. Além disso, vou esconder o rodapé por um tempo e me livrar desse link daqui, para que tudo esteja pronto Vamos para a página de contato. Aqui temos a página vazia com apenas a navegação. Nesta palestra, vou criar o HTM Male Markup para a Vamos instituir seus comentários para contato. Em seguida, vou abrir os elementos da seção com o nome da classe contact dentro do elemento de seção que precisamos, que será o wrapper de contato Ele envolverá todo o conteúdo desta seção. Em seguida, vou inserir aqui Desenvolvimentos vazios, que serão um círculo de contato, quero dizer esse círculo aqui. Depois disso, precisamos criar o cabeçalho. Então, vou abrir a tag p com o cabeçalho de contato do nome da classe , no qual vou inserir dois cabeçalhos diferentes O primeiro será H, um elemento de cabeçalho com o contato de texto. Quanto ao segundo título, será H três elementos de cabeçalho. Eu vou fazer um seguro. Se você tiver alguma dúvida, sinta-se à vontade e entre em contato. É isso sobre o cabeçalho. Em seguida, precisamos garantir de você, que será do lado do conteúdo de contato, esse elemento Teremos duas partes, formulário de contato e o invólucro do suporte de contato Nessas duas partes, vamos abrir uma etiqueta profunda, que será a embalagem do formulário de contato Vou inserir o símbolo do Google Material. Vamos ao navegador e pesquisar os símbolos do Google Material. Vou pesquisar por um ícone chamado grupo. Aqui está, na verdade, vou selecionar arredondado. Vamos copiar o elemento span daqui e colá-lo aqui. Vou verificar se o ícone é exibido. Então, como você pode ver, temos aqui o ícone. Ok, em seguida, precisamos quatro elementos de cabeçalho e será contato. A equipe de suporte. Depois disso, vou entrar no seu parágrafo com o texto, se você tiver alguma dúvida, envie-nos um e-mail. Depois do parágrafo, vou abrir os elementos do formulário. Dentro dos elementos do formulário, teremos algumas entradas diferentes Vou abrir a entrada com o texto do tipo, e também precisamos aqui de um atributo de espaço reservado Coloque o nome do texto. duplicar esse código duas vezes A próxima entrada será para e-mail, precisamos alterar o tipo e também o atributo do espaço reservado, que será o endereço de e-mail Quanto ao terceiro elemento de entrada, vou pular aqui, digitar texto Quanto ao atributo placeholder, vou inserir seu assunto Depois dos elementos de entrada, precisamos da área de texto, ela terá o atributo de espaço reservado, o texto será sua mensagem Então, finalmente, precisamos aqui de um botão com botão de tipo como o texto do botão. Vou fazer com que você envie uma mensagem. Ok, é isso mesmo. Sobre o invólucro do formulário de contato. Em seguida, vou criar a segunda parte, que será o invólucro de suporte de contato Vou inserir aqui novamente o símbolo do Google Material. Vamos ao site e buscamos o ícone chamado construção. Bem, precisamos pegar esse ícone. Vamos copiar isso. Painel fechado, nesta aba Vamos inserir aqui o painel e, em seguida, verificar o navegador Aqui temos o segundo ícone após o elemento span. Vou inserir seus quatro títulos com o texto Suporte técnico. Em seguida, teremos aqui um parágrafo com o texto. Se precisar de ajuda, você pode conversar diretamente com nossa equipe de suporte. Depois disso, vou inserir seu botão com o botão de digitação. Vou adicionar aqui o nome da classe. Vai ser um chat BTN. Quanto ao texto, vou inserir o Chat com suporte. Em seguida, vou inserir a tag p, que será a lista de suporte. Vou inserir aqui alguns padrões diferentes. Vamos abrir a tag do botão com os tipos. Também vou adicionar aqui o nome da classe. Será um suporte mínimo para PTN. O primeiro PTN. O primeiro padrão será: antes, como comunidade, teremos quatro padrões diferentes. Então, vou duplicá-lo três vezes. Em seguida, vou alterar o conteúdo de cada padrão. O segundo é Procurar documentação. Então temos aqui, junte-se ao grupo do Facebook. Finalmente, precisamos aqui, explorar, explorar o bloco. Acho que é sobre a marcação nula da nossa seção de contatos Espero que tudo esteja correto. Veremos que, quando começarmos a estilizar esta seção, teremos aqui todos os elementos. Eles estão preparados e agora temos que estilizar esta seção. Para isso, vamos passar para a próxima palestra 56. Seção de contato de estilo: Na aula anterior, criamos marcação HTML para a seção de contato Agora, como eu disse, temos que estilizar esta seção mais uma vez. Vamos dar uma olhada no projeto final. Essa é a aparência da página de contato. Temos aqui o cabeçalho e duas partes diferentes. Vamos personalizar todos os elementos. Vamos ao código do VS e inserir novos comentários no arquivo CSS. Vai ser um contato. Em seguida, vou selecionar o elemento da seção que tem o nome da classe contact. E vou definir com altura, a largura será de 100%. Quanto à altura, vou fazer com que seja de 150 a altura da janela de visualização Quero dizer, um 50% da janela de visualização. E também vou criar algum espaço na parte superior usando a margem superior 30 m. Como você pode ver, esses ladrilhos são aplicados. Na verdade, vamos mudar a barra de rolagem. Se dermos uma olhada no projeto finalizado, você verá que temos aqui uma barra de rolagem azul. Vou copiar o código do arquivo de produtos. Precisamos desse código. Vou pegar e colar aqui no topo. Agora, como você pode ver, a barra de rolagem foi alterada. Ok, em seguida, vou cuidar do invólucro do conteúdo. Vou definir dentro das alturas, ambas serão 100%. Além disso, vou alinhar o conteúdo usando uma caixa de linho Precisamos exibir linho. Temos que mudar a direção porque vamos alinhar os itens flexíveis verticalmente Precisamos que a direção seja uma coluna. Além disso, vou alinhar os itens no centro. Ok, então, como você pode ver, o conteúdo da seção de contatos está alinhado Em seguida, vou cuidar do círculo. Estou nesse círculo aqui. Vamos selecionar o círculo de contato. Vou definir com alturas. Vamos definir com 290 m. Em seguida, a altura também será de 90 Ram Vamos criar esse elemento em torno dele, então precisamos delimitar o raio com o valor de 50%. Em seguida, vou mudar o plano de fundo Vou usar gradiente linear. Em primeiro lugar, conforme definido, a direção, será duas, certo? Quanto às cores, a primeira será 651f. Quanto à segunda cor, vou torná-la transparente. E também precisamos aqui o valor percentual transparente seja 30%. Aqui temos o círculo com um efeito de gradiente linear Eu vou mudar a posição do elemento. Vamos definir a posição como absoluta. Então, precisamos da posição relativa, ou do elemento pai, que é o invólucro de contato Vamos posicionar o elemento de acordo com o elemento pai de acordo com o invólucro de contato Então, precisamos aqui da posição relativa. Em seguida, vou definir a posição inferior, que será de 12%. Quanto à posição esquerda, vou defini-la como 20%. Finalmente, vou diminuir a opacidade do círculo Vamos fazer com que seja 0.2 O círculo está bem posicionado. Em seguida, vou cuidar dos títulos. Vamos selecionar o cabeçalho do contato. Vou alinhar o texto no centro usando o centro de alinhamento de texto Como você pode ver, o texto é colocado no centro dos dois títulos. Vou começar a estilizar o primeiro título. Vamos selecionar o cabeçalho de contato H one. Vamos mudar a família telefônica. Vai ser Lee em letra cursiva. Em seguida, vou definir o tamanho do telefone. Vamos configurá-lo para seis Ram. Além disso, precisamos de espaçamento entre letras. Vou abrir espaço entre as letras 0.2 Ram e também mudar a cor do título, que será 26353 Ok, como você pode ver, o primeiro título parece muito bom. Em seguida, temos que cuidar do segundo título. Vamos selecionar o cabeçalho do contato seguido pelos três elementos do cabeçalho H. Vamos aumentar o tamanho do telefone. Serão três rodadas. Então eu vou mudar o peso do telefone. Vamos configurá-lo para 300. Vou mudar a cor do título e será 567599 Em seguida, precisamos criar algum espaço na parte superior e também na parte inferior. Vou usar margem e serão duas RAM na parte superior. O zero no lado direito, 15 Ram na parte inferior e depois zero no lado esquerdo. Ok, aqui temos o segundo título. Ambos parecem muito bonitos. Em seguida, temos que cuidar do conteúdo do contato. Quero dizer, essa parte aqui. Vamos continuar e selecionar Conteúdo de contato. Vou colocar as duas partes do conteúdo do contato lado a lado, horizontalmente E para isso eu vou usar o livro flexível. Como você pode ver, os dois lados são colocados horizontalmente. Em seguida, vou selecionar a primeira parte que é a embalagem do formulário de contato. Vamos definir dentro das alturas. A largura será de 45 Ram. Então precisamos de altura , será 78 Ram. E então eu vou mudar a cor de fundo. Vai ser branco. Para tornar o elemento claramente visível, vamos definir a sombra da caixa. Precisamos de 01 Ram, dez Ram e a cor RGBA Os valores serão 130162, depois 235, e a opacidade será 0,4. Aqui temos a primeira parte, o lado esquerdo do conteúdo do contato Na verdade, precisa colocar o círculo atrás desses elementos. Para isso, vou usar uma propriedade de índice. Vamos definir o índice para dez e depois verificar o navegador. Agora, como você pode ver, o círculo acabou atrás do elemento. Em seguida, vou criar algum espaço dentro da caixa usando preenchimento. O preenchimento será de quatro nos lados superior e inferior e, em seguida, dois Ram nos lados esquerdo e direito Tudo bem, depois disso eu vou fazer os cantos da caixa arredondados. Para isso, precisamos de um raio de borda de um Ram. Em seguida, vou criar espaço nos lados esquerdo e direito do elemento usando a margem. Precisamos aqui de 0,3 Ram. Além disso, vou alinhar o texto no centro que fica ao redor da embalagem Na verdade, como você pode ver, temos aqui um pequeno problema. A navegação está acabando por trás desse elemento. Eu vou resolver esse problema. Vamos abrir o estilo. Vamos arquivar e descobrir a barra de navegação que temos aqui é a propriedade do índice, e eu vou aumentar o valor. Vamos configurá-lo para 100. Agora temos aqui o mesmo problema. Vamos definir o índice para 1.000 Bem, agora o problema está resolvido. Ok, vamos seguir em frente e continuar estilizando a seção de contexto Agora, vou cuidar do ícone, que é um símbolo material do Google. Vamos selecionar o invólucro do formulário de contato, seguido pelo elemento Pan Em seguida, aumente o tamanho do telefone. Vai ser um grama. Além disso, vou mudar a cor do ícone e vou dizer 2842 Como pode ver, o ícone parece muito bom. Em seguida, temos que cuidar do título. Vamos selecionar o invólucro do formulário de contato seguido pelo elemento de quatro cabeçalhos Vou configurar a família de telefones para usar letras cursivas, depois vou definir o tamanho do telefone para 1,6 Então precisamos do peso do telefone, será 300. Em seguida, vou transformar o texto em maiúsculas. Em seguida, vamos mudar a cor do texto. Vou usar a mesma cor aqui, vamos pegá-la daqui. E adicione aqui um sinal de libra. Então eu vou aumentar o espaço entre as letras. Vamos configurá-lo como 2.1 Ram. Finalmente, vou criar algum espaço usando margem. Precisamos de margem, três RAM na parte superior. Então temos zero no lado direito, um Ram na parte inferior e zero no lado esquerdo. Aqui temos o título, parece muito bom. Em seguida, temos que cuidar do parágrafo aqui. Vou selecionar o invólucro do formulário de contato. Em primeiro lugar, vamos definir o tamanho, será 1,8 Ram. Então eu vou mudar a cor. Vamos fazer com que seja 5646. Altere o peso da fonte. Vamos mover essa linha para cima, então precisamos marchar na parte inferior Vamos configurá-la para uma serra de câmera de sete tiragens que fica acima do parágrafo. A parte superior da embalagem parece muito bonita. Em seguida, temos que cuidar do formulário, quero dizer, esses campos de entrada. Então, vamos selecionar o invólucro do formulário seguido pelos elementos do formulário Vou usar o Flex box para alinhar os campos de entrada, precisamos do Display Então, para colocar os elementos de entrada verticalmente em uma coluna, precisamos mudar a direção da caixa flexível e configurá-la como Como você pode ver, os campos de entrada são colocados em uma coluna verticalmente Em seguida, vou personalizá-los. Vou definir o wrapper seguido pela entrada t. Em seguida, selecionaremos a área de texto também Primeiro de tudo, vamos definir um pouco. Vai ser 100% Então eu vou mudar o espaço I, então eu vou criar algum espaço entre as entradas Vamos definir a margem para dois Ram. E depois zero, altere a cor de fundo das entradas e defina-a para 024 Vamos verificar o navegador. Ok, em seguida, vou aumentar o espaço dentro das entradas Para isso, vou usar pudim. Será um Ram em todos os lados, exceto no lado esquerdo. Serão dois Ram, quero dizer dois Ram no lado esquerdo. Como você pode ver, temos espaço dentro das entradas. Em seguida, vou me livrar dessa borda padrão. Vamos definir a borda como nenhuma. Vou fazer os cantos um pouco arredondados usando o raio da borda com o valor de 0,5 quadro Em seguida, vamos definir o tamanho da fonte para 1,5 quadro e também alterar o peso da fonte Eu vou fazer 300, ok? Então, como você pode ver, os campos de entrada parecem muito bons. Em seguida, temos que definir a altura separadamente para as entradas e para o texto Aa, porque precisamos de alturas diferentes para esses elementos Vamos selecionar o invólucro do formulário de contato, depois as entradas e definir a altura para cinco Em seguida, vou duplicar esse código e alterar a entrada para o texto Aa Precisamos que a altura seja de dez Ram. Além disso, vou adicionar aqui mais uma propriedade. É chamado de tamanho Re e eu vou fazer com que não seja nenhum. Não podemos mais redimensionar a área de texto. Ok, então eu acho que esses campos de entrada parecem muito bons. Em seguida, temos que cuidar dos atributos do espaço reservado. Vou mudar a cor do atributo de espaço reservado para entradas e também para a área de texto Vou pegar esse seletor a partir daqui. Depois, vamos copiar e colar. Vou adicionar aqui uma pseudoclasse de espaço reservado, quero dizer, pseudo quero dizer, pseudo Em seguida, vou adicionar aqui a propriedade de cor. E a cor, vai ser 0335. Como você pode ver, os atributos do espaço reservado mudaram de cor e estão muito bonitos Em seguida, temos que cuidar do botão. Vamos selecionar Contact Form Wrapper, seguido pelo elemento Boson Vou mudar a altura , serão cinco Ram. Em seguida, vou mudar o plano de fundo usando um gradiente linear A direção será de dois direitos. Então temos que inserir aqui duas cores diferentes. O primeiro será o C40c. Quanto à segunda cor, vou torná-la 85, na verdade 852 A. A cor mudou Quero dizer, a cor de fundo agora é um gradiente linear Vou me livrar da borda padrão, vamos defini-la como não e também tornar o botão arredondado usando o raio da borda Serão cinco Ram. Agora temos aqui resultados muito melhores. Vou mudar a fonte. Vou personalizar a fonte e não alterar, definir o tamanho do telefone para 1,4 Ram. Então, o peso do telefone ficará alto. Em seguida, vou transformar o texto em por caixa. Também aumente o espaço entre as letras. Faça com que seja 0,1 Ram. Mude a cor, vai ser branco. E, finalmente, precisamos de um ponto de cursor que fique sobre a primeira parte do conteúdo do contato, como temos que ver aqui na segunda parte. Vamos selecionar o invólucro de suporte de contato. Vou definir largura e altura. A largura que vai girar aqui será de 45 Ram Então precisamos de altura, vou fazer com que seja 67 Ram. Em seguida, mude a cor do fundo, torne-a branca. Além disso, precisamos de sombra de caixa para tornar o elemento visível. A sombra da caixa será 0110 Ram como cor. Vou inserir essa cor aqui. Aqui temos a segunda parte que vou adicionar aqui para o raio , será uma RAM Então precisamos de margem no lado esquerdo e direito , serão três Ram. Além disso, é uma linha de texto no centro. Ok, depois disso, vou pegar aqui o ícone. Vamos selecionar o invólucro de suporte de contato, seguido por este painel que precisamos aqui, tamanho do telefone, que será de oito RAM Então eu vou adicionar aqui a cor. A cor será 6797 FF. Na verdade, temos aqui algum problema que precisamos aqui. Entre em contato com o invólucro de suporte. Agora, o problema está resolvido. Na verdade, acho que está faltando alguma coisa aqui porque não temos espaço aqui. Precisamos de espaço e tivemos que fazer isso usando preenchimento. Falta aqui. Preenchimento com valores de quatro Ram e depois dois Ram. Agora, o problema deve ser resolvido. Sim, agora temos aqui o mesmo resultado. Eu vou cuidar do título. Vamos selecionar invólucro de suporte de contato seguido pelo elemento de cabeçalho H four Vou configurar a família telefônica para pensar em letra cursiva. Então, o tamanho do telefone será de 1,6 mm. Mude os pesos do telefone , vai ser 300. Em seguida, vou transformar o texto em maiúsculas. Então, vamos mudar a cor. Eu vou fazer com que seja 6797f. Vamos verificar o navegador, o título parece bom. Em seguida, vou aumentar o espaço entre as letras. Vamos fazer com que seja 0,1 Ram. Além disso, precisamos de espaço usando margem. A margem será de três RAM na parte superior, zero no lado direito, uma RAM na parte inferior e depois zero no lado esquerdo. Ok, o título parece muito bom. Em seguida, temos que pegar aqui o parágrafo. Vamos selecionar invólucro de suporte de contato seguido pelo elemento O tamanho da fonte será de 1,8 Ram. Então teremos aqui o peso da fonte. Serão 300. Vamos ver a cor. Eu vou fazer com que seja 56460. Então, precisamos de margem na parte inferior. Vamos configurá-lo para quatro Ram. Isso é sobre o parágrafo. Em seguida, temos que cuidar da cabana BTN. Quero dizer esse botão aqui. Vamos selecionar a cabana BTN. Vou definir a largura para 100% e a altura será cinco. Vou mudar o plano de fundo. Vamos usar novamente, gradientes lineares. A direção será de dois direitos para as cores. Vou usar 651f. A segunda cor, será 48 FF. Vamos verificar o fundo aqui. Nós temos o fundo. Vou me livrar da borda padrão. Também precisamos aqui de um raio de borda com valor de cinco M. Vamos verificar a parte inferior Parece muito bom. Vamos pegar aqui o pontSi, vou ajustar o tamanho do telefone para 1,4 M. Então vai ficar em negrito Além disso, vou fazer isso por caixa, depois vou aumentar o espaço entre as letras. Vamos configurá-lo como 2.1 Ram. Mude a cor, torne-a branca. Então, como você pode ver, a parte inferior parece muito boa. A única coisa que preciso fazer é aumentar o espaço na parte inferior. E também temos que fazer o ponteiro do cursor. Então, vamos definir a margem inferior em cinco Ram. E depois o ponteiro do cursor. Opa. OK. Na verdade, sim, cursor. Bem, temos aqui um pequeno problema. Acho que também precisamos da propriedade do índice Z para essa parte, porque acho que o círculo está se sobrepondo a essa Vou adicionar aqui, não aqui, mas aqui. Índice com o valor dez. Agora vamos verificar. Como você pode ver, o problema está resolvido. Tudo bem, em seguida, temos que cuidar desses padrões aqui, vamos estilizá-los dessa maneira. Vamos selecionar o wrapper, que tem uma lista de suporte para nomes de classes Vou usar o Display Flex, porque vamos alinhar esses botões usando Vou alinhá-los verticalmente na coluna. Precisamos que a direção flexível seja uma coluna. Tudo bem, agora vamos personalizá-los. Vamos continuar e selecionar Lista de suporte, seguida pelo elemento botão. Vamos definir a altura, torná-la 4,5 Ram. Além disso, precisamos de espaço entre esses botões. Precisamos que a margem seja de um Ram na parte superior e inferior e zero nos lados esquerdo e direito. Altere também a cor do plano de fundo. Use aqui, cor F245. Vamos ver os resultados a seguir. Vou me livrar da borda padrão. Vamos definir a borda como nenhuma. Precisamos do raio da borda para tornar os cantos arredondados. O raio da fronteira será de quatro Ram. Então eu vou cuidar dos telefones. Vamos definir o tamanho do telefone para 1,4 Ram. Vou transformar o texto em maiúsculas. Então a cor será quatro A, não a, mas oito A F. Então precisamos deixar o espaçamento, vamos configurá-lo em 2,1 E, finalmente, precisamos do indicador do curso, ok? Como você pode ver, tudo parece muito bom. E, na verdade, com esta página, estamos quase terminando. A única coisa que precisamos fazer é adicionar aqui o rodapé Para isso, precisamos apenas nos livrar dos atributos que adicionamos aqui. Quero dizer, o atributo aqui, vamos removê-lo. Aqui temos o rodapé, na verdade, com a página de contato. Nós terminamos. Em seguida, temos que criar a próxima página do nosso projeto. É a página da conta. Para isso, vamos passar para a próxima palestra. 57. Como criar a marcação HTML para a página da conta: Na palestra anterior, terminamos de trabalhar na página de contato Como você pode ver, parece muito bom. E agora temos que continuar trabalhando na próxima página, que é a página da conta. Vamos dar uma olhada no projeto finalizado. Aqui temos a página Conta. Como você pode ver, ele consiste em cabeçalho e temos aqui os campos de entrada. Quero dizer, o formulário com ícone e também com o botão Enviar. Abaixo você pode ver outro fundo. Podemos ver aqui o círculo, que é o fundo bonito e legal do formulário. Abaixo, você pode ver o rodapé padrão. Ok, então é isso sobre a página da conta. Vamos ao código do VS e vou organizar os arquivos de trabalho. Precisamos criar um novo arquivo HTML na pasta HTML, conta HTML. Em seguida, vou criar um novo arquivo CSS na pasta CSS. Vamos até o arquivo HTML do contato e copiemos o código inteiro. Vou colar aqui. Vamos fechar esse arquivo. Vou fazer aqui algumas mudanças. Precisamos mudar o nome do arquivo CSS , serão contas. Além disso, vou me livrar da seção de contatos, então precisamos esconder o rodapé Vamos fazer com que seja escondido. Ok, acho que vou mover esse arquivo para o lado direito. Vamos verificar se o navegador acessa a página da conta. Aqui temos a página da conta, que agora está vazia. Só temos aqui a navegação. Vou criar a marcação HTML. Vamos inserir seus novos comentários para a conta. Vou abrir a tag de seção com uma conta de nome de classe. Em seguida, precisamos de desenvolvimentos, que serão um invólucro de contas Então, a primeira coisa que vou inserir aqui é o círculo da conta. Estou no fundo do formulário. Em seguida, vou inserir seu cabeçalho. Ele consistirá em dois elementos de cabeçalho. O primeiro será o cabeçalho H one com o espaço do membro do texto. Quanto ao segundo título, quero dizer os três elementos do título H, precisamos aqui para gerenciar sua conta, baixar produtos e conversar conosco. Além disso, precisamos aqui de 2047 que está sobre o cabeçalho da conta Em seguida, vou abrir outro elemento profundo com o invólucro do formulário da conta do nome da classe A primeira coisa que vou inserir aqui serão os elementos de extensão, quero dizer, o símbolo do Google Material. Vamos até o navegador e depois visitemos o site. Vou pesquisar o ícone chamado verificação de pessoa. Na verdade, esse é o ícone. Vou selecionar arredondado. Em seguida, pegue o elemento span e cole-o aqui. Vou verificar o navegador. Se o ícone for exibido, temos aqui o ícone. Em seguida, adicionarei aqui quatro elementos que teremos com o nome da classe. Entradas da conta. Vou inserir sua tag de entrada com o texto do tipo e com o atributo placeholder, será nome de usuário Em seguida, precisamos de outra entrada para a senha. Vou mudar o tipo, vai ser a senha. E também precisamos alterar o atributo de espaço reservado. Vou inserir sua senha. Depois disso, vou abrir outra tag profunda e será a verificação da conta. Então, vou inserir aqui a tag de entrada com a caixa de seleção de tipo. Além disso, vou adicionar aqui o atributo ID. Vai ser uma verificação da conta. Em seguida, precisamos de um rótulo dentro de quatro atributos. Vou inserir o mesmo valor, quero dizer, verificar a conta, o valor que usamos para o atributo ID. Vamos inserir aqui, lembre-se de mim aqui. Os mesmos valores para ID e quatro atributos porque, uma vez que clicamos no rótulo, a entrada deve ser verificada. É por isso que usamos aqui os mesmos valores. Em seguida, vou interferir no botão de digitação como texto. Vou interferir no login. Depois do botão, vou inserir parágrafo com o texto, esqueci o seu Em seguida, precisamos abrir o elemento span, nome de usuário ou, novamente, girar o Passport. Nós agrupamos essas palavras com elementos span porque elas serão links. Vou adicionar aqui um ponto de interrogação. Ok, isso é tudo sobre os elementos do formulário. Em seguida, temos que adicionar mais um botão após esse desenvolvimento. Esse é o botão de abertura com os tipos. Além disso, vou adicionar aqui o nome da classe. Vamos chamá-lo de PTN porque ele deve ser colocado fora do formulário. O texto. Ainda não vou apresentar um membro. Participe hoje mesmo. Ok, então eu acho que é isso sobre a marcação HTML. Tudo está pronto. Vamos verificar o navegador. Temos aqui todos os elementos da página da conta. Em seguida, temos que personalizar esses elementos para isso. Vamos passar para a próxima palestra. 58. Seção de conta de estilo: Na aula anterior, criamos a marcação HTML para a página da conta Agora, acho que temos que estilizar esses elementos. Mais uma vez, vou mostrar a versão final do nosso projeto. Aqui temos a página da conta. Consiste em cabeçalho e, em seguida, temos um formulário com esse fundo circular e, abaixo, você pode ver o rodapé Vamos ao código VS e inserir aqui novos comentários para a conta. Em seguida, vou selecionar o elemento da seção com uma conta de nome de classe. Em primeiro lugar, conforme definido com e altura, a largura será 100%. Quanto à altura, vou torná-la 120. Altura da janela de visualização. Também precisamos de espaço na parte superior usando a margem. Top 30, ok? A largura e a altura são aplicadas ao elemento. Na verdade, você pode ver aqui a barra de rolagem. Se dermos uma olhada no projeto finalizado, você verá que temos aqui uma rolagem azul. Vamos mudar isso. Vou acessar o arquivo CSS do contato e pegar esse código aqui, na página de contato. Temos barra de rolagem azul. Vou copiar esse código e colá-lo aqui. Está bem? Como você pode ver, a barra de rolagem mudou sua cor de fundo. Em seguida, vou selecionar o invólucro da conta. Precisamos definir dentro da altura. Vamos definir os dois para 100% e também vou usar o Flex Box para alinhar os elementos Precisamos do display Flex. Então, temos que mudar a direção porque temos dois elementos alinhados verticalmente Portanto, precisamos de uma coluna de direção flexível e, em seguida, de um centro de item de linha Ok, agora eu vou cuidar do círculo. Quero dizer esse círculo aqui. Vamos voltar ao código VS e selecionar um círculo de contagem. Vamos definir dentro das alturas. A largura será 70. Quanto à altura, também vou fazer 70 m. Então, vamos mudar o plano de fundo. Vou usar gradiente linear. A direção será a segunda à esquerda. Quanto às cores, a primeira cor será 651f. Quanto à segunda cor, vou torná-la transparente. Aqui temos o elemento que, no momento, não é um círculo. Precisamos definir o raio da borda 50% Agora o elemento tem a forma do círculo Em seguida, vou cuidar de sua posição. Precisamos de uma posição absoluta. Em seguida, vou adicionar aqui a posição relativa. Porque vamos posicionar o elemento de acordo com seu elemento pai. No nosso caso, o elemento pai é um invólucro de contagem. A posição inferior será de 20% Quanto à posição esquerda, vou fazer 33% Finalmente, vamos diminuir a opacidade, vamos diminuir a opacidade, fazer com que seja 0,2 Aqui temos Em seguida, vou cuidar do cabeçalho. Na verdade, o cabeçalho será semelhante ao cabeçalho da página anterior, quero dizer, a página de contato. Para evitar escrever o mesmo código, vou abrir arquivo CSS de contato e pegar o código do cabeçalho. Vamos colar aqui. E mude os nomes das classes. Precisamos da sua conta. Vamos verificar o navegador. Como você pode ver, o cabeçalho parece muito bom. Em ambos os títulos, a única coisa que vou fazer é diminuir a margem na parte inferior Vamos configurá-lo para 12 Ram. Ok, é isso mesmo, sobre o cabeçalho. Em seguida, vou cuidar do formulário. Vamos selecionar o invólucro. Quero dizer, um invólucro de formulário de contagem antes de tudo, defina sua largura Serão 50 gramas. Então precisamos de altura. Também vou configurá-lo para 50 Ram. Em seguida, vou definir a cor de fundo para branco para tornar esse amêndoa visível com clareza Vou definir o box shadow para 01 Ram. Oito RAM. Quanto à cor que vou usar, precisamos aqui de zero, depois de um Ram. E o valor RGBA 130-16-2235 e a opacidade 0,3 Aqui temos o invólucro agora, ele acabou atrás do e a opacidade 0,3 Aqui temos o invólucro agora, ele acabou atrás do círculo. Vou corrigir isso usando a propriedade de índice Z. Vamos configurá-lo para dez. Agora , o problema está resolvido. Em seguida, vou fazer com que os cantos da embalagem sejam arredondados Vamos definir o raio da borda para um Ram. Vou alinhar os elementos dentro do invólucro usando a caixa flexível Precisamos exibir linho. Então, para alinhar os elementos verticalmente, vou definir a direção da flexão para a Além disso, precisamos de um centro de itens de linha. Ok, os elementos estão alinhados. Em seguida, vou cuidar do elemento giratório I no ícone. Então, vamos selecionar Conta do invólucro seguido pelos elementos do painel Na verdade, se dermos uma olhada no código HTML, você verá que temos aqui alguns elementos de extensão diferentes. Precisamos selecionar esse elemento de extensão aqui, somente este. Portanto, vou usar um dos combinadores CSS. Nesse caso, estamos selecionando somente esse elemento de extensão. Vou colocar a altura de nove Ram. Em seguida, vamos mudar a cor do plano de fundo. Vai ser FC8f. Depois vou arredondar os elementos, o epod, o raio 50%. Depois disso, vou colocar o ícone no centro do círculo Para isso, vou usar o Flex box. Precisamos exibir linho, justificar o centro de conteúdo e um centro de itens de linha Como você pode ver, o ícone é colocado no centro do círculo. Em seguida, vou aumentar o tamanho do telefone. Vamos definir 26. Eu vou mudar a cor. Vamos definir a cor para 3776. Agora precisamos de espaço na parte inferior, mas, na verdade, acho que perdemos o preenchimento do ano Quero dizer, na embalagem, porque não temos espaço dentro da embalagem, vamos definir o preenchimento para três RAM nos superior e inferior e duas RAM nos lados esquerdo e direito Ok, agora temos espaço dentro do invólucro e vou adicionar aqui parte inferior marcial para criar espaço na parte inferior do ícone Vamos ajustá-lo para três m. Ok, isso é tudo sobre o ícone. Em seguida, temos que cuidar dos elementos de entrada. Vou selecionar as entradas do wrapper con. Vou usar o flex box. Precisamos exibir a flexibilidade e, em seguida, a coluna de direção flexível porque vamos alinhar as entradas verticalmente Vamos definir a direção da flexão para a coluna. Agora, como você pode ver, as entradas são colocadas verticalmente. Em seguida, vou personalizá-los. Então, vamos selecionar as entradas da conta seguidas pelo elemento de entrada Vou definir a largura para 40 Ram, então a altura será de cinco Ram. Vou mudar a cor do plano de fundo. Vamos definir a cor de fundo para F zero a quatro. Em seguida, precisamos de algum espaço entre a entrada, então vou definir a margem para , na verdade, a margem inferior para três RAM. Então eu vou me livrar da borda da falha, digamos que não. E também faça a entrada arredondada usando o raio de borda de 0,5 Ram Agora, as entradas parecem muito boas. Em seguida, temos que criar algum espaço dentro das entradas usando preenchimento Vou definir o preenchimento para 0,5 RAM nos lados superior e inferior e uma RAM nos lados esquerdo e direito Em seguida, precisamos alterar o tamanho da fonte que eu sou. Defina o tamanho do telefone para 1,6 Ram e também altere a cor. Vai ser 444, que é uma cor cinza escuro Ok, então isso é sobre as entradas. Em seguida, temos que tirar aqui o espaço reservado. Vou selecionar as entradas da conta. Em seguida, precisamos do elemento de entrada, seguido pela pseudoclasse de espaço reservado Quero dizer pseudo-elemento. A cor será 888. Ok, depois disso, eu vou cuidar da caixa de seleção. Vamos selecionar uma verificação de contagem. É um desenvolvimento de invólucro. Vou definir margem. Vou mover o elemento um pouco para cima. Vou definir a margem na parte superior, menos dois Ram. Então precisamos de zero no lado direito, três RAM na parte inferior e zero no lado esquerdo. Tudo bem, depois disso, vou mudar o cursor para ponteiros Selecione a verificação da conta seguida pelo elemento de entrada e defina o curso como ponteiro Agora temos aqui um ponteiro. Depois disso, vou cuidar da gravadora. Vamos selecionar verificação da conta, seguida pelo rótulo. Vou aumentar o tamanho do telefone. Vamos configurá-lo para 1,6 e o peso do telefone será 300. Eu vou mudar a cor. Vamos configurá-lo para 777. E também altere o ponteiro do curso. Ok, isso é tudo sobre a caixa de seleção. Em seguida, temos que cuidar do botão. Vou selecionar o invólucro do formulário da conta, seguido pelo elemento do botão Vou definir a largura para 100% e, em seguida, a altura será de cinco Ram. Em seguida, vou mudar a cor do plano de fundo. A cor será 3776. Então eu vou me livrar da borda da falha. Vamos fazer com que não altere o raio da fronteira. Vamos fazer o botão arredondado. Vou configurá-lo para quatro. Aqui temos o botão que parece bom, mas temos que cuidar da fonte. Vamos definir o tamanho da fonte para 1,5 Ram. Então, precisamos que a fonte esteja em negrito, pois vou transformar o texto em maiúsculas. Então precisamos de cor , vai ser branco. Em seguida, vou definir o espaçamento entre letras para 0,1 Ram. E também, vamos mudar o cursor, torná-lo ponteiro. Tudo bem, o botão parece muito bom. A única coisa que precisa fazer é criar algum espaço. Vou definir a margem em 1,5 quadro no lado superior e, em seguida, precisar aqui de 1,5 quadro no lado superior e inferior Na verdade, então vou definir zero nos lados esquerdo e direito. Tudo bem, isso é tudo sobre o botão. Vamos seguir em frente e cuidar do parágrafo. Vou selecionar o invólucro do formulário Act, seguido pelo elemento Vou aumentar o tamanho do telefone. Vai ser 1,8 Ram. Então teremos aqui o centro da linha de texto. Precisamos centralizar o texto. E também vou mudar o peso do telefone. Digamos isso para 300. OK. O parágrafo parece bom. Como você se lembra, temos dois elementos de extensão dentro do parágrafo. Estou dentro, o nome de usuário e a senha. Eu vou personalizar. Em seguida, vamos selecionar a embalagem de espuma da conta seguida pelos elementos E então precisamos de amplitude. Eu vou mudar a cor. Vai ser 2371. Então, precisamos que o peso da espuma seja de 400. E também vou definir o ponto de partida É isso sobre o parágrafo Tudo parece muito bom. A única coisa que precisamos fazer é personalizar esse botão aqui. Vou selecionar o botão com o nome da classe, BT e out. Na verdade, vou copiar esse código daqui porque precisamos de estilos semelhantes. A largura será de 35 quadros, então precisamos da mesma altura do fundo Vou usar a função de gradientes lineares. A direção será para a direita. Precisamos de cores. O primeiro será f48f. Quanto à segunda cor, vou usar o F3393 Em seguida, precisamos de um raio não fronteiriço. Para Am, todas essas peças serão iguais. A única coisa que vou mudar aqui é a margem. Precisamos de uma margem superior. O valor será do segundo botão. Parece muito bom. Na verdade, estamos quase terminando esta página. A única coisa que precisamos fazer é mostrar de volta o rodapé Para isso, basta remover o atributo chamado hidden daqui. Agora tudo parece muito bom e terminamos com a página da conta. A próxima coisa que precisamos fazer é cuidar da última página, que é uma página de preços. Para isso, vamos passar para a próxima palestra. 59. Como criar a marcação HTML para a página de preços: Na palestra anterior, terminamos trabalhar na página da conta Parece muito bom. Agora temos que seguir em frente e cuidar da última página do nosso projeto, que será a página de preços. Vamos até a versão final do nosso projeto e veja a página de preços. Consiste em um cabeçalho. Temos aqui alguns símbolos materiais. Então você pode ver aqui duas opções diferentes de preços, o acesso anual e o acesso vitalício Além disso, temos aqui algumas formas diferentes como plano de fundo dessas opções. Abaixo, você pode ver o rodapé padrão que usamos nas páginas anteriores É isso sobre a página de preços. Nesta palestra, vou criar a marcação HTML. Vamos ao código VS. Em seguida, vou criar novos arquivos nas pastas HTML e CSS de que precisamos aqui, precificando HTML. Em seguida, vou criar um arquivo CSS de preços. Vamos mover esse arquivo para o lado direito. Em seguida, vou acessar a conta no HTM do arquivo e copiar o código inteiro Vamos colar aqui. Eu vou fazer algumas mudanças. Precisamos mudar o nome do arquivo CSS. Vai precificar o CSS. Vou me livrar da seção de contas. Além disso, vou esconder o rodapé. Vamos verificar o navegador. Temos aqui a página de preços. Está vazio agora. Temos aqui apenas a navegação. Então, vamos responder. Para criar a marcação HDM, vou inserir seus comentários sobre preços Em seguida, vou abrir a tag de seção com o nome da classe Pricing, o primeiro elemento dentro do elemento da seção Vou criar um invólucro de preços no qual vou inserir outro elemento profundo E serão formas de preços. Teremos três formas diferentes. O primeiro será o retângulo de preços. Em seguida, vou criar um pequeno círculo de preços. Então precisamos de um círculo grande. Vou duplicar essa linha de código e apenas alterar o nome da classe Precisamos de um círculo grande de preços. Ok, depois das formas, vou criar um cabeçalho de preços no qual teremos três cabeçalhos diferentes O primeiro será um elemento de cabeçalho H one com o texto Preços simples. Em seguida, vou abrir novamente elementos do título H one e eles devem ser preenchidos como sites ilimitados. E depois desses elementos de cabeçalho vou abrir o cabeçalho H três com o texto Juntar. Mais de 100.000 clientes têm acesso a sites ilimitados. Modernize-os. Na verdade, precisamos aqui temas e plugins modernos. E também precisamos do melhor construtor de sites. Ok, em seguida, vou abrir e serão as resenhas que precisamos fazer no parágrafo. Com o texto. Excelente. Então eu vou abrir a tag p, vai ser estrelas de preços. Precisamos acessar o site do Google Material Symbols e pesquisar por estrela. Precisamos de ícones de campo e também vou selecionar arredondado. Vamos copiar os elementos do span. Precisamos de cinco elementos sanitários diferentes. Vou duplicar essa linha de código quatro vezes. Então, vamos verificar se os ícones estão sendo exibidos no navegador. Como você pode ver, temos aqui cinco estrelas. Depois disso, precisamos novamente de parágrafo com as resenhas de texto ativadas. Depois do parágrafo, vou abrir uma tag com o nome da classe, Pricing, Trust, Pilot. Dentro desse elemento, vou inserir novamente o Google Symbol. Vamos procurar o símbolo chamado hotel. Precisamos desse símbolo aqui. Vamos copiar esse elemento span e colá-lo aqui. Em seguida, verifique o navegador. Temos aqui o ícone. Depois disso, vou inserir aqui outro elemento span com o texto Trust Pilot. Com esse elemento span, terminamos com o cabeçalho. Em seguida, venho aqui, elementos profundos com os cartões de preços do nome da classe. Teremos duas cartas diferentes. Vamos criar o primeiro. Na verdade, vou adicionar aqui outro cartão de preços de nome de classe restante. Esse será o nome individual da classe. Quanto ao cartão de preços, vou usá-lo como o nome comum da classe. Dentro do cartão, teremos elementos profundos com o nome da classe no topo do preço, nos quais vou inserir H três elementos de cabeçalho com o texto anual Xs Então, precisamos de H, um elemento de cabeçalho para o preço. O preço será de 99,90 $9. Depois do título, precisamos Vou abrir a tag P com as estrelas de preço do nome da classe. Então vamos copiar esse painel aqui. Precisamos de cinco estrelas. Então, vou duplicar esse painel quatro vezes. Vamos verificar o navegador. Temos aqui as estrelas. Em seguida, abrirei elementos com a lista de nomes de classes, na qual teremos alguns itens de lista diferentes. Vamos abrir os elementos LI. O primeiro será composto por centenas de pacotes de sites. No geral, teremos seis itens da lista. Portanto, vou duplicar esse item cinco vezes e depois alterar o conteúdo A segunda serão as atualizações do produto, depois o suporte premium. Em seguida, o próximo será o uso ilimitado do site. Então, a próxima será a garantia sem risco. Finalmente, vou interferir uma taxa única, ok? Então, aqui temos os itens da lista. Em seguida, vou abrir o botão com o botão de digitação. Além disso, vou adicionar aqui o nome da classe e será o cartão de preços BTN como o texto que vou inserir na inscrição hoje OK. Na verdade, acho que é sobre o primeiro cartão. Todos os elementos são criados. Em seguida, vou duplicar esses elementos porque também precisamos de uma segunda carta Estou duplicando. Temos que fazer algumas mudanças. Vamos mudar o nome da classe. Precisamos de um cartão de preços, então vou mudar o conteúdo dos títulos. Nesse caso, precisamos do eixo do tempo. Quanto ao preço, será de 249,90 $9. Então, precisamos de estrelas como Vou fazer pequenas mudanças. Precisamos de atualizações vitalícias do produto, do suporte premium vitalício. Quanto ao resto dos itens, não vou trocá-los. Acho que está tudo pronto. Espero que não tenhamos aqui nenhum erro e que tudo esteja correto Veremos isso na próxima palestra, onde estilizaremos esses elementos Agora, vamos verificar o navegador. Todos os elementos estão preparados. Vamos seguir em frente e passar para a próxima palestra, qual vamos estilizar a página de preços 60. Formas de estilo: Na palestra anterior, criamos a marcação HTML para a seção de preços Todos os elementos são criados e preparados. Agora temos que começar a estilizar esses elementos. Vamos ver o código VS no arquivo CSS de preços. Vou inserir novos comentários na seção de preços. Em seguida, vou selecionar os elementos da seção, o preço do nome da classe, na verdade, precisamos aqui de preços. A primeira coisa que precisamos fazer é definir o w e a altura. A largura será de 100%. Quanto à altura, vou torná-la com 150 de altura da janela de visualização Quero dizer, um 50% da janela de visualização. Em seguida, precisamos da margem superior 30 para criar espaço na parte superior da seção. Ok, com altura são aplicados aos elementos. Em seguida, temos que mudar a cor de fundo da barra de rolagem. Vou acessar a conta desse arquivo. Pegue esse código que temos aqui, barra de rolagem azul. Vou colar esse código aqui. Como você pode ver, a cor de fundo da barra de rolagem foi alterada. Em seguida, vou selecionar a embalagem de preços. Vou definir dentro das alturas. Vamos definir as duas propriedades para 100%. Em seguida, vou alinhar os elementos usando a caixa flexível Precisamos exibir linho. Então eu vou mudar a direção e torná-la uma coluna. Como vamos alinhar os itens flexíveis verticalmente, precisamos que a direção do texto seja Além disso, vou colocar os itens de uma linha no centro. Ok, eu posso ver que o conteúdo está colocado no centro. Em seguida, vou cuidar das formas desta seção. Quero dizer essas três formas, o retângulo e esses dois círculos Vamos começar com o retângulo. Vou selecionar o retângulo de preços. Em primeiro lugar, vamos definir as alturas escritas. Vou ajustar os dois para 50 m depois vou mudar a cor do fundo. Na verdade, vou usar gradiente linear. A direção da transição de cores será de 135 graus. Em seguida, vou selecionar a primeira cor, que será 184 BB Quanto à segunda cor, ela será transparente com um valor percentual 8%. Aqui temos o retângulo com efeito de gradiente linear Em seguida, vou torná-lo arredondado usando o raio de borda dez Então temos que mudar a posição. Vou definir a posição como absoluta. Então, para posicionar elemento de acordo com o pai, que é o invólucro de preços, precisamos da posição relativa para o elemento pai Em seguida, vou definir a propriedade principal para 30%. Quanto à propriedade do laboratório, vou configurá-la para 15%. Vamos verificar o navegador. Aqui temos o retângulo que precisamos para girá-lo. Vou usar a transferência com a função Z de rotação, e o valor será de 45 graus. Como você pode ver, o retângulo é girado. A última coisa em relação essa forma é diminuir a opacidade Vamos definir a opacidade 2.2 Tudo bem, vamos ver a primeira Estou dentro, o retângulo. Em seguida, vou cuidar da segunda forma, que é esse pequeno círculo aqui. Vou selecionar um pequeno círculo de preços. Em primeiro lugar, conforme definido nas alturas, vou definir as duas para oito gramas, mas depois vou mudar a cor do fundo. Vamos usar aqui a cor 34d, d87. É uma cor verde. Em seguida, para tornar o elemento arredondado, precisamos de um raio de borda 50%. Então, vou mudar a posição dos elementos Vamos configurá-lo como absoluto. Em seguida, definiu as propriedades superior e direita. A posição superior será 25%. Quanto à posição correta, vou defini-la para 15%. Aqui temos o pequeno círculo. Em seguida, temos que cuidar da terceira forma, quero dizer, esse grande círculo aqui. Vamos até o código VS e selecione o círculo grande de preços. Primeiro de tudo, vamos definir dentro da altura. Vou colocar os dois em Fort to Ram. Em seguida, precisamos mudar o plano de fundo. Vou usar novamente o gradiente linear. A direção da transição de cores será de dois direitos. Então precisamos da primeira cor, que será transparente. Quanto à segunda cor, será 71186 E também precisamos do valor percentual de 9%. Temos aqui o erro de que precisamos de 71186 Agora, tudo parece estar correto. Aqui temos o elemento, que agora está em círculo. Vamos cuidar disso. Precisamos de um raio de borda 50%. Agora você pode ver aqui o círculo com interferências de grau linear Em seguida, temos que cuidar da posição desse elemento. Precisamos de uma posição absoluta. Em seguida, vou definir a posição inferior. Vai ser 15% Então eu vou definir a posição correta. Vamos estudar até 15%. E, finalmente, vou mudar a opacidade Vamos começar 2.2 Todas as três formas são personalizadas e posicionadas. Em seguida, temos que cuidar do cabeçalho da página. Para isso, vamos passar para a próxima palestra. 61. Cabeçalho de estilo: Ok, na última palestra, estilizamos essas formas aqui Agora, como eu disse, temos que seguir em frente e personalizar o cabeçalho da página de preços. Vamos acessar o código VS e selecionar o cabeçalho de preços. Estou centralizando o texto, quero dizer, precisamos do centro da linha de texto. Além disso, vou criar espaço na parte inferior usando a margem. 20 RAM inferiores. Como você pode ver, o texto é colocado no centro e também temos aqui o espaço. Em seguida, vou cuidar dos títulos individualmente. Vou começar com o primeiro título. Na verdade, vou personalizar os dois cabeçalhos simultaneamente porque temos aqui dois elementos de cabeçalho H um Eu vou selecioná-los. Precisamos do cabeçalho de preços seguido pelo elemento de cabeçalho H one. Em primeiro lugar, vou mudar a família de telefones. Vai ser Mode Coursin'm, vou encontrar o tamanho da fonte, vai ser cinco Ram Além disso, precisamos de espaço entre as letras. Vamos definir o espaçamento entre letras de 2,2 Ram e encontrar um líquen. A cor que vamos usar aqui, cor 26353. Está bem? Como pode ver, os dois primeiros títulos são personalizados, eles têm uma aparência muito boa Em seguida, temos que cuidar do elemento de cabeçalho H três. Na verdade, vamos duplicar esse código, alterar o seletor que precisamos aqui, H três Então eu vou me livrar da família telefônica. Além disso, vou definir o tamanho do telefone para dois Ram. Então, precisamos nos livrar do espaçamento entre letras. A cor do título será 567599. Além disso, vou adicionar aqui o peso do telefone 300. Vamos verificar o navegador. Vou diminuir a largura do cabeçalho. Vamos definir dois Ram. E, em seguida, no navegador, a largura é reduzida. Mas, como você pode ver, temos que colocar o título no centro. Portanto, vou usar a marcha. Precisamos marchar, serão dois Ram na parte superior Então precisamos de auto no lado direito, depois de dois Ram. Na verdade, vamos nos livrar de dois porque precisamos dos mesmos valores para o lado inferior e também para o lado esquerdo. Então, podemos deixar aqui apenas dois Ram e auto. Vamos verificar. Como você pode ver, o título é colocado no centro e também temos algum espaço nas laterais superior e inferior. Ok, vamos falar sobre os títulos a seguir. Eu vou cuidar dessa parte aqui. Vou selecionar o parágrafo. Vamos definir o tamanho da fonte para dois Ram. Então, precisamos do peso da fonte. Serão 300. Além disso, vou criar algum espaço no lado direito usando a margem, certo? O valor será de uma RAM. Ok, então os parágrafos são personalizados. Em seguida, vou cuidar das estrelas. Vamos selecionar o desenvolvimento do invólucro, que é o review. Vou usar o Flex box para alinhar os elementos. Vamos configurar a tela para flexionar. Então, precisamos justificar o Content Center. Como você pode ver, os elementos são colocados horizontalmente em uma linha Em seguida, selecionarei as estrelas de preços, que são o invólucro dos ícones Vamos selecionar estrelas de preços e criar espaço no lado direito usando marchar para a direita, um Ram Ok, agora temos que personalizar as estrelas. Vou selecionar o elemento span. Quero dizer, nesses elementos de amplitude, precisamos de estrelas de preços seguidas pelos elementos de amplitude Vamos definir o tamanho do telefone para 2,5 RAM. E também vou mudar a cor das estrelas. A cor será 03b 57. É uma cor verde. Como você pode ver, as estrelas estão muito bonitas. Em seguida, vou cuidar dessa parte aqui. Vamos selecionar o Pricing Trust Pilot. Vou usar o Flex box. Vamos definir a exibição para bandeiras. Em seguida, precisamos alinhar os itens no centro. Além disso, precisamos mover os elementos ligeiramente para cima usando margem superior com um valor negativo de -0,5 Ram Ok, agora parece muito bom. Em seguida, temos que personalizar esses dois elementos aqui. Vamos começar com o primeiro elemento de extensão, que é um ícone. Vou selecionar o piloto de confiança de preços, seguido pelo elemento span com seletor Como eu disse, precisamos cuidar do primeiro elemento de extensão, que é um ícone que precisamos aqui Vou definir o tamanho do telefone para 3,5. Quanto à cor, vou usar a mesma cor. Vamos pegar e colar aqui. Ok, então, como você pode ver, o ícone parece muito bom. A última coisa que precisamos fazer é cuidar desse elemento aqui. Vou duplicar esse código. Precisamos do elemento span para o segundo elemento span. Vamos nos livrar da cor e alterar o tamanho do telefone que precisamos para rodar. Tudo bem, esse é o cabeçalho. Parece muito bom. Em seguida, temos que cuidar das cartas. E para isso, vamos para a próxima palestra. 62. Cartões de preços de estilo: Tudo bem, então depois de estilizar o cabeçalho, em seguida, temos que cuidar dos cartões Temos que estilizar os dois. Então, vamos voltar ao código do VS e começar a estilizar os cartões Vou selecionar o desenvolvimento da embalagem que são os cartões de preços E vou usar o flex book para colocar cartas horizontalmente em Quero dizer lado a lado. Portanto, precisamos exibir o Flex. Se dermos uma olhada no projeto , você verá que as cartas são colocadas lado a lado. Em seguida, vou personalizar os cartões. Como você se lembra, cada cartão tem um cartão de preço de classe comum e também um cartão de preço com nome de classe individual restante. Em primeiro lugar, vou adicionar aos dois cartões alguns estilos comuns. Portanto, vou selecioná-los usando um cartão de preços de nome de classe comum. Vou definir as alturas de ampliação. A largura será de 45 Ram. Quanto à altura, vou fazer com que seja 70 Ram. Em seguida, vou mudar a cor do plano de fundo. Vai ser branco. E também para ver claramente as cartas, vou definir a sombra da caixa com os valores. 01 Ram, dez Ram, e a cor será RGB, A 130-16-2235, 130-16-2235, e Como você pode ver, temos aqui duas cartas. Na verdade, as formas, quero dizer, esses elementos estão sobrepostos nas cartas Vou colocá-los atrás dos cartões e, para isso, podemos definir a propriedade do índice. Vamos ajustar para dez, ok? Agora, como você pode ver, o problema está resolvido. Está bem? Depois disso, vou criar algum espaço entre as cartas. Vamos fazer isso usando margem. A margem será zero nos lados superior e inferior. Quanto aos lados esquerdo e direito, vou definir a margem em 1,5 m. Agora temos espaço entre as cartas. Em seguida, também vou criar espaço dentro do cartão. Para isso, precisamos de acolchoamento. O acolchoamento será de quatro rampas nos lados superior e inferior e em seguida, seis rampas nos lados esquerdo e direito. Tudo bem Depois disso, vou fazer com os cantos das cartas sejam arredondados. Além disso, temos que alinhar os itens dentro do cartão usando livros de linho Vamos definir o raio da borda como, na verdade, precisamos aqui do raio da borda O raio da borda será de um Ram. Então, como eu disse, precisamos de livros flexíveis. Vou configurar a tela para flexionar. Em seguida, vou mudar a direção porque vamos alinhar os itens dentro do cartão verticalmente Então, vou definir a direção da flexão para a coluna, vamos colocá-la para baixo. Em seguida, vou colocar os itens no centro. Precisamos alinhar o centro de itens. E também precisamos medir o texto usando texto. Centro de alinhamento. Ok, é isso mesmo. Sobre os estilos comuns dos cartões. Em seguida, vou personalizar os elementos H separadamente. Vamos começar com os cabeçalhos, quero dizer H, três elementos do título Vamos selecionar o preço do carro e, na verdade, precisamos do seu cartão de preços no topo. E então H três elementos de cabeçalho. Em primeiro lugar, vou definir a família de telefones. Vai ser mull cursive. Então precisamos do tamanho do telefone, vou definir o tamanho do telefone para 1,8 Ram. Em seguida, precisamos transformar o texto em maiúsculas. Vou criar um espaço entre as letras. Vamos configurá-lo para 2.2 Ram. Finalmente, vou criar algum espaço na parte inferior usando a margem inferior, o valor será duas execuções, ok? Como você pode ver, os cabeçalhos são personalizados. Mas se dermos uma olhada no projeto finalizado, você verá que os títulos têm cores diferentes E também vemos aqui o efeito de gradiente linear. Vou definir a cor separadamente. Vamos selecionar o cartão de preços à esquerda e, em seguida, vou pegar o seletor aqui Eu vou usar. Gradiente linear. A direção da transição de cores será de dois direitos Em seguida, temos que definir as cores. A primeira cor será 441d. Quanto à segunda cor, vou usar 0b38 Além disso, vou aderir a 90%. Em seguida, precisamos de uma propriedade chamada clipe de fundo do Webkit, que será texto Além disso, temos que definir a cor como transparente. Ok, então, como você pode ver, o título da primeira carta parece muito bom. Temos aqui um efeito de gradiente linear. Vamos fazer o mesmo com o segundo título também. Vou duplicar esse código. Em seguida, temos que mudar o nome da classe. Precisamos aqui do cartão de preços, certo? E também temos que mudar as cores. A primeira cor será C, A seis EFF. Para a segunda cor, vou configurá-la para 71186. Ok, vamos verificar os resultados. Como você pode ver, o segundo título também parece muito bom. Em seguida, temos que cuidar dos preços. Vou selecionar os melhores preços H. Vou enviar a família telefônica para Molly. Na verdade, vamos pegar esse código aqui e depois fazer algumas alterações. O tamanho do telefone será de seis Ram. Então precisamos, na verdade, não precisamos aqui em maiúsculas. Acho que na verdade é isso. Vamos verificar o navegador, os títulos, os preços parecem bons Precisamos mudar as cores e fazer o mesmo que fizemos com os títulos anteriores Podemos simplesmente adicionar aqui selecionar. Vamos duplicar o seletor. Livre-se do Calibra , então precisamos daqui. E também elementos de cabeçalho H one. Vamos verificar se o preço do navegador tem a mesma cor com efeito gradiente Vamos fazer o mesmo com a segunda carta também. Na verdade, vamos copiar esse seletor daqui. E então basta alterar o nome da classe que precisamos aqui, certo? Tudo bem, é isso. Os títulos parecem muito bons e, em seguida temos que cuidar das estrelas Vamos voltar ao código VS. Vou selecionar uma embalagem com o nome da classe, estrelas do cartão de preços Vou criar algum espaço na parte inferior usando a margem inferior para Ram. Em seguida, temos que selecionar o painel de que precisamos, novamente, as estrelas do cartão de preços seguidas por esse panelemento estrelas do cartão de preços seguidas por esse panelemento Eu vou mudar a cor da estrela. Vamos usar aqui 0357. Então, como você pode ver, as estrelas estão muito bonitas. Em seguida, temos que cuidar dessas listas. Aqui, vou selecionar elementos da UL com a lista de preços do nome da classe. A primeira coisa que vou fazer é me livrar das balas padrão Não precisamos do estilo de lista nenhum. Além disso, vou criar algum espaço na parte inferior usando a margem inferior para. Ok. Como você pode ver, as balas são removidas e também temos algum espaço na parte inferior Em seguida, temos que cuidar dos itens da lista. Vou selecionar a lista de preços, seguida pelos elementos LI. Na verdade, precisamos daqui. Cartão de preços mínimo e esquerdo. Em seguida, ele deve ser seguido pelo elemento LI. Vou aumentar o tamanho do telefone , serão dois Ram. Então, precisamos que o peso do telefone, digamos, seja 300, pois vou mudar a cor. Vamos configurá-lo para 567599. Então precisamos de margem, 1,5 RAM no lado superior e inferior e, em seguida, zero nos lados esquerdo e direito. Como você pode ver, os itens mínimos parecem muito bons. Em seguida, temos que mudar a cor do quinto menor item no mínimo. Quero dizer, temos que tornar esse item mínimo verde. Para isso, vou selecionar elementos LI, seguidos pelo enésimo seletor filho Temos que selecionar o quinto item. A cor será 0357. Como você pode ver, o quinto item agora tem uma cor diferente. Agora temos que cuidar do último item. Precisamos que o último item seja sobreposto. Um fato aqui: vamos selecionar o item da lista do primeiro cartão. Precisamos deixar o cartão de preços, seguido pela lista de preços. E então precisamos de um elemento li seguido pelo último seletor filho Precisamos do seu último filho. Vou usar uma propriedade chamada decoração de texto com a linha de valor atravessada. Então precisamos de opacidade 0,5 Ok. Isso é o mínimo. Em seguida, temos que cuidar dos botões. Vou selecionar o cartão de preços BTN. Vou definir a largura para 100%, então a altura será de seis Rams. Eu vou mudar a fronteira. Quero dizer, temos que nos livrar da borda padrão, vamos defini-la como nenhuma, então precisamos que o raio da borda seja de cinco Ram Em seguida, vamos definir o tamanho da fonte para 1,6 Rams. Vou transformar o texto em maiúsculas, mudar a cor, vai ficar branco. Em seguida, precisamos criar algum espaço entre as letras. Vamos configurá-lo para 2.2 Ram. Finalmente, vou colocar o cursor no ponteiro. No momento, os botões não parecem muito bons porque precisamos alterar as cores de fundo de cada botão. Precisamos de gradientes lineares para os dois padrões, eles têm cores diferentes Vou selecionar o cartão de preços à esquerda, seguido pelo PTN de preços Então eu vou mudar o plano de fundo. Vamos usar gradientes lineares. Na verdade, precisamos dos valores semelhantes que usamos para o cabeçalho. Então, vou pegar esse código a partir daqui. Vamos verificar o navegador. O primeiro padrão parece muito bom. Vamos fazer o mesmo com o segundo também. Vou duplicar esse código, depois mudar da esquerda para a direita e também pegar os valores daqui Vamos colar o valor aqui. Como você pode ver, os dois botões parecem muito bons. Na verdade, com as cartas, estamos quase terminando. Eu tenho que fazer mais uma coisa. Se dermos uma olhada no projeto final, você verá que o cartão no lado direito parece um pouco maior do que o cartão esquerdo. Na verdade, você pode pensar que vamos aumentar a altura interna, mas não é isso que vamos fazer. Vou criar por meio do ambiente e , em seguida, vou mover esse cartão para perto do usuário. Para criar por meio do ambiente, precisamos usar uma propriedade chamada Perspective. Temos que adicioná-lo aos cartões de preços. O valor será de 50 Ram. E então eu vou selecionar o cartão de preços, certo? Vou usar transform depois traduzir uma função com o valor cinco Ram. Agora, como você pode ver, o segundo cartão, quero dizer, o cartão do lado direito se aproximou do usuário. Eu acho que parece muito bom. Ok, com a página de preços, estamos quase inativos. A única coisa que precisamos fazer é exibir o rodapé Vou me livrar do atributo chamado e pronto. Ok. A página de preços parece muito boa e moderna, na verdade, com as páginas que terminamos. A próxima coisa que precisamos fazer é tornar o projeto responsivo a diferentes tamanhos de tela e dispositivos Vamos passar para a próxima palestra. 63. Tornando o projeto responsivo para telas maiores: Olá, bem-vindo à nossa nova seção, na qual tornaremos nosso projeto responsivo a diferentes tamanhos de tela e dispositivos Na última seção, terminamos de trabalhar no projeto. Quer dizer, criamos e estilizamos todas as páginas. Tudo parece muito bonito e moderno, mas agora temos que tornar o projeto responsivo Eu quero falar um pouco sobre a importância do web design responsivo no desenvolvimento web Na verdade, é muito importante no desenvolvimento web porque garante que os sites funcionem bem em todos os tipos de dispositivos e tamanhos de tela. Com tantos dispositivos diferentes como smartphones e tablets, web design responsivo ajuda os sites a terem uma boa aparência e serem fáceis de usar Também economiza tempo e esforço, evitando a necessidade de designs separados para cada dispositivo. Além disso, mecanismos de pesquisa como o Google preferem sites compatíveis com dispositivos móveis. web design responsivo também pode aumentar visibilidade de um site Em termos simples, o web design responsivo é essencial no desenvolvimento web para garantir que os sites permaneçam fáceis de usar e eficazes na ampla variedade de dispositivos que as pessoas usam hoje em meu projeto web Priorizei fazer com que o site tenha uma aparência incrível em vários dispositivos Estamos falando de telas de desktop grandes, como 1920 pixels e também 1.600 pixels Bem como outros um pouco menores, como 14 40 pixels, 1960, 6,12 80 pixels Quatro comprimidos. Eu tenho 820 pixels e 768 Obviamente, para aqueles que adoram navegar em seus telefones, eu otimizei para 43.393,3 Ao fazer isso, garanto que independentemente de como alguém acessa o site, seja em um computador, tablet ou celular, a experiência seja tranquila e tenha uma ótima aparência Essa abordagem é essencial hoje porque as pessoas usam todos os tipos de dispositivos, e eu quero que todos tenham um tempo positivo e fácil de usar no meu site. Web design responsivo não é apenas um termo sofisticado. Trata-se de tornar as coisas fáceis e agradáveis para todos, independentemente do gadget que estejam Está bem? Como você sabe, construímos nosso projeto nesse tamanho de tela extra grande e agora temos que torná-lo responsivo a esses pontos de interrupção O primeiro ponto de interrupção será esse aqui. Vou tornar o projeto responsivo com todas as suas páginas e depois passaremos para outro ponto de interrupção Ok, vamos inspecionar a página, mudar para o modo responsivo Então, como você pode ver, temos aqui essas dimensões. Quer dizer, 1920 pixels de largura e 1080 pixels de altura. Como eu disse, o primeiro ponto de quebra será 1.600 pixels e 900 pixels Vou inserir aqui essas dimensões. Em seguida, vou para o código VS. Vamos fechar esse arquivo aqui. Em seguida, vou inserir aqui novos comuns para responsivo. Em seguida, vou usar a consulta de mídia CSS para definir a largura máxima da tela. Precisamos de uma placa seguida pela mídia. Em seguida, precisamos especificar a largura máxima da tela. Serão 1.600 pixels. Agora podemos inserir aqui esses blocos que precisamos. A primeira coisa que vou fazer é alterar o tamanho da fonte do elemento HTML. Como você se lembra, definimos o tamanho da fonte do HTML para 62,5% para usar Ram, a unidade de medida E vou diminuir o tamanho da fonte do elemento H mal. Isso diminuirá o tamanho de todos os elementos de todo o projeto. Vou fazer com que o tamanho da fonte do elemento H mal 60%. Agora, todos os elementos do projeto ficaram menores. Em seguida, vou cuidar da barra de navegação. Vou diminuir o preenchimento do. Lados esquerdo e direito. selecionar não e definir como 0,10 Executar. Em seguida vou alterar a largura dos itens sem Eu, o elemento profundo da embalagem. vou selecionar nenhum item e definir sua largura para 55%. Como você pode ver, a largura dos itens de navegação e o elemento do invólucro aumentam Em seguida, vou retirar o menu suspenso. Como você pode ver, temos aqui uma pequena lacuna entre o menu suspenso e o triângulo. Eu vou resolver esse problema. Vamos selecionar o menu suspenso. Mude sua posição, vou configurá-la para 4,5 Ram. Agora, como você pode ver, não temos mais aqui a lacuna entre o triângulo e o menu suspenso. Em seguida, vou cuidar da seção de serviços. Vamos selecionar o invólucro de serviços e definir a largura em 70%. Ok, agora temos um resultado melhor Em seguida, vou cuidar da lista de projetos. Vamos selecionar a lista de projetos. Vou definir com 80% Ok, então esta seção também parece boa. Em seguida, estou na seção de modelos. Vou personalizar as imagens. Vamos usar o modelo à direita seguido pela imagem. Então, precisamos selecionar crianças. Vamos selecionar a primeira imagem. Vou mudar as duas posições, serão 45%. Então vamos definir a largura para 35 Ram. Vou duplicar esse código que precisamos aqui. Terceira imagem, depois vou me livrar da posição superior e alterar a largura. Vamos fazer com que seja 55 Ram. Ok, agora está tudo bem. Em seguida, temos que cuidar dessa pequena lacuna aqui. Na verdade, acho que é uma falha dos navegadores que vemos aqui. Essa pequena lacuna. De qualquer forma, vou resolver esse problema. Vamos selecionar a seção de inscrição. Vou definir o topo da marcha para menos um M. Agora não temos nenhuma lacuna e tudo parece muito bom OK. Então, acho que é sobre a página inicial. Em seguida, temos que cuidar da página restante. Vamos até a página do cliente. Precisamos aumentar a largura dos depoimentos, quero dizer, o Vamos voltar ao código VS e abrir clientes do arquivo CSS. Vou inserir seus comentários para responder. Então, precisamos que a largura máxima da consulta de mídia CSS seja de 1.600 pixels Vou selecionar uma embalagem de depoimentos. Vamos definir sua largura para 90%. Ok, agora a seção está bem bonita. Acho que não precisamos mudar nada aqui nesse ponto de ruptura. Vamos passar para a próxima página, que é a página do produto. Vou fazer aqui alterações nos slides. Vamos abrir a página de produtos. Então, precisamos dos comentários dela para responder. Vou definir a mídia X com 1.600 pixels. Precisamos do ano 1.600 pixels. Vou selecionar o conteúdo do produto. A largura da alteração será 90%. Em seguida, vou cuidar do conteúdo promocional. Eu sou o elemento do cabeçalho. Vamos selecionar o conteúdo promocional, seguido pelo elemento de título H one. Vou mudar o tamanho do telefone. Vamos configurá-lo para 3,5 m. Ok, agora o conteúdo promocional parece bom. Na verdade, com a página do produto, terminamos. Vamos seguir em frente e verificar a página de conteúdo. Acho que está tudo bem. Em seguida, vamos verificar a página da conta. Não precisamos de nenhuma mudança aqui. Quanto à página de preços, farei alterações em seus slides. Vamos voltar ao código VS e abrir o arquivo SS de preços. Vamos inserir comentários. Vou criar uma consulta do Caesars Media com Xw de Vamos seguir em frente e selecionar um pequeno círculo. E mudar sua posição correta será de 10%. Além disso, vou cuidar da posição do círculo grande. Vamos duplicar esse código então. Vou mudar o nome da classe. Vai ser grande. Vou definir a posição correta para 10% e também vou mudar a posição da caixa Vai ficar 12% bem. Tudo parece muito bom. E, na verdade, nesse ponto de interrupção, quero dizer 1.600 pixels de largura e 900 pixels de altura Nós terminamos. Então, podemos verificar esse ponto de interrupção a seguir, temos que cuidar desse ponto de interrupção aqui Para isso, vamos passar para a próxima palestra. 64. Como tornar o projeto responsivo para telas menores - Parte 1: Na palestra anterior, tornamos o projeto responsivo No ponto de interrupção, quero dizer 1.600 pixels de largura e 900 pixels de altura Agora é hora de seguir em frente e tornar o projeto responsivo em diferentes tamanhos de tela O próximo ponto de interrupção será esse. Quero dizer, 14, 40 pixels e 900 pixels de altura. Vamos voltar ao navegador e alterar as dimensões no modo responsivo Precisamos aqui de 14, 40 pixels e depois 900 pixels. Em seguida, volte para o código VS, abra o arquivo CSS de estilo e crie uma nova consulta de mídia CSS. A largura máxima será de 14, 40 pixels. A primeira coisa que vou fazer é alterar o tamanho da fonte do elemento H Timel Vou diminuí-lo novamente. O tamanho da fonte será de 48 pixels. Quero dizer, por cento, não os pixels. Agora, os elementos ficaram novamente menores. Em seguida, vou cuidar dos itens, do desenvolvimento da embalagem Não vamos selecionar nenhum item. Novamente, aumente a largura. Vou configurá-lo para 60%. Ok, acho que não precisamos de nenhuma alteração no cabeçalho. Em seguida, temos que cuidar da seção de serviços. Vou selecionar o invólucro de serviços. Defina a largura. A largura será de 75% Ok, a seção de serviços parece boa. Em seguida, vou cuidar da seção do projeto. Vou aumentar a largura da navegação. Quero dizer essa navegação aqui. E também vou aumentar a largura do projeto em, vamos selecionar Filtro e definir sua largura para 85%. Em seguida, vou selecionar Lista de projetos aqui. Lista de projetos, e eu também vou definir com 85%. Está bem? Portanto, a seção do projeto parece muito boa. Em seguida, vou cuidar da seção de modelos. A única coisa que vou fazer é tornar este parágrafo na largura deste parágrafo um pouco menor. Vamos selecionar os modelos restantes, seguidos pelos elementos que vou definir com 250. Tudo bem, então eu acho que isso é tudo sobre a página inicial. Tudo parece muito bom. Em seguida, temos que cuidar da página do cliente. Vamos abrir o arquivo CSS dos clientes e criar uma nova consulta de mídia CSS com largura máxima de 40,40 Vou aumentar a largura do invólucro do depoimento, quero dizer esse elemento do invólucro Vamos selecionar a embalagem do depoimento e definir sua largura para 95%. Em seguida, vou alterar a largura do depoimento em si 95%. Em seguida, vou alterar a largura do depoimento Vamos selecionar o depoimento e definir sua largura para 32. Novamente, a seção de depoimentos fica bem com esta página. Nós terminamos. A seguir, vamos dar uma olhada na página do produto. Temos que fazer suas pequenas alterações. Vou abrir produtos do arquivo CSS e, em seguida, temos que criar uma nova mídia CSS. Consulta máx. A largura será de 14, 40 pixels. Em seguida, vou selecionar conteúdo promocional e definir a largura para 70%. Depois, vou cuidar das formas. Vamos selecionar o retângulo promocional. Vou definir a posição esquerda para 8%. Também vou mudá-la para a posição. Vamos configurá-lo para 25%. Em seguida, vou cuidar do círculo grande. Eu também vou mudar sua posição. Vamos selecionar o círculo grande. Defina a posição inferior para 25% Além disso, vou mudar a posição correta para 8%. É isso aí. A seção promocional parece boa. Na verdade, com esta página, terminamos. Vamos verificar a página de contato. Parece bom. Além disso, a página da conta também parece boa. Vamos verificar a seção de preços. Então, vou mudar um pouco a posição do círculo. Vou abrir o preço do arquivo. E então vamos criar uma consulta de mídia de notícias com a largura máxima de 14.40 pixels. Vou selecionar um pequeno círculo de preços. Vou mudar sua posição correta. Vamos fazer com que seja 7%, ok? Isso é que tudo parece muito bom nos pontos de interrupção. E vou verificar esse ponto de interrupção aqui. Em seguida, temos que tornar o projeto responsivo nesse ponto de interrupção E para isso, vamos para a próxima palestra. 65. Como tornar o projeto responsivo para telas menores - Parte 2: Na palestra anterior, tornamos projeto responsivo a esse ponto de interrupção Aqui estou no tamanho da tela com as seguintes dimensões. 14.40 pixels de largura e 900 pixels de altura. Em seguida, temos que cuidar do próximo ponto de interrupção. Estou nesse aqui. Vamos voltar ao navegador e alterar as dimensões que precisamos aqui, 13, 66 e depois 768 Vou voltar ao código VS. Vamos até o arquivo CSS de estilo e criar uma nova consulta de mídia CSS. A largura máxima será de 13.66 pixels. A primeira coisa que vou fazer é alterar o tamanho do telefone do elemento HTML. Vou definir o tamanho do telefone para 56%, isso diminuirá o tamanho dos elementos Em seguida, vou cuidar dos projetos porque as duas primeiras seções parecem boas. Vamos cuidar dos projetos. Vou selecionar Projeto. Vou mudar a largura , serão os dois Ram. Além disso, precisamos alterar o tamanho das imagens. Vou selecionar a primeira imagem com o enésimo seletor infantil insider one A largura da primeira imagem será de 19 Ram. Depois, vou duplicar esse código duas vezes porque também precisamos personalizar as duas imagens restantes A segunda imagem, a largura da segunda imagem será de 17 Ram. Então eu vou definir a posição esquerda e vou defini-la como zero. Quanto à terceira imagem, vamos configurá-la com 90% e também vou definir a posição correta como zero, ok? Como você pode ver, a largura das imagens é alterada e elas ficam muito bonitas. Ok, em seguida, temos que cuidar da seção de modelos. Eu vou tirar as imagens. Vamos ao código do VS e selecionamos o modelo, à direita, seguido pelos elementos da imagem. Novamente, selecione, precisamos da primeira imagem. Eu vou definir, vamos fazer com que seja 30 Ram. Além disso, vou mudar as duas posições para 45%. Em seguida, vou duplicar esse código, alterar o seletor Precisamos da sua segunda imagem. Estou definindo a largura da segunda imagem. Serão 17 Ram. Ok, vamos verificar o navegador. Acho que tudo parece muito bom. Em seguida, temos que cuidar da sombra. Quero dizer, esse efeito de desfoque aqui, como você se lembra, é um dos quatro elementos da seção do modelo Vou selecionar modelos seguidos pelos quatro elementos. Vou mudar a altura interna. Vamos definir com 270 m. Já a altura também será de 70 m. Também vou mudar a posição do elemento que precisamos. A posição inferior será zero. E também precisamos da posição correta, que será de 8% Agora, temos melhores resultados, na verdade, com a página inicial. Nós terminamos. Todas essas seções parecem boas. Vamos verificar o resto das páginas. Acho que a página do cliente também parece boa. Vamos verificar a página de produtos. Vou fazer aqui algumas mudanças. Vamos ao código VS e abrir os produtos do arquivo CSS. Vou criar um novo mediário C. Especifique o máximo que será de 13.66 pixels. Antes de tudo, vou cuidar das imagens. Vamos selecionar o conteúdo dos produtos. Nesse momento, precisamos de uma imagem com seletor infantil. Vou selecionar a primeira imagem. Vamos mudar as alturas internas. Vou definir a largura para 30 Ram. Então, a altura será de 60 Ram. Também vou mudar a posição da imagem. Vamos definir a posição superior para 45% Quanto à direita, a posição será de 13% A primeira imagem é personalizada. Em seguida, temos que cuidar da segunda imagem. Vou duplicar esse código aqui. Então eu vou mudar o seletor, precisamos da segunda imagem dela A largura será de 17 Ram. Então eu vou me livrar da altura, mudar para a posição, vai ser 20% Quanto à posição correta, vou fazer com que seja 29% Ok, a segunda imagem parece boa Em seguida, temos que cuidar da terceira imagem. Vamos continuar e duplicar novamente esse código que precisamos. Terceira imagem, vou definir com 226 Ram. Então precisamos aqui da posição inferior, será de 28%. Então eu vou definir a posição correta para 3%. As imagens parecem boas Na verdade, com essa parte aqui estamos, pronto. Vamos seguir em frente e cuidar do conteúdo promocional. Eu seleciono conteúdo promocional, vamos mudar de altura. A largura será de 60%. Quanto à altura, vou fazer com que seja de 40 Ram. Em seguida, vou personalizar um círculo grande. Depois de passar o mouse sobre o conteúdo promocional, seleciono um círculo grande com a classe animada Eu vou mudar a escala. Vai ser 1.3 Agora temos melhores resultados. Na verdade, acho que precisamos personalizar o título porque acho que é maior do que precisamos aqui. Vou selecionar conteúdo promocional com elementos de cabeçalho H one. Vamos definir o tamanho para três agora. Parece muito bom. Em seguida, eu cuido da sombra. Vamos selecionar Promo Shadow. Vou mudar a posição inferior. Vai ser -14% Então eu vou mudar a sombra, quero dizer, a posição inferior da sombra Depois de passarmos o mouse sobre o conteúdo promocional, vou duplicar esse Em seguida, precisamos adicionar aqui a classe animate. Vou definir a posição inferior para 17%. Ok, agora está tudo bem. E, na verdade, com esta seção, terminamos. Vamos verificar outras páginas. A página de contato parece boa. Acho que a página da conta também parece boa. Em seguida, temos aqui a seção de preços. Também parece bom. Eu acho que é isso. Sobre os pontos de interrupção, o projeto parece bom Vou verificar esse ponto de interrupção. O próximo ponto de interrupção é esse aqui, o tamanho da tela com as dimensões 12, 80 pixels de largura e 780 pixels de altura No ponto de interrupção, precisamos alterar o tamanho da fonte do elemento H mel Isso é tudo sobre esse ponto de interrupção. Não vou dedicar uma nova videoaula sobre esse Vou personalizar o projeto no ponto de interrupção. Nesta palestra, vamos ao código VS e abriremos o arquivo CSS estilizado Vamos criar uma nova consulta de mídia CSS com largura máxima de 12.80 pixels. Em seguida, selecione o elemento Htimil e altere o tamanho do telefone. Vai ser de 52% Então eu vou mudar aqui as dimensões Então, vamos verificar o projeto. Como você pode ver, tudo parece bem. Não precisamos mudar nada nesse ponto de interrupção. Na verdade, esqueci uma coisa na página inicial. Ainda não verifiquei o player de vídeo. Esse é o meu erro. Mas, como você pode ver, parece bom. Não precisamos mudar nada aqui. Ok, isso gira em torno desses pontos de interrupção Eu vou verificar este também. Em seguida, temos que cuidar desse ponto de interrupção aqui. Para isso, vamos passar para a próxima palestra. 66. Como tornar o projeto responsivo para telas menores - Parte 3: Na palestra anterior, fizemos com que o projeto respondesse a esses dois pontos de interrupção aqui Agora temos que seguir em frente e cuidar do próximo ponto de interrupção, que terá 1024 pixels de largura e 768 pixels de Vamos voltar ao navegador e alterar as dimensões. Aqui precisamos de 1.024,7 68. Vamos voltar ao código do VS e criar uma nova consulta de mídia CS. No arquivo de estilos, vou definir a largura máxima como 1024 pixels A primeira coisa que vou fazer é cuidar da navegação. Vamos seguir em frente e não selecionar nenhuma peça e alterar o preenchimento. Vou definir o preenchimento para 0,5 quadro. Depois vou cuidar da embalagem dos itens da Nova Vou selecionar itens Nova, vou definir a largura para 65%. Como você pode ver, os itens de navegação parecem bons. Em seguida, vou cuidar do logotipo. Vou selecionar Logotipo seguido pelos painéis. Mas, neste caso, vou selecionar o primeiro elemento panorâmico de que precisamos aqui, seleção infantil com o valor um. Vou definir a fonte 2,5 Ram. Então eu vou duplicar esse código. Vou adicionar aqui elementos de extensão. Vamos definir o tamanho da fonte para 1,5 Ram. Em seguida, vou selecionar o segundo elemento de extensão. Vou copiar esse código aqui. Vamos mudar o enésimo seletor de filhos. Precisamos aqui de dois. Quanto ao tamanho do telefone, vou fazer com que ele execute 1.2. É isso aí, sobre o logotipo. Em seguida, vou cuidar do banner. Vou selecionar o banner. Eu vou mudar a posição do banner. Vamos definir a posição para 16% Quanto à posição esquerda, vou fazer com que seja 18%. Em seguida, vou cuidar dos títulos. Vamos selecionar Banner com H, um elemento de cabeçalho. Vou definir o tamanho da fonte para nove Ram. Quanto ao segundo cabeçalho, vou duplicar esse código que precisamos aqui, banner três Quanto ao tamanho da fonte, serão dois. Ok, o banner parece bom. Em seguida, vou cuidar dos planos de fundo. Precisamos fazer pequenas mudanças. Vou selecionar um VG e vou definir a posição correta para -5%. Na verdade, antes disso, precisamos cuidar do plano de fundo principal Vou selecionar G main. Vamos definir a posição esquerda para -25% Quanto ao terceiro plano de fundo, vou selecionar o segundo plano Vamos definir com 60% Ok, acho que os planos de fundo parecem bons. E na verdade, com o cabeçalho, terminamos Em seguida, temos que cuidar da seção de serviços. Estou selecionando Serviços. Vou definir a altura dos serviços para 190 de altura de visualização. Então, vamos mudar a margem. Vou definir a margem para 15 Ram nos lados superior e inferior. Quanto aos lados esquerdo e direito, vou definir a margem para zero novamente. Em seguida, vou cuidar das formas, dos planos de fundo, do círculo e desse retângulo Vou selecionar os serviços G one. Eu vou mudar a posição. A primeira posição será -15%. Então eu vou definir a posição correta para 3%. Além disso vou definir dez alturas para 60 Ram Eu vou fazer o motor dos elementos. Vamos definir a altura para 60 Ram também. Ok, aqui temos o círculo, e acho que temos resultados muito melhores. Vamos cuidar do retângulo. Na verdade, vamos duplicar esse código. Altere o nome da classe que precisamos aqui. Quanto às posições, vou definir a posição inferior. Para -12%, vou usar a posição esquerda e o valor será 5%. Quanto à altura do quando, vou deixar essas duas linhas de código aqui Vamos ao navegador. Como você pode ver, temos aqui um retângulo e na verdade, esta seção parece boa Só precisamos fazer sua pequena alteração. Precisamos aumentar o espaço entre esses itens. Vou selecionar a lista de serviços agora. A lista de serviços justifica a propriedade do conteúdo com o centro de valores, em nosso caso, nesse tamanho de tela Vou alterar o valor da propriedade justify content e vou configurá-la para espaçar uniformemente Agora o espaço é muito maior e acho que parece muito melhor. Ok, então com a seção de serviços, terminamos. Em seguida, temos que cuidar da seção de modelos porque a seção do projeto parece boa. Vamos cuidar da seção de modelos. Eu vou tirar o lado esquerdo. Vamos deixar os modelos. Eu vou mudar o preenchimento. Digamos que preenchimento até 25 quadros no lado superior, depois dez RAM no lado direito, zero no lado inferior e cinco quadros no Em seguida, vou tirar você do cabeçalho. Vamos prosseguir e selecionar os modelos esquerda H, um elemento de cabeçalho. Vou mudar o tamanho do telefone , serão cinco Ram. Então eu vou duplicar esse código que precisamos aqui. Parágrafo, vou alterar a largura do parágrafo. Serão 45 Ram. Quanto ao tamanho do telefone, vou configurá-lo para 1,5 Ram. O título e o parágrafo parecem bons. Em seguida, temos que cuidar do fundo. Vou selecionar dez pratos, PTN. Em primeiro lugar, vou diminuir a largura. Vamos configurá-lo para 27 Ram. Em seguida, precisamos mudar a altura. Serão 5,5 Ram. Em seguida, altere o tamanho do telefone. Vou configurar para 1,6 Ram. Tudo bem, isso fica do lado esquerdo. Vamos cuidar do lado direito. Vou personalizar as imagens. Vamos selecionar os modelos corretamente, seguidos pela imagem. Nesse caso, precisamos da primeira imagem. Vamos usar o seletor de gráficos e selecionar a primeira imagem. Eu vou mudar a posição superior, vai ser 45% Além disso, vamos mudar a largura. Vou fazer com que seja de 25 quadros. Então, vamos duplicar esse código. Precisamos da segunda imagem dela. A posição superior será de 25% Então, precisamos que a posição esquerda seja de 20%. Quanto à largura, vou dizer 214 Ram Finalmente, precisamos cuidar da terceira imagem. Vamos duplicar esse código, alterar o valor do seletor de gráfico que precisamos aqui três No caso da terceira imagem, precisamos que duas posições sejam 27%. Então eu vou me livrar da posição esquerda e vamos configurar com 240 Ram Ok, as imagens parecem muito boas. Em seguida, vou cuidar do botão, quero dizer, do botão play. Vamos continuar e selecionar o botão play. Vou ajustar a altura de ambos para 17 Ram. Além disso, vou personalizar os elementos antes de sentar do botão play. Vamos adicionar aqui antes e definir as alturas, ambas com 23 Ram. Ok, então o botão é personalizado. E, finalmente, vou cuidar do efeito blar aqui Precisamos selecionar modelos com quatro pseudoelementos. Vou definir as alturas, ambas para 60 Ram, e depois mudar a posição inferior para 10%. Ok. Acho que fica na página inicial no ponto de interrupção. Tudo parece bom. Vamos verificar o reprodutor de vídeo, ele também parece bom. Vamos seguir em frente e verificar outras páginas. A página de clientes parece boa. Quanto à página de produtos, vou fazer aqui algumas mudanças. Vamos para o código VS e abrir o arquivo CSS do produto. Vou criar uma nova consulta de mídia CSS com a largura máxima de 1024 peças Em primeiro lugar, vou cuidar do título do parágrafo no lado esquerdo da primeira seção. Aqui. Vou selecionar o conteúdo dos produtos. Precisamos do conteúdo dos produtos e, em seguida, precisamos dos elementos de cabeçalho H one. Vou mudar o tamanho da fonte. Vai ser Ram. Vamos duplicar esse código e selecionar o parágrafo. O tamanho da fonte no caso do parágrafo será 1,5 redondo. É isso aí, sobre o lado esquerdo. Em seguida, vou cuidar das imagens do lado direito. Vamos seguir em frente e selecionar Produtos > Conteúdo correto, seguido pelos elementos da imagem. E então precisamos selecionar o gráfico. Como temos que selecionar a primeira imagem, vou definir 228 Ram Quanto à altura, será de 55 Ram. Então, vou duplicar esse código duas vezes porque também precisamos cuidar das duas imagens restantes Precisamos aqui da imagem dois. Vamos nos livrar da altura e mudar a largura. Serão 15 Ram. Quanto à terceira imagem, vou definir com 224 Ram Precisa da imagem três. Ok, acho que a primeira seção parece boa. Em seguida, temos que cuidar do conteúdo promocional. Então, vamos selecionar esse elemento. Vamos definir com 70% , então eu vou cuidar do título. Vamos selecionar o conteúdo promocional, seguido pelo elemento de cabeçalho H one. Vou definir o tamanho do telefone para 2,5 Ram. Agora, o título parece bom. Em seguida, temos que cuidar das formas, quero dizer, do retângulo e dos círculos Vamos começar com o retângulo promocional. Vou definir a altura de 50 m. Quero dizer, ambas as propriedades, depois vou selecionar o pequeno círculo. Vamos mudar a posição do círculo. Vou definir a primeira posição 25%. Quanto à posição correta será 40%. Em seguida, vou cuidar dos círculos grandes. Selecione um círculo grande e, em seguida, vou pegar a altura interna a partir daqui. Vamos definir a altura, ambas em 40 gramas. Ok, o conteúdo do Romo parece bom. Vou mudar aqui a posição do círculo grande. Depois de passarmos o mouse sobre o elemento, selecionarei um círculo grande Com a turma animada, vou definir a posição ampla para -2% Então, agora eu acho que temos resultados muito melhores, na verdade, com esta página. Nós terminamos. Vamos verificar a página de conteúdo. Parece bom. A página da conta parece boa. Bem como para a página de preços. Vou fazer aqui algumas mudanças. Vamos abrir os preços do arquivo e criar uma nova consulta de mídia CSS. Vamos especificar aqui a largura máxima. Serão 1024 pixels. Vou selecionar o preço do carro. Vou definir a largura de 24 para. Então eu vou tirar você do retângulo. Vamos selecionar o retângulo. Eu vou mudar a posição. A posição superior será de 28% a posição esquerda será de 5%. Além disso, vou mudar com a altura Vamos definir os dois para 40 gramas. Vamos verificar o navegador. Aqui temos o retângulo. Em seguida, vamos cuidar do círculo grande. Vou duplicar esse código. Vamos mudar o nome da classe. Precisamos de um círculo grande em vez de propriedades no topo e na esquerda. Precisamos das posições inferior e direita. A posição inferior será 10%. Então eu vou mudar da esquerda para a direita, e a posição direita será 5%. Quanto à altura interna, vou definir as duas para 30 Ram. Na verdade, o código não é aplicado aos elementos porque precisamos aqui precificar um círculo grande e não apenas um círculo grande. Agora vamos verificar o navegador, o código é aplicado. Um círculo grande é bom. Vamos tirar você do pequeno círculo. Vamos duplicar esse código. Estou acostumado, sua posição superior será de 30%, então precisamos que posição correta seja de 5%. Provavelmente está dentro da altura. Vou definir os dois para seis rap que precisamos aqui. Círculo pequeno. Ok, na verdade, acho que podemos mover o círculo um pouco para cima. Então, vamos diminuir a primeira posição. Vamos configurá-lo para 28%. Vou alterar novamente o valor. Digamos que 25% Vamos ficar na primeira posição em 26% Ok, acho que isso é sobre esses pontos de ruptura Todas as páginas parecem boas. Em seguida, temos que tornar nosso projeto responsivo em tablets. Vamos verificar esse ponto de interrupção aqui e passar para a próxima palestra, onde começaremos a tornar o projeto responsivo em tablets 67. Como criar um menu de hambúrgueres - Parte 1: Tudo bem, na palestra anterior terminamos de trabalhar no ponto de interrupção Como eu disse, temos que seguir em frente para tornar o projeto responsivo em tablets Quero dizer, nesses pontos de interrupção aqui, vamos ao navegador e alteramos as dimensões da tela Precisamos aqui de 820 pixels e depois de 11 80 pixels. Esse é o tamanho da tela do tablet. Vamos ao código VS e ao arquivo CSS de estilo aberto. Vou criar uma nova consulta de mídia CS. Vamos especificar a largura máxima. Serão 820 pixels. Ok. Então, antes de começarmos a escrever o código, vou verificar a versão final do nosso projeto nesse ponto de interrupção. Como você pode ver, não temos mais aqui os itens de navegação. Você pode ver aqui o ícone do menu. Se eu clicar nele, chegaremos aqui ao menu de hambúrguer. Temos aqui itens de navegação. Abaixo, você pode ver a parte inferior dos preços. Se eu clicar em qualquer um dos itens de navegação , chegaremos aqui aos menus suspensos. Temos que mudar a navegação. Quero dizer, temos que transformar a navegação para que pareça assim. Vamos ao código VS. A primeira coisa que vou fazer é ocultar os itens de navegação. Vou selecionar itens Nova. Em seguida, vou adicionar aqui a tela N. Como posso ver, os itens de navegação estão ocultos. Em seguida, vou criar o ícone do menu. Para isso, vou até o índice do HTM do arquivo logo após o logotipo Vou inserir novos comentários para o ícone do menu. Então eu vou abrir o Deep tug, vai ser o ícone do menu O ícone do menu consistirá em duas linhas. Vou abrir o Deep Tug com a linha de aulas. E então precisamos da linha um. O primeiro é o nome comum da classe. Quanto ao segundo, é um nome de classe individual. Vou duplicar esse código porque precisamos de duas linhas Vamos mudar o nome da classe. Vai ser a linha dois. Tudo bem, o ícone do menu foi criado. Em seguida, vou personalizar esse elemento. Vou selecionar o ícone do menu. Vamos começar, podemos esconder os dois em quatro Ram. Vou adicionar aqui uma cor de fundo temporária para exibir o ícone Vamos ao navegador. Como você pode ver, temos aqui o ícone do menu. Ok, vamos definir a posição do ícone do menu. Vou configurá-lo para a posição amino absoluta de cinco carneiros. Certo? A posição também será de cinco Ram. Tudo bem, depois disso, eu vou mostrar as linhas. No momento, eles são apenas desenvolvimentos vazios. É por isso que não podemos ver as linhas na página. Vou selecionar a linha, vamos definir com 100% e a altura será de 0,4 Ram. Quanto à cor de fundo, vou defini-la como branca. Agora vou me livrar da cor de fundo vermelha temporária. Temos aqui duas linhas. Agora, como você pode ver, precisamos separar essas linhas e, para isso, podemos usar a caixa flexível Vou adicionar uma caixa flexível ao ícone do menu. Quando é exibido de forma flexível, temos que mudar a direção porque as linhas devem ser colocadas verticalmente em uma coluna A direção da flexão será a coluna. Então, precisamos de espaço entre as linhas. E para isso, vou justificar o espaço de conteúdo entre eles. Não precisamos desse espaço aqui. Na verdade, a altura do ícone do menu deve ser de dois m e não de quatro m. Agora, o ícone do menu parece bom. Em seguida, vou transformar a navegação e fazer com que pareça assim. Precisamos mudar a cor de fundo da navegação e também a cor do texto e do ícone. Vamos ao código VS. Vou selecionar Nuer. Vamos mudar a cor de fundo. Vai ser branco. Em seguida, vou mudar a cor do logotipo. Vamos selecionar Nuer seguido pelo logotipo. E então precisamos do elemento Span. Vou definir a cor para F40. Então eu vou pegar sua sombra de texto, digamos para None. Como você pode ver a cor do texto, quero dizer que a cor do logotipo foi alterada e parece boa. Em seguida, vou personalizar o ícone do menu. Vou mudar a cor do plano de fundo. Vamos usar aqui a mesma cor que usamos há um minuto. Precisamos aqui de 40. Como você pode ver, as linhas têm cores de fundo diferentes. Em seguida, vou transformar o ícone no botão de fechamento X. Para isso, vou selecionar a linha um. Vou usar a propriedade de transformação Com a função de rotação, o valor será de 45 graus. Além disso, vou mover um pouco a linha usando a função y traduzida. O valor será 1,2. Vamos duplicar esse código e personalizar a segunda linha que precisamos aqui, girar com menos 45 graus Quanto à função y traduzida, precisamos aqui de menos 1.2. Vamos verificar o navegador. Como você pode ver, temos aqui x. Agora temos que cuidar dos itens de navegação. No momento, eles estão escondidos. Vou me livrar de display none Em vez de display none, vou adicionar aqui display flex Precisamos colocar os itens de navegação verticalmente em uma coluna Portanto, precisamos que a direção flexível seja uma coluna. Em seguida, vou flexionar os itens usando o conteúdo justificado. Flexione, inicie e alinhe itens. Propriedades e valores do Flex Start. Vamos verificar o navegador. Temos aqui itens de navegação. Precisamos mudar a posição do elemento. Vamos configurá-lo como absoluto. Então eu vou definir duas posições para 12 Ram, porque a altura da parte superior é 12 Ram. Quanto à posição esquerda, vou defini-la como zero. Em seguida, vou definir com a altura, a largura dos itens de navegação será de 100%. Quanto à altura, vou fazer aqui um pequeno cálculo função de corte será 100, a altura visor será -12 gramas, que é a altura do Se eu adicionar aqui a cor akron com valor 245 , obteremos esse resultado aqui Tudo bem, agora temos que personalizar os itens de navegação. Vou selecionar o item de navegação , mas preciso excluir o último item Quero dizer, a parte inferior que precisamos aqui, não a pseudoclasse, temos que adicionar aqui a última criança Agora, o código, quero dizer, os blocos serão aplicados a todos os itens de novembro, exceto ao último filho. Na parte inferior, vou definir a largura para 100%, então a altura será de 12 gramas. Além disso, vou usar o flex box. Precisamos alinhar os itens no centro. Em seguida, vou criar algum espaço no lado esquerdo usando preenchimento. Deixou três Ram. Os itens de navegação estão bem alinhados. Agora temos que personalizar os links. Não vou selecionar nenhum item de que precisamos aqui. Nenhum item seguido pelos elementos do link. Novamente, temos que excluir a parte inferior. Vou inserir aqui. Sem BTN. Vamos mudar a cor do link. A cor será de 0926 a sete. E também vamos nos livrar da sombra. Vamos definir a sombra tecnológica como zero. Como você pode ver, os links parecem bons. Depois disso, vou criar esses sinais de adição aqui. E eu vou fazer isso usando quatro elementos. Vamos selecionar Nenhum item, seguido pelos quatro elementos como o conteúdo que vou inserir aqui, mais seno Então, precisamos do tamanho da fonte. Vai ser a forma. Além disso, vou mudar a cor. Vamos usar aqui a cor F4a0. Aqui temos os senos positivos. Na verdade, não precisamos de mais seno com o botão, vou excluir o botão aqui Para isso, precisamos usar novamente. Então temos que adicionar aqui a última criança. Agora, como você pode ver, não temos mais aqui o sinal de mais. Tudo bem Agora precisamos cuidar da posição do sinal de mais. Para isso, vou definir a posição como absoluta. Então, precisamos que a posição seja 50%, pois a posição correta será zero. Em seguida, precisamos centralizar o elemento verticalmente. Para isso, vou transformar, traduzir Y -50% Como você pode ver, temos aqui o seno positivo Em seguida, vou definir a largura e a altura. A largura será dez. Quanto à altura, vou dizer que seis correram. Precisamos centralizar os elementos. Para isso, vou usar o Display Flex com conteúdo justificado e um centro de itens de linha Ok, é isso mesmo, sobre o sinal de mais. Em seguida, temos que cuidar do último item de navegação, que é esse botão aqui. Quero dizer, o preço mais baixo. Vou selecionar Novem seguido pelo último. Veja a classe, vamos definir a posição absoluta. Então, precisamos que a posição inferior seja zero. Também precisamos da posição esquerda, também será zero. Em seguida, temos que definir largura e altura. A largura será de 100%. Quanto à altura, vou fazer com que seja 12 Ram. Em seguida, vou definir a cor do plano de fundo. Vai ser branco. Vamos verificar o navegador que temos aqui na parte inferior. Vamos usar o flex box para alinhar o elemento. Vamos configurar a tela para flexionar. Então, precisamos justificar o centro de conteúdo e alinhar o centro dos itens centralizar a parte inferior Como você pode ver, a parte inferior está centralizada. Vamos adicionar aqui a sombra usando a sombra da caixa. Os valores serão 01 Ram, dez Ram como cor, vou usar R GPA Os valores serão 130-16-2235, e a Opacidade 0.2 Isso é tudo sobre os Agora temos que personalizar o botão em si. Vamos continuar e selecionar PTN. Vou definir com 290, 5%, então a altura será de seis Ram Seja qual for a cor de fundo, vou usar 40. Então, precisamos que a cor seja branca. Finalmente, vou definir o tamanho do ponto para 2,2 m. Ok? Então, como você pode ver, a parte inferior parece muito boa. Na verdade, temos aqui o mesmo resultado que precisávamos em seguida. Temos que fazer o menu de hambúrguer funcionar e também cuidar dos menus suspensos para isso Vamos passar para a próxima palestra. 68. Como criar um menu de hambúrgueres - Parte 2: Então, na palestra anterior, começamos a tornar o projeto responsivo para tablets Você pode ver aqui as dimensões dos tablets. Estamos criando o menu de hambúrguer. Agora, nesta palestra, vou personalizar os menus suspensos porque eles não parecem muito bons Vou estilizar todos os cinco menus suspensos. Vamos voltar ao código DS. A primeira coisa que vou fazer é esconder esses triângulos aqui, porque não precisamos mais deles. Quero dizer, não precisamos deles para tablets. Vamos selecionar novem seguido pelo elemento after que precisamos aqui Para ocultar o elemento after, vou usar display none. Como você pode ver, os triângulos estão escondidos. Em seguida, vou selecionar a primeira lista suspensa. Vou definir com, vai ser 100% Então precisamos mudar a primeira posição. Serão 12 gramas. Quanto à posição da perna, vou colocá-la em zero. Vamos verificar o navegador. Como você pode ver, a posição foi alterada. Na verdade, vemos aqui os itens navais. Isso significa que o menu suspenso acabou atrás dos itens de navegação Para corrigir esse problema, vou usar a propriedade index. Vamos configurá-lo para 100. Agora, o problema está resolvido. Em seguida, vou me livrar das ideias de fronteira a partir daqui. Vou definir o raio da borda como zero, pois vou me livrar da sombra da caixa, vamos defini-la como nenhuma Então eu vou mudar a direção da flexão. Quer dizer, vou colocar recursos e serviços um em cima do outro verticalmente Portanto, vou definir a direção da flexão para a coluna depois me livrar do pudim Vou defini-lo como zero, ou seja, na parte superior para baixo, quero dizer, na embalagem seguinte, vou cuidar dos lados esquerdo e direito porque, no momento, o menu de cima para baixo parece horrível Vou selecionar De cima para baixo, um à esquerda. Vamos definir com 100% , então a altura será 50%. Em seguida, vou criar espaço na parte inferior usando a parte inferior marchando Vamos configurá-lo para cinco Ram. Finalmente, precisamos de acolchoamento. Vamos configurá-lo para dois Ram. Tudo bem, depois disso, vou selecionar a lista de recursos. Vamos selecionar a lista de recursos. Vou ajustar as alturas para 100% depois vou usar o Flex Box Vamos configurar a tela para flexionar. Então precisamos mudar a direção. Vamos definir a direção da flexão para a coluna. E, finalmente, temos que embrulhar os itens flexíveis. Quero dizer, temos que colocar os itens flexíveis em algumas linhas diferentes Precisamos que o flex wrap seja encapsulado no lado esquerdo do menu suspenso Parece bom. Em seguida, vou cuidar do lado direito. Vamos prosseguir e selecionar o menu suspenso à direita. Vou definir a largura para 100% e a altura será 75 Ram. Na verdade, não Ram, mas por cento. Em seguida, vou definir o preenchimento para zero na parte superior, depois duas RAM no lado direito, 13 RAM na parte inferior e duas RAM no lado esquerdo Ok, em seguida, vou selecionar os serviços suspensos. Vamos definir a largura para 100% , depois a altura será 100%. Então precisamos do Display Flex dela Além disso, vou mudar a direção em que será a coluna. E, como na lista de recursos , na verdade, estou usando aqui os mesmos valores. Vamos apenas adicionar aqui o nome da classe. E livre-se desse código a partir daqui. Como você pode ver, o lado direito parece bom. Vou mudar a cor de fundo. Vamos adicionar aqui a cor de fundo, branca. Ok, acho que o primeiro menu suspenso parece bom. Em seguida, temos que cuidar do segundo menu suspenso. Vou selecionar o menu suspenso dois. Primeiro de tudo, vamos definir dentro da altura. A largura será de 100%. Quanto à altura, vou configurá-la para 75 Ram. Então eu vou mudar a posição. A primeira posição será de 12 Ram. Quanto à posição esquerda, vamos configurá-la para zero e depois verificar o navegador. Aqui temos a segunda lista suspensa. Como o primeiro, temos que usar a propriedade index porque ela acabou por trás dos itens Vou definir o índice para 100. Agora, o problema está resolvido. Em seguida, como você acha, temos que mudar a direção da caixa flexível Vou mudar, vou definir a direção flexível para a coluna que precisamos aqui, coluna OK. Em seguida, vou me livrar do raio, vamos configurá-lo para zero Além disso, não precisamos de sombra de caixa, não será nenhuma. E então vou definir o preenchimento para duas Ram no lado superior, até Ram no lado direito, zero na parte inferior e duas Ram no lado esquerdo Em seguida, vou criar algum espaço entre os itens. Vou selecionar o menu suspenso dois com desenvolvimento, vamos definir a margem como zero na parte superior, 0,5 RAM no lado direito, duas RAM na parte inferior e 0,5 RAM no lado esquerdo. Temos aqui algum espaço. Em seguida, vou selecionar os elementos e diminuir seu tamanho. Vamos selecionar Drop Down to, então precisamos de desenvolvimentos. E então vamos definir o tamanho da fonte para cinco Ram. Bem, agora temos aqui o problema com a altura da queda. Eu tenho aqui, altura 75 Ram. Vamos nos livrar desse valor partir daqui e definir a altura como automática. Vamos verificar os resultados. Ok, o menu suspenso parece muito bom, na verdade, com o segundo menu suspenso, terminamos Vamos seguir em frente e cuidar do resto dos menus suspensos. Na verdade, vamos usar alguns valores e propriedades semelhantes para escrever o mesmo código repetidamente. Vou selecionar todos os menus suspensos simultaneamente. Vamos começar com o primeiro, depois vou duplicá-lo cinco vezes, alterar os números que precisamos Solte dois e depois solte três. Em seguida, temos a lista suspensa quatro e, finalmente, a lista cinco. Vou pegar daqui algumas propriedades como essas duas propriedades aqui. Vamos cortá-los. Além disso, precisamos da sombra da caixa e do raio da borda e da propriedade index Vamos adicioná-los aqui. excluir essas propriedades do segundo menu suspenso. Ok, agora eu acho que todos os cinco menus suspensos devem ficar bem. Vamos verificar se os produtos têm boa aparência. Em seguida, temos o contato. Também parece bom. E o menu suspenso da conta também parece bom. Ok, todos os cinco menus suspensos são personalizados. Em seguida, temos que fazer com que o menu de hambúrguer funcione para isso. Vamos passar para a próxima palestra. 69. Fazendo o menu de hambúrguer funcionar: Na aula anterior, personalizamos os menus suspensos para todos os itens de navegação Agora, nesta palestra, vou fazer o menu de hambúrguer Vamos dar uma olhada no projeto finalizado. Por padrão, temos aqui o ícone do menu e os itens de navegação estão ocultos. Se eu clicar no ícone , a navegação será exibida. Itens de navegação com os menus suspensos. Eu vou cuidar dessas coisas nesta palestra. Vamos ao código VS. A primeira coisa que vou fazer antes começarmos a fazer a navegação funcionar um pequeno erro da palestra anterior Se dermos uma olhada no menu suspenso dois, você verá que falta aqui direção flexível com a coluna de valor Nós o removemos. Em vez dessa linha, precisamos remover a caixa descartada em nenhuma. Esse foi meu erro. Ok, agora estamos prontos para começar a fazer o menu de hambúrguer funcionar A primeira coisa que vou fazer é acessar arquivo Javascript e selecionar o ícone do menu. Vou criar uma nova variável, vamos chamá-la de ícone de menu e, em seguida, selecioná-la usando o método seletor de consultas Vou especificar aqui o nome da classe, o ícone do menu. O ícone do menu está selecionado e agora temos que adicionar um ouvinte de eventos ao ícone com clique no evento Vou adicionar um ouvinte de eventos ao ícone do menu. Como eu disse, precisamos aqui evento click seguido pela função Calbeck, que será executada assim que clicarmos no ícone do menu dentro da função Calbeck Vou adicionar novo nome de classe ao knapper usando o método togal Depois de clicar no ícone do menu, precisamos adicionar uma nova classe ao knapp E quando clicarmos novamente, teremos que remover esse nome de classe da soneca. Para isso, temos que usar o método to, precisamos aqui de uma lista de classes altas, seguida pelo método togal Vou adicionar aqui uma nova classe, vamos chamá-la de hambúrguer Vamos para o arquivo CSS. Vou ocultar os itens de novembro usando display none. Em seguida, temos que adicionar a classe hambúrguer recém-criada aos seguintes elementos O primeiro são os itens de novembro, precisamos adicionar aqui o hambúrguer. Em seguida, vou adicionar o hambúrguer da classe à barra Também precisamos adicionar hambúrguer aqui. Então eu vou adicionar hambúrguer ao Novem. Então, precisamos do Novem para os elementos de link. Finalmente, vou adicionar hambúrguer às linhas. Quero dizer, a linha um e a linha dois como um hambúrguer aqui C. Ok, vamos ao código VS e verifique o resultado. Depois de clicar no ícone do menu , os itens de navegação aparecerão. Então, quando clicarmos no botão X de fechamento, a altura da navegação estará correta. Tudo funciona bem. Em seguida, temos que mudar a cor do ícone do menu porque ele deve ser branco. Vou encontrar uma linha e mudar a cor para branca, pois vou aderir à transição para um efeito mais suave que precisamos transformar aqui Então, a duração será de 0,3 segundo. Também vou usar a função de tempo de transição chamada. Agora, como você pode ver, temos aqui linhas brancas. Se eu clicar no ícone do menu, as linhas se transformarão com um efeito mais suave Mas quando exibimos a navegação , não vemos mais o ícone do menu porque as linhas são brancas. Temos que cuidar disso. Vou selecionar Linha com a classe de hambúrguer que temos que mudar, precisamos aqui da linha do nome da classe Precisamos mudar a cor de fundo e será f40 Ok, agora tudo funciona bem. Tudo bem. A próxima coisa que vou fazer é resolver alguns pequenos problemas aqui. Quero dizer, quando exibimos a navegação e depois rolamos para baixo, você vê que a soneca ficou pegajosa E, na verdade, não precisamos disso. Temos que evitar essa ação. Vamos voltar ao arquivo Vs e encontrar a janela com o evento de rolagem. Agora temos que usar a declaração onde precisamos se a largura da janela for menor ou igual a 820 pixels, se a barra of tiver a classe hamburger, precisamos verificar essas duas condições simultaneamente Vou usar a instrução if e a condição será largura interna da janela seja menor ou igual a 820 pixels Precisamos verificar se a lista de classes da barra contém a classe hamburger Se essa condição for verdadeira, precisamos remover o adesivo da classe da parte superior Não precisamos remover aqui nenhuma lista de classes. Temos que especificar aqui o nome da classe sticky. Além disso, precisamos usar a instrução L. Se a condição for falsa, teremos que ativar a classe como adesiva com base na posição de Se a posição de rolagem, quero dizer, rolagem da janela Y for maior que zero, então temos que adicionar a classe sticky. Caso contrário, temos que removê-lo. Precisamos passar aqui a lista de turmas do Togo. Temos que especificar aqui duas coisas. Precisamos de nomes de classes fixos e, em seguida, precisamos rolar a janela Y é maior que zero. Tudo bem, então eu acho que é isso. Agora, o código deve funcionar. Vamos verificar os resultados. Vou exibir a navegação. Então, se rolarmos para baixo, teremos aqui o mesmo resultado. Algo está errado aqui. Vamos verificar o código. A condição está correta. Temos que remover o ticket de classe da parte externa. E então temos que adicioná-lo usando a classe togal. Sim, não precisamos mais dessa declaração IF aqui. Precisamos removê-lo porque estamos adicionando a classe sticky à parte now usando o método togal Não precisamos mais da declaração if anterior. Agora, o código deve funcionar. Vamos exibir a navegação e, em seguida, rolar para baixo. E sim, não temos mais aqui a parte adesiva. OK. Se eu fechar a navegação e rolar para baixo, você verá que o ícone não está mais visível. Quer dizer, as linhas são brancas e a posição também é diferente. Não precisamos dessa posição para o ícone. Vamos cuidar disso. Vou voltar para o arquivo aves. Temos que criar uma declaração if dentro do evento scroll. Precisamos verificar se a propriedade Y da rolagem da janela é maior que zero. Se essa condição for verdadeira, adicionarei uma nova classe ao ícone do menu, que será usada no arquivo CSS. Para criar novos estilos, precisamos do ícone do menu, da lista de classes. Vou chamar a nova posição da turma porque estamos mudando a posição do ícone do menu. Caso contrário, se a condição for falsa, então precisamos da declaração L onde temos que remover a classe. Posição no menu. Além disso, precisamos de outra instrução if em que tenhamos que verificar se o cochilo contém a classe hamburger ou não Precisamos de uma declaração if com a seguinte condição. Precisamos que a classe contenha. Temos que especificar aqui o nome da classe hamburger. Se essa condição for verdadeira, teremos que remover a posição da classe do menu. Precisamos da mesma declaração. Em seguida, temos que usar a posição da classe e definir novos estilos. Vou encontrar o ícone do menu. Aqui está. Vamos usar a posição da classe seguida pelo menu. Vou definir a posição para quatro m. Então precisamos transformar translate Y -50% Vamos adicionar aqui a transição para um efeito mais suave, precisamos aqui de 0,3 segundo Além disso, precisamos mudar a cor das linhas. Vou adicionar aqui nenhum adesivo seguido pela linha. Precisamos mudar a cor da linha quando temos o adesivo alper, é por isso que eu uso cores não pegajosas. A cor de fundo será 0926 a sete. Ok, vamos verificar. Se eu rolar para baixo , a posição do ícone será alterada. E também temos aqui linhas escuras. Ok, tudo funciona bem. Em seguida, temos que cuidar dos menus suspensos. Depois de clicar no item de navegação , o menu suspenso apropriado deve aparecer Então, quando clicarmos novamente no item de navegação, ele deve se esconder. No momento, você pode pensar que já temos aqui o evento click, mas isso não está certo. É um efeito de foco. Quando você tem um tamanho de tela menor, o efeito de foco funciona novamente como um evento de clique , isso não é um evento de clique Temos que criá-lo. exibir o menu suspenso e clicar em. E também temos que transformar esse signo aqui. Precisamos do sinal de menos em vez do sinal de mais. Vamos seguir em frente e fazer isso. Vou criar uma nova variável e não haverá itens. Precisamos selecionar todos os itens de novembro. Vamos selecioná-los usando o método query select ou all. Vou especificar aqui o nome da classe. Vai ser um item de navegação. Em seguida, vou dar uma olhada nos novos itens. Vamos usar para cada método que precisamos aqui do parâmetro n item, precisamos adicionar um evento de clique a cada item de navegação precisamos aqui de nenhum item seguido pelo método add event listener Precisamos especificar aqui o evento de clique. Além disso, vou inserir aqui uma função de retorno de chamada. Agora temos que verificar se o item de navegação clicado tem uma nova classe, que será usada no arquivo CSS para criar novos estilos Quero dizer, a mesma técnica que usamos ao longo deste projeto. Novamente, precisamos verificar se o item de navegação clicado tem a nova classe Vou usar declarações if que temos que passar a seguinte condição. lista de classes Novem contém e temos que especificar aqui o nome da classe Vou chamar isso de show. Se essa condição for verdadeira, então temos que removê-la. Quero dizer, temos que desativar a visibilidade. Vou adicionar aqui o item de navegação, remover a lista de classes. Temos que especificar aqui o nome da classe show. Então, precisamos da declaração L se a condição for falsa. Se o item de navegação não tiver a classe show, teremos que percorrer todos os itens de navegação Temos que remover o show de classes de todos os itens. Depois disso, temos que adicionar a classe show ao item de navegação clicado Isso significa que precisamos ter visibilidade total. Novamente, vou aderir a novos itens de forragem. Precisamos examinar os itens do OV. Vamos aderir ao item do parâmetro. Vou remover class show do item item class list dot remove. Eu vou passar por aqui no programa de aula. E então precisamos adicionar class show ao item nob. Precisamos aqui da lista de classes de itens nob. Para adicionar, temos que especificar aqui o nome da classe, show. Novamente, quando um item de navegação é clicado , a função de retorno de chamada é executada Se o item de navegação clicado já tiver a classe show, isso significa que o item está visível no momento Nesse caso, o código remove a classe show do item clicado, ocultando-a efetivamente Então, se o item de navegação clicado não tiver a classe show, isso significa que o item está oculto no momento Nesse caso, o código primeiro remove a classe show de todos os itens de navegação. Em seguida, adiciona a classe show somente ao item de navegação clicado, tornando-a visível enquanto oculta todas as outras. Ok, espero que você entenda essas coisas. Em seguida, temos que ir ao arquivo CSS e encontrar o Drop Down. Vou selecionar o menu suspenso. Quero dizer, o nome de classe comum que precisamos aqui, Opacidade zero e visibilidade Em seguida, vou selecionar o item de navegação com o fato de passar o mouse. Então temos que usar, novamente, o menu suspenso. Precisamos do mesmo código aqui. Quero dizer as mesmas propriedades e valores. Em seguida, vou selecionar novem seguido pela turma. Então, precisamos novamente descer. Vou definir a opacidade como uma e a visibilidade visível. Mais uma vez, acho que está tudo correto. Vamos ao navegador e verificamos o resultado. Se eu clicar no item de navegação , o menu suspenso será exibido. Depois de clicar novamente no item de navegação , ele será aquecido. Como você pode ver, tudo funciona bem. Em seguida, temos que transformar o sinal de mais em menos. Vamos até o código VS e encontre item nov com quatro elementos. Aqui está. Vamos seguir em frente e não selecionar nenhum item com exibição de classe, seguido pelos quatro. Veja o elemento. Temos que mudar o conteúdo e torná-lo negativo Ok, vamos verificar o navegador. Clique no item de navegação. Então, como você pode ver, agora temos aqui sinal de menos em vez de mais, ok? Tudo ou expire. Mas temos que fazer mais uma coisa. Se eu fechar a navegação, role para baixo e clique no ícone do menu. A navegação será exibida. Mas, como você pode ver, a parte agora ainda está grudenta. E também a cor de fundo das linhas é escura. Temos que resolver esses problemas. Vou voltar para o arquivo Java Script. Vou adicionar aqui onde temos o evento de clique com o ícone do menu. Precisamos remover o adesivo de classe da parte agora. Vou adicionar aqui nenhuma opção de lista por classe. Temos que especificar aqui o nome da classe, hambúrguer. Em seguida, precisamos verificar se a classe hamburger não está presente e também se a janela está rolada Vou adicionar aqui a declaração if em que temos que passar a seguinte condição. Não precisamos do operador, então a lista de classes contém a classe hamburger Então precisamos de um operador aqui. E temos que verificar se a rolagem da janela y não é igual a zero. Se essa condição for verdadeira, se ambas as condições forem verdadeiras, significa que a classe de hambúrguer não está presente e a janela está rabiscada Nesse caso, a classe sticky será adicionada à lista aqui do Napper Precisamos aqui de Sticky. Além disso, precisamos adicionar a posição da classe ao ícone do menu aqui. Vamos pegar esse código aqui. Em seguida, precisamos da instrução L, onde temos que remover a posição da classe do ícone do menu que removemos. Ok, acho que é isso. Finalmente, terminamos o menu de hambúrguer. Vamos verificar o navegador e clicar no ícone do menu. Bem, isso não funciona. Isso significa que cometemos um erro. Vamos verificar o código. A condição dentro da declaração está correta. Em seguida, temos que adicionar adesivo a, agora precisamos da posição da classe para o ícone do menu E então temos que remover a posição da classe do ícone do menu. Bem, temos aqui um erro. Não sei por que adicionei aqui essa linha. Na verdade, precisamos daqui agora. Separe a lista de turmas, remova o adesivo da turma. O erro é meu agora. Acho que deveria funcionar. Vamos clicar. E sim, tudo funciona bem. Vamos rolar e clicar. Então, como você pode ver, tudo funciona perfeitamente. Tudo bem, vamos conversar sobre o menu de hambúrguer. Em seguida, precisamos personalizar o restante das seções da página inicial. E também temos que personalizar as outras páginas. Para isso, vamos passar para a próxima palestra. 70. Tornando o projeto responsivo para tablets: Na palestra anterior, terminamos trabalhar no menu de hambúrgueres Funciona bem. E agora temos que seguir em frente e personalizar o resto das seções da página inicial. E também temos que personalizar as páginas restantes. Vamos até o código VS e selecione o cabeçalho. Vou mudar a altura do cabeçalho. Vai ter 70 de altura de visão. Em seguida, vou cuidar desses planos de fundo, aqui estou nesses três elementos Vamos selecionar PG Main. Eu vou aumentar a largura, vai ser para 50% e também vou mudar a posição do elemento. A posição superior será -105% Quanto à posição esquerda, vou definir para -50%. É isso mesmo, sobre o primeiro plano de sobre o Em seguida, temos que cuidar desses dois planos de fundo. Aqui, vou selecionar G one Vamos mudar a posição correta. Vai ser -10%. Vamos duplicar esse código e personalizar a segunda rodada, precisamos alterar o nome da classe Serei G dois no caso do segundo plano de fundo vou me livrar do sinal de menos Vamos deixar aqui apenas 10% Ok, vamos sentar no cabeçalho, tudo parece bem. Em seguida, temos que cuidar da seção de serviços. Vamos continuar e selecionar Serviços. Eu vou mudar a altura. Vai ter 120 pés de altura. Então eu vou cuidar do plano de fundo. Estou nessas formas aqui. Vamos selecionar os serviços G one. Vamos mudar a posição. Duas posições serão -20% Quanto à posição correta, vou configurá-la para -5%. Então, vamos duplicar esse código e alterar o Precisamos aqui de dois serviços. No caso do segundo elemento, vou chegar à posição correta. Então precisamos aqui da posição esquerda. Vou configurá-lo para zero. Ok, isso é tudo sobre a seção de serviços. Em seguida, temos que cuidar da seção do projeto. Vou personalizar a navegação. Vamos continuar e selecionar Filtro de. Eu vou mudar a largura. Vai ser 90%. Então eu vou selecionar o elemento de link que precisamos preencher aqui, vamos definir a largura para 12. Quanto à altura, vou fazer com que seja de 4,5 Ram. Como você pode ver, a navegação parece boa. Em seguida, temos que cuidar da lista de projetos. Vou selecionar a lista de projetos e definir com 90%. Em seguida, vou cuidar da seção de modelos porque acho que terminamos com a seção de projetos. Vamos prosseguir e selecionar elemento da seção com os modelos de nome da classe. Vou definir a altura para 90 Ram. Na verdade, não M, mas coloque a altura, então vou definir a margem inferior para menos um Ram Então eu vou cuidar do lado esquerdo. Vamos selecionar os modelos restantes. Vou definir a posição esquerda para 5% Além disso, vou mudar o preenchimento O preenchimento será 12 na parte superior, depois dez RAM no lado direito, zero na parte inferior e dez RAM no lado esquerdo Ok, depois disso, vou cuidar das imagens do lado direito. Vamos seguir em frente e selecionar modelos. Nesse momento, precisamos de uma imagem com o enésimo seletor infantil. Vou selecionar a primeira imagem. Vamos mudar a largura. Serão 30 corridas. Em seguida, mudo para a posição, vou definir para 70%. Vamos duplicar esse código duas vezes porque também precisamos personalizar as duas imagens restantes Vamos mudar o seletor infantil, precisamos aqui 2.3 no caso da segunda imagem Vou definir a largura para 18 Ram. Então a posição superior será de 2%. Além disso, precisamos da posição esquerda, vamos configurá-la para -15%. Ok, em seguida, temos aqui a terceira largura da imagem de 48 Ram Quanto à primeira posição, vou passar para a posição 57%. Ok, mudamos as posições das imagens Em seguida, temos que pegar aqui esse elemento. Aqui, quero dizer o efeito de desfoque, os quatro elementos. Então, vou selecionar modelos seguidos pelos quatro elementos su. Vamos definir com uma altura de 60 Ram. Em seguida, vou definir a posição inferior para -5% Em seguida, a posição correta será 5%. Além disso, vou mudar o plano de fundo Quero dizer, gradiente linear, vou mudar a direção, vai ser dois fundos. Então, a primeira cor será transparente. Para o segundo chamador , será 8430 Teremos aqui o terceiro chamador e será 863c0 Então, é isso sobre o efeito de desfoque. Em seguida, temos que cuidar do fundo. Vou selecionar play bottom. Vou definir duas posições para 60%. Quanto à posição esquerda, será -8%. Ok, então isso fica na seção do modelo O player de vídeo parece bom. Em seguida, vou cuidar do rodapé. Vamos selecionar o rodapé. Mude a altura, será 40 a altura da janela de visualização. Em seguida, precisamos mudar o preenchimento. Eu vou para 3026 na parte superior. O zero no lado direito, três Ram na parte inferior e zero no lado esquerdo. Tudo bem, eu vou cuidar das mídias sociais. Vamos selecionar a mídia social e eu vou definir a largura para 35% Ok. Acho que está na página inicial. Tudo parece muito bom. Vamos conferir a página dos clientes. Temos que personalizar esta página. A primeira coisa que vou fazer é exibir o ícone do menu. Vou abrir o arquivo HTM do cliente e, em seguida, pegar o ícone do menu do arquivo H tim antigo indexado Vamos copiar esse elemento e colá-lo logo após o logotipo. Vamos verificar o navegador. Como você pode ver, o ícone do menu é branco. Até rolarmos para baixo. Temos que mudar isso. Na verdade, vou adicionar aqui um nome de classe comum. Vamos chamá-lo de I, vou chamá-lo em páginas, talvez você tenha um nome melhor. Em seguida, vou encontrar o ícone do menu aqui e vou selecionar as páginas do ícone. Vamos mudar a cor de fundo. Na verdade, precisamos da linha dela. Vamos mudar a cor do fundo e torná-la de 0926 a sete. Ok, vamos verificar o navegador. Agora temos aqui o ícone do menu com linhas escuras. E não precisamos rolar para baixo para exibi-lo. Ok, então eu vou cuidar do chefe da página do cliente. Vamos abrir a página dos clientes e criar uma nova consulta de mídia CSS. Serão 820 pixels. Vou selecionar o cabeçalho do depoimento seguido pelo elemento do título H. Vamos definir com 80% Quanto ao tamanho da fonte do título, vou configurá-lo para 4,7 Ok, em seguida, vou tirar as estrelas Vamos selecionar estrelas e definir a posição correta para 12%. Tudo bem, para que tudo fique bem. Podemos seguir em frente e verificar a próxima página, que é a página do produto. Precisamos fazer o mesmo com o ícone do menu. E também temos que fazer aqui algumas mudanças. Vamos abrir o HTML dos produtos. Então eu vou pegar esse código aqui. Vamos colar o ícone do menu após o logotipo. Agora você pode ver aqui o ícone do menu com linhas escuras. Em seguida, vou criar uma nova consulta de mídia CSS aos produtos do arquivo CSS. Precisamos de mídia CSS seguida pela largura máxima, que será de oito voltas de pixels Vou selecionar o conteúdo dos produtos. Eu vou mudar de altura, vai ser 115 Ram. Então eu vou mudar a direção da caixa flexível. Temos que colocar os itens flexíveis na vertical. Portanto, precisamos aqui da coluna de direção flexível. Além disso, vou alinhar os itens no centro e depois mudar o preenchimento O preenchimento será de cinco RAM na parte superior, zero no lado direito, cinco RAM na parte inferior e dez RAM no lado esquerdo Ok, aqui temos o conteúdo dos produtos. Vamos continuar personalizando o lado esquerdo. Vou selecionar o conteúdo restante dos produtos. Vamos definir com 60% e depois vou definir a altura como automática. Também precisamos de acolchoamento. Serão cinco quadros no lado superior e inferior e seguida, zero no lado direito e esquerdo Tudo bem, depois disso, vou selecionar o parágrafo. Vamos seguir em frente e selecionar os produtos. Conteúdo restante, seguido pelo elemento P. Vou definir a margem para três RAM no lado superior depois zero no lado direito. Em seguida, precisamos de cinco Ram na parte inferior e zero no lado esquerdo. Ok, acho que terminamos com o lado esquerdo. Em seguida, temos que cuidar das imagens. Vou selecionar produtos, conteúdo à direita, seguido pelos elementos da imagem. E temos que selecionar a primeira imagem usando o seletor de bate-papo N. Vou mudar o tamanho da primeira imagem. Precisamos definir a largura , será 22 Ram. Então eu vou definir a altura para 44 Ram. Então eu vou mudar a posição da imagem. A posição superior será de 65%. Quanto à posição correta, vou defini-la para 24%. Como você pode ver, a posição e o tamanho da primeira imagem são alterados Em seguida, temos que cuidar do resto das imagens. Vou duplicar esse código duas vezes, precisamos aqui. Segunda imagem, vou definir a largura para 12 Ram Então eu vou chegar à altura. A primeira posição será 50%. Quanto à posição correta, vou configurá-la para 43 Ram Ram. Em seguida, temos aqui a terceira imagem que vou definir com 220 gramas. Então precisamos da posição inferior, será de 21%. Quanto à posição correta, vou defini-la para 11%. Ok, acho que é isso sobre as imagens Como você pode ver, eles ficam bem com esta seção, terminamos. Em seguida, temos que cuidar do conteúdo promocional. Vou selecionar a promoção de produtos. Vamos definir a altura para 120. Altura da janela de visualização. Em seguida, vou cuidar das formas. Vou selecionar Promo Retangle. Vamos definir alturas, ambas até 42. Em seguida, vou mudar a posição do elemento. A posição superior será 32%. Quanto à posição esquerda, vou defini-la para 6% Ok, em seguida, precisamos tirar o pequeno círculo Aqui eu vou selecionar um pequeno círculo. Vamos definir a posição do pequeno círculo para 30%. Quanto à posição correta, será 40% Ok. Depois disso, vou tirar o círculo grande. Vamos selecionar um círculo grande. Vou definir ambas as posições para 30%. Quanto à posição correta será 5%. Tudo bem, finalmente vou cuidar do título do conteúdo promocional. Então, vamos selecionar Conteúdo promocional, seguido pelo elemento de cabeçalho H one. Vou mudar o tamanho da fonte. Vai ser para correr. OK. Acho que isso gira em torno desta seção. Tudo parece bom. Em seguida, temos que cuidar da seção de contato. Como você pode ver, temos que fazer algumas mudanças. Vamos abrir o arquivo HTML do contato. Primeiro de tudo, vou cuidar do ícone do menu. Vamos encontrar o logotipo e colar aqui o ícone do menu. Você pode ver aqui o ícone do menu. Depois disso, vou criar uma nova consulta de mídia CSS no arquivo de contatos. Primeiro, vou interferir nos comentários para que sejam responsivos. Em seguida, vou criar uma consulta de mídia CSS com largura máxima de 820 Em seguida, vou selecionar o elemento da seção. Eu vou mudar a altura. Vai ter 110 pontos de vista, coloque a altura. Em seguida, vou selecionar três elementos de cabeçalho. Precisamos aqui do cabeçalho de contato seguido pelo elemento de cabeçalho H três. Vamos definir a largura para 70%. Depois, precisamos alterar a margem. Vou definir a margem para dois Ram na parte superior. Então, precisamos de Auto no lado direito, 15 Ram na parte inferior e Auto no lado esquerdo. Isso nos permite centralizar os elementos. Ok, em seguida eu vou cuidar do círculo, esse fundo aqui. Vamos selecionar o círculo de contato. Eu vou mudar de altura e largura. Vamos configurar os dois para 70 Ram. Em seguida, precisamos mudar a posição do círculo. Vamos definir a posição inferior em 25% Quanto à posição esquerda, vou fazer com que seja 2%. Vamos verificar o navegador. O círculo está colocado aqui, não é totalmente visível. Mas se eu mudar a cor do bacon e colocá-la em vermelho , você encontrará a posição do círculo. Vamos mudar o tamanho desses dois elementos. Vou selecionar o invólucro do formulário de contato, vamos configurar com 235 Quanto à altura, vou configurá-la para 78 Ram. Em seguida, vou duplicar esse código e alterar o nome da classe Precisamos do seu apoio. A altura será 67, ok. Isso é sobre a página de contato. Você pode ver aqui o círculo. Acho que tudo parece muito bom. Em seguida, temos que cuidar da próxima página, que é uma página de contagem. Então, vamos voltar ao código VS e abrir o HTML da conta. Vou pegar o ícone do menu aqui e colá-lo. O arquivo HTML da conta, o ícone está visível. Estou abrindo o arquivo CS da conta e, em seguida, vou para os comentários do site para responder Em seguida, precisamos criar uma consulta de mídia CSS para a largura máxima de 820 pixels Vou selecionar os elementos da seção. Vamos definir sua altura para 100 pés de altura. Então eu vou mudar o tamanho do círculo. E também temos que mudar a posição do círculo. Vamos definir com e altura ambas para 65 m. Para a posição, a posição inferior será 39%. Quanto à posição esquerda, vou ajustá-la para 23% Acho que é isso. Sobre a página da conta, tudo parece bom. Em seguida, temos que cuidar da última página do ponto de interrupção, que será a página de preços Vamos abrir aqui o arquivo HTML de preços. Então eu vou pegar o menu. Vamos colá-lo após o logotipo e verificar se o ícone é exibido. Como você pode ver, o ícone é exibido. Vou analisar os preços do arquivo CS e criar uma nova consulta de mídia CSS com a largura máxima de 820 pixels A primeira coisa que vou fazer é selecionar a seção de preços. Eu vou trocar a pele. Serão 120 veículos escondidos. Em seguida, vou cuidar das formas. Vamos selecionar o retângulo de preços. Vou mudar a posição à esquerda e será -3%. Então, precisamos cuidar do pequeno círculo, que agora não está visível Vou selecionar um pequeno círculo. Na verdade, precisamos de preços. Vamos mudar, pois, em altura, serão seis Ram. Em seguida, precisamos nos posicionar. Vou configurá-lo para 25%. Quanto à posição correta, será 1% na verdade, vou mover o círculo até a posição superior para 20%, acho que é melhor, na verdade. Acho que precisamos mover o retângulo para cima também, porque não gosto muito desse resultado aqui Vamos definir para, digamos, 25%. Podemos mover o retângulo ligeiramente para cima Vamos definir a posição para 20%. Agora, o retângulo parece melhor, mas acho que 20% é demais. Vamos definir a posição para 22% Ok, agora eu acho que é muito melhor Tudo bem, em seguida, temos que cuidar do círculo grande. Vou selecionar um círculo grande. Vamos pegar essas quatro linhas a partir daqui. Vou ajustar a altura de 40 Ram. Então precisamos daqui. Posição inferior, será de 25% Quanto à posição correta, vou definir para -5%. Ok, acho que parece bom Em seguida, vou cuidar do cabeçalho. Vamos selecionar o cabeçalho de preços. Vamos definir com 28m. Então eu vou cuidar das cartas. Não precisamos mais do efeito dos três D aqui. Vou selecionar cartões de preços e, em seguida, vou definir a perspectiva como nenhuma. Ok, finalmente vou cuidar do cartão do lado direito. Como você se lembra, usamos função translate Z para o cartão certo, portanto, vou selecionar o cartão de preços, certo? Então precisamos transformar com a função translate Z e eu vou defini-la como zero. Ok, isso fica. Agora, uma vez que removemos o espaço de três D, acho que temos que mudar a posição do pequeno círculo, também do retângulo Vamos colocar um pequeno círculo, um pouco para baixo. Vamos definir a posição para 25% Ok, está bom. Também vou aumentar o valor da posição superior do retângulo Vamos configurá-lo para 25%. Tudo bem. Acho que está na página de preços e acho que, com esse ponto de interrupção, terminamos Quero dizer, o ponto de interrupção da tabela, vamos verificar esse ponto de interrupção Temos que tornar o site responsivo no ponto de interrupção. E para isso, vamos para a próxima palestra. 71. Tornando o projeto responsivo para telefones celulares: Tudo bem, na palestra anterior, fizemos com que o projeto respondesse a esse ponto de interrupção aqui Quero dizer, o ponto de interrupção do tablet. Em seguida, temos que cuidar desse ponto de interrupção aqui. Esse é o segundo ponto de interrupção do tablet. Vamos voltar ao navegador e alterar as dimensões que precisamos aqui. 768, depois 1024. Se verificarmos a página inicial, você verá que tudo parece bom. Vou verificar as páginas. Vamos verificar a página dos clientes. Acho que não precisamos mudar aqui. Vamos para a próxima página, são os produtos. A página de produtos também tem uma boa aparência. Em seguida, temos a página de contato. Parece bom. Mas então temos a página da conta. Acho que temos que mudar a posição do círculo. Vamos ao código VS e abrir o arquivo CSS da conta. Vou criar uma nova consulta de mídia CSS. A largura máxima será de 768 pixels. Em seguida, vou selecionar o círculo da conta. Vou definir a posição inferior. Vai ser 30% agora, tudo parece bem. Em seguida, vou verificar a página de preços. Vou personalizar essa página. Estou nas formas e fundos das cartas. Vamos ver o código VS e abrir os preços do arquivo CSS. Vou criar uma nova consulta de mídia CSS. Vamos especificar a largura máxima. Precisamos de 768 pixels. Vou selecionar o retângulo de preços. Vamos mudar a posição superior para 30%. Quanto à posição esquerda, vou defini-la para -6%. Em seguida, vou selecionar o círculo grande de preços Vamos definir a posição inferior para 12%. Tudo bem. Eu acho que é isso. Tudo fica bem no ponto de interrupção. E podemos dizer que, para tablets, o site parece bom. Vou verificar esse ponto de interrupção aqui. Agora, como você pode ver, temos que seguir em frente e começar a tornar o projeto responsivo para telefones celulares O primeiro ponto de interrupção tem 430 pixels de largura e 32 pixels de altura Vou definir as dimensões para 43932. Como você pode ver, tudo está bagunçado aqui. Vamos continuar personalizando o projeto. Vou abrir o estilo do arquivo CSS. Vamos criar uma nova consulta de mídia CC. O Wi máximo será de 430 pixels. A primeira coisa que vou fazer é selecionar elementos HTML. Temos que diminuir o tamanho da fonte. Vamos definir o tamanho da fonte para 45% Isso diminuirá o tamanho de todos os elementos. Em seguida, vou cuidar da seção de serviços e depois voltaremos ao cabeçalho. Vou selecionar os serviços. Vamos aumentar a altura da seção. Vou configurá-lo para 40 potes de altura. Agora temos um resultado melhor, mas temos que cuidar das formas em que estou em segundo plano. Vamos selecionar os serviços G one. Eu vou mudar a posição. A primeira posição será de -10%. Quanto à posição correta, vou defini-la para -10% Vamos verificar o navegador. A primeira forma parece boa. Vamos cuidar do retângulo. Vou duplicar esse código. Vamos mudar o nome da classe que precisamos aqui. Vá dois, eu sou. Defina a posição inferior e será de -8%. Ok. É isso sobre a seção de serviços. Em seguida, vou cuidar do banner. Vamos seguir em frente e selecionar o banner. Vou definir a posição esquerda, será de 8%. Em seguida, vou cuidar dos planos de fundo Vou começar com o plano de fundo principal. Vamos selecionar G main. Vou definir posições. A posição superior será -75% Quanto à posição esquerda, vou configurá-la para menos um, 20%. Depois vou mudar o fundo, o gradiente linear Vamos definir a função de gradiente linear. A transição das cores, quero dizer, a direção da transição será para a esquerda. Então precisamos da primeira cor , será 44005 Quanto à segunda cor, vou usar o 4400b novamente. Em seguida, temos que cuidar do segundo plano de fundo. Quero dizer, precisamos selecionar G dois. Vou definir a posição esquerda para 20%. Ok, acho que é isso. Sobre o cabeçalho, tudo parece bom. Em seguida, temos que cuidar da seção do projeto. Vou começar com os títulos. Vamos seguir em frente e selecionar os elementos de cabeçalho dos projetos H. Vou definir um tamanho para quatro RAM. Em seguida, vou cuidar do parágrafo. Na verdade, eu disse que estava indo, então esse é o meu erro. É um parágrafo. Vou selecionar projetos. Vou definir a largura 250. Ok. A próxima coisa que vou fazer é cuidar da navegação. Vou colocar os links em duas linhas. Precisamos selecionar o filtro, vou definir a altura. Serão 15 Ram. Então, para colocar os links em duas linhas, temos que usar o Flex com o valor p. Ok, agora os links são colocados em duas linhas, mas precisamos aqui do mesmo número de links em cada linha Estou aumentando o espaço entre os links de navegação. Vamos selecionar o link do filtro e definir a margem para uma execução. Agora o problema foi resolvido e, com esta seção, terminamos. Tudo parece bom. Em seguida, temos que cuidar da seção de modelos. Eu vou cuidar do lado esquerdo. Vamos continuar e selecionar o modelo à esquerda. Vou definir a posição esquerda como zero. Em seguida, precisamos que a largura seja 100%. Além disso, vou mudar o preenchimento Vamos definir o preenchimento para 12 RAM na parte superior, depois cinco RAM no lado direito, zero na parte inferior e cinco RAM no lado esquerdo Depois disso, vou colocar os itens flexíveis no centro da seção Para isso, vou usar o flex box. Vamos ajustar esta placa para flexionar. Então temos que mudar a direção porque vamos colocar os itens flexíveis verticalmente em uma coluna Precisamos que a direção flexível seja uma coluna, então precisamos justificar o centro de conferências e também um centro de itens de linha Ok. Então, isso fica do lado esquerdo. Na verdade, vou até uma linha com o texto do parágrafo no centro. Vou selecionar os modelos à esquerda e vou usar o centro da linha de texto. Ok, agora está tudo bem. Em seguida, temos que tirar as imagens e também a parte inferior. Vamos começar com as imagens. Vou selecionar o modelo, certo. Seguido pelos elementos da imagem, selecionarei a primeira imagem usando o enésimo seletor filho Eu vou mudar a largura, vai ser 23 Ram. Então eu vou mudar de posição. A posição superior será 65%. Quanto à posição correta, vou configurá-la para 40%. Depois, vou duplicar esse código duas vezes porque temos que cuidar do resto das imagens que precisamos aqui, imagem dois e depois imagem três A largura da segunda imagem será de 14 Ram. Então, a posição será 51% como a posição esquerda que precisamos aqui A posição esquerda será de -55%. Em seguida, temos que cuidar da terceira imagem Vamos começar com 38 Ram. Então, as duas posições serão 55%. Quanto à posição correta, vou defini-la para 10%. Tudo bem, então vamos ver as imagens a seguir Eu vou cuidar dessa sombra aqui. Quero dizer, temos que selecionar modelos com elementos gratuitos. Vamos definir a posição correta. Vai ser -7%, mas depois precisamos da posição inferior, vai ser -10%. Além disso, vou mudar o plano de Vamos usar um gradiente linear. A direção será a segunda à esquerda. Quanto às cores, a primeira será transparente. Então eu vou usar o segundo chamador, 8430. Quanto ao terceiro chamador, será 409b Está bem? Tudo parece bom. Temos que cuidar do botão play. Vamos selecionar o invólucro. Definir que a posição esquerda será -25%. Em seguida, vou selecionar Play BTN, vou diminuir o tamanho do elemento Vamos definir a largura e a altura, ambas para 15 Ram. Além disso, vou alterar o tamanho de antes do elemento. Vamos duplicar esse código e adicionar aqui antes que o elemento with height for before seja 19,5%, não por cento, mas RAM Tudo bem Acho que está tudo bem. A única coisa que precisamos fazer é alterar o tamanho do ícone Phm Vou jogar BTN, seguido pelo elemento Vou definir o tamanho da fonte para cinco Ram. Tudo bem, é isso. Sobre o botão play, vou verificar o player de vídeo. Então, como você pode ver, é hora de cuidar do reprodutor de vídeo porque ele não parece muito bom. Vou prosseguir e selecionar Vídeo. Quero dizer, o invólucro, vamos definir a largura para 50. Isso é para a altura. Vai ser automático. Agora temos que cuidar dos controles. Vamos selecionar os controles de vídeo. Precisamos de controles aqui. Eu vou mudar o preenchimento. Será uma rampa nos superior e inferior e zero nos lados esquerdo e direito Em seguida, precisamos cuidar das opções no lado esquerdo. Vou selecionar Opções com a classe restante. Vamos definir com 40% Agora está tudo bem. Vou mudar a posição do botão x de fechamento. Vamos selecionar X PTN, seguido pelo elemento Vou definir a posição para -8% de Ken, o reprodutor de vídeo. Parece muito bom. Vamos fechá-lo e passar para a próxima seção. É uma seção de assinatura. Também precisamos personalizar esta seção. Sou um invólucro de assinatura, vamos definir a largura para 50. Então eu vou cuidar da entrada. E na parte inferior, vou inscrever a entrada, precisamos que você assine o grupo de entrada, vamos definir com 240 Ram. Em seguida, vou às entradas, vamos usar o seletor que temos para adicionar aqui a entrada que vou definir com altura de 100%. Ok, é sobre a definir com altura de 100%. Ok, é sobre a seção inscrita Em seguida, temos que cuidar do rodapé porque os elementos, especialmente os ícones de mídia social, estão bagunçados Vou selecionar o rodapé. Vamos definir a altura 245, colocar a altura. Vou mudar a posição dos ícones das mídias sociais. Vou colocá-los aqui. Abaixo, selecione a mídia social. Vamos definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que é o rodapé Em seguida, precisamos da posição inferior. Serão seis Ram. Além disso, vamos definir com 100%. Em seguida, vou colocar os elementos horizontalmente em uma função Portanto, temos que mudar a direção da caixa flexível e, neste caso, essa será a função Finalmente, precisamos justificar o centro de conteúdo. Ok, como você pode ver, o título e os ícones de mídia social estão bem posicionados aqui Precisamos de algum espaço entre o título e os ícones. Então, vou selecionar as mídias sociais seguidas pelos três elementos do título H. E vou definir a margem do lado direito em cinco m. Ok, agora está tudo bem. Em seguida, vou cuidar desses links aqui. Vou mudar o tamanho da fonte. Vamos selecionar a parte inferior do pé, seguida pelos elementos. Eu sou o link. O tamanho do telefone será de 1,8 Ram. Tudo bem, então eu acho que é tudo sobre a página inicial. Em seguida, temos que cuidar da navegação. Vou verificar os menus suspensos. Como você pode ver, temos que fazer aqui algumas mudanças. Vou esconder esses painéis PanElementsIOecond Vamos até o código VS e selecione o serviço suspenso. Então, precisamos de desenvolvimentos seguidos pelo intervalo. E temos que selecionar o segundo elemento do painel usando o seletor infantil Vamos definir a exibição como nenhuma. Como você pode ver, esses panelementos estão ocultos. Em seguida, vou alterar o tamanho do lado direito da primeira lista suspensa. Vamos selecionar uma lista suspensa à direita e definir a largura como 100%. Quanto à altura, vou definir como 75%. Na verdade, todas as outras listas suspensas parecem boas. Portanto, podemos dizer isso com a página inicial e com a navegação. Nós terminamos. Em seguida, vou verificar outras páginas. Vamos verificar a página dos clientes. Temos dois, personalize esta página. Vamos abrir arquivo CSS dos clientes e criar uma nova consulta de mídia CSS. Em seguida, especifique xw, serão 430 pixels. Vou selecionar o depoimento seguido pelo elemento de cabeçalho H one Vou definir o tamanho do telefone. Também será a forma. Eu vou esconder as estrelas. Vamos selecionar estrelas e usar Display Non. Ok, agora tudo parece bom e com a página do cliente, terminamos. Em seguida, vou selecionar a página de produtos. Como você pode ver, temos que personalizar esta página. Vamos abrir produtos do arquivo CCS e criar uma nova consulta de mídia Ss Vou especificar que Mawi será. 430 pixels. Em seguida, vou selecionar o cabeçalho dos produtos seguido pelo elemento de cabeçalho H one. Vamos definir o tamanho do telefone para quatro RAM. Ok, em seguida, vou cuidar do segundo título. Vamos continuar e duplicar esse código. Vou mudar o seletor. Precisamos de H três, então o tamanho do telefone será 2,5. Além disso, eu mudo a largura, digamos, para 80% Então temos que centralizar o cabeçalho para isso. Vou definir a margem , serão duas corridas na parte superior. Em seguida, no lado direito, 15 Ram na parte inferior e O no lado esquerdo. Como você pode ver, o título é colocado no centro. Tudo bem, isso é cabo, o conector. Em seguida, temos que cuidar da seção de conteúdo do produto. Vou selecionar o conteúdo do produto Wrapper. Vamos definir o preenchimento. Serão cinco RAM nos lados superior e inferior e zero nos lados esquerdo e direito. Em seguida, vou cuidar dessa parte aqui. Selecione o conteúdo dos produtos à esquerda. Vou definir com 100%, mas depois vamos usar o Flex box Precisamos do Display Flex. Além disso, temos que mudar a direção porque os itens flexíveis devem ser colocados verticalmente na coluna Portanto, precisamos que a direção flexível seja coluna. Além disso, vou definir alinhar os itens ao centro Ok, em seguida, vou mudar o alinhamento do parágrafo Quero dizer, o texto do parágrafo. Vamos seguir em frente e selecionar os produtos. Conteúdo restante, seguido pelos elementos. Primeiro de tudo, vou mudar a largura. Vai ser 8%. Então, vamos colocar o texto no centro usando texto. Um centro de linha. Na verdade, temos aqui algum problema porque esse conteúdo deve ser colocado no centro da seção. Vamos voltar ao código VS. E, na verdade, precisamos aqui de conteúdo de produtos e não de nenhum conteúdo. Como você pode ver, o problema está resolvido. Tudo bem, depois disso, eu vou cuidar dessas imagens aqui. Vamos selecionar o conteúdo dos produtos seguido pelos elementos da imagem. E precisamos da primeira imagem usando o seletor de gráficos. Vou definir a largura e a altura. A largura será de 18 Ram. Então precisamos de altura , serão 36 Ram. Além disso, vou mudar a posição da imagem. A primeira posição será de 75%. Quanto à posição correta, direi para 30%. Vamos duplicar esse código duas vezes e alterar os seletores do gráfico Precisamos da imagem número dois e da imagem número três. Em seguida, vou definir a largura da segunda imagem para dez Ram. Vou me livrar da altura, pois a posição superior será de 63%. Então precisamos da posição correta, que será de 57%. Quanto à terceira imagem, vou definir a largura para 18 Vamos deixar esse valor aqui. Não precisamos de altura. Quanto às posições que precisamos aqui, posição inferior. Vou configurá-lo para 13%. Para a posição correta, será 7%. Ok, acho que esse cabo as imagens. Vamos verificar os resultados agora. Acho que está tudo bem com esta seção. Nós terminamos. Vamos seguir em frente e cuidar da segunda seção. Eu, o conteúdo promocional. Vou selecionar produtos promocionais e definir a altura em 100 H. Em seguida, vou selecionar o conteúdo promocional e definir as larguras serão 8%. Agora, temos que personalizar o conteúdo promocional ao passar o mouse Vamos acessar o código VS e selecionar o conteúdo promocional com o Hover Passe o mouse, vou alterar a propriedade de transformação. Vamos usar aqui translate. Os valores serão -50% novamente -50%. Então, precisamos alterar o valor da função Translate Z. Serão seis. Ok, agora está tudo bem. Em seguida, temos que cuidar das formas por trás do conteúdo promocional. Vou começar com o retângulo. Vamos selecionar o retângulo promocional. Vou ajustar a altura de ambos para 35 Ram. Em seguida, vou mudar a posição do retângulo que precisamos aqui A primeira posição será de 28% Quanto à posição esquerda, vou defini-la para -3% Depois disso, vou cuidar do círculo grande. Vamos selecionar um círculo grande. Na verdade, vou pegar esse código aqui. Precisamos com altura, com os mesmos valores, pois a posição será inferior e o valor será 27%. Quanto à posição esquerda, vou mudá-la com a posição direita e o valor será -8%. Tudo bem, finalmente temos que personalizar o pequeno círculo Selecione um pequeno círculo e mude a posição. A primeira posição será 26%. Quanto à posição correta, vou dizer que até 30%. Ok, isso é tudo sobre as formas Em seguida, temos que cuidar do título e do parágrafo dentro do conteúdo promocional. Vou selecionar o elemento de cabeçalho Content one. Vou mudar o tamanho do telefone. Vai ser 1.8 Então eu vou cuidar do parágrafo. Precisamos de conteúdo promocional seguido pelo elemento P. E o tamanho do telefone também será de 1,8 Ram. Tudo bem, acho que é tudo sobre a página de produtos, tudo parece bom. Em seguida, temos que cuidar da próxima página e ela será a página de contato. Como você pode ver, temos que personalizar esta página. Vamos abrir o arquivo CSS de contato e criar um novo curry de mídia CSS com o qual precisamos especificar o x. Primeiro, selecionarei os elementos da seção com o nome da classe contato e definirei a altura como 180 pontos de vista Então eu vou cuidar do cabeçalho. Vamos selecionar o cabeçalho do contato seguido pelo elemento de cabeçalho H one. Vou mudar o tamanho da fonte , serão quatro RAM. Em seguida, vou duplicar esse código e cuidar do segundo título, que é H três, vou definir o tamanho da fonte para 2,5 Ram Então eu vou acrescentar aqui que vai ser 80%. E então precisamos medir o cabeçalho. Vou usar margem com os valores dois Ram Alto 15 e depois automático também. Então, isso é sentar sobre o cabeçalho. Em seguida, vou cuidar dessas duas partes aqui. Vou selecionar o conteúdo do contato. Temos que mudar a direção da caixa flexível porque vamos colocar esses dois elementos um em cima do outro verticalmente Vou definir a direção da flexão para a coluna. Então, precisamos de um centro de itens de linha. Agora, como você pode ver, eles são colocados verticalmente. Temos que criar um espaço entre esses elementos. Vou selecionar o invólucro do formulário de contato e, em seguida, vou definir a margem Serão zero na parte superior, três RAM no lado direito, dez RAM na parte inferior e três RAM no lado esquerdo. Agora temos aqui algum espaço. Em seguida, vou cuidar da posição do círculo. Vamos selecionar o círculo de contato. Precisamos mudar a posição inferior para 30%. Quanto à posição esquerda, vou defini-la para 5%. Ok, acho que está tudo bem e temos que passar para a próxima página. Vai ser a página da conta. Vou acessar o código BS e abrir uma conta do arquivo CSS. Vamos criar uma nova consulta de mídia CSS. Precisamos aqui, no máximo, de 430 pixels. Vou selecionar o círculo da conta. Vamos mudar o tamanho do círculo. Eu vou definir com 260 corridas. Além disso, precisamos de alturas com o mesmo valor. Então eu vou mudar a posição do círculo. Vamos adicionar a posição inferior a 34% Quanto à posição esquerda, será 10%. Ok, em seguida, vou cuidar do cabeçalho Vamos adicionar o cabeçalho aqui. Precisamos de elementos de cabeçalho H one. Vou mudar o tamanho do telefone, vai ser o formulário, depois vou duplicar esse código Selecione H três elementos de cabeçalho. Portanto, precisamos que o tamanho da fonte seja 2,5 Ram. Então precisamos de largura, que será de 80%. Então, temos que centralizar o elemento usando a margem. Precisamos correr 15 vezes e novamente. Ou Ok, isso fica na página da conta. Em seguida, vou levá-lo para a página de preços. Vamos ao código VS e abrir os preços para o arquivo CSS. Vou adicionar aqui uma nova consulta de mídia CSS com a largura máxima de 430 pixels Vou mudar a altura da seção. Vamos selecionar o preço e definir a altura para 18 visualizações. Em seguida, vou tirar o cabeçalho. Vamos selecionar o cabeçalho de preços, seguido pelos elementos do título tron. Vou definir o tamanho da fonte para quatro RAM. Em seguida, precisamos alterar a largura do cabeçalho. Serão 50 Ram. Em seguida, precisamos centralizar o elemento usando a margem geral. Ok, depois disso, vou retomar o segundo título. Vou duplicar esse código, mudar o seletor. Precisamos de H três, vou definir o tamanho do telefone para dois Ram. Então, precisamos do mesmo com, quanto à margem. Serão dois M, depois dois Ram. Novamente, na verdade, podemos deixar aqui apenas dois M e O. Será exatamente a mesma coisa. Ok, isso é tudo sobre o H, três elementos de cabeçalho. Em seguida, vou cuidar das cartas. Temos que colocá-los verticalmente. E para isso, precisamos selecionar cartões de preços. Para mudar a direção da caixa flexível, ela será uma coluna. Agora elas são colocadas verticalmente em uma Vou criar um espaço entre as cartas. Vou selecionar o cartão de preços, vou definir a margem como zero, depois 1,5, depois dez rodadas e novamente 1,5 r. Agora temos o espaço entre os cartões, e a próxima coisa que vou fazer é cuidar das formas. Vamos começar com o retângulo promocional. Vou adicionar aqui o código para retângulo. Precisamos de um retângulo de preços e não de um retângulo promocional. Vou mudar as duas posições que serão 20%. Aqui temos o retângulo Em seguida, vou cuidar do pequeno círculo. Vamos seguir em frente e selecionar um pequeno círculo. Precisamos de um pequeno círculo de preços. Vou definir a posição para 17%. Quanto à posição correta, será 5%. Finalmente, vou cuidar do círculo grande. Precisamos mudar a posição. Precisamos de um círculo grande de preços e a posição inferior será de 8%. Ok, acho que o Everton está bem no ponto de interrupção Podemos dizer que com os primeiros pontos de interrupção dos telefones celulares está pronto Podemos verificar esse ponto de interrupção aqui e podemos cuidar do próximo ponto de interrupção Vou verificar o site no ponto de interrupção. Vamos mudar as dimensões que precisamos aqui, 393 e 893 pixels Vamos verificar os projetos. Se tudo estiver bem, a página inicial parece boa, vamos verificar outras páginas. A página de clientes parece boa. Em seguida, temos a página de produtos, que também parece boa. Em seguida, vou verificar a página de contato. Em seguida, temos a página da conta e, finalmente, a página de preços. Como você pode ver, tudo parece bem. Não precisamos mudar nada nesse ponto de interrupção. Agora, vou verificar esse ponto de interrupção aqui e tirar você do último ponto de interrupção para telefones celulares, que terá 375 pixels de largura e 667 pixels de 667 pixels Então, vamos mudar as dimensões que precisamos aqui, 375,6 67 Então, como você pode ver, está tudo confuso. Novamente nesse ponto de interrupção, vamos abrir o estilo do arquivo CS e criar uma nova consulta de mídia CSS Serão 375 pixels. Vou cuidar primeiro da seção de serviços, vamos selecionar os serviços e aumentar a altura. A altura da janela de visualização será de 350. Ok. Em seguida, vou cuidar dos serviços G one. Vamos definir a primeira posição para -7%. Depois, vou cuidar do plano de fundo aqui no cabeçalho Vamos seguir em frente e selecionar BG two. Vou definir a posição esquerda para 30%. Ok, em seguida, vou verificar a navegação Precisamos fazer algumas alterações aqui. Vou diminuir a altura do item de navegação. Vamos continuar e não selecionar nenhum item, mas precisamos excluir novamente o novem que está na parte inferior Vou adicionar aqui a última criança à turma. Além disso, precisamos aqui adicionar a classe Hamblger, precisamos diminuir a altura. Serão oito. Em seguida, vou mudar o preenchimento no lado esquerdo, digamos para três m. Como pode ver, a altura dos itens de navegação é alterada Em seguida, vou mudar as posições dos menus suspensos. Precisamos selecionar o menu suspenso e, em seguida, definir a oposição para oito corridas. Tudo bem, a próxima coisa que vou fazer é adicionar a barra de rolagem ao primeiro menu suspenso. Vamos continuar e selecionar um menu suspenso. E então use a propriedade Overflow Y que precisamos aqui Scroll Now, como você pode ver, podemos rolar para baixo no menu suspenso Vamos cuidar da segunda lista suspensa. Vou selecionar o menu suspenso dois. Vamos definir a altura para 32,5 Ram. Além disso, vou selecionar o menu suspenso dois com os desenvolvimentos e vou definir a altura para o próximo. Vou esconder os ícones e também os parágrafos. Vamos selecionar dois seguidos pelos desenvolvimentos e, em seguida, definir a exibição como nenhuma. Também precisamos da mesma coisa para o parágrafo. Vamos mudar para, tudo bem, então é sobre o segundo menu suspenso. Vamos passar para o terceiro. Vou personalizar o terceiro menu suspenso. Vamos selecionar a lista suspensa três para alterar a altura da terceira lista suspensa. Vai ser 45. Em seguida, vou ocultar elementos do segundo giro dentro do menu suspenso Vamos selecionar o menu suspenso três, seguido pelo desenvolvimento. Então, precisamos de span com seletor. Precisamos selecionar os elementos do segundo intervalo. Vamos adicionar aqui nenhum display. Ok, isso é sobre a terceira lista suspensa. A quarta lista suspensa parece boa. Quanto ao quinto menu suspenso, vou personalizá-lo. Vamos seguir em frente e selecionar o menu suspenso cinco. Eu vou mudar a altura. Vai ser 30. Em seguida, vou definir a colocação para 1.5 Em seguida, vou cuidar do botão, quero dizer, do botão de preços. Vamos continuar e selecionar Item com o último filho. Então, classe, vou definir a altura para dez Ram. Então eu vou mudar a altura do botão também. Vamos duplicar esse código que precisamos aqui. O BTN, vou definir a altura para cinco Ram. Tudo bem, vamos verificar o navegador. Tudo parece bom, na verdade, com a navegação. Nós terminamos. Vamos conferir outras seções. Tudo parece bom. Como você pode ver, o rodapé precisa de alguns ajustes Vamos continuar e cuidar disso. Vou selecionar o rodapé e vou aumentar a altura Digamos que 255 pés de altura. Agora o rodapé parece bom. Ok. Isso fica sobre a página inicial. Em seguida, vou verificar outras páginas. A página do cliente parece boa. Em seguida, temos a página de produtos. Dentro da página de produtos, precisamos cuidar do conteúdo promocional. Vamos abrir produtos do arquivo CSS e criar novas mídias CSS. A consulta Maxwit terá 375 pixels. Vou selecionar o retângulo Promo. Vamos definir a altura de ambos para 30. Em seguida, vou definir a primeira posição para 23%. Em seguida, vou cuidar do círculo grande Eu vou definir com altura. Na verdade, vamos pegar esse código a partir daqui. A largura e a altura serão 30. Quanto às posições que precisamos aqui, posição inferior. Vai ficar 20% na posição correta e vai de 30 a 11%. Vamos verificar o resultado Tudo parece bom. Em seguida, a posição do pequeno círculo. Vamos selecionar um pequeno círculo e definir sua posição superior para 20% Ok, vou mudar a posição do pequeno círculo ao passar o mouse Vamos voltar ao código do VS e duplicar esse código. Vou adicionar aqui a animação da classe. A primeira posição será de 13%. Agora acho que está 13%. Agora acho que tudo bem com a seção de produtos. Quero dizer, a página de produtos, terminamos. Vamos verificar a página de contato. Vou personalizar essa página. Vamos abrir o arquivo CSS de contato e criar uma nova consulta de mídia CSS. Precisamos de no máximo 375 pixels. Vamos selecionar a seção de contato e definir a altura 220 a altura do ponto de vista Ok, agora o problema está resolvido. Vamos verificar a página da conta. Também temos que personalizar esta página. Vou abrir uma conta do arquivo CSS. Na verdade, vamos pegar esse código a partir daqui. Precisamos da seção de contas. A altura será de 130 pés de altura. Em seguida, vou diminuir a largura da conta do invólucro Vamos selecionar a conta para o conjunto de embalagens com 245 Ram. Ok, agora está tudo bem com a página da conta. Nós terminamos. Vamos verificar a página de preços. Bem, temos que aumentar a altura da página de preços. Vamos colar aqui a consulta de mídia, selecionar preços e definir a altura para 250 potes de altura. Ok, é isso mesmo. Todas as páginas, incluindo a página inicial, ficam bem nesse ponto de interrupção Quero dizer, o ponto de interrupção para telefones celulares, na verdade, podemos dizer que nosso projeto responde a todos aqueles pontos de interrupção realmente populares Também podemos verificar o último ponto de interrupção. Foi o vídeo mais longo do curso. Mas, finalmente, terminamos o projeto. A única coisa que precisamos fazer é implantar o site. Quero dizer, temos que hospedá-lo e torná-lo online para isso. Vamos passar para a próxima palestra. 72. Implantando site: Tudo bem, em nossa palestra anterior, fizemos com que nosso projeto respondesse com sucesso a vários tamanhos de tela e dispositivos Agora é hora de passar para a etapa final, implantando nosso site on-line Existem várias maneiras de hospedar seu site, mas neste curso, eu prefiro usar o Netlify O Netlify é uma plataforma em nuvem que fornece uma variedade de serviços para desenvolvimento e hospedagem web modernos Ele oferece uma solução de plataforma como serviço que simplifica o processo de implantação e gerenciamento de sites e aplicativos da web Vamos visitar o Netlify Com. A primeira coisa que você precisa fazer é se inscrever. É um processo bem simples. Eu não vou passar por isso. Eu já me cadastrei, então vou fazer o login. Aqui, temos um painel do usuário. Para implantar o site, você pode importar seu repositório Git existente ou simplesmente arrastar e soltar a pasta do projeto de trabalho Eu prefiro o segundo caminho. Quer dizer, vou arrastar e soltar a pasta do projeto. Mas antes de fazer isso, vou observar uma coisa lembrar que tínhamos três pastas diferentes para arquivos HTML, CSS e Charles. Se eu mantivesse essas pastas , a Atlifi não implantaria o site corretamente Devemos manter nossos arquivos juntos dessa forma. Vamos abrir os projetos no código VS. Depois de remover as pastas e colocar todos os arquivos de trabalho juntos , eu deveria ter alterado os caminhos dos arquivos vinculados. Se eu verificar o caminho do arquivo CSS de estilo de arquivo, você verá que não temos mais aqui dois pontos com barra e depois o nome da pasta, Eu fiz a mesma coisa com as imagens também. Como você pode ver, temos aqui uma pasta de imagens sem pontos e barras Está bem? Certifique-se de que você também alterou os caminhos dos arquivos e imagens. Caso contrário, ao implantar o site, você não verá os blocos ou as imagens. Tudo bem, acho que estamos prontos para colocar a pasta aqui. Vou sair desse caminho e, em seguida, vou soltar a pasta aqui. Isso levará algum tempo. Como você pode ver, a implantação foi bem-sucedida. Vou clicar em Começar e depois clicar aqui. Vou clicar no link aqui. Como você pode ver, agora nosso site está online. Podemos ver que tudo parece bom e tudo funciona bem. Podemos navegar para páginas diferentes, tudo funciona e tem uma ótima aparência. Podemos dizer que nosso site está online. Eu quero fazer mais uma coisa. Como você pode ver, o Netlify gerou um nome de domínio idiota E eu quero mudar isso. Vamos clicar aqui. Configuração do site. Vou mudar o nome do site. Você usa os nomes que quiser. Depende de você. Vou deletar esses personagens. E eu vou ligar para o site. Não sei, digamos que os chame de Criar site. Não é o nome perfeito, mas não consegui pensar em nenhum outro nome. Vou salvar o nome e, se eu clicar no link, você verá aqui o ícone do nome de domínio e criará o site, o aplicativo Netlify dot Pronto, agora você já sabe como hospedar seu site no Netlify. Novamente, existem várias maneiras de hospedar os sites. Você pode comprar os nomes de domínio e assim por diante. Tudo bem, parabéns. Trabalho fantástico ao terminar este curso. Agora você está equipado com as habilidades para criar sites incríveis. Eu gostaria de agradecer imensamente por fazer parte deste curso. Continue aprendendo, mantenha-se curioso e aproveite a viagem. Como desenvolvedor web, desejo-lhe boa sorte todos os seus projetos futuros. Boa programação e que seus sites sempre impressionem. Boa sorte Tchau, tchau.