CONSTRUA UMA LANDING PAGE COM HTML E CSS

Oi gente sejam bem-vindos a mais um vídeo aqui do canal eu sou a Rafaela balerini e hoje a gente vai fazer mais um projetinho utilizando HTML e [Música] CSS Calma eu sei que vocês já estão craques em HTML CSS porque eu tenho vários vídeos aqui no canal tenho playlist aí com alguns projetos para vocês treinarem com conceito sem conceito com prática e tudo mais mas Porém todavia nesse vídeo aqui eu vou trazer algumas coisas um pouquinho diferentes que a gente ainda não tinha visto por exemplo tem a extensão do vs code do figma e eu

achei assim sensacional é a que eu tenho trabalhado aí nas últimas coisas que eu tenho feito então eu quero muito mostrar para vocês como que eu consigo integrar o figma aqui no vs code mesmo já E codando além disso né tem o próprio Dev mode que saiu do figma e eu também vou utilizar Algumas coisas um pouquinho diferentes no CSS que eu não tinha utilizado ainda nos outros projetos né algumas propriedades que vocês vão conhecer então já se prepara vai abrindo o seuu vs code porque a gente vai tirar agora esses próximos minutos alguns bons

minutos né provavelmente para codar e fazer mais um projeto aí pro seu portfólio frontend e detalhe também vamos subir esse projeto no ar com uma plataforma de hospedagem profissional Então é literalmente Como se você tivesse fazendo um projeto para alguma marca para alguma empresa ou mesmo freelance E aí você já vai ter aí o conhecimento total de como funciona vamos usar JavaScript vamos vamos usar JavaScript nesse projeto mas não nesse vídeo não me matem é porque vai ficar muito comprido se eu fizer tudo agora e eu também quero muito que vocês Tragam ideias de features

de JavaScript pra gente implementar porque já tem algumas Coisas aí que obviamente eu quero fazer quando a gente for brincar ali com os cartões né com as receitas eu já vou mostrar o projeto para vocês mas eu ainda quero que vocês joguem aqui nos comentários ideias do que a gente pode fazer de legal por exemplo um Dark mode um Light mode sabe algo assim Então bora começar a codar Então pessoal eu já abri aqui o meu vs code e agora eu preciso mostrar para vocês qual que vai ser o projeto que a gente vai fazer

então eu Devo abrir o figma desta vez nós vamos abrir o figma aqui pelo vs code mesmo então caso você ainda não tenha abaixado essa extensão do figma você vem aqui nesses quatro quadradinhos E aí você pode pesquisar por figma E aí vai ter esse aqui chamado figma figma por figma for PS Code E aí você vai fazer aqui a instalação bonitinha e deixar ele habilitado bem tranquilo acho que vocês já sabem exatamente como que a gente usa as extensões aqui agora como que a gente Vai utilizar aqui no final depois que você habilitar vai

aparecer esse Ezinho do figma né do logo deles e aí você vai ter que fazer o seu login Então vai ter aqui um botãozinho para você se conectar fazendo o login você vai ter aí todos os documentos né os designs aí que você já deve ter utilizado neste caso qual que o eu vou utilizar esse aula flexbox que na verdade não é bem uma aula flexbox a gente tá fazendo um projetinho mas porém todavia ele foi nomeado dessa forma quem Fez ele foi o Rui o Rui Monteiro lá da comunidade muito obrigada Rui por ter

feito aí esse trabalho incrível como designer né a gente aqui eu vou est atuando como Dev frontend ele atuou como designer na maioria das vezes quando a gente trabalha um ambiente corporativo né algum projeto também é dessa forma que existe essa interação designer desenvolvedor e olha só só quanta coisa que tem aqui com essa extensão A gente tem aqui o código mesmo é tipo o Dev Mode do figma aplicado aqui dentro do vs code já trazendo pra gente algumas informações de código de propriedades e assets e várias coisas que a gente vai ver agora na

prática fazendo o projeto porém pessoal o que que eu recomendo você não chegar e copiar e colar todo o código aqui do figma por quê porque nem sempre os elementos aqui do Design eles vão est proporcionar mais a uns aos outros como que eu posso dizer isso Ele pode pegar muito posição relativa e Também A nomenclatura um monte de coisa pode estar errada os tamanhos também completamente fixos então o ideal é sempre a gente pegar dá uma olhada entender o que que tá acontecendo mas transformar num código nosso até porque às vezes você tem preferência

para usar Grid Às vezes você tem preferência para usar flexbox então o ideal é você fazer com o que você tá acostumado e não copiar e colar do figma mas é ótimo para você ter uma base Então olha só esse Aqui é o nosso projeto dessa vez é o Bale Coffee que o Rui colocou aqui como nome né tudo Bale vho que a gente faz de projeto E aí o que que a gente tem ó encontra receita perfeita então é um site pra gente poder ver receitas de café adoro café e aqui a gente tem

uma imagem na verdade várias imagenzinha aqui no cantinho bem parecido com uma Landing page né que a gente já tinha feito com bbot vou deixar o vídeo aqui para quem não fez tem aqui Um subtítulo Aí embaixo Aqui a gente tem a parte das receitas mesmo então confira as últimas receitas e tem vários cdzinhas com cada receita então Tem cappuccino tem o expresso aqui Quem colocou essa receita uma nota pra receita E aí conforme for a gente criando aqui o nosso projeto não vai ser Neste vídeo especificamente a gente vai conseguir clicar e visualizar a

receita e a gente também vai poder com o JavaScript atualizar cada vez que for entrando aí uma receita nova Então essa É a ideia principal e olha só gente no final desse vídeo você já vai sair com uma página dessa web funcional fixa sim fixa porque a gente vai estar usando apenas HTML CSS mas com design bem fiel a esse figma aqui E aí com o conhecimento que você vai ter aí fazendo essa página você já vai conseguir ir fazendo a suas próprias que é o meu intuito principal para vocês conseguirem aprender a desenvolver porque

não adianta nada vocês fazerem aqui o Tutorial bonitinho seguir o passo a passo e não treinar sozinho né gente tipo assim é assim que a gente vai conseguir aprender é colocando na prática o que você pegou de conhecimento então partiu eu já abri aqui no no vs code direto uma pasta dashboard que eu criei aqui dentro do meu computador e aí agora a gente já pode criar os nossos arquivos principais primeiro a gente vai criar um index P HTML que é onde a gente vai escrever toda a estrutura da página Se você não sabe o

que que é HTML ou o que que é CSS eu tenho vídeos explicando aqui então você consegue ver ali bem o início disso tudo eu recomendo Antes de a gente começar aqui na prática vamos ter o arquivo style.css e a gente vai integrar esses dois arquivos para poder importar o nosso CSS ali no HTML e estilizar as estruturas os elementos que a gente for criando com HTML vocês sabem muito bem que eu sou muito fã de primeiro fazer Todo o HTML bonitinho deixar tudo que a gente vai ter na nossa página para depois estilizar você

pode preferir de outra forma você pode então fazer da forma que você preferir mas agora aqui eu vou seguir desse formato até para vocês conseguirem ver a diferença que faz a gente ionar um CSS na nossa página então partiu vou clicar aqui nesse quadradinho com maizinho e criar o nosso index P HTML esse ponto HTML é para dizer que a extensão é de html mesmo ou Seja vai ser um código HTML pra gente começar um código HTML gente tem aquele atalho lindo maravilhoso que é apenas um exclamação E aí a gente dá enter e olha

só toda a estrutura inicial do HTML tá criada eu vou mudar primeiro aqui o Nossa linguagem para PT traço BR isso aqui tudo eu vou deixar né TS tf8 viewport device a escala vai ser um mesmo tudo certo o título aqui da nossa página que é o que aparece na aba né aqui você deve estar no YouTube deve Estar escrito alguma coisa aqui na aba do YouTube Talvez o nome do vídeo ou talvez YouTube mesmo e é isso que a gente vai mudar do nosso site eu vou colocar o Bale Coffe que é o nome

da nossa plataforma de receita de café Além disso dá pra gente colocar aqui um outro metadado de descrição às vezes quando a gente tá fazendo uma busca ali no Google sempre aparece o título do site embaixo a descrição Zinha é isso que a gente vai adicionar aqui nessa nossa tag de Description que vai ser criada dessa forma aqui a gente coloca o mais e o menos né a gente fecha a nossa tag a gente vai utilizar essa tag meta e aí o nome do nosso atributo vai ser name igual a description assim como a gente

tem ali a tag meta viewport a gente vai ter aqui a description E aí a gente vai colocar o conteúdo dessa description content que vai ser eu vou pegar aqui do figma mesmo Olha só vou pegar esse subtítulo explore Dezenas de variações da bebida favorita entre os deves do ao redor do mundo vou colocar isso aqui como a descrição mesmo então pronto a gente já adicionou o nosso a nossa descrição já adicionou o nosso título beleza chega de meta dados aqui no nosso R do HTML Vamos então começar a estruturar a nossa página o corpo

da a nossa página aqui no B uma coisa legal que ele deixou aqui para mim né o Rui nosso designer do projeto foi aqui embaixo não sei como Que dá zoom out aqui mas tudo bem Ó eu vou mostrar para vocês ele separou meio que em algumas seções na nossa página Então a gente tem aqui a parte do logo a gente tem aqui a parte do header né que tem os botões clicáveis para aí para cada página que a gente vai desenvolver Depois temos aqui o github temos aqui gente como que eu dou esse Zoom

out tá muito grande né Eu acho ah consegui ó aí aqui ele deixou o nosso conteúdo principal né o título e subtítulo deixou As imagens aí aqui embaixo ó ele agregou todas as receitas junto com confiro as últimas receitas aí a gente tem aqui cada Card também que vai ter as informações com nome descrição enfim ele já deixou aqui bonitinho pra gente ter uma noção de como estruturar o nosso HTML Então a primeira coisa que a gente vai fazer vai ser colocar primeiro Esse parte aqui do header que vai ser o nosso cabeçalho segundo a

gente vai ter essa parte inteira aqui do Main né que vai Ser esse conteúdo todo que fica abaixo do header e acima do noso footer e o foter também vai ser o terceiro a terceira divisão aí da nossa página Então bora colocar aqui primeiro noso header fechar aqui também aí a gente vai ter em seguida a nossa tag m fechar aqui também e por fim a gente vai ter o nosso footer que vai ser o rodapé da nossa Página e eu vou até Minimizar agora primeiro a gente vai começar a mexer no header então eu

vou minimizar o Main e o footer pra gente não se confundir muito aqui e focar bastante aqui ó nessa parte do header Então vamos começar a ver Quais elementos que tem por aqui então eu vou subir aqui de novo pro nosso design principal e olha só p pessoal a gente tem o logo né o Bal cof que é um texto né nada mais é do que um texto aí a gente tem aqui as páginas que vai ser Home receitas novidades melhor avaliadas e no final a gente tem ali o github que vai ser o código

