Responsividade na Prática | Masterclass #08

E aí a fala dele beleza mas que brito na área aí hoje nós vamos estudar sobre responsabilidade no css como é que agente faz para o nosso layout ficar compatível com diversos dispositivos né eu vou clicar aqui f12 e vou mostrar para você eu mudando alguns dispositivos aqui e vendo esse layout sendo completamente adaptado ao dispositivo olha que legal que tá acontecendo aqui Então vou colocar por exemplo ipad e ele está adaptado ao ipad vou colocar um iphone e na cadê o iphone o iphone ele está adaptado iphone né eu posso que ver o menu

que está se adaptando eu posso ver aqui um um modal que tá se adaptando também né tocando um vídeo alguma coisa assim legal então nós vamos fazer isso aqui hoje eu espero que você tenha um bom tempo aqui disponível para você estudar a fundo como que funciona a responsabilidade aqui no nos nossos Desenvolvimentos web beleza então bora lá o bacana então a gente vai começar a falar sobre responsabilidade um assunto muito mais muito importante na área de programação quando a gente vai fazer nossos layouts né e a gente quer adaptar esse layout para que ele

funciona legal em dispositivos diferentes né em telas de tamanhos diferentes sejam elas telas do desktop ou telas de tablet ou telas de celular a gente está falando de Responsabilidade gente está falando de uma maneira de tratar o nosso layout para que ele funcione é em diversos dispositivos tá quê que a gente vai fazer eu vou pegar aqui esse projeto eu vou deixar disponível para você já temos o windows nele tá preparado o temos um já o script básico eu já vou falar o que cada uma dessas vezes faz e temos um css já preparado também

eu vou abrir aqui com live-server tá vou trazer aqui para gente dar uma analisada no que é que Temos aqui vamos lá então temos um modelo de site beleza que batemos temos aqui textos menos é logo imagem botões temos o tipo de grid para mostrar a imagem temos um formulário coisas básicas aqui que nossos geralmente nossos designers nossos layouts né eles levam né beleza então a partir disso aqui eu vou só mostrar uma coisa para você eu vou abrir o f12 débitos tá f12 no seu no seu computador provavelmente vai funcionar Se não funcionar você

clica com o botão direito e coloca inspect que ele também vai abrir aqui pra gente o débitos a que essa ferramenta do chrome que vai ajudar a gente vai poder analisar um pouquinho melhor no site muito bem então a partir dessa ferramenta a gente pode e movendo o site aqui tá vendo da esquerda para direita direita para esquerda e aqui você consegue ver qual que é a proporção que a gente tá tendo tá então essa proposição medida em pixels fala para Gente que tamanho evitar o nosso viewport viewport seria essa parte apresentada do nosso layout

tá bom então nosso viewport nesse caso está aqui vai 1280 legal se aumentar mais ali para 1385 é o já tá mudando bom essa a gente tem civilport aqui mínimo vamos colocar aqui 1000 1000 e pouquinho né a gente vê que nosso layout também legal ele tá bem ao meio da nossa página né não tá esquisito nem nada então o foco que vai ser a Gente entender legal como que a gente pode fazer se site melhorar o se adaptar quando a tela for menor olha alí menor do que nesse caso 980 aqui depois eu vou

mostrar pra você que foi o que eu deixei então veja bem se eu tô alterando essa tela né veja que ela fica toda desconcertada né toda esquisita não tá se adaptando né ah o tamanho quando eu vou movendo aqui então se eu tivesse um dispositivo móvel provavelmente eu veria essa tela dessa forma e não fica muito Legal tá tô legal então entendendo essa parte vou voltar aqui para nossa aplicação aqui eu vou rapidamente só esconder isso daqui para que a gente possa analisar então o html então é o html comum né a gente tem aqui

a criação dele com doc type nós temos o gás e aí a gente tem aqui somente duas propriedades o twitter e o link tá bom somente isso que temos agora e a gente vem aqui tentando fazer um html semântico né temos aqui um header onde Está levando a logo e o menu temos aqui umas action uma sessão rir o que está levando aquela parte de texto juntamente com a foto temos aqui o meio e traz presente os conteúdos legal temos aqui uma outra sessão chamada forme além do mais a gente também já tem aplicado que

mudou na quando eu clico que ele abre o moldou para mim alessandro então aqui a gente ainda tem um script né que que esse escrito está fazendo né vamos dar uma olhada primeiro no script e depois a Gente olha o css é onde a gente vai passar mais tempo tá esse script bem tranquilo ele está criando para mim os cards ali né os vídeos né então seu elimina inscritos aqui colocando nome errado por exemplo e volto aqui você vai ver que eu só tenho um card exemplo e não tenho mais nada aqui dos cartões né

então voltando aqui escrevendo corretamente a todos os cartões que eu configuro aqui tá bom simplesmente crio aqui um objeto Uma rei que tá trazendo para mim e diversos vídeos tá bom vem aqui eu faço map fazendo um clone ele do cartão exemplo que eu tenho no meu html que é esse cartão aqui no no meio entendeu nem card então eu tenho um card isso aqui tá vendo somente esse aí eu pego e como modelo e enfim faço tudo aqui essa estratégia de criar para mim os modais legal e também adiciona ainda as estratégias de quando

eu clicar nele ele vai abrir my friend e tudo mais Tranquilo não é o foco né do vídeo foco do vídeo a gente faz esse layout funcionar legal então eu vou abrir aqui para gente agora o style.css pra gente começar então já aplicar as estratégias de fazer esse layout ficar responsável legal então pra gente poder fazer isso né a gente vai analisar aos poucos o que é que temos aqui até agora tá primeiro detalhe que nós precisamos eu vou escrever que já não redime a gente quem sabe as unidades e unix eu vou Escrever tá

unidades de medidas do css unidades ou ss unix inscrever-se acesse e ônix é que seria as seriam unidades de medidas do css então a gente precisa entender algumas delas por padrão quando a gente está construindo sites a gente acaba usando bastante o pixel tá vendo a gente acaba usando bastante bastante mesmo o pixel né então o pixel aqui ó pixel sendo a unidade mais padrão quem está usando ele é uma ideia de um layout mais um layout mais fixo tá é o leves Mais fixo esse esse layout mais duro aqui enrijecido na então quando o

diminua aqui ele não não tá se adaptando né essa aí da hilux eu tá bom ele vai ser um layout mais fixo muito bem entendendo esse primeiro princípio eu posso mostrar para você o que é que faz um layout mais fluido né o layout o fluido e seriam um uma das unidades de medida seria a porcentagem tá bom seria a porcentagem pixels Em pixels e aqui a porcentagem tá bom beleza então entendendo isso veja bem eu tenho que a sessão do header container tá e analisando o nosso layout o que é a redor container header

container tá aqui então é esse cara que está marcado aqui quando passa o mouse em cima fica marcado ali o que tal meu header container legal então quê que ele tá dizendo ele tá dizendo que ele tem uma largura de 980 pixels tá então primeiro passo que eu posso fazer para isso Melhorar é fazer essa largura ficar em porcentagens agora porcentagem ela vai dezero a 100 porcento tá então se eu coloco 100% o que é que vai acontecer com o meu layout agora 100 porcento tá vou abrir e olha que que tá acontecendo no header

tá vendo e vou fechar você percebe que ele está acompanhando tranquilamente o meu fio porte né então seguiu porte está grande ele está acompanhando ele tá menor ele está acompanhando então isso Aqui é óbvio tem a ver com o tipo do léo que você quer fazer às vezes você vai querer fazer uma ideia que fica sempre aqui fixo né e esse sempre aqui acompanhando você já sabe as estratégias beleza então é é uma escolha de layout que você tá fazendo aqui bom legal então entender nessa parte olha que legal eu tenho uma largura de nesse

caso de 100 porcento só que eu perdi aquela minha aquela minha borda que eu tinha quina que aquela minha estratégia de deixar Ele no máximo a 980 pixels então olha essa palavra que importante no máximo a 980 fixos então esse é o segredo para gente já aplicar uma outra estratégia que é o max wi-fi está essa estratégia é muito importante então o máximo que eu quero é que fica a 80 pixels então olha que acontece quando leal está bem grande agora quando ele começa a ficar menor perceba que ele está se adaptando já né então

já estamos aplicando estratégias de Responsabilidade nesse layout isso é muito muito muito legal né então nisso eu posso fazer isso para todos então cerveja que eu deixei uma largura de 100 porcento entretanto eu falei o máximo que eu quero é novo 180 pixels legal vamos aplicar isso agora então então aqui eu posso até fazer uma colônia aqui o índice máximo marcos witt tá 980 pixels e esse daqui é sem por certo tá então essa mesma estratégia ela vai se repetir em outros momentos do meu layout Quais são os outros momentos né então são esses momentos

aqui ó nessa parte dessa parte nessa parte legal então quê que eu vou fazer aqui vou fazer uma busca para ver aonde é que eu deixei os novos 180 pixels antes eu tenho tão um de quatro então vamos para o próximo o form form né então eu vou trocar isso daqui pela estratégia legal próximo e aqui já tá ah tá isso aqui é o que eu acabei de fazer aqui mais um vou trocar também legal vou procurar o próximo Quiser o cards vou trocar também e assim deixa eu ver apliquei acredita que eu fiquei para

todos eles estão salvei e voltei aqui e agora não preciso ficar atualizando eu tava atualizando mas você viu que ao eu abrir aqui o index html eu não sei nem se eu comentei sobre isso eu abri com live-server o médio server é um plugin aqui do vs code né então eu posso abrir a parte de plugins aqui eu tenho live-server que é o que eu estou usando aqui tá ele cria um servidor aí que ele Fica atualizando sozinho para mim não precisa ficar atualizando nada então ele é bem legal nesse caso para mim ok então

voltando para para o foco então olha só quando eu venho aqui então começo a mexer na adaptação perceba aqui é os outros elementos estão recebendo aí uma certa de pedir adaptação perfeito e ainda obviamente não é só isso que a gente tem que fazer mas você pode perceber que alguns deles já estão bem legais uma coisa que eu vejo aqui que eu Percebo que eu acho que ficaria mais interessante ao invés de eu deixar sem por cento não deixa eu voltar aqui nesse contexto pode ser aqui mesmo ao invés de deixar sem por cento eu

