Criando projeto profissional do zero - HTML, CSS, TailwindCSS, JavaScript - AULA 01

Fala Dev seja muito bem-vindo à nossa primeira aula aqui do nosso projeto que a gente vai desenvolver que é do cardapio online e que vou falar pra vocês eu tô ansioso porque esse projeto tá sensacional e a gente vai fazer muita coisa legal tenho certeza que você vai aprender muita coisa mesmo se você já tá desenvolvendo com HTML CSS ou JavaScript ou se você tá começando desde o zero a gente vai ir bem passo a passo para você Realmente fazer aprender de verdade e sair com um projeto real aqui que basicamente veio de eu fui

aí numa Hamburgueria E aí eu conversei com o Don e ele falou que ele precisava eh de um carda online para poder pedir direto no WhatsApp dele e aí eu tive esse instalo para fazer esse projeto para vocês pra gente poder praticar mesmo que você tá saindo do zero passo a passo pra gente fazer junto legal aqui então bora que vai ficar muito massa esse projeto e a Gente vai fazer até colocar ele no ar vamos lá então primeiro passo antes da gente começar no código configuração aqui começar o código Vamos então ver o projeto

Então olha só que legal vou atualizar aqui tô com ele rodando só pra gente conhecer o projeto então aqui eu tenho os produtos que eu tenho no meu cardápio aqui aqui dentro do menu aqui a gente vai colocar mais Mas deixei pouco só para como exemplo tá então ten aqui o nome da Hamburgueria que eu que que a Gente vai colocar Qual que é o endereço qual que é o horário de funcionamento tá vendo que tá verdinho porque agora que eu tô gravando essa aula é 18:52 ou seja o restaurante né Hamburgueria está aberto se

você abrir o nosso site abrir esse site aqui entre um horário que não é do horário de funcionamento que a gente vai passar aqui vai mostrar vermelho porque vai est fechado então a gente vai fazer bastante coisa legal Além de a gente poder ver aqui ó que tá Sensacional eu posso clicar por exemplo aqui ó adicionar o item no carrinho posso clicar aqui ver os itens que eu tenho no carrinho ou clicar fora tenho as bebidas ó posso clicar para ver aqui o carrinho Posso então por exemplo clicar aqui para remover E aí eu posso

digitar aqui o endereço e clicar em finalizar pedido quando eu clicar em finalizar pedido Ele vai levar lá paraa api do WhatsApp web levando essas informações Como qual que é o endereço o Total qual que é os produtos lá pro WhatsApp web do número da Hamburgueria então vai ficar sensacional esse projeto muita coisa legal pra gente fazer bem passo a passo aí pega a sua água aí aí e bora lá que a gente vai começar primeiro passo aqui pra gente tá alinhado pra gente poder começar é configurar eu vou usar o vs code para programar

ou seja o editor de código visual Studio code Então a gente vai configurar junto aí então baixa aí se você não usa ele eu Recomendo demais vou fechar aqui pra gente poder rodar e outra coisa a gente vai usar o Twin para poder estilizar ou seja para dar a cara visual nesse projeto aqui Opa deixa eu até voltar aqui para vocês ó vocês vão ter o link do figma onde tem toda a parte como é que a gente quer estruturar ele visualmente no mobile como é que eu quero estruturar ele no desktop então vocês TM

todo o figma aí e também eu vou deixar para vocês baixarem em algum Local aqui embaixo tá do vídeo eu vou deixar para vocês baixarem também algumas imagens aqui pra gente não se preocupar com isso né de alguns hambúrguers aqui que deu até fome e também aqui né de duas imagens aqui de guaraná de refri aqui Beleza então vocês vão ter aí pra gente poder começar e desenvolver o nosso projeto Beleza então vamos lá vocês vão ter aí também próximo passo é a gente tá alinhado na configuração do ambiente a gente vai Precisar ter o

node JS instalado na sua máquina Mateus eu não tenho node JS entra aí Aí nodejs.org clica nesse botãozinho aqui ó no primeiro chamado LTS ó clicou aqui só dar next next não tem nenhum segredo para você instalar então instala ele aí ou se você tem um Linux por exemplo vem aqui ó no Mac Você pode baixar no Linux você pode usar aqui via package Manager aqui ó package Manager via Linux aí tem vários aqui você pode escolher o que você tá usando Depois que você instalar abre o seu CMD Então abre o seu CMD o

seu terminal e digita aí ó node espaço tro v e Dá um enter aí quando você dá um enter ele tem que devolver uma versão tá se devolver uma versão tá instalado às vezes até legal depois que você instalar reinicia o seu computador tá a princípio não precisa reiniciar então ele devolveu uma versão tá instalado Pode fechar a gente pode começar aqui a desenvolver primeiro passo eu vou abrir aqui o nosso projeto Né Vamos criar um projeto aqui então vou vir aqui dentro da pastinha que eu quero vou criar uma nova pastinha pra gente ser

a pastinha do projeto né eu vou chamar aqui de cardápio Beleza vou abrir ela aqui e eu vou abrir essa pasta no meu vs code tá aí o que vocês podem fazer é aqui em cima ó Você pode clicar aqui em cima no Windows 10 e no Windows 11 tem essa sacada clica aqui ó e digita CMD e Dá um enter ó quando você faz isso ele abre um CMD dentro já da pasta do nosso projeto ó chamado cardápio E aí eu posso dar um code espaço ponto que aí ele vai abrir o vs code

ó dentro já da pasta cardapio Olha que legal maravilha né ah Mateus não funciona não quero não tem problema Você pode abrir o vs code vir aqui no File vim aqui no open folder E aí você seleciona ó cardápio e dá aqui um selecionar é a mesma coisa tá então fez isso aí abre aqui o vs code e vamos configurar o vs code pra gente tá igual Aqui alinhado então primeiro passo ó deixa eu até inverter a minha câmera aqui primeira coisa que a gente vai fazer dentro aqui das extensões você vai procurar aqui por

Drácula que eu tenho certeza que muita gente vai querer instalar Qual que é o tema que eu tô usando então Drácula instala esse cara aí clica no botãozinho instal depois você clica no set color team e seleciona o Drácula Essa é extensão pro código ficar com essas cores aqui tá E depois Disso a gente vai usar aqui o Live server tá o Live server é uma extensão pra gente rodar o nosso HTML aí para ele ficar em live Reload a gente já vai conhecer então clica nela instala ela também depois instala uma chamada twind espaço

CSS deixa ele carregar aí esse cara ó twind CSS Intel sência você vai instalar essa biblioteca ela vai ajudar quando a gente trabalhar com Twi para poder trazer a parte de e Intel sense para trazer a parte de quando a gente Colocar o mouse ele falar o que que é a propriedade do tewi que vai ajudar bastante essa extensão é bem poderosa então a gente já vai conhecer também então instalou essas aí e agora aqui dentro do projeto a gente vai clicar com o botão direito New file index P HTML e aí eu vou dar

aqui um exclamação e vou dar um enter Então a gente vai criar aqui o arquivo padrão do Index HTML e aqui dentro do Body eu vou colocar uma tag de H1 por exemplo primeiro projeto Tá e eu vou dar aqui um enter tá só pra gente separar bem ó salvei e também no title vou dar aqui o nome da Hamburgueria por exemplo Dev Burger traço a melhor Hamburger eria Dev tá pode colocar o nome que você quiser salvei aqui e agora a gente criou aqui pra gente rodar esse projeto só com ele puro a gente

pode vir aqui ó clicar com o botão direito em cima Open with Live server ou aqui embaixo ó go Live dá na mesma tá então clicar aqui ó Open with Live server e com isso Ó ficou até Branco demais aqui deixa eu diminuir com isso ele abre aqui com essa URL ele abre aqui o nosso projeto E aí toda vez que eu colocar alguma coisa por exemplo com H2 teste e eu salvar o meu código automaticamente ele já atualiza aqui o nosso navegador ou você pode dar um F5 então ele já atualiza aqui o nosso

projeto tá agora o próximo passo que a gente vai fazer é instalar o twind dentro do projeto e importar as imagens Dos hambúrguers lá que a gente vai vai usar então aqui ó clicar com o botão direito New Folder vou chamar de assets e dentro aqui vou clicar aqui com o botão direito ou vamos lá na pastinha vamos lá na pasta do meu projeto ó assets e eu vou colar então vocês TM para baixar as imagens da dos dos hambúrguers aí então deixa eu até pegar aqui ó pegar aqui ó vou copiar elas aqui aqui

copia e cola aqui dentro dessa pasta assets tá pra gente poder utilizar Então dentro de assets ó a gente tem aqui as imagens tá próximo passo a gente vai vir também e vamos criar uma nova pastinha chamada Styles e dentro dela a gente vai criar um New file chamado style.css Então dentro dessa pasta a gente cria um arquivo chamado style.css que vai ser o título Global da nossa aplicação agora a gente tá pronto para começar a configurar aí o te Wind Então bora lá pra gente usar aqui a gente vai usar o tewi ind e