da nossa página mesmo quando a gente clicar a gente vai poder acessar esse github e um detalhe É que na verdade cada um desses escritos né tanto balov quanto home receitas novidades melhor avaliados e o github eles vão ser meio com o menu de navegação então quando a gente clicar no Bic a gente vai vir pra página inicial ou quando clicar no Home também porque a Gente tá acostumada a clicar ali no logo e voltar pra página inicial quando clicar no github vai pro github quando clicar em novidades vai para uma outra página então isso

nada mais é do que um menu de navegação E para isso qual tag que a gente utiliza a gente tem a tag nave Então vai ser aí a primeira tag que a gente vai colocar dentro do nosso header então eu vou dar aqui a identação e vou colocar nave e olha ele já fechou eu tô a gente vai escrevendo o o vs code Ele já vai autoc completando pra gente mas se não autocompletar tá tudo bem você pode escrever também aí eu vou dar um enter pra gente colocar agora cada elemento aqui dentro e dentro

da nossa nave Então a gente vai começar pelo Bale cof O que que a gente pode utilizar aqui de tag né o Bale cof ele vai ser meio que um texto mas eu não quero utilizar o p de parágrafo eu também não quero utilizar o H1 de título porque na verdade ele vai ser um conteúdo visual a Gente vai poder clicar nele e tudo mais mas a gente vai mais usar essa tag para poder criar um logo do que qualquer outra coisa então eu vou utilizar uma tag que a gente acha que não usou ainda

que é a tag spam que é como se fosse uma div mais para um conteúdo mais específico Então olha só eu vou fechar aqui a spam E aí dentro dela qual que vai ser o conteúdo Bale cof E aí vamos ver como que tá ficando a nossa página pessoal já temos aqui alguma coisa né Para ver como que vai ficar a página eu eu tô utilizando uma extensão chamada Live server esse Live server a em vez de você clicar no no arquivo P HTML lá no seu computador abrir ele no seu computador tudo mais ele

na verdade vai ficar como se fosse um servidorzinho que cada vez que a gente salva o nosso documento ele consegue atualizar no site a gente vai conseguindo ver ao vivo Quais são as mudanças que a gente vai fazendo então é uma extensão aqui também Se você pesquisar é Live server e olha só você vai habilitar vai fazer a instalação bonitinho E aí para você conseguir utilizar esse Live server deixa eu fechar aqui essa aba A gente Clica com o botão direito e olha Open with Life server aqui no documento HTML mesmo e aí ele já

vai abrir direto a página pra gente olha só temos aqui o Bal cof que é o primeiro elemento do nosso design Beleza agora então vamos construir o resto da nossa barra de Navegação aqui pras outras coisas o home receitas novidades e melhor avaliados eu vou criar como se fosse uma lista de elementos então para listar os elementos a gente consegue utilizar as tags Li Então deixa eu colocar aqui o Li e além desses liis O que que a gente tem que fazer com que esse conteúdo ele seja uma Âncora para algum outro link externo e

como que a gente faz uma Âncora a gente utiliza a tag A então ele já vai saber que a gente vai depois aqui adicionar Algum link clicável E aí então dentro desse primeiro elemento a gente vai ter aquele home né aí depois a gente vai ter o receitas novidades melhor avaliados então eu já volto vou construir aqui copiar e colar todas essas linhas beleza agora a gente listou então cada item que a gente vai colocar no nosso cabeçalho mas esses itens todos para dizer que realmente é uma lista a gente tem que agrupar eles em

uma outra tag que é uma lista não ordenada é uma ul porque aí a Gente vai realmente dizer que é um menuzinho de itens a serem clicados né um menuzinho de itens de âncora né de links e aí como que a gente vai então colocar essa lista não ordenada né esse agrupamento a gente vai colocar uma tag o l aqui em cima e aí a gente vai fechar ela lá embaixo vou até deixa eu copiar e colar aqui vou dar um Tab né eu seleciono todas as linhas dou um Tab então todos eles ficam entados

E aí eu fecho essa o aqui embaixo então agora tá Pronto aqui o nosso menu de itens Não ordenados beleza vamos ver como é que tá ficando eu vou salvar eu vou ver agora aqui olha só tã ó tá vendo aqui ele separou os Home receitas novidades tudo como se fosse vários iten zinhos né alguns pontinhos bonitinhos eu sei que não tá do jeito que a gente quer né na horizontal porque isso a gente vai fazer no nosso CSS então agora bora colocar o último item do nosso cabeçalho que é o github para o github

a gente vai apenas Colocar aqui Um item clicável porque ele não vai ser um menuzinho com vários itens né ele vai ser apenas um item ali separado então a gente pode colocar aqui direto a tag a de âncora para dizer que vai ser realmente um elemento que vai ser clicável e vai para uma outra página e aqui dentro a gente coloca o nosso github então eu vou salvar vamos ver como é que tá tchã pronto Agora já temos todos os itens do nosso cabeçalho vamos partir Pra parte principal aqui do nosso site isso aqui essa

parte é encontra a receita perfeita junto com as imagens a gente chama de Hero que é a parte principal aí de uma Landing page quando a gente dá de cara com ela é muito importante o conteúdo que tem aqui principalmente relacionado com marketing para chamar a atenção das pessoas que estão entrando na sua página Então vamos construir isso aqui no nosso HTML a gente já tinha colocado eu vou agora Minimizar o nosso header já que a gente já construiu ele aqui vou tirar essas esses espaço que eu tinha colocado e agora a gente vai abrir

o nosso Main e trabalhar aqui dentro vou dar um espaço aqui também entre eles porém o nosso M ele vai ter tanto aqui essa parte do Hero quanto aqui o confir as últimas receitas Então a gente vai ter que separar em duas sessões né né primeiro essa sessão Hero e depois essa sessão com as receitas mesmo dos nossos Cafezinhos então o que que eu vou fazer aqui de tag eu vou colocar uma tag section vou fechar e vou também adicionar mais uma section aqui que vai ser a section das receitas que a gente vai fazer

depois mas é só pra gente já deixar aqui separado então o que que a gente vai colocar aqui dentro a gente pode separar esse nosso Hero em duas partes a primeira vai ser meio que o cabeçalho do nosso Hero né que vai contar as informações aqui com Esse novidade com o título com o subtítulo e a segunda parte aqui a parte das imagens Então bora fazer isso dentro dessa nossa section que vai ser do Hero a gente vai ter mais uma tag header que vai ser o header do Hero e em seguida a gente vai

ter a parte das imagens que a gente pode separar colocar agrupá-las né todas numa div uma div ela a gente costuma não tentar evitar por conta de semântica mas como essa div ela Vai ser meramente visual a gente não vai utilizar ela para dizer nada né a gente não precisa utilizar uma tag diferente Beleza então a gente já separou que aqui o header vai ser essa parte da esquerda e aqui a div a gente vai colocar as imagens Então vamos trabalhar primeiro aqui com o header a primeira coisa que vai aparecer né como a gente

tá fazendo tudo em ordem vai ser esse novidade para esse novidade que depois ele vai até repetir ó Receitas em alta novo ele vai aparecer várias vezes a gente pode utilizar uma tag spam novamente então eu vou colocar aqui aberto spam e vou fechar e aí aqui eu vou escrever esse novidade em seguida a gente vai ter o título da nossa página pro título a gente vai utilizar a nossa tag H1 é costume a gente só utilizar apenas um H1 por página então mesmo que você tenha vários títulos você não vai utilizar H1 para todos

eles você vai Utilizar sempre o H1 pro título principal da página principalmente por causa dos leitores de tela né eles vão saber exatamente Aonde que tá esse conteúdo principal textual que é o título Então vou fechar aqui a nossa H1 e qual que vai ser o título da página vou copiar e colar mesmo esse encontre a receita perfeita eu vou deixar aqui dentro em seguida O que que a gente tem o nosso subtítulo mas antes gente olha só a gente tem essa linhazinha o que que É essa linhazinha a gente pode colocar ela tanto como

se fosse uma imagem né quanto também a gente pode utilizar uma tag que faz uma linha dentro do nosso HTML que é uma das que eu quero mostrar aqui para vocês que é a tag HR Olha só eu vou fechar ela aqui você pode na verdade dar um barra né Não sei se a gente precisa fechar ou não a tag eu vou até ver o que que tá funcionando Vou salvar e vamos ver aqui no nosso é olha só tá vendo essa linha zona óbvio que a Gente vai também estilizar ela com o CSS Mas

é bem legal é apenas uma tag que a gente colocou aqui a gente também já tá com o nosso título então em seguida o que a gente vai colocar o nosso subtítulo mesmo para isso a gente vai utilizar a tag H2 que é mesmo de subtítulo a gente tem o H1 2 3 4 5 6 e aí aqui dentro Vamos colocar esse conteúdo de explore dezenas de n Vou salvar e vamos ver como que tá ficando beleza explore dezenas de blá Blá blá blá blá fizemos então aqui essa parte da esquerda vamos fazer a parte

da direita O que que a gente vai colocar dentro dessa div todas as imagens que estão aqui no nosso design o que que acontece tem várias imagens mesmo você pode pegar elas baixar uma por uma deixa eu ver aqui como que a gente baixa direto do do vs code eu nem sei exatamente ah ó aqui em assets tem Export image 14 aí você vai salvar direto aqui no nosso no seu projeto a Imagem 14 e assim por diante tem imagem 8 12 obviamente não tá bem nomeada as imagens Mas você pode renomear para deixar um

pouco padronizado aí no seu projeto eu vou fazer isso eu vou baixar cada uma das imagens e vou trazer aqui pro nosso projeto dashboard e eu já volto para mostrar para vocês eu vou criar uma pasta chamada assets E aí dentro dela eu vou colocar as imagens e pronto pessoal eu já trouxe aqui ó cada uma das imagens eu coloquei 12 as 12 imagens aqui ó elas estão completas em tamanho completo A gente vai ver como que eu vou deixar elas pequenininhas também tudo isso a gente vai fazer no CSS fazer esse jogo assim que

parece um mosaico Zinho mas a gente já tá colocando elas aqui dentro do nosso projeto Vamos então escrever no nosso HTML como que a gente vai importar e dizer que aqui são essas imagens que são para ser colocadas no nosso na nossa página eu vou então adicionar aqui uma Tag Figure e dentro dessa tag Figure a gente vai colocar a nossa tag IMG de imagem e aí a gente vai adicionar todo o caminho da imagem aqui eu vou fechar a tag imagem né que ela não precisa de uma abertura e fechamento a gente fecha Ela

ali mesmo e o caminho da imagem a gente vai colocar aqui como atributo src igual e o caminho dela aqui no caso como a gente colocou dentro da pasta assets a gente vai ter que escrever aqui a pasta assets vai colocar o barra e aí a gente Vai escrever uma por uma aqui então por exemplo essa primeira a gente tem o hero bunner 1.jpg E aí eu vou copiar e colar para fazer o caminho de todas as 12 imagens que eu importei aqui pro meu código então eu também já volto e mostro para vocês como

que ficou beleza pessoal terminei aqui de escrever né eu literalmente copiei e colei todas as tags e mudei aqui o nome da imagem para poder ir adicionando uma por uma vamos ver então como que tá Ficando no nosso site Olha só uma beleza gente olha que coisa linda esse site as imagens elas estão aí no tamanho real mesmo que a gente estava adicionando a gente vai ter que mudar isso tudo com o CSS tá um algo desesperador aqui né pessoal por isso que é ruim Às vezes a gente fazer só o HTML primeiro e depois