poderia deixar uns 90 por cento e noventa porcento porque é automaticamente ele deixa para mim uma um respiro ao lado tá bom então volta aqui no meu style ok então vou procurar todos eles novamente que tenham isso aqui tá max wilson vamos fazer essa busca aqui e tudo que for cem porcento Eu vou voltar noventa porcento vou deixar noventa porcento noventa porcento e vamos para o próximo noventa porcento é mais um vez por cento e cachorro então vou salvar aqui vou voltar nessa ideia então você percebe agora que ele já fica com espaço aqui né

o certo respiro para o nosso layout tá ainda não é tudo né não é suficiente mais algumas coisas já começam a fazer sentido aqui tá a gente tem que vir arrumando obviamente o restante legal então olha que massa que Já é só a gente entender a primeira parte que é o layout fixo com layout fluido né um layout fixo sempre quem estiver pixels ele será fixo aquela parte será fixa existem outras estratégias do fluido também as estratégias do alto tá que a gente já vai olhar que seria uma coisa automática né que seria uma ideia

automática exemplo marcam de ideias automáticas bom a maioria aqui das alturas que você tá vendo elas são automáticos legal então Se eu venho aqui numa altura de chover nesse nesse cara aqui mesmo tá nessa nesse h1 aqui nesse h2 aqui tá se eu coloco aqui uma bom dia por exemplo 20 pixels 20 fixos você vê que ficou tudo encavalado ficou tudo esquisito né mas agora um raiz alto né que já está automático você percebe que ele se adapta a altura do texto tá bom então isso é uma outra pegada e às vezes a gente vai

precisar usar e a gente tem ainda vou tá aqui além do alto Não é uma ideia automática a gente tem ainda o viewport aids viewport height então você me bloquear viu porte haiti e se você ainda não pegou ideia o rio porte é o display ta bom é o que aparece aqui na sua tela então se sua tela é um oval o seu viewport vai ser o tamanho do seu bobo tá é essa ideia aí do viewport tornássemos viewport-fit e temos o viewport a willys viu o esporte me diz beleza we ok então só outras

duas estratégias que uma delas Está aplicado aqui por exemplo no meu na altura do meu bode do meu html que eu coloquei sem viu rite tá então a uma coisa interessante saber que o rádio também vai dizer o sem assim como a porcentagem legal então se eu tenho aqui vamos lá essa parte aqui de novo do h2 e eu vou colocar aqui o raio dele vai ser então sem vai 100% viewports o que que aconteceu ele pegou todo o meu viewport toda essa parte que eu estou vendo né que está aparecendo na minha tela e

Adicionou a sem então quando eu der a primeira rolagem que você vai ver o restante do controlar primeiro rolagem já começou o restante do conteúdo tá porque eu falei que esse cara que seria sem viu aids então poderia ser sem 15 viu aqui por exemplo tá poderia ser 50 viu rite então ele vai pegar vai fazer um cálculo de toda a altura a altura e vai colocar 50 tá legal é que mais eu falei da largura por exemplo né então você usa willys dele que está aqui Vamos colocar sem viu eh windows ele vai ficar

dessa forma na viewport willys ok então aí você viu que ele estendeu tu a todo viewport deu uma rolagem aqui embaixo e continua o restante do controle tá coisinhas aí interessantes para a gente poder entender melhor os nossos layouts responsivos então a primeira estratégia que a gente usou foi fazer um layout fluido agora dentro dessas unidades de medidas a gente ainda tem textos tá textos fixos e textos Incluídos também nos seus fixos a gente precisa entender uma coisa bem legal bem interessante a respeito de textos tá a gente tem o seguinte cada pixel cada um

pixel equivale a 0.75 pontos esses pontos há mais ou menos o que a gente tem lá do word né então por exemplo 16 pixels que são geralmente geralmente é o padrão de textos aqui nos nossos navegadores equivale a 12 pontos na lá no word por exemplo tá bom então essa é uma Informação legal gente saber e geralmente você você olhar aqui comigo nós temos aqui em textos né então font-size vou procurar aqui ó textos a gente está aplicando pixels legal mesmo ideia a gente tá usando essa ideia é padrão agora os textos fluídos a gente

tem outras unidades de medidas que são 1 cm tá esse não se aplica só texto não tá ele se aplicam também a outras coisas mas eu estou falando aqui em termos de textos nesse momento tá então a gente Tem que um pixel 16 pixels legal e o m o que que ele significa significa que ele vai ser multiplicado multiplicado pelo pai eu vou escrever dessa forma tá ele é muito e pelo pai que significa isso marcão já me mostra aí na prática para não ficar só no blá-blá-blá né então a gente tem que o header

nav o l a a gente tem uma font-size de 14 pixels legal cantores pics tá então vou começar colocando 2 cm tá 2m mas primeiro eu vou colocar aqui o Pai dele que é esse li você sabe que ele é o pai eu vou colocar um font-size hein as fontes size de 14 pixels bom antes de colocar o 2 cm eu vou colocar 1 m tá bom um m se você entendeu que ele vai ser multiplicado pelo pai imagina que é um vezes 14 e acredito que nada vai mudar meu layout beleza nada muda então

daquela atualizada e esse é o layout que está vendo beleza agora se eu coloco 2 cm no a vou salvar e olha só o tamanho não ficou ele pegou e multiplicou seria O mesmo que eu pegar aqui 14 colocar 28 pixels tá bom 28 pics aqui ele multiplicou esse aqui tá então voltou fiel mesma coisa muito bem entendendo isso vamos dar uma aprofundada mais agora nesse daqui então a gente já entendeu que o m vai multiplicar então se eu colocar 3 cm três vezes 14 muito bem e eu falei que ele multiplica o pai não

é isso então no wely eu vou colocar um font-size em esse fontes aqui ó vou colocar esse fomos aqui no l aqui no li Eu vou colocar 1 m por enquanto e fica mesma coisa está e 1 m aqui também para que fica mesma coisa vai voltar o layout que tava original tá agora o seguinte eu vou multiplicar e esse daqui por 2 cm então ele vai multiplicar por ele vai ficar 28 tá bom vai multiplicar isso aqui agora é o seguinte eu vou multiplicar daqui por dois também que que é que vai acontecer e

esse é o grande lance olhos o tamanho que ficou ele pegou essa multiplicação Que já era 28 e multiplicou de novo perceba que ele pegou esse a gente vem aqui e coloca então o que ele ficou que seria 56 e a gente deixar 1 m aqui e 1 m você vai ver que é a mesma coisa do gigantão aqui beleza ficou a mesma coisa gigantesca aqui beleza então é isso é importante entender sobre as unidades de medida mm versus o r e m agora eu falei urm o rn é multiplicado pelo root tá então veja

esse aqui na frente então ele vai multiplicar pelo root quem é rute é O cara a fusão aqui que seria o nosso htmlbody tá é o último então vamos ver que tamanho que tá o texto no root por exemplo então eu venho aqui no bode vem aqui no deixa eu ver aqui compiuter que eu preciso mostrar tudo só clicar aqui no canto mostrar todos que eu ver se dá para ver bem legal né porque senão fica meio difícil ver eu não vou dar o foco aqui para gente a beleza aqui do filtro eu vou colocar

Como font size e você vê que o padrão do rush é 16 pixels tá bom 16 pixels beleza entendido essa parte agora você vai ver como que funciona o rpm aqui não entendi quem fez então gente fez que o l é 14 pixels a gente fez esse daqui 2 cm então vou tirar esse 2 cm tá vou tirar esse 14 pixels também tá beleza e o que acontece agora se eu jogar 2rm 2rm ele vai vir aqui e olha só multiplicou e perceba que ele está respeitando o que foi definido para o root que é

o html então vou Aplicar uma estratégia aqui bem bacana primeiro de tudo eu vou pegar o meu html tá no lugar ml eu vou colocar uma fonte aqui ó html eu vou colocar um som size com essa seguinte estratégia 62.5 por cento isso vai significar o quê eu vou escrever aqui a cada a 1 m ou rm tá bom nesse caso a gente vai usar rma cara não a cada um rm é será considerado 10 pixels tá bom será considerada dez picos beleza então agora no bori eu vou colocar aqui que ele tem assim o

padrão Dele do font size de 1.6 rn tá bom que seria na verdade o padrão de 16 fixos na escrita que eu tô fazendo né esse aqui eu falei que o font size vai receber uma porcentagem tá então eu tô reduzindo porcentagem fazendo com que o html tem uma porcentagem ele vai observar o parente dele que é o seu rosto né que seria html é o root né então ele vai observar o root e vai então aplicar 1.6 rm fazendo com que essa fonte depois seja o mesmo que 16 pixels quando eu Voltar nada muda

aqui no layout tá tá tudo aí é do jeito que tava antes agora eu posso usar essas estratégias do rm para os meus textos tá aonde o que quando eu mudar a porcentagem você vê que a porcentagem é algo bem igual já falei algo que vai deixar mais fluido nosso layout e mais para frente a gente vai vir mudando é essa porcentagem aqui porque quando eu mandala ela vai mudar todos a baixo tá então a essa estratégia Nada está fixo aqui então quando eu mudo ela tudo abaixo que será mudado então exemplo se eu vi

aqui no html com ruth agora ele tá 62 mas eu coloque 50 por cento olha o tamanho que já ficou o texto ficou menor se eu coloco vamos colocar melhor ainda vinte por cento olha o tamanho que ficou texto tá bom o texto começou a seguir a ideia da porcentagem por enquanto eu estou deixando a porcentagem é fixa você pensar né é o apresentar de fixa mais Que daqui a pouco eu vou começar a trabalhar nela de outra forma por enquanto fica aqui já mudei esse aqui e agora vou dar uma analisada em outros textos

