Como criar Portfólio com HTML e CSS - Pt. 01/08 - Menu do site

vai lá para Game Maker seja bem-vinda a mais um vídeo do intelegia meu nome é Bruno Rodrigues e nesse vídeo né e nos próximos eu quero te ensinar a criar uma página de portfólio personalizadas Se liga só como é que ficou esse projeto eu tenho aqui né esse site desenvolvido inteiramente com HTML e com CS ele possui algumas funcionalidades que podem ser muito úteis para você que quer Criar o seu site de portfólio para poder já começar a prospectar algum serviço sabe Então olha só quem a gente tem a página inicial onde a gente faz uma pequena frase né Para dar aquela introdução já de impacto temos aqui as nossas especialidades né as habilidades que a gente tem para que a gente possa estar criando Tem um aqui também um sobre né que fala sobre a gente obviamente que esse aqui não sou eu eu baixei essa imagem de um banco de imagens né as nossas redes sociais temos também o nosso portfólio onde a gente pode colocar os projetos que quiser e ainda por cima tem um efeito de rolagem Que Eu Já ensinei a criar aqui no canal Mas além disso a gente também vai colocar esse over que mostra o nome do projeto Tá vendo só que massa rolando aqui mais embaixo ó nós temos aqui um formulário de contato que você pode personalizar da forma que quiser e também o nosso rodapé é uma página simples mas que vai quebrar bastante o galho para você que já quer começar a entrar de vez nesse mundo do desenvolvimento web é ótimo também para praticar e pegar umas ideias Tá bom então vem comigo que no caminho eu te explico como criar uma página de portfólio personalizada bom então manda massa já estou aqui no visual Studio code né e eu vou pegar desde o início para que a gente comece a fazer o desenvolvimento do site é importante que você crie uma pasta única para esse projeto tá dentro dessa pasta vamos contar algumas imagens que a gente vai pegando aos poucos mas é lá dentro onde vai ficar o projeto principal que a gente vai criar agora OK então já vou começar aqui ó criando o meu index. html e aqui no index HTML para eu criar a estrutura base do HTML eu vou apenas digitar o sinal de exclamação e apertar enter que aí ó ele já vai gerar a estrutura da HTML5 para mim já vou fazer algumas mudanças por exemplo aqui o Lang eu vou colocar aqui é português brasileiro né pt br E aqui no documento eu vou colocar apenas o nome né da do meu portfólio porque eu quero colocar lá no meu caso eu vou chamar de agência BRM brn para você que não sabe é Bruno sem as vogais e pronto por enquanto a gente vai deixar o HTML assim então agora a gente vai analisar a estrutura que a gente vai fazer para que a gente já comece a se encontrar vou voltar aqui no meu projeto original e hoje eu vou começar trabalhando aqui com esse cabeçalho eu já vejo logo de cara que esse cabeçalho é dividido em três partes Onde fica logo Onde fica o menu e onde fica esse botão de contato né para ter um destaque melhor então a gente vai fazer o seguinte a gente vai criar um reader né a nossa tag header e vai dividir ela em três partes e vai trabalhar com display Flex nela para que elas fiquem bem alinhadinhas assim OK então olha só como é que a gente vai fazer aqui dentro do meu Body eu vou chamar a tag header e aqui dentro da tag header eu vou adicionar uma tag que vai limitar as laterais do meu site porque se você prestar atenção ó Note que o meu site né as laterais dos elementos eles não encostam do lado esquerdo e do lado direito não ficam coladas ela sempre tem um respiro Então a gente vai criar né esses limites através de uma dívida que vai ter uma classe específica Então vou criar aqui a minha Dive ponto interface Aí você coloca a classe que você quiser eu vou utilizar interface e por costume né Por boas práticas eu sempre comento aonde essa tag se fecha dessa forma aqui aí aqui eu já sei que aqui essa dívida essa barra diver serve para fechar a classe interface aí você pode estar fazendo isso também para você não se perder no código porque esse código aqui é um pouquinho grande um pouco diferente do que a gente já criou aqui no canal Beleza depois que eu criei a interface chegou a hora de trabalhar com a logo então eu vou chamar a classe ponto logo né Se eu colocar sua ponto e o nome da classe ela já cria uma dívida para mim e aqui dentro dessa divlogo eu vou colocar o meu logotipo e por padrão né geralmente a logo que fica no menu sempre que a gente clica em cima dela ela volta para a página inicial do nosso site então eu vou colocar aqui uma tag de link né a tag a que eu vou deixar vazia por enquanto mas dentro dessa tag a eu vou chamar a tag IMG porque aí eu vou chamar a imagem da logo né onde é que ela se encontra aí beleza eu tô aqui agora dentro da pasta do meu projeto né porque eu vou criar a pasta onde vou ficar as imagens do meu projeto então eu vou fazer o seguinte eu vou clicar com o botão direito vem novo e vou criar uma nova pasta essa pasta vai se chamar images em inglês aí dentro dela eu vou colocar a imagem que eu quero utilizar como logo do meu site que vai ser essa daqui ok Aí você coloca logo o que você quiser aí de volta aqui no meu código né dentro desse src eu vou apertar contra o espaço e vou vir aqui na pasta de imagens e eu vou selecionar aqui a minha logo. png aqui o texto alternativo vou colocar apenas logo da agência BRM e pronto depois da minha logo né configurada Eu agora vou criar um menu e esse menu vai ficar dentro da tag Neve então eu vou aqui a tag né de navegação eu vou dar uma classe para ela também a classe dela vai ser menu desktop porque a gente também vai deixar esse nosso portfólio responsivo tá então por isso que eu já tô atribuindo essa classe minuto desktop porque lá na frente a gente vai ter a classe menu mobile Mas isso é mais para frente ok e pronto dentro aqui da minha tag Neve eu vou chamar uma ueli das listas não ordenadas e dentro dessas weas eu vou chamar os itens da lista né através da tag Li é aqui dentro da li eu vou adicionar a tag a né de link aonde vai ficar direcionada os links do meu menu vou deixar vazio por enquanto e o conteúdo do meu link vai ser o nome das sessões do meu site né porque se eu voltar aqui ó eu tenho aqui início especialidades sobre e projeto Então vamos criar eles aqui agora início vou copiar aqui ó e vou colar aqui embaixo mais quatro vezes e aí ó início especialidades sobre e projetos aí fora da tag Neve eu vou criar o meu botão de contato Então vou criar aqui uma dívida e ponto btn contato e dentro aqui dessa minha classe btn contato eu vou colocar um botão dentro também de uma tag de link né porque é tudo link aí dentro dessa tag eu vou chamar um botão e o conteúdo desse botão vai ser apenas contato com isso aqui feito o nosso cabeçalho né estrutura do HTML já está pronta agora chegou a hora de a gente ver como tá ficando E aí aplicar o CSS então eu vou abrir aqui o meu site né com o Live server para eu ver em tempo real como ele tá ficando ó e olha lá tá igualzinho né da forma que a gente quer então o que que a gente vai fazer agora a gente vai aplicar o CSS nele para que ele fique de Fato né da forma que a gente quer que fique só que antes a gente aplicar o CSS eu quero te pedir para você se inscrever aqui no canal se você gostou da ideia desse projeto Com certeza você vai querer concluir ele né para usar para você para algum outro cliente enfim para exibir o seu portfólio então não custa nada se inscreve aqui no canal para estar acompanhando essa Saga e também ativa o Sininho de notificações para ser notificado sempre que sair vídeo novo tá então vamos lá vamos dar sequência porque agora a gente vai trabalhar com CSS aqui no nosso projeto eu vou voltar aqui no meu código e eu vou fazer o link de CSS com meu HTML então eu vou vir aqui no meu rede ok Não confunda com reader tem que ser aqui no Rider Onde ficam os metadados do meu site eu vou chamar a tag link não é a tag a é a tag link aí enquanto eu tô digitando o link eu vou colocar aqui dois pontos CSS que aí vai criar a minha tag automaticamente que vai linkar meu CSS com HTML e o meu arquivo de CSS ainda não está criado eu vou criar ele agora então eu vou apertar a tecla Ctrl e vou clicar aqui em cima do nome do meu arquivo de CSS ele vai dizer que esse arquivo não existe mas eu quero criar o arquivo aí aqui dentro a gente já pode começar a estilizar o nosso projeto primeira coisa que eu vou fazer é aplicar umas configurações Gerais vou começar resetando o documento e aplicar o background né do Body né vai ficar todo preto Então vamos lá para o resultado do documento eu tenho que chamar aqui a seletor do asterisco que serve para aplicar para todos os elementos do meu site eu vou dizer que ele possui uma margem zero impedem também Zero e um box sizen border box para que eles fiquem todos dentro da mesma borda da Caixa tranquilo e eu também vou aplicar uma estilização para o bares então eu vou chamar aqui a tag Buddy eu vou dizer que o background color dele é preto totalmente preto e que também por padrão a altura padrão dele vai ser um Raid de 100 VH que aí ele toma todo espaço da nossa tela dentro aqui no meu site a gente já pode ver que já está tudo funcionando outra coisa também que a gente vai mexer a gente tem que ver ó que nossas elementos estão colados aqui na lateral do site tá vendo eu não quero isso por isso é que a gente criou a nossa classe de interface porque ela serve para limitar até onde vai ficar os limites do meu site Então vou dar aqui um Ctrl C vou voltar aqui no meu style.

