Como criar Portfólio com HTML e CSS - Pt. 04/08 - Sessão Sobre

Olá brother Maker seja bem-vindo a mais um vídeo do intelegia meu nome é Bruno Rodrigues e nesse vídeo a gente vai dar sequência ao nosso projeto do portfólio personalizado já está dividido em muitas partes mas a gente tá tendo sucesso em conseguir concluir esse nosso projeto aqui e nos últimos vídeos a gente já conseguiu criar boa parte aqui do nosso projeto porém ainda falta algumas partes que agora são até mais simples né E vamos ver aqui que é que está faltando pra gente a gente já criou aqui o nosso menu já criamos aqui introdução do

site e também as especialidades agora nesse vídeo a gente vai criar essa sessão sobre aqui tá a gente já vai criar a estrutura e também o CSS dele e também esses botões aqui para as redes sociais e aí vai ficar apenas restando a gente criar essa sessão de portfólio aqui e também o nosso formulário de contato e o rodapé pra gente encerrar esse projeto aqui tá E é claro a gente também vai deixar ele responsivo que eu não sei se eu já mostrei para vocês né mas esse site também ó ele é responsivo deixa eu

diminuir aqui para vocês verem e olha lá esse projeto também ele é responsivo tá vendo aquele tem o menu lateral ele também ó fica toda adaptado para qualquer tamanho de tela a gente vai fazer isso aqui também nesse projeto por isso que você tem que assistir ele até o final se inscrever aqui no canal para você não perder nenhum passo a passo que a gente vai tá dando aqui ok então vamos lá que a gente agora vai criar a sessão sobre mim ou seja sobre a gente como você quiser chamar tá então a primeira coisa

que eu vou fazer é separar essa imagem logo lá dentro da minha pasta de imagens Mas aí você pode colocar uma foto né Tira uma foto legal para colocar aí no seu portfólio também tá então a minha imagem aqui ó já está separada só lembrando que eu não conheço esse cara não sei qual é o nome desse cara e esse aqui também não sou eu tá não sei se você percebeu isso esse aqui eu baixei de um banco de imagens né do pactions eu pesquisei lá simplesmente já foto de um cara sorrindo e Pronto baixei

lá e usei aqui como exemplo no nosso projeto Mas você coloca aí uma foto sua Tira uma foto legal para colocar aí no seu portfólio tá E é o seguinte deixa encolher aqui agora essa sessão especialidades porque agora a gente vai criar uma nova section que vai ter a classe sobre E aí né se você assistiu os últimos vídeos sabe que por padrão dentro de cada section a gente coloca a nossa classe interface e eu chamo assim ó ponto interface que aí ó ela já era uma dívida que possui a classe interface Fechou então agora

vamos dar uma olhada lá como tá o nosso layout para que a gente comece a trabalhar aqui com os elementos do HTML e é o seguinte ó essa é a nossa sessão sobre a gente ela não é diferente né não é muito diferente desse nosso topo aqui a gente já construiu algo nessa pegada né na segunda aula do nosso da nossa série aqui de curso aí no portfólio só que a diferença aqui a imagem aqui no topo tá do lado direito Enquanto aqui a imagem tá do lado esquerdo e não possui aquele efeito flutuante né

uma imagem que está aqui estática só que o texto né o título O parágrafo e os botões aqui são praticamente a mesma coisa ó a diferença que aqui é um botão Só enquanto aqui são três tá por essa razão é que a gente como já criou esse tipo de coisa a gente vai ser um pouco mais ágil para que essa aula aqui não fique muito longa Tá então vamos lá primeiro de tudo como tá todo mundo um do lado do outro né E tá alinhado aqui na imagem eu já deduzo que ela também possui um

display Flex por isso eu vou chamar a minha classe padrão né Flex E aí beleza vamos seguir o mesmo exemplo que a gente usou aqui na nossa sétima topo do site a gente tem aqui uma Dive com o texto do topo do site e também tem outra dívida com a imagem do topo do site só que aqui vai ser diferente eu vou criar aqui uma classe TXT sobre e fora dela também eu vou criar uma nova dívida que vai ter IMG sobre só que aqui ó eu acabei colocando na ordem ao contrário né porque aqui

