CSS Grid e Flexbox: Layouts e Exemplos do Mundo Real

Se você quer ver uma tonelada de conteúdo front-end técnicas modernas de construção de layout convenções internacionais dicas macetes e muito mais então continua assistindo [Música] e fala moçada aqui é o tássio e esse é mais um vídeo do de pw se você tá conhecendo pela primeira vez o nosso canal considere se inscrever e ativar o sininho para não perder nenhum conteúdo E dessa vez trazendo um conteúdo e especialíssimo como você deve já ter visto aí duas horas de conteúdo de front-end construindo layouts dando dicas macetes aconteceu o seguinte o euler entrou em contato com a

gente e ele é um cara que tem background mais de back-end e agora ele tá chegando no front então ele pediu esse auxílio para gente na construção de uma página de um projeto que interessa ele prontamente nós atendemos e com certeza nos propomos Ajudavam então essa tunelada olá tudo que você vai ver agora é um bate-papo entre eu ler e eu na construção dessa página fictícia de um site de delivery o tema que atualmente está muito em alta né eu sei que o vídeo ficou bem extenso então se você já é aqui do canal já

conhece a nossa qualidade já dá o like agora para ajudar na divulgação e se você ainda não conhece ou mesmo se já é daqui e não tem duas horas direto para ficar disponível Salva esse vídeo vai vendo aos pouquinhos porque tem a certeza tem muita dica boa é esse vídeo muita coisa boa mesmo você vai assistir agora você vai conferir então vamos lá moçada duas horas de conteúdo front-end mostrando como criar uma página de um site de líder bom então pessoal estamos aqui para eu ler como eu havia falado antes ele tem underground mais de

back-end e agora tá chegando front em ti pediu uma ajudinha Aí para gente fazer uma coisa que você já vão verem o vídeo e e vamos passar para gente conhecer um pouquinho mais aqui do teu né tudo bem euler-venn clássico agora tudo certo bem tá assim como eu te falei também introdução experiência de repente e vou te conhecer seu trabalho ela talvez daí eu de do multiplex box será que o preço a ideia da gente fazer esse projeto juntos.de peça mentoria sua justamente algo pode nos ajudar bastante principalmente desse Tempo de quarentena que seria uma

página de delivery usando flexbox e outros conceitos e pode passar a melhor eu acho legal com certeza vamos fazer uma página zinho juntos aí acho que para o pessoal canal vai ser muito bom também porque tem muitos conceitos que a gente pode abordar e que na prática a gente tá aqui um agora mas depois que a gente disponibilizar esse vídeo com certeza para ajudar muitas outras pessoas também Que eventualmente podem ter as mesmas dúvidas como faz uma coisa ou outra e a sua vai ser bem legal então tá certo vamos passar então para gente fazer

o projeto então pessoal estou aqui na página do kitsch do bfb se você ainda não conhece dá uma olhada na descrição aí do vídeo que a gente tá falando o link e também tá parecendo um card a gente vai fazer aí esse projetinho com o brb que já tem muitas das coisas que a gente vai precisar usar aqui Principalmente uma arquitetura já montada como mostramos nos vídeos anteriores o look e a gente vai tentar fazer é pegar esse site e essa página em específico a gente vai tentar se inspirar aí para fazer uma coisa mais

ou menos parecida é um site de delivery então aqui a esquerda temos alguns filtros uma busca e é direita mostra os estabelecimentos em si ficou aqui algumas informações é possível entrar Por ver a página de detalhes só que hoje a gente vai fazer somente essa daqui então tem aí conforme e a pessoa escolhe um filtro vários estabelecimentos em baixo o fut normal e tenho detalhe aqui que ele não é responsivo então a gente vai mais ou menos bolada nossa cabeça como vai ficar o responsivo não significando que é a melhor implementação é primão no povo

aqui também pela didática para gente mostrar o maior número de coisas de técnicas de Possibilidade de dentro desse exercício que estamos fazendo um chamar china então essa é a página a gente vai trocar para ela que ainda várias vezes não se preocupa então vamos fazer o seguinte vamos pegar aqui o viés cold e já estamos em uma pastinha vazias em absolutamente nada e vamos explorar aqui o brb conforme já foi explicado em vídeos anteriores então é o direction e como já estamos a pasta só um pontinho e e vamos esperar a clonagem A partir do

momento que está aqui vamos de npm instal e ele vai colocar as nossas dependências então uma vez instalado as todas as dependências vamos agora para o nosso npm start e ele vai liberar aqui o endereço para gente acessar o projeto e já contarei com uma atualização automática então estamos aqui de um lado com o nosso vias cold de o outro o nosso local roxo para começar e essa e aqui do site referência vai ficar Aberto durante todo o tempo como foi combinado previamente aí com euler é a gente vai pegar para fazer juntos e o

mais comum no código mas ele tá vendo aqui a tela todo momento e sempre que ele tirou uma consideração alguma dúvida ele vai falar e aí a quatro mãos a gente vai desenvolvendo esse projetinho aqui dessa página de inspiração do site de delivery acho que a primeira coisa que podemos começar é o próprio index vamo trocar que esse título pode colocar eu Lembro de ver só para dar uma diferenciada salvando aqui e atualizou automaticamente o tá então significa que o nosso lote está rodando bem vou deixar ele aqui embaixo pequenininho só para caso de algum

erro de compilação alguma coisa a gente saber mais o código vai ficar aqui com a tela dividida dessa maneira acho que a primeira coisa que podemos fazer é definir aqui um html inicial que ele teria que o river uma parte central com duas colunas O tipo footer é bem tradicional aí não tem nada fora do comum para esse início para essa estrutura mais ampla vamos usar se ss griss é algo que pelo que o euler me falou ele por enquanto ainda não está tão familiarizado mas vai ser os mais para essa estrutura geral mais ampla

os componentes em si as partes menores as interações vamos fazer tudo com flex-box como falamos alguns vídeos é perfeitamente possível e até desejável e essas duas tecnologias trabalhem em Conjunto para começar só repetindo aí e essa estrutura né que não html teriam reader e um footer é nada demais a parte central e ao principal do nosso documento vai ser o nosso man vamos começar a dar significado desde o início aí as tags do nosso projeto seguindo a convenção comum em todos os vídeos e até do próprio psb vamos usar aqui nem space css e a

nomenclatura bem nem space você já chegou a trabalhar com isso eu ainda não Ainda não não cheguei a usar nenhum space os mais na programação mas para front ainda não nunca falei que você certo então é aqui é a gente até chama de namespace mas é uma coisa bem diferente da programação esse porque é muito mais simples na programação ela tem uma utilidade assim muito mais prática mesmo aqui chama-se de namespace né mas é mais uma convenção de nomes estão presentes a gente vai dar uma classe aqui tem os prefixos que a gente Coloca por

exemplo é letra assim significa que isso daqui é um layout é um meramente essa convenção de prefixo e apesar de chamarem space é bem diferente da programação mesmo então por exemplo aqui pode ser um layout e pode chamar river também não tem problema poderia ser qualquer coisa mas para identificar bem me chamar é líder e dentro da estrutura que a gente usa isso serve para identificar a partir do momento que a gente trabalha com vários Desses prefixos a gente só de ler o nome da classe sabido que aquele não se trata por exemplo a gente

vai trabalhar muito também com componentes então nem desfez do compreender os e então a partir do momento que a gente vai lendo as classes a gente vai começar a entender como essa relação do html com css muito interessante porque são de organização acho que a gente faz e eu mesmo é mais sobre frente identifico muito com Um dupla de padronização de tênis ser tá óleo é bom essa experiência sua você passar isso nos com certeza e essas convenções que a gente está usando são usados assim no mundo inteiro então a partir do momento que você

se acostumar com elas você vai olhar códigos de várias pessoas vai ver a mesma coisa acontecendo os mesmos padrões mesmos convenções e aí fica muito mais fácil de você entender já começou a atuar no projeto entendeu então aqui no footer do Aos também a mesma coisa é no espelho de layout né o l e reter e aqui no meio vamos colocar o lm aí aqui dentro do nosso bolha playzinho aqui o brb temos essa estrutura que também não é aleatória não isso também é uma convenção ela chamada smacks cada pastinha dessa daqui tem o seu

propósito e serve para uma coisa então essa estrutura smacks em casa bem também com o que a gente está fazendo aqui pelo seguinte pode ver Que já temos uma parte de componentes uma parte dele alto aqui no caso você chegou a trabalhar com pré-processadores css e em especial sucesso 8 pouco de argan box eu trabalhei então a parte conceito alguma coisa você tá por dentro sempre podemos então legal porque aqui também a gente usa certo para facilitar o nosso desenvolvimento então por exemplo criamos três aqui ele future man e-reader e dentro então da nossa estrutura

na parte de layout vamos criar Os respectivos arquivos vamos chamar aqui o primeiro de é líder só uma observação é que quando o nome do artigo começa com underline na compilação para css ele não compila esse mesmo arquivo que a gente está fazendo então dentro da nossa estrutura em um único arquivo que não tem a sandra é o principal aqui está eu ponto scss porque nele a gente vai importar a gente está fazendo e aí no final como ele é o único que não tem um underline Um muro no arquivo css eu compro lado entendeu

como a gente trouxe é líder a gente tem que importar esse river tal aí a gente vai criar então o underline é lyman e aí não está aí a gente vai importar ele também e a gente vai criar o footer o edivar maneira vamos recortar o fruto mesmo eles estando vazio a gente já importa que a gente pode trabalhar com eles ali com tranquilidade que sabe que já está funcionando eu trocar aqui para O nosso local host aí eu vou salvar e a gente pode testar o seguinte vou recolher aqui para ficar mais tranquilo aqui

você colocar escrito rico footer tem um snapchat que eu uso que é bem legal que acontece o seguinte isso daqui é interpolação de stringhi com os esta é a mesma coisa que se a gente inscrever-se é livre aqui direto só que a gente usa dessa forma porque isso durante o desenvolvimento traz algumas vantagens e muito provavelmente nesse Nosso exemplo que a gente vai fazer vai dar para mostrar algumas das vantagens de isso daqui mas só para ficar claro é a mesma coisa que escrever o que está escrito aqui tudo bem só para testar tá funcionando

eu vou colocar um background aqui vamos aqui no footer colocar outro g1 oh e vamos no meio colocar o outro ah tá vou salvar todo mundo aqui e tá aí já temos o nosso river coloridinho nosso meio nosso footer já colocamos os Primeiros elementos e daqui a pouco eles vão ficar assim como a gente falou dentro dessa estrutura vão pensar que são três né como a gente colocou aqui o reider amei orca e o fuh ter então é isso que em primeiro lugar a gente vai tentar fazer aqui com css grid tá legal então nós

temos aqui dentro do nosso boyplay o arquivo que é o elemento que aqui a gente faz estilização de elementos diretamente tipo tags nos nas definições que são mais genéricas por Exemplo o nosso bori qual o font family qual o tamanho dele e assim por diante aqui para o nosso caso eu acredito que não vai fazer mal a gente colocar a definição da grid no próprio baile para quem não gosta de fazer isso é possível criar um elemento rapper e atuar colocar agride nesse elemento ever ao invés do é diretamente eu acho que nesse caso não

vai ter problema se a gente vê no meio aí que vai dar alguma coisa a gente troca mas vamos começar a fazer um desse Jeito dentro do css grid tem diversas maneiras para se fazer uma gripe é tipo flex-box e até antes do xbox com css tem diversas maneiras de chegar a resultados e muito eu gosto bastante é uma que a gente praticamente é faz o desenho ask das sessões que a gente vai fazer sabe é muito interessante a gente faz o seguinte a gente tem nosso river aqui por enquanto ela deixar suas cores fortes

aqui só para ficar claro tá aí a gente tem o seguinte tem uma propriedade Quando a gente trabalha com css grid que a gente vai dar um nome para esse componente ou melhor para esse elemento que ela irritou né essa propriedade é um grid águia aqui a gente vai dar o nome que a gente quiser que ele vai ser identificado é seu nome depois que eu matagrade para ficar bem claro não chama de river mesmo aqui no futebol a mesma coisa o grid área vai chamar footer tá pode ser qualquer nome e aqui no meio

vamos Colocar ele diária para chamar mesmo um salvar galera toda nada mudou para impacto ok mas está especificado que o nome deles dentro do vídeo do homem se chama nenhum o fruto e se chama footer e o regra se chama ré aqui no pode a gente vai efetivamente usar essa definição que a gente fez olha que interessante hora aqui a gente vai usar grid-template-areas a gente vai usar as áreas agentes ficou ele aqui chama creed era beleza e aqui a gente vai fazer um Template as quer dizer a gente vai te fazer vai ter impleitar

