PROJETO CRIATIVO com HTML, CSS e JAVASCRIPT: A criação de um site com animações

Seja muito bem-vindo ou bem-vindo a mais um vídeo do canal. E no vídeo de hoje, a gente vai criar o Deb Club Store, essa loja de aparelhos eletrônicos que vai ser um baita projeto para você aprender sobre HTML, CSS, JavaScript, sobre animações e a gente vai colocar esse site no ar também. Então dá para você fazer esse site para um cliente ou para impressionar na sua entrevista para programador. Eu sou Rodolfo Mori e bora Para mais um vídeo do canal. Só um detalhe importante, nesse vídeo a gente vai utilizar HTML, CSS, JavaScript, a gente vai

também falar de animações, a gente vai falar de display flex e todos esses conteúdos eu tenho vídeos exclusivos deles aqui no canal, então vou deixar no card da descrição alguns vídeos que podem te apoiar caso você não entenda alguma coisa desse vídeo, tá? E lembrando que toda segunda-feira a gente tem live aqui no Canal para te ensinar tudo e mais um pouco sobre programação e como se tornar um programador. Se quiser participar das nossas lives é só se inscrever aqui no canal ou clicar no primeiro link da descrição. Então bora lá pro vídeo de hoje.

Vamos lá então começar a nossa aplicação. Para começar aqui no meu VS Code, eu vou clicar em abrir uma pasta. Você vai aqui em cima, arquivo, abrir, como você preferir. Eu vou escolher uma pasta aqui na minha área de trabalho Mesmo. Deixa eu colocar aqui. Área de trabalho. Vou criar uma pasta chamado Dev Club Store, que é o nosso projeto. Vou dar dois cliques e aí já vou ter aqui a minha pasta aberta no VS Code. Deixa o VS Code parar de encher as paciência aqui para ver. Vou criar um arquivo chamado index.html. Vai ser

muito importante nosso arquivo chamar index.html HTML, principalmente no final da aula, quando a gente vai colocar a nossa aplicação no Ar. Além de a gente fazer nossa aplicação com a ajuda da nossa super apoiadora, a Hostiggator, a gente vai colocar no ar, tá? E aí eu vou digitar o comando mágico, que é HTML, e eu vou escolher aqui HTML 2.5 e ele vai criar uma estrutura básica de HTML, nada que você não tenha visto no nosso curso de HTML. Se você não fez ainda, corre lá. Aqui no nosso title, eu vou colocar Dev Club Store.

Perfeito. E aí é uma coisa que eu quero que você Tenha em mente, que eu ensino muito para meus alunos do Dev Club, é principalmente você que tá no começo, não saia codando que nem um louco. Comece a analisar as estruturas e com o tempo você vai pegando isso. Mas antes de sair codando, faça um planejamento do que você vai codar. Por exemplo, aqui em cima a gente tem um menu, um, a gente chama de reader, né? A gente tem um cabeçário aqui no cabeçário eu tenho escrito Deb Club Store de um lado e do

Outro lado eu tenho escrito home produtos e contato. Beleza? Aqui no centro eu tenho esse carrossel, mas dentro do carrossel eu tenho o quê? Eu tenho uma imagem e eu tenho o quê? Uma caixa onde tem vários textos e um botão. Saiba mais. Aqui embaixo eu vou ter o quê? Essa parte aqui, ó, que vai ser onde vai mostrar qual, quantos itens a gente tem no nosso carrossel. Então, para começar com a estrutura do HTML, vamos fazer isso. Eu vou começar então Com a parte de cima com o header. Então, eu vou ter o header

ali em cima e aí eu tenho uma tag no HTML só voltada pro header. Dentro do header, de um lado, eu vou colocar uma div, pode ser uma div mesmo, e ela vai ter ali o Dev Club Store, onde a gente vai colocar esse texto aqui, tá? Tudo que eu for criando, eu já vou criar as classes também para que quando a gente começa o CSS, já tem as classes pra gente saber quem é quem. E a gente pode estilizar tudo esse cara. Eu vou chamar de logo, tá bom? Logo. Eu vou fechar aqui por

enquanto, acho que vai ficar melhor. Ah, além disso, no header, eu vou ter um menu de navegação, que é o nave, que é esse menu de navegação aqui, ó. Tenho três itens. A gente chama esse menu de navegação, de nave. E aí eu tenho uma tag para ele também. Dentro dele eu vou ter uma lista. Para listas no HTML, a gente usa a L, que é a lista. E cada item da lista é uma LI. Então eu vou ter a li Home, eu vou ter uma li de produtos e de contato. Produtos e uma de

contato. Perfeito. Então a estrutura do nosso header tá pronta. E aí uma coisa que eu gosto também é de ir sempre vendo o código, mesmo que ele esteja bem cru, para ver se tá funcionando. Eu uso uma extensão chamado live server. Você vai aqui no VS Code, nos quatro quadradinhos e eu tenho essa extensão chamada Live Server. Você instala ela e com ela instalada você vai Clicar com o botão direito aqui no seu arquivo, Open WiF live Server. Ele vai abrir com live server e aí ele já abre o seu navegador com o nosso site

que por enquanto tá cru, tá? Mas vamos chegar lá até o final da aula a gente vai ter isso tudo aqui. Então fique até o final. É um desafio para você que talvez esteja já começando, mas vai ser um projeto muito legal para você colocar no seu portfólio. Agora vamos continuar. A gente tem essa parte central ali agora Para fazer essa parte central. Eu vou começar criando uma uma div, né? Uma caixa para colocar todo mundo. Perfeito. Inclusive, se você quiser usar HTML semântico, a gente pode utilizar aqui o main. O main normalmente é uma

tag que a gente usa pra parte principal da nossa página. No caso, a nossa parte principal é essa aqui. E eu já vou até dar uma classe para facilitar a nossa vida. Vou chamar de contêiner. Eu sempre gosto de chamar essa parte principal da aplicação Com a classe contêiner, tá? Aí aqui dentro eu vou ter uma div. Ã, essa div aqui que a gente vai fazer, vai colocar primeiro. A gente vai fazer o seguinte, eu vou começar colocando esses círculos aqui. Tá vendo? Esses círculos que a gente tem aqui no fundo, a gente vai criá-los

com CSS. Porém, para eu estilizar, tem que ter alguma coisa. E esse alguma coisa vai ser div. E aí eu vou criar quatro dives com a classe, vou chamar de circle. Eu vou colocar em Inglês, tá? Alguns projetos eu coloco em inglês, alguns em português, porque tem empresas que gostam de classes em português, tem algumas que inglês, então eu vou variando, mas nada que um Google Tradutor não ajude. Sem esse miged, ah, eu não sei inglês, não dá para virar programador. Para com isso que eu também não sabia inglês. E eu virei programador, trabalhei em

grandes empresas, eu aprendi inglês depois para trabalhar na gringa, para ganhar bem. Inglês não é importante agora, combinado? No futuro, se quiser ganhar em dólar, tranquilo. Então, essas quatro divs e a gente vai est utilizar para fazer aquelas bolinhas de de fundo. E aqui eu vou chamar de tex circles, tá? O tech circles vai ser essas bolinhas aqui, ó, que vão ficar de fundo, que deu um charme ali na aplicação. Por enquanto, se a gente voltar aqui, eh, elas não vão aparecer, não vai aparecer nada. Mas é isso mesmo. Depois a gente Vai precisar de

CSS para aparecer, porque a div vazia não é nada, não. Não tem nada. Aqui dentro ainda do nosso da nossa parte principal, a gente vai ter uma classe que eu vou chamar de list, que vai ser a lista desses itens que ficam passando aqui, ó. Vai ser essa lista, tá? Aí aqui dentro a gente vai ter os nossos três itens, combinado? Aí a gente vai fazer o seguinte, essa primeira div vai ser sempre o item que tá ativo. Tá vendo que sempre tá Trocando um item? Então sempre tem um item ativo, um item que eu

tô vendo ele ali na tela. Então essa primeira div vai ser sempre do item ativo. Eu vou chamar de ela ela de item active. Perceba que esse active ele é ele não tem um traço porque aqui são duas classes. A gente vai ter outras divs, a gente vai ter três divs, só que só uma delas vai ter o item active. Por quê? As que não tiverem essa classe Active, elas vão estar invisíveis, elas vão ficar lá atrás, ó, Invisíveis. Somente a que tiver ativo, tiver essa classe active, é a que vai ficar na frente da

tela. Então, a gente vai começar com a primeira das três divis, sendo a que tem essa classe e aí essa classe vai fazer com que ela fique na frente. Depois, com o JavaScript, eu vou tirar essa classe daqui e vou colocar ela aqui. Depois eu tiro daqui e coloco aqui. Só que a gente vai fazer tudo isso com o JavaScript. Então, quando eu clicar aqui, o que que ele vai Fazer? Ele vai trocar aonde está a classe ativa e aí ele vai trazendo eh outra div diferente ali pra frente, tá certo? E aí dentro das

minhas divs, eu vou ter o seguinte. Primeiro eu vou ter uma div que eu vou colocar a imagem dentro dela, que é essas imagens aqui. Primeiro eu vou ter isso. Eu vou colocar uma classe nela também. Eu vou chamar essa de ã product traço img, que é a imagem do Produto, né? E aqui na minha imagem eu também vou dar uma classe nela. Vou chamar de Não, essa eu não vou colocar a classe porque eu puxo ela por essa classe aqui. Acho que não vai precisar. Eu vou colocar o o src imagens. Eu vou deixar

elas aqui embaixo para você, tá? Mas eu vou criar uma pasta aqui chamada IMG. Deixa eu puxar as imagens aqui do meu computador. Eu deixei separado numa pasta. Deixa eu pegar Aqui. E tá aqui, ó. Então, temos três imagens. E essas vão ser as imagens que a gente vai usar no nosso projeto. Eu vou começar eh colocando aqui a imagem do Apple Watch. Então vou colocar aqui, ó, src barra image ã Apple Watch, tá? Se você voltar, ó, perceba a estrutura, eu tenho minha div maior e aqui dentro eu vou primeiro ter uma div para

guardar o meu item, que por enquanto tá um caos, mas deixa assim, vai ficar feio o CSS Que vai resolver nossa situação. Aqui a gente pode colocar um texto alternativo. Eu vou escrever Apple Watch, tá? Deixa eu ver se eu não tô na frente de vocês. Eu tô um pouco na frente. Deixa eu fechar aqui, ó. Criei uma pasta para ficar mais organizadinho. Coloquei as imagens lá. É só arrastar e colocar aqui. Beleza? Aí eu ainda tô aqui dentro, eu coloquei a minha imagem, mas para um lado eu tenho a imagem e pro outro lado

eu tenho esses textos. Eu Tenho que criar agora a estrutura desses textos. Eu vou criar uma div chamado content. Content é conteúdo inglês. Content. Ã, ó, eu tô usando inglês, mas você vê que é um inglês bem simples, ó. List. Lista. Item. Item é item em português e inglês. Active, ativo, product, produto, content, conteúdo. Então é o inglês, é um inglês bem bem bem tranquilo. É, eu vou ter alguns parágrafos. Então, por exemplo, esse primeiro parágrafo aqui vai ser novo Lançamento, novo. O meu VS Code. Não, quando eu o mesmo eu uso Mac, né? Não

faz diferença. Mac, Windows, Linux, mas eu gosto do Mac. E aí, ah, o Mac eu preciso é ter um atalho para Ciddilha. E o mesmo atalho para cidilha no Mac é o atalho para abrir esse menu. Deixa eu ver. É, ele não vai, ele não deixa. Aí eu tenho que fazer uma gambiarra. Eu tenho que ir em algum lugar fazer o Ciddidilha, copiar o Ciddilha e colocar aqui. Falar nisso, eu Não é normalmente. Vocês estão com que computador? Seu computador é Windows, é Linux, é Mac, comenta aqui embaixo. Sinceramente não faz diferença. É gosto. Eu

já trabalhei com um programador que gosta de Linux, de Mac. Tem uns que odeiam Mac, gostam de Linux. Alg odeiam Linux e Mac gosta de Windows, não sei, cada um é bem de gosto. Eu queria saber qual que é o seu gosto ou o que que você tem hoje. Coloca aí embaixo. Ã, aí eu vou ter outro parágrafo. Eu Posso colocar uma classe aqui para ficar melhor, ó. Vou colocar uma classe, vou chamar esse cara de product. Vai ser uma tagzinha que vai ficar ali em cima. Aí aqui eu vou ter o nome agora, Apple

Watch Series 10. Vou copiar aqui, ó. Deixa eu ver se ele, vamos digitar aqui, ó. Apple Watch. series 10. Você coloca o que você quiser. Aqui também vai ter uma classe, vai ser a product name por último, mas não menos Importante, a gente tem ali a descrição. Eh, aqui a gente pode colocar uma classe chamado producto. Eu vou colocar só description. Des description, tá? Essa descrição ela é meia longa. Deixa eu copiar aqui. Se ele parar de se mancher, eu tenho que aumentar o tempo disso aqui. Tá muito rápido. Eita, ele não tá deixando eu

