Como fazer um portfólio com HTML e CSS!

Fala Devi Hoje é um dia muito especial que a gente vai fazer esse projeto aqui de portfólio esse aqui é um projeto feito 100% com HTML CSS e hoje a gente vai aprender como que a gente faz ele esse aqui é um projeto que a gente tem aqui uma primeira parte principal que a gente tá apresentando Quem que é o Dev do portfólio a gente tem uma foto aqui tem um botão a gente tem esse reader aqui que ele fica estático então Conforme a gente vai rolando a página ele continua aqui mesmo que a gente

vá lá para baixo ele continua aqui esse header a gente também tem algumas Skills aqui que a gente colocou com essa animação aqui nesses cards então isso aqui é bem bacana da gente fazer ó a gente também tem alguns projetos desse portfólio aqui a gente tem também esse mesmo efeito aqui quando a gente passa o mouse por cima e aí aqui a gente tem um formulário de entrar em contato então Aqui a gente consegue colocar o nosso contato pra gente entrar em contato com esse Dev no caso e aí aqui ele tem uma validação de

formulário quando a gente clica ó ele fala que a gente precisa preencher esse formulário e a gente tem um footer também então é um site bem bacana ele tem essa paginação aqui das Abas ó se a gente clicar em sobre ele vem aqui pro sobre tem as Skills tem os projetos e tem o contato a gente consegue navegar pelo site aqui então Esse aqui é um site bem legal e também tem quando a gente carrega a página ele tem essa animaçãozinha aqui ó que ele mostra as coisas entrando na tela é bem legal então a

gente vai fazer isso só com HTML CSS Lembrando que você precisa ter o visual Studio code instalado você já deve ter aí mas só só para relembrar é só você pesquisar por visual Studio code no Google Clicar no primeiro link e começar o download lá instalação é bem simples então eu tô com o meu vs code Aberto aqui a gente só precisa instalar uma extensão pra gente poder trabalhar que é a extensão Live server então a gente precisa vir aqui na barra da esquerda e clicar aqui em extensões ó vamos clicar aqui e aí a

gente digita Live server essa extensão serve pra gente poder ter updates automáticos no nosso site então Automatic quando a gente salva o nosso arquivo HTML ele já vai atualizar na página Então essa extensão aqui essa primeira você pode Instalar ela só clicar em instalar que vai aparecer aqui e aí depois de instalado ele já vai est disponível pra gente poder usar Tá beleza então agora que a gente tem a extensão já temos o vs code a gente pode começar eu tô aqui no meu PC e eu criei a pasta página portfólio que é essa pasta

aqui que eu acabei de criar você tem que criar uma pasta para você conseguir colocar a seus arquivos seu arquivo HTML seu arquivo CSS porque que a gente vai abrir essa Pasta lá no vs code Então é isso que a gente vai fazer agora então com o vs code aberto aqui eu vou vir em arquivo na barra aqui de cima ó a gente tem algumas opções a gente vem em arquivo e abrir pasta essa opção aqui e a gente vai abrir a pasta que a gente criou então a pasta que eu criei é essa aqui

ó página portfólio você vai abrir a sua pasta que você criou aí no seu PC vamos clicar aqui em selecionar pasta e ele vai abrir aqui pra gente beleza então a Primeira coisa que a gente precisa fazer sempre né é a gente gente criar o nosso arquivo HTML então a gente vem aqui nessa barra da esquerda aqui e a gente pode vir nesse ícone aqui ó para criar um novo arquivo e a gente coloca index HTML e a aqui a gente vai fazer aquela estrutura básica do nosso HTML que é o qu primeira coisa é

a gente especificar aqui o DOC Type a gente digita sinal de menor exclamação e doc Type HTML e sinal de maior esse aqui é Para especificar a versão mais atualizada do HTML a gente coloca isso aqui por conta da versão depois a gente vem aqui e abre a nossa tag HTML Então vamos colocar HTML fecha tag ele vai fechar automaticamente desde já a gente já especifica que a linguagem é português então a gente vem aqui ó e coloca o atributo Lang é igual a E aí a gente coloca PT que aí a gente tá especificando

que a linguagem em Português aí aqui a gente vai declarar as duas tags principais aqui do nosso código que é o quê o Head e o body a gente vem aqui e declara o body aqui embaixo a gente só tá montando a estrutura normal do HTML que a gente já conhece só pra gente poder abrir lá no navegador e a gente poder visualizar E aí por último aqui dentro da tag head a gente vem e coloca a tag title tag title lembrando é o título que fica lá em cima na nossa página Vamos Colocar aqui

desenvolvedor maravilha a gente salva Lembrando que para salvar você pode apertar contrl s ou você pode vir aqui em arquivo e salvar ele tem até aqui o atalho control s para você poder salvar com essa página aqui como que a gente faz para poder abrir a página com o Live server a gente vem aqui no nosso arquivo index HTML a gente aperta com o botão direito e aí a gente vem aqui na primeira opção ó abrir com o Live server Ou se tiver aí também Open with Live server a gente clica nessa primeira opção e

ele vai abrindo o navegador show de bola ele abriu aqui pra gente e você pode ver que ele abriu com o título da página desenvolvedor quer dizer que tá funcionando realmente Então beleza agora a gente consegue começar a criação aqui da nossa página eu vou deixar as duas páginas aqui aberta ó a página que a gente tá desenvolvendo e a página pronta pra gente usar como base aqui pra gente Fazer então a primeira coisa que a gente nota no nosso site é esse reader aqui ó essa barra de cima essa é a primeira coisa que

a gente vai começar a implementar então ele tem o texto aqui aqui no caso eu coloquei JC porque é o meu nome no caso você pode colocar suas iniciais E aí tem também aqui uma barra de navegação que com sobre Skills projetos e contato é isso que a gente vai fazer então aqui no código a gente já declarou o nosso head a gente vai vir Aqui no nosso Body pra gente poder declarar o nosso reader então a gente vem aqui abre uma tega HTML e coloca reader dentro desse reader O que que a gente vai

ter a gente vai ter uma barra de navegação a gente vai ter os nossos links ali de navegação então para isso o que que a gente vai fazer declarar uma nave uma tag nave essa tag nave ela especifica justamente aqueles links de navegação que é uma nave bar pra gente poder navegar pelo site primeiro a gente Vai ter as nossas iniciais ali a gente vai ter aqui as iniciais seguida dos links aqui as iniciais a gente pode colocar numa div então aqui eu vou colocar uma div dentro dela eu vou colocar as minhas iniciais JC

no caso você coloca as suas iniciais logo abaixo aqui dessa div que a gente tem as iniciais a gente vai ter os links propriamente ditos como esse link é uma listagem de links a gente tem uma lista de links ali a gente pode Colocar numa ul a ul lembrando bem É a nossa tag para poder especificar uma lista de item então a gente vem aqui embaixo declara uma ul Opa tá em capsul loock ul E aí aqui a gente vai ter uma série de liis com um link dentro então a gente vai colocar Li li

abre e fecha e dentro dele a gente vai ter uma tag a lembrando que a tag a é a tag do link então a gente vem aqui e coloca uma tag a Vamos só ver aqui Quantos links que vão ser vão ser quatro links o sobre a Skills projetos e contato então aqui a gente coloca mais um mais uma Li com uma tag a dentro Li com tag a dentro e mais uma Li com tag a dentro beleza e aí aqui dentro do a da tag link a gente vai colocar os nomes que no caso

é sobre embaixo a gente vai ter Skills logo abaixo também vai ter projetos e Contato se a gente salvar e voltar lá a gente vai ter justamente isso aqui ó uma lista de links e a nossa logo aqui isso aqui é como se fosse a logo do nosso site que a gente colocou as iniciais beleza nesse tutorial aqui eu vou fazendo o HTML conforme a gente vai fazendo o CSS também eu não vou deixar para fazer tudo HTML e depois fazer tudo CSS Porque para mim o entendimento quando a gente faz uma sessão de html

depois uma sessão de CSS é melhor para Poder entender então agora que a gente fez o reader agora a gente vai estilizar o reader como que a gente faz para poder importar um arquivo CSS aqui se a gente lembra bem primeiro a gente precisa criar o arquivo CSS então a gente vem aqui na da esquerda para poder criar um novo arquivo e a gente vem e coloca styles.css beleza criamos nosso arquivo CSS aqui a gente vem no HTML e aí para importar o CSS a gente tem que vir dentro da tag head a gente vem

aqui e Declara uma nova tag que vai ser a tag link essa tag link a gente vem aqui dentro dela coloca uma propriedade chamada Hell esse Hell ele é para especificar Qual que é a desse link que a gente vai colocar então a gente tá falando o seguinte a gente tem um arquivo externo e a gente tá especificando o que que é esse arquivo externo ele é um Style sheet ele é uma folha de estilo e onde que tá esse arquivo que a gente quer linkar aqui ele Tá aqui ó href a gente tá especificando

onde tá esse arquivo e o nome dele é styles.css beleza show de bola vamos salvar isso aqui e aí pra gente testar se deu certo vamos vir no styles.css e a gente a gente vai colocar uma classe de teste aqui ó uma classe não na verdade a gente vai selecionar todos os elementos abre Chaves e a gente coloca um background como sendo Red vamos salvar só para testar para ver se o CSS tá funcionando quer dizer que tá Funcionando porque como ele deixou a página vermelha então o CSS tá realmente linkado show de bola aqui

no CSS a primeira coisa que a gente vai fazer é o qu vamos apagar isso aqui e aí a gente vem e declara um estilo aqui que na verdade é é o asterisco Justamente que é para quê a gente quer selecionar todos os elementos da página e resetar os estilos porque por padrão quando a gente cria um arquivo HTML ele já vem com alguns estilos pré-processados o browser Ele já coloca alguns estilos ali só que não é isso que a gente quer a gente quer começar do zero então a gente coloca isso aqui ó asterisco

vírgula asterisco do pontos do pontos before vírgula asterisco dois pontos dois pontos After abre Chaves isso aqui a gente tá especificando literalmente todos os elementos da página a gente quer aplicar esse estilo aqui em todo mundo isso aqui é só pra gente tirar os estilos padrões da página e aí a gente Vem aqui e coloca um Margin como sendo zero um paring como sendo zero e um box sizing como sendo border Box se a gente vi aqui na nossa página ó se você observar o nosso estilo ele tá dessa maneira aqui ó se a gente

vier e salvar vamos vir aqui Salvar esse arquivo quando a gente volta você vê que ele tirou todos os espaçamentos que ele tinha aqui então é justamente isso que a gente queria a gente queria tirar os estilos padrão da página isso é só uma Configuração Inicial que a gente precisa fazer agora eu vou voltar aqui no index P HTML de novo e eu vou criar algumas classes pro nosso reader como a gente quer estilizar ele a gente precisa criar algumas classes pra nossa nave pra nossa div pra nossa ul pra gente poder estilizar aqui no

Style P CSS então pra nave eu vou criar aqui uma classe chamada container pra div eu vou criar uma classe chamada logo porque esse aqui é como se fosse o logo do nosso site e Pra nossa ul eu vou vir aqui e criar uma classe chamada nave traço links esses aqui são os links de navegação por isso que a gente colocou aqui show de bola vamos salvar e aí no styles.css agora a gente vai estilizar esses caras outra coisa que eu vou fazer aqui também é vir aqui embaixo e eu vou declarar um novo estilo

que ele tem esse nome aqui ó dois pontos root abre Chaves O que que é esse dois pontos root ele é pra gente especificar algumas coisas que a gente Vai utilizar durante todo o nosso código Então imagina que eu tenho uma cor por exemplo um código de cores que ele é # 1D 4gf sempre que a gente for utilizar esse código de cor a gente não quer ter que ficar and esse código aqui ó porque é um código meio difícil da gente decorar e a gente não quer ficar dando cont CRL C cont control V