essas áreas que a gente colocou aqui para facilitar a sentar-se eu vou só passar para próxima linha e olha que interessante o nosso river vamos estipular seguinte olhando aqui o site ou até maximizar o que a gente melhor pode ver o seguinte o nosso ribeiro nosso futuro ter eles ocupam toda a extensão da tela ea parte central o tamanho limitado e fica vazia medida que vai crescendo um conceito de css Grid muito importante é o seguinte a gente trabalha com linhas e colunas aqui é bidimensional a estrutura que a gente vai fazer ao contrário de

flex-box que é unidimensional aqui no css grid a gente trabalha com ambos a gente olhando aqui mais uma vez pode considerar o seguinte aqui deixa eu ver se eu pego uma ferramentinha outra vou pegar essa perna que tira um print rapidinho a gente consegue desenhar ela vamos considerar o seguinte em questão de linhas gostamos Três linhos por líder o meio e o futuro em questão de colunas eu acho que dá para gente considerar que são três colunas uma duas e três entre aspas é uma coluna vazia à esquerda e à direita e a central só

que para você não foi é uma dúvida e geralmente têm que eu e muitas pessoas que quando estuda mais a parte de front fica ou se o ideal da coluna do meio ele sabe que tem resoluções de seguidores hoje que estão bem algumas palavras né pelo menos Fazer comecei a trabalhar com informática já um bom tempo a maioria é 800 por 600 depois quando chegando a 24 eu ia a gente tem monitores mas pensam muito grande para fazer a pessoa experiência das qual seria o maior resolução do conteúdo do centro em sabe que o river

euforia geralmente ocupa tudo mas o centro é uma dúvida que eu tenho feito muitas outras pessoas tenham samsung diz que possa planejado para crescer olha vou te falar que eu acho Que não tem uma resposta única tá vai realmente depender do projeto se a gente pega por exemplo esse que a gente tá mexendo vão pegar essa ferramente de medir aqui essa daqui tem por exemplo 1080 é ao meu ver assim é o número até assim que não se vê muito 1080 nega não tem muito o porquê eu é realmente quando quem tava fazendo layout especificou

viu que dentro da intenção dele era fazer isso e dormir 80 agora se quiser fazer um lápis 160209 Tem regra fixa ainda mais que a gente vai trabalhar com ônibus ali responsivo então maior ou menor que esse tamanho vai ficar legal da pessoa acessar entendeu é uma questão mais de planejamento mesmo de convenções do qual é uma coisa que segue um padrão logo não não não antigamente até tinha né alguns valores fixos e tudo mais mas hoje em dia com a vida é responsivo tá bem livre mesmo então voltando aqui com o nosso vias cold

compartilhar na tela o que que A gente vai fazer dentro do que a gente falou ali de três colunas vai ser três colunas então olha só a gente vê um nome zinho deu um espaço o outro nome o outro nome então vão quebrar a linha aqui vai ser outra coisa aqui vão colocar a gente chamou aqui homem e vamo colocar aqui também espero que não deu algum conflito quase de nome está mas vamos com ele qualquer coisa a gente muda o terceiro a gente abre footer E olha só a primeira vista é uma coisa muito

louca que que tá acontecendo aqui vou até alinhar aqui direitinho que hora que fica mais fácil de perceber olha que a gente tá fazendo a gente tá explicando a seguinte cada linha que a gente quebrou é uma linha da grid mesmo então você três e aqui nas colunas é o número de vezes que a gente repete assinou nas três colunas serão poupados pelo reader a do meio as três coisas vão ser ocupados pelo man e no fundo ter as três Coisas vão ser ocupadas info ter aqui a gente praticamente desenhou agride em forma de ask

tá vendo é a primeira vista é muito estranho mas daqui a pouco você já vai entender melhor para isso funcionar que é que falta a gente fala aqui em bari vai ser um display doente então uma vez estabelecido esses template aires e o display kwid ele agora já está funcionando dentro desse grid que a gente especificou mas aí tem uma coisa muito interessante Oi gente usa wiretapped aries que a gente consegue trabalhar só mexendo com esses nome zinho saque a posição de cada área que a gente definir aqui dando o nome por exemplo esse bem

lembra que ele era centralizado nutella aonde é a terceira parte a primeira se a gente coloca um tanto ele vai ficar o espaço vazio então a gente coloca um pontinho então veja que como parece uma arte ascii mesmo aqui é o reader ocupando tudo aqui é homem que só ocupa o meio os Pontinhos não contam e aqui é o futuro ocupando tudo também simples muito simples aqui no caso se a gente salvar aqui já funcionou a gente tem o river completo só tem a maximizar aqui homem e o footer da a maneira que a gente

especificou mas a gente pode o grid permite que a gente specific ainda mais as configurações do nosso grande tem uma propriedade chamada grimes um simples cólon e que a gente vai especificar o que cada coluna nossa é a Configuração de cada coluna nossa então aqui com o advento do css grid surgiu uma nova unidade css a gente tem um pixel de uma porcentagem um am1 todas essas cool o css grid fr que é o que significa fr é a fração então é uma fração do espaço disponível então se a gente por exemplo coloca aqui não

fr tá um fre1 fr que a gente tá fazendo lembra que a gente está no grid template cólon então a gente está configurado as nossas colunas 1 fr é uma fração do espaço Disponível se a gente coloca três vezes um fr a gente tá falando que cada coluna vai ocupar uma fração do espaço disponível na prática e como se cada uma fosse 33,333% entendeu se a gente salva e inspecione aqui a gente pode ver e mostra apesar que o para se trabalhar com grid firefox é até melhor que um inspetor de gripe firefox é muito

mais completo mas deu para ver ele pelo chrome mesmo que ele faz aquelas linhas e cada um desses tamanho está ocupando a Mesma proporção e aí a gente pode dar o valor que a gente quiser vamos supor que na do meio a gente quisesse sem fixos por exemplos passar a gente salvar e fica pequenininho da autora do tamanho 100 pixels tá vendo a gente pode misturar unidades aqui e a gente tem aqui um arquivo chamado as variáveis tá e dentre outras coisas a gente já tem uma variável para ser usada justamente em casos como essa

que a gente tem uma especificação de uma largura total vamos Colocar aqui 1200 alguma coisa assim mas é só para mim ver os de estudos mesmo possibilidades depois que a gente começa a analisar melhor aqui a gente vai ver se realmente essa largura vai ser apropriada ou não o importante é a gente fica com elas punível então por exemplo e aqui a gente pode colocar global max weber salvando aqui ele ficou com o global max willian aqui se a gente redimensionar pode ver que é justamente aquele 1200 que a gente especificou Quando quando a tela

tá menor me deu direito para ver porque tava menor que 1.200 né mas nesse caso ficou dessa maneira como a gente colocou lá e aí tem uma cetim aqui que é o seguinte é lembrando que a gente vai trabalhar com web design responsivo né e quando se trata do responsivo comumente as coisas ficam empilhadas não uma em cima da outra então quando tiver abaixo desse 1200 e ele vai ficar simplesmente empilhados e quando tiver acima vai Ficar da maneira que a gente tá configurando aqui uma das maneiras a gente garantir isso é colocar essa configuração

da gente tô fazendo dentro de uma mídia quer então a gente coloca uma mídia quiere e fala que só a partir daquele ponto vai tá valendo aqui a gente também tem um arquivo de break-point que a gente tem alguns pontos definidos tá é uma pergunta que você fez e esses não são tamanhos vamos ver assim padrão ou Tamanho certos entre aspas são alguns tamanhos sugeridos a gente já até fez um vídeo a esse respeito de como usar break-points da maneira certa tô colocando inclusive no card aí para quem tiver assistindo dá uma olhada também mas

é que a gente consegue trabalhar usando o sucesso esse arquivo com o nomes então por exemplo esse 1200 a gente colocou a gente pode chamar ele de lá de ar se a gente for fazer uma mídia keri processo permite a gente alinhar Aqui a gente pode colocar o seguinte o nome dele é large aqui então esse mix em que a gente tá fazendo aqui point simplesmente vai ser compilado com uma sintaxe de mídia que ao e normal usando o valor de 1.200 a gente poderia por exemplo pegar tudo isso daqui e falar que só a

partir de 1.200 vai valer o grid antes disso não vai valer ir como padrão dos navegadores é empilhar tudo mesmo e vai ficar apropriado do mundo da até Se a gente quiser ser mais maroto e tudo mais fazer o seguinte a gente pode colocar isso tudo aqui para fora tá porque o que que acontece isso tudo aqui só vale se tiver uns playbreach então a gente pode por uma definição anterior tá que não vai atrapalhar em nada como só a partir do 1200 dá um super glide é que isso daqui vai começar a ser interpretado

aí a gente fica com uma mídia aquela menorzinha fica mais fácil de ler e as coisas continuam funcionando Tranquila mexe então eu levo vamos fazer o seguinte vamos começar aí a nossa estilização para o hiper fazer assim mais ou menos como a gente encontra aqui foi administrada a gente dá uma olhada ele tem essa cozinha e acho que a gente dá para pegar ela mesmo e vamos pressionar aqui olha qual cor é essa a gente pode no nosso arquivo de variáveis chegar aqui e criar um novo array deixou maximizar aqui um pouquinho pra ficar mais

fácil da gente ver chamado Projectors e pra facilitar não é o melhor jeito aí de nomear variáveis inclusive está prometido para o canal um vídeo que vai explicar direitinho como nomeia mas vamos colocar aqui para facilitar é associada a cor ordens por exemplo que é que a cor que a gente quer vamos aproveitar que a gente já tá aqui para esse verde e aí se ele tem e a gente pode pegar a ser um brindar só que a gente está especificando o variáveis Para serem usados posteriormente esse a gente salva aqui nada acontece porque a

gente tá só especificando refeição isso é uma fase definição e isso daqui não tem saída no css né no nosso arquivo style a gente tem vários luz dentro do seu do root isso é um grupo né pegando as linguagens de programação e mesmo ele faz um loop naquilo que a gente especificou ali e a gente consegue pegar como se fossem o índice o valor de uma rede entendeu então a gente pega aqui Por exemplo uma repetir mais um a gente chamou de todos e o que é que a gente fez ficou aqui a gente trabalhando

com variáveis iss você chegou a ver legal a gente simplesmente tá fazendo o quê então a gente pega tudo que tá aqui e cria variáveis iss uma para cada valor daquele a rede vamos dar uma olhadinha no css que está sendo compilado aqui dentro do bfb se a gente vier a gente consegue abrir só para infectar sendo compilado aqui aqueles Novos que a gente deu orange green e blue dark ele tá criando aqui a variável color orange color green color green dark qual o valor que a gente passou a partir de agora a gente pode

usar essas coisas aqui no nosso código com mais tranquilidade e no nosso reader ele tá essa cor só que a gente vai usar uma variável color orange já que a gente criou o footer tudo bem que ele tem duas camadas vamos colocar a segunda duas partes mas vamos começar colocando color De mim e homem a gente não pegou acordou bem vamos pegar aqui de e essa cor pode ser até do próprio body né quem tiver aqui em ela mesmo a gente pode ser feito especificar background-color a vão só preencher ali né o nosso a reino

é bom complementar com essa cor então ele tá aqui verbos essa cor vamos chamar de e por essa fácil acabar depois a gente ia tomar um melhor e aqui a gente pode colocar lá olhando aqui no nosso projeto como Salvar ele já pegou aquela coisinha ele homem não vai ter nenhuma cor que como a gente pode ver aqui é vazado aqui né ele não tem uma roupa da sua cor de fundo mas por enquanto vamos deixar esse rostinho aqui só pra gente conseguir identificar ele melhor quase a gente tiver trabalhando com a utilização dele a

gente tira esse roxo então se a gente veio aqui no nosso vida a gente pode colocar e o raio dele vamos ver aqui 70 tem um raio de 70 vamos colocar aqui Então seria no caso você tenta pixels né aí de o youtube fb a gente tem uma função luzinha também já função zinha ren o que que ela faz ela pega um valor que a gente passa e converte para o equivalente a unidades quem a gente simplesmente coloca aqui em e passa 70 que o equivalente a 70 pixel se transformam em si a gente salvar

aqui vou só te mostrar e esse 70 a gente tem uma surra boa aqui em 4.375 renda Entendeu esse 70 pixels e tal essa função serve para gente fazer essa conversão aí sem dificuldade nenhuma a gente pode continuar pensando em pixels só que na prática ele vai colocar a unidade entre a gente legal que é realizado utilizando essa estrutura mayor e ontem a sua organização tenha organização de cliente mais a gente sabe que eu está disponível para essa estrutura também no frot então esse é um Projeto pa o quê eu gostei muito de ter conhecido