copiar. Pera aí, deixa eu fazer uma gambiarra aqui para Copiar. Deixa eu selecionar aqui, ó. Só. Deixa eu dar um zoom aqui para você enxergar. Mas consegui pegar aqui o texto para ficar mais fácil. Os próximos eu vou eu vou pegar aqui de uma forma mais fácil. Salvei. E por último, mas não menos importante, eu tenho um button ali embaixo escrito saiba mais. A gente pode colocar uma classe chamada btn, tá? Eu vou salvar. E aí, voltando aqui, ó, deixa eu Fechar aqui esse menu. Tá aqui todo mundo, ó, o botão, novo lançamento, Apple Watch,

tudo mais. O nosso objetivo agora é isso, colocar tudo na tela, tudo muito bagunçado, mas é por enquanto é isso, porque o HTML tem só essa responsabilidade. Você já assistiu o curso de HTML aqui do canal? Se não assistiu, tá vacilando, assiste aí depois. Agora a gente não vai ter que fazer tudo igual, por eu tenho essa div, dentro dela eu tenho todos os meus Itens, mas no fundo vai ser igual pr as três divises. Então eu vou copiar aqui, ó. Tá certo? Lembre-se que olha só a minha estrutura, eu tenho essa essa classica é

o item. Esse aqui tá ativo, mas os outros eu deixo o item e eu vou colar aqui e eu vou colar aqui. Por quê? A gente só vai mudar primeiro a imagem. Então eu coloco aqui, ó, barra. Eh, o segundo é o quê? Airpods. O o dois AirPods. Então, o segundo vai ser AirPods e o terceiro vai Ser o Vision Pro. Inclusive, daqui a pouco eu te conto uma coisa sobre esse vision pro. que eu vivenciei. Daqui a pouco eu conto. Aí aqui você muda, ó. Eu tô um pouco na frente de vocês. Aqui você

coloca Vision, Vision Pro. Aqui você coloca que é esse cara. Ele é o Airpods Max, inclusive AirPods Max. Eu tenho um maravilhoso. Isola ruído para caramba. Nossa, Rodolfo pagou uma fortuna. Não, cara, eu fui ir numa viagem, comprei lá fora, foi bem mais barato. Aqui no Brasil acho que é caro pra caramba, mas lá fora foi barato. Bela aquisição, é um belo fone, ele isola muito, cara. Você coloca isso aqui, você liga o o isolamento de ruído, cara, você não ouve nada, nada. Incrível. Você toma até um susto. Você tá num ambiente maió barulhento, aí

você aperta o botão, liga o isolamento de ruído, cara, o mundo Desaparece, você fica imerso. É bem legal. Bem legal. Estuda bastante, vira programador que você compra todas as bujingangas eletrônicas. Eu amo essas coisas. E aí a gente precisa pegar os textos aqui. Esse aqui, ó. Deixa eu clicar aqui com botão direito de novo. Ã, Vision Pro. Deixa eu pegar o texto. Esse aqui é auto performance. Deixa eu pegar aqui. Ã, esse aqui é alta performance. Auto performance. Esse aqui No Vision Pro. Então você escreve aqui, ó, Apple Vision Pro. Ã, esse aqui que é

o segundo é o, é qual é? O Apple Watch Airpods Max. E aí o AirPods Max Premium. Aqui é son premium. E aí a descrição, ã, pra gente não perder muito tempo, eu vou dar um pause aqui, vou pegar rapidinho e já volto. Pronto, já peguei Lá. Então aqui do AirPods, experimente o som em sua forma mais pura, cancelamento de ruído. Aí você coloca o que você quiser, ó, tá o texto aqui. Se quiser pausando e copiar, ou senão você coloca o que você quiser. Pede pro chat GPT gerar um texto para você, tá? Description,

como a gente tinha feito. E aqui, ó, é, eu peguei o texto do Vision Pro, realidade aumentada imersiva com Apple Vision Pro, inovação, alcance dos óleos. Então, criamos nossos três aqui, Tá? Daqui a pouco a gente vai fazer esse efeito de trocar, mas eles estão criados. Para finalizar o HTML, tem essa parte aqui de baixo que a gente já vai fazer. Só vamos conferir, ó. Tá os três aqui bonitões. E agora vamos fazer essa parte de baixo. Só toma cuidado que, ó, olha os fechamentos bonitinho aqui das tags. Dá um espacinho para você ver essa

primeira, ó. Essa segunda só a primeira que você deixa com o Active, tá? Ó, o Active é junto, ó. é junto o active aqui, ó, é junto. Ô, desculpa, não é junto, é separado. Aqui não tem traço, porque são duas classes separadas, não é a mesma classe. Então, com isso, a gente já pode continuar. Para continuar a gente precisa de só mais duas coisas, uma que eu já tava esquecendo, mas olhando aqui, eh, eu lembrei, a gente tem que criar essas setinhas aqui, ó. Tá vendo, ó? essas setinhas e a gente tem que criar também

esse indicador. As Setinhas, eu tava esquecendo. As setinhas, tem vários jeitos de eu pegar essa setinha. Eu vou fazer de um jeito bem legal que aí você pode aprender algo que você pode usar em outras aplicações. Tem um site que é o Bootstrap Icons. Hum. Aqui, ó, Bootstrap icons, tá vendo? Bootstrap icons. Pesquisa aí. E aí, ó, aqui tem vários ícones, ó. Muitos, muitos, ó. Tá vendo, ó? muito, muito, muito, muito, muito, muito Ícônico legal. E aí, pra gente encontrar essa setinha, a seta inglesa é arro. E aí você pode escolher a arrow que você

gostar. Ah, você pode escolher essa aqui, essa aqui, essa aqui com fundo, com cor de fundo, sem cor de fundo. Então, por exemplo, eu gostei dessa. Deixa eu ver se tem pro outro lado. Ã, ó, tem essas daqui também. Ah, essa aqui tá tá legal, ó. Eu gostei dessa aqui, que aí tem pro lado esquerdo e pro Lado direito. Então, a gente vai fazer o seguinte, você vai clicar nela. Vamos pegar primeiro o do lado esquerdo aí, ó. Tá vendo aqui embaixo que tem essa copy HTML? Você vai copiar isso aqui, vai colar no seu

HTML. Ó, cliquei aqui para copiar. Isso aqui é um SVG. Então, basicamente, o SVG é um código que acaba virando uma imagem. Aí a gente vai continuar, ó. Vamos lá. Eu vou continuar dentro da div list. Desculpa. Dentro da divê, ó, eu vou Continuar dentro da divê. Então, dentro da div container tem clica com o botão direito, se o seu tiver desorganizado, formatar o documento. Cuidado para não entrar no lugar errado. Então, dentro da div container dá até para fechar, ó, para você não confundir. Então, vou até fechar aqui, ó. Tá vendo? Eu vou fechar

o text circle, eu vou fechar o o list. E aí depois desses dois, ó, eu só cliquei nessa setinha aqui, ó, que ele fecha, o VS Code Fashion, ó, para você não Confundir o código. Você vai, você vai criar mais dois aqui. A gente vai ter mais duas divis, uma que vai ser o os arrows, então vou chamar de arrows, que é as nossas setas, e eu vou ter outra aqui embaixo que vai ser o nossos indicators, que vai ser aqueles indicadores, indicators, aquele lá que mostra em que tela que a gente tá. Perfeito. Então

a gente vai ter duas diviss. A div dos aqui do das dos arrows, a gente vai ter dois botões. Dois botões, button um e botão dois, que é o esquerdo e direita. Então esse aqui eu vou colar. Eu não lembro qual que é esquerda, qual que é direita. Então depois a gente vê. É o primeiro acho que pode ser a esquerda, depois a gente vê. Aí eu vou voltar agora. Vou pegar o direita, que é esse aqui, ó. Lembrando que você pode pegar o que você quiser, tem vários modelos ali, você pega o que você

quiser. E aí esse aqui eu vou colocar no outro botão. Tranquilo? Aí a Gente vai colocar uma classe, eu vou chamar de arrow btn, tá? Lembrando que como tem um tracinho aqui, é uma classe só. Se eu tivesse, se eu não tivesse tracinho, aí eu teria duas classes separadas, tá? A mesma classe eu vou copiar e vou colar nesse aqui de baixo, tá? Aí, se você quiser facilitar a sua vida, depois vai ajudar bastante até no JavaScript. A gente vai colocar um ID aqui. Poderia ser uma classe, poderia, mas vou colocar um ID para ser

Diferente. Esse aqui eu vou chamar de prev. Prev é o que é o quando eu quero um antes da esquerda. E aí eu vou colocar um ID de next, que é o próximo. Então eu tenho o prev, que é o antes, e o depois o next. Vou colocar esse ID aqui que vai facilitar a nossa vida depois no JavaScript. Agora eu tenho aqui os indicators que vão ficar ali embaixo. Aqui dentro eu vou ter uma div que vai ficar aqui meus numbers que vai começar Com o número um. Depois a gente vai trocar esses números.

Fica tranquilo. Os indicators são esses caras aqui, ó. Cadê? Cadê? Esses caras aqui embaixo. Tá vendo? Então, primeiro tem o número e aí eu vou ter os pontinhos aqui, ó. Tá vendo que são pontinhos? 1 2 3 pontinhos e a gente vai trocando eles. Eu vou dar uma classe, vou chamar de dots. Dots é pontos em inglês. E aí eu vou ter três dots, tá? 1 2 3. E vai ser a mesma lógica. Os dots, eles vão ter uma classe Geral pros três e a classe active. Então quem tiver a classe Active vai ser o

ativo da vez. E só um pode ter a classe active, certo? Por quê? Só o que tiver a classe Active que vai trocar de cor, tá? Então lá no já no CSS isso vai fazer sentido. A gente vai criar uma classe especial para esse cara de HTML. É basicamente isso. Só tem mais uma coisinha pra gente fazer aqui, mas a gente vai fazer daqui a pouquinho, tá? Eu vou abrir já esses Caras, você não tá se confundindo mais. E agora a gente salva nosso HTML. E agora vamos pro nosso CSS. Para começar aqui, a gente

vai criar o nosso arquivo Styles. Então, eu vou chamar de styles. Eu gosto de chamar styles. Por quê? Porque eu gosto. Eu sempre ensino o padrão das empresas para vocês e as empresas normalmente chamam esse arquivo de styles. Aqui no head do HTML, se você assistir o nosso curso de HTML, você sabe que no head a gente coloca as Configurações e uma delas é onde vai ficar o CSS. E aí, que que você faz aqui no head? Você escreve link 2.css, essa opção, você vai clicar e aí ele vai gerar para nós o link com

o arquivo CSS e só coloca aqui o nome correto do seu arquivo. O meu é styles. Tá bom? Organizar aqui. Agora o meu HTML já está linkado com o CSS. Lembrando que toda segunda-feira a gente tem live. Na live rola curso de HTML, de CSS, JavaScript, de React, de Node, rola projeto. Então Se você não tá se cadastrado ainda, clica no link da descrição, pô. Tem que participar toda segunda-feira aqui no canal às 8 horas. Então já se cadastra para as lives e aqui embaixo clica no sininho, cara. Senão o Instagram, o YouTube não te

ensina, não te fala quando tem vídeo novo. E baguncei tudo. Então vamos lá. Como que eu gosto de começar o meu CSS? Eu gosto de usar um cara que é o seletor universal. Por que universal? Ele vai selecionar todo Mundo. E a gente vai fazer alguns resets. Por exemplo, eu quero margem zero, pading zero. Eu gosto do box sizing como border box. Eh, eu já vou colocar o list style como nome, já vou explicar que que é tudo, tá? E já vou colocar um fonte family na nossa aplicação que a gente já vai pegar, que

vai ser o monte cerrar. Não, não tá aqui o auto complete. Que que é esse seletor universal? Eu vou salvar. E agora você vai perceber, voltando a Aplicação, que tá tudo sem margem agora. Tá tudo juntinho. Por quê? Por padrão, os navegadores colocam margem, colocam pading. Pading é o espaçamento, só que do lado de dentro, igual um botão. Se eu pego um botão e aumento o pading dele, ele vai crescendo, porque eu tô aumentando de dentro para fora. Isso é o pading. O b size eming border box é a forma que a gente vai calcular

as distâncias. O list style, como nome é o list style é aquele pontinho que ele Coloca nas listas, ó. Lembra que tinha uns pontinhos aqui do lado, ó? Se eu tirar o list style, ó, o que acontece? Vou atualizar só porque eu falei, ué, por que que ele não tá ficando? Pera aí. Normalmente as listas ele coloca um tracinho do lado, não tá colocando. Ah, não sei porquê, mas de qualquer forma coloquei o list style como n, tá? Para ele não colocar de jeito nenhum aqueles pontinhos aqui do lado da lista. Isso aqui é uma

lista, então não tem Pontinho. E aí isso aqui já receta o nosso código, tá? Aí a gente não tem problema. Falando de Font family, vamos lá no Google Fonts. Google Fonts, que a gente vai usar duas fontes aqui na nossa aplicação. Eu vou clicar aqui no Google Fontes. A gente vai usar uma fonte geral, ó, aqui pra maioria das coisas, para várias coisas, tipo esses daqui. E para outras coisas, a gente vai usar uma fonte mais modernosa. Ã, aqui no Google Fontes, a gente vai procurar Uma fonte chamada Monte Serrá. Monte Serrá, essa aqui, ó.

