Como Criar Aplicativos Com Programação - Aula 04

E aí animado pra gente fazer o nosso aplicativo do zero absoluto um aplicativo Super bonito super legal aí de e-commerce eletrônico eu tô muito empolgada Tô animado aqui para mostrar para vocês o resultado como é que vai ficar o nosso projeto o que nós vamos est fazendo nessa aula e vai ser muito legal a gente colocar a mão na massa junto e aprender muitos detalhes de criação de aplicativos nessa aula tenho Certeza que você vai aprender muito que você vai gostar e vai ser muito legal a sensação que você vai se você acompanhar comigo essa

aula fazendo junto de você conseguir criar um aplicativo de alto nível e ver isso rodando na sua mão legal então eu vou mostrar aqui para vocês né aula passada a gente já viu como é que vai ficar o layout do nosso aplicativo nós vamos estar trabalhando principalmente com três telas aqui que a gente vai tá usando né Trabalhando deixa Eu colocar minha cara para cá por enquanto vai ser uma tela inicial onde a gente vai ter aqui o carregamento dos itens né a gente vai ter aqui uma sistema de navegação de de Tab um carrinho

de compras quando clicar em cima do item a gente vai para uma tela de detalhes onde vai aparecer aqui a imagem a os dados que a gente vai alimentar via eh banco de dados backend né A gente já vai ter essas informações a gente vai fazer aqui uma simulação de Um backend enviando esses dados e a gente recebendo para alimentar o sistema E aí a gente tem o sistema de carrinho né quando a pessoa clica no botão adicionar o carrinho um carrinho de compras aqui onde vai ter que ter o sistema de soma ória né

de aumentar e diminuir o nível de a quantidade de itens poder esvaziar o carrinho né tudo funcionando bonitinho conforme a quantidade de itens que a gente tem aqui aparecer lá no balãozinho Na tela inicial né do na nossa sacolinha a quantidade de itens Então é isso que a gente vai est fazendo basicamente essas três telas e todo o funcionamento disso certo pessoal aqui também mostrar para vocês ó como é que ficou no aplicativo agora ó e esse aqui então é o aplicativo que tá realmente rodando aqui no meu celular e mostrar para vocês aqui ó

se vocês derem uma olhadinha aqui na na tela aqui ó ficou muito bonito mas muito bonito no celular mesmo tá pessoal ficou Lindaço esse aplicativo aqui como ele aumenta um pouco é às vezes parece até meio estourado um pouco mas olhando no celular a qualidade de pixels assim bem HD mesmo bem 4K assim sabe do da da qualidade visual ficou bem bem legal então basicamente aqui a gente tem a nossa tela inicial do nosso projeto né Eh além daquela imagenzinha que a gente tinha aqui dessa desse modelo eu fiz outras imagens e fiz um sistema

de swiper aqui né que é para ele fazer essa Transição a gente tem uma certa animação umas propagand dinhas como se o aplicativo fosse colocar aqui certo eh ele tem um sistema de carregamento que trabalha com o skeleton eu vou mostrar para vocês aqui eu vou navegar para uma outra eh página e vou voltar aqui na home aí você observa aqui ó o carregamento Ó tipo uma marqu inha da água ele fica fazendo o carregamento né isso a gente chama de skeleton e depois ele mostra para nós os produtos Depois Que ele já pegou esses

dados né a gente fez aqui esse sistema de carregamento que é um sistema muito bonito muito moderno aí nos aplicativos para indicar para usuário que está tendo um carregamento de alguma coisa que vai aparecer naquele lugar né aí a gente tem o sistema de categorias aqui que também é um swiper né onde a pessoa pode aqui puxar para ver mais categorias esse esse sistema de filtragem a gente não vai fazer tá pessoal é só mais visual mesmo Pra gente ter aqui eh as categorias assim mas mostrar para vocês que ele funciona assim também a pessoa

pode arrastar para ver mais categorias pro lado né E aí funciona basicamente assim tem os itens eu clico no item ele vai abrir já o item para gente olhar os detalhes né Eh é até interessante que ah quando você clica ele já abre instantâneo o item né A gente vai ver um sistema aqui de carregamento que uma vez que puxou os dados do nosso backend a Gente vai salvar esses dados na memória interna do celular e aí a gente tem isso entre aspas offline né a gente tem essa base de dados no nosso aparelho aí

dessa forma quando a gente clica a gente tem esse efeito de tempo real alimentando aqui a aplicação com os dados bem legal mesmo né então a gente vai ter todos esses dados que vai puxar do nosso backend alimentar aqui né então na página de detalhes tem aqui a imagem tem aqui alguns dados umas tabelinhas com Algumas informações que estão vendo do backend inclusive cada item ele tem uma tabela dessas de características e detalhes que vem lá do nosso backend que alimenta né então todos eles vão ter essa mesma característica Ó você vai ver que vai

ter uma tabelinha falando sobre os itens o que que eles têm e tal né E aí você vai ter a opção aqui de adicionar no carrinho quando você adicionou no carrinho ele vai dizer que o produto tal foi adicionado lá no Carrinho e aí se a gente voltar lá nossa sacolinha já vai est mostrando realmente ente quantos itens a gente tem né vou colocar mais um aqui ó olha tô tô ricaço hein MacBook Pro 2023 e um Iphone 15 PR Max tô rico vou adicionar aqui então tô com os dois produtos aqui entrar lá dentro

do carrinho aí lá no carrinho olha só que Que bonito né Que legal esse sistema de carrinho aqui né com os itens aqui você tem as opções de aumentar ou diminuir a quantidade de itens aqui vai Dar o subtotal né aqui a gente colocou um frete de migué aqui né fake de 10 pilas só para dizer que tem alguma coisa de frete vai ficar parecido aqui com a parte visual aqui ó que tinha né Sistema de taxa de entrega e tal então a gente fez alguma coisa um pouco parecida aqui nesse lado e E aí

esses itens Conforme você adiciona o subtotal ele vai acompanhando então é a soma real né então Ó vou aumentar aqui ó você vai observar que lá o subtotal também vai Aumentando né conforme eu vou diminuindo ele também vai diminuindo lá embaixo inclusive se eu baixar de um eh ele vai dar opção para mim para se eu quero remover o item né então eu clico lá que eu quero tirar ele vai ó gostaria de remover o item eu não vou remover agora ou pode vir aqui no x né do produto clicar ele vai falar Quer remover

esse item do carrinho também vai poder remover e lá em cima nós vamos ter uma opção né nos três pontinhos esvaziar Carrinho onde você clica aqui para esvaziar carrinho aí ele vai perguntar quer esvaziar vou dar um sim por exemplo ó nada por enquanto é isso aqui que mostra quando o carrinho tá vazio né uma animaçãozinha bonitinha e aí lá no nosso aplicativo Nossa sacolinha não mostra nada mais tá zerado o nosso carrinho certo então é isso que nós vamos estar fazendo nessa aula do zero absoluto junto com vocês eu tô bem animado tô bem

empolgado vou Tentar fazer o mais rápido possível mas como vocês sabem aqui a gente sempre ensina com bastante didática Então essa aula provavelmente vai ficar bem longuinha né mas vai valer a pena você tá aprendendo junto Porque é nesses projetos práticos que a gente realmente aprende a fazer né então vamos lá então eu abri aqui o meu vs code do zero Vamos dar um contro aspas simples pra gente começar a poder dar os comandos aqui de terminal e eu vou fazer esse projeto Novamente do zero absoluto tá pessoal junto com vocês D staca zero na

aula anterior do minicurso a gente já criou o projeto eu mostrei para vocês os comandos e tal mas tinha mais o objetivo de você aprender entender como funciona as coisas então aqui como a gente tá fazendo o projeto do zero eu vou começar dos Comandos do zero absoluto Ok então para começar nós vamos dar o comando aqui e CD C2 Bars pra gente entrar na pasta Do nossos dos nossos projetos certo então entrei lá onde a gente cria os projetos agora eu vou dar um cova Create aí o nome do Projeto vai ser greench o

identificador vai ser br.com curso. greentech e o nome do do projetinho eu vou chamar aqui no meu caso de gre Tech curso tá porque só para saber porque eu tenho várias versões de Green Tech ali no meu celular então só para saber que é aqui a versão do curso que eu tô fazendo no de vocês vocês podem deixar só Green Tech assim não precisa nem das aspas duplas só pode deixar assim né E já vai funcionar beleza só eu vou colocar no meu aqui greench curso só para mim saber Vamos dar um enter para criar

o projeto do Cova criado Vamos acessar agora a pasta CD greench pra gente entrar dentro dela beleza estamos dentro dela CLS para limpar essa bagunça que eu tenho toque aqui com terminal com muita coisa E aí vamos dar o comando para adicionar a Plataforma android Então vou dar um córdova platform add Android pra gente adicionar a plataforma android dentro do nosso projeto certo e a gente poder depois realizar compilação fazer os testes no celular quando a gente precisar a gente vai já ter a plataforma adicionada Vamos abrir agora então no vs code esse projetinho então

code espaço menos R espaço ponto code espaço menos R espaço menos ponto e aí ele vai abrir E menos ponto não ponto né tô te aqui ó tá milhão aqui é code espaço menos R espaço ponta e abre aqui no vs code beleza aí nós vamos deletar aqui a pasta inicial que a gente tem www que é o Starter né o hello world aqui do do cord e vamos adicionar aqui o template Starter né que é aquele do navegação do tipo Tab a gente viu isso na aula anterior se você não assistiu a aula três

assiste lá que a gente mostrou isso aí então eu vou dar aqui um Git Clone Git Clone https 2 bar github.com bar F7 Trot template bar tab.et e aí eu vou fazer a Colon agem lá daquele repositório lembrando se você não tem o Git não sabe trabalhar com Git faz o que a gente fez na aula anterior na aula três eu mostrei um método manual de você conseguir pegar essa pastinha só você ir lá e assistir certo aqui então Baixada a pasta Tab vamos pegar a www puxar aqui pra raiz do nosso projeto apagar essa