com certeza apesar de não ter nada assim oficial né não é uma estrutura oficial essa gente usa mas como são várias convenções atuando juntas né são convenções assim que viraram convenções não foi à toa elas realmente ajudam bastante e usando várias delas junto pode ver que trabalho foi muito melhor não tem nenhuma proibição em uma Restrição e elementos que são filhos de grid negri titãs também ser ingrids eles mesmos é possível fazer uma grande dentro da outra então esse elemento nada impede a gente falar que o display dele vai ser leite assim como flex-box também

quando a gente cria um flex-container que tem os filhos na o seu ex ai tem escada flex aqui tem também pode são flex-container não tenho nenhuma restrição quanto a esse ingrid é a mesma coisa e aí eu pensei em fazer isso pelo Seguinte se a gente dá uma olhada aqui apesar de a extensão do river se total e ele está olá aqui é o conteúdo dele esse é restrito aqui tem diversas técnicas que a gente pode usar para fazer isso tá inclusive provavelmente a gente vai usar a outra no footer porque o futuro é diferenciado

né ele tem aqui essa cor mais escura ele tem como se fosse duas camadas né a gente provavelmente outra técnica aqui que a gente faz a gente Colocou aquele agride né a gente vai especificar os grid-template-columns quer dizer as colunas dele global max weber ele só vai ter uma coluna e vai ser o equivalente ao que a gente colocou na variável que foi 1200 só me ligado né a gente salvar aqui nada aconteceu mas ele liberou para gente a possibilidade de fazer o seguinte em grid tal como em flex-box a gente tem algumas propriedades que

ajuda a gente a posicionar conteúdo então aqui no grid a Gente tem justify-content que a gente pode pôr o valor sempre ao salvar olha o que aconteceu apesar dele o beto ele agora tá centralizado naquela largura máximo que a gente fez o até colocar para inspecionar pra gente ver direitinho aqui alá pode ver que em determinadas relações menores ele dá uma escapada né então acho que pode a gente fazer tal como fez ali no grid principal a gente faz um break-point aqui e o solar de rápido que é o que a gente Tinha especificado e

só a partir disso ele vai receber o medir cravo no influenciar aqui as demais viu se a gente salvar vou até ativar o modo aqui de novo para ficar mais fácil da gente ficar redimensionando ele aqui menorzinho pode ver que ele não escapa nada só que a partir do momento que ele fica maior ele fica contido a partir daquele 1200 pixels acho que para o reader apesar de ter essas elementos internos né mas o aparência do que dele Se acha que é por enquanto a gente pode ficar por aqui e passar para o futuro aqui

no footer eu acho que dá para gente dar uma técnica diferente inclusive colocando o o o flex poder vamos trabalhar com flex como a gente comentou no início não tem importância nenhuma o agente trabalhar tanto com vocês esse vídeo quanto complexa ao mesmo tempo pelo contrário é desejável que isso aconteça e aí na própria estrutura html aqui no nosso Index a gente vai complementar ele porque como a gente viu aqui ele tem duas camadas né uma superior que tem algumas informações e a de baixo que é o copo white vamos colocar um filho dele que

passou uma secção tava só uma sessão do footer o nome que a gente vai dar é dentro dessa coleção bem que eu havia comentado com você dentro dessa convenção o que acontece os elementos que são filhos para ir de serem identificados melhor eles recebem a Combinação dos seguintes se repete aqui o nome ele foi ter tá aí você dá dois underline e o nome que você quer vamos chamar para eles pedirem alguma coisa assim que aquela parte mais clara aqui a gente pode fazer uma outras action e aqui o nome da classe a gente e

ele fruto e o outro nome que a gente vai dar por exemplo a gente pode chamar de quatro ai dentro dessa começam bem a gente tem um elemento ou componente um layout os elementos filho dele é sério Esse underline underline a primeira vista só a gente olhar tanto se a gente olhar no html quanto se olhar no css a gente já começa a interpretar a inferir qual é a hierarquia da coisa por exemplo a gente vai abrir que o iphone ter igualmente fica muito melhor de visualizar exatamente exatamente ela é o nome qual que é

igual o senti muita gente está acostumado sim exatamente então aqui por exemplo no céus uma das coisas que lhe permite aninhamento de Regras aqui a gente pode escrever ele fruter e aqui a gente amorim foi né a gente poderia fazer aqui fora desse jeito só que uma coisa bem legal é que o césar ativamente tem uma integração com essa convenção de nomenclatura bem e e vamos aquele e comercial que é o repetidor de elemento o coloca dois underline e ufo ele já vai entender perfeitamente que a gente tá falando l footer andré laine isso então

a gente consegue colocar alinhado e chamando dos Nomes que a gente deu aqui para fazer um código bem mais centrado e mais enxuto só para gente testar vamos fazer aquele negócio de black brown vão colocar 1 deckblatt aqui uma cor bem chamativa aqui background-color então ele chama jeans e quatro haiti é só fechar aqui para ter acesso ainda que está que eu vou colocar nenhum fui e vamos colocar cope with vamos salvar todo mundo aqui e tá aí e isso e quatro haiti dentro do ruter pegando as cores certinho aí no Caso a gente trabalhando

com flex né como a gente consegue ver aqui é um em cima do outro então o que a gente faz flex-direction cólon ao salvar ou fica em cima do outro dentro do próprio ter esse background que a gente deu profundo trem e a verdade é para o curso né a outra cor que a gente tinha colocado é o blindar que a gente salvar a gente já começa a ter uma estrutura que lembra esse fruta que tem intenção de repente Aliás esse próprio greenville pode continuar lá em cima porque acho que não vai fazer diferença né

apesar de ocupar mesmo o futuro inteiro com essa cores faz carinho escuro vamos ver que a altura desse que a gente chama de muito for né que é o carrinho vão por 200 de altura vai 195 por que não disse assim usando aquela nossa função zinha tá só que é a partir daquele nosso black point o bom é que a gente pode alinhar inclusive a mídia quer alguns não gostam Muito porque acaba acontecendo uma certa repetição disso daqui vamos supor a medida que vai crescendo na estrutura a gente vai repetir isso daqui em vários pontos

só que qual é a grande vantagem disso fica tudo concentrado numa elemento só quando você tem uma visão topográfica você fala assim ah eu vou mexer aqui nesse info tudo o que vai acontecer com esse rico você já sabe e quando você coloca isso daqui fora dependendo do tamanho só que ele ficava Lá para baixo ou para cima da cadeira definição entender isso daqui você quer mexer no info tudo tá aqui aí você fecha você quer mexer no copyright toda a definição tá aqui isso facilita bastante mas não teria vamos salvar pode ver que ele

ficou pequenininho deixou habilitar aqui tirar um pouquinho de zoom aqui que aí a gente consegue emular o 1200 aqui se identificar maximizando a janela em si tá aqui antes de 1.200 fica tudo em cima do outro e como é o padrão dos Próximos e a partir disso começa a valer pelas nossas definições aqui é o que a gente chamou de copyright ele tem uma altura de 75 é isso que a gente já sabe que é no break point também e o nosso rite você se acontecer olhando nosso projeto está aí pegando o gancho ainda daquela

pergunta que você fez se teriam padrão aqui para a centralização muitas pessoas também ficou falar dúvida de qual é um mínimo a desenvolver quanto trabalha com design Responsivo até não muito tempo atrás era 320 tá 320 pixels era o mínimo que a gente deveria se preocupar hoje em dia aparece que já tá quase consolidado que já podemos ir no 360 tá em função e do avanço da tecnologia dos aparelhos etc 360 ao mínimo abaixo não é preciso se preocupar alguns tão dizendo até 375 legal saiu dar uma dor da minha tá porque realmente abaixo determinar

o tamanho você a depender de como é o componente é muito complicado de Trabalhar com ele faz um planejamento para que ele não perca o que ele tem a oferecer ao visitante felizmente aí com o tempo está meio mínimo está aumentando alguns dizem 375 vamos ficar por enquanto 360 sem por via das dúvidas até isso ficar consolidado mesmo quem tiver assistindo ao vídeo aí pode avisar para o seu cliente que é 360 em aqui a gente pode também tal como o líder leva fazer um próprio quando eu ficar centrale sardinha né então aqui Que a

gente poderia fazer dentro de cada um desses a gente podia ter um elemento filho se ela colocar uma dica que eu estou uma classe seu conteúdo do elemento infnfe e esse conteúdo a gente alimentária está entendeu aqui a gente teria que ter a mesma coisa né usar a mesma técnica que encontra tipo um contente e aqui dentro no próprio footer acabaria que a gente repetiria né a que info costa entre a gente imitaria com matizes e contente que ele estaria com Mais vida a gente pode economizar isso chamando eles com a mesma classe aqui eu

vou pegar ele tá dentro de ali footer tá seguindo a convenção lá do bem ele ser chamado por exemplo contém e aí no nosso footer o nosso filho compre tem um matsuei daquela nossa variável ainda não funcionou porque se a gente pressionar o código deu certo ele está sendo limitado tá vendo mas o que que acontece a gente tem que falar que ele é centralizado então A imagem acima e abaixo 10 que a esquerda direito alto lembrando que a gente tem que por isso que só vai começar a valer dentro daquele nosso break point e

é isso visualmente ficou exatamente a mesma coisa que o líder só usamos uma técnica um pouco diferente em função das próprias características aí do futuro então depois disso acho que a gente pode passar por mim vou até recolher aqui o fruta vou recolher o reader para a gente se concentrar no Meio como a gente viu ele tem duas partes ali doenças divisões né o meu quartel do principal e a outra é a parte de busca filtros etc então vai ter uma sessão aqui dentro umas action e a gente pode chamar de por exemplo l compra

vai aqui uma peculiaridade tanto para componentes tanto para layouts tem aquela convenção bem quando é filho direto a gente coloca onde ela underline quando não tem isso significa que a é só um filho direto ele não Necessariamente tem uma relação direta isso aqui falando genericamente tá nesse caso em especial não teria problema nenhum ser ellen e conta vamos só usar aqui dessa forma para dar uma variade nha de nomenclatura de técnicas e ficar um pouquinho mais rico mas em projetos do mundo real é bom fixar aí uma outra coisa para não ter uma padronização melhor

mesmo nesses casos oficiais inevitavelmente vai acontecer de você tem que usar ambos não tem jeito e aí Semanticamente eu acredito que isso daqui seja o elemento a parte né seja o a site então eu acho que a gente pode vir aqui colocaram a side e chamar de hélia site aí ficou uma sessão e o a site uma tá esteve aqui ontem e a gente agora vai criar esses dois caras então vamos dar nossa estrutura criar aqui o contente é lhe convém e a gente vai criar também ou a site e lembrando que a gente também

vai ter que nós estar eu e importar esses caras Vão fazer duas cópias e fazer conta e o a cidade só pra gente ver se funcionou vamos colocar aquele background aqui esquisitíssimo vamos definir uma cor qualquer para um marcou qualquer do outro ser legal só para ver se está congelando direitinho e legal pegou os elementos está importando um tá amarelo e o outro tá esse rosinha claro que tá funcionando direitinho então passando aqui para o nosso bem ele também esperar um grid então spray grafite vamos Trabalhar também com as áreas aqui para o contente vamos

falar que sua creed área né o nome que a gente vai dar pode ser contente mesmo e ir para o nosso a side a nossa grid área vai ser a site e aí efetivamente a gente pode começar a trabalhar com grid-template-areas vamos especificar o seguinte ó essa configurar e o que que ela tá dizendo a gente vai ter a esquerda o a side e a direita o contrato é a exatamente que aconteceu mas a gente quer especificar melhor a Maneira como se dar a gente vem no nosso grid-template-columns ea definição das colunas vamos ver aqui

quanto que é o tamanho 250 light 150 a nossa primeira coluna vai ter 250 e quanto que vai ter segunda todo o espaço restante um fr pode ver que o a side ficou 250 e todo o espaço restante que ele ficava contente é até as primeira vez que a gente vê é até complicado porque é tão fácil quero ver se ela assim poxa mas como é que você vai funcionar você desenha com as Que negócio com seguro tá meio na casa da função é bom demais acho que seria conveniente se a gente tivesse uma configuração

de rosto também porque se a gente dá uma olhada aqui ele não pega todo o tamanho o açaí dele para por aqui e continua o contente se a gente não faz uma definição de grosso por exemplo eu vou no contente aqui tá eu vou colocar um monte de conteúdo na mesma proporção aquele que um cresce o cresce né e aí Chega uma hora em que nosso açaí de não vai poder mais crescer segundo layout idealizado da mesma forma a gente pode fazer grid-template cólon a gente também pode fazer grid-template-rows e aí funciona da mesma forma