só o CSS mas mesmo assim eu prefiro para eu poder saber exatamente como que eu tô criando a estrutura de uma vez só e depois não ficar adicionando coisa que Eu não não não tava planejado sabe então agora Bora passar pra próxima parte aqui do nosso site a gente vai ter esse botãozinho aqui eu não acho que eu nem tinha adicionado ele né eu fiz aqui o header do nosso Hero fiz as imagens agora a gente pode criar uma section apenas para esse para esse botãozinho né que a gente tem aqui a section do Hero

com isso tudo a gente pode colocar uma section aqui no meio para o nosso botão Vou colocar aqui ó Section eu vou fechar a tag e dentro dessa section a gente vai adicionar esse botão buton e o botão vai ser essa imagem Então vou também colocar aqui dentro a tag imagem vou colocar o barra né PR fechar e a gente vai agora pegar essa imagem também src igual Vamos então importar aqui pro nosso projeto Então olha só a gente vai pegar esse botão aqui também da mesma forma Que a gente tinha importado aquelas outras imagens

todas lá no nosso no nosso Hero E aí eu vou fazer aqui assets e vou exportar como svg mesmo vou exportar hein dessa vez e eu vou dar um enter ele salvou acho que foi para Ele criou uma pasta e colocou aqui o botão eu vou colocar aqui em assets mesmo vou mover e vou apagar essa pasta aqui que eu acho que a gente não vai precisar utilizar e olha só aqui tá o Button svg eu vou então colocar Assets barra Button PSV Vou salvar e vamos ver como que tá ficando aqui no nosso site

t t Nossa vai ter que agora descer bastante Olha só temos aqui o nosso botãozinho bonitinho e ele já até clicável né como a gente colocou aqui dentro de uma classe Button Ele já sabe que essa imagem vai ser clicável mesmo então beleza já fizemos a nossaa section do conteo princip do noo e ag a gente vai fos isso aqui Fizemos ISO aqui agora a gente vai PR última section que vai aqui parte deceit e o que que a gente vaiar então aqui dentro dessas receitas aqui né Essa aqui vai ser a nossa última section

primeiro a gente vai também dividir aqui o conteúdo em essa parte aqui que vai ser o cabeçalho dessa parte de receitas né com receitas com bem parecido com o que a gente tinha aqui no Hero E aí depois a gente vai ter cada Card dos Cafés Então vamos criar aí primeiro esse cabeçalho dentro da nossa section que vai ser o nosso próximo header E dentro dele vai ser bem parecido com o que a gente tinha feito aqui no nosso Hero vou até abrir aqui de novo pra gente lembrar a gente tinha um spam com novidade

aqui a gente vai ter mais um spam Mas vai ser com receitas aí a gente tem um outro título né mas como a gente não usa mais de um H1 a gente vai utilizar o H2 né como se fosse realmente um Subtítulo e aqui embaixo a gente vai utilizar um parágrafo Zinho deu uma olhada nas receitas Mais amadas Então bora fazer isso vou né diminuir aqui de novo o nosso Nossa section do Hero e vamos criar aqui o nosso primeiro spam com receita aqui vamos criar o nosso H2 com esse confira as últimas receitas e

vamos criar o nosso parágrafo que é a tag P com o escrito dê uma olhada nas Receitas Mais amadas vou colar aqui dentro também em seguida a gente vai fazer os nossos cards e como que a gente pode também agrupá-los todos aqui a gente fez um header para Essa parte a gente pode fazer uma div porque também novamente vai ser uma tag um pouco mais visual a gente só tá agrupando alguns elementos não necessariamente é algo muito semântico então eu vou criar uma div mesmo que vai ser um contêiner né o contêiner é sempre que

a gente tá Agrupando algum alguns itens alguns elementos E aí eu vou criar cada um desses cards Então bora criar aí a nossa div primeiro né dentro da section das receitas a gente tem o header e a gente vai ter essa parte da div com as receitas Então vou fechar então a div ela vai ser isso aqui que tá pegando os quatro cards E aí a gente pode criar uma div para cada Card né então a gente vai criar uma div dentro da div para poder dizer que isso aqui ó Vai ser uma divisão então

vou colocar aqui mais uma div e aí agora dentro de cada Card O que que a gente tem a gente tem um header também novamente né um cabeçalho pro nosso pro nosso Card e depois a gente vai ter aqui o conteúdo escrito des o autor Quem que fez então eu vou colocar aqui umzinho nosso card de café e dentro desse cabeçalho Quais são as informações que a gente vai pegar esse spam em alta e também aqui o título de Cada café que vai ser caputino expresso Enfim então vou colocar aqui a nossa tag spam com

em alta dá até PR colocar aqui o emojinho bonitinho né Deixa eu ver se eu consigo que eu vi que era um foguinho fogo e embaixo a gente vai colocar o nosso título Zinho que vai ser um H3 né vai ser também um título mas ele é bem menor é bem menos importante ali na nossa hierarquia das páginas então eu vou colocar aqui o Cappuccino catino e a gente tem também aqui no cabeçalho essa parte da nota né que tá escrito aqui extraordinário 4/4 eu vou até copiar o texto que tá aqui pra gente trazer

para cá um detalhe isso também é no header só só que porém todavia a gente é importante a gente deixar isso aqui separado disso aqui depois para quando a gente for posicionar os nossos elementos que aí a gente vai poder separar isso de um lado e isso do outro Então por isso eu vou até criar uma div PR a gente colocar esses dois elementos na esquerda E aí eu vou deixar o outro ali no canto direito então vou colocar uma div aqui para englobar esses dois elementos que depois a gente pode chamar de e detalhes

do cabeçalho enfim depois a gente vê quais vão ser os nomes da das classes Vou colocar aqui dentado e aí embaixo a gente vai de fato colocar essa parte da nota copiar de novo aqui extraordinário 4/4 e isso a gente pode colocar numa tag de parágrafo mesmo porque vai ser um texto Zinho e fechou aqui em seguida a gente vai ter a descrição aqui no nosso Card eu vou pegar então aqui primeiro o nosso o que tem aqui né No primeiro cardz inho pra gente pegar de exemplo Vou sair aqui do redro porque a gente

não tá mais no cabeçalho do card e vou colocar uma tag P também porque vai ser Um textinho né um parágrafo Zinho copiei até com emoji já direto em seguida O que Que a gente tem ali a gente tem as informações do autor Então a gente vai ter duas coisas a gente vai ter a imagem do autor e a gente vai ter o nome também a gente pode também agrupar isso em uma div pra a gente deixar um pouco mais visual Então vou colocar aqui uma div e dentro dessa div teremos uma imagem IMG vou

fechar aqui já daqui a pouco a gente coloca o caminho e embaixo um spam aí a gente coloca o nome do autor mesmo que nesse caso ninguém mais nada menos que a Rafaela balerini vou colar aqui e a imagem essa imagem aqui minha especificamente deixa eu dar um zoom aqui ela é que eu tô utilizando a do github tem uma forma da gente pegar diretamente a imagem do github sem a gente ter que salvar dentro do nosso projeto que é o seguinte eu vou colocar github.com E aí eu entro com o meu usuário do github

se você ainda não me acompanha lá no github Hub fica a dica é Rafa balerini e em vez de eu dar Enter e entrar no meu perfil eu ponho um ponto png e olha só o que vai acontecer eu dou enter e ele já traz para mim aqui a imagem eu posso inclusive copiar aqui ó esse avatars P content ou usar ali o https 2. github.png que você que vai funcionar igual então aqui no src a gente não precisa fazer aquele Import todo né baixado design a gente pode utilizar diretamente esse link Então vamos ver

agora como que ficou a nossa página com Essa parte aí do dos dos cappuccinos né Deixa eu fechar aqui e olha só a gente tem o nosso botão para baixo temos aqui o receitas confiro as últimas receitas em alta tudo que a gente escreveu temos a minha imagem em seguido Rafaela balerini eu sei gente tá completamente difícil da gente relacionar que esse aqui é o design que a gente fez porque o CSS é tudo na nossa vida a gente vai precisar já já fazer toda a personalização da página mas a gente já Tá acabando aqui

com HTML eu fiz aqui a estrutura base de uma de um card de café né Vocês estão vendo aqui a parte do a gente tem receitas tudo mais aqui essa div ela já entra como se fosse um card do HTML e aí eu posso copiar e colar as quatro vezes que tem aqui no nosso design Deixa eu tirar aqui dar um zoom Out para vocês enxergarem a gente fez isso aqui no HTML fixamente a gente depois pode copiar e colar Mas não precisa fazer agora porque eu acho que Vai ficar muita informação Quando a gente

tiver fazendo CSS aí eu eu copio e colo a gente multiplica aí os cards saindo agora dessa parte de receitas o que que falta a gente fazer o nosso footer então eu vou diminuir aqui Minimizar também a nossa tag Main Com todas essas sections E aí a gente vai brincar aqui no footer que que temos aqui no footer a gente tem esse copyright cod fé 2023 feito com muito amor e café por Rafaela balerini então a gente pode separar aqui em dois parágrafos né um paragrafo Zinho para isso aqui vou até copiar Vou colocar aqui

a nossa tag p vou fechar vou colocar esse texto e olha só detalhe Ah já falo detalhe gente vou só só fechar aqui essa tag p e essa aqui embaixo também E aí eu vou colocar também dentro de uma tag p e colar esse textinho detalhe que que tá acontecendo aqui a gente tá colocando como se fosse uma tag HTML esse cod fé existe essa tag Gente acho que não existe essa tag que que vai acontecer então lá no nosso site vamos ver agora olha só copyright 2023 ou seja ele simplesmente não colocou isso aqui

porque a gente tá escrevendo como se fosse uma tag mas ele sabe que não é tag então ele não pode colocar nada como que a gente consegue colocar esse esse sinal de menor q com a barra e o maior q para aparecer visualmente né como um texto Olha só pessoal eu pesquisei esse aqui é a manha a gente Coloca esse símbolo aqui né essa abreviação para poder utilizar o menor q e essa aqui para poder utilizar o maior q é isso gente só que eu pesquisei na internet mesmo não tem outro jeito né Não decorei

que é o e Comercial LT e Comercial GT talvez você possa ir decorar mas é dessa forma que a gente consegue fazer com que ele apareça e não tem esse problema aí de de codificação Então olha só agora tanã copyright codify codif nem eu sei como que é para Reproduzir essa essa palavra gente vocês podem chamar como vocês quiserem E aí agora a gente consegue fazer com que apareça gente fechamos o HTML ou seja essa aqui é a estrutura maravilhosa inicial da nossa página com esse quantidade enorme de imagens lindo demais só que não vamos

então deix achar lindo demais para isso a gente vai fazer o nosso código CSS e o que que a gente precisa fazer então eu vou também Minimizar aqui o footer a gente vai Abrindo conforme a gente for usando vou fechar aqui também esse botão ali vou fechar aqui o assets que tem todas as imagens que a gente tá utilizando e eu vou criar um novo arquivo que vai ser o nosso style.css primeira coisa que a gente precisa fazer é importar esse arquivo Style CSS no nosso HTML para ele saber o que que ele tem que