Certo? E aí você vai clicar em get font, ó, get font, beleza? Clicou em get font, getemb code, ele vai gerar a o código maluco aqui para você. E aí você vai clicar em copiar. Ah, ele ah, pera aí, ainda não. Eu eu vou deletar, ó. Ele tava com outra fonte aqui. Vamos fazer de uma vez só que fica melhor. Eu vou Você já adicionou esse aqui, então, por assim dizer, esse aqui já tá no carrinho. Aí a Gente vai, ó, já tem uma fonte selecionada. Agora a gente vai utilizar outra fonte que eu esqueci

o nome. Deixa eu pegar aqui. Eu deixei uma colinha com as coisas que a gente vai usar. Deixa eu ver o nome da fonte que a gente vai utilizar. Orbitron. Essa vai pesquisa aqui, ó. Orbitron. Beleza. Orbitron. Get font get badge code. Agora sim, ó. Ele ele vai me mandar de uma vez só o código da Monteserrá e da Orbitron. Tá vendo? É Esse código maluco aqui. A gente vai clicar em copy code. Ó, eu tô aqui na frente de vocês, ó. Copy code. Tá vendo, ó? Esse código aqui. E ele já fala que a

gente tem que colocar no head do nosso HTML. Então, vamos lá no head do HTML. Pode ser em qualquer lugar. Eu vou colocar aqui eh em cima do link de styles e vou colar, tá? Clica com o botão direito, formatar o documento e aí já tá a nossa fonte. E aí eu vou começar utilizando a Monte Serrar para tudo. Então você pode até copiar aqui, ó, fonte Family. Deixa eu dar um zoom aqui, ó. Tá vendo? Fonte Family Monte Serrá, Sanerif. Vou copiar. E aqui tudo da minha aplicação vai ter o Monte Serrá, exceto alguns

lugares que a gente coloca manualmente, tá? Então a nossa primeira fonte já está lá. Se você voltar aqui, você vai ver que já tá uma fontezinha mais agradável, mais bonita. E agora vamos continuar. Agora vamos est utilizar o nosso body, o nosso body. Então a gente vai aqui pro nosso body, tá certo? A outra coisa, aqui no canal também tem curto CSS. Então se você tá perdendo o CSS já sabe, deixa o link aqui na descrição para você dar uma olhadinha no nosso curso de CSS, combinado? O nosso body eu vou pegar aqui na minha

colinha ali, se eu tô olhando para cá que eu tô pegando minha colinha. Por, meu amigo, você acha que eu vou gravar cor, né? O nosso body vai ter uma cor de fundo meio maluca, que é Essa aqui, tá? Então, e essa cor de fundo eu vou salvar agora. Mas tá vendo que já tá mais bonitinho o fundo? Eu vou colocar também um color branco. O branco eu sei de core, meu amigo. O branco eu sei de core. Font size e uns 16 pixels. Tá bom. E agora a gente vai dar overflow como hiding. Que

que é overflow hiding? Overflow agora, ó, tá vendo que tem um scroll, ó? Tô scrollando a tela. Eu não quero scroll. O que tiver a mais, ele vai esconder. Overflow hidingl hiding é Esconder, ó. Não deixa mais eu dar scroll na tela. E é isso que eu quero, tá? Então o body é isso. Agora o próximo é o reader, né? A gente tem o body e aí depois vem o header. O nosso reader eu já vou dar um position fixed e já vou fixar ele bem lá no topo. Então eu dou um top zero porque

ele fica bem bem bem lá no topo. É, eu vou colocar um padging também de 50 pixels. É, não, uns 20 pixels em cima, embaixo e uns 50 pixels dos lados. Vou colocar aqui, ó. Ele já Tá dando um, é, acho que 50 ficou. Depois a gente vê colocar talvez um pouco mais que 50, mas por enquanto tá bom. Vou dar um display flexa, tá? O display flex deixar um item do lado do outro. Já tá, ó. Já tá um do lado do outro. Mas eu quero um para cada canto. Eles estão muito juntinhos. Eu

não quero juntinhos. Então aqui a gente tem um cara que chama é justify content. Cara, às vezes a memória falha. E aí a gente tem o Space Betwin. Eu já fiz isso milhares de vezes, mas é normal, tem que pesquisar bastante. Eh, Rodolfo, por que que ele não tá se distanciando? Porque tem que dar um tamanho para ele, né? Eu vou falar que ele que o widt vai ser 90 VW. Que que é o widtit? A largura. Então, a largura 90 VW. 90 VW é 90% do tamanho da tela. Ah, agora sim, meu jovem. Agora

sim, ó. Foi, foi um para cada lado. Um para cada lado, cada um no seu quadrado. Ã, que Mais que eu preciso? Eu vou dar uma line items como center pros itens ficarem alinhados ao centro. Tanto na ah o space between tá aqui na horizontal. Esse cara vai alinhar na vertical. Eu acho que é isso. Eu vou dar um Z index também aqui três, tá bom? Para garantir que ele vai ficar sempre na frente de todo mundo. E eu acho que é só. Agora eu preciso estilizar dentro dos itens, né? Então, a gente tem primeiro

o nosso logo, né, que é aquela letra. Então agora é classe, Então é pontinho logo. Eu vou ter um font family que vai ser aquele fonte family, vamos lá buscar no Google, que é aquele orbitron aqui mais para baixo, ó. Tá vendo, ó? Fonte family orbitron sanserif. Então vai ser essa fonte malucona. Um fonte size. Eu vou colocar esse cara aqui em RM, mais fácil. 2 RM, tá? Isso aqui é uma medida de tamanho. Tem vídeo aqui no YouTube explicando. Vou gravar um vídeo. Esse vídeo que eu Gravei de RM anos já. Vou gravar um

atualizado. Fonte weight 900. Fonte weight é a a grossura da da fonte. E aí agora eu vou ter que pegar ali na minha colinha porque a gente vai ter, deixa eu pegar ali, uma coruca e a gente vai ter também um text shadow. Text shadow é isso aqui, ó. Ó, tá vendo que tem meio que uma fumacinha em volta, ó, ó, do texto. Isso aqui é um text shadow. Como que eu eu aprendo fazer isso, Rodolfo? Nem Precisa. No Google, se você pesquisar, tem sites que fazem isso para você e ele te joga o código

pronto, tá? Pesquisa no Google, tem vários sites que fazem isso para você. Já mostrei isso em vários vídeos aqui no canal. Agora a gente tem quem? O nave, a U e a LI. E aí, que que a gente faz? Eu falo o seguinte, ó. Eh, vai no he, dentro do header você vai encontrar uma nave e uma nave e dentro da nave um L, tá? Porque eu garanto que a nave e a L que ele vai estilizar é Desse header. Então, ele vai procurar um header que tem uma nave dentro, que tem um L dentro.

É engraçado falar nave, né? Parece que eu tô, eu que eu sou o Buz Lighter. Falei dis: "Cadê o Buz Lighter?" Ih, tá ali atrás. Perdi o Buz Lighter. Então, vamos lá estilizar. Eu vou dar um display flex nesse cara e vou dar um gap de uns 48 pixels. O display flex vai deixar um item do lado do outro. Eita, deixa eu tirar o zoom, né? Eita, 100%. Ó, o display flex deixando Um item do lado do outro e o gap ele cria um distanciamento, distanciamento entre itens. Aí eu procuro um header que tem um

neve, que tem um L, que tem uma Li. E aí agora eu vou est utilizar esse cara. Eu vou colocar um cursor como pointer para ficar a mãozinha. Quando eu coloco o mouse em cima, boa, já tá o cursor como pointer. Eu vou colocar esse cara como position relative, vai facilitar o que a gente vai fazer daqui a pouquinho. E vou colocar um padging de Cinco pixels em cima e embaixo e dos lados zero. Por que que eu tô fazendo isso? Bem, quando eu coloco position relative, fica mais fácil de eu fazer algumas coisinhas que

a gente vai fazer agora. Que que a gente vai fazer agora? Olha só, a distância ficou diferente. Ah, mas enfim, se quiser aumento o pading lá. Eu gostei assim também. Vita diferença. Ó, a gente quer fazer esse efeito. Tá vendo esse efeito aqui, ó, de colocar o mouse e ficar aparecendo um Negócio embaixo. A gente vai fazer isso utilizando um cara. Vou pegar todo mundo, toda essa galera, toda essa galera. E a gente vai utilizar um cara chamado after. Que que é o after? After em inglês é depois. Então, depois do item eu vou fazer

alguma coisa. Como assim depois? Bem, imagine que eu tenho aqui o meu texto, a gente tem o after e o que que é o after e before em Inglês, before é antes e after é depois. Ou seja, eu posso colocar uma coisa antes e depois do texto. Rodolf, mas esse cara tá embaixo. É, mas eu posso colocar um after que vem depois dele e posicionar. Exatamente. Por isso que eu coloquei o position relative. Quando eu coloco poso, se eu tenho um item que tá ali no mesmo e eh por assim dizer, o after ele tá

dentro do contexto da LI. Imagina, li tá dentro e o aperter tá ali junto. Quando eu coloco pos relative, Ele facilita e eu colocar alguns posicionamentos. Que posicionamentos que a gente vai fazer? Primeira coisa que eu preciso colocar no after é um cara chamado content, que vai ser vazio. Se eu colocasse abacate, olha só que interessante, o conteúdo que eu coloco aqui, ele aparece na tela, ó. Tá vendo, ó? Contatos abacate after. Depois, ó. Depois do item, ele colocou abacate, mas eu quero vazio, porque eu não vou colocar um conteúdo de de texto, eu vou

Colocar ali um CSS. Eu vou colocar um position absolute que eu quero deixar exatamente aonde ele ele onde eu quero. Od, por que que você colocou position relative? Esse cara aqui, por assim dizer, ele é filho desse aqui. Imagine que eu tenho minha li. Imagine que eu tenho mi. Eh, e dentro da minha LI, então eu tenho minha li aqui. Imagine que o after é como se ele tivesse aqui dentro, ó. Então, eu tenho o meu texto e o after é como se tivesse Aqui dentro, por assim dizer, né? Então, eu tenho aqui por assim,

não, não tem tag after, tá? Mas eu tô colocando só para você entender. E eu tenho o before. Então, esse cara aqui, ele é filho da LI. Quando eu uso o position absolut, o o position absolute permite que eu coloque o item exatamente onde eu quero na tela. Então eu coloco, por exemplo, left 30 pixels, top, é como se fosse o batalha naval. Eu sei, eu quero exatamente posicionar ele. Se esse cara Aqui eu não colocar nada, essa posição vai ser em relação à tela inteira. E eu não quero em relação à tela, eu quero

em relação ao pai dele, senão vai ficar muito difícil da gente posicionar. Então, quando eu coloco posição relative, agora o posicionamento dele vai ser em relação ao pai dele, que é a LI, tá certo? Por isso que eu coloquei o posição relative aqui. Ã, tá? Mas o posicionamento dele vai ser qual? Eu vou colocar left Zero, boron zero, boron é baixo. E aí o edit desse cara vai ser zero também. A largura dele vai ser zero, o height dele vai ser dois pixels e ele vai ter um background color que eu vou pegar ali porque

é um background color malucão. Vou salvar. E cadê Rodolfo? Não vai tá por o Widit tá zerado. Se eu colocar o wibit 20 pixels e salvar. Ah, agora apareceu Aqui. Tá vendo, ó? Ó, se eu colocar o ID 40 pixels agora apareceu aqui. Só que eu não quero que esse cara apareça, eu quero que ele só apareça quando eu coloque o mouse em cima, tá? E como que eu faço isso? Eu vou deixar o edito. E agora eu vou pegar o o after, mas só no hover, só quando eu passar o mouse em cima. O

hover é eu passar o mouse em cima. Então eu vou fazer isso aqui, ó. Li hover after. Beleza, beleza, beleza. Assim, ele só vai aplicar o after quando eu tiver o hover, combinado? Quando eu tiver passando o mouse aqui. Mas o que que eu vou aplicar no after? Eu vou mudar o edit. O idit dele agora vai ser 100%. Então, somente quando eu ele vai ficar no id zero. Quando eu passo o mouse, que é o hover, ele aplica o id. Então eu vou voltar aqui e olha só, olha só, olha só. Mas cara, tá

meio tosco, não tá? Ó, eu não quero que ele apareça, eu quero Que ele faça esse charme aqui. Como que eu faço esse charme? Bem, a gente coloca um cara aqui que chama transition, que é uma transição. Eu quero uma transição suave. Então, quando ele trocar o valor de widget, eu quero cuidado com esse th, enfim, cuidado. Às vezes você erra, eu quero um widget. É, quando eu trocar o widget, eu quero que demore 0.5 5 segundos e a transição vai ser do tipo easy. Aqui no canal tem vários vídeos Ensinando sobre transições, animações, eu