para isso a gente declara como se fossem variáveis no CSS é como se fossem aquelas variáveis que a gente Tem no JavaScript E aí a gente começa a utilizar elas Então como que a gente declara essas variáveis aqui a gente vem declara o nome dela no caso eu vou declarar aqui traço traço cor traço de fundo esse aqui então vai ser o código da nossa cor de fundo que vai ser # f0 F4 F8 esse aqui é o código da nossa cor de fundo depois a gente vai ter traço traço cor de texto que vai

ser esse código de cores aqui ó # 1 a 202c que ele vai ser ali quase um azul escuro A gente também vai ter um traç traço cor primária que vai ser quase que um azul vai ser um # qu 299 E1 vai ser esse código de cores aqui a gente também vai ter uma cor secundária traz trá cor secundária como sendo essa aqui #2b me cb0 E aí a gente também vai ter uma fonte Vamos colocar aqui traz trá fonte como sendo Inter V colocar essa fonte aqui por enquanto então esses Estilos aqui a

gente vai poder utilizar durante todo o nosso código sempre que eu precisar utilizar essa cor aqui é só eu chamar cor de fundo sempre que eu precisar utilizar essa cor aqui é só eu chamar cor primária e assim por diante fica mais fácil pra gente tá então beleza primeira coisa que a gente vai fazer é começar a estilizar esses caras aqui então os nossos links primeiro eu vou estilizar a nossa logo então eu seleciono aqui ela com ponto logo abre Chaves eu vou colocar um fonte size como sendo de 1.5 R que esse aqui é

o tamanho da fonte que a gente tá especificando um fonte weight que é o peso da fonte como sendo bold aqui a gente tá setando a fonte como sendo e aí aqui a cor color como sendo pra gente utilizar essas cores aqui que a gente criou a gente precisa de uma palavra-chave que é a palavra var como se fosse uma função a gente coloca var abre parênteses E aí aqui Dentro do parênteses a gente coloca qual que é a cor que a gente quer utilizar que a gente declarou aqui no caso eu quero utilizar essa

cor primária aqui então aqui dentro eu vou colocar traz tras cor primária se a gente salvar você vai ver que ele já aplicou aqui os estilos que eu queria Beleza agora aqui nos nossos links a gente vai vir aqui embaixo vamos declarar ponto Nav links Quem que é o nave links se a gente voltar aqui no HTML Ó você vai ver que Nave links é a nossa ul então a gente tá estilizando ela então a gente seleciona o ponto nave links abre Chaves e a gente coloca display como sendo Flex pra gente começar a utilizar

a flexbox lembrando que a flexbox ela serve pra gente posicionar os elementos ou na vertical ou na horizontal e a gente vai colocar um list Style como sendo non que é para ele forçar nenhum estilo aqui na nossa lista nem aquele estilo com bolinha nem com tracinho nem com número se a gente Salvar ó ele aplicou a flexbox aqui ó ele colocou um elemento do lado do outro beleza agora a gente vai arrumar o espaçamento tá vendo que ele tá muito grudado aqui também então eu quero colocar um espacinho entre cada link vamos arrumar isso

para isso a gente seleciona o ponto nave links E aí quem que a gente quer estilizar no caso eu quero utilizar as nossas liis eu quero colocar espaços nas li então eu venho aqui coloco nave links e seleciono a li Que tá dentro de nave links abre Chaves e aí aqui eu vou colocar um Margin left que é para colocar uma margem à esquerda como sendo de dois r esse valor aqui se a gente salvar você vai ver que ele já colocou esse espaço aqui pra gente então já não tá mais junto agora a gente

vai estilizar o nosso a a nossa tag de link Então a gente vai colocar primeiro uma cor nela Então a gente vai vir aqui e vai selecionar o nosso ponto nave links e a gente vai selecionar o a que é o Nosso link e a gente abre Chaves aí aqui a gente vai colocar um color Opa um color como sendo a gente quer colocar como sendo aquela cor de texto que a gente declarou aqui em cima ó tá vendo que a gente declarou aqui ó cor de texto A gente vai colocar aqui ó color como

sendo var primeiro a gente precisa colocar esse var aqui para ele puxar as nossas variáveis e a gente coloca traço traço cor de texto e a gente vai colocar também um text decoration como sendo None para ele não ter nenhum detalhe nesse link a gente não quer sublinhado a gente também não quer outra cor se a gente salvar ele colocou aqui pra gente a cor de texto só que como ela é muito parecida com o preto ele fica aparecendo preto mesmo mas já já a gente vai ver no contraste como é que vai ficar se

você observar bem a gente colocou aqui uma fonte só que a fonte ela não aplicou ela tá com a fonte padrão do browser se você observar ó aqui a gente declarou a nossa Fonte como sendo inter só que ele não aplicou ela por que que ele não aplicou porque a gente não tá usando essa fonte aqui a gente só declarou ela Então como que a gente faz para poder usar aqui embaixo ó tem que ser embaixo do Rot a gente não pode colocar em cima do Rot porque as nossas cores estão sendo declaradas aqui então

tudo que a gente precisar usar vai ter que ser embaixo do Rot aqui embaixo a gente coloca o b e a gente coloca um Fonte Family como sendo var como a gente vai utilizar essa fonte aqui a gente precisa utilizar o var E aí aqui dentro a gente coloca traz traz e fonte uma última coisa pra gente fazer é a gente vir aqui na nossa fonte ó tá vendo que a gente colocou a fonte enter às vezes elele não vai puxar pra gente essa fonte enter às vezes ele não vai conseguir entender que é essa

fonte que a gente quer então a gente precisa colocar outras fontes como opção para ele como Segunda opção então é como se fosse assim se eu não achar a fonte Inter eu vou usar outra fonte se eu não achar essa outra fonte eu vou pra outra fonte e assim por diante então depois do Inter aqui a gente coloca vírgula E aí a gente vai colocar a fonte Arial com o a maiúsculo vírgula a fonte s serif que aí a gente tá fazendo Exatamente isso aqui se ele não achar a fonte Inter a gente vai usar

Arial se ele não achar Arial a gente vai usar a s serif e aí se a gente Salvar e voltar lá você vai ver que ele já mudou a fonte aqui pra gente então sempre que ele não achar uma fonte ele usa a próxima beleza show de bola agora a gente vai declarar aqui no nosso Rot mais uma variável que a gente vai chamar ela aqui ó vamos dar um enter e colocar Traço traz transição primeiro a gente declara aqui all para especificar Quando que a gente quer que execute a nossa animação depois a gente

especifica o tempo da nossa animação Então coloca 0.3 Segundos é uma animação que vai executar por 0.3 segundos e a gente coloca a opção Easy que é para escolher o tipo da nossa transição E aí a gente vai usar essa transição aqui no nossos links ó aqui a gente tem nave links a a gente está selecionando os links e a gente vai colocar transition como sendo e traço traço transição a gente tá especificando qual que vai ser a nossa transição só que como que vai ser essa nossa transição a gente quer fazer uma Transição quando

o mouse passar por cima do link sempre que o mouse passar por cima do link a gente quer que mude a cor como que a gente faz isso a gente vem aqui embaixo declara um ponto nave traço links e aí a gente seleciona a tag link que é a tag Anor no caso e aí a gente vem e coloca um dois pontos Hover O que que significa isso aqui a gente essa classe aqui sempre que o usuário colocar o mouse por cima do componente sempre que ele colocar por cima do elemento e Que que a

gente quer fazer quando ele colocar por cima do elemento a gente quer colocar um color a gente quer mudar a cor do texto no caso e aí esse texto vai ser var traz TR cor primária vamos salvar e recapitulando o que a gente fez aqui a gente precisou declarar aquela transição para que quando o usuário ele passar o mouse por cima do texto lá do link ele vai mudar a cor só que ele vai mudar a cor com essa transição aqui ó com essas especificações ele vai demorar 0.3 segundos para poder mudar a cor se

a gente voltar aqui você vai ver que ele colocou Exatamente esse efeito ó vamos dar um zoom aqui ó sempre que eu passo o mouse por cima aqui ele colocou a transição Zinha ali pra gente outra coisa que eu vou fazer também é estilizar o nosso reader então a gente vem aqui logo abaixo do b ó eu declarei a ordem que tá as coisas aqui é esse seletor geral esse seletor do Rot para declarar as nossas cores o body e aqui Embaixo eu vou declarar o reer abre Chaves e aí o reader primeiro eu vou

colocar um background color como sendo o var E aí a gente vai colocar a nossa cor de fundo Então traz traz cor de fundo que é esse Branco quase que sendo um branco aqui a gente vai colocar também um box Shadow esse Box Shadow aqui é justamente para colocar uma sombra um sombreado ali na nossa caixa a gente vai colocar esse Box Shadow aqui ó 0 4 pixels 6 pixels e Rgba como sendo 0 0 0 e 0.1 eu vou explicar cada um desses caras aqui o que que eles fazem mas só para você ver

se eu salvar isso aqui ó ele vai ficar assim ó tá vendo que ele tem um sombreado aqui embaixo dessa caixa ele dá Justamente esse efeito Zinho aqui que eu acho bem legal para explicar como é que funciona esse Box Shadow Eu dividi aqui para você ver a tela para você ver a gente alterando aqui o box Shadow basicamente eu fiz um desenhozinho aqui Para você ver como é que ele funciona quando a gente coloca o box Shadow ele vai automaticamente criar uma caixa em volta da nossa caixa então se a gente tem um elemento

aqui em vermelho ele vai criar uma caixinha assim ó criou uma caixinha em volta de sombra por enquanto ela não faz nada se a gente alterar esse primeiro valor aqui se a gente colocar por exemplo 10 pixels e 10 pixels ele vai mover a nossa sombra 10 pixels pra direita e 10 pixels para baixo ó eu vim Aqui e fiz isso aqui na nossa sombra eu coloquei 50 pixels 50 pixels nos primeiros valores e ele moveu 50 pixels pra direita e 50 pixels para baixo se eu venho aqui e coloco zero e qu pixels ó

tá zero e quat aqui ele tá fazendo o quê Tá deslocando nada pra direita e quatro pixels para baixo por isso que ele tá um pouquinho para baixo aqui ó se eu vier aqui e colocar zero tambem ó ele moveu para cima por fim esse terceiro valor aqui é para especificar quanto que essa Sombra é borrada Então se a gente colocar aqui zero também não vai ter nenhum borrão ó se você observar não tá borrado se eu vier aqui e colocar seis pixels de novo ó ele dá uma leve borradinho aqui parece um degradê se

eu aumentar ó ele vai borrando mais ó se eu colocar 50 por exemplo aí ele borrou tanto que nem tá aparecendo como se fosse um borrão realmente e a terceira propriedade é a cor aqui a gente tá setando uma cor é um preto com uma Opacidade de 0.1 se a gente colocar aqui é opacidade de um ó ele ficou um preto bem destacado realmente só que a gente quer essa opacidade de 0.1 para ser uma sombrinha ali Beleza então isso foi só pra gente entender esse Box Shadow aqui agora aqui ó a gente vai colocar

no header também um position como sendo fixed que é para dar aquele efeito de que ele fica lá na página no topo da página sempre conforme a gente rola ele vai ficando aqui que nem essa barra aqui Ó ele não rola junto com a página depois a gente coloca uma largura como sendo de 100% um top como sendo zero que é para ele fixar lá no topo que é para ele não ficar nada para baixo 100% para cima e um z index de 1000 esse Z index quer dizer o quê A gente tá falando quem

que vai ficar por cima de quem a gente tá falando qual que é o elemento que vai ficar por cima quanto maior o nível de Z index mais por cima ca o elemento tá então se a gente coloca um z índex de 1000 quer dizer que o heer tá mais para cima se a gente pensasse no nosso HTML como se fossem essas caixinhas aqui você pode observar que o azul tá embaixo do vermelho ele tá numa nível de profundidade menor quando a gente coloca o z índex como sendo 1000 a Gente Tá informando que esse