se a gente colocar as por exemplo ou fre1 fr que que a gente tá falando na definição das linhas cada linha vai ocupar metade mas tem uma outra coisa a gente pode usar que acho que é mais eficiente que é uma função chama mimex tá isso é novidade Também não css que simplesmente a gente passa o valor mínimo o máximo isso é até o macete que a gente pode usar que é o seguinte o valor mínimo que a gente quer zero e o máximo auto-sugestao tamanho do conteúdo exatamente mas tem uma outra coisa também segunda

a gente consegue ver aqui tem uma hora que ele vai parar e essa configuração de voos até melhor se a gente fizer o seguinte um pontinho aqui porque o que que acontece o a side Segundo a nossa configuração vai ficar do tamanho do conteúdo e abaixo disso nada e aí o que que acontece o nosso site referência não tem a parte bobo só que o nosso vai ter então isso facilita também nessa parte aqui por exemplo se a gente colocar um tamanho menor ele continua com a nossa definição mas a gente que é que isso

aconteça somente depois o break-point a gente coloca aqui o nosso playback o ok então aqui vem o contente e o açaí Mas veja bem imaginando aqui o léo timobo assim funcionaria ficaria ok primeiro vídeo conteúdo e depois viria o a site que são esses controles aqui mas pensando em um cenário mais real de repente fosse mais interessante que primeiro e essas controles e depois do conteúdo se fosse se a gente tivesse usando flex-box a gente poderia mexer com a propriedade order só que como não é o caso antes de bater se break-point a gente pode

ter grid-template aires e que Vai estar especificado aqui vai ser somente uma coluna com o a side e abaixo de vai ver o nosso contente quando a gente salva aqui a não funcionar ainda pelo seguinte até então antes dessa definição por nossos play grid estava somente depois de boi point como agora a gente também está usando grite antes vamo tirar daqui jogar para cá e aí ao salvar troca-se o a site com cotas então vem dessa maneira e quando bate mas o break-point ele já troca Conforme as instruções do período de tempo indicadas aqui só

pensando no cenário futuro da apesar de que hoje iremos fazer sua mente essa página mas pensando no celular o futuro pode o que daria para fazer a gente pode pegar fazer uma convenção por exemplo eu não pode pode ter uma classe especial vamos colocar por exemplo e space single e aí se a gente coloca o meu comercial aqui a gente tá repetindo alemã a gente vai fazer uma regra para quando essa classe Precederam o alimento como ela é o primeiro filho de pobre a gente tá falando assim quando eu era uma classe essa classe embora

alguma coisa vai acontecer o que que a gente pode fazer aqui grid-template-areas que vai abordar e contém e o açaí e aí para completar essa configuração que a gente tá dando fui tentante colo que ficaria um f oi e 250 perceba que é exatamente o contrário daqui aqui é 250 fr aqui é um fr-250 aqui pelo próprio deve tudo a Gente consegue injetar rapidinho só para testar tão space single ele faz essa troca desculpa que não é repeti a qren e agora sim se embora tiver essa classe o conta gente vai ficar esquerda se não

tiver direito e isso já pensando assim nas outras páginas etc hoje a gente não vai usar muito isso no vídeo só que já podemos até deixar aí que já fica pronto para eventuais stop grátis então escolhendo aqui o que é mais tranquilo a gente trabalhar que é o a side vamos Aqui nele e vamos começar a dar as nossas e estilização para começar o bebe o áudio dele e não é esse a gente pode colocar aqui underground branca tá e já vamos trabalhar também com o pede né para não ficar aquele conteúdo grudado temos aqui

uma variável a gente dá uma olhada no nosso arquivo que ele define o tamanho base para a trabalhar com todos os tamanhos do site é interessante você ter isso tecnicamente ser chamado de saúde módulo Então a gente especificou isso daqui é meio que arbitrário vai aí do seu projeto no dfb temos um 30 aqui só para ter um valor mesmo quando a gente tem esse valor de módulo muitas coisas que a gente define tamanhas proporções dimensões a gente pode fazer baseado nisso então por exemplo aqui a gente pode falar que nosso perry tem no tamanho

desse módulo da gente salvar aqui o nosso açaí já começa a tomar uma forma tu perde enfim a gente viu ele Também que ele tem body rádio e a gente tem aqui também se a gente máquinas variáveis a gente não pode o reizinho aqui acho que a gente pode com 10 aqui uma coisa mais um pouco mais ele dente então a gente pode colocar que o border williams é justamente os global regions só dá uma organizada aqui salvar e aqui ficou pouco estranho deixa eu colocar os em pó o quê porque no momento a gente

tá com aquele cocho lá né vamos tirar aquele Roxo aqui rebeca purple some e aí já fica a cozinha e cia e aí para coisa não ficar tão grudadinho assim que que a gente pode fazer a gente pega na nossa grid principal que tá lá em elementos e tem uma propriedade de grid que é muito interessante também que a gente consegue dar um espacinho entre os elementos de grid o nome dela é grid-gap então vamos foi a single the gap a gente pode pôr o valor que quiser e ele vai desse espacinho só que a

gente também consegue Trabalhar que só com colunas ou linhas então no caso a gente quer trabalhar só na parte de linhas então a gente pode dar um grilo e o login e aí no caso a gente pode usar exatamente aquele mesmo tamanho de um módulo que seja global modo o site se a gente dá uma olhada ele deu esse espacinho de gap aqui ó tá vendo ele separou-se a gente ao mental ele não tá mais grudado então vamos começar e a parte de morro em si vou tirar um Pouquinho de zoom como planejado a saúde

em primeiro encontro de depois só que claro como é possível a gente ver aqui é muito extenso não daria para pessoa ver tudo isso só depois chegar aos restaurantes em si então acho que uma solução não sei se a mais eficiente mas uma rapidinho aqui para gente trabalhar seria o seguinte aqui a gente tem uma só sai e a gente pode colocar que ele tem o max heart de 200 por exemplo como ver flor alto caso ele passe desça e valor Da altura dele o maior que 200 ele coloca uma barriga de uma laje isso

a gente vai ficar com ele no roubo e quando atingir o nosso break-point a gente pode cancelar esse marca nesse mais rápido e aí realmente a gente pode ter ele tão extenso quanto isso daqui aqui de repente colocar também o mais um botton só perdendo ficar tão grudada a gente pode pôr também do do do módulo sai e quando se tratar de break-point a gente pode até E a gente coloca que imagem batom era o especificado em harvard não queler doso sonhar só organizar tinha olhado alfabeto vamos salvar aqui que aí a gente já tem

meio que isso funcionar vou dar um zoom aqui e alterar o conteúdo do açaí só pra gente ver na prática a altura máxima dele é 200 caso passe ele coloca uma barrinha de rolagem e aí para não ficar só esse textinho aqui na nossa saúde já vamos começar a fazer os componentes propriamente ditos que a Gente já vai dando um visual mais próximo aí o resultado penal dentre as várias possibilidades de se fazer isso daqui semanticamente uma delas seria o seguinte primeiramente vamos criar aqui o nosso elemento vamos chamar de filtro né porque cada um

desses aqui é como se fosse um filtro que a pessoa vai clicar para alterar aqui as opções então aqui na nossa parte de componentes dessa vez a partir de componentes vamos criar ou se No filter e lembrando esses e dentro daquele namespaces envia com componente aqui a gente coloca filter vamos só colocar uma cor qualquer aqui para a gente ter paz ele tá pegando mesmo e no nosso html um sefip vão começar com qualquer elemento mas a gente vai aprimorar semântica daqui a pouco e eu ok a gente falou que esses e fio sorteio underground

vermelho e tá funcionando direitinho entretanto para se chegar a esse exato visual aqui No caso eu pensei que cada um seria da seguinte maneira deixa eu tirar aqui a nossa ferramentinha esse isso seria o filter isso sem filtro e assim por diante ele seria composto pelo seu título zinho e as opções ali vem na mente concorrentes mesmo bem na linha de componentes que facilita bastante para gente ter os componentes aí na manga e depois montar as páginas fazendo a associação entre os componentes né fazendo essa composição eu acredito que Não teria problema não feriria a

semântica se a gente colocasse aqui fio certo porque é isso vai nos possibilitar trabalhar com o legends que seria justamente o nome que a gente dá isso então aqui vamos colocar aqui um nome a classe dele pode ser ser filtro lê gente aqui a gente já pode dar um nome por exemplo forma de pagamento pode ser até na mesma linha que não faz diferença tá apenas lá que a tela dividida por um pouquinho ruim de ver mas ele tá aqui o Elemento e aquecer em label1 label2 próprio nome zinho e ele faz ação que a

gente quer você já vai ver daqui a pouquinho então esse label ele pode ter aqui uma classe oi e a exatamente um item né desse elemento que a gente está fazendo então é um filter aids e aí finalmente vem o nosso input ativação checkbox pensando já um formulário oficialmente ele teria um nome na apesar de que aqui não precisaria e o id justamente para esse For a gente tem que casar que o mesmo e dei o fora para ele funcionar só pra gente fazer um teste aqui vamos colocar só o ar claro que missionários no

mundo real coloca o nome um pouquinho mais descritivo só para dar a que eu acho realmente significa com input elas acho que a gente pode até envolver ele tinha um fã e que teria uma classe se eu tam o cheque que isso vai facilitar para gente trabalhar com ele depois envolver ele com mais uma classe exposição e Talvez aqui uma mulher por uma espécie de rapper né para opção em cinco vamos supor que uma opção que de forma de pagamento dinheiro seria filter label tá vou maximizar o editor aqui para dar uma ideia geral porque

divididinha sim pode ter ficado um pouco confuso mas a estrutura é essa aqui um filme que seria formas de pagamento e aí teria seus vários itens tanto que para repetir por exemplo a gente pode pegar aqui e colocar o próximo e aí por exemplo Cartão céu e para isso aparecer lógico que o ideia aqui e o forte em que se outro mas ele tem que coincidir para cada uma das opções salvando aqui a gente já consegue ver alguma coisa aqui eu vou trocar de mobo para desktop ainda dentro desse quadradinho que a gente consegue interagir

aí e venha a real utilidade do leilão four e de especificar o id quando a gente clica no próprio nome ele consegue ter a de conte xbox não precisa De clicar exatamente aqui dentro dele e outra dica é justamente o leibo ele envolve o próprio elemento do formulário esse daí é bastante comum a gente ver o leibo como irmão do elemento do formulário mas é mais interessante que ele envolva ele seja um rapper por elementos formulário alguns projetos eu já de que o rei deu bem antes do elemento interessante que crio o elemento sim é

interessante que ele rouba é dependendo da técnica vi E você vai usar por exemplo eu já vi alguns casos de inputs que usam material para dar o seu visual eles não estacionamentos são assim eles costumam ser irmãos mesmo que tem uma liberdade na hora de estilização mas a gente realmente tiver como requisito do projeto o html mais semântico e até mesmo acessibilidade eu recomendo que o label envolva o campo do formulário ea ixi agora a gente estilizar esse cara para ele ficar mais ou menos estão aqui Né a primeira coisa não precisa de se vai

por áudio aqui ele não vai ter a borda e não vai ter pédico vamos salvar só para ver no caso ele vai ser um display flex tá e o direction dele vai ser como porque os elementos ficam uns abaixo dos outros a gente tem um filho que a gente viu lá que eu né gente e é o título segure na forma de pagamento que ele tem o border-bottom de um pixel sólido e aí é um cinza é como se a gente consegue descobrir que Cor é essa 73 73 73 vamos adicionar lá no nosso a

reizinho de cores e aí a gente pode chamar ele aqui colo aí ele vai ser um display inline-block uma margem zinha para não ficar tão grudada no pessoal mas um botton a questão do módulo é legal pelo seguinte por exemplo a gente coloca aquilo que a gente quer e a gente trabalha em cima desse tamanho de um módulo então por exemplo eu quero que a margem botam dele seja meio módulo a gente vai fazer esse tipo de cálculo Aqui dentro césar entendeu tarde e isso aí tomando esse tamanho de um módulo por base e colocando

dividido ou multiplicado coisas assim o layout em se ele fica mais consistente porque um tamanho de base só foi usado para montar tudo a mente fica mais interessante acho que um pezinho também e e se a gente for parar para ver ele tem um with 100 porcento porque ele ocupa tudo aquilo lá vamos salvar aqui e aquele ficou desse Jeito um pouco estranho só que se a gente crescer ele aqui ele fica bem parecidinho já com que a gente consegue encontrar claro que não terminou vamos continuar no seguinte aqui a gente tento aí tá é

interessante que ele tem mais um botton que ela 10 pizza alguma coisa o seguinte aí pode ver vou até dá um zoom aqui de novo tá deixa eu tirar para dar para ver a diferença aqui é sem e a tia como então a gente dica já deu uma diferencinha e aqui tem um truquezinho Muito legal que é o seguinte a gente inspecionar aqui todos eles têm só mais um boto certo é o último quando a gente olha para o layout se o último também tiver ele vai ter um espacinho a mais do que deveria ver