a nossa imagem ela fica do lado esquerdo Então ela tem que vir primeiro então eu vou tirar essa imagem daqui e vou colocar antes do TXT sobre maravilha então pronto entra aqui da minha classe MG sobre eu já vou colocar a que eu vou usar como minha fotografia né como exemplo que eu tô usando aqui então aqui dentro dessa RC eu aperto o ctrl espaço venho aqui em imagens e seleciono aqui foto ponto png se eu vim aqui agora no meu site Olha lá a minha imagem já está aqui bonitinho da forma que eu quero

agora só faltou a gente adicionar aqui o nosso texto e o nosso texto ele também possui um título né possui um H2 só que esse H2 ele não é igual a esse H2 daqui do título que a gente tá usando nas sessões Então a gente vai ter que criar um estilo único para ele então aqui dentro da classe três sobre eu vou criar um H2 e vou digitar esse texto que tem aqui ó Muito prazer sou Bruno Rodrigues eu vou copiar e vou colar aqui só que Note que aqui no nosso texto a linha tá

quebrada né Muito prazer tá em cima Bruno Rodrigues está embaixo a gente vai fazer isso utilizando spam também tá Então olha só o que que eu vou fazer aqui depois de muito prazer eu vou chamar a tag spam e dentro aqui do spam eu vou colocar esse som Bruno Rodrigues dentro tá pronto Maravilha que aí ó eu posso colocar a cor dele verde e também posso jogar para a linha de baixo fechou e a gente vai fazer isso já já no CSS E aí agora eu vou só criar aqui dois parágrafos e dentro desses parágrafos

vai ter uma breve explicação sobre mim e essa explicação vai ser essa daqui ó prepara um texto super exclusivo que vai descrever quem eu sou aqui ó Loren Y download ficar mas aí você vai criar um texto legal que convence que explique quem você é quanto tempo você tá no mercado se você é iniciante e assim vai monta um texto legal não seja preguiçoso igual a mim não que tá colocando ordens Y tá então aqui ó eu vou criar dois parágrafos ó eu queria outro parágrafo aqui eu quero só dois parágrafos maravilha aí dentro aqui

do P eu vou criar agora um outro Lar em Y que vai explicar quem sou eu e ó aqui no meu site já tá aqui tudo criado bonitinho Tá vendo só agora chegou a hora de a gente trabalhar com CSS para deixar bem parecido com esse daqui só que antes a gente avançar eu quero te pedir para você se inscrever aqui no canal essa daqui já é o nosso quarto vídeo dessa série que a gente está criando esse projeto aqui personalizado né de um portfólio personalizado e se tu me disser que tu não tá gostando

desse projeto aqui pelo amor de Deus cara então faz o seguinte se você não está inscrito se inscreve aqui no canal tá na próxima semana isso é se já não saiu aí no canal a gente vai estar dando sequência a esse projeto aqui então é muito importante que você se inscreva e também Ative o Sininho de notificações para ser notificado sempre que sair vídeo novo porque além desse projeto nós temos outros projetos aqui dentro do canal E é claro eu também quero te convidar que se você tiver interesse para participar do clube de membros aqui

do canal e apoiar o projeto do intelegia você pode estar clicando no botão seja membro para saber mais informações Ok então é isso vamos dar sequência aqui porque agora a gente vai aplicar o CSS na nossa sessão sobre e como a gente está trabalhando em CSS dividido por blocos Eu já comentei aqui ó estilo do sobre Porque a gente já começar a estilizar da forma que a gente quer por padrão a gente tem aqui uma classe em Nossa section então vou copiar aqui essa classe sobre vou chamar section e vou chamar a classe dela que