cara aqui de 1000 ó ele vai ficar por cima de tudo ó porque o 1000 é um valor muito grande então ele vai ficar aqui para cima de tudo é a mesma coisa do reer o reer ele vai ficar Em cima de qualquer coisa então isso é para garantir que o reader não vai ficar embaixo de ninguém esse é o z Index Esse aqui é o z index 1000 por exemplo se a gente tivesse um z index zero ele estaria lá embaixo ó ele estaria nesse nível aqui ó agora tá vendo que esses links aqui

ó eles estão meio que posicionados erradamente esses caras aqui era para estar distribuídos assim ó a gente tem a nossa logo aqui mais na esquerda e os nossos links mais à Direita aqui então é exatamente isso que a gente vai fazer ao estilizar a nossa nave bar então a gente vem aqui e digita a tag nave abre Chaves aqui a gente vai tá utilizando a flex Box então a gente precisa especificar display como sendo Flex Se você não entende a flexbox ainda como é que a gente posiciona Eu fiz um vídeo sobre isso vou deixar

aqui no card vou deixar aqui na descrição também uma explicação completa para você de como é que você posiciona os elementos com a Flexbox E aí agora a gente vem e coloca essa propriedade aqui ó justify content como sendo Space between esse T bit wiin a tradução dele é exatamente o que a gente quer a gente quer um espaço em volta então a gente quer que os nossos elementos tenham um espaço igual entre eles e aí depois a gente vem e coloca um align items como sendo Center se a gente salvar você vai ver que

ele já ficou bem legal ó ele já espaç aqui com o Space bwin E aí ele alinhou os elementos então Ele deixou do jeito que a gente queria agora falta a gente colocar só um paring que é um espaçamento interno a gente vem aqui na nave coloca um paring Opa Pering como sendo de um ren e zero quando a gente coloca essa anotação aqui ó de um r e zero a gente tá falando o seguinte eu vou ter um Pering que é o espaçamento interno de um R na vertical ou seja de cima para baixo

e de zero na horizontal que é exatamente o que ele fez ele colocou um espaço na vertical aqui em Cima e embaixo e ele colocou um espaço na horizontal ó de zero ó tá vendo que ele tá grudado aqui e tá dado aqui a última coisa que falta a gente fazer aqui no nosso reader é a gente mexer aqui no nosso contêiner que também é a nossa nave né a gente vai colocar também alguns estilos aqui na classe container então aqui no.css a gente vem logo abaixo do Body declara a classe pon container na classe

pon container O que que a gente vai colocar primeiro a gente Vai colocar uma largura máxima então um Max with de 1200 pixels isso aqui é pra gente limitar a largura da nossa página em ter aqui então a gente vai poder ter 1200 pixels só depois a gente vem e vai colocar um Margin zero alto Isso aqui é uma configuração pra gente colocar no nosso Margin que é o quê a margem vertical vai ter o valor zero e a margem horizontal vai ter um valor automático então isso aqui é só uma configuração da margem que

a gente tá fazendo para não Desformatar o nosso código por último a gente vai vir e vai colocar um paring de zer e 2 R esse paring de zero e 2is R é o quê ele vai est colocando um ping de zero na vertical e um ping de 2is R na horizontal aqui tanto é que se a gente salvar ele veio e sobrescreve aquele outro ping que a gente tinha colocado isso aqui foi intencional e ele colocou um ping aqui antes do começo da página na esquerda e na direita uma última coisa pra gente fazer

no reader eu errei A cor que a gente colocou aqui aqui no reader ó o background color ele não vai ser cor de fundo porque a cor de fundo ela é essa aqui ó ela não é o branco Total ele é como se fosse esse mais acinzentado aqui tá vendo que ele tá mais cinza Só que essa aqui essa cor mais acinzentada aqui ela vai ser a cor de fundo da página e não a cor de fundo do reader Então a gente tem que consertar isso então aqui no nosso Rot ó eu vim aqui eu

tava no reader se a gente Vier no nosso Rot que são as nossas cores a gente vai declarar mais uma cor aqui ó vamos vir aqui dar um enter e colocar traço traço cor de fundo traço Card e qual que vai ser a cor de fundo do card ele vai ser o branco ele vai ser o Branco completo Então vai ser #ffffffff então a gente tá declarando aqui a cor de fundo do card com Lu sendo branca e aí aqui no reader ó em vez de eu colocar só cor de fundo eu vou colocar cor

de fundo traço Card se a Gente salvar você vai ver que agora ele tá branco então é essa cor realmente que a gente quer é esse branco aqui e aí a cor de fundo do fundo aqui mesmo da página vai ser aquele mais acinzentado beleza show de bola por enquanto a gente finalizou aqui o nosso reader então a gente declarou todos os estilos do reader tanto aqui no CSS e a gente criou aqui o reader no HTML Agora falta a gente ir realmente pro nosso conteúdo Então logo abaixo do reader aqui ó eu Vou declarar

uma tag chamada Main Main Por que que a Main porque é o conteúdo principal da nossa página Quem que é o conteúdo principal aqui da nossa página é a nossa página em si logicamente então aqui a gente declarou reader e logo abaixo Vai ter todo o conteúdo principal então aqui vai ter essa parte aqui que é apresentação as Skills os projetos o formulário e depois a gente vai fazer esse footer aqui beleza então a primeira parte que a gente vai fazer é essa Sessão aqui que é como se fosse o sobre tá vendo que aqui

na barra de navegação a gente tem o sobre esse aqui vai ser a sessão do sobre que vai ter o seu nome vai ter uma descrição sobre você esse botão aqui e essa imagem aqui então aqui dentro da Main a gente vai declarar uma section dentro dessa section vai ser o sobre vai ter as informações sobre a gente então aqui nessa section a gente pode colocar um ID como sendo sobre o ID Lembrando que ele é como se fosse uma Classe só que ela é mais específica entenda ela como se fosse uma classe normal só

que a gente vai ter mais especificidade nele a gente vai ter só um ID para cada conteúdo que a gente tiver beleza e aí dentro dessa section aqui a gente vai ter duas dives uma das dives vai est englobando esse conteúdo da esquerda e a outra div vai est Eng glob esse conteúdo da direita que no caso é só a imagem Então a gente vai ter um Quadradão aqui envolvendo todo esse Cara e outro Quadradão envolvendo a imagem Então vamos declarar aqui uma div e logo abaixo a gente vai declarar outra div Vamos colocar outra

div aqui a primeira div vai ser os nossos textos vai ser ali o texto com o nosso nome e a descrição com o botão também então aqui nessa primeira div a gente vai colocar uma classe igual a deve traço texto e aí a outra div como ela vai ser só com uma imagem A gente vai colocar uma classe como sendo Dev imagem no caso Então a Gente vai ter o texto do Dev e a imagem do Dev show de bola aqui vamos começar primeiro vamos dividir as coisas né a gente vai fazer primeiro a div

dos textos aqui primeiro a gente vai ter um H1 que vai ser o nosso nome se a gente vier aqui ó a gente tem esse H1 que é um texto grandão e aí a gente tem uma descrição e depois um link aqui então a gente vem coloca aqui um H1 eu vou colocar o meu nome Então você pode colocar o seu nome no caso Como é o seu Portfólio Vou colocar aqui Júlio César logo abaixo a gente vai ter um p que é o pequeno parágrafo que a gente tem informando um pouco sobre a gente

então eu vou colocar eu sou um desenvolvedor full stack apaixonado Apaixonado especializado em criar aplicações web bonitas e funcionais isso aqui é um pequeno textinho de apresentação se a gente salvar isso aqui E ir lá na nossa página você vai ver que ele já colocou aqui pra gente Esse textinho o nome Júlio César que eu tinha colocado ele tá escondido por enquanto mas já já a gente arruma isso ele tá aqui embaixo ó aqui embaixo do nosso reader como o nosso reader ele vai ficar acima de tudo o nosso texto ele tá escondido aqui embaixo

Então já já a gente arruma isso e por último a gente vai ter o nosso botão ali só que esse botão ele não vai ser um botão Exatamente ele vai ser o link porque ele vai ser o link para ir pra parte de contato então a gente vem aqui ó logo abaixo do nosso p a gente vem e declara uma tag link que no caso é a tag anchor né tag a abre fecha e aí aqui a gente vai ter o texto entry em contato que aí é o botão de contato aqui ó no nosso

link na nossa tag a a gente vem e coloca primeiro uma classe Vamos colocar a classe igual a botão de contato e aí aqui esse link como ele é uma tag link Né ele precisa redirecionar para algum lugar todo o link ele redireciona para algum lugar nesse caso a gente vai redirecionar para dentro da nossa página especificamente Como é o botão de contato a gente tem que redirecionar pra parte de contatos pro ID contatos esse ID aqui ó a gente coloca ele justamente pra gente conseguir redirecionar se você observar aqui na nossa página pronta ó

se eu clicar em sobre ele vem pra parte de sobre ele vem pro ID sobre se eu Clicar em Skills ele vem aqui pro ID Skills se eu clicar em projetos vem pro projetos e se eu clicar em contato ele vem pro ID contato então o ID ele serve para isso também então aqui no nosso link ó para onde que a gente vai redirecionar a gente vai redirecionar pro ID contato então a gente vem e coloca o href para #contato show de bola e aí por último no HTML aqui a gente tem a nossa imagem

então a imagem ela vai ficar aqui dentro Dessa div e a gente a gente vem coloca uma tag IMG Lembrando que a tag IMG a gente pode só abrir ela e fechar ela não precisa de duas tags E aí lembrando que quando a gente coloca uma imagem A gente precisa colocar uma referência dessa imagem só que se a gente vier aqui no nosso explorador ó a gente não tem nenhuma imagem a gente só tem o HTML o CSS vou te mostrar como que você pode baixar a imagem que a gente vai utilizar o nosso projeto

ele tá aqui no github eu Coloquei ele aqui completo para você e aí ele tá nesse link aqui ó vou colocar o link link na tela também github.com barju code bar portfolio page E aí o nosso projeto ele tá aqui ó tem aqui ele tem aqui nosso arquivo HTML ele tem aqui o nosso styles.css e a nossa imagem tá aqui ó ela é essa aqui ó dude.com você pode vir aqui ó clicar no arquivo na nossa imagem vamos clicar aqui a imagem no caso ela tá aqui tá aberto aqui pra gente e a gente vem

Nesse ícone aqui ó download a gente clica aqui e E aí ele já baixou aqui PR mim ó o meu ele já baixou o meu eu sei que ele tá na pasta downloads então eu t aqui na minha pasta downloads e eu sei que a imagem tá aqui ó essa aqui é a imagem que eu acabei de baixar e como que eu faço para jogar essa imagem lá pro vs code é bem simples tô com a minha pasta aberta aqui na direita e tô com meu vs code aberto aqui na esquerda que eu vou fazer

é pegar e arrastar ó vou Arrastar a imagem e vou jogar aqui pro explorador de arquivos ó joguei ela para cá e ela já tá aqui já tá pronta pra gente utilizar Então beleza Show de Bola Ela já tá aqui pra gente poder utilizar E aí como a gente já tem a imagem aqui a gente pode referenciar ela aqui na tag IMG a gente pode colocar Qual que é o caminho então Lembrando que o caminho da imagem a gente coloca a propriedade src igual a E aí qual que é o caminho é barra dude ppng

se a gente salvar você Vai ver que ela já vai aparecer lá ó ó já apareceu aqui na nossa página então aqui já tem algumas coisas que a gente já colocou e já apareceu a imagem aqui então beleza por último nessa imagem a gente vai colocar aqui uma classe Então a gente vai colocar Class é igual a imagem traço perfil vamos salvar isso aqui e agora a gente começa a estilizar essa parte então a gente já criou todas as nossas classes todo o nosso conteúdo agora a gente começa a estilização aqui Primeira coisa que a