não vou entrar, mas tem vários tipos de eh estilos e aí depois você pesquisa, tá? Aqui no canal. Olha, olha só agora. Pera aí. Esse aqui é o nosso. Ah, e aí você coloca mais rápido, mais devagar. Ah, eu quero bem rápido. 0.2. Então, ó, salvo aqui. 0.2s, que é segundos. Beleza. Tá pronto. Tá pronto. Tá andando. Tá andando. Vamos continuar que tem muita coisa ainda. Vamos dar uma acelerada, senão a gente não termina Esse vídeo hoje. Agora eu vou pegar o contêiner. Eu acho que era o contêiner o próximo. Deixa eu ver. É isso

mesmo, ó. Contaêiner. Conêiner contêiner contêiner. O nosso contêiner a gente vai fazer o seguinte. Ele vai ter um height de 100 VH, ou seja, de altura ele vai ocupar a tela toda. Vai ter um position relative também que a gente vai aprontar algumas coisas aqui dentro. E ele vai ter um background maluco que eu vou copiar aqui, tá? Novamente tem vários Sites que criam isso para você. Você for no Google pesquisar eh tex shadow linear gradiente, pesquisa no Google Linear Gradiente. Vai ter um monte de site que faz isso para você. Você vai puxando as

caixinhas, ele gera o código código para você. Eu vou deixar o overflow como hiden também para garantir que ele não vai ter. E ó, veja que o fundo agora ficou mais um, ficou um degradê. Quer ver? Deixa eu sair da frente. Ó, tá vendo que tá um degradê? Já ficou mais charmoso, né? Agora eu vou ter o meu contêiner, só que agora eu vou pegar o before dele, porque a gente vai aprontar. Cadê? Before? A gente usou o after. Agora eu vou usar o before, porque a gente vai aprontar umas coisinhas aqui no nosso contêiner.

A gente vai aprontar umas coisinhas para deixar nosso contêiner melhor. O que a gente vai fazer agora é Colocar aqui no fundo, ó. É, tá vendo essa parte meio azul no fundo? Ela tá meio que pulsando. É que não dá para ver direito. A gente vai fazer agora, você vai ver. Mas ela vai e volta. E ela cria como que parece que ela tá pulsando. Vou fazer um pouco mais rápido no nosso, porque aquele ali acho que ficou muito lento, não dá para ver direito. E a gente vai usar o before. A gente vai criar

como que um fundo ali que ele fica indo e voltando, vai dar um efeito bem Legal. A gente vai usar o o before agora para você ver a diferença. Não vai mudar muito para nós, mas a gente vai usando várias ferramentas. O content também é zero, o position é absolute. E veja que aqui no container eu coloquei o position relative para ajudar no posicionamento. Esse cara já vai ter um it de cara que vai ser 500 pixels e vai ter um height também 500 pixels. Beleza? Vai ter um border radius 50% porque ele vai ser

uma bola meio esfumaçada. Então, eh, isso Vai ajudar bastante. O background vai ser um background maluco que eu vou copiar aqui. E aí você digita aí com calma, ó. Com calma. Olha só. Radial, gradiente, ó. Vai até aqui, ó. Deixa eu ver, ó. Pausa aí o vídeo, copia com calma, não erre bonitinho. E aí você vai ver que esse cara, ele tá aqui, ó. Tá vendo, ó? Eu não posicionei ele, mas tá vendo? Ele tem um background meio tá desaparecendo, mas não tá. Mas é esse cara mesmo aí. Tá, vamos posicionar ele Agora. Vou colocar

top 50%, left 50%, porque eu quero ele bem bem no centro. Porém, ele não vai ficar bem bem no centro, ó. Ele ficou meio para cá. Para eu trazer ele pro centro, eu vou fazer um esqueminha, que é o seguinte, ó. Eu vou usar o transform, um cara chamado translate. E aí eu vou colocar - 50% V- 50%. Isso aqui é um esqueminha para você e basicamente colocar aqui, ó, position absolute. Ó, isso aqui é basicamente o esqueminha Para você centralizar qualquer coisa. Coloca position absolute. Top 50%, left 50%, transform translate -50 - 50. Aí

ó, magicamente ele fica no meio, ohó. Vou colocar um cara também que é um filter. Eh, vamos colocar um blur 50 pixels para deixar ele mais esfumaçado ainda. Ó, ele esfumaçou mais ainda. Vou colocar um Z index de um para ele ficar na frente das coisas e depois a gente coloca uns index de dois nas coisas que a gente quer que ele fique atrás, tá? Mas ele não tá Pulsando. Como que eu faço isso? A gente vai criar agora uma animação. Para criar animações, a gente usa esse cara chamado keyframes. Eu vou dar um nome

para essa animação, chamar de pulse. Então, esse keframes ele serve pra gente criar uma animação. É, basicamente eu vou ter que falar o que que vai acontecer com esse cara nos momentos. Por exemplo, no 0%, ou seja, no momento zero, quando a tela carrega, como que ele vai est? Bem, ele vai estar com opacity 0.5. O past é a Transparência, então ele vai est meio transparente. E aí eu vou pegar um transform translate, vou movimentar o translate. Ele basicamente vai movimentar o item. - 50% - 50% e eu vou dar um scale 0.8. Scale é

escala. Então eu vou pegar o tamanho dele original. Esse aqui é o tamanho original dele. E vou deixar ele 0.8. Ou seja, 80% do tamanho original. O translate deixa como tá. vai continuar a mesma coisa. Então, basicamente, ele vai Começar no centro, só que é 80% menor do que ele tá agora. Então, vai ficar menorzinho. E aí no momento 100%, ou seja, no final da animação, ele já vai estar copaste um, ou seja, ele vai estar menos transparente. E o transform deixar o mesmo valor de translate, então não vai mudar nada, só que a escala

dele vai mudar, ou seja, eu vou deixar ele maior. Então eu vou deixar um scale ã 0.5. vai ficar bem maior, tá? Então, momento zero, momento 100%. Agora, que que eu faço? Eu preciso falar, esse aqui é o momento zero, esse aqui é o momento 100%, quanto tempo ele demora para sair daqui e para chegar aqui? E aí cria uma animação. Para isso, eu tenho um cara chamado animation. Então, eu crio, eu crio o keyifames e eu trago o animation aqui no Eu vou colocar o nome da animação, que no meu caso é Pulse, e

eu vou dar as configurações. Cara, essa animação ela vai durar 4 segundos. Então, entre ele sair do Momento zero até o 100%, vai demorar 4 segundos e eu quero que seja infinito. Então, ele vai do 0 pro 100%, volta pro 0 100%. Então ele vai ficar indo e voltando. E aí eu quero que ele faça isso de forma alternada. Eu vou salvar tudo aqui e vamos ver, ó. Olha só que legal. Olha só, ele tá vindo. Cresceu, cresceu, cresceu. Agora ele vai diminuir. Diminuiu, diminuiu, diminuiu. Ficou pequenininho. Cresceu, cresceu, cresceu, diminui, diminui, diminui. Inclusive, se

quiser colocar uma escala maior, ó, colocar dois aqui, ele vai dobrar de tamanho, ó. Olha só. Cresceu, cresceu, cresceu, diminuiu, diminuiu, diminuiu. E aí eu coloquei 4 segundos. Se você quiser que ele faça em 1 segundo, ele vai ficar muito rápido, ó. Olha só, ele literalmente tá pulsando. Ficou bem legal. Dá uma fuçada, brinca com isso aqui. Então, dá para você o o que frames basicamente é o quê? É eu falar qual que É o estilo que ele vai estar no momento zero e qual que é o estilo que ele vai est no momento 100%.

E aí eu falo quanto tempo que ele demora para chegar do 0 ao 100%. E aí isso cria uma animação. Vamos lá que tem bastante coisa. Ã, agora a gente daqui a pouco a gente faz esses círculos aqui. Daqui a pouco a gente faz. Agora eu vou pra minha lista. lista, lista, lista ponto list. E agora na lista a gente vai começar a fazer um negócio que é o seguinte, é, eu tenho Minha lista e aí eu tenho item e o item ativo, então a gente vai ter que mexer nisso. Vou correr porque a gente,

eu nem sei, já tá, tô mais de uma hora aqui gravando e aí isso aqui vai ficar grande. Ai ai ai. Vamos lá. A minha lista eu quero que ela ocupe 80% da tela de largura, de altura eu quero que ela ocupe 100% da tela. Eu vou dar um margem zero em cima e embaixo dos lados automático e vou dar um position relative. Perfeito. Perfeito, Rodolfo. Vamos lá. Agora eu vou pegar o meu item que tá dentro da lista, né? Eu tenho minha lista e tenho meu item e o item active. A gente já vai

fazer o active. O meu item eu vou colocar ele um position absolute. Vou posicionar exatamente onde eu quero, que no caso é em 70 z0, Rodolfo. Que que é isso? Em 70 é a mesma coisa que falar isso aqui, ó. Bor zer left zer top zer right zero. O ins é eu colocar o mesmo valor para todas as direções. Então todas as direções eu quero zero. Vou colocar um display flex desse cara. Justify contenter. Aqui no canal tem curso de display flex. Então se você não sabe o que que é um aline items, assiste nosso

curso de display flex. E aí eu vou colocar também no nosso item um transform. Aqui vai ser meio complicado. O que que a gente vai fazer? Deixa eu, eu vou deixar para depois. Deixa aqui porque a gente vai ter que fazer bastante coisa. E vou colocar um Opasto. Olha só o que vai acontecer. Eu fiz um monte de coisa para posicionar ele, mas eu coloquei um opacit zero. Opacit zero é transparente, ou seja, ele vai desaparecer. Sumiu. Sumiu. Opaste zero é transparente. Só que o item que tiver com active, adivinha? O passe dele vai estar

em um. Ou seja, só o item que tiver com o active é o item que que que vai aparecer. E os outros desapareceram por eles não tm o active, Só o active que tem o opacity um. Gostou dessa, né? Calma que daqui a pouco a gente vai melhorar. Agora a gente vai pegar o product, tá? Depois a gente vai descendo pros demais. O product image é a nossa div. A nossa div, a gente vai ter 45% de height, de widget, height. Eu falei 45, coloquei 50. 45. Sou fiel à minha palavra. Já assisti o curso

de display flex, display flex, aline item center, justify content Center também alinhando na vertical, na horizontal, position relative. E eu vou colocar uns index de dois, porque eu quero que ele fique na frente daquele negocinho que tá pulsando. Se eu colocar os index de dois, você vai ver que ele vai ficar na frente aqui, ó. Tá vendo? Agora ele ficou na frente do negocinho que tá pulsando. Perfeito. Eh, agora a gente tem o product image, só que a imagem que tá dentro dele. A nossa imagem, eu vou Dar um max widget de 80%, um max

height de 60%. Vou colocar também, que mais que eu preciso colocar? Hum. Ah, tá vendo esse efeitinho em volta? Vamos colocar esse efeito em volta que fica charmoso ali. Esse efeito em volta, ele é um filter. Então a gente vai fazer o seguinte, eu vou copiar aqui porque Esse filter é chato. Então deixa eu pegar ali na minha colinha e colocar aqui filter drop shadow zer. Aí você coloca aí você pausa aí copia é esse filtro que fica em volta do item, tá? Eu acho que é só isso por enquanto. E agora a gente tem

o content. Content. Content inglês é conteúdo. E esse conteúdo você tá gostando? Então, você tá gostando, você dá o like. Você não tá gostando, você dá o dislike. Só não fica em cima do muro, né, meu caro? E aí, comenta Embaixo. Vocês acham que eu tô muito devagar, muito rápido. Tem gente que pede pr os vídeos serem mais rápidos, tem gente que pede para explicar mais devagar, mas não dá para agradar todo mundo, né? Quero colocar um pading só do lado, é, no meu conteúdo, só do lado direito. Aqui também vai ser um display flex.

Vou colocar um aline items como flex start. Flex start. Eu quero que ele que ele comece bem no começo, ó. Eu quero Jogar os itens tudo pra esquerda, bem no começo, tá? Por enquanto tá bagunçado, mas vai fazer sentido. O dutify content center e o Z index também vou colocar como dois para ele ficar na frente do negocinho que tá pulsando, tá? Por enquanto tá feio. Tá feio. Mas vamos pro próximo. O próximo é o product. product tag é aquele texto que fica ali na parte de cima. Vou colocar um font size nele de 1

RM. Esse cara também vai ter, eu acho que ele vai ter aquela Fonte maluca também. Deixa eu ver. Ah, não, ele é monte cerrar mesmo. Text transform. Vamos colocar ele em letra maiúscula. A gente coloca o operase, ó. Oper case é letra maiúscula. Então o nosso vai ficar tudo em letra maiúscula. Novo lançamento. Novo lançamento. Ã, outra coisa, ele tá ficando um do lado do outro, não é? É um em cima do outro. Então aqui no content a gente coloca o flex direction como column. Aí vai ficar Um do lado do outro, um um em