é sobre sem espaço tá E aí também vou colocar aqui um pad de 40 pixels 4 por cento ou seja 40 pixels em cima e embaixo e 4% do lado esquerdo e do lado direito né porque aí quando a tela for um pouco menor se ela diminui o tamanho da tela o texto né as informações não vão ficar colando nas laterais você vai ter sempre um respiro por isso que eu coloco esse 4% aqui e descendo aqui na nossa HTML a gente tem aqui a nossa imagem porém a minha imagem aqui no meu caso ela

entra num tamanho legal na minha opinião ela já está aqui legalzinha tamanho tá massa não perder proporção não tá com baixa qualidade por enquanto eu não vou mexer nela se eu sentir necessidade de mexer mais para frente eu vou lá e mexo então eu já vou partir logo aqui ó para estilizar esse texto Tá bom então vamos lá eu vou chamar aqui a minha classe TXT sobre ponto sobre ponto TXT sobre beleza para que fique bem específico onde trabalhando e eu já vou dizer logo de cara que todo o texto que tem dentro da minha

classe deixa de ter sobre possui uma cor branca eu vou chamar aqui ó Cola #ffe porque aí eu fica todo mundo branco eu já consigo enxergar uma coisa interessante aqui ó o nosso texto ele tá alinhado com a parte de cima da nossa imagem e eu quero que ela fique alinhada aqui ó no meio da nossa imagem tá e que também tem um respiro porque você tá vendo que tá muito colado Bora corrigir isso daqui a gente tem aqui a nossa classe Flex tá vendo que por padrão ela já vem com display Flex então a

única coisa que a gente vai fazer é estilizar para que ela ganhe esse respiro e esse alinhamento melhor então para isso eu vou fazer o seguinte eu vou chamar aqui novamente a section que possui esse sobre aqui né a classe sobre e dentro dessa classe sobre ela possui a classe Flex aí eu posso estilizada da forma que eu quiser como por exemplo aplicando uma lá Center e um GAP ou seja um respiro e pelo menos 60 pixels opa pixels e o ponto e vírgula aqui que aí ó ele já alinhou aqui a horizontalmente e também

já tem esse respiro entre a imagem e o texto tá por isso é que eu criei essa classe Flex porque a gente consegue aplicar alguns estilos mais específicos a depender da necessidade de cada sessão e elas também ficam tudo alinhadinhas e lá como a gente tiver trabalhando com o responsivo vai ser muito mais fácil de a gente conseguir manipular esses elementos Ok então maravilha agora vamos mexer aqui nesse nosso título aqui né porque como a gente tem aqui no projeto original muito prazer tá em cima e sobre Bruno Rodrigues está embaixo na cor verde como

é que a gente faz isso eu vou chamar aqui novamente o nosso TXT sobre né vou colar aqui embaixo e eu vou chamar o H2 que tem dentro dele vou aumentar o tamanho da fonte Vou colocar aqui pelo menos uma fonte de 60 pixels um desses pequenos tamanho legal ó cadê não ficou muito grande então eu vou diminuir aqui ó pra 40 pixels beleza eu acho que aqui já tá num tamanho legal e agora o que eu vou fazer é jogar esse spam para parte de baixo dessa linha mas como é que eu faço isso

é muito simples ó o spam ele é um elemento online level ou seja ele vai ficar sempre na mesma linha e eu quero converter ele para o elemento Block level para que ele fique sempre na linha de baixo e só aí de sequência ao conteúdo e para fazer isso é muito simples eu vou copiar novamente essa linha de comando aqui onde eu chamei o H2 e dentro do H2 tem o spam e a primeira coisa que eu vou fazer é mudar a cor dele Eu vou dizer que o Cola é verde Olha lá ó ele

já mexeu aqui na cor do nosso elemento e agora é só jogar para a linha de baixo e para jogar para a linha de baixo basta dizer que spam tem um display Block que aí ó ele já jogou para além de baixo eu vou só diminuir aqui agora a distância entre linhas que tá muito longa eu vou colocar aqui no H2 tá sem ser o estilo do Spa vou aplicar online de 40 pixels que aí ó ele já fica bem bonitinho aqui um próximo do outro agora também vou colocar uma distância desse título para esses

