Crie 30 projetos web com HTML, CSS e JavaScript (2024)

1. Introdução: Olá e bem-vindo ao curso. Espero que este seja o curso certo e que você aproveite os projetos que construiremos ao longo deste curso. Como você já sabe, vamos criar 30 projetos modernos e criativos diferentes. Todos esses projetos serão construídos com base nas três principais tecnologias de desenvolvimento web front-end, HTML, CSS e Javascript. Eu gostaria de mencionar uma coisa. Como eu disse, os projetos serão criados com base em HTML, CSS e Javascript. Você deve ter uma forte compreensão de HTML e CSS e um conhecimento básico de Javascript para acompanhar as palestras e não se confundir Os projetos estarão repletos de diferentes técnicas e truques modernos. Você poderá aprender como criar efeitos e animações bonitos e bonitos, que podem ser usados como inspiração para desenvolver e personalizar seu próprio portfólio Como mencionei, construiremos 30 projetos. Eles são modelos independentes, então você não precisa examiná-los em ordem. Você pode criar qualquer um dos projetos que quiser da lista. Depende totalmente de você. Alguns dos projetos são simples, mas você também conhecerá alguns projetos avançados. Incluímos todos os níveis que o desenvolvedor precisa no curso. Estaremos criando projetos como menus de navegação, apresentações de slides, cabeçalhos de sites, cartões, aplicativos web e outros projetos interessantes e criativos Tenho certeza que você vai gostar deles. Acho que você terá muita prática e experiência em desenvolvimento web de front-end, no qual HTML, CSS e Javascript são essenciais. Eu também gostaria de mencionar outra coisa. Os projetos são criados para um tamanho de tela extra grande. Se você estiver usando um tamanho de tela relativamente menor , recomendo mudar para o modo responsivo Defina a largura e a altura como 1920 pixels e 1080 pixels e acompanhe as palestras com essa Caso contrário, os projetos podem não ficar bem em telas menores. E você terá problemas para acompanhar as palestras, por favor, leve isso em consideração Tudo bem, então vamos seguir em frente e 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. Projeto - Spotify Music App - Parte 1: Olá e bem-vindo ao nosso primeiro projeto neste curso. Neste vídeo, vamos começar a criar um aplicativo de música do Spotify com HTML, CSS e Javascript. Antes de começarmos a construir o projeto, vou descrevê-lo. Como você pode ver, temos aqui um aplicativo de música do Spotify, que consiste em algumas partes diferentes Na parte superior do aplicativo, você pode ver alguns ícones com o nome do aplicativo. Então temos aqui um cover que nos mostra o nome da música e também o artista. Abaixo, você pode ver os detalhes da música e o nome da música de um artista. Em seguida, temos uma barra de progresso com a hora atual da música e a duração da música. Então você pode ver aqui os controles do player. Abaixo, temos aqui alguns ícones com algum texto. Se eu clicar no botão play , a música começará a tocar. Como você pode ver, a barra de progresso está sendo atualizada, assim como a hora atual da música. Então, se eu clicar novamente no botão play, a música parará de tocar. Temos aqui os botões seguintes e anteriores. Se eu clicar neles, mudaremos para as músicas seguintes e anteriores. Tudo funciona perfeitamente. Tudo bem, então se eu clicar em qualquer lugar na barra de progresso, a música será rebobinada e a hora atual também será Tudo bem, então tudo funciona perfeitamente. Você pode ver aqui efeitos de sombra agradáveis e legais. É chamado de CSS New Morphism. Ao longo deste tutorial, você aprenderá sobre como criar os novos efeitos de morfismo CSS Ok, vamos começar. Eu criei uma nova pasta no desktop chamada aplicativo Spotify Music, na qual tenho outra pasta Música Inclui três músicas diferentes. Vamos abrir essa pasta no código VS e criar nossos arquivos de trabalho para HDML Em seguida, precisamos de um arquivo para CSS. Além disso, vou criar um arquivo para o script Java. Vamos abrir o arquivo HTML e criar os documentos HTML básicos. Vou colocar aqui um ponto de exclamação e, em seguida, apertar o topo ou Enter. Aqui vamos nós. Temos aqui a estrutura básica do HTML, os elementos básicos do HTML. A primeira coisa que vou fazer é mudar o título. Vai ser o Spotify. Music Up, então vou vincular os arquivos CSS e chavs. Vou abrir a tag do link. Em seguida, vou especificar aqui o caminho do arquivo. Em seguida, vou abrir a tag de script. No atributo source, vou inserir o script de nome final JS. Então, precisamos de um atributo chamado defer. Esse atributo faz com que o navegador execute o script depois execute o script depois que o conteúdo HTML for passado. Isso significa que o script será carregado assíncrona enquanto o conteúdo HTML estiver sendo passado, mas não interromperá a análise do Na verdade, você pode vincular o arquivo Esk aqui. Quer dizer, você pode abrir a tag de script logo acima da tag de encerramento do corpo e especificar aqui o alfabeto de origem. Mas, neste caso, vou usar essa técnica. Tudo bem, depois disso, vamos abrir o projeto no navegador usando o servidor ativo, você pode clicar aqui ou clicar no botão. Vá ao vivo. Nosso projeto está ativo no navegador. Vou colocar o navegador e o editor lado lado, assim. Então eu vou trazer outros links também. Vamos usar ícones de som de telefone ao longo deste projeto, e também vou usar telefones do Google. Vamos procurar um incrível CDN JS para celular. Em seguida, vou clicar aqui para copiar o URL. Em seguida, vou abrir a tag de link e colar o CDM copiado aqui no atributo de referência H. Tudo bem, depois disso, vou pesquisar os telefones do Google. Vamos visitar o site. Vou pesquisar telefones chamados deliciosos. Drone manual. Vamos clicar no telefone. Então precisamos pegar telefones. Depois disso, vou selecionar outros telefones. Vai ser um sinal negativo. Precisamos aqui de negativo. Vamos clicar em Obter telefone. Então, precisamos obter o código de âmbito aqui. Temos os dois telefones. Vou copiar esses links e colocá-los aqui no elemento principal. Tudo bem, agora podemos começar a escrever a marcação HTML. Vou criar um desenvolvimento que será o contêiner, que envolverá todo o conteúdo. Em seguida, temos outro desenvolvimento com o nome da classe player , que incluirá algumas partes diferentes. A primeira parte será a parte superior do jogador, quero dizer, a parte superior do player na qual vou inserir o botão com PTN. Também precisamos de um botão apertado. Em seguida, dentro do elemento do botão, vou inserir o nosomicon da fonte Precisamos de elementos I com as classes, restando uma linha sólida. Em seguida, vou inserir os elementos do painel com o aplicativo de texto Spotify Music Em seguida, precisamos de outro telefone, algum ícone. Na verdade, vou copiar esse botão daqui. Vamos colar aqui. Eu vou mudar o ícone. Nesse caso, precisamos de uma elipse sólida. Aqui temos dois padrões com o texto. Em seguida, vou criar o corpo do jogador. Estou na próxima parte do nosso jogador. Vou abrir uma tag com o nome da classe, player body. Na qual vou abrir outra div com o nome da classe current song Em seguida, precisamos criar uma capa. Como você lembra, a capa consiste em dois elementos de extensão. O primeiro será o artista. Vamos sentar aqui, King Canyon. Então eu vou abrir outro período e será a música chamada Malland Na verdade, essas são algumas músicas aleatórias estranhas. Eu os escolhi porque são livres de direitos autorais. E eu fiz isso para evitar quaisquer reivindicações de direitos autorais. Se você não gosta delas, isso não é um problema, não preste atenção nessas músicas. Tudo bem, em seguida, vou criar informações sobre a música. Precisamos de desenvolvimentos com o nome da classe, informações da música. Então precisamos de outro, serão os detalhes da música. Em seguida, vou inserir seus elementos espinhais com o nome da classe. Nome da música. Vai ser a Holanda. Vamos duplicar esse código, mudar o nome da classe. Vai ser uma música. Na verdade, não há detalhes, exceto o artista. E precisamos aqui do King Canyon. Tudo bem Depois disso, vou inserir seu fonossomicon. Vai ser um coração sólido. Então eu vou cuidar do progresso da música. Quer dizer, eu vou criar o desenvolvimento. Será a duração da música na qual vou inserir outra. Vai ser a hora da música. Então temos o progresso da música. Então eu vou para Odio. Precisamos do nome da pasta Music, na qual vou selecionar a primeira música, esta. Então eu vou adicionar aqui o nome da classe Odio. OK. Depois disso, vou analisar a hora atual e a duração da música. Vou inserir aqui desenvolvimentos com o nome da classe time em que vou inserir dois elementos de extensão. Por enquanto, vou inserir zero. Então, novamente, zero. Vamos duplicar esses elementos Depois disso, precisamos cuidar dos controles. Vou inserir seu desenvolvimento com os controles do nome da classe. Então vou inserir seu botão com a classe, na verdade, podemos pegar o botão aqui. Vou mudar os nomes das classes para o telefone, como ícone, nada shuffle Vamos duplicar esse botão cinco vezes. Na verdade, quatro vezes, porque no geral precisamos de cinco botões diferentes. O segundo será um botão para a música anterior. Vou adicionar aqui uma nova classe pré-PTN. Quanto aos elementos, precisamos de um sólido retrocesso Então temos o botão. Vamos adicionar aqui o nome da classe, play. As pesquisas também alteram os elementos. Vai ser um FA sólido. Jogue. Em seguida, temos o bóson para a próxima música que precisamos aqui Em seguida, PTN. Quanto ao elemento, será um sólido atacante de FA. Finalmente, vou mudar aqui o elemento , será um FA sólido. Repita. Tudo bem , como você pode ver, todos os cinco ícones são exibidos aqui. Em seguida, vou ver aqui a parte inferior do aplicativo. Quero dizer, precisamos criar esses dois ícones com o texto. Vamos continuar e desenvolvimento com o jogador da classe. Certamente precisamos de um player no qual eu vou inserir elementos I. Vai ser uma música A. Sólida . Então eu vou inserir seus elementos Span com o texto. Ouça o Spotify. Música Finalmente, precisamos de outro elemento com as classes, uma lista A sólida. Tudo bem, vamos falar sobre a marcação HTML. Temos aqui muitos elementos diferentes. Espero que tudo esteja correto. Veremos isso ao longo do projeto. Tudo bem, isso é sobre a marcação HTML. Todos os elementos são criados e agora temos que começar a estilizar o projeto para isso. Vamos passar para a próxima palestra. 4. Projeto - Spotify Music App - Parte 2: Tudo bem, na última aula, criamos a marcação HTML para o player e agora temos que escrever um pouco A primeira coisa que vou fazer é criar alguns estilos padrão para cada elemento. Vou selecionar cada elemento usando um asterisco. Em seguida, vou definir a margem e o preenchimento. Vamos definir os dois para zero. Em seguida, vou definir a propriedade de dimensionamento da caixa. E será igual à caixa de borda. Isso significa que todos os elementos dentro da altura incluirão o preenchimento e a borda Depois disso, vou definir uma linha para nenhuma. Além disso, vamos definir a família de telefones. Serão os telefones que selecionamos nos telefones do Google. É sensorial sinica negativo. Tudo bem Como você pode ver, todos os blocos padrão são aplicados aos elementos. Em seguida, vou definir o tamanho do telefone do elemento HTML. Ao longo deste projeto, vou usar a RAM como uma unidade de medida. No momento, um M é igual a 16 pixels, porque, por padrão, o tamanho do telefone do elemento HTML é igual a 16 pixels. Eu quero converter uma RAM em dez pixels. Portanto, precisamos diminuir o tamanho do telefone do elemento HTML. Vamos configurá-lo para 62,5%. Nesse caso, um M será igual a dez pixels Como você pode ver, o tamanho dos elementos ficou menor. Depois disso, vou retirar o contêiner que envolve todo o conteúdo do nosso projeto Primeiro de tudo, vamos definir com e altura. A largura será de 100%. Quanto à altura, vou configurá-la para 100 de altura da janela de visualização Isso significa que ocupará 100% da altura do ponto de vista Em seguida, vou mudar a cor do plano de fundo. Vou usar gradiente linear. Portanto, precisamos aqui de volta e não da cor de fundo, ou você pode usar a imagem de fundo. Vamos usar o gradiente linear. A primeira cor será 313131. Quanto à segunda cor, vou usar 151515 Ok. Então, como você pode ver, temos aqui o efeito gradiente Em seguida, vou colocar o conteúdo no centro da página. Eu vou fazer isso usando o CSS Flex box. Vamos configurar a tela para flexionar. Então, precisamos do centro de conteúdo do Justify e também de um centro de itens de linha Como você pode ver, o conteúdo é colocado no centro. Depois disso, vamos selecionar o Player definido dentro da altura. A largura será de 35 Ram. Então eu vou definir a altura para 700 Ram. Também mude, na verdade, não 700, mas 70 m. Então eu vou mudar o plano de fundo. Vamos usar novamente a função de gradiente linear. A direção da transição de cores será para a direita. Em seguida, vou especificar as cores. O primeiro será 313234. Quanto à segunda cor, vou defini-la como 223031 Ok, então aqui temos o jogador. Vou criar um efeito de sombra. Vamos usar o box shadow. Os valores serão zero. Ele especifica o deslocamento horizontal da sombra. Nesse caso, é zero, que significa que não há deslocamento horizontal A sombra estará diretamente atrás do elemento. Em seguida, vou passar um Ram. Esse valor especifica o desvio vertical da sombra. É definido como um Ram, o que significa que a sombra será deslocada para baixo em uma distância igual ao tamanho da fonte do elemento multiplicado por um tamanho da fonte do elemento multiplicado O próximo valor será cinco Ram. Esse valor define o raio de desfoque da sombra. Um valor maior criará um efeito de sombra mais desfocado. E, finalmente, precisamos da cor. Vai ser preto com opacidade de 0,4 Ok, então aqui temos o efeito de sombra, que eu acho muito bom Em seguida, vou arredondar o jogador usando o raio da borda Vamos configurá-lo para o Ram. Em seguida, vou alinhar o conteúdo usando o flex box. Vou colocar os elementos na vertical. Em primeiro lugar, precisamos do Display flex. Então temos que mudar a direção que vai ser. Coluna do próximo conjunto, colocando três Ram nos quatro lados. Ok, isso é tudo para o jogador agora. Em seguida, vou cuidar da parte superior do jogador, portanto, vou selecionar a parte superior do jogador. Vamos definir a largura para 100%. Em seguida, vou alinhar os elementos usando o livro flexível. Precisamos de exibição. Em seguida, vou criar algum espaço entre os itens flexíveis usando o conteúdo justificado. Espaço entre. Finalmente, precisamos alinhar os itens no centro verticalmente. Ok, então os elementos estão alinhados. Em seguida, vou cuidar dos botões. Vamos selecionar Player BTN. É um nome de classe comum para cada botão do projeto. Primeiro de tudo, vamos definir dentro da altura. Eu vou jogar com 24 Rams, vai ser bom também Em seguida, vou definir a borda 2.2 como sólida. E a cor será RGBA. Precisamos aqui da cor branca, 25053 vezes, e então a opacidade será 0,1. Depois disso, vou cercar o botão usando o raio da Vamos configurá-lo para 50% Em seguida, vou mudar a cor do fundo. Vamos definir para dois, B para C para E. Depois disso, vou mudar a cor. Vamos definir a cor para 89b que precisamos para criar o efeito de sombra Como eu disse no início do tutorial, vamos usar CSS, novos efeitos de morfismo, e vamos criá-los usando box shadow Vou inserir aqui alguns valores diferentes e depois explicarei o que eles fazem. Vou passar aqui 0,5 Ram, depois novamente 0,5 Ram , então precisamos de dois Ram, depois -0,1 Ram Então precisamos de cor. Vai ser RGB, uma cor preta com opacidade 0,5 Essa é a Em seguida, precisamos do segundo. Vai ser -0,4 Ram. Então, novamente, -0,4 Ram. Então teremos dois Ram, -0,1 Ram como cor Eu vou usar a cor branca. A opacidade será de 0,2 Ok, como você pode ver, temos aqui esse efeito de sombra agradável e legal Deixe-me explicar o que esses valores fazem. Essa é a primeira parte da sombra. 0,5 Ram é o deslocamento horizontal da sombra. Isso significa que a sombra será deslocada para a direita 0,5 vezes o tamanho da fonte do elemento Em seguida, temos novamente 0,5. É um deslocamento vertical da sombra. Isso significa que a sombra será deslocada para baixo em 0,5 vezes o tamanho da fonte do elemento Em seguida, temos dois Ram, e é um raio de desfoque da sombra Isso indica um efeito de desfoque relativamente grande -0,1 Ram. É um raio de dispersão da sombra. Um valor negativo fará com que a sombra se contraia. E então temos a cor. Temos a segunda parte da sombra novamente, o primeiro valor -0,4 Ram É um deslocamento horizontal da sombra. É um valor negativo e significa que a sombra será deslocada para a esquerda em 0,4 vezes o tamanho da fonte do elemento Em seguida, temos o deslocamento vertical da sombra. Novamente, é um valor negativo. Em seguida, temos o raio de desfoque e, em seguida, o raio de dispersão. Está configurado para -0,1 Ram. É um valor negativo e faz com que a sombra se contraia. Tudo bem, então no final do dia, temos esse efeito agradável e legal. Esse tipo de efeito no CSS é chamado de CSS New Morphism. Ele é implementado usando sombras de caixa e cores claras de fundo escuro para criar a ilusão de elementos sendo levemente extrudados Finalmente, vou adicionar o ponteiro do cursor. Tudo bem Depois disso, vou criar o efeito de clique para os botões. Vou selecionar o PTN do jogador, seguido pelos Ativos com a classe Vou usar transform translate Y com o valor 0,2 Ram. Depois de clicarmos no botão , obteremos esse efeito de clique agradável e legal. Depois disso, vou cuidar desse painel na parte superior do Vamos selecionar Player Top, seguido pelo painel Vamos continuar e aumentar o tamanho do telefone. Vai ser 1,3 e depois mudar a cor. Eu vou usar essa cor aqui. 89b. Tudo bem, isso fica na parte superior. Vamos passar para o corpo do jogador. Então, vamos selecionar o corpo do jogador. Em primeiro lugar, vou definir dentro das alturas. A largura será de 100%. Quanto à altura, vou definir 250, 5%. Em seguida, vou alinhar os elementos usando o Flex box Precisamos do Display Flex. Em seguida, vou colocar o conteúdo no centro. Precisamos do Justify Content Center e do Align items center. Tudo bem, no centro, temos aqui o nome da música e também o artista da música. Vamos criar aqui a capa. Quero dizer essa parte. Vamos selecionar a música atual. Vamos definir dentro da altura. Vou configurar os dois para 18 Ram. Então eu vou mudar a fronteira. Vai ser 0,5 Ram sólido. E a cor será RGP, uma cor branca com opacidade 0,15 Então eu vou fazer Vou definir o raio da borda em 50%. Finalmente, vamos criar o mesmo novo efeito de morfis usando a sombra Na verdade, vou pegar o box shadow daqui e depois alterar os valores de que precisamos aqui. 0,6 Ram, depois quatro Ram, então precisamos aqui -0,1 Ram como cor Será RGB, uma cor preta com opacidade de 0,9 Quanto à segunda parte, precisamos aqui, -0,6 Ram, depois quatro Ram Então precisamos do ponto -0,2 Quanto à cor, precisamos da cor branca com a opacidade 0,4 Como você pode ver, temos aqui esse efeito de sombra agradável e fresco Depois disso, vou selecionar a capa. Estou na parte interna desse elemento. Vamos definir a altura para 100%. Em seguida, vou mudar a cor do fundo. Vai ser 101112. E também precisamos limitar o raio de 50%. Tudo bem, depois disso, vou cuidar dos elementos de extensão Vamos seguir em frente e selecionar a cor com extensão. Vamos mudar a família telefônica. Nesse caso, vou usar o segundo telefone, que é Delicious Hand, que será cursivo Em seguida, vou definir a posição para os dois elementos de extensão. Vai ser absoluto. E também precisamos alterar a propriedade de exibição. Vai ser um bloco. Tudo bem, depois disso, vou personalizar cada elemento de rotação separadamente. Então, vamos seguir em frente e selecionar o primeiro. Precisamos de cobertura seguida pelo elemento de rotação. Vou usar o seletor de crianças. Precisamos do primeiro elemento de rotação. Vamos mudar a cor. Vai ser D. Então eu vou mudar o tamanho do telefone. Vamos de 30 para 1,6 Além disso, vou mudar a posição. A posição superior será 20% Quanto à posição esquerda, vou definir como 30%. Na verdade, precisamos de uma posição relativa para o elemento pai porque precisamos alinhar os elementos de acordo com os elementos pais Vamos definir a posição em relação à música atual. Agora, como você pode ver, o elemento está posicionado corretamente. Vamos continuar e duplicar esse código. Altere a seleção da criança, precisamos aqui de duas, então a cor será branca. O tamanho do telefone será de 2,5 Ram. Em seguida, precisamos nos posicionar com o valor de 35%. Quanto à posição esquerda, vou configurá-la para 20% Além disso, vou adicionar dez RAM. Finalmente, precisamos que a linha de textura esteja no centro. Tudo bem, a capa está bem bonita. A única coisa que vou fazer é girar um pouco Este elemento que vou adicionar aqui, transforme a rotação Z com o valor de -15 graus Tudo bem, vamos falar sobre a próxima capa, temos que pegar aqui a música no outono. Vamos selecionar a música no outono. Antes de tudo, defina a largura. Vai ser 100% Então, precisamos alinhar os elementos usando o livro flexível Vou definir a exibição como, depois vou criar algum espaço entre os itens flexíveis, justificar o espaço de conteúdo Também precisamos alinhar o centro dos itens, ele centralizará o elemento verticalmente E então eu vou criar algum espaço na parte inferior usando a margem. Os três últimos. Tudo bem, depois disso, vou selecionar os detalhes da música. Vamos mudar a direção do alinhamento dos elementos usando livros flexíveis Precisamos que a direção flexível seja uma coluna. Como você pode ver agora, os detalhes da música são colocados verticalmente uns sobre os outros Em seguida, vou selecionar o nome da música. Vamos definir o tamanho do telefone para dois. Corra, então precisamos de cor. Vai ser branco. Além disso, vou deixar o telefone mais leve. Vamos definir o peso do telefone para 300. Ok. Depois disso, vou tirar você do artista da música. E, na verdade, vamos duplicar esse código. Precisamos do seu artista musical. Vou definir o tamanho da fonte para 1,2 Ram. Então a cor vai ser essa cor aqui. Quanto ao peso da fonte, vou me livrar dela. Tudo bem, vamos falar sobre os detalhes da música. Em seguida, vamos cuidar do coração, esse telefone também está aqui. Então, vamos selecionar Informações da música, seguidas pelos elementos. Nós precisamos. O tamanho da fonte deve ser dois M. Então eu vou mudar o fundo. Vamos usar fundo com gradiente linear. Se dermos uma olhada no projeto finalizado, você verá que temos aqui um fundo de gradiente linear Eu vou mudar a direção da cor. A transição será de dois direitos. Então precisamos de cores. O primeiro será 37. Para o segundo, vou usar 62 BC 68. No momento, o plano de fundo do fontossomicon foi alterado e, na verdade, precisamos mudar a cor do Para isso, vou usar as seguintes propriedades. Precisamos de um clipe de fundo da web key, será texto. Além disso, vou usar a cor do texto da chave da web com valor, transparente. Ok. Agora, o plano de fundo do ícone do telefone foi alterado e parece muito bom. Depois disso, eu vou cuidar do tempo. Vamos selecionar algum horário. Vamos definir com 100% Então vou definir a altura para 0,5. A cor de fundo será 000d. Em seguida, vou definir o raio da borda de 2,5 Ram. Além disso, precisamos criar algum espaço na parte inferior usando a margem e a parte inferior da RAM. Em seguida, precisamos criar alguns efeitos de sombra. Vamos definir a sombra 2,2 Ram, depois 0,2 Ram e novamente 0,2 Ram. A cor será branca RGBA com o Opco 0.1. Finalmente, mude o ponteiro Tudo bem, como você pode ver, a barra de progresso foi criada. Em seguida, temos que cuidar do progresso perdido. Vamos selecionar esse elemento. Primeiro de tudo, vou mudar a posição. Vai ser absoluto. Em seguida, precisamos posicionar em relação aos elementos pais. Então, precisamos das propriedades superior e esquerda, ambas iguais a zero. Mude a largura, vai ser 30% Então precisamos altura que vai ser 100% Então precisamos mudar o fundo. Vamos usar novamente a função de gradiente linear. Na verdade, precisamos dos mesmos valores dessa função. Vamos pegá-los e colá-los aqui. Como você pode ver, temos aqui o progresso da música. A única coisa que preciso fazer é arredondá-lo usando o raio da borda Vamos configurá-lo para 2,5 corridas. Tudo bem, vamos falar sobre isso, alguns progressos. Em seguida, temos que cuidar do tempo. Vamos selecionar esse elemento. Vou definir a largura para 100% e depois alinhar os elementos usando livros flexíveis Precisamos exibir o conteúdo flexível e criar algum espaço entre os itens flexíveis usando o conteúdo do justify Espaço entre também. Vamos criar algum espaço na parte inferior usando a margem. Em terceiro lugar, corra bem, a hora e a duração da música estão alinhadas Em seguida, temos que cuidar desses elementos da panela. Selecione a hora seguida pela panela. Vou aumentar o tamanho do telefone. Digamos 21 pontos de RAM. Quanto à cor, vou usar a cor cinza. Esse aqui. Como você pode ver, a hora e a duração da música são personalizadas. Depois disso, vou cuidar dos controles, desses padrões aqui. Vamos seguir em frente e selecionar os controles. Vou definir com 100% , então precisamos alinhá-los usando a caixa flexível Vamos configurar essa jogada para flexionar, criar algum espaço usando justificar o espaço de conteúdo Além disso, precisamos alinhar os itens no centro. Como você pode ver, os botões estão alinhados. Depois disso, vou personalizar o botão Play Pose. Como você pode ver, é diferente. Vamos continuar e selecionar Play Pose. Vou definir a altura de Witten para cinco quadros porque será um pouco maior do que os outros botões Vamos definir a altura para cinco quadros. Então eu vou mudar o plano de fundo. Na verdade, precisamos dos mesmos valores. Vamos pegar a função de gradação linear. Como você pode ver, o botão parece bom. Vou mudar a cor do ícone. Vai ser branco. Finalmente, precisamos mudar a caixa Mostrar. Na verdade, vou pegar a sombra da caixa daqui. Vamos alterar os valores que precisamos de 0,5 Ram, então vou definir esse valor para dois Ram, 0,1 Ram. A opacidade da cor será 0,8 Em seguida, teremos aqui 0,82 Eu vou mudar esse valor, vai ser 0,1 Ram Na verdade, precisamos aqui da sombra da caixa e não do tamanho da caixa. Ok, para o botão play, temos uma sombra diferente porque o botão é um pouco maior. Em seguida, vou cuidar do rodapé do player. Então, vamos selecionar o rodapé do jogador definido com 100%. Em seguida, vou alinhar os itens usando o livro Flex Precisamos exibir o flex e, em seguida, justificar o espaço entre os conteúdos, porque precisamos criar espaço entre os itens Em seguida, vou definir o centro de alinhamento de itens. E, finalmente, precisamos de uma margem superior O. Ok ? ver claramente por que precisamos dessa propriedade, vamos comentar isso. Como você pode ver, precisamos colocar o rodapé para baixo. É por isso que eu uso aqui margin top, auto. Precisamos desse elemento porque alinhamos o conteúdo de todo o player usando o Flexbox Precisamos da margem superior para colocar o rodapé abaixo. Ok, depois disso, vou cuidar dos ícones no pé. Vamos selecionar elementos, aumentar o tamanho do telefone. Vai ter 1,8 Ram e também mudará a cor. Vamos usar aqui essa cor cinza. Os ícones parecem bons. Depois disso, vou cuidar desse panelement. Vamos duplicar esse código, alterar o seletor que precisamos aqui dos elementos pan O tamanho da fonte será 1,2 e. Quanto à cor, precisamos aqui, da mesma cor. Tudo bem, aí está o player personalizado, parece muito bom. E agora temos que fazer isso funcionar. Para isso, vamos passar para a próxima palestra. 5. Projeto - Spotify Music App - Parte 3: Tudo bem, uma vez que o player é personalizado e estilizado, agora temos que adicionar um pouco de Javascript ao nosso projeto A primeira coisa que vou fazer é criar uma matriz onde armazenaremos os dados das músicas. Vou criar a variável e chamá-la de dados da música. Vai ser uma matriz. Vou inserir aqui três objetos diferentes. Cada objeto incluirá o nome da música, o artista e também a fonte do arquivo de áudio. Vou inserir um objeto no qual vou criar três propriedades diferentes. O primeiro será o nome, vou adicionar aqui a Holanda Então teremos Artist, será King Canyon. Então teremos a propriedade de origem na qual vou inserir a fonte do audiófilo que precisamos aqui, Mahu Land, depois Na verdade, é o nome da música. Se verificarmos a pasta de músicas, você verá que temos aqui esse nome. Eu vou aderir à extensão da música. Vai ser a MP três. Ok, vamos ver o primeiro objeto. Teremos três deles. Vamos duplicá-lo duas vezes. O nome da segunda música será algo como por venda. Então, o artista será um parceiro silencioso. Novamente, essas são algumas músicas estranhas. Em seguida, precisamos de uma fonte, que será a parceira silenciosa da Pará ou da Psi Quanto à terceira música, vai ser a verdade, é o nome. Então teremos o artista e será Domini. Finalmente, precisamos da artista fonte Domini. Tudo bem, então vamos falar sobre os dados da nossa música. Em seguida, vou criar algumas variáveis diferentes. Temos que selecionar muitos elementos diferentes. Vou criar a primeira variável, que será um contêiner. Vamos selecionar o contêiner usando método de seleção de consulta de documentos. Vamos especificar aqui o nome da classe, contêiner. No geral, teremos aqui 12 variáveis e elementos diferentes. Vou duplicar essa linha de código 11 vezes. Ok, então vamos mudar os nomes das variáveis e também os nomes das classes. O segundo será o nome da música. Precisamos do nome da sua turma. Então, faremos com que o artista da música mude. Precisamos do artista da música. Em seguida, teremos uma capa, mude a capa do nome da classe. Então, a próxima variável será play pulse bottom. Vamos chamar a variável play pulse de BTN. Então, em dito aqui, nome da turma, peça de poeta. A variável será a parte inferior anterior. Vamos chamá-lo de pré BTN. E selecione a variável, quero dizer, os elementos com o nome da classe. Antes do BTN, próximo, próximo, PTM. Vamos mudar o nome da classe. Depois disso, vou selecionar Odio. Tem o nome de classe Odio. Então, a próxima variável será a hora da música. Vamos mudar o C. Precisamos do tempo do filho dela. Então, teremos o progresso da música. Mude o progresso da música da turma. Em seguida, teremos o artista da capa e o nome da capa. Vamos mudar o nome da variável que precisamos nomear e ela será capa. Em seguida, precisamos selecionar elementos de extensão. E eu vou usar aqui select, vamos selecionar, na verdade, o nome da capa é o segundo elemento de extensão que precisamos aqui dois. Vamos realmente duplicar esse código e nos livrar dessa linha Mude o nome, quero dizer, o nome da variável, vai ser artista da capa. E então precisamos aqui do primeiro intervalo. Vamos verificar o índice do HTM do arquivo e ter certeza de que estamos corretos aqui Temos capa, a primeira é na verdade, a primeira é artista e depois temos o nome. Vamos ao script, ao arquivo GS. Temos o nome da capa. o segundo. Ok, está correto. Vamos criar mais uma variável, que será o índice de músicas. Vamos ver a variável apagada usando let keyword song index. E eu vou configurá-lo para zero. Tudo bem, depois disso, eu vou criar uma função. Essa função usará um índice como argumento. Ele recuperará os dados da música da matriz de dados da música. Com base no índice, ele atualizará vários elementos na interface do usuário com informações sobre a música atualmente carregada Ele também definirá o atributo de origem do elemento de áudio para o arquivo de música correspondente. Vamos seguir em frente e criar uma função. Vou chamá-la de carregar música. Como eu disse, precisamos aqui do parâmetro, vamos chamá-lo de índice. Temos que atualizar a interface do usuário. Temos que definir o nome e artista da capa e também o nome e o artista da música. E também temos que definir a fonte do arquivo de áudio. Vou inserir aqui, nome da capa, conteúdo do texto. Vou recuperar os dados da matriz de dados da música que precisamos aqui, dados da música Em seguida, temos que especificar o índice. Em seguida, precisamos do nome, que é a primeira propriedade no objeto. Vamos duplicar esse código três vezes aqui. Artista da capa. Vou mudar a propriedade do nome para artista. Então temos que definir o nome da música. Finalmente, precisamos de um artista musical. Ok, mais uma vez, na verdade, precisamos aqui do artista. Definimos o nome da capa, o artista da capa, o nome da música e o artista da música. Agora temos que definir a fonte do arquivo de áudio. Vou adicionar aqui o áudio RC. Será igual ao modelo literal. Precisamos de uma pasta chamada música. Então, temos que especificar aqui a fonte dos objetos que temos aqui. Vou inserir os dados da música. Em seguida, precisamos especificar o índice. Então, precisamos da propriedade RC. E, finalmente, a extensão do arquivo de áudio P três. Ok, é isso sobre essa função, temos que chamar essa função assim que a janela for carregada. Vou anexar um ouvinte de eventos ao objeto da janela com o evento chamado load Vamos inserir aqui uma função de retorno de chamada. Em seguida, chame a função load song conforme os argumentos que vou interferir. Índice de músicas, que criamos aqui. Tudo bem, novamente, essa função usa um índice como argumento. Recupera os dados da música da matriz de dados da música com base nesse índice E atualiza vários elementos na interface com informações sobre a música atualmente carregada. As informações, quero dizer, o nome da música, o artista da música e também a fonte do arquivo de áudio. Tudo bem, depois disso, vou criar outra função para tocar a música. Vamos criar uma variável e chamá-la de play song. Porque eu disse que seria uma função. Essa função controlará a reprodução do elemento de áudio Ele adicionará uma classe ao elemento do contêiner para indicar que a música está tocando. Além disso, ele mudará o ícone do botão de reprodução de postagem e iniciará a reprodução do áudio Precisamos aqui da lista de classes de contêineres. Vou adicionar aqui pose do nome da classe. Em seguida, precisamos acessar a peça neste ícone aqui. É filho dos elementos do botão. Como você pode ver, temos aqui elementos de botão e, dentro do elemento de botão, você pode ver o elemento. Temos que acessar esse elemento. Portanto, precisamos do Play Button First Element Child. Em seguida, precisamos alterar o nome da classe. Vai ser uma postagem sólida de FA. Finalmente, para tocar essa música, precisamos usar uma das funções integradas em Javascript chamada play. Precisamos reproduzir áudio novamente, essa função, quero dizer, reproduzir música, controla a reprodução do elemento de áudio Ele adiciona uma classe ao elemento do contêiner para indicar que a música está tocando. E também muda o ícone do telefone do botão play pose. Finalmente, ele toca a música. Tudo bem, da mesma forma que temos que gerenciar a música, vou duplicar esse código Precisamos da função de pose song. Em seguida, vou mudar o método d para remover. Além disso, precisamos mudar o telefone atômico. Nesse caso, precisamos brincar em vez de posar. Finalmente, precisamos postar o áudio usando o método pose. Tudo bem, para fazer essas funções funcionarem, temos que adicionar um ouvinte de eventos ao botão play E temos que chamar essas duas funções. Vou escolher play post BTN com adicionar ouvinte do evento. E especificamos aqui o clique do evento. Em seguida, precisamos da função de retorno que será executada assim que clicarmos no botão Depois de clicar no botão, precisamos verificar se o contêiner tem a classe pose. Se isso acontecer, significa que a música está tocando no momento. Precisamos chamar a função ****. Caso contrário, precisamos chamar play song para começar a tocar a música. Tudo bem, precisamos da instrução if na qual temos que verificar se o contêiner contém classe. Se isso acontecer, então temos que posar a música. Temos que chamar essa função. Se essa condição for falsa, precisamos da instrução L e da função de música. Tudo bem, vamos verificar os resultados. Se clicarmos no botão play put , o ícone será alterado, mas, como você pode ouvir, a música não está tocando. Na verdade, vamos verificar o console. Temos aqui um erro dizendo que o elemento não tem fontes suportadas. Linha Script JS 49. Temos problemas com a fonte. Na verdade, a fonte parece correta. Nós temos o problema aqui. Bem, como você vê, temos aqui a extensão MP três na propriedade de origem. E, portanto, não precisamos mais aqui dessa extensão porque ela dobrará. Vamos nos livrar disso. Agora eu acho que a música vai tocar. Vamos clicar no botão. Como você pode ver, a música está tocando e o ícone também foi alterado. Tudo bem, então tudo funciona bem até agora. Depois disso, vou tirar você da capa. Vou girá-lo enquanto a música está tocando. Vou adicionar aqui a lista de aulas de capa. Vou adicionar uma nova turma à capa. Vamos chamá-lo de rotacionar. Precisamos remover essa classe. Depois de colocarmos a música, precisamos seguir a mesma linha com o método de remoção. Em seguida, vou até o arquivo CSS estilizado e encontrarei a capa aqui Vou criar uma animação. Vou usar quadros-chave CSS com a rotação da capa do nome. Vou definir a rotação do elemento em 0%, vou definir a rotação de transformação para zero Então, em 100%, precisamos transformar a rotação Z com um valor de 360 graus. Em seguida, vou selecionar a rotação de classes, que adicionamos à capa Eu vou definir animação. O nome será cover rotate. Então, precisamos da duração. Serão 10 segundos pois a animação será linear e precisamos reproduzi-la infinitamente Ok, vamos tocar a música. Como você pode ver, a capa gira quando colocamos a música e ela para Tudo bem, então tudo funciona perfeitamente. Em seguida, vou cuidar do anterior e seguir em frente. Próximos botões, temos que fazê-los funcionar. Vou começar com a música anterior. Vou criar uma nova função. Vamos chamar isso de pré-reprodução da música. Precisamos diminuir o valor do índice da música. Para isso, vou usar o operador de decréscimo menos Se o índice da música for menor que zero. Se for, então temos que definir o índice da música para o índice da última música na matriz de dados da música. Precisamos aqui da declaração if na qual vou verificar se o índice da música é menor que zero. Se for, então temos que definir o índice da música para os dados da música com o comprimento menos um Se o índice da música for menor que zero, definimos o índice da música como o índice da última música na matriz de dados da música. Em seguida, temos que carregar a função da música com o índice da música. Então, temos que tocar a função de música também. Tudo bem, essa função está pronta. Em seguida, temos que cuidar da próxima música, BTN. Quer dizer, temos que criar uma função semelhante para o botão da próxima música. Vamos duplicar esse código, alterar O nome da função será a próxima música tocada Em vez do operador de decréscimo, precisamos do operador de incremento. Em seguida, precisamos alterar a condição da declaração if. Porque temos que verificar se o índice da música é maior que o índice da última música na matriz de dados da música. Se for, precisamos definir o índice da música para zero. Vou mudar a condição aqui. Precisamos que o índice da música seja maior do que os dados da música em termos de comprimento menos um Se for verdade, então temos que definir o índice da música para zero. Então, precisamos dessas duas funções para fazer essas funções funcionarem. Temos que chamá-los assim que clicarmos nos botões necessários aqui para selecionar o pré-BTN com o ouvinte do evento, o evento será clicado E também precisamos aqui de uma função de livro. Mas em vez da função book, vou inserir o nome da função em si. música. Vamos duplicar esse código e transformar pré em próximo Precisamos aqui a seguir, Song Play. Tudo bem, então agora os dois botões devem funcionar. Vamos tocar a música. Em seguida, clique no botão anterior. Como você pode ver, a música mudou para a música anterior Ambos os botões funcionam perfeitamente. Tudo bem Uma vez que os controles funcionem bem. Em seguida, temos que cuidar da atualização do horário da música. Quero dizer, temos que atualizar a hora atual, a duração da música. Também temos que atualizar a barra de progresso e assim por diante. Tudo bem, a próxima coisa que vou fazer é adicionar um ouvinte de eventos ao áudio O evento será uma atualização de horário. Esse evento é acionado continuamente à medida que a posição de reprodução de áudio muda Vamos adicionar aqui a função de retorno de chamada. Precisamos inserir aqui um objeto de evento. A próxima coisa que vou fazer é extrair a hora e a duração atuais. Vamos criar uma variável e chamá-la de hora atual. Deve ser igual à hora atual alvo. Estamos obtendo a hora atual do objeto de evento, e o objeto de evento contém informações sobre o Da mesma forma, temos que pegar a duração. Vamos duplicar esse código. A segunda variável será a duração. Temos que selecionar a duração. hora atual recupera a posição de reprodução atual do elemento de áudio e recupera o valor A duração recupera a duração total do arquivo de áudio, novamente em segundos. Tudo bem Depois disso, temos que calcular a largura do progresso. Vou criar uma nova variável, vamos chamá-la de hora atual. Com isso, deve ser igual ao tempo atual dividido pela duração. E temos que multiplicar esse valor por 100. Ok, esta linha de código calcula a porcentagem da duração total decorrida com base na posição de reprodução atual Agora temos que atualizar a largura da barra de progresso. Precisamos do progresso da música e da largura do estilo. Em seguida, vou usar modelos literais. Vamos inserir aqui, a hora atual com. Temos que aderir ao sinal de porcentagem. Tudo bem, com essas duas linhas, atualizamos a interface do usuário. Atualizamos a largura do elemento de progresso da música para refletir a posição atual da reprodução Essa linha indica dinamicamente a largura do elemento da barra de progresso com base na porcentagem do arquivo de áudio que foi reproduzido até o momento em que o áudio é reproduzido Essa largura é atualizada continuamente, fornecendo uma indicação visual do progresso da reprodução de áudio No momento, a largura do progresso está definida em 30%. Vamos continuar e torná-la zero. Então eu vou tocar a música. Como você pode ver, na barra de progresso em que estou, a largura da barra de progresso está aumentando conforme o Odio se posiciona Tudo bem, então tudo funciona bem. Agora temos que atualizar a hora atual da música e também do vídeo. Não é o vídeo, mas a duração do áudio. Vamos continuar e criar novas variáveis. Precisamos da hora atual da música. Vou selecionar esse método seletor de consultas do Panelementlet use Selecione a hora seguida por este painel, temos que usar o seletor ampchild Vou selecionar o primeiro elemento de rotação. Então, vamos duplicar esse código. A segunda variável será alguma duração. Eu vou mudar o seletor que vai ser filho dois Tudo bem, depois disso, precisamos anexar um novo ouvinte de eventos ao áudio, precisamos aqui do ouvinte de eventos de áudio O evento terá dados carregados. Vamos aderir a uma função cívica. ouvinte de eventos escuta o evento de dados carregado, que indica que o navegador carregou os dados odio do Em seguida, vou criar uma variável, que será a duração do ódio Deve ser igual à duração do ódio. Agora estamos extraindo a duração do ódio. Essa linha de código recupera a duração total do arquivo de áudio carregado no elemento Odio e fornece o valor em segundos Ok, em seguida, vou criar outra variável, e será o total de minutos. Precisamos calcular o total de minutos e segundos. Deve ser igual ao piso de matemática. Vou inserir aqui a duração do Odio dividida por 60. Isso duplica essa linha de código. Precisamos de um total de segundos. Nesse caso, precisamos do módulo de duração de áudio 60. Tudo bem A primeira linha calcula o número total de minutos dividindo a duração total por 60 e arredondando para o É por isso que usamos aqui aquele andar. Quanto à segunda linha, ela calcula os segundos restantes pegando o restante ao dividir a duração total por 60 e arredondando para o número inteiro mais próximo Tudo bem, depois disso, temos que formatar os segundos e usar a instrução if na qual temos que verificar se o total de segundos é menor que dez, então temos que adicionar zero na frente do dígito que precisamos aqui, total de segundos Em seguida, vou usar o modelo literal, precisamos de zero e seguida, vou inserir aqui o total de segundos. Novamente, verificamos se o total de segundos é menor que dez. Se for verdade, prefixamos zero nos segundos para garantir que o formato de exibição da hora esteja em minutos e segundos. Tudo bem, finalmente temos que alterar o conteúdo do texto da duração da música, precisamos aqui duração da música seguida pelo conteúdo do texto. Vou inserir aqui os literais do modelo seguidos pelo total de minutos e total de segundos. Precisamos de um total de minutos. Na verdade, precisamos de minutos. Então precisamos da coluna, temos duas no total de segundos. Tudo bem, como você pode ver, temos aqui a duração da música. Se mudarmos para outras músicas , a duração da música será atualizada de acordo. Tudo bem, tudo funciona bem. Em seguida, temos que cuidar da hora atual da música. Vou criar novas variáveis. O primeiro será em minutos atuais. Deve ser igual ao tempo atual do assoalho bucal dividido por 16. Vamos duplicar esse código. Precisamos dos segundos atuais. Temos que mudar a divisão por módulo. A primeira linha calcula o número total de minutos decorridos dividindo o tempo de reprodução atual por o tempo de reprodução atual 60 e arredondando Quanto à segunda linha, ela calcula os segundos restantes pegando o restante ao dividir o tempo de reprodução atual por 60 e arredondando Essa operação garante que a variável de segundos atual represente a segunda parte do tempo. Agora temos que verificar novamente se segundos atuais são menores que dez, temos que fazer a mesma coisa que fizemos aqui. Precisamos prefixar zero no dígito, precisamos segundos atuais iguais ao zero literal do modelo e, novamente, Ok, agora temos que formatar os segundos. Quero dizer, temos que fazer a mesma coisa que fizemos aqui. Vamos adicionar aqui a música, conteúdo de texto da hora atual que temos em minutos atuais, dois pontos, segundos atuais. Ok, novamente, estamos atualizando a interface do usuário. Atualizamos o conteúdo do texto de algum elemento de tempo atual com os minutos atuais calculados e os segundos atuais no formato minutos e segundos. Essa linha diz dinamicamente o conteúdo do texto de um elemento para exibir o tempo de reprodução atual do arquivo de áudio em minutos e segundos Tudo bem, vamos tocar a música. Como você pode ver, a hora atual não está sendo atualizada. Temos um problema em algum lugar aqui. Vamos verificar o código. Na verdade, esse código, quero dizer, o código dos minutos e segundos atuais deve estar fora desse evento. Vamos colocar o código aqui e depois verificar os resultados. Como você pode ver, a hora atual está sendo atualizada perfeitamente para todas as músicas. Tudo bem, agora temos que passar para a última parte do nosso projeto. Quer dizer, temos que atualizar a barra de progresso assim que clicarmos em qualquer lugar aqui, como no projeto finalizado. Se clicarmos em qualquer lugar na barra de progresso , a música será rebobinada adequadamente Tudo bem, então temos que procurar uma posição de reprodução específica Vou adicionar o ouvinte do evento ao horário da música. Com o evento de clique, precisamos do evento de clique do ouvinte. E com uma função de retorno de chamada, vou inserir aqui o objeto de evento Ok, agora temos que definir o progresso com, vamos criar uma nova variável. Vai progredir com. Deve ser igual ao cliente de horário da música. Com essa linha de código, recuperamos a largura do elemento de tempo da música, que representa a largura total da barra de progresso Em seguida, temos que criar outra variável, que será o deslocamento frio X. Vou torná-la igual ao deslocamento X. Essa linha recupera a distância horizontal da borda esquerda do elemento de tempo da borda esquerda música até o ponto em que o usuário clicou, indicando a posição em que o usuário indicando a posição em que o Novamente, essa linha de código recupera a distância horizontal da borda esquerda do elemento de tempo da música até o ponto em que o usuário clicou Tudo bem, depois disso, vou definir a duração da música. Vamos criar outra variável. Na verdade, precisamos de espaço aqui. A nova variável será a duração da música. Deve ser igual à duração do ódio. Depois disso, temos que definir a hora atual do Odio Vou adicionar aqui a hora atual do Odio. O que deve ser igual ao deslocamento x do clique dividido pela largura do progresso Temos que multiplicar esse valor pela duração do sol. Tudo bem, essa linha de código calcula a posição de reprodução desejada no arquivo de áudio com base na proporção entre a posição desativada clicada na largura da progresso e a largura total da barra a largura total da Em seguida, multiplicamos pela duração total do áudio. Ele definirá a propriedade de hora atual do elemento de áudio buscando efetivamente a posição de reprodução desejada Agora temos que chamar a função de tocar música. Ele iniciará a reprodução do áudio a partir da posição de reprodução recém-definida Tudo bem, vamos verificar o resultado. Se eu clicar, nada acontecerá porque cometemos um erro. Vamos verificar o console. Falha ao definir o script de propriedade de hora atual JS 1204124 hora atual Na verdade, tudo parece estar correto. Vamos verificar outras linhas que temos aqui. O que é isso que precisamos aqui? Pontos do conjunto X, então é um tipo Desculpe por isso. Agora eu acho que está tudo correto. Vamos verificar os resultados. Ok, então tudo funciona perfeitamente. Tudo bem Estamos quase concluindo nosso projeto. A única coisa que vou fazer é lidar com o fim da reprodução de áudio Quando a música terminar , teremos que passar para a próxima música. Vou adicionar aqui um ouvinte emo ao áudio. O evento será encerrado. Quando a música terminar, teremos que chamar a próxima função de reprodução da música. Vamos inserir aqui a próxima música a ser reproduzida. Ok, quando o evento encerrado ocorre , acionamos a função de reprodução da próxima música, que carregará e tocará a próxima música na playlist. Vamos verificar os resultados. Vou rebobinar a música aqui. Vamos esperar pelo fim. Como você pode ver, quando a música terminou , ela mudou para a próxima música Tudo bem, então tudo funciona bem. E, na verdade, podemos dizer que com o projeto terminamos. Espero que você goste do projeto e aprenda coisas novas. Agora é hora de começar a criar nosso próximo projeto. Vamos passar para a próxima palestra. 6. Project 1 - Cartão de produto CSS: Tudo bem, então é hora de começar a criar o projeto, que será um cartão de produto bem desenhado e interessante O projeto será criado com base em HTML e CSS. Será simples, mas você aprenderá como criar o cartão do produto de uma forma moderna e descolada. O cartão é colocado no centro da página, que tem um fundo bonito. No lado esquerdo do cartão, temos uma imagem dos fones de ouvido. Quanto ao lado direito, inclui alguns elementos diferentes, como títulos, parágrafos, o preço do produto e o botão para comprá-lo alguns elementos diferentes, como títulos, parágrafos, o preço do produto e o botão para comprá-lo Ok, vamos falar sobre o projeto. Vamos começar a criá-lo. Eu criei uma nova pasta na qual temos uma pasta de imagens. Vamos abrir a pasta no código VS. Em seguida, criarei nossos arquivos de trabalho para HTML , que serão HTML de índice e para o estilo CSS Ss. Em seguida, vou abrir o arquivo HM de índice e criar a estrutura HD básica. Vamos mudar o título. Vai ser o cartão do produto, depois vou vincular o arquivo CSS. Ok, vamos abrir o projeto e o navegador. Em seguida, colocarei o navegador e o editor lado a lado, assim, para tornar nosso processo de trabalho mais simples e conveniente. Tudo bem, depois disso, vou acessar o site do Google Phones, porque vamos usar um dos telefones do Google durante todo o projeto. Vamos visitar o site e depois pesquisar o Google Phone chamado, não é? Vou selecionar alguns estilos diferentes, de pesos de telefone leves a ousados Em seguida, vou copiar o link e colá-lo no elemento principal. Tudo bem, estamos prontos para começar a escrever a marcação HTML. Vou abrir a tag div, que será o contêiner dentro desse elemento Vou abrir outro mergulho que será o plano de fundo. Precisamos de dois elementos aqui. Em seguida, vou abrir o cartão no qual teremos o invólucro de fundo E então, dentro da embalagem, precisamos de outro mergulho que será o fundo do cartão Depois disso, vou abrir o cabeçalho. Elementos com o título do cartão de classe. Vamos jogar aqui. Batidas. Então precisamos de desenvolvimento, que será o carro. Agora vou abrir a tag de imagem. Vamos selecionar Imagem na pasta de imagens. Vai ser fone de ouvido. Tudo bem. Depois disso, eu sou a tag que será a sombra. Primeira sombra. Precisamos de três sombras. Vamos mudar os nomes das classes. Em seguida, vou inserir aqui outra tag profunda. Vai ser conteúdo do cartão. Teremos aqui H três elementos de cabeçalho com o título pequeno da classe. Isso é inserir bits. Em seguida, precisamos de H uma tag de cabeçalho com o título principal da classe. Precisamos de fones de ouvido. Em seguida, vou abrir a tag de cabeçalho H five com o subtítulo da classe Vou inserir aqui a visão geral do produto. Em seguida, precisamos do parágrafo com algum texto fictício. Essa será a visão geral do produto. Em seguida, vem a parte do preço. Vamos abrir H, uma etiqueta de cabeçalho com o plano de fundo de preços que precisamos aqui, $99. Depois, vou abrir H, três elementos de cabeçalho com a média do preço do nome da classe Vamos inserir aqui o mesmo valor. Finalmente, precisamos do botão com a classe chamada BTN. O tipo será inferior. Então eu vou comprar juros. Tudo bem, na verdade, com a marcação HTML, terminamos. Agora podemos seguir em frente para escrever o CSS. Vou selecionar cada elemento usando um asterisco. Em seguida, defina a margem e preencha os dois para zero. Em seguida, vou definir o tamanho da caixa para a caixa de borda. Além disso, precisamos de uma família divertida para sermos sinceros, sem. Em seguida, vou selecionar o elemento HTML e definir o tamanho da fonte para 62,5% porque vamos usar M como unidade de medida Precisamos que um m seja igual a dez pixels, então é por isso que definimos o tamanho da fonte. Em seguida, precisamos do contêiner, a largura será de 100%. Então, precisamos que a altura seja de 100 pontos de vista Em seguida, vou mudar a cor do plano de fundo. Vamos usar aqui 57567. Em seguida, vou selecionar o plano de fundo, definir sua largura como 180 Ram. Então, a altura será a mesma. Em seguida, vou definir raio da borda em 50%, será o círculo Também altere a cor de fundo. Vou usar 334. Em seguida, vou mudar a posição. Vamos tornar isso absoluto. E também precisamos de uma posição relativa para o elemento pai. Aqui temos o plano de fundo, o círculo. Vamos corrigir, vamos selecionar a primeira rodada e definir a posição esquerda para -45%. Quanto às duas posições, será -10%. Em seguida, vou selecionar o segundo plano, definir a posição correta para -15%. Quanto às duas posições, será 35% Ok, agora o plano de fundo está agora o plano de fundo Vamos esconder as peças fora do contêiner. Agora, os planos de fundo estão finalmente prontos. Em seguida, vou selecionar o carro. Vamos definir largura e altura. A largura será de 120 Ram. Quanto à altura, vou configurá-la para 70 Ram. Também altere a cor de fundo. Vou usar o 5566, precisamos exibir o cartão Vamos definir a posição como absoluta, então a posição superior será 50%, a posição esquerda será 50%. E então, para centralizar o elemento, precisamos transformar, traduzir com valores -50% e novamente -50% Aqui temos o carro Vamos definir o raio da borda em um Ram para tornar os cantos arredondados Em seguida, precisamos de box shadow com os valores 01 Ram, seis Ram e a cor RGBA na cor preta, com uma opacidade menor, 0.4 Temos aqui um bom Tudo bem, depois disso, vou cuidar do fundo do primeiro vou cuidar do fundo do cartão, precisamos do invólucro Vamos definir a largura para 100%. A altura será 100% . Depois, vou selecionar o plano de fundo do cartão em si Vamos definir a largura para 100%. Em seguida, a altura será de 200%. Quanto à cor de fundo, vou usar o chamador Tudo bem, em seguida, precisamos que a posição seja absoluta. Então, precisamos da posição relativa para o elemento pai. Vamos definir a posição esquerda. Vai ser -55% Quanto à posição superior, vou configurá-la para -50% Então, precisamos transformar a função de rotação Z. Vamos girar o elemento em -40 graus. Além disso, vou apoiar o raio em zero, 50% e depois novamente 50% e zero Ok, aqui temos o plano de fundo. Precisamos usar overflow hidden para ocultar a parte do plano de fundo Tudo bem, então o plano de fundo está pronto. Em seguida, vou cuidar do título do cartão. Vamos definir a posição como absoluta. Então, a posição superior será 2%. Quanto à posição esquerda, vou defini-la para 50% E, novamente, precisamos transformar, traduzir x para centralizar o elemento. Em seguida, vou definir o tamanho do telefone para 25 quadros. Aqui temos o título. Em seguida, vou criar um espaço entre as letras. Vamos 3025 Fram. Além disso, precisamos transformar o texto em maiúsculas e depois alterar a cor. Vai ser 777970. Aqui temos o título, que parece muito melhor. Em seguida, vou diminuir a opacidade. Vamos 32.3 Tudo bem, o título parece muito bom Em seguida, vou cuidar da imagem dos fones de ouvido. Vamos definir sua posição como Absoluta. Então, as duas posições serão -5%. Quanto à posição esquerda, vou configurá-la para -2%. Como você pode ver, a imagem está Em seguida, vou cuidar dos efeitos de sombra. Vamos selecionar a primeira sombra. Vou definir sua largura para 20 Ram. Então, a altura será de 60%. Em seguida, vou definir a posição como absoluta. A posição superior será 15%. Quanto à posição esquerda, vou definir para 30% Em seguida, precisamos que o fundo seja um gradiente linear Vou definir a direção para a direita. E então vamos definir a primeira cor como transparente. A próxima será a cor preta RGBA com opacidade 0,7. Quanto à terceira cor, ela também será transparente Aqui temos os elementos. Em seguida, vou usar o raio da borda. Vai ser zero. 50% 50% e zero. Em seguida, vou usar o filtro com a função de desfoque. O valor será de três Ram. Além disso, vou diminuir a opacidade. Vamos configurá-lo como 2.5, aqui temos um bom efeito de sombra. Vamos adicionar aqui a rotação de transformação y com o valor de 45 graus. Ok, agora temos um resultado padrão. Vamos seguir em frente e copiar esse código. Para a segunda sombra, precisamos que a largura seja de 25 Ram. Em seguida, vou definir a altura para 25 Ram também. Vamos mudar a posição que precisamos aqui. fundo será -2% Quanto à posição esquerda, será 28%. Então, precisamos que raio da borda seja 50%. Além disso, livre-se da função de rotação Aqui temos a segunda sombra, agora temos que tirar você da Vamos definir com 255 Ram, e a altura será 15 Ram Em seguida, precisamos da cor de fundo. Vamos pegar essa função a partir daqui, vou mudar a opacidade Em seguida, precisamos transformar com a função rotacionar x. Precisamos girar o elemento de acordo com a direção x, e o valor será 70 graus. E também precisamos da função de rotação com o valor de -30 graus Em seguida, vou mover o elemento com o valor cinco quadros Então precisamos de um filtro com a função Blar. O valor será de cinco fram. Ok, então vamos nos sentar sobre as sombras a seguir. Eu vou cuidar do conteúdo do cartão. Vamos seguir em frente e definir a posição como absoluta. Então, a posição superior será zero, posição correta também será zero. Em seguida, precisamos definir a largura para 50% e a altura será 100%. Vamos usar o preenchimento e configurá-lo para cinco Ram Ok, depois disso, vou cuidar do pequeno cabeçalho, definir a margem superior para seis Ram. Em seguida, precisamos que o tamanho do telefone seja cinco. Altere também a transformação do texto. Vamos colocar em maiúsculas. Em seguida, precisamos colocar em segundo plano uma função de gradiente linear A direção será para a direita. Vamos usar a primeira cor, 9954. Então, o próximo será 4622 com o valor de 13%. Em seguida, precisamos do clipe de fundo do Webket com textos de valor. Precisamos de cores de texto na web com valor transparente. Como você pode ver, temos aqui texto com um efeito de gradiente linear Em seguida, vamos usar algum efeito de sombra com valores de 0,5 Ram, um Ram, e a cor será RGBA, cor preta com opacidade 0,2 Tudo bem, é isso, sobre o Em seguida, vou pegar aqui o título principal, definir o tamanho da fonte. Serão sete Ram. Então, precisamos que o texto esteja em maiúsculas. Também mude a cor, vamos usar a cor branca. Em seguida, vou usar algum efeito de cronograma com os valores da propriedade anterior do Tech Shuttle. Em seguida, vou definir a margem para 0,05 Ram e três Ram. Aqui temos o segundo título. Em seguida, vou cuidar do subtítulo, ou seja, da visão geral do produto Vamos pegar esse código aqui e fazer algumas alterações. O tamanho do telefone será de 1,6 Ram. Então, precisamos que o peso do telefone seja 300. Vamos nos livrar da marcha. O título parece bom. Em seguida, vou cuidar do parágrafo. Vamos definir o tamanho do telefone para 1,4 Ram. Então a cor será A. Também altere a altura da linha, vamos configurá-la para 1,2. Em seguida, precisamos ser 300. Defina o peso para dois, então precisamos ser um Ram, 05 Ram e depois três Ram. O parágrafo parece bom, vamos seguir em frente. E o histórico de preços, defina a posição como absoluta. Então, a posição inferior será de cinco Fram. Então, precisamos que o tamanho da fonte seja 12 Ram. Em seguida, vou mudar a cor. Vamos usar a cor 77797 e diminuir a opacidade. Vamos configurá-lo como 2.5 Aqui temos o plano de fundo do preço. Em seguida, vou selecionar o preço em si. Vamos definir a posição como absoluta. Então a posição do Boson será de oito m. Em seguida, precisamos da posição esquerda, que será de 17 Ram Altere o tamanho do telefone, vamos configurá-lo para quatro RAM. Mude a cor, torne-a branca. Também precisamos de algum efeito de sombra. Vamos configurá-lo para 01 Ram, dois m, e o RGBA com a opacidade 0.2 Em seguida, eu cuido dos Vamos definir a posição como absoluta. Então, a posição inferior será de 11 Rams. Para a posição correta, vou configurá-la para dez Ram. Em seguida, vem a largura, que será de 20 Ram. Além disso, vamos definir a altura para cinco Ram. Aqui temos a parte inferior bem colocada. Em seguida, vou cuidar do raio da fronteira. Vamos configurá-lo em 2,7 Ram. Também mude a borda, faça com que ela não seja nenhuma. Em seguida, vou definir o plano de fundo como gradiente linear. Vou pegar esse valor a partir daqui. Temos aqui um bom efeito. Vamos nos livrar desse valor a partir daqui. Em seguida, vou definir o tamanho do telefone para 1,6 Rams. o texto em maiúsculas e mude a cor, ele ficará branco Precisamos de algum espaço entre o botão de letras, parece muito bom. Em seguida, precisamos de algum efeito de sombra. Defina a sombra da caixa para 01 Ram, três Ram. E a cor preta RGBA. Também mude o cursor, torne-o ponteiro. OK. A última coisa que vou fazer é tornar o botão clicável Precisamos de aulas ativas. Em seguida, precisamos transformar, traduzir Y. Vamos definir dois -0,2 Ram Depois de clicarmos no botão, ele se moverá bem. Tudo bem, vamos conversar sobre esse projeto. Espero que tenham gostado. Vamos seguir em frente com a resposta para construir a próxima. 7. Project 2 - Menu de navegação CSS com o mouse: Tudo bem, então é hora de seguir em frente e criar nosso próximo projeto. Nesta seção, vamos criar um menu de navegação CSS com um efeito de foco agradável e interessante Como você pode ver, temos aqui alguns itens de navegação diferentes. Depois de passarmos o mouse sobre os itens , obteremos esse efeito agradável e legal Cada item de navegação tem uma cor de fundo diferente e, além disso, o item aparece bem em segundo plano Ok, isso é tudo sobre o projeto. Agora é hora de construí-lo. Eu tenho uma nova pasta na área de trabalho. Vamos em frente e abri-lo no código VS. Vamos criar nossos arquivos de trabalho para HTML e CSS. Teremos apenas dois arquivos. Vamos abrir o arquivo HTML indexado e criar o documento HTML básico Vamos mudar o título. Vai ser um menu CSS. Em seguida, vou vincular o arquivo CSS e especificar aqui o nome do arquivo. Ok, vamos abrir o projeto e o navegador. Em seguida, coloque o navegador e o editor lado a lado. Então, durante todo o projeto, vou usar o Google Phones. Para isso, precisamos visitar o site do Google Phones. Vamos pesquisar o telefone do Google chamado Writs. Vou selecionar o estilo. Em seguida, vou selecionar outro telefone chamado Josephine Vamos usar estilos diferentes, então. Copie o link daqui e cole-o no elemento principal. Ok, Ok, então estamos prontos para começar a construir o projeto. Vou criar o HTM e marcar que precisamos um contêiner no qual vou usar tag div com a navegação da classe Ele consistirá em alguns links diferentes. A primeira será, vamos inserir aqui um atributo chamado texto de dados. Vou colocar sua casa. Vamos duplicar o link e alterar o conteúdo e também os atributos de texto dos dados de que precisamos Então, o próximo serão projetos. Em seguida, teremos uma galeria. O próximo será o bloco. O último item será um conflito. Tudo bem, então vamos falar sobre o HTML. Em seguida, temos que começar a escrever o CSS. Em primeiro lugar, vou selecionar cada elemento usando um asterisco e definir uma margem, colocando os dois em zero Em seguida, vou definir o tamanho da caixa para a caixa de borda. Além disso, precisamos que a decoração de texto não seja nenhuma. Em seguida, vou definir o tamanho do telefone do elemento humano H para 62,5% porque vamos usar a RAM como unidade de medida. Uma RAM deve ser igual a dez picos, os elementos ficaram menores os Vamos selecionar o contêiner. Vou definir a largura como 100% e, em seguida, a altura será de 100 pontos de visualização Em seguida, vou usar o Flex Book para centralizar o conteúdo usando o Justified Content Center o conteúdo usando o e o Align Items Center Como você pode ver, os links são colocados no centro da página. Em seguida, vou selecionar a navegação. Vamos definir a altura para 60 Ram. Então eu vou usar o flex box. Precisamos mudar a direção, vamos configurá-la como coluna. Além disso, vou alinhar os itens no centro. Quanto à propriedade de conteúdo justificado, vou configurá-la para espaçar uniformemente. Aqui temos os itens de navegação bem posicionados. Em seguida, vou selecionar os elementos do link. Vamos definir a família telefônica. Serão direitos. Em letra cursiva, o telefone foi trocado. Depois, vou aumentar o tamanho do telefone. Serão seis Ram, A. Mude a cor. Vou usar o 5255 Então, precisamos de espaço entre as letras. Vamos configurá-lo como 2.2 e também alterar a largura, vamos fazer com que seja 100%. E a altura também será 100%. Então, precisamos que a linha de texto da técnica esteja no centro. Temos aqui os itens de navegação. Eles parecem muito bonitos. Em seguida, vou selecionar a navegação com um efeito de foco. Quero dizer, passe o mouse sobre a pseudoclasse, seguida pelo elemento link Vamos mudar a cor. Vai ser 888. Em seguida, vou selecionar a navegação, seguida pelo link. E depois o passar o mouse. Eu vou mudar a cor. Vamos configurá-lo para branco. Vamos definir a sombra da caixa para o elemento de link em 0,5 Ram, uma Ram. E a cor preta RGBA com opacidade 0.1 Em seguida, precisamos de uma transição para Na verdade, precisamos aqui da sombra tecnológica e não da sombra da caixa ao pairar A cor do link está mudando. Em seguida, vou selecionar Link de navegação. E então, antes do elemento, vamos definir o conteúdo como atributo. E então precisamos de texto de dados, que usamos no arquivo HTML. Em seguida, vou definir a posição como absoluta. E precisamos de uma posição relativa para a navegação. Depois disso, vou definir a primeira posição para 50%. Então a posição também será de 50%. Vou censurar o elemento usando transform translate -50% e novamente -50%. Em seguida, vou definir a largura para 180 m e a altura também será 180 m. Precisamos que a cor de fundo seja vermelha, essa é uma cor temporária. E também uma opacidade decrépita. Tudo bem, vamos arredondar o elemento usando o raio da borda 50%. Então, precisamos que uma propriedade de índice seja menos um para tornar os links visíveis Ok, isso é um resultado temporário. Precisamos do Display Flex. Então justifique. O conteúdo será o centro. E também precisamos de um centro de itens de linha. Em seguida, vou aumentar o tamanho do telefone. Serão 30 Ram. A família telefônica será o segundo telefone, Joseph, em tapa serifada Em seguida, o peso do telefone será reduzido. Além disso, vou mudar a cor. Vamos usar 777. Como você pode ver, temos aqui os itens, quero dizer, os itens maiores no plano de fundo da navegação, precisamos exibi-los quando passamos o mouse sobre os itens Em seguida, vou selecionar a navegação. A com a com o mouse, seguido pelo pseudo-elemento anterior Na verdade, por padrão, vou deixar o conteúdo vazio. Em seguida, o conteúdo com o texto da data do atributo deve passar o mouse Vamos nos livrar da altura interna e colocá-los aqui, pois precisamos que a posição esquerda seja de 50%. Livre-se da cor de fundo e também torne a opacidade zero. Aqui precisamos de opacidade 0,7. E também vou definir o espaçamento entre letras para 50 Ram Quanto ao efeito de foco, o espaçamento entre letras será de um Finalmente, precisamos de uma transição para um efeito mais suave. Depois de passarmos o mouse sobre os itens , obteremos os itens adequados em segundo plano Em seguida, vou ocultar o transbordamento para me livrar das barras de rolagem ao passar o mouse Além disso, também precisamos de um transbordamento oculto para o contêiner. Saiba que tudo funciona bem. A única coisa que precisamos fazer é mudar as cores de fundo. Depois de passar o mouse sobre os itens, precisamos de navegação seguida pelo link com o seletor de gráfico E então precisamos antes do elemento. A cor de fundo do primeiro item será Bf94 144 Temos aqui a cor de fundo do primeiro item. Precisamos do mesmo para todos os itens. Na verdade, vamos mudar a posição esquerda e torná-la 40%. Agora temos um resultado melhor. Vamos duplicar esse código e alterar as cores de fundo para o resto dos itens O segundo será o F3722. Então teremos 8961, então teremos 974 Então, o próximo será nove em seis. Para o último item, precisamos de 43 A, A. Na verdade, também precisamos alterar os seletores infantis Tínhamos aqui um em todo lugar. Precisamos de números de um a seis. Tudo bem, agora temos aqui um efeito agradável e legal. Na verdade, quase tudo funciona bem. Só precisamos fazer uma pequena alteração na propriedade de transição. Vamos rolar para cima e fazer a transição, em vez de tudo, vou garantir separadamente o espaçamento entre as letras e a posição esquerda Agora temos um resultado muito melhor. Ok, é isso aí, o projeto está concluído. Espero que tenham gostado. Vamos seguir em frente. 8. Projeto 3 - Caixa modal de sucesso/falha: Tudo bem, é hora de começar a criar nosso próximo projeto. Nesta seção, criaremos uma caixa de módulo de falha de sucesso. Quero dizer, a mensagem pop-up que nos mostra o sucesso ou o fracasso. Você encontrará essa mensagem em quase todos os sites. Muito frequentemente, temos aqui dois botões diferentes. Um deles é verde e o outro é vermelho. Se eu clicar no botão verde , receberemos essa bela mensagem pop de sucesso. Então, se eu clicar no botão Avançar, ele fechará como no botão vermelho. Se eu clicar nele, receberemos uma mensagem de falha, que será fechada quando eu clicar no botão Tentar novamente. Ok, isso é tudo sobre esse projeto. Vai ser simples, mas acho que vai ser muito útil e você vai gostar. Vamos começar. Eu criei uma nova pasta na área de trabalho. Vamos abri-lo no código VS. Em seguida, crie nossos arquivos de trabalho para HTML, CSS e script Gale O primeiro será HTML indexado. Então, teremos estilos e também precisaremos de scripts. Em seguida, vou abrir o arquivo HMO de índice e criar o documento HTML básico Vamos mudar o título. Será uma caixa de modelo e, em seguida, precisamos vincular os arquivos CSS e Jovscopt Ok, em seguida, vou executar o projeto no navegador. E também vou colocar o editor e o navegador lado a lado. Ok, em seguida, vou pegar o link CDN do telefone, porque vamos usar alguns ícones de SO do telefone em todo o projeto Vamos copiar o link daqui. Em seguida, vou abrir a tag do link e colar o link do CDN aqui Ok, em seguida, vou visitar o site do Google Phones, porque vamos usar um dos telefones do Google. Vamos pesquisar o Google Phone, chamado Weeks Made for Display. Vou selecionar esses estilos diferentes, depois copiar o link daqui e colar no cabeçalho Elon Tudo bem, estamos prontos para começar a escrever a marcação de e-mail HT Vou criar um desenvolvimento que será o contêiner dentro do desenvolvimento. Vou abrir outra profundidade, será um conteúdo no qual teremos sucesso. Em seguida, vou inserir Patson com as classes PTN, depois Success BTN O texto será Enviar. Em seguida, precisamos de uma caixa modelo. Vou criar desenvolvimento com a classe Sucesso, modelo e modelo. Isso é inserir aqui outro P que será o ícone do modelo. E também precisamos de outra classe Success que é inserir aqui um ícone de telefone que será FA solid FA check Após o ícone, precisamos do topo do modelo no qual temos H, um elemento de cabeçalho, o texto é sucesso. O top do modelo será seguido pelo modelo Patson. Teremos aqui outra aula também, Pots, sucesso. Vamos inserir um pote com um modelo de classe BTN. Vou definir o atributo de tipo como potes. Vamos inserir o texto. Vá em frente. Tudo bem, agora precisamos do mesmo para a falha. Vamos duplicar esse código e fazer algumas alterações. Precisamos transformar o sucesso em fracasso. Na verdade, vamos fazer isso para cada sucesso. Em seguida, precisamos falhar. Altere também o texto do botão. Vai ser T novamente. Também precisamos mudar o ícone. Ok, acho que isso fala sobre a marcação Html. Vamos começar a escrever o CSS. Vou selecionar cada elemento e, em seguida, definir a margem e preencher os dois até zero Em seguida, vou definir o tamanho da caixa para caixa de borda. Vou mudar a família telefônica. Será o telefone que selecionamos nas semanas feitas para exibição. Vai ser sansoriflws. É possível ver que os estilos padrão são aplicados aos elementos. Em seguida, vou selecionar modelos e ocultá-los usando display none. Tudo bem, vamos cuidar do contêiner. Vou definir sua largura para 100% e a altura será de 100 visualizações da altura do pote. Altere também a cor do plano de fundo. Vamos usar aqui a cor 264653. É de cor verde. Então precisamos de um livro de linho. E para centralizar os itens de que precisamos, justifique o sensor de conteúdo e um centro de itens de linha Ok, depois disso eu vou selecionar PTN. Vamos definir a margem para três Ram, então. A largura será de 15 Ram. Vou definir a altura para quatro Ram. Os padrões ficaram maiores. Vamos definir o raio da borda para três Ram. Então, livre-se do Porter padrão, faça com que não seja nenhum, precisamos de algum efeito de sombra Vamos definir box shadow 201 Ram, três Ram. E use aqui R para ser uma cor preta com menor opacidade. Tudo bem, em seguida, vou definir o tamanho da fonte para um Rame O peso da fonte para Polde se transformar em maiúscula. Vamos espaçar 2,1 Ram. Em seguida, mude a cor. Vai ser branco. E também coloque o cursor no ponteiro. Agora precisamos alterar os planos de fundo do botão separadamente. A primeira será a cor 298. Quanto ao segundo botão, vou usar uma cor vermelha, que será Fd575 Ok, os botões estão prontos. Em seguida, vou criar, clicar no fato usando transform translate y. Vamos configurá-lo como 2.2 Ram. Depois de clicar no botão , ele se moverá. Fizemos isso usando uma pseudoclasse ativa. Em seguida, vou esconder os botões e cuidar dos modelos. Vamos definir com 25 Ram, então a altura será 30 Ram. Em seguida, vou mudar a cor do plano de fundo. Vamos configurá-la para E. Eu vou definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que será o contêiner. Vamos colocar os dois modelos no centro. Precisamos que as propriedades superior e esquerda sejam de 50% e também precisamos transformar traduzir com os valores -50% e -50%. Ambos os modelos são colocados no centro da página Em seguida, vou usar o flex box. Vamos mudar a direção em que será a coluna. Precisamos alinhar os itens verticalmente. Então, vamos colocar os itens de uma linha no centro. Além disso, vou tornar o elemento arredondado usando o raio da borda Precisamos então de box shadow com os valores 01 Ram, três Ram. E a cor preta RGBA com menor opacidade. Ok, depois disso, vou selecionar o ícone do modelo. Vamos definir a largura para seis Ram, então a altura também será de seis Ram. Precisamos que a posição seja absoluta. Então eu vou colocar na posição dois menos três Ram. Como vou usar a porta do raio, vamos tornar o elemento arredondado Em seguida, vou selecionar o ícone em si. Vamos aumentar o tamanho do telefone. Vou configurá-lo para 2,5 Ram. A cor vai ser branca. Aqui temos os ícones, selecione o ícone Falha e defina sua cor de fundo para vermelho. Além disso, vou usar sombra com os valores 0,5 Ram, dois Ram, e a cor será 240-96-5608, e a Opacidade 0,3. Então precisamos de uma caixa flexível para centralizar o precisamos de uma caixa flexível Vamos justificar um centro de conteúdo e um centro de itens de linha. Ok, o ícone está pronto e parece muito bom. Próximo. Em seguida, vou cuidar da blusa do modelo. Digamos que sua largura seja de 100%, a altura será de 20 Ram. Em seguida, vou usar o Display Flex com conteúdo justify e um centro de itens de linha Vamos selecionar Modal Top H, um elemento de cabeçalho Vou aumentar o tamanho do telefone, será de 2,5 Ram. Em seguida, mude a cor. Vou fazer com que seja 264653. Então eu vou tirar você do lado de baixo. Vamos definir a largura para 100%. A altura será de dez Ram, conforme necessário. Novamente, faça uma caixa flexível com Justify Content Center e o centro Align Em seguida, vou selecionar o modelo, Bottom, falhar e alterar a cor de fundo. Você vê uma cor vermelha. Na verdade, precisamos de um raio de fronteira reduzido. Vamos definir o raio da borda para 00. Em seguida, um Ram e novamente um Ram. Está bem? O problema está resolvido. Em seguida, vou selecionar o Batson. Vamos definir com dez Ram, então a altura será de três Ram, raio da borda será de dois Ram Em seguida, vou me livrar da borda padrão, torná-la nula, alterar a cor de fundo. Use aqui, cor branca. Em seguida, precisamos transformar o texto em maiúsculas. Além disso, o peso da fonte ficará em negrito. Em seguida, vou usar algum efeito de sombra com valores 012 e a cor RGB Vamos definir o curso como ponteiro. Ok, depois disso, vou mudar a cor da parte inferior. Vamos configurá-lo para vermelho. Em seguida, precisamos criar um efeito de clique. Vamos transformar a tradução em 0,2 m. Ok, agora temos aqui o efeito de clique. Tudo bem, depois disso, vou selecionar o Fail Model e ocultá-lo por um tempo. Para personalizar o modelo de sucesso, vamos selecionar o ícone de sucesso definir sua cor de fundo como verde. Então precisamos de uma caixa de sombra de 0,5 m, dois Ram. E o RGBA 421-57-1403 e o Opacity 0.3 Tudo bem. Em seguida, vou selecionar Model Bottom Success e alterar a cor de fundo e o Opacity 0.3 Tudo bem. Em seguida, vou selecionar Model Bottom Success e alterar a cor de fundo. Vai ser verde. Na verdade, os dois modelos estão com boa aparência. Em seguida, vou mudar a cor do Boom, que será verde. Tudo bem. É isso aí, está tudo pronto. Agora vou me livrar dessa tela. Nenhuma daqui. Vou esconder modelos usando escala. E também precisamos de propriedades de opacidade e visibilidade. Em seguida, precisamos recuperar os botões. Agora é hora de usar. Vamos criar os botões variáveis e selecionar os botões usando o método curry select all Precisamos do nome da turma dela, BTN. Em seguida, precisamos da segunda variável. Serão modelos. Precisamos aqui do modelo, também do modelo BTN. Vamos inserir aqui o modelo PTN. Já podemos ver todos os elementos. Vamos dar uma olhada nos botões. Usando o método forage, precisamos adicionar a escuta de eventos ao botão Clicamos em evento, vou inserir aqui uma função de retorno de chamada Depois de clicar no botão, precisamos examinar os modelos usando novamente o método de forragem Na verdade, precisamos modelar aqui o parâmetro que precisamos aqui na instrução if , na qual temos que definir a lista de classes do modelo if e o primeiro item na lista de classes. Em seguida, precisamos dividi-lo e selecionar o primeiro item se for igual à classe da lista de classes BTN Quero dizer, o segundo item novamente, precisamos dividi-lo em um traço e depois selecionar o primeiro item Se essa condição for verdadeira, precisamos mostrar a caixa do modelo. Precisamos aqui adicionar o método e, em vez disso, a classe open, que será usada no arquivo CSS. Precisamos selecionar aberto, seguido pelo modelo, e temos que torná-lo visível. Vamos selecionar esse código. Além disso, precisamos aqui de opacidade e visibilidade. Precisamos que a escala seja única e a opacidade uma, e a visibilidade visível Além disso, vou fazer a transição de todos os 0,5 segundos. Como você pode ver, os botões funcionam bem e os modelos aparecem quando clicamos neles. Em seguida, precisamos escondê-los. Depois de clicar nos botões dos modelos, precisamos examinar os BTNs do modelo Em seguida, adicionarei o ouvinte de eventos ao modelo BTN. Com o evento click, temos que remover a classe aberta do modelo. Agora, se eu clicar no botão, as caixas do modelo funcionarão bem, tudo funcionará bem. E com esse projeto , terminamos. Vamos seguir em frente. 9. Project 4: faça login/formulário de inscrição com ilustrações: Tudo bem, então é hora de seguir em frente e começar a criar nosso próximo projeto, que será um formulário de inscrição com defeitos e ilustrações animadas Quando você cria o site, quase todas as páginas precisam desse tipo de modelo. Acho que esse projeto será muito útil para você. Vamos continuar descrevendo o projeto. Temos aqui um modelo de formulário de login. No lado esquerdo, você pode ver as ilustrações. Quanto ao lado direito, temos aqui campos impo com um padrão Abaixo, você encontra um link para se inscrever. Se eu clicar nele, o formulário de login mudará para o sinal do formulário, bem com alguns defeitos animados Assim, podemos mudar para diferentes formas dessa forma. Tudo bem, vamos falar sobre esse projeto, vamos começar. Eu criei uma nova pasta na área de trabalho na qual tenho uma pasta com imagens ilustrativas. Vamos abrir a pasta no código VS e, em seguida, criar nossos arquivos de trabalho para HTML. Então precisamos de arquivos CSS, precisamos de um arquivo aqui para Javascript. Em seguida, abra o arquivo HTML de índice e crie um documento HTML básico. Eu vou mudar o título. Serão formulários de inscrição, login. Em seguida, vou vincular os arquivos. O primeiro será um arquivo CSS. Também precisamos aqui do arquivo Javascript. Vamos especificar o nome do arquivo no atributo source. Vamos prosseguir e executar o projeto no navegador usando o servidor ativo. Em seguida, vou colocar o editor e o navegador lado a lado, assim. Para tornar nosso processo de trabalho mais conveniente e simples, vou visitar o site de fontes CDN, JS para pegar o link, porque vamos usar alguns ícones de fontes lom Vamos abrir a tag de link e colar a CDN aqui. Além disso, vou usar os telefones do Google. Vamos visitar o site do Google Phones. Vou pesquisar um telefone chamado signa negativo. Não sei se eu pronuncio corretamente, vamos selecionar estilos diferentes e colar o link no elemento principal. Ok, vou começar a criar a marcação H mail. Precisamos aqui de um contêiner no qual vou inserir a tag, que será o invólucro do formulário Em seguida, formamos o invólucro à esquerda e também à direita. Vamos inserir aqui H um elemento de cabeçalho com o texto inscrito. Formulário com a inscrição no formulário de aula. Vamos nos livrar do atributo de ação. Estou inserindo aqui um grupo de entrada no qual teremos uma tag de entrada com o texto do tipo. E precisamos do atributo de espaço reservado no qual vou inserir o nome do usuário Em seguida, vou inserir seu fonossomicon, que será FA, FA sólido Em seguida, vou duplicar o grupo de entrada duas vezes. E vamos mudar o tipo aqui. Vai ser um e-mail. Precisamos aqui de um e-mail. E também mude o ícone. Vai ser um envelope. Então precisamos aqui digitar a senha. O espaço reservado será a senha. E também mude o ícone. Vai ser uma fechadura. Ok, então aqui temos os campos de entrada e os ícones. Vamos inserir aqui uma parte inferior com o formulário de classe BTM que precisamos digitar aqui, será botão Quanto ao texto, vou inserir aqui. Cadastre-se. Ok, depois disso, precisamos de um link com o link de inscrição da turma. Vamos instituir o login por texto. Ok, vamos copiar esse código e colá-lo abaixo no invólucro do formulário Certo, vou fazer aqui algumas mudanças. Precisamos fazer login. Quanto ao elemento de link, ele será se inscrever. E também altere o nome da classe. Ok, acho que é isso. Tudo está pronto. Vou começar a escrever o CSS. Vamos selecionar cada elemento usando um asterisco. Em primeiro lugar, vou definir a margem e colocar as duas em zero. Em seguida, teremos o tamanho da caixa, que será a caixa de borda Vou definir o esboço como nenhum. Em seguida, precisamos que a decoração de texto não seja nenhuma. Vou mudar a família telefônica. Será um sinal negativo ou, como você pode ver, os estilos padrão serão aplicados aos elementos Em seguida, selecionarei o elemento Html e diminuirei o tamanho da falha porque usaremos M como unidade de medida. Nesse caso, um m será igual a dez pixels. Ok, vamos começar a personalizar o contêiner. Vou definir a largura como 100% A altura será de 100 portas. Em seguida, precisamos da cor de fundo. Vai ser EC dois. Em seguida, vou selecionar o invólucro de espuma. Vamos definir sua posição como absoluta. Então, precisamos da posição relativa para o elemento pai , que é um contêiner. Vamos definir a posição superior em 50%. Em seguida, precisamos que a posição esquerda seja 50%. E precisamos centralizar o elemento usando transform translate com os valores -50% e novamente -50% Agora, o conteúdo é colocado no centro da página Em seguida, vou definir a largura. Serão 100 Ram. Quanto à altura, vou configurá-la para 65 Ram. Também mude a cor do fundo, ela será branca. Aqui temos o invólucro do formulário, vamos usar livros flexíveis Vou arredondar os contras usando o raio da borda. Digamos que dois Ram. Crie também algum efeito de sombra. Vamos intercalar 0,3 Ram, três Ram e, em seguida, a cor será RGBA, 326-01-1207 com uma Opacidade 0,3 Tudo bem, agora o invólucro três Ram e, em seguida, a cor será RGBA, 326-01-1207 com uma Opacidade 0,3 Tudo bem, agora o invólucro do formulário parece muito melhor. Vamos continuar e selecionar o invólucro do formulário à esquerda. E também precisamos aqui de um invólucro, certo, porque esses elementos terão alguns estilos semelhantes Vamos definir com dois 50%, a altura será 100%. Em seguida, precisamos de livros flexíveis Temos que mudar a direção, será a coluna em que vou colocar o conteúdo de justificação centro e os itens do Elon no centro também Além disso, vamos alinhar o texto no centro. Ok, os formulários são colocados no centro das embalagens. Em seguida, vou selecionar os elementos do título H. Vamos aumentar o tamanho do telefone. Serão seis. Então precisamos do Col 47f, é uma cor azul Vamos definir a margem para menos cinco Ram. Zero, depois seis Ram e zero. Os títulos parecem muito bons. Em seguida, vou selecionar o grupo de entrada. Conjunto de entrada com 225 Ram. Então, a altura será de cinco Ram. Vamos definir a margem para um Ram, zero. Em seguida, vou me livrar da borda e, em seguida, definir a borda na parte inferior. Vai ser 0,2 Ram sólido com uma cor RGBA, 641-23-2505 e a opacidade 0,5 Ok. Depois disso, vou Vamos mudar o tamanho da fonte. Vai ser 1,4 Ram. Além disso, precisamos de acolchoamento no lado direito. Vamos definir 22 Ram. Em seguida, vou mudar a cor do plano de fundo. Vai ser transparente, os campos de entrada terão uma aparência melhor. Em seguida, vou selecionar a entrada com o atributo de espaço reservado Vamos mudar a cor. Vai ser azul e também cria algum espaço entre as letras. E altere o tamanho da fonte, 3.021,2 Ram. Além disso, precisamos que o peso da fonte seja 500. Finalmente, vamos transformar o texto. Para maiúsculas. Tudo bem, em seguida, vou selecionar a entrada do grupo de entrada com foco na classe em foco, vou mudar a cor da borda. Vamos configurá-lo para azul. Depois de focarmos os campos de entrada , a borda na parte inferior mudará de cor. Tudo bem, depois disso, eu retiro o elemento do grupo de entrada. Estou no telefone dos ícones, posição absoluta. Então, precisamos da posição relativa. Para o elemento pai, que é o grupo de entrada, vamos definir a posição superior. Vai ser 50%, então precisamos da posição correta. Vou configurá-lo para 2,5 Ram. E também precisamos transformar translate Y com -50% para centralizar o elemento Em seguida, vou alterar o tamanho do telefone. Serão 1,3 Rams. Vamos mudar a cor, vamos configurá-la para azul. Aqui temos as caixas automáticas do telefone bem posicionadas. Em seguida, vamos selecionar o botão, definir a largura para 20 Ram. Então, a altura será de 4,5 Ram. Vou definir a margem na parte superior para dois Ram. Em seguida, precisamos que a fronteira seja nenhuma. Vou usar o raio da borda para fazer o botão arredondado, 3025 Mude a cor do plano de fundo. Cor azul, os botões estão lindos. A próxima cor será branca. Defina a transformação do texto para alteração em maiúsculas. O tamanho da fonte será 1,4 Ram. Então, precisamos que o peso da fonte esteja negrito e também use algum espaço entre as letras. Em seguida, vou criar um efeito de sombra. Digamos que box shadow, 20,5 Ram, uma Ram. E o RTP é uma cor, quero dizer, essa cor azul com opacidade de 0,4, os botões parecem Vou colocar o cursor no ponteiro. Tudo bem. Depois disso, vou criar, clique no fato usando transform translate Y. Vamos configurá-lo como 2.2 Ram Depois de clicarmos no botão, teremos aqui o efeito de clique. Ok, vamos prosseguir e selecionar o elemento de link. Vou definir a posição como absoluta, a posição inferior definida, será. Quanto ao tamanho do telefone, vou configurá-lo para 1,6 Ram. Vamos transformar texto em maiúsculas. Além disso, defina a posição do telefone em negrito. Em seguida, precisamos do tamanho da fonte. Vai ser 1,6 Ram. Mude a cor, vou usar a cor azul. Em seguida, vamos selecionar o link de inscrição. Vou definir a posição direita para quatro m. Quanto ao seno na ligação, precisamos da posição esquerda quatro Ok, na verdade, os formulários em que me inscrevo e os formulários de inscrição estão preenchidos. Eles parecem muito bonitos. Em seguida, vou selecionar o invólucro do formulário à esquerda e ocultá-lo usando opacidade zero e O formulário de inscrição é hedum. Agora vou colocar aqui o fundo do invólucro. Vamos selecionar esse elemento. Vamos definir essa posição. A largura absoluta da mina será de 100 m. A altura também será de 100 m. Em seguida, precisamos da cor de fundo, que será azul. Além disso, vou usar o raio de borda de 15 m. Temos aqui o fundo azul Vamos seguir em frente e definir a posição esquerda para -40%. Quanto à posição superior , será 90%. Em seguida, precisamos mudar a origem da transformação para a parte inferior direita Para girar o elemento de acordo com a direção Z, o valor será de -40 graus Na verdade, precisamos posicionar em -90%. Ok, agora temos que esconder a parte do fundo usando o overflow Temos aqui um bom plano de fundo. Em seguida, vou inserir sua imagem, que será uma ilustração. Selecione a imagem um. Vamos aderir ao nome da classe, será a imagem à esquerda e nos livraremos do atributo all. Vamos selecionar a imagem. Vamos nos contentar com 235 fram, então a posição será absoluta No momento, a imagem não está visível. Vamos definir um índice para 100. Aqui temos a imagem. Vou selecionar a imagem à esquerda, a posição superior será 25%, então precisamos que a posição esquerda seja 8%. Tudo bem, então a imagem está bem posicionada Agora temos que cuidar do Javascript. Vamos criar uma variável, ela será um contêiner. Vou selecionar esse elemento método seletor de consulta Precisamos especificar aqui o contêiner do nome da classe. Vamos duplicá-lo duas vezes. A segunda variável será o link sine-up. Vamos inserir o nome da classe. Também precisamos aqui, seno no link, alterar o nome da classe Agora precisamos do link de inscrição com o ouvinte do evento. Vamos colocar aqui, clicar em Evento e também na função de retorno Precisamos de um contêiner seguido pela propriedade da lista de classes e precisamos adicionar à navegação da lista de classes. Isso acontecerá ao clicar. Agora temos que usar essa classe para adicionar alguns estilos aos elementos. Quero dizer, o fundo do invólucro do formulário. Vamos transformar a função de rotação Z com o valor de 130 graus. Além disso, precisamos traduzir para mover o elemento. O valor será 15 Ram e , novamente, 15 Ram em ambas as direções, I, x e y. Quando eu clicar, o fundo se moverá. Temos que adicionar aqui a transição para tornar o efeito mais suave Agora, se clicarmos, obteremos o movimento agradável e legal do plano de fundo. Em seguida, temos que cuidar do invólucro do formulário deixado com a classe de navegação novamente No momento, o elemento está oculto e precisamos torná-lo visível. Vamos usar novamente a transição com algum tempo de atraso. Precisamos novamente fazer a transição por padrão, sem demora. Se eu clicar, o formulário de inscrição aparecerá bem. Agora temos que nos familiarizar com a imagem. Vamos usar novamente a classe navigate seguida pela imagem à esquerda. Nome da classe. Vamos definir a opacidade como zero e a visibilidade Precisamos aqui transformar a função translate y. Temos que mover a imagem um pouco e também usar transição com toda a duração de 0,5 segundo. Precisamos de uma transição para o elemento esquerdo da imagem por padrão com um tempo de atraso. Depois de clicar, a imagem ficará bem escondida. O formulário aparecerá. Tudo bem, tudo funciona bem. Em seguida, precisamos cuidar do link de assinatura. Para remover a classe, navegue a partir do contêiner. Agora, se eu clicar em Inscrever-se e depois entrar , o plano de fundo voltará à sua posição padrão. Agora temos que cuidar do rapper do formulário, certo? Precisamos definir a opacidade como zero e, em seguida, a visibilidade oculta para ocultar o formulário de sinal Isso é transição. Em seguida, adicionarei a transição por padrão ao elemento. Com um atraso no tempo , será de 1 segundo. Se eu clicar no link , o formulário de login ficará bem oculto e aparecerá quando clicarmos novamente no link Ok, a única coisa que eu tenho que fazer é usar a segunda imagem para o formulário de login. Aqui temos a segunda imagem. Vamos selecionar a imagem certa, definir sua posição superior para 17% , então a posição correta será 7%. Então, precisamos transformar a tradução de Y com um valor menos cinco da imagem Vou definir a opacidade como zero e a visibilidade Temos que mostrar a imagem. Depois de clicarmos no link que precisamos aqui, classe navega, seguida pela imagem, certo? Nome da classe. Vamos definir a opacidade como uma e a visibilidade como visível Em seguida, precisamos transformar a função Translate Y. O valor será de cinco. Precisamos de uma transição para um efeito suave. Além disso, precisamos de tempo de atraso. Em seguida, temos que adicionar aqui a transição por padrão. Agora, se eu clicar nos links, tudo funcionará bem. Na verdade, precisamos nos livrar do tempo de atraso a partir daqui. Está bem? Tudo funciona bem. E temos aqui um modelo interessante de assinatura e assinatura de formulário. Vamos seguir em frente. 10. Project 5 - cabeçalho de site: Ok, então é hora de criar nosso próximo projeto. Nesta seção, vamos criar um cabeçalho bonito e moderno para o site. Hoje, todo site moderno precisa ter um cabeçalho legal. Portanto, nesta seção, você aprenderá como criar e personalizar o cabeçalho da página de destino. Vamos continuar descrevendo o projeto. O cabeçalho consiste em algumas partes diferentes. No canto superior esquerdo, temos um código de logotipo e criamos. Em seguida, no canto superior direito, temos uma navegação simples. Temos apenas três itens de navegação com efeito de foco. Quanto ao centro da página, aqui temos a parte mais importante. Você pode ver aqui a lâmpada que na verdade é criada com HTML e CSS puros. Não temos aqui nenhuma imagem. A lâmpada tem iluminação, e você também pode ver aqui embaixo a sombra. Além disso, temos aqui alguns elementos textuais diferentes, e você também pode ver aqui um fundo textual, que eu acho muito bonito e legal Ok, então é isso sobre esse projeto, vamos começar a construí-lo. Eu criei uma nova pasta na área de trabalho. Vamos abri-lo no código VS. E então eu vou criar nossos arquivos de trabalho para HTML e CSS. Vamos usar apenas essas duas tecnologias. Vamos abrir o arquivo HTML Idextt e criar o documento HTML básico Eu vou mudar o título. Vamos inserir sua landing page. E então eu vou vincular o arquivo CSS. Vamos abrir o projeto e o navegador e depois colocar o editor no navegador lado a lado, assim. OK. Vou visitar o site do Google Fonts porque usaremos o Google Pont em todo o projeto Então, vamos ao site e depois pesquisar o telefone chamado vendido. Vou selecionar alguns estilos diferentes a partir daqui. Vou procurar outro p, que será PT Sans Narrow Vamos selecionar esses estilos. Em seguida, vou procurar a paixão, pegar esses azulejos. Então eu vou copiar o link daqui, e temos que colá-lo e colá-lo no elemento principal. Tudo bem. Agora podemos começar a escrever a marcação HTML Precisamos de um contêiner no qual eu vou criar um pouso. Vamos inserir aqui n elementos com a classe NoFBar na qual vou inserir um logotipo Será span element, CAC, code and create Em seguida, vou criar a navegação. Vamos inserir aqui os elementos do link. Vai estar em casa. O segundo item serão os tutoriais. Quanto ao terceiro item, vou inserir seus cursos. OK. Depois disso, precisamos de um banner no qual eu vou inserir o desenvolvimento, que será uma lâmpada. Então precisamos de sombra aqui. Essas são as partes da lâmpada. O próximo será uma lâmpada. Então teremos luz. O próximo será Shadow. Tudo bem. Depois disso, precisamos de elementos de cabeçalho H one com o título do banner da classe. O texto será aprendido. Em seguida, precisamos do título do banner. Na verdade, o primeiro foi o título principal. Este é apenas o cabeçalho com o código de texto e a criação. Na verdade, precisamos aqui de dois elementos de cabeçalho H e não do t. Então teremos um parágrafo com o parágrafo do banner da classe. Vamos inserir aqui desenvolvimento web e web design. Então, na verdade, é isso. A marcação HTML está pronta e precisamos começar a escrever o CSS Vamos criar alguns estilos padrão. Precisamos de cada elemento. Vamos definir a margem e o preenchimento como zero. Em seguida, precisamos que o tamanho da caixa seja uma caixa de borda. Além disso, precisamos nos livrar da decoração do texto. Em seguida, vamos definir a família telefônica. Será o telefone chamado PT Sans Narrow Sansif Next, vou mudar o tamanho frontal do elemento H tal porque vamos usar RM como unidade de medida Nesse caso, um M será igual a dez pixels. Depois disso, vamos cuidar do contêiner. Vou definir com 100%, a altura será de 100 potes de altura. Então eu vou mudar o plano de fundo. Vai ser um gradiente linear. A primeira cor será dois C dois, três um. Então o próximo será 2b2c3. Então, aqui temos o plano de fundo. Depois disso, eu vou cuidar da aterrissagem. Vamos definir a largura para 95%. A altura será de 90%. Em seguida, vou mudar a cor do plano de fundo. Vai ser de 2425 a nove. E então precisamos de sombra. Digamos que dois zero, um M quatro RM e a cor RGBA A cor será preta com opacidade de 0,3. Então, aqui temos o cabeçalho. Precisamos colocá-lo no centro. Vamos usar a grade de exibição e, em seguida, colocar os itens no centro. Então, o elemento é colocado no centro da página. Em seguida, vou cuidar da barra norte. Vamos definir com 100%. Então a altura será de 15 ml, precisamos de pudim. Vamos configurá-lo para zero e dez carneiros nos lados esquerdo e direito. Em seguida, vou usar livros de linho. Vamos alinhar os itens no centro e, portanto, precisamos justificar o conteúdo com os valores espaçados Então, aqui temos o logotipo e os itens de navegação. Em seguida, vou cuidar do logotipo. Estou neste painel. Vamos mudar a família de telefones. Vai ser paixão um, letra cursiva. Então eu vou para o tamanho do telefone para oito RAM. Além disso, precisamos que a cor seja branca. Em seguida, vou aumentar o espaço entre as letras. Digamos que seja 2,2 ram. Também precisamos de sombra de texto. Serão 0,51 ram com RTB na cor preta e a opacidade será Então, aqui temos o logotipo. Depois disso, vou selecionar o intervalo seguido pelo elemento after. Vamos definir o conteúdo como vazio. Precisamos da linha no logotipo e definimos a posição como absoluta, e também precisamos da posição relativa para o elemento libra. Vamos definir a largura para 9,5, a altura será 0,5 Além disso, precisamos da cor de fundo, digamos que seja 2444 Em seguida, vou definir a posição para 50%. A posição esquerda será zero e precisamos centralizar usando a transformação Traduza Y -50%. OK. Vamos falar sobre o logotipo. Vamos cuidar dos itens de navegação. Vamos selecionar a navegação seguida pelo elemento de link. Vou definir o tamanho do telefone para duas RAM, então precisamos de margem no lado direito. Vamos configurá-lo para cinco M. Além disso, precisamos de cor. Vou fazer com que sejam cinco, dois, cinco, quatro, cinco, aqui temos os itens de navegação. Em seguida, vou aumentar o espaço entre as letras. Em seguida, precisamos do elemento de link com seletor de gráfico. Vou selecionar o primeiro elemento de link. Vamos definir a cor como d d d. Então, o primeiro item, por padrão, tem uma cor diferente. Depois disso, vou criar um efeito de foco. Vou mudar a cor ao passar o mouse, digamos 2444 e depois usar a transição para obter um efeito mais suave Na verdade, precisamos mudar a cor, precisamos aqui d d d. Tudo bem, então, isso é tudo sobre a navegação. Agora temos que cuidar do centro da página. Estou na lâmpada. Vamos definir a posição como absoluta. Em seguida, precisamos da posição relativa para o elemento pai. Vamos definir a posição superior como zero, então a posição esquerda será 50%, e precisamos centralizar o elemento usando transform, translate x -50% Em seguida, precisamos que a largura seja 20 M. Vou definir a altura como 30. E use aqui a cor de fundo temporária. Então aqui temos a lâmpada. No momento, não parece nenhuma lâmpada, mas vamos consertar isso. Vamos selecionar o fio. Vou definir a largura de 2,4 m. Então precisamos de altura, serão dez ram. Em seguida, precisamos que a cor de fundo seja 1224. Em seguida, vou definir a posição como absoluta. Então, precisamos que a primeira posição seja zero. A posição esquerda será de 50%, e também precisamos centralizar o elemento usando transform, translate x -50% Depois disso, vou usar algum efeito de sombra. Vamos configurá-lo para 0,51 ram e a cor RGBA com menor Na verdade, o fio não está visível porque esse elemento está faltando. Na verdade, precisamos colocar esses elementos dentro da lâmpada e também precisamos adicionar aqui o fio. OK. Então aqui temos o fio. Parece muito bom. Em seguida, vou cuidar da sombra. Vamos seguir em frente e selecionar esse elemento. Vou definir a largura para 100%. A altura será dez. Então, precisamos da cor de fundo. Vai ficar preto por um tempo. Vamos definir a posição como absoluta. Em seguida, precisamos que a posição seja de dez carneiros. Então aqui temos a sombra. Vamos definir o raio da borda para 50%, 50%, depois zero e zero Como você pode ver, agora a sombra tem uma forma melhor. Vamos definir o plano de fundo como gradiente linear. Vou usar aqui como a primeira cor para d16. Então, o próximo será de 2425 a nove. Aqui temos a tonalidade que parece muito melhor. Vamos usar um pouco de efeito de sombra. Vou configurá-lo para 0,5 ram RM e a cor será preta RGPA com menor Agora, a sombra está bem bonita. Em seguida, vou selecionar a sombra com o elemento posterior. Vamos definir o conteúdo como vazio , então precisamos que a largura seja 100%. A altura será de dois carneiros. Então eu vou definir a posição como absoluta. Além disso, vamos definir a posição inferior. Vai ser menos um carneiro. Em seguida, precisamos da posição esquerda, será zero. Também precisamos do raio da fronteira. Vai ser 50%. Quanto à cor de fundo, vou defini-la para dois D, três, dois, três sete. Tudo bem, como você pode ver. Agora, o elemento parece 100% da tonalidade. Em seguida, vou cuidar da lâmpada. Digamos que seja com dois ou três carneiros. Então, a altura será de 2,5 ram. Além disso, precisamos aqui da cor de fundo, que será branca. Então eu vou definir a posição como absoluta. A posição inferior será de 8,5 ram Quanto à posição esquerda, será de 50%, e precisamos centralizar o elemento usando transform, translate x -50% Então aqui temos a lâmpada. Precisamos torná-lo arredondado. Vamos fazer isso usando o raio da borda com valores zero, zero, 50% e 50%. OK. Então aqui temos a lâmpada. Em seguida, vou adicionar aqui, sombra de caixa com os valores 0,5 R dois ram e depois a cor RGBA, 2505, 2505, três vezes É uma cor branca e o oposto 2.3. OK. Então, temos aqui um bom efeito. Vamos falar sobre o bulbo. Vamos seguir em frente e cuidar da luz. Digamos que a largura seja de 100%. Então, a altura será de 50 RM. Em seguida, vou mudar o plano de fundo. Vamos usar novamente o gradiente linear. A primeira cor será RGBA, 2505, 2505, 55 e a Em seguida, vou usar cores transparentes e, como terceira, vamos usar novamente a cor transparente. Tudo bem. Agora precisamos mudar a posição do elemento. Vamos configurá-lo como absoluto. Então as duas posições serão 19 M. Então precisamos da posição esquerda, serão 50%. Novamente, precisamos centralizar o elemento usando transform, translate x -50% Agora, o elemento está bem posicionado. Em seguida, precisamos do raio da borda com os valores 30%, 30%, zero e zero Em seguida, precisamos usar filtro com função de desfoque, e o valor será um RM Então aqui temos a luz. Vamos diminuir a opacidade, torná-la 0,3. Agora temos aqui esse efeito de luz agradável e legal. Depois disso, vou selecionar sombra, vamos definir a largura para 40 ram, então a altura será de oito ram, seguida, precisamos de fundo. Vamos usar novamente o gradiente linear. Precisamos que a direção aqui seja para a direita, então a primeira cor será transparente. Então teremos a cor preta e, novamente, transparente. Então, aqui temos a sombra. Precisamos posicioná-lo. Vamos definir a posição como absoluta. Então, a posição inferior será de -45 ram. Quanto à posição esquerda, vou configurá-la para 50%. Novamente, precisamos centralizar o elemento usando transform, translate X -50% Tudo bem. Depois disso, vou girar o elemento de acordo com o eixo x. O valor será de -70 graus. Então, como você pode ver, o elemento é girado. Agora, vou usar o raio da borda com um valor de 50%, e também precisamos de filtro com função de desfoque e o valor será dois Tudo bem, então, como você pode ver, temos aqui um efeito de sombra legal. Novamente, vamos diminuir a opacidade, torná-la 0,3. Ok, é isso mesmo. A lâmpada com sua sombra está pronta. Parece legal. Agora temos que pegar o título principal. Vamos definir a posição como absoluta. Então, quando você assumiu a posição de 25%, a posição esquerda será de 26% Vamos mudar a família telefônica. Vou usar Oswald, San Serif. O tamanho do telefone será de 20 RM. Então, aqui temos o título principal. Em seguida, vou colocar o texto em maiúsculas. Então precisamos de cor. Vamos usar aqui 4142, sete. Então, a cor é alterada. Em seguida, precisamos de espaçamento entre letras. Serão dez RM. Depois disso, vou diminuir a opacidade. Vamos fazer com que seja 0,5. Então eu vou mudar o plano de fundo. Vamos usar o gradiente linear. A primeira cor será 41427. Então, precisamos de transparência com 70%. Em seguida, vou usar uma propriedade chamada webkit: o clipe de fundo será texto E então vou usar o webkit, cor do campo de texto, que será transparente Então, como você pode ver, temos aqui fatos muito legais e interessantes. Em seguida, vou cuidar do título do banner. Vamos definir essa posição como absoluta. A posição inferior será 35, então precisamos da posição correta. Vou configurá-lo para 23%. Vamos fazer com que a família se apaixone, Cursive. Além disso, vou aumentar o tamanho do telefone. Serão oito RM. Então, aqui temos o título. Vamos transformar o texto em maiúsculas e depois mudar a cor. Vai ser BBB. Então, precisamos de espaçamento entre letras. Serão dois carneiros. Use também algum efeito de sombra. Digamos que a sombra do texto seja de 0,5 ram por RAM e a cor preta RGBA com opacidade de 0,3, na verdade 0,4 O título parece muito bom. Em seguida, vou pegar aqui. Do parágrafo. Vamos mudar o nome da classe e fazer algumas mudanças aqui. A posição dos potes será de 30 RM, então a posição correta será de 24% Vou mudar a família telefônica. Vamos usar aqui Oswald Sarif Então precisamos mudar o tamanho do telefone, vai ser o R. Além disso, mude aqui o peso do telefone Vou configurá-lo para 300. Em seguida, livre-se da propriedade de transformação fiscal altere também a cor. Serão seis C, seis D sete. E depois elimine a sombra fiscal, diminua também o espaçamento, façamos que seja 0,1 RM. Tudo bem. Então é isso. O cabeçalho do site parece muito bom. Espero que tenham gostado desse projeto. Vamos seguir em frente. 11. Project 6 - Blog Card: Tudo bem, é hora de seguir em frente e começar a criar nosso próximo projeto. Nesta seção, vamos criar um cartão de bloco moderno e bonito. Vamos continuar descrevendo o projeto. Como você pode ver, o cartão consiste em alguns elementos diferentes. Temos aqui uma imagem no lado esquerdo do cartão, depois alguns elementos textuais E também temos aqui o botão que nos diz que leia mais. Se eu clicar no botão, o cartão se expandirá. E vamos receber aqui outros três cartões diferentes sobre alguns passeios. Se eu passar o mouse sobre as cartas , obteremos esse efeito agradável e legal Como você pode ver, o conteúdo do botão foi alterado. Agora nos diz que leia menos. Se eu clicar no botão, o cartão será minimizado. Tudo bem, então vamos falar sobre esse projeto. Vamos começar. Eu criei uma nova pasta na área de trabalho. Vamos abri-lo no código VS e, em seguida, criar nossos arquivos de trabalho. Precisamos de três arquivos diferentes, para HTML, CSS e Java script. Em seguida, vou abrir um arquivo HTML indexado e temos que criar um documento HTML básico Vamos mudar o título. Vai ser um carro de bloco. Em seguida, vou vincular o CSS e os arquivos de script. Vamos abrir a tag do script e especificar aqui o nome do arquivo jars Ok, vamos abrir o projeto no navegador usando o servidor ativo. E então eu vou colocar o editor e o navegador lado a lado. Então, em seguida, vou pegar o link CDN para telefone, então ícones, porque vamos usar esses ícones em todo o projeto Vamos copiar o link, abrir tag do link no elemento principal e colar o CDN aqui Em seguida, vou visitar o site do Google Phones. Para pegar alguns telefones do Google Phones, vamos procurar um telefone chamado Roboto Condensed Vou selecionar alguns estilos diferentes e, em seguida, vou procurar outro telefone, que será End. Vamos selecionar novamente estilos diferentes, depois vou copiar o link daqui e colá-lo apenas na cabeça. Tudo bem, estamos prontos para começar a escrever a marcação HTML Precisamos criar uma tag aberta de contêiner que será bloqueada. Precisamos de uma imagem de bloco na qual vou abrir a tag de imagem. Vamos selecionar a imagem na pasta de imagens. Vai ser a primeira imagem. Depois da imagem, precisamos criar o conteúdo do cartão de bloqueio. Esse elemento incluirá H três elementos de cabeçalho. Será a data 27 de janeiro de 2023. Em seguida, precisamos de H um elemento de cabeçalho. Será uma nova exploração. Também precisamos de um parágrafo com algum texto fictício. Em seguida, vou criar um botão com o cartão de nome da classe BTN. O tipo será botão. Também vou colocar aqui ler e depois ampliar mais o elemento. Em seguida, vou criar em que temos blocos, teremos três itens diferentes. Como sua imagem, vou selecionar a imagem do. Pasta de imagens. Vai ser para um. Em seguida, precisamos do elemento span com o texto explorado em um. E também precisamos de fônico. Vai ser FA, Solid Magnifying Co, localização Vou duplicar esse item duas vezes porque teremos três itens diferentes Vamos seguir em frente e fazer algumas mudanças. Precisamos rasgar dois. Precisamos aqui mudar os nomes das imagens. Ok, na verdade é isso. A marcação HTML é criada. E agora temos que pegar aqui o CSS. Em primeiro lugar, vou selecionar cada elemento usando um asterisco Vamos definir a margem e reduzir as duas para zero. Então, precisamos que o tamanho da caixa seja uma caixa de borda. Além disso, vou diminuir o tamanho do telefone do elemento H Timal porque vamos usar M como uma unidade de medida Nesse caso, um m será igual a dez pixels. Vamos selecionar o contêiner. Vou definir a largura como 100% , em seguida, a altura será de 100 pés de vista. Vamos mudar o plano de fundo. Vou usar a função de gradiente linear. A direção será 145 graus, depois a cor será 6193 Então precisamos aqui de 0% A segunda cor será 814 Precisamos aqui do valor percentual, 75. Ok, então temos aqui um fundo bonito e legal. Vamos usar a caixa flexível. Para centralizar o conteúdo, precisamos justificar o centro de conteúdo e um centro de itens de linha, o conteúdo está centralizado Na verdade, vou diminuir o tamanho das imagens que definem a largura para 25 quadros. Então, a altura será de 35 quadros. Em seguida, vou selecionar a própria imagem que define a largura como 100% e a altura será 100%. Além disso, precisamos de uma cobertura de alimentação de objetos. Agora temos melhores resultados. Vamos selecionar Block Tours e usar o Flex Books. As imagens são colocadas horizontalmente, lado a lado. Vamos selecionar Bloquear imagem do cartão. Vou definir para 30 Ram, então a altura também será 32 Ram. Em seguida, precisamos selecionar a imagem do cartão em si. Quero dizer, o elemento imagem. Vamos definir com 100% e a altura será de 100%. Além disso, precisamos novamente de uma cobertura para os pés do objeto. Em seguida, vou selecionar o cartão de bloqueio e definir sua largura para 55%. Em seguida, a altura será 80%. Vamos mudar a cor do fundo Vou usar RGB, 40, 40, 40. Em seguida, vou usar o raio da borda para fazer com que os cantos o arredondem 3.022,5 RAM. Temos aqui o cartão com fundo escuro. Depois disso, vou usar um pouco de preenchimento. 3.022,5 Rams criam algum efeito de sombra. Vamos definir sombra, 201,4 RAM, oito RAM, e a cor será RGB, 40, 40, 40 Quanto à opacidade, vou dizer 2.8 e também precisamos aqui de oito RGB Ok, agora temos um resultado muito melhor. Agora vou usar o fundo com essa função de gradação linear para a imagem Além disso, vou torná-lo arredondado usando o raio da borda. Em seguida, vamos definir a posição como absoluta. Além disso, precisamos de uma posição relativa para o elemento pai. Vamos definir a posição para 15%, então a posição esquerda será menos dez Ram Precisamos transformar a tradução Y -50%. Além disso, vou definir a escala da imagem 2.6 Temos aqui a imagem a seguir. Vamos analisar o raio da borda da imagem em si. E também precisamos diminuir a opacidade. Vamos fazer com que seja 0,5. Agora a imagem parece muito boa. Vamos continuar e cuidar dos passeios pelos quarteirões. Vou definir o peso em 100% seguida, vou usar o conteúdo do Justify com espaço de valor uniforme Precisamos de espaço uniforme entre os itens. Aqui temos os itens bem colocados. Então eu vou definir a posição absoluta. A posição inferior será de seis Ram. Para a posição, vou defini-la como zero. Os passeios são colocados abaixo. Vamos selecionar Bloquear conteúdo do cartão. Vou definir sua posição como absoluta. Então, vou definir as duas posições para 1%. A posição será 15%. Então, precisamos transformar com uma função de escala. Vou definir o valor para 0,8 Em seguida, vou cuidar dos cabeçalhos. Quero dizer, o primeiro título, H três. Vamos configurar a família telefônica para Roboto condensed san Serif. Então, o tamanho do telefone será de dois Ram. Também precisamos de cor , será 999 Em seguida, vou definir algum espaço na parte inferior, aqui temos o primeiro título. Em seguida, vou duplicar esse código e alterar aqui a família de telefones pois precisamos alterar o tamanho do telefone, que será de 3,5 Ram Então, precisamos que o peso do telefone seja 300 e também mude a cor, ele será branco. Vamos falar sobre os elementos do segundo título. Em seguida, vou pegar o ano do parágrafo. Vamos copiar esse código, mudar o seletor. Será que vou definir o tamanho do telefone para 1,6 Ram e também mudar a cor. Vai ser 777. Em seguida, precisamos que a largura seja de 35 Ram. Altere também a margem na parte inferior, faça com que seja de três Ram. Isso é sobre o parágrafo. Em seguida, vou tirar o paton. Vamos começar com 216 Ram. Então, a altura será de quatro Ram. Na verdade, precisamos pegar esse fundo com a função de gradiente linear Precisamos da mesma cor de fundo aqui. Em seguida, vou definir a fronteira como não. Também mude a cor, torne-a branca. Então eu vou mudar a família do telefone. Vai ser, pode sansorif? O botão parece muito bom. Eu defini o tamanho do telefone para 1,4 Ram. Também transforme texto em maiúsculas. Então eu vou criar algum espaço entre as letras, torná-lo 0,1 Ram. Além disso, vou arredondar o botão usando raio da borda com o valor dois Ram Ok, o botão parece muito bom. Vou usar algum efeito de sombra. Vamos definir a sombra da caixa para 10 mm1. E a cor RGBA, quero dizer, a cor preta com opacidade 0.1 Além disso, vou mudar o cursor, fazê-lo O botão parece muito bom. Agora vou cuidar do item Block Tours. Quero dizer, os carros lá embaixo. Vamos definir o raio da borda para um Ram. Então eu vou usar algum efeito de sombra. Vamos definir a sombra do bloco para 01 Ram, cinco Ram. E novamente, RGB, uma cor preta com opacidade 0.3 Em seguida, vou colocar o cursor no ponteiro Em seguida, vou cuidar das imagens. Vamos recuar com a função de gradiente linear. A direção será 135 graus e a cor será 6193 Então, o próximo será de 1356 a sete, o raio da fronteira será de um Ram Precisamos do mesmo raio de borda para a imagem em si. Além disso, vou diminuir a opacidade. Vamos fazer com que seja 0,5 Agora as imagens parecem bem legais. Depois disso, vou cuidar dos elementos de extensão no item. Vamos definir a posição como absoluta. Precisamos de uma posição relativa para o elemento pai. Então, a posição superior será 50%, a posição esquerda será de -35% Precisamos centralizar o elemento usando transform translate Y -50%. Então, vou mudar a família do telefone Vamos usar Candi. Aqui temos os elementos do painel, vamos aumentar o tamanho do telefone Vai ser 1,8 Ram. Altere o peso do telefone, vamos configurá-lo para 500. Além disso, precisamos transformar o texto em maiúsculas. Em seguida, vou criar algum espaço entre as letras e mudar a cor. Faça com que seja branco. Na verdade, algo está errado aqui. Sentimos falta do meu. Agora está tudo bem. Temos que girar o texto na direção Z com o valor de -90 graus Agora tudo parece muito bom. Tudo bem, vamos copiar esse seletor e usar seu elemento. Vamos definir com 26 Ram, então a altura também será de seis Ram. Vou mudar a cor do plano de fundo. Vai ser 1683. Eu preciso aqui do sinal do tacômetro. Em seguida, precisamos cuidar da posição. Precisamos colocar o ícone no centro. Portanto, precisamos nos posicionar em 50% na posição esquerda 50% e transformar tradução com os valores -50% e novamente -50%. Os ícones são colocados no centro do item Vou arredondar os elementos usando o raio da borda 50%. Depois, precisamos colocar o ícone no centro usando o Flexbox Quando você justifica os itens do centro de conteúdo e de uma linha. Além disso, vamos aumentar o tamanho do telefone, torná-lo 2,5 Ram. Mude a cor It. Nós. Tudo bem, aqui temos os ícones. Vamos usar um efeito de sombra com valores de 01 Ram, três Ram, e a cor será preta com opacidade 0.1 Tudo bem, agora vou criar o efeito de foco ao passar o mouse Vamos diminuir a opacidade. Vamos definir a opacidade como zero e a visibilidade oculta. Depois de passarmos o mouse sobre os itens, o ícone deverá ser exibido Vamos passar o mouse sobre os efeitos seguidos pela imagem para cima. Na verdade, precisamos pegar esse seletor daqui e colá-lo Acima da imagem. Sobre como vamos mudar a opacidade? Vai ser 0,05. Além disso, precisamos de uma transição aqui. Vamos pegar esse seletor. Agora cuide do ícone de pontos. Vamos mudar a opacidade, torná-la uma. E também precisamos de visibilidade visível. Em seguida, faça a transição de 0,3 segundos e também precisamos de um ponto de tempo de atraso de 1 segundo. Agora, como você pode ver, temos aqui um efeito de foco muito legal e agradável Tudo bem, depois disso, precisamos que a capacidade seja zero e a visibilidade oculta. Precisamos esconder os itens. Como precisamos mudar, o tamanho do cartão será de 45%. Quanto à altura , será 40%. Em seguida, precisamos nos livrar da função de escala a partir daqui e também alterar a posição da imagem. Será 50% da primeira posição. Quanto à posição esquerda , será menos cinco Ram A imagem está bem posicionada. Em seguida, temos que cuidar da alteração do conteúdo. A primeira posição será 15%. Quanto à posição esquerda, vou chegar a 40%. Precisamos nos livrar da balança, está tudo bem. Vamos cuidar do Batson. Precisamos da sua posição de parente. E então o índice 100, porque o botão foi desativado, agora está ativado novamente. Ok, acho que está tudo pronto. E agora podemos começar a escrever Javascript. Vamos criar o botão variável e selecionar esse elemento usando o método seletor de consulta Precisamos especificar aqui o nome da classe da parte inferior. Em seguida, precisamos selecionar o carro do bloco. Vamos especificar aqui o nome da classe. Agora precisamos adicionar o ouvinte de eventos ao botão com um evento de clique Além disso, precisamos aqui da função de retorno de chamada. Depois de clicar no botão, precisamos adicionar uma nova classe ao cartão de bloco. Precisamos aqui da propriedade alugada da classe e, em seguida, do método togl, a nova classe será alterada Tudo bem, agora temos que selecionar o cartão de bloco com mudança de classe. Temos que adicionar aqui novos estilos. Precisamos alterar a largura, será de 55%. Também precisamos alterar a altura, que será de 80%. Vamos usar a transição para obter um efeito mais suave Depois de coletarmos o botão, o cartão se expandirá bem. Em seguida, vou cuidar da imagem. Use novamente a mudança de Cl. Precisamos mover o elemento usando a função transform translate y com o valor -50%. E também precisamos escalar para 0,6 Em seguida, temos que mudar a posição para 15% As duas posições, quanto à posição esquerda, serão menos dez Além disso, precisamos de uma transição aqui. Assim que clicarmos, a imagem subirá e o tamanho será alterado. Em seguida, temos que cuidar do conteúdo. Vamos mudar a posição superior. Vai ser 1% para a posição esquerda. Vou configurá-lo para 15%. Em seguida, usar transformar com a função de escala, será 0,8. Além disso, precisamos de uma transição para um efeito mais suave, o conteúdo está pronto Em seguida, vou cuidar dos itens do tor. Vamos selecionar o item Block Tours e torná-lo visível usando a opacidade 1 e a visibilidade Em seguida, precisamos da transição. Depois de clicarmos, os itens aparecerão. Mas, como você pode ver, precisamos aqui de algum tempo de atraso. Vou adicionar o tempo de atraso a cada item da excursão separadamente. Vamos selecionar o primeiro e definir a transição para todos os 0,3 segundos e o tempo de atraso 0,3 segundos. Vamos duplicar esse código para o segundo item. O tempo de atraso será de 0,5 segundos. Quanto ao último item , serão 0,7 segundos. Agora, como você pode ver, não temos aqui um efeito muito legal. A única coisa que precisamos fazer é alterar o conteúdo do botão. Precisamos usar um operador ternário. Sua condição é verdadeira. Em seguida, precisamos selecionar os elementos de extensão e alterar o conteúdo do texto. Vai ser menos. Caso contrário, é mais. Precisamos da declaração com mais valor. Agora, se eu clicar, o conteúdo mudará. Agora tudo funciona bem com este projeto. Nós terminamos. Espero que tenham gostado. Foi interessante e útil. Vamos seguir em Answer para criar o próximo. 12. Project 7 - Menu de navegação com voltas: Tudo bem, então é hora de seguir em frente e criar nosso próximo projeto. Nesta seção, vamos criar um menu de navegação com HTML, CSS e Javascript. Como você pode ver, temos aqui um botão no centro da página. Se eu clicar nesse botão , alguns itens de navegação diferentes serão exibidos com um efeito agradável e interessante. Como você pode ver, o conteúdo do botão foi alterado. Agora diz perto. Se eu clicar no botão novamente, os itens de navegação serão ocultados. Acho que o projeto vai ser interessante e útil. Vamos continuar e começar. Eu criei uma nova pasta na área de trabalho, que agora está vazia. Vamos abrir essa pasta no código VS. Em seguida, nossos arquivos de trabalho, o primeiro será o índice HTML. Em seguida, teremos o estilo CSS. Além disso, precisamos de um arquivo para Javcript, que serão scripts Vamos abrir o arquivo HTML de índice e criar o documento HTML básico. Eu vou mudar o título. Vamos inserir seu menu CSS. Em seguida, vou vincular arquivos CSS e Charles Grit à tag de script e temos que especificar aqui o nome do arquivo Chiles. Ok, vamos abrir o projeto no navegador usando o servidor ativo. E então eu vou colocar o editor no navegador lado a lado. Ok, agora vou pegar uma fonte do Google. Vamos visitar o site do Google Fonts e depois pesquisar uma fonte chamada Mukta Vou pegar estilos diferentes a partir daqui. Vamos copiar o link e depois colá-lo no elemento principal. Tudo bem, estamos prontos para começar a escrever a marcação HDml Precisamos aqui de um contêiner no qual vou inserir o menu. Precisamos do botão here com um botão de tipo e, em seguida, precisamos da classe here. Vai ser o menu BTM. Além disso, precisamos de dois lugares aqui, Span , element, menu e também em outro span. Para finalizar, temos aqui o fundo. Em seguida, precisamos dos itens de navegação. Vou abrir o elemento com uma navegação de classe. Vamos inserir aqui os elementos do link. O primeiro vai estar em casa, depois vou duplicá-lo algumas vezes O segundo será sobre. Então teremos projetos. O próximo será o bloco e o último será a galeria. Ok, então acho que está tudo pronto e agora podemos começar a escrever o CSS. Vamos selecionar cada elemento, definir a margem e colocar os dois em zero. Em seguida, precisamos que a decoração de texto não seja nenhuma. Precisamos que o tamanho da caixa seja uma caixa de borda. Vou configurar a família de telefones para cada elemento como muta Tudo bem, em seguida, vou definir o tamanho do telefone do elemento HTML para 62,5% para tornar um m igual a dez pixels Porque vamos usar m como uma unidade de medida da largura do contêiner em 100%. Além disso, precisamos de altura, que será 100 visualizações da altura do vaso. Em seguida, vou mudar a cor do plano de fundo. Vamos usar F 1f1f1. Em seguida, precisamos do menu. Vou definir a largura para 70 Ram. A altura também será de 70 m. Vou definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que é um contêiner. Para centralizar o elemento, precisamos que a posição superior seja 50% dessa posição 50% . E precisamos transformar a largura de tradução -50% e novamente -50%. Agora, o menu está Em seguida, precisamos do elemento de extensão do botão de menu. Quero dizer, o segundo, precisamos escondê-lo por um tempo. Em seguida, vamos selecionar o menu PTN. A largura será de 15 Ram. Então, a altura também será de 15 Ram. Em seguida, a cor de fundo será verde, quero dizer 238. Vamos definir a posição absoluta. E então precisamos posicionar para 50%, essa posição será 50%. Novamente, precisamos centralizar o elemento usando transform translate. -50% novamente -50% Além disso, vou me livrar da fronteira. Então, como você pode ver, o botão está centralizado, vamos arredondá-lo usando o raio da borda Em seguida, vou definir o tamanho do telefone para 2,5 fram. Mudar a lagoa vai ser ousado. Além disso, precisamos transformar o texto em maiúsculas e, em seguida, alterar a cor para branco. Vou usar uma caixa flexível. Vamos usar o centro de conteúdo do Justify e um centro de itens de linha. Além disso, vou usar um pequeno efeito de sombra. Vamos configurá-lo para 0,5 Ram. Então precisamos de dois Ram. A cor será 351-90-2140, e a opacidade, 0,4. Além disso, precisamos de uma calça pontiaguda. Tudo bem, depois disso, precisamos selecionar os elementos do link. Vamos definir a posição como absoluta. Então, a largura será 12. A altura também será 12. Em seguida, precisamos da cor de fundo para controlar, que usamos. A cor vai ser branca. Vamos arredondar os itens, depois definir o tamanho do telefone para 1,8 Ram e usar o Flex Box Precisamos centralizar o conteúdo usando justify content center e line items center Tudo bem, em seguida eu vou usar o Shadow. Vou pegar esse valor aqui e colá-lo no elemento link. Tudo bem, depois disso, vou selecionar os primeiros elementos do link usando o seletor infantil Vamos definir a primeira posição para 15%, então a posição esquerda será 75%. Além disso, precisamos transformar translate -50% novamente -50%. Vamos copiar esse código algumas vezes, alterar os números das seleções No geral, temos cinco itens diferentes. A posição do segundo item será 20% e 20% Em seguida, teremos aqui 60% Para a posição esquerda será 20% Então o quarto item, teremos 85,65% Quanto ao último item, temos aqui 45% e 85% Como você pode ver, 45% e 85% Como você pode ver, os itens estão bem alinhados Agora temos que escrever um pouco de Javascript. Vamos criar o menu variável BTN. Vou selecionar esse elemento usando o método seletor de consultas Vamos especificar aqui o nome da classe, menu BTN. Então eu vou criar outra variável, que vai ser menu. Precisamos adicionar um ouvinte de eventos ao menu BTN Com um evento de clique, temos que criar o evento de clique . Esse é o lugar aqui. Função traseira. Depois de clicar no menu BTN, precisamos adicionar uma nova classe ao menu usando o método togal Essa classe será alterada e temos que usar essa classe no arquivo CSS que copiará e temos que usar essa classe no arquivo CSS que copiará o seletor que precisamos aqui No primeiro elemento de extensão, precisamos usar display none para o primeiro item e temos que passar aqui a alteração de fechamento. Quanto ao segundo item, temos que exibi-lo, precisamos de display flex Depois de clicarmos no menu , o conteúdo mudará do menu para o fechamento. Em seguida, precisamos aqui posicionar para ser 50% e a posição esquerda para ser 50% também. Precisamos censurar os elementos. Eles acabarão atrás do botão do menu. Em seguida, nós os exibiremos usando alterar o nome da classe. Temos que adicionar alterações a todos os cinco itens. Na verdade, os itens não estão muito bem colocados porque temos que nos livrar desse texto a partir daqui. Tudo bem, agora precisamos exibir a parte inferior do menu usando a propriedade index. 30 a 100, temos aqui a parte inferior, como você pode ver, quando clicamos no botão de menu , os itens de navegação são colocados em suas posições. Agora precisamos usar a transição para tornar o efeito mais suave. Precisamos de tudo aqui. Então, a duração será de 0,2 segundo. Além disso, vou usar a função Si cúbica para tornar o efeito mais agradável Depois de clicarmos no ícone do menu , os itens serão exibidos bem Na verdade, vou adicionar diferentes tempos de atraso para os itens para tornar o efeito mais frio. Agora, se eu clicar, ficaremos bem legais. O fato é que, na verdade, eu também vou adicionar a transição por padrão. Agora tudo funciona perfeitamente e, com esse projeto , terminamos. Vamos seguir em frente. 13. Project 8: cabeçalho de site com gradientes: Tudo bem, é hora de seguir em frente e começar a criar nosso próximo projeto. Nesta seção, vamos criar um cabeçalho da página de destino com gradientes CSS Como você pode ver, temos aqui um cabeçalho de site com cores de gradiente CSS agradáveis e legais No lado esquerdo, você pode encontrar diferentes camadas com gradientes. Você também pode ver o título seguido pelo botão. Quanto ao lado direito, você pode ver aqui uma barra de navegação simples com três itens de navegação que é seguida pelo banner. Você pode ver aqui os elementos do título. Um dos cabeçalhos tem esses gradientes CSS legais e interessantes Abaixo, você pode encontrar três fonossomicons. Eles representam os links de mídia social. Ok, vamos falar sobre esse projeto. Vamos continuar e começar a construí-lo. Eu criei uma nova pasta na área de trabalho. Vamos abri-lo no código VS. Vou criar nossos arquivos de trabalho. O primeiro será o índice HTML e, em seguida, teremos um arquivo para CSS no estilo CSS. Vamos abrir o arquivo HTML de índice e criar a estrutura HTML básica. Eu vou mudar o título. Será a página de destino e, em seguida, vou vincular o arquivo ESS aqui. Vamos abrir o projeto no navegador usando o servidor ativo. Em seguida, colocarei o navegador e o editor lado a lado para tornar nosso processo de trabalho mais conveniente e simples. Em seguida, vou pegar o link do CDN do fono, porque vamos usar os ícones do fono Vamos copiar o link daqui. Em seguida, abra a tag de link no elemento principal e cole o link aqui. Em seguida, vou visitar o site de telefones do Google. Porque vamos usar o telefone do Google durante todo o projeto. Vamos procurar por Tilt, Warp the style. Copie o link e cole-o apenas na cabeça. Tudo bem, estamos prontos para começar a escrever a marca do demônio H. Vou abrir uma etiqueta profunda que será o contêiner no qual vou inserir a aterrissagem. Então, aqui estão as camadas, camada um, camada dois e camada três. Dentro da camada três, teremos a camada interna. Em seguida, vou criar a navegação sem usar elementos. Vamos inserir aqui nenhum item. Teremos três elementos de link diferentes. Vamos abrir o elemento de link e colar aqui em casa. Em seguida, o segundo será Explorar. Quanto ao terceiro , será Contato. Tudo bem, após a navegação, precisamos de um banner no qual eu vou abrir o H one, com os gradientes do elemento de cabeçalho Então precisamos do botão. O tipo será botão. Em seguida, precisamos do elemento span com o texto Explorar. Em seguida, vou colocar com a seta FA sólida de classe FA. Certo? Na verdade, precisamos aqui do elemento I e não do profundo. Aqui temos o lado esquerdo da página. Em seguida, precisamos criar um cabeçalho no qual vou colocar H um elemento de cabeçalho com a página inicial de texto. Então, precisamos aqui de gradientes CSS do elemento span. Ok, depois disso, precisamos criar os links de mídia social que precisamos desenvolver com a classe de mídia social na qual vou colocar o elemento I nas classes FA brands, Facebook. Vamos duplicá-lo duas vezes. Mude os nomes das classes. O segundo será o FA Instagram. Quanto ao terceiro elemento de link , será o FA Twitter. Tudo bem, então é isso. Todos os elementos são criados e agora temos que começar a escrever o CSS. Vou selecionar cada elemento. E use alguns estilos padrão. Vamos definir a margem e colocar as duas em zero. Em seguida, precisamos que o tamanho da caixa seja caixa de borda, pois vou definir a decoração do texto como nenhuma Então, precisamos de uma família telefônica. Será o tilt Warp, o telefone do Google que selecionamos Como você pode ver, os blocos padrão são aplicados. Em seguida, vou definir o tamanho do telefone do elemento HTML para 62,5%. Para tornar um m igual a dez pixels, usaremos M como uma unidade de medida Em seguida, vou selecionar o contêiner largura definida como 100%. Em seguida, a altura será de 100 pés de altura. Vamos usar a cor de fundo. Vai ser OF 162. Temos aqui a cor azul. Em seguida, vou selecionar o pouso. Vamos definir a largura para 95% e, em seguida, a altura será 90%. Vou usar o fundo com a função de gradiente linear A direção será para o fundo direito. Precisamos aqui da primeira cor que será uma D24. Então, o próximo será 2d48. 99, 70% Temos aqui um gradiente agradável e ecológico. Em seguida, precisamos de box shadow com os valores 01 Ram, cinco Ram. E a cor vai ser preta com menor opacidade, 0,2 ok Agora precisamos aqui para o raio, que será uma RAM, então, como você pode ver os cantos ao redor dela Em seguida, vou centralizar o elemento usando o livro de linho. Precisamos justificar o centro de conteúdo e, em seguida, um centro de itens de linha Como você pode ver, o cabeçalho está centralizado na página. Em seguida, vou selecionar a primeira camada. Vamos definir sua largura para 70%. Então, a altura será 120%, definindo a posição como absoluta Então, precisamos da posição relativa para o elemento pai, que é uma aterrissagem. Vamos definir o topo. A posição será de -10% , então a posição esquerda será -5%. Vou usar uma função de gradiente linear A primeira cor será C558. Então, o próximo será 4538. Temos aqui a primeira camada. Em seguida, vou usar o raio da borda com os valores zero, 50% 50% e depois zero Além disso, precisamos de opacidade de 0,5 Em seguida, vou usar alguma sombra com valores de 01 Ram, cinco Ram E a cor preta RGBA com uma opacidade 0,5 Como você pode ver, temos aqui a Na verdade, precisamos esconder as partes da primeira camada usando overflow Ok, é isso mesmo. A primeira camada está pronta. Vou duplicar essa altura de alteração de código, será um 40% então a posição esquerda será 15% -50% Então a primeira cor será 338 Quanto à segunda cor, vou usar 452 Também aqui, valor percentual 40% Na verdade, algo está errado aqui. Sim, precisamos mudar o nome da classe. Vai ser a camada dois. Aqui temos a camada dois. Vamos duplicar esse código, mudar o nome da classe. Vai ser a camada três. Precisamos que a altura seja um 30% , então a posição principal será -25%. E temos que mudar as cores na função de gradação linear, a primeira será 95, na verdade, precisamos aqui da direção da transição para, certo Então, a próxima cor será 5584. Vamos nos livrar do valor percentual. Aqui temos a terceira camada. Eles parecem muito bonitos. Vamos nos livrar da opacidade. Não precisamos de opacidade aqui. Então, agora temos resultados muito melhores. Tudo bem, vamos prosseguir e selecionar a camada interna. Vamos definir com 100%, então a altura será 100%. Vamos pegar essa função linear graduada mudar a direção para o canto superior direito conforme necessário Primeira cor a ser 245. A próxima cor será b1666. Em seguida, precisamos transformar com uma função de tradução os valores. Seremos 30 Ram e depois 15 Ram. Temos que mover o elemento nas duas direções. Vamos usar o raio da borda para tornar o elemento arredondado em 50% Agora temos que esconder as partes do elemento usando overflow Ok, então eu acho que parece muito bom. Agora temos que sair do bar sem bar. Vamos definir a posição como absoluta. A posição superior será zero, a posição esquerda será zero. Com 100%, a altura será de dez ml. Vou usar livros flexíveis. Vamos colocar os elementos no centro verticalmente. E também precisamos justificar o conteúdo com o Flex porque vamos colocar os itens no lado direito Vamos configurar para 100 Ram. Agora podemos personalizar os links. Vamos selecionar os itens A. Vou definir o tamanho da fonte para 1,4 Ram. A cor vai ser branca. Precisamos que a transformação do texto seja maiúscula, então Ponight será 300 E também precisamos do espaço usando margem, 02 Ram nos lados esquerdo e direito, e então cria algum espaço entre as letras. Vamos configurá-lo como 2.1 Ram. Além disso, precisamos de algum efeito de sombra em 3.020,5 Ram, um Ram com a cor preta RGBA e a oposição 0,2 Ok, é isso aí Os itens de navegação parecem muito bons. Em seguida, vou selecionar o banner. Vamos definir a posição como absoluta, então a posição superior será 35% da posição esquerda, será 10%. Aqui temos o banner, o título na parte inferior. Vamos personalizar os elementos do título, aumentar o tamanho do telefone. Serão dez Ram, então a cor será branca. Além disso, precisamos de espaço entre as letras. Vamos configurá-lo para 2,3 Ram. Em seguida, precisamos de potes de margem. Vamos configurá-lo para cinco Ram. Além disso, precisamos de sombra de texto com os valores 0,5 Ram, dois Ram e a cor RGBA O título parece muito bom. Em seguida, vou cuidar do fundo. Vamos selecioná-lo. Vou definir a largura para 20 Ram. A altura será de cinco Ram. Então, precisamos que a cor de fundo seja branca. Vamos definir a borda 2.2 Ram, sólida, com uma cor branca. Em seguida, vou definir o raio da borda de 2,7 Ram. Aqui temos o fundo. Vou usar livros flexíveis, que são itens de linha no centro Quanto à propriedade justify content, vou configurá-la para espaçar o texto e a seta ficar bem alinhada Na verdade, precisamos de espaço entre e não a rodada. É isso mesmo. Agora precisamos de preenchimento à esquerda para ser um Ram. Em seguida, vou aumentar o tamanho do telefone, que será de 1,8 Ram. Então, precisamos transformar impostos em letras maiúsculas. Use também algum espaço entre as letras. Vamos usar 32,2 Ram e mudar a cor. Vou usar aqui a cor nove, F cinco, o texto parece muito bom. Em seguida, vou usar algum efeito de sombra. Vamos 3.020,5 Ram. precisam de 0,5 fram novamente. E a cor, 230-31-7590 E Em seguida, vou usar o box shadow 3.020,5 Fram, dois Ram. E a cor RGBA, quero dizer a cor preta com opacidade 0,2 Finalmente, use Tudo bem, agora temos que seguir em frente e pegar o ícone, quero dizer, a seta no lado direito. Vamos definir com 30% e a altura será 100%. Vamos mudar a cor do fundo. Eu vou usar aqui E C 245. Agora precisamos exibir a seta. Vamos definir o raio para 0,7 Ram, 0,7 Ram e zero Agora vamos usar o Flex box para colocar a seta no centro usando o centro de conteúdo do justify e um centro de itens de linha E também mude a cor, torne-a branca. Vamos aumentar o tamanho do telefone. Será um bonde 1,8. Aqui temos a flecha. Agora vamos cuidar do cabeçalho, o elemento do cabeçalho no lado direito. Vamos definir a posição como absoluta. A primeira posição será 30%. Quanto à posição correta, vou fazer com que sejam dez Ram. Vamos aumentar o tamanho do telefone , serão cinco Ram. Aqui temos o título no lado direito. Vamos definir a largura, 243 Ram. Em seguida, uma linha de texto no lado direito. Também mude a cor, torne-a branca. Em seguida, use algum efeito de sombra. Precisamos de 0,5 Ram, uma Ram e a cor RGBA com 0,2 pastoso. O título parece muito melhor Agora temos que selecionar o elemento span. Vamos usar o bloco de exibição. Em seguida, precisamos que o tamanho da fonte seja de seis Ram. Então, precisamos transformar o texto em maiúsculas, conforme necessário aqui. Gradiente linear, a primeira cor será 815. Então, o próximo será 447 com 90% Para aplicar o gradiente linear, precisamos do clipe de fundo do Property Webkit, que será E também precisamos do texto do webkit, da cor da sensação. Vai ser transparente. Como você pode ver, temos aqui um efeito de gradiente agradável e interessante para o elemento de cabeçalho Ok, agora temos que cuidar das mídias sociais. Vamos definir a posição como absoluta. A posição inferior será de cinco Ram. Quanto à posição correta, vou configurá-la para dez Ram. Em seguida, precisamos de livros flexíveis. Aqui temos os ícones. Vou selecionar o elemento de mídia social. Vamos aumentar o tamanho do telefone , serão dois Ram. Então, precisamos que a cor seja branca. Também precisamos de margem, 01,5 Ram. Vamos usar algum efeito de sombra com os valores 0,5 Ram, um Ram. A cor preta RGBA. Também mude o cursor, faça-o apontar. Ok, é isso mesmo. Tudo parece muito bom. Com este projeto, terminamos. Espero que tenha sido interessante e você tenha gostado. Vamos seguir em frente. 14. Project 9: formulário de contato com o modo luz/sombra: Ok, é hora de seguir em frente e começar a criar nosso próximo projeto. Na seção, vamos criar um formulário de contato com os modos claro e escuro. Como você pode ver, por padrão, o projeto está no modo claro. Você pode ver aqui alguns campos de entrada diferentes com uma parte inferior. Aqui temos dois fundos diferentes, claros e escuros. Também temos aqui algo como o sol. Se eu clicar em escuro , o projeto mudará para o modo escuro e o sol se transformará em lua. Então, se eu clicar na luz, o projeto voltará ao modo claro. Acho que esse projeto será interessante e útil para você, porque hoje em dia os sites usam o modo claro e escuro. Então você aprenderá algo novo neste projeto, ok? Agora é hora de seguir em frente e começar a construí-lo. Eu criei uma nova pasta na área de trabalho, que agora está vazia. Vamos abri-lo no código VS. Em seguida, precisamos criar nossos arquivos de trabalho para HTML. Então, para CSS, também precisamos de um arquivo para Javascript. Vamos abrir o índice, carregar o arquivo HTML e criar o documento HTML básico. Vou mudar o título. Vai ser um pouco escuro, troque o Togo. Em seguida, vou vincular o CSS e colocar os arquivos em mouse. Vamos abrir a tag de script e especificar o nome do arquivo no atributo source. Em seguida, precisamos abrir o projeto no navegador usando o servidor ativo. Além disso, vamos colocar o editor e o navegador lado a lado, assim. Agora vou usar algumas fontes do Google. Vamos visitar o site e pesquisar o Google Phone chamado Ubuntu. Vou selecionar alguns estilos diferentes aqui, depois vou copiar o link e colá-lo no elemento principal, estamos prontos para começar a escrever o código. Vou começar com a marcação H L. Vamos abrir a tag com o contêiner de classe no qual vou abrir o invólucro do formulário Dentro da embalagem do formulário, teremos a embalagem de espuma à esquerda e a embalagem à direita Vamos abrir o lado esquerdo para criar Sun Moon. Então precisamos de um bastão com um elemento de extensão. Tem classe BG, precisamos de três elementos de extensão. O segundo será claro, o claro escuro, pois o botão de texto terá o atributo de tipo, será botão. Depois, precisamos pegar aqui o lado direito do formulário. Vamos abrir H, um elemento de cabeçalho que será Fale conosco. Vamos inserir sua entrada com o campo de classe. O tipo será texto. Além disso, precisamos de um atributo de espaço reservado com seu nome. Vamos duplicá-lo e alterar o espaço reservado. Vai ser um e-mail. Além disso, vou alterar o atributo type. Também será um e-mail. Em seguida, precisamos da área de texto. Vou adicionar aqui a classe, que será o campo e, em seguida, a mensagem também, vou usar o atributo placeholder com o texto da sua mensagem Ok, em seguida, precisamos do fundo. O tipo será inferior. Então, vou instituir o envio de mensagem de texto. Tudo bem, então acho que está tudo pronto. Vamos começar a escrever o CSS. Vou usar alguns estilos padrão. Vamos selecionar cada elemento e definir a margem e colocar em zero. Então, precisamos que o tamanho da caixa seja uma caixa de borda. Vou definir o esboço como nenhum. Vamos configurar a família telefônica como, que acabamos de acessar no site de telefones do Google Ok, então os estilos padrão são aplicados. Em seguida, vou definir o tamanho da fonte do elemento H tmul para 62,5% porque vamos usar m como a unidade de medida Nesse caso, um m será igual a dez pixels. Em seguida, precisamos selecionar o contêiner. Vamos definir a largura. Será 100%, então a altura será 100 de altura de visualização. Vamos mudar a cor de fundo. Vai ser branco. Em seguida, vou usar os livros Flex. Precisamos centralizar o elemento usando o centro conteúdo justify e o centro de itens de linha Como você pode ver, o conteúdo está perfeitamente centralizado na página Vamos usar o invólucro de espuma e definir sua largura, 280 Ram. Então precisamos de altura , será de 60 Ram. Em seguida, precisamos que a cor de fundo seja branca. Vou usar livros de linho. Defina o raio da borda para três Ram, faça os cantos arredondados Além disso, vou usar algum efeito de sombra. Vamos definir box shadow para zero, para Ram, seis Ram. E a cor será RGBA 61215 e a Opacidade 0.2 Ok, aqui temos a forma com um efeito de sombra Em seguida, vou selecionar o invólucro do formulário à esquerda. Vamos definir sua largura para 40%. Depois, vou duplicar esse código Mude a classe que precisamos aqui, certo? E a largura será de 60%. Tudo bem, ao lado de usar a caixa flexível para o lado esquerdo, vamos mudar a direção Também será uma coluna, precisamos que você justifique o conteúdo no espaço entre eles, precisamos de algum espaço entre os itens Quanto aos itens de Elin , serão o centro Próximo. Vou criar espaço usando preenchimento. Digamos que seja 100, depois 20,0. Depois disso, vou selecionar o Sol e a Lua Vamos colocar a largura em 12, então a altura também será de 12 Ram. Vou mudar o plano de fundo. Vamos usar o gradiente linear. Precisamos que a direção seja de 225 graus. Quanto à primeira cor será F nove , a próxima cor será 55. Em seguida, vou arredondar o elemento usando o raio da borda Aqui temos o sol. Em seguida, vou pegar aqui da parte inferior, no lado esquerdo, vamos definir sua largura para 20 Ram. Então, a altura será de quatro Ram. Vou mudar a cor do plano de fundo. Vai ser 888. Então vamos nos livrar da fronteira, fazer com que ela não exista. E também precisamos de um raio de fronteira, três Ram. Aqui temos o fundo. Em seguida, vou definir o tamanho do telefone para 1,4 Ram. Também mude a cor. Vai ser 777. Em seguida, vou colocar o cursor no ponteiro. Tudo bem, depois disso, vou selecionar a parte inferior com um elemento giratório. Vamos definir a posição como absoluta. Precisamos de uma posição relativa para o elemento pai, que é a parte inferior neste caso. Então, precisamos que duas posições sejam zero. Em seguida, vou definir a largura para 50%. Além disso, altere a altura, torne-a 100%. Em seguida, vou selecionar o plano de fundo. Vamos mudar a cor de fundo. Vai ser branco. Também precisamos de um raio de borda com o valor de três Ram Vamos definir a posição esquerda para zero. Precisamos de um pouco de sombra. Vamos configurá-lo para 0,5 Ram, uma Ram. E a cor preta RGBA com opacidade 0.1 Aqui temos o fundo, que passará do claro Em seguida, vou selecionar claro e escuro. Vamos configurar a tela para flexionar. Precisamos centralizar o conteúdo usando o centro de conteúdo Justify e um centro de itens de linha Depois disso, vou selecionar a luz separadamente, a posição esquerda até zero. Quanto ao escuro, vou colocá-lo na posição correta em zero. Ok, é isso mesmo, o botão é personalizado. Em seguida, vou cuidar do lado direito. Precisamos de livros flexíveis. Então eu vou mudar a direção, torná-la coluna. Além disso, vou colocar itens no centro. Quanto ao conteúdo justificado, vou configurá-lo para um espaço entre eles. Para criar o espaço entre os itens, vamos definir como oito RAM e depois zero. Como você pode ver, os elementos estão alinhados. Agora é hora de personalizar os elementos do título. Vamos definir o tamanho da fonte para cinco Ram. Então, a cor será 777. Aqui temos o título. Em seguida, vou selecionar Campo, definir a largura para 50 Ram. Então, a altura será de cinco carneiros. Vou me livrar da borda e depois criar uma borda na parte inferior. Vamos configurá-lo para 0,2 Ram, sólido. A cor será BBB. Aqui temos os campos de entrada com borda na parte inferior. Na verdade, vamos diminuir a largura, torná-la 30 Ram porque eles são muito grandes. Agora temos resultados muito melhores. Em seguida, vou definir o tamanho do telefone para 1,4 Ram. Então, a cor será 555. Além disso, altere a cor da tuna traseira, torne-a transparente. Em seguida, vou selecionar Campo, seguido pelo atributo de espaço reservado Vamos alterar a transformação do texto, torná-la maiúscula, então precisamos que o tamanho do telefone seja 1,4 Ram. Em seguida, mude a cor, torne-a BBB. Além disso, precisamos de espaçamento entre letras com o valor 0,1 Ram. Como você pode ver, o atributo placeholder parece muito bom Em seguida, vou selecionar a área de texto com a mensagem da turma. Vamos definir a altura para dez Ram. E também vou desativar a função de redimensionamento. Vamos configurá-lo como nenhum. Ok, isso é tudo sobre os campos de entrada. Agora temos que dar uma olhada no fundo. Vamos definir com, serão os dois Ram, então a altura será 4,5 Ram. Em seguida, vou mudar a cor do plano de fundo. Vamos usar aqui a cor 262431. Além disso, vou definir a borda como nenhuma e, em seguida, tornar o botão arredondado usando o raio da borda Vamos configurá-lo para três Ram aqui, na parte inferior. Vamos mudar o tamanho da fonte. Vai ser 1,4 Ram. Então eu vou mudar a cor. Vamos fazer com que seja BB, transforme texto em maiúsculas. Em seguida, crie algum espaço entre as letras, faça com que seja 0.1 Mude o curso, seja o ponteiro E também precisamos de algum efeito de sombra. Digamos que 2012. E a cor vai ser preta com a opacidade 0.1 Ok, esse é o botão, muito bom Vou criar um efeito de clique usando a classe de ações ativa. Precisamos nos transformar. Traduza Y com o valor 0,2 Ram. Depois de clicar, obteremos esse belo efeito de clique. Tudo bem, agora eu tenho que adicionar aqui o fundo do círculo. personalizar esses elementos selecionados. Defina a largura para 120 Ram. Então, a altura também será de 120 Ram. Vou usar o raio da borda. Vamos configurá-lo para 50% Tornar o elemento arredondado. Vou pegar esse plano de fundo com sua função de gradiente linear Aqui temos o círculo. Precisamos mudar sua posição. Vamos configurá-lo como absoluto. Então, precisamos da posição relativa para o contêiner. A posição superior será -70% Quanto à posição esquerda, será 50%. E precisamos centralizar o elemento horizontalmente usando transform translate x -50% Ok, agora a única coisa que tenho que fazer é criar a sombra com os valores 01 Ram, cinco Ram A cor será 248-10-6509. Com a opacidade de 0,2, temos que colocar o círculo atrás Com a opacidade de 0,2, temos que colocar o temos que Vamos definir a posição como relativa. Em seguida, use a propriedade de índice do valor 100. Ok, agora tudo parece muito bom. Podemos começar a escrever o Govscript. Vamos criar uma nova variável que será um contêiner. Vou selecioná-lo usando o método seletor de consultas. Temos que especificar aqui o nome da classe. Em seguida, precisamos selecionar o botão. Vamos colocar aqui o invólucro do formulário do nome da classe à esquerda, seguido pelo botão do nome da tag Ok, agora temos que adicionar um ouvinte de eventos ao botão com clique no evento Também precisamos aqui da função Cope. Depois de clicar no botão, precisamos adicionar uma nova classe ao contêiner usando o método to. Vamos chamar a classe de switch de nome. Agora temos que usar esse nome de classe no arquivo CSS para criar novos estilos para o modo escuro. Vou começar com o plano de fundo selecionado usando a classe switch. Precisamos aqui transformar, traduzimos a função x e o valor será 100%. Também use a transformação de transição, a duração será de 0,4 segundo. Depois de clicarmos, o elemento se moverá bem do claro para o escuro e do escuro para o claro Ok, vamos continuar e selecionar Trocar com contêiner. Vou mudar a cor do plano de fundo. Será 262431 e, em seguida, usará a transição. Depois de clicar, o fundo do contêiner mudará de claro para escuro. Em seguida, precisamos cuidar do fundo do círculo. Vamos selecioná-lo usando a chave para alterar o plano de fundo. Vou usar gradiente linear. A direção será de 225 graus. Então eu vou usar a primeira cor, 93 DFF. Quanto à segunda cor, será 3374 Também precisamos da caixa shadow 015 com RTB calor 60508115 e a opacidade 0.5 Agora, como você pode ver, o círculo e a cor de fundo do círculo cor de fundo do Cain, vamos seguir em frente e selecionar a opção com invólucro de formulário. Vou mudar a cor de fundo que precisamos aqui. Essa cor novamente, 262431 e, em seguida, use a transição. Depois de clicar, o plano de fundo do formulário de contato mudará bem Em seguida, temos que mudar o sol. Então, vamos selecionar esses elementos. Mude o plano de fundo que precisamos aqui, gradiente linear. A direção será 225. Quanto às cores que vou usar na verdade, copiei o código inteiro e colei Depois disso, vou mudar a sombra da caixa. Vamos fazer com que não seja nenhum. Agora o sol está mudando. Mas precisamos aqui de um efeito adicional. Precisamos transformar o Sol em Lua. Vamos selecionar Sun Moon, seguido pelo elemento pós-mar. Vou definir o conteúdo como vazio. Então, precisamos que a posição seja absoluta. Vamos usar a posição relativa para o elemento pai, que neste caso é o sol e a lua. Vamos definir corretamente. A posição será zero. Para a primeira posição, também vou fazer com que seja zero. Então, a largura será de 9,5 Ram. A altura também será de 9,5 fram. Vamos mudar para o raio, será 50%. Precisamos de um círculo Também altere a cor de fundo. Eu vou usar aqui, essa cor escura. Ok, agora temos, mas precisamos adicionar aqui algum efeito. Na verdade, vamos mudar a cor de fundo e depois usar a escala de transformação. Faça com que seja zero. Precisamos aumentar a escala. Depois de clicar no botão, vamos usar o interruptor de classe seguido pelo Sol e Lua. Com os elementos do afterdo, vou mudar a cor de fundo de volta para escura. Também precisamos aumentar a escala 0-1. Também precisamos aqui de uma transição para um efeito mais suave Agora temos um resultado muito melhor. Mas precisamos aqui transformar a origem para estar no topo em vez do centro. Agora, como você pode ver, o elemento está aumentando do lado direito. E temos aqui resultados muito melhores e mais legais. Tudo bem, em seguida, vou cuidar do próprio paton. Vamos selecionar o botão com o interruptor, vou mudar a cor traseira. Vamos usar aqui a cor 1128. Também precisa de sua transição para um efeito suave. Como você pode ver, a parte inferior muda sua cor de fundo. Também precisamos alterar a cor do elemento span. Vamos selecionar alternar Plano de fundo e alterar a cor do plano de fundo. Use aqui, 34323. Novamente, transição, quero dizer, precisamos adicionar aqui a cor de fundo com um ponto de duração de 1 segundo. Como você pode ver, o botão parece muito bom. Depois de mudarmos o modo, agora temos que pegar o texto da entrada. Vamos selecionar o campo com o interruptor e alterar a cor. Faça com que seja leve com BBB is light E, finalmente, temos a parte inferior, quero dizer, o botão Enviar. Vamos selecioná-lo e alterar a cor de fundo. Vai ser BBB, e também precisamos mudar a cor Vamos escurecer, tudo bem, então pronto, tudo funciona perfeitamente. E temos aqui essa bela e legal mudança da luz para a escuridão. 15. Project 10 - Barra de pesquisa: Tudo bem, então vamos seguir em frente e começar a criar nosso próximo projeto. Nesta seção, criaremos uma barra de pesquisa agradável e interessante. Como você pode ver, temos aqui um círculo no centro da página, um ícone de pesquisa. Se eu clicar nesse elemento , a barra de pesquisa se expandirá. Você pode digitar aqui. Pense também que o ícone de pesquisa foi alterado com o botão X de fechamento. Se eu clicar nesse botão , a barra de pesquisa será fechada. E também voltaremos aqui, o ícone de pesquisa. Tudo bem, vamos conversar sobre esse projeto. É simples, mas tenho certeza de que você vai gostar e será interessante e útil. Vamos começar a construí-lo. Eu criei uma nova pasta na barra de pesquisa do desktop, que agora está vazia. Vamos abrir essa pasta no código Us e, em seguida, criar arquivos de trabalho para HTML. Então precisamos de um arquivo para CSS, também para Java script. Em seguida, vou abrir o arquivo HTM indexado e criar a estrutura HTML básica Vamos mudar o título. Vai ser uma barra de pesquisa, depois vou vincular os arquivos CSS e Js. Vamos abrir a tag de script e especificar o nome do arquivo no atributo source. Ok, em seguida, vou abrir o projeto no navegador. Em seguida, coloque o editor e o navegador lado a lado. Em seguida, vou pegar o link CDN do telefone, porque vamos usar alguns ícones do telefone ao longo deste projeto Vamos copiar o link, abrir a tag do link e colá-la no atributo de referência H. Além disso, precisamos de telefones do Google. Vamos visitar o site. Vou pesquisar um telefone chamado signica negativa. Vamos pegar os estilos , copiar o link e colá-lo no elemento principal. Tudo bem, então estamos prontos para começar a escrever a marcação HTML Vou abrir o Deep Type, que será o contêiner. Vamos inserir aqui a barra de pesquisa, na qual vou inserir elemento de entrada com o texto do tipo e com um tipo de atributo de espaço reservado Além disso, teremos aqui um fontossomicon com as classes FA solid e FA magnifying glass Além disso, precisamos aqui de outro fonossômico, a marca X sólida da classe FA Temos aqui todos os elementos. E agora podemos começar a escrever o CSS. Vou selecionar cada elemento e, em seguida, definir a margem e colocar os dois em zero. Em seguida, precisamos que o tamanho da caixa seja uma caixa de borda. Vou me livrar do contorno padrão e depois mudar a família do telefone Será o telefone que selecionamos, Signia negative Sensori Além disso, vou definir o tamanho do telefone do elemento H tim para 62,5% para usar a RAM como unidade de medida Ok, vamos continuar e cuidar do contêiner com o qual vou colocar 100%, então a altura será de 100 pontos de vista Além disso, precisamos aqui da cor de fundo. Vou usar aqui a cor 1611. É de cor escura. Além disso, precisamos do Flexbox para centralizar o conteúdo. Vamos justificar um centro de conteúdo e um centro de itens de linha. Como você pode ver, o conteúdo está centralizado na página. Em seguida, vou selecionar a barra de pesquisa. Vamos definir a largura para 45 Ram. Então, a altura será de oito Ram. Além disso, precisamos que a cor de fundo seja branca. Em seguida, vou usar o raio da borda para tornar os cantos arredondados Vamos configurá-lo para dez Ram. Também vamos usar algum efeito de sombra. Serão 01 Ram, seis Ram. E a cor será RGBA, preto com menor opacidade, 0,6 Ok, depois disso, vou alinhar o texto no lado direito Em seguida, vou selecionar os elementos de entrada. Vamos definir com dois 100% , então a altura também será 100%. Vamos nos livrar da borda padrão usar o raio da borda com o valor dez Ram Em seguida, vou definir a cor de fundo como não. Além disso, precisamos preencher uma RAM, 7,5 Ram, depois uma Ram e depois duas Ram Temos espaço dentro da entrada. Em seguida, vou aumentar o tamanho do telefone, serão duas RAM. Em seguida, vou selecionar o elemento I da barra de pesquisa, quero dizer Fmoc Vamos definir a posição como absoluta. Em seguida, precisamos da posição relativa para o elemento pai, que é a barra de pesquisa do wrapper As duas posições serão 50% Então a posição correta será 0,5 Então precisamos traduzir x -50% Na verdade, precisamos precisamos traduzir x -50% Na verdade, precisamos aqui de y em vez de x para que os ícones sejam centralizados Vamos começar com sete Ram. E a altura também será de sete Ram. Em seguida, precisamos que a cor de fundo seja vermelha ED 3758 Vamos definir o raio da borda em 50% para tornar o elemento arredondado Use também o flex box para centralizar os elementos usando o centro conteúdo justificado e o centro de itens de linha Como você pode ver, os ícones estão centralizados. Vamos aumentar o tamanho do telefone, torná-lo 2,5 fram Em seguida, mude a cor, torne-a branca. Altere também o tipo do cursor, torne-o ponteiro. Ok, agora é hora de escrever um pouco de Javascript. Vamos criar uma variável, que será o contêiner. Vou selecionar esse elemento usando o método seletor de consultas Temos que especificar aqui o contêiner do nome da classe. Em seguida, precisamos de outra variável que será esses ícones. Vamos selecionar os dois elementos usando o seletor de consultas. Todos os métodos que precisamos aqui para passar pela barra de pesquisa. Em seguida, vou examinar os ícones usando o método forage, você precisa aqui do ícone de pesquisa, mas sem as aspas Em seguida, vou passar aqui a função de seta. Vou adicionar um ouvinte de eventos ao ícone de pesquisa com um evento de clique com uma função de retorno de chamada Agora temos que adicionar uma classe ao contêiner ao clicar usando o método togal O nome da classe será, digamos, mudança. Então, agora temos que usar essa classe no arquivo CSS. Primeiro de tudo, vamos mudar a largura da parte de pesquisa, que será de oito Ram. Em seguida, vou selecionar a parte de pesquisa com alteração. Vamos definir com 245 fram. Use também a transição para obter um efeito mais suave. Precisamos aqui da largura e da duração, 0,5 segundo. Além disso, vou usar a função Si cúbica para tornar o efeito mais agradável Isso está nesses valores dentro da função. Depois de clicar no ícone , a parte de pesquisa será expandida. Vou definir a opacidade como zero para o elemento de entrada. Em seguida, vou selecioná-lo com alteração e definir a opacidade Vou usar a transição com opacidade e com duração de 0,5 segundo Além disso, precisamos de um tempo de atraso de 0,3 segundo. Precisamos da mesma transição para o elemento de entrada por padrão, mas sem o tempo de atraso. Agora tudo funciona bem. Agora temos que cuidar dos ícones. Vamos selecionar elementos com o seletor de gráfico três. Defina a opacidade 20. Em seguida, precisamos selecionar os elementos com a mudança de classe. Precisamos que a opacidade seja uma. Além disso, precisamos mudar com o seletor de gráfico dois e a opacidade zero Finalmente, precisamos de uma transição para tornar os efeitos mais suaves. Como você pode ver, por padrão, temos aqui o ícone de pesquisa. Assim que clicarmos, ele se transformará no botão de fechamento X. Tudo funciona perfeitamente. E temos aqui uma barra de pesquisa moderna e moderna. Vamos passar para o próximo projeto. 16. Project 11 - Calculator: Tudo bem, então é hora de seguir em frente e começar a criar nosso próximo projeto. Nesta seção, vamos criar um aplicativo que será uma calculadora de Javascript. Como você pode ver, a calculadora tem uma aparência bonita e moderna e também engraçada. Se fizermos aqui qualquer um dos cálculos , obteremos as respostas adequadas. Como você pode ver, a calculadora funciona bem. Temos aqui uma tela seguida pelos botões. Dois deles são diferentes. O primeiro, quero dizer, o vermelho é para excluir. Quanto ao verde, é um botão igual. Tudo bem, então vamos falar sobre esse projeto. Vamos começar. Eu criei uma nova pasta na área de trabalho que está vazia no momento. Vamos em frente e abri-lo no código VS. Em seguida, vou criar os arquivos de trabalho para o índice HTML HTML. Então, para CSS, que será o estilo CSS, e também precisamos de um arquivo para o script Javascript JS. Em seguida, vou abrir o arquivo HTML de índice e criar a estrutura HTML básica. Em primeiro lugar, vou mudar o título. Vai ser uma calculadora. Em seguida, vou vincular o CSS e também os arquivos Javas. Precisamos abrir o script Tac e especificar o nome do arquivo no atributo source Em seguida, vou abrir o projeto no navegador usando o servidor ativo. Além disso, vamos colocar o editor e o navegador lado a lado para tornar o processo de trabalho mais conveniente e simples Vou visitar o site do Google Phone, porque vamos usar um telefone do Google durante todo o projeto. Vamos procurar um telefone chamado No to Suns. Vamos selecionar alguns estilos diferentes, copiar o link e colá-lo no elemento principal. Ok, estamos prontos para começar a escrever o código. Vamos começar com a marcação HTML. Vou criar o contêiner no qual vou inserir a tag, que será a calculadora. Precisamos aqui de elementos de entrada que serão a tela. Vamos adicionar a tela do nome da classe. Em seguida, vou criar patm com o tipo patm. Então precisamos aqui do BTN. Além disso, vou usar um atributo chamado número de dados. Vamos inserir seu C. Vou duplicar esse caminho algumas vezes porque teremos muitos botões diferentes Vamos adicionar aqui a classe e, em seguida, vou inserir a divisão do seno Então precisamos de 789. Em seguida, precisamos aqui de um asterisco. Quero dizer, a multiplicação seno 456. Então teremos menos seguido por 12,3 Então teremos mais O próximo será zero. Então, novamente zero, teremos pontos e, por último, sinal de igual Além disso, vou mudar o nome da classe. Vai ser igual. Tudo bem, então temos aqui a marcação HTML. Vamos começar a escrever o CSS. Selecione cada elemento , defina a margem e coloque os dois em zero. Em seguida, vou definir o tamanho da caixa para caixa de borda. Precisamos que o esboço não seja nenhum. Em seguida, altere a família de telefones para cada elemento, será o telefone que selecionou, não os filhos. San Serif. Tudo bem, depois disso, vou definir a parte frontal do elemento H milha para 62,5% porque vamos usar m como a unidade de medida E neste caso, um m será igual a dez pexels. Vamos selecionar a largura definida do recipiente para 100%. Em seguida, a altura será 100, veja a altura do vaso. Altere também a cor do plano de fundo. Vai ser 12224, é uma cor escura Em seguida, vou usar o Flex Box porque vamos centralizar o conteúdo usando o Justified Content Center e o centro de itens de linha Como você pode ver, o conteúdo é colocado no centro da página. Vamos selecionar a calculadora. Eu vou configurar com 240 Ram, então a altura vai ser 60 Ram. Vamos mudar a cor de fundo. Eu vou usar 223. Nós temos a calculadora, vamos definir alguns espaços no preenchimento de três Ram, dois Ram Então, precisamos do raio de borda de 32 Ram. Também precisamos de algum efeito de sombra. Vamos definir a sombra da caixa para 01 Ram, depois três Ram, e a cor será a cor RGBA com opacidade 0,4. Temos aqui um efeito de sombra agradável e fresco Depois disso, vou selecionar Tela, que é o elemento de entrada. Vamos definir a largura para 34 Ram. A altura será de oito Ram. Em seguida, vou mudar a cor do plano de fundo. Vamos usar o 888d, depois vou usar a margem na parte inferior Vamos configurá-lo para 1,5 Ram. Em seguida, precisamos do raio da borda , será um Ram Elimina a borda padrão, vamos defini-la como nenhuma. Vou desativar os eventos de ponteiro, vamos configurá-los como nenhum E também vou alinhar o texto no lado direito. Não podemos mais nos concentrar no elemento de entrada. Vamos definir o tamanho do telefone para dois Ram. Também aumente o ritmo entre as letras. Vamos fazer um Ram, mudar a cor. Vai ser branco. Então precisamos colocar, digamos 22 Ram. Depois disso, vou selecionar BTN, seguido pelo seno igual Vamos configurar com 27 Ram. A altura também será de sete Ram. Aqui temos os botões. Vamos usar a margem, torná-la uma RAM. Então eu vou me livrar da borda padrão. Vou mudar o plano de fundo. Vamos usar o gradiente linear. A direção será de 180 graus. Quanto à primeira cor, vou usar 222 Então, a segunda cor será 333. Como você pode ver, a cor mudou. Vamos usar alguns efeitos de sombra que precisamos aqui. Insira zero -0,8 Ram, oito Ram. E a cor será preta com opacidade de 0,25 O próximo valor será 000,2 m. Aqui temos o resultado. Aqui temos o resultado A cor será preta com opacidade 0,75. Então, precisamos Um m de RAM, 2,5 de RAM e a cor RGBA com opacidade 0,4 Em seguida, vou definir o raio da borda para Também mude o cursor, torne-o ponteiro. A próxima coisa que vou fazer é usar a caixa flexível para a calculadora Vamos configurar o fp2p. Além disso, precisamos justificar o centro de conteúdo. E os itens de linha estão centralizados, os padrões estão alinhados Gentilmente. Em seguida, vamos selecionar limpar, então a largura é de 225 Ram. Na verdade, com o layout que terminamos, os padrões estão perfeitamente alinhados Em seguida, vou selecionar BTN com o elemento before do. Além disso, precisamos igualar os elementos antes de fazer. Vamos definir o conteúdo para atribuir número de dados, que usamos no arquivo HTML. Aqui temos os números e os sinais nos botões. Vamos definir a posição como absoluta. Precisamos de uma posição relativa para o elemento pai. Vou definir a primeira posição para 0,3 Ram. A posição esquerda será de 0,4 Ram. Também precisamos da posição inferior de 0,7 Ram. E a posição correta será de 1,2 Ram. Em seguida, vou mudar a cor, vai ser branca. Vamos configurar, exibir as bandeiras, usar o Justify Content Center e o Eline Items Center, pois os números e os sinais estão Em seguida, vou aumentar o tamanho do telefone. Serão 2,2 Ram. Mude o plano de fundo, vou usar , novamente, gradientes lineares A direção será 90 graus e a primeira cor será 2d2d2 D. Então a próxima será 40, 40, 40 Agora, os botões estão mais bonitos. Vamos usar a sombra de caixa que precisamos aqui. -0,5 Ram, depois -0,5 Ram, 1,5 Ram. E a cor RGBA preta com opacidade 0,1 Então precisamos adicionar aqui outro valor, uma RAM, 0,5 RAM, depois uma RAM, e o RGB com a opacidade 0,15. Então precisamos de uma borda no lado esquerdo, será 0,1 sólido A cor será 0004. Então, vamos mudar aqui. Precisamos de um fundo de borda. Borda superior, agora precisamos usar o raio da borda , será uma RAM Os botões estão muito bonitos. Vamos adicionar aqui o plano de fundo a, será 62929 Além disso, precisamos selecionar o pseudo elemento clear with before e mudar o plano de fundo Vai ser da mesma cor. Precisamos colocar o código abaixo. O código será sobrescrito. Temos aqui um belo fundo transparente. Vamos adicionar essas bordas ao elemento e alterar a cor. Vai ser F quatro. Precisamos da mesma coisa para o botão igual. Vamos mudar o plano de fundo. Use a cor 37925 conforme necessário aqui. Igual ao elemento anterior, altere o plano de fundo. Use esse código aqui. Além disso, também precisamos dessas fronteiras. Agora, tudo perfeitamente e com o estilo, terminamos A única coisa que precisa fazer é criar um efeito de clique usando PT e ativo. E também quando é igual a ativo. Vamos definir o filtro para brilho com valor 1.5. Temos aqui um bom efeito de clique. Tudo bem, agora é hora de fazer a calculadora funcionar com Javascript. Vou criar uma função. Vamos chamá-la de calculada aqui, uma função de seta. Precisamos criar algumas variáveis diferentes. O primeiro será a tela. Vamos selecioná-lo usando o método seletor de consultas. Precisamos aqui do nome da classe, da tela. Então, o próximo elemento serão os botões. Precisamos selecioná-los usando o método query select all. Vamos aqui PTN. Finalmente, precisamos aqui de iguais. Tudo bem, depois disso, vou dar uma olhada nos botões usando o método de forragem Em seguida, precisamos adicionar um ouvinte de eventos ao botão usando click event E também temos que passar aqui uma função de retorno de chamada. Vamos adicionar aqui o parâmetro. Em seguida, precisamos criar um valor variável que será igual ao conjunto de dados de destino Estamos pegando aqui os números que passamos no atributo data num Vamos verificar isso no console. Vou executar a função. Se eu inspecionar a página e separar essas janelas , mude para a guia do console Se eu clicar nos números , obteremos um objeto de mapa de strings no qual teremos os números. Se eu adicionar aqui a propriedade num , obteremos números sem nenhum objeto no console. Ok, vamos nos livrar dessa linha de código. Em seguida, vou definir o valor da tela com sinal de mais igual. Será igual ao valor. Os números são adicionados na tela, quero dizer, os valores são adicionados na tela. Depois disso, precisamos cuidar do sinal de igualdade. Vamos adicionar o ouvinte do evento ao sinal de igual com o evento de clique E também precisamos da função de retorno de chamada. Vamos criar uma resposta variável. E eu vou usar a função embutida evil, que avalia a expressão Em seguida, precisamos filtrar esse valor para ser igual à resposta. Se eu fizer aqui o cálculo obterei a resposta correta. Agora temos que cuidar da função clara. Vamos adicionar até mesmo um ouvinte à função clear com o evento de clique Depois de clicar na função limpar, precisamos deixar a tela vazia. Precisamos adicionar aqui uma string vazia. Agora tudo funciona perfeitamente. A calculadora funciona bem. Terminamos esse projeto. Espero que tenha sido interessante e você tenha aprendido algumas coisas novas. Vamos seguir em frente. 17. Project 12 - Cabeçalho de site com menu de navegação: Tudo bem, então é hora de seguir em frente e começar a criar nosso próximo projeto. Nesta seção, criaremos um cabeçalho de site com um menu de hambúrguer O site será sobre algo como comida ou receitas. Consiste em algumas partes diferentes. Temos aqui um ícone de menu. Se eu clicar nele, os itens de navegação serão exibidos bem, com alguns efeitos Se eu passar o mouse sobre os itens , obteremos esse belo efeito de foco Se eu clicar novamente no ícone do menu , os itens de navegação serão fechados. Além disso, temos aqui alguns elementos textuais diferentes com uma imagem que está bem colocada Também no lado direito, você pode ver aqui a imagem da comida, que cria uma placa muito bonita e legal. Tudo bem, isso é tudo sobre esse projeto. Vamos continuar e começar. Eu criei uma nova pasta na área de trabalho na qual temos uma pasta de imagens. Vamos abrir essa pasta no código VS. Em seguida, crie nossos arquivos de trabalho para HTML, CSS e também quatro Ylscript Em seguida, vou abrir o índice, carregar o arquivo HTML e criar a estrutura HTML do pac Vamos mudar o título. Vou entrar aqui na landing page. Então, vamos vincular o CSS e todos os arquivos de script de que precisamos aqui, com o estilo CSS Em seguida, vamos abrir a tag de script e especificar o nome do arquivo no atributo source. Vamos abrir o projeto no navegador usando o servidor ativo. E então eu vou colocar o editor e o navegador lado a lado, assim. Vamos começar a escrever a marcação H mal. Precisamos de uma etiqueta profunda que será o contêiner. Então eu vou inserir aqui outro fundo. Vai pousar. Então, dentro do pouso, vou abrir a navegação, na qual teremos duas partes. O primeiro será o menu. Vou inserir aqui, Linhas, teremos três linhas diferentes. Precisamos de duas classes, linha na linha um. Além disso, precisamos alterar aqui os números. Além das linhas, teremos aqui o elemento Span. Vai ser o menu de texto. É isso aí, sobre o ícone do menu. Em seguida, precisamos criar itens de navegação. Vou inserir o elemento de link com a classe. Nenhum item dentro do elemento de link. Bem, inclua uma etiqueta com o nome do item. Vai estar em casa. Vou inserir uma tag de imagem. Vamos selecionar Imagem na pasta de imagens. Vai ser a imagem três. Em seguida, duplique esse elemento cinco vezes. Mude os itens, o segundo será sobre. Também precisamos alterar os nomes das imagens. A seguir, teremos receitas como imagem cinco. Então teremos a imagem de entrega seis. E, finalmente, teremos contato. Quanto à imagem, será a imagem sete. Ok, então aqui temos as imagens e os itens de navegação. Em seguida, vou criar o banner. Dentro do banner, teremos uma imagem. Vamos selecionar a imagem dois da pasta de imagens. Além disso, precisamos do nome da turma dela. Vai sobrar uma imagem. Então eu vou abrir o cabeçalho. Incluirá H, um elemento de cabeçalho. Vai ser o melhor pé de todos os tempos. Em seguida, teremos receitas de parágrafos para alimentos saudáveis. Vamos duplicá-lo duas vezes. O segundo parágrafo será entregue no mesmo dia do terceiro parágrafo. Teremos aqui produtos frescos e deliciosos. Tudo bem, depois disso, eu vou cuidar do lado direito. Precisamos, vamos selecionar a imagem um da pasta de imagens que precisamos aqui, nome da classe, imagem. Certo? Também precisamos aqui do que será o prato. Ok. Acho que tudo foi criado e, com a marcação HTM, terminamos Vamos continuar e cuidar do CSS. Vou visitar o site do Google Phones, porque usaremos os telefones do Google durante todo o projeto. Vamos procurar um telefone chamado Tilt. Agora vamos selecionar esse estilo. Além disso, precisamos de outro telefone chamado Ctilium Web. Vamos selecionar alguns estilos diferentes, copiar o link e colá-lo nos elementos do cabeçalho. Em seguida, vou criar alguns estilos padrão. Vou selecionar cada elemento e, em seguida, definir a margem e colocar os dois em zero. Precisamos que o tamanho da caixa seja uma caixa de borda. Além disso, vou me livrar da decoração de texto padrão. Vamos configurá-lo como não e, em seguida, definir a família telefônica para inclinar a letra cursiva. Além disso, vou definir o tamanho do telefone do elemento H tim para 62,5% porque vamos usar a RAM como uma unidade de medida Nesse caso, uma RAM será igual a dez pixels. Em seguida, não vou selecionar nenhum item. Vou escondê-los por um tempo, usando display non. Em seguida, vou selecionar o banner e também vou ocultá-lo. Vamos selecionar o recipiente, definir sua largura 200% e a altura será de 100 potes Vou mudar a cor traseira. Vamos usar a cor amarela, que será FD 861. Aqui temos a cor amarela. Em seguida, vou selecionar Empréstimo e definir sua largura e altura A largura será de 90% Quanto à altura, vou definir 280, vou definir 280, 5%. Também mudarei a cor do fundo. Vou usar aqui a cor FFT, 868, f863. Vamos mudar o raio da borda, fazer com que sejam dois Ram. Também precisamos de algum efeito de sombra. Vamos definir pop shadow 201 Ram, seis Ram. E a cor preta RGBA com opacidade 0.3 Aqui temos Vou colocá-lo no centro usando livro de linho. Precisamos justificar o centro de conteúdo e um centro de itens de linha para o elemento pai , que é um contêiner Agora, o elemento está perfeitamente posicionado no centro. Em seguida, selecionarei a navegação que definirá que sua posição será a posição dominante absoluta em relação ao elemento pai Vamos definir duas posições para zero e a posição esquerda para zero também. Então, precisamos que a largura seja de cinco Ram. Quanto à altura, eu vou, depois vou mudar a cor do fundo. Vai ser branco. Além disso, vou definir as alturas para 100%. Então, para o raio de 2m00 e dois m, precisamos de cantos arredondados no lado esquerdo do elemento Em seguida, vamos selecionar o ícone do menu. Vou definir sua largura para quatro Ram, então a altura será 16 Ram. Vamos definir a cor de fundo como CC por um tempo. Aqui temos o ícone do menu. Vamos definir a posição como absoluta. Então as duas posições serão 50%, a posição será 50%. Precisamos centralizar perfeitamente o elemento e, para isso, precisamos transformar. Traduza. -50% novamente -50% O elemento está centralizado, vamos usar Vou definir a direção da flexão para a coluna. Então, quando você justifica o espaço de conteúdo entre e o centro dos itens da linha Também vou colocar o cursor no ponteiro. Tudo bem Depois disso, vou cuidar das linhas. Vamos definir a largura para 80% e, em seguida, a altura será de dois Ram. Também mude a cor de fundo, cor vermelha por um tempo. Em seguida, vou selecionar a linha e definir sua largura para 100%. Em seguida, a altura será de 0,3 Ram. Também altere a cor de fundo. Use 555. Então precisamos do raio da borda, será de 0,5 Ram Vamos nos livrar da cor vermelha a partir daqui. Aqui temos as linhas. Agora precisamos criar algum espaço entre as linhas. Para isso, vou usar o display Flex. A direção flexível será coluna e precisamos justificar o conteúdo com um espaço de valor entre as linhas separadas Além disso, vou me livrar dessa cor de fundo a partir daqui. Agora precisamos cuidar dos elementos do span. Quero dizer, o texto do menu que definiu a orientação do texto para vertical Precisamos colocar as letras na vertical. Então precisamos do modo de escrita Vertical L, R. Aumente o tamanho do telefone. Serão 2,5 Ram. Aqui temos o texto colocado verticalmente. Em seguida, vamos transformar texto em alteração em maiúsculas. A cor será 555. O ícone do menu parece muito bom. Vamos nos livrar disso, está acontecendo a partir daqui. Defina a largura para 25 Ram. Precisamos que a altura seja de 100% para mudar a posição, ela será absoluta. Na verdade, precisamos diminuir o tamanho da imagem porque elas são muito maiores. Agora vamos começar com 211 Ram. A altura será 11. Também precisamos de uma cobertura para os pés do objeto. Agora as imagens ficam menores e o processo de trabalho será mais conveniente. Vamos definir a posição esquerda para cinco Ram. Então, precisamos de display flex. A direção flexível será a coluna. Em seguida, vou selecionar agora o item e definir o linho como um. Agora, cada item tem largura uniforme. Vamos mudar a cor de fundo. Vai ser 888. Em seguida, defino a posição da imagem como absoluta e vou definir duas posições como 50%. Em seguida, precisamos transformar a tradução Y com -50% para centralizar a imagem na horizontal Em seguida, precisamos que a posição correta seja menos três Ram. Além disso, vou definir a posição relativa para o item operacional, que é o elemento pai. As imagens estão bem posicionadas. Precisamos ocultar as partes das imagens usando overflow hidden Agora eles parecem muito bonitos e legais. Tudo bem, depois disso, eu vou cuidar dos elementos do texto. Este elemento pan, vamos definir a posição dois absoluta. Então, precisamos posicionar em 50%. Além disso, precisamos centralizá-los , principalmente usando transform translate y -50%, então a posição esquerda será de três Ram Vamos configurar a família telefônica para até Web Serif. Em seguida, vou aumentar o tamanho do telefone. Vai ser 2,5% de dois pontos, depois aumentar o tamanho do telefone, vai ser 2,5 Fram também cria algum espaço entre as letras depois muda a cor Serão 33. Então, como você pode ver, o espinélio deve estar bem bonito. Em seguida, vou selecionar um novo item com o mouse. Vou mudar a cor de fundo no hot 26. Use também a transição para obter um efeito mais suave. Aqui temos o efeito de desgaste. Em seguida, vou usar o Javascript para fazer o menu funcionar. Vamos criar uma variável chamada ícone de menu e selecionar esse elemento usando o método seletor de consulta Vou especificar aqui que o nome da classe será o ícone do menu. Além disso, vou criar duas outras variáveis. O segundo será de linhas. Vamos selecionar as linhas. Então precisamos de um contêiner. Vamos especificar aqui o nome. Ok, agora temos que adicionar o ouvinte de eventos ao ícone do menu com um evento de clique Vamos adicionar aqui a função de retorno de chamada ao clicar. Temos que adicionar uma nova classe ao contêiner usando o método togal O nome da classe será, digamos, mudança. Agora temos que usar esse nome de classe no arquivo Css para criar novas regras. Ao clicar, precisamos de uma mudança seguida pelas linhas ao clicar. Vou girar o ícone. Usando a função de rotação C, o valor será de 90 graus. Vamos usar a transição. Se eu clicar, o ícone do menu girará Em seguida, sou elemento de altura e amplitude e a imagem usando opacidade zero e visibilidade oculta Além disso, não sou um item usando a função escala x. Vamos adicioná-lo a zero e, em seguida, vou usar a alteração com o item. Depois de clicar no ícone, precisamos transformar a escala em um, voltando ao valor padrão. Vamos adicionar aqui a transição com transferência de 0,5 segundo. Além disso, vou definir a origem da transformação para a esquerda. Vamos, uma vez clicados, os itens serão exibidos. Se nos livrarmos da origem da transformação , você verá os resultados dos quais, na verdade, não precisamos. Em seguida, vou selecionar span Elements com mudança de classe. Vamos definir a opacidade como uma e a visibilidade como visível. Além disso, vou usar a transição com pouco tempo de atraso. Precisamos da mesma coisa para a imagem. Vamos mudar o seletor. Precisamos de uma imagem aqui. Vamos aumentar o tempo de atraso, faça com que seja de 0,7 segundos. Agora, quando eu clicar, obteremos esse efeito agradável e legal. Itens, ou exibidos com um clique, podemos tornar esse efeito ainda melhor. Vamos selecionar o item. Estou no primeiro elemento usando o seletor Chad, seguido pelo Vamos pegar a transição. Em seguida, vou duplicar esse elemento cinco vezes, alterar os seletores do gráfico Mph e também aumentar ligeiramente os tempos de atraso Agora, se eu clicar, o tempo suficiente dos itens dos painéis aparecerá em ordem Também precisamos da mesma coisa para as imagens. Vou mudar os seletores em vez de span. Vou inserir a imagem. Vamos aumentar um pouco o tempo de atraso porque, por padrão, o tempo de atraso é diferente para a imagem desse painel Agora vamos verificar. Como você pode ver temos aqui um resultado legal e agradável. Vamos nos livrar da transição a partir daqui. Agora precisamos de algo semelhante para o item nova em si. Vamos selecionar o primeiro item nova usando chart selector corp, a propriedade de transição, depois duplicar esse código cinco vezes, alterar os números dos seletores secundários e também precisamos adicionar o tempo de atraso para cada item novo com um período de tempo diferente Altere o tempo de atraso de cada item. Agora, se eu clicar, obteremos isso bem legal, perfeito, na verdade. Com a navegação, terminamos. Vamos seguir em frente e cuidar do resto das partes do projeto. Vamos selecionar a imagem à esquerda, definir a largura para T m a posição será absoluta. Aqui temos as imagens. Vou definir a posição da imagem da maneira certa para absoluta. Além disso, vou definir a posição correta para -10%. Em seguida, vamos selecionar o cabeçalho Vamos definir a exibição como nenhuma para ocultar o cabeçalho por um tempo. Vamos em frente e posicionar a imagem no lado esquerdo, a posição será -15% Quanto à posição esquerda, vou configurá-la para -10%. Então precisamos transformar a rotação, o valor será de 70 graus Em seguida, vou definir a Opacidade 2.5. A imagem está bem posicionada Precisamos de um transbordamento oculto para o pouso, a fim de ocultar a parte da imagem Além disso, vou adicionar essa propriedade à navegação porque ela acabou por trás da imagem. Tudo bem, a seguir eu vou cuidar do prato. Eu vou definir sua largura para 70% e a altura vai ser 100% Então eu vou mudar a cor do fundo, vai ser branco. Vou definir a posição como absoluta. Então a posição correta será de -20%. Aqui temos a placa que agora não se parece com nenhuma placa Vamos definir com 50% para a imagem. E também precisamos que o índice seja 100, depois a opacidade, será 0,9. Aqui temos a imagem Vamos definir o raio da borda da placa em 50% e depois em 00,50%, precisamos de cantos arredondados para o Vamos definir a transformação para girar a função Z. O valor será de -30 graus. Agora temos aqui um prato que parece muito bom. Vamos cuidar do cabeçalho. Vou definir a posição como absoluta, então a posição será de 20% , a posição esquerda será 10%. Aqui temos o cabeçalho. Vamos personalizar cada um dos elementos. Vou selecionar o cabeçalho. Cada um. Elemento de cabeçalho, vamos definir o tamanho do telefone para dez RAM. O peso do telefone será 300. Em seguida, vou selecionar parágrafos. No elemento de cabeçalho, o tamanho do telefone será de 1,8 Ram. Então precisamos de margem. Serão dois Ram e zero. Além disso, vou definir a transformação de texto para capitalizar. Em seguida, vou selecionar o cabeçalho, seguido pelos quatro elementos. Vamos definir o conteúdo como vazio. Então, precisamos que a posição seja absoluta. Vou definir a posição para 50%. Em seguida, precisamos centralizar o elemento verticalmente usando transform translate Y -50%, essa posição será de um Então, precisamos que a largura seja de três Ram. Quanto à altura, vou configurá-la em 2,3 Ram. Em seguida, mude a cor de fundo, será 333. Aqui temos os elementos. Vamos definir a posição como relativa para o elemento pai. Agora, para corrigir o pequeno problema, precisamos preencher a esquerda com cinco ram Agora, o cabeçalho parece muito bom e temos que fazer com que o projeto responda a diferentes tamanhos de tela Ele foi criado para um tamanho de tela extra grande. Se eu verificar aqui a versão final do projeto para diferentes tamanhos de tela , você descobrirá que o projeto é responsivo Como você pode ver, fica muito bom em telas menores. Agora, se eu verificar para iPod ou telefones, você descobrirá que parece muito bom e responsivo Ok, vou tornar o projeto responsivo usando consultas de mídia CSS Vamos criá-lo e especificar aqui a largura máxima como 1.600 pixels Vou selecionar o cabeçalho H, um elemento de cabeçalho. Vamos definir o tamanho da fonte em dois m. Depois, vou verificar o projeto em um ponto de interrupção diferente, parece bom Em seguida, vou verificar em um tamanho de tela menor. Temos que fazer aqui algumas mudanças. Vamos criar uma nova consulta de mídia CSS. Vou definir a largura máxima para 1.208 pixels. Vamos selecionar o elemento HTML e diminuir o tamanho do telefone em 50%, isso tornará todos os elementos menores. Em seguida, vou selecionar o cabeçalho H one. Vamos diminuir o tamanho do telefone, torná-lo sete. Na verdade, tudo parece muito bom. Vamos configurar a tela para o iPad e criar uma consulta de mídia CSS. Defina a largura da mistura para 820 pixels. Vou selecionar a imagem à esquerda. Vamos definir a posição para -10%. Em seguida, vou selecionar a placa e alterar sua largura Vai ser 90% , então a altura vai ser 50%. Também mude a posição inferior, vai ser zero. Então eu vou definir a posição correta para menos dois Ram Vou mover a imagem para baixo. Vamos selecionar a imagem corretamente, definir sua posição de colocação para 15 Ram. Agora temos aqui março, melhor resultado. Em seguida, vou selecionar o cabeçalho. Defina sua posição esquerda para 50% Além disso, precisamos transformar translate x para centralizar o Elm horizontalmente O cabeçalho é colocado no centro. Na verdade, com esse ponto de interrupção, terminamos. Vamos criar uma nova consulta de mídia CSS para um tamanho de tela um pouco menor. A largura máxima será de 768 pixels. Vou selecionar o cabeçalho um e definir sua largura para 50 Ram. Além disso, vamos selecionar a imagem corretamente e definir o peso para 45%. Em seguida, a posição inferior será de 12 Ram. Agora eu acho que tudo parece muito bom. E vamos mudar o tamanho da tela. Em seguida, vou criar uma nova consulta de mídia CS. A largura máxima será de 480 veículos. Vou selecionar a imagem à esquerda e definir sua largura para 60 Ram. Em seguida, vou selecionar o cabeçalho. Defina a posição esquerda para 65% Além disso, vou selecionar o cabeçalho H um e definir o tamanho do telefone para seis Ram. Precisamos fazer um cabeçalho menor. Em seguida, vou selecionar a imagem certa. Vamos definir a largura para 50%. Então, a posição inferior será de dez Ram. Então temos que cuidar do prato. Vamos definir a altura para 40%. Quanto à posição correta, será de -15 Ram Agora, parece muito bom. Precisamos criar o último ponto de interrupção. Vamos criar uma consulta de mídia CS e definir x com 2.400,14 pixels. Vou selecionar o elemento HTML. Vamos definir o tamanho da fonte 240, 2%. Tudo parece muito bom. E com o projeto concluído, ele é responsivo. Espero que tenha sido interessante e você tenha gostado. Vamos seguir em frente e cuidar do próximo projeto. 18. Project 13 - Cartão de produto: Tudo bem, então, em vez disso, siga em frente e comece a criar nosso próximo projeto. Nesta seção, criaremos esse cartão de produto moderno e moderno. O projeto será criado com base em HTML e CSS. Vamos descrevê-lo rapidamente. Como você pode ver, o cartão é colocado no centro da página. Por trás do cartão, temos esse fundo bonito e legal. O cartão é sobre algo como Raincde. No centro do cartão, temos aqui um produto que segue em frente, mouse abaixo, você pode ver essa sombra bonita e fresca no lado esquerdo do cartão Temos dois títulos diferentes para o lado direito. Você pode ver aqui os detalhes do cartão. Você pode selecionar a cor aqui ou tamanho, também o comprimento do peito e assim por diante. Abaixo, temos uma parte inferior que, ao clicar, cria um bom efeito de clique. Ok, isso é tudo sobre esse projeto. Vamos começar a criá-lo. Eu criei uma nova pasta na área de trabalho na qual temos uma pasta para imagens. Vamos abrir a pasta no código VS. Em seguida, vou criar nossos arquivos de trabalho para HTML e CSS, teremos esses dois arquivos diferentes. Vamos abrir o arquivo HTML indexado e criar o documento HTML básico Então eu vou mudar o título. Vai ser um cartão de produto. Em seguida, vou vincular o arquivo CSS. Depois disso, vou abrir o projeto no navegador usando o servidor ativo. Vamos colocar o editor e o navegador lado a lado. Como de costume durante todo o projeto, vou usar os telefones do Google. Então, vamos visitar o site e pesquisar o telefone chamado Josephine Vou pegar estilos diferentes. Além disso, vou procurar outro telefone chamado Tilt Warp. Vamos selecionar o estilo , copiar o link e colá-lo no elemento principal. Estamos prontos para começar a criar o projeto. Vamos começar com a marcação de e-mail em HD. Vamos abrir a tag, que será o contêiner dentro do contêiner. Vou criar o cartão. Então teremos aqui, quero dizer, o lado esquerdo e também teremos o lado direito, o lado esquerdo. Para inserir H três elementos de título com o texto no código aqui, segundo título, que será H, um com o texto da oferta de venda de primavera insira aqui a tag div que será a imagem à esquerda do cartão Vamos selecionar Imagem na pasta de imagens. Vai ser um código. Tudo bem, é isso, sobre o lado esquerdo. Vamos criar o lado direito. Vou abrir a tag, que será a informação do produto. Vamos abrir outro mergulho, que será colorido. Precisamos da cor do parágrafo seguida pelo desenvolvimento, que serão as cores. Teremos aqui panelementos, quero dizer quatro elementos de extensão Em seguida, vou criar o tamanho que precisamos aqui, parágrafo com os laços de texto. Em seguida, vou inserir sua tag profunda com os tamanhos das classes nas quais teremos elementos, quatro elementos de extensão com tamanhos diferentes, como L x L e assim por diante. Tudo bem, depois dos tamanhos que vou criar os detalhes que teremos, vou criar um parágrafo com o comprimento da manga do texto Então teremos aqui outro parágrafo com o texto 66 M. Então teremos também o contador de capas Teremos aqui um balcão de aulas. Em seguida, vou criar um baú no lugar do parágrafo com o baú de texto. Então, teremos aqui outro parágrafo com o texto 102 M Santi metros. Então teremos um contador de baús. Precisamos novamente de outro contador de aulas. Tudo bem, finalmente vou inserir sua bunda com o cartão de classe BTN, vamos definir a parte inferior do tipo dois e vou instituir Prossiga. Ok. A marcação de e-mail HD foi criada e agora podemos começar a escrever o CSS Primeiro de tudo, vou criar alguns estilos padrão. Vamos selecionar cada elemento usando um asterisco. Defina a margem e o preenchimento como zero. Em seguida, vou definir o tamanho da caixa para a caixa de borda. Além disso, precisamos de uma família telefônica para ser Josephine Em seguida, vou definir o tamanho do telefone do elemento atuml para 62,5% porque vamos usar M como uma unidade de medida Nesse caso, um M será igual a dez pixels. Depois disso, vou cuidar da imagem à esquerda do cartão porque é muito grande. Agora, vamos definir com 235 quadros. Em seguida, vou selecionar a imagem em si e definir a largura para 100%. Não, a imagem ficou menor e podemos começar a personalizar o contêiner em 100%. Então, a altura será de 100 pontos de visualização Vou definir o plano de fundo. Vamos usar o gradiente linear. Vou usar a primeira cor, branco com menor opacidade 0.2 Quanto à segunda cor, ela será branca novamente com a opacidade 0.2 Em seguida, vou definir a imagem como plano de fundo, mas selecionada na pasta de Então eles descobrem que a posição será central. Além disso, não precisamos repetir. Em seguida, vou definir o tamanho do plano de fundo para cobrir. Temos aqui essa imagem de fundo bonita e legal. Vou usar o Flex Book para centralizar o cartão usando o Justify Content Center e um centro de itens de linha O cartão é colocado no centro. Agora é hora de personalizar o cartão em si. Vamos selecioná-lo e configurá-lo para 100 Ram. Então, a altura será de 65 Ram. Vou definir a sombra para 01 Ram, seis Ram. E a cor será preta com opacidade 0,5 Temos aqui uma carta com uma sombra Vamos usar livros de linho. Vou fazer os cantos do cartão, arredondá-lo usando o raio da borda Em seguida, vou colocar o curso em ponteiro. Tudo bem, vamos continuar e cuidar do lado esquerdo. Vou definir sua largura para 65% e, em seguida, a altura será 100%. Além disso, vou mudar a cor do fundo. Vamos usar RGBA 120-31-2106 opacidade 0,7 Então eu defino o eu defino Precisamos de cantos arredondados no lado esquerdo. Aqui temos o plano de fundo. Depois disso, vou cuidar do lado direito. Vamos definir com 230, 5%, então a altura será 100%. Também mude a cor do fundo. Vou usar aqui o RGBA 903-80-6606, e a opacidade de 0,7 todas as células raio da borda até 01m1 Ram e zero Portanto, os lados esquerdo e direito são separados pelos planos de fundo Em seguida, vou definir a posição do invólucro da imagem como absoluta Precisamos de uma posição relativa para o elemento pai que resta. Vamos definir a posição para 12%. Quanto à posição correta, será -8%. Como você pode ver, a imagem está bem posicionada Em seguida, eu sou. Defina o filtro pack drop para polar com o valor de 0,5 Ram para o lado direito, que você possa ver que o fundo é polar. Agora vamos exibir a imagem usando a propriedade de índice Z com o valor 100. Na verdade, vou selecionar a imagem à esquerda do cartão com o pseudo-elemento após Vamos definir o conteúdo como vazio. Então, a posição será absoluta. Então eu vou definir a posição inferior, dois menos sete Ram A posição esquerda será 50%. E precisamos enviar para o elemento usando transform translate x -50% Na verdade, estamos criando a sombra abaixo Vamos configurar com 232 Ram. Então a altura será de dez Ram. Mude a cor do plano de fundo. Vou usar RGB, uma cor preta com opacidade de 0,4. Também vou usar Vamos configurá-lo para dez Ram. Como você pode ver, tenha aqui os elementos. Vamos usar filtro com função de desfoque. Vamos avaliar 3,5 Ram. Como você pode ver, temos aqui uma sombra. Na verdade, vou criar o efeito de foco ao passar o mouse. Vou mover a imagem para cima. Vamos definir a posição para 8% e também usar a transição para obter um efeito mais suave Em seguida, precisamos mudar depois. Então, o elemento em que estou na sombra paira. Vamos usar a posição inferior, menos dez Ram E também use filtro. Vou aumentar o valor da função de desfoque e depois usar a transição para obter mais suave. Vamos verificar. Agora, como você pode ver, temos aqui um efeito de foco muito bom e legal Ok, agora vamos continuar e personalizar os cabeçalhos. Vou começar com o elemento de cabeçalho H três. Vamos definir a posição como absoluta , então a primeira posição será 15%. Quanto à posição esquerda, vou definir para 10% e depois vou aumentar. Vamos mudar a família telefônica. Vai ser para Tarp Cursive. Aumente o tamanho do telefone, serão três. RAM também cria algum espaço entre as letras. Mude a cor. É 31227. Então, temos aqui o primeiro elemento do título. Vamos duplicar esse código, mudar o seletor. Precisamos de H um elemento de cabeçalho. Alterar as duas posições será de 22%. Depois, vou aumentar o tamanho do telefone Digamos que 4,5% 4,5 Ram. Use também a transformação de texto, coloque em maiúsculas e, em seguida, precisamos que a altura da linha seja uma. E também precisamos mudar a cor. Vou usar nove, B, D, sete. Temos aqui o segundo título. Vamos definir com 22 Ram. Agora parece muito melhor com o lado esquerdo. Nós terminamos. Vamos seguir em frente e cuidar do lado direito. Vou usar livros Flex. Vamos usar o Justify Content Center e o Align Items Center. Como você pode ver, o conteúdo é colocado no centro do lado direito. Em seguida, vou selecionar Informações do produto. Vamos definir a largura para 24 Ram. Em seguida, vou selecionar Informações do produto. Siga o parágrafo. Vamos definir o tamanho da fonte para 1,2 Ram. Então, o oito da fonte será 300. Altere a propriedade de transformação do texto, coloque em maiúsculas. Em seguida, vou definir a cor para RGBA, 255-25-5255, quero dizer, a cor branca com opacidade 0,7 Os parágrafos parecem bons opacidade Vamos selecionar as cores. Defina o display flex. Então precisamos de margem. Serão dois Ram e zero, depois quatro Ram e novamente zero. Depois disso, vou selecionar a extensão de cores. Temos quatro elementos de extensão para cores diferentes. Vamos definir a largura para seis Ram, então a altura será de 0,5 Ram. Altere a cor do plano de fundo para ver os elementos de extensão por um tempo. Vamos nos livrar disso agora. Vou selecionar o primeiro elemento de rotação usando o enésimo seletor filho Vamos mudar a cor de fundo. Vou usar o CDD C sete em cores. Aqui temos a primeira cor. Vamos duplicar esse código três vezes. No geral, temos quatro elementos de rotação. Vamos mudar os seletores do enésimo filho. Em seguida, vou mudar as cores do plano de fundo. O segundo será 986, depois seremos 55542. E também precisamos aqui 383123. Temos aqui quatro cores diferentes. Tudo bem, a seguir eu vou cuidar dos tamanhos. Vamos definir a margem para dois e, em seguida, 04.0 Em seguida, vou usar livros flexíveis Vamos definir o conteúdo dois para justificar. Espaço entre. Então, como você pode ver, temos um bom espaço entre os tamanhos. Vamos selecionar o elemento span. Defina o tamanho do telefone para 1,6 Ram. Então, o peso do telefone será 300. Também mude a cor, faça com que seja nove B, D sete. Em seguida, vou definir a largura para três Ram. A altura também será três. Em seguida, vou selecionar o segundo elemento de rotação usando o seletor infantil Vamos definir o raio da borda em 50%, precisamos de um círculo. Em seguida, defina a borda 2.1 Ram sólida. E a cor vai ser nove, B, D sete. Temos aqui um círculo, mas precisamos colocar o tamanho dentro do círculo. Vamos usar o flex book usando o conteúdo justify e o centro de itens de linha Agora, o tamanho está centralizado dentro do círculo. Em seguida, vou cuidar da manga. Vamos selecionar o baú também. Vou definir com 100%. Então, precisamos de livros flexíveis, seguidos de justificar o espaço de conteúdo Em seguida, vou selecionar o contador. Vamos definir com 22 Ram, então a altura será de dois Ram. Vamos usar o raio da borda para fazer o círculo, configurá-lo para 50%. Em seguida, vou definir a borda 2.1 Ram sólida e usar essa cor Em seguida, precisamos de uma margem de dois Ram e 04 de Ram zero. Temos aqui círculos para os dois elementos. Em seguida, vou selecionar sleeve counter transform. Traduza a função x de 30 para 16 Ram. Em seguida, precisamos de um contador de baús. Vamos mudar o valor. Serão cinco Ram. Acabamos de mover os círculos em quantidades diferentes. Vamos selecionar o contador de mangas seguido pelo pseudo-elemento anterior Vamos definir o conteúdo como vazio. Precisamos criar linhas. Vamos definir a posição como absoluta. Então, precisamos da posição relativa. Para o contador, que é o elemento pai, precisamos posicionar 50% , então a posição correta será de dois Ram. Em seguida, precisamos transformar, traduzir a função y para centralizar verticalmente o elemento Em seguida, vou definir a largura para 16 Ram. Quanto à altura, será de 0,1 Ram. Vou mudar a cor de fundo. Vamos usar a mesma cor. Aqui temos a linha para o comprimento da manga. Também precisamos de uma linha semelhante no lado direito. Vamos usar após o elemento açúcar, só precisamos mudar a posição correta, será menos seis Ram E também altere a largura. Precisamos de seis Ram. Temos aqui um balcão agradável e descolado. Vamos fazer o mesmo com o contador de baús também. Vamos alterar os nomes das classes, pois precisamos alterar a largura do elemento anterior , serão cinco Ram. Depois do elemento, precisamos que a posição correta seja de -17 Ram. E também a largura será de 17 Ram. Tudo bem, os dois contadores estão muito bonitos e agora temos que personalizar a parte inferior Vamos seguir em frente e selecionar esse elemento. Eu vou definir com 12 Ram. E a altura, será de cinco Ram. Vamos mudar a cor de fundo. Use novamente, da mesma cor. Vou configurar a exibição para bloquear e, em seguida, margar A O para centralizar o elemento. Agora, a parte inferior está centralizada. Em seguida, vamos definir o raio da borda para cinco aríetes. Vou me livrar da borda padrão. Em seguida, vou adicionar o tamanho da fonte, tornando-a 1,4 Ram. O peso da fonte ficará em negrito e, em seguida, a transformação do texto será em maiúsculas. Além disso, precisamos de algum efeito de sombra. Vamos configurá-lo para 0,1 Ram, 0,2 M, uma Ram. Essa é a cor que vou usar: preto com a opacidade 0.4. O botão parece muito bom Finalmente, vou colocar o cursor no ponteiro. Ok, estamos quase terminando. A única coisa que precisamos fazer é criar um efeito de clique usando a classe active do. Precisamos transformar. Traduza a função y com valor de -0,2 Ram. Se eu clicar no botão, teremos esse fato interessante e interessante sobre cliques. Tudo bem, então terminamos esse projeto. Espero que tenham gostado. Vamos seguir em frente e cuidar da próxima. 19. Project 14 - formulário de contato animado: Tudo bem, vamos seguir em frente. Então, para criar nosso próximo projeto, nesta seção, vamos criar um formulário de contato animado com HTML e CSS. Esse projeto vai ser simples, mas acho que vai ser interessante e um pouco engraçado. Como você pode ver, temos aqui algumas animações e efeitos engraçados Tudo o que você vê aqui é criado com HTML e CSS puros. Não usamos aqui nenhuma imagem. No topo da página, temos um título, depois ele é seguido pelas ondas, quero dizer, o mar. No mar, você pode ver dois grupos de peixes. Eles estão se movendo dos lados esquerdo e direito. Além disso, temos aqui alguns campos de entrada diferentes e um botão Enviar. Tudo bem, então vamos falar sobre esse projeto. Vamos começar. Eu criei uma nova pasta na área de trabalho. Vamos abri-lo no código VS e, em seguida, criar nossos arquivos de trabalho. Vamos usar apenas HTML e CSS, precisamos aqui indexar HTML e estilos. Em seguida, vou abrir o arquivo HTML de índice e criar o documento HTML básico. Vamos mudar o título. Vai ser o formulário de contato, então eu vou vincular o arquivo CSS. Em seguida, vamos executar o projeto no navegador usando o servidor ativo. Vamos colocar o editor e o navegador lado a lado. Tudo bem, durante todo o projeto, vamos usar telefones do Google. Então, vamos visitar o site. Vou pesquisar telefones do Google chamados bolhas rubicas Vamos selecionar o estilo e, em seguida, pegar o link necessário para colar o link no elemento principal. Tudo bem, é isso. Vamos continuar e, para criar a marcação H mal, precisamos de um contêiner Estou na etiqueta profunda na qual vou inserir água. Então teremos ondas nas quais eu vou criar dez ondas, eu dez elementos profundos. Vou abrir o deep tag, que também será um grupo de peixes. Teremos aqui outro grupo de peixes de classe. Um. Em seguida, precisamos, que consistirá em peixe Tidy. Vamos duplicar esse código cinco vezes. Teremos seis peixes em cada grupo. Em seguida, vou duplicar o grupo inteiro e alterar o nome da classe Tudo bem, agora nada está visível porque temos apenas os desenvolvimentos vazios. Vamos começar a escrever o CSS. Vou selecionar cada elemento e, em seguida, definir margem e colocar os dois em zero. Em seguida, precisamos que o tamanho da caixa seja uma caixa de borda. Também defina o esboço para não alterar a família do telefone. Serão bolhas rubianas. Em seguida, vou definir o tamanho do telefone do elemento HTML para 62,5% para usar a RAM como unidade de medida Nesse caso, uma RAM será igual a dez pixels. Vamos continuar e cuidar do contêiner. Vou definir a largura para 100% , em seguida, a altura será de 100 potes. Em seguida, vou selecionar a água. Defina a largura para 100% A altura será 85% Defina a posição como absoluta. Precisamos de uma posição relativa para o elemento pai, o contêiner. Em seguida, precisamos que a posição inferior também fique à esquerda. A posição também será zero. A cor de fundo será 60 PTE seis. Aqui temos a água. Em seguida, vou selecionar ondas. Vamos definir a largura para 100% Em seguida, a altura será de dez m. Em seguida, precisamos alterar a cor do fundo. Vamos usar a cor EE. Defina a posição como absoluta. Então a posição será de 15%, essa posição será zero. Temos aqui as ondas. Em seguida, vou selecionar a própria onda. Defina a largura para 10% e a altura será de dez Ram. Mude a cor do fundo, vou usar a cor branca. Aqui temos as ondas. Vamos usar o flex box para colocar os itens horizontalmente em Vou me livrar dessa cor de fundo temporária. Em seguida, vou definir o raio da borda da onda para 00, 50% e 50%. Além disso, precisamos de 50%. Como você pode ver, temos aqui as ondas Ok, depois disso, vou selecionar Fish Group. Vamos definir a largura para 40 Ram. Então, a altura será de 15 Ram. Eu vou mudar a cor de fundo, vamos fazer com que seja C. Então mude a posição, ela será absoluta. Também defina a posição superior para 50%. A posição esquerda será 40%. Aqui temos o primeiro grupo. Vamos selecionar o corpo do peixe. Eu vou definir com até seis Ram, então a altura vai ser três Ram. Mude a cor do fundo, vou usar 26388 Em seguida, vou definir o raio da fronteira para 65%, depois 40% 40% e 65% 50% Agora temos corpos de peixes Em seguida, vou selecionar rabo de peixe. Isso está definido com zero. A altura será zero. Precisamos de uma fronteira. Precisamos que a borda seja sólida de dois Ram. A cor será transparente. Em seguida, precisamos da borda superior com o valor zero. Em seguida, vou usar a borda inferior com valores sólidos de 1,8 Ram, e a cor será 26388 Como você pode ver, temos aqui triângulos criados pelas bordas Precisamos girá-los. Vamos usar transformar a função de rotação Z. O valor será de 90 graus. As caudas são giradas, mas precisamos movê-las e colocá-las atrás dos corpos dos peixes Vamos selecionar Fish Set Display Flex. Agora temos melhores resultados, mas precisamos mover as caudas para perto dos corpos. Vamos usar a margem, à direita, com o valor -1,2 Agora temos que mover as caudas Vamos usar o centro de itens de linha. Agora tudo parece muito bom. Vamos definir o raio da borda em um carneiro para tornar a cauda ligeiramente arredondada Vamos definir a posição como absoluta. Agora todos os peixes acabaram em cima uns dos outros. Vamos selecionar peixes com o seletor , será o primeiro peixe Vamos definir a primeira posição em 40% e, em seguida, a posição correta será. Dois Ram. Aqui temos o primeiro peixe. Vamos diminuir a opacidade. Faça com que seja 0,3 Então eu vou duplicar esse código. Altere o, precisamos que a posição seja zero. Quanto à posição correta, serão dez Ram. Aqui temos o segundo peixe. Vamos duplicar o código, alterar o número. As duas posições serão 30%. Quanto à posição correta, vou fazer com que sejam 15 Ram. Então precisamos do quarto peixe. Vamos definir a posição inferior como zero. A posição correta será de oito carneiros. Em seguida, precisamos do quinto item. Eu vou mudar a primeira posição , vai ser zero. Quanto à posição esquerda, vou fazer com que seja oito Ram. Então precisamos do sexto item, vamos definir a posição para 40% Quanto à posição esquerda, vou defini-la para dois Ram. Em seguida, precisamos do sétimo. A posição inferior será zero, é para a posição esquerda. Eu vou fazer dez. Temos aqui todos os peixes alinhados. Vamos nos livrar do plano de fundo temporário. Então, como você pode ver, temos aqui o grupo de peixes. Eles parecem muito bonitos. Em seguida, vou selecionar o grupo de peixes um. As duas posições serão 35%, a posição esquerda será -25%. Vamos duplicar esse código, alterar o nome da classe Precisamos que o grupo de Phish dois defina duas posições para 70%. Quanto à posição correta, vou fazer com que seja -25%. E também precisamos transformar a tradução de y18 Como você pode ver, o grupo de peixes é colocado abaixo. Na verdade, se eu remover essas duas linhas , o grupo de peixes acabará no lado direito. Na verdade, eles deveriam ser girados. Precisamos aqui girar a função Y e não a translação. O grupo de peixes é rotacionado. Em seguida, precisamos criar a animação. Precisamos de quadros-chave CSS. O nome será grupo de phish um em 0%, precisamos que a posição esquerda seja -25%. Quanto à função transform rotate y, ela será Então, a próxima etapa será de 47% nessa etapa. Vou definir a posição esquerda para 100%, pois a função de rotação será a mesma Então, o próximo aumento será de 53% A posição esquerda será de 100%. Quanto à função de rotação, vou definir para 18 graus Então, a próxima etapa será 100%. Este é o fim da animação. Vou pegar essas duas linhas. Vamos definir a função de rotação para 18 graus. Agora precisamos aplicar essas regras usando propriedade de animação que institui o grupo de peixes um, o nome da animação. Então precisamos de duração infinita de 30 segundos. E a função linear. Como você pode ver, o grupo de peixes está se movendo bem da esquerda para a direita Uma vez escondidos , eles devem girar e voltar para o lado esquerdo Tudo bem, tudo funciona bem. Agora precisamos da mesma animação para o segundo grupo de peixes. Vamos mudar. O nome será o grupo de peixes dois, então aqui, à direita, a posição, função de rotação será de 180 graus. Em seguida, mude aqui novamente, a posição que precisamos, 180 graus corretos. Também precisamos da mesma coisa nessa etapa. Vamos inserir aqui zero. Precisamos aqui de zero. Novamente. Vamos definir a animação para o segundo grupo que precisamos aqui, atrasar 4 segundos e também alterar o nome. Precisamos do grupo de peixes dois. Como você pode ver, os dois grupos estão se movendo bem. Precisamos nos livrar dessa barra de rolagem a partir daqui. Vamos definir o transbordamento oculto para o contêiner. Ok, agora não temos mais os golpes de rolagem e os dois grupos se movem bem Em seguida, precisamos cuidar dos campos de entrada. Vamos criar HTM na marcação. Precisamos de contato. Em seguida, H, um elemento de cabeçalho com o título de contato do nome da classe, será entre em contato conosco. Em seguida, precisamos do elemento do formulário com o formulário de contato do nome da classe. Vamos inserir um elemento profundo que será um grupo de entrada. Vou inserir seu nome e, em seguida, vou inserir o elemento de entrada com o texto do tipo Vamos duplicar esse código. Precisamos do mesmo grupo de entrada para e-mail, altere o tipo. Vai ser um e-mail. Então precisamos de um grupo de entrada para mensagem em vez de elementos de entrada, vou usar a área de texto. Aqui temos os campos de entrada. Vamos seguir em frente e estilizar esses elementos. Vou selecionar o título do contato. Vamos definir essa posição como absoluta. A posição superior será moldura, depois a posição esquerda será 50%. E quando centralizar o elemento usando transform translate x -50% Em seguida, vou definir o tamanho do telefone para nove Rams, mudar a cor, será uma cor laranja, Aqui temos o título. Vamos usar aqui algum efeito de sombra. Vamos definir a sombra do texto para 0,5. Depois, um RB, uma cor preta com opacidade 0,2 Tudo bem, o título parece muito Em seguida, vou preencher o formulário de contato. Vamos definir essa posição como absoluta. Então, as duas posições serão 35%. Vou definir a posição esquerda para 50%. Precisamos novamente centralizar usando transform translate x -50%, centralizar usando transform translate x o formulário de contato está centralizado na página Em seguida, vou selecionar o grupo de entrada. Vamos configurar a tela para flexionar. Precisamos mudar a direção em que será a coluna. Em seguida, vou definir a margem na parte inferior para três Ram. Como você pode ver, temos algum espaço entre os próximos. Vou selecionar o rótulo. Vamos definir o tamanho da fonte para 2,3 Ram. Então, a cor será branca. Vou definir a margem na parte inferior para um Ram. Os rótulos estão bonitos. Em seguida, vou selecionar os elementos de entrada. Vamos configurar com 250 Ram. Então, a altura será. 0,5 Ram. Precisamos que a borda seja nenhuma, então precisamos arredondar os cantos usando o raio da borda, três Ram Em seguida, vou criar algum espaço usando preenchimento. Vamos dizer isso para um Ram, 1m1m, e depois dois Ram no lado esquerdo Os dois primeiros campos de entrada parecem muito bons. Em seguida, vou definir o tamanho do telefone para 1,6 Ram, alterar a cor. Vou usar o 555. Precisamos do box shadow 000.3 Ram, um Ram. E a cor será RGBA com Opacidade 0.1 Tudo bem, seguir vou cuidar da área de texto Na verdade, vamos copiar essas linhas e definir a altura em dez Ram. Como você pode ver, a área de texto parece boa. Em seguida, vou colocar aqui, embaixo. Esquecemos que esquecemos o botão Enviar. Vamos definir o nome da classe para contato. propósito, precisamos aqui enviar uma mensagem, então vou selecionar a parte inferior Vamos configurar com 250 Ram. Então, a altura será cinco. Mude a fronteira, faça com que não seja nenhuma. Então, precisamos que a cor de fundo seja laranja. Mude a cor, vai ser branco. Em seguida, vou fazer com que a fonte tenha tamanho dois Ram. Além disso, precisamos de algum espaço entre as letras. Vamos configurá-lo para 2.2 Ram. Em seguida, transforme o texto em maiúsculas. O próximo caminho é o raio da fronteira. Para arredondar o botão , vou usar um pouco de sombra. Vamos pegar esse código aqui e usá-lo também para o botão. Finalmente, vamos definir o curso por ponto. Ok, então é isso. Terminamos esse projeto. Espero que tenha sido interessante. Agora vamos seguir em frente e cuidar do próximo projeto. 20. Projeto 15 - Button brilhante: Tudo bem, é hora de seguir em frente e começar a criar nosso próximo projeto. Nesta seção, vamos construir esse fundo bonito, fresco e brilhante O projeto será criado com base em HTML e CSS. Usaremos apenas essas duas tecnologias. Como você pode ver, temos aqui uma parte inferior com algum texto e também a sombra abaixo. O texto na parte inferior está piscando e a sombra também está brilhando Se eu passar o mouse sobre o fundo , obteremos esse efeito agradável e legal O texto deixará de piscar e a sombra também se expandirá, certo? Acho que esse projeto vai ser interessante e engraçado. Você aprenderá sobre como criar esses efeitos usando apenas HTML e CSS. Ok, vamos começar. Eu criei uma nova pasta na área de trabalho, que agora está vazia. Vamos abri-lo no código VS e criar nossos arquivos de trabalho para HTML e CSS. Como dissemos, vamos usar apenas essas duas tecnologias. Vamos abrir o arquivo HTML de índice e criar o documento HTML básico. Eu vou mudar o título do projeto. Vai ser um botão, então eu vou vincular o arquivo CSS. Vamos especificar aqui o nome do arquivo. Vamos abrir o projeto no navegador e colocar o editor e o navegador lado a lado. Além disso, vou pegar os telefones do Google no site do Google Phones. Vamos procurar o sinal de telefone chamado Can negativo. Vamos selecionar esses estilos , copiar o link e colá-lo no elemento principal. Ok, agora podemos começar a escrever a marcação H m, tecnologia profunda aberta, que será o contêiner. Vou inserir um botão com a classe BTN. Em seguida, precisamos do atributo de tipo, que será botão. Vou inserir seu elemento span com a classe Envie-me uma mensagem de texto aqui, passe o mouse É isso sobre a marcação H mal. Vamos começar a escrever CSS. Precisamos de um preenchimento de margem para que cada elemento seja zero. Em seguida, vou definir o tamanho da caixa para a caixa de borda. Em seguida, vou definir o contorno como não. Altere também a família da fonte pela serifa negativa significativa. Em seguida, precisamos definir o tamanho da fonte do elemento H dimel para 62,5% para usar m como unidade de medida Nesse caso, um m será igual a dez pixels. Em seguida, vou selecionar o contêiner. Vamos definir com 100%. Então, a altura será de 100 pontos de vista Mude a cor do plano de fundo. Vou usar aqui a cor 1611d, é uma cor escura Em seguida, precisamos de uma caixa flexível para centralizar o conteúdo. Vamos usar o Justify Content Center e um Line Items Center. Como você pode ver, a parte inferior é colocada no centro da página. Depois disso, vou selecionar PTN brilhante. Vamos com 245 Ram, então a altura será 12 Ram Vamos definir o plano de fundo como nenhum. Aqui temos o fundo. Em seguida, precisamos definir a fronteira. Vamos configurar 2,7 Ram, sólido. Na cor, vou usar a função RGB. Os valores serão 212044. Em seguida, defino o raio da borda para dois Ram. Vamos fazer os cantos arredondados. Em seguida, vou definir a cor com o mesmo valor RGB. Na verdade, precisamos aqui 74.4 Agora a cor mudou um pouco e acho que está muito melhor Em seguida, precisamos que o tamanho seja de sete Ram. Em seguida, vou criar algum espaço entre as letras. Vamos configurá-lo para 2,5 Ram. sombra da caixa de mudança estará no conjunto 003 Ram RGP e na mesma Agora temos resultados muito melhores. Vou usar o preenchimento esquerdo de 2,5 Ram. Em seguida, vamos definir cos em dois pontos. Vamos ver o canto inferior direito. Agora, em seguida, precisamos selecionar a parte inferior, seguida pelo elemento anterior. Vamos definir o conteúdo como vazio. Então eu vou definir a largura para 100% A altura vai ser 100% Eu vou definir a posição como absoluta. Precisamos de uma posição relativa para o elemento padrão, que é o próprio botão. Vamos definir a posição para zero. A posição também será zero. Em seguida, precisamos do box shadow 006 Ram. A cor será a cor que usamos. Em seguida, precisamos de um fundo brilhante com o conteúdo do elemento posterior vazio Então, precisamos que a posição seja absoluta. A primeira posição será zero. A posição esquerda será de 50%, então a largura será de 100%. Quanto à altura, eu também vou dizer 100%. Em seguida, vou definir o plano de fundo. A cor vai ser a mesma. Vamos definir a opacidade 2.7 Em seguida, precisamos transformar a tradução -50% e depois em 130% Além disso, vou usar aqui a função de rotação de acordo com a direção x, o valor será de 45 graus E também vou usar a função de escala 1.35 Aqui temos o elemento Vamos usar filtro com função de desfoque com valor três Ram. Passo a passo, estamos criando a sombra. Vamos definir os eventos pontuais, nenhum. Em seguida, vou usar a perspectiva, que nos ajudará a criar três efeitos D. Vamos dizer isso para seis Ram. Como você pode ver, a sombra se expandiu. Em seguida, vou selecionar um texto brilhante. Vamos configurar a tecnologia Shadow 2001 Ram. A cor será RGBA 212474. Então, precisamos de outro valor, 001 Ram. Rgba da mesma cor, mas com a opacidade 0,7 Na verdade, precisamos aqui da opacidade Você pode ver aqui o resultado. Em seguida, vou criar uma animação CSS. Vamos definir o nome da borda dos quadros-chave em 0%, precisamos que a opacidade seja 0,1. Então, a próxima etapa será 2% e o valor será Vamos duplicar essa alteração de código. O valor percentual será 4%, o valor será 0,1 Em seguida, precisamos de 8% e o valor da opacidade será Vou inserir 70% com a opacidade 0,7 Depois vou definir 100% e a opacidade Precisamos da sua função de animação para aplicar essas regras. Essa é a duração de 2 segundos. Então, precisamos de linear e também infinito. Como você pode ver, temos aqui um efeito brilhante e agradável Em seguida, vou criar outros quadros-chave com o texto do nome. Qualquer um em 0% vou definir a opacidade para 0,1 O próximo passo será 2%, a opacidade Então precisamos aqui de 8% e da opacidade 0,1. Então, a próxima etapa será 9% com o valor Então teremos 12% da capacidade que será 0,1. Em seguida, vou inserir seus 20% com a de opacidade. Então, teremos aqui 25% com valor 0,3. A próxima etapa será 30% e a opacidade será uma insira seus 70% com o valor 0,7 O próximo passo é ser 72% com o valor 0,2. Vamos duplicar novamente essa alteração de código O valor percentual será 77% e a opacidade será 0,9 Então eu vou definir o valor percentual para 100 e a opacidade 0,9 Vamos usar novamente a 0,9 Vamos usar novamente propriedade de animação com o nome dos A duração será de 3 segundos. Então precisamos de linhas lineares e, novamente, infinitas. Como você pode ver, temos aqui um belo piscar e brilhar, os fatos A única coisa que preciso fazer é criar o botão brilhante com efeito Ao passar o mouse, vou definir o plano de fundo para RGB, a cor que usamos Eu vou mudar a cor do texto. Digamos que seja 22729. Então, precisamos que a animação não seja nenhuma. Use também a transição. Quando obtivermos essa fenda, na verdade, o texto ainda está piscando, então vou selecionar a parte inferior brilhante com o mouse seguido pelo então vou selecionar a parte inferior brilhante com o mouse seguido pelo pseudo-elemento anterior. Vamos definir o box shadow 2015 Ram e o RGB, a cor também usa transição Agora a sombra está se expandindo bem. Em seguida, vou selecionar a parte inferior com o mouse seguido pelo elemento depois Vamos definir com 2.100,20%. A altura será de 120% . Além disso Na verdade, vamos descartar esse valor. Vou alterar o valor da tradução. Vai ser 110% Além disso, vou usar o filtro dela com função de desfoque com valor cinco Além disso, use a transição para obter um efeito suave. Agora tudo parece muito bom. Finalmente, vou cuidar do texto. Vamos selecionar o botão com o mouse seguido pelo seletor de texto brilhante Precisamos parar a animação. Vamos configurá-lo como não. Tudo bem, agora tudo perfeitamente e com este projeto terminamos. Vamos seguir em frente. 21. Project 16 - Menu Hamburger: Tudo bem, é hora de seguir em frente e começar a criar nosso próximo projeto. Nesta seção, vamos criar um menu de hambúrguer com HTML, CSS e Javascript. Vamos continuar descrevendo o projeto. Como você pode ver, temos aqui uma imagem de fundo em tela cheia. No centro da página, você pode ver o menu de hambúrguer com texto As letras têm fundo transparente e bordas. Em seguida, no canto superior direito da página, você pode ver o ícone do menu, que tem esse fundo animado agradável e legal. Se eu clicar no ícone do menu , o plano de fundo se expandirá e os itens do menu serão exibidos. Se eu passar o mouse sobre os itens , eles mudarão a cor dessa maneira legal e agradável Então, se eu clicar no X, padrão, os itens do menu serão ocultados Tudo bem, então eu acho que esse projeto será interessante e você vai gostar. Vamos continuar e começar. Eu criei uma nova pasta na área de trabalho que inclui uma pasta para as imagens. Vamos abrir a pasta e o código VS e seguida, criar nossos arquivos de trabalho para HTML, CSS e também para Javascript. Em seguida, vou abrir o arquivo HTM de índice e criar o documento HTM básico Vamos mudar o título. Vai ser um menu de hambúrguer. Vou vincular os arquivos CSS e também os arquivos Javascript. Precisamos da tag do script e do nome do arquivo no atributo source. Ok, vamos abrir o projeto no navegador. Em seguida, coloque o navegador e o editor lado a lado, assim. Em seguida, visitarei o site do Google Phones, porque usaremos os telefones do Google durante todo o projeto. Vamos procurar o telefone chamado Secular One. Vou selecionar o estilo, copiar o link e colá-lo no elemento principal. Agora podemos começar a criar a marcação HD. Vamos abrir o Deep Tag, que será o contêiner. Então, dentro do contêiner, vou abrir o Lending, no qual teremos H um elemento de cabeçalho, menu de hambúrguer Em seguida, vou criar um menu de hambúrguer, no qual vou inserir elementos com a navegação da classe Dentro da navegação, teremos o elemento link, que será o item de navegação que precisamos aqui. Conteúdo dos dados, atribua o texto home. Vamos inserir a página inicial aqui. Então, precisamos de alguns itens diferentes. A segunda será sobre o quarteirão. A próxima será uma galeria. Quanto ao último item de navegação , será Contato. Em seguida, precisamos do menu. Vou inserir aqui, Lines. Teremos três linhas. Cada desenvolvimento terá duas classes, linha, linha um, linha dois e linha três. Tudo bem, isso é tudo sobre a marcação HTML. Todos os elementos são criados. E agora temos que abrir o arquivo CSS e começar a escrever o CSS. Primeiro, vou selecionar cada elemento usando um asterisco e, em seguida, definir a margem e colocar os dois em zero Em seguida, precisamos definir a propriedade de dimensionamento da caixa. Vai ser uma caixa de fronteira. Então, precisamos que a decoração de texto não seja nenhuma. Além disso, vou definir a família de telefones para cada elemento, dois seculares, um sensor ref. Como você pode ver, os estilos padrão são aplicados aos elementos. Em seguida, vou definir o tamanho padrão do elemento HTM para 62,5% porque vamos usar M como unidade de medida Nesse caso, um M será igual a dez pixels. Vamos selecionar o contêiner. Vou definir sua largura. Vai ser 100% , então precisamos de altura, vai ser 100 pontos de altura Então eu vou cuidar da aterrissagem. Vamos definir que é com altura. Vou definir a largura para 100%. Quanto à altura, ela também será 100%. Precisamos expandir a aterrissagem. Em seguida, vou mudar o plano de fundo. Vamos usar o gradiente linear. A primeira cor será RGBA preta com opacidade 0,8 Quanto à segunda cor, precisamos aqui do mesmo valor RGBA, mas a opacidade será 0,9 Em seguida, precisamos selecionar a precisamos selecionar a Precisamos de uma imagem de fundo em tela cheia. Além disso, precisamos que a posição esteja no centro e depois não repita. Temos aqui a imagem de fundo em tela cheia. Na verdade, vou definir a propriedade dois do tamanho do plano de fundo , a próxima capa. Vamos usar os livros Flex. Precisamos centralizar o título para isso. Use o centro de conteúdo do Justify e os centros de itens de linha podem ver que o título está perfeitamente centralizado na página Em seguida, vou selecionar o elemento de cabeçalho H e personalizá-lo. Vamos definir o tamanho do telefone. Serão dez. Então precisamos de cor. Vamos definir a cor para C A, A cinco. Oh, é de cor amarela. Em seguida, vou criar um efeito de sombra. Vamos definir a sombra do texto 203 Ram, seis Ram. E a cor RGBA com opacidade 0.7 Em seguida, vou criar algum espaço entre as letras Vamos configurá-lo para 2,3 Ram. Agora precisamos de um fundo transparente para as letras. Para isso, vou usar uma propriedade chamada Webkit Text stroke Vai ser 0,1 Ram e a cor vai ser amarela. Além disso, precisamos definir a cor como transparente. Então, como você pode ver, o título parece muito bom. Em seguida, vou cuidar dos itens de navegação. Vamos selecionar Link Element e usar display None para ocultar os elementos do link. Agora temos que cuidar da navegação. Vamos definir com altura. A largura será, então também precisamos de alturas. Mude a cor do plano de fundo. Vamos usar aqui a cor 28231. Aqui temos o elemento abaixo. Vamos cuidar de sua posição. Vou definir a posição como absoluta. Então, precisamos da posição relativa para o contêiner. Porque vamos posicionar o elemento de acordo com o contêiner. Vamos definir a primeira posição para quatro. Quanto à posição correta, também será. Então precisamos de uma sombra de caixa. Vamos configurá-lo para 013. E a cor será preta com a opacidade 0,7 Aqui temos o elemento colocado no canto superior direito da Vamos criar animações CSS usando quadros-chave. Precisamos aqui nomear BG Anim em 0%. Vou definir o raio da borda para os seguintes valores O primeiro será de 63%, depois teremos 37%. O próximo será de 54%, depois 46%, então precisamos aqui 54%, depois 46%, então E 85% 48% depois 52% O último será 45% O próximo passo será 14% Vamos pegar esse código a partir daqui e depois alterar os valores que precisamos 40% depois 60% O próximo será 49% Então teremos 60% 40% e o último valor será 51% Então eu vou colocar sua próxima etapa, 28% Vamos pegar o código novamente, alterar os O primeiro será de 54%, depois 46% 38% 62%. Em seguida , teremos aqui 70% 30% e 51%. A próxima etapa será de 42%. Vamos alterar novamente os valores do raio da borda Precisamos aqui de 61% e depois 39% O próximo será de 55% 45% Em seguida, precisamos de 61%, depois 38% 62% 39% Vamos Será que 56% mudarão os valores. O primeiro será 61% 39% 67% 33% Depois teremos 70% 50% 50% e 30% O próximo passo será 70% Vamos alterar O primeiro será 50% e depois novamente, 50% 34% 66% Então precisamos aqui 56% 68% 32% e 44% O próximo passo, será 84% Vamos mudar o Serão 46% Então teremos 54% 50% Então, novamente, 50% Em seguida, temos 35% 61% 39% 65% Tudo bem Como parte da última etapa, estou em 100%. Precisamos dos mesmos valores que usamos na primeira etapa, os quadros-chave os Em seguida, precisamos da propriedade de animação. Vamos inserir o nome da animação. Então precisamos de duração, 7 segundos, linear e infinita. Como você pode ver, temos aqui esses elementos animados legais e legais. Vamos tirar você do ícone do menu. Eu vou definir essa posição. Vamos configurá-lo como absoluto. Então, precisamos de duas posições. Serão sete Ram. Então teremos aqui a posição correta. Vou configurá-lo para seis Ram. Defina a largura, será 3,5 Ram. Então, a altura é dois. Em seguida, defina o ponteiro do cursor e também precisamos da cor de fundo Vamos usar aqui a cor amarela. Aqui temos o ícone do menu. Agora temos que cuidar das linhas. Vamos definir com 23,5 Fram, então a altura será 0,2 Altere a cor de fundo, use aqui novamente, a cor amarela e, em seguida, elimine essa cor temporária a partir daqui. Aqui temos as linhas, agora temos que separá-las. Vamos definir a posição absoluta. Em seguida, precisamos selecionar a linha um. Defina dois. A posição será zero. Então precisamos da linha dois. Precisamos que a largura seja 60%. Então, a posição será de 0,9 Ram. Também precisamos da posição esquerda. Vamos configurá-lo com dois pontos de Ram. Aqui temos a segunda linha. Vamos pegar aqui a terceira linha. Vou pegar esse código, definir o nome da classe para a linha três. Então precisamos nos posicionar para ser de 1,8 Ram, tudo bem. Então, aqui temos o ícone do menu. Parece muito bom. Agora precisamos escrever um pouco de Javascript. Vamos criar uma variável. Vai ser o ícone do menu. Vou selecionar esse elemento usando o método seletor de consultas Precisamos especificar aqui o nome da classe. Vai ser o ícone do menu. Então, precisamos de outra variável. Vai ser um menu de hambúrguer. Vamos mudar o nome da classe. Precisamos de um menu de hambúrguer. Em seguida, adicionarei um ouvinte de eventos ao ícone do menu com um evento de clique Além disso, temos que passar aqui a função Calbeck que será executada Depois de clicar no elemento ao clicar, precisamos adicionar uma nova classe ao menu de hambúrguer usando o método Togo O nome da classe será, digamos, mudança. Agora temos que usar esse nome de classe no arquivo CCs para criar novos estilos, que serão aplicados assim que clicarmos no ícone do menu Vamos usar o Change with Navigation. Depois de clicar, precisamos mudar. A posição superior será de 50% , então a posição correta também será de 50%. E precisamos centralizar o elemento usando transform translate. Os valores serão 50% e depois -50%. Assim que clicarmos no ícone, o elemento será colocado no centro, a navegação Agora temos que aumentar o tamanho do elemento. Vamos definir com 200%, então a altura também será de 200% Também precisamos postar a animação. Para isso, vou usar uma propriedade chamada animation play state e ela será publicada. Se eu clicar, o elemento será expandido a animação será interrompida. Agora temos que esconder essas barras de rolagem. Para isso, vou usar overflow hidden. Agora não temos aqui o scroll Bs. Em seguida, vou adicionar aqui a transição. Para tornar o efeito mais suave, precisamos de algum tempo de atraso e também de uma função cúbica mais ocupada para tornar o efeito mais Os valores serão 0,20 3,110,30 2,1 Novamente, também A posição correta será de 0,4 segundos. A duração será de 0,4 segundos. Então, precisamos de um tempo de atraso. Novamente, a função Cubic busier. Em seguida, teremos a transformação. A duração será de 0,3 segundos. Então, precisamos de um tempo de atraso. Em seguida, precisamos que, com a duração de 0,8 segundos, o tempo de atraso será de 1 segundo. E, novamente, precisamos da função cúbica mais ocupada. Em seguida, vem a altura de 0,8 segundo, 1 segundo. E a mesma função de ser cúbica. Na verdade, é isso. Como você pode ver, temos aqui esse efeito agradável e legal. A navegação está se expandindo dessa forma bacana. Vamos pegar a transição e adicionar aqui. Por padrão, vamos organizar o código, depois eliminar o tempo de atraso e alterá-lo. Faça com que seja 1,1 segundo. Precisamos aqui novamente, 1,1 segundo. Em seguida, vem a transformação. Vamos alterar o tempo de atraso. Vai ser 1,1 segundo. Quanto à largura, precisamos aqui de 0,7 segundo e depois 0,4 segundo quanto à altura. Vamos adicionar aqui os mesmos valores. Agora, se eu clicar e fechar, chegaremos aqui aos belos e legais efeitos animados. Ok, agora temos que cuidar das linhas. Vamos começar com a linha um. Precisamos que duas posições tenham 0,9 grama. Então, precisamos transformar a função Rotate. O valor será de 45 graus. Em seguida, precisamos da linha dois com a mudança de classe definindo a opacidade como zero e a viabilidade, precisamos ocultar a segunda linha Quanto à terceira linha, precisamos aqui de duas posições para serem 0,9 Ram. Em seguida, a propriedade de transformação terá que girar a função com o valor de -45 graus Depois de clicar aqui, um pequeno problema. Sim, precisamos mudar o nome da classe. Agora temos aqui um botão de fechamento x ao clicar. Vamos adicionar aqui a transição. No primeiro segundo, eu também pego a função cúbica mais ocupada Além disso, precisamos aqui transformar 0,3 segundo, 1,6 segundo. Então eu vou copiar, na verdade, precisamos aqui da transição e não da transformação. Vamos copiar o código e colá-lo aqui. Depois de clicar, obteremos essa transformação interessante do ícone do menu. Eu acho que parece muito legal. Em seguida, vamos usar a transição para a primeira linha. E o tempo de atraso será de 1,6 segundos. Além disso, precisamos de um ponto de duração de 1 segundo sem tempo de atraso. Em seguida, use a transição para a segunda linha. Por padrão, precisamos do ponto de opacidade de 1 segundo e do tempo de atraso de 1,6 Vamos copiar o código. Na verdade, precisamos dele para a linha três. Agora, se eu clicar, chegaremos aqui. Esse fato agradável e interessante. Ok, vamos cuidar dos itens de navegação. Vou exibi-las de volta. Vamos personalizar os elementos do link. Vou usar livros flexíveis com o centro de conteúdo do Justify. E então precisamos mudar a direção. Vamos criar a coluna e, além disso, precisamos também do centro dos itens de linha. Como você pode ver, temos aqui os itens de navegação. Vamos definir o tamanho da fonte para sete Ram. Então a cor será CCC. Altere o espaçamento entre letras. Vamos configurá-lo para 0,3 Ram. Em seguida, precisamos da margem inferior. Vamos fazer com que seja um Ram. Aqui temos os itens de navegação. Eles estão lindos. Vamos selecionar a navegação seguida pelo link. E então, antes do desenvolvimento, o conteúdo será o conteúdo de dados de atributos que usamos no elemento HTML. Então eu vou definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai. Vamos definir a posição como zero. Então, a posição da perna também será zero. Vou definir a cor para amarelo. Vou definir a cor para B, D nove. Então, a largura será de 100%. Aqui, forçamos o elemento. Vamos definir a largura como zero e depois ocultar o elemento usando a bainha de transbordamento Precisamos que o espaço em branco seja p. Em seguida, precisamos selecionar a navegação A com o mouse seguido pelo elemento anterior Ao passar o mouse, temos que alterar a largura. Vai ser 100%. Então precisamos que você transição com 0,6 segundo esgotado. Depois de passar o mouse, obteremos esse efeito agradável e interessante quando eu fechar a navegação Então teremos aqui um pequeno problema que precisamos aqui, opacidade zero e visibilidade Em seguida, vou usar a mudança, seguida pelo link de navegação. Precisamos mostrar de volta os itens. Agora temos melhores resultados, mas precisamos aqui fazer a transição de todos os 0,5 segundos e o tempo de atraso de 1,5 segundos. Precisamos fazer a transição por padrão em todos os 0,5 segundos. Agora, se eu clicar, obteremos resultados bons e interessantes. Tudo funciona perfeitamente e, com o projeto, terminamos. Vamos seguir em frente. 22. Project 17 - Cabeçalho de site com slideshow e menu de navegação: Ok, então é hora de seguir em frente e criar nosso próximo projeto. Nesta seção, criaremos um cabeçalho de site com uma apresentação de slides e menu de navegação. O projeto será criado com base em HTML, CSS e Javascript. Então, vamos continuar descrevendo o projeto. Como você pode ver, o projeto é sobre comida. Temos aqui alguns slides diferentes que incluem imagens de comida, alguns títulos e o parágrafo E também temos aqui que o botão tem um efeito de foco agradável e legal O número consiste em um logotipo e alguns itens de navegação que têm esse efeito de foco agradável e interessante Além disso, no canto superior direito, temos um ícone de menu com efeito de foco Se eu clicar nele, a barra lateral aparecerá. Se eu clicar aqui, os itens de navegação serão exibidos bem. Vamos fechar a barra lateral. Na verdade, o projeto responde a diferentes tamanhos de tela Se eu inspecionar a página e mudar para o modo responsivo e verificar o projeto em diferentes tamanhos de tela , você descobrirá que o projeto é Fica bem em diferentes tamanhos de tela. Você aprenderá sobre web design responsivo. Tudo bem, então vamos falar sobre o projeto. Vai ser um grande problema, mas espero que você goste e aprenda coisas novas. Vamos começar. Eu criei uma nova pasta na área de trabalho. Vamos abri-lo no código VS e, em seguida, criar nossos arquivos de trabalho. Precisamos de HTML com pontos de índice e, em seguida, estilizar CSS. Além disso, precisamos de um arquivo para o script Javascript JS. Vamos abrir o arquivo HTML com pontos de índice e criar o documento HTML básico. Vou mudar o título, vai ser a página de destino, depois vou vincular os arquivos CSS e Javlscript Vamos abrir o script e especificar o nome do arquivo múltiplo no atributo source Em seguida, vou abrir o projeto no navegador usando o servidor ativo. Em seguida, coloque o navegador e o editor lado lado para tornar nosso processo de trabalho mais conveniente e simples Vou visitar o site do Google Phones, porque usaremos alguns telefones do Google ao longo deste projeto. Vamos pesquisar um telefone do Google chamado Fiel One. Vou selecionar o estilo. Em seguida, vou procurar outro telefone. Vai ser tinta, antiqua, não sei como pronunciar esses Vamos selecionar esses estilos, depois copiar o link e colá-lo somente na cabeça. Tudo bem, em seguida, vou pegar o CDN para telefones asômicos, porque vamos usar Vamos copiar o link, a tag de link aberto no elemento principal e colar aqui o CDN Tudo bem, estamos prontos para começar a construir um projeto. Vamos criar um contêiner no qual eu vou ter empréstimos Então, não vou abrir nenhum elemento com a parte class now. Vamos inserir uma tag que será o logotipo. O logotipo consistirá em um pontomicon, que será um utensílio sólido, A. Em seguida, teremos a navegação. Quero dizer, os itens que precisamos aqui, elementos de link. O primeiro vai estar em casa. Depois, vou duplicá-lo algumas vezes e alterar os itens O segundo será sobre. Então, teremos comida. Vou visitar sua galeria. Em seguida, o próximo item será bloqueado. Quanto ao último, vou entrar em contato insitu Depois disso, temos os itens de navegação necessários. Crie o ícone do menu, precisamos aqui de duas linhas com as classes linha e linha um, e também a linha dois. Depois da navegação, vou criar slides. Vamos abrir uma etiqueta. Será um slide e terá outra aula. No primeiro slide, precisamos aqui do invólucro da imagem do slide. Em seguida, a imagem em si. Vou selecionar a imagem da pasta de imagens. Precisamos de comida. Em seguida, teremos um banner. Ele consistirá em H, um elemento de cabeçalho com o título da classe PG. O texto será Taste. Em seguida, teremos H dois elementos de cabeçalho com o título principal da classe. O texto vai ser uma comida incrível. Em seguida, teremos um parágrafo com a descrição da classe sobre a tarefa alimentar. Teremos aqui uma mensagem de texto da Tammy. Além disso, teremos aqui embaixo o slide da turma, PTN. Além disso, teremos aqui o atributo type e ele será pat Quanto ao texto, vou inserir mais sua visualização. Ok, em seguida, vou criar a barra lateral. Precisamos aqui do ícone do telefone , que será uma marca A X sólida. Vai ser o botão de fechamento. Em seguida, teremos a barra lateral. Não, precisamos de um botão com o aparador da aula, aliás, o texto será culinária Também precisamos do tipo de botão que será. Depois do botão, vou criar itens suficientes na barra lateral. Vou inserir seu elemento de link. Vai estar em casa. Vamos duplicá-lo algumas vezes. Na verdade, vou pegar esses links porque precisamos do mesmo conteúdo. Vamos colar aqui. Tudo bem, então, na verdade, com a marcação HTML, estamos quase terminando Vamos começar a escrever um pouco de CSS. Vou definir a margem e preenchimento de cada elemento como zero Em seguida, precisamos do tamanho da caixa. Vai ser uma caixa de fronteira. Então, vou definir a decoração do texto como zero. Precisamos de uma família telefônica, será uma. Em seguida, vou definir o tamanho do telefone do elemento HTML para 62,5% porque vamos usar M como unidade de medida Nesse caso, uma RAM será igual a dez pixels. Agora vou selecionar o contêiner. Na verdade, precisamos mudar aqui. O nome será container. Vamos definir a largura como 100%, pois a altura será 100 da janela de visualização Em seguida, vou colocar o pudim três carneiros nos quatro lados Depois disso, vou selecionar o pouso. Defina sua largura em 200% e, em seguida, a altura será 100%. Em seguida, vou selecionar slides e essas duas linhas aqui também Em seguida, precisamos de um slide. Precisamos com altura de 100%. Tudo bem, depois disso, vou selecionar invólucro da imagem do slide e usar novamente com altura 100%. Vamos duplicar esse código e usar com altura para a própria imagem Agora, o tamanho da imagem foi alterado. Vamos selecionar a barra lateral e ocultá-la por um tempo. Em seguida, vou selecionar, agora vou definir sua posição como absoluta. Então, precisamos de uma posição relativa para o elemento pai , que é uma aterrissagem. Vamos definir a largura para 100%. A altura será de dez Ram. Então eu vou usar livros flexíveis. Precisamos aqui justificar o espaço de conteúdo entre eles. Quanto aos itens do LN, vou colocá-los no centro. Em seguida, precisamos de acolchoamento. 05 Ram. Temos aqui a navegação. Vou definir a cor de fundo para CCC por um tempo. Agora podemos ver o ícone e os itens de navegação. Vamos nos livrar da cor de fundo. Em seguida, vou cuidar do logotipo. Vamos definir o tamanho do telefone para cinco Ram. Então precisamos do Webkit, traçado de texto. Vai ser 0,1 Ram. A cor vai ser branca. Quanto à cor em si, vou defini-la como transparente. Agora temos aqui esse fato bonito e legal. Vamos colocar o cursor no ponto. Tudo bem, depois disso eu vou cuidar da navegação. Quero dizer, os elementos do link. Vamos definir o tamanho do telefone para dois Ram. A transformação do texto será em maiúsculas. Vou definir a cor para branco. Precisamos de margem 03 Ram nos lados esquerdo e direito. Aqui temos os itens de navegação. Vamos criar um efeito excessivo usando pseudoelementos antes e depois Precisamos que o conteúdo esteja vazio. Em seguida, vou definir a largura para 100%. Em seguida, a altura será de 0,2 Ram. Precisamos de uma cor de fundo, ela será branca. Em seguida, vou definir a posição. Vai ser absoluto e precisamos de uma posição relativa para o elemento de link. Vamos definir duas posições para -0,5 Ram. Quanto à posição esquerda , será zero. Temos aqui as linhas. Agora precisamos da mesma linha na parte inferior dos links. Vamos usar o elemento after do I para alterar as posições de que precisamos (posição inferior). Agora temos aqui linhas para cima e para baixo. Vamos adicionar aqui a escala de transformação x zero. Precisamos escondê-los e exibi-los. Depois de passarmos o mouse sobre os itens, vamos passar o mouse sobre a classe e criar a escala um Também precisamos da mesma coisa para o elemento. Além disso, precisamos usar a transição para um efeito mais suave Depois de passarmos o mouse sobre os itens , as linhas serão exibidas Mas eles aparecem do centro. E precisamos mudar isso. Temos que mudar a origem da transformação. E temos que deixá-lo para o elemento anterior. E precisamos transformar a origem, diretamente para o elemento posterior. Agora, se eu passar o mouse, obteremos esse efeito de foco agradável e legal novamente esse efeito de foco agradável e legal que fica sobre os itens de navegação Em seguida, vou cuidar do ícone do menu. Vamos definir a largura para seis Ram. A altura será de dois Ram. Então eu vou cuidar das linhas. Vamos definir como 100%. Quanto ao De, será 0,4 Como precisamos alterar a cor do fundo, vamos configurá-la para branco. Temos aqui duas linhas e precisamos separá-las. Para isso, vou usar livros flexíveis. Precisamos exibir a flexibilidade seguida, a direção da flexão também será a coluna, precisamos justificar o espaço do conteúdo entre. E também alterar o Coursormke it point can, você terá Em seguida, vou criar efeitos de Hover. Precisamos selecionar a linha ao passar o mouse. Vamos definir a escala de transformação x 0,5 e usar a transição. Se eu passar o mouse, a largura das linhas diminuirá Mas precisamos de efeitos diferentes para a linha um e a linha dois. Precisamos mudar a origem da transformação. Vai ser o ideal para a linha um. Quanto à linha dois, vou virar para a esquerda. Agora, se eu passar o mouse , obteremos um resultado melhor Mas não é disso que precisamos, na verdade. Precisamos mudar o nome da classe agora, tudo funciona perfeitamente. Tudo bem, vamos conversar sobre a navegação. Vamos seguir em frente e cuidar dos slides. Vou definir a cor de fundo do invólucro da imagem para então precisarmos de um objeto adequado para as imagens. Vai ser coberto. E também vou diminuir a opacidade 2.3 Agora as imagens parecem muito melhores Vamos adicionar uma propriedade de índice à barra n, torná-la dez. Em seguida, vou selecionar uma bandeja que define a largura para 100 Ram. E a altura também será de 100 Ram. Vou definir a posição como absoluta. Em seguida, posicionamos o absoluto para o elemento pai, que é um slide, vou definir duas posições para 50%, então a posição será 50%. E então, para centralizar, precisamos transformar a tradução -50% e novamente 50% . Ok, depois disso, vou selecionar o título PG Vamos definir a posição, vou torná-la absoluta. Em seguida, precisamos posicionar 20% à esquerda, a posição será 50%. Para centralização horizontal, precisamos transformar translate x -50%. Aqui temos o título, vamos definir a família telefônica como Inknut Antique Então, o tamanho do telefone será de 20 Ram. Em seguida, vou usar o traçado de texto do Webkit, precisamos de um fundo transparente e da borda precisamos de 0,05 E a cor vai ser branca. No próximo minuto, a cor será transparente. Temos aqui o rumo. Na verdade, precisamos mudar aqui, esta carta. Agora, o problema está resolvido. Vamos definir o espaçamento entre letras para 1,5 Ram. Precisamos de algum espaço entre as letras. E então vou definir o Opacity 2.4. Acho que o título parece bem legal Vamos selecionar o título principal. Eu vou definir a posição para a posição absoluta vai ser 47% A posição esquerda vai ser 22% Então precisamos do tamanho do telefone, vou configurá-lo para um Em seguida, vou transformar o texto em maiúsculas. Vamos mudar a cor. Vou fazer branco, depois vou aumentar o espaço entre as letras. Vamos fazer com que seja 0,5 Ram. O título parece muito bom. Na verdade, vou adicionar aqui o peso da fonte. Vamos fazer 300, ok? Depois do título principal, vou cuidar do parágrafo. Vamos definir a posição como absoluta. Então, a posição inferior será 35%. Em seguida, vou definir a posição esquerda para 50%. E precisamos centralizar o elemento horizontalmente usando transform translate x -50%. Vamos definir a largura para Em seguida, vou definir o tamanho do telefone para 1,8 Ram. Altere os pesos do telefone, vamos configurá-lo para 300 Além disso, precisamos alinhar o texto no centro e, em seguida, a cor será branca Aqui temos o parágrafo. Em seguida, vou pegar aqui do fundo. Vamos definir a largura para 20 Ram. Então, a altura será de cinco Ram. Em seguida, vou definir a posição como absoluta. A posição inferior será 27%. Para a posição esquerda, vou definir como 50%. E, novamente , precisamos enviar para o elemento usando a função transform translate x -50%. A parte inferior é colocada no centro Em seguida, vou mudar a cor do plano de fundo, ela ficará transparente. Vou definir a borda 2.1 Ram e a cor será branca, o tamanho do telefone para 1,8 Ram. Em seguida, vou transformar o texto em maiúsculas. Crie também espaço entre as letras, faça com que seja 0,1 Ram. Depois mude de cor, vai ficar branco. Além disso, precisamos que o cursor seja um ponteiro. Em seguida, selecione Botão, seguido pelos quatro elementos. Vamos definir o conteúdo como vazio. Precisamos criar as partes brancas ao passar o mouse. Vamos definir a largura para 20 Ram. Então, a altura será de dez Ram. Vamos mudar a cor de fundo, tornando-a branca. Então a posição será absoluta, a posição esquerda será -14 Ram Quanto às duas posições, vou defini-la como zero. Em seguida, precisamos transformar com função de rotação na direção z. O valor será de 45 graus. Aqui temos os elementos brancos no lado esquerdo da parte inferior. Precisamos da mesma coisa: usando os elementos posteriores, precisamos dos elementos. Quero dizer, elementos brancos no lado direito. Vamos mudar a posição de que precisamos. Certo? Quanto às duas posições serem menos cinco quadros, temos a segunda parte no lado direito Vou criar o efeito de foco que precisamos aqui. Antes de mouse, vou aumentar a escala do elemento Vamos configurá-lo para 2.4. Precisamos da mesma coisa para o after s, os elementos. Vamos usar a transição para obter um efeito mais suave. Se eu passar o mouse, esses elementos aumentarão. Em seguida, vou selecionar Patton com mouse e vou mudar a cor do texto. Vamos torná-lo preto. Além disso, precisamos de uma transição com algum atraso, tempo de 0,3 segundos. Também precisamos de uma transição por padrão para o padrão. Mas, neste caso, sem transição, sem demora, precisamos adicionar. Aqui está a propriedade do índice com valor negativo para exibir o texto. Aqui temos o texto. Agora temos que esconder essas partes brancas fora do parton usando overflow hidden Agora temos aqui um efeito de foco agradável e legal. Tudo bem, vamos adicionar ao efeito de sombra de aterrissagem com valores de 01 Ram, três Ram. E a cor preta RGBA com a opacidade 0,7 Agora temos aqui um efeito de sombra agradável e fresco Na verdade, vou me livrar da barra de rolagem usando overflow heiden para o contêiner. As rolagem não estão mais visíveis Vou duplicar o slide algumas vezes. Teremos quatro slides diferentes. Vamos fazer algumas mudanças que precisamos aqui. Slide dois. Também mude o nome da imagem, e precisamos mudar os títulos e as Receitas Deliciosas Em seguida, precisamos aqui do slide três. Altere também o conteúdo dos títulos que precisamos aqui, aproveite Quanto ao segundo título , serão ingredientes frescos. Então, teremos aqui o slide quatro. Altere o nome da imagem e também altere o conteúdo dos Elementos do título. Teremos aqui Explore e depois Top Cuisines. Tudo bem, agora é hora de escrever um pouco de Javascript e fazer a apresentação de slides funcionar. Vou criar uma apresentação de slides variável, que será a função. Em seguida, precisamos selecionar slides e torná-los uma matriz usando o método de matriz. Precisamos aqui de slides usando o método seletor de consultas. Vamos especificar aqui o slide do nome da classe. Vou percorrer o console para ver a saída. Vamos chamar a função. Se eu inspecionar a página e depois mudar para a guia do console, obteremos aqui uma matriz que consistirá em quatro slides diferentes Como você pode ver, temos aqui desenvolvimentos com os nomes das classes e com os números de índice. Em seguida, vou criar uma variável chamada current, que será o contador. Vou defini-lo como um por padrão. Em seguida, precisamos aqui da declaração if na qual vou definir o seguinte. Se a corrente for maior que o comprimento de dois slides, quero dizer o número de slides, então temos que definir a corrente como um. Caso contrário, quero dizer, se a corrente for igual a zero, então temos que definir o comprimento atual dos dois slides. Além disso, precisamos aqui do operador de incremento atual mais mais. Precisamos aumentar a corrente em um. Em seguida, vou usar o método de intervalo definido. Eu chamo a função de apresentação de slides. Precisamos de 1.000 milissegundos. Em seguida, vou dar olhada nos slides usando o método de forragem Precisamos da declaração dela, na qual precisamos da lista um, temos que acessar o nome da segunda classe no slide. Então, precisamos do método split. Temos que dividi-lo e pegar o segundo item. Precisamos torná-lo numérico, então ele deve ser igual ao atual. Se essa condição for verdadeira, adicione ao slide os seguintes estilos CSS. Precisamos aqui de visibilidade visível e também de opacidade. Então, precisamos da declaração L. Se essa condição for falsa, então temos que ocultar esse slide usando visibilidade oculta e opacidade zero, ok Agora, como você pode ver, slides está funcionando. Os slides estão mudando com um intervalo de 1 segundo. Vou usar a transição para o slide com opacidade e a duração será de 0,3 segundos Agora os slides estão mudando mais suavemente, precisamos aqui. A cor de fundo deve ser preta para criar um efeito de desbotamento muito melhor Além disso, precisamos alterar o intervalo. Vamos alterar também a duração da transição. Agora temos aqui um resultado muito melhor e mais legal. A apresentação de slides está funcionando perfeitamente. Em seguida, vou cuidar da barra lateral. Vamos fixar a posição. Então, precisamos posicionar para ser zero. A posição correta também será zero. Então, a largura será de 50 Ram. Quanto à altura, vou fazer seja 100 vezes a altura do vaso. Em seguida, vamos mudar a cor do plano de fundo. Vai ser D DD. Aqui temos a barra lateral. Vamos usar a propriedade index para ocultar o ícone do menu. Agora, o problema está resolvido. Em seguida, vamos selecionar a barra lateral I Elements. Estou no botão X de fechamento I, na posição absoluta, e a posição superior será de dois Ram. A posição correta será de cinco Ram. Depois, vou aumentar o tamanho do telefone. Vamos fazer disso um Ram. Mude a cor do ícone. Vai ser 555. Além disso, precisamos que o cursor seja um ponteiro. Na verdade, o ícone não está visível. Vamos verificar o arquivo HTM do qual precisamos nos livrar daqui. Agora o ícone está visível e parece muito bom. Em seguida, vou cuidar da navegação. Vou definir a largura para 40 Ram. Então, a altura será de 15 Ram. Vou definir o soluto Border 2.1 Ram. E a cor será 999. Então, precisamos que a posição seja absoluta. A posição superior será de 50%, a posição preta será de 50%. Precisamos centralizar o elemento. Precisamos transformar e traduzir. -50% e novamente -50% Em seguida, vou selecionar o lado B, Vamos definir a largura para 40 Ram. Então, a altura será de 15 Ram. Vou mudar a cor do plano de fundo. Vamos configurá-lo como transparente. Em seguida, vou definir a fronteira como não. Além disso, precisamos que a família seja innut sansif. Em seguida, precisamos que o tamanho da fonte seja de seis ram. Vou transformar o texto em maiúsculas. Então, novamente, vou usar o traçado de texto do Web kit para tornar o texto mais agradável. Precisamos aqui de 0,1 Ram 222 e, em seguida, a cor será transparente Em seguida, vamos colocar o cursor no ponto. Temos aqui a parte inferior, que parece muito boa. Vamos mudar a altura da navegação. Faça com que seja de 60 rampas. Precisamos colocar os itens aqui. Vamos selecionar a barra lateral. Agora, os itens configuram a exibição para flexionar. Em seguida, precisamos que a direção flexível seja a coluna. Além disso, vou definir a posição como absoluta. Então, a posição superior será de 30%, deixe a posição ser de 50%. Vamos definir a transformação para traduzir X e o valor será -50%. Precisamos centralizar o elemento horizontalmente Vamos configurar o Text Align Center. Aqui temos os itens de navegação alinhados. Agora temos que selecionar Link Element e personalizá-los. Vamos definir o tamanho do telefone para três RAM então. A cor será 888. Então precisamos definir a margem para um B e zero. Precisamos transformar o texto em maiúsculas. Os itens estão lindos. Agora temos que criar um efeito de foco. Vamos adicionar aqui o mouse. Faça a aula, vou mudar a cor ao passar o mouse. Vamos configurá-lo para 444. E também use a transição para um efeito mais suave. Temos aqui um efeito de foco. Em seguida, vou esconder a barra lateral. Vamos definir a posição correta dois -50 Ram. Agora use Javascript para exibi-lo. Ao clicar, vou criar a barra lateral variável TN. Vamos selecionar esse elemento usando o método seletor de consultas. Especifique aqui o nome da classe, barra lateral, PTN. Vou duplicar esse código algumas vezes. A segunda variável será a barra lateral. Vamos mudar o nome da classe. Em seguida, teremos o ícone do menu. Além disso, precisamos fechar o botão X. Vamos selecionar esse elemento. Precisamos adicionar um ouvinte de eventos ao ícone do menu clicando em Evento com uma função de retorno de chamada Vou adicionar uma nova classe à barra lateral. Depois de clicar no ícone do menu usando o método, vamos chamar o nome da classe e navegar. Vamos duplicar esse código que precisamos remover. Precisamos aqui x fechar. Mas quando clicamos em X , precisamos remover a classe. Navegue. Ok. Agora vamos usar a navegação, seguida pela barra lateral Eu vou mudar a posição correta. Vamos fazer com que seja zero. E então precisamos de uma transição. Vou entrar aqui, então a duração será de 0,5 segundos. E também precisamos de uma função cúbica com os valores 100.1. Se eu clicar no ícone do menu , chegaremos aqui à barra lateral e ela Depois de clicar no botão fechar. Ok, agora precisamos esconder os itens. Digamos que a opacidade seja zero e a visibilidade oculta. Em seguida, vou alterar a altura do 32 15 Ram. Agora vou adicionar até mesmo um ouvinte ao botão da barra lateral com o evento de clique novamente Precisamos aqui de uma função de retorno de chamada. Depois de clicar no botão, temos que adicionar outra barra lateral usando o método total Vamos chamar a mudança de classe. Agora temos que selecionar a barra lateral. Agora, com a mudança de classe, temos que aumentar a altura ao clicar, vamos torná-la 60 Ram. E também use novamente a transição com os valores de altura. A duração será de 0,5 segundo. Agora, se eu clicar no botão, o elemento se expandirá. Agora temos que exibir os itens de navegação. Precisamos de sua mudança de classe, seguida pelos n itens. Precisamos definir a opacidade como uma e a visibilidade como viável. Em seguida, precisamos fazer a transição aqui. Serão todos 0,5 segundos e precisamos de um tempo de atraso de 0,5 segundos. Agora, quando eu clicar, os itens de navegação serão exibidos bem. Ok, então tudo funciona perfeitamente. Agora temos que tornar o projeto responsivo. Vamos mudar para o modo responsivo. Vou definir a largura e a altura para um tamanho de tela extra grande. E então vou encontrar os pontos de interrupção nos quais precisamos fazer algumas alterações Vou usar consultas de mídia CSS para tornar o projeto responsivo Vamos continuar e criar uma consulta de mídia CSS. Vou especificar a largura máxima como 1.200 pixels. Defina o lado do telefone do elemento H dem 250, 5% Vamos diminuir o tamanho da tela. Como você pode ver, os elementos ficaram menores após 1.200 pixels Em seguida, precisamos encontrar o próximo ponto de interrupção. Crie uma consulta de mídia CSS e especifique a largura máxima como 1.000 pixels. Vou definir o tamanho do telefone do elemento H tim para 50% para que tudo fique bem. Vamos selecionar o título do plano de fundo e definir o tamanho da fonte para 16 Ram. Em seguida, vou definir as duas posições para 25%. Em seguida, vou selecionar o parágrafo e definir a largura para 60 Ram. Acho que está tudo bem e precisamos encontrar o próximo ponto de interrupção. Vou criar uma nova consulta de mídia CSS. Vamos definir a largura máxima para 800 pixels. Vou diminuir novamente o tamanho da fonte do elemento H m. Vamos configurá-lo para 45%. Em seguida, vou selecionar a navegação. Quero dizer, vincule os elementos e defina a margem para 0,1 Ram. Em seguida, vamos cuidar do banner. Vou pegar o código daqui, alterar o tamanho do telefone, fazer com que seja de 14 Ram. Quanto às duas posições, vou chegar a 28%. Em seguida, vamos selecionar o título principal, definir o tamanho do telefone para sete RAM Quanto à posição esquerda, vou chegar a 25%. Ok, vamos em frente e encontrar o próximo ponto de interrupção. Vamos criar uma nova consulta de mídia do Cess. E especifique a largura máxima que será de 600 pixels. Vou definir o tamanho do telefone do elemento HTML para 40%. Em seguida, precisamos de navegação. Devo fazer com que seja escondido. Em seguida, precisamos do título de fundo. Na verdade, os dois títulos. Vamos fazer aqui algumas mudanças. Defina o tamanho do telefone para dez RAM. Então, as duas posições serão 33%. Quanto ao título principal, vou definir o tamanho do telefone para seis RAM Quanto à posição, vamos defini-la para 27%. Ok, acho que tudo parece muito bom E agora temos que tirar você do último break point. Vamos criar uma nova consulta de mídia CSS e especificar a largura máxima em 450 pixels. Vou definir o tamanho do telefone do elemento HTM para 35%. Além disso, precisamos que a barra lateral seja expandida em toda a página Vamos definir com 100% Quanto à posição correta, vou colocá-la em -100%. Depois de clicar, a barra lateral se expandirá para toda a página Em seguida, selecionarei o título principal e definirei o tamanho do telefone de 25 quadros como distância A posição esquerda será de 29%. Em seguida, selecionarei o parágrafo definido com 245 quadros Agora acho que tudo parece muito bom e, na verdade, com o projeto terminamos. É responsivo a diferentes tamanhos de tela. Espero que tenha sido interessante e você aprenda algumas coisas novas. Vamos seguir em frente. 23. Project 18 - Cartão de perfil: Tudo bem, então vamos seguir em frente e começar a criar um novo projeto. Nesta seção, vamos criar um cartão de perfil. O projeto será criado com base em HTML, CSS e Javascript. Vamos continuar descrevendo isso rapidamente. Como você pode ver, temos aqui um cartão com a imagem de uma pessoa. Abaixo, você pode ver o botão de adição. Se eu clicar nele, o cartão se expandirá e você verá os detalhes sobre a pessoa, como nome, posição, links de mídia social e assim por diante. O botão de adição foi alterado para entrar em contato comigo. Se eu clicar no botão Voltar , o cartão será fechado. OK. Então, essa parte sobre o projeto é simples, mas acho que será interessante e útil porque hoje em dia muitos sites precisam ter cartões de perfil. Vamos seguir em frente e começar. Eu criei uma nova pasta na área de trabalho na qual tenho outra pasta para imagens. Vamos abrir a pasta no código VS e criar os arquivos de trabalho para HTML, para CSS. Também precisamos de um arquivo para o script Java. Em seguida, vou abrir o arquivo index so mel e criar um documento H mel básico. Vamos mudar o título. Vai ser um cartão de perfil. Em seguida, vou vincular os arquivos CSS e Charles. Precisamos aqui da tag do script e do nome do arquivo no atributo source. Ok, vamos abrir o projeto no navegador usando o servidor ativo. E então eu vou colocar o editor no navegador lado a lado. Então, em seguida, visito o site do Google Phones. Como vamos usar telefones do Google durante todo o projeto, vamos pesquisar um telefone chamado punto Vou selecionar alguns estilos diferentes, depois copiar o link e colá-lo no elemento ocultar. Além disso, vou pegar o incrível link CDN do telefone Vamos usar ícones incríveis do telefone em todo o projeto. Vamos copiar o link daqui. Em seguida, abra o link, puxe o elemento cabeçalho e cole aqui o CDM Ok, então estamos prontos para começar a escrever a marcação HTML. Vou criar o contêiner que envolverá todo o conteúdo. Em seguida, teremos um cartão no qual vou inserir o Deep Tug, que ficará no topo desse elemento Para inserir o Cardmage, precisamos aqui da imagem. Vamos selecionar a imagem na pasta de imagens. Em seguida, vou inserir aqui o give verified, no qual vou inserir o fonossomicon, precisamos de uma Em seguida, vou criar a parte inferior com o cartão de classe BTN. Vamos especificar o tipo do elemento em que ele ficará na parte inferior. Em seguida, vou inserir seus elementos panorâmicos com a classe. Em seguida, precisamos de outro panelement com o nome da classe BTN text. Vou inserir o contato comigo Em seguida, vou criar a parte inferior do cartão. Precisamos de elementos de cabeçalho H one com o nome John Smith. Em seguida, precisamos de H três elementos de cabeçalho para a posição. Vai ser designer de produto. Em seguida, vou criar o desenvolvimento, que será a mídia social. Eu insiro aqui outro Deps, seja social Info. Vamos instituir elementos com os nomes das classes as marcas de FA vinculadas. Em seguida, precisamos de elementos span com o nome da classe. Vamos instituir alguns números e, em seguida, precisamos de outro elemento de amplitude com os seguidores da turma. Vamos instituir seguidores de texto. OK. Vou duplicar esse código duas vezes Vamos mudar os ícones fonéticos. O segundo será o FA Instagram. Eu vou mudar esses números. O terceiro será o FA Facebook. Vamos mudar o número. Ok, então está tudo pronto. Vamos começar a escrever CSS. Vou definir a margem e colocar cada elemento em zero, depois vou definir o tamanho da caixa como caixa de borda Em seguida, precisamos da família telefônica. Vai ser o Ubuntu San Serif. Vou definir o tamanho do telefone do elemento HTML para 62,5% para usar a RAM como unidade de medida Nesse caso, uma RAM será igual a dez pixels. Em seguida, vou selecionar a imagem superior do cartão que tem a largura definida como 12 Ram. Então, a altura também será de 12 Ram. Em seguida, vou selecionar a imagem em si. Vamos definir a largura para 100% Então, a altura também será 100%. Além disso, precisamos aqui de pés de objetos com o valor da cor. Agora a imagem ficou menor e agora podemos cuidar do contêiner. Vamos definir a largura para 100% e, em seguida, a altura será de 100 potes. Em seguida, vou mudar a cor do plano de fundo. Vamos usar aqui a cor 13124. Em seguida, vou selecionar o cartão. Vamos configurar para 35 Ram. Então, a altura será de 60 Ram. Em seguida, precisamos da cor de fundo, será 32365 Em seguida, vou definir a posição como absoluta. E precisamos de uma posição relativa para o elemento pai, que neste caso é o contêiner. Vou definir a posição superior 15%. A posição esquerda será 50%. E precisamos transformar translate x com -50% para centralizar o elemento horizontalmente Então, como você pode ver, o cartão está centralizado. Em seguida, vou definir o raio da borda para um Ram. Além disso, vou criar algumas sombras. Vamos inserir 03 Ram, seis Ram. E a cor vai ser preta com a opacidade 0.5 Temos aqui um belo efeito de sombra Ok, depois disso, vou selecionar o topo da carta. Vamos definir a altura para 25 Ram. Em seguida, vou definir a posição da imagem como absoluta. Precisamos de uma posição relativa para o elemento pai. Vamos definir a posição superior para cinco quadros. Então, a posição esquerda será de 50%. Novamente, precisamos centralizar o elemento usando transform translate x -50%, a imagem está centralizada Depois disso, vou fazer a imagem arredondada. Usando o raio da borda de 50%, a imagem ficou arredondada. Também precisamos de sombra de caixa. Vai ser 01 Ram, três Ram, e a cor vai ser RGBA Na verdade, temos aqui um pequeno problema, não vemos aqui o telefone, então, ícone, estou no cheque. Vamos dar uma olhada no código HT que precisamos aqui. Esses elementos. Agora , o problema está resolvido. Vamos voltar ao arquivo CSS. Selecione o desenvolvimento com a classe verificada. Vou definir o caminho para 2,5 Ram. Então, se a altura também for de 2,5 quadros, vou mudar o plano de fundo. Vai ser um gradiente linear. Vamos definir que a direção será duas, certo? E a primeira cor será 35c6, depois a segunda cor será três Cinco BP. Como você pode ver, temos aqui um bom plano de fundo. Vamos definir o raio da borda em 50%. Precisamos de um elemento arredondado. Também precisamos exibir bandeiras. E para centralizar o elemento, precisamos justificar o centro de conteúdo e um centro de itens de linha Então, como você pode ver, o ícone do Ponso está centralizado dentro do círculo Em seguida, vou definir a posição como absoluta. Então, precisamos que a posição inferior seja um Ram. Quanto à posição correta, vou torná-la zero. Tudo bem, depois disso, eu vou tirar o ícone. Vamos aumentar o tamanho do telefone. Vai ser 1,5 Ram. E mude a cor. Vou fazer com que seja branco. Agora, o ícone parece muito bom. Em seguida, vamos selecionar a placa BTN e definir a largura para 17 Ram Então, a altura será de 4,5 Ram. Em seguida, vou mudar o plano de fundo. Use novamente o gradiente linear. A direção será para a direita. A primeira cor será 82 62d2. Em seguida, a segunda cor será DC 561. Temos aqui um bom gradiente. Vamos definir a posição como absoluta. Então precisamos posicionar 22,5 a partir da posição do laboratório que será 50%. E então precisamos centralizar o elemento usando transform translate x -50%, o Batson está então precisamos centralizar o elemento usando transform translate x -50%, o Batson Em seguida, vou me livrar da borda padrão. Em seguida, vou torná-lo arredondado usando o raio de borda de três Ram Em seguida, vou definir box shadow 201m3 Ram. E a cor será GPA com a opacidade 0,3 Em seguida, vou colocar o cursor Tudo bem, depois disso eu vou selecionar mais, vamos definir a posição como absoluta. Então, as duas posições serão de 50%. Precisamos da posição 1,5 Ram. Em seguida, vou centralizar o elemento verticalmente usando transform translate Y -50% Além disso, vou girar o elemento na direção z com o valor de Vamos definir o tamanho da fonte para três RAM. A cor vai ser branca. Temos aqui x. Em seguida, vou selecionar o texto BTN. Vamos definir o tamanho do telefone para 1,6 Ram e a cor será branca. Eu coloquei o telefone em negrito. Em seguida, vamos criar algum espaço entre as letras. Além disso, vou definir a posição como absoluta. A primeira posição será de 50%, então a posição correta será de três Ram. Novamente, precisamos censurar o elemento, principalmente usando transform translate Y -50% Ok, a parte inferior parece muito boa Em seguida, vou cuidar do fundo. Vamos definir a altura para 35 Ram. Então precisamos de uma caixa flexível. Vou definir a direção da flexão para a coluna. Em seguida, vou alinhar os itens no centro. Quanto à propriedade de conteúdo justificado, vou configurá-la para espaçar uniformemente. Então, como você pode ver, os elementos estão alinhados verticalmente. Vamos definir o preenchimento nos cinco primeiros Ram. Em seguida, vou cuidar do elemento de cabeçalho H one, que é o nome que define o tamanho da fonte como três. Então, o peso do telefone será 300. Além disso, vou mudar a cor, torná-la branca. Em seguida, vou duplicar esse código e alterar o seletor que precisamos aqui. Três elementos de cabeçalho, o tamanho do telefone será 1,2 Então eu vou mudar a cor. Vai ser o D111. Então, precisamos de espaçamento entre letras de 0,1 Ram. Além disso, vou mover o elemento para cima usando margem, topo menos quatro RAM Tudo bem, depois disso eu vou cuidar das mídias sociais. Vamos definir a largura para 100%. Precisamos de uma caixa flexível para alinhar. Elementos horizontalmente. Vamos usar o justify content space uniformemente. Em seguida, vou selecionar as informações sociais de que precisamos novamente, caixa flexível Em seguida, temos que mudar a direção necessária para alinhar os elementos verticalmente Vamos colocar os itens da linha no centro, os elementos estão alinhados e agora temos que selecionar os elementos Vamos começar com seis Ram. Então, a altura também será de seis Ram. Vou mudar a cor do plano de fundo. Vamos usar o CCC. Então eu vou usar o Flexbox para centralizar os ícones, os ícones estão centralizados Em seguida, vou definir o raio da borda para 50%. Além disso, precisamos de pok shadow com os valores 01 Ram, três Ram e a cor será RGBA Vamos definir o tamanho da fonte para 1,8 Ram. Em seguida, altere a cor que será branca. Vamos nos livrar da cor de fundo temporária. Em seguida, vou selecionar as primeiras informações sociais usando o seletor de ID Vamos mudar a cor de fundo. Vou usar gradiente linear. A direção será duas, certo? Quanto à primeira cor, vou usar 0077b Então teremos 5107. Vamos duplicar esse código duas vezes, alterar os seletores do gráfico A cor do segundo ícone será 833ab, quatro. Quanto à segunda cor, será C13 584. Também precisamos aqui, a terceira cor será 13, ela seis. Tudo bem, vamos cuidar do terceiro item que precisamos aqui, 42672 Então, a segunda cor será 5581. Tudo bem, então todos os três ícones parecem muito bons. Em seguida, precisamos cuidar do entorpecido. Vamos definir o tamanho do telefone. Vai ser 1,8 Ram. Então, precisamos do peso da fonte, ela ficará em negrito. E também vou mudar a cor. Vamos fazer isso EEE. Então precisamos de margem. 1,5 Ram, 010,5 Ram e zero. Novamente, os números parecem muito bons. Em seguida, temos que cuidar dos seguidores. Vamos definir a cor dois AA. Certo? Na verdade, o cartão está estilizado Agora temos que usar o Javascript. Vamos criar um botão variável. Vou selecioná-lo usando o método seletor de consultas. Temos que especificar aqui o nome da classe. Vai ser um cartão BTN. Em seguida, precisamos de outra variável. Será o cartão selecionado. Agora vou adicionar o ouvinte de eventos ao botão com um evento de clique Também precisamos passar aqui a função de retorno de chamada. Vou adicionar uma nova classe ao cartão usando o método togal O nome da classe será alterado e temos que usar essa classe em CSS para criar novos estilos que precisamos usar ao clicar. Vamos mudar a altura do cartão. Serão 25 quadros. Em seguida, precisamos definir os cabeçalhos usando opacidade zero e Precisamos da mesma coisa para as informações. Também vou enviar uma mensagem de texto para Hyde PTN. Na verdade, vamos mudar a largura do padrão, torná-lo cinco. Então eu vou mudar a posição esquerda para 50%. Além disso, livre-se da função de rotação por um tempo Então, precisamos traduzir com -50% duas vezes. Tudo bem, então é isso. Agora precisamos aqui de uma mudança seguida pelo cartão. Vamos definir a altura, 260 Ram. Vou usar sua altura de transição e a duração será de 0,5 segundos. Se eu clicar, a altura do cartão aumentará. Tudo bem, em seguida eu vou tirar o botão. Vamos usar novamente a troca rápida seguida pelo carro, BTN, vou aumentar a largura , serão 17 Ram Vamos usar aqui a transição. Se eu clicar no botão , o tamanho dele aumentará. Em seguida, vou selecionar a alteração com mais, precisamos aqui da posição esquerda de 1,5 Ram. Além disso, vou girar o elemento de que precisamos primeiro traduzir Y -50% e depois girar a função Z com o valor Em seguida, use a transição para obter um efeito mais suave. Se eu clicar, o sinal de mais girará e o padrão se expandirá Na verdade, precisamos aqui ocultar, não o H. Vou mostrar o texto BTN de volta Então, precisamos aqui alterar o texto BTN. E temos que definir a opacidade uma e a visibilidade como visível Além disso, vou usar a transição. Precisamos aderir a um pequeno atraso, tempo de 0,5 segundo. Se eu clicar, tudo funcionará perfeitamente. Em seguida, vou cuidar dos títulos. Vamos selecionar a alteração seguida pelo elemento de cabeçalho H one. Vou exibi-las de volta. Vamos definir a opacidade como uma e a visibilidade como visível. E também precisamos de transição. O tempo de atraso será de 0,5 segundos. Se eu clicar, o primeiro título aparecerá bem. Vamos fazer o mesmo com os elementos do segundo título. Vamos mudar aqui o seletor, o tempo de atraso será de 0,6 segundos. Como você pode ver, os títulos são exibidos bem. Vamos fazer o mesmo com as mídias sociais. Vou selecionar a alteração seguida pelo seletor infantil de informações sociais Primeiro, vamos definir a opacidade uma e a visibilidade como visível Precisamos de uma transição aqui. Todos os três itens terão tempos de atraso diferentes e isso criará um bom efeito. Precisamos aqui de 0,8 segundos. Vamos duplicar esse código duas vezes, alterar os seletores do enésimo filho e também alterar o Precisamos de 0,9 segundos e 1 segundo. Na verdade, temos que mudar aqui o número. Agora, se eu clicar, tudo funcionará perfeitamente. E temos aqui um cartão de perfil bonito e legal. Tudo bem, espero que tenha sido interessante, você gostou desse projeto. Vamos seguir em frente. 24. Project 19 - Entre / formulário de inscrição: Tudo bem, então é hora de seguir em frente e criar nosso próximo projeto. Nesta seção, criaremos um formulário de assinatura moderno e interessante O projeto será criado com base em HTML, CSS e Javascript. Como você pode ver, o projeto tem um design moderno e incrível. Por padrão, temos aqui um formulário de signum. O formulário em si tem um fundo bonito com formas diferentes. No lado esquerdo, você pode ver a planta. Então temos aqui um título seguido pelos campos de entrada. Além disso, tenho aqui uma marca de verificação personalizada. Abaixo, você pode encontrar alguns links de mídia social. Se eu clicar no link de assinatura , chegaremos aqui ao formulário de assinatura com apenas dois campos de entrada. Se eu clicar no formulário de inscrição , voltaremos ao formulário de inscrição. Tudo bem, então vamos falar sobre o projeto, vamos começar. Eu criei uma nova pasta na área de trabalho na qual tenho uma pasta para as imagens. Vamos abrir o projeto em código BS e, em seguida, vou criar nossos arquivos de trabalho. O primeiro será o índice do HTML. Em seguida, teremos um arquivo para CSS. E também precisamos de um terceiro arquivo para o script Javascript JS, abrir o arquivo HTM de índice e criar a estrutura HTM básica Eu vou mudar o título. Será um formulário de login, inscrição. Em seguida, vou vincular o arquivo CSS. Também precisamos vincular o arquivo Gil Sky. Vamos abrir o script Tac. Especifique o nome do arquivo no atributo source. Ok, vamos abrir o projeto no navegador usando o servidor ativo. E também vou colocar o navegador e o editor lado a lado, assim. Vamos começar a criar o H DM na marcação. Vou abrir a tag div , que será o contêiner, que incluirá todo o conteúdo Então, precisamos de outro mergulho que será o plano de fundo Em seguida, precisamos de um invólucro de formulário no qual vou inserir a imagem Vamos selecionar Imagem na pasta de imagens. Vai ser uma planta. Vamos nos livrar do atributo Alt. Em seguida, precisamos criar H um elemento de cabeçalho. Adicione aqui o título do formulário de classe. Vou inserir aqui o seguinte texto. Preencha o formulário e faça parte da equipe. Em seguida, precisamos de elementos do formulário com o formulário de contato da turma. Vamos nos livrar do atributo de ação e inserir aqui um elemento profundo, que será o total de links Vou inserir aqui um elemento com o link de alternância de classe E também precisamos se inscrever em outra turma. Vamos inserir texto, se inscrever. Na verdade, precisamos nos inscrever e não entrar. Vamos duplicar o código, fazer login e também alterar o nome da classe. Precisamos fazer login aqui. Tudo bem, depois disso, vou criar um desenvolvimento que será composto por insumos Vamos abrir a tag de entrada com um texto de tipo e também com o campo de entrada do nome da classe. Além disso, precisamos de outra altura de turma. Vamos adicionar aqui o atributo de espaço reservado com o primeiro nome do texto Vamos duplicar a entrada T três vezes. Último nome. O próximo será um e-mail. Precisamos alterar o tipo e também o espaço reservado , será o endereço de e-mail Precisamos da tela. O próximo será o passaporte. Precisamos da tela. E também altere o atributo do espaço reservado. Vai ser um passaporte. Tudo bem, depois disso, vou criar uma caixa de seleção. Vamos adicionar aqui a classe Hyde. Vou inserir sua entrada com a caixa de seleção de tipo. Também precisamos da identificação dela. Vai ser um cheque. Depois do elemento de entrada, vou rotular para verificar se o texto está de acordo. Em seguida, precisamos do elemento span com o texto. Termos de serviço. Tudo bem Depois disso, vou criar o botão. Botão I Enviar onde a turma é enviada. O tipo será botão como texto. Eu vou me inscrever. Em seguida, precisamos das mídias sociais. Estou envolvido com a turma. Marcas A, FA, Facebook. Vamos duplicá-lo três vezes e alterar os nomes das classes O segundo será o Instagram. Então teremos o Twitter. Isso é para que o último ícone seja vinculado. Na verdade, todos os elementos são criados e agora vou pegar os links do CDN copiar o link daqui Em seguida, vou abrir a tag de link no elemento principal e inserir CDN no atributo de referência H. Como você pode ver agora, os ícones são exibidos. Em seguida, vou visitar o site do Google Phones. Porque vamos usar diferentes telefones do Google ao longo deste projeto. Vamos visitar o site e pesquisar, não é? Essa vai ser a primeira. Vou selecionar alguns estilos diferentes. Em seguida, vou procurar outro telefone onde ele será inclinado, p. Vamos selecionar o estilo, depois vou pegar o link e colá-lo no elemento principal Ok, vamos começar a escrever o CSS. Vou selecionar cada elemento usando um painel de asterisco, definir a margem e colocar os dois em zero Em seguida, precisamos definir o tamanho da caixa de acordo com a caixa, e também definir o contorno Em seguida, precisamos nos livrar da decoração de texto padrão e também alterar a família do telefone. Vai ser sincero. Além disso, vou definir o tamanho do telefone do elemento H ml para 62,5%. Nesse caso, um m será igual a dez pixels e usaremos M como unidade de medida Os estilos padrão são aplicados, agora temos que cuidar da imagem porque ela é muito grande. Agora, vamos selecionar o formulário, invólucro, a imagem e definir a exibição como nenhuma Tudo bem, é isso aí, a imagem está escondida. Agora podemos cuidar do contêiner. Vamos definir a largura como 100% e, em seguida, a altura do vaso de visualização será de 100. Vou mudar a cor do plano de fundo. Vai ser 9c287. Aqui temos o plano de fundo. Em seguida, vou selecionar PG. Vamos definir a largura, será 100% então a altura será uma perseguição de 50%, a cor do fundo será EEE Aqui temos o elemento. Vou definir o raio da borda em 50% depois em 00,50%. Agora vou cuidar da posição Vamos movê-lo usando translate 20%. E então precisamos -50% do elemento movido também Precisamos aqui da função de rotação na direção z, e o valor será de 15 graus. Eu acho que é isso. ocultar partes fora da página usando overflow hidden Agora temos aqui esse plano de fundo legal e incrível. Vamos continuar e cuidar do invólucro do formulário. Vou definir a posição como absoluta. Em seguida, precisamos da posição relativa para o elemento pai, que neste caso é o contêiner. Em seguida, vou definir a posição 50% e, em seguida, a posição esquerda será 50%. Vou centralizar o elemento usando transform translate com os valores -50% e novamente -50%. Como você pode ver, o invólucro do formulário está centralizado Vamos definir a largura para 70% e, em seguida, a altura será 80%. Vamos mudar a cor do fundo. Vou usar aqui a cor 25 a cinco a sete. Aqui temos o plano de fundo do invólucro de espuma. Vamos tornar o elemento arredondado usando o raio de borda de dois Ram Também precisamos de box shadow, os seguintes valores. 03 Ram, oito Ram. A cor será RGBA, cor preta com opacidade 0.6 Temos aqui um efeito de sombra agradável e fresco Depois disso, vou cuidar da imagem. Vamos configurar para 140 Ram. Mas então precisamos que a posição seja absoluta. A posição esquerda será de -50% Quanto à posição superior, vou defini-la para -20%. Temos aqui a imagem Vamos definir a opacidade para 0,5. Em seguida, precisamos de overflow hidden para o invólucro do formulário para ocultar as partes da imagem Agora parece bem legal. Vamos continuar e cuidar do cabeçalho do formulário. Eu vou definir a posição como absoluta então. A posição será de 19% de liderança. A posição será de 35% da família telefônica, será tilt, Priest, em letra cursiva A família telefônica mudou. Agora temos que aumentá-lo usando o tamanho do telefone. Vamos configurá-lo para cinco quadros. O peso vai ser 300. Precisamos mudar a cor. Eu vou para o branco. O título parece muito melhor. Vamos definir sua largura para 35 Ram. Então eu vou usar algum efeito de sombra. Precisamos de 01 Ram, duas Ram, e a cor será RGP, uma cor preta com opacidade 0,5 Aqui temos o título, que parece muito bom Vamos selecionar o formulário de contato, definir a largura para 35%, então a altura será 100%, vou definir a posição como absoluta, então as duas posições serão zero. A posição correta também será zero. Em seguida, vou mudar a cor do plano de fundo. Vamos ficar vermelho por um tempo. Então, aqui temos o formulário de contato. Vamos nos livrar dessa cor. A partir daqui. usar livros flexíveis para alinhar os elementos Vamos definir a direção da flexão para a coluna. Então, precisamos justificar o conteúdo com espaço de valor entre eles. Em seguida, vou usar pudim com valor sete Ram e depois dez Ram Então precisamos de sete RAM e, novamente, sete RAM. Agora temos o espaço dentro do elemento. Em seguida, vou cuidar dos links. Vamos definir o texto como uma linha dois. Certo, que temos aqui, os links no lado direito do elemento. Em seguida, vou selecionar Total Link. Além disso, precisamos de uma extensão total. Vamos definir o tamanho da fonte de 21,6 Ram. Então, o peso da fonte será 300. Vou definir a transformação de texto em maiúsculas. Então, precisamos de espaçamento entre letras, 0,1 Ram. Mude a cor, eu vou usar aqui. Cor 9287. Aqui temos os links. Na verdade, acho que estamos faltando aqui. Esse elemento de extensão, quero dizer, a barra aqui está. Em seguida, vou adicionar aqui o ponteiro. Agora também temos um ponteiro de curso para o elemento span. Em seguida, vou selecionar o giro e definir a marcha para zero e 0,5 Ram Precisamos de algum espaço entre os links. Em seguida, vamos nos inscrever, vou definir a cor 289663 Na verdade, será o link ativo. Em seguida, vou selecionar as entradas. Vamos definir a margem máxima para menos dois Ram. Então, precisamos de livros flexíveis. Vou definir a direção para a coluna Avançar, vou selecionar a entrada. Vamos definir a largura. Vai ser 100%, então a altura vai ser de cinco Ram. Em seguida, precisamos marchar , será um Ram e zero Então eu vou começar a colocar em um Ram. Em seguida, precisamos da cor de fundo. Vai ser 343539. As entradas parecem muito melhores. Em seguida, vou definir a borda 2.1 Ram sólida. E a cor será RGB 25053 vezes a cor branca com a opacidade 0,1 Aqui temos Em seguida, defina o raio da borda para 0,5 Ram. Também precisamos aqui do tamanho da fonte, que será de 1,6 Ram. Em seguida, mude a cor. Eu vou fazer isso EEE, a cor mudou Agora vou marcar a caixa de seleção. Vamos configurar a tela para flexionar. Precisamos de um centro de itens de linha, então vou definir a margem na parte superior para dois Ram. Em seguida, vou marcar a caixa de seleção, seguida pelo elemento de entrada. Vamos definir a aparência como nenhuma. Então precisamos, com, serão dois Ram. A altura também será de dois Ram. Em seguida, vou mudar a cor do plano de fundo. Vai ser 333. Aqui temos a caixa. Vamos adicionar aqui a margem no lado direito e configurá-la para uma RAM. Em seguida, precisamos do raio da borda. Vou configurá-lo para 2.2 Ram. Depois disso, vou selecionar os elementos de entrada e também o rótulo. Vamos definir o ponteiro para os dois elementos. Agora vou selecionar o rótulo e personalizá-lo. Agora vou selecionar a entrada com o ACDOClass marcado. Vamos definir a cor de fundo 258235. Depois de verificar, a cor de fundo da caixa mudará. Precisamos de uma transição aqui para tornar o efeito mais suave Se eu clicar, a cor de fundo mudará suavemente. Em seguida, vou selecionar Entrada com um elemento. Vamos definir o conteúdo como vazio. Em seguida, precisamos que a posição seja absoluta. Então, precisamos da posição relativa para o elemento pai, que é a entrada. Vamos definir a posição para -15% Então a posição esquerda vai ser 20% Eu vou definir a largura para 50% , então a altura vai ser 75% Em seguida, precisamos de borda, certo? E será de 0,2 Ram sólido. E a cor vai ser branca. Vamos duplicar esse código que precisamos aqui. Parte inferior da borda. Como você pode ver, temos aqui uma marca de verificação. Agora precisamos girar o elemento usando a rotação de transformação Z, o valor será de 45 graus Temos aqui uma boa marca de verificação. Em seguida, precisamos de opacidade zero e visibilidade oculta. Depois disso, vou selecionar o elemento de entrada com uma cola marcada e seguida pelo elemento afterdo. Depois que a entrada for verificada, precisamos exibir de volta a marca de seleção. Precisamos de opacidade 1 e visibilidade visível. Em seguida, adicione aqui a transição. Se eu clicar, teremos aqui essa aparência bonita e legal da marca de seleção. Tudo bem, vamos selecionar o rótulo e personalizá-lo. Vou definir o tamanho do telefone para 1,2 Ram. O chamador será DDD. Em seguida, selecionarei os elementos de extensão, que são colocados dentro do rótulo. Vamos mudar a ligação. 58235, OK. Agora tudo parece muito bom e agora podemos seguir em frente e cuidar do fundo. Vamos definir a largura para 100% , em seguida, a altura será de cinco Ram. Em seguida, vou mudar a cor do plano de fundo. Vamos usar aqui a cor D48 142. Em seguida, vou me livrar da borda padrão e, em seguida, alterar o tamanho do telefone, que será de 1,6 RAM. Mude o peso do telefone, vou configurá-lo para 300. Também precisamos de espaçamento entre letras, 0,1 m. Em seguida, precisamos de transformação de texto Vai ficar em maiúsculas , pois vou definir a cor como branca. Como você pode ver, a parte inferior parece muito boa. Em seguida, vamos colocar o cursor no ponteiro. Além disso, vou adicionar aqui o raio da borda, que será de 0,3 Ram Então precisamos aqui de uma sombra de caixa com os valores de 0,1 m1m e a cor será RGBA, cor preta com a opacidade 0,1 Ok, finalmente vou adicionar aqui a Serão menos quatro Ram. O botão parece muito bom. Vou criar um efeito de clique usando a pseudoclasse ativa de que precisamos aqui Transform translate y com valor 0.2. Se eu clicar no botão, obteremos esse efeito de clique agradável e legal Ok, vamos seguir em frente e cuidar dos ícones das mídias sociais. Vou selecionar Wrapper. Vamos definir com 100%. Em seguida, precisamos colocar, serão três RAM e 40%. Em seguida, precisamos de 0,0. Depois, vou configurar a tela para flexionar Precisamos justificar o espaço de conteúdo entre eles. Além disso, vou definir uma borda na parte superior, 2,1 Ram sólida. E a cor vai ser RGBA, cor branca com menor opacidade, 0.2 Ok, a seguir vou cuidar dos ícones Vamos definir para três Ram. Então, a altura será de três Ram. Em seguida, vou mudar a cor do plano de fundo. Vamos usar sua cor, 939695. Em seguida, vou definir o raio do portador 50% porque precisamos Em seguida, precisamos censurar os ícones usando livros flexíveis. Vamos usar o conteúdo justificado e os itens de uma linha. Em seguida, defino o tamanho do telefone para 1,6 Ram. Então, eu vou mudar de cor. Será 333c e também será um ponteiro do cursor. Tudo bem, tudo parece muito bom. Agora vou usar um pouco de Javascript. Vamos criar uma nova variável e chamá-la de login. Vou selecionar o elemento usando o método seletor de consulta. Vamos inserir o login da sua turma. Então, precisamos de algumas variáveis diferentes. O segundo será se inscrever. Então teremos seu contêiner. A última variável será enviada , quero dizer, o botão. Vamos adicionar ao elemento de login um ouvinte de eventos com um evento de clique Além disso, precisamos aqui de uma função de retorno de chamada que será executada assim que clicarmos no link de login Vou adicionar ao contêiner um novo método com add e isso será alterado. Vamos duplicar esse código que precisamos aqui, assinar uma vez. Em seguida, precisamos remover as alterações do elemento. Agora vou usar a mudança de classe no arquivo CSS para criar novos estilos, que serão aplicados assim que clicarmos no link. Precisamos aqui de uma mudança seguida do formulário de assinatura. Eu vou mudar a cor. Em seguida, vou selecionar com inscrição e alterar a cor. Precisamos definir o link ativo aqui usando essas cores diferentes. Depois de clicar, a cor mudará. Em seguida, selecionarei Alterar, seguido pela exibição da altura definida como nenhuma. Depois de clicar, dois campos de entrada e a caixa de seleção serão ocultados. Em seguida, vou selecionar Exibir e definir a transformação com a função de tradução. Temos que mover os elementos para cima em menos seis Ram. Agora, como você pode ver, temos um resultado muito melhor. Precisamos cuidar do fundo. Precisamos aumentá-lo. E também temos que mudar o texto. Vamos selecionar Alterar. Com a classe Submit, precisamos mover os elementos usando transform translate, Y -14 Ram Agora o botão se move para cima e parece muito bom. Ok, agora precisamos da mesma coisa com mudança de classe porque precisamos criar efeito de clique, precisamos aqui de -13,8 Se eu clicar, o botão terá efeito de clique. Ok, a última coisa que temos que fazer é mudar o texto. Depois de clicarmos no link, alterarei o conteúdo do texto do botão Enviar e ele entrará. Precisamos da mesma coisa lá embaixo. Nesse caso, precisamos alterar o login para se inscrever. Ok, agora tudo parece perfeito com o projeto, terminamos. Vamos seguir em frente. 25. Project 20: barra de progresso animada: Olá e bem-vindo ao nosso próximo projeto. Nesta seção, criaremos uma barra de progresso animada. O projeto será criado com base em HTML, CSS e Javascript. Na verdade, vai ser engraçado. Primeiro, vamos descrevê-lo rapidamente. Como você pode ver, temos aqui um cabeçalho carregado seguido pela barra de progresso, que agora está vazia. E, abaixo, temos dois botões diferentes, baixar e redefinir. Se eu clicar em baixar , a barra de progresso começará a ficar cheia. Além disso, o título será animado. Se eu clicar em redefinir , a barra de progresso deixará de funcionar. Tudo bem, então eu acho que o projeto será interessante e engraçado. Então, vamos começar. Eu criei uma nova pasta na área de trabalho, que agora está vazia. Vamos abri-lo no código VS e, em seguida, criar os arquivos de trabalho, precisamos de HTML de índice. Em seguida, o segundo arquivo será o estilo CSS. Além disso, precisamos de um arquivo para script Java ou S. Vamos abrir o arquivo HTML de índice e criar o documento HTML básico. Eu vou mudar o título. Vai ser a barra de progresso. Em seguida, vou vincular o arquivo CSS. Além disso, precisamos da tag de script para vincular o arquivo de script chav Vamos inserir o nome do arquivo no atributo source. Ok, vamos abrir o projeto no navegador usando o servidor ativo. Em seguida, coloque o editor no navegador lado a lado. Como em todo o projeto, vou usar os telefones do Google. Então, vamos visitar o site. Vou pesquisar telefones chamados bolhas rubicas. Vamos selecionar o estilo, copiar o link e colá-lo no elemento principal. Agora vou começar a escrever a marcação HTM. Precisamos de um contêiner, ele envolverá todo o conteúdo. Vamos abrir a tag, que será um invólucro da barra de progresso dentro desse elemento Vou abrir o carregamento de três tags de cabeçalho. Em seguida, teremos a barra de progresso na qual vou inserir a barra. Então eu vou criar patronos. Precisamos de padrões de invólucro e, em seguida, precisamos do próprio botão aqui, classes PTN, download. Duplique-o e altere o nome da classe. Reiniciar. Vamos inserir aqui o conteúdo. O primeiro será baixado. Quanto ao segundo , será reiniciado. É isso aí, sobre a marcação HD. Agora temos que começar a escrever o CSS. Selecione cada elemento como de costume, crie alguns estilos padrão. Precisamos de margem e preenchimento, ambos iguais a zero Em seguida, vou definir o tamanho da caixa para a caixa de borda. Precisamos de uma família telefônica, serão bolhas rubianas, o telefone que selecionamos Os estilos padrão são aplicados. Em seguida, vou definir o tamanho da fonte do elemento Htiml para 62,5%. Para usar a m como unidade de medida um, m será igual a m será igual Então eu vou tirar o contêiner. Vamos definir a largura, será 100%. Então precisamos de altura, será 100 de altura da janela de visualização Altere também a cor do plano de fundo. Vai ser 734. Em seguida, vou usar livros flexíveis. Para alinhar o conteúdo no centro, precisamos justificar o centro de conteúdo e alinhar o centro Como você pode ver, o conteúdo está bem colocado no centro Em seguida, vamos selecionar o wrapper Progress Bar. Eu vou definir a largura, vai ser 70 Ram. Em seguida, precisamos de livros de linho. Eu vou mudar a direção. Vai ser uma coluna. Precisamos alinhar os elementos verticalmente. Então, vamos usar o justify Content center. Em seguida, vou selecionar os elementos do título. Vamos definir o tamanho da fonte para cinco hm. A cor será 1182. Além disso, vou criar algum espaço entre as letras. Como você pode ver, o título parece muito bom. Vamos adicionar aqui a transformação de texto em maiúsculas. Então, precisamos de sombra de texto. Serão 0,5 Hm, três Ram. E a cor será preta com a opacidade 0,3 Agora o título parece muito melhor Vamos adicionar aqui a margem na parte inferior , serão três Ram. Ok, é isso mesmo. Sobre o título. Vamos continuar e cuidar da barra de progresso. Vamos somar com 100% e a altura será de 3,5 Ram. Precisamos de uma fronteira, será de 0,2 Ram. A cor sólida será 66, é verde. Em seguida, precisamos do raio da borda para tornar o elemento arredondado. Digamos 23 Ram. Além disso, precisamos colocar 0,3 Ram. Depois disso, vou cuidar do bar. Vamos definir para 100% , então a altura será 100%. Vou mudar o plano de fundo. Vamos usar o gradiente linear. A direção será duas, certo? Quanto à primeira cor, vou usar o Fd166 Então, a próxima cor será f476. Como você pode ver, temos aqui o bar. Precisamos torná-lo arredondado. Vamos usar o raio de borda de três m. Agora está bem bonito Precisamos de algum espaço na parte inferior. Vamos usar a margem. Quatro últimos Ram. Em seguida, vou selecionar os botões. Vamos definir com 100%. Além disso, precisamos usar a caixa flexível, justificar o espaço de conteúdo entre os botões alinhados e agora temos que personalizá-los entre os botões alinhados e agora temos que personalizá-los Vamos selecionar BTN. Vou definir a largura para 35% e, em seguida, a altura será 5,5 Vou definir a borda para o tamanho não definido do telefone para 1,8 Ram. Em seguida, precisamos de cor. Vai ficar branco pois vou criar algum espaço entre as letras. Em seguida, vamos definir o raio da borda para cinco Ram. Vou adicionar aqui a sombra da caixa com os pálidos 01 Ram, três Ram E a cor será preta com a opacidade 0.2 Também mude o curso ou torne-o Ok, agora temos que mudar o plano de fundo de cada um dos botões. O primeiro será baixado. Vamos usar o gradiente linear. A direção será para a direita. Quanto às cores, vou usar f476. Então o próximo será F D 166. O primeiro botão parece muito bom. Em seguida, farei o mesmo com o segundo botão, que é reiniciado. Eu vou mudar as cores. Vamos adicionar aqui o segundo 166. Ok, então é isso, todos os elementos são estilizados Agora precisamos do BTN ativo para criar o efeito de clique. Precisamos transformar translate Y 0.2 m. Agora, se eu clicar nos botões, obteremos aqui esse belo efeito de clique. Vamos definir a largura da barra zero, então eu vou. Crie animações CSS. Precisamos que sua barra de nome anim esteja em 0%. Precisamos que a largura seja zero Para 100%, vou definir a largura para 100%. Vamos definir a animação para a barra Anim. Então, a duração será de 10 segundos e também precisamos de linhas lineares e progressivas. Como você pode ver, a barra de progresso está se enchendo. Agora temos que criar outra animação. Vai estar carregando. Será que, para chegar a 0%, precisamos que a opacidade seja uma Com 25%, vou definir a opacidade como zero. Então eu vou duplicar esse código. Com 50%, a opacidade será uma, 75% precisamos que a opacidade Quanto aos 100%, precisamos de opacidade um. Se eu adicionar aqui a animação com os valores carregando anum, depois a duração, 2 segundos, cinco, quero dizer as cinco vezes, obteremos essa animação bonita e legal Agora é hora de escrever um pouco de Javascript. Vamos criar BTN de download variável. Vou selecionar a parte inferior usando o método Queryselector Em seguida, vou selecionar redefinir BTN. Vamos mudar o nome da classe. Em seguida, precisamos de outra variável. Vai ser um contêiner. Agora vou adicionar um ouvinte uniforme ao botão de download com o evento click Precisamos aqui de uma função de retorno de chamada que será executada Depois de clicar no botão, precisamos adicionar uma nova classe ao contêiner usando um método. A turma será mudada. Agora, se eu selecionar barra com mudança de classe e adicionar aqui a animação. Então, quando clicarmos no botão de download, a barra de progresso começará a funcionar. Em seguida, também precisamos da mesma coisa para o título. Vamos selecionar a barra de progresso, invólucro três com a alteração de Cl aqui, Animação Agora, como você pode ver, tudo funciona bem. Temos que programar o botão de reset. Vamos mudar aqui. O botão será reiniciado, BTN, e temos que remover a classe Change do contêiner Depois de clicar no botão de reinicialização , a animação deixará de funcionar. Tudo bem, isso é que tudo funciona perfeitamente. Espero que esse projeto tenha sido interessante e engraçado. Vamos começar a criar o próximo. 26. Project 21 - cabeçalho de site com animações: Olá e bem-vindo ao nosso próximo projeto. Nesta seção, criaremos um cabeçalho de site moderno e interessante com animações e um menu de hambúrguer O projeto será criado com base em HTML, CSS e Javskrit Na verdade, é o maior e um dos melhores projetos deste curso. Vamos continuar descrevendo o projeto. Como você pode ver, temos aqui um cabeçalho bonito e bonito para o site. Temos duas partes, esquerda e direita. Ambas as partes têm origens diferentes. No lado esquerdo, temos um quanto ao lado direito, há um fundo claro. No centro da página, você pode ver o título. É composto por duas partes. O lado esquerdo é largo. Já o lado direito tem um fundo transparente com uma imagem. Você também pode encontrar a mesma coisa para outros elementos textuais Aqui no lado direito, no canto superior esquerdo, você encontra o ícone do menu. Se eu clicar nele, os elementos se esconderão com efeitos de desvanecimento e um menu de navegação exibirá os itens de navegação com fundos bonitos e legais, transparentes e alguns efeitos de foco agradáveis Se eu clicar no ícone do menu , a navegação será fechada e os elementos serão exibidos novamente. Com efeitos de desvanecimento, o projeto responde a diferentes tamanhos de tela Se eu inspecionar a página, mude para o modo responsivo verifique se há tamanhos de tela diferentes no projeto Você descobrirá que ele fica bonito e responsivo em todos os tamanhos de tela diferentes Tudo bem, então vamos falar sobre esse projeto. Eu acho que você vai adorar. Então, vamos começar. Eu criei uma nova pasta na área de trabalho que inclui a pasta das imagens. Vamos abri-lo no código VS e, em seguida, criar nossos arquivos de trabalho. Precisamos de três arquivos. O primeiro será indexado com HTML, depois teremos o estilo CSS. Quanto ao terceiro, será um arquivo para script Javascript JS. Vamos abrir o arquivo HTM indexado e criar a estrutura básica do HTM Eu vou mudar o título. Vamos inserir sua página de destino e, em seguida, vincularei os arquivos CSS e JS. Precisamos aqui da tag de script, então temos que especificar o nome do arquivo no atributo de origem, mccain Vamos abrir o projeto no navegador usando o servidor ativo. Em seguida, vou colocar o navegador e o editor lado a lado. Para tornar o processo de trabalho mais simples e conveniente, vou pegar alguns links diferentes A primeira será a fonte, uma CDN incrível, porque usaremos alguns ícones incríveis do telefone durante todo o projeto Vamos pegar o link a partir daqui. Em seguida, abra a tag de link no elemento principal e cole o CDN aqui Além disso, vamos usar telefones do Google. Vamos visitar o site e, em seguida, vou pesquisar o Google Phone chamado signica negative Vamos selecionar alguns estilos diferentes. Em seguida, vou procurar outra fonte que será Stick, sem contas. Vamos selecionar estilos diferentes, depois copiarei o link e colarei no elemento principal. Tudo bem, estamos prontos para começar a criar o projeto. Vou começar com uma marcação HTML. Vamos criar um contêiner. Ele incluirá todo o conteúdo que precisamos aqui, ícone do menu. Ele consistirá em linhas. Teremos aqui duas linhas, linha um e a linha dois. Além disso, precisamos de elementos span com o menu da classe. E temos que inserir aqui o menu de texto. Precisamos de outro período e ele fechará. Ok, depois do ícone do menu. Vou inserir aqui elementos de navegação com a navegação do nome da classe Vou inserir aqui elementos de link. O primeiro vai estar em casa, depois vou duplicá-lo algumas vezes Vamos mudar os itens de navegação. A segunda será sobre, então teremos conteúdo. O próximo serão tutoriais. Quanto ao último, vou inserir o contato. OK. Após a navegação que vou abrir, Depth vai pousar, que está em outro mergulho, vai pousar para a esquerda, então precisamos pousar para a direita e para o lado esquerdo Tenha H um elemento de cabeçalho com o título principal do nome da classe. Também precisamos aqui de outro título principal à esquerda. Vou inserir aqui três letras. Em seguida, sobre o qual vou inserir H um título com o código de texto e Criar. Em seguida, vou inserir aqui um parágrafo com um texto fictício como desenvolvimento, que será um link Vou inserir um elemento com o texto. Saiba mais Além disso, vou inserir aqui o ícone de fontes, que será uma seta FA sólida FA. Logo depois disso, vou cuidar do lado direito. Precisamos aqui de ícones de mídia social. Vamos inserir o elemento. O primeiro será o Facebook de uma marca, depois teremos um Twitter. Quanto ao terceiro ícone, ele será um ícone de mídia social vinculado, depois. Vou adicionar elementos de cabeçalho H one com os nomes das classes. Título principal e cabeçalho principal. Certo, será a segunda parte do título principal. Vamos inserir aqui o resto das letras. Em seguida, precisamos de um texto no qual teremos três tecnologias, Open H, um elemento de entrega, a primeira será HTML Então teremos CSS e Javascript. Ok, então eu acho que é isso. Sobre a marcação HTML, a única coisa que precisa fazer é inserir aqui, aterrissar, escrever o plano de fundo, que estará vazio No momento, temos aqui todos os elementos e agora temos dois para escrever o CSS. Vamos abrir o arquivo CSS. Selecione cada elemento, defina a margem e coloque os dois em zero. Em seguida, precisamos que o tamanho da caixa seja a caixa de borda. Além disso, vou definir a decoração do texto como nenhuma Em seguida, vou definir a família de telefones. Vai ser sinal e negativo em san serif. Todos os estilos padrão são aplicados. Em seguida, vou definir o tamanho da fonte do elemento H mal para 62,5% porque vamos usar M como unidade de medida Nesse caso, um m será igual a dez pixels, os elementos ficarão menores. Agora vou cuidar do contêiner. Vamos definir a largura como 100% e, em seguida, a altura será de 100 pontos de visualização Em seguida, vou cuidar da aterrissagem. A largura será 100% A altura também será 100%. Além disso, vou mudar o plano de fundo. Vamos usar a função de gradiente linear. A primeira cor será preta com opacidade 0,5 Quanto à segunda cor, vou inserir novamente, cor preta com opacidade 0,4 Em seguida, precisamos selecionar a imagem da pasta de imagens Em seguida, vou definir que a posição será centralizada E também precisamos adicionar aqui sem repetir. Além disso, vou definir a propriedade de tamanho paro com a cobertura de valor Ok, aqui temos a imagem do parque. Em seguida, vou selecionar o homem, vamos definir a exibição como nenhuma. Vou me esconder por um tempo. Então precisamos de navegação. Eu também vou escondê-lo usando display none. Ambos os elementos estão ocultos. Sei que podemos cuidar da aterrissagem. Vamos selecionar a aterrissagem à esquerda. Vou definir a posição como absoluta. Então, precisamos da posição relativa para os elementos pais. Duas posições serão zero. A posição esquerda será zero. Então precisamos que a largura seja de 50% e a altura seja de 100%. Em seguida, vou duplicar esse código, alterar a classe, precisamos que você aterrisse corretamente Precisamos das mesmas propriedades, basta mudar da esquerda para a direita, ambas as partes estão alinhadas Depois disso, vou pegar o plano de fundo do lado direito. Vamos definir a largura para 100% A altura será 100% Eu vou definir a posição como absoluta. A primeira posição será zero. Quanto à posição correta, também vou torná-la zero. Em seguida, precisamos da cor de fundo. Vai ser 94e. O plano de fundo do lado direito é alterado. Agora eu vou cuidar da questão. Vamos definir a posição como absoluta. Então, a posição inferior será de dez Ram. Quanto à posição esquerda, vou fazer dez Ram. O elemento é colocado abaixo. Depois disso, vou selecionar H, um elemento de cabeçalho no about. Vamos definir o tamanho da fonte para seis Ram. Em seguida, vou colocar o texto em maiúsculas. Também mude a cor, vai ser branco. Em seguida, vou criar uma sombra, 0,5 Ram, uma Ram. E a cor vai ser preta com opacidade 0,5 Temos aqui o título Parece muito bom. A seguir, vamos pegar aqui o parágrafo. Defina o tamanho do telefone para 1,6 Ram. Então eu vou mudar a cor. Vai ser 94de. Então eu vou definir com 250 Ram. Também precisamos marchar um Ram, 03 Ram e zero Aqui temos o parágrafo. Vamos continuar e cuidar do link. Vou configurar a tela para flexionar. Então, precisamos de uma linha de itens, que será a linha de base Então precisamos do ponteiro do cursor. Em seguida, vou definir a largura, que será de 14 Ram. Depois disso, vou selecionar um elemento. Vamos definir o tamanho do telefone para 1,6 Ram. Então eu vou colocá-lo em maiúsculas, precisamos de cor, vai ser branco. Além disso, vou definir a margem no lado direito , será uma RAM. Precisamos de algum espaço entre o texto e a seta. Em seguida, vou cuidar da flecha. Vamos selecionar Elementos. Vou definir o tamanho da fonte para 1,6 Ram. Então precisamos de cor. Vai ser branco. Aqui temos a flecha. Agora vou criar o efeito de foco. Precisamos adicionar o mouse ao link. E então precisamos selecionar um elemento ao passar o mouse. Vou aumentar a margem no lado direito. Vamos configurá-lo para dois Ram. Eu também uso aqui a transição para tornar o efeito mais suave Vamos definir a duração de 2,3 segundos. Se eu passar o mouse, obteremos esse bom efeito. Ok, então vamos falar sobre esse elemento. Em seguida, vou selecionar o título principal. Vamos definir a posição como absoluta. A primeira posição será de 25%. Então, precisamos de uma família de fontes. Vai ser a segunda fonte, stick. Sem pílulas. San Serif. Em seguida, vou definir o tamanho do telefone para 20 Ram. Esses são os estilos padrão para ambas as partes. E agora vou selecionar o lado esquerdo. Vamos definir a posição correta para -1%. Depois, vou definir a cor como branca, pois precisamos da sombra Te, será 0,5 Ram, uma Ram E a cor será GPA, cor preta com opacidade 0,5 Temos aqui a primeira parte do Vamos selecionar o lado direito. Vou definir a posição esquerda para 1%. Depois, precisamos de sombra de texto 0,5 m1m e o RGBA 0,2 à direita, o lado direito não está visível Vamos definir o índice 2100. Então, aqui temos o lado direito. Vamos nos livrar da propriedade de índice e adicionar aqui. Além disso, precisamos que o peso da fonte esteja em negrito. Em seguida, vou colocar o texto maiúsculas e , em seguida, criar algum espaço entre as letras, transformando em três Ram. Agora, o título parece muito melhor. Temos que cuidar do fundo do lado direito. Precisamos de um gradiente linear. A primeira cor será preto RGBA com opacidade 0.2 Em seguida, precisamos novamente cor preta RGBA com opacidade 0.1 Agora temos que definir o 0.1 Agora temos que definir Precisamos da mesma imagem de fundo. Então, precisamos de 30% como posição. Além disso, vou usar o clipe de fundo da web K, que será texto. Além disso, precisamos do texto do webkit, da cor da pele. Vou torná-lo transparente. Se eu verificar, você verá aqui a imagem como plano de fundo do texto. Eu acho que parece muito bom. Tudo bem, vamos pegar esse código e colá-lo. Cidade onde temos o lado direito. Depois disso, vou cuidar dos ícones das mídias sociais. Vamos definir a posição do invólucro. Absoluto. Então precisamos que a posição seja de cinco quadros. A posição correta também será de cinco quadros. Então, precisamos de uma propriedade de índice 100 para exibir os ícones. Vou selecionar elementos, vou definir o tamanho do telefone para três RAM. Então, a margem será de 01,5 Ram. Em seguida, precisamos do Tech Shadow. Vamos configurá-lo para 0,5 Fram, um carrinho de bebê, e a cor será RGB, cor preta com opacidade 0,2. Em seguida, também precisamos do 0,2. Em seguida, também precisamos mesmo plano de fundo para os Vamos copiar o código. Adicione aqui o ponteiro do cursor. Como você pode ver, temos aqui ícones de fonte com a mesma imagem de fundo. Em seguida, vou cuidar do texto. Eu vou definir a posição. Na verdade, vamos pegar esse código. Mude para a posição. Precisamos aqui de seis Ram. Precisamos da posição inferior e da parte superior. Vamos mudar isso. Como você pode ver, os elementos são colocados abaixo. Em seguida, precisamos selecionar H, um elemento de cabeçalho. Defina o tamanho da fonte para oito RAM. Então, o peso da fonte ficará em negrito. Em seguida, vou definir a transformação de texto em maiúsculas. Então precisamos de The Shadow. Vai ser 0,5 Ram, uma Ram, com a cor RGBA preta com a opacidade 0,2 Então, novamente, pegue esse com a cor RGBA preta com a opacidade 0,2 Então, novamente, pegue E aqui, como você pode ver, os títulos parecem muito bons Diminuir a altura da linha será uma. E também precisamos de uma linha de texto no lado direito. Ok, tudo parece muito bom. Terminamos com os títulos do texto. Agora vou tornar o ícone do menu visível. Isso definiu sua posição como absoluta. Em seguida, precisamos que a posição seja de cinco quadros. Eu também vou fazer cinco quadros. Defina a largura, serão dez Ram. Então precisamos de altura, serão três Ram. Use também a propriedade index, torne-a 200. Em seguida, precisamos da cor de fundo. Vamos usar uma cor de fundo temporária. Aqui temos o ícone do menu. Vou selecionar Linha. Vamos configurar para 2,5 Ram. Então, a altura será de 0,2 Ram. Mude a cor do fundo, vamos configurá-la para nove para E. Aqui temos as linhas. Eu vou me livrar dessa cor de fundo. Agora que as linhas estão visíveis, precisamos separá-las. Vamos selecionar as linhas, definir a altura para 100% e , em seguida, precisamos de uma caixa flexível A direção também será a coluna, precisamos justificar o conteúdo com espaço de valor, mesmo que as linhas estejam bem separadas e alinhadas Depois disso, vou me equipar com os elementos de extensão. Temos dois elementos de rotação, menu e fechar. Vamos definir o tamanho da fonte para 1,8 Ram. Então, precisamos de transformação de texto. Também será em maiúsculas. Vou definir a cor 29 fURTE. Temos aqui elementos de amplitude. Vamos definir a posição como absoluta. Precisamos que a posição correta seja zero. Em seguida, vou configurar a exibição para flexionar o ícone do menu. Precisamos de um centro de itens de linha. Também justifique o espaço de conteúdo entre eles. Em seguida, vou colocar o cursor no ponteiro. Além disso, vamos criar espaço usando preenchimento. Vamos configurá-lo para zero e 0,5 m. Como você pode ver, os elementos do vão estão bem alinhados ao lado das linhas Vou selecionar fechar e definir sua posição para 100%. Agora, o segundo elemento de extensão acabou abaixo. Agora temos que usar um pouco de Javascript. Vamos criar uma variável. Vai ser um contêiner. Vou selecioná-lo usando o método seletor de consultas. Precisamos especificar aqui o contêiner do nome da classe. Em seguida, vou criar outra variável. Vai ser o ícone do menu. Vamos especificar aqui o nome da classe. Agora vou adicionar um ouvinte de eventos ao ícone do menu com um evento de clique Além disso, temos que adicionar aqui função de retorno de chamada que será executada assim que clicarmos no ícone do menu Vou adicionar uma nova classe ao contêiner usando o método togal, e o nome da classe será navigado Vou usar essa classe no arquivo CSS para criar novos estilos que serão aplicados aos elementos. Depois de clicar no ícone, vamos adicionar transformar a linha um com uma função de rotação Z. O valor será 135 graus. Além disso, precisamos traduzir aqui. Precisamos mover um pouco os elementos. O valor será 0,7 Ram. Vamos duplicar esse código, mudar o nome da classe. Precisamos da linha dois. A função de rotação Z será de 225 graus. Vamos ver, temos aqui o botão X. Agora, se eu adicionar aqui a classe navegue. E também use a transição com Cubic zer função clicando Em seguida, as linhas se transformarão no botão de fechamento X. Tudo bem, depois disso, vou selecionar Navegar. Seguido pelo menu. Vou definir a propriedade de transformação para traduzir a função Y com o valor 110%, quero dizer -110%, conforme necessário aqui Menu com transição com o ponto de tempo de atraso de 1 segundo. Vamos duplicar esse código, mudar o nome da classe. Precisamos aqui de 120% para fechar. Vou adicionar aqui a transição com transformação com a duração de 0,3 segundo. Em seguida, precisamos de uma transição para o menu com navegação. Além disso, precisamos da mesma transição para o mais próximo possível. Então, quando eu clicar, os elementos finos mudarão. Agora, a única coisa que precisa fazer é esconder esse elemento fino. Vamos enviar o overflow para muitos. Agora, como você pode ver, tudo funciona perfeitamente. Em seguida, vou cuidar do título principal. Vamos selecionar o título principal com a navegação. Defina a transformação para traduzir Y menos cinco quadros. Em seguida, precisamos de opacidade zero e visibilidade oculta. Além disso, vamos adicionar aqui a transição para um efeito mais suave. Depois de clicar, o título se esconderá com um belo efeito de desvanecimento Em seguida, vou esconder a história. Vamos selecionar o elemento com a classe navigate. Precisamos aqui transformar translate x five Ram. E também precisamos novamente de opacidade zero e visibilidade E, novamente, para um efeito suave, vamos fazer a transição com a duração de 1 segundo. Depois de clicar, a seção sobre se moverá em altura com efeito de desbotamento Em seguida, vou fazer o mesmo com o texto. Vamos selecionar o elemento com a classe Navigate. Defina transform para traduzir x menos pi fram. Além disso, precisamos de opacidade zero e visibilidade oculta. Novamente, use a transição para o ponto de duração de 1 segundo. Se eu clicar, os elementos se esconderão. Mas precisamos aqui de 1 segundo em vez de 0,1. Agora, como você pode ver, tudo funciona bem novamente. Agora precisamos da mesma coisa para as mídias sociais. Vamos selecionar elementos com nome de classe. Navegue e faça a mesma coisa que precisamos aqui. Opacidade zero e visibilidade oculta. E também use a transição com duração de 0,5 segundo. Se eu clicar, todos os elementos serão ocultados. Temos aqui bons efeitos de desvanecimento. Em seguida, vou esconder o fundo do lado direito. Vamos selecionar esses elementos usando a classe. Navegue. Vou definir a transformação para traduzir x 100%. Além disso, precisamos de opacidade zero e, novamente, visibilidade Em seguida, vou adicionar aqui a transição. Se eu clicar, o plano de fundo será movido para o lado direito. Precisamos esconder essas barras de rolagem. Vamos usar o transbordamento escondido para o pouso. Agora tudo funciona perfeitamente. Tudo bem, agora vou selecionar pouso com navegação. Para desfocar o fundo, precisamos filtrar Blar 1.5 Ram Você sempre pode ver que o fundo está desfocado. Na verdade, precisamos que o fundo do contêiner seja preto para melhorar os efeitos de desfoque Agora, como você pode ver, temos aqui resultados muito melhores e melhores Tudo bem, em seguida, vou adicionar a transição para tornar o efeito um pouco mais suave E também precisamos de algum tempo de atraso. Em seguida, precisamos de uma transição para o pouso por padrão. Agora, se chegarmos aqui, efeito polar com transição suave. Tudo bem, agora vou cuidar da navegação que estava oculta. Vamos definir a largura para 100%, então a altura será 100%. Vou definir a posição como absoluta. Então, precisamos de livros flexíveis. Vou mudar a direção e, em seguida, usar o centro de conteúdo do Justify e um centro de itens de linha Precisamos centralizar o conteúdo. Quero dizer, os itens de navegação no momento estão visíveis. Vamos adicionar aqui o índice com o valor 100. Agora, aqui temos os itens de navegação. Vou selecionar Link Elements. Vamos definir o tamanho do telefone 210 Ram. Então, o peso do telefone ficará alto. Além disso, vou transformar texto em maiúsculas. Em seguida, precisamos do Tech Shadow de 0,5 Ram, uma Ram, e a cor será preta com a opacidade 0,5. Em seguida, precisamos de margem, 0,5 E, na verdade, precisamos aqui de 0,5 Ram. Aqui temos os itens de navegação. Agora vou pegar o plano de fundo, que usamos algumas vezes. Vamos usar aqui o mesmo código. Vamos alterar o valor percentual que precisamos, 35% Como você pode ver, temos aqui a imagem de fundo dos itens de navegação. Vamos mudar a cor aqui. Vai ser branco com menor opacidade. Agora temos um resultado muito melhor. Ok, depois disso, vou criar um efeito de foco em Ho. Vou mudar o espaçamento entre letras. Vou aumentar o espaço. Agora precisamos de uma transição com a duração de 0,5 segundos. Agora temos esse efeito de foco agradável e legal. Está bem? Em seguida, vou ocultar a navegação por padrão. Vamos usar a opacidade zero e a visibilidade oculta. Vou exibi-las de volta. Depois de abrirmos o menu, precisamos navegar pelo nome da classe, seguido pela navegação. Além disso, precisamos da mesma coisa para o elemento link. Vamos definir a opacidade como uma e a visibilidade como visível. Em seguida, vou mudar a transição. Vamos adicionar aqui opacidade de 0,5 segundo. E também precisamos de um tempo de atraso de 1 segundo. Agora, quando abrirmos o menu , os itens de navegação serão exibidos. Tudo bem, livre-se desse código a partir daqui, porque vamos usar transição diferente para cada item. Vou começar com o primeiro usando o enésimo seletor de filhos Defina a transição. Precisamos do seu espaçamento entre letras com a duração de 0,5 segundo. Então, precisamos de opacidade 0,5 segundo e, em seguida, tempo de atraso de 1 Vou duplicar esse código algumas vezes. Vamos mudar o que a criança seleciona para o segundo item, precisamos de 1,2 segundo Então, para o terceiro item, será 1,4 segundo. Então teremos 1,6 segundos e, finalmente, 1,8 segundo. Se eu abrir o menu , os itens serão exibidos em ordem com um efeito agradável e interessante. Na verdade, tudo funciona perfeitamente e agora temos que tornar o projeto responsivo a diferentes tamanhos de tela Vamos continuar e mudar o projeto para o modo responsivo. Precisamos encontrar os pontos de interrupção nos quais devemos fazer algumas alterações em nosso projeto Vamos continuar e criar uma consulta de mídia CSS. Vou adicionar aqui comentários para responder. A largura máxima será de 1.600 pixels. Vou definir o tamanho do telefone para o elemento H demil para 55%. Isso tornará os elementos menores Em seguida, precisamos encontrar outro ponto de interrupção. Vamos definir a largura em 1.280 pixels. Acho que o projeto parece muito bom. Em seguida, vou definir a largura para 1024 pixels. Vamos continuar e duplicar esse código. Vou definir com 1.200 pixels. Quanto ao tamanho da fonte do elemento H, será de 45%. Os elementos ficaram menores e, na verdade, o projeto parece bom. Em seguida, vou diminuir a tela e encontrar o próximo ponto de interrupção. Vamos configurar o projeto dois para um iPod. Vou duplicar esse código, alterar o máximo para 900 pixels Quanto ao tamanho do telefone, vou definir dois 40%. Além disso, vou selecionar cerca de, quero dizer, o parágrafo, vamos definir com dois para dois RAM. Como você pode ver, tudo parece bem. Em seguida, vou diminuir a tela. Vamos definir com 2500 pixels, isso é o que o Hyde vai ser, 800 Vamos criar uma nova consulta de mídia CSS com Max de 700 pixels. Vou definir o tamanho do telefone do elemento HTM para 35% Em seguida, vou selecionar landing left e definir com 100%. Depois disso, vou para o arquivo Java script Criar nova variável Vai seguir em frente, certo? Vamos selecionar elementos usando o método seletor de consultas. Precisamos aqui, classe principal, título, certo? Vamos duplicar o código que precisamos aqui. Indo para a esquerda também. Ambos os elementos do cabeçalho são selecionados. Em seguida, vou criar uma nova variável chamada Design responsivo que será uma função de que precisamos Instrução if, na qual vou definir o seguinte A largura interna da janela é menor ou igual a 700 pixels. Então, precisamos do estilo correto do título. Não exiba nenhum. Se o tamanho da tela for menor que 700 pixels, precisamos ocultar o título no lado direito. Quanto à esquerda, precisamos fazer com que o texto explore. Além disso, precisamos da declaração L. Vamos pegar esse código. Na instrução L, precisamos de um bloco de exibição para o cabeçalho à direita. Para o cabeçalho à esquerda, precisamos que o conteúdo do texto seja x. Em seguida, precisamos de um ouvinte de eventos para o objeto da janela com o evento de redimensionamento E também precisamos aqui de uma função de retorno de chamada. Vamos chamar a função de design responsivo. E também precisamos chamar a função fora da declaração. Quando tornamos o tamanho da tela menor que 700 pixels, o lado direito, quero dizer, o título direito fica oculto. Em seguida, vamos selecionar o título principal à esquerda. E mudar a posição correta será de 50%. Além disso, precisamos centralizar o elemento usando transform translate x 50%. Em seguida, precisamos que o preenchimento no lado esquerdo seja de três Ram, o título é colocado no centro Vamos selecionar o plano de fundo do lado direito e definir a exibição como nenhuma, o fundo está oculto. Além disso, vou selecionar o título principal, junto com o texto H 1 e também o elemento de mídia social. Precisamos da cor de preenchimento do texto do kit web. A cor vai ser branca. Vou selecionar o título principal e definir o tamanho do telefone, 212 Ram Agora, como você pode ver, os títulos e também os ícones são brancos Na verdade, temos aqui um erro, precisamos de conteúdo de texto e não da tela. E a mesma coisa na declaração externa. Agora, o problema será resolvido. Temos aqui a segunda parte. Em seguida, vou selecionar sobre a mudança. A posição inferior será de 50%. Quanto à posição esquerda, será de 50%. Então, precisamos transformar translate x com -50%. Além disso, precisamos de display flex e temos que mudar a direção, será a coluna Vamos alinhar os itens no centro. Também precisamos definir que a largura será 100%. Na verdade, temos aqui algum problema. Sim, precisamos aqui da posição esquerda e não da esquerda do porteiro. Agora, o elemento é colocado no centro. Vamos mudar a tela do celular e criar uma nova consulta de mídia CSS. A largura máxima será de 450 pixels. Vou selecionar e definir a posição inferior 45%. Vamos mudar a tela e torná-la menor. Temos aqui a navegação, que parece boa. Não gosto dos efeitos aqui em telas menores. Eu vou cuidar disso. Vamos selecionar navegar com o título principal e definir transformar traduzir 50% e depois menos cinco Ram Agora acho que temos aqui resultados muito melhores. Na verdade, acho que para o projeto terminamos. Espero que tenha sido interessante e você tenha aprendido algumas coisas novas. Vamos seguir em frente e passar para o próximo projeto. 27. Project 22 - Slider de depoimentos: Tudo bem, então é hora de seguir em frente com a resposta para criar nosso próximo projeto. Nesta seção, vamos criar um controle deslizante de depoimentos Este projeto será criado com base em HTML, CSS e Javascript. Vamos continuar descrevendo isso rapidamente. Como você pode ver, temos aqui um controle deslizante de depoimentos. Quer dizer, no centro da página, você pode ver o cartão onde temos a imagem do cliente, depois a opinião do cliente, também o nome e a idade. No lado direito e esquerdo, você pode ver as setas Você pode clicar nas setas e nós mudaremos para os outros clientes Abaixo, você pode ver que esses são os controladores. Você pode clicar nesses pontos e obteremos o cliente adequado Ok, acho que o projeto será interessante e útil hoje em dia. Quase todo site tem essa seção. Você poderá aprender sobre como criar um controle deslizante de depoimentos Ok, então vamos começar. Eu criei uma nova pasta na área de trabalho na qual tenho uma pasta para as imagens. Vamos abrir o projeto e o código VS e, em seguida, criar arquivos de trabalho para HTML. Então, para CSS, também precisamos de um arquivo para o script Java. Vamos abrir o arquivo HTML de índice e criar a estrutura HTML básica. Eu vou mudar o título. Será um controle deslizante de depoimentos. Em seguida, vou vincular o arquivo CSS e também precisamos vincular o arquivo Javas Vamos inserir o arquivo com o nome do atributo source. Ok, vamos abrir o projeto no navegador usando o servidor ativo e depois organizar nosso ambiente de trabalho. Vou colocar o navegador e o editor lado lado, assim, para simplificar o processo Ok, vou corrigir o link do CDN do telefone porque vamos usar alguns ícones de SO do telefone ao longo deste projeto Vamos copiar o link , abrir a tag do link no elemento principal e colar o CDN no atributo de referência H. Além disso, vamos usar alguns telefones do Google. Então, vamos visitar o site do Google Phones. Vou procurar uma ligação telefônica. Pode? Vamos selecionar Estilos. Em seguida, vou copiar o link e colá-lo no elemento principal. Ok, estamos prontos para começar a escrever o código. Vou começar com a marcação HTML. Precisamos de um contêiner que envolva todo o conteúdo. Em seguida, precisamos de um invólucro de depoimentos, no qual vou abrir outro fundo, será o cabeçalho Dentro desse elemento, precisamos H três elementos de cabeçalho com o texto, nossos clientes. Em seguida, precisamos de H, um elemento de cabeçalho, que será um depoimento Em seguida, precisamos de estrelas. Vou abrir elementos com a estrela sólida de classe A. Precisamos de cinco estrelas. Aqui temos os ícones. Em seguida, vou inserir aqui depoimentos nos quais precisamos Então precisamos de um slide. Vou inserir aqui o plano de fundo do slide. Em seguida, o conteúdo do slide no qual vou inserir o elemento. Vai ser uma esquerda sólida. Então precisamos da direita. Em seguida, precisamos criar uma imagem de slide na qual vou inserir a tag de imagem. Vamos selecionar Imagem na pasta de imagens. Vai ser um cliente no IPG. Em seguida, o texto do slide no qual vou inserir. H, três elementos de cabeçalho, será um produto maravilhoso. Em seguida, precisamos de um parágrafo com um texto de Tammy. Além disso, precisamos de outro parágrafo no qual eu vou inserir o nome do cliente, o H. Depois disso, vou criar os controles. Vamos abrir, Deep vai ser um controle. E vou inserir aqui o elemento I, que será uma seta FA sólida FA para a esquerda. Então precisamos da seta para a direita. E também vou inserir seus pontos que serão criados pelos elementos span Tudo bem, então, na verdade, temos aqui um pequeno problema que precisamos adicionar aqui. Vai ser sólido. Agora, os Asmicons do telefone são exibidos, na verdade, com a marcação H demil Estamos desanimados. Vamos começar a escrever o CSS. Em primeiro lugar, como sempre, vou selecionar cada elemento e seguida, definir a margem e colocar os dois em zero. Em seguida, vou definir o tamanho da caixa para a caixa de borda. Também precisamos de uma família telefônica. Será o telefone chamado can it, que selecionamos no site de telefones do Google. Em seguida, vou definir o tamanho do telefone do elemento H mil para 62,5% porque vamos usar M como a unidade de medida um, a RAM será igual a dez pixels, todos os elementos ficarão menores. Em seguida, vou tirar você da imagem. Vamos definir com 215 Ram, então a altura será 16 Ram Em seguida, vou selecionar a imagem em si, definir dentro da altura. Vou definir com 200% a altura será de 100%. Além disso, precisamos de pés de objetos com cobertura de valor Agora a imagem ficou menor. Vamos começar a personalizar o contêiner. Vou definir com 100%, então a altura será de 100 partes de altura. Vamos mudar a cor de fundo. Vou usar gradiente linear. A primeira cor será 368661. Então, o próximo será 2964. Temos aqui um bom plano de fundo. Vamos usar livros flexíveis. Precisamos centralizar o conteúdo usando o centro de conteúdo justificado e o centro de itens de linha. Como você pode ver, o conteúdo é colocado no centro. Vamos selecionar o invólucro do depoimento. Vou definir a largura para 95% e depois a altura será 90%. Em seguida, precisamos da cor de fundo. Vou usar gradiente linear. A primeira cor será RGBA, cor preta com opacidade 0,7 Em seguida, precisamos novamente, cor preta com opacidade 0,5 Com opacidade 0,6 Então vou definir o cor preta com opacidade 0,7 Em seguida, precisamos novamente, cor preta com opacidade 0,5 Com opacidade 0,6 Então vou definir o URL da imagem de fundo. Vamos selecionar Imagem na pasta de imagens. Em seguida, vou definir que a posição será do sensor e também não precisamos repetir. Finalmente, vou definir o tamanho do plano de fundo para cobrir. Como você pode ver, temos aqui uma imagem de fundo bonita e legal para o invólucro Em seguida, precisamos de box shadow com valor 01, Bram five fram, e a cor será RGBA, cor preta com opacidade 0.4. Temos aqui um efeito de sombra agradável Em seguida, vou cuidar do cabeçalho do depoimento. Vamos definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que é o invólucro do depoimento Vou definir a posição superior para 5%, então a posição esquerda será 50%. Precisamos centralizar o elemento usando transform translate x com o valor menos 50% Em seguida, precisamos alinhar o texto no centro. Temos aqui o cabeçalho do depoimento. Vamos copiar o, selecione Colar aqui. E selecione H, três elementos de cabeçalho. Vou definir o tamanho do telefone para dois Ram. Então, o peso do telefone será 300. Além disso, precisamos de cores para CCC. Temos aqui o primeiro elemento do título. Em seguida, dupliquei esse código, altero o seletor que precisamos H um elemento de cabeçalho. Vamos definir o tamanho do telefone para cinco Ram. Em seguida, vou adicionar aqui a transformação de texto com o valor em maiúsculas também alterar a cor, será branco. Então, precisamos de espaçamento entre letras com o valor 0,4 Ram. Aqui temos o título. Em seguida, vou tirar os ícones de suposição do telefone. Vamos definir o tamanho do telefone para 1,6 Ram. Então a cor, vai ser RTB 255 a 2062, vai ser amarela Vamos definir a margem para 0,5 Ram. Temos aqui as estrelas. Eles parecem muito bonitos. Em seguida, vou cuidar dos controles. Vamos definir para cinco, então a altura será cinco Ram. Em seguida, precisamos da cor de fundo. Vou definir a cor de fundo 27854. Em seguida, vou definir a Opacidade 2.6. Em seguida, precisamos de um raio de borda de 50%, precisamos de controles arredondados Em seguida, vou configurar a exibição para flexionar porque precisamos centralizar as setas usando justify content center e line item center e line Como você pode ver, as setas são colocadas no centro dos círculos Vamos adicionar o tamanho da fonte, torná-la de três Ram. Então precisamos de cor. Vai ser 444 Além disso, vou definir a posição como absoluta. A posição será 50%. Além disso, precisamos transformar translate Y para centralizar as setas verticalmente com o valor -50%. E depois mudar o cursor, torná-lo Temos aqui os controles. Agora temos que selecionar controles com mph, seletores de gráficos e definir a posição esquerda da primeira seta para 15%. Vamos duplicar esse código Selecione a segunda seta e mude de posição. Precisamos da posição correta de 15% Como você pode ver, as setas estão bem alinhadas Em seguida, vou cuidar dos pontos. Vamos selecionar elementos de extensão. Em primeiro lugar, vou definir nós e altura. Vamos configurar os dois para um Ram. Então, precisamos da cor de fundo. Vai ser CC. Então, precisamos do raio da borda para arredondar os elementos usando 50%. No momento, os pontos não estão visíveis Vamos definir a posição como absoluta para o elemento pai. Em seguida, os potes e a posição serão 10% como let position, vou dizer que até 50%. E então precisamos centralizar os elementos usando transform translate x -50%. Em seguida, precisamos do Flexbox Aqui temos os pontos. Precisamos de algum espaço entre eles. Vamos fazer isso usando margem de 0,5 rm. E também vou colocar o cursor no ponteiro. Agora, os pontos estão bem bonitos. Vamos adicionar a classe ativa ao primeiro elemento de rotação. Em seguida, selecione o elemento de rotação ativo. Defina a largura para 1,5 e, em seguida, a altura será. 1,5 RAM. Precisamos que a cor de fundo seja branca. Então, como você pode ver, o ponto é maior. Precisamos centralizar os elementos verticalmente usando itens de linha Centro, ok, isso é tudo sobre os pontos agora. Em seguida, vou cuidar do slide. Vamos selecionar depoimentos definidos com 55%, então a altura será de 50 Ram No próximo minuto, posição absoluta, vou definir a posição para 50% depois a posição esquerda será 50%. E precisamos centralizar o elemento usando transform translate os valores -50% novamente -50%. Em seguida, vou adicionar Será 0,1 m sólido e a cor será branca. Aqui temos a borda, vamos duplicar o slide algumas vezes. Vou fazer aqui algumas mudanças. Precisamos mudar o nome da imagem, pois o nome da cliente será Mary Brown. Em seguida, precisamos do cliente três. O nome é Nick Jones e ele terá 27 anos. Precisamos do cliente quatro, o nome é Brown. Vamos mudar o H. que temos aqui. Última imagem, cliente cinco, e o cliente será John Smith, 25. Como você pode ver, este slide é exibido a seguir Vou selecionar o controle deslizante, definir a . Vou selecionar o controle deslizante, definir a altura em 100%. Em seguida, a largura será de 500%. Precisamos definir a flexibilidade da tela, para os slides sejam colocados horizontalmente Em seguida, vou selecionar o slide definido para 20%. Será 100% do invólucro Estou na quinta parte da embalagem. Vamos selecionar o fundo do slide e definir a largura em 70% e a altura será 65%. Vou mudar a cor do fundo. Vamos usar aqui essa cor verde. Em seguida, vou definir a posição como absoluta. Precisamos de uma posição relativa para o elemento pai. Em seguida, vou definir que a posição será 50% , a posição esquerda será 50%. E precisamos transformar, traduzir com os valores -50% e novamente -50% . Aqui temos o plano de fundo para este slide Vamos adicionar aqui, ou o raio. Serão dois Ram. Então precisamos de opacidade 0.7 Depois disso, vou selecionar o conteúdo do slide Vamos pegar o código daqui e colá-lo no conteúdo do slide. Mude a cor do bacon, vai ficar branco. Além disso, vou me livrar da opacidade. Então, precisamos de display flex. Além disso, precisamos aqui justificar conteúdo com o espaço de valores entre eles, precisamos de espaço entre os itens flexíveis Além disso, vamos adicionar aqui um centro de itens de linha. E então precisamos criar espaço usando preenchimento, 0,5 Ram. Em seguida, vou girar o fundo usando a função girar Z. E o valor será menos seis graus. Agora temos aqui resultados muito melhores e bons. Em seguida, vou cuidar do. Phonosomicon, vamos definir o tamanho do telefone para 12 Bram, então a cor Além disso, vou definir a posição como absoluta. Temos aqui as cotações e precisamos posicioná-las. Vamos primeiro fonossomicon usando enésima criança selecionar as duas posições que serão -20%. Quanto à posição esquerda, vou configurá-la para 10%. Vamos duplicar esse código 10%. Vamos duplicar Para o segundo fonossômico, precisamos da posição inferior -20% e da posição direita 10%. Como você pode ver, as Vamos continuar e cuidar do texto do slide. Vamos definir a largura para 70% e depois vou cuidar da imagem. Vamos definir o raio da borda para 3m03 Ram zero. Agora a imagem está bem bonita. Em seguida, vou selecionar a imagem do slide com os pseudoelementos posteriores Também precisamos de uma imagem de slide com o pseudo-elemento anterior. Precisamos criar uma boa fronteira. Vamos definir o quantum como vazio. Então precisamos estar 100% a altura será 100%. Então, precisamos, vamos defini-la como absoluta. Precisamos de uma posição relativa para o elemento pai, que é a imagem do slide. Em seguida, vou definir a borda para 0,2 Ram sólido. E a cor será RTB, uma cor preta com opacidade 0,4. Em seguida, precisamos do raio de borda três, Ram 03 Ram zero Ram É como o raio da borda da imagem. Em seguida, temos que cuidar das posições dos elementos antes e depois. Vamos começar com o elemento depois. As duas posições serão menos um Ram. Então, precisamos que a posição esquerda seja de -0,5 Ram. Vamos duplicar esse código, alterar o seletor que precisamos antes Vamos colocar os potes e posicionar dois menos um Ram. E a posição correta será de -0,5 Ram. Ok, agora os elementos estão bem. Precisamos aqui da propriedade do índice menos um. Agora temos aqui esse belo e legal fato da fronteira. Vamos selecionar o texto do slide com o elemento de título H três. Vou definir o tamanho do telefone para 2,5 Ram. Então, o peso do telefone será 300. Vou definir a cor para 111, depois vou definir a margem na parte inferior para uma RAM. Vamos continuar personalizando o parágrafo. Selecione o texto do slide com o seletor. Vou definir o tamanho do telefone para 1,4 Ram. O peso do telefone será 300. Além disso, precisamos que a cor seja RGB 3.040,35. Então, vou definir a altura da linha como 1,2. Também precisamos da sua Na parte inferior, serão três Ram. Como você pode ver, o parágrafo parece muito bom. Vamos configurar com 235 Ram. Em seguida, vou selecionar Slide Text Client. Vamos definir o tamanho do telefone de 21,8 Ram. Quanto à cor, vou usar o RTP 11, 83, 47. O nome e o. Ele está muito bonito. Na verdade, eu me livro dessa fronteira a partir daqui. Não precisamos mais disso. Agora temos que começar a escrever o Javascript. Vamos criar uma variável. Vai ser um controle deslizante. Vou selecionar o elemento usando o método seletor de consulta. Vamos inserir o controle deslizante do nome da sua classe. Em seguida, precisamos de algumas variáveis diferentes. O segundo serão os slides. E temos que selecionar slides usando o método All do seletor de consultas Vamos mudar o nome da classe. A próxima variável será a seta para a esquerda. Vamos controlar a seta esquerda. Também precisamos aqui da seta para a direita. Vamos duplicar essa linha de código. Mude da esquerda para a direita. Precisamos aqui de duas crianças. Tudo bem, agora vou adicionar até mesmo o ouvinte à seta direita com o evento de clique Em seguida, precisamos da função cope, que será executada assim que clicarmos na seta para a direita. Vou adicionar estilo ao controle deslizante. Ela será transformada com a função value translate x. Vou interferir em -20%. Em seguida, precisamos fazer uma transição para o controle deslizante com tudo e a duração será de 0,8 segundo Além disso, vou usar o P1001 cúbico. Se eu clicar na seta para a direita , esse controle deslizante se moverá para o lado esquerdo Em seguida, vou criar uma nova variável, que será o índice do slide. E vou defini-lo como zero por padrão e duplicar esse código que precisamos aqui. Seta para a esquerda. Vou adicionar aqui o índice do slide e vou configurá-lo para o índice do slide menos um Em seguida, traduzimos x. Vou passar aqui índice do slide multiplicado -20%. Vamos copiar esse código Cole aqui para a seta direita que precisamos aqui, mais uma. Agora, se eu clicar em, o controle deslizante funcionará bem Quando chegarmos ao último ou ao primeiro slide , temos que parar o controle deslizante Precisamos aqui de um índice de slide maior que zero. Precisamos de ponto de interrogação, índice de slide menos um ou zero Precisamos de uma declaração semelhante aqui. Índice de slides menor que o tamanho dos slides ensinados menos um ou mais ponto de interrogação E temos que determinar o índice do slide mais um ou o comprimento dos slides menos Agora, quando chegarmos ao último slide, o controle deslizante deixará funcionar e o mesmo acontecerá com o primeiro slide Está bem? Agora precisamos de um transbordamento oculto para ocultar o resto dos slides Agora, se eu clicar, o controle deslizante funcionará perfeitamente. Agora temos que cuidar dos pontos. Vamos criar uma variável. Vai ser uma embalagem de pontos. Selecione esse elemento. Em seguida, precisamos, eu vou passar sua pena. Além disso, precisamos consultar e selecionar tudo. Vou examinar os pontos usando o método de forragem. Precisamos de ponto e índice. Os parâmetros que vou adicionar até mesmo ouvir o evento ponto com clique. E também temos que passar aqui a função de retorno de chamada. Vamos definir o índice do slide para o índice, quero dizer, o parâmetro. Em seguida, vou ativar os pontos, usar o método seletor de consulta Vou remover active da lista de turmas. Vamos adicionar a mesma declaração aqui. Além disso, vou adicionar ao ativo. Agora, se eu clicar em, o controle deslizante funcionará Agora precisamos trabalhar os pontos. Depois de clicarmos nos controladores, vamos adicionar aqui os filhos do invólucro de pontos. Temos que adicionar aqui o índice do slide. Eu adiciono ativo à lista de turmas. Em seguida, copio esse código daqui e o adiciono nas duas setas Agora, se eu clicar, os pontos funcionarão bem. Na verdade, tudo funciona bem. Em seguida, vou criar uma variável chamada set index, que será uma função. Vou pegar esse código aqui e adicionar uma função. Além disso, precisamos desse código. Em seguida, vou me livrar dessa extremidade de código chamada índice do conjunto de funções. Vou fazer o mesmo com as setas esquerda e direita. Vamos chamar o índice do conjunto de funções. Agora, o código parece muito mais simples. Na verdade, tudo funciona perfeitamente e terminamos esse projeto. Espero que tenha sido interessante e você tenha aprendido algumas coisas novas. Vamos seguir em frente e passar para o próximo projeto. 28. Project 23 - formulário de contato animado: Olá e bem-vindo ao nosso próximo projeto. Nesta seção, criaremos um formulário de contato animado. O projeto será criado com base em HTML, CSS e Javascript. Como você pode ver, temos aqui um círculo animado no centro da página. Se eu clicar nele, o formulário de contato será exibido. Consiste em alguns elementos diferentes. Temos aqui os campos de entrada de nome e e-mail com esse belo efeito de foco. Então temos aqui a área de texto para a mensagem. Abaixo, você pode ver o botão que tem esse efeito de foco agradável e legal No canto superior direito do formulário de contato, você pode ver o botão X de fechamento. Se eu clicar nele, o formulário de contato será fechado. Ok, acho que o projeto será interessante e útil. Vamos começar. Eu criei uma nova pasta na área de trabalho. Vamos abri-lo no código VS e, em seguida, criar nossos arquivos de trabalho para HTML. Em seguida, precisamos de um arquivo para CSS, então vou criar um arquivo JS de script para o script Java. Vamos abrir o arquivo HTML de índice e criar o documento HTML básico. Eu vou mudar o título. Vai ser o Formulário de Contato. Em seguida, vou vincular o arquivo CSS. Também precisamos de um link para o arquivo Javas. Vamos abrir o projeto no navegador usando o servidor ativo. E também precisamos colocar o navegador e o editor lado a lado, assim. Em seguida, vou visitar o site do Google Phones. Como vamos usar telefones do Google durante todo esse projeto, vou pesquisar um telefone chamado poppins Vamos selecionar alguns estilos diferentes, depois copiarei o link e colarei no elemento principal. Em seguida, vou pegar o telefone, algum link de CDN porque vamos usar alguns ícones do telefone que precisamos para abrir a tag de link e colar o CDN no atributo de referência H. Ok, estamos prontos para começar a escrever a marcação HTML. Precisamos de um contêiner que envolva todo o conteúdo. Em seguida, precisamos do invólucro do formulário. Vou abrir o botão com o BTN de fechamento da classe. Em seguida, precisamos colocar aqui x após o botão. Vou criar um formulário com o formulário de contato do nome da turma. Vamos nos livrar do atributo de ação dentro do elemento do formulário. Vou colocar H uma tag de cabeçalho com o título do formulário de classe. O texto será Entre em contato conosco. Em seguida, precisamos de desenvolvimento, que serão grupos de entrada. Vamos inserir seu grupo de entrada no qual vou colocar um rótulo para o nome. Vou adicionar aqui o rótulo do campo. Em seguida, vou inserir sua tag de entrada com o texto do tipo, também o nome da classe, que será campo. Em seguida, precisamos adicionar aqui atributo de espaço reservado com o texto Insira seu nome. Vou duplicar o grupo de entrada. Precisamos da mesma coisa para o e-mail. Vamos mudar o texto. Então, precisamos aqui inserir seu endereço de e-mail ao lado da área de texto. Inicialmente, precisamos desenvolver com o grupo de áreas de texto da classe. E então vou inserir sua etiqueta para a mensagem. O nome da classe será rótulo de campo. Em seguida, vou inserir a área de texto. Com o campo do nome da classe. Além disso, precisamos do atributo de espaço reservado com o texto, sua mensagem aqui Ok, depois disso, precisamos enviar Batson. Com o tipo Batson. Vou adicionar aqui o nome da classe , será Enviar PTN. Em seguida, adicionarei aqui o que será colocado no elemento span Submit. E também precisamos de um elemento que será uma seta FA sólida logo após o botão. Vou colocar aqui o parágrafo com o texto para qualquer conflito de perguntas ou call center 2047 Vou adicionar aqui elementos de extensão e um número de telefone fictício Na verdade, todos os elementos são criados e agora podemos começar a escrever o CSS. Como de costume, selecionarei cada elemento e, em seguida, definirei a margem e o preenchimento de ambos como zero Em seguida, precisamos definir o tamanho da caixa. Será uma caixa de borda, pois vou definir uma linha para nenhuma. Em seguida, vou definir a família de telefones. Vai ser Poppins San Serif. Os estilos padrão são aplicados. Em seguida, vou definir o tamanho do telefone do elemento HTM para 62,5%. Para usar M como unidade de medida um, m será igual a Depois disso, vamos selecionar o contêiner. Eu vou definir a largura, vai ser 100%, então a altura vai ser 100 portas de altura. Vou mudar a cor de fundo, vai ser EEE Em seguida, seleciono o invólucro do formulário, vamos definir com 60% e a altura será 70 Em seguida, precisamos da cor de fundo, ela será branca. Aqui temos o invólucro do formulário. Precisamos que a posição seja absoluta. Então, as duas posições serão 50% A posição esquerda será 50%. E para censurar o elemento, precisamos transformar a tradução em -50% e novamente em -50% . Como pode ver, o invólucro do formulário é colocado no centro da página Em seguida, vou adicionar aqui uma sombra com o valor 03 Ram, seis Ram. E a cor será RGBA, cor preta com menor opacidade, 0.1 Temos aqui um bom Vamos definir o raio da borda em um Ram para tornar os cantos arredondados Agora, o invólucro de espuma parece melhor. Em seguida, vou selecionar fechar BTN e definir sua posição como absoluta Então, as duas posições serão de -1,5 fram. A posição correta também será de -1,5 fram. Vamos definir a largura para três Ram. Então, a altura será de três Ram. Precisamos da cor de fundo, ela será branca. Aqui temos o botão de fechamento x. Vamos definir a fronteira 2.1 de RAM vendida. A cor vai ser EEE. Além disso, precisamos do raio da borda para tornar o elemento arredondado Em seguida, adicionarei aqui a sombra da caixa com o valor 0,1 0,1 m. A cor será RGBA, a cor preta com a opacidade 0,1. Também precisamos aqui do 0,1. Também precisamos E então eu vou criar o efeito de foco. Vamos selecionar o botão. Com o mouse, vou mudar a cor do plano de fundo Vai ser de dois a dois. Então, precisamos que a cor seja branca. Vou definir a borda para 0,1 Ram sólido e a cor será branca. Vamos adicionar aqui a transição para tornar o efeito mais suave. Se eu passar o mouse sobre o botão de fechamento X, chegaremos aqui. Efeito agradável e legal. Vamos selecionar o formulário de contato. Vou definir a largura para 100% e, em seguida, a altura será 100%. Vamos definir o display Flex Então, precisamos que a direção flexível seja uma coluna, temos que alinhar os elementos Então, precisamos justificar o conteúdo. Será um espaço até mesmo para criar um espaço para eventos entre os itens flexíveis Além disso, vou definir a colocação 0,15 Ram nos lados esquerdo e direito Vamos seguir em frente e formar o título. Vou definir o tamanho do formulário para o formulário. Então, a cor será 333. Aqui temos o título. Em seguida, vou selecionar Grupos de entrada. Vamos configurar com 100%. Então precisamos do display Flex. Vou definir o conteúdo de justificação para um espaço entre eles. Também precisamos de uma margem na parte inferior, serão três RAM. Os campos de entrada estão alinhados. Em seguida, vamos selecionar o grupo de entrada. Precisamos que a largura seja de 40 Ram, então a altura será de seis. Em seguida, vou selecionar o rótulo do campo. Vamos definir o tamanho para 1,4 Ram. A cor será 888. Depois disso, vou selecionar o elemento de entrada usando o campo de classe. Vamos definir com 100%, então a altura será 100%. Em seguida, precisamos de uma borda, ela será nenhuma. Além disso, vou definir a borda inferior, 2,2 m sólida e a cor será BBB. Teremos apenas uma borda na parte inferior. Em seguida, precisamos que o tamanho do telefone seja de 1,8 Ram. Então eu vou ajustar o pudim para 0,02 Ram e zero. É isso sobre o elemento de entrada. Em seguida, precisamos de um campo com atributo de espaço reservado. Vou mudar a cor, vamos fazer com que seja 222. A cor do espaço reservado é alterada. Em seguida, vou selecionar Grupo de área de texto. Vamos configurar o display Flex. Precisamos de direção flexível. Vai ser uma coluna. Depois disso, vou selecionar o grupo de áreas de texto, seguido pela área de texto. Vou definir a altura para 12 Ram. Precisamos de uma borda aqui na parte inferior. Será 0,2 Ram sólido e a cor será BBB. Então precisamos de acolchoamento na parte superior , será um Rams Vou desativar a função de redimensionamento. Temos que definir o redimensionamento para nenhum agora não podemos mais recitar a área de texto Depois disso, vou selecionar Enviar BTN, vamos definir com 18 Ram, então a altura será cinco Ram Então, precisamos da cor de fundo. Vou para 72 f45 A. Em seguida, me livre da borda padrão. Vamos fazer com que não seja nenhum. Vou fazer o elemento arredondado usando o raio de borda de três Ram. Mude a cor. Vai ser branco conforme necessário. O tamanho da fonte deve ser de 1,5 Ram. Agora, o botão parece muito melhor. Em seguida, precisamos de sombra de caixa. Vai ser 0,3 Ram, uma Ram, e a cor vai ser 250-57-0590 E a opacidade 0,5 Além disso, precisamos que o cursor 0,5 Além disso Ok, então o botão parece muito bom. Em seguida, vou selecionar Enviar BTN, seguido por um elemento Vamos definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que neste caso é o próprio botão. Vamos definir a posição para 50%. Em seguida, a posição esquerda será de cinco quadros. Então, precisamos transformar translate Y -50% para censurar o elemento Em seguida, vou selecionar enviar BTN seguido pelo ícone O tamanho da fonte será de 1,8 Ram. Então, a posição será absoluta. Precisamos posicionar 50%, então a posição correta será 4,5 Ram. E também precisamos censurar o elemento verticalmente usando transform translate Y -50% Ok, depois disso, vou criar Vamos selecionar o botão com o mouse. Ao passar o mouse, vou mudar a cor do plano de fundo. Vai ser 333. Além disso, precisamos de box shadow com o valor de 0,3 Ram, uma Ram. E a cor será RGBA, a cor preta com opacidade de 0,5 hover Precisamos adicionar aqui a transição agora, como você pode ver, temos um efeito de foco agradável e legal Passe o mouse. Vou mover o ícone. Vamos enviar o botão com o mouse seguido pelo elemento. Eu vou mudar. A posição correta será de três Ram. Eu também uso aqui a transição com a direita e a duração será de 0,5 segundo. Quando eu passar o mouse, a seta se moverá para o lado direito. E, na verdade, isso criará esse efeito de foco agradável e legal Em seguida, vou selecionar o contato para o parágrafo abaixo. Vamos definir o tamanho do telefone para 1,6 Ram. Então, a cor será 888. Em seguida, vou selecionar o elemento span no parágrafo. Vamos mudar a cor. Vou usar aqui, cor 45. O parágrafo parece muito bom, na verdade. A próxima coisa que precisamos fazer é criar um efeito de foco. Depois de nos concentrarmos, temos que mudar a borda na parte inferior. Quero dizer, a cor, vamos configurá-la para um sólido de 0,2 Ram, e a cor será 45. Uma próxima transição na borda inferior com a duração de 0,3 segundos. Além disso, precisamos aliviar o foco da função, os campos de entrada, para obter esse efeito agradável e interessante Ok, depois disso, vou selecionar Foco de campo, seguido pelo atributo de espaço reservado Precisamos ocultar o espaço reservado para focar o campo. Vamos definir a cor como transparente. E então precisamos fazer a transição cor e da duração, 0,3 segundo. Quando nos concentrarmos, o atributo de espaço reservado se ocultará bem Agora precisamos cuidar das animações. Vamos definir a exibição como nenhuma para a embalagem do telefone. Vou adicionar novos elementos no arquivo HTML. Vamos chamar isso de carregamento. Precisamos aqui de outro plano de fundo de carregamento profundo que vou colocar aqui, que será regular no FA. Envelope para ventiladores. Em seguida, vou estilizar esses elementos. Vamos selecionar o carregamento. Defina a largura para 100% e, em seguida , a altura será 100%. Vou definir a posição como absoluta. Então, precisamos posicionar zero. Na posição zero, precisamos do Display Flex para centralizar o conteúdo usando o Justify Content Center e o Align Items center O elemento é colocado no centro. Em seguida, vou selecionar o plano de fundo de carregamento. Vamos definir a largura. Serão 12 Ram. Então, a altura também será de 12 Ram. Mude a cor de fundo, use essa cor aqui. Em seguida, precisamos do raio da borda. Vai ser um círculo. Precisamos de 50%. Depois, precisamos sombra de caixa com o valor de 0,1 m3 A cor vai ser essa cor que usamos recentemente. Em seguida, vou selecionar elementos. Vamos definir para 12 M. Então a altura também será 12 Ram. Em seguida, precisamos de cor. Vai ser branco. Depois, vou aumentar o tamanho do telefone. Vamos configurá-la para M. Mude a posição, vou torná-la absoluta. Então, a posição dos dois será de 50%, a posição esquerda será de 50%. E precisamos centralizar o elemento, traduzir -50% e -50%. Além disso, precisamos exibir um flex com justify content center e line item center para censurar o ícone dentro do círculo o ícone dentro do Vamos, claro, direto ao ponto. Ok, o ícone parece muito bom. Agora vou criar quadros-chave CSS com o nome carregando 0%, precisamos que a largura seja de 12 Ram. Além disso, a altura será de 12 Ram. A cor de fundo será F45. Então, em 50%, vou aumentar a largura , serão 14 Ram. Então precisamos de altura 14 Ram. Quanto à cor de fundo, vou usar F616 Vamos aplicar esses ladrilhos. Precisamos de animação. Então, o nome dos quadros-chave que carregam a duração será de 0,9 segundo. Então, precisamos facilitar a função. Além disso, precisamos reproduzir a animação infinitamente. Como você pode ver, o fundo é animado. Em seguida, vou usar o Javascript para exibir o formulário de contato. Vamos criar uma nova variável. Será, vamos selecionar o ícone usando o método seletor de consulta Precisamos inserir o nome da classe carregando I. Em seguida, precisamos da segunda variável que será próxima ao BTN. Vamos selecionar esse elemento. Quanto à terceira variável, vou usar container. Vamos inserir seu contêiner de nome de classe. Em seguida, adicionarei um ouvinte de eventos ao ícone com clique em evento Além disso, temos que passar aqui a função de retorno de chamada que será executada assim que clicarmos no ícone ao clicar Vou adicionar uma nova classe ao contêiner usando o método add e o nome da classe será alterado. Vamos duplicar o código que precisamos aqui, Fechar PTN. Depois de clicar no PTN fechado , precisamos remover a alteração de classe do contêiner Agora é hora de usar a mudança de classe e temos que definir novos estilos CSS, que serão aplicados com um clique. Precisamos aqui de opacidade zero, visibilidade oculta. Em seguida, vou adicionar aqui opacidade zero e visibilidade Além disso, precisamos selecionar o invólucro do formulário com a mudança de classe. E temos que tornar o formulário visível usando a opacidade um e a visibilidade Depois de clicar, o formulário será exibido. E então, quando clicarmos no botão X, ele será fechado. Agora vou adicionar aqui a transição com toda a duração de 0,3 segundo. Precisamos de transição por padrão para o carregamento com algum tempo de atraso de 0,3 segundo. Em seguida, precisamos de uma transição para o invólucro Fam. Vai ser de 0,3 segundo e o tempo de atraso de 0,3 segundo. E também precisamos fazer a transição por padrão em todos os 0,3 segundos. Agora, se eu clicar, o formulário será exibido com efeito Fa e, na verdade, tudo funcionará bem. Tudo bem, então é isso. Vamos seguir em frente. 29. Project 24 - cabeçalho de site com formulários: Tudo bem, então é hora de seguir em frente e começar a criar nosso próximo projeto. Nesta seção, criaremos um cabeçalho de site com formulários de registro e registro. O projeto será criado com base em HTML, CSS e Javascript. Então, vamos continuar descrevendo isso rapidamente. Como você pode ver, temos aqui esse lindo e legal cabeçalho de site. Temos aqui uma pequena navegação com dois links para home e join. Em seguida, temos um banner com elementos de título e também temos aqui um pequeno logotipo no canto inferior direito. Se eu clicar em entrar , receberemos aqui o formulário de inscrição. Temos aqui alguns campos de entrada diferentes com dois botões. Se eu clicar no link de login , acessaremos o formulário de login. Como você pode ver, o botão foi alterado corretamente. Se eu clicar em Inscrever-se, voltaremos ao formulário de registro. Se eu clicar em Início , iremos para o Banner Ok. Então, isso é sobre esse projeto. Espero que seja interessante e útil e que você goste. Então, vamos começar. Eu preparei uma nova pasta na área de trabalho na qual tenho uma pasta para as imagens. Vamos abrir o projeto no código VS. Em seguida, vou criar nossos arquivos de trabalho para HTML. Em seguida, precisamos de um arquivo para CSS. Eu vou criar um script. S. Vamos abrir o arquivo HTML de índice e criar a estrutura HTML da página. Vou mudar o título, vai ser a landing page. Em seguida, vou vincular o link do arquivo CSS ao arquivo Java script. Eu adiciono aqui o nome do arquivo no atributo source. Ok, vamos abrir o projeto no navegador usando o pacote de servidor ativo. Em seguida, vou colocar o navegador e o editor lado a lado. Então, tudo bem, vou visitar o incrível CDN do telefone porque vamos usar alguns ícones incríveis do telefone Vamos copiar o link daqui. Em seguida, vou abrir a tag de link e colar aqui o CDN. Em seguida, precisamos visitar o site do Google Phones. Vou usar o Google Phones em todo este projeto. Vamos procurar uma fonte chamada cabine. Vamos selecionar alguns estilos diferentes, copiar o link e colá-lo no elemento principal. Ok, estamos prontos para começar a criar a marcação HDL. Em primeiro lugar, vou abrir a tag profunda, que será o contêiner. Em seguida, vou inserir aqui, outra aterrissagem na qual vou criar navegação com a parte da classe. Vou adicionar aqui navegação na qual vamos colocar o elemento de link com o logotipo do Cuss. Estou colocando aqui o elemento span com o Quas Circle. Em seguida, adicionarei aqui outra extensão com o texto do logotipo Quas O texto será Vá a qualquer lugar. Em seguida, precisamos de elementos de link. Quero dizer, os itens do botão. O primeiro vai estar em casa. Quanto ao segundo, vou colocar aqui, Join. Vamos falar sobre a navegação. Em seguida, vou criar o banner. Dentro do banner, vou colocar H um elemento de cabeçalho. Será explorar novos passeios com o Go Anywhere. Vou colocar seus elementos de extensão e ir para qualquer lugar dentro da extensão. Em seguida, vou criar um contato. Precisamos aqui de três elementos de cabeçalho H com o texto. Comece por três. Em seguida, vou inserir aqui H um elemento de cabeçalho e criar uma nova conta. Depois dos elementos do título, precisamos de um parágrafo com o texto já como membro. Em seguida, precisamos do elemento de link no qual vou colocar o login. Depois do parágrafo. Precisamos criar elementos de formulário com o formulário de contato da turma. Vamos nos livrar do atributo de ação dentro do formulário. Vou criar um grupo de entrada no qual teremos elementos de entrada com o texto do tipo, com o atributo placeholder Vai ser o primeiro nome. Mas então precisamos de elementos com a classe como um usuário sólido. Vamos duplicar o grupo de entrada algumas vezes. O segundo será o sobrenome. Quanto ao terceiro , vou inserir seu endereço de e-mail. Precisamos mudar o tipo. Será um e-mail como para o telefone ou alguns ícones. Quanto ao quarto item, precisamos aqui, senha. Vamos mudar o tipo. Será necessário bloquear a senha. Depois disso, vou criar um grupo PTN no qual teremos dois botões diferentes Vamos criar um botão com o contato da classe BTN e também vou adicionar aqui o atributo de tipo Será o próximo botão. Vou inserir aqui o método de alteração. Quanto ao segundo botão, vou adicionar aqui criar conta. Ok, isso é tudo sobre o formulário. Vamos criar um logotipo na parte inferior. Tudo está preparado e , na verdade, podemos começar a escrever o CSS. Vou selecionar cada elemento usando um disco master. Em seguida, vamos definir a margem e o preenchimento, ambos em zero Em seguida, vou definir a propriedade de dimensionamento da caixa, que será a caixa de borda Então, precisamos que a decoração de texto não seja nenhuma. Além disso, vou definir o esboço como zero. Finalmente, vou definir a família de telefones. Vai ser a cabine Sanerif. Em seguida, vou definir o tamanho do telefone. Em seguida, vou definir o tamanho do telefone do elemento H on. Vou configurá-lo para 62,5% para usar m como unidade de medida Nesse caso, um m será igual a dez pixels. Depois disso, vamos cuidar do contêiner. Vou definir a largura. Vai ser 100%. Quanto à altura, vou configurá-la para 100 VH. Quero dizer, altura da janela de visualização. Vamos mudar a cor de fundo. Vai ser 525561. Em seguida, vou configurar a tela para flexionar. Vamos mover o conteúdo para o centro usando o centro de conteúdo justify e um centro de itens de linha Como você pode ver, o conteúdo é colocado no centro da página. Em seguida, vamos selecionar o pouso. Vou definir dentro da altura. A largura será de 95%. Quanto à altura, vou defini-la para 90% Depois, precisamos definir o plano de fundo. Vamos usar o gradiente linear. A direção da transição será de dois direitos. Então precisamos da cor RGB 309-40-2505 Precisamos aqui valor percentual 40% Então a próxima cor será RGBA 309-40-2505 A mesma cor, mas com opacidade 0,8 Em seguida, precisamos definir o URL para 309-40-2505 A mesma cor, mas com opacidade 0,8 Em seguida, precisamos definir o opacidade 0,8 do valor percentual 40% Então a próxima cor será RGBA 309-40-2505 A mesma cor, mas com opacidade 0,8 Em seguida, precisamos definir o URL para a imagem de fundo. Vamos selecionar a imagem da pasta de imagens. Então, precisamos do centro da posição e não repetir. Além disso, precisamos definir a propriedade do tamanho do plano de fundo com uma cobertura de valor. Ok, temos aqui esse plano de fundo bonito e legal para o pouso. Vamos adicionar o raio da borda para o pouso, torná-lo de dois Ram. Além disso, precisamos de box shadow com os valores 01 Ram, cinco Ram. E a cor será RGBA, cor preta com opacidade 0.4 Tudo bem, em seguida, vamos selecionar Banner Vou ocultá-lo usando exibir nenhum, depois vou selecionar Contato e ocultá-lo também. Agora vamos cuidar da navegação. Vou selecionar, Agora vamos definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai. Em seguida, vou definir a posição como zero. Então, a posição esquerda será zero. Em seguida, precisamos de largura, será de 30%. A altura será 12:00 P.M. Em seguida, vou mudar a cor do fundo Vai ficar vermelho por um tempo. Aqui temos a navegação. Vamos nos livrar da cor de fundo. Em seguida, precisamos de navegação. Vou definir a largura para 100%, depois a altura será 100%. Vamos definir a tela para flexionar e precisamos justificar o espaço entre os conteúdos E também alinhe os itens ao centro para centralizá-los verticalmente Em seguida, vou criar algum espaço usando preenchimento, moldura zero, os links estão bem alinhados Vamos cuidar do logotipo. Vou configurar a tela para flexionar. Em seguida, precisamos de um círculo. Vamos começar com três Ram. Então, a altura será de três Ram. Vou mudar a cor do plano de fundo. A cor será 1d95, é uma cor azul Em seguida, vamos definir o raio da borda em 50%. Para fazer o círculo, também precisamos de uma margem no lado direito, um Ram Aqui temos o círculo. Em seguida, vou selecionar o texto. Vamos definir o tamanho para dois Ram. O peso do telefone será de 400, também cria algum espaço entre as letras. Em seguida, precisamos de cor. Vai ser branco. Aqui temos o texto. Vou alinhá-los no centro usando o centro Align Items Agora, o logotipo e o texto estão bem alinhados. Em seguida, vou cuidar do item. Vamos definir o tamanho da fonte para 1,6 Ramon. O peso vai ser ousado. Também precisamos aqui da cor 6967. Aqui temos os itens de navegação. Vamos selecionar o item de navegação com o mouse. Vou mudar a cor ao passar o mouse. Vai ser CCC. E também precisamos de uma transição para tornar os efeitos de foco mais suaves Assim que eu passar o mouse, os itens da nova mudarão de cor. Em seguida, vou cuidar do banner, que agora está escondido. Vamos definir a posição como absoluta. Então precisamos posicionar, será de 30%, então a posição esquerda será de 5%, o banner está alinhado Em seguida, vou usar o elemento de cabeçalho H one. Vamos definir o tamanho da fonte para cinco e, em seguida, o peso do telefone será 300. Mude a cor, vou torná-la branca. Em seguida, vou tirar o elemento span. Precisamos de um bloco de exibição. Depois, vou aumentar o tamanho do telefone. Serão sete Ram. Então, precisamos do peso da fonte. Vamos colocá-lo em negrito. Vou alinhar o texto no centro e depois vou transformar o texto em maiúsculas Em seguida, vou mudar a cor. Vai ser azul. Também precisamos de margem na parte superior. Vamos configurá-lo para seis Ram. Finalmente, vou adicionar um pouco de efeito de sombra. Vamos definir a sombra do texto para 01 Ram. Três RAM e a cor será preta com a opacidade de 0,2 Ok, então o banner parece muito bom Em seguida, vou adicionar aqui o display none por um tempo, porque vamos cuidar da seção de contatos. Vamos nos livrar da tela nenhuma daqui. Defina a posição dois, absoluta, então precisamos que a posição seja 25% a posição esquerda seja 5%. Como você pode ver, o formulário está bem posicionado Então precisamos entrar em contato com H três. Vamos definir o tamanho da fonte para 1,6 Ram, a transformação do texto. Vai ser em letras maiúsculas. Vou mudar a cor, vamos usar essa cor cinza. Vamos duplicar esse código, alterar o seletor que precisamos H um elemento de cabeçalho. Vou aumentar o tamanho do telefone. Vamos configurá-lo para 4,5 Ram. Em seguida, livre-se da transformação de texto e defina a espessura da fonte em negrito. Então, a cor será branca. Em seguida, precisamos de espaçamento. Vamos configurá-lo para 2.2 Ram. Vou definir a margem para dois Ram e zero. O segundo título parece muito bom. Em seguida, vamos selecionar o parágrafo, o tamanho da fonte para 1,5 Então, precisamos de peso, ele ficará em negrito. Em seguida, defino a cor como cinza. Precisamos de uma margem na parte inferior , será de três aríetes. Agora vou cuidar do link que é colocado dentro do parágrafo. Vamos definir a cor para azul. Ok, vamos ver o próximo parágrafo. Precisamos cuidar dos campos de entrada. Vamos selecionar o grupo de entrada. Vou definir a largura para 40 Ram. Então, a altura será de 4,5 Ram. Em seguida, precisamos de margem, será 20. Em seguida, vou selecionar os elementos de entrada. Vamos definir a largura para 100%, então a altura será 100%. Em seguida, precisa da cor de fundo. Vou definir a cor de fundo 2323644. Em seguida, precisamos que a fronteira seja nenhuma. Além disso, vou definir o raio da borda para 1,5 Ram. Em seguida, precisamos colocar, será uma RAM e duas RAM. Os campos de entrada parecem muito melhores. Em seguida, vou adicionar aqui a cor. Vai ser CCC. Também precisamos do tamanho do telefone 1.4 Ram. Em seguida, copiarei o seletor e adicionarei aqui pseudoclasse de foco em foco Vou mudar a fronteira de foco. Vou mudar a cor do plano de fundo. Vai ser 344b. Também precisamos mudar a fronteira. Vamos configurá-lo para 0,2 Ram sólido e a cor será azul. Quando nos concentrarmos, obteremos esse efeito agradável e legal. Tudo bem, depois disso, vou cuidar dos ícones do telefone. Vamos definir a posição como absoluta. Em seguida, precisamos posicionar em relação aos elementos pais , que é o grupo de entrada. Vamos definir a posição correta para dois Ram pois duas posições serão 50%. E precisamos censurar os ícones verticalmente usando transform translate Y -50% Em seguida, vamos definir o tamanho da fonte para Também mude a cor. Eu vou fazer disso CCC. Como você pode ver, os ícones parecem muito bons. Em seguida, temos que cuidar dos botões. Vamos definir com 240 Ram, então a altura será de cinco Ram. Além disso, precisamos exibir o Flex justify. O conteúdo ficará um espaço entre eles, então precisamos de uma margem na parte superior, os botões estão bem alinhados Agora temos que personalizar cada um deles. Vamos selecionar Contato. Btn definido com 46%, então a altura será 100%. Vamos adicionar aqui o raio da borda, serão quatro Ram Então precisamos de cor , vai ser branco. Vou definir a fronteira como não. Em seguida, precisamos do tamanho da fonte, que será de 1,5 Ram. Vamos definir o peso da fonte para plotar. Também mude o cursor, torne-o ponteiro. Na verdade, precisamos aqui da cor, não das colunas. Em seguida, precisamos alterar a cor de fundo de cada botão separadamente. Vamos selecionar o primeiro. Vou definir a cor de fundo para cinza. Quanto ao segundo botão, vou deixar sua cor de fundo azul. Os botões estão lindos. Em seguida, vou selecionar o logotipo na parte inferior. Vamos definir a posição como Absoluta. Então precisamos da posição inferior , serão três Ram. Vou definir a posição correta para três Ram. Então precisamos de largura, serão seis Ram. A altura também será de seis Ram. Precisamos transformar elementos em círculo, então precisamos do raio da borda 50% e também mudar a cor novamente , torná-la azul Em seguida, precisamos de uma caixa de sombra com os valores 01 Ram, cinco e a cor será RBA, cor preta com opacidade 0.3 Aqui temos o logotipo no canto inferior direito Agora vou exibir o banner de volta e ocultar a seção de contato usando opacidade zero e visibilidade Agora é hora de escrever um pouco de Javascript. Vamos criar uma nova variável. Vai ser um contêiner. Vou selecionar o contêiner usando o método seletor de consulta Precisamos especificar aqui o contêiner do nome da classe. Em seguida, precisamos selecionar o botão de junção. Vamos selecionar esse elemento. Precisamos colocar aqui a navegação como com o enésimo seletor filho Serão três. Agora, vou adicionar um ouvinte de eventos ao botão conjunto com o evento de clique com uma função de retorno de chamada que será executada assim que clicarmos no elemento link Vou adicionar uma nova classe ao contêiner usando um método. Essa classe vai ser mudada. Agora vou usar a mudança de classe e criar novos estilos que serão aplicados. Depois de clicar no link, precisamos selecionar e exibir novamente usando a opacidade 1 e a visibilidade visível Vou adicionar aqui a transição com valores 0,5 segundo e com o tempo de atraso de 0,5 segundo. Vamos copiar a transição e adicioná-la ao contato por padrão. Em seguida, precisamos selecionar o banner com mudança de classe porque precisamos ocultar o banner. Depois de clicar no link, vamos definir a opacidade como zero e a visibilidade Precisamos adicionar aqui toda a transição de 0,5 segundo. Novamente, precisamos de transição por padrão, mas com um tempo de atraso. Depois de clicar, o formulário de contato será exibido. Em seguida, vou criar uma nova variável. Vai ser em casa, BTN. Vamos selecionar esse elemento. Precisamos mudar o seletor de crianças. Serão dois. Então eu vou duplicar esse código, mudar a parte inferior Precisamos dela em casa. Depois de clicar no botão Início, precisamos remover a mudança de classe do contêiner para exibir de volta o banner. Depois de clicarmos em Início, o banner será exibido volta e o formulário de registro ficará oculto. Em seguida, vou criar uma nova variável. Será o login BTN. Quero dizer, o link de login que temos no parágrafo. Vamos selecionar esse elemento. Vou adicionar um ouvinte de eventos ao botão de login com um evento de clique novamente e com uma função de retorno de chamada Depois de clicar no botão de login, precisamos adicionar uma nova classe ao contêiner. E vai ser, usamos aqui um método total. Vamos selecionar a altura seguida pelo grupo de entrada com o gráfico, selecione um. E também precisamos da mesma coisa para o segundo elemento. Precisamos ocultar esses campos de entrada. Depois de clicarmos em login , os dois primeiros campos de entrada aparecerão. Em seguida, precisamos colocar aqui um ponto de interrogação. Se a afirmação for verdadeira, precisamos alterar o conteúdo do texto do botão de login para se inscrever. Se for falso, teremos que fazer com que o conteúdo do texto do botão de login faça login. Se eu clicar no BTN de login , o texto do registro será alterado Também precisamos da mesma coisa para o botão. Vamos entrar em contato com a PTN, alterar o nome da classe Precisamos aqui de um seletor de gráficos. Precisamos selecionar o segundo botão. Vou usar aqui, operadora. Precisamos alterar o conteúdo do texto do contato BTN, fazer com que ele faça login Precisamos da mesma coisa aqui também. Precisamos alterar o conteúdo de texto do BTN e fazer com que ele crie uma conta Vamos verificar o que temos aqui. Vamos clicar em Entrar e, em seguida, ir para o registro. Como você pode ver, o conteúdo do botão foi alterado. Tudo bem, então tudo parece muito bom e funciona perfeitamente. Vamos seguir em frente. 30. Project 25 - cartões de preços: Olá e bem-vindo aos nossos próximos projetos. Nesta seção, criaremos cartões de preços modernos e interessantes. O projeto será criado com base em HTML e CSS. Como você pode ver, temos aqui três cartas diferentes com alguns efeitos de gradiente agradáveis e legais Cada cartão tem algumas partes diferentes, como tipo, características de preço, botão de compra e assim por diante. Se eu recarregar a página, os cartões aparecerão com desvanecimento agradável e legal Hoje em dia, muitos sites precisam dessas seções. Acho que o projeto será interessante e útil. Então, vamos começar. Eu criei uma nova pasta na área de trabalho, que agora está vazia. Vamos abrir o projeto no código VS e, em seguida, criar nossos arquivos de trabalho. Precisamos de dois arquivos, HTML de índice e CSS de estilo. Vamos abrir o arquivo HTML de índice e criar os documentos HTML básicos Em primeiro lugar, vou mudar o título. Serão cartões de preços. Em seguida, vou vincular o arquivo CSS. Além disso, precisamos abrir o projeto no navegador usando o servidor ativo. Vamos colocar o navegador e o editor lado a lado. seguir, visitarei a CDN de telefones, porque usaremos alguns ícones telefônicos ao longo deste projeto Vamos copiar o link daqui. Em seguida, precisamos abrir a tag de link no elemento principal e colar o CDN Além disso, vou pegar alguns telefones do Google. Vamos visitar o site do Google Phones e depois pesquisar por Pound chamada Sophia Sons Vamos selecionar alguns estilos diferentes, depois copiar o link e colá-lo no elemento principal. Ok, estamos prontos para começar a escrever a marcação HTML. Vou abrir o De Tu, que será o recipiente dentro das profundezas. Vou criar cartões de preços, que serão a embalagem Em seguida, precisamos do próprio cartão de preços , no qual teremos o tipo de cartão. Vai ser básico. Em seguida, vou garantir H um elemento de cabeçalho com o preço do cartão de classe, que será de 14,90 $9 Em seguida, vou garantir H três elementos de cabeçalho com o Vai ser um mês. Em seguida, precisamos aqui em que vou inserir alguns itens da lista. Vou inserir aqui, seguir algum ícone, vai ser um cheque A sólido. Em seguida, vou inserir seu painel. Vai ser um texto fictício. Vamos duplicar o item algumas vezes. Vou mudar o nome da classe do fonossoícone para três itens, estou nos últimos Em seguida, vou segurar o botão. Vai ser o cartão PTN. Também precisamos aqui do tipo que será o botão. Eu vou garantir o texto agora. Além disso, precisamos da parte inferior do cartão com o texto. Junte-se a nós. OK. Então é isso sobre o cartão. Vou duplicá-lo duas vezes porque teremos três cartas diferentes Vamos duplicá-lo e depois fazer algumas alterações. O segundo será padrão e o preço será diferente, 24,99 vou mudar a fonêmica Em seguida, teremos um premium com preço diferente por 9,99. Novamente, vou mudar a fonética de que precisamos aqui, cheques em vez da marca x. Na verdade, todas as três cartas são criadas. Estou na marcação HD e agora podemos começar a escrever o CSS Vamos seguir em frente e selecionar cada elemento. Como de costume, vou definir a margem e o preenchimento como zero Em seguida, vou definir o tamanho da caixa. Vai ser uma caixa de fronteira também precisamos da família telefônica dela. Vamos configurá-lo para Sophia San San Serif. Em seguida, vou definir o tamanho do telefone do elemento HTML para 62,5% porque vamos usar como uma unidade de medida Nesse caso, um m será igual a dez pixels. Em seguida, vou começar a personalizar o contêiner. Vamos definir sua largura para 100%. Então, a altura será de 100 pontos de visualização Em seguida, vou mudar o plano de fundo. Vamos usar o gradiente linear. A direção será a segunda à esquerda. Então precisamos aqui da primeira cor, que será 1d33 58 Então, a próxima cor será 14278. Também precisamos aqui da terceira cor, que será Oe138 Na verdade, precisamos mudar aqui dois. Como você pode ver, temos aqui um fundo agradável e interessante com infecções graduais. Em seguida, vou configurar o Display Reflex, porque vamos centralizar o conteúdo usando um centro de conteúdo justificado e um centro de itens de linha Como você pode ver, o conteúdo é colocado no centro. Em seguida, vou cuidar da embalagem. Estou nos cartões de preços. Vamos definir para 80%. Então precisamos de Flexbooks. Vamos definir o conteúdo para justificar o espaço uniformemente. Como você pode ver, as cartas estão bem alinhadas. Em seguida, vou selecionar o cartão em si. Vamos configurar com 230 Ram. Então, a altura será de 50 Ram. Vamos mudar o plano de fundo. Vou usar gradiente linear. A direção será duas, certo? E a primeira cor será 1254. Então, a próxima cor será F139. Aqui temos os planos de fundo das cartas. Em seguida, vou definir o raio da borda para 1,5 Ram, depois uma Ram, depois 1,5 Ram e novamente 1,5 Ram Depois disso, vou definir a sombra da caixa com os valores 01 Ram, seis Ram, e a cor será R para ser uma cor preta com a opacidade 0,4 Aqui temos a Depois disso, vou usar livros flexíveis. Vamos definir a direção da próxima coluna. Precisamos justificar o conteúdo com espaço de valor de maneira uniforme. Quanto aos itens da linha, vou colocá-los no centro. Em seguida, vamos definir o curso como ponteiro. Como você pode ver, os elementos estão alinhados dentro do cartão. Vamos começar com o tipo de placa que vou definir com 222 Ram Então, a altura será de quatro Ram. Também precisamos aqui da cor de fundo. Vai ser CCC. Use essa cor apenas por motivos temporários. Em seguida, vou usar a função Transform Rotate Z com o valor de -90 graus, o elemento é Vamos definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que é o cartão. Vamos definir a posição para 12 Ram. Quanto à posição, vou configurá-la para -13 Ram Como você pode ver, o elemento está bem alinhado. Em seguida, vamos definir o raio da borda em 2,5 Fram. Então precisamos de 2,5 quadros, 0,0 O elemento ficou arredondado Em seguida, vamos definir o tamanho da fonte para 2,2 Ram. Então, o peso da fonte ficará em negrito. Vou aumentar o espaço entre as letras. Então, vamos usar a transformação de texto make per case. Depois disso, vou definir a cor para branco. Em seguida, precisamos de uma caixa flexível para centralizar o texto dentro do elemento usando justify con center e alinhar itens ao centro Agora vou definir a sombra da caixa com os mesmos valores que usamos para o cartão. Vamos mudar a opacidade. Vai ser 0,3. Temos aqui o efeito de sombra. Em seguida, vou duplicar o tipo de cartão, mudar o nome da classe para a parte inferior do cartão Além disso, precisamos nos livrar da propriedade esquerda em vez da parte superior, precisamos da parte inferior e o valor será menos quatro RAM Em seguida, vou me livrar da transformação Rotate. Também precisamos alterar o raio da fronteira. Precisamos de 00 e, em seguida, esses dois valores. A parte inferior parece muito boa. Em seguida, selecionarei o cartão de preços, seguido pelo seletor de gráficos Precisamos do primeiro. Em seguida, precisamos seu tipo de cartão na parte inferior do cartão. Precisamos mudar o plano de fundo. Vou usar gradiente linear. A direção também será, certo. Quanto às cores, a primeira será f6od C, depois teremos aqui A primeira carta parece muito boa. Vamos duplicar esse código duas vezes, alterar os seletores, as cores da segunda placa serão df3b, já que a segunda cor Vamos cuidar da terceira carta. O primeiro chamador será OD9fc. Vamos chamar o segundo chamador. Vou inserir aqui, 174 FF. Tudo bem. Portanto, todos os três cartões são personalizados. Quero dizer esses dois elementos. Em seguida, precisamos aqui do preço do cartão. Vou definir o tamanho do telefone para sete e, em seguida, o peso do telefone será 300. Em seguida, vou selecionar o mês. Vamos definir o tamanho do telefone para os Rams. Precisamos do peso do seu telefone, 300. Em seguida, vou colocar a marcha no topo. Serão menos quatro Ram. Vou mover o elemento para cima. Em seguida, precisamos de menos item, vamos definir para 30. Então a altura será m. Precisamos de uma caixa flexível Vamos colocar o conteúdo de justificação no centro. Quanto aos itens da companhia aérea , também estarão no centro para que os itens estejam bem alinhados Depois disso, vou cuidar do menor item com o seletor de filhos, precisamos de itens ímpares. Vamos definir a cor de fundo duas, RGBA 91233 e a Opacidade 0.5 Em seguida, vou Vamos definir para dois Ram. Então precisamos que a Texiline seja o centro. Também vou definir o tamanho do telefone para 1,8 Ram. Em seguida, precisamos de margem no lado direito, vamos configurá-la para uma RAM. Depois disso, vou pegar o elemento span, vamos definir o tamanho do telefone para 1,4 Ram. Em seguida, precisamos que a transformação do texto seja maiúscula. Em seguida, vou selecionar primeiro o cartão com o seletor infantil, depois precisamos do preço do cartão Vamos duplicá-lo três vezes. Precisamos de um mês aqui, pois vou usar menos. E, finalmente, precisamos aqui do elemento span. Vamos mudar a cor do texto com efeitos de gradiente Vamos definir o plano de fundo para esse valor que usamos para a primeira carta. Além disso, precisamos aqui de clipe de fundo do web ke. Vai ser uma mensagem de texto. Além disso, vou usar a cor do campo de texto da chave da web e ela será transparente, como você pode ver, o texto do primeiro cartão parece muito bom. Vamos duplicá-lo duas vezes. Altere os seletores do gráfico. Precisamos do segundo, depois do terceiro. Vou pegar os planos de fundo adequados para a segunda carta, e também para a terceira carta Então, como você pode ver agora o texto dos cartões parece muito bom. Em seguida, precisamos cuidar dos botões. Vamos definir com 212 gramas, então a altura será de três Ram Vou definir a transformação de texto em maiúsculas. Em seguida, precisamos do raio da borda , serão três Ram Em seguida, precisamos de fronteira nenhuma. Vou mudar a cor e torná-la branca. Em seguida, precisamos de espaçamento entre letras. Vai ser 0,1 Ram. Em seguida, mude o ponto do curso. Como os outros elementos, precisamos mudar os fundo dos bósons separadamente Vamos pegar o plano de fundo para a primeira, depois duplicar esse código duas vezes, alterar os seletores e também usar os planos de fundo adequados para a segunda parte inferior e também a terceira Na verdade, temos aqui um pequeno problema. Usamos os mesmos fundos para a segunda e a terceira cartas Então, vamos resolver esse problema. Precisamos pegar o código em vez deste, e temos que fazer o mesmo com os bastões também Ok, agora tudo parece incrível. Agora vou criar o efeito de desvanecimento. Temos que esconder as cartas. Vamos criar quadros-chave Ess com o nome chamado Anim one em 0%. Vou definir transform para traduzir x -15 Ram Além disso, precisamos de opacidade zero e visibilidade oculta. Então, em 100%, precisamos das mesmas propriedades com os seguintes valores. Traduzir x será zero, quanto à opacidade , será um E então precisamos de visibilidade visível. Vamos selecionar o primeiro cartão e usar essas propriedades por padrão. E também precisamos de animação com o cartão de valores um, que é o nome dos quadros-chave. Então, precisamos de duração. Vai ser 1 segundo, depois o tempo de atraso 1 segundo. Também precisamos de linhas lineares e avançadas. O primeiro cartão funciona bem. Vamos fazer o mesmo com o resto das cartas. Vou duplicar esse código duas vezes e depois mudar o seletor Além disso, precisamos traduzir x para traduzir Y. Então o nome será carta dois Precisamos aqui de y em vez de x. Quanto ao terceiro item, traduzimos x sem menos, então o nome será cartão três Mais uma vez, livre-se do sinal negativo. Na verdade, precisamos aqui de 15 Ram sem menos. Agora tudo parece e funciona muito bem. É isso aí, terminamos esse projeto. Vamos seguir em frente.