como não tem ninguém ele é o último cara quando ele chega aqui ele dá esse espaço um pouco inconveniente tá vendo então isso ss o que que a gente consegue fazer a gente quer aplicar essa regra aí a gente usa comercial só para repetir Esse cara que tal a gente vai aplicar essa regra só quando não for o último cara leste-oeste então ele vai aplicar isso em todo mundo menos no tira ótimo olha ela tá vendo aquele laranjinha o margem também o último não tenho um paciente coloca essa aqui é muito legal então acredita que

já esteja aqui bem parecido do que realmente é de repente aqui parece que é um cinza um pouco mais clarinho talvez o tamanho de texto menor só que sinceramente tá E é melhor desse jeito e aí acho que a gente pode usar uma técnica parecida com essa daqui ó no próprio filter porque como a gente vai ter vários aqui entendeu a gente vai dar uma margem aqui ok google molho size - por último por exemplo vamos voltar aqui no html ou maximizar para ficar mais interessantes a gente visualizar esse daqui por exemplo vamos criar mais

um vou cortar mais cara e aqui vamos lá tipo de entrega tipo de entrega e aqui primeiro Vai ser delivery e o segundo vai ser retirar lembrando que no cenário do mundo real a gente tem que igualar aqui como já tenho aí eu gravo um sim e um de ele criou dentro daquela nossa limitação do tamanho porque a gente colocou tirando pouquinhos um só para gente ver aqui manda lado aí deixa eu voltar para o mundo aqui pra gente ver quando tiver pequenininho o cara vai enxergar independente que conta as opções aqui ele vai ver

algumas primeiro e saber que Tem mais enrolar para fazer a sua escolho no momento que eles tiveram desktop vai ficar esquerda tal como aqui pe oi aqui é só questão de repetir com todas as opções que tenham aqui depois a gente pode ir até copiar e colar mais alguma coisa mas a estrutura é essa daqui com esses pouco já deu para ver que está funcionando ele já respeita aquele que a gente colocou e aí a sua casa de colocar mais opções conforme Seja aí a página em questão do site delivery então no próprio contente acho

que já dá para gente começar a passar aqui para o próprio card do restaurante em circo pensando aqui vamos fazer aquela nossa divisão também só pra gente fazer um pequeno planejamento antes né então aqui eu pensei no seguinte a gente pode trabalhar com flex também como se trata de um componente menor dentro desse card aqui seria uma divisão seria próprio logo aqui seria uma outra Divisão de seriam as informações e aqui as interações e dá mais informações que aí se a gente coloca esse cara aqui o fluxbox a gente vai ter esses três flex a

entender dentro em que poderemos trabalhar aí manipulando a sua posição no morro e fazendo e ficar assim quando chegar na desktop como e evite calar é trocado de um conteúdo qualquer melhor forma é na prática é com o tempo assim com a experiência gente acaba e chegando no meio termo interessante mas não tem Uma regra fixa assim não tem o certo e o errado né com o tempo de decodificação meio que encontra na padrões e lembrando de projetos anteriores feitos e chegando a meios-termos interesse próprio saúde e prática mas é questão de prática entendeu porque

também não seria errado fazer mais ou menos divisões aqui depende do resultado que quer alcançar entendeu e também é muito comum a gente por exemplo a gente tá fazendo esse planejamento anterior mas vai chegar lá Na hora a gente leva nós mas acho e aí de uma outra divisão para um posicionamento mais refinado e tudo mais é comum de acontecer entendeu aqui a gente tá fazendo um planejamento para eliminar para tentar encontrar se a gente precisa rever isso não tem problema nenhum também não e aí por exemplo aqui dentro a gente poderia aqui seria um

componente que abarcaria ícones aqui título ele na verdade isso daqui restaurante bar marmitex e lembra mais Tipo assim mas tags né de repente pode fazer umas técnicas aqui ao invés de um texto corrido inclusive eu ia sugerir o seguinte também isso daqui ó aceita o ponto não parece muito mais que é uma um outro ícone aqui porque é isso aqui são as características né então perigo entrega o tempo médio tirado o aceita o cupom parece que faz parte desse grupo vai ficar afastado às vezes só a outra chamada somente atenção né o cupom logo o

que é a mesma linha para pensar sendo Que a gente de repente pode ser uma coisinha diferenciada nele que também alguma coisa assim outra sugestão que ia dar de melhoria também é que aqui tu eu acho muito confuso esse trecho porque o status de aberto parece um botão junto no meu cardápio estão abrindo para o site aqui ó os dois têm o mesmo visual só que você não sabe direito se eu aberto para clicar over cardápio é na quando quando você vem para interagir você é sabido que se trata agora Visualmente tá muito próximo visual

desse daqui eu acho que tá mais confundido que ajudando verdade falam mesmo botão em é parece uma mesmo então aqui botão aparece que o aberto vai ter algum exatamente aí de repente a gente pode fazer o seguinte tem alguns aplicativos alguns sites de desse mesmo tipo né de delivery que a gente então nem precisaria colocar esse aberto oi gente não teria ele aqui porque quando aparecer o card significa que tá Aberto e aí o que tiver fechado a gente forma a utilização especial que vai deixar claro que ele tá fechado a invés de ter que

tem que ficar com leibo uma transparência obras é uma coisa do tipo entendeu que aí na lista todos os que não tiverem esse daqui vai ficar claro que tá aberto entendeu acho que fica mais interessante mais sentido né que faz mais sentido mais interessante que esses legalzinho saque essas identificadores que estão confundindo Com as outras tipo de interação então vamos fazer o seguinte vamos aqui os nossos componentes não chama de kart tá tarde se no projeto tiver outros tipos de cards a gente poderia por exemplo chamar de secar de restaurante ou secar diplace alguma coisa

do tipo e para não confundir com os outros como nesse nessa nossa experiência que a gente só vai ter esse tipo de e se card até pela abreviação e vamos seguir assim então aqui no arquivo Criado ser card e vamos criar aqui o nosso componente aquela e blackhoud aqui pra gente só testar se ele tá funcionando e claro nosso style puxar esse componente né cê card e aqui no nosso html vamos recolher o a side e no próprio contente né que é o nosso conteúdo principal ele vai ser um artigo ou porque é um elemento

que pode ser considerado sozinho dentro da página e secar e aí está secad funcionando vamos só fechar algumas abas aqui para Facilitar e ele tá funcionando direitinho acho até aqui podemos tirar esse amarelo que colocamos no nosso elemento webcontent então vamos abrir tirar o amarelo aqui e aí ele vai ficar só a cozinha do próprio bar e mesmo que a gente chama de pastel e aí vamos fazer o seguinte ele fica muito encostado vou colocar o 100% aqui diminuir de novo pessoa por cento não vai dar para ver direito mas ele tá encostado aqui que

a gente faz no nosso grid aqui do l man a Gente pode fazer depois que ele bateu nosso powerpoint a gente coloca um gap e objeto e o nosso tamanho de módulo ao salvar e te dá se passadinha então no nosso boa tarde temos aí um backround branco que ele tem o bode vai deus vamos colocar também a nosso global reduz os perder vai ser flex porque a gente vai trabalhar bastante complexa de dentro para começar né como é bobo vai ser colo né e como a gente deve especificar o Tamanho para ele e vamos

colocar em um couve-flor vivem caso alguma coisa extrapola aí não aparece porque interessante que todos têm o mesmo tamanho né não pede a farmácia módulo está usando aí durante todo para janta e por enquanto acho que é isso vamos no nosso html naquela divisão que a gente tinha planejado ali de somente né para começar a gente tem aquela imagem que secar imagens podemos colocar um três folhas qualquer o até Maximizar aqui para ficar mais tranquilo de ver o melhor vou quebrar aqui nas propriedades que também vai dar para gente ver legal é o tamanho lá

vamos ver qual que é se a gente olhar no site é 160 mas vamos simular o seguinte como não necessariamente ou pode ser que envia o tamanho certinho vamos simular que eles podem ter tá meio maior por exemplo 200 e 200 e via css a gente limite esse tamanho apesar de que não é Sempre bom no próprio html with white corresponder a imagem mas a gente sabe que na prática nem sempre o cliente manda certinho então o audio aqui vamos colocar estabeleceu restaurante é pelo áudio qualquer é só para ilustrar que mesmo salvando aqui só

para dar uma olhadinha apareceu a nossa imagem ele depois dentro daquela nossa divisão teria uma outra área vamos chamar de compostela é o conteúdo principal ali esse E marcar vou chamar uma aqui de ser card e call to action é o cta que seria justamente algumas das coisas que o pessoal pode fazer ele aí se a gente olhar aqui é como se fossem duas divisões né porque a gente tinha olhado por o título e que a gente vai fazer como tags aqui e a outra as informações vez com ícones então o dentro do próprio contente

vamos colocar que cê card sei lá uma uma identificação do restaurante no celular não tem queixo e aqui sei lá Aqueles ícones secar di tudo tá bom dentro do identifiquei chan a gente vai ter um nome do lugar e aqui vai ter uma tag por exemplo o h u apesar de ser um pouco controverso wood vários h1 não é necessariamente errado porque ele está dentro de um prático então como a gente como é o elemento auto contido dentro da página não está errado tecnicamente falando vários h1 mas algumas pessoas não gostam muito seu sapato não

tivesse um título Cada um cada um deles seria o h2 e assim por diante mas não vai fazer visualmente tanta diferença então secar nem depois a gente faz a parada das tags e aí seria aqui nesse info a parte dos ícones né só que eu acredito que esses próprios e fãs possam ser componentes a parte nessa página que a gente está fazendo especial eles não aparecem em nenhum outro lugar mas pensando em um site como um todo eles tem todo o jeitão de serem no componente pode ser usado locais Diferentes de um site então acho

que convém a gente criar componentes na parte para eles ao invés de ser vinculado aqui com uma dela underline é o que pode ser usava uma a parte ôca da folgas e igualmente aqui como a a mãe tags eu acho que vale a pena criar também um componente de tag para ficar mais tranquilo de a gente usar aqui mesmo não usar em outro lugar fica muito mais bem estruturado tá mais organizado aí separadamente do cardeal se vamos Pegar um nome aqui tá bom isso aqui o churrasquinho qual que você prefere hahaha só para gente vai

começar a ver ok interessante está dentro do esperado pelo seguinte por enquanto o nosso flex tá colo né então tá sendo um embaixo do outro aí aí teria as nossas terras que a gente já vai fazer o componente aqui daqui a pouco então vamos fazer o seguinte já vamos fazer suas tags no componente e se tem ou melhor vamos colocar sedex Que eu acho que semanticamente isso não fica errado se fuma lista uma lista não-ordenada e com várias tags viu então chamar de tex só para testar um coloca uma cozinha e me chamar ele no

nosso estudo principal é e aqui então nosso html vai ficar logo abaixo do título né então esse aqui uns cpf que vai ser bonita né então cada aí tem aqui vai ser sedex pac tam tá certo e a gente pode colocar aqui Também um se sedex e que aqui vai ser o link tal quando a pessoa estiver navegando aqui nem tem essa opção na mas é muito interessante por eu sou ricah em restaurante vai mostrar todas restaurantes bairro até o azeite usabilidade com certeza pouco aqui chinasso mais um aqui beleza suco tal a a principal

zona aqui só para dar uma olhada já tem a nossa estrutura sozinhas e deixa eu ver se usam aqui consegue pegar não fica no fica no muro ainda Esse eu reparei fica muito pequeno vamos trabalhar aqui com um depois a gente vai resultado final não prejudica tanto a ver se não vai então tá temos a nossa lista crua e aí já podemos preparar só salvar aqui ok e ficou assim vamos tirar uma vez e aqui a nossa estrutura seria o item ele então os a tag é esse aqui é o wely né que a gente

tá usando ele não vai ter pede pede 10 e mais 10 por padrão os brothers colocam margens e pedem a gente está tirando isso também a Gente não vai querer as bolinhas e isso está etária menor só que a gente ver como tá ficando no salvar aqui legal eu tá ficando uma listinha mas interessante isso a gente coloca um spray flex e o padrão flex allure já vai ficar ali uma coisa interessante é um leque swift black pelo seguinte se tiver muitas pezinhos elas quebram a terra inteira vez quebrar no meio da palavra então é