cima do outro. Aí ó. Ah, agora sim. E todo mundo jogando pra esquerda. Que mais que a gente vai colocar nesse cara? A gente vai colocar color. É uma cor que a gente já usou. Deixa eu ver se eu encontro aqui. Essa aqui, ó. Pode ser essa cor aqui. Fonte weight 600, que é a grossura da fonte. Eu vou mudar o espaçamento da letra. Vou colocar dois pixels. Espaçamento letter Spacing. Vou colocar uma margem embaixo para ele não ficar grudado nos itens de baixo. Pode ser uns 10 pixels, tá? bom tamanho. Ã, o past dele

vai começar como zero e somente não vai estar no zero no ativo. Hum. Depois a gente faz isso, tá? Depois a gente faz isso, senão vai confundir tudo. Eu acho que é isso. Só isso já tá bom. A gente vai voltar para fazer umas coisinhas ali depois. Eu vou aqui no Product name agora. Product name eh, o product name é esse cara aqui, ó. Apple Watch Series 10. Que que esse cara vai ter? Já vou mudar o font size dele, que ele tá muito pequeno. Agora ele vai ser 4.5 REM. Ele vai ter aquela fonte

size que é o orbitron, deixa eu pesquisar aqui, ó. Orbitron font family orbitron sf. Então vamos descer tudo e vamos colocar esse cara aqui, orbitron sanserif. Também vou Colocar um line de 1.1. Line rate é o tamanho da da linha, a altura da linha. Vou colocar uma margem embaixo de uns 20 pixels para ele não ficar grudado com carinha de baixo. E eu acho que é só. Salvei aqui e ah, ficou bonitão. Vamos continuar. O próximo é o description. Vou colocar aqui um font size desse cara de 1.1 R. Vou colocar um color. Deixa eu

pegar ali a cor dele na minha colinha. Deixa eu pegar lá. Opa. Essa cor aqui, Tá? Que é a cor de burro quando foge. Não sei que cor é essa, mas eu eu pesquisei umas cor e saiu essa. Vou mudar o line dele também. Vou colocar uma marge embaixo também para ficar separado. O max desse cara vai ser 600 pixels. Como ele é um texto mais longo, não quero que ele fique muito grande. E é só, tá? Deixa eu salvar aqui. Ah, tá saindo. Tá saindo. Agora a gente tem o nosso botão de saiba mais.

O nosso botão é o btn, se eu não me engano. Ó Aqui, ó. Nosso btn. O nosso BTN vai ter o seguinte, eu já vou colocar um padging de 12 pixels em cima e embaixo, 10 pixels do lado. Vou, eu fiz um background malucão, tá cheio de coisa malucona aqui, ó. Você pausa, copia aí, ó. É esse background, ó. Esse meu background malucão. Aí eu quero deixar as bordas arredondadinha. Então, eu tenho o border border radius desse cara, é uns 30 pixels para ficar bem arredondadinha. O color dele pode ser #00, que é o a

cor de dentro. Vou colocar um font size de 1 R pra parte de dentro, um font weight de 600 ali, ã, o cursor como pointer. E aí é isso aí. Eu acho que eu coloquei tudo. Ah, eu não quero border também. Aquela borda é muito feia. Border não. Aí eu vou te dar uma missão agora. Eu quero que você faça um hover para esse cara, ó. Um hover. Quero que você faça um hover para esse cara para ficar bonito. Eu vou aumentar um pouco ali o pading do lado, que eu acho que vai ficar mais

charmoso. 16 pixels. Faz um padging para esse cara aqui. O pading não, pad, faz um hover. Eu quero quando passa o mouse mude. Então faz um hover e vai lá no meu Instagram Rodolfo More e me manda como que ficou o seu hover. Quero ver. Eu ia fazer aqui, eu tinha preparado, mas você tem que treinar porque você ficar só assistindo você não aprende, tá? A gente terminou essa parte E agora a gente tem o arrows. Arrows, arrows. Vamos lá pro arrows. Cadê? Cadê? Cadê? Copiar aqui. E vamos lá. Então, ponto arrows. O nosso arrows

a gente vai fazer o seguinte, position absolutamente onde eu quero. Vou dar um hit dele de 90%. Lembrando que o arrows é a div onde esses caras estão. A gente já vai editar eles. Eu vou colocar um display como flex justify content space between. Por quê? Eu tenho duas setas e eu quero cada uma para um lado. Eu quero Uma seta para cá e uma seta para lá. Tá vendo? Por enquanto elas não apareceram ainda. Estão escondidinhas, mas a gente já vai fazer elas aparecerem. Vem comigo que você passa de ano. Eu vou colocar um

top 50% de onde que elas vão ficar e um left 50%. Tá? E aí eu vou colocar um transform translate - 50% v -50% e aí elas vão ficar exatamente ao centro. Beleza? Ah, apareceram aqui. Rodolfo, mas não era o centro ao centro? Sim, mas lembra que eu Usei o o display flex? Então eu pedi para ficar o centro, mas cada uma num canto. Então elas já apareceram aqui. Então a parte que a gente tinha, coloca uns index aqui de um cinco para você ter certeza que ela vai estar sempre na frente de todo mundo,

tá? Para ter certeza. Só que dentro dela eu tenho o erron btn, ó. Erron btn. Aí eu vou pegar esse cara aqui, o erron btn. E a gente vai fazer o seguinte, colocar o edit aqui de 50%. Deixa eu ver se dá bom. Ã não, muita coisa. 50% 50 pixels. Ô Rodolfo ficando louco. Ã, acho que tá bom. Beleza. Aí he a mesma coisa. 50 pixels vai ficar quadradinho, mas eu não quero quadradinho. Então eu dou um border w 50%. Salvei aqui. Aham. Coloco um cursor como pointer. E aí eu faço umas graças. Ã, eu

peguei umas cores exóticas aqui. Deixa eu copiar. Deixa eu pegar aqui para o border. Border, um pixel Solid e o background color. Então, a cor de fundo, eu peguei esse RGBA e para o a borda também. Então, se eu copiar aí, dá uma paus pausa no vídeo e aí, ó, ficou assim, ó. Tá vendo? Daqui a pouco eles vão funcionar. Daqui a pouco funciona. Coloquei aqui um display. Acho que nem vai precisar de display flex, não. Ele já ficou bem bem alinhadinho ali o cursor como pointer. E aí, a única coisa que eu vou fazer

é colocar um hover nesse cara, porque tá muito feio. Então, Vou colocar aqui hover. Então, quando eu colocar o mouse em cima, eu peguei umas cores malucas aqui também e a gente coloca uma coruca no background e uma coruca na borda. Eu vou salvar aqui. E aí quando coloco o mouse, ó, ele dá uma mudadinha, ó. Fica mais legal. Eu gostei bastante. Inclusive, eu acho que ficou até mais bonito. Ah, o que eu tinha feito tinha ficado branco. Esse aqui ficou preto. Ah, mas se quiser mudar, dá para mudar aqui no SVG, ó. Você vai

aqui No SVG, ele tem esse fio. Esse fio aqui, se você quiser branco, você coloca #ffff. Ó, aí você salva. E aí, ó, ele ficou branco. Quer branco? Quer preto? Não sei. Aí você que sabe. Se você quiser preto, é 0. Se você quiser branco é F F. Vou deixar branco, então. Beleza. E para finalizar, faltou só o negocinho aqui embaixo. Então, vamos fazer o vugo. Negocinho ali embaixo é o indicators. Então, vamos lá. Então eu tenho aqui o indicators, vai Ser um position absolute, que eu vou colocar exatamente onde eu quero. Vai ser boron

40 pixels, porque ele vai ficar lá lá lá lá embaixo. Left 50% porque a gente quer centralizar ele. Então eu coloco um transform. Só que agora eu não quero transform geral, eu quero só no eixo X. Então no eixo X eu quero alinhar ele ao centro. Então eu vou alinhar ele ao centro aqui na horizontal. Na vertical eu coloco ele lá para baixo, bor pixels. E aí, ó, ele já Tá aqui, ó. Já tá aqui. Calma lá, ainda tem mais coisa pra gente fazer. Eu vou dar um display flex nesse cara para facilitar a nossa

vida. Flex direction column para ficar um item debaixo do outro. Vou alinhar ao centro na aqui para nós, para facilitar todo mundo. Alinhado ao centro. Vou colocar um gap de 15 pixels entre os itens e também vou dar um Z index de C para ter certeza que esse cara vai ficar na frente de todo mundo. Além do indicators, eu tenho o Numbers, o dots e o dots active no dots e o dot, tá? Então eu tenho aqui o numbers, o dots e o ponto dot, tá bom? O numbers eu vou usar aquela fonte malucona que

é a orbitron. Deixa eu copiar aqui. Beleza. Eu gostei dessa fonte. Eu pesquisei, gostei bastante. F dá dá um charme bem legal. Font size, esse cara é bem grande. Vou dar um 3 rem. O font weight ele é bem grossinho, então 800 font Weight. E vou colocar um color. Deixa eu pegar a cor que eu separei. Na verdade, a cor que eu separei é o seguinte. Isso aqui, ó, isso aqui é opacidade, né? Então ele é branco, só que meio opaco. Então 0.2. E aí nosso número fica charmoso assim, ó. É o numbers já tá

legal. Agora o dots, que é os pontinhos, eu só vou dar um display flex e vou dar um distanciamento ali entre os pontinhos, tá? Rodolfo não aconteceu nada. Calma, porque os pontinhos ainda Não apareceram. Vamos fazer os pontinhos aparecerem. Para isso, eu vou colocar um edit aqui de uns 40 pixels nesse cara, tá de bom tamanho, e um height de 4 pixels, tá? Além disso, vai ter um background color, eu vou usar esse aqui. Todos os meus dots vão estar aqui, menos o activo. O ativo. Colocar aqui um border radius de uns dois pixels para

dar uma arredondadinha na borda. E aí, ó, hum, Ué. Dots, dot. Ué, não apareceu. Estranho. Pera aí, eu vou fazer o dots activ. Ã, wid, he color border radius. Que estranho. Já vejo o que aconteceu. Ã, agora eu vou ter o dot, só que o ativo. Ah, então o ativo ele vai ter uma cor diferente, ó. Ó, tá vendo? Esses daqui era para ter aparecido, não aparecer. Já vou ver o que que eu fiz de errado. E a gente vai ter esse ativo aqui, ó, que ele tem uma cor diferente. Então, Somente quem for dot

active, dot e active, tiver a as duas classes, vai ter esse estilo aqui. Aí esse cara, ele vai ter um background e um box shadow diferente. Então, vai ser esse aqui, ó. É, já peguei ali na minha colinha e tá aqui para vocês, tá? Ã, esses outros aqui não apareceram. Fiz alguma cagadinha. Deixa eu ver aqui. Aqui não é color, Rodolfo. Não é color, é background color. Background color, ó. Dot background color, ó. Background Background color. Agora sim, ó. Apareceu, ó. Só o que tá ativo. E aí, ó, que interessante, só o que tá ativo.

Se eu trocar o ativo de lugar, ó, olha só o que acontece. Ele se mexe. Não trocou o número aqui porque eu só troquei o artivo de lugar, mas vai trocar o número também. E aí faltou uma coisa que eu tava esquecendo, né? Esse charme aqui que é essas bolotas aqui, ó. Faltou as bolotas que a gente colocou aonde que a gente colocou lá em cima. Ã, Aqui, ó, tex circle, ó. Faltou o text circle. Deixa eu copiar aqui o text circle e tem o circles aqui. Então, deixa eu colocar aqui textirle. Vou colocar esse

cara como um position absolute. A gente vai ter que fazer uma graça porque cada um vai ter um, vai ser diferente. Top zero e left zero também. Vou colocar um de 100%, um height de 100%. Isso aqui é a div, então ele vai ocupar todo o espaço. Overflow hiden E Ah, a gente vai colocar, acho que só isso, tá bom? Beleza? Só que eu tenho vários círculos, né? Vários. Então eu vou selecionar o primeiro circle aqui. Na verdade, ele vai aplicar para todos, mas a gente vai mudar. Então vou colocar o position absolute também. Border

radius 50%, que vai ser um círculo. E aí eu vou pegar a coruca do border, da borda e vou salvar. Rodolfo, que tá acontecendo? Por Enquanto nada, tá? Eu criei esse cara aqui, mas por enquanto nada. Agora a gente vai fazer o seguinte, a gente vai pegar círculo por círculo. Ah, eu vou criar uma classe diferente. Não, tá vendo que tem 1 2 3 4? Eu posso falar exatamente qual deles eu quero pegar. Para isso, eu tenho esse cara, ó, and child. Ou seja, eu posso falar se eu quero primeiro, segundo, terceiro ou quarto. Então,

eu quero círculo, o primeiro. O primeiro círculo, ele vai Ser 200 pixels por 200 pixels. 200 por 200. E aí esse eu vou colocar mais para cima. Então, top 10%, por exemplo, e left 10%. E só isso. Ah, apareceu aqui. Apareceu aqui. Só que esse é só o primeiro. Aí o segundo a gente faz diferente. Eu vou copiar aqui, ó. E aí a gente coloca enchild 2. Ou seja, agora Ele vai aplicar o que tá aqui pro segundo. O segundo eu quero um pouco maior. 300 por 300. E aí a posição também é diferente. Esse