pasta Tab aqui porque a Gente não precisa mais dela excluir permanentemente e beleza já temos aqui o nosso projeto Starter iniciado vamos rodar ele com Live server então para isso eu vou abrir aqui a minha pasta JS Roots vou lá na linha 82 descomentar aqui o m vi pra gente poder rodar isso usando Live server aqui do vs code e vamos abrir a nossa index HTML e clicar aqui embaixo em gove pra gente rodar ISO aqui no terminal no terminal não no navegador E aí ele já vai est aqui na Lateral tudo que a gente

preciser fazer de alteração né vou colocar minha cara aqui no canto já vai acontecendo em tempo real aqui para nós certo então vamos dar olhada lá no nosso projeto que que a gente vai ter que fazer então a gente tem aqui ó o projetinho na nossa tela inicial ele é mais predominantemente tudo branco até a parte de baixo aqui do nosso Tab também é branco com os iconeinstagram pessoal se vocês Repararem aqui esse é um padrão interessante para designes de aplicativos Clean tá você não tem muitas cores é você ter uma paleta de no máximo

quatro cores que você vai tá trabalhando e geralmente o branco é o predominante Então a gente tem aqui o branco a gente vai ter o verde que tem tanto nos botões né aqui na nos itens de navegação nos detalhes você repar que os detalhes eles são em verde e a gente vai ter também um cinza né um G gelo aqui ó um tom de gelo Que fica aqui no fundinho dos dos itens também aqui nos detalhes tá vendo aqui ó um tom tipo gelo e nós temos o preto daí propriamente dito que na verdade não

chega a ser bem um preto preto mesmo ele é um grafite é um um cinza escuro né que a gente vai tá usando aqui na nossa paleta de cores então para isso vamos trabalhar com o CSS bastante pra gente fazer as modificações que a gente precisa na index P html você vai encontrar lá ó a referência de um CSS Personalizado CSS personalizado pcss certo a gente vai renomear esse personalizado que é um padrãozinho que já vem ali do do template Starter para index.css eu vou trocar o nome dele dou um F2 aqui renomear index.css só

para renomear para esse nome pra gente saber que esse CSS que nós vamos estar aqui trabalhando vai se referir a a tudo que a gente for fazer na nossa tela inicial do nosso projeto na nossa Index.html.gz a index.html.gz todas as referências vem dela tá então a gente coloca sempre aqui essas referências Ok então vamos fazer lá na nossa index.css a referência de cores do nosso projeto então uma coisa que eu sempre gosto de fazer todo o início de projeto aqui quando a gente vai tá trabalhando é você especificar a paleta de cores aqui na parte

de cima do nosso arquivo CSS então você pode fazer Um sistema de variáveis que a gente tem no CSS e para facilitar toda vez que a gente precisar trabalhar com uma cor ou um padrão de cor a gente usar essa variável Então você faz assim dois pontos Rot abre as chaves e fecha as chaves e aqui a gente vai dar nomes de variáveis Então a primeira que eu vou chamar Vai ser branco então você faz traço traço dois traços branco e aí você coloca o valor que vai ter essa variável então no Caso o branco

vai ser é #ffff quro vezes que é o branco puro aí a gente vai ter o gelo o gelo vai ser a cor aqui ó # F1 F1 F1 que é quase um branco um pouquinho mais escurinho ele é tipo um cinzinha nós vamos ter o verde então o verde ele vai ser é 19c 463 a cor dele e a gente vai ter o preto que vai ser um # 2 a22 A que não chega a ser um preto escuro total né mas ele é tipo um grafite assim que a gente vai tá trabalhando Então

essas são os padrões De cor a paleta de cores que a gente vai vai tá é usando tá pessoal no nosso projeto outra coisa a gente vai precisar usar um padrão de fonte que seja mais interessante do que essa fonte padrão que vem aqui então uma fonte que eu recomendo para vocês é a bebas new então você pode entrar lá no Google Fontes Entra lá no site do Google fontes e aqui você pode procurar ó na fonte aqui ó procurar você põe assim bebas aí já vai aparecer ó bebas New é o nome da fonte

Aqui que nós vamos estar trabalhando você clica nela aqui e aí você pode estar adicionando ela aqui no seu pacote de fontes no meu eu já tenho um monte aqui colocado vou remover tudo de vocês vai estar assim removido né não vai ter nenhuma fonte adicionada e você clica aqui ó selecionar essa fonte aí vai vir nessa sacolinha aqui em cima aí você faz o seguinte você seleciona aqui o Import e vai copiar só essa parte da importação sem os Style aqui tá copia esse Import Vai lá no teu CSS logo abaixo aqui do Rot

eu vou colocar essa importação D essa fonte e vou dizer aqui ó que o Bari quer dizer todo o corpo da nossa aplicação toda a nossa aplicação a gente vai querer que tem essa fonte então você pode vir aqui pegar o fonte Family dela copiar e colar aqui para dizer que toda a nossa aplicação vai usar esse sistema de fontes aqui beleza então você já vê que modificou aqui a fonte já tá diferente já estamos usando a tal da Bebas New tá que é uma fonte que vai ficar bem joia aqui na a parte visual

então a gente vê que aqui embaixo ó pessoal esse nosso Tab bar aqui ó onde a gente tem o sistema de navegação ele é branco e tem umas Fontes Ah uns ícones mais arredondados tá o sistema de ícones que já vem no Starter da gente aqui do Framework 7 e que nem esses ícones que tem aqui ele é do chamado material design icons certo se a gente entrar nesse site do material design icons aqui Ó é material design Icon né na verdade agora Eles mudaram de nome agora se chama pictogram pcom ele tem um sisteminha

de ícones que já tá colocado nesse padrão ali só que esses ícones eles não são muito parecidos com os ícones aqui do que mostra no nosso template de base tá vendo que eles são mais arredondados por exemplo repara o coração como ele é mais aradin se eu procurar aqui por coração o ícone de coração se eu colocar Heart aqui ó você Vai ver que os ícones que tem de coração eles não são tão puxados para aquele padrão ali ó ó se você reparar ó ele é um pouquinho Esse aqui é mais gordinho tá vendo não

é muito parecido com esse padrão de fontes aqui então eu já pesquisei Antes quando eu fui fazer o projeto pra gente já ter a aula preparada e tem uma biblioteca de ícones que é mais parecida com o que tá nesse padrãozinho aqui do template de base que a gente tem que é uma biblioteca que se Chama remix Então você entra num site chamado remix ion.com e aqui também é uma biblioteques de ícones certo se você você procurar aqui por Heart Heart né que é coração em inglês aí você vai ver olha só o ícone aqui

do coração deles é mais arredondador design icons e aqui o padrão que a gente vai querer então fica melhor esse sistema do dos ícones do tipo remix Então vamos instalar ele no nosso projeto como é que você faz vai lá No Google e digita assim remix icons CDN tá pra gente poder achar ele na CDN E aí você vai entrar nesse link aqui que é do JS deliver né você entra aqui dentro você vai entrar na pastinha desse desse projeto aqui ah você pode clicar aqui em browse CDN aqui ó esse linkzinho E aí você

vai ter a pastinha onde vai ter ali as fontes tudo que a gente precisa né então você pode entrar dentro dessa pasta Fontes aqui ó e aqui nós vamos baixar primeiro Vamos baixar o arquivo CSS então você pode clicar aqui aqui no arquivo CSS ele vai abrir assim você vai dar um cont CRL s para salvar esse arquivo então dá um Ctrl S aí entra dentro da pasta do teu projeto dentro de www CSS aqui a gente pode criar uma uma pasta aqui chamada remix icon assim ó tudo junto e aqui dentro da pasta remix

icon Vamos colocar remix icon.css salvamos vamos voltar lá na pasta onde tinha as outras coisas e aqui a gente pode baixar os padrões de Fonte então a gente pode baixar aqui esse remix icon.eot vamos salvar lá dentro também salvar como podemos deixar aqui só não precisa ter o número um só deixa assim ó remix com P eot vamos baixar aqui esse Jon clica aqui dá um salvar lá para salvar lá dentro também salvou volta vamos pegar esse les não precisa esse svg também não aqui essas Fontes aqui embaixo tff vamos salvar lá salvei porque dessa

forma a gente vai ter esses Ícones offline tá pessoal a gente não vai precisar ter internet pra gente usar eles então vou baixar todas essas Fontes aqui dentro dessa pasta beleza baixado então todas essas fontein a gente vai referenciar agora aqui no nosso projeto Esse sistema de fontes Então a gente vai dar um cont contrl ctrl v aqui pra gente colocar na nossa index.htm ícones do remix Icon comentário aqui e aqui a gente vai apontar para nosso CSS que vai est Dentro da pasta CSS a pasta remix icon e dentro dela a gente aponta remix.com

dessa forma a gente tem o sistema de ícones aqui agora colocados no nosso projeto a gente pode dar uma testada aqui para ver se vai funcionar né então vamos dar uma olhadinha aqui ó ah Quais que são os ícones que a gente vai precisar tem home search ã aqui a home é tipo uma casinha search é tipo uma lupa aí a gente tem aqui o coração Heart e profile que é de tipo usuário né Então a gente pode entrar agora lá no site da do remix icon para procurar vamos lá remix icon pra gente procurar

esses ícones os nomes que eles vão ter então a gente pode pedir aqui primeiro vai ser então home né de de casinha Então o que a gente vai querer que vai ser mais parecido com aquele padrão é esse aqui ó home 5 tá vendo clica em cima ele já vai mostrar aqui para você copiar o padrão do ícone então copia aqui ó copy Ed vai lá no teu projeto Vamos achar aqui onde a gente tem esse sistema de navegação que tá aqui embaixo e colocar aqui então a gente tem aqui o tob que é o

componente que forma essa parte de baixo então a gente pode achar aqui onde a gente tem o ícone ó a gente tira o ícone que a gente tinha antes que era o MDI MDI home e vamos colocar esse novo ó ó lá já ficou legal esse icz para nós vamos pegar o próximo aqui ó que vai ser o search né de Procura então search a gente pode Digitar assim para ver de busca ó e a lupinha que a gente vai querer vai ser essa número dois aqui ó então a gente pode pegar essa daqui deixa

