LANDING PAGE COM HTML e CSS!

Oi oi gente sejam bem-vindos a mais um vídeo aqui do canal eu só Rafaella ballerini e hoje a gente vai aprender a fazer uma lenda entende né [Música] só fica mandando em países ela nada mais é do que uma página inicial de algum produto que sempre mostra-lhe o que que ele faz né Faz aquela e marketing Zinho para pessoa querer comprar clicar em Fazer e se cadastrarem obter E é isso que a gente vai fazer hoje viu produto que a gente vai utilizar é o baile Bosque que é o bote principal aí da nossa comunidade

que está em constante desenvolvimento ele agora tem algumas funções em os meus a gente vai colocar mais e ele foi desenvolvido principalmente aí pelo tals pelo matar e as pessoas que estão na administração da nossa comunidade no discord' que se você quiser entrar vai estar aqui embaixo na Descrição convite e dando um spoiler essa daqui é a página linda que vai sair daqui hoje você vai sair com ela desde já se inscreva no canal para não perder nenhum vídeo de programação e tecnologia Caso seja seu primeiro contato com HTML CSS e recomendo muito que você

assista meus dois outros vídeos falando em cinco minutinhos que quer eu com HTML o que que é o CSS como eles funcionam pega um café o mesmo caderninho vai anotando com calma tudo que eu vou falando para você Não sair daqui apenas com essa página feita mas também muito conhecimento que vocês vão levar ele para o resto da carreira de vocês e se precisar Coloca mais lento vídeo Coloca mais rápido também se eu ficar falando muita coisa que você já sabe se faz a maneira que você quiser eu vou deixar aqui na descrição todo o

índice com todas as partes que eu vou ensinando para você poder também se você se perder que falar um minuto certo do vídeo que você tem Que voltar ao final do vídeo Não esqueça de compartilhar no Linkedin essa sua Conquista para o pessoal poder ver que você fez uma página dessa Como é o primeiro vídeo de tutorial vou deixar aqui em cima também ele teve um grande aumento gigantesco nesta rede social e meu todas as pessoas que postavam ia lá curtir a comentado e sabe o que acontece no Linkedin né seu curso e comenta as

pessoas que estão na minha rede que me segue vamos lá evento também essa Publicação e hoje eu estranho aí o meu 50.000 seguidores no Linkedin que vão na sua publicação Se você postar e marcar para eu poder curtir comentar qualquer dúvida que você tenha deixa aqui embaixo os comentários e queria dizer com muita felicidade que esse vídeo patrocinado pela rotineiro que já é parceira minha aí é um tempo e eu sou muito fã para quem não conhece a rotina é uma plataforma de hospedagem de sites onde o Oscar dos meus sites e se você não

sabe Exatamente quê que esse tal de hospedagem então eu também tenho um vídeo aqui no meu canal explicando tudo bonitinho resumidamente para você poder colocar um site no ar ele não ficar apenas ali na sua máquina né do Servidor assim que você tá criando o local você coloca numa dessas plataformas você pode registrar e o seu domínio para ter a sua cara site né Por exemplo www.habblet.in. Tech que é o meu que aí qualquer pessoa pode acessar sua página Por exemplo que a gente vai desenvolver hoje e não esqueça que eu tenho meu cupom de

desconto lá na plataforma deles que é o Rafa [Música] então agora Bora para o código a primeira coisa que vocês precisam saber é que eu utilizo o vs code visual Studio code para editar e escrever os meus códigos você a utilizar qualquer outra Editora a sua escolha mas eu recomendo Versículo de que é um dos mais Utilizados aí se você ainda não tiver na sua máquina eu deixei aqui embaixo na descrição meu repositório onde eu falo passo a passo de como instalar ele na sua máquina é bem tranquilo Além disso no meu vs code eu

vou utilizar o Ballerina Spin que é a coloração assim do meu editor superbonita que foi feita pelo Alpha que é uma pessoa que trabalha na administração da minha comunidade no discord' que também tá aqui na descrição o link se você quiser participar ficou Muito linda eu recomendo muito que você utilize também então bora começar acordar a primeira coisa que eu vou fazer antes de abrir as coisas sobre qualquer coisa é criar uma nova pasta para o nosso projetinho que está bastante bagunçado né como vocês podem ver e eu vou colocar aqui Landing page como o

nome dela eu vou abrir essa pasta e dentro dela eu consigo ficar com o botão direito do mouse e clicar em abrir com code e ele vai abrir essa pasta no Meu vs code diretamente que você usar outro editor ou você quiser abrir manualmente também se Abra o visual Studio code que e eu vou clicar aqui e pronto Abril que o meu vs code na pasta Landing page reagir às vezes cria sua pastelzinha. Deste aqui não tem problema coisa que nós vamos fazer a ter em mente que a gente vai utilizar dois arquivos principais para

a gente desenvolver a nossa página um pro HTML que vai ser a estrutura esqueleto da nossa página e um Arquivo para o CSS que a gente vai fazer isso utilização de todos os elementos que a gente escrever no nosso HTML então eu vou começar pelo HTML em si porque não dá para estilizar o que ainda não existe né Eu vou clicar aqui novo arquivo e vou dar o nome dele de inglês. HTML é bem comum a gente dá esse nome de inglês como índice né a página e principal que a gente vai usar no nosso

projetinho eu ainda não vou criar o do CSS na hora que a gente pode utilizar eu Crio você pode começar a escrever o seu HTML do zero colocando lá uma tag doctype que vai dizer para o nosso navegador está aqui no arquivo HTML colocar todos os metadados um por um escrevendo mas existe uma facilidade muito grande aqui no vs code que você pode simplesmente digitar um a ação e dar um enter e quando você faz isso pa aparece já um código pronto a estrutura pronta do básico do HTML se isso não aconteceu com você você

não Tiver aí se você pode pausar o vídeo e escrever um por um até para você também aprender mas a gente ainda vai dar uma mexidinha aqui no que tá acontecendo eu vou explicar também cada coisa primeiro essa tag doctype HTML é algo que vai dizer para navegador o que for ler nosso arquivo que é um documento HTML muitas vezes as pessoas não utilizam mas eu recomendo utilizar em seguida a gente tem essa tag HTML com Allende em está falando que a linguagem que a gente vai Escrever o nosso código tá em inglês o que

não é verdade então eu vou mudar para pt-br que é o português do Brasil e o HTML se você já assistiu Meu vídeo no canal falando de HTML 5 minutos ele é dividido em rede e Body né o head a gente normalmente guarda os metadados que são informações importantes que não vai aparecer para o usuário que for abrir a página direito mais pro nosso navegador é legal a gente escrever Ainda mais pro também se a gente quiser por Exemplo e entre no nosso site procurando no Google procurando por outras páginas tão importante você se atentar

a esses metadados e o bode é onde a gente realmente vai escrever todos os elementos é o título imagem formulário qualquer outra coisa que você quer colocar no corpo da página então ainda aqui para o Red que a primeira parte já veio com 3M dados e um tá e tu para a gente poder já editar o primeiro metadado que a gente tem aqui no nosso Red do HTML é o charset que tem aí como o valor o TS traço 8 que é uma forma da gente indicar os caracteres que vão ser utilizados aí no nosso

código vão deixar de forma padrão o segundo metadado eu vou apagar e agora esse outro metadado que tem o name viewport content with the device will it ele indica que a gente vai poder adaptar o nosso código a outros dispositivos como dispositivos móveis por exemplo eu também vou deixar da forma que tá aqui em seguida a gente Tem o tython que vai ser o título da nossa página mas não vai ser o que vai aparecer escrito para PC se precisar nossa página de pular sei lá cinco motivos para você usar HTML não esse é o

