Seja muito bem-vindo ou bem-vinda a mais um vídeo do canal e olha o projeto que a gente vai aprontar no vídeo de hoje tá bem bonito bem bonito mesmo e você pode utilizar para ganhar dinheiro eu coloquei aqui carros você pode colocar o que for e vender esse projeto inclusive ele nasceu de uma necessidade real eu comprei um carro novo galera Inclusive eu vou postar tudo sobre o carro novo no meu canal pessoal aqui ó canal Rodolfo M Eu tô postando coisas mais pessoais algumas coisas da minha vida se quiser acompanhar os bastidores segue aqui
se inscreve no canal Rodolfo M aqui é a programação Mas por que que surgiu a ideia desse site comprei o carro novo estava conversando com o Felipe que me ajudou a encontrar esse carro e ele falou Rodolfo tô precisando de um site você que mexe com programação e eu pensei Poxa empresário tá precisando de um site vai sobrar pros meus alunos Ganhar uma graninha né por isso que eu tô trazendo esse super site que você pode vender pro empresário aí do ramo automotivo ou pode transformar ele de outro jeito e vender aí pros seus clientes
inclusive assiste até o final que no final vou te ensinar como você publica esse site de forma profissional e aí já ganha uma graninha com esse site só um detalhe A gente vai utilizar HTML CSS javscript várias tecnologias e tem curso de tudo isso aqui no canal então Se você ficar meio perdido aqui no card que na descrição vai ter os links e já deixa aquele like Maroto Se inscreva Porque toda semana tem vídeo para te ajudar com código Bora pro vs code Bora codar essa aplicação maravilhosa [Música] [Música] vamos lá então estou aqui com
vs code aberto se você não conhece esse programa tem vídeo aqui no canal vou deixar aqui embaixo vídeo de vs code você vai aqui Em Abrir pasta ou pode ir aqui em arquivo abrir e vamos começar nosso projeto escolha uma pasta aí no seu computador eu já deixei uma aqui criada na área de trabalho você pode criar uma tá vazia e vamos começar pelo HTML Tá bom eu vou clicar aqui na pastinha criar um arquivo chamado de index HTML eu te Recomendo muito que esse arquivo chame index HTML porque porque lá no final eu vou
te explicar tá bom assiste o vídeo até o final que no final eu te explico Mas é importante que esse arquivo tenha esse nome Vou digitar aqui HTML vai ter essa opção HTML 2.5 eu clico nela e já vai montar aqui a base do nosso HTML Rodolfo eu não tô entendendo nada aqui tem curso de html no canal saiu esses dias tá fresquinho ensinando HTML de graça de uma forma didática tá no card e aqui embaixo tá bom PTBR aqui vou mudar aqui para FP FP selection Ok o título do nosso site e já Vou
pegar nossas imagens vou criar uma pasta aqui chamado IMG pras nossas imagens você pode chamar como você quiser a nossa pasta e vou arrastar as imagens para essa pasta Rodolfo eu quero as imagens Eu quero imagens imagens imagens as imagens estão aqui embaixo tá bom vou deixar o link aqui embaixo com as imagens Lembrando que nosso projeto tem que ficar assim você troca os carros você faz o que você quiser Tá bom pode fazer com fruta legumes você pode fazer Com câmera com celular esse site aqui a base dele vai servir para você ganhar uma
grana fazendo un sites aí pros seus clientes vamos começar então pelo HTML eu gosto de começar meus projetos de cima para baixo Lembrando que o HTML vai ser só estrutura Então vamos tacar tudo na tela e depois a gente vem estilizando eu vou começar aqui por esse reader aqui ó Tá bom a gente tem aqui uma imagem e temos aqui uns botos vamos colocá-los aqui então Eu Vou Chamar esse cara de Heer a gente pode usar o HTML semo dentro doer eu vou ter a minha imagem cer Vou colocar aqui src do bar imagem e
vai ser essa logo aqui tranquilo colocar o tex alternativo logo FP e aqui dentro doer também eu vou ter o meu menu de navegação que é o meu nave e dentro do meu nave eu vou ter uma lista ali que é o l que a lista e cada item da lista que vai ser a home ã ali eu vou ter também o carros e o fale Cusco ali Opa tá difícil Rodolfo Fale Conosco tá bom eh como a gente não vai ter outras sessões dentro do nosso site eu não vou colocar um link aqui mas
você poderia fazer isso aqui ó poderia colocar um link aqui dentro também que aí esse home ia virar um link Tá certo para te levar para algum lugar mas mas mas entretanto como a gente não vai colocar não nesse vídeo A gente não vai colocar essa parte eu vou deixar só el para ficar mais Simples Ok Rodolfo mas eu não tô vendo meu site Ah legal vamos ver o que que a gente tá fazendo aqui nas extensões do BS code Eu gosto de uma extensão chamado Live server Live server live live live server tá bom
E aí com essa extensão instalada você clica com o botão direito Open Wi Live server E aí ele vai abrir no navegador para nós Ah o logo da FP selection tá muito grande por isso que e ele tá ocupando esse espaço Lembrando Que o fundo dele é branco então ele não aparece aqui ele criou essa pasta vs code você pode ignorar pode deletar você faz o que você quiser e detalhe importante eu quero a sugestão de vocês então dá um pause agora nesse vídeo e comenta aqui embaixo o que que você quer nesse canal você
quer mais projetos projetos com react com node você quer vídeos falando de carreira preciso da sua ajuda então comenta aqui embaixo quais vídeos você quer aqui no canal Quero saber os assuntos para eu trazer aqui para vocês vamos continuar então nosso menu aqui já tá pronto agora a gente precisa colocar os demais itens a gente precisa colocar esse carro esses textos botão e estas coisitas mais aqui tá certo então vamos continuar primeira coisa que eu vou colocar eu vou criar aqui uma caixona n uma caixa então que que eu vou fazer vou até dar uma
pause no vídeo e vou desenhar exatamente o que a gente vai fazer olha só basicamente é Isso que a gente vai ter aqui eu tenho o meu Body né esse verdinho é o meu Body e dentro do meu Body eu tenho nosso eu tenho o reader aqui em cima a gente vai criar uma section dentro dessa section a gente vai ter os nossos itens quem que são os itens são esses caras aqui ó Então esse aqui é um item esse aqui é outro item e assim por diante e mais lá em baixo a gente também
vai ter esses carinhas aqui ó que é esses botõezinhos e esses daqui tá bom esses daqui a gente Vai até colocar do lado de fora esses botões aqui Tranquilo então agora que vocês já entenderam o que a gente vai fazer vamos colocar a mão na massa para isso a gente vai continuar aqui eu vou criar a nossa section certo e dentro da nossa section eu vou criar aqui uma div que já vou até colocar a classe dela que vai ser a list que Vai facilitar a gente estilizar depois lá no h ml e dentro de
list a gente vai ter uma div também que é a Nossa classe item tá bom vão ser três itens porque eu tenho um Carrossel com três posições você poder colocar dois quatro enfim Quantos você quiser então e depois lá no fundo a gente vai criar este botãozinho aqui E este aqui também Tranquilo então dentro do nosso item a gente vai ter algumas coisas a primeira coisa que eu vou ter aqui é esta imagem aqui ó eu vou ter essa imagem aqui essa imagem para facilitar a gente lidar com ela vou colocar dentro de uma div
também Tá certo vou chamar essa já vou dar uma já vou D classe para tudo para facilitar vou chamar ela de car image e aqui dentro a gente coloca a imagem a imagem imagem do nosso carro então ponto barra vou começar aqui com a imagem um out imagem carro nosso texto alternativo e beleza já tenho minha imagem aqui depois da imagem eu vou ter alguns conteúdos que que é os conteúdos é esse texto esse outro texto esse outro texto esse botão Então eu preciso jogar esses conteúdos na tela e aí eu vou colocar numa div
separada para facilitar a nossa estilização vou dar uma classe também para esses car vou chamar de content que é abreviação de conteúdo eu gosto de colocar tudo em inglês se quiser colocar em português não tem problema tem empresa que usa inglês tem empresa que usa português já Trabalhe em empresa que era em português já Trabalhe em empresa que era em inglês então vai do gosto do Freguês sem frescura tranquilo vou e vou criar um um parágrafo aqui ó que é esse parágrafo aqui em cima ó por exemplo único dono você coloca o que você quiser
colocar aqui ó único dono Você poderia colocar outra informação do carro o ano tudo mais enfim Ok eu vou dar uma classe para esse texto aqui eh eu vou chamar de cara eu sou péssimo péssimo em dar nome para classes péssimo péssimo péssimo eu Vou colocar aqui ó Car information ISS aqui vai ser a car information que é a informação do carro o nosso parágrafo abaixo do parágrafo eu vou colocar um H2 que vai ser esse texto maior aqui Ferrari Ferrari Ferrari colocar aqui Ferrari vamos dar uma classe aqui para facilitar lá quando a gente
for para o CSS ã essa aqui acho que nem vai precisar de classe Porque como um H2 só vai ter ele no texto todo no no par no contexto todo eu não vou colocar uma Classe por enquanto eu acho que não vai precisar aqui a gente vai ter outro parágrafo que vai ser a nossa description que é essa descrição aqui menor tá certo esse texto menor V chamar de description aqui dentro é só você escrever Loren assim ó tá vendo ó Loren apertar e ele vai completar com texto completamente aleatório tá bom vamos ver como
tá ficando ó ó Estamos jogando ó o carro tá Aqui ó único dono Ferrari e um texto aleatório beleza Rodolfo tá horrível tá feio eu sei daqui a pouco a gente vem com o CSS Inclusive tem curso de CSS no canal inclusive nesse momento você já pode dar o like que nos ajuda bastante tá bom o nosso botão tá escrito de like não tá escrito saiba mais aí você pode colocar o que você quiser saiba mais bom botãozinho saiba mais e basicamente a gente terminou essa parte aqui o que tá Faltando é este carinha aqui
ó estes botõe aqui esses botez como eu já tinha falado para vocês ó aqui no scor draw Vou colocar aqui ó eles vão ficar fora disso aqui ó fora aqui fora tá bom a gente vai pular tudo isso aqui e vai criar nossos botões do lado de fora então aqui fora ó ó presta atenção fora da da da da da da da da nossa l ó list a gente tem a list aí tem o item Tá certo e aqui fora do list do item a gente tem a section mas eu vou criar esses botões Dentro
da section o primeiro eu vou criar aqui vai ser nossas setinhas já vou dar uma classe aqui vou chamar de arrows que é Seta em inglês setinha e aí vão ser dois botões vou colocar o botão um dentro do botão vai ter uma imagem né que é a imagem da seta Então vou colocar aqui ó src Opa s pon barra já tá lá nas minhas imagens aqui ó arrow.svg Tá bom pode colocar um texto alternativo também Seta essa aqui é a seta esquerda E aí nós temos a seta direita agora vai chover de gente nos
comentários falando seguinte Olha só nossa seta Rodolfo Só tem uma seta só tem a seta pro lado direito e agora agora quem poderá nos salvar como que a gente vai fazer isso todas as setas são pro lado direito e agora Calma Calma jovem gafanhoto nesse momento você pode ir nos comentários Mas é para falar o Que que você quer aqui no canal O que que você tá achando do vídeo comenta aí alguma coisa que ajuda PR caramba Olha eu gasto horas e horas para fazer esse vídeo quando você comenta eu fico feliz para gravar mais
vídeos para vocês fico felizão inclusive nossa placa do YouTube chegou ó aqui ó tá aqui ó tá aqui ó Muito obrigado vocês que curtem comentam compartilham assistam o vídeo do canal chegamos a 100.000 Graças a vocês vamos lá pra próxima div a próxima div vai ser Esses carinhas aqui ó ó esses caras aqui ó ó ó ó ó ó esses daqui tá bom tá bom vai ser estes carinhas aqui Eita até travou aqui vamos lá já vou dar uma classe para ela vou chamar de indicators que vai ser aqui aqueles indicadores EA o microfone quer
fugir são aqueles indicadores dentro deles eu vou ter uma outra divinha que vai ser os números vou chamar de Number tá bom aqui nessa divinha eu vou ter o Number vou começar Com Number One Number um número um e aí eu vou criar uma lista aqui a é uma lista Tá certo você assisti o meu curso de html você sabe disso E aí eu vou ter três itens ali 1 2 3 1 2 3 Rodolfo mas Rodolfo como que eu vou fazer isso Calma só coloca os itens E aí depois a gente vai mexer neles
certo tá certo uma coisa que a gente vai fazer lá no CSS é ficar trocando a classe deles e conforme troca a classe e troca a cor eu já vou deixar Um com uma classe chamado Active ou seja ele vai esse aqui vai começar ativo né que é o número um e aí depois a gente vai trocando classe por classe e aí quando a gente troca a classe também troca a cor de fundo aí por isso que dá esse efeito aqui bonitão certo eu acho que agora a gente finalizou o nosso HTML colocamos todos os
itens é claro que tá tudo muito feio mas vamos dar um tapa de CSS para ficar tudo muito muito muito muito muito Bonito né Tá bom então vamos lá para o CSS PR começar o CSS Vamos criar o arquivo vou clicar aqui na pastinha vou criar um arquivo chamado styles.css você cria chama como você quiser esse arquivo beleza tranquilo só que aqui no HTML eu tenho que linkar esse arquivo eu tenho que falar pro HTML que eu criei um arquivo CSS eu digito aqui link e vou nessa opção CSS importante este arquivo tem que ter
o mesmo nome esse aqui é abacate aqui é abacate e vice-versa tá Bom Versa e vice vamos lá criei meu arquivo agora eu vou fazer alguns resets aqui que eu gosto de fazer eu vou colocar asterisco vou zerar a margem o pading e também vou colocar o box sizing como border Box Rodolfo não tô entendendo nada tem curso de CSS aqui no canal é só acessar aqui embaixo inclusive ó nossa placa de 100.000 inscritos chegou tá aqui atrás Muito obrigado para vocês que acompanh os vídeos do canal comenta aqui embaixo O Que mais você quer
ver no canal Deixa aquele like Maroto Se inscreva se você ainda não é inscrito agora a meta é chegar no 1 milhão Ok já vou aproveitar que eu tô aqui eu vou pegar o meu Body vou dar um background color nele vou deixar ele todo preto vou dar um color ou seja vou deixar os textos em branco e já vou dar um Font size padrão de 16 pixels tá bom isso aqui arroz com feijão lá no curso de CSS eu ensino esquece de salvar aqui salvar Aqui voltei lá e não funcionou uhum o que que
aconteceu Ah olha a cagadinha aqui ó aqui é style.css e aqui é Styles eu errei ó Faltou o s aqui tá vendo é até bom acontecer essas cagadinhas ao vivo porque aí vocês veem que pô deu erro vamos ver Por que que não tá chamando Ah beleza funcionou agora vamos continuar agora eu quero estilizar o reader vamos estilizar o reader no vídeo passado do canal inclusive editor Editora a gente Tem um editor e tem uma editora não sei quem vai editar então um dos dois Coloca aí um take do vídeo do da semana passada do
canal a gente fez um Carrossel bem legal bem bonito vou deixar aqui no card depois você vai lá faz Coloca no seu portfólio um vídeo sensacional E aí nesse vídeo eu ensinei uma coisa por exemplo você quer estilizar sli no vídeo passado eu ensinei que você poderia fazer assim ó para que você não cometa uma cagada estilize L errada O legal é Você seguir ó fazer assim ó eu procuro um reader depois Procure um reader que tem uma e que tem um li Cadê ó o caminho ó reader reer depois nave o l li então
você poderia colocar aqui reader nave o l Li e estilizar eu fiz assim no vídeo passado nesse vídeo eu quero ensinar de um jeito diferente por exemplo no vídeo passado a gente faria assim ó reader image hum é um bom jeito só que tem várias formas de fazer a mesma coisa às vezes não tem melhor ou pior só jeitos Diferentes um jeito diferente é a gente fazer isso aqui ó colocar o Ezinho comercial dentro do reader e colocar o que eu quero estilizar porque aí ele vai procurar um reader e vai procurar um reader que
tem uma imagem dentro tá bom vou estilizar nossa imagem aqui eu vou dar um widget nela de 250 pixels que ela tá muito grande salvei ó já diminuiu Beleza agora a nossa missão é o seguinte Vamos separar esses itens aqui e vamos colos no lugar Certo noer voltando noer a gente vai fazer o seguinte eu vou dar um position fixed eu vou Fix ao topo agora vou ensinar um truque para você centralizar qualquer bagaça qualquer bagaça quando tiver o position fixed funciona pro Absolute relative também dá para você utilizar esse truque quero centralizar tudo ó
perceba que esses caras estão centralizados a gente vai fazer o seguinte você vai eh colocar aqui ó left 50% Só que tem um probleminha quando Você coloca LEP de 50% ele começa do Meio para lá ou seja ele não tá Centralizado ó ele tá do Meio para lá então ele fica desbalanceado para eu deixar exatamente no meio aqui que vem o truque Eu uso o Transform o translate x ou seja ele vai se mover no eixo X - 50% E aí ó olha a mágica acontecendo agora sim tá exatamente no meio beleza mas não acabou
não tá do jeito que a gente quer para ficar do jeito que a gente quer eu vou dar um display Grid e vou separar Esses caras em dois para isso a gente tem o Grid template colums e eu vou criar duas colunas duas colunas aqui a primeira coluna ela vai ocupar uma fração da tela e a outra 600 pi tá bom pode usar e essa nomenclatura de fração ou seja se eu colocar um FR um FR ele vai deixar a metade da tela para um metade para outro uma fração para um uma para outro nesse
caso como eu coloquei 600 pixels um vai Ocupar 600 pixels E aí a outra metade fica com o outro camarada beleza vou dar um GAP também entre os itens un 50 pixels para eles não ficarem grudadinhos beleza por enquanto é isso é isso Isso é isso é isso mas entretanto todavia não é o bastante esse cara ainda tá bem bem bem cagado Tá bom eu posso dar uma como eu tô usando display glid eu posso dar uma Aline items como Center também para calizos aqui ó Tá bom calizos para ficar bem no Meio agora a
gente tem que arrumar o cara de baixo o cara de baixo ali no caso é o nave Então vou colocar um Ezinho procura um menu de navegação só que Dent dentro do menu navegação Eu quero que você procure uma o olha só que legal eu consigo ir navegando ó procuro um reader dentro do reader procuro um reader que tem um nave e dentro do nave uma ul a mi que tem os itens ali eu também vou dar um display Grid Nela só que aqui no Grid template colums eu vou como que eu tenho três itens
eu vou criar três colunas eu posso criar assim ó um FR um fr FR criei três colunas ou eu posso evitar a fadiga E aí tem a opção repeat Eu Quero que repita três vezes cada uma vai ter 200 pixels salvei aqui ah ficou legal ã eu acho que o GAP aqui pode aumentar um pouquinho eu acho que o GAP ainda não tá legal eu vou colocar um GAP de 10% que aí ele se adapta à tela Salvei aqui eu acho que já tá bem legal essas bolinhas atrapalham muito eu não gosto para tirar essas
bolinhas eu vou tirar de tudo então a gente vai aqui é essas bolinhas chamam L Style e a gente coloca como nome vou colocar para tirar de tudo tudo tudo tudo tá certo é tá bem legal a gente vai mexer em mais algumas coisas mas por enquanto já nos serve algumas coisas a gente vai deixando só mais ou menos daqui a pouco a gente vem estilizando falta mexer Algumas coisas também só um detalhe ó tá bem diferente aqui né por qu a gente eu acho que não colocou o idit desse cara eu vou colocar um
Edit dele de 90% da tela Então vou dar um wiit de 90 VW Ah agora sim ó agora já tá mais legal Talvez um pouco menos 80 aí vai do seu gosto tá bom o GAP tá muito diminui o GAP um pouco Ah não quero um GAP de 10% eu quero colocar uns 100 pixs aí é do seu gosto do seu cliente PR você ver como que você vai Fazer tá certo mas isso não é tão important vamos aqui que agora a missão é estilizar esses caras aqui esses caras aqui se a gente for analisar
aqui no nosso HTML se a gente for descer é a nossa section dentro da section a gente tem a list e o item então eu vou aqui para o meu CSS e vamos aqui embaixo pegar a nossa section e começar a estilização desta bagaça primeira coisa que eu vou fazer é dar um background image e a gente vai eh colocar esse Background bonitão aqui ó tá vendo que tá um roxo meio degradê isso aqui chama-se eh Radial Gradiente ó Radial Gradiente que que é o Radial Gradiente eu eu dou duas cores para ele e aí
ele vai fazer um Radial vai fazer esse estilo meio Gradiente por exemplo se eu colocar preto e e branco ó só o que ele vai fazer ó tá vendo ele colocou o preto no no no meio e foi abrindo para o branco Tá certo claro que a gente não vai Colocar essas cores eu separei aqui umas cores deixa eu deixa eu pegar aqui porque Galera vocês acham que eu gravo cor né Então deixa eu pegar aqui na minha outra tela que tá lá do outro lado ó uma é #f 7f 3D 9e e a outra
é 6 d00 D9 Tá bom já tá com essa cor e uma coisa bem legal eu tô usando uma extensão que chama color Highlight E aí ela faz isso aqui ó tá vendo que deixa com as corzinha então você pode ir aqui ó e fuçar ó ah eu Quero um pouco mais escuro e esse aqui eu quero mais caro Claro salvei Ah beleza Gostei não gostei vai do seu gosto eu vou até deixar esse aqui que eu gostei também fica legal depois Qualquer coisa a gente mexe nisso beleza mas isso agora não é tão importante
aí você vai com a cor que você quiser eu já vou dar um height de 100 VH que eu quero que ele ocupe a tela toda position relative aqui também Vai facilitar a nossa estilização ã esses botões eles estão atrapalhando Muito muito muito muito muito então eu só vou pular lá para eles e só colocar uma estilização rápida ã esse cara aqui ó arrows buttons na verdade a imagem que tá dentro do buttle então eu vou pegar aqui ó classe arrows dentro de arrows eu vou procurar aqui um buttle e dentro de Button eu vou
procurar aqui uma imagem é isso vamos ver eu tenho aqui arrows tenho o buttle e dentro do buttle eu tenho uma imagem Eu vou dar um Edit aqui nela de sei lá 100 pixels salvei aqui Ah beleza já tá bem melhor tava atrapalhando demais demais demais a nossa estilização tranquilo ah detalhe importante Olha só o nosso reader Sumiu sumiu sumiu sumiu o que que aconteceu Ele ficou atrás do nosso background para isso a gente pode ir aqui no nosso reader e colocar uns index de dois index dois Pronto já apareceu já voltou tá aqui de
volta tranquilo tá bom vamos Voltar da onde a gente tava que é aqui na nossa section agora a gente vai estilizar a nossa list ó Então a gente tem a section e dentro da section a da section a gente tem a div list aí Isso aqui é uma div então eu não posso tem tem mais de uma div dentro da section por isso que aqui eu vou usar classe então eu coloco a classe list não esqueça do ponto ó ponto list tá bom tenta não juntar também deixar separado que fica Melhor então dentro da minha
section eu tenho uma classe chamada list e essa que eu vou estilizar o edit dela vou começar vou colocar de um 70 VW que eu eu quero que ocupe a tela toda eu já vou dar um margem alto o margem alto quando eu dou margem alto ele Ah ele vai centralizar as coisas para nós tá certo Por enquanto não vai mudar muita coisa vamos continuar estilizando ã aqui ó eu vou dar um height de 100% também para ele sempre ocupar o espaço todo que tem Disponível e também ele também vai ser position relative tranquilo dentro
do nosso list a gente tem a parte que mais é importante para agora que é a nossa div item onde realmente tá todos os nossos itens aqui até aqui a gente colocou essas configurações que não mudaram muita coisa para nós tá certo ó o que mudou é que ela já tá centralizada ó ela já tá centralizada aqui ó em relação às laterais e ela também já deixou esses Carinhas aqui de lado boa agora a gente vai estilizar o nosso item ó o nosso item a gente estilizou a section a list e agora o item em
si ó só um detalhe eu não quero que temha esse scroll aqui do mouse também ó não quero não quero não quero a gente pode matar esse scroll do mouse da seguinte forma eu vou lá no Body e vou dar um overflow como hiem beleza ele vai sumir com esse scroll sumiu cadê meu botão não importa Ele sumiu junto mas daqui a pouco a gente ressuscita ele então beleza aqui dentro do list eu vou colocar um Ezinho comercial ponto item que agora eu vou estilizar o meu item ele vai ser position Absolute tá bom porque
eu vou colocar ele exatamente no ponto que eu quero eu vou botar ele aqui no meio tranquilo ã tem um truque bem legal o position Absolute quando eu coloco position Absolute eu posso escolher o top dele Por exemplo top zero o botom eu quero 20 e assim por diante só que para eu não ter que ficar colocando um por um eu posso usar um atalho que é o inset quando eu uso o inset e eu por exemplo se eu coloco em set zero ele vai colocar o borom como zero o top como zero todos como
zero entendeu eu poderia também colocando um por um mas no nosso caso eu quero todo mundo como zero top botom enfim o left right todo mundo como zero calma não mudou muita coisa ainda mas Vamos chegar lá dentro do meu do meu item eu tenho uma eu tenho aquela imagem que ela não tá no lugar que eu quero que é essa classe aqui ó Car traço image vamos pegar essa classe e vamos estilizar eu também vou dar um position Absolute nela Tá certo vou dar um top 50% para ela descer um pouquinho que ela tá
muito e a gente vai usar aquele truque de novo eu vou pegar o Transform o translate só que agora eu não quero Translate x eu quero Y por quê aqui eu queria centralizar na vertical Ô na horizontal na na horizontal agora eu quero centralizar na vertical então é o eixo Y - 50% boa já centralizou aqui no eixo no eixo que eu queria que é o vertical Calma isso aqui a gente vai consertar daqui a pouco e também eu já vou dar um wiit para esse cara de 70% tranquilo o meu carro terminou basicamente mas
esse Car widget ele é Uma div dele ainda ten uma imagem e essa imagem eu vou querer mexer nela também então aqui dentro eu vou colocar o Ezinho comercial também acessar a minha imagem dentro dela eu vou falar para ocupar Todo o espaço que ela tem disponível e também vou dar uma rotacionada de leve vou dar uma rotacionada porque Lembrando que o nosso carro ó el fica meio deitadinho então eu vou dar um rotate aqui de 30 G deeg - 30º foi muito calma depois a Gente acerta tá bom É mais ou menos isso ah
não gostei quero 20 você coloca 20 aqui ó aí ele não vai tanto eu vou deixar 30 e aí depois a gente vai mexer também com as animations animations Por enquanto é isso depois também me lembrem como se como se a gente tivesse ao vivo para vocês me lembrarem mas depois a gente vai colocar essa sombra aqui embaixo tá bom eu vou me lembrar Mas se você quiser você pode Me lembrar aqui nos comentários Rodolfo coloca a sombra comenta aí qualquer coisa que você ajuda bastante no canal agora a gente tem que continuar né Eu
já estilize esse cara agora eu tenho que estilizar o conteúdo ó o content muito importante cuidado onde você vai colocar aqui ó Então dentro de item eu tenho Car image e tem o image então ó eu vou pular aqui o Car image porque o o meu content tá no mesmo nível Inclusive eu recomendo você copiar assim para você Não cometer erros bom cuidado aí com os níveis para não colocar no lugar errado position Absolute também vou até acelerar aqui vou colocar um Wi de 100 pixels também vou colocar um Edit de 70% aqui para nós
ã um height de 100% para ele ocupar pá aqui eu vou dar um display é Flex nele Flex Direction eu vou mudar a direção dele vou colocar como Colon tá Bom Por que Colon ó deixa eu comentar aqui ó tava um do lado do outro tá vendo ó um do lado do outro ó um do lado do outro eu não quero um do lado do outro eu quero eles em coluna então Flex Direction ou seja direção que eu quero em coluna vai ficar um embaixo do outro que é o que eu quero beleza mas ainda
não tá aonde eu quero a gente vai consertar isso vou dar um justify content end que é o justify content eu vou jogar todo mundo pro final Ó Foi pro final se eu tivesse se tivesse um do lado do outro ele jogaria pro final tudo pra direita o meu vídeo tá invertido tá em relação a vocês mas como ele tá em coluna ele joga todo mundo para baixo que é o que eu quero e eu também vou dar um Aline items Como and que agora sim ele vai jogar tudo pra direita então na vertical e
na horizontal eu quero que você Jogue Tudo para o final e eu vou dar um GAP de 20 pixels entre os nossos itens tá bom Dentro de content eu tenho meu Car information O H2 e o description e o Button Então vamos lá dentro de content eu vou pegar aqui e colocar o Ezinho comercial e o primeiro que eu tenho é o Car information vou copiar aqui lembrando que é uma classe coloco o pontinho vou dar um Font weight nele Font weight bold vou deixar ele já tá aqui não preciso mudar tanta coisa vamos pro
próximo Ezinho comercial H2 que é noss onde tá escrito ali Ferrari Ferrari fal n esses dias eu assisti o filme da Ferrari Recomendo muito bom tem nada a ver com a aula mas eu gostei o Font size dele eu vou colocar aqui de deixa eu ver 4 R não 8 em ó já ficou bem grande depois a gente troca a fonte que a fonte não tá das melhores também vou dar um Line rate que é a altura da Linha Então vou colocar um em que eu quero mudar aqui a altura da minha linha tá bem
legal Vamos pro próximo porque tem muito conteúdo Ainda já deixou o like ó já tô suando aqui não Liguei o ar condicionado então eu acho que eu mereço o seu like Maroto o descrip que é esse cara aqui ó esse texto melhor menor a gente vai fazer o seguinte aqui no description a gente vai dar um aai acho que nem vai precisar e vou colocar um color eu vou pegar eu não quero branco eu quero um pouquinho mais cinza então Eu vou puxar aqui ó uma corzinha assim ó bom essa aqui ó D9 D9 D9
D9 vou mudar a fonte uns 12 pixels já tá bom vou alinhar o texto à direita right e também vou falar que o máximo que ele vai ocupar é 400 pixels mais que 400 pixels ele não pode ficar beleza eu acho que não tem muito segredo isso aqui e por último mas não menos importante a gente tem ali o nosso botão este botão aqui inclusive vou colocar uma classe para ele e Chamar de Information que é o saiba mais colocar uma classe aqui para ele temos muitos botões então para não ah confundir o information eu
já vou dar um border radius nele 30 pixels para ficar com a bordinha arredondada ó purin arredondada vou aumentar o tamanho dele 35 pixels de altura 120 de largura Tá certo além de isso eu vou deixar tudo sempre com letra maiúscula Então vou colocar aqui ó text Transform Upper Case ó saiba mais de maiúsculo Beleza tô na frente de vocês est um pouquinho né Ó mas acho que dá para ver beleza test Transform upper Case vou colocar uma borda nele dois pixels Solid eu separei uma cor de borda mas eu vou colocar aqui um roo
pra gente agilizar nossa que mais ele vai ter um background color que é um verde bem neon que eu separei aqui deixa eu pegar deixa eu pegar deixa eu pegar peguei lá outra tela peguei o Color dele vai ser preto pode ser preto vou colocar o cursor como Pointer E aí tá aqui ó o nosso botãozinho Tá bom eu vou mudar o Font weight dele colocar como bold vai ficar mais bonito Beleza depois a gente troca a fonte beleza beleza beleza tranquilo tá saindo o nosso projeto agora o que que falta falta esses botões aqui
tá certo esses botões a gente vai criar esta linha aqui e também falta esses caras Aqui ó este cara aqui ó esses daqui esses caras aqui gente for no nosso HTML são os indicators vamos lá estilizar os indicators Então os indicators eles estão dentro da section Tá certo então a gente pode ir lá no final da section perfeito ã a o Arrow o Arrow o Arrow o Arrow também tá dentro da section então a gente pode colocar aqui dentro ó vou recortar vou colar porque tá todo mundo Dentro da section então aqui os indicator vou
colocar in Opa deixa eu copiar aqui para não ter erro indicators até colocar debaixo da Aron para ficar na ordem bonitinha ponto indicators os nossos indicators eles basicamente são as liis ali então a gente vai ter que estilizar bastante coisa eu já vou dar um position Absolute para eu colocar eles exatamente onde eu quero vou dar um top 50% tá certo ah o Nosso height eu vou colocar uns 200 pixels eu acho que e já tá bom para eles widgit 90 VW vai ocupar bastante espaço ã aqui eu vou dar um left também 50% certo
e também já vou dar um Transform translate no eixo X de menos 50% tranquilo calma que vai sair por enquanto não vai ter muita coisa pra gente ver aqui mas vamos continuar Calma que vai sair por enquanto só tá o o numerozinho aqui mas ele ele vai vai ficar bonito confirme confirme mim CSS Por CSS o negócio sai vou dar um display Flex também Lembrando que o indicators ele é uma div dentro dele eu tenho a div do número e tenho as l e as Lis Tá certo então como é uma div vou dar um
display Flex vou dar um Flex Direction colum Cadê o Flex Direction colum quero um debaixo do do outro não um do lado do outro como tava ali e e também já vou dar um justify content como end para eu jogar todo mundo lá para o final no final ó tá aqui ó tá aqui calma vai sair Vai sair ã justify content como end agora eu vou dar um GAP também de uns uns 15 pixels ali para para não ficar grudado um no outro perfeito agora a gente vai estilizar o próximo que é o Number então
eu vou dar um Ezinho ponto number o nosso Number por enquanto eu só vou dar um fonte size nele deixar ele bem grande 5 em ele já tá branco que é a cor que ele vai ficar e depois a gente coloca um Font Family nele também agora a gente tem depois do Number as l e as l Então vou colocar um Ezinho comercial o l a l eu só vou dar um display Flex pra gente facilitar o nosso desenvolvimento para já o Flex organiza muita coisa e dá um GAP de 10 pixels para não ficar
um do lado do outro cadê Rodolfo calma as Lis não tem cor não tem nada então aqui dentro da L eu vou dar um Ezinho Li agora sim elas vão aparecer elas vão ter um wiit de 50 pixels vou dar um height de 5 pixels porque elas são bem fininhas agora a gente vai agora Vai aparecer porque eu vou colocar um background color vou colocar a mesma cor que a gente colocou no botão então pegar aqui a cor do botão BF f1b hashtag BF F f1b também eu vou dar um que mais que eu preciso
aqui nela vou dar um cursor um Como que chama border radius uns CCO pixels Eu acho que já tá bom ficou legal vamos ver como tá na outra já tá bem legal Tranquilo e eu já vou deixar aqui também um transition por o transition daqui a pouquinho a gente vai meer com as animações E aí depois eu vou ter que voltar em muitos lugares e eu já vou deixar esse aqui acho que é isso bom ainda tem algumas coisinhas que a gente vai corrigir mas a gente vai corrigir conforme a gente coloca as nossas animações
também agora a cereja do bolo é colocar essas setinhas aqui que é o Que faltou para nós e de resto eu acho que tá ok Deixa eu ver ah falta um negócio ó quando eu tenho uma uma um deles sempre vai tá ativo né ó o que tiver ativo a gente precisa trocar a cor dele então eu vou fazer o seguinte eu vou ter a minhas Lis e vou ter uma uma que vai ser a classe Active a classe Active vou dar um background color Branco basicamente só vai mudar isso tá bom beleza agora vamos
lá então Estilizar as arrows se a gente for lá pros Styles a gente já começou aqui ó mexer no Arrow mas Entretanto a gente só tinha colocado um valor aleatório só pro nosso botão nosso botão tava muito grande tava atrapalhando agora sim só um detalhe o arrows ele tem uma div dentro tem um botão e tem uma imagem Então vamos estilizar um por um Começando aqui pelo arrows que é a div eu vou dar um sem VW nela e por enquanto ela tá sumida Então vou ressuscitá-la com com position Absolute Absolute vou dar um top
50% left 50% vamos ver se ela apareceu já estão aqui ó já apareceram Mas eu não quero elas grudadas eu quero cada uma para um canto então eu posso usar aqui o display Flex e o display Flex quando eu coloco display Flex ele habilita o uso justify content com justify content eu tenho várias opções por exemplo iend que joga todo mundo pro final como a gente já utilizou e tem uma opção que é Space Between que vai criar um espaço um espaçamento entre os itens Space espaço entre que no caso não funcionou ainda porque a
gente vai ter que mexer neles no posicionamento deles eles estão com posi Absolute 50 50 só que faltou uma coisa lembra do Transform a gente vai usar o Transform translate Mas em vez de eu fazer o trans translate x depois o y em duas linhas o translate já me dá um atalho então eu vou colocar - 50% para um e - 25 pixels para outro já mexe nos Dois eixos de uma vez só Ah agora sim posicionou o lugar que eu queria certo um detalhe importante aqui no vs code quando você tá com dúvida de
propriedades você pode clicar aqui em cima e aí ele ele ele mostra tudo para você C cer tem tudo bonitinho algumas coisas estão em inglês a maioria tá em inglês mas qualquer coisa você pode jogar no Google mas às vezes algumas coisas ele salva e ele fala o que que faz aí ó ele tá com a referência do mdn Você pode clicar aqui e ele te levar lá pro mdn Lembrando que muita coisa no mdn tem em português Ó então clicar aqui em Abrir Ah que legal page not F parabéns eu fiz propaganda PR os
caras vamos ver esse aqui Ah era só aquele Então tá aqui ó o Transform explicando como como funciona já tá em português olha só que legal tudo em português blá Transform translate Olha aqui que eu falei PR vocês ó ó colocar duas propriedades numa só então tem muita muita muita coisa é Só ir fuçando ó o scale que a gente utilizou Então é isso aí não tem desculpa aqui eu acho que é só isso depois Qualquer coisa a gente volta agora a gente tem que estilizar o nosso botão o nosso botão você deve ter percebido
na verdade na imagem que as duas estão apontando pro mesmo lado a gente vai consertar esta cagadinha agora na verdade não é uma cagada é que a gente tá usando uma imagem só pras duas coisas para isso a gente vai pegar vou Pegar até aqui ó vou pegar o nosso botão Mas eu não quero qualquer botão eu quero apenas o primeiro botão poderia colocar uma classe aqui poderia mas a gente tem um cara que chama aqui ó went child Ou seja eu posso falar qual criança que eu quero no caso ele tem duas dois botões
mas eu não quero os dois eu quero só o botão número um então lá no botão número um procuro uma imagem e essa imagem você vai dar um Transform scale Menos 1 certo Oh que que o scale faz lá na página do Transform tava mostrando scale até falei para vocês ó aqui ó vendo o esio ele basicamente ó ele movimenta o item Se eu colocar um scale o item na posi normal eu coloca menos vendo ele rotaciona o item que é o que a gente queria mudar ali o nosso o lado do coisinho ali certo
rotacionou beleza porém ainda tá tudo muito muito muito bagunçado muito Bagunçado então aqui eu V fazer o seguinte a gente vaiti primeiro Button depois a gente vai pra imagem do Button o meu botão eu vou colocar um top 60% Edit eu vou colocar de 50 pixels vou diminuir o height de 50 pixels Inclusive a nossa imagem ela tá muito grande eu coloquei 100 pixels mas não vai ser 100 não colocar uns 30 o botão tá com 50 a imagem vai ser uns 30 o border radius do nosso botão vai ser 50% beleza não vai ter
borda no nosso Botão vou dar um border vou dar o cursor como Pointer para ficar aquela mãozinha ã e eu acho que é só isso na nossa imagem não tem muito o que fazer também não é basicamente isso só tá meio torto aqui tá vendo que tá meio torto ó tá um pouquinho mais para cima a imagem eu vou fazer o seguinte eu vou dar um margem top de uns quatro pixels Agora sim e para finalizar mesmo eu vou fazer um Rover aqui no nosso Botão então fora do botão aqui na verdade a gente pode
fazer aqui dentro mesmo colocar um Ezinho comercial e a gente coloca dois pontos Hover que que é o Hover Quando eu colocar o mouse em cima que que vai acontecer com esse botão eu quero trocar o background dele vou pegar aquele background que a gente tava utilizando ali ó outro botão hashtag be então coloquei o mouse em cima ó ele Troca a cor Tá bom pode colocar aqui também da nossa imagem Cadê cursor como Pointer é isso agora faltou aquela linha aqui né ó ó faltou esta linha aqui faltou essa linha aqui vamos vamos fazer
esta esta linha essa linha ela vai ficar dentro do list Cadê o list aqui ó list vamos lá no final do list aqui ó aqui no final do list tem uns carinhas que chamam After e before Ou seja a gente pode colocar alguma coisa antes e depois After e Before é before é antes After é depois então a gente pode por assim dizer colocar algo antes ou depois dos itens tranquilo e aí que que a gente vai fazer todo After before tem que ter o conteúdo nosso caso vai ser vazio não não não vou colocar
conteúdo porque eu poderia colocar um texto mas eu não vou colocar o que eu vou colocar mesmo é uma borda nesse nesse por assim dizendo esse conteúdo vazio Só que essa borda vai ser aquela linha bonitona eu vou dar um Position Absolute para eu colocar exatamente onde eu quero vou dar um height de 200 pixels wid 100% para ele ocupar Todo o espaço do list né ele vai ocupar de Fora a fora top 50% e vou colocar um Border um pixel Sid Branco salvei aqui e tanã não ficou Exatamente porque eu não quero borda em
tudo eu quero border top border top não borda em tudo senão ele vai ficar em tudo não quero só o border top e olha Ficou ficou legal ficou legal para finalizar tá faltando algumas coisinhas as letras estão bem feias e esse carinha aqui ele acabou não ficando no lugar certo porque eu fiz alguma besteira esse cara aqui é o nosso content ã eh cadê cadê cadê Aqui ó nosso content vamos lá procurar esse content H por a gente colocou um display Flex nele a gente jogou ele pro fim hum aqui ó o erro eu coloquei
os dois pro fim tanto o Aline items quanto o jfy content No jfy content que é aqui nesse eixo vertical ele tem que ser Center fui na onda do end coloquei os dois como end mas esse aqui é Center tá bom Rodolfo não ficou exatamente onde o outro tava ã tá com a fonte diferente vamos trocar a fonte das coisas e aí a gente vê se vai ficar no lugar certo ou não para isso Fontes a gente vai no Google Google fonts Google fonts Tá certo deixa eu ir Aqui Pesquisar vou utilizar uma fonte que
a gente utilizou no projeto passado também eu acho se eu não me engano que é a Poppins fonte Poppins beleza tirar um pouco de zoom aqui eu não lembro exatamente Quais que a gente vai utilizar então vou clicar aqui em get Font e vou clicar aqui ó get embed code E aí ele selecionou todas para agilizar nosso trabalho eu vou deixar selecionado todas normalmente que que eu faço eu Pego só as que eu uso mas para facilitar nosso trabalho eu já vou pegar todas sen não vai demorar muito e eu vou clicar aqui ó em
copy code vou lá no HTML lá no no nosso r e vou colar aqui tá bom clicar aqui em formatar documento e pros números grandes a gente vai utilizar uma fonte diferente ali pros números a as letras menores a gente vai usar uma fonte chamado League goic isso aqui ó League Goic tá bom League goic get Font get embed code cadê cadê cadê Aqui ó dá para você importar direto no CSS também tá Dá para importar lá e colocar lá no topo do CSS ou no HTML você que manda vou colocar no HTML outro eu
já coloquei mas dá para você colocar lá no topo do CSS vou colar aqui também vou formatar o documento e beleza já tá aqui as fontes lá no meu no meu meu asterisco eu vou colocar a Pops então eu vou dar um fonte Family Poppins Ah uma Coisa legal também é que você pode vir aqui ó deixa eu voltar lá na Poppins para mostrar para vocês ã Cadê a Poppins aqui ó ã pode ser nessa aqui mesmo tanto faz a hora que você clica get Font get embed code ele te dá o código aqui ó
para você copiar e ele também te ensina como usar a fonte ó por exemplo aqui ó Poppins fonte Family Poppins sanif Então vou copiar e colar aqui fonte Family poping S serif todo Mundo vai usar popins menos alguns caras que eu vou utilizar aquela outra fonte deixa eu ver se ele já tem aqui para copiar não tem mas a gente cola lá alguns caras eu vou utilizar a outra fonte o nosso H2 Deixa eu procurar ele aqui dentro de content o nosso H2 que é aquele texto maior o Font Family vai ser o leag deixa
copiar o nome exatamente para eu não errar Lig gotic copiar aqui ó Lig gotic assim bom O nosso H2 o nosso que é aquelas letras miúdas e eu vou utilizar também ali naquele botão onde tem um número bem grande que é o indicator que é o nosso Number Vou salvar vamos ver como que tá Ah então ó no nosso H2 nessas letritas aqui embaixo e neste número então ó tá bem parecido bom ah esse texto ficou um pouco maior um pouco Menor eu não tô pegando os valores exatos que eu fiz na hora que eu
que eu coloquei o projeto Mas o importante é a gente ter algo parecido E aí os detalhezinhos vocês vão ajustando agora agora é que são elas por quê agora o objetivo é a gente clicar aqui ó a gente vai fazer duas coisas a gente vai criar esse efeito e vai utilizar o nosso eh JavaScript para nos ajudar a gente vai criar o efeito no CSS e vai utilizar o JavaScript para que toda a mágica Aconteça Tá bom a gente vai começar criando o efeito no CSS tirar um pouco o zoom E aí depois a gente
vai para o JavaScript Tá bom então depois de todo mundo aqui todo mundo todo mundo a gente vai lá no final no final aqui ó linha 190 sei lá quanto a gente vai começar a criar as animações então basicamente que que a gente vai fazer aqui o JavaScript vai ajudar bastante que a gente vai fazer daqui a a pouco mas se você perceber quando a gente clica no botão Olha só o que acontece o carro ele entra ele dá uma inclinada e as letras vão entrando aos poucos então a gente precisa criar esse efeito aqui
tranquilo e faltou eu fazer aqui também ó a sombrinha aqui embaixo depois eu faço tranquilo vamos lá então aqui a gente vai selecionar a nossa section porque a gente vai sobrepor alguns estilos que a gente já criou para poder fazer essas animações eu vou selecionar aqui o meu list o meu section list eu vou mexer no Meu item aqui também na imagem do car image e também dentro dos meus contents tá então ponto list dentro de list eu vou ter o meu item que a gente vai colocar algumas estilizações e também eu vou colocar já
deixar aqui pronto eu vou ter o meu Deixa eu só dar um espaço aqui ó ponto item aqui ponto Car image dentro do car image eu tenho a minha imagem que é a que eu vou mexer e aqui também no dentro do item eu já vou deixar até pronto a gente vai mexer dentro do Content Tá certo eu vou mexer aqui no car image ó no car image vou mexer no content e aqui dentro do content depois a gente vai selecionando os carinhas mas eu já vou deixar pronto a estrutura aqui dentro do item eu
preciso que todo mundo Entre todos eles entrem então eu vou usar o Transform no eixo X porque ali eles entram na horizontal e aí eu vou colocar sem VW que basicamente é a tela toda então eu vou fazer com que eles entrem eles precisam depois também Desaparecer então eles desaparecem a tela toda e eles entram e ficam ali no meio eu vou colocar um transition aqui a aula passada aqui do canal é um projeto sensacional e a gente mexeu bastante com transition Tá certo editor coloca um trecho aí do projeto da aula passada pra galera
ficar com gostinho na boca e depois terminar esse e assistir o próximo projeto Tá bom então a gente já mexeu muito com essa parte de animações no projeto e sem falar que foi um Projeto muito legal transition beleza eu vou salvar e aí você vai ver que o carro vai sumir mas é o que a gente quer se você abrir o menu inspecionar aqui eu vou até me jogar para o outro lado para não dificultar vocês me para vocês enxergarem olha só cliquei com o botão direito inspecionar e aí se a gente for aqui no
item ó list o item se eu tirar o Transform que eu acabei de colocar olha só o que acontece tudo entra tá vendo Então é Esse efeito que a gente vai causar eu tô eu tô fazendo todo mundo desaparecer para depois com JavaScript a gente fazer todo mundo aparecer confia em mim senta aí que vai dar bom só que não basta todo mundo aparecer eu preciso que cada um faça sua sua animação por exemplo a imagem ali ela vai dar uma leve rotacionada então eu vou dar um rotate zero porque ele tá inclinado eu quero
que ele fique reto lembra eu tô criando o estado Inicial ele entra reto e depois Ele inclina Então eu preciso que ele fique reto para depois a gente inclinar ele vou colocar um transition também para poder ficar devagarzinho devagarzinho não mas poder dar aquela efeito de transição e também vou colocar um delay porque se você transition delay 0.3 segundos se você reparar as coisas aqui elas entram em tempos diferentes ó o carro entrou inclinou depois as letras então a gente precisa criar esse delayzinho eu vou Salvar aqui para nós aqui no item ó o carro
já tá reto tá legal beleza é o que a gente quer e aí depois a gente vai lá no carro e vai fazer aquela inclinação dele ó cadê cadê cadê aqui dentro tem o image então ó ele vai entrar e aí depois a imagem vai rotacionar como a gente quer tá vendo tô deixando tudo pronto e daqui a pouco a gente vai automatizar tudo isso aí com o nosso HTML dentro do content a gente vai ter que mexer nos carinhas ali né porque Eles também T aqueles efeitos de ir entrando um por um dentro do
content eu vou selecionar alguns carinhas quem que eu vou selecionar eu vou selecionar aqui o meu o meu Car information O H2 o meu description e o meu information então eu vou colocar aqui ó o Car information vírgula O H2 vírgula ã O H2 o description E também o ponto description que é uma classe vírgula o ponto Information que também é uma classe eu preciso que esses caras eles façam aquele efeito né de cada um entrando bonitinho Então já vou colocar um Transform um le no eixo eh x e vou colocar aqui só de 200
pixels tá o it inteiro tá entrando só que agora eu quero que eles façam esse pequeno efeito ó o item a gente já garantiu que ele entre ó tá entrando o item inteiro só que tá vendo que os textos eles dão uma leve deslocada Então essa leve deslocada No eixo X na horizontal é esses 200 pixels que a gente tá colocando aqui eu vou colocar um transition de 0.7 porque o carro entra primeiro e os textos entram depois Tá bom então a transição dos textos demora um pouquinho e também a gente pode colocar um transition
delay de 0.3 a animação dos textos demora um pouquinho mais por isso que a gente colocou aqui 0.7 e aqui a gente colocou 0.5 tranquilo e para fazer o efeito final a gente pode colocar um Transition delay um pouco maior para cada texto para que ó tá vendo que esse aqui O H2 entra primeiro depois esse depois então a gente pode fazer isso também para isso eu posso selecionar um por um então primeiro eu vou selecionar o H2 e vou colocar um transition delay diferente para ele ele vai ser 0.5 aí eu vou selecionar o
próximo deixa eu copiar aqui para ser mais rápido o próximo é o o description então o description o ponto description eu vou Colocar um pouquinho maior o delay 0.7 porque aí o que que é o delay é o atraso dele entrar na tela ali para nós esse atraso vai ser maior ainda e por fim o information vou colocar 0.9 então agora cada um vai entrar num tempo ali na tela tá certo Rodolfo mas eu não tô vendo nada não tem nada na tela Calma que o JavaScript que vai disparar esses caras o importante é a
gente ir aqui no item ó e ver que a galera tá entrando ó ó eles estão entrando e aí conforme eles entram A gente vai disparar ali cada um o seu efeito bonitinho certinho confia em mim que vai funcionar Tá bom se você for em um por um aqui você consegue disparar o efeito não tá do jeito que a gente quer ainda se eu for aqui no car information ó tá vendo é assim que vai acontecer ó tá funcionando ó agora eu tô fazendo manual aqui porque a gente vai disparar isso com o JavaScript tá
certo mas só um detalhe agora para continuar Nossa Aplicação a gente precisa colocar o restante dos carros na tela porque a gente tem três carros aqui Porsche Ferrari Lamborghini só que na tela a gente só colocou um por enquanto era isso mesmo porque agora a gente vai colocar os outros carros e você vai ver o que vai acontecer eu vou copiar o item inteiro aqui ó tá vendo copiei o item inteiro vou duplicar uma vez duas vezes tá bom o primeiro é o Porsche Então vou colocar aqui ó 9111 Turbo o mínimo que eu espero
de um programador é isso aqui 911 na garagem uma Ferrari na garagem a Ferrari é conversível aqui você pode colocar informação que você quiser não esquece de trocar imagem Ferrari imagem do e uma lambo na garagem também você que é programador é o mínimo que você tem que esperar da vida fechou combinado vamos lá vamos estudar bastante Vamos trabalhar bastante que a gente realiza nossos Sonhos certo imagem TR estamos com os três carros só que vai acontecer uma coisa ó vai acontecer n porque não tem a gente não colocou os casos mas olha só vou
clicar aqui em spect E se a gente fazer o seguinte você vai ver que tá os três carros aqui ó eles não vão aparecer por causa do Transform mas se eu tirar o Transform translate que a gente tinha colocado ó quando entrar tá entrando os três carros então para isso a gente vai utilizar o JavaScript para nos ajudar Mas eu já vou deixar isso pré pronto que é o quê A gente vai colocar uma classe com JavaScript aqui ó classe por exemplo Active ou seja essa classe Active ou ela vai tá no 9111 ou na
Lamborghini ou na Ferrari só vai aparecer na tela quem tiver a classe Active eu vou deixar aqui no 911 Porque a gente já pode deixar essa classe Active os eh os estilos dela pronto então eu tenho o meu item aqui correto finalizando o meu item dentro do list eu vou ter essa Classe que vai definir o item que tá ativo e o que não tá ativo Qual que é a diferença o item que não tiver ativo eu já vou dar um opacity zero ou seja ele vai sumir desaparecer e o item que tiver ativo eu
vou até copiar ele tem que ser ao contrário disso ó esse cara aqui que a gente tá colocando nosso item eu tô jogando todo mundo para fora da tela translate x sem VW Ou seja eu tô pegando e tirando ele da tela eu tô dando um opacity zero ou seja ele Desapareceu agora na classe ativa quem tiver ativo é tudo ao contrário Então o translate não é x o translate é zer ou seja zero ele vai ficar bem ali no meio da tela e o opacity não é zero é um então aqui na minha classe
Active Olha só já até apareceu aqui na tela essas coisas ainda não estão no lugar porque a gente não disparou as nossas Animation nossas animações mas agora não é importante a gente pensar nisso tá bom E aí a gente pode fazer a Mesma coisa que a gente fez aqui tudo ao contrário eu vou copiar esse content aqui ó o content está dentro do do item e dentro também do Active eu vou copiar aqui vou colar esses caras aqui na verdade eu vou copiar esse aqui também ó esses daqui também e a gente vai inverter tudo
então esse aqui que é a nossa imagem que que eu vou fazer o carro fica deitadinho não fica no estado final então - 20º eu não preciso disso aqui tá bom e o delay Também não preciso eu só preciso da posição dele aqui aquela galera Car information H2 description o information a gente pega tira isso aqui não é translate x200 é zero porque é o estado Inicial dele e acabou acabou eu errei ficou faltando aqui alguma fechamento o Active fechou Algum cara eu esqueci de fechar nesse copia e cola ficou faltando fechar Alguém deixa eu
ver aqui o content eu fechei o content aqui ficou alguém a mais ou a menos deixa eu colocar acho que faltou um vou formatar agora sim ó sumiu vermelho eu tinha esquecido algum e agora você vai ver ó Ah já tá até fazendo o efeito você viu então já tá bem legal já tá ó ó ó já tá bem legal o que a gente tem que fazer agora é os itens irem entrando se você clicar aqui em inspecionar ó o item Active tá no no Porsche se eu passar ele Para deixa eu tirar ele do
Porsche ele some Se eu colocar ele aqui na Ferrari ó [Risadas] tá funcionando só a cereja do bolo a gente pode colocar um opac nesse cara aqui também Ó nesses caras aqui também ó vou colocar um opac um aqui e vou colocar nesses caras aqui um opacity zero para ele fazer o efeito esse efeito de aparecendo vou tirar o Active daqui vou colocar de novo no Porsche Ah moleque tá legal tá bem legal agora a gente quer fazer isso de forma dinâmica né Eu quero clicar no botão clicar no botão e quero que isso aconteça
sozinho bonitinho então agora vamos para o Java script Vamos pro JavaScript vou começar criando o nosso arquivo JavaScript e linkando com o nosso HTML eu vou criar aqui o scripts PJS aqui embaixo do HTML lá no final lá no final aqui do nosso Body eu vou colocar aqui a tag script e o src dela Opa src vai ser o nosso Script JS vou formatar aqui o documento para deixar tudo organizadinho já tá organizadinho e aqui dentro do scripts a gente vai começar o nosso código primeira coisa que eu gosto de fazer aqui no JavaScript é
mapear quem é quem eu preciso saber quem que é o botão quem quer o texto quem quer tudo para que eu possa fazer o que eu preciso fazer o nosso botão se engano eu não coloquei nada nele então vou colocar um ID nele Aqui esse aqui o primeiro vai ser o botão de prev O anterior e o segundo vai ser o botão de Next coloquei um ID eu vou colocar também uma classe aqui na nossa section chamar ela deiner que é o contêiner que tá todo mundo dentro tá bom aqui então eu vou começar vou
criar aqui um let o prev buttle é igual A document então tô criando uma variável se você não sabe o que que é isso tem curso de JavaScript Aqui no canal explicando tudo isso aqui então vai ter aqui no card vai ter aqui embaixo o link para o curso eu vou lá no meu HTML o HTML a gente chama de document aqui e vou procurar um elemento pelo id dele e o ID desse elemento é prev aí vou ter o botão de Next que vai ser o Next eu vou precisar pegar também a minha section
então vou chamar aqui minha section que é Meu Container de document pget Element by Ah eu não Preciso na verdade eu não vou usar eu vou usar o Carry selector Carry selector esse aqui eu tô pegando pelo id esse aqui eu vou usar o Carry selector e aí no Carry selector Tem que avisar que é uma classe e a classe é a container tranquilo agora eu preciso pegar os meus items Tá certo todos os meus items os meus items estão dentro deiner então posso fazer isso aqui vai lá dentro deiner e procura todos os elos
eu não quero um aqui o Car selector é um Só aqui eu quero todos eu quero todos os meus itens todos todos todos todos quem todo mundo que tá dentro de list item certo todos os meus items items items Eu também preciso pegar aqueles indicators que é aqueles caras lá embaixo ó lembra os nossos indicators a gente vai trocar a cor conforme um tá ativo outro não tá ativo a gente vai trocar Então vou pegar eles também eu vou chamar de indicator vou pegar o document pon Carry Selector eu vou pegar ali a classe deixa
eu até copiar aqui para não fazer cagada indicators copiei colei aqui ó quando é uma classe eu coloco um pontinho na frente quando eu uso Carry selector ou Carry selector All e por fim eu vou precisar também dos pontinhos que estão ali dentro dos indicators então eu vou lá dentro de indicator que eu peguei aqui e vou procurar todos todos todos todos todos os meus pontinhos que são esses caras Aqui ó o l li são essas L que vão ser os pontinhos que a gente vai trocar de cor então lá dentro de indicators eu já
tô aqui dentro de indicators ó eu já selecionei o indicators eu vou procurar uma ul e todas as Lis que tem dentro dela então o li Carry selector All tô pegando todos todos agora eu preciso saber quando o meu botão foi clicado para eu executar as ações Tá certo eu preciso saber Ó Cliquei no botão Beleza agora eu vou Executar o que eu preciso executar para isso eu vou começar aqui com com prev Button mesmo prev Button ponto on Click ou seja me avisa quando esse botão for clicado eu vou usar uma nomenclatura aqui mais
nova né que é de functions se você não sabe o que tá acontecendo aqui tem vídeo no canal de funções tem vídeo no canal também de JavaScript eu vou fazer a mesma coisa pro next Button Ou seja quando eu clicar no botão ó vou colocar Um console P log aqui pra gente ver se deu certo botão next e o outro botão prev Tá bom então tem o meu botão eu sei quando ele foi clicado e vamos ver se tá funcionando vamos passo a passo cliquei aqui no botão ó esse aqui é o Next e esse
aqui é o prev já tá funcionando beleza Esse é o primeiro passo agora o próximo passo é o quê é eu trocar essa classe Active a gente já deixou tudo Pronto no CSS então se eu tiro essa classe Active do primeiro item e coloco no próximo item por exemplo se eu clicar no next no botão next ele tem que tirar a classe Active daqui e colocar aqui e aí já resolve o nosso problema Então como que a gente vai fazer isso o primeiro passo eu vou começar fazendo o botão next então o primeiro passo é
você tirar a classe é active do item atual eu vou criar aqui umas algumas variáveis que a gente vai utilizar Então vou criar Um active que vai começar em zero a gente vai ter também um cara chamado first position deixar aqui criado em zero e a gente também vai ter o Lest position então basicamente a gente tem três itens né tem o item item item Normalmente quando a gente trabalha com itens por exemplo com a Reis a gente fala que o primeiro item é posição zero 1 2 e assim por diante então o que que
a gente vai fazer o meu item um vai ser a Posição zero o meu item dois vai ser op posição um e o meu item três vai ser a posição dois se eu tivesse mais itens eles iam continuando Tá bom então a primeira posição é a zero não a um por quê Porque a galera da programação gosta de começar pelo zero qual que é a minha última posição Ah minha última posição é a do Tá mas isso aqui não é muito legal porque se eu colocar mais itens eu vou ter que ficar aqui alterando toda
hora então para não ter esse problema eu pego Aqui todos os meus itens ponto length -1 por l Men 1 bem qual que é o Len dele que que é o Len é o tamanho dele qual que é o tamanho dele 1 2 3 ele a posição final não vai ser a dois vai então é a quantidade de itens dele menos um Se eu colocar mais um Um item Opa o Len dele agora é quatro só que a posição final é três então a última posição sempre é o itens pon Len men1 já automatizei isso
aqui para eu não ter que ficar pensando Ok tranquilo a gente Vai precisar desses carinhas aqui agora lembra a nossa primeira missão é tirar a classe Quem que é o cara que eu tenho que tirar a classe quem eu tenho que tirar a classe é o cara que está ativo Então como que eu descubro quem tá ativo eu posso criar aqui uma variável chamar item old o item velho que eu vou tirar quem que é eu vou lá no meu e no meu pode ser o coner mesmo container pon Carry selector eu vou procurar um
cara que tem a classe list Aqui no nosso caso tem a classe item e também tem a classe Active então tem a classe item e Active ali no mesmo elemento eu tô procurando um cara dentro de list que tem a classe item Active Esse é o cara que tá ativo não é sempre só um que vai ter E aí o que que eu faço eu pego esse item old eu já encontrei quem é o cara que tá ativo e aí a gente tem uma opção aqui que chama classlist que é a eu tô basicamente pegando
as classes que Tem dele e aí dentro desse Class list Eu tenho um remove e eu vou remover a classe Active então Cliquei no botão de Next que que ele vai fazer Vai procurar quem tá ativo e vai remover vamos ver se funcionou Cliquei no botão de Next Opa removeu quem tava ativo removeu quem tava ativo deixa eu ver se ele tá dando erro ali depois eu vejo o que que é não tá dando erro Tá ok já removi quem tava ativo mas não basta só remover quem tá Ativo eu tenho que botar alguém no
lugar só que aqui Teoricamente seria simples né ó eu tenho meus itens aqui item Um item dois item três Ah então se o o item zero é o que tá aqui é só eu pegar o Active né o Active tá em zero eu coloco Active mais um E aí ele vai pro próximo item o próximo item eu coloco a classe Active e funcionou Teoricamente sim mas vamos supor o seguinte eu tô aqui eu tô no item três e agora não tem tem quatro Então eu tenho que fazer uma breve Verificação nesse Active aqui ó que
começa em zero Tá certo tá em zero fazer uma breve verificação antes de eu só sair jogando o o Active mais um então eu vou fazer o seguinte eu quero mudar esse valor de Active quero mudar ele mas antes de mudar ele eu quero fazer uma algumas verificações o Active mais um ele é maior que o last position qual que a última posição é do então se eu chego no final eu tenho que recetar Esse cara se ele for maior que o last position que que eu faço eu volto ele para onde ele volto ele
para zero se não for maior que L position aí sim eu coloco Active mais tranquilo então agora eu já sei o valor do Active se ele tá em zero ele vai para 1 se ele tá lá no final ele volta para zero tendo valor de Active Agora ficou fácil eu vou pegar o meus item ó todos os meus items vocês já sabem quem sãoos Items eu posso selecionar exatamente a posição que eu quero qual que vai ser a posição Active certo Lembrando que ele começa em zero então eu posso pegar a posição zero então eu
vou pegar o item na posição Active e agora eu vou pegar o Class list só que agora eu não vou remover eu vou adicionar uma classe que é a classe Active então aqui eu estou tirando tirando a classe do elemento que está e aqui eu estou colocando no próximo Elemento Lembrando que isso aqui ó galera isso aqui ó é um ifelse tá isso aqui é a mesma coisa que se Active mais um entendeu é igual entendeu isso aqui é a mesma coisa só que isso aqui é um Infiel se por assim dizer resumido então Active
mais um maior que left position se isso aqui for verdadeiro coloca zero else dois pontinhos tá bom isso aqui é um if certo cliquei aqui vamos ver se funcionou ó Opa vamos lá agora vai a Lambo a lambo só que agora da lambo tem que voltar pro Porsche voltou pro Porche então ele já tá inteligente ó já tá funcionando já tá funcionando só que a gente só pensou num botão a gente tem que pensar agora no próximo botão vamos fazer o próximo botão vamos lá a gente tem aqui o Next buttle vamos fazer agora o
prev Button ali que que ele vai fazer prev buttle ele é basicamente o processo contrário Por quê eu tenho o item eu tenho item eu tenho item no next buttle Ele sempre tá indo para cá e depois volta aqui não é o contrário ele sempre vai tá indo para cá e depois ele volta então vai ser bem parecido algumas coisas eu vou até copiar e colar aqui tá bom para remover o item ele sempre remove igual só que aqui eu vou ter que fazer outras verificações nele por exemplo cara pega o Active agora não é
active mais um é men1 porque agora eu tenho que verificar que eu vou est voltando então se eu tô no um Eu quero Ir pro zero mas antes de voltar eu tenho que verificar o Active -1 ele é menor menor o meu por que menor que first position se ele tá no zero ele não pode ser menor que zero Quem que é o first position first position é zer então ele não pode ser menor que zero não tem como ir negativo então se ele for se ele tiver aqui na primeira posição que eu jogo ou
seja se ele for se ele for zer Active Men1 vai dar 0 Men 1 Men ou ele tá menor first position se ele tiver menor first position ele tem que ir pro final o final é qu Quem que é o final é o l position então se ele chegou aqui ele tem que ir pro L position senão eu pego Active e dou menos um não é mais um é menos um porque se eu tô aqui eu quero voltar um bom é um pouquinho diferente a lógica mas é parecido E aí encontrando o Active eu consigo
selecionar o item que eu quero fui PR frente Beleza agora para Trás Porsche agora tem tem que voltar pra Lamborghini voltou e deu a volta e deu a volta e deu a volta e deu a volta pô bem legal mas não acabou ainda não acabou por quê a gente tem que mexer aqui nesses dots aqui ó Eles não estão mudando não tô mudando tem que mudar tem que mudar então vamos mexer nesses caras vou começar aqui no botão next Então o que a gente vai fazer com os nossos pontinhos esses aqui ó eu tô um
pouquinho na frente de vocês mas dá para Ver né que a gente vai fazer com eles é bem parecido que a gente fez aqui a gente vai pegar retirar o atual a classe Active lembra que esses caras t a classe Active já que a gente já colocou e vai colocar então basicamente eu vou tirar a classe daqui e vou colocar no de baixo então vai ficar bem parecido com o que a gente fez aqui então o que que eu vou fazer vou criar aqui uma variável dots old bem parecido só que aqui em vez de
eu pegar o contêiner eu pego o meu Indicator pon Carry selector e aí eu vou procurar a quem que tem a classe Active e Retiro a classe dele então é só eu procurar uma L que tem uma li que tem uma classe Active encontrei uma ul aqui dentro que tem uma li que tem uma classe active que que eu faço eu sumo com ele então dots dot old pon classlist P remove classe Active Beleza já removi a classe só que não basta só remover a classe Agora eu tenho que adicionar a classe no próximo para
isso lembra que Os meus dots aqui é parecido com os meus itens eu tenho dots 1 dots 2 dots 3 e assim por diante então é sempre aquele mesmo esquema vai para cá vem para cá então é sempre baseado no Active aqui ó posição 0 1 2 Lembrando que Active aqui ó começa com a posição zero então a gente pode utizar o Active porque ele sempre vai est aqui bonitinho na posição que eu preciso então o Dots na posição active que que eu faço com ele classlist só que agora Eu não vou remover eu vou
adicionar a minha classe Active bem parecido bem parecido com que a gente fez aqui no items ó procuro o item com a classe Active e adiciono aqui vamos ver se funcionou cliquei aqui ó ó ó tá mudando cor ó tá vendo ó tá mudando a cor só que não tá mudando o número Vamos mudar o número para ficar bonitinho quem que é esse número eu vou lá indicator pegar os meus indicadores Esse número é este cara aqui ó o Number Tá Certo preciso mudar esse número que tá aí para isso eu pego o meu indicator
ponto Carry selector preciso selecionar quem uma classe que é a classe Number classe classe Number e nessa classe Number eu vou dar um ponto Inner HTML que que é o Inner HTML eu posso usar o Inner HTML posso usar também tem Winner text esses caras eles basicamente eles vão mudar o texto que tá aqui dentro ó tá vendo esse texto que é o que a gente quer mudar de 01 para 02 03 e assim por diante bom tem o Winner HTML tem o Winner text eu vou usar o winer text Ou seja que que eu
vou colocar nesse texto basicamente eu vou colocar o meu Active mais um Por que Active mais 1 bem o Active ele é a posição zero Então mas eu não quero colocar zero lá eu quero colocar 1 2 3 então Active mais um Pera aí indicator Carry selector Number Inner text é igual a Active mais um Eu salvei Aqui ele não tá colocando eu vou colocar Winner Winner HTML deixa eu ver Winner text não tá funcionando deixa eu ver Inner HTML o winer HTML funcionou depois eu fuço para ver porque que o winer ó 1 2
3 ó 1 2 3 tá funcionando para dar mais um charme a gente pode colocar um zero na frente então a gente faz isso aqui ó coloca um zero mais Active mais um Clica com o botão direito deixa eu form Mat tá aqui para tudo bonitinho Beleza então Winner HTML zer Active mais um fui aqui ó 1 2 3 1 2 3 ó tá bem legal só que temos um problema eu fiz pro next Agora eu tenho que fazer ó pro prev ó o prev não tá funcionando vamos fazer pro prev vamos fazer pro prev
a parte do prev ela vai ser Idêntica vai ser a mesma coisa é só copiar e colar aqui só que Qual que é o problema tá repetindo muito código ó Isso aqui vai ser igual Isso aqui vai ser igual em vez de eu ficar repetindo o código vamos criar uma Função aqui vou chamar de set slider e aqui dentro eu coloco todo o código que se repete para os dois e aí é simples é só eu chamar a função esse pedaço de código vai retirar a classe do item antigo e esse aqui vai trocar os
dots ali embaixo né os pontinhos Então vou colar aqui dentro vou deletar daqui deixa eu organizar o meu código E aí que que eu faço eu chamo o set slider Então olha a sequência a gente fala de lógica de programação quem quer aprender lógica De programação que que tem que acontecer em qual ordem primeiro eu defino quem é o item ativo né o Active depois eu entro aqui já com o item ativo e já já com o número do Active certinho eu entro aqui removo mudo dots e por último eu vou lá e trago o
item certo para a tela então o set slider vai ficar aqui no meinho depois eu defini o Active e antes de eu colocar o item ativo porque se eu coloco o set slider depois ele vai colocar o item ativo e já vai Remover ele aqui e não é o que eu quero então primeiro ele precisa remover o antigo para depois colocar o novo e antes de remover o antigo colocar o novo eu preciso saber a posição ativa atual faltou aqui também ó salvei vamos ver se funcionou Então vou para lá 02 03 volta pro 01
ao contrário 01 03 02 01 Opa tá funcionando legal já tá funcionando mas ainda temos detalhes temos que arrumar aqui embaixo temos Colocar aquela sombrinha aqui também temos que publicar para você aprender como publica para você já ganhar uma grana já mostrar pra galera e também tem um detalhe bem legal tá vendo que esse aqui ó quando eu coloco o slider anterior ó o vem de cá ó vem do lado esquerdo ó por eu tô trazendo Tô clicando desse lado quando eu clico do lado direito ó o carro vem do lado direito é o nosso
sempre tá vindo do mesmo lado ó sempre vem do mesmo lado Por que que ele sempre vem do mesmo lado por porque por na hora de criar a animação a gente se a gente for aqui nos Styles animação aham a gente sempre faz um translate de 100 VW Se eu colocar menos 100 VW aqui e aqui também ó Men 200 ele vai vir do outro lado então Ó eu troquei lá olha só tá vindo do outro lado ah então seria legal o que quando eu apertar este botãozinho aqui ele vem do lado direito quando eu
apertar este botãozinho ele vem do lado Esquerdo Como que eu faço isso Rodolfo seguinte como que eu faço eu vou criar uma variável aqui sim eu posso ququ variáveis aqui no no meu CSS então eu posso colocar aqui ó underline underline não tracinho tracinho eu posso chamar do que eu quiser vou chamar ela de calculation e vou falar que o calculation ele vai valer um por qu o meu objetivo é que isso aqui seja o 100 ou men 100 como que eu faço para inverter um número é só multiplicar ele Por men1 então se for
um vai ficar positivo se for menos um negativo ou seja quando eu apertar para um botão ele vai ser um ou seja vai vir de um lado quando apertar o botão de prev ele vem do outro lado ele começa com um o nosso calculation aí eu faço o seguinte aqui dentro eu posso chamar eu vou fazer esse 100 vezes ou um ou menos um para isso eu coloco o o asterisco verdade V ter que fazer uma coisa que é o seguinte aqui eu coloco um cara chamado cal por quê Porque aqui eu vou fazer um
cálculo Então eu preciso colocar esse calque Qual o cálculo que eu vou fazer aqui dentro eu vou fazer o seguinte esse cara vai ser vezes 1 ou vezes men1 aí eu coloco var porque eu tô chamando uma variável E aí eu falo que eu tô chamando a variável calculation Tá certo e aí a gente vai trocar o valor de calculation lá no CSS e eu faço a mesma coisa para esse cara então eu falo que aqui vai ser um calque Vai ser um cálculo Que cálculo isso aqui vezes a minha variável que é o calculation
calculation Então por enquanto o calculation vai tá como um Então tudo pro mesmo lado só que aí agora lá no JavaScript eu vou mudar essa bagaça do calculation E aí ele vai alterar pro lado que eu quiser vou começar aqui pelo next e basicamente eu preciso pegar esse cara aqui ele tá dentro de list eu não tinha mapeado list Mas a Gente pode mapear aqui ó Então vou colocar let list é igual a tá dentro de coner coner pon selector P list Beleza então vou pegar aqui a minha list Opa aqui ó no botão next
eu vou pegar minha list ponto Style porque eu quero mudar um Style E aí dentro de Style eu tenho uma propriedade chamado set propert eu não sei por o vs code às vezes ele dá uns paus ele não completa Mas aqui é Style pon set property eu quero trocar uma propriedade que Propriedade que eu quero trocar eu quero quero trocar o calculation calculation beleza para qual valor aqui eu quero trocar para um quando for next é um E aí eu faço a mesma pro prev só que o prev não vai ser um vai ser menos
um porque aí ele fica negativo E aí elea do outro lado salvei salvei salvei aqui é o list Style set property 1 menos vamos ver se funcionou então fui para esse lado ó tá vindo de lá ó tá vendo ó tá vindo de lá tá vindo do lado esquerdo Vindo do lado esquerdo coloquei aqui beleza ó agora tá vindo do lado direito agora ó ó Vi do lado esquerdo boa tá funcionando mas não acabamos temos que publicar e colocar nossa sombrinha aqui que eu tô devendo para vocês a nossa sombrinha essa sombra a gente coloca
ela na nossa imagem ah Cadê nossa imagem ó a gente vai subir subir subir ã aqui ó a gente tem car image e a gente tem nossa imagem lembra que a gente Utilizou o After e o before aqui a gente também pode usar o After ver a gente não usou o After a gente já utilizou o Before e a gente vai utilizar o before de novo então eu vou selecionar aqui o before certo aqui da nossa do Nossa div mesmo então eu quero colocar algo antes quando eu uso o After After ou before antes depois
eu quero colocar alguma coisa nesse caso o meu content vai ser vazio não tem conteúdo nenhum a gente vai colocar tipo um box shadown tipo um Uma uma sombrinha ó nosso objetivo é colocar essa sombra aqui embaixo tá vendo ó o nosso tá sem sombra então o conteúdo vai ser vazio eu vou dar um position Absolute vou dar um background color 00 que é o nosso preto o edit de 100% para ele ocupar Todo o espaço ali da imagem um height de un 100 pixels já tá de bom tamanho top 150 tá de bom tamanho
150% e left 50 pixels para dar uma desloc e vou dar um border radius de 50% e Filter vou colocar uma opção chamado Blur vai ficar meio esfumaçado o Blur dá esse meio esfumaçado um Blur de 50 pixels Bom basicamente eu tô criando isso aqui ó vendo criei basicamente eu criei um quadrado só que com Blur ó tá vendo eu queri um quadrado aqui embaixo conteúdo vazio mas eu coloquei que ele tem o wid de 100% height de 100 pixels posicionei onde eu queria só que que que eu tô Fazendo tô colocando um Blur Blur
E aí fica esse esfumaçado aqui ficou bem legal mas agora é a parte mais importante porque não adianta nada você fazer tudo isso aqui se você não publicar ó não colocar no ar Então bora colocar esta aplicação no ar bora bora bora e se nesse momento você ainda não deixou aquele like não se inscreveu no canal Tá vacilando Tá vacilando tá bom e agora como que a gente coloca isso aqui no ar Bora lá que eu vou te ensinar Olha Tem vários serviços para você colocar seu site no ar tranquilo eu já usei vários e
vários quase todos o um dos que eu mais gostei foi a hostinger Inclusive eu conversei com eles aqui embaixo vai ter um link caso você escolha a hostinger usa o link aqui embaixo que você vai ter desconto e tem um super cupom de desconto ó eles têm planos a partir de R 6,99 por mês mas eu recomendo esse de R 10,90 porque já vem com o seu domínio Então você já consegue Um domínio lá meus site.com.br nesse plano aqui e nós temos um desconto Extra se for lá na hora de adquirir colocar aqui o cupom
Dev club Ó Dev Club Dev Dev Dev Club aplicar você ganha um desconto Extra de 10 por Beleza depois de adquirir aí qualquer plano você vai cair nessa tela aqui clica em sites depois você já tiver logado E aí você vai clicar em adicionar site eu vou colocar aqui em ver todas as opções vou criar um site Posso pular Essas configurações que eu não quero e aí eu preciso colocar meu domínio Toda vez que você vai colocar um site na internet precisa ter um domínio se você pegou um plano de domínio grátis você pode escolher
aqui ó FP selection 22 um exemplo E aí ele vai te falar se tá disponível ou não E caso você queira ele vai dar opção aqui de você adquirir o seu plan adquirir seu domínio caso você não tenha Peg um plano que tem o domínio você pode comprar ó R 19,90 por ano você pode ter esse domínio ou você pode trazer um domínio que você já tenha por exemplo eu tenho o domínio rodolfo.com que eu já comprei lá em outro lugar eu posso trazer para cá dentro da rosinger ó registrado em outro lugar confirmar propriedade
vou clicar em próximo depois eu Confirmo minha propriedade tá bom e tem um vídeo aqui no canal também ensinando mais essa parte de DNS de domínios tudo mais mas o objetivo aqui é colocar no ar já Selecionou aqui ó em sites já vai aparecer para mim o meu domínio aqui ó rodolfo.com se você comprar o seu você clicou aqui em painel de controle e agora para colocar no ar é bem simples gerenciador de arquivos vai tá vazio basicamente aqui o gerenciador de arquivos porque a gente não colocou nada deixa ele carregar aqui não coloque o
seu site aqui coloque ele aqui dentro vou clicar em Public HTML esse arquivo que tá aqui Você pode deletar deletei Ok E clica aqui na setinha para adicionar seus arquivos vou clicar aqui em arquivo vou lá nos meus arquivos selecionei todos Open e faltou minha pasta com imagens então eu vou aqui de novo pasta imagem upload pode fazer upload acabou já tá no ar simples assim se você voltar aqui ó eu voltar aqui ele tem a opção ó deixa eu só atualizar aqui para ele pegar meus arquivos ó site de prévia já tá aqui publicado
bonitão o nosso site na Internet esse aqui é a prévia beleza porque não não tá funcionando ainda porque eu não apontei o meu domínio para cá meu domínio tá em outro lugar então eu preciso confirmar que a propriedade é minha não vou fazer isso nesse vídeo Mas você já viu como é bem simples aqui na rosinger também eles TM aqui ó a caixinha onde você pode clicar e pedir ajuda deles mais um vídeo do canal espero que vocês tenham gostado desse vídeo não se esqueça de inscrever no Canal toda segunda-feira também tem Live meus links
estão aqui embaixo e vejo vocês semana que vem no próximo vídeo mas vou deixar dois vídeos bem legais aqui para você assistir di
![Como Fazer Aplicação Animada com HTML, Javascript e CSS [Passo a Passo]](https://img.youtube.com/vi/QLbrpjfltFs/maxresdefault.jpg)
![HTML e CSS - Aprenda a criar 5 layouts de sites mais comuns na Internet [FLEXBOX]](https://img.youtube.com/vi/sSkmBxsaJWg/maxresdefault.jpg)