eu deixar maximizada que fica mais fácil de copiar ó o link o o ícone né copiamos aqui vamos colocar aqui no link do a lupinha o terceiro é Heart né coração aquele Heart 3 que a gente vai pegar aqui ó Então vou copiar esse ícone também vamos colocar aqui har 3 e a gente vai precisar de mais uma página aqui que Ficou faltando Link 4 né que vai ser a nossa página do usuário então a gente pode procurar por profile aqui para ver não ficou legal user vamos procurar aqui por user vamos ver vamos ver

a gente pode usar esse primeiro mesmo aqui ó copiar vamos colar aqui esse ícone do user link 4 né vamos ver lá como é que tá ficando ó lá beleza fica mais parecido né com o sistema de ícones que a gente tem aqui ó tá vendo fica mais parecidinho agora a Gente vai precisar então criar essa rota 4 Porque como a gente fez do zero agora vai ter que criar esse link 4 ele não existe aqui ó Então a gente vai precisar fazer ele então vou copiar aqui o link 3 fazer aqui Link 4 aqui

vamos fazer mais uma página link 4 link 4 conteúdo do Link 4 e aqui vamos criar mais uma rota lá no nosso Roots né criar mais uma rota aqui embaixo para esse link 4 Aqui beleza Link 4 Ok e aqui a gente tá apontando vamos ver se entra no link 4 Beleza já entrou no link 4 agora vamos estilizar então esse nosso Tab aqui embaixo para que ele fique no padrãozinho branquinho aqui né com os ícones também tá vendo que os ícones estão mais cinza eles TM que ficar escuros quando eles estão selecionados tem que

ficar verde então a gente entra lá na nossa index.css e aqui a gente vai então fazer As modificações no nosso tubar porque o tubarino itens que estão aqui dentro então a gente pode determinar aqui ó pon tbar Inner a gente vai dizer que ele vai ter o background a cor de fundo dele Vai ser branco então a gente usa a nossa variável você escreve var dois parênteses e aqui dentro você coloca qual variável você quer então no caso aqui eu vou querer a variável branco e Aí salvei ó lá show de bola já ficou branco

a gente vai querer uma borda no Topo Então vamos colocar aqui border top de um pixxel sólida e a gente vai usar aqui a nossa variável gelo que é o cinzinha E aí ele já vai colocar uma bordinha em cima lá como a gente queria show de bola né pessoal aí aqui mais para baixo a gente vai ter os itens de link mesmo que são os botões que estão aqui que já vem uma certa padronização aqui do nosso template Starter então a gente só vai determinar aqui que a cor do link normal selecionado vai ser

a Gente vai colocar aqui a color é a variável verde né aquela variável que a gente fez lá em cima então quando ele tá selecionado a gente vai querer que ele fique Verde ó então selecionado ele fica verdinho assim e quando não está selecionado que aqui embaixo a gente tem essa classe ó T barin link not Active então quando não estiver ativo a gente vai querer que a cor dele em vez de ser Grey que nem tá aqui a gente vai trocar a gente vai colocar a nossa variável Preto aqui ó para ele ficar mais

escurinho show de bola já tá bem parecido lá ó com com o modelinho né tá tá joia lá o o que como que tá ficando aqui né a gente pode pôr só os nomes aqui né é home então o primeiro se chama home o segundo se se chama busca o terceiro é favoritos favoritos e o por último a gente vai colocar aqui o usuário Beleza então home busca favoritos e usuário fechou agora vamos Fazer então a parte de cima aqui né onde a gente vai ter essa navegação aqui on vai ter o o título do

app vai ter a nosso botão de sacolinha de compra e vai ter aqui um formulario Zinho né com um campinho input de busca com a lupinha pra gente poder tá fazendo então vamos fazer isso agora vamos remover então primeiro esse Nav bar que a gente tem aqui por padrão ó a gente tem aqui Um Nav bar tá vendo a gente pode remover ele Deletar E aqui onde a gente tem page content ele é o conteúdo da página o conteúdo da página a gente vai fazer a esse miolo aqui ó onde tem esses itens e tal

né então esse é o conteúdo da página essa parte de cima aqui ó essa parte aqui a gente vai chamar ela de de nave né que vai ser uma parte que independente da rolagem que a gente tiver aqui a gente vai querer que ela se mantenha aparecendo aqui no nosso app Então a gente vai fazer fora do page Content aqui antes ó a gente vai fazer aqui o nosso nave topo certo então a gente pode fazer da seguinte forma a gente vai criar aqui uma div Vamos fazer uma div com a classe top nave eu

vou chamar assim top nave certo e dentro dessa div top nave a gente vai ter um título um onde a gente vai ter o nome do app e a gente vai ter também um link que vai ser na verdade o botãozinho que a gente tem lá no canto de lá então eu posso fazer aqui um H1 Com uma classe que eu vou chamar de tit tit logo certo então aqui a gente pode Colocar assim Green Tech que vai ser o nome do nosso app beleza e a gente vai ter aqui um link que a gente

pode colocar a Vamos colocar assim a HF apontando para lugar nenhum por enquanto ele vai ter uma classe que a gente vai chamar de btn cart que é de carrinho e a gente vai colocar aqui um atributo que vai ser um Atributo que vai fazer a contagem de quantos itens a gente tem no carrinho e vai mostrar para nós lá aquele balãozinho em cima sabe uns numerozinho então a gente coloca um atributo aqui chamado data count para fazer isso é para fazer a contagem vou começar com zero aqui certo e aí esse botãozinho aí pessoal

a gente vai usar dentro dele o izinho de shopping né que a gente tem aqui no remix icon então a gente pode procurar aqui por Shopping shopping vamos pegar aqui essa sacolinha aqui né E copiar esse ícone da sacolinha e colocar aqui dentro do nosso a nossa tag a aqui que vai ser o nosso botão certo então por enquanto tá ficando assim ó nada a ver né Vamos agora estilizar isso aqui então com o CSS aqui no nosso projeto Então vamos lá no index.css e aqui vamos colocar as propriedades para deixar ele com a cara

que a gente quer então a gente vai fazer Aqui o top nave top nave que vai ser a o a mãe de todos né aqui ó top no é onde tá dentro aqui o título e o botão Então a gente vai colocar aqui que ele vai ter um Edit a largura de 100% da nossa tela a gente vai querer que ele tenha Vamos colocar só pra gente enxergar por enquanto um background head aqui ó vermelho só pra gente ver a área tá que ele vai tá pegando a gente vai determinar uma altura de 60 pixels

então uma altura fixa ó lá de 60 pixels nós Vamos dizer que o display dele vai ser do tipo Flex e a gente vai fazer os alinhamentos usando o align itens Center então para deixar tudo alinhado assim nesse sentido ao centro ó e nós vamos usar aqui o justify content Space between o justify content Space between ele faz com que os itens eles TM o mesmo espaçamento dentro ali desse contêiner Então como a gente tem apenas dois itens um vai ficar num canto e o outro vai pro outro então Esso É um truque legal pra

gente ter uma coisa num canto e outra coisa no outro canto aqui né então você vê que o iconz ficou lá no cantinho certo beleza então nosso top é top nave aqui já tá feito né a gente pode colocar aqui a cor que vai ser certa então a gente pode colocar aqui o branco né Beleza e aí a gente vai fazer agora o nosso título aqui do nosso aplicativo então a gente pode fazer o título logo a gente vai colocar aqui que ele vai ter Uma fonte weight a grossura da fonte de 600 Então você

vai ver que ele vai ficar um pouquinho mais fino do que o original e a gente vai afastar ele um pouquinho uma margem left de uns 5% afastar ele aqui do canto que ele tá bem grudado para ele ficar um pouquinho mais Opa ficar um pouquinho mais para dentro aqui ó Beleza dá um espaçamento Zinho aqui no canto e só para isso aqui ficar mais charmoso pessoal que que a gente vai fazer onde tá escrito aqui Green do Nosso Green Tech aqui a gente pode colocar aqui um spam e a gente pode determinar que a

cor da palavra Green vai ser diferente né então a gente pode fazer assim a gente coloca isso dentro de um spam e lá no nosso CSS a gente vai pegar aqui o nosso titto logo e vai falar que se for um spam a gente vai querer que a cor dele seja Ah vamos colocar a nossa variável aqui verde né Ó lá então fica o Green Tech já com Aquela parte ali do spam Verde Ok então vamos fazer agora o nosso botão lá do Canto nosso botãozinho do carrinho de compras então vamos fazer aqui um btn

cart que é o nosso botãozinho Car de compras nós vamos colocar aqui então os atributos da seguinte forma a largura dele vai ser de 40 piels a altura dele também vai ser de 40 pi certo então ele vai ter esse tamanho fixo se a gente colocar aqui um background a gente vai ir vendo lá Tamanho dele certo aí a gente vai alinhar bem então a gente faz um display Flex colocamos um align itens Center colocamos o justify content como sendo Center então para tudo ficar bem no centro Centralizado a gente vai afastar ele do canto

lá que ele tá grudado dando um margem right uma margem à direita de 5 pixels para ser o mesmo padrão de espaçamento que a gente deu por aqui beleza e agora a gente vai fazer as questões de borda arredondada e tal né Então a gente faz aqui o border radios arredondada de 50% Aí ele vai ficar redondinho Vamos colocar uma borda de um pixel sólida é da cor gelo ter uma bordinha de cor gelo em volta Vamos aumentar o tamanho da fonte fonte size de 24 pixels e a cor da do do ícone dentro então

color vai ser a nossa variável Preto aqui né Ó lá show de bola e a gente só troca aqui a cor então pra variável aqui Branco Olha lá tarã que legal pessoal que bonito que ficou o nosso botãozinho de carrinho de compras lá no cantinho né E aí a gente precisa fazer aquele balãozinho que fica em cima dele né como que a gente faz esse balão então tem uma técnica aqui muito legal para você fazer esses bads esses balãozinho que tem de notificação usando CSS e o próprio CSS determina se esse balão vai aparecer ou