título que aparece lá na Dinha se você for ver aqui no YouTube semana que tem o título em cima da água que você tá vendo eu não sei se tá escrito YouTube e traça o nome do meu vídeo ou tá escrito apenas o nome do meu vídeo mas tem o nome esse é o quarto e aqui como a gente vai fazer Além de impedir dublado in both eu vou colocar aqui balé morte que é o nome dele e vou colocar Modere a sua comunidade do discord' então assim a pessoa já vai saber quando ela deixar

ali o mouse em cima do título da água do que se trata aquela água quando ela entrar Além disso também vai ser o título quando as pessoas buscam no Google aí é sua página né então se você busca lá moderação na comunidade do discord' se aparecer na Página do meu bote e vai ser isso que vai aparecer no título existe também outra metade dado importante em relação a isso né de quando a gente pesquisa no Google e aparece as informações que tem muita ligação com s ou mas está tudo bem Se você não souber do

que se trata que é o scription é o metadado de descrição que é na verdade aquela descrição Zinha que aparece embaixo do título quando você pesquisa no Google algum site eu vou adicionar ela aqui também então eu Começo dos velhos escrevendo aqui até de meta que nem as outras duas de cima o nome dela vai ser discription que é o nome desse metadado e dentro do contém eu vou colocar Qual que é a descrição que eu quero que apareça o que é um bot que irá moderar e deixar a sua comunidade comunidade segura de um

jeito fácil mas qual pouco cumprido aqui mas está tudo bem vocês já sabem tá escrito e no final e o fecho a nossa tag eu vou separar aqui dar um espacinho aqui no Red para vocês darem uma olhada a separação para vocês conseguirem enxergar de forma melhor mas a gente já terminou todas as informações que a gente queria colocar no é depois a gente vai colocar mais uma coisa ou outra mas eu tô falando para vocês agora Bora para o bode para gente escrever todos os elementos que vão aparecer na nossa página então a gente

começa a utilizar agora o nosso Sigma o design do signo a gente Primeiro dá uma olhada assim por Cima e tentar separar a página em algumas sessões né em algumas divisões interessantes que a gente pode fazer por exemplo eu vou dividir a minha página você pode fazer de outra maneira se você quiser em três grandes seções que a primeira vai ser o header que esse cabeçalho a segunda vai ser o controle do principal que esse meio aqui e por último a gente vai ter o nosso footer que vai ser o rodapé eu já vou fazer

essa separação direto no HTML e depois Eu vou destruir achando tudo que a gente vai colocar em cada uma dessas partes porque eu gosto de fazer dessa forma para isso eu vou utilizar as tags semânticas do HTML eu poderia muito bem fazer isso utilizando divs que são tags utilizadas para você criar divisões na sua página mas você pode usar tags semânticas que vão dar um significado para cada uma dessas divisões que você vai ter por exemplo eu vou utilizar aqui uma tag chamada header que vai indicar Que o que tiver dentro dele é do cabelo

E para quê que eu vou utilizar dividir se eu sei que vai ser um cabeçalho e eu posso indicar isso para o meu navegador é muito melhor então vou fechar aqui a tag às vezes e o fecha automaticamente ele já cria a outra tag de fechamento eu vou dar um espaço porque eu vou escrever coisa dentro desse regra mas eu vou colocar daqui a pouco logo em seguida vou colocar a segunda parte da divisão da minha página que essa página Principal então eu coloco uma tag semântica chamada nem que é principal em inglês for dar

um espaço aqui também para a gente depois preencher com os elementos que a gente quiser e por fim tem o nosso footer que é o nosso rodapé da página que também é uma tag e semântica aqui no HTML que a gente vai utilizar Beleza já deixei aqui as três divisões principais EA claro que a gente vai começar do começo e de um por um né Para a gente entender tudo que tá Acontecendo na nossa página em ordem hoje ela então primeiro o nosso cabeçalho O que que a gente tem de elemento que a gente pode

ver a gente tem aqui uma imagem que a logo né da comunidade Ballerina em cima de dãozinho aqui e tem a gente tem em seguida o nosso menu com comunidade ballerini tutorial tem ser se e comandos que vão ser botões que a gente vai poder ficar aí para outras páginas em primeiro momento eu consigo na verdade é dividir Esse cabeçalho em duas principais partes que vai ser primeiro a imagem que fica aqui no canto direito e segundo o nosso menu de navegação então eu posso fazer essa divisão mesmo no nosso HTML eu vou fazer aqui

eu vou fechar aqui primeiro na verdade essas tags minha isso ter para gente mexer depois eu minimizei aqui clicando na setinha e vou começar a escrever o nosso rapper então que eu falei isso pode dividir em dois duas principais partes o nosso cabeçalho que O primeiro vai ser a imagem com a tag INED já vou deixar ela fechado aqui a gente já coloca nossas propriedades e segunda a gente vai colocar uma Nesi que é o menu de navegação é um nerd mesmo dentro da nossa Neve a gente vai ter quatro principais botões né mas não

são botões ensina a verdade são links são âncoras que a gente vai poder clicar e ir para outro lugar existe e se ficar para isso que é diferente da do botão é a tag a de âncora e eu vou fechar esse Ar ele vai também ter uma tag de fechamento em seguida e eu vou escrever cada uma das coisas que eu quero colocar nessa tag que é comunidade ballerini primeiramente E aí embaixo eu vou colocar outra Âncora que vai ser a tutorial embaixo temos mais uma que é Opa escrevi errado opensource Deixa eu tirar esse

dedo aqui opensource e por sim comandos o Miguel raça entende o que está Acontecendo mas não tem uma forma da gente conseguir visualizar isso né porque Ok já escrevi aqui todos menos mas como que eu sei que tá indo no lugar certo se a imagem vai aparecer ou não existe uma extenção do verso e conte que eu também vou deixar aqui na descrição chamada Live server que você consegue aí ver ao vivo todas as alterações que você vai fazendo no seu código ao você salvar eu vou utilizar ela agora e as extensões todas você sabe

aqui ó tem essa menu Lateral do versículo tipo você consegue baixar Então você escreve aqui o live-server você vai achar e extensão que eu tô falando para utilizar ou você clica com o botão direito e consegue abrir o pino slide server dentro aí do nosso código HTML com isso olha só já abriu o nosso a nossa página que está desenvolvendo com as nossas ancorazinha que eu já escrevi que a comunidade vallerini tutorial pensar se comandos eu vou na verdade Minimizar para ficar um Pouco mais claro a gente tem aqui os dois negócios na própria página

e bora continuar o Finn que matar um pouquinho apertado mas a gente consegue aqui se virar né então vamos agora a imagem né que a imagem tá aqui mas demais Não tá aparecendo nada obviamente porque a gente não tem nenhuma imagem mesmo para colocar no nosso código para fazer isso vocês têm acesso ao signo eu vou deixar na descrição também o link do filme é para você poder entrar e fazer o que eu Tô fazendo aqui você consegue clicar aqui na imagem do Sigma e spect ou em design mesmo do documento do Sigma você clicar

no maizinho para poder exportar e você seleciona aqui eu gosto de utilizar o svg eu acho que é um formato melhor para gente poder utilizar no nosso código e eu clico EcoSport logo quando eu clique em exportar ele já abre aqui a minha pasta e eu vou colocar dentro do nosso projetinho mesmo que além de impedir eu consigo deixar aqui eu não Preciso desse logo o Vou deixar só como o lobo. Svg e salvo logo que eu salvo ele já aqui aparece no meu vs code então eu já tenho agora imagem dentro do meu projeto