a biblioteca instalada Dentro do nosso o pacote do projeto então eu vou vir aqui dentro ó a gente vai vir aqui dentro do projeto vou abrir a pastinha dele ou a gente pode vir pelo CMD deixa eu clicar aqui ó abre aqui Revel tá abre a pastinha do seu projeto e você precisa o quê você precisa abrir um CMD dentro da pasta do seu projeto aí você tem aquela sacada que você pode vir até a pasta do seu projeto vi aqui digitar CMD com isso ele já vai abrir ó o CMD dentro da pasta do

seu projeto tá Então o que que você vai fazer é abre aí o CMD dentro da pasta do seu projeto ó carda aqui dentro ou abre o CMD e navega até a pasta beleza estando dentro da pasta do nosso projeto aqui agora a gente vai fazer o quê npm init espaço Men Y com isso a gente vai inicializar a configuração do node JS dentro do nosso projeto quando a gente faz isso ele já cria uma configuração chamada package P Jason com a configuração inicial do nosso projeto falando aqui que eu não Tenho nenhum script ainda

e nenhuma dependência né E a gente vai instalar agora o teu índic que é a biblioteca que a gente vai usar para estilizar esse projeto aqui que vai ficar bem legal então para isso Ó bora lá vamos vir aqui eu vou pegar aqui em Twin get started e a gente tem a parte de instalação então eu vou vir aqui ó vou copiar o comando de instalação vamos lá no nosso CMD que tá dentro da pasta do nosso projeto e eu vou colar npm install menos D tem o Índice SS então instala ela aí então agora

é só aguardar aqui o npm que é o gerenciador de pacote que vem com o node ele vai instalar Esse pacote dentro do projeto já instalou se a gente olhar aqui de novo dentro de package olha só que legal Dev dependen já tá aqui o teu ind ó olha que bacana já tá aqui agora a gente pode gerar o arquivo de configuração então eu posso criar aqui ó vou copiar vamos lá dentro do CMD e eu vou colar aqui o npx espaço te índice SS Espaço init vou dar um enter aqui ó e ele vai

criar um arquivo de configuração apenas isso esse comando né ele cria aqui ó um arquivo chamado twind config.js por enquanto tá vazio e a gente precisa colocar aqui dentro do content Aonde que tá os arquivos que tá que vai usar o nosso estilo que vai usar o te Wind Aonde que tá então aqui a gente vai passar né então abro aspas aqui ponto barra abra aqui dois asteristicos barra asteristicos ponto e Aí eu posso colocar dentro de Chaves o nosso ponto HTML vrgula ou JS Mateus O que que é isso aqui que você tá colocando

eu tô falando que qualquer arquivo dentro da minha pasta raiz ou dentro de uma pasta dentro dessa raiz ou seja dentro do Styles dentro de outra pasta aqui dentro vai poder ter né seja ponto HTML ou ponto JS a gente vai poder usar CSS aí o nosso tewi perfeito só isso salvei aqui podemos fechar e outra coisa dentro do Style dentro do Style.css a gente precisa além de fazer isso aqui é importar aqui do te Wind a base dele o base ali os components e os utilites o que que são os Util são as classes

que ele vai exportar pra gente que a gente já vai conhecer os componentes o tema As Cores os tamanhos então a gente só importa aqui ó olha que maravilha importou aqui salvou dentro do nosso cara perfeito agora a gente precisa do nosso script para rodar então vou copiar o script padrão que ele dá Aqui mas a gente vai alterar um pouquinho vou lá dentro do package a gente vai apagar esse teste aqui ó e eu vou criar dentro de scripts a gente vai criar um novo chamado Dev dois pontos abro aspas duplas aqui e eu

vou colar tá E aqui nada mais é do que ele vai rodar no te Wind e a ele vai falar onde que tá o arquivo Global nosso arquivo Global tá dentro de Styles style.css perfeito Mateus Então vamos lá ó ponto barra Styles que é o nome da pasta barra nome Do arquivo style.css Beleza depois ele tem um menus o E aí aqui ó tá vendo que ele tem um caminho chamado output pcss esse caminho aqui basicamente é Onde que vai ser gerado o arquivo con teend aí então ele vai gerar um output eu vou fazer

o quê eu vou vir aqui Ponto barra Styles dentro da mesma pasta barra eu vou chamar aqui de output.csv aqui então criamos ó o nosso script aqui cuidado tá com as barras aí Cuidado com o nome da pasta com o nome do arquivo salvou aí agora a gente configurou tudo que precisava eu posso vir agora dentro do nosso projeto e a gente pode rodar um script a gente chamou de Dev ó então npm Run espaço o nome do do script que eu chamei que é Dev então npm espaço Run espaço Dev aí então vou dar

um enter aqui e ele vai rodar esse arquivo ó ele vai rodar tá rebuild aqui olha que bacana E budou aqui então agora você pode ver que ele Vai ficar gerando você sempre vai Minimizar isso aqui e aí dentro de Styles ele gerou para mim ó output pcss olha só que legal todo o estilo do teu ind aqui legal então agora o que a gente vai fazer é dentro do nosso arquivo index P HTML em cima do title a gente vai usar a nossa tag de link ó só pode só digitar link e ele já

fornece o atalho ó link 2.ss ele já traz aqui o atalho pra gente Barrinha e a gente vai usar o link que é do Style sheet ou seja Vamos importar o arquivo Style sheet E aí aqui a gente vai passar a onde está esse arquivo então está dentro de pon bar Styles bar output.csv lá do te ind então se eu salvar isso aqui salvei e a gente voltar no nosso projeto né lembra que ele já tá rodando Ah Mateus e se eu fechei sem querer o que que você faz você lembra que você pode vir

dentro do index.html.gz agora ele tá usando né O nosso tem um in E se a gente lembrar uma coisa que vocês Sempre precisam é se você parar de fazer a aula e vai fazer de novo você precisa rodar aqui o seu index P HTML e lembrar de abrir o seu CMD Navegar até a pasta do projeto Ó vou parar de rodar aqui vou dar um CRL C vamos supor que você fechou e abriu navega pelo CMD até a pasta do seu projeto ó dentro da pasta que eu chamei de cardápio né que é onde tem

o projeto e aí dá o npm espaço Run espaço Dev tem que sempre rodar aqui o nosso Twi deixa ele rodando e minimiza aí você Pode vir aqui pra gente fazer o projeto Tá e agora vamos conhecer o te Wind então o te Wind é sensacional porque basicamente ele é como se fosse um lego tá então o tem o Wind ele exporta utilites que ele chama ou seja classes que a gente pode usar várias classes que cada classe faz alguma coisa do CSS e a gente vai mando elas em conjunto para formar a nossa estrutura

o nosso layout então ele já tem aqui por padrão por exemplo se a gente pesquisar aqui por Eh text size por exemplo ó Font size se a gente pesquisar ó ele tem várias classes e cada classe ele fala o que que ele tá fazendo então Olha que bacana se a gente for aplicar vou diminuir aqui um pouquinho se eu vier aqui no meu H1 e eu colocar uma Class por exemplo text traço 5 XL e eu salvar isso aqui e eu vou atualizar olha só que legal o tamanho que ficou Mateus Como é que você

sabe o que que é 5xl lembra aquela extensão que a gente instalou então se eu colocar o Mouse aqui em cima ele fala olha o 5xl Mateus é um fonte size de 3 Ram ou seja 48 Pixel e com uma Line High de um Olha que bacana Ah eu quero colocar cor vermelho text traço por exemplo a cor que já vem por padrão Red E aí eu tenho várias aqui que eu posso usar por exemplo Ah quero 600 se eu salvar Olha que bacana já tá aqui Beleza bora começar o projeto agora então vou tirar

isso aqui né que não importa pra gente pra gente começar salvei Bot beleza a Primeira coisa que a gente vai fazer é eu vou vir dentro do nosso Style aqui e o nosso estilo Global eu também vou mudar o body E aí eu poderia colocar um background color por exemplo Black aqui ó só para ver para vocês ó que ele muda a cor inteira dentro do nosso mod mas no nosso caso né a gente não vai deixar Preto a gente vai deixar um quase branco ali então peguei uma cor bem quase branco ali um cinza

Eu até vou pegar aqui a cor porque isso aqui a gente não Precisa decorar deixa eu pegar aqui a cor que eu separei vou colocar ela aqui # f6 F7 F8 Beleza então vou salvar é um cinza ali quase branco deixa eu atualizar aqui beleza maravilha vou fechar isso aqui agora a gente pode começar para não deixar né aquela cor toda branca ali então vamos voltar no nosso layout e a primeira coisa que a gente vai fazer é essa esse reader aqui ó Então eu preciso de um espaço na área centralizar os itens dentro e