que eu tenho por aqui para mudar também né então e esse fontes aqui tá legal eu tinha deixado ele com o 14 né então 1.4 rn ele vai voltar c14 do jeito eu deixei né é posso aplicar em outros textos deixou procurar agora os furos sais que eu tenho aqui na fonte sais que a gente tá Trabalhando agora então isso aqui onde tá 36 pixels 3.6 rm vou para o próximo e o próximo inclusive os slides também eu vou alterar tá bom para 4.6 rm quatro pontos rm porque quando eu alterar depois daquele rútila quem

já viu html quando eu mudar porcentagem dele também será mudado online site e você lembra que winehouse tem a ver com a altura do do nosso texto altura da linha né do texto tá então seria legal também a gente já deixar mudada então aqui rm tá Pixel por rm o que mais daqui 1.6 rn também o próximo font-size da e eu acredito que todos foram até a nossa tem que ter mais ter mais então 6rm também para isso daqui são os ímpios né 1.6 rm se você rm é um ponto 8rm tão legal da gente

aplicar aquele estratégica fácil a gente pensar né gente não precisa ficar fazendo muita muita loucura para pensar Facinho só botar o pontinho e pronto aí lá em rádio também line-height vou olhar todos para ver se eu não esqueci algum por exemplo aqui ó 12.6 rn próximo online site próximo próximo aqui também 3.2 sexual iupi 3.2 rm o e show de bola pronto entendemos mais uma ideia muito interessante que são os textos fluídos e os preços fixos né já fizemos os layouts e tudo mais o negócio tudo mais veja que tudo isso a um mudei Alguma

coisa aqui que deu um bug aqui no meu e chefe que salvar esse cara não deixa eu ver que bug que deu aqui tá vamos lá olhar aqui eu acho que algum margem eu devo ter errado alguma coisa que ela pede coloquei um esse aqui então é o header e nove aqui é dermaville aqui agora não lembro que tinha aqui né era o 24 pivôs pronto vamos quatro pessoas beleza mike posso usar posso mudar esperem para 2.4 rm posso marcam pode pode mudar sim você tá querendo dizer Que também os perez você quer usar a

mesma ideia do rotina então o que tiver de pele no ruth você também vai querer aplicar o rm para que eles e também seguindo uma ideia mais fluida né dos prédios também quando a gente precisar e se precisar mudar o suelen tá bom então você pode fazer também nesse caso é não vou aplicar por enquanto caso seja necessário eu vou aplicar então aqui já vi nos textos vimos o layout né é o que mais que a gente pode pensar que A respeito já falamos tudo sobre eu acho que o mais importante sobre o iss único

já falamos já falamos tem outras coisas obviamente sobre css units na aula não é só sobre onix mais como que a gente vai usá-lo para fazer os nossos layouts responsivos beleza só que temos ainda problemas aqui né quais são os problemas os problemas são seguinte por mais que o texto é ele esteja funcionando com essa estratégia que eu estou usando ele não tava dando nada né quando eu tô fazendo Isso nada muda né o que que é que eu tenho que aplicar agora mas não preciso mudar além do mais tudo começa a ficar encavalado de

um certo momento para frente o que que é que tá acontecendo macau bom aqui vem outro entendimento muito legal que a entender então essas mudanças do viewport não é conforme o porte vai mudando a gente tem então é essa essa mudança numérica mesmo do viewport ea gente tem então essa parte de adaptar e Cada um deles quando agora vou mostrar uma ferramenta aqui para você que essa daqui ó logo levar isto bar vou dar um zoom aqui para você ver estou falando dessa ferramenta tá bom então quando eu clicar aqui você vai perceber que ele

já vem com a ideia de responsabilidade aqui tá e ele vem mostrando para mim alguns break-point se chama tracks são os pontos de quebra do nosso layout break-point então pontos de quebra do layout tá então olha só eu posso Inclusive até usar essa ferramenta para rotacionar o meu layout na ele vai pegar aqui e rotacionar então olha só duas coisas importantes para a gente entender sobre isso eu posso usar completamente essas idéias aqui tá aquele tá me dando por exemplo um ipad é uma ideia do google pixel né o que mais galaxy s o sucesso

estratégias posso usar a estratégia responsabilidade e posso usar estratégia dos break points que estão aqui ó break-point tá bom agora fica Aqui uma dica para você tá é não se você tá no começo e ainda não consegue no olho perceber que momento que seu layout tá mudando para que você possa adaptar ele né por exemplo aqui dá para ver já que tá bem quebrado algumas coisas né bom se você ainda não tá pegando o seu jeito vai de break-point tá bom sabendo que que você tem uma boa porque pequeno os mall tem um bobo médio

aqui tem um mobile large você tem tablet ou no break point de 768 esse amamentar um pouco Mais aqui ainda tem um laptop de mim 24 tá e aí tudo vai depender conforme até ela vai aumentando né deixa eu ver seu diminui aqui se eu consigo ver mais coisas tá aqui nós nesse caso a minha tela não consigo mais ver os brigões senão esses aí beleza mas você minha tela for maior zona ainda aí eu tenho mais brinque com isso aqui então a minha de e enquanto você ainda não tem a prática de olhar e

falar cara aqui meu leo Quebrou aqui eu preciso adaptar ele vai de break-points estar safe beleza então o que que é esses like força onde que eu vou aplicar isso por que que você tá falando disso bom vamos lá a gente precisa agora configurar nosso layout no índex devocionais aqui a gente precisa configurá-lo para poder entender civilport que eu falei entendeu os break-points né como que a gente vai aplicar estratégias com css para olhar o break-point falar aqui você vai mudar o Meu css então quê que a gente precisa fazer primeira dica né para a

gente poder lembrar disso sempre que você abrir um html novo se salvar ainda que html colocar quinho uma exclamação né aqui no vs code e aplicar um enter webert tá vendo que o emitir vai construir para você uma base de layout tá uma base de html nessa base ele coloca algumas coisas que ele fala que é importante e não só ele mas é ferramenta e fala que são importantes por exemplo Charsets a linguagem tá e esse cara é o mais importante para nesse caso o que a gente precisa então eu vou tirar daqui tá só

você ir para que a gente não precisa escrever tudinho e vou colocar aqui ele é o meta tá e todo meta toda essa parte do red aqui tá toda a parte do red ela serve como configuração do nossa página do nosso html tá e metas existem vários né você viu lá o charset lá falando que o tf era oito jeito de escrita aqui de texto o meta ele é um Cara responsável por vários tipos de metadados do nosso html tá bom então olha só esse metadado é o viewport que é o que eu tô falando

para você né então ele vem com uma propriedade aqui chamada contente né com atributo contente e aqui a gente precisa entender algumas coisas que ele tá falando aqui se são só duas por enquanto eu acredito que não precisamos entender muito mais que isso primeiro eu falar que o meu willys ou seja largura da minha Qual é a largura do the voice tá bom ou seja do meu dispositivo essa primeira coisa e unir início e michel scallion que seria a escala iniciar o tamanho dele inicial ele vai iniciar em 1.0 tá bom então vou salvar isso

aqui vou voltar para cá e quando eu modifico agora o meu layout você percebe que está um pouco diferente eu não sei se você conseguiu perceber por causa dessa parte do mais ele tem um pouquinho diferente do que tava antes tá não é lá grandes Coisas porque ainda não é o isso é só o início tá a gente tá só preparando html para receber a ideia dos break-point tudo mais que eu falei tá bom então e a escala inicial dois por exemplo esse cara inicial sei lá vou colocar 18 aqui e vou aplicar esse cara

olha que aconteceu tá bom ele botou uma escala inicial de 18 tá então ficou tudo muito grande quando ele entrou na no device tá bom lá no nesse modelo the device beleza então vai ficar inicial sempre um e tá Show outra coisa que eu vou fazer para você então ah entendi agora não css eu vou colocar lá embaixo do css o que é que eu uso aqui tá no css para poder analisar os meus break mães aqui é muito muito muito tranquilo tá nessa parte agora de adaptação de responsabilidade usando o media media é um

tipo de regra aqui no css na e a ideia por trás disso são os media queries eu não sei se você já ouviu falar disso se não ouviu será a Primeira vez né media queries então você pode ter dá uma aprofundar nesse depois então essa regra mídia ela tem um jeito de se inscrever que a gente vai fazer daqui a pouco e ela recebe que algumas propriedades algumas definições e no meio dessas definições não é aonde a gente aprende a fazer o mídia kiwi que vai observar break-points por exemplo por exemplo eu vou te dar

a seguinte situação a gente viu um break-point aqui que foi o break-point de débito por Exemplo que é o 768 e o nosso layout está se comportando a maneira tá bom então vou deixar ele aqui agora eu mídia eu posso usar então um max lewis por exemplo tá de 768 pixels legal eu posso usar o dessa forma quando eu faço isso aqui dentro todos os excessos que o colocar aqui dentro tá ele vai estar relativo ele vai estar olhando se a minha largura máxima chegou em 768 né se passar de 768 ele não vai aplicar

mas de 0 até 768 ele vai aplicar O que eu colocar aqui dentro né então coisa que eu posso ir observando né diminuindo aqui e observando por aqui 768 por exemplo aqui o meu grid já tá meio que pegando todinho né e ainda nem cheguei no 768 provavelmente ela 768 comecei a chegar aqui né aqui aí que eu percebo que o meu texto já começou a ficar esquisito né então olha só a primeira estratégico já posso aplicar aqui para e partindo daqueles princípios e já olhou antes por exemplo E eu vou colocar aqui que o

html tem um texto aqui na etec o font size dele é de cinquenta por cento tá bom quando eu faço isso perceba uma mudança bem drástica já no meu texto então meu texto aqui tá grande quando eu deixo aqui menor olha passou do 760 que que não tá aparecendo na deveria aparecer aí ó vai passar do 768 bom e olha que interessante o texto diminuiu né interesse diminuiu e diminuiu para todos aqueles que eu Apliquei o rm legal então todos os seus que receberam rn estão sendo alterado agora no seu tamanho bacana então isso é