gente vai fazer é arrumar o espaçamento porque como eu falei o nosso nome tá escondido aqui embaixo do nosso reader então a gente precisa colocar um espaçamento de cima aqui então eu venho aqui eu vou selecionar quem eu vou selecionar a Nossa main que é o nosso conteúdo principal E aí eu vou colocar um Margin top que é uma margem para cima de c r se a gente salvar ó o nosso conteúdo já tá visível aqui a gente colocou uma margem Em cima aqui da M vamos voltar aqui na nosso HTML que eu esqueci de

colocar uma classe aqui pra gente na nossa section a gente precisa vir aqui e colocar uma classe Class Lembrando que é a nossa section aqui do sobre e a gente vai colocar três classes já já já a gente vai ver porqu dessas três classes a primeira dela vai ser Dev espaço container e a terceira é Fade traço in Opa eu coloquei aqui container é container coloquei errado a gente vai Ter essas três classes aqui na section já já a gente vai ver Por que a gente vai precisar delas Beleza então vamos voltar aqui pro style.css

e continuar a estilização do nosso conteúdo Então por enquanto a nossa página ela tá assim ela tá com esse layout aqui e você vê que o nosso conteúdo ele já uma acertada aqui agora a gente vai continuar fazendo as estilizações Beleza agora aqui a gente vai colocar um paring nas nossas sections porque se você observar a gente Tá utilizando aqui em todos os lugares que a gente vai colocar as nossos contêiners aqui ó tá vendo essa section ela tá englobando o sobre depois a gente vai ter também mais uma section para englobar o contato depois

mais uma section para englobar os projetos e depois as Skills em cada uma dessas sections a gente quer ter um pading que é um espaçamento interno aqui então aqui no nosso CSS a gente vai selecionar a nossa section todas as nossas sections No caso e aí nelas aqui a gente vai colocar um ping como sendo de se r e de zero e aí a princípio ele não vai ter muito efeito aqui mas isso aqui vai ser importante pra gente pra gente ter esse ping Depois dessa section a gente vai no nosso Dev se a gente

ver aqui no index HTML Ó você vai ver que a gente tem essa classe Dev aqui eu coloquei ela como sendo Dev que é para ser justamente o desenvolvedor ela vai ser a classe que vai selecionar aqui a section do nosso Desenvolvedor afinal de contas aqui a gente só tem informações sobre o desenvolvedor no caso que é você e aí a gente vai selecionar essa classe aqui então vamos vir no CSS vamos selecionar pon Dev abre Chaves e aí o que que a gente quer fazer aqui a gente quer utilizar o display Grid o display

Grid ele é pra gente começar a utilizar as grades aqui do nosso CSS Então a primeira coisa que a gente faz para usar o display Grid é colocar display como Sendo Grid se a gente salvar e voltar aqui no código você vai ver que ele não teve muito Impacto para ele ter o impacto a gente precisa colocar essa propriedade aqui ó Grid traço template tro columns o que que essa propriedade tá especificando como a gente vai utilizar uma grade uma grade ela constitui de elementos na horizontal e na vertical uma grade seria é nada mais

do que um jogo da velha que nem esse aqui então a Gente tem linhas horizontais e linhas verticais e a gente quer especificar como é que vai ser o nosso conteúdo aqui no caso a gente tem essa caixa aqui que é dos textos e a gente tem essa caixa aqui da Imagem e aí a gente tem que especificar o quanto que essa caixa aqui vai tomar do conteúdo e o quanto que essa caixa aqui vai tomar do conteúdo no caso a gente tá falando aqui na horizontal então o que que a gente quer a gente

quer que esse conteúdo aqui Ocupe uma fração ou seja vai ser uma fração aqui da largura e esse conteúdo da imagem ocupe outra fração igual para ficar com um espaçamento igual aqui então pra gente especificar que vai ser uma fração do conteúdo e outra fração do conteúdo a gente vem e seta essa propriedade aqui então a gente vem aqui e coloca na propriedade Grid template columns essa especificação aqui um FR e um FR que aí a gente tá especificando o qu vai ter uma fração para um conteúdo e Uma fração pro outro conteúdo se a

gente salvar e voltar lá foi isso que ele fez ele reservou aqui uma largura para um conteúdo e a outra largura pro outro conteúdo e agora a gente coloca aqui um espacinho Entre esses dois conteúdos então a gente utiliza a propriedade GAP como sendo dois R para que esse GAP aqui para ele colocar um espaço entre os dois e aí por último a gente coloca a propriedade align items como sendo Center para ele centralizar Verticalmente o o nosso texto porque se a gente voltar aqui ó o nosso texto tá no início da página a gente

quer que ele fique aqui ó Então vamos salvar para ver como é que fica ó ele já veio aqui pro meio e colocou espaço aqui no meio pra gente show de bola agora vamos ajustar esse texto aqui ó tanto esse texto aqui Júlio César no caso é o seu nome e aí aqui a descrição do texto a gente vai ajustar esses dois textos aqui então vamos voltar aqui e aí quem que são Esses dois textos se a gente voltar aqui no HTML ó o texto que é o nome ele vai ser o quê ele vai

ser o H1 que vai estar dentro da classe Dev texto Então primeiro a gente seleciona aqui a classe Dev texto e depois seleciona o H1 vai ser a mesma coisa pro p a gente vai selecionar Dev texto e depois o p Então vamos fazer cada um desses aqui primeiro ponto Dev texto e aí a gente seleciona o H1 que tá dentro do Dev texto que que a gente quer fazer aqui primeiro Vamos Aumentar um pouco a fonte Vamos colocar um Font size como sendo de 3.5 R depois a gente coloca um Margin Bottom como sendo

de um R para ele colocar uma margem embaixo e a gente coloca a cor vamos colocar o Color como sendo var abre parênteses traz trá cor primária se a gente salvar ó esse texto aqui ele já tá mais fiel ao nosso original aqui ó depois a gente vai modificar o p que vai ser a mesma ideia vamos vir aqui e vamos selecionar o p Ponto Dev tro texto P abre Chaves e a gente vai colocar um fonte size como sendo de 1.23 R e um Margin Bottom como sendo de 2 R que vai ser a

mesma ideia a gente vai modificar a fonte e uma margem embaixo do nosso parágrafo se a gente salvar e voltar lá ó ele aumentou um pouco a fonte e colocou uma margem aqui embaixo beleza maravilha agora qual que é o terceiro conteúdo que a gente tem aqui pra utilizar nessa sessão é aqui o nosso botão de entrar em contato Então Quem que é esse botão aqui no HTML se a gente ver aqui ó você vai ver que ele tem uma classe ó ele é o nosso link aqui a nossa tag a e ele tem a

classe botão de contato Então é ele que a gente vai estilizar então aqui no CSS a gente vem seleciona o botão de contato a nossa classe e aí primeiro a gente vai mudar a cor de fundo dele vamos um background color como sendo var traz TR cor primária e aí depois a gente vai tirar a Decoração dele porque se você observar ele tá com essa linha aqui porque ele é um link então a gente vem e coloca um text decoration como sendo n se a gente salvar Ó você vai ver que ele já mudou a

cor de fundo falta a gente mudar a cor do texto que a gente quer colocar branco então a gente vem e coloca color como porque essa aqui é a cor branca no caso dá pra gente selecionar a cor dessa maneira aqui também e aí tá vendo que aqui no botão ó ele tá muito grudado com As bordas Vamos colocar um Pering aqui nele para poder colocar um espaçamento interno então a gente vem coloca um ter como sendo de 0.75 R e 1.5 que aí ele vai colocar esse espaço aqui pra gente beleza depois a gente

vem e coloca aqui um R como sendo de 5 pixs PR ele colocar essa bordinha arredondada aqui depois a gente também quer colocar uma transição aqui nele a gente quer quando a gente passe o mouse por cima ele D aquela Mudadinha de cor então a gente vem aqui primeiro a gente seleciona que a gente vai utilizar uma transição Então transition como sendo var e traço traço transição E aí pra gente utizar aquele artefato deando passa o mouse por cima a gente seleciona ponto botão de contato dois pontos Hover e a gente muda a cor de

fundo a gente coloca um background color como sendo var e vai ser a nossa cor secundária e aí sempre que a gente Passar o mouse por cima ele vai dar essa mudadinha de cor aqui pra gente beleza maravilha agora agora que a gente tem aqui essa sessão mais estilizada a gente dá uma estilizada aqui na imagem também então aqui a gente vem vamos ver quem que é a nossa imagem né a nossa imagem aqui é o nosso Justamente a nossa imagem o do.png só que se você observar ó o nosso Dev imagem é a div

que tá englobando a nossa imagem então para selecionar a imagem em si a gente Utiliza imagem perfil para selecionar a div que engloba a imagem a gente seleciona a classe Dev em imagem Então vamos fazer isso aqui primeiro então a gente seleciona aqui a nossa classe imagem e a gente vai colocar uma propriedade que já já a gente vai entender o por dela mas por enquanto vamos só colocar ela aqui e já já a gente entende o porqu a propriedade é position como sendo relative Opa é relative se a gente Salvar ó ele não vai

ter muita mudança visual aqui vai aparentar estar a mesma coisa depois a gente vai vir aqui na nossa imagem em si que é a classe pon imagem perfil e aí nela a gente vai colocar alguns estilos aqui o primeiro estilo é a Box Shadow que a gente viu mais cedo como é que funciona então a gente vai colocar uma Box Shadow de zer 10 pixels para baixo 20 pixels de borrão e a cor vai ser essa aqui rgba abre parênteses 00 e 0.1 para ele ter aquele aspecto mais de Cinza se a gente salvar ó

ele adicionou essa bordinha aqui pra gente ó e aí agora a gente deixa essa imagem imem redondada então a gente coloca border radius como sendo de 50% sempre que você precisa colocar uma imagem com uma borda arredondada você utiliza esse valor de border radius aqui que ele vai est colocando o valor do Raio da borda como sendo de 50% que é Justamente o arredondado E aí se a gente salvar e voltar aqui ó você vai ver que ele já tá nesse formato aqui pra gente beleza agora a gente vai especificar algumas coisas aqui de tamanho

então primeiro a gente vai colocar uma largura que é o wf de 100% depois uma altura como sendo alto essa altura como sendo alto o que que acontece ela sempre vai seguir o valor da largura então se eu redimensionar aqui a nossa largura a Altura ela vai redimensionar automaticamente na proporção então a gente não precisa especificar um valor específico aqui pra altura ela vai seguir a largura depois a gente vem e coloca um Max wf de 400 pixels esse aqui é a nossa largura máxima então aqui eu tô especificando a largura de 100% Mas é

100% com uma condicional que é o qu ele só Pode ocupar no máximo 400 pixels depois a gente vem e coloca essa propriedade aqui Ó que é o Object Fit essa propriedade Object Fit ela é justamente o significado dela que é o quê a gente quer colocar o conteúdo cabendo ali na nossa div Então se a gente tem uma div que tá englobando aqui ó se essa div tá englobando a nossa imagem a gente tá falando o seguinte essa imagem ela vai caber certinho aqui na nossa div esse aqui que é o Object Fit e

aí esse Object Fit Qual que é o valor dele a gente vai colocar ele como sendo cover se a gente Salvar ó ele já tomou Esse aspecto aqui pra gente ele já redimensionou ali pra gente e aí esse Object Fit também ele serve pra gente quando a gente coloca o valor cover ele serve para manter as proporções na imagem então ele não vai distorcer também beleza maravilha eu acho que a nossa parte de conteúdo tá finalizada por enquanto se você observar ela tá bem mais fiel aqui ao design tem algumas diferenças só que a gente

vai ajustar mas já tá ficando bem legal Então a próxima sessão que a gente vai fazer aqui é a sessão de Skills que a gente vai fazer esse cardz aqui de Skill Então bora lá então aqui ó a gente vai vir no nosso index HTML e aí aqui a gente criou uma section pra parte de sobre agora a gente vai criar outra section que é pra parte de Skills Então vamos vir aqui embaixo vamos criar uma nova section E aí essa section se você observar aqui na primeira section ela Tinha o ID sobre e ela