não essa é uma técnica muito legal que muita gente não sabe como é que faz Usando ali a pseudo classe do before né do pseudo elemento before do do CSS então a gente faz assim ó btn traço cart que é o nosso carrinho a gente faz dois pontos duas vezes assim dois pontos dois pontos Before e aqui a gente vai fazer o seguinte lembra que a gente colocou lá na nossa index um data count que é um atributo de Contagem eu vou colocar aqui por exemplo TRS deixar aqui e aí aqui a gente faz o

seguinte a gente coloca um Atributo do CSS que se chama contente que é de conteúdo Então você diz que o conteúdo você quer pegar do atributo a TTR e aqui você passa com o atributo então por exemplo data count então aqui ele vai pegar o valor que a gente tem lá olha só que interessante o três tá vendo se eu colocar aqui outro valor por exemplo um ó lá ele já vai pegar dois olha só que sensacional Então o meu CSS ele tá se comunicando com o meu HTML via um atributo certo agora o que

que a Gente vai fazer a gente vai criar aquele balãozinho Então a gente vai fazer isso da seguinte forma primeiro Vamos colocar aqui o background dele o background vai ser o verde né então a gente vai usar variável Verde aqui background Verde beleza aí a gente vai determinar o tamanho dele o edit Vamos colocar 17 pixels o rate a altura vai ser de 17 pixels também o quadr fica um quadradinho a gente vai dizer que ele vai ter o border radios Né borda arredondada de 50% pra gente ter ele Redondo ó lá e aí a

gente vai precisar colocar aquele número dois lá dentro né isso a gente vai usar o display Flex a gente vai colocar o align itens Center e o justify content Center para ele ficar alinhado lá dentro e aí a gente pode diminuir o tamanho dessa fonte que tá muito grande né então a gente usa o fonte size aqui vou colocar 12 Pixel E aí beleza já ficou Menorzinho lá né Agora vamos colocar que a cor dele color vai ser a nossa variável Branco né para deixar ele branquinho ó lá show de bola e agora a gente

só precisa fazer as questões de posicionamento né Para que fique correto aqui o nosso botãozinho ali o nosso a nossa bed aqui em cima né como que a gente faz isso a gente vai usar então aqui o position do tipo absoluto Absolute posicionamento absoluto quando a gente passa o posicionamento absoluto Ele vai ter que receber as coordenadas da onde que ele vai ficar em relação ao pai dele onde ele está contido então agora a gente vai ter que passar coordenadas de onde ele vai se posicionar em relação ao botão Então a gente vai dizer que

vai tá ao topo um 5 pixels ó aí ele vai pro topo e a gente vai colocar aqui vai ser à direita right a gente vai colocar zero pixels para que ele vá bem lá paraa direita legal aí a gente pode fazer o seguinte aqui nesse Nosso before a gente vai usar a mesma margem que a gente deu de espaçamento aqui a gente faz um margem right 5% para ele Acompanhar a movimentação do nosso botão porque a gente usou porcentagem lá para movimentação do botão de Margem então ele já vai ficar na posição lá certinho

né e fica bem bem bonitinho assim dessa forma então assim a gente já fez o nosso badge lá em cima e aí O legal é que assim Conforme a gente coloca um valor aqui ele já vai ó mostrar para nós aquele valor lá ó ó olha que show legal pelo atributo data count Então a gente tem controle por aqui de como que vai ficar os nossos itens lá ó tá vendo ó bem legal né show de bola e só que agora a gente vai ter que controlar aqui pessoal como que vai ficar se não tiver

nenhum item né porque por exemplo se aqui for zero a gente tem que fazer com que esse item Desapareça não que apareça zero lá né Então como que a gente vai fazer isso é bem simples como que você vai fazer é aqui no CSS que você vai controlar isso de forma automática Então você vai fazer o nosso btn cart que é o nosso botão a gente vai pegar pelo atributo aqui de seletor data count Então se o data count for zero não tiver nada aí a gente vai querer que o before que é esse badinho

que a gente tem aqui faça o seguinte Display None não apareça nada olha só o próprio CSS vai controlar isso agora se eu salvo olha só que legal Sumiu meu bed não apareceu lá se eu colocar agora algum valor aqui que não seja zero ó se eu colocar um aí ele vai aparecer ó 23 por exemplo ó lá legal agora se for zero ó ele não vai aparecer nada legal então o nosso próprio CSS que determina isso que fica muito legal mesmo né pessoal bem joia bem show de bola e aí a gente pode determinar

também só pra gente Deixar tudo já em tons de verde né todos os tudo que a gente tiver de link aqui do nosso projeto a gente vai querer que eh seja Verde então a gente pode fazer Já o nosso a que é todos os links que tiver eles vão a gente vai querer que tenha a cor aqui verde né e a gente pode colocar que a gente vai querer que tenha um certo grossura de fonte aqui um fonte weight 600 e o text decoration para não colocar nenhuma linha embaixo a gente Vai colocar n certo

beleza então feita a nossa etapa Inicial aqui da parte de baixo da parte de cima agora A gente vai fazer aqui no nosso template a parte aqui do nosso campinho de busca né esse campinho de busca não vai funcionar ele vai ficar mais de enfeite aqui nessa aula mas se fosse um aplicativo Real aí você realmente ia querer que ele né fosse funcional Então deixa eu só eu tô olhando aqui pro lado porque eu tô Colando na minha outra tela tá pessoal as coisas que eu tô fazendo aqui que eu já deixei preparado pra gente

não perder muito tempo aqui no desenvolvimento então eu tô já olhando aqui para ficar mais rápido de tá fazendo essa aula então a gente vai lá na nossa index agora fazer aqui no nosso page content já no conteúdo da nossa página né esse formulário ou melhor embaixo do nas no bar P de contente a gente ainda não vai fazer agora essa parte é fora do page de Content porque a gente vai querer que isso fique independente da rolagem né então a gente vai fazer aqui um formulário dentro desse formulário a gente vai ter um campo

input que vai ser onde a gente vai fazer a busca a gente vai colocar aqui um Place holder o que você procura e ele vai ser do Type que a gente pode colocar aqui eh text tá de texto Então a gente tem um campinho ali Né O que você procura campinho de digit básico tá vamos voltar lá pro nosso CSS agora vamos estilizar esse formozinho Então vamos fazer aqui com o nosso formulário ele vai ter um pading top preenchimento do topo de 10 pixels PR gente dar um certo afastamento da parte de cima a gente

vai colocar aqui um background nele vai ser o branco branco a gente vai dizer que ele vai ter também um pading bottom um preenchimento Embaixo de uns 20 pixels só para ele fazer uma áre Zinha pra gente ver a área que ele vai tá pegando Vamos colocar um border Solid Black aqui só pra gente ver então a área do nosso formulário é essa áre Zinha que tá sendo mostrada aqui certo Deixa eu só puxar aqui o meu vs code assim que fica mais fácil da gente ver e o nosso e o nosso o nosso inzinho

ali nós vamos fazer el da seguinte forma então input nós vamos colocar aqui que o edit Dele a largura vai ser de 90% porque a gente vai querer que ele pegue quase toda a área a gente vai dar uma margem para cá e uma margem para lá a gente vai colar aqui que o background dele a cor pra gente já enxergar ele vai ser a nossa variável gelo cinzinha pra gente já ver ele a altura dele o Opa a gente vai colocar aqui de 45 piels certo aí a gente vai colocar uma border Radi de

10 pixs engraçado que aqui não tá dando pra gente ver direito isso daqui né então a gente pode colocar um input e a gente pode um seletor Type text aí ficar mais fácil gente agora ficou visível né pra gente deixar ele bem alinhado ao centro a gente usa um truque aqui que é o margem alto coloca assim ó margem alto margem alto aí ele já vai deixar alinhado E aí o texto precisa ficar mais para dentro tá vendo a gente faz isso Usando o pading né então a gente pode fazer o pading da seguinte forma

um pading de 10 pixels do Topo e embaixo e 20 pixels na esquerda e na direita Aí ele vai ficar com esse espaça aqui fica com um pouco de espaço em cima um pouco de espaço em baixo fica mais bonitinho aqui dessa forma né e o se a gente olhar lá no nosso modelo aqui ó a parte onde tá escrito search aqui o que tá dentro da busca ele é um cinzinha mais claro né a gente pode fazer isso da Seguinte forma a gente pode passar aqui o pseudo elemento né chamado Place holder que é

controlar lá essa marquinha da água que fica aqui né e a gente pode colocar aqui a cor dele vai ser aqui a gente não precisa usar uma cor da paleta a gente vai precisar usar um cinza um pouquinho é diferenciado então aqui a gente pode colocar o B3 a FF que é um cinzinha assim ó que vai ficar legal certo eu vou só tirar aquela Borda que a gente colocou no nosso formulário aqui e aí beleza ó lá que legal que tá ficando né A gente só vai precisar colocar agora esse Icone Zinho da lupinha

lá no canto aí para isso a gente vai precisar colocar aqui dentro do formulário então o ícone de lupa né a gente tem esse ícone de lupa lá no nosso buscar aqui ó a gente tem aqui esse ícone aqui ó que é o ícone da da lupa a gente pode reaproveitar ele aqui ó lá o Iconeinstagram L ele vai ter que ter o posicionamento relativo e aí a gente vai pegar esse nosso ícone da lupa e a gente vai colocar dizer que ele vai ter o posicionamento absoluto pra gente poder e indicar onde que ele

vai ficar encaixado dentro desse nosso formular então a gente pode até colocar aqui uma classe nele ó é ícone busca e aqui a gente pode usar essa classe ícone busca aí a gente vai dizer Que o posicionamento vai ser e absoluto E aí agora a gente vai poder dizer aonde que ele vai se encaixar Então a gente vai colocar aqui do Topo vai ser zero pixels para ele PR cima daí a gente pode colocar aqui à direita é right a gente pode colocar aqui que vai ser 5% certo e aí a gente pode agora dar