uma coisa interessante a gente entender sobre os media queries e aqui seria a ideia deu adicionar via break-points tá bom via break-points entendido isso é outra coisa que eu posso então a partir do princípio então falei para você que se você tava bem no início observe os break-points vem aqui adiciona break points e tá tudo tranquilo né começa a Observar suas versões mais aqui ainda tem mais coisas para mexer nessa nesse layout aqui né aos poucos envolvendo que tem bastante coisa primeiro de tudo o que tá bagunçando a minha tela aqui nesse momento tá tá

bagunçando aqui esse grito aqui ele não está adaptado também ao tamanho a mudança tá só que o seguinte esse aqui vai ser bem legal que eu vou dar uma pausa aqui no mídia a promoção pra você como alterar esse grid sem precisar dos medíocres tá bom Então olha que dica legal que eu vou te dar aqui esse grid aí é esse cara deixa eu ver uma tá aqui né display aqui crit pronto é esse cara aqui aonde a gente fez aqui colunas fixas né 310 310 310 bom primeira coisa que a gente pensa quando a

gente tá aprendendo vídeo é colocar como flexível né então coloquei três colunas flexíveis e alguma coisa já ficou diferente mas não muito tá bom para esse momento aqui por exemplo já ficou interessante já não tá estragado No layout só que para cá quando ele vai diminuindo ele começa a calma esquisito porque o seguinte ele ainda tem três colunas mas aqui eu vejo que é um caso que dá para que o ser duas colunas uma coluna uma coisa assim tá então primeira coisa devia fazendo diminuições aqui de estratégias é eu posso trocar isso aqui por repito

e repito eu coloco 3 colunas né e nas três colunas eu falo o quê e aí eu vou usar que min max tá eu poderia fazer um fr tá não fr deixa eu Te mostrar o fs é a mesma coisa não mudou nada só que eu poderia colocar uma estratégia chamada mymax e eu falo que o mínimo que eu quero nessa nessa coluna seja você lá 250 fixos legal e o máximo dele seja um fr então é significa que o máximo de vai ser adaptado ou fr sempre a fração é do grid se você ainda

não manja muito de grid eu fiz já um vídeo aqui no canal de grid depois dá uma olhada né nesse vídeo que ensina os princípios básicos do vídeo então eu Tenho um flexível uma fraction chama-se fração tá que é a mesma coisa que ser flexível tá bom eu tenho um mínimo que há 250 então no mínimo ele vai ficar 250 pixels e o máximo dele é ser flexível tá então ele vai ter três colunas quando eu faço isso perceba que eu voltar para cá que ele ainda está tentando ali se adaptar dessa maneira que eu

pedi para ele tá ele tá meio bagunçando tudo mais mas ele ainda tem três colunas o que me interessa muito não são as três Colunas né eu quero que fique com menos coluna mas perceba que ele não ficou mais aquela tripinha se eu tinha visto crítico tinha ficado a tripinha tripinha por causa do flexível né então ele aumenta aumenta acima de 250 pixels mas quando chegar 250 pixels ele não vai diminuir tá esse a primeira ideia tudo bem então isso mantém o meu card legal mas mantém o meu áudio tudo bagunçado não é ainda o

que eu quero aqui vem uma baita de uma estratégia super legal que É o chamado alto fiat auto fiat aqui dentro desse dessa ideia do rebite juntamente com um max não é colocando esse alto fit você vai perceber que agora esse esse card que ele vai ser adaptado tá muito mais de uma maneira muito mais inteligente então aquele tá show de mim aqui tamanho a0 que beleza olha só que legal de show em nesse aqui então aqui ele precisou de duas colunas ele vai se fazer o alto fit dele e lembrando que ele vai continuar

num fr Mas quando eu chegar 250 também ele não muda mais ai que ele mudou aqui para gente ele se ela pediu para uma coluna que é exatamente o que eu quero na exatamente o cartão ficou três duas e uma eu não precisei usar o media queries mas eu tenho mais um momento agora agora eu volto já prendi aqui já entendeu essa parte né eu tenho mais um momento aqui de quebra do meu layout né que o momento dessa imagem aí é o momento de quebra tá sendo mais ou menos aqui ó no 600 chover

Aqui ó 630 vou colocar 630 tá 630 outro momento de quebra que esses caras eles precisam estar melhores organizados agora porque tá meio esquisito do jeito que está ficando então vou voltar lá para baixo vou fazer um outro mídia kiwi posso até copiar isso aqui tá vou colar aqui e aqui é o 630 tá ah beleza eu vi que não 630 algo acontece esquisito nessa nessa parte aqui eu posso ir aqui essa imagem né e dentro dela tá numa caixa no container Que esse container ele já está como display flex né em um display flex

então por padrão ele vai deixar tudo um ao lado do outro né os elementos ao lado do outro quando elementos eu tenho aqui uma div e uma imagem um ao lado do outro então primeira coisa que eu posso fazer quando ele chegar não 630 igual eu falei né vai colocar aqui um flex-direction por exemplo como colo tá bom colocando essa ideia como colo eu já deixei com que a imagem não atrapalhe mais o meu Layout ele tá lá mas não é que ainda tá trabalhando ele que que é vai ser outro cara que tá vai

ser outro momento e já chega ali tá então a imagem já chegou aqui já ficou interessante eu posso já fazer com que esse layout fique agora com meu texto amanhã tá difícil colocar aqui um teste align-center tá fica tudo alinhado o centro eu posso pegar com essa imagem tenha uma propriedade que chamado order menos um então que ele e vai colocar essa ordem a imagem ali Para cima tá e os textos ficam para baixo legal então são três propriedades css que eu precisei para resolver essa questão e uma coisa muito importante em saber né é

que o a responsabilidade gente tem que entender bem do css para poder vir aplicando se não adianta a gente entender essa mídia kiwis esses essas coisas que está aplicando aqui sem sequer entender o que é que tá a gente tá fazendo disso ss né então grande nossa a gente saber se o css então Beleza então vou pegar essa secção rir aqui posso só fazer assim dessa forma então rio e eu vou colocar como flex-direction a cola beleza essa é a primeira coisa que eu apliquei segundo rio inclusive não é na rio é na hero container

na minha memória não me fale se falhar né que a gente leva depois e a imagem então é o order - 11 da e outra coisa que eu apliquei foi o text-align a text align center box foram as três Propriedades que eu apliquei aqui então se eu voltar aqui da era um olhar uma atualizada tá então alguma coisa aqui que já não fiz aqui tá em 649 né eu falei que eu não 630 que ele vai fazer ak-630 pronto 128 você coloca aqui na mão mesmo 630 então quando ele chegar até aqui ele vai se

adaptar beleza 630 tem ainda um pontinho mas aí eu acho que já já são esses caras aqui tem que vai participar eles bom legal então até aqui tá tudo beleza agora aqui também eu Preciso começar adaptar esses carinhas aqui eu acho que daqui para baixo do 630 para baixo eu posso deixar todos eles em linha na linha toda tá pegando a linha toda como que eu posso fazer isso vou pegar um deles aqui eu vou dar uma olhada aqui como que eles estão feitos estão tá display-flex no forma grupos né e temos ainda o form

grupo impulse control legal tu deixa eu ver que eu poderia fazer tranquilo eu conto tá display block no grupo está Display-flex esse outro colocar um display block por exemplo olha só display block e nem secar já ficou todos em linha aqui beleza então é só aqui também é um cara que eu vou mudar e ele é o hero não que não é mais aqui é form-group na form-group então eu posso pegar o ponto form-group e já aplicar a ideia do display block e tá tudo certo o display display block ele já aparece essa ideia para

mim então se eu volto Aqui ou não no tamanho aqui tá muito gata tudo isso acabei deixando nos ok posso eu volto aqui a minha estratégia não 630 está aplicada o layout não tá com mais cortado aqui né que ele tava ficando cortado e aqui se adaptou também não então se eu diminuir um pouquinho para ver se eu consigo diminuir o tamanho aqui assim por cento deixar o 75 só pra gente ver o menor então olha só aí ele tem outra quebra aqui aqui ele começa acabar de novo aquele que vai Escrever quem está quebrando

ele bom na minha experiência já sei que é o menu tá eu já sei que é o menu que está quebrando ele porque o restante tá adaptando né seu olho aqui embaixo adaptado é o meio tá adaptado né o esse daqui tá adaptado mas o menu tá me zoando né o menino não tá deixando legal para gente tranquilo então a gente vai ficar mais estratégia de menu que a gente vai bastante no sites que é o menu chamado hambúrguer você já viu que são Três barrinhas que ficam e clica nela e aí ele abre um

menu gigante na nossa tela né então que momento que eu acho legal aplicar esse hambúrguer eu também vou deixar aqui não sei se eu vou ver aqui na hora que falou com mais quebrar de novo tá bom ele começa a quebrar aqui ó no 530 antes 540 tá então no 540 a chover aqui posso fechar esse milho aqui aqui posso fechar esse vou colocar mais uma mídia tá maxwell e essa essa essa cadência que eu Tô colocando também é importante tá 540 também é importante não adianta nada eu colocar esse milho aqui hoje por exemplo

né colocar esse mídia de 540 aqui em cima tá porque esse aqui vai ser mais forte do que esse né porque está vindo do 0 até o 768 então qualquer coisa que bata depois né que que venha dar conflito entre os dois ele vai dar preferência a esse então por isso que eu já começo a colocar nessa opção aqui daí esse aqui vai ser vai ter mais força né Então a 40 tem prioridade sobre 630 que tem prioridade sobre os 600 do 768 tá bom só para a gente ter essa essa informação também o legal

então que eu tenho que fazer aquilo que tem que agora trabalhar esse menino não é de uma maneira bem interessante primeira coisa eu tenho um nave aqui deixa eu ver se é isso mesmo esse menu eu tenho nada aqui tá tenho nave tem o eric beleza tá então o que eu vou fazer primeira coisa eu vou esconder Esse menu aqui tudo tá então todo nele eu vou colocar um display none então ele já some quando ele entrar aqui então o nave é tendes play nova mas mike e meu menos estragou meu menu agora que que