utilizar de estilização nos elementos e como que a gente importa logo aqui na nossa tag Head a gente vai criar mais uma tag que vai ser a tag link pra gente poder linkar e quais vão ser os atributos que a gente usa aí do para importar um arquivo CSS é esse Hell Style sheet o Type ele vai ser text bar CSS e aqui a gente vai colocar o HF que vai ser qual vai ser o documento que a gente vai importar de CSS que no caso vai ser o style.css bonitinho e aqui a gente vai

fechar a tag pronto importamos o nosso Arquivo CSS pro nosso HTML agora é só a gente conseguir codificar primeira coisa que eu gosto de fazer quando eu tô escrevendo o CSS é a gente meio que resetar algumas informações padrão que o CSS ele já coloca diretamente então por exemplo a gente não quer que tenha margem nenhuma no nosso na nossa página porque aí a gente vai poder poder criar as nossas próprias margens dependendo do Design que a gente tá utilizando Então por padrão é importante a gente já zerar Essas informações e poder brincar com elas

e como que a gente zera a gente pode colocar aqui o asterisco né tudo que a gente vai escrever de CSS a gente coloca Qual é o elemento que a gente quer modificar E aí a gente vai lá e escreve o que a gente quer fazer nas propriedades que a gente quer mudar primeiro eu vou colocar aqui a margem que eu quero zerar quero colocar ela com zero em seguida o pading também eu vou querer deixar como zero e eu vou deixar Com padrão Box sizing border Box pronto ó ele já autoc completou aqui para

mim beleza isso aqui é como se fosse um reset CSS Mais basiquinho e aí agora pronto a gente já tá limpo Olha só vocês viram que até veio aqui pro canto deixa eu até mostrar de novo porque eu acho que eu não tinha mostrado antes né olha só aqui é sem eu eu comentei aqui o código para vocês verem como que é sem a gente colocar esse res CSS vocês vem que tem uma margem aqui um pading né aqui um Espaço bem grande e aí eu vou descomentar vou usar esse código que eu escrevi Olha

só ele já trouxe para cá pra gente poder ter controle de tudo que a gente quiser eu vou também colocar já a nossa tag Body a nossa tag Body ela vai pegar basicamente toda a estrutura do nosso HTML que vai ser a parte do corpo ali da página então também eu vou colocar o que aqui nesse Body o nosso background eu já vou ver qual que é a cor vou Colocar o Color que vai ser a cor principal ali do texto né quando a gente tá utilizando essa propriedade color é a cor do texto e

vamos ver então quais são elas agora a gente vai usar mais essa parte aí do Dev mode do figma né para ver aquela parte ali do código O que que a gente tá usando então primeiro eu vou pegar aqui a cor do nosso background então abrimos aqui o design eu vou abrir aqui essa parte do do código né E aí eu vou pegar a primeira cor aqui o primeiro Marrom aqui eu não sei se vocês estão conseguindo ver eu não tô sinceramente mas tem vários marrons diferente aqui porque tô com muita luz aqui na gravação

mas tem um marrom aqui tem um marrom diferente aqui no Hero E aí já tem um marrom diferente aqui nos receitas então eu vou pegar esse primeiro marrom aqui pra gente colocar como background e qual que vai ser a cor dele olha só tá aqui ó Style background aí tá aqui a cor dele Eu vou copiar essa parte aqui da cor e a Gente vai levar aqui pro nosso noss background E aí a cor do texto a gente vai utilizar qual essa aqui mesmo que é o fffff Né o Brancão eu vou colocar aqui também

no nosso Body mais uma coisa que a gente precisa fazer também para meio que resetar o nosso CSS é a gente tirar uma a decoração da nossa tag Âncora porque quando a gente adiciona algum link lá na nossa Ancora a gente acaba ele acaba colocando uma decoraçãozinha Ele fica azul ele fica com aquele Itálico sabe uma coisa bem que é clássica assim de link dentro do site eu não quero isso quando eu tiver ali já escrevendo bonitinho o nosso CSS do da nossa tag a eu não quero que fique com essa decoração padrão então eu

já vou colocar aqui o text decoration non non é nada nenhum e por fim também a gente tem uma decoração padrão pra lista que é Aquela nossa tag ul então eu não vou vou querer é utilizá-la também e a Propriedade aí que a gente vai mudar vai ser o list Style non e pronto gente agora a gente já tá livre aí dessas decorações iniciais O que que a gente pode fazer agora é primeiro a gente vai analisar aqui no nosso design a gente tem várias fontes diferentes Então olha só se a gente clicar aqui no

bcof a gente vai ver aqui ó a gente tem a fonte Family Teco aqui a gente tem a fonte Family Inter que provavelmente é a principal aqui dessa Página aí aqui a gente já tem um Font Family epilog aqui a gente já tem um Font Family Monte cerrar então o que que você vai fazer você vai entrar no Google fonts deixa eu até mostrar aqui né no no Safari Google Font Ah olha só nem tinha mostrado né como que ficou aqui com o background e também com as letras as letras agora estão branquinhas a gente

trocou né antes tava branco com as letras pretas agora a gente tá com a letra preta e o fundo marrom a gente vai Entrar então aqui nesse Google fontes e a gente vai importar todas essas Fontes que tem no nosso projeto como que a gente vai fazer isso a gente vai pesquisar Então tinha aquela Teco né Vou colocar aqui Teco e olha só ele já vai aparecer para mim a fonte e ele vai ter vários weights né vários pesos de fonte a gente vai selecionar justamente os pesos que estão no nosso projeto deixa eu ver

aqui então olha só fonte weight 8 Ah não esse daqu não é do Teco deixa eu Ver o Teco aqui esse é o Teco né é fonte weight 600 Então a gente vai importar esse fonte weight 600 aqui pro nosso projeto então eu vou aqui ó tava selecionado porque eu já tinha importado mas aí pr PR você puxar você vai pegar aqui ó o semibold 600 vai adicionar E aí ele vai criando aqui na sua direita uma lista de todas as fontes que você tá trazendo pro projeto então eu já peguei aquele epílogo já peguei

o Inter com todas as fonte weights que eu achei ali No projeto e tudo mais eu quero que você faça que você treine isso aí sozinho sozinha e aí no final a gente vai aqui embaixo ó como que você vai utilizar a gente pode utilizar tanto Trazendo com a tag link no HTML quanto com @ Import no CSS que é o que eu gosto de usar então ele vai pegar aqui ó aqui é a tag Style né que a gente não vai precisar utilizar porque a gente tá já dentro de um documento CSS a gente

vai pegar e copiar desde esse @import até aqui o ponto e Vírgula aí a gente copia e cola lá no nosso CSS eu já fiz tudo isso já selecionei todas as fontes você tem que fazer aí para selecionar e entender como funciona o Google phones E aí a gente cola aqui na primeira linha do CSS mesmo do jeito que tá só ten a certeza que tem aqui o @import aurl e fecha com ponto e vírgula E aí aqui gente ó já tá todas as informações Family Roboto já tem o weight de 700 Family Teco o

weight de 600 e tudo que a gente vai precisar pro Nosso CSS eu vou colocar também já com padrão do HTML a fonte Inter porque eu vejo que ela aparece bastante no nosso projeto então aqui embaixo do B eu vou colocar HTML e eu vou colocar o fonte Family enter vírgula sanif e embaixo eu vou colocar o fonte weight que o padrãozinho eu vou deixar como 500 aí assim qualquer texto que a gente escreva que a gente não determine qual vai ser ali a fonte a gente já vai Por padrão deixar como Inter Beleza agora

que a gente já deixou Prontinho assim a nossa página para vir com toda a decoração Vamos iniciar isso eu vou colocar começar aqui embaixo O que você pode fazer uma coisa que é legal é você deixar essas informações em um arquivo reset CSS ou sei lá Main CSS E aí você vai criar um outro só pra estilização dos elementos mas eu vou deixar aqui da da mesma forma para ficar mais fácil para vocês visualizarem depois nos Arquivos né que eu vou subir no github todo esse projeto Então bora começar primeiro a gente vai vai analisar

aqui o nosso bo do HTML a gente vai começar pelo nosso header também vamos escrever sempre o nosso CSS em ordem dos elementos que estão no HTML Por isso que eu gosto de primeiro escrever o HTML depois a gente vai mexendo no CSS para já tá tudo organizadinho Então a primeira coisa do CSS que a gente vai fazer né Depois desse reset todo é a Gente vai pegar em ordem e fazer aqui o nosso header né o nosso menu de navegação e tudo que a gente já colocou aqui no nosso HTML então eu vou realmente

pegar essa aqui é a única tag neve que a gente tem no meu documento HTML então eu consigo estilizar por ela não preciso criar uma classe apenas para ela então eu vou colocar aqui a nossa Neve e vou abrir os nossas Chaves e o que que a gente vai fazer de propriedade aqui de CSS vindo aqui no nosso Dev mode Olha só eu peguei e selecionei aqui né tudo o nosso header a nossa nave né porque na verdade o header tá a nossa nave tá dentro aqui do da tag header Mas a gente pode utilizar

só a nave mesmo eh ela tem aqui uma widget de 1120 pixels e o que que eu tô pensando né dependendo assim da do tamanho da tela que for abrir aí o nosso site é interessante que mantenha sempre aí uma largura máxima então eu vou colocar esse 1120 pixels como largura máxima mesmo Aqui da nossa nave Então como que a gente faz isso a gente coloca um Max widget de 1120 pixels assim a gente garante que não vai ficar maior e totalmente desfigurado Além disso eu vou colocar uma margem ao e o que eu acho

que a gente podia fazer é dar uma olhada aqui no padding porque você vê que olha só ele tá até indicando aqui um box padding só que ele tá falando do padding que tem ele 24 pixels e aqui 160 pixels eu Prefiro ao invés de trabalhar com pixels nessa parte de pading ou de Margin enfim a gente trabalhar com R então eu vou fazer isto aqui eu vou entrar em pixels T ren algo assim eu sei que tipo um ren é 16 pixels então a gente até consegue ir fazendo de cabeça mas eu prefiro já

deixar aqui aberto o nosso convertor conversor E aí a gente consegue fazendo os cálculos Então olha só 24 vai ser um R me né provavelmente e 160 vai ser 10 100 então aqui no nosso CSS o que que a gente vai fazer um padding E aí eu vou colocar 1.5 R que vai ser os dois de cima né quer dizer o de cima e o de baixo são as duas os dois paddings verticais e os paddings horizontais vou colocar 10 Rin vou fechar aqui com ponto e vírgula então Olha só vamos ver como que ficou

aqui já no nosso bcof tchã ele tá aqui já vocês vem com o pading bonitinho porém o que que acontece ainda não tá daquele jeito Horizontal né o escrito Bal cof não tá com as fontes não tá com nada ainda então a gente ainda tem bastante coisa para resolver mas vocês veem que ele realmente Já puxou as informações aqui mais pro centro então olhando agora então olhando agora o nosso HTML O que que tá dentro da nossa nave a gente tem o Bal Coffe a gente tem um menu de links e a gente tem o