tinha essas classes aqui já a nossa section de Skills ela vai ter o ID Skills para que que serve o ID principalmente pra gente é pra gente poder navegar no no nosso site se você lembrar bem o ID ele é ali um seletor único do nosso CSS e ele também serve pra gente Navegar durante o site então aqui no link ó tá vendo que a gente veio aqui e a gente colocou um link pro sobre a gente colocou um link para Skills mais tarde a gente vai vir Vai colocar o valor aqui para onde que

a gente quer navegar e esse valor vai ser justamente os ids então no sobre se eu clicar no sobre ele vai navegar pro ID sobre se eu clicar nas skills ele vai navegar pro ID Skills que a gente vai colocar aqui embaixo Então a primeira coisa que a gente faz é colocar o id como sendo Skills depois a gente vai vir e vai fazer uma coisa semelhante aqui que a gente fez no sobre que a gente colocou a classe container e a classe Fade in a classe container ela é uma classe que a gente vai

colocar em todas as sections que é para quê Se você vir aqui no CSS ó e a gente procurar a classe contêiner aqui que a gente tinha declarado ó ela tá bem aqui em cima ó essa aqui é uma classe mais geral que que ela vai fazer ela vai colocar aqui uma largura máxima de 1200 pixels E essas outras duas propriedades aqui o Margin é pra gente setar a margem como sendo zero e alto e o Pering é pra gente Colocar ali um valor de espaçamento interno então todas as nossas sessões vão ter essa classe

container aqui que é principalmente para limitar a largura da section então nas Skills vai ser a mesma coisa a gente vem e declara Class igual a container e aqui a gente colocou a classe fadein esse aqui vai ser mais pro final do nosso tutorial que a gente vai fazer que é o qu a gente vai selecionar todas as classes que tem Fade in e a Gente vai colocar aquele efeito de quando a gente carrega a página ele tem aquele efeito Zinho esse aqui ó quando a gente carrega a página você vê que todas as sections

ela dá esse efeito de opacidade aqui então é para isso que a gente vai utilizar a classe Fade in Então vamos voltar aqui e vamos colocar a nossa classe container e in nas nossas Skills Beleza se a gente observar as nossas Skills aqui o que que a gente vai ter primeiro a gente vai ter um título Depois a gente vai ter outra caixona aqui que vai englobar todas essas caixinhas e depois a gente vai ter caixinhas com alguns descritivos Então a gente vai ter aqui uma caixinha com esse emoji front end e esse descritivo esse

emoji esse backend e esse descritivo e assim por diante Então vai ser aqui um texto uma caixona e várias caixinhas então primeiro vamos declarar o nosso texto que vai ser um H2 H2 que vai ter Skills dentro logo abaixo a gente vai Ter a nossa caixona de Skills Então a gente vai colocar uma div E aí logo de cara aqui a gente já coloca a nossa classe para colocar as nossas Skills Então vamos colocar uma Class como sendo Skills traço Grid essa aqui é a caixona que tá englobando todas as Skills aqui dentro a gente

a gente vai colocar cada um dos itens das nossas Skills então aqui a gente pode declarar de novo outra div E aí aqui dentro dessa div O que que a gente vai ter se a gente voltar lá ó Você vai ver que dentro dessa dizinha aqui a gente vai ter um emoji um texto aqui maior e um texto menor no caso mais destacado né então é isso que a gente vai fazer Então nesse caro aqui eu vou colocar uma nova classe Vamos colocar Class é igual a Skills tr item E aí aqui a gente vai

ter primeiro o nosso emoji pro emoji eu vou colocar por enquanto uma div vazia que já já a gente vai ver como é que a gente vai inserir esse emoji aqui então a gente vai colocar uma Div vazia sem nada por enquanto Logo abaixo a gente vai ter o texto lá que a gente viu do front end que é mais destacado Então a gente vai colocar um H3 E aí logo abaixo desse H3 a gente vai ter um paragrafo listando as tecnologias então aqui a gente vai ter um p que vai vai ser essa listinha

aqui de coisas que a gente tem E aí aqui ó eu já vou colocar as classes certas então aqui na div que vai ser o nosso ícone eu vou colocar nosso emoji no caso vou colocar Uma classe como sendo Skill traço Icon no caso Icon no H3 eu vou deixar sem classe por enquanto e o p eu também vou deixar sem classe Então essa aqui é uma das nossas caixinhas essa aqui vai ser uma das caixinhas e essa aqui é a caix como a gente vai ter aqui quatro caixinhas eu vou replicar esse código aqui

ó eu vou copiar quem eu vou copiar o a div que tem o Skills item tá vendo que a gente tem aqui Skills item vou Copiar esse cara aqui inteiro Então vou selecionar aqui desde o início até o fim e eu vou replicar aqui ele mais três Vezes Mais Um item Mais Um item e mais um item aqui a gente tem a estrutura que a gente viu lá a gente tem uma section que tá englobando um título as Skills logo abaixo a gente tem uma caixona essa caixona aqui que tá englobando todos os nossos itens

então aqui a gente tem esse primeiro item esse outro item esse outro item e esse aqui são os nossos Skills Item aqui maravilha agora a gente coloca os nomes desses caras aqui então a gente vem coloca front end HTML CSS JavaScript depois backend node e assim por diante Então vamos vir aqui e vamos colocar Primeiro vai ser o nosso frontend front end e logo abaixo a gente vai ter HTML CSS JavaScript e react depois na segundo item aqui a gente vai ter no título vai ser backend e o nosso parágrafo vai ter Nodejs Express e

Python depois na próximo item a gente vai ter banco de dados como título e os bancos de dados que a gente listou aqui vai ser mongo DB e post post gre SQL e por último a gente vai ter Aqui as nossas ferramentas então a gente coloca ferramentas E aí dentro dele vai ter Git docker E aws lembrando que como isso aqui é um portfólio eu tô fazendo aqui com base em Tecnologias padrão aqui mas se você precisar colocar por exemplo mais uma sessão ou você quiser tirar uma sessão você pode ficar à vontade porque no

caso esse aqui é o seu o portfólio no caso se a gente salvar isso aqui e voltar lá ó aqui é o nosso portfólio pronto vamos vir aqui no que a gente tá desenvolvendo você vai ver que ele colocou aqui pra gente ó ele listou as tecnologias aqui só que não tá estilizado mas por enquanto a gente tem esse esse padrão Aqui de documento e se você observar ó lembra que a gente falou que cada section vai ter um valor de ping você já pode ver esse ping aqui ó tá vendo que a gente tem

espaço aqui à esquerda é o nosso paring em Ação Beleza agora que a gente tem aqui o nosso HTML pronto a gente vem e estiliza esses caras aqui então a primeira coisa que a gente vai fazer aqui quem que a gente vai selecionar a gente vai selecionar vamos vir aqui no HTML de novo os nossos Skills Grid aqui a nossa classe Skills Grid então a gente vem aqui e seleciona ponto Skills traço Grid e aí que que a gente vai fazer com esses caras bom a gente vai utilizar o display Grid que a gente já

viu ali em cima display Grid novamente ele divide ali o nosso conteúdo em grades em quadradinhos ali no caso então a gente coloca display como sendo Grid e aí lembra da propriedade que a gente colocou ali em cima é a propriedade Grid Template columns dessa vez a gente vai fazer aqui uma propriedade um pouco diferente e um pouco cheia de descrição então Vamos por partes aqui do que que a gente tem que colocar primeiro então a gente vai colocar a propriedade repeat que no caso ela parece uma função ali a gente abre parênteses aqui esse

repeat a gente tá especificando que esse padrão é para ser repetido Então esse aqui é um padrão a ser repetido durante Todos as ali os nossos elementos do nosso Grid Então é só para isso depois aqui dentro o que que a gente vai colocar de propriedade primeiro a gente coloca um auto traço Fit esse aut Fit que que ele vai fazer ele vai ajustar automaticamente o número de colunas pro espaço que a gente tem então de acordo com o espaço que a gente tiver ele vai ajustar as colunas então por exemplo se eu colocar a

página como sendo Responsiva ele vai ajustar automaticamente ali pra gente os elementos no nosso Grid então para is que serve o autofit depois a gente coloca vírgula E aí a gente vai colocar mais uma função aqui que é a função min Opa min Max abre parênteses como você deve imaginar se a gente tem aqui min e Max a gente tá declarando valores mínimos e máximos então primeiro aqui dentro a gente vai especificar um valor mínimo qual que é o nosso valor mínimo Vamos colocar de 150 pixels vírgula 1 FR aqui a gente tá falando que

cada coluna tem que ter no mínimo 150 pixels E se ela precisar estender o seu valor se ela precisar crescer ela vai crescer no máximo uma fração Então por ex exemplo se a gente tiver vamos supor que a gente tenha aqui três elementos ó o valor mínimo cada coluna dessa aqui tem que ter no mínimo 150 piels não pode ter menos do que isso se no caso por exemplo vamos supor que a gente remova aqui esse Cara quando esses dois caras forem crescer eles podem crescer no máximo uma fração então aqui ó vamos fazer ele

crescer cresceu até no máximo uma fração e esse aqui também vai crescer até no máximo uma fração então os dois cresceram aqui no máximo de uma fração do conteúdo você vê que esse cara aqui ó ele não invadiu o espaço dele ó ele cresceu só até a fração dele então é isso que significa essa propriedade então todo esse descritivo aqui é isso Que eu acabei de falar a gente tem um padrão que se repete um padrão que vai automaticamente ajustar o conteúdo e um padrão que a gente tem um mínimo e um máximo de largura

Beleza se a gente salvar isso aqui qual que é o resultado lá na página ele vai fazer exatamente isso que a gente falou cada um tá ocupando 150 piels e se alguém no caso se a gente redimensionar a página ó se eu vier aqui e redimensionar Ó você vai ver que ó tá vendo que o ferramentas ele Foi lá para baixo ó quer dizer que ele tá ajustando automaticamente ali pra gente o nosso Grid Então isso é bem legal aqui pra gente show de bola e agora a gente coloca aqui embaixo também um GAP de

dois R que é pra gente colocar um espacinho entre cada um dos elementos Beleza agora que a gente estilizou o nosso Skills Grid a gente precisa estilizar cada um dos itens então a gente vem aqui vamos vir no HTML ó nossos itens é o Skills traço item então A gente vem aqui e seleciona ponto Skills traço item E aí cada um desses itens quais são as propriedades que a gente vai ter bom primeiro eu vou colocar aqui um background color como sendo de var E aí essa vai ser a nossa cor de fundo Card que

a gente vai ter aqui depois a gente vai colocar um box Shadow também a gente vai colocar aquela sombrinha também então Box Shadow como sendo de zer 4 pixels 6 pixels e a cor dele vai ser Rgba 00 e 0.1 depois a gente vai colocar aqui um Pering também que é um espaçamento interno Vamos colocar um Pering como sendo de 1.5 R E aí se a gente salvar você vai ver que ele já vai est bem mais legal aqui ó já tá mais no formato de card aqui pra gente realmente a gente também centraliza os

textos então a gente coloca um text text align como sendo Center a gente coloca também um border radius como sendo de 10 pixels E Aí se a gente salvar Ó você vê que ele centralizou o texto colocou uma bordinha aqui pra gente por último a gente coloca a nossa animação como quando a gente colocar aqui o mouse por cima a gente quer que ele dê uma subidinha ali que nem a gente tem aqui no resultado ó sempre que eu passo o mouse aqui por cima ele dá essa subidinha aqui então vamos fazer isso como que

a gente faz isso primeiro a gente precisa utilizar transição também então a gente vem aqui E coloca um transition como sendo de var traço trç transição E aí pra gente detectar o mouse por cima a gente utiliza o Hover então a gente vem aqui coloca ponto Skills tro item e a gente coloca o Hover abre Chaves e aí a gente vai utilizar uma propriedade nova aqui que é o Transform o Transform ele é justamente para poder transformar algum elemento Então como a gente quer transformar ele ali subir esse elemento no caso a gente vem aqui