cada item Tem então abaixo do outro então pensa comigo que a gente pode chamar isso de heer né então eu vou colocar aqui ó um comentário ó vou comentar aqui dentro do nosso HTML eu vou colocar aqui heer tá E aí eu vou dup esse comentário e eu vou colocar fim do reader e dentro desses comentários eu vou colocar a nossa área do reader Mateus Por que que você tá comentando aqui só para ficar mais organizado para vocês aí no vídeo e para ficar fácil de vocês entenderem Porque Já já você vai ver como esse

projeto vai ficar bem grande então isso aqui vai ser para vocês ficar bem organizado depois vocês podem tirar esse comentário que não faz menor sentido beleza só para ajudar vocês então aqui dentro a gente vai criar essa área então vou chamar de heer uma tagz inha do HTML aqui dentro dela eu vou colocar outra div e dentro dessa div eu quero aqueles itens então vou trazer aqui por exemplo a nossa IMG vou fechar ela aqui vou dar um enter Aqui src vou colocar aqui a imagem que vai est pon barra assets barra eu poderia ter

a logo do da Hamburgueria mas como eu não tenho eu vou pegar aqui de um hambúrguer por exemplo o nosso Hambúrguer 1 Alt que é o texto alternativo Vou colocar aqui logo Dev Burger Beleza então ó já pegou ele ali legal vou colocar aqui também o tamanho que eu quero então uma classe eu quero olha só que legal eu quero que a o tamanho seja w traço E aí aqui a gente Tem vários tamanhos de l largura então eu quero uma largura por exemplo de 32 então 32 e um h traço 32 com isso eu

vou falar que a altura da imagem é 32 e o h é 32 que é 128 se você esquecer o que que é cada propriedade que a gente tá falando só coloca o mouse em cima ele já vai falar High é altura então a altura da imagem de 128 e o w é a largura então w 32 largura 128 beleza e eu quero dar aqui um rounded traço full quer deixar ele totalmente arredondado uma elipse Zinha aqui ó olha que bacana perfeito e eu eu quero também que ele tenha um Shadow traço LG ou seja

eu quero que ele tenha uma sombrinha Olha que legal ficou uma sombrinha atrás dela então já tem essa sombra que é um drop Shadow aqui do prop Wind Maravilha e eu quero também que ele tenha um Hover dois pontos e aí quando passar o mouse em cima eu quero que ele tenha a propriedade scale do CSS ou seja um scale 110 se eu passar o mouse tá vendo que ele aumenta o tamanho Eu quero um scale e eu quero também uma duration de 200 então salvei se eu atualizar ó ele aumenta quando eu passo o

mouse em cima muito Masso né então perfeito já criamos aqui a nossa imagem após a imagem dentro dessa div ainda eu quero agora ter por exemplo um H1 que vai ser o nome da Hamburgueria por exemplo Dev Opa Dev Burger tá então esse vai ser o nome da minha Hamburgueria eu quero dar aqui uma Class para ela eu vou dar aqui para Essa classe aqui um text TR 3 XL MT de 4 que é uma margem em cima e um MB de do então o nosso MT é uma margem em cima e o MB é

uma margem embaixo de dois que é 8 pixel e eu quero também dar um fonte trç bold beleza né só que se a gente lembrar Mateus ele tem uma área em volta que tem esse quadrado ela é Escura Tem uma cor tem uma imagem de fundo ali então vamos fazer isso então se eu quero controlar isso a gente precisa colocar dentro do heer que é ele que tá Por Volta ali eu preco falar qual que é a largura qual que é o tamanho desse item Então o que a gente vai fazer é aqui nesse heer

vou passar uma Class para ele w traço full ou seja pega a largura de 100% H eu quero passar uma altura dentro de colchetes e eu vou passar que vai ter 420 Pixel e eu posso daqui a cor BG traço zinc traço 900 então se eu salvar ó olha que bacana já temos aqui ó o nosso item perfeito legal depois disso eu quero falar que eu quero aquela Imagem de fundo para isso a gente pode usar a imagem dentro do CSS ao invés de usar a tag IMG Eu quero só uma imagem de background concorda

então a gente pode vir dentro do tewi Olha a facilidade dentro do team vou falar que ele vai estender uma nova propriedade então do tipo background image dois pontos abre e fecha os Chaves e eu vou falar que o nome dela vai ser por exemplo eh home dois pontos e aí eu vou falar também aonde que tá essa imagem então por Exemplo aqui abro aspas URL abre e fecha parênteses abra aqui aspas simples e aí aqui dentro eu vou passar bar assets bar bg.png a gente tem uma imagem dentro de assets chamada BG ó Então

vou passar para ela salvei aqui tá então agora a gente criou dentro background image uma propriedade home que é um background image com essa imagem então se eu salvar lembra de tá rodando né o seu projetinho aqui no cmd eu posso agora usar Olha que bacana como a gente Estendeu eu posso Vir aqui e dar um BG traço home se eu salvar ele puxa minha imagem Olha que sensacional E aí eu posso centralizar onde eu quiser né então vou vir aqui ó BG traço cover e BG traço Center salvei ó centralizou a imagem e Olha

que bacana sem quebrar e sem distorcer a imagem de fundo Beleza agora o que a gente vai fazer é centralizar o item dentro aqui né eu vou vir até no nosso H1 aqui eu vou passar a propriedade text TR White para deixar a cor do nome do nosso Hamburgueria branco aqui ó Tá vou passar até 4xl o nome da Hamburgueria para ficar um pouquinho maior tá E aí o que a gente vai fazer é essa div que tá dentro do heer eu vou centralizar os itens dentro que é a imagem o H1 Então vou vir

aqui vou falar Class você vai ter aqui um with full e um h traço full ou seja vai ter a altura e a largura que tem do elemento do nosso reader e também vai centralizar então Flex Flex traço o Call o Flex é ativar o display Flex o Flex Call eu vou falar que os itens sempre vai ser um abaixo do outro e aí eu vou dar aqui um justf traço Center e um items traço Center Ou seja a linha para mim vertical e horizontal no centro então Olha que bacana ó Centralizado né sensacional agora

o que a gente pode fazer é terminar aqui embaixo então a gente já deu aqui o nome da Hamburgueria no H1 sensacional eu vou dar aqui um spam que vai ser por exemplo Rua Dev 10 e aí Centro Campo Grande Opa Campo Grande MS vou tirar esse sensor daqui que não precisa vamos supor que aqui é o endereço né E aí eu vou dar aqui para ela um Class Class text traço White para deixar branco e um Font traço medium para deixar um pouquinho medium ali beleza né Isso já é suficiente agora a gente vai

colocar aqui embaixo a nossa target de quando tá aberto os horários de funcionamento então a gente pode vir aqui embaixo desse cara vou criar aqui uma pode ser uma div Opa uma div dentro Da div eu vou criar um spam que vai ser por exemplo de segunda a domingo da 18 às 22 beleza Esse é o horário de funcionamento essa nossa div ela vai ter um BG traço Green traços 500 ou colocar 600 aqui por exemplo vou salvar faltou aqui um e no Green e vou atualizar ó olha só que bacana e vou dar um

espaçamento interno né então interno é o pading então PX ou seja na esquerda e na direita traço 4 py traço 1 e vou dar aqui um rounded traço LG que que a gente Aplicou aqui Mateus o PX é um pading ó na esquerda e na direita de 16 Pixel o py quando a gente usa um espaçamento interno ou seja tá vendo que ele deu um espaçamento interno de um que é quatro em cima e quatro embaixo o rounded nada mais é do que arredondar a bordinha e agora eu quero distanciar externo também externo é o

margem então MT traço qu uma margem em cima Vou colocar até mais ó cinco ó beleza ó distanciou aqui de cima perfeito né e eu também vou dar aqui Para ela um ID que eu vou chamar aqui de date traço spam pra gente manipular esse cara depois lá no JavaScript então aqui a gente finaliza ó a parte do nosso reader Olha que sensacional dá pra gente deixar branco ali dentro né Eu acho que é branco né ah é branco então vou colocar aqui ó que o nosso spam vai ter um Class text traço White e

um fonte traço medium por exemplo então ó ah ficou bem melhor agora sim o próximo passo a gente vai fazer a parte do menu Então vamos lá vamos pra estrutura do menu Olha que ficou fácil aqui já organizado né a gente vai fazer a mesma coisa vou criar outro HTML outro comentário aqui tá e eu vou chamar aqui de por exemplo vamos lá eu vou criar aqui um H2 dentro do H2 vai ser conheça nosso menu ou cardápio tanto faz vou dar aqui uma Class vai ser o nosso text traço 2 XL fonte traço bold