github então o que que a gente pode utilizar aqui para deixar horizontal Zinho né começar já a colocar Os nossos elementos em posições específic o flexbox vocês sabem que eu amo utilizo pra caramba flexbox se você não conhece não nunca utilizou essa essa ferramenta aí do CSS tem vídeo no meu canal explicando na teoria e também colocando na prática é quais são aí as propriedades de flexbox todas que eu vou utilizar aqui então se você não conhece ainda vale muito a pena você assistir e pra gente utilizar o flexbox a gente já começa como com

display flex não é mesmo Então eu vou colocar aqui o display Flex o Flex da Direction vai ser Row né a gente vai deixar ele horizontal Zinho isso é o padrão já mas eu gosto muito de sempre colocar o Row quando também não é colum e o nosso justify content que vai ser a separação né dos conteúdos a gente vai fazer e Space between assim a gente já separa os três conjuntos de elementos o nosso logo o nosso menu de de links e o nosso github Então vamos ver como já tá ficando olha só ó

a gente colocou o Flexbox separou eles na horizontal lembra que são três coisas né o menu de links ele tá dentro da tag aqui é o l que é é filha da nave Então é isso aqui isso aqui e isso aqui e a gente colocou um Space between ou seja um espaço entre cada um desses elementos além disso a gente pode fazer um align items Center Então a gente vai alinhar os itens ao centro vocês lembram que esse B cof tava para cima o github também tava para cima vou até comentar Só para vocês verem

de novo Olha só eles estão como se fosse lá no início alinhados no topo agora quando a gente dá um align item Center eles vão ficar alinhados aí num eixo central então agora vamos começar a estilizar cada um dos elementos dentro da nave aqui do nosso HTML primeiro a gente tem esse nosso spam bcof porém a gente tem vários spans aí ao longo do código então é importante a gente definir uma classe específica pro nosso título porque ele Vai ter uma estilização diferente dos outros spans então eu posso colocar aqui uma Class vocês já conhecem

também classe né como eu falei já também tem um vídeo aqui no canal de CSS que eu explico o que que são classes o que que são as tags e tudo mais e por que a gente usa e aqui eu vou colocar o nome de logo mesmo né nessa classe então aqui no nosso CSS a gente já vai puxar a nossa classe logo e vamos começar a estilizar O que que Tem de diferente no nosso logo ele é um texto ele não é uma imagem mesmo que seja um logo e eu já importei essa fonte

lá quando eu peguei ali no Google fonts então o que que eu posso fazer pegar mesmo exatamente o que tá escrito aqui é a fonte Family Tech fonte size 32 Então vou copiar e vou colar aqui dentro do meu CSS mesmo tudo que tá ali no figma e também é o Font weight é importante aqui né de 600 eu vou colocar aqui embaixo porém Tem um negócio a gente tá utilizando e ao invés de pixel Rain Então vou colocar dois R aqui pro nosso Font size E além disso Qual que é a cor a cor

eu acho que era fffff mesmo né Deixa eu ter certeza aqui ah é isso aí é tudo fff como é a cor que já tá herdando ali do nosso Body então não precisamos colocar definir a cor vamos ver então como que tá essa logo agora T Olha só Bale cof tudo em minúsculo ainda mas tá tudo com a letra certa como que faz pra gente deixar esse Bale com letra maiúscula sem que a gente tenha que escrever com letra maiúscula no nosso HTML o que não é legal para Essa parte aí de acessibilidade porque a

gente escrever em maiúscula o leitor de tela pode entender de uma forma errada a gente tem uma propriedade que é text Transform essa aqui é nova também hein upper Case então quando a gente utiliza esse upper Case ele vai transformar todas as letras aí que estão dentro desse dessa tag dessa classe logo em Upper e olha só já tá tudo em letra maiúscula então sempre usem aí essa técnica a gente vai utilizar inclusive para outras coisas que nem esse novidade aqui também então é bem legal de vocês já conhecerem essa propriedade do CSS Beleza agora

Bora passar pro CSS do menu aqui ainda tá tudo como uma coluna só então o que que a gente pode utilizar para deixar tudo bonitinho o home receitas novidades melhor avaliadas tudo é no na horizontal display Flex e deixar Também o Flex Direction Roll que na verdade já é o o padrão jogo Logo quando a gente já joga o display Flex ele já vai deixar como Row Então vamos ver eu tenho aqui a l né que vai ser o que a gente vai estilizar mas eu posso fazer o quê Colocar uma classe nela para ficar

mais bonitinha que eu vou colocar menu né pode ser menu eu acho o nome e aí aqui embaixo vou colocar a classe menu Vamos começar estilizar com o tal do display Flex jogando escrevendo Apenas o display Flex olha só o que já acontece ele já colocou elas todas em Row mas mesmo assim eu vou escrever porque eu gosto demais de sempre colocar o Flex Direction Row não vai mudar nada aqui no nosso na nossa página agora o que que a gente precisa fazer tá tudo colado um no outro o que que a gente tem que

ver aqui é o o que que separa né qual que vai ser o espaço que tem entre cada um deles eu não sei se eu consigo ver isso daqui aqui deixa eu ver ah acho Que tem hein esse espacinho Box padding ã 24 pixels olha só aqui Ele tem o GAP 24 pixels ou seja 1.5 R eu vou colocar Então esse GAP né que também é uma propriedade aí do flexbox que a gente pode utilizar de 1.5 R assim ele vai separar entre cada um dos itens dois Rin e perfeito ficou do jeito que a

gente queria mas porém todavia a cor também da letra aqui é diferente Tem um aqui que a gente deixou Branco Mas vamos deixar padronizado esse cinza então eu vou Colocar aqui vou copiar essa cor e vou colocar o Color com esse FF 2780 Então vamos ver como tá ficando pronto ó já deixamos ele cinzinha agora vamos fazer a estilização do github que nada mais é deixa eu ver aqui o que que tem a cor dele é ff2 E7 é diferente daquela fff F então é importante a gente colocar eu vou colocar aqui embaixo e também

a gente vai ter que fazer o fonte Weight que eu acho que é diferente ele é 600 a gente tinha colocado no pão qu Inter 500 então a gente também vai ter quear essa fonte weight Então bora lá olha só eu não vou estilizar direto no a Porque também tem vários outros as eu criar uma classe G Hub mesmo e aí a gente vai colocar tudo isso aqui dentro github aí a nossa color vai ser essa daqui e o Font weight Font Weight vai ser 600 Vou salvar e olha só já mudou aqui também do

jeito que a gente queria beleza pessoal já fizemos então o HTML ecss aqui do header eu vou Minimizar agora a gente vai vir pro Main o que que acontece no Main o nosso M ele tá dividido em três sessões né como vocês lembram Tem a sessão Hero que é essa principal Tem a sessão Hero que é a principal a gente deixou uma sessão aqui pro botão e uma sessão Aqui para baixo Todas elas estão na vertical então a gente pode fazer aqui no nosso M um display Flex e colocar com o Flex Direction colum Então

vamos fazer isso aqui no nosso código também só tem uma tag M que é essa daí eu vou colocar ela mesmo M vou abrir aqui as chaves e eu vou colocar o nosso display Flex Flex Direction colum Vou salvar e olha só T meu assim Sinceramente eu nem lembro Como tava mas provavelmente não mudou nada Ele já devia est assim como uma coluna mas vai ser importante a gente ter isso realmente para definir o nosso a organização dos nossos elementos porque agora a gente vai ter que utilizar cada uma dessas sections e elas precisam ficar

na vertical Então vamos lá primeira section aqui que é a section Hero a gente vai ter essa parte aqui do spam novidade a gente vai ter o título vai ter o subtítulo O que que a gente Vai precisar fazer essa section eu vou primeiro dar o nome dela de Hero pra gente poder saber que essa é a section do Hero Hero eu vou salvar E aí gente uma coisa que tem que é diferente já primeiro do nosso background é a cor né aqui o header é o background que a gente tá utilizando é esse marrom

um pouquinho mais claro e aí a gente vai ter que utilizar esse marrom escuro então a Gente já vai colocar isso dentro da nossa section do Hero mesmo então vou colocar aqui o ponto Hero e a gente já vai colocar o nosso background o background vai ser qual cor ó ele já traz aqui do figma né alguns para auto preencher mas como eu não tô eu podia estar com o figma aqui dividido na tela para poder ir olhando enquanto eu vou codando mas eu acho que para vocês vai ficar muito pequeno para vocês enxergarem então

fica mais difícil para Eu poder autopreencher com o figma Mas vocês podem utilizar aí eh olha só aqui o background é esse 18 10 0 1 2 então eu vou colocar aqui essa corzinha Vou salvar vamos ver como que tá ficando Olha só então vou subir aqui pra gente poder visualizar a diferença com o header aqui a gente tem o header que tá mais clarinho e aqui ó tem essa diferença pro nosso marronzinho mais escuro beleza além disso a gente também Vai colocar uma Max wid né uma largura máxima de 1120 PX como a gente

já tinha feito lá no cabeçalho para ficar alinhadinho e a gente vai colocar uma altura para esse nosso Hero né pro nosso banner para ele poder também ficar fixo e a gente vai utilizar aqui uma unidade de medida diferente do r ou do Pixel que a gente estava fazendo então eu vou colocar aqui height né que é a propriedade de altura height dois pontos 60 VH ponto e vírgula O que que é esse V H Se não me engano é View height que é a altura da tela do seu navegador entendeu então por exemplo sem

VH é a altura total que você tem ali de visualização do navegador então 60 é mais proporcional a isso então uma unidade de medida legal quando a gente tá mexendo aí com altura e e aparência ali na tela sabe que é o que a gente tá fazendo aqui com o nosso é banner do Hero além disso a gente vai fazer então o nosso display Flex por quê A gente vai ter aqui ó dentro do nosso HTML ó deixa eu mostrar aqui a gente tá utilizando aqui o nosso Hero né ele tem como filho o header

e a div de imagens Então são esses dois elementos esse aqui E esse aqui a gente precisa usar o display Flex deixar eles na horizontal mesmo e aí a gente vai poder estilizar cada um desses lados Então a gente vai colocar aqui o nosso display Flex Vamos colocar um Flex Direction Row Vamos colocar um justify content Space between Opa Space around não Space between assim a gente também vai deixar esse espaço né a gente vai colocar os dois ali no máximo que eles podem chegar e deixar esse espaço no meio deixa eu até mostrar como

já tá ficando né para vocês entenderem o que eu tô falando Opa Deixa eu voltar para cá olha só é que tá muito grande né as imagens não vai aparecer da forma como deveria Mas enfim tá no Space between e a aqui ó a gente tem um GAP bem grande Deixa eu ver se eu consigo Pegar o tamanho do GAP ó tem um GAP de 10 Não não é isso um GAP de 10 pixels é eu acho que eu não vou conseguir pegar esse GAP eu vou colocar uns seis R aqui ó Entre esses dois