e como que eu faço para colocar ela aqui na tag nele ela tem uma propriedade chamada src que vai ser se né Fonte aqui você coloca o caminho ou a imagem e às vezes se ela tiver dentro de uma pasta tem colocar a pasta/o nome dela aqui no caso não tem face eu vou colocar apenas longo logo. Svg vamos Salvar e vamos ver o que acontece aqui olha só já apareceu na nossa página azinha outra coisa legal da gente colocar a tag medi é a propriedade áudio que vai ser um texto alternativo caso a imagem

não carregue então eu vou colocar aqui logo da comunidade da lery mas quando tá tudo funcionando não vai aparecer por enquanto é isso que a gente vai deixar no nosso cabeçalho eu sei que meu Deus como que a gente faz para colocar o textinho no lado direito ali a Imagem aqui né na mesma linha isso tudo a gente faz com estilização do CSS infelizmente é assim que a gente tem que deixar o nosso HTML em primeiro momento mas eu prometo para vocês que vai ficar bem legal passando agora para o nosso conteúdo principal que esse

nem eu vou ter Minimizar aqui o nosso header agora vou abrir um mentes eu vou dividir Lu também em duas grandes partes né Aqui deixa eu te amo então um pouco para vocês conseguir enxergar melhor meu de Oi gente eu tinha apagado a imagem eu nem tinha visto que eu fiz isso enfim nós temos aqui dois conteúdos principais que é aqui é a primeira parte o realmente o primário né o principal um e o secundário que essa parte aqui de o que ela faz por você e a gente vai fazer essa divisão aqui também no

nosso código então a gente coloca para eles uma tags Action que é de sessão fecha e depois a gente coloca uma outra secção que vai ser a segunda sessão e a gente vai Colocando o cada um dos elementos dentro deles na primeira secção O que que a gente tem a gente tem esse conjuntinho aqui de coisas escritas e a gente tem a imagem da Vale bote também a gente pode dividir isso eu vou utilizar div para poder juntar essas três coisas aqui que vai ser meio que a parte escrita dentro da nossa secção primária que

vai ser aqui a nossa primeira div nossa primeira divisão e em seguida a gente tem também uma imed né que a gente tinha aqui no Header dentro da nossa divisão têm essas três coisas o título o subtítulo em HTML a gente utiliza muito as tags H1 H2 H3 até h-6 para a gente poder usar em títulos e subtítulos vagam na mente você utiliza apenas um por página e eu vou utilizar agora pro balé bote porque é o título principal e eu vou utilizar o H2 para esse nosso subtítulo que temos aqui então aqui novela vou

colocar a bala é bot e no H2 eu vou copiar e colar aqui o nosso subtítulo vocês podem fazer isso Aí também e Naldo depois do nosso título e subtítulo a gente tem um botão que eu vou deixar ele aqui também e o que que tá escrito no nosso botão nem adicione e aqui do lado direito a gente tem a imagem da Bad Boy que a gente também precisa exportar da mesma forma que a gente fez com a logo vou colocar que bala e morte em salvar e vai direto aqui para o nosso para os

nossos arquivos então eu vou colocar aqui na imed a nossa propriedade Src de sursi e colocar bala e bote. Svg também vou colocar o áudio imagens abalei bote e na segunda sessão a secundária a gente vai ter aqui um título H3 e três parágrafos também vou fazer dessa forma com as tags específicas né Primeiro vai ser esse H3 que eu falei que tá escrito o que ela faz por você e em seguida o pa vou te deixar aqui na mesma linha a gente não tem diferença você colocar na mesma fechada aí na Mesma linha na

linha de baixo essa organização mesmo e eu vou colocar os três parágrafos aqui [Música] então agora a gente já tem as nossas duas sessões dentro do nosso conteúdo principal feitos e vamos ver como que está ficando vocês podem vendo ao longo de vocês irem desenvolvendo vou mostrar agora olha só uma um caos né mas também vou lutar vamos aqui tá tudo certo a gente tá vendo o nosso título aqui o Nosso subtítulo aqui deixa o um furo botão a imagem que vai ficar depois para direita embaixo o nosso conteúdo secundário paga três e todos os

três parágrafos tá legal não não vem mais não tá mas tá do jeito que a gente esperar então vou Minimizar aqui o meio e vou fazer o nosso footer finalmente o que que nós temos o nosso footer aqui no nosso design apenas a nossa imagem também do logo aí do ballerini estamos colocar nossa tag imed ó e vou fazer a Exportação da nosso logo da mesma forma o [Música] já apareceu aqui para gente vou colocar o src ballerini conta svg e pronto está prontíssimo nosso HTML por mais bizarro que pareça existem alguns detalhes aqui é

visuais que eu acho legal mostrar para vocês antes da gente passar por o nosso CSS bem Sutilmente aqui eu queria um Sistema de verificação captcha tá em e a gente consegue fazer isso não é para chamar uma atenção maior para esse trecho do texto com a tag strong tão lá vão Minimizar de novo Nosso fruta abrir o nosso meio que tá aqui nessa segunda section e eu posso fazer essa tag dentro do nosso parágrafo então venho com ela aqui ó strong eu vou pegar o fechamento dela e fechar a onde eu quero que para o

o sistema de verificação captcha aqui que eu quero Que pai então você acha aqui assim eu posso fazer também nos outros dois o E aí E aí e [Música] pronto agora a gente olha aqui como tá ficando já está em Beleza então já temos o nosso HTML feita agora a gente vai passar para o nosso CSS eu vou abrir novamente aqui os nossos arquivos e vou criar a nossa arquivo Style. CSS Que estilo com CSS como que a gente começa a fazer isso se você viu o meu vídeo né falando um pouquinho bem rapidinho como

que funciona CSS você sabe que a gente pode utilizar classes ou identificadores ou as próprias tags para você poder estilizar cada uma delas aqui no CSS eu vou criar uma classe para cada um desses elementos que a gente tem no nosso HTML justamente para ficar claro para vocês tudo que eu tô editando E como que cria suas classes dentro dos Nossos elementos do HTML a gente coloca aí o a propriedade Class igual e a gente coloca aqui o nome da classe que a gente quer dar para cada um precisa elementos eu vou colocar aqui todos

os nomes delas vou adiantar um pouco o nosso vídeo para ele não ficar muito longo e vou deixar todos os nomes das classes escritos aqui na descrição pra vocês poderem pegar a copiar e colar mas eu recomendo que vocês utilizem o nome de vocês quiserem até para vocês poderem treinar um Pouquinho CSS [Música] e pronto todas as classes aqui para a gente poder utilizar e referenciar lá no nosso CSS e olha só não mudou absolutamente nada na nossa página porque realmente a quase em seu tá indicando está nomeando as coisas para poder utilizar agora bora

deixar isso aqui bonita primeira coisa que a gente pode já colocar no nosso CS e são as fontes que a gente vai utilizar na nossa Página que eu estou utilizando duas fontes diferentes quando eu clico aqui em algum texto eu consigo ir no es Pet e dentro do espectro falei todas as informações de tamanho de posição eu não recomendo você se baseia em posição buraquinho do cima porque eles vão posições absolutas ou relativas que não tem nada a ver é melhor você fazer da forma que você quiser mas outras coisas tipo tipografia Olha o peso

