Site de portfólio usando projeto HTML CSS

1. Introdução do projeto de site de portfólio: Sejam todos bem-vindos ao curso completo do site de portfólio usando HTML e CSS. Portanto, este curso consiste em dois módulos. No primeiro modelo, veremos como criar nosso site de portfólio usando HH TML e CSS com seções diferentes, como seção inicial, seção A e seção de contato No segundo modelo, veremos como implantar nosso projeto usando o site da Netfi Portanto, este curso é muito, muito útil para iniciantes que estão tentando criar um site de portfólio usando HTML e CSS pela primeira vez. Além disso, você precisa se familiarizar com Netlify para implantar sites Então, vamos começar. 2. Curso de portfólio 1: introdução ao HTML CSS: Vamos, pessoal, antes de ir para o projeto, vamos discutir sobre o que é HTML e CSS Primeiro, vamos discutir sobre HHDML. Portanto, você precisa conhecer o formulário completo para HTML. Portanto, o formulário completo nada mais é do que uma linguagem de marcação de hipertexto Portanto, o HTML é uma linguagem padrão que pode ser útil para criar a estrutura do site Então, se quisermos criar qualquer site, primeiro você precisa entender HTML. E então os iniciantes podem entender facilmente HTML porque a sintaxe é muito, muito simples em comparação com outras linguagens de programação Então esse é o terceiro ponto. Então, depois de dominar o HTML, você pode estudar sobre CSS e JavaScript para criar seu projeto. Então essa é a introdução simples ao HTML. Então, depois disso, vamos discutir sobre a sintaxe HTML. Portanto, o HTML contém elementos e tags. Portanto, os elementos nada mais são do que a cabeça, o corpo, o HTML. Então, esses são todos os elementos. E então as tags nada mais são tag de abertura e , em seguida, uma tag de fechamento. Então, essa é a sintaxe para abrir a tag. Então essa é a sintaxe para fechar a tag. Portanto, o HTML contém elementos e tags. Então, essa é a sintaxe simples para HTML. Primeiro, você deve criar uma tag HTML. Então você deve digitar a etiqueta principal. Dentro da tag principal, você precisa digitar o título do seu site. Assim, eu posso digitar o tutorial em HTML. Você pode digitar o nome do seu próprio site. Depois disso, você deve fechar a etiqueta principal. Então você tem que abrir a etiqueta corporal. Dentro da tag body, podemos digitar nosso próprio conteúdo. Então, depois disso, você precisa fechar a tag body e, em seguida, fechar a tag HTML. Então, essa é a sintaxe simples para HTML. Então, atributos não são nada, mas são como propriedades. Por exemplo, a imagem contém propriedades como altura e largura. Então esses são os atributos. Portanto, os atributos não são nada, mas são informações adicionais sobre o elemento. Então, o elemento não tem nada além de parágrafo, corpo, cabeça. Então, esses são todos os elementos. Então, depois disso, discutiremos sobre os elementos e tags do Hah DML Há muitas tags em HTML, mas vamos discutir sobre tags importantes. Então, a primeira será a tag de cabeçalho. Portanto, há seis etiquetas de cabeçalho, como escotilha um, escotilha, dois, hachura três, escotilha quatro, escotilha cinco, escotilha seis, então haverá seis Os tamanhos serão diferentes em cada cabeçalho. Depois disso, você pode ver o parágrafo. Então, se você quiser criar qualquer parágrafo, qualquer frase, você pode usar a tag de parágrafo. E então você pode ver a tag da imagem. Então, imagem, se você quiser inserir qualquer imagem de fundo de imagem para o seu site, você pode usar a tag de imagem. E então você pode ver a tag Link. Então, se você quiser vincular qualquer site em seu próprio site, você pode usar a tag Link. Então, essas são todas as tags importantes. Então, existem muitas tags, você tem que entender isso. Então, agora vamos discutir sobre o que é CSS. Então CSS significa folha de estilo em cascata. Então, se você quiser criar a estrutura do site, você deve usar HTML Se você quiser criar o design do site, você deve usar CSS. Portanto, o design pode ser leve, alterando a cor do fundo alterando a cor da fonte ou alterando o tamanho da fonte. Esse será o design do site. Portanto, existem três tipos de CSS CSS embutido, CSS externo e CSS interno Para o nosso projeto, vamos usar CSS externo. Então, agora vamos discutir sobre a sintaxe CSS e como criar CSS externo e incluir o CSS externo dentro do nosso arquivo HTML Então, para isso, você precisa criar o arquivo HTML. Você pode digitar seu próprio nome de arquivo HTML. Depois disso, você precisa digitar os elementos básicos no HTML. Então, você precisa digitar a tag HTML, tag de cabeçalho e, em seguida, fechar a tag de cabeçalho e, em seguida, criar a tag de parágrafo da tag de corpo e, em seguida, a tag HTML. Então, se você quiser incluir seu arquivo CSS externo dentro do HTML, você deve usar o link, então dentro da tag de cabeçalho, você tem que digitar link tag. E então você tem que digitar os atributos como relés e iguais ao estilo st e, em seguida, referenciar igual E então você precisa vincular o nome do arquivo CSS externo. Portanto, o CSS de pontos de estilo será nosso CSS externo. Então essa é a sintaxe para incluir o CSS externo dentro do nosso HTML Então, depois disso, você precisa criar o arquivo CSS externo. Então você tem que criar um novo arquivo, e então você tem que digitar o mesmo nome, você tem que digitar o mesmo nome. Isso é tile dot CSS. E então, dentro disso, você pode digitar os estilos. Se você quiser alterar a cor de fundo ou alterar a altura e a largura da imagem do vídeo, você pode digitar seu próprio estilo no CSS externo. Então essa é a sintaxe. Então, depois disso, vamos discutir sobre algumas das propriedades CSS. Então, o primeiro será o estilo da fonte. Portanto, se você quiser alterar sua família de fontes, tamanho ou espessura da fonte, seja em itálico e negrito, esses podem ser os estilos de fonte E então você pode ver a segunda propriedade, que é a cor. Portanto, se você quiser alterar a cor do plano de fundo, a cor da imagem ou a cor da borda, use as propriedades da cor. E então você pode ver a terceira opção, que é o layout. Portanto, se você quiser alterar a mesclagem dos preenchimentos nas bordas do seu site, você pode usar as propriedades do layout Portanto, essas são as propriedades simples em CSS, mas há muitas propriedades que você deve entender. Então, agora vamos discutir sobre quais são todas as oportunidades de trabalho que você pode criar ao aprender HTML e CSS. Portanto, se você aprender HTML e CSS, poderá se tornar um desenvolvedor front-end ou um designer rex. Portanto, há muitas oportunidades de emprego quando você aprende HTML e CSS. Então é isso, pessoal, concluímos com sucesso nossa introdução ao HTML e CSS. Agora podemos criar nosso site de portfólio. 3. Curso de portfólio 2: executando HTML CSS no VScode: Sejam todos bem-vindos à primeira aula. Na aula de hoje, discutiremos sobre como criar um site de portfólio usando HTML, CSS e Netlifi Para o primeiro, temos que criar uma pasta para o nosso projeto. Então, depois de criar a pasta para o site do seu portfólio, você precisa abrir essa pasta usando o código VS ou qualquer outro IDE para HTML e CSS. Para o básico, precisamos usar o código VS em nosso site de portfólio. Então, depois de abrir seu código VS, você precisa criar um novo arquivo para o HTML Portanto, para criar o novo arquivo, você deve selecionar Controle e criar o novo arquivo, selecionar o idioma. Então, vamos digitar HTML. Então você tem que digitar HTML. Então, depois disso, você tem que salvar seu arquivo, você tem que digitar Control. E então você pode digitar seu próprio nome de arquivo. Vou digitar o HTML do ponto de índice. Para o básico, vamos digitar index dot HTML. Portanto, você precisa salvar o arquivo e ver o arquivo HTML de ponto de índice criado. Então, depois disso, vamos criar um arquivo CSS também. Então, em seguida, você deve digitar o nome do arquivo CSS. Então, vamos digitar style dot CSS. Então, criamos dois arquivos HTML e CSS. Portanto, o HTML é muito, muito útil para o corpo e a estrutura do site, e então o CSS é posteriormente projetado Portanto, para o site do nosso portfólio, precisamos copiar nossa foto do perfil e colar na pasta do site do nosso portfólio. Então, para isso, criei minha foto de perfil para o site do meu portfólio e, em seguida, vou copiar e colar no meu portfólio. Pasta do projeto. E então você pode renomear seu PNG R JPG, o que quiser Então você tem que copiar e colar sua imagem. Então, vamos usar ícones para o nosso projeto. Para isso, vamos usar ícones de caixa. Então você tem que abrir o link. Portanto, os ícones da caixa contêm todos os ícones do nosso projeto, como Facebook, YouTube, Instagram, todos os ícones serão gerados nos ícones da caixa. Portanto, você precisa selecionar o UCH, portanto, para nosso HTML e CSS, temos que selecionar uSHe e, em seguida, você pode ver o código para o uso de HTML, então você precisa rolar para baixo Então você tem que copiar este link para o seu projeto. Então você tem que copiar esse link, e então você tem que colar esse link em seu HTML Então, vamos copiar isso. Então, antes de copiar e colar nossos ícones de caixa, vamos digitar os elementos básicos do HTML. Então, primeiro, vamos digitar o tipo HTML. Então, isso é comum em HTML, você precisa digitar o tipo doc. Então essa é a tag, e então você pode digitar o idioma inglês. O idioma HTML será o inglês. Você pode digitar russo. Se você quiser russo, você também pode usar o russo ou qualquer outro idioma. Eu vou usar o inglês. E então etiqueta de cabeça. Então, dentro do tipo de cabeçalho, vou digitar o título do meu projeto. Então você tem que usar a tag de título. Então você tem que digitar o título, então dentro dele, você tem que digitar seu portfólio. Assim, você pode digitar seu próprio nome. Então, vou digitar portfólio. Então, depois disso, você tem que copiar e colar esse link. Então você tem que copiar e colar o link CSS. Então você tem que copiar e colar dentro da etiqueta principal. Portanto, você deve se lembrar de que precisa copiar e colar dentro da etiqueta principal. Então, depois disso, vou digitar meu arquivo CSS. Então, vou vincular meu arquivo CSS para esse tipo de oto. Relação de link igual à folha de estilo. Portanto, o atributo será uma folha de estilo de relação. E então você tem que digitar a referência. Portanto, a referência será style dot CSS. Esse é o nome do seu arquivo CSS. Então, esses são todos os links que podem ser usados para nosso projeto de portfólio. Então é isso. Na aula de hoje, falaremos sobre os conceitos básicos de HTML e CSSI para nosso site de portfólio Na próxima aula, criaremos nosso site de portfólio, como página inicial, página Sobre e página de contato. Então, vamos ver na próxima aula. 4. Curso de portfólio 3: crie uma barra de navegação: todos bem-vindos. Na aula de hoje, discutiremos sobre como criar uma barra de navegação para site do nosso portfólio usando HTML e CSS. Então, antes disso, veremos um exemplo de como executar nosso projeto no site. E então você deve selecionar Abrir com o Live Server. Assim, você pode ver que seu servidor foi iniciado na porta 5.500 e também pode ver o host local e seguida, seu arquivo HTML, ponto de índice HTML Então essa é a maneira de executar nossa produção no site. Então, para isso, você precisa baixar uma extensão digitar Live server no código VS. Então você tem que digitar Live server, e então você tem que selecionar o primeiro link para que haja muitos links, você deve selecionar primeiro o link. E então você precisa instalar o servidor ativo para o seu código HTML do VS. Então, somente depois disso, você pode ver sua produção no site. Então, para isso, você deve selecionar abrir com servidor ativo. Então esse é o conceito de executar nosso projeto no site. Então, depois disso, vamos criar nossos elementos corporais para nosso HTML. Então você tem que digitar body tag. Dentro da tag body, vamos criar uma nova seção ou classe de cabeçalho. Você tem que digitar head there tag, e então vamos criar uma classe. Então, dentro da citação, você tem que digitar o nome da classe, cabeçalho e depois fechar a tag Você precisa se lembrar da etiqueta de fechamento e da etiqueta de abertura. Então, dentro disso, vamos criar uma tag âncora. Portanto, a âncora é usada como link. Portanto, HadUFHDOF nada mais é do que relação ou referência. E então vamos criar uma classe que é logotipo. Logotipo para nosso portfólio. Em seguida, criaremos uma tag de extensão para o nome do logotipo. Então, para o nome, vou usar meu nome completo Run. Então, vou usar meu nome Run. Então, depois disso, vou criar uma barra de navegação para meu portfólio. Para isso, você precisa criar um Nav e, em seguida, o nome da classe será nav bar Então, dentro da barra de navegação, vamos criar uma tag âncora Portanto, o Hutufy tem para a mesma classe de página igual classe ativa para nossa barra de navegação de portfólio Então, vou digitar portfólio. Então, o portfólio estará ativo. E então vou criar outra tag âncora para os links, como seção inicial, seção A, projeto, contato Para o básico, vou criar apenas quatro seções. Se quiser mais, você pode usar mais opções. Então, vou digitar A e depois vou digitar contato. Então, essas são as três seções que vamos criar para o site do nosso portfólio. Então, se você quiser mais seções, você também pode criar isso. Além disso, você pode usar projetos, educação, certificações ou qualquer outro portfólio que possa usar Então, a barra de navegação está completa. Vamos criar um botão para o contato. Então, temos que digitar HatUFPAs entrará em contato. Vamos criar um contato para entrar em contato comigo. Por isso, será considerado como um botão de contato. Então, se eu executar o código, você poderá ver o código gerado automaticamente em seu site HTML. Então, vamos projetar nosso HTML usando o estilo de pontos CSS, então Hach t é para a estrutura, CSS é para o design Portanto, digite esse código como padrão, e você também precisa se lembrar da sintaxe Primeiro, a margem será zero e o preenchimento também será zero Não haverá margem nem preenchimento, e o tamanho da caixa será uma caixa de borda E então a família de fontes será SNSerif pop ins. Você também pode usar sua fonte. Haverá momentos em que o Roman Aerial SNSerif será novo. Se muitas outras famílias de fontes, você poderá usar sua própria E então a decoração do texto será Nne. Portanto, decoração de texto, como cruz sublinhada, não haverá decoração de texto E então o estilo de lista também não é nenhum. Então, liste o estilo, como sublinhado. Então, se eu digitar nenhum, ele removerá automaticamente todo o estilo da lista. Assim, você pode ver o sublinhado ser removido. Então, esses são todos os padrões. Então, depois disso, vamos criar um design para cada classe. Então, primeiro vamos criar uma classe para Head There. Então, dentro disso, você tem que digitar. Dot head ali. Portanto, a sintaxe é para a classe é dot head there. Então, o nome da turma está lá. E depois colchetes encaracolados. Dentro disso, você deve digitar que a posição será fixa porque a barra de navegação será fixa. Então, a cabeça até lá está concluída. Então, dentro da cabeça , podemos ver os elementos como tag âncora, classe de navegação e, em seguida, botão Então, vamos projetar um por um. Então você tem que abrir a classe CSS novamente. Vamos digitar que o topo será zero e, em seguida, esquerdo será zero. E depois a largura. Então, a largura será de 100 por cento. O preenchimento será de 35 pixels e 12 por cento, superior e inferior direito e esquerdo E depois a cor do plano de fundo. Então, vamos criar cores com RGBA, então vermelho, verde, azul e Alpha Você precisa digitar o valor para quatro elementos. Então, primeiro, vou para o tempo zero, zero, para o verde, também vou para o tempo zero. Então, vou precisar da ajuda da cor preta para esse único R zero. Se eu cronometrar 0,2, será considerado como cor preta. E então vamos precisar da ajuda do filtro coletor de sacos. Está embaçado. Vamos precisar da opção de desfoque Então, dentro do colchete, você tem que digitar o pixel de dez pixels E então precisaremos da ajuda do display, que será um bloco ou fluxo em linha O que você quiser, você pode usar isso. Vou precisar da ajuda do Flux. Para flex, você precisa digitar, justificar que o conteúdo será o centro. Um espaço entre. Se você quiser espaço entre seus elementos, você pode digitar espaço entre eles. Então, vou digitar um espaço entre. Então, espaço entre portfólio sobre projeto e contato. Os itens de alinhamento estarão no centro. Portanto, todos os itens estarão na posição central. Portanto, o índice Leste é como uma pilha de elementos. Então, 100. Então, esse é todo o design da nossa seção de cabeçalho. Então, se eu executar esse código, você pode ver que nosso design é gerado automaticamente para nosso HTML. Então esse é o design da nossa barra de navegação. Então, depois disso, vamos criar nossa classe de logotipo para digitar o logotipo de pontos. E então vamos digitar os desenhos do logotipo. Então, primeiro, vamos usar o tamanho da fonte. Assim, você pode digitar seu próprio tamanho de fonte. Vou usar 25 pixels e depois colorir. Então, a cor será branca. Então, vou usar a cor branca. Depois disso, vou usar a espessura da fonte. Seja em negrito ou itálico, você pode usar a espessura da fonte 600 será considerada uma opção ousada. Assim, você pode ver a espessura da fonte e depois as transições. Portanto, é uma das opções gráficas. Então eu vou digitar que três pontos é E. Então você tem que lembrar o que é E, o que é E dentro e depois o que está dentro e fora. Então, eu tenho que lembrar o conceito de E para que você possa ver os gráficos como Run, você pode ver no elemento Run, você pode ver que a transição 0.3 é Es. Então Es nada mais é do que uma opção de câmera lenta. Portanto, o movimento será lento. Então, concluímos nosso logotipo, então esse é o Run. Então, o logotipo nada mais é do que Run. Então, depois disso, vamos criar o logotipo com o Hover Então Her nada mais é do que uma pseudo classe. Você precisa se lembrar do que é a pseudoclasse. Então Her não é nada, mas se tocarmos no elemento, ele gerará um novo design. Então esse é o uso do Hover. Primeiro, vou digitar a cor. Então, se eu mudar a cor para R segurado, então o branco será alterado para R inside Se eu mover meu cursor em direção ao Run, a cor branca será alterada para R incred E então envie uma mensagem de texto para Shadow. Então você pode usar duas sombras. O primeiro é o texto Sado e o segundo será a sombra da caixa. Para o RN, é um texto. Só para isso estamos usando o texto sado. Então, podemos digitar zero, zero, 25 pixels, R e Crate. A sombra do meu texto ficará vermelha. Então, depois disso, vamos usar transformar como usar a opção de escala também. Então você tem que digitar dentro do colchete, você tem que digitar o valor que é 1,1 Portanto, para os iniciantes, você precisa entender que a opção de escala nada mais é do que opções de ampliar e diminuir o zoom, como aumentar e diminuir o zoom Assim, você pode ver que o design Her é gerado em nosso HTML. Então, o branco é alterado para Ngute e também com a opção de escala 1.1 Então você pode ver que dá mais beleza ao nosso projeto. Então esse é o uso do Hover. Então, se você não a quer, você também pode excluir isso. Então Texas Sado também Net. Você pode ver o Sado of Run com o pixel e depois se transformar. Então esse é o uso de H. Então, depois disso, vamos projetar. Então, depois disso, vou criar a tag span, então span tag. Então, dentro da tag span, vou usar meu nome completo com ICL, então RLRS Então esse é o meu ICL, então vou inserir esse RS na tag span Então, vou colorir minha etiqueta de extensão com vermelho RN ou você pode digitar branco ou preto, o que quiser Então você pode ver RnRg com branco. Então esse é o uso da tag Span. Então, a cor da minha inicial e também do meu nome completo foi alterada. Então foi aí que foi completada a tag span. Depois disso, vamos projetar nossa barra de navegação, para que você possa ver a barra de navegação da classe Então, vamos projetar isso para que, dentro disso, você possa ver os links. Também podemos projetar isso. Então, primeiro, vamos usar a barra de navegação. Então N bar é uma classe. Você precisa usar a barra de pontos N e, em seguida, A será o link. Então esse é o link A, e então vamos projetar nossos links. Então, primeiro, para que você possa ver que o código do VS está sugerindo o código. Portanto, você também pode confiar no código VS. Então, eu vou mudar o pixel. Ok, está bom. Eu vou mudar isso às 15. Ok. Não é ruim. Então, vou alterar o tamanho da fonte para 15 pixels e, em seguida, a cor será branca, ou você poderá digitar suas próprias cores. Vou digitar branco. Você pode ver a mudança da cor e, em seguida, dizer, a espessura da fonte, para poder ver a espessura da fonte. Portanto, há muitas opções de peso de fonte. Você pode escolher qualquer um deles, 500, 600 em negrito e itálico. Você pode digitar sua própria espessura de fonte. Vou digitar a opção Margin. Assim, você pode digitar de cima para baixo, para a esquerda e para a direita. Ou duas opções do OptoNST nada mais são do que superior e inferior direito e esquerdo Então você pode ver a lacuna entre os elementos. Então, isso dá um futuro mais elegante para o nosso projeto. Depois disso, vamos digitar bot ou bottom. Então, temos que digitar três pixels, sólido, transparente. Completamos a borda inferior do nosso projeto e, em seguida, usaremos a transição. Novamente, vou usar os segundos de três pontos, segundos es. Então você pode ver a transição do meu elemento. Então, se eu salvar e executar o projeto, você poderá ver a transição. Então é isso. E então vamos digitar O para minha barra de navegação. Então, se eu tocar nisso, você pode ver algum design. Então, só para isso vamos usar os quatro. Então, devemos usar O para elementos ativos e, em seguida, elementos não ativos também. Somente para isso, vamos usar um ponto acima e depois N barra A ponto ativo. Então, dentro disso, vamos projetar. Então, vou digitar a cor laranja vermelha. E então contorne a parte inferior novamente, vou amarrar três pixels ou dois pixels que você pode amarrar. Vou amarrar um vermelho laranja sólido de três pixels. Assim, você pode ver que a cor do elemento ativo foi alterada para portfólio de branco para vermelho alaranjado. Portanto, o portfólio é meu elemento ativo na barra de navegação. Assim, você pode ver o sublinhado das minhas quatro propriedades, além de alterar a cor de branco para vermelho alaranjado Então, concluímos nosso projeto para a barra N A. Então, depois disso, vamos projetar para o contato. Então, isso também pertence à seção de cabeçalho. Então, vou digitar contact dot contact. Então essa é a aula. Então, vou digitar o design para meu contato. Vou criar um botão como contato. Portanto, para o botão como contato, você precisa digitar primeiro o preenchimento, dez pixels, 20 pixels, superior e inferior direito e esquerdo E depois a cor do plano de fundo. Então eu vou digitar branco. Então parece um botão. É por isso que você precisa usar a cor de fundo. Depois disso, você precisa usar o raio da borda para poder digitar o raio da borda ou a cor da fonte Portanto, se você digitar preto, fonte será alterada para preto. Então você pode ver, entre em contato comigo se a cor da fonte foi alterada para preto. E então eu vou digitar borda de dois pixels sólida transparente. Então, depois disso, vou digitar o tamanho da fonte. Assim, você pode digitar seu próprio tamanho de fonte. Então, vou digitar dez ou 16 pixels. E então vou digitar o raio da borda. Então, vou digitar oito pixels, 20 pixels. Se eu digitar 20 pixels, você pode ver mais cores. Então, se eu digitar dez pixels, você pode ver menos quantidade de curva. Portanto, com base em seu próprio design, você pode digitar o raio da borda Se você quiser mais círculos de Spar val, você tem que aumentar o pixel Se você quiser um quadrado ou retângulo, precisará digitar menos quantidade de pixels E então espaçamento entre letras entre cada letra C espaço O espaço NT Então esse é o uso do espaçamento entre letras. Então, para digitar o pixel em menor quantidade. Se você digitar 20 pixels, C estará à esquerda e O estará à direita. É por isso que você precisa digitar menos quantidade de pixels. Então, um pixel é suficiente para entrar em contato comigo. E então o peso da fonte ficará em negrito. Então, se você quiser mais negrito, você tem que digitar 600. Então você pode ver, entre em contato comigo, a espessura foi alterada. Então, depois disso, vou usar a transição. Então, se você quiser outras transições, precisará usá-las Então, vou usar a opção as novamente. Se eu salvar a execução do código, você poderá ver a transição. Então, esses são todos os designs de contato. Então, depois disso, vou usar a opção Her novamente para o contato. Então, vou digitar contato. Então, contato é a classe, e depois Ela é uma pseudoclasse, vou digitar primeiro a cor de fundo Portanto, a cor de fundo será alterada para vermelho alaranjado e, em seguida, para a sombra da caixa. Então, na seção anterior, eu disse que existem dois tipos de tom do SADOF, o texto sado e o segundo é a caixa Então entre em contato comigo na caixa, então é por isso que estamos usando a caixa sado. Então Sado será laranja e a cor da fonte será branca. Então você pode ver a mudança de design na minha página de contato. Então, se você quiser qualquer outra cor, pode usá-la. Então, com base no meu portfólio, estou usando laranja, vermelho e branco. Se você quiser roxo, pode usar roxo. Então é isso, pessoal. Na aula de hoje, discutiremos sobre como criar a barra de navegação do site do nosso portfólio. Então, na próxima aula, criaremos as seções do nosso site de portfólio sobre contato. Então, vamos ver na próxima aula. 5. Portefólio Aula 4: página inicial: Bem-vindos, pessoal. Na aula de hoje, discutiremos sobre como projetar nossa seção inicial para o site do nosso portfólio. Para isso, vamos criar uma nova seção dentro da casa da turma. Então essa será a seção inicial nosso site de portfólio. Então, como abrir e fechar a tag da seção. Então, dentro disso, vamos digitar os elementos HTML para nossa seção inicial. Então, primeiro, vamos criar um conteúdo doméstico para a classe. Então esse é o atalho para criar o DV, então você precisa digitar o conteúdo inicial do nome da classe de pontos Portanto, nossa aula será de conteúdo de espuma. Então, depois disso, vamos criar uma tag HH de três que é um título, então eu vou digitar Hi ou o, você pode digitar seu próprio título Então, vou digitar meu nome. Então, para isso, vou usar a tag H one. Então você tem que digitar IM Eu vou digitar IM, você pode digitar suas próprias palavras. Então eu vou usar a tag span. RN RS. Então esse é meu nome completo. Então, vou digitar Spantank como meu nome completo. E depois faça uma pausa. Se você quiser uma pausa, você pode usar a opção de pausa. Então, vou digitar minha profissão, para que você possa digitar sua própria profissão no site do seu portfólio. Então, vou digitar Analista de cibersegurança. Então, depois disso, vou digitar o parágrafo. Para o parágrafo comum, você deve usar a nota baixa. Portanto, se você digitar low um, ele gerará automaticamente algum parágrafo no código VS. Portanto, este será nosso parágrafo padrão para nossa seção de biografia. Então, se você quiser, digite seu próprio parágrafo para sua biografia. Então, vou digitar o parágrafo comum para criar um novo botão, currículo ou arquivo CV. Então, vou criar um botão para baixar meu currículo ou currículo. Portanto, para o portfólio, ele deve conter um currículo. Então, só para isso, vou criar um botão para baixar meu currículo. E a classe do botão será o botão um. Então, estará na seção One Div. Então, eu vou criar uma nova classe para o meu projeto. Vou digitar a imagem. Então, a imagem é para o site do meu portfólio. Portanto, você precisa inserir sua imagem na pasta do projeto. E então vou inserir minha imagem no HTML. Portanto, você deve se lembrar dessa tag que é a fonte da imagem e, em seguida, digitar o nome da imagem home dot PNG. Portanto, ele contém a foto do meu portfólio. Assim, você pode ver que sua imagem é gerada em seu site. E então você pode ver também o botão de download do arquivo CV. Então, esses são todos os fatores que precisaremos para nossa seção Com. Depois disso, discutiremos sobre como criar nossa seção Com para nosso site de portfólio usando o CSS. Então você tem que abrir o CSS, vamos projetar um por um. Então, espuma. Então essa é a aula. Então, a aula inicial para nossa casa. Então, para isso, vamos projetar um por um. Então, vou digitar que a largura será de 100 por cento e, em seguida, a altura. Então, se você quiser altura, você pode usar altura ou altura mínima. Vou usar a altura mínima de 100 VH. Toda vez que você precisa salvar seu arquivo , você precisa salvá-lo toda vez. Depois disso, vou mudar meu plano de fundo, você tem que digitar o RGB Não vou usar RGBA, vou usar RGB Portanto, haverá três valores. Então, vou usar a opção de exibição, para que fluxo possa ver todas as alterações e, em seguida, alinhar Então, no centro, vou alinhar todos os itens no centro e, em seguida, vou abrir um espaço entre os elementos, então você tem que digitar o valor ou EM ou EM Vou usar EM, para que você possa ver a lacuna entre os elementos. E depois preenchimento, então preenchimento, vou digitar superior e inferior com um pixel esfarrapado, à esquerda e à direita com uma Então, o preenchimento está concluído. Então é isso. Então é isso. Completamos o código da nossa seção inicial. Então, depois disso, vamos criar um design para o conteúdo doméstico. Então, o conteúdo será como Hutch três, cada um parágrafo. Então, esses são todos os conteúdos entre nossa aula em casa. Então, vamos ver como criar o conteúdo do nosso site de portfólio. Portanto, você precisa digitar o conteúdo inicial e, em seguida maximizar a largura do conteúdo, 800 pixels. Então, vamos criar designs para elementos de conteúdo doméstico. Então, a primeira será de três tags, então cabeçalho três. Então, como usar esses três elementos. Você precisa digitar o tamanho da fonte do seu elemento. Se você quiser um tamanho mais amplo ou mais alto, toque em um tamanho maior Então você pode ver que não é adequado para o meu projeto. Se você quiser um tamanho grande, pode usá-lo. E então o conteúdo doméstico H one. Então, cada um será Eu sou meu nome de usuário e depois minha profissão Portanto, se você quiser alterar o tamanho da fonte, precisará digitar o tamanho da fonte. Portanto, não é adequado. Então, eu vou mudar. Portanto, é um dos maiores, então vou mudar para um menor. Então eu vou digitar 32. Então você pode ver que é adequado para o meu portfólio. Então Hutch 1 e Hach 3 estão concluídos. Então, se você quiser linhas altas, você também pode usar a altura da linha 1,2. Então, Hach um e três estão concluídos. Então, depois disso, vamos criar o parágrafo para nosso conteúdo doméstico. Então, vou digitar o tamanho da fonte. O tamanho da fonte será de 18 pixels. Então está tudo bem. E então, se você quiser família fontes ou espessura de fonte, você também pode usar isso. Portanto, a margem entre os elementos para isso, você deve usar a margem para facilitar o parágrafo para cima e para baixo à esquerda. Então você pode ver que é mais elegante para o nosso projeto. Então, vou usar a espessura da fonte. Se quiser mais espessura, você pode usar a espessura da fonte. Então eu vou digitar 500 ou 600. Assim, você não precisa digitar os pixels. Portanto, o peso da fonte não tem nenhuma unidade. Portanto, a largura será de 345 pixels, a tela será flux. E então a lacuna será de dois em Então, depois disso, vamos criar o botão CV. Então, temos que abrir o CSS. Temos que digitar o código do botão. Então, botão um. Então essa é a aula. Então, vamos mudar a cor, o tamanho da fonte, família da fonte, todas as outras opções para o nosso arquivo de currículo. Então, vou digitar preenchimento de 15 pixels, 20 pixels. Então, em cima e em baixo, à esquerda e à direita. Portanto, o preenchimento tem quatro elementos: superior, inferior, direito e esquerdo Então, ele gira no sentido horário, primeiro, superior, segundo, direito, terceiro, inferior, último ficará Portanto, você também precisa se lembrar do conceito. A margem também é igual ao preenchimento superior, inferior, direito e esquerdo. A borda também é igual ao preenchimento superior, inferior, direita e esquerda no sentido horário Então, se você digitar código de linha única também ou código de várias linhas também Portanto, o código de várias linhas será considerado como preenchimento superior, preenchimento inferior, preenchimento à direita e preenchimento à esquerda Assim, você pode digitar em uma única linha. Portanto, uma única linha nada mais é do que 15 pixels e 28 pixels. Então, raio da borda, se você quiser mais curva, você pode usar mais pixels Se você quiser um quadrado ou retângulo, poderá usar menos quantidade de pixels Então, vou digitar o tamanho da fonte. Portanto, a fonte seis terá 18 pixels. Então você pode ver que nosso botão está pronto para nossa seção de perguntas e respostas para baixar nosso currículo E então espaçamento entre letras, se você quiser espaçamento entre letras entre elementos, para que você possa usar menos quantidade de pixels Você não precisa digitar dez pixels ou 100 pixels. Não será conveniente para o nosso botão. Então, projetamos nosso botão quase concluído. Então, vou aumentar a espessura do meu botão, para que possamos ver a espessura 600. Além disso, vou usar gráficos em que a transição 3.3 é de 3 segundos, ou seja, e então o cursor será o ponteiro Então, se você clicar nele, poderá ver que o cursor é um ponteiro. Então, concluímos nosso design para o botão. Então, depois disso, vou digitar hover. Portanto, pairar nada mais é do que uma pseudo classe. Então, vou amarrar a cor do fundo, então branca. E então a cor será preta. Portanto, a cor de fundo é para o plano de fundo. A cor é para a fonte. Portanto, contorne dois pixels sólidos e transparentes. Ok, veja os quatro gráficos. Então, as cores e as fontes são alteradas. Então esses são os quatro do nosso botão. Depois disso, vou mudar o botão para abaixo do parágrafo. Então, para isso, você tem que alterar a soma dos códigos, então você tem que remover esse dado. Então, vou remover esse de, para que você possa ver que o botão está abaixo do parágrafo. Então, ficará mais bonito para o site do meu portfólio. Então, se estiver no centro, não é muito bonito. Só por isso eu mudei o código. Então você pode ver que é mais bonito para o site do meu portfólio. Portanto, nossa seção de comunicação está concluída. Então, depois disso, vamos projetar nossa imagem. Então, vamos criar um design para a imagem. Você precisa digitar a imagem da caixa de imagem do nome da classe. Esse é o elemento, elemento HTML. Então, você precisa digitar o raio da borda para obter mais formato de vogal, digitar mais porcentagem Assim, você pode ver a forma oval da foto do seu portfólio. E depois com 550 pixels. Não, não, é muito maior para o meu portfólio. Então, como mudar os pixels. Então eu vou digitar 450 ou 350. Então eu vou digitar 400. Então 400 também não é 300. Ok, 300 é adequado para o meu portfólio. Então, também vou mudar o raio da borda. Portanto, o raio da borda será de 30 por cento. Portanto, é mais bom para o meu portfólio. Então, depois disso, concluímos a imagem. Vamos criar a opção de rolagem para o nosso site Para isso, você precisa usar o web tit scroller. Então esse é um dos elementos em CSS. Vamos alterar a largura do nosso scroller em 25 pixels Assim, você pode ver que nossa opção de rolagem foi alterada. Vou usar a segunda opção que é o polegar. Vamos mudar a cor do nosso pergaminho, então vou mudar o vermelho alaranjado. Então você pode ver que o branco foi alterado para vermelho alaranjado. E então eu vou usar o whip stick scroller novamente. Vou usar a opção de rastreamento. Eu vou mudar a cor. A cor de fundo será preta ou qualquer outra cor cinza. E então eu vou mudar a largura do meu pergaminho. Pixel gordo. Então você pode ver que o Fatty pixel é adequado para a opção de rolagem Se quiser, você também pode aumentar e diminuir. Então é isso. Na aula de hoje, discutiremos sobre o design de nossa seção inicial. Na próxima aula, vamos projetar nossa seção A. Então, vamos ver na próxima aula. 6. Curso de portfólio 5: página sobre: Bem-vindos, pessoal. Na aula de hoje, vamos criar nossa seção Sobre. Portanto, para o site do nosso portfólio, precisaremos da seção A para nossos biodados, como endereço de e-mail ou qualquer outro detalhe do nosso Então, vamos usar a imagem para o portfólio, seção A, SanguoType dot Image, hífen e, em seguida, vou usar Home ou A Vou usar a imagem para Sobre Então, se você digitar, ele gera automaticamente um mergulho no código VS. Então essa é a especialidade do código VS. E então eu vou usar a tag de imagem para inserir a imagem Você precisa digitar a fonte do atributo e, em seguida, digitar o nome da imagem que é png, home dot PNG. Então, depois disso, vou precisar de alguns parágrafos e, em seguida, de alguns elementos para o meu sobre o exon Então, para isso, vou criar uma próxima aula que é o conteúdo do meu conteúdo. Então, dentro disso, vou criar alguns dos conteúdos. Primeiro, vou criar um título para meu conteúdo sobre. Então, também vou usar a tag span para mim sobre mim. Então, o aquecimento está concluído e, em seguida, usaremos a etiqueta H three para meu nome ou minha profissão. Você pode usar Profissão ou nome, o que quiser na seção acima Vou digitar minha profissão na etiqueta H three. Portanto, você deve se lembrar do conceito de H um, Hh dois, H três, H quatro, Hach cinco e H Portanto, a única diferença é o tamanho dos títulos será diferente E então eu vou usar o parágrafo, o parágrafo padrão que Lam Epsm faz, então esse é o parágrafo padrão Se você digitar low um no código VS, ele gerará automaticamente outras frases. Então, dentro disso, vou usar o link para minha seção acima. Vou criar o botão de classes. Então, vou criar um botão para minha turma. Portanto, dentro da cotação, basta digitar o nome do botão ou o botão do nome da classe Leia mais Então, vou criar um novo botão para Leia mais. Assim, você pode ver que todos os elementos da seção sobre foram concluídos. Em seguida, criaremos nossa seção Sobre. Para que os elementos estejam concluídos agora, vamos projetar isso. Então, para isso, você precisa abrir o CSS. Você tem que digitar o nome da classe about dot dentro do qual eu vou digitar a tela. Portanto, a tela será flexível. Assim, podemos ver tudo mudado. E então justifique o centro de conteúdo. Se você quiser o centro, você pode usar o centro. Se você quiser espaço entre o espaço ao redor, você também pode usá-lo com base em sua própria escolha. Alinhe os itens ao centro, se quiser centralizar, você pode usar o centro, ou você pode usar ou você pode usar a esquerda ou a direita O preenchimento será uma porcentagem informada. Oito por cento, superior e inferior direito e esquerdo. Espaço entre os elementos. Então você tem que cronometrar a lacuna às 10:00 da manhã para que você possa ver a lacuna entre os elementos. para que você possa ver a lacuna entre os elementos E depois a cor de fundo da minha seção sobre. Preto Então, uma seção é concluída, vamos criar os elementos para o conteúdo na seção A. Então, temos que digitar a imagem sobre. Então, primeiro, vamos criar a imagem no A. Então, temos que digitar o mesmo conceito que usamos na seção de formulário. A posição será relativa e, em seguida, a largura 400 pixels E, em seguida, a sombra da caixa será de zero, zero, 26 pixels. Para a imagem, também, você precisa usar a caixa sombra laranja. Se você quiser isso, pode usar o raio da borda. Então eu vou usar 40 por cento ou 37 por cento. Então, será bom para a foto do meu portfólio. Então, nossa imagem está completa. Depois disso, vamos projetar o Hatch one, o Hach de três parágrafos e outros elementos Então, vamos usar cerca classe de conteúdo com elementos como Hutch um ou H dois. Então H dois, tamanho da fonte ou texto, alinhe no centro ou à esquerda E então temos que digitar a cor também. A cor será branca. Então você pode ver a cor branca. Tamanho da fonte, se você quiser aumentar, você deve digitar 43 pixels. Então, 43 pixels é um tamanho maior, eu acho. Então, se você quiser mais, você pode usar isso. E então vamos digitar H três, pois o tamanho do PrefersOnFont será de 50 pixels, e então você terá que digitar a cor Portanto, a cor também é igual ao branco. Então, se você quiser qualquer outra cor, você pode usar cores diferentes. Então, 20 pixels é muito, muito pequeno. Então, um pixel esfarrapado também é bom para o meu H three. Então, depois disso, vamos criar um design para o parágrafo. Então, a cor será branca. E então o tamanho da fonte será 20 Pixari Margin, canto superior inferior, 2:00 A.M. Zero, 3:00 A.M. Zero, 3:00 A.M Então eu posso ver a lacuna entre os elementos. Portanto, é muito bom para o meu parágrafo. Então, vou digitar classe para meu botão, que é o modo de leitura para contato. Assim, esse design será convertido nesse botão do modo de leitura. Então esse é o uso da classe. Então, a classe será usada por todos os elementos. identificador pode ser usado por apenas um elemento, mas a classe pode ser usada por Portanto, esse design será aplicado ao botão Leia-me. Então, anteriormente criamos a seção inicial, agora criamos a seção sobre. Então, na próxima aula, vamos projetar nossa seção de contatos. Então, vamos ver a seguir. 7. Portefólio Aula 6: página de contato: No entanto, todo mundo. Na aula de hoje, criaremos nossa seção de contatos para o site do nosso portfólio. Portanto, para o contato, você precisa se lembrar da tag do formulário em HTML. Então, vamos ver isso. Então, primeiro, vamos criar uma nova seção e, com a classe, isso é contato. Então, formulário de contato. Primeiro, vamos criar a classe H two para o título, entre em contato comigo. Então entre em contato comigo. Portanto, a forma e a ação serão identificadas como a mesma seção. Estará na mesma seção. É por isso que estamos usando as for action e, em seguida, a classe de caixa de entrada. Portanto, temos que digitar a entrada para nossas aulas, como nome de usuário, senha ou e-mail, número de telefone. Então esses são os contatos. Então, primeiro, vamos digitar o texto para o nome e, em seguida, digitar o espaço reservado, inserir o nome ou nome Portanto, a primeira entrada será o nome do usuário. Então você tem que digitar o tipo de entrada Ecltic text. O texto será ABCD. Ou você também pode digitar o número se digitar o número um, dois, três. Ou você também pode digitar e-mail. Para e-mail, você deve digitar o símbolo. Portanto, se você não escrever em n, será considerado um erro. Então é por isso que você tem que digitar t. E então vamos usar a entrada para os botões. Então, vou digitar a turma novamente e, em seguida, vou usar o botão , a área de texto e o número de telefone. Assim, você também pode usar qualquer outra entrada para seu contato. Então, vou digitar o número do telefone. Portanto, se você digitar um número, ele será considerado como valores numéricos. Então, em seguida, vou digitar o assunto. Então, assunto do seu contato. E então temos que digitar a área de texto. Portanto, área de texto, nome, ID e, em seguida, linha e coluna. coluna será 30 e, em seguida, a linha dez. Espaço reservado, insira cada comando ou insira qualquer assunto ou qualquer outro que você quiser ou insira uma mensagem Então esse é o uso da área de texto. Então, depois disso, vamos criar um tipo de entrada para o cume. Portanto, não precisamos criar um botão. Temos que criar uma opção de cume usando a entrada, então você deve digitar o tipo de entrada igual ao cume e, em seguida, o valor de envio da mensagem. Portanto, será considerada a classe de botão BTN hífen um. Portanto, será a mesma classe criada na seção anterior. Esse design será aplicado ao nosso botão de envio de mensagem. Então você pode ver que Haobson também é aplicado. Então, concluímos nossos elementos usando o HTML. Vamos ver o design do nosso contato. Então, vamos abrir o CSS de pontos de estilo para o design. Então, você precisa cronometrar o formulário de contato da turma, o formulário e, em seguida, digitar a largura máxima às 15:00 da manhã e, em seguida, inserir uma RM automaticamente, suas alterações. em seguida, inserir uma RM automaticamente E então o alinhamento do texto será centralizado , alterará automaticamente seu texto para o centro e, em seguida, o banho de margem será às 3:00 da manhã. Então, o formulário será preenchido. Então, o formulário será preenchido Vamos usar os elementos na entrada do formulário. Então, primeiro, vamos usar o Hatch two. Depois disso, estamos usando a entrada. Portanto, o alinhamento do texto estará no centro. Entre em contato comigo no centro. E então a margem entre cima e para baixo e depois para a esquerda e para a direita. Primeiro, estamos usando a parte superior porque a parte superior não é a mesma apenas para isso, estamos usando a parte superior e depois a margem inferior do EM. Então, nosso contato comigo h two está concluído. Então, depois disso, estamos usando a entrada do formulário, design ou usando apenas a caixa de entrada ou entrada. O fluxo de exibição justifica o centro de conteúdo. Se você usa flex, você deve usar justify content Em seguida, alinhe os itens com um envoltório flexível. Portanto, a entrada está concluída. A caixa de entrada está completa. Vamos usar a entrada. Em seguida, envio uma mensagem de texto para a área. Portanto, a largura será de 100 por cento e, em seguida, o preenchimento. 1,5 da manhã. E, em seguida, tamanho da fonte 118 pixels. E, em seguida, cor de fundo preto, RCB 241241, 241, cor RCB 241241, 241, E então raio de borda 0,8 REM. E depois margem. A margem entre os elementos de entrada será de um RM zero E então redimensione Nan para que não haja. Então, depois disso, você pode ver seus elementos serem alterados. Então você tem que digitar um REM. Então, depois disso, você pode ver. Então, a seção de contato é quase Phoenix. Assim, você pode digitar o nome. Então, nome de usuário, o primeiro será o nome do usuário e depois o e-mail e depois o número de telefone. E então assunto, você pode digitar seu próprio assunto. Se você enviar uma mensagem, você pode ver que o símbolo deve estar presente no e-mail. Então você precisa digitar no gmail.com ou em qualquer outro. Então é isso. Completamos nossa seção de contatos perdidos. Então, na próxima aula, vamos criar nossa seção de rodapé Então, no rodapé, podemos ver nossos contatos nas redes sociais. Então, vamos ver na próxima 8. Portefólio Aula 7: página de rodapé: todos bem-vindos. Na aula de hoje, discutiremos nossa seção de rodapé site do nosso portfólio No rodapé segen, veremos sobre os links de mídia social como Instagram, YouTube Para isso, veremos a seção de rodapé, então você precisa criar uma seção de rodapé no HTML com uma classe Footer com uma classe Então, dentro disso, vamos criar o texto para nossos Potas Então, vamos criar os elementos, elementos sociais sociais do DT. Então, para o social, vamos criar links para links, vamos usar a tag âncora, Ashraf E então vamos digitar primeiro, vamos copiar mais de cinco vezes e colar as cinco vezes. Então, dentro disso, você pode digitar seus próprios links de mídia social, YouTube, Instagram, Facebook, o que quiser, você pode digitar. Então, depois disso, vamos criar um link na classe Links que será List LA star f. Vamos criar List, então, dentro disso, vamos usar a tag âncora novamente para o link Então, temos que digitar a lista de nomes como política de privacidade ou direitos autorais ou resposta de custos, e depois serviços e, em seguida, projetos de portfólio doméstico, o que você quiser, você precisa digitar o link Então, depois disso, vamos criar um parágrafo para o nosso rodapé Portanto, com informações de direitos autorais criaremos uma classe para o parágrafo direitos autorais do RRS Então, quase concluímos nossos elementos do pé. Portanto, temos que abrir os ícones da caixa para os ícones do Fore, como os ícones de mídia social. Você precisa copiar e colar um por um em sua classe. Então, primeiro, vamos pesquisar o Facebook, então você precisa digitar Facebook. Então você pode usar o ícone do Facebook. Você precisa selecionar a opção de fonte no ícone da caixa. E então você tem que copiar essa tag, que é a tag I, você tem que copiar isso, e então você tem que colar dentro da sua conta social. E então você tem que copiar um por um. Então, seja qual for a mídia social que você quiser, você precisa copiar e colar dentro da tag âncora com os elementos I. Assim, você pode ver que todos os elementos são gerados. Portanto, nossa seção está quase concluída. Vamos criar nossa seção de rodapé. Portanto, temos que digitar o rodapé do nome da classe e, em seguida, a posição será relativa e seguida, o zero inferior com porcentagem de cem Preenchimento, 40 cores de fundo, rodapé preto, social, então vamos criar os elementos sociais como Link no Facebook O alinhamento do texto será centralizado. Parte inferior acolchoada, 24 pixels. A cor será branca. E então vamos projetar para elementos âncora. O tamanho do formulário será de 24 pixels e, em seguida, a cor será branca Assim, você pode ver que os elementos dos ícones foram alterados para a cor branca. E então a borda será de dois pixels sólidos, vermelho alaranjado. Depois disso, vamos usar o raio da borda para obter mais opções de círculo Antes disso, vamos usar a largura do pixel com altura da linha de altura a altura da linha largura do pixel com altura da linha de altura a altura da linha será de 35 pixels e, em seguida, exibiremos o bloco embutido. largura do pixel com altura da linha de altura a altura da linha será de 35 pixels e, em seguida, exibiremos o bloco embutido. será de 35 pixels e, em seguida, Olha. Se você quiser preenchimento, você também pode usar preenchimento. Vou usar o raio de borda de 30 por cento. 50 por cento serão mais círculos. Porcentagem, 45% será adequada para nosso projeto. Se quiser mais círculos, você pode digitar 50 por cento 60 por cento. Portanto, se você alterar a altura da linha, poderá ver a posição central dos elementos. Portanto, nossos elementos sociais estão quase concluídos. Então, se você quiser sado, você também pode usar o Sado para seus elementos. Então, vou usar o sado 0010 pixel ou inserir. Como você pode ver, sua opção de sado está disponível para seus elementos. E então vamos usar a transição novamente, a opção Es dentro de 0,3 segundos. Então, nossos elementos sociais estão completos. Então, vamos cronometrar o Her para nosso projeto, então passe o mouse sobre os gráficos de nossos elementos sociais Então, vamos usar o Hover. Então você tem que usar Her OpsOnf vamos transformar essa opção de zoom, escala de 1,2 traduzir OEAXs Vaxis nada mais é do que topson vertical. E então a cor será laranja. Brer terá dois pixels, vermelho alaranjado sólido. Então, depois disso, vamos ver o rodapé da lista. Então, primeiro, vamos usar a guia de margem que será zero e, em seguida, o preenchimento, o preenchimento será E então o tamanho da fonte O tamanho da fonte será de 18 pixels. A altura da linha será 1,6. Margem, fundo. Zero. Texto, a linha estará no centro. Assim, você pode ver a posição central. Então, a lista abaixo está completa. Vamos projetar para uma lista abaixo com uma lista. Portanto, temos que digitar a cor branca e, em seguida, a borda inferior será de três pixels, sólida e transparente. E, em seguida, faça a transição novamente 0,3 usos. Depois disso, vamos projetar para a lista. exibição da lista será um bloco embutido e, em seguida, um preenchimento de 0,15 Por fim, concluiremos nossa seção de fotos com o design do parágrafo. Então, a primeira será a margem. A margem será de 15 pixels. Esse é o topo. E então o alinhamento do texto será centralizado Precisa da opção central. A cor, vamos colorir para o nosso parágrafo. Antes disso, vou digitar o pixel da ferramenta de tamanho da fonte. E depois a cor da minha fonte que é branca. Assim, você pode ver a cor da fonte. Se você quiser mais tamanho de fonte, você pode aumentá-lo. Portanto, nosso parágrafo de direitos autorais está concluído. Então, concluímos nossa seção de rodapé. Portanto, nosso projeto está quase concluído. Antes de concluir nosso projeto, precisaremos da ajuda de como mudar nossa seção de uma seção para outra. Se eu clicar em Contato, ele irá para a página de contato. Se eu clicar em Sobre a página, ela irá para a seção acima. Então, para isso, vamos ver o exemplo. Primeiro, temos que criar um ID. Portanto, o ID será o formulário um e, em seguida, você deverá digitar o nome do ID nessa opção. E então vamos criar um ID para a seção A sobre um, e então você tem que digitar o nome sobre um nos elementos Nab A, elementos âncora E então vamos criar um contato, então você deve digitar ID no contato. Então, depois de criar somente o ID, você pode navegar pelos elementos NaBR. Navegação, você precisa usar o ID. Então, se eu clicar em A, ele navegará até a seção A. Se eu clicar em portfólio, ele navegará até o portfólio. Se eu clicar em um contato, ele navegará até a seção de contatos. Assim, você também pode copiar o link para sua mídia social. Portanto, se você tiver algum canal do YouTube, deverá copiar o link desse canal do YouTube e colar dentro da tag âncora Então esse é o uso da tag âncora dentro do link para sua mídia social Então, vou copiar o link de mídia social do meu Gitub e depois colar esse link no meu ícone de mídia social Então você tem que navegar por isso. Então você tem que colar esse link. Dentro da etiqueta de ancoragem. Então, vou colar o link do Git up. Você precisa remover o símbolo HTIC. Então, se eu digitar Get up, você pode ver minha página Gu. Então esse é o uso da etiqueta âncora. Se eu digitar Elemento de destino, esse é o atributo de destino. Em branco, ele vai para a próxima página ou para a nova página. Então esse é o uso do espaço em branco. Se eu selecionar o Github, ele abrirá em uma nova página Se eu digitar self, ele será gerado na mesma página. Então essa é a diferença entre alvo próprio e o alvo em branco. Então é isso, pessoal. Na aula de hoje, discutimos sobre o design de nossa foto shen e também discutimos sobre como inserir o link de nossas mídias sociais Na próxima aula, concluiremos nosso projeto com a implantação de nosso site de portfólio usando o Netlify Então, vamos ver na próxima 9. Portefólio Aula 8: site de hospedagem: Eu, todo mundo. Na aula de hoje, discutiremos sobre como implantar nosso site de portfólio usando o Netlify Para isso, você precisa digitar a opção de arrastar e soltar do Netlify no Google E então você tem que abrir a primeira opção no Google. Então você tem que selecionar isso. Então você precisa arrastar e soltar sua pasta. Essa é a pasta do site do portfólio com o arquivo HH TML e CSS Então, você precisa arrastar e soltar o site do seu portfólio no Netlify Você pode ver que seu portfólio é implantado usando o site da Netlify Assim, você também pode copiar o link e colar no Google. Você pode ver o site do seu portfólio. Então, antes disso, você precisa criar uma conta no Netlify usando seu Github Então, depois de criar apenas, você pode ver o link do site do seu portfólio. Então, depois de criar a conta, você pode ver o link do site do seu portfólio. Se você clicar nesse link, poderá ver que seu portfólio está implantado no site Para que você possa ver sua página inicial, entre em contato com todas as opções implantadas em seu site Portanto, se você selecionar contato, tudo será gerado no site usando o site da Netlify Então esse é o uso do Netlify. Você pode implantar seu site de front-end usando isso. Então é isso. Na aula de hoje, discutimos sobre como implantar nosso site de portfólio usando o Netlify. Então é isso, pessoal. Concluímos nosso site de portfólio usando HTML, CSS e Netlif Portanto, se você aprender algo com este curso, faça uma avaliação positiva na seção de comando. Então, vamos assumir o próximo curso ensinado por mim. Obrigada.