s vou chamar a minha classe interface eu vou dizer que ela vai ter a seguinte configuração vai ter um Max weather ou seja uma largura máxima de 1. 280 pixels e que o margem dela vai ser zero alta porque ela vai ficar centralizada na nossa tela Se eu vir aqui agora olha lá ele já estão afastados da lateral do meu site agora a gente já pode partir para estilizar o nosso reader e para manter o meu CSS mais organizado eu vou trabalhar por bloco tá ou seja vai ter o bloco das estilizações Gerais né que pode ser aplicado para vários elementos também vão ter as estilizações do reader né do cabeçalho vai ter estilização do topo do site das especialidades E assim a gente vai dividindo por bloco e para eu me organizar eu vou comentando cada bloco desse esse primeiro bloco aqui é o estilo geral e agora como eu vou estilizar o reader né o cabeçalho aí eu vou fazer um comentário aqui no CSS né apertando contra o ponto e vírgula tá que aí ele gera o comentário para a gente e esse aqui vai ser o estilo do cabeçalho aí eu recomendo que você faça a mesma coisa para se manter organizado tá Primeira coisa eu vou chamar o reader eu vou control c e vou dar um control V aqui eu vou dar uma afastada dele ó daqui de cima porque ele também tá muito colado aqui em cima então eu vou aplicar um padding vou dizer que o pads dele é de 40 pixels em cima embaixo e para que ele não fique muito colado nas laterais eu também vou colocar 4% na esquerda e na direita que aí ele vai ficar meio distanciado né quando a gente diminuiu o tamanho da tela ele não vai colar Então agora eu vou colocar um elemento um do lado do outro e para isso eu vou trabalhar com display Flex aplicado na classe pai dos nossos elementos que seria no caso a classe interface não pode ser no header porque senão não vai funcionar Então vou pegar aqui né A minha classe interface vou vir aqui no estilo do cabeçalho só que eu não vou aplicar diretamente o display Flex na classe interface porque senão vai interferir nos outros elementos mais embaixo que não precisam ter um display Flex por isso eu vou trabalhar da seguinte forma eu vou chamar novamente o reader e eu vou chamar a classe que está diretamente dentro da classe Rider com maior que aqui que aí ele vai procurar os elementos que possuam a classe interface dentro do reader se tiver outra classe interface por exemplo aqui dentro da tag neve aí não vai funcionar tem que ser diretamente a classe que está dentro da tag header se tiver dentro de qualquer outra tag esse estilo aqui que a gente vai aplicar não vai funcionar por isso você tem que colocar esse sinal de maior que é aqui então agora eu vou abrir e fechar as chaves e eu vou dizer o seguinte vou dizer que ele possui um display Flex uma lineiden Center e injustify competit Space batwing porque aí eles vão ficar o máximo possível distante um do outro tá vendo como ele já ficaram bem organizados aqui aí agora eu vou fazer o seguinte eu vou personalizar a fonte dos meus elementos Porque eles estão com as fontes padrões né time New Roman e essa aqui se eu não me engano é Areal a gente vai trocar agora essas fontes e para a gente personalizar as fontes no nosso site Eu vou acessar aqui o Google phones né que é um arsenal de fontes aqui que você pode estar escolhendo qualquer uma para aplica no seu projeto a fonte que eu vou utilizar nesse projeto em específico vai ser a pop Então vou vir aqui na caixa de busca e vou pesquisar pela pop aqui tá vendo e aí vou fazer o seguinte ela vai apresentar uma família de fontes Tá vendo só tem várias variedades aqui o que eu vou fazer eu vou selecionar uma por uma porque eu quero ter uma variedade de fontes no meu projeto então basta eu clicar nesses botões aqui ó select regular 400 de pele esse daqui ó select assim vai se você não quiser nenhuma dessas Fontes aqui né basta você clica aqui em remover dessa forma que aí eles seleciona aí eu vou clicar aqui e beleza já selecionei toda a família de fonte Agora eu tenho que instalar né o Google phone sei lá no meu código então agora a gente vai fazer o seguinte você vai clicar ó nesse item aqui que tem três quadradinhos com sinal de adição eu vou clicar aqui em cima e ele abriu a bandejinha aqui ó que mostra as seleção das fontes que a gente fez e olha só o que que você vai fazer eu tô aqui em cima né minha webcam tá aqui em cima mas acho que dá para você entender aqui ó ele gerou esse código aqui ok esse link de html que a gente vai fazer instalação lá no nosso código E você vai fazer o seguinte você vai copiar esse código aqui ó você vai clicar nesse botão aqui nesse clipe board ele Já copiou E aí você vai voltar aqui no seu site né vai vir aqui no HTML e aqui no hit você vai colar isso que você acabou de copiar para que você não se perca eu vou fazer um comentário vou dizer que esse daqui ó é o código do Google fontes e eu também vou dizer onde é que ele termina fim Google fontes e aqui entre esse comentário eu vou instalar a fonte que eu acabei de copiar Tá vendo só e agora para fazer ele funcionar de fato no nosso site eu tenho que copiar regra de CSS para instalar lá no CSS então ó eu vou vir aqui tá vendo que aqui onde eu tô bem aqui em cima tá vendo tem esse código fonte Family pop você também vai copiar ele também tem um clipboard você vai clicar aqui em cima aí você vai voltar aqui no seu CSS e vai vir aqui ó onde tem Esse asterisco E vai colar isso que você acabou de copiar aí com isso aqui feito ó se eu voltar aqui no meu site todas as fontes já estão instaladas da forma que eu quero agora a gente vai fazer o seguinte eu vou colocar esses elementos um do lado do outro né esses links aqui e também vou utilizar o botão de contato e a gente vai parar esse vídeo por aqui tá para que ele não fique muito longo e cansativo a primeira coisa que eu vou fazer é mudar a cor dessa fonte né porque ela tá meio roxa ó ela tá roxinha aí não dá para enxergar direito eu vou colocar agora a cor branca Então vou chamar aqui o meu reader e eu vou chamar todos os links que tem dentro dele Ah então vou fazer assim ó header Ah eu vou dizer que o Collor dele é branco FF que aí ó todos os links vocês vão mudar de cor e por padrão mas o hélice elas vêm com uma bolinha sabe uma bolinha uma embaixo da outra para dizer que aquilo é uma lista e a gente vai remover essas bolinhas agora e colocar esses elementos um do lado do outro né esses links aqui e para fazer isso vou vir aqui no meu CSS vou chamar novamente aqui minha tag reader vai dizer que a gente tá trabalhando dentro do líder vou chamar então da tag Neve e também a o l que tem dentro dela vou dizer que o list Style Type and None você não vai ver porque o fundo do site está preto e as bolinhas é preto mas ela já assumiram daqui tá aí a partir disso eu também vou chamar agora as li Então vou copiar esse comando que eu acabei de dar aqui em cima vou colar aqui embaixo só que agora eu vou chamar a l. i ou seja vou chamar a tag neve que tá dentro do reader que também tem uma web E aí eu vou dizer que o display delas é inline Block quando eu voltar aqui no meu site ela já estão uma do ladinho da outra e agora vou só colocar um espaçamento entre elas né eu vou vir aqui e vou colocar um pezinho esse pezinho vou colocar de zero em cima embaixo só que na esquerda direita será de 40 pixels Aí você olha aqui agora ele já estão bem espaçados porém Note que eles estão com esse sublinhados aqui e eu vou tirar eles agora então eu vou vir aqui onde apliquei uma cor para a tag a eu vou dizer que o tex da dela é 9 que aí ele já sumiram daqui tá vendo só agora só restou aplicar um estilo aqui para o nosso botão de contato então eu vou fazer o seguinte ó Qual é o nome da classe e aqui ó btn contato eu vou copiar aqui a minha classe vou vir aqui em baixo chamar tag reader e também eu vou chamar a minha classe btn em contato que está dentro do reader tá E além da classe Eu também tem que chamar o botão para aplicar as estilos para ele então para começar o que que eu preciso fazer primeiro eu vou dar um espaçamento dentro dele né porque ele tá muito colado aqui nas laterais então eu vou dizer que ele possui um padding de 10 pixels em cima embaixo e nas laterais será de 40 Pixel olha aqui agora ele já tá com espaçamento Legal vamos entrar também tem muita fonte né vou colocar uma fonte de 18 pixels então Fontes sais de 18 pixels eu também vou aumentar o peso da fonte né vou chamar a propriedade fonte eu vou dizer que ele é 700 e olha lá tá aí a fonte agora já está mais pesadinha Bora mudar também a cor do fundo desse botão Porque aqui não é original é verde e também anotei né que a fonte aqui é mais leve né tão pesada assim então eu vou reduzir aqui de 700 para 600 e agora eu vou colocar aqui um background color na cor verde né que é essa cozinha que eu utilizei aqui nesse nosso botão e o código dessa cor verde ó é esse aqui ó 00ff 08 aí você escolhe né a cor que você quiser usar para aplicar para o seu site ó que aí ele já aplicou aqui o efeito só que se você forçar bem os olhos você vai perceber que ele tem uma borda essa borda deixa o botão feio né que é por padrão então bora tirar essa borda daqui vou colocar um border zero para que ele não tenha nenhuma borda eu também vou deixar essas bordinhas arredondadas vou colocar um border radios de 30 pixels aí agora se eu botar aqui no meu site ó o efeito já está aplicado porém agora eu quero que o cursor vire um dedinho quando passa Mouse por cima assim como acontece com os links Então bora fazer esse aqui agora vou colocar aqui ó cursor põe aí a partir de agora ele já tá com o efeito aplicado E com isso aqui ó a gente já tem parte do nosso cabeçalho montado porém Note que a gente também tem alguns efeitos que a gente pode estar aplicando aqui o nosso menu Note que a fonte né é um pouco mais escura e quando eu passo o mouse por cima tá vendo que ela fica mais clarinha e da tipo um zoom a mesma coisa acontece nesse botão aqui ó tá vendo eu passo o mouse por cima ele meio que ganha um sombreado bora fazer isso aqui agora para finalizar o nosso cabeçalho então para começo de conversa eu vou reduzir a tonalidade de cor né a tonalidade de branco do nosso link Então vou voltar aqui onde tem o reader a vou passar mais aqui em cima e vou deixar ele um pouco mais escuro bem próximo aqui do preto ó 7D 7D 7D se eu botar aqui agora a fonte já tá mais escura se você quiser escurecer Ainda mais você pode eu vou deixar aqui um pouquinho mais escura que aí dá um estilo melhor tá vendo ele já ficou mais escuro aí agora como é que eu faço para deixar ele Claro muito simples eu vou com a perna que essa declaração aqui ó Rider Ah vou vir aqui embaixo e vou colar aqui embaixo tá vou aplicar dois pontos Ou seja quando os Vale passar o mouse por cima vai acontecer alguma coisa tá a primeira coisa que vai acontecer é colocar uma cor mais clara né então vou chamar aqui o Cola #ff beleza e aí quando eu passamos por cima ele já fica mais clarinho Tá vendo só e para dar o zoom eu vou chamar a propriedade transforme então eu vou vir aqui ó transforme ainda dentro do Hover tá Vou chamar também o valor da propriedade scale eu vou dizer que ele vai aumentar 1.

