Então vamos lá vamos pra página de detalhes então pra gente criar a página de detalhes a gente vai ter que criar uma nova página aqui a gente pode dar um um control c aqui nesse link 4 né dar um control V Na verdade eu dá para pegar até da index que já tem alguns alguns pontos que a gente pode estar utilizando né então vou pegar da index mesmo dar um cont control ctrl v Vou colocar aqui o nome da página como detalhes vai ser a página onde a gente vai ter esse detalhamento certo e aqui
a gente vai trocar o nome aqui da página para detalhes e a gente vai precisar criar a rota aqui no Roots Então vamos lá para baixo criar uma nova rota aqui né copiar colar uma nova rota detal aqui vai ser detalhes HTML certo beleza então só pra gente diferenciar aqui ó Nessa na página de detalhes eu vou trocar aqui onde tá escrito greench só para detalhes pra gente saber que essa página de detalhes porque ela vai igual a nossa index né só pra gente ver se vai funcionar E aí pra gente poder trabalhar com essa
página de detalhes pessoal aqui no nosso Roots a gente pode fazer assim iiz index que é essa página inicial ele já jogar a gente pra página de detalhes que é para ficar mais fácil da gente poder tá trabalhando E para isso a gente pode usar o comando app. viws pm. router P navegate E aí a gente manda ele mandar a gente pra página de detalhes isso aqui é um comandinho né linha de comando aqui pra gente dizer pro Framework s para Que rota a gente quer que seja enviado ou para onde quer que ele navegue
Então se a gente coloca assim dessa forma ele vai entender que já é para jogar a gente pra página de detalhes E aí tá lá ó já tem a página de detalhes ali pra gente certo então vamos lá na página detalhes e vamos Apagar o que a gente não vai querer né então a gente não vai querer esse nave topo aqui vamos apagar isso tudo aqui eh a gente vai apagar Na verdade nós vamos Apagar Praticamente tudo né a gente vai ter aqui o o page cont vamos apagar aqui esse blo que tem aqui ó
vai ficar Zerado ó Então a nossa página detalhes tá zerado e o seguinte quando entrar na página detalhes a gente vai querer que esse menu que é o menu que acompanha cada página né ele desapareça então o que que a gente vai ter que fazer a gente vai ter que lá no nosso na nossa inicialização a gente vai ter que ir lá no nosso index onde a gente tem esse menu aqui ó vai tá lá em cima o nosso tob aqui ó a gente vai colocar um ID para ele a gente vai chamar de menu
principal tá menu principal E aí lá no nosso Roots a gente vai querer que antes que inicialize a nossa rota detalhes ó antes da página ser exibida tá vendo aqui o que que a gente pode fazer a gente pode pegar esse nosso menu detalhes Então vamos pegar o seletor menu principal né melhor dizendo que é o menu lá do nosso index e a gente vai pedir para desaparecer isso aqui ó Hide e a gente pode colocar Fast assim um efeito Então olha o que que acontece você viu ali o efeitinho que ele deu né se
eu rodar aqui de novo ó ele sai o menu ele tipo como se minimizasse esse menu principal e quando a gente volta para a nossa index antes de inicializar aqui ó a gente a gente vai querer que o nosso menu principal Ele mostre show show Fast certo então a gente pode fazer o seguinte só pra gente ver esse efeito eu vou tirar essa essa rota de detalhes que vai para lá e vou colocar num desses itens pra gente clicar só pra gente ver o funcionamento disso então aqui na index a gente pode achar ali onde
a gente vai ter um item desses ó item Card pegar no primeiro que tiver aqui ó e vou pedir para mandar a gente para ó de detalhes aqui dentro do HF a gente aponta que a gente quer ir para detalhes o nome da Rota e quando clicar agora repara aqui no menu olha cliquei aqui o menu sumiu tá vendo que legal e aí a gente tem como é agora trabalhar com essa página de detalhes aqui bem legal então só para ver se táa funcionando o efeito do menu né depois a gente pode fazer aqui em
detalh só pra gente ver se funciona isso aqui mesmo vou fazer uma HF apontando para voltar para index Vou colocar aqui ó voltar só pra gente ver se vai funcionar cliquei aqui o menu sumiu clicar aqui em cima no voltar ó voltei e o menu apareceu Olha que legal o efeito que fica lá embaixo ó tá vendo um efeitinho bem bem joia mesmo beleza então vamos agora aqui que é pra gente ser jogado lá para detalhes pra gente poder fazer aqui essa página de detalhes Então como é que vai funcionar essa detales a gente tem
aqui uma área onde vai aparecer uma imagem uma área com fundo gelo né Tem imagem aqui em cima um menuzinho com botões fixos que ficam aqui nessa área depois a gente tem a área dos detalhes do do do item e aqui embaixo a gente vai ter um Tab bar parecido com aquele que a gente tem na nossa index só que aqui tem um botão e ali o preço né os valores das coisas aqui na parte de baixo né então a gente pode fazer isso agora então aqui na nossa página de detalhes aqui a gente tem
um tob Tab botton aqui né a gente pode recortar isso aqui Pessoal esse tob que é do padrão lá da página inicial e colocar dentro aqui da nossa página detalhes ó um desse aqui que na verdade é uma lá da index né então a gente vai apagar esse conteúdo dentro dele aqui V tirar tudo isso é daqui e vai ser uma área onde a gente vai ter aqui na verdade só um um preço né E também um botão Então a gente vai fazer duas dives aqui né então a gente pode ter uma primeira div que
é onde vai ser o valor tipo 1200 por exemplo e uma outra div aqui que vai ter o nosso botão vamos fazer aqui um buton e para adicionar no carrinho é adicionar carrinho certo então basicamente isso daqui Claro antes da gente estilizar né Ó então o preço e o botão de carrinho Beleza então isso vai ficar lá embaixo dentro do conteúdo da nossa página Então a gente vai precisar fazer a parte aqui do da imagem que vai aparecer aqui dentro né então a gente pode fazer aqui uma div uma classe que eu vou chamar de
prod prod detail quer dizer detalhes do produto dentro desse prod details a gente vai ter uma div com uma classe que eu vou chamar de butons top que é onde vai ficar os botões aqueles botões principais lá colocar três botões aqui que eu vou fazer estilo de link apontando para lugar nenhum aqui vai ser a primeira imagem vai ser um de voltar um botãozinho de voltar né então a gente pode até lá no no remix icon e ver aqui Arrow e esse daqui que a gente vai querer ó Aron left S vou pegar esse aqui
que é o voltar botar esse esse daqui vamos ver lá como que tá ficando botãozinho de voltar vamos colocar um botãozinho de favoritos que vai ser o coração né aqui vai ser o hert vai ter lá na nossa index que eu posso pegar aqui aqui ó o Hart hert Line que é o coração e um compartilhar que vai ser um share aqui né share Compartilhar esse aqui a gente pode pegar esse daqui ó share aí vamos colocar mais aqui HF e aqui o botãozinho de compartilhar Beleza então ão se os botões que vão ficar no
topo lá os três botõezinhos e nós vamos ter uma imagem né que é essa é a imagem principal do produto então a gente pode colocar aqui um src e a gente pode colocar aqui uma imagem que tem por padrão que é esse default.png ó que é tipo uma caixinha que é como se não tem produto nenhum né pra gente deixar assim dessa forma agora vamos trabalhar com c CS aqui da nossa página de detalhes então o que que a gente vai fazer lá no nosso na pasta CSS a gente vai criar um novo arquivo que
eu vou chamar de detalhes pcss que é onde a gente vai colocar aqui tudo que for as regras dessa página de detalhes lá na nossa index HTML a gente vai referenciar mais esse arquivo CSS vai ser o detalhes CSS beleza e aí a gente nesse detalhes SS a gente vai pegar aqui a o esquema de cores também colocar aqui em cima deixar já colocado E aí vamos começar agora a fazer as devidas modificações que a gente vai precisar né então primeiro foi o pro de detail assim que é essa área da parte de cima que
vai ser essa área cinza aqui ó tá vendo essa área aqui gelo maior Então vamos fazer ela lá prod detail né prod detail aqui a gente vai colocar que o background a cor do fundo vai ser gelo ó a área é assim a largura vai ser de 100% e a altura nós vamos passar uma altura fixa de 450 pixels certo então vai pegar essa áre zinha aqui ok nós vamos dizer que o display vai ser do tipo Flex alinhar os itens ao centro ó deixar tudo no centro o justify content dele também vai ser Center
deixar tudo Centralizado e ele vai ter o posicionamento relativo position relativo por a gente vai usar o posicionamento absoluto para essa parte dos botões pra gente dizer que em relação a essa área aqui que é a área do prod de dte a gente vai querer que os botões Fiquem lá na parte de cima certo a gente já criou aqui então o Button Stop né que vai ser a classe onde a gente vai ter isso então a gente pode colocar aqui que vai ter buton Stop essa classe aí e a gente vai fazer que o display
vai ser Flex a gente vai colocar um Edit de 100% só pra gente ver is se a gente pode colocar um background White aqui só para vocês verem né a área que vai pegar esse aqui e a gente vai colocar o posicionamento dele position como sendo absoluto E aí agora a gente vai poder passar onde a gente quer que ele encaixe então do Topo a gente vai querer que fique 20 pixels ó a gente sobe ele lá para cima aí para separar esses itens a gente vai fazer um justify content como sendo Space between espaço
entre eles a gente vai fazer aí eles ficar com o espaçamento ordenado e o alinhamento o align itens Vamos colocar Center certo para ficar bem a centro a gente pode tirar esse background White que era só para vocês verem a área que tá ficando ali a área dos botões lá em cima né a imagem aqui pessoal a gente pode passar um tamanho máximo também um prod detail IMG para que a gente possa ter depois quando a gente for colocar imagem no tamanho máximo de 400 pixels para elas não estourarem aqui o tamanho tá o Max
Edit de 400 pixels certo e agora vamos fazer esses botões aqui para ficar joinha Então vamos vamos fazer os nossos butons Então vai ser o butons toop a que é o nosso link e aí a gente vai fazer que eles vão ter a largura de 40 pixels a altura de 40 pixels o background deles a gente pode colocar que vai ser branco Ó lá então fazendo os nossos botões aí borda radios a borda arredondada vai ser de 50% para ficar arredondado beleza pra gente alinhar tudo isso vamos fazer o display Flex o align itens Center
e o justify content Center também Beleza então olha como é que tá ficando joinha né a cor deles color vai ser a variável Preto aqui ó para ficar os botões assim e uma borda border de um pixel Solid a gente pode colocar aqui a variável gelo né só para dar um efeitinho de borda em volta dele legal o tamanho da fonte a gente pode aumentar um pouquinho fonte size 18 pixels aumentar o tamanho dos ícones só que aí que que acontece pessoal como a gente tá usando o Space between aqui nos no botão tops ele
vai dar separação uniforme entre cada um dos itens certo só que se a gente olhar lá no nosso padrão aqui ó o primeiro item vai ficar bem à esquerda e os outros dois itens do lado direito certo Então como que a gente pode fazer para determinar isso existe um truque aqui no CSS que eu gosto de fazer quando a gente precisa fazer essa separação assim que que você vai fazer você vai pegar esse teu seletor boton zar que cada botão desse E aí você vai especificar que você quer pegar o primeiro para você fazer isso
você pode usar o seletor first first shield assim ó o primeiro filho que você quer dizer que quer pegar o primeiro item então é imagina que a gente tem o Button Stop tá que esse é o Button Stop a gente tem o a tag a a gente tá selecionando e a gente vai querer que pega o primeiro deles o primeiro filho é isso que o f shield faz e esse primeiro filho o que que eu vou passar para ele eu vou dizer que a margem à esquerda margem left vai ser de 20 pixels só pra
gente afastar ele um pouquinho aqui do Canto olha lá o que que vai acontecer ele afastou um pouquinho aqui e agora o que a gente tem à direita a gente vai querer que seja automático Então olha só você faz margem right margem à direita ao quando você fizer isso olha só o que vai acontecer ele automaticamente vai jogar os itens os dois itens lá pro canto de lá olha só que truque legal de CSS aqui né Então você já fica com os alinhamentos certinhos e agora que que você pode fazer agora para pegar o último
aqui ó pra gente trabalhar com esse último botão a gente pode pegar copiar e colar só que em vez de fazer first tild aqui o o primeiro filho você faz L TI que é o último filho e aí aqui a gente pode fazer o seguinte que da direita margem direita eu quero que seja 20 pixels e a margem à esquerda que é o outro botão aqui o botão do coração que a gente tem aqui do lado a margem à esquerda eu vou querer dar uma espaçamento de 5 pixels aí olha só Aí eu tenho controle
aqui ó por exemplo se eu colocar 25 pixels ó eu tenho afastamento dele aqui nesse sentido e aqui esse Margin right é o afastamento nesse sentido então olha só que que legal né pessoal como é que fica fica bem joinha mesmo aqui a parte dos botões Então os botões estão feitos a gente inclusive agora pode aqui no nosso detalhes nesse primeiro link que é o de voltar aqui o botão de voltar a gente pode falar para ele voltar para a index né ó index Então a gente tem a página inicial Voltamos para index ó clicar
aqui para ir para detalhes vamos para detalhes olha só que joia ó e ó um menu lá embaixo sumido ó sumindo que legal bonitinho né jo Beleza então a gente fez a parte aqui de cima né essa parte aqui essa área agora a gente vai ter que fazer essa área do Miolo aqui né então a gente tem aqui prod details que seria esse daqui aí agora a gente pode continuar fazendo próxima etapa a gente vai chamar is ali de div CL prod content é o conteúdo do produto aqui né a gente aqui pode usar uma
div com a Class Block que é para tudo ficar um pouquinho mais para dentro né E aí a gente pode passar o seguinte a gente vai fazer a primeira linha aqui ó vai ser aqui o nome do do produto e um botãozinho aqui uma espécie de um botãozinho né de um uma tag ali dizendo o que que ele tá em promoção ou coisa e tal então a gente pode fazer assim a gente pode fazer uma div com a classe aqui eu vou vou chamar de linha Line certo e aqui eu vou colocar em o nome
do produto Vou Colocar assim nome do produto V Colocar assim genérico tá ó lá nome do produto e a gente vai ter também o botão né fazer aqui um buton aqui vou colocar escrito promoção assim certo então ajeitar essa linha aqui vamos lá pro nosso detalhes e vamos fazer essa linha aqui nós vamos fazer um efeito para que essa parte da área dos produtos ele possa subir né porque aqui assim ó você vai reparar que ele tem os cantos arredondados aqui e ele fica um pouquinho para cima da área onde a gente tem o nosso
produto ali certo então o que que a gente pode fazer a gente faz assim ó prod content que é o conteúdo ali content a gente vai querer que ele tenha o background Branco a gente vai querer que a borda border top Radi quer dizer a borda do Topo e à direita a gente quer que ela seja arredondada e a gente vai passar aqui 20 pixs e a gente vai fazer a mesma coisa com a border top left de 20 pixels aqui não vai aparecer porque o fundo do nosso aplicativo é branco e como a gente
tá fazendo borda arredondada Branca a gente não enxerga então o que que a gente vai fazer a gente vai pegar toda essa área aqui do do prod content e trazer ela para cima da área que a gente tem desse cinza aqui e a gente pode fazer isso usando o sistema de Margem negativa então você pode fazer assim ó marg top marg top e aqui você passa que que é - 50 pixels que eu quero que ela volte 50 pixels para cima ó subiu para lá tá vendo que os itens todos foram para cima Então é
isso que o margem top faz ele subiu para lá só que daí a gente tem que fazer isso ficar por cima daqui dessa outra área né então a gente pode fazer assim que isso aqui vai ter um posicionamento relativo ó lá já apareceu e a gente pode colocar aqui o z index né a qual camada vai ficar a cima de qual a gente pode colocar 99 que já vai ficar maior do que a outra lá né Deixa eu só ajeitar aqui ó dier index 99 olha só que maneira então ele subiu um pouquinho para cima
e aí agora a gente enxerga a borda arredondada porque a gente puxou essa parte do prod content para cima legal dessa forma fica mais visível ali essa essa área de baixo aqui vamos continuar Então vamos lá fazer a nossa linha Line a gente vai fazer o display delas sendo Flex o alinhamento dos itens vamos fazer Center aí para cada um ir para um canto aqui a gente vai colocar o justify content Space between fica um em cada lado aqui o Flex Direction dele a gente pode fazer flex flow né a gente pode colocar Row Wap
errado flex flow r beleza e agora para dar certo a gente só vai precisar trocar o tamanho desse botão porque o botão já vem pro padrão com tamanho ali de 100% então aqui a gente vai colocar aqui uma classe s promo Vou Colocar assim promo btn Prom btn aqui a gente pode fazer que o nosso promo btn vai ter a largura de 30% não ser tão grande ó ficar lá no cantinho background esse aqui vai ser uma cor diferente então a gente vai fazer aqui um e F4 d 4 d Vai ser tipo um tom
de tomate aluma coisa assim border radios Vamos colocar de 8 pixels vamos tirar a borda dele padrão Vamos colocar n então só deixar para ele ficar gordinho e a cor color White ele ficar branco aqui na verdade que usar a nossa variável branco aqui né Beleza Vamos aumentar o tamanho dessas Fontes a gente pode fazer aqui que o Line B Font size a gente pode colocar 20 pixs que o b é essa o nome do produto aqui aqui né para aumentar o nome do produto certo e aqui a gente pode colocar uma margem né margem
top para ele afastar um pouco é pading top um preenchimento isso para ele afastar um pouquinho lá da parte de cima Beleza então fizemos a linha ali onde vai ter o nome do produto e o botão escrito promoção né e agora a gente vai fazer aqui essa parte aqui dos botõezinhos né de de rating né De quantas estrelinhas de like de reviews vamos fazer essa linha de baixo então a baixo aqui da onde a gente tem essa nossa Line aqui a gente pode fazer uma div com a classe display flex com alinhamento dos itens ao
centro justify content a gente pode colocar também e vamos colocar start né que tem começar no começo e aqui a gente vai colocar os botões então a gente pode fazer aqui um buton aqui vai ser a a nota aqui né Deixa eu ver aqui é Estrela né então a gente pode colocar aqui e MD MD Star e aqui uma nota 4.8 por exemplo beleza vamos fazer mais um botão que vai ser o botão de like né aqui a gente pode colocar 90% porcentagem a gente pode ver aqui o ícone de like do remix like like
não t tb aqui ó tb up é esse aí que a gente vai precisar e ele deixa eu ver se ele é vazado ou ele é interiço ele é interiço então a gente vai pegar esse T up aqui ó e vamos colocar aqui no lugar dessa estrelinha aqui volta lá então tem o botão e mais escrito ali review né então a gente pode colocar aqui um spam E aí 110 reviews views agora vamos estilizar esses botõezinhos né nesse estilinho aqui ó que é um redondinho aqui com com cinzinha então a gente pode colocar aqui a
classe btn a gente pode colocar rates né que seria de das notas né btn rates Vou Colocar assim e aí aqui no nosso CSS a gente pode fazer então aqui btn rates com uma borda de um pi sólida a gente pode colocar aqui um um cza ver como que vai FIC colocar de 20 pixels um pading a gente pode colocar aqui de 5 pixels para cima e para baixo 10 pixels a esquerda e na direita background a gente vai colocar nenhum E aí a gente pode colocar uma margem à direita margem right de 5 pixels
e um Edit fixo de 80 pixels por cada botão ó lá joinha Ficou maneiro né pessoal ficou bem legalzinho esse daqui e aí a gente precisa colocar ele no no ícone do do tamb né da aqui da imagenzinha aqui ó do botãozinho tem que ser verde né a gente pode pegar aqui o a classe dele o nosso ícone de t e a gente pode colocar que a cor dele Color vai ser a nossa variável verde legal joia e talvez vai ter que aumentar um pouquinho o tamanho dessas da fonte aqui né desses desses ícones ó
estão meio meio pequenotes né na verdade tudo aqui Talvez teria que ter uma fonte um pouquinho maior Deixa eu ver como é que vai ficar o f size 16 pixs ó f p melhor né mas os ícones propriamente ditos a gente pode fazer um pouquinho maior aqui a gente pode fazer assim ó deixa eu ver aqui a gente tem o ícone né a gente pode fazer aqui o BN rates e que é o ícone F size dele a gente pode fazer 22 pixels um pouquinho maior né 24 pi daí fic muito grande deixa eu ver
aqui e só para esse aqui ficar bem alinhado então vamos colocar aqui um display Flex E aí a gente pode colocar o align itens Center e o jy content Space between E aí vai ficar com espaçamento padronizado né Não achei que ficou muito legal não não gostei acho que eu vou deixar tudo num tamanho padrão aqui mesmo eu preferi assim dessa forma ó Ach que fica mais joia né esse cinza também tá muito escuro deixa eu pegar um outro tom de cinza aqui ó 50 Tons de Cinza vamos pegar aqui um cinza mais mais clarinho
um pouco ó diminuir um pouquinho aqui aí esse aí ficou joia né Opa e aí a gente tem aqui a parte dos n e a gente pode usar um color deixa eu ver que a gente feito aqui a gente pode usar uma cor gelo nele né Essa parte do reviews aqui ó a gente pode colocar a classe aqui reviews e aqui a gente pode colocar reviews a poar é fica muito fica muito claro né deixar um Grey aqui um cinza beleza ficando legal né ficando joinha a gente pode colocar aqui uma margem deixa eu ver
aqui a gente pode colocar uma margem à esquerda marg left mais dentro né Deixa eu ver se para dar um afastamento aqui nesse aqui também a gente pode colocar margem left para ficar um pouquinho mais para dentro e aqui deixa eu ver se é meio grudado ele é mais afastado né essa parte aqui então a gente pode dar aqui um margem top ó para afastar um pouquinho assim legal e agora a gente pode fazer aqui o conteúdo né então aqui a gente tem a parte aqui dessa área essa primeira parte Line então é essa linha
aqui essa segunda parte é essa segunda aqui vamos fazer mais uma div aqui com uma classe display Flex Aline itens Center justify content a gente pode colocar Center também e aqui a gente pode colocar um pen né pelor pra gente ter aqui um o que a gente teria como se fosse uma descrição do item né que a gente pode colocar eh na verdade é bom ter essa cor mais escura né eu ia dizer para colocar de repente uma cor um pouquinho mais clara mas acho que assim fica bom né E essa parte ele é meio
próximo realmente da Ali dos dos itens que a gente tem aqui né deixa eu ver se vai ficar bom se a gente colocar ass margem em todos os sentidos aqui ó não não ficou bom não top tá então a gente vai ter aqui o texto né uma descrição Zinha curta e aqui embaixo a gente vai ter aqui uma tabelinha que a gente vai colocar que é uma tabelinha aí de características e detalhes né que a gente pode tá colocando então baixo aqui da descrição a gente pode a gente tá fazendo essa tabelinha Então vamos fazer
aqui uma uma tabela dentro dessa tabela a gente vai colocar aqui uma linha com o título de cabeçalho característica Então esse vai ser o primeiro primeiro item característica e o segundo item th vai ser detalhes característica e detalhes E aí aqui dentro a gente vai ter o as linhas propriamente ditas dessa característica e detalhe né a gente pode colocar aqui já de exemplo TR e aqui a gente pode colocar TD é bonito aqui a gente pode colocar um outro TD aqui vai o detalhe mais detalhado e agora vamos dar ajeitada nessa nossa tabela aqui no
nosso CSS né então a gente vai fazer assim da seguinte forma table essa tabela ela vai ter uma largura de 100% border colapse a gente coloca como sendo colapse e margem bot marg embaixo de piels e agora a gente vai fazer aqui que o nosso th e o nosso TD V ter um pad de 12 pi texto alinhado ao centro a gente vai fazer bord embaixo B bott um PX Solid colocar umzinho aqui DDD a a gente pode colocar aqui a borda direita coisa um pixel Solid DDD e border left Vamos colocar um pixel Sid
DDD beleza e aí a parte do título que vai ser o nosso th sozinho né parte do título th a gente coloca que o background dele vai ser DDD aqui ó dessa forma aí a gente fica com uma tabelinha bem bonitinha né E aí para ter mais itens é só duplicar aqui as linhas com os conteúdos né ó aqui é outro aqui vai outro detalhe né aqui vai detalhe tá E aí a gente vai ter as características e os detalhes aí certo da nossa tabelinha que depois a gente vai preencher dinamicamente certo e agora a
gente vai precisar ajeitar essa parte de baixo por último aqui né que é aqui onde a gente vai ter o preço o botão de adicionar a carrinho n a gente vai precisar ajeitar Essa parte aí que tá aqui no nosso tubar aqui essa parte de baixo né então aqui onde a gente tem o preço e o botão do carrinho nós vamos fazer da seguinte forma a nesse primeiro it aqui primeir tem a gente vai colocar aqui uma classe A gente vai chamar de Flex 40 Porque que a gente vai querer a gente vai querer que
seja 40% da área pra parte do preço e os outros 60% vai ser para o botão Então a gente vai fazer essa diferença então aqui a gente vai colocar um Flex 40 no outro a gente vai colocar um Flex 60 certo então aqui a gente vai colocar essa classe Flex 40 a gente vai colocar aqui o display Flex aqui vai ser de 40% e o outro Flex 60 vai ser de 60 certo então ó um vai pegar 60% o outro 40% ok aqui a gente também vai colocar no nosso Flex 40 aqui a gente pode
colocar diretamente Isso aqui é uma classe do Framework 7 que é o text align Center que é para alinhar o texto ao centro tá vendo Então vai ficar ali dessa forma assim o nosso e texto e aqui a gente pode colocar um spanz né que vai ser o o valor que era tipo assim quanto que custava né então a gente pode colocar assim de de 1400 aí Isso aqui a gente vai colocar aqui uma classe que a gente vai pode chamar de Riscado certo e deixa eu ver aqui que a gente fez antes o review
estava com a cola a cor Grey né aqui a gente pode colocar Grey assim ó color Grey color Grey essa forma daí a gente muda lá na parte de reviews pra gente poder reaproveitar essa classe de de uma forma mais bonitinha color Grey beleza e aí a gente vem aqui no nosso no preço que era o preço que tinha antes ele vai ser Riscado color gre a gente deixa ele assim então pra gente dizer que ele vai ser Riscado a gente pode criar aqui aass Riscado ter o text decoration como Line TR isso aqui é
para ficar Riscado ó lá a gente pela classe do CSS pela propriedade CSS determina que ele vai ficar arriscado E aí a gente vai fazer o seguinte deixa eu ver aqui aqui a gente tem o display Flex nosso tubar Inner a gente vai colocar aqui também ó que ele vai ter o alinhamento align itens C e o justify content Center também e aqui não a gente vai colocar um outro spam pro preço na verdade a gente pode usar até uma outra tag a gente pode colocar um H3 aqui ó ficar maiorzinho ó lá show de
bola aí assim fica melhor ó fica mais destacado ali né e aqui a gente pode colocar uma classe chamada pricing que é tipo o preço a gente pode colocar que a gente não vai querer que tenha tenha pading e nem margem para ele ficar grudado com outro preço que tem ali né E esse pricing aqui a gente pode vir aqui colocar pricing que a gente vai querer que tenha um Font weight de 800 ficar mais grosso e um Font size de 22 pixels para ele ficar maior ó lá joinha Então a gente tem o preço
Riscado né o preço que é da promoção que que era e não é mais e agora a gente vai fazer o nosso botão aqui ó esse buton a gente pode colocar uma CL como sendo add cart adicionar o carrinho e vamos fazer aqui o add cart adicionar ao carrinho aí a gente vai colocar que ele vai ter umit de 90% uma altura de 50 pixs Vamos colocar um border radios de 15 pixs vamos tirar a borda do botão original para nenhuma né border background dele a cor de fundo vai ser a nossa variável verde e
a cor dele vai ser a nossa variável branco e o cursor vai ser Pointer só PR isso aqui é só para quando a gente tá no navegador ele fic apontando né adicionar ao carrinho legal ficou bem bonito né pessoal bem legal mesmo nosso adicionar o carrinho a gente pode até aumentar um pouquinho a fonte fonte size 18 pixels e a gente pode aumentar aqui o Font weight também para deixar mais grossinho adicionar o carrinho para chamar mais atenção certo então beleza pessoal tá feito aqui a nossa página de detalhes genérica né Depois Lembrando que todos
esses valores essas áreas aqui esses dados vão vir lá do nosso backend que vai alimentar isso aqui então a gente tá fazendo só o genérico aqui né você quiser ver com produto aqui é só vir aqui no detalhes acho aqui onde a gente tem a imagem Vamos colocar aqui do iPhone por exemplo do air pads airpod né ó lá ó lá que joia você pode ir colocando aqui ó os itens aqui ó para você ir vendo como é que vai ficar ó XBOX legal aí já dá para ter uma noção de como é que vão
ficar as coisas vou deixar aqui esse do Xbox aqui de padrão Tá Mas vamos deixar o default que é aqui como não tem nenhum produto ainda certo então a nossa página de detalhes está feita olha só que joia então ó nossa navegação né Já temos a página inicial e já temos a página de detalhes funcionando e agora vamos fazer a última para nós que é a página do carrinho né deixar ela esteticamente pronta também para depois a gente fazer as partes aqui é dinâmicas né do carrinho se você quiser assistir o próximo vídeo então da
série aqui fazendo ali a tela do carrinho clica aqui nesse vídeo que tá aparecendo aqui conhece meu curso de criação de aplicativos um forte abraço e até a próxima aula valeu