as duas coisas então eu vou colocar um GAP vamos ver se seis R fica muito ou pouco seis R ponto e vírgula E aí eu vou salvar Olha só esse aqui é é o tamanho do GAP na prática acho que ficou bom né ficou de boa é que ainda tá realmente muito grande as imagens tudo mais a gente já vai mexer Nisso então agora a gente vai começar a fazer primeiro essa parte aqui do conteúdo né do Hero e depois ali as a parte das imagens Então vamos colocar aqui no nosso header né do conteúdo

vou colocar uma classe também porque a gente tá cheio de header já eu vou colocar Hero conteúdo e a gente vai usar essa classe aqui para estilizar essas três quatro coisas né que tem o HR ali também e o que que a gente precisa fazer colocar eles em coluna porque ó temos Aqui isso aqui isso aqui isso aqui eles estão todos alinhados em uma coluna vamos fazer o nosso display Flex display Flex Flex Direction colum deixa eu ver como que é o justify content eu acho que é Center deixa eu ver não não é Center

eu acho que não é Center né porque eles estão aqui no início deixa eu ver acho que eu vou deixar como tá a gente não vai mexer agora depois eu vejo PR porque tá muito difícil de enxergar ali na página e eu Vou colocar um GAP entre eles né que eles têm também bastante elemento é que eles TM um espacinho entre cada um ó 18 18 meu dá para usar 16 né para ficar um ren acho que é melhor do que a gente colocar bem quebrado vou colocar um Rin aqui mesmo deixa eu ver como

que fica tchã ele está já alinhado aqui é que tá muito ruim mesmo essas imagens estão muito grandes Eu acho que eu vou primeiro agora mexer logo nas imagens pra gente Poder continuar mudando o que tá aqui na esquerda Mas eles já estão aqui agrupados na horiz na na vertical mesmo como a gente queria Então deixa eu já fazer aqui o nosso a nossa div aqui que vai ter as figuras eu vou colocar uma classe para ela também e eu vou colocar Hero imagens container container E aí a gente vai estilizar essa classe Hero imagens

Container abr as chaves e eu também já vou estilizar aqui as imagens então eu vou pegar esse Hero Images coner E aí ao invz de eu criar uma classe para essas nossas figures eu vou pegar vou fazer um pouco diferente para vocês também relembrarem no CSS como que a gente pode mencionar uma tag que fica dentro de uma outra tag com classe então por exemplo aqui a gente tem o hero imagens container e a gente pode dizer que a gente quer pegar estilizar o elemento Figure que fica necessariamente dentro de algum elemento que tem essa

classe ass E aí pr isso a gente vai fazer a gente vai colocar esse sinal de maior que e a gente coloca a tag Figure então a gente consegue estilizar dessa forma também é um formato que você pode usar aí no seu código dependendo da onde você quer fazer eu acho bem legal também E além disso eu quero pegar a tag imagem que tá dentro da tag Figure que tá dentro de uma tag que tem essa classe Então eu posso ainda chegar e fazer isso aqui ó MG então você pode usar de várias formas e

aí eu vou colocar aqui que eu quero uma wid de 100% eu acho que ele tem border radius né se não me engano deixa eu dar uma olhada aqui é tem um Bard radies di 8 pixels Então vai ser é meio R 0.5 Rin deixa eu ver como que já tá ficando as nossas imagens ó já tá arredondo imagens container né que é o agrupador dessas imagens todas eu vou Colocar que eu quero que a largura seja eu vou colocar uma largura máxima de 45% por exemplo pra gente poder ver olha só ele já diminuiu

bastante né Deixa eu colocar aqui comentar para vocês verem tava enorme aí agora eu descomento olha só ele já diminuiu para poder caber tudo aqui na nossa página e aqui a gente vai agora começar a colocar mais como a gente vai querer deixa eu ver aqui quantas que são e a gente vai querer criar quatro Colunas de imagens a gente pode utilizar a seguinte propriedade colum count 4 então vamos ver como que ficou deixa eu salvar aqui e aí ele já quebrou as imagens Teoricamente era para ele ter quebrado em quatro colunas Deixa eu só

ver o meu HTML se realmente tá direitinho R container né que eu coloquei É isso aí bom eu vou colocar um GAP entre essas imagens vou ver se melhora alguma coisa col GAP de um R vamos ver colocar uma margem de menos Men tch já estamos melhorando deixa eu ver o que eu posso fazer mais aqui no nosso Hero eu vou colocar também um pading né aquele espaçamento interior Então vou colocar aqui um padding colocar zero na vertical zero r e vou colocar dois R aqui na nossa horizontal para ele puxar um pouquinho mais para

Dentro deixa eu ver como que vai ficar Beleza vou colocar aqui a Margin alto também alto e uma coisa também que a gente pode observar V é que o nosso é que eu só vi agora porque para mim tava muito escura a tela mas o nosso background ele tá menor do que realmente o nosso background do Hero ele tá menor do que deveria né ele deveria ocupar a tela inteira então o que que eu vou fazer para solucionar isso daqui a gente tá Aqui no nosso CSS colocando o background aqui no Hero o nosso Hero

É esse aqui é a section Class Hero e a gente colocou uma é Max widget dele mas eu tinha colocado Max widget para pro conteúdo ele ficar Centralizado não a parte Escura então eu vou criar e uma div apenas pra gente conseguir encapsular toda essa section E aí colocar o background nela Então ela vai ficar estendida de uma forma mais completa então o que que eu vou fazer Aqui no nosso index HTML eu vou colocar uma div aqui antes da nossa section vou fechar aqui vou englobar a nossa section eu vou dar um t aqui

e aí eu vou colocar Class vou colocar a principal as nomenclatura não tá o ideal aqui né pessoal nesse projeto mas eu até desafio vocês a deixar uma nomenclatura um pouco mais legal E aí eu vou colocar aqui nessa classe Principal o nosso background para ele não ficar preso aqui a Max wid eu vou trocar aqui vou colocar aqui vou salvar e olha só agora sim a gente tá com a a coisa Total mas vamos voltar aqui para esse negócio de não tá apenas em quatro colunas eu vou continuar editando aqui o nosso Hero container

e uma coisa que a gente pode observar é que as imagens elas estão saindo para fora e na verdade aqui no nosso e na nosso no nosso design elas Estão meio que sendo sobrepostas por tudo que tem em volta e aí a gente pode colocar essa propriedade aqui ó overflow dois pontos clip E aí agora a gente já consegue ó tá vendo deu até tempo de carregar e esconder Então ela já ficou com aquele efeito Zinho que tá no design né de colocar para cima mais para baixo e tudo mais vamos então agora personalizar aqui

essa parte do conteúdo Então a gente tem aqui o nosso Hero Conteúdo eu vou colocar vou editar o novidade o título vou colocar o HR e o H2 também então eu já vou colocar ele aqui embaixo a gente tava editando as imagens porque tava me incomodando bastante as imagens grandes mas aí a gente começa a colocar aqui para ficar tudo em ordem no nosso CSS Então primeiramente aqui no nosso spam Como a gente vai e ter vários spans desse tipo novidade ou em alta né que a gente estava vendo aqui ó que ele é meio

Coloridinho eu posso criar uma classe para sempre chamá-las e aí conforme a gente vai mudando de cor a gente vai chamando uma outra classe para poder personalizar por cima entendeu E aí para isso eu vou colocar aqui no spam uma Class ã destaque destaque E aí eu vou salvar aqui no nosso CSS Então a gente vai colocar essa classe destaque vou abrir aqui as chaves E aí a gente vai ver qual que é então aqui ó Deixa eu ver no nosso figma ele é é Font Family epilog Font size 14 Vou colocar aqui no nosso

CSS o Font size a gente pode colocar 0.875 R Mas a gente pode também padronizar com 16 16 R para ficar melhor assim mais bonitinho com realmente todas as medidas estilizadas então eu vou salvar aqui também a gente tem o nosso fonte weight que é 500 Vou colocar aqui e também tem aquele detalhe de que é para ele ficar tudo em Uppercase eu tinha escrito receita e eu tinha escrito novidade em letra minúscula mas a gente quer que ele fique em upper case e aí a gente vai usar aquele text Transform upper Case vamos salvar

vamos ver como é que ficou Então olha só já estamos aqui com novidade Só falta agora o quê a cor agora como eu falei e existem vários momentos que a gente vai utilizar esse spam e a gente vai poder usar essa mesma classe destack com essa fonte com essa fonte weight com Texto Transform uppercase E aí a gente pode variar Quando for variando as cores então o que que eu posso fazer criar uma nova classe apenas com o nome da cor então eu dou um espaço escrevo marrom por exemplo que é o caso aqui do

novidade E aí eu vou colocar aqui a classe marrom e dizer na classe marrom que quando realmente for chamado essa Classe A gente vai utilizar o Color deixa eu pegar lá a color dele que é esse marrom aqui meio laranja Né esse a45 tudo mais então eu vou pôr aqui e vou pôr o ponto e vírgula depois a gente vai encontrar outros que tem outras cores e aí a gente vai precisar apenas criar o nome da cor por exemplo aqui a gente pode criar uma classe amarelo e aí a gente coloca exatamente como tá aqui

mas a gente coloca destaque amarelo bem legal Beleza bora então agora para nosso título H1 só tem um H1 então também é mais tranquilo a gente usar aqui a nossa Tag mesmo vamos ver aqui quais são as informações né do texto Essa é a cor ff a gente vai ter o fonte Family mon Serrat vou pegar a cor eu acho que já tá padrão né a gente já tá usando fff por padrão lá no b então a gente vai pegar uma Font Family Font size e o Font weight vou pegar tudo aqui depois eu tiro

aquela ali do Fun Style que a gente não vai precisar eu vou tirar aqui aí a gente vai apenas mudar o Font size de 56 A gente vai transformar em R E aí Vai dar quanto 3.5 R então 3.5 R Vou salvar vamos ver como é que ficou tch Pronto já ficou aqui encontra receita perfeita bora então fazer o nosso HR colocar aqui o nosso HR vou abrir as chaves e olha só eu vou pegar ele aqui ele tem essa cor aqui vou colocar essa # aqui bonitinha e aqui pra gente colocar a cor a

gente vai colocar o border color E aí a gente vai colar eu vou olhar aqui como que tá ficando olha só ela já ficou Dessa cor eu acho que tá legal né a gente pode deixar dessa forma também depois a gente pode até mudar a largura se for o caso mas eu acho que tá bem legal assim aí aqui a gente vai fazer então o nosso subtítulo que vai ser esse nosso H2 mas aí aqui a gente pode colocar uma classe Hero subtítulo porque eu acho que vão ter outros subtítulos ali ao longo do nosso

projeto Então vou pôr aqui embaixo do HR Hero subtítulo E aí a Gente vai pegar também as informações dele que eu acho que tem uma cor ó essa aqui é a color Font Family Inter tudo mais pegar também o que a gente já tá acostumado eu vou tirar esse Font Style vou tirar aqui também e vou dar uma entada vamos salvar Ah aqui também tá 20 pixels eu vou deixar como 24 aí põ 1.5 R também para ficar mais padronizados e olha só explore dezena de variações de bebidas perfeito tá bem legal porém gente ainda

