O objetivo do projeto era criar um formulario utilizando HTML e CSS.
HTML
Então criei um header para colocar as informaçoes do cabeçalho. Criei uma div para criar os "botoes" no header utilizando 3 tags a e adicionei as informações dentro delas.
Após isso criei a main, onde seria o corpo do meu portifolio, onde também com divs criei cada tópico exigido no site.
Em contatos, criei o formulário de e-mail utilizando label e input para que a pessoa que desejasse entrar em contato por e-mail, possa colocar as informaçoes e escrever uma mensagem.
E criei um footer, onde resolvi não adicionar informações.
CSS
Ja primeira linha, já deixei por padrão a fonte que gostaria de utilizar no trabalho
BODY
No CSS resolvi começar com a tag body, para definir o padrao do corpo do portifolio, colocando a fonte que eu gostaria de usar no site e as cores do fundo e da fonte e retirando a margem que vem prédefinida.
A{
Na tag A, defini a cor padrao que eu queria para os elementos do cabeçalho e aumentei o tamanho da fonte delas.
A-2 a-2 é uma div criada para estilizar as informaçoes do header, entao nela criei um fundo na cor preta e quando é colocado o mouse em cima mude de cor para branco e deixei uma transiçao que na hora que o mouse chega em cima.
por isso defini a largura, defini a distancia do conteudo da bora com o padding, adicionei as transiçoes para que as cores do header possa ficar na cor branca de uma forma mais suave e separei os elementos utilizando o justify content.
Adicionei também um background color para a cor preta, entao toda vez que o mouse entra na sessao ou no topico que a pessoa deseja, o fundo fica preto e com as letras brancas
.HEADER-CONTAINER
Aqui seria o corpo do meu trabalho, defini a altura e a largura, adicionei a imagem usando background-image, no repeat para nao duplicar a imagem, entao após isso defini onde quero deixar a imagem que era de forma centralizada.
h1
Em h1 defini o tamanho da fonte das letras do site, usei upercase para deixar a fonter em maiuscula e deixei um espaçamento entre as letras em 4px
h2 Apenas usei text align para centralizar o que foi escrito
Nos próximos tópicos que sao "Sobre Mim" "Intereesses" e "Contatos" em todos os topicos utilizei as mesmas configuraçoes, pois quis que estres sessoes criadas, tivessem os mesmos efeitos visuais.
Então defini o tipo de diplay a largura e o a direção que gostaria de colocar as informaçoes, defini o tamanho da fonte e centralizei as informações, criei um paddin para definir a distancia das informaçoes para a borda e um tamanho minimo, também defini o tamanho das bordas e centralizei os itens e criei uma transição para mudar as cores para preto quando o cursor do mouse atingir a sessão atual. Nos tres elementos, também criei um hover para fazer a mudança de cor dos elementos e do fundo.
FOOTER
No footer apenas defini a altura e uma cor de fundo no final da pagina.