da fonte estilo tamanho da fonte aqui tem até o Código CSS que você pode usar também para se basear muito legal tem uma fonte aqui esse rádios como que a gente passa as fontes dentro do nosso código CSS eu utilizo o Google fonts tudo errado Google você pode colocar aqui no Google entrar direto aqui na primeiro site deles e aqui a primeira página que aparece você pode jogar o nome dela aqui ó é raios raios raios acho que vai aparecer olha esse primeiro você clica na o que você quer eu vou Remover que eu já

tinha adicionado antes mas vai aparecer assim para vocês e você clica aqui ó E seu ex this Style às vezes pode aparecer vários Estilos da fonte é legal você até chegar aqui qual que é o o leite né que é 400 aqui por exemplo mas é o que tem aqui regular 400 eu vou selecionar esse Style ele vai ficar aqui guardado Ok no cantinho no meu menuzinho ele vai ficar aqui eu já vou selecionar as outras que eu também tô utilizando a verdade é uma só outra Eu clico aqui e descubro que o nome dela

é Sara ala só que eu tô usando ao leite e 400 e também estou usando await the 700 que agora eu utilizo Então esse sárala Vou pesquisar aqui no nosso Google fonte de novo e o que que a gente faz para poder como no nosso CSS de duas formas você pode por o link dentro do HTML ou você pode fazer um importe no CSS eu vou fazer um importo clicando aqui não importe eu vou copiar apenas essa parte aqui que tá dentro da tag Style essa tag Style é usada no HTML eu vou colocar direto

nos eu não preciso dela vou copiar e no nosso código CSS aqui no topo eu vou colar não importa se você está entendendo o que tá acontecendo aqui ou não ele tá basicamente puxando as informações aí dessa URL as informações das fontes para poder colocar no nosso código para a gente usar tá tudo bem se você não entender a esse é o RN e aqui embaixo a gente tem no próprio Google fonts Como Que você especifica qual fonte você quer usar então quando eu quiser usar o Haiti os eu vou escrever isso aqui dentro do

nosso código CSS quando eu quiser usar o sarau e vou usar isso aqui também então eu vou deixar isso aqui guardado aqui para a gente poder usar depois quando a gente for colocar realmente as fontes que tudo pronto para a gente começar em seguida o que que eu gosto de fazer eu gosto de usar o reset CSS o que que seria isso as nossas páginas quando a Gente utilizar livros elementos do HTML já vem com utilização pré-configurada então às vezes o botão com uma borda tal a página puxada para cá puxada para lá no reset.css

ele anula todas essas configurações já pré-definidas para a gente realmente poder est é da maneira que a gente quiser e não ficar sabe porque eles bancos que você não sabe o que que tá acontecendo e na verdade uma pré-configuração para isso que a gente utiliza para isso eu vou utilizar um Asterisco o quê que os políticos fazem seleciona todas as tags aí do nosso documento HTML e como vocês viram no vídeo de CSS a gente coloca uma Chaves e começa a utilizar aqui dentro dessas Chaves então quê que eu quero fazer com todas as nossas

tags eu quero colocar uma margem de 0 a margem é realmente aquela distância para fora do nosso lamento né aquela a gente tem aqui o nosso sei lá título ela vai dar aí uma um espaço sei lá de 15 pixels da imagem Que te ensina eu quero deixar ela zero que era para a gente ter essa imagem e eu vou colocar um pezinho de zero também o quê que eu pede em qual a diferença dele com a margem a margem é a distância da tag que você tá usando para exterior o pede é a distância

da terra que você tá usando para o conteúdo dela então por exemplo aqui a gente tem desde essa linha até essa linha aqui do meio o nosso o principal existe um pedem aqui de alguns pixels que faz o nosso Conteúdo ficar mais pra dentro ali dá uma distância aqui do nosso conteúdo para onde começa a realmente a nossa tag principal outra coisa que a gente vai colocar o box-sizing border-box ó e vou colocar um sexy decoration long John ou seja vou tirar qualquer decoração que pode ter no texto se ele vai ficar azulzinho né sublinhado

Além disso vou também colocar um reset aqui no nosso bode em que o nosso Font size o tamanho da fonte vai ser 100% agora Vamos fazer o nosso design a primeira coisa que a gente pode colocar é o fundo né mas se background aqui super legal com Gradiente e como ele tem esse Gradiente ao invés de ou simplesmente copiar a cor dele como são duas cores e tem esse Gradiente você pode né sabe inspect do Sigma e copiar essa parte aqui de background linear gradient que ele já tá falando para você que forma com você

escreve esse Gradiente no CSS então eu vou realmente copiar e eu vou Colocar ele aqui dentro do Body porque o background vai ser o fundo do nosso da nossa página inteira até Olha só eu vou salvar para você escutar para vocês verem como tá ficando eu não sou nada se você já viu por que que não aconteceu nada eu sei o porquê que não aconteceu nada eu tô fazendo CSS referente ao HTML mas eu não fiz o link entre essas duas páginas ainda E como que eu faço link dessas duas páginas eu coloco aqui Dentro

da nossa tag head nos metadados uma tag link que eu vou realmente fazer o link aí do CSS E dentro dele eu coloco o réu stylesheet isso é convenção sabe você precisa escrever isso para poder dizer para o nosso código que é um código CSS que você vai importar o site é text Barros CSS Oi e a gente vai colocar o agarrasse para referenciar o nosso arquivo Opá que é o estar eu conto CSS Vamos deixar a Tag salvar e vamos ver se agora foi agora sim está ligado nossos s com o nosso HTML a

gente já colocou aqui o background vamos para a próxima coisa é legal você fazer o CSS também em ordem né seguindo o cabo elementos do HTML Então a primeira coisa a gente tem o nosso cabeçalho eu vou colocar aqui pegar a classe dele né aqui no header olha só a classe e para o nosso cabeçalho cabeçalho e como a gente faz a seleção de classes é ponto cabeçalho Diferente aqui de tags que a gente não precisa pôr o ponto eu vou colocar aqui as chaves e o que que eu preciso estilizar o nosso cabeçalho eu

preciso saber que existem duas coisas principais dentro dele a imagem e o nosso menu como a gente já viu e tem classes diferentes para cada uma dessas coisas mas o nosso cabeçalho ele vai ser uma chave maior uma chave que engloba as duas se ele que vai definir a posição dessas duas coisas porque eu vou utilizar a algum chamado Flex-box Inclusive eu vou deixar aqui na descrição guia que eu sempre uso para me basear para fazer esse posicionamento com o fluxbox é muito legal se você quiser acompanhar enquanto eu vou falando Você consegue ver aqui

na imagem por exemplo Qual que é a direção coluna o linha o que que é pra frente para o lado como que se passa é muito legal muito didático gente tá tudo bem se você não decorar como que faz isso eu não decorei até hoje tem coisas que eu eu Sempre me fazer o nisso para poder fazer quando eu tava fazendo esse código eu abri esse dia aqui então já salvei aqui no seus favoritos e Acompanha comigo para você utilizar o Flex Box você sempre utiliza uma propriedade que é o display: Flex aí a gente

Opa faz aí eles já sabem que a gente vê utilizados no Xbox em seguida a gente vai começar a alinhar as coisas uma coisa legal aqui nesse guia é que tem as propriedades para o Perry que é o pai a tag Parque no Caso o cabeçalho e tem as propriedades para TAG filho que são aí os elementos dentro do nosso cabeçalho que vai ser aqui o nosso logo ou aqui o nosso menu o nome noção dois filhos a tag para ver se ele é o pai então a gente tem que focar primeiro aqui nesse propriedades

