Crie 5 modelos de design de UI completos e modernos

1. Apresentação: Bem-vindo ao novo curso, onde você pode aprender como criar modelos de design modernos e bonitos para seus Se você quiser criar e personalizar seu portfólio, torne-se um desenvolvedor e designer experiente e seja contratado. Então este é o curso certo para você. Criaremos juntos cinco sites responsivos completos e modernos com três tecnologias principais, HTML, CSS e JavaScript. Se você tiver algum conhecimento básico dessas tecnologias. E ainda assim você tem alguns problemas para criar os sites. Ou, se você quiser aprimorar suas habilidades de desenvolvedor e designer , você veio ao lugar certo. Criamos este curso para oferecer aos alunos a melhor experiência em três tecnologias principais e permitir que eles criem os modelos mais bem projetados que empolgarão seus clientes Quem criará cinco sites completos diferentes. E não apenas as partes do zero, elas estarão cheias de efeitos e designs modernos, bonitos e bonitos. Começaremos com projetos relativamente simples e também passaremos por algumas partes avançadas. Usando este curso, você pode obter as inspirações que ajudarão você 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 altamente exigidas. Articulações 2. Sobre os projetos: Olá e bem-vindo ao curso. Estamos felizes em ver você aqui. Como você já sabe, vamos criar cinco sites responsivos completos diferentes usando HTML, CSS e JavaScript. Neste vídeo, vamos analisar cada um deles. Gostaria de mencionar uma coisa. Como dissemos, os projetos serão criados com base em três tecnologias principais, HTML, CSS e JavaScript. Portanto, você deve ter um forte conhecimento de HTML e CSS e alguns conhecimentos básicos de JavaScript para acompanhar as palestras Tudo bem, então vamos seguir em frente e descrever os projetos. Nosso primeiro projeto será um site sobre móveis. O projeto será simples. Usaremos apenas HTML e CSS. Mas acho que você vai gostar porque o projeto tem uma aparência moderna e bonita. Vamos seguir em frente e descrever o projeto. Ele consistirá em algumas seções diferentes. Começará com uma navegação, que incluirá alguns elementos diferentes, como um logotipo, uma barra de pesquisa e alguns ícones nos itens de navegação. A navegação será seguida pelo cabeçalho do site. Tem um fundo azul e eu adoro um banner com alguns textos e botões Em seguida, temos uma seção de projetos que consiste em alguns títulos diferentes E então temos seis cartas com ícones bonitos. Se passarmos o mouse sobre os ícones, teremos um efeito agradável e suave Depois disso, criará uma seção de preços. Esta seção terá duas partes diferentes. A primeira parte consiste na imagem, no título e na parte inferior. Quanto à segunda parte, você encontrará seus seis carros com preços diferentes com alguns bons efeitos colaterais. Em seguida, temos uma seção de blog onde você pode encontrar uma revista e alguns artigos sobre as tendências. A seção do blog é seguida pela seção de contato. E, finalmente, temos aqui um rodapé simples e bonito do site Tudo bem, então essas são as seções do nosso primeiro site. Cada projeto do curso é responsivo a diferentes tamanhos de tela Se eu inspecionar a página, mude para o modo responsivo e verifique o projeto com quatro tamanhos de tela diferentes Você descobrirá que o projeto é responsivo e fica bem em todos os tamanhos de tela diferentes Os projetos do curso são criados para um tamanho de tela extra grande. Quero dizer, isso coincide com 1920 pixels de largura e 1080 pixels de altura Portanto, se você estiver usando um tamanho de tela relativamente menor , durante as aulas, você deve alternar para o modo responsivo e especificar a largura e a altura dessa forma Caso contrário, o projeto não ficará bem em telas menores até que seja responsivo Então, por favor, leve isso em consideração. Ok, então o próximo projeto será um site de portfólio pessoal. Hoje em dia, esse tipo de site é muito popular e muito procurado, então acho que será interessante para você Portanto, o projeto é sobre um desenvolvedor web com todas as suas habilidades, trabalhos, projetos, contexto e assim por diante. Vamos seguir em frente e descrever o projeto. Portanto, temos aqui um cabeçalho do site no qual temos um logotipo, banner e um ícone do menu de hambúrguer Se eu clicar nele, cara, a Navegação aparecerá com alguns efeitos legais. O banner consiste em alguns elementos diferentes, incluindo a imagem de um desenvolvedor X, temos uma seção de habilidades que mostra tecnologias e o nível de conhecimento de um desenvolvedor web. A seção Habilidades é seguida pela seção Projeto onde você pode encontrar diferentes trabalhos de um desenvolvedor. Depois disso, temos aqui uma seção de contato com alguns detalhes de contato e campos de entrada. E finalmente, você pode encontrá-lo em um rodapé simples e agradável. O próximo projeto será um site sobre arquitetura. O projeto consiste em algumas seções diferentes. Começaremos a criar o projeto trabalhando na barra de navegação e na navegação Temos aqui o logotipo, a barra de pesquisa e o ícone do menu de hambúrguer Se eu clicar nele, a Navegação será exibida bem. Se eu passar o mouse sobre os itens de navegação , obteremos esses efeitos legais e legais Após a navegação, criaremos este banner simples e agradável , no qual temos alguns elementos diferentes O binário é seguido por uma seção Sobre, que consiste em duas partes. No lado esquerdo, temos alguns elementos de texto e o botão, como no lado direito, consiste em uma moldura e uma imagem. Além disso, temos aqui uma parte bonita e legal na parte inferior desta seção. Em seguida, temos a seção de projetos, que inclui cinco cartas com alguns bons efeitos de foco Depois disso, chega à Seção de Clientes, que consiste em dois cartões diferentes. Então, temos uma seção de contato e um rodapé simples abaixo. Tudo bem, em seguida, vamos construir um site de designer de interiores Este campo é muito popular e altamente exigido hoje em dia. Então, acho que esse tipo de site será interessante e útil para você. Temos aqui um cabeçalho do site que inclui o logotipo, o ícone do menu de hambúrguer e, em seguida, o banner animado Se eu clicar no ícone Menu , a Navegação aparecerá bem. Os binários Animados, como você pode ver, os elementos de texto estão mudando com alguns efeitos de desvanecimento Em seguida, temos a seção Sobre, que aparece bem com um efeito de desvanecimento Vamos usar esse efeito em todas as seções deste projeto. A seção Sobre consiste em uma imagem e alguns detalhes sobre o designer. Em seguida, temos a seção Serviços, que mostra o que o designer pode oferecer. Depois disso, você pode encontrar os projetos do designer. Estou no portfólio do trabalho dela. Em seguida, vem a seção de conquistas na qual temos contadores animados E, finalmente, você pode encontrar aqui um rodapé simples e agradável. Tudo bem, então o último projeto e este curso serão um site sobre cafeteria O projeto consistirá em algumas partes diferentes e estará repleto de designs e funcionalidades de aparência moderna designs e funcionalidades de aparência Começaremos com uma navegação que é fixada na parte superior da página. Depois de rolar para baixo, ele mudará seu plano de fundo Depois da navegação funcionará no banner, que tem uma apresentação de slides Vamos usar um dos plug-ins chamado swipe Sim É possível ver que o Slideshow funciona automaticamente Mas, além disso, você pode usar esses controladores. Além disso, você pode arrastar os slides com o mouse. Ok, a seguir, temos a seção Sobre com algumas informações. Esta seção é seguida por um menu. Depois disso, temos alguns dados com contadores animados e com alguns efeitos interessantes A próxima seção será sobre os clientes que temos aqui, as opiniões dos clientes colocadas por custo. Em seguida, vem a seção Contato, onde você pode entrar em contato com a casa ou reservar uma mesa. E, finalmente, temos aqui um rodapé simples. Tudo bem, então isso é tudo sobre nossos projetos. Espero que você goste deles. Aprenda algo novo e também obtenha inspiração para aprimorar seu próprio portfólio. Vamos seguir em frente. 3. 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 da web 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 de abuso, 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 é muito simples, dois, 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 para os Projetos 4. Projeto 1: crie e estilize a navegação do site: Tudo bem, então eu criei uma nova pasta na área de trabalho. Vamos prosseguir e abri-lo no código VS. Vou criar aqui dois arquivos diferentes, um para HTML e outro para CSS. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Vamos mudar o título. Vou instituir uma mobília. E também vou vincular o arquivo CSS. Vamos prosseguir e executar o projeto no navegador. Além disso, vou colocar o navegador e o editor lado a lado. Assim mesmo. Porque quero tornar nosso processo de trabalho mais conveniente e simples. Em seguida, vou pegar alguns links como Font Awesome CDN, porque vamos usar alguns ícones do Font Awesome em todo o projeto Vamos pegar o link. Em seguida, abra a tag do link e cole aqui. O link. Além disso, vamos usar algumas fontes do Google. Então, vamos visitar o site do Google Fonts e pesquisar algumas fontes diferentes. A primeira será uma fonte chamada Quênia. Vamos selecionar o Estilo e depois pesquisar outra fonte, MCT1 Vou selecionar alguns estilos diferentes. Então precisamos pegar o link daqui. Vamos colá-lo no elemento principal. Tudo bem, então acho que estamos prontos. Vamos começar a criar uma marcação HTML. Em primeiro lugar, vou passar aqui alguns comentários. Em seguida, vamos abrir a tag DIV com o contêiner da classe Em seguida, precisamos de outro comentário por enquanto, é claro. E então vou instituir a tag de navegação HTML5 com a classe Em seguida, vou criar uma tag profunda, que será suficiente Part top. E incluirá um logotipo. Vou lhe passar um ícone Font Awesome com os nomes das classes fa, solid, FAA, couch Então, aqui temos o ícone Font Awesome. Em seguida, vou inserir aqui uma etiqueta de extensão, que incluirá quem tributou o valor dos móveis Tudo bem, isso é tudo sobre o logotipo. Em seguida, vou criar uma barra de pesquisa. Vamos instituir aqui a tag de entrada com um texto digitado e com o atributo de espaço reservado, que incluirá o texto a seguir O que você está procurando? Então, precisamos novamente de um ícone Font Awesome, nomes de classes, fa solid, uma lupa Então, aqui temos as entradas e o ícone de pesquisa. Depois disso, vou criar outra tag profunda com o usuário da classe. E vou passar aqui alguns ícones diferentes. O primeiro será um bom FA, pego comprando. Em seguida, vou passar a etiqueta de extensão, que incluirá o valor em que estou, o cifrão e alguns números. Então vou usar outro Font, ícone Awesome, F, um hot normal da FAA E, finalmente, vou pausar aqui outro ícone. Vai ser um usuário sólido. Então, aqui temos nossos ícones. Depois disso. Vou criar a lista de navegação, que incluirá alguns itens de navegação diferentes. Vamos interferir em outra fonte, ícone incrível, vai ser fa, solid fa house. E também vou usar aqui a tag span com value home. Vamos duplicar o item de navegação algumas vezes e depois alterar os nomes das classes e os valores dessa Pentax Precisamos aqui de sofá e produtos. O próximo será o cifrão e o preço. O próximo ícone será blogueiro. Vamos fazer uma pausa aqui Blog. Então teremos vendas de estrelas. E o último ícone será mensagem. E o elemento de extensão será Contato. Tudo bem, então aqui temos os ícones, mas como você pode ver, um dos ícones não está sendo exibido Vamos verificar. Portanto, precisamos de marcas fortes em vez de sólidas. Agora o problema está resolvido. Tudo bem, vamos falar sobre a marcação HTML. Vamos começar a escrever um pouco de CSS. Vou passar aqui alguns comentários sobre estilos padrão. Vamos seguir em frente e selecionar todos os elementos usando um asterisco Vamos definir a margem e preencher os dois como zero. Além disso, vou definir a propriedade de dimensionamento da caixa e defini-la como border-box O próximo será descrito. Vamos fazer com que não. E também vou definir a família de formulários gerais. Vai ser simulado sem serifa. Assim, é possível ver que os estilos padrão são aplicados. Em seguida, vou alterar o tamanho da fonte do elemento HTML porque quero usar a RAM como unidade de medida. Vamos definir o tamanho da fonte para 62,5 por cento. Nesse caso, uma RAM será igual a dez pixels. Tudo bem, vamos prosseguir e instituir alguns comentários para o contêiner E também para navbar. No começo, vou estilizar elementos suficientes. Vamos definir a largura. Eu vou fazer isso 100%. E também vou definir a altura, que será de 19 RAM. Então, vamos mudar a cor do plano de fundo. Vou colocá-lo em branco. Em seguida, vou usar o display flex e vou mudar a direção Vai ser uma coluna. Em seguida, use o centro de alinhamento de itens. Como você pode ver, os elementos são colocados no centro. Além disso, vou usar um pequeno efeito de sombra. Usando box-shadow, os valores serão 01, classificando cinco RAM como cor Vou usar o valor RGBA. Vai ser de cor preta com menor opacidade, 0,1. Então, podemos ver que temos aqui uma sombra de caixa. O próximo elemento que vou usar no Style não será uma blusa ruim. Em primeiro lugar, vamos configurar a tela como flexível. Em seguida, precisamos alinhar os itens no centro verticalmente. E também vamos definir o preenchimento. Será até RAM e zero. Tudo bem? Depois disso, vamos selecionar elementos na parte superior que não é ruim. Vamos definir margem. Será zero e fórum nos lados esquerdo e direito. Em seguida, vou selecionar o logotipo. Quero dizer o ícone Font Awesome e o logotipo. Vamos mudar o tamanho da fonte, torná-la com seis RAM. Então eu vou mudar a cor. Vamos usar aqui chamado f887 para ser Quando também cria algum espaço no lado direito usando margin-right com o Então, aqui temos nosso logotipo, que parece muito melhor. Em seguida, vou cuidar dos elementos de extensão, que são colocados ao lado do ícone. Então, vamos mudar a família de fontes. Você vê seu telefone chamado Quênia. Cursivo. Tamanho da fonte. Vamos torná-lo maior. Use para RAM. Além disso, crie algum espaço entre as letras e mude a cor. Vou usar sua cor 07372. Então, aqui temos nosso elemento de extensão, que é Todd e parece bonito Vamos selecionar aqui o logotipo, quero dizer os elementos do invólucro Vou configurar a tela para flexionar e também alinhar os itens no centro para centralizar o ícone e os elementos da coluna vertebral Em seguida, vamos cuidar da barra de pesquisa. Em primeiro lugar, vou selecionar os elementos de entrada e alterar sua largura. Serão 50 para RAM. Em seguida, precisamos criar algum espaço dentro do conjunto de entrada preenchendo até um ponto para aumentar a rampa na parte superior do que um ponto para a RAM no lado direito, um ponto para a RAM na parte inferior e 3,7 RAM no lado esquerdo Em seguida, vou mudar a cor do plano de fundo. Vai ser um efeito três. Então aqui temos a barra de pesquisa, quero dizer o elemento de entrada. Vamos nos livrar da fronteira. Eu não vou fazer com que seja nenhum. E também vou definir o raio de borda de 2,5 rodado. Em seguida, vamos cuidar da fonte. Vamos mudar o tamanho da fonte, torná-la 1,6 RAM. Além disso, vou definir a espessura da fonte para 300 e mudar a cor. Use aqui. Cor azul. Portanto, é possível ver que o elemento de entrada parece melhor. Vamos prosseguir e selecionar o espaço reservado. Altere o tamanho da fonte, torne-o 1,7 R& Também altere a espessura da fonte. Use aqui 300. E eu vou definir a cor para azul. Ok. Agora é hora de começar a estilizar o ícone Font Awesome. Estou no ícone de pesquisa. Vamos definir essa posição, torná-la absoluta. E também precisamos tornar relativa a posição dos elementos principais. Porque precisamos posicionar os elementos de acordo com os pais. Em seguida, defina que a posição superior será de 50 por cento. Para a posição esquerda, haverá um ponto para a RAM. E também vou centralizar os elementos perfeitamente na horizontal Para isso, precisamos do Transform Translate, Y -50 por cento Então, ícones posicionados. Em seguida, vou aumentar o tamanho da fonte. Será 1,5 RAM. Mude a cor. Você vê você de novo, cor azul. Então, a barra de pesquisa está pronta. Vamos prosseguir e selecionar o usuário. Altere o tamanho da fonte, transforme-a na RAM e também defina a cor. Como você pode ver, precisamos de algum espaço entre os itens. Então, vou selecionar o usuário e a extensão do usuário e definir a margem direita. Faça com que seja um ponto de execução Tudo bem? Como você pode ver, a parte superior da barra de navegação está pronta. Vamos continuar e cuidar da lista de navegação. Vamos definir display, flex. Defina a altura. Será 8,5 RAM. Em seguida, precisamos de algum espaço na parte superior usando o preenchimento da parte superior da RAM Depois disso, vou selecionar desenvolvimentos na lista de navegação. Portanto, a largura será de 16 RAM. Além disso, vou usar novamente o display flex e, em seguida, mudar a direção, torná-lo uma coluna Vamos alinhar os itens no centro e também usar o centro conteúdo justificado para centralizar de conteúdo justificado para centralizar perfeitamente os elementos. Certo? Depois disso, vou criar bordas no lado esquerdo dos itens que definem a borda esquerda de 2.1 RAM sólida. E como cor, vou usar o anúncio E9. Então, vamos continuar. Temos aqui fronteiras, mas precisamos removê-las no começo. Então, vamos selecionar romancista Div com o enésimo filho. Selecionamos aqui o primeiro elemento, definimos a borda como nenhuma. Então, é possível ver que o problema está resolvido. E nossos itens de navegação parecem muito melhores. Vamos mudar o tipo do cursor e fazer com que ele aponte. Ok, então vamos seguir em frente e selecionar ícones, aumentar o tamanho da fonte e chegar à RAM. Também mude a cor. Use aqui, a cor azul. Em seguida, vou criar algum espaço na parte inferior usando a margem inferior com o valor de uma RAM. Então, dá para ver que os ícones estão muito bonitos. Em seguida, vou selecionar elementos de extensão. Quero dizer, o tamanho da fonte do item será 1,6 RAM. E então também precisamos mudar a cor. Você também pode colorir, vou criar algum espaço entre as letras. Então, dá para ver que os itens estão muito bonitos. 5. Projeto 1: visualização: Olá e bem-vindo ao nosso segundo projeto, que será um site de portfólio pessoal. Hoje em dia, esse tipo de site é muito popular e muito procurado, então acho que será interessante para você O projeto é sobre um desenvolvedor web com todas as suas habilidades, trabalhos, projetos, contatos e assim por diante. Vamos seguir em frente e descrever o projeto. Portanto, temos aqui um cabeçalho do site no qual temos um logotipo, banner e um ícone do menu de hambúrguer Se eu clicar nele, a Navegação aparecerá com alguns efeitos interessantes. O banner consiste em alguns elementos diferentes, incluindo a imagem de um desenvolvedor Em seguida, temos uma seção de habilidades que mostra as tecnologias e o nível de conhecimento de um desenvolvedor web. A seção de habilidades é seguida pela seção Projeto, onde podemos encontrar diferentes trabalhos de um desenvolvedor. Depois disso, temos aqui uma seção de contato com alguns detalhes de contato e campos de entrada. E, finalmente, você pode encontrar aqui um rodapé simples e agradável. O projeto é responsivo a diferentes tamanhos de tela. Se eu inspecionar a página, mude para o modo responsivo e verifique o projeto com quatro tamanhos de tela diferentes Você descobrirá que o projeto é responsivo e fica bem em todos os tamanhos de tela diferentes Novamente, todos os projetos são criados para um tamanho de tela extra grande. Estou em sites discretos com 1920 pixels de largura e 1080 pixels de altura Portanto, se você estiver usando um tamanho de tela relativamente menor , durante as aulas, você deve alternar para o modo responsivo e especificar a largura e a altura dessa forma Caso contrário, o projeto não ficará bem em telas menores até que seja responsivo Então, por favor, leve isso em consideração. Ok, então isso é sobre o nosso segundo projeto. Agora podemos seguir em frente e começar a construí-lo 6. Projeto 1: crie cabeçalhos do site: Tudo bem, agora é hora de criar nossa próxima seção, que será o Landing Vamos instituir novos comentários para empréstimos. Então eu vou abrir aqui elemento da Seção com uma classe Landing. O primeiro elemento que vamos inserir aqui será o plano de fundo. Em seguida, vou inserir aqui o Banner, que consistirá em alguns elementos diferentes A primeira será uma imagem. Vamos especificar aqui o caminho da imagem. Precisamos selecionar a imagem do banner. Além disso, vamos instituir a aula Banner IMG. Em seguida, vou abrir a tag H1 com o título Banner da classe O texto será mobiliário de luxo. Então teremos dois botões diferentes. Vamos atribuir às classes de botões Banner, BTN e também Banner be 101 Vamos inserir aqui. Vá às compras. Vou duplicar esse elemento e alterar o nome da classe e também alterar o valor Isso vai ser explorado. Tudo bem, então isso é sobre a marcação HTML da segunda seção Vamos começar a estilizar os elementos menos sensíveis aos seus comentários. E, em seguida, selecione o elemento Seção com a classe Landing, quero definir uma largura. Vai ser 100%. Quanto à altura, vou fazer com que seja 90 de altura da janela de visualização Em seguida, vou selecionar o plano de fundo. Vamos definir sua posição como absoluta. E também precisamos definir a posição do elemento pai. Vamos tornar isso relativo. Então eu vou definir a posição de topo. Vai ter memória RAM completa. Quanto à posição de defasagem, vou chegar a 50% E então vamos centralizar os elementos horizontalmente quando você transforma translate X Além disso, vou definir a largura. Vai ser 90%. Quanto à altura, vou fazer 65 corridas. Em seguida, mude a cor de fundo, torne-a 3954 E também faça os cantos arredondados usando o raio da borda. Três rodadas. Então, aqui temos o fundo azul. Em seguida, vou selecionar Banner. Vamos definir a largura, torná-la 60%. Em seguida, defina que a altura será 65. Rima. Defina também a posição como absoluta. Em seguida, precisamos selecionar o elemento da imagem. Vamos definir a largura 100%. Além disso, precisamos definir a altura como 100%. Então aqui temos a imagem. Certo? Em seguida, vou mudar a posição do banner, digamos, a posição superior para oito RAM Em seguida, defina a posição esquerda com o presente. E também para centralizar, vou usar o valor X do Transform Translate -50 por cento. Depois disso, vou definir a imagem de fundo. Precisamos de gradiente linear com valor RGBA. Vamos selecionar a cor preta com opacidade 0,5. E, novamente, vou usar a mesma cor com a mesma opacidade Depois disso, vamos definir o raio da borda com Precisamos de pés de objeto para a imagem com a capa de valor. E também precisamos do mesmo para o raio da imagem. Finalmente, vamos usar a opacidade, indo oito. Tudo bem, então a imagem está bonita. Vamos prosseguir e cuidar do cabeçalho do banner. Vamos definir sua posição como absoluta. Em seguida, precisamos definir a posição superior, fazer com que seja dez RAM a posição correta será de cinco corridas. Como você pode ver, o cabeçalho está posicionado no lado direito. Vamos definir o tamanho da fonte , será átrio. E também mude a cor do elemento, torne-o branco. Tudo bem, em seguida, vou definir a largura para 40 por cento. E também vamos diminuir o espaço entre as palavras. Defina a altura da linha como uma. Certo. Em seguida, vou alinhar o texto ao lado direito. Use também alguns efeitos de sombra de textos com os valores 03 RAM, três RAM. E como cor, vamos usar o valor RGBA. Agora, como você pode ver, o título parece muito bom. Em seguida, vou cuidar dos botões. Vamos definir a posição como absoluta. Em seguida, refine a posição superior, criando 28 RAM. A largura será de 18 RAM. Além disso, a altura estará na posição máxima. Então precisamos de uma fronteira. Não vai ser nenhum. Alterar o raio da borda, tornar os botões arredondados, desvalorizaria três RAM Então você pode ver aqui o botão. Eu vou mudar o tamanho da fonte. Vamos fazer com 1,6 RAM. O cursor também pode torná-lo ponteiro? Tudo bem. Vamos prosseguir e selecionar o botão da floresta. A posição vai ficar correta. 25 RAM. A cor de fundo será laranja. A cor do texto será branca. Então, o primeiro botão parece bom. Vamos seguir em frente e cuidar do segundo. Use o mesmo código, altere o nome da classe. A posição será de cinco primos. No lado direito, também altere a cor de fundo. Vai ser branco. Quanto à cor do texto, será laranja. Então, tudo parece muito bom. Vou criar um efeito de foco. Para o primeiro botão. Ao passar o mouse. Eu vou mudar a cor de fundo. Vamos torná-lo branco. Também mude a cor. Faça com que seja laranja. Asfalto. O segundo botão. Precisamos do oposto. Quero dizer, temos que mudar a cor de fundo, torná-la laranja. Quanto à cor do texto, será branca. E por último, vamos usar valores de transição, todos 0,3 s. Ok, então é isso O Landing está estilizado e agora temos que seguir em frente e cuidar da próxima seção 7. Projeto 1: crie uma seção: Ok, agora é hora de seguir em frente e começar a criar nossa próxima seção, que será a seção Produtos. Vou começar a criar marcação HTML. Então, vamos continuar e inserir seus comentários sobre Produtos. Em seguida, vou abrir o elemento Seção com a classe Produtos. O primeiro elemento que vou inserir aqui, será dar à classe Produtos o topo. Teremos aqui o elemento de cabeçalho h3 com uma pesquisa de valor para Então teremos H2 dirigindo 15.000 e H1 liderando 15.000 e H1 Com um texto Produtos. Depois disso, vou criar outro desenvolvimento que serão ícones de produtos. Vamos abrir a etiqueta DIV com a sala de aula. Vou inproteger uma imagem, pois o ícone será PNG do quarto E também teremos aqui um elemento de extensão para o quarto de texto. Vamos duplicar esses elementos algumas vezes. Em seguida, altere os nomes das classes. Vai ser armazenado em buffer. Altere também o nome da imagem e altere o valor do texto do elemento span para o mesmo para o próximo elemento, que será jantar. Vamos mudar o nome da imagem e também a extensão. Então, até agora, teremos que mudar essa panela. O próximo item será uma mesa. E o último item será um guarda-roupa. Então, vamos mudar o nome da imagem e também esse elemento de extensão. Tudo bem, então isso é tudo sobre a marcação HTML. Temos aqui todos os elementos necessários. Vamos começar a escrever um pouco de CSS. Vou instituir os comentários, produtos e produtos. Em seguida, selecione os elementos da seção, defina sua largura, que será 100%. Isso provavelmente é altura. Vou fazer com que tenha 85 de altura de janela de visualização. Em seguida, precisamos do display flex. E temos que mudar a direção. Vamos fazer uma coluna. E também alinhe os itens no centro Assim, é possível ver que os elementos são colocados no centro. Vamos prosseguir e selecionar Produtos. Largura máxima definida , será de 60%. Em seguida, vou criar algum espaço na parte inferior usando oito RAM na margem inferior. Em seguida, vou selecionar Produtos. H3, elemento de título, tamanho de fonte aumentado, chegue ao Ram. Mude também a cor que vou usar aqui, cor azul. Vamos duplicar esse código. Altere H3N2, H12. Vou mudar o tamanho da fonte, torná-la com sete RAM e também mudar a cor. Use aqui, cor laranja. Certo? Vamos prosseguir e estilizar o terceiro título, H1 Mude o tamanho da fonte, faça com que seja nove RAM. Também mude a cor. Vou usar aqui, cor azul. Além disso, vou diminuir o espaço na parte superior usando a margem superior com um valor negativo menos phi prime Ok, então vamos ver que os títulos estão bem bonitos. Vamos seguir em frente e selecionar produtos, ícones. Vou definir a largura. Vamos fazer com que seja 60%. Em seguida, vou configurar a tela para flexível. Crie algum espaço entre os itens usando o justify content space uniformemente Então, como você pode ver, temos aqui um espaço uniforme entre os itens. Em seguida, vou selecionar Fornecer elementos dos ícones dos produtos. Vamos configurar a tela como flexível. Também mude a direção, torne-a coluna. Em seguida, vou alinhar os itens no centro. Em seguida, vamos definir a largura, tornando-a 18 RAM. Defina também a altura de 20 RAM. E crie algum espaço no lado direito usando margin-right para executar Ok. Em seguida, vamos mudar a cor do plano de fundo. Vou usar sua cor F7, F7, C7. Em seguida, crie espaço dentro do item usando o preenchimento. Em seguida, vou criar um raio de borda 2AM e também mudar o cursor Certo. Em seguida, vou me livrar do espaço no lado direito do último item. Então, precisamos selecionar o último filho. Então, precisamos que a margem direita seja zero. Tudo bem. Vamos continuar e selecionar Imagem. Crie algum espaço na parte inferior usando a margem inferior de três braços. Em seguida, vou selecionar o elemento span. Vamos transformar a imagem em uma extensão. Altere o tamanho da fonte, faça com 2,5 RAM. Também mude a cor. Use sua cor. Azul. Em seguida, vou criar um efeito de foco Vou mudar a cor de fundo. Vamos torná-lo branco. E também use box-shadow com os valores 01 RAM, três RAM E como cor, vou usar a cor preta RGBA com a opacidade 0.1 E também precisamos de uma transição aqui para um efeito suave. Então, dá para ver que temos aqui um bom efeito exagerado. A última coisa que vou fazer é criar um preenchimento dentro da seção na parte superior com o Make it five prime Certo? Então, tudo parece bom e a seção de produtos está pronta. Vamos passar para o próximo. 8. Projeto 1: seção de preços para criar e estilizar: Tudo bem, então é hora de seguir em frente. Responda para criar nossa próxima seção, que será uma seção de preços. Vamos continuar e inserir novos comentários, Preços e Preços. Em seguida, vou abrir uma seção da classe de elementos Pricing. Vamos inserir aqui a parte superior de preços da tag DIV, que incluirá alguns elementos diferentes Então eu vou passar aqui uma imagem. Vamos prosseguir e especificar aqui o caminho da imagem. Serão móveis para PNG. Em seguida, vou passar sua tag DIV Pricing para o conteúdo principal. Vamos abrir a tag de cabeçalho H1 com os textos, prepare-se para o Natal E também vou colocar aqui um padrão, tendências reais. Certo? Então, vamos ver isso sobre o lado superior. Agora, precisamos criar alguns cartões. Vamos criar cartões de preços com tag DIV e, em seguida, instituir o próprio carro. Então, teremos aqui os ícones do cartão de preços. Quero dizer, os ícones do Font Awesome terão três deles. O primeiro será F, um link sólido da FAA Então, o próximo será muito, normal. Muito gostoso. Quanto ao terceiro ícone, vou usar aqui F um sólido, uma lupa Mais. Tudo bem, então aqui temos nossos ícones Font Awesome Em seguida, vou instituir um invólucro para a imagem. Quanto à imagem, vamos selecionar o caminho. Vai ser uma poltrona Pricing. Então eu vou abrir a tag de cabeçalho h3. Vai ser o nome poltrona. Bem, então teremos aqui estrelas. Vamos usar novamente o Font Awesome. Os ícones terão cinco estrelas no total. Portanto, precisamos de um sólido de uma estrela. Vamos duplicá-lo quatro vezes. E, finalmente, vou passar aqui H4, elemento principal do preço Tudo bem, então vamos falar sobre o cartão. Terá seis deles. Então, vamos continuar e duplicar isso cinco vezes. E então temos que fazer algumas mudanças. Então, a segunda carta , vai ser sobre sofá. Precisamos mudar o caminho, também o título. E teremos aqui uma estrela diferente. Vai ser muito irregular. E também o preço será de $129. A próxima carta será sobre iluminação. Vamos mudar o preço, ganhe $59. Então teremos um cartão sobre até agora. Vamos mudar o título. Também altere o preço. Em seguida, passe para a próxima carta. Vai ser uma mesa cheia. Na verdade, vou trocar as estrelas pelo Sofar. Nós precisamos aqui. Fa, irregular Em seguida, altere o preço da mesa. Vai custar $49 E agora temos que mudar os detalhes do último cartão, vai ser guarda-roupa. Vamos mudar o título e também mudar a estrela. Precisamos de um carro irregular. Por fim, vou mudar o preço, certo? Então, aqui temos nossos seis cartões com imagens e detalhes. E o último elemento nesta seção será um padrão. Vá às compras. Tudo bem, então isso é tudo sobre a marcação HTML. Agora, é hora de seguir em frente e começar a escrever um pouco de CSS. Vamos inserir novos comentários para Pricing. Em seguida, vou selecionar os elementos da seção. Vamos definir a largura. Vai ser 100%. Também precisamos aqui de 100% de altura. Em seguida, vou configurar a tela para flexionar e, em seguida, vamos mudar a direção, torná-la uma coluna Em seguida, vou alinhar os itens no centro. Assim, é possível ver que os elementos são colocados no centro da seção. Em seguida, vou criar algum espaço na parte inferior usando margem, 20 ram inferiores. Embora aqui tenhamos algum espaço que fica ao redor do elemento da seção. Vamos seguir em frente e selecionar a opção Preços no topo. Vou configurar a tela para flexionar. E então vamos alinhar os itens. E o centro. Além disso, vou criar algum espaço na parte inferior. Então você tem esse ritmo. Em seguida, vou selecionar as principais imagens de preços. A imagem. Vamos criar algum espaço no lado direito. Vamos fazer com que seja 20 RAM. Em seguida, vou selecionar os principais elementos do título H1 de preços. Vamos aumentar o tamanho da fonte, torná-la com sete RAM. Também mude a cor. Vou usar sua cor azul. Então, vou definir a largura. Vamos fazer com que seja 50 RAM e também alterar a altura da linha, torná-la uma. Em seguida, vou criar algum espaço na parte inferior usando três RAM na margem inferior Dá para ver que o título está muito bonito. Vamos continuar e selecionar o botão. Vamos mudar a largura, torná-la 18 RAM. E, portanto, precisamos mudar a altura. Vamos fazer isso para RAM. Em seguida, vou definir a cor de fundo. Vai ser branco. Portanto, precisamos aqui de uma borda com valores de 0,1 g sólido e a cor será laranja. Então, aqui temos o botão. Vamos torná-lo um pouco arredondado usando raio de borda com o valor de Então, vou mudar o tamanho da fonte. Vai ser 1.6 R&. Em seguida, vou mudar a cor. Use aqui a cor laranja e também mude o cursor, faça com que ele aponte. Então, como você pode ver, o botão está bonito. Agora é hora de seguir em frente e selecionar o cartão de preços. Vamos mudar a largura, fazer com que seja 30 RAM. Em seguida, mude a altura. Vai ter 45 RAM. Além disso, vou mudar a cor de fundo. Vamos fazer com que seja F7, F7, F7. Então, aqui temos as cartas. Vamos criar algum espaço usando margem, uma RAM. Além disso, vou arredondar os cantos usando o raio da borda para aumentar a rampa Então, aqui temos as mudanças. Em seguida, use o display flex e também mude a direção, torne-o coluna E também vou alinhar os itens no centro. Assim, é possível ver que os itens são colocados no centro. Quero dizer, na vertical central. Além disso, vamos usar justificar o espaço entre o conteúdo para criar algum espaço entre os itens flexíveis Em seguida, vou usar o preenchimento para criar algum espaço dentro do cartão Vamos usar aqui cinco primos e zero e também mudar o tipo de cursor, torná-lo um ponteiro. Tudo bem, então os tribunais estão bonitos. Em seguida, precisamos selecionar um invólucro de desenvolvimento de cartões de preços para alinhar os cartões primeiro, vamos usar a largura, torná-la 60% Em seguida, defina a tela para flexionar. É possível ver que os cartões são colocados lado a lado Agora use o conteúdo justificado com E depois disso, vou embrulhar os elementos usando envoltório flexível, embrulho Ok, então, como você pode ver, as cartas estão bem alinhadas Vamos usar a margem inferior com o valor cinco RAM para criar algum espaço na parte inferior entre os carrinhos e o botão Em seguida, vou selecionar os ícones do cartão de preços. No começo, vou escondê-los usando o display none. Em seguida, vamos selecionar Image wrapper. Eu vou definir a largura. Vamos fazer com que seja 20 RAM. Bem, então vamos definir a altura. Vai ter 18 RAM. Além disso, vou criar algum espaço na parte inferior. Vamos fazer com que seja cinco primos. Em seguida, defina a tela para flexionar. Além disso, coloque o contrato e a central usando o justify-content center Certo? Depois disso, vou selecionar o título três. Vamos mudar o tamanho da fonte. Vai ser 1,61. Além disso, vou mudar a espessura da fonte. Vamos configurá-lo para 300 e criar algum espaço entre as letras. Faça com que seja 0,1 R&. Em seguida, vou mudar a cor. Use sua cor azul. Então, vamos ver os elementos do título. Esteja bonita. Em seguida, vou selecionar as estrelas. Quero dizer, o ícone. Vamos mudar o tamanho da fonte, torná-la 1,6 RAM. Também mude a cor. Você vê uma laranja. Como você pode ver, as estrelas estão lindas. E agora é hora de personalizar o H, quatro elementos de cabeçalho, que é o preço, alteram o tamanho da fonte. Também mude a cor. Então, como você pode ver, os cabeçalhos são bonitos. Tudo bem, agora, precisamos dos mesmos estilos para o botão na parte inferior Como você pode ver, esses blocos são aplicados e o botão está bonito. A última coisa a fazer nesta seção é personalizar os ícones do cartão. Vamos selecionar o invólucro e definir a posição. Vamos torná-lo absoluto. Precisamos da posição relativa do elemento pai para do elemento pai alinhar os elementos de acordo com o elemento pai Vamos configurar os dois primeiros como RAM e a posição correta como RAM também. Em seguida, precisamos da flexibilidade da tela e temos que mudar a direção, torná-la uma coluna Como você pode ver, os ícones do Font Awesome estão alinhados no canto superior direito do cartão Agora precisamos personalizar e estilizar o próprio ícone. Quero dizer, o ícone Font Awesome. Vamos definir a largura para três RAM e também definir a altura, Make it 31 também. Precisamos que a cor de fundo seja branca. Em seguida, vou arredondar os ícones usando um raio de borda de 50 por cento. Também crie algum espaço na parte inferior usando a margem e a parte inferior da RAM. E então vou colocar os ícones no centro dos círculos usando display flex, justify-content E também precisamos alinhar o centro dos itens. Logo depois disso, vamos criar alguns efeitos de sombra usando box-shadow, usar seus valores de 0,5 RAM, uma RAM e a cor preta RGBA com uma E agora, vamos mudar o tamanho da fonte, colocá-la em um ponto na RAM e também mudar a cor. Use a cor azul. Tudo bem, então os ícones parecem bons, e agora temos que escondê-los porque eles devem aparecer ao passar o mouse Vamos esconder os ícones e também movê-los levemente usando o Transform. Traduza o valor Y em rampa. Então, como você pode ver, os ícones estão ocultos. Agora temos que criar um efeito excessivo. Vamos selecionar o cartão de preços com o mouse. E também temos que selecionar os ícones. Ao passar o mouse. Temos que exibir novamente os ícones e também definir a propriedade transform translate Y para a posição padrão. Quero dizer, precisamos aqui de zero. E também use a transição para um efeito suave. Então, como você pode ver, temos aqui um efeito de foco muito bom e simples E, na verdade, com a seção de preços, terminamos. Então, vamos seguir em frente e passar para a próxima seção. 9. Projeto 1: crie uma seção de blog: Ok, então agora é hora de seguir em frente. Então, para criar nossa próxima seção, que será uma Seção de Blog, vamos inserir seus novos comentários do Blog e do Blog. Em seguida, abra a tag da seção com o nome da classe, Blog. Vou inserir aqui tag DIV com o conteúdo do blog da turma, na qual vou inserir aqui outra topo do bloco da classe Precisamos aqui novamente da etiqueta DIV com uma revista de classe. E também vou passar a imagem da urina. Vamos selecionar a imagem, que será Magazine dot PNG. Certo? Em seguida, precisamos da tag DIV com tendências de classe e , em seguida, da tag de título H1 com o valor tendências de inverno. 2023. Veio em seguida. Vou usar o botão de download. E então vamos usar a tag DIV com a classe. Blog. Os artigos terão três artigos diferentes nos quais eu vou passar um ano com o número de um. Então, precisamos de outro elemento de extensão com algum texto fictício. Vamos duplicar o artigo duas vezes, porque, como eu disse, precisamos de três artigos no total Então, vamos mudar os números. Tudo bem, então isso é tudo sobre a marcação HTML. Vamos começar a personalizar essa seção. Vou apresentar novos comentários. Em seguida, selecione Largura definida pelo elemento de seção. Vai ser 100%. Para a altura. Vou configurá-lo para a altura da janela de visualização Além disso, vou mudar a cor de fundo. Vai ser de cor azul. Então eu vou usar o flexbox. Vamos colocar os elementos no centro usando justify-content center e alinhar os itens ao centro e alinhar Ok, então, em seguida, vou selecionar bloquear conteúdo. Vamos definir uma onda. Vai ser 50 por cento. Então, a altura será de 50 rampa. Eu vou mudar a cor de fundo. Vou usar uma cor laranja. Em seguida, vamos arredondar os cantos usando o raio da borda. Então, aqui temos o conteúdo. Vamos continuar e selecionar Blog top. Use o flexbox. Vou sugerir que o conteúdo via seja espaçado uniformemente. E também vou alinhar os itens no centro. Em seguida, vamos selecionar a imagem superior do bloco. Estou na imagem da revista. Vamos definir algum espaço na parte superior usando as cinco RAM da margem superior. Então a imagem está bonita. Em seguida, vou usar tendências, elementos de cabeçalho H1. Isso mudou o tamanho da fonte. Serão seis RAM. Além disso, vou mudar a largura. Vamos configurá-lo como cinco primos e também verificar o espaço entre as palavras usando a altura da linha Um. Em seguida, mude a cor, torne-a branca, depois mude de cor, torne-a branca. E também use algum espaço na parte inferior. Certo. Depois disso, vamos em frente e selecione o botão. Vamos definir a largura. Vai ter 18 RAM. Então eu vou definir a altura. Vai ter memória RAM completa. Também altere a cor de fundo. Vamos usar a cor azul. Elimina a borda padrão. Então, aqui temos o botão. Vou fazer com que seja arredondado usando o raio da borda. Três RAM. Além disso , a alteração do tamanho da fonte será de 1,6 RAM. Em seguida, mude a cor, torne-a branca e também torne o ponteiro do cursor. Certo. Depois disso, vou começar a trabalhar em artigos. Vamos usar o Flexbox. Precisamos de um centro de conteúdo justificado. E também precisamos de algum espaço na parte superior usando a margem superior da RAM. Então, aqui temos os artigos. Vamos selecionar o artigo em si. Largura definida, será 23 RAM. Além disso, precisamos definir a altura, que será de dez RAM. Em seguida, crie algum espaço usando a margem. Depois disso, vou usar o flexbox. Vamos alinhar os itens no centro e também usar o ponteiro do cursor Ok, em seguida, vou selecionar os elementos de extensão no artigo. Vamos aumentar o tamanho da fonte, transformá-la em RAM e também mudar a cor. Vou usar a cor branca. Em seguida, vou colocar o texto em maiúsculas. E também altere a altura da linha. Faça com que seja um. Então você terá o texto dos artigos. Vamos duplicar esse código e agora selecionar o primeiro elemento de extensão usando o nésimo seletor de filhos Vou aumentar o tamanho da fonte para cinco RAM. Em seguida, livre-se da cor, do imposto, transforme a propriedade. E também a altura da linha. Vou usar o peso da fonte com o parafuso de valor. E também vamos criar algum espaço no lado direito usando uma rampa na margem direita Então, como você pode ver, a seção do blog está concluída e está bonita. Vamos passar para o próximo. 10. Projeto 1: crie uma seção de contatos: Tudo bem, então vamos começar a criar nossa próxima seção, que será uma seção de contato Vou inserir seus novos comentários, contato e de conflito. Em seguida, abra os elementos da seção com um nome de classe, Contato. Vou inserir aqui a tag DIV com um conteúdo de conflito de classes Let's Institute e outros DIV, que vão se contentar Esquerda. Vou inserir seus elementos de cabeçalho H2 com o texto Assine nosso boletim informativo e ganhe 30%, que serão colocados no elemento span. Em seguida, vou colocar a tag U DIV com o conteúdo da aula, certo? Na qual vou inserir tag de entrada com o tipo e-mail e com um atributo de espaço reservado, seu endereço de e-mail Além disso, vou inserir seu botão com o texto de inscrição. Tudo bem, então isso é tudo sobre a marcação HTML. Vamos começar a escrever CSS nos comentários, contatos e contatos que vou selecionar na Seção de Contato. Vamos definir a largura. Vai ser 100%. Além disso, vou definir a altura. Será 40, altura da janela de visualização. Então eu vou usar o display flex. E vou colocar o conteúdo no centro usando justify-content center e alinhar os itens ao centro Como você pode ver, o conteúdo é colocado no centro. Vamos selecionar o conteúdo e definir a largura. Vai ser 50%. Além disso, vou definir que a altura será de 15 RAM. Então vou usar novamente o Flexbox. Então, vamos considerar que os elementos são colocados lado a lado horizontalmente Em seguida, vamos selecionar conteúdo à esquerda e definir a largura. Vai ser 40 por cento. Então, vou definir que a altura será de cem por cento. Estou em 100% dos pais. Então, vamos mudar a cor do plano de fundo. Vou usar a cor laranja. Então, aqui temos o lado esquerdo. Vamos arredondar os cantos usando o raio da borda para a RAM, 00 para a RAM Além disso, vou usar livros de linho. E eu quero colocar os itens no centro. Além disso, vamos criar algum espaço no lado esquerdo usando o preenchimento Depois disso, vou selecionar o conteúdo à esquerda, elementos do título. Vamos definir uma onda. Vai ser 2%. Além disso, vou mudar o tamanho da fonte. Vamos configurá-lo para 2,2 RAM. Então eu vou mudar a cor, vai ser branco. Além disso, precisamos diminuir a altura da linha. Vai ser um ponto. Para. Agora, vou selecionar esses elementos de extensão, que incluem 30% de, vamos alterar o tamanho da fonte, torná-la 2,5 RAM e também alterar a cor. Vou usar sua cor azul. Certo? Então, o lado esquerdo parece muito bom. Vamos seguir em frente e selecionar o lado direito. Vamos definir a largura. Vai ser 60%. Além disso, vou definir a altura como 100 por cento. Em seguida, altere a cor de fundo, use a cor azul. Em seguida, vou arredondar os cantos usando o raio da borda Nesse caso, precisamos de zero para RAM, para RAM. E zero. Também use o flexbox. Para alinhar os elementos no centro, precisamos alinhar o centro dos itens e também o centro do conteúdo justificado Tudo bem, vamos prosseguir e selecionar os elementos de entrada. Em primeiro lugar, vou definir que a largura será de 35 RAM. Em seguida, defina a altura. Vamos fazer com que seja totalmente RAM. Mude a cor do plano de fundo. Vou usar aqui uma cor 17469. Digamos que seja uma cor azul mais clara. Em seguida, vou criar algum espaço dentro da entrada usando o preenchimento Em seguida, elimina a borda padrão e Create for the radius 0.5 RAM também muda a cor Vou deixar a cor branca e criar algum espaço no lado direito usando margem, certo? Want Ram se tornou. Então, como você pode ver, o elemento de entrada parece melhor. Vamos continuar e selecionar a entrada novamente. Aqui, espaço reservado. Vamos mudar a cor. Torne-o branco e também altere o tamanho da fonte. Faça disso um ponto. Para RAM. Tudo bem. Depois disso, vou selecionar a entrada com foco. Em foco, vou mudar a fronteira. Vamos fazer com que seja 0,1 quarto sólido. E como cor vou usar laranja. Então, quando focarmos a entrada, a borda mudará. Certo? Agora é hora de personalizar o botão que é colocado ao lado do elemento de entrada. Vamos definir uma largura, fazer com que seja dez RAM. Então eu vou definir a altura. Vai ter memória RAM completa. Também altere a cor do plano de fundo. Vamos usar aqui a cor laranja. Então. Eu vou me livrar da fronteira. Vamos fazer uma freira e usar o raio para arredondar os cantos do botão Então eu vou mudar o tamanho da fonte para 1,6 RAM. Mude a cor do texto. Vamos deixá-lo branco e também mudar o tipo de cursor, torná-lo ponteiro. Tudo bem, então isso é sobre a Seção de Contato. Parece muito bom. Vamos passar para a próxima seção. 11. Projeto 1: crie e estilize o rodapé do site: Tudo bem, agora é hora de criar nossa última seção do projeto, que será um rodapé Na verdade, o rodapé será simples. Vamos inserir seus comentários no rodapé. Em seguida, vou abrir a tag de rodapé HTML5. Nós seremos a classe Footer. Em seguida, vamos inserir a tag U DIV com a classe copyright, na qual vou colocar o parágrafo, que incluirá a entidade HTML5 Quero dizer o sinal de direitos autorais, seguido pelo texto. Todos os direitos reservados. 2023. E então crie por código e crie. Além disso, teremos aqui um logotipo. Quero dizer, o ícone Font Awesome do sofá, seguido pelo título H1, elemento Ok, então é isso. Todos os elementos são criados. Vamos continuar e personalizar esta seção. Em vez disso, comentários para o rodapé. Em seguida, vou selecionar o elemento de rodapé, definir sua largura Vai ser 50 por cento. Então, a altura será de cinco RAM. Também precisamos aqui da margem ou de você para centralizar o elemento. E também use display, flex. Justifique o espaço entre o conteúdo para criar espaço entre os itens E também precisamos aqui alinhar os itens no centro para centralizar os elementos verticalmente Em seguida, vou usar a borda superior com os valores de 0,1 RAM sólidos. E como a cor. Vamos usar o CCC. Tudo bem, isso é sobre o rodapé Em seguida, vou personalizar o desenvolvimento de direitos autorais. Vamos definir o tamanho da fonte para 1,6 RAM. Mude também a cor, cor azul. Em seguida, vou cuidar do lado direito do rodapé Vamos usar o display flex para colocar os itens lado a lado. Também precisamos aqui alinhar os itens, ao centro. Os elementos estão bem alinhados. Em seguida, vamos selecionar o ícone Font Awesome. Aumente o tamanho da fonte, transforme-a na RAM. E também mude a cor que vou usar aqui, laranja. E então precisamos de algum espaço no lado direito usando o marginal direito com o valor de 1,5 grama Tudo bem, então isso é tudo sobre o ícone. Em seguida, quero selecionar os elementos do título H1. Vamos mudar a família de fontes. Use aqui o curso do Quênia. Ele também define o tamanho da fonte a ser executado e usa algum espaçamento entre letras de 0,3 RAM E também mude a cor. Use sua cor azul. Tudo bem, então vamos ver o que é o rodapé. Parece bom e, na verdade, será o projeto que concluiremos a seguir, temos que torná-lo responsivo 12. Projeto 1: torne o projeto responsivo: Tudo bem, agora é hora de tornar nosso projeto responsivo a diferentes tamanhos de tela Vou inspecionar a página e mudar para o modo responsivo O projeto foi feito para um tamanho de tela extra grande. E agora temos que encontrar os pontos de interrupção nos quais precisamos fazer algumas mudanças. Na verdade, acho que depois de 1.600 pixels, o projeto precisa de algumas mudanças Então, vamos voltar ao editor. E primeiro vou inserir novos comentários para Responsive. Em seguida, vou criar uma consulta de mídia CSS. E quanto ao tamanho da tela, vou definir aqui 1.600 pixels Em primeiro lugar, vou cuidar do Banner. Então, vamos seguir em frente e selecionar um banner. Eu vou mudar sua largura. Vamos fazer com que seja 70%. Tudo bem, a seguir, vamos fazer uma pequena alteração nos produtos Vamos selecioná-lo e definir o preenchimento superior para dez RAM. E também vou mudar a altura, que será 100 de altura da janela de visualização Certo? Então, como você pode ver, a seção Produtos parece melhor. Em seguida, vou selecionar a parte superior dos produtos e alterar a largura para 70%. Então eu vou cuidar dos produtos, ícones. Vamos definir com dois 70% também. Então agora temos um resultado muito melhor. Tudo bem, a seguir, vou cuidar dos cartões de preços Então, vamos mudar a largura. Vai ser 70%. Em seguida, vou cuidar da seção do blog. Então, vamos seguir em frente e selecionar Conteúdo do blog. Largura definida. Serão 70% novamente. Agora temos um resultado melhor. Em seguida, vamos seguir em frente e selecionar Conteúdo de contato. Mais uma vez, altere a largura, torne-a 70%. A seção de contato parece boa. E, finalmente, temos que cuidar do rodapé. Vamos mudar isso com dois 70%. Tudo bem, então eu acho que está tudo bem. Vamos prosseguir e encontrar o próximo ponto de interrupção, que eu acho que será de 1.400 pixels Então, vamos prosseguir e criar uma nova consulta de mídia CSS. E como largura máxima, vamos definir aqui 1.400 pixels Vou mudar o tamanho da fonte dos elementos HTML. Vamos defini-lo para 54 por cento. Isso tornará todos os elementos um pouco menores e nos ajudará a tornar o projeto responsivo Em seguida, vou cuidar dos preços, principais elementos em que estou na imagem. Vamos mudar a largura, torná-la com 60 RAM e também alterar o espaço no lado direito, definindo a margem direita para dez Agora temos melhores resultados. E, na verdade , todas as outras seções. Esteja bonita. Então, vamos começar a trabalhar no próximo ponto de interrupção, que eu acho que será de 1.200 pixels Então, vamos prosseguir e criar uma nova consulta de mídia CSS. E como largura máxima, vamos especificar aqui 1.200 pixels Primeiro, vamos alterar o tamanho da fonte dos elementos HTML. Vou defini-lo para 51%. Como você pode ver, todos os elementos ficaram menores. Em seguida, vou selecionar Banner. Vamos mudar sua largura e torná-la em 80% para que o banner fique bem Em seguida, vou abordar aqui a seção de produtos. Vamos selecionar os melhores produtos. Mude sua largura, faça com que seja 80 por cento. E também altere a largura dos ícones dos produtos. Vamos defini-lo para 8% também. Tudo bem, a seguir, temos aqui um cartão de preços. Então, vou selecionar cartões de preços e definir sua largura para oito por cento. Então, temos três cartas em cada linha novamente. Tudo bem, vamos seguir em frente e cuidar da seção do blog. Vamos selecionar o conteúdo do bloco e alterar sua largura, tornando-o oito por cento. Em seguida, vou selecionar a imagem principal do blog , que é Revista. Vamos definir sua largura para 40 RAM. Então, vou selecionar artigos de blog e definir a margem superior como zero. Tudo bem, então a seção do blog parece boa. E agora temos que cuidar da seção de contato e também do rodapé Então, vamos definir a largura para 8% para o conteúdo do contato e também alterar a largura e o rodapé Tudo bem, então isso fica mais ou menos nesse ponto de interrupção. Vamos ir em frente e encontrar o próximo. Então eu acho que os próximos pontos de interrupção serão mil pixels Então, vamos criar uma nova consulta de mídia CSS com uma largura máxima de mil Em primeiro lugar, vou diminuir o tamanho da fonte do elemento HTML. Vamos fazer com que seja 46%. Próximo. Eu vou cuidar da navegação. Vamos selecionar nap ou top development e mudar a marcha. Faça 0,2 Rem nos lados esquerdo e direito. Então, no mínimo, parece melhor. Em seguida, vou selecionar Barra de pesquisa, elemento de entrada. E eu vou mudar a largura. Vamos fazer isso para correr. Então isso é tudo sobre a navegação. Vamos selecionar o título do banner e alterar o tamanho da fonte. Vamos fazer com seis RAM. Em seguida, vou cuidar da seção de Produtos. Vamos selecionar produtos e definir a altura. Vamos fazer com que tenha 90 de altura da janela de visualização. E também vou definir a parte superior do acolchoamento para cinco primos. Em seguida, vou selecionar Produtos. Toque em H2, elemento de título, e defina o tamanho da fonte para cinco REM Tudo bem, vamos duplicar esse código e o mesmo para o elemento H. Vou definir o tamanho da fonte para sete rampas. Certo? Vamos seguir em frente e passar para a próxima seção, que é a Seção de preços. Vou selecionar a imagem principal de preços. Vamos definir sua largura para 40 RAM. Em seguida, precisamos selecionar Preços, principal elemento do título H1 Vamos mudar o tamanho da fonte, torná-la cinco primos. E também vou definir com 23 a cinco R&. Tudo bem, então eu acho que a parte superior parece boa. Agora vamos cuidar dos cartões. Vamos definir sua largura para 90%. Então, novamente, temos três cartas em cada linha. E, na verdade, tudo parece bom. Vamos seguir em frente e encontrar o próximo ponto de interrupção, que eu acho que será de 800 pixels Então, vamos selecionar uma nova consulta de mídia CSS com uma largura máxima de 800 Vamos alterar novamente o tamanho da fonte dos elementos HTML. Vou configurá-lo para 139 por cento. Em seguida, vou selecionar um logotipo. Estou no ícone Font Awesome e mudo o tamanho da fonte, faça-o para RAM. Depois disso, vou selecionar Barra de pesquisa, elemento de entrada. E eu vou mudar a largura. Vamos fazer uma rampa de 30. Tudo bem, agora temos que cuidar da seção de Produtos Acho que temos um grande espaço nesta seção, então vamos selecionar produtos e encontrar a altura para atingir 75 de altura da janela de visualização E também mude o acolchoamento na parte superior. Vamos defini-lo como zero. Tudo bem. Em seguida, vou selecionar os ícones Desenvolvimento. Vamos definir sua altura para 18 RAM. Além disso, precisamos diminuir o tamanho dos ícones. Então, vamos selecionar imagens e definir a largura como cinco primos. Agora eles parecem muito melhores. Além disso, vou selecionar elementos de extensão e diminuir o tamanho da fonte. Vamos fazer com que seja uma rampa de 1,8. Tudo bem, seguir, vamos cuidar da seção de preços Selecione a imagem superior de preços e defina sua largura como três para ser executada. Além disso, precisamos cuidar da tabela de preços. Vamos definir sua largura para 27 RAM. Agora as imagens são u2, maiores. Então, vamos cuidar disso. Selecione a imagem do cartão de preços e defina a largura. Vamos fazer com que seja 18 RAM. Agora eles parecem muito melhores. Agora precisamos cuidar da seção de blocos. Então, vamos selecionar o conjunto de conteúdo do bloco com dois 90%. Além disso, vou selecionar a imagem superior do blog. E vou definir sua largura como três vezes a rampa. Certo? Em seguida, vamos seguir em frente e cuidar das tendências. Elementos de cabeçalho H1. Vou mudar o tamanho da fonte. Vamos configurá-lo para RAM cheia. E também mude a largura, faça 30 rampa. Ok, então depois disso, vou selecionar artigos de blog. E vamos definir a margem superior para cinco RAM para mover os artigos para baixo. Tudo bem, isso é sobre a seção de blogs. Vamos seguir em frente e cuidar da seção de conduta, selecionar Conteúdo de contato e mudar para torná-lo 90%. Na verdade, precisamos aqui do sinal percentual. Além disso, vou selecionar o lado direito. Quero dizer o elemento de entrada. Vamos definir com 230 RAM Então, a seção de contato parece boa e vamos passar para o rodapé, mudar sua largura, torná-la 90% Tudo bem, então isso é tudo sobre esse ponto de interrupção. Vamos seguir em frente e encontrar o próximo. Acho que o próximo ponto de interrupção será de 600 pixels Então, vamos criar uma nova consulta de mídia CSS e definir a largura máxima para 600 pixels. Antes de tudo, mais uma vez, vou mudar o tamanho da fonte do elemento HTML. Vai ser de 35%. Em seguida, vou selecionar os elementos de extensão do logotipo. E vou mudar o tamanho da fonte. Vamos fazer com três RAM. Portanto, precisamos cuidar dos elementos de entrada da barra de pesquisa. Vamos definir sua largura para 26 RAM. Além disso, precisamos cuidar dos itens de navegação. Então, goste de desenvolvimento e mudança com make it 12 RAM. Agora, como você pode ver, a parte superior do site está bonita. Vamos para o Landing. Eu vou mudar a altura. Vai ter 75 de altura da janela de visualização. Além disso, vou selecionar os elementos do título, que são colocados no banner, e vamos mudar sua largura, torná-los em Ram Próximo. Precisamos cuidar do botão. O Bateson, vamos definir a largura para 15 RAM. Em seguida, vamos selecionar o primeiro Batson e mudar a posição em que estou A posição correta será de 20 até a rampa. Ok, então é isso sobre o cabeçalho do site. Vamos seguir em frente e cuidar da seção de Produtos. Vamos definir a altura para 90 pontos de altura da janela de visualização. Agora podemos ver que temos espaço logarítmico inativo. Então, vamos selecionar Produtos. Topo. Precisamos alinhar o texto no centro e mudar a margem na parte inferior Vamos configurá-lo para três rampas. Tudo bem, vamos selecionar os ícones e definir sua largura para 70% Além disso, precisamos de embrulho flexível para embrulhar para colocar os ícones em linhas diferentes A próxima coisa que você precisará fazer é selecionar Desenvolvimento e definir a largura para 16 RAM. Além disso, precisamos definir a margem como, para executar. Portanto, considera-se que o último item tem margem no lado esquerdo. Então, vou resolver esse problema. Vamos selecionar Desenvolvimento. Estou no último elemento da lista. Vamos definir a margem direita para, para executar. Posso ver agora que o problema foi corrigido. Tudo bem? Em seguida, temos que cuidar da seção de blocos porque a seção de preços parece boa. Então, vamos seguir em frente e selecionar artigo, elemento de extensão. Altere o tamanho da fonte. Vamos configurá-lo para 1,5 RAM. Agora, parece bom. E, na verdade, com esse ponto de ruptura, terminamos. Vamos seguir em frente e encontrar o próximo ponto de interrupção, que será o último Então, vamos criar uma nova consulta de mídia CSS como a largura máxima da tela Vou especificar aqui 450 pixels. Primeiro, vamos alterar o tamanho da fonte do elemento HTML. Serão 32%. Em seguida, vou cuidar do logotipo. Acho que seria bom se escondêssemos o texto. Estou neste parlamento usando qualquer display, nenhum. Em seguida, vou cuidar da seção de Produtos. Vamos selecionar produtos e dizer olá na altura da janela de visualização. Tudo bem, a seguir em frente e cuidar da parte superior da seção de preços Vou selecionar um elemento de imagem. Vamos definir sua largura para 25 RAM. Além disso, vamos personalizar o título H1. Eu vou mudar o tamanho da fonte. Vamos definir o tamanho da fonte para 3,5 RAM. E depois mude a largura, faça com que seja um embrulho de 25. Tudo bem. Agora eu tinha que cuidar da Seção de Contato. Vamos seguir em frente e selecionar o lado esquerdo. Quero dizer conteúdo restante, H2, elemento de título. Vamos definir o tamanho da fonte em um ponto, uma armadilha. Em seguida, vou selecionar o elemento de extensão esquerda de contato. E para alterar o tamanho da fonte. Vamos até a rampa. Tudo bem, vamos seguir em frente e cuidar do lado direito. Selecione o conteúdo, certo? Elementos de entrada. Diminua sua largura, faça com que seja 25 RAM. Então agora ele pode ver tudo. Parece bom e podemos dizer que nosso projeto responde a diferentes tamanhos de tela Tudo bem, então, com este projeto, terminamos. Espero que você tenha gostado. Agora, podemos seguir em frente e começar a criar nosso próximo projeto, que espero que seja interessante e que você aprenda algo novo. Tudo bem, vamos seguir em frente. 13. Projeto 2: visualização: Olá e bem-vindo ao nosso segundo projeto, que será um site de portfólio pessoal. Hoje em dia, esse tipo de site é muito popular e muito procurado, então acho que será interessante para você O projeto é sobre um desenvolvedor web com todas as suas habilidades, trabalhos, projetos, contatos e assim por diante. Vamos seguir em frente e descrever o projeto. Portanto, temos aqui um cabeçalho do site no qual temos um logotipo, banner e um ícone do menu de hambúrguer Se eu clicar nele, a Navegação aparecerá com alguns efeitos interessantes. O banner consiste em alguns elementos diferentes, incluindo a imagem de um desenvolvedor Em seguida, temos uma seção de habilidades que mostra as tecnologias e o nível de conhecimento de um desenvolvedor web. A seção de habilidades é seguida pela seção Projeto, onde podemos encontrar diferentes trabalhos de um desenvolvedor. Depois disso, temos aqui uma seção de contato com alguns detalhes de contato e campos de entrada. E, finalmente, você pode encontrar aqui um rodapé simples e agradável. O projeto é responsivo a diferentes tamanhos de tela. Se eu inspecionar a página, mude para o modo responsivo e verifique o projeto com quatro tamanhos de tela diferentes Você descobrirá que o projeto é responsivo e fica bem em todos os tamanhos de tela diferentes Novamente, todos os projetos são criados para um tamanho de tela extra grande. Estou em sites discretos com 1920 pixels de largura e 1080 pixels de altura Portanto, se você estiver usando um tamanho de tela relativamente menor , durante as aulas, você deve alternar para o modo responsivo e especificar a largura e a altura dessa forma Caso contrário, o projeto não ficará bem em telas menores até que seja responsivo Então, por favor, leve isso em consideração. Ok, então isso é sobre o nosso segundo projeto. Agora podemos seguir em frente e começar a construí-lo 14. Projeto 2: crie e estilize o cabeçalho do site: Tudo bem, então é hora de começar a construir nossos projetos. Eu tenho uma pasta aqui, site do portfólio. Vamos prosseguir e abri-lo no VS Code. Em seguida, crie nossos arquivos de trabalho para HTML, CSS e também para JavaScript. Então vamos abrir o arquivo index.html e criar um documento HTML básico. Eu vou mudar o título. Será um site de portfólio. Em seguida, vou vincular o arquivo CSS. E também vamos vincular o arquivo JavaScript usando a tag de script. Tudo bem, vamos abrir o Navegador do Projeto. E também vou colocar o editor e o navegador lado a lado, assim Além disso, vou usar alguns links diferentes. O primeiro será o Google Fonts. Ao longo deste projeto, usaremos uma fonte chamada write these. Vamos selecionar alguns estilos diferentes. Em seguida, procuraremos outra fonte do Google , chamada Cabot. Selecione estilos diferentes. Em seguida, copie o link e cole-o no elemento principal. Tudo bem, em seguida, precisamos do Font Awesome CDN. Porque vamos usar algumas fontes diferentes, ícones incríveis. Vamos pegar o link, abrir a tag do link e o elemento principal e colar o CDN Tudo bem, então está tudo pronto. Vamos começar a criar comentários de marcação HTML para o contêiner Em seguida, vou inserir aqui a tag DIV com o contêiner da classe Então, precisamos de outro comentário para Navegação. Vamos criar uma marcação HTML para a navegação, precisamos aqui da tag DIV com o ícone Menu da classe, que incluirá duas linhas diferentes O desenvolvimento terá duas classes, linha e linha um. Em seguida, precisamos de navegação. Estou no elemento nav com a classe Navigation. Incluirá a borda da seção. E então teremos aqui itens de navegação. Vamos inserir seu elemento de link com a página inicial que foi duplicado algumas vezes e alterar os itens de navegação A segunda será sobre, depois teremos projetos. A próxima será a Galeria. Então teremos clientes de blog. O próximo será Preços e, em seguida, Contato. Tudo bem, então isso é adequação. Navegação. Vamos instituir novos comentários para Landing. Vamos abrir a tag da seção com a classe Landing. Vou instituir a tag DIV com a seção de classe, título PG com o desenvolvedor web de texto Na verdade, será o cabeçalho H1, tag e não a equipe Em seguida, precisamos de um logotipo com elemento de extensão com a web de texto. E, novamente, expanda o elemento com a guia de texto. Certo? Depois disso, vou criar um Banner Vamos inserir aqui a borda da seção. E também teremos aqui informações para desenvolvedores. Ele incluirá a tag de cabeçalho h3 com a saudação da classe. Vamos enviar uma mensagem para a instituição, olá. Então teremos o elemento span. Meu nome é Vamos inserir seus elementos de cabeçalho H1 com um nome de classe e , em seguida, inserir sua tag span com o texto John Smith. Tudo bem. Depois disso, vou inserir sua tag de cabeçalho h3 com a classe Prof. Quero dizer profissão. Vamos apresentar alguns textos em. Então. É span tag, o desenvolvedor web de conteúdo. Tudo bem, a seguir, vamos inserir um parágrafo com a classe sobre E vou instituir um texto fictício. Logo depois disso. Vou instituir alguns ícones de mídia social. Mas primeiro vamos abrir a tag DIV com a mídia social da classe. E então eu vou colocar seus ícones Font, Awesome. O primeiro será o FAA de uma marca, o Facebook F. Depois, o segundo será o de uma marca do Instagram Quanto ao terceiro, será se minhas marcas tiverem um Twitter. Tudo bem, então aqui temos nossa marcação HTML. Vamos seguir em frente e começar a trabalhar no currículo. Vou instituir o botão com o botão de digitação e com uma aula. BTN, CV, BTN. E também institua o texto. CV com votos negativos. Em seguida, precisamos aqui da tag span com o texto, minhas habilidades. Em seguida, vou instituir uma tag DIV com a imagem do desenvolvedor do nome da classe Então vamos inserir seu rapper de imagem. Quero dizer, o desenvolvimento será o wrapper de imagem surda da classe. Vamos inserir a tag da imagem e depois selecionar o caminho da imagem. Quando você desenvolve o dot PNG. Tudo bem. A imagem será seguida por um elemento profundo com o nome da classe deep experience. E também tem outra classe tag span do Deep Work Institute com o número 15. E também precisamos de outro intervalo. Anos de experiência. Vamos duplicar esse código. Mude aqui. O nome da classe, precisamos de projetos , mudou um número, será mais de 400. Também altere o texto. Vamos instituir projetos concluídos. Tudo bem, então vamos ver que temos aqui nossa marcação HTML para a navegação e para o cabeçalho Vamos começar a escrever alguns CSS em vez de comentários para estilos padrão. Em seguida, vou selecionar cada elemento usando um asterisco, definir a margem e preencher os dois até zero. Além disso, vou definir o tamanho da caixa, caixa de borda. Então temos que nos livrar da decoração de texto. Além disso, vamos definir o esboço como nenhum. E defina a família de fontes. Para enrolar esses sensoriais. Tudo bem, depois disso, vou definir tamanho da fonte do elemento HTML para 62,5 por cento porque vou usar a RAM como unidade de medida Uma RAM será igual a dez pixels. Em seguida, vou inserir seus comentários para o contêiner. Vamos selecionar o contêiner. Defina com como 100% e também defina a altura como 100 de altura da janela de visualização Em seguida, mude o plano de fundo. Vou usar seu gradiente linear com algumas cores diferentes O primeiro será 23293 o segundo será ver 3138 e também ter aqui Vai ser 232932. Então, aqui temos a cor de fundo com um gradiente linear Em seguida, vou instituir comentários para o Vamos selecionar o invólucro de imagem do desenvolvedor e definir sua largura para 60 RAM Porque agora a imagem está muito maior. Precisamos aqui de uma altura de 60 RAM. Além disso. Vamos selecionar a imagem em si e definir uma largura e altura como 100%. Agora a imagem ficou menor. Em seguida, vou selecionar o elemento da seção. Vamos definir com Make it centenas por cento. Também altere a altura e defina-a para 200 a altura da janela de visualização. Eu vou mudar a altura do contêiner para você. Vamos adicioná-lo a 100%. Agora, vou selecionar o título de fundo da seção. Vamos definir sua posição como absoluta. E também precisamos mudar a posição do elemento pai. Vamos defini-lo como relativo. Em seguida, defina o fundo para zero. E também precisamos de 50% restantes. E então, para uma centralização perfeita, precisamos transformar, traduzir X com -50% Depois disso, vou aumentar o tamanho da fonte. Vai acabar com a corrida. Portanto, temos aqui o título de fundo. Vamos mudar a largura para 100%. Além disso. Vou alinhar, sobrecarregar o centro e depois mudar a família da fonte Nesse caso, vou usar fonte chamada cursor de gabinete. Agora, o título parece muito melhor. Em seguida, precisamos mudar sua cor. Será 3136 3D. É como uma cor cinza. Além disso, precisamos que a opacidade seja 0,5. Agora, parece muito bom. Vamos prosseguir e selecionar Banner. Vou definir sua posição como absoluta. Então, precisamos que a posição difícil seja 50% da posição esquerda, pés por cento. E então precisamos centralizá-lo usando transform translate -50 por cento E novamente -50 por cento porque precisamos centralizar os elementos vertical e Tudo bem, depois disso, vou selecionar Logo. Vamos definir sua posição como absoluta. Então, precisamos de uma posição rígida para ter RAM cheia. E então deixe posicionar cinco RAM. Então, vamos mudar o tamanho da fonte. Serão três RAM. Portanto, temos aqui o logotipo, colocado no canto superior esquerdo da página. Em seguida, vou selecionar elementos de extensão. O primeiro elemento de extensão. Vamos mudar a cor, torná-la branca. Então, aqui temos o primeiro elemento de extensão. Vamos duplicar esse código e alterar o nome da classe. Nós precisamos. Nós trocamos o tamanho da fonte Serão cinco RAM. E também vou mudar a família de fontes. Vou usar a ressalva. Claro, a espessura da fonte ficará em negrito. E também vou mudar a cor. Vou usar a cor verde, 298587. Tudo bem, então temos aqui nosso logotipo, que eu acho muito bom Em seguida, vou exibir o flex para o banner. E então vou selecionar Borda da seção. Vamos definir sua largura de 2,3 RAM. A altura será de 55 RAM. Então eu vou mudar a cor de fundo. Vamos usar aqui BBB. Também crie algum espaço no lado direito usando dez RAM na margem direita Então, aqui temos borda da seção, a borda para a navegação. Então, agora, vou esconder a navegação por um tempo. Então, vamos aos comentários do Instituto. Em seguida, selecione Navegação e atribuído para não exibir. Voltaremos à Navegação em breve. Vamos continuar personalizando o cabeçalho do site Então, vou selecionar a borda da seção com uma pseudoclasse Vamos definir o conteúdo como vazio. Em seguida, vou definir a largura para três RAM. A altura será de três Rahm. Na verdade, estamos criando o círculo aqui. Então, vamos definir a borda para apontar para ficar sólida na cor BBB Além disso, precisamos que a cor de fundo seja de 1d22 a oito. Em seguida, defina a posição como posicionamento absoluto em relação ao elemento pai Portanto, temos aqui antes os pseudoelementos. Vamos arredondá-lo usando o raio da borda presente. Então, a posição em que estou, a posição esquerda, será -1,65, executada da seguinte forma É uma posição, vai ter menos três RAM. Você terá o círculo. Vamos duplicar esse código. Precisamos de outro círculo, neste caso usando after pseudo elemento Temos que mudar aqui algumas coisas. Nós precisamos. Posição inferior. Menos três rampas. Na verdade, não precisamos mudar mais nada. Então, precisamos de uma saudação. Vamos mudar o tamanho da fonte. Será 1,6 RAM. Em seguida, vou transformar o texto em maiúsculas. Mude a cor, torne-a branca. Além disso, precisamos de algum espaço entre as letras. Aqui temos o texto de saudação. Em seguida, vou selecionar os elementos de extensão, a saudação. Vamos mudar a cor, torná-la verde. Em seguida, vou selecionar o nome. Vamos mudar o tamanho da fonte, torná-la em dez RAM. Precisamos ter 60 RAM. Além disso, crie algum espaço ao redor do elemento na margem RAM zero até a RAM zero, então a cor será branca. Então aqui temos o nome. Vamos adicionar um pouco de sombra com RGBA, cor preta com menor opacidade Portanto, temos aqui um pequeno efeito de sombra. Em seguida, vou selecionar o elemento span, que é colocado dentro do nome. A cor vai ser verde. Então, o primeiro nome é verde agora e está bonito. Em seguida, vou selecionar o prof. Vamos mudar o tamanho da fonte. Vai ser 1,8 R&. Além disso, vou mudar a espessura da fonte. Vamos configurá-lo para 300. Transforme texto em maiúsculas. Também mude a cor Aqui, cor branca. Em seguida, crie algum espaço entre as letras que definem a para apontar para a RAM. Também crie algum espaço na parte inferior usando o aluguel de seis na margem inferior Certo? Agora, vou selecionar o elemento span do Prof. alterar a família de fontes Vai ser uma ressalva, corrosiva. E também vou definir o tamanho da fonte para três R&. Em seguida, vou mudar a espessura da fonte, ela ficará em negrito. Em seguida, transforme o texto em maiúsculas. Além disso, crie algum espaço usando a margem esquerda, um ponto para executar Então, aqui temos a segunda parte do Prof. Em seguida, precisamos de cerca Vamos definir a largura para 60 RAM Mude a família da fonte, será uma ressalva cursiva. Além disso, você precisa que o tamanho da fonte seja 2,5 RAM. Então eu vou mudar a altura da linha Vamos configurá-la como uma e mudar a cor Faça com que seja um nove, um BAE. Então, aqui temos cerca de um parágrafo. Vamos definir a margem inferior para cinco RAM para criar algum espaço na parte inferior. Agora, temos que cuidar dos ícones das mídias sociais. Vamos definir a margem inferior para cinco RAM. Em seguida, vou personalizar três ícones. Então, é como a mídia social. Irlanda. Aumente o tamanho da fonte. Vai ter 2,5 RAM. Em seguida, mude a cor branca. Vou criar algum espaço no lado direito usando a margem direita da RAM E depois use algum efeito de sombra. Os valores de 0,5 grama ou uma RAM, e o RGB uma cor preta com opacidade de Ok, então os ícones parecem muito melhores. Vamos mudar o tipo de cursor, fazer com que ele aponte. Tudo bem, isso é sobre os ícones de mídia social. Agora, eu tenho que cuidar do botão. Vamos definir sua largura para 20 RAM. Então, a altura será de seis RAM. Além disso, vou definir a borda como ponto a ponto sólido com uma cor BBB Pois o raio será de três RAM. Eu quero fazer o padrão arredondado. Em seguida, altere a cor de fundo, torne-a transparente. Então você terá o botão. Vamos cuidar do texto. O tamanho da fonte será de um ponto para a RAM. Mude, transforme, transforme em maiúsculas. Também precisamos definir a cor para branco e também mudar o cursor, fazer com que ele aponte. Tudo bem. A próxima coisa que vou fazer é criar algum espaço no lado direito , serão sete RAM. E agora temos que criar um efeito de foco. Precisamos selecionar BGN antes. Vamos adicionar conteúdo ao vazio. Com vai ser 100%. A altura também será de 100%. Em seguida, mude a cor de fundo, você verá uma cor verde. Além disso, vou definir o raio da borda para três RAM. Deve ser arredondado como o fundo. Em seguida, defina a posição como absoluta. Precisamos ouvir a posição relativa porque o botão é o elemento pai. Então, aqui temos o pseudo elemento anterior. Vamos definir a posição superior como zero e essa posição como zero também. Agora, antes de descobrirmos o botão, vamos corrigir esse problema usando o valor da propriedade do índice menos dez Tudo bem, então agora parece muito bom. E temos que esconder esses elementos usando Transform Scale zero. Depois de passar o mouse sobre o botão, antes que o pseudoelemento apareça Então, vamos selecionar BTN com over, seguido pelo pseudo elemento antes Vamos definir a escala como um. E também precisamos que você faça a transição para tornar os fatos mais inteligentes. Vamos usar a transição aqui também. Tudo bem, agora temos que criar uma linha ao lado do botão. Então, vamos selecionar CVP ten com o pseudo-elemento after. Vamos definir o conteúdo como vazio. Em seguida, encontramos a largura. Serão cinco RAM. Precisamos que a altura aponte para a RAM. Em seguida, altere a cor do plano de fundo. Vai ser BBB. Então, defina a posição como absoluta. Então, a primeira posição será de 50 por cento. Quanto à posição correta , serão menos cinco mil Então, aqui temos a linha. Vamos adicionar aqui Transform, Translate Y -50 por cento para centralizar a linha perfeitamente Tudo bem. Agora precisamos de um CV span. Vamos mudar o tamanho da fonte. Será um ponto para a RAM. Espessura da fonte. Vou configurá-lo para 300. Além disso, transforme o texto em maiúsculas e, em seguida, altere a cor, torne-o branco Tudo bem, então é o Vamos seguir em frente e cuidar do lado direito. Vou adicionar aqui a cor de fundo. Vamos usar a cor verde do que precisamos, o raio da borda deve ser de 50 por cento Vamos adicionar aqui um preenchimento com alguns valores diferentes em sites diferentes Também precisamos aqui do efeito de sombra. Os valores 01 RAM, uma RAM e RGBA, na cor preta e com a opacidade, apontam para ter Vamos ocultar a parte da imagem usando overflow hidden. Tudo bem, agora precisamos de algum espaço entre os lados esquerdo e direito Vamos selecionar as informações do desenvolvedor e definir a margem direita para 15 corridas. Então agora temos aqui um resultado muito melhor. Vamos selecionar esse trabalho. Defina a largura como 25 RAM e a altura será nove RAM. Também precisamos aqui que a cor de fundo seja uma, T22 para a. Em seguida, altere o tamanho da fonte Será um ponto para a RAM. Precisamos que o texto esteja em maiúsculas. Mude a cor, torne-a branca. Então, ele terá esse trabalho. Isso é definir borda para apontar para ram, sólido e BBB. Também precisamos de seis RAM com raio de borda. Então agora temos aqui um resultado muito melhor. Vamos configurar a tela como flexível. Precisamos enviar para o texto usando o conteúdo justificado e alinhar o centro Além disso, vamos usar o preenchimento, zero até a rampa. Em seguida, use box-shadow com os valores 0,5 grama 1 g e a cor preta RGBA com o Tudo bem, a seguir, vamos definir a posição como absoluta. E também precisamos aqui posição relativa ao elemento pai, que é a imagem do desenvolvedor. Em seguida, temos que selecionar separadamente esse trabalho. Nesse caso, você pisa na experiência, defina a posição inferior para dez RAM. Além disso, a posição correta será quatro na RAM. Então, um elemento é colocado corretamente. Vamos selecionar que os projetos definam a posição inferior como uma RAM e, em seguida, a posição correta será menos duas rampas Tudo bem, então tudo parece bem. Agora, vou selecionar esse período de trabalho. Enésimo filho, um. O primeiro elemento de extensão. Vamos definir o tamanho da fonte para três RAM, que será 50 por cento. Além disso, vamos alinhar o texto e o centro. Então, aqui está, vamos duplicar esse código, alterar nth-child para, para eliminar o centro de alinhamento de texto Também o tamanho da fonte e, em seguida, defina a cor como verde. Tudo bem, então é isso. Tudo parece ótimo. Vamos passar para a próxima palestra. 15. Projeto 2: estilize e faça a navegação funcionar: Tudo bem, então, quando terminarmos com um cabeçalho, agora é hora de seguir em frente e trabalhar na navegação, que agora está oculta porque atribuímos a ela nenhuma exibição Vamos continuar e personalizar o ícone do menu. Vou configurar com 23 RAM. Então, a altura será de três RAM. E vou assinar com ela uma cor de fundo temporária, C, C, C. Então precisamos definir a posição. Isso vai ser corrigido. A posição superior será de cinco RAM. Quanto à posição correta , também terá cinco RAM. Então, como você pode ver, temos aqui o ícone do Menu. Vamos nos livrar dessa cor de fundo temporária e, em seguida, selecionar a linha. Vamos definir com duas ou três RAM pois a altura apontará para a RAM E então vamos definir a cor de fundo para BBB. Então, aqui temos linhas. Vou configurar a exibição como flexível para o ícone do Menu. E então precisamos mudar a direção. Vamos fazer com que seja uma coluna e também usar o espaço justify content uniformemente Além disso, precisamos alinhar o centro dos itens e também mudar o ponto mais grosso, tornando-o Então, como você pode ver, temos aqui um belo ícone de menu com duas linhas. Em seguida, vou me livrar da exibição de nenhum na Navegação e na posição definida, Make it fix. Então temos que, se minha interposição for zero E também precisamos aqui a posição correta também seja zero. Então, vamos configurar com 250 RAM. Pois a altura será uma centena de altura da janela de visualização. Então eu vou mudar a cor de fundo. Vai ser de cor cinza. Aqui temos a Navegação. Vamos definir a propriedade do índice como 100 para exibir a Navegação. Tudo bem, agora também precisamos índice Z para o ícone do Menu. Então, agora o ícone é exibido. Em seguida, vou configurar a exibição como flexível e precisamos alinhar os itens de navegação usando o centro de alinhamento de itens Além disso, vou usar acolchoamento no átrio esquerdo. Então, vamos prosseguir e selecionar os itens. Precisamos da flexibilidade da tela e temos que mudar a direção. Vamos fazer uma coluna. Então, os itens são colocados verticalmente Em seguida, vou selecionar o próprio item de navegação. Quero dizer, o elemento link. Vamos definir o tamanho da fonte para três RAM. Também altere o peso da fonte. Serão 300. Então, vamos transformar o texto em maiúsculas Crie algum espaço entre as letras e mude a cor. Faça a cor II. Também precisamos de algum espaço, está na margem, uma RAM e zero. Então, como você pode ver, os itens de navegação estão bem. Em seguida, vou selecionar elementos de link com o mouse. Vamos mudar a cor, torná-la verde e também usar a transição para um efeito suave. Então, agora vamos considerar que temos aqui um bom efeito suave de passar o mouse Tudo bem, agora é hora de fazer a navegação funcionar. Vamos esconder isso. Definido como oposto a menos oito. Hum, quanto à posição correta, precisamos de -63 RAM Além disso, vou usar o Transform Rotate. Z. O valor será de -15 graus. Se eu definir a posição como absoluta , veremos a posição da Navegação. Vamos voltar aqui, posição fixa. Então, quando clicamos no ícone, a Navegação deve aparecer. Precisamos de JavaScript. Vamos criar algumas variáveis. Ícone do menu, vamos selecioná-lo usando o método querySelector. Precisamos especificar aqui o nome da classe, ícone do Menu. Vamos duplicar esse código. Nós precisamos aqui. O contêiner também alterou o nome da variável. Vai ser um contêiner. Em seguida, adicionarei o ouvinte de eventos ao ícone do Menu com um evento de clique E também temos que passar uma função de retorno de chamada. Será uma função de seta Depois de clicarmos no ícone Menu, precisamos adicionar uma classe ao contêiner. Portanto, precisamos aqui da propriedade da lista de classes do que do método de alternância. E temos que colocar o nome da sua turma, que será alterado. Ok, agora temos que selecionar Navegação com uma mudança de classe e aplicar para comer alguns estilos, posição superior zero e posição zero correta. Também precisamos aqui Transformar, Rotar Z. E temos aqui para passar a posição padrão zero Depois de clicarmos no ícone Menu , a Navegação aparecerá. Para que isso afete o motor, precisamos fazer a transição de todos os pontos 6 s. Então agora tudo funciona bem e temos aqui um bom efeito. Em seguida, vou definir a opacidade das tentativas próximas como zero e também a visibilidade Precisamos ocultar os itens de navegação. Vamos selecionar Navegação. Em seguida, borda da seção. Precisamos esconder a fronteira também. Portanto, precisamos novamente de opacidade zero e visibilidade oculta. Tudo bem, agora temos que exibi-los, quer que a navegação seja exibida Precisamos mudar novamente de classe e, em seguida, navegar pelos itens. Vamos definir a opacidade como uma e a visibilidade como visível. Em seguida, use a transição com algum tempo de atraso. Porque uma vez que precisamos exibi-lo na Navegação e depois nos itens, vamos fazer o mesmo com a borda da seção. Use a mudança de classe e defina a opacidade como uma e a visibilidade para aquecê-la, desculpe, E também use a transição, que novamente demora um pouco. Ok, agora, tudo funciona bem. Temos aqui um efeito interessante. Depois de exibirmos o ícone do Menu. Tudo bem, finalmente, vou cuidar das linhas. Temos que definir a propriedade de transformação para girar Z 45 graus. Vai ser para a linha 1. Além disso, precisamos traduzir para mover a linha com o valor 0,7 RAM e -0,1 rampa Vamos fazer o mesmo com a linha dois. Precisamos aqui de -45 graus. E também precisamos fazer a transição. Agora, quando clicarmos no ícone do Menu, ele será transformado no botão de fechamento X. Então, tudo funciona perfeitamente. Tudo bem, isso é tudo sobre a navegação. Vamos passar para a próxima palestra. 16. Projeto 2: crie e personalize habilidades: Tudo bem, agora é hora de criar nossa próxima seção, que será uma seção de habilidades Vamos continuar e inserir novos comentários para a seção de habilidades. Em seguida, abra a seção, marque com o nome da classe. Habilidades. Em primeiro lugar, vou inserir alguns títulos. O primeiro será o título de fundo da seção H1 Provavelmente se dirigirá para a Seção. Minhas habilidades. Em seguida, para instruir você e outros elementos do cabeçalho H1 Bem, o título da seção do nome da turma. Vamos inserir suas habilidades profissionais. Depois disso, vou inserir o elemento de cabeçalho h3, que será um subtítulo E incluirá a tag span. Com habilidades. Depois disso, precisamos da borda da seção, a borda que temos na primeira seção. E depois disso, vou criar cartões. No geral, terá seis cartas diferentes. Vamos abrir a tag DIV com o cartão de habilidades da classe. Portanto, teremos aqui a habilidade com elementos de extensão, HTML e a porcentagem da distorção, 95% Então vou instituir um parágrafo com algum texto fictício E também precisamos do progresso, que indicará a porcentagem desse cubo Tudo bem, então é isso. Vou duplicar o código cinco vezes porque, no geral, teremos seis cartas E então eu vou mudar as tecnologias e também os valores percentuais. O segundo será CSS, 90%. Então teremos JavaScript em 5%. O próximo será o React JS 75%. Então, o próximo será o NodeJS, 85%. E a última tecnologia será futura como um valor percentual de 75. Tudo bem, então a marcação HTML para a seção Habilidades está pronta e agora é hora de escrever um pouco Antes de tudo, vamos responder aos seus comentários. Habilidades e habilidades. Em seguida, selecione o elemento Seção e a largura e a altura definidas. A largura será de 100%. Quanto à altura , será 100. Altura da janela de visualização. E também posição definida, Make it route. Tudo bem, depois disso, vou selecionar a borda da seção com as habilidades, nome da classe, definir a posição como absoluta E então, para encontrar Luck, a posição será 20 rampa. Em seguida, precisaremos posicioná-lo presente. E para centralizar os elementos verticalmente, vamos usar Transform Translate Y -50 por cento. Então, como você pode ver, a borda está bem colocada Em seguida, vou usar o flexbox para esse elemento da seção. Mude a direção, transforme-a em coluna. Alinhe os itens no centro. Assim, é possível ver que os elementos são colocados horizontalmente no centro Em seguida, vou selecionar o título da seção. Vamos personalizá-lo. Mude o tamanho da fonte, faça com seis RAM, então precisaremos da gramatura da fonte, será 300 Além disso, transforme o texto em maiúsculas. Em seguida, crie um espaço entre a treliça, defina-a para apontar para a barra, altere a cor, torne-a branca e também crie algum espaço na Três RAM. Então, o título parece bom. Agora é hora de personalizar o subtítulo. Vamos mudar o tamanho da fonte. Vai ser para a RAM Então precisamos de cores. Vamos torná-lo verde. 29587. Também transforme texto em maiúsculas Então aqui temos esses, o preenchimento. Agora, precisamos selecionar a tag span, que é colocada no subtítulo Vamos mudar a família de fontes. Será uma advertência corrosiva. Então, vou mudar o tamanho da fonte. Vamos configurá-lo para 3,5 RAM. Em seguida, transforme a tributação em maiúsculas em vez de maiúsculas e também altere e também altere Vai ser branco. Tudo bem, então isso é, o acolchoamento, parece muito bom E agora temos que seguir em frente e cuidar das cartas. Vamos selecionar um invólucro. Defina a largura para 140 RAM. Em seguida, sente-se na margem dois, átrio no topo, zero No lado direito, zero no Boltzmann pode RAM no lado esquerdo Em seguida, precisamos flexionar e também flexionar a embalagem com a embalagem de valor Depois disso, vou selecionar o cartão em si. Primeiro, vamos definir a largura. Serão quatro na RAM. Em seguida, defina a altura com o valor 18 RAM. Defina a margem para três, corra nos quatro lados. Portanto, precisamos de um pouco de preenchimento com os valores 0,3 RAM e também alterar a cor de fundo Ccc por um tempo. Então, aqui temos todas as seis cartas bem colocadas. Em seguida, vou selecionar a habilidade configurá-la para flexionar Além disso, precisamos justificar o espaço entre o conteúdo para criar algum espaço. Além disso, vou criar algum espaço na parte inferior usando a margem inferior para pressionar. Em seguida, vou selecionar tags de extensão, definir o tamanho da fonte como, para executar. Mude a cor, torne-a E e, em seguida, elimine essa cor de fundo temporária. Então, ele pode ver a tecnologia e a porcentagem parece boa. Em seguida, vou selecionar elementos de extensão, que é o segundo. Vamos mudar a cor, torná-la verde. Então, agora temos melhores resultados. Depois disso, vou cuidar do parágrafo. Vamos mudar a família de fontes. Vai ser uma ressalva coercitiva. Em seguida, vou mudar o tamanho da fonte. Vamos configurá-lo para, para RAM. Mude a cor, torne-a BBB. Também altere a margem na parte inferior, desculpe, duas para RAM. Então, o parágrafo parece muito bom. Agora, temos que cuidar da barra de progresso. Vamos configurar com 2,5 RAM. A altura será de 2,5 RAM precisamos que a cor de fundo seja 122228 Então, precisamos de um ponto de borda para solidificar. A cor será BBB. Além disso, vou fazer elementos arredondados usando raio de borda de 50 por cento e também definir Na verdade, precisamos de uma posição relativa para os pais, que estará em Skills Caught. Em seguida, precisamos que a posição inferior seja -1,25 RAM. Então, aqui temos os círculos e agora precisamos criar as linhas. Então, vamos copiar o nome da classe e usar. Antes do pseudoelemento, defina o conteúdo como vazio. Então, precisamos que a altura aponte para a RAM. Em seguida, altere a cor de fundo. Use a cor verde. Posição até absoluta. Então, precisamos que uma posição difícil seja de 50 por cento. Para centralizar o design, vamos usar Transform Translate Y -50 por cento Tudo bem, depois disso, vamos selecionar o cartão de habilidades, enésimo filho, seguido pelas habilidades chamadas progresso, precisamos limpar a posição para ser Para o primeiro elemento. Vamos duplicar esse código e selecionar antes do pseudo-elemento a posição correta. Vai ter 2,5 RAM. E também a largura, será a 30ª. Nós aumentamos. Então aqui temos a linha. Vamos copiar esse código. E agora use depois de pseudoelementos. A cor será 777. Além disso, vou duplicar esse código aqui. Mude o antes para o depois. Então, a largura será RAM total. Quanto à posição correta, precisamos aqui de -4,3 RAM Tudo bem, agora temos linhas. Vamos duplicar esse código. Mude os números que precisamos aqui também. A posição correta será 50 por cento do que a largura será de 31,5 RAM Quanto à posição correta, aqui, precisamos de -6,1 RAM e a largura será Tudo bem, então o segundo cartão está pronto. Vamos duplicar esse código. Mude os números. Precisamos aqui. Três. A posição correta será de 20 por cento. Então eu vou mudar a largura. Vai ter 29,8 RAM. Desculpe, cinco RAM. Além disso, vou mudar a posição correta aqui, oito pontos para RAM. E também a largura será de 7,9 rampa. Ok, então os três primeiros acordes estão prontos. Agora vamos duplicar esse código. Mude os números. Será para a posição certa, apenas 30%. Então eu vou mudar a largura. Vai ter 25,5 RAM. E também precisamos aqui que a posição Y seja 12 pontos até a rampa. Quanto à largura, será de 12 rodadas. Tudo bem. Em seguida, vou copiar o terceiro cartão porque precisamos de alguns valores semelhantes. Vamos mudar o número para cinco. Então, vamos ver que o progresso está pronto. Então eu vou copiar o quarto cartão. Mude os números, faça seis. Então, agora está tudo pronto. Terminamos de trabalhar na seção de habilidades. Vamos passar para o próximo. 17. Projeto 2: seção de criação de projetos: Tudo bem, então, quando terminarmos com a seção Habilidades, agora parece, siga em frente e comece a trabalhar na próxima seção, que será uma seção de projeto Então, vamos inserir aqui seus comentários para a seção de projetos. Em seguida, vou abrir a tag da seção com o nome da classe, Projetos. Vamos copiar esse código daqui porque precisamos aqui de elementos de cabeçalho semelhantes. Vamos seguir em frente e mudar aqui meus projetos. Então precisamos de um portfólio aqui. E também mude esse elemento para você. Em seguida, ele projeta. Certo? Em seguida, vou abrir a tag DIV para os cartões do projeto de classe Então precisamos do cartão em si. Ela incluirá uma imagem do projeto do elemento Div. Vamos abrir a tag de imagem. Em seguida, selecione a imagem da pasta de imagens que precisamos aqui, projeto um, PNG. Também vou inserir aqui e outra tag DIV com os textos da aula Em vez disso, use o Pontiac, ele será HTML. Então, precisamos de outra tag span, CSS. E o terceiro será JavaScript. Em seguida, vou usar a tag de cabeçalho H3 com um nome de projeto de classe Nesse caso, teremos contato para que o título seja seguido pelo parágrafo com o nome da classe, descrição do projeto, tarefa. Vamos apresentar um texto fictício. E depois disso, precisamos de um botão. O tipo será botão. Também precisamos aqui de um nome de classe, projeto, BTN. Vamos inserir aqui. Veja o projeto. Então, precisamos de um ícone Font Awesome para a seta. F afiado, F, uma flecha sólida. Certo? Ok, então isso é tudo sobre o cartão. Vamos duplicá-lo cinco vezes porque, no geral, teremos seis cartões de projeto diferentes Vamos prosseguir e alterar os detalhes que precisamos para projetar em PNG. Em seguida, altere o título. Vai ser uma calculadora. O próximo projeto será o projeto três. Então teremos o projeto quatro. O título será Website. Em seguida, teremos o projeto cinco. O nome será Menu. Para o último cartão, teremos o projeto seis. E o título será um cartão de perfil. Certo? Isso é tudo sobre as cartas. O último elemento que precisamos aqui será o fundo com um botão de digitação. Também precisamos aqui de um nome de classe. Vai ser BTN. E vamos inserir mais sua visualização. Por fim, vou inserir seu elemento DV, a classe Tudo bem, então aqui temos nossos elementos. No momento, essa seção parece feia. Então, vamos em frente e cuidar disso. Vou começar a escrever alguns CSS que precisamos aqui de novos comentários para projetos. Em seguida, vou selecionar a imagem do projeto. Vamos começar com 236 rampa. A altura será de 20 RAM. Em seguida, precisamos selecionar a imagem em si. Vamos começar com 200 por cento. Então, a altura será de 100%. Agora, as imagens ficaram menores e agora temos um resultado muito melhor. Vamos selecionar os elementos da seção. Defina a largura. Vai ser 100%. Então, a altura também será de 100%. Em seguida, vou definir a posição como relativa. Também precisamos aqui de um fluxo de livros. Vamos mudar a direção da coluna. Além disso, precisamos alinhar os itens no centro usando alinhar o centro dos itens As cartas são colocadas no centro. Também temos aqui a borda e o título de fundo da seção. Tudo bem, a seguir, vamos prosseguir e selecionar Borda da seção. Vamos definir a altura para 140 RAM. Mudança. A posição será absoluta. A primeira posição será de 50%. A posição correta será 15 rampa. E também precisamos centralizar a borda usando Transform Translate Y com o valor -50 por cento Além disso, vou usar a margem zero. Então, vamos ver que temos aqui borda da seção que é colocada no lado direito desta seção. Vamos prosseguir e selecionar o cartão do projeto. Defina sua largura para quatro para bater. A altura será de 55 RAM do que precisamos para mudar a cor de fundo. Você vê 1222 a oito. Em seguida, vou selecionar cartões de projeto. O rápido desenvolvimento definiu a largura para 140 rampas. Então, precisamos aqui de livros flexíveis. Em seguida, use o justify-content center para enviar para os elementos E também precisamos embrulhar os itens flexíveis e criar uma margem na parte superior. Além disso, precisamos de algum espaço na parte inferior usando o preenchimento que pode ser executado Tudo bem, então as cartas estão bem colocadas no centro da seção Em seguida, precisamos criar algum espaço entre os cartões. Use a margem e defina-a como, para executar. Além disso, precisamos preencher a RAM. Então eu vou usar border-radius. O valor de uma RAM usará o flexbox? Precisamos aqui para mudar a direção. Vai ser uma coluna. E também vou usar o espaço de conteúdo justificado entre. Tudo bem, como você pode ver, o título de fundo cobre o cartão Então, vamos corrigir esse problema usando a propriedade index. Vamos configurá-lo para 100. Então, agora o problema está resolvido. Em seguida, vou cuidar das imagens que precisamos que os pés do objeto sejam cobertos. Além disso, vamos usar border-radius com valor de uma RAM. Mude o cursor, faça com que ele aponte. Tudo bem, então os carros parecem melhores. Vamos continuar e cuidar do efeito de flutuação. Depois de passarmos o mouse sobre as imagens, elas devem se ampliar. Então, vamos usar Transform Scale 1.3 e depois usar a transição para um efeito suave. Portanto, pode-se ver que temos aqui um efeito de flutuação, mas precisamos corrigir um problema As imagens estão sobrepostas. Os carrinhos, então precisamos transbordar de valor oculto. Ok, agora temos um efeito muito melhor. Vamos usar aqui o raio de borda com um valor de uma RAM. Então, agora o efeito de foco parece ainda melhor. Depois disso, vou cuidar dos textos. Quero dizer, tecnologias de TI. Vamos mudar o tamanho da fonte. Será 1,6 RAM. Então, precisamos que o peso da fonte seja 300. Também transforme texto em maiúsculas. Mude a cor, torne-a verde. Então, aqui temos as tecnologias. Vamos criar algum espaço. Faça com que seja 0,1 de aluguel, certo? Em seguida, vou selecionar o invólucro de textos. Vamos definir a margem superior de dois menos três RAM. Para colocar os elementos de extensão para cima. Em seguida, vou selecionar o nome do projeto. Vamos mudar o tamanho da fonte. Serão três. Rampa. Altere a espessura da fonte, fazendo 300, e altere a cor. Precisamos aqui de uma cor branca. Em seguida, precisamos que a margem superior tenha menos duas RAM. Precisamos mudar o nome para cima. Próximo. Vou selecionar a descrição do projeto. Vamos mudar a família de fontes. Vai ser uma ressalva. Cursivo. Altere também o tamanho da fonte, faça-a apontar para a rampa. Mude a cor que vou usar aqui, C, C, C. Para que a descrição fique bonita. Em seguida, vou cuidar do botão. Quero dizer, projeto BTN definido com 220 RAM, mas a altura será RAM completa Mude a cor de fundo, ela ficará transparente. Em seguida, precisamos que o tamanho da fonte seja 1,8 RAM. Vamos alinhar o texto no lado esquerdo. Mude a cor, torne-a branca. Além disso, você precisa que a borda não seja mais nenhuma para o curso, então ela terá zero ponteiro. Ok? Em seguida, vou selecionar Fonte, ícone incrível. Quero dizer, a flecha. Vamos mudar a cor, torná-la verde. E também precisamos de margem no lado esquerdo. Vamos adicioná-lo a uma linha. Ok? Então, o botão está bonito. Vamos criar um pequeno efeito de foco. Selecione os íons ao passar o mouse e altere a margem do lado esquerdo. Vamos configurá-lo como RAM e também usar a transição para um efeito mais suave Margem esquerda com iteração 0,3 s. Ok, agora temos aqui um pequeno efeito agradável Em seguida, vou selecionar o botão, que é colocado na parte inferior. Vamos definir a margem em cinco quadros na parte superior e zeros nos demais lados Então, agora tudo parece bem. E com esta seção, terminamos. Vamos seguir em frente. 18. Projeto 2: crie e estilize a seção de contatos: Tudo bem, então, quando terminarmos com a seção Habilidades, agora é hora de seguir em frente e começar a criar nossa próxima seção, que será uma Seção de Contato Vamos continuar e inserir novos comentários para a seção de contato. Então eu vou abrir a Seção, verifique com o nome da turma. Contato. Em seguida, vou pegar alguns títulos da seção anterior porque teremos aqui elementos de cabeçalho semelhantes Então, vamos colar esses elementos aqui. Além disso, precisamos alterar os valores do texto. Precisamos entrar em contato comigo. Então, o próximo título será Contatos. Então teremos um pouco de torque que substituirá o interior desse elemento de envergadura. Certo? Depois disso, vou abrir o bate-papo, a borda da seção da turma. Também teremos a mesma borda nesta seção. Depois da borda da seção, vou abrir a tag DIV com a classe Contact Content, na qual vou inserir outro contato de desenvolvimento à esquerda No lado esquerdo, teremos o endereço. Vamos colocar aqui o ícone Font Awesome, que será sólido se a localização estiver pontilhada. Em seguida, vou inserir aqui a tag DIV com o nome da classe Contact Info, na qual teremos elementos de extensão, endereço, seguidos por outro, span, Nova York, EUA Em seguida, vou inserir seus e outros elementos profundos com o nome da classe freelance, no qual vou colocar o ícone Font Awesome com as classes fa, usuário comum. Então, precisamos de uma escuridão profunda com a classe Contact Info, na qual vou colocar dois elementos de extensão, como no caso anterior. Precisamos aqui. Freelancer. Quanto ao segundo elemento de extensão, ele estará disponível agora. Tudo bem, vamos copiar esse código duas vezes e mudar o nome da classe Vai ser um e-mail. Em seguida, precisamos alterar o nome da classe, pois o ícone Font Awesome será envelope Também altere os elementos de extensão, e-mail e alguns e-mails idiotas John Smith em sign, web tab.com. Ok, em seguida, vou colocar seu telefone. Também altere a fonte. O ícone incrível será um telefone fa sólido em fases Em seguida, altere os elementos de amplitude, terá seu telefone. E vou colocar aqui telefone fictício, números 1-9 Ok, depois disso, vou abrir outro empreendimento que será o lado certo. Vamos abrir a tag do formulário. Livre-se do atributo de ação. No elemento do formulário, vou inserir a tag DIV com os grupos de entrada da classe Então teremos um grupo de entrada. Vamos abrir o elemento do rótulo. Vou colocar aqui seu nome completo e o ícone Font Awesome, que será muito sólido. Um asterisco. Em seguida, vou inserir aqui a tag de entrada com um texto digitado. Tudo bem, vamos continuar e duplicar o grupo de entrada. Altere o atributo for. Vai ser enviado por e-mail. Além disso, precisamos aqui do seu endereço de e-mail. Mude o tipo. Em seguida, vou copiar esse código. Altere o atributo for, ele será um assunto. Altere também seu texto, seu assunto e precisamos que você digite de a a B para ser tributado. Tudo bem, vamos inserir aqui novamente, grupo de entrada. Mude o rótulo, ele será enviado. Mudar seu texto será sua mensagem. Em vez da tag de entrada, vou usar aqui a área de texto. Depois disso, vou abrir os elementos do botão. O tipo será botão. Também faremos com que sua aula entre em contato com a BTN. E vamos inserir aqui enviar mensagem. Tudo bem, então vamos falar sobre a marcação HTML. Todos os elementos foram criados e agora temos que escrever um pouco de CSS. Vamos continuar e inserir novos comentários para a seção de contato. Em primeiro lugar, vou selecionar os elementos da seção. Vamos definir com 200 por cento. Então, a altura será a altura de cem janelas de visualização e a posição será relativa Em seguida, vou usar o Flexbox. Vamos mudar a direção. Vai ser uma coluna. E também vou alinhar os itens no centro. Então, aqui pode ver que os itens são colocados no centro. Em seguida, vou selecionar Borda da seção. Vamos definir que essa posição é absoluta. Defina a posição da perna para 20 RAM. Essa provavelmente é uma posição difícil, será de 30%. Então, como você pode ver, nesta seção, engarrafador é colocado no lado esquerdo desta ação Em seguida, vou selecionar Conteúdo de contato. Vou definir a largura. 120 RAM do que a posição será absoluta. A posição será de 50%. Posição esquerda, 50 por cento também. E então, para uma centralização perfeita, vou usar transform translate -50% e novamente -50 Em seguida, vou definir a margem superior para sete rampas. Depois disso, vou usar o flexbox. Isso justifica o espaço de conteúdo entre. Em seguida, use itens de alinhamento. Centro. Ok, então, como você pode ver, os dois lados estão bem colocados Estou nos lados esquerdo e direito. Em seguida, vou tirar você do lado esquerdo. Selecione o elemento profundo no Contato à esquerda. Defina a tela como flexível. Em seguida, use alinhar itens, centralizar. E precisamos de margem. Serão três rampas e zero. Ok? Depois disso, vou selecionar os ícones Font Awesome no lado esquerdo, vamos definir com 25 RAM. Então, a altura também será de cinco quadros. Em seguida, vou mudar a cor do plano de fundo. Será um D22 que define borda a ponta a ponta sólida. A cor será BBB. Então, aqui temos os ícones. Em seguida, vou fazer essas caixas arredondadas usando um raio de borda de 50 por cento. E também vou colocar os itens no centro usando o flexbox Precisamos justificar o centro de conteúdo e alinhar o centro de itens. Assim, é possível ver que os ícones estão perfeitamente posicionados no centro. Em seguida, vou aumentar o tamanho da fonte. Vai ser uma rampa. Então eu vou mudar a cor. Vai ser E. Além disso, crie algum espaço no lado direito , serão nove RAM. Agora é possível ver os ícones. Parece bonito. Vamos seguir em frente e selecionar o ícone, seguido pelo pseudo-elemento depois O continente vai ficar vazio. Então teremos largura. Para RAM. A altura vai ser ponto a rampa. Estamos criando linhas de melodia. Em seguida, teremos a cor de fundo, BBB, e a posição será absoluta Além disso, precisamos que a posição aqui seja relativa ao elemento pai. Depois disso, vamos definir que a primeira posição será de 50 por cento. E também precisamos centralizar a linha usando Transform, Translate Y com o valor -50 por cento Também vamos definir que a posição correta será menos 4M É possível ver que temos aqui linhas no lado direito dos ícones. Em seguida, vamos selecionar o conjunto de informações de contato com 220 RAM. Então precisamos usar o flexbox. A mudança de direção será uma coluna. Nós temos aqui. O texto informativo está alinhado no centro. Em seguida, vou selecionar elementos de extensão. Mude a largura. Vai ser cem por cento. Depois disso, vou selecionar os primeiros elementos de extensão usando o seletor F child especificado aqui Primeiro, mude a família da fonte. Vai ser um curso cautelar. Em seguida, temos que aumentar o tamanho da fonte. Vamos configurá-lo para três RAM. Altere a espessura da fonte. Vou colocá-lo em negrito. A cor vai ser branca. Além disso, vou criar um fundo especial usando 0.5 RAM na parte inferior da margem para que você possa ver o nome do elemento span no primeiro elemento Parece bom. Vamos prosseguir e selecionar o segundo. Mude aqui, o número, vai ser dois. Nesse caso, o tamanho da fonte será de 1,6 RAM. O peso da fonte será 300. Quanto à cor, vou fazer 777. Então, agora, os dois elementos de extensão parecem muito bons. Vamos seguir em frente e selecionar o lado direito. Estou no contrato, certo? Defina a largura para 60 RAM. A altura também será de 60 RAM. Em seguida, use novamente o Flexbox, seguido pelo centro de justificação do conteúdo e pelo centro de e Tudo bem. Depois disso, vamos prosseguir e selecionar grupos de entrada. Use novamente o display flex. Em seguida, vou selecionar o próprio grupo de entrada. Novamente, display flex. Mude a direção, transforme-a em coluna. Então, passo a passo, os elementos de entrada . Está ficando melhor. Em seguida, precisamos do rótulo do grupo de entrada Altere o tamanho da fonte. Vai ter 1,6 RAM do que precisamos de 300 gramas de peso de fonte. E também crie algum espaço entre as letras. Use isso apenas como base. Em seguida, precisamos transformar o texto em maiúsculas e também mudar a cor, torná-la branca Depois disso, vamos definir a margem para a rampa 001.5 e para a rampa. Então, ele pode ver o rótulo. Parece bom. Em seguida, precisamos de entrada , grupo, elemento I. Estou no ícone Font Awesome, o asterisco. Vamos definir o tamanho da fonte em um ponto para aumentar e alterar a cor Use a cor verde. Certo? Depois disso, vou selecionar a entrada do grupo de entrada, seguida pela Precisamos de alguns blocos CSS semelhantes, digamos oi para seis RAM. Também precisamos que a margem seja 03, rampa, cinco REM e zero Dan, vou mudar a cor de fundo. Será um devido a uma borda definida para apontar para rams solid e 777 Então, agora as entradas estão boas. Em seguida, precisamos do raio da borda para arredondar os cantos, configurá-lo para três rampas, alterar o tamanho da fonte será 1,6 R& do que a espessura da fonte será 300 e mudar a será 300 e mudar a Em seguida, precisamos de algum espaço dentro das entradas. Coloque o preenchimento em uma rampa ou rampa, depois novamente em uma RAM e para ler mandu Depois disso, vou selecionar a entrada em si, definindo a largura para 35 RAM. E então vou selecionar a área de texto. Eu vou mudar sua altura. Vamos fazer uma rampa de 12, também precisamos aqui margem inferior para a RAM E vou desativar a função de redimensionamento. Vamos definir o redimensionamento como nenhum. Ok, então, finalmente, vou personalizar o botão na parte inferior. Então, vamos selecioná-lo. Defina a largura para calcular 100% menos três RAM do que a altura será de cinco rampas Vamos voltar à cor, usar a cor verde. Além disso, precisamos de pontos de borda para rams sólidos e a cor será Bb B. Em seguida, precisamos arredondar os cantos usando o raio da borda O valor será de três RAM. Mude a cor, torne-a branca. E também precisamos aqui transformar o texto em maiúsculas. Em seguida, vamos alterar o tamanho da fonte. Será 1,6 RAM. E também precisamos aqui que o peso da fonte seja 300. Crie algum espaço usando o espaçamento entre letras de ponto a rampa, e precisamos mudar o cursor Vamos deixar isso claro. Tudo bem, então digamos que a seção de contato parece muito boa Vamos passar para a próxima seção. 19. Projeto 2: crie e personalize o rodapé do site: Tudo bem, então, depois da seção de contato, agora temos que seguir em frente e começar a criar a última parte do site, que será um rodapé O rodapé será simples. Vamos continuar e inserir a visualização dos comentários. Então eu vou abrir um rodapé, colocar a classe Footer . Vamos inserir você. Acompanhe os ícones da classe. Vou pegar esses ícones de mídia social daqui. Vamos continuar e colá-los dentro dos ícones. Vou abrir os direitos autorais da classe TikTok . Vamos inserir um parágrafo inseguro com textos de direitos autorais. Precisamos aqui de um sinal de direitos autorais, que é uma entidade HTML5 Em seguida, será seguido pelo texto web. E então precisamos da tag span com o valor surdo. Além disso, vou lhe passar todos os direitos reservados. 2023. Em seguida, vamos abrir dados com a ordem de classe N colocada aqui, Parágrafo feito por elementos de extensão e código e Create. Ok, então isso é tudo sobre a marcação HTML para o rodapé. Vamos começar a escrever um pouco de CSS. Insira aqui, rodapé e um rodapé. Estou nos comentários. Em seguida, vou selecionar Rodapé. Vamos definir com 200 por cento. A altura será de dez rampas. Então, vou colocar o pedregulho no topo com os valores de 0,1 em estado sólido e a cor será 444 Além disso, vou usar o display flex para justificar o espaço do conteúdo uniformemente. E também vou usar alinhar itens ao centro para centralizar os itens flexíveis Ok, depois disso, vamos selecionar os ícones, seguidos pela ilha. Precisamos que aqui o tamanho da fonte seja, para diminuir, a cor será branca Então, vou usar margem, certo? Para correr. E então você tem algum efeito de sombra usando sombra de texto, 0,5 grama por grama Se a cor eu vou usar RGBA, cor preta com menor opacidade E também mudar de rumo fará com que isso aconteça. Ok, então isso é tudo sobre os ícones de mídia social. Em seguida, vou cuidar do texto dos direitos autorais. E também vou selecionar o autor. Defina o tamanho da fonte para 1,6 RAM. Mude de cor, branco. Então você pode ver que o texto ficou branco e maior. Vamos usar direitos autorais, span. Defina a família de fontes como advertência cursiva. Então, vou definir o tamanho da fonte para 2,5. Rima. Altere a espessura da fonte, ela ficará em negrito e também altere a cor Vou usar a cor verde. Em seguida, coloque a margem direita em uma rampa. Tudo bem, então temos aqui um logotipo. Vamos prosseguir e selecionar a extensão do autor. Na verdade, vou copiar esse código daqui. Então, vamos lá, o rodapé está muito bonito e, na verdade, todas as seções estão concluídas Então, como você pode ver, temos aqui um pequeno problema. A navegação está sendo exibida atrás do carrinho. Então, vamos corrigir esse problema usando o índice 150. Ok, então é isso. Tudo parece perfeito. A única coisa que precisei fazer foi tornar o projeto responsivo a diferentes tamanhos de tela. Então, vamos seguir em frente. 20. Projeto 2: torne o projeto responsivo: Tudo bem, então terminamos de criar e personalizar nossas seções do projeto e agora precisamos torná-las responsivas a diferentes Vamos prosseguir e inspecionar a página e mudar para o modo responsivo Precisamos encontrar nosso primeiro ponto de ruptura no qual precisamos fazer algumas mudanças. Então eu acho que o primeiro ponto de interrupção , será de 1.700 pixels Vamos continuar e inserir novos comentários para o modo responsivo. Em seguida, use a consulta de mídia CSS. Vou especificar aqui a largura máxima como 1.700 pixels. Então, a primeira coisa que eles precisam fazer é alterar o tamanho da fonte do elemento HTML. Vamos fazer com que seja 57%. Então, os elementos se tornaram relativamente menores. Em seguida, vou selecionar Navegação e alterar a posição correta. Vai ser menos sete na RAM. Além disso, vou selecionar a borda da seção para a seção Habilidades. Vamos mudar a posição do comprimento, faça com que seja dez RAM. Em seguida, vou selecionar a borda da seção de contato. Vamos mudar a posição esquerda, fazer dez corridas. Então, vamos conferir o projeto. Na verdade, precisamos seguir S porque o código não funcionou Ok, então, a seguir, precisamos encontrar outro ponto de interrupção E eu acho que deveria ter 1.500 pixels. Então, vamos criar uma nova consulta de mídia CSS e especificar aqui a largura máxima, que será de 1.500 Novamente, vou mudar o tamanho da fonte do elemento HTML. Vamos defini-lo para 52%. Em seguida, vou personalizar o nome. Vamos mudar o tamanho da fonte, torná-la com sete RAM. Altere também a largura, vai ser para ser executado. Ok, em seguida, vou selecionar Sobre e alterar a largura. Vamos fazer com que seja 45 RAM. Depois disso, vou selecionar o wrapper de imagem do desenvolvedor. Vamos definir a largura para 40 RAM. Defina também a altura, faça com que ela também tenha 40 RAM. Em seguida, temos que cuidar do trabalho do dapp. Vamos mudar a largura. Vai custar 20 de aluguel pela altura, vou ganhar sete RAM. Então, o preenchimento terá 0,1 RAM nos lados esquerdo e direito Em seguida, precisamos mudar as posições de seu trabalho. Selecione o elemento de extensão. Enésimo filho, um. Mude o tamanho da fonte, vá para a rampa. E a largura será 35. Presente. Ok, agora vou selecionar a guia Experiência e Mudança. A posição inferior será 22 corridas para a posição correta, vou configurá-la para 25 corridas. Em seguida, vou cuidar dos surdos. Projetos. Mudança. A posição inferior será 14 de aluguel. Para a posição correta, vou fazer com que seja menos quatro rampas Tudo bem. Em seguida, vou cuidar do título de fundo. Vamos selecionar o título da Seção BG, alterar o tamanho da fonte. Vai ser 23 R&. Em seguida, vamos cuidar da seção Habilidades. Vou selecionar habilidades e mudar a altura para cem por cento. Além disso, vamos definir o preenchimento para dez RAM e zero, depois 20 RAM e zero Em seguida, vou selecionar os cartões, o invólucro, alterar a largura e fazer com que sejam 100 Tudo bem, agora as cartas estão muito bonitas. Em seguida, vamos selecionar Seção, borda para a seção Habilidades. E eu vou mudar a altura. Vai ter cinco RAM. Agora acho que a borda está muito bonita. Em seguida, vamos seguir em frente e cuidar da seção Projeto. Vamos selecionar cartões de projeto. Quero dizer, o invólucro definiu a largura para 100 Ren. Então, agora está tudo bem. Precisamos cuidar da Seção de Contato. Vamos selecionar Content Content e definir a largura para 110 RAM. Ok, então tudo parece bom. E vamos passar para o próximo ponto de interrupção. Então, o próximo ponto de interrupção será, eu acho, 1.200 pixels Então, vamos prosseguir e criar uma nova consulta de mídia CSS. Defina a largura máxima para 100, desculpe, 1.200 pixels. Altere o tamanho da fonte do elemento HTML. Vou defini-lo para 45%. Em seguida, vou cuidar da ação de Projetos. Então, vamos selecionar Projetos seguidos pela borda da seção. Mudança. A posição correta será de dez RAM. Agora parece bom. Em seguida, temos que cuidar da seção de contato. Selecione Conteúdo do contato, defina a largura para 100 rampa. Também precisamos mudar, justificar o conteúdo. Faça com que seja espaçado uniformemente. Então temos que selecionar Contato, certo? Vamos usar a margem direita, faça com que seja -15 RAM. Além disso, temos que personalizar os grupos de entrada. Vamos mudar a direção, criar coluna. Então. Precisamos selecionar grupos de entrada, seguidos pelas entradas. Mude a largura. Vamos fazer com que seja 60 Ran. Ok, então agora a seção de contato parece boa. E, na verdade, podemos seguir em frente e encontrar o próximo ponto de interrupção, que será de 900 pixels Então, vamos prosseguir e criar uma nova consulta de mídia CSS. Configure a largura máxima para 900 pixels. Precisamos alterar o tamanho da fonte do elemento HTML. Serão 39 por cento. Em seguida, vou selecionar a borda da seção e ocultá-la em todas essas seções. Em seguida, vou selecionar Seção, título de fundo. Altere o tamanho da fonte. Serão 20 R&. Em seguida, vou cuidar da seção de contato. Então, vamos selecionar Conteúdo de contato e alterar a largura para cem rampas. Além disso, vou selecionar Contato, certo? Vamos definir a margem direita, dois menos cinco RAM Portanto, a seção de contato parece boa. E, na verdade, podemos seguir em frente e encontrar o próximo ponto de interrupção, que será de 700 pixels Então, vamos criar uma nova consulta de mídia do Caesars. Altere a largura máxima, serão 700 pixels. Selecione HTML e altere o tamanho da fonte. Agora será de 35%. Em seguida, vou selecionar o título do plano de fundo da seção e alterar o tamanho da fonte. Vamos configurá-lo para 17 RAM. Em seguida, vou selecionar a imagem do desenvolvedor e ocultá-la. Depois disso, vamos selecionar os cartões de habilidades. Quero dizer, o conjunto de embalagens com 260 RAM. Então vou duplicar esse código, transformei as habilidades em Projetos E depois disso, temos que acessar aqui a seção de contato. Então, vamos selecionar Contato à esquerda e ocultá-lo. E também vou selecionar Contact Content e definir sua largura como 70 Ran. Ok, então, no ponto de interrupção, acho que terminamos Agora é hora de encontrar o último ponto de interrupção. Vamos prosseguir e criar uma nova consulta de mídia CSS. Em seguida, vou especificar a largura máxima como 500 pixels. Vamos ver aqui a Navegação. Eu quero estendê-lo na página. Então, vamos definir com 200 por cento e também mudar a posição correta. Serão -100 mil do que precisamos do conteúdo justificado para colocar os itens no centro Ok, depois disso, vou selecionar Banner, definir sua largura para 70% Em seguida, precisamos selecionar o título da seção e usar o centro de alinhamento de texto para alinhar os cabeçalhos no centro das A próxima coisa que você precisa fazer é cuidar da Seção de Contato. Então, vamos seguir em frente e selecionar o conjunto de conteúdo de contato com rampa 255 Também precisamos selecionar o elemento de entrada. Defina a largura para 50. Corra. Ok, então eu acho que tudo parece muito bom. Podemos acrescentar aqui mais uma coisa. Você sabe, parecem cartões fofos e também definem a largura para 55 RAM. Depois disso, vou selecionar os ícones do rodapé e torná-los em altura. Ok, então acho que finalmente terminamos e tudo parece muito bom. O projeto é responsivo. Então eu acho que você gostou desse projeto. Agora podemos seguir em frente e começar a criar o próximo. 21. Projeto 3: visualização: Olá e bem-vindo ao seu próximo projeto, que será um site sobre arquitetura. O projeto consiste em algumas seções diferentes. Então, vamos examinar cada um deles. Começaremos a criar o projeto trabalhando no not poor e no Navigation. Temos aqui o logotipo, a barra de pesquisa e um ícone do menu de hambúrguer Se eu clicar nele, o Navigation and será exibido bem. Se eu passar o mouse sobre os itens de navegação , obteremos aqui esse efeito agradável e legal Após a navegação, criaremos esses banners simples e bonitos , nos quais temos alguns elementos diferentes O banner é seguido por uma seção Sobre, que consiste em duas partes No lado esquerdo, temos alguns elementos de texto e o botão é chamado de lado direito. Consiste em uma moldura e uma imagem. Além disso, temos aqui uma parte bonita e legal na parte inferior da Seção. Na verdade, esses elementos aparecerão em todas as seções. Em seguida, temos a seção Projeto, que inclui cinco cartas com alguns bons efeitos secundários. Depois disso, constitua a Seção de Clientes, que consiste em dois cartões diferentes dos quais tínhamos uma seção de contato e um rodapé simples abaixo O projeto é responsivo a diferentes tamanhos de tela. Se eu inspecionar a página , mude para o modo responsivo e verifique o projeto com quatro tamanhos de tela diferentes Você descobrirá que o projeto é responsivo e tem uma boa aparência em média, com tamanhos de tela diferentes Novamente, os projetos são criados para um tamanho de tela extra grande. Estou dentro. Isso coincide com 1920 pixels de largura e 1080 pixels de altura. Portanto, se você estiver usando um tamanho de tela relativamente menor , durante as aulas, você deve alternar para o modo responsivo e especificar a largura e a altura dessa forma Caso contrário, o projeto não ficará bem em telas pequenas até que seja responsivo Então, por favor, leve isso em consideração. Tudo bem, então isso é tudo sobre o nosso terceiro projeto. Vamos em frente e começar a trabalhar nisso 22. Projeto 3: crie e estilize a navegação - parte 1: Tudo bem, então vamos começar a criar um novo projeto Eu tenho uma pasta aqui. Vamos prosseguir e abri-lo no VS Code. E então precisamos criar ou trabalhar arquivos para HTML, CSS e JavaScript. Precisamos do index.html e depois do style.css. E o próximo será script.js. Em seguida, abra o arquivo index.html e crie um documento HTML básico. Primeiro de tudo, vou mudar o título, vai ser arquitetura. Em seguida, precisamos vincular nossos arquivos. O primeiro será um arquivo CSS. E então vou abrir a tag do script e especificar no atributo fonte o caminho do arquivo JavaScript. Vamos abrir o projeto no navegador e, em seguida, colocar o editor e o navegador lado a lado. Assim mesmo. Tudo bem, vou pegar alguns links diferentes. O primeiro será o Font Awesome CDN, porque vamos usar alguns ícones do Font Awesome em todo o projeto Vamos copiar o link. Em seguida, vou abrir a tag do link no elemento principal e colar aqui o CDN Em seguida, vou visitar o site do Google Fonts porque vamos usar algumas fontes do Google. Vamos prosseguir e pesquisar uma fonte chamada Able. Eu vou selecionar esse bloco. O próximo será nosso primeiro de laboratório. Vamos selecionar o estilo. Em seguida, vou copiar o link e colá-lo de cabeça para baixo. Tudo bem, então estamos prontos para começar a escrever o código. Em primeiro lugar, vou criar uma marcação HTML. Vamos inserir seus comentários para o contêiner. Em seguida, vou abrir a tag DIV com o contêiner do nome da classe, no qual vou inserir comentários para a barra de navegação Em seguida, abra o elemento de navegação HTML5 com o nome da classe navbar, no qual vou inserir uma tag DIV com Agora quatro. Em seguida, vou abrir outra tag DIV com o logotipo da turma Um. Vamos mudar aqui os nomes das classes. Precisamos de um logotipo e um logotipo três. Em seguida, precisamos aqui abranger elementos nos quais vou inserir a arquitetura de texto. Ok, então isso é tudo sobre o logotipo. Em seguida, precisamos criar uma barra de pesquisa. Vamos inserir aqui elementos de entrada com um texto de tipo e com um atributo de espaço reservado O que você está procurando? E também precisamos aqui de um ícone Font Awesome, que será o ícone de pesquisa. Precisamos de classes, fa solid, fa, lupa. Ok, então é isso sobre a primeira parte da navegação. Agora precisamos criar um menu de hambúrguer. Vamos inserir aqui o ícone do Menu, no qual teremos três linhas, linha um, linha dois e camada três. Em seguida, precisamos da tag DIV, que será uma navegação Vou inserir aqui alguns links diferentes. O primeiro vai estar em casa. Em seguida, teremos que o próximo será um projeto. Então teremos o Blog. O próximo será Clientes E para o último item, vou colocar aqui Contato. Ok, então, na verdade, vamos falar sobre a marcação HTML. Agora, vou começar a escrever um pouco de CSS. Em primeiro lugar, vamos instituir comentários sobre os estilos padrão. Em seguida, vou selecionar cada elemento usando um asterisco E vou definir a margem e preencher os dois como zero Em seguida, temos que definir o tamanho da caixa de borda. Além disso, vou mudar a família de fontes. Vamos usar aqui a tabela. Sem serifa. Além disso. Eu vou me livrar da decoração de texto Não será nenhum. E também vou definir um esboço para nenhum. Portanto, os estilos padrão são aplicados aos elementos. Em seguida, vou alterar o tamanho da fonte do elemento HTML. Serão 62,5 por cento porque vamos usar a RAM como unidade de medida Ok, vamos começar a personalizar o contêiner. Insira aqui os comentários e selecione o contêiner. Primeiro de tudo, vou definir a largura. Vai ser 100%. Quanto à altura, vou fazer com que seja 100 de altura da janela de visualização Em seguida, vamos mudar a cor do plano de fundo. Vai ser 202020. É como a cor cinza escuro. Em seguida, vou colocar seus comentários na barra de navegação. Vamos seguir em frente e definir a largura para 100%. Quanto à altura , vai ser. Pode RAM. Além disso, vou mudar a cor de fundo. Vamos usar aqui a mesma cor que usamos para o recipiente. Em seguida, vou definir a posição que será corrigida. A posição superior será zero. A posição de atraso também será zero. E depois disso, vou selecionar o logotipo um. Vamos definir com 26 RAM a altura também será de seis RAM. Vamos definir a borda de 2,4 RAM, sólida. E a cor vai ser H1B, ou seja, a cor amarela Vamos duplicar esse código e alterar o nome da classe. Precisamos do seu logotipo dois, vamos mudar a largura e a altura. Vou configurá-los para cinco RAM. Elimina a borda e altera a cor de fundo. Use aqui, cor cinza escuro. Tudo bem, então agora o logotipo dois não está visível porque temos aqui a mesma cor Vamos definir a posição como absoluta. Na verdade, também vou selecionar marcas e definir a posição como absoluta. Então, precisamos nos posicionar para ser 50%. A posição da sorte será um bonde. E também precisamos centralizar os elementos usando Transform Translate Y -50 por cento. Ok. Vamos voltar ao logotipo para definir a posição como uma RAM, a posição esquerda também será uma RAM. Então, agora o elemento está visível. Em seguida, vou selecionar o logotipo três. A terceira parte do logotipo. Vamos definir a largura como cinco RAM e a altura também será cinco para M. Mude a borda. Será um ponto zero para a RAM, sólido com uma cor amarela. Em seguida, vou mudar a cor do plano de fundo. Vai ser cinza escuro. E agora temos que cuidar da posição. Vai ser absoluto. A posição superior será bater. Essa posição também será para bater. Então, agora o logotipo parece melhor. Vamos definir aqui o display flex. Em seguida, vou selecionar o elemento span e a marca. Vamos mudar o tamanho da fonte. Serão três carneiros. Em seguida, vou mudar a cor. Vamos configurá-lo para branco. Além disso, precisamos de algum espaço entre as letras. Vamos configurá-lo para 0,3 rampa. Então, temos aqui esse elemento pan. Em seguida, vou criar algum espaço, digamos, margem para 1,5 rampa e 0,3 RAM no lado esquerdo Depois disso, vou selecionar a barra de pesquisa. Vamos definir a posição como absoluta. Então, precisamos nos posicionar para ser 50%. A posição correta será de 15 RAM. E também precisamos centralizar o elemento verticalmente usando Transform Translate Y -50 por cento. Ok, então a barra de pesquisa está alinhada no lado direito da barra de navegação Vamos selecionar elementos de entrada. largura refinada em 45 RAM do que a altura será RAM total. Além disso, vou mudar a cor de fundo. Eu vou usar aqui 3341. É uma cor cinza, mas a mais clara. Então precisamos de Border None. E vou usar o preenchimento para criar algum espaço. Vamos configurá-lo para RAM para executar mais de dois REM novamente e fórum no lado esquerdo. Também altere o tamanho da fonte. Será 1,6 RAM. Então eu vou mudar a cor do texto. Vamos configurá-lo para branco. Altere o raio da borda, faça com 0,5 RAM. Então, agora o elemento de entrada parece muito melhor. Em seguida, vou selecionar o atributo de espaço reservado. Vamos definir a cor para C. C, C. Agora, eu tenho que cuidar do ícone Font Awesome. Estou no ícone de pesquisa. Vamos definir a posição como absoluta. Então, precisamos nos posicionar para ser 50%. A posição da sorte será de 1,5 RAM. Além disso, precisamos centralizar os elementos verticalmente usando Transform Translate Y -50 por cento, alterar o tamanho da fonte Será 1,6 RAM. E também vou definir a cor para C. C, C. Tudo bem, então isso é tudo sobre a barra de pesquisa Em seguida, temos que seguir em frente e começar a criar um menu de hambúrguer 23. Projeto 3: crie e estilize a navegação - Parte 2: Tudo bem, então vamos começar a trabalhar no menu de hambúrguer Vou selecionar o ícone Menu. Em primeiro lugar, vou exibir o ícone do Menu. Então, vamos definir a largura para quatro RAM. Precisamos que a altura seja 2,5 RAM do que a cor de fundo. Vai ser CCC. Na verdade, precisamos dessa cor de fundo por alguns motivos temporários. Em seguida, vou para a posição absoluta. Portanto, a posição será de 50%. Então precisamos aqui, posição correta, que será de oito RAM. E também precisamos centralizar o ícone usando Transform Translate Y -50 por cento Em seguida, vou mudar o ponteiro do cursor. Então, temos aqui o ícone do Menu. Na verdade, vamos nos livrar dessa cor de fundo temporária e depois selecionar a linha. A largura será de nível total. Então, precisamos de altura, que será ponto a ponto. Em seguida, vou mudar a cor de fundo para CCC Então, no momento, as linhas não estão visíveis. Vamos verificar o arquivo HTML. Na verdade, precisamos que você adicione uma linha de classe separada. Então, agora as linhas devem estar visíveis. Ainda assim. Temos aqui algum problema. Sim, precisamos aqui da tag DIV e não da linha tog. Desculpe pelo erro. Agora, você pode ver aqui as linhas. Vamos prosseguir e alinhá-los separadamente. Para isso, vou usar o flexbox. Precisamos de display flex. Então temos que mudar a direção. Vai ser uma coluna. E precisamos criar algum espaço entre as linhas usando justificar o espaço entre elas Então agora temos aqui o ícone do Menu com três linhas diferentes. Ok? Depois disso, vou cuidar da navegação em si. Vamos definir a largura. Vai ser cem por cento. Em seguida, temos que definir a altura, que será 100, altura da janela de visualização Em seguida, vou mudar a cor do plano de fundo. Nesse caso, vou usar 0 B, 0 B, um porque é como a cor azul escuro. Em seguida, vou sentar. A posição será absoluta. As posições superior e esquerda, ambas devem ser zero. Em seguida, vou cuidar dos itens de navegação. Eles devem ser colocados no centro. Então, a partir disso, vamos usar o flexbox para centralizar os itens Primeiro, precisamos flexionar a coluna de direção e, em seguida, justificar o centro de conteúdo e também alinhar o centro também alinhar Então, aqui temos os itens alinhados verticalmente no centro Em seguida, vamos selecionar itens de navegação. Quero dizer, o elemento link definiu a família de fontes em dois laboratórios alfa, um, mais grosseiros do que aumentar o tamanho da Serão cinco RAM. Bem, então eu vou mudar a cor. Vamos configurá-lo para branco. Em seguida, vou criar algum espaço entre as letras. Vamos configurá-lo para 0,3 RAM. Também precisamos de uma margem aqui na parte inferior. Vamos configurá-lo para 1 g. Então, como você pode ver, os itens de navegação parecem muito bons. Em seguida, vou selecionar antes do pseudo elemento. Vamos definir o conteúdo como vazio. Então eu vou definir uma largura. Será 15 RAM do que a altura será 0,5 RAM. Mude a cor do plano de fundo. Vou usar a cor amarela aqui para definir a posição para a posição absoluta que será de 50 por cento. Agora, a posição esquerda deve ser -17 rampa. E também precisamos transformar, traduzir Y -50 por cento para centralizar os elementos verticalmente. No para centralizar os elementos verticalmente momento, o pseudo-elemento anterior não é viável porque precisamos definir a posição como relativa para os elementos pais, neste caso, o neste caso Então, podemos ver que temos aqui agora as linhas no lado esquerdo dos itens. Precisamos da mesma coisa no lado direito. Para isso, vou usar pseudoelementos posteriores. Só precisamos mudar a posição. Precisamos aqui, da posição correta. Então agora temos linhas em ambos os lados. Essas linhas serão usadas para o efeito de foco. Então, primeiro de tudo, precisamos ocultá-los usando Transform Scale. Deve ser zero, então as linhas ficam ocultas. Em seguida, vou selecionar o link de navegação seguido de passar o mouse E também precisamos aqui antes do pseudo elemento. Então, ao passar o mouse, precisamos aumentar a escala e configurá-la com seu valor padrão, que é um Vamos usar a transição para um efeito suave. Como você pode ver, depois de passar o mouse sobre o item e a linha aparecer, precisamos exibir a linha do lado direito Então, para isso, temos que mudar a origem da transformação. Por padrão, ele está definido como centralizado. E agora precisamos, certo. Agora, a linha aparece do lado direito. Também precisamos da mesma coisa para o pseudo-elemento after. Então, vamos copiar essa alteração de código aqui antes e depois. E também precisamos aqui transformar origem e transição. Neste caso, restará transformar a origem. Além disso, a transmissão de que precisamos é a mesma. Portanto, se passarmos o mouse sobre os itens de navegação , teremos esse efeito agradável e interessante Tudo bem, então a próxima coisa que você precisa fazer é exibir o ícone do Menu porque ele está oculto no momento Então, vamos usar a propriedade index. Agora vemos aqui o ícone do Menu. E agora é hora de escrever um pouco de JavaScript para fazer a navegação funcionar, vou criar uma variável, vamos chamá-la de ícone de menu selecionado usando o método de seleção de consulta. Precisamos especificar aqui o nome da classe, que será o ícone do Menu. Vamos duplicar esse código. Precisamos da segunda variável, que será selecionada na barra de navegação Aqui o nome da classe navbar. Em seguida, adicionarei o ouvinte de eventos ao ícone do Menu com um evento de clique E também precisamos colocar aqui uma função de seta, que será uma função de retorno de chamada Então, vou adicionar ao Napa um nome de classe com o método toggle Esse nome de classe será, digamos, mudança. Depois disso, temos que ocultar a navegação. Vamos configurar para posicionar duas portas de visualização com -100 de altura. E então precisamos selecionar Navegação com um nome de classe de alteração. Temos que voltar a colocar a posição em zero. Vamos usar o efeito de transição. Nós precisamos aqui também. E a duração será de 0,3 s. Então, se clicarmos no ícone Menu, nada acontecerá. Então, vamos inspecionar a página. Não temos aqui nenhum erro. Vamos verificar o HTML5. Temos que adicionar aqui o ponto JS porque o nome do arquivo não foi indicado corretamente. Então, agora a navegação funciona bem. E eu tenho aqui um bom efeito. Em seguida, vou esconder os itens de navegação usando a opacidade zero e a visibilidade Em seguida, vou selecionar a mudança de classe com link de navegação que envia a opacidade para zero e a visibilidade para visível Além disso. Vou selecionar o primeiro item de navegação com uma mudança de classe. Digamos que faça a transição para todos os 0,3 s. E então precisamos um tempo de atraso de 0,3 s. Precisamos exibir o item de navegação separadamente com um tempo de atraso diferente, o que criará um efeito muito bom. Então, vamos mudar o tempo de atraso. Precisamos de 0,4 s, depois 0,5 s para o terceiro item. Então, o próximo será 0,6 s. Então, para o quinto item, precisamos de 0,7 s. E para o último item, será 0,8 s. Então, vamos verificar os resultados. E como você pode ver, temos aqui um efeito muito bom e legal. Tudo bem, agora precisamos cuidar do ícone do Menu. Estou nas filas. Vamos selecionar Alterar com a linha um. Vamos começar com dois 55%. E também precisamos aqui Transformar, Girar na direção Z -15 graus E também temos que mover a linha um usando translação menos zero pontos para RAM e 0,8 rampa Vamos duplicar esse código. Use sua linha três. Nesse caso, precisamos eliminar o meu sinal da função de rotação E também precisamos aqui de -0,8 RAM. Além disso, vamos usar a transição para efeitos suaves. Vamos conferir o resultado. Então, como você pode ver, temos aqui um efeito agradável e legal. O ícone Menu se transforma em uma seta. Tudo bem, então isso é tudo sobre a navegação. Vamos seguir em frente e começar a criar a próxima parte do site 24. Projeto 3: crie e estilize o cabeçalho do site: Tudo bem, então, quando terminarmos com a navegação, agora é hora de seguir em frente e começar a criar a próxima seção do nosso projeto Vamos continuar e inserir comentários. Para aterrissar. Vamos criar um cabeçalho do site que é uma tag de seção aberta com a classe Landing Vou inserir a tag U DIV com a classe Landing image, na qual vamos colocar o elemento de imagem Vou selecionar a imagem da pasta de imagens e será Landing BG. Tudo bem, em seguida, precisamos de Banner no qual vou inserir elementos de cabeçalho H1 com o nome da classe Banner heading elementos de cabeçalho H1 com o nome da classe O texto estará dentro do elemento span. Casa dos sonhos. Em seguida, vou inserir aqui a tag DIV com o nome da classe, conteúdo do banner no qual teremos um conteúdo do banner no qual teremos parágrafo com algum texto fictício Além disso, vou instituir Bateson. Leia mais. Ok, então isso é tudo sobre a marcação HTML. Vamos começar a personalizar essa seção. Vou inserir seus comentários, Landing e of Landing. Em seguida, vamos selecionar Imagem de destino e definir a largura para 92% Em seguida, precisamos de altura. Será 70, altura da janela de visualização. Em seguida, precisamos selecionar a imagem em si. Vamos definir uma largura como 100%. De acordo com a altura, a altura também será de 100%. E também precisamos que seu objeto seja adequado para ser carbono. Tudo bem, então temos aqui a imagem. Próximo. Vou selecionar o elemento da seção e definir sua largura. Vai ser 100%. Vamos seguir a altura. Vou configurá-lo para 90 de altura da janela de visualização. Em seguida, vou definir a posição do invólucro da imagem como absoluta E também precisamos aqui da posição relativa ao elemento de seção, que é um elemento pai. Em seguida, vamos definir que a primeira posição será 11 corridas. Quanto à posição esquerda, precisamos aqui de 50 por cento. E também precisamos centralizar a imagem usando Transform, Translate X -50% Tudo bem? Em seguida, precisamos diminuir a opacidade da imagem Depois disso, vamos prosseguir e selecionar Banner. Vou definir sua posição como absoluta. Então, precisamos que a posição inferior aqui seja 15 RAM. Quanto ao laboratório, a posição será de 20 rampa. Assim, pode-se ver que o banner está posicionado abaixo. Em seguida, vou selecionar os elementos do título. Vamos definir o tamanho da fonte para nove. Carneiro. A cor vai ser branca. Em seguida, vou selecionar os elementos de extensão dentro do título. Vamos mudar a família de fontes. Nesse caso, vou usar um telefone chamado Alpha flap one cursive E também vou mudar. O tamanho da fonte será de oito RAM a cor será amarela. Então, vou criar algum espaço entre as letras. Então, agora o título parece muito bom. Em seguida, vamos selecionar Conteúdo do banner. Precisamos aqui do Flexbox. E também precisamos alinhar os itens no centro. Em seguida, vou selecionar o conteúdo do banner seguido pelo parágrafo Vamos definir a largura para 45 RAM. E o tamanho da fonte será em RAM. Além disso, vou mudar a cor que está aqui. Colarinho branco. Crie algum espaço no lado direito usando a margem direita para aumentar a rampa Então, o parágrafo parece bom. Agora temos que cuidar do botão. Vamos definir que a largura será 15 R&. Em seguida, precisamos aqui de altura, que seria de cinco mil. Eu vou mudar a cor de fundo. Vamos configurá-lo como transparente. Além disso, precisamos que a borda tenha 0,3 rampa sólida e a cor será clara Em seguida, vamos cuidar da cor. Vai ser branco. Então, vou aumentar o tamanho da fonte. Vamos configurá-lo para 1,6 RAM para que a espessura da fonte fique em negrito. E também em querer mudar o cursor. Vamos deixar isso claro. Tudo bem, então vamos ver o dobro do cabeçalho do site Parece bom. Portanto, podemos seguir em frente e trabalhar na próxima seção. 25. Projeto 3: seção de construção sobre: Tudo bem, então terminamos com o cabeçalho do site e agora é hora de seguir em frente e começar a trabalhar na próxima seção do projeto Portanto, a próxima seção será Sobre a seção. Vamos inserir seus comentários na seção Sobre. E então, como sempre, vamos abrir a tag da seção com a turma sobre. Vou colocar a tag U DIV About left, na qual precisamos do elemento de cabeçalho H1 Com um texto. empresa de design de edifícios criativos. O elemento do título será seguido pelo parágrafo com algum texto fictício Em seguida, após o parágrafo, precisamos do botão aqui. Com o texto, leia mais. Depois disso, vou criar o lado direito no qual teremos a moldura. E também teremos seu invólucro de imagem no qual eu vou inserir sua própria imagem. Vamos selecionar a imagem na pasta de imagens. Será About dot JPG. Em seguida, precisamos usar a tag U DIV com uma experiência de nome de classe. E também precisamos de outra classe, Seção inferior. Insira seu elemento de cabeçalho H1, 20 anos. E então precisamos do elemento de cabeçalho h3 com a experiência de texto funcionando Ok, então é isso. Todos os elementos foram criados e agora temos que personalizar esta seção. Na verdade, vou alterar a altura do contêiner para 100% e não a altura de 100 janelas de visualização Agora vamos inserir seus comentários, provavelmente sobre a seção. Então. Antes de tudo, vou cuidar da imagem. É muito grande agora. Então, vamos definir com 250 RAM e a altura será RAM certificada para o invólucro da imagem Em seguida, vou selecionar a imagem em si. Vamos definir dentro da altura, a largura será 100%. Para a altura, também será 100%. E também precisamos ajustar a imagem usando a capa de alimentação de objetos. Ok, então agora temos um resultado muito melhor. Agora vou cuidar do elemento da seção. Vamos definir com 200 por cento. A altura será 75 de altura da janela de visualização. Então eu vou mudar a cor de fundo. Vai ser 313133. É uma cor cinza, mais clara. Então eu vou usar o Flexbox. Vamos alinhar os itens no centro. E também vou usar você para justificar conteúdo com valores que compensam Portanto, os lados esquerdo e direito estão bem alinhados. Em seguida, vou selecionar Sobre o elemento de cabeçalho H1 esquerdo. Vamos definir o tamanho da fonte para cinco REM e a cor será branca. Além disso, vou mudar a largura, vai ser de 50 corridas. Então precisamos de algum espaço na parte inferior. Serão seis RAM. Na verdade. Não precisamos deste ano. Em seguida, vou selecionar o parágrafo. Vamos definir o tamanho da fonte dois como RAM. Também mude a cor. A cor vai ser branca. Precisamos que a largura seja de 50 RAM. E também precisamos que a margem inferior seja cinco primos. Ok, a seguir, vamos cuidar do Bateson. Vou configurar com 218 RAM precisamos que a altura seja cinco RAM Além disso, vou definir a cor de fundo transparente, pois precisamos do ponto de borda para ficar sólido. E a cor será Tba oito 1-p Quero dizer, a cor amarela. Em seguida, vou definir a cor para novamente, amarelo. Portanto, precisamos que o local tenha 1,8 RAM. Precisamos de algum espaço entre as letras. Vamos configurá-lo para 0,1 de execução. E também precisamos que Caruso esteja certo. Ok, então o botão parece muito bom. E, na verdade, com o lado esquerdo, terminamos. Vamos seguir em frente e cuidar da moldura que é colocada no lado direito. Vamos configurar com 250 RAM. Então, precisamos que a altura seja de 35 quadros. Então, vou usar borda, que serão três sólidos REM com a cor 555 Vamos definir a posição como absoluta. Em seguida, precisamos nos posicionar para ter 15 RAM. Quanto à posição correta, vou configurá-la para 40 RAM. Na verdade, precisamos de uma posição relativa para o elemento pai. É por isso que não vemos aqui a moldura. Então, agora aqui está. Vou definir a posição do invólucro da imagem como absoluta, pois duas posições serão um dram A posição correta será de 33 RAM. Então, agora temos resultados muito bons. Em seguida, vou cuidar da parte inferior da Seção. Vamos definir a posição como absoluta. Precisamos que aqui a posição inferior seja, para a RAM. Então, a posição correta será 33 rampa. E também precisamos que você defina que a altura será 12. Rahm. Em seguida, precisamos de borda no lado direito. Vamos configurá-lo como um sólido de RAM e a cor será amarela. Então, aqui temos a borda no lado direito. Vamos alinhar o texto para escrever. E também precisamos de algum espaço no lado direito usando o preenchimento, certo? Para correr. Tudo bem, agora temos dois estilos de cabeçalhos Vamos começar com os elementos do cabeçalho H1. Vou definir a família de fontes como Alpha slab one. O tamanho da fonte cursiva será 61. Em seguida, vou mudar a cor. Vamos usar seu 555 também, precisamos de espaço entre as letras Digamos que 2,5 funcionaram. O primeiro título. Parece muito bom. Em seguida, vou selecionar o segundo título, que é H três. Vou definir o tamanho da fonte para 2,5 primos. Então a cor vai ser branca. Então, agora a parte inferior da seção parece muito boa. Temos aqui um pequeno problema. Temos que exibir a Navegação. Para isso. Temos que usar a propriedade do índice com o valor 100. Ok, então é isso. Tudo parece bom. Podemos seguir em frente e começar a trabalhar na próxima seção. 26. Projeto 3: crie e personalize projetos: Tudo bem, agora é hora de seguir em frente e começar a criar nossa próxima seção deste projeto A próxima seção é sobre projetos. Então, vou inserir novos comentários para os novos projetos da Seção e dos projetos. E então eu vou abrir a tag de seção com o nome de uma classe de projetos. Dentro desta seção, vou colocar o elemento de cabeçalho H1 com o nome da classe Projetos Vamos instituir os projetos mais recentes. Em seguida, vou abrir a tag DIV com os cartões de classe nos quais vou colocar a chamada O cartão incluirá uma imagem. Vamos selecionar a imagem na pasta de imagens. Além disso, vou abrir outra tag DIV com o nome da classe chamada content, na qual teremos elementos de cabeçalho H1 com um texto A casa dos seus sonhos está aqui. Próximo. Teremos aqui um parágrafo com um texto fictício Então é isso sobre o cartão. Vou duplicar esse elemento algumas vezes e mudar as imagens No geral, teremos cinco cartas diferentes. Tudo bem, então depois disso, vou abrir a tag DIV com os designs da classe E então a seção inferior. Nós já usamos isso. Na última seção. Vamos abrir a tag de cabeçalho H1 com os textos. Incrível. Então, precisamos da tag de cabeçalho h3 com designs de texto Então, aqui temos a marcação HTML. Vamos começar a escrever um pouco de CSS. Vou inserir novos comentários para a seção de projetos. Então eu vou cuidar do cartão. Vamos definir a largura para 32 RAM. Em seguida, vou definir a altura como 50 RAM. Em seguida, vou selecionar a imagem e definir sua largura. Vai ser 100%. Vamos colocar que a altura também será de 100%. E também precisamos ajustar a imagem usando a capa de objetos. Então agora temos aqui imagens relativamente menores. E também temos aqui a seção inferior, designs incríveis. Então, vou colocá-lo abaixo. Vamos selecionar o elemento Seção e definir sua largura em 200%. A altura será de uma centena de altura da janela de visualização. Além disso, vou definir a posição como relativa. Então, agora o elemento inferior da seção é colocado abaixo. Em seguida, vou selecionar projetos que tenham, vamos definir seu tamanho de fonte como um bonde Então eu vou mudar a cor. Vai ser branco. Vou criar um espaço entre as letras. Vamos configurá-lo para apontar para a rampa. Em seguida, vou criar algum espaço usando margem com valores de RAM repentina, 010 RAM e nove RAM Então, aqui temos o título. Depois disso, vamos selecionar os cartões. Quero dizer, o invólucro definiu a largura para 90%. Então, precisamos de margem automática para colocar o elemento no centro. Então precisamos do Flexbox. Assim, é possível ver que as cartas estão bem colocadas na horizontal. Vamos criar um espaço no lado direito de cada cartão usando Margie, certo? 2,5 RAM. E também precisamos que o cursor seja ponteiro. Portanto, temos aqui um resultado muito melhor e melhor. Em seguida, vou selecionar o conteúdo do carrinho. Vamos definir com 200%. Além disso, a altura também será de cem por cento. Então, precisamos estar posicionados para sermos absolutos. Além disso, precisamos da posição relativa para o elemento pai, que neste caso é chamado. Em seguida, vou definir a posição superior para zero. A posição esquerda também será zero. Aqui temos o conteúdo do cartão. Vamos mudar a cor de fundo. Vou usar sua cor RGBA. Estou na cor preta com uma opacidade mais baixa, 0,9. Em seguida, vou selecionar o elemento de cabeçalho H1 no conteúdo do carrinho Vamos definir o tamanho da fonte para RAM, então a cor será branca. Então, vou definir a posição como absoluta. Eles assumiram a posição de que estará cheia de RAM. Quanto à posição de liderança, também vou configurá-la para 4M Mude com 15 corridas. Então, aqui temos o elemento de cabeçalho H1. Em seguida, precisamos selecionar o parágrafo do conteúdo do código. Vamos definir que o tamanho da fonte será 1,6 de execução. A cor será branca. E também vou definir que a posição será absoluta e precisamos posicionar para ter 13 RAM. Quanto à posição esquerda, vou usar para RAM, a largura será 17 rampa. Tudo bem. Então, o parágrafo do título ou Personalizar. Em seguida, vou selecionar o conteúdo chamado com pseudoelementos anteriores Vamos definir o conteúdo como vazio. Em seguida, vou definir a largura. Serão 92%. Então precisamos de altura. Vai ter 0,1 RAM. Além disso, precisamos mudar a cor de fundo que vou usar aqui e a cor amarela. Vamos definir a posição como absoluta. Precisamos que a posição Let seja zero. Achei que a posição tomada seria para a RAM. Então, aqui temos antes dos pseudoelementos. Em seguida, precisamos criar outra linha usando pseudoelementos posteriores Nesse caso, teremos uma linha vertical. Vamos mudar a largura. Vai ter 0,1 RAM até a altura. Vou configurá-lo para 94%. A posição esquerda será de dois REM. Vamos colocar as duas posições que precisamos aqui, zero. Então, aqui temos agora a segunda linha vertical. Agora vou criar um efeito de foco. Depois de passar o mouse sobre o cartão, precisamos exibir o conteúdo do cartão Na verdade, vamos colocar a cor de fundo aqui. Em seguida, vou usar a cor de fundo de transição com uma duração de 0,6 s. Então, agora, quando passarmos o mouse sobre o cartão, ele mudará a cor de fundo Em seguida, vou para Hyde nas duas linhas usando a transformação. Escala. O valor deve ser zero e, em seguida, temos que usar mouse seguido pelo anterior Pseudoelementos. Precisamos mudar a escala. E você vê aqui o valor padrão um. Portanto, precisamos fazer a transição para obter um efeito suave. Então, agora, quando passarmos o mouse sobre a linha de corte, será exibida. Na verdade, precisamos mudar a origem da transformação porque precisamos exibir a linha do lado esquerdo. Então agora temos um resultado muito melhor. E agora precisamos da mesma coisa para a segunda linha. Quero dizer, o pseudo-elemento depois, vamos usar o mouse aqui, mudar o pseudo-elemento que precisamos E também precisamos transformar a origem em topo e fazer a transição com uma transformação. Tudo bem, agora temos aqui um bom efeito de foco. Em seguida, vou esconder o título e o parágrafo usando opacidade e visibilidade. E uma vez que passamos o mouse sobre o cartão, temos que exibi-lo de volta. Portanto, precisamos aqui de opacidade um e visibilidade visível. Vamos copiar esse código e usá-lo também no parágrafo. Para mudar aqui o seletor aqui P. E também precisamos de transição para ambos os elementos Além disso, também precisamos fazer a transição com mouse e com algum tempo de atraso Ok, agora como você pode ver, temos aqui um fato muito melhor. Na verdade, acho que tudo funciona bem. Só precisamos mudar a posição dos elementos inferiores da seção. Vamos definir a posição correta para 12 rodadas. Tudo bem, então tudo parece bem. E com esta seção, terminamos. Então, vamos seguir em frente. 27. Projeto 3: crie e estilize clientes: Tudo bem, então, quando terminarmos com a seção Projeto, agora é hora de seguir em frente e criar nossa próxima seção, que será uma Seção de Clientes Então, vou colocar comentários que você conhece para a Seção de Clientes. Em seguida, vamos abrir a tag da seção com o nome da classe. Clientes. Vou inserir seu elemento de cabeçalho H1 com um título de classe Clientes Vamos inserir seus clientes como o valor do texto. Em seguida, vou abrir o Tip Check com o nome do cluster Customers content, no qual vou colocar outra doação. E será o cartão do cliente. Então, dentro do cartão, vou inserir a imagem. Vamos prosseguir e selecionar a imagem na pasta de imagens. Vai ser como um tumor. Também terá aqui a tag DIV com o conteúdo do cartão de clientes da classe Dentro desse elemento, vou colocar a tag de cabeçalho H1 com o nome John Smith Em seguida, teremos o título h3 e ele será associado ao co-gerente Em seguida, teremos um ícone Font Awesome. Vai ser FAA, sobrando aspas sólidas. Então precisamos do seu parágrafo com algum texto fictício. Vamos continuar e duplicar o cartão do cliente. Em seguida, vou inserir aqui a tag DIV, que será a parte inferior da seção do cliente Os elementos das seções anteriores. Então, teremos aqui elementos de cabeçalho H1 com os clientes de texto E também precisamos aqui elemento de cabeçalho h3 com o texto dizendo, ok, então é isso Temos aqui a marcação HTML. Na verdade, precisamos mudar aqui a imagem. Será o cliente dois. Então, agora a imagem foi alterada. Terminamos com a marcação HTML. Vamos começar a escrever um pouco de CSS. Precisamos aqui de novos comentários para a Seção de Clientes. Em seguida, vou selecionar os elementos da seção, que tem um className Customers Vamos definir a largura. Vai ser 100%. Isso provavelmente é altura. configurá-lo para a altura da janela de visualização E também precisamos mudar a cor de fundo. Nesse caso, vou usar 313133. Então, precisamos de algum espaço na parte superior usando preenchimento, os sete primeiros R& Em seguida, vou selecionar a imagem do cartão do cliente para torná-lo menor. Vamos configurar com 220 RAM. Agora as imagens ficaram menores e agora é mais confortável trabalhar. Portanto, precisamos aqui da posição relativa ao elemento da seção. Como você pode ver, a parte inferior da seção está bem posicionada. Em seguida, vou selecionar o título Clientes. Vamos definir o tamanho da fonte. Serão oito rampas. Então precisamos de cores. Vai ser branco. Além disso, vou criar espaço usando margem com o valor 0010 RAM e, em seguida, nove RAM no lado esquerdo Também crie algum espaço entre as letras. Vamos configurá-lo para apontar para a RAM. Então, aqui temos o título da seção. Em seguida, vou selecionar o conteúdo do cliente . Vamos definir onda. Vai ser 80 por cento. Em seguida, teremos sua linha de margem para centralizar o elemento. Então eu vou usar o flexbox. Precisamos justificar o espaço do conteúdo uniformemente para criar um espaço uniforme entre os itens flexíveis Em seguida, vamos cuidar do conteúdo do cartão do cliente. A largura será de 50 R&. Em seguida, teremos a altura, que será de 22 RAM Em seguida, vou mudar a cor de fundo. Vai ser 777. Além disso, precisamos aqui de raio de borda, 0,5 RAM. Em seguida, teremos algum efeito de sombra com os valores de 0,1 RAM. Então, novamente, uma RAM e a cor RGBA, cor preta com menor opacidade Em seguida, precisamos de algum espaço usando o valor de preenchimento para embrulhar. Ok, então, passo a passo, o cartão fica bonito. Em seguida, vou fazer com que a posição da imagem seja absoluta. Em seguida, vou selecionar o cartão do cliente, que é um elemento principal da imagem. E precisamos aqui da posição relativa. Depois disso, vamos em frente e definamos. A posição será menos cinco primos. E também precisamos aqui da posição correta , será a rampa. Portanto, precisamos aqui que o raio da borda seja 0,5 REM. Em seguida, precisamos de algum efeito de sombra. Os valores serão 0,5 RAM, 0,5 RAM e a cor será RGBA com menor opacidade Tudo bem, então as imagens estão bem alinhadas. Em seguida, vou cuidar dos elementos do cabeçalho H1 do conteúdo do código. O tamanho da fonte será de 2,5 RAM. Então teremos cores. Vai ser branco. Além disso. Vou criar algum espaço na parte inferior. Vamos configurá-lo para uma RAM. Então, os títulos estão bonitos. O próximo elemento a personalizado será o elemento de cabeçalho h3 Vamos mudar o tamanho da fonte. Também custará 1,8 dram. A cor que vou usar C, C, C. E a margem na parte inferior será de três rampas Depois disso, vou cuidar do elemento I, do ícone Font Awesome, ícone Font Awesome citações de Emily, vamos usar o tamanho da fonte dois em RAM A cor também vai ser clara. A margem inferior, precisamos nos livrar dela. Então, os códigos estão bonitos. Agora temos que cuidar do parágrafo. Vamos definir o tamanho da fonte para 1,6 redondo. Tudo bem, então é isso. Isso é tudo sobre a seção de clientes. Parece muito bom. E agora podemos seguir em frente e começar a trabalhar na próxima seção. 28. Projeto 3: crie uma seção de contatos: Tudo bem, então é hora de seguir em frente e criar nossa próxima seção do projeto A próxima seção será uma seção de contato. Então, vamos prosseguir e inserir novos comentários para a seção de conduta. Em seguida, vou abrir a tag da seção com o nome da classe Contato. Dentro do elemento da seção. Vou abrir uma tag profunda, que será Conteúdo de contato. Então precisamos de Contato à esquerda, no lado esquerdo, nesta seção. Vamos abrir o título H1, marcar e instituir. Fique ligado e receba as atualizações mais recentes. Em seguida, precisamos do direito de contato, no qual vou inserir a tag de entrada com um tipo de e-mail e com o valor do atributo placeholder, insira seu endereço de e-mail Em seguida, precisamos do ícone Font Awesome, que será um prato de papel sólido. Ok, então vamos ver. A marcação HTML está pronta. Vamos começar a escrever um pouco de CSS. Vamos inserir seus novos comentários para Contato. Em seguida, vou selecionar Elementos de contato. Quero dizer os elementos desta seção. Essa célula com 200 por cento, a altura será de 25 rampa. Em seguida, precisamos do Flexbox e do justify-content center. Além disso, precisamos alinhar o centro dos itens para centralizar o conteúdo dentro desta seção Em seguida, vou selecionar Conteúdo de contato e vou especificar a largura. Vai ser 80 por cento. Em seguida, precisamos exibir o flex para colocar os itens lado a lado Em seguida, vou usar o espaço justify content, até mesmo para criar um espaço maligno entre os itens flexíveis Em seguida, vamos selecionar o elemento de cabeçalho H1 do Contact Content Portanto, o tamanho da fonte é de três RAM. Em seguida, vou transformar o texto em maiúsculas. Também mude a cor. Vai ser CCC. Aqui temos o elemento de cabeçalho. Vamos seguir em frente e selecionar os elementos de entrada. Vou definir a largura para 45 RAM. Então, a altura será para R&. Além disso, vou mudar a cor de fundo. Vamos configurá-lo como transparente. Em seguida, vou criar espaço dentro da entrada usando preenchimento, 1,5 RAM e depois 1,5 g. Em seguida, precisamos apontar para RAM e zero Depois disso, vou usar borda e vou defini-la como nenhuma. Então precisamos do fundo. Será 0,1 rima sólida e a cor será 777 Então, aqui temos a borda na parte inferior. Em seguida, vamos definir o tamanho da fonte para 1,8 Ran. Além disso, precisamos que sua cor seja CCC. Depois disso, vou selecionar o elemento de entrada seguido pela pseudoclasse de foco Então, uma vez que focamos o elemento de entrada , precisamos mudar a borda, quero dizer a cor da borda, e ela vai ficar amarela. Além disso, precisamos de uma transição aqui para um efeito suave. Tudo bem? Então, quando focarmos o elemento de entrada e a borda na parte inferior, mude sua cor. Em seguida, vou selecionar o atributo de espaço reservado e quero mudar a cor Vamos torná-lo CCC e também usar espaçamento entre letras, 0,1 RAM. Ok? Então isso é tudo sobre o elemento de entrada. Agora, vou tirar você do ícone Font Awesome. Digamos que o tamanho da fonte seja de 1,8 aproximadamente. Então, a posição será absoluta. Vou configurar a posição para 20 por cento. Quanto à posição correta, será zero e também mudará a cor. Faça com que seja C, C, C. Em seguida, vamos mudar o cursor, fazê-lo apontar. Portanto, o ícone não está visível porque esquecemos sua posição em relação ao elemento pai. Então, vamos ver o conflito, certo? E defina a posição para a rota. Ok, então é isso. A seção de contato está bonita, então podemos seguir em frente e cuidar da seção de índice 29. Projeto 3: crie e personalize o rodapé do site: Tudo bem, agora é hora de construir nossa última seção do projeto Vai ser um rodapé. O rodapé será simples. Vamos inserir novos comentários no rodapé. Em seguida, vou abrir a tag de rodapé HTML5, seguida pelo nome da classe Footer seguida pelo nome da classe Vamos abrir a tag DIV com o conteúdo do rodapé da classe na qual vou colocar o logotipo Precisamos falar aqui com as turmas, com a marca e depois com a marca Footer Dentro do desenvolvimento haverá três elementos. Quero dizer logotipo, um, logotipo até o nível três, como se estivesse na Navegação. E também precisamos aqui do elemento span com uma arquitetura de texto. Ok, a seguir, precisamos aqui do parágrafo do texto de direitos autorais com um sinal de direitos autorais. E também com o texto. Todos os direitos reservados. Feito pela codificação Create. Tudo bem, então isso é tudo sobre a marcação HTML do rodapé Vamos prosseguir e estilizar esta seção. Vamos inserir novos comentários no rodapé. Em seguida, vou selecionar o elemento de rodapé. Vamos definir uma largura. Vai ser 100%. Provavelmente há altura. Vou configurá-lo para sete R& Em seguida, precisamos da cor de fundo. Será de 2020 a zero. Além disso, precisamos de borda na parte superior, 0,1 g de sólido. A cor será três, e3, e4, um. Então, aqui temos a borda na parte superior do rodapé. Em seguida, vou selecionar Branch Footer, definir sua posição como absoluta Em seguida, precisamos da posição relativa ao elemento pai, que é o rodapé A posição superior será de 3,5 RAM. Para a posição esquerda, vou configurá-la para 20%. Ok, então aqui temos o logotipo. Vamos selecionar o logotipo 1 do Frankfurter, que terá três RAM Provavelmente são alturas. Também vou configurá-lo para três RAM. Então teremos aqui os pontos de borda em forma de carneiro, sólido, e a cor será amarela. Em seguida, vou duplicar esse código, mudar o nome da classe Vai atingir a largura e a altura vai ser 2,5 RAM. E não precisamos de fronteiras. Vamos mudar a cor do plano de fundo. Vai ser 202020. Além disso, precisamos que uma posição difícil seja de 0,7 rampa. Foi isso que liderou a posição. Também será uma rampa de 0,7. Então, a segunda parte está pronta. Vamos duplicar esse código e alterar o nome da classe. Precisamos aqui de um logotipo três. Na verdade, vamos copiar a borda daqui e colá-la aqui. Em seguida, precisamos mudar as posições superior e esquerda. Vamos configurar os dois para 1,3 RAM. Então, aqui temos o logotipo. Em seguida, vou selecionar o elemento span. Vamos definir o tamanho da fonte como, para executar. No que diz respeito ao topo da margem, será de 0,5 RAM. Então, na verdade, podemos dizer que o logotipo e o lado esquerdo do rodapé estão prontos Vamos prosseguir e cuidar do texto dos direitos autorais. Vou enviar a posição para Absoluta, e a posição superior será de 50%. Precisamos centralizar os elementos usando Transform Translate Y -50 por cento Para a posição certa , serão 20%. Em seguida, precisamos alterar o tamanho da fonte. Vamos fazer com que seja uma moeda seis R&. Também mude a cor. Vamos configurá-lo como CCC. Então é isso. O rodapé já está, está bonito. E, na verdade, podemos dizer que o projeto que concluímos, a única coisa que precisávamos fazer era torná-lo responsivo a diferentes tamanhos de tela 30. Projeto 3: torne o projeto responsivo: Tudo bem, então, depois de construirmos todas as seções do nosso projeto, agora soamos para torná-lo responsivo a diferentes tamanhos de tela Vou inspecionar a página e mudar para o modo responsivo Em seguida, vou inserir seus novos comentários no arquivo CSS para o modo responsivo Então, vamos encontrar o ponto de interrupção no qual precisamos fazer algumas mudanças E então tivemos que usar CSS media query. Então, vamos criá-lo e especificar a largura máxima. Serão 1.700 pixels. A primeira coisa que vou fazer é selecionar Banner e mudar a posição Serão 12 R&. Em seguida, vou selecionar cerca, à direita, quero dizer o lado direito da seção Sobre e definir margem direita como rampa 20 Depois disso, vamos selecionar o quadro e alterar a largura. Vai ter 45 RAM. Além disso, precisamos mudar a altura. Vai ter 30 RAM. Em seguida, vou mudar a posição correta. Vamos configurá-lo para 20 RAM. Então, eu vou mudar a posição da moldura e ela será movida para o lado direito. Em seguida, vamos selecionar Sobre o invólucro da imagem e alterar a largura Vai ter 45 RAM do que a altura será 30 RAM. E também vou mudar a posição correta. Vai custar 13 dólares de aluguel. Então, agora o lado direito parece bom. A próxima coisa que vou fazer é mudar a posição da parte inferior da seção. Portanto, precisamos aqui experimentar e mudar a posição correta. Vamos configurá-lo para 20 rampas. Ok, a seguir, vamos cuidar da seção Projeto. Selecione o elemento Seção e defina a altura em 200 por cento. Em seguida, precisamos selecionar cartas e definir com dois 80%. Além disso, vou embrulhar os itens flexíveis usando embalagem flexível, embrulhe E também precisamos de um centro de conteúdo justificado. A próxima coisa que vou fazer é criar algum espaço na parte inferior usando a parte inferior acolchoada Vamos configurá-lo para 25 rampas Ok, então os cartões estão embrulhados, mas precisamos aqui para criar algum espaço. Para isso. Vou selecionar o cartão em si e definir a margem para 1,5. Ok, então agora tudo parece ótimo. Em seguida, vou cuidar da Seção de Clientes. Vamos eleger o conteúdo dos clientes. Defina a largura para 90%. E também temos que mudar a posição da parte inferior da seção. Vamos definir a posição correta para 20 Ran. Ok? A próxima coisa que vou fazer é selecionar Conteúdo de contato. Vamos mudar a largura para 90%. Além disso, precisamos selecionar a marca Footer e alterar a posição esquerda Serão 16%. E vamos fazer o mesmo com os direitos autorais. Também vamos definir a posição correta para 16%. Ok, então eu acho que tudo parece bem em um ponto de interrupção. Vamos ir em frente e encontrar o próximo. Então eu acho que o próximo ponto de interrupção será de 1.400 pixels Então, vou criar uma nova consulta de mídia CSS. E vou especificar aqui a largura máxima como 1.400 pixels Vou diminuir o tamanho da fonte do elemento HTML. Vamos defini-lo para 55%. Isso tornará todos os elementos relativamente menores. Em seguida, vou selecionar o quadro na seção Sobre. Vamos definir sua largura para 40 RAM. A altura será de 25 RAM. E também precisamos mudar a posição correta. Vamos configurá-lo para 15 RAM. O mesmo vale para a imagem. Eu fiz o invólucro da imagem. Vamos definir a largura para 40 RAM e a altura será 25 cm. E também mudamos a posição correta. E neste caso, a posição correta será um bonde. Ok? Então, no lado direito da seção Sobre, parece bom. Vamos falar com você sobre a experiência. Mudou a posição correta e ajuste-a para 12 rampa. Tudo bem, então tudo parece bem. Vamos prosseguir e encontrar o próximo ponto de interrupção. Então eu acho que o próximo ponto de interrupção deve ser de 1.200 pixels Então, vamos criar uma nova consulta de mídia CSS e definir a largura máxima para 1.200 Vou alterar o tamanho da fonte do elemento HTML novamente, vamos configurá-lo para 49% Então eu vou cuidar da seção Sobre. Então, vamos selecionar o lado esquerdo da seção Sobre. E também precisamos aqui. O parágrafo define a largura como 40 R&. Próximo. Vou cuidar da Seção de Clientes porque os cartões estão muito próximos uns dos outros. Então, vamos selecionar o conteúdo do cliente e definir com 200 por cento. Em seguida, precisamos de clientes e temos que mudar a posição correta, que será de dez rampas. Ok. Depois disso, vamos prosseguir e cuidar da Seção de Contato. Vamos definir a largura do conteúdo de contato em 200%. E também vou cuidar do rodapé. Precisamos mudar a posição da perna. Vamos defini-lo para dez por cento. Também precisa mudar a posição dos direitos autorais. Na verdade, precisamos aqui da posição Luck e não da correta. Precisamos da posição correta para os direitos autorais. Então, vamos defini-lo para dez por cento também. Ok, então eu acho que tudo parece muito bom. Vamos seguir em frente e cuidar do próximo ponto de interrupção. Acho que o próximo ponto de interrupção deve ser de 900 pixels. Vamos continuar e criar uma nova consulta de mídia CSS e especificar a largura máxima como 900 Em primeiro lugar, vou mudar o tamanho da fonte do elemento HTML. Vamos defini-lo para 45 por cento. Em seguida, vou cuidar da barra de pesquisa. Quero dizer o elemento de entrada. Vamos mudar sua largura fazendo 30 rampas. Portanto, não, não temos problemas com a barra de navegação. Em seguida, precisamos cuidar do título do banner em um tamanho de fonte definido para sete rampas Além disso, vou selecionar elementos de extensão no cabeçalho do banner Vamos alterar o tamanho da fonte e também configurá-la para sete rum. Ok, depois disso, vou selecionar o conteúdo independente do parágrafo. Vamos mudar o tamanho da fonte. Vai ter 1,7 rampa, provavelmente com largura. Vou configurá-lo para cinco corridas. Em seguida, temos que cuidar da seção Sobre porque as coisas estão confusas aqui Então, vamos prosseguir e selecionar Sobre à esquerda. Elementos de cabeçalho H1. Altere o tamanho da fonte. Vamos configurá-lo para três corridas. Além disso, vou configurar com 235 RAM. Em seguida, vou selecionar o parágrafo no lado esquerdo Sobre. Vamos mudar o tamanho da fonte. Vai ser uma rampa de 1,7. E também altere a largura. Vou configurá-lo para 35 rampas, como os elementos do cabeçalho. Em seguida, temos que cuidar da moldura. No lado direito. Isso mudou. A largura será de 30 R&. Além disso, temos que mudar a altura 30 para 15 RAM e depois mudar a borda. Quero dizer, a largura da borda , será de 1,5 RAM. Além disso, precisamos mudar a posição correta. Vamos configurá-lo para dez R&. Em seguida, temos que cuidar do invólucro da imagem. Precisamos mudar a largura que ela vai ter. Então, para correr, temos que mudar a altura. Vamos configurá-lo para 15 rampas. E também tenho que cuidar das posições. A posição superior será 12 rampa. E também temos que cuidar da posição correta. Vamos estudar até a rampa sete. Ok, então o lado direito parece bom. Em seguida, precisamos personalizar a experiência. Isso é mudar a posição correta e configurá-la para sete R& Em seguida, temos que cuidar da Seção de Clientes. Então, vamos seguir em frente e selecionar Clientes. O elemento de seção define a altura para 100%. E também precisamos de um estofamento na parte inferior para ter 12 rampas. Em seguida, vou selecionar o conteúdo do cliente e mudar a direção do flexbox São apenas duas colunas. E precisamos aqui alinhar o centro dos itens Então, agora as cartas são colocadas verticalmente umas sobre as outras Vamos criar algum espaço entre eles usando a rampa de margem H. Então, agora, a Seção de Clientes. Parece bom. Temos que levar você para a Seção de Contato. Vamos selecionar Conteúdo de contato. Mude a direção, torne-a coluna como na seção anterior. E também precisamos aqui alinhar os itens, centralizar, selecionar Contatar à esquerda e usar margem na parte inferior São apenas dois para alugar. Ok. Acho que tudo parece bem no ponto de interrupção. Vamos verificar a navegação. Então, agora temos que cuidar do próximo ponto de interrupção. A promulgação é a última. Então, vamos criar um novo, vê essa consulta de mídia definir a largura máxima para 600 pixels. Então, a primeira coisa que preciso fazer é alterar o tamanho da fonte do elemento HTML. Vamos defini-lo para 35 por cento. Então eu vou te levar para Navbar. Vamos selecionar a marca. E vamos selecionar elementos de extensão e a marca agora é ruim e oculta usando display none. Então, temos aqui e apenas o logotipo. Além disso. Temos que cuidar dos itens de navegação. Então, vamos selecionar Navegação, seguido pelo elemento link. Então, tamanho da fonte para três RAM. E também temos que cuidar das linhas. Eles são muito longos. Precisamos de um elemento com antes do pseudo-elemento, e também precisamos de um pseudo-elemento depois Vamos definir a largura para poder correr. Em seguida, vou selecionar antes dos pseudoelementos separadamente Vamos mudar essa posição Vai ser uma rampa -13. E também temos que fazer o mesmo com o pseudo-elemento after. Nesse caso, precisamos posicionar corretamente. Então, agora acho que o problema está resolvido. Em seguida, vamos ver aqui o Banner. Precisa mudar a posição esquerda. Serão cinco RAM e também temos que mudar a posição inferior. Vou configurá-lo para 18 R&. Em seguida, vamos selecionar os elementos do título e alterar o tamanho da fonte, configurá-lo para cinco RAM. Além disso, vou selecionar elementos de extensão dentro do título do banner, essa célula, seu tamanho de fonte dois para R& Tudo bem, em seguida, temos que cuidar da seção Sobre. Então, vamos selecionar os direitos e ocultá-los usando o display. Nenhum. Na verdade. retirar esse elemento do desenvolvimento porque ele estava oculto. Então, em seguida, vou selecionar a seção Sobre e definir sua altura para 100%. E também use o justify-content center. Também precisamos que o preenchimento seja dez RAM 0,25 gramas zero. Tudo bem. Depois disso, vou selecionar o lado esquerdo. Vamos enviar mensagens de texto da companhia aérea no centro. Então mude a margem direita, torne-a zero. Acho que agora a Seção parece muito boa. Vamos tirar você do título da seção do projeto. Então, selecione o título do projeto, altere o tamanho da fonte e faça com que seja seis RAM. Em seguida, vou verificar a seção de clientes. Selecione também o título Clientes e o tamanho da fonte até seis RAM. Tudo bem. Acho que tudo parece bom e nosso projeto responde a todos os tamanhos de tela diferentes Espero que tenham gostado e aprendam algo novo. Vamos seguir em frente e construir nosso próximo projeto. 31. Projeto 4: visualização: Olá e bem-vindo ao nosso próximo projeto. Nesta seção, criaremos um site de designer de interiores. Este campo é muito popular e altamente exigido hoje em dia. Então, acho que esse tipo de site será interessante e útil para você. Vamos seguir em frente e descrever o projeto. Temos aqui um cabeçalho do site que inclui o logotipo, o ícone do menu de hambúrguer e um banner animado Se eu clicar no ícone Menu , a Navegação aparecerá bem. O banner é animado. Como você pode ver, os elementos de texto estão mudando com alguns efeitos de atenuação Em seguida, temos uma seção Sobre que aparece bem com um efeito de desvanecimento Vamos usar esse efeito para cada seção e esse projeto. A seção Sobre consiste em uma imagem e alguns detalhes sobre o designer. Em seguida, temos a seção Serviços, que mostra o que o designer pode oferecer. Depois disso, você pode encontrar os projetos do designer. Estou no portfólio de seus trabalhos. Em seguida, vem a seção de conquistas na qual temos contadores animados E, finalmente, você pode encontrar aqui um rodapé simples e agradável. O projeto é responsivo a diferentes tamanhos de tela. Se eu inspecionar a página, mude para o modo responsivo e, em seguida, verifique o projeto com quatro tamanhos de tela diferentes Você descobrirá que o projeto é responsivo e fica bem em todos os tamanhos de tela diferentes Novamente, todos os projetos e este curso foram criados para um tamanho de tela extra grande. Quero dizer, isso coincide com 1920 pixels de largura e 1080 pixels de altura Portanto, se você estiver usando um tamanho de tela relativamente menor , durante as aulas, você deve alternar para o modo responsivo e especificar a largura e a altura dessa forma Caso contrário, o projeto não ficará bem em telas menores até que seja responsivo Então, por favor, leve isso em consideração. Tudo bem, então isso é tudo sobre o nosso quarto projeto. Vamos seguir em frente e começar a construí-lo 32. Projeto 4: crie e faça a navegação funcionar: Tudo bem, então vamos começar a criar nosso projeto Vou abrir essa pasta no VS Code. E então eu vou criar nossos arquivos de trabalho. Como de costume para HTML, index.html, para CSS e JavaScript. Em seguida, vou abrir o arquivo HTML do ponto de índice e criar um documento HTML básico. Em primeiro lugar, vamos mudar o título. Vai ser um site de designer de interiores. Em seguida, vou vincular o arquivo CSS. Vamos especificar aqui o nome do arquivo e também precisamos da tag de script. O atributo de origem. Precisamos de um script como o nome do arquivo JavaScript. Vamos abrir o Navegador do Projeto. E então vou colocar o navegador e o editor lado a lado Gostar. Então. Para tornar nosso processo de trabalho mais confortável. Tudo bem, agora precisamos de links como ícones Font Awesome Vamos visitar Font Awesome, C, D e J. Sim, e depois pegar o primeiro link aqui. Vou abrir a tag do link no elemento principal e depois colar o CDN para você Além disso, vou usar telefones do Google. Então, vamos visitar o site do Google Fonts. Vou pesquisar uma fonte chamada Railway. Vamos selecionar alguns estilos diferentes. A partir daqui. Em seguida, vou procurar outros telefones chamados can-it Vamos selecionar novamente alguns estilos diferentes. Em seguida, copie o link e cole-o no cabeçalho desejado. Tudo bem, então estamos prontos para começar a escrever a marcação HTML. Vamos inserir seus comentários para o contêiner. Em seguida, vou abrir a tag DIV com o contêiner da classe. Em seguida, precisamos da tag DIV para o retângulo. Ele precisa de duas classes, retângulo e um retângulo também precisamos aqui do retângulo Em seguida, vou inserir comentários para a Navegação. Então, vamos abrir um sumário suficiente com o nome de uma classe Agora quatro, em que teremos outro elemento com o designer do nome da classe. Vamos inserir sua imagem. Vou selecionar a imagem da pasta de imagens. Vai ser designer, o JPEG. Em seguida, precisamos da tag DIV na qual vou inserir span com o nome e Smith E também precisamos de outro elemento de extensão com o designer de interiores de texto. Ok, depois disso, vou criar o ícone Menu no qual vou colocar sua tag DIV com os nomes das classes Linha linha um. Precisamos de três linhas. Então, vamos mudar os nomes das turmas. Vai ser alinhado e mentira três. Em seguida, vou criar a própria Navegação. Vamos ouvir. Agora, à esquerda da imagem, vou selecionar a imagem da pasta de imagens. Será nafta JPG. Em seguida, precisamos criar o lado direito da Navegação, no qual eu vou inserir sua faixa dada com o nome da classe X BTN. Será o X encerrando o Batson. Sinceridade, sua tag DIV com as classes XS linha, X, linha um, e precisamos então X linha dois Tudo bem, vamos ver sobre o botão X. Em seguida, precisamos aqui de elementos de cabeçalho H1 com um texto e Smith Depois disso, vou inserir a tag DIV com uma classe nap least, que incluirá itens de navegação O primeiro link será a página inicial. Então, vou duplicar esse elemento algumas vezes. A segunda será sobre, então teremos Serviços. Em seguida, vou inserir seu portfólio. Então teremos o Blog. E, finalmente, vou interferir, entre em contato com tudo bem, então vamos ver A marcação HTML é criada. Em seguida, vou cuidar do CSS. Vamos abrir o arquivo CSS e inserir novos comentários para os estilos padrão. Vou selecionar cada elemento usando um asterisco. Em primeiro lugar, vamos definir a margem e preencher ambas como zero Em seguida, vou definir o tamanho da caixa de borda. Além disso. Precisamos aqui que a decoração de texto não seja nenhuma. Encontrado. O esboço também será conhecido. Além disso, vou mudar a família de fontes para cada elemento. Vai ser Railway Sensory. Tudo bem? Além disso, vou mudar o tamanho da fonte HTML porque vamos usar a RAM como unidade de medida. Precisamos que uma linha seja igual a dez RAM. Portanto, o elemento HTML deve ter um tamanho de fonte de 62,5 por cento Em seguida, vou criar comentários auditivos para o contêiner. Vamos inserir comentários, pausar a navegação. Em seguida, vou selecionar Navegação. Vamos definir a exibição como nenhuma. Eu vou esconder isso por um tempo. Tudo bem. Depois disso, vou selecionar o contêiner. Vamos definir sua largura. Vai ser 100% do que a altura. Terá 100 pontos de altura da janela de visualização. Eu vou mudar a cor de fundo. Vamos usar cores. Um, dois, um, dois Em seguida, vou selecionar retângulo. Vamos definir sua largura. Vai ter 70 RAM. Também precisamos da altura aqui , vai ser 40 RAM. Em seguida, vou definir a borda 2.1 RAM sólida. E a cor vai ser RGBA para cinco a cinco a cinco É uma cor branca com uma opacidade mais baixa, 0,1. Em seguida, vamos definir a posição como fixa. Então, temos aqui o retângulo, precisamos mudar sua posição Mas agora vou selecionar o retângulo um. Vamos definir a posição e fazer com que seja 48 por cento. A posição esquerda será de -21%. Agora. Então, precisamos aqui transformar, girar com a direção z e o valor será 20 graus Em seguida, precisamos posicionar em relação ao contêiner. Então, aqui temos o primeiro retângulo. Em seguida, vou tirar você da ferramenta retangular. Vamos definir que a posição será menos oito RAM do que precisamos da posição correta Vamos configurá-lo para menos dez RAM. E também pegue a propriedade de transformação. O valor será de 60 graus. Tudo bem? Então, aqui temos o segundo retângulo Na verdade, vou mudar a posição do retângulo para a posição dupla que será 8% E precisamos aqui da posição correta menos dez por cento em vez de RAM, certo? Então, em seguida, vamos selecionar a imagem do designer. E com sua largura de seis RAM, a altura também será de seis Roma. E também precisamos aqui dos pés do objeto para caber na imagem. Além disso, vou mudar o raio da borda. Vai ser 50 por cento. Então, aqui temos a imagem do designer. Em seguida, vamos selecionar a barra de navegação. Defina a posição como absoluta. Então, para posicionar, será zero, a posição esquerda também será zero. E precisamos definir a largura como 100%. E a altura será de dez RAM. Então eu vou seguir em frente e selecionar o designer. Vamos definir a posição como absoluta. Segundo, a posição será bater , supostamente na posição esquerda Vou configurá-lo para um terço da RAM. Então, precisamos aqui do flexbox para alinhar os elementos. Vamos usar itens de alinhamento, centro. Ok, então aqui temos a imagem e os elementos de extensão. Vamos selecionar elementos profundos dentro do designer. Então, vou usar novamente o Flexbox Então, precisamos aqui para mudar de direção Vai ser uma coluna. Além disso. Vou alinhar o texto no centro Em seguida, precisamos de algum espaço no lado esquerdo. Vamos configurá-lo como, para ser executado. Então, aqui temos esses parlamentos. Agora, na verdade, podemos personalizar cada um desses elementos da panela. Vamos seguir em frente e selecionar o seno ou a extensão. O primeiro elemento de extensão usando o enésimo seletor de filhos. Portanto, o tamanho da fonte será de 1,8 RAM. Então, precisamos aqui da espessura da fonte, ela vai ficar em negrito. Vamos definir o texto, transformá-lo em maiúsculas e mudar a cor Vai ser branco. Em seguida, precisamos de algum espaço entre as letras usando o espaçamento entre letras ponto a rampa Então, aqui temos o nome do designer, o primeiro elemento de extensão. Vamos continuar e duplicar esse código. Altere o seletor de crianças que precisamos aqui também. Eu vou mudar o tamanho da fonte. Vamos defini-lo como um ponto para a RAM. E também mudar a cor será 999. Vamos conferir os resultados. Portanto, temos aqui o segundo elemento de extensão. Depois disso, vou cuidar do ícone do Menu, que será colocado no lado direito. Vamos definir a posição como absoluta. Então, a posição será de três RAM. Precisamos da posição correta. Vai ser assim com a RAM. E também defina a largura. Vamos fazer com que sejam cinco RAM. Então. A altura será de três RAM. E também precisamos aqui de uma cor de fundo temporária. Vamos usar o CCC. Então, aqui temos o ícone do Menu no lado direito da Navegação. Vamos seguir em frente e selecionar a linha. Vamos definir sua largura para 100%. A altura vai apontar para a RAM. Além disso, precisamos que a cor de fundo seja branca. Vamos eliminar essas cores de fundo temporárias do ícone Menu. Então aqui temos as linhas, agora precisamos alinhá-las. E para isso, vou usar o flexbox. Precisamos de display flex. Então precisamos mudar a direção. Vai ser uma coluna. E também precisamos de algum espaço entre as linhas usando o justify content space uniformemente Então, aqui temos o ícone do Menu, que agora está bonito. Vamos mudar o cursor. Faça com que seja um ponteiro. Então, em seguida, vou selecionar o ícone Menu com o mouse Vamos definir a transformação em escala. Por quê? 1,4? Também precisamos fazer a transição para um efeito suave. Depois de passar o mouse sobre o ícone do Menu , esse K aumentará aqui Efeito agradável e legal. Ok, vamos nos livrar de exibi-los na Navegação porque vamos fazer com que funcione Em primeiro lugar, vou cuidar da navegação à esquerda. Vamos definir a largura para 30%. Então, precisamos que a altura seja 100%. Vamos prosseguir e selecionar a imagem à esquerda do nafta, porque agora a imagem está muito maior Vamos definir a largura para 100%. Altura. Também será 100%. Novamente, precisamos aqui de pés de objeto com a tampa de valor. Então, aqui temos a imagem que é colocada no lado esquerdo da Navegação. Vamos definir a largura para a navegação. Vai ser 100%. Então, a altura será de 100 de altura da janela de visualização. Também precisamos aqui da cor de fundo, a cor preta escura. Em seguida, vou definir a posição como fixa. A posição superior será zero e a posição esquerda também será zero. Tudo bem, então vamos ver. A imagem está bonita. Vamos usar o display flex. Então, aqui temos a Navegação, pelo menos. Em seguida, vou diminuir um pouco a opacidade. Vamos definir 0,5 para a imagem. Depois disso, vou selecionar o lado direito. Vamos definir a largura para 70% do que a altura será 100% Depois disso, vou cuidar do botão de fechamento X. Vamos definir sua largura para quatro RAM a altura também será REM total. Então, quando você ouve a cor de fundo, quero dizer a cor de fundo temporária, então vou definir a posição para fixar. A posição da ponta será de cinco RAM. Quanto à posição correta, também vou configurá-la para cinco para ele. Além disso, vamos mudar o curso a partir de um bom ponto. Então, aqui temos o botão de fechamento X. Vamos nos livrar dessa cor de fundo temporária e cuidar das linhas para criar o seno X. Então, vamos definir com dois para RAM. A altura será ponto a rampa e a cor de fundo será branca Então, aqui temos as linhas e agora precisamos transformá-las e transformá-las em X. Então, vou selecionar a primeira linha que usa Transformar Gire a direção Z como o valor que vou colocar em seus -45 graus Então, a primeira linha é girada. Vamos duplicar esse código. Use sua linha ex para se livrar do sinal negativo a partir daqui. Além disso, precisamos aqui da função Translate para mover os elementos por ponto negativo para a RAM e, em seguida, -0,1 rampa Então agora temos aqui e o botão X. Em seguida, vou abordar aqui os elementos do cabeçalho H1 no lado direito da Navegação Vamos definir a família de fontes. Vai ser sincero, sem serifa. Então, precisamos aqui do tamanho da fonte, que será de cinco RAM. Vamos mudar a espessura da fonte. Vamos adicioná-lo a 300. Vou transformar o texto em maiúsculas. Também mude a cor. Vou colocá-lo em branco. Então, aqui temos o elemento de cabeçalho H1, que é o nome do designer Em seguida, vamos definir a posição como absoluta. Vou definir a primeira posição para 20 por cento. Quanto à posição de liderança , será de 50 por cento. Então, aqui estamos felizes. O cabeçalho está bem alinhado. Em seguida, vamos tirar você, no mínimo , da navegação. Vou usar o display flex. Então vou mudar a direção porque precisamos alinhar os itens verticalmente Em seguida, vamos definir a posição como absoluta. A primeira posição também será de 30%. A posição esquerda, vou configurá-la para 50% de probabilidade de direção. Então, aqui temos os itens de navegação. Vamos seguir em frente e selecionar pelo menos um elemento. Quero dizer, os links, vou mudar a família de fontes, vão ser sinceros em san-serif vão ser sinceros em san-serif Em seguida, vamos definir o tamanho da fonte. Vou configurá-lo para diminuir a RAM. Além disso, precisamos que a cor aqui seja CCC. Então precisamos de Margin, 0,5 RAM do que zero. Então, agora os itens de navegação parecem melhores. Em seguida, vamos selecionar o primeiro link com o seletor enésimo filho Eu vou mudar a cor. Vamos usar a cor vermelha. CEO 374. Tudo bem, então você tem o primeiro item que é lido. Em seguida, vou usar um efeito de foco. Vou mudar a cor ao passar o mouse e usar novamente essa cor vermelha E também precisamos fazer a transição para obter um efeito suave. Ok, então agora, quando passarmos mouse sobre os itens de navegação, eles mudarão a cor e virão lidos Em seguida, vou usar um pouco de JavaScript. Vamos criar uma variável. Vai ser o ícone do Menu. Vamos selecionar o ícone Menu usando o método seletor de consulta, precisamos especificar quem é o nome da classe, que será o ícone do Menu Vamos duplicar essa variável duas vezes. Precisamos aqui selecionar o botão X. E também vou usar sua navegação. Vamos especificar aqui o nome correto da classe. Navegação. Agora vou adicionar um ouvinte de eventos ao ícone do Menu evento de clique e com uma função de retorno de chamada Portanto, precisamos adicionar classe à Navegação. Depois de clicarmos no botão. Esta aula será de navegação. Isso é copiar esse código. Agora, precisamos aqui do botão X. Depois de clicar no botão X, precisamos remover a classe da Navegação. Em seguida, vamos usar essa navegação de cluster recém-criada. Mas antes de tudo, precisamos ocultar a navegação usando opacidade zero e visibilidade Em seguida, precisamos de navegação seguida pela navegação. E temos que exibir novamente a Navegação usando opacidade e visibilidade visível Agora, precisamos que você faça a transição todos os 0,3 s. Agora, quando clicarmos no ícone Menu, a Navegação será exibida. E quando clicarmos no botão X, ele se ocultará. Tudo bem, então isso é tudo sobre navegação. Vamos seguir em frente. 33. Projeto 4: crie um banner animado: Tudo bem, então, quando terminarmos com a navegação, agora é hora de seguir em frente E então dois Crie a próxima parte do projeto. A próxima parte será um banner animado. Então, vou inserir seus novos comentários para Landing. Em seguida, vou abrir uma tag de seção com um nome de classe, Landing, na qual vou abrir a tag DIV com o banner da classe Portanto, esse elemento incluirá outra variação profunda com duas classes, slide de cabeçalho e slide de cabeçalho Um total terá dois slides. Vamos inserir aqui elementos de cabeçalho h3 com o texto Olá Eu sou. Em seguida, teremos elementos de cabeçalho H1 com um texto e Smith Vamos duplicar. Elementos, altere o nome da classe. E também precisamos mudar o texto. Então, aqui temos de Londres. Então, precisamos aqui e de design de interiores. Tudo bem, então vamos ver isso sobre a marcação HTML. Vamos seguir em frente e começar a escrever um pouco de CSS. Vou inserir seus comentários para Landing. Em seguida, vou selecionar Landing. Estou neste elemento da seção. Vamos definir com 200% de que a altura será 100 da altura da janela de visualização Em seguida, vou selecionar Banner. Vamos definir a posição como absoluta. Então, precisamos da posição relativa para o elemento pai, que é um elemento de seção. Então, vamos definir uma posição para 35%. A posição esquerda será de 50 por cento e precisamos centralizar o banner usando Transform Translate X com -50 por cento Tudo bem, a seguir, precisamos definir aqui a largura. Vai ser 100%. Quanto à altura, vou configurá-la para 40 RAM. Além disso, precisamos aqui do centro de alinhamento de texto. Assim, é possível ver que o banner está colocado no centro. Vamos prosseguir e selecionar Elementos de cabeçalho do slide h3 Vou definir o tamanho da fonte como, para executar e o texto virar em maiúsculas Eu vou mudar a cor, vai ser 999 Então, precisamos de algum espaço entre a rede usando o espaçamento entre letras Além disso, vou criar algum espaço na parte inferior usando a margem inferior, que será executado. Então, aqui temos títulos. Vamos duplicar esse código, alterar o seletor que precisamos aqui. Elemento de cabeçalho H1 O tamanho da fonte será de seis RAM. Além disso, vou usar a espessura da fonte em negrito. Em seguida, mude a cor. Vamos torná-lo branco. Além disso, precisamos deixar esse paciente ter 0,25 RAM e se livrar da margem Ok, então é isso. Os títulos parecem muito bons. Em seguida, precisamos selecionar o slide de título. Defina a posição como absoluta. A largura será de 100%. Então, agora os cabeçalhos são colocados um em cima do outro. Vou usar Transform, Translate Z menos atrium e também definir a opacidade como zero e a Então, agora os cabeçalhos estão ocultos. Em seguida, vou criar quadros-chave CSS. O nome da animação será um título animado. Então, com zero por cento, precisamos dessas três linhas de código. Então, com oito por cento, vou alterar o valor da função Translate para zero e também precisamos exibir o título. O próximo passo será 48%. Precisamos do mesmo código aqui. Em seguida, precisamos de 56%. E precisamos desse código daqui, desde a primeira etapa. O próximo passo será 100%. Será a última etapa. Precisamos aqui. O mesmo código. Agora, precisamos aplicar essas regras aos elementos, à sua propriedade de animação e, seguida, ao nome da animação. Em seguida, precisamos de duração e infinito e também linear. Vamos duplicar esse código, mudar o nome da classe Na verdade, precisamos de paz aqui. Para o segundo slide, precisamos de um tempo de atraso de 4 s. Então, como você pode ver, temos aqui uma animação muito boa e legal. Ok, então isso é sobre o Banner. Vamos seguir em frente. 34. Projeto 4: seção Build About: Tudo bem, então agora é hora de seguir em frente. E então dois Crie a próxima seção do projeto. Portanto, a próxima seção será uma seção Sobre. Vamos continuar e inserir novos comentários uma seção Sobre que vou abrir. Tipo de seção com a aula sobre. Em que vou abrir tag profunda com uma classe à esquerda. Será o lado esquerdo onde teremos a imagem. Vamos prosseguir e selecionar a imagem na pasta de imagens. Será About dot JPG. Em seguida, precisamos do lado direito no qual teremos os elementos de cabeçalho H1 Sobre. Em seguida, teremos H três títulos Elements, high e Smith. Em seguida, precisamos aqui da tag DIV com as informações da classe na qual vou abrir o parágrafo com um texto fictício A seguir, teremos aqui a tag DIV com a classe social media, na qual vou inserir. Agora, alguns ícones. A primeira será de marcas de fãs. Tweeter de fãs. Vamos duplicá-lo duas vezes e alterar os nomes das classes. O segundo será o Facebook, F, e o terceiro será o Instagram. Então você terá a marcação HTML. Em seguida, precisamos criar alguns outros elementos. Quando você ouvir elementos de título H4 com o texto, entre em contato comigo. Aqui. Em seguida, vou abrir a tag span na qual vou inserir o e-mail. Então, será o link completo pelo qual eu vou passar. E Smith em design.com, e-mail fictício Vamos duplicar esse código. Mude aqui, enviando um e-mail para o telefone e inprotegendo algum número de telefone fictício Tudo bem, então, na verdade, com a marcação HTML, terminamos. Vamos começar a escrever CSS. Insira novos comentários para nossa nova seção. Quero dizer, a seção Sobre. Em seguida, vou selecionar os elementos da seção e definir sua largura para 100%. Quanto à altura, será de 100 pontos de altura da janela de visualização. Em seguida, vou usar o flexbox. Então, precisamos de um centro de conteúdo justificado. E também vou criar algum espaço na parte superior usando estofamento, a parte superior pode rampa Então, foi concebido que os lados esquerdo e direito são colocados lado a lado Em seguida, precisamos alterar aqui a altura do contêiner. Vai ser 100%. Agora também temos aqui o fundo escuro na seção Sobre. Em seguida, vou selecionar o lado esquerdo. Vamos definir a largura para 40%. Vamos duplicar esse código e encontrar também a largura do lado direito Vai ser 60 por cento. Em seguida, vou selecionar a imagem que está fechada na parte esquerda. Vamos definir a largura para 33 RAM. Mude a altura, será 55 RAM. Em seguida, precisamos ajustar a imagem usando objetos. Tampa de alimentação. Além disso, defina a posição, torne-a absoluta. Em seguida, precisamos posicionar em relação ao elemento pai que está quase à esquerda. Vamos definir que duas posições serão menos dez RAM. Agora precisamos da posição correta. Vamos defini-lo como zero. Ok? Então, aqui temos a imagem. Em seguida, vamos cuidar dos elementos do cabeçalho H1 no lado direito. Vamos definir a família de fontes como can-it sans-serif. Então precisamos aqui do tamanho da fonte , agora será de 20 RAM, então vou usar o peso da fonte Vamos fazer com que seja ousado. Em seguida, vou transformar o texto em maiúsculas. Depois disso, vou criar algum espaço entre as letras. Além disso, mude a cor para 222. E então eu vou mudar a posição para ser absoluta. Precisamos de uma posição relativa ao elemento principal para o desenvolvimento correto. Em seguida, vou definir a posição superior como -20 RAM. Quanto à posição esquerda, será de 15 RAM. Portanto, o título parece bom e está bem alinhado. Em seguida, precisamos dos elementos de cabeçalho h3 no lado direito. Portanto, a família de fontes será contada. San-serif Em seguida, vou aumentar o tamanho da fonte. Vai ter memória RAM completa. Em seguida, vou definir o peso da fonte para 300. Além disso, precisamos que a cor seja branca. Então eu vou mudar de posição. Vamos defini-lo como absoluto. E precisamos nos posicionar com menos sete RAM do que precisamos . A posição na volta será 25 RAM Então, aqui temos o segundo título alinhado em cima do primeiro título, e parece muito bom Em seguida, vou selecionar Informações. Deixe a posição como absoluta, defina para a posição 25 RAM. Então, precisamos que a posição esquerda seja de 25 RAM. Depois disso, vou selecionar o parágrafo dentro das informações. Vamos definir a família de fontes para que possa ser san-serif. Então eu vou mudar o tamanho da fonte. Vai ter 1,8 RAM. Em seguida, vou definir a largura. Vamos fazer com que seja 45 RAM. A cor do parágrafo será 777. Além disso, precisamos alterar a altura da linha. Vamos adicioná-lo a 1,8. E precisamos de algum espaço na parte inferior usando a margem inferior Vamos fazer com que seja cinco RAM. Então, aqui temos o parágrafo. Próximo. Vamos seguir em frente e cuidar das mídias sociais. Vou configurar a tela para flexionar. Então, precisamos de espaço na parte inferior usando a margem inferior de cinco linhas. E agora podemos personalizar o ícone Font Awesome. Então, vamos selecionar a mídia social seguida pelo elemento I. Vamos definir o caminho para seis RAM. E a altura também será de seis RAM. Precisamos que o raio da fronteira seja de 50%. E também precisamos da cor de fundo. Vamos usar 202 O2O. Então, aqui temos os círculos. Vou usar o fluxo de exibição. Em seguida, para centralizar o ícone quando você justifica o Contact Center e o centro dos itens da linha Então, vou aumentar o tamanho da fonte. Vamos fazer com 2,5 RAM. Agora os ícones são colocados no centro dos círculos. Em seguida, vou usar algum espaço no lado direito usando Margie diretamente na RAM E também a cor vai ser vermelha, que usamos nas palestras anteriores E também mude o cursor, faça com que ele aponte. Portanto, os ícones do Font Awesome parecem muito bons. Em seguida, vou cuidar da informação H, quatro elementos. Vamos definir o tamanho da fonte para 1,8 RAM. Em seguida, use a cor, torne-a branca. Depois disso, vou selecionar elementos de extensão. Dentro das informações. Vamos definir o tamanho da fonte para 1,6 RAM. Altere a espessura da fonte, ela ficará em negrito. Então, precisamos que a cor seja 777. Além disso, vou usar o bloco de exibição e depois marchar para RAM e zero Finalmente, precisamos selecionar elementos de link. Vamos mudar a família de fontes. Vai ser contado um pouco de serifa. E então, quando mudar a cor, vamos usar a cor vermelha. Tudo bem, então, na verdade, esta seção é personalizada. Parece muito bom. Agora temos dois efeitos Create Fade. Antes de tudo, precisamos esconder a imagem. Vamos usar a opacidade até zero e depois a visibilidade. Oculto E também precisamos mover a imagem para baixo usando a rampa Transform, Translate Y 20 Vamos usar esse código também no lado direito da seção Sobre. Então, agora o conteúdo está oculto e precisamos escrever um pouco de JavaScript. Vou adicionar um ouvinte de eventos ao objeto da janela usando eventos de rolagem e com uma função de retorno de chamada Em seguida, precisamos criar uma variável que será sobre, vamos selecionar os elementos usando o método seletor de consulta E agora precisamos usar se outras afirmações, condição será o ponto da janela. O deslocamento da página Y da página é maior ou igual a 200 Na verdade, essa propriedade nos mostra a distância que rolamos para baixo. Em seguida, precisamos adicionar a mudança de classe ao about. Se essa condição for verdadeira. Na declaração else, precisamos da mesma condição, mas com elementos de remoção. Portanto, precisamos remover a classe de mudança do about. Vamos verificar a propriedade de deslocamento Y da página do console. Eu vou te mostrar o que isso realmente nos dá quando rolamos a página para baixo Então, vamos inspecionar a página e mudar para o console. Então, quando rolarmos para baixo , obteremos alguns valores Novamente, ele nos mostra a distância que rolamos para baixo em pixels Ok, agora precisamos selecionar alterar, seguido por Sobre a imagem esquerda. E temos que usar essas três linhas de código. Precisamos mostrar de volta a imagem. E também precisamos movê-lo para cima. Vamos usar o mesmo código para o lado direito. Elimina o seletor de imagens. Precisamos de uma transição aqui com algum tempo de atraso. E quando você faz a transição aqui também. Então agora, como você pode ver, temos aqui um efeito de desbotamento muito bom Tudo bem, então é isso. Na verdade, o ícone do Menu não funciona aqui. Então, precisamos resolver esse problema. Vamos usar a propriedade index e configurá-la como 100. Agora vamos considerar que o problema está resolvido, certo? Vamos seguir em frente. 35. Projeto 4: crie e personalize serviços: Tudo bem, agora é hora de seguir em frente e criar a próxima seção do nosso projeto A próxima seção é sobre Serviços. Vamos inserir novos comentários em uma nova seção. Em seguida, vou abrir a tag da seção com a classe Serviços. Dentro do elemento da seção. Vou abrir a tag DIV, que será o cabeçalho de serviços Nesse elemento, vou abrir a tag de cabeçalho h3 com o texto. O que eu faço. Em seguida, precisamos de elementos de cabeçalho H1 com um texto my Services Depois disso, vou abrir a tag DIV com a classe Services, pelo menos Dentro desse elemento. abrir outra tag DIV com o item da lista de classes no qual vou abrir o ícone Font Awesome com a classe FA, solid fa, grupo de camadas Em seguida, precisamos elemento span no qual vou inserir espaço. Planejamento. O próximo em outro elemento de extensão com o layout da mobília de texto. Em seguida, precisamos de outro vão, que será a seleção da superfície. Então, vou duplicar o item da lista duas vezes e, em seguida, teremos que alterar os nomes das classes e o texto também Então, o segundo ícone será fa, pen nib. Precisamos aqui de design de iluminação. Em seguida, o próximo será o detalhamento do interior. Em seguida, teremos a instalação. Quanto ao terceiro item da lista aqui, o ícone Font Awesome de uma casa. Então, dentro dessa quantidade de painel, vou inserir a seleção de cores. Em seguida, o próximo será o tratamento de janela. Em seguida, teremos as documentações do construtor. Tudo bem, então isso é tudo sobre a marcação HTML. Aqui temos os elementos HTML. Em seguida, vou começar a escrever o CSS. Em primeiro lugar, como de costume, vou inserir novos comentários para uma nova Seção, Serviços e Serviços desativados. Em seguida, vou abrir os elementos da seção. Vamos definir com que será 100%. Então, precisamos de altura, que será 70 de altura da janela de visualização Então eu vou usar o Flexbox. Vamos mudar a direção da coluna. E também vou alinhar os itens no centro. Tudo bem, então aqui temos os elementos HTML. Em seguida, vou selecionar Cabeçalho de Serviços, seguido pelo elemento de três cabeçalhos H. Vou definir o tamanho da fonte para dois gramas. Em seguida, precisamos transformar o texto em maiúsculas. Então eu vou mudar a cor, vai ser 777 Em seguida, vou usar o espaçamento entre letras. 0,3 correu. Além disso. Vou criar algum espaço na parte inferior usando o valor da margem inferior para executar. Então, aqui temos o primeiro título. Vamos duplicar esse código e mudar o título. Vai ser H1. Precisamos aqui que o tamanho da fonte seja cinco RAM. Então eu vou me livrar da propriedade de transformação de texto. A cor vai ser branca. Além disso, precisamos de sua margem inferior de 12 RAM. Então, aqui temos o segundo título. Na verdade, vou colocar cabeçalhos e os sensores usando o centro de alinhamento de texto Então, agora temos um resultado melhor. Depois disso, vou cuidar da lista de serviços. Vamos começar com dois 70%. Em seguida, vou usar o flexbox, seguido pela propriedade justify content com o valor espaçado uniformemente Temos espaço uniforme entre os itens Em seguida, vou selecionar o item da lista. Vamos celular com 230 RAM. Em seguida, precisamos de livros de fluxo. Eu vou mudar a direção. Vamos fazer com que seja uma coluna porque precisamos alinhar os itens verticalmente Vamos usar o centro de alinhamento de itens. Portanto, os itens da lista estão bem alinhados. Em seguida, vamos selecionar os elementos do item da lista, Fonte, Fantástico, ícone. Vou aumentar o tamanho da fonte. Vai ser uma rodada completa. Depois, a cor. Vai ser lido. Além disso, vou usar a margem inferior. Com valor de três RAM. Precisamos de algum espaço na parte inferior. Então, os ícones parecem muito bonitos. Em seguida, vou cuidar do elemento de extensão. Vamos definir a família de fontes como can-it sans-serif. Em seguida, vou mudar o tamanho da fonte. Vai ser bater, mudar a cor. Eu vou usar a cor branca. E também precisamos de margem, 0,7 RAM na parte superior na parte inferior e zero nos lados esquerdo e direito. Ok, então, na verdade, tudo parece bom. Temos que ocultar o cabeçalho porque vamos usar o mesmo efeito de atenuação que usamos na seção anterior Vamos mover o cabeçalho para baixo usando Translate Y cinco RAM Também temos o mesmo para a lista de serviços. Quero dizer os itens da lista. Então, agora todo o conteúdo está oculto. Vamos continuar e escrever um pouco de JavaScript. Eu vou duplicar essa variável. Mude o nome , será Serviços. Em seguida, precisamos, novamente , de declarações. Agora, o número de pixels será alterado About dot offset top Quando a seção Sobre estiver concluída, mais 200 pixels, precisamos exibir o efeito. Agora, vou selecionar a alteração seguida pelo cabeçalho dos serviços E precisamos aqui da opacidade um, depois da visibilidade, da visibilidade e do Transform Translate Y com zero. Vamos usar a transição. Em seguida, vou copiar esse código e colá-lo aqui, precisamos do item da lista em vez do cabeçalho de serviços Vamos selecionar aqui o item da lista com seletor de crianças F e usar a transição para o primeiro item com um tempo de atraso de 0,5 s. Vamos duplicar esse código Mude a palestra sobre gráficos. E também precisamos de um tempo de atraso diferente para o segundo e para o terceiro itens da lista. Ok, se recarregarmos a página e rolarmos para baixo, obteremos esse efeito de desbotamento agradável e legal Ok, então isso é sobre a seção Serviços. Vamos passar para a próxima palestra. 36. Projeto 4: seção de portfólio para criar e estilizar: Tudo bem, então, quando terminarmos com a seção Serviços, agora parece seguir em frente e criar a próxima seção, que será um portfólio Então, vou inserir seus novos comentários para a nova seção. Então, vamos prosseguir e, como sempre, abrir a tag da seção com o portfólio da turma. Vou inserir sua tag DIV, que será Portfolio Header Vamos abrir a tag de cabeçalho h3 com o texto Portfólio. Em seguida, precisamos do elemento de cabeçalho H1. Vamos apenas finalizar meu trabalho. Depois disso, vou abrir a tag DIV com os trabalhos da classe Será um invólucro do que precisamos. A obra em si, que consistirá em duas partes Teremos uma imagem. Vamos selecionar a imagem na pasta de imagens. Vai ser o primeiro trabalho. Em seguida, teremos informações de trabalho nas quais vou inserir o elemento de cabeçalho h3 Vai ser design de interiores. Então, precisamos do elemento de cabeçalho H1, que dará à sua casa um novo estilo Em seguida, teremos um parágrafo com algum texto fictício. E então precisamos de links, que serão poucos. Projeto. Tudo bem, então isso é tudo sobre o trabalho. Vou duplicar esse elemento algumas vezes. Teremos quatro obras. Para o segundo trabalho, vou mudar os locais da imagem e das informações do trabalho. E também vou mudar o nome da imagem. Então teremos aqui a imagem do trabalho três. Depois trabalhei para e para a quarta Obra, vou fazer o mesmo. Vamos mudar os locais da imagem e das informações do trabalho. Tudo bem, então, na verdade, com a marcação HTML para esta seção, terminamos Vamos seguir em frente e cuidar do CSS. Vou instituir novos comentários para o portfólio. Em seguida, vou selecionar a tag da seção. Vamos definir a largura para 100 por cento. E a altura também será de 100%. E também precisamos de preenchimento, 20 RAM e zero, depois cinco primos e zero novamente Em seguida, vou copiar todo esse código da seção anterior. E eu vou mudar os nomes das turmas. Vamos inserir aqui. Portfólio. Também precisamos aqui de margem na parte inferior, 20 rampa. Então, como você pode ver, temos aqui os cabeçalhos das seções e eles parecem muito bons Tudo bem, a seguir, vou cuidar dos trabalhos da embalagem. Vamos definir a largura para 80 por cento Então, precisamos de margem automática para centralizar os elementos. Então, o Centro de Desenvolvimento. Em seguida, vou selecionar Trabalho em si. Vamos usar o Flexbox. Precisamos aqui justificar o espaço do conteúdo uniformemente. Precisamos de um espaço uniforme entre os itens flexíveis. Então, vou colocar a margem em 15 RAM e zero. Assim, é possível ver que os elementos estão bem alinhados. Em seguida, vamos selecionar Imagem. Eu vou definir a largura , vai ser 40 por cento. Então precisamos da sua altura. Serão 30 RAM. Além disso, vou usar o feed de objetos com a capa de valor. Em seguida, vou diminuir um pouco a opacidade. Vamos configurá-lo para 0,8. Então, as imagens estão bonitas. Em seguida, vou selecionar Informações sobre o trabalho. Vamos definir a largura para 40 por cento. Depois disso, vou selecionar elementos de cabeçalho h3 dentro das informações de trabalho que definem o tamanho da fonte para 1,6 RAM Então precisamos colorir que será 777. Além disso, vou transformar o texto em espaçamento entre letras maiúsculas para criar algum espaço entre Portanto, o primeiro elemento do título parece bom. Em seguida, vou duplicar esse código, mudar o seletor que precisamos aqui, elementos de cabeçalho H1 Precisamos mudar a família de fontes. Vai ser um san-serif sincero. Então eu vou aumentar o tamanho da fonte. Vamos configurá-lo para diminuir a RAM. Além disso, vou usar aqui a gramatura da fonte, negrito e depois mudar a cor. Vai ser branco. Além disso, vou me livrar dos cheques de transformação da propriedade. Quanto ao espaçamento entre letras, ele apontará para a Além disso, precisamos de sua margem. Três rampa e zero. Tudo bem. Em seguida, vou selecionar Informações sobre o trabalho, seguido pelo parágrafo. Vamos definir o tamanho da fonte para 1,6 RAM e a cor será 777 ou Vou colocar a altura da linha 1,6 e, em seguida, usar a margem inferior com um valor para mover. Ok? Então, o parágrafo parece bom. Em seguida, vou selecionar os elementos do link. Vamos definir o tamanho da fonte para 1,6 RAM e alterar a espessura da fonte, ela ficará em negrito. Além disso, vou mudar a cor. Vamos usar a cor vermelha e depois usar o espaço entre as letras. Então, agora o elemento de link está bonito. Em seguida, vou ocultar cabeçalho do portfólio usando opacidade e visibilidade. E também precisamos diminuir os elementos. Vamos usar o mesmo efeito do destino que usamos nas seções anteriores. Vamos pegar esse código e usá-lo também para o trabalho. Precisamos aqui de dez RAM para o trabalho em vez de cinco RAM. Em seguida, vou escrever um pouco de JavaScript. Vamos selecionar uma nova variável que será portfólio. Então eu vou usar a declaração if else. Precisamos mudar aqui o nome da seção. Nesse caso, precisamos de serviços. E aqui precisamos de um portfólio porque portfólio vem depois da seção Serviços. Agora, precisamos selecionar elementos usando esforços de mudança de classe. Precisamos aqui do cabeçalho do portfólio, pegue esse código e defina a opacidade Então, precisamos de visibilidade, visível. Quanto à função Translate Y, será zero. E também precisamos de uma transição aqui para um efeito suave. Vou pegar esse código e usá-lo para o trabalho. Vamos mudar o nome da classe. Vai ser trabalho. Em seguida, precisamos usar a transição, mas usaremos transições diferentes para os diferentes itens de trabalho Para o primeiro item, precisamos de transição com um tempo de atraso 0,5 s. Vamos duplicar esse código Para o segundo item, precisamos de tempo de atraso, 1 s. Então, para o terceiro item, precisamos de 2 s. Quanto ao quarto item, serão 3 s. Tudo bem, então se recarregarmos a página, obteremos esses efeitos legais e legais Então isso é tudo sobre a Seção de Portfólio. Vamos passar para a próxima palestra. 37. Projeto 4: crie uma seção de dados com contadores: Tudo bem, então, quando terminarmos com a seção de portfólio, agora temos que seguir em frente e começar a trabalhar na próxima seção, que será um dado, quero dizer, os contadores de dados animados Vamos abrir a tag da seção com o nome da classe Data. Em seguida, vou abrir uma tag DIV, que será Data Header Vamos inserir os três elementos do título de sua idade, que serão apenas conquistas. E também vou inserir elementos de cabeçalho H1 com o texto Vamos compartilhar minhas conquistas. Tudo bem. Isso é tudo sobre o cabeçalho da seção Em seguida, vou abrir a tag DIV, que será Lista de dados, na qual teremos itens de dados Vamos inserir aqui o elemento span. E aqui, clientes. Em seguida, teremos outros elementos de extensão. O nome da turma, numb, eu quis dizer o número. E também precisamos aqui de Data, Val, que será um atributo. Vou passar aqui um número aleatório. Por padrão, vou inserir aqui zero. Então, vamos duplicar o item de dados duas vezes. Vamos mudar aqui o conteúdo , serão projetos concluídos e o valor dos dados será 652 E precisamos aqui de xícaras de café. E o valor dos dados será 1.000. Ok, então vamos dizer isso sobre a marcação HTML. Aqui temos todos os elementos que acabamos de criar. Vou começar a escrever o CSS. Vamos instituir comentários para obter dados. Em seguida, vou selecionar os elementos da seção e definir a largura como 100%. Quanto à altura, também será de 100%. Precisamos de preenchimento, 20 RAM e zero. Em seguida, vou selecionar Cabeçalho de dados. Vamos usar aqui o centro de alinhamento de texto. Depois disso, vou selecionar o cabeçalho de dados H, três elementos de cabeçalho Vamos mudar o tamanho da fonte. Vai ser para correr. Então, precisamos de transformação tributária. Vai ficar em letras maiúsculas. Além disso. Eu vou mudar a cor. Vamos configurá-lo para 777. Então, precisamos de algum espaço entre as letras, digamos 2,3 RAM. E também vou definir a margem do fundo para a rampa. Portanto, o primeiro título é Personalizar. Em seguida, vou selecionar os elementos de cabeçalho H1. Vamos mudar o tamanho da fonte. Então, cinco RAM, então precisamos que a cor seja branca. Além disso, precisamos de espaçamento entre letras com 0,3 RAM e, em seguida, margem na parte inferior, que será de 12 rampas Isso é tudo sobre os cabeçalhos da seção. Em seguida, vou personalizar os dados. Pelo menos. Vamos definir a largura para 60%. A altura será de 90 RAM então precisamos de margem automática para enviar ao elemento. Depois disso, vou cuidar dos itens de dados. Vamos definir a posição como absoluta. E também precisamos aqui da posição relativa ao elemento pai, que é uma lista de dados. Em seguida, vamos usar o flexbox. Precisamos mudar a direção. Vai ser uma coluna. Então, aqui temos os itens de dados. Em seguida, vou selecionar o primeiro item de dados. Vamos definir a posição como zero. Quanto à próxima posição, será zero e duplicará esse código duas vezes Mude os números aqui. Precisamos nos posicionar para ser 50 por cento. Pois o segundo item é para a posição esquerda também será de 50%. Além disso, vou usar aqui transform translate para centralizar o elemento perfeitamente Os valores que vou custar aqui, -50 por cento e novamente -50 por cento Quanto ao terceiro item, precisamos aqui a posição inferior seja que a posição inferior seja zero e a posição Y também seja zero. Na verdade, não vejo aqui o terceiro item. Vamos verificar o código. Sim, precisamos mudar o número. Ok, então agora todos os elementos, quero dizer, todos os itens estão alinhados Em seguida, vamos estilizar esses itens. Selecione dados, itens e elementos de extensão. Mas o primeiro, vamos mudar o tamanho da fonte. Vai ser para a RAM. Precisamos aqui transformar o texto, em maiúsculas. Também em algum espaço entre as letras. Vamos configurá-lo para apontar para RAM. Em seguida, precisamos de cores. Eu só vou ter 777 anos. Então, aqui temos os primeiros elementos de extensão dentro do item de dados. Duplique esse código, altere o número. Aqui, será F filho do que a família da fonte. Pode ser sem serifa? Então, precisamos que o tamanho da fonte seja 20 RAM. Livre-se da transformação tributária. Além disso, não precisamos desse espaçamento. Vamos colocar a cor que vou usar na coluna direita. Além disso, vou usar a altura da linha. Vamos 321 Ok? Como você pode ver, os itens de dados são personalizados. Eles parecem muito bonitos. E agora temos que escrever um pouco de JavaScript. Vou selecionar algumas variáveis diferentes. O primeiro será o início, que será falso por padrão. Em seguida, vou selecionar dados. Estou no elemento da seção. Além disso, precisamos selecionar números usando o método querySelector all E como nome da turma, vou passar aqui Num. Depois disso, vou criar uma função start count. Vamos inserir aqui elementos de parâmetros. Em seguida, precisamos criar uma variável que será máxima. E, na verdade, será o valor do atributo de dados que colocamos aqui no arquivo HTML. Em seguida, vou criar uma variável chamada count. E vou usar o método setInterval. Agora temos que aumentar o conteúdo dos elementos em um usando o operador de incremento, o plus, plus Em seguida, instruções IF nas quais temos que verificar se o conteúdo dos elementos é igual ao máximo, que é o valor do atributo. Se for verdade, então temos que limpar o intervalo como o intervalo. Vou colocar aqui cinco milissegundos. Também precisamos da declaração IF aqui para definir o evento de rolagem Quero dizer, se a janela de rolagem é exibida, por que é maior ou igual aos dados na parte superior de -300 pixels Então, novamente, precisamos que as instruções nas quais devemos passar o valor booleano comecem com o operador NOT e, em seguida, temos que percorrer os números usados para cada auxiliar de matriz Temos que chamar a função start count usando o parâmetro numb E então temos que definir o valor booleano inicial como verdadeiro. Tudo bem? Temos que resolver esse pequeno problema aqui. Precisamos do conteúdo do texto. Então, como você pode ver, os contadores funcionam bem. Agora, se Y recarregar a página e ela for desativada, acesse a Seção de Dados e os números contarão imediatamente Então aqui está. Ok, então é isso. Vamos passar para a próxima palestra. 38. Projeto 4: crie e personalize o rodapé do site: Tudo bem, agora é hora de seguir em frente e começar a criar a última parte do projeto, que está se tornando um rodapé O rodapé será simples. Vamos inserir novos comentários no rodapé. Em seguida, vou abrir a tag de rodapé HTML5, na qual precisamos da tag DIV com o nome da classe Mídias sociais. Vou instituir ícones do Font Awesome. Quero dizer, os ícones Font Awesome da mídia social. Vamos pegar esse código daqui e colá-lo aqui dentro do desenvolvimento. Em seguida, vou abrir o elemento de cabeçalho H1 com o texto. Entre em contato comigo. Além disso, precisamos aqui de um link. Será e Smith em design.com, algum endereço de e-mail da Tammy Depois disso, vou abrir um parágrafo com direitos autorais da classe, no qual precisamos de algum texto de direitos autorais. Direitos autorais seguidos pelo sinal de direitos autorais. Então precisamos de 2023, todos os direitos reservados. Textos de direitos autorais padrão. E também vou instituir o Made by Code e o Create, que serão colocados no intervalo. Ok, então é isso. Todos os elementos são criados para o rodapé. Agora, temos que ir em frente e estilizá-los usando CSS. Vamos instituir seus comentários para o rodapé. Em seguida, vou selecionar a tag de rodapé. Vamos definir com 200 por cento. Então precisamos de altura. Serão 50. Você coloca altura. Também vou usar o Flexbox. Vamos mudar de direção, fazer disso uma coluna. Além disso, vou usar o centro de conteúdo justificado para enviar aos itens horizontal e verticalmente usando alinhar o centro de itens verticalmente Ok, então aqui temos os elementos bem alinhados. Em seguida, vou selecionar a mídia social, o invólucro. Vamos usar novamente livros de fluxo. Então, precisamos que a margem na parte inferior seja de três RAM. Em seguida, vou personalizar os ícones. Quero dizer, os elementos I. Vamos começar com 25 RAM. Então, precisamos que a altura seja de cinco RAM. Vamos criar os círculos. Então, vou mudar a cor de fundo. Vamos usar 262626. Além disso. Faça o elemento arredondado usando o raio de borda presente Ok, a seguir, vou usar o flexbox para centralizar os ícones dentro dos círculos usando justify-content center Centro. Além disso, vamos criar algum espaço usando a margem 0,1 RAM nos lados esquerdo e direito. Em seguida, vou mudar o tamanho da fonte. Vai ser para correr. Também mude a cor. Use aqui 777. Tudo bem, então aqui temos ícones de mídia social Eles estão bonitos. Em seguida, vou cuidar do título H1 e vamos mudar o tamanho da fonte Vai ter memória RAM completa. Então eu vou usar a cor branca. Além disso. Crie algum espaço entre as letras. Vamos configurá-lo para apontar para a rampa. Então, precisamos de margem na parte inferior para correr. Então, o título parece muito bom. Então temos que cuidar do elemento de link e definir o tamanho da fonte para, para executar também mudar a cor. Use aqui, D, D, D. Então precisamos de margem na parte inferior. Vamos torná-lo bronzeado em RAM. Então, aqui temos o elemento link. Finalmente, temos que cuidar do parágrafo. Então, isso é selecionado usando direitos autorais. Altere o tamanho da fonte. Será 1,6 RAM do que precisamos de cor para ser CCC. Em seguida, vou selecionar elementos de extensão, que são colocados dentro do parágrafo. Vamos mudar a família de fontes. Vai ser contado em san-serif. E então eu vou mudar o tamanho da fonte. Vai ser para correr. Também precisamos de cores aqui. Seja lido. Veio a célula que fica acima do rodapé. Parece muito bom. E, na verdade, com o projeto, concluímos. A única coisa que preciso fazer é torná-lo responsivo a diferentes tamanhos de tela 39. Projeto 4: torne o projeto responsivo: Tudo bem, então terminamos criar todas as seções deste projeto e agora é hora de tornar o projeto responsivo a diferentes tamanhos de tela Vou inspecionar a página e mudar para o modo responsivo Portanto, temos que encontrar os pontos de interrupção nos quais precisamos fazer algumas mudanças no projeto É possível ver em telas menores algumas partes do projeto estão confusas, então temos que cuidar disso Vamos voltar ao arquivo CSS. E antes de tudo, vou instituir comentários para o modo responsivo. Em seguida, vou criar uma nova consulta de mídia CSS, na qual vou especificar a largura máxima como 1.500 Então, primeiro de tudo, vamos diminuir o tamanho da fonte do elemento HTML. Vamos fazer com que seja 55 por cento porque isso tornará todos os elementos menores. Na verdade, temos que cuidar do retângulo para precisar mudar sua posição Vamos selecionar a Ferramenta Retangular e definir minha posição para -15%. Na verdade, acho que todas as outras seções parecem boas. Assim, podemos encontrar outro ponto de interrupção. Portanto, o próximo ponto de interrupção será de 1.300 pixels. Vamos criar uma nova consulta de mídia CSS e especificar aqui a largura máxima como 1.300 Primeiro, vamos diminuir o tamanho da fonte novamente para o elemento HTML. Vou defini-lo para 50%. Então, novamente, os elementos ficaram menores. Em seguida, vou cuidar da seção Sobre que fica à esquerda, e definirei sua largura para 35 por cento. Quanto à direita, vou definir sua largura para 65%. Então, agora a seção Sobre parece boa. Em seguida, vou cuidar do portfólio. Eu só trabalho. Vamos começar com o percentual desta noite. Então, agora temos melhores resultados. Além disso, vou cuidar da seção de dados. Vamos definir a largura dos leads de dados em 70%, certo? Então eu acho que é isso. Vamos verificar a navegação. Tudo parece bem. Vamos prosseguir e encontrar o próximo ponto de interrupção. Então, o próximo ponto de interrupção, acho que será de 1.100 pixels Vamos criar uma nova consulta de mídia CSS. Defina a largura máxima para 1.100 pixels. Novamente, vou diminuir o tamanho da fonte dos elementos HTML. Vamos de 30 a 45%. Em seguida, vou abordar aqui a seção Sobre. Selecione Sobre os elementos do cabeçalho H1 direito e altere o tamanho da fonte Vai ter 15 RAM. Além disso, vou mudar as duas posições que precisamos aqui, -18 RAM Então eu vou duplicar esse código. Selecione H, três elementos de cabeçalho. O tamanho da fonte é de 3,5 RAM. Como a posição do politopo será menos nove rampa. Ok, então agora a seção Sobre está bonita. Em seguida, vou cuidar da seção de dados. Vamos selecionar o elemento de extensão da lista de dados. Nesse caso, o segundo elemento de extensão. Vamos definir o tamanho da fonte para 16 RAM. Agora temos melhores resultados e, na verdade, podemos seguir em frente e encontrar o próximo ponto de interrupção Então eu acho que o próximo ponto de interrupção será de 900 pixels Vamos criar uma nova consulta de mídia CSS e especificar aqui a largura máxima como 900 Vamos seguir em frente e selecionar o retângulo um. Vou definir a posição Luck para -40 corridas. Então vamos seguir em frente e selecionar o retângulo dois. A posição correta será ajustada para -25 por cento. Em seguida, vou selecionar o designer e definir sua posição para 15 rampa, estou na posição esquerda Então precisamos aqui do ícone do menu. Vamos mudar a posição correta para 15 RAM. Então, agora temos melhores resultados. Vamos cuidar da navegação, que no momento não parece muito boa. Então, vou selecionar a configuração de navegação à esquerda com 250 por cento. Em seguida, vou selecionar o lado direito e definir sua largura para 50 por cento também. Tudo bem, então agora, a navegação não parece boa Novamente, vamos selecionar os elementos de cabeçalho H1, que são colocados no lado direito. Vamos usar o Transform. Traduza Y. Eu vou movê-lo. Desculpe, precisamos aqui traduzir X e Y. Vamos usar -50 por cento E também vou usar a posição relativa. Em seguida, precisamos definir com 200 por cento. Além disso, vamos alinhar o centro do texto. Depois disso, vou selecionar pelo menos Navegação. Vamos movê-lo usando Transform, Translate X -50% e depois usar novamente o centro de alinhamento de texto Em seguida, vou cuidar da seção Sobre. Vamos selecionar Sobre a esquerda e a altura oito usando exibir nenhum. Em seguida, precisamos da direita e temos que definir a largura para 100%. Agora, a seção Sobre parece boa e a Navegação também parece boa. Ok. Então, vamos seguir em frente e cuidar do lado direito do elemento do título da seção Sobre Vamos definir a posição esquerda para 50 por cento. Além disso, precisamos centralizá-lo usando o Transform Translate X -50 por cento Em seguida, temos que cuidar do segundo título, elemento de cabeçalho h3 Vamos mudar sua posição de atraso para 35%. Agora, tudo parece bom. Em seguida, vou selecionar Informações e definir sua posição esquerda para 50%. Agora, precisamos do centróide usando Transform Translate X Ok? Depois disso, vou cuidar desta Seção de Serviços. Vamos selecionar a lista de serviços e definir sua largura para 90%. Em seguida, vamos cuidar do portfólio. Vou selecionar obras e definir sua largura para 100%. Além disso, vou selecionar Informações do trabalho e definir sua largura para 50 por cento. Eu acho. Parece bom. E, na verdade, com esse ponto de interrupção, terminamos. Em seguida, temos que encontrar o próximo ponto de interrupção, que eu acho que será de 700 pixels Então, vamos criar uma nova consulta de mídia CSS E especifique aqui a largura máxima como 700 pixels. Primeiro, vamos diminuir o tamanho da fonte dos elementos HTML. Eu vou fazer com que seja 40 por cento. Em seguida, vou selecionar o designer e definir sua posição esquerda para oito RAM. E também precisamos do ícone do menu. É a posição correta. Também será um átrio . Tudo bem. Precisamos cuidar dos slides. Quero dizer o segundo título. Então, vamos selecionar o elemento de cabeçalho H1 e diminuir o tamanho da fonte, tornando-o cinco RAM Então agora parece muito bom. Em seguida, temos que trabalhar na seção Serviços. Então, vamos seguir em frente e selecionar Serviços. Alterar a altura será 90, altura da janela de visualização. Portanto, precisamos selecionar Serviços, listar e mudar a direção do flexbox Vamos fazer uma coluna. Além disso, precisamos alinhar o centro dos itens Portanto, os itens são colocados verticalmente, mas precisamos de algum espaço entre os itens Então, vamos usar margem, fundo com valor. Três rodadas. Tudo bem? Então eu acho que é isso sobre esse ponto de interrupção. E temos que cuidar do último ponto de interrupção. Então, vamos continuar e criar uma nova consulta de mídia CSS. A largura máxima será de 500 pixels. Vamos selecionar o retângulo e alterar a posição do atraso Vai ser -70%. Então, precisamos de um retângulo para mudar sua posição correta Vou configurá-lo para -50 por cento. Então, eles estão bonitos. Em seguida, vou cuidar da navegação. Vamos continuar e selecionar Navegação à esquerda e torná-la oculta. E agora temos que alinhar o lado direito corretamente. Então, vamos selecionar o suficiente, certo, e definir sua largura para 100%. Agora, os itens são colocados no centro da Navegação. Tudo bem. Em seguida, temos que cuidar do portfólio. Vamos selecionar Trabalho e atribuir ao centro de alinhamento de itens. Além disso, você precisa aqui da imagem de trabalho. Vou definir sua largura para 60%. Em seguida, vou selecionar Informações de trabalho e ocultá-las. Vamos conferir os projetos. Então, agora acho que temos resultados muito melhores. Em seguida, vou cuidar dos itens de dados. Quero dizer, o segundo item, elemento de período anual. Vamos mudar o tamanho da fonte, torná-la 12 rampa. Tudo bem, então acho que está tudo pronto e o projeto responde a todos os tamanhos de tela diferentes Espero que você tenha gostado desse projeto e aprenda algo novo. Então, vamos seguir em frente e construir o próximo projeto. 40. Projeto 5: visualização: Olá e bem-vindo ao nosso próximo projeto. Nesta seção, criaremos um site sobre cafeteria. O projeto consistirá em algumas partes diferentes e estará repleto de designs e funcionalidades de aparência moderna e funcionalidades Vamos seguir em frente e descrever o site. Começaremos com uma navegação que é fixada na parte superior da página. Depois de rolar para baixo, ele mudará muito bem o plano de fundo Depois que a navegação funcionar no banner, que tem uma apresentação de slides, usaremos um dos plug-ins chamado swipe chamado swipe Como você pode ver, o Slideshow funciona automaticamente. Mas, além disso, você pode usar esses controladores. Além disso, você pode arrastar os slides com o mouse. Ok, a seguir, temos uma seção Sobre com algumas informações. Esta seção é seguida por um menu. Depois disso, temos alguns dados com contadores animados e alguns bons efeitos secundários A próxima seção será sobre os clientes que temos aqui as opiniões dos clientes bem colocadas por Koch Em seguida, vem a seção Contato, onde você pode entrar em contato com a casa ou reservar uma mesa. E, finalmente, temos aqui um exemplo de rodapé. O projeto é responsivo a diferentes tamanhos de tela. Se eu inspecionar a página, mude para o modo responsivo e verifique o projeto com quatro tamanhos de tela diferentes Você descobrirá que o projeto é responsivo e, em média, tem uma boa aparência, com tamanhos de tela diferentes Novamente, como os outros projetos, este foi criado para uma tela extra grande de tamanho dois. Estou aqui, isso coincide com 1920 pixels na largura da antena em pixels de altura Portanto, se você estiver usando um tamanho de tela relativamente menor , durante as aulas, você deve alternar para o modo responsivo e especificar a largura e a altura dessa forma Caso contrário, o projeto não ficará bem em telas menores até que seja responsivo Então, por favor, leve isso em consideração. Tudo bem, então estamos prontos para começar a construir o projeto. Vamos seguir em frente. 41. Projeto 5: crie e estilize a navegação: Tudo bem, então é hora de começar a construir os projetos. Vou abrir a pasta no VS Code. E então vou criar nossos arquivos de trabalho para HTML, CSS e também para JavaScript. Então vamos abrir o arquivo index.html e criar um documento HTML básico. Em primeiro lugar, vamos mudar o título. Vai ser uma cafeteria. Em seguida, vou vincular arquivos. Vamos abrir a tag de script e especificar o nome do arquivo e o atributo de origem. Em seguida, vou abrir o Navegador do Projeto. Em seguida, vamos pegar alguns links. Quero dizer, link para ícones do Font Awesome, porque vamos usar esses ícones em todo o projeto. Vamos abrir a tag do link e colar o CDN no atributo de referência H. Vamos colocar o editor e o navegador lado a lado Assim mesmo. Em seguida, vou visitar o site do Google Fonts porque vamos usar algumas fontes do Google. E o projeto. Vamos prosseguir e pesquisar uma fonte do Google chamada great wipes Vamos selecionar esse bloco. Em seguida, vou pesquisar outra fonte do Google, que é Poppins Selecione alguns estilos diferentes. Em seguida, copie o link e cole-o no elemento principal. Depois disso, vou pegar o link force wiper dot JS porque vamos usar esse plug-in em todo o projeto Então, vamos pegar esse link e colá-lo no elemento principal. Além disso, precisamos pegar o link do JavaScript e colá-lo acima da tela. Tortura. Sim Tudo bem, então estamos prontos para começar Vamos inserir comentários para o contêiner. Em seguida, vou abrir a tag DIV com um contêiner de classe. Então, precisamos de comentários para a navegação. Vamos abrir um TOC suficiente com uma barra de navegação com o nome da classe. Vou inserir sua tag DIV, que será um logotipo Dentro do logotipo, vou abrir uma etiqueta com a classe fase sólida como uma caneca Saltzer Além disso, precisamos do texto do logotipo. Estou no empreendimento em que tenho o span tag com o café de teste e depois outra casa de spam. Isso é tudo sobre o logotipo. Em seguida, vou criar a Navegação. Pelo menos, vamos inserir seus elementos de link. Nós só vamos estar em casa. Vamos duplicar o link algumas vezes depois alterar o texto O segundo será Menu. Então teremos um blog sobre. Além disso. Nós temos aqui o Sharp. Em seguida, entre em contato. Além disso, vou inserir outro link que terá um ícone Font Awesome com a classe em fase sólida de FA, pego comprando. Na verdade, o ícone não está visível. Então, temos que consertar isso. Há um problema. Tudo bem, então agora tudo funciona bem. Em seguida, vou cuidar da aterrissagem. Estou no cabeçalho do site. Vamos inserir novos comentários e, em seguida, abrir o elemento Seção com o nome da classe Landing. Precisamos de elementos aqui e profundos, que serão Banner, nos quais vou abrir elemento de cabeçalho h3 com o título principal da classe O texto será bem-vindo. E também precisamos que outro título seja H1, com o texto Amazing Taste and beautiful place Em seguida, precisamos de um parágrafo com algum texto fictício. E também vou inserir seus botões com o nome da classe Banner BTN E também precisamos aqui do Banner BTN one. Vamos inserir seu pedido. Agora. Vou especificar o tipo que será o botão. E precisamos aqui do segundo com o nome da classe Banner entre dois. Para o texto. Será o menu Exibir. Logo depois disso, vou cuidar da apresentação de slides Precisamos aqui da tag DIV com a classe swipe, na qual vou inserir swipe E também precisamos aqui de um limpador de mouse com o nome de segunda classe. Dentro desse invólucro do limpador, vou abrir o elemento Div, que será deslizado por slide E então eu vou colocar sua imagem. Vamos selecionar a imagem na pasta de imagens. Vai ser image1. Então eu vou duplicar, deslizar duas vezes e mudar os nomes da imagem que precisamos para uma imagem três Em seguida, vou tirar você da paginação. Quero dizer, os controladores. Depois do Swiffer, precisamos do Landing Contact. Vamos instituir uma etiqueta DIV com os detalhes da aula que vou abrir, achei que a aula é um telefone fixo sólido Então, precisamos aqui, no fundo, onde vou inserir o elemento de extensão com algum número de telefone fictício Em seguida, precisamos de outro espaço no qual vamos inserir algum texto fictício Tudo bem, vamos duplicar isso. Desenvolvimento. Altere o ícone Font Awesome. O segundo será fa, ponto de localização. Além disso, vamos nos livrar desses números a partir daqui. E você deve usar um endereço fictício. O segundo elemento de extensão. Eu vou lutar contra eles. Localização fictícia falsa. Depois disso, vamos mudar o terceiro ícone que será se for um relógio, vamos nos livrar dos números e usá-los para você. Texto aberto segunda, sexta-feira. Até agora, o segundo elemento de extensão será o texto. Por favor Junte-se a nós. Estamos disponíveis das 8h às 21h. Tudo bem, na verdade, é isso. Sobre a marcação HTML. Vou começar a escrever o CSS. Vamos instituir comentários para estilos padrão. Em seguida, vou selecionar cada elemento usando um asterisco. E, como de costume, vou definir a margem e preencher as duas em zero Em seguida, vou definir o tamanho da caixa de borda. Em seguida, precisamos nos livrar da decoração de texto padrão, também do contorno E então eu vou definir a família de fontes para cada elemento como Poppins, Além disso, precisamos alterar o tamanho da fonte do elemento HTML porque vamos usar a RAM como unidade de medida. Vamos definir o tamanho da fonte para 62,5 por cento. Portanto, esses estilos padrão são aplicados aos elementos. Em seguida, vou inserir comentários para o contêiner. Em seguida, vamos selecionar Desenvolvimento para o contêiner de classe definido da forma como ele será 100% e a altura também será de 100%. Além disso, vou instituir comentários para o Landing. Porque agora eu vou esconder o banner usando o display none Tudo bem? Em seguida, vou inserir os comentários para a Navegação. Vamos continuar e selecionar a barra de navegação. Defina sua largura em 200 por cento. Para a altura, será de 10 g. Em seguida, precisamos aqui que a posição seja fixada. Então, as duas posições serão zero. Quanto à posição esquerda , também será zero. No momento, a barra de navegação não é viável. Vamos corrigir isso usando o valor 100 da propriedade de índice. Então temos aqui a Navegação. Em seguida, vamos usar o flexbox. Precisamos justificar o espaço do conteúdo uniformemente e também alinhar os itens no centro para centralizar os itens Em seguida, vou criar uma borda na parte inferior com o valor 0,1, ficar sólida e a cor será RGBA, cor branca com menor opacidade Então, aqui temos a borda e também os itens estão bem alinhados Em seguida, vou selecionar Logo. Vamos usar o display flex. Em seguida, precisamos alinhar o centro dos itens. E também vamos mudar o cursor, torná-lo um ponteiro. Certo? Depois disso, vou cuidar dos elementos I. Quero dizer, o ícone. Vamos definir o tamanho da fonte como estrangeiro. Além disso, vou usar aqui o texto do webkit, traçado. Vamos configurá-lo para 0,1 RAM e a cor será branca. Em seguida, vou definir a cor como transparente. E também precisamos de margem no lado direito. Vamos configurá-lo para uma execução. Então, temos aqui o ícone com traçado de texto. Em seguida, vou selecionar o texto do logotipo e usar o Flexbox. Vamos mudar a direção. Precisamos colocar os itens na coluna. E também precisamos alinhar o texto a partir do centro. Portanto, temos aqui os dois elementos de extensão. Em seguida, vou selecionar o primeiro elemento de extensão usando o seletor infantil F. Vamos definir o tamanho da fonte para execução. Então, precisamos que você transforme o texto em maiúsculas. Então vamos criar algum espaço entre as letras, mas 32,1 redondas E também mude a cor. Vou usar a cor branca. Então, como você pode ver, o primeiro elemento de extensão parece muito bom. Vamos duplicar esse código. Altere o número do enésimo filho. Será para mudar o tamanho da fonte. Vou vendê-lo até certo ponto por RAM. E também, vamos mudar a cor, torná-la E. Além disso, precisamos de margem na parte superior. Vamos adicioná-lo à rampa de -0,7. Então, o logotipo parece muito bom. Em seguida, vou cuidar da navegação. Vamos selecionar o elemento de link. Defina o tamanho da fonte em um ponto para a RAM. Então, precisamos que a transformação do texto seja maiúscula. Além disso, vamos definir a cor como E e precisamos de margem no lado direito. Serão três rampas. Tudo bem? Depois disso, vou criar algum espaço entre as letras. Vamos configurá-lo para apontar para a RAM. Em seguida, vou selecionar uma amêndoa com o mouse. Ao passar o mouse, vou mudar a cor. Vai ser C4, nove. P63. Use também a transição para um efeito suave. Então, quando passarmos o mouse sobre o item de navegação, cor padrão será alterada Vou selecionar o primeiro item de navegação porque quero definir sua cor por padrão para a cor que usamos aqui. Em seguida, vou cuidar do último item, do mínimo. Quero dizer, o carrinho de compras. Vamos ver o tamanho da fonte. Faça com que seja 1,8 RAM. Então, o ícone ficou maior. E depois vou usar pseudoelementos. Vamos definir o conteúdo como um. Então, vou mudar a largura. Terá 2,5 RAM e a altura também será 2,5 RAM. Vou mudar a cor de fundo. Vamos usar aqui a cor FFC 107. Vai ser na cor amarela. Em seguida, vou definir a posição como posicionamento absoluto em relação aos elementos principais Então, temos aqui depois do elemento, vamos mudar a posição. As duas posições serão -1,5 RAM do que a posição esquerda Vai ser uma RAM. Além disso. Vou fazer com que os elementos sejam arredondados. E depois ter que cuidar do conteúdo. Vamos configurar a tela como flexível. Em seguida, use o centro de conteúdo justificado e alinhe os itens. Centro. Além disso, vou mudar a cor. Vamos fazer com que seja 222. E, finalmente, vou mudar o tamanho da fonte. Vamos adicioná-lo a um ponto para executar. Tudo bem, então isso é tudo sobre a navegação. Em seguida, temos que cuidar da aterrissagem 42. Project 5: crie slideshow usando o Swiper.js: Tudo bem, então, quando terminarmos com a navegação, agora é hora de seguir em frente e cuidar da aterrissagem Na verdade, vamos nos livrar disso, sair daqui. E selecione Landing. Eu vou definir com 200 por cento. Isso é bastante alto. Vai ser 95. Altura da janela de Em seguida, vou selecionar Banner. Vamos definir a posição como absoluta. Em seguida, precisamos posicionar em relação ao elemento pai. Em seguida, vou definir a posição para 20%. Então, essa posição será de 50%. E para centralizar os elementos horizontalmente, precisamos transformar traduzir X com -50 Então, neste momento, o banner está visível. Vamos corrigir isso usando o valor 100 da propriedade de índice. Então, aqui temos o banner. Vamos colocar o texto no centro usando o centro de alinhamento de texto. E então vou selecionar o título principal. Diz Bombe, família dois, ótimas vidas. Cursivo. Em seguida, vou definir o tamanho da fonte para cair. A espessura da fonte Ran será 300, e eu vou mudar a cor. Vamos usar aqui está a cor. Ok, a seguir, vamos selecionar Banner, elementos de cabeçalho H1. Então, o tamanho da fonte para seis RAM, depois a espessura da fonte, será 400. Além disso, vou transformar o texto em maiúsculas. Em seguida, mude a cor. Vai ser branco. Então, aqui temos o título. Quero dizer, o segundo título. Próximo. Vou criar alguns espaços na margem com valores para RAM e zero. E também vou mudar a altura da linha. Vai ser 1,5. E crie algum espaço entre as letras. Vamos configurá-lo como ponto a ponto de execução. Tudo bem. Em seguida, vou selecionar o parágrafo do banner Vamos definir o tamanho da fonte para 1,5 RAM e a espessura da fonte será 300. Além disso, vou mudar a cor , vai ser branca. Em seguida, defina com 260 RAM. Além disso, vou usar margem com valores zero e automático do que para RAM e ROM. Então ele terá o parágrafo e agora temos que criar algum espaço entre as letras. Vamos configurá-lo para 0,1 rampa. Certo? Depois disso, vou cuidar dos botões. Vamos selecionar os dois botões. Defina a largura para 12 RAM e a altura será 5,5 rampa. Então, vou definir o curso, vamos colocar duas pontas. Então. A margem será de 0,1 RAM. E precisamos que o tamanho da fonte seja um ponto para a RAM, para que os botões tenham uma aparência melhor Em seguida, vou selecionar o primeiro botão. Mude a cor do plano de fundo. Use aqui aquela cor dourada do que precisamos que a borda seja. Nenhum. Mude a cor do texto. Faça com que seja de dois a dois. Então, o primeiro botão parece muito bom. Em seguida, vou duplicar esse código, alterar o nome da classe e personalizar o segundo botão Vou deixar a cor de fundo transparente que a borda tenha 0,1 RAM sólida. E você vê aqui a cor branca. Quanto à cor do texto, vou deixá-lo branco também. Tudo bem. Então, os dois botões parecem muito bonitos. Vamos selecionar o primeiro botão com o mouse, vou mudar a cor de fundo Vamos torná-lo transparente. E também mude a cor do texto. Faça com que seja dourado. Em seguida, vou definir a borda 2.1 de RAM, sólida e a cor será c4963 Vamos copiar esse código. Mude o nome da turma Então, a cor de fundo será dourada do que a cor dos textos. Você vai ser de dois a dois. Então, vou usar a propriedade de transição para tornar o fato mais suave Então, se passarmos o mouse sobre as partes deles, obteremos esse efeito agradável e legal Depois disso, vou cuidar da apresentação de slides. Vamos, vamos limpar. Disse que espere até 100% do que a altura será de 85%. Além disso, vou selecionar. Então eu deslizo seguido pela imagem. Vamos definir a largura para 100 por cento. A altura será de 100%. E também precisamos ajustar a imagem usando a capa de alimentação de objetos. Então, você tem a imagem com nova largura e altura. Agora é hora de escrever um pouco de JavaScript. Vamos criar uma variável. Vai ser roubado Vou usar algum código padrão pronto para a apresentação de slides que precisamos criar Limpador de notícias de objetos para o limpador de nomes de classes. Então, precisamos aqui e outros objetos com a propriedade auto-play, que incluirão objeto como valor Precisamos aqui, atrasar a propriedade com 4.000 s. Em seguida, precisamos de outra propriedade desativada na interação Vai ser falso. Então eu vou criar aqui uma nova propriedade com um valor, destino, quero dizer Effect Fade Então, precisamos de um loop, o que será verdade. Além disso. Vou instituir a paginação. Aqui, um elemento de objeto será deslizar ou eu estou no nome da classe, deslizar ou Em seguida, precisamos de uma propriedade chamada clicável, que só será verdadeira Agora, como você pode ver, a apresentação de slides funciona bem e a paginação também funciona Tudo bem, em seguida, vou personalizar os círculos abaixo. Quero dizer os controladores de paginação. Precisamos selecionar ponto de extensão, deslizar ou marcador de paginação Vamos definir a largura para duas RAM do que a altura. Para bater também. Precisamos que a opacidade seja uma. Em seguida, vou colocar a margem no lado direito, 1,5 RAM. Precisamos aqui aplicar esse código. Então a cor de fundo será AA. Portanto, precisamos que a posição aqui seja relativa. Então agora o controle parece melhor. Em seguida, copiarei o nome da classe e seguirei os pseudoelementos Vamos adicionar conteúdo ao vazio. Então, precisamos ter 2,5 RAM. A altura também será de 2,5 cm. Então, precisamos de uma parte da taxa usada, se ela estiver presente, porque precisamos circular. Vamos definir a posição como. Absoluto. A posição será de 50%. A posição líquida também será de 50 por cento. E então, para enviar para o elemento perfeitamente quando você se transforma, traduza com valores de -50% e, novamente, -50 por cento pois a cor de fundo ficará transparente E precisamos aqui que a borda aponte para a RAM sólida e a cor será AA. Então agora as balas, quero dizer, os controles parecem muito bons Em seguida, vou copiar o nome da turma. Vamos colar aqui. Na verdade, precisamos colá-lo duas vezes, depois remover elemento span do seletor e aderir Então, quando o marcador estiver ativo, precisamos mudar a cor de fundo Vamos adicioná-lo ao branco. Então, vou duplicar esse código e seguir os pseudoelementos Então, uma vez que o marcador esteja ativo, temos que mudar a borda dos pseudoelementos posteriores Quero dizer, a cor da borda. Também vai ser branco. Agora é possível ver que tudo funciona bem e, com esta apresentação de slides do limpador, terminamos Em seguida, vou selecionar Landing Contact, Definir posição como absoluta. Então, para posicionar, será H 5%. A posição esquerda será zero. Além disso, vou definir a largura como 100%. E a altura será 15. Altura da janela de visualização. Mude a cor do plano de fundo. Vou usar aqui a cor preta. Então, aqui temos a parte inferior do pouso, quero dizer, o contato de aterrissagem. Vamos usar o flexbox. Precisamos aqui justificar o conteúdo com valores colados uniformemente. Precisamos de um espaço uniforme entre os itens flexíveis e também temos que alinhar os itens no centro Em seguida, vamos mudar a cor, torná-la branca. Então, aqui temos os detalhes. Na verdade, está faltando aqui o ícone Font Awesome. Vamos verificar o código. Precisamos da localização aqui. Então agora, agora o ícone está visível. Em seguida, vou selecionar detalhes. Use novamente livros de fluxo. Agora, o ícone e os elementos de texto são colocados lado a lado Em seguida, vou selecionar os elementos I, definir o tamanho da fonte como, para que a cor fique mais clara. Colton. Além disso, vou criar algum espaço no lado direito. Vamos bater na margem direita para correr. Então, como você pode ver, os ícones estão bonitos. Em seguida, vou selecionar o desenvolvimento dentro dos detalhes. Vamos configurar a tela como flexível. Então precisamos mudar a direção. Vamos fazer uma coluna. Agora temos que personalizar os elementos de texto. Vamos prosseguir e selecionar o primeiro elemento do caminho usando o seletor F child Vou mudar o tamanho da fonte. Vai ser 1,61. Então precisamos mudar a cor. Vamos torná-lo branco. E também vou usar a margem inferior. Vamos definir como 0,5 para N. Para que os primeiros elementos de extensão tenham uma boa aparência. Vamos continuar e duplicar esse código. Alterar o seletor de enésimo filho será dois. E temos que mudar o tamanho da fonte. Vamos configurá-lo para 1,4 e também mudar a cor, torná-lo BBB e eliminar a margem inferior Defina a largura para 2M. Tudo bem, então é isso. Sobre o desembarque. Tudo parece ótimo. Vamos seguir em frente. 43. Projeto 5: crie e personalize a seção About: Tudo bem, então vamos seguir em frente e começar a criar a próxima seção do nosso projeto, que será uma seção Sobre Vou entrevistar novos comentários para a seção Sobre. E então vamos abrir a tag da seção com o nome da classe about. Vou instruir sua tag DIV na qual teremos o ícone Font Awesome com os nomes das classes fa, solid, a mobile Em seguida, precisamos aqui de elementos de cabeçalho H1 com o texto fácil de ordenar Então, o próximo elemento será um parágrafo com texto fictício Vamos continuar e duplicar Development duas vezes e depois mudar o nome da classe Seu caminhão de carros. O Hannigan atrial, qual será o parto mais Quanto a este terceiro item, precisamos aqui, de uma caneca quente Vamos para o elemento H1, vou inserir um café de qualidade para você Ok, então isso é tudo sobre a marcação HTML. Agora, é hora de não acabar, comece a escrever um pouco de CSS. Vou inserir novos comentários na seção Sobre. Em seguida, vou selecionar o elemento Seção com uma classe sobre. Vamos definir a largura como 100% do que a altura será 60 de altura da janela de visualização Vamos mudar a cor de fundo. Eu vou usar aqui. Cor dourada. Então precisamos usar o Flexbox. Vamos colocar itens no centro e também usar o centro de conteúdo justificado Então, podemos ver que temos aqui elementos bem alinhados. Em seguida, vou selecionar desenvolvimento dentro do elemento da seção Sobre, que passará para a RAM. Então eu vou definir que a altura será de 35 metros. Além disso, vou criar algum espaço usando a margem com os valores zero ou três rampa e, em seguida, alinhar o texto no centro Em seguida, vou usar novamente o Flexbox. Mude a direção , vai ser uma coluna. Além disso, precisamos alinhar os itens, centralizar e justificar o espaço do conteúdo uniformemente. Então, agora temos resultados muito melhores e temos dois elementos de estilo. Vamos começar com o microfone rápido e definir sua largura para nove R& do que a altura será dez RAM Vamos mudar o tamanho da fonte. Vai ter memória RAM completa. Além disso, vou usar seu traço de ataque do Web Kit com valores apontando para a RAM, e a cor será 282727 Além disso, temos que definir a cor, torná-la transparente. Tudo bem, então os ícones do Font Awesome estão bonitos. Em seguida, vamos usar a borda 0.1 RAM, sólida. A cor de oito a sete a sete. Em seguida, vou enviar para o Font Awesome ícones usando o Flexbox, conteúdo justificado e o centro de alinhamento Ok, então é isso. Bem, os ícones Font Awesome. Em seguida, vou selecionar o elemento de cabeçalho H1. Vamos definir o tamanho da fonte dois como rampa. Então, vou definir o peso padrão para 400. Transforme texto em maiúsculas. Em seguida, mude a cor. Vou te usar da mesma cor. Ok, então seus títulos estão bonitos e terei que personalizar o parágrafo Vamos definir o tamanho da fonte. Será 1,5 RAM. Então, precisamos aqui do peso da fonte. Vai ser em 300. Mude a cor, passe para H7 a sete. Então é isso. A seção Sobre está bonita e agora podemos seguir em frente. 44. Project 5: seção de menu de compilação: Tudo bem, então com a seção Sobre, terminamos e agora temos que seguir em frente E então dois Crie a próxima seção, que será o Menu. Vou inserir seus novos comentários para a nova seção. E então, como sempre, vou abrir a tag da seção com um menu de classe. Então, dentro desse elemento da seção, vou inserir uma tag DIV, que será Menu à esquerda O lado esquerdo desta seção. Precisamos aqui do elemento de cabeçalho h3 com o título principal da classe Vamos instituir essas capas. Então, precisamos de elementos de cabeçalho H1. Eu só vou ser nosso cardápio. Próximo. Vou inserir aqui o parágrafo com um texto fictício E também precisamos aqui de um botão. Terá aula Menu, BTN. Também precisamos do atributo type. Vamos ser apenas Bateson. Para o texto. Eu vou para o Instituto aqui. Exibir menu completo. Logo após o desenvolvimento. Vou criar outro, que será o Menu, certo? Precisamos do Menu aqui, certo? Imagens. Vamos abrir a tag DIV, que será o wrapper Menu Image Esse elemento incluirá quatro imagens diferentes. Vamos selecionar o primeiro na pasta de imagens. Vai ser a imagem quatro. Então eu vou duplicar esse código três vezes e mudar os nomes das imagens Precisamos da imagem cinco, da imagem seis e, em seguida, da imagem sete. Ok, então, na verdade, isso é tudo sobre a marcação HTML. Agora tem que seguir em frente e começar a escrever o CSS. Vamos instituir novos comentários para o Menu. Em seguida, vou selecionar os elementos da seção e definir sua largura e altura. A largura será de cem por cento. Quanto à altura, vou fazer com que seja 70 de altura da janela de visualização Em seguida, vou selecionar Menu Image wrapper para fazer com que a imagem fique menor Vamos definir com 225 RAM e a altura será de 25 RAM. Em seguida, vou selecionar as imagens e definir a largura como 100% e a altura 100%. Além disso, precisamos que a velocidade do objeto seja coberta. Agora podemos ver que temos imagens relativamente menores. Vamos definir o plano de fundo para o menu. Vou usar a função de gradiente linear com cor RGBA Estou na cor preta com opacidade de 0,9. E, novamente, precisamos de RGBA, cor preta 0,8, quero dizer a opacidade Em seguida, vou definir a imagem como plano de fundo. Precisamos selecionar sua imagem oito. E também precisamos de uma posição central e sem repetição. Em seguida, vou definir o tamanho do plano de fundo a ser coberto. Portanto, temos aqui a imagem como plano de fundo desta seção. Em seguida, vou usar o flexbox. Precisamos alinhar os itens no centro. Então, temos aqui as imagens dos itens colocadas no centro. Em seguida, vamos seguir em frente e selecionar o lado esquerdo. Defina a largura para 50%. Além disso, vou selecionar o Menu à direita e também definir sua largura para 50 por cento. Tudo bem, depois disso, vou selecionar Menu, certo? Imagens, defina sua largura para 60 RAM. E então eu vou usar o flexbox. Precisamos usar o envelopamento flexível com um rap de valor para embrulhar as imagens e alinhá-las. Assim mesmo. Vamos criar algum espaço entre as imagens usando margem. Vamos configurá-lo como RAM. Além disso, precisamos do ponteiro do cursor para a imagem em si. Depois disso, vou tirar você do lado esquerdo. Precisamos de um centro de alinhamento de texto. E também vou colocar a margem no lado direito, 23 RAM. Então, precisamos da margem esquerda para o menu, certo? O valor três REM também. Ok? Na verdade, o alinhamento de texto deve estar à direita e não no centro aqui Em seguida, vou selecionar Menu à esquerda, seguido pelo título principal. Vamos definir o tamanho da fonte para seis RAM. Então, o título parece muito bom. Em seguida, vou selecionar Menu à esquerda seguido pelo elemento de cabeçalho H1 Vamos definir o tamanho da fonte para seis RAM. Também o peso da fonte deve ser 300. Em seguida, vou transformar o texto em maiúsculas. Em seguida, vou mudar a cor do cabeçalho. Vai ser branco. Além disso, vou definir a margem superior para menos memória RAM total. Portanto, temos aqui o elemento de cabeçalho H1. Em seguida, vou selecionar o parágrafo e personalizá-lo. Primeiro, vamos mudar o tamanho da fonte. Vai ser um ponto para a corrida. Em seguida, vou mudar a cor do parágrafo. Vamos configurá-lo para 777. Essa é uma cor cinza claro. Em seguida, vamos esperar até ter 50 RAM. E também vou colocar a margem em RAM e zero, depois estrangeira. E eu vou remar. Ok? Então, o parágrafo parece bom. A única coisa que precisamos aqui é altura da linha, o valor 1,2 Ok? Depois disso, vou tirar você do próximo. Seremos apenas o botão Menu. Vamos definir a largura para 15 percursos. E a altura será de 5,5 RAM. Precisamos da cor de fundo, que será transparente. Em seguida, vou definir a borda 2.1 RAM. Sólido. A cor vai ser dourada. Portanto, precisamos que a cor do imposto também seja chamada de. Em seguida, altere o tamanho da fonte. Vai ter 1,3 RAM. Vou transformar o texto em maiúsculas. Em seguida, coloque o cursor para apontar. Ok, então o botão e na verdade, o lado esquerdo desta seção parecem muito bons. Em seguida, vou usar um efeito de foco. Vamos mudar a cor do plano de fundo. Vou configurá-lo para Golden. E também vou mudar a cor dos textos. Vamos configurá-lo como 222 e depois usar a transição para obter um efeito suave Portanto, temos aqui um bom efeito exagerado. Agora temos que cuidar do lado direito. Também vou criar um efeito de foco para as imagens. Então, vamos selecionar Menu Image wrapper com o mouse e, em seguida, seguido pelo seletor de imagem, precisamos transformar a escala com um valor 1,3 Além disso, precisamos de transição. Depois de passar o mouse e enviar, as imagens devem se ampliar Vamos usar o overflow hidden para ocultar as partes das imagens Agora temos aqui um efeito muito bom e na verdade, com a seção Menu, terminamos. Então, vamos seguir em frente. 45. Project 5: crie e estilize dados com contadores animados: Tudo bem, então, quando terminarmos com a seção Menu, agora é hora de seguir em frente e criar a próxima seção Seremos apenas os dados. Vamos inserir novos comentários para a nova seção. Nesta seção, teremos contadores animados. Vamos abrir a tag da seção com os dados da classe. Em seguida, precisamos inserir a tag U DIV, que incluirá o invólucro de ícones Vamos reabri-la com os nomes das turmas. Se for sólido, uma caneca quente. Em seguida, precisamos aqui do elemento Style com o nome da classe. Eu posso BG. Em seguida, teremos outro elemento span com a classe numb, no qual precisamos de um atributo chamado data Bem, vamos inserir alguns números. Digamos 350. Quanto ao valor padrão, vou passar aqui zero. Em seguida, teremos outro período com informações da aula, na qual, em vez disso, vou usar filiais de café. Vamos duplicar o desenvolvimento três vezes e depois mudar os números E também precisamos alterar o conteúdo das informações. Vamos inserir seu número de prêmios. Então, no próximo elemento, também teremos 25, 40. Este painel deixará clientes satisfeitos. Para o último item que vou inserir aqui, digamos 750 também. Esse valor final ficará preso. Tudo bem, então, na verdade, isso é tudo sobre a marcação HTML. Vamos começar a personalizar essa seção. Vou instituir novos comentários para os dados. Em seguida, vou selecionar o elemento Seção e definir com dois 100%. A altura será de 50 pontos de altura da janela de visualização. Então, precisamos que o fundo seja um gradiente linear. Vou usar aqui o valor RGBA. Estou na cor preta com ponto de opacidade para. E também precisamos aqui e de outros valores RGBA. Novamente, cor preta com opacidade de 0,3. Em seguida, precisamos selecionar a imagem como plano de fundo. Vai ser a imagem sete. Em seguida, temos que especificar a posição que será o centro. E também não precisamos repetir. E definimos o tamanho do plano de fundo como capa. Ok, então aqui temos a imagem de fundo. Em seguida, vamos usar o flexbox. Vou usar o centro de conteúdo justificado e alinhar o centro dos itens no centro do Aqui temos os itens flexíveis. Em seguida, vou selecionar elementos. Se a seção de dados tiver 25 RAM, a altura será 30. Correu. Em seguida, vou usar novamente o Flexbox. Vamos mudar a direção. Vai ser uma coluna. E também precisamos alinhar os itens e o centro. Então eu vou usar justificar que o conteúdo será valores Pacioli Precisamos criar um espaço uniforme entre os itens flexíveis. Em seguida, vou selecionar Posso embalar e definir sua largura como Tran Então, a altura também será de oito RAM. Em seguida, precisamos que o mais grosso seja o ponteiro. E agora temos que selecionar o fundo do ícone. Vou usar o bloco de exibição. E então vamos definir a largura para 100%. Também precisamos que a alta seja 100%. Então eu vou usar a borda. Ele terá 0,1 RAM sólido e a cor será dourada. Então, temos aqui o histórico. Próximo. Precisamos selecionar elementos. Essa é a posição em relação à posição absoluta em relação ao elemento pai, que é o invólucro de ícones Em seguida, vou definir a primeira posição para 50%. Então, precisamos que a posição esquerda também seja de 50 por cento. E para centralizar o elemento perfeitamente, precisamos transformar e traduzir. Será que os valores serão -50 por cento e novamente -50 por cento. Agora o I conserve perfeitamente centrado dentro das caixas. Em seguida, vou aumentar o tamanho da fonte. Vai ser reprisado. Além disso. Precisamos, novamente, um traçado de texto do webkit com um valor apontando para a RAM e a cor dourada E também precisamos definir se a cor é transparente. Então, agora temos bons ícones de café. Vamos continuar e selecionar o invólucro de ícones com o mouse, seguido pelo fundo do ícone Ao passar o mouse, vou mudar a cor de fundo. Vai ser dourado. E também precisamos girar os elementos de acordo com a direção Z. E o valor será de 135 graus. Além disso. Precisamos de uma transição para um efeito suave. E será para o plano de fundo. Então, quando passarmos o mouse sobre as caixas, elas girarão bem. Precisamos exibir os ícones. Vamos usar o índice com o valor 100. Na verdade, os ícones ainda não estão visíveis. Na verdade, o problema é que temos aqui a mesma cor para o traçado do texto. Então, quando passamos o mouse sobre o invólucro do ícone, também precisamos alterar a cor do elemento I. Então, vamos pegar esse código e mudar a cor para um C7 C7. Também precisamos de uma transição aqui para o ícone. Então, agora o problema deve ser resolvido. Ok, é isso mesmo. Tudo funciona bem e temos aqui um efeito de impressão, bonito e legal. Ok, a seguir, precisamos selecionar numb e seu tamanho de fonte para três rampas Então eu vou mudar, a cor vai ficar dourada. Então, temos aqui o máximo agora temos zeros por padrão Em seguida, vou selecionar informações. Será que o tamanho da fonte será 1,8 RAM e a cor será 999 Então, temos aqui os elementos de extensão e agora temos que escrever um pouco de JavaScript. Vamos criar o menu Variável. Vou selecioná-lo usando o método seletor de consulta. Vamos especificar aqui o nome da classe. Em seguida, precisamos de números variáveis. É necessário selecionar os números usando o método seletor de consulta all Em seguida, precisamos da variável chamada start, que será falsa por padrão. Será o valor booleano. E agora temos que criar uma função start count. Vamos inserir aqui elementos de parâmetros. Agora temos duas variáveis Create max, que serão o valor do conjunto de dados. Quero dizer, o valor dos dados, bem, atributos, que usamos aqui no elemento HTML, precisamos pegar esses números e armazená-los na variável max. Em seguida, precisamos contar, que será a função de intervalo definido. Então, precisamos definir o conteúdo do texto. E, na verdade, temos que aumentá-lo em um usando o operador de incremento. E então precisamos da declaração IF na qual temos que definir o seguinte. O conteúdo do texto. Se o TextContent for igual a max, devemos limpar a integral E temos que passar aqui a variável count. Quanto ao intervalo , será 2000 dividido pelo nonce Em seguida, temos que adicionar o ouvinte de eventos ao objeto da janela com o evento scroll e passar aqui a função de retorno de chamada Precisamos começar a contar depois de rolar para baixo. Portanto, precisamos aqui da instrução IF na qual temos que definir a seguinte janela. rolagem Y é maior ou igual ao deslocamento do ponto do menu Quando chegarmos à seção Menu, precisamos iniciar a contagem. Então, precisamos que as instruções nas quais devemos passar não comecem, que é o valor booleano E então temos que percorrer os números. Então, agora temos que chamar essa função.com e passar o parâmetro none Em seguida, temos que definir o valor booleano, começar como verdadeiro. Ok, então, quando rolarmos para baixo, os contadores começarão. Tudo bem, agora temos que cuidar da barra de navegação. Precisamos torná-lo pegajoso depois de rolar para baixo. Portanto, precisamos usar esses eventos de rolagem aqui. Vamos criar uma nova variável agora está longe. Vou selecioná-lo usando o método querySelector. Vamos especificar aqui o nome da classe agora quatro. Então, agora precisamos de uma lista de classes de pontos. E temos que adicionar à classe da barra de navegação Tiki usando o método toggle Além disso, precisamos passar pela rolagem de pontos da janela do ano. Y é maior que zero. Em seguida, precisamos selecionar a classe Tiki, seguida pela barra de navegação E temos que mudar a altura. Serão oito RAM. E também precisamos mudar a cor de fundo. Vou colocá-lo em preto. E também precisamos aqui fazer a transição todos os pontos 5 s. Então, uma vez que rolamos para baixo, obteremos esses efeitos agradáveis e legais Na verdade, precisamos resolver um pequeno problema. A barra de navegação acabou atrás do Landing, então precisamos do índice com um valor maior Ok, agora o problema está resolvido. E com esta seção, terminamos 46. Projeto 5: seção de crie clientes: Então, na aula anterior, criamos uma seção de dados, quero dizer os contadores de dados animados E agora temos que seguir em frente. E então, vamos trabalhar na próxima seção, que será uma seção de depoimentos Vamos inserir seus novos comentários. Clientes. Vou chamar esta seção de Clientes. Em seguida, vou abrir o Tipo de seção com a classe Clientes na qual precisamos de um Desenvolvimento, que será o Banner do Cliente Dentro do desenvolvimento, vou abrir a tag de cabeçalho h3 com o título principal da classe e com o testemunho em texto Em seguida, precisamos dos elementos de cabeçalho H1. E serão clientes. Digamos que, em seguida, precisamos fazer um parágrafo com um texto fictício. Depois disso, vou abrir a tag DIV, que será clientes E então precisamos de outra profundidade, que será o próprio cliente. Vamos instituir um parágrafo com um texto fictício. Em seguida, precisamos de elementos profundos, que serão o invólucro da imagem Vamos selecionar o cliente de imagem um. Em seguida, precisamos do elemento span para o nome do cliente. Ok, vou duplicar o cliente algumas vezes. E então vamos mudar as imagens. E também precisamos mudar o texto, texto fictício. Mude o nome. Vai ser Nick Brown. Próximo declínio renovado: três. E o nome vai ser David Jones. Em seguida, vou mudar o texto, também o nome da imagem, o nome do cliente. E, finalmente, precisamos do cliente cinco. O nome será Mary Brown. Tudo bem, então é isso. A marcação HTML está pronta. Vamos começar a escrever um pouco de CSS. Vamos inserir novos comentários para os clientes. Em seguida, vou selecionar o elemento Seção. Vamos definir a largura para 100%. Então, a altura será 70 de altura da janela de visualização. Em seguida, precisamos de um plano de fundo com função de gradiente linear na qual vou inserir o valor RGBA Será uma cor preta com opacidade de 0,9. Em seguida, precisamos novamente do valor RGBA com uma cor preta com opacidade Em seguida, vou selecionar a imagem da pasta de imagens. Vai ser a imagem oito. Vamos definir a posição. Vai ser o centro. E também precisamos não repetir Em seguida, vou definir a propriedade de tamanho do plano de fundo para cobrir. Ok, então aqui temos a imagem de fundo. Em seguida, temos que cuidar das imagens porque elas são duas maiores. Vamos definir a largura para cinco a partir de. A altura também será de cinco. Em seguida, precisamos que o objeto phi seja coberto. Também os contorne e use um raio de borda de 50 por cento. Agora temos imagens menores. Em seguida, vou selecionar Banner de clientes, definir sua posição como absoluta Em seguida, posicionamos em relação ao elemento pai, que é uma seção. Vamos configurar a posição será dez por cento e a posição esquerda deve ser 50 por cento e apenas centralizar os elementos na horizontal usando Transform Translate X com o valor -50% Também precisamos aqui do centro de alinhamento de texto. Então, aqui temos o Banner, que no momento não está bem visível Vamos prosseguir e selecionar Título principal. Vou definir o tamanho da fonte para seis RAM do que precisamos. Banner do cliente, seguido pelo elemento de cabeçalho H1, digamos que o tamanho da fonte também seja seis Roma E também precisamos que a espessura da fonte seja 300. Precisamos transformar o texto em maiúsculas e também mudar a cor Vai ser branco. Então, agora o título está visível e parece muito bom. Em seguida, vamos definir a margem superior de dois menos quatro rodadas. Ok, então os dois títulos parecem muito bons. Vou me sentar em posição de parente no título principal. E então precisamos do índice com um valor maior. Ok, agora temos melhores resultados. Em seguida, vou cuidar do parágrafo dentro do banner do cliente Vamos acrescentar até 1,6 RAM. E a cor será 777. Além disso, precisamos que a margem superior seja totalmente executada. Em seguida, precisamos definir a altura da linha em um ponto para que aqui tenhamos o parágrafo. Em seguida, vou cuidar da posição do cliente em absoluto. Então, precisamos que a posição inferior seja zero. E também precisamos de display flex com itens de alinhamento. Flexione e temos que colocar os itens na parte inferior da seção Em seguida, vou selecionar o cliente. Vamos definir com dois 25%. Agora precisamos que a altura seja de 25 RAM. Em seguida, vou definir a cor de fundo como dourada. Vou criar algum espaço usando o preenchimento. Vamos configurá-lo como, para ser executado. Em seguida, mude a cor, torne-a branca. Então, terá os clientes. Na verdade, acho que algo está errado aqui. Vamos verificar o arquivo HTML. Então, temos os primeiros clientes. Precisamos movê-lo e colocá-lo aqui como o primeiro cliente na lista. Então, agora está tudo bem. Em seguida, vamos selecionar clientes. Com o seletor de crianças F, precisamos de um segundo cliente, vamos dizer oi para uma RAM Então eu vou duplicar esse código, mudar o número. Serão quatro. Vamos definir a altura para 21 RAM. Agora temos alturas diferentes para os clientes. Em seguida, vou selecionar itens pares. Vamos definir a opacidade 2.9. Então, agora temos um resultado melhor. Vou pegar esse código e colá-lo aqui. E vou adicionar aqui a margem no lado direito. Vamos configurá-lo para ser executado a fim de criar algum espaço entre a imagem e o nome. Em seguida, vou selecionar o parágrafo do cliente. Vamos definir o tamanho da fonte para 1,6 RAM do que a margem. Na parte inferior vai estar correndo. Os parágrafos. Esteja bonita. Em seguida, vou selecionar a posição do cliente dar e sentar como absoluta. Então, precisamos da posição relativa para o elemento pai, que é um cliente. Vamos definir uma posição para a RAM. Além disso, precisamos do Flexbox. Precisamos alinhar os itens no centro verticalmente. Então, agora as imagens e os nomes estão bem alinhados. Agora eu tenho que cuidar do nome. Selecione elementos de extensão, tamanho da fonte em um ponto para RAM. E também precisamos que a transformação do texto seja maiúscula. Então é isso. Esta seção parece muito boa. Vamos passar para a próxima palestra. 47. Projeto 5: crie e estilize uma seção de contatos e rodapé do site: Tudo bem, então, quando terminarmos com a seção de clientes, agora temos que seguir em frente e criar a última parte do projeto Temos que criar a seção de contato seguida pelo rodapé Então, vamos inserir novos comentários para o conceito. E então vou inserir o elemento Seção com o nome da classe Contact. Vou inserir aqui a tag DIV, que será Contato à esquerda, no lado esquerdo desta seção Então precisamos do Contact, certo? No qual vou inserir elementos formados. Os elementos formados terão título H1, tag, livro e tabela. Em seguida, teremos um grupo de entrada no qual vou inserir o elemento de entrada com o tipo de texto e com um atributo de espaço reservado, que será o primeiro nome. No próximo minuto. Elemento de entrada semelhante com LastName. Vamos duplicar o grupo de entrada. Altere o tipo do elemento de entrada. Vai ser um e-mail. E precisamos aqui do endereço de e-mail. Em seguida, precisamos do telefone aqui. Em seguida, vou duplicar novamente o grupo de entrada. Vamos eliminar o primeiro elemento de entrada e colocar sua área de texto com o atributo de espaço reservado Vamos ser apenas uma mensagem. Além disso. Vou me livrar do segundo elemento de entrada e colocar o botão Aqui com um botão de digitação. Então, precisamos do atributo de classe, entre em contato com a BGN. E eu vou marcar sua consulta. Tudo bem, então isso é tudo sobre a marcação HTML. Vou começar direto com CSS. Vamos inserir comentários para a seção de contato. Vou selecionar os elementos da seção. Largura definida. Será 100%, a altura, será 60 de altura da janela de visualização Em seguida, precisamos voltar às cores. Vai ser preto. Então, vou usar o flexbox. Precisamos alinhar elementos usando o Flexbox. Em seguida, vou selecionar o lado esquerdo e definir sua largura para 50 por cento. E a altura será de 100 por cento. E eu vou mudar o plano de fundo. Vamos usar a função de gradiente linear. Com valor RGBA. Vai ser de cor preta com opacidade de 0,5. Em seguida, precisamos da cor similar. A opacidade será 0,4. Além disso, precisamos selecionar a imagem da pasta de imagens como plano de fundo. A imagem será a imagem um. Então, novamente, precisamos do Center. Estou na posição e agora repito. E também precisamos que aqui o tamanho do plano de fundo seja coberto. Temos aqui a imagem no lado esquerdo da seção de contato como plano de fundo. Em seguida, vou selecionar Contato, certo? Vamos vendê-lo para 50%. A altura será de 100%. Em seguida, vou usar novamente o Flexbox. Você justifica o centro de conteúdo. E também precisamos alinhar os itens para serem centralizados. Assim, é possível ver que o conteúdo é colocado no centro do lado direito da seção de contato. Em seguida, vou selecionar Contato, certo? Elemento de cabeçalho H1. Vamos aumentar o tamanho da fonte. Vai ter memória RAM completa. Em seguida, vou definir a espessura da fonte para 300 e mudar a cor. Vai ser branco. Em seguida, vou criar espaço usando margem se o valor fosse 0,03 RAM e para RAM Então ele terá o título. Depois disso, vou selecionar o grupo de entrada. Vamos usar novamente o Flexbox Next, vou selecionar o grupo de entrad