que a gente já conhece essas propriedades text traço Center para centralizar salvei e eu Quero distanciar então MT de 9 e um MB de se caso tenha alguma coisa embaixo Olha que legal maravilha né Só que nesse tamanho do mobile quando a gente tá criando usando tewi uma coisa que a gente sempre vai basicamente se basear é o tewi ele usa né as práticas do mobile first ou seja ele vai tentar sempre e pensar que a gente tá construindo esses estilos aplicando do mobile para depois adaptar para um layout maior então a gente tá aplicando

no mobile tá legal Mas se você aumentar aqui ó cara esse título Tá pequeno como é que eu posso aumentar eu quero que no mobile fique naquele tamanho lá beleza maravilha mas quando eu aumentar Eu quero um tamanho maior então eu posso vir aqui por exemplo ó a gente deu 2 XL no tamanho eu posso vir aqui aplicar um media query por exemplo espaço MD do P traz 3xl o que que é isso cara esse cara o md ele é um ele é um media query Ou seja quando tiver a largura de no mínimo 768

ele vai Aplicar o que tiver aqui dentro ou seja aumentar a fonte de para 30 Pixel então quando a gente usa MD do pontos e alguma Classe A gente tá falando que esse estilo só vai ser aplicado quando você tiver numa largura de tela de no mínimo 768 Pixel então a gente pode ver o quê se eu salvar e eu atualizar ó vou diminuir percebe aqui o tamanho do nosso da fonte aqui ó vou colocar até maior só pra gente ver ó 5xl né salvei olha só tá pequenininho vou aumentar Quando ele Chegar na largura

de no mínimo 768 ele vai usar essa propriedade então ó vamos lá vamos lá ó usou a propriedade tá se não ele usa a nossa 2xl Então isso é muito legal que a gente pode ver também eu vou usar aqui o 3xl Né o cinco é muito grande então Olha que bacana ó aumenta um pouquinho e Beleza se a gente olhar dentro aqui do nosso documentação do Twi e a gente procurar por responsive design Olha que bacana a gente tem aqui a parte de break Point ou seja pontos de Quebra do nosso layout que eu

quero fazer alguma adaptação Então quando você usar o SM 640 MD 768 LG 1024 XL maior ainda e o 2 XL que é o maior ainda né então a gente pode fazer quebras e a gente vai melhorando isso aqui também tá então aqui ó já ficou legal agora aqui embaixo depois do H2 a gente vai ter aqui eu vou até comentar aqui ó a gente vai ter aqui o início menu tá então aqui a gente vai ter o início do nosso menu então aqui eu vou criar uma div e vou Até colocar aqui embaixo né

pra gente não esquecer vou colocar aqui o p menu beleza e aqui dentro então eu vou colocar aqui uma tag de m e dentro dessa M vai ser o nosso menu essa div volta eu vou colocar um id pra gente pegar depois no JavaScript mesmo chamada menu aqui beleza e dentro da Main dentro da Main aqui vai ser basicamente o item ou seja pensa na Main com uma Grid de elementos é esse cara aqui ó a Main é exatamente quem vai controlar os elementos dentro Que vai ter cada item dentro então dentro eu vou ter

o primeiro produto vou ter aqui por exemplo o segundo produto e por aí vai então a gente vai ter todos os produtos aqui então ela é quem vai ficar responsável por falar olha eu quero uma Grid de dois itens um ao lado do outro Ah eu quero uma Grid quando tiver um dispositivo menor um embaixo do outro igual a gente tem no mobile por exemplo aqui ó um embaixo do outro então ela quem vai ficar responsável por fazer Esse alinhamento e dentro vai ter os itens Então se a gente pensar dessa forma vamos lá começar

a construir Então vou vir aqui dentro da nossa Grid eu vou criar primeiro o produto e depois a gente faz o alinhamento vou deixar elá sem nenhuma classe por enquanto ó V dar aqui até uns espaços e a gente vai criar aqui dentro uma div se quiser criar aqui ó até para ficar mais organizado vou criar mais um comentário aqui no HTML produto item tá E aqui eu vou colocar Depois dessa div vou colocar aqui por exemplo pin produto item tá então dentro dessa div vai ser o nosso produto dentro dela eu vou colocar aqui

uma IMG que vai ser o nosso primeira imagem do produto então src pon barra assets barra barra aqui Hamburger 1.png texto alternativo aqui o nome do texto alternativa é Hamburger um Opa Smash por exemplo Beleza vou dar aqui uma Class para ela também w traço 28 H tro 28 também vou colocar um Rounded traço MD Vou salvar aqui pra gente visualizar Vou atualizar ó já temos ela aqui e eu quero que quando passar o mouse em cima também tem um efeito de aumentar só que rotacionando um pouquinho então posso aqui um Hover dois pontos scale

que a gente já viu né scale colocar 110 ó já aumenta um pouquinho e eu também quero dar um espaço Hover dois pontos menos rotate traço dois então esse Hover menos rotate ele vai rotacionar se a gente coloca o Mouse em cima menos do degrau então se eu ó passar o mouse ó tá vendo ele inclina um pouquinho e aí claro eu quero também passar uma duration uma duração de 200 então ó colocar até 300 ó salvei ele vai demorar um pouquinho mais deixa eu atualizar para fazer essa Nossa animação então fica bem legal então

a gente criou a classe aqui depois dessa nossa imagem dentro dessa div a gente vai ter aqui ó vou colocar mais uma div que basicamente ó a gente tem o quê a Imagem do lado eu tenho o nome descrição preço e botão então imagem Agora eu tenho aqui dentro dessa outra div vai ter basicamente o restante então um parágrafo então um parágrafo que vai ser basicamente aqui o nome então por exemplo Hamburger Hamburger Smash Vou colocar aqui uma Class para ela fonte bold embaixo Aqui eu vou ter um parágrafo que vai ser a descrição Eu

peguei uma descrição aqui só pra gente colocar ó Vou salvar então a descrição pão levinho de fermentação natural peguei na Internet Uma Breve descrição beleza e aí aqui eu vou dar um Class text traço SM ou seja vou diminuir um pouquinho o tamanho do nosso da descrição porque a descrição é menos importância né então um pouquinho menor Font bold aqui pro nome e embaixo depois do parágrafo ainda dentro dessa Nossa div eu vou ter outra div aqui ó essa outra div aqui ela vai ser responsável por colocar um ao lado Do outro ou seja qual

que é o preço e do lado a botão então eu vou colocar aqui dentro dessa div ó um parágrafo também R cifrão por exemplo Ah esse aqui é 18 18.90 beleza e depois aqui eu vou ter um buton que vai ser aqui adicionar por exemplo tá salvei pra gente poder colocar aqui ícones dentro eh do nosso projeto eu vou deixar para vocês aqui embaixo também só uma tagz inha pra gente usar uma biblioteca do Font awesome pra gente usar a biblioteca de Ícone a invés né da gente usar uma imagem por exemplo para ficar mais

legal então deixa eu até pegar que isso aqui não precisa decorar deixa eu também pegar aqui ó e eu vou mostrar para vocês eu vou explicar salvei Então vou pegar aqui vou vir aqui em cima em cima do link ó a gente vai importar esse cara Opa importei duas vezes Deixa eu só colar uma única vez Então basicamente ó a gente tá importando um link lá do nosso Font awesome a biblioteca de Ícones e a gente tá importando pra gente poder usar dentro do projeto então salva aí e agora a gente pode vir aqui embaixo

ó dentro do botão então ao invés de usar um texto ou uma imagem A gente vai usar uma tagz inha chamada i e dentro dela a gente vai colocar uma classe fa espaço o nome do ícone né fa tro Card traço Plus que é o nome do ícone lá na biblioteca vou dar aqui um text traço LG E também um text traço White para deixar ele branco aqui tá e o botãozinho por fora Eu quero que ele tenha uma classe aqui também com uma cor de fundo BG traço Grey traço e a gente pode colocar

cor aqui ó Grey 900 por exemplo e eu vou salvar vamos testar então Ó seu atualizar ó meu ícone já apareceu ali Olha que bacana né Show de Bola Deixa eu diminuir aqui do lado perfeito esse nosso botão eu quero dar para ele um PX ou seja uma espaçamento interno na esquerda e direita de C rounded pra gente ficar um pouquinho só arredondado Falta eu escrever rounded corretamente e eu também vou criar uma classe depois pra gente manipular para quando você clicar lá no nosso JavaScript Então vou dar uma classe para ela eu vou chamar

aqui por exemplo de Ed traço to traço cart traço btn Então vou criar uma classe no Nosa para depois a gente saber lá no nosso JavaScript quando a gente estiver manipulando para quando você clicar lá no JavaScript ou pegar o item que você clicar beleza para mim saber o Item que você tá clicando se você tá clicando nesse botão que tem essa nossa classe que eu sei que é para adicionar aí Um item no carrinho tá então a gente criou uma nova classe Nossa chamada Edit to cart btn perfeito e a gente colocou aqui o