parágrafos aqui eu vou vir aqui no H2 eu colocar o margem embora de 20 pixels vamos ver aqui ó ainda vou dar uma metadinha vou colocar mais 10 pelo menos 30 pixels E aí ó ele já ganha uma distância legal Muito massa né e agora para finalizar eu vou só aumentar aqui ó a distância entre esses parágrafos aqui e também dá uma estilizada nele então o que que eu vou fazer eu vou chamar novamente esse sobre ponto TXT sobre e agora eu vou chamar o p que tem dentro dele então o que que eu vou

fazer primeira coisa que eu vou inserir aqui é um margem em cima e embaixo vai ter 10 pixels e nessa laterais Zero Só que aí eu acho que ficou uma distância muito pequena vou dar uma entradinha vou colocar mais 20 pixels que aí ó eu acho que já fica de uma distância legal E além disso eu também vou deixar nosso texto justificado para que ele não fique ó com essa quebra de linha aqui tá vendo ó que tem essa quebra um pouco chatinha deixa o texto feio Então vou vir aqui no p e vou chamar

o text online justify dessa forma aqui que aí ó ele já fica todo justificado e o texto fica mais apresentado que restou Foi criar os botões da rede social isso aqui é muito fácil de fazer aqui dentro ainda do HTML dentro da classe testes T sobre eu vou vir aqui embaixo desse parágrafo e vou criar uma nova dica essa dívida vai ter uma classe e a classe vai ser apenas btn social ok Aí você coloca a classe que você quiser dentro desse btn social eu vou adicionar três tags a ou seja três tags de link

por enquanto eu vou deixar vazia e eu vou só vir aqui e vou criar mais duas tags de link né a tag Ah e deixando sempre vazia dentro dessas três tags eu vou adicionar um botão ou seja tag Button Então vou chamar aqui ó botão e vou copiar esse botão está aqui ó e vou colar nas tags a de baixo e dentro desses botões aqui o conteúdo desses botões eu vou colocar os ícones das redes sociais e esses ícones das redes sociais eu pego aqui da biblioteca do Bootstrap como a gente já tem instalado aqui

no nosso código a gente não precisa instalar de novo a primeira rede social que eu vou procurar Instagram então aqui ó vou pegar logo do Instagram vou copiar aqui no clipboard e vou colar aqui dentro do botão beleza e aí que agora o segundo eu vou colocar o do YouTube vou voltar aqui Pesquisar por YouTube que aí ele já me dá aqui ao longo do YouTube copiar e vou colar aqui embaixo e essa última rede social aqui eu vou colocar do LinkedIn Edinha e pronto LinkedIn vou copiar aqui e vou colar aqui embaixo maravilha você

vem aqui agora no meu site ó os botões ele já estão até um do ladinho do outro tá vendo porque eles estão dentro da ta guiar e até guiar Como eu disse antes ela é inline level elas ficam um do lado do outro sempre agora que a gente vai fazer é só estilizar como esses botões aqui possuem um estilo diferente né ele é redondo né mais específico do que esse daqui a gente vai fazer então da seguinte forma eu vou chamar aqui novamente a classe sobre ponto TXT sobre eu vou chamar a Dive que tem

dentro dela né a classe que é btn social vou dar um control c e vou colar aqui btn social dentro da btn social a gente tem o botão e é aí que a gente começa a fazer utilização Primeira coisa eu vou dizer que o índice desses nossos elementos é 60 pixels e que o right do buton também é 60 pixels que aí ele vai criar um quadrado perfeito Tá vendo só agora a gente vai deixar eles redondos e para deixar redondos eu vou chamar aqui o border radios e vou dizer que a 50% ou se

você preferir pode ser 30 pixels né a metade do IF e do right que aí eles ficam um círculo perfeito então aqui ó 50%. a gente pode ver aqui eles já estão redondinhos agora a gente vai tirar essa borda vou tirar aqui o border dizer que é zero ou não você escreve como quiser aí tá Também vou mudar a cor de fundo o background color vai ser verde Olha lá e agora vou só aumentar o tamanho dos ícones através do fonte size vou dizer que é 20 pixels deixa ele aqui agora Acho que dá para