e coloca Transform como sendo quem que a gente quer modificar a gente quer modificar ali aonde que o elemento está em relação à altura se a gente lembrar ali do plano cartesiano o o eixo ali horizontal é o eixo X e o eixo vertical é o eixo Y como a gente quer subir ele a gente vai mexer no eixo Y então a gente utiliza a propriedade translate y e a a gente abre o parênteses a gente coloca aqui um valor de -5 pixels quando a gente salva Ó você vai ver que ele vai fazer Exatamente

isso ele vai dar um translate Y ele vai subir esse elemento no eixo Y no caso então é exatamente isso que ele tá fazendo show de bola só que agora tá faltando o nosso emoji que a gente tem aqui ó a gente deveria ter um emoji aqui como que a gente faz para poder inserir esse caro a gente vem aqui no nosso HTML e aí a gente já deixou aqui reservada uma div pro nosso emoji ó que é essa Skill icon aqui e aí aqui dentro a gente vai colocar o código do emoji porque Cada

um dos emojis ele tem um código e eu vou colocar agora na tela para você cada um desses códigos aqui então na primeira div no nosso primeiro emoji vai ser esse código aqui Então vai ser e Comercial # 1281 87 e ponto e vírgula tem que colocar ele exatamente assim o segundo código vai ser esse aqui a gente vai colocar ele dentro de Skills icon também e ele vai ser e Comercial # 1282 95 e ponto e vírgula então a gente Tem esses dois aqui o próximo ele vai ser esse código aqui então a gente

vai ter e Comercial hash 12 8202 pon ví e o último código vai ser esse aqui e Comercial # 1287 36 e ponto e vírgula esses aqui são os códigos do nosso emoji Então a gente tem que colocar eles exatamente assim se a gente salvar isso aqui e voltar lá você vai ver que eles já estão inseridos aqui só que eles estão meio pequenos né Vamos Dar uma modificada neles aqui a gente já criou a classe deles aqui que é o Skills icon Então vamos lá no nosso CSS e a gente seleciona aqui o nosso

ponto Skills tro icon E aí esse nosso Skills icon o que que ele vai ter a gente vai aumentar a fonte dele vamos colocar um fonte size como sendo de 2.5 R ou só vou corrigir aqui que ele não é Skills icon ele é Skill icon aqui ó ele não tem s é Skill tro icon só e aí aqui embaixo a gente Coloca um Margin botom de um R se a gente salvar e voltar lá você vai ver que ele fez ente isso ó ele aumentou a fonte e colocou um espacinho aqui de baixo show

de bola uma última coisa pra gente fazer por agora ó tá vendo que aqui ó esse texto de Skills ele tá diferente ele tá preto e tá na esquerda aqui era para ele tá Centralizado e ele Azul então o que que a gente vai fazer vamos vir aqui ó e a gente vai lá em cima no nosso código vamos vir aqui no Contêiner tá vendo que tem um contêiner aqui a gente vai declarar uma classe embaixo do contêiner não é dentro do contêiner que que a gente vai colocar aqui a gente vai colocar uma H2

a gente vai selecionar todos os H2 do nosso site e a gente vai estilizar ele então a gente vai colocar um Font size de 2.5 R um Margin Bottom como sendo de dois r e um text align como sendo Center se a gente salvar ó ele vai tomar esse estilo aqui e todos os H2 do nosso site Vão ser assim por último falta a gente colocar a cor dele então a gente coloca um color como sendo var e traço traço cor traço secundária e aí se a gente salva isso aqui ó você vai ver que

ele tomou essa cor aqui pra gente Maravilha essa parte aqui de Skills então tá pronto a gente vai fazer algo bem parecido com o que a gente tem aqui nas Skills nos projetos então a gente finalizou aqui o nosso a nossa parte de Skills Agora falta a Parte de projetos que nem a gente tem aqui ó no site pronto a gente tem essa parte de projetos também que é bem semelhante aqui a essa parte de Skills então é esse que a gente vai trabalhar agora então a primeira coisa que a gente faz é criar aqui

o nosso HTML das dos projetos no caso então aqui a gente faz que nem a gente fez com as Skills que é criar aqui a nossa section vamos criar uma section para esses projetos aqui e aí como que vai ser essa estrutura aqui Dos projetos né aqui ó vamos vir na página pronta a gente vai ter que nem a gente teve aqui em cima um card Então a gente tem esse cardinho aqui com um título um texto e aí a gente tem aqui algumas tags a gente tem essas tagz inhas aqui que são algumas tecnologias

Então a gente vai ter uma caixa pro Card depois um título um p uma caixa aqui pras tags aqui também então essas tags aqui vão estar envolvidas por uma outra caixa então vamos vir aqui e fazer isso Primeira coisa que a gente sempre faz é colocar o id né da sessão então ID aqui vai ser igual a projetos e aí aqui a gente coloca a nossa classe container e Fade in também aqui Class igual a container e Fade in depois a gente vai ter aqui um primeiro uma caixa principal englobando todos os projetos e depois

cada caixa de cada Card Então é isso que a gente vai fazer então a gente vai ter aqui primeiro na verdade o título né um H2 com Projetos e aí aqui a gente vai ter Aquela nossa caixona que tá englobando todos os Card zinhos Então vai ser uma div Vamos colocar uma div E aí aqui a gente já coloca até uma classe para esses caras então aqui ó essa classe aqui esse cara essa caixona aqui que tá englobando todos os projetos a gente vai chamar ela de projetos traço Grid então Class é igual a projetos

traço Grid porque a gente vai utilizar o Grid aqui também que nem a gente fez nas Skills Aqui nas Skills ó a gente tinha essa caixa que estava englobando todo mundo que tinha a classe Skills Grid aqui vai ser a mesma coisa projetos Grid e aí embaixo desse cara a gente vai ter os projetos em si então aqui a gente vai ter cada card de cada projeto então aqui eu posso criar uma div com a classe Class igual a projeto traço Card que vai ser cada um dos cardz inhos que a gente vai ter Tá

então vamos criar aqui o primeiro Card e como a Gente falou a gente vai ter um título um texto e o as nossas tags ali englobadas por uma caixa menor então aqui a gente vem coloca um H3 que é o pequeno título depois o p que é o nosso descritivo E aí como a gente vai ter várias tags a gente pode colocar elas numa outra div que vão ter as tags ali né então a gente vem aqui coloca uma div e aqui dentro a gente vai colocar ali as nossas tags Vamos dar um enter aqui

ó que que vão ser essas tags a Gente pode colocar numa spam elas Então como a gente tem aqui ó aqui a gente tem três spam no caso com react node mongo aqui a gente vai ter três spam com react Fire base material e aqui essas outras três spam Então vão ser sempre três spam ali pra gente então aqui a gente coloca spam embaixo spam e aqui embaixo spam também E aí aqui a gente pode até colocar as classes de todos os nossos elementos aqui então o H3 a gente pode vir aqui e colocar um

Class igual a Título traz projeto o p a gente pode deixar sem classe e aqui essa div que tá englobando as nossas tags a gente pode colocar a classe Class igual a projeto traço tags Então a gente vai ter essa estrutura aqui para cada um dos cards isso aqui representa cada um daqueles cards que a gente vai ter aqui a gente pode copiar esse Card Então a gente vai utilizar essa mesma estrutura aqui pros Três cards então a gente pode vir aqui desde essa div aqui ó tá vendo que a Gente tem a div projeto

Card E aí se a gente clicar na div aqui ó ele mostra pra gente quem que é a div que tá fechando no caso é essa aqui então a gente seleciona desde aqui de baixo até a nossa div aqui e aí como vai ser três cards a gente pode dar um enter cont Crol V um enter cont Crol V que a gente vai ter esses três cards aqui a gente faz isso só para facilitar aqui o nosso trabalho e aí agora é colocar as informações aqui então vamos voltar lá Para ver o que que a

gente vai ter ó aqui a gente vai ter esse título aqui E esse texto com essas tags aqui então Vamos colocar isso lá então aqui o primeiro vai ser site de e-commerce eu deixei uma colinha aqui do lado desse texto porque é um texto meio grande mas vamos escrever ele aqui ó plataforma de comérci dentro do P eletrônico totalmente responsiva com autenticação de usuário e funcionalidade de pagamento aí aqui em cada uma dessas Spans a gente vai ter primeiro a primeira tecnologia é react a segunda é nodejs e a terceira é mongodb depois a gente

vai ter o próximo projeto aqui aí a gente vai colocar o título do card também nesse caso vai ser App de gerenciamento de opa gerenciamento de tarefas no p o que que a gente vai ter aqui ó vamos colocar aqui uma aplicação de produtividade para gerenciar tarefas e Projetos com atualizações em tempo real e recursos de colaboração de equipe beleza aqui se você não quiser que esse texto ele fique indo pra direita se você quiser que ele quebre a linha automaticamente você pode usar um atalho é só você segurar a tecla Alt e apertar a

tecla Z E aí se a gente fizer isso aqui ó ele vai quebrar a linha tá vendo que ele quebrou a linha aqui aí ele não vai ficar indo lá pra direita isso aqui Facilita um pouco pra gente e aí agora a gente colocar as nossas spam aqui então a primeira spam vai ser react a segunda vai ser ser firebase e a terceira vai ser material ui E aí agora a gente vem pro nosso terceiro Card aqui pro nosso outro projeto então o título do outro projeto vai ser dashboard clima E aí qual que vai

ser o texto aqui do P vai ser aplicação de tempo interativa que exibe dados Meteorológicos atuais e previstos usando uma API E aí cada uma das tags aqui vão ser as tecnologias desse projeto Então vai ser JavaScript api e shart JS beleza essa parte aqui ela foi só pra gente inserir esses dados HTML aqui e aí se a gente salvar e voltar lá ó você vai ver como é que ficou ó ele ficou assim bem semelhante ao que a gente tinha antes Aqui nas Skills então ele ficou dessa maneira aqui e aí agora a gente

estilizar isso Aqui esse espaçamento do projetos aqui das Skills tá um pouco zoadinha ó tá muito colado mas já já a gente corrige isso então bora lá estilizar agora tudo isso aqui que a gente fez vamos ver aqui no style.css E aí qual que é a primeira coisa que a gente vai estilizar bom primeiro a gente precisa mexer no nosso Grid então a gente vem e seleciona o nosso projetos traço Grid Lembrando que o Nosso projetos traço Grid é o quê é essa div aqui cadê ó essa div aqui que tá englobando todos os nossos

cardz inhos Então ela é a tag Pie de todos esses cards aqui então ela que vai que a gente vai aplicar o Grid então primeiro que que a gente vai fazer display como sendo Grid pra gente começar a utilizar as grades e aí a gente vai ter aquela propriedade que é o Grid template colums E aí o valor dela vai ser semelhante ao que a gente já tinha feito nas Skills Que é esse aqui ó tá vendo que a gente tinha feito aqui nas Skills a mesma coisa ó display Grid Grid template colums e um

GAP então a gente pode copiar esse cara aqui ó essa classe aqui e aí a gente cola aqui no nosso projetos Grid e aí ele vai aplicar o mesmo Grid só que a diferença é que aqui eu vou colocar 300 pixels então recapitulando esse Grid template colums aqui ele vai aplicar aqui vários filtros para especificar pra Gente como é que funciona o nosso Grid então ele vai ser um Grid com um padrão que se repete um Grid que ele vai autoajustar ali o seu tamanho de acordo com o tamanho da tela e ele vai ter

um valor de mínimo de massa então cada elemento ele vai ter que ter no mínimo 300 pixels e no máximo ele vai poder ocupar uma fração ali do conteúdo e aí por último tem a propriedade GAP como sendo de dois R que aí ele vai aplicar aquele espaçamento entre um elemento e Outro e aí se eu salvar isso aqui ó ele já vai tá aplicando essa esquemática aqui de cards então ele vai est aplicando esses cards aqui pra gente agora vem a iação do Card em si que também vai ser bem semelhante ao que a