interessante fazer isso porque visualmente fica mais interessante então Acho que aqui no item que que acontece a gente pode dar uma margem existe também uma outra ficar uma barra em cima embaixo desce esquerda direita cinco só para não ficar muito uniforme a tag geralmente têm esse visual zinho aí e o link então como a gente tá inventando essa tag agora vamos colocar uma pipoca certo dragão collor a gente tem um cinza não tem um e pode salvar para ver aqui interessante a gente não quer essa linha tex depois Em nome um board rainbow acho que

pézinho geralmente têm isso também que não tocar criança global vídeo tudo começa um pouquinho menor né fontes eyes e como colocar uns catorze que equivalente 14 fixa um pezinho terra trocar grudado né que eu morrendo cinco errei 10 então a cor não sei vamos pegar o seguinte não não de branco o que que aconteceu você é isaac é ficou preparou uma já ficou legal eu não sei se tá chamando muito atenção essa coisa Escura assim contexto branco no meio de tudo acho que dá uma olhada na hora que tiver mais avançado no carro a gente

vai achar que está chamando muita atenção a gente coloca ele mais suave claro que a gente pode fazer aqui no face de rua oferece background-color que reflete vão pegar alguma coisa na curva vamos pegar esse próprio lord aqui e se eu passar aqui para desktop para ir conseguir fazer um rover aí ainda tá um pouquinho de outro está chamando muita Atenção mas a gente lida mais tarde tem umas imagem que a gente deu né mas aí que que acontece a gente pode colocar aqui que o primeiro né pois tchau tchau não vai ter só um

leve traga aquele com mais alinhadinho aqui agora o primeiro isso em nova ibiá mais exatamente porque todos os outros que que vai desce quando o mar tinha dado com dois valores significa sim em cima embaixo e o próximo à esquerda direita então no momento ele tá com 5 a esquerda direita Mas só o primeiro a gente tá falando que vai ter zero para ele não ficar desalinhada aqui obrigado vai com a imagem com os outros exatamente talvez a gente precisa de um ajuste que nesse nem também mas aí vai ficar lá no secar dino secar

the name com a gente tá olhando por enquanto a gente tá fazendo aqui o sus pezinhos aí depois a gente vai continuando no próprio secar porque fica muito organizado de uma forma que é feita com componentes é se a gente Tivesse feito usados em sem usar o cês que eu quero que ajuda muito se retirava aquele lição de códigos hahaha teria com certeza manutenção floral com certeza cara com certeza essa é uma das muitas vantagens de se usar em um pré-processador para fazer a parte de estilo acho que a gente já pode ir dar prosseguimento

aqui que seria o seguinte primeira coisa a imagem né e aqui a gente vai querer lá arredondada né como a gente pode ver aqui uma Maneira bem tranquilo de colocar que ser border-radius cinquenta por cento e aí ela já vai vir aquela bolinha como a gente falou interessante aqui mesmo se a pessoa manda uma imagem maior que não é o adequado mas pode acontecer vamos colocar o max william aqui só ligar a 170 é uma coisa assim somente original 160 tá ruim me faz toda a diferença no momento aqui lembrando o seguinte né que se

a gente fizer um bobo a gente ainda não tá fazendo a diferença ações se a Gente quiser a gente já pode por exemplo colocar aqui o nosso break point e aí eu flex-direction ele vai ficar ou não é aquelas coisas vão ficar em linha com uma altura é que pelo site lemos 251 gente vai contente que fez ibitu quer dizer a gente vai ter ali naquela nossa marcação aquelas três áreas principais e space vídeo hein vai espaço eles igualmente sem a gente ter que mexer com margem nada do tipo especificado no valor da Mão o

próprio xbox lá calcular para ele você colocou os peixes treino a trocar o toque kátia ele vai dividir as três áreas não é igual não dividir mais o espaço livre será igualmente distribuído entre eles deus pai conta space between entendeu espaço entre entendeu aqui a gente pode por que ele também vai ser display flex e o factor action.com justify-content e fez bico aqui vamos fazer o seguinte para a coisa não ficar muito abstrata vamos colocar mais alguns Conteúdos etc né eu acho que fica legal por isso e esses vamos fazer o seguinte aqui dentro desse

info é onde a gente tinha programado para ser para que estamos ícone zinho só então acho que a gente pode começar a fazer esse cara vamos criar um novo componente e aí o nome pode ser de canais é vivo já salvei aqui deixa eu falar importar de nossa artigo principal o e então dentro de inço aqui então Deixa eu recolher aqui para ficar mais dentro de info vamos colocar cerveja é um horário aqui só pra gente ver exatamente que a gente quis aqui acho que já dá para gente começar colocar os elementos aí que que

acontece uma dúvida muito comum em relação a ícone está hoje em dia tá se usando bastante sv gesso puros mesmo você pega o svg e coloca ele e ele vai ser o ícone tem até algumas técnicas que você pode reaproveitar como se fosse uma espécie de sprite de svg Que você coloca o s de uma vez só no documento e aqui você usa uma tag especial para referenciar ele só que pode ser que tenha um os problemas de compatibilidade eu vou colocar aí na descrição do vídeo com um artigo que mostra e faz algumas considerações

sobre isso e aqui no nosso exemplo na nossa página que está sendo construído vamos colocar o sbg direto é até interessante que se você não conhece essa técnica você é dela e aplicação agora em É um site bastante conhecido para ícones ao flash acl que a gente pode pegar alguns ícones grátis ele tem seus planos pagos aqui no a gente pode pegar uns ícones grátis vamos ver se a gente acha aí parte da bicicletinha vamos lá vai vamos tentar a esse aqui é bem parecido e aí a gente que usar o svg né de coloquei

incorporar ele mesmo ele colocar a tag mesmo que que a gente faz aqui a gente olha no próprio débito o endereço do cara abre normal nova aba e Tá que o próprio svg aí tem os cara muito interessante que é o utilizador de svg então que a gente faz a gente manda inspecionar o código-fonte aqui pega que do excesso de g e aquele permite que você colhe direto quando você colhe ele já tem uma série de utilizações que ele pode fazer ele dá uma baita otimização aqui no tamanho do arquivo entendeu e aí ele já

tem para ficar oi e aí aquele esse ícone zinho esse banquete é só para você ver como é que Ele fica indiferente daqui grossa tá ok que dependendo de como essa veja foi feito às vezes uma outra utilizar só pode quebrar ele um pouco aí você vai fazendo seus cliques aqui até chegar o resultado ideal isso daqui é para você conferir ficou tudo ok e uma vez ok você pode baixá-lo né que aí você pega aqui vem sim mas o nosso caso a gente só copiar vai ser já o que a gente precisa então a

gente clica aqui copia como texto dentro dos canais de um cola então Ver o sd direto aqui gigantão vamos dar uma classe para ele aqui preventivamente e provavelmente a gente vai ter que utilizar assim todos os ícones né o chão há de ser rico e esse primeiro seria tipo assim tempo de entrega em 40 minutos alguma coisa tipo legal por enquanto tá tá desse jeito mesmo mas daqui a pouco a gente faz o que é melhor e já vamos criar aqui você aí com mesmo ok e tirar esse de cláudio aqui tá muito encher o

saco já vimos que está Funcionando e aí que a gente pode fazer nele se nossos e ai com aqui primeiro só explicar por garantir aqui naquele vai ser um display inline-block a gente pode especificar tamanhos padrão por exemplo o raio igual um pouco tem que ser fixas a gente vai ficar lá mesma coisa ele porque são eu conheço quadrangulares né se tiver alguma sobra e o ver floridas a gente não quer bom então vai vai ocultar algumas pessoas dos sb vertical align text Bottom para fazer sistemas de ícone mesmo que eles costumam alinhar o ícone

contexto na parte de baixo nem sempre é preciso mais se quiser deixar a cor garantia pode deixar também e aí vem o pulo do gato vocês você já viu isso no svg css a gente consegue utilizar esse veja né então uma das propriedades desta região fio por exemplo se você colocar vermelho aqui ó que aconteceu não sei se era do próprio flat ai com o sua utilização causou isso só que aqui é Imprescindível que tenham um viu box tá e aqui a gente coloca esses valores é a gente pode até deixar esse tipo de explicação

abordar sobre svg tem muita coisa para se ela soubesse bg a gente pode deixar para vir futuro mas basicamente isso aqui é uma isso e não busca a gente definir o próprio svg e isso ficou faltando então se a gente coloca isso daqui automaticamente unicamp já passou aparecer se bobiar não batiza nem do it do rádio que a gente já Tá especificando o css isso mesmo tá vendo bom então é imprescindível com sdg tem um viu box por isso que eu não tava aparecendo mas era só para demonstrar que esse fio é a propriedade que

a gente consegue preencher né e o pulo do gato é o seguinte existe um valor especial que é o corante volta o que que ele faz a cor que estivesse especificada no elemento pai ao chegar aqui no próprio sbg ele vai assumir essa cor para ele Aqui ó vamos pegar nas próprias débito só para dar uma olhada aqui ó e com nice info né se a gente vem aqui coloca aqui cor dele é head tanto a cor quanto ir para vai pegar a mesma curta viu legal é e dá para qualquer coisa a gente falou

que ele vai assumir aquela cor para ele como é bastante comum nesse tipo de ícone monocromático que o texto esteja com a mesma cor do ícone a gente pode usar essa técnica se não quiser da mesma cor é só não usar esse valor mas nesse Caso acho que vai ficar legal e aí gestão de ícones não acho que é isso eu acho que o próprio com parentes e aí com é só pra gente colocar no os próprios sbg mesmo para a gente ter se mínimo de utilização aí se a gente precisar de quando os maiores

ou menores a gente vai fazer o modificador depois mas acho que o ícone base e já fica tranquilo assim que olhando aqui a não na verdade é tem um antes aqui né aliás tem um de repente tem uma outra coisa que pode utilizar Aqui também que é o seguinte é delivery entregando o tempo médio 50 minutos retira no local cinco é de repente tal como a gente vai fazer com os cards que vai ter uma coisa uma apresentação totalmente diferente foi aberto ou não a gente pode trabalhar no seguinte sentido se não tiver delivery simplesmente

não aparece a agulha aqui dele eu acho que ele se caso ele quis dizer tá entregando nesse momento nós realmente não é algo que Fosse uma pessoa leia não não teria entendimento e visualmente também não faz sentido de falar para entregar se tiver aberto tá entregando sim e pode ter até o caso do que ele tá aberto não tá entregando você só pode retirar no local mas ao ver outros restaurantes assim um tá com o record de libra outro não automaticamente ele percebe que o que não tem mercado não está fazendo a livre somente então

acho que ela levou a sua utilização é mais uma uma gracinha Que a gente pode e se isso é o tempo médio de entrega que a gente fez aqui né acho que vão copiar aqui então e aqui só só recolher e nesse caso eu trocar entregando só que se a gente salvar aqui ficou com o mesmo ir carnaval vou tentar encontrar o ícone agora sim relógio ir e eu carinha da bike vamos pegar mais um aqui aqui conectar esse aqui eu mandei ginha e lembrando o seguinte aqui como a gente tinha combinado vai ter mais

um aqui e Tá aí aquela modificação que a gente combinou que ele vai fazer a utilização né a gente acha que faz mais sentido isso passar por esse grupo de ícones e e ficarem todos juntos aqui então é só lembrando aqui acabou que a gente nessa de copiar e colar ele não ele esse card info é um só então de amor a jaque que a gente fez mais aqui ó paga e agora sim ficou certinho secar dying for um só e como filhos aqui e quando a gente salva aí sim não alterou em nada Que

a nossa estrutura mas ficou sete em como a gente queria e ao caso então onde a gente vira aqui no cê e com aí no fundo e já começar a assistir ligações ele vai ser um super flex para começar o direito é um factor action cólon só depois que ele vai virar um role ou não ou de ver a gente vai fazer ali ele vai estar um cachorro em sentiu e geralmente geralmente a centralizar july aí vem uma coisa interessante que é o seguinte a gente aqui dentro do colégio de info a Gente tem um

elemento que é o cê vai aí no próprio c aikon e a gente tem as nossas definições aqui idealmente a gente mexe com margens e pedes o mínimo possível amor elemento puro quando um elemento mais composição como esse e deixa para quem vai usar esse componente decide isso então aqui dentro desse cara a gente usa se ai com entendeu a gente vai estilizar os e ai com que estiver dentro desses cara não genérico entendi entendeu e ele não Passa mico né para poder um filho direto nesse caso é o dentro componente algo que está dentro

do componente então qualquer coisa que fizemos aqui de estilo só vai valer quando ele tiver aqui dentro fora ele não vai afetar os demais ai como que é justamente o caso a gente dá uma margem aqui só se for dar uma margem ele a invés de zero alto para ficar centralizado vamos só com é coisa de cinco aqui quando ele tiver para baixo né mas a como se fosse opa Desculpa aqui é o alto o quê aí é só uma marinzinho no botão ele que aí é aquele que a gente tá explicando como não tem