um fonte size para aumentar o tamanho dele fon size Vamos colocar de 27 pixels para deixar grandão esse Ícone E aí a gente pode agora e dar um pading preenchimento de todos os lados de 13 pixels e ele vai se encaixar ali bem naquele cantinho né esses números aqui que eu cheguei tá pessoal que estão aqui no nosso CSS foram alguns minutos que eu fiquei lá tentando acertar até encaixar o item aqui aqui eu tô colocando assim direto pra gente não perder muito tempo e já ter os itens colocados já com com todos os valores

corretos né mas eu Quando fui preparar a aula tive o tempo de fazer esses alinhamentos e tal então no seu processo de desenvolvimento não vai ser assim você vai saber de cabeça P tá olha o padin é de 13 pixels o topo é zero right 5% você tem que ir olhando como é que tá ficando e encaixando entendeu aqui é só pra gente ter tudo um pouco mais rápido Beleza então terminada a parte de cima aqui do nosso aplicativo né agora também com com o sisteminha de de busca aqui ó bem joinha bem legal Agora

vamos pro miolo do aplicativo né que é essa parte aqui da do sistema de imagens aí as categorias e aí os itens que a gente tem aqui embaixo né então vamos fazer isso agora então aqui não sei se vocês vão reparar mas o fundo ele não tá branco tá pessoal o fundo padrão do template Starter ele vem aqui uma corzinha tipo parece tipo um rosinha uma coisa assim né um salmãozinho não sei se vocês conseguem ver então a gente vai precisar determinar que a gente vai Querer que o conteúdo da página seja branco também então

a gente pode fazer a seguinte a gente pode dizer que o page content conteúdo da página vai ter o background e a gente pode determinar que ele vai ser a nossa variável branco aqui ó aí beleza ó agora ficou tudo branco legal agora a gente vai então fazer a parte aqui do do swiper né que é essa parte das imagens aqui aqui que vão trocar né inclusive pessoal eu vou deixar aí na descrição Para vocês tá a pastinha uma pasta do Google Drive Com todas essas imagens aqui ó que são as imagens que a gente

vai tá usando no nosso projeto tá então aí na descrição Você tem o link para pegar essas imagens para a gente já facilitar o processo então eu já vou copiar essas imagens já deixar ali dentro do projetinho que a gente tá trabalhando você vai lá e cola dentro aqui da pasta IMG daí do projeto que a gente tá fazendo baixa lá do google Drive coloca aqui essas imagens certo pra gente fazer aquele sistema de de navegação assim que troca eh arrasta pro lado assim né o nome disso se chama swiper é uma biblioteca muito legal

muito interessante vou mostrar ela para vocês aqui ó você digita assim ó swiper é swiper JS o nome da do site swiperjs pcom tá então ele é uma biblioteques efeitos de transição assim ó que você pode usar com toou tudo mais isso foi feito pelo mesmo cara que criou O Framework 7even então o swiper ele já vem integrado com o Framework 7 esse sistema aqui e a gente usa muito mas muito mesmo dentro de aplicativos tá então o que a gente vai fazer a gente vai vir aqui dentro de e resources aqui em cima em

demonstrações e nas demonstrações a gente vai procurar um aqui que é um de imagem aqui que a gente vai ter quer ver ó que ele tá carregando ainda mas deixa eu achar aqui slides per viw Centered centered Auto free mode scroll container grab cursor efeito de Fade Vamos pegar uma aqui ó ah pode ser esse free mode aqui eu acho a gente clica aqui em Core que é paraa gente ver o código e a gente pegar aqui um modelinho de swiper aqui base né Deixa eu ver aqui que a gente tem é pode ser desse

aqui mesmo então o que que a gente faz a Gente vai pegar aqui primeiro o HTML dele então vou copiar aqui a parte do HTML cont control c né copiei vou lá no meu projeto vamos lá no nosso HTML dentro aqui do nosso page content conteúdo da página aqui ó dentro dessa div Block então voltando aqui ó conteúdo da página é esse miolinho aqui tá então aqui dentro eu vou colocar o que eu quero Então vou colocar aquele swiper aqui ó então colocado aqui o HTML do swiper por enquanto ele não funciona Nada a gente

vai ter que ativar ele então vamos voltar lá e pegar aqui o CSS dele a gente tem aqui de padrão aqui só do swiper então é swiper swiper slide swiper slide MG a gente copia isso aqui cont contou vamos lá no nosso index.css colocar esse aqui também aqui e aí a gente tem também uma inicialização do swiper aqui no nosso JavaScript tá a gente precisa inicializar esse componente no nosso JavaScript então aqui embaixo eu vou Copiar o que tá dentro da tag script Ctrl C copiei isso aqui vamos lá no nosso projeto e onde que

a gente faz todas as manipulações de JavaScript né a gente vai ter lá o nosso Roots PJS que é onde tem os controles de rotas certo então a gente dentro do Roots JS a gente vai ter aqui ó a nossa index e aqui a gente tem eventos do que que é para acontecer quando a nossa página antes de ser exibida depois ser exibida quando a página for inicializada e tal então o Que que eu gosto de fazer a gente faz aqui um comandinho que se chama get script e a diferencia a pasta JS um arquivo

index.js que vai ser o arquivo onde a gente vai est colocando todos os nossos códigos tá pessoal então é como se aqui a gente referenciasse um arquivo que a gente vai est criando aqui dentro da pasta JS chamada index.js e aqui a gente na rota só ponta que a gente quer puxar aqui é como se a gente tivesse importando os dados dessa Página index E aí nessa página index a gente pode dar o comando que a gente quiser por exemplo se eu der aqui um app. dialog P Alert que é tipo uma janelinha que aparece

olá mundo se eu salvar isso aqui olha só já apareceu o disparo disso daqui aqui no meu sistema então nessa página index JS tá funcionando ela vai ser a a a o arquivo né que a gente vai est trabalhando as questões de JavaScript aqui e aqui logo abaixo dessa importação né do dessa Desse arquivo index que vai ter o nosso controle a gente vai colocar a inicialização desse componente do swiper Eu sempre gosto de colocar aqui dentro do roteamento do próprio Framework Seven porque essas questões de funcionamento de elementos e componentes do Framework s é

melhor que você use aqui dentro da rota para lá você deixar só a sua lógica personalizada agora o que é nativo entre aspas aqui do Framework o que você vai trabalhar de aspecto visual eu gosto de Deixar aqui dentro do rots mesmo tá então aqui a gente vai colocar a inicialização do swiper dá um salvar e aí a gente já vê que agora ele já ativou ó aí já tem uma sistema de paginação aqui ó já tem ali os vários slides e tal né e agora a gente vai personalizar com as nossas imagens então voltando

lá no nosso HTML então cada um desses swiper slide aqui ó é uma como se fosse uma folha de slide que a gente vai est trabalhando certo aqui a gente vai ter Que determinar aqui no nosso controle quantos slides a gente quer que mostre então aqui tá slides per viw slides por visualização Quantos você quer que mostre então eu posso dizer por exemplo que eu quero que mostre dois slides você vai ver que o terceiro não vai aparecer eu quero que mostre um slide por vez entendeu aqui a gente pode determinar o controle espaçamento e

tudo mais mas vamos lá vamos colocar uma imagem então aqui ó dentro da primeira folha aqui no Slide um a gente vai colocar aqui o IMG src Vamos colocar a imagem lá dentro da nossa pasta IMG a gente vai pegar aqui ó propaganda.png que é a imagem preparada que eu deixei aí o link no Google Drive para você pegar e a gente já vai ter a imagenzinha ali certo show de bola já tá encaixada aqui dentro e aí a gente vai colocar no nas outras folhas aqui as próximas imagens então a gente pode colocar aqui

a propaganda aqui é propaganda dois né aí no próximo slide a Gente vai colocar propaganda três e e no próximo slide a propaganda qu aqui deixa eu só quebrar a linha para ficar o mesmo padrão aqui e os outros slides que a gente não vai usar a gente pode apagar aqui certo pode deletar Beleza então agora a gente tem aqui ó já ó olha que legal ele tá com deslize eh no modo livre né então conforme a pessoa arrasta aqui ó ele fica livre tá vendo o arash PR da pessoa aqui ó que é o

free mode que a gente Pegou né de exemplo a gente pode fazer algumas configuraçõe inhas então só para isso aqui ficar melhor então free mode aqui tá ativado se eu tirar o free mode aqui ó vou tirar esse modo free mode deixa eu dar um salvar agora ó ele já vai Um item por vez né vai ficar aqueles arrastes como tava antes aqui né aqui no pagination ele Esse pagination é essas bolinhas que tem aqui embaixo alguns gostam de deixar outros não mas eu vou tirar porque se a gente olhar lá no Nosso padrão não

tinha né até porque eu não sei se era uma imagem só mas eu imaginei que teria aqui um swiper assim ó para ficar mais interessante né e aqui a gente tem outros parâmetros que a gente pode passar para você conhecer esses parâmetros lá no site do swiper você pode vir aqui em documentação swiper Core api e aqui ó você vai ter os comandos que você pode usar por exemplo um que a gente vai querer usar vai ser o autoplay o aut play é para ele tocar Sozinho para ele começar a mexer sozinho né então aqui

ele vai dar a explicação de como é que você ativa e tal então Aqui tá dizendo que você tem que colocar para ter um aut play você tem que colocar aqui qual que é um delay né que você quer que tenha para que ele funcione então a gente pode colocar isso aqui ó delay a gente pode colocar 3 segundos vamos dar uma olhada lá para ver se já vai funcionar dessa forma aí ó vamos aguardar aqui para ver se vai Funcionar e a gente acho que tem que colocar aqui o autoplay como true verdadeiro também

vamos ver se vai funcionar lá ó deu 3 segundos ele já passa pra próxima folha ó tá vendo show de bola né Tem um outro parâmetro que a gente pode passar aqui que se chama loop que é para ele é o loop faz com que ele volte lá pro ponto de de início né então ele vai rodar ó ele vai pro primeiro pro segundo pra terceira folha aqui do do swiper ó Vamos ver E aí depois ele já volta pro primeiro ponto ó lá celulares tá vendo ele não dá aquela rebobinada vamos dizer assim né