tem um problema aqui a gente Tá com novidade tudo é batendo ali no no topo por que que isso tá acontecendo porque as nossas imagens Teoricamente elas não estão começando aqui elas estão começando lá em cima a gente colocou aquele overflow então a gente pode tentar trazer aqui para baixo centralizando as imagens com essa parte aí do header né do no nosso Hero Então como que a gente pode fazer isso aqui mesmo no Hero e a gente já tá com o display Flex a gente já tá eh juntando Ali né Essas duas partes as imagens

e o header E aí a gente coloca o align items Center vamos ver se funciona tá tá bem devagar aqui para para carregar Olha só gente pronto foi É isso aí que eu queria Aí agora eles já estão centralizados os itens bora então agora descer pro nosso botão aqui que que a gente colocou no nosso HTML deixa eu descer aqui isso aqui tudo a gente já fez né vou fechar aqui essa nossa div e vou abrir a section do botão A gente tem uma section dentro a gente tem um botão e dentro a gente tem

a imagem do botão eu vou colocar uma classe aqui para essa section que vai ser botão container container e aqui no buton eu posso colocar aquele atributo do Type é Button e também vou posso colocar aqui uma classe se bem que ele é o único Button né eu posso deixar mesmo como a tag Vamos então estilizar primeiro esse Botão container colocar aqui embaixo e o que que a gente precisa fazer vou colocar a nossa widget de 100% vou colocar o Max widget de 1120 pixels e aqui esse nosso botão só tem uma questão também pessoal

que eu vi agora eu tinha baixado o Button na verdade é pra gente baixar apenas esse chevrons Down tá que é apenas a setinha mesmo que a gente vai fazer Vai editar o botão inteiro depois que agora que eu Tava vendo que eu baixei errado então o que que eu fiz eu já baixei agora o chevrons E aí eu vou trocar também baixei com svg vou deletar esse Button E aí eu coloquei esse chevrons Down eu vou trocar aqui no HTML pro chevrons D tá porque senão ele já vem todo estilizado com a borda da

laranja isso tudo a gente pode fazer no no CSS mesmo então eu vou colocar aqui o chevrons Down Vou salvar deixa eu ver agora como que tá aqui na nossa página olha só agora ele tá só o Branquinho que ele tava ainda com o laranjinha sabe E aí agora a gente vai conseguir editar bonitinho o nosso CSS do botão Então vamos continuar aqui no botão container ó eu vou fazer um padding né pro nosso botão ele ficar um pouco maior então aqui a gente vai ver o botão ó ele tem um pading de 16 é

pixels né então eu vou colocar aqui um pading de um Rin vou colocar Margin alto e eu vou colocar um Transform translate 0,50% negativo menos aqui colocas duplas salvar e beleza a gente já fez aqui o contêiner do nosso botão agora a gente vai utilizar o botão em si que tá aqui com a classe Button né isso então vamos lá [Aplausos] Button eu vou tirar essa borda né que tá Então border n ai gente eu coloquei o pading aqui em cima perdão o pading eu vou aqui embaixo mesmo que é é o border o pading

do botão em si Olha só agora ele já tá com esse espaço aqui dentro né então agora a gente vai seguir utilizando o nosso botãozinho ele provavelmente tem um border radios deixa eu ver aqui no código se ele tem border radios de 8 pixels vou Colocar então 0.5 border Radi 0.5 r o background dele background vai ser essa cor aqui laranja deixa eu salvar ver como tá ficando e agora pronto temos aqui o nosso botãozinho e eu vou começar agora a estilizar aqui embaixo a nossa parte das receitas então voltando no nosso HTML eu vou

colocar aqui deixa eu fechar aqui essa parte do do botão né a section do botão vou abrir a section aqui das Receitas eu vou colocar o nome dela com a classe receitas mesmo receitas E aí a gente vai começar a estilizar o nosso receitas então vou abrir aqui as chaves a gente vai colocar um display Flex porque olha só dentro do Nossa section a gente tem o header e a gente tem aqui a div de onde vai ficar os os cards então Teoricamente são duas coisas né são aqui o nosso header Então essas informações aqui

e aqui a gente tem os nossos cards é que tá difícil de ver Porque não tá muito estilizado ainda mas eles vão est em formato de coluna né eles essa parte vai est em cima da outra não tá assim e uma do lado da outra então a gente vai colocar o nosso Flex Direction colum vou colocar o nosso Max wid de 100 1120 PX vou colocar o padding que eu acho que tem aqui e olha só o padding a gente tem que contar como se também tirasse o o do botão então Quatro Rin a gente

tira um R do pading do botão a gente coloca então o pading de três Rin deixa eu colocar aqui para vocês verem três Rin na vertical e aí na e horizontal a gente coloca os dois R deixa eu salvar Opa e olha só Pronto agora a gente já tem o nosso pading colocado e a gente tem a margem alto também margem alto então pronto agora a gente precisa estilizar então cada uma dessas coisas primeiro o cabeçalho vamos aqui no nosso index HTML a gente tem aqui o header vou colocar a Classe receitas cabeçalho cabeçalho e

a gente vai editar aqui o receitas cabeçal colocar também ele vai ser um display Flex também vai ser um Flex Direction colum porque a gente tá com os textos em coluna e ele tem um gzin de 0.5 R então eu vou ver aqui olha só a gente tem um gapin aqui entre todos eles vamos ver como que tá beleza a Gente já acabou de organizar isso aqui ó aqui são cinco 0.5 r a gente agora tem que editar cada uma dessas cada um desses elementos Então vamos no nosso nos HTML eu vou colocar aqui Aquela

nossa classe É destaque e ele é o destaque marrom que a gente também já criou essa classe para poder colorir e aí ele já vai pegar aqui ó a estilização que a gente tinha feito deer Case e com a cor marrom agora a gente vai colocar aqui uma classe pro nosso título do receitas né então receitas Vou colocar aqui embaixo Aqui o receitas tit e a gente vai pegar aqui a estilização do receitas título que é o fonte Family mon serrar Font size e tal deixa eu copiar vou colar aqui dentro tirar aqui os Style

e pegar a cor dele também que é essa daqui colocar color e Essa corzinha deixa eu ver como tá ficando fechou ó já mudou tudo aqui vamos mudar então o de uma olhada nas receitas Mais amadas que a gente pode colocar com a classe é receit subtítulo subtítulo a gente cria aqui também um receita subtítulo vou abrir as chaves e a gente pega aqui também as informações do Não não é essa daqui né Esse aqui a gente pega as informações color Font Family Font weight deixa eu mudar aqui Aqui tá 18 né eu vou colocar

também como se fosse 16 pra gente tentar padronizar em um R E aqui em cima acho que tá 32 né vou colocar como dois R fechou agora a gente vai começar a estilizar cada uns dos nossos cards aqui dos nossos os cafezinhos que é esse cappuccino esse Expresso aí a gente vai ter que utilizar esse quadradinhos né pra gente poder depois brincar com eles então primeiro olha só a gente já fez essa parte aqui do header a gente vai começar a estilizar essa div aqui que vai ser a classe receitas Card container vou copiar isso

aqui colar aqui embaixo e o que que a gente vai fazer nela Primeiro a gente vai esse padinho né que tem aqui deixa eu abrir Chaves Então vou colocar o pading então a gente Primeiro vai colocar um pading nesse coner para agrupar os os cards de zer 10 víg salvar Opa tá muito grande essa foto né fica muito ruim de ver a gente vai colocar o nosso display Flex Direction vai ser Row porque a gente vai colocar tudo na horizontal depois a gente vai quebrar cada um dos Cards e como que a gente faz para

quebrar Flex Wap Wap Ou seja quando chegar ali no final ele vai quebrar e vai pra linha seguinte e cada um deles também tem um GAP né entre eles 32 vai ser do R então colocar um GAP aqui de 2 R ponto e vírgula agora a gente vai estilizar o nosso Card que então vai ser essa div aqui vocês lembram dentro do card a gente tem o header que é essa parte aqui do em alta cappuccino tal então a gente tem nessa div Essa div ela Vai simbolizar o Card em si Então vou colocar aqui

Class receitas Card vou [Aplausos] copiar colocar aqui Class receitas Card E aí a gente pode pegar o background né que a gente tem uma cor diferente aqui vou vou copiar esse codozinho então background vai ser esse ai não foi o hash a gente tem um pading aqui dentro né de não sei se eu consigo ver esse Pading mas eu acho que é 32 ó o azul tá igualzinho o rosa né então vou colocar um pading de dois R ele ele tem um border radios também eu vou abrir aqui border radios de 8 PX então 0.5

R border radios 0.5 r e aqui dentro o que que acontece a gente tem dentro dessa div Ele é separado o header o nosso Nossa descrição e embaixo a imagem do autor então a gente pode jogar um display Flex para agrupar essas Três coisas né essas três coisas que estão aqui dentro ó esse esse e esse então vamos fazer o display Flex o Flex Direction é colum né eles estão agrupados em vertical colum eles TM um GAP também aqui parece de dois R né Ele é bem parecido também com o tamanho aqui do azul vou

colocar como dois Rin e a gente pode também colocar um Flex bases de 29 ren Então vamos ver aqui como que tá ficando olha só tá Gigante né Por causa da imagem a gente ainda vai arrumar mas ó vocês estão vendo que a gente tem aqui o nosso cabeçalho temos aqui a nossa descrição embaixo a parte ali do autor agora então vamos estilizar o nosso cabeçalho aqui vou pegar esse header vou colocar uma classe nele que vai ser receitas Card cabeçalho vou copiar pra gente colar ali no nosso CSS estilizar E aí no nosso cabeçalho

ele Tem duas dois itens ele tem tanto essa par aqui da direita quant da esquerda quanto da direita Então a gente vai fazer um display Flex em na horizontal vai abrir com o Space between e vai alinhar os itens and por porque esse extraordinário ele tá aqui embaixo onde termina o cappuccino ele não tá Centralizado aqui ó Nessa linha assim então vamos fazer isso vou colocar o display Flex aqui tudo isso que eu falei e olha Só ele já tá exatamente como deveria agora eu vou editar essa parte aqui só esses dois o em alta

e o cappuccino por quê Porque eles também tem um gapz inho entre eles então eu vou precisar colocar isso daí e para colocar eu preciso colocar o nosso display Flex deixa eu criar aqui uma classe né para esse para essa div aqui dentro que vai ser é receitas Card cabeçalho detalhes né Vamos colocar essa classe Detalhes copiar aqui a gente vai colocar aqui no nosso CSS vou colocar o nosso display Flex o Flex Direction a gente tem que colocar como colum que ele tá um em cima do outro e aí a gente coloca esse gapz

inho de 0.5 R pronto aí agora a gente tem um espacinho bonitinho entre o in al e o cappucino bora então editar agora esse em alta que nada mais é do que aquele nosso destaque então a gente pode simplesmente chegar e colocar aqui no Nosso spam aquela classe destaque porém lembra que a gente criou o destaque espaço marrom nesse caso ele é amarelo então a gente não vai colocar aqui aquela classe marrom para colorir de marrom a gente vai criar uma classe Amarelo lá no nosso CSS eu vou até deixar junto ali com a marrom