dar uma aumentadinha ainda mais vou colocar aqui 30 pixels Vamos ver acho que ficou muito grande agora eu vou diminuir aqui para 5 pixels vou colocar ainda menos 22 pixels que aí eu acho que já ficou de um tamanho legal também só agora eu vou só colocar aqui ó cursor põe E aí quando passamos por cima ele já vira aquele dedinho Só faltou mesmo a gente aplicar esse efeito quando passamos por cima ele meio que ganha esse sombreado e esse Zoom então o que que a gente vai fazer para aplicar para isso uma coisa também

que eu tô reparando Antes de a gente aplicar o efeito é que eles estão muito colados Então vou dar uma melhorada nisso daqui ó através do margem em cima embaixo vai ser zero e nas laterais vai ser apenas 10 pixels que aí ele já ficam bem distanciados Tá vendo só vou só diminuir um pouco a distância Vou colocar aqui algo em torno de oito pixels Eu acho que já fica melhor não colocar cinco pizzas vai pronto aí acho que já ficou um pouco melhor e agora para aplicar aquele efeito de sombreado né que fica verde

em volta e para dar aquele Zoom aumentar a escala a gente vai trabalhar com esse mesmo elemento aqui ó que a gente aplicou lá no Hover do nosso menu lembra quando a gente criou o menu a gente criou o botão de contato a gente colocou esse efeito Então a gente vai tirar esse elemento daqui de dentro do Bloco do header e vai colocar aqui dentro do Bloco das estilizações Gerais vou vir aqui e colar aqui embaixo o efeito ainda vai funcionar normalmente porém agora o que que eu vou fazer eu vou tirar ó essa classe

btn contato daqui porque eu quero que todos os buttons do meu site tem esse mesmo efeito né do box Shadow que fica verde em volta e que também aumenta a escala então se eu vir aqui ó todos os meus botões aqui de contato esse de entre em contato e também das redes sociais eles vão possuir esse mesmo efeito porque agora ele ficou geral não tá mais exclusivo de nenhuma classe e para que ele não fique muito seco né quando eu passo mais por cima ele só aumenta de tamanho Bora aplicar uma transição para ele aqui

ó vou aplicar um transition de ponto dois segundos e aí quando passa mais por cima ele já fica mais suave aí agora só que restou é você colocar o redirecionamento que você quiser para essas redes coloca o link de seu LinkedIn do YouTube e do Instagram e personaliza quantas redes sociais você tiver aqui ok uma coisinha que eu quero só corrigir aqui eu tô achando que essa minha sessão de sobre tá muito colada aqui com minhas especialidades eu vou só aumentar aqui ó vou aumentar o padding de cadeia aqui do sobre de 40 para 80

pixels que aí eu acho que já vai ficar bem distanciado e vai ficar com respiro melhor então com isso aqui feito a gente já concluiu a nossa sessão sobre aí se você quiser estilizar mais alguma coisinha fique à vontade tá então espero que você tenha gostado de criar essa sessão até aqui no próximo vídeo a gente vai trabalhar com o nosso portfólio esse efeito de rolagem quando passa o mouse por cima ele meio que rola automaticamente eu Já ensinei a criar aqui no canal né é o efeito de rolagem com hoover se você quiser assistir

o link está aparecendo aqui no iCard e se você também quiser já aplicar por conta própria fique à vontade mas na próxima aula né No próximo vídeo A gente vai estar trabalhando nessa sessão aqui para estar utilizando tudo isso aqui Ok eu espero que você tenha gostado e se você quiser acompanhar mais vídeos como esse aqui no intelegia você pode estar se inscrevendo e ativando o Sininho de notificações e não esquece de deixar o like nesse vídeo para mim mostrar que você quer mais projetos como esse agora na tela tá aparecendo mais dois vídeos para

você tá acompanhando maratonando aqui no intelegia ou a Playlist em que você consegue assistir todos os vídeos dessa série desse portfólio Ok eu me despeço por aqui mas eu te vejo no próximo vídeo falando programa Maker tchau