iconeinstagram um um text traço LG pode ser para ficar um pouquinho maior para ficar legal só que se a gente olhar ó os itens não tão um ao lado do outro então essa div aqui ó que tá controlando o Valor e o botão eu vou falar olha você vai ter uma Class com o Flex automaticamente o flexbox tem um item ao lado do outro eu vou também passar um items Center para centralizar os dois eu vou passar para esses dois caras também um GAP de dois só para eles ter um espaçamento entre eles ali legal

e eu vou falar para eles ter um justify traço between então cada um vai ficar lá no seu canto então se eu salvar ó agora Opa diminui aqui sem querer ou errado a Gente tem ó cada um lá no seu canto beleza maravilha é o que a gente quer aqui e um MT de três para desgrudar um pouquinho ali do nosso da descrição aqui perfeito feito isso a gente fez a parte de baixo Agora falta a parte de cima então aqui em aqui em cima a gente tem o título a gente tem a descrição e

essa div por enquanto a gente não precisa colocar nada mas a gente tem a imagem e a div em volta que é a div do produto a div que tá em volta de todo mundo a Gente pode alinhar como eu quero Então eu quero que os itens dentro vão ter um display Flex salvei quando eu dou um display Flex aqui o que que ele vai acontecer como a gente tem dentro dela eu tenho uma imagem e depois eu tenho outra div e dentro dela tem os outros itens mas o flexbox por padrão coloca um ao

lado do outro então ele colocou a imagem e ao lado o resto que a gente tem na div ou seja o nome a descrição e o título então ficou sempre ao lado e eu Também quero passar além do Flex eu quero também ter um GAP de dois ou seja um espaçamento que entre a foto e o título ó espaç mentinho de dois tá então agora a gente basicamente finaliza essa parte aqui de conseguir orientar só que por enquanto ó ele não sabe quantos itens que eu tenho na minha tela agora a gente vai vir dentro

da Main que é aquele item que vai tá Por volta do nosso Grid de produtos e para ela a gente vai estipular Então vou dar aqui Uma Class vou falar para ela que ela vai ter um uma Grid e Grid traço calls traço um Então por padrão ela vai ter uma Grid com um item aí beleza vamos colocar mais produtos pra gente ver uma coisa que a gente pode fazer também é nesse nosso botão ó eu vou colocar aqui um enter ó olha só que bacana vou dar um Tab nesse botão aqui de adicionar eu

vou dar aqui uma propriedade chamada data traço name Vou colocar aqui o nome do mesmo hambúrguer ó o nome aqui é Hamburger Smash e também vou colocar uma propriedade data traço Price que vai ser o preço dele por exemplo o preço aqui eu coloquei 18.90 18,90 salvei aqui Mateus Por que que você tá usando essa propriedade data name data Price essa propriedade a gente vai conseguir utilizar lá no JavaScript para quando você clicar ccar nesse botão de adicionar no carrinho a gente pegar através dessa propriedade Qual que é o item que Você clicou Qual que

é o nome Do produto e qual que é o preço do produto então a gente consegue pegar de uma forma muito simples e a gente vai ver e vai rever isso aqui lá na aula quando a gente for dar vida para esse projeto aqui tá Fica tranquilo então a gente criou aqui o nosso primeiro produto eu vou pegar aqui ó fim do produto e o início do produto vamos copiar ele e eu vou colocar aqui e vou colar Tá então vou duplicar aqui beleza lembrando eu colei ainda dentro da minha M tá eu vou colocar

aqui o nosso Hambúrger 2 uma foto do Hambúrguer 2 vou mudar aqui para hambúrguer duplo Beleza então agora vou mudar o nome aqui né texo alternativo aqui no parágrafo Hamburger duplo a descrição vou deixar a mesma o valor aqui eu vou colocar R 32,90 aqui no data name hamburguer duplo e aqui R 32,90 o preço salvei Então olha que bacana agora tá vendo que eu tenho dois hambúrguers né perfeito então agora vamos começar a alinhar lá na nossa M eu Falei aqui pra Nossa main que ele vai ser um Grid de Um item um abaixo

do outro então um já tá abaixo do outro aqui é uma Grid de Um item eu vou falar que ele vai ter um GAP de traço set ele vai ter um espaçamento entre eles de set Então já dá um espaçamento ó entre eles aqui eu vou falar que ele vai ter um MX alto e uma máxima largura de traço e traço 7 XL então Max traço w traço 7 XL o que que é isso aqui você tá falando que eu vou passar uma máxima largura de 1280 Pixel e MX alto É alto na esquerda na

direita para centralizar os itens então se eu vier aqui ó olha que bacana ele já tá aqui Centralizado mas ele ainda mantém a Grid de Um item Só que eu não quero né eu só quero essa Grid de Um item apenas Quando tiver no mobile Ah Mateus eu passei de uma largura um pouquinho maior do mobile eu já quero pegar e eu quero começar a usar um ao lado do outro como é que a gente faz eu posso vir aqui eu tenho Grid de um por Padrão mobile first lembra do mobile first ão construindo mobile

primeiro agora vou adaptar para maior então MD dois pontos Grid traço calls traço dois por exemplo então se eu salvar então quando tiver numa largura maior ou mínimo 768 eu vou aplicar esse estilo que é uma Grid de duas colunas Então olha só que bacana Clica com o botão direito abre o inspecionar minimiza o inspecionar e quando você tá com inspecionar aberto Pode Minimizar e você mexer aqui ó ele mostra a largura da página então agora ó quando chegar no mínimo 768 ou seja 768 para mais ele vai aplicar esse estilo aqui depois do dois

pontos ó MD dois pontos olha só que bacana um abaixo do outro vou aumentando até chegar no 768 ó vamos lá 600 600 cadê cadê cadê ó lá 700 ainda não chegou né 700 e cadê cadê cadê cadê ó 770 passou de 68 né olha só um ao lado do outro olha que sensacional é exatamente o que a gente quer Beleza Então agora ó vou diminuindo perfeito e vou aumentando só que a gente pode melhorar isso aqui a ainda né eu posso passar também que eu quero que eles não fiquem grudado aqui ó no eu

vou passar também um PX de dois por exemplo para ele dar uma distanciamento na esquerda e direita ó já não fica mais grudado ó vou passar também que eles vão ter um MB de 20 então caso tenha alguma coisa embaixo dessa Main colocar aqui até um pouquinho menos 20 ficou muito grande né um MB de Vamos colocar aqui por exemplo uns 16 fechar aqui e perfeito salvei então se eu aumentar aqui ó fica legal só que aqui ó eu posso dar um espaçamento maior entre eles se tiver também no desktop Porque estão muito pertinho né

então eu posso vir aqui a gente tem o GAP que é o espaçamento entre eles eu vou falar também espaço MD dois pontos GAP tracinho vou colocar 10 então quando tiver no maior eu vou aplicar um GAP de 10 então Ó vou atualizar aqui ele já Ficou menor aqui ele já fica maior Então beleza já ficou um pouquinho maior se quiser passar mais a gente pode também mas acho que 10 tá bacana então agora a gente já tem aqui os itens perfeito agora é só a gente replicar esses caras né então vamos só arrumar aqui

que eu não sei se eu arrumei vamos lá primeiro item a gente colocou o Smash a foto dele o dois aqui a gente colocou a foto dele o nome dele o nome dele aqui nos not data name data Price vou copiar aqui Vamos colocar mais dois vou copiar aqui ó fim do produto início a aqui dentro do M vou colar aqui mais um ó Beleza vou colocar foto aqui ó do hamburguer 3 eu vou colocar Hambúrger sed por exemplo né vou colocar isso aqui e aí Vou colocar aqui o nome do produto a descrição vou

deixar mesmo vai ser 35,90 vou colocar 35 e 90 aqui e aí o nome aqui do data Price também ó cuidado com as propriedades salvei ó já mudou aqui beleza e aí vamos mais um né Vamos Colocar mais um colocar aqui ó seleciona esse produto e eu vou colar selecionar ele aqui ó vou dar um shift Tab só para melhorar um pouquinho a indentação O terceiro eu vou colocar hambúrguer da casa então esse vai ser o nome hambúrguer da casa beleza vou colocar aqui a foto quatro deixa eu ver ver aqui hambúrguer quatro deixa eu

salvar Ah vou colocar aqui beleza hambúrguer da casa vou copiar aqui o nome vou colocar dentro aqui do nosso data name tá e o Data Price a gente vai chamar aqui de Vou colocar aqui r$ 3 vou colocar só 30 então O valor vai ser só 30 dele beleza e uma coisa importante tá cuidado com o nome da propriedade tá a gente colocou o nome da propriedade aqui ó data Price e data name não é nome é data name tá cuidado com isso aí cuidado com esse pequeno detalhe aí na escrita então a gente já

