Crie sites de portfólio responsivos e modernos com React e TailwindCSS

1. Projetos da SkillshareREACTTAILDINDintro: O curso é para todos que desejam aprender sobre criação de sites com reação e vento favorável Bem-vindo. Deixe-me explicar o que você aprenderá e o que obterá neste pacote de sites criados com react e Tailwind Este curso é totalmente baseado em projetos, então você aprenderá todos esses exemplos reais de projetos que você pode manter ou personalizar, salvar em seu portfólio ou simplesmente usar posteriormente em seu primeiro projeto de cliente. Você receberá horas de conteúdo para aprender e praticar o Tailwind CSS Os projetos que criaremos são sites de portfólio. Estaremos criando formulários de contato funcionais os usuários possam enviar mensagens para nós, várias barras de navegação responsivas que você pode usar facilmente, assim como todos os outros componentes, sobre seções, seções de portfólio, seções heróis com layouts diferentes, e você praticará como criar suas próprias interfaces de usuário interessantes Esses projetos foram meu caminho para entender onde eu deveria mudar ou participar de uma aula favorável para fazer o site funcionar como deveria, como corrigir bugs e assim por diante Agora, todas essas soluções passo a passo estão aqui para ajudá-lo a entender como você pode criar sites por conta própria. Corrija a caixa em sites concluídos e, em geral, aprenda o conhecimento, pratique ou simplesmente ganhe mais experiência para iniciar sua carreira de desenvolvedor de front-end. Usaremos o Tailwind CSS, e o Tailwind CSS é como uma grande biblioteca de classes CSS predefinidas que você pode usar diretamente em seu HDML para estilizar elementos sem precisar escrever CSS personalizado Ao contrário do CSS tradicional, em que você pode escrever estilos em um arquivo separado, tailwind permite aplicar estilos diretamente aos elementos HDM com pequenas classes de propósito único Junto com o tailwind, usaremos para criar componentes reutilizáveis que você pode integrar perfeitamente em qualquer 2. Projeto 1: introdução: Começaremos criando uma barra de navegação que na tela do celular se transformará em um ícone de menu que exibirá os itens de navegação sempre que for clicado e expandido Na seção de heróis, que é a primeira seção visível depois que o usuário acessa o site, usaremos uma foto de perfil com um pequeno efeito t atrás dela e, no lado esquerdo, uma descrição rápida com um botão de currículo para baixar e, no lado direito, os ícones sociais. Na seção Sobre, criaremos essas colunas para nossas fotos para criar um elemento de design interessante que podemos colocar ao lado do nosso texto. E abaixo, algumas métricas nas quais podemos destacar nossas conquistas. Abaixo, criaremos uma seção com nossos projetos selecionados que queremos destacar. Em seguida, criaremos uma seção de experiência na qual criaremos esta carta de nossa experiência profissional ou, talvez, se você ainda não tiver nenhuma, poderemos preparar algumas conquistas da escola e, na parte inferior, haverá uma seção de contato com formulário de contato funcional que realmente enviará mensagens para nossa caixa de correio 3. Configuração: Começaremos acessando a página final e, nos guias de estrutura, entraremos no WD e começaremos a usar os comandos. Abriremos o terminal lá. Agora vamos colá-lo e já estamos em nossa pasta, ou pelo menos no site do portfólio. Então, deletaremos o Meu projeto, faremos lá apenas um ponto, pressionaremos Enter e ele inicializará o projeto lá Agora, como já estamos na pasta, não precisamos vê-la. Lá vamos usar este , instalar o Autoprefixor. Agora, o próximo para inicializar o vento de cauda. Agora vamos copiar isso e colocá-lo no arquivo de configuração do tailwind Agora, a diretiva tailwind no índice CSS. Lá, podemos excluir o Epidt CSS e, para testar nosso aplicativo, também podemos pegar isso, colocá-lo no Epidgssix Podemos limpar o terminal e fazer a profundidade de execução do NPM. Agora, isso iniciará nossa página. Primeiro, carregarei as imagens no ativo que você pode encontrar no Git e, em seguida, continuarei criando uma nova pasta chamada de páginas, e aí posso começar Primeiro, vou criar uma barra suficiente. E podemos criar uma exportação lá e colocá-la em nosso Epidot J six. Então , aí podemos começar. Primeiro importaremos a barra de navegação. E lá retornaremos todos os componentes. Então, faremos fragmentos vazios que conterão a barra de navegação E na parte inferior, faremos Exportar aplicativo padrão. 4. Navbar: Primeiro, na barra de navegação, precisamos importar o estado de uso porque usaremos uma variável de estado para a barra de navegação, pois mudaremos da navegação móvel para a navegação no desktop. Além disso, importaremos alguns ícones. Então, vou usar roupas de contorno e menu de contorno do react icons AI Primeiro, deixe-me importar ou instalar a biblioteca, para que N PMI reaja aos ícones Agora podemos fazer o menu de roupas e contorno do AI Outline Além disso, importaremos a assinatura e o que é. Basicamente, criei uma assinatura lá, assinatura transparente, e vou usá-la como meu logotipo. Então, assinatura de Como tal, SinagrePNG Na primeira, vou começar com a variável de estado, então farei o NaF e definirei o estado de uso de navegação como falso Em seguida, criarei uma função para lidar com essa navegação. Então defina NA e altere o valor. E usaremos essa função de clique em nossa navegação. Deveria ser isso. Lá, na Div principal que abriremos , primeiro definiremos o nome de uma classe lá Podemos usar texto em preto. Em seguida, justifique o layout do flexbox, para que haja um espaço uniformemente distribuído entre nossos elementos Em seguida, centralize-o verticalmente, largura máxima de 1.300 pixels Centralizaremos isso à medida que estivermos usando a largura máxima e definiremos uma altura inicial. Também podemos definir o fundo verde para 700 agora para ver apenas a navegação em nossa página. Agora ele deve estar sendo atualizado. Então, vamos mudar para uma cor clara e isso para que funcione. Então, podemos ver que o temos lá. Então, primeiro neste manual div haverá um logotipo, e esse logotipo será encapsulado no texto âncora porque queremos que ele nos leve à página inicial quando for clicado Então, vamos adicionar a fonte e eu adicionarei a assinatura. Eu o importo. Agora você pode ver que há o logotipo ou a assinatura. Portanto, precisamos adicionar também um nome de classe a essa tag âncora. Primeiro, começaremos com alguma margem para a esquerda e, é claro, precisamos definir o peso máximo. Para algo como 100 pixels. Agora vou aumentar a página para que você possa vê-la melhor. OK. Agora podemos continuar com a lista não ordenada que conterá os itens da lista Para essa lista não ordenada, ela ficará oculta na tela do celular pois haverá a navegação móvel e, em uma tela média ou superior, ela será exibida de forma flexível, e usaremos o telefone semi boat para todos os itens da lista Nossas seções serão sobre trabalho, experiência e contato. Assim, podemos começar mais ou menos com o trabalho, depois com a experiência e depois com o contato. Em seguida, podemos adicionar nome de todas as classes com algumas roupas de cama. Vamos dormir com cinco. E agora precisamos agrupar isso em uma tag de link. Mas primeiro, precisamos abrir um terminal e levá-lo até lá. NPM, eu reajo, pergaminho. Agora, isso será instalado e faremos o link. Pressione Enter. Dessa forma, ele é importado para lá. Podemos verificar isso novamente. Agora temos o link, então podemos colocar dentro da tag do link o about. Nesse link, precisamos colocar dois, então dois e mais ou menos. O mesmo se aplicará à experiência profissional e ao contato. E acho que não precisará desses cortes. Vamos testá-lo mais tarde. Agora, também precisaremos adicionar mais alguns modos de teste que serão suaves para dois, depois compensados para 50 e também a duração para E isso indicará como a rolagem suave deve funcionar. Agora podemos pegar isso e competir pelos outros itens. Agora, para o ícone na tela do celular, iniciaremos sua div Dentro desta div, faremos um operador de giro de navegação Portanto, com base nesse valor, que é falso padrão, mostraremos o ícone fechado ou o ícone do menu. Então, vamos começar com o esboço fechado. No caso de um valor verdadeiro e no caso de um valor falso, vamos usar o menu de contorno Também podemos colocar seu tamanho 20 e também podemos colocar lá algum nome de classe ou precisar. Então, na tela do celular, ele será exibido. Mas em tela média, isso deve ficar oculto porque temos lá a navegação na área de trabalho. Agora você pode ver lá, temos uma nova navegação e também a navegação na área de trabalho. Mas se agora eu vou salvar lá esses valores , eles ficam ocultos porque serão mostrados somente no celular. É claro que, até hoje, precisamos adicionar a função onclick Então, clique e ele chamará o identificador de navegação, que está lá. E agora podemos preparar a navegação para o celular. Portanto, sempre que esse ícone do menu for clicado, ele abrirá o div com a lista não ordenada Então, vamos abrir o div primeiro. Lá, precisamos fazer a classe para essa dif, que ela também use novamente o operador Turner com base no valor da variável Np E aí ele dirá, novamente, posição verdadeira e falsa sobre a verdadeira , apenas mostrará esse menu móvel. Então, com algum índice, texto em cinza, isso será corrigido. Ele terá altura total. Ele será fixado à esquerda e superior a zero. A largura será de 60%, podemos adicionar alguma borda à direita. E eu acho que é isso. E para a quarta posição, ela será fixada apenas à esquerda menos -100 Então, em algum lugar ali, estará fora da tela. Nós podemos testá-lo. Agora você pode ver como a borda apareceu, mas precisamos adicionar a lista nord para ver todos os itens Então, vamos continuar. Primeiro, mostrará que podemos basicamente pegar as coisas que temos lá, copiar lá e atualizar o estilo Então, este, vamos ver como vai ficar. O que podemos fazer é adicionar seu plano de fundo. Então, vamos começar com o gradiente de fundo dois, certo? Do cinza 500 ao cinza 702 cinza 900 Além disso, adicionaremos a entrada leste e a duração 500. Agora isso está um pouco melhor. Mas vamos torná-lo um pouco mais escuro. Então, vamos passar de 700, 800, para algo assim. Além disso, a próxima coisa que devemos fazer. Vamos cortar essa largura máxima para a imagem e colocá-la lá. Então, vamos fazer a largura até 120, talvez. Na verdade, vamos fazer isso também lá. Então, vamos adicionar a largura a 100 e cortá-la a partir daí. Agora, parece assim. E se aumentarmos na versão para desktop, ainda ficará bom. Portanto, agora precisaremos adicionar algumas margens e aumentar o tamanho do texto Primeiro, eu ia lá, escrevia texto para o Excel, depois talvez fizesse a margem da esquerda para, sei lá, 12. Isso também é um pouco melhor. E então adicionaremos as apostas. E adicionaremos o nome da nossa classe, margem esquerda para 12, e tudo bem. Então, agora é assim que parece a navegação móvel. O que também devemos fazer é adicionar alguma margem ao ícone. Então aí você marcará a direita para seis, e deve ser isso. E podemos passar para a seção de heróis. 5. Herói: O que precisamos fazer é abrir o explorer em páginas, criar um novo arquivo, hero JA six. Precisamos dessa exportação lá no Abdo JSix. Vamos apenas escrever um herói, clique em Enter. Agora é importado, nós o temos lá. Usaremos uma animação do tipo react, abriremos um terminal e faremos a animação do tipo npmIRact Agora vou fechar isso. Pegue a página, coloque-a em algum lugar lá, e podemos começar. Primeiro, vou importar lá a foto do perfil. Portanto, ele partirá da foto do perfil do ativo. E deixe-me verificar o nome, na verdade. Sim. É esse? Agora nós o temos lá. Vamos importar alguns ícones, então eu vou importar AI fill Linkedin, AI fall Git up e também AI fall Instagram Em seguida, importarei a animação de tipos da biblioteca que acabamos de instalar juntos. Agora eu posso ir diretamente para a Div principal e começar Então, vamos adicionar uma margem vertical lá. Em tela média, vamos configurá-lo. Portanto, será principalmente para os dispositivos móveis que tenham algum espaçamento adicional Em seguida, definiremos um peso máximo 1.300 pixels para a barra de navegação Em seguida, na tela média, definiremos também a altura da janela de visualização Então, teremos mais espaço para nossa seção de heróis. Vou usar 70 de altura da janela de visualização. Em seguida, centralizaremos isso conforme temos a largura máxima. Podemos usar essa soma. E eu vou fazer isso no início com um fundo verde 300 para que possamos ver onde estamos. Vou descentralizá-lo para você agora, para que você possa ver que vou colocá-lo de volta Em seguida, usaremos um layout de grade porque teremos nesta seção, basicamente, digamos três colunas, mas usarei a para tela média, as colunas de grade quatro porque quero que minha foto tire duas dessas colunas. Então, na primeira coluna à esquerda , estará o nome. No meio de duas colunas, estará a imagem e na coluna da direita, na última , estarão os ícones. Agora também vou usar itens de localização. Centro. Primeiro, o que faremos nesta div é o nome com o tipo de animação e com o botão do CV Então eu vou fazer outra div. E nesta div, farei uma técnica de parágrafos. E neste parágrafo técnico, eu vou fazer um M. Agora vamos fazer uma nova linha. Tecnologia gasta. Não está na vitória. E depois disso, usaremos o tipo de animação. Para esse tipo de animação, há alguma sequência. Onde colocaremos as coisas que queremos escrever em nosso site. Então, primeiro, faremos o desenvolvedor. sequência será 1.000, depois faremos o web designer. Novamente, a sequência será de 1.000 e um consultor. A sequência será novamente 1.000. Então, podemos definir alguma velocidade, então vou definir uma velocidade de 50 e algumas repetições. E, claro, a repetição será no infinito, então esse é um loop infinito Agora podemos ver que nossa página está totalmente branca, então provavelmente falhou. Podemos ver o problema acessando a página e inspecionando-a. E aí, no console, podemos ver que o infinito não está definido E simplesmente não gostou da pequena escada. Então, agora em nossa página, podemos ver que está funcionando. Vamos adicionar o estilo. Então, para a tag de parágrafo, adicionarei na tela média e acima do texto cinco Excel. Em arquivos menores, podemos fazer a árvore de texto Excel e no celular, podemos fazer o Excel de texto. Em seguida, usaremos o rastreamento rígido, então diminuímos um pouco o espaçamento entre letras , como você pode ver lá Além disso, adicionaremos alguns estilos diferentes da tecnologia Spen, então adicionarei uma fonte extra em parafuso Então, talvez um parafuso seja suficiente. E depois da tag span, eu também preciso adicionar tecnologia de interrupção adicional, então temos essa outra linha. Agora podemos voltar para nossa divisão. Para nossa div, definiremos um peso máximo de 400 pixels Em seguida, usaremos um layout flexbox e por que o usaremos Porque nesta div, ao lado dessa tag de parágrafo também estará o botão com o CV E na versão para desktop, isso estará abaixo um do outro. Portanto, a direção da flexão será a coluna. Mas na versão móvel, eles estarão próximos um do outro. Assim será com a linha de direção flexível. Agora, vamos adicionar o estilo do botão. Primeiro, aonde esse botão deve nos levar. Vou deixar isso para você. Isso deve nos levar a algum lugar onde nosso currículo seja armazenado. Em seguida, podemos definir o título desse botão. Então baixe o CV. E adicionaremos uma classe. Portanto, para as aulas, podemos adicionar alguma margem ao topo. Também podemos adicionar um pouco de preenchimento, então vamos usar. Vamos fazer o preenchimento de dois lá e podemos adicionar outra cor de gradiente. Então, gradiente de fundo para a direita. E será de uma cor para a segunda cor , agora deixe-me pegar os casacos das cores que eu quero que estejam lá Então, vamos passar dessa cor laranja para essa cor roxa. É uma cor bem parecida com a que estou usando na minha foto de perfil. E, na verdade, podemos adicionar agora a foto do perfil. Ou talvez primeiro eu faça apenas arredondá-lo. Excel. Deixe-me movê-lo para você e a largura máxima para Vamos tentar 300 pixels, talvez 260. 80? OK. Vamos manter isso assim. Agora vamos descobrir onde essa div está terminando Isso está aí. Então, agora vamos adicionar a imagem. Essa será a segunda div e, por dentro, faremos a imagem com a fonte da foto do perfil Nós temos lá. Também podemos adicionar uma foto de perfil antiga. Lá, adicionaremos também o nome da classe. Então, vamos definir a largura em 300 pixels para o celular e, em telas médias e superiores, definiremos esse peso em 500 pixels. Então espere primeiro, vamos fazer isso. Vá para o automático e também podemos usar a centralização do DIF acima Definiremos a partir da tela média e superior para usar o espaço da coluna dois. E com isso, conseguiremos que isso ocupe duas das quatro colunas que definimos lá. Então, temos quatro colunas, e com isso, estamos dizendo que isso deve ter duas delas. Nem precisamos especificá-lo nas outras diferenças porque isso será suficiente E agora você pode ver como nossa imagem aumentou. Então isso será para a foto. O que também faremos é que, em tela média e superior, adicionaremos alguma margem à esquerda 28 Não tenhamos medo do valor. E agora vamos adicionar os ícones, então vamos adicionar um mergulho Dentro da morte, você adicionará o texto âncora, e dentro do texto âncora , adicionaremos a Levante-se. Deixe-me copiar isso mais duas vezes. A IA cai no LinkedIn e a IA falha no Instagram. Agora vamos fazer o estilo. Portanto, o estilo será o texto cinco do Excel, para que possamos ver bem esses ícones Em seguida, o layout do flexbox. Portanto, no design do telefone celular, usaremos uma linha flexível para que eles fiquem próximos um do outro neste design de desktop Então, da tela média para cima, usaremos uma coluna de direção flexível para que fique abaixo uma da outra, como você pode ver Vamos também definir uma lacuna. Talvez isso seja demais. 12. Talvez até dez estejam funcionando. Além disso, outra coisa para tela média e superior, vamos definir a largura como total. E também, vamos colocar os itens no final. E isso significa que eles estarão bem alinhados abaixo ou no final de nossa largura máxima de 1.300 Agora vamos pintar a tela de fundo. E isso deveria ser tudo para a página do herói. Não se esqueça de adicionar um pouco de HRP do seu Git up, LinkedIn 6. Sobre: Agora, continuaremos na página Sobre. Então, nas páginas, você arquiva sobre o J six. Vamos levar isso para Abdo J six. Novamente, agora podemos ver isso em nossa página. E vamos até o componente e podemos começar por aí. Primeiro, vou importar a imagem A dos ativos. Então, novamente, deixe-me ver como se chama cerca de quatro JP Save it. Agora eu posso abrir o disco principal. E eu posso começar com o estilo lá. Então, primeiro, vamos definir um peso máximo de 1.300 pixels, como padrão para nossa página Em seguida, adicionaremos um layout flexbox e usaremos itens para centralizar e justificar centralizar para centralizar os itens vertical Em seguida, centralizaremos novamente com o mixoto, você pode usar o plano de fundo para, não sei, o verde 300 para ver onde você adiciona na sua página Atualmente, não há nada. Então, se adicionarmos algo, você o verá lá. Com isso, também podemos adicionar de tela média e superior. Não precisamos de um telefone celular, altura de 70, ou seja, talvez Baheit OK. E podemos até mesmo excluí-lo. E podemos continuar com outra div lá. E, mas estará lá para guardar nossa imagem sobre nós. Então, temos um nome de classe com flex e flex row porque queremos que essas imagens estejam próximas umas das outras Também faremos um show lá. E neste disco, adicionaremos a primeira imagem, adicionaremos os atributos e depois a copiaremos como uma segunda Então, sobre imagem. Isso pode ser com about image, e o nome da classe será capa do objeto. Já o temos em nossa página. Então, vamos fazer isso em Excel arredondado. Vamos também fazer uma largura de 100 pixels. Ah, agora está aí? Vamos fazer com que a altura seja de 300 pixels. Vamos usar um filtro e definir uma escala de cinza porque não quero que minha imagem sobre ela chame muita atenção e também podemos diminuir o brilho para 50. Isso é melhor. Agora, se copiarmos essa imagem e a colocarmos lá, teremos essas duas sobre imagens próximas uma da outra. Mas o que eu queria alcançar lá é baixar a altura do segundo para 200. E agora você pode ver em nossa página que ele criará algo assim. Vamos primeiro adicionar outro conteúdo e, em seguida, descobriremos como fazer com que ele funcione um pouco melhor Mas para isso, primeiro, precisamos também adicionar alguma descrição. Então, nesta outra div, adicionaremos algo sobre nós, algumas frases Então, primeiro vislumbre, adicionarei o parágrafo. Vamos adicionar o estilo. Então, para o parágrafo, adicionaremos o king tight. Então, novamente, diminuiremos um pouco o espaçamento entre letras, lendo soltamente, para aumentar a altura da linha Então veremos o peso máximo. Vamos usar 500 pixels. Agora, nesta div, se mudarmos, podemos adicionar as estatísticas Então, vamos criar um novo prato. E dentro dessa div, criaremos mais discos Isso será manter o H dois com o número estatístico, então 11 e depois Spentek E abaixo, haverá um parágrafo técnico com projetos. Agora vamos adicionar o estilo. Portanto, para essa queda nas estatísticas, usaremos primeiro a principal, layout do flexbox, espaço, margem a partir do topo, largura máxima de 600 pixels e centralização Para os contêineres ou pequenos contêineres com a própria estatística, usamos o nome da classe, gradiente de fundo para a direita, do cinza 800 ao preto com um pouco de rosa e um pouco arredondado Salve agora para o título dois, da tela média e superior, definiremos o texto para quatro Excel. Caso contrário, será texto para Excel, f semibot, e gostaríamos de ter essa cor de gradiente de texto Então, vamos agora em uma aula de CSS. Vamos abrir os arquivos, abrir o CSS do ponto de índice e lá adicionaremos a cor primária do texto de fundo. E por dentro, adicionaremos uma imagem de fundo, gradiente linear para a direita Lá, usaremos as cores que usamos antes. Então, onde está lá, podemos copiá-los. Mas não precisamos disso nem desses colchetes. Então, vamos fazer isso assim apenas com vírgula s. Então, é para escrever dessa cor para aquela cor E então faremos um webkit, clipe de fundo para texto Além disso, faremos um clipe de fundo em texto. Texto do kit web preenchido com cores transparentes e cores transparentes. Com isso, agora iremos para nossa seção A, e aí, qual era a classe, cor primária do texto de fundo, pegue e coloque lá e salve. Teremos nosso texto com essa cor. E vamos usá-lo lá para os projetos, não para os projetos, vamos usar apenas texto branco ou, na verdade, texto cinza, não sei, 500, talvez 400, vamos ver como fica. Isso é melhor. Agora, o que podemos fazer é cozinhar isso. Coloque-o lá mais duas vezes. Lá vou fazer mais de seis anos de experiência e posso fazer mais de 30 nos penhores. Agora, antes de passar para o fundo verde, também precisamos estilizar isso. Então, temos a primeira diferença, há a segunda. Vamos preencher a lacuna 24. Vamos remover esse plano de fundo e ver como fica. O que precisamos fazer é atualizar lá o texto do tamanho. Então, este será o Text Excel, definitivamente, pelo menos. 7. Portfólio: Então, vamos abrir a pasta. As páginas que você arquiva no portfólio têm seis pontos em JS. Agora vamos importá-lo para lá. E podemos começar. Vamos começar importando as fotos do projeto. Portanto, importe o Projeto um dos ativos do projeto PNG de um ponto. Então eu farei isso para todos os outros. Então, um, dois, três, quatro. Agradável. Eu o tenho lá. O que mais eu faria lá é criar uma lista ou constante desses projetos. Então, farei uma constante de projetos e, lá, carregarei todas as informações sobre os projetos e, em seguida, repetirei sobre eles, e meu código não se repetirá, e farei apenas um cartão de projeto E sempre que você quiser apenas adicionar algum projeto, você se envolverá nesses projetos. Então você pode ver lá que vou adicionar imagem que será o Projeto Um. Então eu vou fazer um título que pode ser apenas um projeto. Primeiro, depois farei a descrição e poderei repeti-la. Agora vou adicionar mais alguns projetos e posso continuar definindo o cartão do projeto. Este cartão de projeto, o que farei lá, onde tomaremos um projeto como entrada que colocaremos lá no mapa que usaremos neste portfólio principal. Este cartão de projeto, você também pode fazer como um componente independente Se você simplesmente criar uma nova pasta com componentes e criar um novo arquivo, projete card.j6 Você também pode levar esse código L para lá, mas vou mantê-lo nesta representação do componente J seis Lá começaremos com o retorno, e eu farei a div Essa div principal do cartão do projeto tem algum estilo. Acrescentarei que adicionarei cantos arredondados, gradiente de fundo para a direita, do cinza 800 ao cinza 900 até o preto Em seguida, usaremos o overflow hidden, para que nada saia de nossas cartas Então, um pouco de sombra no Excel é suficiente. Vamos também adicionar um pouco de índice z, em alguma transformação, transição e duração. Portanto, sempre que usarmos a escala até 500 e sempre que passarmos o mouse sobre a carta, você poderá ver como ela aumentará , se transformará e aumentará a escala Então, podemos começar por aí com a etiqueta âncora. E nessa etiqueta âncora, novamente, colocaremos uma imagem Para essa imagem, adicionaremos uma fonte, e a fonte será a imagem pontilhada do projeto. E, novamente, esse projeto, você não pode vê-lo em lugar nenhum. Existe apenas um projeto, mas mapearemos os projetos lá , usaremos esse projeto e chamaremos esse cartão de projeto. E então isso mapeará o valor da imagem, valor do título e o valor da descrição. Portanto, a fonte será esse valor da imagem. Então teremos lá também algum nome de classe, até mesmo para a imagem, é claro. Portanto, a altura será de 300 pixels de largura até o máximo, objeto a cobrir, objeto a cima. O topo arredondado será para o Excel. É isso mesmo. Vamos também fazer esse estilo. Para a tecnologia Anchor, definiremos um HRF e, no cenário ideal, você colocará o URL para sua demonstração de vida profissional do site, você Ou se for para alguns clientes, basta colocar lá o link para o site deles e, em seguida, o nome da classe. Então, podemos agrupar isso, definir a extensão da coluna como três, definir sua exibição como bloqueada e também ocultar seu estouro E abaixo da imagem, colocaremos o disco. E dentro desse dif, faremos o título dois com o título do projeto E também uma tag de parágrafo com a descrição do projeto. Vamos fechá-lo. Agora, sobre o estilo. Então, para a diferença em si, vamos colocar lá algumas roupas de cama, colocar o texto em branco, uma margem na parte inferior e uma margem Agora, antes de adicionar mais estilo, adicionaremos código lá Então, na verdade, veremos o estilo que estamos fazendo no portfólio, faremos outra div E nesta div, faremos o mapa de pontos do projeto Faremos um índice do projeto e aí chamaremos o cartão do projeto. Então, cartão do projeto. Dentro deste cartão de projeto, inseriremos uma chave, que será o índice, e no projeto, inseriremos o projeto. Então, inseriremos lá a partir dos mapas do projeto, o projeto, e lá ele lerá seu título e descrição. E todas essas informações que temos lá. Agora em nosso site, vamos rolar para baixo, você já pode ver lá o projeto. Claro, agora você adicionará o estilo. Primeiro no homem Div, algumas roupas de cama, algo do botão Está bem? Agora, vamos continuar lá com alguma largura máxima. Estamos usando 1.300 pixels. E você também o centraliza agora na segunda div, que talvez nem precisemos Podemos fazer isso no primeiro. O que queremos fazer, ou talvez o que você queira fazer também, é ter o layout da grade e colocar pelo menos dois projetos em uma linha. Se você talvez não tenha muitos projetos e acha que será melhor apenas ter os projetos on-line e abaixo um do outro, você também pode deixar assim e adicionar algum espaçamento entre os projetos Vou usar o layout da grade, então vou adicionar a grade. E na tela do celular, vamos deixá-lo como valor padrão na extensão da coluna um ou na coluna da grade um. Mas na tela média e superior, adicionaremos duas colunas de grade. Portanto, os projetos estarão próximos um do outro. Além disso, adicionaremos alguma lacuna. Portanto, temos algum espaçamento entre eles e podemos voltar para lá e criar alguns estilos para o título dois, que será um texto arqueado na semita OK. E para a descrição do projeto, adicionaremos texto em cinza 300 e texto pequeno e marcharemos para dp. Vamos ver o Bache. Acho que vamos deixar o título com o texto em branco, e tudo bem. E acho que podemos deixar as coisas assim. 8. Experiência: Agora vamos continuar com a seção de experiência. Então, nas páginas do Explorer, criaremos uma nova experiência de arquivo.j6 Vamos editar lá. E podemos começar. Primeiro, o que faremos é fazer uma constante com nossa experiência. Então, vamos fazer experiências ou também retomar. E aí começaremos com a duração e a descrição da empresa. Ah não, isso é uma empresa deles, então eu vou fazer apenas a primeira companhia. Duração que posso fazer lá, não sei, 2017 a 2018 e descrição. Eu trabalhei como desenvolvedor de front-end. Agora podemos contornar isso, fazer algo semelhante, mas mudar para segundo, terceiro, é claro, deveria haver os nomes reais das empresas, mas vou colocar lá apenas alguns espaços reservados Quinto. Isso pode ser 2018, 2019, 2019, 2021, 2021, 2023 e 2023 até o presente. Claro, haverá uma descrição diferente, muito provavelmente. Novamente, vou usar isso como um espaço reservado. Agora que temos a lista das experiências, agora podemos usá-la na div principal, então não faremos nenhum código repetitivo, mas o teremos lá acessaremos por meio do mapa e o reutilizaremos Então, na div principal, adicionaremos algum nome de classe com algumas roupas de cama, com algumas misturas com 1.300 pixels Vamos centralizá-lo com um Mixoto e também adicionaremos uma classe relativa porque usaremos a linha, que será uma linha do tempo para nós, e essa será de posição absoluta Agora, antes de mapear essa constante, criarei a linha do tempo, para que ela seja uma div separada e não tenha nenhum conteúdo interno Ela terá apenas uma classe, e essa classe terá uma posição absoluta com alguma largura, gradiente de absoluta com alguma largura, fundo para baixo, do cinza 500 ao cinza 800 Em seguida, adicionaremos a altura à metade esquerda total, e também em outra linha, posso fazer Transform, traduzir X e, novamente, 50% assim. Agora você pode ver que o início da linha do tempo já está em nossa página e, abaixo, mapearemos a constante, então faremos suas experiências, mapa de pontos, experiência, ou podemos fazer o Índice de XP, e aí começaremos com os fragmentos não vazios, mas com a Em nosso primeiro di em um nome de classe, faremos o layout Curly Basis, backslash, flexbox e, por dentro, verificaremos se o restante do índice dividido E se sim, justificaremos o início, que significa que nossa experiência será à esquerda e, caso não, usaremos justificar Portanto, a experiência estará à direita. E este é um operador de torneiros. Portanto, a primeira posição é verdadeira e a segunda é falsa ou é executada. No caso, é falso. Então, essa condição é mais exata. Lá, adicionaremos itens ao centro e também a margem vertical a oito. E aí usaremos a chave como índice. O que há de errado é que, para o operador Turner, está faltando o ponto de interrogação Agora, lá dentro, podemos criar outra div. E nessa imersão, faremos a descrição no ponto de experiência da empresa e faremos a descrição Então, faremos a tecnologia de parágrafos com a Experience Dot Company. Claro, companhia. Agora podemos copiá-lo e fazer isso por duração e descrição. Assim. Agora podemos verificar a página e você pode ver em nossa página como ela está à esquerda e à direita. Agora, também, se você adicionar o fundo preto do nome da classe, verá exatamente a aparência. Podemos, por enquanto, ou agora podemos editar o gradiente de cor do gradiente para a direita do cinza 800, passando pelo cinza 900, até o preto Assim, podemos ver muito bem como ficará. Agora, verifique a página. E agora você vai jogar com os espaçamentos e nem mesmo com a margem, eu acho. Vamos embora. Além disso, definiremos a largura máxima. Definitivamente, então, em nosso div, podemos fazer a largura máxima Vamos tentar 600 pixels. Talvez 700. Vamos verificar a página. 700. Além disso, vamos fazer isso por completo. Agora está melhor. Então agora talvez você possa voltar para 500, vamos fazer 500. Ou seis? Vamos fazer seis. Agora também adicionaremos lá alguns Excel de três arredondados. Vamos ver como fica. Tudo bem. Um pouco de sombra. Alguns transbordam escondidos no estojo, para que não transbordem fora desta carta, digamos Talvez um pouco de acolchoamento. Isso é um pouco melhor. Agora você precisará adicionar também a cor do texto, mas não vou colocá-la lá, mas em cada linha, porque na empresa, usarei texto branco talvez ou texto de grau 200. Definitivamente vou usar a fonte semibolt. Vou usar o texto Large OK. Agora, na parte inferior, para duração e descrição, tentaremos o texto cinza, 400 Mm hmm E para descrição, também adicionaremos texto Pequeno. Isso é melhor. E acho que isso pode ser para nossa seção de experiência. 9. Contato: Vamos para a seção de contato. Então, nas páginas, novo arquivo, contact.j6. Agora vamos editar lá. Primeiro, adicionaremos seus ícones. Então, faremos com que a importação de IA falhe. LinkedIn. A IA também falha no Git up e a IA falha no Instagram Salve isso. Lá em contato, podemos começar com o DIF principal. Lá dentro, primeiro faremos algumas roupas de cama, 16 de cima, e pronto E então faremos outra div, que conterá nosso formulário de contato Então, vamos fazer uma largura máxima de, na verdade, vamos usar sete Excel, por exemplo, vamos usar um gradiente de fundo para escrever novamente do cinza 800 via cinza, 900 para preto Agora, se adicionarmos algum conteúdo, já podemos vê-lo em nossa página. Lá, vamos centralizá-lo novamente. Vamos arredondá-lo em Excel. E aí vamos, pelo menos a partir de uma tela média e superior, altura de 92 portas. Agora, você pode ver que está nossa seção Do espectro ao preto, você poderá ver exatamente onde está a seção Dentro do segundo div que é para o formulário com esse plano de fundo, começaremos a adicionar o cabeçalho div, que ficará com let's connect and start work in something Texto do parágrafo. Acho que podemos editar agora. Então, no primeiro cabeçalho dois, que será vamos nos conectar. E abaixo, adicionaremos um parágrafo e começaremos a trabalhar em coisas incríveis. Agora vamos adicionar um pouco de estilo lá. Então, margem inferior, bola de chute, seguindo bem o estilo Texto cinza, vamos usar 200 para o título, texto três Excel, talvez até aumentá-lo. Então, para tela média, vamos usar o Text five Excel. Para o parágrafo, vamos usar texto XL e texto cinza 400. E acho que é isso por enquanto. Para a diferença que conterá isso, usaremos o peso máximo de três Excel Podemos ver onde está o anel y. Então, podemos centralizar o texto e misturá-lo assim Agora, talvez possamos aumentar o texto mesmo aqui. Incrível. Abaixo desta div Vamos adicionar alguma margem ao topo. Na verdade, está lá. Agora, o que eu faria é acrescentar algo. E então, abaixo deste dia, faremos outro, e lá preencheremos as informações para contato ou permitiremos que o usuário preencha as informações caso queira entrar em contato conosco. Então, vamos fazer o nome da primeira classe com o layout flexbox e justificar para centralizar Então, lá faremos um mergulho com Na tela do celular, vamos deixá-la com grade resfriada, uma em uma média e superior Vamos alterá-lo do valor padrão das colunas um da grade para a coluna dois da grade. No interior, começaremos com a primeira e a segunda div. A primeira div estará no lado esquerdo e conterá algumas informações de contato E abaixo, daremos uma segunda olhada, que será o formulário real do contato para preencher o e-mail Assim, podemos editar ali mesmo, ID, formulário. Mas vamos começar com a primeira diferença. Para a primeira dif, adicionaremos uma margem vertical à automática, pouco de preenchimento para gravar em seis Lá dentro, faremos uma lista não ordenada. E lá faremos o primeiro item da lista, o segundo e também o terceiro item da lista. Cada um deles conterá o ícone que temos lá. Então, a IA preenche o LinkedIn. Então a IA preenche o Git e a IA falha no Instagram. E aí vamos continuar com o nome da classe. Na verdade, o que podemos fazer é segurar e fazer o nome da classe com uma largura de até 70. Pixels de oito para áudio e texto para cinza 300. Além disso, podemos estilizá-lo assim. E neste item da lista, também haverá uma diferença. E nesta dif, teremos um cabeçalho três com Podemos colocar o endereço Podemos colocar lá o contato. Em seguida, um parágrafo com celular e o parágrafo com e-mail. Caso alguém não queira preencher o formulário e apenas queira usar o e-mail e entrar em contato conosco diretamente. Então, nesta div, adicionaremos alguma margem. Além disso, já podemos sentar lá, mas pegue essa diferença, corte e coloque abaixo desta Agora está melhor. Agora faremos mais truques de mágica. Então, nesse momento, colocamos os itens no centro dos itens da lista e, na verdade, podemos pegar todos eles. Adicionaremos uma classe de layout flexbox. Agora, no cabeçalho, adicionaremos texto muito grande, outro muito negrito e texto cinza 200. Isso é exatamente o que todos nós estamos lá. Mas em vez de 200, vamos salvá-lo em 400 e ver como fica. Agora, para o Git up, se fizermos a mesma coisa que no item anterior da lista, podemos copiar esse parágrafo com título ou o dif Wal Coloque aí e, em vez de entrar em contato, colocaremos o horário de trabalho e podemos fazer de segunda a sexta-feira, não sei, das 15h às 20h. E nos finais de semana, podemos fazer o Chels disponível no podemos fazer Por exemplo, agora para o Instagram, podemos deixar como. Agora vamos adicionar o formulário de e-mail. Então, aí no div do formulário ou com o ID de um formulário Esse quatro é meio simples: adicionaremos uma classe com a largura máxima de seis Excel, um pouco de preenchimento e aumentaremos as batidas em uma tela média ou superior, adicionaremos uma classe com a largura máxima de seis Excel, um pouco de preenchimento e aumentaremos as batidas em uma tela média ou superior, algo como 12. Adicionaremos um formulário Dentro deste formulário, colocaremos uma ação. Nesta seção, colocaremos um endpoint, mas eu farei isso porque, depois de codificarmos essa interface do usuário para o formulário, mostrarei como fazer isso funcionar com a página GTFormTio E, na verdade, quando alguém preencher este formulário e clicar em enviar, você receberá um e-mail em thisgtform dot IO, então ele estará funcionando totalmente Vamos adicionar o método deles, postar. E começaremos a adicionar suas caixas de entrada. Então, primeiro, vamos adicionar um div. Vamos fazer a margem deles até os seis piores. Dentro, colocarei a entrada, outra entrada e a área de texto. Para a primeira entrada , será do tipo texto. Também com ID, nome e, em seguida, coloque seu nome em um espaço reservado Em seguida, também o nome da classe com. Na verdade, vamos salvá-lo para que possamos vê-lo e adicionar a margem na parte inferior com o total. Na verdade, ainda não está na largura total. Meio arredondado. Agora, borda cinza 400, algumas roupas de cama Y para dois, roupa de cama para a esquerda para dois, roupa de cama para a direita para quatro, vamos dar Na verdade, podemos adicionar sua largura ao total. Mas sim, vamos adicionar ou simplesmente copiar essa linha e colocá-la lá, porque agora essa entrada estava bem ao lado dela. Agora, como está ocupando toda a largura, estará abaixo. Lá, adicionaremos um espaço reservado diferente, que será seu e-mail Então, vamos colocar assim com ID, e-mail e digite também e-mail. R, vamos colocar lá o nome dois. Nome e nome de dois e-mails. Assim. Na área de texto, entraremos em ID. Ou vamos começar com o que faremos na ID. Essa será a área de texto, o nome será a área de texto. Colunas, então, por padrão, podemos definir cerca de 30 linhas. Podemos definir como padrão cinco. Então, ficará assim. E definiremos um espaço reservado para escrever sua mensagem. E agora podemos criar nomes de classes. Então, usaremos a largura para preencher a margem até, na verdade, aproximadamente a margem de que não precisamos. Vamos usar uma borda média arredondada, cinza para 100 e também uma borda em si para melhor legibilidade Vamos fazer assim, copiar e colocar também lá. Agradável. Agora, depois da cor da borda, definiremos também um pouco de preenchimento branco Dois, sobrou dois, e acho que é isso Agora vamos conferir a página. Isso parece bom. Também precisaremos adicionar um botão e, talvez, se definirmos as linhas como quatro, tudo bem. Tudo bem. Agora, abaixo desta div, mas ainda no formulário, adicionaremos um botão que dirá enviar mensagem, e esse botão será do tipo enviar e esse botão será do tipo enviar com largura de classe para preencher Precisamos fazer um gradiente de fundo para escrever do cinza 400 via cinza 600 até cinza 800 E agora precisamos mover um pouco as cores. Eu acho, ou talvez vamos torná-lo um pouco mais escuro, 600, 800 a 900 Talvez isso seja demais. Que tal 700, 604 centenas Vamos fazer quatro. Eu acho que é melhor. Então, agora, se adicionarmos também um pouco de BI a três, arredonde-o para o Excel. Parece melhor. Também precisaremos adicionar texto branco, ou melhor, texto na nota 200 para semirrupto e texto no Excel E não podemos fazer um Excel arredondado. Precisamos manter a média arredondada, assim como fazemos com nossas entradas Então, vamos fazer isso assim. Eu acho que está tudo bem. O que mais podemos fazer agora Basicamente, é isso, e agora vou mostrar como fazer esse formulário de contato funcionar. E para qual endpoint, você precisará alterá-lo lá Vamos para esta página, ap dotgtfm dot IO slash Login. Em seguida, vamos nos inscrever, clicar em Criar lá, colocar um nome e colocar lá o fuso horário, copiar esse endpoint e colocá-lo lá Obviamente, esse endpoint não é válido. Você precisa colocar lá seu próprio endpoint que você tem nessa página 10. Rodapé: Agora vamos abrir um explorador. Lá nas páginas, criaremos um novo arquivo, footer.j6, e lá faremos Vamos adicioná-lo ao nosso Epi Ja six, Footer. Salve isso. Para o rodapé, adicionaremos ícones primeiro, então importe FA Github, quadrado FA Instagram Lá na Div principal, tínhamos uma largura máxima de 1.300 pixels, centralize-a Faremos um gradiente de fundo para escrever do cinza 800, passando pelo cinza 900, até o preto Agora também o centralizamos para que possamos arredondá-lo para três Excel Na verdade, vamos adicionar algum conteúdo. Queremos ter apenas bordas arredondadas na parte superior, então vamos usar isso. Além disso, usaremos um layout de grade. E usaremos ótimas colunas duas, na verdade, no celular. E na tela média e superior, usaremos colunas de grade até quatro. Então, teremos quatro colunas uma ao lado da outra. Usaremos os itens posicionados no centro, alguns em rosa e o texto muito grande. Vamos começar a adicionar a lista não ordenada. Então, primeiro, lista não ordenada. Com a tecnologia de parágrafos, haverá algum logotipo. Então, com a tecnologia de parágrafos, podemos ter nosso nome ou alguma descrição. Sou desenvolvedor e consultor da Costach. Lá podemos ter os ícones. Então, vamos colocá-los em um DIV, ter um quadrado no Github, ter um Instagram e por que estou colocando em um DIV, porque eu gostaria de tê-los próximos E para isso, vou usar o layout Flexbox e a linha de direção flexível Vou adicionar uma lacuna e também definirei o texto para cinza 400. Com isso, não preciso fazer nenhum bloqueio adicional para os ícones separados E na parte inferior, adicionarei um parágrafo 2024 G junte-se. Também adicionarei o estilo do texto cinza, 400. Agora, para a descrição, vamos adicionar texto cinza, 400 também. E para o logotipo, usaríamos algo como texto cinza 200. Também para essa lista não ordenada, eu usaria a margem para a esquerda Eu também usaria o espaço y22. Então, o espaçamento vertical entre todos esses elementos é definido como dois. E eu acho que isso é suficiente. Agora podemos passar para outras listas não ordenadas, e agora faremos apenas uma e a copiaremos mais duas vezes Então, vamos acabar com quatro colunas. Lista não ordenada. Lá dentro, faremos um item da lista com geral E, novamente, faremos o espaço Y do. Há outro item da lista que podemos fazer em casa sobre projetos. Então, para isso, faremos texto cinza, 400 e, para o geral, faremos parafuso de fonte Isso é o mesmo para o logotipo, então parafuso de fonte. Assim. Agora vamos pegar essa lista não ordenada e copiá-la duas vezes. O título deve ter alguma cor, e vamos usar texto de grau 200. Lá, podemos fazer ao vivo ou podemos fazer o Projeto Limo, o Projeto um, e depois o mudaremos para o Projeto dois e três E o último pode ser o contato. Pode haver um e-mail telefônico novamente e podemos simplesmente excluir um item da lista. Se não tivermos mais conteúdo, podemos colocá-lo em nosso rodapé Agora vamos verificar como é. Então, agora, se verificarmos nossa página, podemos ir para o topo do nosso componente de contato e, em alguma margem, no topo. Vamos fazer 44, um valor maior. Isso parece melhor para nossa página de projeto. E, na verdade, a propósito, nesta marcha para 44, vamos fazer apenas para telas médias superiores, porque em uma versão móvel, isso não deve ser um problema. Vamos ver um portfólio lá, na verdade, lá nesta vala principal, vamos, na margem inferior, também 44, salvá-lo. Agora isso é melhor. Caso contrário, está tudo bem. Então, é assim a página ficaria sem o plano de fundo que adicionaremos agora. Mas torne-o um pouco mais interessante, digamos que também adicionaremos o plano de fundo da grade. Então, vamos ao código VS. Lá, iremos para o CSS de pontos de índice. Lá abriremos um técnico de carroceria. E dentro dessa tecnologia corporal, adicionaremos o plano de fundo. E o plano de fundo é assim. Acabei de copiá-lo porque esse é um plano de fundo que você pode encontrar na Internet e simplesmente pegá-lo e podemos modificá-lo um pouco Podemos modificar um pouco a cor para a nossa. Então, vamos usar algo assim. Mas talvez seja demais. Agora, se eu colocar a página lá, podemos definir isso para 50%. Eu também mudei esses 800 pixels para 500 pixels, e ele ficará no meio assim. Além disso, agora podemos verificar a página, e ela ficará assim, também com esse ótimo plano de fundo. Agora vamos mudar isso para um tamanho de celular e verificar como está. Então, o que podemos fazer é mover um pouco esse botão de CV, então há um pouco de p. Isso é bom. Hein. Lá, precisamos melhorar esta seção de experiência e também com alguma margem de contato e rodapé Então, vamos fazer isso. Vamos começar de baixo. Então aí vamos definir a margem Eu acho que está lá, margem da esquerda, vamos definir da tela média acima, a margem para baixo até oito, talvez. Sim, a partir do tamanho médio, também podemos redefini-lo, acho que podemos definir o texto como pequeno. Portanto, a partir do tamanho médio, o texto voltará a ser grande. Além disso, acho que há algumas roupas de cama que devem ser apenas de tela média ou superior Na verdade, deveria haver alguns, mas definitivamente menores. Então, vamos usar seis. Então, basicamente, o que eu faria é criar outro div dessas três listas não ordenadas, colocar dentro do DIV desse prato, eu adicionaria um layout de grade com chamadas de grade E agora, se você aumentar a página, é claro que parece terrível, mas podemos corrigi-lo. Então, pelo menos na tela do celular, parece melhor. Se agora fizermos ou fizermos isso, agora o excluiremos de lá, será assim, o que é bom. E se aumentarmos, ficará terrível. Mas podemos corrigir isso excluindo essa margem à esquerda. E , na verdade, sim Então, o que eu fiz, vou mostrar a vocês, é que também excluiremos essa margem da parte inferior da tela média e superior. Agora vamos salvá-lo e verificá-lo. Ficará assim, o que é melhor e em uma tela de celular como essa. Além disso, o que faremos é colocar na margem superior a 12. Incrível. Então agora você provavelmente não viu. Oh, você fez. Lá, adicionei uma margem ao topo da diferença principal em nosso rodapé 11. Atualizações finais: Agora vou rolar para cima. Então, precisamos corrigir essa experiência, e isso pode ser solução simples, porque aí podemos simplesmente fazer Hyden E na tela média e superior, faremos o bloqueio de exibição. Agora, vamos tentar. Então, aí estamos em um telefone celular. Vamos aumentá-lo. E no desktop, nós o temos lá. Então, também adicionaremos algumas manchas. Então, vamos apostar dez. E em tela média e superior, faremos apostas zero assim. Essa é a capacidade de resposta. Ok, funciona. Agora, o que mais está faltando? Precisamos ir para uma seção lá na profundidade principal. Então, vamos colocar dois em médio e superior. Vamos reiniciá-lo dois. E aí vamos deletar a lacuna. Vamos apenas criar essa lacuna para tela média e superior. E no celular, usaremos get 12, que é muito baixo. Vamos usar 16 ou 20 e funciona. Então, agora podemos dar um tapinha para quatro, e é melhor. O que também podemos fazer é usar o Text Excel a partir de uma tela média ou superior . Caso contrário, usaremos textarge e agora também podemos adicionar a margem superior, algo como 12 Talvez façamos 16. E se formos até a seção de heróis para pegar o botão, que está lá, podemos adicionar a margem esquerda a seis. E na tela média e superior, redefiniremos a margem para a esquerda. E é isso. Agora vamos tentar a navegação. Podemos abrir o explorador lá na seção Sobre. Faremos uma identificação sobre formulário de contato, ID, contato, experiência, ID, experiência, rodapé Bem, não precisamos de identificação lá, seção de heróis. Podemos fazer carteira de identidade e portfólio, podemos fazer portfólio de identificação. Agora podemos ir para Navbar. Lá podemos ver que funciona, mas para o trabalho, é portfólio, o mesmo lá. Bem, a barra de navegação funciona, mas é claro que temos algum problema com o índice z. Então, vamos ao portfólio. Em seguida, remova o índice z de dez. Agora salve-o. Agora funciona. Além disso, o que precisamos fazer é ir até a barra de navegação. E aí, para o ícone, precisamos usar display fixo, top zero, direito, ou top cinco, direita cinco, índice até dez. Desculpe, são cinco. E também podemos aumentar o tamanho para 40. Isso é melhor. Então, agora vamos entrar em contato. E vamos fazer com que seja assim. O que provavelmente também faremos é fazer algumas roupas de cama , usar fundo branco, arredondado médio, roupa de cama quatro ou talvez duas E isso é melhor. Então, agora que o abriremos , iremos trabalhar, vivenciar ou passear, e poderemos vê-lo e fechá-lo. Mais uma coisa que podemos fazer para aumentar nossa experiência de usuário. Podemos criar a navegação constante e fechar, lá faremos Set NaF to pulse Agora vamos ao nosso menu de navegação lá, e aí podemos adicionar, vamos realmente selecionar tudo. Então segure e segure. Lá, faremos o On click e fecharemos a navegação. Agora vamos salvá-lo e testá-lo, então vamos passar para a experiência e agora para cerca de, e está funcionando bem. E isso é tudo para a página de parede, finalmente. Vamos verificar como é. 12. AmsterdamIntroAndSetup: Atue como um vento favorável, com todos eles no portfólio atual. Faremos com que o formulário de contato funcione, então receberemos e-mails. E, claro, será responsivo. Primeiro, verifique se temos essa extensão intellisense instalada e também esse ES seven. Agora vamos para o terminal. Lá estará o novo terminal, e colaremos lá nosso primeiro comando, que será esse. Você pode encontrá-los em uma descrição onde usaremos isso como nome de front-end. Selecionaremos react JavaScript. Agora, na página de talentos, vamos começar com os guias de framework Wet e lá já fizemos isso, então usaremos esse primeiro comando. Na verdade, talvez não tenhamos ido ao nosso projeto de front-end que criamos, então faremos um CD. Agora vamos executar o comando. Agora vamos executar o segundo que está lá. Agora devemos entrar no arquivo de configuração do tailwind e colar aí Então, devemos colar as diretivas de vento de cauda. Então, vamos para a pasta de origem, indexar o CSS, passar lá as diretivas, e lá para tentar que nosso final esteja funcionando e conectá-lo, vamos até o arquivo Abdo J six e colamos e Assim, não precisamos de logotipo e tweet. Além disso, não precisamos, basicamente, de nada agora, mesmo dessa constante, que a salve. Vamos verificar o ADCSS. Nós podemos excluí-lo. No EO CSS, sairemos lá e esse MindGS six também Agora faremos isso, executaremos death para que NPM execute def e abriremos o servidor onde estará nossa página Agora vamos tentar que isso esteja funcionando. Então, vamos fazer, por exemplo, isso e sim, está funcionando. Então, temos o Telewind instalado. E agora podemos começar em nossa pasta. Primeiro, vamos criar lá algumas pastas. Então, o primeiro serão os componentes em que teremos as seções que usaremos. Então, temos os ativos que colocaremos nas imagens, e será isso por enquanto. Também podemos instalar, criar o novo terminal e, na verdade, ver o front-end, e lá podemos instalar o react scroll e também a biblioteca de ícones do React , que usaremos para a rolagem suave e também para os ícones em nossa página Agora, eu pré-criaria todos os componentes que criaremos e os colocaria em nosso Edo S six, para que tivéssemos isso pronto e pudéssemos então codificar os componentes. Então, vamos começar. O primeiro será, na verdade, Navbar. Agora, à medida que importamos ou instalamos as extensões, podemos usar esse AFC e salvá-lo Em seguida, também usaremos algumas seções de habilidades. Além disso, algumas sobre a seção. Seção de contato. Então Puter E o que mais? Então você tem cerca de contato externo. Definitivamente sua seção, certo? E também teremos uma seção de trabalho com o nosso trabalho que fizemos. Agora, nesta página de seis páginas do ABG, vamos colocar todos esses componentes e depois vamos apenas codificá-los e eles estarão prontos Então, vamos começar com o Navbar. Ele o importará e, em seguida, continuaremos com a seção de heróis. Depois da seção de heróis, provavelmente continuaremos com o trabalho. Então, teremos algumas habilidades. Depois das habilidades, haverá cerca de uma seção. Seção de contato e, no final, haverá um rodapé. Então, temos os 24, 67 componentes. Ok, isso deve ser bom. Claro, podemos reordená-lo no final. Vai ficar bem. Acabei de prepará-lo, então podemos apenas codificar. Vamos codificar o primeiro componente. Mas antes disso, devemos adicionar alguns ativos. Vou editar esses ativos que você pode encontrar em um Git fornecerei para você e também, é claro, usar suas próprias imagens, mas se você quiser codificar junto e usar algo que eu usei, é claro que você também pode usar isso que eu darei a você Também fornecerei esse arquivo CSS de ponto índice em que estou usando esse layout de grade ou plano de fundo de grade para minha página da web, também esse espaço de fonte grotesco e também essa classe CSS que usaremos para a maioria de nossos componentes para criá-lo com esse efeito que terá um filtro de fundo de sombra com fundo desfocado , para Em seguida, vamos aplicá-la como outras classes de provocação e ela será editada em nosso elemento ou componente E é assim que o fundo da grade ficará, aliás. E você também pode ver no lado esquerdo existem todos os nossos componentes que importamos no Epilod J six e gostamos de pré-criá-los E agora adicionamos um código e um conteúdo a todos eles. Então, vamos mergulhar direto nisso. 13. 1navbarAMSTERDAM: O que faremos primeiro é que também importaremos o estado de uso porque usaremos a variável de estado que mudará nossa navegação da versão desktop para a versão móvel. Em seguida, importaremos os ícones para nossa navegação. Então, importaremos o esboço fechado e também o menu do esboço Em seguida, importaremos o link da rolagem suave ou da biblioteca react scroll Então, do react scroll. E agora, em nossa barra NAF, podemos começar acima do retorno e começar a redefinir a variável de estado que será uma constante e NAP com a função Lá, criaremos uma função manipuladora matemática e essa função definirá a variável de estado NAF lá Portanto, sempre que clicarmos no elemento que terá a função de clique com esse identificador NAF, o valor do NAF será definido de verdadeiro para falso ou vice-versa Agora com esse estado NAF, podemos continuar nossa navegação em nossa div principal Lá, começaremos com lista não ordenada com itens da lista E dentro desses itens da lista, teremos o link. Que acabamos de importar desta biblioteca de rolagem do Rax. Ele será usado para o Smooth Scroll. Vamos copiá-lo três vezes, digamos, porque o teremos para a página inicial, inicial e também para cerca Depois, para portfólio e também para contato. Então, vamos fazer um pouco de espaçamento lá. Depois disso, teremos também o ícone que será alterado sempre que for como a tela do celular ou sempre que for a versão disco. Então, vamos editar e adicionar a função onclick Então, ao clicar, chamaremos esse identificador de navegação. E depois de ser chamado, ele mudará o valor da variável de estado de navegação. Lá dentro, adicionaremos o operador Turner Nap e isso executará a primeira posição ou a segunda posição com base no valor da variável Portanto, a primeira posição é a posição verdadeira e, caso seja verdadeira, ela executará a; caso seja verdadeira, mostrará o ícone de contorno fechado Nós o importamos para lá. E caso seja falso, que é o estado padrão, ele mostrará o outro ícone, que é esse menu de contorno Vamos definir lá algum tamanho. Vamos definir 30. Vamos fechá-lo e definir o mesmo tamanho. Além disso, definiremos alguns estilos para esse ícone, mas vamos falar mais tarde Como vou precisar mudar a tela, você pode ver a tela do celular, e eu não quero fazer isso agora. Eu só quero terminar agora o texto, e depois vou começar a adicionar as classes. OK. A última coisa que precisamos é a navegação móvel. Então, criaremos o div que conterá outra lista não ordenada E, novamente, essa será a mesma história. Esses serão os itens da lista com esses links. Usaremos neste div outro operador turner porque queremos mostrar essa navegação somente quando essa função onclick acontecer Portanto, somente quando esse menu é alterado para esse ícone fechado ou o valor da variável é alterado de força para verdadeira. E aí no estilo, usaremos novamente o operador do torneiro Então, usaremos a variável, ponto de interrogação, e definiremos a primeira posição e, em seguida, a segunda posição ou a posição da força. Primeiro, o que precisamos fazer é realmente ocultar essa lista não ordenada para o desktop Para o menu e para fechar, definiremos o estilo. Então, na tela do celular, ele será bloqueado. E então, em uma tela média ou superior, vamos escondê-lo. Além disso, vamos colocar lá algumas cores. Portanto, o texto com nota 300 é bom. Então, vamos consertá-lo. Além disso, quando isso for corrigido, corrigiremos os dois. Vamos tentar dez, e também os dez melhores, então não é, algo assim está bem. E também contrataremos o índice Z. Agora vamos tentar fazer com que ele mude. Isso é bom. Então, o operador de giro funciona. E agora, o que faremos é codificar lá para o operador do segundo turno, o estilo, e ele realmente mostrará a navegação móvel quando clicarmos nele Então, quando isso for falso, faremos com que seja fixado para a esquerda em -100% Vamos estilizar o texto em cinza 300. Mas vamos realmente tornar isso realidade em nossa tela. Então, quando eu clico nele, está chegando a -100 fixo à esquerda. E quando eu clico nele novamente, ele aparece. Bem, é basicamente isso para essa navegação na tela do celular, mas é claro que precisamos estilizá-la para que pareça, pelo menos de alguma forma, boa. Vamos começar com o texto cinza 300, continuar com o índice Z 240, para que possamos vê-lo, mesmo que haja alguns outros elementos com outros índices z na página, então o fixaremos zero esquerdo e também no zero superior Vamos aumentar a largura até o máximo. Agora podemos testar o fundo em branco. Sim, claro, então está ocupando toda a largura e está fixado à esquerda e no topo zero. Como nós queremos. Agora, vamos realmente definir um plano de fundo. Então, geralmente o que estou usando para minhas navegações é algo parecido com essa cor cinza Em seguida, continuarei com facilidade e saída, o que fará com que nossa navegação entre suavemente e também com alguma duração, para que não seja instantânea 500 está bem. Agora vamos tentar. Agora vamos adicionar estilo à nossa lista não ordenada. Então, sim, não parece assim. Vamos colocar lá algumas roupas de cama, vamos aumentar o tamanho do texto Também vamos fazer uma margem para a esquerda. Vamos também contratar o índice lá. E o que mais faremos é que, para esses links, você coloca lá todas as retenções, basicamente segura Alt e depois clica em todas essas linhas, e então podemos escrever em todas essas linhas ao mesmo tempo. Vou usar o nome da classe deles e definir o pedding 22, e ele fará isso Ok, também precisamos fazer esse link funcionar. O que precisamos fazer é adicionar um destino para onde esse link nos levará. Então, vamos adicionar dois. E a primeira, por ser uma página inicial, nos levará ao herói Além disso, para que a rolagem suave funcione, precisamos adicionar alguns valores. O primeiro é espião. Também o definimos como verdadeiro. O segundo será suave. Claro que queremos que seja verdade. E então definiremos os valores de deslocamento, que são 50 e também a duração, e novamente, usarei 500 Depois, posso simplesmente copiá-lo de lá e colocá-lo lá e depois usar esse portfólio de contatos , pois serão os IDs que colocarei nas minhas páginas. Assim, posso simplesmente reutilizá-lo e essa navegação suave funcionará Vamos mudar isso para um tamanho de tela diferente. Vamos fechá-lo. Mude-o para uma tela diferente, e é aqui que iremos para a navegação na área de trabalho. Então, agora vamos fazer algo como tela média e superior. Isso será exibido novamente flexão com fundo branco, para que eu possa ver Ok, então vamos colocar algo mais ou na verdade, agora você pode ver porque eu movo a janela no meu OBS. Então, sim, podemos continuar. Eu me certifiquei de que está lá com esse fundo branco, e aí vou continuar com o estilo Então, eu estou usando em uma tela média e acima do display flex, então isso mudará a tela oculta E agora podemos continuar. Portanto, podemos deixar o plano de fundo apenas para esse fim, que possamos ver onde está nossa barra de navegação. Podemos fazer algo como laranja 200. Ou 100. OK. Usaremos também uma altura fixa, então não é tão fina. Vamos usar algo como, sei lá, 96 pixels. Usaremos essa altura fixa no diferencial superior porque ela manterá a barra de navegação na parede. Então, vamos colocá-lo lá. Além disso, a cor será definida lá. E isso apenas manterá o oculto e, no meio, ele se tornará flexível Podemos definir uma largura máxima, vamos usar 1.200 pixels. Podemos definir a flexibilidade da tela e justificar entre elas. Portanto, teremos um espaçamento entre todos os elementos que teremos em nossa barra de soneca. Então, vou justificar entre e também centralizar os itens, então vamos centralizá-lo verticalmente Como é a aparência da nossa barra de navegação. Ok, também precisamos usar o MMX automático deles. Também adicionaremos seu logotipo ou nosso nome, e isso pode ser apenas em alguma tecnologia H one, então usarei o nome H one, John Doe, e no lado direito, os itens Obviamente, nos itens, também podemos usar a justificação, podemos definir alguma lacuna, por exemplo, para seis, ou algum texto em Excel Talvez esteja tudo bem. E para o logotipo ou para o nome, também definimos o texto em Excel, e talvez queiramos os dois. E tudo bem. Agora vamos fazer o que eu mencionei no começo. Começaremos ou mudaremos o plano de fundo para o efeito de classe. Nós o importamos no índice CSS, e ele ficará assim. Além disso, adicionaremos algumas roupas de cama em uma linha horizontal, então adicionarei talvez oito Claro, eu também preciso mudar o texto. Então, vamos usar texto branco ou melhor ainda, se você usar algo um pouco mais escuro Então, texto cinza 200. Ok, 300 funciona melhor, provavelmente. E eu vou manter isso assim. Agora vamos tentar mudar a janela para isso e ela funciona. Precisamos mudar isso para o mesmo estilo que temos na navegação móvel. Isso significa que vamos alterá-lo para o link com uma rolagem suave como esta. Sim. E agora podemos, na verdade talvez nem precisemos da extensão, aliás Como parece. Sim, esse gasto não é necessário. Então, podemos excluir essas, você sabe, classes dos itens da lista de links como este e podemos mantê-las. 14. 2heroAMSTERDAM: Nesta seção, começaremos com todas as importações. Vamos importar as imagens. Em seguida, importaremos também as outras fotos, que serão dois cadernos e um celular, se não me engano, para que possamos conferir lá, caderno à esquerda, caderno central e também celular Essas imagens têm o mesmo nome, então vamos apenas copiar e colar esta e também precisaremos importar a animação de tipo, então importe a animação de tipo de reação. Sim, eu não importo a biblioteca, então vamos abrir o terminal. Animação do tipo NPMirac, instale-a e isso deve fazer com que funcione novamente. Sim, ajudou. Agora podemos ir para a codificação da seção de heróis, pois importamos tudo Então, abriremos a seção ou o div principal e, novamente, começaremos com os elementos Então, queremos as três fotos que estarão por trás de todo o texto em nossa seção de heróis. Então, isso terá algum nome de classe, também alguma fonte e também ânodo Vamos querer isso três vezes. Em seguida, teremos o if que conterá o título com nosso texto de animação de reação ou, sim, digite o texto da animação onde será escrito o que estamos fazendo e assim por diante. E abaixo disso, haverá um parágrafo. Isso dirá nosso nome e abaixo desta div. Teremos uma foto do perfil. Na verdade, não estará abaixo dessa divisão. Ele estará próximo a ele, mas estará na parte inferior desta seção. Então, vamos apenas adicionar um div. E lá dentro, colocaremos novamente uma imagem como essa. É claro que temos os erros, mas vamos corrigi-los rapidamente. Então, as primeiras imagens serão o notebook à esquerda, depois será o meio do notebook e depois será o celular. Em seguida, teremos a foto do perfil, e ela está funcionando agora. Temos as fotos e podemos continuar. Primeiro, vamos ver a animação do tipo react, na verdade. Então, na tecnologia H one, adicionaremos um intervalo. E dentro do texto extenso, haverá um técnico de parágrafos que eu sou e haverá o outro texto. Agora, um texto de quebra, e abaixo disso estará o tipo de animação. Esse tipo de animação requer alguns campos que precisamos preencher. O primeiro será a sequência. E isso vai dizer o que queremos que essa animação escreva. Primeiro, queremos que você escreva front-end, desenvolvedor com duração de 1.000, segundo, web designer com duração de 1.000 novamente e terceiro consultor com duração de 1.000 novamente. Vamos incluir isso em Spen tax e também colocaremos uma velocidade que será definida como 50 e repetiremos isso no infinito Isso significa que estará em um loop infinito. Talvez também precisemos primeiro estilizar as imagens, porque assim poderemos ver realmente nossa navegação e brincar com ela. Agora não podemos vê-lo porque, na verdade, é tão pequeno que você ainda não pode vê-lo na tela. Vamos adicionar a este H um pouco de estilo. Então, usaremos texto branco. Então você pode ver que está lá. Além disso, temos um texto para L, e vamos torná-lo responsivo Então, em uma tela menor ou superior, aumentaremos isso em uma tela grande, ainda maior. Então, vamos usar o texto oito XL e também o parafuso extra da fonte Também usaremos lá para essa imersão, nome da classe do copo, então ele é embrulhado assim Estofamento horizontal. Vamos definir o preenchimento horizontal para cinco, que não fique um pouco mais nos cantos Agora, vamos realmente ver as imagens porque realmente precisamos colocá-las na posição absoluta para que possamos destacar melhor a seção de heróis Em cada imagem, definiremos a posição como absoluta. Definiremos o índice z inferior. Também definiremos uma certa largura. Então, vamos usar 400 pixels. Colocaremos o fundo em zero e definiremos alguma posição à esquerda. Para este, usarei -170 pixels. E para que isso funcione, também precisamos definir a posição em relação à queda principal Lá, posicionamos uma posição relativa assim. Agora podemos pegar todas essas classes absolutas de posição e colocá-las em cada imagem. OK. E também vamos até essa imagem e definir uma largura para que possamos ver Awesome. Lá, mudaremos o posicionamento para que possamos manter isso em -170 pixels A segunda, podemos tentar outra coisa. Então, vamos lá, não sei, 320 pixels. Sim, estará em algum lugar mais no meio. E para o terceiro, vamos usar 450 pixels porque queremos que fique mais no lado direito. Ok, vamos também diminuir a largura para 200 pixels. Então, é um pouco menor. E agora, para trabalhar com isso, vamos também começar a adicionar um pouco de estilo para a div principal Então, usaremos seu layout de grade. E em uma tela móvel, haverá padrões definidos como grid coms one, mas em uma tela menor e superior, usaremos grid Então, criaremos as três colunas. E nós vamos querer esse texto, você pode ver lá esse tipo de animação com também o parágrafo que preenchemos, meu nome é John Doe, e eu tenho mais de cinco anos de experiência e desenvolvimento Para esse texto de volume nesta div, definiremos a extensão da coluna Então, isso significa que serão necessárias duas das três colunas. Além disso, um pouco de preenchimento horizontal e centralize-o com Oh, nós já o temos lá e o centralizamos verticalmente assim E continuaremos, então definiremos uma lacuna, definiremos também uma largura máxima. Então, vamos usar, novamente, 1.200 pixels. Em tela média e superior, definiremos alguma altura da janela de visualização Então, vamos usar 70. Agora, vamos centralizá-lo novamente. Finalmente está começando a ficar em forma, o que é ótimo. E também, vamos colocar lá algum preenchimento vertical. Vamos tentar oito. OK. A imagem do celular, precisaremos mudar também a posição inferior. Então, vamos usar lá algo como 500 pixels. Parece melhor. Então, está por trás da nossa navegação e podemos ver alguns dos dispositivos móveis. Sim, você pode jogar com esses valores no canto inferior esquerdo, e talvez até mesmo com wid dependa de quais imagens você colocará em sua página e estilizará como quiser Obviamente, se você quiser que a tela do celular esteja em algum lugar diferente, basta alterá-la de média, que ela estará lá e na tela básica do celular que estará em algum lugar em posição diferente, algo assim. Então, quando você o alterar, poderá ver como a parte inferior do celular está mudando ali. Vamos realmente continuar. Podemos reverter isso porque não vou usar isso por enquanto. Para a imagem lá, faremos a mesma coisa. Vamos definir isso como absoluto. Vamos colocá-lo no zero inferior, então ele estará lá, mas também o colocaremos no zero à direita. Então, estará no canto inferior direito. Em seguida, também podemos excluir a largura a partir daí. Porque vamos configurá-lo na div acima, e aí definiremos a largura da tela grande e superior em 750 pixels Ainda é muito grande. Vamos diminuí-lo em 500 pixels. E agora vamos brincar com isso, mas 600 pixels funcionam. E na tela do celular, vamos definir isso para cerca de 200 pixels. Talvez 300. Ok, isso é demais. Vamos continuar com o estilo do texto deste parágrafo. Nem podemos ver lá, então vamos estilizar isso com texto branco. Agora podemos ver pelo menos que algo está no fundo. Continuaremos com alguma margem na vertical. Ok, com certeza aumentaremos esse texto, mas teremos cuidado com ele. Começaremos com um texto pequeno ou talvez até ok, vamos deixar assim, mas em uma tela menor, continuaremos com o TextLarge e, em uma tela maior, podemos tentar algo como texto no Excel Usaremos o Mx com. Cem pixels. Mamãe. Ok, e quando em uma tela maior ou média, pelo menos definiremos a largura da mistura para, não sei, 600 pixels. Como parece. Parece um pouco melhor. Mas o que eu também faria é colocar a mixagem automática. Não, não parece bom, então a margem sobrou quatro. OK. Então eu escreveria texto cinza. OK. Obviamente, também excluiremos isso. Então, usaremos texto cinza 300. Faremos esse parafuso de fonte e, por cima, precisaremos alterá-lo um pouco Primeiro, entenderemos os méritos dessa tecnologia inovadora. Então, diremos que, na verdade, nem precisamos gastar lá. Certo. Lá, adicionaremos um nome de classe. Vamos adicionar um pouco de marcha na parte inferior. Vamos escrever algo como quatro. Vamos adicionar o texto cinza 200. Bem, 400. Talvez até 500. Talvez até 500 não seja tão ruim. E muito provavelmente vamos deixar as coisas assim. Então, temos o IMA deles e depois a navegação de tipos, e há uma pequena descrição, que será para a seção de heróis por enquanto. Então, vamos para outra seção e talvez no final façamos algumas atualizações finais. Depende do design final, da aparência de tudo. 15. 3aboutAMSTERDAM: Continuaremos com uma seção. Então, vamos lá, fale sobre isso. Faremos algumas importações lá. Na verdade, faremos importações semelhantes às que temos lá. Então, vamos fazer duas imagens, ir até cerca, colocá-las lá. Vamos querer o notebook central novamente e o celular novamente. Assim, podemos manter as mesmas coisas. Apenas remova este. O que faremos lá é fazer o layout da grade e colocar lá quatro contêineres. E esses contêineres terão uma extensão diferente em cada linha Então, teremos, eu não sei, três vãos de carvão e um contêiner levará dois e o E abaixo deles, um pegará um colspan e o direito 12 Você verá como fica daqui a pouco, vamos codificar e ver. Primeiro, vamos fazer os contêineres, então abriremos o div, copiaremos mais três vezes, faremos alguns espaçamentos lá, para melhorarmos a legibilidade para nosso propósito, Caso contrário, não devemos deixar espaços em branco. Nós os excluiremos mais tarde no final. E aí vamos colocar o texto em branco para que possamos vê-lo. Além disso, alguma lacuna entre eles, misture a largura com 1.200 pixels Em seguida, centralizaremos isso, pois é uma largura diferente da altura do nosso relatório pois há mais de 1.200 pixels Então, nesse caso, vamos centralizá-lo com mix auto. Em seguida, faremos alguma margem ou margem vertical. Vamos definir isso para 12. Em seguida, definiremos o layout da grade e, na tela do celular, valor padrão será uma coluna e, em uma tela menor e superior, podemos definir três colunas dessa grade. Sim, vamos começar a editar alguns conteúdos. Então, na verdade, veremos algo também na página, mas ainda não. Primeiro, vamos fazer os mergulhos. O primeiro ocupará a extensão da coluna. Dois. Portanto, serão necessárias duas colunas e usará o efeito de classe e, em telas menores e superiores, terá um pouco de inclinação. Então, vamos definir uma quantidade de 16 em uma tela menor ou superior Agora podemos ver lá o contêiner. Vamos fazer o segundo. Portanto, em uma tela menor e superior, essa terá um colspan Além disso, terá um efeito de vidro. Então vamos para o terceiro, que começará do lado esquerdo. Então, novamente, será igual à segunda tela, menor ou superior, uma envergadura, efeito de vidro, depois a quarta em tela pequena e acima, teremos uma extensão de coluna de duas E será basicamente igual ao primeiro, então podemos copiá-lo. E agora você verá como será o layout. Então, temos os contêineres esquerdo e direito, e este está pegando dois dos três trechos de comunicação e dando a volta na fileira inferior E teremos alguns toques adicionais e serão apenas para a tela do celular, porque também ocultaremos algumas dessas grades na tela do celular Este será apenas para celular, então vamos deixá-lo oculto por enquanto e voltaremos a ele mais tarde. Para o primeiro, podemos continuar. Então, vamos centralizá-lo verticalmente. Em seguida, vamos centralizá-lo também. Não, não precisamos de centralização horizontal. Vamos apenas colocar o texto à esquerda e pronto. Dentro, criaremos outro div que conterá nosso H dois, e também conterá o parágrafo que esse div terá Então, vou mostrar por que precisamos de largura máxima. Primeiro, podemos escrever um texto e eu posso otimizar seu site. E o parágrafo será Epsom por enquanto, e você pode ver o que está acontecendo na página, ela está alinhada ao lado esquerdo e não queremos isso Então, o que faremos e também não podemos centralizá-lo porque sim, ele está absorvendo o fluido. Então, o que faremos é definir uma largura máxima de 60% e a teremos assim. Agora também podemos estilizar o título dois. Isso significa que faremos o texto três em Excel, fonte, parafuso, margem para baixo e pronto Para a tecnologia de parágrafos, faremos o raio de texto, não sei, 200. Agora podemos passar para outra div que será essa, e haverá uma imagem Essa imagem terá uma fonte do notebook. Definiremos alguma largura em uma tela pequena para 200 pixels e, em tela média e superior, definiremos a largura de 500 pixels. Também precisamos definir lá, é claro, a altura. Mas talvez possamos deixar como está. Talvez possamos definir aí a posição absoluta. Sim, isso seria melhor. Além disso, você precisará ocultar o estouro porque o cartão está acabando Claro, vá até lá e ficará assim. Ok, então podemos passar para outro diff que novamente contém uma imagem, para que possamos simplesmente copiá-la. Vamos pegar e colocar lá. Imagem móvel, novamente, copiaremos esse estouro oculto e o colocaremos lá Vai ser assim. Então, para o oculto, vamos deixá-lo por enquanto. E para o último, o que podemos fazer, podemos simplesmente copiar o que temos lá e colá-lo em sua posição. E será isso. Agora podemos simplesmente brincar com um texto. Talvez também possamos fazer Mm hmm. 80%. Sim, acho que vou mudar de 60 a 80%. E então também podemos adicionar algum texto como este. Lá será o mesmo. Incrível. Como se duas linhas de texto estivessem bem. Acho que será para a seção de trabalho. E isso nos leva à próxima div. O que faremos é esconder essas duas imagens na tela do celular porque elas não parecem boas e não há como fazê-las parecer boas na tela do celular. É principalmente para a versão desktop. Então, vamos deixá-lo oculto e vamos fazê-lo na tela média e acima do bloco de exibição. Copie aí, faça o mesmo preenchimento para essa segunda div, para que fique assim E agora podemos codificar esse div que é apenas para fins móveis, e ele basicamente conectará essas duas imagens Então, vamos levar isso para lá e lá, colocaremos a tela média e, acima, a tela oculta. Além disso, você adicionará a posição relativa à posição absoluta que adicionaremos lá. Estouro oculto, para que não saia do nosso cartão. Também definimos uma altura fixa para o cartão que será de 200 pixels, e você também aplicará o efeito de classe que temos. E vai ficar assim. Agora vamos reproduzir um pouco as fotos. Então, primeiro, este, vamos simplesmente colocar lá. Não precisamos de tela média porque na tela média e superior, ela está oculta. primeira é que o peso é definido para 400 pixels e, em seguida, temos os 200 pixels. Na verdade, precisamos definir a gravação zero. E quando expandirmos esta página, vamos ver o que acontece. Sim, ficará escondido e haverá os elementos que tínhamos lá antes. Mas para a tela do celular, criaremos uma seção em que na verdade, haja as duas imagens em um cartão. O que eu faria é adicionar algumas roupas de cama e, na tela média e superior, eu a reiniciaria Então eu pegava, aplicava também na primeira diferença, salvava E vamos ver agora que parece melhor. E quando o expandimos, na verdade, vamos dar quatro tapinhas nas duas telas E eu acho que está tudo bem. A tela do celular como essa e a tela média e superior são assim. Temos essa seção e agora podemos passar para outra, e será a seção com nosso trabalho ou portfólio com nosso projeto. 16. 4portfolioAMSTERDAM: Vou para o componente de trabalho. Lá, precisaremos importar todas as imagens. Então, novamente, podemos partir daí e importar a imagem do projeto 1 do Assets Project one dot PNG, espero estar certo. Sim. E então vamos copiá-lo. Então é o Projeto dois, três, quatro, cinco e seis. Incrível. Agora, o que faremos é criar uma constante com as informações desse projeto e, em seguida, mapear essa constante em HTMOtext , para que não precisemos repetir nosso código várias vezes e teremos tudo em Então, vamos colocar nosso projeto constante . Então eu vou abrir isso lá. Vou colocar lá o ID. Essa será uma delas. A imagem será o Projeto Um. O título será Project one e o Live URL estará lá, ou nós o colocaremos lá mais tarde. Quer dizer, eu não vou colocá-lo lá, mas se você tiver algum, você pode colocá-lo lá. Ok, agora vamos copiar isso mais cinco vezes. Agora mude os números. Projeto 23, quatro, cinco, seis, dois, três, quatro, cinco, seis. Agora, temos a constante para que possamos ir para nossa div principal. E aí vamos primeiro dividi-lo ainda mais. Então, haverá uma primeira div que será com o primeiro título, meu trabalho E depois haverá o mapeamento do projeto e, por dentro, teremos outra div Então, abriremos os colchetes do carro e diremos que os projetos pontuam o projeto MAP E aí começaremos a mergulhar. E dentro dessa div, colocaremos uma imagem e outra div E nesta div, teremos um Spentag que manterá o título do projeto Depois dessa tecnologia de teste, teremos outro div que realmente conterá o URL da demonstração ao vivo Portanto, essa div precisará ter uma tag âncora dentro, e essa tag âncora redirecionará a pessoa para uma demonstração ao vivo Portanto, esse HRF seria o URL ao vivo do ponto do projeto. E, claro, haverá algo como f. O div principal terá novamente uma largura máxima de 1.200 pixels Também o centralizaremos. Vou usar duas moedas de grade. Teremos uma lacuna de quatro entre todos os itens. Usaremos a classe CSS de vidro que definimos no CSS de pontos de índice, e você também dirá que há algumas carícias Agora nós o temos lá, então podemos começar. E aí, no primeiro dia, também primeiro definiremos o texto. Então, vamos colocar o vão da coluna dois, e eu vou explicar o porquê, porque se não o colocarmos lá na coluna gasta dois, seria necessário que você pudesse ver lá. Você pode ver que existe a coisa do MW. E se não a colocarmos como extensão de coluna dois, ela estaria ao lado todas as outras cartas. Então, precisamos colocá-lo lá. Agora precisamos destacar meu trabalho, H 1, então, no texto quatro l, alguma margem para baixo, e também no texto, nota 300. Incrível. E agora podemos acessar as cartas em si. Bem, as cartas, primeiro, o div que está segurando, as cartas terão uma chave E essa chave será o ID do projeto. Em seguida, adicionaremos um nome de classe e será uma classe para tudo. Em seguida, usaremos essa transição de transformação e transformação. Porque queremos usar essa escala Her de um a cinco, e isso significa que quando passarmos o mouse sobre o cartão com o projeto, ele aumentará o tamanho interno Portanto, isso criará um bom efeito quando passarmos o mouse sobre o projeto Agora também precisamos definir a duração de quanto tempo ele aumentará o tamanho. Em seguida, precisaremos ocultar o estouro, para que nada fique sem nosso cartão Em seguida, um pouco de sombreamento para o cartão. E vamos tentar. Agora você pode ver como o efeito funciona. Então, está aumentando assim. O que vamos acrescentar agora é que, para uma imagem, precisaremos colocar uma fonte. Portanto, a fonte da imagem será project dot Image. Incrível. Definiremos algumas classes. Então, com a altura total até a altura máxima e o objeto a cobrir. Ótimo. Lá, continuamos após o sombreamento e colocaremos uma altura fixa que pode ter cerca de 200 pixels E essa div que está segurando o spenteg e a outra tecnologia dif surtirá um efeito onde a mostraremos e mostrará o botão para uma demonstração ao vivo Portanto, precisaremos adicionar um pouco de opacidade e assim por diante. Vamos começar fazendo o grupo passar o mouse e adicionar lá uma opacidade Vamos ver o que acontece agora. Sim, também precisaremos adicionar o grupo. E ao lado do grupo também é relativo, porque essa exibição com o botão de vida será de posição absoluta, então precisamos fazer isso. Então, podemos voltar ao rígido e, finalmente definir a opacidade para Vou adicionar um pouco de fundo. Vamos usar novamente, esses números que estou usando principalmente. Além disso, deixe-me definir o absoluto. Acho que precisaremos definir ainda mais valores para ver isso. Portanto, precisaremos passar o mouse ao lado da oposição e, em seguida, passaremos o mouse sobre ela, aumentando o oposto Aqui está o plano de fundo que usaremos agora: posição absoluta, ou seja, em relação a isso. Isso também é bom. Fazemos opacidade de transição. E duração 300, então não é instantânea. Depois disso, precisaremos definir também a inserção. E agora você pode ver que está funcionando. O zero inserido está ajustando o posicionamento do elemento Ok, agora podemos continuar com o estilo dessa tecnologia Spen e da segunda ou do mergulho interno Este, acabamos de definir. Para a tag Spen, vamos apenas definir texto para o Excel, também a partir do parafuso Como parece. Obviamente, precisamos definir também o texto como branco para que possamos até mesmo vê-lo. Parece melhor. E acho que será para a tecnologia Spen, precisaremos definir a posição flexível lá Então, depois da visão, vamos flexionar e justificar o centro de itens centrais, como está agora, Isso nos leva ao estilo da própria etiqueta âncora. Portanto, o div que o manterá não terá nenhum estilo. E a etiqueta âncora em si, também enviamos texto em branco para que possamos até mesmo vê-la Ótimo. Talvez precisemos nos refrescar melhor. Agora queremos transformá-lo em um botão de soma. Então, vamos fazer algo como fundo branco. Apostando cinco, apostando em dois, margem entre os dois primeiros. Na verdade, vamos fazer a margem inferior. Vamos fazer quatro. Vamos fazer um Excel arredondado. E vamos fazer também o parafuso de fonte. Então, isso será tudo para a seção de trabalho. E agora podemos passar para o contato e depois terminaremos com o rodapé Além disso, temos a seção de habilidades, mas acho que não vou usá-la no final. Eu queria criar algum elemento de estilo, mas no final, provavelmente podemos simplesmente excluí-lo Também podemos ir para Abdo J six, excluí-lo de lá, de lá, e 17. 5contactAMSTERDAM: Vamos terminar com o contato e um rodapé. Em seguida, para reagir, precisaremos importar também os ícones da biblioteca react icons AI. Lá, importaremos o LinkedIn de outono. Além disso, importaremos o Fil Git up e também o Instagram. A próxima coisa que faremos é que, nessa div principal, criaremos outra div que conterá o título dois e, em seguida, haverá outra div que conterá o E também será dividido em dois lados, à esquerda e à direita. No lado esquerdo, ele conterá os ícones que acabamos de importar. E no lado direito, ele manterá a forma real. Então, dentro dessa diferença no lado direito, também teremos o H dois que dirá algo como pronto para começar, talvez com e G. E abaixo haverá um formulário real Dentro deste formulário, teremos dois mergulhos. Primeiro lá, segundo lá. Dentro dessa imersão, teremos a primeira entrada. Então teremos uma segunda entrada e, em seguida, teremos uma terceira entrada, mas não será apenas uma área de texto, na verdade. E então, na próxima div, teremos uma mensagem de envio na parte inferior Claro, tudo terá aulas, mas eu só queria fazer um plano de como isso vai ficar, e aí estarão os ícones Mas os ícones, vamos envolvê-los na tecnologia Anchor. Eles nos redirecionarão para as páginas que definiremos lá, ou seja, Linkedin e assim por diante Então, teremos um pouco de HRF. Além disso, no interior, haverá um ícone, para que a IA seja vinculada. Adicionaremos um pouco de estilo ao ícone, e isso acontecerá mais duas vezes ali e ali IA falha no Git up e também a IA falha no Instagram Agora vamos preencher os nomes das classes, então definiremos uma largura fixa de 100 pixels. E deixe-me realmente mover a página para baixo para que possamos ver lá. Bem, ainda não, mas em breve poderemos estilizá-los e na parte inferior para ver colocá-los na parte inferior para ver os dois primeiros ícones Para o próximo, não precisaremos dele, ou quero dizer, para o último. Eu gosto disso. Agora você pode ver os ícones em nossa página lá. O que também fazemos com o disco que contém esses ícones é definir um épsilon, ele o centralizará verticalmente, mas ainda não agora, porque bem, está tecnicamente centralizado porque está ocupando toda a altura, mas E também, definiremos o texto roxo para, não sei, 800. Vamos torná-lo um pouco mais escuro e usar 900. Perfeito. Para esta div que contém esses ícones e o formulário, também usaremos o Flexbox layout and justify Incrível. Para o formulário em si, adicionaremos um pouco mais de estilo, então usaremos algum ser e talvez alguma largura de mistura Misture a largura de seis Excel. Vamos tentar. Mas vamos fazer isso. Obviamente, a largura máxima de 1.200 pixels que estamos usando para toda a nossa página Agora precisamos centralizá-lo. Agora vamos adicionar lá o efeito de classe. Definimos o Exo CSS no início e pronto. No dia seguinte, adicionaremos primeiro um texto para que possamos ver o que estamos estilizando, na verdade Vamos nos conectar e começar a trabalhar em coisas incríveis. Agora, nós realmente usaríamos alguma cor de texto. Então, vamos adicionar o texto cinza 500. Além disso, é claro, o tamanho do texto. Então, isso pode ser como o Tre Excel. Então, mesclando para baixo. O que mais? Do barco. E talvez vamos alterá-lo para cinco Excel e de uma tela menor ou média ou superior. E na tela base da tela do celular, eu gostaria do texto três do Excel. Incrível. Agora, para a tecnologia de parágrafos, também escreveremos em cinza, talvez 600, então é um pouco mais escuro Mas ainda precisamos ver isso. Então, vamos fazer 500. E texto em Excel. Bem, isso é melhor. Então, para o div que está contendo este, eu também usaria, novamente, o MMx Auto, mas precisamos fazer um máximo de With nele porque, caso contrário, não conseguiremos centralizá-lo Então, vamos fazer 600 pixels de Mx With. Incrível. Onde estamos agora, ok, centro de texto. Incrível. Agora você também vai usar lá algumas roupas de cama. Isso é melhor. E o que vem a seguir? No próximo, vamos estilizar. Bem, acho que vamos apenas adicionar o conteúdo do formulário de contato e estilizá-lo. Então eu vou lá e vou começar com o formulário de contato, e vou começar com este texto pronto para começar. Então aí, vou usar alguma margem na parte inferior novamente. Vou usar o texto do Excel, então ele aumenta o tamanho peso do texto com um parafuso, raio de texto 300 Incrível. Talvez um mais escuro. Isso é melhor. Para o formulário em si, precisaremos ter lá a ação que será com o endpoint do formulário Gt IO Vamos mudar isso para um endpoint real. Vamos para esta página, um login dogfdtiolash. Em seguida, nos inscreveremos, clique em Criar lá. Coloque aí algum nome e coloque aí o fuso horário, copie esse endpoint Então, agora também precisamos definir o método para postar. Em uma diferença abaixo, definiremos algum espaçamento vertical entre os elementos para quatro, e você também definirá uma margem inferior para Agora, para cada entrada, precisaremos definir o tipo. Então, o primeiro será texto, ID será nome, nome será nome e espaço reservado, colocaremos seu nome com três pontos E acho que vamos simplesmente copiá-lo e fazer o mesmo com as outras entradas Mas há ID de e-mail o nome também é e-mail e o espaço reservado é seu endereço de e-mail Para área de texto, o tipo é área de texto, não há ID. O nome é mensagem. As rotas iniciais são cinco. O espaço reservado é sua mensagem. E acho que podemos mudar para nomes de classes para essas entradas. A primeira entrada, todos nós configuramos com duas cheias. Agora vamos fazer borda cinza, 400, pouco de preenchimento vertical, outro horizontal . E o que Hum, eu não adicionei a borda. Eu coloquei a borda em cinza, mas não adicionei. Eu definitivamente deveria fazer isso. Que tal alguns rádios de fronteira? Parece melhor. Está bem? Podemos basicamente copiá-lo para todas as outras entradas? Acho que podemos. Vamos ver como fica. Isso é bom. Então, agora vamos discar o botão e será para a seção de contato. Eu vou até esse botão. Vou usar o centro de texto. Não podemos ver, então vou usar um pouco de cor. Deixe-me usar a cor do próprio botão. Então, e antes disso, o botão precisa ser do tipo enviar, pois ele enviará a mensagem E, novamente, ele vai ficar cheio. Será roxo, não sei, 500, talvez um mais escuro , 700 parece melhor Em seguida, usaremos um pouco de preenchimento x ou preenchimento horizontal até Claro, precisamos usar um pouco de xwid e Mm What about large? E quanto ao médio? Ok, isso é melhor. Colocando é em seis, depois definiremos o preenchimento vertical em três e faremos um arredondamento médio Ok, talvez possamos fazer o Excel em torno disso. Isso parece melhor. Então, acho que será isso para nossa seção de contatos e podemos passar para o rodapé 18. 6footerAMSTERDAM: E o Putter será um trabalho rápido para nós. Então, vamos lá. Para o Futer nem precisamos importar nada É basicamente apenas a tecnologia da Spen, e abaixo está um parágrafo técnico, John Doe, Na tecnologia Spen, usaremos algo como talvez J Doe, algo assim Então, na verdade, você pode simplesmente fazer a tecnologia inovadora deles, fazer a hashtag I don't know web development 2024 Claro, agora precisamos estilizá-lo um pouco. Então, novamente, vamos usar a largura máxima de 1.200 pixels. Vamos usar algumas roupas de cama. Vamos usar o layout de caixa flexível, para que possamos justificar Isso significa que teremos um espaçamento uniforme entre esses elementos e o centralizaremos com o MMC Auto Agora nós o temos lá, mas você não pode vê-lo. Precisamos atualizar a cor do texto para o texto grave 4500. Faça o mesmo com a tecnologia de parágrafos. 19. 7finalFixesAMSTERDÃO: A página está quase pronta. Devemos fazer essa navegação funcionar porque acho que esqueci de adicionar todos os IDs às seções Então, vamos fazer isso na verdade agora. Contato, temos ID, contato. Vamos copiá-lo. Vá trabalhar. Identifique o trabalho, fale, identifique, vá até o herói. Lá, adicionaremos o ID hero. Vamos acessar a barra de navegação e identificar o problema agora. Não podemos usar letras maiúsculas lá, então H. Então, vamos mudar para letras normais para casa sobre portfólio e contato. Salve isso. Agora podemos experimentá-lo. Seção inicial. Sobre a seção. Seção de contato. E a seção do portfólio não tem nome. Portfólio, mas tem nome. Seção de trabalho e estamos nomeando-a como um portfólio em nossa barra de navegação, o que provavelmente pode ser confuso, mas acho que vou deixar assim Vamos mudar isso para uma tela de dispositivo móvel. Portanto, precisamos ocultar o transbordamento da seção de heróis Em nossa seção de heróis, adicionaremos overflow hidden E também vamos estilizar um pouco melhor a seção do herói em si para a tela do celular, eu acho, ou minha ideia é que, para o notebook, vamos deixá-la oculta e, na tela média ou superior, vamos configurá-la para bloquear. Portanto, é mais legível. Você usa esse efeito de vidro na tela média e superior. Para nossa foto ou foto de perfil, definiremos algo com mais de 200 pixels, vamos definir 250 a partir da média ou superior. E do meio para cima, abaixo do zero, mas caso contrário, na tela do celular, vamos ver o que ele pode fazer. 50 talvez. Não, eu não gosto disso. 140, 190. OK. Isso é melhor, eu acho. Na verdade, eu gosto disso. Então, o que vou fazer mais é expandir esse texto. Então, vou até lá e definirei a maior largura máxima. Então, na verdade, eu o tenho lá. Eu não vi. Defina 300 pixels e defina lá. Mamãe, hmm. Texto pequeno e use 250 pixels. 280 pixels. E que tal um pouco de forro Bedding Four? Bem, isso só seria bom se fizéssemos o painel de preenchimento na tela média e superior e fizéssemos o mesmo também com este cabeçalho, porque ele precisa estar Ok, então isso vai acontecer em tela média e superior. E isso acontecerá na tela média e superior e na margem até a segunda parte inferior ou, na verdade, vamos apenas seis e uma tela média ou superior, vamos redefini-la. Vamos abrir isso. Precisaremos acessar a página do Herói. Então, vamos adicionar aí o índice z lá. Agora, quando o abrirmos, ele funcionará. E bem, podemos deixar lá a imagem ou podemos escondê-la também atrás da barra numérica , porque então ela não gostaria que estivesse quebrada Então, vamos editar também lá. Agora, o que mais precisamos consertar aí? Então, precisamos ir para a seção de heróis e ocultar o transbordamento. Vamos aplicar somente em uma tela de celular, mas em tela média e superior, visível? Assim, precisamos resolver o problema de Nagbar, em que não podemos clicar no link porque ele está atrás dessa seção de heróis que tem o vidro da mesma classe, e precisamos ir até essa seção de heróis A primeira coisa que faremos é que, para o copo que estamos removendo, o colocaremos de volta. E para o índice CSS, colocaremos lá, copiaremos esse vidro, faremos navegação por classes removeremos esse filtro de fundo, salvaremos O que acontecerá agora é que precisamos ir até Navbar, trocar essa navegação de vidro por vidro, e isso não ficará embaçado Então, agora a navegação está funcionando. O que faremos é acessar a Navbar como estamos agora e também adicionar desfoque de fundo do Excel a partir da tela média e acima. Agora, se aumentarmos o tamanho da página, ela ficará desfocada novamente Portanto, resolveremos nosso problema e, finalmente, isso será para o design da página. Agora, vamos testar tudo. Então aí está nossa página. Primeiro, vamos testar a navegação que funciona. Vamos agora verificar o design da tela do celular. E essa roda de navegação mudou de fixa também de fixa para absoluta assim. 20. 1setupINTER: Nesta sessão, criaremos este site de portfólio pessoal ReactJS e Tailwind CSS Temos um layout de grade na seção de heróis, navegação suave, seção de projeto, que alterna o projeto dependendo de qual você selecionar, Skoll e uma seção de contato com formulário de contato ativo. E, claro, é totalmente responsivo. Vamos começar executando todos os comandos que temos no tailwincss.com Abriremos um terminal, verifique se estamos em nossa pasta. E para não deixar esse comando criar outra pasta, vamos lá instantaneamente e, em vez do meu projeto, colocaremos lá o ponto, o Head enter, e ele criará um projeto diretamente na pasta em que estamos. Então, precisamos fazer um projeto C porque já estamos nele. Executaremos outro comando para a instalação do tailwind com CSS e prefixador automático Agora, com outro comando, inicializaremos o vento de cauda Agora vamos entrar no arquivo de configuração. Cole lá essas coisas, e agora iremos lá no índice CSS e colaremos os detalhes nas diretivas Agora, com o NPM run Def, iniciaremos nossa página no Local Antes de começarmos, vamos também abrir outro terminal e lá fazer NPM, ícones de reação, espaço, reação, rolagem e animação do tipo space react Vou movê-lo para que você possa vê-lo. Agora, instalaremos todas essas três bibliotecas que usaremos e podemos começar codificando a barra de navegação Então, primeiro, o que faremos é criar uma nova pasta com componentes. Em seguida, criaremos a barra Now. Em seguida, usaremos o trecho, entraremos em Abdo Nós podemos fazer tudo isso, isso e isso. E lá faremos uma barra com Enter e ela será importada. Então, agora, depois de salvá-lo, ele estará em nossa página. Se você quiser o trecho para exportação, estou usando essa extensão ES seven e, definitivamente, se você ainda não o fez, instale a extensão intellisense, e é essa 21. 2navbarINTERs: Na barra de navegação, começaremos com a importação de seus ícones Esboço de IA, feche com o menu AI Outline, vamos usá-lo para navegação ou para os botões de menu na tela do celular Além disso, precisamos usar o estado de uso Começaremos definindo as variáveis de estado, navegação e a navegação definida. O estado padrão será falso. Em seguida, criaremos nossa função navegação e esta definirá a navegação para um valor diferente Então, chamaremos isso ao clicar em um de nossos elementos com esses botões. Então, aí podemos começar com a div principal. E gostaríamos de ter esse peso máximo. Então, vamos usar esses 1.200 pixels. Além disso, podemos definir alguns antecedentes. Por enquanto, vou usar o fundo vermelho 200, para que possamos ver onde está a barra de navegação. Precisamos fazer alguma coisa lá. Agora também gostaríamos de definir lá alguma altura 024. Obviamente, excluiremos essa cor de fundo posteriormente. Agora é só para vermos onde está nossa navegação e podemos estilizá-la melhor. Eu misturo Ato, depois usaremos o layout do Flexbook e centralizaremos os itens com justificação entre e os itens para Então, isso o centralizará horizontalmente e este o centralizará verticalmente Em seguida, usaremos também algumas roupas de cama. Na verdade, não precisamos de roupas de cama quando definimos a largura máxima, o que também ficará bem E podemos definir lá algum tamanho de texto. O tamanho do pótex talvez sim. Vamos usar texto grande por enquanto. Vamos continuar com o H que manterá nosso nome, então vou usar o RJ Do Para este, podemos estilizar o texto em três Excel, fonte para ambos, e não vamos usar a margem do Math agora. Basicamente, por que eu fiz o TextLarg deles quando estou configurando o texto no Excel , porque não preciso definir o texto grande para todos os outros itens de menu que serão mantidos na lista não ordenada Vamos começar com uma lista de pedidos dentro. Faremos um item da lista. E dentro desse item da lista, faremos um link. E esse link será do Wreck Scroll que instalamos anteriormente Portanto, esse link é basicamente uma tecnologia âncora, mas começa com a navegação suave por rolagem Então, em vez de href, faremos lá também, e aí faremos cerca ou talvez seja na verdade com a barra Não tenho certeza agora, mas vamos testá-lo mais tarde e veremos. Para o item da lista, faremos o preenchimento até cinco e pronto Agora, copiaremos quantos itens da lista precisarmos. Precisarei da seção A, seção de experiência e do contato. Em seguida, dentro do texto do link, colocarei os nomes das seções. Então, sobre a experiência. Agradável. E eu vou continuar, na verdade, para o contato. Também precisarei fazer aulas lá, pois gostaríamos que esse contato olhasse algum botão. Vou adicionar um nome de classe e, nesse nome de classe, colocarei alguns shows de roupa de cama e Bedding Y em volta do Excel e , por enquanto, caneta de fundo 300 E também precisamos colocar lá Oh, layout flexbox. Agradável. E na navegação móvel, como estamos convencidos, na quarta, ela ficará oculta E em tela média e superior, ele será exibido com display flex Agora vamos adicionar o molho. Dentro desse mergulho, faremos o operador Turner. Portanto, com base no valor de uma navegação que temos lá, padrão é falso, executaremos a posição verdadeira ou a posição falsa. E como o padrão é falso, primeiro executaremos este Então, será o menu AI Outline porque queremos mostrar lá o ícone de navegação do Burger, que é como este Em seguida, na posição verdadeira, depois de clicarmos no menu, ele mostrará a cruz. Então, quando clicarmos nele, ele mostrará novamente o menu, então ele será alternado sempre que o usuário clicar neste. Então, menu Outline Digamos que haja algum tamanho. Vamos usar 20. Outros 120. Agora vamos tê-lo lá. Mas é claro que não queremos tê-lo no desktop. Isso deve estar no celular, portanto, nesta div, adicionaremos um bloco de exibição da tela do celular na versão média e superior, e o ocultaremos E vamos usar um pouco de índice de histórico 40. Além disso, é claro, para que isso funcione, precisamos adicionar a função nclick, que definimos lá Então, essa alça de navegação, vamos colocar lá neste clique. Agora vamos salvá-lo e agora ele funcionará. Agora vamos adicionar div e dentro dessa div, basicamente copiaremos essa lista não ordenada Precisamos fazer algumas atualizações nele. Portanto, a primeira atualização é que isso não terá nenhuma bandeira oculta Ele terá apenas algumas roupas de cama, e podemos aumentar o texto para ele Além disso, o que será importante é criar um nome de classe para essa dif e, nesse nome de classe, definiremos novamente um índice mais alto Também definiremos o texto como cinza 300. Vamos consertá-lo. Então, agora precisamos atribuí-la para deixar zero e zero superior, e a altura estará cheia, e para ela, podemos definir algo como 60%. Vamos mudar a visualização para a tela Mable, na verdade, para que possamos ver e agora podemos continuar adicionando uma borda Também na borda direita, borda direita, cinza 900. Em seguida, adicionaremos um pouco de fundo. Então, vamos usar um pouco de cor cinza. Estou usando normalmente como plano de fundo, 23, 23, 23, mas aí podemos torná-lo um pouco mais escuro assim OK. E continuaremos com a entrada de Ps e a duração de 500. Então, deslizamos suavemente depois de clicarmos no ícone do menu, que é este. Mas agora, depois de clicarmos no ícone, nada está acontecendo, e é porque não temos lá o operador ternário Então, o que faremos é adicionar esses colchetes E no início, faremos um ponto de interrogação de navegação e o executaremos primeiro por meio da posição. Então, vamos apenas colá-lo lá. E então podemos começar em outra linha. E aí vamos colocar uma posição de força. Portanto, no caso de posição de força, faremos essa correção à esquerda em -100% Agora, precisamos realmente que o fechamento esteja aí. Então, agora vamos salvá-lo. E agora, depois de clicarmos nele, funcionará assim. Portanto, certifique-se de ter escrito corretamente o operador turner também para essa diferença Então esse é o di, e há um operador de torneiro. E com base no valor da variável de estado de navegação, estamos alterando esses ícones e também mostrando esses itens de menu na tela do celular. Também sentimos falta do nome ou do logotipo. Então, vamos colocá-lo lá. Texto em si em ambos, e vamos em uma margem como essa. Agora veja como fica, talvez o que também façamos é adicionar lá colocando x quatro e, em tela média ou superior, redefiniremos para zero porque só precisamos disso em uma tela de celular. Agora parece melhor. Agora podemos remover o plano de fundo. E eu vejo um erro de digitação lá, então, é claro, é um esboço final. Agora podemos testá-lo. Então, funciona bem. Agora, o que faremos é que, para esse contato, mudaremos esse plano de fundo para a cor primária do plano de fundo e também para a cor primária do plano de fundo. Nós vamos salvá-lo. E agora iremos para as pastas, e lá entraremos no Índice CSS e colaremos o CSS do ponto de índice. Eu vou te fornecer no Git. Basicamente eu edito a fonte das fontes do Google depois um plano de fundo. Em seguida, defino a cor primária. Agora, se você quiser apenas mudar uma cor primária para outra diferente, você a mudará lá e ela será aplicada à página de parede. Em seguida, coloquei lá algum texto para o título dois e o parágrafo, e também adicionei esse efeito de vidro. Então, sempre que eu usar esse teclado de vidro, esse efeito será aplicado ao elemento em que eu o configurarei, e eu o usarei em alguns cartões na minha página. Vamos continuar agora com a criação da seção de heróis. Então, lá vamos criar o Hero J six. Faça uma exportação, entre em Eb Do J six e coloque lá. Agora podemos continuar na seção de heróis. A propósito, também vejo que temos problemas em nossa página. Então, vamos para a Navbar, e aí precisamos usar o texto de grau 200. Agora está melhor. 22. 3heroINTER: Página do herói, eu fiz essas importações. Primeiro, o que você precisa fazer é pegar os ativos, caso queira usar os meus do meu Github, eu fornecerei a descrição, os carregarei e, depois de carregar, eu terei a foto do perfil Eu tenho os três ícones do react icons, biblioteca de IA que instalamos anteriormente. Então eu tenho a animação de tipo deles, da animação de tipo react, biblioteca que também instalamos, e de outros ícones de reação, tenho todos esses ícones para o JavaScript react e assim por diante. Agora, depois de fazer essas importações, podemos passar para a seção de heróis em si. Lá começaremos no Div principal com peso máximo de 1.200 pixels, semelhante ao que fizemos no Navbar ou o mesmo Centralize-o. Em seguida, use um layout de grade porque teremos três colunas próximas uma da outra, mas ainda na tela média e acima, usaremos as colunas da grade oito porque gostaríamos que uma coluna ocupasse mais colunas. E se você não entender o que estou dizendo, você verá em um minuto. Agora, vamos usar um espaço entre eles, pouco de pedal e, na tela média e superior, reiniciaremos a roupa de cama Além disso, vamos definir o ID para esta seção, para que seja o ID em casa e possamos continuar. Então, primeiro, faremos o uh Di Di. E essa div será para nosso nome ou foto e nome. Para esta div, faremos nome da classe com também um layout de grade, serão as duas colunas da grade E em tela média e superior, usaremos as colunas de dez a cinco. E era disso que eu estava falando. Porque atualmente temos cerca de oito colunas e, na tela média acima, essa div ocupará 85 dessas oito colunas Então, você também verá isso daqui a pouco, se ainda entender. Agora, o que vamos adicionar é uma imagem. Para essa imagem, também adicionaremos o nome da classe, mas primeiro vamos adicionar a imagem, ou seja, a foto do perfil. Nós o temos lá. Deixe-me movê-lo assim. E também uma foto de perfil estranha. Então, o que vamos definir é alguma largura. Vamos usar 800 pixels, uma mistura ou uma altura automática, ou talvez você nem precise dela, na verdade. Vamos configurá-lo por enquanto assim. Também para esta div, vamos adicionar nosso efeito de vidro. E abaixo dessa imagem, adicionaremos outra diferença porque gostaríamos que essa div contivesse a animação do tipo reac, nosso nome e nossa experiência Então, dentro desta div, vou fazer margem automática MI para a esquerda oito e flexionar a coluna de direção Dentro. Vou colocar o parágrafo. Olá, sou John Doe. Preciso alterar as cores do texto, então vamos definir a nota 200 do texto. Lá, podemos começar definindo os diferentes tamanhos de texto. Então, vamos usar dois Excel, médio e superior para Excel, depois um parafuso de fonte, OK Também brincaremos com os tamanhos um pouco mais tarde. Vamos fazer tecnologia inovadora. Então, o próximo elemento começará em outra linha e chamaremos isso de animação de tipo. Nesse tipo de animação, faremos a sequência e, na sequência, usaremos a duração do desenvolvedor front-end para 1.000 web designers. Na verdade, precisamos de uma duração de cômoda para 1.000 e uma duração de consultor também para 1.000 Abaixo disso, colocaremos um invólucro e ele será configurado para abranger Então, isso usará span wrap. E se você verificar R CSS, para amplitude, definimos aí a cor transparente do gradiente linear Então, vamos definir a velocidade, então eu vou definir 50, e vou repetir isso até o infinito. Então, ele funcionará em um ciclo de loop infinito. Abaixo, temos o encerramento da tecnologia de parágrafos e, mesmo abaixo, podemos começar com a próxima, com mais de cinco anos de experiência. Vamos colocar o nome da nossa turma. Então, em uma tela móvel, definiremos o texto Excel, texto médio, Excel em árvore, talvez a semibt da fonte e o texto cinza 400, algo um pouco mais escuro do que o texto que temos E mesmo abaixo desse texto, colocaremos um botão com o download do CV. Vamos colocar lá um estilo. Então, vamos mesclar de cima para baixo, fazer ping e emparelhar para Y. Texto muito grande, fonte em negrito, texto em branco, na verdade, plano de fundo primário, colorido e Excel arredondado Então, agora temos um botão como esse. Agora atualize esse bit. Então, atualmente, este é nosso primeiro cartão. Agora abaixo, continuaremos com outros dois. Então, vamos criar um mergulho lá. Dentro desta div, colocaremos um layout de grade em tela média Faremos a extensão de três colunas e obteremos até seis. Então, com isso, garantiremos que a primeira dif, em tela média, extensão da coluna cinco dessa oito e a segunda 13 dessa oito Vamos continuar dentro dessa div. Dentro desse div, começaremos com outro diff que conterá os ícones e o texto Então, vamos voltar para lá, vamos fazer o texto cinco, o Excel, a roupa de cama e também um efeito de vidro E lá dentro, faremos um parágrafo com Mitch Stack. Lá, colocaremos texto de nota 200, texto Excel, um bot, margem na parte inferior e texto no centro. E abaixo deste parágrafo, colocaremos todos os ícones. Mas nós os temos bem próximos um do outro, vamos fazer outra div, usar o layout da grade, definir as colunas da grade para quatro Isso significa que depois de quatro ícones, ele irá para outra linha e definirá uma lacuna. Agora, dentro desta div, colocaremos os ícones e, para cada ícone, usarei a cor até 500 Para os quatro primeiros, vou usar, na verdade, 600. Podemos brincar um pouco com ele para que as cores fiquem bonitas. Agora vamos adicionar outra div. Então, abaixo deste, você criará um div. Dentro deste, adicionaremos os ícones Vinculados. Então preencha, levante-se. Linked in e também Instagram. Vamos colocar o layout do pluxbx, centralizá-los e o efeito Então, agora em nossa página, nós o temos lá. Vamos apenas adicionar lá também o cinza Plex, 600 ou 500. Vamos tentar 600, parece melhor. Também precisamos desse tamanho de texto, então vamos usar na verdade sete Excel, talvez seis. Vamos verificar a página. E atualmente, parece assim. Talvez aumentemos a diferença entre eles, então usaremos a diferença quatro, e isso parece melhor. 23. Projeto 3: portfólio: Agora podemos passar para o lado do portfólio. Então, aí está o novo portfólio de arquivos seis. Lá vamos importá-lo. E no portfólio, primeiro precisamos fazer as importações. Então, vou importar o estado de uso, todas as imagens do projeto, imagem da seta e também o ícone do Git up Então não repita nosso código. Vamos criar uma constante com projetos. E lá dentro, colocaremos lá o projeto em si. Portanto, a imagem do primeiro projeto será o Projeto um, título do primeiro projeto será o Projeto um, descrição será a interface do usuário para desenvolvimento de front-end usando R e os links serão para o site. Não vou ter o link e não vou me levantar. E eu também não vou ter o link, mas coloque aí o seu. Agora, faça isso para quantos projetos você gostaria de ter lá. Então eu vou ter lá seis projetos. Então, ficará assim. Agora podemos passar a codificar o portfólio em si. Primeiro, usarei a variável de estado para definir o projeto atual. Portanto, o projeto atual constante é definido como o projeto atual. Por padrão, haverá zero. E então vamos para o retorno, e aí começaremos com o homem Div Então, MI seis, largura máxima, como estamos acostumados a 1.200 pixels, centralize-a, faça um layout de grade, a grade vá para oito, além alguma lacuna entre eles e também o portfólio de ID Dentro dessa div, criaremos outra com a seleção do projeto Então, podemos colocá-lo lá, selecionar o projeto. E também, vamos colocar lá a flecha. Então seta com o nome da classe, absoluta com 50 pixels, cima para dez e da direita para 12. Então, isso significa que para essa div principal ou para essa div que contém essa imagem, precisamos definir a posição relativa e também definir o índice para dez, colunas 1023, layout da grade, centralizaremos os itens, as colunas da grade um, e isso deve ser agora Agora, para o parágrafo, definiremos a nota 200 do texto, p dois parafusos e texto para o Excel e menos a inclinação Y seis Eu também farei isso por enquanto, mas você não precisa fazer isso. Altura até Não sei, 90 view pothet Porque eu quero rolar até esta seção, atualmente, você não será capaz de vê-la Agora você está, então agora está melhor. Então, atualmente, é claro, isso não está certo, mas será corrigido em breve. Dentro deste prato, adicionaremos uma lista não ordenada. E vamos usar as aulas lá primeiro. Então, margem para a esquerda. Layout de caixa X, linha flexível e, em tela média e superior, usaremos o Flex Colum Portanto, a seleção dos itens será em tela média e superior, abaixo um do outro e na tela do celular, um ao lado do outro. Em seguida, algum espaço entre eles, envoltório flexível. Agora vamos centralizá-lo. Na tela média e superior, você usará alguma lacuna, algum espaço de Y a dois. Portanto, temos alguns espaçamentos entre eles. Em tela média, aumentaremos para quatro e definiremos o texto dois em Excel. Você pode ver lá. Agora, nesta lista não ordenada, agora vamos mapear ou iterar sobre essa constante que criamos lá com o projeto Então, vamos fazer o mapa de pontos do projeto, o índice do projeto, e aí podemos começar a escrever os itens da lista. Então, dentro desses itens da lista, agora podemos criar o título desse projeto, e isso mudará com base no projeto pelo qual passaremos. Projeto 65, quatro, três, dois e um. Vamos começar com o estilo ou, na verdade, primeiro, usaremos a tecla de seta, que será o índice do item da lista Em seguida, para a função onclick, definiremos uma função de seta para definir o índice atual do projeto E vamos definir lá também o nome da classe, o que podemos fazer na verdade em outra linha. E para esse nome de classe, definiremos o texto do ponteiro do cursor como cinza 300 E agora nós realmente precisamos fazer alguma mágica lá. Então, vamos fazer uma barra invertida. Também existe porque precisamos usar um operador Turner. Então, lá faremos o sinal de $1 com esses colchetes, lá faremos o projeto atual igual ao índice e ao operador Turner Então, caso isso seja verdade, definiremos o projeto ativo e, caso seja falso, não definiremos nada. Depois, temos o título do projeto e cometemos alguns erros de digitação Então, onde está o erro de digitação e ele não está fechando o baralho do item da lista, então agora está tudo bem Além disso, neste projeto ativo, se formos para o CSS de pontos de índice, precisamos editá-lo. Portanto, a ideia é que sempre que clicarmos no projeto, obtenhamos alguma classe ativa. Então, esse projeto ativo, agora vamos defini-lo. Portanto, o projeto ativo em si terá uma posição relativa, e agora você fará mágica com o projeto ativo antes e projeto ativo depois, e aí definiremos o conteúdo para um valor vazio, a posição à esquerda absoluta para zero, largura 100%, altura para quatro pixels, cor de fundo para um pouco de rosa. Vou encontrar os códigos mais tarde e os dois inferiores menos seis pixels Você o verá depois de clicarmos no projeto. E também um projeto ativo após duas cores de fundo, e haverá um pouco de amarelo. Novamente, precisarei encontrar o código e, com 80% de largura e parte inferior, dois menos dez pixels Agora, deixe-me encontrar os valores de código corretos para as cores rosa e amarelo. Então, vou usar esses dois. Agora você pode ver em nossa página que ele foi sublinhado para o projeto ativo Então é isso que queríamos. Agora voltamos ao portfólio, na verdade o fechamos acidentalmente e podemos continuar criando a prévia profunda do projeto Então, abaixo dessa div, começaremos outra comparação com algum índice Além do efeito de vidro, temos índice de CSS e colunas de caneta a cinco. Bom. Lá dentro, criaremos uma div Nesta div, teremos uma imagem. Vamos estilizar o dF. Então, com o filme, também com a altura AD e para a imagem, definiremos os projetos, a imagem pontilhada do projeto atual Bom. Temos o primeiro selecionado. Podemos definir todos eles para o título atual do ponto do projeto. E agora, em outra linha, definiremos um nome de classe, e haverá da altura total até o objeto completo para cobrir em volta dele, largo e com a margem inferior. Incrível. Agora, abaixo dessa imagem, na verdade, faremos isso em outra div Então, abaixo dessa div, faremos outra div. Vamos colocar lá algumas roupas de cama, você pode picar seis? Lá, escrevemos um parágrafo e, dentro deste parágrafo, faremos projetos, na verdade, não pontuaremos ainda, concederemos a descrição de pontos do projeto. E podemos copiá-lo por enquanto, e depois o estilo primeiro Então, usaremos texto de nota 200 e margem ou margem vertical até quatro. Agora, abaixo deste parágrafo, teremos um di. Este dia terá um layout flexbox e Space x24, e também terá texto âncora onde podemos copiar esses valores e realmente fazê-los E esses textos âncora serão com referência a Links dot site e Link dot Git up Então, ele levará o usuário ao site e levantará o que ele configurou lá. Precisamos adicionar um pouco de estilo para isso. Além disso, precisamos fazer isso assim. E isso será como HRF. E haverá IA preenchendo o Git up e haverá visualização do site OK. Agora podemos passar para o estilo. Então, vamos colocá-lo em outra linha, nome da classe, e usaremos preenchimento x24, preenchimento branco para dois, tela de fundo 600, texto cinza 200, arredondado Nela, mudaremos a lista de fundo para 700 e a duração da transição para 300 Agora podemos copiar isso, fazer a mesma coisa lá. Salve isso. Agora podemos verificar isso. Claro, essa referência. Não estamos usando aspas neste caso. O que nos ajudou desde o início agora precisamos excluí-lo porque está arruinando a página Então, acho que vou precisar mover isso para cima para que possamos ver corretamente. Mas antes, vou abrir apenas a página. Então, agora, podemos testá-lo, ir para outro projeto e está funcionando conforme o esperado. Então, acho que ainda vou guardá-lo em algum lugar lá. Agora podemos ir para a seção de contato. 24. Projeto 3: contato: Vamos criar lá em componentes, entre em contato com o ponto JS six, e você sabe o que? Na verdade, vamos criar até mesmo cerca de J six e footer.j6. Nós o preparamos e podemos simplesmente codificá-lo. Em seguida, usaremos o A ou contato. Podemos usar o contato e trocá-lo mais tarde, se não quisermos. Na verdade, mais uma coisa que precisamos fazer é exportar lá sobre contato e rodapé, precisamos usar o trecho Agora podemos importá-lo sobre e Potter, agora esse é o layout completo da página Então, só precisamos citar esse contato sobre Footer. Podemos fechar tudo lá e abrir o contato sobre o rodapé, para que tenhamos as coisas preparadas. Vamos começar com o contato. Então, em contato, importaremos o preenchimento AI vinculado e o preenchimento AI get up. OK. Agradável. Então, podemos começar com a div principal, que será com a roupa de cama X dois, seis, peso máximo de 1.200 pixels, Mx, automático, layout de grade Usaremos a grade Colum dois e centralizaremos os itens. Além disso, definiremos seu ID de contato. Lá dentro, faremos uma primeira div. E para esta div, criaremos creme de cabeçalho com let's connect E, na verdade, podemos colocar essa conexão em um Spenek. Isso significa que esse disco terá nota de texto 300, marcando Y dois, três, em algum título Este título três terá texto para Excel em semi parafuso e marchará para baixo Agora abaixo, faremos o parágrafo. Lá dentro, vamos colocar um texto. Para o nome da classe, faremos um texto para justificar e levar a sete Então eu coloquei lá um pouco de Lori Mpsum para o teste para que possamos ver Agora podemos ver se, idealmente, o texto justifica o que acontecerá. As linhas não terminarão ao mesmo tempo ou no mesmo lugar. E com sete à frente, estamos diminuindo um pouco a altura da linha Agora vamos fazer lá algumas estatísticas. Então, vamos realmente fazer mais uma div. Dentro desta div, colocaremos essa que acabamos de criar E abaixo, começaremos com um di e, dentro, colocaremos as estatísticas. Primeiro, vamos fazer a aula lá. Então, faça o layout do flexbox, coloque a margem no topo, os itens no centro e chegue a sete Lá, começaremos com os divs, mas os copiaremos, então não se preocupe Na verdade, não vamos nos revestir muito. Agora. Dentro desta divisão, faremos o título três com 11 e com a tecnologia Spen Dentro da tecnologia Spent, colocaremos o sinal de mais. Agora, nesta div, adicionaremos alguns planos de fundo Então, vamos usar novamente este, mas um pouco mais escuro Talvez algo assim. E vamos mudar a opacidade para 40. Em seguida, adicionaremos algumas roupas de cama e as arredondaremos. Você ainda não consegue ver, mas agora vamos ver, porque vamos adicionar isso. Bem, começaremos com a tela do celular, então o texto para Excel em manuba média usaremos texto para Excel em semirparafuso e texto até a Agora também adicionaremos o parágrafo com projetos. Também podemos colocar isso no Spenteg e o nome da classe será um excesso de texto e em uma base de texto média como Na verdade, não tenho certeza se queremos o texto de gastos lá, talvez. Vamos excluí-los. Ok, e também o que parece atualmente. Acho que precisamos adicionar a nota 200 do texto, na verdade. OK. Agora vamos analisar essa diferença. Copie mais duas vezes. Eu farei isso em vez de mais de 115 anos de experiência e 30 pré-clientes. Desculpe, será assim. E agora você encontrará a dif correta que está abaixo desta E aí podemos começar com o formulário real do e-mail. Então, no formulário, colocaremos o nome da classe, é claro, mas mesmo antes de colocarmos uma ação, colocaremos posteriormente o endpoint Mostrarei depois de criarmos ou concluirmos este formulário, mostrarei como adicionar o endpoint e fazer com que esse formulário realmente funcione O método será post e agora o nome da classe. Então, para o nome da turma, teremos no peso máximo de seis xl, algumas roupas de cama, eu sei, tela média e acima, faremos apostas 12 O ID será para formar. E podemos começar com o primeiro parágrafo. Na verdade, temos lá. Vamos nos conectar, para que não façamos isso lá. Então, vamos começar com a entrada imediatamente. Dentro dessa entrada, podemos fazer com que seja assim e tipo de texto, ID do nome, espaço reservado para seu nome, nome para nome e nome da classe para a margem inferior com a mídia completa e arredondada Vamos adicionar também uma borda. Vamos adicionar a cor da borda a cinza 400, PY a dois, preenchimento à esquerda a dois preenchimento à direita até quatro. OK. Agora podemos pegar essa entrada e apenas alterar os valores. Então, o segundo será por e-mail. Na verdade, o terceiro será para a área de texto. Vamos mudar o segundo agora, segundo, o tipo será e-mail, ID também será e-mail, colocado será seu e-mail, nome será e-mail. É isso mesmo. E os textos serão do nome. Área de texto. ID, a mesma sua mensagem. Além disso, precisamos definir suas moedas para 30, digamos, linhas para quatro. Não precisamos do nome lá, e o nome da classe pode permanecer *** Além disso, o que teremos lá é um botão. Esse botão será do tipo enviar, e os nomes das classes estarão com B Y completo dois, três, médio arredondado, texto cinza, 100, um semi bot Vamos usar o texto do Excel e a cor primária do plano de fundo. E mande mensagem. Então, talvez vamos mudar esse 2000. Então, agora vamos verificar como colocar essa ação funcional ou o ponto final de nossa ação Então, na verdade, quando alguém preencher este formulário, receberemos o e-mail. Vamos para esta página, dotgtfm dotIO slash Login. Em seguida, vamos nos inscrever, clicar em Criar lá, colocar um nome e colocar o fuso horário, copiar esse endpoint e colá-lo lá. 25. Projeto 3: Sobre: Agora vamos passar para a seção sobre. Em seguida, na seção Sobre, primeiro importaremos esses dois projetos ou as imagens do projeto. Em seguida, importaremos esses ícones. E então podemos ir para lá e começar. Primeiro, na vala principal, colocamos o nome da classe com largura máxima também centralizada em 1.000 e Moto, apostando em seis, usaremos um layout de grade Então, a grade vem em dois. Com uma diferença de oito, na verdade, a grade vem apenas duas da tela média e superior. Coloque os itens no centro e o ID em aproximadamente. Lá dentro, podemos começar com a primeira diferença. E para esta div, adicionaremos um título a seis e, dentro, colocaremos o título dois com habilidades para este anel dois, adicionaremos texto de nota 200, texto três em Excel, fonte em parafuso e margem Abaixo das habilidades, colocaremos um parágrafo com algum texto que adicionarei agora. Agora podemos adicionar o estilo, para que o texto seja de grau 300, da margem para baixo E abaixo, adicionaremos os ícones. Então, antes de adicioná-los, criaremos outro di como esse. O nome da classe será flexível da tela média e Bob, flexionar, chegar a quatro e o texto para quatro Excel e justificar Agora vou adicionar os ícones e posso mover o DIF Lá também terá alguma coisa. No interior, haverá dois títulos com experiência de front-end. Então, vamos definir o texto cinza 200, na verdade, texto, Excel, formar o bot e a margem para baixo. Em seguida, adicionaremos um parágrafo com nome da classe, texto cinza 300 e margem na parte inferior quatro. Vou adicionar um texto. E agora podemos adicionar as fotos porque temos o texto. Então, primeiro, faremos o texto à esquerda e à direita, faremos a foto. E então teremos outra imagem abaixo e um texto para escrever, porque também estamos usando ótimas colunas. Vamos primeiro codificar essa primeira imagem e depois copiá-la e talvez pequenas atualizações, mas basicamente será apenas para codificar a primeira Então, usaremos o relativo e o grupo. Neste dia, criaremos outro. E, na verdade, basicamente uma vala vazia porque servirá apenas para a borda da nossa imagem Então, todos nós fazemos da largura para o máximo, da altura para o total, posicionamos a inserção do Epsot menos um, o gradiente do fundo para a direita, do roxo 100 ao laranja E é um buraco vazio, então eu posso colocá-lo lá. Abaixo, colocarei outra div e, dentro, colocarei a imagem em si. Para a imagem, podemos colocá-la nome da classe arredondada grande e em tela média, peso máximo de 500 pixels. Além disso, vou colocar lá, é claro, a fonte. Esse será o projeto um, o antigo projeto um. Agora, é claro, parece terrível. Precisamos adicionar estilo a essa profundidade. Então, posição relativa, e já está melhor com quatro, adicionando quatro, fundo em branco e opacidade de fundo de um a dez Pano de fundo Buller para grande e arredondado grande. Agora é assim. OK. Talvez possamos mudar o roxo para 300 ou talvez até 700. Acho que podemos jogar com isso mais tarde. Por enquanto, o que faremos é copiar isso, colar abaixo em vez do Projeto um, e haverá o Projeto três. Claro que deveria ser, vamos renomeá-lo como Projeto 2 Projeto dois, como esse. Agora vamos verificar a aparência da página. Ok, então há algum problema com o layout da grade, então vamos verificar. Estamos usando suas duas colunas de grade, o que é bom. E muito provavelmente, ok, essa divisão devemos cortá-la e ela deve terminar aí Sim, está correto. Agora, o que podemos fazer é como isso deve ser. Isso deve ser movido. Oh, isso deveria voltar assim. E nós podemos fazer isso. Agora vamos verificar a página. Um pouco melhor, mas precisaremos tornar as imagens um pouco menores. Então, vamos falar sobre J six e aí vamos alterá-lo para o tamanho que gostaríamos. Então 350 talvez trabalhemos. 60, 360, podemos usar 360, agora vamos verificar. 26. Projeto 3: rodapé: Para rodapé, não faremos nenhuma loucura. Vamos apenas importar para lá o quadrado FA Github e o AA Instagram No interior, criaremos um máximo de 1.200 pixels, layout flexível MMX Oddo, justificado entre eles, para que tenhamos espaço uniforme entre todos os nossos elementos , roupa de cama para seis, em média, roupa de cama para 20, texto pequeno, médio, texto E margem de cima para 12. Lá dentro, faremos uma escavação. Isso estará no lado esquerdo e um parágrafo no lado direito. Podemos fazer lá no lado direito, algo assim. Texto cinza 400 e no lado esquerdo, vamos colocar o espaço y24 e colocar o título verde com nosso nome e colocar o DIF deles com o quadrado FA Git up e com o A Instagram Para essa imersão, precisaremos fazer um layout flexível de livros, como linha, para que fiquem próximos um Alguma lacuna, texto cinza, 400 e texto para Excel. Para esta árvore de cabeçalhos, enviaremos texto para Excel text ray 200, funk semi volt 27. Projeto 3: correções finais: Verifique a aparência da página. Agora, o que podemos fazer é que provavelmente seria melhor entrarmos no Ablogis e trocarmos a seção sobre pela seção de contato Agora vamos verificar isso. Para cerca de uma seção, eu colocaria a margem em 24, talvez. OK. E para contato, eu faria o mesmo 24. Agora eu tentei e passar o mouse sobre o projeto não está funcionando. Então, o que precisamos fazer é ir até lá. E precisaremos adicionar desfoque, grupo de capacidade 25 e capacidade 100, é claro, transição e duração, 300 Agora podemos copiar isso. Coloque-o ali mesmo. Salve isso. Agora, se vamos testá-lo, você pode ver que está funcionando agora. E outra coisa é ir até uma barra de navegação. Aí precisamos mudar isso. Então, primeiro será portfólio, depois experiência e depois contato. Excluiremos essas barras. Então, primeiro serão dois portfólios, depois o bot, depois o contato e similares, ele estará lá. Portfólio, experiência , contato, e aí estará o portfólio, sua experiência e seu contato. Salve isso. Agora vamos testá-lo e ele funciona, mas ainda não é uma rolagem suave porque precisamos adicionar mais alguns atributos. Lá, após um link, faremos um deslocamento real suave para 50 e a duração para 500 Agora vamos copiá-lo e colocá-lo em todos os links. Assim. Agora vamos salvá-lo. Voltaremos à página e ela estará funcionando. Não há experiência, é claro, é portfólio e mais. Então, aí vou colocar. Agora estará funcionando. O que gostaríamos de fazer é que isso fosse fechado depois de clicarmos nele. Podemos corrigi-lo facilmente indo até lá, criando outra função, fechando o menu. Lá, usaremos uma faca fixa para forçar. E para esses itens de menu, se usarmos a função de um clique para fechar o menu, vamos colocá-la em todos os outros itens. Salve isso. Agora podemos testá-lo. Então, para a seta, iremos para o portfólio Gasix. Faremos isso em uma tela média e definiremos o direito para, não sei, cinco. Vamos tentar. Talvez dois ou talvez até zero. Zero funcionará lá. Então é assim que consertamos a flecha. Precisamos corrigir o desenvolvedor de front-end. Então, o que fazemos lá é diminuir o tamanho na tela do celular para apenas o Excel, e também podemos fazer o texto quebrado. Então, se colocarmos assim, obteremos essa saída. Agora, para corrigir isso, precisamos entrar em cerca de J six e, em seguida, excluiremos o layout flexível da tela média e superior Isso deve ser bom. Então, temos duas fotos uma abaixo da outra, então seria bom dividi-las com essa experiência de front-end. Vamos tentar fazer isso. Para corrigir isso para esse primeiro grupo relativo, faremos a ordem dois e, na sequência média e superior, a ordem um E abaixo, faremos pedido um e, em tamanho médio ou superior, pediremos dois No portfólio para G six, definiremos o Gita Bacon como texto para Excel Agora, se entrarmos na seção sobre, ou se for na verdade uma seção de contato , para as estatísticas, devemos usar uma cor diferente ou talvez excluir a opacidade Vou mudá-lo para este. Agora vou colá-lo outras estatísticas e excluir a opacidade também lá, salvá-lo e ficará assim A última coisa que eu faria é adicionar algum efeito de escala ao passar o mouse sobre esses ícones Então, vamos lá, e também precisamos adicioná-los à tecnologia Anchor com HRF no link desejado Colocaremos o ícone e adaptaremos a classe ao passar o mouse na escala 110, transformação de transição, duração 300 Vamos testá-lo. Agora vamos editar todos os ícones. Vou copiar e colar isso mais duas vezes. Em seguida, corte o LinkedIn , coloque lá, corte o Instagram , coloque lá, salve para a página Vamos verificar o layout final. Portanto, a rolagem suave está funcionando. Os projetos de animação e ícones do tipo eo estão sendo trocados Lá temos a seção sobre ou a seção de habilidades e o formulário de contato. 28. 1setupTRIANGLE: Sessão, criaremos este site com Rick e tail end. Temos a seção de projetos deles que os alterna com base no botão selecionado pelo usuário. Também ajudarei você a criar uma imagem como a minha, e também adicionaremos alguns efeitos de brilho Primeiro, vamos abrir um terminal. Em seguida, executaremos o comando na página final para criar o ID. Em seguida, instalaremos o vento de cauda , tanto o CSS quanto o prefixador automático, e inicializaremos o vento de cauda tanto o CSS quanto o prefixador automático, e inicializaremos Vamos colar o conteúdo no arquivo de configuração do tailwind. Lá, colaremos as diretivas tailwind no Index Dot CSS Excluiremos o CSS do Epidot, colaremos isso na API J six e faremos o NPM run deep para abrir a página Basicamente, acabamos de executar os comandos que estão na página final. Podemos verificar nossa página e, se o texto estiver sublinhado, está funcionando Vamos criar uma nova pasta para nossos componentes. No interior, podemos começar com o componente Navbar. Lá, usaremos o trecho, usaremos o Export e o colocaremos no aplicativo Então, lá faremos um fragmento vazio. Dentro, faremos a barra Agora Agora vamos importá-lo e ele será exibido em nossa página. E antes de ir lá, definiremos o plano de fundo e a fonte da nossa página. Então, importaremos essa fonte que você pode encontrar no Git na descrição com os arquivos úteis. Agora, se abrirmos a tecnologia corporal lá dentro, definiremos o espaço da família de fontes, o grotesco Também colocamos lá o plano de fundo. Então, segundo plano, vamos usar gradiente linear, colocar lá alguns graus. Mas, no final das contas, é basicamente um fundo cinza. Então, colocamos lá um pouco de cor. Agora vamos encontrar o correto, então eu vou configurá-lo. E agora também definiríamos o tamanho do plano de fundo a ser coberto e a repetição do plano de fundo como nenhuma. Mais um CSS que usamos neste arquivo. Caso contrário, usaremos tudo o que o vento de cauda for esse vidro e esse efeito brilhante. Você também pode encontrá-los nos arquivos úteis que fornecerei a você Basicamente, o vidro está usando esse fundo com esse desfoque do filtro de fundo Além disso, está definindo o raio da borda para o elemento em que é aplicado Ele também tem alguma borda e tem alguma sombra de caixa. Para o efeito de brilho, ele está usando a posição absoluta, então precisamos de algum elemento com melhor posição em relação ao estilete Em seguida, está usando todo o raio. Então, com os 50%, é como um círculo, então está usando um índice z baixo e também tem algum conjunto de fundo. Usaremos essa cor azulada. Agora, para ter um bom estilo de nosso texto, definiremos o H dois e aplicaremos a todos os nossos H dois, texto l, e na tela média, aplicaremos texto para o Excel Em seguida, para o texto do parágrafo, aplicaremos o texto Excel, tipo de rastreamento e a abertura relaxada. Isso deve ser para o CSS. Agora vamos pular para a Navbar e começar a codificá-la. 29. 2navbarTRIANGLE: Primeiro, precisaremos instalar duas bibliotecas, então faremos o NPM, ícones I react e também o react scroll Também usaremos o estado americano, então aí usaremos o estado. Lá, faremos a importação, menu de esboço da IA e o encerramento do esboço da IA Além disso, importaremos o link do react scroll para o Smooth scroll Primeiro, definiremos a variável de estado, então const No, set NF e use o valor padrão do estado serão falsos Abaixo, faremos a função de navegação total. Isso basicamente definirá a variável de estado como o valor. Usaremos isso na função Encliq em um dos elementos e também usaremos uma função close navigation E isso configurará a navegação para quedas. Então, especificamente, usaremos isso na navegação móvel. Sempre que clicarmos na navegação móvel no link, ele fechará a navegação para nós. Vamos primeiro adicionar algum conteúdo e depois estilizá-lo. Então, vamos querer adicionar a tecnologia Anchor com nosso nome, então J Doe Você também pode adicionar logotipo. Então você gostaria de desordenar uma lista. Posteriormente, adicionaremos também itens da lista. Lá, gostaríamos de adicionar um div com a função onclick que acionará a navegação, então Togo E abaixo, gostaríamos de adicionar outra div, e essa div será com a navegação móvel Portanto, nesta div haverá uma lista não ordenada e, dentro, um item da lista com na verdade, o link O mesmo caso estará lá. Agora temos o esqueleto, então podemos começar a estilizá-lo. Na verdade, adicionaremos o primeiro link, que será quase o mesmo aqui, e também adicionaremos o ícone para que possamos estilizá-lo melhor. Lá, usamos o operador ternário. Então, com base no valor da variável de navegação, ele executará a posição verdadeira, que será o contorno de IA próximo ou, se for falso, que é o valor padrão, executará a segunda , a posição falsa, o menu AI Outline, opa, assim menu AI Outline, opa, Vou criar uma navegação Burger. Também vamos definir um tamanho padrão. Então, vamos usar Tirty e o mesmo tamanho será para lá. Agora vamos salvá-lo. Em nossa página, você já pode ver os itens e a navegação. Agora, se voltarmos, podemos começar a estilizar para que o div principal tenha um nome de classe Primeiro, usaremos o flex. Em seguida, aumentaremos o tamanho do texto. Vamos justificar entre para criar espaço entre todos os elementos Usaremos o texto cinza 200, para que possamos realmente vê-los. Agora está melhor. Colocaremos os itens no centro para centralizá-los verticalmente Em seguida, faremos um preenchimento horizontal. Vamos usar seis. Na verdade, também definimos uma largura máxima. Vou usar nesta página 1.300 pixels e vamos centralizá-la com o MMX Também podemos aumentar a altura, altura para 24. E se você não tiver certeza de como está sua navegação, basicamente, você pode definir o fundo branco para verificá-lo sempre. Então, estou feliz com isso. Agora vou removê-lo. Essa é a principal diferença. Para o logotipo, posso definir um pouco de HRF. Podemos usar basicamente a página inicial ou o que você quiser. Mas, por enquanto, vou usar esse vazio. Para a lista não ordenada, definiremos o nome da classe como oculto no celular porque, na verdade, no celular, mostraremos essa div com esses itens de menu Lá na tela média e superior, mostraremos novamente com display flex Vamos usar alguma lacuna entre os itens. Aumentaremos o índice Z e usaremos o ponteiro do cursor Então, quando passarmos o mouse sobre os itens, teremos um cursor diferente Para os itens da lista, usaremos um nome de classe com relativo e grupo porque usaremos algum efeito em Hober Agora, podemos ir até Link. Para o link, precisamos definir para onde ele nos levará. Então, a primeira serão duas sobre a seção. Além disso, definiremos a rolagem suave para três, para que a rolagem suave seja ativada, depois o deslocamento para 50 e, em seguida, a duração da rolagem suave, que será 500 Eu costumo usar esse valor. Em seguida, definiremos abaixo deste link um intervalo, e o que esse intervalo fará é uma pequena animação de hober que usaremos Então, apenas um espaço vazio, lá faremos o nome da classe e começaremos com absoluto. É por isso que a disposição relativa é importante , caso contrário, não estará sublinhando isso sobre Então, depois do absoluto, usaremos o zero inferior, o zero esquerdo, a largura até a altura total um, céu de fundo 600 que podemos usar. Em seguida, usaremos a escala de transformação horizontal zero e agruparemos, no entanto , dois, escala horizontal 100. Podemos continuar em outra linha. Lá, usaremos a transição, a transformação. Além disso, definiremos alguma duração e facilitaremos a entrada. Agora vamos salvá-lo e tentar se está funcionando. E está funcionando, o que é bom. Agora, o que faremos é primeiro copiar esse link e colocá-lo lá para o celular. Em seguida, copiaremos esta parede, seu item, e a colaremos ali e ali. Usaremos uma seção, uma seção portfólio e uma seção de contato. Então, podemos mudar isso para portfólio e contato. O que faremos lá é copiar para a versão distal, a parede é tênue, como você pode ver lá Podemos criar mais alguns espaçamentos lá, então você quer perder o código Copie pela segunda vez e pela terceira vez. Além disso, você tem a seção sobre, a seção portfólio e a seção de contato. Isso nos levará ao contato e ao portfólio, e não podemos esquecer adicionar os IDs às seções reais, então isso funcionará. Agora vamos continuar com a navegação do Berger. Então, neste dia, adicionaremos um nome de classe com tela média e acima oculta e aumentaremos o índice para 30. Agora vamos para o DIV e, primeiro, podemos, para a lista não ordenada, definir o nome da classe com fonte semi parafuso, texto para Excel, espaço Portanto, o espaçamento entre todos esses itens da lista será definido como oito e a margem de cima para 24 Você verá y agora porque vamos usá-lo para esse DIF que contém essa lista não ordenada, outro operador ternário lá esse DIF que contém essa lista não ordenada, outro operador ternário E basicamente, novamente, o mesmo caso de antes. Com base no valor do NAF, ele executará a disposição ou disposição. Então, primeiro, assim como a disposição, quando abrirmos a navegação móvel, tornaremos esse texto no centro, definiremos o índice como 20, altura fixa, largura total, zero esquerdo e zero superior e um pouco de fundo Normalmente, estou usando esse cinza 2020, 23 ou 23, 23, 23, 23, sim, certo? E quando é falso, estou usando a posição fixa e a esquerda menos -100% Salve isso. Agora podemos testá-lo. Então, quando eu abri-lo agora, vamos tê-lo assim. E precisamos de sua própria função de clique. Quando clicarmos nos itens, ele deverá ser fechado. Então, vamos segurar e clicar em Fechar navegação. Agora está funcionando. E também para que as versões em disco funcionem. 30. 3TRIANGULO EM HEROIS: Ótimo que seu arquivo, hero.j6. Pegue a exportação lá, toque em JSix, coloque lá o herói, pode estilizá-la e salvá-la Agora podemos ir e fazer a seção de heróis. Primeiro, instalaremos a biblioteca com animação do tipo react, ou seja, animação npmiractType Agora vamos importar a foto do perfil, então a foto do perfil de. E, na verdade, precisamos editar os ativos agora. Você pode encontrar arquivos úteis em um Git. Então, eu o edito agora mesmo, e lá vou fazer assets profile picture dot PNG. Salve e discutimos. Agora vou fazer outra importação com o tipo de animação. Incrível. Essa página de herói terá uma div principal, depois uma div ordenada que conterá um texto e, em seguida, uma imagem com a foto do perfil Mas vou editar um pouco mais tarde. Vamos começar com o estilo da div principal. Então, lá vamos usar o layout da grade. Na tela do celular, ela será definida como padrão para as colunas de grade uma na tela média e, acima, definiremos as colunas da grade duas Colocaremos os itens no centro. Definiremos a largura máxima dessa seção do herói em 1.250 pixels Vamos centralizá-lo. Caso você não saiba onde está, você pode definir o fundo branco. Mas eu preciso adicionar algum conteúdo lá para ver. Em seguida, alguma margem para baixo. Para outra seção do médio, vamos aumentá-la. Então, temos algum espaçamento lá, e será isso por enquanto Além disso, talvez possamos com alguma margem no topo. Vamos usar 14. Isso é melhor. Para a div principal, definiremos um peso máximo de 800 pixels Dentro, colocaremos um parágrafo e, abaixo do parágrafo, colocaremos o título dois. E dentro do parágrafo, colocaremos um texto. R, agora vamos quebrá-lo, então ele começará em outra linha. E lá colocaremos um spenteg, na verdade, para que possamos estilizar esse Jon Do. Novamente, colocaremos uma tag de quebra e, lá, colocaremos uma animação de tipo Podemos fechá-lo assim. E dentro desse tipo de animação, faremos uma sequência que será basicamente desenvolvida para esse momento. A duração será 1.000, o web designer, duração também 1.000 e o consultor, a duração também 1.000. Em seguida, definiremos uma velocidade, que será 50, depois uma repetição, que será infinita. E depois assim. E então um nome de classe, que será fonte em negrito e itálico Salve isso. Agora falhou. E falhou por causa do infinito, precisamos ter eu. Sim, é isso. Agora, o que mais? Aí estamos no texto com mais de cinco anos de experiência. E agora podemos remover o fundo branco. E podemos começar a estilizá-lo para que possamos realmente ver o texto Portanto, para a tecnologia de parágrafos, usamos o texto cinza 200 em médio e superior. Ele será dimensionado com seis Excel em uma tela ou tela de celular, será um texto em Excel e terá um rastreamento rígido. Então, as letras estão mais próximas. Parece que está na nossa página agora. Vamos continuar. A tag span, vamos deixar como está agora, mas para mais tarde, podemos fazer algo como text blue 200, algo assim. Mas, por enquanto, vamos deixá-lo vazio. Lá fizemos o estilo. Para isso, já não esquecemos para H two já fizemos o styling no índice do CSS lá Mas também adicionaremos texto colorido: cinza 300, talvez. OK. E agora vamos colocar lá a imagem. Então, isso será bem fácil. Lá, faremos a fonte com a foto do perfil e o nome da classe terá largura de 500 pixels. Acho que vamos fazer isso em uma tela média. No celular, na verdade, geralmente uso algo como largura de 300 pixels. A propósito, a imagem é criada no canva.com. Aí está a foto. Lá você tem esse elemento e define a cor lá. Então você brinca com a posição e coloca a foto dentro. Em seguida, você precisa baixá-lo como uma imagem transparente e, claro, cortar os cantos. Agora, o que também adicionaremos são os botões. Então logo abaixo desse H dois, ainda nesta div faremos New Div E esse novo div pressionará o botão um e o botão dois. O botão um será como baixar o currículo, e o botão dois será como visualizar W. Agora, o que faremos com esses botões é que eles estarão próximos um do outro. Então, vamos configurá-lo pelo layout da caixa flexível e usando o Flex Row. Em seguida, definiremos uma lacuna entre eles, margem para baixo na tela média e acima. Vamos redefinir essa margem. É basicamente para a tela do celular, porque a imagem estava logo abaixo dos botões e não parecia boa. Agora, vamos estilizar os botões. Então, para o primeiro, começarei definindo o índice Zen, depois o ponteiro do cursor, depois o parafuso da fonte, a nota do texto 200, também com duas metades, também com duas metades, depois a margem a partir do topo Então eu usaria também duas roupas de cama. E agora vamos começar com as cores. Então, vamos começar em outra linha e definirei o gradiente de fundo para a direita a partir de alguma cor Vou definir em um minuto por meio de algumas cores. Para alguma cor. Assim, obteremos um gradiente de três cores e faremos esse Excel arredondado Agora, o que eu posso fazer é começar a aula lá, e eu posso definir lá também esse índice para dez, Crouser para ponteiro, apontar para parafuso, texto para a série 200 Margem de cima para seis, casamento para duas, e direi que há uma borda porque ela será delineada e não preenchida com a cor Então, borda e borda cinza 400, e eu também usarei o Excel arredondado. Também posso colocá-lo em outra linha para que você possa ver todo o código. Agora vou salvá-lo. Eu tenho dois botões na minha página, mas agora vou adicionar a cor. Então, deixe-me obter os códigos da cor que eu quero usar lá. Vou usar essa cor e agora vamos adicionar o efeito de foco para os botões Então, vamos começar do topo. Vou adicionar a transformação, a transformação transição e, em seguida, a escala dela para um em cinco. Isso o aumentará e, também no Hover, haverá alguma sombra Agora podemos copiar isso e colocá-lo em outro botão. Nós temos lá. Salve isso. Vamos experimentá-lo. 31. 4aboutTRIANGLE: Vamos agora criar a seção “Sobre”. Então, sobre J six. Nós podemos importá-lo. Agora coloque lá. Primeiro, precisamos importar as imagens, então importe o projeto. Um dos ativos e eu realmente farei isso em vídeo, e também importaremos todos esses ícones da biblioteca em que instalamos o react icons DI, e lá usaremos JavaScript e assim por diante. Começaremos estilizando de Mandiv lá. Então, vamos definir normalmente na próxima semana para 1.300 pixels, centralizá-los , um pouco de preenchimento, depois um layout de grade em tela média ou superior, duas colunas de grade, algumas lacunas, posicionaremos os itens no centro e também colocaremos o ID deles, que serve para nossa navegação Lá dentro, começaremos com as cartas. Então, teremos nesta página sete cartas reais mostradas no layout da grade. Mas na versão desktop, haverá apenas seis cartões. No celular, teremos uma placa adicional para ter um elemento de estilo melhor Então, vamos começar com isso, na verdade. Nome da classe que ficará oculto na tela média e acima. Mas, na verdade, faremos isso escondido mais tarde para que possamos ver agora. Vamos usar o fundo branco de fundo oposto Desfocado, grande, arredondado, grande e também roupa de cama Agora, nessa diferença interna, colocaremos na verdade os ícones Então DI HTML five, está lá com o nome da classe, e aí podemos definir a cor. Então, para este, vou definir a cor laranja, 600. E agora vou fazer isso com todos os ícones que eu quero de lá. Então, na verdade, vou fazer isso em vídeo. Agora você pode ver isso. Eu o tenho lá. Então, eu posso realmente adicionar mais classes lá. Layout Flexbox, representação flexível, capitulação quatro, texto para Excel e Justify Center Agora vou salvá-lo. Eu tenho isso assim. E vamos realmente verificar como ficaria no celular, então vou fazer assim. Agora podemos ver que ficará assim. Tudo bem. Agora podemos escondê-lo como quisermos. Então, faremos uma tela oculta da média e superior, porque ela estará apenas no celular para fins de estilização Na verdade, agora vamos começar a editar os discos que teremos no desktop o primeiro será para a imagem. Então, há a nova div Lá, adicionamos uma tela média acima para ocultar e, para a imagem, primeiro, colocaremos lá relativa porque usaremos uma posição absoluta interna e a agruparemos E não se preocupe, usaremos esses elementos, então codificaremos uma vez e depois copiaremos e colaremos. Lá, criaremos um div e esse será um diff vazio. Será apenas para estilizar. Então, teremos uma largura e uma altura para cair. Teremos uma posição absoluta, então aí temos a posição relativa a ela. Faremos inserção menos um. Faremos o gradiente de fundo para a direita e definiremos isso da azul-petróleo 100 para a cor azul-petróleo 900 Vamos arredondá-lo em tamanho grande. Podemos começar com um sublinhado agora, e vamos fazer o desfoque, a plasidade para 25 grupos acima, vamos fazer a oplasidade para 100 e a transição e a duração para e a transição e Agora, vamos salvar por dentro, colocaremos outro div que realmente conterá a imagem Assim, podemos colocar lá a fonte da imagem que será o projeto um. Também podemos lá. Então, vamos colocar lá o Projeto um e um nome de classe, que será arredondado para grande e, em tela média e acima, diremos que há uma mistura com 500 pixels. Agora podemos rolar para baixo. Nós temos a imagem. Então está funcionando assim. O que acrescentaremos também é que, até hoje, mantendo a imagem, colocaremos a posição relativa com o cheio, a roupa de cama em quatro, o fundo em branco, o fundo em opacidade, dez e o fundo desfocado em grande largura, arredondado, grande Nós o salvamos e o teremos assim. Na verdade, a rolagem ficará para baixo. Agora, se continuarmos abaixo da div e adicionarmos outra div, essa será basicamente a seção de habilidades Você pode colocar o nome da classe com o título seis. Dentro dessa diferença, colocaremos o título dois com habilidades. Então, estilizando lá. Portanto, texto de nota 200, texto três, Excel e parafuso de lagoa e margem para baixo Abaixo do céu, colocaremos um parágrafo com nota de texto 300, margem para baixo quatro E agora, na verdade, o que eu fiz? Precisamos cortá-lo, colocá-lo em sala de aula. Dentro deste parágrafo, vamos colocar algum texto. Então eu vou colocá-lo lá. Vou retirá-lo do vídeo, e aí está. Agora está lá, então abaixo, podemos colocar alguns ícones. Então eu vou fazer outra div. Para esta div, faremos aulas com flexão média e superior, flexão para encapsular, obter até quatro, texto para Excel, centro de justificação e oculto Agora podemos pegar alguns ícones que temos lá. Copie e cole aí. Podemos estilizá-lo assim. Salve isso. Agora, o que queremos lá. HTML CSS, bom script de gel de cinta, react. Observe que podemos achar que está tudo bem. Agora, o que faremos é que, na verdade, o que mais queremos fazer lá? Eu acho que nada. Acho que pode ser isso. Podemos jogar com as margens mais tarde, se quisermos o estilo, mas, por enquanto, está bom Então, acho que podemos continuar. Basicamente, gostaríamos copiar essa seção da parede e colocá-la abaixo, e então poderemos vê-la no lado esquerdo abaixo da imagem. Então, gostaríamos de tirar a foto lá e colocá-la novamente abaixo. Então, ele ficará do lado direito e depois o repetiremos. Então, vamos tirar essa foto e colocá-la novamente lá. Ele ficará no lado esquerdo. E ao pegar esse texto, ele voltará para o lado direito. Agora podemos apenas atualizar o texto e as imagens. Então, o primeiro é o Projeto um, dois e três. Então, o primeiro é o Projeto um, segundo é o Projeto dois. O terceiro, na verdade, está lá. Projeto dois. E o terceiro é o Projeto três. Assim. Agora vamos atualizar o texto. Então, para o primeiro, temos as habilidades. Para o segundo, vou atualizar o texto agora assim e o terceiro texto, também vou atualizar agora assim. Agora podemos verificar como é. Então, é claro que podemos brincar com os ícones, textos e imagens de nossos projetos, mas é assim. E depois adicionaremos até mesmo o efeito brilhante abaixo. Uma coisa que devemos corrigir são os ícones. Então, para o último, eu usaria o Actually, vamos copiar este ou vamos fazer isso. Mesmo. Então, aqui estamos falando sobre o ftc Então, eu colocaria lá uma nota. Então podemos fazer Mongoi B. Então podemos fazer rea e você se levanta Então, vamos adicionar algumas cores. Então, vamos copiar e colar isso. E eu colocaria lá verde. Podemos sair de lá também verde, azul, cinza assim. Em seguida, eu acessaria esses ícones para o front-end. Então, basicamente, podemos usar isso, isso, esse script bootstrap Ja Vamos deletar a nota. Eu posso, digamos assim. 32. 5portfolioTRIANGULO: Copie essas importações, abra a pasta explorer e os componentes, clique em você, faça um componente portfolio.j6, faça um explorer lá, coloque no Eb do JSix Lá, podemos colar os projetos. Então, na verdade, usaremos seis deles, e eu os alterarei um pouco mais tarde. Também usaremos o ícone do Gita, para que a IA preencha o Gita Também usaremos o estado de uso. Do react, e agora eu posso mudar os projetos e podemos começar. Então, primeiro, o que faremos é criar uma constante com os projetos. Não escreva um código repetitivo, vamos salvá-lo nessa constante e, a partir daí, vamos mapeá-lo e usar a interface de descrição do título da imagem descrição do título para desenvolvimento de front-end usando React Também coloque o link que é site e vá para cima e lá embaixo, podemos simplesmente copiar e colar isso. Vou usar seis projetos, então um, dois, três, quatro, cinco, seis, podemos mudar os valores para imagens. Então, projeto seis, cinco e assim por diante. Agora vou fazer isso para tudo assim. Você pode ver lá. E podemos passar para o portfólio. Primeiro, faremos o projeto atual constante, dois conjuntos do projeto atual. Então, vamos fazer uma variável de estado lá, e o valor padrão será zero. Então, aí podemos começar a escrever em troca. Podemos definir o estilo para a Div principal, que será novamente com uma classe relativa porque usaremos alguns absolutos para o efeito de brilho posteriormente. A largura máxima será de 800 pixels Vamos centralizá-lo. Então, preenchendo, vamos fazer uma margem vertical na tela média e acima. Vamos usar 20. Layout Flexboks, direção flexível, tela média ColumO e superior, E o ID será portfólio. Fizemos a identificação de About? Sim. Então, agora podemos começar a escrever lá na div principal do nosso componente de portfólio Teremos lá basicamente uma div com as informações do projeto e uma lista não ordenada Isso manterá as opções, selecionaremos os projetos e isso mudará em nosso site. Então, vamos começar o projeto, e teremos o fundo branco ou talvez nem precisemos dele. Usaremos o efeito de vidro que definimos lá no índice para CSS. Então, aplicaremos tudo isso ao nosso cartão para obter o efeito de vidro ou, após o efeito de vidro, abriremos com a borda cheia em dois e o peso máximo em 600 pixels. Agora podemos ver lá em nossa página. Então, abaixo, colocaremos um div, e esse div estará com uma imagem E essa imagem terá uma variável lá em vez de uma variável como Project one, fonte, por exemplo. Mas, por enquanto, para estilizá-lo, usarei a fonte do Project one Então também terá alguns antigos. Então, por enquanto, posso colocar o Projeto 1 e também a largura do nome da classe em cheio, altura em cheio, objeto para cobrir, arredondá-lo muito grande e margem para baixo. Incrível. Essa div, digamos que também com altura total e até 80. Então, vamos definir uma altura para a imagem. E abaixo dessa div, definiremos um parágrafo, e esse parágrafo será uma descrição, e criaremos essa variável posteriormente O nome da classe será o texto cinza 200 e marchará para dentro ou a margem vertical para quatro. Então, abaixo disso, criaremos uma div. E esse div conterá o texto âncora do Git up e do link para a página Então, o primeiro será do lado da vista, e o segundo será como se a IA falhasse no Git up Bom. Vamos usar o layout flexbox e o espaço vertical para quatro. Então, para a primeira tecnologia de âncora, a HRF, definiremos isso por enquanto, mas será variável Em seguida, definiremos o nome da nossa classe com algumas roupas de cama horizontais. Vamos fazer disso um botão. Então, faremos isso e definiremos o plano de fundo, você poderá ver como fica. Na verdade, para o site, usaremos a tela de fundo 600 , texto cinza, 200 arredondados, grande Seu plano de fundo é 700, depois a transição e a duração 300. Nós vamos salvá-lo. Agora podemos ver isso já na página. Faremos quase a mesma coisa para nos levantarmos. Tão grande para quatro, y para dois, fundo para cinza 800, texto para cinza 200, texto para Excel, arredondado para tamanho grande. Caso contrário, definiremos o fundo cinza 600 e algumas transições e duração para Agora nós o temos também para o Git. Vamos verificar isso. OK. Agora, também haverá o HRF. Por enquanto, vamos deixar isso apenas com o hastek e podemos continuar E podemos continuar com essa lista não ordenada. Lá, vamos definir uma margem para a esquerda. Layout Flexbox, linha flexível em uma tela móvel e na tela média acima, vamos flexionar e na tela média acima, a coluna com alguma folga, flexionar a repetição, para que fique enrolada na tela do celular, justifique o centro, para que fique centralizada horizontalmente, da margem para cima, e também na tela média, mudaremos a lacuna para também na tela média Na tela do celular, a diferença será de seis. Nessa lista não ordenada, primeiro, o que precisaremos fazer antes dos itens da lista é que precisamos mapear projetos Então, mapearemos a constante que criamos lá no topo desta. Faremos o mapa do projeto, o projeto, o índice, e lá o abriremos e, dentro, colocaremos o item real da lista. Dentro do item da lista, colocaremos uma chave, que será o índice. Colocaremos lá o clique, que será como definir o índice atual do projeto. E também depois desta e antes do fim da tecnologia, colocaremos um nome de classe. Dentro do nome da classe, na verdade não começaremos com barra invertida, mas gostaríamos disso e agora vamos fazer No interior, podemos começar com o ponteiro do cursor e colocá-lo em outra linha Texto cinza, 300, fundo, ardósia 700, arredondado grande, roupa de cama e, em seguida, com um peso misto de 100 pixels. Em Ela, mudaremos o plano de fundo para ardósia 800 e faremos a transição e a duração Preciso rolar para que você possa ver o que é importante agora Vou dizer isso em outra linha não vamos terminar aí. Vamos fazer um sinal de $1 e colchetes. No interior, diremos que o projeto atual é igual ao índice e, caso seja selecionado, todos definimos a lista de fundo como 900 e, caso não definamos Portanto, esse é outro operador de turno que usaremos lá com esse ponto de interrogação. Então, o que estamos dizendo é que quando esse conjunto de projetos atuais for selecionado, teremos a tela de fundo, uma cor escura Então, agora vamos ver como isso realmente funciona. Precisaremos apenas colocar lá o projeto, o título. Agora a mágica aconteceu, então podemos acessar nossa página e testá-la. Em nossa página, você pode ver que isso está mudando. Em nossa página, você pode ver que está realmente funcionando, mas não está alterando as imagens porque nas imagens não colocamos uma variável, mas colocamos lá a imagem codificada Então, vamos consertar isso. Lá, precisaremos rolar para cima. E então você começará com a fonte da imagem. Lá faremos projetos. Imagem de pontos do projeto atual. Agora podemos basicamente copiar isso e colocar tudo. Mas em vez de imagem, colocaremos um título. Agora podemos copiá-lo também lá. Mas em vez de imagem, colocaremos sua descrição. E agora vamos para Anchor text e para HFF HRF, segundo HRF E aí vamos colocar os links dot sit e os links dot GitA Agora, vamos salvá-lo. Vamos testá-lo. Então, como você pode ver, ele está mudando as imagens e também estará usando o site e o git up que você especificou lá na constante Portanto, ele usará este site e este giup para o projeto semelhante em que você o configurou 33. 6contactTRIANGLE: Podemos continuar com o formulário de contato, lá criaremos um novo componente, entre em contato com o J six. Adicione ao Abo J six. E faremos uma importação lá, então importaremos AI fail LinkedIn e AI fail Git up Incrível. Aí podemos começar com o homem Div. Então, primeiro, vamos usar rosa. Faremos o peso máximo de, vamos usar 1.000 pixels, misturar codo e definir também um ID de contato Na verdade, vamos continuar com mais aulas lá. Então, vamos definir esse efeito de vidro que editamos em um índice que contém CSS. Em seguida, definiremos um layout de grade em tela média e superior. Usaremos a coluna dois da grade, posicionaremos os itens no centro. Então, o que mais? Na verdade, Hmm. Na verdade, o que faremos é usar outro div ou quisermos Na verdade, vamos continuar com a codificação do formulário de contato e depois atualizá-lo com a interface do usuário Então, eu vou fazer nossa primeira div. Nesta div, faremos uma lista não ordenada. Dentro da lista não ordenada, faremos o item da lista O primeiro será o AI fail LinkedIn. A segunda será a falha da IA. Get up. Para o primeiro item da lista , definiremos um nome de classe. Já podemos vê-los lá, mas eles são muito pequenos. Então, vamos continuar agora nessa lista não ordenada. Na verdade, vamos definir MI como Automático. Portanto, margem vertical para Automático, preenchimento para escrever até seis porque teremos o formulário de contato correto Nesse item da lista, definiremos um layout de flexbox E para este LinkedIn, definiremos uma classe chamada largura 70 pixels Também tive que fazer a nota 300 de texto. Agora, o que também fazemos é basicamente copiar isso, colocar lá e colocar lá a IA se levanta. Agora, vamos fazer um espaçamento entre elas e vamos continuar. Então, neste item da lista, vamos realmente fazer com que seja assim. O que também estará lá é um disco com o cabeçalho três, que será o contato. E com o parágrafo, isso será móvel, alguma coisa, e outra, que será e-mail, alguma coisa. Agora podemos aguentar. Lá, podemos fazer o nome da classe com texto cinza até 400. E depois entre em contato, podemos fazer texto grande, fonte, parafuso e texto cinza 200 Vamos verificar a página. Está parecendo melhor. Mas é claro que ainda sentimos muita falta de lá. Então, na verdade, vamos fazer o estilo lá. Vamos fazer algo parecido, talvez possamos até mesmo policiá-lo como Waldif Mas o que perdemos é uma margem cinco. Agora, vamos policiá-lo, colocá-lo lá. No segundo, podemos cumprir o horário de trabalho. Podemos fazer lá de segunda a sexta e sábado a domingo ou fim de semana ou o que você quiser, talvez você possa morar lá de segunda a sexta porque não trabalharemos no fim de semana, certo? Então, podemos fazer isso. Não sei. Das 10h às 17h. E, do ponto de vista do estilo, assim Então, acho que isso mudará um pouco depois de criarmos um formulário e, posteriormente, poderemos atualizá-lo. Então, o que precisamos fazer é que abaixo ou abaixo dessa lista não ordenada, criaremos uma div e essa será a div com o formulário de contato por e-mail Primeiro, para ter o layout da grade , vamos realmente excluir essa div Salve agora, devemos ter duas colunas. Então, se eu salvar esse texto, ele deve estar no lado direito e está lá, então está funcionando. Agora, neste dia, Inside, começaremos com o formulário, ou podemos realmente fazer o formulário em vez do div mundial para que nem precisemos usar o DIF Então, começaremos com o nome da classe, que será a largura máxima. Na verdade, vamos usar seis Excel, um pouco de preenchimento em tela média, aumentaremos ainda mais o pendente O ID será formulário. Agora vamos salvá-lo. Vamos colocar lá algum conteúdo para que possamos conferir na página. Está lá. Dentro do formulário, colocaremos as entradas Portanto, haverá uma primeira entrada e, em seguida, haverá uma segunda entrada. Em seguida, haverá uma área de texto para o texto ou para a mensagem e, em seguida, teremos o botão para enviar a mensagem. Agradável. Vamos realmente fazer isso assim. E assim. E vamos começar. Portanto, para a entrada, o tipo do primeiro será texto, ID será nome, espaço reservado será seu nome nome será nome e o nome da classe terá margem inferior para dois, largura para total, arredondado para médio e, em seguida, alguma borda. Bem, as cores da borda dorsal são de grau 400, PI dois, dois, roupa de cama à esquerda dois, dois também e roupa de cama à direita até Bem, é bem parecido com o segundo, então vamos fazer isso. Mas, em vez de digitar texto, será digitado ID de e-mail, e-mail, espaço reservado, seu e-mail e o nome será e-mail. Isso será o mesmo. Para a área de texto, podemos, por exemplo, copiar os campos. O tipo será a área de texto, ID será a área de texto e, em seguida, as colunas. O padrão é de 30 linhas a quatro. Espaço reservado, sua mensagem. Assim, sua mensagem. Tipo. Na verdade, para a área de texto, não há um tipo. Há um nome. Então, vamos usá-lo assim. E isso é bom. Agora vamos pegar o botão. Para o botão, será digitado. Envie com o nome da turma até quatro, cor que definiremos em um minuto. Roupa de cama branca para três, arredondada para média, texto para cinza 200 de semi negrito e texto para Excel Agora, vamos para a seção de heróis. Vamos até esse botão. Na verdade, vamos pegar esse gradiente de cor. Copie, volte ao contato. Podemos começar por aí na nova linha, colocar lá o gradiente e salvá-lo Bem, e é isso. a seção de contato. Eu vejo um problema aí. O Não está abaixo, então sentimos falta de algumas. Sentimos falta de algo na página, como você pode ver. Na verdade, não temos, é só uma longa fila. Eu não vi isso corretamente. Então, sim, isso é para uma seção de contato. Na verdade, mais uma coisa. Acho que o mais importante no formulário é adicionar também o método que será postado, e a coisa mais importante que precisamos ler lá para ele realmente funcione totalmente, precisamos adicionar uma ação e, nesta seção, precisamos adicionar um endpoint, e o endpoint, você adicionará, como mostrarei agora Vamos para esta página, um login dotgtfm dot IO slash. Em seguida, vamos nos inscrever, clicar em Criar lá, colocar lá algum nome e colocar lá o fuso horário, copiar esse endpoint E então você colará o endpoint lá. Agora vamos testá-lo e está funcionando. Então, agora recebemos o e-mail no GettFormIO. 34. TRIANGNGULO DE 7 pés: Agora vamos fazer o rodapé, para que os componentes criemos um novo rodapé J six, como este, o coloquem Vamos importar. Agora vamos lá. Isso será bem rápido. Primeiro, importaremos o FA Github, square e o FA Instagram desta forma Bom. No interior, colocaremos o D para o lado esquerdo e também para o lado direito. Então, usaremos um relé lá fora. Vamos com um peso máximo de 1.300 pixels. Vamos centralizar isso. Vamos fazer o layout do flexbox lá Justifique entre um ajuste de 6 a 6 e um ajuste médio a 20. Texto para pequeno é bom em médio, texto para Excel também é bom. Ou vamos reduzir o texto muito grande e marchar de cima para 12 Agora vamos pular para o primeiro div à direita, depois para o Agora vamos pular para o primeiro div à esquerda depois para este à direita Dentro ou dentro da diferença no lado esquerdo, teremos um título três com J Doe Posso fazer isso assim. E o div que conterá a etiqueta âncora Isso conterá o quadrado FA Github e, abaixo, teremos o FA Instagram Agora vamos fazer o estilo, lá faremos o espaço Y quatro. Temos algum espaçamento entre os elementos entre o H três e esse DIF Para o H três, usaremos o texto dois do Excel. Agora podemos rolar a página para que possamos vê-la. Claro, texto de nota 200, para que possamos realmente ver melhor. Quer aparafusar ou semiraparafusar, talvez. Mãe, hmm. Então, nesta div, eu colocaria o layout flexbox, linha flexível, para que os ícones fiquem próximos Então, lacuna, texto cinza 400 e texto para Excel porque, na verdade, podemos ver pelo menos os ícones. Então, para a outra divisão no lado direito, talvez nem precisemos mergulhar Vamos colocar um parágrafo lá com Dak em 24 J Doe. E vamos colocar lá o texto cinza 400. Vamos ver a página. É assim que nosso rodapé ficará . E eu acho que é isso. Então, agora devemos ter nossa página pronta. O que nos falta é o efeito brilhante que faremos agora 35. 8shinyEffectTRIANGLE: Precisaremos criar lá um novo componente e o chamaremos de efeito brilhante com o Jasix Agora não vamos colocá-lo em lugar nenhum. Vamos fazer isso aí mesmo. Então, lá dentro, ao retornar, na verdade, o mergulho estará vazio nome da classe será o efeito brilhante, e esse efeito brilhante não é uma classe de vento de cauda. É a coisa. Vamos, na verdade, fechar os outros é o que editamos lá. Você pode encontrá-lo no Git up. Eu lhe fornecerei arquivos úteis. Então, vamos aplicar lá e também vamos colocar os estilos de posição. E definiremos esses estilos de posição lá. Então, seremos constantes com os estilos de posição e definiremos a largura W, altura e o índice dois menos um Precisaremos de alguns parâmetros de entrada. Então, por dentro, colocaremos a esquerda, direita, a parte superior e o tamanho em 500. Além disso, o que faremos lá é uma condição. Então, quando definirmos esse efeito brilhante, não precisamos definir o lado esquerdo ou direito todas as vezes Para esta ocasião, faremos a esquerda indefinida. Em seguida, os estilos de posição restantes serão e precisamos usar a barra invertida nos pixels à esquerda Basicamente, agora podemos copiá-lo e fazer a mesma coisa para o lado direito. O direito é indefinido, então não o definiremos depois de chamar esse componente Definiremos os estilos de posição dos pixels da direita para a direita, que podem ser zero. Então, para o topo, usaremos o mesmo que está lá, para que possamos copiá-lo, colocá-lo lá, ali e ali. Mas o valor máximo será o melhor. O valor do peso será tamanho e altura também será tamanho. Nós nos sentamos lá. Agora podemos ir e tentar usá-lo. Então, vamos rolar a página para cima. Vamos agora para a seção de heróis, certifique-se de que ela esteja salva. Na seção de heróis, em algum lugar entre a div e a imagem, faremos um efeito brilhante. Efeito tão brilhante. Agora ele entra, então certifique-se de que seja importado para cada página em que você quiser usá-lo. E aí precisamos definir a esquerda. Vamos usar, eu não sei 100. Top 200 e tamanho, algo em torno de 1.600. Digamos que agora você possa ver que o efeito de brilho está em nossa página. Mas o que também está acontecendo em nossa página é que temos essa rolagem vertical qual você pode rolar para a esquerda e para a direita. E precisamos corrigir isso colocando esses efeitos de brilho em um div. Estamos realmente ocultando o transbordamento Então, vamos criar um div e lá vamos colocar uma posição absoluta dentro, zero transbordamento escondido na tela do celular Em uma tela média acima, mostraremos o estouro visível No interior, vamos colocar um efeito brilhante. Oh, na verdade, entendi. Coloque-o lá. E vamos colocá-lo lá também pela segunda vez, porque queremos mais efeitos de brilho, é claro O primeiro, vamos colocar outro div. Então, vamos colocar assim. E no div do primeiro, vamos realmente escondê-lo na tela do celular, não faça bagunça Então, faremos blocos ocultos e médios. A propósito, na tela do celular, esse *** brilhante não é muito visível Então, no final, você pode simplesmente escondê-lo e bloqueá-lo na tela média acima , porque lá está praticamente visível. Mas na tela do celular, toda a tela está cheia de todos os elementos e todo o conteúdo que temos lá Então, é pouco visível lá, mas você pode fazer assim. Agora vamos salvá-lo. E vamos mudar o valor. Então, o primeiro será 100, 216 cem. O segundo efeito da China, podemos movê-lo um pouco. Lá, podemos fazer o top zero e o tamanho, podemos usar 1.200 Agora vamos verificar a página. Então, nós temos isso assim. Ainda temos a rolagem vertical, então vamos corrigi-la. Basicamente, precisamos mudar os tamanhos. Precisamos ter cuidado com isso. Vamos usar algo como 1.412.000 para ter um efeito como esse Agora também podemos colocar esse efeito brilhante em alguma outra página, mas precisamos importá-lo para lá, é claro , vamos Por exemplo, se entrarmos no portfólio, lá iremos para algum lugar entre a lista não ordenada e o DIF. Vamos lá. Vamos colocá-lo lá. deixar aí apenas um efeito de brilho. Vamos colocar lá o tamanho zero. Podemos usar 900. E vamos fazer esses transbordamentos agora porque devemos ficar bem E agora você pode ver o erro. Portanto, não se esqueça de importá-lo assim. Vamos verificar a página. Agora você pode ver isso nos portfólios. Agora você pode brincar com os efeitos de brilho como quiser, colocá-los na página e assim por diante Agora, também estando no portfólio, como colocamos o efeito Shining, não esqueça que ele tem algum índice Z, então precisamos ir até a página e aumentar o índice Z lá Então, se verificarmos, ele tem um índice Z de um. Então, precisamos ir para o primeiro dif, colocar o índice Z de dez e salvá-lo Em seguida, o segundo, defina o índice para dez, salve-o. Agora vamos testar. E está funcionando até mesmo lá. Ok, e é isso. Vamos verificar como é.