Crie 10 modelos completos e modernos de design de IU

1. Apresentação: Bem-vindo ao novo curso, onde você pode aprender como criar modelos de design modernos e bonitos para seus sites. Se você deseja criar e personalizar seu portfólio, tornar-se um desenvolvedor experiente e ser contratado, então este é o curso certo para você. Juntos, criaremos dez sites mega, responsivos e de conflito com três tecnologias principais: HTML, CSS e Java Se você tem algum conhecimento básico dessas tecnologias e ainda tem problemas para criar seus sites. Ou, se você quiser aprimorar suas habilidades de desenvolvedores e designers , você veio ao lugar certo. Criamos este curso para oferecer aos alunos a melhor experiência em três tecnologias principais e dar a eles a oportunidade de criar os melhores modelos de design que lhes permitirão entusiasmar seus clientes Criaremos sites picantes para sites incompletos e nem todas as partes deles do zero Eles estarão cheios de efeitos e designs modernos, bonitos e bonitos. Começaremos com projetos relativamente simples e também passaremos por algumas partes avançadas. Podemos garantir que você dominará o desenvolvimento web de front-end após concluir este curso. Usando este curso, você pode obter a inspiração que o ajudará a aprimorar seus projetos e colocá-los em seu portfólio. Dominando apenas essas principais tecnologias de desenvolvimento web de front-end Você pode criar temas incríveis e modernos e simplesmente ser contratado. Além disso, você terá conhecimento suficiente para seguir em frente e aprender outras tecnologias, como algumas estruturas e bibliotecas de front-end, que hoje em dia são muito populares e O curso definitivamente não é pequeno. Portanto, seja paciente e tente tirar o máximo desse curso sem apenas copiar e colar o código Se eu estivesse no seu lugar, certeza sonharia com um curso como esse. Então junte-se a nós 2. Configuração: Olá e bem-vindo ao curso. Estamos felizes que você esteja aqui e esperamos que você aproveite o curso antes de nos aprofundarmos e começarmos a criar nossos projetos. Antes de tudo, temos que preparar nosso ambiente de trabalho. Tenho certeza de que a maioria de vocês já está preparada para escrever o código. Nesse caso, sinta-se à vontade para pular este vídeo e entrar nos projetos imediatamente. Mas se não, então esse não é o problema. Vamos prosseguir e configurar algumas ferramentas. Ao longo deste curso, precisaremos de duas ferramentas principais, que são um navegador web moderno e um editor de texto. Como navegador da web, vou usar principalmente o Google Chrome. E também, em alguns casos, precisaremos da ajuda do Mozilla Firefox. Tenho certeza de que você já sabe como instalar esses navegadores da web e acho que todos vocês já os têm. Mas de qualquer forma, vamos ver como baixá-los. Para obter o Google Chrome, precisamos acessar esse URL aqui e baixar o navegador da web. O processo de instalação é bem simples, então não vou passar por isso. Quanto ao Mozilla Firefox, você precisa usar esse URL e baixar o navegador aqui Ambos os links serão anexados a esta palestra. Tudo bem, vamos seguir em frente e falar sobre o editor de texto. Vamos usar o Visual Studio Code porque no momento, ele é um dos melhores editores de texto do mundo Obviamente, você pode se sentir à vontade e usar seu editor de texto favorito. Depende de você, mas eu recomendo usar o código VS. Para baixar o código VS, você precisa visitar este site e obter o editor de texto para Windows, Mac ou Linux. Este link também será anexado a esta palestra. O processo de instalação do visual Studio Code também é muito simples, então tenho certeza de que ele não terá problemas com ele. Tudo bem, então, depois de instalar as duas ferramentas, você estará pronto para começar Então, vamos direto aos projetos 3. Projeto 1 - Pré-visualização do projeto: Tudo bem, então, depois de configurarmos todas as ferramentas necessárias, agora estamos prontos para começar a construir nosso primeiro projeto O projeto será sobre alguns alimentos. Quero dizer, algo como vender alimentos diferentes. E consistirá em algumas seções diferentes. Antes de começarmos a escrever o código, vou analisar o projeto e descrever cada seção. A primeira seção será a slides de diferentes ícones Font e Awesome Em seguida, vem a seção de cartas, na qual teremos três cartas diferentes com formas 3D e também com um bom efeito de passar o mouse Em seguida, vem a galeria. É composto por seis itens de galeria diferentes. Temos aqui imagens com efeitos de sombra de vários níveis. Se passarmos o mouse sobre eles , algumas informações serão exibidas com efeitos bem legais Depois disso, teremos um filtro simples com alguns elementos de texto e um campo de entrada com um botão. Tudo bem, então essas são todas as seções que vamos construir Mas além disso, temos aqui uma boa barra de navegação. Você pode ver aqui o ícone do Menu. Se eu clicar nele, o número o exibirá na parte superior da página da web E os itens de navegação aparecerão com alguns bons efeitos de desvanecimento Se eu clicar no ícone naquela época, Albert não se esconderá. Ok, então isso é tudo sobre os projetos. Vamos construí-lo usando uma abordagem de força de trabalho. Quero dizer, ele será construído em um tamanho de tela extra grande, mas depois o tornaremos responsivo a diferentes tamanhos de tela Se eu inspecionar a página e verificar o projeto em diferentes tamanhos de tela, você verá que ele é responsivo e tem uma boa aparência Mais uma coisa a observar, como dissemos, o projeto é construído em uma tela extra grande. Portanto, se você estiver usando tamanho de tela relativamente menor do que o do projeto, pode não parecer bom durante as palestras Mas você não precisa se preocupar no final do dia, nós o tornaremos responsivo Enquanto isso, você pode usar o modo responsivo, definir a largura e a altura para 1920 pixels e 1080 pixels e acompanhar A última coisa que quero mencionar é que você pode baixar esses arquivos de origem inicial e final Eles estão anexados a esta palestra. Vamos seguir em frente. 4. Projeto 1 - crie uma marcação em HTML para desembarque e defina estilos comuns: Tudo bem, então estamos prontos para começar a construir nossos projetos. Eu criei uma nova pasta na área de trabalho chamada foods, na qual tenho outra pasta para as imagens. Vamos abrir essa pasta no código VS. A primeira coisa que vou fazer é criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Vou chamá-los de index.html, style.css, script.js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Para isso, vou usar um pacote de código VS embutido chamado imagem. Precisamos colocar o ponto de exclamação da urina e pressionar Tab ou Enter Então, vamos lá. Temos aqui as tags HTML básicas. Em primeiro lugar, vamos mudar o título. Vou inserir aqui Alimentos. Em seguida, vamos vincular arquivos CSS e JavaScript. Então, vou abrir a tag do link. E então precisamos especificar aqui o caminho do arquivo. Só precisamos do nome do arquivo, style.css. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E no atributo source, precisamos especificar script.js. Além disso, vou trazer aqui mais um link para Font, Awesome icons. Então, vamos ao Google e pesquisar Font Awesome, CDN, JS e pegar o primeiro link daqui Em seguida, abra uma tag de link nos elementos principais e cole o link como o valor do atributo de referência h. Ok, então todos os três arquivos estão conectados e agora é hora de executar o projeto no navegador. Para isso, vou usar um pacote de código do VS chamado servidor ativo, que nos permite executar o projeto ao vivo no navegador e fazer atualizações e alterações sem atualizar a página a cada vez Ok, finalmente, vou colocar o editor de texto e o navegador, assim. E comece. Vamos construir o projeto seção por seção. Criaremos a marcação para cada seção e depois estilizaremos cada uma delas. Vou começar com a primeira seção. Consiste no título e alguns ícones do Font Awesome, que, como você pode ver, estão se animando muito bem Então, vamos começar a criar a marcação HTML. Primeiro, vamos abrir os elementos div, que serão o contêiner Vamos atribuir a ele um evento de contêiner com nome de classe. Vou inserir sua seção de comentários um. E a seção um. Em seguida, abra o elemento da seção com uma classe, a Seção um. Então, como dissemos, esse elemento da seção incluirá o título e alguns ícones do Font Awesome. Então, vamos abrir a tag de cabeçalho H1 com o título da seção de classe. Como o conteúdo. Vamos inserir uma variedade de alimentos. Em seguida, precisamos inserir seus ícones Font, Awesome. Mas primeiro, vamos abrir a tag div, que será o invólucro desses ícones Vou atribuir a ela ícones da seção um da classe. Então, no geral, teremos dez ícones diferentes. Então, vamos em frente e criá-los rapidamente. Eu vou abrir, eu fico com as classes FAS, FAA egg. Então, vamos duplicar essa linha de código nove vezes e mudar rapidamente os nomes das classes O segundo será o waffle Stroop. Então teremos queijo, cachorro-quente. O próximo será um byte de baqueta. Depois comeremos maçã, sorvete. Em seguida, teremos peixe, biscoito e irmão. Tudo bem, então isso é sobre a marcação HTML da primeira seção Agora temos que começar a escrever um pouco de CSS. Ao longo deste projeto, vou usar um dos telefones do Google chamado non-metal Então, vamos ao site do Google Fonts e pesquisar por Nieto Então eu vou pegar aqui todos os estilos, exceto Itálica Então, vamos verificá-los. Então. Vou pegar o URL. Para isso. Precisamos clicar em Importar e , em seguida, copiar esse URL aqui. Vamos colá-lo no arquivo CSS. Tudo bem, a seguir vou criar alguns estilos comuns e padrão Então, vou inserir seus comentários. Estilos comuns. Em seguida, fim dos estilos comuns. Em seguida, selecione cada elemento para isso. Vou usar um asterisco. Então, primeiro, vou me livrar da margem e do preenchimento padrão de cada elemento Defina os dois como zero. Em seguida, vou definir o tamanho da caixa. Caixa de fronteira. Além disso, elimine o padrão nas linhas dos elementos do link. Para isso, temos que usar decoração texto. Não obteremos valor nenhum. Em seguida, remova o contorno padrão. Precisamos defini-lo como nenhum. Além disso, altere a família da fonte. Vamos configurá-lo para o novo Nieto sans-serif. E, finalmente, altere a espessura da fonte. Vou fazer 400. Tudo bem, como você pode ver, alguns dos estilos comuns são aplicados aos elementos A próxima coisa que vou fazer é definir o tamanho da fonte. Então, ao longo deste projeto, vou usar uma rampa como unidade de medida Por padrão, uma RAM é igual a 16 pixels, porque o tamanho da fonte do elemento HTML é igual a 16 Vou converter uma corrida em dez pixels. E para fazer isso, precisamos diminuir o tamanho da fonte do elemento HTML. Precisamos fazer com que seja 62,5 por cento. Portanto, nesse caso, uma RAM será igual a dez pixels. Ok? Então, como você pode ver, os elementos ficaram menores e, na verdade, com estilos comuns e padrão. Nós terminamos. Vamos começar a estilizar a seção um 5. Projeto 1 - Estilo de página de destino e crie a apresentação de slides: Então, vou personalizar o próprio elemento da seção. Mas primeiro, vamos inserir aqui novos comentários, seção um. E fora da Seção 1. Em seguida, selecione Elementos da seção. Então, primeiro de tudo, vou definir a largura e a altura. Vamos fazer com como fiz o presente. Isso provavelmente é altura. Vou fazer com que seja 100% da janela de visualização. Portanto, vamos configurá-lo em 200 VH. Em seguida, altere a cor de fundo. Vamos usar sua cor 333. Ok, então é possível ver que esta Seção 1 foi estendida para toda a página e sua cor de fundo foi alterada. Em seguida, vou colocar o conteúdo no centro. E para isso vou usar o flexbox. Precisamos definir a propriedade de exibição como flexível. Agora mesmo. Os elementos são colocados horizontalmente em uma linha e, na verdade, não precisamos deles Portanto, temos que mudar a direção da flexão e a coluna Make It Próximo. Para colocar os elementos horizontalmente no centro, temos que usar alinhar Então, os elementos são colocados no centro. E agora vou adicionar algum espaço entre eles. Para isso, vamos usar a propriedade justify content com um espaço de valor uniformemente Tudo bem, vamos falar sobre o elemento Seção. Vamos seguir em frente e personalizar o título. Eu vou selecioná-lo. Primeiro, vamos definir o tamanho da fonte para 12 RAM. Também altere a espessura da fonte. Vou deixar o título mais ousado. Vamos configurá-lo para 900. Também mude a cor, torne-a branca. E eu vou alinhar o texto no centro. Depois disso, vamos colocar suas palavras em maiúsculas usando texto para transformar maiúsculas E também vou criar algum espaço entre as letras usando o espaçamento contábil com o valor 0,5 Ok, finalmente, vamos criar um pequeno efeito de sombra. Vou usar sombra de texto com um valor de 0,3 RAM três vezes. E como cor, vou adicionar aqui, 000, que é o olá preto. Tudo bem, então o título é personalizado e agora temos que seguir em frente e cuidar dos ícones Então, vamos prosseguir e selecioná-los. Primeiro, vamos aumentar o tamanho da fonte, torná-la com 35 RAM e depois mudar a cor. Vou usar sua cor, um 7982d. Ok, então temos aqui nossos ícones, eles são muito maiores e, lembre-se, esses ícones devem ser colocados no centro e temos que animá-los. Primeiro. Vamos atribuir a eles a posição absoluta Então, agora eu estou colocado um em cima do outro. Isso acontece porque, por padrão, posição absoluta salta os elementos do fluxo normal da página Além disso, precisamos fixar as posições dos ícones. Acho que agora seria melhor se escondêssemos todos os ícones, exceto um, porque isso tornará nosso processo de trabalho mais conveniente. Então, vou comentar todos os ícones , exceto o primeiro. Logo depois disso. Vamos fixar a posição do ícone. Precisamos colocá-lo no centro. Então, temos que movê-lo um pouco para cima e para o lado esquerdo. Para isso, vamos usar a propriedade de transformação com a função translate. Na verdade, a disfunção nos permite mover os elementos de acordo com as direções horizontal ou vertical. Quero dizer, de acordo com o eixo x e o eixo y. Como os valores. Vamos instituir -50 por cento para ambas as direções. Tudo bem, isso é tudo sobre a posição do ícone. Finalmente, quero aumentar seu efeito de sombra. Então, vamos usar novamente a sombra de texto. Instale seu ponto na RAM ou três vezes. Use novamente a cor preta. Tudo bem? Como você pode ver, os ícones são personalizados e agora é hora de criar a apresentação de slides Em primeiro lugar, vamos recuperar todos os ícones. Então, vamos esconder e exibir os ícones usando a função de escala. Primeiro, vamos esconder todos os ícones. Por padrão, a função de escala tem o valor definido como um. E para esconder os elementos, precisamos definir a escala para zero. Agora, o icosaedro Em seguida, vou exibir o primeiro ícone porque a apresentação de slides começará com o primeiro Para isso, vou atribuir ao primeiro ícone mudança adicional de classe E então selecione o primeiro que eu puder usando esse nome de classe. Precisamos dos ícones da Seção 1. Eu mudo. Para tornar o ícone visível. Precisamos definir a escala para um. Além disso, precisamos usar novamente a função de tradução porque caso contrário, ela seria sobrescrita e a posição do ícone mudaria Tudo bem? O primeiro ícone é visível e todos os outros que eu conservo, aqueça-os. Agora temos que criar o Slideshow e, para isso, vou usar JavaScript Então, vamos abrir o arquivo script.js. Para alternar entre os ícones. Temos que remover uma alteração da classe edge todos os ícones em ordem e também com algum intervalo. A primeira coisa que precisamos fazer é selecionar todos os ícones. Então, vamos prosseguir e criar uma nova variável. Vou chamar os ícones. Que, para selecioná-los, vou usar um dos métodos chamado seletor de consulta Tudo o que precisamos é especificar aqui o nome da classe, os ícones da Seção 1, seguidos pelo íon. Então, em geral, seletor de consulta, todo método retorna um objeto semelhante a uma matriz chamado note least Seus itens têm números de índice baseados em zero, como matriz. Além disso, esse objeto tem uma propriedade de comprimento que usaremos um pouco mais tarde. Então, como dissemos, vamos deslizar os ícones com algumas integrais. Vou usar um dos métodos integrados chamado setInterval Isso nos permite executar a função repetidamente com alguns intervalos. Portanto, esse método usa dois argumentos. A primeira será uma função de retorno de chamada, que será executada repetidamente. Quanto ao segundo argumento, será a quantidade de tempo e deve ser expresso em milissegundos. No nosso caso, vou definir o intervalo como 4.000 milissegundos Tudo bem, como você se lembra, agora, o primeiro ícone tem mudança de classe Temos que selecionar esse ícone para remover a alteração de classe e, em seguida, adicionar classe ao próximo ícone. Então, vamos prosseguir e criar uma nova variável. Vou chamá-lo de ícone. Em seguida, use consulta, selecione um método para selecionar o elemento. Vamos selecionar esse elemento usando a mudança de classe. Depois disso, para remover a mudança de classe, tivemos que acessar as classes desse ícone. Então, vou usar uma das propriedades chamada lista de classes. Ele nos dá todas as classes que o elemento tem. Precisamos anexá-lo ao ícone. E agora temos que usar um dos métodos chamados removidos. Vamos especificar aqui a mudança de classe. Então, agora, após 4 s, o item será ocultado porque a mudança de classe será removida. Ok, em seguida, precisamos exibir e ocultar outros ícones. Para isso, precisamos ter acesso ao próximo ícone. Para fazer isso, vou usar uma das propriedades chamada irmão do próximo elemento Vamos anexá-lo ao ícone. Então, novamente, temos que acessar as classes desses elementos. E, finalmente, temos que adicionar a cada mudança de classe. Na verdade, quero mostrar todo o ciclo do Slideshow e quero torná-lo rápido Então, vamos transformar 4 s em um. Então, como eu vejo, os ícones estão mudando a cada segundo. Se eu inspecionar a página e exibir os elementos, você verá como mudança de classe é adicionada e remota de cada ícone Depois de removido do último ícone, recebemos um erro dizendo que não é possível ler a lista de classes de propriedade null Isso acontece porque o último ícone não tem nenhum próximo irmão Para corrigir esse problema, precisamos fazer um trabalho extra quando ele rastreia de alguma forma cada botão do ícone. Para isso, vou criar uma nova variável. Nesse caso, vou declará-lo com uma palavra-chave principal porque o valor dessa variável será alterado Essa variável será um contador e eu vou configurá-la como um por padrão. Então, em cada execução da função, em cada mudança, esse comentário deve aumentar em um Quando for maior que o comprimento dos ícones, devemos colocar o contador novamente em um. E também precisamos exibir o primeiro ícone retroiluminado. Então, para aumentar o valor em um, temos que usar o operador de incremento, que é expresso por dois sinais de mais Em seguida, precisamos criar a declaração if. E como condição, temos que verificar se I é maior que o comprimento do ponto do ícone. Portanto, se essa condição for verdadeira, significa que um ciclo da apresentação de slides acabou Portanto, precisamos exibir de volta o primeiro ícone e definir o contador como um. Para acessar o primeiro ícone, vou usar os ícones da lista de nós E então temos que especificar o número do índice do primeiro ícone, que será zero. Então, precisamos novamente de uma classe menor do que o método add. E precisamos especificar aqui a mudança do nome da classe. Além disso, precisamos definir a variável IBEC como uma. Ok? Então, se essa condição não for verdadeira, precisamos executar essa linha de código. Então, vamos criar outras declarações e inserir aqui essa linha de código. Ok? Então, quando todo o ciclo termina , ele começa novamente. Você pode ver isso aqui em Dev Tools. Tudo bem, estamos quase terminando a apresentação de slides. A única coisa que precisará fazer é adicionar algum efeito de transição. Então, vamos usar a transição. Então. Precisamos especificar aqui a transformação. E como duração, vou adicionar aqui 0,3 s. Além disso, precisamos adicionar a transição abaixo também. Porque uma vez que a escala dos ICD-10s diminuiu, o próximo ícone que virá deve esperar 4,3 s. Portanto, precisamos de algum Então, vamos instituir seus 0,3 s. Então, agora, como você pode ver, temos um efeito muito melhor E a única coisa que vou fazer é mudar a hora e torná-la 4 s. Tudo bem, é isso Terminamos a primeira seção. Vamos seguir em frente e cuidar do próximo. 6. Projeto 1 - Criar e Estilo de Cartões 3D: A próxima seção que vamos criar será a seção de cartões. Teremos um título de seção e três custos diferentes. Eles representarão algumas refeições populares. Os cartões terão formas 3D e também incluirão alguns elementos diferentes, como imagens, nomes e botões. Assim que passarmos o mouse sobre as cartas, elas se moverão ligeiramente para cima com algum efeito de sombra Tudo bem, vamos ver mais sobre esta seção. Vamos começar a criar uma marcação HTML. Vamos inserir novos comentários, seção dois e seção dois. Em seguida, abra os elementos da seção. Vou atribuir a ela a segunda seção da classe. Em seguida, vou criar um elemento de cabeçalho H1. Na verdade, esse título será semelhante ao anterior. Eles terão os mesmos estilos. Então, vou atribuir a ela o mesmo nome de classe, título de seção Quanto ao conteúdo, vamos colocar aqui refeições populares. Então, vou pegar essas toalhas do título desta seção e colá-las em estilos comuns. Tudo bem, então, como dissemos, teremos três cartas diferentes Vou envolvê-los com um elemento div, que será um contêiner de cartões Em seguida, vou abrir outra tag div, que será a carta real Portanto, é atribuído ao seu cartão de classe. Então, como eu disse, o cartão consistirá em três elementos diferentes. A primeira será uma imagem. Portanto, é uma tag de imagem aberta. Em seguida, no atributo de origem, vamos selecionar a imagem que precisamos aqui, cartão IMG um E também vou atribuir uma classe de imagem chamada IMG. Ok, a seguir teremos o nome do cartão, que será representado pelo título. Vamos abrir a tag de cabeçalho h3 com uma classe chamada name. Quanto ao conteúdo, vamos inserir aqui. Digamos peixe. Finalmente, vamos criar aqui o fundo. Vou atribuir a ela uma classe chamada BTN. Quanto ao conteúdo, vamos transformá-lo em uma borda agora. Tudo bem, então aqui temos nosso primeiro cartão. Além disso, você pode notar que o título está em todo esse estilo porque adicionamos ao mesmo nome de classe, título de seção. Como dissemos, teremos três cartas. Então, vou duplicar o cartão duas vezes e mudar os nomes das imagens e também os nomes dos cartões Então, precisamos aqui img2, bolo e depois IMG três Ok, então vamos ver sobre a marcação HTML. Vamos continuar e personalizar essa seção. Vou inserir novos comentários, seção dois e seção dois. Em seguida, selecione o elemento da seção. Então, primeiro de tudo, vou definir largura e altura. Eu vou definir muito o presente. Para a altura. Vou fazer com que seja cem por cento da janela de visualização. Então, vamos 3.200 vh. E também altere a cor de fundo. Eu vou usar uma nova cor também. Tudo bem, a seguir, vou alinhar os elementos usando o Flexbox. Quero dizer, o cabeçalho dos elementos e o recipiente dos cartões. Então, precisamos aqui do display flex. Como você sabe, ele coloca os elementos lado a lado. Então, neste caso, precisamos mudar a direção. Vamos fazer uma coluna. E também vou criar algum espaço entre os itens flexíveis usando o conteúdo justificado Espaço entre. E, finalmente, crie algum espaço dentro desta seção usando o preenchimento Vamos configurá-lo para dez rem na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, vamos ver sobre esse elemento da seção. Em seguida, vou cuidar dos cartões. Primeiro, vamos selecionar o contêiner. Vou colocar as cartas lado a lado em uma fileira. Para isso. Novamente, vou usar o flexbox. Então, para criar algum espaço entre os itens, vou usar justificar conteúdo com um espaço de valor uniforme Tudo bem, então os cartões são colocados horizontalmente em uma linha, e agora vou personalizar Vamos selecioná-lo. No início. Eu vou definir a largura. Vamos fazer com que corra. E depois mude a cor de fundo. Vou usar sua cor de 79, de a a D. Agora, como você pode ver, as imagens são muito grandes. Então, vamos em frente e consertar isso. Vou selecionar Imagem. E então vamos definir sua largura para 100%. Nesse caso, a imagem ocupará 100 por cento da onda de seus elementos principais, que é o cartão. Ok, agora temos um resultado muito melhor. Vamos seguir em frente e continuar estilizando o cartão. Vou criar algum espaço dentro do cartão usando o preenchimento Vamos configurá-lo para RAM nos quatro lados. Em seguida, vou alinhar os elementos usando o Flexbox. Vamos definir a propriedade de exibição como flexível. Além disso, precisamos mudar a direção porque, por padrão, display flex alinha os elementos horizontais em uma Em seguida, vamos criar algum espaço entre os itens usando o conteúdo justificado. Espaço entre. E por último, para alinhar os itens no centro horizontalmente, vamos usar o centro de alinhamento de Tudo bem, por fim, vou criar algum efeito de sombra. Vamos usar a sombra de caixa com os valores de uma RAM três vezes e com a cor preta. No momento, é isso em relação ao cartão. Vamos continuar e personalizar seu nome e o botão. Primeiro, vamos selecionar o nome do cartão. Vou aumentar o tamanho da fonte. Vamos fazer com três RAM. Também altere a espessura da fonte. Vou deixar o texto em negrito. Vamos atribuir a ele um 900. Também transforme texto em maiúsculas e crie algum espaço entre as letras usando espaçamento elétrico com o valor Depois disso, vou mudar sua cor. Vamos usar aqui 111. E também crie algum espaço na parte superior e inferior usando a margem. Vou definir a margem como RAM zero. Tudo bem, finalmente, vamos criar um pequeno efeito de sombra usando sombra de texto. Vamos interferir. 0,15 correu três vezes. E, novamente, a cor preta. Tudo bem, isso é tudo sobre o nome do cartão. Vamos seguir em frente e personalizar o botão. Vamos selecionar chamado btn. Em primeiro lugar, vou definir sua largura para 70%. Então eu vou mudar a cor de fundo. Vamos usar aqui 111, também mude a cor do texto. Nesse caso, vou usar cores ou 888. E então vou fazer os cantos da caixa e arredondar usando o raio da borda com o valor cinco Certo. Depois disso. Eu vou cuidar do texto do botão. Vamos mudar o tamanho da fonte, torná-la 1,5 RAM. Além disso, vou aumentar a espessura da fonte. Vamos configurá-lo para 800. Em seguida, crie algum espaço entre as letras. Vamos configurá-lo para apontar para RAM. Em seguida, vou capitalizar as palavras usando texto, transformar em maiúsculas e também eliminar a borda padrão Vamos defini-lo como nenhum. Certo? Portanto, o botão parece bom, mas precisamos adicionar mais alguns estilos. Vou criar espaço dentro do botão usando o preenchimento Vamos configurá-lo para 0,5 rem na parte superior e inferior e zero nos lados esquerdo e direito. Em seguida, vou mudar o tipo do cursor, torná-lo ponteiro e também criar alguma sombra Nesse caso, vou criá-lo no lado esquerdo. Para isso, vou inserir u -0,2 RAM e, novamente, menos ponto na RAM do que ponto E a cor preta. Quando você quiser criar uma sombra no lado esquerdo, precisará usar os valores negativos. Tudo bem, então o botão está personalizado e agora é hora de dar forma 3D ao cartão Para isso, vou usar pseudoelementos antes e depois Vamos continuar e começar com o lado esquerdo. Vou usar pseudoelementos anteriores. Antes de tudo, precisamos definir o conteúdo que ficará vazio. Então eu vou mudar a altura e a largura. Vou definir a altura para 100 por cento. Para a largura, vamos criar uma RAM e depois mudar a cor de fundo. Vou usar sua cor 817824. Ok, então agora o elemento não está visível. E para corrigir isso, vou definir sua posição como absoluta. Além disso, precisamos definir a posição do cartão para um parente. Precisamos disso para posicionar o pseudo-elemento anterior acordo com seu elemento pai Então, agora o elemento está visível, mas precisamos mudar sua posição. Precisamos colocá-lo no lado esquerdo do cartão. Então, vamos seguir em frente e definir a propriedade principal. Vamos defini-lo como zero. Além disso, precisamos definir a propriedade esquerda. Vamos fazer com que menos uma corrida. Então, agora a posição do elemento está fixa, mas como você pode ver, precisamos incliná-la um pouco Vamos usar a propriedade de transformação com a função de inclinação. Nesse caso, precisamos inclinar os elementos verticalmente. Então, precisamos usar aqui o eixo y. Vamos matar os elementos em 45 graus. Tudo bem, então o elemento está inclinado, mas ainda assim sua posição não está Por padrão, quando usamos a propriedade de transformação , o elemento se move de acordo com seu centro. Portanto, a origem da transformação é definida no centro. Mas, nesse caso, precisamos mudá-lo e corrigi-lo. Então, agora vamos considerar que o problema está resolvido. O elemento está posicionado perfeitamente. E a última coisa que vou fazer é adicionar um pequeno efeito de sombra. Vamos usar box-shadow com os valores -0,1 RAM. Então, novamente, -0,1 RAM que precisamos para 0,1 rem e a cor preta Ok, isso é tudo sobre o lado esquerdo. Agora, eu vou cuidar do primeiro. E para isso, vamos usar depois de pseudoelementos. Na verdade, também precisamos usar as mesmas propriedades para o pseudoelemento, mas com valores diferentes Então, vou duplicar esse código aqui e depois vou fazer algumas alterações Portanto, precisamos fazer com que a altura seja de uma RAM. Quanto à largura, será de 100%. Em seguida, vamos mudar a cor do plano de fundo. Nesse caso, vou usar 8f83, 17. Então, vamos viver a posição absoluta como está. Como propriedades superior e esquerda, precisamos de menos uma RAM como valor da propriedade superior Quanto à propriedade à esquerda, será zero. Tudo bem, a seguir vem a propriedade de transformação com essa função Q. Nesse caso, precisamos dimensionar o elemento horizontalmente. Portanto, precisamos usar aqui o eixo x. Quanto à origem da transformação, precisamos colocá-la no fundo. Além disso, vamos deixar a sombra da caixa como está com o formato dos cartões. Nós terminamos. Finalmente, vou criar um efeito de foco. Antes disso, vou girar e escalar um pouco o código Então, vamos usar a propriedade de transformação. Vou girar verticalmente de acordo com o eixo y. Vamos inserir seus 20 graus. Quanto à função de inclinação, vou inclinar os elementos horizontalmente Então, precisamos aqui do eixo x. Vamos interferir menos dois graus. Tudo bem, agora vou criar um efeito de foco. Então, uma vez que passamos o mouse sobre o cartão, precisamos movê-lo ligeiramente para cima Precisamos nos transformar. Novamente com as funções de rotação e escala. Precisamos aqui de 20 graus e depois menos dois graus. E também precisamos adicionar aqui a função Translate com o eixo y e como valor, vamos entrevistar menos três rampas Além disso, vou mudar os efeitos de sombra ao passar o mouse Então, vamos usar box-shadow com duas rampas três vezes e com uma Ok, então, quando passarmos o mouse sobre o cartão, eles se moverão para cima e a sombra também mudará Na verdade, essas coisas acontecem sem nenhum efeito suave. E para corrigir isso, vamos usar a transição. Precisamos especificar aqui a transformação com uma duração 0,5 s. E também precisamos uma sombra de caixa com a mesma duração. Tudo bem, então o efeito de transição funciona bem e, na verdade, terminamos com esta seção Vamos seguir em frente e cuidar do próximo. 7. Projeto 1 - Criar e Style Foods Gallery: A próxima seção será a galeria na qual teremos seis imagens de comida diferentes com alguns efeitos interessantes. Cada imagem terá várias sombras coloridas. Quando passarmos o mouse sobre a imagem , algumas informações serão exibidas, como o nome da comida, alguma descrição e duas linhas diferentes A imagem em si terá algum efeito desfocado. E também a sombra da imagem se estenderá bem. E todos esses defeitos acontecerão sem problemas. Tudo bem, vamos começar a criar a marcação HTML Como de costume, vamos inserir novos comentários, seção três. E da seção três. Aquele elemento de seção aberta atribuído a cada classe, seção três. No próximo minuto, aqui, o título desta seção, que será semelhante a outros cabeçalhos de seção Então, vou copiá-lo da seção anterior e depois vou mudar o conteúdo. Vamos inserir aqui a galeria. Tudo bem, então, no geral, teremos seis itens de calorias. Eles serão representados pelos elementos do link. E antes de criá-los, vou abrir a tag div, que será o invólucro desses links Vou me dedicar à galeria da turma. Em seguida, vou abrir a tag do link, que terá o link da galeria de classes. Além do atributo class, também vou usar o atributo title. Ele nos permite exibir algum texto quando passarmos o mouse sobre o link Vamos inserir seu pedido agora Tudo bem, então cada elemento do link consistirá em um título de imagem e no parágrafo Vamos abrir a tag de imagem e selecionar Gallery IMG one na pasta de imagens. Também vou atribuir à imagem a classe de alimentos IMG. Em seguida, vêm os elementos de cabeçalho h3. Vamos atribuir à classe o nome do alimento como conteúdo. Vamos inserir suas panquecas. E, finalmente, vou inserir seu parágrafo com uma descrição completa da classe. E como conteúdo, vou colocar aqui um texto fictício Ok, então aqui temos o primeiro item. Como dissemos, no geral, teremos seis deles. Então, vou duplicar o elemento de link cinco vezes e depois fazer algumas alterações Precisamos aqui, img2. E o nome vai ser cupcakes. Então teremos AMG ou três. Inofensivo. Então, para o quarto item, vou inserir aqui hambúrguer O próximo será Sahlman. Quanto ao sexto item, vou comer seus vegetais. Tudo bem, então isso é tudo sobre a marcação HTML. Agora, estamos prontos para começar a escrever alguns CSS. Vou criar novos comentários, seção três. E a seção três. Em seguida, selecione os elementos da seção. No começo, vou mudar a cor de fundo. Vamos torná-lo cinza escuro usando a cor 333. E também vou criar algum espaço dentro desta seção na parte superior e inferior dela. Usando preenchimento com o valor cinco, rem e zero. Tudo bem? Antes de começarmos a personalizar a galeria, quero cuidar do tamanho das imagens porque no momento elas são muito grandes. Então, vamos selecionar Imagem. Vou definir com 220, 4% da janela de visualização fora da largura Quanto à altura, vou fazer com que ela tenha 15 janelas de visualização. Quero dizer 15% da largura da janela de visualização. E também vou usar a capa de alimentação de objetos, o que nos permitirá manter a qualidade da imagem. Não será esticado. Tudo bem, então selecione Galeria, quero dizer o contêiner dos links Então, no geral, teremos seis links e vou colocá-los em linhas. Eu vou fazer isso usando o flexbox. Precisamos definir a propriedade de exibição como flexível. Além disso, para colocar imagens em duas funções, precisamos flexionar a quebra com uma quebra de valor Agora, as imagens são colocadas em duas linhas Em seguida, vou colocá-los no centro e também criar algum espaço entre as imagens. Portanto, para colocá-los no centro, precisamos alinhar os itens no centro e, para criar algum espaço entre as imagens, precisamos justificar o espaço do conteúdo Finalmente, vou criar algum espaço entre o título e a galeria. Vamos usar a margem superior com a rampa de valor dez. Tudo bem, então com o layout, terminamos. Vamos continuar e personalizar os elementos do fazer. Vamos começar com os nomes dos pés. Portanto, o nome do pé deve ser reproduzido no canto superior esquerdo da imagem Então, vou definir sua posição como absoluta. Em seguida, precisamos definir a posição dos elementos do link como relativa porque é um elemento pai e precisamos posicionar o título de acordo com o link. Em seguida, defina as propriedades superior e esquerda do nome do alimento em três rampas. Quero dizer, ambas as propriedades. Tudo bem. Portanto, os cabeçalhos são posicionados da maneira correta. Vamos em frente e personalizá-los. Vou mudar o tamanho da fonte. Vamos chegar até Ram. Então, vamos aumentar a espessura da fonte. Vou configurá-lo para 700. Então, vamos transformar o texto em maiúsculas. Crie algum espaço entre as letras usando espaçamento entre letras, 0,1 RAM E por último, mude a cor, torne-a branca. Ok, isso é tudo sobre o título. Em seguida, vou personalizar o parágrafo. Então, vamos selecioná-lo. Em primeiro lugar, vou definir sua posição como absoluta. E então vou definir as propriedades inferior e esquerda. Vou definir a propriedade do botão dois ou três, a largura da janela de visualização Quanto à propriedade esquerda, vou torná-la aleatória. Então, o parágrafo está posicionado. Mas, como você pode ver, o layout da galeria está confuso Eu vou consertar isso. Vamos prosseguir e criar algum espaço entre os links usando margem. Vou fazer para rem na parte superior e inferior e um rem nos lados esquerdo e direito. Tudo bem, agora o problema está resolvido. Vamos seguir em frente e adicionar mais alguns estilos ao parágrafo. Em seguida, vou definir a largura e torná-la 70%. Em seguida, vamos alterar o tamanho da fonte, torná-la 1,5 RAM e também alterar a espessura da fonte. Vou torná-lo um pouco mais leve. Vamos configurá-lo para 300. Depois disso, vamos criar algum espaço entre as letras, tornando-o 0,1 RAM. Além disso, vou transformar o texto em maiúsculas N. Finalmente, mude a cor, torne-a branca Tudo bem, então com um parágrafo, terminamos. É estilizado. E agora vou criar duas linhas. Um abaixo do título e o segundo no lado direito do parágrafo. Vou criar essas linhas usando pseudoelementos antes e depois Primeiro, vamos criar uma linha no lado direito do parágrafo. Vamos usar os pseudoelementos anteriores. Antes de tudo, precisamos definir o conteúdo. Vamos esvaziá-lo. Em seguida, vou definir a posição como absoluta. E para tornar a linha visível, vamos definir uma largura, torná-la um ponto para a RAM. Além disso, precisamos definir a altura para 80 por cento e , em seguida, alterar a cor de fundo, torná-la branca. Portanto, a linha é viável, mas precisamos mudar sua posição Precisamos colocá-lo no lado direito do parágrafo. Então, vamos definir a posição superior como, para a largura da janela de visualização. Quanto à propriedade esquerda, vou fazer com que seja 80%. Tudo bem, vamos ver em relação aos pseudoelementos anteriores. Agora, vou criar uma segunda linha. Na verdade, ambas as linhas terão as mesmas propriedades. Então, vamos duplicar esse código e depois fazer algumas alterações Eu vou mudar a posição superior. Vamos fazer com que seja 30%. Além disso. Precisamos mudar a propriedade esquerda. Vamos configurá-lo para, para executar isso, eu vou mudar a largura. Vamos fazer com que seja 90%. Quanto à altura, será ponto a rampa. Tudo bem? Então, as linhas são criadas e , na verdade, todos os elementos são quase personalizados. A única coisa que vou fazer antes de criarmos um efeito de foco é criar um efeito de sombra de vários níveis Para fazer isso, só precisamos usar a propriedade box shadow com vários valores como esse. Eu vou criar a primeira Sombra. Vamos inserir 0,3, 0,3 RAM em vez de 0,1 RAM e a cor E9 em nove a nove Então, a primeira sombra é criada, então vá em frente e crie a próxima. Vou inserir aqui 0,5 rem, 0,5 rem 0,1 RAM e a cor A2 e946 Então, o próximo será 0,7 rem, 0,7 rem, 0,1 RAM. E eles ligam para 97 CE nove. Provavelmente é o último. Vamos fazer com que seja uma rampa de 0,9. 0.9 rodava 0,1 RAM e a cor e92 999. Tudo bem, então aqui temos as sombras e agora estamos prontos para criar um efeito de foco. Por padrão, esses elementos devem estar ocultos. Então, vamos começar com o título. Vou tornar sua largura zero. Além disso, precisamos usar sua propriedade de estouro com o valor oculto Portanto, o título está oculto. Em seguida, vou esconder o parágrafo. No caso do parágrafo, vou usar opacidade de suco com valor zero e também visibilidade Como você pode ver, o parágrafo também está oculto. E agora vou esconder essas duas linhas. Vou definir a altura como zero para a linha vertical. Quanto à linha horizontal, vamos definir sua largura como zero. Tudo bem, então todos os elementos estão ocultos e agora podemos criar um efeito de foco. Vou começar com as linhas porque elas devem aparecer primeiro. Então, vamos selecionar o link da galeria com o mouse, seguido pelo pseudo elemento anterior Precisamos aqui definir a altura para oito por cento. Vamos duplicar esse código. Eu vou mudar antes e depois. E também, em vez de altura, precisamos de largura com o valor de nove por cento. Além disso, para tornar o efeito mais inteligente, temos que usar a transição Precisamos aqui de uma altura de 0,5 s. E também em uma transição com 0,5 s. Ok, então quando passarmos o mouse sobre a imagem, as linhas tangentes aparecerão Em seguida, vou exibir o título. Então, vamos selecionar o link da galeria com o mouse, seguido pelo nome do alimento Lembre-se de que diminuímos o tamanho do título para zero. Portanto, precisamos definir com 200 por cento. Além disso, para tornar o efeito mais suave, novamente, precisamos fazer a transição com os valores com 1,5 s. Além disso, precisamos aqui de algum tempo de atraso porque primeiro as linhas devem aparecer e depois disso, temos que exibir o cabeçalho Então, vamos definir o tempo de atraso de 2,5 s. Na verdade, esse efeito de transição acontecerá quando passarmos o mouse sobre a imagem Como você pode ver, o título começa a ser exibido quando as linhas aparecem. Mas quando saímos do mouse, o cabeçalho imediatamente se eleva. E para corrigir isso, precisamos de outra transição, que deve fazer parte do próprio título. Vamos definir com 2,3 s. Ok, então agora tudo funciona bem. Vamos seguir em frente e fazer o mesmo com o parágrafo. Vamos selecionar o link da galeria com o mouse, seguido pela descrição do alimento Então, no momento, o parágrafo tem opacidade zero e visibilidade E agora precisamos de opacidade com o valor um. Visibilidade visível. Além disso, precisamos aqui de opacidade de transição do que a duração de um segundo e o tempo de atraso, mas neste caso 1 s. E exatamente da mesma forma precisamos usar a segunda Vamos passar a opacidade com uma duração de 0,3 s. Tudo bem, então o poder do grupo E agora temos que seguir em frente e cuidar da imagem. Primeiro, vamos mudar a sombra ao passar o mouse. Então, vamos continuar e selecionar novamente o link da galeria com o mouse Então precisamos de uma imagem de comida. Na verdade, vou copiar esse código daqui e apenas alterar os valores. Precisamos aqui, 1 g duas vezes. Então, para a segunda sombra, precisamos correr. Então, o próximo será de três RAM. Então, para o último, precisamos de RAM. Além disso, novamente, temos que usar a transição. Vamos interferir tudo e a duração é de 0,5 s. Tudo bem, então, como você pode ver, a sombra está mudando quando passamos o mouse sobre a imagem É claro que isso não é tudo que precisamos para adicionar mais algumas coisas à imagem. Precisamos deixá-lo embaçado. E para isso, temos que usar uma das propriedades chamadas filtro com a função de ventilador Vamos usar azul e o valor, vou colocar sua rampa de 0,5 Então, como você pode ver, a imagem fica embaçada. E quando passamos o mouse sobre ele, podemos tornar esse efeito muito melhor se diminuirmos a opacidade Vamos fazer 0,5. Tudo bem, agora temos resultados muito melhores. E a única coisa que precisamos fazer é aumentar um pouco a escala da imagem ao passar o mouse Para isso, vamos usar Transform. Com a função de escala. Vou aumentar a escala da imagem para 1,1. Tudo bem, então estamos quase terminando. Tudo funciona perfeitamente. Mas temos aqui um pequeno problema. Como você pode ver, a linha vertical não está bem visível porque acabou atrás da imagem. Então, para corrigir isso, temos que usar a propriedade z-index Vamos torná-lo maior que zero, que é o valor padrão. Vou fazer dez. Tudo bem, então é isso. Terminamos com a galeria. Eu acho que parece muito bom. Usamos aqui alguns efeitos interessantes, então acho que você vai gostar. Ok, agora é hora de seguir em frente e cuidar da próxima seção. 8. Projeto 1 - Criar e personalizar o Rodapé: A próxima seção será o rodapé, que será simples Teremos um parágrafo de título, InputField com um botão e algum texto de direitos autorais abaixo. Vamos começar a escrever a marcação HTML. Vou inserir sua nova seção de comentários no final da seção quatro. Em seguida, abra o elemento da seção com uma classe, seção quatro. Então, no geral, teremos três partes diferentes e o rodapé, o primeiro será o título e o parágrafo que são colocados no lado esquerdo Vamos abrir o elemento div, que será o invólucro desses dois Vou atribuir a ela uma seção de classe para texto. Em seguida, abra os elementos do cabeçalho H2 com a seção de classe para título E quanto ao conteúdo, vou me inscrever no parágrafo do instituto. Deve ter seção de aula por parágrafo. E quanto ao conteúdo, vou instruí-lo a ser o primeiro a saber sobre novos produtos Tudo bem, então isso é tudo sobre a primeira parte. O próximo serão os elementos formados, que incluirão o elemento de entrada e a parte inferior. Portanto, é um formulário aberto com o formulário de inscrição na aula. Em seguida, vou inserir sua entrada com o tipo e-mail. Em seguida, vou inserir as entradas do formulário de inscrição na aula. E também vamos usar o atributo de espaço reservado com um valor, digite seu e-mail Tudo bem, isso é tudo sobre o próximo botão Colunas de entrada. Vamos definir seu tipo a ser enviado e também atribuído a cada atributo de classe com um formulário de inscrição de valor BTN. Na verdade, o botão será representado pelo ícone Font Awesome. Então, vamos abrir os elementos I com os nomes das classes FAS, FAA, seta, certo? Ok, isso é tudo sobre os elementos do formulário. Finalmente, vou criar o parágrafo para o texto de direitos autorais. Portanto, é um elemento open p com os direitos autorais da classe. E então, como conteúdo, vamos inserir o código e criar, seguido pelo sinal de direitos autorais. Vou usar aqui HTML5, entidade, e comercial, cópia, ponto e vírgula Todos os direitos reservados. Tudo bem, então com a marcação HTML, terminamos e podemos personalizar esta seção Vamos inserir novos comentários no arquivo CSS. Precisamos da seção quatro. Seção quatro. Em seguida, selecione os elementos da seção. Primeiro, vou definir largura e altura. Vamos definir com 200 por cento. Quanto à altura, vou fazer com que seja 30% da janela de visualização E também altere a cor de fundo. Vamos usar aqui chamado 222. Ok, em seguida, vou cuidar do layout das três partes. Vou usar o Flexbox. Vamos definir a propriedade de exibição como flexível. E então, para criar algum espaço ao redor dos itens, vou usar o conteúdo justificado com espaço de valor ao redor Além disso, vou criar algum espaço na parte superior e inferior desta seção. Para isso, vamos usar o preenchimento com os valores três, rem e zero Tudo bem? Então, agora, todas as três partes são colocadas horizontalmente em uma linha, mas na verdade não precisamos disso Vou colocar o parágrafo de direitos autorais na parte inferior desta seção. Então, vamos cuidar da exposição. Vou atribuir a cada posição absoluta. Então, para alinhar o parágrafo de acordo com seu elemento pai, vou definir a posição do elemento da seção como relativa E depois disso, vamos definir a posição inferior do parágrafo e fazer três rodadas. Ok, com o layout, terminamos. Vamos começar a personalizar cada um dos elementos. Vou selecionar os elementos div do wrapper. Vamos atribuir a ele a transformação do texto maiúsculas porque precisamos que os dois elementos, quero dizer, o título e o parágrafo sejam maiúsculos Em seguida, vou cuidar Então, vamos selecioná-lo. Vou aumentar o tamanho da fonte. Vamos deixá-lo cheio de RAM. E também deixe o texto em negrito ou usando a espessura da fonte com um valor 900. E, finalmente, mude a cor. Vou usar sua cor H7N9, A2. Então, eles estão indo. Parece bom. Vamos seguir em frente e começar o parágrafo. Vamos selecioná-lo. Altere o tamanho da fonte, torne-a redonda 1,5. Quanto à cor, vou usar 888 Tudo bem, isso é tudo sobre a primeira parte. Vamos seguir em frente e cuidar do elemento do formulário. Dentro do elemento do formulário, temos uma entrada e um botão, e vou colocá-los lado a lado Para isso, vou usar o flexbox. E também para centralizar os dois elementos, em particular, vamos usar alinhar itens ao centro Então, agora temos um pequeno problema aqui. Como você pode ver, o elemento do formulário acabou ficando um pouco inativo. E para corrigir isso, vou atribuir elementos à seção, alinhar a propriedade dos itens com o valor flex Nesse caso, os dois itens flexíveis acabarão na parte superior do contêiner Tudo bem, vamos continuar e personalizar o elemento de entrada. Vamos selecioná-lo. Em primeiro lugar, vou definir largura e altura. Vamos começar com 235 corridas. Quanto à altura, vou fazer com que sejam cinco RAM. Crie algum espaço dentro da entrada usando o preenchimento. Vamos configurá-lo para um rem nos quatro lados e também alterar a borda. Vou interferir ponto a ponto na cor sólida de um 7982d. Ok, a seguir, vamos cuidar do texto. Vamos mudar o tamanho da fonte, torná-la 1,6 RAM. Além disso, deixe os textos um pouco mais em negrito usando a espessura da fonte com um valor de 700 Em seguida, vou criar algum espaço entre as letras usando o espaçamento entre letras de 0,1 RAM E também mude a cor. Faça novamente de 79 a a D. Tudo bem, é isso em relação aos elementos de entrada E antes de personalizar o botão, vou mudar a cor do atributo de espaço reservado Então, vamos selecionar o elemento de entrada seguido pelo espaço reservado e atribuído a ele a cor H7N9, a a D. Tudo bem, agora é hora de cuidar do botão primeiro, vamos mudar vamos Vou definir sua posição como relativa. Usamos aqui a posição relativa porque precisamos usar a propriedade left. E no caso da posição estática, que é a padrão, podemos acessar essa propriedade. Vamos definir a propriedade left como -4,5 aleatória. Ok, então o botão está posicionado e agora precisamos personalizá-lo. Antes de tudo, vamos definir a largura e a altura. Eu vou fazer os dois para RAM. Em seguida, mude a cor de fundo, torne-a 333. E também mude a cor. Você usa novamente H7N9 a a D. Ok, então o botão já parece bom, mas precisamos adicionar mais alguns estilos Eu vou me livrar da borda padrão. Então, vamos defini-lo como nenhum. Em seguida, aumente o tamanho da fonte, faça com 1,8 RAM. E também mude o tipo do mais grosso, torne-o mais ponteiro. Tudo bem, isso é tudo sobre os elementos do formulário. Agora precisamos personalizar o último elemento nesta seção, que é o parágrafo. Então, vamos mudar o tamanho da fonte, fazer com que seja executada em 1.7. Além disso, vou tornar o telefone mais leve usando o peso da fonte com o Em seguida, mude a cor, torne-a e. E também crie algum espaço entre as letras. Vamos fazer com que seja 0,1 rodado. Tudo bem, a seguir vou criar a borda na parte superior do parágrafo Então, vamos usar a propriedade border top com os valores ponto 1 g, sólido. E como cor, vamos usar 888. E também vamos criar algum espaço usando o preenchimento superior com o valor seis executado A borda é criada, mas, como você pode ver, ela é estendida de acordo com a largura do parágrafo. Precisamos que a borda ocupe toda a largura da página. Então, vou aumentar a largura do parágrafo. Vamos defini-lo para cem por cento. Agora, o tamanho da borda aumentou, mas o parágrafo acabou no lado esquerdo. E para corrigir isso, vamos usar o centro de alinhamento de texto Tudo bem, então com o rodapé, terminamos. Em seguida, temos que cuidar da navegação. Então, vamos seguir em frente. 9. Projeto 1 - Criar e estilo Navbar fixo: A navegação vai ser meio interessante. Como você pode ver por padrão, ele está oculto e o ícone Menu é exibido no canto superior esquerdo da página. Tem uma posição fixa. Depois de clicar nele, o número será exibido de cima para baixo. E todos os itens de navegação aparecerão com algum efeito de desvanecimento Além disso, se eu passar o mouse sobre eles , eles mudarão de cor Se eu clicar no ícone do menu, volto para baixo em Alberta, eu me esconderei novamente. Vamos ver o que vamos criar. Então, vamos começar com a marcação HTML. Vou escrever isso antes do contêiner. Vamos inserir novos comentários. Agora bar. E de Navarra. Em seguida, abra elementos de navegação em HTML5 com a classe agora par. Portanto, no geral, teremos cinco itens de navegação diferentes. Eles serão representados pelos links, e cada um deles incluirá um ícone Font Awesome com alguns textos. Ok, vamos abrir os elementos do link com a classe agora por link. Então, aqui, o elemento I com uma classe é FAS uma casa em que o ícone Font Awesome será seguido pelos elementos de extensão. Vamos inserir aqui a página inicial. Ok, então, no geral, teremos cinco itens de navegação. Vamos duplicar o elemento link quatro vezes e , em seguida, alterar os nomes das classes e também o conteúdo dos elementos de extensão O segundo serão utensílios. E como conteúdo, vamos escrever refeições. Então vamos comer hambúrguer. O item vai ser hambúrguer. Então, a próxima será pizza em fatias de pizza. E o último item será um contato insosso ou telefônico. Tudo bem, então aqui temos os itens de navegação. A única coisa que precisa fazer é criar um elemento div para o ícone Menu atribuído ao Class Menu Na verdade, esse elemento vai ficar vazio. Nós o personalizaremos a partir do CSS. Dito isso, em relação à marcação HTML, vamos começar a escrever CSS Vou inserir novos comentários logo após os estilos comuns que precisamos aqui, navbar e of Navarre Em seguida, selecione elementos suficientes. E antes de tudo, defina largura e altura. Vou definir a largura para 100%. Quanto à altura, vamos fazer com 14 RAM, e também mudar a cor de fundo, torná-la preta. Ok, então aqui temos a barra de navegação. Na verdade, isso deve ser corrigido. Portanto, precisamos definir sua posição fixa e também tornar a propriedade superior zero. Tudo bem, então se eu rolar a página para baixo, o número manterá sua posição fixa Como você pode ver, uma vez que rolamos para baixo, alguns dos elementos e subimos na parte superior da barra de navegação E para corrigir isso, vou usar a propriedade index com um valor maior, digamos 100. Então, agora o problema está resolvido. Vamos seguir em frente e cuidar do layout dos itens de navegação. Para isso, vou usar o Flexbox. Vamos definir a propriedade de exibição para flexionar e depois centralizar os itens horizontalmente e verticalmente usando justify-content center verticalmente usando justify-content centralizar os itens horizontalmente e verticalmente usando justify-content center e alinhar itens, centralizar. Tudo bem, então os itens são colocados no centro. E a última coisa que eu quero fazer com o elemento de navegação é criar um pequeno efeito de sombra Vamos usar a sombra da caixa. Isso parece apontar para a RAM três vezes e como a cor. Vamos usar preto. Ok, então, dentro desse elemento, terminamos. Vamos seguir em frente e personalizar os elementos do link. Vamos selecionar agora por link. Em primeiro lugar, vou mudar a cor. Vamos torná-lo cinza claro usando a cor AAA. Além disso, vou criar algum espaço nos lados esquerdo e direito usando margem com um valor de 0,4 rampa Tudo bem, a seguir vamos personalizar os elementos I e também a extensão Eu quero torná-los maiores. Então, primeiro de tudo, vou selecionar Font, ícone Awesome. Vamos aumentar o tamanho da fonte, torná-la com sete RAM. Quanto ao elemento span, vamos alterar o tamanho da fonte. 2,5 RAM. Então, vou tornar os itens mais ousados. Vamos definir a espessura da fonte para 900. Além disso, vou criar algum espaço entre as letras usando o espaçamento entre letras, o valor 0,5 RAM E, em seguida, crie algum espaço na parte superior usando a margem superior de 0,5 arredondada. Tudo bem, então vamos considerar os itens de navegação parecem muito melhores, mas precisamos mudar o layout Quero dizer, temos que colocar, eu posso terminar o elemento de extensão um em cima do outro. Então, para isso, vamos usar o flexbox. Então. Para colocar elementos na coluna, precisamos mudar a direção. Vamos fazer uma coluna. Em seguida, coloque os itens no centro. Quero dizer vertical e horizontalmente. Use justify-content center e alinhe o centro de itens. Os itens de navegação estão bonitos. Antes de prosseguirmos e personalizarmos o ícone do Menu, quero criar um pequeno efeito de passar o mouse Depois de passar o mouse sobre os itens, quero mudar ligeiramente a cor Então, vamos selecionar um link Albert com o mouse e mudar de cor, torná-lo branco Além disso, para tornar o efeito mais suave, vamos usar a transição com os valores de cor e 0,3 s. Tudo bem, é isso. No momento, nos itens de navegação, terminamos. Vamos seguir em frente e personalizar o ícone do Menu. Em primeiro lugar, vou definir largura e altura. Vamos definir a largura para diminuir a RAM. Quanto à altura, vou fazer com que seja seis RAM. E também mude a cor de fundo, torne-a preta. Portanto, no momento, o ícone do menu não está visível porque está colocado atrás da barra de navegação Então, vou colocá-lo um pouco abaixo, como se o ícone do menu da barra de navegação também tivesse uma posição fixa Então, vamos definir a posição para fixar. Em seguida, defina a propriedade principal, torne-a 15 RAM. Quanto à propriedade esquerda, vou fazer dela cinco rampas. Tudo bem, agora, como você pode ver, o ícone do menu está visível Em seguida, vou cuidar de sua forma, vou mudar sua forma usando o raio da borda Na verdade, você pode definir diferentes raios de borda em lados diferentes Vamos usar o raio da borda. O primeiro valor pertence ao canto superior esquerdo. Vou fazer com que seja 30 RAM. Em seguida, o próximo é para o canto superior direito. Vamos chegar até a RAM também. Então teremos o canto inferior direito. Vou fazer com que seja asfalto de 15 RAM no canto inferior esquerdo Vamos fazer com que ele tenha 15 RAM também. Ok, como você pode ver, a forma do ícone do menu foi alterada. Em seguida, vou adicionar um pequeno efeito de sombra. Então, vamos usar box-shadow. Isso é Instituto 0,13 vezes com uma cor preta. Além disso, vou adicionar aqui outra sombra, mas no lado esquerdo. Então, vou usar aqui 0.1 executado duas vezes com o sinal de menos, depois 0.1 RAM e novamente a cor preta E por último, vamos mudar o tipo do cursor, torná-lo ponteiro Tudo bem, é isso, sobre o ícone Menu. Em seguida, vou criar uma linha que será parte do ícone. E vamos criá-lo usando o pseudo elemento anterior. Então, vamos usar antes. Antes de tudo, defina o conteúdo, deixe-o vazio. Então eu vou para o set, podemos nos esconder. Vamos fazer com 0,3 RAM. Quanto à altura, vou fazer 15 rampa, depois mudar a cor de fundo e torná-la preta E também defina a posição como absoluta. Portanto, a linha está visível. Como você pode ver, temos que fixar sua posição. Vamos definir a posição superior, dois -15 RAM de asfalto na posição esquerda, precisamos colocar a linha no A largura da linha é igual a 0,3 RAM. Precisamos movê-lo para o lado esquerdo em 50 por cento. Mas também precisamos levar em consideração a largura da linha para centralizá-la perfeitamente. Então, para fazer isso, vou usar a função calc, onde devemos calcular 50 por cento -0,15 RAM, que é a metade da largura da linha Então, novamente, neste caso, a linha estará perfeitamente centralizada Ok, por fim, vamos adicionar algum efeito de sombra à Use box-shadow com os valores 0,1 RAM, zero, depois 0,1 RAM e a cor preta Ok? Então, com esse estilo, terminamos. Agora temos que tirar uma soneca ou trabalhar. E para isso, vou usar um pouco de JavaScript. Antes disso, vou colocá-lo agora na barra e no ícone do Menu em suas posições padrão. Quero dizer, quando agora o poro está oculto e o ícone do Menu é colocado um pouco acima Vamos mudar a posição superior do Naropa e torná-lo -14 Quanto ao ícone do Menu, precisamos mudar sua posição, a posição superior, e fazer uma rodada. Tudo bem, então está tudo pronto para compor nosso trabalho. Vamos anexar um evento de clique ao ícone do Menu. Então, vamos ao arquivo JavaScript e selecionar o menu usando o método querySelector Em seguida, precisamos anexar a ele o ouvinte de eventos. São necessários dois argumentos. O primeiro é o tipo do evento. Nesse caso, precisamos de um clique. Quanto ao segundo argumento, será a função de retorno de chamada, que será executada assim que clicarmos no elemento Agora precisamos selecioná-lo agora, poro e o ícone do Menu, na verdade, podemos fazer isso separadamente, mas seria melhor se atribuíssemos a ambos os elementos a mesma classe e, em seguida, selecionássemos os dois simultaneamente Então, vamos atribuir a eles uma meta de classe. Agora, para selecionar em Napa e no ícone Menu, vou usar o método seletor de consulta all Em seguida, dentro dos parênteses como nome da classe, vou especificar alvos Então, vamos adicionar alguns novos estilos aos dois elementos assim que clicarmos no ícone e depois nos livrarmos desses estilos no próximo clique. Para isso, precisamos examinar a lista de nós que é retornada pelo método seletor de consulta all Temos que adicionar a cada elemento uma nova classe usando o método toggle. Depois disso, definiremos novos estilos usando essa classe do CSS. Então, para examinar a lista de nós, vou usar um dos métodos auxiliares de matriz chamados para Na verdade, o método forEach recebe um argumento, que é uma função de retorno de chamada. E essa função será executada para cada item na lista de nós Então, vamos inserir aqui uma função de seta. Essa função de retorno de chamada em si usa um argumento, que é o item atual na lista Durante todo o ciclo, vou chamá-lo de item. Agora, como dissemos, precisamos adicionar aos dois elementos uma nova classe usando o método toggle Para isso, vamos usar uma das propriedades chamada lista de classes. Precisamos anexá-lo ao item. Ele nos dá todas as classes que o elemento tem. E também nos permite acessar diferentes métodos para manipular as classes do elemento Nesse caso, precisamos usar um método de alternância, que nos permite adicionar classe ao elemento, se ele não o tiver, e remover classe, se o elemento o tiver Ok, agora temos que passar aqui o nome da classe, vamos chamar isso de mudança. Isso é tudo sobre JavaScript. Agora temos que escrever um pouco de CSS. Mas antes disso, vou mostrar que os dois elementos estão recebendo uma alteração de classe OnClick Então, se eu inspecionar a página e exibir os elementos e clicar no ícone, você verá que ambos os elementos recebem classes Se eu clicar novamente, eles serão removidos. Ok, agora temos que definir novos estilos usando a mudança de classe. Vamos selecionar o menu com alterações. Então, quando clicamos no ícone, precisamos movê-lo para baixo. Vamos mudar sua posição superior, torná-la com 15 RAM. Então, se eu clicar no ícone, ele se moverá para baixo. E na próxima semana, ele subirá novamente. Vamos tornar esse efeito mais suave. Transição. Com um valor no topo e 0,4 s. Agora podemos ver que temos um resultado muito melhor. Em seguida, vou exibir a barra de navegação. Então, vamos selecioná-lo usando a mudança de classe. Eu vou definir a posição de topo. Vamos torná-lo zero. E também use transição para um efeito suave Os valores são superiores a 0,4 s. Portanto, se clicarmos no ícone, o romance será exibido sem problemas e, em seguida, ele se ocultará no próximo clique Para tornar esse efeito um pouco melhor, vou adicionar algum tempo de atraso ao ícone do Menu Vamos adicionar aqui 0,2 s. Agora o ícone está se movendo com algum atraso, mas não é isso que queremos. Não precisamos do tempo de atraso na próxima camarilha. Então, vou usar outra transição, mas com mudança de classe e sem qualquer atraso. Ok, agora temos um resultado melhor, mas ainda não é o que queremos. Também precisamos de tempo de atraso dentro do porto de agora. Então, vamos adicionar uma nova transição com um valor entre 0,4 s e 0,2 s, que é o tempo de atraso. Tudo bem? Agora, como você pode ver, tudo funciona perfeitamente. A única coisa que precisava fazer era exibir itens de navegação com algum efeito de desvanecimento Antes de tudo, precisamos ocultar todos os ícones. Então, vamos definir a opacidade como zero. Em seguida, precisamos exibir os itens com um clique, mas com um tempo de atraso diferente Portanto, precisamos selecionar o link numérico com a mudança de classe. Vamos definir a opacidade como uma. E depois disso, precisamos definir a propriedade de transição para cada item de navegação com um tempo de atraso diferente. Vamos começar com o primeiro item. Nós precisamos. Mais uma vez, mude. Em seguida, coloque link seguido pelo seletor enésimo filho como valor Vamos entrevistar um. Isso significa que selecionamos o primeiro link do Nobel. Então, como dissemos, precisamos aqui da transição com opacidade de 0,4 s. E como o tempo de atraso, vamos inserir seu 0,5 s. No geral, temos cinco itens. Então, vamos duplicar esse código quatro vezes e alterar os valores Para o segundo item, precisamos de 0,6 s. Então, o próximo será 0,7 s. Para o quarto item, vou passar aqui 0,8 s. E para o último item, vamos reduzir o tempo de atraso de 0,9 s. Então, se eu clicar no ícone, os itens de navegação aparecerão bem com algum efeito de desvanecimento Na verdade, estamos quase terminando. Temos aqui pequenos problemas. Se eu passar o mouse sobre os itens, não teremos mais um efeito suave de passar o mouse E também quando fechamos a altura dos novos itens sem transição. O motivo da primeira edição é que antiga transição do link de Navarra foi sobrescrita Então, vamos adicionar uma transição, quero dizer, cor a todos os itens abaixo. Vamos fazer a duração de 0,3 s. Quanto à segunda edição, precisamos adicionar opacidade ao link Navajo Vamos fazer com que a duração seja de 2 s. Tudo bem, então agora tudo funciona perfeitamente E, finalmente, terminamos agora, onde realmente terminamos de construir este projeto. A única coisa que precisa fazer é torná-lo responsivo a diferentes tamanhos de tela 10. Projeto 1 - Torne o projeto responsivo: Então, como dissemos no início deste projeto, ele é construído em um tamanho de tela extra grande. Estou no tamanho da tela com 1920 pixels de largura e dez ADB, aqueles de altura Agora vamos torná-lo responsivo em diferentes tamanhos de tela Temos que criar alguns pontos de interrupção diferentes. E tornaremos o projeto responsivo usando consultas de mídia CSS Eu já preparei os pontos de interrupção nos quais precisamos fazer algumas mudanças, então não vou perder tempo encontrando-os. Ok, vamos prosseguir e inspecionar a página. Em seguida, mude para o modo responsivo. Como você pode ver, a largura e a altura estão definidas para 1920 pixels e dez ADP. Ok, então o primeiro ponto de interrupção no qual precisamos fazer algumas alterações será de 1.400 pixels Portanto, precisamos criar uma consulta de mídia CSS com uma largura máxima de 1.400 pixels Mas, a princípio, vou inserir novos comentários, responsivos e não responsivos Em seguida, crie uma consulta de mídia CSS e especifique a largura máxima como 1.400 pixels Então, no ponto de interrupção, vou diminuir o tamanho da fonte do elemento HTML Vamos fazer com que seja 50 por cento. Isso diminuirá o tamanho dos elementos em que usamos a RAM como unidade de medida. Tudo bem, então a primeira seção parece boa. Não precisamos fazer nada aqui. Quanto à segunda seção em que temos os carrinhos, vou aumentar o espaço na parte inferior desta seção Mas para fazer isso, primeiro precisamos definir a altura da nossa linha. Então, vamos selecionar a seção para definir a altura como automática, caso contrário, o preenchimento na parte inferior não será aplicado Portanto, precisamos aqui de preenchimento, dez rem na parte superior, depois zero, 12 RAM na parte inferior e, novamente, zero. Em seguida, precisamos criar algum espaço entre o cabeçalho e os cartões. Então, vamos selecionar o contêiner de cartões e atribuir a ele a margem superior com o valor dez executado. Tudo bem, isso é tudo em relação à Seção dois. Vamos seguir em frente e personalizar a próxima seção, que é a galeria. No momento, cada link da galeria tem largura e altura definidas na largura da janela de exibição Isso os torna menores quando diminuímos a largura da janela do navegador. Então, vou mudar a largura da janela de visualização na RAM. Vamos selecionar o link da galeria e depois definir a largura e a altura. Vou definir a largura para quatro como RAM. Quanto à altura, vamos fazer com que seja 25 rem. Além disso, também temos que definir a largura e a altura das imagens. Precisamos definir os dois em 100%. Ok, então mudamos a largura e a altura. Quero dizer a unidade de medida. Mais uma coisa que eu quero fazer aqui é criar uma pequena margem ao redor dos edifícios. Porque quando tornarmos o navegador menor, as imagens ficarão muito próximas umas das outras. E para evitar isso, vamos definir a margem para cinco corridas. Tudo bem, na verdade, com esse ponto de interrupção, terminamos. Todas essas seções parecem boas. E agora temos que seguir em frente e encontrar o próximo ponto de interrupção, que será de mil pixels Então, vamos criar uma nova consulta de mídia CSS com uma largura máxima de mil No ponto de interrupção, vou alterar o tamanho dos cabeçalhos desta seção Vamos selecionar esse elemento e definir o tamanho da fonte para nove RAM. Além disso, precisamos usar sua margem nos lados esquerdo e direito, caso contrário , os títulos serão encerrados mais tarde e não será bom Então, vamos definir a margem para zero na parte superior e inferior e cinco rem, nos lados esquerdo e direito. Tudo bem, então o título é menor. Agora, a seguir, também vou diminuir o ícone. Então, vamos selecioná-los e definir o tamanho da fonte para 25 rem. Tudo bem, isso é tudo sobre a primeira seção. Vamos seguir em frente e personalizar o segundo. Vou embrulhar os cartões e colocá-los em linhas diferentes. Então, vamos seguir em frente e selecionar os cartões. Contêiner E atribuída a ele uma das propriedades flexíveis, quero dizer embrulho flexível com um valor Em seguida, vou selecionar o cartão em si porque quero criar algum espaço ao redor de cada cartão. Vamos usar a margem e configurá-la para cinco rem. Ok, então é isso. As cartas parecem boas. E a única coisa que eu quero fazer no ponto de interrupção é aumentar um pouco a altura do rodapé Então, vamos selecionar a seção quatro e atribuí-la à sua altura com o valor até a rampa. Certo? Então, com mil pixels, terminamos. Vamos seguir em frente e cuidar do próximo ponto de interrupção, que na verdade será de 900 pixels Então, vamos prosseguir e criar uma nova mídia CSS. Em seguida, especifique a largura máxima como 900 pixels. No ponto de interrupção, vou pegar aqui o nulo onde todas as outras seções parecem boas Então, vamos continuar e selecionar o link da barra agora. Vou definir a margem para RAM. Então. Então, como o elemento I, porque eu quero diminuir um pouco. Então, o tamanho da fonte. Vamos configurá-lo no fórum. E também vamos selecionar o elemento span. Estou nos valores do texto e defino o tamanho da fonte para execução. Tudo bem, é isso agora, mas parece bom. E temos que seguir em frente e encontrar o próximo ponto de interrupção, que eu acho que será de 700 pixels Então, vamos criar uma nova mídia CSS e especificar a largura máxima como 700 peças Então, no ponto de interrupção, vou diminuir o tamanho desse título de seção Vamos prosseguir e selecionar o título da seção. Defina o tamanho da fonte para sete RAM. Além disso, vou aumentar a margem de ganho nos lados esquerdo e direito. Portanto, é atribuído a zero e tan run. Ok, a seguir, vamos cuidar dos ícones. Também vou diminuir seus tamanhos. Então, vamos selecioná-los e definir o tamanho da fonte para 20 rampa. Tudo bem, antes de passarmos para a próxima seção, vou mover um pouco o ícone do menu para o olho esquerdo Então, vamos selecionar o menu e definir sua posição esquerda. Faça com que corra. Tudo bem, então o ícone parece bom e, na verdade todas as outras seções estão bonitas, exceto o rodapé Então, vamos em frente e cuidar disso. Em primeiro lugar, vou aumentar a altura. Seção quatro, defina a altura para quatro para correr. Em seguida, vou colocar os elementos na coluna uns sobre os outros. Para isso, temos que mudar a direção da flexão. Vamos fazer uma coluna. Em seguida, precisamos colocar itens flexíveis na parte superior do contêiner Use aqui para justificar o início flexível do conteúdo. E também precisamos centralizá-los horizontalmente usando alinhar o centro horizontalmente usando alinhar Como você pode ver, os elementos são colocados verticalmente em uma coluna, mas precisamos criar algum espaço entre esses textos e o campo de entrada Então, vamos selecionar a seção para textos e definir a margem inferior com o valor oito Ran. Tudo bem, é isso no ponto de ruptura. Agora temos que personalizar nosso projeto no último ponto de interrupção, que será de 550 pixels Então, vamos criar uma nova mídia CSS e especificar uma largura como 550 pixels. Vamos diminuir mais uma vez o tamanho da fonte dos elementos HTML. Eu vou fazer com que seja 40 por cento. Em seguida, precisamos diminuir o espaço entre os itens de navegação. Então, vamos selecionar agora por link e definir a margem como zero e 0,7 rampa. Tudo bem, na verdade, estamos quase terminando. Mas vejo aqui um pequeno problema. Você pode notar que o ícone do menu acaba atrás dos links da galeria. Isso também pode ser um problema em outros pontos de interrupção. Então, vamos em frente e consertar isso. Vou atribuir a ele uma propriedade z-index por padrão. Vamos fazer com que seja 100. Tudo bem, então o problema está resolvido. E, finalmente, terminamos de trabalhar em nosso projeto. Acho que fica bem em diferentes tamanhos de tela, então podemos dizer que é responsivo Ok, então espero que esse projeto tenha sido interessante. Você gostou e aprendeu algumas coisas novas. Agora temos que seguir em frente e começar a construir o próximo projeto. 11. Projeto 2 - Pré-visualização do projeto: Tudo bem, agora é hora de começar a construir nosso segundo projeto Eu chamo isso de design criativo, porque ao longo deste projeto, usaremos alguns efeitos legais e legais. Antes de começarmos a escrever o código. Vamos seguir em frente e descrever o projeto. Ele consistirá em algumas seções diferentes. Então, vamos examinar cada um deles. No momento, você está vendo a primeira seção, que consiste em algumas partes diferentes. Temos aqui quatro itens de navegação diferentes. Eles estão alinhados verticalmente e, quando passarmos o mouse sobre eles, eles começarão a se posicionar horizontalmente e também obterão Em seguida, temos aqui um título bonito. Abaixo você pode ver o logotipo do site. E também temos aqui um fundo flutuante que se parece com as ondas. E eu acho que parece muito bom. Tudo bem, em seguida, temos os carrinhos dos clientes. Cada carro inclui alguns ícones Font, Awesome. Além disso, tínhamos imagens dos clientes e das avaliações. As cartas têm um bom efeito de foco. Em seguida, vem a seção de equipes. Também inclui as cartas, mas essas cartas são diferentes, representam os membros da equipe. E também incluem algumas histórias sobre os membros que podemos exibir clicando neste botão. Certo. Depois disso, temos uma seção de contato. Ele inclui a imagem e alguns campos de entrada. Eles são colocados em um ambiente 3D e também têm um bom efeito de foco Abaixo, temos um rodapé simples com alguns textos de direitos autorais Ok, então isso é tudo sobre essas seções do projeto. Os itens de navegação nos permitem navegar até as seções apropriadas. Se eu clicar neles, iremos para as seções relevantes sem problemas. Além disso, temos aqui um botão fixo no canto inferior direito da página. Se eu clicar nele, ele rolará até a página dois, a primeira seção Tudo bem, então isso é tudo sobre o projeto. Ele responderá a todos os tamanhos de tela diferentes Se eu inspecionar a página, mudar para o modo responsivo e verificar o projeto , você verá que ele fica bem em diferentes tamanhos de tela Tudo bem, então estamos prontos para começar a construir esse projeto. Você pode baixar os arquivos de origem inicial e final. Eles estão anexados a esta palestra 12. Projeto 2 - crie uma marcação em HTML para desembarque e defina estilos comuns: Tudo bem, então estamos prontos para começar a construir nossos projetos. Eu criei uma nova pasta na área de trabalho chamada design criativo, na qual tenho outra pasta para as imagens. Vamos abrir essa pasta no código VS e criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Vou chamá-los de index.html, style.css e script.js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Para isso, vou usar m it, vamos inserir aqui um ponto de exclamação e depois pressionar Tab ou Enter Tudo bem, então aqui temos tags HTML básicas. Em primeiro lugar, vou mudar o título. Vamos inserir seu design criativo. Depois disso. Vamos vincular arquivos CSS e JavaScript. Vou abrir a tag do link e especificar o caminho do arquivo CSS. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então temos que especificar o caminho do arquivo no atributo de origem. Além disso, vou trazer mais um link para os ícones do Font Awesome. Então, vamos ao Google, pesquisar Font Awesome, CDN, JES Em seguida, pegue o primeiro link, abra a tag do link nos elementos do cabeçalho e cole o link copiado aqui Ok, finalmente, vamos executar o projeto no navegador. Para isso, vou usar um dos pacotes de código do VS chamado servidor ativo. Isso nos permite executar o projeto ao vivo no navegador e também fazer atualizações e alterações sem atualizar a página Ok, vamos colocar o editor e o navegador. Assim mesmo. E comece. construir o projeto seção por seção. Criaremos a marcação HTML para cada seção e depois o estilo delas. Então, vamos criar a marcação HTML para a primeira seção Em primeiro lugar, vou abrir uma tag div, que será o contêiner Em seguida, abra o elemento da seção com uma seção de classe um. Portanto, a primeira seção incluirá algumas partes diferentes. Teremos uma barra de navegação vez do título seguido pelo logotipo E também teremos esse fundo flutuante. Vamos continuar e criar a barra de navegação. Vou abrir o elemento de navegação HTML5 com a classe agora para esse elemento de link de interferência com a classe agora E como primeiro item, vamos inserir seu design. Portanto, no geral, teremos quatro itens de navegação. Vamos duplicar essa linha de código três vezes e depois alterar o conteúdo O segundo serão os clientes. Então teremos equipe e conteúdo. Ok, então é isso agora. A seguir, vou inserir uma tag div, que será o fundo flutuante Vou atribuir a cada cluster PG flutuante. Depois disso, vou criar um título. Portanto, é uma tag de cabeçalho H1 aberta com um título de seção de classe E como o conteúdo que está aqui, design criativo. E, finalmente, vamos criar um logotipo que será o ícone Font Awesome. Em primeiro lugar, vamos abrir a tag div com o logotipo da classe. Será o invólucro do ícone. E, em seguida, insira seu elemento ocular com uma classe é FAS. Eu tenho uma curva de Bezier. Tudo bem, é isso. Em relação a esta seção, um dos elementos está preparado. E agora temos que começar a escrever CSS. No começo, vou criar alguns estilos comuns e padrão. Na verdade, ao longo deste projeto, vamos usar duas fontes diferentes do Google. Então, precisamos trazer o link. Vamos ao site do Google Fonts. Em seguida, vou pesquisar uma fonte chamada monótona. Além disso, precisamos digitar o texto abaixo. Na verdade, vou selecionar aqui alguns estilos. Vamos selecionar todos esses estilos, exceto o italiano. Em seguida, pegue o link daqui e cole-o no arquivo CSS. Tudo bem, então, como dissemos, vamos criar alguns estilos comuns Portanto, vou selecionar cada elemento usando asterisco Em primeiro lugar, vamos eliminar o padrão, a margem e o preenchimento de cada elemento Vamos definir os dois como zero. Em seguida, vou definir o tamanho da caixa de borda. Além disso, elimine a base padrão dos elementos do link usando a decoração de texto. Nenhum. O próximo será do tipo lista Nenhum. Isso eliminará os marcadores padrão dos elementos LI Quero dizer os itens da lista. Depois disso, vou remover o contorno padrão de cada elemento Então, vamos definir o esboço como nenhum. Em seguida, vou definir a família de fontes. Vamos usar aqui abaixo uma tonelada de textos em letra cursiva. Por fim, vamos definir a espessura da fonte como 400. Ok, então, como você pode ver, todos os estilos são aplicados. Então, vou apenas projetar, vou usar a RAM como unidade de medida. No momento, uma RAM é igual a 16 pixels porque, por padrão, o tamanho da fonte do elemento HTML é igual a 16 Vou converter uma RAM em dez pixels porque acho que será mais conveniente e simples de usar. Então, para fazer isso, temos que diminuir o tamanho da fonte do HTML e torná-lo em 62,5% Então, como você pode ver, os elementos ficaram menores e agora 1 g é igual a dez pixels 13. Projeto 2 - crie efeito de ondas usando fundo flutuante: Tudo bem, então finalmente podemos começar a estilizar a primeira seção Antes de fazermos isso, vou adicionar alguns comentários porque esqueci Vamos inserir comentários no arquivo HTML. Precisamos aqui, seção um, fim da seção um. Em seguida, no arquivo CSS, vou inserir aqui estilos comuns e de estilos comuns. E então precisamos da seção um e da seção um. Ok, vamos seguir em frente e selecionar os elementos da seção. Em primeiro lugar, vou definir largura e altura. Vamos definir com 200 por cento. Quanto à altura, vou fazer com que seja 100% da janela de visualização Em seguida, vou definir o fundo para branco. Na verdade, por padrão, o fundo é branco, mas de qualquer forma, vamos defini-lo. Ok, agora vou cuidar do fundo flutuante e demonstrar como ele funciona. No começo, vou diminuí-lo e mostrar como funciona e depois aumentarei seu tamanho. Então, vamos seguir em frente e selecionar elementos div, o plano de fundo flutuante da classe Primeiro, vamos definir a largura e a altura. Vou fazer com que os dois tenham 70 RAM. Em seguida, altere a cor de fundo. Vou usar o valor RGBA. Vamos inserir seu 50231255 e depois a opacidade 0.8. Ok, então aqui temos um plano de fundo. Em seguida, vou colocá-lo no centro. Vamos definir a posição como absoluta. Que, para posicionar o elemento de acordo com seu elemento pai, vou definir a posição relativa para o elemento da seção. Depois disso, precisamos definir as propriedades superior e esquerda. Vamos configurar até 15%. Quanto à propriedade left, para centralizar o elemento perfeitamente, vou usar a função calc Precisamos subtrair metade da largura dos elementos para 50 por cento Nesse caso, o elemento será centralizado horizontalmente. Então, precisamos aqui do cálculo e o cálculo será de 50 por cento -35 Ok, então agora é isso sobre o primeiro plano de fundo. Em seguida, precisamos criar um segundo. E eu vou fazer isso usando o pseudo elemento anterior. Então, vamos selecionar o PG flutuante seguido pelos pseudo-elementos anteriores Antes de tudo, vamos definir o conteúdo, deixá-lo vazio. Em seguida, vou definir largura e altura. Vamos fazer os dois 100%. Também altere a cor do plano de fundo. Vou usar a mesma cor mas com opacidade diferente Portanto, precisamos do RGBA 50231255 e da opacidade 0.1. Depois disso, vou definir a posição como absoluta. E então precisamos definir as posições superior e esquerda. Vou fazer com que os dois sejam zero. No momento, o elemento não está visível porque está colocado atrás do primeiro plano de fundo. E para provar isso, podemos simplesmente mudar a posição esquerda, vamos fazer isso, digamos 20%. Então, agora você pode ver isso claramente. Agora, o antes, então o elemento em que estou no segundo plano de fundo está visível. Ok, vamos voltar aqui zero. Em seguida, precisamos mudar a forma desses elementos. Precisamos contorná-los usando o raio da borda, mas usaremos valores diferentes para cada elemento Então, para o plano de fundo principal, vou definir o raio da borda em 45% Quanto ao segundo elemento, vamos fazer com que o raio da borda seja de Ok, então agora está tudo pronto. Só precisamos animar os dois elementos. Em seguida, vou usar quadros-chave CSS. Isso nos permite criar algumas regras CSS e depois aplicá-las aos elementos usando a propriedade de animação. Vamos criar quadros-chave CSS. Precisamos adicionar o sinal, depois os quadros-chave da palavra-chave, seguidos pelo nome da animação Eu vou chamar isso de rotação. Vamos definir duas etapas diferentes, o ponto de partida e o ponto final. Quero dizer 0% e 100 por cento. E precisamos girar o elemento em 360 graus. Então, em 0%, quero dizer, no ponto de partida, precisamos transformar com a função de rotação e com o valor zero Quanto aos 100%, como ponto final. Precisamos transformar, girar 360 graus. Portanto, durante a animação, o elemento girará uma vez em 360 graus. Tudo bem, então para aplicar esse estilo aos planos de fundo, temos que usar a propriedade de animação para ambos os elementos Primeiro, precisamos definir o nome da animação, que é girar. Em seguida, temos que definir a duração. Serão trinta segundos. Além disso, precisamos tornar a animação infinita. Então, vamos inserir seu infinito. Como você pode ver, os elementos estão girando e temos um bom efeito de animação Agora temos que mudar o tamanho e a posição desses planos de fundo A propósito, usaremos largura da janela de visualização como unidade de medida pois isso nos permitirá tornar o elemento responsivo a diferentes tamanhos de tela Para demonstrar por que vamos usar a largura da janela de visualização, vamos mudar a RAM, torná-la a largura da janela de visualização e também diminuir o tamanho Vamos fazer isso, digamos, 40 janelas de visualização de largura. E também mude aqui, 35 gramas para 20 de largura de janela de visualização Portanto, se eu tornar a janela menor que o fundo, alterarei seus tamanhos de acordo. Tudo bem? Na verdade, precisamos aumentar a largura e a altura. Vamos fazer os dois. Largura da janela de visualização de 150. Também altere a largura da janela de visualização de 20 para 75. Além disso, precisamos fixar a posição. Vamos definir a posição superior para -125 de largura da janela de visualização. Ok? Portanto, o plano de fundo é colocado corretamente. Temos aqui apenas um problema. Não precisamos dessa barra de rolagem aqui embaixo. Então, para corrigir isso, vou atribuir ao corpo o elemento overflow x hidden Tudo bem, vamos sentar em relação ao fundo flutuante. Parece muito bonito e moderno, então espero que você goste. Agora temos que cuidar do resto dos elementos. Quero dizer, agora para o título e o logotipo 14. Projeto 2 - Personalize a página de destino: Vamos continuar e começar com a barra agora. Temos quatro itens de navegação diferentes e vou colocá-los horizontalmente em uma linha, mas cada item será alinhado Vamos seguir em frente e selecionar a barra de navegação. No momento, a barra de navegação está colocada atrás do fundo flutuante Então, para torná-lo visível, vou usar a propriedade z-index Mas antes disso, precisamos definir a posição porque, caso contrário, a propriedade z-index não funcionará Então, vamos definir a posição como relativa. E então use o índice com o valor que será maior que zero. Vamos fazer 20. Ok, então, agora quatro é viável e eu vou mudar sua posição Vamos colocá-lo um pouco abaixo. Então, vou definir a primeira posição para quatro rampas. Em seguida, vou criar algum espaço entre os itens de navegação e também alinhá-los usando o Flexbox Então, vamos prosseguir e definir a propriedade de exibição como flexível. E então, para criar espaço entre os itens, vou apenas justificar a propriedade do conteúdo com o valor espaçado Tudo bem, isso é tudo sobre a barra de navegação. Vamos continuar e personalizar no link Alba. Vamos selecioná-lo. E antes de tudo, o aumento do tamanho da fonte faz com que ela aponte para a RAM. Além disso, vou deixar os links negrito do que criar algum espaço entre as letras Faça com que aponte para a RAM. E mude a cor. Vamos definir a cor para branco. Ok, então os itens estão bonitos. Como se lembra do projeto finalizado, o item deve ser uma linha vertical e, uma vez que passamos o mouse sobre eles, eles devem ser colocados de volta na horizontal E também devem ter uma cor de fundo, certo? Para colocá-los verticalmente, vou diminuir a largura da ligação nanoporosa Além disso, vou usar uma das propriedades chamada Word Wrap com o valor break word. Então, vamos definir a largura para 1,5 RAM. Em seguida, use quebra de linha com a palavra de quebra de valor. Tudo bem, isso é tudo sobre a ligação com o Napal. Agora é hora de criar um efeito de foco. Depois de passar o mouse sobre o item, precisamos aumentar a largura e também alterar a cor de fundo Então, vamos continuar e selecionar link nobre com o mouse. Em seguida, defina com 215 RAM. Quanto à cor de fundo, vou usar o valor RGBA Quero dizer, a cor branca. E a opacidade aponta para. Então, quando passarmos o mouse sobre os itens, eles serão reproduzidos horizontalmente e também receberão uma nova Como você pode ver, os itens não estão alinhados no centro da caixa E também precisamos de uma transição para obter esse efeito suave. Então, primeiro de tudo, vamos alinhá-los no centro. Usando o centro de alinhamento de texto. Precisamos de duas transições diferentes, uma ao passar o mouse e a segunda para o próprio link Então, vamos usar a transição com os valores de 2,5 s. E também precisamos fazer a transição de todos os 0,5 s. Essa segunda transição nos permitirá alinhar os itens verticalmente um pouco mais rápido Tudo bem, então tudo funciona bem. Temos aqui um bom efeito de flutuação. Na verdade, você pode notar aqui que estamos recebendo uma barra de rolagem no lado direito. Mas isso não é um problema. Isso será corrigido assim que prosseguirmos e adicionarmos outra seção ao projeto. Ok, em seguida, vou estilizar um elemento de título. Então, vamos prosseguir e selecioná-lo. No início. Vamos aumentar o tamanho da fonte, fazer com que ela tenha oito RAM e depois mudar a família da fonte. Nesse caso, vou usar chamado corrosivo monótono Em seguida, vou cuidar da posição do título. Temos que colocá-lo no centro. Para isso, vou usar a posição absoluta do que precisamos da posição superior. Vamos configurá-lo para 18 janelas de visualização de largura. E também vou definir uma posição à esquerda com valor de 50%. No momento, o título não está centralizado. Precisamos movê-lo para o lado esquerdo 50 por cento de sua largura. E para isso, precisamos usar a propriedade de transformação com a função Translate. Nesse caso, precisamos traduzir com a direção x. E como valor que vou inserir aqui, -50 por cento. Agora, o elemento está perfeitamente centralizado. Ok, depois disso, vamos criar algum efeito de sombra. Vou usar sombra de texto. Precisamos de 0,33 vezes e a cor 888. Em seguida, vou mudar a cor. Vamos torná-lo branco. Além disso. Também vou definir a cor de fundo para branco. E depois aumente a largura do elemento. Vamos fazer com que seja 85 rem. Ok, então agora o título parece muito melhor. Precisamos centralizá-lo dentro da caixa. E para isso, vamos usar o centro de alinhamento de texto. Também cria algum espaço dentro da caixa. Vou definir o preenchimento para 0,8 rem na superior e inferior para os lados esquerdo e direito Vamos fazer com que seja 1,6 RAM E também vou fazer com que os cantos da caixa sejam ligeiramente arredondados usando o raio da borda com valor de 0,8 com A última coisa que vou fazer é diminuir um pouco a opacidade Vamos fazer com que seja 0,9. Tudo bem, então com o título, terminamos. Vamos seguir em frente e personalizar o último item desta seção, que é o logotipo. Antes de tudo, vamos cuidar de sua posição. Vou colocá-lo abaixo, no centro da página. Vamos usar novamente a mesma técnica que definiu a posição como absoluta. Em seguida, defina a posição superior, torne-a 70%. Quanto à propriedade esquerda, precisamos configurá-la para 50%. E então precisamos transformar com a função Translate X. Vamos inserir aqui -2%. Então, o logotipo está posicionado e agora vamos personalizá-lo. Vamos selecionar os elementos I e aumentar o tamanho da fonte, tornando-a 15 RAM. Então eu vou mudar a cor. Vamos usar aqui o valor RGBA 50.231.255,8. E também vou usar sombra de texto. Nesse caso, vou usar sombra de texto de vários níveis. Então, primeiro instinto para sua memória de 0,1 RAM, 0,1 rem para RAM E eles chamaram D, d, D S para a segunda sombra. Vamos fazer isso no lado esquerdo. Precisamos aqui de valores negativos, -0,1 RAM, -0,1 RAM e, em seguida, apontar para RAM seguida, apontar para E a mesma ligação. Tudo bem, é isso. O logotipo é personalizado e , na verdade, com a primeira seção, terminamos. Vamos seguir em frente e cuidar da próxima seção. 15. Projeto 2 - Criar e personalizar a seção de clientes: A próxima seção será a seção de clientes. Ele consistirá no título e em três cartas diferentes. Em cada uma das cartas, teremos alguns elementos diferentes. Quero dizer, as citações, depois o parágrafo seguido por esses passeios e a imagem do cliente com seu nome. Tudo bem, vamos começar a criar a marcação HTML Vamos inserir novos comentários, seção dois e seção dois. Em seguida, abra o elemento da seção com uma seção de classe também. Vou criar elementos de cabeçalho H1 com o título da seção da classe e com o conteúdo Clientes. Em seguida, abra o elemento div, que será o invólucro dos cartões que vou atribuir ao invólucro dos clientes da classe Em seguida, precisamos de outra tag div, que será o próprio cartão atribuído ao cliente da sua classe Ok, então, como dissemos, teremos aqui alguns elementos diferentes. A primeira serão as aspas, que serão representadas pelo ícone Font Awesome. Então está aberto. O elemento I com uma classe é FAS, FAA, aspas à esquerda. Em seguida, precisamos de um parágrafo com os textos dos clientes da classe. Em vez disso, vamos usar um texto fictício. Depois disso, vou criar uma avaliação do cliente. Teremos cinco estrelas. Quatro deles serão preenchidos. Quanto ao último, apenas a metade será preenchida. Então, primeiro, vou abrir a tag div, que será o invólucro da classificação atribuída a ela Classifique a classificação do cliente do que os elementos abertos I e atribuída às classes FAS, uma estrela. Vou duplicá-lo quatro vezes. Em seguida, altere o nome da classe para o último elemento. Precisamos aqui, se eu começar, sair pela metade. Ok, isso é tudo sobre a classificação. Em seguida, vou inserir aqui uma imagem. Vamos selecionar a imagem da pasta de imagens que precisamos aqui do cliente IMG one e também atribuir o atributo de classe à imagem com o valor IMG do Depois disso, vamos abrir a tag de cabeçalho H4 com o nome do cliente da classe E insira aqui o nome do cliente. Digamos Jane Lee. Tudo bem, isso é tudo sobre a primeira carta. No geral, teremos três deles. Então, vamos duplicar o cartão duas vezes e depois fazer algumas alterações Então, aqui, para a quinta estrela, precisamos de uma estrela de classe A porque ela também será preenchida, como as outras quatro estrelas. Em seguida, altere o nome da imagem que precisamos aqui, img2, e também altere o nome do cliente Esse é o Instituto, Bob Smith. Até a terceira carta, a quinta estrela estará vazia. Então eu vou mudar aqui o nome da classe em vez de FAS, precisamos aqui FAR. Em seguida, se uma estrela, mudei o nome da imagem. Precisamos aqui, três, e também como nome do cliente, vamos Institute e Brown. Tudo bem, então todos os três cartões foram criados e agora temos que personalizar esta seção Vamos criar novos comentários, seção dois e seção dois. Em seguida, selecione os elementos da seção. E antes de tudo, defina largura e altura. Eu vou definir com 200 por cento. Quanto à altura, vamos torná-la 100% da janela de visualização. Antes de começar este elemento da seção, vamos diminuir o tamanho das imagens porque agora elas são duas maiores. Então, vamos seguir em frente e selecionar o cliente IMG. Vou colocar os dois em uma altura de dez rampas. E também vou usar aqui a capa do feed de objetos para manter a qualidade da imagem. Ok, depois disso, vamos alinhar os elementos dentro desta seção em livros de fluxo Vou definir a propriedade de exibição como flexível. Em seguida, precisamos colocar itens na coluna, então precisamos mudar a direção. Vamos fazer uma coluna. E então, para criar algum espaço ao redor dos itens flexíveis, vou usar justify content, space Tudo bem, é isso. Seção 1, é personalizada. Em seguida, vou cuidar do elemento de cabeçalho. Então, vamos selecioná-lo com o título da seção da classe. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer com que sejam dez RAM Também altere a espessura da fonte. Vou fazer com que seja ousado. Então eu quero transformar o texto em maiúsculas N. Finalmente, mude a cor, torne-a Então, em seguida, precisamos colocar o título no centro. E para isso, vou usar o centro de alinhamento de texto. Além disso, vamos diminuir a opacidade, torná-la 0,1. E por último, adicione ao título algum efeito de sombra usando sombra de texto com os valores para RAM, para executar para RAM e a cor AAA Tudo bem, então o título está estilizado. Eu acho que parece muito bom. Então, vamos em frente e cuidar dos cartões. Em primeiro lugar, vou selecionar o elemento wrapper div, que tem um className, um Então, vou colocar as cartas horizontalmente em uma linha. E para isso, vamos usar o flexbox. Então, para criar algum espaço entre os itens flexíveis, vamos usar o conteúdo justificado Nós desvalorizamos o espaço uniformemente. E então, para alinhar o centro dos itens, vamos usar e depois centralizar os itens Ok, então os elementos estão alinhados e agora precisamos ligar o carro em si. Vamos selecioná-lo. Ao definir primeiro a largura, faça com que seja 35 RAM. Em seguida, vou definir a altura para 50 RAM. E também mude a cor de fundo, faça com que seja e. Ok, em seguida, vou alinhar os elementos dentro do cartão usando o Flexbox Então, vamos usar o display flex. Em seguida, precisamos colocar elementos em uma coluna. Então, vamos mudar a direção, torná-la uma coluna. E depois disso, vamos centralizar os elementos horizontalmente usando alinhar Tudo bem, além disso, vou arredondar os cantos do cartão Use border-radius com um valor de 0,5 RAM. Além disso, vou criar algum espaço dentro do cartão usando preenchimento Vamos configurá-lo para duas RAM nos quatro lados. E, finalmente, use a sombra da caixa. Vou criar uma sombra de vários níveis. Vamos inserir aqui uma RAM, uma RAM em vez de RAM. E a cor ou D, d, D. E também crie uma sombra no lado esquerdo. Precisamos aqui menos um quarto e, novamente, menos um rem para RAM e cor E. Tudo bem, então com as cartas, então com as cartas, estamos Só precisamos alinhá-los de uma maneira diferente. E depois personalizaremos os elementos dentro do cartão. Então, vou mudar a posição da primeira e da terceira cartas. Vou colocar a primeira carta um pouco abaixo. E para isso, use, novamente, livros de fluxo. Vou selecionar a primeira carta. Então, precisamos aqui de um cliente, seguido pela pseudoclasse chamada primeiro filho Ele selecionará o primeiro cartão. E então, para colocar um pouco abaixo, precisamos alinhar self com a extremidade flexível do valor Ele colocará o cartão no fundo do recipiente. Então, no momento, nada mudou porque precisamos definir a altura do invólucro Então, vamos atribuir a ela a altura com o valor 70%. Então, agora a primeira carta é colocada um pouco abaixo. Vamos prosseguir e mover a terceira carta também. Na verdade, vou duplicar esse código e depois mudar o primeiro filho, o último filho E também, em vez de fluir, e precisamos flexionar, comece Tudo bem, então as cartas estão alinhadas. Vamos começar a personalizar os itens dentro do cartão. Vamos começar com as citações. Eu vou selecioná-lo, mas é classe FA, aspas à esquerda. Vamos aumentar o tamanho da fonte, criá-la para RAM e também mudar a cor. Vou usar aqui a cor f080f. Tudo bem, a seguir vou cuidar do parágrafo. Vamos aumentar o tamanho da fonte, torná-la 1,8 RAM. Em seguida, vou criar algum espaço na parte superior e inferior usando a margem. Vamos configurá-lo para 2,5 rem e zero. E também vou justificar o texto usando text-align na Ok, antes de seguir em frente e estilizar as classificações, vou criar um pequeno recuo Então, vou selecionar a primeira letra do parágrafo. Vamos selecionar o parágrafo em si e depois anexar a primeira letra, que são os pseudoelementos Em seguida, definiu a margem no lado esquerdo. Faça com que seja executado. Ok, isso é tudo sobre o parágrafo. Vamos seguir em frente e começar as classificações. Selecione elementos, aumente o tamanho da fonte faça com que ela seja executada. Quanto à cor, vamos usar novamente f080f Ok, então as avaliações estão boas e temos que passar para a imagem. Vamos criar algum espaço na parte superior e inferior da imagem e também torná-la arredondada. Precisamos de margem com valores a serem executados e zero. Então, para tornar a imagem arredondada, precisamos de um raio de borda com valor de Ok, isso é bobagem sobre as imagens. Finalmente, temos que personalizar o nome do cliente. Então, vamos selecionar esse elemento. Aumente o tamanho da fonte, transforme-a em Ram e também torne a fonte um pouco mais ousada usando a espessura de fonte 700. Tudo bem, então é isso. Estamos quase terminando esta seção. A única coisa que eu quero fazer é criar um pequeno efeito de foco Depois de passarmos o mouse sobre as cartas, quero mudar a sombra Então, vamos selecionar o cartão com o mouse. Em seguida, defina box-shadow. Precisamos que os seguintes valores sejam executados duas vezes, depois três rem, e chamamos de d d t. Então precisamos de menos dois REM Novamente, menos dois, execute três rem e a cor II. Além disso, vamos usar transição com a sombra da caixa de valores e a duração de 0,5 s. Tudo bem, então temos aqui alguns bons efeitos de foco E, na verdade, com esta seção, terminamos. Agora podemos seguir em frente e cuidar do próximo. 16. Projeto 2 - Criar e Estilo de Seção de Equipe: Na próxima seção, teremos novamente cartões. Esta seção será sobre a equipe. Ele consistirá no cabeçalho e três cartas representando os membros da equipe. Portanto, cada curva incluirá a imagem do membro da equipe. Em seguida, teremos um nome completo com a posição do membro da equipe, seguido por essas habilidades. E também teremos um botão na parte inferior do carro. Além disso, você pode ver aqui outro botão no canto superior direito do carro. E se eu clicar nela, essa linha girará e algumas informações serão exibidas bem Ok, então é isso sobre esta seção. Vamos começar a criar a marcação HTML. Vou inserir seus novos comentários, seção três. E a seção três. Em seguida, abra o elemento da seção com a seção três da classe e institua a tag de cabeçalho H1 Vou atribuir à mesma classe que usamos no título da seção anterior Porque os dois terão os mesmos estilos. Então, vamos atribuir o conteúdo a cada seção do título. Vou inserir sua equipe. Ok? Em seguida, temos que criar cartões. Então, primeiro de tudo, abra uma tag div, que será o invólucro Vou designar um invólucro para uma equipe de classe. Em seguida, abra outro div, que será o próprio cartão. Vamos designar para ela um membro da equipe de classe. O cartão consistirá em alguns elementos diferentes. A pessoa será a imagem. Então, vamos abrir o elemento de imagem e selecionar um ponto JPG para um membro da equipe. Também vou designar IMG para um membro da equipe de classe. Tudo bem, a seguir vou abrir a tag de cabeçalho H2, que incluirá o nome completo e a posição do membro Então, vou atribuir o nome de um membro da equipe de classe. Vamos inserir seu Nick Smith. Em seguida, vou abrir a tag span e inserir aqui a posição do membro da equipe. Vamos escrever designer. Depois disso, vêm as habilidades. Eu vou criar uma lista. Vamos atribuir a uma turma as habilidades dos membros da equipe. Portanto, no geral, teremos cinco itens da lista. Então, vamos criar o primeiro. Vai ser o Photoshop. Vamos escrever aqui a abreviatura P, S, depois duplicar o elemento LI quatro vezes e alterar O segundo será Figma. Em seguida, teremos HTML5, CSS3 e depois Ai, que significa Tudo bem, a seguir vou criar um botão para projetos. Será o elemento de link. Vamos atribuir à classe projetos btn e, como conteúdo aqui, Ok, agora vou cuidar da história do membro da equipe. No começo, vou criar um botão. Então, vamos abrir a tag div com uma história de classe btn. Além disso, vou usar outro atributo chamado título. Alguns textos aparecerão quando passarmos o mouse sobre o botão. Então, vamos inserir minha história. Em seguida, precisamos de outra tag div, que será a linha atribuída a cada linha btn da história do cluster E deixe esse elemento div vazio. Ok, então essa parte consistirá em dois elementos diferentes, terá um título e o parágrafo. Vamos criar um elemento div com a história da classe. Vai ser o invólucro. Em seguida, abra os elementos ocultos do H4 com o título da história da classe e o conteúdo sobre mim. Depois disso, precisamos de um parágrafo com o parágrafo Tory da classe. E então cabe a você, um texto fictício. Tudo bem, então a primeira carta está pronta, como dissemos, no geral, teremos três delas. Então, vou duplicá-lo duas vezes e depois fazer algumas alterações Eu vou mudar o nome da imagem. Também será membro da equipe. Em seguida, altere o nome completo que precisamos aqui. Digamos que Bob Brown. Quanto às habilidades, vamos inserir aqui um, e After Effects, depois PR, que significa Premiere Pro Então vamos deixar HTML e CSS como estão para o último item, vamos inserir aqui, digamos Inkscape Ok, isso é sobre o segundo membro da equipe. Vamos fazer algumas mudanças. Para o terceiro, precisamos aqui de um membro da equipe três, além do nome John Doe? Em seguida, vou mudar a posição que precisamos aqui. Desenvolvedor. Quanto às habilidades, vamos inserir seu JavaScript. Então React js. O próximo não será mais JS do que o MongoDB. E para o último item, vamos inserir o Python. Ok, então a marcação HTML está pronta e agora podemos começar a personalizar esta seção Vamos continuar e criar novos comentários. Seção três. E a seção três. Em seguida, defina a largura e a altura. Vou definir a largura para 100%. Quanto à altura, vamos torná-la 100% da janela de visualização. Depois disso, vou alinhar o cabeçalho e o rapper usando o flexbox Precisamos configurar a tela para flexionar. Então. Temos que colocar itens flexíveis verticalmente em dois pontos, então precisamos mudar a direção . Vamos fazer uma coluna. E depois disso, para criar algum espaço entre os itens, precisamos justificar o conteúdo com o espaço de valores entre eles E, finalmente, crie algum espaço na parte superior e inferior desta seção. Vamos usar o preenchimento. Vamos configurá-lo para cinco RAM e zero. Tudo bem, vamos ver os elementos desta seção. Em seguida, teremos um título que já está estilizado. E antes de passarmos para o próximo elemento, vou pegar os estilos da seção anterior e colá-los em estilos comuns. Vamos tornar o código mais limpo e compreensível. Ok, vamos em frente e selecionamos a embalagem da equipe. Vou alinhar as cartas horizontalmente em uma linha. Então, vamos usar o Flexbox. Então. Vou criar algum espaço entre os cartões usando o justify content space uniformemente Além disso, vou colocar os cartões no centro verticalmente usando alinhar itens Além disso, também vou definir a altura do rapper porque vamos alinhar cartas como na seção anterior Então, vamos definir a altura para 70%. Ok? Depois disso, vamos selecionar o cartão em si. Quero dizer, um membro da equipe. Primeiro, vamos definir essa largura, torná-la 35 RAM e depois alterar a cor de fundo. Vou usar sua cor F, F, F, E, E. Ok, seguir vou criar o espaço dentro do cartão. Então, vamos usar o preenchimento com os seguintes valores. Precisamos de uma corrida, depois de uma RAM. Em seguida, faça o estofamento ficar na parte inferior. Então, novamente, use uma corrida. Além disso, vamos usar sombra de caixa. Vou usar sombra de caixa de vários níveis. Então, vamos inserir sua 1RM e, novamente, uma RAM em vez de RAM, e eles a chamam de t, t, t. Quanto à segunda sombra, ela será colocada no lado esquerdo Então, vamos usar seus valores negativos menos uma RAM e, novamente, menos uma RAM para RAM e a cor E. Certo? Então, antes de prosseguirmos, acho que seria melhor se escondêssemos a história por um tempo Isso tornará nosso processo de trabalho mais conveniente. Então, vamos selecionar a história e atribuí-la para não exibir nenhuma. Ok? Então, a história está escondida. E agora vou estilizar cada um dos elementos do carro. Vamos começar com a imagem. Vou definir sua largura. Vamos fazer com que seja 100 por cento. Além disso, vou fazer com que os cantos da imagem sejam ligeiramente arredondados usando raio de borda com valor de 0,5 rampa Ok, em seguida, vou personalizar o nome do membro. Então, vamos selecioná-lo. Primeiro. Vamos aumentar o tamanho da fonte, torná-la 2,3 RAM. Em seguida, vou tornar o telefone mais ousado usando o peso de fonte 700 Também mude a cor. Vou usar sua cor 796717. E também crie algum espaço na parte superior usando a margem superior com um valor para executar. Ok, então o nome parece bom. Vamos seguir em frente. E clientes, a posição do membro. Vamos selecionar o nome seguido pelo intervalo. E então altere o tamanho da fonte, faça 1,7 rem. Tudo bem, vamos seguir em frente e cuidar das habilidades. Vou colocar os itens da lista horizontalmente em uma linha. Então, primeiro, selecione os elementos UL. Vou usar novamente o flexbox. Precisamos definir a propriedade de exibição como flexível. Ele colocará os itens flexíveis em uma linha Em seguida, para criar algum espaço entre os itens, use justify content com um espaço de valor Além disso, vou criar algum espaço na parte superior e inferior. Então, vamos usar a margem, defini-la para um rem na parte superior do que zero, do que para ram na parte inferior. E, novamente, zero. Tudo bem, então os itens da lista estão alinhados e agora vou estilizá-los Vamos selecionar o elemento LI, alterar o tamanho da fonte, torná-la para 1,5 RAM e, em seguida, alterar a cor. Vou usar sua cor 5050, depois novamente 50. Ok, vamos em frente e vamos para o fundo. Vamos selecioná-lo. Em primeiro lugar, vou mudar a cor de fundo. Vamos usar aqui F, a b348. Em seguida, mude a cor do texto, torne-o branco. Além disso, vou criar algum espaço dentro do botão. Vamos usar o preenchimento e configurá-lo para 0,5 rem na parte superior e inferior e, em seguida, 1,5 rem nos lados esquerdo e direito Além disso, vou arredondar o botão usando raio de borda com valor Então, como você pode ver, o botão all ou D parece bom. Vamos continuar e aumentar o tamanho da fonte. Faça com que seja 1,5 RAM. E também vou criar algum espaço entre as letras usando o ponto de espaçamento entre letras para embrulhar Ok, então é isso em relação à primeira parte do cartão. Em seguida, vou personalizar o botão, que será colocado no canto superior direito do cartão. Então, vamos seguir em frente e selecionar story btn. E antes de tudo, defina sua largura e altura. Vou configurar os dois como corridos no outono e, em seguida, mudar a cor de fundo e fazer isso também. Então, aqui temos o botão. Antes de tudo, precisamos fixar sua posição. Então, vamos definir sua posição como absoluta. Então, para alinhá-lo acordo com o elemento pai, precisamos definir a posição relativa do cartão Em seguida, defina as propriedades superiores e corretas. Vou definir os dois para menos uma repetição. Ok? Portanto, o botão está posicionado da maneira correta. Vamos fazer com que seja arredondado. Use o raio da borda. Nós desvalorizamos cinco rodadas. Ok, então agora, isso é tudo sobre o botão. Agora eu vou cuidar da linha. Então, vamos prosseguir e selecioná-lo. Vamos definir sua largura e altura. Faça com 100%. Quanto à altura, vou configurá-la para 0,1 RAM. E também mude a cor de fundo e torne-a branca. Então, no momento, a linha não está visível porque está colocada na parte superior da parte inferior. Então, precisamos fixar sua posição. Na verdade, vou colocá-lo no centro do botão. E para isso, vamos usar o Flexbox. Agora a linha está visível e a próxima coisa que eu quero fazer é criar um pequeno espaço dentro do botão. Vamos usar o preenchimento com o valor de 0,5 RAM. E também mude o tipo do mais grosso, torne-o mais ponteiro. Tudo bem, então com um botão, finalmente terminamos. Agora, eu vou cuidar desses tori, que agora estão escondidos Então, primeiro vamos torná-lo visível. Eu vou me livrar do display none daqui. Então, como você pode ver agora, está visível e precisamos personalizá-lo. Vamos definir sua largura e altura. Eu vou fazer os dois cem por cento. E depois mude a cor de fundo. Vamos usar seu valor RGBA. Vamos inserir aqui 2536969 e, em seguida, e, em seguida Em seguida, vou cuidar de sua posição. Ele deve ser estendido para todo o cartão. Então, vamos definir a posição como absoluta. E então faça as propriedades esquerda e superior, ambas zero. Depois disso, vamos alinhar os elementos dentro dessa história usando o flexbox Vou colocá-los no centro. Então, vamos definir a propriedade de exibição como flexível. Então precisamos mudar a direção, torná-la coluna. E depois disso, para colocar os itens flexíveis no centro, tanto horizontal quanto verticalmente, vou usar justify-content center e alinhar itens ao para colocar os itens flexíveis no centro, tanto horizontal quanto verticalmente, vou usar justify-content center e alinhar itens ao centro. Ok, por fim, vamos criar algum espaço dentro da história Vamos usar o preenchimento e configurá-lo como Ram Tudo bem, com esse Tory, quero dizer, com o invólucro, terminamos Vamos continuar e personalizar o título e o parágrafo. Vamos selecionar esse título tori e aumentar o tamanho da fonte, tornando-o uma RAM completa Em seguida, vou criar a pasta de fontes usando o peso de fonte 700 Mude a cor e torne-a branca. Além disso, vou criar algum espaço na parte inferior usando a margem inferior, que desvalorizamos para correr Ok, depois disso, vamos selecionar o parágrafo. Aumente o tamanho da fonte, faça 1,8 gramas. Então eu vou mudar a cor. Vamos fazer com que seja e. Além disso, vou justificar o texto usando text-align, justify o texto usando text-align E então crie algum espaço entre as letras usando espaçamento entre letras na rampa 0.1 Tudo bem, então o parágrafo também é personalizado. A única coisa que vou fazer é criar uma pequena indentação E para isso, vou usar texto. A propriedade de recuo seria desvalorizada para ser executada. Ok, dito isso em relação à história, agora temos que fazê-la funcionar. Mas antes disso, temos aqui um pequeno problema. O botão é colocado atrás desse tori. Então, para corrigir isso, vou usar a propriedade z-index Temos que configurá-lo para um valor maior que zero, digamos 50. Tudo bem, então estamos prontos para fazer esse botão funcionar. Então eu vou usar JavaScript. No início. Vamos esconder as histórias para isso. Vou usar Transform com a função de escala. Para ocultar o elemento, precisamos definir a escala como zero. Ok, então, como você pode ver, o armazenamento ou o oculto, vamos ao arquivo JavaScript e, em primeiro lugar, aos botões selecionados. Para isso, vou usar o seletor de consultas, todo o método. Temos que especificar aqui o nome da classe, história, BTN. Na verdade, o método do seletor de consulta all retorna a lista de nós, que é um objeto semelhante a uma matriz Cada item tem seu número de índice e também a própria lista como uma propriedade de comprimento. Ok, então temos que examinar esses botões e anexar a cada um deles e ao ouvinte do evento com o evento de clique Para percorrer a lista, vou usar uma das chamadas de métodos auxiliares de matriz para cada um Isso nos permite executar uma função para cada item da lista separadamente. Então, vamos continuar e usar forEach. É preciso um parâmetro que será a função de retorno de chamada E essa função será executada para cada item da lista. Essa função de retorno de chamada em si usa um parâmetro, que será o item atual da lista, quero dizer, o botão Então, vamos inserir seu btn. Em seguida, precisamos conectar um ouvinte de eventos ao botão Vamos especificar aqui o tipo do evento que será clique. Além disso, o ouvinte de eventos exceto o segundo parâmetro, que é a função de seta, quero dizer a função de retorno de chamada E será executado assim que formos elementos rapidamente. Ok, agora vamos testar se o evento de clique funciona, vou correr para o console. Digamos que clicou. Então, se eu inspecionar a página, mudar para a guia Console e clicar no botão, seremos clicados no Então isso significa que tudo funciona bem e agora temos que fazer a história funcionar. Quero dizer, temos que exibi-lo desclicando e também precisamos girar o Então, deixe-me explicar o que vamos fazer. Criaremos uma nova classe e CSS e definiremos estilos com essa classe. Em seguida, adicionaremos esse className à história e ao próprio botão. Faremos isso usando o método de alternância porque precisamos exibir a história no primeiro clique e ocultá-la no próximo Então, como dissemos para isso, temos que usar um método chamado toggle Então, vamos continuar e adicionar uma nova classe na parte inferior. Precisamos de BTN. E agora temos que usar uma das propriedades chamada lista de classes. Isso nos dá todas as aulas que a mulher tem. E também nos permite acessar os diferentes métodos, como alternar, adicionar e remover Precisamos de uma lista de classes seguida pelo método toggle. Dentro do parêntese, temos que especificar o nome da classe Vamos chamar isso de mudança. Então, agora, se eu exibir elementos e uma bela história, BTN e, em seguida, clique nela Você verá que ele altera a classe com um clique. E então, na próxima camada, a entrada é removida. Ok, agora podemos girar o botão com um clique. Vamos ao arquivo CSS e temos que selecionar a história btn com mudança de classe Em seguida, use Transformar com a função de rotação. Vou girar os elementos em 405 graus. Em seguida, use a transição com transformação e com a duração 0,5 s. Então, se eu clicar no botão, ele girará bem Agora, da mesma forma, precisamos mostrar a história. Vamos voltar ao arquivo JavaScript e adicionar mais alterações a essa história. Na verdade, esse tori é o irmão do botão. Então, vou usar uma das propriedades chamada irmão do próximo elemento Precisamos de btn seguido pelo próximo elemento, irmão. Mais uma vez, precisamos usar a lista de classes seguida pelo método toggle. E como nome da classe, precisamos inserir sua alteração. Ok, vamos ao arquivo CSS e selecionar história com alteração. Em seguida, use transform. Para tornar a história visível, vou aumentar a escala para uma. E também use a transição com os valores todos e 0,5 s. Tudo bem, agora se eu clicar no botão, a história será exibida Então, funciona bem, mas não é isso que queremos que seja considerado. A escala está aumentando a partir do centro. Mas, no nosso caso, precisamos aumentá-lo a partir do canto superior direito do cartão. Para conseguir isso, temos que alterar a propriedade de origem da transformação. Por padrão, ele está configurado para o centro e, no nosso caso, estará no canto superior direito. Ok, agora vem do canto superior direito, mas ainda assim, não é o que queremos. Para tornar o efeito muito melhor. Eu vou manipular com o raio da borda. Por padrão, vou definir o raio da borda para 50 RAM. Ele pertence ao canto superior esquerdo. Então precisamos de zero para o canto superior direito. E então 50 correu para o canto inferior direito e também para o canto inferior esquerdo. Além disso, vou definir o raio da borda como zero com a mudança de classe Ok, agora tudo funciona perfeitamente e antes de terminarmos esta seção, vou fazer mais algumas coisas. Vou alinhar os carros de forma diferente. Vou colocar a primeira carta no topo do rapper. Quanto ao terceiro cartão, vou colocá-lo na parte inferior da embalagem Então, vamos selecionar o primeiro cartão usando uma dessas pseudoclasses Para colocar o cartão na parte superior do invólucro, vamos usar uma linha self com o valor flex start Então, vamos duplicar esse código. Eu vou mudar o primeiro filho, o último filho. Além disso, em vez da partida flexível, precisamos flexionar. E como você pode ver, as cartas estão alinhadas Por fim, vou criar um pequeno efeito de foco. Na verdade, vou diminuir a opacidade por padrão. Vamos configurá-lo para 0,7. Em seguida, aumente oito ao passar o mouse. Então, vamos selecionar um membro da equipe com o mouse. Defina a opacidade como um e, em seguida, use a transição com os valores de opacidade 0,5 s. Ok, então, finalmente, terminamos Terminamos de trabalhar nesta seção. Então, vamos seguir em frente e cuidar do próximo. 17. Projeto 2 - Criar e Estilo Seção de Contato e Rodapé: A próxima seção será a seção de contato. Vamos dar uma olhada no projeto finalizado. Então, como você pode ver, a seção de conduta consiste em três partes diferentes. Temos uma imagem no lado esquerdo do que alguns campos de entrada no lado direito. E abaixo temos um pequeno rodapé com alguns textos de direitos autorais As duas primeiras partes, eu estou na imagem e os campos de entrada, são colocados em um ambiente 3D e têm um bom efeito de foco Na verdade, quero mencionar aqui uma coisa enquanto estávamos trabalhando no projeto, notei que às vezes, por algum motivo a página inteira vai para o lado esquerdo, e isso acontece no Google Chrome. Portanto, a solução em que pensei foi atribuir o transbordamento oculto ao recipiente em vez do corpo Além disso, vou definir a largura. Vamos fazer com que seja 100%. Tudo bem, é isso. Vamos começar a criar a marcação HTML. Vou inserir sua nova seção de comentários no final da seção quatro. Em seguida, o elemento de seção aberta com uma seção de classe para esse elemento de seção consistirá em algumas partes diferentes. A primeira parte que vou criar é o título, que será semelhante aos títulos das seções anteriores Então, vamos abrir o elemento de cabeçalho H1 com um título de seção de classe E como conteúdo, vamos inserir seu contato. Próximo. Eu vou cuidar do formulário. Mas antes de tudo, vamos criar uma tag div que será o contêiner do formulário Vamos usar aqui um recipiente de espuma de classe. Em seguida, insira uma imagem. Vou selecionar Formulário IMG dot PNG na pasta de imagens. E também vamos atribuir à classe de elemento de imagem o formulário IMG Ok? Depois disso, vou criar o formulário em si. Vamos atribuir a ele o formulário de contato da classe. Portanto, a fórmula consiste em quatro elementos diferentes. Teremos dois campos de entrada além da área de texto e também do botão de envio. Então, vamos criar um elemento de entrada com texto do tipo. Além disso, vou usar seu atributo de espaço reservado com o valor do seu nome Então eu vou duplicar essa linha de código. Altere o atributo de tipo quando estiver aqui e-mail. Quanto ao espaço reservado, vou inserir aqui seu e-mail Em seguida, vem a área de texto. Vou atribuir a ele um atributo de espaço reservado com o valor de sua mensagem Ok? Depois disso, vou criar um botão de envio, e vou fazer isso usando elementos de entrada, mas com o tipo submit. E também precisamos aqui do valor, que será enviado. Ok, então o último elemento que precisamos criar é o rodapé Estou no parágrafo. Vamos inseri-lo fora do elemento do formulário com os direitos autorais da classe. Em seguida, insira alguns textos como direitos autorais, seguidos pelo sinal de direitos autorais, que será a entidade HTML5 Precisamos aqui, comercial, cópia, ponto e vírgula, depois codificar E também todos os direitos reservados. Tudo bem, é isso. Tudo está preparado para começar, para iniciar esta seção. Vamos prosseguir e inserir novos comentários no arquivo CSS. Precisamos da Seção quatro. Em seguida, final da seção quatro. Em seguida, selecione os elementos da seção e defina sua largura e altura. Vou definir a largura para 100%. Quanto à altura, vamos fazer com que seja 130% da janela de visualização. Ok. Depois disso, vou alinhar o título da seção, o contêiner do formulário e o rodapé usando o flexbox, precisamos Em seguida, precisamos colocar os elementos verticalmente em uma coluna. Então, eu vou mudar de direção. Vamos fazer uma ligação. Além disso. Para criar algum espaço ao redor dos itens flexíveis, vamos usar justificar o espaço ao redor do conteúdo E então, para colocar elementos horizontalmente no centro, vamos usar alinhar Ok, isso é tudo sobre esse elemento da seção. Vamos seguir em frente e personalizar o contêiner do telefone. Primeiro, vamos definir essa largura e altura. Vamos fazer uma largura oito por cento. Quanto à altura, vou configurá-la para 40%. E também altere a cor de fundo. Vamos usar sua cor ou E5, E9, F, F. Ok, F. Ok, agora precisamos colocar a imagem e esses campos de entrada lado a esses campos de entrada E para isso, vou usar novamente livros de fluxo. Precisamos de display flex. Então, para colocar os elementos no centro verticalmente, vamos usar o centro de alinhamento de itens Em seguida, crie algum espaço entre os itens usando o justify content space uniformemente Tudo bem, por fim, vamos criar uma pequena sombra e deixar o recipiente ligeiramente Então, vou usar box-shadow. Será a sombra de vários níveis. Então, vamos inserir aqui 0,3 RAM duas vezes, depois apontar para RAM e a cor CCC Quanto à segunda sombra, vou fazê-la no lado esquerdo. Portanto, precisamos usar valores negativos, -0,1 grama duas vezes do ponto zero para RAM e a mesma cor E também use raio de borda com o valor 0,5. Rampa. Tudo bem, agora podemos personalizar a imagem. Então, vamos selecioná-lo. E vamos primeiro definir sua largura. Vou fazer com que seja 55 rem. Em seguida, vou mudar a cor do plano de fundo. Nesse caso, vamos usar o valor RGBA. Precisamos aqui de 50231255 e da opacidade de 0,8. E também crie algum espaço dentro dos elementos usando o preenchimento Vamos fazer cinco rem em todos os quatro lados. Ok, vamos seguir em frente e adicionar mais alguns estilos à imagem. Vou diminuir sua opacidade. Vamos fazer 0,8, e também criar algum efeito de sombra. Vai ficar no lado esquerdo. Portanto, precisamos aqui menos três RAM do que três RAM para RAM e a cor AAA E também crie um pequeno raio de borda. Vamos configurá-lo para 0,5 rodada. Tudo bem, vamos falar sobre a imagem agora, vou personalizar um elemento do formulário Vamos selecioná-lo e definir sua largura. Eu vou fazer 45 RAM. Agora, mude a cor de fundo e torne-a branca. Ok, a seguir, vou alinhar os elementos dentro do formulário E para isso, vamos facilitar novamente o Flexbox. Defina a exibição para flexionar e, em seguida, mude de direção, transforme-a em coluna para alinhar os elementos verticalmente Portanto, considera-se que os elementos são colocados verticalmente em uma coluna Vamos continuar e adicionar mais alguns estilos ao formulário. Vou criar espaço dentro do elemento usando preenchimento Vamos fazer com três RAM. Em seguida, defina o raio da borda 2,5 RAM. E também vou criar sombras. Os valores três RAM duas vezes e, em seguida, para RAM com a cor AAA Tudo bem, isso é tudo sobre o elemento do formulário. Vamos seguir em frente e personalizar os campos de entrada. Na verdade, temos aqui duas entradas e a área de texto e também o botão enviar, que é representado pelo elemento de entrada Todos esses elementos terão alguns estilos comuns. Então, vamos selecionar a entrada e também a área de texto. Em primeiro lugar, vou definir margem e preenchimento. Precisamos criar espaço ao redor dos elementos e também dentro deles. Então, vamos definir a margem para uma RAM. Quanto ao preenchimento, também vou configurá-lo para um rem. Em seguida, vou mudar o tamanho da fonte, torná-la 1,3 RAM. Além disso, vou criar algum espaço entre as letras. Vamos configurá-lo para 0,1 RAM. Em seguida, livre-se da borda padrão. Eu vou defini-lo como nenhum. Eu vou fazer os cantos arredondados. Vamos definir o raio da borda para ser executado. E, por fim, vou criar uma sombra de caixa. Nesse caso, precisamos de sombra do lado interno. Então, vou inserir sua inserção. O valor é 0,1, rem, 0,1 RAM, depois aponte para RAM e a cor di, di, di. E também vou criar a mesma sombra no lado esquerdo. Então, parece-me que sua inserção é de -0,1 RAM, -0,1 RAM do que 0,2 rem e da Tudo bem, isso é sobre os estilos comuns. Agora eu quero personalizar a área de texto O botão separadamente. Vamos começar com uma área de texto. Como você sabe, podemos alterar o tamanho da área de texto manualmente, mas isso atrapalhará o layout Então, eu quero limitar sua largura e altura. Então, vamos prosseguir e selecionar a área de texto. Vou definir a altura máxima e também a altura mínima. Vamos definir a altura máxima para 15 RAM. Quanto à altura média, vou configurá-la para dez RAM. Além disso, vou definir a largura máxima e a largura mínima Então, vamos definir uma largura máxima para 100%. Quanto à largura mínima, vamos fazer com que seja 70%. Então, agora funciona muito melhor. Vamos seguir em frente e iniciar o botão de envio. Vamos selecioná-lo usando o atributo type. Então, neste caso, vou selecionar Formulário de contato seguido pelos elementos de entrada. E entre colchetes, temos que especificar o tipo como Enviar. Vamos mudar a cor do plano de fundo. Vamos usar aqui RGBA, 50231255 e 0.8 para alterar a cor, Agora, o botão parece muito melhor. Vamos continuar e adicionar mais alguns estilos. Vou deixar a fonte mais ousada. Então, vamos definir o peso da fonte como Boulder. Também crie algum espaço entre as letras. Faça com que seja 0,5 rem. E, finalmente, mude o tipo do grosseiro, faça com que ele aponte. Tudo bem, então o botão é personalizado e, antes de continuarmos, vou adicionar a ele um pequeno efeito de foco. Então, vamos pegar esse seletor daqui. E para isso, passe o mouse. Eu vou mudar a cor de fundo. Vamos fazer com que seja 327ff. Em seguida, use a transição com cor de fundo e com uma duração de 0,5 s. Tudo bem, então a fórmula é personalizada E antes de prosseguirmos e começarmos o parágrafo abaixo, vou criar alguns efeitos 3D. Antes de tudo, para criar um ambiente 3D, precisamos usar uma das propriedades chamada perspectiva. Precisamos atribuí-lo ao elemento principal, que é o recipiente de espuma Então, vamos definir a perspectiva de 200 rodadas. Em geral, uma propriedade prospectiva define a distância entre o elemento e o usuário Agora, precisamos girar os dois elementos. Estou na imagem e no formulário. Então, vou usar o Transform. Com função de rotação. Precisamos girar os elementos verticalmente de acordo com o Vamos instituir 20 graus. Então, precisamos da mesma rotação de transformação para o formulário. Mas na direção oposta, precisamos de -20 graus. Tudo bem, como você pode ver, os elementos são girados e a única coisa que precisamos fazer é criar um efeito de foco. Vou mover os elementos um pouco para cima quando passarmos o mouse sobre eles. E também vou mudar a sombra. Então, vamos prosseguir e selecionar Formulário IMG com o mouse. Em seguida, use Transform. Precisamos aqui da função Translate com direção y. Então, para mover o elemento para cima, temos que inserir seu valor negativo, digamos menos duas rampas E também precisamos girar y novamente com 20 graus. Em seguida, vou mudar a sombra da caixa. Isso é Institute ou menos cinco RAM do que cinco RAM. Carneiro. E a cor AAA. Além disso, vamos usar a transição com o valor 0,5 s. Em seguida, precisamos do mesmo efeito de foco com o elemento do formulário Então, vamos selecionar Formulário de contato com o mouse. Então eu vou pegar esses estilos daqui. Precisamos aqui transformar 20 graus em -20 graus. Além disso, em vez de menos cinco RAM, precisamos de cinco em execução. Além disso, vamos usar a transição com os valores 0 e 0,5 s. Tudo bem, então tudo parece muito bom E a única coisa que precisamos fazer é personalizar esse parágrafo aqui. Então, vamos selecioná-lo com o nome da classe copyright. Em seguida, aumente o tamanho da fonte e transforme-a em Ram. Altere o espaçamento entre letras Faça com que aponte para a RAM. Além disso, vou definir a cor como 444 e criar espaço na parte superior usando a margem superior com a rampa de valor cinco Tudo bem, então isso é sobre a seção de contato. Terminamos com isso e, na verdade, já criamos todas as seções deste projeto. Agora, a próxima coisa que vou fazer é fazer o NEP funcionar E também vou criar um botão que nos permitirá rolar para cima sem problemas 18. Projeto 2 - crie botão de rolagem e faça o trabalho do Navbar: Tudo bem, vamos continuar e começar com a navegação. Temos aqui quatro itens de navegação diferentes e suas seções apropriadas. Então, depois de clicar nos itens de navegação, devemos navegar até a seção relevante sem problemas. Para fazer isso, precisamos conectar os links de navegação a essas seções usando os atributos h reference e ID Os valores desses atributos devem corresponder. Então, vamos em frente e atribuir a todos os links nofollow h atributos de referência O primeiro vai estar em casa. Então teremos clientes. O próximo será equipe como corpo. O último será o contato. Depois disso, temos que atribuir a todos os quatro elementos da seção atributos id com os mesmos valores Então, vamos atribuir à primeira seção, insira sua casa. Então, na segunda seção , serão os clientes. Em seguida, teremos uma equipe. E por último, entre em contato. Ok, agora, se eu clicar nos itens de navegação , navegaremos até a seção apropriada. Mas agora sem nenhum efeito suave. Para corrigir isso, precisamos usar uma das propriedades chamada comportamento de rolagem e atribuí-la ao elemento HTML O valor será suave. Agora, se clicarmos nos links de navegação , navegaremos sem problemas Tudo bem, vamos falar sobre a navegação agora. Como prometi, vamos criar um botão fixo, que nos permitirá rolar até a primeira seção Quero dizer, em casa. Primeiro, vamos criar um botão no arquivo HTML. Será o elemento de link. Vamos atribuir a ela uma classe, role para cima BTN. Em seguida, vou inserir aqui o ícone Font Awesome. Vamos atribuir às classes FAS, FAA, seta para cima. Em seguida, selecione-o no arquivo CSS. Primeiro, vamos definir a largura e a altura. Vou fazer com que os dois tenham cinco rem. Em seguida, altere a cor do plano de fundo. Vou usar aqui o valor RGBA. Isso parece ser do nível 50231255 e da opacidade de 0,8. Então, o botão será corrigido. Ele deve ser colocado no canto inferior direito. Então, vamos definir a posição fixa e, em seguida, definir as propriedades inferior e direita, ambas como cinco corridas. Novamente. Então, aqui temos o botão que tem uma posição fixa. Vamos adicionar mais alguns estilos. Eu vou fazer com que seja arredondado. Digamos que o raio da borda seja de 50%. Isso aumentou o tamanho da fonte. Vamos configurá-lo para 1,6 RAM. Também mude a cor, torne-a branca. Por fim, vou colocar o ícone no centro. Então, vamos usar o flexbox. Precisamos flexibilizar a exibição, justificar o centro de conteúdo e alinhar o centro Tudo bem, então o botão é personalizado e antes que eu o faça funcionar, vamos adicionar a ele um pequeno efeito de foco. Vamos selecionar o botão com o mouse. Depois de passar o mouse sobre o botão, vou mudar ligeiramente a cor de fundo Então, vamos usar sua cor três-dois e7ff e, em seguida, usar a transição com cor de fundo e com a duração de 0,5 s. Tudo bem, então está tudo pronto. então Agora, só precisamos fazer esse botão funcionar. E para isso, temos que especificar o atributo de referência h. Precisamos inserir sua casa. Agora, se eu rolar para baixo e clicar no botão, ele voltará para a primeira seção Tudo bem, então é isso. Concluímos a construção do nosso projeto. A única coisa que precisamos fazer é torná-lo responsivo a diferentes tamanhos de tela 19. Projeto 2 - Torne o projeto responsivo: Tudo bem, então, como você sabe, este projeto é baseado em um tamanho de tela extra grande Estou dentro. Isso coincide com 1920 pixels de largura e 1080 pixels de altura. Agora temos que torná-lo responsivo a diferentes tamanhos de tela Vamos prosseguir e inspecionar a página e mudar para o modo responsivo Então, eu já preparei diferentes pontos de interrupção nos quais precisamos fazer algumas mudanças Então, eu não vou perder tempo em encontrá-los. O primeiro ponto de interrupção no qual farei algumas alterações será de 1.400 pixels Como você pode ver, o projeto precisa de algumas mudanças. Então, vamos em frente e inserir novos comentários, responsivos e não responsivos Em seguida, crie uma nova consulta de mídia CSS e especifique a largura máxima como 1.400 Então, a primeira coisa que vou fazer é mover o fundo flutuante um pouco para baixo. Então, vamos selecioná-lo e mudar sua posição superior. Eu vou fazer com que seja -120 de largura de janela de visualização. Em seguida, vamos cuidar do título. Então, vamos selecioná-lo. No início. Vou diminuir o tamanho da fonte. Vamos fazer com seis RAM. Também mude sua posição. Vamos definir a largura máxima de 225 janelas de visualização. E também vou mudar sua largura. Vamos fazer sete para correr. Tudo bem, como você pode ver, o título da seção parece bom Em seguida, vou diminuir um pouco o tamanho da fonte dos itens de navegação. Então, vamos selecionar agora por link e definir o tamanho da fonte para execução. Ok, isso é sobre a barra de navegação. Vamos seguir em frente e cuidar do logotipo, que agora é muito maior. E também vou movê-lo um pouco para baixo. Então, vamos selecionar Logo. Defina sua posição superior para 75 por cento. Depois disso, vou selecionar o ícone Font Awesome. Vamos diminuir o tamanho da fonte. Faça-o girar. Ok, então isso é tudo sobre a primeira seção. Em seguida, vou cuidar da segunda seção. Primeiro, vamos personalizar o título. Quero dizer, todos os cabeçalhos das seções. Vamos selecioná-los. Vou diminuir o tamanho da fonte, torná-la com oito RAM. Também altere o fundo da margem, faça-a girar. Ok? Portanto, o título parece bom no momento, cada seção tem a altura definida na altura da janela de visualização E eu vou mudar isso e aumentar a altura. Porém, nesse caso, essa seção ocupará a altura necessária para exibir o conteúdo. Tudo bem, a seguir, vou cuidar das cartas. Eu quero colocá-los em linhas diferentes. E também vou criar algum espaço ao redor de cada cartão. Então, primeiro de tudo, vamos selecionar o invólucro. Quero dizer embalagem de clientes. Para colocar os cartões em linhas diferentes, precisamos usar a propriedade flex wrap e configurá-la para embrulhar Depois disso, vamos selecionar o cabo em si. Precisamos do cliente e definimos a margem como cinco rem na parte superior e inferior e dez RAM nos lados esquerdo e direito. Ok, isso é tudo sobre a segunda seção. Vamos seguir em frente e fazer o mesmo com o terceiro. Vamos selecionar a Seção três e dizer oi para Auto. Em seguida, precisamos selecionar um rapper, quero dizer embalagem de equipe e definir embalagem flexível para embrulhar Por fim, selecione a carta em si, quero dizer membro da equipe e defina margem como cinco rem na parte superior e inferior e tentando aumentar nos lados esquerdo e direito Ok, por fim, vou cuidar da seção de contato Vamos aumentar o tamanho do plano de fundo. Selecione Recipiente do formulário e defina sua altura para 60%. Em seguida, vou esconder a imagem de todo. Então, vamos selecionar Formulário IMG Atribuído para exibir qual é o valor, nenhum Assim, é possível ver que a imagem está oculta. Além disso, acho que não precisamos mais girar o formulário em si. Então, vamos selecionar Formulário de contato. Em seguida, use a propriedade de transformação com a função Translate. Precisamos defini-lo como zero. E, finalmente, vamos mudar o efeito de foco. Agora, a forma sobe por duas rampas e eu vou mudá-la e torná-la uma Então, vamos selecionar Formulário de contato com o mouse. Em seguida, pegue essa linha de código e, em vez de zero, vamos inserir aqui menos uma execução Por fim, vamos criar algum espaço na parte inferior do parágrafo. No momento, ele tem uma margem superior com o valor cinco rem. Também vou adicionar a ela uma margem na parte inferior. Então, vamos selecionar Parágrafo e margem definida com os seguintes valores. Precisamos de cinco rem na parte superior do que zero no lado direito para RAM na parte inferior e zero no lado esquerdo. Tudo bem, é isso. Acho que o projeto fica bem nesse ponto de interrupção. Então, vamos seguir em frente e encontrar o próximo, que eu acho que terá 1.150 pixels Então, vamos criar uma nova mídia CSS e especificar uma largura máxima como 1.150 Primeiro, vamos mover o fundo flutuante para baixo. Então, vamos selecioná-lo e configurá-lo posicionado para -110 de largura da janela de visualização Depois disso. Como você pode ver, precisamos personalizar o elemento de cabeçalho. Então, vamos selecioná-lo. Vou definir o tamanho da fonte para cinco RAM. Em seguida, mude a posição superior, faça 30. Relatório. Quanto à largura, vou diminuir a rodada H.263. Tudo bem, por fim, vamos diminuir um o tamanho do logotipo Vamos selecionar o ícone Font Awesome e definir o tamanho da fonte para nove rampas. Tudo bem, como você pode ver, a primeira seção parece boa e na verdade, todas as outras seções também parecem boas Então, vou cuidar do próximo ponto de interrupção. O próximo terá 950 pixels. Então, vamos criar uma nova mídia CSS e especificar aqui a largura máxima de 950 pixels. Nesses pontos de interrupção. Eu vou cuidar da primeira seção novamente. Então, vamos selecionar o fundo flutuante e mudar novamente sua posição. Eu vou movê-lo. Isso vai acabar. Então, vamos definir até -100 de largura da janela de visualização. E também tire você do título. Eu vou mudar sua posição. Vamos definir os dois primeiros para a largura da janela de visualização. Certo? A única coisa que vou fazer no ponto de interrupção é aumentar o espaço entre os itens de navegação. Então, vamos selecionar agora a potência e usar a propriedade justify content com o ritmo dos valores. Ok, então é isso no ponto de interrupção. Vamos seguir em frente e encontrar o próximo. Acho que serão 750 pixels. Então, novamente, vou criar uma nova consulta de mídia CSS com a largura máxima de 750 A primeira coisa que vou fazer no ponto de interrupção é diminuir o tamanho da fonte do elemento HTML. Vamos defini-lo para 50%. Na verdade, isso afetará todos os elementos. Então, como você pode ver, os tamanhos dos elementos diminuem. Em seguida, vou mover novamente o fundo flutuante um pouco para baixo. Então, vamos selecioná-lo e definir a posição superior. Nesse caso, dois menos nove para a largura da janela de visualização. Depois disso, vou mover o cabeçalho um pouco para baixo também. Então, vamos selecioná-lo. Encontramos a propriedade principal, tornando-a com 48 janelas de visualização. E, finalmente, vou diminuir o espaço na parte inferior do título desta seção. Vamos definir a margem inferior para cinco corridas. Tudo bem, então é isso. Em um ponto de interrupção, todas essas seções parecem boas. E agora temos que seguir em frente e fazer algumas alterações no último ponto de interrupção, que será de 550 pixels Ok, vamos criar uma nova mídia CSS e especificar a largura máxima como 550 Vamos diminuir novamente o tamanho da fonte do elemento HTML. Nesse caso, vou configurá-lo para 45%. Depois disso, vamos cuidar também do fundo flutuante e do título. Eu vou mudar a posição superior. Vamos fazer com que seja com -70 de largura de janela de visualização. Em seguida, selecione o título da Seção 1. Eu vou mudar sua posição de topo. Vamos fazer 65. Largura da janela de Altere também a largura, torne-a com 42 RAM e, em seguida, diminua o tamanho da fonte, torne-a 3,5 Ran. Ok, então a primeira seção está bonita. Em seguida, vou diminuir o tamanho da fonte dos cabeçalhos das seções Então, vamos selecioná-los e definir o tamanho da fonte para seis RAM. Depois disso, vou personalizar os cartões. Como você pode ver, precisamos aumentar a largura dos cartões. Mas, na verdade, cada cartão já tem largura suficiente. E o problema aqui é a margem nos lados esquerdo e direito. Então, vamos selecionar o cliente. Vou definir margem como cinco rem na parte superior e inferior e zero nos lados esquerdo e direito. Vamos fazer o mesmo com os membros da equipe também. Vamos definir a margem para cinco rem e zero. Tudo bem, isso é sobre a segunda e a terceira seções cartas parecem boas. Vamos seguir em frente e personalizar a quarta seção. Eu fiz a seção de contato. No começo, vou mudar a altura e configurá-la como geral. Em seguida, vou esconder o plano de fundo. Então, vamos selecionar o contêiner do formulário. Vou definir a cor de fundo como transparente. E também se livre da sombra da caixa. Vamos defini-lo como nenhum. Tudo bem, então é considerado que o fundo está oculto. Em seguida, vamos cuidar do formulário em si. Vou diminuir a sombra da caixa. Vamos selecionar o Formulário de Contato e definir a sombra da caixa para 1 g duas vezes do que usar a cor AAA Em seguida, também vou mudar a sombra da caixa ao passar o mouse. Vamos duplicar esse código aqui no formulário de contato e alterar os valores Vamos usar aqui para RAM duas vezes. Então três correram. Ok, isso é tudo sobre o elemento do formulário. Por fim, vou personalizar o parágrafo e também quero mover o botão de rolagem para o canto Então, primeiro, vamos selecionar o parágrafo com os direitos autorais da classe. Vou diminuir um pouco o tamanho da fonte. Vamos fazer com 1,8 RAM. Em seguida, defina a margem para cinco rem. E também use o centro de alinhamento de texto. Para o botão. Vou definir as duas posições. Estou na parte inferior e direita para correr. Tudo bem, é isso. Todas essas seções parecem boas e terminamos de trabalhar nelas. Espero que você tenha gostado e aprendido algo novo e interessante . Vamos seguir em frente. 20. Projeto 3 - Pré-visualização do projeto: Tudo bem, então é hora de construir nosso próximo projeto, que será o clone de um dos mais populares e comumente sites mais populares e comumente usados chamado Paypal, criará a interface de usuário das diferentes Estou na página principal, páginas de login e inscrição. É claro que não será o clone exato com todas as funcionalidades Como eu disse, criaremos apenas uma interface de usuário com HTML, CSS e JavaScript. O Paypal parece diferente em diferentes países. A interface do usuário muda com frequência de tempos em tempos. Portanto, não se preocupe se esse não for o clone exato da interface atual Tudo bem, então antes de começarmos a escrever o código, primeiro, vamos descrever a aparência do projeto Então, como eu disse, criaremos três páginas diferentes, login principal e inscrição. Começaremos com a página principal. Ele consistirá em algumas seções diferentes. A primeira seção será o banner com navegação Temos aqui vários itens de navegação. Se eu passar o mouse sobre eles, o menu suspenso será Ele mudará quando passarmos mouse sobre outro item de navegação Além disso, teremos aqui dois botões diferentes para fazer login e se inscrever. Se eu clicar neles, navegaremos até a página correta. Então, o banner será seguido pela segunda seção. Ele incluirá três partes diferentes com Font, ícones incríveis, alguns elementos de texto e botões. Em seguida, teremos essa seção azul com alguns parágrafos diferentes A seguir, criaremos esta pequena seção aqui com uma imagem e três etapas diferentes. Abaixo, teremos um botão para se inscrever, seguido pelo rodapé Tudo bem, então vamos ver a página principal. Vamos dar uma olhada na página de login. Será bastante semelhante à página de login original. Teremos aqui dois campos de entrada com botões. Essa provavelmente é a página de inscrição. Ele consistirá em duas partes. No lado esquerdo, teremos várias imagens dos clientes. Quanto ao lado direito, ele incluirá duas opções diferentes. Se queremos criar uma conta pessoal ou comercial. Tudo bem, então isso é tudo sobre o projeto. Como de costume, vamos torná-lo responsivo a diferentes tamanhos de tela Se eu inspecionar a página e mudar para o modo responsivo, você verá que ela é Uma coisa a observar aqui: em telas menores, não teremos mais os menus suspensos Eles se transformarão no menu assim. Ok, então é isso. Estamos prontos para começar a construir o projeto. Então, vamos seguir em frente. 21. Projeto 3 - Criar e personalizar o desembarque: Tudo bem, então, uma vez que descrevemos nosso próximo projeto, agora podemos começar a construí-lo Eu criei uma nova pasta na área de trabalho chamada Business Agency, na qual tenho outra pasta para as imagens. Vamos abrir essa pasta no VS Code e criar nossos arquivos de trabalho para HTML, índice ou HTML. Então, para CSS, vamos chamá-lo de style.css e script.js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Para isso, como sempre, vou usar um ou dois pacotes de código de visualizações chamado emmet Temos que inserir aqui um ponto de exclamação e depois pressionar Tab ou Enter Aqui vamos nós. Temos aqui as tags HTML básicas. Em primeiro lugar, vou mudar o título. Vamos inserir uma agência comercial anual e, em seguida, vincular os arquivos CSS e JavaScript. Vamos abrir a tag do link e especificar a parte do arquivo. Isso provavelmente é JavaScript. Vou abrir a tag de script logo acima da tag do corpo de fechamento. E então vamos especificar a parte do arquivo no atributo source. Então, todos os três arquivos estão conectados. Em seguida, quero trazer mais um link. Durante todo o projeto, vou usar os ícones Font Awesome. Então, vamos prosseguir e pesquisar Font Awesome, CDN, js. Em seguida, pegue o link daqui, abra a tag do link nos elementos principais e cole o link como o valor dos atributos de referência h. Tudo bem, agora podemos executar o projeto no navegador para isso Como você já adivinhou, vou usar um pacote de código do VS chamado servidor ativo Isso nos permite executar a vida útil do projeto no navegador e fazer as alterações sem atualizar a página Tudo bem, por fim, vamos colocar o navegador e o editor de texto, assim E comece. Então, vamos construir o projeto seção por seção. Criaremos a marcação HTML para cada seção e depois a personalizaremos usando CSS A primeira parte que vamos construir será a aterrissagem. Vamos abrir a etiqueta de presente, que será o recipiente. Em seguida, institua novos comentários para a seção 1. E, em seguida, abra o elemento da seção com uma seção de classe um. Portanto, a primeira seção incluirá o banner, que consistirá no título, parágrafo e botão Então, vamos abrir a tag div com o banner da classe. Então, dentro desse elemento, vou abrir os elementos de cabeçalho H1 com a faixa de classe que estamos dirigindo Lembre-se de que o título terá a animação CSS. Ele consistirá em quatro elementos de texto diferentes e eles serão representados pelos elementos de extensão. Então, vou inserir o período de um ano com o título de uma turma. E com as ideias de negócios de conteúdo. Vamos duplicar esse código três vezes e alterar os nomes das classes e também o conteúdo O segundo será consultoria. Então teremos marketing digital. E a última será estratégia. Tudo bem, então isso é tudo sobre o título. Em seguida, precisamos criar o parágrafo. Portanto, ele abre elementos p com o parágrafo do banner da classe e, em seguida, interfere em algum texto fictício Finalmente, precisamos criar um botão, para que seja uma tag de botão aberto com a classe banner btn Em seguida, insira sua descoberta de conteúdo. Agora Tudo bem, então a marcação HTML foi criada para a primeira seção, e agora temos que começar a escrever um pouco Em primeiro lugar, vou criar alguns estilos comuns e redefinidos. Vamos inserir novos comentários, estilos comuns. De estilos comuns. Em seguida, selecione cada elemento usando um asterisco. Então, primeiro de tudo, vou eliminar a margem e o preenchimento padrão de cada elemento Então, vamos definir os dois como zero. Em seguida, vou definir a caixa de borda do tamanho da caixa Vamos nos livrar do esboço padrão. Vamos defini-lo como nenhum. Em seguida, vou me livrar do padrão sublinhado dos elementos do link Então, vamos usar a decoração de texto com o valor none. E, finalmente, vou remover os marcadores padrão dos elementos da lista Vamos usar o tipo de estilo de lista, nenhum. Ok, como você pode ver, todos os estilos comuns são aplicados aos elementos. Em seguida, vou cuidar das fontes. Ao longo do projeto, usaremos algumas fontes diferentes. Algumas delas serão fontes do Google, mas, além disso, também usaremos outros formulários. Vamos visitar o site do Google Fonts. E então pesquise o dA2 abaixo. Vou selecionar todos os estilos diferentes aqui. Em seguida, vou procurar por Oswald. Vamos selecionar todos esses estilos também. Então eu vou pegar o link e colá-lo na cabeça. Portanto, as fontes do Google estão vinculadas. Mas, além disso, vou usar outros telefones chamados de milho Saul, o que eu acho muito bom Esse telefone é usado em alguns lugares do projeto. Quero dizer, por exemplo, o logotipo da página da web. Eu já instalei essa fonte. Está anexado a esta palestra. Então, você pode baixá-lo e instalá-lo. Tudo bem, a última coisa que vou fazer aqui, quero dizer, os estilos de cada elemento é definir a família da fonte Por padrão, vou definir a família de fontes para comprar dois cursos para Lu Da. Então, como você pode ver, a família de fontes foi alterada. Durante todo o projeto. Vamos usar a RAM como unidades de medida. No momento, 1 g é igual a 16 pixels porque, por padrão, tamanho da fonte do elemento HTML é igual a 16 Quero converter uma corrida em dez pixels. E para isso temos que diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 62,5 por cento. Ok, então, como você pode ver, todos os elementos ficaram menores. E agora uma RAM é igual a dez picos. Vamos prosseguir e cuidar da primeira seção. Vou inserir seus novos comentários, seção um. E a seção um. Em seguida, selecione o elemento da seção. Primeiro, vamos definir a largura e a altura. Vou definir a largura para 100%. Quanto à altura, vamos torná-la 100% da janela de visualização. Além disso, vou definir a imagem como plano de fundo em tela cheia Então, vamos especificar aqui o URL da imagem. Portanto, temos a pasta Imagens e precisamos selecionar Dark BG dot jpeg Além disso, vamos inserir aqui nenhuma repetição. Além disso, vou definir o tamanho do plano de fundo para cobrir. Como você pode ver, esse elemento de seção tem uma imagem de fundo em tela cheia Então é isso sobre esse elemento da seção. Vamos seguir em frente e cuidar do banner. Antes de tudo, vou definir sua posição e colocá-la no centro da página. Então, vamos selecionar o banner e definir sua largura, torná-lo 100% Em seguida, vou definir sua posição como absoluta. Então, para posicioná-lo de acordo com seus elementos principais, vou definir a posição relativa para esse elemento de seção. E, em seguida, defina a propriedade principal, torne-a 20%. Quanto à esquerda, vou configurá-la para 50 por cento. Agora, para uma centralização perfeita, temos que mover o elemento para o lado esquerdo em 50 por cento Então, vamos usar Transform, depois traduzir com a direção x, e temos que colocar aqui -50% E, finalmente, vamos alinhar o texto no centro usando o centro de alinhamento de texto Tudo bem, então vamos considerar que o banner está centralizado e agora temos que personalizar cada elemento Eu fiz o parágrafo e o botão do título. No momento, o título inclui quatro elementos de extensão diferentes. Eventualmente, criaremos boas animações com esses elementos de extensão Mas agora só precisamos personalizar os elementos. Então, vou comentar os elementos desse painel e deixar apenas um deles. Em seguida, selecione o título e crie algum espaço na parte inferior. Usando margin-bottom. Para RAM. Além disso, vou definir a altura do cabeçalho. Vamos configurá-lo para 20 rampas. Depois disso, vamos selecionar esse elemento de extensão em si. Então, primeiro de tudo, vou definir a família de fontes. Nesse caso, vamos usar uma fonte chamada Oswald san-serif que aumenta o tamanho da fonte, tornando-a Além disso, vou definir a espessura da fonte como 400. Ok, vamos adicionar mais alguns estilos. Os elementos de extensão, vou transformar o texto em maiúsculas Também mude a cor e torne-a branca. Além disso, vou usar um pouco de efeito de sombra. Vamos usar texto. Sombra com um valor de 0,3 rodadas duas vezes que 0,6 RAM E como cor, vou usar o valor RGBA com cor preta e com a opacidade 0,5 Tudo bem, então vamos ver o título agora. Vamos seguir em frente e cuidar do parágrafo. Vou selecionar o parágrafo final. Primeiro de tudo, vamos definir um tamanho de fonte, torná-lo uma classificação completa. Em seguida, altere a espessura da fonte. Vou fazer 400. Também transforme texto em maiúsculas. Em seguida, mude a cor, torne-a branca. E também vou definir a cor de fundo para o valor RGBA Vamos usar aqui a cor preta e a opacidade 0,6. Ok, vamos seguir em frente e adicionar mais alguns estilos ao parágrafo. Até onde eu vou diminuir a largura. Vamos fazer com que seja 30%. Em seguida, vou criar algum espaço na parte inferior. E também precisamos centralizar o parágrafo para isso. Vamos usar a margem. Vou defini-lo como zero na parte superior. Então, precisamos de aldol nos lados direito e esquerdo. E para RAM na parte inferior. Depois disso, vou criar algum espaço na parte superior e inferior do parágrafo usando o preenchimento Preencher até um rem e zero e também criar algum efeito de sombra Vamos usar box-shadow com os valores executados duas vezes do que cinco E use novamente o valor RGBA com uma cor preta e com a opacidade Tudo bem, então o parágrafo é personalizado. E em seguida, temos que pegar aqui do fundo. Vamos selecioná-lo. Primeiro, vamos definir a largura e a altura. Vou começar com 23 para correr. Quanto à altura, vamos fazer com que sejam seis RAM. Em seguida, altere a cor do plano de fundo. Vou usar aqui a função de gradiente linear. Ele consistirá em duas cores diferentes. E eu quero que a direção da transição das cores seja, escrever. Quanto às cores, vamos inserir aqui a primeira, que vai ser 90 e0e Para o segundo, vou interromper você 71010 e depois mudar a cor do texto, torná-lo branco Então, aqui temos o botão. Vamos seguir em frente e adicionar mais alguns estilos a ele. Vou aumentar o tamanho da fonte. Vamos fazer com que seja executado e também transformar o texto em maiúsculas Em seguida, vou arredondar o botão usando o raio da borda Vamos configurá-lo para três marcas e também alterar a borda padrão. Vou definir a rampa da borda 2.1 como sólida. E como cor, vamos usar 800505. Ok, depois disso, vou criar alguns efeitos de sombra. Quero criar uma sombra para o botão e também para o texto. Então, vamos usar box-shadow para os valores executados, depois executar três RAM e o valor RGBA com a cor preta e com a Em seguida, vou criar uma sombra de texto. Vamos definir os valores 2,6 RAM do que 0,3, 0,2 RAM. E use novamente RGBA com uma cor preta e com a opacidade Finalmente, vamos colocar o cursor para apontar. Tudo bem, então o botão está estilizado e parece muito bom Agora temos que adicionar a animação e alguns efeitos aos elementos do banner Então, vamos seguir em frente. 22. Projeto 3 - Adicionar Animações ao desembarque: Tudo bem, então personalizamos a página de destino e agora temos que seguir em frente e adicionar algumas animações aos elementos do banner Vamos continuar e começar com o título. Como você sabe, ele consiste em quatro elementos de extensão diferentes. No momento, três deles estão ordenados e escondidos. Então, primeiro de tudo, vamos torná-los visíveis. Então, aqui vemos todos os quatro títulos. Em seguida, temos que colocá-los um em cima do outro. E para isso, precisamos definir sua posição como absoluta. Agora os cabeçalhos são colocados um em cima do outro, mas precisamos colocá-los no centro Para isso, vamos usar o flexbox. Em primeiro lugar, vou definir a largura para 100%. E então precisamos exibir, flexibilizar e justificar o centro de conteúdo. Tudo bem, então é isso. Os cabeçalhos estão posicionados e agora temos que seguir em frente e começar a trabalhar nas animações CSS Então, deixe-me explicar o que vamos fazer. Moveremos os cabeçalhos para perto do usuário com a função de tradução no ambiente 3D. E também vamos escondê-los. Esse será o estado padrão do cabeçalho. Depois disso, exibiremos os cabeçalhos em ordem com alguns intervalos Então, primeiro de tudo, vamos criar um ambiente 3D. Para isso, temos que usar uma das propriedades chamada perspectiva. Isso nos mostra a que distância o elemento está do usuário. Vou atribuí-lo aos elementos do título. Então, vamos definir a perspectiva para 50 rampa. Depois disso, vamos mover os cabeçalhos e também para cima. Então vamos usar Transform com a função Translate Z. Vou usar aqui oito RAM. E então, para ocultar os cabeçalhos, vamos usar a opacidade zero Além disso, para tornar o efeito mais bonito, vou aumentar o espaço entre as letras Vamos definir esse espaçamento para três rampas. Tudo bem, então os títulos estão ocultos, mas agora temos aqui um pequeno problema Essa barra de rolagem apareceu aqui embaixo. Então, para corrigir isso, vou usar overflow hidden e temos que atribuí-lo ao elemento de cabeçalho Então, como você pode ver, não temos mais aqui a barra de rolagem Agora é hora de criar as animações CSS. E para isso, vou usar quadros-chave CSS. Precisamos adicionar um sinal seguido pelos quadros-chave da palavra-chave. E então temos que definir o nome dos quadros-chave. Vamos chamá-lo de título animado. Então, teremos algumas etapas. Vamos dar uma olhada no projeto finalizado. Na primeira etapa, de 0% a 3%, os títulos ficarão ocultos Eles terão exatamente as mesmas propriedades que atribuímos a eles por padrão. Estou nessas três propriedades. Depois disso, de 3% a 25%, exibiremos o título de volta à posição padrão. Na posição padrão, estou na posição em que o título está visível. Então, vamos seguir em frente e definir o primeiro passo. Zero por cento. Precisamos aqui Transformar, Traduzir Z oito RAM do que a opacidade para zero. Espaçamento lateral do Egn, três aros. Em seguida, precisamos de três por cento. Então, com três por cento, precisamos Transformar Translate Z com zero. Então temos que tornar o elemento visível. Vamos definir a opacidade como uma e também diminuir o espaçamento lateral Faça com que seja 1,5 de aluguel. Depois disso, de 3% a 25%, o título ficará visível. E depois de 25 por cento para 28 por cento. Durante esses 3%, ele se esconderá novamente. Precisamos aqui de 25%. Vamos pegar esses três valores e colá-los aqui. Quanto aos 28%, precisamos fazer algumas mudanças Precisamos traduzir a função z com uma rampa, depois a opacidade zero e o espaçamento lateral três rampa E, finalmente, de 28% a 100 por cento, o título ficará oculto Portanto, a 100 por cento, precisamos do Transform Translate Z, um bonde, opacidade zero e três rampas de espaçamento entre letras Então, adicionaremos esse ciclo a todos os títulos, mas com tempos de atraso diferentes Portanto, eles serão exibidos em altura em ordem. Novamente, todos os cabeçalhos executarão o ciclo, quero dizer ocultar do que exibir E depois se escondendo novamente. Mas eles farão isso com tempos de atraso diferentes. Tudo bem, então é hora de executar essa animação. Precisamos selecionar todos os títulos separadamente e atribuir a eles propriedades de animação Vamos começar com o primeiro título. Vamos atribuir a ela uma animação, seguida pelo nome da animação, que é um título animado. Então, precisamos da duração de 12 s. Então, o tempo de atraso será de 3 s para o primeiro título. E também precisamos executar a animação infinitamente. Então, vamos adicionar aqui infinito. Ok? Vamos duplicar esse código três vezes e alterar os nomes das classes E também a quantidade de tempo de atraso. Precisamos do título 2.6 s. Então, para o terceiro título, precisamos de 9 s. Para a contratação de falhas, precisamos de 12 s. Então, como você pode ver, temos aqui um efeito de animação bem legal. Tudo bem, então isso é tudo sobre os elementos do título. Em seguida, vou criar animações para o parágrafo e a parte inferior, e também criarei um efeito agradável e legal de passar o mouse com o botão Então, assim que recarregarmos a página, exibirei o parágrafo e o botão com alguns defeitos falsos em ordem Então, novamente, temos que definir os quadros-chave CSS e executar essas regras CSS com propriedades de animação Vamos começar com um parágrafo. Em primeiro lugar, vou esconder o parágrafo por padrão. Vamos definir a opacidade como zero e a visibilidade oculta. Como você pode ver, o parágrafo está oculto e agora temos que criar os quadros-chave CSS Vamos chamá-la de animação fade. Na verdade, usaremos essa animação para os dois elementos. Estou no parágrafo e em Boston também. Então, no geral, teremos duas etapas diferentes. O 0,0 por cento inicial e o final 0,10%. A única coisa que precisamos fazer é tornar o elemento oculto a zero por cento e torná-lo visível a cem por cento. Portanto, precisamos de opacidade zero e visibilidade oculta em 0%. Quanto aos 100%, precisamos de opacidade e visibilidade visível Então, os quadros-chave estão prontos. Agora temos que executar esse código usando a propriedade de animação. Então, vamos atribuí-lo ao parágrafo com os valores da animação de atenuação de 1 s de duração e, em seguida, precisamos de um tempo de atraso de 1,5 s. Então, agora, como você pode ver, a animação funciona O parágrafo aparece com um efeito de desvanecimento. Mas temos aqui um problema. Quando a animação terminar, o parágrafo se eleva novamente. Ele obtém, novamente, seus estilos padrão. Quero dizer opacidade até zero e visibilidade oculta. Não precisamos disso. Precisamos do parágrafo para manter os estilos definidos na segunda etapa. Quero dizer, isso indica que 100%, para conseguir isso, temos que adicionar aqui outro valor, que é o valor da propriedade do modo de filme de animação, e ele é chamado de encaminhamento Então, agora, se eu recarregar a página , tudo funcionará perfeitamente Ok. Então isso é tudo sobre o parágrafo. Vamos fazer o mesmo com o botão também. Como dissemos, precisamos da mesma animação, então não precisamos definir os quadros-chave novamente. Só precisamos atribuir à propriedade Bateson e animação Mas antes disso, vamos esconder o botão. Precisamos de opacidade zero e visibilidade oculta. E depois use animação. Com os seguintes valores. Precisamos de uma animação de fade que a duração de 1 s seja o tempo de atraso. Vou usar 2 s. E depois precisamos avançar novamente Tudo bem, agora tudo funciona bem e temos aqui bons efeitos de animação Tudo bem, em seguida, vou criar um bom efeito de foco para o botão Vamos dar uma olhada no projeto finalizado. Quando passarmos o mouse sobre o botão , ele brilhará. Esse efeito brilhante será criado com um pseudo elemento, criará esses pequenos elementos brancos e passaremos o mouse Então, vamos prosseguir e selecionar o botão com um pseudo elemento anterior Antes de tudo, como conteúdo definido, deixe-o vazio. Em seguida, vou definir a largura e a altura, ambas em 200%. Quanto ao plano de fundo, vou usar a função de gradiente linear Portanto, a direção da transição das cores será da esquerda para a direita. E vou usar três cores diferentes. O primeiro será transparente. Então teremos a cor branca. E o terceiro será novamente transparente. Então, no momento, o elemento não está visível porque temos que definir a posição. Vamos definir a posição como absoluta. Então. Para posicioná-lo de acordo com seu elemento pai, que é o botão, temos que definir a posição do botão como relativa. Em seguida, use a posição superior, torne-a zero. Quanto à propriedade à esquerda, vou configurá-la como -100% Ok, então aqui temos os pseudo-elementos anteriores. Antes de fazermos funcionar, vou incliná-lo um pouco horizontalmente Então, vamos usar a transformação com a função skew x. E como valor, vamos configurá-lo para 30 graus. Tudo bem, então tudo está pronto para criar um efeito de foco. Vou mover o pseudo-elemento anterior para o lado direito ao passar o mouse Então, vamos selecionar o botão com o mouse, seguido pelo pseudo elemento anterior Em seguida, defina a propriedade esquerda para 100 por cento. Além disso, precisamos fazer a transição. Temos valores na extremidade esquerda, 0,5 s. Ok? Então, tudo funciona perfeitamente. A única coisa que precisamos fazer é ocultar esse elemento por padrão. Para isso, vamos usar overflow hidden. Tudo bem, então é isso. Com a primeira seção, terminamos. Agora, vou seguir em frente e criar o napa 23. Projeto 3 - Criar e personalizar o Navbar: Tudo bem, agora temos que começar a trabalhar na barra de navegação. Vamos dar uma olhada no projeto finalizado. Então, aqui temos o Napa com um logotipo e o ícone do Menu. Se eu clicar nele, a navegação aparecerá com alguns itens de navegação. Eles terão um pequeno efeito de flutuação. Vamos mudar a cor dos itens em Harvard. Além disso, o ícone do Menu se transformará nesta seta aqui. Se eu clicar nele, então para tirar uma soneca ou vou fechar. Agora Paul também terá a animação. Se recarregarmos a página, por padrão, ela ficará oculta e aparecerá na parte superior Tudo bem, vamos começar a criar a marcação HTML Vou colocar a barra de navegação fora do contêiner. Então, vamos inserir seus comentários, navbar e de Navarre Em seguida, abra elementos de navegação HTML5 com a classe nav bar. Portanto, o número consistirá em um logotipo e nos itens de navegação. Vamos criar um logotipo. Vou abrir a tag div. O logotipo será o código de texto e a criação. A única coisa que vou fazer é usar um estilo diferente para três letras. Então, vou envolvê-los usando elementos de extensão. Primeiro, vamos inserir uma tag de link. E então precisamos de código de texto e criar. Vou embrulhar a primeira letra com elementos de extensão. Em seguida, insira o ODE. Então, novamente, vou embrulhar a letra a e depois embrulhar a letra C com vão. Em seguida, vamos abrir uma tag div, que incluirá os itens de navegação Vamos atribuir à lista de navegação da classe. Em seguida, abra a tag do link com o link de navegação da classe e com o conteúdo Portanto, no geral, teremos cinco itens de navegação diferentes. Vamos duplicar os elementos do link quatro vezes e depois alterar o conteúdo A segunda será nessa época em que teremos preços. O próximo será um blog. Provavelmente é o último. Vamos inserir aqui o contato. Tudo bem, então isso é sobre o Napa. A outra coisa que vou fazer é criar um ícone de menu. Vamos inserir novos comentários para o menu. Em seguida, abra a tag div com o menu da classe. O ícone do menu consistirá em três linhas diferentes. Vou criá-los usando desenvolvimentos atribuídos à linha de cada classe, que será o nome comum da classe. E também precisamos aqui da linha um. Vamos duplicar essa linha de código duas vezes e alterar os nomes das classes Precisamos da linha dois, linha três. Tudo bem, então isso é tudo sobre a marcação HTML. Agora temos que começar a novela. Vamos prosseguir e inserir novos comentários no arquivo CSS. Navbar então. E do navbar. Em seguida, selecione elementos de navegação. Vou definir largura e altura. Vamos definir com 200%. Quanto à altura, vou criar oito RAM e também mudar a cor de fundo. Vamos usar aqui o valor RGBA com a cor preta e com a opacidade 0,9. Ok? Portanto, o número terá uma posição fixa. Ele será colocado na parte superior da página. Então, vamos definir a posição como fixa. E também vou definir a primeira posição como zero. Então, agora a barra de navegação está oculta porque acabou atrás do banner Para corrigir isso, vou usar a propriedade z-index que lhe é atribuída um valor maior que zero, digamos dez Em seguida, vamos criar algum espaço dentro da barra de navegação usando o preenchimento Vamos configurá-lo para três rem nos quatro lados. Ok, então agora é isso sobre a barra de navegação. Vamos seguir em frente e personalizar o logotipo. Em primeiro lugar, vou cuidar de sua posição. Vamos selecioná-lo e definir sua posição como absoluta. Em seguida, vou definir as propriedades superior e esquerda. Vou definir a posição superior para 1,5 RAM. Quanto à propriedade left, vamos configurá-la como quatro corridas. Ok, a seguir, vou estilizar o logotipo. Então, vamos selecionar os elementos do link e definir a família da fonte. Nesse caso, vou usar uma fonte chamada may seoul maze San-serif. Em seguida, aumente o tamanho da fonte, faça 2,5 RAM. Mude a cor. Eu vou usar você call ou E. E também, vamos criar algum espaço entre as letras. Use o espaçamento contábil com o valor 0,1 executado. Tudo bem, agora o logotipo parece muito melhor, mas como você pode ver, temos que personalizar essas três letras Então, vamos seguir em frente e selecionar o elemento de extensão. Vamos definir a família de fontes. Eu vou usar, novamente made soulmates Em seguida, aumente o tamanho da fonte. Vou fazer com 3,5 RAM. Além disso, vamos deixar o telefone mais ousado. Use o peso da fonte, desvalorizaria o negrito. Então eu vou mudar a cor. Vamos usar você chamar nove E 0, E 09. Tudo bem, então essa é a sílaba, o logotipo. Vamos seguir em frente e personalizar o ícone do Menu. Antes de fazermos isso, vou esconder os itens de navegação por um tempo Então, vamos selecionar romancista designado para não exibir nenhum Como você pode ver, os itens de navegação estão ocultos. Vamos seguir em frente e personalizar o ícone do Menu, que no momento não está visível porque temos aqui apenas elementos div vazios Então, vamos inserir novos comentários no menu. Em seguida, selecione os elementos div do wrapper com o menu da classe. Em primeiro lugar, vou definir a largura e a altura e também a cor de fundo. Então, vamos definir a largura e a altura, ambas como RAM. Quanto à cor de fundo, vou usar aqui, uma cor de fundo temporária. Vamos fazer com que seja gelado. No momento, o ícone do menu não está bem visível porque acabou atrás do napa Vou corrigir isso usando a propriedade z-index. Mas, como você sabe, para usar a propriedade z-index primeiro, precisamos definir a posição do elemento O ícone do Menu deve ter uma posição fixa. Então, vamos definir sua posição para corrigir. Em seguida, defina a propriedade do índice. Vou atribuir a ele um valor maior, digamos cem Tudo bem, então aqui temos o ícone do menu. Precisamos colocá-lo no canto superior direito da página. Então, vamos definir as propriedades superior e direita. E eu vou definir a posição para, para bater. Quanto à posição correta, vamos fazer quatro rampas. Tudo bem, então o ícone do Menu está posicionado. Agora eu vou cuidar das linhas. Primeiro. Vamos nos livrar desse pano de fundo temporário. Em seguida, selecione a linha. Vamos definir sua largura e altura. Vou definir a largura para 100%. Quanto à altura, vamos fazer com que aponte para a rampa. E também use a cor de fundo E. E. Agora as linhas estão visíveis, mas como você pode ver, temos que criar algum espaço entre elas e separá-las. Eu vou fazer isso usando o Flexbox. Então, vamos configurar a tela como flexível. Então, para colocar as linhas verticalmente em uma coluna, precisamos mudar a direção Vamos fazer uma coluna. Para criar algum espaço entre os itens de que precisamos, justifique o espaço do conteúdo uniformemente Além disso, quero mudar o tipo do grosseiro quando passarmos o mouse sobre o menu Então, vamos atribuir ao menu o ponteiro do cursor. Tudo bem, como você pode ver, as linhas estão separadas Em seguida, vou alterar os tamanhos da primeira e da terceira linhas pois elas são menores que a segunda linha. Então, vamos selecionar a linha um. Defina sua largura para 50 por cento. Então eu vou duplicar esse código, mudar a linha um pela linha três Além da largura, vou adicionar aqui, margem esquerda automática, que nos permitirá colocar a linha no lado direito Tudo bem, então isso é tudo sobre o ícone Menu. É personalizado e posicionado. E agora vou cuidar dos itens de navegação. Vamos dar uma olhada no projeto finalizado. Então, por padrão, os itens de navegação estão ocultos. Depois de clicarmos no ícone do menu, o número se expandirá para a página inteira e os itens de navegação aparecerão com um efeito de desvanecimento Em primeiro lugar, vou personalizar os itens de navegação. Faremos com que pareçam assim. E então vamos programar o ícone do Menu. Então, primeiro, vamos expandir um aeroporto para a página inteira. No momento, ele tem uma altura definida para oito RAM e eu vou alterá-lo e criar uma altura de cem janelas de visualização Tudo bem, agora é hora de personalizar os itens de navegação. Agora eles estão ocultos Então, vamos nos livrar do display none. A primeira coisa que vou fazer é posicionar os itens. Vou colocá-los no centro. Então, vamos definir a posição como absoluta. Em seguida, vou definir a propriedade principal. Vamos fazer com que seja 25 por cento. A posição esquerda será de 50 por cento. E então, para centralizar os itens, como você sabe, temos que usar Transform com a função translate x. E temos que mover os elementos em -50%. Tudo bem, então a lista está posicionada. Agora vou alinhar os itens de navegação verticalmente em uma coluna Vamos usar o display flex. Em seguida, vou colocar os itens verticalmente em uma coluna. Vamos mudar a direção, fazer com que seja uma coluna. Além disso, precisamos alinhar os itens no centro usando alinhar o centro dos itens Tudo bem, então isso é tudo sobre a lista. Agora, vou personalizar os itens de navegação. Vamos selecionar elementos de link. Antes de tudo, vamos mudar a família da fonte. Vou usar aqui a fonte feita. Então, milho, san-serif. Em seguida, aumente o tamanho da fonte, torne-o para a RAM. Além disso, crie algum espaço entre as letras usando o espaçamento entre letras de 0,3 RAM e, para alterar a cor, torne-a branca Agora, como você pode ver, os itens de navegação parecem muito melhores. Em seguida, vou criar algum espaço entre eles. Vamos usar a margem e configurá-la para dois rem na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, é isso. Os itens de navegação estão estilizados e agora vou criar um efeito de foco. Quero mudar a cor dos itens ao passar o mouse. Então, vamos selecionar o link de navegação com o mouse e mudar a cor. Você vê sua cor 99. E também precisamos usar a transição para um efeito suave. Vamos atribuir à cor e à duração 0,4 s. Ok? Portanto, o efeito de foco funciona bem. E agora temos que fazer o napa funcionar 24. Projeto 3 - Fazer trabalho do Navbar: Tudo bem, uma vez que personalizamos o Now Pourer, agora temos que fazê-lo funcionar Em primeiro lugar, vou esconder a barra de navegação por padrão, quero dizer, para diminuir sua altura Depois de clicarmos no ícone do menu, ele deverá se expandir. Além disso, precisamos transformar essas linhas em uma seta. Antes de tudo, vamos ocultar os itens de navegação. Vou usar opacidade zero e visibilidade oculta. Em seguida, vou diminuir a altura do nanoporo e dar a ele a forma padrão Vamos definir a altura para um grama. Ok, agora é hora de programar o ícone do Menu para isso, vou usar JavaScript. Depois de clicarmos no ícone, a barra de navegação deve se expandir para a página inteira e os itens de navegação devem ser exibidos Então, vamos ao arquivo JavaScript e primeiro selecionamos o ícone do menu. Vou inserir novos comentários. Agora, longe da barra, e depois crie uma nova variável, vou chamá-la de menu. Vamos selecionar o ícone do menu usando o método querySelector. Temos que especificar aqui o menu do nome da classe. Além disso, vou selecioná-la agora também. Então, vamos criar outra variável, chamá-la agora de bar e selecionar o número usando novamente o método querySelector Vamos inserir sua classe agora. Ok, agora é hora de anexar um ouvinte de eventos ao ícone do Menu Vamos especificar aqui o evento de clique e também passar uma função de seta, que será executada quando clicarmos no ícone. Então, deixe-me explicar o que vamos fazer. Adicionaremos uma nova classe chamada change à barra de navegação. Usando essa classe, criaremos novos estilos e CSS, que serão aplicados à barra de navegação ao Em seguida, no próximo clique, a alteração de classe será removida e, portanto, os novos estilos também serão removidos. Gerenciaremos isso usando um método de alternância. Em geral, o método toggle adiciona uma nova classe ao elemento se ele não a tiver e remove a classe se o elemento a tiver Então, para adicionar uma nova classe ao elemento, vou usar uma das propriedades chamada lista de classes. Ele nos dá todas as classes que o elemento tem. E também nos permite acessar diferentes métodos, como adicionar, remover e alternar Então, vamos anexar a lista de classes ao número e depois usar o método toggle. Vamos especificar aqui a alteração do nome da classe. Tudo bem, então isso é tudo sobre JavaScript. Vamos continuar e escrever CSS. Portanto, precisamos expandir o napa onclick. Portanto, precisamos aqui agora com a mudança de classe. E então temos que especificar a altura. Vamos fazer com que tenha 100 de altura de janela de visualização. Além disso, vou usar a transição. Vamos tentar ocultar a duração de 0,5 s. Ok, agora, se eu clicar no ícone do menu, a barra de navegação se expandirá e fechará no próximo clique Tudo bem, então, em seguida, vou exibir os itens de navegação Vamos usar essa técnica. Precisamos de mudanças. Não menos importante. Nesse caso, precisamos de espaço aqui porque não menos importante é o filho da barra de navegação Então, vamos definir a opacidade como uma e, em seguida, precisamos de visibilidade visível Além disso, vou usar a transição com os valores 0,7. S é a duração. Além disso, vou usar um pouco de tempo de atraso. Então, vamos inserir aqui 0,5 s. Então, se eu clicar no ícone, os itens de navegação exibirão isso na próxima semana, eles se ocultarão. Mas neste caso, sem nenhum efeito de desvanecimento. Para corrigir isso, precisamos de uma nova transição, mas neste caso, pelo menos apenas para o núcleo Então, vamos especificar aqui toda a duração de 0,2 s. Tudo bem, então agora tudo funciona bem E em seguida, temos que cuidar do ícone do menu. Como lembre-se, temos que transformá-lo na seta para desclicar A primeira linha deve descer para o lado direito e depois girar. Não precisamos tocar na segunda linha. Quanto à terceira linha, precisamos girá-la. Vamos começar com a primeira linha. No começo, vou criar a seta e depois faremos o ícone funcionar. Vamos usar Transform com a função translate. Então, para mover os elementos para o lado direito, vou passar o ano 100% como o valor da direção X. Quanto à direção y, vamos configurá-la para um aluguel Então, a linha desceu para o lado direito, agora as duas linhas, eu estou na primeira e na terceira linhas são colocadas uma em cima da outra. E agora vou girar a primeira linha em -35 graus Portanto, precisamos girar a função como o valor. Vamos fazer uma pausa aqui -35 graus. Como você pode ver, a linha está girada, mas não está posicionada corretamente. A linha é girada a partir do centro porque, como você sabe, a origem da transformação é definida como centro por padrão Nesse caso, vou mudar e fazer, certo? Então, finalmente, a primeira linha é reproduzida corretamente. Vamos seguir em frente e cuidar da terceira linha. Precisamos movê-lo para cima e girar. Então, precisamos nos transformar. Em seguida, traduza a função com a direção y. Vamos inserir aqui menos uma RAM. E também precisamos girar a função com o valor 45 graus. Como na primeira linha, precisamos mudar a origem da transformação. Vamos configurá-lo para, certo? Então agora temos aqui a flecha perfeita. Tudo bem, agora é hora de fazer o menu, eu posso funcionar. Precisamos que todas essas coisas aconteçam. Depois de clicarmos no ícone, vou usar novamente a mudança de classe. Temos que adicioná-lo ao ícone do Menu usando o método de alternância. Então, vamos ao arquivo JavaScript e ao menu de densidade U, lista de classes de pontos, alternância de pontos E a mudança do nome da turma. Depois disso, temos que selecionar a primeira e a terceira linhas usando a mudança de classe. Vamos pegar essas duas linhas e inseri-las aqui. Em seguida, selecione a terceira linha e faça o mesmo. Como você pode ver, quando clicamos no ícone, as linhas se transformam em uma seta. A única coisa que precisamos fazer é tornar esse efeito mais suave E para isso, vamos usar a transição com transformação e a duração de 0,3 s. Ok, então tudo funciona bem. Temos aqui um efeito agradável e legal. Antes de passarmos para a próxima parte do nosso projeto, vou fazer mais uma coisa. Vou mover toda a barra de unhas para cima e escondê-la. Depois de recarregarmos a página, quero que ela apareça suavemente na parte superior da página, como se estivesse no projeto finalizado Então, primeiro de tudo, vou esconder a parte nula. Quer dizer, eu vou movê-lo para cima. Vamos definir a posição superior para menos oito RAM. Em seguida, precisamos criar quadros-chave CSS. Vou chamá-la de barra de navegação animada. Portanto, no geral, teremos duas etapas diferentes. Vamos descer então Albert de 0% para 100%. Então, com zero por cento, precisamos usar a posição padrão. Vamos definir dois menos oito RAM. Quanto aos 100%, precisamos de um topo com zero. Ok, então os quadros-chave estão prontos. Vamos usar a propriedade de animação. Temos que especificar aqui o nome da barra de navegação animada dos quadros-chave do que a duração da animação em 1 s. E também vou usar um pouco Vamos fazer 0,5 s. Se eu recarregar a página, a barra de navegação se moverá suavemente para baixo. Mas, eventualmente, ele se esconderá novamente. Temos que manter a posição que especificamos em 100%. Para fazer isso, precisamos usar um dos valores da propriedade do modo de filme de animação chamada forwards. Agora, como você pode ver, tudo funciona perfeitamente e terminamos de trabalhar no napa Vamos passar para a antiguidade aqui da próxima parte do nosso projeto 25. Projeto 3 - Crie e estilo sobre nós Seção: Tudo bem, então terminamos de trabalhar na barra de navegação e agora é hora de seguir em frente e cuidar da segunda seção do nosso projeto, que será a seção Sobre nós Vamos dar uma olhada nos projetos finalizados e relembrar a aparência dessa seção. Então, como você pode ver, temos aqui três partes diferentes. No lado esquerdo dessa ação. Lá é colocado o título com uma linha. Então temos aqui o vídeo com o figurino, controle de pausa E abaixo temos um parágrafo com um texto fictício. Novamente, vamos começar a criar a marcação HTML Também vou inserir uma nova seção de comentários. E fora da seção para , em seguida, abrir a tag da seção com uma classe, seção dois. Então, como dissemos, esta seção consistirá em algumas partes diferentes. O primeiro será o título. Então, vamos abrir o elemento de cabeçalho H1 com o título da seção de classe E com o conteúdo sobre nós. Em seguida, teremos a linha que será colocada no lado esquerdo do cabeçalho. Vamos abrir a tag div com uma linha de título de seção de classe. Ok, depois disso, vamos instituir o vídeo. Vou abrir uma tag div, que será o invólucro do vídeo Vamos atribuir ao wrapper de vídeo da classe. Em seguida, vamos inserir a tag HTML de cinco vídeos com um vídeo de aula. Em seguida, temos que especificar a parte do vídeo. Ele é colocado na pasta Imagens. Vamos selecionar o vídeo Sobre nós. Então, em geral, você pode criar os controles a partir do HTML usando o atributo chamado controles. Mas, nesse caso, vou criar os controles personalizados, que depois serão programados com JavaScript. Então eu acho que vai ser mais interessante. Vamos abrir uma tag div, que será o invólucro dos controles Ele incluirá a barra de duração do vídeo e o botão Reproduzir. Então, vamos abrir outra tag div. Vai ser a embalagem do bar. Vamos atribuir a ele um vídeo de aula sobre o invólucro. E então institua um novo elemento div, que será o próprio bar. Tudo bem, então, em seguida, precisamos criar os botões. Estou nos botões de pausa do jogo. Eles serão criados usando os ícones Font Awesome. Primeiro, vamos abrir uma tag div, que será o invólucro Vamos atribuir aos botões da classe. Em seguida, insira aqui uma tag de botão na qual vou passar o ícone Font Awesome. Por padrão, vou inserir aqui apenas o botão Reproduzir. , usaremos o Mais tarde, usaremos o JavaScript para o botão de pausa Então, vamos atribuir à Irlanda a aula do círculo de jogos da FAR FAA. Tudo bem, vamos ver o vídeo. A única coisa que precisamos fazer é criar o parágrafo. Portanto, está aberta a tag P com dois parágrafos da seção de classe. Dentro do parágrafo, teremos o texto e também os ícones Font Awesome para as citações. Vamos abrir a tag I com uma classe é FAS, uma citação deixada. Então vou instituir um texto fictício. E por fim, vamos passar aqui o segundo ícone do Font Awesome. Precisamos de aulas, FIS, uma cotação, certo? Tudo bem, então a marcação foi criada agora. Parece muito confuso, então precisamos cuidar disso. A primeira coisa que vou fazer é diminuir o tamanho do vídeo porque, no momento, ele é muito grande. Vamos inserir novos comentários no arquivo CSS para a seção dois. Em seguida, selecione o invólucro do vídeo e defina a largura e a altura Vou montar com 200 rampas. Quanto à altura, vamos fazer uma rampa de 50. Em seguida, selecione o vídeo em si e defina sua largura e altura como 100%. Além disso, vou usar uma cobertura para pés de objetos. Como você pode ver agora, o tamanho do vídeo é menor e podemos começar a personalizar esta seção. Então, vamos prosseguir e selecionar o elemento da seção. Em primeiro lugar, vou definir a largura e a altura desta seção. Vamos definir com 200 por cento. Quanto à altura, vou fazer com que seja 100% da janela de visualização Além disso, vamos definir a cor de fundo. Eu vou fazer com que seja cinza escuro. Vamos usar cores para 2020. Ok, a seguir, vou alinhar os elementos usando o Flexbox Vamos configurar a tela como flexível. Ele alinhará os elementos horizontalmente. Em seguida, vou colocá-los no centro verticalmente. Então, use alinhar itens no centro e também cria algum espaço nos lados esquerdo e direito usando o preenchimento Vamos configurá-lo para zero e para a rampa de bronzeamento. Tudo bem, é isso. Em relação ao elemento da seção, vamos seguir em frente e personalizar os elementos do título. Vamos selecionar o título da seção. Em primeiro lugar, vou definir a família de fontes. Vamos fazer com que seja ousado sem serifa. Isso aumenta o tamanho da fonte. Faça-o girar. E também altere o peso da fonte, torne-a mais leve. Vamos configurá-lo para 300 e mudar de cor, D. D. Então, como você pode ver, o título está estilizado, mas não parece muito bom agora porque não há espaço suficiente Eu vou cuidar do alinhamento do vídeo e do parágrafo Vou definir a posição como absoluta para o invólucro de vídeo Então, precisamos da posição relativa para esse elemento de seção porque é o elemento pai. E temos que posicionar o invólucro do vídeo acordo com a seção E depois disso, defina as propriedades superior e direita. Vou definir a propriedade principal para a fibrina. Quanto à posição correta, vamos fazer uma rampa 15 Ok. Então, o vídeo está posicionado. Agora vou cuidar do parágrafo. Vamos seguir em frente e selecionar esse elemento. Vamos definir a largura de 200 trilhos. Em seguida, vou definir a posição como absoluta. Em seguida, definiu as propriedades inferior e direita. Vou definir a posição inferior para oito, corri para a posição correta, vamos fazer a rampa 15 Portanto, o parágrafo também é posição. E agora o título parece bom. Vamos seguir em frente e personalizar a linha que será colocada no lado direito do título. Então, vamos selecionar a linha do título da seção. Vou definir sua largura e altura, definidas com 215 RAM Quanto à altura, vou fazer questão de subir a rampa. E também mude a cor de fundo, torne-a di, di, di. Ok, então aqui temos a linha, como você pode ver, temos que criar algum espaço entre o título e a linha. Então, vamos usar margin-right. Vou atribuí-lo ao elemento de cabeçalho. Vamos configurá-lo para alugar. Tudo bem, agora temos um resultado melhor. Em seguida, vou adicionar um efeito de sombra ao invólucro do vídeo Vamos usar box-shadow com os valores três, executar três vezes E então o valor RGBA com uma cor preta e com a opacidade Além disso, vamos diminuir a opacidade do vídeo. Vamos fazer com que seja 0,3. Tudo bem, então isso é tudo sobre o vídeo por enquanto. É hora de seguir em frente e personalizar os controles de vídeo. Em primeiro lugar, vou cuidar da posição deles. Vamos selecionar os elementos div do wrapper. No início , define o que o torna 100%. Em seguida, defina a posição como absoluta e, em seguida, a propriedade inferior definida, torne-a zero. Além disso, vou mudar a cor de fundo. Vamos usar novamente o valor RGBA com uma cor preta e com a opacidade Ok, então o invólucro dos controles é personalizado. Em seguida, vamos cuidar do botão. Depois disso, personalizaremos a barra de duração do vídeo. Vamos selecionar o desenvolvimento rápido e criar algum espaço dentro dele. Vou criar espaço usando preenchimento. Vamos configurá-lo para dois rem na parte superior e depois uma RAM. Três vezes. Depois disso, vou interromper o padrão em si. Vou me livrar do padrão, do plano de fundo e da borda. Vamos definir os dois como nenhum. E também mude o tipo do mais grosso, torne-o mais ponteiro. Logo depois disso, vamos personalizar o ícone em si. Vou aumentar o tamanho da fonte. Vamos fazer com 2,8 RAM e depois mudar a cor. Faça com que seja branco. Ok, então o botão é personalizado, parece bom. E agora eu vou cuidar da barra de vídeo. Vamos selecionar o vídeo sobre o wrapper, que será uma espécie de plano de fundo da barra de vídeo Então, vou definir sua largura. Vamos fazer com que seja 100 por cento. Em seguida, defina a altura dois 0,7 e depois altere a cor de fundo, deixando preto. Depois disso, vou cuidar de sua posição. Vamos definir a posição como absoluta. E então encontramos as propriedades superior e esquerda. Vou definir os dois como zero. Tudo bem, isso é tudo sobre o plano de fundo. Agora, vou estilizar o bar em si. Vamos definir sua altura para 100%. Portanto, por padrão, a largura da barra de vídeo será zero e, em seguida, faremos com que funcione usando JavaScript. Mas agora vou dar um pouco de largura, digamos 20 por cento. E também altere a cor de fundo. Faça com que seja D3, 0819. Tudo bem, então a barra de vídeo é personalizada. Antes de fazermos isso funcionar, vou começar no primeiro parágrafo abaixo. Então, vamos definir o tamanho da fonte para RAM e também alterar a cor. Use sua cor D, D, D. Em seguida, vou criar as bordas na parte superior e inferior. Então, vamos usar a borda superior, configurá-la para 0,3, o dobro e a cor AAA Então eu vou duplicar essa linha de código. Vamos mudar de cima para baixo. Depois disso, vou criar espaço dentro do parágrafo usando preenchimento Vamos configurá-lo para duas RAM nos quatro lados. Tudo bem, depois disso, vou alinhar as aspas e o texto usando o Flexbox Quero colocá-los verticalmente no centro. Então, vamos configurar a tela como flexível. Então eu vou usar a direção flexível. Vamos fazer uma coluna. Para centralizar os elementos vertical e horizontalmente, precisamos usar o centro de conteúdo justificado e alinhar o centro dos itens. Então, como você pode ver, os elementos estão alinhados. Em seguida, vou justificar o texto do parágrafo. Então, vamos usar textos alinhados com o valor justify. Além disso, vamos criar um pequeno efeito de sombra usando sombra de texto com valores executados duas vezes em vez de executar. E o valor RGBA com a cor preta e com a opacidade Tudo bem, agora é hora de cuidar dos códigos. Vou colocar o primeiro no lado esquerdo. Quanto ao segundo será colocado no lado direito. Então, vamos selecionar a citação à esquerda. Para colocá-lo no lado esquerdo, temos que usar align self com um valor flex start Além disso, vou adicionar aqui o tamanho da fonte cinco rem e também criar algum espaço na parte inferior. Vamos definir a margem inferior como, para executar. Tudo bem, vamos continuar e cuidar do segundo elemento Quero dizer, escrever código. Nesse caso, precisamos alinhar o self para ser flexível e, em seguida, aumentar o tamanho da fonte, torná-la em cinco linhas Portanto, as citações são personalizadas e o parágrafo geral parece bom. Por fim, vou diminuir um pouco a altura da linha. Então, vamos configurá-lo para 1,5. Tudo bem, o mesmo acontecerá com o parágrafo que terminamos. É personalizado. E agora eu vou cuidar do vídeo. Quero dizer, vou fazer com que funcione usando JavaScript. 26. Projeto 3 - Faça o trabalho de controles de vídeo personalizados: Tudo bem, então personalizamos a seção Sobre nós e agora vou fazer o vídeo funcionar Esta parte será criada com a ajuda do JavaScript. Antes disso, vou fazer algumas coisas em CSS. Quero mover os controles um pouco para baixo e também vou ocultá-los parcialmente. Depois de passar o mouse sobre o vídeo, os controles aparecerão Para mover os controles, vou usar a função Transformar com Traduzir. Nesse caso, precisamos da direção y. Então, como eu disse, vou esconder parcialmente os controles. Portanto, não precisamos mover o elemento em 100%. Para conseguir isso, vou usar a função calc Vou subtrair o ponto da RAM para 100%. Portanto, nesse caso, uma pequena parte será visível dos controles. Então, vamos considerar que os controles estão abaixados e, para ocultá-los, vou usar overflow hidden Tudo bem, então os controles estão ocultos. Em seguida, vou exibi-los assim que passarmos o mouse sobre o vídeo Então, vamos selecionar o invólucro de vídeo com o mouse, seguido pelos controles E eu vou definir a transformação traduzida por y para zero. Além disso, vamos usar a transição. Precisamos transformar 0,4 s. Ok? Portanto, o efeito de foco funciona bem. Em seguida, vou fazer os controles funcionarem. Vamos para o arquivo JavaScript. Antes de tudo, vamos vincular sua nova seção de comentários ao vídeo. Em seguida, final do vídeo da seção dois. Em seguida, vou criar algumas variáveis diferentes para selecionar vários elementos. O primeiro será o vídeo. Então, vamos criar uma nova variável e selecionar o vídeo usando o método seletor de consulta O próximo será o botão. Então, vamos criar uma nova variável, btn, e selecionar Hi Elements Vamos selecioná-lo usando o método querySelector. E também vou selecionar uma barra de vídeo. Nós cuidaremos disso um pouco mais tarde. Mas de qualquer forma, vamos selecioná-lo também. Vamos criar uma nova variável, vou chamá-la de bar, e depois selecionar elementos usando novamente o método seletor de consulta Tudo bem, então todos os elementos necessários são selecionados. Em seguida, vou criar uma função na qual programaremos se devemos reproduzir o vídeo ou pausar E executaremos essa função assim que clicarmos nos botões. Então, vamos criar uma nova função. Eu vou chamar isso de pose de jogo. Então, quando clicamos no botão Reproduzir, temos que mudá-lo para o botão de pausa E também precisamos reproduzir o vídeo. Para reproduzir o vídeo, podemos usar um dos métodos integrados chamado Play. Então, precisamos do video dot play. Agora, para ver os resultados, temos que chamar essa função, mas precisamos chamá-la assim que clicarmos no ícone. Então, vou anexar um ouvinte de eventos ao botão com um evento de clique Além disso, precisamos passar aqui a função de seta, que será executada assim que clicarmos no botão. Então, agora temos que chamar a função playbooks. Então, se clicarmos no botão , o vídeo será reproduzido. No momento, o botão não está mudando. Então, vamos em frente e cuidar disso. Como você sabe, o botão é representado por um ícone Font Awesome. Então, uma vez que clicamos nele, temos que mudar o nome da classe para que ele se transforme no botão de pausa Vou mudar o nome da classe do botão usando uma das propriedades chamada nome da classe. Precisamos do nome da classe btn dot. E temos que passar aqui as aulas FAR, FAA, Pose, Circle Agora, se eu clicar no botão, ele mudará para o botão de pausa e o vídeo será reproduzido Mas então, no próximo clique, nada acontecerá. Então, quando clicamos no botão Pausar, temos que pausar o vídeo E também temos que colocar o botão de volta na placa. Portanto, precisamos usar uma instrução if else na qual temos que definir se o vídeo está pausado ou não, então temos que definir os nomes das classes dos ícones adequadamente para verificar se o vídeo está pausado ou não Vou usar uma das propriedades chamada post Portanto, precisamos da postagem de pontos de vídeo como condição. Então, se for verdade, significa que o vídeo não está sendo reproduzido e o ícone de reprodução é exibido. Então, precisamos reproduzir o vídeo e mudar o ícone para o botão de pausa Temos que instituir essas linhas. Se essa condição for falsa, significa que o vídeo está sendo reproduzido. Então, temos que posar e mudar o ícone para a peça. Mas vamos criar uma declaração else Em seguida, copie essas duas linhas e cole-as na instrução else. Então, em vez do jogo metodológico, precisamos posar. E também temos que mudar o nome da classe em vez dos posts, precisamos de argila. Agora, se eu clicar no botão Reproduzir , o vídeo começará a ser reproduzido e o botão mudará. E então, no próximo clique, o vídeo será pausado e o ícone voltará para o botão Reproduzir Então, tudo funciona bem até agora. Em seguida, vou mudar a opacidade do vídeo dependendo se ele está sendo reproduzido ou Se for post, manteremos a opacidade como está. Mas se estiver jogando, então vamos aumentá-lo. No momento, a opacidade está definida para 0,3. Portanto, temos que aumentá-lo nas declarações if porque aqui estamos dizendo que temos que reproduzir o vídeo, com opacidade de ponto no estilo de ponto de vídeo igual a, digamos, 0,7 E então precisamos fazer com que a opacidade seja 0,3 na declaração else porque vamos pausar o vídeo Então, vou pegar essa linha de código. Vamos colar aqui e alterar a opacidade. Precisamos de 0,3. Então, como você pode ver, estava tudo bem. A única coisa que precisamos fazer é tornar o efeito mais suave usando a transição Vamos usar a transição com opacidade de 0,3 s. Tudo bem, agora temos um resultado muito Agora, é hora de cuidar da barra de vídeo. No momento, ele tem uma largura fixa. Então, primeiro, vamos defini-lo como zero. Portanto, temos que aumentar a largura da barra de vídeo acordo com a atualização da duração do vídeo. Vou usar um dos eventos DOM chamado atualização de horário. Esse evento ocorre quando o vídeo ou o áudio estão sendo reproduzidos. Então, vamos nos conectar ao ouvinte do vídeo e do evento com uma atualização de horário Eventos. Também passe aqui, a função de seta. Em cada atualização da hora do vídeo. Essa função será executada. Tudo bem, agora temos que definir a largura da barra de vídeo Para isso, vou usar duas propriedades diferentes. Eles são atuais, de hora e de duração. No começo, vou mostrá-los no console. Vamos examinar o console. Pontos do vídeo, hora atual e duração dos pontos do vídeo Vamos inspecionar a página e mudar para a guia do console. Então, quando eu clicar no botão Reproduzir, obteremos a quantidade atual de tempo reproduzido e também a duração do vídeo. Para definir a largura da barra de vídeo, temos que dividir a hora atual do vídeo pela duração. E temos que expressar esse valor em valor percentual. Então, vamos criar uma nova variável, vou chamá-la de bar. A largura será igual às dúvidas do vídeo, tempo atual dividido pela duração dos pontos do vídeo. Agora, temos que multiplicar esse valor 200 e expressá-lo em porcentagem O resultado desse cálculo será a largura da barra. Então, vamos inserir sua largura de ponto no estilo barra igual à largura da barra multiplicada por 100, seguida pelo sinal de porcentagem Ok, agora, se reproduzirmos o vídeo , a barra de vídeo começará a carregar. Então, tudo funciona bem no momento , o efeito de carregamento não parece muito suave. Precisamos usar a transição. Então, vamos instituir aqui a largura do que a duração 0,2 s. E também vou fazer a transição linear. Ok? Então, agora temos melhores resultados. Na verdade, estamos quase terminando esta seção. Só precisamos adicionar algumas coisas ao vídeo. Uma vez jogado. Quero dizer, quando terminar, quero mudar o ícone de volta para o botão play. Além disso, vou diminuir a opacidade para descobrir se o vídeo foi encerrado ou não, vou usar uma das propriedades chamada célula finalizada Vamos criar uma declaração if na qual precisamos verificar se o vídeo terminou ou não. Então, como condição que precisamos aqui, o vídeo está no Android. Então, se essa condição for verdadeira, temos que mudar o ícone. Precisamos do nome da classe btn dot. Vai ser, de longe, um círculo de jogo. E também temos que diminuir a opacidade. Precisamos de opacidade de pontos no estilo de ponto de vídeo, 0,3. Então, se eu reproduzir o vídeo e esperar até que ele esteja, você verá que o ícone foi alterado e também a opacidade diminuiu. Tudo bem, então, finalmente, terminamos de trabalhar na segunda seção Vamos passar para o próximo. 27. Projeto 3 - Criar e personalizar a seção de cartões de preços: Ok, então terminamos de trabalhar na segunda seção, que era uma seção Sobre nós. E agora temos que seguir em frente e começar a construir o próximo. A próxima seção será a seção de preços. Vamos relembrar a aparência dessa seção. Portanto, temos aqui um título e, para diferentes cartões de preços com diferentes ofertas de preços , podemos arrastá-los com um mouse para criar esse efeito usando um dos plug-ins de JavaScript chamado swipe ou Antes de tudo, eu queria criar e personalizar os cartões. E então usaremos o plugin e os faremos funcionar. Vamos começar a criar a marcação HTML. Vou inserir novos comentários, seção três. E a seção três. Em seguida, abra o elemento da seção com a seção três da classe. Então, como dissemos, esta seção consistirá no título e no preço dos carros. O título com sua linha será semelhante ao título que criamos na seção anterior. E também será semelhante ao título das próximas seções. Então, vou abrir a tag de cabeçalho H1 e vamos atribuir a ela um nome de classe semelhante, título de seção Quanto ao conteúdo, vou ultrapassar seu preço do que abrir uma tag div com a linha de título da seção da aula Então, como você pode ver, todo o título já tem alguns estilos. Tudo bem, vamos seguir em frente e criar os cartões. Vamos abrir uma tag div, que será o invólucro dos cartões Vou atribuí-lo à embalagem do cartão de preços da classe. Então, precisamos de outra tag div para a chamada em si. Portanto, cada carro consistirá em uma frente e uma traseira. Vamos abrir a tag div, que será a parte frontal atribuída à parte frontal do cartão de preços do cluster A parte frontal consistirá em alguns elementos diferentes. Terá dois títulos para o nome do autor e o preço Em seguida, eles serão seguidos pela lista na qual você terá alguns itens de oferta com os ícones Font, Awesome. E por último, teremos um botão. Quanto ao verso, teremos apenas um único elemento de link. Tudo bem, vamos em frente e insira aqui todos esses elementos Vou começar com os cabeçalhos. Vamos abrir o título H1, a tag, o título do cartão de preços da classe Esse será o nome comum da classe, mas, além disso, vou adicionar outra classe para algumas pessoas que estão colocando ladrilhos A primeira coluna será sobre uma oferta gratuita. Então, é atribuída a ele uma classe livre. Ok, a seguir, precisamos de outro elemento de cabeçalho para o preço que está aberto. Etiqueta de cabeçalho H3 com a tabela de preços da classe, preço. E o preço, vou inserir zero para você. Essa é a sílaba dos cabeçalhos. Vamos seguir em frente e criar a lista. Vou abrir a etiqueta UL com a lista de cartões de preços da classe. E também vou usar outra classe para o estilo individual Vamos inserir o menos grátis. Em seguida, abra a tag LI. Estou no item da lista. Portanto, cada item da lista consistirá em um ícone Font Awesome e alguns textos. Vamos abrir a tag I com uma classe em FAS, FA, confira. Vai ser a marca de verificação. Em seguida, abra a etiqueta de extensão. Na verdade, não vou especificar aqui itens diferentes. Vamos apenas inserir o item do cartão de preços. Você pode se sentir à vontade e usar itens diferentes, mas não vou perder tempo com isso. Então, no primeiro cartão, teremos cinco itens da lista. Vamos duplicar o elemento LI quatro vezes. A única coisa que vou fazer é mudar os ícones do Font Awesome nos últimos três itens, os dois primeiros ícones serão marcas de seleção Quanto aos últimos três ícones, eles serão acessados. Portanto, precisamos de FIS de algumas vezes. Tudo bem, então o último elemento na parte frontal será um botão atribuído ao cartão de preços do cluster, btn E também precisamos aqui de outra classe para estilos individuais, sem BTN. E como conteúdo que vou inserir aqui, escolha o plano. Ok, então isso é tudo sobre a parte frontal. Vamos seguir em frente e tirar você da parte de trás. Vamos abrir a tag div com o verso do cartão de preços da classe. E também precisamos aqui de outra aula gratuita. Vamos inserir seus elementos de link com a ordem do conteúdo agora. Ok? Então, aqui temos o primeiro cartão. No geral, teremos quatro cartas, então vou duplicar o código três vezes. Em seguida, precisamos fazer algumas mudanças Então, a segunda carta será básica. Em seguida, vou mudar a classe do título para ser o título mais básico do que precisamos aqui. Preço diferente, digamos $299. Também altere a classe dos elementos da lista que precisamos aqui, pelo menos básicos. Quanto aos ícones Font Awesome. Nesse caso, os primeiros quatro itens serão marcas de verificação Quanto ao último, deve ser x. Além disso, vamos mudar a classe do botão. Precisamos aqui, btn basic. E então precisamos de você de volta, o básico. Tudo bem, vamos ver o segundo cartão. Vamos passar para a terceira carta que será padrão. Também altere a classe do título. Precisamos de um título padrão. O preço será de $699. Em seguida, altere a classe dos elementos UL. Precisamos de pelo menos um padrão. Portanto, nesse caso, teremos todos os itens com um ícone de marca de seleção Em seguida, vou mudar as classes do botão e da parte traseira. Precisamos de padrões em ambos os casos. Ok, vamos passar para o último acorde. Vai ser premium. Mude a classe do título. Precisamos que o título premium também tenha alterado o preço. Precisamos aqui de $999. Então precisamos aqui pelo menos premium. Portanto, no caso da oferta premium, teremos seis itens. Então, vamos duplicar os desejos do elemento LI. Marque todos os ícones. Em seguida, vamos mudar as classes do Bateson e do Precisamos de um prêmio. Tudo bem, então é isso em relação à marcação HTML, todos os elementos foram criados e agora estamos prontos para começar a estilizar Vamos inserir novos comentários no arquivo CSS da Seção três. Em seguida, selecione os elementos de uma seção. Primeiro de tudo, defina dentro da altura e eu vou definir a largura como 100%. Quanto à altura, será cem por cento da janela de visualização E também altere a cor de fundo. Então, vou usar a cor 0, 3o7oe. Ok, em seguida, vou alinhar os elementos horizontalmente em uma linha Vamos configurar a tela como flexível. E também coloque os elementos no centro verticalmente. Para isso, precisamos alinhar o centro dos itens. E, por fim, vou criar algum espaço no lado esquerdo dentro desta seção, vamos usar o preenchimento à esquerda com o valor Tan Ok, então, como já dissemos, não precisamos tocar no título e na linha. São todas essas guias. A única coisa que vou fazer é pegar o código CSS dos dois elementos e colocá-lo nos estilos comuns. Ok, em seguida, vou selecionar a embalagem do tribunal. Vou colocar as cartas lado a lado horizontalmente. Primeiro, vamos definir a largura do invólucro. Eu vou fazer isso 100%. Em seguida, defina a exibição para flexionar e também crie espaço entre os cartões usando o justify content space Tudo bem, como você pode ver, as cartas estão alinhadas e agora vou começar a estilizá-las Vamos selecionar o cartão e definir sua largura e altura. Vou definir a largura para 28 RAM. Se for bastante alto, será de 45 RAM. E também altere a cor de fundo. Vou usar aqui a cor 181, B1. Tudo bem, agora as cartas já estão todas visíveis muito bem. Em seguida, vou torná-los arredondados e também quero adicionar um efeito de sombra. Então, vamos definir o raio para uma RAM. Em seguida, use box-shadow com valores para RAM, duas vezes do que seis E como cor, vamos usar RGBA com uma cor preta e com a opacidade Ok, então isso é tudo sobre o cartão. Em seguida, vou cuidar da parte frontal. Então, vamos selecioná-lo e defini-lo dentro da altura. Vou fazer com que os dois sejam 100%. Em seguida, vou alinhar os elementos usando novamente o Flexbox. Vamos configurar a tela como flexível. Que, para colocar os itens verticalmente em uma coluna, precisamos que a direção flexível seja Em seguida, vou colocá-los no centro horizontalmente. Para isso, vamos usar o alinhamento central dos itens e, finalmente, criar algum espaço entre eles usando o conteúdo justificado Espaço entre. Ok, então isso é tudo sobre a parte frontal. Em seguida, vou abordar aqui o título. Estou no primeiro elemento do cabeçalho do carro. Vamos selecioná-lo. Em primeiro lugar, vamos definir o tamanho da fonte fazê-la funcionar. Então eu vou deixar a fonte mais clara. Vamos definir a fonte como 300. E também mude a cor, torne-a branca. Ok, em seguida, vou definir a largura e a altura do título. E também vou mudar levemente a posição dos textos. Então, vamos definir com 200 por cento. Quanto à altura, vamos fazer com que sejam cinco Ram. Em seguida, quero colocar o texto verticalmente na central usando o Flexbox Então, vou configurar a exibição para flexionar e, em seguida, alinhar os itens no Por fim, vamos criar algum espaço no lado esquerdo do texto usando o preenchimento Acolchoamento à esquerda. Vamos configurá-lo para funcionar. Ok, agora é hora de adicionar a cor de fundo aos elementos do título. Como você lembra, eles têm cores de fundo diferentes. Eu atribuí um nome de classe individual a eles. Então, vamos selecioná-los separadamente e definir as cores de fundo. Vou começar com um título três. Portanto, a cor de fundo terá algum gradiente. Vamos usar o gradiente linear. A direção da transição será da esquerda para a direita. Quanto aos chamadores, vamos usar aqui 087285 E também precisamos de ODA cinco, D3. O primeiro título tem a cor de fundo. Mas agora temos aqui um pequeno problema. Nos cantos superior esquerdo e superior direito. Não temos mais o raio da fronteira. Então, vamos em frente e consertar isso. Eu vou usar border-radius. Vamos usar até você os seguintes valores. Precisamos de 1 g duas vezes, quero dizer, uma RAM como o valor dos cantos superior esquerdo e superior direito Quanto ao resto dos valores, isso deve ser zero. Tudo bem, agora o problema está resolvido. Vamos seguir em frente e alterar as cores de fundo para o resto dos títulos. Vou duplicar esse código três vezes e depois fazer algumas alterações O segundo título será básico. E como as cores, vamos usar 946809. Então, o próximo será bd, seja AOE. Então teremos um padrão. Quanto às cores que serão 1014. Então teremos de a0 a a3. Seja um brinde. Pois o último título será premium com as seguintes cores. 0748 e depois três be286. Tudo bem? Portanto, todos os elementos do título têm as cores de fundo adequadas. E, na verdade, com os primeiros títulos, terminamos. Vamos seguir em frente e cuidar do preço. Vamos selecionar o preço do cartão de preços. Em primeiro lugar, vou definir a família de fontes. Vamos usar suas chamadas telefônicas feitas para aumentar o tamanho da fonte e transformá-la em sete RAM transformá-la Torne a fonte mais clara. Vamos configurá-lo para 300. E depois mude a cor, torne-a branca. Tudo bem, então o preço parece bom. Em seguida, temos que cuidar dos itens da lista 28. Projeto 3 - Fazer cartões de preços funcionando usando Swiper: Tudo bem, vamos seguir em frente e personalizar o resto dos elementos do cartão Em seguida, temos a lista, que consiste nos ícones Font, Awesome e alguns valores de texto. Primeiro, vamos selecionar a ilha e aumentar o tamanho da fonte, torná-la 1,8. Corra. Em seguida, vamos ver aqui os elementos de extensão. Vamos selecioná-los. Vou definir o tamanho da fonte, torná-la 1,8 RAM. Em seguida, defina o peso da fonte para 300. E também crie algum espaço entre as letras. Faça com que seja 0,1 rem. Tudo bem. Agora vou criar o mesmo espaço entre os ícones e os elementos de texto. Para isso, vamos definir a largura dos elementos I. Vou fazer três rampas. Ok, agora é hora de mudar as cores dos itens da lista. Como suposição, vou definir uma cor diferente para cada lista. No momento, cada elemento da lista tem o nome da classe individual. Então, vamos seguir em frente e selecionar os itens da lista separadamente. Precisamos de pelo menos três, seguidos pelo elemento LI. Nesse caso, mudaremos a cor dos dois elementos. Estou no ícone Font Awesome e também no elemento span. Vamos definir a cor como zero, d Phi d três. Vamos duplicar esse código três vezes e depois mudar os nomes das classes e os chamadores Portanto, precisamos do menos básico. E a cor será BD BA II. Então teremos a lista padrão. E a cor vai ser de a0 a a3. Seja um brinde. Finalmente, precisamos pelo menos premium com a cor 3286. Tudo bem, então os itens da lista parecem bons. A única coisa que vou fazer é aumentar um pouco o espaço entre eles. Então, vamos selecionar os elementos LI e definir a rampa inferior de 2,5 da margem Ok, então é isso em relação à lista, eles parecem bons. E agora temos que passar para o próximo elemento, que será um Batson Então, vamos selecioná-lo. Em primeiro lugar, vou definir sua largura e altura. Vamos configurar com 218 RAM. Quanto à altura, vamos fazer com que sejam cinco RAM. Em seguida, crie algum espaço na parte inferior usando a margem inferior com o valor três Ran. Ok, vamos seguir em frente e adicionar outros estilos ao botão. Vamos arredondá-lo usando o raio de borda com um valor Também vou me livrar da borda padrão. Vamos defini-lo como nenhum. Em seguida, aumente o tamanho da fonte do texto. Vamos transformá-lo em 1,6 RAM e também em maiúsculas Tudo bem, então os botões estão bonitos. Agora, como outros elementos, temos que definir diferentes cores de fundo para os botões. Eles também têm os nomes das classes individuais. Então, vamos selecioná-los separadamente. Vou começar com um BTN grátis. Vamos definir a cor para zero, DA cinco, D3. A cor de fundo do primeiro botão é alterada. Na verdade, precisamos mudar a cor do texto. E também vou adicionar um pequeno efeito de sombra. Vamos definir a cor para branco. Em seguida, use sombra de texto com um valor de 0,3. Execute duas vezes do que precisamos de 0,6 RAM. E o valor RGBA com a cor preta e com a opacidade 0,5 Ok, agora temos um resultado muito melhor. Vamos mudar as cores de fundo do resto dos botões. Vou duplicar esse código três vezes e depois mudar os nomes das classes e as cores O segundo botão será btn basic. Na verdade, precisamos das mesmas cores que usamos para a lista. Então eu vou pegá-los daqui. O próximo botão será padrão. Vamos copiar a cor. E o último será btn premium com essas cores Tudo bem, dito isso em relação aos botões e, na verdade, com a parte frontal do cartão, terminamos Em seguida, vou personalizar a parte traseira. E depois disso, usaremos o plugin JavaScript chamado swipe ou dot js Em primeiro lugar, vou girar o cartão em 180 graus Exibir a parte de trás do cartão Portanto, precisamos girar com a direção y e ter o valor como infinito aqui, Em seguida, vou selecionar a parte traseira. Primeiro de tudo, vamos definir essa posição. Vou defini-lo como absoluto. Em seguida, defina as propriedades superior e esquerda. Vou definir os dois como zero. Então, para expandir a parte traseira para todo o cartão, precisamos definir a largura e a altura, ambas em 200% E depois use alguma cor de fundo temporária. Vamos configurá-lo para branco. Então aqui temos a parte traseira. Vou colocar o conteúdo no centro usando o Flexbox. Como você sabe, precisamos usar o display flex, seguido pelo centro de justificação do conteúdo e pelo centro de alinhamento de e Como você pode ver, o elemento de link é exibido na direção oposta. Então, precisamos girá-lo. Vamos usar Transform, Rotate Y como o valor menos Institute 180 graus. Além disso, vou fazer a parte traseira arredondada. Precisamos de um raio de borda com o valor de uma corrida. Tudo bem, agora é hora de personalizar o elemento de link. Mas antes de fazermos isso, vou mudar as cores de fundo. Todos os quatro cartões devem ter cores de fundo diferentes. Eles serão semelhantes à cor de fundo que usamos para os primeiros elementos de cabeçalho do cartão. Então, vamos selecionar sem erros e , em seguida, pegar a cor de fundo do elemento de título Vamos duplicar esse código três vezes. Precisamos mudar os nomes das classes. O segundo voltará ao básico. Então, novamente, suba e pegue a cor de fundo. Em seguida, teremos um padrão. E, finalmente, precisamos apoiar o premium. E também vou me livrar da cor de fundo branca temporária. Ok, então ele pode ver todos os lados de trás dos cartões têm cores de fundo diferentes. Finalmente, vou começar os elementos do link. Vamos selecioná-lo. Vou aumentar o tamanho da fonte. Vamos fazer com que rima 2,5. E também defina a cor para branco. Tudo bem, então os cartões são personalizados. Quero dizer os dois lados, frente e verso. E agora é hora de usar o plugin Java chamado swipe ou JS Antes disso, vou girar as cartas para trás. Então, vamos nos livrar transformação com a função Rotate a partir daqui. Vamos continuar e visitar o site. Vou pesquisar por swipe ou dot js. Então, este é o site deste plugin. Vamos continuar e clicar nas demonstrações. Então, aqui podemos conferir diferentes versões de demonstração desse controle deslizante. No lado esquerdo da página da web, temos uma barra lateral onde você pode encontrar várias versões diferentes desse controle deslizante Eu não vou perder tempo com isso. Você pode se sentir à vontade e experimentá-los. Vou usar o controle deslizante chamado efeito de fluxo de capa 3D. Então aqui está. Para usar esse controle deslizante, existem algumas maneiras diferentes Você pode baixar os arquivos de origem e vinculá-los ao projeto, ou podemos simplesmente usar os links da CDN Vamos para a primeira página. Quero dizer, comece. Então, aqui temos os links CDN para CSS e JavaScript. Você pode encontrar aqui duas versões do plugin. O primeiro é irregular. Quanto à segunda, é a versão minimizada. Vou pegar os primeiros links. Então, temos que colar o link CSS nos elementos principais. Quanto ao link do JavaScript será colocado abaixo. Tudo bem, a seguir, vamos voltar às demonstrações e clicar no código-fonte aqui Navegaremos até uma página do GitHub onde você poderá encontrar o código-fonte para HTML, CSS e Vamos dar uma olhada no código HTML. Então, temos aqui um toque por contêiner e um rapper, seguidos por esses slides da Wipro Esses deslizamentos ou slides serão nossos cartões de preços. Então, esse y por contêiner será criado. Quanto ao toque ou embalagem, será a embalagem do nosso cartão de preços Então, vamos atribuir aos cartões de preços uma nova classe, deslizar ou embrulhar Em seguida, crie um novo elemento div fora do swipe, um Precisamos deslizar o ClassName por contêiner. Vamos encerrar com esse elemento, todo o conteúdo. Além disso, tivemos que atribuir a cada tabela de preços o nome da turma, deslize Como você pode ver, tudo está confuso aqui porque nos bastidores e outros códigos estão funcionando a partir do plug-in O que vamos consertar essas coisas em um minuto. No momento, as cartas são muito grandes. A largura e a altura não se aplicam mais a elas adequadamente. Para corrigir isso, vou somar os dois valores. Importante. Então, agora o problema está resolvido. Em seguida, vou pegar o código JavaScript da página do GitHub Vamos ao arquivo script.js e inserir seus novos comentários. Cartões de preços da seção três. Secione três cartões de preços e cole aqui. O código JavaScript. Na verdade, não precisamos da paginação, então vamos nos livrar dessas propriedades de Então, agora, como você pode ver, tudo funciona bem. Antes de terminarmos de trabalhar nesta seção, quero fazer algumas coisas. Como você pode ver, temos aqui um objeto chamado efeito de transbordamento Existem algumas propriedades diferentes aqui. Um deles é girar. Agora está definido para 50 e eu vou aumentar a. Vamos fazer com que seja sete. Então, agora acho que temos um resultado melhor. A última coisa que vou fazer é criar algum espaço dentro da embalagem Então, vamos seguir em frente e definir o preenchimento para cinco rem. Tudo bem, então é isso. Finalmente, terminamos de trabalhar nesta seção. Vamos seguir em frente. 29. Projeto 3 - Criar e Estilo Seção de Contato: Tudo bem, então, passo a passo, estamos avançando e agora é hora de criar uma das últimas seções deste projeto, chamada de contextos Vamos dar uma olhada no projeto finalizado. Portanto, a seção de contato consiste em algumas partes diferentes. Temos um título no lado esquerdo. No lado direito, você pode ver aqui alguns detalhes de contato e alguns campos de entrada com um botão de envio. Vamos começar a criar a marcação HTML. Como de costume, vamos inserir novos comentários para a Seção quatro. Em seguida, abra a tag da seção, seção Nome da classe. Em seguida, vou criar o título e a linha. Então, vamos abrir a tag de cabeçalho H1 com o título da seção da classe E com o contato de conteúdo. Em seguida, precisamos da linha. Então, vamos abrir a tag div com uma linha de título de seção de classe. Ok, em seguida, vou abrir a tag div, que será o invólucro do conteúdo O conteúdo no lado direito desta seção, vou chamá-lo de invólucro de contato Portanto, esse elemento incluirá três partes diferentes, mas teremos os detalhes de contato, título e o próprio formulário. Vamos abrir outra tag div para os detalhes de contato. Portanto, esse elemento incluirá números de telefone, endereços e e-mails com os ícones Font, Awesome. Vamos abrir uma tag div com o telefone da turma. Portanto, teremos aqui um ícone do Font Awesome com o título dos parágrafos. Vamos abrir o elemento I com uma classe s, um Alt móvel. Em seguida, vou abrir a tag de cabeçalho h3 com o telefone de conteúdo Em seguida, crie um parágrafo com algum número de telefone fictício. E então crie outro parágrafo novamente com um pouco de dominó. Depois disso, teremos endereços. Então, vamos abrir a tag div com um endereço de classe. Então precisamos do ícone Font Awesome. Portanto, é um elemento aberto I com as classes FAS, um mapa, marcador, ALT Em seguida, precisamos da tag de cabeçalho h3 com o endereço do conteúdo. E, finalmente, crie dois parágrafos com dois endereços fictícios diferentes Ok, então a próxima parte será um e-mail com a tag div aberta com o e-mail da classe Então, novamente, precisamos de elementos IS com a classe FAR FA, envelope do que o título será e-mail E, finalmente, vamos instituir dois parágrafos com dois endereços de e-mail diferentes O primeiro será supported@gmail.com. E então vamos ligar para esse segundo endereço de e-mail sales@gmail.com. Tudo bem, então isso é tudo sobre os detalhes de contato. Em seguida, vou criar um título. Vamos abrir a tag de cabeçalho H1 com um conteúdo. Entre em contato. E agora temos que criar a última parte da seção do contrato, que será deformada Vamos abrir a etiqueta do formulário com o formulário de contato da turma. Então, vou inserir você nos elementos de entrada, na área de texto e no botão de envio. Vamos abrir a tag de entrada com texto digitado com o atributo de espaço reservado Vamos inserir seu nome. Em seguida, duplique essa linha de código e altere o tipo. Vai ser um e-mail. Quanto ao valor do atributo de espaço reservado, será seu e-mail Em seguida, precisamos que a área de texto, que terá o atributo de espaço reservado, valorizaria sua mensagem Finalmente, precisamos do botão Enviar. Ele será criado usando entrada. Elemento. O tipo será enviado. E também precisamos valorizar a mensagem enviada. Tudo bem, então aqui temos a marcação HTML, o título e a linha já estão todos estilizados Quanto ao resto dos elementos, eles parecem muito feios Então, vamos em frente e cuidar disso. Vou inserir novos comentários no arquivo CSS, seção quatro. E fora da seção quatro. Em seguida, selecione os elementos desta seção e defina sua largura, altura e também a cor de fundo. A largura será de 100 por cento. Então, precisamos que a altura seja 100% da janela de visualização, provavelmente como cor de fundo Vamos usar sua cor 171718. Vai ser o cinza escuro. Ok, em seguida, vou alinhar os elementos horizontalmente em uma linha e também quero colocá-los no Para isso. Como sempre, vou usar o Flexbox. Vamos configurar a tela para flexível Em seguida, precisamos alinhar o centro dos itens E também vou criar algum espaço em vez desta seção nos lados esquerdo e direito Vamos usar o preenchimento com um valor de zero e virar Ok, vamos seguir em frente e cuidar do rapper de contato. É composto por três partes. Temos detalhes de contato, título e formulário. Vou alinhá-los usando o Flexbox. Então, vamos selecionar o elemento wrapper div. Estou em contato com o rapper. Em primeiro lugar, vou definir a largura para 80 por cento. Em seguida, use o flexbox. Precisamos de display flex. Em seguida, precisamos colocar os elementos verticalmente nas colunas, então precisamos mudar a direção em que estava formando a coluna Em seguida, use o centro de alinhamento de itens. Ok, então agora todas as três partes estão alinhadas. Em seguida, vou cuidar de cada um deles. Vamos começar com os detalhes de contato, como a embalagem. Então, vou colocar as três partes horizontalmente em uma Então, vamos configurar a exibição para flexionar e, em seguida, criar algum espaço na parte inferior usando a margem inferior oito Ran Na verdade, não temos aqui o ícone do endereço. Vamos verificar o código. Então, como você pode ver, temos que nos livrar do traço daqui Tudo bem, então depois disso, vou separar os invólucros dos detalhes Então, vamos selecionar elementos div. Defina sua largura para 25 RAM. Em seguida, vou colocar o texto no centro e também criar esse espaço ao redor dos elementos usando a margem. Vamos configurá-lo para alugar. Ok, então cada elemento div consiste em um título de ícone Font Awesome, parágrafos vazios Vamos em frente e personalizá-los. Vou começar com os ícones. Vamos selecionar elementos I. Aumente o tamanho da fonte, transforme-a em cinco RAM e, seguida, mude a cor, transforme-a em 781010 Os ícones são estilizados. Em seguida, vou personalizar os cabeçalhos. Vamos selecionar elementos de cabeçalho h3. Em primeiro lugar, vou mudar a família de fontes. Vamos usar aqui made soul maze san-serif do que aumentar o tamanho da fonte, tornando-a Além disso, vou criar algum espaço na parte superior e inferior do arenque Vamos definir a margem para RAM e zero e também mudar a cor. Vou usar sua cor ccc. Tudo bem, isso é tudo sobre cabeçalhos. Vamos seguir em frente e cuidar dos parágrafos. Vamos selecionar p elementos. Vou definir o tamanho da fonte. Vamos fazer com 1,6 RAM e depois mudar a cor. Nesse caso, vou usar cores ou AAAA. Ok, então, como você pode ver nos detalhes de contato, terminamos. Agora é hora de começar o cabeçalho. E depois o formulário em si. Vamos selecionar elementos de cabeçalho H1. Vou aumentar o tamanho da fonte. Vamos fazer com que seja totalmente RAM. Em seguida, mude a cor. Vamos usar aqui call ou CCC. Em seguida, vou transformar o texto em maiúsculas. E, finalmente, cria algum espaço na parte inferior. Use a margem inferior com rampa de valor três. Tudo bem? Como você pode ver, o título está estilizado e agora temos que seguir em frente e cuidar do formulário Então, vamos selecionar Formulário de contato. Primeiro. Vou definir sua largura para sete em RAM. Em seguida, vou alinhar os elementos usando o Flexbox. Vamos ajustar a tela para flexionar e mudar a direção. Faça com que ligue para eles. Ok, então os campos de entrada são colocados verticalmente em uma coluna Como você sabe, temos aqui dois campos de entrada, uma área de texto. Eles terão alguns estilos comuns. Então, vamos prosseguir e selecionar a área de entrada e de texto. Então, primeiro de tudo, vou criar algum espaço dentro dos campos. Vamos definir o preenchimento para 1,5 corrida e, em seguida, alterar a cor do plano de fundo Vou torná-lo cinza escuro usando para quatro. Em seguida, altere a cor do texto. Vamos fazer com que seja e. Além disso, vou me livrar da borda padrão. Vamos defini-lo como nenhum. E, em seguida, crie algum espaço na parte inferior da margem para executar. Agora os elementos parecem muito melhores e temos que cuidar das fontes. Vamos definir a família de fontes como Oswald san-serif. Então eu vou aumentar o tamanho da fonte. Vamos configurá-lo para 1,8 RAM. Além disso, torne a fonte mais clara. Vamos definir a espessura da fonte para 300 e aumentar o espaço entre as letras. Vamos configurá-lo para 0,1 rampa. Tudo bem, então as entradas e a área de texto, ou um estilo, parecem boas Usamos alguns estilos comuns para entradas e área de texto, mas precisamos de alguns outros estilos para a área de texto e o botão Enviar Como você sabe, você pode alterar a largura e a altura da área de texto manualmente no canto inferior direito. Se fizermos isso, isso estragará o layout. Portanto, precisamos limitar a largura e a altura da área do texto de alguma forma. Para isso, vou usar propriedades como largura máxima, altura máxima e altura média Então, vamos selecionar a área de texto. Vou definir a largura máxima para 100%. Então, vamos definir a altura máxima, configurá-la para 15 RAM. Quanto à altura mínima, vou configurá-la para 5,5 rampa. Agora, como você pode ver, podemos aumentar um pouco o tamanho da área de texto. Tudo bem, então o último elemento que temos que personalizar é o botão de envio Então, vamos cuidar disso. E vou selecionar o botão Enviar usando o atributo de tipo que precisamos aqui Enviar. Vamos mudar a cor do plano de fundo. Vou usar sua cor 781010, depois transformar o texto em maiúsculas e também alterar o tipo do curso fazendo Portanto, o botão de envio está estilizado e parece bom. E, por fim, vou criar um pequeno efeito de foco. Quero mudar ligeiramente a cor de fundo do botão ao passar o mouse Então, vamos selecionar o botão enviar com o mouse. Mude a cor do plano de fundo. Vamos usar sua cor 50303. Em seguida, use a transição com a cor de fundo. E com duração de 0,3 s. Tudo bem, então é isso A seção de contato é criada e estilizada. Então, vamos seguir em frente. 30. Projeto 3 - Criar e Estilo de Rodapé: Tudo bem, então estamos quase terminando de construir nossos projetos É hora de criar a última parte, que será o rodapé Será simples. Teremos os itens de navegação no lado esquerdo. Quanto ao lado direito, colocaremos aqui o parágrafo com alguns textos de direitos autorais. Além disso, faremos com que esses links funcionem. Se eu clicar neles, navegaremos até a seção apropriada sem problemas. Ok, vamos começar a criar a marcação HTML. Vou instituir novos comentários. Rodapé e rodapé. Em seguida, abra o elemento de rodapé HTML5 com um rodapé de classe. Portanto, a foto consistirá em duas partes diferentes. Teremos o rodapé, navegação e o parágrafo Então, vamos criar elementos div com o rodapé da classe nav do que elementos de link do Institute com a página inicial Então, no geral, teremos quatro links diferentes. Vamos duplicá-lo três vezes e alterar o conteúdo. O segundo será sobre nós do que teremos sobre preços. E o último será o contato. É isso sobre a primeira parte. Vamos abrir uma tag p com direitos autorais de uma classe e, em seguida, inserir um texto de direitos autorais para você . Precisamos aqui da entidade HTML5, quero dizer, o sinal de direitos autorais, seguido de código e criação Todos os direitos reservados. Tudo bem, então isso é tudo sobre a marcação HTML. Vamos continuar e personalizar o rodapé. Vou criar novos comentários no arquivo CSS para rodapé Em seguida, selecione o rodapé e defina sua largura e altura. Vou definir a largura para 100%. Para a altura. Vamos fazer 12 em torno de 12. E também altere a cor de fundo. Vou usar sua cor de 0 a um a dois. Em seguida, vou alinhar os elementos usando o Flexbox. Vamos configurar a tela para flexível. Em seguida, vou criar algum espaço entre os itens flexíveis entre os quais precisamos justificar o espaço de conteúdo Em seguida, para colocar os itens no centro, alinhe verticalmente o centro dos itens E também vou criar algum espaço nos lados esquerdo e direito. Vamos usar o preenchimento com o valor 0,10 de rampa. Tudo bem, então os elementos estão alinhados e agora temos que estilizá-los Vamos começar com links de navegação no rodapé. Eu vou mudar a família de fontes. Vamos fazer com que seja feito de milho san-serif. seguida, aumente o tamanho da fonte, transforme-a em Ram e mude a cor. Vou usar aqui as cores C, C, C. Como você pode ver, precisamos criar algum espaço entre os elementos do link. Então, vamos usar margem, direita, com um valor de três rem. E também aumente o espaço entre as letras. Use espaçamento entre letras, rampa de 0,1. Ok, então, os elementos ou o estilo do link, antes de passarmos para o parágrafo, vou criar um pequeno efeito de foco Vou mudar a cor ao passar o mouse. Então, vamos selecionar elementos de link com um mouse. Em seguida, mude a cor que vou usar aqui idade de cores de seis para três a três. E também use transição com os valores de cor 0,3 s. Tudo bem, então isso é tudo sobre os itens de navegação Vamos passar para o parágrafo. Vou aumentar o tamanho da fonte. Vamos configurá-lo para duas RAM. E também mude a cor. Faça com que seja d, d, d. Ok, então é isso. O rodapé é personalizado. E antes de terminarmos, vou fazer com que esses itens de navegação funcionem Depois de clicarmos neles, precisamos navegar até a seção apropriada. Para conseguir isso, precisamos conectar as seções aos links. Faremos isso usando os atributos h reference e ID. Como você sabe, o elemento de ligação H tem um atributo de referência H. Temos que atribuir a cada seção um elemento e um atributo de ID E então os valores de ambos os atributos devem coincidir. Então, vamos inserir uma nova casa. Então Sobre nós: preços e contato. Depois disso, vamos atribuir a cada seção os elementos e o atributo ID com os valores adequados A primeira seção deve ter um id com o valor home, e a segunda será sobre nós. Em seguida, teremos preços. Quanto à última seção, ela será conteúdo. Então, agora, se eu clicar nos links, vou navegar até a seção de propriedades, mas sem nenhum efeito suave. Para corrigir isso, precisamos usar uma dessas propriedades CSS chamada comportamento de rolagem Temos que atribuí-lo ao elemento HTML e configurá-lo para ser suave Então, agora o problema está resolvido. E, finalmente, terminamos. O projeto está concluído. Todas essas seções são criadas e personalizadas. E agora temos que passar para a última parte. Quero dizer, temos que fazer um projeto responsivo a diferentes tamanhos de tela Então, vamos seguir em frente. 31. Projeto 3 - Torne o projeto responsivo: Tudo bem, então terminamos de construir nossos projetos. E, como eu disse , agora é hora de torná-lo responsivo a diferentes tamanhos de tela Como sempre, construímos esse projeto com o desktop. A primeira abordagem foi criada para um tamanho de tela muito grande. Tamanho da tela com 90, 20 pixels de largura e 1080 pixels de altura E agora temos que torná-lo responsivo a tamanhos de tela menores Vamos inspecionar a página e mudar para o modo responsivo. Como você pode ver, a largura e a altura estão definidas como 1.920,10, Portanto, precisamos encontrar os pontos de interrupção nos quais o projeto precisa de algumas mudanças e ajustes Eu já preparei os pontos de interrupção, então não vou perder tempo em encontrá-los. Portanto, o primeiro ponto de interrupção no qual precisaremos fazer algumas alterações será de 1.800 pixels Porque, como você vê, a segunda seção não parece boa. Então, vamos continuar e criar uma consulta de mídia CSS. Antes disso, vou inserir novos comentários, responsivos, sem Em seguida, crie a consulta de mídia CSS. Vou especificar quem é a largura máxima de 1.800 pixels. Então, no ponto de interrupção, vou diminuir a largura do invólucro do vídeo e do parágrafo E também vou mudar um pouco suas posições. Então, vamos selecionar Video wrapper. Vou definir sua largura para funcionar. Então, a altura será da marca 45. Quanto à posição correta, vamos fazer dez rampas. Então isso é tudo sobre o invólucro de vídeo. Vamos passar para o parágrafo. Vamos selecioná-lo. Vou definir sua largura. Vamos fazer com que seja 90 RAM. E então mude a posição correta, faça com que seja uma rampa de bronzeamento. Ok, então a segunda seção parece boa. A única coisa que vou fazer é criar um pequeno espaço no lado direito da linha na seção de alimentos. Como você sabe, as linhas têm o nome comum da classe, linha do título da seção. Então, para selecionar a linha da seção do pé, temos que usar a combinação desses eletrodos dessa forma Primeiro, precisamos especificar aqui a seção três e a linha do título da seção. Vamos definir a margem na rampa 23 do lado direito. Tudo bem, então com esse ponto de interrupção, terminamos porque todas as outras seções parecem boas O próximo ponto de interrupção será de 1.650 pixels. Então, vamos criar uma nova consulta de mídia CSS e especificar quem é a largura máxima. Então, no ponto de interrupção, temos que cuidar novamente da segunda seção Mas antes disso, vou diminuir o tamanho da fonte do elemento HTML. Isso tornará os elementos menores. Estou nos elementos que são medidos na RAM. Então, vamos definir o tamanho da fonte para 57 por cento. Então, os elementos ficaram menores. Agora vou cuidar da segunda seção. Vamos pegar esse código daqui e colá-lo abaixo. Portanto, a largura do invólucro de vídeo, que será de 85 vezes, altere o valor da altura Vamos fazer com que seja quatro para carneiro. Quanto à posição correta, vou fazer cinco corridas. Em seguida, altere a largura do parágrafo, faça com que ele tenha 85 RAM do que precisamos, posição correta. Faça com que sejam cinco rem. E também vou acrescentar aqui, comprei uma propriedade com o valor dez corridos. Tudo bem, então isso é tudo sobre esse ponto de interrupção. O próximo terá 1.500 pixels. No ponto de interrupção, vou apenas esconder as linhas do título Então, vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 1.500 Em seguida, selecione as linhas do título e atribua-as a elas. Não exibir nenhum. Tudo bem, então as linhas estão ocultas. Vamos seguir em frente e encontrar o próximo ponto de interrupção. Portanto, o próximo ponto de interrupção será de 1.400 pixels. Como você pode ver, temos muitas coisas para fazer porque o projeto está quase confuso em um tamanho de tela tão menor Vamos criar uma nova consulta de mídia CSS largura máxima, 1.400 Em primeiro lugar, vou diminuir novamente o tamanho da fonte do elemento HTML. Vamos defini-lo para 45 por cento. Então, como você pode ver, já temos um resultado muito melhor. Manipular o tamanho da fonte do elemento HTML é realmente uma coisa poderosa quando você tenta tornar o projeto responsivo Em seguida, vou diminuir o tamanho da fonte do título do banner Portanto, precisamos selecionar o elemento span. Vamos definir o tamanho da fonte para que ele mude. Ok, depois disso, vou cuidar do parágrafo. Precisamos aumentar a largura dela. Vamos selecionar B9 ou parágrafo. Aumente sua largura, 45 RAM, e depois altere o tamanho da fonte, transforme-a em uma rampa 3D O parágrafo parece bom. Agora vou cuidar do resto das seções. A partir desse ponto de interrupção, quero mudar um pouco o layout. No momento, decapita um lugar no lado esquerdo, e vou colocá-los no topo das seções no centro Para conseguir isso, vamos selecionar as três seções. Vá para a seção três e a seção quatro e altere a direção do layout do fluxo Vou fazer com que ligue para eles. Tudo bem, agora os cabeçalhos estão colocados no topo desta seção Vamos seguir em frente e personalizar a segunda seção. Eu vou aumentar sua altura. Vamos configurá-lo para 120 de altura da janela de visualização. Depois vou colocar o vídeo e o parágrafo no centro da página. Vamos selecionar o invólucro de vídeo e definir duas posições, até 20% Então precisamos da posição esquerda. Eu vou fazer com que seja 50%. E para centralizar o elemento perfeitamente, precisamos transformar translação com a direção x. E como o valor que vou instituir ou -50 por cento. E também diminua provavelmente a largura do invólucro de vídeo. Vamos fazer uma rampa dupla. Ok, vamos seguir em frente e fazer o mesmo com o parágrafo. Vamos selecioná-lo. Nesse caso, vou definir apenas a posição esquerda. Vamos fazer com que seja 50 por cento. Então, novamente, precisamos transformar, traduzir com a direção x e com um valor de -50% Por fim, altere a largura, faça com que seja 80 RAM Tudo bem, então isso é tudo sobre a segunda seção. Vamos passar para a próxima seção. Vou definir a altura da terceira seção oral e também definir o preenchimento Vou configurá-lo para cinco rem na parte superior, depois zero no lado direito. Então precisamos de dez rampas na parte inferior e zero no lado esquerdo. Em seguida, vou criar algum espaço na parte inferior do cabeçalho. Para selecionar especificamente o título da terceira seção, precisamos selecionar a primeira seção três, seguida por esse título de seção. Vamos definir março como importante com o valor sete de rampa. Ok, finalmente, vamos aumentar a largura do deslizamento por contêiner para 100% Vamos selecioná-lo e definir a largura para 100%. Ok, então, com a terceira seção, terminamos. Vamos seguir em frente e personalizar a seção de contato. Também vou definir sua altura para automática. Em seguida, defina o preenchimento, vou configurá-lo para cinco rem na parte superior e inferior e zero nos lados esquerdo e direito Tudo bem, então são cerca de 1.400 pixels ou essas seções parecem boas Vamos seguir em frente e encontrar o próximo ponto de interrupção. Acho que serão 900 pixels. Então, vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 900 pixels. Então, a primeira coisa que vou fazer é diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 40%. Então. Vou diminuir o tamanho da fonte do título do banner Vamos selecionar esse elemento de caminho e seu tamanho de fonte para oito execuções. Então, acho que temos um grande espaço entre o título e o parágrafo. E também seria melhor se abaixássemos um pouco o banner Então, primeiro vamos selecionar o banner e mudar sua posição superior Vou fazer 25% e depois vou diminuir a altura do cabeçalho do banner Vamos configurá-lo para 15 execuções. Então, agora o binário parece muito melhor. Além disso, não precisamos tocar na segunda, terceira e quarta seções. Vamos para o rodapé. Vamos selecioná-lo e encontraremos o preenchimento. Vou diminuir o espaço nos lados esquerdo e direito. Vamos definir o preenchimento para 0,5 corrida. Em seguida, selecione os elementos do link e altere o tamanho da fonte. Vou fazer com que seja 1.8 Ran. Tudo bem, então vamos ver esse ponto de interrupção dessas seções Parece bom. Vamos seguir em frente e encontrar o próximo. O próximo ponto de interrupção será de 700 pixels. Vamos continuar e criar uma nova consulta de mídia CSS com a largura máxima de 700 Primeiro, vou diminuir o tamanho da fonte dos elementos HTML. No momento, está definido para 40%, então diminua e aumente para 35%. Então, os elementos ficaram menores. Na verdade, a primeira seção parece boa. Vamos passar para o segundo. Acho que precisamos diminuir a altura dessa seção. Vamos fazer com que tenha 100 de altura de janela de visualização. A segunda seção parece boa. Portanto, não precisamos tocar na seção de preços. Quanto à seção de conteúdo, provavelmente diminuirei o espaço entre os detalhes de contato. Então, vamos selecionar elementos div e especificar margem com valores três rem na parte superior e inferior e dois rem nos lados esquerdo e direito Tudo bem, finalmente, vamos cuidar do rodapé. Vou colocar os itens de navegação e o parágrafo verticalmente um sobre o outro Então, vamos mudar a direção. Eu vou fazer uma coluna. Em seguida, vou colocá-los no centro verticalmente. Para isso, vamos usar o justify-content center. E, por fim, crie algum espaço abaixo dos links. Vamos selecionar o rodapé nav e atribuir a ele a margem inferior com o valor a ser executado Tudo bem, o período completo parece bom e, na verdade, no ponto de ruptura, terminamos Agora é hora de fazer com que nosso projeto tenha uma boa aparência no último ponto de interrupção, que será de 500 pixels Então, vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 500 pixels. Então, novamente, a princípio, vou diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 30%. Na verdade, antes de personalizarmos a primeira seção, vou me livrar do espaço em branco que temos no lado direito da página É causado pela segunda seção e pela seção de conduta. Então, vamos selecionar o invólucro de vídeo e definir sua largura para 60 RAM Em seguida, selecione Parágrafo e defina sua largura para seis dram também. A segunda seção parece boa. Vamos cuidar da seção de contato. Vou selecionar um elemento div. Quero dizer, o div dos detalhes de contato. Vamos definir sua largura para 18 RAM. Também altere a margem. Vou configurá-lo para três rem na parte superior e inferior e um rem nos lados esquerdo e direito. E também diminua a largura do formulário de contato. Vamos configurá-lo para 60 corridas. Tudo bem, então a seção de contato também parece boa. E, finalmente, temos que cuidar da primeira seção. Vamos selecionar o título do banner, span. Vou diminuir o tamanho da fonte. Vamos fazer com 4,5 RAM. E também vou diminuir o espaço entre as letras. Vamos fazer com que corra. Na verdade. Como você sabe, os elementos de extensão em um título alteram o espaçamento entre letras durante a animação Portanto, também precisamos diminuí-lo nos quadros-chave do CSS. Caso contrário, você pode ver que alguns desses elementos de extensão estão divididos em duas linhas e não parecem bons. Vou copiar todos os quadros-chave CSS. Vamos colá-los aqui e alterar a quantidade de espaçamento entre letras que precisamos executar E depois uma RAM em vez de 1,5 g. Agora tudo funciona muito bem e, na verdade, terminamos. O projeto é responsivo a diferentes tamanhos de tela. Então, terminamos de trabalhar nisso. Espero que tenha sido interessante e você tenha gostado. Agora tem que seguir em frente e começar a construir o próximo projeto. 32. Projeto 4 - Pré-visualização do projeto: Tudo bem, então é hora de começar a construir nosso próximo projeto, que será um dos maiores e mais interessantes. Vamos criar algo como o site de comércio eletrônico da APL Antes de começarmos a escrever o código normalmente, vamos prosseguir e descrever o projeto. Ele consistirá em algumas seções diferentes. Começaremos com a aterrissagem. Ele incluirá várias partes. Teremos aqui um logotipo e a navegação com efeitos de foco Em seguida, construiremos essas belas caixas aqui com controladores. Podemos mover a caixa usando esses controladores em um ambiente 3D. Gerenciaremos isso usando CSS e JavaScript. Além disso, teremos aqui alguns elementos de texto e essas partes interessantes, que, como você pode ver, têm um bom efeito de passar o mouse Além disso, o empréstimo terá as imagens de fundo animadas Eles mudarão com Fade Effects. Tudo bem, então a próxima seção inclui o título e as imagens do iPhone 12s Se passarmos o mouse sobre a imagem, ela mudará com um bom efeito de passar o mouse Além disso, temos aqui dois botões e, quando passarmos o mouse sobre eles, alguns links serão reproduzidos Depois disso, vem a seção sobre o MacBook Air. Depois de rolar para baixo, o MacBook abrirá o logotipo e a barra de progresso do carregamento será exibida E então Mark Wu ligará, criará todas essas coisas usando apenas CSS e JavaScript. Ok, vamos para a próxima seção onde você pode encontrar os Apple Watches. Nesta seção, você pode escolher suas capas favoritas e também as bandas usando esses controladores. Ok, a seguir, teremos uma seção sobre aeroportos seguida pelo rodapé, onde teremos os ícones e o texto dos direitos autorais E, na verdade, esses ícones estão conectados às seções apropriadas. Se eu clicar neles , navegaremos até a seção relevante. Além disso, a navegação também está funcionando. Se eu clicar nos itens de navegação , navegaremos até a seção apropriada. Tudo bem, então isso é tudo sobre esse projeto. Obviamente, vamos torná-lo responsivo a diferentes tamanhos de tela Agora é hora de começar a criar um projeto. Então, vamos seguir em frente. 33. Projeto 4 - Criar e personalizar a página de destino: Tudo bem, vamos começar a construir um projeto. Eu criei uma nova pasta no desktop chamada pool e-commerce, na qual tenho outra pasta para as imagens. Vamos abrir essa pasta no Visual Studio Code e depois criar nossos arquivos de trabalho. Vou chamá-los de index.html, style.css e script.js. Em seguida, abra o arquivo index.html e prepare o documento HTML básico. Para isso, vou usar um dos pacotes de código do VS chamado Ahmed Precisamos colocar aqui um ponto de exclamação e pressionar Tab ou Enter Ok, então aqui temos todas as tags HTML básicas. Em primeiro lugar, vou mudar o título. Vamos ver, institua o comércio eletrônico de abril. E depois disso, vamos vincular arquivos CSS e JavaScript. Vou abrir a tag do link. E então precisamos especificar o caminho do arquivo no atributo de referência h. Quanto ao arquivo JavaScript, vamos abrir a tag de script logo acima da tag do corpo de fechamento. E então, no atributo source, vamos especificar o caminho do arquivo. Além disso, vou trazer mais um link porque, durante todo o projeto, vou usar os ícones do Font Awesome. Então, vamos prosseguir e pesquisar Font Awesome, CDN, js. Em seguida, pegue o link, abra a tag do link nos elementos principais e cole o link como o valor do atributo de referência h. Tudo bem, finalmente, vou executar o projeto no navegador usando um servidor ativo Isso nos permite executar a vida útil do projeto no navegador e fazer as alterações sem atualizar a página todas as vezes Antes de prosseguirmos, vamos colocar o navegador e o editor de texto, assim. E comece. Como de costume, vamos construir o projeto seção por seção. A primeira seção inclui algumas partes diferentes, como a apresentação de slides das imagens de fundo e também o cubo Estou nesta caixa. Essas partes serão meio complexas. Então, primeiro de tudo, vou cuidar do resto das peças. E depois disso, nós também os criaremos. Vamos começar a criar a marcação HTML. Vou abrir a tag div, que será o contêiner Em seguida, insira seus novos comentários, seção um e seção um. Em seguida, abra a tag da seção com a seção 1 da classe. Então, vou começar com um logotipo. Vamos inserir seus novos comentários, logotipo e logotipo. Então, vou criar um logotipo usando o link e o ícone Font Awesome. Então, vamos abrir uma etiqueta com o logotipo da turma e, em seguida, inserir seus elementos oculares com as classes FAB, FA apple Ok, então aqui temos o logotipo. Vamos continuar e criar a navegação. Vamos instituir novos comentários, navbar. E agora, poro. Em seguida, vou abrir elementos de navegação HTML5 com a E então insira aqui o primeiro item de navegação, abra a tag de link com a classe agora por link. E como conteúdo, vamos inserir seu iPhone 12. Portanto, no geral, teremos quatro itens de navegação diferentes. Portanto, vou duplicar essa linha de código três vezes. E depois altere o conteúdo. Vou inserir seu MacBook Air. Então, o próximo será o Watch AirPods. Ok, isso é tudo sobre a navegação. Em seguida, vou criar um banner. Quero dizer os elementos do texto e a parte inferior. Então, vamos criar novos comentários, banner e banner Em seguida, abra a tag div com o banner class section one. O banner incluirá quatro elementos diferentes. Quero dizer o parágrafo do título, elemento de extensão e a parte inferior. Portanto, é uma tag de cabeçalho H1 aberta. E vamos inserir aqui a entidade HTML5, que será a seta esquerda Portanto, precisamos de e comercial, depois do sinal hash 8592, ponto e vírgula, seguido do melhor presente depois do sinal hash 8592, ponto e vírgula, seguido vírgula Em seguida, vou abrir a tag p, o parágrafo com o texto a seguir. A criatividade é apenas conectar as coisas Em seguida, vem os elementos. Vamos inserir aqui o autor dessas palavras, Steve Jobs. E, finalmente, crie o botão com o botão de digitação e com o conteúdo agora. Ok, então isso é tudo sobre a marcação agora. Como dissemos, cuidaremos dessa apresentação de slides e da caixa um pouco mais tarde É hora de começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos comuns e redefinidos. Na verdade, ao longo deste projeto, vamos usar uma das fontes do Google. Então, vamos em frente e traga o link. Vamos visitar o site do Google Fonts. Em seguida, procure os telefones chamados exons. Vou selecionar todas essas peças, exceto Itálica. Então, vamos selecioná-los e depois importar o URL. A partir daqui. Temos que colar esse URL no arquivo CSS. Ok, depois disso, vamos criar comentários, estilos comuns. E de estilos comuns. Em seguida, selecione cada elemento usando um asterisco. Então, primeiro de tudo, vou me livrar da margem e do preenchimento padrão de cada elemento Então, vamos seguir em frente e definir os dois como zero. Então eu vou fazer uma caixa de borda do tamanho de uma caixa. Em seguida, elimina os marcadores padrão do elemento da lista usando o tipo de estilo de lista none Além disso, não precisamos de um esboço padrão. Vamos defini-lo como nenhum. Em seguida, vou me livrar do padrão subjacente dos elementos do link usando nenhuma decoração de texto. E, finalmente, vamos configurar a família de fontes para funcionar com sons. Sem serifa. Como você pode ver, todos os estilos comuns são aplicados a todos os elementos desse projeto. Como os outros, vou usar a RAM como unidade de medida. No momento, uma RAM é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a Eu quero converter 1 g em dez pixels. E para isso, temos que diminuir o tamanho da fonte do elemento HTML. Vamos defini-lo para 62,5%. Tudo bem? Como você pode ver, todos os elementos ficaram menores e agora 1 g é igual a picos castanhos Em seguida, vou criar algumas variáveis CSS para as cores porque usaremos várias cores com frequência. Acho que seria melhor se usássemos variáveis CSS. Em geral, as variáveis CSS podem ter um escopo global ou local. Nesse caso, precisamos de variáveis globais porque elas podem ser acessadas por meio de todo o documento. Quanto às variáveis locais, elas podem ser usadas somente dentro do seletor Para criar variáveis com um escopo global, precisamos declará-las dentro do seletor raiz O seletor raiz corresponde ao elemento raiz do documento. Depois disso, precisamos especificar os nomes das variáveis e dos valores. Os nomes das variáveis devem ter sinais de hífen duplo Vou chamar a primeira variável de cor primária. E como valor, vamos usar aqui seis, e, d e seis. Em seguida, vou criar uma cor branca. E o terceiro vai ser preto. Tudo bem, então isso é sobre os estilos comuns. Vamos começar a personalizar esse elemento da seção. Insira seus novos comentários, seção um. E a seção um. Primeiro, vamos definir sua largura e altura. Eu vou definir com 200 por cento. Quanto à altura, vamos torná-la 100% da janela de visualização. Então eu vou mudar a cor de fundo. Nesse caso, usaremos uma cor de fundo temporária, mas depois criaremos a apresentação de slides Então, agora vou usar uma das variáveis. E para fazer isso, temos que usar uma função chamada var, que significa variável. Em seguida, temos que especificar o nome da variável dentro dos parênteses Vamos usar aqui a cor primária. Tudo bem? Como você pode ver, a cor de fundo foi alterada. Depois disso, vou alinhar os elementos usando o Flexbox Então, vamos configurar a tela como flexível. Em seguida, vou colocar os elementos no centro verticalmente Para isso, precisamos usar o centro de alinhamento de itens. E para criar espaço entre os elementos, vamos definir o conteúdo justificado como espaçado uniformemente Como você pode ver, os elementos são colocados horizontalmente no centro A última coisa que eu quero fazer com relação esse elemento de seção é mudar um pouco sua forma. Vamos dar uma olhada na versão final do projeto. Como você pode ver, a parte desta seção é cortada no canto inferior direito. Para conseguir isso, temos que usar uma das propriedades chamada clip-path com função de polígono Para escolher a forma e obter os valores adequados. Podemos visitar um dos sites. Vamos pesquisar CSS de clip-path. Em seguida, visite o primeiro link. Então, aqui está o site, ou você pode escolher qualquer forma que quiser e obter os valores adequados a partir daqui. No nosso caso, vou usar um pentágono porque aqui temos cinco pontos diferentes e podemos definir formas diferentes com a ajuda deles. Então, no nosso caso, precisamos de uma forma como esta. Precisamos cortar o canto inferior direito. Em seguida, pegue o código daqui e atribua-o ao elemento da seção Tudo bem, então considera-se que a forma foi alterada. E, na verdade, com esse elemento de seção, terminamos. Vamos seguir em frente e personalizar o logotipo. Vou inserir novos comentários para o logotipo. Em seguida, selecione Logotipo. Antes de tudo, vou cuidar da posição do logotipo. Ele será colocado no canto superior esquerdo da página. Então, vamos seguir em frente e definir sua posição como absoluta. Então, para definir sua posição de acordo com seu elemento pai, preciso atribuir a esta seção a posição relativa do elemento Em seguida, defina as propriedades superior e esquerda. Vou colocar os dois em três rodadas. Ok, então é considerado um logotipo posicionado. Em seguida, vou personalizar o ícone em si. Então, vamos selecionar elementos I. Primeiro, vamos aumentar o tamanho da fonte, torná-la em dez linhas e depois mudar a cor. Vou usar seu valor RGBA cor preta e com a opacidade Ok, isso é tudo sobre o logotipo. Vamos cuidar do Navbar. Vamos inserir novos comentários na barra de navegação. Agora a barra será colocada no canto superior direito. Vamos selecioná-lo e definir sua posição como absoluta. Em seguida, vou definir as posições superior e correta. Vamos definir a propriedade principal para três RAM. Quanto à posição correta, vamos fazer com que seja 10%. Ok, então a barra de navegação está posicionada, ela é colocada no canto superior direito Vamos personalizar o link, selecionar um link superior e aumentar o tamanho da fonte, transformando-o em Ram. Em seguida, vou criar espaço entre os itens de navegação usando margem. Em geral, o elemento de link é um elemento embutido e , portanto, a margem não será aplicada Portanto, precisamos criar links nos elementos do bloco de linha. Vamos definir a exibição como bloco embutido. Portanto, quando o elemento está em um nível de bloco embutido, você pode atribuí-lo com altura, E eles ainda se comportarão como um elemento embutido. Quero dizer, eles não ocuparão toda a largura do interior do contêiner e não serão colocados em linhas diferentes. Vamos definir a margem como zero na parte superior e inferior e três rem nos lados esquerdo e direito. Ok, depois disso, vamos mudar a cor dos links. E também vou criar um efeito de foco. Vou aumentar o tamanho dos elementos ao passar o mouse. Então, primeiro de tudo, vamos mudar a cor. Vou usar aqui, cor preta variável. Em seguida, selecione agora por link com o mouse. Então, para aumentar o tamanho dos elementos, vamos usar Transformar com a função de escala porque se aumentarmos o tamanho da fonte, ele empurrará outros itens e quebrará o layout. Então, vamos definir a escala para 1,5 e também usar a transição para um efeito suave. Precisamos nos transformar aqui. E como duração, vamos inserir 0,5 s. Tudo bem, é isso sobre o Napa Vamos seguir em frente e personalizar o banner. Vamos inserir seus novos comentários para o banner. Em seguida, selecione o banner com o banner da seção 1 da classe Então, vou alinhar os elementos verticalmente e também colocá-los no centro Para isso, vou usar o flexbox. Na verdade, usaremos essa técnica com frequência ao longo deste projeto. E para evitar usar as mesmas propriedades e valores repetidamente, vou criar uma nova classe e estilos comuns. Vamos chamá-lo de centro e atribuir a ele display flex. Em seguida, justifique o centro de conteúdo para centralização horizontal e também alinhe o centro dos itens para a Em seguida, atribua essa classe para fazer banner no documento HTML. Então, a única coisa que precisamos fazer é mudar a direção porque precisamos colocar elementos verticalmente em uma coluna Portanto, precisamos definir a direção da flexão para a coluna. Então, vamos considerar que os elementos estão alinhados. Vamos seguir em frente e personalizar cada um deles. Vou começar com um título. Vamos selecioná-lo. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos criar 13 RAM do que tornar a fonte mais clara. Defina a espessura da fonte para 300. Também transforme texto em maiúsculas e crie algum espaço entre as letras usando o espaçamento entre letras 0,5 rem. Ok, vamos ver o título. Vamos seguir em frente e personalizar o parágrafo. Vamos mudar o tamanho da fonte, criar para a RAM. Além disso, vou definir o peso da fonte para 400, depois criar espaço entre as letras, tornando-o 0,1 RAM E por último, vou criar algum espaço na parte superior e inferior usando a margem Vamos configurá-lo para seis rem na parte superior, zero no lado direito, antebraço na parte inferior e zero no lado esquerdo Ok, então vamos considerar que o parágrafo também tem estilo. E depois disso, vou personalizar esse elemento de extensão. Vamos selecioná-lo. Vou aumentar o tamanho da fonte. Vamos criar três RAM e, em seguida, criar algum espaço na parte inferior do elemento. Vamos definir a margem inferior para cinco rimas. Tudo bem, então o único elemento que vamos personalizar é esse botão aqui Então, vamos selecioná-lo. Em primeiro lugar, vou criar algum espaço dentro do botão usando o preenchimento Vamos configurá-lo para dois rem na parte superior e inferior e um fórum nos lados esquerdo e direito. Em seguida, vou aumentar o tamanho da fonte e transformá-la em Ram. Também altere a cor de fundo. Vamos usar aqui a cor preta. Então eu vou mudar a cor do texto. Vamos usar sua cor primária. Em seguida, altere a espessura da fonte, torne-a 400. Ok, vamos continuar e adicionar mais alguns estilos na parte inferior. Em seguida, vou criar algum espaço entre as letras. Vamos configurá-lo para 0,1 RAM. Além disso, vou me livrar da borda padrão. Vamos defini-lo como nenhum. Em seguida, faça com que os cantos do Bateson sejam ligeiramente arredondados usando o raio da borda com E, finalmente, mude o tipo do cursor, faça com que ele aponte para. Então, agora precisamos mudar a forma do padrão. Se dermos uma olhada no projeto finalizado, você verá que ele tem uma forma diferente. E sua forma muda. Depois de passar o mouse sobre o botão, vou usar novamente uma propriedade do caminho do clipe Mas não vou criar a forma manualmente porque pode demorar muito. Eu já preparei que eles precisavam de valores. Vamos apenas copiá-los e colá-los. Aqui. Vou anexar esse arquivo a esta palestra para que você possa encontrar facilmente esses valores Então, como você pode ver, a forma foi alterada. Agora precisamos criar um efeito de foco. Vamos selecionar o botão que passaria o mouse. Em seguida, pegue novamente os valores daqui. E, finalmente, use a transição. Precisamos aqui do clip-path e da duração de 0,5 s. Ok? Então, como você pode ver, temos aqui um belo efeito de passar o mouse e, com um banner, terminamos Agora, vamos cuidar dessa apresentação de slides 34. Projeto 4 - Criar apresentações de imagens de fundo: Tudo bem, então algumas partes da página de destino estão prontas Agora temos que cuidar dessa apresentação de slides da imagem de fundo Na maior parte da apresentação de slides em que participo, a funcionalidade será criada usando JavaScript No documento HTML, criará apenas um único elemento div que representará a apresentação de slides Então, vamos continuar e inserir novos comentários. Apresentação de slides e fora da apresentação de slides. E crie um elemento div com uma apresentação de slides de classe. Ok, isso é tudo sobre o HTML. Vamos seguir em frente e acessar o arquivo JavaScript. Também é instituir os comentários, apresentação de slides e fora da apresentação de slides Portanto, no geral, criaremos cinco desenvolvimentos e definiremos para cada desenvolvimento uma imagem de fundo. Poderíamos fazer isso usando HTML e CSS. Quero dizer, poderíamos criar cinco desenvolvimentos diferentes. E então poderíamos atribuir a cada um deles uma imagem de fundo do CSS Mas faremos o mesmo de forma mais conveniente e dinâmica com Tudo bem, vamos continuar e criar uma função. Vou chamar isso de ações de apresentação de slides. Então, como dissemos, criaremos cinco elementos div E para isso eu vou usar o for-loop. Vamos percorrer 1-5. E em cada iteração, criaremos um elemento div usando um dos métodos dome chamado Então, vamos criar para o loop. Então, precisamos aqui do contador I, que será igual a um. Então, como condição, precisamos I menor ou igual a cinco. E finalmente, eu mais, mais. Depois disso, vou criar uma nova variável. Vamos chamá-lo de div. Então, como dissemos, vamos usar um dos métodos de cúpula chamado create element Então, vamos usá-lo e depois especificar o nome da tag entre parênteses. Precisamos de profundidade. Ok, isso é sobre a criação de novos elementos. Agora temos que atribuir aos elementos recém-criados uma imagem de fundo adequada Para isso, vamos usar a propriedade de estilo. Precisamos atribuí-lo ao div. E então deve ser seguido pela imagem de fundo do nome da propriedade. Precisamos escrevê-lo em uma caixa de camelo. Então, agora precisamos definir o caminho da imagem. Se verificarmos nossa pasta de imagens , você encontrará aqui outra pasta chamada apresentação de slides, na qual temos cinco imagens de fundo diferentes Como você pode ver, a única diferença entre os nomes são esses números aqui. Portanto, precisamos definir dinamicamente todas essas imagens de fundo para os elementos div recém-criados Precisamos do seu URL e, em seguida, das imagens do nome da pasta. Em seguida, temos outra pasta, apresentação de slides. E então precisamos especificar o nome da imagem, que será a Seção 1, B, g. E em vez do número, temos que passar a variável i, seguida pela extinção JPG Então, na primeira iteração, eu serei igual a um e a primeira imagem de fundo será usada Em seguida, na segunda iteração, a segunda imagem será usada e assim por diante For loop continuará funcionando até que todas as cinco imagens sejam usadas. Tudo bem? Portanto, para adicionar elementos div recém-criados, para fazer o elemento div wrapper que criamos no documento HTML, precisamos usar outro método dome Primeiro de tudo, precisamos selecionar o invólucro. Vamos usar o método de seleção de consulta e especificar aqui a apresentação de slides do nome da classe Em seguida, anexado a ele o método chamado append child e como argumentos em seu D. Tudo bem, então, para executar essa função, precisamos chamá-la Portanto, se examinarmos a página e verificarmos a guia Elementos, você descobrirá que temos aqui cinco desenvolvimentos diferentes E cada um deles tem propriedade de imagem de fundo com a imagem adequada. Ok, então tudo funciona bem até agora. Agora, precisamos fazer essa apresentação de slides funcionar. No momento, as imagens de fundo não estão visíveis. Então, primeiro de tudo, vamos cuidar disso e escrever um pouco de CSS. Na verdade, vejo aqui que estou perdendo os comentários finais do banner por algum motivo E também não precisamos aqui desse comentário final de estilo comum. Então, vamos em frente e consertar essas coisas. Em seguida, insira seus novos comentários para a apresentação de slides. Em seguida, selecione os elementos div do wrapper. Em primeiro lugar, vou definir a largura e a altura. Vamos fazer os dois cem por cento e depois definir sua posição como absoluta. Além disso, precisamos definir as propriedades superior e esquerda. Ambos devem ser iguais a zero. No momento, as imagens ainda não estão visíveis porque não têm largura e altura. Então, vamos selecionar o próprio banco de dados e definir sua largura e altura, ambas em 200 por cento. Ok, então agora uma das imagens é exibida. O resto deles são colocados aqui embaixo, mas não são visíveis. Precisamos colocar todas as imagens umas sobre as outras. E para isso, vamos usar a posição absoluta. Além disso, vou usar algumas propriedades de fundo. O primeiro será o tamanho do plano de fundo. Precisamos configurá-lo para cobrir. Então, como posição do plano de fundo, vou usar o Centro. E também precisamos aqui repetir o plano de fundo com valor, sem repetição. Ok, então agora temos aqui um problema. O conteúdo da página de destino acabou ficando atrás das imagens e isso não é viável. Então, para corrigir isso, vamos usar a propriedade z-index com um valor menor que zero Então, vamos fazer com que seja menos um. Tudo bem, agora o problema está resolvido e temos que seguir em frente e fazer essa apresentação de slides funcionar Então, ocultaremos todas as imagens por padrão e as exibiremos usando opacidade Usaremos uma nova classe em CSS, onde definiremos a opacidade com o valor E adicionaremos essa nova classe aos desenvolvimentos em ordem a partir do JavaScript. Então, vamos ocultar todos os elementos div usando opacidade zero Então, como você pode ver, as imagens estão ocultas. Em seguida, vou exibir a primeira imagem por padrão. Para isso, usaremos a nova classe mencionada acima. Portanto, para atribuir à primeira classe de desenvolvimento, que será chamada de mudança, precisamos aqui de uma pequena declaração condicional Então, quando i é igual a um, significa que é a primeira iteração. O primeiro elemento div está criando. Esse é o momento em que precisamos atribuir a cada mudança de classe Então, para isso, precisamos aqui do operador AND. E então precisamos adicionar à mudança de classe de desenvolvimento. Para isso, vou usar uma das propriedades chamada lista de classes, que nos dá todas as classes que o elemento tem. E também nos permite ter acesso a alguns métodos diferentes. Um deles está em. Então, vamos especificar aqui a mudança de classe. Portanto, se verificarmos novamente a guia Elementos, você descobrirá que o primeiro elemento tem uma mudança de classe. Agora, para exibir a imagem, precisamos acessar o arquivo CSS, selecionar o elemento div com uma alteração de classe E precisamos definir a opacidade como uma. Ok, então você pode ver que a primeira imagem de fundo está visível. E agora, finalmente, temos que fazer essa apresentação de slides funcionar. Portanto, temos que remover e adicionar mudanças de classe aos elementos div em ordem com alguns intervalos E precisamos torná-lo infinito. Então, vamos ao arquivo JavaScript e selecionar todos os elementos div Vou criar uma nova variável, vamos chamá-la de d, dz. E então, para selecionar todos os elementos div, vou usar o seletor de consulta, todos os métodos Temos que especificar aqui a classe slideshow, seguida pelo nome da tag D. Ok, seguir vou criar uma nova função chamada slideshow, na qual temos que usar um dos métodos embutidos chamado set interval, que nos permite executar a função repetidamente com alguns Esse método usa dois argumentos. A primeira é a função de retorno de chamada, que será executada com intervalos Quanto ao segundo argumento será o intervalo em si. E isso deve ser expresso em milissegundos. Então, vamos inserir sua função de seta. E como a quantidade de tempo da integral, vamos inserir 1.000 milissegundos. Eventualmente, vamos mudá-lo e aumentá-lo. Então, agora precisamos selecionar o desenvolvimento que tem a mudança de classe. Em seguida, precisamos remover a classe desse elemento e adicioná-la ao próximo elemento div Então, vamos criar uma nova variável. Vou chamá-lo de div e, em seguida, selecionar o desenvolvimento usando o método querySelector Temos que especificar aqui a apresentação de slides em vidro seguida pela mudança de classe. Então, uma vez selecionado o elemento div com mudança de classe , precisamos remover a classe desse elemento Portanto, precisamos novamente da propriedade da lista de classes. Mas neste caso com o método chamado remove, vamos especificar aqui a mudança de classe. E, finalmente, temos que adicioná-lo aos próximos elementos div. Para isso, vou usar uma das propriedades chamada irmão do próximo elemento Precisamos anexá-la aos elementos div Então, novamente, temos que usar a menor propriedade de classe e precisamos adicionar a mudança de classe. Então, para executar esse código, precisamos chamar a função slideshow Tudo bem, como você pode ver, após cada segundo, a imagem de fundo está mudando Quando todas as cinco imagens são exibidas , recebemos um erro e essa apresentação de slides para de funcionar. Isso acontece porque, quando alcançamos o último elemento , o mecanismo JavaScript não consegue encontrar outro irmão Isso não existe. Então, quando chegarmos à última imagem de fundo, precisamos recomeçar esta apresentação de slides a partir da primeira imagem de fundo. Então, vamos em frente e fazer isso. Precisamos criar uma nova variável que será o contador. Nesse caso, vou usar a declaração Let's porque seu valor mudará. Vamos chamar essa variável de a e por padrão, torná-la igual a um. Então, precisamos aumentar o contador em um. E uma vez que é maior que o comprimento dos elementos div, isso significa que precisamos começar essa apresentação de slides com a primeira E temos que fazer um igual a um novamente. Portanto, para aumentar a em um, precisamos usar o operador de incremento, que é expresso por sinais duplos de adição Em seguida, precisamos criar instruções IF nas quais precisamos comparar se a for menor que dois do comprimento dos elementos div Então, se for verdade, significa que ainda existem outros desenvolvimentos. Então, temos que executar essa linha de código. Se for falso, significa que não temos mais outro irmão E temos que começar a apresentação de slides com a primeira imagem. Portanto, precisamos da declaração Q else, na qual temos que acessar o primeiro desenvolvimento e adicionar a ele uma mudança de classe. E também precisamos fazer um igual a um. Portanto, para selecionar os primeiros elementos div, precisamos de desenvolvedores seguidos pelo índice número zero Então, precisamos novamente da propriedade da lista de classes com o método add. E temos que especificar sua mudança de classe. Além disso, precisamos fazer um igual a um. Agora você pode ver que a apresentação de slides está sendo executada infinitamente sem erros E precisamos criar algum efeito de desvanecimento para isso. Vamos usar a transição. Vamos atribuir a opacidade e a duração de 1 s. Então agora tudo funciona perfeitamente. Então agora tudo A única coisa que vou fazer é aumentar a quantidade do intervalo. Vamos fazer 20 s em vez de um. E também aumentou a duração da transição. Faça 5 s. Ok, então é isso. Esta apresentação de slides foi criada e funciona bem. Então, vamos seguir em frente. 35. Projeto 4 - Criar e personalizar Cubo: Tudo bem, então, quando terminarmos essa apresentação de slides, temos que seguir em frente e cuidar da última parte da página de destino, que vai superar a caixa Vou chamá-lo de cubo. Na verdade, em matemática real, é chamado de cubóide, mas, para simplificar, vou chamá-lo apenas Então, como você pode ver, ele tem uma forma 3D. Por padrão, ele é rotativo. Lá embaixo. Temos controladores. Assim que passarmos o mouse sobre eles, o cubo parará E então podemos girá-lo usando esses controladores em lados diferentes. Vamos sentar o que vamos fazer. Todas essas coisas serão criadas usando CSS e JavaScript puros. Primeiro de tudo, vamos criar uma marcação HTML. Temos que escrevê-lo antes do banner porque ele será colocado no lado esquerdo do empréstimo Em primeiro lugar, vamos criar novos comentários, cubo e fora do cubo Em seguida, abra os elementos, que serão o invólucro Então, vou atribuir a ela a classe Cube Wrapper. Em seguida, precisamos de outro div, que será o próprio cubo Depois disso, vou criar outro elemento div, que será a parte frontal E incluirá uma imagem do iPhone 12. Então, vamos inserir sua imagem e selecionar iPhone dot PNG na pasta de imagens. Em seguida, precisamos criar uma parte traseira. Então, vamos abrir outra tag div com o verso da classe. Na parte de trás, teremos um ícone da maçã. Então, vamos inserir seu elemento ocular com uma classe FAB, FA, apple Tudo bem, então isso é tudo sobre a marcação do cubo. Cuidaremos dos controles um pouco mais tarde porque agora vou estilizar o cubo Vamos continuar e inserir seus novos comentários. Cubo e do cubo. Em seguida, selecione o cubo e defina sua largura e altura. Vou definir a largura para jogar no RAM. Quanto à altura, vou fazer com que seja 55 rampa. E também vou atribuir a ele uma cor de fundo temporária Vamos torná-lo vermelho. Então, aqui temos o fundo vermelho. No momento, a imagem está muito grande, então vamos cuidar dela. Vou selecionar a primeira parte frontal e definir sua largura e altura, ambas em 200%. Em seguida, crie algum espaço dentro da parte frontal usando o preenchimento Vamos fazer 2,5 rem nos quatro lados. Depois disso, vou selecionar a imagem. Vamos definir sua largura e altura. Vou definir para os dois 200 por cento. E também vou usar pés de objeto com o valor contido. Ok, agora a imagem ficou menor e vemos aqui o fundo vermelho do cubo Em seguida, vou cuidar da parte frontal. Então, vamos mudar a cor de fundo. Vamos usar sua cor F E. Em seguida, vou criar um ambiente 3D para ver melhor como o cubo será construído Para criar um ambiente 3D, precisamos usar uma das propriedades chamada prospectiva e atribuí-la ao invólucro do cubo Então, vamos selecioná-la e depois usar a perspectiva com a rampa de valor 100 Em geral, a perspectiva da propriedade define a distância entre o elemento e o usuário. Agora temos que nos mover com a parte frontal em um ambiente 3D. E para isso, também precisamos de espaço para a parte frontal. E para isso, temos que usar uma das propriedades chamadas estilo de transformação com o valor preservado 3D. Temos que atribuí-lo ao cubo. Depois disso, ele compartilhará o ambiente 3D com seus elementos secundários. Tudo bem, depois disso, temos que mover a parte frontal e um pouco para a frente Então, para isso, vou usar Transform, onde eles traduzem a função e, como valor, Let's entity or five ran. No momento, nada está visível aqui, só temos um fundo branco. Então, para ver claramente o que está acontecendo, vou girar o cubo Vamos girá-lo de acordo com o eixo y. E como valor, vamos inserir, digamos 72 graus. Certo? Agora você pode ver claramente a parte frontal do cubo no espaço 3D. Vamos em frente e cuidar da parte traseira. Vou definir sua largura e altura, ambas em 200%. Também altere a cor de fundo. Use aqui as cores F, E. E, novamente, precisamos mover a parte traseira como a parte frontal Nesse caso, precisamos traduzir uma função com o valor menos cinco rodadas Então, aqui temos a parte traseira, mas sua posição não está correta Precisamos corrigir isso. E para isso, vamos definir as posições de ambos os lados como absolutas. Na verdade, como você pode ver, maioria das propriedades e valores são iguais para os dois lados. Então, podemos adicionar aqui a parte traseira. Em seguida, podemos selecionar a parte frontal separadamente. Vamos atribuir propriedades de preenchimento e transformação 2D. Quanto à parte traseira, vamos deixar que você transforme a propriedade Ok, então agora os dois lados parecem bons. Para ver melhor, vou inspecionar a página e usar a guia Elementos Vamos selecionar o cubo. Em seguida, abaixo, foque o valor da função Rotate. E, em seguida, usando a seta superior, vamos alterar o valor. Assim, é possível ver que o cubo está girando e os dois lados estão bem Ok, antes de passar para os outros lados, vou personalizar o ícone de abril na parte traseira Primeiro de tudo, vamos cuidar disso. A posição do ícone. Vou colocá-lo no centro da parte traseira. Então, vamos continuar e usar o centro de aula. Na verdade, vamos alterar o valor da função de rotação para ver o ícone Bem, vamos fazer 140 graus. Ok, vamos continuar e estilizar o ícone. Vamos selecioná-lo. No início. Vamos aumentar o tamanho da fonte, fazer com que ela rime 12 Em seguida, mude a cor. Nesse caso, vou usar a cor primária. Além disso, vamos usar sombra de texto. Vou criar uma sombra de vários níveis. O primeiro será 0,1 rem duas vezes, depois aponte para RAM. E a cor AAA. Quanto à segunda sombra , será a sombra esquerda. Então, vamos inserir aqui -0,1 grama duas vezes e, em seguida, apontar para a RAM com a mesma cor Portanto, o ícone está estilizado, mas, como você pode ver, precisamos girá-lo em 180 graus Então, vamos usar Transform com a função girar y e, como valor, vamos inserir seus 180 graus. É isso sobre a parte traseira. Agora temos que cuidar dos outros lados. Em seguida, vou cuidar dos lados superior e inferior e os criaremos usando pseudoelementos antes e depois Em primeiro lugar, vou girar o cubo de uma maneira diferente para exibir os dois lados Então, vamos mudar, girar y para dentro, girar x como valor positivo Vamos inserir aqui 91 graus. Então, agora, a parte inferior está perto de nós. E eu vou tirar você da parte superior, vou criá-lo usando o pseudo elemento anterior Então, vamos selecionar a parte frontal com ela antes dos pseudoelementos Antes de tudo, vamos definir o conteúdo, deixá-lo vazio. Em seguida, vou definir, podemos ocultar essa largura definida em 100%. Quanto à altura, vou fazer com que ela gire. E também altere a cor de fundo. Faça com que seja F E. No momento, o elemento não está visível. Temos que definir sua posição. Então, vamos definir sua posição como absoluta. Depois disso, defina as propriedades superior e esquerda Vamos tornar ambas zero. Tudo bem? Como você pode ver, o elemento ainda não está visível. Isso acontece porque o ambiente 3D não é compartilhado com o pseudo-elemento anterior E para corrigir isso, temos que usar novamente o estilo de transformação preservado 3D e atribuí-lo ao elemento pai Em seguida, abaixo, gire os elementos de acordo com o eixo x em -90 graus Agora, o elemento está visível, mas não está posicionado corretamente porque é girado de acordo com o centro É a origem padrão da transformação. Então, temos que mudá-lo e torná-lo o topo. Precisamos transformar a origem no topo do valor. Tudo bem, então isso é tudo sobre o lado superior. Vamos seguir em frente e cuidar da parte inferior. Na verdade, a maioria das propriedades e valores serão os mesmos para os dois lados. Então, vou adicionar aqui depois dos pseudoelementos Em seguida, selecione-os antes dos pseudoelementos separadamente Pegue essas quatro propriedades e cole-as aqui. Então eu vou duplicar esse código. Mude o antes para o depois. Então precisamos de baixo em vez de cima. Em seguida, vamos nos livrar do sinal de menos a partir daqui. Como provavelmente, a origem da transformação será inferior. Ok? Então, se girarmos o cubo, você verá que os lados superior e inferior estão prontos Vamos seguir em frente e cuidar dos lados esquerdo e direito. Vou criá-los usando pseudoelementos antes e depois da parte traseira Então, vamos girar novamente o cubo de acordo com o eixo y. Com o valor -91 graus. Vamos criar esses lados. Da mesma forma, vamos começar com o lado esquerdo. Vou criá-lo usando o pseudo elemento anterior. Então, vamos selecionar o verso com o pseudo-elemento anterior como conteúdo Vou inserir seu iPhone. Em seguida, defina a largura e a altura. Vou definir a largura para virar. Quanto à altura, vamos torná-la 100%. Em seguida, mude a cor de fundo, torne-a F. Então agora, o lado esquerdo não está visível porque, novamente, precisamos usar as posições e a função de rotação Então, vamos definir a posição como absoluta. Em seguida, defina as propriedades superior e esquerda. Vou definir os dois como zero. E depois disso, precisamos transformar com a função rotate y com o valor -90 graus Agora o elemento está visível, mas como você pode ver, novamente, temos que mudar a origem da transformação. Vamos colocá-lo para a esquerda. Ok, agora o elemento está posicionado e agora temos que cuidar de seu conteúdo. Vou mandar uma mensagem para o iPhone. Antes de tudo, vamos girar novamente o cubo. Vamos nos livrar do sinal de menos a partir daqui. E então vá em frente e personalize o texto. Vou colocá-lo no centro. Para isso, vamos usar o flexbox. Precisamos de display flex. E para uma centralização perfeita, precisamos usar a central de conteúdo justify, seguida pela central de alinhamento de Depois disso, vamos aumentar o tamanho da fonte e transformá-la em Ram. Além disso, vou deixar a fonte com peso 300, um pouco mais leve. E como cor, vamos usar sua cor EC 1919 Tudo bem, isso é tudo sobre o lado esquerdo. Agora, da mesma forma, temos que criar o lado direito, que será semelhante ao esquerdo. Então, vou adicionar aqui depois dos pseudoelementos. Em seguida, selecione antes dos pseudoelementos separadamente. E pegue essas quatro linhas daqui. Depois disso, selecione depois dos pseudoelementos e insira as seguintes propriedades e valores que precisamos acima de zero e, em seguida, escreva zero Então, precisamos transformar a rotação y com 90 graus. E, por fim, precisamos transformar a origem em valor, certo? Ok, então isso é tudo sobre o cubo. Todos os lados estão preparados. Se eu girá-lo de acordo com as duas direções , você verá que todos os sites foram criados Agora, vou me livrar da cor de fundo vermelha do cubo Vamos removê-lo. Além disso, vou criar uma caixa-sombra para exibir as bordas desses lados Então, primeiro, crie uma sombra para os lados frontal e traseiro. Será uma sombra de vários níveis. Em primeiro lugar, precisamos que aqui a inserção seja sombra interna com os valores 0,1 RAM três vezes e a cor D, D, D. Em seguida, copie esse valor e cole aqui E insira o sinal de menos, onde estão os dois primeiros valores Também precisamos da mesma sombra para os pseudoelementos antes e depois. Então, vamos pegar esse código e colar para eles. Ok? Se girarmos novamente o cubo, você verá que tudo parece bem Certo? Em seguida, vou personalizar os controles e também fazer o cubo funcionar 36. Projeto 4 - Criar e personalizar controladores de cubo: Tudo bem, uma vez que criamos os clientes finais, o cubo, agora eu vou cuidar dos controles Vamos continuar e criar uma marcação HTML. Os controles farão parte do invólucro do cubo, então precisamos inseri-lo dentro dele Vamos criar seus comentários, controles de controles. Em seguida, abra os elementos div com os controles de classe. Então, no geral, teremos seis controles diferentes. Eles serão representados pelos ícones Font Awesome e serão agrupados com os elementos do link. Então, vamos em frente e abrir a tag do link. Então institua o elemento IS com uma classe é FAS, uma seta para cima. Além disso, vou acrescentar outra aula. Na verdade, giraremos o cubo acordo com a direção x com Então, vou inserir seu controle X superior. Então, como dissemos, teremos seis flechas. Então, vamos duplicar o elemento de link cinco vezes e depois alterar os nomes das classes A segunda será uma seta para baixo do que precisamos aqui, controle X inferior. A próxima será a seta para a esquerda. Esquerda. Por que controlar o que precisamos de você? Seta para a direita e para a direita? Por que controlar? O próximo deve ser reduzido. Controle Z. Superior. E para o último, precisamos do controle Z de seta para cima e inferior. Ok, então aqui temos nossos controles. Vamos em frente e personalizá-los. Vou inserir aqui novos comentários, controles e controles. Em seguida, selecione elementos div do wrapper. Então, primeiro de tudo, vou cuidar da posição dos controles. Vamos definir sua posição como absoluta. Na verdade, os controles devem ser posicionados de acordo com o elemento principal, que neste caso é um invólucro de cubos Você pode pensar que precisamos uma posição relativa para o invólucro, mas, por causa disso, é um item flexível Lembre-se de que o elemento de seção tem flexibilidade de exibição, então não precisamos mais da posição relativa do invólucro do cubo porque você pode mostrar que estaremos posicionados de acordo com o invólucro do cubo posicionados de acordo com o invólucro do Então, vamos definir as posições inferior e esquerda. Vou definir o fundo para -15 RAM. Quanto à esquerda, serão 50%. E então, para enviar para os elementos, precisamos mover oito para o lado esquerdo em -50 por cento Então, precisamos aqui transformar, traduzir X com o valor -50 por cento Portanto, o invólucro dos controles está posicionado corretamente. Vamos seguir em frente e personalizá-lo. Vou defini-lo dentro da altura. Vamos definir os dois para dez RAM e também alterar a cor de fundo. Nesse caso, vou usar valor RGBA com a cor preta e com a opacidade Depois disso, vou fazer o plano de fundo ao redor e também criar a borda. Portanto, precisamos aqui de um raio de borda com um valor de E então crie uma borda com os valores de uma RAM, sólida. E como cor, vou usar novamente o valor RGBA, a cor preta e a opacidade Tudo bem, vamos sentar sobre a embalagem. Na verdade, precisamos de algum espaço entre o cubo e os controles Então, vamos mover o cubo para cima. Vou atribuir a cada posição relativa. Em seguida, defina a posição superior para menos duas RAM. Portanto, no caso da posição relativa, o elemento subirá em duas rampas a partir de sua posição atual Ok, vamos em frente e personalizar as setas. Em primeiro lugar, vou cuidar de suas posições. Vamos selecionar o elemento de link e , em seguida, definir a posição como absoluta. Em seguida, vou definir a posição cada seta separadamente. Então, vamos começar com os primeiros elementos do link. Vou selecioná-lo usando o nono seletor de filhos. Precisamos especificar aqui um para o primeiro elemento de link. Então, essa seta será colocada no centro, na parte superior da embalagem Então, vamos definir a posição superior como zero. E então precisamos novamente da posição esquerda de 50%. E então transforme translate x -50%. Ok, então a primeira seta está posicionada, mas como você pode ver agora, ela não está bem visível. Então, vamos resolver esse problema. Vou selecionar os elementos I. Vamos aumentar o tamanho da fonte, torná-la 1,5 RAM. Em seguida, mude a cor. Você vê sua cor primária. Além disso, vou diminuir a opacidade. Vamos fazer 0,5. Ok, agora, como você pode ver, parece muito melhor. Vamos seguir em frente e posicionar a segunda seta. Ele será colocado no centro, mas na parte inferior da embalagem Então, vamos duplicar esse código aqui. Mude um em dois. E também precisamos aqui da posição inferior com o valor zero. Ok, vamos seguir em frente e posicionar a terceira seta. Ele será colocado no centro, mas no lado esquerdo da embalagem Então, vamos selecionar o terceiro elemento de link e, em seguida, definir a posição difícil. Faça com que seja 50 por cento. A posição esquerda será zero. E então, para enviar para os elementos, precisamos transformar novamente. Mas, neste caso, precisamos traduzir a função acordo com a direção Y com o valor -50% A próxima seta também será colocada no centro, mas no lado direito. Então, vamos continuar e duplicar esse código. Serão os elementos do quarto link. E precisamos ouvir a posição correta com o valor zero. Ok? Então, como você pode ver, quatro setas ou posição, sobraram, apenas duas delas. Vamos seguir em frente e selecionar a quinta seta. Na verdade, ele será colocado no meio dessas duas setas. Portanto, precisamos aqui da posição superior e da posição correta, ambas dez por cento. Então, precisamos nos transformar. Mas neste caso, vou usar a função de rotação Vou girar o elemento em 45 graus. Ok? Então, precisamos posicionar o último ícone. Vamos duplicar esse código aqui. Será o sexto item. Em vez de cima e direito, precisamos aqui de Boltzmann Então, como você pode ver, todas as seis setas estão prontas, elas estão posicionadas A única coisa que precisamos fazer é criar um pequeno efeito de foco Vou aumentar a opacidade dos ícones de volta para um Então, vamos selecionar controles. Um mouse, seguido pelos elementos I. Vamos definir a opacidade como uma. Em seguida, use a transição com os valores opacidade 0,5 s. Ok, vamos ver, os controles são personalizados e agora temos que fazê-los funcionar. Então, vamos seguir em frente. 37. Projeto 4 - Faça trabalho do cubo: Tudo bem, então tudo está pronto para começar a programar o cubo e os controles Primeiro, vou fazer o cubo girar automaticamente e depois programaremos os controles No momento, o cubo é girado com a direção y em 91 graus Então, vou comentar essa linha. Próximo. Vamos ao arquivo JavaScript e inserir novos comentários para o cubo Em seguida, selecione o cubo. Vou criar uma nova variável. Vamos selecionar o cubo usando o método querySelector. Precisamos especificar aqui o nome da classe q. Então, giraremos o cubo de acordo com o eixo y em um grau E vamos girá-lo com intervalos muito pequenos. Quero dizer, apenas cem milissegundos. Então, vou criar uma nova função. Vamos chamar isso de pose de jogo. Vamos criar uma nova variável e atribuir a ela uma função de seta. Agora, precisamos usar um método chamado set interval. Como você sabe, são necessários dois argumentos. A primeira é uma função de retorno de chamada, que será executada com alguns intervalos Quanto ao segundo, é a quantidade do intervalo em si. Então, como dissemos, o intervalo será de 100 milissegundos. Tudo bem, agora temos que girar o cubo de acordo com o Portanto, precisamos usar a propriedade de estilo. Vamos anexá-lo ao cubo e ele será seguido pelo transporte Agora temos que especificar o valor da função de rotação. Como dissemos, precisamos girar o cubo um grau após cada intervalo Para fazer isso, primeiro vou criar uma nova variável. Vamos chamá-lo de y e, por padrão, defini-lo como zero. Em seguida, precisamos passar aqui, girar a função y. Então, após cada intervalo, precisamos aumentar o valor em um. Então, precisamos aqui do cifrão. Então precisamos da variável y. E para aumentá-la em um, temos que usar aqui o operador de incremento, que é expresso por sinais duplos de mais Será seguido por graus. Ok? Agora vamos chamar a função. Então, como você pode ver, o cubo está girando Se inspecionarmos a página e verificarmos o cubo na guia de elementos, você verá que após cada cem milissegundos, o valor da função de rotação aumenta No momento, o efeito de rotação não parece muito bom porque precisamos usar a transição. Então, vamos inserir sua transformação e a duração de 0,5 s. Tudo bem, agora temos um efeito muito melhor Em seguida, vou cuidar dos controles. Na verdade, usaremos uma técnica similar. Vamos girar o cubo em direções diferentes. Mas, nesse caso, faremos isso quando clicarmos nos controles Vamos anexar a cada seta o ouvinte de eventos com o evento de clique Vamos começar com o controle superior. Precisamos anexar um evento de clique aos elementos do link. No vídeo anterior, adicionamos classes adicionais aos elementos I e na verdade, seria melhor se atribuíssemos essas classes para criar elementos de link Porque, novamente, precisamos selecionar elementos de link e não o ícone. Então, vamos atribuir essas classes como elementos enxutos. Rapidamente. Vou recortá-los e colá-los como valores dos atributos da classe. Tudo bem, depois disso, vamos selecionar os primeiros elementos do link Vou usar novamente o método seletor de consulta. E então especifique aqui o controle X superior da classe e o parantese Em seguida, vou anexar a ele um ouvinte de eventos com o evento de clique E também temos que passar aqui a função de seta, que será executada assim que clicarmos no ícone. Então, uma vez que clicamos no controle superior, precisamos girar o cubo na direção x. Então, vou pegar essa linha de código daqui. Em seguida, transforme y em x. Aqui. Não precisamos do sinal de mais porque vamos aumentar o valor em um, mas em 20 graus. Então, podemos escrever aqui ou x é igual a x mais 20. Nesse caso, o valor aumentará em 20 em cada clique. Ou podemos simplesmente escrever aqui mais é igual. Essas expressões são as mesmas. Ok? Além disso, precisamos criar uma nova variável. Vamos chamá-lo de x e defini-lo como zero. Na verdade, antes de programarmos todos os controles, vou pausar essa função por um tempo para ver melhor os resultados Então, se clicarmos no controle superior, o cubo girará com a direção x Ok, vamos em frente e fazer o mesmo com o controle inferior. Vamos duplicar esse código. Mude a parte superior para a parte inferior. E também, em vez do sinal de mais, precisamos aqui de menos, porque precisamos girar o cubo na Ok, então tudo funciona bem. Vamos seguir em frente e programar o controle esquerdo. Vamos duplicar esse código mais uma vez. Precisamos aqui à esquerda y. Também mude a direção. Precisamos do eixo y. Agora, se eu clicar no controle esquerdo, o cubo girará Mas temos aqui um pequeno problema se clicarmos seta para a esquerda e, em seguida, se clicarmos no controle superior, primeiro o cubo obterá sua posição padrão e depois girará Não precisamos disso. Precisamos manter a posição anterior do cubo. E para fazer isso, precisamos definir todas as três direções independentemente da direção em que estamos mudando. Então, precisamos adicionar aqui a rotação y. Vamos inserir seus graus y. Em seguida, precisamos girar Z. Com graus Z. Com Na verdade, precisamos criar uma variável para a direção z. Então, vamos criá-lo e defini-lo como zero. Ok, vamos adicionar a função de rotação aqui também. Precisamos girar x e depois girar z. Ok? Precisamos girar x e depois girar z. Ok? Então, agora, se verificarmos, você verá que tudo funciona perfeitamente. Tudo bem. Vamos continuar e cuidar do resto dos controles. Vamos duplicar esse código e mudar da esquerda para a direita. E também em vez do sinal de menos aqui, mais. Tudo bem, então o controle correto funciona bem. Vamos seguir em frente e programar essas duas setas. Vamos duplicar esse código mais uma vez. Então, precisamos aqui do topo Z. Então, neste caso, precisamos girar o cubo na direção Então eu vou morar aqui apenas y. Quanto à função de rotação Z, precisamos aqui, z menos é igual Ok? Portanto, esse controle funciona bem. Vamos seguir em frente e cuidar do último. Vamos duplicar esse código aqui. Em seguida, mude de cima para baixo. E também em vez do sinal de menos, vamos inserir aqui mais Tudo bem, então todos os controles funcionaram perfeitamente. Estamos quase terminando com o cubo. Só precisamos acrescentar mais algumas coisas. Vamos nos livrar dos comentários daqui. Como você pode ver, a propriedade transform tem apenas a função rotate y aqui. Portanto, precisamos adicionar aqui outras direções também. Caso contrário, não funcionará corretamente. Então, precisamos aqui girar x e depois girar Z. Tudo bem, agora A única coisa que vou fazer é impedir que o cubo gire Uma vez que passamos o mouse sobre os controles. Para isso, precisamos criar uma nova variável que terá o valor booleano Vamos defini-lo como verdadeiro. E então precisamos criar uma instrução if-else dentro da função Como condição, vou inserir sua piscina. Então, se for verdade, então temos que executar essa função. Então, vamos pegar esse código e colá-lo aqui. E então, se for falso, precisamos de uma instrução else na qual devemos parar executar essa função usando o método clear interval Portanto, para limpar o intervalo primeiro, precisamos armazená-lo na variável e depois passar essa variável para a função integral clara. Então, vamos continuar e criar uma nova variável. Precisamos declará-lo sem nenhum valor. Em seguida, armazene e venda a função integral nessa variável. E, finalmente, passe-o para a função integral clara na declaração else. Então, agora, tudo funciona bem. O cubo está girando. Mas se alterarmos o valor da variável de inicialização e atribuirmos a ela false por padrão, o cubo deixará Ok, vamos voltar aqui também. Agora precisamos usar o mouse sobre o evento. Vamos seguir em frente e selecionar os controles. Vou usar novamente o método querySelector. Vamos especificar aqui os controles da classe e , em seguida, inserir o ouvinte de eventos com o mouse sobre o Então, uma vez que passamos o mouse sobre os controles , temos que parar de girar. Portanto, temos que definir Boolean como verdadeiro, falso. E também precisamos chamar novamente a função para limpar o intervalo e parar de girar Agora, se eu passar o mouse sobre os controles, o cubo vai parar Mas quando tivermos o mouse, ele não continuará girando, precisamos corrigir isso Vamos duplicar esse código e alterar o evento. Precisamos tirar o mouse. E também, em vez de falso, precisamos que você o faça. Ok, agora tudo funciona perfeitamente. A única coisa que vou fazer é alterar o valor da variável y. Vamos fazer 20, porque assim que recarregarmos a página, quero que o cubo seja ligeiramente girado no ponto Além disso, precisamos alterar esse valor do CSS por padrão. Então, vamos nos livrar do comentário daqui e adicionar aqui as funções girar x e girar Z. Precisamos definir os dois como zero. Quanto à rotação y, será de 20 graus. Ok? Então é isso. Tudo funciona perfeitamente. E, na verdade, terminamos de trabalhar no cubo. Vamos seguir em frente e tirar você da próxima seção. 38. Projeto 4 - Criar e personalizar a seção de iPhones: Tudo bem, quando terminarmos a primeira seção, agora é hora de seguir em frente e criar a próxima Vamos dar uma olhada na versão final do projeto. Esta seção será relativamente simples. Teremos alguns elementos, como título. Em seguida, as imagens que mudam mouse com algum efeito de desbotamento E esses dois botões também com o efeito de foco. Ok, então é isso que vamos criar. Vamos começar a criar uma marcação HTML. Vou inserir novos comentários, seção dois e seção dois. E, em seguida, abra o elemento da seção com uma classe, seção dois. Em seguida, teremos o título. E, na verdade, vou separar todas as partes desta seção novamente com comentários. Então, vamos inserir um grande título da seção dois do título da seção dois. Em seguida, abra a tag H1 com um título da seção dois da classe com o conteúdo iPhone 12 Ok, a seguir teremos as imagens. Vamos inserir novamente novos comentários, seção duas imagens. Em seguida, final da seção para imagens. E abra a tag div, que será o invólucro que vou atribuir aos iPhones da classe Então, vou inserir você para adiar os elementos da imagem. Vamos abrir a primeira e selecionar a imagem. Temos uma pasta chamada imagens. Então, dentro dessa pasta, temos outra pasta chamada iPhones, onde precisamos selecionar iPhones um, Im2 Também vou atribuir ao elemento de imagem o atributo de classe com um valor iPhone IMG one Vamos duplicar o elemento da imagem e alterar o nome da imagem Precisamos aqui de iPhones para IMG. E também vou mudar o nome da turma. Precisamos aqui, img2. Ok, isso é tudo sobre as imagens. Em seguida, precisamos criar a última parte desta seção. Quero dizer, os botões. Então, vamos criar novos comentários. Seção dois botões e, em seguida, final da seção dois botões. Em seguida, abra a tag div, que será o invólucro Vou atribuir a ela a classe iPhone BTS. Portanto, teremos dois botões diferentes e eles serão apresentados pelos elementos do link. Então, vamos abrir uma tag com a classe iPhone btn. Além disso, precisamos do elemento span para cada botão. Eles serão exibidos quando passarmos o mouse sobre os botões como conteúdo, vamos inserir Você aprenderá mais do que duplicar elementos e alterar o conteúdo do elemento span Precisamos comprar aqui. Ok, então isso é tudo sobre a marcação HTML. Vamos seguir em frente e começar a escrever um pouco de CSS. Vamos inserir seus novos comentários para a seção dois. Em primeiro lugar, vou definir largura e altura. Vamos selecionar dois elementos da seção e definir a largura como 100%. Quanto à altura, vou fazer com que seja 120% da janela de visualização Além disso, vamos criar algum espaço na parte superior e inferior desta seção usando o preenchimento Vamos configurá-lo para 10% da janela de exibição na parte superior e inferior e zero nos lados esquerdo e direito Portanto, a altura dessa seção é 120% da janela de visualização. Mas a constante em si ocupa 100 pontos de altura da janela de visualização. Um acolchoamento na parte superior e inferior nos dá espaço entre as seções Porque a propriedade box-sizing está definida como border-box em Logo depois disso, vou alinhar os elementos usando o Flexbox Então, vamos configurar a tela como flexível. Em seguida, precisamos alinhar os elementos verticalmente em uma coluna, então precisamos mudar a direção do fluxo Vamos fazer disso uma coluna. Em seguida, vou alinhar os itens no centro horizontalmente usando alinhar Por fim, para criar algum espaço ao redor dos itens flexíveis, vamos usar o conteúdo justificado com o espaço de valor ao Ok, isso é tudo sobre esse elemento da seção. Vamos seguir em frente e personalizar o título. Vamos instituir novos comentários. Título da seção dois. Do título da seção dois. Em seguida, selecione os elementos do título e aumente o tamanho da fonte, tornando-o em dez RAM. Em seguida, vou tornar a fonte mais clara usando a gramatura da fonte. Vamos fazer 200. Além disso, vamos definir a cor do texto para preto. Tudo bem, isso é tudo sobre o título agora, vamos seguir em frente e cuidar das imagens Vamos inserir novos comentários. Seção duas imagens. Em seguida, e fora da seção duas imagens. E selecione os elementos div do wrapper, que tem a classe Vou definir largura e altura. Vamos definir a altura para 60% da janela de visualização. Isso é para a largura. Vou fazer com que seja 50% da janela de visualização Precisamos de 50 janelas de visualização de largura. Ok, em seguida, vou selecionar a imagem em si. E precisamos definir largura e altura. Nesse caso, vou herdar os dois valores. Portanto, precisamos herdar a largura e a altura. E também vou usar objetos que contêm. Agora, os tamanhos das imagens são menores. E em seguida, vou colocá-los um em cima do outro. Para isso, vamos usar a posição absoluta. Ok, por enquanto isso é tudo sobre as imagens. Vamos seguir em frente e personalizar os botões. Vou inserir novos comentários. Seção dois botões. E da seção dois botões. Em seguida, selecione os elementos div do wrapper. Então, eu vou me alinhar. Mas, como usamos o flexbox , precisamos aqui do display flex Depois disso, vou personalizar o botão em si. Então, vamos selecioná-lo. Mas antes disso, vamos ocultar os elementos de extensão por um tempo Vamos selecioná-los e definir a propriedade de exibição como nenhuma. E então comece a personalizar os botões. Em primeiro lugar, vou definir a largura e a altura, ambas com seis RAM. Em seguida, mude o plano de fundo. Vou usar seu gradiente linear. Antes de tudo, vamos definir a direção da transição. Eu vou fazer isso para a direita. Em seguida, use a primeira cor. Nesse caso, vou usar o valor RGB. Vamos inserir suas 5013 vezes. E também vou inserir um valor adicional, 60%, o que significa que a transição dos chamadores começará após 60% da primeira cor Em seguida, vou inserir a segunda cor. Use novamente o valor RGB. Vamos inserir aqui duas a três vezes. Em seguida, vamos criar algum espaço entre os botões e também torná-los arredondados. Use margem. Vou definir como zero na parte superior e inferior, e depois três rem nos lados esquerdo e direito. Quanto ao raio da borda, vamos configurá-lo Ok, agora é isso sobre os botões. Em seguida, vou criar essas molduras dentro dos botões usando os pseudoelementos posteriores Então, vamos selecionar iPhone btn, seguido pelos pseudoelementos posteriores Antes de tudo, precisamos definir o conteúdo. Vamos esvaziá-lo. Em seguida, vou definir a largura e a altura. Vamos definir os dois em 50%. Além disso, vou configurar a exibição para bloquear para viabilizar os elementos E, por fim, crie uma borda com o valor 0,1 RAM sólida E como cor, vamos usar seis E D a, E6. Então, aqui temos as molduras, mas como você pode ver, precisamos fixar suas posições. Eles devem ser colocados no centro dos botões. E também vou torná-los ligeiramente arredondados. Então, primeiro de tudo, vamos usar border-radius com Para centralizar as molduras dentro dos botões, precisamos usar o Flexbox Como você sabe, todos nós já criamos um centro de cluster com algumas propriedades do flexbox Então, vou atribuir aos dois botões o centro de aula. Tudo bem, isso é sobre o pseudo elemento posterior. Agora vou cuidar dos elementos desse painel. Por padrão, eles devem estar ocultos e precisamos exibi-los quando passarmos o mouse sobre os botões Antes de criarmos o efeito hover, primeiro, vou personalizar os elementos de extensão Então, vamos torná-los visíveis e eliminar a exibição de nenhum a partir daqui. Como você pode ver, quando os elementos de extensão estão visíveis, eles bagunçam o layout Então, primeiro de tudo, precisamos cuidar de suas posições. Vou colocá-los na parte superior dos botões. Então, vamos definir sua posição absoluta. Para posicionar os elementos de extensão de acordo com seu elemento pai, que é o botão, precisamos atribuir a posição em relação ao botão Depois disso, vou definir a posição superior Vamos fazer com que seja menos três rampas. Tudo bem, então esses elementos da panela estão posicionados. Em seguida, vou personalizá-los. Vamos mudar o tamanho da fonte, torná-la para 1,6 RAM. Além disso, vou definir a espessura da fonte para 400. Em seguida, transforme o texto em maiúsculas. Também crie algum espaço entre as letras. Vamos fazer com que seja executado em 0.1. E depois mude a cor. Vou usar aqui a cor primária. Agora os elementos ou personalizados. Mas, como você vê, temos aqui um pequeno problema. O primeiro elemento de extensão está dividido em duas linhas diferentes. E para corrigir isso, vamos definir uma largura com um valor máximo de conteúdo. Portanto, nesse caso, como o nome desse valor sugere, o elemento ocupará a largura necessária para exibir o conteúdo do elemento. Tudo bem, então os elementos de extensão são personalizados e agora temos que criar um efeito de foco. Em primeiro lugar, vou ocultar esses elementos de extensão por padrão. E para isso, usarei a propriedade de transformação com a função de escala. Para ocultar os elementos, precisamos definir a escala como zero. Então, o elemento está oculto. Em seguida, vamos selecionar um botão com o mouse, seguido pelo elemento span Então, para tornar o animal visível, precisamos definir a escala como um. E também vamos usar a transição com o valor de transformar 0,5 s. Tudo bem? Então, quando passarmos o mouse sobre os botões, os elementos de extensão aparecerão bem Portanto, a maior parte dessa seção está concluída, mas temos que fazer mais algumas coisas. Precisamos adicionar plano de fundo ao título e às imagens. E também precisamos criar outro efeito de linha inteira para as imagens. Vamos começar com o plano de fundo do título que será criado usando o pseudo elemento anterior Então, vamos prosseguir e selecioná-lo. Antes de tudo, precisamos definir o conteúdo. Vamos esvaziá-lo. Em seguida, defina a largura e a altura. Vou fazer com que a largura do fundo seja 130%. Para a altura, vamos fazer com que seja uma largura de janela de visualização de 30. Além disso, precisamos fundo com função de gradiente linear Vou inserir suas duas cores. A primeira será a cor primária. Pois o segundo será de cor branca. Então, no momento, o elemento não está visível. Precisamos definir sua posição. Então, vamos defini-lo como absoluto. Além disso, precisamos posicionar em relação ao título porque é um elemento pai e precisamos posicionar o fundo de acordo com o elemento pai. Então, aqui temos o plano de fundo. Em seguida, vou definir as propriedades superior e esquerda. Vamos definir os dois como zero. Além disso, precisamos inclinar o elemento com a direção x. Então, vamos usar Transform, depois a função chamada skew X. E como valor vou inserir aqui -50 Então, agora o plano de fundo parece muito melhor, mas ainda precisamos adicionar mais alguns estilos. Agora mesmo. É inclinado de acordo com o centro, porque, como você sabe, por padrão, a origem da transformação é o centro Nesse caso, precisamos alterá-lo e fazer um topo esquerdo. Então, vamos seguir em frente e definir a origem da transformação no canto superior esquerdo. Portanto, o plano de fundo está posicionado corretamente. Mas temos aqui um pequeno problema. Eles não acabaram ficando em segundo plano. E para corrigir isso, vamos usar a propriedade z-index Vou configurá-lo para um valor menor que zero. Então, vamos fazer com que seja menos um. Além disso, vou contornar os cantos do plano de fundo usando o raio da borda com o valor de uma repetição. Tudo bem, vamos ver o plano de fundo Antes de passarmos para as imagens, quero aumentar o espaço entre o título e as imagens. Portanto, é atribuída a ela, margem inferior com o valor cinco executado. Certo? Então, agora podemos cuidar das imagens. Em primeiro lugar, vou criar o plano de fundo. Vou usar novamente gradiente linear com duas cores diferentes. A primeira será a cor primária. Quanto ao segundo, ele deve ser branco. E então use border-radius com valor 0,5 rant. Ok, então aqui temos o plano de fundo e a única coisa que precisamos fazer é criar um efeito de foco Por padrão, vou esconder a segunda imagem e exibi-la ao passar o mouse Então, vamos esconder essa segunda imagem. Vamos selecioná-lo e definir a opacidade como zero. Agora precisamos criar um efeito de foco. Vamos selecionar iPhones embalados com o mouse, seguido pela primeira imagem Vamos definir a opacidade como zero. Então eu vou duplicar esse código. Precisamos aqui do G2 e do da opacidade. E, finalmente, use a transição com os valores opacidade 3 s. Então, agora, se passarmos o mouse sobre as imagens, você verá que tudo Com esta segunda seção, terminamos. Vamos seguir em frente e cuidar do próximo. 39. Projeto 4 - Criar e Estilo de seção de MacBook - Parte 1: Tudo bem, então, quando terminarmos a segunda seção agora é hora de seguir em frente e começar a trabalhar na próxima seção, que será a seção MacBook Em primeiro lugar, vamos dar uma olhada nos projetos concluídos e ver como é essa seção. Então, quando rolarmos a página para baixo , o MacBook abrirá, o logotipo e a barra de progresso aparecerão Depois disso, o magma será ligado e alguns conteúdos serão exibidos Então, vamos ver o que vamos criar. Vamos começar com a marcação HTML. Vou inserir novos comentários para a Seção três. Em seguida, abra os elementos da seção com a seção três da classe. Este elemento da seção consistirá em duas partes principais. Teremos o título e o conteúdo, que por si só incluirão algumas partes diferentes. Então, vamos inserir seus novos comentários no título da Seção três. Em seguida, abra a tag de cabeçalho H1 com o título da seção três da classe E como conteúdo, vamos inserir seu MacBook Air Em seguida, precisamos criar o conteúdo. Então, vamos inserir novos comentários. Conteúdo da seção três do conteúdo da seção três. Em seguida, abra a tag div com o conteúdo da seção três da classe. Nesta parte, teremos imagens. Estou nas imagens das partes superior e inferior do MacBook Inicialmente, era uma imagem e eu a separei em duas partes para criar um efeito de abertura do MacBook Vamos inserir novos comentários. Imagens da seção três. Imagens do final da seção três. Vou abrir a tag de imagem e depois especificar aqui a parte da imagem. Temos a pasta Imagens. Em seguida, precisamos selecionar a pasta MacBook e o ponto PNG da tela do MacBook da imagem Além disso, vamos usar o atributo de classe com um valor MacBook IMG one Vamos duplicar essa linha de código e alterar o nome da imagem que precisamos aqui: teclado múltiplo, lote PNG como nome de classe pública Será o MacBook img2. Ok, em seguida, vou criar seu logotipo e a barra de progresso do carregamento. Então, vamos instituir novos comentários. Carregando a seção três. Em seguida, final do carregamento da Seção três. Em seguida, institua a tag div com um invólucro de carregamento de classe. Em seguida, vou criar outra tag div. Com uma aula carregando. Ele consistirá em dois elementos diferentes. O primeiro será o logotipo. Estou no ícone Font, Awesome, que está aberto. O elemento I com uma classe é FAB, FA, apple. Quanto ao segundo elemento , será div, que será a barra de progresso Tudo bem, depois disso, vou criar a última parte do conteúdo que será a seção três, informações Vamos inserir seus comentários. Então, vou abrir a tag div, que será o invólucro Vamos atribuir à sua classe as informações do MacBook. Dentro desse elemento, teremos três elementos diferentes. Quero dizer o parágrafo do título e a parte inferior. Vamos abrir a tag de cabeçalho H2 com um título MacBook Info da classe como conteúdo Vamos inserir aqui a velocidade da luz. Em seguida, vou abrir a tag P com um preço de classe de MacBook como conteúdo Vamos inserir aqui a partir de $999. Depois disso, precisamos criar um botão. Vamos atribuir a ela a classe MacBook, btn e, em seguida, interferir agora Tudo bem, então a marcação HTML foi criada e agora temos que escrever um pouco Vamos continuar e inserir seus novos comentários para a Seção três. Em seguida, vou selecionar os elementos da seção. E antes de tudo, vamos definir que podemos ocultar, vou definir os dois em 200% e também alterar a cor de fundo. Vamos colocá-lo em preto. Ok, a seguir, vou alinhar os elementos no centro usando o Flexbox Vamos usar o centro de cluster, que preparamos nos estilos comuns, e atribuí-lo ao elemento da seção Além disso, temos que mudar a direção para alinhar os elementos verticalmente em uma coluna Então, vamos definir a direção flexível para chamá-los. Por fim, vou criar um pequeno espaço na parte superior e inferior desta seção Vamos usar o preenchimento. Defina-o para 15 RAM na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, isso é tudo sobre esse elemento da seção. Vamos seguir em frente e personalizar o título, que no momento não está visível porque o fundo é preto. Então, vamos inserir seus novos comentários, título da seção três. Fim do título da seção três. Em seguida, selecione esse elemento de seção. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer com que sejam dez RAM. Então eu vou deixar a fonte mais clara. Vamos definir a espessura da fonte 200. Também mude a cor. Vou usar sua cor primária. E, finalmente, vamos criar algum espaço na parte inferior usando a margem inferior 15 run. Tudo bem, vamos ver o título. Próximo. Eu vou cuidar do conteúdo. Vamos dar uma olhada no projeto finalizado. Então, primeiro vou personalizar o MacBook forma, sem nenhum efeito de abertura e carregamento, adicionaremos a imagem de fundo ao invólucro de carregamento E também personalizaremos as informações do MacBook. Em primeiro lugar, vou diminuir provavelmente o tamanho das imagens do MacBook Vamos inserir seus novos comentários no conteúdo da seção. Em seguida, vou selecionar o conteúdo da Seção três e definir sua largura para 80 por cento. Em seguida, vou instituir novos comentários para as imagens. Precisamos de imagens da Seção três das imagens da Seção três. Então, nesse caso, eu quero que a imagem herde a largura do elemento pai Então, vamos instituir com herança. Agora, como você pode ver, o MacBook é menor Em seguida, vou alinhar elementos do conteúdo usando o Flexbox Vamos adicionar um centro de aula ao conteúdo e também mudar a direção, torná-lo colorido. Além disso, vou usar sua propriedade chamada perspectiva, porque eventualmente criaremos alguns efeitos 3D. Quero dizer, abriremos o Mac Book em um ambiente 3D. Vou definir a perspectiva de 2000 corridos. Tudo bem. Em seguida, vou adicionar o plano de fundo ao invólucro de carregamento, mas antes disso, precisamos colocá-lo na tela Então, vamos inserir novos comentários para a Seção três, carregando. Em seguida, selecione o invólucro e defina sua posição como absoluta. Então, para posicioná-la de acordo com seu elemento pai, vamos definir a posição como relativa para o conteúdo desta seção. Em seguida, vou definir a largura e a altura da embalagem Vamos definir a largura para 60%. Quanto à altura, vamos fazer com que seja 85%. Eu escolhi esses valores manualmente para ajustar o invólucro de carregamento à tela do MacBook, que uso para seus valores percentuais para tornar a imagem de fundo responsiva a diferentes Vamos definir uma imagem como plano de fundo. Em primeiro lugar, vou usar gradiente linear. Vamos inserir aqui o valor RGBA. Quero dizer a cor branca e defino a opacidade para 0,4. Então use aqui a mesma cor. Depois disso, vou definir o caminho da imagem. Temos uma pasta de imagens em vez de outra pasta, MacBook, e depois selecionamos MacBook one desktop dot PNG Além disso, vou definir o centro da posição. E também precisamos aqui, sem repetir. Ok, então aqui temos a imagem de fundo, mas no momento ela não cabe na tela porque temos algum conteúdo abaixo. Vou colocá-lo no centro. Então, vamos instituir novos comentários. Precisamos de seções que incluam informações do final da Seção três e selecione Informações do MacBook Vou definir sua posição como absoluta. Então, agora vamos considerar que temos resultados muito melhores, mas ainda precisamos esconder essa pequena parte da imagem de fundo. E também precisamos movê-lo um pouco cima para esconder a parte inferior da imagem. Vou colocá-lo atrás da tela. E para isso, vamos usar a propriedade z-index. Vou configurá-lo para um valor menor que zero. Vamos fazer com que seja menos um. Em seguida, vou mover a imagem um pouco para cima usando a posição superior. Em geral, quando você usa a posição absoluta, as posições superior e esquerda são definidas como zero por padrão. Mas, neste caso, o invólucro de carregamento é um item flexível. Ele é centralizado usando o Flexbox e, portanto, a posição é alterada e a parte superior não é mais igual a zero Então, vamos em frente e definir a posição superior para 6%. Isso moverá os elementos um pouco para cima. Tudo bem, vamos ver, o fundo está posicionado corretamente. Em seguida, vou personalizar as informações do MacBook 40. Projeto 4 - Criar e Estilo de seção de MacBook - Parte 2: Tudo bem, agora temos que estilizar as informações do MacBook, mas antes disso vou esconder o logotipo por Então, vamos selecionar carregamento e atribuir para não exibir nenhum. Ok, em seguida, vou cuidar das informações do MacBook. Eu vou definir a largura. Vamos configurá-lo para sete para ser executado. E também vou colocar elementos no centro usando o centro de alinhamento de texto Tudo bem, a seguir, vamos seguir em frente e estilizar o título. Vamos selecionar o título Informações do MacBook. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer com seis RAM. Então eu vou deixar a fonte um pouco mais clara. Então, vamos definir a fonte como 400 e também mudar a cor. Nesse caso, vou usar a coluna primária. Então, o título parece bom, mas acho que não está bem visível. Então, vou aumentar ligeiramente a opacidade das cores do gradiente linear No momento, eles são 0,4. Então, vamos aumentá-los e torná-los 0,6. Ok, agora eu acho que está melhor. Vamos passar para o parágrafo. Vamos selecionar o preço do MacBook. Em seguida, aumente o tamanho da fonte, faça 2,5 rem. Além disso, vou deixar a fonte mais clara. Vamos definir a espessura da fonte para 200. Além disso, vou criar algum espaço na parte superior e inferior usando margem. Vamos configurá-lo para três rem na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, isso é tudo sobre o parágrafo. Vamos seguir em frente e personalizar o botão. Vou selecionar MacBook BTN. Vamos definir a largura para 25 RAM. Então eu vou definir a altura. Vamos fazer com que sejam cinco rem. Em seguida, vou mudar o plano de fundo. Vamos usar a imagem de fundo e, em seguida, função de gradiente linear com duas cores diferentes O primeiro será D, D, D. Estou no cinza claro. Quanto ao segundo, será a cor branca. Em seguida, vou me livrar da borda padrão. Vamos definir a borda como nenhuma. Além disso, vou arredondar os cantos do botão usando o raio da borda Valorizamos 0,5 rem. Além disso, vamos usar box-shadow. Vou usar sombra de caixa de vários níveis. A primeira será 0,1 rodada três vezes. E a cor branca. Quanto à segunda, será a mesma sombra, mas no lado esquerdo. Portanto, precisamos aqui de -0,1 quarto duas vezes, depois 0,1 RAM e a mesma cor branca Ok, então é considerado que o botão parece muito melhor, mas vou adicionar mais alguns estilos. Então, vamos definir o tamanho da fonte, torná-la 1,5 RAM. Em seguida, vou definir o peso da fonte para 500. Também crie algum espaço entre as letras. Vamos fazer com que isso aponte para a RAM. Também altere a cor do texto. Vamos usar aqui a cor primária. E, finalmente, mude o tipo do grosseiro, faça com que ele Tudo bem, vamos ver as informações do MacBook. É personalizado e agora vou cuidar da parte de carregamento. No momento, o ícone da Apple está oculto, então vamos torná-lo visível. Eu vou me livrar do display none daqui. Em seguida, defina a largura e a altura, ambas em 200%. Em seguida, vou cuidar de sua posição. Vamos definir a posição como absoluta. Em seguida, defina as propriedades superior e esquerda. Vou definir os dois como zero. Além disso, vamos mudar a cor de fundo. Eu vou fazer com que seja preto. Portanto, podemos ver que precisamos nos esconder nas informações do MacBook. Eu vou fazer isso usando opacidade. Vamos defini-lo como zero. Tudo bem, vamos seguir em frente e personalizar o logotipo. Selecione o ícone Font Awesome. Vamos aumentar o tamanho da fonte, torná-la em dez RAM. E também mude a cor. Vamos torná-lo branco. Então, aqui temos o logotipo, mas precisamos fixar sua posição. Vou colocar o logotipo e também a barra de progresso no centro. Para isso, vou adicionar um centro de cluster ao carregamento. E também precisamos mudar a direção. Vamos fazer com que seja uma coluna porque precisamos colocar os elementos verticalmente Nicole. Ok, vamos cuidar da barra de progresso. No momento, não está visível porque só temos aqui o elemento div vazio Então, vamos selecioná-lo. E antes de tudo, defina sua largura e altura. Vou configurar com 222 RAM. Quanto à altura, vamos fazer com que seja 0,3 RAM. E também mude a cor de fundo, torne-a 888. Então, agora a barra de progresso é viável, mas está colocada muito perto do logotipo Vamos prosseguir e corrigir isso usando margem. Vou definir a margem de baixo para a rampa. Tudo bem, então a única coisa que vou fazer com uma barra de progresso é arredondá-la Então, vamos usar o raio da borda com o valor de cinco rem. Tudo bem, isso é tudo sobre a barra de progresso Como você se lembra, eventualmente, quando rolamos a página para baixo e o MacBook abre, a barra de progresso deve parecer que criaremos esse efeito usando os pseudoelementos posteriores Então, vamos selecioná-lo. Antes de tudo, defina o conteúdo. Precisamos esvaziá-lo. Em seguida, vou definir a posição como absoluta. Então, para posicionar o elemento de acordo com seu pai, vamos atribuir à barra de progresso a posição relativa Em seguida, adicione mais alguns estilos aos pseudoelementos posteriores Vou definir as propriedades superior e esquerda. Vamos definir os dois como zero. Em seguida, vou definir a largura e vou torná-la 50 por cento por um tempo Eventualmente, será zero e aumentará quando rolarmos para baixo e a barra de progresso aparecer Depois disso, vamos definir uma alta de 200 por cento e também alterar a cor de fundo. Faça com que seja branco. Então, tudo está pronto. E agora temos que adicionar alguns efeitos ao MacBook. Vamos ao arquivo Java e inserir seus novos comentários, seção três. E a seção três. Portanto, precisamos criar efeitos e exibi-los depois de rolar a página até a seção três Então, usaremos eventos de rolagem. Além disso, vou adicionar uma nova classe. É o conteúdo da Seção três. Em seguida, usando essa nova classe, definiremos diferentes estilos CSS. Em primeiro lugar, vamos selecionar o conteúdo da seção três. Vou criar uma nova variável e depois selecionar esses elementos usando o método querySelector Precisamos especificar aqui o nome da classe, o conteúdo da seção três. Depois disso, vou anexar ao ouvinte de eventos do objeto de janela com o evento scroll Na verdade, a janela é o objeto global. Vamos especificar aqui que eles rolam os eventos e também passam aqui a função de seta, que será executada assim que rolarmos a Depois disso, precisamos criar instruções IF nas quais temos que definir se rolamos até esta seção Três conteúdos não estão na condição da instrução if Usaremos algumas propriedades diferentes. Em um piscar Pode parecer um pouco difícil, mas vou tentar explicar. Portanto, a primeira propriedade que vou usar é chamada de deslocamento da página Y. Precisamos anexá-lo ao objeto da janela. Essa propriedade retorna os pixels. O documento atual foi rolado a partir da borda superior da janela Em outras palavras, é o tamanho da parte da página da web que foi rolada para cima Em seguida, precisamos usar outra propriedade , chamada de altura interna. Essa propriedade retorna a altura da janela de exibição E precisamos adicionar essa propriedade ao deslocamento da página. Portanto, essa expressão nos dará a distância total da borda superior da página da web Quero dizer, a parte que foi rolada para cima mais a altura da janela de visualização Precisamos comparar essa distância com a posição do conteúdo desta seção três para descobrir se rolamos até a parte necessária da página da web ou Portanto, precisamos aqui de um sinal maior ou igual. E agora precisamos usar outra propriedade chamada offset top Mas, neste caso, precisamos deslocar aqui o topo do conteúdo da seção três Portanto, essa propriedade nos dá a posição dos elementos em pixels. Quero dizer, ele mede a distância da borda superior da página da web Portanto, se essa condição for verdadeira, significa que rolamos até o conteúdo desta seção três Mas, na verdade, isso não é suficiente, porque eu quero iniciar os efeitos quando rolamos para baixo e chegamos à metade do conteúdo da seção três E para definir esse ponto, vou usar outra propriedade chamada altura de deslocamento Isso nos dá a altura do elemento em pixels. E precisamos dividi-la por dois Ok, então, se essa condição for verdadeira, isso significa que precisamos exibir os efeitos. Antes disso, vou testar se isso funciona bem. Então, vou percorrer o console, rabiscado. Vamos inspecionar a página e mudar para a guia do console. Então, quando rolarmos para baixo e chegarmos à metade desta seção para ver o conteúdo , seremos rabiscados no console Tudo bem, tudo funciona bem. Agora precisamos adicionar uma nova classe ao conteúdo da seção três. Vamos usar aqui uma das propriedades chamada lista de classes. Como você sabe, ele nos fornece todas as classes que o elemento tem. E também nos permite ter acesso aos diferentes métodos, como adicionar, remover, alternar, que precisamos aqui E vou especificar aqui a mudança do nome da classe. Tudo bem, isso é tudo sobre o JavaScript. Vamos voltar ao CSS. Então, precisamos fazer algumas coisas. Em primeiro lugar, vou esconder o invólucro de carregamento. Então, vamos atribuir a ela opacidade zero. Em seguida, precisamos fechar o MacBook. Para isso, vou girar a primeira imagem, que é a tela Então, vamos selecionar a primeira imagem e depois usar Transformar, Girar. Precisamos girá-lo de acordo com o eixo x. Como valor, vou inserir seus -80 graus. Como você pode ver, a imagem é girada, mas é claro que não é isso que queremos Como você sabe, por padrão, o elemento é transformado a partir do centro. Mas, no nosso caso, precisamos transformá-lo de baixo para baixo. Então, vamos prosseguir e mudar a origem da transformação. Faça isso, Watson. Ok, agora o MacBook está parcialmente fechado e precisamos abri-lo assim que rolar E esse é o momento em que temos que usar a mudança de classe. Vamos selecionar o MacBook IMG one. Em seguida, precisamos transformar, girar x e definir como zero Além disso, vamos fazer a transição com transformação e com a duração de 3 s. Então, se eu rolar para baixo e chegar ao conteúdo da seção três, o MacBook Ok, então isso é tudo sobre o primeiro efeito. Agora temos que exibir o logotipo e a barra de progresso. Vamos usar novamente a mudança de classe, seguida pelo rapper de carregamento. No momento, sua opacidade é zero e temos que configurá-la como um Em seguida, precisamos usar a transição com os valores opacidade do que a duração de 1 s. Além disso, precisamos ouvir um pouco de tempo de atraso porque, a princípio , o MacBook deve abrir e temos que esperar Então, vamos adicionar aqui 2 s. Ok, então, quando rolarmos para baixo, o MacBook abrirá E depois disso, o logotipo e a barra de progresso serão exibidos. No momento, a barra de progresso não funciona. A metade de sua largura é campo. Então, vamos em frente e cuidar disso. Vou fazer com que sua largura seja zero. Em seguida, use novamente a mudança de classe, seguida pelos pseudoelementos posteriores Então, quando a barra de progresso aparecer, teremos que aumentar a largura do pseudo-elemento after Vamos configurá-lo para 100% e depois usar a transição. Precisamos lidar com essa duração de um segundo. E, novamente, precisamos de algum tempo de atraso. Vamos configurá-lo para 3 s. Agora, se eu rolar para baixo, você verá que tudo funciona perfeitamente Tudo bem. Depois disso, precisamos ocultar o logotipo e a barra de progresso e exibir as informações do MacBook Então, vamos usar novamente a mudança. Então. Selecione carregamento e defina a opacidade como zero. Use novamente a transição 1 s e, em seguida, o tempo de atraso 5 s. Ok, então, quando rolarmos para baixo, o logotipo e a barra de progresso se ocultarão A imagem de fundo será exibida. Depois disso, precisamos exibir as informações do MacBook. Então, vamos usar novamente a mudança. Com informações do MacBook. Precisamos definir a opacidade como uma. E, novamente, temos que usar a opacidade de transição de 1 s e o tempo de atraso de 6 s. opacidade de transição de 1 s e o tempo de atraso de 6 s. Ok? Assim, podemos ver que tudo funciona perfeitamente e estamos quase terminando esta seção. A única coisa que vou fazer é alterar a forma do plano de fundo desta seção usando a propriedade clip path. Na verdade, eu já preparei os valores, então vou copiá-los desse arquivo de texto e anexá-lo a esta palestra Assim, você pode baixá-lo e copiar os valores diretamente inseridos manualmente. Tudo bem, então finalmente terminamos com esta seção. Espero que tenha sido interessante porque criamos alguns efeitos interessantes Vamos prosseguir e cuidar da próxima seção. 41. Projeto 4 - Seção de criação e estilo de relógios: Tudo bem, terminei trabalhar na seção MacBooks e agora é hora de cuidar da próxima seção, que será a seção Apple Watch Vamos dar uma olhada no projeto finalizado. Então, aqui temos os relógios Apple. Quero dizer, o cliente pode experimentar diferentes capas e bandas usando esses controles para escolher a combinação favorita criar esses efeitos usando CSS e JavaScript. Antes de tudo, precisamos começar com a marcação HTML. Então, vamos continuar e inserir seus novos comentários para a Seção quatro. Aquele elemento de seção aberta com uma classe, seção quatro. Em seguida, precisamos criar uma tag div, que será a embalagem dos relógios Estou nas bandas e dos estojos. Mas antes disso, vamos inserir novos comentários. Seção para relógios e seção externa para relógios. E, em seguida, abra a tag div com os relógios de uma classe. Esse elemento incluirá duas partes diferentes, quero dizer, as bandas e os estojos. Vamos inserir novos comentários para pulseiras de relógios. Em seguida, abra a tag div, que envolverá as imagens das bandas Então, vou atribuir a ela uma classe de calças de relógio. Em seguida, abra a tag da imagem e selecione a imagem. Precisamos de imagens de pastas. Em seguida, outra pasta observa. E temos que selecionar a pulseira de relógio um JPG. Além disso, vou atribuir ao elemento de imagem o atributo de classe com uma pulseira de valor, IMG Então, no geral, teremos nove imagens diferentes. Vou duplicar essa linha de código oito vezes e depois mudar rapidamente os nomes das imagens Precisamos de números de dois a nove. Ok, isso é tudo sobre a banda. Em seguida, precisamos observar os estojos. Então, vamos inserir seus novos comentários. Então, caixas de relógios e de caixas de relógios. Então eu vou pegar esse código inteiro daqui, colá-lo e primeiro vamos mudar a classe. Quero dizer, quando transformar bandas em estojos, precisamos de casos em vez de banidos em todos os lugares. Além disso, vou mudar a extensão. Precisamos de PNG em vez de JPG. Tudo bem, vamos ver as bandas e os cases. Em seguida, vou criar os controles. Teremos quatro controles diferentes. Então, vamos inserir seus novos comentários. Controles do relógio do que n dos controles do relógio. Em seguida, vou abrir a tag de link com o controle do relógio de classe. Na verdade, será o nome comum da classe. Mas, além disso, precisamos de um relógio de classe individual, controle máximo. E então, dentro do elemento link, vou passar o ícone Font Awesome com a classe FAS, FAA, angle up Então, no geral, teremos quatro controles diferentes. Vou duplicar o elemento de link três vezes e depois precisamos mudar as classes Então, o segundo será relógio, controle correto. Quanto ao ícone Font Awesome, o ângulo será inclinado para a direita. Então, precisamos do controle inferior do relógio, inclinado para baixo. E por último, observe o controle esquerdo. Quanto ao ícone, será inclinado para a esquerda. Ok, finalmente, precisamos criar o fundo. Vamos inserir novamente os novos bens comuns, relógio Batson e o botão do relógio E então crie elementos de botão com a classe watch, btn e com o conteúdo até agora Tudo bem, isso é tudo sobre a marcação HTML. Vamos seguir em frente e começar a personalizar essa seção. No início, vamos estilizá-lo e depois fazê-lo funcionar usando JavaScript. Então, vamos prosseguir e inserir sua nova seção de comentários no final da seção quatro. Em seguida, selecione os elementos da seção e defina a altura dessa seção. Vou fazer com que seja 140% da janela de visualização. Além disso, vou criar espaço na parte superior e inferior desta seção usando preenchimento Vamos configurá-lo para 20 janelas de visualização na parte superior e inferior e depois zero nos lados esquerdo e direito Antes de prosseguirmos, vou diminuir o tamanho das imagens Quero dizer bandas e cases. Então, vamos inserir uma nova seção de comentários para relógios do que o final da seção quatro relógios. Além disso, vou inserir aqui mais um comentário sobre calças de relógio. Em seguida, selecione a pulseira do relógio, IMG. Vou definir a largura e a altura. Vamos configurar os dois para 35 RAM. E também vou usar object fit contain. Em seguida, quando também for o mesmo para caixas de relógios. Então, vou duplicar esse código aqui e depois transformar as bandas em caixas E também em vez da pulseira de relógio, IMG, vamos apenas assistir a capa IMG Tudo bem, como você pode ver, as imagens ficaram menores e agora temos que cuidar do alinhamento delas. Vou usar o flexbox. Portanto, precisamos adicionar um centro de classe aos elementos da seção, também aos relógios e, em seguida, dobras e estojos Em seguida, precisamos alterar a direção de flexão elementos da seção e também das caixas Vamos selecionar caixas de relógios e definir a direção de flexão como coluna Então, agora, as dobras são colocadas horizontalmente. Quanto aos estojos, eles são colocados verticalmente, mas ainda assim o layout está confuso. Agora temos que manipular as posições. Vou atribuir dois elementos div, posição absoluta, quero dizer, invólucros de faixas E vou usar um desses combinadores CSS chamado seletor Child, que seleciona os elementos secundários diretos, neste caso elementos div diretos Vamos definir a posição como absoluta. Em seguida, precisamos da posição relativa aos elementos principais em que estou nos relógios. Então, vamos selecioná-lo e definir a posição como relativa. Além disso, vou definir largura e altura. Vamos definir os dois como 100%. Ok, agora as imagens estão bem alinhadas e só precisamos ocultar algumas delas porque, como você pode ver, temos aqui uma barra de rolagem e também algumas das capas são colocadas na Então, para corrigir isso, precisamos usar overflow hidden Tudo bem, vamos falar sobre os relógios agora. Eu vou cuidar dos controles. Vamos inserir seus novos comentários nos controles do Watch. Em primeiro lugar, vou cuidar de suas posições. Como você sabe, eles são filhos diretos do elemento da seção. Então, vou posicioná-los de acordo com esta seção. Vamos selecionar o controle do relógio e atribuir a ele a posição absoluta. Então, precisamos da posição relativa para esse elemento de seção. Agora, vou definir as posições para cada controle separadamente. Vamos começar com o primeiro. Primeiro, vamos definir as posições superior e esquerda. Vou definir a altura máxima da janela de visualização 222 como provavelmente a posição esquerda Eu vou fazer com que seja 50 por cento. Além disso, precisamos enviar para o controle verticalmente E para isso, precisamos movê-lo. Quero dizer, você precisa usar aqui função translate x com o valor -50% Então, aqui temos o controle superior. No momento, é muito pequeno e difícil de ver, então vou estilizá-lo. Vamos definir sua largura e altura. Vou configurar os dois como RAM. Em seguida, altere a cor do plano de fundo. Vamos usar seu valor RGBA. Vamos inserir aqui 22013 vezes e depois a opacidade 0,4 e, em seguida, torná-las arredondadas usando Vamos configurá-lo para cinco rem. Em seguida, vou colocar o ícone no centro. E para isso, vamos usar o centro de aula. Vou atribuí-lo a todos os elementos. Depois disso, vamos personalizar o ícone em si. Então, vamos selecionar elementos. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer três RAM e depois mudar a cor. Vamos torná-lo primário. Ok, então o controle está estilizado. Vou seguir em frente e posicionar o segundo controle. Quero dizer, o controle certo. Defina a posição superior como 50 por cento. Então eu vou definir a posição correta para, para correr Além disso, precisamos enviar para o controle verticalmente Então, precisamos aqui Transformar, Traduzir, Y -50%. Ok, em seguida vem o controle inferior. Vamos selecioná-lo. Vou definir a posição esquerda. Vamos fazer com que seja 50%. Então precisamos do fundo. Vou configurá-lo para 20 de altura da janela de visualização. E, novamente, precisamos transformar com a função Translate. Nesse caso, precisamos da direção x com um valor de -50 por cento. Tudo bem, então vamos considerar que o controle inferior está posicionado Na verdade. Temos aqui o botão que acabou atrás do controle. E nós cuidaremos disso um pouco mais tarde. Antes disso, vamos posicionar o último controle, que é o esquerdo. Então, vamos selecioná-lo e definir as propriedades superior e esquerda. Vou definir a primeira posição para 50 por cento. Quanto à propriedade esquerda, vou chegar até Ram. Além disso, precisamos transformar novamente com a função Translate, neste caso com o eixo y e com o mesmo valor -50 por cento Ok, vamos ver os controles. Vamos em frente e cuidar do botão. Vamos inserir novos comentários para o botão do relógio. Em seguida, selecione o botão e defina a posição. Vou defini-lo como absoluto. Além disso, precisamos definir as posições inferior e direita. Vou definir a propriedade inferior para 30 de altura da janela de visualização. Quanto à posição correta, vamos configurá-la para 25 por cento. Então o botão está posicionado e agora vou fazer com que pareça bom. Em primeiro lugar, vamos definir dentro da altura, vou definir a largura para 13 RAM. Quanto à altura, vamos fazer com que sejam cinco RAM. Em seguida, altere a cor do plano de fundo. Vou colocá-lo em preto. Além disso, precisamos mudar a cor do texto. Vamos torná-lo primário. Ok, depois disso, vou mudar a borda padrão. Vamos usar aqui a borda com valores de 0,1 quarto. Vou deixá-lo tracejado e também mudar a cor, torná-lo branco Em seguida, vamos arredondar o botão usando border-radius com um Ok, então o botão parece bom. Vamos adicionar mais algumas células. Eu vou cuidar do texto. Vamos mudar o tamanho da fonte, torná-la 1,6 RAM. Além disso, vou deixar a fonte mais clara. Vamos começar, não vou esperar 200. E por último, mude o tipo do grosseiro, faça Tudo bem, então é isso. A seção inteira é personalizada e agora como fazê-la funcionar? 42. Projeto 4 - Faça o trabalho da seção de relógios: Tudo bem, uma vez que personalizamos a seção de relógios, agora temos que fazê-la funcionar Temos aqui quatro controles diferentes. E assim que clicarmos neles , a imagem se moverá e você poderá escolher sua capa e banda favoritas. Então, criaremos essas coisas usando JavaScript. Vamos ao arquivo script.js e inserir uma nova seção de comentários no final da seção . Em primeiro lugar, vou selecionar todos os elementos necessários. Estou em bandas, estojos e tudo para controles diferentes. Vamos criar uma nova variável. Eu vou chamar isso de bandas de relógio. Em seguida, selecione o elemento usando o método querySelector. Precisamos especificar aqui pulseiras de relógio de classe. Vamos duplicar essa linha de código e transformar bandas em caixas Depois disso, vou selecionar os controles. Vamos começar com o controle superior. Crie uma nova variável e chame-a de watch top control. Vamos selecioná-lo usando novamente o método seletor de consulta. Vou especificar aqui o nome da classe, watch tab control. Vamos duplicar essa linha de código três vezes e mudar os nomes e os nomes das classes que precisamos aqui, certo? Então, o próximo será o fundo. E, finalmente, precisamos sair. Assim, todos os elementos são preparados, como você sabe, os controles são criados usando os elementos de link. E assim que clicarmos neles , navegaremos até o topo da página por padrão. E, na verdade, também temos o mesmo problema com os controles do cubo. Se clicarmos neles, navegaremos até o topo da página. Vamos selecionar todos esses controles. Vou escrever esse código no topo. Vamos inserir seus novos comentários, CommonJS do que n de JS comum Em seguida, vou selecionar todos os controles usando o método querySelector Primeiro, vamos especificar aqui o nome da classe. Observe o controle, então precisamos controlar o cubo quando separar essas classes usando coma E, finalmente, o número inteiro a. Então, para corrigir esse problema, temos que examinar a lista de que é retornada pelo método all do seletor de consultas É um objeto semelhante a uma matriz. Em seguida, temos que anexar um evento de clique aos controles e usar um dos métodos chamados prevent default. Então, para examinar a lista, vou usar um dos métodos auxiliares de matriz chamados para cada um É preciso um argumento, que é a função de retorno Essa função de retorno de chamada em si terá um argumento. Será o controle atual na lista. Em seguida, precisamos nos conectar ao ouvinte de eventos de controle com eventos de clique Também precisamos aqui da função de retorno de chamada. Vou passar aqui um objeto de evento. E então temos que anexar ao método de objeto de evento chamado prevent default. Agora, se eu clicar nos controles, eles não farão nada e não navegaremos até o topo da página. Tudo bem? Então, uma vez que clicamos nos controles, temos que mover os elementos do invólucro Quero dizer pulseiras de relógios e estojos de relógios. E faremos isso usando margem. Portanto, a largura e a altura de cada imagem são iguais a 35 rem. E para mover uma imagem e ajustá-la à banda, temos que mover o elemento inteiro em sete até a rampa Então, para controlar a distância, quero dizer o movimento dos elementos, vou criar duas variáveis diferentes. Um para a direção vertical, quero dizer para os casos, e o segundo para a direção horizontal das faixas. Então, vamos chamar a variável x é por isso que ela é para a direção vertical. Vou defini-lo como zero. E então precisamos de x é x com um valor de zero também. Portanto, esses valores aumentarão ou diminuirão em sete para serem movidos de acordo com a direção. Vou começar com o controle superior. Depois de clicar nele, devemos mover as caixas dos relógios para o topo. Então, vamos prosseguir e nos conectar ao ouvinte de eventos de controle Temos que passar aqui o evento de clique e a função de seta. Então, agora temos que mover os elementos usando a margem superior. Isso significa que temos que diminuir o valor da margem superior em sete para a RAM. E temos que fazer isso em cada clique Portanto, precisamos que a caixa do relógio seja seguida pelo atributo de estilo. E então temos que usar a margem superior como valor. Vou subtrair sete da RAM ao valor atual do eixo y. Então, precisamos aqui x é y igual a x é y -70. Corra. Ou podemos simplesmente escrever essa expressão assim. X é y menos igual a 70. Corra, certo? Se eu clicar no controle superior, os casos mudarão. Mas agora sem nenhum pequeno defeito. Então, para corrigir isso, vou usar a transição. Precisamos de uma margem superior a 1 s. Então agora temos um efeito muito melhor. Ok, então precisamos do mesmo para o resto dos controles. Vamos duplicar esse código. O próximo controle será o inferior. E também, em vez de menos iguais, precisamos aqui Em seguida, teremos o controle correto. Então, vamos duplicar esse código. Nesse caso, temos que mover as calças do relógio. Então, vamos transformar caixas de relógios em pulseiras de relógio. Então, em vez da margem superior, precisamos da margem, certo? Também no caso de bandas, temos que mudar a direção que precisamos aqui, eixo x. Vamos duplicar esse código. Mude da direita para a esquerda. E também precisamos aqui do sinal negativo. Ok? Assim como as caixas de relógios, também precisamos fazer a transição para pulseiras de relógios. Então, vamos selecionar pulseiras de relógio atribuídas à transição. A margem de valores, certo? 1 s. Então, agora, se testarmos todos eles, os controles funcionarão bem. Como você pode ver, no caso de algumas bandas se moverem suavemente. Mas quando chegarmos à última imagem, quero dizer, em ambas as direções, o elemento continuará se movendo infinitamente Então, não precisamos disso. Quando chegamos à última imagem, tivemos que esconder o controle. Para isso, vou criar uma nova função. Vamos chamar isso de controle de altura. Portanto, precisamos verificar se chegamos à última imagem ou não. Isso vai acontecer. Quer que o valor do eixo y ou do eixo x se torne 280 RAM dependendo da direção. Quero dizer, às vezes precisaremos de 280 RAM ou às vezes de -280 Para provar que precisamos dessa quantidade, vou executar o eixo y até o console Então, a cada clique, o valor diminuirá em 70 RAM. E quando chegarmos à última imagem , o valor será igual a -280 rampa Portanto, temos que ocultar os desejos de controle. O valor do eixo y será igual a -280 Vamos criar uma declaração if onde temos que verificar se x é y é igual a -280 RAM Para ocultar o controle, vou criar uma nova classe e CSS, onde definiremos alguns estilos CSS para ocultar os elementos. Vou chamar essa classe de controle de ocultação e, em seguida, atribuir-lhe opacidade zero e visibilidade Então, se essa condição for verdadeira, precisamos adicionar essa classe recém-criada ao controle. Portanto, precisamos do controle superior do relógio, seguido pela propriedade da lista de classes. Em seguida, precisamos usar um dos métodos chamados Adicionar. E temos que especificar o nome da classe dentro dos parênteses E se a condição for falsa, teremos que exibir o controle novamente. Então, precisamos remover o alto controle de classe. Vamos usar declarações l. Então eu vou copiar essa linha de código. Precisamos mudar, adicionar e remover. Certo? Por fim, vamos chamar essa função onclick Portanto, se clicarmos no controle superior e chegarmos à última imagem, ela se ocultará. Precisamos do mesmo para o resto dos controles. Vamos continuar e duplicar as declarações if. Em seguida, elimina o sinal de menos e também muda a parte superior para a parte inferior Em seguida, teremos o controle correto. Nesse caso, precisamos do eixo x. E também precisamos mudar o controle. Precisamos aqui, certo. Em seguida, vem o controle esquerdo. Vamos adicionar aqui o sinal de menos. E também em vez de um controle direito, essa é a entidade aqui, o controle esquerdo. Então, a única coisa que precisamos fazer é chamar essa função abaixo para cada controle. Agora, se eu testar e clicar em todos os controles, você verá que tudo funciona bem. Ok, é isso. Terminamos de trabalhar nessa seção. Vamos seguir em frente e cuidar do próximo. 43. Projeto 4 - Criar e Estilo Seção de AirPods: Tudo bem, então terminamos de trabalhar na seção de relógios e agora temos que seguir em frente e pegar o ano em que a próxima seção, que será os aeroportos, será uma espécie de seção simples, mas agradável Teremos aqui o título com duas imagens diferentes e também com dois botões diferentes. Vamos continuar e, como sempre, começar com a marcação HTML Vamos inserir novos comentários. Seção cinco da seção cinco. Em seguida, abra os elementos da seção com a classe. Seção cinco. Em seguida, vou inserir um cara em Novos comentários para o conteúdo desta seção cinco. Em seguida, abra a tag div com uma classe airport. Esse elemento incluirá todo o conteúdo desta seção. Então, teremos aqui um título, imagens e botões. Vamos criar novos comentários para o título. Precisamos do título da Seção cinco do Título da Seção cinco. Em seguida, abra a tag de cabeçalho H1 com um título da seção cinco da classe com o conteúdo, aeroportos Ok, depois disso, teremos as imagens. Então, vamos criar novos comentários para a Seção cinco. Imagens. Em seguida, abra a tag imagem e selecione Imagens da pasta de imagens. Em seguida, outra pasta, aeroportos, e selecione aeroportos, um PNG. Vamos duplicar essa linha de código e mudar o nome da imagem que precisamos aqui, aeroportos, para PNG Tudo bem, finalmente, vou instituir os botões. Vamos criar novos comentários. Seção cinco botões. Em seguida, final da seção cinco botões. Vou abrir a tag div, que será o invólucro dos botões Vamos atribuir ao nome da classe aeroportos Watson's. E, em seguida, abra a etiqueta do botão com a classe airport btn. E com o conteúdo, saiba mais. Vamos duplicar o botão e alterar o conteúdo. Vou inserir aqui por. Ok, então a marcação HTML está preparada, todos os elementos são criados e agora vou personalizar esta seção usando CSS Vamos prosseguir e inserir novos comentários para a Seção cinco. Em seguida, selecione o elemento de corte e defina sua largura e altura. Eu vou definir com 200%. Quanto à altura, vamos torná-la 100% da janela de visualização. Ok, em seguida, vou cuidar dos elementos div do wrapper Quero dizer, o invólucro de conteúdo. Vamos instituir seus novos comentários. Conteúdo da seção cinco do conteúdo da seção cinco. Em seguida, selecione elementos div com a classe airport. Em primeiro lugar, vou definir largura e altura. Vamos definir com dois 90%. Quanto à altura, vou chegar a 80%. E então eu vou alinhar os elementos horizontalmente em Para isso, vamos configurar a tela como flexível. Certo. Depois disso, vou cuidar do alinhamento dos elementos Vamos começar com o título. Vou colocá-lo no centro horizontalmente. Vamos inserir novos comentários para o título. Precisamos da Seção 5, título. Do título da Seção cinco. Em seguida, selecione os elementos do título e defina sua posição como absoluta. Ok, para posicionar de acordo com seus elementos pais, temos todas as nossas profundezas que muitas vezes precisamos atribuir ao elemento pai a posição relativa Depois disso, vamos definir as posições superior e esquerda. Vou colocar o topo em zero. Quanto à esquerda, vamos fazer com que seja 50 por cento. Então, para centralizar os elementos perfeitamente, precisamos movê-los para o lado esquerdo. Portanto, precisamos transformar depois traduzir a função com a direção x. E temos que passar aqui -50 por cento Ok, então o título é posicionado a seguir Eu vou cuidar dos Batson, que agora estão colocados no lado direito desta seção Vou colocá-los no centro. Então, vamos criar novos comentários para os botões da Seção cinco. Em seguida, selecione os elementos div do wrapper, que têm os botões airport do nome da classe Em primeiro lugar, vou cuidar de suas posições. Vamos definir a posição como absoluta. E então vou colocar os botões perfeitamente no centro. Para isso, vou definir as propriedades superior e esquerda, ambas em 50 por cento. Então, precisamos transformar, traduzir e especificar as duas direções. Temos que defini-los para -50%. Tudo bem, então os elementos estão alinhados e agora podemos ir em frente e estilizá-los Vamos voltar aos elementos do título. Vou aumentar o tamanho da fonte. Vamos configurá-lo para 15 rampas. Em seguida, torne a fonte mais clara. Vou definir o peso da fonte para 300. Em seguida, mude a cor. Vamos usar aqui a cor branca. E por último, vou criar algum efeito de sombra. Vamos usar sombra de texto com os valores 0,1, 0,1, RAM diferente de zero e frio ou 999 Ok, então eles estão tendo um estilo. Vamos seguir em frente e cuidar das imagens. Vou criar novos comentários, seção cinco ou imagens da seção cinco. Em seguida, selecione os elementos da imagem. Eu vou diminuir o tamanho deles. Vamos definir com 250 por cento. Em seguida, faça com que a altura seja 100%. E também use pés de objetos, contenha. A imagem está ficando menor. E agora, como você pode ver, eles não estão perfeitamente colocados no centro desta seção. Para corrigir isso, vou usar o centro de aula. Vamos atribuí-lo ao elemento da seção. Tudo bem, agora temos um resultado melhor. A única coisa que eu quero fazer com relação às imagens é mudar a cor de fundo da segunda imagem. Em primeiro lugar, vou me designar para comer uma aula. Vamos chamá-lo de airport img2. Em seguida, selecione-o e altere a cor de fundo. Nesse caso, vou usar a coluna principal. Ok, isso é tudo sobre as imagens. Vamos seguir em frente e cuidar dos botões. Vou criar algum espaço na parte superior dos botões. Então, vamos usar aqui a margem superior com um valor de cinco rem. Em seguida, selecione o botão em si. Antes de tudo, vou cuidar da largura e da altura. Vou definir a largura para 15 RAM. Para a altura. Vamos fazer isso para RAM. E também altere a cor de fundo. Use sua cor primária. Em seguida, vou criar algum espaço entre os botões. E também vou me livrar da borda padrão. Então, vamos criar espaço usando margem. Vou definir como zero na parte superior e inferior e dois rem nos lados esquerdo e direito. E também defina a borda como nenhuma. Tudo bem, vamos adicionar mais alguns estilos aos botões Vou fazê-los arredondados. Vamos definir o raio da borda de 2,5 rem. Também altere a cor do conteúdo. Faça com que seja branco. E, finalmente, mude o tipo do grosseiro, torne-o Ok, então agora o primeiro botão sobre D parece bom. Quanto ao segundo, precisamos mudar a cor de fundo e também a cor do texto. Então, para selecionar o segundo botão, vou usar uma das pseudoclasses chamada de criança Em seguida, altere a cor de fundo, torne-a branca como a cor do texto. Vou torná-lo primário. Nesse caso, a cor de fundo comum e a cor do texto serão substituídas Ok, então é isso. Tudo parece bom. E com esta seção, terminamos. Vamos seguir em frente e cuidar do próximo. 44. Projeto 4 -Criar e personalizar o Rodapé: Então é hora de criar a última parte de nossos projetos, que será o rodapé Será um filtro simples, terá cinco ícones diferentes relevantes para as cinco seções diferentes. E eles nos permitirão navegar até as seções apropriadas. Além disso, terá um parágrafo com algum texto de direitos autorais. Ok, então vamos começar a criar a marcação HTML Vou inserir novos comentários para a seção seis. Em seguida, abra a tag da seção com o nome da classe, seção seis. Então, dentro desse elemento de seção, teremos duas partes diferentes. O primeiro será o desenvolvimento, que envolverá todos os ícones. Vamos atribuir a cada seção da classe seis ícones. Portanto, no geral, teremos cinco ícones diferentes e eles serão representados usando elementos de link. Então, vou abrir a tag de link com a turma. Eu posso vincular. O ícone em si será uma imagem. Então, vamos pausar aqui a tag de imagem e, em seguida, selecionar a imagem adequada Precisamos da pasta de imagens, depois dos ícones, e temos que selecionar o ponto PNG do ícone Início. Tudo bem, então, como dissemos, no geral, teremos cinco ícones diferentes Vamos duplicar os elementos do link quatro vezes e alterar os nomes das imagens O segundo será o iPhone. Então teremos um MacBook do que um relógio. E a última imagem será AirPods. Ok, finalmente, vamos criar o parágrafo. Ele terá direitos autorais de classe. Em seguida, vou inserir para usar alguns direitos autorais de texto do que uma entidade HTML5 insegura Assinatura de direitos autorais de Emily, precisamos de uma cópia comercial. O ponto e vírgula será seguido por código e criação. Todos os direitos reservados. Tudo bem, isso é tudo sobre a marcação HTML. Vamos continuar e personalizar essa seção. Vou inserir seus novos comentários, seção seis. Da seção seis. Em seguida, selecione os elementos da seção e defina sua largura e altura. Vou definir a largura em 200 por cento. Quanto à altura, vamos fazer com que seja 40% da janela de visualização. Ok, vamos seguir em frente e estilizar os elementos. Na verdade, não teremos muitos estilos nesta seção. Vamos diminuir o tamanho das imagens. Selecione-os e defina com dois tons de RAM. Em seguida, vou aumentar o espaço entre os ícones. Eu posso vincular e usar a margem com os valores de 0,5 rem. Ok? Então, agora, os elementos são colocados no lado esquerdo dessa ação e precisamos colocá-los no centro. Então, vamos prosseguir e atribuir o centro de aula aos elementos da seção Tudo bem, agora vou personalizar o parágrafo. Antes de tudo, vamos cuidar de sua posição. Vamos selecioná-lo e definir sua posição como absoluta. Em seguida, precisamos definir a posição dos elementos dessa seção porque ela é a mãe. Então, vamos definir a posição como relativa. E depois disso, vamos definir a posição inferior do parágrafo. Vamos configurá-lo para cinco rampas. Ok, então o parágrafo está posicionado. E, finalmente, vamos seguir em frente e estilizá-lo. Vou aumentar o tamanho da fonte. Vamos criar 1,5 RAM e, em seguida, criar algum espaço entre as letras. Vamos definir o espaçamento entre letras para 0,1 rampa. Tudo bem, então todos os elementos estão estilizados. E agora, como eu disse, vou fazer esses ícones funcionarem. Depois de clicarmos neles, precisamos navegar até a seção apropriada. Para isso, precisamos adicionar um ID de elemento a cada seção e, em seguida, conectar h atributos de referência dos elementos de link a esses IDs. Então, vamos atribuir aos átrios para nós atributos, nomes de seções próprios Precisamos passar os nomes das seções da Seção um para a Seção cinco. Em seguida, vá em frente e atribua a cada seção elementos id, atributo com os mesmos valores Vamos começar com a primeira seção. Em seguida, vou pegar esse código e colá-lo para cada elemento da seção e também alterar os nomes das seções. Precisamos da seção cinco. Ok, agora, se eu clicar na colher de ícone, navegue até a seção apropriada. Mas não é isso que queremos. Queremos navegar com algum efeito suave. Para fazer isso, precisamos usar uma dessas propriedades CSS chamada comportamento de rolagem com o valor smooth E, na verdade, temos que atribuí-lo ao elemento HTML. Ok, então agora, como você pode ver, tudo funciona bem. Uma vez clicamos no I porque navegamos para as seções relevantes com um pequeno defeito Na verdade, antes de prosseguirmos, farei o mesmo também farei o mesmo com os itens de navegação. Temos aqui quatro links diferentes e precisamos especificar as seções apropriadas, começando pela seção dois até a seção cinco. Então, vamos passar aqui os nomes das seções. Então, depois de clicarmos nos itens de navegação, navegaremos até as seções relevantes. Ok, então estamos quase terminando. Mas eu vou fazer mais algumas coisas aqui. Como você pode ver, o projeto finalizado tem o ícone da Apple na barra de título. Então, vamos adicioná-lo ao nosso projeto de trabalho também. Precisamos abrir a tag de link no elemento principal. Em seguida, temos que passar seu ícone de atalho. E então temos que especificar o caminho do arquivo. Será o ícone inicial, que é colocado na pasta do ícone. Ok, agora temos o logotipo na barra de título. A última coisa que vou fazer é evitar as ações padrão desses dois elementos de link na seção iPhones Porque quando clicamos neles, navegamos até o topo da página. Para fazer isso, precisamos apenas adicionar seus nomes de classe aqui no seletor de consulta Todos os métodos precisam passar seu iPhone btn. Tudo bem, agora o problema está resolvido e na verdade, todo o projeto foi criado A única coisa que precisamos fazer é torná-lo responsivo a diferentes tamanhos de tela 45. Projeto 4 - Torne o projeto responsivo: Tudo bem, quando terminamos de construir nosso projeto, agora é hora de seguir em frente e torná-lo responsivo a diferentes tamanhos de tela Como você sabe, o projeto é construído em uma tela extra grande. Usamos a primeira abordagem do desktop e agora precisamos torná-lo responsivo a diferentes pontos de interrupção Vamos inspecionar a página e mudar para o modo responsivo. Então, no momento, a largura e a altura estão definidas para um tamanho de tela extra grande. Todos já preparei os pontos de interrupção nos quais vou fazer algumas alterações Então, eu não vou perder tempo encontrando-os. Em geral, não há regras rígidas sobre pontos de interrupção. Alguns desenvolvedores definem pontos de interrupção acordo com os dispositivos populares. Mas é melhor definir os pontos de interrupção em cada site individualmente para que ele tenha uma boa aparência em todos os dispositivos diferentes. Ok, vamos seguir em frente e definir o primeiro ponto de interrupção. Acho que precisamos fazer algumas alterações quando o tamanho da tela for menor que 1.500 pixels Então, vamos continuar e criar uma consulta de mídia CSS. Mas primeiro vou inserir seus novos comentários, responsivos e oferecer responsivos Em seguida, crie uma consulta de mídia CSS e especifique a largura máxima como 1.500 pixels No ponto de interrupção, vou diminuir o tamanho da fonte dos elementos HTML Isso diminuirá os tamanhos dos elementos medidos na RAM. Então, vamos definir esse tamanho de fonte para 45%. Então, como você pode ver, todas as seções parecem boas. E agora temos que encontrar o próximo ponto de interrupção, que eu acho que será de 1.100 pixels Então, vamos criar uma nova mídia CSS com largura máxima de 1.100 Primeiro, vou diminuir o tamanho da fonte do elemento HTML e vamos fazer com que seja 40%. Em seguida, vou deixar esses itens de navegação mais ousados porque eles não estão bem visíveis Então, vamos selecioná-lo agora por link e definir a espessura da fonte para 700. Ok, depois disso, vou diminuir o tamanho do título no banner e também precisamos diminuir o parágrafo Então, vamos em frente e começar com o título. Vamos selecioná-lo e definir o tamanho da fonte para oito RAM. Quanto ao parágrafo, vou fazer com que o tamanho da fonte seja de três rampa. Ok, então isso é tudo sobre a primeira seção. A única coisa que vou fazer no ponto de interrupção é mover o botão da seção de relógios para o lado direito Então, vamos selecionar watch btn e definir sua posição correta para 25% Tudo bem, então isso é tudo em relação a esse ponto de interrupção, todas as outras seções parecem boas Vamos seguir em frente e cuidar do próximo, que terá 900 pixels. Então, vamos criar novamente uma nova consulta de mídia CSS e especificar a largura máxima como 900 pixels. Então, nos pontos de interrupção, vou aumentar o tamanho do MacBook Portanto, precisamos selecionar o conteúdo da Seção três. E vou definir a largura para 90%. Em seguida, precisamos aumentar o tamanho do invólucro de carregamento porque, como você pode ver, ele não se encaixa muito bem Então, vamos selecionar o invólucro de carregamento e definir sua largura para 70%. Ok, por fim, vou diminuir o tamanho do logotipo. Vamos selecionar o ícone Font Awesome e definir o tamanho da fonte para seis rampas. Ok, isso é tudo sobre esta seção. A única coisa que vou fazer no ponto de interrupção é diminuir o tamanho do cabeçalho na seção do aeroporto Então, vamos selecionar o título da Seção cinco e definir o tamanho da fonte como 12. Corra. Ok, então com 900 pixels, terminamos. Vamos seguir em frente e encontrar o próximo ponto de interrupção. Serão 700 pixels. Então, vamos criar uma nova mídia CSS e especificar a largura máxima como 700 pixels. Nesse ponto de interrupção, vou esconder completamente os controles do cubo Vamos usar display none. Como você pode ver, os controles estão ocultos e agora precisamos mover o cubo um pouco para baixo. Então, vamos selecioná-lo. Vou movê-lo usando a posição superior. No momento, está definido para menos dois r1. E eu vou fazer uma rampa 3D. Próximo. Vou diminuir o tamanho do logotipo e também vou mudar sua posição. Então eu vou movê-lo para a esquina. Então, vamos definir a posição superior como zero. Quanto à esquerda, vou chegar à rampa. Além disso, vou selecionar o elemento e vamos definir o tamanho da fonte para oito Ran. Ok, isso é tudo sobre o logotipo. Em seguida, vou mudar o layout do banner e do cubo Vou colocar a fila atrás do banner. Para isso, vou definir a posição do banner como absoluta Portanto, considera-se que o cubo acabou atrás do banner. No momento, o texto da bateria não está totalmente legível. E para corrigir isso, vou diminuir a opacidade do invólucro do cubo Então, vamos selecioná-lo e definir a opacidade para 0,7. Então, agora temos um resultado muito melhor. Em seguida, vou esconder essa flecha aqui. Como você lembra, é uma entidade HTML5, faz parte dos elementos do título E para selecioná-lo, vou usar um desses pseudoelementos chamado primeira letra Então, primeiro vamos selecionar elementos de cabeçalho H1, seguidos pela primeira letra Para ocultar o elemento, vou usar visibilidade oculta e opacidade zero. Ok? Portanto, a seta está oculta, mas agora o elemento de cabeçalho não está colocado no centro. Temos que movê-lo um pouco para o lado esquerdo. Para isso, vamos usar posições. Vamos selecionar elementos de cabeçalho H1. E primeiro vou definir sua posição relativa e depois definir a propriedade esquerda como menos cinco rampa Portanto, nesse caso, moveremos o elemento de sua posição atual. Ok, agora parece muito melhor. Antes de passarmos para a próxima seção, vou cuidar do botão dos anúncios em banner Lembre-se de que, quando passarmos o mouse, o botão mudará de forma Não precisamos mais disso porque o cubo é colocado atrás do banner Então, quando passarmos o mouse sobre o botão e precisarmos manter sua forma padrão, vamos selecionar o botão com o mouse Em seguida, suba e encontre a propriedade do caminho do clipe com seus valores. Vou copiá-lo e colá-lo aqui embaixo. Ok, é isso sobre a primeira seção. Vamos passar para o segundo. Eu vou aumentar o tamanho dos iPhones. Quero dizer, o elemento wrapper div. Então, vamos selecioná-lo e definir sua altura e largura. Vou definir a altura para 70 de altura da janela de visualização. Quanto à largura, será de 70 janelas de visualização. Ok, isso é tudo sobre esta seção. Em seguida, vem a seção MacBook, que parece boa. Quanto à seção de relógios, vou mover o botão para o lado direito. Então, vamos selecioná-lo e definir sua posição correta para 15%. Ok, então a seção de relógios parece boa. Vamos seguir em frente e cuidar dos aeroportos. Vou esconder a primeira imagem em. Tudo bem, agora a primeira imagem não tem nenhum nome de classe. Então, vamos seguir em frente e designar uma classe com aeroportos de valor, IMG one Em seguida, selecione-o e torne-o oculto usando display none. Quanto à segunda imagem, vou aumentar sua largura e torná-la 100%. Então, vamos selecionar a segunda imagem e definir sua largura para 100 por cento. Como você pode ver, esse código não funciona porque inicialmente, quando definimos a largura das imagens, ainda gostamos que elas usassem o nome da classe dos elementos pais, seguido pelo nome da tag. E, na verdade, tem uma precedência maior. Então, precisamos adicionar aqui a classe do elemento pai, AirPods Tudo bem, agora o problema está resolvido e a largura da imagem tornou-se 100% Em seguida, vou mudar a cor de fundo do primeiro botão e torná-lo branco. Vamos selecionar o botão. Mude a cor de fundo, torne-a branca. Quanto à cor em si, vou usar aqui a cor primária. Portanto, é considerado plano de fundo e a cor mudou. Além disso, vou adicionar um pequeno efeito de sombra aos botões. Então, vamos usar box-shadow e instituir 0,1 RAM três vezes E como cor, vou usar o D. Ok, isso é sobre a seção do aeroporto. A última coisa que vou fazer no ponto de interrupção é cuidar dos ícones e do rodapé Precisamos diminuir o espaço entre eles. Então, vamos seguir em frente e selecionar Eu posso vincular e usar margem. Vou configurá-lo para zero na parte superior e inferior e duas RAM nos lados direito e esquerdo. Tudo bem, é isso. Sobre esse ponto de interrupção das seções. Parece bom. Vamos seguir em frente e cuidar do próximo, que terá 550 pixels. Então, vamos criar uma nova consulta de mídia CSS com a largura máxima de 550 Então, a primeira coisa que precisamos fazer é diminuir o espaço entre os itens de navegação. Então, vamos selecionar Number Link e definir a margem como zero na parte superior e inferior e 1,5 RAM nos lados esquerdo e direito. Então, a primeira seção parece boa. Vamos passar para o próximo. Vou diminuir o tamanho da fonte do título. Então, vamos selecionar o título da Seção dois e o tamanho desejado para oito Ran. Ok, vamos passar para a próxima seção. Vamos também diminuir o tamanho da fonte desse título de seção. Vamos selecionar o título da seção três. Defina o tamanho da fonte para oito. Corra. Depois disso, vou diminuir o tamanho da fonte do título Informações do MacBook E também vou diminuir o tamanho do botão. Então, vamos selecionar o título Informações do MacBook e definir o tamanho da fonte como fibrina Em seguida, selecione o botão MacBook e defina sua largura e altura Vou definir a largura para 15 RAM. Quanto à altura, vamos fazer com que sejam três RAM. E também diminua o tamanho da fonte. Faça com que seja uma rampa de 1,3. Ok, isso é sobre a seção MacBook. Vamos passar para a próxima seção. Parece bom. Portanto, temos que passar para a seção do aeroporto. Como você pode ver, os botões são colocados um em cima do outro. Precisamos separá-los. Então, vamos selecionar um rapper, botões de aeroporto e definir sua largura, torná-lo 50 RAM. E então, para colocar o conteúdo no centro, precisamos alinhar o texto Ok, então isso é sobre a seção de aeroportos. A última coisa que precisamos fazer nesse ponto de interrupção é diminuir o tamanho dos ícones e do rodapé Então, ainda vamos bloquear o link do ícone seguido pela imagem. E defina a largura para oito RAM. Tudo bem, então é isso. Terminamos com esse ponto de interrupção. Agora temos que seguir em frente e cuidar do último ponto de interrupção, que será de 450 pixels Então, vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 450 pixels. Em primeiro lugar, vou diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 35 por cento. Agora, vou cuidar do logotipo e da barra de navegação. Quero colocá-los verticalmente um em cima do outro e também quero colocá-los no centro Então, vamos selecionar o logotipo e definir suas posições. Vou definir a posição superior para dez RAM do que precisamos na posição esquerda, 50 por cento. E para centralizar o elemento horizontalmente, vamos usar transformar translação com E esse valor, eu vou passar o ano -50 por cento. Portanto, o logotipo está posicionado corretamente. Em seguida, vamos cuidar de uma barra suficiente. Vou definir sua posição de atraso para 50 por cento. Então, novamente, precisamos transformar, traduzir X com -50 por cento Portanto, o número é colocado no centro, mas precisamos definir sua largura porque o alinhamento dos itens de navegação está confuso. Quero agora usar a barra para aproveitar o máximo disponível com. Então, vamos começar com dois conteúdos de mux. Ok, isso é tudo sobre a navegação. Como você pode ver, temos aqui o espaço em branco no lado direito da página da web E, na verdade, isso é causado pelas informações do MacBook. No momento, ele tem uma largura grande e precisamos diminuí-la. Então, vamos selecionar as informações do MacBook e definir a largura para 40 rampa. Ok, agora o problema está resolvido. Vamos voltar para a primeira seção. Precisamos colocar o parágrafo no centro. Então, vamos selecionar p elementos e atribuí-los ao centro de alinhamento de texto Então isso é tudo sobre a primeira seção. Vamos passar para o segundo. Vou aumentar a largura do invólucro das imagens Então, vamos selecionar iPhones e definir sua largura para 75 de largura da janela de visualização Então agora parece melhor. Vamos seguir em frente e diminuir o tamanho da fonte do título da terceira seção. Vamos selecioná-lo e definir o tamanho da fonte para seis rampas. Além disso, vou alterar os tamanhos do título e do parágrafo das informações do MacBook Vamos começar com o título. Vou definir o tamanho da fonte para três RAM do que o preço de silício do MacBook Defina o tamanho da fonte, transforme-o em Ram. Além disso, vou deixar a fonte um pouco mais ousada. No momento, a espessura da fonte está definida como 200 e eu vou torná-la 300. Ok, isso é sobre a seção MacBook. Em seguida, precisamos cuidar dos relógios. Vamos passar novamente para o botão do lado direito, selecionar o relógio BTN e definir a posição correta para 5% Ok? Por fim, vou diminuir a largura dos ícones e do rodapé Então, vamos selecionar o link do ícone seguido pela imagem. E defina a largura. Faça seis Ran. Ok, então isso é tudo sobre o nosso projeto. Ele responde a diferentes tamanhos de tela. E, na verdade , terminamos com isso. Espero que você tenha gostado desses projetos porque usamos muitas coisas interessantes e legais. Então, vamos passar para o próximo projeto. 46. Projeto 5 - Pré-visualização do projeto: Tudo bem, então é hora de construir nosso próximo projeto, que será o clone de um dos mais populares e comumente sites mais populares e comumente usados chamado Paypal, criará a interface de usuário das diferentes Estou na página principal, páginas de login e inscrição. É claro que não será o clone exato com todas as funcionalidades Como eu disse, criaremos apenas uma interface de usuário com HTML, CSS e JavaScript. O Paypal parece diferente em diferentes países. A interface do usuário muda com frequência de tempos em tempos. Portanto, não se preocupe se esse não for o clone exato da interface atual Tudo bem, então antes de começarmos a escrever o código, primeiro, vamos descrever a aparência do projeto Então, como eu disse, criaremos três páginas diferentes, login principal e inscrição. Começaremos com a página principal. Ele consistirá em algumas seções diferentes. A primeira seção será o banner com navegação Temos aqui vários itens de navegação. Se eu passar o mouse sobre eles, o menu suspenso será Ele mudará quando passarmos mouse sobre outro item de navegação Além disso, teremos aqui dois botões diferentes para fazer login e se inscrever. Se eu clicar neles, navegaremos até a página correta. Então, o banner será seguido pela segunda seção. Ele incluirá três partes diferentes com Font, ícones incríveis, alguns elementos de texto e botões. Em seguida, teremos essa seção azul com alguns parágrafos diferentes A seguir, criaremos esta pequena seção aqui com uma imagem e três etapas diferentes. Abaixo, teremos um botão para se inscrever, seguido pelo rodapé Tudo bem, então vamos ver a página principal. Vamos dar uma olhada na página de login. Será bastante semelhante à página de login original. Teremos aqui dois campos de entrada com botões. Essa provavelmente é a página de inscrição. Ele consistirá em duas partes. No lado esquerdo, teremos várias imagens dos clientes. Quanto ao lado direito, ele incluirá duas opções diferentes. Se queremos criar uma conta pessoal ou comercial. Tudo bem, então isso é tudo sobre o projeto. Como de costume, vamos torná-lo responsivo a diferentes tamanhos de tela Se eu inspecionar a página e mudar para o modo responsivo, você verá que ela é Uma coisa a observar aqui: em telas menores, não teremos mais os menus suspensos Eles se transformarão no menu assim. Ok, então é isso. Estamos prontos para começar a construir o projeto. Então, vamos seguir em frente. 47. Projeto 5 - Criar e personalizar a página de destino: Tudo bem, acho que estamos prontos para começar. Eu criei uma nova pasta no desktop chamada site de portfólio, na qual tenho outra pasta para as imagens. Vamos abrir este projeto no código VS e criar nossos arquivos de trabalho. Portanto, no geral, teremos três arquivos diferentes para HTML, CSS e JavaScript. Vamos criá-los. Depois disso, vou abrir o arquivo index.html e inserir um documento HTML básico. Para isso, vamos usar a Emirates. Precisamos colocar um ponto de exclamação e, em seguida, pressionar Enter ou tab Vamos mudar o título. Vou inserir o site do seu portfólio. Em seguida, vou vincular o arquivo CSS e JavaScript ao HTML. Especifique aqui o caminho da série como arquivo. Em seguida, vou abrir a tag de script logo acima da tag do corpo de fechamento. E vamos inserir aqui parte do arquivo JavaScript no atributo source. Além disso, precisamos trazer alguns links. Ao longo do projeto, usaremos Font, ícones Awesome e também uma das fontes do Google. Então, vamos prosseguir e pesquisar Font Awesome, CDN js. Em seguida, vá para o primeiro link e selecione aqui CSS. Em seguida, pegue o link. Em seguida, vou abrir uma tag de link nos elementos principais. Em seguida, cole aqui o URL. Depois disso, vou ao site do Google Fonts. Então, ao longo do projeto, vou usar uma fonte chamada geost. Em seguida, selecione todos os estilos diferentes, exceto o Itálica. Pegue o link e cole-o na cabeça. Ok, finalmente, vamos executar o projeto no navegador. Para isso, vou usar um dos pacotes de código do VS chamado Live Server. Isso nos permite executar a vida útil do projeto no navegador e fazer alterações e atualizações sem atualizar a página todas as vezes Então, eu recomendo usar este pacote. Tudo bem, a última coisa que vou fazer é colocar o editor e o navegador, assim E então comece. Construiremos o projeto seção por seção. Primeiro, criaremos a marcação HTML e depois personalizaremos essa seção usando CSS Vamos começar com a página de empréstimo. Vamos abrir os empreendimentos, que serão o contêiner. Na verdade, quero usar comentários para definir o início e o fim de cada seção. Então, essa será a primeira seção. Então, precisamos aqui N da Seção 1 que abre o elemento da seção com uma classe. Seção um. Como dissemos, a primeira seção será a página de destino. Teremos aqui, cabeçalhos, imagem e o botão Vamos abrir o elemento de cabeçalho H1 com um título de seção de classe, um título com o desenvolvedor web de texto Em seguida, teremos uma imagem. Vou selecionar Imagem, o nome John Smith dot JPG na pasta de imagens. Então, como valor do atributo alt, vou passar aqui, John Smith. E também precisamos de atributo de classe, valor, pessoa, IMG. Portanto, a imagem é seguida por outro título no qual teremos o nome completo da pessoa. Então, vamos abrir o elemento de cabeçalho h3 com o nome da pessoa da turma e o instituto John Smith E, finalmente, precisamos de um botão que será representado pelo elemento link. Vamos atribuir a ele. A classe com valor é a seção um, btn. E também insira seus projetos de texto. Tudo bem, então a marcação HTML é criada para a primeira seção Agora é hora de começar a escrever um pouco de CSS. Vamos abrir o arquivo style.css e adicionar primeiro, criar alguns estilos comuns e de redefinição. Antes disso, vou inserir seus comentários, redefinições e estilos comuns. E depois n de redefinição e estilos comuns Em seguida, vou selecionar cada elemento usando um asterisco Então, vou me livrar da margem e do preenchimento padrão. Vamos definir os dois como zero. Em seguida, vou remover o contorno padrão sem contorno nenhum Além disso, vamos definir o tamanho da caixa de borda. Em seguida, vou me livrar dos estilos padrão do link e também dos elementos da lista. Não vamos usar nenhuma decoração de texto. E tipo de estilo de lista, nenhum. Depois disso, vamos definir a família de fontes para Joseph sans-serif, que é o Google que é o E, finalmente, vou definir a espessura da fonte para 400. Tudo bem, então vamos ver a roseta e os estilos comuns são aplicados. Como sempre. Vou usar uma RAM como unidade de medida agora, uma RAM é igual a 16 pixels porque o tamanho da fonte do HTML é igual a 16 pixels por padrão, quero converter uma RAM em dez E para isso, precisamos diminuir o tamanho da fonte do HTML. Vamos defini-lo para 62,5 por cento. Como você pode ver, os tamanhos das fontes dos elementos diminuíram. Vamos começar a personalizar os elementos desta seção. Vou inserir seus comentários, seção um. E, em seguida, final da seção um. Em seguida, selecione os elementos da seção. Em primeiro lugar, vou definir largura e altura. Vamos definir a largura para 100 por cento. Quanto à altura, vou configurá-la para 100% da janela de visualização Então, precisamos de 100 vh. Em seguida, vou definir a imagem como plano de fundo em tela cheia Então, primeiro vamos usar o gradiente linear. Vou usar seu valor RGBA cor branca e com a opacidade Em seguida, precisamos novamente de RGBA com cor branca e com opacidade de 0,3 Depois disso, vamos definir o URL da imagem. Precisamos aqui do caminho da imagem. O nome da imagem será bg dot JPG. O URL será seguido pelo centro e sem repetição. Ok, finalmente, vamos definir o tamanho do plano de fundo a ser coberto. Como você pode ver, esta seção tem o plano de fundo em tela cheia Em seguida, vou colocar esses elementos no centro da página. Para isso, vamos usar o flexbox. Precisamos de display flex. Então eu vou mudar a direção porque precisamos colocar os elementos na coluna. Portanto, precisamos de uma coluna de direção flexível. Então, para enviar para os itens flexíveis dentro do contêiner, precisamos justificar o centro de conteúdo e alinhar o centro Certo? Então é isso sobre esse elemento da seção. Vamos continuar e personalizar os elementos individuais. Vou começar com o primeiro título. Vamos selecioná-lo. Aumente o tamanho da fonte. Eu vou fazer com seis RAM. Também altere o peso da fonte, torne-o 700. Em seguida, vou definir a cor do texto para branco. E também altere a cor de fundo. Vou usar aqui call ou E para 1c6f. O título parece bom, mas precisamos adicionar mais alguns estilos. Vou criar algum espaço dentro dos elementos usando o preenchimento Vamos fazer com que o preenchimento seja zero na parte superior e inferior. E três correram pelos lados esquerdo e direito. E também vou criar algum espaço na parte inferior dos elementos usando a margem inferior Five ran. Em seguida, vou transformar o texto em maiúsculas. E também vou criar algum espaço entre as letras. Portanto, precisamos que o texto transforme o espaçamento entre letras maiúsculas com o valor de uma repetição. Depois disso, vamos criar uma borda na parte inferior do título e também criar algum efeito de sombra. Vamos definir para a parte inferior de 2,3 RAM, sólida e branca. Em seguida, defina a sombra do texto com os valores apontando para Ram Point para RAM do que uma RAM. E a cor 555. Tudo bem, a última coisa que vou fazer com o título é distorcê-lo um pouco Para isso, vamos usar Transform ou essa função Q. Vou inclinar os elementos em menos dez graus. Ok, então estamos indo, terminamos. Vamos passar para a imagem. Vamos selecioná-lo. Primeiro de tudo, largura e altura definidas. Vou configurar os dois para 25 RAM. Que, para manter a qualidade da imagem, precisamos de uma capa de alimentação de objetos. E também para fazer sua forma circular, vamos usar o raio da borda, Ok? Em seguida, vou criar uma borda. Vamos definir seu tamanho 2.7 até que o estilo seja pontilhado e a cor seja E para um, C6, f. Também mude a cor de fundo. Também mude a Vou usar o valor RGBA com a cor branca e com a opacidade E então crie algum espaço usando o preenchimento, faça com 0,5 RAM E por último, diminua ligeiramente a opacidade. Vamos fazer com que seja 0,9. Tudo bem, isso é tudo sobre a imagem. Em seguida, vou personalizar outros elementos de cabeçalho. Então, vamos selecioná-la, aumentar o tamanho da fonte aumentá-la. Em seguida, mude a cor, torne-a branca. E também altere a cor de fundo. Use novamente a cor E4 um, c, seis. Em seguida, vou criar algum espaço na parte superior do título e também dentro dele. Use a margem e defina-a para cinco rem na parte superior e inferior e zero nos lados esquerdo e direito. Quanto ao preenchimento, vou configurá-lo para 0,5 rem na parte superior e inferior e três rem nos lados esquerdo e direito Depois disso, vamos criar algum espaço entre as letras usando o espaçamento entre letras de 0,3 RAM E também vou inclinar o título um pouco como o primeiro título Use Transform skew com o valor menos dez graus. Tudo bem, então com o segundo título, terminamos e agora é hora de personalizar o último elemento desta seção, que será o botão Vamos seguir em frente e selecionar esse elemento. Em primeiro lugar, vamos alterar o tamanho da fonte, executá-la em 1.7 e também definir a espessura da fonte para Em seguida, vou mudar a cor. Vamos fazer 333 e definir a cor de fundo para branco. Depois disso, vamos criar uma borda. O valor é 0,3 em estado sólido e nós a chamamos de 333. Além disso, quero criar algum espaço dentro do botão usando o preenchimento Vamos configurá-lo para 0,5 rem na parte superior e inferior e um rem nos lados direito e esquerdo. Em seguida, transforme o texto em maiúsculas e crie algum espaço entre as letras Vamos fazer uma rodada de 0,3. Tudo bem, então com a primeira seção, terminamos. Parece bom. E agora temos que seguir em frente e cuidar da próxima parte, que será a barra de navegação 48. Projeto 5 - Criar e estilo de navegação: Em primeiro lugar, vou criá-lo e estilizá-lo e depois faremos com que a barra de navegação funcione mais tarde Vamos prosseguir e criar a marcação HTML. Vou inserir sua nova barra de navegação de comentários. Então n de não funcionar. Então, vamos abrir elementos de navegação em HTML5 com a classe Portanto, no geral, teremos que, para os itens de navegação, eles serão representados como links. Portanto, é um elemento de link aberto com o link do número da classe com o texto inicial. Vamos duplicar o elemento do link três vezes e alterar o conteúdo O segundo item será sobre. Então teremos portfólio. Finalmente, precisamos entrar em contato. Tudo bem, então agora o número é colocado no final da página Portanto, não é totalmente viável. Preciso de algum espaço na parte inferior do nanoporo para mostrar as coisas Então, vou usar algumas tags B are. Vamos usar o Emmet. Precisamos ser nosso asterisco superior e 50. Então, agora aqui temos algum espaço. Então, isso é dito sobre HTML. Vamos começar a escrever o CSS. Vamos continuar e inserir novos comentários. Barra de navegação e, em seguida, n são mais nobres do que elementos de navegação selecionados. Em primeiro lugar, vou definir a largura e a altura. Vamos definir a largura para 100 por cento. Quanto à altura, vamos fazer isso para a RAM. E também mude a cor de fundo. Vamos usar aqui chamado ou E para um, C, F. Ok, seguir vou posicionar os itens de navegação no sentido de Napa E para isso vou usar o flexbox. Na verdade, já usamos essa técnica e vamos usá-la algumas vezes ao longo do projeto. E para evitar escrevê-lo repetidamente, vou criar uma nova classe em estilos comuns. Vamos ligar para o centro. Em seguida, insira aqui, exiba o flex, justifique o centro do conteúdo e alinhe os itens ao centro e alinhe os itens Então, para aplicar esses blocos, precisamos atribuir um centro de classe aos elementos Usamos esses blocos com a Seção 1. Então, vamos prosseguir e atribuir a ele um centro de cluster. Então, livre-se desses estilos a partir daqui. Em seguida, atribua também o centro de classe ao elemento nav. Tudo bem? Então, como você pode ver, nada é alterado no empréstimo. Quanto à barra de navegação, os itens são colocados no centro momento, a última coisa em relação ao Napa é criar um pequeno efeito de sombra Então, vamos usar a sombra da caixa com os valores apontando para Ram. Aponte para RAM do que 0,5 RAM. E a cor 555. Ok, isso é sobre o elemento navbar nav. Vamos personalizar os elementos do link. Então, primeiro de tudo, vou mudar o tamanho da fonte. Vamos fazer 1,7 rem. Além disso, vou definir a espessura da fonte para 600 e, em seguida, mudar a cor do texto, torná-lo Ok, em seguida, precisamos de algum espaço entre os itens. Vamos criar esse espaço usando margem. Vou definir a margem zero na parte superior e inferior. E depois três RAM nos lados direito e esquerdo. Além disso, vamos criar espaço entre as letras. Vamos usar espaçamento entre letras com valor 0,3 RAM e também transformar texto em maiúsculas Tudo bem, então a última coisa que vou fazer relação à barra de navegação é criar um efeito de foco. Vamos dar uma olhada no projeto finalizado. Então, quando passamos o mouse sobre os itens, eles mudam de cor Além disso, a linha é exibida abaixo do item. Essa linha será criada usando pseudoelementos anteriores Então, vamos seguir em frente e selecionar o elemento de link com os pseudoelementos anteriores Antes de tudo, vamos definir o conteúdo. Vou esvaziá-lo. Em seguida, vou definir a largura para 130%. Além disso, defina a altura, faça com que ela aponte para a RAM e altere a cor de fundo. Vamos torná-lo branco. Então, no momento, o elemento não está visível. E para corrigir isso, vamos definir a posição como absoluta. Em seguida, precisamos posicionar em relação ao link superior porque vou posicionar a linha de acordo com o elemento pai, que é um cochilo ou link As linhas são visíveis, mas não estão posicionadas da maneira correta. Vou definir as posições direita e inferior. Então, vou definir a posição correta para -15% porque a largura da linha é igual a 130% E quando exibido , os itens serão colocados no centro. Quanto à posição inferior, vamos configurá-la para -0,3 rodadas Tudo bem, então tudo está pronto para criar um efeito de foco. Por padrão, vou esconder as linhas. Então, vamos em frente e tornar sua largura zero. Em seguida, selecione o link numérico com o mouse, seguido pelo pseudoelemento anterior e defina a largura para 130% Além disso, vamos usar a transição. Precisamos aqui de largura e 0,2 s. Ok? Então, como você pode ver, o efeito de foco funciona bem E, por fim, vou mudar a cor dos itens ao passar o mouse Então, vamos prosseguir e selecionar agora Berlim com o mouse. Em seguida, mude a cor, torne-a branca. E também use transição com os valores de cor e 0,2 s. Tudo bem, então tudo funciona perfeitamente O romance foi personalizado e agora é hora de passar para a próxima seção. 49. Projeto 5 - Crie e personalize barras de progresso: A próxima seção será a seção Sobre mim. Ele consistirá em um título, algumas barras de progresso que mostram diferentes habilidades do desenvolvedor e vários ícones de mídia social com alguns serviços. Vamos começar a criar a marcação HTML. Vamos inserir novos comentários, seção dois e seção dois. Essa seção de classe de elemento de seção aberta também. Então, dentro do elemento da seção, haverá três partes principais. O primeiro será o título. Vamos abrir o chefe de governo H1 com o título da seção dois da classe e inserir aqui sobre mim. Em seguida, teremos barras de progresso. Então, vou abrir um elemento div, que será o wrapper, assinar com ele as barras de progresso da classe, assinar com ele as barras de progresso da classe Então, no geral, teremos sete barras de progresso. Vamos criar o primeiro e depois duplicá-lo seis vezes. Então atribuído à barra de progresso do desenvolvimento. Em seguida, insira seu parágrafo com o texto do progresso da aula. Teremos aqui diferentes tecnologias. O primeiro será HTML, depois o elemento open span, que incluirá o número da porcentagem. Vamos escrever aqui 97, seguido pelo sinal de porcentagem. E, finalmente, precisamos do elemento div para progredir. Presente. A primeira barra de progresso é criada. Vamos duplicá-lo seis vezes e depois mudar o conteúdo. Então, o segundo será CSS com 89%. Então teremos JavaScript 85 por cento. Então o próximo será Sass, 87%. Então o React está com 80 por cento, o NodeJS com E finalmente, teremos o Mongo DB com 50 por cento. Ok? Portanto, temos aqui barras de cabeçalho e progresso. Em seguida, precisamos criar a terceira parte da segunda seção. Serão Serviços. Então, vamos abrir desenvolvimentos com os serviços de cluster. Portanto, no geral, teremos quatro serviços diferentes. Vamos criar o primeiro, desenvolvimento aberto com o serviço de classe. Ele incluirá dois elementos diferentes. O primeiro será Font, ícone incrível. Então, abra o elemento I com as classes, FAR, uma lâmpada. Então, precisamos do elemento de cabeçalho H2 com o título de serviço de classe Vamos inserir aqui criado. O primeiro serviço está pronto. Vamos duplicá-lo três vezes, mudar os nomes das classes e os cabeçalhos A segunda será a resolução de problemas do FASFA Cut. Então teremos o FAS, um medidor de taco, e o rumo será rápido E para o último serviço, vou usar suas aulas de economia, FAS, um foguete E como título, vamos inserir aqui a dinâmica. Tudo bem, então a marcação HTML está pronta. Em seguida, temos que seguir em frente e personalizar esses elementos. Vamos continuar e inserir novos comentários. Seção dois e seção dois. Em seguida, selecione os elementos da seção. E antes de tudo, largura e altura definidas. Eu vou configurar os dois. 200%. Também cria algum espaço usando o preenchimento Vou definir o preenchimento para 15 RAM na parte superior do que zero no lado direito. Dez corriam na parte inferior e zero no lado esquerdo. Além disso, vou definir a cor de fundo para branco. Por padrão, é branco. Mas de qualquer forma, vou defini-lo. Tudo bem, a seguir vou centralizar os elementos horizontalmente. Vamos usar o flexbox. Nesse caso, não precisamos do cluster center porque não vamos usar todos os estilos dessa classe. Portanto, precisamos da flexibilidade da tela, depois temos que mudar a direção da flexão Vamos fazer uma coluna. Em seguida, coloque os elementos no centro horizontalmente usando alinhar o centro dos itens Tudo bem, vamos ver o elemento da seção Sobre Vamos seguir em frente e personalizar o título. Selecione o título da Seção dois. Vamos aumentar o tamanho da fonte, torná-la com cinco RAM. Também mude a cor que precisamos aqui. 333. Em seguida, transforme o texto em maiúsculas e crie algum espaço entre as letras usando o espaçamento entre letras, o valor 0,5 Em seguida, precisamos de algum espaço na parte inferior do título. Além disso, vou adicionar uma borda inferior e um pouco de sombra. Então, vamos definir a margem inferior para 15 rampa. Em seguida, crie uma borda na parte inferior com valores de 0,3 RAM sólidos e a cor 333 E também use sombra de texto com os valores point to ram, point to ram 0.5 rem e a cor 555 Tudo bem, então isso é tudo sobre o elemento de cabeçalho. Vamos seguir em frente e personalizar as barras de progresso. Vou selecionar wrapper, que tem o nome da classe progress bars wrapper E crie algum espaço na parte inferior usando margem e valor inferior Tan around. Em seguida, vou selecionar a barra de progresso em si. Primeiro, vamos definir a largura e a altura. Vou definir a largura para 60 RAM. Quanto à altura, vamos fazer com que sejam três RAM. E também altere a cor de fundo. Use seu C. C, C. Ok. Agora temos duas barras de progresso separadas, então precisamos de algum espaço entre elas. Vamos criar espaço usando margem. Vou configurá-lo para 1,5, executado na parte superior e inferior e zero nos lados esquerdo e direito. Além disso, vou fazer com que os cantos sejam ligeiramente arredondados. Use border-radius com o valor 0,3 RAN . Finalmente, use box-shadow com valores point to ram, point to ram, uma RAM e a cor Ok, isso é sobre a barra de progresso. Vamos seguir em frente e personalizar o texto. Então, selecione Parágrafo e defina sua posição como absoluta. Além disso, precisamos posicionar em relação ao elemento pai. Em seguida, defina a propriedade esquerda como uma execução. Depois disso, vou aumentar o tamanho da fonte. Vamos fazer 1,5 rem e também tornar o texto branco. Tudo bem, depois disso, vou personalizar os elementos de extensão Quero dizer esses números. Então, vamos prosseguir e selecioná-lo. Em primeiro lugar, vou criar algum espaço nos lados esquerdo e direito usando margem. Vamos defini-lo como zero na parte superior e inferior. 0,5 rem nos lados esquerdo e direito. Esse aumento no tamanho da fonte, faz com que seja 1,8 Ran. E também altere a espessura da fonte. Vou configurá-lo para 700. Tudo bem, então, com o texto, terminamos. Vamos seguir em frente e estilizar os elementos div percentuais de progresso. No momento, vou definir a porcentagem manualmente. Quero dizer, todas as barras de progresso terão a mesma porcentagem, mas eventualmente a alteraremos com JavaScript. Então, vamos selecionar o progresso presente. Defina sua largura para nove por cento. Isso provavelmente é altura. Vamos fazer com que seja 100%. Então eu vou mudar a cor de fundo. Vamos usar sua cor, E4, e1, veja seis F. E também fazer os cantos arredondados usando o raio da borda com o valor 0,3 Tudo bem, então vamos ver a barra, as barras de progresso. Vamos passar para a terceira parte desta seção, que serão os serviços. Vamos selecionar o desenvolvimento rápido. Antes de tudo, defina a largura e a altura. Vou definir a largura para 100%. Quanto à altura, vamos fazer com que seja 30% da janela de visualização. Em seguida, vou colocar os serviços horizontalmente em uma linha com algum E para isso vou usar o Flexbox. Vamos usar aqui o display flex. Isso para criar espaço. Quero dizer, até mesmo espaço entre os itens. Vamos usar o espaço justify content uniformemente. Em seguida, para centralização vertical, use alinhar o centro dos itens Tudo bem, então, com a embalagem, terminamos. Vamos prosseguir e personalizar o serviço em si. Vou colocar elementos no centro. Então, vamos usar o centro de alinhamento de texto. Ok, vamos seguir em frente e personalizar os ícones do Font Awesome. Então, primeiro de tudo, vou aumentar o tamanho da fonte. Vamos fazer com que sejam dez RAM. Em seguida, mude a cor. Use sua data, comeu, comeu. Também crie espaço na parte inferior. Use margin-bottom para executar. E então crie algum efeito de sombra. Use texto. A sombra com um valor é 0,11, 0,1, 0,5 rem e a cor 555 Tudo bem, vamos ver os ícones Font, Awesome. Depois disso, precisamos cuidar dos títulos. Então, vamos selecionar o serviço H2, aumentar o tamanho da fonte, chegar ao Ram Mude a cor. Faça com que seja branco. Além disso, vou mudar a cor de fundo. Vou usar cores ou 777. E então defina a largura, faça com que seja 25 percursos. Em seguida, vou criar algum espaço entre as letras usando o espaçamento entre letras com o valor 0,3 RAM Também vou inclinar um pouco o título. Então, vamos usar Transform skew com um valor de menos dez graus Finalmente, vou criar alguma sombra usando sombra de caixa com os valores apontam para ram, pontos para executar 0,5 RAM, e nós a chamamos de 555 Tudo bem, então os serviços estão estilizados. Estamos quase terminando esta seção. A única coisa que vou fazer é mudar ligeiramente as posições do primeiro e do último serviço. Eu vou movê-los para cima. Vamos selecionar esses elementos usando pseudoclasses de primeiro filho e último Vou selecionar os dois simultaneamente. Em seguida, use align self, flex, start. Ok, então, finalmente, terminamos com esta segunda seção. É personalizado. Parece bom, e agora temos que passar para a próxima seção. 50. Projeto 5 - Criar e personalizar a seção de projetos: A próxima seção será a seção do projeto. Consiste em um título e alguns projetos diferentes. Se passarmos o mouse sobre eles , alguns detalhes serão exibidos com bons efeitos de transição Temos aqui também um botão, vá para o vídeo. Inclui o link do vídeo adequado em nosso canal do YouTube. Tudo bem, vamos continuar e, como sempre, começar a criar a marcação HTML Vamos inserir seus novos comentários. Seção três. Em seguida, final da Seção três. Em seguida, abra o elemento da seção com a seção três da classe. Nesta seção, teremos duas partes principais. O primeiro será o título. Quanto à segunda parte , será o projeto. Vamos abrir os elementos do título H1 com a classe, título da seção três com o texto, meus projetos Em seguida, vou abrir um elemento div, que será o invólucro dos projetos Você deve ter um invólucro de projetos de classe. Então, no geral, teremos nove projetos semelhantes. Eu vou criar o primeiro e depois vamos duplicá-lo oito vezes. Então, vamos abrir uma tag div com um projeto de classe. Cada projeto terá três partes diferentes. O primeiro deles serão os textos do projeto, nos quais teremos dois títulos diferentes O primeiro será o nome do projeto. Vamos abrir o elemento de cabeçalho H2 com um nome de projeto de classe e inserir seu site de arquiteto Os próximos elementos do título mostrarão as tecnologias usadas para criar um projeto. Então, vou abrir os elementos do cabeçalho H4 com as tecnologias de projeto da classe Vamos inserir seu HTML, CSS e JavaScript. Tudo bem, vamos falar sobre a primeira parte. Em seguida, temos uma imagem, elementos de imagem abertos. Vamos especificar aqui o caminho da imagem. Nós precisamos. Projete um ponto JPG da pasta de imagens. E também vou atribuir ao atributo de classe de imagem com o projeto de valor IMG Quanto à terceira parte, será um botão que será representado como o link. Então, vamos atribuir a ele o link do projeto de classe. Além disso, vou usar o atributo target com um valor sublinhado em branco Isso nos permitirá abrir o link em uma nova guia. Por fim, vamos inserir aqui o texto para ir para o vídeo. Ok, então o primeiro projeto está pronto. Vou duplicá-lo oito vezes e depois fazer algumas alterações A primeira coisa que vou fazer é inserir o link do vídeo. Na verdade, eu preparei esses links em um arquivo de texto. Então, vou pegá-los e inseri-los aqui. Na verdade, você pode incluir esses links ou não. Depende de você. O segundo projeto será orçamentário, criado pelo React js. Então precisamos aqui do projeto para JPEG. E também insira o link para você. Ok, a próxima será a Casa Branca , criada com base em HTML, CSS e JavaScript. Então, vamos deixá-los aqui como estão. Em seguida, altere o nome da imagem. Precisamos projetar JPG de três pontos e inserir aqui o link do YouTube. Ok, em seguida, temos o Gerenciador de Tarefas com React js. Também precisamos aqui do projeto quatro. E depois o link. O próximo projeto será o caminho com HTML, CSS e JavaScript. Então precisamos do projeto cinco. E também o link. Em seguida, preparamos a receita de comida. É criado usando React js. Precisamos aqui para projetar seis. E o link. Em seguida , temos a apresentação de slides É criado com base em HTML, CSS e JavaScript. Altere o nome da imagem, precisamos do projeto sete e, em seguida, institua o link. O próximo projeto será o menu de hambúrguer. Ele é criado usando HTML, CSS e JavaScript. Além disso, vamos mudar o nome da imagem. Precisamos do projeto oito e instituímos o link. E o último projeto será o menu CSS Grid, criado novamente com HTML, CSS e JavaScript. E o nome da imagem será Project Night. Também cole aqui o último link. Tudo bem, então a marcação HTML está preparada e agora temos que começar a escrever um pouco Vamos inserir novos comentários. Seção três. Em seguida, final da Seção três. Em seguida, selecione os elementos da seção. Defina sua largura e altura. Vou definir para os dois 200 por cento. Além disso, vou criar algum espaço dentro desta seção usando preenchimento Vamos configurá-lo para dez rem na parte superior e inferior e torná-lo zero nos lados direito e esquerdo. E também altere a cor de fundo. Vou usar aqui as cores E, F. Em seguida, vou colocar o conteúdo no centro desta seção. Para isso, vamos usar o flexbox. Precisamos mostrar fatos. Então eu vou mudar a direção. Você vê sua coluna de direção flexível. E, finalmente, use o centro de alinhamento de itens. Tudo bem, então o conteúdo é colocado no centro e agora vou personalizar o título Na verdade, será semelhante ao título da seção anterior. Então, em vez de escrever os mesmos estilos repetidamente, vou atribuir aos dois cabeçalhos os mesmos nomes de classes, e os estilos serão aplicados a ambos ao mesmo tempo Então, vamos usar o título da seção da classe e também alterar a classe no arquivo CSS. Em seguida, coloque esses blocos em estatísticas comuns. Como você pode ver, o título da terceira seção está estilizado Vamos passar para os projetos. Vou selecionar a tag wrapper div. Vamos definir a largura, torná-la 80%. Então, vou colocar os projetos no centro do invólucro E para isso, eu quero usar o flexbox. E, na verdade, em vez de escrever essas toalhas aqui, vamos usar o centro de agrupamento, que preparamos anteriormente. Além disso, vou usar a embalagem flexível com a embalagem de valor Então, como você pode ver, os projetos são bem colocados lado a lado Vamos prosseguir e personalizar o projeto em si. Em primeiro lugar, vou colocar o conteúdo do projeto no centro. Para isso, precisamos usar novamente, livros de fluxo Podemos nos atribuir a cada centro de cluster do projeto ou definir novamente, conforme mostrado aqui. Nesse caso, vamos usar as propriedades do flexbox aqui no CSS porque atribuir ao cluster a cada projeto levará mais tempo Portanto, precisamos de exibição flexível e, em seguida, direção flexível, coluna Precisamos justificar o centro de conteúdo e alinhar o centro de itens. Em seguida, vou criar algum espaço entre os projetos. Vamos fazer isso usando margem. Vou configurá-lo para uma RAM. Também como cor de fundo definida. Faça com que seja branco. E, finalmente, use sombra de caixa com os valores 0,3, 0,3 RAM do que 0,5 rem. E nós os chamamos de 777. Tudo bem, isso é tudo sobre o projeto agora. Vamos seguir em frente e personalizar os elementos do projeto. E então criaremos um efeito de foco. Vou selecionar os textos do projeto. Vamos atribuir a um centro de alinhamento de texto Além disso, preciso de espaçamento lateral para tudo Vamos fazer com que 0.1 funcione. Depois disso, vamos selecionar o nome do projeto. Mude o tamanho da fonte, faça três voltas. Em seguida, vou definir a espessura da fonte para 700. Defina também a cor, torne-a 333. E, finalmente, farei com que os nomes dos projetos capitalizem usando a transformação de texto Capitalizar. O título parece bom. Vamos seguir em frente e personalizar as tecnologias selecionadas. Eu vou mudar o tamanho da fonte. Vamos criar 1,8 RAM e, em seguida, definir a cor para E4, e1 Veja seis F. Ok, a seguir vou diminuir a largura da imagem selecionada e transformar sua largura em dram Ok, então, finalmente, precisamos personalizar o link. Então, vamos selecioná-lo. No início. Vamos definir o tamanho da fonte, fazê-la funcionar. Em seguida, altere o peso da fonte, torne-o 500. Vou usar um conjunto chamado a2, a3, a3, a3. E também cria espaço entre as letras. Vamos fazer com que 0.1 funcione. Depois disso, vou criar uma borda. Vamos atribuir valores reais ao ponto, rodamos sólido e a cor E4, e1, veja seis F. Então vou criar algum espaço dentro do link Vamos fazer com que seja zero na parte superior e inferior e um rem nos lados direito e esquerdo. E, finalmente, defina a cor de fundo para branco. Tudo bem, então todos os elementos são personalizados e agora temos que criar um efeito de foco. Vamos começar com um texto de projeto. Eu vou definir essa posição. Vamos torná-lo absoluto. Em seguida, precisamos da posição relativa ao projeto, que é o elemento pai. Em seguida, defina uma propriedade superior para menos dez rampas. Então, como você pode ver, a posição do imposto do projeto foi alterada. Vamos selecionar o projeto com o mouse, seguido pelos textos do projeto Digamos que a posição superior tenha cinco RAM. E então use a transição com um valor superior a 0,3 s. Ok? Então, quando passarmos o mouse sobre os projetos o imposto do projeto passará de cima para baixo Agora eu quero fazer o mesmo com o elemento link. Vamos mudar sua posição. Vou defini-lo como absoluto. Então, precisamos da posição inferior menos cinco RAM. Depois disso, vou selecionar projetos com o mouse, seguido pelo link do projeto Então, ao passar o mouse, vou ajustar o botão para fibrina. E também vou usar transição com valores partidários de 0,37 Tudo bem, agora, se eu passar o mouse sobre o projeto, o elemento de link padrão também se moverá Depois disso, vou diminuir a opacidade da imagem Vamos prosseguir e selecionar o projeto que passaria mouse seguido pela imagem do projeto Então, vou definir a opacidade para 0,2. Além disso, vamos usar a transição com os valores de opacidade de 0,3 s. Então, agora o efeito parece melhor Em seguida, vou esconder o conteúdo por padrão. Para isso, vamos atribuir overflow hidden ao projeto. Agora, o conteúdo está oculto por padrão. E quando passarmos o mouse sobre os projetos, eles serão exibidos. Temos aqui um pequeno problema. Os textos do projeto acabam atrás da imagem e não podemos selecioná-la. Então, vou usar o índice Z com um valor, digamos dez. Ok? Então, agora o problema está resolvido. A próxima coisa que eu quero fazer é adicionar algum tempo de atraso aos textos do projeto e também ao link. Depois de passar o mouse sobre o projeto primeiro, quero diminuir a opacidade da imagem e depois exibir o Mas uma vez que saímos do mouse, não precisamos mais de um atraso. Portanto, precisamos usar a transição com a pseudo-classe hover Vamos usar sua parte superior com uma duração de 0,3 s. E então é especificado o tempo de atraso de 0,3 s. Em seguida, precisamos fazer a transição com a parte inferior e com duração de 0,3 s e o tempo de atraso também de 0,3 s. Tudo bem, agora temos um efeito muito melhor. A última coisa que eu quero fazer com esta seção é criar um efeito de sombra ao passar o mouse Então, vamos selecionar o projeto com o transportador e definir a sombra da caixa para uma única execução Em seguida, um rem e, novamente, uma RAM com a cor 777 E por último, vamos usar a transição com a sombra da caixa de valores, 0,5 s. Ok? Portanto, o efeito de sombra funciona bem. E, na verdade, terminamos esta seção. Agora temos que seguir em frente e criar a seção de conteúdo 51. Projeto 5 - Criar e Estilo Seção de Contato: A seção de contato será simples. Teremos um título e alguns campos de entrada com esse botão de envio. Vamos começar a criar a marcação HTML. Vamos inserir novos comentários. Seção quatro, depois n da seção quatro. E abra o elemento de seção com um garfo de seção de classe. Então, no geral, teremos duas partes diferentes. O primeiro será o título. Portanto, são elementos de cabeçalho H1 abertos. Vou atribuir ao título duas classes diferentes. O primeiro será o título da seção de nome de classe comum. Quanto à segunda , será a seção individual da classe para o título como texto. Vamos inserir aqui, entre em contato comigo. Ok, então isso é tudo sobre o título. A segunda parte desta seção serão os elementos formados. Vamos abri-lo com o formulário de contato da turma. Portanto, o elemento do formulário incluirá duas entradas, área de texto e o botão de envio Vamos abrir o elemento de entrada com o texto do tipo. E onde está o atributo de espaço reservado, que terá o nome de valor que eu vou duplicar neste elemento Mude o tipo. Vou usar seu e-mail e, em seguida, alterar o valor do atributo de espaço reservado. Vamos fazer com que seja um e-mail. Em seguida, teremos uma área de texto. Vou atribuir a ele um atributo de espaço reservado com uma mensagem de valor E, finalmente, precisamos de um botão de envio que será criado usando os elementos de entrada. Nesse caso, o tipo será enviado. Então, precisamos enviar valor. E também vou usar seu contato de classe para a BTN. Ok, então a marcação HTML está preparada. Como você pode ver, o título tem alguns estilos, mas não parece muito bom no momento. Vamos corrigir isso em um minuto. Vamos prosseguir e inserir novos comentários na seção de arquivos CSS no final da seção quatro. Em seguida, selecione os elementos da seção. E antes de tudo, defina largura e altura. Vou definir a largura em 200 por cento. Para a altura. Vamos fazer com que seja 70% da janela de visualização. E também altere a cor de fundo. Faça com que seja 333. Ok, em seguida, vou colocar o conteúdo no centro. E para isso, vamos usar o flexbox. Precisamos de uma coluna de direção flexível e flexível da tela. Em seguida, vou centralizar o conteúdo horizontalmente. Para esse uso, alinhe os itens ao centro. E, finalmente, para criar algum espaço entre os itens flexíveis, vamos usar o justify content space Tudo bem, então é isso sobre esse elemento da seção. Vamos seguir em frente e cuidar do título. Agora mesmo. Ele tem alguns estilos padrão desta classe de título de seção. E eu vou mudar sua cor. Então, vamos selecionar a seção para o título e tornar a cor branca. Em seguida, elimina a sombra da caixa. Vou defini-lo como nenhum e também alterar a cor da borda usando a propriedade de cor da borda. Vamos torná-lo branco. Ok, então o título é personalizado e agora temos que passar para os elementos do formulário. Vamos selecioná-lo e definir a largura. Vou configurá-lo para 50 rem. Em seguida, vou colocar os itens verticalmente em uma coluna e também vou colocá-los no centro Então, precisamos usar o flexbox. E, nesse caso, vamos atribuir ao elemento do formulário o centro da classe E então mude a direção da flexão, transforme-a em uma coluna Os campos de entrada e os botões estão alinhados e agora vou estilizá-los. Vamos selecionar as entradas e a área de texto juntos. Em seguida, defina a largura, torne-a 100%. Em seguida, crie algum espaço dentro dos campos usando o preenchimento Vamos fazer 0,5 rem nos quatro lados. Além disso, vou criar espaço na parte superior e inferior dos campos usando margem, vamos defini-lo como 0,5 rem na parte superior e inferior e zero nos lados direito e esquerdo. Em seguida, vou mudar a cor do plano de fundo. Vamos usar sua cor E F. Altere também o tamanho da fonte, faça com que seja 1,5 g. Em seguida, crie uma borda com o ponto dos valores para ficar sólido. E a cor E4, e1, C6, F. E finalmente, F. E finalmente, mude a cor do texto, torne-o Tudo bem, a seguir, vou personalizar a área de texto. Como você sabe, você pode aumentar ou diminuir sua largura e altura manualmente. E, na verdade, não precisamos disso porque isso quebrará o layout. Então, vamos selecionar a área de texto. Primeiro de tudo, vamos definir essa altura, torná-la em dez rampas. E então eu vou definir a altura máxima e a largura máxima. Vamos definir o máximo para 15 RAM. Quanto à largura máxima, vamos torná-la 100%. Ok, então isso é tudo sobre a área de texto. O último elemento que vou estilizar é o botão de envio. Então, vamos prosseguir e selecioná-lo. Precisamos aqui selecionar o primeiro formulário de contato, seguido pelo formulário de contato BTN. Vamos mudar a cor do plano de fundo. Você vê sua cor. Se for para 1c6f , mude a cor do texto e torne-o branco Além disso, vou transformar o texto em maiúsculas. Em seguida, crie algum espaço entre as letras. Vamos fazer disso uma RAM. E, finalmente, mude o tipo do mais grosso, torne-o Portanto, todos os elementos estão estilizados e, com a seção de conteúdo, terminamos Em seguida, temos que seguir em frente e personalizar a última seção do projeto, que será o rodapé 52. Projeto 5 - Criar e Estilo de Rodapé: Na verdade, antes de passarmos para o rodapé, quero diminuir o espaço entre o título e campos de entrada porque acho que é muito grande. Então, vamos definir a margem inferior para cinco Ran. Ok, agora está melhor. Portanto, o rodapé será simples, como a seção de contato, onde teremos alguns ícones de mídia social e o texto de direitos autorais Vamos começar a criar a marcação HTML. Insira sua nova seção de comentários cinco. Seção cinco. Em seguida, abra o elemento de rodapé HTML5 com a seção cinco da classe Teremos duas partes diferentes. O primeiro deles serão os ícones das mídias sociais. Vamos abrir o elemento div com uma mídia social de classe. No geral, teremos quatro ícones diferentes. Vamos abrir o elemento de link com um link de mídia social de classe. E insira seu ícone Font Awesome. As aulas serão FAB, a, GitHub, square. Em seguida, duplique o elemento de link três vezes e altere os nomes das classes O segundo será f a b, f a YouTube. Então teremos f a b, f um quadrado do Facebook. E, finalmente, a última será a raiz quadrada do Instagram. Ok, isso é tudo sobre a primeira parte. Em seguida, vou criar um parágrafo que incluirá algum texto protegido por direitos autorais. Vamos atribuir direitos autorais à classe e inserir novos direitos autorais , seguidos pelo sinal de direitos autorais Será a entidade HTML5. Precisamos de comercial, cópia, ponto e vírgula, depois escrever Todos os direitos reservados. Tudo bem, então com a marcação HTML, terminamos. Vamos continuar e personalizar essa seção. Vamos inserir aqui novos comentários, seção cinco. E toda a seção cinco. Em seguida, selecione os elementos do rodapé e defina a largura e a altura A largura será de 100%. Quanto à altura, vou configurá-la para 30% da vista. Por fim, mude a cor de fundo. Vai ser 222. Ok, em seguida, vou colocar o conteúdo no centro usando o Flexbox Então, vamos atribuir ao elemento de rodapé o centro da classe e, em seguida, alterar a coluna de direção flexível Com um elemento de rodapé. Nós terminamos. Vamos seguir em frente e personalizar os ícones de mídia social. Vamos seguir em frente e selecionar os elementos div do wrapper, que têm mídia social de classe e definem margem na parte inferior para cinco Em seguida, vou selecionar os elementos do link. Então, vou criar espaço nos lados esquerdo e direito dos links usando margem. Vamos definir como zero na parte superior e inferior e dois rem nos lados direito e esquerdo. Além disso, vou criar algum espaço dentro do link usando o preenchimento Vamos configurá-lo para 0,7. Rem nos quatro lados. Também altere a cor de fundo. Vou usar aqui a cor E para 1c6f. E, finalmente, vamos usar raio de borda com valor de 0,5 g. Ok, vamos seguir em frente e estilizar os ícones Vamos aumentar o tamanho da fonte, fazê-la três vezes, e também mudar a cor, torná-la branca. Então, como você pode ver agora, os elementos do link não parecem muito bons. Por padrão, eles são elementos embutidos e temos que torná-los blocos embutidos Então agora eles parecem muito melhores. Ok, então, com os ícones de mídia social, terminamos. E, finalmente, temos que personalizar o texto dos direitos autorais. Vamos seguir em frente e selecionar um parágrafo. Vamos mudar a cor, torná-la uma. Então eu vou aumentar o tamanho da fonte, torná-la Ram. Crie algum espaço entre as letras usando pontos de espaçamento entre letras na RAM Além disso, vou deixar a fonte mais clara. Vamos definir a espessura da fonte para 300. E, finalmente, texto alinhado no centro. Tudo bem, então com o rodapé, terminamos e, na verdade, todas essas seções estão Agora estamos prontos para adicionar algumas funcionalidades ao nosso site usando JavaScript 53. Projeto 5 - Faça com que Navbar e barras de progresso funcionem usando JavaScript: Ok, então a primeira coisa que vou fazer é fazer com que a barra de navegação fixa mensalmente role para baixo e alcance Então, vamos criar uma nova classe e CSS, vou chamá-la de sticky. Vamos definir a posição, fixá-la. E também defina a propriedade superior como zero. Então, adicionaremos esse número de cluster quando rolarmos para baixo e chegarmos a oito Vamos abrir o arquivo script.js e, antes de tudo, selecionar elementos suficientes. Crie uma nova variável, chame-a agora de bar e selecione o elemento nav usando o método seletor de consulta Então, novamente, quando rolamos para baixo e alcançamos o número, precisamos atribuir a ele uma nova classe Portanto, precisamos usar eventos de rolagem. Temos que nos conectar ao método de objeto de janela global chamado event listener, que receberá dois argumentos O primeiro será o scroll de eventos. Quanto à segunda, será a função de retorno de chamada, que será executada assim que o evento de rolagem for acionado Agora vou usar duas propriedades diferentes. Eles são chamados de offset de página e offset top. Então, vou examinar o console, os dois, e mostrar como eles realmente funcionam. Vamos correr até a página de pontos da janela do console, offset e a parte superior offset Vamos inspecionar a página. Vá para a guia Console e comece a rolar. Portanto, a primeira propriedade, quero dizer deslocamento em Y da página, retorna a distância em pixels que também foram rolados verticalmente A segunda propriedade, mostra a distância da borda superior da página até o elemento, neste caso o Naropa Quando esses valores são iguais , isso significa que agora atingiu a borda superior da página. E para provar isso, vou usar uma declaração if, vamos instituir a condição de que o deslocamento da página Y da janela ponto da janela é maior ou igual a. Agora, o ponto da barra desloca a parte superior. E então corra para o console um texto, digamos, pegajoso. Quando começarmos a rolar para baixo e enriquecer a barra de navegação , ficaremos presos na constante. Portanto, se essa condição for verdadeira, teremos que adicionar à classe navbar sticky E se for falso, então temos que removê-lo. Então, vamos nos livrar de um registro do console e inserir aqui. Agora, lista de classes de pontos do Upwork. Na verdade, a lista de classes armazena propriedades das classes que o elemento possui. Em seguida, precisamos de um método chamado add, e eu tenho que especificar o adesivo agrupado Quanto à declaração else, como dissemos, precisamos remover o sticky da barra de navegação Agora precisamos da lista de classes de pontos de barra, remoção de pontos. E então a aula fica complicada. Então, se rolarmos para baixo , o número ficará fixo Mas temos aqui alguns problemas. Ela acaba por trás dos elementos. Além disso, se rolarmos para cima , o número ainda ficará fixo na parte superior da Então, para corrigir isso, temos que armazenar agora o deslocamento da barra na variável Então, vamos criar uma nova variável e chamá-la agora de offset top, atribuída a ela agora, não offset Além disso, passe a variável aqui. Então, estamos fazendo isso porque compararemos o deslocamento da página com a posição inicial da barra de navegação Além disso, precisamos definir o índice Z por enquanto. Primeiro, vamos definir a posição como absoluta. E então você usa o índice Z com um valor maior, digamos 300. Ok, então a barra de navegação funciona bem. Em seguida, destacarei os links da barra de navegação quando chegarmos à seção correta Mas primeiro vamos selecionar todas essas seções e também todos os links da barra de navegação Vamos criar uma nova variável e seções para colegas. Vou selecionar todas as seções usando o método seletor de consulta all Temos que especificar aqui a seção do nome da tag. Em seguida, vamos selecionar agora Bar Links. Vou usar novamente o método seletor de consulta all. Vamos especificar aqui o nome da classe. Agora, barra o link. Criaremos uma nova classe em CSS chamada Change, na qual definiremos os mesmos estilos que usamos ao passar o mouse Então, vamos em frente e insira aqui. Além da mudança seguida pelo link navajo. Como você vê, não usamos aqui o espaço. Vamos definir a cor para branco. Em seguida, vou selecionar novamente a alteração com o link Navarre, seguido pelo pseudo elemento anterior Defina a largura para 130%. Tudo bem, depois disso, temos que examinar essas seções e verificar se chegamos à seção correta Portanto, temos que anexar duas seções para cada método auxiliar de matriz Vamos passar uma função de retorno de chamada com uma seção de parâmetros, que será a seção atual em todo o loop Então, agora temos que verificar se rolamos até a seção correta Portanto, precisamos de cada declaração com a seguinte condição. Janela. Deslocamento em Y da página maior ou igual ao deslocamento da parte superior da seção Na verdade, quero destacar agora a tinta de Berlim um pouco mais cedo, uma vez que rolamos para baixo. Então, vou subtrair dez pixels da propriedade offset Portanto, se essa condição for verdadeira, precisamos destacar o link da barra de navegação E para fazer isso, temos que adicionar à função de retorno de chamada um novo parâmetro I, que será o índice E agora temos que adicionar dois novos links, a mudança de classe. Agora precisamos do Bar Links. Em seguida, temos que especificar o número do índice entre colchetes. Em seguida, ela deve ser seguida pela propriedade da lista de classes com o método ADD. E temos que especificar a mudança de classe entre parênteses. Então, se rolarmos para baixo o número de links será destacado Mas, como você pode ver, temos aqui um pequeno problema, uma vez que continuamos rolando para baixo, as seções anteriores são destacadas e, na verdade, não precisamos disso Para corrigir esse problema, precisamos percorrer os novos links e remover a mudança de classe de todos eles. Em seguida, precisamos adicionar a mudança de classe ao link necessário. Portanto, temos que anexar novos links para cada método auxiliar de matriz Em seguida, passe aqui a função de retorno de chamada com o parâmetro que será o item atual em todo o loop Então, como dissemos, temos que remover a mudança de classe dos links da barra de navegação Portanto, agora precisamos de link de barra, lista de classes de nós, remoção de pontos, alteração de classe. Ok? Agora o problema foi corrigido e nossos links estão destacados corretamente. Tudo bem, então há mais uma coisa em relação à barra de navegação. Quando clicamos no número de links , devemos ir para a seção apropriada com efeito de rolagem suave Para fazer isso primeiro, precisamos atribuir ao elemento HTML a propriedade chamada comportamento de rolagem com o valor smooth Em seguida, precisamos atribuir a cada seção elementos e atributo ID Vou usar o cursor múltiplo. Novamente, precisamos do atributo ID, e cada um deles deve ter o valor adequado. Estou neste nome de seção que precisamos na seção um, seção dois, seção três e seção quatro. Depois disso, precisamos atribuir aos atributos de referência h dos links da barra de navegação os valores adequados Esses valores devem corresponder aos valores dos atributos. Portanto, precisamos aqui da seção um, seção dois, seção três e seção quatro. E, finalmente, vou atribuir ao atributo de referência h da seção inferior do projeto três, porque quando clicamos no botão de projetos, devemos navegar até a seção de projetos Se eu clicar no botão ou no link , navegaremos até as diferentes seções Além disso, se eu clicar no botão de projetos , iremos para a seção de projetos. Na verdade, temos aqui um pequeno problema. Se eu clicar nos ícones de mídia social e no rodapé , navegaremos até o topo da página com uma rolagem suave Na verdade, não precisamos disso. Então, vou inserir nenhum como o valor dos atributos de referência h. Agora o problema está resolvido e na verdade, em Alberta, terminamos Em seguida, vou cuidar das barras de progresso. Portanto, precisamos sentir as barras de progresso assim que elas aparecerem na página. E para gerenciá-lo, novamente, precisamos da ajuda das propriedades principais da página Y, offset e offset Primeiro, vou selecionar o invólucro das barras de progresso Vamos criar uma nova variável. Eu vou chamar isso de progresso. Em seguida, selecione o wrapper de barras de progresso usando o método querySelector Vamos especificar aqui o invólucro das barras de progresso do nome da classe. Em seguida, precisamos de uma declaração if na qual precisamos da seguinte condição. Deslocamento em Y da página do ponto da janela mais a altura interna do ponto da janela. Portanto, essa soma deve ser maior ou igual para compensar o topo do progresso Usamos aqui a altura interna do ponto da janela e a adicionamos à janela, o deslocamento da página Portanto, a janela, a altura interna retorna a altura da janela, a altura do conteúdo que está visível na página. Se essa condição for verdadeira, significa que as barras de progresso começam a aparecer e precisamos preenchê-las de acordo com seus valores percentuais. Vou criar uma matriz onde armazenaremos esses valores percentuais. Vamos criar uma nova variável e chamá-la de barras de progresso presentes. Vamos passar aqui os seguintes valores. Precisamos de 90, 780-985-8780 Em seguida, vou definir a largura dos elementos div da pessoa em progresso como zero No momento, é igual a 90%. Então, vou selecionar o progresso, apresentar os desenvolvimentos. Em seguida, vou examiná-los e definir sua largura a partir dessa matriz. Então, vamos selecionar o progresso presente usando o método querySelector all Esse é o nome da turma do instituto Progress Present. Ele deve ser seguido pelo método forEach. Vamos passar sua função de retorno de chamada, que terá dois parâmetros O primeiro será o item atual da lista. Vamos chamá-lo de elementos, quero dizer EL. E também precisamos de um índice para definir a largura adequada da matriz para cada elemento. Então, como bloco de código, temos que inserir aqui o estilo do ponto do elemento, a largura do ponto. Em seguida, abra os carrapatos traseiros. Pegue os valores da matriz de presentes da barra de progresso. Temos que indicar o número do índice entre colchetes como i, seguido pelo presente Como você pode ver, as barras de progresso são preenchidas de acordo com os valores percentuais. Vamos continuar e adicionar um efeito de transição a eles. Aqui está a transição com a largura dos valores. Então, precisamos de duração de 0,5 s. Em seguida, o tempo de atraso de 0,5 s. E também usar uma das funções de temporização de transição chamada ease in, out Então, agora as barras de progresso estão parecendo ter um bom efeito de transição. A última coisa que eu quero fazer é exibir esses valores percentuais do JavaScript dinamicamente No momento, eles são valores codificados em um documento HTML. Portanto, precisamos ter acesso a esses elementos de extensão para que, primeiro, tenhamos acesso ao parágrafo. Portanto, precisamos escrever aqui elementos pontilhados por irmãos dos elementos anteriores Depois de termos acesso ao parágrafo, precisamos encontrar seus elementos secundários, que são a extensão. Portanto, precisamos usar a propriedade chamada primeiro elemento filho. E precisamos mudar seu conteúdo usando texto. Propriedade do conteúdo. Deve ser igual à barra de progresso apresentada com o número de índice i. Para ver claramente que exibimos os valores GI da pessoa a partir do JavaScript, vamos removê-los do arquivo HTML do ponto de índice. Tudo bem, como você pode ver, tudo estava perfeito e com as barras de progresso, terminamos Antes de seguir em frente e começar a tornar o projeto responsivo, preciso fazer algumas coisas em JavaScript. Então, todas essas coisas, quero dizer, todo esse bloco de código aqui é executado. Depois de rolar a página. Na verdade, quero executar esse código uma vez por padrão antes de rolar Para evitar algum comportamento inesperado e estranho da página da web Para isso, vou criar uma função, vamos chamá-la de principal F, e depois pegar todo esse bloco de código e colá-lo aqui. Então, vou chamar essa função duas vezes. Inicialmente, vamos chamá-lo de eventos fora dessa rolagem em um escopo global E na segunda vez , ele deve ser chamado dentro de um evento de rolagem Quero dizer, dentro da função de retorno de chamada. Ok? Então, por causa disso, todo o código JavaScript está funcionando com base em propriedades como deslocamento da página e offset top Então, poderíamos enfrentar alguns problemas ao mudar o tamanho da janela. Então, precisamos recarregar a página. Depois de redimensionar a janela, vou usar o evento de redimensionamento Vamos anexar o ouvinte de eventos ao objeto de janela global. Em seguida, especifique o tipo de evento. Vai ser redimensionado. Além disso, precisamos aqui de uma função de retorno de chamada. Portanto, para recarregar a página, precisamos de localização de pontos na janela, recarregar pontos Então, se eu mudar o tamanho da janela , a página se revoltará Ok, então isso é tudo sobre JavaScript. Agora é hora de passar para a última parte do nosso projeto. Vou tornar o projeto responsivo a diferentes tamanhos de tela 54. Projeto 5 - Torne o projeto responsivo: Na verdade, antes de começarmos a escrever o código, vou pausar o último código que escrevemos em JavaScript porque precisaremos redimensionar a janela várias vezes Em seguida, vou inspecionar a página e mudar para o modo responsivo Como dissemos no início deste tutorial, construímos esse projeto em uma tela grande com uma largura de 1920 pixels e uma altura de 1080 pixels Eu já preparei os pontos de interrupção nos quais precisamos fazer as alterações, então não vou perder tempo com isso aqui Portanto, o primeiro ponto de interrupção no qual precisaremos fazer algumas alterações será de 1.200 pixels Então, vamos inserir novos comentários, responsivos e não responsivos Em seguida, vou criar uma consulta de mídia CSS, onde temos que especificar a largura máxima. Como eu disse, serão 1.200 pixels. Temos que personalizar a segunda seção. Vou colocar serviços em duas linhas. Então, vamos prosseguir e selecioná-los. Quero dizer, o elemento wrapper div. Vamos definir a altura como oral. E também vou colocar um envoltório flexível para embrulhar. Além disso, vamos selecionar o serviço em si e refinar a margem Vou configurá-lo para três rem na parte superior e inferior e duas RAM nos lados direito e esquerdo. A segunda seção parece boa. Vamos seguir em frente e personalizar a seção de contato. A única coisa que vou fazer é mudar a altura dessa seção. Vamos fazer com que seja 80 de altura da janela de visualização. Então eu acho que é isso no ponto de interrupção. O próximo terá 800 pixels. Então, vamos prosseguir e criar uma nova consulta de mídia CSS. Especifique a largura máxima como 800 pixels. Nesse ponto de interrupção, vou diminuir o tamanho do título na página de destino E também vou diminuir a largura das barras de progresso. Então, vamos seguir em frente e selecionar o título da Seção 1. Defina o tamanho da fonte dois para RAM. Em seguida, selecione a barra de progresso e faça com que sua largura seja de 50. Portanto, todas as outras seções parecem boas e temos que passar para o próximo ponto de interrupção O próximo ponto de interrupção será de 600 pixels. Então, vamos criar uma nova consulta de mídia CSS e especificar a largura máxima. Faça com que seja de 600 pixels. Vamos prosseguir e diminuir o tamanho do título do empréstimo Selecione o título da Seção 1 e defina o tamanho da fonte para três rampas. Em seguida, precisamos personalizar a barra de navegação. Então, vamos selecionar a margem definida pelo Number Link. Vou definir como zero na parte superior e inferior e dois rem nos lados esquerdo e direito. Altere também o tamanho da fonte, faça com que seja 1,5 rodado. Sul de Alberta. Parece bom. Vamos passar para a seção para selecioná-la e definir o preenchimento nos quatro lados para virar Vou selecionar o título da Seção dois. Isso diminuiu. Margem na parte inferior. Faça com que se vire. E então vou diminuir a largura da barra de progresso. Vamos fazer com que seja 45 rem. Em seguida, vou definir a largura da imagem do projeto em 200 por cento. Diminua também a largura dos elementos do formulário. Defina a largura para 40 RAM. E, finalmente, vou diminuir a largura do texto protegido por direitos autorais. Vamos fazer com que seja 70%. Tudo bem, então tudo parece bem no ponto de interrupção. Vamos seguir em frente e começar a trabalhar no próximo, que terá 500 pixels. Na verdade, no ponto de interrupção, vou diminuir o tamanho da fonte do HTML agora para 62,5 por cento. E eu vou fazer com que seja 55 por cento. Ok, então não precisamos fazer mais nada em 500 pixels. Vamos passar para o próximo ponto de interrupção, que será o último Vamos criar uma nova mídia CSS e definir a largura máxima para 450 pixels. Vou diminuir novamente o tamanho da fonte do HTML. Vamos fazer com que seja 45%. Em seguida, diminua o tamanho do título desta seção em um. Eu vou fazer com 2,5 RAM. Depois disso, vou diminuir o espaço entre os links da barra de navegação Vamos selecionar agora bro link e definir a margem como zero na parte superior e inferior e 1,5 rem nos lados direito e esquerdo. Ok, em seguida, vamos alinhar título desta segunda seção vCenter Use o centro de alinhamento de texto e também diminua a largura da barra de progresso Faça com que seja executado. Tudo bem, então acho que terminamos porque tudo parece bom Portanto, podemos dizer que nosso projeto é responsivo a diferentes sites Terminamos de trabalhar em nosso projeto. Finalmente, vou me livrar desses comentários daqui. Tudo bem, então o projeto está concluído. Espero que tenha sido interessante e útil e você aprenda algumas coisas novas. Agora podemos continuar e construir o próximo projeto. 55. Projeto 6 - Pré-visualização do projeto: Tudo bem, então é hora de começar a criar nosso próximo projeto Será sobre algo como carros clássicos. Neste vídeo, vou analisar o projeto e mostrar do que se trata. O projeto consiste em algumas seções. A primeira seção é simples. Temos aqui apenas o título e a imagem do carro. Em seguida, temos uma seção chamada curso popular, que inclui três cartas diferentes do curso popular. As cartas têm um pequeno efeito de flutuação. Depois disso, vem para a galeria de vídeos. Temos aqui duas fileiras dos vídeos. Por padrão, eles não estão jogando, mas quando passarmos o mouse sobre eles, eles começarão a jogar Tudo bem, então depois da galeria de vídeos, teremos uma galeria de imagens que será uma seção interessante Como você pode ver, temos aqui duas prateleiras diferentes com três imagens em cada uma delas. As imagens têm alguns bons efeitos de foco. Nesta seção, você aprenderá sobre como criar elementos 3D usando CSS. Em seguida, vem a seção de contato com alguns campos de entrada e o botão de envio. E abaixo temos o parágrafo com alguns textos de direitos autorais. Ok, então essas são todas as cinco seções deste projeto. Além disso, você vê aqui o ícone do menu fixo. Se eu clicar nele, as linhas se transformarão em um x. O número será exibido. Essas ações girarão bem no ambiente 3D. Se eu clicar nos diferentes links de navegação , navegaremos até as seções apropriadas com um efeito suave. Certo? Então esse é o projeto que vamos construir ao longo desta seção. Além disso, o projeto é responsivo a diferentes tamanhos de tela Se eu inspecionar a página, mudar para o modo responsivo e verificar o projeto, você descobrirá que ele é responsivo e fica bem em diferentes tamanhos de tela Ok, como nos projetos anteriores, quero lembrar uma coisa o projeto é construído usando uma abordagem que prioriza o desktop. Ele é construído para um tamanho de tela extra grande. Tamanho da tela com 1920 pixels de largura e 1080 pixels de altura Portanto, se você estiver usando um tamanho de tela relativamente menor o projeto pode não parecer bom durante as palestras Mas você não precisa se preocupar no final do dia, nós o tornaremos responsivo Enquanto isso, você pode usar o modo responsivo, especificar a largura e a altura do tamanho de tela extra grande e acompanhar 56. Projeto 6 - crie uma marcação em HTML para desembarque e defina estilos comuns: Tudo bem, então, quando estivermos prontos para começar a criar os projetos, vou começar criando a marcação HTML da navegação e de todas as cinco seções Quero dizer, apenas os elementos desta seção conseguirão fazer o dinheiro funcionar. E então nós mesmos personalizaremos essa seção. Vamos abrir nossa pasta de trabalho no VS Code. Como você vê, temos aqui apenas uma pasta para as imagens. Vamos criar três arquivos diferentes para HTML, CSS e JavaScript. Vou chamá-los de index.html, style.css e script.js. Em seguida, vá para o arquivo index.html e, antes de tudo, crie um documento HTML básico. Para isso, vou usar um dos pacotes chamado Emmet, que é um pacote embutido no código VS Vou colocar aqui um ponto de exclamação. E depois de pressionar Enter ou tab, ele gerará as tags HTML básicas Vamos mudar o título. Vou inserir aqui carros clássicos. Em seguida, vou vincular os arquivos CSS e JavaScript. Então, vamos abrir a tag link e especificar aqui o caminho do arquivo style.css. Quanto ao arquivo JavaScript, vou abrir uma tag de script logo acima da tag do corpo de fechamento. E então vou especificar o caminho do arquivo e o atributo de origem. Tudo bem, vamos continuar e abrir o projeto no navegador Para isso, vou usar um dos pacotes de código do VS chamado servidor ativo. Isso nos permite executar a vida útil do projeto no navegador e também fazer atualizações e alterações sem atualizar a página todas as vezes Então, eu vou entrar para instalar e usar este pacote. Ok, finalmente, vamos jogar o editor e o navegador, assim. E comece. Como dissemos, vamos criar a navegação e todas as cinco seções. Vamos começar com o ícone do menu. Vou inserir seu menu de comentários e depois o final do menu. Em seguida, abra a tag div, que terá duas classes diferentes O primeiro será o menu. Asfalto é um nome de segunda classe. Vou inserir seu alvo. Usaremos essa classe e o arquivo JavaScript. Portanto, o ícone do Menu consistirá em duas linhas diferentes. Vamos abrir a tag div com duas classes, linha de menu, que será o nome comum da classe E então, quando minha nova linha for para estilo individual, vamos duplicar essa linha de código e alterar o nome da classe Também precisamos da linha de menu aqui. Ok, então, no momento, o ícone do menu não está visível porque temos aqui apenas os elementos div vazios Vamos seguir em frente e criar a barra de navegação. Vamos inserir seus comentários. Barra de navegação. Em seguida, fim da barra de navegação. Em seguida, abra o elemento de navegação HTML5 com classes navbar e, em seguida, use Portanto, no geral, teremos cinco itens de navegação diferentes. Vamos abrir a tag de link com o link da barra de navegação da classe. Em seguida, insira Q home. Vou duplicar o elemento do link quatro vezes e depois alterar o conteúdo O segundo item serão carros populares. Em seguida, teremos a galeria de vídeos e depois a Galeria de Imagens. Quanto ao último item, será contato. Tudo bem, então isso é tudo sobre o número que temos aqui, os itens de navegação Vamos seguir em frente e criar as seções. Vamos inserir aqui novamente a seção de comentários um, depois o final da seção um. Portanto, cada seção terá seu invólucro. Portanto, é uma tag div aberta com o invólucro da classe. E então interfere no elemento da seção com uma classe na seção um e depois no alvo Ok, então, no geral, teremos cinco seções diferentes. Vamos continuar e duplicar esse código quatro vezes. E depois mude os números. Consequentemente. Precisamos mudar os números dos comentários e também os nomes das classes Tudo bem, vamos ver o mercado agora Vamos seguir em frente e começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos comuns e padrão. Vamos entrevistar comentários, estilos comuns na época e estilos comuns. Em seguida, precisamos selecionar cada elemento. E para isso, vou usar um asterisco. Em seguida, dê alguns estilos. Em primeiro lugar, vamos nos livrar do padrão, da margem e do preenchimento Vou definir os dois como zero. Em seguida, vamos remover o contorno padrão de cada elemento usando outline none Além disso, vou definir o tamanho da caixa de borda. Em seguida, vamos eliminar o sublinhado padrão elementos do link usando a decoração de texto none E também elimine os estilos padrão dos elementos da lista usando o tipo de estilo de lista Tudo bem, depois disso, vou definir uma família de fontes para cada elemento deste projeto, usaremos duas fontes diferentes do Google Então, vamos ao site do Google Fonts. Então vou procurar uma elite especial. Selecione esse estilo único aqui. Em seguida, vamos procurar Josephine Sans. Vou selecionar aqui alguns estilos. Pesos de fonte 400-700. Pegue o link e cole-o no elemento principal. Tudo bem, depois disso, vou definir família de fontes. Por padrão. Vou definir a família de fontes como elite especial, coercitiva e também definir a espessura da fonte Vamos fazer 400. Tudo bem, então vamos ver os estilos comuns e padrão aplicados aos elementos Ao longo deste projeto, usaremos a RAM como unidade de medida. No momento, uma rampa é igual a 16 pixels, porque, por padrão, o tamanho da fonte do elemento HTML é igual a Vou converter uma corrida em dez pixels. E para isso, temos que diminuir o tamanho da fonte do elemento HTML, torná-lo em 62,5 por cento Ok, então, como você pode ver, o tamanho dos elementos diminuiu. Em seguida, vou mudar a cor de fundo dos elementos do corpo. Então, vamos selecionar esse elemento e criar sua cor de fundo, cinza claro usando a cor ccc Tudo bem, então agora, isso é tudo em relação aos estilos comuns Em seguida, precisamos cuidar do ícone do menu. E agora também 57. Projeto 6 - Criar e fazer trabalho de navegação: Tudo bem, então primeiro vamos fazer o menu funcionar. Quero dizer, uma vez que clicamos no ícone do menu, temos que exibir a barra de navegação e também girar essas seções Depois de gerenciarmos isso, estilizaremos todo o projeto e faremos com que pareça bom. Vamos continuar e inserir os comentários aqui. Precisamos de um menu. Depois e fora do menu. Vou tornar o ícone do menu visível. Então, vamos selecioná-lo e definir sua largura e altura, ambas como RAM. E também use ouvir alguma cor de fundo temporária, digamos, vermelho. Em seguida, vamos cuidar de sua posição. Eu vou consertá-lo. E também vamos definir as propriedades superior e esquerda, ambas para serem executadas. Tudo bem, então o ícone do Menu está posicionado. Em seguida, vamos cuidar da aldrava. Vou inserir aqui os novos comentários, agora quatro, depois n de Navarra Então, agora a Coréia será colocada no lado esquerdo da página e isso deve ser corrigido. Então, vamos prosseguir e selecioná-lo. Primeiro, vou definir sua largura. Vamos fazer com que tenha 15 janelas de visualização. Nesse caso, agora, mas ocuparemos 15% da largura da janela de visualização Altura. Vou fazer com que seja 100% da janela de visualização Então, vamos configurá-lo como h E também mudar a cor de fundo, torná-lo branco. Depois disso, vou fixar sua posição. Além disso, vamos definir as propriedades superior e esquerda, ambas como zero. Então, como você pode ver, uma vez que corrigimos a barra de navegação , o ícone do Menu acabou ficando atrás dela Isso aconteceu porque a barra de navegação é colocada após o ícone Menu no documento HTML e, portanto, tem uma precedência maior Vamos corrigir esse problema usando a propriedade do índice Z. Vou configurá-lo para um valor maior que zero, digamos dez. Agora, o ícone do menu está visível, mas precisamos mudar sua posição quando o número é exibido e o ícone do menu deve ser colocado no lado direito dele. Então, vamos fazer sua posição esquerda. 15, largura da janela de visualização. Ok, em seguida, vou colocar os itens de navegação, principalmente em uma coluna. E para isso, vamos usar o flexbox. Precisamos de display flex. E então temos que mudar a direção da flexão e torná-la uma coluna porque a flexibilidade de exibição alinha os elementos em Finalmente, vamos criar algum espaço dentro da aldrava usando o preenchimento Vou definir o preenchimento para rem total na parte superior do que zero no lado direito, zero na parte inferior e rem total no lado esquerdo Como você se lembra, definimos o tamanho da caixa, caixa de borda e os estilos É por isso que o tamanho da barra de navegação não é aumentado. Quando você usa uma caixa de borda de tamanho de caixa com preenchimento. Que ele mova os elementos dentro da caixa e não aumente o tamanho da caixa. Tudo bem, vamos seguir em frente e cuidar dessas seções. Vou inserir aqui os novos comentários, estilos de seção. E então fim dos estilos de seção comuns. Em seguida, selecione o invólucro desta seção. Agora, vou atribuir a ele propriedade com o valor de cem por cento Na verdade, você pode estar se perguntando por que precisamos desse elemento? Basicamente, vamos usá-lo para criar um ambiente 3D para as seções. Tudo bem, vamos prosseguir e selecionar esse elemento da seção. Em primeiro lugar, vou definir sua largura e altura. Quero definir sua largura como largura da janela de visualização A25, porque agora temos a barra de navegação no lado esquerdo e sua largura é igual a 15 larguras da janela de Eu quero colocá-los lado a lado. Quanto à altura, vamos fazer que seja cem por cento da janela de visualização E também altere a cor de fundo. Vou usar aqui chamado ou E F, E, F, E F. Ok, então agora essas seções acabaram atrás do Napa E para corrigir isso, precisamos mudar a posição deles. Vamos defini-lo como relativo. Em seguida, vou definir a propriedade esquerda com 15 larguras de janela de visualização. Agora o problema está resolvido. Em seguida, vamos separar as seções usando a margem Vou usar a margem inferior com a rampa de valor três Como você pode ver, essas seções estão separadas e agora ele começa a girá-las e criar um ambiente 3D Primeiro, vamos usar a propriedade de transformação com a função rotate Na verdade, precisamos aqui girar y. Porque precisamos girar o elemento de acordo com a direção vertical, quero dizer Então, neste momento, essa seção está girada, mas não vemos aqui nenhum efeito 3D Então, para criar um ambiente 3D, precisamos usar uma dessas propriedades CSS chamada perspectiva. Temos que atribuí-lo ao elemento pai, que é um invólucro Vamos configurá-lo para 50 rampa. Então, em geral, a propriedade de perspectiva define a que distância o elemento está do usuário e, eventualmente, cria o ambiente 3D. Agora temos um resultado muito melhor, mas na verdade não é isso que queremos. Agora mesmo. Essas seções são giradas acordo com o centro porque, por padrão, a origem da transformação é definida como centro Na verdade, precisamos mudá-lo e deixá-lo à esquerda. Portanto, nesse caso, os elementos são girados de acordo com o lado esquerdo. E é por isso que as seções e o romance são colocados lado a lado Tudo bem, vamos continuar e aumentar a largura dessas seções Faça com que seja cem por cento. E também crie algum efeito de sombra. Use sua sombra de caixa com o valor de 0,5 rem. Então, novamente, 0,5 rem, uma RAM e a cor AAA Antes de começarmos a fazer o dinheiro funcionar, quero fazer aqui mais uma coisa. Como você pode ver, a sombra é sobreposta à barra de navegação. E para corrigir isso, vou usar novamente a propriedade z-index com um valor dez Nesse caso, o número terá maior precedência e a sombra ficará atrás dele Tudo bem? Então essa é a situação após o clique, o ícone do menu. Por padrão, precisamos ocultar a barra de navegação e girar essas seções de volta à posição normal Vamos ocultar o número atribuído a ele. Esquerda - 15 de largura da janela de visualização. Em seguida, altere a posição do ícone do menu que precisamos aqui à esquerda com um valor de dois rem. Em seguida, precisamos mudar a posição desta seção. Vamos definir isso como zero. E também comente esta linha. Então, estamos prontos para programar o ícone do Menu. Mas antes disso, vou fazer mais uma coisa. Vou criar algum espaço no lado direito dentro do elemento corporal. Para isso, vamos usar estofamento, certo? Com um valor de três rampas. Tudo bem? Portanto, os estilos que acabamos de alterar devem ser aplicados aos elementos assim que clicarmos no ícone do menu. Além disso, eles devem ser removidos assim que clicarmos nessas seções. Então, vou criar esses estilos com uma nova classe chamada mudança. Em seguida, adicionaremos essa classe aos elementos e a removeremos usando JavaScript. Vamos começar com o ícone do menu. Precisamos selecionar um menu com a mudança de classe. Como você pode ver aqui, não usamos espaço entre essas classes porque precisamos adicionar essa classe ao próprio menu. Vamos definir a posição esquerda para 15 larguras de janela de visualização. Em seguida, precisamos mudar a posição da barra de navegação. Então, vamos selecionar agora bert com mudança e definir a posição esquerda como zero. Quanto às seções, precisamos mudar suas posições e também precisamos girá-las. Então, vamos selecionar a seção com uma mudança de classe. Em seguida, defina a propriedade esquerda para 15 larguras de janela de visualização e use aqui a função Transform, Rotate. Tudo bem, então está tudo pronto. Vamos até o arquivo JavaScript e selecionamos o ícone do menu. Para isso, vou usar o método seletor de consulta. Precisamos especificar aqui a classe do menu. Em seguida, precisamos anexar a ele o ouvinte de eventos. Esse método usa dois argumentos. O primeiro é clicar. A segunda será a função de retorno de chamada, que será executada quando clicarmos no elemento Então, uma vez que clicamos no ícone, precisamos adicionar a mudança de classe à rede de menus. E essas seções, lembre-se, todos esses elementos têm um alvo de classe comum. Então, vamos selecioná-los usando o destino da classe e adicionar a mudança de classe Vou usar aqui o seletor de consulta de todos os métodos E temos que especificar aqui o alvo da classe. Na verdade, o seletor de consulta retorna todos os métodos e um objeto semelhante a uma matriz chamado Precisamos examinar essa lista e adicionar a cada alteração de classe de item da lista. Para examinar a lista de nós, vou usar um dos métodos auxiliares de matriz chamados H. É necessário um parâmetro que será a função de retorno de chamada Essa função será executada para cada item na lista. A função de retorno de chamada receberá um argumento e será o item atual da lista durante o loop Agora precisamos adicionar à mudança de classe do item. E para isso, vou usar um dos métodos chamados toggle No caso do método toggle, adicionamos classe ao elemento se ele não existir e o removemos se ele Então, no primeiro clique, o elemento receberá a alteração de classe e, no próximo, ele será removido. Portanto, precisamos usar o item seguido pela propriedade chamada lista de classes, que armazena todas as classes que o elemento tem. Em seguida, quando você alterna o método. E temos que especificar a mudança de classe dentro dos parênteses Agora, se eu clicar no ícone do menu , tudo funcionará bem. Para tornar esse efeito melhor, vamos usar a transição. Para o ícone Menu. Precisamos fazer a transição com valores restantes, 0,5 s. Em seguida, precisamos da mesma transição para a barra de navegação Asfalte a seção. Precisamos fazer a transição de onde resta o valor, 0,5 s, e depois transformar com essa mesma duração. Ok, agora temos um efeito muito melhor e mais suave. Tudo bem, então com o ícone Menu, terminamos. Agora temos que fechar o menu. Depois de clicarmos nas seções, usaremos uma técnica semelhante. Primeiro, vamos selecionar todos esses wrappers de ação e anexar a eles ouvintes de eventos. Precisamos novamente do seletor de consulta de todos os métodos. Em seguida, passe aqui o invólucro do nome da classe. Para anexar o ouvinte de eventos a cada wrapper, primeiro precisamos examiná-los porque, no seletor de consulta, todo método retorna uma Vamos usar novamente para cada método. Em seguida, passe sua função de retorno de chamada com o item do argumento. Em seguida, precisamos anexar o ouvinte de eventos ao item com o evento de clique e com outra função de retorno de chamada Então, agora precisamos remover a mudança de classe de todos os três elementos. Na verdade, vou pegar esse código daqui e depois mudar a alternância para remover Então, agora, se eu clicar no ícone do menu e , em seguida, clicar na cláusula do menu de seleção será Então, tudo funciona perfeitamente e, com o menu, terminamos. Em seguida, vou fazer com que esses links funcionem. Quero dizer, uma vez que clicamos neles, devemos navegar até as seções apropriadas. Para isso, temos que fazer algumas coisas. Primeiro, vamos aumentar o tamanho dos links selecionados. Agora, Berlim, defina o tamanho da fonte para 1,5 RAM. E também vou separar os links usando margem. Vamos configurá-lo para dois rem na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, em seguida, vamos ao arquivo index.html e atribuir a cada elemento da seção o atributo id. Portanto, para navegar até as seções apropriadas, os valores dos atributos de referência id e h devem corresponder. Então, vamos atribuir a eles esses valores semelhantes usando um cursor múltiplo Para o primeiro item, vou passar por sua casa. Então, para o segundo item, precisamos de carros populares. Em seguida, vem a galeria de vídeos. Então teremos a Galeria de Imagens. E, finalmente, precisamos de conteúdo. Agora, se eu clicar nos links , navegaremos até a seção apropriada. À primeira vista, é difícil perceber. Mas se você olhar para essa barra de rolagem , verá que estamos navegando até as seções relevantes Para tornar esse efeito mais suave, podemos usar uma dessas propriedades CSS chamada comportamento de rolagem E temos que anexá-lo ao elemento HTML com o valor pequeno. Agora, como você pode ver, estamos navegando entre diferentes seções sem problemas 58. Projeto 6 - Estilo e faça o hambúrguer Menu Funcionar: Tudo bem, então, uma vez que conseguimos fazer a navegação funcionar, agora é hora de estilizar ícone do Menu e também os itens de navegação Vamos dar uma olhada no projeto finalizado. Como você pode vê-los em qualquer lugar. Você pode consistir em duas linhas. Quando clicamos nele, eles giram e se transformam no x. Então é isso que vamos fazer agora Temos aqui apenas uma caixa vermelha. Vamos prosseguir e selecionar linhas com a linha de menu de classe comum. Primeiro, vamos definir a largura e a altura. Vou definir a largura de como apresentar. Quanto à altura, vamos apontar para a rampa. Também altere a cor do plano de fundo. Faça com que seja branco. Em seguida, vou criar algum espaço na parte superior e inferior das linhas usando margem. Vamos configurá-lo para 0,3 rem e zero. E então crie algum efeito de sombra usando sombra de caixa com o valor 0,1, 0,1 RAM do que 0,3 rampa. E a cor também. Ok, então aqui temos as linhas. Em seguida, vou alinhar essas linhas. E para isso, eu quero usar o Flexbox. Vamos definir a propriedade de exibição como flexível. Também mude a direção. Vamos criar uma coluna que para colocar as linhas no centro do menu, vamos usar justificar o centro de conteúdo e alinhar os itens ao centro Ok, então, como você pode ver, as linhas estão alinhadas e na verdade, é hora de se livrar desse fundo vermelho e também mudar o tipo do ponteiro do percurso Então, como dissemos, vamos girar essas linhas para torná-las X. E isso deve acontecer quando clicarmos no ícone, adicionarmos a floresta, transformarmos as vidas e, em x, selecionarmos A primeira linha está na linha um do menu da classe. Na verdade, transformaremos as linhas em cruz e depois giraremos o próprio menu. Então, vamos usar Transform com a função de rotação. Vou girar a primeira linha em 270 graus. Vamos duplicar esse código. Mude o nome da classe. Quanto ao valor, vou girar essa segunda linha em 360 graus. Então, no momento, não temos aqui a cruz perfeita. E para corrigir isso, vamos mover as linhas um pouco. Vou fazer isso usando a função translate, que na verdade nos permite mover o elemento vertical e horizontalmente de acordo com os eixos x e y. Portanto, no caso da primeira linha, precisamos traduzir X com o valor menos ponto para RAM Quanto à segunda linha, precisamos de Translate Y com um valor menos ponto para RAM Agora temos aqui o x perfeito. E, por fim, precisamos girar o próprio ícone do Menu Então, vamos usar novamente a transformação, onde eles giram a função como o valor Vamos passar aqui 45 graus. Tudo bem, então, finalmente, transformamos as linhas em x. Mas isso deve acontecer quando clicarmos no ícone Para isso, novamente, vou usar a mudança de classe, que é adicionada ao elemento onClick usando JavaScript. Vamos adicionar a classe alterada em ambas as linhas. Nesse caso, temos espaço entre as aulas porque as linhas são as crianças do cardápio. Finalmente, vamos pegar essa linha de código e colá-la. Se eu clicar no ícone, obteremos um x. Tudo bem, para tornar esse efeito mais suave, vamos usar transição com transformação e 0,5 s. Quanto ao menu, já temos aqui a transição, já temos aqui a transição, mas onde está a propriedade left Então, eu vou mudar isso e fazer tudo. Tudo bem, então com o menu, terminamos. Vamos continuar e personalizar esses links. Temos todos os selecionados. Agora por link. Vamos adicionar aqui alguns estilos. Precisamos de uma espessura de fonte com um valor de 600. Também mude a cor, torne-a 777. Em seguida, vou criar algum espaço entre as letras usando espaçamento lateral, 0,3 RAM, e depois transformar o texto em maiúsculas Como você pode ver, os links são personalizados. E, por fim, vou criar um pequeno efeito de foco. Vou mudar a cor ao passar o mouse. Então, vamos seguir em frente e selecionar, agora vincularemos com um mouse, mudaremos de cor, faremos com que seja 111 E também use a transição para um efeito suave com o valor da cor e o ponto de duração. Tudo bem, então, na navegação, terminamos e agora é hora de personalizar as seções 59. Projeto 6 - Criar e personalizar a página de destino: Vou começar com a primeira seção. Vamos dar uma olhada no projeto finalizado. Como você pode ver, a primeira seção será bem simples. Teremos um fundo escuro e dois elementos diferentes, o título e a imagem. Então, vamos prosseguir e criar a marcação HTML. No momento, temos aqui o invólucro e apenas o elemento da seção vazia Então, vamos inserir seu elemento de cabeçalho H1. Deve ter duas classes diferentes. O primeiro será o título da seção como Paul. O segundo será o título da Seção um como conteúdo. Vamos inserir aqui carros clássicos. Em seguida, vou inserir aqui a imagem. Vamos selecionar a imagem da pasta de imagens que será a Seção 1. Além disso, vamos aderir que o valor do atributo da classe é a imagem da seção um Então isso é tudo sobre a marcação HTML. Vamos ao arquivo style.css e inserir novos comentários, seção um. E a seção um. Na verdade, todas as cinco seções terão títulos semelhantes No primeiro, teremos alguns estilos individuais adicionais. Então, acho que, em vez de escrever os mesmos estilos repetidamente , seria melhor se criássemos alguns estilos comuns. Vamos usar a classe, o título da seção e seguir alguns estilos Vou aumentar o tamanho da fonte. Vamos fazer com que sejam dez RAM. Em seguida, deixe o peso da fonte em negrito. Também mude a cor, torne-a branca. Em seguida, vou adicionar algum espaço na parte inferior dos elementos usando a margem inferior. Dez rampa. Também crie algum espaço entre as letras usando o espaçamento entre letras. Uma rampa. Vamos alinhar o texto no centro. E, finalmente, use sombra de texto com um valor de 0,3, 0,3 em torno de 0,5 chamador de rampa 555 Tudo bem, depois disso, vou alinhar esses dois elementos e também cuidar do plano de fundo Então, vamos prosseguir e selecionar o elemento da seção com a seção 1 da classe. Para alinhar os elementos no centro desta seção, vou usar novamente livros de fluxo Na verdade, precisamos usar propriedades e valores semelhantes aos que usamos no caso do menu. Então, para evitar escrever os mesmos estilos do Flexbox aqui, vou criar uma nova classe e os estilos comuns, vamos chamá-la de central e atribuí-la a ela display flex do que justify-content center e alinhar itens ao centro Em seguida, vou adicionar essa aula ao menu. E a seção um também. Também se livre dessas três linhas. Venha aqui e deixe apenas a coluna de direção flexível. Além disso, também precisamos flexionar a coluna de direção para a seção um. Tudo bem, então os elementos estão alinhados e agora eu vou cuidar do plano de fundo Vamos especificar aqui o URL. Vou selecionar a seção BG um ponto JPG da pasta de imagens. Além disso, vamos adicionar aqui o centro e vou repetir. E também defina o tamanho do plano de fundo. Faça com que ela cubra o plano de fundo e na verdade, esse elemento da seção. Vamos adicionar algumas estrelas ao título selecionado. Vamos usar aqui a seção um. Título da seção um. Eu usei aqui a seção um. E se eu perdesse, Dan, essa tarefa não seria aplicada porque todos nós já criamos estilos comuns para cabeçalhos de seção Nesse caso, alguns dos estilos definidos serão substituídos Então, vamos adicionar aqui margem inferior com um valor de três RAM. Em seguida, transforme o texto em maiúsculas. E também use sombra de texto com os valores de uma RAM, três vezes. E a cor preta. Na verdade, vou adicionar aqui sombras adicionais, que eventualmente criarão um efeito de sombra de vários níveis Então, vamos continuar correndo três vezes. E a cor 111. Então vou adicionar três rem, novamente três vezes com uma cor a dois. Então, como você pode ver, temos aqui um bom efeito de sombra. Finalmente, vou definir a largura da imagem selecionada e definir sua largura para sete por cento. Eu costumava ouvir o valor percentual porque isso tornaria a imagem responsiva a diferentes tamanhos de tela Tudo bem, então vamos ver em relação à primeira seção, vamos seguir em frente e passar para a próxima 60. Projeto 6 - Criar e personalizar a seção de carros populares: A próxima seção será sobre carros populares. Vamos dar uma olhada no projeto finalizado. Portanto, nesta seção, teremos um título e três cartas diferentes. Cada cartão consistirá em imagem, carro, nome, preço e botão. Vamos prosseguir e criar a marcação HTML. Vou começar com um título. Vamos abrir os elementos do cabeçalho H1 com o título da seção da classe e com o conteúdo Carros populares. Vamos inserir aqui div, que será o invólucro dos cartões Em seguida, vou criar o cartão em si. Então, vamos abrir a tag div com o cartão de classe. Vou inserir alguns elementos para você. O primeiro será o elemento de cabeçalho H2 com o nome da classe Car como conteúdo Vou colocar aqui apenas carbonato. Em seguida, teremos uma imagem. Vamos selecionar carro com um ponto JPEG na pasta de imagens. E também vou atribuir à classe de elemento de imagem chamada IMG Em seguida, teremos o elemento de cabeçalho h3, que será o preço do carro Vamos colocar aqui 200.000. E, finalmente, vou instituir o botão com o botão de digitação com uma classe chamada btn. Também permite que você veja mais. Tudo bem, então este é nosso primeiro cartão. No geral, teremos três deles. Então, vamos duplicá-lo duas vezes e depois fazer algumas alterações A segunda imagem será chamada para JPG. Também altere o preço. Então teremos o carro três. E o preço será de $150.000. Tudo bem, então é isso em relação à marcação HTML. Vamos seguir em frente e estilizar essa segunda seção. Vamos inserir aqui um novo comentário, seção dois e seção dois. Em seguida, selecione o elemento da seção. Na verdade, vou alinhar os elementos usando o Flexbox, mas antes disso, vamos colocar os cartões lado a lado Para isso, vou atribuir ao centro de classes carts wrapper, que já definimos anteriormente Depois disso, vamos fazer com que esse elemento de seção contêiner usando display flex Então precisamos mudar a direção. Vamos configurá-lo como coluna. E, finalmente, vamos criar algum espaço em torno dos itens flexíveis usando justificar o conteúdo com o ritmo dos valores Tudo bem, isso foi dito sobre os elementos desta seção. Vamos seguir em frente e personalizar o policial. Vou definir sua largura para 50 rampa. Na verdade, antes de adicionarmos outros estilos ao carro, vamos definir a largura da imagem. Vamos selecioná-lo e tornar sua largura 100%. Nesse caso, a imagem ocupará 100% da largura do elemento pai, que é o COD. Ok, vamos seguir em frente e adicionar mais alguns estilos ao cartão. Vou criar algum espaço nos lados esquerdo e direito usando margem com um valor de 0,3 rampa. Também altere a cor de fundo, torne-a branca. Em seguida, vou definir o preenchimento em uma RAM nos quatro lados Por fim, vamos criar alguma sombra usando box-shadow com os valores 0,6 RAM três vezes e depois a cor e depois a Em seguida, vou criar um efeito de foco. Eu quero mudar a sombra ao passar o mouse. Então, vamos selecionar o cartão com o mouse. Em seguida, definiu a sombra da caixa, onde os valores 0,8 RAM três vezes e a cor BBB E também vamos usar a transição. Precisamos aqui de uma sombra de caixa, onde a duração é de 0,5 s. Ok, então é isso em relação ao cartão, vamos seguir em frente e personalizar os elementos do título, que é o nome atual Vamos selecioná-lo e alterar o tamanho da fonte, torná-lo RAM. Em seguida, vou definir a espessura da fonte para 600. Também transforme texto em maiúsculas. Em seguida, mude a cor e torne-a branca. No momento, o cabeçalho não está mais visível porque tem uma cor branca. Vou colocá-lo um pouco abaixo. Então, vamos seguir em frente e definir sua posição como absoluta. Então, para posicioná-lo de acordo com seu elemento pai, que é o cartão, precisamos definir essa posição como relativa. Em seguida, defina as propriedades superior e esquerda do título. Vou fazer com que os dois corram. Além disso, para colocar o nome do carro sempre na parte superior da imagem, vou usar a propriedade z-index com um valor relativamente maior, digamos dez Tudo bem, agora o título está visível. Em seguida, vou criar um efeito de foco. Quero aumentar a opacidade da imagem ao passar o mouse. Primeiro, vamos configurá-lo para, digamos, 0,8. Em seguida, selecione o cartão com o mouse. Ela será seguida pela imagem do carro. Em seguida, defina a opacidade como uma. Além disso, vou usar a transição com os valores opacidade e 0,5 s. Tudo transição com os valores opacidade e 0,5 s. Tudo bem? Portanto, o efeito de foco funciona bem. Vamos seguir em frente e personalizar o preço. Vamos selecionar esse elemento e, primeiro, alterar o tamanho da fonte, torná-lo 1,8 RAM. Em seguida, vou definir a cor para 777. E também cria algum espaço na parte superior e inferior usando margem com valores de ponto fibrina e zero. Ok, então o último elemento que precisamos estilizar será o botão. Vamos selecioná-lo. No início. Vou definir sua largura para 100%. Em seguida, mude a cor de fundo, torne-a branca. Além disso, vou definir o tamanho da fonte para 1,7 rem. Em seguida, crie algum espaço entre as letras. Vamos fazer 0,3 voltas e depois transformar o texto em maiúsculas Ok, o botão So parece bom, mas precisamos adicionar mais alguns estilos a ele. Vamos nos livrar da borda padrão. Usando border none. Em seguida, vou criar algum espaço na parte superior do botão usando margem, topo e uma classificação. Em seguida, vamos criar algum espaço dentro do botão usando o preenchimento Vou configurá-lo para 0,5 rem e depois mudar a cor, torná-lo branco. Finalmente, vou criar alguns efeitos de sombra. Primeiro, vamos usar sombra de texto, onde o valor é 0,1, rampa de 0,1, depois ponto, executamos a cor preta E depois disso, vou usar sombra de caixa com os valores 0,1, 0,1 run, depois fibrina pontual e a cor E, por fim, vamos mudar o título do curso ou explicá-lo. Tudo bem, então com o botão, terminamos. E, na verdade, é isso sobre esta seção. Tem um estilo e uma boa aparência. Vamos seguir em frente e passar para a próxima seção. 61. Projeto 6 - Criar e Estilo de Galeria de Vídeo: A próxima seção será a galeria de vídeos. Temos aqui um título de seção e seis vídeos diferentes. Por padrão, eles são postados e, quando passarmos o mouse sobre eles , eles serão reproduzidos Tudo bem, vamos continuar e, como sempre, criar a marcação HTML Vou começar com o título da seção. Vamos abrir o elemento de cabeçalho H1 com um título de seção de classe E à medida que o contempla, insira aqui a galeria de vídeos Em seguida, vamos abrir os desenvolvimentos. Será a embalagem dos vídeos. No geral, teremos dois desses invólucros e cada um deles incluirá três vídeos Vamos abrir a tag de vídeo com um vídeo de classe e especificar o caminho do arquivo. Temos um vídeo chamado carro, vídeo um na pasta Imagens. Além disso, vou usar dois atributos diferentes. O primeiro será silenciado. Isso silenciará o som do vídeo. Quanto ao segundo , será o loop. Isso nos permite reproduzir o vídeo infinitamente. Além disso, podemos usar outro atributo chamado controles. Vamos também definir a largura do vídeo. Faça com que seja 500 pixels. Então, aqui temos um vídeo com controles. Como você pode ver, esse som é Mildred, e também está tocando repetidamente por causa do atributo. Ok, na verdade, vou me livrar dos controles. Eu não vou usá-los. Vamos usar apenas hear, mudo e loop. Teremos três vídeos neste invólucro. Vamos duplicá-lo duas vezes e mudar os nomes dos vídeos. Precisamos aqui, 2.3. Em seguida, vou duplicar o próprio invólucro e alterar novamente os nomes dos vídeos Precisamos aqui, 45,6. Tudo bem, então a marcação HTML está pronta agora. Tudo está confuso aqui porque os vídeos são de alta qualidade e são muito grandes. Vamos continuar e personalizar essa seção. Vamos inserir seus novos comentários, seção três. E a seção três. Antes de começarmos a personalizar esta seção, primeiro, vamos diminuir o tamanho dos vídeos. Vamos selecioná-los e definir a largura para 25%. Ok, agora os vídeos estão menores e você pode personalizar o elemento da seção. Vamos selecioná-lo. Vou fazer com que seja um contêiner flexível usando bandeiras de exibição. Então precisamos mudar a direção. Vamos fazer uma coluna. Além disso. criar algum espaço ao redor dos itens flexíveis Vamos usar o espaço de conteúdo justificado ao redor. E também mude a cor de fundo, torne-a cinza escuro usando dois. É isso em relação a esse elemento da seção. Em seguida, vou alinhar os vídeos que quero usar novamente, o Flexbox Então, vamos ao arquivo HTML e atribuí-lo ao centro de classes do wrapper de vídeos Tudo bem, como você pode ver , os vídeos estão alinhados, mas precisamos adicionar alguns estilos a Primeiro, vamos criar algum espaço nos lados esquerdo e direito dos vídeos usando margem com os valores zero. E para executar, vou arredondar os cantos dos vídeos usando o raio da borda com o valor 0,5 rem arredondar os cantos dos vídeos usando o raio da borda com o Além disso, vamos diminuir um pouco a opacidade. Vamos fazer com que seja 0,8. E por último, vou criar um pequeno efeito de sombra usando sombra caixa com os valores 0,3, 0,3 rem O próximo será 0,5 RAM e a cor 111. Tudo bem, então estamos quase terminando. Só precisamos criar efeitos de foco. E também precisamos reproduzir os vídeos ao passar o mouse. Para isso, usaremos um pouco de JavaScript. Primeiro, vamos aumentar a opacidade e mudar a sombra ao passar o mouse. Vamos selecionar o vídeo com a pseudoclasse flutuante que aumenta a opacidade E também mude a sombra da caixa. Vou inserir valores como 0,5, 0,5 RAM em vez de uma RAM e a cor, um a um. E também use a transição. O valor é de 0,5 s. Tudo bem, então, como você pode ver, os efeitos de foco funcionam bem e agora é hora de reproduzir os vídeos ao passar o mouse e agora é hora de reproduzir os vídeos ao passar o Vamos prosseguir e acessar o arquivo JavaScript. E primeiro, selecione todos os vídeos. Vou criar uma nova variável, vamos chamá-la de vídeos, e depois selecionar todos os vídeos usando o método seletor de consulta all Precisamos especificar aqui o vídeo da aula. Portanto, para reproduzir os vídeos ao passar o mouse, precisamos usar eventos com o mouse sobre e sair do mouse E também o método se chama Play and pulse. Antes disso, precisamos examinar os vídeos e anexá-los ao ouvinte do evento Então, vou usar um dos métodos auxiliares de matriz chamado for-each Deve ter um parâmetro. Será a função de retorno de chamada. Precisamos passar um argumento que será o vídeo atual durante o loop. Em seguida, precisamos nos conectar ao ouvinte do evento de vídeo. Vamos inserir o mouse sobre o evento. E também passe aqui a função de retorno de chamada, que deve ser executada quando passarmos o mouse sobre o vídeo Agora, para reproduzir o vídeo, precisamos usar um dos métodos de APIs de vídeo HTML5 chamado Agora, se eu passar o mouse sobre o vídeo, ele será reproduzido. Mas quando passarmos o mouse, ele continuará jogando. Na verdade, não precisamos disso. Precisamos pausar o vídeo quando sairmos. Então, precisamos usar outro evento chamado miles out. Vamos nos conectar ao ouvinte do evento em vídeo com o evento a milhas de distância. E depois use um método chamado pulso. Ok, então agora tudo funciona bem. E, na verdade, com esta seção, terminamos. Vamos seguir em frente e passar para o próximo. 62. Projeto 6 - Criar e estilo de Galeria de imagens: Tudo bem, então é hora de criar a próxima seção, que será a galeria de imagens Essa galeria vai ser um pouco diferente e interessante. Um. Teremos duas prateleiras, cada uma com três fotos diferentes dos carros. Nesta seção, você aprenderá sobre como criar elementos 3D usando CSS. Vamos prosseguir e criar a marcação HTML. Vou começar com o título da seção. Vamos abrir o elemento de cabeçalho H1 com o título da seção de classe com a galeria de imagens de conteúdo Em seguida, vou abrir uma tag div, que será o invólucro da galeria É atribuído à galeria da turma. Então, no geral, teremos dois rappers, como se não fosse na seção anterior Cada um deles codificará a prateleira e três imagens. Então, vamos abrir uma tag div, que será a prateleira que vou atribuir à prateleira da galeria da classe Deve ser o elemento vazio. Então, a concha será seguida pelas imagens. Vamos abrir a tag da imagem e especificar aqui a parte da imagem. Nós precisamos. Gallery car one dot JPG da pasta de imagens. E também vou atribuir o atributo de classe do elemento de imagem com uma galeria de valores IMG one Vamos duplicá-lo duas vezes e alterar os nomes das imagens e também os nomes das classes Precisamos adicionar três. Em seguida, vou duplicar a galeria em si. E então eu vou mudar novamente os nomes das imagens. Quanto aos nomes das classes, precisamos deixá-los como estão. Tudo bem, é isso em relação à marcação HTML Vamos começar a personalizar esta seção Primeiro, vou colocar as imagens lado a lado em Para isso, vamos usar o flexbox. Vou me inscrever nas duas galerias de aula. Tudo bem, vamos prosseguir e inserir novos comentários no arquivo CSS Será uma seção para eles. E fora da seção quatro. Em seguida, selecione o elemento da seção. Vou fazer com que seja um contêiner flexível usando o display flex. Além disso, vou colocar os elementos na coluna. Então, vamos mudar a coluna de direção flexível. E também vou criar algum espaço entre os itens usando justificar o espaço de conteúdo entre eles A próxima coisa que eu quero fazer é diminuir o tamanho das imagens porque elas estão muito grandes no momento. Então, vamos selecioná-los e definir com dois 15%. Agora, está muito melhor. Vamos seguir em frente e selecionar Galeria. Quero criar algum espaço na parte superior e inferior. Vamos fazer isso usando margem. Vou configurá-lo para dez rem na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, agora é hora de criar a prateleira e acho que seria melhor se escondêssemos as imagens por Então, vamos usar sua tela. Nenhum. Em seguida, selecione a prateleira. Em primeiro lugar, vou definir sua largura e altura. Vamos definir com 280 por cento. Quanto à altura, vou fazer uma rampa 3D. Em seguida, defina a cor de fundo. Vou usar aqui o valor RGBA. Vamos inserir aqui 38126199 e a opacidade 0,8. E finalmente, para colocar a prateleira no centro dessa seção, vamos usar margem, o valor R0 Tudo bem, então essa é a parte frontal da prateleira. Quanto ao resto da peça, nós a criaremos usando um pseudo elemento anterior Então, vamos selecionar prateleira da galeria com o pseudo elemento anterior Antes de tudo, vamos deixar a coluna vazia. Em seguida, vou definir sua posição como absoluta. E para posicionar esse elemento de acordo com seu pai, que é a prateleira da galeria, precisamos atribuir à posição principal relativa Depois disso, vamos adicionar algumas estrelas para fazer antes do pseudo-elemento, vou definir sua largura e altura Vamos fazer a largura cem por cento. Quanto à altura, vou ajustá-la para dez rampas. E também altere a cor de fundo. Vou usar aqui a cor com o valor RGBA. Vamos inserir aqui 34152248 e a opacidade 0,7. Tudo bem? Então, no momento, ele não está posicionado corretamente. Vou movê-lo para cima Então, vamos definir a posição superior. Na verdade, precisamos colocá-lo na parte superior da parte frontal. Sua altura é igual a dez rampas. Portanto, precisamos aqui da propriedade superior com o valor menos dez repetições Certo? Depois disso, precisamos girar antes pseudo-elemento horizontalmente de acordo com Então, vou usar a propriedade Transform com a função rotate x. E eu vou colocar aqui 20 graus. Então, o elemento é girado, mas não é isso que queremos O problema é que, por padrão, o elemento é girado de acordo com seu centro Quero dizer que a origem da transformação está centralizada e precisamos alterá-la e torná-la um botão Então, vamos usar a origem da transformação e fazer com que ela seja comprada. Agora, o problema está resolvido e o elemento está girado corretamente. A única coisa que precisava fazer era criar um ambiente 3D e fazer com que essas prateleiras parecessem reais. Para criar um ambiente 3D, como você já sabe, precisamos usar uma propriedade chamada perspectiva. Vamos configurá-lo para dez corridas. Tudo bem, como você pode ver, agora temos um resultado muito melhor com gritos Estamos quase terminando. A única coisa que eu quero fazer é criar um efeito de sombra. Então, vamos usar sombra de caixa com valores um percorrido, uma rampa, fibrina e a cor Tudo bem, então finalmente, com a prateleira, terminamos. Vamos continuar e exibir as imagens de volta. Vamos nos livrar do display none. Como você pode ver agora, o layout está confuso, então vamos cuidar disso Vou definir a posição como absoluta. Então, agora as imagens são colocadas uma atrás da outra. Primeiro, vamos movê-los para cima e colocá-los nas prateleiras. Vou definir a posição inferior em que o valor é seis RAM. Em seguida, vou selecionar cada imagem separadamente e definir a posição esquerda. Vamos começar com a galeria IMG one. Vou definir sua posição esquerda para 50 por cento. Então, vamos duplicar esse código duas vezes. Vamos mudar o nome da classe. Precisamos de calorias img2. Quanto à posição de liderança, vamos usar aqui 30%. Quanto à terceira imagem, vamos colocar sua posição esquerda em sete por cento. Agora vemos todas as imagens, mas elas não estão posicionadas corretamente. Para corrigir isso, vou movê-los para o lado esquerdo. E para isso, vamos usar Transform com a função Translate X, que contém a maioria dos elementos horizontalmente Vou colocar aqui -50 por cento. Além disso, quero girar a imagem horizontalmente, quero dizer, de acordo com Então, vamos usar Rotate X com o valor de 0,5 grau. Além disso, vamos criar alguns efeitos de sombra e também tornar as imagens arredondadas. Vamos usar sombra de caixa com desvalores apontando para arredondar. Em seguida, vou usar um ponto de valor negativo para a RAM para mudar a direção da sombra. Em seguida, um será 0,5 repetido como cor. Vamos usar 888 Além disso, vamos fazer com que a imagem seja arredondada usando o raio da borda com um valor de Tudo bem, então a última coisa que precisamos fazer é criar um efeito de foco. Depois de passar o mouse sobre as imagens, precisamos girá-las de volta à posição normal E também precisamos mudar a sombra. Então, vamos selecionar a imagem da galeria com a pseudoclasse flutuante e usar Transform. Na verdade, temos que usar aqui função Translate novamente, porque se a perdermos , a posição das imagens mudará. Portanto, precisamos traduzir x com -50%. Em seguida, precisamos girar a função x para o valor zero. Além disso, vamos usar sombra de caixa com os valores 0,2, 0,3 RAM e a cor 888 Para tornar o efeito mais suave, vamos usar valores de transição todos e 0,3 s. Portanto, temos aqui um efeito de flutuação Mas, na verdade, não parece muito bom porque as imagens estão girando do centro e precisamos girá-las de Então, novamente, temos que mudar, transformar a origem, emprestá-la Tudo bem, agora o problema está resolvido e temos aqui uma bela cavidade Ou, na verdade, antes de terminarmos esta seção, notei que precisamos algum espaço na parte superior e inferior desta seção porque o título não está bem posicionado Além disso, acho que também precisamos de espaço para as outras seções. Então, vou até os comentários, estilos de seção e atribuirei ao elemento da seção. Acolchoamento O valor é fibrina e zero. Ok, agora temos resultados muito melhores. E, na verdade, com a galeria de imagens, terminamos. Vamos seguir em frente e começar a trabalhar na próxima seção, que será a última 63. Projeto 6 - Criar e personalizar a seção de contato e o rodapé: Tudo bem, então é hora de criar uma quinta seção, que será a seção de contato Concluiremos a construção do projeto com esta seção. E depois disso, vamos torná-lo responsivo a diferentes tamanhos de tela Vamos dar uma olhada no projeto finalizado. Portanto, esta seção será simples. Teremos uma imagem de fundo em tela cheia com um título de seção, elemento de formulário e um pequeno texto com direitos autorais Vamos continuar e criar uma marcação HTML. Vamos inserir aqui um elemento de cabeçalho H1 com um título de seção de classe E onde o conteúdo entra em contato conosco. Em seguida, precisamos de elementos de formulário com o formulário de contato da turma. Portanto, o formulário consistirá em quatro elementos diferentes. Teremos duas entradas para nome completo e e-mail. Em seguida, teremos a área de texto e o botão de envio. Então, vamos interferir o elemento de entrada com uma classe para entradas. E também com o atributo placeholder, que terá como valor seu nome completo Então eu vou duplicar essa linha de código. Vamos mudar aqui, digitar, criar um e-mail e também como valor do atributo placeholder Vamos inserir seu e-mail. Em seguida, precisamos de uma área de texto com uma classe de entradas de formulário. E também use novamente o atributo de espaço reservado com uma mensagem de entrada de valor Finalmente, vamos criar um botão, que será representado usando o elemento de entrada atribuído ao formulário de cluster BTN como o tipo que vou usar submit E também precisamos enviar valor. Tudo bem, isso é tudo sobre os elementos do formulário. Em seguida, precisamos criar um parágrafo com os direitos autorais da classe. Vamos inserir aqui algum texto de direitos autorais. Eu vou usar aqui. O sinal de direitos autorais com a entidade HTML5. Deve ser cópia comercial e cópia, ponto e vírgula. Em seguida, vou inserir seu código e criar todos os direitos reservados. Tudo bem, então isso é tudo sobre a marcação. Tudo está pronto para começar a personalizar esta seção. Vamos prosseguir e inserir novos comentários no arquivo CSS. Precisamos da Seção 5 e da seção F5. Em seguida, selecione os elementos desta seção. Então, a primeira coisa que eu quero fazer é adicionar a imagem como plano de fundo em tela cheia Em primeiro lugar, vamos usar o gradiente linear. Precisamos aqui do valor RGBA, onde está a cor preta e com a opacidade Em seguida, precisamos da cor similar. Mas com opacidade de 0,8. Tudo bem, depois disso, vamos definir o caminho do URL da imagem Será um JPG de cinco pontos da seção BG. Além disso, vamos inserir seu centro sem repetir. E, finalmente, vou definir o tamanho do plano de fundo. Vamos fazer com que cubra. Então, aqui temos uma imagem. Em seguida, quero alinhar os elementos usando o Flexbox. Vamos fazer com que o elemento de seção flexione o contêiner usando o display flex Em seguida, precisamos alinhar os elementos em uma coluna verticalmente. Então, vamos mudar a direção, torná-la uma coluna. Em seguida, crie algum espaço ao redor dos elementos usando justificar o espaço ao redor do conteúdo E, finalmente, vou colocar os itens no centro usando alinhar itens, centralizar Tudo bem, então os elementos estão alinhados e agora vou seguir em frente e personalizar os elementos formados Vamos prosseguir e selecioná-lo. Em primeiro lugar, vou definir sua largura e altura. Vamos configurar com 260 RAM. Quanto à altura, vou fazer 45 rem. Em seguida, vou mudar a cor do plano de fundo. Vamos usar seu RGBA com a cor branca com o ponto de opacidade Para. Finalmente, vou criar a borda com valores para serem solidificados. E, em seguida, use novamente o valor RGBA com a cor branca. E com a opacidade 0.8 Em seguida, vou alinhar os elementos dentro do formulário para isso, vamos usar novamente o vamos usar Nesse caso, vou fazer com que o formulário seja flexível usando display flex Então, novamente, mude a direção. Vou colocar os elementos em uma coluna verticalmente. Em seguida, vou colocar os elementos no centro verticalmente Use o centro de conteúdo justificado. E, finalmente, crie algum espaço dentro do elemento do formulário usando preenchimento com um valor de cinco rem nos quatro lados Tudo bem, isso é tudo sobre o elemento do formulário. Agora tem que personalizar a área de texto de entradas e o Bateson No começo, vou selecionar os elementos de entrada e a área de texto porque eles terão alguns estilos comuns. Então, vamos selecionar os dois elementos. Primeiro, vamos definir a largura e a altura. Vamos definir com 200 por cento. Para a altura. Eu vou fazer isso para a rampa. Depois disso, vamos criar algum espaço na parte superior e inferior usando a margem. Vamos configurá-lo como Ram e zero. E também vou tornar a cor de fundo dos elementos de entrada e a área tributária transparentes. Tudo bem, vamos seguir em frente e adicionar mais alguns estilos a esses elementos Vamos criar algum espaço dentro deles usando o preenchimento. O valor de 0,5 RAM nos quatro lados. Em seguida, mude a borda. Vou atribuir 2.1 run solid e a cor branca. Em seguida, vou mudar o tamanho da fonte. Vamos fazer com 1,5 RAM. Em seguida, crie algum espaço entre as letras usando o espaçamento entre letras de 0,1 RAM E finalmente mude a cor, torne-a branca. Tudo bem, então as entradas e a área ou estilo do texto. E antes de prosseguirmos e estilizarmos o botão, vou adicionar mais alguns estilos à área de texto. Agora mesmo. Ele tem apenas largura e altura, o que pode causar problemas no layout pois podemos alterar manualmente o tamanho da área do texto. Portanto, precisamos definir a largura e a altura máximas. Então, vamos selecionar a área de texto e definir a largura máxima. Faça com que seja 100 por cento. Quanto à altura mínima, vou fazer oito corridas. Tudo bem, agora o problema com a área de texto foi corrigido. Mas temos aqui outro problema. A altura dos elementos de entrada diminuiu e aconteceu porque agora a área do texto ficou maior e ela empurrou o resto dos elementos. Então, para evitar esse tipo de coisa, podemos usar uma das propriedades do item flexível chamada flex shrink e temos que torná-la zero Tudo bem? A próxima coisa que eu quero fazer é mudar a cor de fundo das entradas e da área de texto assim que as focarmos Então, vamos selecionar as entradas e a área de texto com um nome de classe comum para uma colocação, que deve ser seguida pela pseudoclasse de desfocagem Vamos mudar a cor do plano de fundo. Vou usar RGBA com a cor branca e com a opacidade 0,5 Também precisamos de uma transição com cor de fundo e a duração de 0,5 s. Ok, então, finalmente, podemos personalizar o botão. Vamos prosseguir e selecioná-lo. Precisamos usar primeiro a classe do elemento do formulário porque, caso contrário, alguns desses estilos não serão aplicados ao botão. Como você sabe, o botão é criado usando o elemento de entrada, e todos nós provavelmente temos alguns estilos para a semana de abril. Vamos mudar a cor do plano de fundo. Eu vou usar RGBA, onde a cor branca e com a opacidade Então vamos mudar a espessura da fonte, torná-la 600. Então, vamos criar algum espaço entre as letras usando a rampa de 0,3 com espaçamento entre letras Em seguida, mude a cor, torne-a 444. E também altere o tipo do cursor. Mostre isso. Tudo bem, então com o botão, terminamos. E agora temos que cuidar do último elemento, que é o parágrafo. Então, vamos prosseguir e selecioná-lo. Em primeiro lugar, vamos aumentar o tamanho da fonte e fazê-la funcionar. Também altere a espessura da fonte. Eu vou fazer 300. Então vamos fazer com que seja branco. E também alinhe o conjunto de texto. Tudo bem, então o parágrafo é personalizado e, na verdade, estamos quase terminando com esta seção e com o projeto em si. Antes de prosseguirmos e tornarmos o projeto responsivo, quero fazer mais um porco A seção de contato é a última seção do projeto e eu quero me livrar do espaço na parte inferior. Então, vamos em frente e atribuímos a ela uma margem inferior com um valor de zero Tudo bem, então finalmente terminamos. O projeto foi construído com sucesso e agora temos que passar para a última etapa e tornar o projeto responsivo a diferentes tamanhos de tela 64. Projeto 6 - Torne o projeto responsivo: Tudo bem, então antes de começarmos a criar consultas de mídia CSS em diferentes pontos de interrupção e tornar o Vamos dar uma olhada no projeto finalizado mais uma vez. Então, se eu inspecionar a página, mude para o modo responsivo e verifique se os projetos estão em tamanhos de tela diferentes Então, você descobrirá que tem uma boa aparência e é responsivo aos anúncios. Tudo bem, então precisamos alcançar esse resultado. Vamos prosseguir e inspecionar a página. Então, como você sabe, o projeto é construído em um tamanho de tela extra grande. Estou no tamanho da tela com 1920 pixels de largura e 1080 pixels de altura Eu já preparei diferentes pontos de interrupção nos quais precisamos fazer algumas mudanças, então não vou perder tempo encontrando-os. O primeiro ponto de interrupção será de 1.500 pixels. Como você pode ver no ponto de interrupção, precisamos cuidar da barra de navegação Além disso, algumas dessas seções precisam de algumas mudanças. Vamos continuar e inserir novos comentários. Responsivo e não responsivo. Na verdade, antes de escrever aqui qualquer código, vamos dividir a janela do código VS em duas partes. E exiba o arquivo style.css nos dois lados. Acho que isso tornará nosso trabalho em andamento mais conveniente, pois encontraremos os estilos atuais rapidamente e , em seguida, criaremos uma nova consulta de mídia CSS Vou especificar aqui a largura máxima. Vamos fazer com que sejam 1.500 pixels. A primeira coisa que precisamos fazer é aumentar a barra de navegação Quero dizer a largura da barra de navegação. Vamos prosseguir e selecioná-lo. Vamos definir sua largura para 20, largura da janela de visualização. E também vou diminuir um pouco o preenchimento. Vamos chegar à RAM do que a rampa 00.2. Então, a largura do romance é aumentada, mas agora o ícone do menu está oculto. E também, quando fechamos o suficiente ou está parcialmente visível. Então, precisamos mudar a posição esquerda. Vamos fazer com que seja com -20 de largura de janela de visualização. E também precisamos mudar a posição do ícone do menu ao clicar. Selecione o menu com a mudança de classe. E vamos definir sua posição de liderança para 20. Largura da janela de visualização. Tudo bem, então é isso em relação ao Navbar Vamos cuidar das seções. Uma vez que o número é exibido, então esta seção está parcialmente oculta. Então, vamos cuidar disso. Vou selecionar a seção com a mudança de classe. E vou definir sua posição esquerda para 20 janelas de visualização de largura Além disso, vou mudar o valor da função de rotação Vamos fazer 15 graus. Ok, isso é tudo sobre esse elemento da seção. Vamos seguir em frente e cuidar da primeira seção. Acho que precisamos adicionar algum espaço entre o título e a imagem. Agora mesmo. A seção um tem o centro do cluster. Então, eles justificam que a propriedade do conteúdo está definida como central e eu vou alterá-la e o espaço de Megan uniformemente Ok. Vamos seguir em frente e cuidar do título desta seção. Quero diminuir um pouco o tamanho da fonte. Então, vamos selecionar esse elemento e definir o tamanho da fonte para sete. Corra. Tudo bem, isso é tudo sobre a primeira seção. Vamos seguir em frente e cuidar do segundo. Vou alinhar as cartas em várias linhas. E para isso, temos que definir a propriedade de embrulho flexível como embrulhar Então, vamos selecionar cartões, embalagens e atribuí-las à embalagem flexível com a embalagem de valor Então, como você pode ver, os cartões são embrulhados e colocados em linhas diferentes, mas é necessário cuidar da altura dessa seção. Vou configurá-lo para automático e também aumentar o preenchimento na parte inferior Vou definir o preenchimento para cinco rem na parte superior do que zero no lado direito. Tan correu na parte inferior e zero no lado esquerdo. Tudo bem, a próxima coisa que precisamos fazer é criar algum espaço entre as cartas E também vou diminuir a largura deles. Então, vamos selecionar o cartão e definir sua largura para quatro para ser executado. E também vou definir a margem para três rodadas. Tudo bem, isso é tudo sobre a segunda seção. Vamos seguir em frente e personalizar esse terceiro. Eu vou aumentar a largura do vídeo. Vamos prosseguir e selecioná-lo. Então, vou definir a largura dois, por assim dizer. E também vou mudar a margem. Vamos chegar à RAM nos quatro lados. E também vou aumentar o preenchimento nos lados esquerdo e direito desta seção Vamos selecionar a Seção três e definir o preenchimento para cinco rem. E depois três rampas nos lados esquerdo e direito. Com uma galeria de vídeos. Terminamos abaixo do ponto de interrupção. Vamos seguir em frente e personalizar a galeria de imagens. A primeira coisa que vou fazer é aumentar o espaço entre as prateleiras. Então, vamos selecionar Galeria e definir a margem para 12 rem na parte superior e inferior e zero nos lados esquerdo e direito. Veja agora, o layout está confuso porque a altura dessa seção não é mais suficiente Então, precisamos torná-lo R0. Vamos selecionar a seção quatro e definir a altura como automática. Tudo bem, a próxima coisa que eu quero fazer é aumentar o tamanho da prateleira Então, vamos selecioná-lo e definir sua largura para 90%. Além disso, vou aumentar o tamanho da imagem. Então, vamos selecionar Gallery IMG e definir sua largura para 20%. As imagens ficaram maiores, mas são colocadas muito próximas umas das outras. Para corrigir isso, vou mudar as posições da segunda e da terceira imagens. Então, vamos selecionar Galeria em que dois. Vamos definir sua posição esquerda para 25%. Quanto à terceira imagem, vou colocar sua posição esquerda em 75%. Tudo bem, agora eles estão bem e onde terminamos a galeria de imagens Vamos seguir em frente e cuidar da última seção, que será a seção de contato. A primeira coisa que precisamos fazer é mudar a altura da seção. Então, vamos selecionar a Seção cinco e fazer sua altura R0 Em seguida, vamos cuidar dos elementos do formulário. Selecione Formulário de contato. Vou mudar seu tamanho no set com 255 corridas. Quanto à altura que vou fazer para correr. E também mude o preenchimento. Vamos até a rampa. Finalmente, precisamos criar algum espaço na parte superior do parágrafo. Então, vamos selecioná-lo com os direitos autorais da classe e definir a margem superior para cinco rodadas. Tudo bem, então acho que terminamos o ponto de interrupção por causa dessas seções. Parece bom. Então, vamos seguir em frente e passar para o próximo ponto de interrupção, que será de mil pixels Vou criar uma nova consulta de mídia CSS. Vamos especificar a largura máxima, torná-la em mil pixels. A primeira coisa que vou fazer no ponto de interrupção é livrar do acolchoamento no lado direito Então, vamos selecionar o corpo e definir o preenchimento direto para zero. Tudo bem, a seguir, vamos personalizar o suficiente ou porque não parece muito bom Na verdade, vou pegar o código do ponto de interrupção anterior E vamos transformar a largura de 20 janelas de visualização em 25. Largura da janela de Também vou aumentar o valor da função de rotação Vamos fazer 20 graus e nos livrar desse preenchimento a partir daqui Tudo bem, então o número parece bom. Vamos seguir em frente e cuidar da primeira seção. Vou aumentar a largura da imagem. Então, vamos selecionar a Seção 1, IMG e definir sua largura para 90% Acho que a primeira seção parece boa e não precisamos mudar mais nada. O mesmo podemos dizer sobre a segunda seção. Quanto à galeria de vídeos, vamos personalizá-la. Vou colocar os vídeos verticalmente em uma coluna. Então, vamos selecionar o envoltório de vídeos e seguida, mudar a direção da flexão, fazer com que ligue Os vídeos são colocados em uma coluna, mas agora a altura dessa seção não é suficiente. Então, eu vou fazer com que tudo corra. Vamos selecionar a Seção três e definir sua altura para nossa linha. Em seguida, aumente a largura dos vídeos. Vamos fazer com que seja 70%. E também vou mudar a margem. Vamos fazer com que três corram na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, então a galeria de vídeos está bonita. Se verificarmos outras seções , você descobrirá que elas também parecem boas. Então é hora de passar para o próximo ponto de interrupção, que será de 750 pixels Então, vamos criar uma nova consulta de mídia CSS com largura máxima de 750 Então, novamente, precisamos personalizar a barra de navegação. Vamos prosseguir e pegar o código do ponto de interrupção anterior Vou alterar a largura de 25 janelas de visualização em. Terceiro para a largura da janela de visualização. Quanto à função de rotação, vamos fazer com que seu valor seja de 25 graus. Ok? Então, agora a barra parece boa. Em seguida, vou cuidar dos títulos. Vamos selecionar o título da seção. Defina o tamanho da fonte para 5,5 g. Tudo bem, então as três primeiras seções também pareçam boas Na galeria de imagens, precisamos fazer algumas mudanças. Acho que precisamos tornar as prateleiras mais finas. Então, vamos selecionar a prateleira da galeria. Vamos fazer com que sua altura seja 1,5 RAM como largura de poliéster. Vou configurá-lo para 95%. Depois vou cuidar da segunda parte das prateleiras, que está antes do pseudo elemento Então, vamos selecionar a prateleira Galeria, seguida pelo pseudo elemento anterior Vamos fazer com que sua altura seja de cinco RAM. Quanto à primeira posição, vou configurá-la para menos cinco Correu. As prateleiras parecem boas, mas agora precisamos cuidar das imagens. E vamos selecionar a imagem da galeria. Vou definir sua largura como 25%. Quanto à posição inferior, vamos fazer com que caia. Por fim, precisamos mudar as posições das imagens. Então, vamos selecionar Galeria em que dois. Vou fazer com que sua posição esquerda 22 esteja presente. Quanto à terceira imagem, vamos fazer sua posição de liderança em 78% Na verdade, estamos quase terminando esta seção. E antes de prosseguirmos, acho que quando diminui o tamanho do espaço na parte inferior desta seção. Então, vamos selecionar a seção quatro. E o preenchimento definido com um valor é seis RAM, 01 execução e, novamente, zero. Tudo bem, é isso. Em relação a esse ponto de interrupção, vamos criar o próximo, que terá 600 pixels Então, vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 600 pixels. Em primeiro lugar, vou diminuir o tamanho da fonte do elemento HTML porque isso diminuirá o tamanho de todos os elementos. Então, vamos definir o tamanho da fonte para 55,5%. Em seguida, vamos diminuir o tamanho da fonte de todos os cabeçalhos das seções Então, vamos selecionar o título da seção e fazer com que seu tamanho de fonte seja 4,5 RAM. Em seguida, vou cuidar da primeira seção. Vamos selecionar a imagem da Seção 1 e definir sua largura em 200 por cento. Em seguida, vá para a galeria de vídeos. Quero aumentar a largura do vídeo. Então, vamos definir a largura para 100%. Quanto à margem, vou chegar a Ram na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, vamos falar sobre a galeria de vídeos. Em seguida, vou personalizar a galeria de imagens. Então, vamos selecionar Galeria e definir a margem para nove RAM e zero. Isso é tudo sobre a galeria de imagens. Vamos seguir em frente e personalizar os elementos formados. Selecione-o. No que diz respeito a mudar a largura, vamos transformá-la em quatro em RAM. E também vou definir a borda como uma linha sólida. E a cor branca com a opacidade de 0,8. Tudo bem, então todas essas seções são personalizadas e agora temos que cuidar da barra de navegação Vou aumentar de tamanho novamente. Então, vamos pegar o código do ponto de interrupção anterior. Na verdade, vou mudar a largura e as posições do Napa e do ícone Menu Vamos fazer com que seja quatro na largura da janela de visualização. Quanto aos elementos desta seção, não queremos mais girá-los. Então, vamos definir a posição esquerda como zero. Quanto à função de rotação, vamos tornar seu valor zero Tudo bem, então isso é tudo sobre esse ponto de interrupção. Vamos seguir em frente e criar o último, que terá 400 pixels. Vamos criar uma nova consulta de mídia CSS e especificar a largura máxima. Faça com que sejam 400 pixels. Nesse ponto de interrupção, vou diminuir o tamanho da fonte do elemento HTML Vamos fazer com que seja 40 por cento. E, finalmente, vamos diminuir a largura do texto de direitos autorais. Vamos fazer com que seja 2%. Tudo bem, então, finalmente, terminamos. O projeto responde a diferentes tamanhos de tela e, na verdade, terminamos de trabalhar nele 65. Projeto 7 - Pré-visualização do projeto: Tudo bem, então é hora de seguir em frente e começar a construir o próximo projeto, que será um dos maiores Como de costume, antes de mergulharmos mais fundo em nosso projeto e começarmos a construí-lo primeiro, vamos descrevê-lo. Então, se eu recarregar a página, chegaremos aqui esse pintor está exibindo por alguns segundos Depois disso, o projeto é carregado. A primeira coisa que você vê aqui é uma página de destino com um banner animado e o ícone do Menu Depois que o projeto é exibido, o banner se move da parte inferior com uma transição agradável e suave Além disso, temos aqui um plano de fundo animado em tela cheia A escala da imagem está diminuindo com a transição. Tudo bem, então, como eu disse, temos aqui o ícone do Menu que é colocado no canto superior direito Se eu clicar nele, a barra lateral será exibida do lado direito. Além disso, o ícone do Menu se transformará em um X. A navegação será simples, mas temos aqui um efeito bacana Se eu passar o mouse sobre os itens de navegação , eles mudarão de cor da esquerda para a direita Além disso, temos aqui alguns ícones de mídia social parte inferior do Decidable com alguns efeitos de terror Se eu passar o mouse sobre o botão de fechamento x , a dica de ferramenta será exibida com um texto E se eu clicar no X, a barra lateral será fechada Ok, vamos ver sobre o empréstimo e a barra lateral. Vamos passar para a próxima seção, que será sobre nós. Temos aqui o título com um sublinhado seguido por alguns textos e ícones No centro desta seção, temos uma pequena imagem da casa. Esta seção será criada com base no módulo de layout CSS chamado grade CSS. Em seguida, vem a seção de código. Temos aqui três cartas com um bom e legal efeito de passar o mouse Ele será criado com um dos plug-ins de JavaScript chamado tilde dot js Assim, você poderá aprender como usar esses plug-ins Após a seção do cartão, criaremos a seção de contato. Como você pode ver, temos aqui a imagem de fundo no lado esquerdo desta caixa. Quanto ao lado direito, existem alguns elementos. Eu fiz os cabeçalhos, várias entradas e o botão Enviar, cada um dos campos de entrada como seu E se eu focar a entrada e o rótulo subirá com alguma transição. Esse efeito é muito popular e comumente usado hoje em dia. Assim, você poderá aprender como criá-lo. Logo após a seção de contato, criaremos esse rodapé simples, onde temos o texto dos direitos autorais e alguns ícones de mídia social Então, a última coisa que quero mencionar aqui é esse botão amarelo fixo com o ícone de seta para cima. Se eu clicar nela, a página rolará suavemente até o canto superior Portanto, o projeto responderá a todos os tamanhos de tela diferentes Se eu inspecionar a página , mude para o modo responsivo e verifique o projeto em diferentes tamanhos de tela Então você descobrirá que ele é responsivo e tem uma boa aparência. Como sempre. Eu quero te lembrar de uma coisa. O projeto é construído com base na primeira abordagem de desktop, e nós o construímos em uma tela maior. Estou no tamanho da tela com veículos de largura da década de 1920 e uma grande fonte de altura de dez AD Portanto, se você estiver usando um tamanho de tela relativamente menor , o projeto pode não parecer bom durante as palestras, mas isso não é um problema Eventualmente, vamos torná-lo responsivo. Enquanto isso, você pode usar o modo responsivo e definir a largura para 1920 pixels e a altura para pixels e trabalhar assim 66. Projeto 7 - Criar e personalizar a página de destino: Tudo bem, então acho que estamos prontos para ir. Vamos começar. Eu criei uma nova pasta no desktop chamada site do arquiteto, na qual tenho outra pasta para as imagens. Vamos abrir a pasta no código VS. Vou criar três arquivos diferentes para HTML, CSS e JavaScript. Vamos chamá-los de índice de HTML, depois style.css e script.js. Em seguida, vou inserir o documento HTML básico no arquivo index.html. Vamos usar meu kit. Temos que colocar aqui um ponto de exclamação e, em seguida, pressionar Enter ou tab. Então, vamos lá. Tudo bem, quer que o documento HTML básico esteja pronto. É hora de executar o projeto no navegador. Para fazer isso, vou usar um dos pacotes de código do VS chamado Live Server. Este pacote também serve para executar o projeto na vida útil do navegador e fazer alterações ou atualizações sem recarregar a página a cada vez Então, eu recomendo instalar e usar este pacote. Ok, então o projeto está em funcionamento. Temos que configurar mais algumas coisas. Primeiro, vamos vincular esses três arquivos. Vou abrir a tag do link. Em seguida, nos atributos de referência h, vou especificar o caminho do arquivo CSS. Quanto ao JavaScript, vamos abrir uma tag de script logo acima da tag do corpo de fechamento e no atributo source para especificar o caminho do arquivo de script. Além disso, vamos mudar o título. Vou inserir seu site de arquiteto. Tudo bem, então todos os três arquivos estão conectados. E a seguir, vou trazer alguns links. Durante todo o projeto. Vou usar alguns ícones Font, Awesome e também algumas fontes do Google. Vamos primeiro cuidar do link incrível da fonte. Vou pesquisar Font Awesome, CDN, js. Vamos até este link. Selecione CSS e pegue o link. Vou abrir uma tag de link aqui e colar o link como o valor do atributo de referência h. Certo? Depois disso, vou pesquisar fontes do Google. Então, este é o site do Google Fonts. No geral, vou usar três fontes diferentes. Vamos pesquisar por Lu dA2 e selecionar alguns desses estilos diferentes Em seguida, precisamos da placa Josephine. Também vou selecionar alguns estilos aqui. E, finalmente, procure um filme. Em seguida, vou pegar o link e colá-lo no elemento principal. Tudo bem, então acho que estamos prontos para ir. Vou construir o projeto seção por seção. Primeiro, prepararemos as marcações HTML e depois escreveremos alguns CSS Vamos dar uma olhada no projeto finalizado. Portanto, a primeira parte do nosso projeto que será construída é um cabeçalho. Tem o banner com um título, parágrafo e botão. Depois de recarregarmos a página. E o botão giratório termina de carregar e o banner aparecerá com uma Além disso, temos aqui uma imagem em tela cheia que tem algum efeito de animação. Além disso, vou criar um ícone de menu. Tecnicamente, não faz parte do cabeçalho. Tem uma posição fixa. Mas de qualquer forma, eu vou criá-lo. Tudo bem, basta conversar, vamos começar. Vou abrir uma tag div, que será o contêiner Em seguida, vamos abrir a tag de cabeçalho HTML5. Com um cabeçalho de classe. O cabeçalho consistirá em duas partes principais. A primeira será a imagem. Quanto à segunda parte, deve ser o banner. Vou abrir a tag div com o wrapper da classe IMG. Será o invólucro da imagem. E então, dentro desse elemento div, vamos abrir a tag de imagem e os atributos de origem Vou especificar o caminho da imagem. Precisamos do bg dot JPG da pasta de imagens. Ok, em seguida, teremos um banner. Portanto, é uma tag div aberta com o banner da classe. Ele consistirá em três elementos diferentes. O primeiro serão elementos de cabeçalho H1 com texto, arquitetura e design de interiores Em seguida, teremos o parágrafo Com algum texto fictício e também um botão com um imposto, descubra agora Ok, então aqui temos o cabeçalho com seus elementos. Em seguida, vou criar a marcação para o ícone do Menu. Então, vamos abrir a tag div com um menu de hambúrguer de classe. Portanto, as linhas do ícone serão representadas com elementos div Vamos abrir a tag div com a linha da classe, que será o nome comum da classe Mas, além disso, precisamos aqui da linha um para um estilo individualista Em seguida, duplique essa linha de código duas vezes e altere os nomes das classes Precisamos da linha dois e da linha três. Tudo bem, então isso é tudo sobre a marcação HTML para o cabeçalho Agora é hora de começar a escrever um pouco de CSS. Em primeiro lugar, vou entrevistar alguns estilos redefinidos e comuns. Vamos eliminar a margem e o preenchimento padrão de todos os elementos Para selecionar cada elemento, precisamos usar asterisco e, em seguida, definir a margem e preencher os dois como zero. Além disso, vou me livrar do contorno padrão dos elementos Não precisamos esboçar nenhum. Além disso, vamos definir o tamanho da caixa, a caixa de borda. Em seguida, vou me livrar dos estilos padrão. Para a lista. Quero dizer, não precisamos de nenhum estilo de lista E também vou me livrar dos estilos padrão dos elementos do link. Vamos passar sua decoração de texto. Nenhum. Tudo bem, como você pode ver, todos os estilos comuns e de redefinição são aplicados ao longo deste projeto Vou usar a RAM como unidade de medida No momento, uma RAM é igual a 16 pixels porque, por padrão, o tamanho da fonte do elemento HTML é igual a 16 Quero converter uma RAM em dez pixels porque acho que será mais conveniente e fácil de calcular. Então, para fazer isso, precisamos diminuir o tamanho da fonte do elemento HTML. Vamos fazer com que seja 62,5 por cento. Agora, uma RAM é igual a dez pixels. Você pode ver que os tamanhos dos elementos diminuíram. Vamos continuar e personalizar o cabeçalho. Vamos selecioná-lo. Em primeiro lugar, vou definir sua largura e altura. Esse conjunto com 200 por cento provavelmente da altura. Eu vou fazer com que tenha 100 de altura de janela de visualização. Isso significa que definimos a altura do cabeçalho em 200% da janela de visualização Em seguida, vou cuidar da imagem. Vamos selecionar seu invólucro e definir a largura e a altura, ambas em 200% Além disso, vou definir a cor de fundo para que a imagem tenha uma boa aparência. Vamos usar seu valor RGBA cor preta e com opacidade Por fim, vou personalizar a imagem em si. Então, vamos selecioná-lo. Em seguida, defina a largura e a altura, ambas em 200%. Além disso, precisamos aqui de uma cobertura para pés de objetos para manter a qualidade da imagem. E, finalmente, vou diminuir a opacidade. Vamos fazer 0,5. Então, como você pode ver, a imagem parece boa. Não temos mais aqui as barras de rolagem e agora é hora de personalizar esse banner Em primeiro lugar, vou mudar a posição do banner Vamos selecioná-lo e definir a posição como absoluta. Para definir a posição do banner de acordo com o cabeçalho, que é seu elemento pai Temos que definir a posição do cabeçalho como relativa. Em seguida, vou fazer com que a posição superior do banner 30% S para a posição Vamos fazer com que seja 15 por cento. Então o banner está posicionado e agora vou personalizar seus elementos Vamos começar com o título. Vamos selecioná-lo. Em primeiro lugar, vou definir essa família de fontes. Vamos usar uma fonte chamada abaixo dA2, o grupo de fontes serif Então eu vou aumentar o tamanho da fonte. Vamos fazer com que seja oito RAM. Além disso. Vou deixar a fonte um pouco mais clara usando o peso de fonte E depois mude a cor, torne-a branca. Então, o título parece bom. Vou diminuir sua largura para dividi-la em duas linhas diferentes. Vamos aumentar sua largura em 50 por cento Além disso, temos que diminuir a altura da linha porque há dois grandes espaços entre as linhas. Então, vamos fazer com que a altura da linha nove seja corrida. Ok? Agora parece muito melhor. Vamos adicionar aqui mais alguns estilos. Vou criar algum espaço entre as letras usando o ponto de espaçamento entre letras para a RAM E também crie um pequeno efeito de sombra usando a sombra de texto com os valores 0,3, 0,5 RAM e o RGBA com cor preta e com opacidade Tudo bem, isso é tudo sobre o elemento de cabeçalho. Vamos passar para o parágrafo. Vamos selecioná-lo. Vou definir a família de fontes para Josephine slab serif. Isso aumentou o tamanho da fonte, a torna estrangeira e altera a cor. Faça com que seja branco. Tudo bem, a seguir, vou diminuir a largura do parágrafo também. Vamos fazer com que seja 70%. E também crie algum espaço entre as letras usando espaçamento lateral com o valor 0,1 ran Depois disso, vamos criar algum espaço na parte inferior do parágrafo e também adicionar alguma sombra. Portanto, precisamos de margem inferior com um valor de três rem. E também sombra de texto. O valor é 0,3, 0,5 rampa e RGBA com cor preta e com opacidade Isso é tudo sobre o parágrafo. Vamos para o fundo. Vamos selecioná-lo. E antes de tudo, vou definir sua largura e altura. Vamos configurar com 225 RAM. Quanto à altura, vou fazer sete corridas. E também mude a cor de fundo. Vou usar aqui a cor, veja 29525. Ok, vamos seguir em frente e adicionar algumas outras estrelas na parte inferior. Vou me livrar da borda padrão. Vamos usar border none. Também altere a família da fonte. Nesse caso, vou usar uma fonte chamada Molly. Em seguida, aumente o tamanho do osso, chegue até Ram. Também transforme o texto em maiúsculas e mude a cor. Faça com que seja branco. Tudo bem, então, passo a passo, o balão Vou adicionar alguns efeitos de sombra. Vamos primeiro usar sombra de texto com valores de 0,2 ram, ponto para RAM. E o RGBA com uma cor preta e com a opacidade apontando para, Vamos duplicar essa linha de código, transformar a sombra do texto em sombra Além disso, em vez de 0,2, precisamos de 0,3, depois 0,5 e a opacidade E, finalmente, vamos criar o tipo do ponteiro do cursor. Ok, então isso é tudo sobre o Batson ser personalizado e eu acho que é muito bom Em seguida, vou estilizar o ícone do Menu. E depois disso, cuidaremos da animação. Então, vamos selecionar menu de hambúrguer e definir sua largura e altura Vou configurar 23 RAM para os dois. E também use ouvir alguns antecedentes temporários. Vamos torná-lo vermelho. Portanto, temos que cuidar da posição do ícone. Ele será colocado no canto superior direito da página. Então, vou definir a posição do ícone como fixa. Em seguida, defina as propriedades superior e direita. Vou definir os dois para cinco corridas. O ícone está posicionado. Como você pode ver, não está bem visível. Vamos corrigir isso com a propriedade z-index. E também vou tornar as linhas visíveis. Então, vamos usar aqui índice Z com algum valor maior, digamos 200. Em seguida, selecione a linha. Como você sabe, é o custo comum de todas as linhas. Então, primeiro de tudo, vamos definir largura e altura. Eu vou definir com 200 por cento. Quanto à altura, vamos fazer questão de correr. Também mude. A cor de fundo está aqui, branca e, em seguida, use sombra de caixa com os valores 0,1 RAM do que aponte para RAM. E o RGBA com três zeros e opacidade de 0,2. Tudo bem, agora as linhas estão visíveis, mas estão colocadas umas sobre as outras Precisamos de algum espaço entre eles. E vou criá-lo usando o Flexbox. Então, vamos fazer o menu de hambúrguer em um recipiente flexível. Então, precisamos mudar a direção da flexão. Vamos fazer uma coluna. Para criar um espaço uniforme entre as linhas, vamos usar o conteúdo justificado com os valores espaçados Em seguida, altere o tipo do ponteiro do cursor. E também vou me livrar da cor de fundo vermelha. Tudo bem, então com o ícone Menu, terminamos. É personalizado e tem uma boa aparência. Agora, como eu disse, vou criar algumas animações. Vou começar com a animação da imagem em tela cheia. Vai ser meio simples. Vou aumentar a escala da imagem e depois diminuí-la durante a animação. Então, vou criar quadros-chave CSS como o nome da animação Vamos usar a escala. Portanto, no geral, teremos duas etapas, ponto de partida e o ponto final. Aumentaremos a escala da imagem para 1,3 e diminuiremos para uma durante a animação. Então, em zero por cento, precisamos transformar com a função de escala. Vou inserir aqui 1.3. E todos os cem por cento. Precisamos, novamente, transformar, escalar o valor um. Então, a animação está pronta. Só precisamos aplicá-lo à imagem. Para isso, precisamos usar algumas propriedades de animação. Quero dizer o nome da animação e a duração da animação. Então, como nome da animação, precisamos usar uma escala. Quanto à duração da animação. Vamos fazer 25 s. Usamos aqui duas propriedades diferentes, mas na verdade podemos usar aqui apenas a propriedade de animação. E evite escrever algumas propriedades diferentes. Temos que especificar aqui o nome da animação, seguido pela duração, 25 s. Então, como você pode ver, a animação está funcionando. A escala da imagem está diminuindo. Mas temos aqui um pequeno problema. Quer que a escala da imagem seja aumentada. Vemos aqui essas barras de rolagem. E para corrigir isso, tivemos que usar overflow hidden e atribuí-lo ao invólucro da imagem Agora, considerado, o problema está resolvido. Tudo bem, então a primeira animação funciona bem. Vamos passar para o segundo. Eu vou animar o banner. Ele deve se mover de baixo para baixo, quer que a página seja carregada. Então, vou criar outros quadros-chave CSS. Vamos chamá-lo de banner movido. Como na animação anterior, teremos duas etapas em um ponto de partida. Vou mover os elementos para baixo e também girá-los um pouco Então, durante a animação, eles aparecerão na parte inferior e girarão para trás Primeiro, vamos ocultar todos os três elementos do banner por padrão Vamos usar a opacidade zero. Na verdade, o efeito de rotação será 3D. Então, precisamos criar um ambiente 3D. E para isso, temos que usar uma dessas propriedades CSS chamada Perspectiva. Vou atribuí-lo ao cabeçalho. Vamos fazer cem dram e depois adicionar alguns estilos aos quadros-chave Então, em zero por cento, precisamos nos transformar. Com a função Translate Y. Ele moverá os elementos de acordo com o eixo y. Vamos inserir aqui para 2M. E também precisamos girar y. Ele girará os elementos de acordo com o eixo y Ele girará os elementos de acordo com e também com -20 graus no ano passado Cem por cento. Precisamos definir as duas funções como zero. Portanto, precisamos transformar, traduzir Y zero e girar y zero também. Além disso, temos que tornar os elementos visíveis usando o opacidade um. Ok, então os quadros-chave estão prontos. Agora precisamos definir as propriedades de animação para cada elemento do banner Eles devem ter o mesmo nome e duração, mas um tempo de atraso diferente. Então, vamos atribuir a todos os três elementos. Propriedade de animação. Dentro de um banner de movimento. A duração será de 1 s. E depois disso, vou definir diferentes tempos de atraso para o título, precisamos de 0,5 s. Então, para o parágrafo, vou usar 0,7 s. Quanto ao botão, vamos fazer o tempo de atraso de 0,9 s. Tudo bem? Como você pode ver, os elementos estão ocultos por padrão. Se eu recarregar a página elas aparecerão na parte inferior Quando a animação terminar e os elementos desaparecerem novamente. Também durante a animação, vemos a barra de rolagem. Portanto, precisamos corrigir esses problemas. Quando a animação terminar, os elementos do banner devem manter esses blocos da segunda etapa dos quadros-chave Quero dizer funções de tradução e rotação com valores zero e opacidade Para conseguir isso, podemos adicionar a esses valores um valor adicional chamado forwards. Ele pertence à propriedade do modo de filme de animação. E também para nos livrarmos dessa barra de rolagem, precisamos ocultar o transbordamento Tudo bem, agora tudo funciona perfeitamente. E com um cabeçalho, terminamos 67. Projeto 7 - Criar e fazer trabalho com a barra lateral: Vamos seguir em frente e começar a trabalhar na próxima parte dos projetos. Vou criar a barra lateral e também fazer o menu de hambúrguer funcionar Vamos dar uma olhada no projeto finalizado. Então, quando eu clicar no ícone do menu e, em seguida, na barra lateral que exibiremos, ela se moverá da direita para a esquerda Temos aqui alguns itens do menu. Se eu passar o mouse sobre eles, eles mudarão de cor muito bem Além disso, temos aqui vários ícones de mídia social na parte inferior da barra lateral Se eu passar o mouse sobre o botão de fechamento x , uma pequena dica de ferramenta aparecerá com o texto fechado E quando eu clicar no X, na barra lateral, fecharemos Dito isso, o que vamos criar nesta parte. Primeiro, vamos criar a marcação HTML. Vou abrir a tag da seção logo após o cabeçalho. Vamos atribuir a ela a barra lateral da classe. A barra lateral consistirá em duas partes diferentes. Teremos os itens de navegação e alguns ícones de mídia social. Então, vamos abrir o elemento UL com o menu da classe. Em seguida, precisamos do elemento LI com um item de menu de nome de classe, seguido pelos elementos de link, que devem ter um link de menu de classe. E como primeiro item do menu, vou inserir aqui a página inicial. Portanto, no geral, teremos cinco itens de menu diferentes. Então, vamos duplicar o elemento LI quatro vezes e alterar o conteúdo A segunda será sobre nós. Em seguida, teremos preços e contextos de equipe. Então, como você pode ver aqui, nós temos os links. Em seguida, vamos adicionar alguns ícones de mídia social à barra lateral Vou abrir o elemento div com uma classe, mídia social. Em seguida, vou passar seus elementos de link, que incluirão Fonte, ícone Awesome. O primeiro será o Facebook. Então, precisamos aqui da classe FAB, a, Facebook, F. Vamos duplicar o elemento de link duas vezes E para mudar os nomes das turmas, precisamos aqui, FAB, FAA, Instagram E o terceiro será f a b, f um tweeter. Tudo bem, então com a marcação HTML, terminamos. Vamos começar a personalizar a barra lateral. Vou selecioná-lo e definir sua largura e altura. Vamos fazer sua largura para duas RAM. Quanto à altura, será a altura de cem janelas de visualização Além disso, vou definir a posição que será fixada. E então precisamos colocar as propriedades principais e corretas. Ambos são iguais a zero. Tudo bem? Portanto, a barra lateral é colocada da maneira correta. E para ver melhor, vamos mudar a cor de fundo. Vamos usar aqui a cor branca. Ok, vamos seguir em frente e começar a personalizar os itens do menu. Vou selecionar o menu em si e posicioná-lo em algum lugar no centro da barra lateral Então, vamos definir sua posição, torná-la absoluta. Em seguida, defina a propriedade principal para 40 por cento. Em seguida, precisamos sair com um valor de 50 por cento. E também para centralizar o elemento, vamos usar Transformar, Traduzir e passar o ano -50 por cento duas vezes O menu está posicionado. Em seguida, vou personalizar os itens. Vamos prosseguir e selecionar os elementos LI, que têm um item de menu de classe e atribuídos ao centro de alinhamento de texto Depois disso, vou selecionar os links. Em primeiro lugar, vamos definir a família de fontes. Nesse caso, vou usar uma fonte chamada valor dA2. Serifa. Em seguida, aumente o tamanho da fonte, torne-o para a RAM. E também mude a cor. Faça com que seja cinza escuro usando 555. Ok, isso é tudo sobre os itens do menu no momento, vamos seguir em frente e cuidar dos ícones de mídia social Vou selecionar o elemento div, que é o invólucro dos Antes de tudo, vamos definir a posição, torná-la absoluta. Como você sabe, os ícones de mídia social devem ser colocados na parte inferior da barra lateral Então, vou definir a propriedade inferior com um valor de três rem e também fazer com que a largura seja cem por cento. Ok, a seguir, vou colocar o olho constantemente no centro para isso. Vamos usar o flexbox. Precisamos de um display flexível e um centro de conteúdo justificado. Tudo bem, vamos seguir em frente e personalizar os ícones. Vou selecionar elementos. Primeiro, vamos aumentar o tamanho da fonte, fazer com que ela aponte para a RAM. E crie margem. Três correram. Depois disso, vamos definir a largura e a altura. Vou configurar os dois para 4,5 RAM. Também altere a cor do plano de fundo. Faça com que seja cinza escuro usando 777. E depois mude a cor. Torne os ícones brancos. Então, vou colocar os ícones no centro dessas caixas. E também faremos as caixas em círculos. Para centralizar os ícones. Vou usar o Flexbox. Vamos usar o display flex e depois justificar o centro de conteúdo. E alinhe os itens no centro. Quanto às caixas de fazer círculos como raio de borda com Ok? Então, os ícones parecem bons. E a última coisa que eu quero fazer em relação eles é criar um efeito simples de passar o mouse Vou mudar a cor de fundo ao passar o mouse. Então, vamos selecionar elementos com o mouse e alterar a cor de fundo Vou usar a cor C2 9525. Além disso, precisamos de valores de transição, cor de fundo e 0,3 s. Tudo bem, então com os ícones de mídia social, terminamos Vamos voltar aos itens do menu e criar. O efeito de flutuação será diferente. Não será esse simples mouse que usamos há um minuto. Então, quando passarmos o mouse sobre os itens, eles devem mudar a cor da esquerda para a direita. Deixe-me explicar o que vamos fazer. Criaremos os pseudoelementos anteriores para cada item do menu com exatamente o mesmo conteúdo, mas com uma cor diferente Por exemplo, a casa terá o pseudo elemento anterior com o texto Home About Us terá sobre nós e assim por diante Eles serão colocados nos itens reais do menu, mas terão a largura de zero pixels. Depois de passarmos o mouse sobre os itens, a largura do pseudo-elemento anterior aumentará para 100 por cento. E isso criará o efeito de mudança de cor. Tudo bem, vamos escrever o código e ele ficará mais claro Vamos selecioná-lo antes dos pseudoelementos. A primeira coisa que precisamos fazer é definir o conteúdo. Como dissemos, cada pseudo elemento terá o mesmo conteúdo Portanto, podemos selecionar os pseudoelementos para todos os links do menu separadamente usando o seletor enésimo filho Ou podemos usar um pequeno truque. Vou atribuir a todos os links do menu o atributo chamado conteúdo de dados Em seguida, especificarei o conteúdo de cada link do menu separadamente. Para o primeiro, precisamos da OMS. Então, sobre nós? Então precisamos de uma equipe. Preços e contato. Depois disso, só precisamos atribuir à propriedade de conteúdo uma função chamada atributo, que é expressa como TTR E precisamos especificar aqui o nome do atributo, que é o conteúdo dos dados. Tudo bem? Depois disso, vou definir a posição. Vamos torná-lo absoluto. Precisamos de uma posição relativa para o link do menu porque são os elementos principais. E precisamos posicionar antes do pseudo-elemento de acordo com o link do menu Depois disso, vamos definir as propriedades superior e esquerda. Precisamos zerar os dois e mudar a cor , C2 9525 Tudo bem, então o que vemos aqui são os pseudoelementos anteriores Agora vou tornar sua largura zero por padrão e aumentá-la em 200% ao passar o mouse Então, no momento, os pseudo-elementos anteriores ainda estão visíveis. E também o segundo item está dividido em duas linhas. Para corrigir esses problemas, precisamos usar overflow hidden, que o ocultará antes de pseudoelementos E para evitar o empacotamento do texto, precisamos de um espaço em branco com um valor sem representante. Tudo bem, agora estamos prontos para ir. Vamos usar o efeito hover. Vou selecionar o link do menu com o mouse, seguido pelos pseudoelementos anteriores E temos que fazer com cem por cento. Além disso, vou usar a transição com os valores de largura 0,3 s. Além disso, vou usar uma das funções de temporização de transição chamada ease in, out Então, como você pode ver, o mouse funciona perfeitamente e cria um efeito muito bom e legal Tudo bem, então, com os itens do menu, terminamos. Em seguida, temos que fazer o menu de hambúrguer funcionar. Eu vou esconder essa barra lateral por padrão e exibi-la quando clicarmos no ícone do menu, também temos que transformar as linhas em X e exibir a dica da ferramenta quando passarmos o mouse sobre o x. Primeiro de tudo, vou conseguir exibir ocultando a E faremos isso usando um pouco de JavaScript. Então, criaremos uma nova classe e CSS chamada change, que incluirá alguns estilos para a barra lateral Adicionaremos esse nome de classe ao contêiner quando clicarmos no ícone do menu. Então, vamos ao arquivo script.js e primeiro selecionar o ícone do menu. Eu vou fazer isso usando o método seletor de consulta. Temos que especificar aqui o nome da classe, que é menu de hambúrguer Em seguida, precisamos anexar aos elementos o ouvinte de eventos usando o método add event listener, que terá dois argumentos O primeiro será o tipo do evento. Clique em. Quanto ao segundo argumento, será a função de seta, que será executada assim que clicarmos nos elementos. Depois disso, precisamos selecionar o contêiner. Vamos usar novamente o método seletor de consulta e passar o contêiner do nome da classe Então, novamente, temos que adicionar a classe ao contêiner quando clicamos no ícone e removê-la no próximo clique. Portanto, precisamos usar um método de alternância. No início, vou usar aqui a propriedade da lista de classes. Essa propriedade retorna todas as classes que o elemento tem. Em seguida, precisamos anexar a ele um método chamado toggle. E temos que especificar aqui o nome da classe. Mudança. Tudo bem, então isso é tudo sobre o JavaScript. Vamos voltar ao CSS. Eu vou esconder a barra lateral por padrão. Para isso, vamos mudar sua posição correta. No momento, é igual a zero e precisamos aqui de -40 rampas, porque a largura da barra lateral é igual a Correu. Depois disso, precisamos selecionar uma mudança de classe, seguida pela barra lateral Temos que definir a posição correta para zero. Por fim, vamos usar a transição com os valores à direita e 0,5 s. Então, se eu clicar no ícone a barra lateral será exibida com uma transição suave e fechará quando clicarmos novamente no Tudo bem, então a barra lateral está se movendo, mas o ícone do Menu não muda Como você sabe, tivemos que transformá-lo em x. Mas antes disso, vou fazer com que ícone do menu se mova com o clique. Quero dizer, ele deve se mover na mesma direção que a barra lateral Para isso, novamente, precisamos usar uma nova mudança de classe, seguida pelo menu de hambúrguer E eu vou mudar sua posição correta. Vamos fazer com que seja 33 rampa. Use também a transição. Precisamos aqui, certo? E a duração de 0,7 s será um pouco maior do que a duração da transição da barra lateral Isso criará um bom efeito Então, vamos considerar que o ícone está se movendo com uma boa transição. Tudo bem, finalmente, vamos transformar o ícone em x. Precisamos transformar a primeira e a terceira linhas Quanto à segunda linha, primeiro temos que escondê-la. Vamos mudar a cor do plano de fundo porque a barra lateral tem um fundo branco e o ícone não está bem visível Vou selecionar a linha mais uma vez, porque eventualmente adicionaremos a ela a mudança de classe. Então, vamos mudar a cor de fundo. Vou usar aqui valor RGBA com uma cor preta e com a opacidade Em seguida, vou selecionar as linhas com os nomes das classes individuais. Vamos selecionar a primeira linha. Então, quando clicamos no ícone, a primeira linha deve girar e também se mover levemente de acordo com as duas direções Estou nos eixos x e y. Portanto, precisamos transformar com a função de rotação. Vou girar linhas com 45 graus. Quanto à função de tradução, vou passar aqui 0,3 RAM e depois 0,8 rampa. Como dissemos, a segunda linha ficará oculta. Então, vamos selecioná-lo e atribuir a ele opacidade zero e Ok, é isso sobre a segunda linha. Em seguida, temos a linha três. Vou copiar esse código daqui. Vamos mudar o nome da classe. Precisamos da linha três. E também precisamos de -45 graus e -0,8 RAM. Ok? Como você pode ver, temos aqui o x. E para que funcione, precisamos adicionar a todas as três linhas a mudança de classe. Tudo bem, então o menu de hambúrguer funciona perfeitamente. E, na verdade, decidimos onde estamos quase terminando. A única coisa que eu quero criar é a dica de ferramenta, que deve ser exibida quando passarmos o mouse sobre o x. Primeiro de tudo, vou adicionar um elemento span no menu de hambúrguer Vamos inserir suas roupas. Como você pode ver agora, isso bagunçou um pouco as linhas Precisamos estilizá-lo. Então, vamos seguir em frente e selecionar os ossos da coluna vertebral. Antes de tudo, vamos definir sua posição, torná-la absoluta. E então defina a propriedade esquerda como cinco corridas. O elemento de extensão está posicionado. Vamos definir sua largura e altura. Vou definir sua largura para dez RAM. Quanto à altura, vamos fazer isso para a RAM e também alterar a cor de fundo. Vou usar aqui a cor E para ser 646. Ok, em seguida, vou colocar o texto no centro e personalizá-lo. Vamos usar o flexbox. Precisamos exibir a flexibilidade e, em seguida, justificar o centro de conteúdo. Também alinhe o centro dos itens. Vamos mudar a cor do texto e também cuidar da fonte. Eu vou fazer a cor branca. Quanto à família de fontes, vou usar a serifa abaixo de dA2 Em seguida, altere o tamanho da fonte, faça com 1,6 RAM. E também crie algum espaço entre as letras usando o espaçamento de rede com o valor Tudo bem, então a dica de ferramenta está quase pronta. Precisamos adicionar uma pequena seta no lado esquerdo. E vou criá-lo usando pseudoelementos anteriores Então, vamos selecionar o elemento span com os pseudoelementos anteriores Vamos esvaziar o conteúdo. E posição definida. Faça com que seja absolutamente. Então, no momento, o pseudo elemento não está visível, mas vamos corrigir isso Vou criar sua forma com a ajuda das bordas. Portanto, precisamos definir a borda em todos os quatro lados. Vamos começar com o lado esquerdo. Precisamos de uma borda deixada com os valores que executados em cores sólidas e transparentes. Em seguida, vou usar a borda, certo? Valoriza uma RAM, sólida, e o chamador e é 646 Em seguida, vou usar a borda inferior. Na verdade, vamos pegar esses valores daqui e colá-los. Em seguida, duplique essa linha de código e mude de baixo para cima Agora o elemento está visível, mas precisamos definir sua posição. Vamos fazer com que sua primeira posição seja de 50 por cento. Então eu vou definir a posição esquerda. Vamos fazer com que sejam menos duas RAM e também usar Transform. Traduza y com o valor -50%. Tudo bem, então é isso. A dica de ferramenta está pronta. Eu vou escondê-lo por padrão. E quando passarmos o mouse sobre o ícone, ele deverá ser exibido Portanto, precisamos aqui de opacidade zero, visibilidade oculta. Em seguida, vou selecionar o ícone com o mouse, seguido por esse elemento de extensão Vamos tornar a opacidade única e a visibilidade visível. E também vou usar a transição com os valores all e 0.2 s. Tudo bem, então quando passarmos o mouse sobre o ícone, uma dica de ferramenta será Mas, na verdade, temos aqui um pequeno problema. Se eu passar o mouse sobre o ícone enquanto a barra lateral estiver oculta, a dica de ferramenta será exibida Não precisamos disso, precisamos exibi-lo quando o ícone for transformado em x. E para conseguir isso, precisamos usar novamente a mudança de classe. Tudo bem, agora tudo funciona perfeitamente com esse lado, mas terminamos 68. Projeto 7 - Crie e estilo sobre nós seção usando CSS Grid: É hora de passar para a próxima seção, que será a seção Sobre nós. Vamos dar uma olhada no projeto finalizado e descobrir novamente o que vamos construir Então, esta é a seção Sobre nós. Consiste em um cabeçalho que inclui o título, o subjacente Abaixo, temos alguns parágrafos com títulos e alguns ícones do Font Awesome No centro desta seção, podemos ver a imagem da casa. Essa seção será meio simples, mas ao mesmo tempo interessante, porque vamos criar o layout usando a grade CSS. Tudo bem, vamos começar a criar a marcação HTML Vou abrir essa tag de seção logo após a barra lateral com o nome da classe sobre nós. Em seguida, vou inserir aqui o cabeçalho. Na verdade, também teremos o mesmo cabeçalho em outra seção. Então, vou usar aqui alguns nomes de classes comuns, digamos cabeçalho de seção Então, como dissemos, o cabeçalho consistirá em um título e outra linha Então, vou instituir o elemento de cabeçalho H1 com o título da seção de aula com o conteúdo sobre nós E abaixo, abra a tag div com a classe subjacente. Tudo bem, em seguida, temos que cuidar dos serviços. No geral, teremos seis deles. Cada serviço consistirá em um título, fonte, um ícone incrível e um parágrafo. Em primeiro lugar, vou abrir uma tag div, que será o invólucro dos serviços Em seguida, abra uma tag div para o próprio serviço. Portanto, teremos duas partes principais em cada serviço. O primeiro será o cabeçalho do serviço, que incluirá o ícone Font Awesome e o título Em seguida, dentro dele, abra os elementos I com os nomes das classes, FAS, uma caneta, uma ponta Em seguida, vou abrir o elemento de cabeçalho h3 com o interior do conteúdo E também precisamos de um parágrafo com os textos do serviço de aula e com algum texto fictício Tudo bem, como dissemos, no geral, teremos seis superfícies Então, vou duplicar esse código cinco vezes e alterar os nomes das classes dos elementos I e também os cabeçalhos Então, o segundo será FAS, um rolo de pintura provavelmente como cabeçalho. Vamos torná-lo externo. Em seguida, teremos o FAS, um lápis e o design do título. Então, a próxima será pintura FASFA, decoração com pincel Em seguida, teremos a régua FASFA combinada. E o título será planejamento. Quanto ao último serviço, vamos usar a classe FAR como edifício e a execução do cabeçalho. Tudo bem, então aqui temos os serviços. A única coisa que precisa fazer em relação à marcação HTML é adicionar a imagem Então, vou abrir a tag div, que será o invólucro da imagem Vamos atribuir à classe about us image wrapper que abra a própria tag de imagem No atributo de origem. Vamos especificar o caminho da imagem. Precisamos do House dot PNG da pasta de imagens. Ok, então isso é tudo sobre a marcação HTML. Tudo está pronto para começar a escrever o CSS. Como eu disse, o layout da maior parte desta seção será criativo usando a grade CSS. Então, vou mudar o projeto para o Mozilla Firefox por um tempo Porque hoje em dia, o Mozilla Firefox tem as melhores ferramentas de desenvolvedor para o módulo de grade CSS Isso tornará nosso processo de trabalho mais conveniente e flexível. Se você não estiver familiarizado com o módulo de grade CSS , confira nosso tutorial rápido de CSS no YouTube. Você pode encontrar o link na descrição. Tudo bem, vamos começar a escrever o CSS. Em primeiro lugar, vou selecionar os elementos desta seção. Vamos definir sua largura. Faça com que seja 100 por cento Também mude a cor de fundo. Vou usar uma cor cinza claro, F5, F5, F5. E também crie algum espaço na parte inferior usando a parte inferior de preenchimento com a rampa de valor 15 Ok, agora vou personalizar o cabeçalho. Vamos selecionar o cabeçalho da seção. Primeiro, temos que centralizar os elementos. E para isso vou usar o flexbox. Então, vamos fazer o cabeçalho da seção Flex container. Então precisamos mudar a direção. Vamos fazer uma coluna. E para centralizar os itens flexíveis, precisamos alinhar os itens no Além disso, vou criar algum espaço dentro do cabeçalho usando o preenchimento Vamos fazer um preenchimento nas sete RAM superiores do que zero no lado direito, tan Rome na parte inferior e zero no lado esquerdo Tudo bem, então o cabeçalho está centralizado e agora vou personalizar o título e depois o sublinhado Vamos começar com o título. Vamos selecioná-lo. E antes de tudo, defina a família da fonte. Nesse caso, vou usar uma fonte chamada movie serif. Em seguida, aumente o tamanho da fonte, torne-o cinco rem. Além disso, vou tornar a fonte mais clara usando o peso de fonte 300 Em seguida, mude a cor. Vou usar cores para B, para B, para B. E criar espaço na parte inferior usando a margem, seis redondos inferiores. Tudo bem, então o título parece bom. Vamos seguir em frente e cuidar do subjacente. Vamos selecionar os elementos. Defina sua largura e altura. Vou definir a largura para 12 RAM. Quanto à altura, vamos fazer com que seja 0,3 corrida. Além disso, para tornar o subjacente viável, temos que definir a cor de fundo Vamos usar aqui C2 9525. Tudo bem, então com o cabeçalho, terminamos. Vamos seguir em frente e cuidar desses serviços. Como eu disse, vou alinhá-los com a grade CSS. Então, vamos selecionar o invólucro com os serviços da classe Primeiro, vamos definir a largura e a altura, transformar ambas em cem por cento e, em seguida, transformar os serviços em um contêiner de grade usando a grade de exibição. Então, no momento, nada mudou aqui porque ainda não definimos linhas e colunas. Então, no geral, teremos 16 colunas e seis linhas. Portanto, temos que definir as colunas do modelo de grade. Vamos usar a função de repetição e especificar aqui o número da coluna 16 e depois o tamanho da coluna, uma unidade fracionária Em seguida, temos as linhas do modelo de grade. Então, teremos seis rolos. Use novamente a função de repetição, onde o argumento seis , quanto ao tamanho, vou usar seis RAM. Finalmente, vou criar espaço entre as linhas usando a lacuna de linha da grade com valor para R1 Tudo bem? Como você pode ver, os elementos mudaram de posição. Isso aconteceu automaticamente e agora temos que definir suas posições manualmente e criar o layout. Antes de fazer isso, vou inspecionar a página e exibir o layout da grade No lado direito das ferramentas do desenvolvedor, temos uma seção de layout onde podemos encontrar um elemento div com o serviço de classe Então, se eu marcar aqui, a pequena caixa, o layout da grade será exibido. Você pode encontrar aqui as colunas e as linhas com números de linha corretos. Então, Mozilla, Firefox, eles também exibirão o layout da grade dessa forma Tudo bem, vou diminuir o tamanho da imagem por um tempo porque acho que ela está muito grande agora Então, vamos selecionar Imagem e definir sua largura para 50 RAM. Depois disso, vamos definir as posições dos serviços separadamente. Para selecioná-los separadamente, vou usar o seletor de enésimo filho Então, vamos começar com o primeiro serviço. Vamos selecioná-lo com o nono seletor de filhos. E como o número do serviço, vamos especificar um. Então, agora temos que definir os linhas da coluna da grade e os números das linhas da grade. Vamos começar com a coluna da grade. Vou colocar o Serviço Florestal entre 4,7 linhas. Então, vamos usar aqui para a barra sete. Quanto à linha da grade, o serviço será colocado entre a primeira e a terceira linha. Vamos passar para o segundo serviço. Vou duplicar esse código, alterar o número do serviço e também o número de colunas e linhas de líquido Portanto, no caso de um segundo serviço, precisamos dos números de linha 3.6 da coluna da grade. Quanto à linha da grade , será 3,5. Na verdade, vou definir rapidamente os números das linhas para o resto dos serviços porque todos vocês são isso. Então, a maneira que vou usar para alinhá-los. Portanto, para o terceiro serviço, precisamos da coluna da grade para sete e da linha da grade cinco menos um O próximo conta para o serviço. Precisamos de uma coluna de grade, números de linha 11.14. Asfalte a linha da grade. Precisamos de 1.3. Para o quinto serviço. Vou definir a coluna da grade como 12, 15, S4, a linha da grade que precisamos de três e 5.4, o último item Para o sexto serviço, precisamos dos números de linha da coluna da grade 11.14 Quanto à linha da grade, precisamos de cinco menos um Tudo bem? Portanto, todos os seis serviços estão alinhados, mas não é isso que queremos porque a imagem quebrou o layout Vamos seguir em frente e definir sua posição também. Vou definir a posição do invólucro. Vamos usar a coluna de grade e configurá-la como 7.11. Quanto à linha da grade, vou configurá-la como 2.6. Agora temos uma situação muito melhor, mas precisamos adicionar mais alguns estilos ao invólucro da imagem e à própria imagem para tornar o layout perfeito Então, vou definir a largura do invólucro da imagem em 200% Quanto à imagem, vamos aumentar sua largura em cem por cento também. Além disso, precisamos de uma capa de alimentação de objetos para manter a qualidade da imagem. Além disso, vou diminuir um pouco a opacidade. Vamos fazer com que seja 0,8. Tudo bem, agora a imagem está posicionada perfeitamente e terminamos com ela Vamos cuidar dos serviços. Eu quero que eles ocupem 100% de suas células da grade. Então, vamos selecionar o serviço e fazer com 100 por cento. E também cria algum espaço na parte inferior. Usando a margem inferior para executar. Depois disso, vamos personalizar os elementos individuais no serviço. Vamos começar com o cabeçalho do serviço, onde temos a Fonte, o ícone Awesome e o título Então, vamos selecionar esse elemento. Vou fazer com que seja um contêiner flexível usando o display flex. Além disso, vamos alinhar os itens no centro e criar algum espaço na parte inferior usando a margem inferior de uma rampa Na verdade, algo está errado aqui porque o ali deve ser colocado no topo do parágrafo. Vamos verificar a marcação HTML. Como você pode ver, o parágrafo é colocado dentro do cabeçalho e esse é o erro Ele deve estar fora do cabeçalho. Então, vamos corrigir isso rapidamente em todos os serviços. Certo? Depois disso, vou estilizar o ícone Font Awesome. Então, vamos seguir em frente e selecionar esse elemento. Primeiro de tudo, vamos aumentar o tamanho da fonte, torná-la para a RAM. Em seguida, mude a cor. Vou usar para B três vezes. E também crie algum espaço no lado direito do ícone usando a margem direita para executar. Tudo bem, então os ícones parecem bons e, em seguida, vem o título Então, vamos seguir em frente e selecionar esses elementos. Em primeiro lugar, vou definir família de fontes. Vamos usar aqui de Lou Da2. Serifa. Em seguida, altere o tamanho da fonte, faça com 2,6 RAM. E também defina a altura da linha com o mesmo valor, 2,6 RAM. Além disso, vou deixar a fonte mais clara usando a espessura da fonte 400. E cria um espaço na parte inferior usando a margem inferior para correr. Tudo bem, então o estilo do título também. E, finalmente, temos que cuidar dos parágrafos, selecionar os textos do serviço Primeiro, defina a família da fonte. E neste caso eu vou usar Josephine Slab Serif. Em seguida, defina o tamanho da fonte, faça com 1,6 RAM. E também vou usar a propriedade de alinhamento de texto com uma justificação de valor Tudo bem, então os parágrafos parecem bons. E, na verdade, terminamos de trabalhar na seção Sobre nós. Agora é hora de seguir em frente e começar a trabalhar na próxima seção, que será a seção da equipe 69. Projeto 7 - Crie e personalize cartões com Tilt: Em primeiro lugar, vou lembrá-lo do que vamos construir. Então, vamos dar uma olhada no projeto finalizado. Então, aqui temos a seção de equipe. Consiste no cabeçalho e três cartões. Se eu passar o mouse sobre os cartões, algumas informações com um botão aparecerão E também é possível ver que temos aqui um efeito de foco agradável e legal A corrente se move de acordo com a direção do cursor. Esse efeito será criado usando um dos plug-ins de JavaScript chamado JS Tudo bem, então vamos ver o que vamos construir. Como sempre, vamos começar com a marcação HTML. Vou abrir uma tag de seção logo abaixo da seção Sobre nós. Vamos designar para a equipe da turma. Portanto, no geral, teremos duas partes nesta seção. O primeiro será o cabeçalho. Na verdade, vou pegar o código da seção anterior. Vamos colá-lo aqui e mudar o título que precisamos aqui, nossa equipe. A segunda parte desta seção será o invólucro de cartões, que incluirá os três cartões Portanto, é uma tag div aberta com um invólucro de cartões de classe. Então, precisamos de outro div, que será o próprio cartão. Portanto, cada cartão consistirá em duas partes diferentes. A primeira será a imagem. Vamos abrir uma tag div, que será o invólucro da imagem que vou atribuir a ela, invólucro de imagem do cartão de classe Em seguida, abra em qual alvo em si. Vamos especificar as partes da imagem. Precisamos de uma imagem chamada Pessoa de um ponto JPEG da pasta de imagens. E também vou atribuir ao atributo alt, o valor, digamos, CEO A segunda parte do cartão será a informação do cartão, onde temos algumas informações sobre a pessoa. Então, vou passar aqui os elementos de cabeçalho H2, que incluirão o nome completo da pessoa Então teremos outro título, quero dizer, elementos de cabeçalho h3, que especificarão a posição da pessoa Vamos inserir seu CEO. Em seguida, teremos um pequeno parágrafo com algum texto fictício. E, finalmente, vou inserir seu botão com o texto, leia mais. Tudo bem, então aqui temos o primeiro cartão, que agora parece muito feio porque temos aqui apenas HTML puro Então, no geral, teremos três cartas. Então, vamos duplicar o primeiro cartão duas vezes e depois fazer algumas alterações Vou mudar o nome da imagem que vai ser pessoa para JPG. Também altere o atributo alt que precisamos aqui, designer. O nome completo da pessoa será n Brown. E o designer de posições. Em seguida, precisamos mudar o nome da imagem para o terceiro cartão, que será JPG de três pontos da pessoa. Além disso, o atributo alt será arquiteto. Então eu vou mudar o nome completo, vou me casar com TO. E, finalmente, mude a posição, certo? Arquiteto. A marcação HTML é criada e tudo está pronto para começar a escrever o CSS Primeiro, vou personalizar a seção inteira e depois usaremos o tilde J como plugin Então, vamos seguir em frente e selecionar os elementos desta seção. Vou fazer com que seja um contêiner flexível usando o display flex. Também mude a direção que precisamos aqui na coluna. E então, para centralizar os itens flexíveis horizontal e verticalmente, vamos usar a central de conteúdo justificar e alinhar o centro Finalmente, vou criar algum espaço dentro desta seção usando preenchimento Vamos fazer um acolchoamento na parte superior. Zero, depois cinco rem no lado direito, 20 rampa na parte inferior e cinco rem no lado esquerdo Certo. Em seguida, vou cuidar da embalagem dos cartões. Então, vamos seguir em frente e selecionar esse elemento. Faça com que seja um recipiente flexível. Em seguida, vou criar algum espaço entre os cartões usando o justify content space uniformemente Por fim, vamos criar algum espaço na parte superior das cartas usando a margem superior com o valor oito Ran Ok, como você pode ver, as cartas são colocadas horizontalmente em uma Vamos em frente e personalizá-los. Eu vou fazer um cartão solo. Vamos definir sua largura e altura. Vou configurar com 237 RAM Quanto à altura, vamos fazer com que seja 45 rem Então, agora, como você pode ver, cada um dos cartões tem uma largura e altura diferentes porque temos as imagens muito maiores. Então, precisamos definir seus tamanhos. Vamos selecionar Image wrapper e definir a largura e a altura. Vou definir para os dois 200 por cento. Em seguida, selecione a imagem em si e defina a largura e a altura. Vamos fazer os dois cem por cento e também usar uma cobertura para pés de objetos. Como você pode ver, não temos aqui o espaço entre os cartões porque não definimos a largura do invólucro Keras Então, vamos atribuir a ela uma largura e configurá-la para 100%. Tudo bem, agora temos resultados muito melhores. Todas as imagens têm o mesmo tamanho. Vamos seguir em frente e usar mais alguns estilos. Vou adicionar sombra usando box shadow com os valores 01 executados para RAM. E então o valor RGBA com a cor preta e com o ponto de opacidade Para. Em seguida, vou adicionar algumas estrelas ao invólucro da imagem e à própria imagem. Então, para o invólucro, vou definir a cor de fundo Vamos fazer com que seja 262626. E também precisamos raio da borda para arredondar os cantos Vamos fazer uma rampa de 0,5. Em seguida, vou adicionar algumas estrelas à imagem. Vou diminuir um pouco a opacidade. Vamos fazer com que seja 0,8. E também precisamos usar raio de borda com o Além disso, também precisamos de um raio de borda para o carrinho para criar um raio perfeito para o cartão Então, vamos fazer uma rampa de 0,5 também. Tudo bem, agora temos que cuidar das informações do cartão. Como você já sabe, ele será colocado abaixo e deve estar oculto. E então, quando passarmos o mouse sobre o cartão, ele deverá ser exibido. Agora eu vou colocá-lo no cartão. E depois de personalizá-lo, cuidaremos do efeito de foco Então, vamos seguir em frente e selecionar as informações do cartão. E que sua posição seja absoluta. Em seguida, precisamos da posição relativa da carta porque vou posicionar as informações da carta de acordo com a carta, que é o elemento pai. Em seguida, defina a propriedade inferior das informações do carro e chegue até Ram. E também crie algum espaço dentro dos elementos usando preenchimento, valor para rampa Tudo bem, vamos continuar e personalizar os elementos individuais nas informações do cartão Vou começar com um título. Então, vamos prosseguir e selecioná-lo. Defina sua família de fontes. Vou usar a fonte chamada abaixo, a serifa A2. Em seguida, altere o tamanho da fonte, faça dois pontos por Ram. Além disso, precisamos usar sua altura de linha com o mesmo valor de 2,5 percorridos Torne a fonte mais clara usando a espessura da fonte 300 e também altere a cor. Faça com que seja e. Tudo bem, então o primeiro título parece bom Eu quero adicionar a isso um pouco de sombra. Na verdade, eu também quero a sombra para o resto dos elementos. Então, vou atribuí-lo às próprias informações do cartão. Então, vamos definir a sombra dos textos com os valores 0,2, 0,5 RAM e o valor RGBA com cor preta e com opacidade Tudo bem, vamos seguir em frente e personalizar o segundo título. Vamos selecioná-lo. Família de fontes definida. Vou usar aqui moly serif. Em seguida, altere o tamanho da fonte e transforme-a em Ram. Além disso, torne a fonte mais clara usando a espessura da fonte 500, altere a cor do texto. Vou usar aqui chamado de A5 para A12 oito. E, finalmente, vamos criar algum espaço na parte inferior dos elementos usando margem inferior com valor de uma corrida. Ok, então é isso em relação ao segundo título, vamos passar para o parágrafo. Vamos selecioná-lo e definir a família da fonte. Vamos usar aqui abaixo a serifa dA2. Em seguida, vou mudar o tamanho da fonte. Vamos fazer disso uma observação sobre a RAM. Além disso, vou definir a altura da linha. Neste caso, vamos fazer com 1,6 RAM. Altere a espessura da fonte. Use aqui 300. Além disso, vou mudar a cor do texto. Vamos fazer por exemplo. E. Depois disso, vou diminuir um pouco a largura do parágrafo. Vamos fazer com que seja 80 por cento. E também crie algum espaço na parte inferior usando margem, parte inferior para abarcar. Tudo bem, então o parágrafo parece bom. E o último elemento que precisamos personalizar aqui é o botão. Então, vamos selecioná-lo. Defina sua largura e altura. Vou definir a largura para dez RAM. Quanto à altura, vamos fazer com que sejam três RAM. E também mude a cor de fundo. Vamos fazer com que seja c29, 525. Ok, vamos adicionar mais algumas estrelas ao botão. Vou obter uma borda redutora de voltagem. Vamos usar border none. Em seguida, altere a família da fonte. Vamos usar abaixo a serifa A2. Em seguida, vou definir o tamanho da fonte. Vamos fazer disso uma observação sobre a RAM. E também defina a altura da linha. Faça com que seja 1,5 rem. Quanto à cor. Vamos fazer com que seja e. Tudo bem, então finalmente vou fazer os botões ligeiramente arredondados e criar um pequeno efeito de sombra Vamos usar raio de borda com valor de 0,3 rampa. E também use box-shadow com valores de 0,1 rem, 0,8 RAM e o valor RGBA com cor plana e com o ponto de opacidade botão personalizado e, na verdade, estamos prontos para personalizado e, na verdade, estamos prontos para Primeiro, vamos mudar a posição das informações do carro e também ocultá-las. Precisamos aqui que a propriedade Watson seja igual a zero. E também precisamos de opacidade zero e visibilidade oculta. Em seguida, vou selecionar um cartão com no entanto, seguido pelas informações do cartão. Depois de passar o mouse sobre o cartão, precisamos mover as informações do cartão e torná-las visíveis Portanto, precisamos comprar alguma propriedade com valor para RAM do que opacidade para zero e visibilidade visível Além disso, vamos usar transição com os valores all e 0.3 s. Tudo bem, então, como você pode ver, o efeito de foco funciona bem Na verdade, quero acrescentar aqui mais uma coisa. Depois de passarmos o mouse sobre o cartão, quero deixá-lo um pouco mais escuro Então, vamos selecionar o cartão com, no entanto. Em seguida, deve ser seguido pela imagem. Vamos diminuir a opacidade, torná-la 0,5. E também use valores de transição, opacidade e 0,3 s. Tudo bem, como você pode ver, tudo funciona perfeitamente e na verdade, estamos prontos para usar o plugin chamado tilde J S. Primeiro de tudo, vou visitar seu site, pesquisar por Então, aqui está o site do plug-in tildes JS. Você pode encontrar aqui informações diferentes. Estou usando diferentes usos do plugin com opções diferentes Além disso, temos aqui as instruções de como usar esse plug-in Vou clicar no link de download. Navegaremos até o repositório do GitHub, onde podemos encontrar arquivos e pastas diferentes Precisamos ir para a pasta de origem. Você pode encontrar aqui o arquivo. Vamos abri-lo. Então, esse é o código completo desse plug-in. Eu vou copiá-lo. Vamos clicar no botão Editar aqui, selecionar o código inteiro e copiá-lo. Em seguida, vá para o código do VS e crie um novo arquivo chamado tilde dot js e cole aqui o código Depois disso, precisamos vincular esse arquivo ao documento HTML. Então, vamos abrir a tag de script. E no atributo de origem, especifique o caminho do arquivo. Além disso, temos que trazer o jQuery também. Então, vamos prosseguir e pesquisar por jQuery CDN. Vá para o primeiro link. Na verdade, você pode escolher aqui diferentes versões do jQuery. Vou clicar na versão não compactada e pegar o Vamos colar aqui. Tudo bem, então é isso em relação à configuração do tilt js. Vamos voltar ao site. Então, como eu disse, aqui, temos alguns efeitos diferentes com as instruções. Você pode usar um efeito de paralaxe, brilho, continuar votando e assim por diante No nosso caso, vou usar o básico. Portanto, se quisermos usar opções diferentes, você pode encontrar as instruções aqui. A única coisa que precisamos fazer é atribuir a todos os cartões o atributo chamado data til Então, vamos usar o cursor múltiplo e inserir para todos os cartões o atributo chamado inclinação de dados Tudo bem, então se eu passar o mouse sobre as cartas, o efeito funcionará Eu acho que é muito bom e legal. Ok, então finalmente terminamos com a seção de equipe e podemos seguir em frente e começar a trabalhar na próxima seção. 70. Projeto 7 - Criar e Estilo Seção de Contato: Vamos dar uma olhada na versão final do projeto. Então, a próxima seção será a seção de contato. Ele tem um fundo escuro e o próprio formulário de contato é colocado no centro dessa ação. Consiste em duas partes. No lado esquerdo, temos uma imagem como plano de fundo. No lado direito, você pode ver aqui o título, alguns campos de entrada e o botão de envio. Cada campo de entrada tem o rótulo que sobe bem quando focamos nos campos Então é isso que vamos construir antes de começarmos a criar a marcação HTML, vou corrigir um pequeno problema Se eu clicar no ícone do menu e exibir a barra lateral, você notará que ela acaba atrás das cartas Então, para corrigir esse problema, vou usar a propriedade z-index com um valor maior, digamos 100 Ok, agora o problema está resolvido e podemos começar a escrever a marcação HTML para a seção de contato Vamos abrir os elementos da seção com o contato da classe. Em seguida, vou abrir a tag div, que será o invólucro do formulário de contato Então, como dissemos, no formulário de contato, teremos dois lados, esquerdo e direito. Então, vamos abrir a tag div, que será o lado esquerdo. Vamos atribuir à turma o contato esquerdo. Em seguida, precisamos da tag div aberta do lado direito com o contexto da classe, certo Portanto, o lado direito consistirá em duas partes principais. O primeiro será o título. Quanto ao segundo, ele deve ser deformado. Então, vamos abrir os elementos de cabeçalho H1 com o título de contato da classe E como o conteúdo aqui, conteúdo. Depois disso, vamos abrir os elementos formados. O formulário incluirá três grupos de entrada diferentes e o botão de envio, que é a tag div aberta com a classe input-group O primeiro grupo de entrada que terá o elemento de entrada para o nome completo e o rótulo. Então, vamos abrir a tag de entrada com um texto de texto e com um campo de classe. Em seguida, precisamos rotular. Vamos atribuir a ela a entrada , rotular e também instituir o nome completo do texto Ok, vamos duplicar esse código. Em seguida, altere o tipo de tributado para e-mail. E também em vez do nome completo, vamos inserir seu e-mail. Tudo bem, o terceiro grupo de entrada será diferente porque, em vez do elemento de entrada, teremos uma área de texto Vamos abrir a tag div com um grupo de entrada de classe. Em seguida, insira. Precisamos da área de textos onde está o campo do nome da classe. Depois disso, vou criar um rótulo. Vamos atribuir a ela uma mensagem de classe e também instituir a mensagem de conteúdo Ok, finalmente, vou criar o botão de envio. Vamos fazer isso usando o elemento de entrada com o tipo submit. Também precisamos aqui da classe submit, btn e como o valor que está dentro de você submit Tudo bem, então é isso em relação à marcação HTML da seção de contato Agora temos que começar a escrever alguns CSS e personalizar esses elementos. Vamos prosseguir e selecionar os elementos desta seção. Antes de tudo, defina a largura e a altura. Eu vou definir com 200 por cento. Quanto à altura, vamos torná-la 100% da janela de visualização. Use aqui 100 vh e depois altere a cor de fundo. Vou usar aqui a cor para sete, para sete, para sete. Tudo bem, em seguida, vou colocar o conteúdo no centro E para isso, vamos usar o flexbox. Em primeiro lugar, vou fazer o contêiner flexível do elemento de seção usando o display flex E então, para centralizar o conteúdo vertical e também horizontalmente, use justify-content center e também horizontalmente, use justify-content Tudo bem, então o conteúdo está centralizado e, com esta seção, terminamos Vamos passar para o invólucro de contato. Primeiro, vamos definir a largura e a altura. Vou fazer com que sua largura seja 60 por cento S para a altura. Vamos fazer com que seja 75 rampa. Além disso, vou colocar as partes esquerda e direita lado a lado usando E então vamos usar cor de fundo temporária para tornar o contexto adequadamente visível. Vamos usar a cor branca. E, finalmente, vou criar um pequeno efeito de sombra. Vamos usar box shadow com os valores 03 RAM Sudden run e o valor RGBA, na cor preta e com opacidade Tudo bem, então essa é a aparência do rapper de contato agora Vamos começar a personalizar o lado esquerdo. Selecione Contato. Riu. Primeiro, vamos definir sua largura. Eu vou fazer com que seja 35%. Em seguida, vou definir a imagem como plano de fundo. Mas antes de tudo, vamos usar o gradiente linear. Então eu vou te passar o valor RGBA. Vamos inserir aqui 153 vezes e a opacidade 0,6. Em seguida, vou usar outro valor RGBA. Insira aqui 2023 vezes e a opacidade 0,9. Depois disso, vamos especificar o URL da imagem. Nós precisamos. Entre em contato com PG dot JPG na pasta de imagens. Além disso, vamos colocar aqui o centro e sem repetir. E, finalmente, precisamos definir o tamanho do plano de fundo. Capa. Tudo bem, então isso é tudo sobre o lado esquerdo. Vamos seguir em frente e cuidar do lado direito. Selecione o contrato, certo? Deve ocupar o resto da largura. Então, vamos fazer com 65 por cento mudar a cor de fundo. Vou usar sua cor E. E também definir preenchimento. Vou fazer o preenchimento nas três primeiras rodadas. E depois bronzeie a RAM no resto dos sites. Além disso, vamos nos livrar do fundo branco temporário do rapper de contato. Tudo bem, agora vou personalizar os elementos individuais no lado direito. Vamos continuar e começar com o título. Primeiro. Vamos definir essa família de fontes. Vou usar aqui abaixo dA2 serif para aumentar o tamanho da fonte, tornando-o seis Também torne a fonte mais clara. Usando a espessura da fonte 300. Mude a cor, torne-a para sete, para sete para sete. Em seguida, vou criar algum espaço na parte inferior usando a margem inferior de cinco graus. E, finalmente, vamos colocá-lo no centro usando o centro de alinhamento de texto Portanto, o título está estilizado. Parece bom e vou passar para os elementos do formulário. Então, vamos prosseguir e selecioná-lo. Antes de tudo, vamos definir sua largura, torná-la 100%. Vamos fazer com que o formulário seja flexível usando display flex. Em seguida, mude a direção, transforme-a em coluna. E alinhe os itens ao centro usando o centro de alinhamento de itens. Tudo bem, então isso é dito sobre os elementos formados. Em seguida, vou personalizar os campos de entrada. Quero dizer as entradas e a área de texto. Eles têm o campo de classe comum. Então, vamos prosseguir e selecioná-lo. Vamos definir a largura, fazer com que seja 45 rem. Em seguida, torne a cor de fundo transparente. Também elimina a borda padrão. Em seguida, defina a borda inferior com pontos de valores. Para correr. Vou definir o estilo da borda com dois traços. Em seguida, defina a cor 636363. Ok, vamos adicionar mais algumas estrelas aos campos. Vou criar algum espaço na superior e inferior usando a margem. Vamos fazer com que sejam três RAM e zero. Além disso, vou usar estofamento. Vamos definir o preenchimento em um rem na parte superior. No lado direito, na parte inferior. Quanto ao lado esquerdo, vamos torná-lo zero. Em seguida, vou definir família de fontes. Nesse caso, vamos usar uma fonte chamada Molly serif. Em seguida, defina o tamanho da fonte, faça com 1,6 RAM. E mude a cor. Use aqui para b três vezes. Tudo bem, então os campos de entrada parecem muito bons. Agora vou definir a altura das entradas e da área de texto separadamente. Então, primeiro vamos selecionar as entradas e dizer olá para a RAM. Em seguida, selecione a área de texto. Portanto, no caso da área de texto, vou definir a altura e a largura máximas. Porque, como você sabe, podemos alterar o tamanho do campo manualmente e isso quebraria o layout. Portanto, precisamos desativar essa opção. Vamos definir a altura máxima para sete rampas Quanto à largura máxima, vamos torná-la 45 Brand Tudo bem, vamos ver as entradas e a área de texto. Em seguida, precisamos cuidar dos rótulos. Eles devem ser colocados dentro dos campos de entrada por padrão. Vamos selecionar o rótulo e a posição definidora. Eu vou tornar isso absoluto. Em seguida, precisamos posicionar em relação ao grupo de entrada. Porque é o elemento pai. Em seguida, defina a propriedade esquerda como zero. De acordo com a posição inferior. Nós o definiremos separadamente para as entradas e a área de texto. Então, primeiro, vamos definir aqui a família de fontes. Torne-o palatável com serifa dA2 em vez de aumentar o tamanho da fonte. Faça com que seja 1,8 rodado. Mude a cor. Vou usar aqui a cor para B, para B, para B. E depois transformar o texto em maiúsculas Como você sabe, os rótulos devem ser colocados dentro dos elementos de entrada. E não poderemos nos concentrar nas entradas. Portanto, vou usar aqui eventos de ponteiro, nenhum. Tudo bem, vamos selecionar os rótulos das entradas e da área de texto separadamente e definir a posição inferior Vou começar com o rótulo de entrada. Vamos fazer a posição inferior. Nós corremos. Quanto à área de texto. Quero dizer o rótulo da área de texto, que tem mensagem de classe. Vamos fazer a posição inferior seis. Tudo bem, então tudo está pronto para criar efeitos de foco Eu vou fazer duas coisas diferentes. Quando me concentro nos campos de entrada, quero transformar a borda tracejada em uma sólida e também criar vários rótulos e torná-la Então, vou selecionar o campo com a pseudoclasse de foco e definir o estilo do botão de borda Faça com que seja sólido. Então, quando eu me concentrar nos campos de entrada, a borda mudará e se transformará em resolvê-la. Ok, em seguida, vamos passar para o rótulo. Vou selecionar o campo em que o foco está. Agora temos que selecionar o rótulo. E, nesse caso, precisamos usar um desses combinadores CSS chamado seletor geral de irmãos, que é expresso pelo sinal til Então, vou passar para o rótulo usando a função Transform Translate. Portanto, precisamos traduzir o valor de Y. Let's Institute menos três Também vou diminuir o tamanho da fonte do rótulo. Vamos fazer questão de correr. E, finalmente, use a transição com os valores 0 e 0,3 s. Então, se eu clicar novamente e focar nos campos de entrada, os rótulos se moverão bem Tudo bem, então estamos quase terminando com a seção de contato. A última coisa que precisamos fazer é estilizar o botão de envio. Então, vamos seguir em frente e selecionar esses elementos. Antes de tudo, defina a largura e a altura. Vou definir a largura para 45 RAM. Quanto à altura. Vamos fazer com que sejam cinco rem. Em seguida, altere a cor de fundo. Vamos usar sua cor. Veja 2955 Em seguida, mude a cor do texto, torne-o branco. Elimina a borda padrão usando port or none. E crie algum espaço na parte superior usando a margem superior para correr. O botão parece muito melhor, mas precisamos adicionar mais estilos. Vamos definir a família de fontes. Vou usar aqui uma fonte chamada Moly serif. Em seguida, altere o tamanho da fonte e transforme-a em Ram. Além disso, torne a fonte mais clara usando a espessura de fonte 300. Transforme texto em maiúsculas. Depois disso, vou criar algum espaço entre as letras usando o espaçamento entre letras com o valor apontando para arredondar Em seguida, coloque o ponteiro do cursor Finalmente, vou criar alguns efeitos de sombra para o texto e para o próprio botão. Então, vamos usar a sombra de texto com os valores 0,1 rem, 0,3 rem e o valor RGBA com uma cor preta e com a opacidade Então vou duplicar essa linha de código, mudar o texto para a caixa e também tornar a opacidade Tudo bem, então é isso. A seção de contato está pronta e , na verdade, podemos passar para a próxima parte do nosso projeto, que é o rodapé O rodapé será simples. Temos aqui apenas o texto dos direitos autorais e alguns ícones de mídia social. Depois de criarmos um filtro, criaremos esse botão de rolagem fixo, que nos permitirá rolar até o topo da Tudo bem, vamos começar a criar a marcação HTML E vou abrir a tag de rodapé com o rodapé da classe. Em seguida, vou abrir a tag div, que envolverá o conteúdo da foto Então, vamos atribuir o conteúdo do rodapé dessa classe. Dentro do elemento div, teremos duas partes O primeiro será o parágrafo com algum texto protegido por direitos autorais. Então, vamos abrir o elemento p com direitos autorais de uma classe. Em seguida, insira, use algum texto. Quero dizer direitos autorais seguidos pelo sinal de direitos autorais, que deve ser expresso pela entidade HTML5 Precisamos escrever aqui e comercial, cópia, ponto e vírgula e, em seguida, código 2020 Todos os direitos reservados. Quanto à segunda parte , será a lista dos ícones das mídias sociais. Vamos abrir a tag div com a lista social da classe. E passe aqui alguns elementos de link com os ícones Font, Awesome. O primeiro será o Facebook. Então, vamos usar seus nomes de turma. Fab, FA dash, Facebook, dash F. Vamos duplicar essa linha de código duas vezes e alterar os nomes das Para o segundo, precisamos de um BFA, o Instagram. Quanto ao terceiro , será o Twitter. Tudo bem, então a marcação HTML está pronta para o rodapé. Vamos em frente e personalizá-lo rapidamente. Vamos selecionar o rodapé e definir sua largura e altura. Eu vou definir com 200 por cento. Quanto à altura, vamos fazer com que seja 15 RAM. Em seguida, altere a cor de fundo. Vou usar aqui a cor 17181. Em seguida, vou colocar o conteúdo do filtro no centro. E para isso, vamos usar o flexbox. Precisamos de display flex. Em seguida, justifique a central de conteúdo e alinhe o centro de itens. Tudo bem, vamos seguir em frente e personalizar o conteúdo do rodapé. Vamos selecionar esses elementos e definir a largura. Eu vou fazer com que seja 60%. Em seguida, faça com que o conteúdo do rodapé seja flexível usando o display flex Em seguida, crie espaço entre os itens flexíveis. Quero dizer, o parágrafo e os ícones de mídia social que usam conteúdo justificado, espaço entre os elementos estão alinhados da maneira correta Vamos seguir em frente e estilizá-los. Vou começar com um parágrafo selecionado e, antes de tudo, definir a família da fonte. Vou usar aqui, abaixo da serifa dA2. Em seguida, defina o tamanho da fonte, faça com que seja 1.6 executado para a cor. Eu vou fazer com que seja A7, A7, A7. Então, como você pode ver, o parágrafo está estilizado. Vamos passar para os ícones das mídias sociais. Vou selecionar o elemento de link que tem margem definida. Vou defini-lo como zero na parte superior e inferior. Quanto aos lados esquerdo e direito, vamos fazer com que corra. Em seguida, selecione os íons, aumente o tamanho da fonte e faça com que ela seja executada. E mude a cor. Aqui. Cor A7 três vezes, certo? Então, com o rodapé, terminamos. Ele é personalizado e agora temos que cuidar desses botões de rastreamento. Primeiro, vamos criar o botão no arquivo index.html. Na verdade, o botão será representado como link. Então, vamos atribuir a ela a classe scroll, BTN. Em seguida, insira aqui os elementos I com as classes FAS, Tudo bem, vamos continuar e estilizar o botão. Selecione-o. Deve ter uma posição fixa. Em seguida, definiu os direitos e as propriedades inferiores. Vou fazer com que os dois tenham cinco rem. Em seguida, defina a largura e a altura. Vou definir os dois para 4,5 rem. E também defina a cor de fundo. Use sua cor E2, B64 seis. Tudo bem, então aqui temos o botão e agora precisamos estilizar o ícone Font Awesome Ele deve ser colocado no centro da caixa. Vamos usar o flexbox. Precisamos aqui justificar o centro de conteúdo e também alinhar o centro de itens Esse aumento do tamanho da fonte, vá para Ram. Mude a cor, torne-a branca. Além disso, vou criar um pequeno efeito de sombra usando sombra caixa com os valores 0,11, 0,6 RAM e o RGBA com uma cor preta e com a opacidade E, finalmente, use o valor do raio da borda 0,3 ran. Certo? Então o botão está pronto, só precisamos fazê-lo funcionar. Para isso, vou usar algumas linhas de JavaScript. Então, quando clicarmos no botão , atribuiremos à propriedade de elementos HTML chamada comportamento de rolagem E vamos configurá-lo para suavizá-lo. Depois de um segundo, nós o removeremos. Porque se não fizermos isso , a rolagem suave funcionará Se clicarmos em qualquer um dos links da página. Vamos em frente e, primeiro de tudo, selecione o botão de rolagem com o método seletor de consulta Em seguida, anexe a ele o ouvinte de eventos. Vou passar seu evento de clique e a função de seta. Então, em seguida, precisamos selecionar os elementos HTML. Vamos usar novamente o método seletor de consulta. Em seguida, use o estilo e a propriedade chamada comportamento de rolagem. Como dissemos, temos que configurá-lo para suavizá-lo. Depois disso, para remover a propriedade dos elementos HTML. Depois de 1 s, vou usar o método chamado setTimeout, que terá um argumento será a função de retorno de chamada E será executado após 1 s. Assim que clicarmos no botão. Vamos pegar essa linha de código daqui. Cole isso. E em vez de suave, vamos usar o onset. E também precisamos usar o segundo argumento, mil, que é mil milissegundos. Então, se eu clicar no botão, navegaremos até o topo da página sem problemas. Tudo bem, então é isso. Criamos todas as seções de nossos projetos e agora é hora de torná-las responsivas a diferentes tamanhos de tela 71. Projeto 7 - Torne o Projeto responsivo e crie um gerenciador de carregamento: Vamos prosseguir e inspecionar a página. Em seguida, mude para o modo responsivo. Na verdade, eu já preparei diferentes pontos de interrupção. Onde estamos para fazer algumas mudanças? Então, não vamos perder tempo com isso. O primeiro ponto de interrupção no qual precisaremos fazer algumas alterações será de 1.500 pixels Então, vamos criar uma consulta de mídia CSS e especificar a largura máxima como 1.500 No ponto de interrupção, vou mudar um pouco a posição da imagem na seção Sobre nós Vamos selecionar o invólucro da imagem e definir os números das linhas da grade como três, n menos um Em seguida, vou diminuir um pouco a largura do cartão. Então, vamos selecioná-lo e criar a largura. Para RAM. Depois disso, vou cuidar do rapper de contato. Vou aumentar sua largura e diminuir a altura. Então, vamos selecionar entre em contato com o rapper. Defina sua largura para oito por cento. Quanto à altura, vou fazer com que seja 65 rampa. Tudo bem, então a última coisa que vou fazer é aumentar a largura do conteúdo do rodapé Então, vamos selecionar esse elemento e definir sua largura para 8%. Ok, então é isso. Não precisamos de nenhuma outra alteração em 1.500 pixels. Vamos prosseguir e trabalhar no próximo ponto de interrupção, que será de 1.400 pixels Então, vou criar uma nova consulta de mídia CSS com largura máxima de 1.400 Então, a primeira coisa que vou fazer é personalizar os elementos do banner Eu fiz o parágrafo do título e o Bateson. Então, vamos em frente e começar com o título. Eu vou mudar o tamanho da fonte. Vamos fazer com seis RAM. Em seguida, diminua a altura da linha. Faça sete. Corra. Em seguida, vou selecionar o parágrafo do banner Vamos diminuir o tamanho da fonte, transformá-la em três rampas. E também selecione a parte inferior. Vamos diminuir sua largura, torná-la com 20 RAM. Em seguida, mude a altura. Vou configurá-lo para cinco rem. Quanto ao tamanho da fonte, vamos fazer com que seja 1,6 redondo. Tudo bem, então o cabeçalho parece bom. Vamos conferir a barra lateral. Como você pode ver, precisamos diminuir um pouco o tamanho da fonte dos itens do menu. Então, vamos selecionar o link do menu e fazer com que o tamanho da fonte seja três rampa. Certo? Depois disso, vamos cuidar da seção Sobre nós. Vou mudar um pouco o layout dos serviços. Então, vamos pegar o código daqui, colá-lo e alterar os números das linhas da coluna da grade. Na verdade, precisamos nos livrar da linha de grade de cada serviço. Em seguida, altere os números das linhas da coluna da grade. Então, para o Serviço Florestal, precisamos de 37. Então serão 26. Para o terceiro item, precisamos de 37. Então, para o próximo , serão 11, 15 e depois 16. Novamente, 11, 15. Tudo bem, então a seção Sobre nós parece boa. E, na verdade, não precisamos de nenhuma outra alteração nesse ponto de interrupção Vamos passar para o próximo, que terá 1.300 pixels Então, vamos criar uma nova consulta de mídia CSS com largura máxima de 1.300 Temos que cuidar da equipe e da seção de conflito nesse ponto de interrupção Todas as outras seções parecem boas. Vamos começar com a seção de equipe. Vamos selecioná-lo e diminuir o preenchimento na parte inferior Vamos fazer cinco rampas. Em seguida, selecione a embalagem de cartões. Então, no ponto de interrupção, vou mudar a direção. Vamos fazer disso uma coluna. Além disso, para colocar os cartões no centro, use alinhar itens ao centro e altere a margem na parte superior Vamos fazer isso para Ran. Ok, então, em seguida, precisamos criar algum espaço entre as cartas. Vamos selecioná-lo e definir a margem inferior com o valor oito redondo. Ok, então depois disso, vamos cuidar da seção de contato. Vamos selecionar o rapper de contato. Eu vou aumentar sua largura. Vamos fazer com que seja 90 por cento. E também diminua a altura. Vou configurá-lo para 55 rodadas. Depois disso, vamos selecionar o título do contato e alterar o espaço na parte inferior. Vamos colocar a margem inferior em rampa. Em seguida, vou selecionar o campo. Quero dizer entradas e a área de texto e a margem de alteração. Vamos fazer com que sejam dois rem na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem? Então, como você pode ver, com 1.300 pixels, terminamos Vamos passar para o próximo ponto de interrupção, que será de mil pixels Então, vamos em frente e criemos uma nova mídia. Especifique aqui a largura máxima em mil pixels. Então, no começo, vou personalizar o banner. Vamos selecionar o elemento de título. Mude o tamanho da fonte, faça cinco rampas. Em seguida, diminua a altura da linha. Faça seis. Correu. Depois disso, vou selecionar o parágrafo. Vamos diminuir o tamanho da fonte, fazer com que seja 2,5 em execução. Depois disso, precisamos do botão. Eu vou diminuir seu tamanho. Vamos fazer sua rampa de largura 18. Em seguida, defina sua altura para quatro RAM. E também altere o tamanho da fonte, faça 1,5 rodadas. Tudo bem, então o binário parece bom. Vamos passar para a seção Sobre nós. Portanto, sob o ponto de interrupção, não precisamos mais do layout da grade Vou usar o flexbox. Colocarei todos os serviços e a imagem verticalmente em uma coluna Então, vamos selecionar os serviços e torná-los um contêiner flexível Em seguida, mude a direção, transforme-a em uma coluna. E também use o centro de alinhamento de itens. Certo? Como você pode ver, precisamos diminuir a largura dos serviços. Então, vamos selecionar o serviço. Faça sua largura para duas RAM. E também defina margem inferior como seis corridas. Em seguida, temos que cuidar da imagem porque agora ela é duas maiores. Então, primeiro, vamos selecionar o invólucro e definir a largura para quatro para execução Em seguida, precisamos selecionar a imagem em si e definir sua largura em 200 por cento. Tudo bem, então com a seção Sobre nós, terminamos. Parece bom. Além disso, não precisamos fazer nada com a seção de equipe. Então, vamos seguir em frente e personalizar a seção de contato. Na verdade, vou esconder o lado esquerdo de jeito nenhum. Então, vamos selecionar a conduta à esquerda e definir sua largura como zero. De acordo com o contrato, certo? Precisamos aumentar sua largura em 100%. Tudo bem, vamos cuidar das entradas e da área de texto. Vou selecionar o campo. Vamos fazer a largura 55 rem. Em seguida, vou selecionar a área de texto porque precisamos definir a largura máxima para a área de texto. Vamos configurá-lo para 55 rem. E também altere a largura do botão de envio. Vamos fazer com que seja 55 rem também. Tudo bem, então isso é sobre a seção de contato. Vamos seguir em frente e personalizar o rodapé. Vou colocar o parágrafo e os ícones das redes sociais verticalmente em uma coluna Vamos selecionar o conteúdo do rodapé e mudar de direção, torná-lo coluna Em seguida, precisamos alinhar os itens Também alinhe o texto ao centro. E vou definir a largura para 50%. Depois disso. Vamos selecionar o parágrafo porque eu quero mudar os lugares do parágrafo e dos ícones de mídia social. Quero colocar ícones na parte superior. Então, vamos mudar a ordem do parágrafo, torná-lo um. E também defina a margem entre as três primeiras corridas. Tudo bem, então isso é tudo sobre o rodapé e terminamos de trabalhar em mil pixels Vamos seguir em frente e criar o próximo ponto de interrupção. Serão 700 pixels. Então, vamos criar uma nova mídia e especificar a largura máxima. Faça com que sejam 700 pixels. Na verdade, não precisamos fazer muita coisa em um ponto de interrupção. Só precisamos personalizar vários elementos. Então, vamos selecionar o título do banner. Eu vou mudar seu tamanho. Vamos definir o tamanho da fonte para a RAM. E a altura da linha cinco. Rem. Em seguida, selecione Parágrafo e defina o tamanho da fonte como, para executar. Tudo bem, a seguir, vamos cuidar da seção de contato. Vou selecionar o campo. Vamos fazer com que a largura seja de 35 RAM. Selecione também a área de texto. Porque, novamente, precisamos definir sua largura máxima. Vamos fazer com 35 RAM. Em seguida, altere a largura do botão Enviar. Também vou configurá-lo para cinco rem. Tudo bem, então é isso em relação aos pontos de interrupção. E, finalmente, temos que personalizar o projeto. No último ponto de interrupção, haverá 500 pixels Então, vamos criar uma nova mídia e especificar a largura máxima como 500 pixels. Primeiro, vou diminuir o tamanho da fonte do HTML porque isso refletirá nos tamanhos de todos os elementos. Então, vamos fazer com que esse tamanho de fonte seja 45%. Em seguida, vamos cuidar da barra lateral. Quero expandi-lo para a página inteira. Então, vamos aumentar sua largura em cem por cento. Na verdade, temos aqui um pequeno problema porque, uma vez que a barra lateral é fechada, ela ainda está visível Portanto, precisamos definir sua posição correta e torná-la menos cem por cento Então, agora o problema está resolvido. Em seguida, vou mudar a posição do ícone do menu porque ele está muito longe da borda. Então, precisamos selecionar o menu de hambúrguer, mas com a classe de mudança, vamos definir a posição correta para 38 rodadas Tudo bem, então, vamos diminuir a largura dos serviços Selecione o serviço e defina sua largura para jogar na RAM. A última coisa que vou fazer é aumentar um pouco a altura do rodapé Vamos fazer com que seja 18. Corra. Tudo bem, então, finalmente, terminamos. Tornamos o projeto responsivo a todos os tamanhos de tela diferentes Se você verificar, descobrirá que fica bem em todos os tamanhos de tela diferentes. Ok, então estamos quase terminando nosso projeto. A última coisa que vou fazer é criar um spinner que aparece antes de carregar o projeto Então, vamos começar a criar a marcação HTML. Mas, a princípio, vou esconder o contêiner inteiro. Então, vamos selecionar o contêiner e , atribuído a ele, não exibir nenhum. Portanto, o contêiner está oculto. Mas, na verdade, vemos aqui o botão de rolagem. Suponho que o coloquei fora do contêiner. Então, vamos em frente e inserimos dentro dela Ok, então estamos prontos para criar a marcação HTML para o spinner Vou criá-lo fora do contêiner. São empreendimentos abertos, que serão o contêiner giratório Em seguida, precisamos do elemento div com círculos de classe nos quais vou colocar oito elementos div vazios No momento, vemos aqui apenas uma página em branco porque os desenvolvimentos estão vazios e não têm nenhum estilo. Vamos começar a escrever um pouco de CSS. Vou selecionar esses recipientes de pintura. Vamos tornar sua posição absoluta. Em seguida, defina as propriedades superiores e ausentes, ambas em zero Além disso, vou definir largura e altura. Vamos fazer com cem por cento. Quanto à altura, vou fazer com que seja 100% da janela de visualização Depois disso, vou mudar a cor de fundo. Vamos escurecer usando 262626. E também vou colocar o conteúdo no centro. E para isso, vamos usar o flexbox. Precisamos aqui justificar o centro de conteúdo e alinhar o centro e alinhar Tudo bem, então o que vemos aqui é apenas o fundo escuro Agora começamos a criar os círculos e depois vamos fazê-los funcionar. Os círculos serão representados como os pseudo-elementos posteriores dos desenvolvimentos Primeiro, vamos selecionar nossos círculos de embalagem e definir sua largura e altura Faça com que eles tenham oito RAM. E também altere a cor de fundo. Vou usar aqui alguns antecedentes temporários. Vamos torná-lo branco. Então, agora eu vou criar os círculos. Vamos selecionar elementos div. Eles estavam atrás de pseudoelementos? Antes de tudo, vamos definir o conteúdo. Eu vou esvaziá-lo. Em seguida, mude a posição, torne-a absoluta. E também vou atribuir aos círculos a posição relativa porque quero depois dos pseudoelementos de acordo com os Em seguida, vou definir largura e altura. Vamos fazer dos dois uma rampa de 0,7. Em seguida, para alterar a forma do elemento e torná-lo, circule o raio da borda dos EUA com o valor 50 por cento E mude a cor de fundo. Faça com que seja C2 955. Tudo bem, agora você pode ver os círculos. Na verdade, eles são colocados um em cima do outro porque todos têm a posição definida como absoluta. Vamos seguir em frente e definir suas posições manualmente. Vou selecionar os primeiros pseudoelementos usando o nésimo seletor de filhos Vamos configurar para 6,3 RAM. Provavelmente sobrou. Também vou fazer com que seja 6.3 Rama. Vamos seguir em frente e posicionar o segundo círculo. Vou duplicar esse código. Precisamos da nona criança para fazer uma posição difícil de 6,8 RAM Quanto à esquerda, serão 5,6 rodadas. Tudo bem, vamos definir rapidamente as posições para o resto dos círculos Para os terceiros elementos, precisamos que a posição superior seja 7,1 RAM Quanto à posição no laboratório , será de 4,8 RAM. Então, para os próximos elementos, vou definir o topo para sete pontos para bater. Provavelmente à esquerda. Será para RAM. Então, para o quinto item, a posição superior será 7,1 RAM Como provavelmente, a posição esquerda será de três pontos para correr. Em seguida, vem o sexto item. Vamos fazer com que pare a posição 6.8 RAM. Quanto à esquerda, será 2,4. E então, para os sétimos elementos, vamos fazer uma posição rígida de 6,3 RAM E a esquerda, 1,7 corrida. Para o último item. Vou definir a posição para 5,6 rampa e a posição esquerda para 1,2 Certo? Então, essas são as posições iniciais dos círculos. Na verdade, não precisamos mais desse fundo branco. Então eu vou me livrar disso. Ok? Então, agora temos que criar os quadros-chave CSS. Nos quadros-chave, precisamos definir apenas uma regra CSS. Os círculos devem girar em 360 graus. Então, vamos criar quadros-chave Vou chamá-los de círculos Então, em zero por cento, no ponto de partida, precisamos transformar, girar para ser zero Para os 100%. Eu vou fazer a transformação girar 360 graus. Os quadros-chave estão prontos. Vamos selecionar os elementos div e atribuir a eles a propriedade de animação para que esses estilos CSS funcionem para que esses estilos CSS funcionem Portanto, precisamos do nome da animação, que é círculos, seguido pela duração de 1,2 s. Agora, como função de temporização da animação, vou usar o Bézier cúbico, que nos permite criar efeitos de Na verdade, você pode visitar o site da Cubic Bezier onde você pode definir manualmente os diferentes efeitos de animação E depois de definir um, você pode pegar os valores a partir daqui. Tudo bem, no nosso caso, vou usar o Bezier cúbico com Isso é mais fácil para 0,50, 0,5 e depois um E também vou usar aqui outro valor chamado infinito, que nos permitirá executar a animação infinity Então, como você pode ver, os círculos estão se movendo, mas é claro que não é o que queremos. A próxima coisa que vou fazer é definir a origem da transformação. Quando usamos a propriedade de transformação, por padrão, o elemento está se movendo de acordo com o centro. Portanto, por padrão, a origem da transformação é definida como centro. Você pode definir a origem como esquerda ou direita. Ou você pode até mesmo definir as origens dos eixos x e y separados Para obter mais informações sobre a propriedade de origem da transformação, você pode pesquisar a origem da transformação MTN e conferir esta página Então, aqui temos alguns exemplos que mostram como a propriedade de origem da transformação funciona. No nosso caso, vou usar a terceira abordagem em que definimos a origem do eixo x e do eixo y separadamente Então, vou usar a origem da transformação com os seguintes valores. Essa é uma queda severa de RAM. E depois novamente para RAN. Agora, como você pode ver, temos um resultado muito melhor, mas não o perfeito. Precisamos mudar um pouco o alinhamento do círculo. E para isso eu vou usar margem. Vamos definir a margem para menos quatro rem na parte superior do que zero no lado direito, zero na parte inferior e menos quatro rem no lado esquerdo. Ok? Então, agora os círculos estão se movendo muito bem. Mas, novamente, não é isso que queremos. Vou adicionar alguns efeitos à animação usando a propriedade de atraso da animação. Vou adicionar aos desenvolvimentos diferentes tempos de atraso separadamente. Esses valores serão negativos. Quando usamos os valores negativos com a propriedade de atraso da animação, a animação começa como se já estivesse sendo reproduzida há algum tempo. Por exemplo, se a animação deve ser executada durante, digamos, 5 s. E você define a propriedade de atraso da animação como -2 s, a animação começará a partir do terceiro. Segundo. Isso omitirá os primeiros 2 s. Tudo bem, então vamos selecionar o elemento div separadamente e definir a propriedade de atraso da animação para todos eles Vou começar com a primeira divisão. Vamos usar o seletor f child e definir a propriedade de atraso da animação para -0,036 s. Então se você olhar mais de perto os círculos, notará que o primeiro está se movendo de uma maneira diferente Vamos definir também o atraso da animação para o resto dos círculos. Vamos copiar esse código e colá-lo aqui. Então, para o segundo desenvolvimento, vou definir o atraso da animação para -0,072 s. Então, para o terceiro div, precisamos de -0,108 s. Então, para o próximo, vou definir o atraso da animação para menos um por 4 s. vou definir o atraso da animação para -0,072 s. Então, para o terceiro div, precisamos de -0,108 s. Então, para o próximo, vou definir o atraso da animação para menos um por 4 s. Portanto, o quinto item. Vamos configurá-lo para -0,18 s. O próximo será -0,216 s. para o item Simons . Vamos usar -0,252 s. para o último. Quero dizer, para o oitavo item, vamos definir o atraso da animação para -0,288 s. Ok, então agora o botão giratório está funcionando perfeitamente e cria um efeito muito bom e Tudo bem, então estamos quase terminando. A única coisa que precisamos fazer é exibir o contêiner de volta após alguns segundos. Então, vou usar uma técnica semelhante à que usamos anteriormente com o nome da classe de mudança. Adicionaremos uma nova classe para serem elementos do corpo usando JavaScript. Vamos abrir o arquivo script.js. Depois que a página for carregada, o botão giratório se moverá por 4 s e, em seguida, o contêiner deverá ser exibido Então, uma vez que a página é carregada, depois de 4 s, temos que adicionar dois corpos, uma nova classe, digamos display. Em CSS, conseguiremos exibir o contêiner usando essa nova classe. Portanto, precisamos do objeto de janela global e anexar a ele o manipulador de eventos OnLoad Deve ser igual a uma função de seta. Essa função será executada quando a página for carregada. Para executar a função após algum atraso, podemos usar o método chamado setTimeout Vamos passar aqui a função de retorno de chamada. Em seguida, selecione os elementos do corpo usando o método querySelector. Como dissemos, precisamos adicionar a ele um novo nome de classe. Portanto, precisamos classificar a propriedade da lista e, em seguida, adicionar o método. Temos que especificar aqui a classe. Digamos que exiba. O método setTimeout usa o segundo argumento, que é a Nesse caso, precisamos de 4.000 milissegundos. Tudo bem, agora precisamos selecionar uma exibição de classe com esse contêiner penal e também o contêiner Então, vamos começar com esse recipiente de amendoim. Precisamos esconder isso. Portanto, precisamos aqui de opacidade zero e visibilidade Além disso, vou usar a transição com os valores em um segundo. Além disso, para fazer a transição funcionar, vou usar a propriedade z-index com o valor mais alto, digamos 300 Depois disso, precisamos selecionar novamente a classe de exibição, seguida pelo contêiner. No momento, a propriedade de exibição está definida como nenhuma e precisamos criar um bloco de exibição. Agora, se eu recarregar a página, o botão giratório será exibido por 4 s e, em seguida, o contêiner aparecerá Para tornar esses efeitos perfeitos, vou criar uma pequena animação para os círculos. Quero exibir e ocultar os círculos com algum efeito de desbotamento Primeiro, vamos ocultar os círculos por padrão. Vamos usar aqui a opacidade zero e a visibilidade oculta. Em seguida, vou criar novos quadros-chave CSS. Vamos chamá-lo de círculos de exibição. Portanto, teremos aqui algumas etapas de zero por cento a 25%. Vou usar opacidade zero e visibilidade oculta. Assim, os círculos ficarão ocultos durante 1 s. Então, de 25% a 90%, os círculos serão exibidos Portanto, precisamos de opacidade um e visibilidade visível. E então, de 9% a cem por cento, os círculos começarão a se esconder. Portanto, precisamos aqui de uma opacidade e visibilidade visível. E então, em 100 por cento, precisamos de opacidade até zero e visibilidade Tudo bem, então os quadros-chave estão prontos. Vamos atribuir aos círculos a propriedade de animação. Vamos especificar os círculos de exibição do nome e a duração de 4 s. Agora podemos ver que temos aqui um efeito muito melhor. Tudo bem, então finalmente terminamos de trabalhar no projeto Espero que tenha sido interessante e útil. Você gostou e aprendeu algo novo. Vamos seguir em frente. 72. Projeto 8 - Pré-visualização do projeto: Tudo bem, então é hora de construir nosso próximo projeto, que será o clone de um dos mais populares e comumente sites mais populares e comumente usados chamado Paypal, criará a interface de usuário das diferentes Estou na página principal, páginas de login e inscrição. É claro que não será o clone exato com todas as funcionalidades Como eu disse, criaremos apenas uma interface de usuário com HTML, CSS e JavaScript. O Paypal parece diferente em diferentes países. A interface do usuário muda com frequência de tempos em tempos. Portanto, não se preocupe se esse não for o clone exato da interface atual Tudo bem, então antes de começarmos a escrever o código, primeiro, vamos descrever a aparência do projeto Então, como eu disse, criaremos três páginas diferentes, login principal e inscrição. Começaremos com a página principal. Ele consistirá em algumas seções diferentes. A primeira seção será o banner com navegação Temos aqui vários itens de navegação. Se eu passar o mouse sobre eles, o menu suspenso será Ele mudará quando passarmos mouse sobre outro item de navegação Além disso, teremos aqui dois botões diferentes para fazer login e se inscrever. Se eu clicar neles, navegaremos até a página correta. Então, o banner será seguido pela segunda seção. Ele incluirá três partes diferentes com Font, ícones incríveis, alguns elementos de texto e botões. Em seguida, teremos essa seção azul com alguns parágrafos diferentes A seguir, criaremos esta pequena seção aqui com uma imagem e três etapas diferentes. Abaixo, teremos um botão para se inscrever, seguido pelo rodapé Tudo bem, então vamos ver a página principal. Vamos dar uma olhada na página de login. Será bastante semelhante à página de login original. Teremos aqui dois campos de entrada com botões. Essa provavelmente é a página de inscrição. Ele consistirá em duas partes. No lado esquerdo, teremos várias imagens dos clientes. Quanto ao lado direito, ele incluirá duas opções diferentes. Se queremos criar uma conta pessoal ou comercial. Tudo bem, então isso é tudo sobre o projeto. Como de costume, vamos torná-lo responsivo a diferentes tamanhos de tela Se eu inspecionar a página e mudar para o modo responsivo, você verá que ela é Uma coisa a observar aqui: em telas menores, não teremos mais os menus suspensos Eles se transformarão no menu assim. Ok, então é isso. Estamos prontos para começar a construir o projeto. Então, vamos seguir em frente. 73. Projeto 8 - crie uma marcação em HTML para desembarque e defina estilos comuns: Eu criei uma nova pasta na área de trabalho chamada Wine House, na qual tenho outra pasta para as imagens. Vamos abrir essa pasta no código VS. Vou criar três arquivos diferentes. Index.html, style.css e scripts dot js. Isso abre o arquivo index.html e gera o documento HTML básico. Vou usar meu kit. Vamos colocar aqui o ponto de exclamação e pressionar Enter ou tab Em seguida, vou vincular esses três arquivos. Então, vamos abrir a tag do link e especificar aqui o caminho do arquivo CSS. Em seguida, vou abrir a tag de script abaixo, acima da tag do corpo de fechamento. E no atributo fonte, vamos especificar o caminho do arquivo script.js. Ok, além disso, vou usar uma das fontes do Google em todo este projeto. Então, vamos em frente e pegar o link. Vamos ao site do Google Fonts e pesquisar uma fonte chamada cormorant Vamos selecionar aqui algumas espessuras de fonte diferentes e, em seguida, pegar o link Vou colá-lo no elemento principal. Em seguida, quero mudar o logotipo na barra de título. Precisamos abrir a tag de link como o valor do atributo REL. Precisamos do ícone aqui. Em seguida, vou especificar o tipo. Ele será fotografado com uma barra em PNG. E, finalmente, temos que especificar o caminho da imagem e os atributos de referência H. Temos aqui a pasta de imagens e, em seguida, temos que selecionar um ponto de logotipo PNG. Por fim, mude o título. Precisamos da Wine House. Vamos prosseguir e executar o projeto no navegador. Para isso, vou usar um dos pacotes de código do VS chamado servidor ativo. Isso nos permite executar a vida útil do projeto no navegador e fazer alterações sem atualizar a página todas as vezes Assim, você pode instalar e usar essa extensão. Portanto, o projeto está ativo para o navegador. Além disso, você pode ver aqui o logotipo na barra de título. Por fim, vamos organizar um pouco nossos ambientes de trabalho, colocar o editor e o navegador desse jeito e começar Tudo bem, então criaremos e personalizaremos cada uma das páginas separadamente. E depois disso, programaremos o efeito de rolagem e também algumas outras coisas diferentes Vamos começar a criar a marcação HTML open div tag, que será o contêiner Em seguida, teremos outros elementos div. Vai ser o invólucro. Então, no geral, teremos cinco páginas diferentes, quero dizer, cinco seções diferentes. Então, vamos prosseguir e criar elementos desta seção para todos eles. Vou atribuir a ela a primeira seção da classe. Então, vamos duplicá-lo quatro vezes e mudar os nomes das classes Precisamos de nomes de turmas de duas a cinco. Tudo bem, então vou começar com a primeira seção. Quero dizer, a página inicial. Inclui o título com o sublinhado e o plano de fundo em tela cheia. Você vê aqui as setas de navegação e a barra de progresso. Eles são fixos e estão sendo exibidos em todas as páginas Nós cuidaremos deles um pouco mais tarde. Ok, vamos abrir os elementos profundos dentro da primeira seção. Esse elemento terá duas classes diferentes. O primeiro será o invólucro de seção de classe comum Pois a segunda será a aula individual. Vou chamá-la de seção um rápido. Na verdade, também precisamos desse invólucro de seção para o resto das seções. Então, vamos copiar esse elemento e colá-lo em todos eles. Além disso, precisamos mudar os nomes das classes. Precisamos de dois números de dois a cinco. Ok, vamos voltar para a primeira seção. Precisamos inserir uma tag div que envolverá o título. Vamos atribuir a ela um nome de classe, seção um, wrapper de cabeçalho E passe aqui os elementos de cabeçalho H1. Vou atribuir a ela um título da seção um da classe. E também, vamos colocar aqui o texto a seguir. Os melhores vinhos do mundo. Então isso é tudo sobre a primeira seção. Agora, vou começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos comuns. Vamos selecionar cada elemento usando um asterisco e colocar aqui alguns estilos comuns e redefinidos Vou me livrar da margem e do preenchimento de todos os elementos Vamos definir os dois como zero. Além disso, vou fazer uma caixa de tamanho de caixa, caixa de borda. Em seguida, vou me livrar de alguns estilos padrão. Quero dizer, vamos definir o esboço como não. Além disso, vou definir a decoração do texto para aprender. Em seguida, elimina os estilos padrão dos elementos da lista. Vamos fazer com que o tipo de estilo de lista não seja nenhum. E, finalmente, vou definir uma família de fontes para chamar Moran caramel Desculpe. Então, ao longo deste projeto vamos usar a RAM como unidade de medida. No momento, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 pixels. Por padrão, quero converter 1 g em dez pixels. E para isso, temos que diminuir o tamanho da fonte do elemento HTML e torná-lo em 62,5% O tamanho do título diminuiu. Depois disso, vamos cuidar da embalagem. Vou definir sua largura e altura, ambas com 200% da janela de visualização Então, vamos atribuir à propriedade de largura uma centena de largura da janela de visualização Quanto à altura, vou fazer seja uma centena de altura de janela de visualização Em seguida, vamos selecionar um elemento de seção em si e definir a largura e a altura, ambas em 200%. Então eu vou tornar sua posição absoluta. Além disso, precisamos tornar a posição do invólucro relativa porque eu quero posicionar as seções acordo com seu elemento pai, que é rapper Depois disso, vamos fazer com a posição de atraso da seção seja zero Depois disso, vou selecionar o wrapper da seção. Vamos definir sua largura e altura. Precisamos herdar os dois do elemento seção. Então, vamos definir a largura e a altura de ambos para herdar. Então, neste momento, a primeira seção acabou atrás do resto das seções por causa da posição absoluta. Como eu disse, vou personalizá-lo primeiro, a primeira seção. Então, para colocá-lo no topo das outras seções, vamos usar a propriedade do índice Z. Selecione a primeira seção e defina o índice como 50. Depois disso, vou definir a imagem como plano de fundo em tela cheia Vamos selecionar o invólucro da Seção 1. Então eu vou usar aqui gradiente linear. Vamos colocar aqui a cor preta. Quero dizer RGBA com três zeros e com a opacidade 0,5. Em seguida, precisamos novamente de RGBA, cor preta, mas com opacidade diferente. Vamos fazer com que seja 0,4. Em seguida, precisamos especificar o URL da imagem, o caminho da imagem. Temos uma pasta chamada imagens e precisamos selecionar a Seção 1, PG dot JPG. Em seguida, precisamos do Center e também do no-repeat. Então, finalmente, vamos definir o tamanho do plano de fundo, torná-lo coberto. Tudo bem, como você pode ver, temos aqui uma imagem de fundo em tela cheia para a primeira seção Agora vamos prosseguir e cuidar do cabeçalho, selecione seu encapsulamento div Em primeiro lugar, vou tirar você da posição da embalagem Vou colocar o título perto da parte inferior da página. Então, vamos tornar sua posição absoluta. Em seguida, defina a propriedade principal e torne-a 70%. Quanto à propriedade esquerda, vou torná-la em 50 por cento. E também precisamos transformar com a função de tradução. Temos que passar por você -50 por cento em ambas as direções. Quero dizer, para os eixos x e y. Portanto, o cabeçalho está colocado da maneira correta, mas no momento não está bem visível. Então, vamos em frente e consertar isso. Vou selecionar o título em si. Vamos definir o tamanho da fonte. Dez RAM. Também altere a espessura da fonte, torne-a 300 e mude a cor. Vou usar aqui, branco. Ok, em seguida, vou transformar texto em letras maiúsculas. E também crie algum espaço entre as letras usando o espaçamento entre letras Com o valor 0,1 executado. Depois disso, vamos adicionar uma borda na parte inferior do título. Portanto, use a borda inferior com pontos de valores para solidificar. E como cor, vou usar D5 com quatro zeros Tudo bem, então o título parece bom. Por fim, quero alinhá-lo ao lado direito e também desabilitar a seleção do usuário Então, precisamos alinhar o texto com o valor, certo? E, em seguida, o usuário seleciona nenhum. Tudo bem, vamos ver a primeira seção. Parece bom e podemos passar para o segundo. Primeiro de tudo, vamos criar a marcação HTML. Portanto, a segunda seção incluirá duas imagens diferentes e o botão. Vamos abrir uma tag div com a venda da turma. Então, teremos uma imagem e um botão nesse desenvolvimento que é um elemento IMG aberto Os atributos de origem. Vou especificar a parte da imagem. Temos que selecionar bag dot PNG na pasta de imagens. Além disso, vou atribuir ao atributo alt navegar de volta. E também precisamos classificar o atributo com um valor de retorno. Em seguida, vamos inserir aqui um botão com o nome da classe, sale, btn. E como imposto, vou aprovar seu pedido. Agora. Além disso, vou inserir aqui outra imagem, mas ela será colocada fora do div Vamos especificar aqui o caminho da imagem. Precisamos de um ponto de garrafa de vinho PNG. Além disso, vamos atribuir ao atributo alt, o valor garrafa de vinho Além disso, vou adicionar um atributo de classe com uma garrafa de vinho de valor. Ok, então isso é tudo sobre a marcação da segunda seção No momento, a segunda seção acabou atrás da primeira. É por isso que não vemos aqui alguns dos elementos. Vou corrigir esse problema usando novamente a propriedade index. Vou mudar aqui o nome da turma. Vamos usar a Seção dois. No momento, eu queria usar essa forma, mas, eventualmente, definiremos valores diferentes da propriedade do índice para todas essas seções. Tudo bem, agora precisamos definir o plano de fundo para a segunda seção Vamos pegar esse código daqui. E depois faça algumas mudanças. Precisamos do invólucro da Seção 2. Em seguida, altere as opacidades. Vamos torná-los 0,8 e 0,9. E também mude o nome da imagem. Precisamos da Seção 2, PG. Ok? Então essa é a aparência da segunda seção agora , como temos aqui, as barras de rolagem E eu quero me livrar deles. Para isso, temos que atribuir para fazer o wrapper overflow hidden. Depois disso, vamos cuidar do layout desses elementos. Vou usar o Flexbox. Vamos usar aqui o display flex. Em seguida, precisamos alinhar o centro dos itens para centralizar os elementos verticalmente E também vou usar o conteúdo justificado com o espaço de valores uniformemente Tudo bem, vamos começar a estilizar cada um dos elementos medida em que vou selecionar o elemento div com a venda da classe Vamos usar novamente livros de fluxo. Eu quero fazer com que seja um recipiente flexível. Em seguida, precisamos mudar a direção do fluxo. Vamos fazer uma coluna. E depois disso, para centralização vertical e horizontal, vamos usar alinhar itens ao centro e justificar o centro Tudo bem, depois disso, vamos personalizar a primeira imagem Vamos diminuir um pouco a opacidade, torná-la 0,9. E também vou mudar a largura da imagem. Vamos fazer com que seja 45 rem do que o botão selecionado. Tem venda de classe, btn. Antes de tudo, vamos definir a largura e a altura. Vou definir a largura para 20 RAM. Quanto à altura, vamos fazer cinco rampas. Em seguida, vou cuidar do texto Vamos aumentar o tamanho da fonte. Chegue até Ram. Também altere a espessura da fonte. Faça-o mais leve. Em seguida, transforme o texto em maiúsculas e crie algum espaço entre as letras Vamos fazer com que seja 0,1 repetição. Ok, depois disso, vou definir a cor de fundo como transparente. Além disso, mude a cor, torne-a branca. Em seguida, crie algum espaço na parte superior do botão usando a margem superior com o valor da RAM. E, finalmente, vamos criar uma borda com os valores 0.1, rampa sólida e usar a cor branca Tudo bem, então o Buxton é personalizado. Por fim, quero criar um pequeno efeito de foco. Vou mudar a cor de fundo ao passar o mouse. Botão selecionado com o mouse sobre o mouse. Mude a cor do plano de fundo. Use aqui novamente essa cor vermelha. E então, para tornar o efeito um pouco mais suave, use a transição com um valor de cor de fundo e com duração de 0,2 s. Tudo bem, então o botão está estilizado e o último elemento que eu quero personalizar é a segunda imagem Então, vamos prosseguir e selecioná-lo. Eu vou mudar a opacidade. Quer dizer, eu quero diminuí-lo para 0,6 e também alterar a largura. Faça com que seja uma rampa dupla. Tudo bem, então, com esta segunda seção, terminamos. Está estilizado e temos que seguir em frente e cuidar da terceira seção Vai ser, novamente, meio simples. Teremos a imagem de fundo em tela cheia. Além disso, teremos outras imagens no centro da página e esses textos aqui. Então, primeiro de tudo, vamos criar novamente a marcação HTML Teremos três elementos diferentes aqui. A primeira será a tag H1 aberta de cabeçalho com o título da seção três da classe E passe aqui o texto, da melhor qualidade. Em seguida, teremos a imagem. Especifique o caminho da imagem no atributo de origem. Precisamos selecionar o ponto do quadro PNG. Adicione também aqui o valor do atributo alt aqui, digamos, frame de uvas. Em seguida, adicione um atributo de classe com um traço de quadro de valor IMG Vamos duplicar essa linha de código. Mude o nome da imagem que precisamos aqui, grapes dot PNG. Também como o valor do atributo alt. Vou deixar aqui só uvas. O evento mudou a classe. Precisamos aqui, uvas e G. Ok? Então, no momento, essa seção não está visível e o motivo é o mesmo. Acabou atrás da segunda seção. Então, vamos corrigir isso novamente usando a propriedade z-index. Vou mudar aqui o nome da turma. Precisamos da Seção 3. Agora, os elementos estão visíveis. Vamos continuar e personalizar essa seção. Primeiro, vamos definir a imagem como plano de fundo em tela cheia Vamos selecionar o invólucro da Seção 3. Na verdade, também precisamos de um código semelhante para a seção de três rappers. Então, vamos pegar esse código daqui. Cole-o no invólucro da terceira seção e faça algumas alterações Vamos mudar as opacidades. Precisamos aqui. 0,3, 0,9 e, em seguida, altere o nome da imagem. Precisamos de três. E, finalmente, precisamos aqui justificar o conteúdo com o centro de valor em vez do espaço uniformemente Tudo bem, isso é tudo sobre o invólucro. Vamos continuar e personalizar cada um dos elementos separadamente. Vou começar com as imagens. Vamos selecionar a primeira imagem, que tem quadro de classe IMG Vamos definir a largura para 100 rampa. Além disso. Vou tornar sua posição absoluta. E, finalmente, diminua a opacidade, torne-a 0,5. Ok, a seguir, vou selecionar essa segunda imagem, uvas IMG Na verdade, também precisamos de estilos semelhantes para a segunda imagem. Então, vamos pegar esse código daqui e apenas alterar os valores. Vou definir a largura para quatro para correr. Quanto à opacidade, vamos fazer com que seja 0,7. Finalmente, vou cuidar dos elementos do cabeçalho. Então, vamos seguir em frente e selecionar esses elementos. Primeiro de tudo, vamos aumentar o tamanho da fonte, torná-la para 20 RAM. Em seguida, mude a cor. Vou usar aqui a cor cinza claro, quero dizer CCC, e também transformar texto em maiúsculas Em seguida, precisamos girar o cabeçalho. Então, vamos usar Transform com a função de rotação. Vou girar a imagem com 20 graus. Além disso, use seu centro de alinhamento de texto. Então, o título parece bom. Quero adicionar um pequeno efeito de sombra e também vou desativar a seleção do usuário. Então, vamos continuar e usar sombra de texto com os valores 0,5 RAM do que 1,5 RAM. E como cor, vou usar 000, que é a coluna preta. E, finalmente, use seus usuários, selecione nenhum 74. Projeto 8 - Personalize e faça trabalho em páginas de destino: Vamos abrir os empreendimentos, que serão contêineres. Na verdade, incluirá todo o conteúdo do projeto. Então, vamos criar a marcação do cabeçalho e, em seguida, adicionaremos um pouco de CSS Então, construiremos nosso projeto seção por seção. Vamos abrir os elementos do cabeçalho e atribuí-los ao cabeçalho da classe O cabeçalho consistirá em três partes diferentes. O primeiro será o texto, que foi colocado no lado esquerdo. Então, vamos abrir um elemento div com um texto de cabeçalho de classe. O texto será representado por título em parágrafo. Portanto, precisamos abrir o elemento de cabeçalho H1 com título da classe e com texto em todo o mundo. Em seguida, vou abrir os elementos p com o nome da classe, parágrafo do cabeçalho Então vamos instituir alguns textos. Viajando. Isso deixa você sem palavras Em seguida, transforma você em um contador de histórias. Tudo bem? Em seguida, vou inserir aqui uma imagem. Estou na imagem do balão de ar. Vamos especificar aqui o caminho da imagem. Temos as imagens da pasta e, em seguida, precisamos selecionar um ponto de balão de ar PNG Em seguida, vou inserir aqui a imagem do cabeçalho do texto, quero dizer como o valor do atributo alt E, finalmente, vamos atribuir ao atributo da classe do elemento de imagem, a imagem do cabeçalho do valor Então, aqui temos a imagem do balão de ar e, finalmente, temos que criar um logotipo Como você se lembra, usaremos um texto animado como logotipo. Então, vamos abrir um desenvolvimento com o logotipo da turma. Em seguida, vou instituir os elementos do cabeçalho H1. Portanto, cada letra e o título serão representados por esse elemento do painel. Porque precisamos criar animações com um tempo de atraso diferente para cada letra Então, vamos abrir o elemento span e inserir aqui a primeira letra T. Em seguida, duplicá-la seis vezes e mudar as letras Para o segundo, precisamos de h, depois E, depois R, 0, a e D. A estrada. Tudo bem, então isso é tudo sobre o mercado de cabeçalhos Agora, é hora de personalizar essa seção. Antes disso, quero cuidar do contêiner. Então, vamos selecioná-lo. Vou mudar a cor de fundo. Então, como você sabe, criamos algumas variáveis para cores. E para usá-los, temos que usar aqui a função var, que na verdade representa a variável como argumento. Temos que passar aqui o nome da variável, neste caso, cor secundária. À medida que a cor de fundo é alterada para o contêiner. Em seguida, vou criar algum espaço ao redor dele usando margem. Vamos fazer com que seja 3,5 rem. Além disso, vamos criar algum efeito de sombra. Vamos usar sombra de caixa com os seguintes valores. Precisamos de zero, depois uma RAM, três RAM. E como cor, vamos usar novamente a função var, a cor. Ótimo. Tudo bem, então agora, isso é tudo sobre o contêiner Em seguida, precisamos começar a trabalhar no cabeçalho. Primeiro, vamos definir a largura e a altura. Vou definir a largura como 100% asfalto da altura. Vou fazer alguns cálculos. Vamos dar uma olhada no projeto finalizado. Como vejo na parte superior e inferior do cabeçalho, temos a mesma quantidade de espaço Cada um deles é igual a 3,5 RAM, porque o tamanho da margem é igual a 3,5 rem. Agora, para criar o mesmo espaço no final do cabeçalho, vou usar o cálculo a seguir Precisamos usar a função calc, que significa calcular Em seguida, precisamos subtrair 200 pixels de altura da janela de visualização e sete RAM. Na verdade, a altura de 100 janelas de visualização é igual a 100% da janela de visualização E as sete RAM são a soma do espaço na parte superior e inferior Então, como você pode ver, agora, temos o mesmo espaço ao redor do cabeçalho Ok? Em seguida, vamos definir o plano de fundo do cabeçalho. Vou definir a imagem como plano de fundo. Em primeiro lugar, vamos usar o gradiente linear. Vou usar duas cores semelhantes, mas com opacidades diferentes Portanto, a cor será 1811455 e a opacidade Em seguida, precisamos da mesma cor. Mas com opacidade de 0,3. Depois disso, vou especificar o caminho da imagem usando a função URL. Portanto, temos uma pasta chamada imagens e precisamos selecionar o traço do cabeçalho BG dot JPG No próximo minuto, centro e sem repetição. E, finalmente, vamos definir o tamanho do plano de fundo. Eu vou fazer com que seja colorido. Tudo bem, como você pode ver, a imagem está definida como plano de fundo e já está boa A próxima coisa em relação ao cabeçalho é alinhar seus elementos secundários que vou usar o flexbox Na verdade, não atribuirei propriedades de fluxo a ele manualmente. Como você sabe, todos nós já criamos o cluster center, e vou apenas atribuir esse nome de classe como cabeçalho no HTML Portanto, todas as três partes do cabeçalho estão centralizadas dentro dele. Vamos continuar e personalizar o texto do cabeçalho. Portanto, também precisamos de alguns estilos comuns para o título e o parágrafo. E para isso, podemos adicionar alguns estilos aos elementos principais. Então, eu quero centralizar o texto dentro da caixa. Vamos inserir seu texto, alinhar o centro. Em seguida, transforme o texto em maiúsculas e crie algum espaço entre as letras Vamos definir o espaçamento entre letras para 0,1 envoltório. E agora podemos personalizar o título em parágrafo separadamente. Vamos começar com o título. Vou aumentar o tamanho da fonte. Vamos fazer disso um bonde. E depois mude de cor. Vou usar sua coluna branca. Ok, isso é tudo sobre o título. Em seguida, vamos cuidar do parágrafo. Vamos seguir em frente e selecionar esses elementos. Aumente o tamanho da fonte, transforme-a em três RAM. Em seguida, altere a espessura da fonte. Vou fazer 500. E finalmente mude a cor. Nesse caso, vou usar a coluna secundária, certo? Portanto, o parágrafo também tem estilo. Mas acho que está muito esticado. Então, vou definir a largura máxima para o parágrafo. Vamos usar a propriedade de largura máxima e fazer com que seja de sete a rampa. Finalmente, para centralizar o texto, vamos usar a margem R0 Então não, acho que fica muito melhor na verdade, com os textos da Heather, estamos quase terminando A única coisa que eu quero fazer é adicionar algum efeito de sombra em ambos os elementos. Então, vamos adicionar sombra de texto ao elemento pai com os valores 0,3, 0,5 RAM. E como cor, vamos usar a cor cinza. Tudo bem, então, finalmente, terminamos com o texto do cabeçalho e agora temos que seguir em frente e começar a trabalhar no logotipo Ele deve ser colocado no canto superior direito do cabeçalho. Para isso, precisamos usar a posição. Vamos selecionar o logotipo e tornar sua posição absoluta. Em seguida, vou tornar a posição do cabeçalho relativa porque precisamos definir a posição do logotipo de acordo com seu elemento principal E depois disso, vamos definir as posições superior e correta. Vou fazer os dois para alugar. Então, o logotipo é colocado no canto superior direito e agora precisamos personalizá-lo. Como você sabe, cada letra é encapsulada por esse elemento de extensão. Vamos prosseguir e selecioná-lo. Vamos aumentar o tamanho da fonte e transformá-la na RAM. Em seguida, altere o peso da fonte. Eu vou torná-los mais ousados. Então, vamos atribuir a 900 e depois mudar de cor. Nesse caso, vou usar a cor primária. Em seguida, transforme o texto em maiúsculas e, finalmente, altere a cor de fundo Faça com que seja branco. Agora precisamos definir a largura e a altura de cada letra. Vamos fazer dos dois a marca 3.5. Como você pode ver, a largura e a altura não são aplicadas às letras. O motivo é que esse elemento de extensão é um elemento embutido Portanto, não podemos definir a largura e a altura para ele. Para corrigir isso, vou torná-lo um elemento de nível de bloco por enquanto, porque eventualmente usaremos o flexbox Então, vamos usar seu bloco de exibição. Agora, a largura e a altura são aplicadas às letras. Além disso, eles são colocados verticalmente em uma coluna porque é o comportamento padrão dos elementos no nível do bloco Tudo bem, agora para colocá-los lado a lado horizontalmente elemento de cabeçalho Select H1 é o elemento pai desses painéis atribuídos a ele display flex Ok. Agora precisamos de algum espaço entre as letras e também torná-las arredondadas. Use margem com o valor 0,5 rem. E então raio de fronteira de 50 por cento. Além disso, vou me livrar do bloco de exibição a partir daqui porque, no momento, esses elementos de extensão são itens flexíveis e não precisamos mais dessa propriedade Tudo bem? A última coisa que precisamos aqui é colocar letras no centro desses círculos. Para isso, vamos usar novamente o cluster center e atribuí-lo a todos os elementos de extensão Certo? Portanto, o logotipo é personalizado. E agora é hora de criar a animação. Para isso, usaremos quadros-chave CSS. Precisamos adicionar quadros-chave de sinais, que devem ser seguidos pelo nome da animação Na verdade, você pode nomear a animação como quiser. Dentro dos quadros-chave. Podemos definir algumas regras de CSS com algumas etapas. E então podemos aplicar essas regras aos elementos usando a propriedade de animação. Então, teremos cinco etapas diferentes. Eles serão representados pelos valores percentuais. Vou começar com zero por cento e passar por 100 por cento. 0-10% das letras não devem se mover. Portanto, precisamos aqui do seguinte. Temos que indicar aqui em 0%. Então, dentro das chaves, vou usar Transform com a função Translate Y, que deve ter o valor zero Porque não precisamos mover as letras. O próximo passo será dez por cento. E, na verdade, precisamos aqui da mesma transformação traduzida por Y zero. Depois disso, de 10% para 15%, vou aumentar as palestras Então, o próximo passo será 50 por cento. E precisamos aqui transformar, traduzir y com o valor -100% Então, de 15% para 20%, precisamos colocar as letras de volta em suas posições. Então, em 20 por cento, precisamos novamente transformar y zero. E, finalmente, de 20 por cento a 100%, as cartas devem permanecer em suas posições. Então, precisamos transformar novamente, traduzir Y zero. Tudo bem, então essas são as regras que devemos aplicar às cartas, mas com um tempo de atraso diferente Precisamos de um tempo de atraso diferente para colocá-los em ordem. Temos que selecionar cada elemento de extensão separadamente. E para isso, vou usar a pseudoclasse da enésima criança Então, vamos usar o logotipo H1 e depois o span, seguido pelo seletor enésimo filho E temos que especificar aqui o primeiro elemento de extensão. Agora precisamos atribuir ao elemento diferentes propriedades de animação O primeiro será o nome da animação. Em seguida, deve ser seguido pela duração da animação. Para isso, temos que usar a propriedade chamada duração da animação. Vamos configurá-lo para 5 s. Em seguida, precisamos do tempo de atraso para a primeira letra. Vou usar 0,1 s. Para definir o tempo de atraso, temos que usar o atraso da animação. Vamos atribuir a ela 0,1 s. Finalmente, precisamos especificar o valor da propriedade de contagem de iterações da animação No nosso caso, precisamos executar a animação infinitamente. Então, precisamos aqui do infinito. Tudo bem, então definimos a animação para a primeira letra Para isso, usamos aqui algumas propriedades de animação. Basicamente, na prática, podemos usar uma forma abreviada. Só precisamos de uma propriedade CSS chamada animação, em vez de usar várias propriedades de animação. Então, podemos usá-lo aqui. Animação e os seguintes valores. O primeiro será o nome Então, precisamos de duração de 5 s, seguido pelo ponto de atraso de 1 s. E, finalmente, precisamos de infinito. Podemos simplesmente nos livrar de todas essas propriedades a partir daqui. Vamos continuar e duplicar esse código seis vezes. Porque temos sete letras. Em seguida, altere o número de delighters e também altere o tempo de atraso Para a segunda, precisamos de 0,2 s. Em seguida precisamos de 0,3 s. Então, para a quarta letra, quando 0,4 s, 0,5 s. A próxima será 0,6 s. E, finalmente, precisamos de 0,7 s. Tudo bem? Então, como você pode ver, a animação está funcionando e temos aqui bons efeitos interessantes. Na verdade, terminamos o logotipo e agora temos que seguir em frente e cuidar da imagem. Quero dizer, o balão de ar. Vamos seguir em frente e selecionar uma imagem. Antes de tudo, vamos diminuir seu tamanho. Faça com que sua largura seja 35%. Vamos dar uma olhada mais uma vez na versão final do projeto. Como você pode ver, balão de ar está se movendo pelo fundo dos cabeçalhos e , para conseguir isso, precisamos criar um ambiente 3D E para isso em CSS, temos uma propriedade chamada perspectiva, que precisamos atribuir ao cabeçalho Em geral, a propriedade de perspectiva define a distância entre o objeto e o usuário. O valor mais baixo criará um efeito 3D mais intenso. Então, no nosso caso, precisamos de um valor um pouco maior. Então, vamos atribuir a ele 100 mil, certo? Como o logotipo, também precisamos usar quadros-chave CSS aqui. Vou nomear a animação como imagem flutuante. Então, no geral, teremos cinco etapas diferentes. Moveremos o balão pela imagem usando a transformação com a função translate z. Isso nos permite mover o objeto no espaço 3D. Então, de 0% a 40 por cento, precisamos das seguintes propriedades e valores. Precisamos aqui Transformar, Traduzir Z com valor para executar. Nesse caso, usamos um valor positivo e ele realmente move o objeto para perto do usuário. Para mostrá-lo, vou atribuí-lo diretamente à imagem Então é assim que a função Translate Z funciona. Se tornarmos o valor negativo, digamos -400 rodadas, a imagem será colocada no fundo do À primeira vista, você pode pensar que o tamanho da imagem diminuiu, mas, na verdade, a imagem está longe do usuário Tudo bem, vamos nos livrar dessa linha de código aqui. Portanto, além da propriedade de transformação, vou usar a opacidade durante a animação para alterar a opacidade ligeiramente em zero por cento. Vamos fazer disso um. Na verdade, você pode omitir essa propriedade aqui, porque, por padrão, a opacidade cada elemento é definida como Mas eu o uso de qualquer forma para tornar o processo de trabalho mais claro. Tudo bem, é isso, cerca de 0%. O próximo passo será de 40 por cento, 0 a 40%. Precisamos mover o balão de ar para dentro da imagem Portanto, precisamos aqui Transformar, Traduzir o valor Z -500 g. Além disso, precisamos mover o padrão um pouco para o lado direito Então, vou usar a função translate x. O valor 150 correu. Precisamos disso porque o bastão se move para o centro da imagem por padrão Por fim, vamos usar a opacidade. Vou diminuir um pouco, vamos fazer com que seja 0,8. Tudo bem, o próximo passo será 70%. Vamos duplicar essa etapa aqui. Eu vou mudar os valores. Precisamos de 70%. De 40% a 70%. Precisamos mover o balão ainda mais para dentro da imagem. Então eu vou passar aqui -1.500 rampa. Quanto à direção x, precisamos mudar a direção do balão explicitamente ao mesmo tempo Então, vou aumentar o valor da função Translate X. Vamos fazer com que seja 800 rampa. E finalmente diminua a opacidade, torne-a 0,6. Ok, o próximo passo será 80 por cento. Então, mais uma vez, vamos duplicar esse código de 70% para 80%. Precisamos mover o balão trás e para perto do usuário Então, vamos mudar os valores. Vamos inserir aqui -50 RAM. Então, precisamos de 100 rampa e a opacidade de 0,8. E, finalmente, em 100%, precisamos fazer com que o valor da função de propriedade Translate Z seja igual ao ponto de partida. Então, quando você transforma translate Z com um valor para t, execute o de opacidade. Tudo bem, então com os quadros-chave, terminamos. E agora precisamos aplicar essas regras à imagem usando a propriedade de animação. Vamos atribuir a ela a dobra da imagem do nome. No momento, vou definir a duração como 5 s. para ver rapidamente todo o processo de animação. Além disso, precisamos aqui para tornar a animação infinita. Então, como você pode ver, o balão está se movendo da maneira certa O único problema que temos aqui são as barras de rolagem. E, na verdade, podemos corrigir isso simplesmente usando overflow hidden, que deve ser atribuído ao contêiner Tudo bem, então tudo funciona bem. Vamos apenas aumentar a duração da animação. Eu vou fazer 1/52. Tudo bem, então isso é tudo sobre o cabeçalho. Tudo funciona perfeitamente e agora temos que seguir em frente e começar a trabalhar na próxima seção. 75. Projeto 8 - Criar e Estilo Seção de Tours mais populares: Na verdade, passo a passo, o código se torna maior porque o projeto em si Portanto, antes de começarmos a criar a próxima seção, acho que será melhor adicionarmos alguns comentários em nossos arquivos HTML e CSS. Temos aqui um cabeçalho. Vamos inserir o cabeçalho. Em seguida, do cabeçalho. A próxima seção será sobre passeios populares. Então, vamos adicionar aqui passeios populares. E então o fim das ferramentas populares. Para o CSS. No início, temos alguns estilos comuns. Então, vou colocar aqui estilos comuns. E depois no final, certo? E de estilos comuns. Então temos o cabeçalho, depois n do cabeçalho E, finalmente, vou adicionar aqui passeios populares e ferramentas populares. Tudo bem, vamos dar uma olhada mais uma vez no projeto finalizado Então, vamos construir a segunda seção chamada de passeios populares. Consiste em um título e três cartas diferentes. Cada cartão tem dois lados, frente e verso. Na parte frontal, temos uma imagem de botão, imagem de fundo com título. E abaixo temos algumas condições sobre o H2. Se coletarmos o botão de preço , a parte traseira será exibida com o preço e o botão de reserva Se eu clicar no botão Voltar aqui a parte frontal será exibida de volta. Tudo bem, então é doentio o que vamos fazer. Vamos começar a criar a marcação HTML. Vou abrir o elemento da seção com classe, turista popular. Em seguida, vou inserir aqui o título H1 com o nome da classe, título turístico popular E com o texto o mais popular. Rumo a. Em seguida, precisamos do desenvolvimento, que será a embalagem dos cartões Então, vamos atribuir a ele um invólucro de cartões de nome de classe. Depois disso, vou criar o cartão em si. Então, vamos abrir uma tag div com o cartão de classe. Então, criaremos um cartão e depois o duplicaremos duas vezes Como dissemos, cada cartão consiste em duas partes diferentes, a frente e a parte traseira. Então, vamos inserir outro desenvolvimento com o nome da classe na frente. Então, nesse elemento div, teremos um título de imagem, uma lista e o botão Então, vamos inserir seu elemento IMG, o atributo de origem. Vamos especificar a parte do arquivo. Temos pasta de imagens. E então vou selecionar Forest Dot JPEG. E o atributo alt. Eu vou colocar uma floresta. E também vou adicionar aqui o atributo de classe com uma imagem de cartão de valor. Em seguida, precisamos dos elementos de cabeçalho H1 com um nome de classe Vamos inserir aqui o nome do Tor, que será a floresta selvagem. Portanto, as condições do torque serão representadas pela lista. Vamos abrir o elemento UL com a lista de cartões de nome da classe. Portanto, no geral, teremos cinco itens de lista diferentes. Vamos abrir o elemento LI com um cartão de nome de classe, item de lista. E insira aqui a primeira condição, sete dias Depois vou duplicá-la quatro vezes. E também precisamos mudar o conteúdo. O segundo item terá até 20 pessoas. Em seguida, teremos quatro guias turísticos. Também use o tempo privado. E, finalmente, vou colocar aqui a dificuldade. Médio. O último elemento na parte frontal será o botão. Então, vamos abrir a tag de botão com um nome de classe, botão de navegação. Eu uso sua navegação porque navegaremos entre os lados frontal e traseiro com a ajuda deste botão. Vamos inserir aqui. Preço. Além disso, vou usar entidades HTML5 Quero mostrar os sinais de maior que. Então, para isso, precisamos inserir aqui e apresentar GT, que significa maior que. Do que. Precisamos de ponto e vírgula Mais uma vez, os mesmos personagens. Tudo bem, então isso é tudo sobre a parte frontal. Vamos seguir em frente e criar a parte traseira. Vai ser menor porque teremos apenas três elementos diferentes. Vamos abrir tag div com o nome da classe no verso. Então vamos copiar esse botão daqui. Então, em vez do preço, temos que colocar aqui de volta, mas precisamos escrevê-lo depois das entidades HTML5 E também, em vez dos sinais de maior que, precisamos de menos do que sinais precisamos de menos Então, em vez de GT, precisamos de U, L, T. Ok, em seguida vem o título. Então, vamos abrir a tag de cabeçalho h3 com o nome da classe em relação ao preço Vou colocar aqui $399. E, finalmente, precisamos de outro botão para reservar. Portanto, é uma etiqueta de botão aberta com o botão do cartão de classe. E depois insira aqui, reserva. Tudo bem, então isso é tudo sobre a primeira carta. No geral, teremos três deles. Vamos continuar e duplicar o cartão inteiro duas vezes. E depois mude algumas coisas. Precisamos selecionar aqui. River dot JPG. Também altere o atributo alt. Precisamos aqui, River. Então, como título, vou colocar aqui ao longo do rio. Em seguida, vou mudar as condições que precisamos aqui. Nove dias envolveram até 30 pessoas, sete guias turísticos A próxima condição será a mesma. Então, vou deixar como está, acordo com a dificuldade. Vamos dificultar as coisas. E também altere o preço. Vamos fazer com que seja $499. Ok. Vamos continuar e mudar essas coisas para a terceira carta também. Precisamos aqui, C dot JPG. Também altere o valor do atributo alt. Vou colocar aqui, veja, o título será a praia da ilha. Em seguida, altere as condições. Precisamos aqui de cinco dias de folga. Em seguida, serão até 40 pessoas, comeram, guiarão e depois entrarão no hotel Então eu vou facilitar a dificuldade. E, finalmente, altere o preço, ganhe $599 Tudo bem, venda a marcação HTML No momento, os cartões parecem feios porque temos aqui apenas o HTML puro Vamos começar a escrever um pouco de CSS. Em primeiro lugar, vou criar algum espaço na parte superior e inferior. Então, vamos selecionar o elemento da seção, que tem a turma popular e atribuído a ela um preenchimento Vou fazer estofamento na parte superior, fibrina e depois zero no lado direito Tan correu para o fundo. E, finalmente , zero no lado esquerdo. Em seguida, vou cuidar do título desta seção. Vamos selecionar esse elemento. Então, primeiro de tudo, vamos aumentar o tamanho da fonte, torná-la oito RAM. Em seguida, vou colocar o título no centro usando o centro de alinhamento de texto Em seguida, vou criar algum espaço na parte inferior do título usando margem, parte inferior. Vamos configurá-lo para oito. Correu. Mude a cor. Vamos usar sua cor primária. E, finalmente, vou criar algum efeito de sombra usando sombra de texto com os seguintes valores. Precisamos aqui, zero, depois 0,1 RAM, apontar para RAM e a coluna principal. Ok, então, como você pode ver, o título está estilizado e parece bom Em seguida, vou cuidar dos cartões. Primeiro, vamos alinhá-los lado a lado horizontalmente. Para isso, vou selecionar o invólucro de cartão atribuído a ele, display flex Então, para criar um espaço uniforme entre os cartões, vamos usar o justify content space uniformemente Portanto, as cartas são colocadas lado a lado, mas no momento não temos esse espaço O motivo é a largura das imagens. Então, vamos em frente e cuidar deles. Antes de tudo, selecione o cartão em si e defina sua largura. Vou configurá-lo para 35 rodadas. Em seguida, selecione uma imagem com a imagem do cartão de classe e defina sua largura, torne-a 100%. Portanto, nesse caso, a imagem herdará a largura do elemento pai Agora, como você pode ver, as imagens são menores e temos esse espaço entre os cartões. Tudo bem, agora vamos começar a trabalhar na parte frontal. Eu vou selecioná-lo. No início. Vamos colocar o imposto e o centro usando o centro de alinhamento de texto Em seguida, altere a cor do plano de fundo. Vou usar aqui o colarinho branco. Depois disso, vou fazer com que a parte frontal um pouco arredondada usando de raio da borda. Tudo bem? Então, no momento, vemos um raio de borda apenas na parte inferior por causa da imagem Portanto, também precisamos arredondar os cantos superiores da imagem. Então, vamos atribuir à imagem o raio da borda. Quando quiser criar os cantos individuais dos elementos ao redor, você pode atribuir vários valores à propriedade border-radius O primeiro pertence ao canto superior esquerdo. Vamos fazer com que seja 0,3. Rem. Em seguida, vem o canto superior direito. Vou configurá-lo com o mesmo valor, 0,3 RAM. Então temos o canto inferior direito. Vamos torná-lo zero. E, finalmente, precisamos especificar o canto inferior esquerdo. Vamos torná-lo zero também. Tudo bem, agora temos raio de borda em todos os quatro cantos do carro Vamos continuar e personalizar o elemento de cabeçalho. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer 2,5 em torno de 2,5. Altere a espessura da fonte, defina-a como 700 e também transforme o texto em maiúsculas Depois disso, vou mudar a posição do cabeçalho. Quero colocá-la no canto inferior direito da imagem. Então, vamos tornar sua posição absoluta. Então, para posicioná-lo acordo com seu elemento pai, que é o lado frontal, precisamos atribuir à posição principal relativa E depois disso, vamos definir as propriedades superior e correta Vou configurá-lo para 30%. Quanto à posição correta, vamos fazer 1,5. Execute a célula, o cabeçalho está posicionado. Em seguida, vou mudar sua cor. Vamos torná-lo branco. E também adicione algum efeito de sombra. Use sombra de texto com os valores 001 run e a coluna preta. Tudo bem, então isso é tudo sobre o título. Vamos seguir em frente e passar para a lista. Vamos selecionar os elementos da lista usando a lista de cartões. Vou definir sua largura. Quer dizer, eu quero diminuir sua largura. Então, vamos fazer com que seja 80% do que, para centralizar a lista, precisamos usar margem automática. E, finalmente, vamos criar algum espaço dentro da lista. Vou colocar o acolchoamento na parte superior para correr. Em seguida, zero no lado direito. Três rem na parte inferior e zero no lado esquerdo. Tudo bem, agora é hora de personalizar os itens da lista, então vamos selecioná-los. Primeiro, vamos definir o tamanho da fonte. Faça com 1,6 RAM, depois altere a espessura da fonte, defina-a para 500 e mude a cor. Nesse caso, vou usar coluna cinza claro. Ok, então os itens parecem melhores, mas precisamos adicionar mais estilos a eles. Vamos criar algum espaço na parte superior e inferior do item usando a margem com os valores para RAM e zero. Em seguida, vou criar uma borda na parte inferior. Então, vamos usar a propriedade chamada borda inferior com os valores 0.1 rodando como sólido e a coluna primária. Como você pode ver, cada item da lista tem uma borda na parte inferior, mas eles estão muito próximos um do outro. Então, precisamos adicionar um pouco de espaço. E vamos criar o espaço usando o preenchimento. Na parte inferior com a rampa de valor 1,5. Tudo bem, então tudo está estilizado, exceto o botão de preço. No momento, não vamos estilizá-lo porque os dois botões, eu só tenho um botão com preço e o botão Voltar, têm a mesma classe E acho que seria melhor se começássemos primeiro pela parte traseira e depois cuidássemos dos botões Então, vamos seguir em frente e selecionar a parte traseira. Em primeiro lugar, vou cuidar da posição. Vamos torná-lo absoluto. Então, para posicionar de acordo com o cartão, vamos atribuir à posição relativa do cartão Em seguida, defina a posição superior. Vamos zerar e mudar a cor de fundo. Vamos configurá-lo para a cor primária. Tudo bem, então essa é a aparência da parte traseira agora. Vou expandi-lo para todo o cartão. Para isso, vamos definir largura e altura em 200%. Tudo bem, a seguir, vamos torná-lo arredondado e também adicionar algum efeito de sombra Vou usar o raio da borda com o valor de 0,3 rampa. E então a sombra da caixa com os valores de zero a Ram. Para RAM. E a cor 777. Ok, agora temos que alinhar os elementos dentro da parte traseira e depois personalizá-los Vou colocar os elementos no centro para isso. Vamos usar o flexbox e apenas adicionar o centro do nome da classe na parte traseira. Em HTML. Os elementos são colocados no centro. Eles são colocados lado a lado e na verdade, não precisamos deles Temos que mudar a direção da flexão e torná-la uma coluna Certo? Em seguida, vamos personalizar o preço e o botão de reserva. Selecione Preço total. Vamos aumentar o tamanho da fonte. Faça com que sejam cinco rem. Altere a espessura da fonte. Vou configurá-lo para 300 Em seguida, torne a cor branca e também crie algum espaço na parte inferior usando a margem inferior das três rampas Tudo bem, então o preço parece bom. Vamos seguir em frente e passar para o botão. Vamos selecioná-lo. Eu vou mudar a cor. Vamos torná-lo primário. Em seguida, altere a cor do plano de fundo. Eu vou fazer com que seja branco. Livre-se da borda padrão usando border none. Em seguida, altere o tamanho da fonte, torne-a 2,5 redonda. Tudo bem, vamos adicionar mais alguns estilos. Vou criar algum espaço dentro do botão usando o preenchimento Vamos configurá-lo para um rem na parte superior e inferior e dois rems nos lados direito e esquerdo Além disso, vou aumentar o espaço entre as letras usando pontos de espaçamento lateral para correr Em seguida, contorne o botão usando o raio da borda. Vamos configurá-lo para cinco rem. E, finalmente, mude o tipo do grosseiro, torne-o Tudo bem, então o preço e a parte inferior são personalizados, e agora é hora de estilizar os botões de navegação Estou no botão Voltar e no botão de preço, que é colocado na parte frontal. Então, vamos selecionar o botão de navegação. Em primeiro lugar, vou colocá-lo no canto superior esquerdo do cartão Então, vamos definir sua posição como absoluta. Em seguida, defina as propriedades superior e direita. Vou configurar a rampa 2,5 para os dois . Ok, então o botão está posicionado. Agora vamos personalizá-lo. Vou definir o preenchimento para 0,5 RAM e depois mudar a cor de fundo E neste caso, vou usar o valor RGBA. Quero dizer a cor branca com a opacidade de 0,8. Em seguida, mude a cor. Vou usar sua cor cinza claro. Em seguida, arredonde o botão usando 0,3 RAM de raio de borda. E livre-se da borda padrão usando border none. Ok, finalmente, vamos personalizar o texto. Defina o tamanho da fonte, faça com que seja 1,5 RAM. Em seguida, defina a espessura da fonte para 600. Além disso, transforme o texto em maiúsculas. Em seguida, crie algum espaço entre as letras usando o espaçamento entre letras Aponte para a RAM. E, finalmente, faça o ponteiro do cursor. Ok, então os dois lados, eu estou na frente e atrás estão estilizados Tudo está preparado para fazer o cartão funcionar. Primeiro de tudo, precisamos exibir a parte frontal e traseira. Para isso, vamos usar a propriedade index. Vamos configurá-lo para dez. Depois disso, precisamos criar um ambiente 3D porque, como você sabe, a parte frontal e traseira devem se mover no espaço 3D Então, para criar o ambiente 3D, temos que usar uma propriedade chamada prospectiva. Vamos configurá-lo para 150 rampa. Em seguida, precisamos mover a parte traseira onde está a função translate Z. Então, vamos usar o Transform. Traduza Z com um valor de menos cinco corridas. Além disso, precisamos movê-lo um pouco para o lado direito. Para isso, vamos usar a função Translate X com o valor três rampa. Tudo bem, então os dois lados estão posicionados da maneira correta. Em seguida, vou diminuir a opacidade dos dois lados, mas com valores diferentes Vou fazer com que a opacidade da parte frontal seja 0,9. Quanto à parte traseira, vamos atribuir a ela a opacidade de 0,5 Tudo bem, agora estamos prontos para criar o evento de clique e fazer o trabalho árduo de usar JavaScript. Então, quando clicamos no botão, a parte traseira deve ser exibida, e também as opacidades e sombras Então, vamos para o arquivo script.js. Antes de tudo, precisamos selecionar os dois botões. Ambos têm o mesmo nome de classe, botão de navegação. E para selecioná-los, vou usar um método seletor de consulta all Dentro do parêntese, temos que especificar o nome da classe, que é o botão de navegação Esse método retorna uma lista de nós, que é um objeto semelhante a uma matriz Precisamos transformá-lo em uma matriz. Em seguida, temos que examinar os botões e anexar a ambos o manipulador de eventos onclick Para transformar a lista de nós em uma matriz, precisamos usar a matriz ES6 do método em vez de examinar os itens e anexar a eles o manipulador de eventos ao clicar Vamos usar um dos métodos auxiliares de matriz chamado for-each Na verdade, esse método nos ajuda a executar a função para cada item da matriz separadamente. Temos que passar uma função de retorno de chamada, que deve receber um argumento E será o item atual da matriz. E agora precisamos anexar ao manipulador de eventos do item onclick Portanto, precisamos do item dot onclick. Temos que atribuir a ele uma função de seta. Tudo bem, então deixe-me explicar o que vamos fazer. Na verdade, vamos criar uma nova classe e CSS, que então serão atribuídos ao cartão a partir do JavaScript. Essa classe nos ajudará a definir novos estilos CSS, que devem ser aplicados nos lados frontal e traseiro com um clique Então, agora precisamos atribuir ao baralho de cartas uma mudança rápida. Será o nome da nova turma. Para selecionar o cartão, vou usar o DOM Navigation. Nesse caso, o item se refere ao botão de navegação. Em seguida, temos que subir um nível usando a propriedade do elemento pai. Em seguida, precisamos subir um nível novamente. E, finalmente, chegaremos ao cartão. Agora temos que usar uma propriedade chamada lista de classes, que armazena todas as classes que o elemento tem. Então temos que usar a célula do método de alternância. método toggle adiciona o nome da classe ao elemento se ele não existir e o remove do elemento se ele Finalmente, vamos inserir aqui o nome da classe. Mudança. Tudo bem, então isso é tudo sobre o JavaScript. Vamos voltar ao arquivo CSS e selecionar a alteração do nome da classe. Deve ser seguido pela parte frontal. Mas precisamos usar aqui um desses combinadores CSS chamado seletor Child, que é expresso pelo sinal maior que Na verdade, o seletor de filhos seleciona todos os elementos que são filhos de um elemento especificado Então, quando clicarmos no botão, o carro receberá uma nova mudança de classe e toda essa seleção será válida. Agora temos que definir os estilos que queremos atribuir à parte frontal ao clicar, ambos os lados trocarão suas posições, sombras, opacidades e a propriedade z index pela parte frontal. Precisamos aqui Transformar, Traduzir o Precisamos aqui Transformar, valor da função Z Também precisamos traduzir o valor X para três RAM. Em seguida, vem a sombra da caixa, onde os valores zero para ram, foreign e a cor 777 Em seguida, vou definir a opacidade para 0,5. Quanto ao índice Z, ele deve ser igual a zero. Tudo bem, em seguida, precisamos do mesmo para a parte de trás. Vou copiar esse código daqui e colá-lo abaixo. Com a parte traseira. Precisamos da parte traseira em vez da parte frontal. Vamos mudar os valores aqui. Precisamos de zero. E Stan novamente zero. Quanto à sombra da caixa, ela deve ter 0,5 rem em RAM. E a cor AAA. Em seguida, vou definir a opacidade para 0,9. Até o índice Z. Eu vou me livrar disso. Tudo bem? Se eu clicar no botão, cartão padrão funcionará bem. A única coisa que precisamos fazer é tornar o efeito mais suave Para isso, temos que usar a transição. Vamos inserir aqui a opacidade com uma duração de 0,4 s. Em seguida, precisamos transformar com a mesma E também box-shadow 0.4 s. Na verdade, poderíamos usar todas aqui em vez dessas propriedades Mas, ao todo, também incluiríamos o índice e isso quebraria o efeito. Ok, vamos copiar essa linha de código e colá-la na parte traseira também. Tudo bem, agora tudo funciona perfeitamente. Temos bons efeitos de transição interessantes. Na verdade, terminamos esta seção e é hora de seguir em frente e começar a construir a próxima. 76. Projeto 8 - Criar e personalizar a seção de depoimentos: A próxima seção será sobre as histórias, as histórias dos clientes. Vamos dar uma olhada no projeto finalizado. Portanto, temos dois clientes com suas histórias e o plano de fundo do vídeo. Então, 12, nesta parte, você poderá aprender como definir o vídeo como plano de fundo. Tudo bem, como sempre, vamos começar a criar a marcação HTML Na verdade, primeiro construiremos esse toróide e depois cuidaremos do plano de fundo do vídeo Vamos inserir novos comentários, histórias. Depois das histórias. E abra o elemento de seção Histórias de classe. Em seguida, precisamos de elementos div que envolvam as duas histórias. Então, vamos atribuir a ele um invólucro de histórias de classe. Então, no geral, teremos duas histórias. Vamos abrir desenvolvimentos que serão usados para criar e manipular o plano de fundo da história Então atribua a ela uma história de classe, seja G. E então coloque aqui esta torre em si. Vou abrir outra tag div com uma história de classe. Portanto, cada história consistirá em um título de imagem, o parágrafo. Vamos inserir aqui elementos IMG. No atributo de origem. Vou especificar o caminho da imagem dentro da pasta de imagens. Vou selecionar história, IMG one dot JPEG Então, como valor do atributo alt, vou colocar aqui a imagem do cliente. E, finalmente, vou adicionar aqui que o atributo de classe desvalorizaria a imagem da história Portanto, a imagem deve ser seguida pelo texto da história. Como dissemos, será o título e o parágrafo. Eles serão embrulhados pelo desenvolvimento. Então, vamos criar com textos de histórias de classe que inserem sua tag de cabeçalho H1 com o título da história do nome da turma Vou colocar aqui alguns textos. Digamos que esses foram os melhores dias deste ano. Em seguida, vou criar um parágrafo com o parágrafo da história da classe. E eu vou colocar aqui um texto fictício. Tudo bem, então essa é a primeira história. Precisamos de dois deles, então vamos duplicá-los uma vez e depois fazer algumas alterações Vou mudar o nome da imagem que vai armazenar img2 dot JPG Além disso. Mude o título aqui, certo? Eu gostei deles. Ótimo Tudo bem, então agora, isso é tudo sobre a marcação HTML Vamos começar a escrever um pouco de CSS. Vou inserir novos comentários, histórias. E histórias. Em seguida, selecione os elementos desta seção e crie algum espaço na parte superior e inferior usando o preenchimento Precisamos aqui de tan e depois zero nos lados esquerdo e direito. Depois disso, vamos selecionar o invólucro das histórias. Então, vou colocar as histórias no centro dessa ação. E eles devem ser colocados verticalmente. Para isso, vamos usar o Flexbox. Quero dizer display flex. Em geral, o display flex alinha os elementos lado a lado Portanto, temos que mudar a direção e fazer com que seja uma coluna. Portanto, precisamos de uma coluna de direção flexível. Então, para centralizar os elementos horizontalmente, precisamos alinhar Em seguida, vamos selecionar o plano de fundo da história. Tem className, story PG. Então, eventualmente, o plano de fundo da história será semelhante à cor branca. Mas agora, antes de cuidarmos do plano de fundo do vídeo, vamos deixar a cor de fundo das histórias em cinza claro para torná-la visível. Antes de prosseguirmos e adicionarmos mais estilos ao plano de fundo, vamos cuidar das imagens porque agora elas são duas maiores. Então, vou selecionar a imagem. Antes de tudo, vamos definir a largura e a altura. Vamos fazer com que os dois corram 20 vezes. Além disso, vou arredondá-los usando o raio da borda com o valor de Além disso, temos que usar o objeto. Nós abordaríamos Ok, vamos voltar ao plano de fundo. Eu vou criar algum espaço dentro dele. Para isso, vou usar estofamento. Vamos configurá-lo para cinco rem. Então, precisamos de algum espaço ao redor do fundo. Para isso. Vamos usar a margem e configurá-la também para cinco RAM. Certo? Depois disso, vamos aumentar a largura do plano de fundo, torná-lo 70% desta seção. E então crie algum efeito de sombra usando sombra de caixa com os valores zero para executar cinco rem. E como cor, vou usar o valor RGBA. Vamos colocar aqui 5013 vezes e depois a opacidade, 0,4. Tudo bem, então, passo a passo, a história parece melhor. Vamos dar uma olhada mais uma vez no projeto finalizado. Como você pode ver, a forma do plano de fundo é diferente. Está distorcido. E vamos conseguir isso usando a transformação com a função skew x. Na verdade, isso nos permite dimensionar o elemento acordo com o eixo x. Então, precisamos nos transformar. Em seguida, desvie a função x. E dentro dos parênteses, vou inserir 20 graus Então, como você pode ver, o fundo está distorcido, mas temos aqui um pequeno problema O conteúdo da história também está distorcido. Para corrigir isso, podemos distorcer a história em si no mesmo grau Então, vamos selecionar a história. E eu vou passar aqui Transform Skew x. E como valor, vou passar -20 graus Tudo bem, agora o problema está resolvido. Em seguida, vou colocar a imagem e o texto lado a lado Para isso, vamos usar o display flex. Depois disso, vamos personalizar o título e um parágrafo. Mas, além disso, acho que precisamos adicionar algum espaço entre a imagem e o texto. Então, vamos usar margin-right. Cinco. Vamos seguir em frente e selecionar os elementos do título. O nome da classe é Tori heading. Antes de tudo, vamos cuidar do tamanho da fonte. Vou fazer com que seja fibrina pontual depois transformá-la em Além disso, mude a cor. Nesse caso, vou usar a cor cinza. Por fim, vamos criar algum espaço na parte inferior usando a margem inferior com o valor de uma rampa Isso é tudo sobre o título. Vamos seguir em frente e selecionar o parágrafo, o parágrafo da história className Vamos aumentar o tamanho da fonte, torná-la 1,8 rem. Em seguida, mude a cor. Você vê sua coluna cinza claro. Tudo bem, então o título e o parágrafo parecem bons. Quero acrescentar aqui mais duas coisas. Vamos recuar um pouco o parágrafo e também criar algum espaço entre as letras, quero dizer, entre as letras do título e o parágrafo Então, vou selecionar seu elemento principal, que é div com um texto de história de classe Vamos usar aqui o espaçamento entre letras 0,1. Execute isso para recuar o parágrafo, vou selecionar sua primeira letra Para isso, precisamos usar um pseudo elemento chamado primeira letra Então, primeiro vamos selecionar Parágrafo e depois adicionar aqui pseudoelementos Primeira letra. Precisamos criar algum espaço no lado esquerdo. Portanto, use a margem esquerda com o valor de uma rodada. Tudo bem? Então isso é tudo sobre as histórias. Tudo está pronto para começar a trabalhar no plano de fundo do vídeo. Primeiro de tudo, vamos ao arquivo index.html e aderir à marcação HTML para o vídeo Vou abrir a tag div com um contêiner de vídeo de classe. Em seguida, temos que usar uma tag de vídeo, que na verdade é nova em HTML5 Vou atribuir a ele o vídeo className. Além disso, precisamos adicionar aqui alguns atributos. A primeira será a reprodução automática Esse atributo nos permite reproduzir o vídeo automaticamente. O próximo será silenciado. Ele reproduzirá o vídeo sem som. E, finalmente, precisamos de um loop que reproduza o vídeo sem parar. Depois disso, precisamos especificar a fonte do vídeo usando uma tag de origem que é, na verdade, a tag de fechamento automático Então, precisamos aqui de atributos de origem nos quais temos que especificar o caminho do vídeo. Ele é colocado na pasta Imagens. Além do atributo de origem, também precisamos usar um atributo de tipo, no qual devemos especificar o tipo do vídeo. Vou configurá-lo para uma barra de vídeo MP4. Tudo bem, como você pode ver, o vídeo está sendo reproduzido e agora precisamos cuidar de sua posição Vamos selecionar o contêiner e definir sua posição como absoluta. Precisamos posicioná-lo de acordo com o elemento pai, que é esta seção. Então, vamos adicionar a isso a posição relativa. Então, como o vídeo está em todo lugar como plano de fundo, vamos definir as propriedades superiores e as que faltam Vou definir os dois como zero. Além disso, temos que definir largura e altura. Defina os dois em 200 por cento. Além disso, vamos diminuir a opacidade, torná-la Tudo bem, a última coisa é adicionar alguns estilos, o vídeo em si, para manter a qualidade do vídeo Quero dizer, para evitar esticá-lo ou coisas assim, temos que usar os seguintes estilos Vamos selecionar o vídeo PG e atribuir a ele largura e altura. Ambos fixados em 100 por cento. Além disso, precisamos aqui da velocidade do objeto com cobertura de valor. Tudo bem, finalmente, vamos mudar a cor de fundo dessas histórias. Eu vou me livrar do histórico atual. Em seguida, vou definir a cor de fundo para RGBA. Vamos fazer uma pausa aqui 2383 vezes. E a opacidade de 0,85. Tudo bem? Como você pode ver, tudo parece muito bom. E, na verdade, terminamos de trabalhar nesta seção. Se você quiser encontrar alguns vídeos gratuitos, visite o site chamado cover with two rs.co, onde podemos encontrar muitos vídeos gratuitos diferentes Tudo bem, isso é tudo sobre essas histórias. Vamos seguir em frente e passar para a próxima seção. 77. Projeto 8 - crie e personalize a seção de contatos com fundo animado: Primeiro de tudo, vamos dar uma olhada no projeto finalizado. Então, depois dessa seção de turistas, vamos construir a seção de contato. No centro desta seção, temos alguns campos de entrada com um botão de envio. No topo do formulário, temos um título entre em contato conosco. Além disso, uma seção tem um plano de fundo em tela cheia com alguns efeitos de animação Como você pode ver, a cor está mudando e isso cria algo como o efeito diurno e noturno. Tudo bem, então é isso, o que vamos construir. Vamos prosseguir e inserir novos comentários nos contatos do arquivo HTML e, em seguida, finalizar o contrato. Em seguida, vou abrir o elemento da seção com um contato com o nome da classe. Portanto, dentro desse elemento da seção, teremos duas partes diferentes. O primeiro será um título. Quanto ao segundo, devem ser os elementos formados. Vamos abrir a tag de cabeçalho H1, que terá nome da turma e cabeçalho do contato E depois insira você, entre em contato conosco. Em seguida, precisamos de elementos de formulário com o formulário de contato da turma. Então, dentro desse formulário, teremos três grupos diferentes de entradas e um botão de envio Então, vamos abrir tag div com o grupo de entrada da classe O primeiro grupo que terá o rótulo e a entrada. Vamos inserir seu nome completo com os asteriscos. Em seguida, vou abrir a tag de entrada com texto digitado. Em seguida, vou adicionar aqui atributo de classe com uma entrada de conflito de valor. E também precisamos de um espaço reservado com um texto. Digite seu nome. Tudo bem, então o segundo grupo será um pouco diferente. Ele consistirá em dois grupos de entrada diferentes. Vou abrir a tag div com grupos de entrada de uma classe. Observe que estou usando um grupo no plural. Então, agora precisamos criar aqui dois grupos de entrada diferentes. Vamos pegar esse código daqui e colá-lo duas vezes. Vou alterar rótulos, tipos e também atributos de espaço reservado Precisamos do seu e-mail. Em seguida, eles digitam e-mail. E também vou alterar o valor do atributo de espaço reservado Precisamos inserir seu e-mail. Quanto ao segundo grupo de entrada , será para o telefone. Vamos mudar aqui. O valor do espaço reservado que faz atender o número de telefone. Tudo bem, agora é hora de criar o terceiro grupo de entrada Ele consistirá em um rótulo e uma área de texto. E depois de abrir a tag div com a classe input-group, insira sua etiqueta com Portanto, o rótulo será seguido pela área de texto. Vou adicionar a ele um atributo de classe com uma área de texto do formulário de valor. E também precisamos de um espaço reservado. Sua mensagem aqui. Tudo bem, então a última coisa que queremos fazer é criar o botão de envio Eu vou fazer isso usando um elemento de entrada. Precisamos digitar submit e, em seguida, o valor submit. E também vou adicionar aqui o atributo de classe para btn. Tudo bem, então a marcação HTML está pronta. Todos os elementos foram criados e agora temos que seguir em frente e começar a escrever um pouco de CSS. Vou inserir novos comentários para contato. E de contrato. Vamos selecionar o elemento da seção e criar algum espaço na parte superior e inferior usando o preenchimento Vou preencher 15 RAM na parte superior do que zero no lado direito, 20 RAM na parte inferior e zero no lado esquerdo Além disso, vou colocar o conteúdo no centro usando o centro de alinhamento de texto Ok, em seguida, vou definir a imagem como plano de fundo. Vamos especificar a parte da imagem na função URL. Vou selecionar uma bruxa chamada Fale conosco G dot PNG. Então, precisamos centralizar e não repetir Além disso, vou definir o tamanho do plano de fundo. Vamos fazer com que cubra. Ok, então agora, isso é tudo sobre o elemento da seção. Vamos continuar e personalizar o título. Vamos selecioná-lo. Primeiro, vamos aumentar o tamanho da fonte. Faça com que sejam sete RAM. Em seguida, vou deixar o texto um pouco mais ousado usando a espessura da fonte com um valor de 700, transformar o texto em maiúsculas E também crie algum espaço entre as letras usando espaçamento entre letras, 0,5 rem Em seguida, vou mudar a cor. Vamos usar sua cor branca. Em seguida, vou adicionar um pouco de sombra ao texto usando sombra de texto com os seguintes valores, 01 RAM para RAM e a cor preta. E, finalmente, crie algum espaço na parte inferior usando margem, fundo, um bonde Ok, então o título é personalizado. No momento, não é muito viável, mas quando adicionarmos uma animação ao fundo, ela ficará muito melhor Em seguida, temos que cuidar do elemento do formulário. Então, vamos prosseguir e selecioná-lo. E antes de tudo, vamos definir sua largura e altura. Vou definir sua largura para sete para correr. Quanto à altura, vamos fazer 50 RAM depois mudar a cor de fundo. Nesse caso, vou usar a cor branca. Mas com o valor RGBA, precisamos colocar aqui 5053 vezes E também vou adicionar aqui a opacidade 0,95. Ok, vamos considerar que o formulário está colocado no lado esquerdo e precisamos centralizá-lo. Para isso. Eu vou usar margem. Tudo bem, seguir, vou centralizar o conteúdo dentro do formulário. Para isso, vou atribuir ao elemento do formulário um centro de classe O conteúdo é centralizado, mas os grupos de entrada são colocados lado a lado E para corrigir isso, vamos mudar a direção do fluxo e deixá-lo esfriar Ok? Depois disso, vou fazer o formulário ligeiramente arredondado. Para isso, vou usar raio de borda com valor de 0,5 E também vamos adicionar alguma sombra usando sombra de caixa com valores 01, RAM, três rem e a coluna preta. Ok, isso é tudo sobre o formulário. Por enquanto, vamos selecionar o grupo de entrada. Primeiro de tudo, vamos definir sua largura em 200 por cento. Então eu vou usar o flexbox. Precisamos criar um contêiner flexível de grupo de entrada usando display flex E também precisamos mudar a direção. Vamos fazer uma coluna. Ok? Então, agora, a primeira entrada e a área de texto estão esticadas e ocupam toda a largura do formulário Quanto ao segundo e terceiro elementos de entrada, eles são partes do elemento de grupos de entrada. Então, vamos selecionar grupos de entrada e tornar sua largura 100%. Tudo bem, agora todas as entradas e a área de texto estão esticadas, precisamos de algum espaço dentro do formulário E isso cria espaço usando preenchimento com o valor de cinco rodadas Ok? Agora temos um resultado melhor, mas na verdade não é o que queremos. Precisamos colocar o e-mail e o telefone que você coloca lado a lado E para isso, vou usar novamente o display flex. Agora precisamos de algum espaço entre os campos de entrada para isso, vamos adicionar primeiro, diminuir sua largura. Então, vou selecionar grupos de saída, seguidos pelo grupo de entrada. Vamos prosseguir e definir com 248,5 por cento. Depois disso, vou atribuir aos grupos de entrada, justificar o espaço de conteúdo Tudo bem, então as entradas estão alinhadas e, em seguida, teremos que personalizá-las Antes de tudo, crie algum espaço entre os grupos de entrada. Vamos atribuir à margem do grupo de entrada com valores um rem na parte superior e inferior e zero nos lados direito e esquerdo Ok, vamos continuar e personalizar as entradas e também a área de texto. Eu vou selecionar os dois. No início. Vamos selecionar as entradas Em seguida, duplique essa linha de código e altere a entrada na área de texto. Em primeiro lugar, vou criar algum espaço dentro dos campos. Vamos usar para esse preenchimento. Na verdade, precisamos de um pouco mais de espaço na parte superior porque vamos colocar as etiquetas lá. Portanto, precisamos aqui dos valores da seguinte maneira. A primeira será de três rampas e o resto dos valores será de uma corrida Ok, a seguir, vamos mudar a cor de fundo. Vamos usar sua cor secundária. Além disso. Defina a borda. Vamos adicionar aqui 0,1 rem sólido e novamente a cor secundária. Tudo bem, então os campos parecem muito melhores. O que precisamos para adicionar a eles mais alguns estilos? Vamos diminuir o tamanho da fonte. Faça disso um argumento para a RAM. Também mude a cor. Vamos usar aqui a cor cinza claro. Em seguida, vou criar algum espaço entre as letras. Vamos fazer com que seja 0,1 RAM. E, finalmente, vamos fazer a entrada e a área de texto ao redor dela usando raio de borda 0,5 Tudo bem, então estamos quase terminando com os campos de entrada. Vou personalizá-los de acordo com o foco. Quero dizer, uma vez que nos concentramos nos campos , quero exibir a borda. Portanto, temos que selecionar uma entrada de ganho e a área de texto, mas com uma pseudoclasse de foco Vamos adicionar aqui pontos de borda, um sólido. E a coleira C. C. C. também permite que você veja sua pequena transição para tornar o efeito mais suave Borda direita e duração de 0,3 s. Tudo bem, então é isso em relação aos campos de entrada e à área de texto Agora temos que cuidar dos rótulos. Vou personalizá-los e colocá-los dentro dos campos. Então, vamos selecioná-los primeiro, vamos definir o tamanho da fonte, fazer com que seja um ponto para a RAM. Além disso, altere a espessura da fonte. Faça com que seja 600. Em seguida, vou transformar o texto em maiúsculas. Em seguida, use espaçamento entre letras, 0,1 quarto. E por último, mude a cor. Faça com que seja ótimo. Tudo bem, então os rótulos estão bonitos, e agora eu tenho que colocá-los dentro dos campos que precisamos para tornar sua posição absoluta Em seguida, precisamos posicionar em relação ao grupo de entrada porque precisamos posicionar o rótulo acordo com o elemento pai. Em seguida, vamos definir as propriedades superior e esquerda. Ambos em uma rodada. Tudo bem, isso é tudo sobre os rótulos. Eles parecem bonitos e, na verdade, resta um elemento para personalizar, que é um botão de envio. Então, vamos seguir em frente e selecionar esses elementos. Em primeiro lugar, vou definir sua largura. Vamos configurá-lo para 100%. Em seguida, crie algum espaço dentro do elemento usando o preenchimento com o valor de uma RAM Em seguida, vou definir o tamanho da fonte como 1,6 RAM. Também crie algum espaço entre as letras para que precisemos de algum espaço na parte superior usando margem, topo e uma rampa. E depois mude a cor de fundo, torne-a cinza claro. Tudo bem, então essa é a aparência do botão de envio no momento Precisamos adicionar mais alguns estilos. Vamos mudar a cor do texto. Eu vou fazer com que seja branco. Além disso, precisamos arredondar o botão usando 0,5 RAM de raio de borda . Em seguida, livre-se da borda padrão usando border none. E finalmente, altere o tipo do curso e faça um ponteiro. Tudo bem, então a última coisa em relação ao botão é criar um efeito de foco. Vou mudar ligeiramente a cor de fundo ao passar o mouse Então, vamos selecionar Formulário btn com o mouse. E para mudar a cor de fundo, torne-a cinza. Além disso, vamos usar aqui a transição. Precisamos da cor de fundo e da duração de 0,4 s. Ok, agora estamos quase terminando antes de prosseguirmos e criarmos a animação em segundo plano. Quero mencionar aqui um pequeno problema. Como você sabe, por padrão, você pode aumentar o tamanho da área de texto. E se eu fizer isso o layout do elemento do formulário ficará confuso Então, para evitar isso, vou definir a altura e a largura máximas para a área do texto. Vamos prosseguir e selecioná-lo. Vamos definir a altura máxima para 15. Corra. Quanto à largura máxima, vamos torná-la 100%. Tudo bem, agora tudo funciona perfeitamente com o estilo. Terminamos e agora temos que criar uma animação. Na verdade, a animação será simples. No geral, teremos cinco etapas diferentes e mudaremos a cor de fundo em cada etapa. Então, vamos continuar e criar quadros-chave. Vou nomear a animação como contact PG. Então, em 0%, vou fazer a cor de fundo 3D, 3D, 3D. Então, em 25%, vou fazer com que seja c e, d h e. Para. Em seguida, teremos 50 por cento. Quanto ao valor , será 181 Às três. Em seguida, vem 75 por cento. Eu vou fazer a cor de fundo ff78, 42. E a última etapa, quero dizer, em 100%, vou criar a cor de fundo novamente. 3D, 3D, 3D. Ok, então isso é tudo sobre os quadros-chave. Eles estão prontos. Vamos atribuir a propriedade de animação aos elementos desta seção Primeiro, precisamos especificar o nome da animação, que é contact BG. Em seguida, vamos definir a duração. Agora mesmo. Vou configurá-lo para 10 s, mas vamos alterá-lo mais tarde. Além disso, precisamos executar a animação infinitamente. Então, temos que escrever aqui infinito. Tudo bem, como você pode ver, a animação funciona bem Ele roda um pouco mais rápido. Então, vamos mudar a duração. Faça 35 s. Tudo bem, vamos ver a seção de contato Terminamos de trabalhar nisso e agora temos que seguir em frente e cuidar do filtro 78. Projeto 8 - Criar e Estilo de Rodapé: Primeiro, vamos inserir novos comentários em HTML. Rodapé e rodapé do rodapé. Em seguida, abra o rodapé HTML5, elemento semântico com o rodapé elemento semântico com O rodapé consistirá em duas partes diferentes. O primeiro será uma lista de alguns itens de navegação. Quanto à segunda parte, deve ser um parágrafo para alguns textos de direitos autorais. Se passarmos o mouse sobre os itens, eles girarão e obteremos algum efeito 3D usando sombra À primeira vista, parece que os itens estão subindo. Vamos continuar e criar uma lista. Ele deve ser representado pelo elemento div e alguns links Vamos abrir a tag div e atribuí-la à lista de rodapés da classe. Em seguida, insira aqui o elemento de link com link do rodapé da classe e com um texto Então, no geral, teremos cinco itens diferentes. Vamos duplicá-lo quatro vezes e alterar o conteúdo. O segundo item será voltado para. Em seguida, teremos sobre nós a oferta e o conteúdo. Ok, isso é tudo sobre a primeira parte. Vamos seguir em frente e criar um parágrafo. Vamos atribuir ao elemento p o parágrafo do rodapé e colocar aqui alguns conteúdos Direitos autorais. Então, para o sinal de direitos autorais, vou usar a entidade HTML5 Precisamos de comercial, cópia, ponto e vírgula, depois codificar Todos os direitos reservados. Tudo bem, isso é tudo sobre a marcação. Vamos continuar e adicionar um pouco de CSS. Em primeiro lugar, vou inserir novos comentários. Rodapé, Rodapé. Em seguida, selecione o elemento de rodapé. E antes de tudo, vamos mudar a cor de fundo. Vou usar a cor cinza. E também quero criar algum espaço dentro do filtro usando preenchimento Vamos definir como quatro, correr em cima de zero no lado direito até Ram na parte inferior e zero no lado esquerdo. Tudo bem, a seguir vou colocar o mínimo no centro. E para isso, vamos selecionar a lista de rodapés. Vou fazer com que seja um contêiner flexível usando o display flex. E então, para colocar os itens no centro, vamos usar o centro de conteúdo justificado. Tudo bem, então os itens da lista são colocados no centro e agora podemos personalizá-los. Vamos prosseguir e selecionar o link. No início. Vamos aumentar o tamanho da fonte, aumentá-la. Em seguida, mude a cor. Faça com que seja branco. Além disso, quero criar algum espaço nos lados direito e esquerdo dos itens usando margem com um valor de 0,2 rampa Depois disso, vamos criar algum espaço dentro das asas usando estofamento Mas antes disso, para tornar esse espaço visível, vamos mudar a cor de fundo dos links por um tempo Vamos torná-lo vermelho. E então crie algum espaço. Use estofamento Vamos definir o espaço na parte superior e inferior de 2,3 RAM. E depois três rem nos lados direito e esquerdo. E também aumente o espaço entre as letras usando o espaçamento entre letras rampa de 0,3. Tudo bem, isso é tudo sobre os links Vamos mudar a cor do plano de fundo. Faça com que seja ótimo. Ok, antes de passarmos para o parágrafo, vou adicionar um efeito de foco aos links Vou girá-los e também adicionar sombra à caixa ao passar o mouse Então, vamos continuar e selecionar o link do rodapé com o mouse. Então eu vou usar a função Transform, Rotate. Vamos girar os links em menos dez graus. E também use uma sombra de caixa com os valores zero para obter três rem e a cor preta E, finalmente, vamos usar a transição. Precisamos aqui de toda a duração de 0,2 s. Ok? Então, se passarmos o mouse sobre os links, obteremos um efeito agradável e interessante Tudo bem, isso é tudo sobre os links. Vamos prosseguir e cuidar do parágrafo. Vamos selecioná-lo. Primeiro. Vou alinhar o texto no centro Em seguida, para encontrar o tamanho da fonte, faça com que seja 1,5 em execução. Mude a cor. Nesse caso, vou usar uma cor secundária. Então, vamos criar algum espaço entre as letras. Faça com que aponte para a rampa. E, finalmente, vou criar algum espaço na parte superior usando a margem superior cinco ou n. Ok, então, onde terminamos o rodapé Era meio simples, mas acho que ficou bonito Na verdade, passo a passo, estamos nos movendo para o final deste projeto, mas ainda temos muito trabalho Em seguida, temos que começar a trabalhar na navegação 79. Projeto 8 - Criar e fazer trabalho de navegação: Primeiro de tudo, vamos dar uma olhada no projeto finalizado. Como você pode ver no canto superior esquerdo da página da web, temos um ícone de menu fixo Se eu clicar nele, a saída será exibida. Os links estão vindo de cima para baixo com bons efeitos de transição. Eles mudam a opacidade ao passar o mouse. E agora também quatro tem seu plano de fundo em tela cheia ou apresentado pela imagem. Além disso, temos o botão de fechamento x no canto superior direito do nanoporo E se eu clicar nele, voltaremos à página principal. Ok, então é isso, o que vamos construir. Vou inserir essa parte logo acima do cabeçalho. Então, vamos inserir novos comentários. Agora faz parte de Napa. Em seguida, abra um elemento div e atribua a ele algumas classes O primeiro será aberto para o ícone. Quanto ao segundo, deveria ser. Agora, para o ícone. Os ícones do menu consistirão em três linhas. Será representado pelos desenvolvimentos. Então, vamos abri-lo com a linha de classe e duplicar essa linha duas vezes Em seguida, precisamos abrir outros elementos div, que seriam o invólucro Então, atribuído a cada cluster. Agora, para o wrapper, em seguida, precisamos do elemento nav com a classe. Agora, dentro do elemento de navegação, teremos duas partes diferentes O primeiro também será o botão de fechamento x. A segunda, deve ser a lista de navegação. Então, vamos prosseguir e abrir elementos div. E atribuído a ele cruza de perto. Agora por ícone e agora por acre. seguida, instituiu duas linhas, abriu o desenvolvimento e atribuiu a ele duas classes. A primeira será a linha de classe comum. Quanto ao segundo, que deveria ser o de videira. Em seguida, duplique essa linha de código e altere o nome da classe que precisamos aqui, linha dois Tudo bem, vamos em frente e inserir a segunda parte, quero dizer a lista dos itens de navegação Vamos abrir os desenvolvimentos e atribuí-los à lista de navegação da classe Em seguida, passe alguns elementos de link. Vamos atribuir a ela um nome de classe, link de navegação. E insira aqui o primeiro item de navegação na página inicial. Vamos duplicar o elemento de link quatro vezes e alterar os itens O segundo será em direção a. Em seguida, falaremos sobre nós e entraremos em contato. Tudo bem, então isso é tudo sobre a marcação HTML. Vou começar a escrever um pouco de CSS. Vamos inserir novos comentários logo após os estilos comuns de que precisamos aqui, a barra de navegação Em seguida, fim da barra de navegação. Em seguida, selecione o ícone não para. Na verdade, esse nome de classe pertence aos dois botões. Vamos definir a largura e a altura. Vou colocar os dois na rampa 5,5. E também altere a cor de fundo. Faça com que seja branco. No momento, os dois botões estão visíveis. No momento, é difícil distingui-los. Portanto, seria melhor ocultarmos o segundo botão e a lista. Porque agora vamos trabalhar na primeira parte. Então, vamos selecionar nap ou wrapper e, atribuído a ele, não exibir nenhum Tudo bem, vamos em frente e posicionar o ícone. Vou selecioná-lo com sua classe individual, que agora está aberta para o ícone. Vamos seguir em frente e definir sua posição para corrigir. Em seguida, defina as propriedades superior e esquerda. Vou configurar os dois para 6,5 de execução. Ok, como vejo agora, o ícone não está visível porque acabou atrás do cabeçalho. E para corrigir isso, vamos usar a propriedade z-index e configurá-la como 200 Tudo bem, agora o problema está resolvido. Em seguida, vou fazer com que o ícone seja arredondado. Na verdade, precisamos que os dois botões sejam arredondados. Então, vamos atribuir à NAACP ou ao ícone o raio da borda E também mude o cursor, faça com que ele aponte. Ok, a seguir, vou cuidar das linhas. Em primeiro lugar, vamos exibi-los. Vou selecionar linhas usando a classe comum. Agora, para o vinho Icon. Vamos definir sua altura, fazer com que aponte para correr e, em seguida, definir a largura para 3,5 rem. E também altere a cor de fundo, cinza claro. Então, agora, os itens são colocados um em cima do outro. Precisamos de algum espaço entre eles e também temos que colocá-los no centro do olho. Para isso, vou usar nossa classe predefinida Center. Precisamos dessa classe para os dois ícones Além disso, precisamos mudar a direção da flexão e torná-la uma coluna Porque o display flex alinha os itens flexíveis horizontalmente em Finalmente, precisamos de espaço entre as linhas para isso. Vamos selecionar novamente online, mas agora com open, agora para a classe Icon e criar espaço usando margem com os valores do ponto 3.0. Tudo bem, então o primeiro cochilo ou ícone é personalizado e agora temos que seguir em frente e começar a trabalhar na Então, no momento, está oculto. Então, vamos nos livrar do display none. O invólucro ocupará toda a janela de visualização. Eu fiz 100% da largura e altura da janela de visualização. Então, vamos definir com 200 janelas de visualização de largura. Quanto à altura, vamos fazer com que seja 100 de altura da janela de visualização. E também altere a cor de fundo. Vou usar aqui o valor RGBA com a cor branca. Vamos colocar aqui 253 vezes. E também ressalta a opacidade. Tudo bem, então agora, essa é a aparência de uma soneca ou embalagem Precisamos definir qual posição ela deveria ter sido posicionada de forma fixa. E também vou definir left, bots e propriedades, ambos como zero Então, agora, o invólucro acabou atrás do cabeçalho. E agora vamos usar novamente a propriedade index para corrigir esse problema. Vamos definir o índice para 300. Ok, vamos seguir em frente e começar a trabalhar na própria napa. Quero dizer, o elemento nav. Vamos selecioná-lo e definir a largura e a altura. Vou definir os dois em 200% e também mudar a cor de fundo. Vamos usar seu azul royal. Então, agora a porta now ocupa toda a largura e altura da janela de exibição Precisamos adicionar algum espaço ao redor, como no caso do cabeçalho. Lembre-se de que a quantidade de espaço em cada lado é igual a 3,5 rampa. Portanto, vamos definir o preenchimento e atribuir a ele o primeiro valor, 3,5 O espaço é criado. Mas, como você pode ver, temos um pequeno problema no lado direito. Aqui temos uma barra de rolagem. Agora, o rapper posicionou, defina um fixo e não leva em consideração a barra de rolagem Precisamos aumentar a quantidade de espaço no lado direito. O tamanho da barra de rolagem é igual a 20 pixels. Então, precisamos fazer o preenchimento no lado direito, 5,5 rem Então precisamos de 3,5 rodadas duas vezes. O problema está resolvido. Vamos prosseguir e cuidar do fechamento. Agora, para o ícone, ele será colocado no canto superior direito do Napa Então, vamos selecioná-lo e tornar sua posição absoluta. Para posicionar o ícone acordo com seu elemento principal, vamos atribuir à Napa a posição relativa Em seguida, defina as propriedades superior e direita. Vou definir a propriedade principal para 2,5 RAM. Quanto à posição correta, vamos fazer três rodadas. Ok, então o ícone está posicionado. Vamos posicionar essas linhas da maneira correta e exibir o x. Primeiro, vamos selecioná-las com o nome de custos comuns, feche agora para linha Icon e torne a posição absoluta. Agora precisamos girar cada uma das linhas em 40 graus, mas com direções opostas Vamos seguir em frente e selecionar a primeira linha. Com a linha cruzada um. Precisamos usar a função Transform, Rotate. Vamos colocar aqui quatro graus. Então eu vou duplicar todo esse código, mudar a classe que precisamos aqui, linha dois E em vez de 40 graus -40 graus. Tudo bem, então o ícone do snapper é personalizado e é hora de seguir em frente e mudar o plano de fundo, por enquanto Não precisamos mais desse fundo azul. Então, vamos nos livrar disso e inserir aqui. Gradiente linear com valores RGBA. Vou usar a cor preta duas vezes, mas com opacidades diferentes E no primeiro caso, a opacidade será 0,5. Como Paul, o segundo valor RGBA. Precisamos da opacidade 0,3. Em seguida, vou especificar o URL. Vou selecionar uma imagem chamada Napa, PNG ou JPEG. É classe na pasta de imagens. Então, precisamos centralizar e não repetir e também definir o tamanho do fundo. Vamos fazer com que cubra. Tudo bem, então a imagem está definida como plano de fundo e agora é hora de cuidar da lista de navegação No momento, os links não estão bem visíveis. Então, primeiro de tudo, vamos selecioná-los usando a classe naftaleno Aumente o tamanho da fonte, faça três rampas. Em seguida, altere a espessura da fonte. Vou criar uma pasta de links. Vamos definir o peso da fonte para 700. Mude a cor, torne-a branca e transforme o texto em maiúsculas Ok, agora podemos ver os links. E a próxima coisa que eu quero fazer é definir a cor de fundo para cada item de navegação. Podemos fazer isso a partir do CSS. Quer dizer, podemos selecionar cada um dos itens com pseudoclasse infantil e atribuir a cada um deles uma cor de fundo diferente. Mas eu não vou fazer isso com CSS. Vamos usar JavaScript. Em primeiro lugar, vou criar uma variedade de cores. Vamos colocar aqui cinco cores diferentes. O primeiro será 6495 ED. Então, o próximo será sete, f, f, f, D4 Então eu vou usar F fa078. Em seguida, precisamos de f08, 080. E a última cor será f e, e, e. Está bem? Que precisamos selecionar todos os links. Em seguida, precisamos examiná-los e atribuir a cor de fundo a cada um dos itens Então, vamos selecioná-los usando o método seletor de consultas all Vamos especificar aqui o nome da classe naftaleno. Portanto, nesse caso, o método seletor de consulta all retorna objetos semelhantes a uma matriz, que é chamado Vou transformar a lista de nós em uma matriz. Em seguida, percorreremos a matriz usando o método foreach Para transformar a lista de nós em uma matriz, precisamos usar matriz do método Depois disso, podemos usar o método forEach. Pois cada um nos permite percorrer uma matriz e executar uma função. Para cada item da matriz, precisamos passar uma função de retorno de chamada, que pegará um parâmetro e será o item atual Em seguida, precisamos definir a cor de fundo. Para isso, vou usar propriedades de estilo e texto CSS. Precisamos de texto css de ponto no estilo ponto do item. Então, agora precisamos passar aqui algum código CSS. Para isso. Vou usar cadeias de caracteres de modelo ES6. Precisamos abrir os backticks. Em seguida, insira aqui a cor de fundo. Então, agora precisamos usar os valores da matriz de cores separadamente. Em cada iteração, precisamos definir o número de índice das cores E para isso, vou criar uma nova variável chamada I. Percebi que usei aqui a declaração let. Essa variável será algo como contador. Por padrão, ele deve ser igual a zero. Agora, abaixo, temos que usar um sinal de $1 com chaves encaracoladas Agora temos que passar sua matriz de cores. E entre colchetes, precisamos indicar o número do índice Portanto, precisamos passar aqui i, seguido pelo operador de incremento, que é expresso com dois sinais de adição Na primeira iteração, o número do índice será zero e a primeira coluna será usada Então, na segunda iteração, o contador se tornará um, e a segunda coluna será usada e assim por diante Como você pode ver, cada item de navegação tem sua própria cor de fundo. Em seguida, vou expandir os links até o fundo do nanoporo Então, vamos em frente e selecionemos o romancista. Faça sua altura 100 por cento. Além disso, vou fazer com que seja um contêiner flexível usando o display flex Então, agora os itens são esticados de cima para baixo e ocupam 100% da altura Em seguida, precisamos cuidar da largura. Esses itens também devem remover toda a largura. Então, vamos definir a largura e torná-la 100%. Tudo bem, então agora, tudo está indo bem Quero colocar esses itens no centro dessas colunas. Para isso, vamos atribuir a cada um dos elementos de link um centro de classe Ok, depois disso, vamos diminuir a opacidade, torná-la C. A opacidade também afetou o botão. Então, vamos definir a propriedade do índice Z para o botão e torná-la 300. Tudo bem, a seguir vou criar um efeito de foco. Quero mudar a cor dos itens e também aumentar a opacidade ao passar o mouse Então, vamos continuar e selecionar não vincular com o mouse. Faça com que sua opacidade seja uma. E também mude a cor, torne-a primária. Além disso, vou usar a transição em que os valores são todos e 0,3 s. Ok? Portanto, o efeito de foco funciona bem. E agora vou fazer os ícones funcionarem. Então, por padrão, vou colocar agora invólucro abaixo e ocultá-lo Para isso, vamos mudar o valor da parte inferior para uma superior, superior e torná-la -100 por cento E também torne a opacidade zero. Portanto, o invólucro da barra de navegação está oculto. Em seguida, quero colocar os itens de navegação acima porque, quando clicamos no ícone do menu, eles devem se mover de cima para baixo. Para isso, vamos atribuir ao nada a posição relativa. Em seguida, defina a posição superior. Faça com que seja -100%. Certo? Agora temos que usar JavaScript. Na verdade, criaremos uma mudança de classe em CSS, que será adicionada ao contêiner a partir do JavaScript. Então, vamos criar uma variável na qual vou armazenar o contêiner. Vamos chamar esse contêiner de variável e , em seguida, selecionar esses elementos usando o método seletor de consulta Agora temos que selecionar o ícone do menu e anexá-lo ao evento de clique. Vamos selecionar o elemento novamente usando o método querySelector Vou especificar o nome da classe, abrir um ícone de barra suficiente. E então isso é anexado a ele. Ouvinte de eventos. Precisamos aqui clicar no evento e na função de seta. Então, quando clicamos no ícone do menu, precisamos adicionar à alteração da classe do contêiner. Portanto, precisamos inserir sua lista de classes de pontos de contêiner. Como você sabe, a lista de classes armazena todas as classes que o elemento tem. Ele deve ser seguido pelo método add, que adiciona classe à lista de classes. E o parêntese eu especifico a mudança do nome da classe. Ok, isso é tudo sobre o primeiro item. Vamos passar para o segundo item. Quero dizer, o botão de fechamento x. Depois de clicarmos nele, precisamos remover a alteração de classe do contêiner. Então, vamos continuar e duplicar esse código. Em seguida, altere o nome da classe que precisamos aqui, feche. Agora, por ícone. E também em vez de adicionar método, use, remova. Tudo bem, fale sobre JavaScript. Vamos voltar ao CSS. Agora temos que criar a mudança de classe. Em seguida, precisamos selecionar o invólucro de Napa. Para exibir o rapper de volta, precisamos definir sua posição inferior como zero. E precisamos aumentar a opacidade. Temos que fazer um. Então, novamente, precisamos mudar a classe. Mas para o link de navegação, agora, como você sabe, os links são colocados acima e precisamos tornar a posição superior zero Então, vamos selecionar Alterar, seguido por um link substantivo e tornar a posição superior zero Então, se eu clicar no ícone do menu, então na tela inoperável, e se clicarmos no X, ela deverá Então, na verdade, estamos quase terminando. Precisamos personalizar um pouco os efeitos. Além disso, precisamos exibir os itens de navegação em ordem com alguns atrasos Vamos atribuir a Napa uma transição rápida. Com os seguintes valores. Precisamos de 0,5 s. No fundo, depois da opacidade, 0,2 s. Precisamos da mesma transição aqui embaixo, mas com algum atraso Então, vamos pegar essa linha de código, colá-la aqui e, aqui, atrasar 0,25 s. Agora, se eu clicar no ícone, o número será exibido com uma transição suave Mas, na verdade, não é isso que queremos. Precisamos exibir os itens de navegação na ordem. Portanto, precisamos fazer transições para cada um dos itens, mas com um tempo de atraso diferente Vamos continuar e selecionar novamente alterar. Seguido por agora link com a criança da pseudoclasse F. Especifique aqui o primeiro item, um, e insira sua transição com os seguintes valores. Precisamos da propriedade superior com duração de 1 s e o tempo de atraso de 0,4 s. Depois, a opacidade de 0,3 s. A cor também é de 0,3 s. Vamos duplicar esse código quatro vezes e alterar os números dos itens e o tempo de atraso Para o segundo item, precisamos de 0,6 s. Em seguida, para o terceiro item, permite que você veja seus 0,8 s. Para o quarto item, precisamos de 1 s. Quanto ao último item que fiz o quinto item, precisamos atrasar 1,2 s. Tudo bem, então vamos ver os itens em exibição em E, na verdade, estamos quase terminando. A única coisa que precisa fazer é ocultar os itens enquanto são colocados. Para isso, vou usar overflow hidden, mas de acordo com a direção y. Tudo bem, agora tudo funciona perfeitamente. E, na verdade, terminamos nosso projeto. Todas essas seções são construídas e personalizadas. E, finalmente, temos que tornar o projeto responsivo a diferentes tamanhos de tela 80. Projeto 8 - Torne o projeto responsivo: Tudo bem, antes de tudo, vamos inspecionar a página e ativar o modo responsivo Como você sabe, construímos este projeto com base na resolução. E agora vou encontrar pontos de interrupção diferentes nos quais precisaremos fazer algumas mudanças. Ao longo desta parte, usaremos consultas de mídia CSS. Então, vamos prosseguir e encontrar o primeiro ponto de interrupção. Acho que precisamos fazer algumas alterações quando reduzirmos a largura da janela para menos de 1.200 pixels Nos pontos de interrupção, vou colocar cartões, principalmente em uma coluna Vamos verificar a parte nula. Parece bom. A única coisa que vemos aqui é um pequeno espaço no lado direito. Vemos esse espaço porque, no modo responsivo, a barra de rolagem não está visível E essa é a razão desse problema. Portanto, você pode simplesmente ignorá-lo porque em dispositivos menores ele ficará bem. Vamos criar uma consulta de mídia CSS. Vou especificar a largura máxima como 1.200 pixels. Em seguida, selecione o invólucro de cartões. Mude a direção da flexão. Eu vou fazer uma coluna. E também precisamos de um centro de alinhamento de itens para colocar os cartões no centro Tudo bem, então as cartas são colocadas verticalmente, e agora temos que adicionar algum espaço entre elas Então, vamos selecionar o cartão em si e adicionar uma margem enorme. Três rem na parte superior e inferior e zero nos lados esquerdo e direito. Tudo bem, finalmente, vou aumentar a largura dos planos de fundo dessas histórias Então, selecione a história BG e faça com que sua largura seja 85%. Ok, então nesse ponto de interrupção, terminamos. Tudo o resto parece bem. Vamos seguir em frente e encontrar o próximo. Acho que o próximo deve ter mil pixels, porque nesse ponto de interrupção, alguns dos elementos precisam ser personalizados Então, vamos usar em mídia CSS e especificar a largura máxima em mil Vamos verificá-los agora, pois acho que seria melhor colocar os itens de navegação verticalmente em uma coluna Para isso, precisamos mudar a direção da flexão. Então, vamos selecionar a lista e alterar a coluna de direção flexível Então, agora eles estão colocados verticalmente, mas têm aqui um espaço vazio. Esses itens devem ocupar o espaço. E para conseguir isso, vamos usar uma das propriedades do flexbox chamada flex grow Vamos selecionar o link de navegação e definir o crescimento flexível para um. Essa propriedade permite que os itens flexíveis ocupem o espaço disponível dentro do contêiner Ok, vamos seguir em frente e cuidar do cabeçalho. Vou colocar o título e parágrafo no centro da página. Então, vamos selecionar o texto do cabeçalho e definir sua posição, torná-lo absoluto Em seguida, precisamos definir as propriedades superior e esquerda, ambas em 50 por cento. Para enviar para o elemento perfeitamente. Temos que usar Transform com a função Translate. E temos que passar aqui -50% para ambas as direções. Quero dizer eixo x e eixo y. O título e o progresso são colocados no centro. Mas, como você pode ver, eles acabaram atrás do balão de ar. Para corrigir isso, vamos definir o índice como dez. Ok, em seguida, vou diminuir o tamanho da fonte do título e do parágrafo. Então, vamos selecionar o título. Mude o tamanho da fonte, transforme-a em seis RAM. Em seguida, vou selecionar o parágrafo do cabeçalho. Vamos fazer com que seu tamanho de fonte 2.5 seja executado. Tudo bem, recebemos nossos textos, terminamos. Vamos passar para a próxima seção. Precisamos diminuir aqui o tamanho do cabeçalho. Então, vamos selecioná-lo e definir seu tamanho de fonte. Seis rodadas. Ok, isso é tudo sobre esta seção. Em seguida, vem a seção de histórias. Acho que, a partir desse ponto de interrupção, não precisamos mais distorcer o plano de fundo Então, vou dar a eles a forma do retângulo. Vamos seguir em frente e selecionar story BAG. Em seguida, use Transform Skew x e torne-o zero. Em seguida, precisamos da história em si. Vamos pegar essa linha de código e colá-la. Você. Tudo bem? Além disso, vou colocar o conteúdo na vertical Para isso, precisamos mudar a direção da flexão. Então, vamos fazer com que seja uma coluna e também alinhar os itens no centro Tudo bem, então a última coisa em relação ao armazenamento é criar algum espaço sob as imagens Vamos seguir em frente e selecionar a imagem. E atribuído a ela uma margem inferior com um valor de três rampas. Ok, isso é sobre essa seção de histórias. Finalmente, vou cuidar do filtro. Vou diminuir o espaço dentro dos links e também vou diminuir o espaço entre eles. Então, vamos selecionar o link que definiu o preenchimento como 0,3 RAM na superior e inferior e duas RAM nos lados direito e esquerdo E também precisamos usar margem com 0,1 rem. Tudo bem, então acho que terminamos no ponto de interrupção. Tudo parece bom. Vamos ir em frente e encontrar o próximo. Portanto, deve ter 800 pixels. Então, vamos criar novas mídias com largura máxima de 800 pixels Nesse ponto de interrupção, vou esconder completamente o parágrafo Vamos prosseguir e selecioná-lo e atribuído a ele, não exibir nenhum. Em seguida, vamos diminuir o tamanho do cabeçalho da seção do cartão. Então, vamos selecionar o título de ferramentas populares e fazer com que o tamanho da fonte seja cinco vezes maior. Tudo bem, então, na verdade, tudo parece estar bem, exceto a seção de contato e o rodapé Vou diminuir a largura dos elementos do formulário. Então, vamos selecioná-lo e definir sua largura para 90%. Quanto ao rodapé, vou colocar os links verticalmente em uma coluna Então, vamos prosseguir e selecionar a lista de rodapés. Mude a coluna de direção flexível. Além disso, precisamos alinhar os itens no centro. Por fim, vamos adicionar algum espaço entre os links. Selecione o link do rodapé e adicione a ele a margem. Um rem na parte superior e inferior e zero nos lados direito e esquerdo. Tudo bem, então, na verdade, isso é tudo sobre esse ponto de interrupção. Vamos ir em frente e encontrar o próximo. Então, o próximo será, eu acho, 650 pixels. Então, vamos criar uma nova consulta de mídia e especificar a largura máxima como 650 pixels. No intervalo, ponto de interrupção, vou estender essas seções para a página inteira Então, vamos selecionar o contêiner e eliminar a margem. Faça zero Então eu vou cuidar da barra de navegação Vamos começar com os ícones. Selecione, abra nosso ícone e altere as posições superior e esquerda. Vou definir os dois para 2,5 rodadas. Antes de passarmos para o próximo ícone, quero me livrar do espaço ao redor do napa Então, vamos selecionar agora o invólucro e definir o preenchimento como zero. Em seguida, selecione o segundo ícone, que tem o ícone de snapper fechado, e altere a posição correta Faça com que seja 4M. Tudo bem, isso é tudo sobre a barra de navegação. Vamos prosseguir e selecionar o cabeçalho. Vou definir sua altura em 200 vh. Tudo bem, então terminamos com o cabeçalho. Vamos passar para a seção de contato. Vou diminuir o tamanho do cabeçalho. Então, vamos selecionar o título do contato e fazer com que o tamanho da fonte seja seis redondo. Além disso, vou adicionar alguns estilos ao formulário de contato. Vamos mudar a quantidade do preenchimento. Chegue até a rampa. Quanto à altura, vamos fazer com que seja quatro até a rampa. Tudo bem, então é isso, cerca de 650 pixels. E, finalmente, precisamos personalizar o projeto nos últimos pontos de interrupção, que eu acho que serão 500 pixels Então, vamos criar novas mídias com a largura máxima de 500 pixels Portanto, a maneira mais fácil de fazer com os elementos tenham uma boa aparência nesse ponto de interrupção Pensei em diminuir o tamanho da fonte dos elementos HTML. Como você sabe, no momento, é igual a 62,5%. E vou diminuir o H2 em 45%. Esse código afetará o tamanho de cada elemento porque, durante todo o projeto, estávamos usando a RAM como unidade de medida. Ok, então eu acho que tudo parece muito bom. E, finalmente, terminamos. Concluímos a construção deste projeto. Então, parabéns, espero que tenham gostado. Aprendi muitas coisas legais e interessantes. Se você gostou deste projeto, dê um sinal de positivo, comente abaixo, compartilhe o vídeo, assine nosso canal e clique na campainha para ser notificado sobre os próximos projetos Ok. Te vejo na próxima vez. 81. Projeto 9 - Pré-visualização do projeto: Tudo bem, então é hora de construir nosso próximo projeto, que será o clone de um dos mais populares e comumente sites mais populares e comumente usados chamado Paypal, criará a interface de usuário das diferentes Estou na página principal, páginas de login e inscrição. É claro que não será o clone exato com todas as funcionalidades Como eu disse, criaremos apenas uma interface de usuário com HTML, CSS e JavaScript. O Paypal parece diferente em diferentes países. A interface do usuário muda com frequência de tempos em tempos. Portanto, não se preocupe se esse não for o clone exato da interface atual Tudo bem, então antes de começarmos a escrever o código, primeiro, vamos descrever a aparência do projeto Então, como eu disse, criaremos três páginas diferentes, login principal e inscrição. Começaremos com a página principal. Ele consistirá em algumas seções diferentes. A primeira seção será o banner com navegação Temos aqui vários itens de navegação. Se eu passar o mouse sobre eles, o menu suspenso será Ele mudará quando passarmos mouse sobre outro item de navegação Além disso, teremos aqui dois botões diferentes para fazer login e se inscrever. Se eu clicar neles, navegaremos até a página correta. Então, o banner será seguido pela segunda seção. Ele incluirá três partes diferentes com Font, ícones incríveis, alguns elementos de texto e botões. Em seguida, teremos essa seção azul com alguns parágrafos diferentes A seguir, criaremos esta pequena seção aqui com uma imagem e três etapas diferentes. Abaixo, teremos um botão para se inscrever, seguido pelo rodapé Tudo bem, então vamos ver a página principal. Vamos dar uma olhada na página de login. Será bastante semelhante à página de login original. Teremos aqui dois campos de entrada com botões. Essa provavelmente é a página de inscrição. Ele consistirá em duas partes. No lado esquerdo, teremos várias imagens dos clientes. Quanto ao lado direito, ele incluirá duas opções diferentes. Se queremos criar uma conta pessoal ou comercial. Tudo bem, então isso é tudo sobre o projeto. Como de costume, vamos torná-lo responsivo a diferentes tamanhos de tela Se eu inspecionar a página e mudar para o modo responsivo, você verá que ela é Uma coisa a observar aqui: em telas menores, não teremos mais os menus suspensos Eles se transformarão no menu assim. Ok, então é isso. Estamos prontos para começar a construir o projeto. Então, vamos seguir em frente. 82. Projeto 9 - crie e personalize primeiro, segundo e terceiro seções: Olá e bem-vindo ao nosso novo vídeo do YouTube. Neste tutorial, criaremos o site chamado Wine House. O projeto será criado com base em HTML, CSS e JavaScript. Você aprenderá sobre como criar efeitos agradáveis e legais. Então, espero que o projeto seja interessante e útil. Como dissemos ao longo deste tutorial, usaremos HTML, CSS e JavaScript. Então, espero que todos já saibam algumas coisas básicas dessas três tecnologias. Tudo bem, vamos prosseguir e, antes de tudo, descrever o projeto Consiste em cinco páginas diferentes e elas estão alinhadas de uma maneira diferente Na maioria das vezes, você pode encontrar os sites nos quais pode rolar para cima e para baixo nas diferentes seções da página da web Mas no nosso caso, você pode rolar a página horizontalmente. Quero dizer, depois de rolar, você navegará para as diferentes páginas com alguns efeitos de transição interessantes e interessantes Além disso, você pode ver que não temos aqui a barra de rolagem. Além disso, você pode ver aqui os controladores, quero dizer, aquelas pequenas flechas Se você clicar neles, navegará até as diferentes páginas. Também abaixo, temos uma barra de progresso, que nos mostra em qual página estamos atualmente. Além disso, temos aqui uma navegação fixa. E os itens de navegação têm alguns bons efeitos de foco. Ok, então o projeto responderá a diferentes tamanhos de tela Se eu inspecionar a página , mude o modo responsivo e verifique o projeto em diferentes pontos de interrupção Você verá que é responsivo. Em telas menores. Não temos mais a navegação fixa. É transformado no menu de hambúrguer. Tudo bem, então, na verdade, isso é tudo sobre o nosso projeto. Vamos em frente e começar. Eu criei uma nova pasta na área de trabalho chamada Wine House, na qual tenho outra pasta para as imagens. Vamos abrir essa pasta no código VS. Vou criar três arquivos diferentes. Index.html, style.css e scripts dot js. Isso abre o arquivo index.html e gera o documento HTML básico. Eu vou usar o Emmet. Vamos colocar aqui o ponto de exclamação e pressionar Enter ou tab Em seguida, vou vincular esses três arquivos. Então, vamos abrir a tag do link e especificar aqui o caminho do arquivo CSS. Em seguida, vou abrir a tag de script abaixo, acima da tag do corpo de fechamento. E no atributo fonte, vamos especificar o caminho do arquivo script.js. Ok, além disso, vou usar uma das fontes do Google em todo este projeto. Então, vamos em frente e pegar o link. Vamos ao site do Google Fonts e pesquisar uma fonte chamada cormorant Vamos selecionar aqui algumas espessuras de fonte diferentes e, em seguida, pegar o link Vou colá-lo no elemento principal. Ok, em seguida, quero mudar o logotipo e a barra de título. Precisamos abrir a tag do link como o valor do atributo que precisamos aqui no ícone. Em seguida, vou especificar o tipo. Ele será fotografado com uma barra em PNG. E, finalmente, temos que especificar o caminho da imagem e os atributos de referência H. Temos aqui a pasta de imagens e, em seguida, temos que selecionar um ponto de logotipo PNG. Por fim, mude o título. Precisamos da Wine House. Vamos prosseguir e executar o projeto ou o navegador. Para isso. Vou usar um dos pacotes de código do VS chamado servidor ativo. Isso nos permite executar a vida útil do projeto no navegador e fazer alterações sem atualizar a página todas as vezes Assim, você pode instalar e usar essa extensão. Portanto, o projeto está ativo para o navegador. Além disso, você pode ver aqui o logotipo na barra de título. Por fim, vamos organizar um pouco nossos ambientes de trabalho colocar um pouco o editor e o navegador, assim, e começar Tudo bem, então criaremos e personalizaremos cada uma das páginas separadamente. E depois disso, programaremos o efeito de rolagem e também algumas outras coisas diferentes Vamos começar a criar a marcação HTML open div tag, que será o contêiner Em seguida, teremos outros elementos div. Será o invólucro Então, no geral, teremos cinco páginas diferentes, quero dizer cinco seções diferentes Então, vamos prosseguir e criar elementos desta seção para todos eles. Vou atribuir a ela a primeira seção da classe. Então, vamos duplicá-lo quatro vezes e mudar os nomes das classes Precisamos de nomes de turmas de duas a cinco. Tudo bem, então vou começar com a primeira seção. Eu fiz a página inicial. Inclui o título com o sublinhado e o plano de fundo em tela cheia. Você vê aqui as setas de navegação e a barra de progresso. Eles são fixos e estão sendo exibidos em todas as páginas Nós cuidaremos deles um pouco mais tarde. Ok, vamos abrir os elementos div dentro da primeira seção Esses elementos terão duas classes diferentes. O primeiro será o invólucro de seção de classe comum Pois a segunda será a aula individual. Vou chamá-la de seção um rápido. Na verdade, também precisamos desse invólucro de seção para o resto das seções. Então, vamos copiar esses elementos e colá-los em todos eles. Além disso, precisamos mudar os nomes das classes. Precisamos de dois números de dois a cinco. Ok, vamos voltar para a primeira seção. Precisamos inserir uma tag div que envolverá o título. Vamos atribuir a ela um nome de classe, seção um, wrapper de cabeçalho E passe aqui os elementos de cabeçalho H1. Vou atribuir a ela um título da seção um da classe. E também, vamos colocar aqui os seguintes textos. Os melhores vinhos do mundo. Então isso é tudo sobre a primeira seção. Agora, vou começar a escrever um pouco de CSS. Em primeiro lugar, vou criar alguns estilos comuns. Vamos selecionar cada elemento usando um asterisco e colocar aqui alguns estilos comuns e redefinidos Vou me livrar da margem e do preenchimento de todos os elementos Vamos definir os dois como zero. Além disso, vou fazer uma caixa de tamanho de caixa, caixa de borda. Em seguida, vou me livrar de alguns estilos padrão. Quero dizer, digamos que seja um esboço para nenhum. Além disso, vou definir a decoração do texto como nenhuma. Em seguida, elimina os estilos padrão dos elementos da lista. Vamos fazer com que o estilo de lista não digite nenhum. E, finalmente, vou definir uma família de fontes para chamar o idiota Garamond Desculpe. Então, ao longo deste projeto vamos usar a RAM como unidade de medida. No momento, 1 g é igual a 16 pixels porque o tamanho da fonte do elemento HTML é igual a 16 pixels. Por padrão, quero converter um remédio em dez pixels. E para isso, temos que diminuir o tamanho da fonte do elemento HTML e torná-lo em 62,5% O tamanho do título diminuiu. Depois disso, vamos cuidar da embalagem. Vou definir sua largura e altura, ambas com 200% da janela de visualização Vamos atribuir à propriedade de largura uma centena de largura da janela de visualização Quanto à altura, vou fazer seja uma centena de altura de janela de visualização Ok, a seguir, vamos selecionar esse elemento de seção em si e definir a largura e a altura, ambas em 200 por cento. Então eu vou tornar sua posição absoluta. Além disso, precisamos tornar a posição do invólucro relativa porque eu quero posicionar as seções acordo com seu elemento pai, que é rapper Depois disso, vamos fazer com a posição de atraso da seção seja zero Depois disso, vou selecionar o wrapper da seção. Vamos definir sua largura e altura. Precisamos herdar os dois do elemento seção. Então, vamos definir a largura e a altura de ambos para herdar. Então, neste momento, a primeira seção acabou atrás do resto das seções por causa da posição absoluta. Como eu disse, vou personalizá-lo para a primeira seção. Então, para colocá-lo no topo das outras seções, vamos usar a propriedade do índice Z. Selecione a primeira seção e defina o índice como 50. Depois disso, vou definir a imagem como plano de fundo em tela cheia Então, vamos selecionar o invólucro da Seção 1 Então, vou usar aqui o gradiente linear Vamos colocar aqui a cor preta. Quero dizer RGBA com três zeros e com a opacidade 0,5. Em seguida, precisamos novamente de RGBA, cor preta, mas com opacidade diferente. Vamos fazer com que seja 0,4. Em seguida, precisamos especificar o URL da imagem, a parte da imagem. Temos uma pasta chamada imagens e precisamos selecionar a Seção 1, PG dot JPG. Em seguida, precisamos do Center e também do no-repeat. E, finalmente, vamos definir o tamanho do plano de fundo, cobri-lo. Tudo bem, como você pode ver, temos aqui uma imagem de fundo em tela cheia para a primeira seção Agora vamos prosseguir e cuidar do cabeçalho, selecione seu encapsulamento div Em primeiro lugar, vou tirar você da posição da embalagem Vou colocar o título perto da parte inferior da página. Então, vamos tornar sua posição absoluta. Em seguida, defina a propriedade principal e torne-a 70%. Quanto à propriedade esquerda, vou fazer com que seja 50%. E também precisamos transformar com a função de tradução. Temos que passar aqui -50 por cento para ambas as direções. Quero dizer, para os eixos x e y. Portanto, o cabeçalho está colocado da maneira correta, mas no momento não está bem visível. Então, vamos em frente e consertar isso. Vou selecionar o título em si. Vamos definir o tamanho da fonte. Dez RAM. Também altere a espessura da fonte, torne-a 300. E mude a cor. Eu vou usar aqui. Branco. Em seguida, vou transformar o texto em letras maiúsculas. E também crie algum espaço entre as letras usando o espaçamento contábil com um valor de 0,1 executado Depois disso, vamos adicionar uma borda na parte inferior do título. Portanto, use a borda inferior com os valores apontando para ram. Sólido. E como cor, vou usar D5 com quatro zeros Tudo bem, então o título parece bom. Por fim, quero alinhá-lo ao lado direito e também desabilitar a seleção do usuário Então, precisamos usar o texto alinhado com o valor, certo? E então o usuário seleciona nenhum. Tudo bem, vamos ver a primeira seção. Parece bom e podemos passar para o segundo. Primeiro de tudo, vamos criar a marcação HTML. Portanto, a segunda seção incluirá duas imagens diferentes e o botão. Vamos abrir uma tag div com a venda da turma. Então, teremos uma imagem e um botão em seu desenvolvimento que é um elemento IMG aberto E os atributos de origem. Vou especificar o caminho da imagem. Temos que selecionar bag dot PNG na pasta de imagens. Vou atribuir ao atributo alt navegar de volta. E também precisamos que seu atributo de classe com um valor volte. Em seguida, vamos instituir um botão com o nome da turma, sale, btn. E como imposto, vou aprovar seu pedido. Agora. Além disso, vou inserir aqui outra imagem, mas ela será colocada fora do div Vamos especificar aqui o caminho da imagem. Precisamos de um ponto de garrafa de vinho PNG. Além disso, vamos atribuir ao atributo alt, o valor da garrafa de vinho Além disso, vou adicionar um atributo de classe com uma garrafa de vinho de valor. Ok, então isso é tudo sobre a marcação da segunda seção No momento, a segunda seção acabou atrás da primeira. É por isso que não vemos aqui alguns dos elementos. Vou corrigir esse problema usando novamente a propriedade index. Vou mudar aqui o nome da turma. Vamos usar a Seção dois. Agora mesmo. Eu queria usar essa forma, mas, eventualmente, definiremos valores diferentes da propriedade do índice para todas essas seções. Tudo bem, agora precisamos definir o plano de fundo para a segunda seção Vamos pegar esse código daqui. E depois faça algumas mudanças. Precisamos do invólucro da Seção 2. Em seguida, altere as opacidades. Vamos torná-los 0,8 e 0,9 e também mudar o nome da imagem. Precisamos que a seção seja G. Ok? Então essa é a aparência da segunda seção agora, pois vejo que temos aqui as barras de rolagem e quero me livrar delas. Para isso, temos que atribuir ao invólucro o estouro oculto Depois disso, vamos cuidar do layout desses elementos. Vou usar o Flexbox. Vamos usar aqui o display flex. Em seguida, precisamos alinhar o centro dos itens para centralizar os elementos verticalmente E também vou usar o conteúdo justificado com o espaço de valores uniformemente Tudo bem, vamos começar a estilizar cada um dos elementos Primeiro, vou selecionar o elemento div com a venda da classe Vamos usar novamente livros de fluxo. Eu quero fazer com que seja um recipiente flexível. Em seguida, precisamos mudar a direção do fluxo. Vamos fazer uma coluna. E depois disso, para centralização vertical e horizontal, vamos usar alinhar itens ao centro e justificar o centro Tudo bem, depois disso, vamos personalizar a primeira imagem Onde diminui ligeiramente, a opacidade faz com que seja 0,9. E também vou mudar a largura da imagem. Vamos fazer 45 em vez de selecionar o botão. Tem venda de classe, btn. Antes de tudo, vamos definir a largura e a altura. Vou definir a largura para 20 RAM. Quanto à altura, vamos fazer com que seja cinco rem. Em seguida, vou cuidar do texto. Vamos aumentar o tamanho da fonte. Chegue até Ram. Também altere a espessura da fonte. Faça-o mais leve. Em seguida, transforme o texto em maiúsculas e crie algum espaço entre as letras Vamos fazer com que seja 0,1 repetição. Ok, depois disso, vou definir a cor de fundo como transparente. Além disso, mude a cor, torne-a branca. Em seguida, crie algum espaço na parte superior do botão usando a margem superior com um valor para RAM. E, finalmente, vamos criar uma borda com valores de 0,1 RAM, sólida e usar a cor branca. Tudo bem, então o botão é personalizado. Por fim, quero criar um pequeno efeito de foco. Vou mudar a cor de fundo ao passar o mouse. Botão selecionado com o mouse sobre o mouse. Mude a cor do plano de fundo. Use aqui novamente essa cor vermelha. E então, para tornar o efeito um pouco mais suave, use a transição com um valor de cor de fundo e, com ela, duração de 0,2 segundo Tudo bem, então o botão está estilizado e o último elemento que eu quero personalizar é a segunda imagem Então, vamos prosseguir e selecioná-lo. Eu vou mudar a opacidade. Quer dizer, eu quero diminuí-lo para 0,6 e também alterar a largura. Faça com que seja uma rampa dupla. Tudo bem, então, com a segunda seção, terminamos. Está estilizado e temos que seguir em frente e cuidar da terceira seção Vai ser, novamente, meio simples. Teremos a imagem de fundo em tela cheia. Além disso, teremos outras imagens no centro da página e esses textos aqui. Então, primeiro de tudo, vamos criar novamente a marcação HTML Teremos três elementos diferentes aqui. A primeira será a tag H1 aberta de cabeçalho com um título da seção três da classe E passe aqui o texto, da melhor qualidade. Em seguida, teremos a imagem. Especifique o caminho da imagem no atributo de origem. Precisamos selecionar o ponto do quadro PNG. Adicione também aqui o valor do atributo alt aqui, digamos, frame de uvas. Em seguida, adicione um atributo de classe com um traço de quadro de valor IMG Vamos duplicar essa linha de código. Mude o nome da imagem que precisamos aqui, grapes dot PNG. Também como o valor do atributo alt. Vou deixar aqui só uvas. O evento mudou a classe. Precisamos aqui das uvas Dash e G. Ok, então agora esta seção não está visível e o motivo é o mesmo Acabou atrás da segunda seção. Então, vamos corrigir isso novamente usando a propriedade z-index. Vou mudar aqui o nome da turma. Precisamos da Seção 3. Então, agora os elementos estão visíveis. Vamos continuar e personalizar essa seção. Primeiro, vamos definir a imagem como plano de fundo em tela cheia Vamos selecionar o invólucro da seção três. Na verdade, também precisamos de um código semelhante para o rapper da seção três. Então, vamos pegar esse código daqui. Cole-o no invólucro da terceira seção e faça algumas alterações Vamos mudar as opacidades. Nós precisamos aqui. 0,3, 0,9 e, em seguida, altere o nome da imagem. Precisamos de três. E, finalmente, precisamos aqui justificar o conteúdo com o centro de valor em vez do espaço uniformemente Tudo bem, isso é tudo sobre o invólucro. Vamos continuar e personalizar cada um dos elementos separadamente. Vou começar com as imagens. Vamos selecionar a primeira imagem, que tem quadro de classe IMG Vamos definir a largura para 100 rampa. Além disso. Vou tornar sua posição absoluta. E, finalmente, diminua a opacidade, torne-a 0,5. Ok, a seguir, vou selecionar essa segunda imagem, uvas IMG Na verdade, também precisamos de estilos semelhantes para a segunda imagem. Então, vamos pegar esse código daqui e apenas alterar os valores. Vou configurar com 240 RAM. Quanto à opacidade, vamos fazer com que seja 0,7. Finalmente, vou cuidar dos elementos do título. Então, vamos seguir em frente e selecionar esses elementos. Primeiro de tudo, vamos aumentar o tamanho da fonte, torná-la com 20 RAM. Em seguida, mude a cor. Vou usar aqui a cor cinza claro, quero dizer CCC, e também transformar texto em maiúsculas Em seguida, precisamos girar o cabeçalho. Então, vamos usar Transform com a função de rotação. Vou girar a imagem com 20 graus. Também pode usar seu centro de alinhamento de texto. O título está bonito. Quero adicionar um pequeno efeito de sombra e também vou desativar a seleção do usuário. Então, vamos continuar e usar sombra de texto com os valores 0,5 RAM do que 1,5 RAM. E como cor, vou usar 000, que é a coluna preta. E, finalmente, vamos usar aqui, o usuário não seleciona nenhum 83. Projeto 9 - Criar e personalizar a Quarta e a Quinta Secções: Tudo bem, isso é tudo sobre a terceira seção. Agora temos que seguir em frente e começar a trabalhar na seção pois esta parte consiste apenas no título e na imagem. E também temos uma imagem de fundo em tela cheia. Na verdade, é a mesma imagem com algum efeito de desfoque. Tudo bem, então esta seção será simples. Vamos começar a criar a marcação HTML. Vamos abrir elementos div com a seção quatro da classe, b, g. Usaremos esse elemento div para criar um efeito de desfoque para a Em seguida, precisamos do título. Vamos abrir a tag H1 com a seção da aula para título com o texto vinhos recém-lançados E, finalmente, quero inserir aqui uma imagem. Vamos especificar a parte da imagem. Precisamos selecionar uma seção para bg dot JPG na pasta de imagens e, em seguida, atribuir ao atributo alt, o valor novos vinhos. E também vou adicionar aqui novos vinhos de classe. Img. Tudo bem, então, com a maquete, terminamos Mas, como de costume, precisamos exibir uma nova seção na página porque ela acabou ficando atrás da terceira seção. Então, vamos continuar e usar novamente a propriedade z-index. Vou mudar o nome da classe de seção para seção. Pois esta seção está visível. Vamos começar a personalizá-lo. A primeira coisa que vou fazer é diminuir a largura da imagem para tornar nosso processo de trabalho mais conveniente. Vamos selecionar novos vinhos, IMG, e definir sua largura para sete para serem produzidos. Tudo bem, depois disso, vamos colocar os elementos no centro da página E para isso, temos que usar o flexbox. Então, vou selecionar a seção para o invólucro. Vamos fazer com que seja um recipiente flexível. Então eu vou mudar a direção. Vamos fazer uma coluna. Próximo. Para centralizar os elementos horizontal e verticalmente, precisamos usar o centro horizontal e verticalmente, de conteúdo justificado e alinhar o centro dos itens. Então, os elementos são colocados no centro da página. E agora eu vou cuidar do plano de fundo. Como você se lembra, criamos um elemento div vazio para o plano de fundo Vamos seguir em frente e selecionar os elementos. Em primeiro lugar, vou definir sua largura e altura. Vamos fazer com que os dois sejam cem por cento e também tornar a posição absoluta. Em seguida, vou definir o plano de fundo. Estou em uma imagem em tela cheia. Nas seções anteriores, atribuímos o plano de fundo aos rappers desta seção Mas, nesse caso, vamos usar um efeito de desfoque. E se fizermos isso para o invólucro da seção , todos os elementos incluídos ficarão desfocados É por isso que usamos um elemento adicional. Vamos seguir em frente e definir o plano de fundo. Vou usar gradiente linear. Com valores RGBA. Quero dizer a cor preta, mas a opacidade, 0,8 e a primeira cor, depois 0,7 e a segunda Em seguida, vamos especificar a parte da imagem. Vou selecionar uma imagem chamada seção para PNG ou JPEG. Então, precisamos centralizar e não repetir. Além disso. Vamos definir o tamanho do plano de fundo a ser coberto. Então, aqui temos a imagem de fundo, mas como você pode ver, o resto dos elementos estão ocultos porque acabaram atrás do fundo. Para corrigir isso, vamos usar a propriedade z-index Vou configurá-lo para o valor negativo, digamos menos um Tudo bem? Então, finalmente, precisamos desfocar o fundo. Para isso. Vou usar uma dessas propriedades CSS chamada filtro. Em seguida, temos que atribuir a ele uma função chamada bluer. E então, como valor, vamos instituir pontos por rampa. Tudo bem? Como você pode ver, o fundo tem um efeito de desfoque. Mas temos aqui um pequeno problema. Se você observar as bordas dessa ação, verá que elas não estão desfocadas Então, vou aumentar um pouco a largura e a altura dessa seção. Agora mesmo. Eles são iguais a 100 por cento e eu vou transformá-los em 110% Tudo bem, então vamos ver o plano de fundo. Vamos seguir em frente e seguir para o título. Vamos selecionar esses elementos. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer com que sejam dez RAM Em seguida, torne o imposto um pouco mais leve usando o peso de fonte 300 Além disso, vamos alinhar o texto no centro usando o centro de alinhamento de texto Em seguida, vou criar espaço na parte inferior do título usando a margem inferior com o valor sete RAM. Também mude a cor. Você vê aqui a cor vermelha. Estou em D5 com quatro zeros. E, finalmente, vou desativar a seleção do usuário. Vamos usar a seleção do usuário com o valor none. Então, o título parece bom. E antes de terminarmos esta seção, vou personalizar um pouco a imagem. Vamos criar uma borda ao redor da imagem atribuída a ela, 0,1 redonda, sólida e branca. Além disso, vou criar algum espaço dentro da caixa usando preenchimento Vamos fazer com que seja um rem nos quatro lados. E também vou diminuir um pouco a opacidade da imagem . Vamos fazer com que seja 0,7. Tudo bem, então isso é tudo sobre a quarta seção. É estilizado E agora teremos que passar para a última seção, que será a foto. Portanto, consiste em uma imagem. Além disso, temos algumas informações de contato e há um texto de direitos autorais abaixo, na parte inferior da página. Então, vamos começar a criar uma marcação HTML. Vou criar a lista com a comida da turma ou lançada. Vou lhe passar alguns elementos de LI. O primeiro item será o contato. Então teremos Nova York do que algum endereço, digamos 1049 Stanley Avenue Em seguida, vou colocar aqui aberto diariamente. Isso é para o último item. Vamos inserir você somente com hora marcada. Logo após a lista. Vou inserir aqui uma imagem. Vamos selecionar a imagem na pasta de imagens. Será a imagem com o nome Footer, traço IMG E também vou adicionar um atributo de classe com rodapé de valor, IMG Em seguida, precisamos criar outra lista. Na verdade, vou copiar a primeira lista daqui, colá-la e alterar os itens. Vamos passar por aqui, conecte mais do que o número de telefone. Vou colocar aqui um número de telefone fictício, digamos 516.448,2 Além disso, vou colocar aqui o número do celular, digamos 63.174.284,2 Em seguida, vem o e-mail. Vamos colocar aqui um exemplo em whitehouse.com. Por fim, vamos inserir aqui, na nossa lista de e-mails Tudo bem, finalmente, vamos criar o parágrafo para o texto dos direitos autorais, abrir elementos p com a classe copyright Em seguida, coloque seus direitos autorais, seguidos pela entidade HTML5, que será o sinal de direitos autorais Precisamos de cópia comercial e comercial, ponto e vírgula. Então, vamos escrever seu código e criar. E todos os direitos reservados. No momento, essa seção não está visível. Então, vamos continuar e usar novamente a propriedade index. Mude o nome da turma 4-5. Então essa é a aparência da nossa nova seção. Vamos em frente e personalizá-lo. Em primeiro lugar, vou definir a imagem de fundo em tela cheia Então, vamos selecionar o invólucro e, em seguida, definir o plano de fundo. Na verdade, vou copiar esse código daqui. Vamos mudar os valores do RGBA. Quero dizer os valores da opacidade que precisamos aqui, 0,7 e depois 0,5 Também altere o nome da imagem. Precisamos usar a Seção 5, BG. Tudo bem, a seguir vou colocar todos os elementos no centro da página Então, vamos usar o flexbox. Vou fazer o recipiente flexível do invólucro. Então, para centralizar os elementos perfeitamente na horizontal e na vertical, vamos usar um centro de itens de linha e justificar o centro Tudo bem, vamos em frente e personalizemos o mínimo possível. Quero dizer os itens da lista. Então, vamos selecionar elementos LI. Em primeiro lugar, vou aumentar o tamanho da fonte. Vamos fazer com que corra. Em seguida, altere a espessura da fonte. Vamos usar aqui 700. Em seguida, vou criar algum espaço entre as letras com o valor 0,1 RAM. Mude a cor, torne-os mais claros usando as cores d, d, d. E, finalmente, crie esse espaço na parte superior e inferior dos itens usando a margem com os valores de uma RAM e célula zero, os itens da lista são personalizados. Quero mudar um pouco o estilo dos primeiros itens da lista. E para selecioná-los, vou usar uma das pseudo-classes CSS chamada primeiro filho Então, vamos selecioná-la primeiro, os elementos LI anexados a ela, primeira pseudoclasse filha Então, vou colocar o texto em maiúsculas e também mudar a cor Use aqui, branco. Isso é tudo sobre a lista. Vamos continuar e personalizar a imagem. Selecione-o. Primeiro de tudo, vamos definir a largura, torná-la 60 RAM. Em seguida, vou criar espaço nos lados esquerdo e direito da imagem usando a margem cujos valores são 0,20 RAM E, finalmente, diminuiu ligeiramente a opacidade, tornando-a 0,9. Tudo bem, vamos ver a imagem. E o último elemento que precisamos estilizar será o parágrafo. Então, vamos selecioná-lo. Antes de tudo, torne sua posição absoluta e também a posicione na parte inferior da página usando alguma propriedade comprada que desvalorizamos para Ram Além disso, vou aumentar o tamanho da fonte, torná-la Ram. Também altere a espessura da fonte. Vou configurá-lo para 600. Em seguida, temos o centro de alinhamento do texto. Mude também a cor do texto, torne-o claro usando E. E, finalmente, crie algum espaço entre as letras usando o espaçamento entre letras com o ponto de valor a ser quebrado. Tudo bem, então esta seção cinco está pronta e vamos passar para a próxima parte do nosso projeto. 84. Projeto 9 - Crie e estilo Navbar e faça barras de progresso: Em seguida, vamos criar uma navegação. Além disso, a barra de progresso e as setas no lado esquerdo e direito da página Todos esses elementos terão uma posição fixa e serão exibidos em todas as cinco páginas. Vamos começar a criar a marcação HTML. Vou colocar esses elementos no início do contêiner. Então, vamos abrir elementos div com uma barra de navegação de classe. Navbar, teremos um logotipo e a lista dos itens de navegação Então, vamos inserir um elemento de link com o link do logotipo da classe que vou inserir aqui e a imagem. Vamos selecionar o ponto PNG do logotipo na pasta de imagens. Além disso, vou atribuir ao logotipo do atributo alt. E, finalmente, vamos adicionar um atributo de classe com um logotipo de valor. Depois disso, vou abrir a tag nav com o nome da classe agora, pelo menos Portanto, no geral, teremos cinco itens de navegação diferentes. Vamos abrir a tag de link com a classe nav link. O primeiro item de navegação será a página inicial. Então, vamos duplicar esse item quatro vezes e depois alterar o conteúdo O segundo será vinhedos. Então, uvas do que vinho. E para o último item, quero inserir conteúdo. Tudo bem, então aqui temos um logotipo e os itens de navegação. Antes de criarmos o resto dos elementos, vamos adicionar primeiro estilo à navegação. Vou selecionar o elemento div com a barra de navegação da classe Como dissemos, isso vai ser corrigido. Então, no momento, a barra de navegação não está mais visível porque acabou atrás do filtro Vou corrigir esse problema usando a propriedade z-index Agora, como é viável, vamos adicionar mais alguns estilos Vou aumentar sua largura em cem por cento. Na verdade, acho que seria melhor se diminuíssemos o tamanho da imagem. É bem maior. Agora, vamos definir a altura e transformá-la em seis rampas. Agora parece muito melhor e vou colocar a barra de navegação um pouco abaixo. Eu vou fazer isso usando a propriedade superior. Vamos configurá-lo para um representante. Além disso, vou usar aqui o Flexbox. Vamos criar o contêiner navbar flex usando display flex. Além disso, vou criar um espaço entre o logotipo e a lista usando o justify content space uniformemente E, finalmente, vamos usar alinhar itens ao centro para centralizar os itens verticalmente Tudo bem, é isso, quase o suficiente. Vamos continuar e personalizar o romancista. Vamos selecionar esse elemento. Vou torná-lo um contêiner flexível usando o display flex. E então precisamos de um centro de conteúdo justificado. Ok, vamos continuar e estilizar os itens de navegação. Vou selecionar o elemento de link, que tem o link de navegação className Antes de tudo, vamos criar o tamanho da fonte 1,5 RAM e também mudar a cor, torná-la branca. Depois disso, vamos aumentar a largura. Vamos fazer com que seja 15 RAM. Também crie algum espaço nos lados esquerdo e direito usando a margem. Vou defini-lo como zero na parte superior e inferior. Quanto aos lados esquerdo e direito, vamos fazer margem. Nós aumentamos. Além disso, vou colocar o texto em maiúsculas. Tudo bem, então os itens estão bonitos. E em seguida, vou adicionar as bordas a elas. Então, vamos usar borda com os valores ponto 1 g, sólido, e você os chama de brancos. Como você pode ver, temos que colocar os itens no centro. Para isso, vou usar o centro de alinhamento de texto. Também crie um pequeno espaço dentro da caixa usando o preenchimento. Vou fazer questão de bater na parte superior e inferior. Quanto aos lados esquerdo e direito, vamos torná-lo zero. E, finalmente, crie algum espaço entre as letras usando o espaçamento entre letras com o valor 0,1 rep. Tudo bem, então os itens de navegação estão estilizados Em seguida, vou criar um efeito de foco. Vamos dar uma olhada na versão final do projeto. Então, quando passarmos o mouse sobre os itens essa pequena caixa vermelha se moverá da esquerda para a direita Na verdade, será o pseudo elemento anterior Então, vamos prosseguir e selecionar o link de navegação com os pseudo-elementos anteriores Em primeiro lugar, vou deixar seu conteúdo vazio depois tornar sua posição absoluta. Além disso, atribuirei ao elemento de link o posicionamento relativo porque precisamos posicionar o elemento de acordo com seu pai, que neste caso é Depois disso, vamos tornar o elemento visível. Vou definir a largura e a altura. Vamos definir a largura para 150 por cento. Quanto à altura, vou fazer com que seja cinco rem. E também altere a cor de fundo. Eu vou usar aqui. Cor vermelha. Quero dizer, D5 com quatro zeros Então, essa é a aparência do elemento antes , agora, vamos mudar sua posição esquerda. Eu vou fazer com que seja -20 por cento. E também precisamos girá-lo e movê-lo levemente, horizontalmente, quero dizer, de acordo com Então, vou usar Transform com as funções girar e traduzir x. Vou passar aqui -40 graus como o valor da função de tensão Provavelmente traduza a função x. Vou mover os elementos com menos 4M. Ok? Então, os elementos são girados, mas essa não é a posição perfeita Agora mesmo. Eles são transformados a partir do centro. Estou dentro, a origem da transformação está centrada. E eu vou mudar isso e colocá-lo na parte inferior esquerda. Então, tivemos que usar uma dessas propriedades CSS chamada de origem da transformação. E temos que atribuir a ele na parte inferior esquerda. E, finalmente, vamos diminuir a opacidade. Eu vou fazer com que seja 0,8. Tudo bem? Então, isso é mais ou menos antes do pseudo-elemento agora. Em seguida, vou criar o efeito de foco. Eu quero movê-lo da esquerda para a direita. Então, vamos selecionar o elemento de link com o mouse e também com os pseudoelementos anteriores Vamos definir a posição esquerda e torná-la em 110 por cento. Além disso, para criar o modelo de efeitos, vamos usar a transição com o valor na extremidade esquerda de 0,3 s. Então, quando passarmos mouse sobre o suporte do item, o pseudo-elemento se moverá da esquerda para a direita A última coisa que precisa fazer é esconder a parte externa dos elementos. E, na verdade, vou fazer isso usando overflow hidden. Tudo bem, agora tudo funciona perfeitamente. E, na verdade, com a barra de navegação, terminamos. Vamos seguir em frente e cuidar das flechas. Em primeiro lugar, vou criar a marcação HTML. Vamos abrir a tag de botão com a página da classe btn. Será a classe comum para os dois botões. E também vou usar aqui outra classe à esquerda btn para algumas pessoas colocando ladrilhos Em seguida, vou inserir sua imagem. Vamos selecionar o ponto de seta PNG na pasta de imagens. Então eu vou duplicar o botão. Vamos mudar o nome da classe que precisamos aqui, certo? Btn. Vamos puxar a imagem que vou usar aqui, a mesma imagem. Vamos apenas girar as duas imagens para as direções corretas Ok, então aqui temos as flechas. Vamos em frente e personalizá-los. Vou selecionar os dois botões com a página da classe Como, BTN. Vamos fixar a posição do botão. Além disso, precisamos usar aqui o índice Z para viabilizar as setas Então, agora, os botões estão colocados no canto superior esquerdo da página Vou colocá-los no centro da página. Quero dizer, centralizá-los verticalmente. Para isso, vamos usar a posição superior e torná-la 50 por cento. E também vou usar Transform com a função translate y. Vamos inserir aqui -50%. Isso nos permitirá enviar o elemento perfeitamente de acordo com a direção vertical. Tudo bem, depois disso, vamos nos livrar do fundo padrão e da borda do botão Então, vamos tornar a cor de fundo transparente. E também para nos livrarmos da borda padrão, temos que usar border none. Ok, isso é tudo sobre o botão. Vamos seguir em frente e personalizar as imagens. Vamos selecioná-los. Primeiro de tudo, vamos definir a largura, torná-la para a RAM. Além disso, vou diminuir a opacidade, torná-la 0,4. E, finalmente, vamos deixar o ponteiro do cursor OK, para que as imagens sejam personalizadas Agora temos que colocá-los nos lados esquerdo e direito. Então, vamos primeiro selecionar uma seta para a esquerda. Vou definir sua posição esquerda. Vamos fazer isso para RAM. Depois disso, vou selecionar a imagem em si. Quero dizer, a imagem à esquerda. Precisamos girar a imagem em 90 graus. Então, precisamos transformar, girar. E vamos passar aqui -90 graus. Então, como você pode ver, a seta esquerda é colocada no caminho certo. Vamos prosseguir e fazer o mesmo com a seta para a direita também. Na verdade, vou duplicar esse código aqui e depois mudar os nomes das classes que precisamos, certo? Também precisamos aqui da posição direita em vez da posição esquerda. E, finalmente, altere o valor da função de rotação. Precisamos de 90 graus em vez de -90 graus. Tudo bem, então com as flechas estamos quase terminando. A única coisa que vou fazer é criar um pequeno efeito de foco Na verdade, quero aumentar a opacidade ao passar o mouse. Vamos continuar e selecionar Imagem com o mouse. Em seguida, atribuído à sua opacidade com o valor um. Além disso, vou usar a transição com opacidade de 0,2 s. Tudo bem, então com as setas terminamos Em seguida, temos que seguir em frente e criar uma barra de progresso. Inicialmente, como sempre, crie uma marcação HTML Vamos abrir o desenvolvimento com o pacote de progresso da classe. Em seguida, vou abrir outra tag div, que incluirá os números das páginas Vamos atribuir a ele um progresso de classe. E então dentro dele, vamos inserir o elemento de cabeçalho H2. Por padrão, vou passar aqui uma barra cinco. Tudo bem? Depois disso, vou criar os círculos. Vamos abrir a tag div, que será o invólucro É atribuído a cada embalagem do círculo de classe. E então vamos comer. E aqui, um elemento div vazio com classe é círculo e círculo um Em seguida, duplique essa linha de código quatro vezes e mude de classe Precisamos dos números de 2 a 5. Ok, então a marcação da barra de progresso está pronta e agora temos que personalizá-la Vou começar com o invólucro. Vamos selecionar o invólucro de progresso e, antes de tudo, fixar sua posição Portanto, a barra de progresso não está visível porque, como os elementos anteriores, ela acabou atrás do rodapé Vamos corrigir isso novamente usando a propriedade do índice Z. Vamos fazer com que seja 100. Ok, então agora está visível. Vamos definir essa posição. Vou colocá-lo abaixo, no canto inferior esquerdo da página. Portanto, precisamos aqui da propriedade inferior com o valor dois rem. E também deixou a propriedade com o valor de três rodadas. Tudo bem, depois disso, vamos personalizar o título. Vamos selecioná-lo. Em primeiro lugar, vou mudar o tamanho da fonte. Vamos fazer com 2,5 RAM. Além disso, vou tornar o título um pouco mais leve usando a espessura da fonte com um valor de 300. E depois mude a cor, torne-a branca. Tudo bem, então o título está estilizado. Vamos seguir em frente e passar para os círculos. Vamos selecioná-los usando um círculo de classe comum. Primeiro, vamos definir a largura e a altura. Vou fazer dos dois uma RAM. E então vou atribuir a eles uma borda com os valores de 0,1 RAM sólido e a cor branca Ok, então agora os elementos estão visíveis, mas eles não têm a forma do círculo. Para transformá-los em círculos, vamos usar raio de borda com valor de 50 Tudo bem? Agora temos círculos. No momento, eles são colocados verticalmente em uma coluna. Precisamos alinhá-los horizontalmente. E para isso, vamos usar o flexbox. Vou selecionar o envoltório circular e, em seguida, atribuir a ele display Em seguida, vamos criar algum espaço entre os círculos. Eu vou usar margem. Vamos torná-lo zero na parte superior e inferior. E então 0,3 rampa nos lados esquerdo e direito. Depois disso, vou criar algum espaço na parte superior e inferior dos elementos do título. E também quero colocá-lo no centro. Então, vamos prosseguir e selecionar It's wrapper div com o progresso da classe Em seguida, atribua a ela uma margem, defina-a como um rem na parte superior e inferior e, em seguida, use zero para os lados esquerdo e direito Além disso, vou usar o texto alinhado com o centro de valores Tudo bem, então agora com uma barra de progresso, terminamos. Faremos com que funcione usando JavaScript mais tarde. 85. Projeto 9 - Crie efeito de rolagem horizontal com JavaScript: Ok, então com o estilo, concluímos todas as cinco páginas ou personalizamos, e agora é hora de usar JavaScript e tornar nosso projeto dinâmico No momento, o filtro é exibido na página e o restante das seções é colocado atrás dele. Vou colocar as páginas em ordem a partir da primeira página, jogar a última. E vou fazer isso usando a propriedade z-index. Vamos mudar o nome da classe. Precisamos da Seção um em vez desta seção cinco. Em seguida, copie esse código e cole-o nas demais seções. Para a segunda seção, vou criar a propriedade z-index 40 Então, para a terceira seção , será assim t. Em seguida, temos a quarta seção. Precisamos aqui de 20. E por último, para a Seção cinco, vamos fazer com que o índice seja igual a dez Então, tudo está em ordem e podemos começar a escrever JavaScript. Antes disso, vou lembrá-lo do que vamos fazer e como os trabalhos do projeto são concluídos. Portanto, essas seções são colocadas umas sobre as outras em ordem. Vemos aqui a primeira seção por padrão. E depois de rolar para baixo, navegaremos para a próxima seção Vamos passar pelo filtro. E então, se rolarmos novamente para baixo, chegaremos à primeira página Além de rolar, também podemos navegar até as diferentes seções usando esses controles. Tudo bem, então todas essas coisas serão programadas com JavaScript E a primeira coisa que vou fazer é anexar um ouvinte de eventos ao objeto de janela global e usar um dos eventos chamado Wheel Este evento será acionado assim que movermos a vontade do mouse. Então, vamos anexar à janela. No ouvinte do evento. Deve levar dois argumentos. O primeiro será o evento. Como dissemos, precisamos usar a roda. Quanto ao segundo argumento, será a função de retorno de chamada Vou passar seu objeto de evento. E então vamos executá-lo no console. Depois de rolar a página , obteremos o evento da roda no console Se eu o deixar, você encontrará aqui algumas propriedades diferentes. E, na verdade, estamos interessados na propriedade chamada delta y. Agora, ela é igual Isso significa que rolamos a página para baixo. E se eu rolar para cima e verificar o valor da propriedade delta y, ele deve ser igual a -100 Portanto, usaremos essa propriedade para navegar entre as diferentes páginas ao rolar a página para cima ou para baixo. Tudo bem, então se o valor da propriedade delta y for positivo, teremos que navegar para a próxima página E se for negativo, então temos que ir para a página anterior. Quero dizer, rolando para o lado direito ou esquerdo. Temos que verificar se delta y é maior que zero. Em seguida, vou criar uma nova variável que será o contador. Isso nos ajudará a definir qual seção está sendo exibida no momento Por padrão, vou defini-lo como zero. Então, se essa condição for verdadeira, precisamos aumentar o contador em um. Para isso, vou usar o operador de incremento, que é expresso por sinais duplos de adição Se a condição for falsa, teremos que diminuir o contador em um. Portanto, temos que usar outras declarações. Temos que passar pelo seu contador com o duplo sinal de menos. E, finalmente, vamos levar o contador para o console. Então, quando rolarmos para baixo , o contador aumentará em um E se eu rolar para cima , diminuirá em um Tudo bem, então, com base nessa lógica, podemos navegar para as diferentes seções E para isso, temos que selecionar os elementos da seção. Vou usar o método seletor de consulta como o valor do nome da classe Vou passar aqui o seguinte. Vamos usar crases. Então eu vou passar na sua seção. Como você se lembra, cada seção tem um className com o número adequado Seção um, seção dois e assim por diante. E como o número desta seção, temos que usar um contador Ok, então, uma vez selecionada essa seção, temos que mudar seu estilo. Quero dizer, temos que mover esta seção para o lado esquerdo na largura de cem janelas de visualização Portanto, precisamos estilizar o ponto à esquerda e configurá-lo para -100 de largura da janela de visualização Ok, então, se eu rolar para baixo, navegaremos para as diferentes páginas Quando chegarmos ao rodapé e rolarmos novamente, obteremos o fundo branco Na verdade, é o contêiner. E no próximo rolo, receberemos um erro porque não temos uma seção dentro do número seis Além disso, vejo aqui a parte da seção quatro, como você sabe, a largura do fundo desfocado é igual a 110 por cento Então, para ocultar essa parte, aqui, temos que usar overflow hidden e atribuí-la a esta seção E também para criar esse modelo de efeitos de cor, vamos usar a transição com os valores à esquerda e 1,5 s. Agora temos um efeito de rolagem muito melhor Tudo bem, agora podemos rolar a página para baixo, mas não podemos rolar para Para conseguir isso, vou usar um pouco de lógica. Se o valor da propriedade delta y for 100, teremos que rolar para baixo. E se for igual a -100, então temos que rolar para cima Então, em vez de apenas menos uma centena de largura da janela de visualização, vamos abrir Em seguida, use o cifrão com as chaves do código. Portanto, temos que verificar se o delta y é positivo ou negativo. Precisamos da mesma condição aqui. Estou na condição que usamos na declaração if. E, na verdade, seria melhor se armazenássemos essa condição na variável e depois usássemos essa variável. Então, vamos criar um delta y constante e atribuído a ele E o ponto delta y é maior que zero. Que usam essa variável na instrução if. E também passe aqui. Portanto, se isso for verdade, teremos que mover essa seção para o lado esquerdo com -100 de largura da janela de visualização E se for falso, precisamos de zero. Então, se eu rolar para baixo e tentar rolar para cima, funcionará Mas com um pequeno problema. Como você pode ver, não podemos navegar até a página anterior. Quando rolamos para cima, a página anterior é omitida. Isso acontece porque quando rolamos para baixo, o contador é aumentado em um E quando rolamos para cima , ela diminui Precisamos manter seu último valor. Portanto, com apenas um contador, não podemos conseguir isso. Então, vou criar outro contador. Bem, vamos mudar o nome desse contador, torná-lo contador um. Em seguida, duplique essa linha de código. Vou chamar essa variável de contador para. E então vamos defini-lo como um. Depois disso, vamos usar esse contador e também a declaração FL. Ok, vamos percorrer o balcão do console um e encontrar dois. E em vez de apenas o contador, temos que verificar a mesma condição. Quero dizer, se delta y é positivo ou negativo. Então, se for verdade, então devemos usar o contador um. E se for falso, o que significa que rolamos para cima , precisamos usar counter to Agora, se eu rolar para baixo ou para cima, tudo funcionará bem até chegarmos ao rodapé e rolarmos Assim que chegamos à primeira página e rolamos para cima. Tudo bem, agora vamos corrigir esses problemas com duas declarações if diferentes Quando chegarmos ao filtro e rolarmos para baixo, precisamos exibir a primeira página Além disso, todas as outras seções devem estar alinhadas umas sobre as outras, como no caso padrão Em primeiro lugar, vamos selecionar todas essas seções. Vou armazená-los em uma variável, vamos chamá-la de seções. Para selecionar todas essas seções, vou usar o método seletor de consulta all Vamos passar aqui a seção do nome da tag. Portanto, se o contador um for igual a cinco, isso significa que o rodapé está sendo exibido e não precisamos mais rolar Temos que examinar essas seções e tornar sua posição esquerda zero. Além disso, temos que redefinir os dois contadores. Quero dizer, temos que definir os dois com seus valores padrão. Então, vamos prosseguir e criar a declaração if como condição. Precisamos contrariar um triplo é igual a cinco. Em seguida, temos que examinar essas seções Como você sabe, quando usamos o método query selector all, ele retorna a lista de nós e temos que transformá-la em uma matriz Para isso, vamos usar matriz a partir do método. Para examinar a matriz dessas seções, vou usar um dos métodos auxiliares de matriz chamados para cada Em seguida, temos que passar uma função de retorno de chamada, que pegará um parâmetro e será o item atual na matriz Estou na seção atual. Como dissemos, temos que criar uma posição zero à esquerda para todas as seções. Portanto, temos que usar seu ponto de seção no estilo ponto à esquerda e torná-lo zero. Além disso, temos que redefinir os dois contadores. Quero dizer, temos que definir o contador um para zero e o contador para um. E, finalmente, vou usar uma instrução de retorno que nos permitirá encerrar a execução de qualquer outro código nessa função Tudo bem, então se eu rolar para baixo e chegar ao rodapé, você verá que o contador um é igual a E no próximo rolo, a condição na declaração if será verdadeira Navegaremos até a primeira página e todas as demais páginas serão alinhadas como no caso padrão Ok, então o primeiro problema está resolvido. Em seguida, temos que cuidar da segunda questão. Quero dizer, quando a primeira página é exibida e rolamos para cima, recebemos um erro dizendo que possível ler o estilo de propriedade de Ok, então agora temos que verificar o caso que o contador um é igual a menos Nesse caso, temos que mover todas essas seções para o lado esquerdo em -100 de largura da janela de visualização Temos que exibir a foto Então, vamos criar outra declaração if. Portanto, temos que verificar se o contador um é igual a menos um. Se for verdade, temos que examinar a lista dessas seções. Em seguida, temos que dar a todas as seções, exceto esta seção cinco, uma posição à esquerda com o valor -100 de largura da janela de visualização Então, primeiro, vou transformar seções em uma matriz usando o método array dot from. Vamos passar suas seções. Em seguida, use o método forEach. Temos que passar sua função de retorno com a seção de argumentos, que será o item atual, quero dizer a seção atual Então, como dissemos, temos que fazer a última posição -100 de largura da janela de visualização para todas essas seções, exceto as cinco segundas Vamos seguir em frente e usar aqui outra instrução if, na qual temos que verificar se o nome da primeira classe do item atual na matriz é igual à seção cinco, precisamos da lista de classes de pontos da seção E temos que especificar aqui que o número zero do índice se refere ao nome da primeira classe. Então, precisamos de triplo igual à seção cinco. Portanto, se essa condição for verdadeira, teremos que encerrar a execução dessa função usando a instrução return Em todos os outros casos, temos que fazer com que a posição esquerda dessa ação seja -100 de largura da janela de visualização Portanto, precisamos cortar o ponto no estilo de ponto à esquerda igual a -100 de largura da janela de visualização Além disso, temos que definir o contador de um a quatro, N contra dois a cinco porque, nesse caso, rodapé será exibido na página Então, se testarmos, você verá que tudo funciona bem. 86. Projeto 9 - Faça com que a Barra de Progresso funcione com JavaScript: Tudo bem, então, assim que conseguirmos rolar as páginas a seguir, vou seguir em frente e começar a trabalhar na barra de progresso, que é colocada no canto inferior esquerdo E, no momento, não faz nada. Portanto, a barra de progresso deve mostrar qual página está sendo exibida no momento e também o círculo apropriado deve ser destacado Vamos continuar e criar uma função. Vou chamá-lo de contador de progresso. Então, precisamos fazer duas coisas. Temos que dinamizar esse título e também cuidar desses círculos. Primeiro, vou trabalhar no título. Vamos seguir em frente e selecionar esses elementos. Vou armazená-lo na variável chamada progresso. Vamos selecionar elementos usando o método querySelector. Passe o progresso da aula seguido pelo nome da tag H2. Portanto, precisamos alterar o conteúdo do título no lado direito dele. Vou usar o counter to porque ele começa com um e vai até cinco. Quanto à segunda parte, será o tamanho da lista dessas seções. Então, para alterar o conteúdo do elemento, vou usar uma das propriedades chamada conteúdo de texto. Precisamos aqui de progresso. Conteúdo de texto pontilhado que abra aqui. Carrapatos, seguidos pelo cifrão e pelos colchetes coloridos Como dissemos, vamos usar o contador para depois cortar. E vamos passar aqui as seções do comprimento do ponto. Então, precisamos chamar essa função aqui dentro. Em vez disso, contador de progresso. E também temos que chamá-lo dentro das declarações if. Como você pode ver, a primeira parte da nossa barra de progresso funciona perfeitamente. Tudo bem, vamos ver o título. Vamos passar para os círculos. Em primeiro lugar, vou selecioná-los. Vamos criar círculos variáveis e depois selecionar todos os círculos usando o método querySelector Vou passar aqui o círculo className. Então, vamos examinar esses círculos e atribuir a eles uma cor de fundo transparente. Então, quando rolarmos, o círculo adequado terá um fundo diferente Nesse caso, usaremos, novamente, conte até dois. Em primeiro lugar, ele transforma círculos na matriz usando o método array from. Vamos passar aqui os círculos e depois usar para cada auxiliar de matriz. Temos dois caminhos aqui, função de retorno de chamada com o item atual da matriz, quero dizer círculo E então, como bloco de código, precisamos mudar a cor de fundo e torná-la transparente. Portanto, precisamos de ponto circular, estilo, ponto, cor de fundo transparente. Ok, em seguida, precisamos mudar a cor de fundo para o círculo adequado. Então, vamos seguir em frente e selecionar o círculo. Precisamos de consulta de pontos do documento, seletor. Em seguida, abra aqui as crases. Porque precisamos definir o número do círculo. Precisamos de cifrão , chaves encaracoladas. E, novamente, contrariando. Depois disso, vamos mudar a cor de fundo. Precisamos de uma cor de fundo de pontos de estilo. Vamos torná-lo cinza claro usando o D. Tudo bem, então se eu rolar, a cor de fundo será alterada para os Mas, na verdade, temos aqui um pequeno problema. Se eu recarregar a página, o primeiro círculo não terá nenhum plano de fundo Portanto, temos que defini-lo manualmente. Vamos ao arquivo style.css e selecionar o primeiro círculo e criar sua cor de fundo. Além disso, vou usar a transição com a cor de fundo e com a duração de 0,3 s. Tudo bem, então agora tudo funciona bem E com a barra de progresso, terminamos. Em seguida, vou seguir em frente e cuidar dos controles. Em primeiro lugar, vamos selecionar os dois botões e , anexados a eles, ouvintes de eventos com um evento de clique Vou começar com o botão esquerdo. Vamos usar novamente o método querySelector com um nome de classe à esquerda btn e anexado a ele Adicionar evento, ouvinte com evento clique Vou duplicar esse código e mudar da esquerda para a direita. Tudo bem, então, uma vez que clicamos no botão esquerdo, temos que diminuir os dois contadores E no caso do botão direito, precisamos aumentá-los em um. Portanto, precisamos aqui do contador um, menos, menos e, em seguida, contrariar para novamente com dois sinais de menos No caso do botão direito, precisamos de ambos os contadores com sinais de mais Para navegar até as diferentes páginas, precisamos alterar a posição do lead para essas ações. Portanto, no caso do botão esquerdo, definiremos os números das seções usando counter to. Quanto ao botão direito, precisaremos do contador um. Então, vamos escrever o seletor de consulta de pontos do documento. Em seguida, abra os marcadores invertidos e a seção insegura como o número desta Vamos usar o contador para. Em seguida, temos que definir a posição esquerda e torná-la zero. Vamos pegar esse código, colá-lo aqui embaixo, mudar contador para contador um. E também faça a posição esquerda com -100 de largura da janela de visualização. Tudo bem, então se eu clicar nas setas, navegaremos para diferentes seções E quando chegarmos ao rodapé e clicarmos novamente, enfrentaremos os mesmos problemas que tivemos no caso de um evento na roda O mesmo acontecerá se clicarmos na seta para a esquerda quando a primeira página for exibida Portanto, para corrigir esses problemas, precisamos usar novamente as instruções IF. E para evitar usá-los duas vezes, vou criar uma função e chamaremos essa função várias vezes. Então, vamos criar uma função dentro de um controlador de página. Em seguida, vou pegar as duas declarações if daqui e colá-las dentro da função do controlador de página. Além disso, precisamos chamar a função de contador de progresso. Então, agora podemos chamar essa função dentro de eventos de vontade. E podemos nos livrar de ambas as declarações. Então, como você pode ver, tudo ainda funciona bem. Na verdade, se rolarmos para baixo, quero dizer, se usarmos a roda da boca e chegarmos ao rodapé, na próxima rolagem , na próxima rolagem , receberemos um erro dizendo possível ler o estilo de propriedade Isso acontece porque na última chamada, se a instrução foi executada dentro da função do controlador de página, ela tornou o contador zero. Não temos uma seção com esse número e, portanto, recebemos um erro. Então, quando isso acontece, quero dizer, quando uma das instruções if é executada, não queremos executar esse código. Tudo bem, então para corrigir isso, precisamos retornar um valor booleano do controlador de página Para isso, vamos criar uma nova variável fora da função. Vou chamá-lo de Bu. E isso é atribuído a ele por meio de. Em seguida, temos que definir essa variável como verdadeira dentro da função. Nesse caso, em cada execução da função, o booleano é atualizado para verdadeiro Mas se a instrução if for executada, teremos que definir Boolean como false Temos que fazer isso em ambas as declarações. E, finalmente, precisamos retornar o próprio booleano. Então, como já dissemos, temos que executar esse código, quer que o booleano seja verdadeiro Portanto, precisamos aqui do pool seguido pelo lógico e pelo operador. Então, agora, se rolarmos, você verá que tudo funciona bem e não temos mais erros Tudo bem, vamos voltar aos controles. Temos que chamar a função do controlador de página em cada clique. Mas precisamos aqui de uma declaração condicional. Se a função do controlador de página retornar true , precisaremos executar esse código aqui. E se retornar false, apenas essa função será executada, o que é completamente suficiente. Então, precisamos aqui do controlador de página, seguido pelo lógico e pelo operador Ok, vamos verificar se tudo funciona bem. Assim, podemos ver que os controles funcionam perfeitamente. Tudo bem, então com os controles foi feito um x. Eu vou cuidar da terceira seção Se você der uma olhada no projeto finalizado, descobrirá que temos aqui um bom efeito de foco Vamos criar esse efeito usando CSS e JavaScript. Então, vamos ao arquivo style.css e atribuir à seção três cores de fundo preto Em seguida, vou selecionar a imagem do túmulo com o mouse. E vou transformar sua opacidade em uma. Além disso, precisamos aumentar o tamanho da imagem usando Transform Scale. E vamos inserir aqui também. Além disso, precisamos fazer a transição com um valor todos e 1,5 s. Ok, vamos verificar como funciona. Então, se eu passar o mouse sobre a imagem, ela ficará maior e a opacidade Ok, agora temos que cuidar do plano de fundo e fazer isso usando JavaScript. Vou usar eventos com o mouse sobre e para fora. Então, vamos em frente e selecionar a imagem das uvas. Use novamente o método seletor de consulta. Vamos passar seus túmulos IMG. Em seguida, conecte-se a um ouvinte do evento. Então, depois de passar o mouse sobre a imagem, precisamos diminuir a opacidade do invólucro da seção E quando passamos o mouse, precisamos aumentá-lo de volta para um. Então, vamos passar o mouse sobre o evento, então precisamos da função de seta. E como bloco de código, vou selecionar wrapper da Seção três usando o método querySelector E então temos que fazer com que a opacidade seja 0,5. Portanto, precisamos estilizar a opacidade igual a 0,5. Vamos duplicar esse código e mudar os eventos que precisamos aqui, a quilômetros de distância. E também precisamos mudar a opacidade. Vamos fazer disso um. Finalmente, vou usar a transição para este wrapper da seção três, que valoriza a opacidade e 1,5 s. Tudo bem, então, como você pode ver, Temos aqui um bom efeito de flutuação. Na verdade, esta seção está ficando mais escura porque atribuímos aos elementos desta seção uma cor de fundo preta 87. Projeto 9 - Torne o projeto responsivo: Tudo bem, então a maior parte do nosso projeto está concluída. Em seguida, quero tornar nosso projeto responsivo a diferentes tamanhos de tela Na verdade, não será a última parte deste tutorial porque vamos adicionar mais algumas coisas ao projeto. Vamos continuar e mudar para o modo responsivo. O projeto foi desenvolvido para um tamanho de tela maior. Estou na tela com 1920 pixels de largura e 1080 pixels de altura Portanto, o primeiro ponto de interrupção no qual eu quero fazer algumas alterações será de 1.600 pixels Eu já verifiquei esses pontos de interrupção, então não vou perder tempo com isso no vídeo No ponto de interrupção, quero personalizar para seções. Deve ser o rodapé e a segunda seção. Então, vamos continuar e criar uma consulta de mídia CSS. Em seguida, especifique a largura máxima como 1.600 pixels. Então, primeiro, vou personalizar a segunda seção. Vamos selecionar Imagem navegada de volta e alterar sua largura, Make it 35 ramp Em seguida, selecione a segunda imagem, que tem o nome da classe garrafa de vinho, e defina sua largura como marca 65. Essa sílaba. A segunda seção, Vamos passar para o rodapé Vou diminuir a largura da imagem e também o tamanho da margem nos lados esquerdo e direito. Então, vamos selecionar o conjunto Footer IMG com 245 RAM. Quanto à margem, vamos fazer com que seja 0,12 RAM nos lados esquerdo e direito Tudo bem, então o rodapé parece bom e terminamos com um O próximo terá 1.300 pixels. Nesse ponto de interrupção, cuidaremos dessas duas seções novamente. Então, vou duplicar esse código e apenas alterar os valores Vamos fazer com que a largura máxima de 1.300 pixels seja a largura da imagem traseira da vela Insira aqui na RAM. Em seguida, faça a largura da garrafa de vinho Image 60 RAM. Quanto à imagem do rodapé, vamos fazer com que sua largura seja de 35 RAM Quanto à margem, vamos fazer com que dez corra nos lados esquerdo e direito. Ok, então é isso, cerca de 1.300 pixels. Ambas as seções parecem boas. Vamos passar para o próximo ponto de interrupção. Vamos ter apenas 1.200 pixels. Então, vamos criar uma nova consulta de mídia com eles, largura máxima de 1.200 pixels Então, a primeira coisa que eu quero fazer é diminuir o espaço entre os itens de navegação. Vamos selecionar o link de navegação e definir a margem para 0,1, 0,5 GB de RAM nos lados esquerdo e direito Então, vamos cuidar do título da primeira seção. Então, primeiro de tudo, vou selecionar esse invólucro que tem o nome da classe Seção um, intitulado borracha Isso é Make with 80 por cento. E depois disso, selecione o título em si. Mude o tamanho da fonte, transforme-o em um terreno. Ok, então isso é tudo sobre a primeira seção. Vamos passar para o segundo. Vou diminuir os tamanhos desses três elementos. Quero dizer as imagens e o fundo. Então, vamos começar com o veleiro de volta. Vamos fazer sua largura. 25 RAM que eu vou selecionar para venda BTN. Eu vou mudar sua largura. Vamos fazer com que seja 15 rodadas. Em seguida, altere a altura e defina-a para o fórum. E também vou mudar o tamanho da fonte. Vamos fazer com que seja uma rampa de 1,7. E por último, vou selecionar uma garrafa de vinho. Vamos fazer sua largura. 50 correram. Ok, é isso mesmo. Sobre a segunda seção. Parece bom. E a única página que vamos personalizar no ponto de interrupção será o Rodapé Vamos seguir em frente e selecionar Imagem de rodapé. Mude sua largura, faça com que seja 25 RAM Quanto à margem, vou fazer com que ela rode 0,7. Tudo bem, então com 1.200 pixels, terminamos. Essas seções parecem e funcionam bem. Então, temos que passar para o próximo ponto de interrupção, que será de mil pixels Então, vamos criar novas mídias e especificar a largura máxima em mil pixels No ponto de interrupção, temos que fazer algumas coisas. Primeiro, vou personalizar todas essas seções , exceto a primeira. E então cuidaremos da navegação. Vou transformar o Navbar no menu de hambúrguer Vamos começar com essa seção também. Vou selecionar a Seção Dois Rubber. No momento, as imagens são colocadas horizontalmente em uma linha e eu quero mudar a direção de linha para coluna Portanto, precisamos flexionar a direção. E temos que configurá-lo para chamá-los. Além disso, vou alterar a ordem de venda atribuída a ela. Um. É isso mesmo. Sobre a segunda seção. Vamos passar para o próximo. Como você pode ver, precisamos diminuir o tamanho dos elementos porque eles são dois maiores. Vou começar com o título da Seção três. Vamos mudar o tamanho da fonte, fazer com que seja 12 rodadas. Além disso, vou selecionar a imagem da moldura. Vamos mudar sua largura e fazer com que seja sete para rodar. Quanto às uvas Image. Vou definir sua largura para 25 trilhas. Tudo bem, então com esta seção três, terminamos. Vamos passar para a próxima seção. Vou diminuir o tamanho do título, bem como o tamanho da imagem. Então, vamos selecionar o título da Seção quatro e arredondar o tamanho da fonte em oito. Quanto à nova imagem dos vinhos, vamos fazer com que sua largura seja de 60 Ran. Ok, vamos para o rodapé. No momento, os elementos são colocados horizontalmente em uma linha. E eu quero mudar a direção e colocá-los em uma coluna. E também quero mudar a ordem dos elementos. Quero colocar a imagem abaixo dessas listas. Então, vamos selecionar o invólucro da seção cinco e a coluna de direção flexível Make Selecione também Footer IMG. Vamos definir sua largura para 20 RAM. E também altere o pedido. Eu vou defini-lo para um fim. Por fim, vou selecionar menos o rodapé. Vamos definir sua largura como 20 RAM. E também vou usar margem. Vamos configurá-lo para dois REM na parte superior e inferior e, em seguida, R0 nos lados esquerdo e direito Tudo bem, então o rodapé é Personalizar e, na verdade é hora de criar um menu de hambúrguer Primeiro de tudo, vamos dar uma olhada nos projetos finalizados. Vou inspecionar a página e mudar para o modo responsivo Então, depois de mil pixels, os itens de navegação não estão mais visíveis. E temos aqui um ícone do Menu. Se eu clicar nele, essas linhas serão transformadas em um X e decidirão onde seremos exibidos do lado direito nos itens de navegação. Então, vamos ver o que vamos fazer. Primeiro, vamos ao arquivo index.html e criar a marcação HTML Portanto, o ícone do Menu será representado como o link no qual teremos três departamentos como as linhas do ícone. Então, vamos abrir um elemento com a classe Menu. Em seguida, vou inserir o desenvolvimento dentro do link. Deve ter duas classes diferentes. A primeira será a linha de menu para o estilo comum Quanto à segunda, será a linha de menu um. Ele será usado para estilos individuais. Então, no geral, teremos três linhas diferentes. Vamos duplicar essa linha de código duas vezes e alterar os nomes das classes Precisamos aqui, da linha dois do menu e da linha três do menu. Ok, então primeiro temos que ocultar o ícone por padrão porque não queremos exibi-lo até que o tamanho da tela seja menor que mil pixels. Então, vamos selecionar Menu e atribuí-lo para não exibir nenhum. Tudo bem, antes de começarmos a estilizar o ícone do menu, vamos cuidar da navegação em si. Eu vou construir a barra lateral. Então, vamos selecionar a lista de navegação e tornar sua posição absoluta Também defina as propriedades superior e direita Vou começar com a fibrina. Quanto à direita , será zero. Também mude a direção. Vou colocar os itens em uma coluna. Portanto, precisamos flexionar a coluna de direção. Como eu vejo, os itens de navegação são colocados no lado direito em uma coluna. Em seguida, vou definir a altura da lista. Vou usar aqui alguns cálculos. Como você sabe, definimos a posição superior para cinco RAM e eu quero fazer com que a altura da lista seja cem de altura da janela de visualização menos cinco Para fazer esse cálculo, vamos usar a função calc Precisamos aqui da altura de cem janelas de visualização menos cinco R&. Também altere a cor do plano de fundo. Vou torná-lo cinza escuro usando 333. Ok, então essa é a aparência da barra lateral no momento. Os itens de navegação acabaram no centro, e eu vou movê-los para cima Vamos usar o conteúdo justificado Começar. Além disso, vou criar algum espaço dentro da lista usando o valor de preenchimento para executar Tudo bem, vamos criar algum espaço entre os itens. E também vou fazer com que o canto superior esquerdo da barra lateral seja ligeiramente arredondado Então, vamos usar raio de borda com valores de 0,5 g, seguido por Em seguida, selecione o link de navegação e defina a margem como uma corrida. A lista de navegação é Personalizar e agora é hora de cuidar do ícone do Menu Mas antes disso, quero colocar o logotipo no canto superior esquerdo da página Para isso, vamos selecionar Navbar e atribuir para justificar Começar. E também crie algum espaço usando o preenchimento esquerdo com valor para rampa Tudo bem, isso é tudo sobre o logotipo. Vamos seguir em frente e começar a trabalhar no ícone do Menu. Então, vamos selecioná-lo. Em primeiro lugar, vou configurá-lo para exibir bloco, porque, como você sabe, neste momento está oculto usando display none. Em seguida, vou definir sua largura e altura. Vamos definir com dois para RAM. Quanto à altura, vamos fazer uma rampa de 2,5. E, finalmente, deixe a cor de fundo branca. Estou usando essa cor para tornar o ícone do Menu visível. Como você pode ver, o ícone do Menu acabou no canto superior esquerdo da página Portanto, temos que definir sua posição. Vamos torná-lo absoluto. Em seguida, use as posições superior e direita. Vou definir a posição superior para uma RAM. Quanto à posição correta, vamos até a rampa. Ok, agora o ícone está colocado da maneira correta. E, em seguida, temos que exibir as linhas. Então, vamos seguir em frente e selecionar Linha de menu. É o nome de classe comum para todas as três linhas. Vamos definir com 200 por cento. Então. Vou definir a altura como rampa de 0,3 e também definir a cor de fundo Vou torná-lo vermelho usando D5 e quatro zeros. Como você pode ver, as linhas são visíveis, mas são colocadas umas sobre as outras. Precisamos de algum espaço entre eles. Então, vamos continuar e usar o flexbox. Vou definir a propriedade de exibição como flexível. Então temos que mudar a direção. Vamos fazer uma coluna. E para criar algum espaço entre as linhas, vamos usar o conteúdo justificado com o espaço de valor entre elas E também se livre do fundo branco. Então, temos aqui o ícone do Menu. Tudo está personalizado e pronto para fazer essa barra lateral e o menu de hambúrguer funcionarem Então, uma vez que clicamos nessas linhas, a primeira e a terceira linha devem ser transformadas em X. Quanto à segunda linha, ela deve se mover para baixo do X. Então, primeiro de tudo, vamos selecionar as linhas E depois disso, faremos com o ícone do Menu funcione usando JavaScript. Vou selecionar a primeira linha usando a linha um do ClassName Menu Portanto, precisamos girar a linha e também movê-la levemente. Então, vou usar Transform com a função Rotate. Isso passou aqui 40 graus. E também vou usar a função Translate, que nos permitirá mover os elementos de acordo com os eixos X e Y. Então, vou passar aqui 0,5 RAM e depois uma rampa. Logo depois disso, vou selecionar a linha dois do menu No caso da segunda linha, não precisamos girar a função, só precisamos usar a função Traduzir Portanto, use transform translate com os valores menos apontando para a RAM Em seguida, para R&S para a terceira linha, vamos copiar esse código daqui e colá-lo. Vou mudar o nome da turma. Precisamos de Menu como três em vez de um. Também temos que girar a terceira linha em -40 graus. Durante a função de tradução, precisamos de Q menos uma RAM em vez de uma rampa Tudo bem, então temos aqui X por padrão, mas não precisamos disso Tivemos que transformar o ícone em X quando clicamos nele. Então, vou definir uma nova classe em CSS que será adicionada à Navbar com um método de alternância Nesta nova classe, definiremos novos estilos que serão aplicados aos elementos. Depois de clicarmos no ícone , eles serão removidos quando clicarmos novamente no ícone. Então, vamos para o arquivo script.js. E antes de tudo, ainda faltava o ícone do Menu. Vou criar uma variável, vamos chamá-la de Menu. Em seguida, selecione o elemento usando o método querySelector. Precisamos passar o nome da sua turma Menu. Depois disso. Vamos anexar a ele um ouvinte de eventos Precisamos usar o método add event listener, que deve receber dois argumentos O primeiro será o evento de clique. Quanto ao segundo, vamos pausar aqui a função de seta Em seguida, dentro dos colchetes, precisamos selecionar Navbar Vamos usar novamente o método seletor de consulta. Como dissemos, temos que adicionar uma nova classe à barra de navegação. Para isso, vou usar uma das propriedades chamada lista de classes, que inclui todas as classes dos elementos, neste caso Navbar Em seguida, precisamos alternar o método. E, finalmente, temos que passar para você className, que vem para ser alterado Ok, isso é tudo sobre JavaScript. Agora precisamos adicionar mudança de classe às linhas. Vamos usar o multicursor e inserir aqui. Para todas as três linhas, mudança de classe. Então, vou esconder a barra lateral por padrão, agora mesmo. Sua posição correta está definida como zero e precisamos de -21 corridas. E, finalmente, precisamos exibi-lo assim que você clicar no ícone. Então, precisamos mudar novamente. Seguido pelo romancista. Temos que fazer a posição correta zero. Ok? Então, se eu clicar no ícone, ele será transformado em X. E também decidirá onde seremos exibidos do lado direito A única coisa que precisamos fazer é tornar esses efeitos mais suaves usando transições Por outro lado, precisamos de uma transição com os valores corretos. E 0,5 s. Quanto à linha Menu, precisamos de transição com transformação com duração de 0,5 s. Então, tudo funciona bem. E com a Navegação, terminamos. Temos que passar para o próximo ponto de interrupção, que será de 800 picos Então, vamos criar novas mídias com largura máxima de 800 pixels. Em primeiro lugar, vou mudar a posição dos controles. Vamos colocá-los perto das bordas da página. Vamos selecionar o botão faltante e definir sua posição esquerda para executar Em seguida, vou selecionar o BTN correto e também a posição correta para correr Em seguida, vou diminuir o tamanho do título da primeira página. Então, vamos selecioná-lo usando o título da Seção 1 da classe. Vamos fazer com que o tamanho da fonte seja seis redondo. Ok, isso é tudo sobre a primeira seção. Vamos passar para a segunda seção. Vou diminuir o tamanho dessas imagens. Então ainda faltava navegar de volta e fazer com que sua largura fosse de 20 RAM Além disso, vou selecionar uma garrafa de vinho. Vamos fazer sua largura para correr. Tudo bem, então a Seção dois parece boa. Vamos passar para o próximo. Vou mudar o tamanho do cabeçalho e sua opacidade E também vou diminuir o tamanho da imagem da moldura. Então, vamos em frente e começar com o título. Vamos selecioná-lo. Mude o tamanho da fonte, faça com que seja 11 RAM. Em seguida, defina a opacidade 2.7. Depois disso, vamos selecionar a imagem do quadro e fazer com que sua largura seja arredondada em 60. Tudo bem. Em seguida, temos a seção quatro, na qual precisamos diminuir o tamanho da imagem. Então, vamos selecionar uma nova imagem de vinhos e fazer com que sua largura 45 percorra a Seção quatro e também as fotos pareçam boas. E a única coisa que vou fazer no ponto de interrupção é mudar a posição da barra de progresso Quero colocá-lo no topo da página. Então, vamos seguir em frente e selecionar Progress wrapper. Em seguida, defina sua posição superior como zero. Além disso, precisamos de 50% restantes. E para centralizar perfeitamente os elementos, vamos usar Transform, Translate X e inserir você -50 por cento Ok, então com 800 pixels, terminamos, e é hora de passar para o próximo ponto de interrupção, que será de 600 pixels Então, vamos selecionar Nova mídia e definir a largura máxima para 600 pixels Vamos começar com a primeira página. Vou diminuir o tamanho do cabeçalho. Então, vamos selecionar o título e fazer com que o tamanho da fonte seja quatro redondo. Em seguida, vamos passar para a segunda seção e, novamente, tornar essas imagens e botões menores. Vamos começar navegando de volta. Defina sua largura para 15. Corra. Então eu vou selecionar uma garrafa de vinho. Vamos fazer sua largura. Então, para correr e muito. Cuide do botão, vamos selecioná-lo. Faça com que sua largura seja 12 RAM e defina a altura como três RAM. E também altere o tamanho da fonte. Atribua um ponto para a corrida. Em seguida, vem a Seção três. Vou diminuir o tamanho do título e também da imagem da moldura. Vamos selecionar o título e fazer com que o tamanho da fonte seja dez RAM. Quanto à imagem da moldura, vou fazer sua largura 35 rampa. Ok, então essa seção três parece boa. E a seguir, temos a Seção quatro. Vou diminuir o tamanho do título e também quero diminuir a imagem. Então, vamos prosseguir e selecionar o título da Seção quatro. Faça com que o tamanho da fonte seja seis redondo. Quanto à nova imagem, vou definir sua largura para 35 g. Tudo bem, então acho que é isso sobre esse ponto de interrupção E agora temos que definir os últimos pontos de interrupção, que serão 500 pixels Então, vamos criar uma nova mídia com uma largura máxima de 500 pixels. Então, primeiro de tudo, eu quero diminuir o tamanho da fonte dos elementos HTML. No momento, N é igual a 62,5 por cento, e eu quero diminuí-lo para 45% Então, vamos fazer com que o tamanho da fonte do HTML seja 45%. Em seguida, vamos mudar um pouco a posição dos controles. Então, faltou o botão esquerdo. Faça sua posição esquerda. 0,5 RAM. Quanto ao botão direito, também vou definir sua posição correta, 2,5. Ok, depois disso, vou mudar um pouco a posição da barra lateral Vamos selecionar, não menos importante, e fazer sua primeira posição. 6.5 g. Tudo bem, a seguir, vamos cuidar desta seção três Vou começar com o título da Seção três. Vamos definir o tamanho da fonte. Oito RAM Também como as uvas Image, faça com que sua largura seja de 15 graus. Além disso, vou mudar a largura da imagem ao passar o mouse Vamos selecionar a imagem de uvas com mais e definir com 225 rampa. Tudo bem, então finalmente tornamos nosso projeto responsivo a diferentes tamanhos de tela. Eu acho que está bonito. Então, podemos dizer que estamos quase terminando os projetos. Mas antes de terminarmos este tutorial, quero adicionar mais um efeito interessante ao projeto. Ok, vamos dar uma olhada nos projetos finalizados. Portanto, se eu rolar a página a escala dessas seções será alterada sem problemas Por padrão, o tamanho dessas seções é maior e, quando rolamos ou clicamos nos Controles , a escala diminuirá em geral , criando um efeito agradável e interessante O único problema que temos com esse efeito é que os navegadores têm um pouco de dificuldade para realizar esse efeito. Então, às vezes você pode dizer que não funciona perfeitamente. De qualquer forma, vou criar esse efeito e você pode adicioná-lo ao projeto ou não. Depende de você. Ok? Então, a primeira coisa que preciso fazer é aumentar a escala dos rappers desta seção por padrão Então, vamos atribuir a eles, transformar com essa função de escala e fazer a escala 1,5 Também vou usar a transição com os valores all e 2 s. Como lembre-se, atribuímos transição ao invólucro desta Seção três E vou me livrar disso porque ele substituirá a transição que acabamos de atribuir a este wrapper de seção Como você pode ver, os tamanhos de todas as páginas aumentaram. Na verdade, quando carregamos o projeto, precisamos escalar para ser um por padrão na primeira página. E eu vou fazer isso a partir do JavaScript. Vamos selecionar o rapper da Seção 1. Vou criar uma nova variável. Vamos chamá-lo de wrapper da Seção 1 e, em seguida, selecionar os elementos usando o método querySelector Vamos fazer uma pausa aqui, aula, Seção 1, rapper. Depois disso, vamos fazer sua escala um. Portanto, precisamos de transformação de ponto de estilo igual à função de escala com valor um. Tudo bem? Portanto, precisamos alterar a escala das páginas, quer ser Scroll e clicar nos Controles Mas antes de tudo, vamos cuidar do evento sobre rodas. Aqui temos algumas declarações condicionais nas quais verificamos se o touro é verdadeiro ou falso Então, se for verdade, então temos que diminuir a escala da seção apropriada. Portanto, temos que transformar essa declaração condicional em uma declaração if Vamos passar o ano Bu como condição. Primeiro, vou escrever o código e depois explicar como ele funciona. Portanto, precisamos selecionar esse invólucro de seção. Vamos usar o QuerySelector para abrir aqui os crases e passar o nome da classe Agora precisamos definir o número desse invólucro de seção. E para fazer isso, temos que usar novamente a condicional onde verificamos se Delta Y é verdadeiro ou falso Se for verdade, então precisamos de um contra-ataque. E se for falso, precisamos do contador dois seguido pelo invólucro Ok, então, uma vez que o invólucro de seção apropriado é selecionado, temos que diminuir a escala ou deixá-la como está Então, precisamos aqui Style dot transformar isso novamente, abrir crases. Use a função de escala. E como valor, vou passar novamente aqui as afirmações condicionais onde verificamos se Delta Y é verdadeiro ou falso Se for verdade, então, como valor da função de escala, temos que passar 1,5. E se o Delta Y for falso, então precisamos de um. Portanto, quando rolamos a página para baixo, o número desse invólucro de seção se tornará um contador Suponha que estamos falando sobre a primeira página. Então, selecionaremos a primeira página e sua escala se tornará 1,5. Porque, novamente, o Delta Y é verdadeiro. Se rolarmos para cima, delta Y será falso. O número desses invólucros de seção se tornará contra o qual, por outro lado, diminuirá em um E selecionaremos novamente a primeira página. E neste caso, é escalável com diminuição porque Delta Y é falso Faz sentido? Tudo bem, então o efeito de escala funciona parcialmente Quero dizer, as próximas páginas não estão aumentando. E para corrigir isso, vou duplicar esse código Então, por causa disso, precisamos manipular a próxima página Precisamos aumentar os dois contadores em um. Então, vamos adicionar aqui mais um. Além disso, temos que mudar os lugares desses valores. Ok, então agora, se rolarmos para baixo, as próximas páginas também mudarão a escala E vamos fazer o mesmo se rolarmos para cima. Então, tudo funciona bem até chegarmos ao rodapé e rolarmos novamente Como você pode ver, a primeira página está sendo exibida em uma escala maior Isso acontece porque booleano é falso e se as instruções estão funcionando na função do controlador de página Também precisamos definir as escalas nas declarações if. No momento, temos que trabalhar nos invólucros da Seção um e da Seção Temos todos esses invólucros selecionados da Seção 1. Vamos fazer o mesmo com esta Seção cinco também. Vou duplicar essa linha de código e transformar uma em cinco Portanto, se a condição na primeira declaração if for verdadeira, quero dizer, se navegarmos do rodapé para a primeira página, precisamos diminuir a escala do invólucro da primeira seção E, ao mesmo tempo, precisamos aumentar a escala do rodapé Portanto, precisamos da Seção 1, transformação de pontos no estilo rapper dot, escalar com o valor um. Vamos duplicar essa linha de código. Mude o invólucro da Seção 1 para o invólucro da Seção cinco. E também como valor da função de escala, precisamos de 1,5. Tudo bem, precisamos que seja semelhante na segunda declaração if, mas com valores de escala opostos Vamos pegar esse código, colá-lo aqui e alterar os valores. Precisamos de 1,5 e abaixo de um. Agora, se rolarmos para cima e para baixo, tudo funcionará bem Tudo bem? Então, vamos, quero dizer, com a rolagem, terminamos E, finalmente, temos que cuidar dos controles. Precisamos dos mesmos efeitos de transição quando clicamos nas setas brancas latinas Portanto, se o booleano for verdadeiro, precisamos definir as escalas para os invólucros dessa seção Se for falso, a função do controlador de página o gerenciará automaticamente. Precisamos de declarações em que verifiquemos se o touro é verdadeiro ou falso. Se for verdade do que no caso do botão esquerdo, temos que selecionar este envoltório de seção com o contador dois Então, vamos usar o QuerySelector. Em seguida, abra os crases e insira sua seção. Como o número dessa ação. Precisamos passar seu balcão dois, seguido pela embalagem Temos que diminuir sua escala para um. Portanto, precisamos que o estilo não se transforme igual à escala com o valor um. Portanto, esse código se refere à próxima página A para a página que está saindo Vamos duplicar esse código Nesse caso, precisamos do contador dois mais um e temos que aumentar a escala para 1,5. Ok, vamos ver o botão Sobre o esquerdo. Vamos copiar todas as instruções if e colá-las também no botão direito. Portanto, precisamos deixar a primeira parte como está como parte da segunda em vez do contador dois mais um, precisamos apenas do contador um. Portanto, se marcarmos e clicarmos em Controles , ele funcionará perfeitamente. Tudo bem, então parabéns. Finalmente terminamos o projeto. Espero que tenha sido interessante e útil. Talvez tenha sido um pouco desafiador, mas espero que você tenha conseguido 88. Projeto 10 - Pré-visualização do projeto: Tudo bem, então é hora de construir nosso próximo projeto, que será o clone de um dos mais populares e comumente sites mais populares e comumente usados chamado Paypal, criará a interface de usuário das diferentes Estou na página principal, páginas de login e inscrição. É claro que não será o clone exato com todas as funcionalidades Como eu disse, criaremos apenas uma interface de usuário com HTML, CSS e JavaScript. O Paypal parece diferente em diferentes países. A interface do usuário muda com frequência de tempos em tempos. Portanto, não se preocupe se esse não for o clone exato da interface atual Tudo bem, então antes de começarmos a escrever o código, primeiro, vamos descrever a aparência do projeto Então, como eu disse, criaremos três páginas diferentes, login principal e inscrição. Começaremos com a página principal. Ele consistirá em algumas seções diferentes. A primeira seção será o banner com navegação Temos aqui vários itens de navegação. Se eu passar o mouse sobre eles, o menu suspenso será Ele mudará quando passarmos mouse sobre outro item de navegação Além disso, teremos aqui dois botões diferentes para fazer login e se inscrever. Se eu clicar neles, navegaremos até a página correta. Então, o banner será seguido pela segunda seção. Ele incluirá três partes diferentes com Font, ícones incríveis, alguns elementos de texto e botões. Em seguida, teremos essa seção azul com alguns parágrafos diferentes A seguir, criaremos esta pequena seção aqui com uma imagem e três etapas diferentes. Abaixo, teremos um botão para se inscrever, seguido pelo rodapé Tudo bem, então vamos ver a página principal. Vamos dar uma olhada na página de login. Será bastante semelhante à página de login original. Teremos aqui dois campos de entrada com botões. Essa provavelmente é a página de inscrição. Ele consistirá em duas partes. No lado esquerdo, teremos várias imagens dos clientes. Quanto ao lado direito, ele incluirá duas opções diferentes. Se queremos criar uma conta pessoal ou comercial. Tudo bem, então isso é tudo sobre o projeto. Como de costume, vamos torná-lo responsivo a diferentes tamanhos de tela Se eu inspecionar a página e mudar para o modo responsivo, você verá que ela é Uma coisa a observar aqui: em telas menores, não teremos mais os menus suspensos Eles se transformarão no menu assim. Ok, então é isso. Estamos prontos para começar a construir o projeto. Então, vamos seguir em frente. 89. Projeto 10 - Criar e Estilo de página de destino - Parte 1: Tudo bem, então estamos prontos para começar a construir os projetos. Eu criei uma nova pasta na área de trabalho chamada papal clone, na qual tenho outra pasta para as imagens Vamos abri-lo no código VS e criar nossos arquivos de trabalho para HTML, CSS e JavaScript. Vou chamá-los de index.html, style.css e script.js. Em seguida, abra o arquivo index.html e crie o documento HTML básico. Para isso, vou usar um dos pacotes integrados do VS Code chamado image. Precisamos colocar seu ponto de exclamação e pressionar Tab ou Enter. Então, vamos lá. Temos aqui as tags HTML básicas. A primeira coisa que vou fazer é mudar o título. Será enviado dinheiro, pago on-line ou configurado uma conta comercial Em seguida, precisamos vincular os arquivos CSS e JavaScript ao HTML. Então, vamos abrir uma tag de link e especificar a parte do arquivo CSS que precisamos: style.css. Quanto ao JavaScript, vou abrir a tag de script logo acima da tag do corpo de fechamento. E então precisamos especificar o caminho do arquivo JavaScript no atributo source. Tudo bem, então todos os três arquivos estão vinculados. Em seguida, vou trazer outro link de CDN. Durante todo o projeto. Vou usar os ícones Font, Awesome. Então, vamos ao Google e pesquisar por Font Awesome CDN js Em seguida, pegue o primeiro link. A partir daqui, abra uma tag de link nos elementos principais e cole o link como o valor dos atributos de referência h. Ok, finalmente, vou executar o projeto no navegador usando um dos pacotes de código de visualizações chamado de servidor ativo e nos permite executar o projeto durante a vida útil do navegador e fazer as alterações e atualizações sem atualizar a página Cada vez. Vamos colocar o ator e o navegador. Assim mesmo. E comece. Vamos construir o projeto seção por seção. Em cada seção, criaremos a marcação HTML. Em seguida, escreveremos um pouco de CSS. Vou começar com a primeira seção, que incluirá poros suficientes e o banner Primeiro, vamos abrir a tag div, que será o contêiner Ele envolverá todo o conteúdo. Em seguida, vou abrir outra tag div que incluirá o conteúdo da página inicial Mas primeiro, vamos inserir seus comentários na primeira página. Em seguida, abra a tag div com a primeira página da classe. Em seguida, vou inserir novos comentários, seção um. E a seção um. Em seguida, abra um elemento de seção com uma classe, seção um. Então, como dissemos, a primeira seção consistirá em duas partes principais. Teremos uma barra de navegação e um banner. Então, vamos começar a criar o napa. Em primeiro lugar, vou abrir uma tag div, que será o invólucro da navegação Vou chamá-lo de embalagem de napa. Em seguida, vou abrir a tag HTML5, chamada nef , com a classe Portanto, teremos algumas partes diferentes na barra de navegação Teremos um logotipo e, em seguida, alguns itens da lista com menus suspensos E também teremos dois botões. Vamos continuar e criar um logotipo. Vou abrir a tag div com a classe. Agora, para um logotipo. Em seguida, vou passar sua etiqueta de extensão, que envolverá a primeira letra do papal. Essa é essencialmente a classe P1 e insira aqui P. Além disso, precisamos aqui de outros elementos de extensão com uma classe P2 E então, novamente, inseto em seu p.sit. Então, usaremos esses dois elementos de extensão para personalizar o logotipo. Quanto ao resto das cartas, vamos interromper aqui. Papel. Tudo bem, vamos ver o logotipo. Agora, vou criar listas. Teremos a lista principal com três itens da lista. E esses itens da lista terão seus próprios menus suspensos. Vamos abrir uma tag de lista com a classe nav list. Em seguida, precisamos dos elementos LI com um nome de classe, item da lista de navegação Ele deve ser seguido pelo elemento link, que terá className nav, link de lista E como conteúdo, vou inserir seu pessoal. Então, nos dois primeiros itens da lista, teremos uma seta no lado direito. Então, vou passar para você o ícone Font Awesome. Vamos abrir o elemento I com uma classe que é FAS. Fa, Chevron down Vamos duplicar o elemento LI duas vezes e fazer O segundo item será um negócio. Quanto ao terceiro item serão parceiros e desenvolvedores. E aqui não precisamos de uma seta porque esse item ONE tem um menu suspenso. Tudo bem, então agora não vou inserir seus menus suspensos Nós cuidaremos deles um pouco mais tarde. Em seguida, temos que cuidar dos botões. Vamos abrir a tag div com os botões da barra de navegação da classe. Em seguida, insira aqui um elemento de botão com a classe agora para btn. E também precisamos aqui de outra classe para estilos individuais, Login btn. Quanto ao conteúdo, vamos inserir seu login. Então vamos duplicar o botão, mudar o nome da classe Precisamos nos inscrever btn e também alterar o conteúdo Inscrição no instituto. Certo, então não tínhamos pobres, acabamos. Vamos passar para Like of the banner. Deseja abrir uma tag div que será o invólucro do banner Portanto, o banner incluirá três elementos diferentes. O primeiro será o título. Vamos abrir a tag de cabeçalho H1 com o título do banner da classe com o conteúdo Nós temos o que você precisa. Então precisamos de um parágrafo. Vamos abrir a tag P com o parágrafo do banner da classe e instituir um texto fictício Depois disso, vou abrir a tag de botão com a classe blue btn. E com o conteúdo, saiba mais. Eu usei aqui a classe blue btn. Será uma espécie de nome de classe comum porque teremos alguns botões azuis semelhantes. Tudo bem, então é isso em relação à marcação HTML desta primeira seção Agora podemos começar a escrever um pouco de CSS. Antes de fazermos isso, vou trazer mais um link para a fonte. Durante todo o projeto. Vou usar uma das fontes do Google. Então, vamos ao site do Google Fonts e pesquisar a fonte chamada abaixo O A2. Vou selecionar todos os estilos diferentes. Em seguida, pegue o link e cole na cabeça. Tudo bem, agora podemos escrever o CSS. Em primeiro lugar, vou criar alguns estilos comuns e redefinidos. Vamos inserir seus comentários. Estilos comuns de estilos comuns. Em seguida, vou selecionar cada elemento para isso. Temos que usar um asterisco. Então, primeiro de tudo, vamos eliminar o padrão, a margem e o preenchimento Vou definir os dois como zero. Então eu vou fazer uma caixa de borda do tamanho de uma caixa. Além disso, para remover a base padrão dos elementos do link, precisamos de nenhuma decoração de texto. O próximo será o estilo de lista tipo none. Isso removerá os marcadores padrão dos itens da lista. Depois disso, vou me livrar do esboço padrão. Vamos defini-lo como nenhum. E, finalmente, conforme definido como família de fontes, vamos usar aqui abaixo dA2, coercitivo Tudo bem. Como você pode ver, todos os estilos comuns e redefinidos são aplicados aos elementos em todo o projeto. Vou usar a rampa como unidade de medida. Por padrão, uma sala é igual a 16 pixels, porque o tamanho da fonte do elemento HTML é igual a 16 Quero converter 1 g em dez pixels porque acho que seria mais conveniente e fácil de usar. Então, para fazer isso, temos que diminuir o tamanho da fonte do elemento HTML e torná-lo em 62,5% Então você pode ver que todos os elementos ficaram menores. Tudo bem, então, finalmente, estamos prontos para começar a personalizar a primeira seção Vamos continuar e inserir seus comentários na seção um. Em seguida, selecione a Seção 1 e defina sua largura e altura. Vou definir com 200 por cento, como provavelmente a altura. Vamos fazer com que seja 65% da janela de visualização. Em seguida, vou definir a imagem como plano de fundo da primeira seção. Até onde vou usar aqui, uma função de gradiente linear, que nos permitirá escurecer um pouco o fundo Portanto, a direção da transição de cores será de baixo para cima. Vamos usar aqui dois valores RGBA diferentes. E a primeira, vou inserir 3083 vezes com a opacidade 0,7 Já a segunda será da mesma cor, mas com uma Vamos fazer com que seja 0,6. Em seguida, vou especificar o URL da imagem. Temos uma pasta chamada imagens e precisamos selecionar PG dot JPG. Além disso, vou definir a posição da imagem de fundo. Vamos colocá-lo no centro. E então não precisamos repetir. Finalmente, vamos definir o tamanho do plano de fundo a ser coberto. Tudo bem, então vamos considerar que a imagem está definida como plano de fundo desse elemento da seção Em seguida, vou cuidar do Navbar. Vamos selecionar seu rapper. Quero dizer, embalagem de Napa. Vou definir sua largura. Vamos fazer com que seja 100%. Em seguida, vou definir a altura para oito RAM. Então precisamos de uma borda na parte inferior. Vamos atribuir valores de verdade de 0,1, executar de forma sólida e chamar AAA Tudo bem, a seguir, vou selecioná-lo agora para si mesmo. Defina-o dentro da altura. Vou definir a largura para 120 RAM. Quanto à altura , será de 100%. Depois disso, vou alinhar a linha linear horizontal dos elementos E para isso, vamos usar o flexbox. Precisamos de display flex para criar algum espaço entre os itens flexíveis usando justificar o espaço de conteúdo Para alinhar os itens no centro verticalmente, precisamos alinhar Tudo bem, itens de barra vendidos o suficiente são colocados horizontalmente. E agora vou colocar a navegação em si no centro. Para isso, vamos usar novamente o flexbox. Precisamos de display flex e, em seguida, justify-content center. Tudo bem, então a navegação está alinhada e agora vou personalizar cada elemento da barra de Vamos começar com o logotipo. Selecione o invólucro. Vou definir o tamanho da fonte 3,5 RAM. Então eu vou fazer a fonte. Itálica. Também torne-o mais ousado. Vou definir a fonte como 800 e depois mudar a cor, torná-la branca. Tudo bem, então o logotipo já está bom, mas temos que personalizá-lo um pouco mais Como você sabe, envolvemos a primeira letra com um elemento de extensão. Fizemos isso porque a primeira letra será diferente. Vamos selecioná-lo com a classe P1. Vou definir o tamanho da fonte para 4,5 RAM. E então crie algum espaço no lado direito usando a margem direita, uma corrida. Ok, então considera-se que a primeira letra se tornou um pouco maior do que as outras letras. Em seguida, vou personalizar o segundo elemento de extensão. Vamos selecioná-lo com a classe P2. Eu vou para O tamanho da fonte para 4,5 RAM. E depois mude a cor, torne-a BBB. Tudo bem, depois disso, vou mudar a posição do segundo elemento de extensão Vou definir sua posição como absoluta. Então, para alinhá-lo acordo com seu elemento principal, que é o logotipo, vou atribuir ao logotipo a posição relativa E depois disso, vamos definir as propriedades superior e esquerda para a segunda extensão. Vou configurar o melhor asfalto de 2,4 RAM. A posição esquerda será de 0,5 corrida. Portanto, a posição do segundo elemento de extensão é fixa, mas como você pode ver, ela acabou acima do primeiro P. Vou corrigir isso usando a propriedade z-index Mas, primeiro, temos que definir a posição do primeiro elemento de extensão. Caso contrário, a propriedade z-index não funcionará. Então, vamos seguir em frente e definir sua posição como relativa. E então use a propriedade z-index com um valor maior que zero Vamos fazer dez. Tudo bem, então com o logotipo, terminamos Agora é hora de cuidar dos itens de navegação 90. Projeto 10 - Criar e Estilo de página de destino - Parte 2: Tudo bem, então vamos continuar colocando lado a lado a primeira seção Todos nós já personalizamos o logotipo e agora é hora de cuidar dos itens de navegação Vamos selecionar a lista de navegação. Vou colocar os itens de navegação horizontalmente em uma linha, então precisamos exibir o flex. Considera-se que os itens de navegação são colocados lado a são colocados lado Em seguida, vou personalizar os elementos LI. Então, vamos selecionar o item da lista. Eu vou fazer uma boa altura. Vamos criar oito RAM e, em seguida, criar algum espaço dentro da lista. Precisamos de estofamento para a rampa. Ok, a seguir, vou centralizá-los verticalmente. Para isso, vou usar novamente livros de fluxo. Vamos ajustar a exibição para flexionar e, em seguida, alinhar os itens no centro. Tudo bem, depois disso, vou estilizar os links. Então, vamos selecionar pelo menos um link. Em primeiro lugar, vou definir largura e altura. Vamos fazer os dois 100 por cento. Isso aumenta o tamanho da fonte, faça com que seja 1,7 rem. Além disso, vou mudar o peso da fonte. Vamos configurá-lo para 400. Em seguida, coloque o texto em maiúsculas. E finalmente mude a cor, torne-a branca. Na verdade, as setas também devem ser estilizadas porque fazem parte dos elementos do link Vamos verificar o código HTML. Então, como você pode ver, eles são colocados fora dos links. Isso não está correto. Então, vamos em frente e consertar isso rapidamente. Ok, agora os links parecem muito melhores. Eles são colocados um pouco acima dos itens da lista para centralizá-los verticalmente Vamos usar novamente o flexbox Precisamos exibir, flexionar e alinhar o centro dos itens. Tudo bem, vamos seguir em frente e personalizar essas setas. Eu vou torná-los um pouco menores. E também precisamos de algum espaço no lado esquerdo. Então, vamos selecionar o elemento I. Vou definir o tamanho da fonte para 1,5 rem e, em seguida, criar espaço no lado esquerdo usando margin-left com valor de 0,5 Tudo bem, então vamos ver os links e as setas. Eles estão bonitos. Antes de prosseguirmos e iniciarmos os botões, vou criar um efeito de foco Quero exibir uma linha branca no final dos itens de navegação. E também vou girar essas setas. Vamos começar com as linhas brancas. Eles serão criados usando a borda inferior. Então, vamos selecionar um item da lista com o mouse atribuído a ele, borda inferior com os valores apontando para ram, sólido e a cor branca E também use a parte inferior da borda de transição. E então use um pouco de tempo de duração, 0,1 s. Tudo bem, então aqui temos bons efeitos de foco. Como eu disse, também vamos girar as setas ao passar o mouse Então, vamos selecionar o item da lista com o mouse, seguido pelo elemento I. Precisamos transformar e , em seguida, girar a função com a direção z como valor Eu vou passar aqui 180 graus. E, novamente, use transição com valores transformando 0,3 s. Então, quando passarmos o mouse sobre a haste do item, as setas girarão Tudo bem, então finalmente podemos seguir em frente e personalizar os botões da barra de navegação Temos dois botões diferentes. Eles terão alguns estilos comuns. Então, primeiro, vamos selecioná-los usando o nome de classe comum navbar, btn Eu vou definir a largura. Vamos fazer disso um bonde. Em seguida, crie algum espaço dentro dos botões usando o preenchimento Vamos configurá-lo para 0,7 rem. Também precisamos de margem. Vamos configurá-lo para 0,3 RAM e, em seguida, arredondar os botões usando raio da borda com valor. Se aumentarmos. Tudo bem, vamos seguir em frente e adicionar alguns outros estilos aos botões Vamos definir fronteira. Vou configurá-lo para apontar para um rem, sólido e branco. Em seguida, defina o tamanho da fonte. Vamos fazer disso uma observação sobre a RAM. E também mude o tipo do grosseiro, faça com que ele aponte. Tudo bem, então vamos ver os estilos comuns. Agora precisamos de alguns estilos individuais para os dois botões. Vamos selecionar o primeiro usando o enésimo seletor de filhos. Vou definir a cor de fundo como transparente. Quanto à cor, vamos torná-la branca. Então eu vou duplicar esse código. Nós precisamos aqui. Enésimo filho com o número dois. Em seguida, a cor de fundo será branca. Quanto à cor do texto, vou torná-lo cinza escuro usando a cor 62626 Tudo bem, então os botões são personalizados e, na verdade, da nossa parte, terminamos Vamos seguir em frente com um banner personalizado. Vamos selecioná-lo. Em primeiro lugar, vou definir sua largura. Vamos fazer com que seja 100%. Depois disso. Vamos cuidar de sua posição. Vou definir sua posição como absoluta. Então, precisamos de um posicionamento relativo para esta seção em si, porque é o elemento pai Depois disso, vamos definir a posição superior. Vou defini-lo para 25 por cento. E também reproduz o conteúdo no centro usando o centro de alinhamento de texto Tudo bem, então o banner está posicionado. Vamos começar a personalizar seus elementos. Vou começar com um título de banner. Vamos aumentar o tamanho da fonte. Faça seis RAM. Em seguida, defina a espessura da fonte para 300. Também mude a cor, torne-a branca. E crie algum espaço na parte inferior usando a margem, três rampas inferiores Tudo bem, então o título é personalizado. Vamos passar para o parágrafo. Vou selecionar o parágrafo do banner. Vamos aumentar o tamanho da fonte, torná-la 1,8 RAM. E também mude a cor, torne-a branca. Depois disso, vou diminuir sua largura. Vamos fazer com que seja 50%. Na verdade, o parágrafo deve ser colocado no centro do banner Então, vamos fazer isso usando margem. Vou defini-lo como zero. Então, precisamos de 0 linhas nos lados esquerdo e direito. Ele colocará o elemento no centro. Quanto à parte inferior, será para n. É isso sobre o parágrafo. Finalmente, temos que cuidar do fundo. Vamos selecionar blue btn. Vou definir sua largura para 35 passos e a altura será cinco rem. Também altere a cor do plano de fundo. Faça com que seja 036, B0, B1. E mude a cor, torne-a branca. Vamos continuar e adicionar um pouco mais de estilo ao fundo. Eu vou fazer a volta usando um raio de borda. Nós corremos. Em seguida, livre-se da borda padrão e defina-a como nenhuma. E, finalmente, cuide das fontes. Vou aumentar o tamanho da fonte. Vamos torná-lo com 1,6 RAM e também torná-lo um pouco mais ousado usando o peso de fonte Tudo bem, então o Buxton foi instalado e, na verdade, terminamos com Agora é hora de seguir em frente e adicionar os menus suspensos à navegação 91. Projeto 10 - Crie e faça menus suspensos: Tudo bem, então estamos quase terminando a primeira seção. A única coisa que vou fazer é criar um menu suspenso. Depois de passar o mouse sobre os dois primeiros itens de navegação , o menu suspenso aparecerá e poderá alternar os Primeiro, precisamos criar a marcação HTML. No primeiro menu suspenso, abordaremos o primeiro elemento LI Vamos criar aqui outra lista com o menu suspenso class nav Portanto, cada lista suspensa terá quatro itens de lista diferentes E cada item da lista em si terá dois links diferentes. Então, vamos abrir a tag LI com o item suspenso class nav. Então vou passar aqui a tag de link com a classe nav, drop-down, Um. Vamos instituir como o Paypal funciona. Em seguida, duplique esse código, altere o nome da classe e também altere o conteúdo Vai ser: o que você pode fazer com uma conta pessoal? Tudo bem, vamos duplicar o item da lista três vezes e alterar o conteúdo. Nós precisamos aqui. Pague online. Em seguida, online, pagamento sem fronteiras. Em seguida, o próximo será enviar pagamentos do que precisamos para enviar pagamentos para o exterior. Quanto aos dois últimos elementos do link, precisamos aqui pesquisar ofertas e depois pagar com o PayPal e enviar dinheiro. Tudo bem, então é isso em relação ao primeiro menu suspenso. Eu vou copiá-lo. E então vamos colá-lo no segundo elemento LI na navegação principal. Vou mudar rapidamente o conteúdo. Então, precisamos aqui de todas as soluções de negócios. Então teremos C ou gama de produtos. Em seguida, temos, exceto pagamentos on-line. Em seguida, receba o pagamento em seu site, envie faturas. O próximo será criar faturas on-line por e-mail E, finalmente, precisamos vender internacionalmente. E o Paypal apoia seu crescimento global. Ok, então aqui temos os menus suspensos. Eles estragaram o layout do nanoporo, mas nós cuidaremos disso. No início. Vou criar menus suspensos e depois faremos com que funcionem Antes de fazermos isso, vou esconder o segundo menu suspenso por Vamos atribuir a ele um primeiro nome temporário. Agora, de baixo para baixo, selecione-o no arquivo CSS e atribua-o a ele. Não exibir nenhum. Tudo bem, depois disso, vou selecionar uma lista suspensa suficiente Vamos definir sua largura e altura. Vou definir a largura para 100%. Quanto à altura, vamos configurá-la para 20 RAM e também alterar a cor de fundo. Vou usar gradiente linear. Em primeiro lugar, vamos definir a direção da transição da esquerda para a direita. E então eu vou passar três cores. O primeiro será 066399. Então precisamos f, f, df. Quanto à terceira cor , será a primeira. Então, vou copiá-lo e colá-lo. Você pode ver que precisamos cuidar da posição do menu suspenso. Então, vamos definir sua posição como absoluta. Vou posicionar o menu acordo com o elemento da seção. Todo esse elemento de seção já está posicionado em relação. Precisamos aqui das oito primeiras RAM para que a posição esquerda seja zero. Então, o menu suspenso está posicionado. Mas temos aqui um pequeno problema. O banner é colocado na parte superior do menu. Vamos corrigir isso usando a propriedade z-index. Vamos definir 200. Tudo bem, agora o problema está resolvido e podemos começar a personalizar os itens do menu suspenso. Vamos selecioná-los. Primeiro de tudo, vou configurar com 225 RAM e depois criar espaço usando margem. Vou definir a margem para dois rem na parte superior e inferior e Tanner M nos lados esquerdo e direito Como você sabe, cada item consiste em dois links diferentes. Eles devem ser colocados um em cima do outro. Vamos fazer isso usando o flexbox. Vou configurar a tela para flexionar. E então precisamos de uma coluna de direção flexível. Tudo bem, a seguir, vou personalizar os links. Vamos começar com o primeiro link. Precisamos selecionar o nafta ou o downlink 1. Vamos definir o tamanho da fonte para 1,6 RAM. Quanto à cor, vamos torná-la branca. Então eu vou duplicar esse código. Precisamos aqui do link para. Quanto ao tamanho da fonte , será 1,3 rampa. Tudo bem, então os links parecem bons, mas como você pode ver, temos que cuidar do alinhamento deles Eles devem ser colocados no centro em duas linhas. Então, vou definir o preenchimento. Vamos torná-lo zero na parte superior e inferior e zero na RAM nos lados esquerdo e direito. E, novamente, vou alinhar os elementos usando o flexbox Precisamos de display flex. E para colocar os itens flexíveis no sensor, precisamos do justify-content Agora os itens são colocados no centro, mas precisamos colocá-los em duas linhas. Quero dizer, temos que quebrá-los por isso. Vamos usar a embalagem flexível com uma embalagem de valor. Tudo bem, então os itens do menu suspenso são E agora podemos criar um efeito de foco. Por padrão, o menu suspenso deve estar oculto. Depois de passar o mouse sobre o item, ele deverá ser exibido Além disso, também precisamos mudar a cor de fundo da barra de navegação. Podemos criar o superalimentado com CSS para o menu suspenso, mas não podemos criá-lo dobrável agora Porque se selecionarmos o item da lista com o mouse, ainda gostaremos do elemento pai ou de qualquer um dos avós O mouse não funcionará. Então eu decidi criar efeitos de terror usando JavaScript. No momento, o segundo menu suspenso não exibe nenhum. Então, vamos em frente e nos livremos desse código a partir daqui. E também vou remover o nome da classe temporária que adicionamos ao segundo menu suspenso. Depois disso, vou esconder os menus suspensos. Para isso. Vamos usar opacidade zero e visibilidade oculta. Tudo bem, como você pode ver, os menus suspensos Vamos ao arquivo JavaScript e à entrevista, comentários, navegação. Em seguida, n de navegação. Em seguida, precisamos selecionar o primeiro e o segundo itens de navegação simultaneamente. Para conseguir isso, vou atribuir a ambos os elementos Os nomes de classes comuns. Vamos chamá-lo de suspenso, passe o mouse. Depois disso, vamos criar uma nova variável. Eu vou chamar isso de itens suspensos. Em seguida, selecione o primeiro e o segundo elementos LI usando o método querySelector all Temos que especificar aqui o nome da classe, passe o mouse no menu suspenso. Então, agora selecionamos os dois itens de navegação. Em geral, o método seletor de consulta all retorna um objeto semelhante a uma matriz chamado lista de nós Portanto, temos que percorrer a lista e anexá-la a cada item de navegação e ouvinte de eventos com o mouse sobre o evento Para examinar a lista, vou usar um dos métodos auxiliares de matriz chamado h. Portanto precisamos anexar para cada método dois itens suspensos Esse método usa um argumento, que é uma função de retorno Essa função será executada para cada item de navegação. A função de retorno de chamada em si terá um parâmetro, que será o item atual da lista durante o loop, vou chamá-lo de item suspenso. Então, agora temos que anexar um ouvinte de eventos a um item suspenso Temos que especificar aqui o Vai passar o mouse. E também precisamos aqui da função de seta. Essa função será executada quando passarmos o mouse sobre o item Então, precisamos de duas coisas. Ao passar o mouse. Temos que exibir o menu suspenso e também mudar a cor de fundo do invólucro de Napa Vamos começar com um menu suspenso. Portanto, temos dois itens de navegação e dois menus suspensos. Precisamos exibir o menu suspenso adequado depois de passar o mouse sobre o Portanto, temos que acessar o menu suspenso a partir do item suspenso dessa Precisamos de um item suspenso. Em seguida, precisamos acessar o menu suspenso, que é o último elemento secundário do item da lista Portanto, temos que usar aqui a propriedade chamada último elemento filho. Então, uma vez que tenhamos acesso ao menu suspenso, agora temos que torná-lo visível. Para isso, vamos usar uma das propriedades chamadas texto CSS. Vou passar sua opacidade e visibilidade visível Então, se eu passar o mouse sobre o primeiro item de navegação , o primeiro menu suspenso aparecerá E se eu passar o mouse sobre o segundo item de navegação , o segundo menu suspenso aparecerá Depois disso, o efeito de mouse deixará de funcionar porque acabamos definir o evento do mouse sobre e não a saída do mouse. Antes disso, vou mudar a cor de fundo da embalagem de Napa Vamos selecioná-lo usando o método seletor de consulta. Especifique aqui o nome da classe Napa wrapper. Então, precisamos de uma propriedade chamada Estilo, seguida pelo plano de fundo. Vou usar aqui a função de gradiente linear. A direção será escrever. E depois vou passar aqui três cores. O primeiro será 066399. Então precisamos de f8f, o F, e então precisamos novamente Agora, se passarmos o mouse sobre a cor de fundo do romance, o invólucro mudará Tudo bem, agora temos que usar o evento mouse out. Depois de passar o mouse, temos que esconder os menus suspensos E também temos que nos livrar da cor de fundo da embalagem do romance Na verdade, vou duplicar esse código, depois mudar o evento, que vai acabar com o mouse. Então, precisamos de opacidade zero. Visibilidade oculta. Quanto ao plano de fundo , não será nenhum. Tudo bem, agora tudo funciona perfeitamente e, com os menus suspensos, terminamos Ok, então essa sílaba, a primeira seção, vamos seguir em frente e personalizar a próxima 92. Projeto 10 - Criar e personalizar a seção de serviços: Tudo bem, então com a primeira seção, terminamos, e agora é hora de seguir em frente e cuidar da próxima Primeiro, vamos dar uma olhada no projeto finalizado. Então, vamos criar a seção Serviços. Será simples, terá o título e três partes que incluirão ícones, cabeçalhos , parágrafos e botões do Font Awesome , parágrafos e Ok, vamos continuar e criar a marcação HTML. Vou inserir seus novos comentários, seção dois. E a seção dois. Em seguida, abra uma tag de seção com uma classe, seção dois. Então, como dissemos, esta seção consistirá em duas partes principais. O primeiro será o título. Vamos abrir a tag de cabeçalho H1 com o título da seção dois da classe E como o conteúdo, vou inserir seu paypal é para todos que pagam ou recebem. Em seguida, precisamos dos serviços abertos, uma tag div, que será o invólucro Portanto, no geral, teremos três serviços diferentes. Vamos abrir a tag div com o serviço de classe. Cada serviço consistirá em um ícone, título, parágrafo e botão do Font Awesome . Vamos abrir a tag I com uma classe é FAS, uma gravata de usuário. Então precisamos ir. Vou abrir a tag de cabeçalho h3 com o título do serviço de classe com os indivíduos do conteúdo Então, o próximo elemento será um parágrafo. É atribuído à classe, ao parágrafo de serviço. E insira aqui alguns textos fictícios. Finalmente, precisamos de um botão com um serviço de classe, btn. E com o conteúdo, saiba mais. Ok, então isso é tudo sobre o primeiro serviço. Vou duplicá-lo duas vezes e depois fazer algumas alterações Vou mudar o nome da classe do ícone Font Awesome. Vai ser uma maleta da FASFA, provavelmente indo. Vou inserir seus negócios. Então, a próxima fonte, ícone Awesome, será MUITO um aperto de mão Quanto ao título, serão parceiros. Tudo bem, então essa é a sílaba, a marcação HTML. Agora temos que começar a estilizar esta seção. Vamos inserir novos comentários no arquivo CSS para a seção dois. Em seguida, selecione o elemento da seção. Vamos definir sua largura, fazendo 100%, e então criar algum espaço dentro desta seção, precisamos de preenchimento Vamos configurá-lo para dez rem na parte superior. Em seguida, zero no lado direito do que 15 RAM na parte inferior e zero no lado esquerdo. Tudo bem, a seguir, vou alinhar os elementos usando o Flexbox Quer dizer, vou colocar o título e os serviços verticalmente na coluna Vamos configurar a tela como flexível. Então precisamos mudar a direção. Vamos fazer uma coluna. Em seguida, coloque os itens no centro usando alinhar itens, centro Tudo bem, então os elementos estão alinhados. Em seguida, vou personalizar o título. Vamos selecioná-lo. Primeiro de tudo, vamos aumentar o tamanho da fonte, torná-la cinco RAM. Em seguida, torne a fonte mais clara usando a espessura da fonte para 100, depois altere a cor e torne-a 333 E, por fim, vou criar algum espaço na parte inferior usando a margem inferior que executamos Então, como você pode ver, o título parece bom. Vamos seguir em frente e cuidar dos serviços. Vou colocá-los horizontalmente em uma fileira. Vamos selecionar serviços e definir a exibição como flexível. Tudo bem, depois disso, vou selecionar o serviço em si. Antes de tudo, vamos definir a largura. Vou criar 35 RAM do que precisamos para alinhar os textos no centro E também crie algum espaço nos lados esquerdo e direito usando margem. Vamos definir como zero e fibrina. Tudo bem, então isso é tudo sobre o serviço. Agora temos que começar a personalizar seus elementos individualmente. Vamos começar com os ícones Font Awesome. Selecione-os, aumente o tamanho da fonte, faça seis RAM. Em seguida, mude a cor. Vou usar sua cor ou dois a nove F E7. Em seguida, crie algum espaço na parte superior e inferior usando a margem. Vamos configurá-lo para duas rampas e zero. Tudo bem, então os ícones do Font Awesome parecem bons. Vamos seguir em frente e começar os cabeçalhos. Vamos selecionar o título do serviço. Defina o tamanho da fonte para três RAM. Em seguida, vou definir a espessura da fonte para 300 e também criar algum espaço na parte inferior usando a margem inferior de uma rampa Portanto, os cabeçalhos são personalizados. Vamos passar para os parágrafos. Então, como o parágrafo de serviço. Em seguida, defina o tamanho da fonte para 1,5 RAM. Vou deixar a fonte um pouco mais ousada. Vamos configurá-lo para 600 e também criar espaço na parte inferior. Vamos colocar a margem inferior em rampa. Ok, então o parágrafo, parece bom. A única coisa que eu quero fazer diminuir um pouco a altura da linha do parágrafo. Vamos configurá-lo para 1.2. Tudo bem, então com um parágrafo, terminamos. Vamos passar para o último elemento nos serviços, que é um botão. Antes de tudo, vamos definir sua largura. Vou fazer com que seja 20 RAM. Em seguida, crie algum espaço em vez das peças e, usando o preenchimento, vamos configurá-lo para 1,5 RAM Além disso, vou tornar a cor de fundo transparente. Em seguida, faça os botões ao redor usando o raio da borda. Três rampas. Vamos adicionar mais alguns estilos ao botão. Eu vou mudar a fronteira. O 2.1 funciona bem. E como cor, vamos usar O365, B0, B1. Então precisamos mudar a cor. Vamos usar aqui novamente as cores R36, b0, b1. Além disso, vou aumentar o tamanho da fonte. Vamos fazer com 1,5 RAM do que deixar a fonte em negrito. E também altere o ponteiro do método do cursor. Tudo bem, então os botões parecem bons. E, na verdade, com esta seção, terminamos. Parece bom. E agora temos que cuidar da próxima seção. 93. Projeto 10 - Seção de Criação e Recursos de Estilo: Ok, então, quando terminarmos de trabalhar na segunda seção, agora é hora de seguir em frente e começar a construir. A próxima seção será sobre algo parecido com recursos. E será um pouco simples, a seção terá um título de seção e seis recursos diferentes com um belo fundo azul Então, vamos começar a criar a marcação HTML. Vamos criar novos comentários para a Seção três. Em seguida, abra uma tag de seção com uma classe, seção três. Portanto, nesta seção, teremos duas partes diferentes. O primeiro será o título. Vamos abrir a tag de cabeçalho H1 com o título da seção três da classe O conteúdo será o que o mundo prefere pagar. Quanto à segunda parte , serão os recursos. Então, no geral, teremos seis recursos diferentes. Vamos abrir a tag div com o recurso de classe. Cada recurso incluirá o título e o parágrafo. Vamos abrir a tag de cabeçalho h3 com o título do recurso de classe. E com a proteção avançada de conteúdo. Em seguida, precisamos de um parágrafo com o parágrafo do recurso de classe como conteúdo. Vou inserir aqui um texto fictício. Ok, então isso é tudo sobre o primeiro longa. No geral, teremos seis deles. Então, vamos duplicá-lo cinco vezes e depois mostrar o conteúdo dos elementos do título O segundo será o pagamento rápido. Então, teremos alcance global. A próxima será uma integração mais fácil do que simples e conveniente. E o último será um serviço 24 horas por dia, sete dias por semana. Tudo bem, então é isso. A marcação HTML está pronta e agora temos que estilizar essa seção Vamos continuar e criar novos comentários no arquivo CSS. Precisamos aqui da seção três e da seção três. Em seguida, selecione os elementos desta seção. Em primeiro lugar, vou definir sua largura. Vamos fazer com que seja 100%. Em seguida, vou criar algum espaço na parte superior e inferior desta seção, vamos usar o preenchimento, defini-lo como cinco rem e zero e, em seguida, definir o plano de fundo Vou usar gradiente linear com três cores diferentes. Mas primeiro, vou definir a direção da transição de cores. Será da esquerda para a direita e, em seguida, usará o valor RGBA O primeiro será três, depois 303129 e a opacidade Essa segunda cor será 967153. E a opacidade de 0,8. Quanto à terceira cor, vamos fazer 4321 a quatro E o ponto de opacidade noturno, e também altera a cor do texto. Faça com que seja branco. Ok, depois disso, vou alinhar os elementos usando o Flexbox O conteúdo será colocado horizontalmente no centro Vamos configurar a tela como flexível. Então, para colocar o título e o conteúdo um sobre o outro, vamos usar a coluna de direção flexível E então, para colocar o conteúdo no centro, vamos usar alinhar itens ao centro Tudo bem, então os elementos estão alinhados. Vamos continuar e personalizar o título desta seção. Em primeiro lugar, vou definir o tamanho da fonte. Vamos fazer com que sejam cinco RAM. Em seguida, torne a fonte mais clara e defina a espessura da fonte para 300. E, finalmente, cria algum espaço na parte inferior usando a margem inferior de cinco rem. Tudo bem, vamos seguir em frente e personalizar os recursos. Vamos selecionar elementos div de um wrapper e definir a largura de 70%. E então vou colocar os recursos lado a lado horizontalmente Para isso, precisamos usar o display flex. Ok, agora temos que colocar os recursos em duas linhas diferentes. Mas antes disso, vou definir a largura de cada recurso. Quero que cada recurso ocupe um terço da largura do invólucro Então, vamos selecionar o recurso e, em seguida, definir a largura. Agora vou usar a função calc porque precisamos dividir 100% por três Nesse caso, cada recurso ocupará um terço da largura do invólucro E depois disso, vamos usar o envoltório flexível. Para embrulhar. Isso nos permitirá colocar o futuro em duas linhas diferentes Ok, agora temos que resolver o recurso em si. Vamos enviar mensagens de texto da companhia aérea no centro. Em seguida, vou criar algum espaço nos lados esquerdo e direito dentro do recurso usando o preenchimento Vamos configurá-lo para 0,5 RAM. E, finalmente, cria algum espaço na parte inferior usando a margem inferior cinco do aluguel. Ok, agora temos resultados muito melhores. Em seguida, temos que estilizar o título e o parágrafo. Vamos para o futuro. Em primeiro lugar, vou definir uma largura. Vamos configurá-lo para o máximo de conteúdo. Nesse caso, o elemento ocupará a largura necessária para exibir o conteúdo. Em seguida, precisamos do tamanho da fonte. Vamos fazer com três RAM. Defina também a espessura da fonte como 300. E então precisamos definir a margem. Vamos defini-lo como zero na parte superior. Então, para centralizar os elementos, precisamos definir a margem como automática nos lados esquerdo e direito. Quanto ao fundo , será um aluguel. Ok, finalmente, vamos cuidar do parágrafo. Selecione o parágrafo futuro. Encontre o tamanho da fonte, faça com que seja 1,5 RAM que precisamos de espessura de fonte. Vamos fazer 500. E por último, vou diminuir a altura da linha. Vamos configurá-lo para 1.2. Tudo bem, então, finalmente, somos a terceira seção. Nós terminamos. Parece bom. Vamos seguir em frente e cuidar da próxima seção. 94. Projeto 10 - Criar e Estilo Seção de Introdução: Já criamos algumas seções da primeira página. É hora de seguir em frente e continuar com a construção da próxima seção. Temos que construir uma quarta seção da primeira página, provavelmente seções anteriores Esta também será uma seção simples. Teremos um título seguido pela imagem e pela lista. Vamos começar a criar a marcação HTML e instituir novos comentários para a Seção quatro Em seguida, abra uma tag de seção com a seção quatro da turma. Portanto, teremos duas partes principais nos elementos desta seção. O primeiro será o título desta seção. Vamos abrir a tag H1 com a seção de classe para o título. O conteúdo vai começar com o Paypal. Em seguida, precisamos de uma tag div que envolva a imagem e a lista Vou me inscrever na seção de aula para obter conteúdo. Agora vou inserir uma imagem, mas primeiro vamos criar uma tag div, que será o invólucro da Vou atribuir à seção de cluster para o wrapper IMG E depois insira aqui na imagem. Vou selecionar MacBook dot PNG pasta de imagens. Tudo bem, então, depois disso, precisamos criar uma lista Vamos abrir a tag UL com uma seção de classe, pois pelo menos incluirá três itens de lista diferentes. Vamos abrir a tag LI com a seção de classe para o item da lista. Portanto, cada item da lista consistirá em dois elementos de extensão. O primeiro será o número. Quanto ao segundo, deve ser o conteúdo do item que é uma tag de extensão aberta com a classe número um. Então, precisamos de outra etiqueta de extensão. Na verdade, dentro dessa tag span, teremos um link. Vamos inserir aqui uma conta comercial. Vamos duplicar o elemento LI duas vezes e fazer algumas alterações Portanto, no segundo e terceiro itens da lista, teremos um texto fictício Tudo bem? Portanto, a marcação HTML está preparada e agora precisamos começar a personalizar essa seção Vamos inserir novos comentários e a seção do arquivo CSS no final da seção quatro. Em seguida, selecione os elementos de uma seção e defina a largura, torne-a 100%. Em seguida, vou criar espaço na parte superior e inferior dessa ação usando o preenchimento Vamos configurá-lo para dez RAM zero. E então vou alinhar o título e o conteúdo usando o flexbox Precisamos de display flex. Então precisamos mudar a direção. Vamos fazer uma coluna. E também para colocar o conteúdo no centro, vamos usar alinhar itens ao centro Tudo bem, então os elementos estão alinhados. Em seguida, vamos personalizar o título desta seção, selecionar, definir o tamanho da fonte, torná-lo com cinco RAM. Em seguida, vou mudar a espessura da fonte. Vamos fazer 400. Também mude a cor. Vou fazer 44 e, em seguida, criar um espaço na parte inferior, usar margem, cinco rampa inferior Tudo bem, vamos seguir em frente e cuidar do conteúdo desta seção Vou colocar a imagem e o mínimo lado a lado. Então, vamos selecionar o wrapper div e atribuir a ele display As dívidas. Vamos personalizar a imagem. Na verdade, agora é muito grande. Vamos selecionar o invólucro. Eu vou definir a largura. Vamos fazer com que seja 50 RAM. Em seguida, selecione a imagem em si. Eu vou definir com 200 por cento. Nesse caso, a imagem ocupará a largura do elemento pai, que é o invólucro E então eu vou diminuir um pouco a opacidade da imagem Vamos configurá-lo para 0,8. Tudo bem, então a imagem parece boa Vamos entrar e personalizar a lista. Selecione elementos UL. Em primeiro lugar, vou definir a largura. Vamos fazer com que seja 55% Em seguida, crie algum espaço na parte superior usando a margem superior para executar. Agora temos que trabalhar nos itens da lista. Vamos selecionar elementos LI e definir o tamanho da fonte. Eu vou fazer com 1,6 RAM. Em seguida, deixe a fonte um pouco mais em negrito. Vamos definir a fonte como 600. E depois disso, vou colocar os números e os elementos de texto lado a lado Vamos usar o display flex e também colocar os itens no centro E, finalmente, crie algum espaço na parte inferior usando a margem inferior para correr. Tudo bem, então agora eu vou cuidar dos números. Vamos selecioná-los. Antes de tudo, vamos definir largura e altura. Vou fazer com que os dois tenham 3,5 RAM. Em seguida, precisamos criar a borda com o valor de 0,1 RAM sólido. A cor 555. Além disso, precisamos contorná-los. Vamos usar o raio da borda com um valor de 50 por cento. E também crie esse espaço no lado direito da rampa de escrita do emoji 1.5 Ok? Depois disso, temos que colocar os números no centro dos círculos. Para isso, vou usar o flexbox. Precisamos de display flex. E para centralizar, precisamos usar o centro de conteúdo justificado e alinhar o centro de Tudo bem, então estamos quase terminando. A única coisa que vou fazer é mudar a cor do link no primeiro item da lista e torná-lo um pouco mais ousado Vamos selecionar os elementos do link. Eu vou mudar a cor. Vamos fazer com que seja o36, b0, b1. E também altere a espessura da fonte. Faça com que seja ousado. Tudo bem, então é isso. A quarta seção parece boa. Vamos seguir em frente. 95. Projeto 10 - Criar e Estilo de Rodapé: Tudo bem, então, passo a passo, estamos avançando. Agora é hora de criar a última seção da primeira página. Será a quinta seção. Ele consistirá em duas partes principais. A primeira parte incluirá um título e eu comprei alguns. Já a segunda bola será o rodapé da página, ela incluirá o contrato e um texto de direitos autorais Vamos começar a criar a marcação HTML. Vou inserir novos comentários para a Seção cinco. Em seguida, abra uma tag de seção com a seção cinco da turma. Então, como dissemos, teremos duas partes principais. A primeira será a Seção cinco. Topo. Aqui teremos apenas dois elementos, título e Bateson Vamos abrir o título H2, marcar com a seção cinco da classe, título superior Quanto ao conteúdo, deixe as coisas se você se inscrever e começar. Quanto ao botão, será semelhante ao botão que criamos na primeira seção. Estou no botão azul. Então, vamos usar a classe. Azul. Btn. O conteúdo começa. Então, como você pode ver , já é estilo. Tudo bem, isso é tudo sobre a primeira parte. Vamos continuar e criar o rodapé. Vou usar o elemento de rodapé HTML5 com um rodapé com um O rodapé em si consistirá em duas partes. Teremos um filtro na parte superior e na parte inferior do rodapé. Portanto, o lado superior incluirá duas listas diferentes. Vamos abrir a tag UL com uma lista de rodapés de classes. Em seguida, vou inserir sua tag LI, seguida pela tag do link com o conflito de ajuda de conteúdo. Portanto, em ambas as listas, teremos cinco itens da lista. Então, vamos duplicar o elemento LI quatro vezes e depois fazer algumas alterações O segundo item da lista serão as taxas pelas quais teremos recursos de segurança. E o último vai ser baleado. Ok? Vou duplicar todos os elementos da lista e depois fazer algumas alterações novamente. A segunda lista será de quatro idiomas. Vamos inserir seu inglês. Então. O próximo será espanhol, francês, italiano, S4. O último item será a imagem. Então, em vez do texto, vamos instituir um elemento IMG Vamos selecionar FLAC dot PNG na pasta de imagens. Será a bandeira nacional da Geórgia. Tudo bem, isso é tudo sobre a fruta ou a parte superior. Agora precisamos que o Footer Bottom, que incluirá apenas um único parágrafo, seja protegido por direitos autorais da classe E com os textos a seguir, precisamos de direitos autorais, seguidos pela entidade HTML5, que será o sinal de direitos autorais E também vamos inserir você. Todos os direitos reservados. Ok, então, finalmente, a marcação HTML está preparada e estamos prontos para personalizar esta seção Vamos continuar e criar novos comentários e um arquivo CSS. Precisamos da Seção 5. Da seção cinco. Em seguida, selecione os elementos da seção e defina-os com 100%. Depois disso, vou selecionar os elementos da parte superior desta seção. Vamos definir sua largura, torná-la 100%. E também vou mudar a cor de fundo. Vamos usar sua cor. F3, F7, F8. Ok, depois disso, vou colocar os elementos no centro. E também quero criar algum espaço na parte superior e inferior em vez do elemento. Vamos usar o centro de alinhamento de texto. Quanto a esse ritmo, vou fazê-lo usando estofamento. Vamos configurá-lo para sete rem. E depois zero. Depois disso, vou cuidar do título. Vamos selecioná-lo. Primeiro de tudo, vamos aumentar o tamanho da fonte, torná-la 3,5 gramas. Em seguida, deixe a fonte um pouco mais clara. Defina a espessura da fonte para 400. E também cria algum espaço na parte inferior usando a margem inferior com um valor para R1 Ok, então isso é tudo sobre o título. De acordo com o botão azul. Está em todos esses azulejos. Teremos alguns botões azuis no projeto. Então, vou pegar o código CSS do pastor e colocá-lo nos estilos comuns Além disso, quero adicionar aqui mais um estilo. Vamos mudar o tipo do grosseiro. Faça com que aponte para Então, com a primeira parte, a parte superior, terminamos. Vamos seguir em frente e começar a trabalhar no rodapé. Antes de tudo, vamos definir sua largura e altura. Vou definir a largura para 100%. Quanto à altura, vamos fazer com que seja 15 corridas. Em seguida, vou alinhar os elementos usando o Flexbox. Vamos usar o display flex. Vou colocar os elementos verticalmente em uma coluna e também quero alinhá-los no centro Então, vamos seguir em frente e mudar a direção. Faça uma coluna. Em seguida, vou criar espaço entre os itens flexíveis. Use conteúdo justificado, espaço entre. Em seguida, para colocar os elementos no centro, use alinhar itens ao centro E, finalmente, crie algum espaço dentro do rodapé. Use estofamento Vou configurá-lo para quatro execuções na parte superior do que zero no lado direito, três RAM na parte inferior e zero no lado esquerdo. Ok, então antes de prosseguirmos, eu quero mudar o tamanho da imagem. É muito grande agora. Vamos fazer com que sua largura seja 3,8 RAM. E também vou diminuir a opacidade, torná-la 0,6. Tudo bem, agora, está muito melhor. Vamos continuar e cuidar da parte superior do rodapé. Vamos definir sua largura para 70%. Em seguida, vou colocar os dois leads lado a lado. Então, vamos configurar a exibição como flexível e também criar espaço entre as listas usando justificar o espaço entre elas Ok, depois disso, vou criar uma borda na parte inferior do pé ou na parte superior. Vamos diminuir os valores da borda inferior em 0,1 RAM do que esse bloco será pontilhado Quanto à cor, vamos usar 262626 e também criar algum espaço na parte inferior usando o preenchimento Última corrida. Tudo bem, agora podemos personalizar os links. Quero colocar os itens da lista horizontalmente em uma linha. Vamos selecionar uma tag UL. Vou usar o Flexbox. Vamos configurar a exibição para flexionar e, em seguida, colocar os itens no centro usando alinhar o centro dos itens Em seguida, vou estilizar os itens da lista de ambas as listas. E use margem, certo? Com o valor 2,5. Corra. Depois disso, vamos selecionar os links. Primeiro de tudo, vamos mudar o tamanho da fonte, torná-la 1,5 RAM. Em seguida, deixe o telefone mais ousado. Espessura da fonte para 600 e também altere a cor. Chegue até 62626. Tudo bem, então, finalmente, temos que personalizar o parágrafo de direitos autorais. Vamos selecioná-lo. Defina o tamanho da fonte em um ponto para a RAM. Em seguida, defina a espessura da fonte para 600. E também crie algum espaço entre as letras usando espaçamento entre letras , rampa de 0,1 Tudo bem, então, com a quinta seção, terminamos e, na verdade, terminamos de trabalhar na primeira página Agora você precisa acessar a página de login. Então, vamos seguir em frente. 96. Projeto 10 - Criar e Estilo Página de Login: Tudo bem, então terminamos trabalhar na primeira página do projeto, e agora é hora de cuidar dessa segunda página, que será a página de login Vamos dar uma olhada no projeto finalizado. Então, aqui temos a página de login. Não temos muito conteúdo. Criaremos o logotipo seguido pelos campos de entrada e dois botões. Antes de começarmos a criar a marcação HTML da página de login Primeiro de tudo, vou esconder a primeira página. Vamos selecioná-lo e atribuí-lo, não exibir nenhum. Ok, agora, abaixo, logo após a primeira página e vou inserir novos comentários para a página de login. Em seguida, abra uma tag div com uma página de login da classe. Vai ser o invólucro. Em seguida, vou abrir outra tag div que envolverá o conteúdo Vamos chamá-lo de conteúdo da página de login. O conteúdo consistirá em duas partes principais. Teremos o logotipo e os elementos do formulário. Na verdade, o logotipo será semelhante ao nulo do logotipo. Só precisamos mudar as cores das letras. Além disso, também criaremos um logotipo semelhante na página de inscrição. Então, para evitar usar o mesmo código repetidamente, vou fazer o seguinte. Vamos atribuir ao logotipo da barra de navegação outra classe, quero dizer logotipo outra classe, quero dizer Será o nome de classe comum para todos os três logotipos que usaremos ao longo deste projeto. Que vou pegar o código, colá-lo e fazer algumas alterações. Não precisamos do nome da classe, do logotipo da barra de navegação em vez dele. Vamos adicionar aqui o logotipo da página de login. Em seguida, vou envolver metade da palavra paypal com um elemento span. E também envolva a segunda parte com um elemento de extensão. Na verdade, estou fazendo isso porque ambas as partes terão cores diferentes. Além disso, também vou mudar o nome da classe no arquivo CSS. Vamos chamá-lo de logotipo e também colocar esse código nas ações ordinárias. Então, como você pode ver, o logotipo já tem os estilos. Na verdade, não está visível no momento porque tem a cor branca. Ok, vamos seguir em frente e criar o resto dos elementos. O próximo será formado com um formulário de página de login da turma. Então, dentro do elemento do formulário, teremos alguns elementos diferentes. Em primeiro lugar, precisamos inserir elementos e é a classe de cientistas, formulário de entrada de login. Também precisamos do atributo de espaço reservado, e-mail ou número de celular Vamos duplicar os elementos de entrada e alterar o tipo que será senha E também elimine o atributo de espaço reservado. Depois disso, vou criar o botão para fazer login. Vamos abrir a tag de entrada com uma classe do formulário Login btn. O tipo vai ser Barton. Quanto ao valor será o log n. Então o Buxton é criado Em seguida, precisamos de elementos de link atribuídos ao link de login do formulário de recolhimento. E como conteúdo, vou inserir você com problemas para fazer login Depois disso, vou criar um elemento span como conteúdo. Vamos inserir para você. Ou, finalmente, vamos criar um segundo botão para se inscrever. Na verdade, vou copiá-lo. O primeiro botão, alterar o nome da classe, será formado, inscreva-se btn. Quanto ao valor, vamos inserir você, cadastre-se. Tudo bem, então é isso em relação à marcação HTML. Agora temos que estilizar a página de login. Mas primeiro, vamos inserir novos comentários na página de login do arquivo CSS. Depois e fora da página de login. Além disso, vou adicionar comentários para a primeira página. Na verdade, eu esqueci isso no começo. Em seguida, selecione os desenvolvimentos rápidos e defina a largura e a altura. Vou definir a largura para 100%. Isso é o que vai ser a altura de 100% da janela de visualização Tudo bem, em seguida, vamos selecionar o conteúdo e definir sua posição Vou defini-lo como valor absoluto. Precisamos posicionar em relação ao elemento pai. Depois disso, vamos definir as propriedades superior e esquerda. Vou definir a melhor propriedade para 12%. Quanto à propriedade esquerda , será de 50 por cento. Então eu vou centralizar o elemento perfeitamente. Para isso, precisamos transformar a função em translação com direção x e com valor -50 por cento. Depois disso, vou alinhar o logotipo e o formulário usando o Flexbox Vamos configurar a tela para flexível. Em seguida, precisamos colocar os elementos verticalmente em uma coluna, então precisamos mudar a direção, torná-la uma coluna e também usar o alinhamento dos itens no centro Tudo bem, em seguida, vamos criar a borda ao redor do conteúdo Vamos configurá-lo para 0,1 rem sólido e, como cor, vamos usar CF, CF, CF. Finalmente, vou criar algum espaço dentro da caixa. Vamos fazer isso usando preenchimento. Faça três RAM nos quatro lados. Certo? Essa é a sílaba do conteúdo. Agora temos que personalizar o logotipo. Em primeiro lugar, vamos criar algum espaço na parte inferior, vou selecionar o logotipo da página de login. Vamos definir a margem inferior. Faça questão de correr. Em seguida, vou mudar as cores das letras. Vamos começar com uma letra P. Precisamos aqui da página de login, logotipo, seguida pela classe P1 Vamos fazer a cor oh, 64699. Em seguida, duplique esse código e altere o nome da classe que precisamos aqui, P2, porque será a segunda letra P. Quanto à cor, vamos usar aqui três a quatro f 0. Ok, então as letras p são coloridas. Vamos seguir em frente e cuidar do resto das cartas. Como você se lembra, separamos a palavra PayPal em duas partes. Vamos selecionar a primeira parte. Vou usar o logotipo da página de login da turma que precisamos, seguido pelo seletor do enésimo filho Será o terceiro elemento. Vamos mudar a cor, torná-la 064699. Em seguida, duplique esse código. Mude o número que precisamos aqui. Quarto filho também. A cor vai ser de três a quatro f. Tudo bem, então com o logotipo, terminamos Vamos seguir em frente e cuidar dos elementos formados. Selecione-o. Primeiro. Vou alinhar os elementos verticalmente em uma coluna para isso. Vamos usar o flexbox Precisamos exibir a flexão, depois flexionar a coluna de direção e alinhar os itens Ok, vamos seguir em frente e começar a estilizar os elementos de entrada. Como você sabe, temos dois campos de entrada e dois botões, que são criados usando as tags de entrada. Todos os quatro elementos terão alguns estilos comuns. Então, vamos selecioná-los usando um nome de tag. Em primeiro lugar, precisamos fazer o formulário da página de login seguido pela entrada. Então, primeiro, vamos definir a largura e a altura. Vou definir a largura para 37. Corra. Vamos colocar que a altura será de 4,5 gramas. Em seguida, cria espaço ao redor das entradas usando margem. Faça uma corrida. E também torne as entradas arredondadas usando o raio da borda. A rampa de 0,5 veio depois disso. Vamos selecionar os dois primeiros campos de entrada usando a entrada de login do formulário className Vamos criar algum espaço dentro das entradas nos lados esquerdo e direito usando preenchimento, torná-lo 0,1, 0,5 g. Depois vou mudar a borda, torná-la 0,1, ficar sólida e a cor E por último, aumente o tamanho da fonte, faça com que seja 1.6 rodado. Certo? Então é isso em relação aos campos de entrada, vamos seguir em frente e personalizar o botão de login. Vamos selecioná-lo. Primeiro. Eu vou definir a cor de fundo. Permite que você veja sua cor. Oath we 6P1 Em seguida, mude a cor do texto e torne-o Além disso, precisamos de uma borda com os valores de 0,1 quarto sólido. E como cor, vamos usar novamente o36, B0, B1. Então eu vou cuidar da fonte. Vamos aumentar o tamanho, torná-lo 1,8 Ran. Além disso, torne-o mais ousado, defina a espessura da fonte para 600 e, finalmente, altere o tipo do mais grosso, torne-o Tudo bem, então o botão Login é personalizado. Em seguida, vou personalizar o elemento de link. Vamos selecioná-lo, aumentar o tamanho da fonte, torná-lo com 1,6 RAM e depois mudar a cor. Vamos usar sua cor ou duas a nove FC7. E então crie algum espaço na parte superior e inferior usando a margem, vou configurá-lo para 1,2 rem na parte superior do que zero no lado direito, um quarto na parte inferior e zero no lado esquerdo. Tudo bem, então o elemento de link parece bom. E agora temos que cuidar desses elementos de extensão. Estou na palavra que temos aqui. Na verdade, além dessa palavra, precisamos criar duas linhas nos lados esquerdo e direito , conforme as temos no projeto finalizado. Então, vamos seguir em frente e selecionar os elementos de extensão. Primeiro, vou definir sua largura. Vamos fazer com que corra. Em seguida, defina o tamanho da fonte para 1,8. Ran, mude a cor. Você vê sua cor 888 e, em seguida, cria algum espaço na parte superior e inferior usando a margem atribuída a ela Uma corrida e depois zero. Ok, então esse elemento de extensão está estilizado e agora temos que criar suas linhas Vou criá-los usando pseudoelementos antes e depois Vamos começar com os pseudoelementos anteriores. Ele será colocado no lado esquerdo dos elementos de extensão. Antes de tudo, vamos definir o conteúdo, deixá-lo vazio. Em seguida, vou definir a largura para 16 RAM. Quanto à altura, será de 0,1 RAM. E também mude a cor de fundo, torne-a C, C, C. Então, agora, a linha não está visível. Temos que definir essa posição. Vamos torná-lo absoluto. Em seguida, precisamos posicionar em relação aos elementos principais, que é a extensão. Depois disso, vamos definir a posição superior. Vai ser 50 por cento. Então precisamos, certo, vamos fazer com que seja 3,5 RAM. Então, para centralizar os elementos verticalmente, vamos usar Transform Traduza Y com valor de -50 por cento. Tudo bem, então isso é pecado em relação à primeira linha. Precisamos do mesmo no lado direito. Então, vamos duplicar esse código. Mude antes e depois. Então, em vez da posição direita, use a esquerda. Tudo bem, então, com as linhas concluídas, vamos seguir em frente e personalizar o último elemento da página de login, que é um pastor Eu fiz essa inscrição BTN. Vamos mudar a cor do plano de fundo. Vamos usar sua cor, D, B, E, D, C. Em seguida, vou mudar a borda. Vamos atribuir dois a 0,1 RAM, sólidos e da mesma cor, DBE ATC Então eu vou aumentar o tamanho da fonte, torná-la 1,8 RAM. Em seguida, altere a espessura da fonte. Faça com que seja mais ousado. Use 600. Por fim, altere o tipo do cursor, torne-o apontado. Tudo bem, então é isso. Terminamos de trabalhar na página de login. Agora, é hora de seguir em frente e tirar você desta página de inscrição 97. Projeto 10 - Criar e Estilo de página de inscrição: Tudo bem, então criamos a página de login e agora é hora de criar a última página do nosso projeto, que será a página de inscrição Vamos dar uma olhada no projeto finalizado. Como você pode ver, a página de inscrição consiste em algumas partes diferentes Temos a parte superior, que inclui o logotipo e o botão Login. Então, abaixo, temos duas partes diferentes do conteúdo. No lado esquerdo, temos algumas imagens dos clientes. Quanto ao lado direito, ele consiste em duas opções e uma caixa. Ok. Então, isso é tudo sobre a página de inscrição. Vamos começar a criar a marcação HTML. Vamos inserir seus novos comentários. Depois da página de login. Precisamos da página de inscrição e da página de inscrição. Em seguida, abra uma tag div com a página de inscrição da turma. Então, como já dissemos, teremos duas partes principais, a parte superior e o conteúdo. Portanto, é uma tag div aberta com o topo da página de inscrição da turma. Precisamos instituir o logotipo e o botão de login. Como na página anterior, estou na página de login, precisaremos do mesmo logotipo que usamos na primeira página. Então, vamos pegá-lo da primeira seção e colá-lo aqui embaixo. Vou mudar o nome da turma. Precisamos usar o logotipo da página de inscrição. Além disso, precisamos criar um botão como conteúdo. Login do Let's Institute. Tudo bem, então vamos ver o lado superior. Vamos seguir em frente e criar o resto do conteúdo. Vou abrir a tag div, que será o conteúdo da página de inscrição O conteúdo consistirá em duas partes. Teremos o lado esquerdo e o lado direito. Vamos abrir a tag div com o conteúdo da página de inscrição de uma turma conteúdo da página de inscrição de O lado esquerdo incluirá três imagens e o título, Let's open div tag, que será o invólucro das Vou atribuir ao conteúdo da turma imagens deixadas. Em seguida, insira aqui os elementos IMG e selecione a pessoa JPEG de um ponto na pasta de imagens Então eu vou duplicar um elemento de imagem duas vezes e mudar os nomes da imagem Tudo bem, em seguida, precisamos do título. Vamos abrir a tag de cabeçalho H1 com um conteúdo. Veja você mesmo por que milhões de pessoas riem do papel. Tudo bem, então isso é tudo sobre o lado esquerdo. Agora precisamos criar o lado direito. Vou abrir a tag div com o conteúdo da página de inscrição da classe conteúdo da página de inscrição Certo? Portanto, essa parte incluirá dois elementos de título e um formulário aberto. Tag de cabeçalho H3 com o conteúdo. Inscreva-se no PayPal. É grátis. Quanto ao segundo título, será a tag de cabeçalho H4, onde o conteúdo escolherá entre dois tipos de contas Ok, então, em seguida, vou criar elementos de formulário. Vamos atribuir a ele o formulário da página de inscrição da turma. Dentro dos elementos do formulário, teremos que inserir grupos e um botão. Então, vamos abrir a tag div com a classe input-group. O grupo de entrada consistirá em um botão de rádio e alguns elementos de texto, como título e parágrafo. Vamos abrir a tag de entrada, um tipo de rádio. Também precisamos usar o atributo chamado nome com a caixa de seleção de desvalor Além disso, vou usar outro atributo chamado verificado. Isso significa que o primeiro botão de rádio será verificado por padrão. Ok, em seguida, vou abrir a tag div com uma opção de classe. Incluirá título e parágrafo. Isso é open h3, tag de cabeçalho com o conteúdo, conta pessoal Então eu vou abrir uma tag p com algum texto fictício. Vamos continuar e duplicar esse código. Uma vez. Vou me livrar do atributo marcado e também transformar a conta pessoal em conta comercial. Por fim, vou criar um botão que será semelhante aos botões azuis que criamos na primeira página Vamos abrir a tag de botão com uma classe blue btn. E então, como o conteúdo aqui, continue. Ok, então, antes de começarmos a estilizar a página de inscrição, vou ocultar a página de login Vamos atribuir a ele, não exibir nada por um tempo Ok, agora estamos prontos para começar a página de inscrição Vamos inserir novos comentários no arquivo CSS. É a página de inscrição. E fora da página de inscrição. Em seguida, selecione os elementos div do wrapper. Vou definir sua largura para 100%. Quanto à altura, vamos torná-la 100% da janela de visualização. Na verdade, acho que seria melhor se tornássemos essas imagens menores porque agora elas são muito grandes. Então, vamos selecionar imagens e aumentar sua largura em 18. Ok, então agora está muito melhor. Vamos voltar aos rápidos desenvolvimentos. Em seguida, vou mudar o plano de fundo da página. Vamos dar uma olhada no projeto finalizado. Então, como você pode ver, o lado superior tem um fundo diferente. Criaremos esse tipo de plano de fundo com uma função de gradiente linear Então, vamos definir o plano de fundo com o gradiente linear. A direção da transição será de cima para baixo. Quanto às cores, vou usar valores RGBA. O primeiro será 1123 vezes. E também aqui a opacidade 0,9. Quanto ao segundo valor RGBA, será a cor branca, a opacidade, Então, eu quero que a cor branca comece a aparecer após dez por cento da transição. Então, precisamos entrevistar dez por cento. Então, como você pode ver, temos aqui uma cor de fundo mais escura na parte superior. Tudo bem, a seguir, vamos cuidar do layout. Para isso. Vou usar novamente o Flexbox. Vamos configurar a tela como flexível. Em seguida, vou alinhar os itens flexíveis verticalmente na coluna, então precisamos mudar a direção Vamos configurá-lo como coluna e também alinhar os itens no centro Tudo bem, então agora eu vou cuidar da parte superior da página Vamos selecionar o desenvolvimento. Em primeiro lugar, vou definir largura e altura. Vamos definir a largura para 120 RAM. Quanto à altura, vamos fazer dez rampas. Além disso, vou usar novamente o Flexbox. Vamos configurar a tela como flexível. Em seguida, vou criar espaço entre os itens flexíveis usando justificar o espaço de conteúdo entre eles e também alinhar os itens verticalmente E, finalmente, vamos criar algum espaço na parte inferior usando a rampa inferior da margem cinco Tudo bem, então os elementos estão bem alinhados. Na verdade, o logotipo está bonito. Só precisamos mudar uma coisa. Temos que mudar a cor da segunda letra P. Então, vamos selecionar o logotipo da página de inscrição, seguido pela classe P2 Vamos definir a cor para E9. E9, E9. Tudo bem, vamos ver, em relação ao logotipo, vamos seguir em frente e personalizar o botão Vamos selecioná-lo. No início. Vamos definir essa largura, torná-la oito rampas. Em seguida, vou criar algum espaço dentro do botão usando o preenchimento Vamos fazer 0,7 rem nos quatro lados. Então eu vou mudar a cor de fundo. Vamos torná-lo transparente. Crie a borda, torne-a sólida em 0,1 rem. E como cor, vamos usar branco. E também vou arredondar o botão usando raio de borda com rampa de valor três Ok, depois disso, vamos cuidar do texto. Vamos definir o tamanho da fonte para 1,3 RAM. Então vou deixar o telefone mais ousado. Vamos definir a espessura da fonte para 600, mudar a cor do texto para torná-lo branco E, por fim, vou mudar o tipo de grosseiro, fazer Tudo bem, então, finalmente, com o lado superior, terminamos. Vamos seguir em frente e cuidar do conteúdo. Selecione os desenvolvimentos. E primeiro vamos definir a largura, fazer com que seja 120 rodadas. Em seguida, vou alinhar os elementos usando novamente o Flexbox, definir a exibição como flexível e, em seguida, criar algum espaço entre os itens flexíveis usando justificar o Espaço entre, tudo bem, então os dois lados, quero dizer, os lados esquerdo e direito são colocados lado a lado E agora temos que personalizá-los. Vamos começar com o lado esquerdo. Selecione o desenvolvimento do wrapper. Portanto, o lado esquerdo ocupará 60% do conteúdo. Então, vamos definir a largura para 60%. Em seguida, vou criar uma borda no lado direito com o valor de 0,1 RAM sólido Como a cor, vamos usar B1, B1, B1 Além disso, vou criar algum espaço dentro dos elementos. Vamos definir o preenchimento para três rem, na parte superior, à direita e na parte inferior Quanto ao lado esquerdo, vamos torná-lo zero. Ok, depois disso, eu vou cuidar das imagens. Vou selecionar um invólucro das imagens. Vamos usar novamente o Flexbox. Em seguida, crie algum espaço na parte inferior usando a rampa inferior da margem Tudo bem, a seguir vou personalizar a imagem em si. Em primeiro lugar, vamos arredondá-los usando um raio de borda de 50 por cento. Também crie uma borda. Vamos inserir você 1,5 grama de sólido. E como cor, vamos usar C, C, C e, em seguida, criar algum espaço no lado direito usando a margem direita cinco Ok, então as imagens parecem boas. Vamos seguir em frente e iniciar os elementos do cabeçalho. Vamos selecioná-lo. Primeiro. Vou aumentar o tamanho da fonte. Vamos fazer isso para RAM. Em seguida, torne a fonte mais clara, defina a fonte como 300. Além disso. Mude a cor, faça 333. Por fim, vou diminuir a altura da linha do título Vamos fazer com que seja 1.1. Tudo bem, então isso é tudo sobre o lado esquerdo. Vamos seguir em frente e personalizar o correto. Vamos selecionar o desenvolvimento. Na verdade, ele ocupará 40% da largura do conteúdo. Em seguida, vou definir o preenchimento. Vamos configurá-lo para três rem na parte superior. Em seguida, zero no lado direito. Quanto aos lados inferior e esquerdo, vamos fazer uma rampa 3D, depois mudar a cor, torná-la 555 Na verdade, vejo aqui que os cabeçalhos e grupos de entrada são colocados lado a lado Eles devem estar alinhados verticalmente um sobre o outro. Portanto, podemos ter um erro no arquivo HTML. Vamos conferir isso. Como você pode ver, o formulário é colocado fora da embalagem. Então, precisamos corrigir isso. Vamos movê-lo para dentro do rapper. Ok, em seguida eu vou começar. Os títulos gerais terão dois títulos diferentes. Vamos selecionar o primeiro, que são os elementos do cabeçalho h3 Vamos definir o tamanho da fonte para 2,4 RAM. Em seguida, faça com que a fonte pese 300. Então eu vou duplicar esse código. Vamos mudar H3 e H4. Também como tamanho da fonte, vou usar 1,6 RAM. Quanto ao peso da fonte, vamos fazer com que seja 500. Ok, então os cabeçalhos são personalizados. Temos aqui um pequeno problema, na verdade não é realmente o problema. Os cabeçalhos nos grupos de entrada são tags h3 e seu tamanho também é alterado . Vamos corrigir isso. Vou selecionar a opção H três e, em seguida, definir o tamanho da fonte para 1,7. Corra. Quanto à espessura da fonte, vou fazer com que seja 600. Tudo bem, agora o problema está resolvido. Vamos prosseguir e selecionar o grupo de entrada. Vou colocar os elementos lado a lado. Então, vamos usar o display flex. Então. Vou criar algum espaço ao redor do invólucro usando margem com valor de 1,5 redondo Em seguida, vamos personalizar os parágrafos. Selecione a opção P. Eu vou definir o tamanho da fonte para 1,5 g. Tudo bem, então finalmente temos que cuidar dos botões de rádio Vamos selecioná-los usando o atributo de tipo. Primeiro de tudo, vamos aumentar o tamanho deles. Vou definir a largura para 30%. Quanto à altura, vamos fazer com que corra. Agora eles são maiores, mas temos que ajustar um pouco a posição deles. Vamos fazer isso usando margem. Vou definir a margem para 0,5 rem no topo do que um rem no lado direito. Na parte inferior, será zero. Quanto ao lado esquerdo, vamos fazer uma rampa de -1,5 Tudo bem, então, como você pode ver, finalmente, terminamos A página de inscrição é criada e personalizada. E, na verdade, todo o projeto está construído. Agora temos que torná-lo responsivo a diferentes tamanhos de tela Antes de irmos, quero fazer algumas coisas. Por padrão, temos que exibir a primeira página. E depois de clicarmos nos botões de login e inscrição, precisamos navegar até as páginas corretas. Além disso, depois de clicarmos nos logotipos das pessoas, precisamos ir para a primeira página. Para isso. Vou usar um pouco de JavaScript. Antes disso, vou atribuir aos botões de login e inscrição algumas classes comuns que serão usadas no JavaScript para selecionar os elementos simultaneamente Todos os três logotipos têm o logotipo de classe comum, então não precisamos tocá-los. Vamos atribuir os botões de login e inscrição. No Napa, as seguintes aulas. Precisamos fazer login para o botão de login e nos inscrever para o botão de inscrição Em seguida, temos um botão abaixo na quinta seção. Vamos atribuir a ele, inscrever-se. Então, na verdade, isso é tudo sobre a primeira página. Na página de login, temos um botão de inscrição. Quanto à página de inscrição, temos um botão para login Tudo bem, então o HTML está pronto. Antes de usarmos isso para escrever o JavaScript, vou ocultar as páginas de login e de inscrição. Na verdade, a página de login já está oculta. Vamos atribuir à página de inscrição nenhuma exibição. Quanto à primeira página, vamos eliminar a exibição de nenhuma. Tudo bem, então acho que estamos prontos para começar a escrever um pouco de JavaScript. Vou inserir novos comentários, páginas de páginas. Em seguida, vou selecionar todos os logotipos. Use aqui, query, seletor, todo o método e, em seguida, especifique aqui o logotipo do nome da classe Agora precisamos examinar a lista que foi retornada pelo método all do seletor de consultas E temos que adicionar esse ouvinte de eventos a cada logotipo. Clique em eventos. Vamos usar um dos métodos auxiliares de matriz chamado for-each Isso nos ajudará a percorrer a lista. Portanto, o método forEach usa um argumento que é a função de retorno de chamada, que será executada para cada item da lista A função de retorno de chamada em si recebe um argumento e é o item atual, a lista, durante o loop Então, agora temos que anexar um ouvinte de eventos ao logotipo com eventos de clique e com uma função de seta, que será executada no clique Então, ao clicar, temos que exibir a página inicial e a altura, as páginas de login e inscrição Vamos selecionar a primeira página usando o método querySelector. Portanto, precisamos então da propriedade de estilo seguida pela exibição. Deve ser igual ao bloco. Vamos duplicar essa linha de código duas vezes. A segunda página será o login. Temos que esconder isso. Portanto, a exibição não será nenhuma. Quanto à terceira página , será Inscrever-se. E, novamente, não precisamos exibir nenhum. Ok, em seguida, precisamos do mesmo para os botões de login e inscrição. Vamos duplicar esse código duas vezes e depois fazer algumas alterações Então, precisamos aqui do login da classe. Então eu vou mudar aqui o argumento. Vamos fazer com que seja Login btn. Portanto, no caso de botões de login, precisamos ocultar as páginas iniciais e de inscrição. Asfalte a página de login. Precisamos torná-lo visível. Então, precisamos de um bloco aqui. Ok? Quanto ao sinal dos botões, vamos mudar aqui o nome da turma. Além disso. Precisamos aqui se inscrever btn Portanto, no caso do seno dos botões, temos que ocultar a página inicial e a página de login Quanto à página de inscrição, você precisa torná-la flexível porque, por padrão, ela tem flexibilidade de exibição Tudo bem, vamos testar se tudo funciona bem. Então, como você pode ver, tudo funciona bem. A última coisa que eu quero fazer é colocar o ponteiro do cursor quando passarmos o mouse sobre os Então, vamos atribuir a ele um ponto mais grosso. Tudo bem, então finalmente terminamos o projeto. A única coisa que precisamos fazer é torná-lo responsivo a diferentes tamanhos de tela Então, vamos seguir em frente. 98. Projeto 10 - Torne o projeto responsivo - Parte 1: Tudo bem, então terminamos de construir nossos projetos. Quero dizer, todas essas seções e páginas são criadas. A única coisa que precisamos fazer é tornar o projeto responsivo a diferentes tamanhos de tela No momento, o projeto foi construído para um tamanho de tela extra grande. Estou dentro. Isso coincide com 1920 pixels de largura e altura. Usamos uma abordagem de força de trabalho. Vamos inspecionar a página e mudar para o modo responsivo. Como você pode ver, a largura e a altura estão definidas para 90, 20 pixels e 1080 pixels Agora temos que encontrar os pontos de interrupção nos quais precisamos fazer algumas mudanças. Na verdade, não vou começar a encontrar os pontos de interrupção porque eu já os preparei, então não vou perder tempo com isso O primeiro ponto de interrupção será de 1.500 peças. Porque, como você pode ver, o menu suspenso está confuso E também temos que personalizar um pouco a terceira seção. Então, vamos inserir novos comentários e o arquivo CSS para o Código Responsivo Em seguida, vou criar uma nova consulta de mídia CSS. Precisamos especificar aqui a largura máxima. Vamos configurá-lo para 1.500 pixels. Então, como eu disse, temos que cuidar dos menus suspensos. Então, vamos selecionar o menu suspenso e diminuir o preenchimento nos lados esquerdo e direito Vamos fazer com que 25 rodem. Depois disso, vou selecionar o item suspenso. Vamos definir margem. Vou configurá-lo para dois rem na parte superior e inferior e seis rem nos lados esquerdo e direito. Tudo bem, então vamos considerar os menus suspensos. Parece bom. Vamos passar para a terceira seção. Vamos selecionar o wrapper com os recursos da classe. Vou mudar sua largura. Vamos fazer com que seja 80%. Em seguida, selecione o recurso em si. Vamos mudar o preenchimento. Vou fazer com que seja zero na parte superior e inferior, e depois três rem, nos lados esquerdo e direito. Tudo bem, então a terceira seção parece boa. E, na verdade, todas as outras seções são boas. Vamos verificar as páginas de login e inscrição. Como você pode ver, eles não precisam se tocar por enquanto. Ok, então vamos ver esse ponto de interrupção. Vamos seguir em frente e cuidar do próximo. Portanto, o próximo ponto de interrupção será de 1.400 pixels. Vamos criar uma nova consulta de mídia CSS com largura máxima de 1.400 Então, primeiro de tudo, vou diminuir o tamanho da fonte do elemento HTML. Vamos defini-lo para 55%. Isso tornará os elementos relativamente menores. Então, como você pode ver, temos resultados muito melhores. Mas ainda precisamos fazer algumas mudanças. Vou mudar a largura da barra de navegação. Vamos fazer com que sejam cem corridas. Depois disso, acho que precisamos aumentar um pouco a altura da primeira seção. Então, vamos selecioná-lo e definir a altura para 70 de altura da janela de visualização Em seguida, vou aumentar a largura do parágrafo do banner Vamos selecioná-lo e definir sua largura para 70%. Então eu acho que isso é bobagem sobre a primeira seção. Vamos seguir em frente e personalizar a seção Serviços. Vamos selecionar um desenvolvimento rápido e definir a varredura, torná-la 90% Portanto, a seção Serviços parece boa. Em seguida, temos a seção de recursos. Na verdade, parece bom, mas acho que seria melhor se aumentássemos a largura da embalagem Então, vamos selecionar os recursos e definir a largura para 90%. Ok, vamos passar para a quarta seção. Eu vou mudar a largura do conteúdo. Vamos selecionar a seção do conteúdo e definir sua largura para 80%. Além disso, vou diminuir o tamanho da imagem. Vamos selecionar o desenvolvimento do wrapper. Defina sua largura como 40 por cento. E também altere a quantidade de espaço no lado direito usando a margem direita, com um valor seis executado. Tudo bem, então isso é tudo sobre a quarta seção. E, na verdade, com a primeira página, terminamos. Vamos seguir em frente e verificar outras páginas. A página de login ficará boa. Quanto à página de inscrição, ela precisa de algumas mudanças. Vou aumentar o tamanho da cor de fundo na parte superior. Então, vamos selecionar a página de inscrição. Então. Para evitar escrever a função de gradiente linear, vou copiá-la de cima para Vamos colar e alterar o valor percentual que precisamos aqui, 12%. Tudo bem, então acho que com esse ponto de interrupção, terminamos. Todas as três páginas ficam boas até o tamanho da tela 1.200 pixels porque a página de inscrição precisa de algumas alterações Para o resto das duas páginas. Não precisamos tocá-los em 1.200 pixels. Então, vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 1.200 pixels No ponto de interrupção, vou mudar o layout da página de inscrição Primeiro, vamos diminuir a largura da parte superior. Vou fazer com que seja 90 rodadas. Próximo. Eu vou mudar o alinhamento do conteúdo. No momento, eles estão colocados lado a lado, e eu vou colocá-los verticalmente um em cima do Então, vamos selecionar o conteúdo da página de inscrição. Primeiro de tudo, vamos definir sua largura, torná-la Night Ram. Em seguida, precisamos mudar a direção do layout do fluxo. Vamos fazer uma coluna. Por fim, alinhe os itens no centro. Tudo bem, como você pode ver, o layout foi alterado, mas o conteúdo em si não parece bom Então, vamos cuidar disso. Vou selecionar a parte esquerda. Precisamos deixar o conteúdo da página de inscrição. Vamos definir sua largura para 100%. E também vou me livrar da borda do lado direito. Vamos definir azul-branco como nenhum. Ok, a seguir, vou colocar os elementos no centro para isso. Vamos usar o Flexbox. Quando você exibe o flex. Então temos que mudar a direção do layout. Vamos transformá-la em uma coluna e , em seguida, colocar os itens flexíveis no centro Precisamos alinhar os itens ao centro e também ao centro do alinhamento do texto. Tudo bem, agora temos resultados muito melhores. Em seguida, vou criar a borda na parte inferior. Vamos usar a borda inferior com os valores de 0,1 RAM sólidos. E como cor, vamos usar B1, B1, B1. Ok, então isso é tudo sobre o lado esquerdo. Vamos passar para o EQ do lado direito. Selecione o conteúdo da página de inscrição, certo? Vou defini-lo com, vamos torná-lo 100% e também alterar a quantidade de preenchimento Vou fazer três rem em todos os quatro lados. Certo? Depois disso, vou cuidar dos botões do rádio. Vou diminuir a largura nuclear e também mudar suas posições. Vamos selecionar entradas com o atributo type. Vai ser um rádio. Vamos definir com 210 por cento. Em seguida, altere ligeiramente a margem. Precisamos de 0,5 rem na parte superior do que zero no lado direito, a parte inferior também será zero. Quanto ao lado esquerdo. Vou fazer menos três corridas. Tudo bem, então finalmente vou cuidar do botão. Eu quero aumentar sua largura em 200 por cento. Na verdade, como você sabe, o botão tem um nome de classe comum, blue btn. Portanto, se selecionarmos esse elemento usando apenas o nome da classe blue btn, afetaremos todos os botões azuis Para selecionar esse botão específico, precisamos, primeiro, de seu elemento principal, o conteúdo da página de inscrição, certo? Seguido pela aula blueback t n. Vamos definir com 200 por cento E também altere a margem na parte superior e inferior. Vou configurá-lo para três corridas e depois zero nos lados esquerdo e direito. Tudo bem, então tudo parece bem. E com esse ponto de interrupção, terminamos. Vamos seguir em frente e encontrar o próximo. O próximo ponto de interrupção será de 1.100 pizzas. Porque, como você pode ver, os menus suspensos estão confusos Na verdade, no ponto de interrupção, precisamos corrigir esse problema apenas porque o resto das páginas das seções parecem boas Então, vamos criar uma nova consulta de mídia CSS. Com eles, largura máxima, 1.100 pixels. Em seguida, selecione o item suspenso e altere a margem. Vou configurá-lo para dois rem na parte superior e inferior e 3,4 rem nos lados esquerdo e direito. Tudo bem, então é isso. Vamos prosseguir e tornar o projeto responsivo ao próximo ponto de interrupção 99. Projeto 10 - Torne o projeto responsivo - Parte 2: Tudo bem, então tornamos nosso projeto responsivo em alguns pontos de interrupção diferentes O último tinha 1.100 pixels. Vamos seguir em frente e continuar. O próximo ponto de interrupção no qual teremos que fazer algumas alterações será de mil pixels Esse ponto de interrupção será complexo porque precisamos fazer algumas mudanças importantes No ponto de interrupção. Modificaremos o menu de navegação. No momento, os itens de navegação são colocados na parte superior da página. Se passarmos o mouse sobre eles , os menus suspensos Depois de mil pixels, não teremos mais esse menu, colocaremos e ocultaremos no lado esquerdo da página. Além disso, criaremos um ícone de menu. E quando clicarmos no ícone do menu, o menu será exibido do lado esquerdo. Além disso, também teremos menus altamente suspensos. E eles serão exibidos assim que clicarmos nos itens de navegação adequados. Então é isso que vamos fazer em mil pixels. Vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como mil Então, a primeira coisa que vou fazer é diminuir o tamanho da fonte do elemento HTML. No momento, é de 55 por cento, e vou diminuí-lo para 50 por cento. Então, os elementos ficaram menores e agora temos um resultado melhor. Em seguida, vou esconder o romance pelo menos por algum tempo, porque precisamos criar o ícone do menu e também mudar o alinhamento na parte superior da página da web Vamos atribuir a dois romancistas que não exibem nenhuma. Ok, então os itens de navegação estão ocultos. Temos aqui apenas o logotipo e os botões. Vamos continuar e criar um ícone de menu no documento HTML. Vou abrir a tag div com o menu da classe. Então, precisamos de outro div com o ícone do menu da classe. Ele incluirá três linhas. Então, vamos abrir a tag div com uma classe nesta linha e linha um O primeiro será um nome de classe comum. Quanto ao segundo, vamos usá-lo para estilos individuais. Vamos duplicar essa linha de código duas vezes e alterar os nomes das classes Além disso, vou abrir o Span Tag para você porque precisamos do menu de recompensas. O ícone do menu foi criado e agora precisamos personalizá-lo. Primeiro, vamos criar algum espaço nos lados esquerdo e direito da barra de unhas. Vamos selecioná-lo. Defina sua largura, torne-a 100% e, em seguida, crie espaço usando o preenchimento Vou configurá-lo para 0,5 em vez de selecionar o ícone do menu. Defina sua largura e altura. Eu vou começar com 211 runs. Quanto à altura, será para a RAM. Além disso, vamos definir a cor de fundo. Vai ser uma cor de fundo temporária. Vamos usar aqui e. Depois disso, vamos fazer com que o ícone seja arredondado usando raio de borda com Em seguida, mude a borda. Você vê sua memória de 0,1 RAM sólida e a cor branca. Além disso, vou mudar o tipo de curso para torná-lo pontiagudo. Tudo bem, como você sabe, o ícone do Menu consiste em duas partes Temos as linhas e abrangemos o elemento. Eles devem ser colocados lado a lado. E também devem estar alinhados verticalmente no centro. Para isso, como sempre, vou usar o Flexbox. Vamos configurar a tela para flexível. Em seguida, precisamos alinhar o centro dos itens e justificar o espaço do conteúdo uniformemente. Então, no momento, a primeira parte não está visível, mas assim que a exibirmos, ela será colocada no lado esquerdo. Vamos continuar e exibir as linhas. Selecione-os usando a linha de nome de classe comum. Primeiro, defina sua largura. Eu vou chegar à RAM. Então, a altura será de 0,1 RAM. E também altere a cor de fundo. Faça isso também. Então, aqui temos as linhas, mas agora elas estão colocadas umas sobre as outras. Precisamos separá-los. Então, vamos selecionar o ícone do menu e definir sua altura. Eu vou fazer com 1,5 RAM. Em seguida, use novamente o flexbox. Precisamos de display flex. Em seguida, temos que mudar a direção porque as linhas devem ser colocadas verticalmente em uma coluna Finalmente, para criar espaço entre as linhas, precisamos justificar o espaço entre o conteúdo Tudo bem, agora as linhas parecem boas. Vamos cuidar desse elemento de amplitude. Vamos aumentar o tamanho da fonte. Vamos fazer com que seja 1.8 Ran. Ok, na verdade, com o ícone do Menu, terminamos. Eu só quero mudar essas cores temporárias. Vamos nos livrar da cor de fundo do menu. Em seguida, altere as cores da linha e do elemento de extensão. Precisamos que sua cor de fundo seja branca para a cor desse painel e, em seguida, ela também será branca. Tudo bem, então, finalmente, o ícone do menu está pronto e agora temos que começar a trabalhar na navegação Vamos dar uma olhada no projeto finalizado. A primeira coisa que vou fazer é fazer com que os itens de navegação pareçam. Então, quero dizer, alinharemos os itens, principalmente em uma coluna Nós mudaremos o plano de fundo e também moveremos o ícone do menu para o lado direito. Então, primeiro de tudo, vamos mover o ícone usando função transform, translate x. Vamos inserir a rampa 16. Então, o ícone é movido. Em seguida, vou exibir a navegação de volta, mas sem os menus suspensos. Então, vamos nos livrar do display none a partir daqui. Quanto aos menus suspensos, vou ocultá-los usando Portanto, os itens de navegação são viáveis, mas sem menus suspensos No momento, o layout da barra de navegação está completamente confuso, mas cuidaremos disso em um minuto Agora, é hora de mover a navegação para o lado esquerdo da página. Vou definir sua posição como fixa. Em seguida, defina as propriedades top e lack. Vou fazer com que os dois sejam zero. Defina também a largura e a altura. A largura será de 20 RAM. Quanto à altura, vou fazer com que seja 100% da janela de visualização Isso é, isso. Vamos ver o plano de fundo. Vou usar a função de gradiente linear. A direção da transição de cores será de cima para baixo. E depois vou inserir aqui três cores diferentes. O primeiro será 032181, que teremos Isso é para a terceira cor. Vai ser 04207. Viu? A navegação é movida para o lado esquerdo, mas os itens de navegação não são colocados corretamente. Vamos corrigir isso. Vou mudar a direção do layout flexível. Vamos fazer disso uma coluna. E também cria algum espaço na parte superior usando o preenchimento. Vamos fazer com que corra. Agora temos um resultado melhor. Como você pode ver, o banner cobre um pouco a navegação Isso indica que, usando a propriedade do índice Z, vou fazer o índice 200. Tudo bem, então o problema está resolvido. Vamos cuidar dos itens de navegação. Vou selecionar o item da lista de navegação. Vamos definir sua largura para 100%. Quanto à altura, vou torná-la automática. Também crie algum espaço usando o preenchimento. Vamos atribuir a 0.1 run. E também vou criar espaço na parte superior e inferior usando margem. Vamos configurá-lo para o ponto 4.0. Tudo bem, então, a seguir, vou diminuir o tamanho da fonte dos elementos do link Vamos selecionar o link da lista de navegação e definir o tamanho da fonte em um ponto Para alugar. Depois disso, vou diminuir o tamanho das setas e também vou girá-las Vamos selecionar o item da lista de navegação, seguido pelo elemento I. Vamos definir o tamanho da fonte, torná-la um ponto para a memória RAM. Quanto à rotação, vou usar Transform com a função de rotação como o valor que vou inserir aqui -90 Tudo bem, então a navegação parece boa. Na verdade, se passarmos o mouse sobre os itens , eles obterão a borda na parte inferior E também o romance mudará a cor de fundo. Esses são os efeitos padrão que definimos para o tamanho de tela extra grande. Agora eu vou me livrar do efeito fronteira. Quanto à barra de navegação, cuidaremos disso um pouco mais tarde. Então, vamos selecionar a navegação, listar o item com o mouse e definir a borda na parte inferior para saber Tudo bem, essa sílaba, a mínima principal. Por enquanto seguida, vou cuidar dos menus suspensos. No início. Vamos dar uma olhada no projeto finalizado e exibir o menu suspenso. Como você pode ver, o menu suspenso tem uma aparência um pouco diferente do padrão Temos aqui um item adicional, como o título. Além disso, os segundos links suspensos não estão mais visíveis Portanto, temos que fazer algumas alterações no documento HTML. Em primeiro lugar, quero adicionar nomes de classes individuais às listas suspensas porque precisamos estilizá-las e também precisamos dessas classes para JavaScript. Portanto, o primeiro item será o menu suspenso NEF pessoal. Quanto ao segundo , serão suficientes negócios suspensos Depois disso, vou personalizar os menus suspensos. Acho que seria melhor se escondêssemos um dos menus suspensos, pois isso tornaria nosso trabalho em andamento No momento, temos aqui uma lista suspensa sem exibir nenhuma. Vamos mudar o nome da classe e fazer com que ele não seja suspenso. Digamos negócios. No momento, nada é alterado aqui porque, por padrão, o menu suspenso E eles aparecem apenas ao passar o mouse. Vou exibir e personalizar o primeiro menu suspenso conforme o temos no projeto finalizado Na verdade, precisamos de alguns estilos semelhantes que usamos para a própria lista de navegação Então, vou adicionar outro nome de classe. Agora, menu suspenso pessoal. Em seguida, selecione-a separadamente e atribua a ela a opacidade um e a visibilidade visível Então, aqui temos o menu suspenso, mas não parece bom Temos que personalizá-lo. Em primeiro lugar, vou diminuir o preenchimento. Estou no espaço no lado esquerdo. Então, vamos definir o preenchimento para uma RAM. Depois disso, vou esconder os elementos do segundo link. Então, vamos selecionar um link suspenso naff para um atribuído para não exibir nenhum Ok, a seguir, vou mover o conteúdo para cima. Para isso. Vou apenas alterar o valor da propriedade justify content Vamos configurá-lo para flexionar. Começar. Tudo bem, agora o menu suspenso é colocado na parte superior da navegação Como dissemos, vamos adicionar um item aos menus suspensos. Eles serão uma espécie de título para eles. Então, vamos adicionar a tag LI à lista. Vou atribuir às aulas o suficiente, menu suspenso, item, título suspenso Em seguida, insira sua tag de link, que incluirá o ícone Font Awesome com a classe FAS, FA, Chevron down, seguido pela equipe de texto Vamos copiar os elementos LI e colá-los também na segunda lista suspensa Eu vou mudar o conteúdo. Vamos fazer disso um negócio. Tudo bem, vamos continuar e personalizar o item da lista recém-editado Em primeiro lugar, vou selecionar o item suspenso naff. Vamos definir sua largura para 100%. E também defina margem. Vou fazer a margem um correr em todos os quatro lados , exceto no de baixo. O fundo será zero. Depois disso, vou selecionar a tag do link. Então, precisamos ouvir o título suspenso a. Vamos definir o tamanho da fonte, tornando-a 1,6 RAM Também transforme texto em maiúsculas. Mude a cor, torne-a branca. Então, como você pode ver, o elemento de link parece bom. Temos que cuidar do ícone. Vamos selecionar o título suspenso, I, tamanho de fonte definido, fazer com que seja 1,5 grama Além disso, precisamos transformar com a função de rotação. O valor será de 90 graus. Em seguida, crie algum espaço no lado direito usando uma rampa na margem direita Tudo bem, então, finalmente, vamos diminuir o tamanho da fonte desses elementos de link Vamos selecionar o suficiente para o link 1 na parte superior da cidade e definir o tamanho da fonte para 1,4 redondo Tudo bem, então o menu suspenso está personalizado agora no primeiro estilo suspenso Mas você pode presumir que os dois menus suspensos estão prontos. Vamos apenas adicionar a atriz de soul para o menu suspenso. E todos esses estilos também serão aplicados à segunda lista. Ok, então agora temos que fazer o dinheiro funcionar. Para isso. Usaremos JavaScript 100. Projeto 10 - Torne o projeto responsivo - Parte 3: Tudo bem, agora é hora de fazer a navegação funcionar. Em primeiro lugar, vou esconder toda a navegação. Quero dizer, o romancista com listas suspensas. E também vou aplicar os estilos ao segundo menu suspenso. Como você sabe, está escondido até agora. Então, para ocultar a navegação, vou mudar a posição esquerda. Vamos configurá-lo para -20 RAM. Além disso, vamos adicionar aqui o nome da turma para o segundo menu suspenso. Quero dizer Nafta Uptown Business. Em seguida, faça o mesmo abaixo. E também se livre desse código a partir daqui. Ok, então a navegação está oculta. Também precisamos mover as peças e voltar à posição padrão. Então, vamos nos livrar dessa linha de código a partir daqui. Tudo bem, então tudo parece bem. Agora podemos adicionar um evento de clique ao botão e exibir a navegação. Vamos dar uma olhada no projeto finalizado mais uma vez. Portanto, além de exibir a navegação, precisamos mover o ícone para o lado direito rapidamente, mudar seu estilo e corrigi-lo Se rolarmos a página para baixo, o ícone do menu deverá ter uma posição fixa Primeiro, vamos cuidar do botão. Precisamos anexar a ele um ouvinte de eventos com um evento de clique Então, uma vez que clicamos nele, temos que atribuir a ele alguns estilos Quero dizer, temos que transformar as linhas em x. Além disso, vamos mudar as cores. Além disso, temos que movê-lo para o lado direito. Deixe-me explicar como vamos gerenciar todas essas coisas. Definiremos os estilos CSS mencionados com a ajuda de uma nova classe. Vamos adicionar essa classe à barra de navegação. E então, em CSS, usaremos as combinações dos seletores para que os novos estilos sejam aplicados aos elementos Vamos para o arquivo JavaScript. Vou criar novas variáveis. Vamos chamar o primeiro ícone do menu variável e selecioná-lo usando o método seletor de consulta Vamos especificar aqui o menu do nome da classe. Então eu vou duplicar esse código, mudar o nome da variável Vai ser um bar de navegação. E também vou mudar o nome da classe que precisamos aqui. Agora, tudo bem, depois disso, vou atribuir ao ícone Menu e ao ouvinte de eventos com eventos de clique e com uma Então, como dissemos, temos que adicionar uma nova classe para fazer agora para desclicar Na verdade, precisamos adicionar uma nova classe ao romance para desclicar, mas depois removê-la na próxima, porque quando clicarmos primeiro no ícone, exibiremos a navegação Mas então, na próxima liga, devemos escondê-lo. Portanto, temos que usar um método de alternância. Em geral, o método toggle adiciona uma classe ao elemento se ele não a tiver e a remove se o elemento a tiver Portanto, precisamos selecionar uma barra suficiente. Em seguida, temos que usar uma das propriedades chamada lista de classes, que inclui todas as classes que a ilha tem. E então precisamos do método de alternância. Temos que especificar aqui o nome da classe, chamá-la de mudança. Tudo bem, então isso é tudo sobre o JavaScript. Vamos voltar ao arquivo CSS. Agora, podemos aplicar os novos estilos com um clique. A primeira coisa que vou fazer é mover o ícone do menu para o lado direito. Portanto, precisamos selecionar a alteração seguida pelo menu. E para mover o ícone, vou usar novamente a transformação com função Translate X como valor. Vamos inserir aqui a rampa 16. Como você pode ver, o ícone se move para o lado direito no primeiro clique. Ele volta ao seu local padrão no próximo clique. Ok, então antes de passar para a navegação, quero terminar de trabalhar com o botão. Temos que atribuir estilos diferentes e clicar. Como dissemos, precisamos corrigi-lo assim que a navegação for exibida. Portanto, precisamos aqui da posição fixa. Além disso, precisamos definir as propriedades superior e esquerda. A primeira posição será correr até a esquerda. Serão seis corridas. Agora, quando clicarmos no ícone, ele será corrigido. Mas temos aqui o problema. Como você se lembra, o ícone do menu é um item flexível. Uma vez fixado , ele salta do contêiner flexível e do logotipo, o segundo item flexível toma Temos que consertar isso. Precisamos definir a posição do logotipo manualmente. Então, vamos selecionar o logotipo da barra de navegação. Vou definir essa posição como absoluta. Então precisamos de uma posição superior. Vamos fazer isso para RAM. E então temos que centralizá-lo perfeitamente. Então, vou definir a posição esquerda para 50 por cento. E também precisamos transformar, traduzir com os valores de -50 por cento E novamente -50 por cento. Ok, então o logotipo parece bom, mas temos o mesmo problema que temos agora com o de Batson Então, vamos em frente e consertar isso. Vamos selecionar os botões da barra de navegação e atribuir a eles uma linha à margem esquerda Tudo bem, então agora tudo parece bem. Vamos voltar ao ícone do menu e personalizá-lo. Precisamos transformar linhas em x. Então, temos que selecionar cada linha com uma mudança de classe. Vamos começar com o primeiro. Então, como a mudança, seguida pela linha um. Então, vou girar a primeira linha. Precisamos aqui transformar, girar com o valor 45 graus. Então vamos duplicar esse código. Mude o nome da classe que precisamos aqui, linha três. Quanto ao valor da função de rotação, precisamos de -45 graus Além disso, temos que esconder a segunda linha. Então, vamos selecionar a linha dois com alteração e atribuir a ela opacidade zero e viabilidade Ok? Então, agora, não temos aqui o x. A razão é que, por padrão as linhas são transformadas a partir do centro porque a origem da transformação é centralizada por padrão, temos que alterá-la e virar para a esquerda Então, precisamos transformar a origem no valor disso. Tudo bem, então agora o problema são os nerds . E temos aqui o x. Em seguida, temos que mudar as cores, as cores de fundo das linhas. Vamos fazer com que seja 444. Além disso, precisamos alterar a cor de fundo do próprio ícone do menu. Vamos fazer com e, e. E, por fim, vamos mudar a cor dos elementos de extensão Precisamos selecionar a extensão do menu com a alteração. Vamos definir a cor para 555. Tudo bem, então a última coisa que vou fazer é fazer a transição para o ícone Então, precisamos fazer uma transformação de transição com uma duração de 0,6 s. Além disso, vou usar uma função chamada Cubic Bezier Isso nos permite criar uma transição personalizada. Então, no nosso caso, eu quero fazer a transição mais lenta no início e depois rápida no final Para conseguir isso, vou passar aqui os seguintes valores. Precisamos de 100. E novamente um. Na verdade, você pode brincar com valores diferentes, mas acho que essa transição parece muito boa. Tudo bem, então, finalmente, com o ícone Menu, terminamos. Agora temos que cuidar da navegação. Portanto, precisamos usar novamente a mudança de classe, seguida pelo romancista. E para exibir a navegação, temos que definir a posição esquerda como zero. Além disso, vamos usar novamente a transição com o mesmo fato. Nesse caso, precisamos de 0,6 s à esquerda e da mesma função cúbica de Bezier com os Tudo bem, então tudo funciona bem. Agora temos que exibir os menus suspensos. Quando clicamos nos links, quero dizer o pessoal e o comercial. Antes de fazermos isso, quero cuidar de uma coisa. No momento, o efeito de foco, siderurgia ou os itens de navegação após mil pixels, não precisamos mais do efeito porque modificamos Então, para cancelar o efeito de foco, vou fazer o seguinte Precisamos usar uma instrução if else qual definiremos o tamanho da tela. Se o tamanho da tela for menor que 1.000 pixels, precisamos aplicar esse código aqui. E se não, então devemos executar esse código, todas as gorduras. Então, vamos criar uma declaração if na qual temos que definir a largura do tamanho da tela. Portanto, precisamos de uma largura interna de pontos de janela. Deve ter menos de mil pixels. Então, se essa condição for verdadeira, precisamos pegar esse código e inseri-lo aqui. E se for falso, precisamos de uma declaração else onde devemos colocar todo esse código Então, agora, a cor de fundo do Napa não muda mais Mas temos aqui um pequeno problema. Como você vê, a seta está girando. Também não precisamos disso. Criamos esse efeito de foco a partir do CSS. Assim, podemos removê-lo no arquivo CSS e criar o mesmo efeito no JavaScript. Como você sabe, todos nós já temos um efeito de foco aqui na declaração else. Então, só precisamos adicionar o código para as setas. Mas primeiro, vamos nos livrar disso do CSS. Então, vou acessar as setas do item da lista que precisamos aqui, item suspenso. Em seguida, temos que acessar os elementos do link, que é o primeiro elemento filho do item da lista. Então, quando você ouve a propriedade chamada primeiro elemento filho, a seta é representada com o ícone Font Awesome, que é filho do elemento link. Então, novamente, precisamos ser o primeiro elemento filho. Depois disso, precisamos da propriedade de estilo, seguida pela transformação. Como o valor que precisamos aqui, gire 180 graus. Vamos copiar esse código e colá-lo abaixo. Depois de tirar o mouse, temos que tornar o valor da função de rotação zero Tudo bem? Então, como você pode ver, não temos mais aqui o efeito de flutuação Agora podemos seguir em frente e tirar você dos menus suspensos. Depois de clicarmos nos links, tivemos que exibir o menu suspenso adequado Então, em vez de adicionar os ouvintes de eventos à construção separadamente, vou usar novamente o método forEach Mas antes disso, precisamos atribuir a ambos os elementos do link os nomes de classes comuns Vamos ligar para eles, mostrar o menu suspenso. Em seguida, selecione-os usando o método seletor de consulta all. Vamos especificar aqui o nome da classe show drop-down. Depois disso, temos que percorrer os links e anexá-los a eles e ao ouvinte do evento Portanto, precisamos de cada uma que seja mais fácil para você e uma função de seta com o parâmetro, vamos chamá-la de link. Em seguida, anexe a ele o ouvinte de eventos com o evento de clique e com uma função de seta Então, agora temos que exibir os menus suspensos. Na verdade, eles são irmãos dos elementos de link. Portanto, precisamos ouvir o link seguido pela propriedade chamada next elements sibling Em seguida, temos que definir a propriedade de estilo com a posição esquerda. Vamos defini-lo como zero. Portanto, se eu exibir a navegação e clicar no link, o menu suspenso apropriado será exibido Tudo bem, estamos avançando, mas temos aqui um pequeno problema. Se clicarmos no ícone do menu, o ícone desaparecerá, mas o menu suspenso não será fechado Precisamos consertar isso. Portanto, temos que ocultar os menus suspensos. Quer que a mudança de classe seja removida do Pólo Norte. Então, vou usar uma instrução if onde definiremos se a barra de navegação tem a mudança de classe ou não Então, vamos criar uma declaração if com a seguinte condição. Primeiro, precisamos colocar aqui o operador lógico NOT. Então, precisamos da lista de classes da barra de navegação. E temos que usar um método chamado contains. Esse método nos mostra se o elemento contém a classe específica não está dentro dos parênteses, precisamos colocar a mudança Portanto, se essa condição for verdadeira, significa que a alteração de classe foi removida da barra de navegação E, portanto, temos que ocultar os menus suspensos. Vamos selecioná-los usando o método querySelector all. Em seguida, especifique aqui o nome da classe nafta uptown. Agora precisamos usar para cada método. Vamos inserir aqui o parâmetro que vou chamá-lo de dropdown. Portanto, para ocultar os menus suspensos, precisamos do estilo suspenso, seguido pela propriedade left E temos que configurá-lo para -20 execuções. Então, agora tudo funciona perfeitamente. A última coisa que vou fazer em relação ao menu é ocultar os menus suspensos e, assim que clicarmos nos cabeçalhos suspensos, primeiro atribuirei classes comuns aos links atribuirei Vamos chamá-lo de link de título suspenso. Precisamos dessa classe para os dois elementos de link. Em seguida, volte para o arquivo JavaScript e selecione-os usando o método querySelector all Precisamos especificar aqui o nome da classe, o menu suspenso link do título que precisamos percorrer esses Então, precisamos, para cada método. Vamos inserir aqui uma função de retorno de chamada com um parâmetro. Vou chamá-lo de link de cabeçalho. Em seguida, temos que anexar aos elementos do link, ouvintes de eventos com eventos de clique E também precisamos aqui de uma função de seta. Portanto, precisamos ocultar os menus suspensos. E temos que acessar esses menus suspensos a partir dos elementos do link Portanto, precisamos usar o link do título. Em seguida, temos que acessar os elementos principais. E para isso, temos que usar uma das propriedades chamadas elementos pais. Então, agora temos acesso ao item da lista. E, em seguida, temos que acessar o menor elemento em si. Então, novamente, precisamos elemento pai seguido por essas propriedades de mosaico. Então precisamos sair. E o valor será -20 execuções. Ok, então se clicarmos no item de navegação e depois clicarmos no link do título suspenso, o menu suspenso será ocultado Na verdade, temos aqui algum problema com o segundo menu suspenso porque temos dois títulos Portanto, podemos ter algum erro no arquivo HTML. Vamos dar uma olhada. Então, como você pode ver, por algum motivo, eu inseri aqui dois cabeçalhos. Talvez você não tenha esse problema em seu próprio arquivo HTML. Então, vamos nos livrar disso daqui. Tudo bem, como você pode ver, tudo funciona perfeitamente. E, na verdade, qual é o cardápio, estamos quase prontos. Eu disse quase porque se aumentarmos o tamanho da tela para muito grande, teremos alguns problemas. Como você pode ver, temos o ícone do menu no canto superior esquerdo. Além disso, se passarmos o mouse sobre os itens de navegação , veremos os dois títulos da parte alta da cidade que adicionamos à lista Portanto, precisamos ocultá-los por padrão. Vamos selecionar o menu e atribuí-lo. Não exibir nenhum. Em seguida, precisamos de um título suspenso. Novamente, não precisamos exibir nenhum. E, abaixo, quero dizer, no Código Responsivo, precisamos selecionar o título suspenso. Temos que atribuir um bloco de exibição para realizar o trabalho com espaços Certo? Então, finalmente, com a amônia, terminamos. Vamos continuar e tornar o projeto responsivo 101. Projeto 10 - Torne o projeto responsivo - Parte 4: Tudo bem, vamos seguir em frente e continuar tornando nosso projeto responsivo No momento, estamos trabalhando na tela com uma largura máxima de mil picos Modificamos a navegação e agora vou personalizar um pouco as outras seções. A primeira seção parece boa. Vamos passar para a próxima seção. Também parece bom, mas acho que podemos diminuir um pouco o tamanho da fonte do título. Vamos selecionar o título da Seção dois e definir o tamanho da fonte para variar. Tudo bem, em seguida, vou personalizar a seção de recursos Selecione o desenvolvimento rápido com características cruzadas e defina sua largura para 95%. Além disso, vou selecionar o recurso em si. Vamos mudar o preenchimento, torná-lo zero na parte superior e inferior e 1,5 rem nos lados esquerdo e direito Veio aquela sílaba, a seção de longa-metragem . Parece bom. Depois disso, vou cuidar da próxima seção. Quero mudar a direção do alinhamento do conteúdo No momento, a imagem e as listas são colocadas lado a lado, e eu quero colocá-las umas sobre as Então, vamos selecionar a seção conteúdo e mudar a direção, criar cada coluna e também alinhar os itens no centro Em seguida, vou centralizar a imagem perfeitamente. Vamos selecionar seu invólucro. Então, para centralizar a imagem, vou usar a margem onde o valor é automático. Ok, vamos personalizar a lista. Vamos selecionar a seção porque, pelo menos, vou definir sua largura como 100%. E também vou colocar os itens da lista no centro para isso. Vamos usar o Flexbox. Precisamos configurar a tela para flexionar. Então temos que mudar a direção. Vamos fazer uma coluna. E, por fim, precisamos alinhar o centro dos itens. Então, isso é tudo sobre a quarta seção. Vamos seguir em frente e cuidar do rodapé. Vou alinhar os elementos verticalmente em uma coluna. Então, vamos continuar e selecionar a parte superior do filtro. Mude de direção, faça com que os chame. E também alinhe os itens no centro. Ok, vamos criar algum espaço na parte inferior da lista. Vamos selecionar a lista de rodapés e definir a margem inferior como uma RAM Além disso, vou selecionar o parágrafo de direitos autorais. Vamos alterar a quantidade de espaço na parte superior e inferior. Vamos definir a margem para 1,5 RAM e depois zero. Tudo bem, então isso é tudo sobre a primeira página. Vamos conferir o resto das páginas. Então, como você pode ver, tudo parece bem e podemos seguir em frente e encontrar o próximo ponto de interrupção. Portanto, o próximo ponto de interrupção será de 800 pixels. Vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 800 Então, primeiro de tudo, vou diminuir o tamanho da fonte dos elementos HTML. Vamos defini-lo para 45%. Em seguida, vou cuidar da segunda seção. Vamos definir o preenchimento na parte superior e inferior para dez RAM e depois zero nos lados esquerdo e direito Além disso, vou selecionar o título da Seção dois. Vamos personalizá-lo um pouco. Eu vou definir com 280 por cento. Além disso, precisamos alinhar o texto no centro. Além disso, vou definir a altura da linha. Vamos fazer com que seja 1.2. Tudo bem, a seguir, vou personalizar os serviços. Então, vamos selecionar o elemento wrapper div com uma classe services e definir a largura, tornando-a 95% Em seguida, vou selecionar o serviço em si. Vamos definir sua largura e passar para a RAM. E também altere a quantidade de espaço nos lados esquerdo e direito. Coloque a margem em zero e depois corra. Tudo bem, agora temos um resultado muito melhor. Em seguida, quero diminuir o tamanho da fonte da fonte. Ícones incríveis. Vamos selecionar o serviço. Eu mudo o tamanho da fonte, faço para RAM. E também vou personalizar os botões. Selecione o serviço btn, altere a largura e torne-a com 15 RAM. E também defina o preenchimento em uma RAM nos quatro lados. Ok, então isso é tudo sobre a segunda seção. Em seguida, vou personalizar a seção de recursos. Quero colocar os recursos em três linhas. Então, vamos selecionar os recursos e definir sua largura para 100% Em seguida, vou selecionar o recurso em si. Vamos definir sua largura para 50 por cento e também alterar o preenchimento, torná-lo zero E para correr. Tudo bem, então acho que é isso na primeira página. Todas as outras seções parecem boas. Vamos conferir a página de login. Também parece bom. Quanto à página de inscrição, precisamos fazer algumas alterações aqui. Então, vamos seguir em frente e selecionar o lado superior. Precisamos entrar no topo da página de inscrição e definir sua largura como 50. Rem. Em seguida, vou tirar você do conteúdo. Selecione o conteúdo da página de inscrição e defina sua largura para 85% E também defina o preenchimento. É zero na parte superior e inferior e três rem nos lados esquerdo e direito. Depois disso, vou selecionar a parte esquerda do conteúdo. Portanto, precisamos cadastrar o conteúdo da página à esquerda. Vamos definir sua largura em 200 por cento. Também mude o preenchimento, transforme-o em três RAM. Em seguida, vou selecionar as imagens. Vamos definir a largura e torná-la 14 RAM. Também alterou a margem. Vou configurá-lo para 0,1, 0,5 g e também diminuir a largura da borda. Vou configurá-lo para 1 g de sólido. A cor CCC entrou. Depois disso, vou selecionar os elementos do título H1. Vamos mudar o tamanho da fonte, fazer com que seja tripla. Tudo bem, então a parte esquerda parece boa. Vamos passar para a direita. Selecione o conteúdo da página de inscrição, certo? Então, primeiro de tudo, vou alinhar os elementos usando o Flexbox Vamos definir a exibição como flexível e, em seguida, alterar a coluna de direção flexível. Em seguida, vou alinhar os itens no centro. E, finalmente, troque o preenchimento, faça três rodadas. Ok, finalmente, vou personalizar os botões de rádio. Vamos selecioná-los usando o atributo type ou rádio. Eu vou mudar sua largura. Vamos fazer com que seja 20 por cento. Então. Altere a margem. Vou configurá-lo para 0,5 rem na parte superior do que 1,5 rem no lado direito. Quanto aos lados inferior e esquerdo, ambos serão zero. Tudo bem, então digamos que, em relação a esse ponto de interrupção, vamos seguir em frente e trabalhar no próximo O próximo ponto de interrupção será de 550 pixels. Vamos criar uma nova consulta de mídia CSS com uma largura máxima de 550 pixels. No ponto de interrupção, vou esconder completamente o logotipo da barra de navegação Vamos selecionar o botão ou logotipo e atribuí-lo para não exibir nenhum. Em seguida, vou cuidar dos elementos do banner. Vamos selecionar o título do painel, alterar o tamanho da fonte, rima 4.5 Em seguida, selecione faixa ou parágrafo e definindo a altura da linha, torne-a 1,2. Isso é tudo sobre a primeira seção. Vamos passar para o segundo. Vou colocar os serviços verticalmente na coluna. Então, vamos selecionar o desenvolvimento rápido e alterar a coluna de direção flexível E também vou alinhar os itens no centro. A seguir, vamos falar aqui do serviço em si. Vamos definir sua largura para 60%. Além disso, vou definir a margem na parte inferior. Vamos fazer quatro n. Tudo bem, é isso. Em relação à segunda seção, vamos para a terceira. Vou mudar o tamanho da fonte do elemento de cabeçalho. Então, vamos selecionar o título da Seção três e definir o tamanho da fonte dois. Para RAM. Além disso, vou colocar os recursos verticalmente em uma coluna Então, vamos selecionar a direção do invólucro e da flexão científica com a coluna de valor E também precisamos alinhar o centro dos itens. Ok, então vamos selecionar o recurso. Vamos definir essa largura, torná-la 80 por cento. Ok, vamos passar para a próxima seção. Quero dizer a quarta seção. Vou selecionar os elementos do título. Vamos mudar o tamanho da fonte, fazê-la cair. Em seguida, vou selecionar o conteúdo. Vamos definir a largura para 100%. Mude também o preenchimento, torne-o zero na parte superior e inferior e três rampas nos lados esquerdo e direito Quanto à imagem, vou escondê-la de jeito nenhum Então, vamos selecionar o invólucro e definir a exibição como nenhuma. Ok, por fim, vou alinhar os itens no lado esquerdo Então, vamos selecionar a menor atribuição aos itens de alinhamento com uma flexibilidade de valor Comece com esta seção. Nós terminamos. Vamos seguir em frente e personalizar o rodapé Vamos selecionar o topo do rodapé e definir doce, torná-lo 90%. Ok, então isso é tudo sobre a primeira página. Vamos conferir o resto das páginas. Portanto, a página de login não precisa de alterações. Quanto à página de inscrição, precisamos personalizá-la. Vamos tirar você do lado de cima. Vou definir sua largura para quatro para correr. Depois disso, vamos selecionar o conteúdo da página de inscrição e definir sua largura para 100%. Tudo bem, a seguir vou esconder a parte esquerda do conteúdo Então, vamos selecionar à esquerda e atribuído para não exibir nenhum. Finalmente, vamos aumentar a largura da parte larga. Vou configurá-lo para lidar com o presente. Tudo bem, então isso é tudo sobre esses pontos de interrupção. E agora temos que personalizar o projeto no último ponto de interrupção, que será de 400 pixels Vamos criar uma nova consulta de mídia CSS e especificar a largura máxima como 400 pixels. Então, primeiro de tudo, vou diminuir o tamanho da fonte do elemento HTML. Vamos fazer com que seja 40 por cento. Então, tudo parece bom. Mas vou personalizar o ícone do Menu e exibi-lo em alfa. Em seguida, o ícone cobrirá o botão de login e , na verdade, não parecerá bom. Então, vou esconder o menu do Word do ícone. Vamos selecionar a extensão do menu e configurá-lo para não exibir nenhum. Então, vou diminuir a largura do menu que eu posso resolver. Vamos selecioná-lo e definir sua largura para cinco marcas. Agora, posso ver que temos um resultado muito melhor. A única coisa que eu não gosto aqui é o segundo item da lista na quarta seção. Porque o número é meio reduzido. Então, eu vou consertar isso. Vamos selecionar o número e definir sua largura mínima. Faça 3,5 g. Tudo bem, então, finalmente, o projeto é responsivo a diferentes tamanhos de tela Antes de terminarmos o projeto, quero fazer uma última coisa. Na verdade, se aumentarmos o tamanho da tela e passarmos o mouse sobre os itens de navegação , os menus suspensos não serão exibidos. Precisamos atualizar a página para isso. Portanto, para evitar a atualização manual da página, farei uma automática assim que redimensionarmos o tamanho da tela Então, para isso, vou anexar o ouvinte de eventos ao objeto da janela com o redimensionamento do evento Além disso, precisamos aqui da função de seta, que será executada assim que redimensionarmos a janela Portanto, para recarregar a página, precisamos da seguinte janela, localização do ponto, recarga do ponto Então, se testarmos, você verá que tudo funciona perfeitamente. Tudo bem, então terminamos de trabalhar em nosso décimo projeto, o clone do Paypal Foi o clone da interface do usuário deste site. Espero que você tenha gostado do projeto e aprenda algumas coisas novas. terminar de trabalhar neste projeto, nosso curso também acabou. Espero que tenha sido interessante e útil. Criamos dez sites diferentes , modernos e responsivos do zero Então, espero que você tenha uma grande prática desenvolvimento web de front-end e aprenda muitas coisas diferentes em HTML, CSS e Essas são as três principais tecnologias de desenvolvimento web de front-end. Portanto, é muito importante aprendê-las e praticá-las hoje. Tudo bem, então eu gostaria de agradecer por estar conosco. Desejo a você tudo de bom. Estamos planejando lançar um novo curso em breve, novamente com projetos. Portanto, fique atento. Boa sorte Tchau tchau.