mudou aqui beleza se a gente aumentar Olha que bacana né se a gente aumentar ele já fica ali com a Grid Olha Que sensacional e uma coisa legal que dá pra gente adaptar de uma forma muito fácil usando Grid com o te Wind né então aqui a gente falou que olha se tiver maior ele vai usar uma Grid de dois mas ah Mateus tiver maior ainda eu quero usar uma Grid de três como é que eu faço eu venho aqui por exemplo olha só que bacana venho no nosso Main Cadê o nosso Main vamos lá

no Main aqui é o nosso Main eu falo ó Olha já temos aqui o de dois eu vou falar aqui ó LG dois pontos Grid traço calls Opa calls traço três Então tô falando o LG que quando tiver mínimo 1024 Pixel a mais ele vai fazer isso aí ele vai aplicar três então se eu salvar isso aqui olha que sensacional aqui ele fica um abaixo do outro que é o padrão né que é Grid calls um se aumentar um pouquinho ele vai usar o nosso dois ó usar o dois se aumentar mais que 1024 olha

ali em cima ó mais que 1024 ele aplica três ó olha que Sensacional no nosso caso eu vou deixar Dois mas fica legal assim também mas eu vou colocar aqui ó vou tirar o nosso três V deixar só o dois que era só para mostrar para vocês tá só pra gente ser fiel aqui ao nosso layout que é é apenas dois aqui tá então salvei e aqui a gente já criou essa essa parte aqui depois dá para vocês colocarem mais hambúrguers aí mas por enquanto eu vou deixar quatro mesmo então vamos lá depois disso a

gente vai ter a parte de bebidas né então a gente tem o nosso menu já temos Aqui a nossa M certo então Depois da nossa M ó vamos lá embaixo fica muito mais fácil né a gente entender ó aqui a gente tem a nossa no nosso menuzinho aqui ó temos a nossa M que é a nossa Grid então depois lá embaixo depois da Main vamos lá a gente vai criar aqui para ela mais uma div tá com mais um H2 que vai ser por exemplo bebidas tá essa dizinha aqui a gente vai colocar um Class

MX al Max tro w tro 7xl pra gente centralizar PX de 2 e o m de 2 o m é uma Margem exter de o Pixel em cima e embaixo o PX a gente já conheceu que é interno na esquerda e direita e o Max XL é para centralizar esses cara então se eu salvar isso aqui a gente já tem o bebidas aqui e aqui no H2 eu posso dar um Class posso dar aqui para ele um fonte traço Bolt text tro 3xl e pronto a gente já tem o nosso bebidas aqui então perfeito já

tá aqui a bebidas e agora depois do Nossa dívida bebidas dentro ainda da div ó do menu a gente vai ter Aqui mais uma propriedade pra gente colocar a nossa Grid de bebidas tá Então vou colocar aqui uma div mesmo e essa div aqui ó vou até pagar ela e eu vou colocar aqui ó um comentário Grid bebidas eu vou duplicar Fin Grid bebidas pra gente criar aqui dentro uma div Mateus lembrando tá isso aqui não é para ficar no seu código depois se você quiser tirar isso aqui depois você pode tirar é só para

não confundir vocês ó porque tá ficando bem grande então a Gente já tem a separação do que que é cada coisa aqui para não confundir vocês Beleza então vamos continuar a a gente criou aqui a nossa Grid bebidas que vai ser a mesma coisa a gente pode ir lá no nosso Main ó copiar aqui a nossa classe de Grid porque é a mesma classe né então vamos lá embaixo vamos aqui ó Grid das bebidas eu vou colocar essa classe aqui que é a mesma coisa é a mesma classe que a gente vai utilizar e eu

vou dar até um um ID para ela ID V dar aqui ID de menu Também para ela tá dentro dessa a gente pode pegar até um produto também ó vou pegar aqui o fim do produto pegar um produto aqui ó copiei o produto e eu vou colocar dentro dela colocar aqui dentro de eu só ó dar um shift Tab aqui Colei o produto até dar mais um shift Tab aqui ó deixa dar mais um enter para separar aqui legal então dentro a gente colocou já um produto só que esse produto vai ser uma bebida né

então vou mudar aqui a foto vai ser aqui a refri eí vou mudar Aqui o texto alternativo para Coca lata vou pegar aqui ó coca lata a descrição Não precisa não precisa de descrição salvei aqui beleza essa nossa div aqui ó é a div aonde tem o valor o valor aqui vai ser se aqui no data name vai ser coca lata o data Price vai ser o valor que eu coloquei r$ 6 se colocar valor com ponto coloca ponto alguma coisa né não vírgula então seis aqui beleza essa div que tem que não tem nenhuma

classe eu posso Falar que ela vai usar uma Class w Full para ela pegar a largura 100% que ela conseguir e aqui também na nossa div eu vou falar para ela também ter um w Full para ela pegar sempre 100% aqui ó beleza maravilha olha que legal show de bola então já pegamos aqui o nosso produto um né que seria a bebida um né Vou colocar até bebida item E aí fim bebida item só pra gente saber data name já colocamos quala lata Price também vou copiar ela aqui Porque a gente tem duas bebidas né

vou duplicar aqui dentro ainda o próximo vai ser vou duplicar aqui para refri do E aí é guaraná lata Vamos colocar aqui no nome Ó guaraná lata o valor eu vou deixar R 6 também aqui o data name eu vou colocar guaraná lata e o data Price Vou deixar R 6 também tambem então se eu salvar isso aqui agora olha que sensacional né a gente tem aqui já uma bebidas temos aqui já coca lata guaraná lata Olha que sensacional quando eu Passo o mouse em cima já tá totalmente responsivel muito massa o que que tá

faltando pra gente quase finalizar isso aqui né Deixa eu voltar minha câmera aqui se a gente voltar dentro do nosso projeto ó não esse cara aqui né dentro do projeto aqui cadê a gente tem a parte aqui de baixo que seria do meu carrinho né então tenho que ter um footer ali que ele vai ficar fixo pra gente poder depois abrir o modal e criar de fato aqui ó o nosso modal vamos lá então Primeiro a gente vai criar esse cara aqui que é o nosso footer vou diminuir isso aqui tirar minha cara que não

precisa aqui né para não atrapalhar e vamos lá então agora o que a gente vai fazer é depois do nosso menu depois do nosso menuzinho da dívida o menu a gente vai criar agora o nosso vou até criar aqui o comentário né Button Card footer eu vou duplicar aqui pin Button Card footer e aqui a gente vai ter o nosso footer que é a tagz inha HTML que é Aquela aquela tag vermelha tá então para ela eu vou colocar aqui dentro um botão que ele vai ser um botão dentro desse botão aqui a gente vai

ter dentro de parênteses vou criar aqui um spam criar aqui ó spam que vai ser por exemplo tanto de item tem no carrinho vou colocar dois v colocar até uma clas aqui ou um id pra gente identificar depois um ID vou chamar aqui de cart TR count dentro desse botão ainda depois aqui do lado vai ser Veja meu carrinho e aqui Ainda eu posso colocar um ícone né então V colocar um iconeinstagram aqui ó então se eu salvar isso aqui ele já vai est lá embaixo né Vamos aqui no nosso footer deixar ele vermelho então

Class eu quero que ele tenha w full ou seja pega 100% da largura BG traço Red traço 500 vamos ver se ele vai ficar vermelho deixa eu atualizar isso aqui ó já ficou vermelho eu quero dar também ó para ela um py de 2 ou seja distanciar um pouquinho isso Aqui de dois Vamos aumentar legal só que dessa forma aqui ó Você concorda comigo que dessa forma aqui ele tá lá embaixo eu tenho que ir até lá para ver eu quero que ele fique fixo sempre na tela como é que a gente pode fazer isso

o próprio nome já diz né Eu quero deixar essa propriedade desse item eu quero deixar ele como fixed só que eu preciso falar onde né então fixed no Bottom zero e eu vou salvar isso aqui e eu preciso também falar qual que é a camada eu quero Z Traço 40 ou seja a camada é acima de toda a minha interface porque a camada padrão é um zero ali então eu quero subir toda em cima da minha interface para sempre os itens rolarem por baixo dele então se eu salvar isso aqui ó ele acompanha Nossa interface

tá vendo que ele tá ali embaixo ó deixa eu até aumentar um pouquinho que minha aqui ó ó tá vendo que ele sempre vai acompanhar a altura ele vai ficar fixo lá embaixo então ele vai ficar rodando lá sempre Fixo e aí Claro a gente pode distanciar né os itens e centralizar Então posso por exemplo dar um Flex items Center justify TR o Center também centraliza tudo que tem dentro aqui beleza no nosso botãozinho aqui eu vou dar uma CL PR ele Flex items Center também GAP de do White pra gente deixar os textos brancos