ele já continua como se fosse um fluxo contínuo certo só que assim pessoal e quando a gente deixa o app aqui em tamanhos grandes você vai ver que esse daqui ó vai ficar um tamanho bem absurdo tá vendo ó bem bizarro mesmo então a gente precisava que de acordo com o tamanho da tela a gente pudesse controlar quantos slides vão aparecer Aqui para que a gente tenha uma questão de responsividade e tal né para não ficar essa bizarrice aqui como que a gente pode fazer isso tem aqui no no próprio swiper já alguns parâmetros que

se chama Break points um Break Point é um ponto de quebra então que quer dizer isso aí que você quer que aconteça alguma coisa em determinado tamanho é tipo uma mídia Carry vamos dizer assim mas já que já vem aqui junto do swiper então a gente pode colocar assim por Exemplo no tamanho 50 de 50 pixels para aa maior que 50 pixs que que eu quero que aconteça que o slides per viw que é a quantidade de slides por visualização Vai ser 1 e o espaçamento entre eles ou Space between vai ser 30 certo então

esse vai ser de50 pi para cima Então beleza aí eu V fazer aqui ó que coloco uma vírgula coloco aqui que de 640 pi para cima que já vai ser depois a gente vai fazer o teste aqui a gente vai querer que seja Dois slides por visualização Então olha só o que que vai acontecer agora tá assim né Desse tamanho se eu pegar aqui e aumentar ó ó quando eu chegar a passar de 600 640 tamanho era para ele mostrar dois aqui para nós e não funcionou deixa eu ver a gente acho que tem que

colocar aqui pessoal o tamanho da imagem máximo aqui esqueci de colocar uma classe pra gente Controlar o tamanho dessa imagem Ó essas imagens a gente pode colocar uma classe chamada IMG fluid e a gente pode determinar que o tamanho máximo dessa imagem vai ter lá no nosso CSS ó a gente pode fazer assim ó IMG fluid a gente pode colocar que vai ter maxit 100% certo vamos ver agora sim se vai funcionar aqui esse nos nosso Break Point aqui ó tô conseguindo Pegar engraçado né não tá não tá ativando deixa eu colocar aqui mais alguns

outros tamanhos então 640 vai ser o primeiro aí depois a gente pode pegar aqui colocar uma vírgula Vamos colocar aqui 992 Vai ser 3 por visualização e de para cima vão ser qu slides 10000 para cima vão ser qu slides certo vamos ver agora se isso aqui vai funcionar vamos aumentando aqui aumentando e e não funcionou Será que eu digitei Alguma coisa errada aqui deixa eu ver Break Point é Break points tá pessoal no plural aqui ó Break points Agora sim vamos aumentar aqui agora sim olha só que legal então em tamanhos menores para celular

ele vai ficar um né aí eu vou aumentando ó já pulou para dois slides por vez ó se eu passar aqui ó ele já vai ter os outros ali pro lado se eu for aumentando mais ainda ó já foi para três para enquadrar com a nossa tela né pessoal e aumentou mais ainda ó foi para Quatro tá vendo Então fica bem joinha fica bem Legal mesmo e só pra gente encaixar um pouquinho mais tá vendo que aqui tem ele tá um pouquinho para fora do alinhamento a gente tem aqui ó nossa index aqui o o

bloco ó Block a gente pode determinar lá no nosso CSS personalizado que esse blo aqui ó a gente pode colocar assim blo a gente pode dizer que ele vai ter margem à esquerda margem left de 5% e a margem à direita De 5% também deixa eu ver como é que vai ficar ó aí fica um pouquinho menorzinho assim ó acho que fica mais simpático né na verdade dá para diminuir mais aqui 3% 3% 2% queria ficar mais alinhado com ali a aí ó ficou mais alinhado agora com o que a gente tem aqui em cima

né legal e e ficou um pouco afastado aqui a gente pode mudar esse afastamento aqui no nosso Block a gente pode colocar No margem top sem margem em cima e aí ele já sobe ali para cima legal show de bola né pessoal bem bonitinho o nosso swiper aqui já tá ficando com uma cara bem joia o nosso aplicativo aqui a nossa página inicial né tá ficando bem legal mesmo agora então vamos fazer aqui na continuação ó a parte de categorias né então a gente tem tipo uma linha onde de um lado a gente vai ter

escrito categorias e do outro ver todas uma Coisa assim do tipo né então a gente pode fazer isso da seguinte forma aqui logo abaixo tá do nosso swiper aqui onde tem o fechamento do nosso swiper a gente pode criar aqui uma div com uma classe aqui display Flex que já vem uma classe que já vem no Framework S pra gente não ter que fazer isso lá direto já tem umas classes aqui direto né a gente pode dizer o alinhamento dos itens align itens vai ser Center o justify content vai ser Space between aqui vai ser

Space Traço between certo e aqui a gente vai colocar dentro dessa div então os os itens da categoria E um botãozinho veja todas as categorias né então aqui a gente pode colocar um H2 dois vamos colocar assim categorias e lá no canto a gente vai ter um link HF apontando para lugar nenhum veja todas ó lá e a gente pode colocar aqui até um ícone ó Eclass MDI MDI traço Arrow traço right flecha à direita né só pra gente ter assim ó olha só que que joinha né Que legal que vai ficar essa parte de

categorias aqui para nós né Beleza tá ficando bem bonito né pessoal tá ficando bem joia E aí agora a gente vai precisar fazer a parte aqui das categorias propriamente ditas aqui ó só que essa parte de categorias nós vamos usar o sistema de swiper também tá que é aquele sistema da gente poder Navegar puxando pros lados e tal né que nem a gente usou aqui para imagem só que daí a gente vai usar para botões esse swiper aqui dentro de cada slide você pode colocar o que você quiser não necessariamente só imagens Então isso é

muito legal dessa bibliote aí né então a gente vai fazer o seguinte a gente vai pegar lá ah lá da biblioteca do swiper aqui ó a gente pode entrar aqui onde a gente tem swiper a gente pode ir lá nas demonstrações onde a gente foi a gente Pode ir lá no Free mode que nem a gente pegou antes que é um um legalzinho que eu gosto sempre de pegar vamos copiar aqui o swiper a parte do HTML dele copiar aqui swiper cont C então aqui embaixo da onde a gente tem a parte das categorias Coloca

esse swiper a única coisa que a gente vai trocar o nome aqui em de swiper a gente vai chamar de categorias categorias certo e aí dentro de cada Folha a gente vai ter que colocar os botões certo Deixa eu só voltar aqui aqui apareceu o slide e a gente vai ter que fazer aqui a chamada na nossa rota aqui ó Desse nosso swiper de categorias aqui né Vamos fazer a chamadinha dele acho que é melhor pegar direto por aqui mesmo chamada essa chamada mais suscinta aqui ó a gente só vai precisar colocar um outro nome

então esse daqui a gente criou aqui uma variável chamada swiper E Aí escrito swiper chamando esse primeiro que era o de cima das propagandas certo então agora aqui embaixo a gente vai fazer ó na continuação swiper 2 e aqui a gente coloca a chamada de categorias que foi o nome da classe que a gente deu Aqui ó a gente chamou swiper categorias tá vendo a gente coloca aqui o nome da classe aqui a gente quantos a gente vai querer que veja e tal daqui a pouco a gente já ajeita isso aqui então Vamos só ver

lá Beleza já tá aqui o Nosso segundo swiper aqui ó já com os iten zinhos as rolagens aqui certo vamos agora então ajeitar esse daqui então a gente vai colocar em cada folha um eh um botão daqueles né que vai ser desse tipo aqui ó um botãozinho desse aqui da categoria então a gente pode colocar aqui dentro do slide um a gente pode colocar aqui um buton a gente vai colocar uma classe que a gente vai chamar de Filter btn que é o botãozinho de filtro esse Primeiro vai ser o que Vai est ativo Então

a gente vai colocar mais a classe Active e aqui a gente vai colocar todas de todas as classes ó beleza e aí em cada um dos e itens aqui a gente vai colocar uma categoria Então a próxima vai ser e celulares só que ela não vai ter a classe ativa tá só o primeiro vai ter a classe ativa então a segunda aqui botão celulares a terceira vai ser eh laptops e eu vou acelerar aqui ó laptops pra gente não demorar muito né Até uma dica que eu vou dar para vocês ó bem legal pessoal quando

vocês têm que fazer esses preenchimentos aqui de coisas assim você pode fazer o seguinte por exemplo cada swiper slide desse vai ser uma categoria certo tipo assim então você pode copiar esse conteúdo aqui que é um padrão e você pode abrir por exemplo o chat GPT já deixei aberto e aí você pode pedir para ela gerar e isso aí para você olha para você não ter que digitar É eu tenho um padrão de html da Seguinte forma dois pontos aí vou colocar o padrão gostaria que o valor onde está escrito celular você colocasse outras categorias

para um e-commerce por exemplo laptops laptops Smart watch vou colocar Smart watch e assim por diante por favor Me forneça 20 categorias então eu pedi para ela o que fazer vamos ver se ela vai Entender certamente aqui ela colocou Quais são as categorias por favor me coloque essas categorias dentro desse padrão de html Vou colocar aqui talvez eu não me expressei muito bem né vou copiar e v pedir para ela fazer PR nós ó lá que show de bola pessoal Imagina a gente ter que fazer isso na mão né a gente pede um pouquinho para

ela ali mas ela já entendeu E aí ela já faz para nós Aqui os padrões ó lá ó que massinha e já fez tudo aqui para nós aí o que que a gente faz a gente vem aqui copia aqui copiado vamos lá no nosso projetinho e aqui a gente pode simplesmente colar aqui no lugar desses slides que a gente tem aqui vamos colar esse padrão que ela fez aqui para nós então ela já criou para nós um monte já de categorias olha só que legal fez várias e várias folhas aqui de categorias com o padrão

que a gente queria né então é legal você usar GPT para esses preenchimentos Para você ganhar em tempo ganhar em produtividade Isso aqui é uma dica que eu dou aqui para vocês Tá beleza então vamos fazer agora então esse Filter btn só tá me irritando um pouquinho essas bolinhas aqui ó que tem de da paginação vou tirar aqui do nosso hots JS vou tirar ela aqui e aí beleza a gente vai ter aqui os nossos botõezinhos aqui ó aqui tem o free mode para para Para poder arrastar do jeito como quiser né E vamos fazer