gente fez nas Skills então aqui a gente pode selecionar a nossa tag ponto projeto traço Card E lembrando que aqui no index HTML ó o projeto Card é cada um dos cards que a gente vai ter então é a nossa div aqui com essa classe projeto Card e o que que vai ter na estilização desse projeto Card bom primeiro aqui a gente vai mudar a cor de fundo do nosso Card então primeiro a gente coloca um background Color como sendo var e a nossa cor vai ser traço traço cor de fundo Card aí depois a

gente coloca um border radius como sendo de 10 pixels pra gente poder ter a borda redondada a gente coloca também um box Shadow que é aquela sombrinha que a gente tem embaixo de cada elemento como Sendo de zer 4 pixels 6 pixels e a cor dela vai ser rgba aquela mesma cor que a gente sempre coloca que é 0 0 v0.1 e aí a gente vai colocar também um paring espaçamento interno desse Card o nosso valor de Pering vai ser de 1.5 R então a gente vem e coloca Pering como sendo de 1.5 R E

aí se a gente salvar e voltar aqui ó você vai ver que ele já tá bem mais adaptado aqui a um formato de card realmente falta agora a gente colocar Também essa animação que a gente tem aqui nos outros cards das Skills Então vamos fazer isso aqui a gente vem e de novo a gente seleciona o nosso transition como sendo var E aí vai ser traz trá transição E aí obviamente a gente precisa colocar o Hover ali pra gente poder detectar quando o mouse esver por cima do card então a gente coloca o ponto projeto

TR Card dois pontos Hover E aí nesse Hover a gente vai fazer Aquele mesmo Transform que é para ele poder subir o Card então a gente coloca o Transform como sendo translate y e -5 pixels que aí ele vai ter Esse aspecto aqui quando a gente passa o mouse por cima agora A gente estiliza também o nosso título do projeto então aqui ó em cada Card a gente tem uma tag H3 que é o título do projeto Vamos estilizar esse cara aqui a gente coloca ponto título projeto E aí aqui a gente primeiro Altera a

fonte vai ser um Font size de 1.25 R um Margin borom como sendo de 0.5 r e um como sendo de var E aí a gente vai ter a nossa cor secundária ali secundária se a gente Salvar esse título já vai mais adaptado aqui ao formato que a gente tem E aí agora vem a parte das nossas tags né a gente tem aqui as nossas tagin que são ali Quais são as tecnologias desse projeto E aí se você observar a classe dela é projeto tags Então a gente vai selecionar essa com Esse projeto tags seleciona

ponto projeto traço tags E aí aqui que que a gente vai fazer nessas tags aqui observa como que tá as tags aqui ó elas estão meio que grudadas no nosso conteúdo então primeiro a gente coloca um margem top nela Vamos colocar aqui um Margin top como sendo de um R para ele colocar uma margem em cima aqui do nosso conteúdo para ele não ficar tão grudado assim depois a gente vai colocar duas propriedades A primeira é o display Flex que é para ele começar a utilizar a flexbox se a gente salvar ó ele não vai

ter muito efeito aqui ele vai grudar um conteúdo no outro mas não vai ter muito efeito e a gente vai colocar também o Flex Wap como sendo de wraap essa propriedade aqui o que que ela faz sempre que a gente tem um texto Dentro de uma div ele tem duas opções ou ele vai quebrar a linha quando não couber mais ou ele vai manter sempre o texto sem quebra de linha e aí quando a gente Coloca rap quer dizer que a gente quer manter todos os textos sem quebra de linha se a gente salvar ele

não vai ter muito Impacto aqui mas isso aqui é para ele não dividir o cardz inho em dois não quebrar a linha do card agora a estilização do projeto tags está pronta agora a gente precisa estilizar a spam porque é justamente a spam que vai ter aqueles estilos que a gente tem aqui ó no resultado ó as spans ó elas são tem esse laranjinha aqui tem as tecnologias E é como se fosse uma tagz inha realmente Então é isso que a gente vai fazer então aqui primeiro a gente vem e seleciona o nosso projeto tags

e a gente seleciona a spam que tá dentro do projeto tags E aí se você observar ele tem aquela cor laranja né a gente não tem essa cor laranja aqui por enquanto no nosso código então a gente vem aqui em cima ó vamos vir aqui no nosso Rot onde a gente declara Aqui as nossas cores e aí eu vou declarar mais uma cor Aqui eu vou declarar uma cor traço traço cor traço auxiliar E aí o código dessa cor auxiliar é esse aqui ó # d89 36 que aí ele vai ter Esse aspecto de laranja

aqui e aí agora aqui embaixo a gente consegue utilizar essa cor laranja nos nossos projeto tags aqui no Nossa spam a gente pode colocar um background color como sendo de var e a gente vai usar a nossa cor auxiliar aqui e aí se a gente salvar e voltar aqui ele já vai vir com essa cor aqui só que tem algumas Coisas que a gente precisa ajustar aqui como por exemplo a gente precisa colocar um espaçamento interno mudar a cor da fonte para sendo branca e a gente colocar um border radius aqui também então é isso

que a gente vai fazer então aqui primeiro Vamos colocar um color como sendo White PR ele mudar a cor do texto um Pering como sendo de 0.25 R e de 0.5 R um Font size como sendo de 0.75 R pra gente aumentar um pouco Aquela fonte e aí a gente coloca também um Border radius como sendo de 20 pixels se a gente salvar ele já vai ter um aspecto bem legal ó ele já vai est quase do jeito que a gente quer só que a gente não quer eles grudados assim a gente quer dar um

espacinho entre eles então a gente coloca um Margin right como sendo de 0.5 r e a gente coloca também o Margin Bottom como sendo de 0.5 R se a gente salvar Ó você vai ver que agora ele tá mais ajustado aqui pra gente show de bola eu acho que essa parte de Projeto ela não foi muito complexa porque como eu falei ele é bem semelhante aqui à parte de Skills só que aqui a gente vai precisar colocar mais duas propriedades que é o quê tá vendo que aqui ó essas Skills e esses projetos estão muito

grudados que que a gente vai fazer a gente vai selecionar o ID Skills e o ID projetos e vai colocar um Margin top e o Margin botom para colocar um espaço entre eles então aqui ó a gente seleciona hashtag que no caso o hashtag É para selecionar o ID projetos vírgula hh Skills a gente tá selecionando esses dois ids aqui e aí aqui dentro a gente vai colocar um margem como sendo de 100 pixels e zero que aí ele vai colocar só margem na vertical aqui pra gente ó se a gente salvar ó ele colocou

margens na vertical aqui você viu que ele deu um espaçamento entre os conteúdos aqui então é justamente isso que a gente quer a gente não quer o conteúdo muito grudado beleza eu acho que essa parte de Projeto tá feita agora a gente pode ir pra próxima parte que é a de contato aqui ó se você observar a gente tem esse formulário de contato aqui que a princípio é bem simples só que ele tem alguns detalhes ali então bora fazer esse formulário no HTML se a gente vier aqui no nosso HTML Ó você vai ver que

a gente criou aqui a nossa section de projetos e aí logo abaixo eu vou criar aqui a nossa section pro contato Então vamos criar uma section aí essa section Logo de cara a gente já vai ter o ID como sendo de contato e aí a gente coloca a classe em Class aqui como sendo de contato também que a gente vai usar essa classe mais tarde e aí a gente vai colocar também a nossa classe Fade in nesse contato aqui a gente não vai colocar a classe contêiner a gente já já vai ver Por que a

gente não vai colocar Então essa aqui é o principal aqui do nosso contato e aí esse contato como todas as abas do nosso projeto ele vai Ter um título então aqui vai ter um H2 e aqui a gente vai ter um contat me contat me exclamação logo abaixo aqui desse H2 que que a gente vai colocar a gente vai ter um form E aí nesse forme aqui se você observar ó a gente tem o campo nome o campo e-mail e o campo mensagem aqui sendo que esse campo de mensagem ele não vai ser só uma

input ele vai ser um text area ele é uma tag diferente da input então aqui a gente cria a tag form que como isso aqui vai ser um formulário a Gente precisa utilizar a tag form E aí logo de cara a gente já coloca uma classe aqui nesse form Então vai ter um Class chamado de contato traço form E aí dentro desse form O que que a gente vai ter a gente vai ter algumas inputs só que para cada input que a gente tiver a gente vai ter uma Label a Label é esse texto aqui

que a gente tem em cima de cada um dos formulários então aqui a gente tem essa input e essa Label essa input e essa Label e aqui a gente tem a Text area e uma Label aqui em cima então para cada input que a gente tiver a gente vai precisar de uma Label só que a gente vai precisar agrupar tudo isso numa div então aqui ó como que vai ser essa estrutura a gente vai ter uma div E aí dentro dessa div a gente vai ter uma Label e logo abaixo a gente vai ter uma

input então a gente coloca uma input aqui Então esse aqui vai se replicar para todos os campos que a gente tiver menos o campo lá da text area no caso Então aqui ó eu posso copiar essa div aqui colar e colar e aí só nesse último aqui que não vai ser uma input a gente pode apagar isso aqui e a gente declara uma text area text area E aí Esse sim é uma tag que ela precisa de fechamento diferente da input em cada uma das dives a gente vai colocar uma classe aqui pra gente porque

a gente vai precisar selecionar então aqui ó em cada uma das dives a gente coloca a classe igual a grupo Traço formular então nessa primeira aqui nessa segunda também grupo formulário e nessa terceira div também a gente vai ter a classe grupo traço formulário formulário Lembrando que aqui eu esqueci de colocar uma classe no H2 esse H2 aqui ó vou colocar uma classe chamada de título contato Beleza agora aqui ó a gente vai trabalhar em cada uma das nossas inputs e das nossas labels a primeira input a primeira div aqui é pro campo nome então

Aqui na Label a gente pode colocar nome e aí aqui ó quando a gente sempre que a gente tem uma input e uma Label a gente precisa informar na input o id e o nome do campo e na Label a gente precisa informar para Qual campo que a gente quer essa Lab aqui então para entender melhor na input a gente coloca um ID que no caso vai nome e a gente coloca também um campo name que também vai ser nome e aí na Label a gente coloca aqui ó um for é igual a nome o

que que eu tô falando Aqui eu tô falando que essa Label aqui é para o campo nome então a gente vai fazer a mesma coisa pros outros Campos então aqui ó no campo de e-mail nessa div aqui a gente vai fazer a mesma coisa aqui Vamos colocar eil na input a gente vai ter ID iG EA name igil e na Label a gente coloca um for iG e E aí vai ser a mesma coisa aqui pro nosso outro campo de mensagem então no text eror aqui ó a gente vai colocar um ID igual a mensagem

name igual a Mensagem e na Label um for aqui ó for igual a mensagem também por último em todo o formulário a gente precisa de um botão de envio então a gente vem aqui logo abaixo da última div e a gente coloca um buton e qual que vai ser o texto desse boot vai ser mandar mensagem e qual que vai ser o tipo desse botão Type ele vai ser um botão de submit vai ser um botão de envio então aqui a gente tem um formulário E aí todo formulário ele precisa desse botão aqui de envio

e A gente precisa especificar que ele tem esse Type submit aqui esse submit é para poder especificar que ele é o botão do formulário para poder enviar o formulário se a gente tirar isso aqui ele não vai funcionar esse botão Beleza então é eu acho que tá feita essa parte aqui agora a gente passa pra estilização uma última coisa pra gente fazer aqui nas inputs é sempre que a gente quer uma input que ela é obrigatória que ele não deixa enviar o formulário se você não Preencher ela a gente vem em cada uma das inputs

aqui e coloca um campo que chama required a gente coloca essa palavra aqui então na input de e mail eu também coloco required Lembrando que tem que ser antes do fechamento aqui da tag E aí no text area também required Beleza se a gente salvar isso aqui e voltar aqui ó você vai ver que ele já criou aqui pra gente e aí ele tem esse comportamento da text area que a gente consegue mudar o tamanho dela aqui Beleza agora vamos então pras estilizações vamos vir aqui no nosso style.css E aí a primeira coisa que a