aqui vai ser 600 ou 60% por 80%. Então ele vai posicionar ele em outro lugar, ó. Posicionou aqui bem onde eu tô. Olha só. Bem bem bem aqui embaixo. Vamos pro próximo. Ah, o próximo eu quero que seja menor, então eu vou copiar. Ah, o próximo eu quero que seja 150. Então, 150. 150. Ah, esse aqui eu quero maior, quero menor. Não sei. Vou colocar aqui 70. Opa. Maior, menor, não, o posicionamento dele. Colocar top 70%, left 20%. Ele vai vir um pouco mais para cá. Opa, já vem mais para cá. Ah, agora eu quero

um mais para cá. Então aqui é o três, né? Esqueci de colocar três. Deixa eu copiar aqui. E por último, a gente vai ter o quatro. Ah, o Quatro você quer como? Você quer maior, menor? Ah, eu quero muito grande. Se quisesse muito grande, ó, você coloca 1000 pixels aqui. Vou colocar fazer um pequenininho, ó. 120 já tá bom. Ah, Rodolfo, o posicionamento, tá? O posicionamento dele eu vou colocar 20 70. Salvei aqui e tá aqui, ó. Tá aqui. Perfeito. E aí, se você quiser testar o keyframe, você pode Colocar para essas bolas, sei lá,

ela ir aumentar, diminuir, mudar o scale. Dá para você brincar, dá para fazer bastante coisa aqui, tá? A gente vai ter animações ainda, mas vai ser essa animação de passar. pu. Mas antes de fazer as animações de passar, a gente vai ter que criar o código para poder clicar no botão e alguma coisa acontecer. Para isso, a gente vai utilizar o JavaScript. Aqui no canal tem curso de JavaScript. E Para eu fazer o JavaScript, eu vou fazer num arquivo separado que vai ser o scripts.js, tá? Script.js. JS. Aí eu vou lá no final do meu

body, coloco aqui, ó, script e eu chamo a minha tag scripts. Ali, ó, minha tag não, eu chamo o meu arquivo scripts, tá? Então, eu tenho minha tag scripts e aí eu chamo o meu arquivo scripts e agora a gente vai começar o JavaScript. Então, o que que acontece? Você que tá aqui no canal, você que já se inscreveu, que já deu o Like, que já clicou no sininho, você sabe, eu já falei aqui em várias vezes, que a gente tem o HTML, que é a estrutura, o CSS, que é a estilização, e o JavaScript

é a inteligência. É o JavaScript que vai fazer com que eu clique aqui e ele troque as imagens, que eu clique aqui e ele faça tudo. Só antes da gente começar, galera, copiar o código aqui te ajuda, mas o que mais vai ajudar você a se tornar um programador, dominar, é você fuçar. Vai lá, cara, Fuça no na animação, tenta fazer uma animação diferente para esse cara, tenta fazer o rover para esse cara, sabe? Sai do da aula. Só fazer aula não vai te ajudar. De coração. Eu era eletricista, me tornei programador e eu cometi

um erro muito grande que foi ficar só assistindo aula. Aula ajuda, mas tem que praticar. Então vamos lá pro JavaScript. Para começar nosso JavaScript, a gente precisa mapear quem é quem. Como assim, Rodolfo? Bem, vamos lá. A gente tem Algumas missões. Ah, primeiro, a nossa missão mais básica agora é clicar num botão e eu saber que esse botão foi clicado para depois eu criar a lógica que vai fazer com que ele vá passando. Então, a primeira missão é saber quem é quem aqui, mapear todo mundo que a gente vai ter que movimentar. Eu vou ter

que movimentar esses carinhas. Eu preciso saber quem eles são no JavaScript. Eu preciso saber quem é o botão. Eu preciso saber quem é esse cara aqui de baixo Para eu poder trocar a cor dele, entendeu? Então a gente vai criar variáveis com todo mundo. Então eu vou ter, por exemplo, o meu prev, que é o botão de voltar. Eu vou ter também o next button e assim por diante. Deixa eu já criando eles aqui, senão vai dar muito erro. Então eu estou no JavaScript. Toda vez que eu estou no JavaScript, eu quero pegar alguma coisa

que tá lá na HTML, mapear algo que tá no HTML, eu digito Document. o document HTML. Então, eh, assista o curso de JavaScript aqui do canal, tá? Vou deixar aqui na descrição, mas eu tô criando uma variável e quando eu crio uma variável, eu preciso colocar algo dentro dela. Então, eu vou lá no HTML e aí eu vou procurar alguém pelo ID, get element by ID. E o ID desse cara vai ser o prev. Como que era? Era prev mesmo, eu não lembro. Aqui, ó, prev. Então, eu vou descobrir quem esses caras pelo ID. Esse

Aqui vai ser a mesma coisa. document.getgetelementbyid. Esse cara vai ser o next. Beleza? Então agora eu já sei quem são meus botões e quando eu clicar a gente já vai saber quem é. Além disso, eu tenho que saber quem são os meus itens. Por quê? Vamos lá. Os itens são esses carinhas aqui que eu vou fazer aparecer e desaparecer da tela. Por enquanto só tem um item aqui. Então o item é toda essa parte aqui. E aí eu vou Eu vou pegar todos os meus itens para eu saber quem eu coloco ou não na tela.

Então agora eu vou buscar esse cara. Ã, os itens eles têm uma classe. Para buscar ID eu procuro pelo ID. Para buscar a classe eu tenho um cara que é o selector. Eh e carry selector. Carry selector all. Então eu vou buscar todo mundo que tenha a classe item. Então eu coloco um pontinho para avisar que carry selector ele vai selecionar, ele vai buscar todos Que tem a classe item. Beleza? Agora eu também preciso saber quem são os meus botõezinhos lá, os dots, ó. Eu preciso saber quem são esses caras aqui embaixo. Então eu também

preciso ter os meus dots. Mesma coisa. Dots e document carry selector all. E agora eu vou selecionar todo mundo que tem a classe dot, que é a classe do ã aqui embaixo, ó, que é a classe do pontinho. Então eu já sei quem são meus pontinhos, eu já sei quem são os meus Itens, eu também preciso trocar o number. Então eu vou pegar aqui o number indicator, que vai ser document, opa, carry selector. E o meu number é um só. Então, como o meu number é um só, é a classe number, ó. Ã, cadê? Cadê?

É esse cara aqui, ó. Na verdade, é classe numbers. Eu coloquei numbers, ó. Tá vendo? Por que que aqui é carry select selector all e aqui é carry select selector? Porque aqui eu vou trazer todos. São vários elementos que Tem a classe dot. Aqui são vários elementos que tem a classe item. Aqui não, só tem um. Só tem um, eu uso o car selector, tem mais de um, eu uso o all. E também eu vou pegar minha lista. Eu vou precisar saber quem é minha lista. Então, const list. Aí eu vou lá no document, a

lista é uma só também. Então carry selector list, tá? Então a minha list é o lugar que está os meus itens. Então eu selecionei os meus itens e também eu já sei quem é minha lista. Esses são todos os elementos que a gente vai ter que saber quem é. Aí eu vou criar aqui uma variável também que a gente vai utilizar que vai ser a variável active que vai começar como zero, que a gente vai mapear quem que vai estar ativo ou não. Eu vou ter a minha, eu vou criar outra variável aqui chamada total.

O total ele vai ser o total de itens ponto lamp. Que que é o ponto length? Esse itens aqui a gente vai Guardar ele numa caixa. Então a gente tem aqui uma caixa, uma matriz. Eu vou ter o item um, o item dois e o item três. O ponto lengf, ele me fala quantos itens tem dentro dessa caixa, ou seja, quantos itens ele encontrou lá no HTML, tá? Então, a minha variável total é o total de itens. Agora a gente só tem três, mas se eu adicionar mais, ele sempre vai trazer esse valor atualizado. Rodolfo,

por que que aqui é e aqui é const? No tem basicamente hoje O JavaScript moderno tem dois jeitos de criar variáveis, ou let const. Quando eu vou criar uma variável e ela vai assumir um valor e vai continuar com esse valor, tô falando do jeito mais simples de entender. A gente usa const. Const abreviação de constante. Constante é quando o valor vai ser constante, não vai trocar. O let, esse valor aqui, a gente vai trocar ele daqui a pouco. Então, quando eu quero trocar o valor, eu uso let. Quando Ele vai continuar um valor constante,

eu uso const. Não é só essa diferença, mas paraa nossa aula ficar mais simples, essa é uma das diferenças e para nós aqui é bom. Poderia tá criar todo mundo com let, poderia, mas normalmente quando a gente não vai trocar o nome, a gente já usa a cons. E eu também vou criar um timer aqui, não vou colocar valor nele, tá? É, eu só vou iniciar o timer que daqui a pouco a gente vai fazer um timer para ele ficar trocando automaticamente, Tá bom? Então, já criamos tudo que a gente precisa. Agora vamos colocar a

mão na massa. Agora vamos pensar no funcionamento. Eu já mapei quem é quem. O funcionamento é eu clicar no botão e eu saber que eu que o botão foi clicado. E eu tenho que saber se o botão é o de next ou o preview, o prevy. Então, para isso, eu já sei quem é meu botão. Então, por exemplo, eu tenho prev. Eu vou pegar meu privo. Eu tenho um cara que chama ad Event listener. O ad event listener ele vai ficar de olho em alguém. Então, o ad event listener vai ficar de olho no botão.

E aí, toda vez que acontecer o quê, ó? Um clique. Cadê? Clique. Então, addent lister. Clique. Toda vez que o meu botão for clicado, eu quero que ele me avise. Aí eu vou colocar uma vírgula. E aí, toda vez que o botão for clicado, eu vou chamar uma function. Function. Eu coloco function aqui. Qual Function que eu vou chamar? Uma function chamada update. Up. U update. Tá? Basicamente é isso. Rodolfo. Que código maluco? Me explica de novo. Eu tenho meu privi quem é. Eu já mapei ele. Toda vez que eu criar no clicar no priv,

ele vai fazer o quê? O advent vai ficar de olho nele. Toda vez que eu clicar, ele vai executar o que tá aqui dentro. Eu tenho que escrever dessa forma. Ou poderia escrever assim, ó, o JavaScript mais moderno, tá? Então o que que eu tô Fazendo aqui? Toda vez que eu clicar no botão, ele vai executar o que tá aqui dentro. A gente vai criar uma função chamada update. Mas antes disso, eu vou colocar um console. log escrito previs que pro outro botão que é o botão de next, ó, next button. E aqui eu vou

colocar next. Então, basicamente quando eu clicar no botão de prev, ele vai colocar escrever no conso melhor, vou colocar um alert aqui, ó. Ó, ele vai mostrar um alerta na tela Escrito prev. Vamos ver se tá funcionando. Para você ser um bom programador, faça as coisas por partes. Criamos todo mundo e agora vamos ver se funcionou. Então, eu tô aqui, cliquei no meu botão, apareceu, ó, prev, cliquei no outro botão que eu tô na frente de vocês, apareceu next. Então, essa parte já tá funcionando. Mas o que que eu quero aqui quando eu clicar nos

meus botões? Eu quero trocar a classe Active, porque, ó, a classe Active aqui, por Exemplo, ela tá aqui. Se eu clicar no botão, a classe Active tem que sair do primeiro item e tem que ir pro segundo, porque se isso acontece, olha só, mudou aqui, ó. Tá vendo? É isso que eu tenho que fazer, tanto aqui pros meus itens, quanto aqui embaixo pros dots. Se eu troco de lugar a classe que tive, olha só, ele trocou aqui. E eu também tenho que trocar esse número, tem que mudar para dois. Então agora essa é a nossa

missão. E ele vai fazer isso quando eu Clicar no botão. Eu já sei que o botão foi clicado. Agora eu tenho que criar a minha função, que ela vai ser chamada quando eu clicar nos meus botões, tá? Então deixa esses botões aí. Eu vou criar uma função chamada eh update, que ele vai fazer a update, né? Vai, ele vai atualizar, tá? Eu ten uma aula aqui no no canal Dev Club só falando sobre funções, então você tá meio perdido ainda o que que é uma função, como funciona, assiste essa aula Lá, combinado? Então, a gente

vai fazer o seguinte, a primeira coisa que eu preciso saber é a direção que ele tá, a direction. Que direção que eu tô indo? Eu tô indo pra frente ou tô indo para trás? Ou seja, qual que é o botão que tá sendo clicado? É o botão de preview ou o botão de next? Qual dos dois botões? Então eu vou chamar aqui o update. Vou chamar essa essa função update pros dois. Só que cada um vai Mandar um valor diferente. Por exemplo, o botão de preview vai mandar -1 e o botão de next mais um.

Por quê? O botão de preview, se ele tá aqui no um e eu clicar nele, ele tem que ir pro três. Se ele tá no dois, ele tem que ir pro um. Então esse botão ele sempre volta um item. E esse botão de next, ele sempre vai mais um item. Por isso que ele vai chamar o update com menos. Esse aqui com mais um. E aí quando eu chamo uma função, ó, tô chamando uma função Aqui dentro e eu envio um valor, esse valor vai chegar aqui e nesse caso, esse valor vai chamar direction. E