eu vou fazer né sem medo tranquilo eu vou mostrar para você agora qual que é a estratégia dessa desse quando a gente queria sair ideia do hambúrguer né quando a gente queria saída é do mesmo agora a gente volta aqui no html e aqui No html no header menu do eu já deixei aqui para você um minuto google e aí temos classes vazias one two three estão vazias por isso que elas nunca apareceram lá e nunca me atrapalha me atrapalharam no meu layout tá bom mas o neve eu mudei eu sumi ele tá deixa ele

desaparecido porém esses caras agora eu vou configurá-los para que eles apareçam lá como três barrinhas para ser estratégia do mesmo que eu falei legal também tranquilo a sua pergunta que eu Vou usar aquilo anos e no chuchu a nutri e são opa faltou um pontinho aqui essas propriedades aqui são as seguintes soccer background colour white mesmo então fsf tranquila é branco né uma altura nele fixa de 5 pixels para essa altura pode ser fixo assim um cuidado dele de 100 porcento ou seja ele vai opa tudo conteúdo disponível ali na box que ele tá né

não container que ele tá o Margem seis pixels e automático tá mas ainda a gente precisa agora fazer com que então container dele eu falei que ele vai ficar então 5 pixels e cem porcento no container dele quem que é o container dele é o menu toggle e eu comprei ele só pra gente lembrar daqui ó menu-toggle tá eles container aqui então a gente vai arrumar o container agora ele vai ter uma largura de 40 pixels ou 40 fique seus então esse 100% é 100 porcento relativas às Conexões beleza então ele vai ter um raid

de 30 pixels então vai ser altura do contêineres ao todo e cada um deles tem 5 pixels né esses pixels em cima e embaixo de cada um né então uma arte de 30 pixels vai super bem e eu vou colocar assim só o margem rights uma margem rite de 20 pixels pregar uma separada da lateral onde ele vai estar beleza e agora tá ali o nosso menu hamburger é igual eu te falei quando clicar nele então ele vai ter que me fazer algumas Coisas né é primeiro eu já vou fazer a opção de visualização delicado

depois eu arrumo não javascript onclick dele tá então a opção de delicado já vou fazer aqui que seria o foi excluída o fusca que que eu quero fazer vou te falar o que eu quero fazer eu quero que quando eu clicar nele ele vai abrir uma tela toda aqui mostrando menos gigante aqui para mim tá bom é isso que eu quero que ele apareça para mim então eu tenho uma um tipo de classe que eu vou Adicionar ele nesse sexo aqui eu vou te falar uma coisa chamada honra tá eu vou deixar ela aqui e

aqui eu vou fazer aqui então o menu menu sexo é o ponto on tá aqui é aquilo ali pronto tô acessando ele agora tá menos exon que eu quero fazer então não posicionamento primeiro absoluto de tudo absoluto tão funcionamento absoluto já seguido aí com o top fizeram ele vai ficar lá no topo bem geladinho ir lá no canto e bem geladinho também e se der beleza já vou Colocar um fundo nele aqui também background-color de 715 915 depois disso de uma separada que legal vou fazer então uma largura de 100 porcento do viewport willis e

uma altura de 100 porcento falei errado né não é 100 porcento de força hd sem né vai ocupar sem viewport height tá bom porque isso não é porcentagem céu viewport legal então fazendo isso aqui já vou dar uma olhada no que que é que está acontecendo olha só que já aconteceu aqui né percebe Então ele é só que ainda não ficou por cima desse daqui mas de qualquer forma a ideia está começando a ser aplicada aqui vamos é o primeiro vou fazer uns pics como 10 por exemplo tá usa index é a posição usei o

eixo z então imagina que os o eixo z são camados imagina um papel em cima do outro tá bom um papel em cima do outro então que eu tô fazendo tô fazendo com certeza o z dele vai ficar acamada 10 tá bom imagina isso então antes dele tem Outras camadas mas olha só ele não vai ser afetado por outras camadas tá mas ainda tá dando rolagem ainda tem os detalhes que a gente vai trabalhar legal tá bom mas olha só fazendo isso é o suficiente agora para eu vir aqui no meu - action on e

pegar o meu nave novamente e agora vou abrir habilitar o meu nome de novo display block é mesmo é mesmo porque ele vai ficar aqui ó tá vendo é óbvio que a gente vai organizar agora né para ele não ficar meio esquisitão assim Mas o grito ele porque agora imagina que isso aqui é um clique tá ele tá clicado tá gente tá configurando quando ele tiver tô em casa daqui a pouquinho a gente adiciona e tira esse clicam javscript só lembrando isso beleza então que eu vou fazer - epson novamente pegar esse cara aqui ó

e vou colocar aqui o menu toggle menu eu vou e o mesmo tu vai fazer para mim uma posicionamento absoluto também Absolution absoluta aí vai fazer para mim o raid0 ó e vai colocar para mim um top sim quem que era o menu togo você se lembra será que tem mostrar se lembrar aqui olha esse cara que ele tava lá no canto todo esquisitão ele voltou para cá para o posicionamento dele tá bom quando menos é que não tiver olhe tá aí que eu vou fazer eu vou fazer com que ele tenha uma transformação aqui

para virar um x tá isso aqui esses três itens eles serão Modificados agora e vão virar x com o que eu vou fazer isso agora olha que legal que vai ser então ele é o menu do google one eu vou deixar o menino teu one tá eu só vou fazer uma transformação ele a transformação dele vai ser o seguinte eu vou a tracionar ele 45 graus de gomes tá bom e vou fazer um translate nele 17 pixels e sete pixels o que é o translate o que é o rotação rotação cinema de novo que ele

é uma barra e vou falar antes de mostrar tá então é uma Barra e essa barra vai ficar outras gelada em 45 graus só que ela sai um pouco do eixo tá então aí eu pego translate que ele vai mexer no lixo o x e y modificando esse isso para cima um pouquinho e o y também pro lado um pouco tá então olha só vou salvar supa salvou voltou e ficou uma barra cortar aqui legal daqui a pouquinho até dou uma tirarem umas coisa para você ver bom o dois ele não vai aparecer eu vou

tirar os dois estão display none show ou vou Colocar como vou colocar como passe ele não preciso colocar de plena colocar como alface ele zero você já vai entender porque eu passo de zero daqui a pouquinho eu volto a dizer porque que eu vou colocar o paciente beleza então aqui ficou nome é no tio meu tio beleza agora a mesma estratégia por três só que a universo né menu siri siri beleza só que o inverso - 45 - 7 e menos sete eu acho que não ficar perfeito é exatamente não fica perfeito ele ficou ali

mesmo O que vai ser mudada isso aqui ó porque às vezes confundem a cabeça mas o eixo x ele vai ficar no eixo x mesmo no mesmo lugar e esse cara aqui é o que vai mudar só um pouquinho mais para cima né menos essa então deixa eu mostrar isso você por aqui ó aí vou pegar aqui esse ao ano esse é o tio então olha só vamos mostrar pra vocês aqui ó esse aqui é o eixo x então vou voltar no zero que queria fazer esse é o zero rotacionado no eixo x mas lembra

que ele está um pouco Abaixo das barras né então eu subo ele até ele ficar no posicionamento que me agrade tá esse não sei que me agrada e o eixo y voltando isso y dele original tava aqui então eu mexo um pouco no posicionamento do y até que me agrade tá um x para mim o que me agrada e menino eu acho que eu vou deixar aqui mas nós pronto menos nove por enquanto tá não precisa ser perfeita só pra gente ter essa ideia agora por que que eu fiz opacidade 0 mas Como que você

fez opacidade zero essa capacidade zero eu fiz porque eu quero aplicar nele depois uma ideia de transmissão legal a ideia de transição para que ele é que a barra se mexa quando quando eu clicar nos três ele vai se mexer 110 esse zero quintão ele vai começar a sumir gradativamente e esses vão mover gradativamente para isso vou vir aqui no one two three e vou aplicar aqui para gente transition-duration só duração mesmo tá só propriedade da Duração que leve quiser 1.3 o segundos 0.3 segundos é 325 beleza então ele vai fazer isso quando eu aplicar

tá bom é que mais que eu posso tá mexendo aqui agora eu acho que já vou mexer direto lá no que me incomoda bastante que é agora esses carrinhos aqui beleza os elementos dele bem tranquilo vamos lá bom então ele sexo nave e o hélio beleza o elemento do texto ao centro e o display É um display brasileira vou voltar aqui beleza marque que aconteceu ele estavam em linhas ele estava indo em assim display block deixa eu voltar aqui o l a gente tá ficando no way beleza suelen olha só textual centro cristo o centro

e eles estavam em linhas eu coloquei um blog para que eles fiquem um abaixo do outro tá isso aqui me agora tá isso aqui me agrada depois disso agora é já é o cara os elementos a né que são os links ali então chegando no link eu também Quero que ele apareça de uma maneira suave então vou colocar aqui uma transição transition-duration de zero ponto 15 segundos a cortar branca toque não se não tem daqui decoration a fonte vão colocar uma fontes aqui vamos colocaram 3rm e já ficou maior tá beleza vamos colocar aqui line-height

4rm 4rm vamos ver oito titular analisar cada um dos elementos esse aqui é o ar né olá aqui é o seguinte se eu colocar o Display block eu posso mudar esse rm para quatro tá porque daí o blog vai poder galinha toda ali e show de bola então vamos dar esse aqui para quatro e vou colocar um diz por aí o block beleza até aqui estava meu agrado né e vai faltar só um detalhe aqui eu colocar agora no meu - action eu quero todos esses caras mais aqui alinhados no centro tá então - action

on acho que ele tá na vi esse cara aqui boa aqui vou colocar então um display flex Dele eu vou colocar um just free counter como center e opa sintra e aline irons commcenter também tô voltando aqui beleza ficou bem ao meio né e aqui é o seguinte quando eu clicar nele né quando eu clico ele fica com essa estratégia aqui beleza e aí então eu posso vir aqui ver contigo o seguinte cadê o menu fashion aqui vou tirar o ovo e colocar um aqui tá no layout no html mesmo tirei salvei tá Então com

