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. Def