aí, a primeira coisa que eu preciso fazer é, se eu estou clicando no botão, seja ele para frente ou para trás, você entende que o item vai mudar. Então, quem tá ativo agora vai deixar de ficar ativo. Então, a primeira coisa que eu tenho que fazer é tirar a classe ativo de quem tá com a classe ativo. Quem tem que classe ativo? O dot, o ponto ou o item. Então Imagine, a primeira coisa que eu tenho que fazer é tirar a classe ativo daqui e passar pro próximo. Então imagine, primeira coisa que o JavaScript tem

que fazer é tirar essa classe ativa daqui. Aí ele vai colocar no próximo. Dependendo do botão, ele coloca aqui ou ele coloca aqui. Se eu tô aqui, se a classe ativo tá aqui e eu aperto o next, ela tem que sair daqui e tem que ir para cá. Se ela tá aqui e aperta o purview, ela sai daqui e vai para cá. Então, a Primeira coisa que eu tenho que fazer é tirar essa classe Active, tanto daqui quanto do item. Então, o que que eu faço? Eu vou pegar e vou procurar alguém que, por alguém

que tem a classe item e a classe active. Não adianta ter só item. Quando eu coloco junto assim, ele vai procurar alguém que tem a classe item e a classe active. E aí quando ele encontrar esse cara, ele vai pegar e vai remover a classe Active. Então, o que eu tô fazendo? Procura alguém que tem a Classe item Active. Quando você encontrar, você vai eh listar o Class list, vai, por assim dizer, pegar as classes desse cara e vai remover. Remover quem? A que. Beleza? Agora eu faço a mesma coisa pro dot. Ele vai procurar

alguém que tem a classe carry selector, a classe é dot e active. Quando encontrar, você faz o quê? Você retira a classe Active. Então, independente do botão que eu clicar, ele vai fazer isso, tá? Se eu clicar aqui, Sumiu tudo. Então, tá funcionando, ó. Ó, sumiu o dot, o outro botão, a mesma coisa. Então, eu já tô fazendo ele sumir. O próximo passo é ele aparecer. Só que agora sumir foi fácil. Aparecer vai depender. Por eu tô no um, se clico aqui, ele tem que ir pro três. Se eu clico no outro botão, ele tem

que voltar pro um. Se ele tivesse no dois, vai pro três ou vai pro um. Então eu já tô fazendo sumir, mas para eu fazer aparecer, eu tenho que saber qual que é A direção. Então qual que é a direção? Se for preview é -1. Se for update é mais um. Então eu vou verificar a direção. Como que eu verifico? Bem, se for maior que zero, opa, se é maior que zero, eu sei que a direção que ele tá escolhendo é um next. Ele tá indo pro próximo. Beleza? Então eu já vou selecionar. Ou ele

vai para um lado ou ele vai pro outro. Combinado? Então, se é positivo, se é positivo, se é maior que zero, significa Que é o next. Senão, a gente pode fazer isso aqui, ó, els if. Senão, eu vou verificar se o direction é menor que zero, tá? Eu não vou usar o else, eu vou usar o else if. Então, são dois ifs aqui, por assim dizer. é maior que zero. Se não é menor que zero, então um dos dois ele vai ter que cair. Então vamos ver o primeiro caso. O primeiro caso é se eu

clicar no botão next e aí ele vai cair no maior que zero. Se ele cair no maior que zero, ainda assim tem algumas Situações que a gente tem que analisar. São duas situações. Por quê? Se eu estou clicando no botão de next, que é o que tá acontecendo aqui, ele vai cair aqui dentro. Por quê? Toda vez que eu clico no botão de next é um. Um cai aqui dentro. Mas tem duas situações que é o quê? Por exemplo, se ele tá no um, ele vai pro dois. Se ele tá no dois, ele vai pro

três. Mas se ele vai, se ele tá no três, ele vai pro quatro. Não, ele tem que voltar pro um. Então tem duas Situações. Ele do um pro dois, dois pro três, ou do três ele ter que voltar pro um. Hum. Então vamos analisar isso. Primeiro eu vou pegar o active e vou pegar o valor que tá nele, colocar mais um. Porque por que mais um, Rodolfo? Porque ele começa em zero. Então, começou a aplicação, ele tá em zero. Se eu clicar em next, ele tem que ir para onde? Pro próximo. Então, zero ou 0

mais 1. Por que Rodolfo vai por um? Porque na Programação, ah, quando a gente tem várias coisas numa caixa, num rei, por exemplo, a gente não conta 1 2 e 3. Ali tá mostrando 1 2 e 3, mas na programação normalmente a gente coloca zero. A primeira posição sempre é zero, então vai ser 0 pon 1,2,1,2. Então, na verdade, para nós aqui, o dot ele tá no um, mas na programação o ó, o primeiro estado sempre é o zero, então ele está na posição zero. Então, se ele começa na Posição zero e ele clica em

next, eu vou pegar o 0 mais 1 e aí ele pula para cá. Claro, aqui eu vou mostrar dois, mas dentro do nosso código a gente considera comum. Beleza? Então, se a direção for maior que zero, eu adiciono mais um. Mas se ele já tiver no três, e se ele tivesse no três, que que eu faço? Bem, se o active ele for igual ao total, quem que é o total? O total de itens que eu tenho. Então, se ele tá aqui no três, na última posição, ele vai, o active vai Est em dois, correto? Porque

é 0 1 2. Se ele tá em dois e eu adiciono mais um, ele vai virar três, que é exatamente o número do total de itens que eu tenho. Hum. Se ele, então, se ele tá na última posição, eu não posso colocar o quatro, eu tenho que voltar pro active igual a zero, entendeu? Porque ele vai fazer o loop. Vamos ver se funcionou. Bem, e o botão de next tá aqui atrás, mas eu eu tô clicando. Então, ele tá no um. Cliquei. Opa, pera aí que eu esquecer Alguma coisa que é no final. Eu troquei

o Active, mas ainda falta um passo. Calma, calma, calma. Tô muitas horas gravando aula. Falta um passo ainda. Ele não vai pular por Eu estou trocando o Active, mas eu só estou removendo o item. Eu não estou criando o próximo item. Rodolfo, você tá com a cabeça na lua, Rodolfo? Sim. Que que a gente vai fazer? Faltou um passo que é o seguinte. Eu vou pegar meus meus itens. Lembra que eu guardei meus itens todos aqui? Então, Eu tenho meus itens. Eu vou pegar eles aqui lá no final, ó. Então, meus itens, imagine que eu

tenho o item um, o item dois e o item três. Então, esse aqui é a posição zero, esse aqui é a posição um, esse aqui é a posição dois, tá? Lembra que é zero, posição zero, posição 1, posição do quem que eu vou colocar a tag? Eu já tirei. Quem que eu vou colocar a tag? Bem, eu vou pegar todos os meus itens. E aí, que que eu faço? Aqui dentro eu vou colocar se é o zero, Se é um, se é o dois. Se é o zero, se é um, se é o dois. Por

exemplo, se eu colocar aqui dois, ele vai pro último item. Se eu colocar um, ele vai pro do meio. E o zero, primeiro item. E aí, qual que eu vou colocar aqui? Qual o item que eu quero colocar o active? Ué, esse aqui, ó. Eu acabei de fazer esse cálculo aqui. Então eu coloco a variável active. Então, eu vou escolher o item. Lembra que eu tenho três itens na posição zero, na um ou na dois, que é Essa variável. E aí, que que eu faço? Eu pego esse item class list. E agora eu não vou

remover uma classe, eu vou adicionar uma classe. Qual classe? Active. Deixa eu deletar isso aqui. Agora sim que vai funcionar, gente. Muitas horas gravando aula, a cabeça para de funcionar. Quando eu clico aqui, trocou. Ih, Rodolfo, não funcionou. Por que não funcionou? Calma que ainda tem código. Calma. Mas vocês já viram que já Começou a funcionar. Ele saiu do zero, foi pro um e depois deu pau. Calma, a gente vai consertar isso aí. Mas vamos continuar. Agora eu tenho que fazer a mesma coisa, só que para o dots. Então não vai ser o items, vai

ser os meus dots. Quem que é meus dots? Esse cara aqui, ó. Então eu pego meus dots na posição active também. Pcasslist. Active. Vamos lá. Agora ele tem que trocar eh o visual aqui e trocar também Aqui embaixo. Então, cliquei, trocou. Cliquei, trocou. Agora ele tem que voltar pro primeiro. Cliquei, voltou pro primeiro. Ó, então o next já tá funcionando, ó. A gente só tem que trocar o número ali. A gente vai trocar, mas já tá funcionando, ó. Olha só. Tá funcionando. Perfeito. Ã, a primeira vez que eu cliquei ali não funcionou, eu acho, porque

como eu não tinha colocado esse cara ainda, acho que ele tava dando pau, ele tava quebrando. Agora a gente tem que fazer a mesma lógica quando eu clico no botão de preview. para ir paraa frente tá dando certo. Agora temos que ir para trás. Quando eu clico para ir para trás é a lógica quase que ao contrária. Eu pego o active -1, só que tem quando ele tá no final. Se eu tô no três, ele vai pro dois. Se eu tô no dois, ele vai pro um. Mas se eu tô no um, vai pro menos?

Não. Ele tem que Voltar pro três. Então agora eu verifico. Se o meu active for menor que zero. Você tá vendo? É bem parecido com a lógica aqui. Aqui eu comparei com o total. Aqui eu vou comparar com menor que zero, mas é bem parecido o total. Eu falo que o active ele vai voltar pro zero, não. Ele vai ser o total -1, que aí eu chego no último item. Perfeito. Então vamos lá. Botão de prev. Cliquei. Voltou. Voltou. Voltou. Vai lá pro final. Ó, tá funcionando também. O Botão de prev é bem, é um

pouquinho diferente, mas é parecido. Ó, se for menor que zero, ele sempre vai voltar um. Então, active -1. Porém, quando ele chegar no zero, ele tem que fazer o quê? Pular pro três. Como que eu sei quem é o três? Lembre-se que o meu, a minha caixinha, minha matriz, meu arrei, ele é 0 1 2. Então, quando ele a ele foi menos que zero, eu tenho que voltar pro três. Não, o total é igual a três. Eu tenho três itens, só que eu quero que ele Volte pro dois. Então é 3 - 1. Volta pro

último item. Tá funcionando, mas ainda falta uma coisinha. Na verdade, faltam três coisinhas. A gente a gente tem que fazer ele funcionar automático. A gente tem que trocar o número aqui e temos que colocar uma animaçãozinha para ele não ficar tão tosco, que ele tá meio tosco, né? Vamos por partes. Por partes. Primeiro Vamos colocar um timer. Para isso, a gente vai fazer o seguinte. A gente vai usar um cara chamado set interval. O set interval, ele vai fazer alguma coisa no intervalo de tempo. Então, deixa eu até ver se ele não completa para mim.

Ó, o VS Code tem esse snipet aqui, ó, que ele completa. Então, essa é a estrutura do set interval, tá? Não sou eu que tô inventando, não tirei da minha cabeça. Essa é a estrutura. Basicamente aqui eu coloco um tempo, eu vou colocar 5 Segundos. Aqui ele é milissegundos. Eu coloquei 5000, são 5 segundos, tá? 5000 aqui ele vai, se eu quisesse ir 1 segundo, seria 1000. Então eu vou colocar cada 5 segundos, ele vai executar alguma coisa. A cada 5 segundos ele vai executar o quê? A minha função update. Correto? Então, opa, isso aqui

eu vou criar fora da função, né, Rodolfo? Deixa eu criar aqui fora da função update. Opa, deletei aqui. Então, a cada 5 segundos ele vai chamar minha função update mandando um, porque eu sempre quero que ele vá pro mesmo lado, tá? Vai funcionar? Não, porque falta, eu tenho que depois dos 5 segundos ele tem que zerar o timer de novo, senão ele dá pau. Então, o que que eu faço? Esse cara aqui que é o set interval, ó, a gente vai fazer o seguinte, eu vou colocar ele dentro de uma variável timer. Lembra que eu

criei o timer, não coloquei nada Dentro do timer? Eu vou colocar dentro da variável timer. E aí depois que passar meus 5 segundos, eu zero esse timer, ó, clear interval timer. Eu zero o timer, por assim dizer, dessa forma. Então, a cada 5 segundos ele chama update mandando um. E aí eu zero o timer e aí ele vai chamando a cada 5 segundos, tá certo? Ã, vamos lá, então. Vamos esperar 5 segundos. Trocou, zerou. Conta mais 5 segundos e próximo. Conta mais c. Enquanto isso, já deixou aquele like, já clicou no sininho, se inscreveu no

canal. Ah, e toda segunda tem live, tá funcionando. Ah, se eu quisesse que voltasse, aí você colocaria aqui menos1. Você que sabe. Você quer que ele vai ou que ele volta. Se você já for um pouco mais pro, aí você pode fazer uma brincadeira, colocar um random, uma hora ele vai pra frente, uma hora vai para trás, mas eu vou deixar aqui um. Então, uma missão já Completamos. Agora a gente tem a missão de trocar o número aqui, né, ó, porque esse número tá aqui e não tá trocando. É, esse número a gente já mapeou