seu isso agora eu vou colocar um aqui para gente olha coloquei olha ali eu não sei se você conseguiu dar uma olhada que esse carinha mexeu bem legal né então vou voltar novamente se não será que eu tenho controles aqui tenho control c control c control z olha ele não é como se eu tivesse clicando tá como se eu tivesse clicando no menu ele ainda ficou um pouco fora do do lugar né percebe que ele tem um pouquinho fora ainda do lugar Eu daria para dar uma mexida nele aqui nessa nessa parte do mar gerais

aqui colocar um pouquinho mais 40 pixels tive que tu vai dar estou ficou muito né então contra o z não até que não ficou muito não tá mas enfim só para gente poder ter essa essa noção do que eu estou colocando ou tirando aqui com esse meu nome é bom até aí perfeito ainda temos outros detalhes né quando eu dou a rolagem ele ainda não é para baixo mas agora eu vou aproveitar então já mexi no No style no script scripts né que tem uns scripts vou colocar no final desses clipes tá estratégias para o

a responsabilidade então reis menu responsivo como fazer menu responsivo tá bom mesmo responsável botar fazer melhor para a gente não ficar olhando esse layout aí eu vou colocar um novo arquivo aqui chama de menorah js pronto e não que ele ficar atrapalhando a gente um pouco com muita informação aqui eu só pego e coloco o menino Ah beleza então que eu vou fazer nesse medo aqui eu vou primeiro criar uma variável chamada show tá e eu vou falar que ela está mostrando o menu o menu normal o grande tá não menu hambúrguer mano grande ela

está com o seu estado inicial mostrando ok então que eu vou fazer eu vou pegar aqui para o meu eu vou criar um composto de - action menu sexual eu vou usar ele daqui a pouco então vou pegar esse menos sexo lá da mesa do cumento documentos que ir Cellactor então vou procurar lá lá dentro no meu html eita vou procurar tio neno session a beleza achou - action agora eu vou pegar o menu google eu também vou precisar usar ele e vou aplicar o mesmo sexo e não menos sexo procure lá dentro para mim

o carinha chamado menu estou pronto tranquilo né então o que eu vou fazer estou pegando esse elemento menos sexo - action e pegando o menu tubo já vou aproveitar aqui e tirar o homem tá Quando eu voltar aqui tá senhor show de bola então olha só peguei cada um desses carinhas aí que eu vou precisar usar agora então primeiro menu-toggle quando eu clicar em você então é de ventre isso não clique então quando eu clicar no menu toggle e o que é que você vai fazer você vai rodar para mim uma função a nossa eu

queria muito que sair desse negócio aqui da nossa cara né então eu tô colocando uma função aqui tá é que Vai ser executada quando eu clicar no menu tu tá então cliquei então tem um evento que vai acontecer de clique rodando essa função aqui estou fazendo em formato de eruptions ok então o que que ele vai fazer ele vai procurar para mim primeiro menos sexo ele vai adicionar à lista de classes via tunngle que é uma opção aqui do jardim script então que eu tô fazendo pegando - epson adicionando as linhas as classes dele né

porque eu tô adicionando a classe ou uma Eu estou usando essa opção tô legal porque eu tomo ele adiciona e tira né então ele vai lá e observa existe vão ele vai tirar e não existe ombro então ele vai colocar beleza ok partindo disso essa segunda opção aqui é o show isso aqui é para eu ter segurança de que o torrão ele não vai bugar em algum momento do meu o colocando e tirando o momento errado eu quero que ele coloca no momento que eu quiser então eu vou atualizar esse Show falando que ele é

diferente do show atual que eu isso aqui é diferente do show atual então diferente nesse caso primeiro de troco então quando eu clicar o show está mudando de tro naquele era ele era two e agora não tinha um significa é falso então tá mandando para falso tudo bem e aqui essa opção de clicar olha olha só tá conselho então quando eu clico né quando eu clico ele mostra e só me mostre sob o vosso sol agora ainda fica essa ideia rolagem que Eu quero resolver como que eu vou resolver isso é bem tranquilo eu quero

fazer com que o meu o meu html o meu bode eu vou pegar aqui o bori tá e eu quero fazer com que o meu bori tenha um overflow como rhythm of head of fixed a barrinha de rolagem tá então tô tentando falar aqui você não tá vendo mas eu estou tentando muito rolar aqui e não está acontecendo nada então preciso também dinamicamente colocar e tirar isso Se não tiver o menu tirar ele porque se eu deixar combinou vou tentar rolar e não adianta tô fazendo de tudo ele não roda ele não rola beleza por

causa do over florida beleza então vamos lá não preciso adicionar essa ideia também vou deixar aqui em cima pegando no meu documento bori que ele já existe aqui tá e vou fazer o seguinte está eu dele vai pegar o overflow e olha só vou fazer um ifternario aqui para você que que é o wi-fi ternário ele vai ver o show se o Show outro ó se o chow-chow coloca reader tá assim não coloca início início é o overflow início tá então se eu colocar nada ele funciona como um nicho então ele dar rolagem quem eu

idem é quando ele vai bloquear então ele vai bloquear olhando esse show tá então se tiver comendo chow macho então a opção dele é líder senão a opção dele é início no início ao beleza então pensa comigo seguinte é isso aqui eu não cliquei no menu né Quando clicar no menu ele vai vir aqui e vai ver que o seu tio e ele vai aplicar o ryden no meu bode firmeza depois disso então ele vai vir aqui no togo e vai colocar a classe on no meu - action beleza vai analisar aqui forçadamente ou seja

isso aqui tá como tio então obrigatoriamente coloque o homem é isso que estou dizendo e aqui no final da lógica ele vai pegar o show e vai fazer agora que não puxou seja falsa ou seja o estado do meu show na minha aplicação Está com falso aí eu vou clicar novamente e agora no x tá bom eu não estou virou x clique novamente quando eu clica novamente ele vai olhar isso aqui é falso se ele é falso ele vai vir para essa posição inicial né isso aqui é falso ele vai forçadamente tirar esse onda aqui

beleza e vai trocar agora para tu novamente legal então nós temos um uma opção de mostrar ou não mostrar e aqui ó tem tanta rolagem tá dando aí eu tiro do al É realmente é legal ou não é muito legal esse estratégia né ficaria aqui só a dica então de você eu te incomodado tá com essa com essa ideia desse carinha mudando aqui mas fica aqui a dica então para você analisar e alterar ele deixa eu ver se eu tenho aqui porque eu tenho aqui que ele está dando uma separação eu realmente estou ficando incomodado

com esse aqui ó eu estou aqui ó margem grátis o ataque ah tá eu eu mudei o cara errado Né esse mar gerais aqui ele estava 20 eu acho 20 fixos aí depois eu mudei para 40 achando que eu tava mudando esse aqui que de fato tava mudando também mas não é bem o que queria né aqui seria mais uma ideia de mudar de outra forma tô vem cá vou arrumar logo aqui eu tô ficando incomodado então esse hardwares aqui é 20 né é que quando - action for on eu vou ter um na vitor

bueno todo esse cara aqui então esse rick eu vou colocar como 20 pixels para ver se ele vai vir e Ficar mais uma posição já ficou um pouquinho mais vamos colocar um pouquinho mais o colocar 30 fixos de chover aí pronto agora eu tô menos incomodada ainda diria que ainda tem um um cabelinho aqui de diferença aí talvez seja isso aqui e talvez não né talvez seja 25 que agora que agora denúncia que eu quero ficar mexendo aqui vai tá bom eu vou deixar e vou abandonar mas ficou isso aqui seita legal gostei beleza olha

só temos um Layout muito mais responsável aqui muito mais responsivo aqui então a gente trabalhou com essas ideias responsabilidade uma última ideia que talvez eu adicionei aqui eu acho que o mínimo que chega nos nas telas é o 320 né então eu posso dar uma olhada está legal não tá legal não mudaria talvez a altura de o tamanho desse aqui nesse texto aqui tá é o que eu vou fazer agora só para você ver é bom a gente reforça o conteúdo tá então olha eu pego aqui um Vídeo aqui viu a minha no 320 ou

será que o outro break break point for me h3 aqui vou colocar um font-size nele de 2 rm então é isso aqui beleza é exatamente o que o que eu quero aqui então show de bola a essa ideia de responsabilidade para essa parte de screen tá ok que que é isso like quem que está falando ela disse para mim aí é o seguinte a gente fez tudo esse milho aqui usando a ideia de screen agora Coisas que podem ser alteradas aqui tá coisas para você se aprofundar eu posso mudar isso aqui para frente por exemplo

ele vai ser para impressora mas eu já vou mostrar para você tá eu posso usar aqui o screen né eu posso usar aqui um um agrupamento de mim dias por exemplo de mídias quis eu posso fazer agrupamento seria o seguinte mídia por exemplo todas as mídias entre o max diz beleza seria que uma ideia de agrupamento tá bom e tudo isso a gente Pode ir melhorando conforme a necessidade o grande lance e você vai melhorar os seus mídia que iris essas opções conforme a necessidade geralmente o básico é isso aqui que eu tô te mostrando

né você tá saindo do zero para entender o básico dos medíocres tá ok mas obviamente conforme os desafios você pode aprender mais coisas igual te falei tem em tem pior tem outras opções para você e colocando aqui tá magro pais com esse é o ele fica Em uma faixa né tio max diz a leandro por exemplo maximiza anda um mini disse por exemplo hits de 700 então ele vai ser aplicado somente na faixa de 700 a768 então você pode fazer suas ideias também agora tudo isso que eu tô falando para você é inútil né se

você não aplicar não tô te dando exemplos mas tudo isso é inútil se você não aplicar grande não se você receber o desafio e aplicar o desafio tá bom então coisas que a gente aprendeu aqui css units nós Aprendemos também sobre o nosso mídia que é media queries oi tá mídia quis da e com e como configurar para usar um videoclipes né configurar nosso html com essa com esse meta dado aqui em cima esse esse meta viewport para que ele então aceite é o media-query tá bom mídia kiwi então a gente viu aqui mais ou