05 tá bem pouquinho mesmo porque o scale é bem ignorante se você colocar aqui por exemplo dois ele já vai dar um zoom absurdo na sua cara tá E aí depois que eu apliquei esse Transformer eu posso vir aqui agora no meu site ó eu vou ver que o zoom não funcionou Bruno Por que que não tá funcionando muito simples essa propriedade transforme ela só funciona para itens para elementos que são Block level e o link ele é inline level ou seja o link ele não possui algumas propriedades para que a gente consiga aplicar essas propriedades no link a gente precisa converter o link para Block level ou para inline Block tá então vou vir aqui em cima onde eu utilizei a minha tag de link né dentro do líder eu vou dizer que ele possui um display online Block que ele vai ter ainda as propriedades do My Line mas também vai ter as propriedades do Block e se eu botar aqui agora no meu site agora ele já está dando Zoom tá vendo ó eu vou deixar bem ignorante aqui para você perceber ó deixar aqui com dois por exemplo quando eu passar mal por cima olha lá tá vendo ó já tá aplicando o efeito muito massa né E aí também eu posso colocar uma transition para que ele fique mais suave porque se eu passar mais aqui por cima ele vem no seco ele já cresce assim no seco logo na sua cara eu vou colocar uma transição para que ele fique mais suave tá então eu vou chamar aqui a propriedade transition eu vou dizer que o tempo que vai levar para concluir a transição é de ponto dois segundos se eu botar aqui agora no site Olha lá ó agora ele já cresce mais suavemente muito massa isso daqui né eu vou só tirar esse skate de dois vou colocar de novo 1.