planejamento de mobo a gente tá fazendo aqui nos da nossa cabeça e também visual para ilustrar conceitos e para mostrar possibilidades do que é possível fazer no responsivo não que essa solução que a gente tá mostrando seja a melhor possível para sites do gênero mas é mais feio usar conceitos aqui quem está Mostrando e não é que vai ficar ruim não talvez tenha melhor mas eu preciso um planejamento prévio então no próprio card vamos colocar aqui no local a gente pode também tal como acabamos de fazer especificar aqui temos vamos como recolher aqui para ter

uma noção mas topográfico que ele está fazendo e aí eu já estilizar os ícones mas para ficar uma coisa menos abstrata vamos vamos fazer o seguinte vamos pegar aqui por exemplo A ilha é fiquei chan e colocar aquele pentecostal antes entendeu e aqui ou salvar ele ver aqui é aqui já pedi a nicole não morreu e vai ficar assim do amor trabalhar aqui um pouquinho mas quando ele vai ter nosso do iphone um text-align ou pode colocar leste aqui direto ou então pode pôr herdado nem hard que já ele já pega o que já veio

antes mesmo aqui nas próprias tags né a gente pode colocar Aqui sedex que ele vai ter um margem zero aqui no leilão foi poder ligar sempre nome você tá falando as tags por isso agoniado manel pode sim aqui então a gente pode pegar e nem oh e vamos tirar um pouquinho desse margin-bottom aqui que eu acho que ficou afastado demais aqui ó das teles né e para não ter problema de lá em raid porque às vezes pode dar uma discrepância sozinha é com alinhamento vamos colocar e o mínimo possível aqui Mas de repente a gente

pode quando em nomes compostos ou melhor em nomes maiores quando a gente vê se tiver muito afastado um pouco a gente vai descer ajuste posteriormente mas é só para ir trabalhando aí por enquanto lembrando que de repente aqui no break nós estamos a gente pode cortar também próprio mais um toque para ele não ficar com espacinho a mais quando tiver naquela outra exposição e aí de repente pode desalinhar aqui em cima aqui ela tá Bom tá se pegar aqui ó então a gente coloca quando ele passar e batendo nosso break-point a gente fala e aí

vamos pegar agora por mim que a parte mais central ali e como a gente mostrou e no html e vai falar que é display flex ah tá para começar é colo né porque primeiro é mudo mandou salvar aqui e já dá para para a gente daqui a pouquinho já evento que vai acontecer felipe vai usar os break-points né então o Align-items que vai ser o center a gente vai usar o flash swaps com o rappi caso tenho vários elementos eles vão dar uma kebradinha e colocar o margem top aí aquele módulo nós aí que que

acontece a gente pode usar aqui o nosso do iphone que o justin vai contente ou melhor antes do lar de ar porque veja bem todo mundo eu uso aqui acho que acho que antes dele atingir um 1200 a gente pode fazer uma coisa antes com ele porque tem espaço para isso então dentro daquele Nosso arquivo break-point até abrir aqui a gente tem diversas possibilidades aqui e pode criar mais se a gente quiser é isso aí fica é mas acho que antes a gente pode usar por exemplo me fez mal a que consultando aqui o arquivo

vai ser a partir 600 pixels então que a gente faz a gente já troca filhote direction esse faço parou e os dias vai contém centro a hora que aconteceu também quando ele Bater ele tá assim aí quando ele vier ele faz isso que tem espaço para ele entendeu tablet olha hoje em dia é complicado afirmar mas vamos dizer que sim porque hoje em dia esse negócio de resolução tá tudo misturado rapaz então hoje em dia o celular tem resolução maior que monitora então é complicado então o que que acontece a seguir a gente aí sim

pode fazer um break aí com o nosso lado a e aí senão 1200 em que a gente vai colocar os dois para ir com Tem no início né o próximo início deve estar e tirar aquele margem top que a gente dele ele tá começando a ficar interessante duas coisas aqui muito interessante da gente falar primeiro tava com essa bola virou oval isso aqui não é desejável que que acontece aqui a gente tem que vir no ímãs e fazer uma cetim que é o seguinte e além self-centering ele voltou só tava original o fluxbox ele tenta

fazer com que o seu flex vai ter ocupe toda a Extensão mas como a gente não quer ser feito o align-self o elemento está alinhando assim mesmo mas a gente fala que a gente quer esse nó centro outra questão é o seguinte aquele tá bem afastado mas é proposital é o que a gente tava trabalhando aqui na hora lá aqui se a gente vê a gente fossem deus pai conta space between então sempre que tiver espaço disponível um elemento vai se afastar do outro nesse momento ele tá muito afastado porque só tem esses dois Mas

quando a gente colocar a parte de qual sua achei ele com ele a ele vai alinhar entendeu aí eu distribuo espaço direitinho então eu te parece que tá errado mas tá certo é só falta a gente colocar o restante do conteúdo que importa o tempo isso era até o maluco da minha quando eu tava brincando aqui de fazer um é mas depois eu entendi que é porque ele aproveita todo o espaço que tem sobrando e realmente faz atribuição entre eles Exatamente exatamente essa é uma grande característica do fluxbox ele é uma vez trabalhar com tamanhos

fixos ele trabalha com espaços e proporções então ele faz o cálculo para você sozinho você fala com ele pega o que tem livre e distribui para mim isso é uma característica muito boa ele é o que traz o poder ele tem muito é isso esclarecidos esses dois pontos aí acho que a gente já pode estilizar aos próprios ícones aquele conjuntinho de Ícone ser e com mais cinco que é esse novo componente a gente fez e a gente vai utilizar só dentro do próprio secad a mesma técnica que tem tesoura para começar ele pode ter um

100% e colocar aqui e quando bater lembrança aqui a gente troca branca aqueles mal aqui né então como tem essa troca no 600 pixels longe mauá a gente coloca aqui wyllys é heart quer o valor sem as especificação então aquele fica em coluna mas quando bate aquela ali ele já Volta aqui também acho que a gente não corre mais ou menos naquela técnica que quando não for o último o nosso marido top vai ser será que ele meio módulo vai memória e aí funcionou para quando estiver aqui tá bom aqui a gente aí eu vou

ter que dar uma acertada porque se a gente não tiver tá caidinha aqui tá vendo então eu acho exatamente a gente pode dentro dessa própria regra colocar nosso break-point aqui o que é onde a gente decidiu quebrar em Que a imagem boto vou ficar em rar e de repente a margem lá e pode ser uma hora eu saio aí sim que a gente fizer isso aí ó tá vendo fizemos exatamente o que acontece com margem botão acontecer com mais de rádio quando batismal o ato que eles não ficaram tão juntinho né fica um pouco estranho

certeza aqui no caso essas pezinhos aqui no cercados identifiquei chan para gente conseguir alinhar ali aquelas tags vinhos a gente já tem a tecla incentivar né só que Responde por aqui uns play flex que vai ser um flex-direction como para começar e align-items-center e aí fica só umas três depois tem que passar um pente-fino aqui depois ela tava faber dica que eu tenho toc com esse negócio tem até algumas maneiras de e configurar para sempre que salvar ele já coloca umas alphabet conserva só que aí já envolve outras configurações que no momento a gente não

tem o bf v então questão de conteúdo vamos passar aqui Para parte do call-to-action propriamente dito vamos aqui no html vamos recolher o cadinho e temos aqui o secar diz cta aqui eu vejo no momento duas interações dois botões que é o ver o cardápio que levaria para uma página interna e esse coraçãozinho então esse ver cardápio claramente ele dá em um novo componente nesse visual de botão aqui tá espalhado ou pode estar espalhado em vários momentos então você pode fazer um link como a nossa por Exemplo sertão no momento esse elemento não existe vamos

criar aqui aquele dado a um e olhando o nosso código tá aqui ok então significa pegou já vamos tirar desse buraco onde aqui ele vai g1 e vamos ver aqui qual que é o negócio dele a essa cor aqui acho que não temos ainda não sua lei nós vamos colocar aí e aí a gente pode usar a variável a cola morning light salvando aqui ele Veio e já ficou com black house ele acordar ele é branco o senhor underline né então vamo dar um pezinho para ele conforme tem anna visual embora lhe dar luiza vamo

colocar o global reinos aqui vamos colocar metade dele que ele é mais forte e coloca aqui e ela ficou bem parecido aqui tem uma certinha né é tem essa setinha não fez precisam ficar mais todo mundo que ia ajudando né mas para quem está Assistindo o vídeo caso que ele colocar a setinha simplesmente tá com svg direto ali dentro do bem e vai funcionar então só para fazer aquela graça que eu vou colocar morrer e aí débora um psicólogo o que que a gente pode pôr será que carregar o voo sapo laranja voltar não né

que ele nunca esteve mas colocar sua morde com essa escuro ficar mais escuro vou colocar aqui desktop e já ser laranja como ele é nada original começa ele começa de um Vermelho clarinho e tem um ovo é de um vermelho-escuro às vezes pode escurecer um pouquinho só aqui então vamos pegar as variáveis que a gente pode fazer a gente pode pegar o ônibus e colocar o óleo de down e aqui tem uma as funções do processo que a gente pega uma cor e coloca ela x por cento mais escura tão por vinte por cento onda

como é que fica fala isso aí aqui diminuir o zoom para caber a nossa visualização aqui a gente vai ter que trabalhar porque ele ele faz Parte aqui de um outro outro lugar mas antes no próprio html a gente pode aqui na mesma área fazer um novo elemento porque acho que esse alimento a parte mesmo que vai ser um link e também tá só que a gente pode chamar ele de forma de explicar o que é seu coraçãozinho então fazendo todo aquele processo lá do sbg vamos colocar um ícone de coraçãozinho aqui aí no próprio

secar agora a gente vai estilizar esse caro aliás vamos utilizar Aqui o próprio pentear né que a gente já com ele na posição zinho que seria o seguinte display flex e amanhã vai ter sempre para começar a direção dele vai ser coluna e ele vai ter um mais um toque aí do nosso módulo e aí quando ele bateu não souber que porte grande não lá de ap a imagem top do nosso módulo de repente consegue um toque aí para gente dar uma olhada como praticar salvar aqui só para ver que que tá acontecendo aqui a

gente Vai utilizar o seu batom que aquele novo ou pratinho de acabou de criar justamente colocando o alarme se auto center para prevenir ele de ficar ficando e quando ele bateu no nosso break the law diabo ele vai dar uma lá em selfie que está que ele vai ter que ficar no começo e vamos colocar imagem botton de meio módulo aí o coraçãozinho escondeu porque o elemento tem o ver florida só que lembrando que esse coraçãozinho especial e a gente já vai Posicionar ele corretamente aqui ao canal resistência e colocar que ele tem leite heart

lembrando que a gente já deve ter né e aí finalmente a gente o nosso fala aí a cor dele com aquele óleo tá olhando e aí que vem que a posição absoluta e a direita e em cima ele vai ficar com tá meio de módulo que a gente tá usando para os pés pelas margens e etc aqui vem uma dica muito legal também que é o seguinte tá vendo que ele sumiu já sumiu A gente funcionar ele absolutamente ele sumiu mas qual que é o macete aqui quando a gente posiciona um elemento absolutamente e específica

right top bottom left tipo de coelho ele vai seguir o que a gente colocou aqui então a gente colocou light no caso a 30 né white 30 top 30 só que qual que é a questão da coisa e ele vai até encontrar um elemento um pai dele mouse estral relativo e se ele não encontrar ele vai subir não tá chegando bora então o que Que acontece a gente tem que vir aqui no próprio secar ti tá e esse ser é relativo ó ele apareceu aqui veja bem ele está exatamente onde a gente especificou a 30

pixels da direita vai ter o relativo ou cardíaco exatamente a isso internet favor único elemento de referência deles seria o para a não ser que outlet alguma coisa em volta do cativos relativo ele ia parar lá entendeu ficou desse jeito por enquanto a imo vai ficar o coraçãozinho ali que Acho que é legal também e aqui ele passa para lá na verdade temos que colocar esse botão à direita aqui então aqui ainda não foi vamos tomar conferida aqui que já era para ele ter ido para a direita vamos dar uma olhada aqui então depois a

gente procurar aqui um pouquinho a gente viu que o cta tá como filho do contente na verdade ele é irmão então vamos só colocar ele aqui para fora vamos ajustar aqui uma minha mento e agora sim ficou E a imagem o segundo contente 3º cta ao salvar aqui aí sim ele passou para lá aqui ó ajustes em que a gente tem que fazer o seguinte nesse identi cation vamos aqui no secar que pegar o identifiquei chan a gente pode pouquinho lá de arte o flash direction vai ser roupa ou melhor ele pode continuar como cólon