para os pais primeiro a gente definir qual é a direção que a gente quer que os nossos itens ficam tiver interesse quem horizontal a gente quer que enfim vertical eu vou colocar horizontal então O nome aqui né vendo no menu é flex-direction é o nome da propriedade flex-direction e tem aqui as opções de sexo Direction row-reverse: E como eu quero linha é o próprio ou eu vou colocar ou Feche o ponto-e-vírgula e salvo vamos ver como tá ficando a nossa página olha só já subiu aqui vocês lembram que o nosso logo tava em cima e

o comunidade então não sei quem tava embaixo quando eu coloquei o Flex display Flex ele já Subiu aí as duas coisas porque sabem que a gente quer que utilize aí em forma cor e forma de linha uma coisa que a gente pode utilizar esse Flexx rap caso a gente queira que os itens que abrem a linha e vão para a linha seguinte a gente não precisa mexer nisso nessa parte agora align-items como a gente quer que eles fiquem alinhados então a gente olha aqui ó não está alinhado tá o logo para baixo né um pouco

assim e o negócio lá para cima o nosso mesmo para Cima eu quero que ele se tem os dois alinhados no centro como que a gente faz isso aí online aí temos Center aqui é nosso valor dessa propriedade então eu coloco aqui Aline a itens E ai tons Center vamos salvar vamos ver como tá ficando olha só já desceu aqui o nosso menos com alinhado perfeitamente com a nossa logo outra coisa legal que a gente pode utilizar lá em conta a gente também agora não tem necessidade da gente preencher o GAP é o tamanho a

Distância entre os nossos elementos a gente quem não quiser mexer agora olha só aqui tem uma propriedade que ela justify-content né que é o modo de espaçamento mais generalizado entre os nossos itens têm aqui um específico em que eu acho bem legal que deixa um espaço entre eles porém os dois itens que ficam no fundo Este cão bem lá no final da página bem esticados eu não quero isso eu quero que eles fiquem um pouquinho mais puxados para esquerda e Para direita né que você tá vendo tem um espaço aqui que dar essa distância então

eu vou colocar esse space-around que dessa distância aí dos dois itens de fora então vamos lá justify-content space-around vou salvar vamos ver como tá ficando Olha só já veio aqui para o centro nosso cabeçalho vamos ignorar aqui né O resto aqui esse balão bote e tal E olha como já tá ficando legal nosso cabeçalho e uma coisa também é que a gente pode perceber Ó aqui tá grudado o nosso logo no topo a gente vê aqui que tem um espacinho aqui ó de 18 mas eu não vou colocar 18 eu vou colocar um pouquinho mais

que a gente precisa colocar e como eu falei para vocês existe aquele pede que vai colocar o cabeçalho que começa desde o topo da página e o nosso conteúdo ele vai dar um espaço do tamanho do pezinho que a gente colocar eu vou colocar esse pezinho aí de 24 E aí E quando eu coloco apenas o número né 24px ele dá o pezinho para todos os cantos se eu quiser colocar apenas para cima é o pede eu coloco 24px e coloca o 0px para os lados então tem os formatos aí que vocês podem ver também

eu vou deixar aí na descrição Como que você escreve você aperta em top Bottom que embaixo left or right nesse caso vai ser para todos os lados e vocês podem ver aqui agora como já deu uma distância Legal próxima classe que a gente precisa Estilizar é o nosso cabeçalho imagem que é a nossa logo a nossa louco não tem muito o que fazer aí com a imagem o que eu vou fazer deixar definido uma altura para ela então a a largura já vai se ajustar ao mesmo tempo né se eu coloco na altura máxima à

largura vai junto eu vou colocar uma altura de em 72 pixels estão vamos lá cabeçalho imagem rite que altura de 72 fixas depois vocês essa a gente tem que arrumar aqui a Nossa nave né o nosso menuzinho Lembrando que a classe que a gente deu para isso aqui no nosso HTML foi cabeçalho menu Deixa eu guardar aqui então Vamos colocar aqui o cabeçalho menu cabeçalho menu e o que que a gente precisa arrumar assim como a gente sabe que o cabeçalho é um elemento pai para gente poder utilizar e arrumar a localização dos elementos filhos

os alimentos filhos Também podem ser pais de outras coisas então por exemplo nosso menu ele pode ser uma tag pai para todos os comunidade vallerini tutorial a pensar se comandos que são aquelas tags âncoras então a gente também pode colocar um display Flex dentro do nosso Navegar da nossa navegação de menu para nossos elementos que estão dentro as nossas âncoras nossos as também ficarem com a disposição Flex eu vou fazer isso então para a gente usar o fluxbox a gente vai Colocar o display: Flex e não vai ter nada além de uma coisa aqui que

eu quero utilizar eu escrevi de play display que é aquele negócio de GAP que eu tinha mostrado aqui para vocês Vamos subir ou descer descer o GAP ele coloca a distância entre todos os elementos que vão tá dentro do da tag pai Então olha só eu quero colocar por exemplo 10 pixels vai ficar 10 pixels aqui de separação entre a cada um deles eu vou colocar GAP de 32 pixels estão só coloca Aqui GAP de 32px de pixels vamos ver como que tá tudo grudadinho eu vou salvar e olha só de um distanciamento legal para

nossa página e olhando aqui o nosso pode jogar até ml depois do nosso cabeça a imagem cabeçalho menu nós temos o cabeçalho menu item que são as âncoras que a gente quer utilizar vou copiar eu vou colocar aqui no nosso CSS para a gente poder utilizar e o que que a gente precisa fazer mas se precisar colocar a fonte correta aqui porque olhando aqui No nosso signo a gente tem aquela som de que a gente já importou no nosso CSS que assar Alan mas a gente só importou no documento a gente ainda não tá utilizando

e falando onde tem que colocar além disso a cor da nossa fonte nessas podem ver que tá preto ele lá é um branquinho né um bege e também o tamanho da fonte o peso dela então vamos lá aqui no Google Afonso como eu tinha falado para vocês ele específica como que a gente coloca dentro do nosso CSS As pessoas que a gente quer então a gente usa essa propriedade font-family e pega aqui o nome da fonte a fonte que a gente vai colocar no menu essa sarada não é raios Então vou só copiar essa parte

e vou colar aqui ó como se chama estará lá vou só salvar e Olha mudou já Afonso e se perceberem aqui é uma fonte aqui é outra que é muito mais bonitinho eu gostei Pelo menos dessa que eu escolhi depois a gente vai dar uma é a cor aqui ó dá para gente ver se fio tá Aqui a cor dela vou copiar e as cores elas podem ser escritas de várias formas pode ser quarto está decimal.com RGB nesse formato aqui é o que a gente vai conseguir o do Sigma mesmo que é conhecer os seios

caracteres hexadecimais além disso a gente vai pegar aqui o fonte wait né o peso da fonte que é cadeia vamos ver aqui a gente pode ir no espectro é para pegar melhor ao leite é 400 Vou colocar aqui fonte Wade 400 quanto maior mais pesada mas em né que fica E também o Font size que é o tamanho da nossa fonte O que é que olha 18 pizzas falando e tá pulando de linha pronto vamos salvar vamos ver como tá ficando Olha só bem mais parecido com o nosso designer né faz total sentido agora perfeito

agora a gente terminou e sutilização já do nosso cabeçalho ele já tá perfeitinha ainda falta a nossa listrinha nossa linha é mas a gente vai Fazer isso no final agora a gente vai pular para essa parte do conteúdo principal né o balé bote né também ali a partir o que que ela faz eu vou dar uma olhada aqui primeiro nosso design O que que a gente pode utilizar primeiro né Sempre pensando assim da esquerda para direita e do mais de fora por mais de dentro né Ele é muito pai para os elementos filhos primeiro é