menos como usar deixa eu só pegar uma pegasse aqui só por isso aqui na documentação legal css e não é porque a gente possa ter um Exemplo aqui de mídia aqui tá bom uma beleza agora eu quero mostrar pra você como que você adaptar ia isso parar impressora né para imprimir né então seu olho aqui venha a opção de print print como que ele vai também configurar a minha página lá no print então a página ficaria dessa forma ok não tem problema algum mas eu gostaria de fazer uma outra configuração para impressora então aproveita ali

sim sejam eu poderia fazer aqui mas eu vou aproveitar e colocar Aqui como uma outra opção de link está e nessa opção de link a gente pode colocar umas ideias diferentes por exemplo a gente pode fazer no próprio opção de link a gente pode fazer um vídeo oi tá aqui mesmo tá então nessa própria opção posso fazer um vídeo quem sabe né fazer um mídia print não é mesmo mas eu também posso para o papo outros screen and max wings tudo aquilo que a gente viu lá naquele mídia naquela propriedade dos iss aqui no nosso

rolo né nessa Mídia essa regra a gente pode aplicar aqui então que eu vou fazer vou eu vou aplicar uma print ok qual que é o hf dela eu vou chamar de print ponto css não existe ainda mas eu coloco aqui no meu aqui coloca aqui como um novo arquivo print css tá aí as opções de impressora que eu gostaria de ver aqui na minha tela por exemplo é posso colocar diretamente aqui vem um lance eu não preciso usar o vídeo de novo aqui tá não preciso já coloquei aqui então ele Vai ser inteligente suficiente

de entender que esse está eu só vai ser aplicado nas mídias prints eu poderia usar essa ideia para separar o meu style padrão no meu responsivo claro que poderia e por que você não coloca aqui um beijo responsive né e aqui você usa a ideia de mídia também aqui a gente pode eliminar o 768 falo que ele vai começar a ser aplicado lá a partir do 768 ou seja essas esses carrinhos aqui esse fotos Aqui ele não precisaria até dentro desse vídeo eu vou fazer para que você veja né nada nada nada como ver acontecer

então aqui eu usaria um mídia e falaria para você ou para ele né o max cuida de 768 pixels que foi que a gente trabalhou aqui beleza e ainda colocaria aqui um scream para garantir que no screen and max lá para garantir que ele vai aplicar no espinho vai aplicar em outros lugares estão em outras outros tipos de 10 então vem aqui e abro o responsive.css e aqui O aplico ele né mudando somente esse cara aqui para fora esse cara que não precisa do mídia né e então coloque aqui beleza tá bom então dessa forma

posso voltar aqui deixa eu ver se outras estratégias que nós vamos apertar o print eu ainda não comecei né acho que ele tá até aqui eu ainda não comecei beleza mas deixei aquele do responsivo diferente agora separado do meu style então não vou estar eu fica padrão eu só queria uma ideia de Responsabilidade volta aqui e analisou se está sendo tudo picado e de fato está sendo tudo tudo tudo é pecado né o perfeito o layout está responsivo tá separado agora aqui no css para não ficar bagunçando e vou só terminar agora fazer uma ideia

do print aqui eu fechar isso eu já esse fechar aqui deixa eu só vou tar aqui então nós vemos os media queries css media kiwis vou colocar aqui o css media queries e vimos agora também o html mídia a tribute to be beleza o Atributo ali show então no print que que você pode fazer para ter uma ideia de impressora né primeiro eu vou pegar aqui você viu que ele aparece aqui para gente no print analisar contigo aqui o legal então o que que eu faria aqui diferente para eu imprimir eu quero imprimir somente uma

lista dos do conteúdo que tenha quitar não quer imprimir online mas eu quero tirar o giro aqui por exemplo essa sessão menu e tal porque isso não vai interessar para mim por Enquanto então vou pegar que o líder eu vou pegar aqui o rio eu vou pegar aqui o image agora tudo que tem que ir lá tem uma classe média que tá esses carinhas aqui ó tô recebendo as imagens né então todos eles vão pegar aqui um display se não né tá o perry 1 10 e o margem zero para forçar com que eles não

tenham essas propriedades de impede imagem também quando for imprimir então novamente indo para impressão é perfeito já fica aqui a listagem e Ainda tem o formulário né mas ali está gente estar interessante bom depois disso eu posso pegar os cards eles estão em formato de ingrid né então formar ingrid eu quero fazer em que ele fique no display o block ah tá bom fazendo display block eu quero com que cada card que tem ali dentro fica com border bottom border bottom de um pixel e somente então ele vai separar cada cartão depois nós vai ficar

em Formato de reserva né vamos lá vamos lá print ele vai separar cara cartão com uma linha abaixo aguardamos beleza então ele fica dessa forma eu só ver se eu consigo dar um na minha tela não aparece direito as coisas a margem tudo mais não sei se na sua parece legal mas tudo bem então dessa forma ja fica uma outra ideia né e por fim o texto não tá muito legal eu tenho uma opção de text mion vou forçar com que o color pink black para quem tá o texto fique todo black aí Eu posso

pegar o formulário como eu falei que eu não quero também então forma aqui eu vou tirar ele aqui na tela fora o form beleza que é o sexo forma então eu posso vir aqui que você só veio só vem posso vir aqui e eu vou bater opção print é legal então entra a impressora não é para imprimir agora eu tenho uma lista na dessa desse formato aqui para ir para mim para eu imprimir legal então é mais Uma outra estratégia da nossa responsabilidade né então são bastante coisa que a gente tem visto aqui nessa acesse

o último dia que eles html diatribe né para isso a gente aprendeu a imprimir não é para entender esse cara agora eu deixei para esse momento da aula para a gente falar sobre imagens imagens que também é outra detalhe bem interessante para os nossos as nossas ideias aqui de responsabilidade veja bem eu já deixei configurado para você um Card que já estava bem legal a ideia de imagem dele a imagem já tava adaptando e tudo mais que essa imagem aqui tá deixei essa imagem pegando lá do google na do youtube né assim imagem deixa eu

ver se o seu abre aqui no o navegador para gente isso aqui vai ser uma imagem né hd full e tudo mais mas aqui eu posso mudar aqui para para emi que por exemplo deixou ele vai ser uma imagem menor e temos também o max has the full que é uma imagem bem maior tá Qual que é o lance que a gente vai fazer aqui você viu que a imagem então já tava acertando na conforme mudava aqui ela já está ficando primeiro vou te mostrar um caso de uso quando essas imagens não estão se adaptando

né que a gente poderia inspecionar ela aqui e ver que ela já está com idade de cem porcento mas vai ter momentos que você vai ter imagem assim ó elas não estão configuradas para se apresentar em dentro da caixa né então ela começa a Ficar meio esquisita dentro da caixa e tem mais aqui tem do top left e tem ainda um transforma e tudo mais né e a posicionamento absoluto então vai ter momento que você vai estar aplicando a imagem aí vai estar toda desconfigurada né veio a imagem toda bagunçada então primeira coisa que você

pode fazer aplicar na largura na imagem a figura de 100 porcento né então o que acontece o 100% é o esquema para sua imagem se adaptar dentro da box que ela Tá ok então primeira coisa tem que fazer aí depois eu fiz uma estratégia de posicionamento absoluto onde eu pego top-left tá e deixo ela e ela fica aqui ó nesse point dela aqui ela fica bem alinhado ao meio ok tá bem ao meio do meu container só que daí eu sou estratégias transforme que vai trazer ela de volta para cá e de volta aqui para

cima para que sempre sempre essa imagem fique bem alinhado no meio bem do jeito que eu quero outra coisa aqui Outro detalhe é o seguinte eu estou fazendo todas as estratégia por causa disso aqui ó se eu tiro aqui o senhor por cento por causa dessa estratégia do pedem top que eu tô deixando aqui tudo mais legal se eu tiro isso daqui também né e só bota aqui 100% ela fica aqui com as bordas do jeito que ela é essa imagem na verdade ela desse jeito aqui na fica ali com as bordas pretas e tudo

mais tá mas eu poderia ainda tá ficando essa outra estratégia só que isso não está Fazendo e quando eu aplico toda essa estratégia que que eu te mostrei sem com que a minha box que tá contendo essa imagem tenha alguma altura nesse caso estou define a altura pelo pezinho top se eu não tenho altura tudo isso que eu apliquei não serve para nada e vai deixar você confuso mas aí você bota altura e tá show de bola tá bom importante falar isso porque igual falei aqui tem estratégias iss que não são Mais avançadas e não

tem só ver com a responsabilidade por isso a gente precisa estudar bastante ss mas legal marcão tá aonde você quer chegar com isso eu quero chegar no seguinte a gente então tem uma imagem fixa aqui e ela sempre shq de fogo tá esse aquele for tem uma imagem para gente de 300 de 480 italiano príncipe 480 por 360 só que esse nosso dispositivo for pequenininho assim igual esse 320 aqui ó eu posso ter uma imagem menor né que aqui é eu tenho Max max que eu deixei vou só abrindo aqui para gente ver eu tenho

larga que que a high-resolution e eu tenho média é uma resolução menor né não tenho reza aqui só emitir de força ah beleza eu tenho uma resolução menor essa imagem aqui 320 essa imagem que eu gostaria de aplicar para quando o meu é carinha for 320 não é por que que eu vou ficar gastando recurso no meu dispositivo baixando uma imagem grande sendo que eu não estou usando a imagem Grande né até aqui ela tá ficando menor e ainda que 320 então essa imagem ela precisa se adaptar também e aí a gente vai ver aqui

tá bom convite faz para adaptar primeiro a gente vai trabalhar a maneira dela ser apresentado aqui legal tá isso vai me causar algum impacto aqui para mim porque eu estou construindo isso ótimo mostrei antes pelo script e eu sou construindo ele pegando assim ó imagem ser se colocando tumblr e tudo mais né então eu vou mostrar para você Sempre ficar pensando muito nessa nesse impacto negativo no só pensar a nível de uma imagem só então para isso que eu vou fazer o primeiro desabilitar o meu scripts.js beleza para que o foco só nesse detalhe dessa