quem ele é, é o number indicator. Então, aqui dentro da opção da função upgrade, lá no final, depois que fizer tudo, a gente vai pegar esse number indicator e a gente vai trocar o texto dele. Qual que vai ser o texto? Para trocar o texto, eu uso esse cara chamado text content. E basicamente eu vou pegar o meu Active mais um. Porque o active mais um. Lembre-se que o active começa em zero. Eu não quero que mostre zero lá. Então eu vou colocar o active mais 1. Vamos ver se funcionou. Então eu tô em um.

Passou 5 segundos. Dois. Passou 5 segundos. Três. E se eu for trocando aqui, ó, vai 1 2 3. Só que tá meio tosco. Por quê? Primeiro, eu queria que ficasse 01 02. Então vamos fazer uma graça. Primeiro, esse cara aqui, ele é Um number. Para eu poder colocar um zero na frente, ele tem que se tornar num texto. E para se transformar num texto, aqui a gente chama ele de string. Então eu já transformei ele numa string, só que só isso não vai adiantar. Ó, 0 1 2 3 1 2 3. Eu tenho que colocar

um zero na frente. Para poder colocar um zero na frente, a gente tem um uma ferramenta do JavaScript que chama pad end ou pad start. O pad end pad start ou ele vai adicionar alguma coisa no começo ou no Fim. No meu caso, eu quero adicionar uma coisa no começo. Que eu quero adicionar no começo? O numeral zero. Só que aí eu falo o seguinte para ele, ó. Ped start, eu quero ter dois caracteres, só que o primeiro vai ser zero, tá? Então o pad start funciona assim. Você colocar o mouse aqui, ele vai te

falar, ó, eh, ó, o primeiro elemento é o max length. Que que é o max length? Qual que é o tamanho máximo que eu posso ter? O máximo que você vai ter é dois caracteres, o 0 1 0 2 0, assim por diante. E aí depois eu tenho que colocar uma string que eu quero que complete. Aí eu salvei isso aqui só uma graça para ficar mais bonitinho. Então agora, ó, 01 02 03 01 02 03. Pronto. Ã, dessa parte aqui eu acho que a gente finalizou do JavaScript. Pra gente fechar com chave de ouro,

a gente vai fazer mais duas coisas. A gente vai melhorar a nossa animação, que nossa animação tá muito tosca. Na verdade não tem animação, ó. Eu quero que ele fique mais charmoso assim. Olha só como você não prefere assim. Vamos fazer essa parte da animação para ficar mais charmoso e vamos colocar essa aplicação no ar, porque não adianta você fazer um site bonito desse e não tá na internet, né? Então vamos colocar no ar, mas antes vamos ajeitar a nossa animação. Vamos pro nosso CSS aqui que a mágica vai acontecer. Então, basicamente a gente vai

fazer algumas graças começando pelo Nosso item. A gente vai adicionar alguns estilos que conforme ele tirar e colocar classes, esses estilos vão mudar e aí a gente vai criar uma transição que vai dar essa, por assim dizer, essa animação. Então, olha o que que tá acontecendo aqui. O item tá aqui e de repente ele faz esse movimento. O que que eu tô fazendo? Além de eu tirar um e colocar outro da tela, eu tô falando para ele andar a tela inteira. Então eu tô pegando ele no zero da tela e jogando Ele até o 100%

da tela. Como que eu faço isso? Bem, quando o item tá ativo, ele tá com opaste zero. Quando quando ele tá quando ele não está ativo, ele tá no opast zero, tá invisível. E depois ele vai pôr opast. Eu posso fazer a mesma coisa. Então até vou separar aqui, ó. Animacão. Vão ser as partes da animação. No caso do meu item, que que eu vou fazer? Eu vou pegar e colocar nele o translate X. Então eu vou mexer ele. O o transform translate Y. Eu estou Movimentando ele no eixo Y. Aqui, ó. Ó. Tô movimentando

ele aqui. Então eu vou movimentar ele sem VW. O que é sem VW? A tela inteira de largura. E aí quando ele tiver com a classe active, eu vou movimentar ele. Só que agora eh, ele vai pro zero, tá? Então eu vou mandar ele do 100 pro zero. Só que se ele fizer isso só vai ser não vai acontecer o que a gente quer. Por isso que a gente tem que colocar o transition Para ele fazer isso na velocidade que eu quero. E aí eu aviso o quê? Ele vai fazer uma transição quando eu trocar

o transform dele. E aí essa transição vai durar, sei lá, 0.7 segundos. Você coloca quanto você quiser. Eu vou usar o easing out. Easing out é a forma que a gente faz a animação. Então o easing out ele começa mais devagar, acelera, depois termina mais devagar. Beleza? Eh, eu vou colocar uma vírgula aqui, porque eu também quero que ele faça a mesma coisa, Só que para o opacity. Então, quando eu trocar o opacity dele, eu também quero que demore 0.7 segundos e aí ele também vai ser easing out. Combinado? Combinado. Combinado. Basicamente é isso. Salvei.

Vamos ver se deu certo. Esse aqui é o como que ele vai ficar. Agora vamos ver o nosso que a gente tá fazendo, ó. Ó, o nosso já tá fazendo esse movimento. Só que eu não quero só nele o movimento, ó. Eu quero que os itens também, ó, a Hora que eles cheguem, eles dão, ó, uma balançadinha. Então, vamos agora pros itens. Então, eu vou eu vou eu vou fechar isso aqui. Esquece o modelo. Agora a gente vai focar só no nosso mesmo. Então, esse aqui é o nosso que a gente tá fazendo, ó. Então,

os itens já estão vindo, mas ainda não tá chegando. Legal. Vamos fazer isso agora. Vamos descer aqui pro nosso product, que a nossa imagem também vai ter uma animação. Animacão. Que que a gente vai Fazer? É aqui a imagem quando fizer o quando ele faz o slider, né? Quando ele vai pro lado, eu quero que a imagem ela vá um pouquinho e volte para fazer esses é como se ela tivesse chegando, sabe? E aí, que que a gente vai fazer? Para se movimentar de lado, eu uso transform translate, que ele faz que o elemento se

movimente assim. Eu vou colocar esse cara aqui uns 200 pixels. Ele vai se movimentar, tá? Ele vai se movimentar uns 200 pixels. Esse cara vai ter o Opast zero, tá? Ele vai tá sumido e quando ele fizer o movimento, ele vai aparecer. Então ele começa como zero. E aí a gente vai fazer eh ele aparecer, tá? Como que a gente vai fazer isso? A gente vai pegar o image e quando ele tiver com a classe ativo, ele não, né? O pai dele vai estar com a classe ativo, mas aí ele consegue pegar. Aí quando o

pai dele tiver ativo, ele fica com o opacity 1. E a gente também vai fazer o seguinte, eu vou fazer um Transformate no eixo X e aí ele vai para o zero. Então o que acontece? Ele vai est sumido e mais pulado. Quando ele aparecer ele vem mais, ele vem pro lugar que ele tem que ficar, pro zero, né? Não se movimenta nada e aí ele aparece. Além disso, para fazer um charme, a gente pode colocar um transition delay, transition delay, para ele demorar um pouquinho para começar a fazer essa transição. E aí a gente

coloca também um transition para que ele faça isso Devagarinho e dê um charme. Então, quando eu tiver uma mudança no transform, eu quero que demore 0.6 segundos para eu conseguir ver esse esse movimento. Vai ser do tipo easy. E eu vou fazer a mesma coisa também aqui, ó, para o opast. Então, quando ele for trocado de opast. Segundos e do tipo easy. Pronto, não tô na frente de vocês. Eu vou salvar tudo e olha só como vai ficar. Quando eu vou pro lado, ó, ó que a Imagem. Ã, pera aí que não funcionou. Eu salvei

aqui. Salvei, salvei, salvei. Deixa eu rodar de novo. Ué, deixa eu ver. Product. Product imagem. Só ver aqui, ó. Deu para ver, ó, a imagem como ela vai chegando, ó, bem devagarinho. E ela se mexe um pouco. Ela vai um pouco pro lado, ó. Ela chega e vai um pouco pro lado. Eu vou colocar um delay um pouco maior para você ver. Vou colocar 1.5 Segundos. Senão eu tô falando aqui que nem um idiota e você não tá vendo. Ó, deixa eu passar pro lado. Eu coloquei 1.5 segundos. Tá vendo, ó? Ela, ele vai um

pouco pro lado, ó. Demorou muito. Pera aí, ó. Ele demora, ó. Tá vendo que ele chega e vai pro lado? É esse efeito, tá? Ficou bem sutil. Se quiser colocar mais aqui, ó, colocar 400, talvez dê para enxergar melhor, ó. Ó, tá vendo que ele chega e ele vai bem pro lado, ó. Bem pro lado. Tranquilo. Agora vamos continuar. A gente tem que fazer mais ou menos a mesma coisa, só que pros outros elementos que tem ali no centro. Eu vou fazer a mesma coisa pro product name. Eu vou até copiar isso aqui, ó. Eu

vou copiar essa parte que ela vai ficar igual. Copiar, copiar, copiar. Ã, cadê product name? Só vou mudar aqui a classe, né, que aqui vai ser Producte. Colocar um pontinho. E vai ser a mesma coisa. Ele vai fazer um um breve vai um pouquinho pro lado, ó. Ó o nome, tá vendo? O nome chegando, ó. Ó o nome chegando. Olha a comparação com o texto de baixo que não faz nada. Ah, ficou bem legal. E aí a gente pode fazer isso para todos. Eu vou copiar aqui essa parte e a gente pode fazer isso pro

description. Só vou trocar aqui pra description. Salvei. E agora olha como a descrição vem junto, ó. Ah. Legal, legal. Essa parte terminamos. Faltou fazer o quê? O botão e essa parte de cima. Eu não vou fazer porque eu quero que você coloque o dedinho no teclado e você faça, tá? Se eu fizer tudo, você não aprende. Mas não adianta nada você fazer essa aplicação linda, maravilhosa, se ela não está online, se ela não está no ar. Então, vamos colocar, vamos demorar um minutinho. É muito rápido e fácil colocar um site no ar. Vem comigo. Pr

isso, a gente vai usar a nossa super parceira, a Hostiggator. Ó, a HostGator tem planos a partir de R$9,89. É muito barato e melhor, pagando R9,89 você tem direito a um domínio. Ou seja, o www.ite.com.br você tem direito. Por que que eu gosto muito da HostGator? Porque ela é muito rápida, seu site carrega muito rápido. Ela tem uma tecnologia chamada CDN. Em outros lugares eles cobram pela CDN. na Hostgator gratuito. CDN é uma tecnologia que faz o seu site Carregar muito mais rápido em qualquer lugar do mundo. Além disso, a HostGator tem suporte 24 horas

por dia, 7 dias por semana. Então, se der algum pepino, você chama Hostgator, eles te ajudam. E novamente, eu não indico porcaria, eu trouxe a Hostiggator de parceira pro canal, porque eu já usei por durante muitos anos, é um serviço que me atendeu muito bem e por isso que eu trago para vocês. E eu consegui um super desconto para você. Então, se você usar o cupom Dev Club para pegar um plano, você tem desconto. E aí, o que que você vai fazer? Você vai escolher um plano, vai acessar sua conta, vai escolher um domínio para

você. Eu escolhi dois aqui, ó, Dev Club Escola, Dev Club Tecnologia. E aqui vai ter um botãozinho chamado, ó, CPEN. CPEN, ó, você vai clicar nesse botão que é o nosso painel de controle. Enquanto o CPN abre, a gente vai preparar o nosso site para subir pro servidor. Que que eu vou fazer? Eu vou Lá na pasta, é tã aqui, ó, Dev Club Store, a pasta que eu estou com os meus arquivos. Eu vou selecionar todos os meus arquivos e vou compactá-los, porque vai ser mais rápido e mais fácil subir pro servidor. Você clica com

o botão direito, eu estou no Mac, chama é comprimir. No Windows, acho que você vai selecionar, enviar para pasta compactada, compactar, é alguma coisa do tipo assim. Beleza, já criei ali minha pasta compactada. Agora eu volto na Rostgator, gerenciador de arquivos. Agora a gente vai entrar aqui no nosso servidor public HTML. Aqui dentro você pode deletar tudo, tá? Então vou selecionar tudo e vou excluir o que tá aqui dentro, porque agora a gente vai colocar o nosso site aqui. Para isso, a gente vai encararregar, selecionar arquivo e eu vou selecionar o meu arquivo que eu

criei aqui, Dev Club Store e meu arquivo compactado, tá? Selecionei meu arquivo, Assim é bem mais rápido e mais fácil de subir. OK, já posso voltar. E o último passo é o descomprimir esses arquivos, porque eles estão comprimidos e tenho que extrair. Eu vou clicar aqui em extrair, vou extrair aqui mesmo. E pronto, o seu site está no ar. Ele demora às vezes uns dois minutinhos para subir, mas você pode já voltar lá no endereço. Vamos ver se já deu certo. Ó, já subiu aqui nosso site e já está funcionando. Muito obrigado por Assistir mais

o vídeo do canal e vou deixar mais dois projetos bem legais aqui para você fazer. เฮ [Música]