Aquela nossa classe vamos ver aqui no index HTML que ele já deixa para lá na cara para gente Só depois de todos os cabeçalhos menu items at foram quatro a gente sabe que classe A gente pode usar para vários elementos e dois está usando para todos os as quando vocês viram comunidade tutorial tudo tá estilizado da mesma forma a próxima coisa é esse mente classe conteúdo que vai englobar o principal e os secundários também então vamos lá a primeira classe que vai ser o conteúdo Vamos abrir as chaves para a gente começar a estilizar o

nosso Conteúdo essa linha de vocês estão vendo ela marca o início Desse nosso conteúdo principal esse nosso mãe então o que que eu a primeira coisa que a gente vai colocar vai ser essa linha aqui ela não tá marcando o final do cabeçalho Ela tá marcando o início do conteúdo principal porque esse é o melhor forma que eu achei que a gente conseguir deixar bonito dessa forma e como que a gente faz ela no código vamos lá no nosso CSS existe uma propriedade chamada Border-top que é a borda do Topo e a gente coloca como

a gente quer se aborda e eu vou colocar 10. 4 pixels né a grossura dela o que escrevi tudo errado é Solid eu quero ela sólida né Tem pontilhada tem vários outros formatos mas eu quero ela ratinha sólida mesmo e a cor dessa barra que eu posso pegar aqui olha só inclusive tá aqui ó o nosso SS eu border tal só que ele não sabe que é um border top porque como eu falei o signo ele faz as coisas de forma Absoluta Eles não pegam o tipo é os elementos que eu estou desenvolvendo no meu

HTML puro e sem tomar cuidado mas olha só e 0.4 pixel só lhe diga que a cor que é o que falta no nosso código eu vou colar; e vamos ver onde que tá olha só fez aqui a já nossa linha e o nosso cabeçalho agora da claramente certinho Além disso eu vou colocar já aqui no nosso conteúdo principal uma margem aqui embaixo essa margem aqui que vai terminar o nosso Conteúdo principal até o footer dando um detalhe essa linha marca o início do nosso conteúdo principal mas essa linha que ela não marca o final

do conteúdo principal ela marca o início do nosso footer Então essa margem aqui que eu tô dando Aqui termina o nosso conteúdo principal tem a margem para o outro elemento de baixo e Aqui começa o footer E essa distância aqui que eu quero eu vou colocar uma margem embora ou então eu até colocar aqui em cima margem Embora não de 48 pixels e vamos ver antes como está olha só aqui tá grudadinho e cima no meu ballerini vou salvar e olha só deu uma distância legal aqui eu ainda não vou colocar a distância aqui de

dentro do Balé bote porque eu vou usar os Xbox isso vai se arrumar Pronto agora a gente já estilizou homem que engloba essas duas partes dois conteúdo e agora a gente vai passar apenas para esse conteúdo Principal vou mostrar aqui para vocês vão HTML nós fizemos aqui ele também agora nós vamos nessa primeira 7 que vai ser a primeira parte do nosso corpo vou copiar que a classe vou colar aqui no nosso sucesso e esse para gente utilizar Abrir Chaves e vamos lá a gente dentro do conteúdo principal tem dois elementos filhos que a gente

vai querer dispor em sua Xbox então eu começo de conversa a gente já coloca um display Flex é que nem você já estão aprendendo aí já Vão sair aqui profissionais do Xbox aí a gente vai utilizar agora as propriedades do fluxbox a primeira delas vai ser o flex-direction que a gente já viu que pode ser linha ou coluna e eu quero deixar com linha Então vou colocar a flex-direction ou você não precisa fazer isso é essa propriedade não é necessária porque porque quando você joga o fluxbox ele já automaticamente faz essa flex-direction rua ele já

vai na horizontal mas eu gosto de colocar só Para garantir eu vou salvar vamos ver como que tá ficando Olha só agora já tá os dois na horizontal antes ela tava embaixo Só que ainda tá né totalmente um para cima outro para baixo a gente já viu qual propriedade que arruma isso que aquele Aline Aí temos Center ele centraliza as duas coisas eu vou salvar vamos dar uma olhada Olha só centralizou então o que tá escrito tava para cima viu para baixo e a nossa imagem também então estão centralizados direitinho Aqui a gente consegue Oi

gente tá tudo centralizar Dinho bonitinho a gente quer que aconteça a mesma coisa que aconteceu aqui no cabeçalho que tem um espaço aqui da esquerda espaço aqui na direita e as coisas tenham aí o espaço entre si e para isso a gente coloca aquela propriedade que é hoje justify-content space-around vou salvar e olha só eu praticamente não fiz quase nada e os Xbox já arrumou sozinho todo o posicionamento às vezes eu ficar aqui 30 Pixels 40 pixels entre os dois negócios Isso é uma facilidade muito grande dessa ferramenta juro nenhum com carinho esse guia de

flex-box que vocês vão usar muito agora a gente precisa estilizar que esse texto todo também arrumar o tamanho da imagem vamos o nosso HTML ver qual que é a próxima classe e olha só a gente dentro desse conteúdo principal tinha separado em conteúdo escrito e a imagem então eu vou primeiro pegar essa dividir conteúdo principal escrito que Engloba de fato essas três partes o botão subtítulo bom então tiver editar esse pai desses três filhos Então vamos lá no nosso CSS a gente já sabe que tem que fazer criar aqui um ponto coloca o conteúdo principal

escrito que a nossa classe e a primeira coisa que a gente vai fazer você sabe o que que é a gente vai colocar um display Flex por quê Porque a gente quer posicionar esses três elementos de uma forma com utilizando o nosso flex-box então ele é Só eles já tão grudadinhos a gente pode colocar um direto entre eles né para poder deixar uma distância legal a gente vai usar o flex-direction vamos ver qual que é porque né Espero que vocês já saibam aí qual é o resultado eu vou colocar aqui então display Flex e quando

eu coloco display-flex como eu falei para vocês prestem atenção a gente tá aqui na vertical a gente salva ele foi tudo na horizontal isso é bom ou Ruim né no nosso caso agora foi ruim então a gente precisa colocar os flex-direction: que é para deixar em coluna Então olha só voltou agora ficar em coluna porém o nosso botão tá zuado né a gente vai utilizar cada um dos elementos em branco e agora a gente coloca o tal do Gap para poder dar um espacinho Entre esses três elementos Então gato e a gente coloca os 32

pixels é; no final e olha só já tá aí mas mais organizado de um jeito legal ainda falta A gente trocar cada um dos elementos Então vamos fazer isso agora a gente pega aqui a classe do primeiro deles que é o conteúdo principal título aquele nosso H1 usam escrito balé bote eu vou colocar ele aqui na o ponto conta do principal escrito o título e o que a gente precisa alterar a gente precisa mudar a fonte precisa como mudar a cor e precisa mudar o tamanho e também o peso aqui a fonte aquela ritos que

é a segunda que a gente tinha bom então eu Já vou pegar aqui ó fonte eterna de que ele já demonstra para gente como faz eu vou colocar também o nosso fonte wait que é o peso da fonte que vai ser 400 também aqui olhando o nosso balé bote já tá aqui o tamanho também da nossa fonte tá 64 Font size em 64 pixels EA cor vamos pegar aqui também ó sss2 não sei que colocar Collar aqui sss2 não sei que vamos ver como tá o Resultado o perguntar o resultado aqui olha só tem já