aquela coisa que a gente precisa fazer é que o alania itens vai ser flex start e aí sim eles saem ou esquerda porque agora ele está com o alania tons No início na flextorq essa parte essa então a gente passa aqui pro vou começa com a coisa empilhada passa para essa visão intermediária e aí passa para essa daqui pessoalmente não sei se eu fiquei tão satisfeito com o fato de ter o coraçãozinho pouco abaixo o cardápio acho que é que deveria ser ou só para o coração eu só tô cardápio mas como tá mais ou

menos próximo aqui e é mas teria que fazer um planejamento aí anterior era isso para tirar uma solução Melhor vamos deixar a cintura enquanto e depois a gente vê o que faz e aí a questão do cat eu acho que é bem isso tá muito próximo aí contando com o boba que a gente improvisou aqui talvez esse tamanho esteja pequenininho demais vamos pegar aqui no secar cpa e pegar o batom vamos fazer o seguinte consultando o próprio dele o sedutor a gente vê que ele tem determinado o pé de mim aqui vamos aumentar isso para

em mobile ficar uma área de toque maior então a gente Pode fazer uma pele aquele é cinco acima e abaixo e desce esquerda direita vamos colocar vamos ver como é que vai ficar o seguinte chopp aqui e já facilita nós vamos fazer o seguinte aqui vai ficar 15 e a gente vai ficar 20 ficou uma área mais interessante quando a gente está falando de toque né e aí quando bater aqui no nosso break-point ele só de fogo e pede heart aí ele voltar ao que era antes então quando bater ali a só que no caso

deixa eu só Confirmar o pede a gente colocar aqui o melhor os valores anteriores né aí aqui fica dessa forma mais condizente é um ambiente de toque e quando acontece isso ele vai para lá aqui eu levo não sei se você tá achando mas o que que você tá achando aí da nossa aquele nossa papo de que talvez as tags estejam chamando muita atenção será que em relação aqui ao cta não está atrapalhando um pouco para disputar uma boca os dois vamos pegar aqui na própria tag Nós vamos fazer um teste vou pegar o link

aqui no ponto toda a cidade ponto cinco barbeiro um contraste uns dos melhores mas vamos fazer o seguinte aqui a gente passa o parte para uno rover vou passar para desktop aqui ó e agora vou te falar que me agradou mesmo no desktop se ele fosse um pouquinho a mais em pelada também é para isso que você trocou e comentar realmente pode aumentar aí eu porque esse prédio não passa nem que seja um 10 E 15 daqui é um 10 e aqui é um cinza não é ficou meio termo interessante para quando for escutar ó

chama um pouquinho mas atenção né ah o efeitinho derruba é que o coração também aqui ó vamos fazer o seguinte a gente pega aqui no próprio ser card aqui na favorito e o luga e fala que não tem mesmo beleza legal claro que um pouco mais assim de planejamento um pouco de instruções se vamos supor que ser um projeto real a gente receberia de repente um design System está eu gás a gente poderia trabalhar com transições daquele aumentaria mais suavemente mas como mas assim uma coisa mais didática deu presente e aí eu acho que a

gente faz a pronúncia errada o card seria mais ou menos isso aqui uma coisa legal que dá para fazer o seguinte vamos supor que a gente queira colocar umas cores aqui como a gente tem esse elemento com aquele curte color no sbg fazer de colocar color.red que ele coloca tá Vendo a gente tem que de alguma forma permitir que receber esses elementos que ser bom cores a gente poderia fazer isso de algumas maneiras a gente pegar aqui do eu fico análise a gente poderia criar modificadores aqui mas pensando aqui tentando pensar mais amplamente eu acho

que uma outra solução a gente contemplaria isso ser usado em qualquer elemento seria o seguinte se a gente vê aqui em style é um dos nossos looks aqui Né bom então a gente pode chegar aqui na nossas cores do projeto e dentro desse loop nós vamos criar classes específicas has color e a gente pode pegar senhor a própria o nome esse daqui é só interpolação de menos esta e aí vai por exemplo conforme a cor coloca ele vai colocar aqui a escola olha gente pra escola hoje lá e te tempo e aí a gente vai

criar que o próprio collor e passar o color Bom então agora a gente tem uma série de classes que podemos usar sem ter que criar um modificadores no próprio alimento não que estivesse errado que a machucar dores mas é só uma outra possibilidade então se a gente veio aqui no próprio html o e vendo que bom e a gente pode nesse cara é a essa por porte e ao salvar e vai ficar laranjinha que aí é só pra puxar um pouquinho da referência que ele é aqui né laranja Acho que já foi interessante acho que

não precisaria nem do não se quisesse seria possível mas eu só delícia laranjinha for muito mais chamativa né e aí acho que realmente a gente pode dar por encerrado o card só fazendo aquilo que a gente tinha falado e a loja que não está aberta né e o restaurante que não está aberto aí a gente vai ter que fazer um estilo em que só fique bem evidente pode até agora do pedro cavalcanti A lua pensa só para gente fazer esse estilo vamos colocar mais uma deixa eu salvar aqui só para aí eu acho que a

casa da gente dá uma passadinha aqui também então o que que a gente faz a gente vem no próprio card aqui e a gente faz aquela técnica e a gente vai pouquinho mais um botton vai ser o nosso módulo né para ficar interessante aí e aí já deu o espaçamento menos no último ficou tudo certinho e aí quando a gente tá indicando novamente a gente poderia Fazer um modificador para o card tá fazer um secad e felipe em dizer ou de um closet uma coisa do tipo mais uma outra possibilidade é trabalhar com um outro

namespace que alguém space is que é esse daqui vou fechar aqui ó a doceria exclusivo esse aqui indica um estado esse is the com estado que está acontecendo naquele momento então pensando no sistema bem interativo supondo que ele tem a comunicação direto com o beck para atualizar em tempo real Uma vez que desce a hora do estabelecimento para abrir o sistema poderia automaticamente remover essa class is closed e ele trocaria aqui enquanto a pessoa está na página mesmo por isso que isso esse isso é um estado que ele pode ou não acontecer inclusive ele pode

mudar na uel em tempo real entendeu oi e a gente me levasse o card vamos utilizar exclusa e aí o que que a gente faz lembra do e Comercial que ele se refere é o elemento ancestral né o elemento outros e card se a gente coloca ele comercial aqui grudado no pontinho significa que ele tem as duas classes os e card e o is closer se a gente separa significa que o esposo ele é filho dele então como a gente quer trabalhar com as duas a gente vai deixar juntinho aqui que ele o elemento que

tivesse secad e exclusivo vai acontecer o que a gente vai colocar aqui agora a primeira coisa primeira Coisa que eu notei aqui né mesmo a loja fechada você ainda consegue fazer rubber nas coisas então o que a gente põe aqui o winter haven london on e ele não deixa mais você interagir com elementos não vai deixar você clicar em nada não deixa aqui eu vou passar para desktop nesse de cima eu consigo dar o rover em tudo quanto é lugar é esse que tá com pontilhados esposo eu não consigo fazer mais nada entenda bem chato

mesmo né você retrata bem a realidade é também A realidade agora a gente tem que evidenciar visualmente apesar de o primeiro passo a gente já deu aqui o cara não consegue mais interagir tá claro que isso não é uma coisa só no front lubeck tem também que ter as suas medidas para o acesso e também porque eu posso simplesmente não deve tudo tirar a classe entendeu mas é um trabalho conjunto front e back tem que acontecer mas como agora a gente tá focando no front esse point h20 bem vou trabalhar e Aí a minha ideia

vai ser a seguinte a gente vai criar aqui cedo só e que a gente vai fazer esse cara vai te a largura sem por ser e altura 100% ele vai ocupar o elemento inteiro e ele vai ter um conteúdo que vai estar escrito fechado só que só para você ver começa a ver eu vou salvar aqui apareceu escrito fechado pequenininha aqui tá e pode ver que o seu no before inclusive entra no fluxo do elemento tanto que ele empurra a galera toda lá também para isso não Acontecer posição uma pessoas aí beleza a gente vai

colocar aquele um spray flex o e alinhado totalmente no centro deus pai contém center-align né com sede organizar em ordem alfabética aqui não fico louca vamos pegar te levo lá na escola vão pegar uma cor qualquer aqui depois a gente ver vou fazer uma opacidade rgh o que a gente pode passar uma cor não passar por um padrão aqui dentro do navegador e vamos para o ponto 95 um Pouquinho de outra cidade tá é só salvar aqui ó ó tá começando a ficar desse jeito que ela tem um efeito já deu um efeito só que

essa trombada que é pelo seguinte quando a gente falou que ele é é absoluto só que a gente tem que falar aqui no leste aqui tá zero e no top deve tá zero e ele encaixou direitinho entendeu e ele já pegou o formato redondo por quanto do river no que a gente tem no card tudo Que extrapola ele não mostra lembro eu penso então aquela pontinha dele ele não não deixa eu mostrar a gente não precisa de repetir o border regions nele e aí que acontece pode ver que deu só um errinho aqui com coraçãozinho

que ele coração tá por cima né porque ele também absoluto só que a gente possa resolver fácil só dão valor para o z-index aqui pode ser um não tem importância aí aqui no bfb a gente tem uma função zinho especial que ela chama zenilda que está Que ela é muito interessante pelo seguinte você chegar no verbo então dentro dessa nossa função a gente tem aqui um array de valores tal como a gente vindo para cores e a gente atribuem nomes a valores para ser usado nos em inglês qual que é a grande vantagem disso a

gente começa a usar z-index claro que aqui é um caso mais simples né mas em projetos que maior né do mundo real e a gente começa a usar os índices Referenciado pelo nome ao invés pelo número para não confundir as vezes você não lembra que número que deu que dar uma mais que dá uma menos então pelo nome isso fica muito mais fácil então a gente só quer aquele fu número um né só para usar um sonzinho então assim de fuga que só para seguir a convenção do psb e acha que para ficar mais legal

vamos colocar aqui em cola então branco e o tamanho de fonte generoso aqui trezentos por cento é acho que pensando Aqui seria isso mesmo a ideia usar esse é o melhor ideia do mundo mas ficou muito claro que a coisa tá fechada mas chegou uma tarde às vezes é material aí vai do imaginação talvez só um pouquinho não japão 250 aqui e aí ok google como a gente fez eu passar aqui para o mundo colocar o nosso mimo aqui de 360 para ele como a gente fez com o valor do xbox aliasing aí acho que

realmente questão de estrutura geral a gente chega bem próximo que tá aqui Então o pessoal acho que já deu pra gente mostrar bastante coisa já estamos gravando a horas e horas não sei como vai ficar isso na edição mas com certeza deu para gente passar por muita coisa nesse projetinho que é até um tópico que tá em alta aí nesse período que estamos vivendo agora e esse tipo de projeto pode ajudar muitas pessoas aí a gente vai finalizar a parte de código aqui a gente vai disponibilizar isso daqui no repositório vai tá aí o link

na Descrição do vídeo e faz o seguinte clone repositório e dá os seus toques aqui complementa faz aqui o reader e o footer da maneira como você acha que deveria ser me passa o link para gente coloca nos comentários o link do repo que você clonou e notificou para a gente dar uma olhada e agora vamos umas considerações finais para gente falar contigo acho foi isso super produtivo né fácil assim essa rede que nós fizemos acho que deu para Aprender vários conceitos ainda mais a gente vê o poder do césar utilizando os processadores de css

e como você falou mesmo é nesse momento difícil todo mundo precisando de um delivery então eu mesmo já vi vaso de ativar acidentes me perguntando só uma solução delivery mas que felizmente ela não tem tempo de reconstruir e é isso aí mesmo a gente pode ir melhorando isso com certeza muita gente vai melhorar essa solução vai ficar uma coisa no quarto não fico Feliz de ter ajudado e queria também aproveitando aí que a gente está nesses estudos né você chamou para ajudar e você também já chegou a ver a parte de flex-box é queria presentear

você com o o css grid também para você dar continuidade esses estudos e consegui ir evoluindo e cada vez usando tecnologias mais modernas aí nos projetos de front que você já tá entrando mais agora aí na sua carreira show de bola muito obrigado aí tá mas a gente vai se falando então Eu li muito obrigado e até a próxima demais em duas horas de conteúdo de muita qualidade sobre front-end molhar e aí gostou de tudo que viu conhecia todas as técnicas dicas e macetes é muita coisa interessante e claro muita coisa boa para se usar

na prática no dia a dia do desenvolvimento para web então se você ficou com a gente até o final já dá aquele like para garantir que conteúdos desse tipo esses bate-papos essas dicas A mais sobre o continente continuem aparecendo aqui no canal muito obrigado para você que ficou até o final e a gente se vê pelo é valeu e aí