aqui e fonte traço bold também beleza Olha que bacana né E também vou dar aqui para esse botão pra gente conseguir saber quando eu tô clicando Nele vou dar aqui um Tab Vou colocar aqui um id pra gente saber que esse botão vai chamar cart traço btn salvei aqui então dessa forma ó a gente já tem ele sempre fixo lá embaixo independente da altura aqui ó vai ficar bem legal que ele fica fixo lá se quiser até deixar um pouquinho maior ó py3 aqui ó ficar um pouquinho mais destacado ó já fica bem legal show

de bola então deixa até até aumentar um pouquinho aqui então Olha que bacana né então ele já fica sempre Os itens vão passar embaixo já tem ele aqui agora falta o nosso modal Vamos fazer um modal o modal Posso até fazer em cima do nosso footer aqui ó vou criar aqui comentário modal cart duplicar aqui V modal cart Então vou criar uma div aqui e vamos lá entender como é que a gente pode fazer a estrutura do HTML desse cara então a gente pode pensar o que quando esse modal tiver aberto ele vai ter sempre

uma máscara por trás que vai ser uma corzinha ali que quando a Gente clicar a gente vai vai fechar ele e eu quero que ele fique sobre absoluto na tela na frente de tudo né então vamos fazer isso aqui vamos lá eu vou vir aqui deixa eu Minimizar minha cara aqui dentro dessa div aqui a gente vai colocar aqui dentro tá dentro dela a gente vai colocar uma Class eu vou colocar a cor de fundo que eu quero por exemplo olha esse nosso modal aqui eu quero que tenha um BG traço Black w traço full

porque eu quero que ele pegue A largura 100% e h traço full também que a altura 100% dentro dela eu quero colocar onde vai ter os itens aquela área Branca então de dentro dela eu vou ter aqui uma Class onde vai ter o BG White um p traço 5 Vou colocar aqui e rounded traço MD para ficar com a bordinha arredondada eu vou colocar aqui que vai ter um H2 por exemplo meu carrinho e eu vou salvar pra gente visualizar como que está ficando salvei aqui e eu quero que ele fique Sobre a tela Então

essa nossa div que está por volta ó a div que tá Por volta aqui que vai ser aquela área escura que tem um BG Black a gente vai vir aqui para ela e eu vou falar olha você vai ter uma posição fixa na tela top zero left zero também então se eu fazer isso aqui eu vou falar que ele vai ficar sobre a tela E aí eu quero falar também que ele vai ficar em cima de tudo tá em cima até aqui do nosso cart então vou passar aqui Z tro 9 abre e fecha Colchetes

vou passar aqui 99 salvei Vou atualizar e Maravilha tá vendo que agora tá vendo que agora se eu puxar isso aqui ó ele tá tudo alinhado tudo preto Só que eu não quero tão Preto né o black bar 50 a gente dá ele como 50 % de opacidade então se eu atualizar isso aqui deixa atualizar o meu Live server daí el demora um pouquinho a gente já tem ele ó tá vendo que agora ficou com essa cor escurinha então quanto mais eu passo perto dos 100 mais escuro fica né eu vou Dar aqui uns 60

60 fica legal só que eu quero centralizar também né então aqui nessa nossa classe eu vou passar também um Flex items Center e um jfy traço Center então ele vai centralizar tudo que tiver aqui dentro ó se eu salvar ó ele centralizou o meu carrinho aqui perfeito então agora o nosso carrinho já tá Centralizado vou diminuir aqui pra gente criar o mobile first e eu vou falar para ele Ó que esse cara esse nosso item dentro ele vai ter uma mínima Traço w traço abre e fecha colchete e a gente vai passar aqui 90% ou

seja vai ter uma mínima largura de 90% então se eu atualizar isso aqui às vezes ele demora um pouquinho para atualizar ó a largura mínima do nosso item dentro ó 90% de largura se eu aumentar aí não fica tão legal né nosso carrinho não pode ser tão grande assim no dispositivo maior então eu posso vir aqui aplicar responsividade Então olha MD dois pontos mínimo w traço Abre fecha colchetes de 600 Pixel por exemplo então quando tiver numa largura maior que 768 eu vou passar uma mínima largura de 600 Pixel então ó se eu atualizar Olha

que bacana Agora ele fica 90% quando tiver menor quando tiver maior ele limita nessa largura mínima de 600 Pixel que eu passei já fica bacana né a largura bem legal então agora aqui dentro a gente pode fazer o nosso carrinho né então aqui dentro nosso título Vou colocar aqui uma Class text Center fonte traço bold e um text traço 3 XL para deixar não um pouquinho menor né uns dois XL já fica mais legal e também vou dar aqui para ela um M me de dois pra gente distanciar um pouquinho aqui embaixo dentro aqui dessa

div né a gente vai ter então aqui embaixo os itens do carrinho Só que os itens do carrinho eu ainda não sei qual que é os itens que você vai adicionar porque isso vai ser gerado dinâmico Quando você clicar lá no botão vai ser dinâmico né Então vou deixar isso pra gente fazer na parte de interatividade que a gente fazer com JavaScript então vou deixar aqui mas a gente pode fazer o quê Já definir aonde que vai ser Acontecido isso então aqui baixo depois do nosso título eu vou dar aqui uma div eu posso falar

olha aqui dentro Eu vou ter um ID por exemplo id e esse ID vai se chamar cart tro items que é onde vai ser os itens do carrinho eu vou colocar também uma Class Flex justify justify aqui between por exemplo um MB de dois cada item e Flex Call aqui para cada item ser um abaixo do outro Então a gente vai jogar aqui dentro os itens do carrinho depois os itens do carrinho que mais que a gente tem né a gente tem aqui o endereço o preço total então depois aqui eu vou colocar aqui por

exemplo parágrafo que vai ser Total dois pontos vou criar aqui um spam e aqui vai ser o total vou deixar em 0.00 que ele vai começar Zerado né vou dar aqui um ID também cart traço total e esse parágrafo vou dar um Class fonte traço bold também beleza depois aqui a gente vai ter também mais um parágrafo que vai ser por exemplo endereço de entrega endereço de entrega vou dar aqui também uma Class fonte traço Bolt e depois dela aqui a gente vai ter um input para você digitar né então um input Zinho aqui pro

cara digitar por exemplo o endereço Vou colocar aqui um Place holder digite seu Endereço completo Vamos colocar aqui para ela um ID também chamado address pra gente depois identificar Vamos colocar também uma classe w traço full Border traço dois e um p traço um aqui para distanciar um pouquinho vamos ver como é que vai ficar Vou atualizar beleza vamos melhorar um pouquinho essa borda vamos aplicar para ela um rounded para deixar ela um pouquinho arredondada e um m de um para distanciar um pouquinho o externo em cima e embaixo Desse cara ó distanciou um pouquinho

tá o nosso P aqui endereço de entrega Eu posso também passar para ele um MT de do aqui para distanciar um pouquinho ou até de quatro distanciar um pouquinho do total tá beleza colocamos aqui o nosso input depois dele eu quero também colocar aqui depois o input um parágrafo que vai ser quando você tentar enviar sem digitar o endereço então quero colocar aqui por exemplo digite seu endereço completo E aí eu quero que seja Uma Class text TR Red traço 500 Maravilha e vou colocar até um ID para ela um ID aqui chamado address tro

warn que basicamente caso dê um erro né a gente vai fazer aparecer isso cara Só que eu não quero que ele apareça eu quero que ele comece escondido então vou passar para esse parágrafo uma classe aqui também uma Class chamado Hidden Ou seja a hidden nada mais é do que um display nono ou seja esconde da tela para mim é só isso então a gente esconde Da tela agora para finalizar a parte final aqui do nosso cart é a parte dos botões aqui então vamos lá depois desse parágrafo dentro da div aqui ainda eu vou

criar aqui uma div dentro a gente vai ter os dois botões né então botão fechar e o outro botão vai ser finalizar pedido né finalizar pedido e aqui então eu vou colocar aqui no fechar um ID Close de traço modal traço btn e aqui embaixo a gente vai ter o finalizar pedido que vai ser um ID vou chamar de Checkout traço btn e uma Class de BG traço Green traço 500 text traço White PX de 4 e um p de 1 aqui só pra gente dar um distanciamento na esquerda e na direita em cima e

embaixo e também uma cor de verde ali então perfeito né ah deixar um pouquinho arredondada também um rounded aqui ó bordinha arredondada fica legal agora a div que tá em volta eu quero falar ó olha um vai ser ao lado do outro mas cada um vai ficar no seu canto então essa div a gente pode dar Uma Class com flexbox items Center just fy TR between para cada um ficar lá no seu canto e um MT de quro aqui ó ou até cinco para distanciar um pouquinho e o Full para ele seguir sempre 100% da

