Site de carteira pessoal responsivo - usando HTML, CSS e JavaScript

1. Introdução: Oi caras, Meu nome é Peter e bem-vindo ao curso em que vamos construir um website portfólio responsivo moderno e este presidente converte para o mundo digital. É realmente importante se destacar da multidão e ser único. Se você está se candidatando a um emprego ou se aproximando inclinado, você deve ter algo que é único ou distinto, que é definido para o seu bot. Com isso dito, ter um site de portfólio que mostra quem você é, quais são as diferentes habilidades que você processa isso atormentando os diferentes projetos que têm que todas essas coisas podem criar uma melhor impressão de você. Tudo bem, agora falando sobre este curso em particular, este curso é curado para iniciantes. Mas será melhor se vocês tiverem um conhecimento básico de HTML e CSS. E agora vamos falar sobre a estrutura do curso. Então, primeiro de tudo, vou dar a vocês uma visão geral básica do nosso site. Explicar isso é projetado e funcionalidades que vocês possam ter uma melhor compreensão do que vamos construir. Em segundo lugar, vou compartilhar algumas práticas recomendadas que você pode implementar enquanto aprende, especialmente enquanto aprende a codificar, que eu possa obter o máximo potencial desses deuses em particular. Depois disso, ficamos sob a parte principal. Então, em primeiro lugar, estaremos montando o projeto. E sob o projeto, criamos os diferentes arquivos e pastas necessários. O selecionar ou escolher as cores diferentes que estamos usando este site específico. E também importamos todas as majors necessárias para um projeto. Depois disso, começamos a codificar um site. Então vamos codificar o site seção por seção e RB começar com a seção herói, seguido pela seção abortar, seção de habilidade, seção projeto, seção de blog e seção de contato. E uma vez que completamente codificado site, agora é hora de nós para fazer o nosso site responsivo. E como sabemos hoje em dia, quase todos os usuários estão navegando na Internet através de seu smartphone. Portanto, é muito importante ter um site que possa se adaptar a diferentes proporções de tela. Então temos dois vídeos diferentes nos quais passo a passo e expliquei como podemos fazer um site responsivo. Então isso é sobre a estrutura do curso. E como eu já disse, isso é significativamente curso em que eu falo sobre as coisas básicas, bem como a parte de desenvolvimento da maneira mais simples possível. Então é isso pessoal, muito obrigado por assistir e eu realmente, realmente espero ver vocês na próxima lição. 2. Visão geral do site: Olá pessoal, bem-vindos ao vídeo. E neste vídeo em particular, vou dar a vocês a visão geral básica do nosso site. E agora o que você está vendo facilmente produto final. E agora estamos na seção de heróis. E na parte superior aqui você pode ver esta barra de navegação ESR. E dentro da barra de navegação temos um logotipo, links diferentes e um botão. E esses links são completamente funcionais. Então, por exemplo, se eu quisesse ir para a seção de blog novamente, clique na seção de blog e morre quer levar-nos diretamente para a seção de blog com uma animação suave. E aqui na seção de heróis, na segunda seção temos tau, a imagem de herói, como no último texto junto com o botão. E a parte inferior, temos uma estrutura afiada. Assim, esta estrutura é feita usando clip-path, e nós também definimos a curvatura usando a função polígono. Então pessoal, se vocês não entendem esses termos, não se preocupem, eu expliquei todas essas coisas em profundidade nas próximas seções. Então, se você não entender esses termos, não se preocupe, no final de cada seção, tudo ficará completamente claro. Agora vamos passar para a seção sobre. Então, na seção do conselho temos uma imagem, e no lado direito temos uma seção de texto que está tendo um bater uma pequena introdução. E aqui temos nossos ícones de mídia social. E esses ícones têm uma chamada à ação. Então, se eu clicar em qualquer um destes, estes, Eu quero levar-nos para o respectivo lado positivo e agora vamos passar para a seção de habilidades. Então, na seção de habilidades novamente, temos a curvatura aqui. Temos o título como último um polígrafo. E esta é a seção de carros. Então temos um total de seis cartas diferentes e cada carta está tendo um efeito de pairar. Então nós basicamente fizemos uso de grades CSS para alcançar esta estrutura deus. Então aquele vídeo em que vamos construir a seção de habilidades é pacote de valor começou a aprender sobre as grades CSS, como podemos definir uma grade, como podemos fornecer lacuna entre deuses e muito mais. Então, cada guarda tem uma imagem e uma informação de texto. E é isso. Isso é tudo sobre a seção de habilidades. Agora vamos passar para a seção do projeto. Então esta é a seção do projeto. Temos um rumo e aqui temos um controle deslizante. Então, este isqueiros basicamente feito usando uma biblioteca JavaScript externa conhecida como slick slide it. Então, neste vídeo específico, vamos aprender sobre como podemos usar uma biblioteca externa, como podemos acessar propriedades específicas da biblioteca e muito mais. E aqui você pode ver que isso consiste em uma imagem e um parágrafo. E na parte inferior, você pode ver que pegamos portas e esses pontos indicam o slide atual. Então você vai ver que um agora estamos no primeiro slide, então a cor da tela e é mais pesado, mais largo bit. Agora, se eu for para o segundo, o segundo é basicamente destacado com uma cor diferente e uma largura mais larga. Então isso é tudo sobre a seção do projeto. E agora vamos para a seção do bloco. Então esta é a seção do blog, e nós temos uma biografia de Hibbing, um fundo escuro, e três cartas diferentes. E dentro de cada cartão temos imagem e as informações de texto. Então corantes ou laboratório ou para a seção do bloco. E agora vamos passar para a última seção que é a parte de trás do milho. Então aqui temos um título. Temos duas cartas diferentes. E dentro de cada cartão temos uma imagem e algumas informações de texto. E a parte inferior temos para a seção de entrada onde temos a entrada de nome de usuário, e-mail em ambos a mensagem assunto, bem como um botão. Então isso é tudo sobre isso. A seção Conduta Me e a seção de rodapé, temos apenas um logotipo como vimos pela última vez, um par de informações. Então esta é a área de trabalho básica ou vista do nosso site. E esse lado positivo regular é completamente responsivo. Então, se eu entrar na ferramenta de desenvolvedor aqui, você pode ver isso e eu diminuir a largura da janela de exibição. Você pode ver essa barra de navegação específica sendo desativada. E, em vez disso, temos um menu de hambúrgueres. E se eu clicar nele, nós temos no menu final terrível aqui. Então, novamente, eu posso clicar em qualquer dissecação em particular e as coisas funcionam perfeitamente bem. E o menu de hambúrguer está bem disposto. Temos todos os links como ícone cláusula elástica. E agora estamos em um pouco de 1988 em 1949. Então eu vou para o iPhone 678. Então é assim que nosso site vai ficar em um celular. Está parecendo muito bem. As coisas estão bem dispostas, as coisas são legíveis. E o site é completamente patrocinado para uma visualização móvel. Isso também é bom para uma visualização do iPad. E como você pode ver aqui também, a vantagem está bem disposta. E para quase todas as taxas de tela, nosso site vai se adaptar com base na taxa de tela. Então, podemos concluir que o nosso site é completamente responsivo e temos um vídeo em profundidade de duas partes viu em que eu vou passo a passo e explicar cada passo de fazer um site aspirina responsiva. E, além disso, também temos um protótipo. Então eu fiz este protótipo em particular em Figma, e enquanto construímos o site, vamos tomar este protótipo em particular como referência. Então é isso pessoal, esta é a visão geral básica saudita do nosso site. E espero que vocês tenham uma ideia básica do que vamos construir neste vídeo em particular. Então é isso, pessoal, obrigado por assistirem, e vejo vocês nos próximos vídeos. 3. Melhores práticas de aprendizado: Oi caras. Neste vídeo eu vou compartilhar algumas práticas recomendadas que você pode implementar enquanto aprende para que eu possa aproveitar o máximo potencial deste curso em particular. E as dicas que estou prestes a compartilhar foram implementadas no meu próprio processo de aprendizagem. E eu acho que eles valem a pena compartilhar. Primeiro de tudo, como vocês sabem, este curso em particular é dividido em várias seções e precisa de seção. Basicamente construímos uma parte específica do site. E o que eu sugiro que vocês façam é começar, primeiro que tudo, vocês devem assistir uma seção completamente. E as mentiras, por que estamos construindo, observam a estrutura do curso e a abordagem de resolução de problemas. E uma vez que você completar sua ação relógios, então você deve tentar construir um site por conta própria. Quando você está tentando construir um site sobre o Irã em vez de apenas replicar o que o instrutor está fazendo. Você está pensando habilidades, suas habilidades de resolução de problemas, tudo vai crescer de uma maneira muito melhor. Então isso é o que eu quero sugerir, que é assistir isso realmente completamente e, em seguida, tentar construir um site por conta própria. Em segundo lugar, os usuários definir pequenos objetivos e me perguntou saber hoje em dia um monte da mistura Duolingo curso, mas há apenas uma pequena fração de pessoas que completam o curso. Então, a fim de completar o curso com sucesso definir pequenos objetivos. No nosso caso, você pode basicamente definir uma meta de, Eu quero completar uma seção todos os dias. E se você pudesse alcançar consistentemente esse pequeno objetivo específico ou seu objetivo maior, que é completar todo o curso, ficar inchado com grande facilidade. E finalmente, é hora de eliminarmos todo o tipo de distrações. E estudos mostraram que mesmo alguns segundos de destruição, seja uma notificação em um smartphone, podem arruinar completamente sua concentração principal. Então, quando você está estudando, é realmente importante evitar todo Conjunto de Destruição ou se pode ser um telefone inteligente ou qualquer outra coisa, você deve tentar evitar todo tipo de distrações e se concentrar completamente no processo de estudo. Portanto, estas são algumas pequenas mudanças que fazem dike e implementam no seu processo de aprendizagem, que você terá um impacto muito melhor no seu processo de aprendizagem, o que pode torná-lo mais eficiente e eficaz. Então é isso, pessoal. Muito obrigado por assistir e vejo vocês no próximo vídeo. 4. Configurando o projeto: Oi caras. Neste vídeo vamos configurar nosso projeto no VSCode. Então, Visual Studio Code são os dados de textura que eu vou usar nesta compilação web específica. E vocês podem usar qualquer um dos seus editores de texto preferidos. Então a primeira coisa que eu vou fazer é que eu vou estar criando uma nova pasta na minha área de trabalho. E eu vou nomear esta pasta em particular como portfólio. Depois disso, vou abrir VS Code. E vou arrastar a pasta do portfólio recém-criada no VS Code. E agora descobrimos que a pasta do portfólio se abriu bem aqui. E o agora vamos criar todos os arquivos básicos que são necessários. Então eu vou clicar em um botão Novo arquivo aqui. E o primeiro arquivo que vamos criar ISA, o arquivo index.html. Tudo bem, agora vamos criar outra pasta, e eu quero nomear esta pasta em particular como CSS. E dentro desta pasta particular, vamos criar o nosso arquivo style.css. Ok, agora vamos criar outra pasta para armazenar todas as nossas imagens. E finalmente, vamos criar um arquivo para ele. Nosso JavaScript. Ou os caras do Lai sabem que criamos todos os arquivos básicos para silenciar. E agora vamos para o nosso arquivo index.html e gerar uma placa básica. Através disso eu sou um NDR, o ponto de exclamação e seguido pela torneira. E isso gera o caldeirão básico. Então a primeira coisa que eu quero fazer é que eu quero mudar o nome do lado positivo para portfólio. E depois disso, eu quero vincular o HTML e o CSS juntos. Para fazer isso, eu quero digitar o link. E dentro do tempo extra, vou entrar barra de ponto, selecionar a pasta CSS. Dentro que eu quero escolher este arquivo CSS Tyler para confirmar se o arquivo HTML e CSS está ligado entre si, eu não vou para o arquivo CSS. E eu quero dizer como o corpo do nosso site e eu quero mudar o fundo para vermelho. Eu vou salvá-lo. Depois disso, vou clicar com o botão direito do mouse no arquivo index.html e clicar em abrir com o servidor ao vivo. E como você pode ver que o site está funcionando perfeitamente bem. Tanto o arquivo HTML e CSS está ligado perfeitamente bem. Então, agora terminamos com a tarefa básica de configurar o projeto. Agora vamos passar para o segundo estágio, pessoal, agora vamos escolher todos os dados de cores diferentes que usaremos neste site em particular. E nós estaremos armazenando nessas cores como variáveis. Então, ao construir o lado DevOps, o processo de seleção de cores vai ser muito mais fácil e pode nos ajudar a economizar muito tempo. Então agora vamos ao nosso protótipo. E aqui, listei todas as cores diferentes que usaremos. Ou seja, usaremos três cores diferentes. E vamos selecionar a primeira cor. Vamos selecionar a cor da opção de campo e copiar o código hexadecimal. E de volta ao VS Code. Vamos para o arquivo CSS. E para basicamente inicializar essas cores como variáveis, vamos usar a função root. E agora vamos inserir o nome da variável. Então, para a primeira cor, eu vou nomeá-lo como primário, seguido de dois pontos. E a hashtag que vou colar no código hexadecimal. Então essa é a primeira cor. Agora vamos copiar o código hexadecimal para a segunda cor. E eu quero nomear esta cor em particular como pura. E eu vou colar o código hexadecimal aqui. E a próxima cor é nomeada como escura. E vamos copiar o código hexadecimal e colá-lo aqui. Então, estas são cores bastante diferentes que são, ganhamos um ano desde webgl website inicializando estes cursos disponíveis. Assim, podemos facilmente lembrar o nome da cor e são diretamente aplicar a cor, especificando o nome da variável. E ele pode, de fato, economizar muito tempo e é muito mais fácil lembrar kilobytes, então nome da variável em vez do código hexadecimal. E agora terminamos com o processo de seleção de cores. E agora vamos passar para a próxima etapa em que não somos basicamente o que todas as diferentes imagens e outros ativos no VS Code. Muito bem pessoal, agora é hora de importarmos todas as diferentes imagens e ícones para o nosso projeto. Então, antes disso, deixe-me mostrar-lhe os diferentes ícones e imagens que usaremos neste site em particular. Então agora estou no protótipo que fiz em Figma. E como podem ver, temos a imagem do herói bem aqui. E se eu rolar até aqui, temos todos os ícones de redes sociais diferentes. Ao se mudar para cá, você vai ver todos os ícones diferentes. Na seção de habilidades. Temos os ícones do projeto, imagens do projeto, as diferentes imagens do blog. Eles não gostam de mim, ícones e muito mais. Portanto, estas são as diferentes imagens e ícones que usaremos neste site em particular. E aprendam onde vocês, eu tenho tudo isso na seção de recursos e eu posso baixar tudo isso de lá. Então agora vamos basicamente importar tudo isso para o nosso projeto. A isso. Tenho todas estas imagens aqui, e vou copiá-las. Então, depois disso, eu vou para a pasta de portfólio que criamos. E como você pode ver, temos a pasta de imagens e, em seguida, abri-lo. E eu vou colar todos eles aqui. Agora, se eu voltar para o VS Code Editor e dentro dos majors, como você pode ver, temos todas as diferentes imagens prontas para serem usadas. Então agora estamos finalmente terminados com as imagens e a parte do ícone. Eu suo. E agora temos o projeto completamente configurado já para ser codificado. Então é isso, pessoal. Estamos feitos com a configuração básica do projeto. E verei vocês no próximo vídeo onde vamos começar a construir nosso site. 5. Programação da seção de heróis: Oi caras. Neste vídeo, vamos construir a seção de heróis do nosso site. E no vídeo anterior, basicamente criamos ou protegemos junto com todos os arquivos diferentes. Nós escolhemos todas as cores diferentes que vamos usar este site em particular. E também importamos todas as imagens diferentes para um projeto. Então agora vamos ao nosso protótipo aqui. E como você pode ver, esta dissecação final é nomeada principalmente como a seção de heróis. E isso é o que vamos construir neste vídeo em particular. Então vamos basicamente dividir a seção de heróis em duas partes diferentes. Então, primeiro de tudo, vamos construir a seção de navegação. Então esta é a barra de navegação. E você pode considerar esta barra de navegação como uma caixa. E dentro desta caixa temos diferentes elementos como o logotipo são diferentes links e o botão Voltar. Então, primeiro de tudo, vamos criar a estrutura básica da caixa. Para fazer isso, vamos voltar para o arquivo de índice e dentro do arquivo de corpo, ou criar um cabeçalho. E dentro do cabeçalho, vou criar uma etiqueta de navegação. Então voltando ao protótipo, vocês verão que criamos a caixa. E dentro da caixa temos nossos diferentes elementos. Então eu vou classificar esses elementos como parte esquerda e parte direita. Então, na parte esquerda temos o logotipo e os diferentes links. E a parte certa temos o botão de volta da moeda. Então vamos criar uma div para a parte esquerda. E vou dar-lhe uma aula de esquerda. Assim mesmo, vou criar outra div. E eu vou nomear esta div em particular com a classe como um direito? Tudo bem, agora vamos descer para a parte esquerda. Então aqui você verá que na parte esquerda, temos Dao, o logotipo como o último, o elemento diferente. Portanto, precisamos ter devido separado para o logotipo e para todos esses links diferentes. Então eu quero criar uma div e eu vou dar-lhe uma classe chamada de branding. E dentro desta div em particular, vou abrir a etiqueta de imagem. E na fonte eu vou inserir a barra da organização. Vamos para a pasta de imagens e eu termino o logotipo. Então nav tracejado logotipo é o logotipo que vamos usar. E vamos criar outra div para os diferentes links. Então, para isso, vamos usar a tag âncora. Então eu vou desfazer um e pressionar Tab. Então eu vou acabar com o haxixe bem aqui. Então temos casa um barco habilidades projetos e bloco. Então vamos entrar em casa primeiro. E agora o que eu vou fazer é selecionar o tinturador final, Dyer bem aqui. E eu pressiono Alt, Shift e seta para baixo por mais quatro vezes. Então isso vai duplicar exatamente a mesma coisa. E depois de casa temos cerca de quatro ou por habilidades, projetos e bloqueio. Tudo bem, agora nós criamos todos esses impostos diferentes ângulos. Então agora vamos para a parte certa. Então, como você pode ver na parte certa, temos um botão chamado como contato. Então eu vou apenas criar uma etiqueta de botão e nome. Ele faz conduta. Tudo bem, agora terminamos, mas a barra de navegação, criamos uma caixa e dentro da caixa temos duas partes diferentes. Na parte esquerda, temos o logotipo. Existem links diferentes e na parte direita temos o botão. Então vamos salvá-lo, e agora vamos estilizar este cabeçalho particular. Para fazer isso, quero ir a esse arquivo CSS do Tyler. E aqui vou selecionar o cabeçalho. E eu vou mudar o fundo muito escuro. Então, para acessar a variável, vou acabar com a guerra dentro do suporte redondo. Vou entrar no traço duplo. Então, agora vamos salvá-lo. E vamos basicamente verificar nosso site. E como você pode ver que está aqui. E se você notar no canto superior direito e na parte superior, temos um pouco de espaçamento. É por causa da folha de estilo padrão do navegador da Web. Então vamos voltar para o nosso arquivo CSS e aqui vamos começar. Então estrela indica toda a seleção, então ele seleciona o elemento inteiro. E vamos digitar a margem 0. E estofamento 0. E tamanho de caixa, border-box. Tudo bem, agora, se você voltar, você pode ver que não há espaço em branco em nenhum fora da esquina. É perfeitamente nivelado com a parte ponto-ponto do navegador. Então, pessoal, se é uma empresa ou tipo aqui, vocês podem ver que essa barra de navegação não está basicamente localizada no centro da batida. Então, a fim de trazer nossa barra de navegação para o centro da página, precisamos criar um recipiente. Então eu vou voltar para o nosso arquivo style.css. E aqui eu vou criar uma classe chamada como contê-lo. E nesta classe em particular, eu vou dar um espírito Mac de 11 52 pixels. E episódico para cima e para baixo vai ser 0, e para esquerda e direita vai ser 15 pixels. E também vou dar uma margem de cima e de baixo de 0 e para fazer o não diagnosticado antes do remetente, a esquerda e a direita devem ser auto. Então, se eu guardá-lo e se chegarmos ao nosso portfólio aqui, você pode ver que nada aconteceu basicamente. Isso é porque não aplicamos esse vidro recém-criado em nosso HTML. Então vou simplesmente copiar o nome da turma aqui. Vamos para o nosso arquivo HTML e escrever um tanto o nav volta ou logo abaixo da tag de cabeçalho. Vou criar uma div com um nome de classe de contêiner. E vamos colocar a tag div final logo abaixo da tag glossing nav e vamos salvar. Então, deixe-me organizá-lo rapidamente agora ou salvá-lo. E se eu vir e verificar, você pode ver que ele está no centro agora. Agora, vamos basicamente mudar a cor de todos esses links diferentes. Então, os links obviamente localizados bem dentro da div esquerda. E assim BIPAP, podemos dizer que é cabeçalho, o nav, e então o Div esquerdo dentro que podemos acessar basicamente a tag âncora. Então eu vou para o estilo do nosso CSS. Aqui. Vou terminar o cabeçalho, o ponto de navegação à esquerda e a etiqueta âncora. Então aqui eu vou mudar a cor para o seu, digamos que, em seguida, tomar um cão, podemos ver que a cor foi mudada para branco ou puro. E agora há remover todos esses sublinhados. Então vamos digitar decoração de texto, nenhuma. E isso vai basicamente remover todos os sublinhados. Então, basicamente, nós trouxemos a barra de navegação para o remetente e a cor desses links para branco, bem como nós removemos seu subjacente. Então pessoal, se verificarmos nosso protótipo aqui, vocês podem ver que a barra de navegação está basicamente alinhada em uma única linha. Ou seja, temos agora o logotipo, os diferentes links seguidos pelo botão. Mas o lado positivo é basicamente ter todos esses elementos diferentes são dispostos de forma vertical. Então, a fim de torná-los em um alinhado ou em uma maneira de linha quando eles usam a propriedade flex. E nós estaremos fazendo uso da flexbox ou D evoluiu lote neste site específico construído. Então, é melhor basicamente criar uma classe de utilidade para que possa economizar muito tempo para nós no futuro. Então, para fazer isso, vamos para o nosso código e nosso dentro da pasta CSS, eu vou criar outro arquivo. E eu quero nomeá-lo como Udemy distorcer CSS e para baixo e copiar o nome do arquivo. E vamos acabar. Então, antes de seguir em frente, vamos para o nosso arquivo style.css. E em primeiro lugar, vamos embarcar em nossa nova classe de utilidade aqui. Então eu quero importar seguido de dois acordes simples. E vamos inserir o nome do arquivo dot css e dois pontos. Então agora nós importamos a classe utilitários. Agora vamos para o arquivo de utilitários e criar uma classe chamada como Flex. E aqui estamos indo para sob display flex. Tudo bem, então agora em uma cópia o nome da turma bem aqui. Vamos ao nosso arquivo de índice e escrever dentro do nosso Nasdaq. Eu vou criar uma classe e eu vou colar o nome do nosso utilitário classe flex. E vamos salvá-lo. E se eu verificar o site aqui, você pode ver que o botão de contato foi movido para a direita. Então, se uma base da mesma classe flex dentro da nossa classe div esquerda e salvá-lo. Você vai ver que os links finais terríveis e o botão de conduta foram organizados da maneira mais leve. Então, pessoal, se você verificar aqui, você pode ver que os links e o botão like não estão alinhados com o logotipo. Estes são meio que extraviados. Então, para torná-los em uma única linha, vamos criar outra classe de utilidade. E eu vou nomeá-lo como remetente do item. E nós vamos colocar outra linha item remetente e vive. Basta copiar o nome da classe. E em primeiro lugar, vamos colocá-lo dentro da aula de navegação. Vamos guardá-lo e verificar. E você pode ver que o botão de retorno da moeda e o logotipo estão em uma única linha agora. E vamos aplicar a mesma fórmula sobre div esquerda. Vamos colá-lo. E temos tudo isso em uma única linha. Agora, a próxima tarefa é ter uma dose menor de vídeo baseado quando estes são diferentes elementos para que, que parece bom. Então, para fazer isso, eu quero criar outra classe utilitário e eu vou nomeá-lo como espaço entre. Vamos justificar conteúdo, espaço entre. Vamos salvá-lo. Então vamos copiar o nome da turma. Vamos para o arquivo de índice e vamos colá-lo dentro da classe de navegação, salve-o. E como você pode ver que o botão de volta da moeda foi todo o caminho para a esquerda do recipiente. E agora vamos adicionar um pouco de espaço entre este logotipo como Alasca entre esses links. Então pessoal, se pegarmos nossos protótipos, começaremos a ver que há realmente um pouco de espaço acima da barra de navegação. Então há uma espécie de separação entre o topo do debate, a diarreia final, barra de navegação, caso Bar Dinah. Não temos espaçamento suficiente entre a parte superior da página e a barra de navegação. Então, para fazer isso, vamos para este arquivo CSS Tyler. E aqui eu vou basicamente selecionar o cabeçalho e o nav. E eu vou basicamente fornecer um pouco de estofamento. Então, do topo e do fundo vão dar a eles. E para esquerda e direita vai ser 0. Então, se eu salvá-lo, você pode ver que há realmente uma quantidade suficiente de espaço entre o topo e o fundo. Então agora eu quero dar um pouco de espaçamento entre o logotipo e o link. Então, para fazer isso, novamente, podemos selecionar o cabeçalho e o nav. E se eu for para o meu arquivo index.html, temos um nome de classe que é branding dentro do qual reside o nosso logotipo. Então eu posso basicamente selecionar o vidro de marca. E eu posso dar uma margem, certo? Mova dez gramas. Vamos ver. Certo, é meio que o centro. E agora vamos também adicionar um pouco de espaçamento entre todos esses links diferentes. Então nós já selecionamos nosso link aqui, que é a tag âncora. Então eu posso realmente fornecer a montanha bem aqui. Então vamos ver com Durham. Sim, parece bem, então quando adicionarmos um pouco mais de estilo vai ficar ainda melhor. Então, por enquanto, temos basicamente alinhar a barra de navegação extrema final em uma linha, o número sub-região de espaçamento. Agora vamos passar para o próximo estágio. Então pessoal, agora vamos basicamente mudar o telefone que estamos usando. Atualmente estamos usando o telefone básico do nosso navegador. Mas em nosso protótipo aqui você pode ver que estamos basicamente fazendo uso da fonte Poppins. Então eles basicamente fizeram uso do Google Phone para extrair esta forma particular. Então vamos ao Google Fonts. E deixe-nos, Então é para Poppins bem aqui. Vamos selecionar aqui. E nós vamos ver luz em 400 regulares, bem como 600 semi negrito. E vamos simplesmente copiar o link a partir daqui. Vamos para o nosso arquivo de índice e vamos colá-lo logo abaixo do título. Vamos salvá-lo. Vamos para o nosso style.css. E eu vou selecionar a Barbie e a família estrangeira. Vai haver Poppins. E se Poppins não funcionar por qualquer motivo, usaremos “sensível”. Então, se você verificar nosso site, podemos ver que a falha foi alterada e que está parecendo muito melhor agora. E também vou converter estes em maiúsculas. Então, para dy, Vamos rolar para baixo e dentro da tag, vamos digitar texto transformar maiúsculas. Então agora temos todos esses links diferentes em maiúsculas, e parece muito melhor do que tê-los em minúsculas. Então, arroz, agora vamos adicionar um estado de palavra inteiro a todos esses botões de link diferentes. Então, quando passamos o mouse sobre eles, a cor muda. Então, através disso, Vamos para um arquivo de estilo e vamos copiar todo o link a partir daqui e alerta um dois-pontos e digitando corredor. Então o que precisamos fazer é mudar a cor. E a cor é basicamente a cor primária. Então, se você verificar aqui, você pode ver que quando eu passei o mouse sobre esses links diferentes, a cor muda para cor primária. Mas é meio rápido basicamente ter um efeito de desvanecimento suave e desvanecimento. Vamos voltar ao arquivo de estilo e dentro do nosso cabeçalho e nav tag âncora esquerda, Eu vou adicionar uma transição. Transição. Para todos os elementos 0.3 milissegundos e é 0s. Então, agora, se eu passar o mouse sobre eles, você pode ver que ele está tendo um desvanecimento suave dentro e desaparecer dele. E isso parece bom. Então agora temos o efeito de ordem para todos esses links diferentes também. Então pessoal, agora vamos estilizar nosso botão e nó direito, mas está parecendo bastante básico. Então, se cada conta, nosso protótipo aqui, você pode ver que nosso botão aqui é bem estilizado. E temos dois botões diferentes, um aqui e outro aqui. Por isso, é hora de voltarmos a fazer uso da classe de utilidade. Então vamos voltar ao nosso código. E branco aqui no arquivo index.html na seção de botão, vou criar uma classe. Então eu vou estar tendo duas classes diferentes aqui, que é btn, btn-primary. Então a razão pela qual eu estou tendo duas classes diferentes aqui é que, então a primeira classe, que é a classe btn, terá as propriedades básicas ou comuns. Então, se você verificar esses dois botões, esses dois violinos têm a mesma largura, o mesmo preenchimento. Portanto, essas propriedades básicas serão com parada na classe btn. E se você olhar para ele esta área em particular, mas ele está tendo propriedades diferentes como um fundo sólido. E este está tendo um transmissor, Baikonur. Portanto, essas propriedades serão com o ordenado na classe btn-primary para a primeira carga. E vamos criar outra classe que é secundária mediana para esta classe em particular. Assim, o vidro batendo terá todas as propriedades básicas e para personalizar ou ter propriedades individuais, você estará adicionando as classes como btn-primary e btn secondary. E espero que vocês tenham uma compreensão básica do porquê terem duas falas diferentes. Então vamos até você durante esta aula e vamos criar a classe btn primeiro. Por isso, terá um preenchimento de 0,8 corridas de cima e de baixo e três rum da esquerda e da direita. Então, deixe-me salvar o arquivo index.html. E como você pode ver que temos um ponto de, de cima e de baixo e 3 deles da esquerda e da direita. Então, vamos também mudar o peso da fonte para 600. Sim. E também vamos mudar o tamanho da fonte para uma sala. E teremos também uma fronteira que será de dois pixels, sólida, transparente. Então, a razão pela qual estamos tendo um fundo transparente isso porque em segundo lugar, mas isso vai ter uma fronteira, mas o primeiro não vai tê-lo. Mas uma vez que estas têm as mesmas propriedades, vamos ter uma fronteira, mas vai ser tempo gasto por padrão. E vamos também mudar o cursor para apontar. Então, quando você traz o cursor perto do botão, vai mudar para o cursor do ponteiro. E agora vamos basicamente segmentar a classe primária BTN específica. E vamos mudar o fundo para a cor primária. Muito bem, agora temos o primeiro padrão pronto. E eu vou diminuir ligeiramente a espera do telefone porque eu acho que está um pouco escuro demais. Vamos colocá-lo como 400. Eles são agora é predefinido e também eu vou mudar o texto para maiúsculas. Então isso é texto transformar em maiúsculas. Então, note que está parecendo muito bem. Então agora vamos basicamente aplicar um estado de foco deste botão específico também. Então, quando eles basicamente Harvard ou este botão em particular, este botão em particular deve basicamente se parecer com este. Quando eu pairar sobre este aqui, este deve ser parecido com este. Então, para fazer isso, vamos basicamente copiar o botão primário aqui. E vamos aplicar um corredor. Então agora vamos mudar o plano de fundo para transparente. E vamos aplicar uma cor de borda do primário. Vamos guardá-lo e verificar. Sim, vamos também mudar a cor do texto para puro. Ok, e também vamos torná-lo um pouco mais suave. Então, para fazer isso, vamos para a transição primária e qualquer de todos os itens, que é 0,3 segundos é sim, que parece muito melhor. Então agora nós adicionamos todo um excesso de estado ou conduta mesquinhez. Vamos agora estamos basicamente feito com a barra de navegação do nosso site. Então, dando uma olhada no nosso protótipo, nós temos a segunda garrafa para a seção de herói, que inclui a imagem de herói como vimos pela última vez esse texto, o lado direito. Então podemos basicamente ter duas divs diferentes. Um pode segurar a imagem e o outro pode segurar todo esse texto e o botão. Então vamos voltar ao nosso arquivo de índice. E logo abaixo da etiqueta de fechamento do navegador, vamos criar outra div com um nome de classe de herói. E dentro desta div particular, vamos basicamente ter duas diferenças diferentes, uma agradável chamada como esquerda, a outra é nomeada como direita. Então div, o nome da classe esquerda. E outra div, um nome de classe certo. Tudo bem, agora vamos descer para a div esquerda. E dentro da div esquerda, temos esta imagem em particular. Vamos abrir uma etiqueta de imagem. E dentro da fonte eu vou entrar ponto barra. E vamos navegar para a pasta de imagens e deixe-me sob herói homem. Tudo bem, agora temos a seção principal. E agora vamos para a div direita. E à direita, temos dois textos diferentes. O primeiro é composto pelo nome, então vamos copiar isso. E eu vou abrir e são seis aqui. E eu vou colar o nome. E em segundo lugar, temos títulos de desenvolvedores criativos da AMA, então esse é um título principal. Então deixe-me copiá-lo e vamos criar uma tag H1 e vamos colá-lo dentro. Desculpe, eu não copiei e eu possuo. Então eu sou um desenvolvedor de criadores. E se você notar, você pode ver que desenvolver por palavra é basicamente ter uma cor diferente. Então precisamos colocar isso dentro de um espaço. Então deixe-me copiá-lo e dentro do saco, e vamos criar uma extensão e colar na palavra desenvolvedor. Muito bem, agora vamos ver o nosso site. Podemos ver a imagem aqui. Isso é o que permite que o, Eu sou um diretor criativo por título. E como podem ver, também precisamos de um botão. Então vamos voltar ao nosso VS Code. E dentro da div direita, Vamos criar outra div, que todo o botão. E o botão é nomeado como download CB. Vamos guardá-lo e vamos verificar o site. Sim, temos o botão aqui também. Então agora vamos verificar nosso protótipo. E como você pode ver que todo o texto eo botão é para a direita dos companheiros e também o texto eo botão está localizado exatamente no centro vertical da imagem. E como você pode ver, temos todo o texto e o botão na parte inferior da imagem. Então, para fazer o texto e o botão para a direita dos companheiros e vamos voltar para o nosso arquivo de índice. E já que já temos uma aula de utilidade, tudo o que tenho que fazer são dados dentro da classe Hero. Eu só preciso colocar na aula de utilitário flexível. Vamos salvá-lo. E depois voltamos a verificar. Simplesmente assim. Temos o texto final da dieta à direita das carnes. E para torná-lo no centro vertical da imagem, novamente, temos outra classe de utilidade que é itens descendentes. Vamos aplicar esta classe em particular. E dentro de uma extensão nós contra isso, temos o texto final dieta no lado direito, bem como no centro vertical da imagem. Então esta é a beleza de ter uma aula de utilidade. Ajudou-nos a poupar muito tempo. E agora há basicamente modificar nossa imagem também. Então, verificando o caminho da imagem, a imagem está localizada no herói dentro da div esquerda. Então vamos para o nosso arquivo de estilo e alvo ou imagem que é Dodd herói ponto esquerdo e a imagem. Então vamos basicamente dar um pouco de 100 pixels e um raio de borda de 500 pixels. Vamos guardá-lo e vamos verificar o site. E como você pode ver que a imagem é suficientemente grande. E também temos uma ligeira curvatura na parte inferior da imagem, assim como desligado ou protótipo. Agora vamos basicamente estilo nosso texto e o botão e também ter número suficiente de espaçamento entre a imagem e diferentes textos, bem como BDB no texto também. Então, em primeiro lugar, vamos morrer todo o texto aqui. Então, se verificarmos nosso site, você pode ver que no final pelo Texas basicamente na cor preta. Então, vamos mudar isso antes de tudo. E como sabemos que o Inditex está localizado na div direita da classe herói. Então vamos para o nosso arquivo de estilo, e eu vou ponto herói ponto direito. E dentro da div direita, eu vou mudar a cor de todos os elementos para branco ou puro. Vamos salvá-lo. E como você pode ver que a cor tornou-se branca. Agora vamos basicamente definir mais o nome. Então, novamente, o nome é uma tag H6 localizada à direita da classe herói. Então vamos novamente copiar ponto herói ponto, certo? E vamos mirar na pilha. E eu vou mudar o tamanho da fonte para 1,6 quarto. Vamos salvá-lo. Sim, parece perfeitamente bem. E também agora vamos modificar a tag H1 aqui. Então, novamente, ele está localizado na div direita da classe herói, por isso é copiado. Segure a tag H1, altere o tamanho da fonte para 4 rem, Vamos ver. E vamos também mudar o peso da fonte para 100. Vamos salvá-lo. Sim. Isso está bem em nós contra você que há muito espaço entre a primeira e a segunda linha. Então isso é por causa de uma altura de linha maior. Então, vamos também diminuir a altura da linha para 1,5. Vejamos, 1.2. Sim, isso parece perfeitamente bem. Então agora temos uma quantidade suficiente de espaço entre a primeira, segunda linha. Agora, se cada um ocorrer por vez, podemos ver que a palavra de desenvolvedor Dalit está em outra cor. Então, como sabemos, fizemos uma extensão específica para o desenvolvedor. Então vamos mirar isso. Então isso é novamente na div direita. E vamos apontar para a extensão. E eu vou mudar a cor para primária. Sim. E eu também vou adicionar um pouco de margem inferior para que, que, isso é uma boa separação entre o botão e este particular, eu sou um criado um pervertido. E eu posso fazer isso no ponto herói escrever X1. Tão margin-bottom. Vamos dar um tambor. Sim, agora estamos separados e eu também quero fornecer um grama de margem entre o nome e a palavra de desenvolvedor Hammerklavier. Então, para isso, vamos para o 86 e fornecer uma margem inferior de um rem. Sim, agora está funcionando perfeitamente. Então agora vamos passar para a próxima etapa em que vamos estilizar nosso botão. Então, se você verificar nosso protótipo, podemos ver que o botão está basicamente tendo um fundo transparente e uma borda sólida. Então vamos voltar ao nosso arquivo de índice. E nós já criamos uma classe utilitário para um botões básicos. Então vamos adicionar uma classe ao botão. Então vai ser btn. E também devemos ter outro último específico para este botão em particular, e que vai ser btn secundário. Então btn secundário. Então vamos salvá-lo e vamos verificar o site. Sim, agora temos que basicamente abotoar. Agora precisamos personalizá-lo. E do jeito que queremos. Então, para fazer isso, vamos para nossa classe utilitários e vamos basicamente criar uma classe secundária aqui, que é PTEN traço secundário. Então aqui precisamos que o fundo seja transparente, e precisamos que a cor seja primária. E também precisamos da fronteira. Então nós já criamos a fronteira, como você pode ver. Mas para o primeiro caso, tornámo-lo transparente. Mas aqui podemos fornecer uma cor para que seja borda. Cor do traço é, novamente, tornar a cor primária. Vamos salvá-lo e verificar seu site. Sim, está parecendo muito bem. Agora também precisamos fornecer um estado anfitrião. Então, quando passarmos o mouse sobre ele, ele deve se parecer com este botão em particular aqui. Então é um símbolo bonito. Vamos copiar toda a cláusula secundária de fim de semana aqui. E vamos fornecer um pairar. Então precisamos que o plano de fundo seja primário, e precisamos de uma cor do texto para ser escuro. Vamos guardá-lo e ver. E vamos também fornecer um atraso de transição. Então vamos para os nossos óleos secundários btn. Vamos simplesmente copiar este código em particular a partir daqui e colá-lo bem aqui. E sim, agora parece predefinido. Então, agora terminamos com a seção direita do NDI. Então temos o nosso design, o texto indiciado, bem como o botão do ano passado. Agora é hora de ajustar todo o layout e fazer a seção de heróis aparecer. Então os caras precisam de quatro batidas ou o protótipo, você pode ver que há realmente um número suficiente de espaço entre a imagem e o texto. Mas em nosso site não temos isso. Então, para fazer isso, vamos voltar para o nosso arquivo de índice. E bem dentro da classe Hero, vou adicionar uma das nossas classes utilitárias criadas anteriormente que é o espaço entre elas. Vamos salvá-lo, e vamos para frente e para trás. Agora nada aconteceu e acabou. A coisa que você pode notar é que boneca que eles texto e as imagens realmente não tomar. Quantidade igual de espaço. Esse texto está basicamente ocupando muito mais espaço do que a imagem. E precisamos equalizá-los sob o espaço tomado pela imagem e pelo texto. Tão verdade que o tau indica outra classe de utilidade. E a classe pode ser aplicada no Div esquerdo. E o nome da classe é Flex Dash One. Deixe-me copiá-lo e também precisamos aplicar isso no dispositivo certo. Bem, vamos salvá-lo e vamos para uma classe de utilitário e basicamente criar essa classe particular que é ensinada flex um. E tudo o que fazemos é aplicar um fluxo de um. Vamos salvá-lo. Vamos a um site. E você pode ver que agora tanto a imagem quanto o texto estão ocupando a mesma quantidade de espaço. E outra coisa que você pode ver que a imagem deve ser ligeiramente para a direita. Basicamente as imagens nota na posição central de seu recipiente, como você sabe, a imagem eo texto está dentro de sua respectiva div, mas ele fez não está no centro de sua div. Então, para fazer isso, vamos voltar para o nosso arquivo index.html. E bem dentro da esquerda, Dave, vamos criar outra classe de utilidade que é apenas adiar, remetente, remetente de cinzas justificado. Deixe-me copiar o nome aqui. Vamos para a aula de utilidades e vamos colá-la. E tudo o que temos que fazer é justificar o centro de conteúdo. Vamos salvá-lo. E também vamos salvar o arquivo de índice. E agora temos um pouco a imagem para a direita, o que a torna em direção ao centro de sua própria perspectiva div. Então agora temos outra seção de heróis disposta. E a outra coisa que desfaz que eu vou fornecer um pouco mais de margem entre este particular, eu sou um desenvolvimento criativo e o botão. Parece estar muito mais perto da palavra. Então vamos para o arquivo style.css. E aqui temos a etiqueta H1. Vou providenciar um fundo de margem de turismo. Sim, agora temos uma boa separação entre todos os textos diferentes. Então pessoal, agora é hora de chegar à parte interessante onde vamos fazer este design de loja particular na parte inferior do nosso site. Então, para isso acontecer, você precisa ter uma compreensão básica do polígono. Agora, se você olhar para um site, você pode ver que a parte superior, este é o primeiro site. Este é o segundo lado, o terceiro lado, o quarto local e o quinto slide. Então este ponto em particular, este é o primeiro, vamos ter a combinação de x e y coordenadas. Aqui. X e y serão 0. E quando eu viajei daqui todo o caminho para a direita aqui, x vai ser um 100 e y vai ser 0. A razão pela qual x é um 100, é porque X viajou horizontalmente deste ponto todo o caminho até este ponto. Então é um 100 e y muda quando há um movimento vertical, mas até agora não há movimento vertical, então y é 0. Agora, se eu me mover de cima para baixo todo o caminho até aqui, e neste ponto em particular, x vai ser um 100 e y vai ser também um 100 porque há ambos um movimento horizontal, bem menos vertical. Então, ambas as coordenadas x e y serão um 100 nervos basicamente cordão até este ponto. Então vamos voltar para o nosso arquivo de estilo e rolar todo o caminho até encontrarmos a etiqueta de cabeçalho onde aplicamos o saco aqui em baixo, eu vou inserir um caminho de clipe. E vamos selecionar polígono. Então, no primeiro estágio, o ponto inicial onde temos que ambos x e y como 0, por isso é 00. E no segundo, x atingiu este ponto particular onde x é um 100 e y é 0. Então x vai ser um 100 por cento cada, e y vai ser 0. E no próximo estágio, X vai viajar daqui até o fundo onde x e y, ambos serão 100 por cento precisa de 100 por cento, d é 100 por cento cada. Então, neste ponto específico, os caras orgânicos para adivinhar qual será a porcentagem de x e y. Então x vai viajar daqui para aqui. Então, até aqui, vai ser 100 por cento de datas. Então, se é para dizer até este ponto, vai ser cerca de 70 por cento cada. E para o caso do Y, ele vai viajar daqui até o fundo. Se chegar aqui, será 100 por cento H. e se chegar até aqui, será cerca de 80 por cento cada. Então vamos escrever esse valor aqui, que é quase 70 por cento cada para x e 80 por cento H para y. E então x e y é neste ponto específico, x vai ser 0 e y vai ser um 100 porque X não tem qualquer movimento horizontal, mas por que tem um movimentos verticais? Então x é 0 e y vai ser um 100 por cento H, que é 0 coma 100 por cento cada. Vamos guardá-lo e vamos verificar o site. Sim, como você pode ver que nós temos tau, o especificado ocorrer que bem aqui. Mas precisamos fazer uma pequena modificação. Ou seja, a propagação de bordas afiadas muito altas. Então vamos diminuí-lo e que podemos fazer isso ajustando o valor y. Então vamos aumentar o y para 87 e ver. Sim, agora tornou-se um pouco para baixo e também ligeiramente para a direita. Agora vamos também fazer algumas pequenas modificações para torná-lo um pouco melhor. Então pessoal, nós podemos realmente ter um pouco mais de espaço entre o conteúdo do herói do NDI e o coração. É tão verdade que vamos basicamente selecionar o herói, todo o herói div. E vamos basicamente fornecer um termo comprado Patty de 5 eles. Desculpe. Vamos salvá-lo. Agora temos uma quantidade suficiente de espaçamento entre o conteúdo de herói n terrível e o mais nítido. E também vamos ver o que vai acontecer se você tentar mover o fim, os técnicos de dieta podem alertar um pouco para o topo. Então, para fazer isso, vamos selecionar o herói final, certo? Então aqui temos o NDA aqui ou certo, e vamos fornecer uma margem, topo. Então, se você quiser trazê-lo para o topo, você precisa fornecer um valor negativo. Vamos tentar com menos urina phi. Sim. Agora tornou-se um pouco para o local superior e meio que parece bom. Então agora temos chamado tau, o texto final Dyer e a imagem alinhados perfeitamente. E também temos uma curvatura acentuada D e, em geral, a seção de herói parece muito agradável. Então pessoal, finalmente terminamos com a seção de heróis do nosso site. E nossa seção de heróis está parecida com a do nosso protótipo. E assim o ácido. E eu realmente espero que vocês entendam o desenvolvimento básico Tarde que eu fiz neste vídeo em particular. E os caras da NASA no próximo vídeo, vamos construir a seção de heróis. E vejo vocês lá. 6. Como criar a seção sobre assuntos: Olá pessoal, bem-vindos a outro vídeo. E neste vídeo em particular vamos criar a seção Sobre do nosso site. Então, no vídeo anterior, nós construímos completamente a seção de heróis, que inclui a barra de navegação e a seção condensada do herói terrível final. Então agora vamos construir a seção abortar. E como podem ver, temos uma caixa. E dentro da caixa temos dois elementos diferentes que está no lado esquerdo temos a imagem, e no lado direito temos o texto inteiro, que inclui o título, o conteúdo principal, como um último diferente ícones de mídia social. Então devemos ter duas divs diferentes. Um grau vai segurar a carne e o outro se foi. Ouvi todos esses diferentes elementos de texto. Então vamos para o nosso arquivo index.html. E deixe-me ampliar. Então logo após a tag final do cabeçalho, eu vou criar uma nova seção com uma classe de cerca de. E dentro desta seção precisamos criar uma caixa. Então eu vou criar uma div com uma classe de contêiner. E dentro da caixa, como você pode ver, terá dois elementos diferentes, o elemento de imagem e o elemento de texto. Então vamos criar o primeiro ao vivo. E eu vou dar uma classe de direito. E eu vou ter a segunda div, que vai ter a classe de esquerda. Então eu vou colocar a div esquerda no topo. Então, dentro da esquerda, se temos a pilha de imagens, então vamos abrir isso e dentro da fonte, vamos navegar para a pasta de imagens. E eu vou usar o homem herói. Significa exatamente a mesma imagem que usamos na seção de heróis. Então nós terminamos com a parte certa, que é a parte da imagem. Agora vamos para o próximo lugar. Então, primeiro de tudo, nós temos o H1, que é a carne do teclado e a palavra me é na verdade uma cor diferente. Então precisamos usar uma extensão. Então vamos voltar e entrar na div direita. Primeiro de tudo, vamos ter a tag H1, que vai ter a cerca. E dentro do espaço, teremos a palavra “mim”. E depois disso temos a introdução. Então vamos copiar isso. Então vamos colocar isso em uma tag h3, e vamos colá-lo bem aqui. E depois disso temos um pouco de texto aleatório preenchido texto. Então vamos basicamente criar um parágrafo aqui. Desculpe. E vamos acabar com Lauren 10, só por um texto preenchido. Ou agora, é hora de adicionarmos todos esses ícones de mídia social diferentes. E vamos fazer isso. Então pessoal, para incluir todos esses diferentes ícones de mídia social, eu vou criar outra div bem dentro da Div direita e não vou dar-lhe uma classe como social. E dentro dessa div, vamos usar a tag âncora para segurar todos esses ícones diferentes porque todos esses ícones têm uma chamada à ação. Então, quando eu pressioná-lo, ele realmente deve nos levar para outro site. Portanto, é melhor usar uma tag âncora. Então eu vou criar uma etiqueta de âncora e a superfície vai permanecer nula agora. E insight daga, daga vai colocar uma imagem. Então vamos para a pasta de imagens. E o primeiro de tudo, nós temos o logotipo do site, que é o mundo todo, mas traço B e G. Então vamos realmente copiar as excites uma tag mangá por mais quatro vezes. Então vamos selecioná-lo. E enquanto pressiona e segura em Alt e Shift, vou pressionar a seta para baixo por mais quatro vezes. E isso pode nos ajudar a copiar facilmente o texto específico que queremos. E agora vamos escolher a segunda imagem, e esse é o logotipo. Então temos o Instagram um, LinkedIn e GitHub. Agora temos o que todos os majors no lugar. Vamos salvá-lo e deixe-me abri-lo e viver servidor mais uma vez. E como você pode ver, nós temos a imagem inteira e todos os ícones diferentes, e eu vou introduzir algumas pequenas modificações para torná-la menor. Certo, então antes de seguir em frente, eu vou fornecer um pouco de espaçamento entre a parte de cima, que é a parte de Herói sob a parte de abortar, como você pode ver que está bem perto. Então, para fazer isso, vamos basicamente selecionar esta seção aqui, porque todo o código está incluído na seção sobre. Então vamos ao estilo. E eu vou mandar de volta a aula sobre. E eu vou dar um estofamento de três anos vêm do topo e o fundo é 0 da esquerda e da direita. Sim, agora temos curso oficialmente monoespacial desde o topo. E agora vamos basicamente reduzir o tamanho e torná-los alinhados no bebê não vai. Então a primeira coisa que quero fazer é começar dentro da classe social. Nós já temos a classe utilitário flex e aplicar morreu bem aqui. Vamos salvá-lo. E como você pode ver, agora tudo está alinhado em uma única linha. E agora vamos basicamente torná-lo um pouco menor. Portanto, ele está localizado na seção sobre dentro da classe direita. Essa é a divisão certa. E temos outra div dentro dela conhecida como social. Então vamos para o nosso arquivo de estilo e eu vou segmentar a seção Sobre. E dentro disso temos o social. Nossa div. E dentro disso temos a etiqueta âncora e as imagens e brilho dentro da etiqueta âncora. Então vamos selecionar a imagem. E eu vou basicamente mudar a altura, 250 pixels. O 25 deve parecer bom. Sim, no entanto, basicamente torná-lo menor e estilo WWL mais tarde. E então também fornecer uma margem, certo? Margem direita de 10 pixels. Agora temos o logotipo serra no meu menor tamanho e também temos quantidade suficiente de espaçamento entre eles. E sinto-me como um protótipo. Podemos ver que o texto temporada à direita da imagem. Então, para fazer isso, vamos voltar ao nosso index.html. E bem no contêiner, eu vou jogar novamente a classe utilitário flex e o bug em destaque. Podemos ver que a textura não é o direito da imagem. E também vamos torná-lo o centro vertical. Então nós pegamos outra classe de utilidade que são itens que eu enviá-lo e agora não é descendente. E também vamos aplicar o traço flexível um para a esquerda e a direita def, modo que a imagem e o texto Basileia ocupem igual quantidade de espaço. Então, vamos aplicar um traço flexível sobre a esquerda se impecável para a diferença direita. Sim, agora estes dois estão ocupando a mesma quantidade de espaço. E agora vamos fazer uma pequena modificação para fazê-los parecer melhor. Então pessoal, agora vamos basicamente mudar o tamanho da nossa imagem. Este tipo de olhar um pouco pequeno. Então vamos basicamente selecionar a imagem. Então a imagem está localizada na classe esquerda, que é a divisão esquerda. Então vamos para um arquivo de estilo e vamos direcionar a seção sobre. Pegamos o Div esquerdo dentro da esquerda se tivermos a imagem, e eu vou mudar a altura para 500 pixels. Além disso, quero mudar o raio da fronteira. Raio da borda para 1000 pixels. Vamos salvá-lo. E vamos ver. Sim, agora parece muito melhor. E também conhecido como fazer algumas pequenas modificações em nossa imagem. Então agora vamos basicamente alterar o About Me e aplicar a cor que é cor específica para a palavra me, assim como no nosso protótipo. Então, o sobre mim onde ele está localizado dentro da divisão direita da classe. Então ponto, ponto, ponto, certo. E eles abortaram-me é uma etiqueta H1. E vamos mudar o tamanho da fonte, 250 pixels. E vamos também mudar a cor para primária, que é a extensão. Então vamos mudar a cor para variável primária. Vamos ver o site. Sim. Agora o abortar foi alterado. Agora vamos atacar o H3. Essa é a introdução. Deixe-me copiá-lo. Então vamos mudar o tamanho da fonte para 20 pixels. E há também adicionar a altura da linha de três. Vamos salvá-lo. Sim, agora parece muito melhor. E eles também vão adicionar mais alguns parágrafos ou frases a esta área de introdução em particular porque é meio que olhar MD. Então vamos para o nosso index.html. E aqui vou adicionar um monte de Dundee. Vamos salvá-lo. E, obviamente, ter espaço suficiente acima deste logótipo em particular. Então vamos ao estilo do nosso CSS. Você já tem o logotipo selecionado aqui. Então vamos adicionar uma margem. Topo de um rem. Sim. Claro, quantidade suficiente de espaçamento entre o logotipo, bem como a diastólica final suficiente. Então pessoal, agora eu vou aumentar o tamanho do nosso parágrafo porque eu meio que sinto que é um pouco difícil de ler. Então vamos para o nosso style.css. Mais uma vez, deixe-me selecionar as divisões sobre e direita. E eu vou apontar para o polígrafo e eu quero aumentar o tamanho do telefone para 20 pixels. Sim, agora é muito legível e também eu quero aumentar ligeiramente no tamanho desses ícones. Então nós já selecionamos os diferentes ícones de mídia social, e eu vou aumentar sua altura para 30 pixels. Vamos salvá-lo. Sim, agora parece muito melhor. Então pessoal, terminamos com a seção do conselho também. E está parecendo bastante semelhante ao do nosso protótipo. E nesta curvatura particular vamos basicamente alcançado I dub e BR você está trabalhando em, Vamos matar seção porque tem que ser fácil alterar a parte superior da seção de habilidade em terra, a parte inferior do Sobre mim seção. Então vamos fazer isso no próximo vídeo quando estamos construindo a seção de habilidades. Então é isso caras com seção Libor, nós concluímos com sucesso a compilação. E vejo vocês no próximo vídeo. Obrigado. 7. Programação da seção Habilidades: Olá pessoal, bem-vindos a outro vídeo. E neste vídeo em particular vamos construir a seção de habilidades do nosso site. Então, nos vídeos anteriores, nós construímos a seção de heróis, bem como o abortar tal em. E agora há tempo para entrarmos na terceira parte em que vamos construir a seção de habilidades. Então, falando sobre nosso processo de design, em primeiro lugar, estaremos criando a tag H1. Depois disso, w0 terá um parágrafo adiante por todos esses deuses diferentes. Então nós temos nossos seis cartões diferentes aqui, e cada deus tem um par de informações dentro dele, como um logotipo, cabeçalho inteligente, e um parágrafo. E nós estaremos usando grades CSS para alcançar este olhar cartão. Então este vai ser um vídeo muito informativo. E agora, vamos pular para o nosso arquivo de índice. Então a primeira coisa que eu quero fazer é que eu quero limpar um pouco o nosso código. Esse é o nosso índice de pontuação. E como você pode ver que ele está realmente olhando para grandes dados coletados e eu vou ser atual realmente identificar uma seção que facilmente. Então o que eu vou fazer é que esta seção terrível aqui é basicamente nossa seção de heróis. Então escreva uma bola, nosso cabeçalho. Vou criar um comentário que é um comentário de arquivo de índice. Então, para fazer isso, eu vou abrir uma tag MD seguida de um ponto de exclamação e dois traços. Então isso vai criar uma tag vazia, e isso é basicamente chamado como um comentário. E o que quer que você escreva dentro de um desgaste comum será executado. Então aqui eu vou escrever na seção de heróis começa e eu vou copiá-lo. E o espaço do lead no final do cabeçalho, e eu quero renomeá-lo. A seção de heróis termina. Vamos fazer o mesmo para a seção abortar. Vamos colá-lo aqui e deixe-me renomeá-lo para seção Sobre. E deixe-me copiá-lo. E vamos colar o mesmo no final da nossa seção abortar também. Então, fazendo isso, nosso código parece muito mais limpo. E também se no futuro, se você estiver sob depuração ou Deus, podemos facilmente identificar as diferentes seções no arquivo de índice também. Então agora vamos para a nossa seção de habilidades. Então, novamente, eu vou criar um dado bem aqui. E eu quero nomeá-lo como seção de habilidades começa. Então, primeiro de tudo aqui e eu vou criar uma seção. Então deixe-me ampliar. Vamos criar uma seção com uma classe de habilidades. E dentro desta seção eu estarei tendo uma div com um recipiente de classe para que possamos colocar todos os elementos no centro do recipiente de página. Então, dentro deste recipiente em particular estará tendo um título e o parágrafo. Assim, o título consiste em duas partes diferentes. A parte principal e o ponto de habilidade. E o ponto de habilidade é em uma cor diferente, então precisamos acabar com golpes dentro de um espaço. Então vamos criar uma tag H1 aqui, e ratos e habilidades de escuta dentro do espaço. Seguido por nós temos um parágrafo, então eu estou passando por algum texto de preenchimento. Muito bem, agora temos o título, bem como o parágrafo. Então, agora, se verificarmos a seção do cartão, como você pode ver que estamos tendo seis guias diferentes e como eu já disse, estaremos usando grades CSS. Então nós realmente precisamos de uma caixa e dentro da caixa estará tendo todas essas cartas diferentes. Então vamos criar um invólucro ou uma caixa. Então deixe-me criá-lo aqui mesmo. Mas uma classe de invólucro de cartão, guarda invólucro tracejado. Dentro deste invólucro em particular, teremos nosso único cartão. Então vamos criar uma div com a classe de cartão. Então, a fim de abrir o cartão, e como você pode ver que dentro do guarda VR hyping um logotipo. Então vamos criar uma tag de imagem aqui. Então dentro da fonte eu vou fazer ponto slash. Vamos para a nossa pasta de imagens e vamos selecionar a imagem de código. Então agora temos o logotipo no lugar. Então precisamos de uma batida para que possamos usar uma tag H2. E eu estou indo para o desenvolvimento. E nós temos um gráfico de pizza. Quando eu entrar em lorem, não d para alguns encher a seguir. Então agora temos todos os elementos básicos que estão dentro de um carro. Então, pessoal, antes de seguir em frente, vamos rapidamente fazer um pouco de estilo para nossa habilidade, estilo espacial. Nosso cabeçalho tem elástico, poligonal, e também vamos discar é cartão único para que possamos copiar o mesmo para todos os outros cartões diferentes. Então vamos para o nosso arquivo de índice. E a primeira coisa que eu quero fazer é que eu quero fornecer uma classe para a nossa etiqueta H1. Essa é a direção das habilidades porque não demos uma antes. Então eu vou nomeá-lo como seção traço machucando. Eu quero salvá-lo. Vamos para o nosso style.css. Então a primeira coisa que eu vou fazer é amarrar alimentando este fundo escuro em particular. Então, como você pode ver que temos todas essas classes de habilidades para esta seção. Então eu vou mirar isso, que é habilidades armazenadas. E eu quero dar um fundo de cor escura que é ponto. Vamos salvá-lo. E agora vamos basicamente estilo estão dirigindo, então dirigindo como CTO, partes diferentes. Então, vamos basicamente apontar o título. Então nós demos uma classe de seção traço. Vamos copiar. E eu vou entrar em habilidades e, em seguida, seção traço rumo. Então, primeiro de tudo, vamos mudar a cor para pura. Essa é a cor branca. E nos permite basicamente mudar o tamanho do telefone 2, 3 quarto. E também vamos fazer o texto no centro da página, fornecendo um centro de alinhamento de texto. E vamos salvá-lo e ver como vai ficar no navegador. Sim, ele está parecendo predefinido. E também vamos fornecer um pouco de margem inferior para que ele seja bem separado do parágrafo. Então, uma margem inferior de maravilha, deve fazer o bem. Tudo bem, sem habilidades. Dirigir está bem. E também vamos mudar a cor da palavra habilidades porque nós temos isso em verde aqui. Então, nós já aplicamos uma extensão para a habilidade geral para que possamos acessá-lo facilmente através da nossa seção que derramamento. Então vamos copiá-lo. E vamos direcionar a extensão e mudar a cor para primária. Sim. Bastante bem. Então pessoal, agora vamos empatar nosso parágrafo. Ou seja, vamos mudar sua cor para branco e para cima trazê-lo para o centro da página. Então o que eu vou fazer, ele disse que eu vou copiar este traço de seção indo para cá. Então eu vou fazer mais v. Então a coisa legal sobre CSS é que WEF tem este cabeçalho traço seção, que é basicamente uma classe para esta tag H1 particular. E especificando mais b, isso significa que eu quero dizer como não próximo elemento. E o próximo elemento que eu quero selecionar é basicamente um parágrafo. Então, especificando mais p, isso significa que eu quero selecionar o próximo elemento após esta tag S1 particular. E isso é basicamente epígrafe. Então, dentro deste parágrafo em particular, eu quero mudar a cor para branco que esses combustíveis. E também eu quero fazê-lo no centro da base, então remetente linha extra. Então eu também quero uma margem inferior de oito quartos. Assim, o parágrafo e os artigos estão bem separados. Vamos guardá-lo e ver. E eu estou perfeitamente bem. Então, se nós rolarmos para baixo, você pode ver que no final a seção do carro é uma morsa. E agora vamos tentar consertar isso. Então pessoal, agora vamos começar o nosso processo de estilo de guarda. Então vamos pular na porta HTML. E como podem ver que estão dentro do nosso invólucro de Deus, sejam quatro. Agora temos apenas uma única carta. O que, como você pode ver no design, eles basicamente precisam de seis cartões. Então agora vamos criar seis deles. Então eu vou selecionar o cartão inteiro aqui. E enquanto pressiona e segura em Alt e Shift, vou pressionar a tecla de seta para baixo por mais cinco vezes. E isso basicamente fez um total de seis cartas diferentes. Vamos guardá-lo e vamos dizer na calçada agora. E como podem ver, temos seis cartas diferentes. Então agora vamos entrar no processo de styling. E antes disso, deixe-me diminuir rapidamente o tamanho deste ícone específico para que ele tipo de parece melhor durante o processo de design. Então vamos simplesmente mirar o invólucro de cartão e as imagens dentro dele. Então vamos para um arquivo de estilo. E aqui estou eu indo sob papel de cartão e todos os principais dentro desta div particular. E eu vou mudar sua altura para 100 pixels. Vamos salvá-lo. Sim, agora estamos parecendo bem e vamos modificá-lo ainda mais durante o processo de design. Então agora o que eu vou fazer é que boneca, é basicamente um invólucro de cartão selecionado. Então, o guarda Bradbury especificamente dentro das habilidades. E vamos selecionar o invólucro de cartão. Então aqui eu vou digitar em exibição. Obtê-lo. Então, como eu já disse, vocês vão usar uma grade para alcançar o carrinho como olhar tão bom. É uma ferramenta absolutamente poderosa e eu posso ajudá-lo a conseguir qualquer tipo de layout complexo da maneira que você quiser. Então, se eu guardá-lo e vamos ao nosso site, você pode ver que nada aconteceu basicamente. É porque não definimos a grade. Então nós introduzimos, definimos a guilda-like, ah, quantas linhas ou colunas que Dhabi quer. Então aqui em nosso protótipo podemos ver que temos duas linhas diferentes e em três colunas diferentes. Então precisamos especificar o número de colunas aqui. Então eu vou digitar em colunas de modelo de grade. E aqui eu vou digitar em um espaço FR, um espaço FR, um FR. Então, se cada treino, como você pode ver. Eu tenho três colunas diferentes e cada coluna temos dois elementos diferentes. E esta é a magia da inacção da grelha. E agora vamos estilizar ainda mais esses cartões. Então os caras viram saber se ele dizia pré-protótipo, você pode ver que o cartão está basicamente tendo um fundo branco. E agora vamos basicamente mudar o cartão de oferta de fundo. Então, antes disso, como eu já disse, você precisa especificar ou definir uma grade. E nós especificamos a grade digitando 1543 vezes. Então temos três colunas diferentes. Mas vai ser um longo processo. E se tivermos mais de cinco ou seis colunas diferentes. Portanto, há, na verdade, outra maneira pela qual você pode fazer isso. Ou seja, você pode simplesmente especificar uma repetição. A batida. E o primeiro parâmetro será quantas vezes esse empate quer repetir um elemento específico. Então, no nosso caso, são três. E o próximo parâmetro é o que você quer repetir três vezes? No nosso caso, é um F5. E se eu salvá-lo e se você verificar nosso site e atualizá-lo, você pode ver que nada aconteceu. Isso significa que a função de repetição está funcionando perfeitamente bem. E agora vamos mudar a cor de fundo do carro. E como sabemos que Deus está basicamente localizado dentro da embalagem do cartão. Então vamos copiar então esse núcleo daqui e colá-lo aqui. E também vamos adicionar um cartão de ponto e vamos mudar o fundo para branco. Então nota de volta para puro. Vamos salvá-lo e ver como o diagrama foi alterado. E como você pode ver que todas essas cartas são ponto congestionadas juntos. Então precisamos ter um número suficiente de espaço entre eles, assim como no nosso protótipo. Então, desde que estamos usando grade, É um processo fácil, é um processo simples. Ou temos que fazer é que precisamos especificar a lacuna, que é grade, traço, lacuna traço de coluna. Vamos especificar um espaço de Turim. Vamos salvá-lo. E como você pode ver que temos F2 espaço remoto entre todos esses cartões. E como você pode ver, nós também precisamos de um pouco de espaço no fundo, mas nesta parte particular. Então vamos especificar uma lacuna de linha. Agora nós especificamos uma lacuna de coluna. Agora vamos copiá-lo. E eu vou mudar a coluna para a linha. E vamos fornecer a abertura de flecha de 67. Vamos salvá-lo. E como você vê isso, agora temos curso quantidade suficiente de espaço entre esses cartões. E como você pode ver que o, todos esses elementos dentro do cartão Sartre congestionado. E se você verificar seu protótipo, você pode ver que tudo está tendo entre eles ou nenhum espaço da fronteira da guarda. Então vamos fornecer um pouco de estofamento para o carrinho. Então vamos para o nosso cartão aqui e fornecer um preenchimento de liberdade de cima e de baixo e dois quartos da esquerda e direita. Vamos salvá-lo. E como vê isso, sei que o nosso cartão está muito bom. Temos curso quantidade suficiente de preenchimento e submissão quantidade de espaçamento entre os cartões. Agora como basicamente andar dentro do cartão e fazer esses elementos em sua respectiva posição. Então, pessoal, se nós pegamos nosso protótipo, você pode ver que o logotipo está meio flutuando em cima do cartão. E agora é hora de conseguirmos esse tipo de olhar. Então, se verificarmos o arquivo de índice, podemos ver que o amaze está basicamente localizado dentro do cartão. Deus está completamente envolvido em torno da divisão do invólucro de cartas. Então, se formos para o arquivo de estilo, então a primeira coisa que eu quero fazer é que eu quero basicamente cortar o seletor de imagem para mera, porque anteriormente nós mudamos a altura da imagem. E eu colei bem aqui para que possamos facilmente nos relacionar entre a imagem e o guarda. Então a primeira coisa que eu quero fazer é que eu vou mudar a posição da imagem para absoluta. E eu quero mudar a posição do cartão para relacioná-lo. Vamos salvá-lo. E agora podemos ver que a imagem está basicamente dentro do cartão. E ao especificar div absoluto e adiado, isso significa que o deus vai basicamente agir como o pai e a imagem vai agir como um tipo. Então, por exemplo, dentro do incrível, se eu especificar top 0, você pode ver que anunciou os majors ir para a parte superior do cartão. Por exemplo, se eu quiser especificar esquerda 0. Agora você pode ver que a imagem foi todo o caminho para a esquerda do carro, não para a esquerda da página. Agora, o guarda vai agir como o pai e as imagens podem agir como a criança. Agora, se é como se o próton pudesse ver que as imagens estão realmente flutuando em cima do cartão. Então precisamos tirar a imagem dos guardas, então precisamos usar valor negativo. Então o que eu vou fazer é que eu vou mudar o topo para menos 3.5 M. E vamos salvá-lo. E se você verificar o lado positivo contra você que agora é autista fora. E agora precisamos trazê-lo para o centro deste carro em particular. Para fazer isso, vamos mudar a esquerda. Então agora esquerda é 0. É por isso que as imagens estão à esquerda do intestino. Então, se eu trazê-lo para cima 50 por cento data. Agora, o principal deve estar no centro, mas não está no remetente da guarda. É porque a borda esquerda pode ver que a borda esquerda está basicamente no centro do cartão. A descendente NOR das imagens no 50 por cento do cartão, a extremidade esquerda desta imagem em particular está em D 50 por cento do cartão. Agora precisamos trazer o remetente do companheiro para o centro ou o 50 por cento do cartão. Então, para fazer isso, vamos voltar à nossa imagem novamente. E vamos usar o tempo de transformação sólido. Então a seleção de tempo é basicamente usada para mover o principal on-line para o eixo x, eixo y, como novamente, movê-lo horizontalmente, verticalmente da maneira que você quiser. Agora só usamos Translate X porque queremos mover a imagem no caminho horizontal. Então, se eu simplesmente colocar, em seguida, 50 por cento vai mover a imagem para a direita. Mas queremos mover a massa para a esquerda porque precisamos trazer isso para parte das empregadas neste final para cima no cartão. Então vamos colocar um menos 50%. E se eu salvá-lo, você pode ver que agora a imagem está no centro exato ou os 50% do copo, 50% do carro e 50% da imagem está exatamente alinhada na borda horizontal superior da coluna. Então é assim que conseguimos esse tipo de olhar flutuante para o ícone. E agora a seção do carro parece predefinida. E como você pode ver que temos espaço de ordem de trabalho entre os parágrafos e um Deus, eu vou diminuir ligeiramente a margem inferior da nossa bolsa o suficiente. Então, se rolarmos para cima, podemos ver a tag p e reduzi-la para seis delas. E vamos ver como vai ficar. Agora ele está realmente olhando muito melhor. Agora vamos passar para a próxima parte. Então pessoal, agora vamos detectar estilo dentro do cartão. Então, primeiro de tudo, vamos para o nosso styles.css. E dentro dos cartões eu vou fazer a linha extra como remetente. Então, escrever texto é basicamente alinhado no centro. Em segundo lugar, quero também deixar um espaço entre os dois e o parágrafo. Então, novamente, vamos copiar, em seguida, seção cartão direto a partir daqui. Vamos colá-lo aqui e vamos selecionar a tag H2. E eu vou dar uma margem inferior de um tambor. Vamos salvá-lo. Sim, não, parece predefinido. Então, finalmente, vamos também adicionar um estado de foco. Então, quando eu, em tudo, nesta carta em particular, nós basicamente colocamos o papai brincando com a cor. Então vamos selecionar novamente a seção do cartão a partir daqui, e eu vou colá-lo aqui. Vamos dar uma hora inteira. E quero que o fundo brinque com a cor. Tão bom ver. Sim, é. Podemos definir também precisamos que fade suave e fade ou defeito. Então vamos novamente para o nosso cartão bem aqui e fornecer uma transição de todos os elementos, 0.3 milissegundos. E está, sim, está parecendo muito bem agora. Agora vamos mudar todos esses ícones diferentes aqui também. É muito fácil mudá-los. E vamos para o nosso index.html. Então vamos mudar o segundo cartão. Então este é o cartão postal. E agora vamos para o segundo jardim, mudar a imagem. Então temos Dui, Yu x, então temos iPhone, eu acho, depois videografia. E finalmente temos um GitHub. Então, se eu salvá-lo, Vamos ver o nosso site. Como você pode ver que todos os ícones diferentes estão em seu lugar e está olhando muito bem. Então a última coisa que precisamos fazer é essa curvatura em particular bem aqui. Então já fizemos isso no vídeo anterior, um assaltante pediu que vocês tentassem se conseguissem isso sozinhos porque já fizemos na seção anterior, apenas rádios de elefante. Veja se podemos descobrir como podemos agora fazer esta era em particular curvatura acentuada que eu faço aqui. Então eles desistem de olhar minuto e tentar descobrir você mesmo. Espero que tenham experimentado. E se você não foi capaz de descobrir como podemos fazer isso, por favor assista ao vídeo anterior em que eu expliquei o processo de design em profundidade. Então agora vamos basicamente tentar alcançar essa curvatura particular em nosso site. Então vamos para o nosso arquivo de índice. E como você pode ver que toda a seção de habilidades reside dentro desta seção particular, que é ter uma classe de habilidades. Então, se formos para o arquivo de estilo na parte do cão novamente, ver a parte de habilidades onde temos aplicado o fundo. Então, bem aqui eu vou digitar em Clip caminho polígono. E eu já testei vários valores. E dy finalmente saiu com um par de valores e eu vou colá-lo. Eu vou aqui e vamos salvá-lo. Então, se verificarmos nosso site, você pode ver que temos uma ligeira curvatura. Mas você pode ver que nosso logotipo foi substituído por esta curvatura particular. Então fizemos um pouco de estofamento em cima da nossa cabeça. Então aqui temos o nosso contentor. Então dentro do recipiente temos todas as outras coisas. Então, se você puder fornecer um pouco de estofamento em cima do recipiente, BOB será capaz de derrubar este título em particular. Então eu vou para um arquivo de estilo e logo abaixo como mata, Eu estou indo novamente alvo ou habilidades e o recipiente. E eu vou dar um topo de preenchimento de 100 pixels. E isso basicamente traz para baixo então dissecação EBIT para baixo, e agora tudo é claramente visível. E nós também fomos capazes de alcançar essa curvatura particular de acordo com nosso protótipo. Então é isso pessoal. Então, aprendemos bastante neste vídeo em particular. Ser completamente construído a, a seção de habilidades. E é isso. Espero que vocês entendam as coisas básicas que temos dívidas neste vídeo em particular. Então é isso, pessoal. No próximo vídeo, vamos passar para a próxima parte do nosso site. 8. Como criar a seção de projetos: Olá pessoal, bem-vindos ao vídeo. E neste vídeo em particular, v vão construir a seção de projeto do nosso site. Então, nos vídeos anteriores, temos que construir a seção de heróis, a seção Sobre e a seção de habilidades. E agora é hora de saltarmos para a seção do projeto. E se você analisar uma seção de projeto, você pode ver que temos um cabeçalho principal bem aqui. E abaixo do título aqui você pode ver a imagem. Esta é basicamente a imagem do projeto. E também temos um pequeno parágrafo que vai definir o que é o projeto. E aqui você pode ver pontos diferentes. Então essas portas dependem do número de slides que você tem. E este ponto verde aqui indica o slide atual que você já. Então, basicamente, temos um rumo. E a segunda parte é este slide separado. Então, podemos basicamente classificar o slide em duas seções diferentes. Assim, a primeira seção pode ser a imagem e Biograph, e a segunda seção pode ser este particular pontos diferentes. Então, isso é tudo sobre participação. E agora é hora de codificar e trazer a seção de produtos sobre sua vida. Então arroz, certo? Não, vamos para o nosso arquivo de índice e isso é novamente, ver esta seção de subhabilidade E. Então, se nós rolarmos para baixo logo abaixo da tag de fechamento da nossa seção, eu vou colocar um comentário que indica que nossa seção de skin terminou e linha intermediária. E aqui eu não crio outro comentário que indique que a seção do projeto foi iniciada. E aqui, eu vou ampliar. E vamos criar uma seção com uma classe de projetos. E dentro da seção eu quero criar outra div com uma classe de contêiner dentro desta div particular. Em primeiro lugar, temos uma polegada que tem o nome de projetos. Então vamos fingir que é um, e vamos digitar os projetos. Tudo bem, agora temos a etiqueta H1 no lugar. Agora vamos descer para o slide principal à parte. Então pessoal, nós basicamente precisamos de um wrapper para segurar todos os slides diferentes que vamos criar para que o wrapper encerre todos os slides diferentes. Então vamos criar 1 primeiro. Então, para fazer isso, vamos para o nosso arquivo de índice. E logo abaixo da nossa tag H1, vou criar outra div com uma classe de controle deslizante. E dentro deste slide em particular, uma divisão que criaremos nosso primeiro slide. Então, novamente, vou criar outra div com uma classe de slide. Então, dentro do slide, como você pode ver, temos uma imagem primeiro. Então vamos criar uma tag de imagem. E dentro da fonte vou entrar dorsolateral. Vamos para a pasta de imagens. E eu criei uma imagem com um nome de visualização de dados. Então, vamos selecionar o primeiro. E, em segundo lugar, temos também um parágrafo aqui. Então vamos criar uma tag de parágrafo e eu vou inserir algum texto. Vamos salvá-lo. Então agora temos a imagem como parágrafo de velocidade em suas respectivas posições. Então, pessoal, a partir de agora nós temos entusiasmo é um único slide, mas nós realmente precisamos de um par de mais slides. Então, para fazer isso, eu quero selecionar nossa luz de solteiros. E enquanto pressiona e segura em Alt e Shift no meu teclado, vou pressionar a seta para baixo por mais três vezes. E isso basicamente cria um total de quatro slides diferentes. Então vamos salvá-lo e verificar nosso site. E como você pode ver que agora temos quatro imagens diferentes e para parágrafos diferentes. Então, a primeira coisa que eu quero fazer é que eu quero reduzir o tamanho da imagem. Então, para fazer isso, vamos para o nosso arquivo de índice. Então, basicamente, o major localizado nesta divisão líder, dentro desta divisão de slides, eles podem acessar o companheiro. Então vamos para o arquivo style.css. Aqui, vou selecionar o controle deslizante. Assim, no controle deslizante celular podemos acessar este slide, a visão, e na divisão satisfazer além da nossa imagem. Então vamos selecionar a imagem e eu vou fornecer uma largura de 500 pixels e uma altura de cerca de 280 pixels. Muito bem, agora este gelo está muito melhor. Então agora é hora de andarmos em nosso controle deslizante, porque agora temos apenas uma imagem e um parágrafo. Então, agora vamos fazer isso. Então pessoal, para criar nosso controle deslizante, estaremos usando uma biblioteca conhecida como um controle deslizante liso. Então, para obter isso, vamos para o Google e procurar deslizante liso. E nós vamos escolher a primeira opção aqui. E vamos navegar para a seção de uso. E se você rolar todo o caminho até aqui, você pode ver o script. Então vamos copiar, em seguida, morre clipe a partir daqui. E depois disso, vamos para o nosso arquivo de índice. E logo acima da etiqueta final do corpo dela, vamos colocar todo o placar. Deixe-me alinhá-lo. E vamos salvá-lo. Então agora temos um JavaScript, mas também precisamos do CSS para o nosso controle deslizante. Então, para obter isso, vamos voltar para o site e clique na opção Obter agora bem aqui. E vamos copiar o CSS. Portanto, é basicamente uma CDN. É copiado. Vamos voltar para o nosso arquivo de índice e rolar todo o caminho até o topo e escrever um bot, nossa ligação CSS, vamos colocar este slide particular é CSS, e vamos salvá-lo. Então, se verificarmos nosso site agora, você pode ver que nada aconteceu basicamente. É porque não definimos o controle deslizante e agora vamos fazer isso. Então, pessoal, antes de seguir em frente vocês para fazer uma pequena modificação. Então vamos dizer que em abrir estes slicks site biblioteca, Vamos para esse site e vamos clicar na opção Obter agora aqui. Então vamos copiar o JavaScript aqui é porque estamos usando um CD e CSS. Então, também precisamos usar um JavaScript CDN também. Então vamos copiá-lo daqui. Vamos voltar ao nosso arquivo index.html. E se você rolar todo o caminho para baixo, então este é o código que já copiamos anteriormente do controle deslizante liso ascendente. Então vamos substituir a última linha de código a partir daqui e colar o novo código. E vamos salvá-lo. E como você sabe, já criamos o arquivo app.js durante o primeiro vídeo onde configuramos o projeto. Então, também precisamos vincular nosso índice ou arquivo HTML para JavaScript. Aqui eu estou indo para renderizar script dot source, e em vez de source, eu estou indo sob ponto barra. E vamos selecionar o arquivo app.js. Então agora temos ligado ou o arquivo desnecessário. Então, agora vamos para o nosso arquivo app.js. Então aqui eu vou usar jQuery. Então deixe-me inserir dólar e B vão selecionar o documento. E eu vou escolher a porta pronta. E aqui dentro do suporte redondo, vou criar uma função de retorno de chamada. E este código em particular significa que document.ready indica que quando as páginas basicamente carregadas, eu não vou o código dentro desta função específica a ser executado. Então é por isso que esse código em particular significa. Então aqui precisamos selecionar o invólucro do nosso slide. Então, aqui você pode ver que o arquivo index.html, o wrapper é nomeado como slide it. Então deixe-me copiar isso e vamos voltar para o nosso arquivo JavaScript. Então, em jQuery Biao vai selecionar um elemento usando o sinal de dólar, seguido pelo nome da classe. Então eu vou inserir ponto seguido pelo nome da classe que controle deslizante. Então aqui estou indo para entrar dot slick. Vamos abrir um colchete aberto e abrir essa função slick. Então, quando eu queria salvá-lo. E se verificarmos o site aqui, você pode ver que agora temos um slide, mas não temos muito estilo agora. Mas como você pode ver que as funcionalidades básicas são aplicadas como nós temos o que um próximo botão que basicamente satélites para o próximo slide. Você também tem um botão anterior bem aqui. Então, agora estamos tendo um olhar bastante básico para um slide -lo. E agora nós projetamos para modificar e personalizar deslizou e torná-lo da maneira que queremos. Então, pessoal, antes de estilizar a nossa luz solar, deixa-nos fazer algumas coisas básicas, como estilizar o projeto. E também eu quero um pouco de fundo de enchimento para a nossa seção para que o carrinho é tão bem separado deste fundo branco particular. Portanto, vamos concluir essas tarefas básicas primeiro. Então, a primeira coisa que eu quero fazer, ele disse que eu vou para o style.css. E se você verificar o arquivo de índice, podemos ver que a seção de habilidades tem uma seção de habilidades. Então vamos basicamente fornecer um fundo de preenchimento para a seção de habilidades. Então vamos para o arquivo de estilo. E se você rolar todo o caminho até aqui, você pode ver que já selecionamos as habilidades e a classe contêiner. Então vamos fornecer um fundo de preenchimento de 100 pixels. Salve isso. E pede-lhe que agora temos que voltar no velho e na parte inferior do cartão e a próxima página ou a próxima seção não está colidindo. Agora, isso parece bem. Agora vamos projetos Tyler indo. Então, se verificarmos o arquivo de índice, você pode ver que o H1 está basicamente dentro da seção do projeto. Então vamos para o nosso arquivo CSS. Aqui eu vou terminar em projetos DOT. E eu quero selecionar a tag H1. Primeiro de tudo, eu vou mudar o tamanho da fonte para três rem, eu quero trazer o texto para o centro da página. Então vamos digitar text-align center, e também fornecer uma margem. Topo de um rem. E vamos salvá-lo. Tudo bem, agora o título do projeto está no centro da página. E agora acabamos com isso. Agora vamos para baixo para este propósito de mosaico ou para controle deslizante, a primeira coisa que eu quero fazer é que eu vou fornecer um pouco de espaço na parte inferior e na parte superior da imagem para que ele se pareça exatamente com o do nosso protótipo. Então, para fazer isso, vamos para o nosso style.css e já selecionamos os meios. Então aqui eu quero dar uma margem superior de três rem, e uma margem inferior de 38, eu estou também. Vamos salvá-lo. E agora, se você acessar nosso site, você pode ver que há monoespaço suficiente. A parte de cima e a de baixo. E se você verificar o protótipo, você pode ver que toda a imagem e o parágrafo estão no centro desta seção particular. Então, para fazer isso, vamos selecionar ou um controle deslizante. E dentro do controle deslizante temos os slides. E em primeiro lugar, vamos fornecer centro de alinhamento de texto. Então, se você salvá-lo, e se você verificar o site, você pode ver que o texto está basicamente no remetente. E agora precisamos levar a imagem para o remetente. Para fazer isso, eu vou fornecer um display flex. Agora temos, então, o elemento morrer de uma forma horizontal. Agora vamos fornecer itens de alinhamento, centro, itens de linha, remetente. Então agora esse texto em particular está no centro vertical da imagem. Agora podemos fornecer uma coluna de direção flexível para trazer este saco particular para fora na parte inferior da imagem. Então, aqui vamos fornecer uma direção flexível da coluna. Agora, se eu salvá-lo, você verá que agora este parágrafo em particular está nas garrafas inferiores para a imagem. E eu quero diminuir ligeiramente a margem inferior da imagem. E eu vou trazê-lo para dois ou m. Agora está tudo bem. Então fizemos alguma pequena modificação em nossa imagem, e também trouxemos o labirinto e parágrafos para o centro desta seção de projeto em particular. Então, como agora, vamos remover esses botões. Então, para remover esses botões, Vamos para o nosso arquivo app.js. E aqui dentro de nossa função de seleção, eu vou digitar em setas, dois-pontos falso. Eu vou salvá-lo. Então, agora, se verificarmos o site e vermos que os botões não são mais visíveis, mas precisamos de pontos, assim como o do nosso protótipo. Então, como um primeiro passo ou um indevido é que aqui eu vou digitar em pontos de acordo com true. E se você salvá-lo aqui, você pode ver que agora temos os pontos básicos, mas estes não são os pontos que realmente queremos. Então estes são lista desordenada. Então, a fim de criar um ponto personalizado, você realmente precisa criar uma divisão personalizada. Então vamos para o nosso arquivo index.html, bem aqui, logo abaixo do final do nosso controle deslizante. Então você pode ver que aqui é onde nossa divisão deslizante termina. Aqui, eu vou criar outra div com uma classe de traço slider dot. Então agora criamos uma div vazia. Mas a partir de agora, nosso JavaScript não sabe que realmente precisamos de um ponto personalizado, então precisamos selecionar esses pontos em particular. Então, vou copiar o nome da turma. Vamos salvá-lo, e vamos para o nosso arquivo JavaScript. E aqui eu vou criar pontos de acréscimo, seguido de dois pontos, criar uma única citação dentro dele. Vou selecionar o nosso ponto de traço deslizante. Então certifique-se de colocar em um cachorro antes disso. E vamos colocar o nome da classe que é Slider traço ponto. Agora temos basicamente criado ou ponto personalizado. E se você salvá-lo, então verifique o DFE. partir de agora não podemos ver muitos genes. Agora, precisamos fazer mais alguma modificação para torná-la da maneira que queremos. Então, pessoal, a próxima coisa que vou fazer é começar. Vamos modificar esta seção de controle terrível final em particular. Então, quando você faz com que pareça com um protótipo. Então a primeira coisa que quero fazer é que o Hylton veja todos esses pontos diferentes. E como eu já disse, estas portas são uma lista desordenada. Então agora vamos criar uma classe personalizada para todos esses pontos diferentes. E usando essa classe personalizada, podemos basicamente modificar o sistema de dieta bem aqui. Então, para fazer isso, vamos para o nosso arquivo JavaScript mais uma vez. E aqui vamos usar outra propriedade que é a classe portas. E queremos criar uma classe chamada como pontos e garantir que você não adicione um ponto. Isso é porque não estamos selecionando um elemento, estamos simplesmente declarando uma classe. Então eu vou digitar pontos e vamos salvá-lo. Agora, se você voltar para o site, não haverá nenhuma mudança. Então, por que não, e são abertas as ferramentas de desenvolvedor do Chrome. Então, para abri-lo, clique com o botão direito do mouse e clique na opção Inspecionar aqui. E se eu rolar para baixo e como eu clicar na opção de seleção e eu lutar, escolha nossa lista desordenada aqui. Aqui você pode ver que a lista não ordenada agora vai ter a classe de pontos que especificamos em nosso arquivo JavaScript. E aqui você pode ver todos os diferentes aliados. Então, estas são todas as listas diferentes. Então o que vamos fazer é que w0, eu quero aplicar uma flexão a esses pontos em particular para que todos esses controles diferentes venham em uma única linha, assim como queremos em nosso protótipo. E também podemos desativar esses pontos. Então é isso que vamos fazer agora. Então, para fazer isso, vamos voltar ao nosso style.css. Então aqui eu vou selecionar os projetos. Em vez disso, os projetos que temos o traço Slider, ponto. E agora vamos também selecionar nossa classe de pontos personalizados. E a primeira coisa que eu quero fazer é que eu vou desativar este ponto preto em particular aqui. Então, para fazer isso, vamos digitar lista, estilo, tipo, e vamos mudar isso para nenhum. Se eu salvá-lo. Então você pode ver que os pontos pretos desapareceram. E agora vamos fazê-lo em uma única linha. Agora é empilhado um nem o outro que está em uma posição vertical. Agora precisamos torná-lo horizontal. Para fazer isso, vamos simplesmente aplicar um display flex. Exibir flex. E se eu guardá-lo aqui, você verá que nada aconteceu basicamente. É por causa de, é realmente difícil de substituir ou o slide liso é um código. Então, para fazer isso, precisamos inserir um ponto de exclamação e digitar importante. Agora, se eu salvá-lo, você pode ver que agora nós temos isso em uma única linha. Então pessoal, é assim que podemos alterar um elemento específico da maneira que quiserem. Então, no nosso caso, criamos uma classe personalizada. Vendo este slide é propriedade. Então, usando essa classe, modificamos nosso sistema de controle bem aqui. Agora vamos modificar todo este sistema. Então, para entrar no centro da nossa seção, vou aplicar o centro de conteúdo justificativo. E agora temos um descendente. Agora vamos mais estilos sistema de controle particular. Então pessoal, se verificarmos o nosso protótipo aqui, vocês podem ver que este controlador em particular ou este controlador de slide, é basicamente exibido em termos de pontos. Mas atualmente em nosso lado estamos tendo número dentro desses pontos diferentes. Então se eu clicar com o botão direito do mouse e abrir nossas ferramentas de desenvolvedor do Chrome. E se selecionarmos nossos pontos daqui, você pode ver que esta é a lista não ordenada. Assim, a lista não ordenada consiste em todos os slides diferentes. E se eu abrir a lista não ordenada, você pode ver os quatro aliados diferentes. Então, se eu passar por esses aliados na parte superior novamente, veja a seleção. Então esses quatro aliados indicam os quatro slides diferentes que temos. E agora, se eu abrir um desses aliados, ele, você pode ver um botão e o botão é basicamente ter um valor de um. Então agora eu preciso remover esse valor em particular. Então vamos fazer isso. Então vamos voltar para o nosso style.css. E aqui vou eu copiar este código em particular daqui. Agora nós basicamente selecionamos o wrapper que é ponto traço deslizante. Então, este invólucro consiste em todos os slides diferentes. Então eu vou selecioná-lo botão de todos os slides diferentes. E eu vou mudar o tamanho da fonte para 0. Então, se eu mudar o tamanho da fonte para 0, os elementos, esta placa será nenhuma. Os elementos não serão visíveis. Então eu vou mudar o tamanho da fonte para 0. Agora, se eu salvá-lo, você não pode realmente ver o elemento. Deixe-me ampliar um pouco. Nós poderíamos realmente ver uma pequena marca do elemento, mas eles ainda estão presentes bem aqui. Agora vamos modificar esses botões diferentes ainda mais. Então a primeira coisa que eu vou fazer é que eu vou fornecer alguma largura e altura para nossos pontos. Então eu vou fornecer uma largura de quase oito pixels e uma altura de 50 pixels. Vamos salvá-lo. E agora estes são ligeiramente visíveis. E a próxima coisa que eu vou fazer é que eu não vou fornecer um pouco de espaço entre esses pontos diferentes. Então vamos fornecer uma margem, certo, de cinco pixels. Vamos salvá-lo. Agora eles têm opção de curso número de espaço entre eles. Agora vamos remover sua borda e contorno. Então eu vou fornecer uma fronteira de nenhuma. E a nossa linha de homens também. Vamos salvá-lo. E agora eles são elementos simples. Então vamos mudar seu plano de fundo, colorir, então recuar. E eu vou colar o código hexadecimal. Vamos guardá-lo e vamos verificar. Sim, a cor de fundo foi aplicada. E eu vou fornecer um raio de fronteira para que estes olhem no homem ocorrido, exatamente como o do nosso protótipo. Então vamos fornecer um raio de borda de 50 pixels. E agora eles têm um olhar curvo. E também vou mudar o cursor para apontar ponteiro do cursor. Então, quando colocamos nosso cursor em cima desses delitos, eles mudaram para o ponto de olhar, e esses pontos realmente funcionaram perfeitamente bem. Agora precisamos fazer alguma pequena modificação para esses pontos para que R, esta exibição uma cor verde no slide atual ele está sentado. Agora vamos fazer isso. Então a coisa que precisamos fazer agora é que eu preciso diferenciar o slide ativo. Então aqui você pode ver que a luz está tendo uma cor diferente como um pouco mais largo. Então à direita, Não, Vamos para o nosso site e eu vou clicar com o botão direito do mouse e clique na opção Inspecionar aqui. Agora, se eu rolar para baixo e se nós selecionamos pontos aqui, aqui, eu vou abrir a lista inteira. E uma coisa que eu quero que vocês notem é essa classe ativa em particular. A classe ativa selecionada só está presente no 1º prazo. Agora eu quero selecionar o segundo vivo. E você pode ver que isso é slick classe ativa mudou para o segundo iluminação. Agora eu vou selecioná-lo terceiro e luz, e ele passou para a terceira lista. Então este ativista liso específico aplicado dinamicamente ao ponto atual ou à lista atual que estamos selecionando. Então usa classe ativa liso particular. Podemos basicamente alterar nosso ponto atual. Então, agora vamos fazer isso. Deixe-me fechar a ferramenta de desenvolvedor e vamos voltar ao nosso style.css. Aqui, vou selecionar os projetos. Dentro dos projetos temos os pontos. E agora vou selecionar o aliado. E eles vivos que eu quero selecionar estes. Então, o ativo e leve que é slick traço ativo. E o que eu quero alterar é o botão. E a coisa que eu queria mudar que eu vou mudar o fundo era 24. E o padrão que eu quero aplicar é a cor primária. Vamos guardá-lo e vamos verificar. Como você pode ver agora estamos tendo uma cor verde para o slide atual ou ativo. Deixe-me passar para o primeiro. Sim, o colorista está perfeitamente bem. E também quero que a largura seja aumentada para o ponto ativo. Então eu quero aumentar a largura para quase 16 pixels. Vamos salvá-lo. Sim, o ponto atual está tendo uma palavra mais alta e a cor também está sendo alterada. Então, deixe-me aumentar rapidamente a margem inferior dos nossos projetos. Então eu vou simplesmente selecionar a seção do projeto e o contêiner dentro dele. E eu vou fornecer uma margem inferior de 100 pixels. Vamos salvá-lo. Então agora temos recepção colocando o fundo e você pode ver as diferentes portas claramente. Então, de acordo com o nosso tipo de parceiro, estamos tendo os pontos. E também para o ponto ativo, estamos tendo um diferencial que é de cor diferente e um tiro mais largo. Então tudo o que fizemos aqui é que nós basicamente selecionamos a lista atual ou ativa. Você está tendo uma aula de deslize traço ativo. E estamos simplesmente alterando as propriedades daquele vivo em particular que está atualmente ativo. Então é isso pessoal. Nós construímos completamente a seção do projeto. Ou seja, temos um fim em breve e totalmente funcional deslize e vocês podem facilmente ver essas imagens. Então, se você for para o arquivo de índice, podemos simplesmente mudar a imagem aqui. E o outro eu vou diretamente para vendê-lo neste slide particular também. Então, agora podemos também clicar sobre esses botões diferentes para navegar ao redor do slide ele. E nós também temos independentemente parágrafo para cada slide ele também. Então é isso pessoal. E eu realmente espero que vocês entendam o conceito básico de deslizamento e como podemos acessar diferentes propriedades de uma biblioteca e muito mais. Obrigado por assistirem e vejo vocês no próximo vídeo. 9. Como criar a seção do blog: Olá pessoal, bem-vindos de volta ao vídeo. E neste vídeo em particular, vamos construir a seção MyBlock do nosso site. E Eve, analisamos esta seção em particular. Você pode ver que temos um cabeçalho do meu blog e um parágrafo. E na barra inferior, temos três cartas diferentes. E dentro de cada guarda temos algumas informações, como uma imagem, um título. Temos a data em que o conteúdo principal e ler mais texto. Então esses outros condensam dentro do cartão. Então, basicamente, temos a parte principal como Alasca para três deuses diferentes. E agora vamos bater fazer o nosso arquivo de índice e começar a construir a seção meu blog. Então, no arquivo de índice, em primeiro lugar, deixe-me copiar este comentário em particular e vamos colá-lo logo abaixo do fechamento da seção e vamos renomeá-lo faz proteger as extremidades seção. E novamente, eu vou abrir outro comentário que indica que a seção MyBlock começou. E aqui, basicamente eu vou ampliar e vamos criar uma seção com uma classe do meu bloco. E dentro desta seção particular, vamos criar outra divisão com a classe de contêiner. E dentro deste recipiente em particular, basicamente temos o nosso rumo e o parágrafo. Então eu vou criar um H1 e eu quero dar para nós, meu blog. E como você verá que a palavra do blog está em uma cor diferente. Então Window e coloque isso em uma extensão. E vamos colá-lo dentro da extensão. Tudo bem, e depois eles assumirem que temos onde o parágrafo, então vamos colocar um texto aleatório dentro dele. Tudo bem, agora criamos o H logo que parágrafo elástico. E agora é hora de irmos para a seção de cartas. Então, basicamente, precisamos de um invólucro de cartas. Então, dentro do invólucro de cartão reside todos os nossos cartões. Então, primeiro de tudo, à direita, abaixo da tag de parágrafo, eu não crio outra div com uma classe de traço de cartas para APA. Então, dentro deste invólucro de cartas em particular, temos nossos cartões. Então eu quero criar o nosso primeiro Deus. Então, para isso, vamos criar uma div com uma classe de cartão e dentro cartão particular. Em primeiro lugar, temos a nossa imagem. Então, para a imagem, eu quero criar outra divisão com uma classe de imagem traço wrapper. Então, dentro de seu invólucro de imagem particular, temos nossa imagem. Então eu vou abrir uma tag de imagem e dentro da fonte eu quero inserir ponto barra. E vamos já fazer majors. E aqui eu peguei artigo pH uma foto e eu quero selecionar isso. E isso é para a seção de imagens bem aqui. Agora vamos para a seção de conteúdo. Então, para o conteúdo, vou criar outra divisão aqui com uma classe de conteúdo de traço de cartas. E dentro deste deus-traço coordenada Divisão B terá todos os diferentes materiais de texto. Então, em primeiro lugar, temos o nosso H1. Então eu vou criar um elétron bem aqui. E aqui. Vou copiar esta batida em particular daqui. E eu vou colá-lo bem aqui. Vamos salvá-lo. E abaixo do H1 temos a data contra C. Então eu quero terminar brilha uma data em um intervalo. E deixe-me copiar a data daqui. E vamos colá-lo bem aqui. E depois disso, temos fundo o suficiente. Então deixe-me criar uma tag p para algum texto de preenchimento. E, finalmente, nós também temos uma leitura mais texto. Então este canto específico do Texas, eu tenho um chamado à ação, então eu vou colocar isso dentro de uma etiqueta âncora e eu quero nomeá-lo como lido para. Vamos guardá-lo, e vamos verificar o nosso site. Então, na barra inferior temos o título, o parágrafo que Deus imagem e os diferentes materiais. Então agora vamos estilizar tudo isso. Então pessoal, se pegarmos nosso protótipo, vocês podem ver que aprendemos três cartas diferentes. E para duplicar este cartão particular, Mais duas vezes, vamos para o nosso index.html. E como você sabe, esta divisão em particular consiste em um único cartão. Então, enquanto pressiona e segura em Alt e Shift, eu vou pressionar a seta para baixo mais duas vezes para criar um total de três cartas diferentes. Vamos salvá-lo. E se verificarmos o site, você pode ver que agora temos um total de três cartões diferentes. No protótipo. Você pode ver que o, minha seção do blog está tendo um fundo escuro. Digamos, então, no fundo, também. E aqui você pode ver que no final terrível, minha seção de blog reside dentro desta seção particular com uma classe do meu blog. Então vamos copiar isso. Vamos para o nosso style.css aqui. Eu quero. Ender ponto meu blog e mudar o fundo muito escuro. Vamos salvá-lo e ver se é Eclipse IDE. Você pode ver que o fundo ficou escuro. E agora vamos basicamente modelar nosso cabeçalho e o parágrafo. Então estragou isso. Vamos para o nosso arquivo de índice. E eu quero dar uma aula para o nosso H1. Então eu vou nomeá-lo Us seção traço título, salvá-lo, e, em seguida, também copiar o nome da classe e aqui, mas eu quero inter dot cabeçalho seção porta MyBlock. E eu vou mudar a cor para pura. Então, se você verificar o lado positivo novamente, veja que a cor branca foi aplicada não só ao adjacente, mas também ao nosso parágrafo e também zona H e o parágrafo foi automaticamente alinhado ao centro de a seção. Vocês podem adivinhar por que isso aconteceu? Então, a razão pela qual isso aconteceu é que Dhabi tem k1, a seção de nome da classe, título holandês fazer a nossa área como mostrado na minha seção de blog. E se você se lembra, demos o mesmo nome ao nosso s1 nesta seção de habilidades, como você pode ver. Então é por isso que este cabeçalho seção traço tornou-se realmente uma classe de utilidade. Então, quando aplicamos o mesmo nome para a nossa seção do meu blog, as propriedades que eles são são ativados para este parágrafo particular que eu escrevi. Então nosso trabalho ficou um pouco mais fácil. Agora vamos basicamente mudar a cor deste blog em particular. Então, como você sabe, você já tem uma extensão. Então vamos selecionar, então coisas terríveis a partir daqui. Cole e direcione a extensão e altere o plano de fundo. Desculpe, altere a cor para primária. Vamos salvá-lo. E lá vai você. Temos o ETC1 e o parágrafo tudo pronto. Então agora vamos fazer esses cartões em uma única linha como essa em nosso protótipo. Então, como, você sabe, nós podemos fazer uso de grades CSS para alcançar esse olhar. Então vamos para o nosso style.css. E bem aqui eu vou selecionar o invólucro de cartão. Então ponto meu blogue espaço dot wrapper cartão. Vamos selecionar isso e eu vou aplicar uma grade de exibição. E agora nós redefinir a grade como bom modelo traço, colunas Nash. Então vamos usar a função de repetição. Eu quero repetir isso por três vezes e parâmetro é maravilhoso. Então, se eu salvá-lo, você pode ver que agora temos todas essas três cartas em uma única linha. E como podem ver, todos estes guardas estão reunidos. Precisamos de um espaço entre eles. Então, vamos voltar. E aqui mesmo, vou mencionar traço coluna Gap. Lacuna de traço de coluna de 30 teorema. Vamos salvá-lo. E agora temos um espaço de três lemmas entre todas essas cartas diferentes. E se verificarmos o protocolo, podemos ver que a seção condensada, a seção do preservativo do carro está basicamente tendo uma bolsa branca para baixo. E agora vamos fazer isso. Então aqui eu vou copiar este código daqui. E agora vamos também selecionar o cartão de cartão kanban traço condensado. E aqui vamos mudar o fundo para puro. Salve isso. Como você pode ver que nós estamos tendo uma pequena divisão bem aqui é porque nós apenas aplicado no fundo para o nosso carro traço condenado, mas nós fizemos aplicar o saco para baixo para o final Deus direto, então isso é meu mal. Então vamos voltar aqui e me deixar copiar todo o núcleo daqui. Vamos colá-lo. E vamos também alvo, em seguida, cartão direto e mudar o fundo para puro. E se nós salvá-lo, você pode ver que agora para o fundo se estende todo o caminho até a imagem e para a parte inferior do cartão. Então, agora vamos fornecer um pouco de estofamento. Como você pode ver, todo o texto está desordenado por dentro. Então agora nós já selecionamos o traço de carro condenado. Então deixe-me fornecer um preenchimento de 20 partir deste diagrama será aplicado tanto para cima como para baixo e esquerda e direita. Então, vamos salvá-lo. E como você pode ver que agora nós temos quantidade suficiente de espaçamento dentro do cartão também. Então pessoal, em primeiro lugar, vamos fornecer um pouco de margem inferior para esta batida particular bem aqui. Então vamos voltar ao nosso style.css e os administradores ampliam um pouco. E bem aqui, vou selecionar nossa seção meu blog. E dentro da seção do meu livro, temos que deixar o conteúdo do cartão e dentro do painel do carro Condon, temos a etiqueta H1. Então eu vou selecionar isso e eu vou fornecer uma margem inferior de um rem. Vamos salvá-lo. E como podem ver, ouvimos uma margem de maravilha. E, em seguida, basicamente, podemos estilizar este parágrafo em particular. Mais uma vez, vou copiar este código em particular daqui. Vamos colá-lo. E em vez de H1, vamos segmentar parágrafo. E eu vou fornecer uma margem superior de um rem e uma margem inferior de um rem também. Então agora temos a quantidade suficiente de espaço em cima do parágrafo e na parte inferior do parágrafo. E agora vamos amarrar esta etiqueta de âncora em particular. Então, novamente, eu vou copiar este código em particular daqui. E vamos apontar a etiqueta âncora. E eu vou mudar a cor para basicamente a nossa cor escura. E também vamos remover a decoração do texto. Decoração de texto nenhum. E isso está parecendo muito bem. Então agora estamos basicamente terminados com nossa seção de guarda. Então, se você notar que você pode ver os outros um monte de lacuna nesta área particular. E é porque estamos tendo um monte de margem inferior para o nosso parágrafo. Então aqui eu vou selecionar a seção do meu blog e a seção do meu livro. Temos o nosso H1. Então, o H1 está tendo uma classe de seção traço título. Então deixe-me copiar isso. E aqui vamos definir alvos seção faz sombreamento. E depois desta seção traço título, temos os parágrafos. Então vamos simplesmente usar mais, mais b. E qualquer código que eu vou escrever dentro deste bloco em particular vai sobrescrever qualquer código lá, uma seção traço título. Então eu vou fornecer uma margem inferior de 30. Se eu salvá-lo. Como você pode ver agora, temos adequada e Moldávia margem inferior dois são muito parágrafo e não havia também fornecer um pouco de preenchimento para a parte inferior desta seção particular meu blog. Vamos rolar todo o caminho até o topo. Aqui você pode ver a seção do meu blog. Aqui, eu vou fornecer um fundo de preenchimento de 100 pixels. Então agora temos o espaço número de submissão do curso 2 na parte inferior da nossa seção do meu blog. E se você rolar para cima, você pode ver que o título, meu blog está muito perto da nossa seção de projeto. Então vamos dar um pouco de estofamento top. Então aqui eu vou basicamente copiar o meu traço seção blog bater porque esta seção agora sombreamento é uma classe para o seu H1. Então aqui eu vou fornecer um topo de preenchimento de um rem. E se nós salvá-lo, e agora temos a nossa quantidade solução de espaço e vamos ver com o turismo. Sim. Parece muito bem agora. Então é isso, pessoal. Terminamos com a seção meu blog e foi muito fácil porque já tínhamos o conhecimento de grades. E nós temos o bater o parágrafo e os diferentes cartões e eles podem facilmente mudar essas imagens particulares do arquivo de índice. E também temos uma função de leitura mais que por enquanto nos leva a lugar nenhum. E é isso. E eu realmente espero que vocês e destruam este vídeo em particular também. E obrigado por assistirem, e vejo vocês no próximo vídeo. 10. Programação da seção de contato: Olá pessoal, bem-vindos ao vídeo. E neste vídeo em particular, vamos construir a seção de contato do nosso site. E se analisarmos a dissecação atrás, você pode ver que temos um rumo bem aqui. E abaixo disso temos dois deuses diferentes. E dentro de cada Deus temos qualquer meio, um título e um texto informativo. Então, em primeiro lugar, vamos construir a primeira parte aqui. Então vamos para o nosso arquivo de índice. E a primeira coisa que eu vou fazer é que eu quero copiar este Coleman em particular daqui. E eu vou colá-lo aqui mesmo no final de uma seção, e eu vou nomeá-lo como minha seção de blog termina. Mais uma vez aqui eu vou abrir outro comentário e eu vou nomeá-lo como seção de contato começa. E aqui vou eu abrir uma seção com uma classe de conduta. E vamos para a seção. E antes disso, deixe-me ampliar um pouco. E aqui eu vou criar uma divisão com uma classe de contêiner. E dentro deste contentor, primeiro lugar, temos o nosso rumo. Isso é conduzir-me e a palavra “eu” está em outra cor. Então deixe-me copiá-lo. Então aqui em uma tag aberta e H1 e inserido viu Deus Dao a conduta. E dentro do espaço temos a palavra. Então isso é tudo para a seca, a parte principal. E agora vamos para a seção de cartas. Então, basicamente começou a criar um invólucro de cartão. E dentro do invólucro de cartão podemos basicamente armazenar esses dois cartões. Então eu vou criar outra div com uma classe de painel de carro, Arpa. E dentro deste invólucro de cartão particular, basicamente temos todos os nossos cartões. Então vou criar outra divisão com uma classe de Deus. Então, dentro do Deus, primeiro lugar, temos a imagem. Então eu vou abrir uma tag de imagem e dentro da fonte eu vou fazer ponto barra. E vamos para a pasta de imagens. E vamos procurar o iPhone. E esta é a imagem. Então, basicamente, abaixo da imagem, não temos um título. Então eu vou colocar a carne fria x dentro de um H2. Então vamos abrir uma tag H2 e deixe-me colar o texto aqui. E abaixo disso temos uma informação numérica. Então deixe-me copiar isso e eu vou colá-lo dentro e H4. Tudo bem, agora temos isso, toda a seção de cartas pronta. E como podem ver, temos duas cartas diferentes. E, a partir de agora, temos apenas um carro. Então eu vou copiar esta divisão em particular aqui, e vamos colá-la mais uma vez. E agora temos 12 deuses diferentes. Então vamos salvá-lo e verificar nosso site. E se você rolar todo o caminho até o fundo, agora temos dois cartões diferentes, mas suas respectivas informações extras. Então aqui vou mudar a imagem do segundo Deus para mim. E também vamos copiar esta informação particular daqui e colá-la aqui. Vamos salvá-lo e verificar o nosso site mais uma vez. Tudo bem, agora vamos para a simplificação de todos esses cartões diferentes. E vamos também organizar o layout também. Então pessoal, como primeiro passo, vamos discar nosso H1 aqui. Então vamos voltar para o nosso arquivo de índice e escrever dentro da nossa tag H1. Eu quero dar uma classe de seção traço rumo. E vamos salvá-lo. E se você verificar o site, eles podem ver que podemos me direcionar onde ele está realmente faltando. Mas na verdade está faltando. Ainda está aqui. Então, se vocês não sabem no vídeo anterior, eu disse a vocês que dissecação, que sombreamento é uma aula de utilidade. E por padrão, classes utilitárias com uma cor de um puro ou branco. Então precisamos alterar essa cor. Então, não é ir para index.html. E aqui eu vou chamar P o título do traço da seção, nome da classe. E agora estou em style.css. Então vamos selecionar a seção de conduta, bem como, seção ativos, vidro de direção de traço. E vou mudar a cor para escura. Vamos salvá-lo. E também vamos mudar a cor da nossa, MINHA palavra, que é esta panela. E mude sua cor para a cor primária. Então vamos salvá-lo. E quando voltarmos para a venda adicional, você pode ver que agora o título está perfeitamente bem. Então agora vamos basicamente começar, não fazer nossas cartas. Então a primeira coisa que eu vou fazer é que eu vou fornecer grade de exibição. Então, como você pode ver, que Deus está basicamente alinhado de forma horizontal. Então vamos fazer uso de para grade de exibição. E aqui eu vou selecionar a seção de conduta. Dentro da dissecção do cone. Chegamos ao invólucro do carro. E aqui eu vou fornecer nossa grade de exibição. E agora vamos definir a grade, que é modelo de traço, colunas de traço. Então aqui eu vou usar a função de repetição. E quero que isto repita duas vezes. E o segundo parâmetro é maravilhoso. E se você salvá-lo, e se voltarmos ao site, você pode ver que esses dois estão alinhados de forma horizontal. E agora vamos entrar no cartão de porta e alterar o tamanho de nossos ícones. E também vamos estilizar nosso conteúdo de texto dentro do cartão também. Então pessoal, a primeira coisa que eu vou fazer é que vamos reduzir o tamanho desses ícones. Então vamos voltar ao nosso style.css. E se você pode ver as imagens basicamente localizadas dentro da divisão do carro, que é basicamente dentro do cartão traço embrulhar. Então, quando o nosso copaga código particular a partir daqui, e vamos colá-lo e vamos selecionar o cartão eo imediato dentro dele. E eu vou fornecer um TOEFL alto, quase 100 pixels. E também vamos fornecer uma margem. Inferior 04 a maioria de um quarto. E vamos salvá-lo. E se cada site ativo, e você pode ver que o tamanho é basicamente advogado eo texto não é basicamente no centro. Como pode ver, está deslocado. Então, para trazer as texturas e Dulles voltar para o style.css. E aqui vou eu selecionar o cartão. Então, dentro do cartão temos o texto e vamos alinha-lo para o remetente. E agora passamos por todo o conteúdo para o centro da tela. E também temos o texto também alinhado centro dentro do carro também. E como podem ver, não temos muito espaço abaixo da nossa zona H. Estes cartões são muito perto do nosso int1, por isso precisamos de um pouco de fundo de preenchimento e bem aqui no cabeçalho da seção, eu vou fornecer um preenchimento mais termo acima de tudo para rem, salve-o. E agora temos uma quantidade suficiente de espaço. E como você pode ver, não temos muito espaço para esta seção traseira do cone em particular. Então vamos também fornecer um pouco de preenchimento. Então aqui eu vou selecionar a conduta como um último o contêiner. E vamos fornecer um fundo de preenchimento de quase 100 pixels. Deixe-me salvá-lo. E aqueles me deixam alinhá-lo. E agora sendo, naturalmente, opções baseadas no fundo também. Então agora temos a primeira parte da seção de contato comigo. Esse é o deus, bem como a informação no lugar. E agora é hora de construir a seção de formulário ou a seção de entrada. E agora vamos a isso. Então pessoal, no protótipo você pode ver que esta dissecção final é conhecida como a seção de entrada. Então, na primeira linha, temos duas entradas diferentes. E a segunda linha, em nome de Deus e outras entradas. E na terceira linha temos uma área de texto seguida por um botão de envio. Então esta dissecção final é a nossa secção de entrada. Então agora vamos para o nosso arquivo de índice e projetar a estrutura da seção de entrada. Bem aqui na etiqueta de encerramento do nosso invólucro de cartas, que é bem aqui. Vou criar um formulário. E dentro do formulário, eu vou criar uma divisão com uma classe de traço de entrada. Então, nesta divisão de captura de traço de entrada terá as duas primeiras entradas, mídia solar, a primeira entrada bem aqui. Deixe-me apagar as coisas. Então temos para o texto de erros de digitação e também precisamos de um suporte de lugar. E esse será o seu nome. Deixe-me copiar e colar aqui. Então deixe-me copiar este código em particular. E eu vou colá-lo bem aqui. E em segundo lugar, temos a entrada de e-mail. Então deixe-me copiar o texto do espaço reservado a partir daqui. E aqui vou substituir nosso espaço reservado pelo seu e-mail, e vou mudar o tipo para e-mail também. Então esse é o nosso primeiro em Bootstrap. Agora nós temos essas duas entradas e eu quero colocar dados em outra divisão. Então I2 e eu queremos criar nossa segunda divisão com uma classe de entrada envoltório traço T2. E dentro desta divisão em particular eu vou ter outra entrada, que vai ter o tipo como texto e o lugar titular como assunto. E, finalmente, nós também temos x dados aqui. E deixe-me copiar o espaço reservado. E aqui vou eu abrir uma área de texto. E eu vou providenciar um lugar para a sua mensagem. E finalmente, nós também temos um botão. E para o botão, vou criar outra divisão logo abaixo do diretor de fechamento da nossa entrada, Dash Rad 2. E dentro desta divisão em particular, teremos o nosso botão. E o botão é nomeado como centavo. Deixe-me copiá-lo e vamos colá-lo. Então, já temos uma classe de utilitário para o botão agora. Então vamos abrir uma tag de vidro e btn e btn primário. Então vamos salvá-lo e vamos verificar nosso site. Então, como você pode ver agora temos todos os elementos definidos como o yourname em ambos o URI milhões, mas a seção de mensagem, este objeto tem o maior botão Enviar. Agora é o primeiro estilo da hora, toda a seção de entrada. Então, como primeiro passo, vamos voltar ao nosso arquivo de índice. E aqui eu vou chamar P a entrada, o nome da classe de captura do Azure, e vamos para o nosso CSS. E aqui eu vou selecionar a classe de conduta, bem como como a entrada traço rapper. E eu vou fornecer uma grade de exibição. E o modelo de grade é coluna. E quero que repita quatro vezes e você o salva. E se você verificar o site e você pode ver que o seu nome e seu e-mail está em uma única linha e você também precisa de um pouco de espaço entre eles. Para fazer isso, vamos fornecer uma lacuna de grade de quase a sala. Vamos salvá-lo. E agora temos um pouco de espaço entre eles e também ser necessário espaço no fundo, Bartlesville. Então aqui eu vou fornecer uma margem. No fundo de um tambor. Vamos salvá-lo. Agora temos submissão, mas ISPs na parte inferior também. E como você pode ver que o assunto e as mensagens em uma única linha, mas no protótipo podemos ver que estes estão em duas linhas diferentes. Então, para fazer isso, o que eu vou fazer é que eu vou selecionar o segundo aplicativo VR de entrada, que basicamente envolve o segundo no Butão, a próxima idéia. E aqui novamente, eu vou selecionar a seção de conduta, bem como em Burdash R2. E eu vou fornecer um display flex. Então, agora, se eu salvá-lo, você pode ver que estes dois estão na mesma linha. Agora eu preciso mudar a direção flexível para coluna. Então coluna de direção flexível. E agora temos esses dois em duas linhas separadas. E agora precisamos dos DPI mais distantes em Boots. Então, se verificarmos a borda, você pode ver que a entrada está basicamente tendo um monte de preenchimento dentro. Mas nosso, qualquer um não está tendo o mesmo. Os espaços reservados estão realmente perto da borda da entrada. E agora vamos consertar isso. Então, para fazer isso, vamos voltar para o nosso style.css e branco aqui, eu vou selecionar o nosso milho volta e dentro do condutor e selecionar as tags de entrada inteiras. E eu vou fornecer um preenchimento de quase um sonho para cima, para baixo e para a esquerda e para a direita. E agora temos um número suficiente de estofamento na parte superior, inferior e esquerda, direita fora de nossa entrada. E aqui você pode ver que o barco assunto e a entrada da mensagem ou o texto da mensagem UDL realmente perto um do outro. E agora é fornecer um pouco de margem inferior para o nosso assunto ou realmente pode fornecer margem superior dois são MRSA também. Então aqui eu vou lidar com este acorde em particular. E eu quero selecionar a entrada. E vamos fornecer uma margem inferior de quase uma sala. E agora temos curso que números peça. E também você pode ver que a ordem de lugar de mensagem wor é realmente perto da fronteira. E mesmo se eu digitar algo que está realmente perto da borda, então precisamos de um pouco de preenchimento dentro da área de texto também. Então aqui novamente, eu vou copiar este código em particular. E vamos mirar o nosso ADR e fornecer um estofamento de quase uma borda. E também fornece uma margem inferior de um ou talvez dois deles, de modo que os dados de texto e as baterias bem separados. E agora está perfeitamente bem. Então, também precisamos fornecer um pouco de margem inferior para esses cartões. Como você pode ver, o bacalhau e o em budista realmente perto uns dos outros ou liberar. Podemos fornecer um pouco de margem dopado com esta lei particular em Bootstrap possível. Então nós vamos, eu vou fazer é eu vou copiar este código em particular daqui. E vamos colá-lo aqui e selecionar a entrada e fornecer uma margem. Em cima deles. Ou talvez três deles devam parecer bem. Sim, agora temos núcleo boa separação do que as cartas também. E agora sobre seção invertida está olhando predefinido desmarcar o do nosso protótipo. E agora vamos fazer uma textura mais fina para torná-la ainda melhor. E se você notar, você pode ver que o padrão é basicamente extraviado. E no protótipo temos o botão no centro. Então, para trazer para isso, NLS, volte para o nosso arquivo de índice. E para a divisão aqui, vamos fornecer uma classe de BTN traço Harappa. E deixe-me copiar esse nome de classe em particular. Vamos salvá-lo. Então deixe-me ir para o nosso style.css. E aqui eu vou selecionar a conduta, bem como o nosso botão Rapa. E vamos fornecer centro de alinhamento de texto. Então, se eu salvá-lo, você pode ver que o padrão está agora no centro. Mas há uma pequena questão que quando eu pairava sobre ele novamente e ver que ele leva isso nem visível. Então, no arquivo de índice você pode ver que eu dei uma propriedade de BTN primário. Assim, nas utilidades novamente ver que estamos tendo a praia e dados classe primária. E no corredor ou efeito, basicamente mudamos a cor do nosso texto para puro. E eu vou mudar um pouco isso para primário. Eu guardo isso. Agora podemos ver que o texto é claramente visível e há também uma mudança. Então aqui, anteriormente esta doutrina regular do milho era branco quando passamos o mouse sobre ele agora mudou ou verde Asbell. E eu meio que sinto que isso parece muito melhor do que o texto do ponto de conduta branco quando o salão onde é aplicado. Portanto, não há diabetes também corrigido. Eu posso ver que a seção Conduta Me está realmente bem. E também precisamos de um pouco de estofamento superior para o título também. Então vamos fazer isso. Então vamos para o nosso styles.css. E bem aqui eu vou fornecer um estofamento, top off quase um rem. E vamos aumentar isso para os romanos. Veja qual é a diferença. E agora temos uma boa separação. Então pessoal, é isso. Finalmente construímos a seção Conduta Me também, e ela está parecida com a do nosso protótipo. E novamente, espero que vocês entendam o desenvolvimento básico que fizemos neste vídeo em particular. Então é isso, pessoal, obrigado por assistirem e vejo vocês no próximo vídeo. 11. Como criar o rodapé: Olá pessoal, bem-vindos ao vídeo. E neste vídeo em particular, v estão indo para construir dia padrão fora do nosso site. Então, finalmente chegamos à parte inferior do nosso site. Então, se você analisar a borda, você pode ver que B tem um logotipo e um ápice bem aqui. E também temos um fundo escuro para a nossa pasta. Então vamos para o nosso arquivo de índice e deixe-me clicar em Abrir este texto em particular a partir daqui, e vamos colá-lo no final da nossa seção de conduta. E novamente aqui eu vou abrir outro Coleman que indica que a seção de rodapé começou. Aqui. Deixe-me ampliar e vamos abrir uma etiqueta de rodapé. E dentro desta etiqueta em particular, primeiro lugar, temos o logotipo. Então eu vou abrir uma tag de imagem. E dentro do medius, nós pegamos que o logotipo do pessoal de navegação para baixo e selecionamos isso. Em segundo lugar, temos este x em particular aqui. Então deixe-me copiá-lo. E aqui eu vou abrir outra divisão que uma classe de texto traço rodapé. E dentro desta divisão podemos simplesmente colar o código. E vamos salvá-lo. Vamos visitar o nosso site. E aqui você pode ver que temos o logotipo, bem como o texto aqui. Então agora precisamos fornecer um fundo escuro. Então vamos para style.css. E aqui vou eu selecionar todo o rodapé. E vamos fornecer um fundo de escuridão. E também precisamos que o SQL local viu pela última vez o texto para estar no centro do rodapé. Então, há também fornecer linha extra centrada. Agora, se eu salvar e voltar para o site, você pode ver que nós temos logotipo trimestral, bem como o X bem aqui. Então, agora vamos fornecer o preenchimento, bem como mudar a cor de nossos rodapés. Então, para fazer isso, vamos voltar para o nosso style.css primeiro pagar aqui, eu vou selecionar a imagem. E vamos fornecer uma margem superior de quase urina. E Chin comprou quase um tambor. E aqui vocês vão ver que agora temos o nosso espaço de solução no topo e no fundo. E eu vou reduzir ligeiramente a margem superior porque é um pouco alto demais. E agora ele está olhando para predefinido. E vamos também mudar a cor do nosso texto aqui. Então aqui vou eu copiar o rodapé. Então vamos direcionar o texto do rodapé. E dentro disso temos o nosso texto de rodapé. Então eu vou mudar a cor para pura. Vamos salvá-lo. Sim. E você pode ver que nós não temos um monte de preenchimento inferior dois sobre x critérios. Ele está realmente perto da parte inferior desta pasta particular. Então, vamos fornecer um fundo de preenchimento de quase a sala para que haja separação leve. Agora temos uma boa separação para ler textos também. Então é isso pessoal. Agora o fóton está funcionando pré-definido, assim como o do nosso protótipo. Obrigado por assistirem, e vejo vocês no próximo vídeo. 12. Atribuindo a animação de rolagem: Olá pessoal, bem-vindos ao vídeo. E neste vídeo em particular vamos fornecer animação de rolagem para o nosso site. Então aqui na barra de navegação você pode ver que nós fornecemos links diferentes. E a partir de agora, se você pressionar em qualquer link, você pode ver que basicamente nada acontece. Mas depois de fornecer animação de rolagem, quando você pressiona qualquer um desses encargos, ele vai levá-lo para o respectivo local. Então, por exemplo, se eu clicar em um quadro, ele vai me levar para o bordo 16 automaticamente. E se eu pressionar na seção do projeto, ele vai me levar automaticamente para a seção do projeto. Isso é o que é animação sublinhado. E agora vamos aplicar rolagem e dimensão ao nosso site. Então vamos para o nosso arquivo de índice. E em primeiro lugar, deixe-me copiar este comentário e vamos fechar o nosso comentário rodapé também. E agora, se formos até ao topo até à nossa secção de heróis. Na seção herói novamente ver todos os links que temos especificado e dentro dele é Shift arrastar, você pode ver que nós fornecemos um hash e não há nenhum local especificado ou pote. Então agora vamos para a nossa seção de um parafuso e vamos basicamente fazer alguma alteração. Então agora estamos na seção do conselho e dentro desta seção em particular, eu vou fornecer uma identificação. Então ID é basicamente uma palavra-chave única. Então, por exemplo, nesta seção em particular, eu vou fornecer uma idéia de cerca de. Isso significa que eu posso criar outro ID com um ID de um barco em qualquer outro lugar neste arquivo específico. Portanto, os IDs são elementos únicos. Então, como você pode ver, criamos um ID para nossa seção Sobre. E vou copiar esta identificação em particular. E bem aqui dentro da etiqueta âncora, dentro deste gráfico em particular, vou colar a identificação de um ataque. Então temos hash e o nome do ID que é um bot. Então, agora, se eu salvar e eu, se voltarmos para o seu site e se eu clicar no link sobre aqui ou a etiqueta de âncora de um barco e ver que em tomadores para a seção sobre. Mas como você pode ver que não há animação. Então, fornecer animação é um símbolo bonito. Então, a animação do programa, vamos para o nosso arquivo CSS. E se eu rolar todo o caminho até o topo do arquivo CSS aqui, eu vou selecionar o HTML e eu vou fornecer um comportamento de rolagem de suave se eu salvá-lo. E se eu clicar na tag Sobre âncora mais uma vez, você pode ver que agora temos uma animação de rolagem suave. Então, tudo isso é sobre fornecer uma animação de rolagem para o nosso site. E agora vamos fazer o mesmo para todos esses outros links. E vamos para o nosso arquivo de índice. E aqui dentro da nossa cabeça eu vou fornecer uma identificação de casa. Vamos copiar isso e colá-lo aqui na etiqueta âncora. E vamos para nossa seção de habilidades. Dentro dessa seção, vou fornecer outra identificação com habilidades como nome. E vamos também para a seção de produtos e fazer o mesmo. A diversidade de projetos. E, finalmente, é também ir para ou minha seção de livros e fornecer um ID do meu blog. E vamos fazer o mesmo para a dissecação do milho também com uma identificação de conduta. Então é isso. Agora, vamos voltar para a nossa etiqueta âncora e especificar o ID aqui também. Agora temos habilidades adquiridas. Para sua seção de habilidades. Coloque seis para a seção do projeto e meu blog para a seção do blog. E vamos guardá-lo e vamos verificar o nosso site. Então, em nossos projetos pessoais. E isso vai nos levar para a seção do projeto. Se eu pressionar em um blog, é um. Leve-nos para a seção do blog. Que barco. Sim, tudo está funcionando perfeitamente bem. Então é assim que podemos fornecer-nos crescer a nossa animação para o nosso site. Assim, qualquer pessoa que está com o novo site pode ir diretamente para qualquer uma dessas respectivas seções por apenas um clique. E eles são tratados com uma animação suave. Então isso é tudo por esse roubo, os caras. No próximo vídeo, vamos tornar nosso site completamente responsivo para todos os tipos de tamanhos de tela. E é isso. Vejo vocês no próximo vídeo. Obrigado por assistir. 13. Site responsivo — Menu de navegação Parte 1: Olá pessoal, bem-vindos ao vídeo. E neste vídeo em particular, vamos tornar o nosso site responsivo. Então esta é a primeira parte. E neste vídeo em particular, vamos construir uma navegação móvel. Então, antes de entrar no vídeo, eu queria dar a vocês uma compreensão básica de uma palavra que vamos fazer neste vídeo em particular. Então, para fazer isso, vou clicar com o botão direito do mouse e vamos abrir a ferramenta de desenvolvedor. Então é assim que a ferramenta de desenvolvedor, e como você pode ver, esta dissecção final é conhecida como a seção de porta de exibição. E podemos basicamente eu apenas a largura e altura do visor também. Então agora eu vou diminuir o bit em si, o viewport. E como você pode ver que quando eu vou todo o caminho até a esquerda novamente, veja, em seguida, mergulhe Ciclopes. Podemos ver muitos espaços em branco. E se você notar a barra de navegação, nós temos links godaddy em linhas diferentes e está realmente parecendo muito ruim. Então, se uma pessoa entra em seu site com esse tipo de proporção de tela como 9018949. Isto é o que eles vão ver. Então precisamos consertar tudo isso. Então você pode ver que quando lemos por volta de 998, você pode ver que a barra de navegação ou os links se dividem em dois. Então precisamos consertar isso. E em vez deste diagnóstico final particular, Barbie vai criar um menu de navegação. Então, para um tamanho de tela pequeno, vamos desativar a barra de navegação. Em vez disso, forneceremos um hambúrguer. Então, quando o usuário clica em hambúrguer, a barra de navegação final morreu será exibida. Então é isso que vamos fazer neste vídeo em particular. Então vai ser muito interessante. Vamos aprender muito sobre como tornar um site responsivo porque a nossa versão para desktop está muito incrível. Mas como dizem as tendências atuais, quase todos os usos vão usar um smartphone e eles vão visitar seu site através de um smartphone. Então, nosso ponto de vista inteligente está parecendo muito ruim e agora é hora de corrigi-lo. Então vamos começar. Então, pessoal, se vocês notarem, vou diminuir o tamanho da janela de exibição. Essa é a largura da janela de exibição. E neste ponto particular, quando os parênteses em torno de 988 novamente ver que os links se dividiram em duas linhas diferentes. E o que precisamos é que, nesta fase particular, os links vão se dividir em duas diferentes desativações saudáveis que todo o equipamento de navegação tem. Então, para que isso aconteça, vamos usar media query. Então, a consulta de mídia, vamos especificar um break-even, ou no nosso caso, é uma largura da viewport. Então, quando o break-even atingir V, quero desativar a barra de navegação. E você vai ver que nós ouvimos muitos espaços em branco e vamos mover isso. Então eu estou agora no arquivo CSS e branco aqui, eu vou selecionar HTML e o corpo. E eu vou fornecer estouro x como oculto. Agora, se eu salvá-lo, você pode ver que o espaço y se foi. E agora vamos identificar o break-even ou a largura em que queremos que a barra de navegação seja desativada. Então, novamente, eu vou diminuir a largura da janela de exibição. E aqui você vai ver que em torno deste ponto em particular, por volta de 1988 é onde a seção de links é dividida em duas partes. Eu não vou levá-lo até este ponto em particular porque você pode ver que a conduta e os links são muito próximos. E eu vou usar o valor seguro do nosso mais em torno dos que são 204. E a questão de pegar tudo na linha 88 liberal é que se uma pessoa com este tipo de eixo de visão, você está perturbando e vê a conduta e os links finais da dieta são muito próximos. E não está parecendo tão bom. Então, se é 1024, é uma espécie de olhar agradável mesmo neste tipo de uma largura e altura da viewport. Então o que vamos fazer é que vamos para o nosso styles.css. E eu vou rolar todo o caminho até o fundo. E aqui, a consulta de mídia dos EUA eu vou entrar na taxa de mídia. E o insight no suporte, Eu quero especificar a largura, que é a largura máxima. E como já discutimos, nós até mesmo ir com 1024 pixel. E aqui vou eu abrir o corpo. Então o que eu vou especificar neste bloco em particular será aplicável quando o vértice aqui cruza 1024. Então, aqui vamos desativar a barra de navegação. Então vamos para o arquivo de índice. E dentro do navegador, eu vou fornecer uma identificação do traço principal f. Deixe-me copiar isso e vamos salvá-lo. Vamos voltar ao style.css. E aqui vamos selecionar nossa barra de navegação. Então que está dentro do cabeçalho, vamos selecionar a barra de navegação. Então vamos selecionar a barra de navegação através do ID. Então precisamos fornecer hashtag para selecionar o ID. E aqui eu vou mostrar nenhum. Agora, se eu salvá-lo, e você pode ver que a barra de navegação está faltando. Então deixe-me demonstrar isso. Então agora a riqueza atual é quase 1054. E vocês podem verificar esse valor em particular quando é quase 10 a 4. Quando ele cruza 10 a quatro, você pode ver que a barra de navegação está desativada. Então isso é o que eu quis dizer com “break-even”. Então, quando o break-even de 1024 é alcançado, neste ponto específico, nosso código dentro de nossa media query com Ebert 0, 1, 0 a quatro pixels é ativado. E dentro da media query, desativamos a barra de navegação, e isso basicamente aconteceu. Então, pessoal, a primeira coisa que eu vou fazer é que nós precisamos construir nosso hambúrguer. Então estamos em um lugar ou hambúrgueres em algum lugar bem aqui. Então, para fazer isso, vamos para o nosso arquivo de índice e vamos copiar todo o código dentro do corpo. Então vamos selecionar as seções inteiras. Então deixe-me diminuir o tamanho e desmarcar todo o código que está dentro do corpo até a foto. Então vamos cortar. Então, se você está no Windows, você pode controlar e x, e se você é um Mac, você pode recomendar e x. então agora deixe-me ampliar um pouco. E aqui dentro do corpo, vou criar uma divisão com uma classe de local traço, traço Harappa. E dentro desta divisão em particular, vamos colar o código. Então, tudo o que fizemos é que basicamente criamos uma nova divisão que é nomeada como nosso traço principal wrapper site. E dentro deste Rapa em particular, colamos todo o código que está em um corpo terrível. E agora deixe-me alinhá-lo. Tudo bem, a próxima coisa que eu vou fazer é que dentro de nossos dados secundários significa que isso é invólucro. Vamos criar outra divisão com uma classe de hambúrguer. E dentro desta divisão em particular, quero criar um botão. E este botão vai ter uma imagem que é nomeado como hambúrguer ponto SVG. Agora, se eu salvá-lo e se você vai para o nosso site, aqui na parte de cima novamente, ver o nosso hambúrguer eu duvido aqui. E agora precisamos estilizá-lo e precisamos mudar sua posição e precisamos transportá-lo para algum lugar bem aqui. Então, para fazer isso, vamos basicamente selecionar nosso traço site, traço wrapper. Vamos para o nosso style.css. E aqui, digamos assim, eu traço Mendes wrapper e mudar sua posição para relacionar dv. E agora vamos selecionar nosso hambúrguer. Então o hambúrguer está dentro do nosso site traço Mendes wrapper. Então primeiro vamos selecionar isso, seguido pela nossa garota do hambúrguer. E aqui eu vou mudar sua posição para absoluta. E eu serei novo em localizado em algum lugar por aqui. Então vamos fornecer-lhe um topo de quase 40 pixels. E logo de novo em torno de 40 pixels. E se eu salvá-lo, e você pode ver que agora o hambúrguer está faltando por raio aqui, mas atrás do saco para fora. Agora precisamos trazê-lo para a frente do saco para baixo. Para fazer isso, vamos fornecer um índice de inserção de 11. Se eu salvá-lo. Aqui, você pode ver que agora temos um ícone de hambúrguer aqui. Então o hambúrguer é basicamente um fechado dentro de um botão. Então, por padrão, ele vai ter um fundo que eu forrei e uma borda. E agora vamos fazer para o estilete. Então aqui no style.css, vou copiar todo o código daqui, que seleciona a divisão de hambúrgueres. Então, dentro da divisão de hambúrgueres, temos o botão. Então aqui eu vou fornecer um fundo sobre nenhum. Agora, se eu salvá-lo, você vai ver que o fundo é basicamente o deficiente, mas novamente, veja a fronteira bem aqui. Então, o que eu apenas forneço uma fronteira, nenhuma. Agora, se eu salvá-lo, a fronteira está basicamente desativada. Mas se eu clicar nele, ele vai basicamente fornecer um esboço sobre ele. Então, vamos também fornecer um esboço de nenhum. Agora, se eu guardá-lo, o hambúrguer sumiu e parece perfeitamente bem. Portanto, há também um pouco na Grécia o tamanho do hambúrguer. Então, para fazer isso, vamos copiar, em seguida, direcionar porta a partir daqui. Vamos colá-lo e selecionar a imagem. E vamos fornecer um muito difícil quase 30 pixels. Vamos salvá-lo. E agora você pode ver que o hambúrguer é claramente visível e que também é mudar o cursor para apontar o botão dobrável e salvá-lo. Agora o hambúrguer está bem. Vamos fechar a ferramenta de desenvolvedor. E agora você pode ver que o hambúrguer é basicamente visível na visão normal também. E precisamos consertar isso, e vai fazer isso em um segundo. E aqui você pode ver que todas as outras propriedades do hambúrguer está funcionando perfeitamente bem. Isso está na posição certa e está parecendo muito bem também. Agora vamos descer para adiar a personalização do hambúrguer. Então, pessoal, agora estou na minha seção Ferramentas de Desenvolvedor. E aqui você pode ver que não temos o menu de hambúrgueres bem aqui. E eu acredito em mim pressioná-lo. Precisamos de um menu para aparecer e que Meno deve exibir todos os links como casa sobre habilidades e não. Então é isso que vamos construir agora. Então vamos para o nosso arquivo de índice. Bem aqui, esta é a nossa divisão de hambúrgueres, e logo abaixo dela eu quero criar outra divisão, mas um copo de navegação móvel e agradável. E depois decidir esta divisão em particular, vou criar uma lista desordenada. Então, dentro desta lista particular não ordenada, eu vou criar outra lista. E esta lista consiste em uma tag âncora. Então, basicamente, quando pressionamos em casa ou em uma placa, é para nos levar para aquela seção superior, certo, então precisamos de uma etiqueta âncora para isso. E aqui vou eu nomear esta etiqueta âncora como casa, assim como a da nossa barra de navegação. E precisamos de um total de mais quatro links diferentes. Vou copiar isto mais quatro vezes. E eu vou renomear isso. Então aqui eu vou copiar da seção de heróis e vamos colá-lo aqui. Este copioso mata e cola-o aqui. Projetos. E, finalmente, o quarteirão. E agora vamos salvá-lo. E se verificarmos o nosso site aqui na parte do cão de novo, ver a diarreia final. Móvel nunca morre divisão com todos os links diferentes. E agora vamos discar. Então, pessoal, neste momento, nosso hambúrguer pode fazer está realmente ocupando espaço de um site. Como você pode ver isso exibido no topo do nosso site, o que realmente precisamos desses dados, esta seção particular deve ser escondido no lado esquerdo. E então clicamos no menu de hambúrguer. Isso e dissecação devem aparecer e exibir todos esses menus. E o menu de hambúrguer também deve ocupar toda a largura e altura da tela. Então este é o nosso requisito básico, e agora vamos começar a construir isso. Então, antes disso, deixe-me ir para o arquivo index.html. E aqui você pode ver que a palavra móvel está errada. Então eu vou renomeá-lo para alelo MOBI e vamos salvá-lo. E também pode copiar este nome de classe particular a partir daqui. Depois disso, vá para o nosso style.css. E aqui vamos selecionar a classe de navegação móvel. Então, primeiro de tudo, eu vou dar posição como fixo. E eu vou dar um top de 0 e uma esquerda de 0 também. Então, será o mais à esquerda possível para a tela. Agora, se eu guardá-lo aqui, você pode ver que o menu de hambúrguer agora não está visível. É porque não fornecemos nenhum índice definido. Agora está por trás do nosso site. Agora precisamos trazê-lo para a frente. Então, aqui vamos fornecer um índice. Portanto, precisamos fornecer um valor mais alto, por exemplo, em um 1001. E vamos ver. E agora podemos ver que nosso menu de hambúrgueres é visível. Então vamos fornecê-lo de volta para ele. Então há fornecer um fundo de puro. Vamos salvá-lo. E como você pode ver agora, o menu de hambúrguer é visível. E eu já disse que o menu de hambúrgueres deve ocupar toda a tela. Então precisamos fornecer uma largura de 100 por cento, bem como uma altura de 100 por cento. Agora, se eu guardá-lo aqui, você pode ver que o hambúrguer está ocupando toda a tela. Uma vez que fornecemos um valor de índice mais alto, ele está em cima de todas as diferentes camadas e seções do site. E agora aqui você pode ver que no final, ligações terríveis estão realmente perto da fronteira. Então vamos fornecer um preenchimento de dois rems para a esquerda, direita e superior e inferior. Desculpe. Vamos guardá-lo para agora nós fornecemos um preenchimento de dois REM. Então, pessoal, a partir de agora não temos nada para fechar o menu de hambúrgueres. Abrimos, mas também precisamos fechá-la, certo? Então precisamos criar um corvo que eu possa escrever aqui à direita para que Darwin clique nele, o menu de hambúrguer desaparece e vai para o lado esquerdo. Então, para fazer isso como voltar para o nosso arquivo de índice e escrever dentro da nossa divisão de navegação de traço móvel. Vou abrir um botão com uma classe de vezes. E dentro deste botão particular eu vou abrir uma imagem e vamos sob barra de ponto, ir para a pasta Imagens e selecionar uma imagem com o nome de vezes 30 SVT. Vamos salvá-lo. E se você for para o lado positivo aqui novamente, você vê que temos um ícone de cruz, mas precisamos que isso esteja no lado direito. Então, para fazer isso, vamos basicamente copiar o nome da classe a partir daqui, vá para style.css. E aqui vamos selecionar esta divisão em particular. E em primeiro lugar, eu vou dar posição como fixo. E vamos também fornecer topo como 30 pixels. E vamos trazê-lo todo o caminho para a direita. Isso é certo. Para a maioria de 100 pixels. Então, se eu salvá-lo, você vai ver que agora o ícone está quase à direita. E isso é basicamente um botão. Então, por padrão, ele vai ter um contorno de fundo e uma borda. E vamos desativar todas essas coisas. Então aqui eu vou fornecer um fundo de nenhum, desculpe, conhecido como fornecer um contorno de nenhum como uma fronteira. Nenhum. Agora, se eu salvá-lo, você pode ver um ícone de cruz de avião. E vamos também fornecer cursor como apontar para cima para que nós trazemos nossas bocas. Vai parecer o de um cursor. E agora temos um ícone de cláusula aqui também. Então caras aqui você pode ver que nosso ícone de cruz é muito menor e resgatar graxa limpa seu tamanho. Então, para fazer isso, vou copiar a aula do tempo. E aqui eu vou selecionar a imagem e vamos mudá-la para 1,5 m. Deixe-me salvá-la. E como podem ver agora, é suficientemente grande e descartável. Agora vamos discar todos esses links diferentes. Então, para fazer isso, vou selecionar a nossa divisão mais pi, traço NADPH. E vamos selecionar toda a lista desordenada em primeiro lugar, e você pode ver que temos o quê? Pontos bem aqui. Vamos desactivar isso. Tão verdade que eu não digitar no estilo de traço lista, tipo de traço como nenhum. Agora, se eu salvá-lo, você pode ver que os pontos não são mais visíveis. Em segundo lugar, vamos também estilizar esses links diferentes. Então, o texto. Então aqui eu vou selecionar a lista não ordenada, a lista e a etiqueta âncora dentro dela. Então, primeiro de tudo, eu vou mudar sua cor para escuro. Então agora temos cor escura bem aqui. E você pode ver que nós temos o que sublinha. Então vamos desabilitar isso especificando a decoração do texto. Nenhum. Agora não temos sublinhados tão bem como eu vou aumentar o tamanho do telefone deles para que eles fiquem claramente visíveis. Agora temos os links estilizados, e como você pode ver, esses anéis são realmente próximos um do outro, então precisamos fornecer um pouco de margem inferior. Então para isso eu vou copiar o link. Esse é o alinhamento. E eu vou fornecer uma margem inferior ou mais para eles. Agora temos uma lacuna de percepção entre eles. Então aqui você pode ver que a lista Enlil está realmente perto do topo da página. Então, isso é fornecer um pouco de preenchimento. Então, para fazer isso, vamos para o nosso navegador móvel. E aqui eu vou fornecer um top acolchoado de cinco rem. E agora temos opções de curso baseadas no topo. E também vou trazer isso na lista terrível para o centro da página. Então, aqui vamos fornecer centro de alinhamento de texto. Agora temos o tema ascendente Inditex. Então pessoal, agora estamos feitos com a navegação básica pode saber design. E agora vamos fornecer as funcionalidades básicas para o nosso menu de navegação. Como quando clicamos no botão Fechar, esta navegação em particular deve fechar e, em seguida, clicar no ícone de hambúrguer. janela de navegação vertical deve abrir. E agora vamos fornecer essas funcionalidades básicas. Então, para isso, vamos usar nosso app.js para fornecer a funcionalidade. Antes disso, vamos para o nosso arquivo de índice e vamos dar uma classe para o nosso botão, que é o botão hambúrguer. Então deixe-me copiar o nome daqui. E vamos fornecer uma classe de hambúrguer botão Dash. E aqui eu vou copiar esse nome particular de classe asfalto, e vamos salvá-lo. Agora vamos para o nosso app.js. E aqui mesmo, vou criar uma variável. Assim, podemos criar uma variável usando chumbo, watt ou cones. E eu vou dar um nome variável de hambúrguer. Então aqui eu vou reselecionar, que é o ponto de documento QuerySelector. E dentro do suporte redondo, eu vou especificar a classe do limão que eu quero selecionar. Então, no nosso caso, queremos selecionar o botão. Então, precisamos especificar o provedor de classe para o botão, que é o botão hambúrguer Dash. E não se esqueça de fornecer o ponto desde VR basicamente acessando o elemento. Então agora selecionamos o botão hambúrguer e também precisamos selecionar o ícone de cruz também. Então aqui eu vou criar outra variável com o nome do tempo. E aqui novamente, Eu vou documentar e selecionar sobre o ícone de cruz. E se eu não estiver errado, nós demos uma classe de vezes. Então vamos verificar. Então, aqui temos um dado uma classe vezes para o nosso botão. Então vamos copiá-lo e colá-lo. Então pessoal, agora nós selecionamos esses dois elementos, e agora é hora de nós fornecermos um ouvinte de eventos. Então, selecionamos o botão, e agora precisamos dizer ao botão o que fazer quando clicarmos nele. Então, para fazer isso, eu vou copiar o nome da variável hambúrguer daqui. E nós vamos adicionar um ouvinte de eventos. E o prêmio deve o ouvinte do evento ouvir, que é basicamente um clique. E quando uma pessoa clica no ícone de hambúrguer, esta função em particular, esta função em particular vai ser executada. Resumindo o código, quando alguém clica no ícone do hambúrguer, essa função específica é acionada e o código dentro dele é executado. Então esse é o fundamental básico por trás deste ouvinte evento particular. E precisamos do mesmo para os nossos tempos eu ou o botão Times também. Então eu vou duplicar o código e eu quero mudar o nome da variável 2 vezes 0. Certo? Agora nós apenas especificar o que deve acontecer quando estamos indo para clicar neste ícone de hambúrguer particular. Então, pessoal, antes de seguir em frente, vamos visitar nosso site. E como você pode ver que no cenário atual quando o site BB Zeta, a única coisa que podemos ver menu de navegação oriental, mas por padrão, e quando recebemos o nosso site, devemos notar ver o menu de navegação. Isso deve ser visível somente quando clicamos no menu de hambúrguer. Então precisamos esconder o menu de navegação. Então o que vamos fazer é que vamos transportar o menu de navegação NDI para a esquerda. Então, quando clicarmos no menu do hambúrguer, ele deve aparecer. Então, para fazer isso, vamos para o nosso style.css. E aqui mesmo no ponto móvel, vamos basicamente aplicar um X. Então, para fazer isso, eu vou abrir a transformação. E aqui eu vou especificar. Traduzir X. Então traduzir X ou traduzir é basicamente usado para mover objetos. E já usamos traduzir na seção de habilidades onde precisamos trazer o logotipo e o cartão no remetente e traduzi-lo especifica que precisamos mover o elemento no eixo horizontal. E se eu inserir qualquer valor positivo, ele vai levar o elemento diverso, certo? Mas agora nós não vamos este menu de navegação particular para estar à esquerda. Então precisamos fornecer valor negativo, e eu vou fornecer menos um 100 por cento. Então menos um 100 por cento vai tirar o elemento da tela. Então, se eu salvá-lo, o menu de navegação não estará mais visível. Na verdade, não se foi. Está em algum lugar do lado direito. Então, se eu mudar o valor para quase 80%, você pode ver metade dele. Então, ele está na verdade no lado esquerdo, mas nós podemos realmente vê-lo. Então eu vou trazer isso de volta para 100%. Ou como agora temos por padrão feito um menu de navegação oculto. Então a próxima coisa que vamos fazer é que Darwin me clique no ícone de hambúrguer bem aqui. O menu de navegação deve voltar à sua posição original. Então, para fazer isso aqui eu vou criar outra classe que é chamado US dot open. E aqui vou eu copiar este código em particular daqui. Vamos colá-lo. E aqui eu vou especificar a tradução x como 0. Então, especificando traduzir x 0, ele vai trazer de volta nosso menu de navegação para sua posição original. Então, se eu salvá-lo, e se eu voltar para o nosso site aqui, eu vou aumentar a largura desta seção em particular. E se eu escolher o nosso hambúrguer. E aqui vamos ver a classe de navegação tracejada móvel e então vamos abri-la. E Fi fornece a classe aberta aqui. Então aqui o aberto vai trazer de volta o nosso menu de navegação para a sua posição original. Então, se eu simplesmente especificar aberto na classe de navegação, vamos ver que temos tau, o menu de navegação de volta à sua posição. E se eu removê-lo, você pode ver que está escondido. Então, com a ajuda de JavaScript, precisamos dinamicamente, eu localizar nossa classe para este NADPH móvel tracejado em particular. Então é muito fácil fazer isso. Vamos voltar para o nosso app.js. E aqui no arquivo de índice você pode ver que este é o móvel Lord nav. Dentro dele é onde temos o menu de navegação de diarreia final. Então é por isso que vamos adicionar aberto aqui mesmo nesta classe em particular. Então aqui vou eu copiar o nome da turma. Primeiro de tudo, precisamos selecionar nossa classe de navegação móvel. Então aqui no app.js, eu vou criar outra variável conhecida como nav. E mais uma vez, vou copiar este código em particular. E aqui eu vou selecionar nosso navegador móvel mais 4, certo? Então, aqui nós basicamente selecionamos nossa classe de navegação móvel. E agora, quando clicamos no nosso botão de hambúrguer, precisamos do nosso menu de navegação para ser visível. Para fazer isso, eu vou digitar em navegação móvel, lista de classe ponto, ponto adicionar. E que classe precisamos adicionar, essa é a classe aberta. Então, incitando glicose, vou especificar abrir e fechar. Então este código em particular diz que quando clicamos no botão hambúrguer, precisamos desta função específica para executar. Então o corpo da função diz que quando clicamos no botão hambúrguer, precisamos adicionar uma classe particular ao nosso nav móvel mais, que somos selecionados aqui. Então, se voltarmos ao nosso código e se eu clicar neste ícone de hambúrguer cru particular, podemos ver que agora temos nossa janela de navegação aberta. E aqui você pode ver que o operando foi automaticamente adicionado dinamicamente ao aplicativo móvel. Então, se eu atualizar novamente, e aqui você pode ver que agora não temos uma aula aberta junto com o navegador móvel. Mas o momento, e eu vou clicar no botão hambúrguer aqui você pode ver que nosso JavaScript adiciona dinamicamente esta classe aberta particular, que é a lista de classe ponto adicionar aberto faz este trabalho particular. Então é assim que basicamente conseguimos a funcionalidade de abrir o menu de navegação quando clicamos no ícone de hambúrguer. Então agora precisamos também fornecer funcionalidade para a nossa cláusula eu posso, então quando clicamos nele, precisamos de outros menu de navegação particular para ir para o lado esquerdo. Então aqui você pode ver que no momento em que eu remover a classe aberta, nós vamos ver que dow, o menu de navegação está escondido. Então, removendo o vidro do operando, podemos basicamente remover o menu de navegação. Então aqui nós já selecionamos nosso ícone de cruz, e aqui dentro do nosso ouvinte de eventos para o seu ícone de cruz. E eu vou copiar é especial para acordes daqui. E eu vou colá-lo. E em vez de adicionar o vidro aberto, vou remover o vidro operatório. Isso é a lista de classe ponto remover aberto. Agora, se eu guardá-lo e o outro, você volta para o site. Aqui eu quero clicar no menu de hambúrguer, que abre nosso menu de navegação. E aqui você pode ver agora temos classe aberta no traço móvel Na mais, e eu vou clicar no ícone de cruz eles abriram última foi removido, e que esconde ter um menu de navegação. Então agora nós basicamente alcançamos as duas funcionalidades básicas. Ou seja, quando clicamos no botão de hambúrguer, temos o menu de navegação aberto e, em seguida, clicamos no ícone de cruz. O menu de navegação foi desativado ou oculto. Então, pessoal, quando clicamos no botão do hambúrguer, você pode ver que no menu de navegação ele só pisca e sai. Não há animação suave para ele. Então, para fornecer uma animação deslizante, Vamos voltar para o nosso style.css e branco dentro do nosso ponto móvel. Agora, vamos fornecer uma transição para todos os elementos e vai ser 0,5 segundos e é fácil entrar e sair. Agora, se eu salvá-lo. E agora, quando eu clico no botão de hambúrguer, você pode ver que há uma animação suave dentro e suavizar. Então agora temos o botão hambúrguer como botão Cláusula Elástica e, em seguida, morreu funcionalidade juntamente com animação, tudo definido. 14. Parte responsiva no site — 2: Olá pessoal, bem-vindos ao vídeo. E neste vídeo em particular vamos tornar o nosso site completamente responsivo. Então, no vídeo anterior, como um primeiro passo para tornar nosso site responsivo, nós realmente fizemos nosso menu de navegação. Então este é um dos vídeos mais importantes do nosso site. Porque fazer uma resposta do site para usar realmente importante nesta fase de pessoa em particular. Porque nosso site deve ficar perfeito em quase todos os tamanhos de tela. Então, se eu sob f, L no meu teclado, que vai abrir nossa ferramenta de desenvolvedor. Você vai ver que agora estamos em quase 13, 25 pouco por 949 altura. E agora, se eu produzir uma palavra, aqui, você pode ver que agora temos nosso menu de hambúrgueres. A barra de navegação foi desativada. Mas agora se eu selecionar uma altura de 10 dias de um iPhone virar aqui você pode ver que nosso site está completamente quebrado. As coisas não estão olhando descobertas ou não visíveis. Alguns deles estão sobrepostos e estão completamente quebrados. E agora é hora de corrigir todos esses problemas e fazer nosso site parecer perfeito em quase todos os tamanhos de tela. E vamos começar. Então, pessoal, se verificarmos nosso style.css aqui podemos ver um contêiner. Então esta condição tem um especialista em matemática, um preenchimento e a margem. Então este contêiner é basicamente para a nossa área de trabalho. Então, este recipiente certifique-se de que o nosso lado positivo parece bom na versão desktop. Mas nós realmente precisamos de muita conveniência como esta para fazer nosso site parecer bom em raio ou tamanhos de tela também. Então, se nós rolar para baixo aqui, você pode ver que nós basicamente aplicamos uma consulta de mídia aqui. Então eu vou cortar isso e vamos colá-lo no fundo. E vamos basicamente ter todas as consultas de mídia no final do arquivo. Então aqui você pode ver que esta mídia em particular, ele é ativado quando as quedas abaixo de 1024 pixels. E agora, por enquanto, temos apenas uma única modificação. seja, fazemos ou desativamos a exibição da nossa barra de navegação. Então Eve recurso calçada agora, vamos basicamente fazer a versão iPad do nosso site responsivo. Mas ela tem uma nota até 768 e altura de 1024. Então a primeira coisa que eu vou fazer é que você não viu que a imagem e o texto aqui é bem grande. Então, vamos basicamente diminuir seu tamanho. Então aqui eu vou clicar no seletor de elementos, e eu vou selecionar a imagem. Deixe-me aumentar ligeiramente a largura da seção. E o legal é que aqui você pode ver que w0 estão tendo o caminho para esta imagem em particular. Nós não precisamos ir índice porta por terra manualmente encontrar a localização da nossa imagem era. O seletor de imagem fornece automaticamente a parte dessa imagem específica. Então eu vou simplesmente copiar este caminho particular daqui e aqui dentro da nossa consulta de mídia, colá-lo. E eu vou diminuir sua largura para 260 pixels. Se eu guardá-lo, você pode ver que o tamanho foi diminuído e agora também há mudar o tamanho do nosso raio-x aqui. Na verdade, parece muito grande. Mais uma vez, eu quero selecionar nosso texto a partir daqui. E aqui vocês podem ver que temos todo o caminho para este texto de área em particular. Vou copiá-lo. Vamos voltar para o style.css. E aqui vou eu colá-lo. E eu vou diminuir o tamanho da fonte para quase para espaço. E se eu salvá-lo aqui, você pode ver que o tamanho do nó está parecendo muito divertido. Mas você pode ver que a imagem e o texto estão realmente próximos da parte superior da página. Precisamos fornecer um B diz preenchimento superior, topo. Então nós sabemos que este fim em particular lados elementares terríveis dentro da seção de heróis. Assim, da mesma forma, podemos fornecer um pouco de estofamento seção herói porta superior. Então aqui eu vou selecionar a seção de herói e que é fornecer um topo de preenchimento de 10 rem. Vamos salvá-lo. E agora eu posso ver que estamos tendo quantidade suficiente de espaço na parte superior da nossa imagem e do texto. Então pessoal, você pode ver que a imagem eo texto é cláusula 3D para a borda esquerda da nossa página. E vamos também fornecer um pouco de preenchimento à nossa seção de heróis para que pelo menos dois elementos residam no centro desta página específica. Então aqui eu vou fornecer um estofamento. esquerda quase o demitiu. E se eu salvá-lo, podemos ver que agora a imagem e o texto estão no remetente da cama desta seção em particular. E agora vamos passar para a segunda seção que é assim a seção Sobre Mim. E aqui eu vou reduzir ligeiramente o tamanho da imagem. Então, novamente, eu quero selecionar a imagem. E aqui você pode ver então esse caminho, eu vou copiá-lo. Então, aqui mesmo, vamos colar separados. Então aqui eu vou reduzir a altura para quase 400 pixels. E eu também quero trazer um pouco essa imagem específica para a direita, porque há muito espaço livre aqui. Então, vou providenciar um estofamento deixado de lado amanhã. Sim. Agora, se a imagem está perfeitamente bem e o texto já está olhando bem, ela é legível e também está na posição apropriada. E terminamos com a seção de abortar, aspirina. Então pessoal, agora vamos passar para a minha seção de habilidades bem aqui. Na seção de mortes de ratos, você pode ver que estamos tendo três cartas em uma única linha, então os guardas não estão tendo quantidade suficiente de espaço. Então, agora vamos tentar fazer duas cartas em uma única linha. Então, primeiro de tudo, eu quero dizer como o endocárdio aqui. E aqui, você pode ver que nós fornecemos uma grade e WAS especificado três elementos em uma única linha. E vamos tentar usar isso também e ver. E como você pode ver agora está parecendo muito bem. São duas cartas em uma única linha. E observe aplicar isso. Então vamos copiar o código daqui, esse é o caminho. Vamos colá-lo aqui. Novamente. Vou copiar as colunas do modelo de grade também, e o espaço para salvá-lo. Sim. Agora a seção de habilidades está olhando uma multa chave. E agora vamos passar para a seção do projeto. Para esta seção também está olhando tanto igualmente bem. Agora, se você for para a seção do blog novamente, veja que nós basicamente tínhamos três cartas, mas agora apenas duas cartas que são visíveis. Mais uma vez, vou selecionar esta área de guardas a partir daqui. E eu vou especificar as colunas do modelo de grade como uma. Porque não temos três cartas. E se eu especificar um será ter um só Deus em uma fileira. Isso é novamente, veja, é assim que está parecendo agora. Então, na verdade, precisamos fazer algumas pequenas modificações nesta área em particular, minha seção de blog. Então, primeiro de tudo, eu vou chamar P o caminho daqui. Vamos colá-lo aqui. E isso também é cópia. A coluna do modelo é copiada e colada. E também vamos fornecer uma lacuna de grade de quase quatro rem. Vamos salvá-lo. E como ele tem os dados, a imagem não está realmente esticando todo o caminho até o final do pH. Então precisamos fazer alguma pequena modificação em nosso CSS para conseguir isso. Então pessoal, agora vamos para o nosso arquivo CSS e deixe-me rolar todo o caminho até o topo da folha encontrar minha seção de blog. Então é aqui que a seção MyBlock começa. E se verificarmos nosso índice enquanto você pode ver que a imagem está localizada dentro do invólucro do carro. Então deixe-me copiá-lo. E aqui eu quero basicamente selecionar meu bloco, o invólucro de cartão, o cartão e a imagem dentro dele. E eu vou fornecer uma largura de 100 por cento e um máximo de 100 por cento. E se eu salvá-lo aqui você pode ver que agora o problema está corrigido. Temos a imagem estendendo-se todo o caminho até o final deste cartão particular. Então, isso faz com que a seção MyBlock também perfeitamente bem. Agora temos a seção de contato comigo, que também é perfeita. E os resultados padrão estão perfeitamente bem. Então, agora nós completamos o design responsivo da nossa viewport iPad, que está tendo um pouco de quase 768 e uma altura de 12 a 24. Está parecendo perfeitamente bem. O menu de navegação funciona perfeitamente bem. E, no geral, o site está olhando realmente bom nesta relação de aspecto particular. E agora vamos continuar a tornar as nossas proporções discretas responsivas. Então pessoal, agora vamos ao design responsivo do nosso dispositivo móvel. Aqui, vou escolher o iPhone 6, 7 e 8. E aqui você pode ver que nosso site é novamente, um mito completo. As coisas estão por todo o lado. Lado de guarda, deslocado. Metade dos mais duros, basicamente nem visíveis. E agora vamos basicamente estilizar esta porta de visualização móvel particular do nosso site. Então, agora vamos para o nosso style.css. E bem no final de nossa primeira consulta de mídia. E criaremos nossa segunda consulta de mídia, que terá uma largura máxima de quase 576 pixels. E vamos abrir a consulta de mídia. Então, sempre que nossa porta de visão atinge um burrito menor que 576, esse acorde em particular é acionado, então vamos salvá-lo. E se verificarmos nosso site, você pode ver que a imagem do herói e o texto estão em uma única linha. E se eu selecionar a imagem aqui, você pode ver que a divisão de heróis está tendo uma propriedade flex aplicada. Então, se pudéssemos mudar a direção flexível para coluna, podemos trazer este texto específico na parte inferior da imagem. Então o que eu vou fazer é que eu vou selecionar toda a seção de heróis. E eu vou fornecer uma direção flexível da coluna. Agora, se eu salvá-lo, agora, o texto está na parte inferior da imagem. E aqui você pode ver que na parte do cão estamos tendo muito espaço livre. Vamos trazer ligeiramente esta imagem um pouco para o lado superior. Então eu vou selecionar a imagem. Então aqui você vê que a imagem está localizada na divisão esquerda. Então a nossa cópia, este código em particular daqui, esta base fez. E eu quero dar uma margem superior de quase cinco rem menos. E se eu salvá-lo aqui você pode ver que a imagem tem um pouco ser conhecido para o lado superior. E agora vamos basicamente estilizar este texto em particular. Então, primeiro de tudo, eu vou selecionar o texto. Então aqui você pode ver que o texto está basicamente localizado na divisão certa. Então eu vou copiar o código daqui, e vamos colá-lo. Então a primeira coisa que quero fazer é começar. Você vai ver que o texto está muito próximo da imagem. Quero dar um pouco de estofamento. Então eu vou dar um darpa acolchoado acima de tudo, den drum. Agora o texto está tendo algum espaço entre a imagem. E eu vou alinhar o texto no remetente para que ele fique muito melhor. Nesse caso, você pode ver que o texto é suicídio e o fundo precisa para o outro lado. Então, se eu fornecer centro de alinhamento de texto, ele deve realmente olhar bem. Sim. Agora para o texto e o botão é tudo delineado em um minuto remetente com querer nem total de DC e dire divisão joelhos em direção à direita da tela. E vamos realmente fornecer um pouco de preenchimento direito, para torná-lo no centro desta seção. Portanto, não é fornecido adicionando o padrão certo mais para executar. E se eu salvá-lo, você verá que nulo se o texto estiver no centro da seção. E também foi aplicá-lo a uma incorporação à imagem também. Então eu vou fornecer uma luz guia até quase a RAM. Certo, agora a imagem e o texto estão no centro. Agora aqui você pode ver que este caminho de clipe particular, precisamos reduzir ligeiramente o valor. Então, se eu selecionar esta seção específica, e se eu selecionar o cabeçalho aqui você pode ver que este é o pote de clipe. Então vamos basicamente tentar seus valores diferentes. Então eu vou aumentar esse valor em particular. Então o que você vai ver que 95 basicamente fornece uma boa curvatura. Então, vamos selecionar o cabeçalho e eu vou copiar este valor particular. Então, aqui vamos selecionar o cabeçalho e vamos fornecer o caminho do clipe. Se eu salvá-lo. Agora temos a curvatura perfeita. Então agora vamos para a seção do aeroporto. Então aqui você pode ver que novamente, nós estamos tendo uma flexão e que a direção flex não é crescer em são os genes que uma coluna. Então, novamente, vou selecionar esta seção em particular. E aqui você pode ver que temos um flex aplicado. Então, quando eu selecionar o recipiente a partir daqui, vamos voltar para o nosso style.css. E nós vamos selecionar o recipiente e vamos mudar a direção flexível para coluna. Salve isso. Você pode ver que temos a imagem no topo e o aeroporto pode texto e a parte inferior. Mas agora devemos alinhar esses textos no centro. Então vamos selecioná-lo a partir daqui. Assim, o texto está localizado na divisão direita do acima. Então eu vou copiar este código em particular daqui. E vamos colá-lo aqui. E eu quero o nosso centro de alinhamento de texto. Agora, se as mensagens devem estar no centro, sim. Agora temos o texto no centro. E outra coisa a notar é que temos esses ícones sociais para a esquerda. Também devemos fazer isso no centro. Agora vamos selecionar isso. E você vai ver que estamos tendo uma classe de sociais. Então, novamente, os ícones terríveis estão localizados na divisão certa. Então vamos simplesmente copiar este código em particular daqui, colá-lo, e também vamos eleger a aspirina da divisão social. E vamos fornecer este conteúdo definido centrado. Agora, eles estão centrados. Tudo bem, agora se a seção Me do quadro está olhando cabo VM predefinido, a imagem, o texto z está em direção ao centro. Os ícones também estão parecendo bem. Agora vamos para a seção de habilidades bem aqui. E a primeira coisa que vou fazer é, sem dúvida, corrigir esta curvatura em particular. Então, novamente, eu quero selecionar as habilidades mais, e aqui novamente para ver o caminho de clipe NDI. E primeiro de tudo, vamos copiar este código em particular daqui. E vamos selecionar as habilidades. Então, aqui, vamos selecionar as habilidades e com base em, e agora vamos experimentar alguns valores aqui e ver como podemos basicamente alinhar a curvatura. Então fascículo, eu quero selecionar o primeiro valor aqui. Isso basicamente diminuiu para 70. E vamos também mudar o segundo valor para quase dois. Certo, não, isso não está funcionando perfeitamente. Então isso é 70 N2 para os dois primeiros valores, 70. E para salvá-lo, e a curvatura está perfeitamente bem. Agora, na seção de habilidades, você pode ver que temos que fazer cores diferentes em uma única linha. Bartleby não consegue ver o segundo Deus. Então o que podemos fazer é que podemos selecionar um cartão e se pudéssemos mudar o modelo de grade para um, ele deve realmente ficar bem. Vamos tentar um. Sim, Não está olhando perfeitamente bem. Então, novamente, vamos selecionar esta parte em particular. E aqui que o escopo sejam as colunas do modelo de grade. E a repetição por apenas um centavo. Então, para salvá-lo. E isso também parece perfeitamente bem. Então a seção de habilidades está pronta. Agora, se você for para o bloco, desculpe, a seção do projeto, precisamos basicamente redimensionar a imagem. Então, novamente, vou selecionar a imagem. Assim, a imagem está localizada dentro de sliders luz E eu. Então vamos copiar isso e colá-lo bem aqui. Então eu vou mudar a altura para 200 pixels. E vamos mudar isso para 300 pixels. Salve-o, e isso está muito bem. Então, a seção de produtos também é basicamente feito. Agora vamos para a seção do meu blog. Que minha seção de blog também está predefinida agora. E que a moeda volta no meio da seção. Então é aqui que precisamos fazer algumas pequenas modificações. Você pode ver que o e-mail é nem completamente visível. Então nós basicamente fornecemos uma ótima fórmula. Estes dois soldados foram todos multados. Então deixe-me selecioná-lo. E aqui você vai ver que nós fornecemos para FOR, isto é, isso vai se repetir por duas vezes. E se eu remover, e, portanto, agora podemos ver que dados URI Milhouse foi para a segunda linha e vamos fazer alguma pequena modificação para corrigir esta lacuna particular aqui. Então deixe-me copiar isso, colá-lo aqui. E eu vou copiar este código daqui, bem como colado. E também reduzir menos a lacuna do traço do grupo para 0. Salve isso. E se eu selecionar o segundo elemento aqui, você pode ver que estamos tendo uma margem superior de quase três vezes. Então basta copiar este pote em particular colado. E vamos reduzir a margem superior para um rem. E se eu salvá-lo, agora temos acord quantidade suficiente de espaço em nossos caras sabem que estamos basicamente feito com a compilação responsiva completa fora da nossa versão móvel. E isso está realmente muito bem na minha opinião. Então vocês também podem fazer alguns pequenos ajustes para torná-lo do jeito que quiserem. Assim, você também pode reduzir o tamanho dessas imagens que você pode fornecer lances. Podemos fazer muitas outras coisas para torná-lo ainda melhor. Então, cabe a você. E isso é novamente, veja o lado bom está parecendo muito bem. As coisas estão no lugar. Temos o pior número médio de espaçamento. Todo o texto pode ser facilmente visível, n que pode ser facilmente lido. E os olhos parecem muito bem. Então, se eu clicar no hambúrguer aqui, você pode ver que este ícone em particular é muito para o lado esquerdo. Então, vamos também ajustar ligeiramente sua posição. Então, no nosso selecionado. Então eu vou selecionar as vezes apenas um centavo armazenar a imagem. Então eu vou movê-lo para a direita para quase 30 pixels. Eu guardo isso. Sim, agora está na posição perfeita, embora rapazes, na verdade parece perfeitamente bem. Agora vamos para o próximo estágio. Então, pessoal, neste momento, eu estou na área de trabalho do nosso site e vocês podem ver que temos o botão de hambúrguer visível, mas não deveria estar aqui. Eu sei que o botão hambúrguer deve ser desativado ou deve ser escondido por padrão, isso deve ser visível ou lib e a largura da kurtose viewport 1024 pixel. Então, para reparar esse bug, vamos para style.css. E bem dentro do nosso site traço, hambúrguer Dash Rapper Dot, eu vou fornecer nenhuma exibição. Agora, se eu guardá-lo, você vai ver que todos os hambúrgueres não são mais visíveis. E eu vou copiar este pote em particular. Vamos para a nossa consulta de mídia onde o máximo é 1024. E aqui, vamos colar separados. E isso muda a exibição para bloquear. Agora, se eu salvá-lo e eu, se eu abrir a ferramenta de desenvolvedor aqui, você pode ver que o orçamento atual é 12 57 eo momento em que o mais próximo 1024. E novamente ver que o hambúrguer , mas, em seguida, é específico apenas assim e não será visível. Linda inibir os dados, em seguida, quando 0 a quatro pixels. Portanto, note que o bug também é corrigido e tudo está funcionando perfeitamente bem. E a próxima coisa que precisamos consertar, é amarrada. Quando abrimos o menu Navegação , clicamos em qualquer um desses links. Basicamente, nada está acontecendo. Agora coloque o velo, esta questão em particular também. Então, certo, Não, Vamos para index.html. E aqui você pode ver que este é o menu de navegação, links. E você não tem nenhuma localização no nosso HF. E se você rolar para baixo aqui, você pode ver que este é o link das barras de navegação. E se você se lembrar, nós fornecemos ID através dessas seções diferentes. E vamos simplesmente copiar esses IDs para este link específico na aspirina do menu de navegação. Então deixe-me copiá-lo. Vamos salvá-lo. E agora se formos ao nosso site e se eu abrir o menu de navegação e se eu clicar em habilidades, basicamente nada aconteceu. Mas se eu fechar esta janela de navegação em particular, você pode ver que estamos na seção de habilidades. E este é, na verdade, um pequeno problema. Ou seja, quando eu clicar em qualquer um desses links que prefeitos de navegação nem fechando por conta própria, mas essa vantagem realmente nos leva para o local desejado. Agora vamos corrigir esse problema em particular também. Então, para corrigir este shoeing regular, faça uso de JavaScript executado novamente. Então, antes disso, vamos dar uma classe a todos esses links diferentes para que possamos selecionar esses links diferentes, ângulos Euler, tags, maneira I JavaScript. Então aqui eu vou dar um copo de clique. E agora, em segundo lugar, neste particular e obter dados, eu vou dar um copo de Glick Dash um. Deixe-me copiá-lo. Vamos fazer o mesmo para o terceiro nome da classe DAG fome de clique traço T2 para tag emaranhado com a classe de Glick traço três, e a última tag âncora com a classe de clique painel. Agora vamos salvá-lo, e agora vamos para o nosso JavaScript e selecionar cada tag âncora. Então vamos para app.js. E aqui mesmo, vou criar uma barriga abaixo de quatro cliques. E vamos documentar e QuerySelector. Vamos selecionar que nossa turma estava para cair. E em segundo lugar, vou criar outra variável para a nossa segunda etiqueta âncora para sempre. Então vamos colocá-lo para baixo, ele, renomeá-lo para baixo. Então eu vou clicar traço T2 para talvez clique traço um. E eles querem substituir o vidro aqui mesmo. E eu vou fazer exatamente o mesmo para todos esses links diferentes. Então fizemos um pequeno erro de digitação aqui. Eu vou renomear esta classe tem clique painel. E agora vamos salvá-lo. Salve o JavaScript como sabemos, deixe-me trazer isso para esta área em particular. E aqui o que queremos fazer é que quando clicamos neste link em particular, queremos que este menu de navegação em particular brilhe. E nós temos um peso azul, exatamente o mesmo papel alumínio, Alberta bruto por década também. Isso é quando clicamos sobre o botão de cruz, estamos basicamente removendo o vidro aberto da lista de classe móvel agora escuro. Então há equilíbrio, o mesmo conceito para todos esses cliques diferentes. Então eu vou copiar este código em particular daqui. Vamos colá-lo. E eu vou selecionar o primeiro elemento. Vamos colá-lo lá, obtendo uma cópia do código. Então amor venial 1234 mais Bom. Então eles são selecionados e enquanto pressionando e segurando e todos os turno de tempo demo, Placido não pagar mais quatro vezes. E agora vamos simplesmente mudar. O nome da variável. É clicado traço um. Agora temos que clicar para escolher três e quatro semanas. Agora, se eu salvá-lo, vamos voltar ao nosso site e depois abrir o menu Navegação. E se eu vou clicar em projetos, você pode ver que a janela de navegação fecha automaticamente e estamos na seção do projeto. Vamos fazer isso para nossa seção de blog. E está funcionando perfeitamente bem. Então é isso, pessoal. Finalmente completamos nosso site. É completamente responsivo para qualquer tipo de tamanhos de tela, e eles podem basicamente adicionar mais media query e personalizar este site também. Eu namorei a fórmula basicamente duas condições diferentes. Agora, a altura da porta ADB é menor que 1024 pixels e menor que ISMB, seis pixels. Então, se você tem algumas botas específicas, elas podem basicamente implementar o mesmo conceito. E você pode personalizar sua vantagem e em última análise, tornar seu site responsivo para qualquer tipo de proporção de tela. Eu basicamente dei a vocês uma idéia básica de como você pode fazer seus aplicativos responsivos ou uma determinada largura viewport. Então é isso, pessoal. Obrigado por assistirem e vejo vocês no próximo vídeo. 15. Como fazer o download do botão de CV: Oi pessoal, bem-vindos ao vídeo. Neste vídeo, vamos fazer nosso botão Download funcionar. Então, como você pode ver isso agora, se clicarmos no botão Download, basicamente nada acontece. Mas neste vídeo em particular, vamos adicionar funcionalidade ao nosso botão para baixo para que um número de débito, clicemos nele, eu retomarei, ele seja baixado automaticamente. É basicamente um símbolo pulsos. Então, a primeira coisa que vou fazer é que basicamente vou adicionar meu currículo à frequência do meu projeto que esse é basicamente meu projeto. Chamamos o arquivo de índice, imagens de arquivos CSS, JavaScript e tudo isso. O que vou fazer é que eu quero simplesmente arrastar e soltar minha retomada. É basicamente um arquivo PDF no meu projeto. Agora tenho meu currículo ou meu projeto, e posso redefini-lo aqui. Temos meu decímetro PDF aqui. Agora estamos em nosso arquivo de índice. Agora, se você der uma olhada, estamos agora em nossa seção de heróis e o fiscal para baixo. Dentro da nossa divisão direita, temos nosso botão CPE de download. Vamos fazer nosso processo de download acontecer com a ajuda da tag de âncora. Então, o que vou fazer é começar dentro da divisão, quero criar uma etiqueta âncora. Então, vou inserir um e pressionar tab dentro do extra, vou fornecer o nome do meu arquivo PDF porque ele está no mesmo diretório. Então, eu só preciso especificar o nome do arquivo. Então, o nome do meu PDF é meu endereço. Você pode PDF. Então eu já recebi sedição, então 100% do meu corpo do meu arquivo foi selecionado. Então, a próxima coisa que vou fazer é que eu quero usar uma tag de download de diagnóstico, desculpe, download tag. Portanto, a tag de download é basicamente uma tag HTML5. O que quer que eu especifique dentro da matriz do dólar será o nome exibido para o download do arquivo, por exemplo, e renderizar supondo que sempre que eu clico no botão dólar, o nome do arquivo que este WOW, estamos supondo que esta semana se torne mais claro quando você vê a implementação prática dela. Agora, dentro da nossa etiqueta âncora e vou colar nosso botão w dot cv. Vamos remover o espaço em branco e salvá-lo. Então, agora, se eu voltar ao site e clicar duas vezes em um botão de pedido, você pode ver que nosso arquivo foi sobrecarregado. E como eu já disse, demos o nome do download como retomada. Portanto, o nome do arquivo que pode ser baixado será reenviado ou PDF. É tão simples quanto esta função do botão Download do domínio. Então esses são os caras, obrigado por assistir e vejo vocês no próximo vídeo. 16. CONCLUSÃO: Oi caras. Muito obrigado por sintonizar em ordem até o fim. Se você não encontrou todos esses vídeos para este vídeo final em particular, ele mostra sua dedicação e sua paixão pela tecnologia é louvável. E em primeiro lugar, espero que tenham gostado deste curso em particular. E mais do que isso, pensei que era capaz de entregar o valor desejado. Então, mais uma vez, muito obrigado por assistir, e eu realmente espero ver vocês em outro vídeo sob a velocidade Onsen desligando.