imagem que com você tá bom então é depois a gente poderia p já está tudo isso mas não é o foco falou que a gente ia entender a estratégia de imagens aqui beleza então tá no html eu vou trabalhar com uma outra ideia uma outra tag html chamada picture cadê Deixar acho que ele tá menta aqui eu vou trabalhar com uma ideia chamada picture tá como que é que funciona a ideia do picture ela vai funcionar da seguinte forma ao invés de deixar aqui essa classe mas eu até posso deixar aqui eu vou só colocar

isso aqui a unidade vi eu vou colocar uma pizza tá bom olha só pitcher vou colocar aqui também auto-imagem o imagem tá bom essa ideia de áudio aqui no pátio ou no image também que deveria ter uma ideia de Acessibilidade tá bom é importante a gente ter isso para ajudar quando não apareça imagem ou quando algum leitor de páginas né por lei para alguém que precisa vai ler a imagem né então poderia ser imagem do curso por exemplo tá pois eu posso ir com eu tenho sentido para o que está fazendo mas o foco aqui

então é o victor né vamos lá o pequeno então ele vai ter como padrão essa imagem tá aqui vai continuar aqui como padrão tá tudo certo E a gente tem que outras opções que são suas tá bom nos force a gente tem um mídia muito parecido comigo aqui gente viu até agora tá então eu posso colocar aqui marcam maxi ou mini vou colocar como mesmo porque a gente não viu o menino ainda já viu o max bastante então colocar pelo menos williams tá sim no meio eu vou colocar então 768 pixels tá então quê que

acontece de 768 pixels acima olha que é diferente tá bom porque é de mínimo né o mínimo 768 então disso Para cima ele vai aplicar o sur cette que é um outro tributo aqui e esse atributo que vai receber então a imagem aquela mais cavalona lá que tinha a maxi dress de fogo tá bom então de mínimo né então de 768 para cima ele vai aplicar essa imagem ok então diz de agora vou pegar o 320d 320 né pixels mínimo até 768 qual que é o aplico eu aplico água que é mesmo hq que essa

daqui que já tem tá que tá aqui como a gente amante do que the fall back não é Tipo se não der certo essa ideia do victor vai ainda aparecer assim magic para gente na tela então beleza então por último então aqui você lá vou colocar de 10 pixels vou chutar aqui de 10 pixels até 320 então nós vamos usar agora a nk que a imagem mais simples que tem a menorzinha que tem tá bom a gente qualidade mínima ah tá legal então fazer essa estratégia aqui se a gente foi lá agora o nosso html

primeiro de tudo igual eu falei a Gente vai perder um pouco das estruturas das coisas que a gente fez tá mas não é importante importante a gente dá uma olhada como que então a imagem vai começar a se comportar você percebe que então eu tenho aqui ele falou aqui né sendo aplicada que tem um mim certo tudo mais então ele é só eu vou tirar aqui e vou começar a mexer na tela aqui nessa forma tá vou deixar a pequenininha e aqui ó a pedir para abrir a imagem e outra bebe tá só porque venha

pequeno Mesmo abriu o hq na vou deixar maior visão agora tá bem maior que 1.600 vou abrir imagem na web abriu aqui o max percebe que abrir o max abril hq naquele só que o seguinte aqui eu não consigo fazer menor que é essa esse tamanho aqui né que eu queria o menor que 320 então para isso só para que a gente possa aplicar mesmo e você vê que ele tá mudando eu vou pegar aqui no meu scripts mesmo eu tenho outros bom então tem esse filme animado eu Tenho essa outra url aqui então eu

vou mudar o url lá ela que legal que eu fazer aqui eu vou mudar a url em cada um desses caras então isso vai ter receber outra url ou seja é outra imagem aqui vou pegar o ide e vou trocar esse aqui também tá parecendo de beleza então agora temos três imagens diferentes né uma que é para quando tiver super grande então vou voltar para cá uma pergunta a terra tá bem grande aí ele achou aquele vou Colocar como break-point né mas ele achou aquela configuração que a gente fez de mim já tá imagem já

mudou e por fim quando chegar pequenininho ele mudou também para outro imagem para que você veio aqui realmente ele tá acessando outras imagens que que significa então voltando os não vai consumir recurso da sua do seu celular do seu smartphone né o seu cliente quando você fizer essa opção de colocar uma imagem como a definição menor para isso dispositivo Com uma definição média para esses dispositivos e como a definição de alta resolução preciso dispositivos tá e outra coisa sobre imagens além disso né que a gente falou que então do picture nada html a picture a

picture é a seguinte questão é imagens png e jpg colocação jpg e png versus svg tá a gente teve uma imagem svg aqui talvez você não tenha visto né então deixa eu voltar a configuração que Estava antes aqui agora não sei se eu deixo aqui para você ver com léo acho quebrado o seu voto do jeito que tá bem eu vou deixar comentado então isso aqui e aí vou deixar isso aqui comentado do picture tá porque você saiba que exista vou voltar do jeito que tava antes original e aí quando a gente precisar acessar você

quando você acessar esse documento que eu vou deixar disponível né oi beleza você vai ter aí você vai ter Aí a lembrança de que a gente mexer nesse daqui então vou voltar aqui original vou voltar aqui com o nosso script tá e aqui é o seguinte quando eu clicava aqui aí outra coisa falta configurar também né faltou dar uma configurada legal para esse cara que ficar maior né quando quando a tela fosse maior quem sabe a gente pode até fazer que daí você já já vai dar uma olhada nesse ó esse cara aqui esse x

aqui ele é um formato botar aqui para Você ele é formato svg tá aqui a esse assunto que eu quero falar com você agora o formato svg um formato bem interessante porque olha só se eu vier aumentando vou aumentar aqui isso ele tá aumentando o cara que não quero deixa eu ver aqui se eu consigo aumentar e o meu html ok o meu html eu não tô conseguindo aumentar mas eu vou então aumentar via css aquele sbgl tá então vem aqui no responsivo não pode ser o também não pode ser estranho beleza não Está então

eu tenho aqui svg tá então esse svg seu aplica aqui por exemplo eu vou exagerar aqui tá pois é geral vou colocar 1800 1800 de altura e largura bem exagerado e vou abrir aqui para você ver que ele tá aqui a pontinha dele aqui embaixo olha que legal então aqui ele pega você vê que não tem serrilhado qualquer outra imagem que eu pegar aqui por exemplo essa daqui eu vou abrir em nova tebas se eu conseguir que eu não tô conseguindo abrir nova deve por causa Desse cara que tá aí então abrir nova serve se

eu pego essa imagem e eu começo aumentar muito ela é a primeira que já tem um limite né que eu não consegui aumentar mais mas esse tipo de imagem ela fica serrilhado tá vendo porque ela é uma uma imagem que foi não sei se você entende que eu tô dizendo sobre serrilhada mas eu acho que não tem uma alta resolução pronta essa é a palavra a imagem não mantém uma alta resolução igual um svg que eu posso Aumentar o máximo que eu puder aqui e ele vai manter uma alta resolução dessa imagem tá bom ele

vai respeitar resolução que eu mandar né um jpg em png essas imagens mais padrões aqui ela não tem isso ela não tem essa opção de aumentar aqui e ela mantém essa qualidade não existe isso tá bom então fica uma outra dica para você que tá fazendo seus designers para serem responsivos se você puder nas coisas que você puder coloque é svg tá bom o svg Ele vai ser muito melhor adaptado para responsabilidade legal por fim eu fiquei então de configurar esse aqui para que ele então aumente aqui eu quero que ele pé a minha tela

tá bom vou só fazer bem rápido já pra gente finalizar deixa eu lembrar qual que ele é eu quero que esse cara ele recebi as seguintes propriedades é que vai ser o modo overlay não mas seu modão active esse cara que eu quero que o índice dele Então receba aqui sim noventa porcento de unidos e noventa porcento também de altura 90 porcento de altura legal 94 95 e 90 e cinco lá 95/95 as sempre que eu mexer ele show ele vai ficar aqui uma uma ideia dessa forma aqui tá bom eu posso vir aqui e

só mudar lá no meu mudou somente mudar para porcentagem vez de fixos né então 95 por cento e noventa e cinco porcento por isso eu falei já era para ter feito na hora que eu falei sobre porcentagem lá no começo da aula Era para ter feito isso não fiz então assim ele fica gigante aqui quando como como eu quero é aquele fique gigante ocupando minha tela inteira belezinha então gente é isso aí essa ideia de responsabilidade que a gente viu mas é muito importante para os nossos desenvolvimentos vimos o sionyx né vamos relembrar a quina

vimos aqui o do layout fixo layout fluido os textos na que mais que vimos vimos sobre mídia que eles né aplicamos os medíocres Vimos sobre o html mídia attribute ou seja a gente aplicou os medíocres aqui com a pelo html né então muito legal então a gente viu também sobre imagens que é algo muito importante a gente ter em mente né quando a gente está fazendo o nosso desenvolvimento de layouts responsivos né ter imagem aí svg se for possível beleza então para finalizar além dessa dessa pequena revisão que a gente fez você provavelmente vai ouvir

por aí dúvidas né do tipo área você fez Um layout desktop for symbol for se você faz essas coisas que que eles vão então é na verdade uma linha de raciocínio nesse caso dessa aula a gente fez um layout desktop força então a gente fez p o top depois a gente vem aplicando a responsabilidade para o mo vão legal então se poderia fazer primeiro promova ou seja você faria página toda assim não é o toda assim não sei e depois você viria aplicando as ideias para o desktop tá bom então seria a diferença entre Mobile

first 10 tô forte e por fim a minha dica para você primeiro sempre procure fazer funcionar então faça escolha o sua estratégia sei lá quero fazer monforte faça funcionar beleza faça o que funciona esse layout depois vem aplicando as estratégias gradativamente beleza então vou ficando por aqui eu espero muito que o que a gente aprendeu aqui que a gente estudou hoje faça muito sentido na sua carreira e venha também causar uma transformação No jeito de você fazer os layouts responsivos tá bom procurei o máximo dar o melhor de mim para você eu espero que faça

sentido então um abração do marcão e até a próxima e aí e aí