aqui então o esses botõezinhos aqui o Filter btn né que é a classe ali do nosso botão então Filter btn nós vamos determinar que a largura vai ser de 100% a gente vai colocar que ele vai ter uma altura um rate de 35 pixels um pouquinho mais gordinho e ele vai ter o background nenhum background de noun ele vai ser vazado Vamos colocar que a borda dele Vai ser de um pixel sólida e aqui a cor a gente vai usar a nossa variável Preto aqui certo ok Na verdade dois pixels el vai ser um pouquinho

mais grosso aí aí a borda radios a borda arredondada dele a gente vai colocar aqui de 10 pixels para fazer um arredondadas e E aí pessoal o que que vai acontecer vocês vão reparar que algumas palavras elas vão ser é muito longas aqui deixa eu ver se eu consigo Pegar aqui tá meio difícil de de pegar aqui a deixa eu maximizar aqui que vai ficar mais fácil de poder rolar aqui vamos ver se eu acho fones de ouvido tem muitas categorias aqui né pode ser que tenha alguma categoria que fique muito longo aqui o tamanho

né então o que que a gente pode fazer aqui até repetiu duas vezes celulares eu reparei né celulares celulares deixa eu ver aqui celulares celulares Deixa eu tirar aqui a gente vai colocar aqui um Negócio para para ficar mais longo por exemplo aqui tá em celulares blá blá blá colocar alguma coisa assim olha lá como é que vai ficar tá vendo que não aparece tudo ali dentro então pra gente resolver isso aqui a gente pode colocar uns atributos aqui do CSS que fazem ficar com três pontinhos a gente faz assim White Space você coloca como

no wrap que é para não quebrar a linha então vai ficar tudo na mesma linha Depois você coloca o overflow como sendo Hidden para ele esconder tudo que tiver fora do botão e aí você coloca o text overflow como sendo elipses aí ele vai colocar três pontinhos olha só que legal então só vai ficar contido o valor da categoria ali dentro e isso é bem bem joia tá então só pra gente mostrar isso aqui para você Show Ah esses botões eles estão muito longe um do outro né a gente pode diminuir esse espaçamento vindo aqui

ó no Space between a gente pode colocar 10 Aqui ó para eles ficar mais próximos um do outro tá vendo dessa forma a gente tem aqui três slides por visualização 10 de espaçamento só que aí ó a gente quando tá em tamanhos maiores de tela não vai ficar tão legal isso daqui né na verdade aqui eu tava reparando também não fica legal fica um pouco fora aqui os as nossos slides Mas tá bom vamos deixar assim por enquanto então a gente Vai ter que também fazer aqui uns Break points né a gente pode até copiar

esses Break points que a gente tem aqui do outro e a gente pode aumentando essa quantidade de itens que vão aparecer de categorias né De acordo com o nosso com o tamanho da nossa tela né então a gente pode fazer de 50 pixels a gente vai pedir para aparecer TR 640 vai pedir para aparecer 6 992 Vamos pedir para aparecer 8 e de 1200 para cima vai ser 12 por visualização então Ó aqui fica TRS só que aqui a gente vai mudar para 10 a distância deles ó para não ter tanta distância Assim entre os

botões então Ó aqui quando a gente tá tamanho menores aparece TR conforme a gente vai aumentando ó já vai aparecendo mais opções de categoria até que chega no tamanho máximo aqui que aparece 12 por vez né conforme a pessoa vai puxando pro lado ela pode ir vendo outras categorias aqui né Engraçado que aqui fica meio Meio bugado pra gente arrastar aqui não sei se é por causa desse free mode aqui eu vou tirar esse fre mode Agora sim a gente CONSEG mais pro lado aqui para para ver né para pegar aqui ó aí Opa é

que no celular fica mais fácil tá pessoal aqui como é questão de arraste com o mouse fica meio bugadao Mas beleza deu para fazer aqui a parte de categorias também né Já tá joia agora a gente vai fazer então a parte mais Importante aqui né que é a partezinha dos czin onde vão aparecer os produtos aqui né os as imagens dos produtos e os valores Então a gente vai fazer essa etapa agora então logo abaixo onde a gente tem o nosso swiper onde ele termina né Deixa eu só ver aqui onde que ele tem o

fechamento dele certinho nosso swiper categorias vai fechar lá embaixo aqui então logo aqui embaixo a gente vai fazer aqui uma div onde a gente vai ter os nossos produtos né a gente pode até Colocar aqui um ID aqui ó chamado produtos porque aqui é que vai ser alimentado mais tarde dinamicamente né os produtos que a gente vai ter então aqui a gente pode colocar que vai ser ah a gente pode colocar que essa vai ser uma linha né a gente pode fazer assim Row vamos criar uma classe depois aqui e aqui a gente vai colocar

que vai ser o display Flex o align itens vai ser eh Center e o justify content a gente pode colocar F content a gente pode Colocar start que é para ele começar no canto de lá certo então essa aqui vai ser a nossa divid de produtos vamos fazer aqui essa Row aqui né que seria uma linha Row a gente vai fazer assim a gente vai fazer que ela vai ter uma Flex Direction do tipo Row que é do tipo linha e vai ter um invólucro né o Flex Flex wrap a gente pode colocar é wrap

com invólucro assim e aqui dentro a gente vai fazer os nossos produtos propriamente ditos né então a gente pode Criar aqui uma div chamada eh item Card que vai ser um item que a gente vai ter dentro do do card né E aí a gente vai fazer a seguinte divisória né a gente vai ter então o item Card vai ser essa área total aqui na verdade né que vai pegar até as partes de baixo aqui a gente vai ter um image content que vai ser a área onde vai ficar a contida a imagem que vai

ser essa parte cinzinha com a imagem dentro depois a gente vai ter aqui uma parte que vai ser o nome e O preço e mais uma parte que vai ser só o preço propriamente dito né Essa vai ser a divisória que a gente vai fazer então a gente pode fazer aqui um Primeiro vamos fazer um link né porque vai ser clicável isso então a gente vai fazer assim um a HF apontando para lugar nenhum a gente vai colocar aqui depois alguns valores né mas vamos colocar tudo isso dentro de um link e vamos colocar que

ele vai ter aqui a classe item item aqui a gente pode colocar então que Item vai ter só pra gente dizer que a cor vai ser preto aqui ó V Preto color pros textos que vão ter aqui dentro então aqui a gente vai fazer uma div com uma classe que a gente pode chamar de IMG container que é onde vai ficar a nossa imagem e dentro desse IMG container a gente vai colocar a imagem propriamente dita então IMG src vamos apontar aqui pra imagem vamos pegar aqui qualquer um pode ser Do do airpod mesmo e

aqui vai ficar a nossa imagem então a parte de cima aí depois a gente vai ter uma outra div que a gente vai chamar com uma classe aqui de nome e rating que vai ser Onde vai ter o nome do item e também a votação né o quanto ele tem de estrelinha Então a gente vai colocar aqui um spam com o nome do item e a gente vai fazer um outro spam aqui embaixo que vai ser a a votação né a gente vai fazer assim aqui dentro um Ecl a gente pode colocar MD MD Star

né que vai ser estrela o ícone de estrela e aí a pontuação que a que a pessoa vai ter né Vamos colocar assim 4.8 por exemplo e depois disso daqui então do nome rating aqui embaixo nós vamos ter uma div que a gente pode chamar com a classe de de Price que é esse de preço e aqui o valor Vamos colocar aqui é 2 299 por exemplo né onde vai ter aqui o valor do produto o preço então a parte ah de Esqueleto aqui já tá feito não dá para ver nada Vamos ajeitar tudo isso

daqui né então vamos lá no nosso CSS para deixar tudo certo então primeira coisa que a gente vai precisar fazer o item Card né o tamanho do nosso Card como ele vai se comportar então a gente pode fazer aqui o item Card ele vai ter o displ do tipo Flex a gente pode colocar aqui o Flex Wap dele vai ser no Wap Vl Flex Direction dele vai ser Coluna Vamos colocar a altura de 240 PI só pra gente vendo isso aqui a gente pode colocar um border de um pxid pra gente ver a área que

ele vai pegar né Então tá pegando uma área ali eh ele vai ter o tamanho Flex dele aqui vai ser de 45% porque a gente vai ter mais um pouquinho de Margem né Nós vamos ter margem à direita de 5 pixels e margem Bottom de 5 pixels certo e aqui uma coisa também que A gente vai ter que fazer é o controle da imagem né Mas vamos fazer o seguinte Ah deixa eu voltar lá no nosso index eu vou pegar esse item Card Vou colocar aqui um comentário item Card e aqui eu vou copiar mais

um ó recolhi aqui no cantinho ó para recolher todos árvore de itens aqui ó vou copiar cont contrl C E vou colocar mais um outro aqui pra gente ter dois pra gente ter uma duas referências aqui certo a gente vai ter que ajeitar essa imagem Porque senão vai ficar tá tudo bugado né então a gente vai fazer aqui um image container coner Onde fica a nossa imagem aqui a gente vai colocar que o display vai ser Flex vamos alinhar os itens ao centro também o justify content também vai ser Center aqui a gente vai colocar

um Edit de 100% e um rate de 100% e aqui a gente vai colocar um border Radios de 10 pixels e o background dele como sendo gelo aqui dessa forma que é a área que ele vai tá pegando né aqui a nossa imagem deixa eu colocar aqui ó o atributo que a gente acabou esquecendo aqui a gente pode colocar aquela IMG Flu né para ele ficar o tamanho certo aqui do item pass IMG fluí aqui também na nossa imagem aí beleza agora então com o tamanho certo da imagem ele Já tá aparecendo aqui para nós