para ficar mais organizadinho Deixa eu ver se eu acho aqui o marrom e a gente vai colocar esse amarelo e colocar o código da cor hexadecimal que vai ser esse aqui e a Tudo mais e aí a gente vai pôr color dois pontos isso aqui beleza Vamos ver se agora funcionou ó o em alta já tá todo editados do card que vai ser aqui ó no H3 Vamos colocar uma Class receita título Vou salvar copiar aqui Opa copiar aqui vamos jogar lá embaixo mesma coisa a gente vai pegar todo a estilização aqui do texto fonte

Family F tudo mais ah eu não peguei a Cor né color tudo precisa trazer como se fosse 24 Então vai ser 1.5 R Vou salvar e pronto temos aqui o nosso cappuccino agora a gente vai editar aqui a avaliação deixa eu ver aqui a gente vai colocar um uma classe também aqui paraa avaliação que é esse extraordinário deixa eu pegar colocar aqui no nosso CSS abrir as Chaves E aí qual que é o Color Font Family Style weight pessoal aqui não tem muito segredo tá send não bem sincero eu tô copiando e colando do figma

coisa que a gente já fez aí o projeto inteiro Então se vocês quiserem ir fazendo eu vou dar uma aceleradinha aqui aí vocês vocês seguem tá porque agora a gente vai fazer a mesma coisa aqui com a descrição a gente vai fazer a mesma coisa com o nome do autor tá então deixa eu já fazer isso Aqui rapidinho dar [Música] uma agora chegando na nossa parte aqui do autor a gente tem dentro dele a imagem e o spam Então vamos criar uma classe aqui pra gente poder editar que vai ser receita autor E aí a

gente vai jogar um display Flex também para agrupar os dois assim na horizontal Então vamos lá receita autor display Flex o Flex Direction Arrow eles ficam alinhados no Center então ele a imagem vai ficar retinha ali com o texto e aqui eles TM um mini GAP também eu vou colocar um gapin de 0.5 he agora a gente edita a foto né a imagem que a gente tem aqui que vai ser esse IMG eu vou colocar ponto receita autor IMG que nem a gente já tinha feito antes aí aqui a gente vai editar essa imagem Ela

tem um border radios de enorme de 999 PX Mas eu posso colocar apenas um border radios de 20 R já vai funcionar acho que já vai deixar ela redonda deixa eu ver já deixa ela redonda e aí a gente vai colocar o tamanho dela widget de 1.5 R porque aí fica 24 pixels né Acho que fica de boa É isso aí ó já ficou pequenininho já ficou bonitinho Vamos só agora alterar o nome do autor que vai ser esse spam aqui vou colocar uma Class receita autor Nome nome aí a gente pega aqui as informações

bonitinhas de cor está tudo mais que a gente também já tava fazendo E um R aqui beleza pessoal olha só o que acontece agora é que a gente tem apenas um czin feito né a gente depois pode e criar vários outros cards para ficarem agrupados mas eu vou já fazer aqui o footer depois a gente faz essa multiplicação de cards e arruma melhor então aqui no nosso HTML a gente tem Deixa eu guardar essa parte aqui do Main depois a gente volta a olhar isso aqui guardar o m inteiro na verdade a gente abre o

footer dentro do footer a gente tem esse P do copyright e o p do feito com muito amor eu vou colocar então uma Class já copy footer copy e aqui eu vou colocar uma Class footer autor então aqui a gente vai estilizar primeiro footer a gente pode colocar aqui no footer um padding né de qu R 64 pading de quro R Um display Flex Flex Direction col ele fica um em cima do outro align item Ceres ficar os dois centralizados eles tem també um GAP entre eles que eu posso aqui de 0.5 então 0.5 e

Oter tem um background diferente né eu vou pegar aqui qual a cor dess background doter Ah esse dois pon alguma coisa então vou colocar aqui o background esse dois pon alguma coisa Deixa eu ver como ele tá ficando beleza e agora então a gente vai estilizar esses dois últimos o fter copy e o nosso footer autor Então bora o footer copy ele vai ter essa estilização também que eu vou copiar aqui do nosso figma vou tirar o Style tirar aqui vou padronizar para 16 pixels um R E aqui embaixo o nosso fez com feito com

muito carinho e a blá blá blá Olha só ele tá com rgba hum beleza bom vou copiar assim mesmo tudo Certo tá num outro formato aqui a a cor mas tá tudo bem e aí a gente coloca aqui também um R Ixi acho que eu tirei aqui o background do do footer Pera aí deixa eu voltar pronto então agora nosso CSS tá quase pronto acho que eu vou só colocar aqui uma marzin entre os dois deixa eu ver aqui no top do card colocar aqui uma Margin top top margem Top de uns dois R talvez

deixa eu ver como que fica é ficou mais bonitinho agora tem um espacinho aqui e aí o que que a gente tem que fazer é apenas multiplicar a gente pode colocar quantos cardos a gente quiser né no design aqui por exemplo tem quatro mas aí fica a seu critério Quantos você achar que deve pôr por quê Porque isso daqui na verdade eu quero depois fazer uma dinâmica com JavaScript então toda vez que a gente adicionar informação da receita de algum Café ele vai automaticamente colocando então eu já vou deixar o código assim pronto pra gente

conseguir implementar o JavaScript aí em cima do HTML mas o vídeo ainda não acabou a gente vai agora subir do jeito que tá agora o nosso sitezinho pro ar para vocês já conseguirem ter isso daí no ar e aí depois a gente vai fazendo uma alteração só vai subindo essas alterações com o site januar para isso a gente vai utilizar o serviço da hostinger Então Pessoal agora é hora de colocar o nosso site no ar e vocês já sabem como que a gente faz isso tem vídeo no meu canal e se você não sabe como

faz isso eu vou mostrar agora passo a passo utilizando o serviço de hospedagem da rosinger que lógico é o que eu sempre utilizo o suporte deles é muito bom é tudo muito rápido é fácil também de você subir seu site eu nunca tive um problema com eles então eu sou muito fã da marca e eles TM vários planos aí de hospedagem de site Inclusive eles TM hospedagem em outros formatos né tem tamb VPS tem já ligado conectado diretamente ao WordPress eu já fiz tanto vídeo gente falando muita coisa aí sobre internet o que que é

domínio o que que é hospedagem então confere aqui que tá bem legal esses vídeos todos mas enfim hoje em dia eles têm alguns planos aí para hospedar sites single Premium Business Então se vocês entrarem aqui na página inicial da rosinger eu vou deixar na descrição o Link você vai poder ver alguns planos que eles têm tanto single quanto Premium quanto Business aí você vê o que que mais se adequa aí ao que você quer utilizar Porém você tem um cupom de desconto Olha só eu vou deixar aqui na tela para vocês poderem utilizar não deixem

de colocar porque vocês vão ganhar um desconto enorme e eu espero muito que vocês curtam também aí a plataforma da rosinger porque eu sou muito fã e é o que a gente vai fazer Agora Então segue o passo a passo aqui comigo que eu vou mostrar para vocês como que a gente vai subir esse site no ar e aí poder entrar em qualquer lugar eu já comprei aqui o meu plano Business web hosting que é o que eu tenho aqui e aí ele tá pendente para poder configurar logo após você comprar você também pode registrar

o seu domínio aqui pela rosinger também ou utilizar um que você já tenha comprado e vamos então clicar aqui em configurar eu tô dentro aqui da Minha conta tá pessoal só para vocês saberem Essa não é a página inicial da rosinger Ela tá aqui na descrição Então vamos começar aqui a responder o para quem eu estou criando o site meu site já foi criado né eu já fiz ele que tipo de site eu quero criar portfólio Business Ah eu vou colocar como como outro outro tipo de site né Ah não então vamos colocar loja virtual

mesmo eu criei sozinha meu sitezinho E aí eu quero criar um novo site quero o meu domínio Grátis então eu vou utilizar aqui o domínio que eu já tenho direito pelo plano aí da rosinger eu vou colocar a Rafa ah não vamos colocar o Bale Coffe V colocar Bale Coffe cof eu quero ponto com pesquisar vamos ver se pode ai já tá em uso vamos pôr ponto Tech Então Rafa bcof PTE que legal eu adorei t t tã localização do Servidor América do Sul concluir a configuração acho que é o Mais pertinho que tem aqui

daqui e agora a gente vai esperar carregar aqui a configuração Tô ansiosa gente para ver como que vai ficar olha ele já está instalando o SSL tá tá não sabia que ele instalava hoje automaticamente Antes quando eu subi o site na rosinger tinha que fazer essa configuração Zinha gostei disso tudo pronto visualizar o meu site bom nem adianta visualizar meu site né porque Teoricamente eu não subi os meus Arquivos tudo que você tem que fazer agora é carregar as ficheiros do seu site é isso que a gente vai fazer então mas olha só já tem

um Preview de como que vai ficar eu vou aqui em gerenciar meu site no painel de controle da hostinger que tem muita coisa gente banco de dados Auto instalador e aqui gente nesse Painel de Controle tem tudo ó tem sobre desempenho segurança e-mail domínio site arquivos gerenciador de arquivos banco de dados Auto instalador Eu vou aqui em gerenciador de arquivos provavelmente é aqui que a gente vai ter que trazer os arquivos do meu site e olha só not upload here Então isso é já um sinal que não é para colocar ali e aí eu vou

colocar então aqui dentro do meu Public HTML vou então trazer os meus documentos Ó gente eu vou copiar aqui todos os arquivos eu não vou importar a pasta aqui para cá tá gente eu vou trazer realmente os arquivos se você traz a pasta depois ele vai ter um Problema para conseguir acessar o arquivo raiz entendeu aí depois você vai ter que trocar enfim Inclusive eu tô até tentando ver se é realmente dentro do Public HTML que eu tenho que que trazer os arquivos eu não me lembro vamos ver ele tá fazendo upload aí de todas

as os arquivos que tem no meu projeto e pronto olha só ele já trouxe aqui tudo bonitinho vamos aqui no painel de controle agora eu vou clicar aqui para Ir no preview Olha só agora ele tá com o preview já Funcionando aqui tá o nosso site This is a Preview of a Website by a customer of hostinger exato que é a gente aqui tá o nosso sitezinho só que pessoal olha só aqui tá escrito status do nosso domínio o domínio bcof ptech estará acessível dentro de 25 minutos então a gente realmente vai ter que esperar

um tempo para conseguir ter acesso a ele direto a gente tem o preview pra gente já visualizar como que Vai ficar mas aí vai demorar 25 minutos para realmente pegar o domínio porque eu acabei de registrar esse domínio né Eu tinha esquecido eu podia ter feito isso antes do vídeo mas enfim pessoal é muito simples vocês viram o passo a passo aqui não esqueçam que vocês TM cupom de desconto na hostinger então se você quiser contratar qualquer coisa usa ali o cupom vou deixar aqui na tela de novo espero que você tenha gostado aí de

desenvolver mais um site tem vários Outros projetinhos práticos aqui no canal se você quiser que eu traga mais também deixa aqui nos comentários é isso pessoal um beijo e espero vocês aí no próximo [Música] [Música] vídeo