largura que tiver na interface beleza ó ficou sensacional então agora a gente tem aqui já basicamente todo o nosso modal Então olha que bacana que ficou claro que os itens a gente vai ter eles aqui quando a gente a gente adicionar só que esse modal eu quero que ele comece Escondido Então o que a gente vai fazer é por enquanto ele começa aqui ó normal com flexbox perfeito né mas o que a gente vai fazer é eu vou tirar o flexbox eu vou tirar daqui e eu vou adicionar aqui no final a classe hiding nada

mais é do que o display non Ao invés dele usar o display flexbox ele vai começar com o display non então ó ele começa invisível e quando a gente clicar por exemplo em ver meu carrinho depois a gente nada mais é do que vai fazer para Ele poder Opa deixa eu Minimizar adicionar então eu vou fazer o quê remot a hiding e adiciona o Flex automaticamente Ó aparece o modal perfeito Então vou começar ele ao invés do Flex Hidden dentro aqui da nossa div em volta do modal com isso ele começa Ó escondido então a

gente não vê ó não existe ele aqui uma coisa que eu vou fazer também ó lá no nosso aqui do carrinho a gente colocou dois de exemplo eu vou colocar zero né zero aqui ó zero Então tenho zero itens no carrinho Bora dar uma revisada Então antes da gente finalizar vamos ver o que a gente fez aqui então primeiro a gente configurou o ambiente usando te o ind aqui conhecendo as classes e mesmo que você sentiu alguma dificuldade que você tá começando agora com teu ind Não Tem que decorar tá a documentação é muito legal

para você procurar por exemplo Ah eu quero ver aqui text color qual que é os nomes aqui por exemplo a gente tem todos os nomes Das cores eu quero por exemplo alguma outra propriedade como fonte size clica aqui no Font size ele tem ó text SM qual que é os tamanhos então ele tem todos os tamanhos aqui isso é muito legal que essa documentação é muito bacana E além disso né a gente então começou sempre trabalhando no mobile first então a gente criou bastante coisa aqui né então a gente já criou aqui ó mobile first

Então olha que bacana né já ficou ó responsivel então a gente deixou aqui ó As bebidas já temos aqui tudo isso certinho a gente colocou também em cada produto ó se a gente lembrar em cada produto no botão a gente colocou o data name o data Price que a gente vai usar para pegar depois a gente colocou uma classe que a gente vai utilizar para saber também se Você clicou nele depois clicamos aqui já colocamos aqui o nosso iten Zinho aqui Verde perfeito nome da Hamburgueria né Essa logo aqui primeira lá no nosso heer essa

logo que a gente Usou aqui poderia ser até uma logo da da logo do hamburg né aqui eu não tenho a logo de nenhuma Hamburgueria aí eu usei a Hamburgueria padrão aqui que a gente tem coloquei um hambúrguer tá então agora a gente finaliza mas para finalizar esse projeto aqui a gente poderia trocar a fonte né E aí Claro é algo opcional mas eu vou mostrar para vocês pra gente fazer isso aí bora lá então pra gente fazer isso ó Minimizar isso aqui deix eu abrir aqui o Google Que abriu na outra aba aqui né

vou abrir o Google Vou pesquisar aqui ó fonte Roboto geralmente ele aparece ó do Google fonte a primeira o primeiro iten Zinho aqui tá vamos usar a fonte Roboto no nosso projeto Então como que a gente pode fazer aqui dentro do Google fonts eu posso clicar aqui ó é dentro da Robot né que é a fonte que a gente quer utilizar eu vou clicar aqui ó get Font tá E aqui eu posso também ó vir aqui ó get Ed code Então a gente vai clicar Aqui só que eu não quero tudo né eu vou eu

não quero todas as fontes aqui ó eu vou tirar algumas por exemplo 900 eu não quero essas coisas aqui eu não preciso deixar isso aqui sem e medium também aqui não precisa vamos deixar aqui ó desabilitar tudo isso aqui a gente vai desabilitar só apenas aquelas que a gente a gente quer então vou usar aqui por exemplo eu quero pegar aqui ó a 400 eu quero pegar a 500 eu quero pegar a 700 essas Três Fontes aqui já é já é Bacana aqui e agora que a gente clicou nelas ele vai gerar pra gente aqui

um arquiv inho de link tá então vou copiar esse linkzinho aqui ó Tá vou vir aqui em cima e aí eu vou colocar por exemplo pode ser em cima aqui do nosso link do do fonte awesome vou colocar o linkzinho aqui vou dar um tzin aqui deixa eu ver eu acho que faltou alguma coisa eu copiei faltando alguma coisa né Deixa eu copiar aqui de novo ó beleza coloquei aqui ó control V só lembra de fechar Cada tagz inha fecha cada tagz inha aqui ó com a barra perfeito então aqui é o pré Connect pra

gente carregar essa fonte aqui pra gente poder utilizar dentro do nosso CSS dentro do projeto então aqui a gente tá carregando a fonte salvei depois disso a gente precisa agora usar no CSS só que a gente vai usar Não CSS puro igual tá aqui né a gente vai usar dentro do tewin então pra gente usar ela como é que a gente pode fazer a gente vai vir dentro lá do nosso Arquivo de twind config ó twind config tá a gente vai vir aqui ó extend em cima desse extend aqui ó dentro do team ó em

cima aqui dele eu vou ter aqui o nosso Font Family dois pontos abre e fecha os Chaves cuidado coloca uma vírgula aqui depois e eu vou falar olha a fonte S que é a fonte padrão aqui eu vou usar o que eu vou usar a fonte que a gente portou qual que é o nome que a gente usou é a Robot ó Com r maiúsculo tá então Robot Opa Roboto vírgula caso não consiga carregar aí ele vai usar uma Sans serifa que é a fonte que já estamos utilizando né que é a padrão do sistema

sem serifa então se eu salvar Agora posso voltar deixa eu ver se ele tá rodando ó se ele parar de rodar assim ó igual parou de rodar o meu CMD dá o npm Run espaço Dev só para ele rodar de novo Às vezes acontece tá rebuild aqui deixa aguardar ó deu um Don então lembra de ter salvado lá o seu arquivo do T config agora a gente pode Olhar dentro do projeto vamos lá dentro do projeto e já vai ter alterado né Deixa eu dar um F5 aqui já vai ter alterado o nosso proj projeto

ó se eu tirar aqui ó e eu não usar a Robot ó se eu salvar salvei aqui e aí se eu atualizar agora ele já vai est sendo aplicado a Roboto ó então se eu atualizar já tá sendo aplicado a Roboto Ah se você quiser outro por exemplo Ah não quero a Roboto por exemplo uma outra que eu gosto de utilizar bastante deixa Eu colocar aqui que eu vou remover ela deixa eu pesquisar aqui por exemplo a Poppins que eu gosto bastante por exemplo popping for selecionar ela você pode vir aqui ó get Font tá

E aí eu vou vir aqui que eu quero pegar o código para usar Deixa eu tirar todas elas aqui ó vamos pegar só a a padrão que é 400 pegar a medium que é 500 e a bold né que é a nossa 700 aqui por exemplo vou copiar aqui o código de Ed dela vamos lá dentro do nosso index P HTML vou tirar Aqui o link vou colar aqui o link agora dela deixa eu colocar aqui os fechamentos da tag salvei agora a gente Instalou a Poppins ó o nome dela aqui salvei dentro lá do

nosso tnd ó vou mudar aqui a Sans a gente vai usar agora Poppins ou San serifa então se eu salvar isso aqui agora se a gente voltar dentro lá do nosso projeto ó lembra de conferir se ele ainda tá rodando dentro do nosso projeto a gente vai ver ó que ela Alterou agora eu tô usando a fonte Poppins aí que é bem legal também ó se eu atualizar Olha que bacana já tá usando ela aqui então ficou sensacional vou até deixar essa fonte aqui ficou muito massa o nosso projeto e agora eu quero ver aí

como é que ficou o seu projeto como é que já tá o seu projeto também então marca a gente lá no Instagram Tira uma foto aí você fazendo marca a gente lá no Instagram lá no nos Stories para mim repostar para mim ver Como é que tá ficando o seu projeto também então te vejo agora na próxima aula o link sempre vai estar aqui embaixo Caso vocês não consigam achar aí então sempre eu vou deixar aqui para vocês pra gente agora finalizar esse projeto colocar esse projeto no ar e adicionar as funcionalidades dele né Eu

até deixei já aberto aqui o meu notion pra gente colocar as funcionalidades para funcionar realmente né pra gente fazer elas com o JavaScript passo a Passo aqui que por enquanto a gente criou a parte de estrutura de layout responsividade já ficou sensacional mas por enquanto a gente não tá adicionando não estamos vendo o carrinho não estamos fazendo a parte funcional então com isso a gente vai fazer com o JavaScript na próxima aula então te vejo lá posta aí que eu quero ver curte aqui comenta aqui embaixo também então eu te vejo lá no próximo vídeo

pra gente finalizar e pra gente concluir esse projeto que tá Sensacional