ó legal show de bola deixa eu tirar esse essa linha aqui essa borda ok aqui ó pessoal em vez de 100% aqui a gente tem que colocar um tamanho fixo 880 pixels ó para determinar o tamanho fixo aqui do da nossa imagem certo e aqui ó essa imagem fluid na verdade não vai dar certo ó esse IMG fluid aqui não vai dar certo o tamanho da nossa imagem porque a gente vai ter que ter um tamanho fixo para padronizar Então a gente vai fazer o seguinte a gente vai fazer aqui o nosso image container ele

vai ter aqui ó na tag IMG de imagem a gente vai colocar aqui que ela vai ter o tamanho máximo máximo Edit de 150 pixs aí vai ficar melhor encaixada aqui essa parte ó e o a gente pode colocar aqui OB Fit é cover para que ele fique cropado né a imagem se precisar dentro dessa área de forma correta certo ficou aqui muito grudado com essa Parte de cima aqui onde a gente tem deixa eu achar aqui onde a gente tem os nossos produtos a gente pode dar um margem top aqui ó para dar um

afastamento ali olha só que legal show de bola né pessoal já tá ficando aqui mais visual pra gente como tá ficando os nossos czh esse segundo eu vou trocar aqui de airpod eu vou colocar uma outra coisa aqui vou colocar o Xbox só pra gente ver como é que fica ó beleza e aí vamos fazer agora essa parte Do nome rating que é essa parte aqui né e a parte do preço lá então continuando aqui Então vamos fazer a nossa classe nome traço rating vai ter o display do tipo Flex o justify content dele vai

ser o Space between para jogar pros lados né pros cantinhos aqui os itens e a gente pode dar um pading top 10 pixels pra gente fazer um afastamento Zinho preenchimento na parte de cima certo o nome do produto a gente pode colocar Assim ó vamos criar uma classe aqui chamado color gelo e aí a gente pode col variel gelo aqui ó seria um cinzinha e a gente pode colocar essa classe aqui ó no nome do item a gente coloca o Color gelo na verdade não vai ficar muito bom né ficou muito Claro na verdade color

color Grey Vamos colocar aqui color Grey color Grey Vamos colocar um cinza a o nome do item já fica melhor assim e aqui essa nossa estrelinha a gente pode colocar Então essa classe MDI Star Aqui ó que é a estrelinha a gente pode colocar então ela vai ter uma cor Orange laranja ó para ficar a estrelinha assim dessa forma Deixa eu só colocar esse color Grey no segundo item aqui que a gente já tinha copiado né na verdade no primeiro item aqui Opa colocar classe aqui color Gray beleza só pra gente deixar então aqui as

notinhas um pouco mais Destacadas ó a notinha ela é um pouquinho mais escurinha a gente pode colocar aqui vamos colocar uma classe aqui no nosso spam vou chamar de bold aqui que é um também vou fazer ela se afastar um pouquinho daquele canto lá a gente pode colocar assim margem para entrar um pouquinho PR dentro aqui né colocar no outro aqui também porque acabei como fiz dois aí tudo que eu Tenho que fazer eu tenho que replicar na verdade eu vou deletar esse segundo aqui ó it tem Card e a só depois que a gente

terminar o primeiro a gente vai para aquele outro a gente adiciona mais um item aqui beleza vamos fazer o price aqui também vamos usar aqui o o Bold né Vamos criar aqui esse bold que seria o bold Font weight Vamos colocar bold colocar 900 aqui para ver se fica isso aí ó fica legal 800 800 fica joia E aí a gente vai colocar também o Bold Aqui no nosso preço Price bold show vamos fazer só aqui a questão do preço ponto Price e aqui a gente pode aumentar um pouquinho da fonte fonte size colocar 20

pixels para ver se fica um pouquinho maior aí joinha então ficou legal né o nosso item aqui nome do item a notinha a gente pode agora replicar esse nosso item do card aqui vou copiar cont control c Vamos colocar mais um aqui ó cont control V aí nós temos dois itens Agora sim né e aqui a gente vai Colocar um outro aqui ó XBOX só pra gente ter diferenciado Então vou colocar aqui escrito Xbox series series x beleza tá legalzinho deixa eu dar uma olhada lá nosso padrão aqui legal aqui até até Talvez o Bold

não seria tão necessário né pessoal ó deixa eu ver assim o Bold fica melhor aqui para essa parte do do preço ó preferi mais sem o Aqui ó fica mais simpático beleza só que aí o que que acontece ó Conforme a gente vai tendo os tamanhos aqui também ó dá uma reparada ele vai ficar sempre dois itens né se a gente colocar mais um item aqui vamos pegar fazer mais um cont contr C aqui ó cont C deixa diminuir aqui colocar mais um item Card aqui e mais um aqui embaixo ainda vamos colocar qu quatro

itens ó Conforme a gente for aumentando eles Sempre vão ficar assim dessa disposição então a gente poderia e tá fazendo a em telas de tamanho maior né ele tem uma disposição diferenciada então que que a gente pode fazer a gente pode vir aqui no nosso index e fazer aqui uma Mia Carry né então fazer @mia vou fazer assim minimo Edit tamanho mínimo de 992 piels o que que eu quero que aconteça então Então nesse tamanho de telas PR cima eu vou querer que o meu item Card que é esse aqui que a gente fez aqui

em Cima ele T tamanho de 45% que é 45 45 somando Du dá 90 mas daí tem as Marinhas a gente tá considerando isso né então aqui nesse item Card a gente vai querer que em tamanhos maiores a gente vai querer que o Flex dele seja de 30% para que caiba TRS né Então olha só conforme a gente for aumentando aqui agora ó deixa eu pegar aqui a pontinha quando passar de 992 ó já fica três na mesma linha olha só que legal joia E aí a gente pode fazer que em Tamanhos ainda maiores né

no caso de 1200 para cima pode copiar esse aqui colar 1200 para cima a gente vai querer que esteja 20% aí cabe qu numa linha só então ó vai para TRS depois foi para qu olha só que legal fica bem bem joia né essa disposição dos itens aqui em tamanhos de resolução diferente então você vê que você consegue ir trabalhando né com a responsividade a medida que você vai desenvolvendo aqui os seus projetinhos Né então a gente tem aqui os itens na verdade para ficar legal isso aqui a gente pode colocar outras imagens aqui só

pra gente ver visualmente como é que vai ficar né aqui a gente pode trocar para Macbook e aqui esse outro a gente pode trocar para iPhone ó e aí a gente vai precisar agora dar um espaçamento aqui ó porque eu não consigo rolar para ver esses aqui tá vendo tá faltando espaço aqui por causa Que é e por causa desse menu e tal a gente vai ter que dar um espaçamento maior aqui pra gente ter visualizar esses itens de baixo né e a gente pode fazer isso aqui colocando umas quebras de linha aqui embaixo né

Deixa eu ver ver onde é que fecha o item Card Fecha aqui né então aqui vai fechar o produtos Então logo aqui ah abaixo do produtos a gente pode colocar uns BRS aqui ó que é quebra de linha né para ele poder abrir a rolagem Para nós Vou colocar mais um pouco aqui dá para fazer com margem no CSS também ó mas aqui deu até muita sobra ó vamos voltar aqui ó legal daí ele vai aparecer até o último aqui ele faz a rolar aí repara que conforme rolagem que a gente for tendo aqui no

miolo no peixo de contente a parte de cima ele se mantém intacto ó tá vendo que a gente fez a parte da da busca lá em cima do nome do aplicativo a bolsinha do nosso shopping né da compra ela continua fixa lá e a Parte de baixo também que é o que a gente queria mesmo né aí assim vai ficar bem legal bem Joia eu achei que tá um pouco grudado aqui pessoal ó Um item do outro então a gente pode vir aqui ó onde a gente tem o nosso item Card e margem Bottom a

gente pode aumentar para uns 10 pixels ó para dar um afastamento maior 15 pixels aí ó ele ficar um pouquinho mais afastado um do outro deixa eu ver lá no nosso modelo como é que fica ó ele fica com esse afastamento Zinho e de Lateral ele também tá um pouquinho mais vamos ver se com 10 pixels fica joia margem à direita né E aí para encaixar isso a gente pode fazer assim ó produtos que é onde tá contido tudo isso margem a gente pode colocar alto para ele ficar no Centro ah na verdade a gente

já tá usando aqui o Deixa eu só lembrar aqui que a gente fez aqui no nosso produtos a gente tá com margem top display Flex Aline Center Justify content start deixa eu ver o justify content Center ficar Centralizado vai fazer diferentes não fez diferença nenhuma né mas tá bom Aqui eu preferia até talvez com menos espaçamento mesmo ó fica mais mais interessante assim esse era o padrão que eu tava usando no meu aqui também né dando uma olhada aqui ele tem pouco espaçamento Mas beleza pessoal então tá feita aqui a nossa página inicial né Olha

só Que legal Que maneiro que bonito que ficou né ficou bem joia mesmo os itens aqui as categorias né ficou bem bem legal mesmo agora a gente vai precisar então construir a página de detalhes Então a gente vai pra segunda página aqui que é essa página de detalhes e depois pra terceira página que é a página de carrinho né uma vez feito o frontend aqui terminado o nosso frontend aí a gente vai pra parte lógica de puxar os dados alimentar ar ele né Mas eu gosto sempre de começar construindo pela parte do front end a

parte visual para depois a alimentação dele com os dados e que vai formar aqui a estrutura do aplicativo fica mais fácil Se a gente já tiver o frontend feito então pessoal eu tinha prometido para vocês Que esse minicurso seria de quatro aulas né mas à medida que eu fui gravando o projeto prático eu vi que vai ficar uma aula muito gigantesca né E aí isso fica extremamente cansativo então Que que eu vou fazer eu vou picar ela em pedaços menores tá para que a gente possa ir assistindo cada aula ali mais ou menos uma horinha

no máximo uma horinha e pouco para não ficar muito cansativo então a continuação da aula vai est aqui nesse link para você assistir e se você quiser fazer um curso completo de criação de aplicativos tem o meu curso aqui que tá muito show de bola Desculpa aí por ter que colocar mais aulas tá não tava no plano mas assim vai Ficar melhor para você aprender de uma forma mais suave forte abraço e até a próxima valeu