gente vai estilizar aqui é o nosso ponto contato o nosso ponto contato é justamente aqui a nossa section de contato então aqui ó que que a gente vai fazer vamos vir ponto contato e vamos colocar um background color como sendo de var E aí vai ser aquela nossa cor secundária aqui porque ele vai ter essa cor diferenciada aqui ó se a gente vier Aqui ó ele tem esse tom de azul e aí os textos do nosso contato a gente vai precisar que sejam brancos então a gente coloca um color como sendo White tá Agora vamos

pra estilização do formulário aqui a gente vai colocar nesse formulário ó a gente vai colocar uma largura máxima e a gente vai colocar um margem zero alto também para poder fazer a centralização desses elementos então aqui ó a gente vem ponto contato form que é o nosso a nossa tag de Contato e a gente vai colocar um Max wf de 600 pixels e um Margin como sendo zero e alto e aí se a gente vier aqui ó ele já vai tá mais Centralizado aqui pra gente mais algumas coisas que a gente precisa ajustar aqui próxima

coisa é a gente se a gente vier aqui ó em cada um desses grupos dessas divisas aqui esses grupos formulários a gente precisa colocar um espaço neles um espaço de baixo porque eles estão muito grudados então a gente vem seleciona aqui ponto Grupo traço formulário formulário e a gente coloca um Margin Bottom como sendo de 1.5 R PR ele colocar um espaço aqui embaixo ó porque ele tava muito grudado a gente vai fazer a mesma coisa na Label então aqui em cada uma dessas labels ó a gente vai colocar também um espacinho embaixo então aqui

a gente coloca Label e o Margin borum como sendo de 0.5 R só que se você observar aqui ó cada uma dessas labels ó a Label de nome a Label de e-mail ela tá do lado do conteúdo Aqui a gente não quer isso a gente quer que a Label fique em cima do formulário da nossa input no caso então a gente vem aqui e coloca a propriedade display como sendo Block esse display Block vai fazer com que esse nome e esse e-mail ocupe 100% do espaço da largura ele não vai deixar Nenhum espaço pra input

e a input vai ter que ir para baixo Então isso é um comportamento que a gente tem agora que eu tô vendo aqui a gente esqueceu de colocar aqui o nosso a nossa Label da Text area aqui da mensagem então aqui no HTML ó aqui eu esqueci de colocar essa última Label aqui então nessa Label aqui vai ter mensagem e aí se a gente salvar e voltar lá ó ele já vai aparecer aqui pra gente beleza depois a gente vai estilizar agora a nossa input e a nossa text area então a gente vem aqui como

a gente tem só uma input e só uma text area a gente vai aplicar só um estilo para elas não tem necessidade de criar classe para elas então a gente pode Selecionar a nossa input e a nossa text area aqui e aí o que que a gente vai ter primeiro aqui bom primeiro a gente vai colocar um background color eu esqueci de colocar aqui é text area Faltou um a aqui então primeiro a gente coloca um background color como sendo de a gente vai ter essa cor aqui ó r GBA abre parênteses 255 V 255

V 255 v0.1 ele vai ser um tom meio acinzentado aqui ó se a gente salvar e voltar aqui ó ele é quase como se fosse um cinza Transparente porque ele tá pegando um pouco do azul ali também depois a gente vai mudar um pouco dessa borda porque se você observar essa borda não tá muito legal aqui a gente vem coloca um border como sendo de um pixxel Solid E aí a cor vai ser semelhante a essa aqui vamos copiar essa cor aqui ó e aí a gente coloca ela e aí em vez de ser 0,1

ela vai ter 0,2 de opacidade se a gente salvar e voltar aqui ó ele vai já vai est bem mais legal aqui pra gente e aí Agora a gente coloca também um Pering então um paring de 0.75 R e ele vai ter um espaçamento interno deixar um pouco maior aqui o campo pra gente e a gente coloca também um border radio de 5 pixels E aí a gente também coloca um color como sendo White para ele mudar a cor do texto e aí se a gente salvar ó ele vai tá dessa maneira aqui se você

observar ele não tá ocupando tudo aqui da largura a gente quer que ele ocupe Até o máximo que ele conseguir aqui então aqui a gente coloca um wf de 100% e agora sim ele vai est ocupando 100% aqui do conteúdo beleza Agora falta a gente utilizar aqui o nosso botão botão de para poder a gente enviar a mensagem aqui então como a gente tem só esse botão aqui a gente pode simplesmente selecionar a tag Button então aqui ó a gente vem seleciona o buton primeiro ele vai ter um background color como sendo de var E

aí vai ser a Nossa cor auxiliar depois a gente vai ter um color como sendo White para ele deixar o texto do botão Branco a gente vai ter também um ping que a gente já tá acostumado aí de 0.75 R e de 1.5 R A gente vai tirar a borda do botão então a gente coloca um border como sendo None um border radius como sendo de 5 pixels E para finalizar a gente coloca um cursor como sendo Pointer para ele colocar aquele ponteirinho quando a Gente coloca o mouse por cima se a gente salvar e

voltar aqui ó ele já vai ter Esse aspecto aqui bem mais legal pra gente e aí uma última coisa dessa parte de contato é que não tá aparecendo o texto de contato aqui é que ele tá azul no fundo azul se a gente vier aqui e fizer isso aqui ó selecionar ele você vai ver que ele tá aqui só que a gente precisa mudar a cor dele então a gente vem aqui e seleciona aqui Quem que é o nosso contato título do contato é aqui Esse H2 e tem a classe título traç contato Então vamos

selecionar esse cara aqui então aqui a gente seleciona ponto título traç contato e coloca um color como sendo White E aí ele já vai tá ajustado aqui pra gente tá então depois dessa parte de contato se a gente voltar aqui ó na nossa página pronta você vai ver que a gente tem um footer Zinho aqui bem simples para poder finalizar o site então aqui a gente vai criar o nosso footer no HTML então aqui pra gente Criar esse footer vamos vir aqui no nosso index.html.gz iconize ali e a gente vai ter o símbolo de copyright

aqui aqui a gente tem o copyright 2024 o seu nome e todos os direitos reservados então aqui ó vamos vir no nosso HTML como vai ser uma lista de ícones a gente vem aqui e declara uma ul E aí dentro dessa ul a gente vai ter três liis li li e a nossa Li aí a gente coloca uma classe aqui na Nossa ul que vai ser os ícones do footer Vamos colocar Class igual a ícone TR foter E aí a gente vai ter aqui também embaixo da um parágrafo que vai ser ali o nosso textinho

de copyright aqui pra gente colocar aquele símbolo de copyright aquele cezinho a gente vem e coloca e Comercial copy e ponto e vírgula e ele já vai at ficar roxo aqui pra gente e a gente coloca o texto 2024 Júlio César Opa Júlio César todos os direitos Reservados e aí o ícones aqui vão ser a mesma coisa que a gente usou lá em cima que a gente usou alguns emojis então o código desses emojis aqui eu vou colocar na tela agora então do primeiro emoji vai ser esse aqui ó EC comercial # 1228 1887 pon

Ví o do segundo vai ser e Comercial # 1228 101 ponto e vírgula e o do último Vai ser e Comercial # 128 038 e ponto e vírgula E aí se a gente salvar e voltar lá ó ele já vai aparecer aqui pra gente ó aí agora a gente estiliza Esse footer então a gente vem aqui no style.css E aí o estilo dele vai ser bem simples primeiro aqui no nosso footer a gente vem e coloca um background color como sendo de var e traço traço cor de fundo Card depois a gente alinha o texto

ao centro então a gente coloca text align como sendo de Center E aí a gente coloca também um paring como sendo de 2 r e zer para ele colocar um espaçamento interno e aí se a gente salva ó ele já tá quase 100% ajustado ali por último a gente precisa mexer nos ícones então a gente vem aqui coloca ponto ícones tro footer que é a nossa classe ali dos ícones e a gente coloca um display como sendo Flex pra gente usar flexbox um justify content como sendo Center para ele centralizar os itens a gente coloca

um list Style como sendo e um Margin borom como sendo de um R esse list Style é pra gente forçar nenhum tipo de lista a gente não quer Nenhuma estilização nem por bolinha nem por tracinho E se a gente salva ó vamos ver aqui ele já tá mais ou menos do jeito que a gente quer agora falta duas coisas pra gente finalizar 100% mesmo que é o qu a gente tinha colocado a classe fein para ele ter esse efeito aqui ó quando a gente dá o F5 quando a gente atualiza a página ele não tá

com esse efeito aqui por enquanto ó se eu tô atualizando a página ele tá secão então a gente vem aqui ó pra gente fazer esse Efeito primeiro a gente precisa declarar o efeito então aqui a gente utiliza uma palavra chamada keyframes a gente coloca @ keyframes a gente dá o nome da nossa animação no caso vai ser Fade E aí a gente abre Chaves aqui dentro a gente vai descrever como que vai ser essa animação como que a gente quer ela a gente quer primeiro que a opacidade ela parta do zero até o 1 a

opacidade seria o que que a gente tá vendo aqui ó Opacidade zero é como se a gente tivesse vendo o branco então ele começa do Branco até Mostrar o conteúdo então a gente começa da opacidade zero até a opacidade um e ele também tem esse efeito aqui de subindo então ele vai ter aquele efeito que a gente utilizou que é o translate y a gente vai subir o conteúdo então aqui ó como é que a gente faz isso primeiro a gente declara de onde que a gente quer partir então from abre Chaves de onde que

eu quero partir Da opacidade opass z0 e Transform translate Y 20 pixels que que eu tô falando aqui de onde eu quero partir eu quero partir da opacidade zero e eu quero partir do translate Y como sendo de 20 pixels ele vai estar 20 pixels para baixo e para onde que eu quero ir eu coloco aqui o true então eu coloco two abre Chaves eu quero ir paraa opacidade como sendo um ponto e vírgula e eu vou dar o Transform translate Y como sendo de zero e aí ele vai dar esse Efeito de subindo por

último depois de declarar essa animação a gente precisa utilizar ela agora que a gente vai utilizar aquela classe Fade in então a gente vem aqui seleciona ponto Fade traço in e a gente coloca um Animation como sendo aqui a gente vai colocar Qual que é o nome da animação no caso é o Fade que a gente acabou de declarar ela vai ter um segundo e ela vai ter esse efeito aqui ó is out esse aqui é o tipo de animação que a gente vai ter E se a Gente salvar ó e a gente atualizar a

página Lembrando que esse aqui é o pronto esse aqui é o que a gente tá fazendo ele já tem esse efeito aqui por último tem uma coisa que a gente precisa fazer aqui que é o quê aqui nessa barra de navegação ela não tá funcionando ó se eu clicar aqui ele não tá funcionando por vamos vir aqui no nosso HTML ó como que eu faço pra Barra de navegação funcionar eu preciso vir aqui no começo do site na nossa nave ó Eu venho aqui na nossa nave E aí tá vendo que ele tem vários várias

tags a aqui eu preciso colocar para onde que essas tags vão redirecionar Então eu venho aqui e coloco vamos vir nessa primeira tag aqui a gente coloca HF é igual a hh sobre então ele tá redirecionando pro nosso sobre aqui nas Skills vai ser a mesma coisa HF é igual a # Skills no projetos vai ser href é igual a # projetos e no contato vai ser href Igual a #contato E aí agora sim se a gente salvar ó ele vai começar a redirecionar pra gente ó redirecionou pro sobre pras Skills pros projetos e pro

contato por último a última coisa eu acho que é a mais importante do Tut é você postar no Linkedin essa aplicação então disponibiliza isso aqui em algum lugar no github por exemplo eu tenho um vídeo mostrando como é que você hospeda o site eu vou deixar o Card aqui do lado na Descrição também agora é hora de você mostrar esse projeto então espero que você tenha curtido falou