tá muito parecido com Como é o nosso tenista quase terminando já nossa página Vamos para o subtítulo subtítulo agora a gente vai copiar Nossa classe dele que vai ser o conteúdo oficial escrito subtítulo Vou colocar aqui no nossos ss.com Tropical subtítulo uma molhar Como funciona Ele usa qual font-family sárala vou pegar aqui no Google fonts é porque a gente já pode até fechar essa guia do Google fonts né pra gente já usou os dois a gente pode só copiar e colar dos outros colocar que o Font Family o fonte wait qual que é vamos ver

aqui 400 também fonte wait é a gente também tem o Font size que vai ser de 24 pivôs e temos a coisinha que esse de não sei o que é E aí olha só que legal e agora o botãozinho tem um pouquinho mais complicado de estilizar mas também é Tranquilo então a gente pegar aqui a classe do nosso botão que a conteúdo principal escrito botão gigante essas classes mas é pra ficar bem descritivo para vocês pegarem e a gente começa a utilizar o primeiro de tudo a gente precisa entender o que tá acontecendo o botão

ele tem um background-color que é o fundo aqui dele que esse bege então eu já vou adicionar esse background color background color esse aqui diz e esse background-color é muito diferente do Collor o Color ele normalmente quer dizer a fonte a cor da escrita né que a gente está colocando o bec banda escola é do fundo mesmo outra coisa eu vou usar o widget que a largura e a raia altura dele mesmo assim absoluto porque vai ficar um pouco mais fácil para a gente poder arrumar Então olha só vou colocar esse ruim de 180 não

sei que por não sei que ela a gente tem que arrumar aqui o formato que o CSE centena mas só sente eu vou Colocar 180 Center 10 é complicado e também a altura vou colocar de 60 pixels para ficar um pouco mais arredondado Dinho aí para gente vamos ver como tá ficando nós botão olha só ele já tá com background já tá com o tamanho largura mas ele ainda tá Quadradão né vamos vamos alterando as coisas aqui primeira coisa aqui vocês podem ver também que ele tem uma borda que não é um border que meu

é meu escuro eu não sei se eles conseguem ver claramente Mas tem uma Bordinha que que a gente não tem no nosso design e a gente não quer ela tem a gente vai colocar aqui um negócio chamado border não como eu já tinha falado para vocês às vezes nem umas configurações já pré-definidas e tem umas coisas que a gente tem que tirar o não é nenhuma ele tem também aqui no Sigma um efeito Zinho de sombra olha só que legal Você consegue ver que é uma sombrinha aqui quando a gente clica no nosso botão a

gente vai no espectro e Consegue ver que tem aqui um box share O que é realmente a caixa de sombra e a gente pode copiar e colar sem problemas no nosso código CSS porque ele vai dizer aqui com o tamanho da sombra Qual é a cor da sombra olha só aqui a cortar naquele formato é de GBA que eu tinha comentado com vocês que é diferente desse aqui então eu vou salvar vamos ver como que tá olha só já veio a sombrinha para o nosso para nossa página muito legal e outra coisa é esse formato

Arredondado do nosso botão né Isso se chama border-radius nega radiação aí da borda e a gente consegue ver aqui que ele tem um reino de Deus de 20 PX aqui em baixo acho que também tem a border-radius 20px e essa mesma propriedade que a gente vai colocar no nosso CSS vamos salvar Pronto Olha que gracinha que já tá redondo Dadinho agora a gente precisa só trocar aqui o que tá escrito né se me adicione que a gente tem que colocar a nossa fonte que vai Ser assar aula a gente tem que colocar o leite de

400 os sais o fato pixels EA cor também que vai ser essa 2f não sei que eu vou fazer isso agora é [Música] Eu [Música] salvei vamos olha só a gente tá uma Grand Sinha Olha só muito parecida gente que o design da nossa página e a gente vai também colocar uma altura máxima para Nossa imagem que nem a gente fez um análogo e a gente pega aqui a classe da imagem que tá fora já né daquela conteúdo principal escrito vai agora sou o conteúdo principal imagens vamo colocar aqui abrir o Chaves e vamos colocar

uma rite de 430 pizza pronto não sei se você vê muita alteração eu deixei bem parecida com que já era mas é para garantir que ela vai Ficar do tamanho legal agora a gente vai ter esse conteúdo secundária a primeira coisa que tem esse essa linha aqui mas essa linha vai estar junto com o nosso título do conteúdo secundário que é o que ela faz por você que nem a gente colocou aqui o conteúdo não é principal que tinha linha que começa no topo aqui o topo o nosso próprio título Então vamos lá vamos entender

o que que tá acontecendo eu vou aqui no Windows já passamos na nossa mãe conteúdo principal Conteúdo secundário a gente tem essa sessão que vai englobar o título e os três parágrafos vinhos Então é isso aqui tudo é esse conteúdo secundário Vou colocar aqui a nossa classe para a gente poder começar a utilizar eu vou colocar a obviamente um display Flex Então vamos começar Oi aqui é um display Flex E aí e o flex-direction vai ser no coluna né que nem a gente já tinha visto se a Gente coloca ele vai na horizontal deve caso

had cima aqui as coisas Olha só como que fica na horizontal caso had cima aqui as coisas então eles colocam flex-direction flex-direction: para deixar tudo ordenado a coluna A gente vai colocar um alarme aí tem Center que nem a gente já colocava lá nos outros quando eram horizontais por a gente falava lá ali align-items-center horizontalmente ele se se alinhavam na forma horizontal Assim né pro centro quando a gente está falando de coluna ele se alinham na forma central assim então tudo que está aqui pra direita vai tudo ali na para o centro é o que

a gente quer Olha só tudo centralizou além disso a gente vai colocar um espaço entre cada um dessas coisas né que aquele nosso GAP vou colocar um gato de 24 pixels o espaçamento legal e eu vou colocar um margem top de 48 Pixel quero um de uma distância aqui desse conteúdo secundário Para o conteúdo primário né o conteúdo principal Então vai ser um margem top de 48 pixels porque tava muito grudado aqui na robozinho agora de um espaço mais legal Zinho agora a gente vai fazer o nosso risquinho e o título que eu comentei para

vocês primeiro a gente pega Nossa classe do título Vão colocar no nosso arquivo do CSS vou abrir chaves para gente começar a estilizar e olha só o que a gente Precisa colocar aqui primeiro de tudo a gente vai colocar essa borda para a gente não esquecer que essa daqui como eu fiz exatamente da mesma forma tem aquele border-top E aí eu pego essas informações aqui da borda né de Só Óleo de não sei o quê então aqui borda ele não sabe que é top então eu vou colocar top aqui pior vamos ver como que tá

sharan porém ainda tá muito grudadinho né e por isso mesmo aí o impede in top e pede top que vai ser aplicada apenas Na parte de cima de 48 pixels né vamos ver como que fica com 48 pixels entre a linha e o negócio Vocês entenderam que se eu tivesse colocado à margem top o que que aconteceria ficaria a linha mais para baixo porque ele daria uma margem maior do elemento secundário primário mas não era isso que eu queria eu queria que o próprio da mente secundário desce uma espaço entre o conteúdo dele e o

corpo dele então essa linha indica onde ele começa e sentir o pézinho então Conteúdo dentro dele que foi para baixo que é o título agora a gente quiser alterar a fonte é que vai ser aquela hiit o check-in aqui do Balé bote o Font size 24 fonte de leite e 400 a cor e aí eu já volto aqui para vocês o [Música] o e pronto olha só como que tá ficando Olha só nosso título aqui do parte segundo ela ficou maravilhoso mas eu quero também dar um espacinho maior Entre ele e os três parágrafos Se

não ficar muito igualzinho então eu vou colocar também aqui um margem embora não quero quero esse elemento mais distante dos demais entrar margem boram de uns 16 pixels muita coisa porque já tem aí o bebe né então eles são uma com garrafa Skol bem grandinho agora a gente vai estilizar os parágrafos que vão ter a mesma estilização eles têm aqui é a mesma classe Ou passa o ponto aqui no começo {para a gente poder utilizar e a Gente vai colocar aí também são the female is on the way from Side sound color que estão já

aqui no Sigma Então vamos pegar aqui olha só essa aula são de leite eu vou colocar 400/700 é pro strong ele já faz isso automaticamente o que vai ser de 18 pixels EA cor essa daqui também que cada aqui tá bom a saudade [Música] e Olha só eu coloquei aqui o fonte de leite de 300 para ele ficar mais fininho do que eu tava esperando Olha só mesmo assim o strong como a gente tinha colocado aquela tag no meio do parágrafo Ela já sabe ele tem que fazer mais destacado então aqui tá os 300 e

que já tá mais mais destacado que a gente já tinha cortado no nosso CSS também e olha só gente perfeito nosso cabeçalho está ótimo Nosso principal aqui tá ótimo falta apenas o futuro e ele vai ser Super simples porque a gente usa só colocar o nossa linha assim como a gente já colocou nos outros elementos e colocar um distanciamento bonitinho e o tamanho da imagem Então vamos lá a gente pega aqui a classe do nosso rodapé que é o rodapé mesmo que vai englobar nossa imagem depois então vamos por aqui o ponto rodapé e o

que que a gente vai colocar aqui onde eu colocar um pezinho roupa o impede de 32 pixels para dar um Distância assim é essa distância que legal em todos os lados né Eu não tô colocando essa é top você bota Olha só já deu Aqui de baixo para cima um espaço de cima para baixo também mas a gente não consegue enxergar porque a gente não tem aquela linha para deixar e vamos colocar essa linha Então a gente vai colocar igualzinha a outra aqui ó border-top essa daqui vou salvar né acho que é o mesmo mesma

cor né dessa daqui que a gente tinha Antes aí ó tá vendo aqui já ficou perfeita a nossa linha nossa imagem que eu acho que ainda tá um pouco grande demais e a gente vai utilizar lá agora então é a última coisa que a gente tem que utilizar de fato na nossa página vou copiar Vou colocar aqui a nossa classe rodapé imagem vou colocar uma altura máxima de 48 pixels para ela diminuir um pouco aqui salvei Olha bem melhor bem menor Oi e eu preciso centralizar lá na nossa tela isso existe um truquezinho Muito legal

que muita gente utiliza para quando você quer centralizar apenas um elemento a gente vamos utilizar flex-box essas coisas fosse o seu Xbox é muito legal quando a gente tem mais um elemento e o que que a gente faz é bem simples a gente coloca um display Block é que vai ser vai diferente do Xbox ele vai colocar em bloco aquele negócio vai utilizar Todo o espaço que tem dentro do elemento e a gente coloca uma margem de zero e alto então ela vai Automaticamente colocar para os lados então no final das contas entra por menos

isso consegui explicar direito essa parte mas é confia que dá bom essas duas coisas display Block e margens 0 alto é maravilhoso para você centralizar algum elemento aí na sua tela tem um desafio para você né já olhando aqui que é porque que essa linha aqui é menor do que as outras seus exatamente a mesma coisa né que era aquele border-top e coloquei as mesmas Propriedades 40. 4 pixels Solid e a corzinha por quê que isso tá acontecendo deixa aqui nos comentários que eu tô muito curiosa para saber se você vai estar vai entender Qual

que é a diferença ainda tem coisinhas aqui que eu quero colocar para vocês que é por exemplo eu tô passando a irmão aqui pelo botão mas ele não tá e quando a gente novamente vai em algum botão vocês podem ver que não aqui no a gente faça um botão ele muda de cor e Isso é uma propriedade que a gente pode seu do classe na verdade que a gente utiliza que se chama Rover e eu vou mostrar aqui para você é muito tranquilo como faz a gente volta aqui no nosso conteúdo principal escrito botão eu

falei para vocês também não aquele vídeo de CSS como funcionam essas pessoas do classes pseudo-elementos tá gente põe o ponto coloca nossa classe e para utilizar o Rover a gente coloca esses: Over You Ah e só com isso o que a gente utilizar Ele já sabe Nossa CSS já sabe que ele vai colocar tudo que tiver aqui dentro das chaves quando a gente passar o mouse por cima e o que que a gente quer mudar a gente vai mudar o background color para Vamos ver qualquer background-color bom não tem aqui eu vou colocar uma cor

vou colocar um RGB a para gente brincar um pouco que vai ser 236 214 196 Oi, 0.53 isso aqui gente eu tenho já Notado porque eu já fiz essa página ontem né para vocês e olha só então não se preocupe não não precisa da minha cabeça e olha só quando a gente passa o mouse por cima a gente deixa ele já com a coisinha legal e agora eu deixo para vocês brincarem com quê que vocês querem colocar de link ali na no menu por exemplo eu vou colocar ali na parte comunidade ballerini que a gente

tem uma das âncoras Cadê a comunidade ballerini eu vou colocar dentro do nosso a 1hf que Vai ser o site que a gente quer que pede e olha só eu peguei aqui o link da do convite da minha comunidade vou colar aqui ele também tá na descrição se você quiser participar da comunidade obviamente será muito bem-vinda muito bem-vindo vou salvar aqui e olha só agora no nosso site tutorial tensor se não funcionam mas a gente clica aqui no comunidade de Valeriana ele abre o nosso site que a gente colocou com agarrar esse aqui não tem

ser se também vou Colocar o código do nosso codif o pote da comunidade que a gente tem que é outra em ser se vocês vão brincando vão mudando a cor Vão colocar no outro produto a forma como vocês quiserem Não esqueça de postar no Linkedin porque como eu já falei para vocês engajamento é muito grande s2000 Mara com a e eu vou curtir comentar e todo mundo que me segue vai ver vocês Também ali na página principal E não esqueça de comentar aqui embaixo aqui que você achou e outras Coisas que vocês querem que eu

traga aqui e vocês viram né que ao longo do vídeo a gente utilizou aquela extensão do live-server para poder desenvolver a nossa página mas se você passar aquela URL do leve César não sei qual é o número local host você não vai conseguir dar oportunidade de outras pessoas vocês estarem essa sua página você precisa hospedar o seu site em algum lugar e a justamente aí que entra roxinha que é a patrocinadora desse vídeo Além disso Você também pode digitar o seu próprio domínio com eles e colocar ele é URL com o nome que você quiser

por exemplo um balé bot.com não peguei esse domínio ficar Acabei de perceber que eu não tenho ele e eu vou perder esse vocês quiserem e daqui vou ter que registrar e óbvio que se você vai usar o sistema deles não esqueça do cupom de desconto que eu tenho que é o Rafa mostrando aqui na tela é muito simples de utilizar e você vem um Descontão que vale muito a Pena e aí isso eu espero muito que vocês tenham gostado do vídeo Se vocês fizerem trazer outro assim nessa pegada de tutorial comenta aqui embaixo que vocês

querem aprender se vocês querem também atender coisa teórica né O que é tal coisa pode comentar aqui que eu vou querer trazer para vocês não esquece de me acompanhar nas minhas outras redes sociais que no Instagram no próprio LinkedIn eles estão todos aqui na minha descrição isso vejo vocês na próxima Semana um beijo e [Música] E aí [Música]