Figma para o Webflow para iniciantes: Site de carteira de compilação do Scratch

1. Apresentação: Você já quis desenvolver um site moderno sem saber o código? Então essa aula é para você. Olá, meu nome é Tim see, desenvolvedor de Webflow na Victor Flow Agency, que é parceira profissional da Webflow. Compartilharei minhas experiências sobre como estamos construindo sites aqui Vou informá-lo sobre o processo prático de criação de sites que vem do desenvolvimento do fluxo de trabalho de design da figma. O Workflow é uma ferramenta poderosa que nos levou a criar sites visualmente sem código. Isso vale para qualquer pessoa que queira criar sites. Mesmo que você seja iniciante ou designer, ou talvez queira se tornar um web designer em tempo integral para você, Webflow é a resposta. Essa aula é totalmente do zero. Todas as etapas da criação de um site são mostradas na íntegra. Examinaremos os elementos de fluxo, estilo e muito mais. Aqui, expliquei sobre o modelo da caixa de comentários em cada aula. Para uma melhor compreensão de como estamos começando a aprender, você aprende facilmente. Expliquei o CMS ao criar a página de listagem de postagens do blog e um único argumento de postagem no a página de listagem de postagens do blog e um único argumento de postagem Sendo desenvolvedor e ilustrador do Overflow, pensei em desenvolver um site de portfólio, que tem todos os elementos necessários para o desenho. Percebido. Depois de concluirmos o processo de desenvolvimento, criaremos nosso site, que é responsivo ao desktop. Tablet. O celular também é, verificaremos dicas e truques para finalizar perfeitamente o projeto Webflow. Como melhores configurações de SEO, melhorias de desempenho para obter resultados verdes no farol do Google Chrome. Por fim, o que estamos criando é gratuito para você cloná-lo e personalizá-lo de acordo com suas necessidades. Nesta aula, você obterá os recursos do arquivo Figma e do site do portfólio clonal. Você participa desta aula, um dos ícones gratuitos exclusivos do Figma e do Webflow. Então, se você está pronto para se tornar um Aleppo sem código e criar um site permanente. Vamos começar. 2. Figma Design Estamos indo para converter: Nesta lição, analisaremos o desenho da figma em que vamos convertê-lo em overflow. Você pode obter isso com meu design na seção de resultados. E você pode importar esse arquivo no seu Figma. Vamos começar a aula. Então, este é o nosso design de figma para o modelo de site do nosso artista. No lado esquerdo, podemos ver o conjunto de camadas que usamos. Agora vamos ao design. No início, temos o cabeçalho. Dentro do cabeçalho, há um logotipo e as propriedades relacionadas a ele podem ser boas. Outro design, que está no lado esquerdo, usamos esse logotipo como uma imagem. Podemos definir o tipo de arquivo na exportação. Pode ser PNG, JPEG, SVG e PDF. Portanto, ao escolher o tipo de arquivo na exportação, esse arquivo específico será exportado em nosso arquivo local e poderá ser usado em excesso. Agora, abaixo da pré-visualização, podemos ver a prévia dessa imagem. Em seguida, há um menu. O menu está em formato de texto. Quando vamos para a inspeção no lado esquerdo, podemos ver as propriedades relacionadas ao texto do menu. Nas propriedades, podemos encontrar a largura e a altura, a topografia usada, ou seja, o estilo de peso estranho, a altura da linha. Até nós podemos ver as propriedades do CSS. No cabeçalho. Temos um botão de inscrição para marcar a caixa. Usamos um texto. Ao clicar na inscrição. Novamente, podemos encontrar as propriedades do texto. Em seguida, temos um número de contato junto com o ícone e um número de telefone. No cabeçalho, temos um logotipo, Meno, que é um formato para viciados, e uma inscrição, e um número de contato com o ícone e um número de telefone. Então, o cabeçalho acabou. Em seguida, temos o banner, que é a seção de heróis. Dentro do banner, temos duas partes. Uma é para o conteúdo e a segunda é para manter a imagem que passa pelo conteúdo. Mas temos legendas, Dose morta, um ícone de e-mail e um ID de e-mail. E vamos verificar o botão. Chegando à segunda parte, temos um complemento de imagem para isso. Há um plano de fundo para o conteúdo e uma imagem. Agora vimos o banner. Em seguida, vamos ver o serviço. Nos serviços, temos um título e um subtítulo. Esse design será usado em todas as seções do fluxo de trabalho. Então, ao clicar em cada coisa, podemos encontrar as propriedades relacionadas a ela. No inspetor. Abaixo do título, temos esses itens, caixas, cada uma das caixas, um MOD adulto. No fluxo de trabalho, veremos como baixar esse tipo de design. Um dos serviços tem uma sombra de fundo. Até mesmo veremos como fazer isso em nossa sonda. Agora, chegando ao serviço individual, na parte superior temos o ícone e, como sempre, o título e , abaixo , há uma descrição sobre ele. E na parte inferior há um botão para saber mais. O mesmo design que se aplica aos outros dois. Então, vistos. Por trás desses três itens de serviços, há uma imagem de fundo. Analisamos os serviços. Em seguida, vamos passar para o projeto. Aqui usamos um título e um subtítulo que estão no topo. O mesmo design dos serviços. Essa é uma caixa que contém todo o título e o conteúdo. Com a coluna de fundo. Abaixo do título. Usamos quatro partes, cada uma com um bloco separado. Dentro de cada bloco, temos um título, uma descrição e uma imagem. Junto com o plano de fundo. O mesmo padrão será seguido para outros três blocos. Essa é a mesma lacuna que fazemos em cada um dos blocos. O próximo é o workshop. O workshop tem duas partes. Um é conteúdo adicional e outro é para a imagem. Chegando à primeira parte, essa é a parte do conteúdo. Temos um título e um subtítulo, como nas duas camadas anteriores, junto com uma descrição sobre eles. E abaixo dele, temos um código QR que serve para pagar o valor pelos visitantes. Próximo ao código QR, temos o ícone junto com a descrição sobre o uso desse código QR. E abaixo de tudo, temos um botão. Para reservar minha hora. E na segunda parte, temos imagens junto com o plano de fundo. O próximo é sobre mim. Isso sobre mim tem a outra imagem à esquerda e, abaixo dela, estão os ícones das redes sociais. Ao lado dela. Uma pequena descrição sobre o autor junto com isso no link do meu trabalho. E na lista, há um vídeo junto com o botão Play. Em seguida, temos a camada de licença OT. Nessa estranha camada de licença, temos duas colunas, ou seja, as duas partes. A primeira coluna é para segurar a imagem. A segunda coluna é para o conteúdo. Na segunda coluna, tem uma opção de guia para licenciamento de arte e uma comissão clicar nesta primeira etapa, o conteúdo relacionado a ela será exibido ao clicar no segundo semestre, ou seja, a conduta relacionada à comissão será exibida. Veremos como fazer com que esse fluxo sanguíneo seja suficiente. Voltando ao design de ambas as guias, o design do conteúdo será o mesmo, mas somente o conteúdo será alterado. Para o conteúdo das guias. Tem um título na parte superior e uma descrição sobre ele. E abaixo dela, há duas partes. Uma delas é manter uma porcentagem. E na segunda parte, como uma pequena descrição, vimos a camada de licença OT. A seguir, uma camada de depoimento. Essa camada de depoimento tem duas colunas. Uma é para o título e as legendas, e a segunda coluna é para os depoimentos. O mesmo design será seguido para cada um dos depoimentos. Vamos ver o design individual desse depoimento. No topo, usamos as aspas e um comando dado pelos visitantes ou pela perda. Temos a imagem do visitante ao lado com o nome junto com a demissão. E no canto final, temos uma classificação dada pelo visitante. O mesmo design será seguido para outras, uma folha com mudanças na cor de fundo. E há uma imagem de fundo. Esse testemunho anterior. Agora, vamos ver a camada de preços. Esse preço usa a caixa junto com a cor de fundo dentro dela. Esse é o título e a legenda, ou o cachorro, como usamos nas camadas anteriores. Abaixo disso, há duas colunas. Um é para o gratuito e o outro é para a sonda. Chegando à primeira coluna para segurar o título, usamos o bloco em uma extremidade. Há um título em outro n. Essa é a menção dos ricos. Abaixo deste título, temos várias listas sobre o movimento livre, junto com o título na parte superior, em um canto, em outro canto, há um emoji e abaixo dele, essa é uma lista da versão gratuita. No final, temos um botão para acessar a versão gratuita. Dentro desta lista, destacamos alguns dos bosques. O mesmo design é seguido na segunda coluna com as mudanças nos preços. O preço de uma camada tem a imagem de fundo duas, vimos sobre a camada de preço. Vamos ver mais sobre o blog. O blog tem esse título e o subtítulo na parte superior e abaixo da seção do título, ou seja, quatro bytes. O mesmo design será seguido em cada uma das peças. Digamos que o design das partes individuais dentro dela. Usamos os dois blocos. A primeira é segurar a imagem e a segunda é para o conteúdo que chega ao conteúdo , ou seja, um título na parte superior, abaixo do título, ou seja, uma data de publicação e nome do autor e um blog extra, junto com o link do modo de leitura. O mesmo design que segue para três. Depois do bloqueio, temos o FAQ. Ele usa a caixa com a imagem de fundo e também tem as duas colunas. A primeira é manter o título e o subtítulo do mesmo. E na segunda, há várias listas suspensas. Aqui temos um modal de perguntas do USDA junto com o ícone de seta. expandir essa lista suspensa, a seta deve estar para cima e o conteúdo relacionado a essa pergunta deve ser menor que o tamanho da pergunta, junto com as mudanças na cor, o próximo está inscrito. Tem dois blocos, a unidade para o título e a legenda na parte superior. A segunda é para a entrada para obter o endereço de e-mail junto com o botão à direita. A coisa toda dessa entrada e de um botão tem a cor de fundo. A próxima coisa é o contato. E o contato, ou seja, duas colunas, uma lista para o conteúdo e a segunda coluna é para os campos de entrada que chegam à primeira coluna. E o cachorro, ou seja, uma legenda e o título, junto com o espaçamento desnecessário em todos os primeiros sites pertenciam ao título e ao subtítulo. Não temos dados principais, junto com o e-mail, a identidade, o telefone, o número e também com esse endereço na segunda coluna. Isso é um espaçamento desnecessário em todos os locais de frutas. E também tem os campos de entrada de nome, e-mail, empresa, telefone e mensagem, junto com o botão enviar mensagem na parte inferior. Agora chegamos à última parte, que é comida para conhecê-la como uma foto, que é uma linha no topo dela. Então, agora, dentro dela, temos um título na parte superior, abaixo dela. Temos um logotipo. Abaixo desses dois, temos vários links de mídia social, ou seja, para o Facebook, Instagram, Twitter e YouTube. Cada link de mídia social é acompanhado por um logotipo relacionado. E que tipo de mídia social esse, junto com o link, o mesmo design que segue para outras três em cada link de mídia social que não é apropriado. Sim. E também há uma cor de fundo para a caixa que contém todos os seus links de mídia social. Na parte inferior, há um menu com links ou à esquerda. E no canto direito, temos um texto de direitos autorais. Então esse é o design do Figma que vamos convertê-lo em um fluxo de trabalho. Para desenvolver esse design em um Webflow, precisamos conhecer os fundamentos do Webflow. Então, na próxima lição, veremos os fundamentos do Webflow que são necessários. Nos vemos na próxima lição. 3. Noções básicas de webflow: Webflow é um cmos, que é um sistema de gerenciamento de conteúdo. É um sistema que permite gerenciar conteúdo. Mas não é só isso, mas é um dos melhores por causa do designer. E essa é uma forma de manipularmos visualmente o HTML e o CSS na página. Trabalharemos muito com o designer nesta aula. Até agora, na interface do usuário, podemos dividi-la em quatro seções. Essas quatro seções são a barra de ferramentas esquerda, a tela, os painéis à direita e uma barra de ferramentas superior. Então, agora vamos começar com a barra de ferramentas esquerda. Quando eles abrirem o fluxo de trabalho, encontraremos a barra de ferramentas esquerda no lado esquerdo. Então, na barra de ferramentas esquerda, podemos acessar a maioria das seções importantes. Temos um menu aqui na parte superior que nos permite alternar para o painel, as configurações do projeto ou o editor. Em seguida, temos o painel de adição, que nos permite adicionar elementos e componentes em nossa página. Inicialmente, temos o layout, as seções, a nota do contêiner em colunas. Se precisarmos de ajuda, basta clicar no ponto de interrogação, que está aqui. Então, obtemos uma pequena descrição sobre. Em seguida, temos um básico aqui. Temos o cachorro, a lista, a lista, item, o link, o blog e o botão. próximo é o tipo de Rafi. Aqui temos título, parágrafo, texto, link, bloco de texto, blog, bom e Rich Text. Em seguida, temos um CMS aqui, temos uma lista de coleções. Veremos isso mais tarde. Em seguida, vem a mídia. Aqui temos uma imagem, NÓS FAZEMOS um YouTube e todas as animações. Em seguida, temos os formulários. Aqui. Temos desde blob, labor, entrada, arquivo, upload, área de texto, caixa de seleção, botão de opção, botão de seleção, recaptura, botão de formulário. Esses são todos os elementos principais. Portanto, para as instruções. E também temos competência em componentes zeta ou temos um novo vídeo de fundo resumido. Sou Bud Light, número da caixa, pesquisa, controle deslizante, toques, mapas, Facebook e Twitter. Então, essas são todas as coisas disponíveis no painel de elementos. Em seguida, temos um layout. No layout, podemos usar qualquer um dos layouts pré-construídos que vêm com o Webflow. Então, ao passar o mouse sobre os layouts pré-construídos, pudemos ver uma pequena descrição sobre esses layouts. Se executarmos essa barra de marcação agora, podemos usar o adesivo agora. Se precisarmos da seção de heróis, esse é o conteúdo do título da imagem, do corpo e de um botão de apelo à ação proeminente em si. Podemos usar esse privilégio fatal. Adicione a ele. Temos aqui a seção de código de sobreposição, conteúdo principal, seção de recursos, seção de galeria , chamada à ação, formulário de inscrição formulário de contato em alimentos ou no banner do anúncio, ou o vimos com os elementos e os layouts. Então, temos acesso aos símbolos. Aqui, pudemos ver uma pequena descrição de todos os símbolos. Os símbolos permitem que você reutilize o conteúdo em seu design. Você adiciona um símbolo, clica com o botão direito do mouse em um elemento no Canvas e seleciona Criar símbolo. E também tem uma diretriz sobre a criação de um atalho desvinculado. Basta usar o Control Shift oito. Então, aqui temos uma descrição sobre os símbolos e a saúde em relação aos símbolos. Para criar um novo símbolo, basta clicar nesse botão de adição. E se o símbolo tiver sido criado, podemos ver uma lista de todos os símbolos existentes aqui. Em seguida, temos o Navigator. Isso nos permite navegar pelo conteúdo de uma página da web. Então, aqui temos o corpo no painel esquerdo e selecionamos o corpo de todas as páginas. Portanto, ao selecionar esse corpo, a tag de todas as páginas e definir o estilo nessa guia será cascata em todo o projeto. A próxima página. Ao clicar nesse ícone, teremos acesso a todas as páginas um documento do Word e poderemos alternar facilmente entre elas. Então, aqui temos páginas estáticas no interior, temos a casa. Em seguida, estão as páginas de utilitários dentro dela. Temos uma senha para não cometer erros. E a terceira, como páginas de coleção do CMS. Todas as páginas de coleções do CMOs serão exibidas. Aqui. Temos páginas de comércio eletrônico. Se quisermos criar uma nova página, basta clicar nesse ícone. Ao clicar em Criar nova página, obtemos novas configurações. Com a ajuda dele. Podemos dar detalhes sobre nossas páginas e criar a nova praia. E então temos acesso a mais de coleções de CMS. Para criar uma nova coleção, basta clicar nesse ícone. No topo, temos modelos de coleção. Então, a partir daqui, podemos escolher o tipo de coleção que precisamos. Então, aqui temos postagens de blog, autores, categorias, projetos, clientes, membros da equipe, listando vitórias, itens de menu, músicas, shows, receitas. Esses são todos os modelos disponíveis aqui. Em seguida, temos as configurações da coleção. Aqui podemos dar o nome da coleção. E, em seguida, temos o URL da coleção. No próximo ano, teremos a coleção separada dos campos existentes ou podemos adicionar os novos campos. Nos campos personalizados. Podemos escolher que tipo de campo é. Aqui temos dias cegos, imagens ricas, imagens múltiplas. Desvinculamos, vinculamos, enviamos e-mail, telefone, número, data ou hora, alternamos, colorimos, arquivo de opções, mesmo que tenhamos a opção de excluir a coleção. Em seguida, temos a coleção de comércio eletrônico. Quando transformamos nosso site em loja, essa opção pode ser usada. Em seguida, temos o acesso aos ativos. Para adicionar um arquivo aos ativos, podemos simplesmente soltar os arquivos aqui. Para adicionar os arquivos dentro dos ativos, podemos usar o ícone de upload na nuvem neste painel de ativos. E, finalmente, temos algum acesso às configurações. Aqui temos pesquisas e backups. Isso é tudo o que pudemos para apoiar nosso projeto. E então podemos criar um novo backup clicando nessa nova opção de backup. Na barra de ferramentas à esquerda, na parte inferior, temos auditorias. Esse painel de auditoria aborda problemas comuns relacionados à acessibilidade. Assim, podemos prender o nome antes de entrar no ar com nosso site. Alguns dos problemas comuns são a falta de tags alternativas, indescritivas, conteúdo do link e cabeçalho do script baixo. Analisamos a auditoria, temos uma multa rápida. Então, com a ajuda dessa multa rápida, podemos adicionar elementos à tela. Abaixo da multa rápida, temos tutoriais em vídeo. Se tivermos alguma dúvida sobre isso, podemos acessar os tutoriais usando então estou clicando em obter a página editorial desta semana. E, finalmente, ajudamos nisso. Temos atalhos de teclado. A partir disso. Conseguimos encontrar muitos atalhos de teclado para reduzir nossa carga de trabalho. Além disso, temos visualização prévia do CSS e a aumentamos, explicamos. Então, concluímos tudo na barra de ferramentas à esquerda. Em seguida, vou falar sobre a tela. Essa é a maior seção da interface do usuário. É isso aqui mesmo. Podemos ver uma prévia do nosso projeto. Para ser mais detalhado, deixe-me selecionar com o corpo com a ajuda do painel de adição. Estou adicionando uma seção sobre como adicionar essa seção na tela. Ou podemos ver que a seção foi criada. Agora, sobre essa seleção de seção, deixe-me adicionar um contêiner para que o contêiner seja criado dentro desta seção. Agora, no Canvas, esse contêiner foi criado dentro desta seção. Agora vou passar para os painéis à direita. Em vez de oferecermos o painel lateral direito, também podemos chamá-lo de inspetor porque inalamos ou podemos inspecionar as várias propriedades do elemento selecionado. Aqui, selecionamos a seção. Todas as propriedades relacionadas a ele serão exibidas aqui. Chegando à equipe, temos controles para o layout do elemento. Debaixo dela. Temos o deslocamento do raio. Em seguida, temos o espaçamento no fim de semana de espaçamento e damos a eles os valores de oxigênio são nossos e também o valor de preenchimento do elemento específico. Em seguida, temos o controle do tamanho. Dentro dela, no fim de semana, dê o valor da largura, o valor da altura. Mesmo em um fim de semana, defina a largura mínima, a altura mínima, a largura máxima e a altura máxima. O transbordamento. Temos a opção de ocultar o scroll e, quando temos a opção de encaixar, em seguida, temos a posição em que DDA se preocupa e a posição do elemento na página. Em vez de posição, temos estático, relativo, absoluto, fixo e pegajoso. E também temos a opção de flutuar e limpar. Chegando ao próximo, isso é tipográfico. Aqui podemos definir o tipo de fonte dos textos específicos. E podemos dizer o peso, tamanho, altura, cor. Então, podemos dizer o alinhamento disso. E também tem mais estilo para o texto. E chegando a mais opções de tipos. Tem espaçamento entre letras, texto, colunas de intenção e um fim de semana e escolha a opção em maiúsculas. E também tem opções de interrupção. Até mesmo um fim de semana disse que o texto sombreia. Em seguida, temos os antecedentes. Para definir a imagem de fundo, use a opção de adição na imagem e no gradiente. Aqui, um fim de semana, escolha o tipo de plano de fundo que precisamos adicionar. Além disso, podemos definir o tamanho do plano de fundo que é a capa personalizada e conter até mesmo uma posição de fim de semana na imagem de fundo ou podemos definir os blocos da imagem de fundo. A imagem de fundo pode ser corrigida ou não. Chegando ao tipo do plano de fundo, podemos definir o tipo como gradiente linear e gradiente radial. Finalmente, temos nosso DBA e outro plano de fundo, ou temos cores. E também há um recorte com o fundo do leilão, o fundo da luva de rebatidas e o fundo do Canton Club com o texto. Em seguida, temos fronteiras. Podemos definir a fronteira para ficar ao virar da esquina. Para isso, temos a opção raio. Ao fornecer o valor do pixel. O canto arredondado pode ser criado quando podemos dizer a borda em um site específico. Também existe esse ladrilho para as fronteiras. A espessura das bordas pode ser fornecida usando-a com a cor que pode ser dada às bordas. Depois da guerra, temos ética. Ética é que temos modos de mistura. Mesmo em um fim de semana, defina a opacidade. Até mesmo um fim de semana e disse esse ladrilho para o esboço. Podemos dar sombra à caixa aqui, ou temos os dois tipos que existem para o exterior e o interior. Mesmo em um fim de semana, eu defino o ângulo da sombra da caixa e a desfaço. Temos distância, Blair, tamanho e cor. Em seguida, temos o dever de realmente nos transformar. Isso é usado para manipular a aparência e as posições de um elemento sem afetar os elementos ao redor. Para trazer a aparência 3D, temos a opção de mover, dimensionar, girar e dimensionar. A próxima é a transição. Essa transição ajudou a criar uma animação suave entre os diferentes estados de um elemento. Podemos definir o tipo de transição necessária para um elemento. Aqui estão todos os tipos de transições. Temos transições comuns. Transição em segundo plano. Em seguida, estão as transições de tamanho, bordas topografia, coeficiente, margem, preenchimento e flexão. E também temos transições avançadas. Um tipo de duração e atenuação pode ser personalizado para criar uma transição exclusiva. Em seguida, temos a dose completa. A dose completa nos dá uma gavinha sobre a qual produzirá efeitos que podem ser aplicados a qualquer elemento. As opções do filtro são é um filtro suave e temos ajustes de cores e efeitos de cor. Finalmente, temos, porque podemos personalizar nossa Gaza usando essa opção. Então, agora temos algumas opções adicionais. Em seguida, clicando no ícone Configurações, podemos definir ids para vários elementos. E também temos atributos personalizados. Próximo a partir daqui. Também temos acesso a esse gerenciador infantil. E isso nos mostrará todas as classes que estão sendo usadas no projeto. E, finalmente, esse é o painel para interações. É aqui que podemos criar animações no Webflow. Dentro desta instrução, temos dois gatilhos. Um é o elemento trigger. Dentro do gatilho do elemento, temos o clique do mouse, o mouse e o movimento do mouse. Nossos elementos, navegue até a visualização enquanto navega. E, finalmente, estamos indo para a barra de ferramentas superior, onde você pode encontrar aqui na parte superior. Na parte superior, temos o ícone para exportar nosso código HTML, CSS ou JavaScript. Então, temos a opção de compartilhar nosso projeto. No final, temos o Publish. Então, ao escolher o domínio, podemos publicar no domínio selecionado. E também temos opções avançadas. Temos as opções de desfazer e refazer. E temos controles para o lado das respostas do web design. Podemos alternar entre vários pontos de interrupção clicando em cada um para visualizar nosso site em diferentes tamanhos de tela. E usando essa opção, também podemos adicionar interrupção maiores do que os pontos de lance base. Nesta lição, aprenderemos que o Webflow é um CMS. Ok, agora que temos todas as informações sobre o básico, na próxima lição, veremos como configurar nosso site. 4. Projeto do curso: Para se familiarizar com o Webflow, publique de forma exclusiva para clonar o site. Substitua imagens, personalize cores e conteúdo. Você cria seu próprio site de portfólio, o que é super fácil. Depois de se familiarizar com ele, encontre o arquivo Figma na seção de recursos importada para sua conta Figma e comece a criar o site como o que estamos fazendo nesta aula. Você também pode modificar o design de acordo com seu desejo. Depois de terminar tudo isso, certifique-se de enviar seus projetos para que eu possa analisar os trabalhos do seu projeto. 5. Primeiros passos: Nesta lição, vamos criar um site que é necessário para o nosso projeto. Vamos ver como fazer isso. Ao abrir o fluxo de trabalho, obtemos essa tela, basta clicar no novo projeto. Agora, teremos uma tela como essa. Para criar um novo projeto. Escolha a opção de lado em branco agora selecionada, agora dê o nome do site, pois eu já criei um projeto. Então, estou fechando. Agora você pode ver o projeto que eu criei neste verde. Agora estou abrindo o projeto do site desse artista e, portanto, estou nos levando ao designer. Agora temos a tela em branco. Agora vamos importar as fontes e estamos esperando por você, nosso projeto, para fazer isso e selecionando o símbolo do hambúrguer aqui, podemos encontrar a configuração dos projetos aqui, escolha as fontes. Agora vou selecionar a fonte Poppins e esperar por essa fonte pop-up ou 300, 500600700800 regulares. E agora estou adicionando esse ponto. Agora, novamente, estou adicionando outro telefone com um nome. E agora vamos adicionar essa fonte. Agora, meu é publicá-lo no domínio selecionado. Agora vamos voltar ao designer. Agora temos a tela. Eu vou até o navegador e estou selecionando o corpo. Portanto, o corpo é selecionado sob o seletor. Estou escolhendo a tag HTML, o corpo, todas as páginas e outra tipografia. Estou escolhendo a fonte como Poppins e o tamanho entre os pixels. Estou dando a cor em valor hexadecimal. E deixe a altura ser 1,4 hífen. Esse estilo tipográfico aplicado ao corpo, guia Todas as páginas. Então, agora estou publicando no domínio selecionado. Então, nesta lição, concluímos como criar um site e também adicionamos uma fonte que é necessária. Então, na próxima lição, vamos começar com a navegação do cabeçalho. Nos vemos na próxima lição. 6. Seção de cabeçalho - Parte 1: Nesta lição, veremos mais sobre a seção de cabeçalho do nosso site. Agora, precisamos saber sobre o planejamento do modelo de caixa. O planejamento do modelo de caixa visa entender a estrutura do cabeçalho e também a forma como eles lidam com os logotipos usados para a estrutura desse cabeçalho. Agora temos essa área total do cabeçalho. E dentro dela, serão duas seções. Essa é uma seção à esquerda para um logotipo e Minow. E a seção certa para o botão e o número de telefone. Este é o deserto que vamos implementar em nosso site. Vamos seguir em frente. Antes de entrar na aula. Vamos ver um modelo de caixa comum de Buda, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner que seja apropriado para a seção necessária. Verifique se o quadro está selecionado no navegador. Agora estou adicionando esta seção. Agora estou dando o nome da classe como cabeçalho. Agarre. Esse nome de classe deve ser compreensível. Esteja sempre consciente disso. Agora, sob o cabeçalho, estou adicionando um contêiner. Você tem o tamanho máximo de 15, 20 pixels. Portanto, esse valor de tamanho específico será armazenado na classe do contêiner. Portanto, sempre que eu estiver usando a classe de contêiner, esse tamanho será aplicável a esse elemento. Dentro do contêiner. Vou adicionar um logotipo e um mínimo. Para fazer isso, vou passar por baixo do Componente e dentro dele, isso é um cotovelo. Então, selecione isso agora, mas ao selecionar o agora comprado, os menus padrão serão adicionados dentro do contêiner. No navegador, pudemos ver o contêiner dentro dele, que é uma barra de navegação. E, novamente, dentro dele, há um contêiner que contém marca agora no meio e no botão de menu. Considerando o logotipo da marca, o objetivo do botão de menu é visualizar o site no celular, enquanto ele será exibido como um símbolo de hambúrguer no celular. Estou selecionando o contêiner que tem menos de uma hora. Por outro lado, estou escolhendo a classe de contêiner existente. Portanto, esse tamanho, que é aplicado no contêiner, será aplicado ao contêiner da barra de navegação. Primeiro, vou adicionar um logotipo. Então, estou escolhendo a marca. Então, dentro dela, preciso adicionar uma imagem que seja para um logotipo. Em vez de acessar o Adicionar elemento repetidamente, estou usando o atalho para a multa rápida que é controlada mais E para Windows e Command mais E para Mac OS. Assim, você receberá a multa de qualquer coisa que apareça. Agora você pode pesquisar uma imagem. Depois de selecionar a imagem, você verá um pop-up onde poderá escolher a imagem desejada, ou seja, para o logotipo. Eu coloquei o logotipo na minha seção de cabeçalho. Para que você possa ver a imagem abaixo da marca no navegador abaixo do contêiner para criar uma área total do cabeçalho, estou adicionando um diblock usando a multa rápida. Estou arrastando o desenvolvimento para o topo. E estou nomeando a classe como largura total do cabeçalho. Abaixo do cabeçalho, em largura total, temos duas seções, ou seja, uma seção da borda do cabeçalho e uma seção direita do cabeçalho. Então, estou criando um desenvolvido usando uma multa rápida. E estou dando o nome da classe como cabeçalho Seção esquerda. Na seção de cabeçalho, temos um logotipo e um mínimo. Na seção do lábio do cabeçalho, estou arrastando o logotipo agora amino, um botão amino. Precisamos de um cabeçalho, seção direita. Então, ao selecionar a largura total do cabeçalho, estou criando um diblock usando um QuickFind. Portanto, a seção do cabeçalho será a filha da largura total do cabeçalho. Crie o nome da classe como cabeçalho, seção direita. Agora vamos fazer o alinhamento da largura total da alça selecionando a largura total do cabeçalho no lado direito; abaixo da camada, você exibe como flocos e o alinhamento com o centro e justifique distribuir o espaço uniformemente do início ao fim. Agora, para os peixinhos, precisamos definir a tipografia. Estou escolhendo a fonte como Poppins e o peso como 500, tamanho médio S, 18 pixels. Agora, para a cor, estou dando o valor da cor do design figma para essa cor e criando uma amostra. Se eu criar uma amostra. Então, essa cor específica pode ser usada sempre que eu precisar. Todos esses valores tipográficos serão armazenados na classe de link nav. Portanto, se eu usar essa classe de link de navegação para os outros menus existentes, esses valores serão aplicados a esses menus. Faça. Assim, pudemos ver claramente como a classe é usada com base no design da figma. Temos um total de 5 min. Então, estou duplicando os dois minutos extras. Agora estou renomeando os menus como projetos e preços. Preciso fornecer o espaçamento para uma mulher que, ao selecionar o vidro de navegação abaixo do espaçamento, estou dando a ela um preenchimento esquerdo de 30 pixels. Para o preenchimento certo, estou dando 30 pixels. Agora precisamos do espaçamento para todo o menu. Então, estou selecionando o menu de substantivos abaixo do espaçamento e dando o valor de preenchimento como 60 pixels. Para toda a barra de navegação. Por padrão, a cor de fundo é ótima. Mas no design da figma, a cor de fundo é branca. Então, precisamos mudar a cor de fundo da rede. Estou selecionando o vizinho. Estou examinando a topografia na seção de cores, estou escolhendo o transplante. Então, a cor mudou no romance. Esse não é um espaçamento suficiente na parte superior e inferior do romance, estou dando esse espaçamento para a rede. Então, sob o espaçamento, pudemos ver o pânico no preenchimento superior e inferior Estou dando o valor de 40 pixels. Na próxima lição, veremos uma seção de cabeçalho modal que consiste em um botão de inscrição e um número de telefone. Nos vemos na próxima lição. 7. Seção de cabeçalho - Parte 2: Agora vamos ver a seção direita da cabeça. Anteriormente, vimos a seção do cabeçalho que pode destruir um logotipo e aminoácidos. Agora, na seção certa, teremos um botão de inscrição e detalhes de contato. Usaremos o desenvolvedor ou dividiremos o botão de inscrição dos detalhes de contato. Novamente, nos detalhes de contato, teremos duas seções, que é para o ícone Gall e outra é para o número de telefone. O navegador, estou selecionando a seção do cabeçalho com a ajuda da multa rápida, estou procurando o botão. O botão é adicionado na seção do cabeçalho. Estou renomeando esse botão como Inscrever-se. Agora preciso fornecer a topografia do botão de inscrição. Estou definindo a fonte como Poppins, pesando 500, tamanho médio e 18 pixels. E estou dando a altura da linha como 1,3 hífen. O hífen é usado para excluir as unidades Asper no design figma, estou dando o valor da cor na tipografia. Agora, para o fundo deste botão, passando por baixo do plano de fundo, estou escolhendo a cor branca agora para as bordas e indo abaixo da seção de borda nesta guia, estou escolhendo esse sólido com um pixel a cor é tirada da grande Madison, pois há uma cor preta. Próximo ao raio, que é o canto arredondado do botão. Estou dando o valor de 12 pixels para fornecer o espaçamento do botão e o valor do preenchimento. Para a parte superior e inferior tem 15 pixels. E para o preenchimento esquerdo e direito, o valor é de 20 pixels. Agora estou indo para a seção selecionada para selecionar o nome da classe e selecionar a classe do botão. Agora estou renomeando o botão para cima. Se eu não alterei o nome da classe desse botão, o estilo que eu dei também será afetado para outros botões. É por isso que estou renomeando a classe. Agora podemos ver o botão do cabeçalho e a seção do cabeçalho. Agora precisamos adicionar os detalhes de um contato, decidir a inscrição escolhendo uma seção de cabeçalho com a ajuda do QuickFind, adicionando o bloco. E estou dando à turma o nome S para esse contato. Dentro da cabeça que entra em contato com o representante. Temos as duas seções que são para o ícone do telefone e outra é para o número de telefone. Estou adicionando um desenvolvido com a ajuda do QuickFind. Depois de adicionar o nome da classe como ícone de contato, embrulhe. Debaixo do balcão, eu posso embrulhar. Vamos adicionar o ícone do telefone. Então, estou procurando a imagem. O pop-up aparecerá a partir dele. Estou escolhendo a imagem e depois colocando o ícone do telefone no deserto. Nós adicionamos o ícone do telefone. Portanto, o tamanho é muito pequeno, então precisamos mudar o tamanho disso. Então, abaixo do tamanho, estou dando os 50 pixels para a largura e 50 pixels para a altura. Agora, para a cor de fundo desse ícone de telefone, estou dando o valor da cor do design da figma. Agora, precisamos trazer esse ícone para o centro. Então, estou indo para a camada em Exibir. Estou escolhendo o fluxo e estou me alinhando com o centro e justificando-o. Então, o ícone vem para o centro. Em seguida, ao colocar a borda lado a lado, vou pegar outra borda e dar o valor como 15 pixels. Adicionamos o ícone, mas precisamos adicionar um número de telefone. Como sabemos, o ícone do telefone é outro contato. Com a ajuda do QuickFind. Estou adicionando texto ao link. Na sessão do link. Escolha o ícone do telefone. Agora, renomeie-o com um número de telefone. Agora, escolha nenhum desse bloco para esse link de texto. Agora, para o nome da classe desse texto para colocar lado a lado e renomear, ele tem o cabeçalho phone, Nick. Ninguém está indo para a topografia, estou definindo a fonte como Poppins e o peso SY, tamanho médio com 18 pixels, a altura da linha como 1,3 hífen e os valores de cor retirados do design da figma. Aqui, o número de telefone deve estar ao lado do ícone do telefone. Dentro do cabeçalho, contate a web. Temos o ícone do telefone e também o seu número de telefone. Então, estou selecionando o representante de contato do cabeçalho e estou passando para o Leo na tela. Estou escolhendo o S flex e o alinhando ao centro. O espaçamento no link do telefone do cabeçalho não é suficiente. Então, estou selecionando o cabeçalho carinhoso e, para o preenchimento, estou dando o valor de 20 pixels e também a seção direita do cabeçalho não está alinhada de acordo com o design. Estou selecionando a seção direita do cabeçalho. Outro layout na tela, estou escolhendo flex e estou alinhando ao centro. Precisamos do espaçamento entre o botão e os detalhes de contato. Então, estou selecionando o envoltório de contato do cabeçalho. Então, abaixo do espaçamento, estou dando o preenchimento esquerdo para 30 pixels. Agora estou selecionando o projeto publicado. Ao selecionar o publicado para selecionar um domínio, você pode ver um design em nosso site. Então, sempre que você precisar ver seu design em um site, basta clicar no botão Publicar, pairando em cada menu. Nada mais aconteceu. Além disso, esse não é um espaçamento suficiente na parte superior. Então, eu vou voltar. Todos os elementos estão no romance. Então, estou selecionando a barra de navegação na seção de espaçamento. Deixe que o preenchimento da parte superior e inferior seja de 40 pixels. Vamos publicá-lo. Agora podemos ver o espaçamento suficiente para nosso nível. Agora precisamos fazer o efeito de transição nos menus. Agora estou selecionando essa classe agora vinculada. Agora, quais são as mudanças que estou fazendo nesta aula? Ele será afetado pelos elementos que estão todos usando essa classe. Agora, preciso fazer qual transição deve ocorrer. Então, no estado normal, isso não é. Estou passando para a transição. Estou selecionando o tipo como cor da fonte. Agora, voltando, estou mudando o estado para exagerado. Em hospedado, a cor deve mudar. Então, sob a tipografia, estou mudando a cor. E eu dei o valor da cor do design da figma. Agora estou criando a amostra como cor secundária. Agora, deixe o estado, nós Nan novamente. Agora, todos os menus obterão essas propriedades porque todos os menus estão usando esse vidro de link de navegação. Agora, precisamos dar o efeito de transição ao link do telefone. Então, estou selecionando isso. Então, durante a transição, estou escolhendo que a cor da maré caiu sob a topografia. Depois de terminar o não estadual, estou mudando para o estado flutuante. Então, enquanto estou passando o mouse, deixe a cor mudar para nossa cor primária e escolha a não estatal. Agora estou publicando isso. Vamos ver como nossa transição funciona. Enquanto passa o mouse sobre os menus. Invoca muito perfeitamente. Até mesmo o link do telefone funciona perfeitamente. Mas não fizemos nenhum efeito de transição em nosso botão de inscrição. Então, vamos fazer isso também. Agora estou selecionando o botão de cabeçalho no não estado. Vamos fazer a transição para o botão de inscrição, faremos a transição em árvore no total. Vamos ver isso um por um. Eu vou para a transição. Estou escolhendo o tipo como cor da fonte. E, novamente, vou fazer a transição e escolher o tipo como cor de fundo. A transição final é aquarela. Esses são todos os esforços de transição. Vamos jogar com o botão de inscrição. Agora, precisamos especificar qual efeito acontecerá enquanto passamos o mouse sobre o botão. Então, estou escolhendo o estado de flutuação sob a topografia, estou escolhendo a cor para branco. Nós damos a ele três efeitos de transição. Então, para a segunda transição, que é o plano de fundo, estou escolhendo a cor de fundo como preto. E a terceira transição é a cor da borda. Então, estou escolhendo a cor da borda como cor secundária. Novamente. Vamos publicá-lo para ver como funciona. Agora pudemos ver como a transição está acontecendo sem problemas para os peixinhos e com o botão de inscrição em carícias, tudo está funcionando muito bem. Na próxima lição, veremos a seção de heróis, que consiste em duas colunas. A primeira coluna é para o conteúdo e a segunda coluna é para a imagem. Mas na próxima lição, desenvolveremos o conteúdo do primeiro códon. Vamos ver como vamos fazer isso. 8. Seção de banner - Parte 1: Nesta lição, veremos sobre a seção de heróis, que está abaixo da seção de cabeçalho. Para esta seção de heróis, novamente, usaremos o plano do modelo de caixa. Então, agora, para o plano, teremos uma área total de heróis dentro dele. Teremos uma seção esquerda na seção I e uma seção de passeio. Na seção esquerda, teremos blocos div para cada conteúdo. Isso é para legenda, título , e-mail, ID e botão de seguir. Na seção certa, teremos uma imagem. Então, esse é o planejamento que vamos executar. Então, vamos seguir em frente com o desenvolvimento. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Agora, clique no corpo abaixo dele. Vamos adicionar uma seção usando a multa rápida. Estou dando o nome da classe como seção de representantes de heróis. Na seção de representantes do herói, estou adicionando um contêiner. Então, para esse contêiner, classificar uma classe como contêiner, que já existe. Então, estou usando a classe existente no contêiner. Vou adicionar uma bolha div. Agora estou dando o nome da classe como conteúdo da heroína Alia. Assim, o bloco conterá todo o conteúdo do herói. Agora, digamos, o conteúdo da área do herói, vou adicionar uma grade que funciona como duas seções para conteúdo e imagem. Por padrão, a grade terá duas colunas e duas linhas. Agora vou excluir uma linha da grade de edição, que está em layout. Então, agora teremos apenas duas colunas com uma linha. primeira coluna será a área do conteúdo e a segunda coluna será a área da imagem. Agora estou renomeando a classe como grade da área do herói. Agora, novamente, na grade de edição, estou ajustando o tamanho da primeira coluna dentro de cada coluna, precisamos adicionar uma aparência div. Portanto, será o local para guardar a imagem do conteúdo. Agora, para os blocos, está ADA na grade da área do herói. Agora estou dando o nome da primeira classe desenvolvida como seção de elevadores de heróis. Para o segundo bloco como seção de heróis. Agora vou dar o conteúdo para a seção de heróis ao vivo. Então, estou selecionando a seção Hero Live abaixo dela. Estou procurando o título, que será o título. Eu escolhi o tipo de título como hedge one, Asper no design da figma, recebi o título. Vamos ver a topografia do título, para o telefone, estou escolhendo Poppins e para a altura como 800 em negrito extra e o tamanho de 70 pixels. Estou ajustando a altura da linha até obter a altura necessária. Agora estou renomeando a classe como título da área de heróis. Agora estou escolhendo a cor tipográfica como cor secundária. Na seção esquerda, preciso adicionar uma legenda. Então, estou adicionando outro título, o tipo de cabeçalho B, H2. Estou fornecendo esse conteúdo de legenda como ambos no design da figma. Agora vamos atribuir o tipo de gráfico V4 sobre a legenda. Estou escolhendo o tipo de fonte como maré baixa e o peso como 400, tamanho normal como 40 pixels e a altura como 1,3 hífens. Eu mudei o tipo de cor gráfica como cor primária. Preciso manter a legenda sobre o título, então estou arrastando-a sobre o título da área de heróis. Agora eu preciso mudar o nome da classe. Deixe o nome da classe ser herói, subtítulo da área. Para a legenda Em mais opções de texto na tipografia, estou escolhendo letras minúsculas para o espaçamento entre letras. Estou nos dando 0,0 a m. Vamos ajustar o espaçamento para o título. Então, estou dando a margem como zero, então ela ficará mais próxima da legenda. Na seção esquerda, finalizamos uma legenda no título. Em seguida, precisamos adicionar um ID de e-mail. Então, na seção esquerda do herói, estou adicionando outro diblock. Para isso, estou dando o nome da classe conforme o herói possa embrulhar, esse diblock cobrirá o ícone do correio do barco e eu sou uma senhora que ocupa o espaço para o ícone de e-mail, preciso adicionar outro desenvolvimento. Sob o envoltório masculino do herói. Estou adicionando mais um diblock. Para isso. Estou dando o nome da classe enquanto ele escrevia o gráfico de ícones de e-mail. Agora vamos adicionar o ícone abaixo da captura do ícone do Hero Mail, estou adicionando uma imagem aqui. Podemos incluir o ícone de e-mail. Vamos ajustar o tamanho desse ícone. Estou dando a largura como 50 pixels e a altura como 50 pixels. Vamos fazer o alinhamento para isso. Portanto, no layout, escolha o display flex e, em seguida, alinhe o centro e justifique-o. Deixe que a cor de fundo seja a cor branca. E para as bordas, vamos Gilda 15 pixels como raio. Agora precisamos adicionar um ID de e-mail. Então, estou selecionando o Hero Mail, que contém o ícone e eu sou uma dama. Então, em Hero Main Wrap, estou procurando um link de texto. O próximo link é criado. E depois disso, estou adicionando e talvez iluminando. Vamos atribuir a topografia para o ID de e-mail. Estou dando o telefone como Poppins, pesando 500, médio e tamanho de 18 pixels, a altura da linha como 1,3 hífens. Estou escolhendo a cor desse tipo de Ralphie como cor secundária. Não estou escolhendo nenhum no estilo. Outra tipografia para evitar o hiperlink. Agora estou renomeando esse vidro de links como o herói pode vincular, precisamos trazer esse ID criado além do ícone principal. Então, estou selecionando todo o envoltório masculino do herói. Então, sob o layout, estou escolhendo flex na tela e estou alinhando-o ao centro. Precisamos do espaçamento para o ID do e-mail. Então, estou selecionando o link principal do herói. Estou ajustando o preenchimento esquerdo em dez pixels. Portanto, ele fará o espaçamento necessário entre o ícone e a dama principal para adicionar um botão na seção esquerda Estou selecionando a seção heroína ao vivo. Então, embaixo dela, estou procurando o botão. O botão é adicionado. Agora vamos atribuir a tipografia para esse botão, a fonte como Poppins, espere, é phi handle medium e o tamanho é 18 pixels. Vamos escolher a cor branca. Precisamos fornecer a cor de fundo para o botão. Estou selecionando a cor de fundo como cor secundária. Agora, para o espaçamento do botão, estou dando o valor de preenchimento para a parte superior e inferior como 15 pixels. Para a esquerda e para a direita como 40 pixels. Esqueci de fornecer o valor da altura da linha. Então, agora estou dando o valor como 1,3 hífen. Em seguida, estou dando o valor da borda, que é 20 pixels. Temos que dar às aquarelas. Então, estou selecionando a cor da borda como cor secundária. O preenchimento do botão não parece bom. Então, vou mudar o valor do preenchimento. Deixe o valor do preenchimento superior ser 25 pixels. mesmo se aplica à parte inferior e ao acolchoamento esquerdo no acolchoamento direito. E que o valor do preenchimento esquerdo e direito seja de 60 pixels. E vamos dar o espaçamento entre letras como 0,0 EM abaixo da tipografia desse botão. Agora vamos renomear esse botão. O conteúdo do e-mail e os botões parecem estar muito próximos, então precisamos criar uma lacuna entre esses dois. Então, para fazer isso, preciso criar um espaço de margem para o representante masculino. Estou escolhendo o envoltório masculino do herói e dando o valor da margem de 20 pixels para a parte inferior. Esse espaçamento não parece bom. Então, novamente, estou alterando o valor para 40 pixels. Agora estou alterando o valor da margem superior para 40 pixels. Agora, o espaçamento entre esses dois parece muito bom. Na próxima lição, veremos a seção certa, que consiste em uma imagem, e também adicionaremos uma imagem de fundo para toda a seção. Além disso, vamos adicionar um efeito de transição para o botão. Vamos ver como vamos fazer isso. 9. Seção de banner - Parte 2: Vimos a seção esquerda de um Buda. Agora vamos ver a seção certa. Na seção à direita, vamos adicionar uma imagem que é anamórfica Madison, vamos começar a duplicar. Eu selecionei um herói, na seção direita em segundo plano. Estou escolhendo o recipiente e o tamanho. E também deixe o ladrilho ser nenhum. Agora estou escolhendo a imagem para esse plano de fundo. Deixe nossa posição estar no centro. Como vimos no design, precisamos adicionar outra imagem. Então, estou escolhendo uma imagem na seção direita do herói. Se eu usar a imagem diretamente, que é usada no design da figma, o tamanho será alto. Para comprimir o tamanho. Estou usando o tiny png.com. A partir disso, estou obtendo a imagem compactada. Agora você pode ver que o tamanho foi reduzido. Se eu habilitar a opção de imagem no Hetchy DPI, essa imagem nítida poderá ser visualizada na tela retina. Também. Precisamos adicionar a cor de fundo para esta seção de heróis. Então, estou escolhendo a grade da área do herói. Agora, em segundo plano. Eu dei o valor da cor do design figma. No design, incluímos o canto arredondado. Então, estou indo para a fronteira. Estou dando o raio S 40 pixels. O espaço de preenchimento não é suficiente na parte superior dessa grade da área do herói. Então, estou dando o valor de preenchimento como 40 pixels na parte superior. Precisamos alinhar esse conteúdo ao centro. Então, estou escolhendo alinhado no centro. Isso não é um espaço de preenchimento para o conteúdo da seção Hero Live. Então, estou escolhendo a seção esquerda do herói. Então, para o valor de preenchimento esquerdo, estou nos dando 140 pixels. Isso é um pouco mais de espaço entre o título e o conteúdo do e-mail. Então, estou escolhendo o envoltório masculino do herói e dando o valor da margem como 20 pixels. Vamos pré-visualizar o site. Na prévia, pude ver isso como um problema de espaçamento entre os slides do título e do subtítulo. Então, vamos corrigi-lo de volta ao desenvolvimento. Agora estou selecionando o título da área de heróis. Deixe-me mudar o produto da altura da linha, estou nos dando 1,2 hífen. Agora, deixe-me alterar o espaçamento da legenda para o valor da margem superior. Deixe o valor ser zero. Agora, precisamos adicionar o efeito de transição ao ID do e-mail. Então, estou selecionando o link hero may. Agora, no não estado, estou passando para a transição. Estou escolhendo o tipo para o tipo que estou escolhendo como cor da fonte. Então, enquanto estou passando o mouse, a cor da fonte deve mudar. Depois de terminar isso. Agora estou escolhendo todo o estado. Na colheita j, a cor deve mudar. Vou para a topografia na seção de cores. Estou escolhendo a cor primária S. Terminamos o envio. O próximo é o botão. Vamos fazer isso no final. Na transição do tipo em que estou escolhendo a cor de fundo, daremos a transição tumoral para esse botão. Então, novamente, vou fazer a transição para o tipo que estou escolhendo na cor da borda. Novamente, durante a transição da época, estou escolhendo a cor da fonte. Agora estou mudando o estado como HOH. Agora, sob a tipografia, estou escolhendo a cor como cor secundária. Agora, para o plano de fundo, estou escolhendo a cor branca. Vamos pré-visualizar isso. Na pré-visualização, todo o anel está funcionando muito bem para o link e também para o botão. Eu adicionei a transição para a fronteira, mas isso não é necessário para a fronteira. Apenas guarde-o. Agora, vamos adicionar o espaçamento na parte superior desta seção de heróis. Então, para isso, deixe-me dar o valor de preenchimento superior como 30 pixels para que você possa ver o espaçamento na parte superior. Ok, agora deixe-me pré-visualizar isso. Então, nesta prévia, posso ver o espaço entre a seção do cabeçalho e também a seção do herói. Deixe-me dar o valor de preenchimento na parte inferior como 40 pixels para esta seção dois do herói. Na próxima lição, veremos sobre a seção soviética, que consiste em títulos na parte superior e três itens de serviço na parte inferior. 10. Seção de serviço - Parte 1: Nesta lição, veremos sobre a seção de serviços de um site. Antes de prosseguir, vamos ver o planejamento da seção de serviços. No início, teremos duas seções como principais. A seção principal é para o título e o subtítulo. A segunda seção é para a área de manutenção dos serviços que forneceremos em seu site. Na segunda seção, teremos três serviços, enquanto que com três blocos, esse modelo de conteúdo será semelhante um ao outro. No primeiro desenvolvimento, teremos um espaço para o ícone e abaixo dele no item. E, novamente, abaixo, uma descrição sobre esses serviços. E, novamente, abaixo, um botão para saber mais. É um lugar para outros blocos de div também. Então esse é o planejamento que vamos implementar em nosso site. Vamos continuar a criá-lo. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de classificar a seção dentro dela, precisamos adicionar um contêiner. O nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária sob o corpo. Vamos criar uma seção usando uma busca rápida. Agora estou dando o nome da classe como seção wheezes, o valor de preenchimento superior e inferior para o pixel da Seção 100. Agora, selecionando a seção Serviços, vamos criar um contêiner na seção Serviços para fornecer a classe para esse contêiner, vamos selecionar o contêiner de classe existente. Dentro do contêiner. Vamos criar um bloco div para guardar os títulos. Vamos dar o nome da classe para esse diblock como seção intitulada wrap. Na seção intitulada Brad, estou procurando por um título. Então, vamos criá-lo com o tipo de título como hedge three. Agora estou renomeando esse título como serviços. Então, sob a tipografia, estou procurando por uma cauda baixa e deixe a largura ser 400 normal. Agora, voltando ao tamanho, vamos alterá-lo para 40 pixels para a altura para 1,3 hífen. Estou selecionando a cor da fonte como cor primária e vamos dar o espaçamento entre letras para ela como 0,02 EM. Agora preciso alterar o nome da classe desse título porque ele não deve afetar os outros cabeçalhos. Então, estou renomeando esse título para o nome da classe S seção subtítulo. Em seguida, precisamos dar o título. Então, estou selecionando o representante do título desta seção. Então, abaixo dela, estou procurando por outro título. Agora estou escolhendo o tipo de título como H2. Agora estou dando o nome do título como no design. Então, sob a tipografia, estou procurando os Poppins para a fonte, tipo. Em seguida, quanto ao peso, estou escolhendo 800 extra ousados. Agora estou dando o tamanho 50 pixels e a altura como um hífen de um ponto e dois. Agora, voltando à cor desse título, estou procurando a cor da fonte. Estou dando isso como cor secundária, como já discutimos, precisamos mudar o nome da classe para esse título. Estou dando o nome da classe como título da seção. Terminamos a parte do título. Em seguida, precisamos nos concentrar no conteúdo dos serviços e em outros contêineres. Novamente, estou criando um diblock que estará sob o título. Agora estou dando o nome da classe para esse diblock como embalagem de conteúdo. Portanto, ele manterá todo o conteúdo de serviço dentro desse blog div. Agora, criamos o espaço para a realização dos serviços. Então, vou criar uma grade que está embaixo do conteúdo do serviço. Por padrão, ele consistirá em duas colunas e duas linhas. Aqui, precisamos de três colunas porque estamos usando os três serviços. Então, estou excluindo uma linha e estou adicionando outra coluna. Agora estamos alterando o nome da classe dessa grade porque isso não afetará as outras grades. Então, agora estou mudando o nome da classe como. Então ele diz grade. Temos uma grade maior dentro de cada coluna, precisamos adicionar um blog para conter o conteúdo. Além disso, uma coisa que precisamos entender é que o conteúdo criado para os serviços é semelhante entre si. Então, vou me concentrar no primeiro item de serviço. Se desenvolvermos claramente o primeiro item de serviço, ele poderá ser duplicado duas vezes para os outros dois. Então, vistos. Então, na grade de serviços, estou procurando por um diblock. Agora, estou renomeando esse diblock S. Então, com o item abaixo do item de serviço, estou criando um div que contém o ícone. Agora estou dando o nome da classe para esse graduado do ícone diblock S. Então, isso mantém o ícone de forma eficaz. Agora, criamos o espaço para segurar o ícone. Agora estou procurando por uma imagem. Agora eu escolhi uma imagem para o ícone. Deixe a largura e a altura desse Eigen serem de um pixel. Para obter o alinhamento correto do ícone, estou escolhendo o fluxo na tela alinhando-o ao centro e justificando-o ao centro. Como no design, precisamos fornecer a cor de fundo para o ícone. Então, estou selecionando a imagem e o gradiente no plano de fundo. E estou selecionando a capa conforme tamanho e posicionando-a no centro. Agora estou escolhendo a imagem do ativo. Precisamos dar um canto arredondado para este ícone, vou ultrapassar as fronteiras. Agora. Estou dando o raio como 30 pixels. Nós terminamos a parte do ícone. Em seguida, precisamos adicionar um título para ele. Então, estou selecionando o item de serviço abaixo dele. Estou procurando por um título. Agora estou dando o título para isso. Mudando para o tipo de Roffey para este título. Deixe o telefone usar Poppins pelo peso. Estou escolhendo como 500 médio. Vamos dar o tamanho como 30 pixels e a altura como 1,3 hífen. Para a cor da fonte, estou escolhendo a cor secundária da amostra. Vamos renomear o título conforme declaramos. Como o título não está alinhado corretamente. Portanto, preciso alinhá-lo ao centro de nosso estabelecimento que estou selecionando o item de serviço sob a tipografia. Estou alinhando-o com o centro. Criamos um ícone. A seguir está uma descrição abaixo do item de serviço, estou procurando por um parágrafo. Agora, estou escolhendo a tag HTML de parágrafo antiga para esse elemento de parágrafo. Vamos passar para a tipografia desse gráfico inferior, outro tipo de gráfico V, estou escolhendo a fonte como Poppins para o peso normal de 400 e deixando o tamanho entre os pixels. Agora vou escolher a cor dessa fonte. Assim como no design, estou dando a cor no valor hexadecimal. Agora estou criando como guache para usá-lo repetidamente. Agora estou dando o valor da altura como 1,3 hífen. Agora, vamos ver isso em um modo de pré-visualização. Não adicionamos um botão para isso, então vamos adicioná-lo. Clique no item de serviço. Então, abaixo dele, estou procurando o botão. Agora estou passando para a tipografia desse botão, estou selecionando a fonte como Poppins, peso como identificador de arquivo Médio. E estou dando o tamanho de 18 pixels e a altura como 1,1 hífen para a cor da fonte desse botão, estou escolhendo a cor secundária dessa cunha. Vamos passar para o plano de fundo desse botão. Estou escolhendo a cor para conceder tala. Para os cantos arredondados, estou indo para as bordas. Estou dando o valor do raio S 15 pixels. Deixe o estilo do Bordeaux ser uma linha sólida. E para a cor, estou escolhendo a segunda cor grande. Deixe-me dar o valor de preenchimento como pixel válido no início. Portanto, não parece tão bom. Então, agora estou dando o, outro valor que é de 15 pixels. Agora, para o preenchimento esquerdo e direito, estou dando o valor S Duan De pixel. Sinto que devo mudar a altura da fonte. Então, sob o gráfico de dipolo, dentro da altura, estou mudando para 1,3 hífen. Então eu sinto que agora está bom. O lado ruim para a esquerda e para a direita não parece bom. Então, novamente, estou selecionando o valor de preenchimento para a esquerda e para a direita. Estou dando o valor como 30 pixels. Agora, estou renomeando esse vidro como botão transparente. Agora, dentro do item de serviço, o ícone deve estar no centro. Então, estou selecionando essa imagem. Agora, sob o espaçamento, estou selecionando o botão central do elemento. Se você selecionar esse botão, as margens esquerda e direita serão definidas como automáticas. Para obter esse espaçamento suficiente em todo o item do programa, estou dando o valor de preenchimento para a parte superior e inferior como 55 pixels. Para o preenchimento esquerdo e direito, estou dando o valor como 50 pixels. Então, agora temos o espaçamento suficiente para todo o item de serviço. Preciso fornecer a borda do item de serviço , conforme o design. Então, sob a borda, estou dando o estilo tão sólido para a cor. Estou usando o valor hexadecimal como no design. Para obter o canto arredondado, estou dando o raio como 40 pixels. Para o espaçamento suficiente entre o título e o conteúdo. Estou escolhendo o pacote de conteúdo do serviço ao escolher o representante de conteúdo Preciso dar valor ao preenchimento. Então, estou dando o valor de preenchimento da parte superior como 60 pixels para obter o espaçamento entre o ícone e o título, estou alterando o valor da margem do ícone. Então, estou selecionando esse envoltório de sempre ícones. Estou dando o valor da margem, que é um valor de margem inferior de 30 pixels para o espaçamento entre o título e o parágrafo. Estou escolhendo o título de serviço deles. Agora, estou alterando o valor da margem. Esse é o valor da margem inferior como 15 pixels. Então, temos um pequeno espaçamento entre o título e o parágrafo. Agora preciso ajustar um pouco a altura do telefone para o parágrafo. Então, estou selecionando o parágrafo anterior. Deixe-me selecionar essa tag para este parágrafo como todo o parágrafo. Agora, abaixo da altura, estou ajustando como um hífen phi de um ponto. Agora, veja o espaçamento entre o parágrafo e o botão e selecione o botão. Agora estou criando outra classe que é o botão de serviço. Portanto, o estilo pelo qual passamos será armazenado nas duas classes. Esse é um botão de transplante e esse botão sempre. Agora estou dando o valor da margem superior como 20 pixels. Portanto, esse valor será armazenado em um botão transparente e também em um botão de serviço. Sempre que eu estiver usando a classe de botão de serviço para outro botão, esse estilo será aplicável a ele. Agora, vamos ver isso no modo de pré-visualização . Estou publicando. Então, agora eu posso ver isso. Então, agora está tudo bem. Agora estou duplicando duas vezes para os outros dois serviços. Assim, ao duplicar, o item soviético será colocado nas colunas correspondentes na grade. Precisamos da lacuna entre cada uma das colunas sob a grade de edição. Estou dando o valor de 30 pixels para essa lacuna. Então, agora pudemos ver a necessidade de espaçamento entre cada coluna. Na próxima lição, faremos o estilo necessário para os itens de serviço da seção de serviços. Nos vemos na próxima lição. 11. Seção de serviço - Parte 2: Agora vamos fazer o estilo necessário para nossa seção de serviços. De acordo com o design, concluímos os títulos e a legenda, mas também concluímos a estrutura básica do item de serviço. Agora, precisamos fazer o estilo de acordo com o InDesign. Vamos prosseguir com o desenvolvimento. Concluímos o primeiro item de serviço. Em seguida, precisamos nos concentrar no segundo item de serviço. Então, no segundo item da lista, preciso mudar a cor de fundo no ícone. Então, estou selecionando esse ícone específico. E eu estou indo para o segundo plano. Agora, preciso escolher a imagem de fundo. Então, estou escolhendo a imagem de fundo. Agora você pode ver que, ao alterar a imagem de fundo, isso também está afetando os outros dois itens de serviço. Deixe-me fazer isso mais uma vez. Novamente, estou escolhendo a imagem de fundo. Agora você também pode ver que isso está afetando os outros dois itens de serviço. Além disso, o principal motivo é que estamos usando o mesmo nome de classe para todos os três itens de serviço. Todo o estilo que fizemos é armazenado neste ícone de serviço Wrap Glass. Portanto, todos os elementos que usam o ícone do serviço envolvem vidro, o estilo será aplicável a esses elementos. Então, essa é a razão por trás disso. Para evitar isso, precisamos fornecer outro nome de classe junto com esse ícone de serviço Wrap Glass. Portanto, ambos os estilos serão aplicáveis a esse elemento específico. motivo pelo qual estamos usando as duas classes é o estilo existente e também o novo estilo será aplicável a esse elemento. Então, junto com o envoltório do ícone do serviço, estou criando um item de classe dois. Agora vou para o segundo plano. Agora estou escolhendo a imagem de fundo. Você pode ver que a imagem de fundo mudou neste segundo item de serviço. Agora, precisamos mudar a imagem do ícone. Estou usando o Replace Image. Agora eu substituí a imagem. Não criamos nenhuma classe para essa imagem em particular, então ela não afetará os outros ícones. Agora estou passando para o terceiro item de serviço com o ícone de serviço existente Wrap Glass, estou criando outra classe com um nome, item de serviço três. Agora, abaixo da imagem de fundo que estou escolhendo e outra imagem de fundo. Agora, vamos substituir a imagem do ícone. A imagem foi substituída. Vamos fazer isso em um modo de pré-visualização usando o Publish para que possamos ver como ele é visualizado. Eu já fiz a colheita como fizemos nas aulas anteriores. Agora, precisamos reorganizar a posição dos itens de serviço como no design. Então, estou selecionando o segundo item de serviço com a classe de item de serviço existente. Estou criando outra classe com um segundo item do serviço de nomes. Agora preciso mudar a posição desse segundo item de serviço. Então, estou mudando para a posição que estou selecionando como relacionada. Se usarmos o posicionamento relativo, esse elemento específico pode se sobrepor aos outros elementos sem afetar sua posição. No design. Vimos que cada item de serviço fala um pouco um com o outro. Então, estou usando o empurrador relacionado a S. Por padrão, o posicionamento será em R2. Para sobrepor o elemento um ao outro, estou usando o valor como -100 na parte superior. Deixe-me fazer o mesmo processo para o terceiro item. Agora, estou selecionando o terceiro item de serviço com a classe de item de serviço existente. Estou criando outra classe com um nome. Então, nós também defendemos isso. Estou mudando a posição em relação ao terceiro item de serviço estar um ao terceiro item de serviço pouco na parte superior e depois no segundo item, então estou dando o valor de -200 na parte superior. Deixe-me publicá-lo para ver a prévia. Está tudo bem. Agora, precisamos adicionar o plano de fundo para todo esse item de serviço. Então, estou selecionando esse conteúdo lido, que é o resumo de conteúdo da semana, que contém esses três itens. Agora estou indo para o plano de fundo e agora estou escolhendo a imagem. Eu escolhi a imagem do ativo. Agora estou selecionando a posição no centro. Deixe-me dar o tamanho conforme contido. Portanto, ele estará contido nesse diblock. Agora podemos ver que todo o plano de fundo do item de serviço específico é transparente, então precisamos criar uma cor de fundo para os itens de serviço. Agora estou selecionando o primeiro item de serviço e vou para o segundo plano. Agora estou escolhendo a cor , pois a cor de fundo será afetada nos outros itens de serviço porque ela usa a mesma classe de item de serviço. Vamos publicá-lo para ver como uma prévia. Agora, foi lançado como estamos no design. Mas ao passar o mouse sobre o item de serviço, não faz nenhum sentido. Portanto, precisamos dar um pouco do efeito de transição aos itens de serviço. Vamos fazer isso. Agora. Estou selecionando o item de serviço. Agora, vou escolher esse estado como Howard. Agora, no estado flutuante, precisamos fornecer esse ladrilho. Então, enquanto passo o mouse sobre ela, vou dar o efeito de sombra por trás dela. Então, vou ver os efeitos. Nos efeitos, estou escolhendo as sombras da caixa. Na sombra da caixa, estou ajustando o ângulo e ajustando o efeito de desfoque para seis pixels. Agora preciso ajustar a opacidade da cor. Eu vou para a cor e estou ajustando a opacidade para ela. Fizemos os efeitos de transição enquanto estávamos pairando. Mas antes disso, precisamos selecionar qual transição será realizada. Mas, para estabelecer isso, precisamos definir a transição, mas ela não está funcionando porque ainda estamos no estado de flutuação. Agora precisamos mudar o estado para nenhum. Agora estou passando para a transição e preciso selecionar seu tipo. Essa é a sombra da caixa. Agora estou ajustando a duração necessária para essa transição. E, em caso de flexibilização, estou me ajustando adequadamente. Vamos publicá-lo para vê-lo em uma prévia. Prostituta irlandesa. Está funcionando perfeitamente. Já renomeei os títulos desse item de serviço 2.3. Portanto, concluímos a seção de serviços com sucesso. Na próxima lição, veremos a seção da galeria nela. Estaremos desenvolvendo o título no topo. E um dos itens da galeria, que está dentro da grade. Nos vemos na próxima lição. 12. Seção de galeria - Parte 1: Nesta lição, veremos sobre a seção da galeria, que está na seção de serviços. Na seção da galeria, teremos o trabalho mais recente que fizemos. Vamos ver o planejamento de design para esta seção da galeria. Primeiro, teremos uma seção que contém toda essa seção da galeria. Dentro dela. Teremos três caixas. O primeiro diblock é manter o título desta seção da galeria. Os próximos dois conterão os últimos trabalhos que fizemos. Usaremos o modelo de grade para os trabalhos mais recentes. Na primeira, teremos um ótimo modelo com as duas colunas. O mesmo se aplica à segunda, dentro de cada coluna, que usaremos para bloquear. Dentro de cada div. Usaremos a imagem e o conteúdo para ela. Esse é o design que vamos implementar. Vamos começar a desenvolvê-lo. Antes. Ouça, vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Inicialmente, embaixo do corpo, vamos criar uma seção. Vamos dar a ela um nome de classe para esta seção como seção da galeria. Agora, abaixo do espaçamento, deixe-me dar o valor de preenchimento para a parte superior e inferior como 100 pixels. Agora, dentro desta seção, vamos criar um contêiner. O contêiner que estou dando ao nome da classe como contêiner de classe existente. Vamos desenvolver o pote de título para esta seção da galeria. Aqui. Vou usar a parte do título da seção de serviços. Então, estou indo para a seção de serviço e selecionando a seção intitulada embrulho. E eu estou duplicando isso. E estou arrastando essa seção intitulada embrulhar para esta seção da galeria. Ou seja, para estar dentro do contêiner, precisamos criar outro nome de classe junto com a seção intitulada rub glass. Estou criando uma classe chamada center. Agora estou passando para uma seção tipográfica. Agora estou me alinhando com o centro. Então, o conteúdo virá para o centro. Agora estou renomeando os títulos e as legendas. Hasbro em nosso design. Não precisamos fazer o estilo na topografia porque já estamos usando a classe existente, que está nesta seção OB. Agora, embaixo do contêiner, estou classificando e desbloqueando. Ele contém o conteúdo da galeria. Agora vou dar o nome da classe como capa de conteúdo da galeria. Agora eu ajustei o valor de preenchimento para esta embalagem de conteúdo da galeria. Agora, dentro do envoltório de conteúdo da galeria, vou criar uma grade. A grade tem sido maior. Deixe-me excluir uma linha. Então, agora teremos duas colunas. Então, vamos ajustar o tamanho dessa grade de acordo com o design. Precisamos renomear o nome da classe para essa grade. Deixe-me renomear esse nome de classe como a primeira grade da galeria porque vamos usar as duas grades. Então, eu chamo essa grade como a primeira grade da galeria. Agora, dentro da primeira coluna, precisamos criar um blog div. E eu dando o nome da classe como item de galeria dentro do desenvolvimento, daremos o conteúdo para ela. Agora, ao selecionar o item da galeria, estou pesquisando o título e o criando. Agora estou dando o tipo de título como cobertura três. E agora estou renomeando esse título como desenho digital. Agora é hora de mudar sua tipografia. Eu vou para a topografia sob o formulário. Estou escolhendo como fantoches e escolho o peso de 700, ousado. Defina o tamanho como 30 pixels e a altura como 1,3 hífen. Precisamos mudar a cor da fonte. Então, estou escolhendo a cor como cor secundária da amostra. Eu vou para a opção do tipo shopping. Sob o espaçamento entre letras, estou dando o valor como 0,02 EM. Precisamos mudar o nome da classe para isso. Então, estou renomeando essa classe como título da Galeria. Demos o título e precisamos dar a ele um título. Então, estou selecionando o item da galeria abaixo dele. Estou criando e liderando. Deixe esse cabeçalho digitar B, h4. Agora estou renomeando esse conteúdo do título como ilustração da marca. Vamos passar para a topografia. Defina a fonte como Poppins e a espera S 600, semi em negrito. Defina o tamanho como 20 pixels e a altura 1,3 hífen. Agora, para a cor da fonte, estou escolhendo a cor secundária da amostra. Deixe-me dar o espaçamento entre letras para ele como 0,01 EM. Precisamos fornecer a cor de fundo para este item da galeria com uma seleção de itens da galeria. E indo para o segundo plano. E estou selecionando a imagem e o gradiente. Neste, estou selecionando como capa outro tamanho. Em seguida, estou posicionando essa imagem no centro. Agora vou escolher a imagem do ativo. Agora precisamos ajustar o tamanho desse item da galeria. Então, estou abaixo do espaçamento. Vamos dar um valor de preenchimento. Na parte superior, até 90 pixels. À esquerda, estou dando o valor como 60 pixels. E no Canvas podemos ver que precisamos de um tamanho muito maior. Novamente, estou alterando o valor do preenchimento inferior, faça 90 pixels, faça com que seja um canto arredondado. Vou até as bordas e vou dar o raio para 40 pixels. Ainda assim, precisamos de um tamanho maior para o item da galeria. Então, vou dar o valor da altura. Para fazer isso, vou usar outro tamanho na altura mínima, estou dando o valor como dois pixels finais. Voltando a este item da galeria, isso é mais espaçamento na parte superior do título da galeria. Precisamos reduzi-lo com a seleção de um item de galeria em si. Estou ensinando um valor de preenchimento na parte superior de 60 pixels. Mas, novamente, sinto que preciso alterar o valor porque ele precisa de um pouco mais de espaçamento. Então, estou alterando o valor para 70 pixels para ficar no mesmo valor para a parte superior e inferior, estou alterando o valor inferior para 70 pixels. Na imagem de fundo, podemos ver a parte da cabeça. Então, eu vou para o segundo plano. E com a seleção da imagem escolhida, estou selecionando a posição no centro superior. Agora vou fazer uma prévia disso. Como no modo de pré-visualização. Parece bom. Na próxima lição, trabalharemos nos próximos dois itens da Galeria na seção da galeria. Vamos ver, na próxima lição. 14. Seção de galeria - Parte 3: Quase concluímos tudo na seção da galeria junto com o título e os itens da galeria 123, resta apenas a última parte. Vamos concluir o desenvolvimento para isso também. Agora vou para a primeira grade da galeria. Estou escolhendo o primeiro item da galeria e estou duplicando. Agora estou arrastando o item da galeria para a segunda grade e faço a segunda coluna. Agora temos o item da galeria, segunda grade. Precisamos criar uma nova classe para esse item da galeria junto com a classe existente. Agora estou dando o nome da classe como uma galeria para que a imagem de fundo do quarto item da galeria seja alterada. Então, vou para o plano de fundo e estou escolhendo a imagem do ativo, como no design. Agora precisamos nos concentrar no conteúdo desse item da galeria. Então, estou criando um diblock abaixo do item da galeria. Estou dando o nome da classe como alinhamento do título da galeria. Agora estou arrastando o título da galeria e o título da categoria da galeria para o alinhamento do título da galeria. Agora com o título ou a linha da galeria selecionado. Vou para o layout e estou escolhendo o fluxo na tela e estou alinhando com o centro. Justificar. Estou escolhendo um espaço entre onde os itens serão distribuídos de ponta a ponta. Como pudemos ver, o título da categoria não está alinhado corretamente. Então, estou escolhendo o título da categoria da galeria. Precisamos fornecer o espaçamento na parte superior do título da categoria. Então, junto com a categoria da galeria intitulada classe e criação de outra classe com um nome de espaço de pontos. E estou ajustando o valor de preenchimento superior para ele. E vamos finalizar com os 15 pixels o espaçamento correto para o item quatro da galeria não é suficiente. E estou dando o valor de preenchimento correto para 60 pixels e estou renomeando o conteúdo também no design. Novamente, o alinhamento não está correto para a marca, então estou selecionando. E estou novamente ajustando o valor do preenchimento superior para 20 pixels. Para obter o espaçamento uniforme, estou selecionando o título da galeria, alinhando e dando ao preenchimento inferior o valor de dez pixels. Vamos publicá-lo para vê-lo em um prêmio. Ou aqui podemos notar que não fornecemos a cor de fundo para esta seção da galeria. Então, estou selecionando a seção da galeria e vou para o segundo plano. Agora, estou dando o valor hexadecimal como no design. Agora estou publicando. Pudemos notar que o espaçamento na parte superior não é uma visão. Então, vou voltar para obter o espaçamento entre a seção de serviço e a seção da galeria. Estou selecionando a seção de serviço e atribuindo o valor de preenchimento inferior para 140 pixels. Então, agora concluímos a seção da galeria, como no design. Na próxima lição, veremos a seção do workshop. Consiste em duas colunas. Desenvolveremos o conteúdo da primeira coluna na próxima lição. Nos vemos na próxima lição. 15. Seção de oficina - Parte 1: Nesta lição, veremos a seção do workshop. Então, agora vamos ver o planejamento disso. Inicialmente, criaremos uma seção e seguida, a grade será criada com as duas colunas. Cada coluna conterá os blocos div. O conteúdo desta seção do workshop estará no bloco d da primeira coluna. Na segunda coluna, colocaremos a imagem agora voltando para a primeira coluna, que consiste na legenda e um título, e abaixo dela, haverá um parágrafo. Criaremos o bloco do do abaixo do parágrafo que contém o código QR, a imagem do ícone e o conteúdo do código QR. E, finalmente, teremos fardo de reservar o horário do nosso workshop. Agora, novamente, a ideia clara sobre o design. Então, vamos começar a desenvolvê-lo. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento desta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner. O nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Agora, dentro do corpo e criando uma seção, temos que dar o nome da classe para essa seção. Então, estou dando o nome da classe como seção do workshop. Vamos ajustar o valor de preenchimento dessa seção como 100 pixels na parte superior e 100 pixels na parte inferior. Aqui, usaremos a seção intitulada representante da seção de serviços para nossa seção de workshop. Porque um barco com esse título áspero tem o mesmo design. Antes de fazer isso, vamos criar um contêiner na seção do workshop. Então, para isso, vamos selecionar o contêiner de classe existente. Estou selecionando a seção intitulada envoltório na seção de cirurgia. E agora estou duplicando. Vamos arrastar a seção de ID duplicada intitulada embrulho para a seção do workshop que está embaixo do contêiner. Agora precisamos renomear o conteúdo do título como em nosso design. Agora estou criando o parágrafo na seção duplicada intitulada wrapper. Fizemos o básico para o título e o parágrafo. E já sabemos que o design tem um modelo de grade. Então, estou criando uma grade sob o contêiner. Agora. Estou excluindo uma linha. Agora estou ajustando o tamanho da primeira coluna para 0,9. Já sabemos que precisamos renomear a grade. Então, estou renomeando a grade como grade de oficina. Dentro da grade, temos duas colunas. Dentro de cada coluna, precisamos criar um log div. Então, estou criando um diblock na grade do workshop. Agora estou dando o nome da classe para esse diblock como embalagem de conteúdo do workshop. Esta é a área para guardar todo o conteúdo desta seção do workshop. Sabemos que o conteúdo deve estar na primeira coluna da grade. Então, estou arrastando esta seção intitulada pegar dentro da embalagem de conteúdo do workshop. Agora estou criando um diblock abaixo da captura de conteúdo do workshop que está na primeira coluna para conter o conteúdo do código QR. Agora estou dando o nome da classe para isso como cabide transparente. Classificamos a embalagem do código QR. Então, precisamos adicionar a imagem do código QR. Em Encapsulamento de código QR, estou criando uma imagem qual já coloquei um código QR. Você pode ver que, mais adiante, colocamos o código QR dentro do código QR de um representante. Além disso, precisamos adicionar outra imagem. Então, estou criando um diblock e estou dando o nome da classe como rap do autor da citação. Como é um invólucro, precisamos adicionar uma imagem nele. Então, estou procurando por uma imagem e a criei. Então, vamos escolher a imagem do ativo. A imagem foi colocada aqui, precisamos torná-la uma imagem arredondada. Então, eu vou ultrapassar as fronteiras. Agora, tenho que dar um valor de pixel para o raio como cem. Agora, na tela, você pode ver que ela foi arredondada. espaçamento em toda a imagem está totalmente ocupado pois precisamos fornecer o espaçamento em toda a imagem. Então, em vez de selecionar a imagem, estou selecionando o código ou o representante para fornecer a largura e a altura abaixo do tamanho. Agora estou dando o valor da largura como 60 pixels e a altura como 60 pixels. Como pudemos ver , não está totalmente alinhado. Então, vou até a camada e seleciono o flexbox e deixo alinhá-lo ao centro e justificá-lo ao centro. Agora ele foi alinhado corretamente. Precisamos fazer o estilo sobre a imagem, como em nosso design. Então, sob as fronteiras, estou escolhendo o estilo tracejado. Estou dando a cor como empreendimento ao design figma. Estou dando o valor em hexadecimal. E estou ajustando o valor da largura como dois pixels. Para ser um círculo tracejado arredondado. Estou dando o raio como 100%. Finalizamos o código QR e uma imagem do autor. Em seguida, precisamos adicionar o conteúdo do código de digitalização. Então, dentro da embalagem do código QR, estou adicionando um parágrafo. Agora. Eu forneci o conteúdo como no design. Em seguida, na tipografia, estou alterando o tipo de fonte como Poppins e o peso 500, tamanho médio, com 16 pixels. Agora precisamos renomear o nome da classe. Então, estou dando o nome de digitalizar conteúdo de cabra. Agora eu mudei a cor da fonte para cor secundária, para mudar a cor do nome e selecionar o nome. E eles mudaram a opção de rap com span. Agora, sob a cor da fonte, estou dando o valor hexadecimal, como em nosso design. Agora estou renomeando o nome da classe para textos incorretos ***, scan ou o nome. Agora, na topografia na opção Mais, estou nos dando letras maiúsculas. Agora, para o alinhamento de todo esse conteúdo, esse é o conteúdo do código QR e selecionar o encapsulamento do código QR. Sob o layout, estou escolhendo um flex na tela e alinhando-o ao centro. E agora estou chorando por um espaço intermediário na justificativa, mas não é o esperado. Então, estou escolhendo iniciar, para que os itens fiquem alinhados à esquerda. O espaçamento não é suficiente entre o código QR e a imagem. Estou selecionando o código ou o rap. Agora, sob o espaçamento, estou ajustando o valor da margem esquerda para 15 pixels. Para o espaçamento no conteúdo do código, estou selecionando o conteúdo do código de digitalização. Sob o espaçamento, estou ajustando o valor da margem esquerda para 15 pixels. Novamente, temos a cor de fundo desse gráfico de código QR. Então, estou selecionando seu código, pegue o plano de fundo. Vamos escolher a cor, como em nosso design figma para obter o espaçamento dentro de um invólucro de código QR, estou fornecendo o valor de preenchimento ou inferior a 15 pixels. Precisamos de um canto arredondado para isso. Então, abaixo das bordas, estou dando o valor de 20 pixels para o raio. A imagem do autor e o conteúdo do código não estão alinhados adequadamente. Então, estou selecionando isso para revestir o conteúdo e estou atribuindo o valor de modelagem da argamassa a zero para ficar alinhado corretamente. Pudemos notar que ele chega ao centro. De acordo com o design, essa área não está totalmente ocupada. Para estabelecer isso, estou selecionando o conteúdo do workshop dentro dele, vou criar um bloco div. Agora vou colocar esse código QR empacotado dentro desse diblock. Precisamos dar o nome da classe para esse diblock. Então, estou selecionando o diblock e atribuindo a ele um nome de classe como área de código QR. Agora, sob o layout, estou escolhendo o bloco embutido na tela. A largura e a altura serão determinadas pelo conteúdo interno. Então, agora podemos ver que obtemos a estrutura como em nosso design, para obter o espaçamento ou a direita do invólucro do código QR. Estou dando o valor de preenchimento abaixo do espaçamento como 40 pixels. Vamos fazer a verificação na prévia. No filme anterior, pudemos ver que tudo está perfeitamente. Somente o botão lembra. Vamos desenvolvê-lo. Vamos adicionar o botão dentro da primeira coluna. Então, estou selecionando o conteúdo do workshop incluído nele. Estou dando um golpe mortal e estou dando o nome da classe para isso como pressionamento e estou dando o nome da classe para isso como botão Q para segurar o botão. Que dentro do drop, eu estou criando um botão. Agora precisamos dar o nome da classe para esse botão. Então, no seletor, estou escolhendo o nome da classe como botão, pois ela já existe. Portanto, ao desclicar no botão do nome da classe existente, o estilo que fizemos anteriormente será aplicado a esse botão. Você pode perceber as mudanças que foram feitas nesta tela. Agora estou renomeando o nome desse botão para reservar meu horário. Então, por enquanto, concluímos o básico que é necessário para o representante de conteúdo do workshop. Então, na próxima lição, veremos o aprimoramento desse pacote de conteúdo em desenvolvimento que deve ser feito na segunda coluna, segunda. 16. Seção de oficina - Parte 2: Quase concluímos as coisas necessárias que são necessárias no conteúdo deste workshop. Esse é o título da legenda, a descrição, o conteúdo curativo e o botão. Um dia, alguns dos aprimoramentos que precisam ser feitos no estilo lembram. E também precisamos nos concentrar na segunda coluna dessa grade. Vamos começar a desenvolvê-lo. Precisamos fornecer o mesmo espaçamento entre o título, o subtítulo e a descrição. Então, estou selecionando o título desta seção e estou dando o valor da margem para dez pixels. Como copiamos esse gráfico de título desta seção OB. As mudanças feitas aqui serão afetadas na seção dois desse serviço. Agora concluímos a parte da maré. Em seguida, estou selecionando este parágrafo e estou dando o nome da classe S seção intitulada conteúdo. Agora precisamos de um espaçamento na parte superior dessa área de conteúdo. Então, estou selecionando isso e dando o valor de preenchimento ou a parte superior como dez pixels. E agora, para o espaçamento dentro da área do código QR, vou até o espaçamento e seguida, darei o valor do preenchimento superior como 25 e o valor do preenchimento inferior como 40 pixels. Agora obtemos o espaçamento necessário ou menor. Vamos publicá-lo para vê-lo no modo de pré-visualização. No modo de visualização, pudemos ver que cada espaçamento está alinhado corretamente, como no design. Então, agora vamos subir para a segunda coluna. Na grade do workshop, estou criando um desenvolvedor. E agora estou dando o nome da classe para esse diblock como rap de imagem de workshop, pois criamos o espaçamento para essa imagem. Então, precisamos criar uma imagem e o elemento da imagem é maior. Agora estou clicando em Escolher imagem e selecionando a imagem do ativo. Precisamos fornecer a cor de fundo para essa imagem. Então, eu estou selecionando a imagem do workshop, um rap, e indo para o fundo. E estou selecionando a imagem e o gradiente dentro dela. Estou selecionando a capa para o tamanho e a posicionando no centro. Então, agora vamos escolher a imagem do ativo. No design, temos os cantos arredondados. Então, vou até as bordas e dou o valor do raio como 20 pixels. Precisamos alinhá-lo. Então, sob a tipografia, estou clicando em alinhar ao centro. Assim, você pode ver que está alinhado ao centro. Agora estou selecionando a grade da oficina, como vimos no design. A segunda coluna é maior que a primeira coluna e também não há espaço suficiente entre essas duas colunas. Então, estou selecionando essa grade e vou para a grade Editar. Então, ao selecionar a primeira coluna, estou dando o tamanho de 0,7. E também deixe-me dar o valor da lacuna entre essas duas colunas como 60 pixels. O conteúdo do workshop, ou seja, o conteúdo da primeira coluna, está bem no topo. Então, precisamos usar ômega para o mesmo cão. Então, ao selecionar o alinhamento central sob a camada, você pode ver o conteúdo chegar ao centro. Vamos publicá-lo para ver como funciona. Assim, pudemos ver que tudo está perfeitamente desenvolvido. Na próxima lição, desenvolveremos esta seção, digamos que seja sobre o autor. 17. Seção de mim - Parte 1: Nesta lição, veremos uma seção Sobre mim. Nesta seção sobre o autor , você pode ver o autor de outros e os links sociais deles disponíveis e alguns detalhes sobre o outro. E você também pode ver os trabalhos do autor. Então, esse é o propósito de fazermos esta seção sobre mim. Então, chegando ao planejamento do modelo de caixa, criaremos uma seção para ele. E dentro dele, haverá um diblock. E usando a grade, teremos três colunas. A primeira coluna terá o octeto está lá e os links de mídia social. Na segunda coluna, teremos uma breve descrição sobre o autor e também haverá um link para ver os trabalhos do autor. E na terceira coluna, teremos um vídeo. Então esse é o planejamento que vamos implementar. Vamos começar a desenvolvê-lo. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner. O nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner que é apropriado para a seção necessária com um corpo escolhido. Agora vou criar uma seção depois de avaliar esta seção, o nome da classe será C, minha seção de trabalho. O valor de preenchimento dessa seção será cem pixels na parte superior e 100 pixels na parte inferior. Criamos uma seção. Então, com menos de oito anos, criaremos um contêiner. Agora, o nome da classe desse contêiner será o contêiner de classe existente. Sob o contêiner, criarei um diblock para que o diblock retenha todo o conteúdo que vamos desenvolver. Vamos dar a ele um nome de classe para esse diblock, conforme veja meu resumo de trabalho. Criamos o espaço para armazenar esse conteúdo. Agora, vamos criar uma grade. No design, já vimos que são três colunas. Então, estou excluindo uma linha e adicionando uma nova coluna. Precisamos renomear o nome da classe para essa grade. Estou renomeando o nome da classe como minha grade de trabalho. Então, agora vamos criar o conteúdo da pior coluna para isso na grade Meu Mundo, estou criando o blog. Deixe a data da aula deste diblock ser o representante de introdução do autor. Portanto, o conteúdo introdutório do ATO será incluído no representante de introdução do autor. Criamos o espaço para todo o pedido em andamento. Como podemos ver, há um espaço para guardar a imagem do autor. Então, precisamos criar um desenvolvido separado para manter essa imagem. Então, sob a introdução do autor, monótona e criação de uma div. E estou dando o nome da classe como autor de outro embrulho dentro dela, a imagem será colocada. Temos que colocar a imagem. Então, estou selecionando o autor de outro embrulhado nele, estou procurando por uma imagem. Agora, com a ajuda de escolher Imagem, estou escolhendo uma imagem do ativo, para que a imagem tenha sido colocada com sucesso. Agora, precisamos fornecer o tamanho correto para o invólucro externo do autor que contém a imagem. Então, estou selecionando o autor de outro invólucro e estou dando a largura como 253 pixels e a altura como 253 pixels. Então, será no tamanho Esquire. Precisamos fornecer a cor de fundo como em nosso design. Então, vou para o segundo plano, estou dando o valor hexadecimal como desenho numérico figma, o plano de fundo da imagem, ou seja, o autor do rap deve estar em um círculo. Então, abaixo da borda, estou dando o valor como 100 por cento no raio. Para que o círculo tenha sido criado. Para fazer o alinhamento adequado da imagem. Estou selecionando flex na tela. Estou alinhando-o com o centro e estou justificando com o centro. Mas no Canvas, pudemos notar que a imagem está sobreposta. Isso é muito bom. Então, precisamos ajustar isso. Mas, para estabelecer isso, estou passando para o tamanho abaixo do transbordamento. Estou selecionando Hayden. Agora, você pode ver na tela que a sobreposição está oculta, que a imagem é um pouco um pássaro. Para colocá-lo abaixo dessa camada, estou selecionando o, alinhando-o na parte inferior. Concluímos a outra imagem. E a seguir está uma liga de mídia social. Para criar isso, estou selecionando o encapsulamento de introdução do autor abaixo dele, estou criando um bloco div. Então, isso desenvolvido criará o espaço para manter todos os links de mídia social. Vamos dar o nome da classe como autor, representante social. Precisamos criar os links. Então, com a ajuda do QuickFind, estou procurando o link. Depois que o bloco de links for criado, precisamos adicionar qual tipo de imagem de mídia social será incluída dentro do bloco de links. Então, com a ajuda da multa rápida. Estou procurando por uma imagem. Agora, abaixo do ativo, estou usando o logotipo do Facebook. Precisamos criar o espaçamento em todo o logotipo do Facebook. Sob o espaçamento, estou dando o valor de preenchimento para dez pixels ou menos. Sinto que o espaçamento à esquerda e à direita não é suficiente. Então, estou dando o valor como 15 pixels. Agora, vamos renomear o nome da classe desse link como link social do autor. O mesmo design é aplicável aos outros dois links de mídia social. Então, estou duplicando o link social desse autor duas vezes. Agora estou substituindo a imagem por ***** e a terceira imagem pelo Instagram. Para fazer com que o conteúdo da primeira coluna fique no centro. Estou justificando esse conteúdo para centralizar. Mesmo se fizermos com que todo o conteúdo seja alinhado no centro. Mas os links de mídia social não estão alinhados centralizados. Então, estou selecionando Auto social rap, que contém todos os links de mídia social. Agora, sob a topografia, sob a elaine, estou selecionando o centro S. Agora você pode ver no Canvas que todos os links de mídia social estão alinhados ao centro. O espaçamento entre a imagem do autor e o link da mídia social não é suficiente. Então, ao selecionar a respiração social do autor, estou dando o valor de preenchimento, que é o valor de preenchimento superior de 20 pixels. Terminamos o conteúdo da primeira coluna. Vamos pular para a segunda coluna. Para fazer isso na grade Meu Mundo, estou criando uma nova bolha. Vamos dar a ele um nome de classe para esse diblock como embalagem biológica do autor. Isso é o mesmo, pois o conteúdo da biografia do autor é o mesmo da seção anterior. Estou passando para a seção do workshop e selecionando a seção intitulada representante. Agora estou duplicando a seção intitulada wrap e estou arrastando para a biografia do autor. O mesmo conteúdo é duplicado aqui. Agora precisamos fornecer o conteúdo de acordo com nosso design. Além desses condensados, precisamos adicionar um link com uma seleção de seções intitulada rep. Estou criando um link. Estou renomeando esse link como semi-trabalho. Então, ao clicar nesse link, podemos ver os trabalhos do autor. Criamos esse link como novo, então precisamos mudar a tipografia dele. Agora vamos renomear esse link como link de trabalho. Agora precisamos criar um diblock que conterá esse link. Dentro do envelope biográfico do autor. Estou criando um novo bloco. Vamos arrastar o diblock, o link The Work. Agora, coloque esse link de trabalho dentro desse bloco. Agora precisamos dar a ele um nome de classe para esse cão div. Vamos dar o nome de Walk Linked Wrap. Então, ao colocar alguns dos elementos dentro do diblock, pudemos criar o espaçamento. Ou seja, o espaçamento desnecessário que precisávamos. Então, agora, para tornar o espaçamento entre o parágrafo e o link com embalagem plástica de lã um seletor, estou dando o valor de preenchimento para ele na parte superior como 20 pixels. Então, terminamos o conteúdo das duas colunas. Vamos ver isso em um modo de pré-visualização. Então, estou clicando em publicado. Mas ao passar o mouse sobre o link, ele não faz nenhuma transição. Então, precisamos fazer a transição para esse link. Vamos voltar atrás. Agora estamos selecionando o mundo jogando. Observe que não estamos selecionando a embalagem plástica mundial, apenas selecionando o link. Agora, no não estado, por padrão, o estado estará nele. Agora estou passando para a transição sob o tipo que estou selecionando s, cor do formulário. Vamos mudar o estado para a OMS. Como selecionamos, a transição é uma cor de fonte. Então, outro tipo de biografia, estou dando a cor da fonte à cor primária da amostra. Agora, vamos ver se funciona. Agora, na prévia, pudemos ver que o link está funcionando perfeitamente. Completamos o conteúdo das duas colunas. Na próxima lição, veremos o conteúdo da terceira coluna. Vamos seguir em frente. 18. Seção de Quem sou - Parte 2: Até agora, concluímos o conteúdo da primeira coluna e da segunda coluna da grade. Agora, nesta lição, veremos a terceira coluna, que é o conteúdo do vídeo. E também veremos como estilizar a terceira coluna. Além disso, não fornecemos uma cor de fundo para toda a seção e também não a estilizamos. Então, isso é tudo o que veremos nesta lição. Vamos mergulhar nisso antes de nos concentrarmos na terceira coluna, vamos criar o bloco div sob a grade Meu trabalho. Agora, para o nome da classe desse registro de div, estou nos dando rap em vídeo de trabalho. Precisamos criar o link para o vídeo. Vídeo rap do Under the Work. Estou criando um blog com links. Onde o bloqueio de links nos redirecionará para o vídeo. Vamos começar com o link fictício. Agora, dentro do bloco de links, precisamos adicionar uma imagem. Então, vamos escolher Imagem. Estou selecionando uma imagem do ativo. Precisamos fornecer o tamanho apropriado para essa imagem. Então, estou selecionando este link para o blog. Então, outro tamanho, estou dando a largura como 75 pixels e a altura como 75 pixels. Agora, vamos torná-lo mais flexível a partir da tela. Alinhe essa imagem ao centro e justifique-a até o cento. No design, vimos uma imagem de fundo desse bloco de links. Então, estou passando para o segundo plano e estou escolhendo uma mesa como deveria ser em um círculo. Então, abaixo do mais amplo, estou dando o valor do raio como 100% cada. Eu não renomeei o nome da classe para esse bloco de links. Então, estou renomeando esse bloco de links como bloco de links de vídeo. Agora precisamos dar a ele uma imagem de fundo. Então, estou selecionando o vídeo de trabalho, rap. Com esse seletor, estou passando para o plano de fundo, outra imagem e gradiente. Estou escolhendo a capa tamanho S clicando em Escolher imagem, estou selecionando uma imagem do ativo. E vamos posicionar essa imagem no centro. Precisamos criar um diálogo para colocar esse bloco de links de vídeo dentro dele. Agora precisamos dar o nome da classe para esse desenvolvimento. Então, estou dando o nome da classe S video. Vou concluir que esse propósito desenvolvido é apenas alinhar este link de vídeo. Agora, com a seleção do vídeo alinhada, pegue. Outra camada. Estou selecionando o flex da tela alinhando-o ao centro e justificando-o ao centro. Para fazer com que o vídeo vinculado chegue ao centro, estou dando o valor de preenchimento para essa captura alinhada ao vídeo. Vamos dar o valor de preenchimento como 120 pixels na parte superior e 120 pixels na parte inferior. Agora precisamos transformar a imagem em um canto arredondado. Então, estou selecionando o envoltório de vídeo abaixo da borda. Estou dando o valor de 40 pixels para o raio. Não usamos a cor de fundo para todo esse conteúdo. Então, estou selecionando esta captura de trabalho da EMA. Então, ao selecionar isso, estou passando para o plano de fundo abaixo da cor, estou dando o valor hexadecimal. Agora estou dando o valor de preenchimento na parte superior para 140 pixels na parte inferior, para 140 pixels à esquerda e à direita, estou dando o valor como espaçamento de cem pixels e a esquerda e a direita parecem um um pouco grande. Então, estou alterando o valor para 80 pixels. Novamente, o fundo tem o canto arredondado. Então, com a seleção de ver minha capa de trabalho, estou indo para as bordas e dando o raio de 40 pixels. Portanto, o conteúdo na primeira coluna parece estar muito mais próximo da segunda coluna. Então, estou selecionando a primeira coluna, que é a autora em grow wrap. E eu vou justificar e escolher pela esquerda. Todo o conteúdo das três colunas tem o mesmo espaçamento, mas no design, não gosta disso. Então, vamos reestilizar esses conteúdos. Agora, estou escolhendo a grade inteira, que é minha grade mundial abaixo dela. Estou escolhendo a grade de edição. Sob a grade de edição. Vamos redimensionar a primeira coluna. Agora estou redimensionando a segunda coluna dois. Agora fizemos o ajuste como em nosso design de figma. Vamos publicar isso para vê-lo em um modo de pré-visualização. No modo de pré-visualização, pudemos ver todos os links de mídias sociais. Não faz nenhuma transição. Além disso, o link do vídeo não faz nenhuma transição. Então, precisamos fazer a transição para tudo isso. Vamos voltar com uma seleção de blocos de links de vídeo. Também no estado não estatal, estou migrando para a transição e selecionando o tipo para a cor de fundo. Agora, vamos mudar o estado para saber como fizemos a transição para a cor de fundo. Então, sob o plano de fundo e na cor, estou escolhendo como cor secundária da amostra. Vamos ver isso no modo de pré-visualização. Para ver como a transição funciona. O mesmo processo se aplicará aos links de mídia social. Siga as mesmas etapas para os links de mídia social para obter o efeito de transição. Na próxima lição, veremos a seção da guia de licenciamento com dois toques. E também veremos como tornar as guias viáveis. Vamos ver na próxima lição. 19. Seção de licenciamento de guia - Parte 1: Nesta lição, desenvolveremos a seção de licenciamento do nosso site. Antes disso, vamos ver o planejamento. Como vimos nas lições anteriores. Usaremos uma seção e dentro dela haverá um contêiner. Novamente, dentro do contêiner, usaremos um bloco de fazer para armazenar todo o conteúdo. E dentro dessa div, usaremos o modelo grego, que consiste em duas colunas, enquanto a primeira coluna será menor que a segunda coluna. Na primeira coluna, colocaremos uma imagem. E na segunda coluna, teremos o conteúdo do licenciamento. E na parte superior, teremos a guia com duas guias. Um é para licenciamento de arte e outro é para Comissão. E abaixo das guias, teremos o conteúdo de licenciamento com um título. E parte do parágrafo. E abaixo do parágrafo, teremos as duas partes. Essa é uma para a pose de Alfa e h. E a segunda é o conteúdo sobre esse alfa. Então esse é o planejamento que vamos desenvolver. Vamos continuar a desenvolvê-lo. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de avaliar a seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Agora, com a seleção do corpo, vamos criar uma seção. Estou dando o nome da classe para esta seção como seção da guia de licenciamento. Dentro da seção, vamos criar o côndilo agora. Como fizemos nas aulas anteriores, darei novamente o contêiner de classe existente para esta. Não fornecemos um valor de preenchimento para esta seção. Então, estou selecionando a seção da guia de licenciamento e atribuindo o valor do preenchimento superior e do preenchimento inferior como 100 pixels. Agora, sob o contêiner, vamos criar um diblock. Vamos dar o nome da classe para esse diblock como representante da guia de licenciamento, mas todo o conteúdo de seu licenciamento será incluído nessa guia de licenciamento. Vamos criar uma grade sob o toque rap de licenciamento, como vimos no design, como já sabemos, que ela tem apenas duas colunas e uma linha. Então, estou excluindo uma linha. Além disso, a primeira coluna é menor que a segunda coluna. Agora estou ajustando o tamanho da primeira coluna. Como precisamos renomear o nome da classe para essa grade, pois isso não deve afetar a outra grade, que fizemos nas lições anteriores. Então, vamos renomear essa grade de licenciamento S. Criamos a grade, mas dentro de cada coluna, precisamos adicionar o diblock para conter o conteúdo dela. Então, vamos criar uma div, dar uma olhada na grade de licenciamento onde colocaremos o bloco D, digamos, na primeira coluna. Vamos dar a ele um nome de classe para esse bloco de definição como embalagem de imagem de licenciamento. Agora, dentro deste envoltório, procurando uma imagem usando uma multa rápida. E vamos escolher a imagem do ativo. Vamos criar novamente um div para colocar a imagem dentro desse desenvolvimento. Agora estou arrastando o diblock sobre a imagem e colocando a imagem dentro desse bloco. Vamos dar o nome de imagem de licenciamento, pois a imagem tem um canto arredondado. Então, ao selecionar a imagem, vou até a borda e atribuo o valor do raio como 40 pixels. Agora estou renomeando o nome da classe dessa imagem como uma imagem de licenciamento. Mas a classe já existe. Agora vou mudar o nome dessa imagem. Então, vamos apresentá-la como uma imagem de fronteira de licenciamento. Terminamos a primeira coluna, agora precisamos nos concentrar na segunda coluna. Então, estou escolhendo a grade de licenciamento dentro dela. Precisamos criar uma duplicata. Vamos dar o nome da classe como representante de conteúdo licenciado. Vimos no design. Na parte superior, ele tem duas abas. Então, vamos adicionar uma guia usando a multa rápida, estou procurando por guia. Agora, a guia foi criada com três guias, mas no design temos apenas as duas guias. Portanto, precisamos excluir a guia Adicionar. Agora vá até o navegador, basta clicar nas guias. Teremos duas coisas. Isso é menu de abas e toque em conteúdo. O menu de abas mostra quais são os menus que vamos fornecer. Esse conteúdo é para que, ao clicar na primeira etapa, o conteúdo relacionado será exibido abaixo dela. Clicamos na segunda guia. O conteúdo relacionado será exibido abaixo dele. Se expandirmos o menu de abas, teremos dois links que estabelecem um e o dabbling funcionam. Novamente, expandindo essa confusão, teremos o bloco de texto. Isso é para renomear essa guia. Agora vou estilizar a guia vinculada a. Então, estou selecionando a opção e vou escolher o tipo de Roffey. Estou selecionando a fonte como Poppins, com peso de 500, tamanho médio com 18 pixels e altura de largura, 1,3 hífen. Vamos mudar a cor da fonte. Vamos renomear o nome da classe desse dabbling, S, dabbling. Agora precisamos mudar a cor de fundo dessa guia. Então, vou ficar em segundo plano, estou escolhendo a cor branca. Vamos ajustar o valor do preenchimento superior e inferior desse deslocamento para 20 pixels. No valor de preenchimento esquerdo e direito, 40 pixels verdadeiros. Vamos fazer o canto arredondado para essa guia. Então, vou usar outras bordas e dar o valor do raio S, 20 pixels. E vamos dar o estilo para essa borda como sólido e, em seguida, dando a cor da borda em valor hexadecimal, terminamos a guia. Faça, vamos passar para o toque. O nome da classe para a primeira etapa será a duplicação, ou seja, a classe existente. Portanto, o estilo que fizemos na troca do nome da classe será aplicado a esta guia, também no seletor, você poderá ver que é uma nova classe atual. A razão por trás dessa classe atual é que estamos usando a guia. Então, uma das abas estará ativa. Então, agora, a taverna está ativa. Então, por padrão, temos essa classe atual em verde. Assim, pudemos entender que estamos trabalhando nessa guia ativa. Resumindo, se você ver essa classe atual, poderá entender que essa guia específica é a guia ativa. Portanto, precisamos definir a aparência dos dados quando estão ativos. Com o dabbling e as classes atuais selecionadas. Estou passando para a topografia e selecionando a cor da fonte. Estou escolhendo a cor da fonte para branco. Agora vamos mudar a cor do plano de fundo para esta etapa. Então, vou para o plano de fundo e dou a cor à bobina secundária da amostra para que possamos ver quando ela estiver ativa que essa cor ficará assim. Precisamos do espaçamento entre essas duas etiquetas. Então, com a seleção de tap do, estou atribuindo o valor da margem direita para 20 pixels. O valor que fornecemos será armazenado na classe dabbling, a da guia, também usando essa classe de dabbling. Portanto, o valor também será aplicado a essa guia. Então, está criando um espaço. O valor da margem será aplicado a essa guia. E também é por isso que está criando um espaço entre Taiwan e a Tap. Vamos renomear esse menu de abas. Para a primeira aba, estou nos dando uma licença de arte para a tatuagem. Estou nos dando uma comissão classificar a guia. Esse conteúdo da guia será criado automaticamente na seção da guia no conteúdo Teremos esse toque e as guias correspondentes. Então, deixe-me te mostrar. Agora estou clicando na aba e na aba um no lado direito, vou dizer coisas aqui. Você pode ver que é um botão de rádio, ou seja, uma guia ativa. Se eu clicar nessa guia, guia um será ativada com a guia correspondente, que é o conteúdo da guia. Se eu clicar na guia para ser uma guia ativa , as duas principais serão ativadas e o botão da guia correspondente será ativado. É assim que vamos desenvolver o conteúdo dessa guia. Na próxima lição, veremos conteúdo do licenciamento, na verdade, a dívida. Vamos seguir em frente. 20. Seção de licenciamento de guia - Parte 2: Na seção de licenciamento, concluímos a primeira coluna e também a seção da guia, junto com a transição. Agora vamos ver sobre o conteúdo dessa guia específica. Ou seja, se eu clicar nessa torneira de licenciamento de arte, esse conteúdo será exibido abaixo dela. Se eu clicar no toque de comissão, o conteúdo específico será exibido abaixo dele. Então, vamos ver como vamos fazer isso. Vamos seguir em frente. Vamos desenvolver o conteúdo dessa guia no navegador que você pode ver abaixo do conteúdo da guia, precisamos tocar em pan. Isso é para a aba 1. O conteúdo da guia está muito próximo um do outro, então precisamos criar um espaçamento entre elas. Então, estou selecionando o conteúdo da guia. Estou abaixo do espaçamento e estou dando o valor da margem superior como 20 pixels. Agora, a seleção de tap pan, ou seja, para o Tab one, vou fazer com que seja um canto arredondado. Eu vou para a fronteira. Estou definindo o valor do raio para 40 pixels. Você é o espaçamento desse homem surdo, eu estou passando para o espaçamento e seguida, dando o valor superior e inferior. Isso é para preenchimento S, 90 pixels e para a esquerda e direita como 70 pixels. Vamos mudar a cor da borda para isso. Então, vou usar outras bordas e dar a cor em um valor hexadecimal. Então, agora vamos começar a criar o conteúdo dentro dele. Sob a faixa de toque. Para o topo, estou procurando o título. Dentro dela. O título será criado e vamos mudar o título tipo-2, H2 e renomear o conteúdo do título, listando a tipografia para ele. Então, sob a tipografia, estou definindo o tipo de fonte como marionetes. Espere, S 800, em negrito extra e com o tamanho de 50 pixels. E com a altura de 1,3 hífen. Precisamos mudar a cor da fonte. Faça isso abaixo da cor, estou selecionando a cor secundária. Agora estou selecionando a opção de mais tipos em maiúsculas. Estou selecionando a segunda opção. Agora, vamos renomear o nome da classe de título como o título do conteúdo. Agora precisamos adicionar uma descrição sobre isso. Então, sob a bandeja da torneira, estou procurando por um parágrafo. O parágrafo será criado. Agora, abaixo do parágrafo, precisamos adicionar ofertas em R para criar um bloco que está abaixo do parágrafo, estou selecionando a faixa superior. Então, agora estou procurando por diblock. Então, o bloco do será criado. Então, vamos mudar o nome da classe desse diblock conforme Alpha vai e h bar AB. Portanto, a porcentagem da oferta e o conteúdo relacionado a ela serão armazenados dentro desse rato. Agora, em vez dessa porcentagem de oferta RAB, teremos que fazer blocos. Isso é para a porcentagem do conteúdo relacionado a isso. Então, primeiro, vamos criar o primeiro cão div. Estará abaixo da porcentagem de oferta H Rap. Vamos dar o nome da classe para esse diblock como embalagem de oferta. Agora, dentro disso, podemos fornecer o valor percentual para estabelecer isso. Vamos pesquisar o título abaixo deste pacote de ofertas. Agora, o título é maior. Vamos mudar o tipo de título para H3. Agora estou alterando o conteúdo desse título para 80 por cento h. Vamos mudar a tipografia para ele. Então, estou examinando a topografia e definindo a fonte como Poppins e pesando o mesmo que nossos cem parafusos e tamanhos 50 pixels e hífen híbrido de 1,3. Agora, vamos mudar a cor da fonte para a cor primária. Na seção de cores, precisamos alterar o nome da classe desse título. Então, estou dando o Rename e estou alterando isso para representar o valor h. Não precisamos de nenhum valor de margem para esse valor percentual. Então, estou definindo o valor da margem como zero. Precisamos fazer com que esse valor percentual esteja dentro da caixa. Como já sabemos, o valor do personagem está dentro dele. Essa é a embalagem da oferta para que possamos definir o tamanho para obter a caixa. Para isso, estou selecionando esse contorno de oferta e atribuindo esse valor de tamanho como 170 pixels para a largura e 150 pixels para a altura. Agora estou selecionando o fluxo na tela e, em seguida, estou alinhando-o ao centro e justificando-o com o centro para que possamos ver esse valor percentual chegando ao centro. Agora, a cor do plano de fundo deve ser alterada. Para isso, vou para o plano de fundo e estou definindo a cor em valor hexadecimal, como em nosso design, para torná-la um canto arredondado, vou usar outras bordas e dar o valor para o raio como 30 pixels. Concluímos o representante da oferta. Agora, dentro desse pacote percentual da oferta, precisamos adicionar o conteúdo relacionado ao conteúdo que está dentro dela. Vamos criar um blog div para que o bloco seja criado. Vamos dar a ele um nome de classe para isso como captura de conteúdo de oferta. Fizemos o envoltório dentro dele. Precisamos criar o conteúdo para isso com uma seleção de conteúdo da oferta dentro dela . Estou selecionando o título. Vamos atribuir o tipo de título ao hedge três, e vamos mudar o conteúdo do título, que é o conteúdo do título. Agora, para a topografia deste título, estou escolhendo a fonte como Poppins e o peso como 500 médio. Vamos dar o tamanho de 25 pixels e com a altura de 1,2 hífen. Agora precisamos mudar a cor da fonte para outra cor. Estou escolhendo uma cor secundária. Não alteramos o nome da classe para esse título. Então, estou escolhendo o título e renomeando o nome da classe para o título como subtítulo da oferta. Adicionamos a legenda e, abaixo oito, precisamos adicionar uma descrição para isso. Então, estou selecionando a embalagem de conteúdo de oferta, que contém todos os conteúdos. Dentro dela. Precisamos criar um parágrafo. Agora, criamos o parágrafo para o conteúdo. O conteúdo não está alinhado como em nosso design, então precisamos fazer o alinhamento correto. Para isso. Estou selecionando todas as quatro poses e cada inspiração ao selecionar essa oferta de embalagem percentual. No layout, estou selecionando flex e o alinhando com o remetente. porcentagem de ambas as ofertas no conteúdo da oferta é próxima uma da outra. Precisamos fazer o espaçamento entre esses dois. Vou criar o espaçamento na preparação do conteúdo da oferta. Para o preenchimento esquerdo, estou dando o valor S, 40 pixels. Então, agora fizemos com que o espaçamento para essa fase do título do conteúdo da guia não seja bom. Então, estou selecionando o título do conteúdo da guia abaixo do espaçamento, estou atribuindo o valor da margem para a parte superior e inferior como zero. Como o espaçamento entre o parágrafo e porcentagem de rap da oferta não é suficiente. Então, estou selecionando a porcentagem de oferta RAB e dando o valor de preenchimento superior para 20 pixels. Então, agora temos o espaçamento para fazer com que a legenda da oferta fique no topo. Estou atribuindo o valor da margem superior a zero. Agora estou fazendo com que o valor da margem inferior seja zero. Acho que a legenda e a descrição estão muito próximas uma da outra. Então, estou dando o valor da margem inferior para cinco pixels. Para obter um pequeno espaçamento , estamos fazendo isso. Vamos publicá-lo para vê-lo no modo peruano. Portanto, no modo de visualização, tudo na seção de licenciamento está bem. Criamos o conteúdo para a primeira etapa, que é o licenciamento de arte. Agora precisamos passar para a segunda guia. Temos o mesmo design para a segunda guia. Faça isso abaixo do conteúdo da guia, estou selecionando a faixa de abas para a parte superior dentro dela. Pudemos ver quais são as coisas que desenvolvemos. No início, estou duplicando o título do conteúdo da guia. E eu estou arrastando isso para a bandeja da torneira, que é para a aba. E então vamos duplicar o parágrafo. E vamos arrastar isso até a torneira e ir até a guia anexar essa oferta, percentual de atrito. E novamente, duplicando isso e arrastando-o até a torneira. E para a guia de cada conteúdo da guia, uma é duplicada na guia Agora vou dizer coisas na configuração de toque. Estou selecionando a guia para, ou seja, a guia ativa. O conteúdo da primeira etapa é um lead duplicado na segunda etapa, mas não o estilo. Para aplicar o estilo de um conteúdo ao toque no conteúdo, precisamos fornecer o mesmo nome de classe. Mas no Navigator pudemos ver que ele tem vários temas. Então, estou selecionando a bandeja de toque para a parte superior e estou renomeando o nome da classe para voltar. Agora estou selecionando a bandeja de toque para a tab2 e estou dando o nome da classe como a classe existente, ou seja, tap pan. Então, ao fornecer a classe existente, você pode ver que todo o estilo é aplicado à guia do conteúdo. Agora estou alterando o título desse conteúdo e, em seguida, estou alterando o valor percentual dele. Agora, vamos publicá-lo para vê-lo em um modo de pré-visualização. Agora, vamos ver se a guia está funcionando corretamente ou não. Então, estou clicando na etapa eletrônica, o conteúdo relacionado à guia está mudando respectivamente. Primeiro, precisamos alterar parte do espaçamento dessa seção de licenciamento? Agora estou selecionando o título do conteúdo da guia e atribuindo o valor da margem inferior a dez pixels para dar a lacuna entre a primeira coluna e a segunda coluna. Estou passando para a grade de licenciamento para selecionar a grade inteira. Agora, sob a grade ADA, estou ajustando a lacuna para 35 pixels. Agora, com a seleção da própria grade de licenciamento, vamos alinhá-la ao centro. Vamos publicá-lo para ver como funciona. No modo de pré-visualização, pudemos ver tudo na seção de licenciamento de Dan Asper em nosso design. Na próxima lição, veremos a seção de depoimentos, que consiste em duas colunas. A primeira coluna é para os títulos, e a segunda coluna é para exibir todos os comentários feitos pelos visitantes. Vamos ver como ligar para a próxima lição. 21. Seção de depoimentos - Parte 1: Nesta lição, veremos mais sobre a seção de depoimentos. Agora, vamos ver o planejamento dessa seção de depoimentos. Inicialmente, estaremos na seção de classificação e dentro dela haverá um contêiner. E aqui, novamente, usaremos um modelo de grade. Essa grade terá duas colunas. A primeira coluna terá um título para o comando. Na segunda coluna, teremos o conteúdo do depoimento tanto quanto precisávamos para tudo. Ou seja, mesmo para o subtítulo e o título, usaremos um diblock separado para acessar o conteúdo da imagem e do parágrafo. Aqui também usaremos um diblock separado para que tudo possa ser organizado muito bem. Agora temos uma ideia sobre o planejamento. Vamos começar a desenvolvê-lo. Agora, sob o corpo, vou criar uma seção. E vamos dar o nome da classe para esta seção como seção de depoimentos. Abaixo do espaçamento, estou dando o valor de preenchimento para a parte superior e inferior como 100 pixels. Já sabemos que vamos adicionar um contêiner. outra seção, darei o nome da classe para esse contêiner como contêiner de nome de classe existente com uma seleção de contêiner, vamos adicionar uma grade. Android. Como já sabemos, precisamos apenas das duas colunas, então estou excluindo uma linha e vamos ajustar a lacuna entre essas duas colunas para 60 pixels. Deixe o nome da classe para essa grande grade de depoimentos. Criamos uma grade. Então, vamos nos concentrar na primeira coluna para começar a dobrar a primeira coluna. Agora eu preciso adicionar o bloco do. Agora, o nome da classe para essa div será o título do depoimento. Vimos no design. A primeira coluna terá o título, o estilo do conteúdo do título. É o mesmo da seção anterior. Então, estou indo para a seção do workshop e selecionando a seção intitulada embrulho, e estou duplicando essa parte. Agora vamos arrastá-lo para o rap do título do depoimento, pois será o título da nossa seção de depoimentos. Como precisamos renomear esse título como em nosso design com uma seleção do título desta seção, vou examinar a tipografia, estou selecionando mais opções de tipo em maiúscula. Estou selecionando a segunda opção. Agora, vamos fazer uma quebra de linha, como em nosso design. Agora concluímos a primeira coluna dessa grade. Vamos passar para a segunda coluna. Para isso, estou selecionando a grade de depoimentos abaixo dela. Estou procurando por um bloco de cães. Agora estou dando o nome da classe para esse diblock como embalagem do conteúdo do depoimento. O conteúdo desta seção de depoimentos será como um comando. E abaixo dela, estará uma imagem, um nome do autor e do destino e junto com a classificação. Então, agora vamos criar uma aspa na parte superior. E abaixo dela, haverá algum comando. Vamos começar a fazer isso. Agora, no resumo do conteúdo do depoimento, estou criando um blog. Vamos dar a ele um nome de classe para este item de depoimento do diblock S. Agora, dentro dela, adicionaremos uma imagem. Escolha a imagem do ativo. Precisamos adicionar o comando. Então, abaixo do item do depoimento, estou adicionando um parágrafo. Agora, sob a tipografia. Estou fazendo esse ladrilho, faça isso Alec. Agora estou dando a cor da fonte para esse conteúdo em valor hexadecimal como design inovador. Estou usando o nome da classe para este parágrafo como conteúdo de depoimento. Agora estou ajustando a altura desse conteúdo para 1,6 hífen para adicionar uma imagem externa e o nome do autor. Estou criando uma div, que está abaixo do item de depoimento. Estou dando o nome da classe para esse diblock como cliente testemunhal RAB. Fizemos o invólucro que contém a imagem, o nome do autor e a classificação. Mas para que a imagem seja adicionada, precisamos criar um Duplo para colocar a imagem. Vamos criar um bloco de tarefas sob o depoimento do representante do cliente. Então, dentro desse testemunho e cliente, adicionaremos uma imagem. Vamos procurar uma imagem para ser adicionada a você em parte do outono técnico. A próxima parte não está gravada. Então, no final deste conteúdo, mas eu regravei essa parte escolhendo a imagem novamente. Por causa da adição deste clipe no meio, você pode ver os níveis do conteúdo mudarem. Então, por favor, ignore isso. Apenas se concentre apenas na escolha da imagem. Então, agora estou escolhendo a imagem do ácido. Para fazer com que a imagem seja arredondada. Eu vou até as fronteiras e estou dando o valor do raio 200. O nome da classe dessa imagem como avatar do cliente. Então essa é a parte que perdemos. Vamos voltar ao normal para a continuação do desenvolvimento. Dentro da glicina testemunhal, precisamos adicionar o conteúdo do cliente. Temos a imagem do cliente e os detalhes do cliente. Então, para os detalhes do cliente, criei um blog e nomeei o bloco do como detalhe do cliente encapsulado nele para fornecer o nome do cliente que estou usando o título. O título é renomeado para o nome do autor para alterar a tipografia. Escolhendo a fonte como Poppins, o peso é de várias centenas de taças. E o tamanho será de 20 pixels e deixará a altura de 1,2 hífen. Estou escolhendo a cor da fonte para a cor secundária da amostra. Agora estou dando o nome da classe para este título, pois Klein precisa dar a demissão desse cego, estou adicionando um título abaixo da rampa detalhada do cliente. Deixe o cabeçalho digitar B H Phi. Agora estou dando a designação de negação. Para criar o estilo desse título, vou usar outra tipografia. Estou mudando a fonte para Poppins em forma de 600 em negrito e o tamanho para 18 pixels com altura de 1,2 hífen. Para dar a cor da fonte para isso, estou dando o valor hexadecimal do nosso design figma, o peso desse título parece ser muito ousado. Então, eu preciso mudar o peso disso. Vamos mudar o peso para médio. Agora estou renomeando o nome da classe desse cabeçalho como trabalho do cliente. Fazer com que o nome do cliente fique mais próximo da imagem. Estou selecionando o nome do cliente e atribuindo o valor da margem a zero na parte superior e zero na parte inferior. O nome do cliente e a designação de renúncia de responsabilidade estão mais próximos. Então, estou selecionando esse trabalho de cliente, o valor da margem inferior é ajustado para zero e o valor da margem superior é ajustado para cinco pixels. Na próxima lição, desenvolveremos o restante do design. Vamos seguir em frente. 22. Seção de depoimentos - Parte 2: Concluímos o desenvolvimento da primeira coluna. E também na segunda coluna, fizemos um conteúdo básico, o que não é necessário. Nesta lição, veremos a maior parte do estilo que precisa ser feito no conteúdo da segunda coluna. Vamos começar a desenvolvê-lo. Temos um declínio no nome de cada cliente e na designação. Em seguida, precisamos adicionar a classificação do cliente. Então, na linha de depoimentos, estou adicionando um bloco de fazer. Agora estou dando o nome da classe para o diblock como embalagem de classificação Klein. Agora estou adicionando uma imagem do ácido. Agora, dentro da captura de avaliação do cliente, estou adicionando um título. Deixe o título tipo B cobrir seis. Estou alterando o conteúdo do título para o valor da classificação. Para alterar a tipografia desse valor de classificação, vou usar o tipográfico, escolhendo o tipo de fonte como Poppins, peso com alça phi média e o tamanho com 18 pixels, então a altura será 1,2 valor da classificação do hífen que, para ficar próximo à imagem do coração, estou ajustando o valor da margem dela. Estou alterando o valor superior no valor inferior para zero. Vamos mudar o nome da classe desse título como valor de classificação. Para colocar o valor da avaliação ao lado da imagem do coração, estou escolhendo a captura de avaliação do cliente. Estou selecionando o oxigênio como flocos para obter o espaçamento entre a imagem e o valor. Com a seleção do valor da classificação, estou dando o preenchimento em dez pixels ou à esquerda para fazer com que os detalhes do cliente fiquem em uma única linha. Estou selecionando o plano de depoimento. Em seguida, vamos escolher flex na tela. Vamos alinhá-lo ao centro. E, de acordo com a justificativa, estou escolhendo a opção de espaço entre o item ser distribuído uniformemente para que a imagem do cliente e o nome do cliente e o destino fiquem mais próximos de cada um Além disso, vou criar um diblock e colocar essa imagem do Kline e os detalhes do cliente dentro dos blocos div para que eu possa fazer o ajuste de acordo com nosso design. Agora estou selecionando um cliente de depoimento abaixo dele, estou criando um diblock. Agora estou arrastando o diblock na parte superior. Agora estou colocando o rap de imagem do cliente e envoltório de detalhes de Klein dentro deste blog div. Agora vou dar o nome da classe para esse diblock como detalhe de Klein. Com os detalhes do cliente selecionados. Estou usando o flex para a tela sob o layout e alinhando-o com a mesma dose. Para obter o espaçamento entre a imagem e o detalhe, precisamos fornecer o valor de preenchimento à esquerda do envoltório de detalhes do cliente. Então, com a seleção do envoltório de detalhes Klein para o valor de preenchimento esquerdo, estou nos dando o pixel Duan De. O espaçamento total dos itens do depoimento não é suficiente. Então, com a seleção do item de depoimento, estou dando o valor de preenchimento de 70 pixels em todos os lados para fornecer a cor de fundo para esse item de depoimento, vou para o plano de fundo dando o valor hexadecimal na cor envolve meu design. Para obter o canto arredondado, vou passar por baixo das bordas e dar o valor do raio como 40 pixels. O espaçamento do conteúdo do depoimento na parte superior e inferior. Estou diminuindo o espaçamento e ajustando o valor do preenchimento nos 30 pixels superiores. Para o valor de preenchimento inferior como 30 pixels. Mas precisamos de mais espaçamento na parte superior. Então, novamente, vou alterar o valor do preenchimento para 40 pixels para tornar o conteúdo maior, vou submergir a topografia e mudar o tamanho para 28 pixels, a altura será 1,4 hífen. Vamos ver se tudo está funcionando bem ou não. Para fazer isso, vou publicá-lo para que tudo pareça bom. Vamos adicionar mais comentários logo abaixo. Portanto, precisamos fornecer o espaçamento apropriado entre o início com uma seleção do item de depoimento. Estou dando o valor da margem inferior para 60 pixels. Na próxima lição, veremos mais comandos além do primeiro. E também faremos o estilo de cada um dos comandos, junto com o design do banheiro. Vamos começar. 23. Seção de depoimentos - Parte 3: partir de agora, concluímos o título e o subtítulo da seção de depoimentos na primeira coluna e desenvolvemos com o design de comando no segundo códon. Além disso, desenvolveremos o design do comando, pois no primeiro comando está a perda. Essa será uma imagem de fundo. Vamos ver como fazer isso. Como já sabemos, o mesmo design segue para os próximos itens. Então, estou selecionando o item do depoimento e duplicando-o duas vezes. Agora que selecionei o segundo item de depoimento junto com a classe de item de depoimento existente Estou adicionando outra classe com o nome do item para diferenciar o primeiro e o segundo Preciso altere a cor de fundo do mesmo. Então, vou escolher outro plano de fundo. Estou mudando a cor. A cor do conteúdo deve coincidir com a cor do plano de fundo. Selecionei o conteúdo do depoimento junto com o nome da classe de conteúdo do depoimento existente Estou criando outro nome de classe, cliente para conteúdo. Agora estou mudando a cor desse conteúdo. Assim como em nosso design de figma, a imagem do segundo item do depoimento deve ser alterada. Então, estou selecionando essa imagem do cliente e estou substituindo a imagem. E então, para alterar a designação desse Kline, estou selecionando esse trabalho de solicitação junto com essa classe existente. Vamos criar uma nova classe com o nome client to job. Estou mudando a cor da mesma forma que a cor do conteúdo. Em seguida, mudei o nome do cliente para agora, a designação desse cliente também muda o design. Agora, vamos ver o item do depoimento. Junto com o item de depoimento do nome da turma existente, estou adicionando uma nova turma. Item três. Vamos mudar a cor de fundo desse terceiro depoimento. Item dois. Como já sabemos, o conteúdo deste depoimento deve ser alterado de acordo com a imagem de fundo. Então, estou selecionando o conteúdo do depoimento e criando um novo nome de classe junto com o existente como conteúdo de Klein Three. Agora, sob a topografia, a cor uniforme no valor hexadecimal é suficiente. Madison. Agora estou selecionando a tarefa de escalada junto com a existente. Estou criando outra turma com nome Klein Three Job. Agora estou dando a cor da mesma forma que a cor do conteúdo. Agora tenho que substituir a imagem, então estou selecionando o cliente mh. Estou substituindo-o pelo de design. Vamos mudar o nome dessa linha e também a designação desse cliente. Vamos publicar isso para ver como fica. Agora, ao rolar a janela em que a seção do título desaparece, precisamos fazer com que a seção do título fique colada na janela. Vamos voltar a desenvolver esse. Para selecionar a seção do título. Estou consultando o representante do título do depoimento e selecionando a seção intitulada rub, junto com a seção existente do nome da classe intitulada wrap. Estou adicionando uma nova classe com o nome sticky title. Agora estou poluído em vez de estático, estou escolhendo pegajoso. Então, enquanto navega pelo site, veja esse título, mas vamos ficar na janela. E agora estou alterando o valor para zero para todos os três lados. Agora estou indo para a camada e escolhendo o bloco embutido na tela. Portanto, a altura e a largura serão ajustadas de acordo com o conteúdo interno. Então, agora, uma rolagem, podemos ver que esta seção de comentários está presa ao Canvas. Vamos publicá-lo para verificar se está funcionando ou não. No modo de pré-visualização, pudemos ver isso funcionando, pois achamos que o espaçamento entre as partes superiores desse título não é suficiente , como parecia. Está muito perto da barra de pesquisa. Então, precisamos criar o espaço na parte superior. Agora estou selecionando o resumo do título do depoimento. Agora, abaixo do espaçamento, estou dando o valor da margem superior, faça 20 pixels. Vamos fazer um pequeno espaçamento para esse conteúdo. E estou dando o valor da margem, que é um valor de margem superior de 20 pixels para fazer com que a seção do título fique na janela com o espaçamento apropriado. Na parte superior, estou selecionando a seção intitulada embrulho. Eu vou para a posição. Agora, para o valor da posição superior, estou nos dando 40 pixels. Vamos publicar isso para ver como fica. Então, enquanto eu estou rolando isso, podemos ver que esse título está grudado na janela com o espaçamento apropriado na parte superior. Fizemos todo o necessário para a seção de depoimentos. Vamos adicionar um plano de fundo para ele e dar o tamanho da capa. E vamos transformar a coesão no centro. Não precisamos de nenhum bloco, então estou selecionando nenhum. Então, agora vamos escolher a imagem de fundo para ela. Então, adicionamos a imagem de fundo, vamos publicá-la para vê-la no modo de visualização. No modo anterior, podíamos ver a imagem de fundo e o comando dos clientes, e a nota adesiva e a exedra, tudo parece bem. Então, concluímos a seção de depoimentos com sucesso. Na próxima lição, veremos a seção de preços deste site. Vamos ver isso. 24. Seção de preços - Parte 1: Nesta lição, veremos a seção de preços. Agora, no design, pudemos ver que temos um título na parte superior, ou seja, o subtítulo e um título. E logo abaixo do título, usaremos um modelo de grade, que consiste em duas colunas pois os designs dos barcos são semelhantes entre si. Então, deixe-me explicar a primeira coluna em si. Nesta seção de preços, temos a versão gratuita a versão pro e os preços. Na primeira coluna, no canto superior esquerdo, temos o título. O mesmo se aplica à versão profissional dois. E logo abaixo desse título, teremos outro diblock com os títulos e a lista de itens e um botão. Como pudemos ver, essa lista de itens do blog está sobrepondo seu diblock principal. Nesta lição e nas próximas aulas, veremos como vamos desenvolver esse design. Vamos começar a desenvolvê-lo. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de avaliar a seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Agora estou avaliando a seção abaixo do corpo e estou dando o nome da classe como seção de preços. E chegando ao espaçamento, estou dando o valor de preenchimento na parte superior e inferior como 100 pixels. E agora, na seção de seleção de preços, vamos adicionar um contêiner. Vamos dar a ela o contêiner de classe existente. No design, vimos que é um título na parte superior, assim como na seção da galeria, temos um título semelhante ao nosso design. Então, no navegador, estou selecionando uma seção intitulada rep. Agora estou duplicando e arrastando para a seção de preços, que também está abaixo do contêiner. Todo o estilo será herdado para a seção de preços. Uma coisa importante que precisamos fazer é mudar o título e o subtítulo. Agora, dentro do contêiner, vamos criar um diblock. Escreva que contém a grade. Depois de criar um diblock. Vamos dar o nome da classe para isso. Sob o representante de preços, vamos adicionar uma grade. Precisamos apenas das duas colunas. Estou excluindo uma linha. Vamos renomear a classe dessa grade como grade de preços. Primeiramente, vamos desenvolver a primeira coluna. Então, sob a grade de preços, estamos criando um novo bloco. Deixe o nome da classe ser o item de preço. De uma forma, dentro do item de preço, adicionaremos um título uma lista de itens e os botões. Então, criamos o espaçamento para ele com o nome do item de preço. Então, no item de preço, estamos criando um diblock. E recebeu o nome da classe como título de preço. Temos um ótimo espaço para guardar o título, o preço. Agora, precisamos adicionar um título abaixo do representante do título de preço e outro bloco d será criado. Em seguida, estou dando o nome da classe como título de preço. Para dar o título abaixo do título do preço, estamos adicionando um título. Vamos dar o tipo de título como H2. Agora estou mudando esse título como em nosso design. Agora precisamos fornecer o preço. Então, sob o título de preço, estou avaliando e, em outros diblock, estou dando o nome da classe como limite de preço. Agora, com a seleção do pacote de preços abaixo, vamos criar um título. Agora eu escolhi o tipo de título, assim como o hedge do. Eu dei o valor do preço em nosso design Vamos mudar essa epigrafia para esse preço. Vamos ver o nome da classe de cabeçalho como preço. Outra maré. Criamos um parágrafo, desculpe por não mostrar isso. Agora vou renomear essa classe de parágrafo como duração do preço. Agora estou clicando nesse título. Agora vamos mudar o nome da classe para isso. Deixe que seja como o preço está datado para fazer o título no canto esquerdo e o preço no canto direito. Vamos vendê-lo com o preço do tidal rep. Agora, sob o layout, vamos escolher o flex na tela. Agora estou escolhendo o espaço entre o justificado, no Canvas. Podemos ver que está alinhado corretamente. Agora estou usando o preço Tidal para fazer com que o título do preço e o parágrafo logo abaixo dele fiquem próximos um do outro. Estou abaixo do espaçamento e estou dando o valor da margem inferior como zero. Então, agora terminamos o título do preço. Logo abaixo, precisamos adicionar uma lista com a seleção do item crescente. Vamos criar um diblock. Agora estou dando o nome da classe como embalagem da lista de preços e, dentro dela, precisamos adicionar o título do anúncio. Então, para isso, precisamos criar um outro diblock. resumo, com a seleção da lista de preços, criaremos um diblock. Então, agora vamos mudar o nome da classe como representante do título do anúncio. Para fornecer o conteúdo do título, precisamos adicionar o título. Agora estou escolhendo o tipo de título para cobrir três. Agora eu dei um título para essa lista e depois vou pular na topografia. Precisamos mudar o nome da classe desse cabeçalho. Deixe o nome da classe listarmos o título. Dentro do título do anúncio, temos o conteúdo. E também um dos emojis. Estou escolhendo uma embalagem de freio para listagem. Então, dentro desse RAB, vamos adicionar a imagem, então, ao selecioná-la, estou procurando por uma imagem. Estou adicionando uma imagem de elemento. Eu escolhi a imagem do ácido para alinhar o título do anúncio em uma linha. Estou selecionando o representante do título da lista e selecionando flex na tela. Agora estou escolhendo o alinhamento central e , em seguida, o espaço entre outro justificado. Sabemos que é necessário um espaçamento de margem dentro do título do anúncio embrulhado. Então, estou selecionando o título da lista. Estou atribuindo esse valor de margem superior e inferior a zero pixel. No design, temos uma linha abaixo do título do anúncio. Então, com a seleção de eliciar o envoltório de maré, vou ultrapassar as fronteiras e escolher a borda na parte inferior. Deixe essa criança ser sólida. E estou dando o valor hexadecimal na cor do desenho da figma. Como a linha está muito próxima do título do anúncio. Com a seleção do representante do título do anúncio, estou atribuindo o valor de preenchimento inferior para 15 pixels e também o valor da margem, que é o valor da margem inferior para 15 pixels. O desenvolvimento restante será continuado na próxima lição. 25. Seção de preços - Parte 2: Nesta lição, abordaremos o desenvolvimento adicional na primeira coluna de um dia de trabalho. partir de agora, criamos um título para esse preço na parte superior e, logo abaixo, criamos uma grade com duas colunas. Como na primeira coluna, criamos o bloco do para conter o conteúdo da primeira coluna. E também no topo, nos desenvolvemos com o aumento da maré. E também abaixo dele, desenvolvemos o título do anúncio junto com o MOG. Nesta lição, adicionaremos uma lista de itens necessários para essa seção de preços e também um botão a ela. Vamos continuar a desenvolvê-los. Agora, precisamos adicionar itens de um anúncio. Então, para criar isso, precisamos adicionar um diblock que contém os itens da lista. Então, no final da lista de preços, estou criando uma div e estou dando o nome da classe para ela como lista de preços. Com a seleção da lista de preços, estou procurando por uma lista. Portanto, a lista é adicionada abaixo dela. Agora, na tela, você pode ver que o item da lista foi adicionado com as configurações de uma lista pop-up. Por padrão, o tipo é selecionado como um pedido. Não precisamos de nenhuma bala. Então, estou selecionando o estilo S, sem balas. Agora vamos adicionar a lista de itens dentro dessa lista. Agora estou selecionando a primeira lista e agora estou fornecendo o conteúdo do item da lista como no design. A tipografia desse item da lista deve ser alterada. Para marcar a marca de seleção no canto esquerdo desse item da lista. Estou investigando os bastidores. Estou escolhendo Imagem e gradiente. Deixe o ladrilho ser nenhum. Vamos escolher o tamanho a ser contido. Agora eu escolhi a imagem do ativo que tem estigma. Eu vou E na posição e estou escolhendo o canto médio esquerdo, você obtém o espaçamento entre a marca de verificação e o item da lista. Estou abaixo do espaçamento. Estou dando o valor de 40 pixels no preenchimento esquerdo para alterar a cor da fonte desse item da lista, vou usar outro tipo de gráfico V. Agora estou dando a cor no valor hexadecimal para obtenha o espaçamento da margem para este item com uma seleção do primeiro item da lista, estou dando o valor da margem superior para dez pixels. No valor inferior para dez pixels. No Navegador, podemos ver , por padrão, que os dois itens da lista foram adicionados. Mas já criamos o primeiro item da lista. Então, estou excluindo o item existente da lista de tarefas. Agora estou duplicando isso para saber o preço. Agora vou para o segundo plano. Agora estou escolhendo o tamanho a ser personalizado aqui, que tem mais espaçamento entre a marca de seleção e o conteúdo do item da lista. Portanto, preciso alterar o valor do preenchimento com a seleção dele. Eu vou para o espaçamento e estou dando o valor para 20 pixels. Mas é muito próximo um do outro. Deixe o valor beta D pixel. Agora, agora estou selecionando a primeira palavra do segundo item da lista e , em seguida, alterando a extensão de TI S. Vou entrar na tipografia. Estou selecionando o peso como 700, cor em negrito é a cor primária. Estou mudando o nome da classe desta dissolução de texto para destaque de preços. Agora vou para o Navigator. Novamente. Estou duplicando esse item da lista para ver o preço. No Canvas, eu mudei. Ou o conteúdo desse item da lista. Se concentrarmos o estilo em um item fora da lista, esse estilo será aplicado aos outros itens da lista. Vamos alterar o valor do espaçamento desse item da lista. Então, estou selecionando o primeiro item da lista. Agora estou abaixo do espaçamento. Estou dando o valor da margem como 30 pixels. Estou escolhendo o segundo item da lista. Agora estou fazendo o valor da margem que é aproximadamente um valor de margem de 30 pixels. Portanto, esses valores serão aplicados aos outros itens da lista. Faça. Agora vou para o item da lista de falhas. Estou escolhendo a ilustração com mais nove. Estou alterando isso como texto para abranger. Agora estou dando o nome da classe para este texto Japão, conforme o preço destacado. Terminamos o item da lista e o mini-item. Precisamos adicionar um botão. Antes de adicionar um botão, precisamos adicionar um bloco, que estará sob o representante da lista de preços. Agora estou dando o nome da classe para este envoltório de botões de preços diblock S. Então, estou selecionando esse botão de preços. Agora estou procurando por um botão. Portanto, esse elemento será criado sob isso. Agora estou dando o nome da classe para esse botão como botão da marca, que é o botão de classe existente. Portanto, o estilo do botão de transplante será aplicado a esse botão. Agora estou adicionando o botão de preços de outra classe junto com o botão de transplante de classe a existente. No design, vimos que esse botão está ocupado em toda a largura. Eu vou para outro tamanho. Estou dando a largura para 100%. Para fazer com que o conteúdo desse botão fique no centro. Estou submergindo a topografia e alinhando-a com o centro. Agora eu mudei o conteúdo desse botão para S. É grátis. Agora vamos mudar a cor dessa borda. Então, vou passar por baixo das bordas e mudar as cores com o valor hexadecimal. Na próxima lição, veremos o desenvolvimento do Além disso e o estilo necessário para a seção de preços. Vamos seguir em frente. 26. Seção de preços - Parte 3: Nesta lição, finalizaremos esta seção de preços com estilo do conteúdo da primeira coluna e do conteúdo da segunda coluna. E também veremos como fazer com que a lista de itens a serem sobrepostos. Vamos começar a desenvolver isso. No design que já vimos, há uma cor de fundo para o item de preço. Então, no navegador, estou selecionando o item de preço, o bloco, e vou para o segundo plano. Agora que dei o valor da cor em hexadecimal no Canvas, pudemos ver que todo o conteúdo está alinhado à esquerda. Precisamos fazer o espaçamento em todos os lados. Então, vou usar outro espaçamento. Agora estou dando o valor da encadernação como vazia, mas não parece tão boa. Então, estou mudando para 60 pixels e deixando o valor inferior ser 60 pixels. Agora estou atribuindo o valor de preenchimento esquerdo para 70 pixels. Parecia um lugar para a proibição correta. Faça. Em seguida, para fazer os cantos arredondados, vou usar outras bordas. Agora estou dando o valor do raio para 40 pixels. Agora, precisamos fornecer a cor dessa lista de preços. Então, estou selecionando essa lista de preços, pegue outro plano de fundo. Estou escolhendo a cor como luz branca. Novamente, use o valor do raio como 40 pixels e outras ordens. Como pudemos ver claramente, o espaçamento não é apropriado. Então, vou para o espaçamento. Agora estou dando o valor no preenchimento superior e inferior como pixel xy. E para a esquerda e para a direita 50 pixels. Para obter o espaçamento entre o título do preço e a lista de preços. Estou selecionando o embrulho da lista de preços. Se eu fornecer o valor da margem na parte superior , poderemos ajustar o espaçamento. Então, estou dando o valor da margem superior como 40 pixels. Agora estou selecionando esse botão para obter o espaçamento entre os itens da lista e o botão. Vamos dar o valor de preenchimento dessa moldura de botão para 40 pixels na parte superior. Vamos publicá-lo para ver como fica. Pudemos perceber que o espaçamento desse item de preço e o conteúdo do título não são suficientes. Vou fazer o navegador, estou selecionando a captura de preços. Essa é a coisa toda. Vamos atribuir o valor de preenchimento na parte superior a 60 pixels. No item de preço. Acho que há um pouco mais de espaço na parte superior. Com a seleção do item de preço, estou atribuindo o valor de preenchimento na parte superior para 40 pixels. Novamente, vou ajustar o valor da margem para o embrulho da lista de preços. Agora eu dei o valor como 50 pixels na parte superior. Vamos novamente fazer isso, o valor da margem para o item da lista. Agora estou dando o valor da margem superior como 35 pixels e o valor da margem inferior como se eu tivesse pixels. Fizemos o desenvolvimento necessário para a seção de preços na primeira coluna. O mesmo design é uma continuação da segunda coluna. Então, vou duplicar esse item de preço pela primeira vez. Portanto, esse item duplicado será automaticamente colocado dentro dessa segunda coluna para obter a lacuna entre a primeira coluna e a segunda coluna, escolhendo a grade de preços. Agora, na grade de edição, vamos atribuir o valor da lacuna a 50 pixels. Agora eu preciso mudar esse conteúdo na segunda coluna, como em nosso design. Quando chego à lista de preços, temos mais dois itens da lista. Então, no navegador com a seleção do item da lista, estou duplicando-o duas vezes. E também precisamos mudar o emoji na segunda coluna, como no design. Então, estou selecionando a imagem. Agora vou substituir a imagem do ativo. Vamos publicar isso para ver como fica. Fizemos todo o necessário para a seção de preços. Em seguida, precisamos fazer o estilo de acordo com nosso design. Assim como no design, vimos que o item da lista está sobrepondo seu pai. Mas se toda a parte do diblock for estática, esse design não poderá ser implementado nele. Portanto, o blog dos pais deve estar interrelacionado. Então, vou escolher a seção de preços e definir sua posição para se relacionar com o elemento principal imediato dessa lista de preços, que é o item de preço. Portanto, precisamos definir a posição como relacionada. Agora, vamos ao embrulho da lista de preços. Agora vamos definir sua posição S absoluta. No Canvas, pudemos ver essa lista de preços. O Rap está livre de ajustar sua posição e também estará dentro desse item de preço. A principal razão para mudar a posição para absoluta e relativa é que isso não afetará a posição dos outros elementos ou suas propriedades. Como podemos ajustar livremente a posição de acordo com nossas necessidades. E também esse item de preço ocupa espaço de acordo com o conteúdo que está dentro dele. Para ajustar seu tamanho de acordo com nosso design, vou reduzir o tamanho e definir a altura mínima para 600. Agora você pode vê-lo ajustar seu tamanho sem afetar a posição do item do anúncio. Para fazer com que a lista de preços fique no centro abaixo da posição, vou me ajustar a partir de Otto. Agora estou definindo a poluição esquerda para 8% cada e a posição direita para 8% H. Então, de acordo com o valor ajustado ao centro, a altura desses itens de preço parece ser um pouco pequena. Então, abaixo do tamanho, vou dar a eles uma altura mínima de 700 pixels. Para destacar essa lista de preços em segundo plano, precisamos definir a sombra, ou seja, a sombra da caixa. Então, vou usar a sombra da caixa , pois precisamos de uma sombra de caixa fora desta lista. Então, por padrão, diz-se que, para fora, estamos apenas ajustando o ângulo da sombra. E o efeito embaçado, que eu preciso de outra cor. Estou ajustando a opacidade até não me sentir satisfeito. Então, novamente, estou clicando nas sombras da caixa, estou ajustando o ângulo de desfoque. Delight se sente satisfeita. Agora vou publicá-lo para vê-lo no modo de pré-visualização. Então, fizemos tudo, como em nosso design. Para o botão, usamos a classe existente. Portanto, o estilo que demos a essa classe será herdado aqui. Faça. É por isso que você pode ver o efeito de transição desse botão. Por fim, concluímos a seção de preços e, diariamente, na próxima lição, veremos a seção do blog. Nos vemos na próxima lição. 27. Seção de blog - Parte 1: Nesta lição, desenvolveremos a seção do blog. Só preciso dele para o nosso site. Vamos ver o planejamento. Primeiro, criaremos uma seção e depois um recipiente com os medicamentos, que estão todos na cidade. Em primeiro lugar, teremos o título que consiste em uma div. E dentro dela, haverá um título e um subtítulo. E, novamente, logo abaixo do título, teremos uma div dentro dela. Usaremos a lista de coleta. Ou seja, usaremos o CMS. O estilo que vamos criar em um item será afetado nos outros itens. Além disso, não vamos editá-lo separadamente. Só vamos obter o conteúdo do CMS, que é o sistema de gerenciamento de conteúdo. Portanto, todos os dados relacionados ao blog serão extraídos do cmos. É por isso que estamos usando a lista de coleções. Então, vamos voltar ao design. Você pode ver em cada item que tem uma imagem no canto esquerdo. E no canto direito temos o título do blog. E abaixo dela, há uma data em que os blogs publicam, embora seja um extrato desse bloco. E, novamente, precisamos disso. Isso será um guia de leitura para redirecionar para o blog. O mesmo design, um local para os itens restantes da coleção. Agora você tem algumas ideias sobre como vamos nos desenvolver. Vamos ver como vamos inventar isso. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Primeiro, embaixo do corpo, vamos criar uma seção. Vamos dar a ela um nome de classe para esta seção do blog S. Agora, crie o contêiner com menos oito e selecione o nome da classe existente para ele. Precisamos adicionar o título para esta seção do blog. Também criamos os títulos nas seções anteriores, fui para a seção de serviços e a dupliquei, a seção intitulada wrap. E eles arrastaram a seção intitulada embrulhar para baixo do contêiner na seção do blog. Então, agora você pode mudar o conteúdo deste título como nosso joelho. No início, não nos demos espaçamento para a seção. Agora estou selecionando esta seção do blog. Estou dando o valor de preenchimento como 100. Na parte superior e inferior. Estou selecionando o contêiner embaixo dele. Vamos criar um diblock. Vamos dar o nome da classe para este bloco S, embalagem de conteúdo do blog. Uma vez dentro desse bloco de conteúdo, vamos adicionar uma lista de coleções. Estou selecionando o CMS, que é o sistema de gerenciamento de conteúdo. Aqui, estou selecionando a nova coleção, que está no canto superior direito. Agora, na janela, você pode ver os modelos de coleção, as configurações da coleção e os campos da coleção. Então, por padrão, temos os modelos aqui. Vamos criar um bloco. Então, estou selecionando como postagem no blog. Ao clicar na postagem do blog, os campos relacionados a ela serão criados automaticamente. Logo abaixo dos campos da coleção. Você pode ver no nome da coleção que a postagem do blog é maior e, no URL da coleção, a postagem é criada. Por padrão, teremos as informações básicas como nome e dormiremos embaixo delas. Ou haverá campos personalizados onde poderemos personalizar nossos campos. Não preciso desses longas-metragens, então estou selecionando as sessões e as excluindo. Além disso, não preciso desses campos de cores, então estou selecionando as configurações e as excluindo. Além dos campos existentes, preciso de outro campo. Ao selecionar o campo de adição. Conseguimos ver muitos tipos de campo. Aqui. Preciso adicionar o nome do autor. Então, para armazenar os nomes dos autores, estou escolhendo texto sem formatação. Agora você pode ver o rótulo. Esse rótulo funcionará como um nome de campo. Mas vamos dar o nome do rótulo como estranho. Precisamos do texto de ajuda. Essa é uma descrição sobre o uso desse texto de ajuda. Ou seja, esse x ajudado aparecerá abaixo do rótulo para orientar os colaboradores a estarem detalhados. Este texto de ajuda serve para saber qual é o propósito desse rótulo. Agora vou inserir o texto de ajuda, digite o autor desta postagem. Em seguida, há um tipo de campo de texto a partir dele. Podemos escolher se é uma linha única ou uma linha múltipla. Vamos salvar esse campo. Depois do carro. Preciso do campo de data e hora para salvar os dados publicados do bloco. Então, ao clicar em Adicionar campo, vou selecionar o tipo de campo como data e hora. Vamos dar o nome do rótulo como data de publicação. No texto de ajuda que estou escrevendo , selecione os dados publicados da postagem. Vamos salvar esse campo. Agora criamos todo o campo necessário para nossa coleção. Todos os dados relacionados a esta postagem do blog serão armazenados nos campos correspondentes. Agora vamos clicar em Criar coleção. Então, a coleção de postagens do blog será criada. Agora, queremos selecionar quantos itens de amostra precisamos. partir de agora, estou selecionando cinco itens. Depois de selecionar isso, os itens de amostra phi da postagem do blog serão criados. Agora, esses são todos os itens de amostra de Phi da postagem do blog. Como no design, precisamos apenas dos quatro itens. Não precisamos de um dos itens. Então, estou selecionando o último item e o excluindo. Então, agora vamos fazer a edição em toda a postagem. Agora estou selecionando a primeira pose. Aqui você pode ver o nome das informações básicas e dormir. No campo personalizado. Estamos tendo todos os campos que criamos anteriormente. Por padrão, teremos um conteúdo fictício em cada um dos campos. Precisamos mudar todas essas coisas de acordo com nosso conteúdo. Vamos prosseguir com as informações básicas abaixo do nome. Estou explicando como desenvolver sua habilidade de desenho. Neste laboratório. Estou dando como no campo do nome. Agora, recebemos a mensagem de aviso, pois alterar o URL quebrará links externos para esse item na praia. Não deveríamos ter links quebrados. Para isso. Em cada terminação da palavra, precisamos adicionar um hífen. Então, vamos adicionar um hífen entre as duas palavras. Agora, voltando aos campos personalizados, vamos levar o corpo da postagem para o nosso conteúdo. mesmo vale para o resumo da postagem. Em seguida, vou até o autor. Vamos dar o nome do autor desta postagem do blog. Vamos salvar isso. Portanto, todos esses dados serão armazenados em seus respectivos campos. Temos que fazer a mesma coisa nos três itens restantes. Então, agora fizemos com que todos os dados fossem armazenados em seus respectivos campos e na coleção de outras postagens do blog. Ao acessar a coleção de postagens do blog, os dados do MIT podem ser testados novamente em nosso Canvas. Vamos ver como vamos fazer isso na próxima lição. 28. Seção de blog - Parte 2: Até agora, criamos a seção de título necessária para nossas postagens no blog. E também vimos sobre o CMS, que é um sistema de gerenciamento de conteúdo, ao passo que é como um banco de dados que tem os campos com os dados necessários para nossa postagem no blog. Usaremos nos termos da coleta. Então, em uma folha desta coleção, vamos tentar novamente todas as postagens do blog, um dado delas para o nosso Canvas. Então, nesta lição, vamos ver como vamos recuperar todos os dados da coleção de postagens do blog para o nosso Canvas. Como vamos estilizar nossa grade de postagens de blog. Agora, com a seleção do conteúdo do blog, embrulhe, vamos criar uma lista de coleções. Agora, o pop é exibido. Aqui. Precisamos escolher a fonte. Criamos uma coleção de postagens no blog. Portanto, a fonte da lista de coleções é da postagem do blog. Agora precisamos selecionar a camada que é necessária para nós de acordo com o design. Temos as duas colunas, então estou selecionando a camada com duas colunas. A lista de coleções é criada na tela. Então, aqui podemos testar novamente os dados necessários para as postagens do nosso blog. No navegador, estou escolhendo o conteúdo do blog. Dentro dela, haverá um invólucro de listas de coleções. Novamente dentro dela, aquela lista de lembranças. E, novamente, dentro dele, há um item de coleção, pois é cada item individual. Agora, dentro desse item de coleção, vou adicionar um bloco div à medida que estamos usando a coleção. Se você fizer algumas das alterações em um dos itens, isso também será um fator em todos os outros itens. Então, eu adicionei diblock dentro deste item de coleção. Portanto, todos os registros são criados em todos os outros itens da coleção. Vamos mudar o nome da classe diblock como representante da imagem do blog. Agora vamos adicionar uma imagem. Se eu adicionar uma imagem neste invólucro de imagens do blog, automaticamente, as imagens serão criadas em todos os outros três itens da coleção. Se eu usar a Opção, obter imagens da coleção de postagens do blog, as imagens que estão todas armazenadas nesta coleção serão testadas novamente e serão exibidas em seus respectivos elementos imediatos. Como selecionamos a coleção de postagens do blog, precisamos selecionar o campo. Como é uma imagem no campo, costumamos criar imagens que são uma imagem principal e uma imagem em miniatura. Olá, Precisamos de uma imagem em miniatura. Então, estou selecionando a imagem em miniatura do campo. As imagens são armazenadas em uma ordem abaixo dos campos da imagem em miniatura. Então, ao acessar isso, todas as imagens em miniatura são lidas no Drive e armazenadas em seus respectivos itens de coleção. Nós adicionamos a imagem. Em seguida, precisamos criar um espaço para guardar o conteúdo do bloco. Agora estou selecionando o item da coleção. Dentro do item da coleção, vou criar um diblock. Vamos dar o nome da classe para essa área de conteúdo do blog diblock S. Precisamos adicionar o título para a postagem do blog. Na área de conteúdo do blog, estou adicionando um título e vamos escolher o tipo de título como H2. Como estamos usando a lista de coleções, precisamos escolher o nome do campo da coleção. Agora, na opção GetText da postagem do blog, estou escolhendo o nome do campo, nome, para que o título das postagens do blog seja recuperado e colocado aqui. Em seguida, precisamos fornecer o nome do autor e os dados publicados da postagem. Então, na área de conteúdo do blog, estou criando novamente um novo bloco que contém a data de publicação e o nome do autor. Vamos dar a ele um nome de classe para este blog do diblock S, metal wrap. Com a seleção do bloco Metal Wrap, vamos adicionar um bloco de texto, ativar o getText nas postagens do blog e selecionar o nome do campo, a data de publicação. Então, a editora, a data das postagens será exibida aqui. Além da data de publicação, precisamos de um autor da postagem. Então, novamente, na meta-quebra do blog, estou adicionando um bloco de texto. Agora vamos escolher o campo como automático. Portanto, o nome do autor e a data de publicação serão adicionados a todos os outros itens da coleção. Agora, na área de conteúdo do blog, vou adicionar um parágrafo. Agora, vamos usar o campo como resumo da postagem. Como um resumo da postagem será exibido em todos os outros itens da coleção. Como adicionamos apenas o resumo da postagem. Para ler mais sobre a postagem, precisamos adicionar um link para ler mais. Sob a área de conteúdo do blog. Estou adicionando um link de texto. Agora, no pop-up, estou escolhendo a página da coleção. E então, na lista suspensa da página, estou escolhendo a postagem atual do blog. Portanto, se clicarmos nesse link, o conteúdo relacionado a essa postagem atual do blog será exibido. Vamos mudar o link do texto para o modo de leitura. Agora vamos adicionar todo o item do blog dentro de um diblock específico. Então, sob o item da coleção, estou criando e desbloqueando. E estou arrastando o diblock no EPO, a área de imagem do blog, rap e conteúdo do blog. Agora vamos colocar a imagem do blog, rap e a área de conteúdo do blog dentro desse bloco div recém-criado . Vamos dar o nome da classe para esse item de blog diblock S. Dentro deste item do blog, teremos uma imagem e o conteúdo, como pudemos ver no Canvas. Em cada um dos itens da coleção. As imagens estão na parte superior e os títulos, a data, o autor e o resumo da postagem ou abaixo um do outro. Mas precisamos que a imagem esteja à esquerda e que todos os títulos e o conteúdo estejam à direita. Para estabelecer que estou escolhendo o item do blog. Outra camada, estou selecionando a flexão e alinhando-a ao centro. Agora vamos mudar o tipo de biografia do conteúdo do blog. Agora estou escolhendo o título do primeiro item de conteúdo e , na tipografia, estou escolhendo a fonte como Poppins. Em seguida, o peso será 500 médio e a altura será de 1,2 hífen. Agora, vamos escolher a cor da fonte como cor secundária da amostra, pois precisamos fornecer o nome da classe para esse título. Então, com a seleção desse título, estou dando o nome da classe como título do blog. Em seguida, estou selecionando a embalagem metálica em bloco , ou seja, há dois livros didáticos. Agora, estou selecionando o primeiro bloco de texto , pois contém a data de publicação deste blog. Vamos ensinar a topografia da fonte que estou escolhendo como Poppins e o peso será 500 médio, pois o tamanho desta data não deve ser grande. Então, estou dando o tamanho de 16 pixels e a altura 1,2 hífen como data e o automático estará em uma cor sutil. Permite que a cor da fonte seja a cor do conteúdo. A partir dessa amostra, precisamos fornecer o nome da classe para esse bloco de texto. Então, estou renomeando essa classe como valor logarítmico. O estilo desse bloco de texto do autor será o mesmo do editor, o bloco de texto de data, conforme fornecemos o nome da classe para esse valor metta do blog S. Então, agora vamos dar o mesmo nome de classe para esse bloco de texto. Então, agora todo o estilo que fizemos nesta aula será aplicado ao nome desse autor. Além disso, precisamos colocar a data e o nome do autor apenas um ao lado do outro. Então, estou selecionando o blog metal wrap. Estou escolhendo o flex na tela e alinhando-o ao centro. Precisamos fazer a separação entre a data e o nome do autor. Então, dentro do blog Mehta, estou criando um outro bloco de texto. E eu estou usando uma linha como separador entre esses dois. Agora estou dando o nome da classe para esse bloco de texto como separador de blocos de metais. Para mudar a topografia, vou usar outra tipografia para criar um espaço do separador. Vou para o espaçamento e, em seguida, atribuo o valor de preenchimento da esquerda e da direita como dez pixels. Precisamos de um pouco de espaço entre o conteúdo do blog no envoltório metálico do blog. Então, com a seleção do revestimento metálico do blog, estou dando ao preenchimento inferior o valor S, dez pixels. Novamente, precisamos fazer a separação entre a área de conteúdo do blog Metal Wrap and Roll. Então, com a seleção do envoltório metálico para blog, vou ultrapassar as bordas e escolher a borda na parte inferior. Estou mudando a cor desse separador. Agora vamos para a área de conteúdo do blog, que é o parágrafo, e ajustando a altura dele sob a topografia que a finaliza com 1,3 hífen. Em seguida, estou escolhendo o link. Agora, sob a tipografia, vamos dar a fonte como Poppins e esperar com 500 de tamanho médio e o tamanho com 18 pixels. Vamos dar a cor como cor secundária da amostra e a largura da altura, 1,2 hífen, pois aqui estamos usando o link, pois não parece muito bom de ver. Então, sob o estilo que estou escolhendo, nenhum. Vamos mudar a classe desse link como blog, leia mais, leia mais link. Enquanto pairamos, precisamos fazer a transição. Então, no não-estado em si, vou para a transição e estou escolhendo o tipo de transição como cor da fonte. Agora vamos mudar o estado para transportar. Precisamos mudar a cor da fonte. Então, vou usar outra tipografia e estou escolhendo a cor da fonte como cor primária desta amostra. Agora, vamos escolher o estado como nenhum novamente. Então, agora fizemos o efeito de transição para esse link. Adicionamos o exemplo do título da imagem do blog, na verdade, conteúdo automático e de amostra e uma modelagem vermelha. A partir de agora, na próxima lição, concluiremos toda a seção do blog. Vamos ver como vamos fazer isso na próxima lição. 29. Seção de blog - Parte 3: Essa é a última parte desta seção do blog. partir de agora, concluímos a imagem de amostra necessária para esse bloco e adicionamos o título ou o nome e a data como um pequeno conteúdo. E vou vincular tudo o que fizemos na lição anterior sobre design. E faremos o ajuste do espaçamento necessário para esse design de bloco. Vamos ver como vamos fazer tudo isso. Nesta lição, alteraremos a cor de fundo de cada item do blog. Vamos ver como vamos fazer tudo isso nesta lição. Agora, vamos mudar a imagem de fundo desse item do blog. Então, sob o item da coleção com uma seleção de itens de blog, vou ver os planos de fundo. Vamos mudar a cor de transparente para a cor em nosso design. Para fazer o canto arredondado nos quatro lados abaixo das bordas, estou dando o valor do raio como 32 pixels. O conteúdo e a imagem desse item do blog estão muito próximos. Então, precisamos fazer o espaçamento nos quatro lados. Agora estou abaixo do espaçamento. Vamos dar a ele um valor de preenchimento para todos os sites como 40 pixels. Agora, para dar o espaçamento entre a imagem e o conteúdo, temos que escolher a área de conteúdo envolvente. Então, estou escolhendo a área de conteúdo do blog. Para o valor de preenchimento esquerdo. Estou dando 40 pixels para obter o espaçamento desses dados publicados, não o nome. Estou escolhendo. Envoltório metálico em bloco. Estou dando que os valores de preenchimento são os 210 pixels superiores e o valor de preenchimento inferior como 20 pixels. E, novamente, estou dando o valor da margem inferior para 20 pixels. Agora temos um espaçamento considerável entre o conteúdo e a data. Não alteramos o nome da classe para este parágrafo. Então, vamos renomeá-lo como produto extra do bloco S, espaçamento considerável entre o parágrafo e o link. Vamos dar o valor de preenchimento para a parte inferior como dez pixels. Agora precisamos mudar o que o bloco tem em seu design. Aqui, estou usando o pequeno site png.com para obter a imagem em tamanho compactado. Vamos fazer o upload da imagem que temos agora. Agora eu selecionei a imagem inteira que é para a imagem principal e uma imagem em miniatura. A imagem que tem o maior tamanho é consideravelmente reduzida devido ao seu menor tamanho. Agora estou baixando cada uma das imagens para alterar as imagens do bloco. Agora vou para a coleção CMS abaixo da postagem do blog, estou selecionando o primeiro bloco. Debaixo dela. Pudemos ver a imagem principal e a imagem em miniatura. Sob a imagem em miniatura, estou excluindo-a. Vamos descartar a imagem que baixamos. Agora. A mesma coisa que vou fazer na imagem principal. Estou excluindo a imagem existente enquanto substituo por uma imagem grande , como a imagem em miniatura. Agora estou seguindo as mesmas etapas que executei na primeira postagem do blog. Para as três postagens restantes do blog. No Canvas, pudemos ver que todas as imagens das postagens do blog foram alteradas. Sucesso disposto a fazer um canto arredondado em cada uma das imagens. Estou selecionando a imagem abaixo da borda. Estou dando o valor como 25 pixels. Não vimos o nome da classe para essa imagem. Então, estou dando o nome da classe como imagem de listagem do blog. Cada item do blog está se tocando e também está muito próximo um do outro. Para fazer o espaçamento entre cada um deles. Estou escolhendo o item da coleção, que é outra lista de coleção. Vamos examinar o espaçamento. Agora, para o valor de preenchimento, estou dando 15 pixels à esquerda e à direita. E vamos dar o valor do preenchimento inferior como 30 pixels. Agora estou alterando o nome da classe do item de coleção como item da coleção do blog para obter o espaçamento para a área de conteúdo na parte superior. Escolhendo o conteúdo do blog, rap, pois tem tudo dentro dele. Portanto, o espaçamento será aplicável a todas as outras coisas dentro dele. Vamos ao espaçamento. Estou dando o valor de preenchimento ou a parte superior como 60 pixels para fazer com que a imagem use a largura de cem por cento do tamanho. Estou selecionando o rap de imagem do blog, mas ele mantém a imagem abaixo do tamanho. Estou dando o valor como 100 por cento abaixo da largura. E vamos novamente fazer o blog listando o tamanho da largura da imagem em 100 por cento. Vamos publicar isso para vê-lo no modo premium. Desenvolvemos a seção de blocos, como em nosso design. Até mesmo a transição do modo de leitura está funcionando perfeitamente. Por fim, concluímos com sucesso a seção de blocos. Na próxima lição, veremos a seção de perguntas frequentes e também a lista suspensa. Na lista suspensa, faremos a animação. Vamos ver como vamos fazer isso. 30. Seção de perguntas frequentes - Parte 1: Nesta lição, veremos mais sobre a seção de perguntas frequentes. Antes disso, vamos ver como funciona o modelo de caixa. Como de costume, criaremos uma seção e depois um contêiner. E dentro dele, usaremos um modelo de grade, que pode mostrar apenas duas colunas. Dentro do bloco d da primeira coluna, usaremos um blog To Do, para manter um título e subtítulo e, chegando ao bloco d da segunda coluna, usaremos uma lista suspensa. Abordaremos a animação necessária para a lista suspensa. Ao clicar na seta, ela deve girar enquanto abre o conteúdo dentro dela. E também deve voltar atrás e fechar esta lista. E na próxima lição da seção de perguntas frequentes, abordaremos a animação necessária para essa lista suspensa. Nesta lição, abordaremos somente a estrutura básica necessária para a lista suspensa. Vamos mais. Antes de entrar na aula, vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, o que é apropriado para a seção necessária com uma seleção de corpo e criação de uma seção. Vamos mudar isso para a seção de perguntas frequentes. Agora, dentro desta seção de perguntas frequentes, estou criando um contêiner. Vamos usar o contêiner de nome de classe existente. Agora, com a seleção desse contêiner, estou criando um bloco do, Class Name produz tilde log S FAQ lido. Portanto, isso conterá todo o conteúdo e precisará de mais uma seção de perguntas frequentes Como discutimos anteriormente, criaremos uma grade sob o pacote de conteúdo de perguntas frequentes. Na grade de edição, estou excluindo a seta. Agora estou renomeando como grade de perguntas frequentes. Precisamos do espaçamento da grade. Então, estou selecionando a seção de perguntas frequentes e estou dando o valor de preenchimento na parte superior e inferior de 200 pixels. Voltando à grade de perguntas frequentes, vimos que a quarta coluna é menor que a segunda coluna. Então, estou ajustando o tamanho da coluna para 0,5. Agora precisamos criar um diálogo para cada coluna. Portanto, a seleção da grade e do gradiente de perguntas frequentes. Aí vamos nós. Então, ele vai automaticamente para a quarta coluna. Agora estou ensinando o nome da turma desse diblock como representante do título da seção de perguntas frequentes, pois parece que é guardar os títulos. Agora eu copiei a seção intitulada rep da seção de blocos porque aqui segue o mesmo estilo. Agora estou criando outra área de conteúdo do produto Diblock que deve conter uma lista suspensa. Agora estou dando o nome da classe para ela como área de conteúdo de perguntas frequentes. Estou me gabando do título da seção de perguntas frequentes. Para ser o segundo blog de desenvolvimento, estou arrastando-o novamente abaixo dos títulos da seção de perguntas frequentes. Na segunda coluna, classificamos o bloco como área de conteúdo de perguntas frequentes. Dentro do bloco de aço, vamos adicionar uma lista suspensa. Então, com a seleção da área de conteúdo do FAQ, estou procurando por grabbed down que o menu suspenso seja criado dentro dela. Ninguém está expandindo isso como uma lista suspensa. Por padrão, temos tudo o que é necessário para a lista suspensa. Temos um DOE suspenso e uma lista suspensa. Então, agora vou voltar ao grub para ocupar o espaçamento total desse elemento principal. E diminuindo o tamanho, estou dando a largura para 100%, então ela ocupa toda a largura. Agora vamos mudar o nome da classe, um produto, esse menu suspenso como item de acordeão. Agora estou selecionando o cão suspenso. Queremos que o conteúdo entre na lista suspensa e que o cachorro preencha o espaço. E tornando essa área inserida clicável. Precisamos alterar a configuração da tela para Flexbox. Vamos renomear esse cachorro suspenso para fazer acordeão duplo. Uma coisa a observar à medida que construímos é que estamos preparando nosso menu suspenso para entrar em colapso. Queremos que nossa interação fique por trás do botão para ocultar a resposta. Como precisamos disso, vamos adicionar aqui a altura que usaremos posteriormente para ocultar essa resposta. Então, estou dando aqui como um pixel. Agora estou alinhando o conteúdo ao centro. Como já conhecemos essa opção, faremos nossas perguntas. Então, vamos fazer uma pergunta e dizer: eu preciso mudar a tipografia dessa pergunta. Estou mudando a fonte para Poppins. Espere até 500 de tamanho médio com 30 pixels e largura de altura de 1,2 hífen. Estou mudando a cor para a cor secundária. Agora vamos mudar a classe desse bloco de texto. Faça uma pergunta sobre acordeão. Em seguida, dê as boas-vindas à lista suspensa. Não conseguimos ver o conteúdo dentro do menu suspenso. Então, estou escolhendo o item acordeão, vou para as configurações e escolhendo mostrar no domínio. Portanto, o conteúdo padrão dessa lista suspensa está fora dela. Mas é claro que não é isso que queremos. Mas isso acontece porque o padrão da lista suspensa está definido como posição absoluta. Isso é ótimo ao usar uma barra de navegação, como criar um menu suspenso. Mas não precisamos disso. Por isso, queremos que nossa resposta ocupe espaço e não seja removida do fluxo de documentos. Então, vamos fazer algumas mudanças aqui em nossa posição. Vamos mudar isso para estático. Em segundo lugar, precisamos ter certeza de que a configuração da tela está bloqueada. Agora vamos mudar a cor de fundo para branco. O ego, o item do acordeão. Vamos definir isso para transbordar de oculto. E esse é um ponto importante aqui, porque queremos ocultar o conteúdo que se espalha para fora dessa área. Então, fizemos todas as coisas desnecessárias necessárias para a seção de perguntas frequentes e para a lista suspensa. Na próxima lição, abordaremos a animação que será feita na lista suspensa. 31. Seção de perguntas frequentes - Parte 2: Na lição anterior, concluímos as configurações básicas, nem para a seção de perguntas frequentes, para o menu suspenso. Nesta lição, abordaremos a animação. precisa ser feito para a lista suspensa. Isso é para girar a seta ao abrir o conteúdo e girar a seta novamente ao fechá-la. E também adicionaremos o conteúdo dentro de uma lista aleatória. Vamos ver como vamos fazer isso. Vamos tornar algo funcional com uma infração. A chave aqui é de acordo com o item. Certifique-se de que o acordeão inclua um seletor no navegador para colocá-lo com rigor em nosso painel de interação. Como estamos usando e roubando um elemento, podemos selecionar um gatilho específico para fazer isso, no podemos selecionar um gatilho específico para fazer isso, menu suspenso, aberto aqui. Faremos duas coisas diferentes, menu ou curvas, e o item correspondente espera que o menu mais próximo acabe com nossa parte. Vamos criar a primeira animação quando um menu for aberto. E vou chamá-lo de S According open. E, como sabemos, queremos animar esse rigor. E é isso que queremos garantir que esteja atualmente selecionado no navegador. Esse é o item do acordeão. Então, vamos entrar e adicionar uma ação para definir o tamanho. À medida que desceremos e definiremos o limite máximo de cuidado para 80 pixels. Isso significa que estamos reduzindo o conteúdo para o mesmo tamanho do botão. Já sabemos que o tamanho duplo é de 80 pixels. E como definimos o estouro como oculto, a resposta não será mostrada inicialmente. E é por isso que o configuramos para transbordar de forma oculta. Falando inicialmente, vamos definir essa dica como um estado inicial para que ela seja inicialmente fechada. Agora, para realmente personalizar nosso acordeão, vamos girar o ícone suspenso, a seta aqui, quando ela estiver aberta. Agora, com o ícone selecionado, estou dando o nome conforme o ícone. Agora estou selecionando novamente o item do acordeão. Eu vou para a interação. entrada no menu é aberta. E agora certifique-se de que selecionamos o ícone correspondente. E vamos adicionar uma rotação com essa ação inicial. E definiremos a rotação inicial do eixo z. Vamos girá-lo daqui para zero grau. É aqui que tudo vai começar. As mudanças que fizemos devem afetar a classe. Portanto, certifique-se de selecionar a classe e o efeito e também escolher a opção no copo como crianças Wanli com esta aula. Ou seja, queremos que ele gire o ícone, apenas quatro ícones que estão dentro dele. Agora, no navegador, vou deixar selecionar o item de acordo. E vamos adicionar uma ação como animação de tamanho. Isso é para abrir o tamanho do acordeão na altura em que é automático. A razão para fornecer o ATO é o elemento expandir, uh, com base no conteúdo dentro dele. Agora vamos voltar para ver o efeito de colapso. Agora, no grupo amino versus vamos dar a ação e começar uma animação. Agora estou dando o nome de luvas de acordeão e selecionando os locais de ação. Então, agora, de acordo com o item como seletor, estou dando a altura como pixel AD. Portanto, ele assumirá o tamanho da altura de acordo com, acordo com o ícone selecionado. Vou deixar selecionar a rotação. Novamente. Estou atribuindo o valor do eixo z a zero. Então, fizemos o acordo aberto e, consequentemente, fechado. E agora, chegando à lista suspensa, estou adicionando um parágrafo que é o conteúdo dentro da lista suspensa. Agora, vamos excluir todos os links das listas suspensas. Para mostrar o parágrafo. Estou selecionando o item correspondente e a configuração que estou escolhendo mostrar o conteúdo da lista suspensa será mostrada aqui. Agora estou mudando o conteúdo deste parágrafo. Agora eu selecionei o acordeão duplo. Para reduzir o espaçamento à esquerda, estou alterando o valor do preenchimento ou da esquerda para zero. Estou copiando a mesma lista suspensa duas vezes. Agora vamos pré-visualizar isso. Ao expandir o H da lista suspensa. Isso é uma incompatibilidade e o espaçamento. Então, precisamos corrigi-lo. Voltando agora, um erro que cometemos foi espaçar um Discman enquanto, ao abrir no estado fechado, precisamos fornecer o espaçamento e descartar. Então, novamente, no item de acordeão com uma seleção de alternância de acordeão, vamos alterar o valor do preenchimento para zero. Então, mesmo em um estado fechado, o espaçamento e esse homem foram compreendidos. E agora vamos pré-visualizar isso. Agora está funcionando perfeitamente. Então, nesta lição, concluímos a animação necessária que eu precisava para a lista suspensa. Na próxima lição, realizaremos tudo o que eu precisava para a seção de perguntas frequentes. 32. Seção de perguntas frequentes - Parte 3: Esta lição será a parte final da seção de perguntas frequentes. Temos uma estrutura desnecessária para a seção de perguntas frequentes e também a animação para a lista suspensa. Nesta lição, concluiremos tudo o que é necessário para a seção de perguntas frequentes. Essa é a imagem de fundo dela. E alguns dos ajustes necessários. Vamos ver como vamos fazer isso. Precisamos mudar a equação dessas listas suspensas. Então, estou mudando as perguntas. E também precisamos de um outro de acordo com os itens. Então, novamente, estou duplicando como ou não temos um espaçamento de grade na parte superior e inferior. Então, com a seleção do pacote de conteúdo do FAQ, estou dando o valor de preenchimento na parte superior e inferior de 200 pixels. E para a esquerda e para a direita, estou dando isso como pixel AD. Agora, tudo o que precisamos é dar a ele uma imagem de fundo. Então, com a seleção do pacote de conteúdo do FAQ, vou ver os planos de fundo e mudar a cor de acordo com nossas necessidades. Vamos ver o raio da borda antes do pixel. Agora, vou imaginar um gradiente. Vamos adicionar uma imagem de fundo nas opções. Selecione a cor do tamanho, faça com que a posição fique no centro. Agora vou escolher a imagem necessária. Agora podemos ver no parágrafo que é uma cor de fundo, precisamos alterá-la. Mesmo com a seleção do parágrafo, pudemos ver que a cor do fundo é transparente, então deve ser outra coisa. Então, no navegador, estou selecionando a lista suspensa. Nele. Podemos ver que há alguma cor no fundo. E agora vou torná-lo transparente. Agora vamos pré-visualizá-lo. Na pré-visualização, podemos facilmente expandir e reduzir a lista suspensa com uma tinta. E também precisamos mudar a seta abaixo. Então, com a seleção do ícone de gravação e de outras topografias, estou mudando a cor do nosso ambiente. Agora. Novamente, estou pré-visualizando. Para ver se foi alterado. Precisamos fazer esse pequeno ajuste entre as duas colunas. Então, na grade de perguntas frequentes, abaixo da grade Editar, estou alterando o tamanho da coluna para 0,6. E vamos dar à lacuna da coluna 60. Então, no modo de visualização, podemos ver o espaçamento entre as duas colunas. Então, concluímos toda a seção de perguntas frequentes, mas na próxima lição, veremos a seção do boletim informativo. Vamos ver isso. 33. Seção de Newsletter: Nesta lição, veremos como criar uma assinatura a partir da qual forneceremos o ID de e-mail para assinar, para que possamos levar o boletim informativo ao nosso principal. Agora, chegando ao planejamento, no topo, teremos um título e subtítulo com o nome newsletter e assinaremos nossa newsletter. E muitos o fizeram. Usaremos o formulário de inscrição, onde ele tem um formulário de entrada, a fim de obter o ID do e-mail. E no lado direito, teremos um botão para se inscrever. Cada uma das coisas usará esse diblock vertical. Vamos mergulhar na lição sobre como desenvolver esse design. Antes de entrar na aula, vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Outro corpo com uma multa rápida, estou procurando o formulário de inscrição. Ao expandir o formulário de inscrição, pudemos ver um contêiner chamado de contêiner centralizado. Como no design que vimos, há um título e um subtítulo. Vamos usar o estilo da seção de título, o que já fizemos na seção anterior. Como estou copiando o título desta seção da seção de preços e o estou usando no formulário de inscrição. Então, o mesmo estilo é usado aqui também. Agora, vamos mudar o título e subtítulo do formulário de inscrição. Terminamos esta seção de título chegando ao formulário de inscrição, onde ela tem um contêiner central. Estou escolhendo que, ao expandir esse contêiner central, poderíamos ver os elementos que são usados no formulário de inscrição. Dentro disso, temos um cabeçalho, mas de acordo com nosso design, com não tem nenhum título. Então, estou excluindo. Próximo. Por padrão, há um parágrafo. Novamente, não precisamos de nenhum parágrafo, como no design. Então, estou novamente excluindo isso dentro dos flocos do formulário de inscrição. Existe um outro desenvolvido com o nome wrapper de entrada do formulário de inscrição, onde esse wrapper é para conter o e-mail e o campo de texto de entrada. E, novamente, ao expandir isso, há um rótulo de campo e uma entrada de formulário de inscrição. Assim como no design, não temos nenhum rótulo. Então, estou namorando esse rótulo de campo. Agora, temos apenas o campo de texto de entrada e um botão. Agora estou selecionando o botão Enviar para dar o nome da classe para esse botão, estou escolhendo o botão do nome da classe existente. Na tela. Pudemos ver que o estilo armazenado nessa classe de botão é herdado desse botão. Em seguida, precisamos nos concentrar na entrada do formulário. Então, com a seleção da entrada do formulário de inscrição, vou usar outros limites no design, temos uma linha na célula inferior. Estou selecionando a borda na parte inferior. Estou dando a cor, pois em nosso design, precisamos apenas da linha na parte inferior, mas não de outras três. Então, estou escolhendo outras três garrafas. Estou escolhendo o estilo de forma inigualável. Para obter espaço com a seleção da entrada do formulário de inscrição. Vou usar outro espaçamento e estou dando o valor da margem direita como 20 pixels para obter a largura total. Para essa entrada de formulário, precisamos selecionar o wrapper, ou seja, o invólucro de entrada do formulário de inscrição. E outro tamanho que estou dando à largura de 200 pessoas. Então, a largura será ocupada por cem pessoas. Fizemos o ajuste do tamanho na largura. Agora estou selecionando a entrada do formulário de inscrição. E eu vou para essa configuração de campo de texto de entrada. E pudemos ver um campo de texto com o nome do espaço reservado. O que são essas? Navegue em nosso site. Precisamos especificar qual é a finalidade desse campo de texto. Para fazer isso, estamos usando esse espaço reservado. Dentro deste espaço reservado, estou digitando enquanto insere seu e-mail. Na tela. Esse conteúdo, que digitamos na configuração, é replicado aqui. E agora tudo o que precisamos é fornecer o tipo de gráfico ou esse texto de espaço reservado. Estou escolhendo desta vez em itálico. Fizemos esse mosaico no texto do espaço reservado. Então, precisamos definir o estado. Agora vou até o seletor e estou escolhendo o estado para colocar o titular. O objetivo de escolher esse espaço reservado é permitir estilizar os marcadores do espaço reservado separadamente do tipo e do texto. O texto do título herdará esse estilo tipográfico do estado padrão. Agora, selecionamos o estado do espaço reservado, pois já fizemos o tipo de gráfico G para esse espaço reservado. Agora, vamos para o nono. Você obteve o espaçamento entre o título e o formulário? Estou escolhendo o mesmo contêiner de tons e estou atribuindo o valor de preenchimento na parte superior para 20 pixels, pois esse registro de formulário está ocupando muito espaço. Portanto, preciso ajustar a largura desse registro de formulário para 600 pixels. Portanto, a largura é consideravelmente reduzida. Precisamos definir a cor de fundo com a seleção de cores que estou dando com um valor hexadecimal. E para fazer o canto arredondado, estou dando o valor do raio abaixo das bordas como 20 pixels. O fato de os campos de texto e os botões estarem tão próximos de seu h, precisamos fornecer o espaçamento por toda Isso cita a seleção da fórmula. Estou dando o valor de preenchimento na parte superior e inferior como 30 pixels e um valor de preenchimento esquerdo e direito como 40 pixels. A cor desse campo de texto não é apropriada como designer. Então, estou selecionando essa entrada do formulário de inscrição. Vou escolher outro plano de fundo e estou escolhendo a cor para transparente. Agora, vamos fazer com que a altura desse formulário seja inserida na altura do botão abaixo do tamanho. Vamos dar a ele um valor de altura como um pixel. Para obter novamente o espaçamento, fazemos a seção do título e o formulário. Estou escolhendo o contêiner central e, para o valor de preenchimento na parte superior, estou alterando o valor S, 25 pixels. Vamos renomear essa classe de lei de formulários como bloco de formulário de inscrição. Agora vou publicá-lo no pacote em um modo de pré-visualização. No modo de pré-visualização, pude ver que desenvolvemos, como em nosso design, e tudo está funcionando perfeitamente. Desenvolvemos o formulário de inscrição para nos inscrevermos e recebermos o boletim informativo. Na próxima lição, veremos como criar esse formulário de contato. 34. Seção de formulário de contato - Parte 1: Nesta lição, veremos a seção do formulário de contato. Antes de entrar nisso, vamos ver o planejamento para isso. Essa será uma grade com as duas colunas. Na quarta coluna, temos um título e um subtítulo que especificam o uso desta seção. E abaixo desse título, teremos um conjunto de detalhes de contato comigo para um endereço. E chegando à segunda coluna, temos um conjunto de campos de entrada com nome, e-mail, empresa para MSH. E com todos esses detalhes, podemos entrar em contato com o artista. Então, agora temos uma ideia sobre a seção do formulário de contato. Vamos ver como vamos desenvolver esse design. Vamos seguir em frente. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento para esta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner que seja apropriado para a seção necessária. No começo, estou criando uma seção. Vamos dar a ela um nome de classe para a seção como seção do formulário de contato. E dentro da seção, estamos criando um contêiner. Estou dando o nome da classe para esse contêiner como recipiente em si, como o vidro existente. Agora, dentro do contêiner, estamos criando um blog. Vamos dar o nome da classe para esse diblock S, representante do formulário de contato. Como no design, temos um modelo de grade. Então, dentro desse representante, estamos criando uma grade. E estou dedicando uma das estradas. Estou dando o valor da lacuna como 50 pixels. No design, já vimos que a primeira coluna é menor que a segunda coluna. Então, preciso ajustar a grade com a seleção da grade de edição e o ajuste da coluna. Agora precisamos renomear a classe dessa grade. Vamos dar a ela um nome de classe como grade do formulário de contato. Com a seleção da grade do telefone de contato, vou adicionar uma div, que será criada na primeira coluna. Vamos dar a ele um nome de classe para este representante detalhado do Diblock S Contact Form. Agora estou criando outra div, que será criada na segunda coluna. Vamos dar a ele um nome de classe para este formulário de contato diblock S, rep. Como essa div é criar um formulário com os ajustes de entrada. Não ajustamos o espaçamento da seção. Então, estou selecionando a seção do formulário de contato e considerando o valor de preenchimento na parte superior e inferior, é 100 na primeira coluna. No início, temos o pote de título com uma legenda e o título, pois fizemos várias seções de títulos. Então, aqui vamos copiar o título do formulário de inscrição. E estou duplicando n e arrastando título desta seção para o envoltório de detalhes do formulário de contato. Essa seção do título é maior aqui. Pudemos ver no seletor que usamos uma subclasse chamada center. Porque na coisa anterior, que é um formulário de inscrição, usamos esse título colocado no centro. Usamos outro nome de classe, center. Mas aqui nós designamos isso. Vamos excluir essa classe central. Portanto, o conteúdo desse título será recuado para a esquerda. Agora vamos pegar o conteúdo de dois subtipos e o título, como em nosso design. Ajudamos a finalizar o título e, em seguida, precisamos fornecer um detalhe de contato. Então, com a seleção do contato a partir do rato de detalhes e a criação de uma div que será maior. E no título. Vamos dar a ele um nome de classe para o bloco de aço como item de detalhes de contato. Fizemos o espaçamento para manter os detalhes de contato. E dentro desse detalhe do item de contato, vamos criar um título. Vamos escolher o tipo de título S, H três. Estou mudando o conteúdo do título para maio. E agora precisamos mudar a tipografia desse título. Agora estou alterando o nome da classe desse título como título detalhado. Criamos um título e , em seguida, tudo o que precisamos é de um link que leve à célula de ID de e-mail dentro um item de detalhes de contato e à criação de um link. Então, vamos mudar o link do texto para a dama principal. Voltando à tipografia deste link, estou escolhendo a fonte como Poppins, com peso normal de 400 e um tamanho com o pixel em que a cor da fonte seja a cor do conteúdo da amostra. E a altura será de 1,2 hífen. Ou não precisamos desse hiperlink. Então, vou para esse bate-papo e escolho o nenhum. Como usamos o link, podemos mantê-lo assim. Precisamos dar a transição para esse link. Em Efeitos, estou escolhendo transição e também quero escolher que tipo de transição ela deve ser. Eu selecionei a cor da fonte do tipo S. Precisamos fazer a transição da cor da fonte para este link de maio. Agora, no setor, preciso selecionar o estado que é todo o estado. Então, enquanto passamos o mouse, precisamos mudar a cor da fonte. Agora vou usar outra tipografia e estou escolhendo a cor primária deste relógio. Enquanto eu estiver passando o mouse sobre o link, a cor mudará. Agora, vamos ver nenhum nesse gene. Agora eu preciso mudar o nome da classe para este link. O nome da classe é o link de contato. Precisamos fornecer o espaçamento na parte inferior desse item de varejo de contato para obter o espaçamento necessário para os próximos detalhes de contato. Então, estou selecionando o item de detalhes do contato e estou fornecendo o valor de preenchimento na parte inferior, S, 20 pixels. O mesmo design será seguido para o próximo contato com ele sobre a seleção dessa conduta, seja qual for o item em si, eu o estou duplicando. Vamos mudar esse título para formar os textos vinculados ao número de telefone. Agora, novamente, estou duplicando esse item de detalhes de contato e alterando o título para endereço. Aqui estamos usando o endereço para não precisarmos do link de texto. Então, estou excluindo isso. Neste item de detalhes de contato, estamos criando um bloco de texto. O próximo bloco é maior aqui, e estou fornecendo o conteúdo do endereço conforme o design deles. Agora precisamos mudar a tipografia desse bloco de texto. Agora vou mudar o nome da classe do bloco de texto, S, endereço, detalhe. Concluímos os detalhes de contato necessários na primeira coluna. Na próxima lição, veremos a criação do formulário de contato na segunda coluna. Vamos ver como vamos fazer isso. 35. Seção de formulário de contato - Parte 2: Concluímos os detalhes de contato na primeira coluna da grade. Na segunda coluna, vamos criar um formulário de contato, campos junto com o nome, e-mail, empresa, mensagem telefônica e com o botão. Nesta lição, veremos como desenvolver esse formulário de contato, como em nosso design, vamos mergulhar nele. Já criamos esses campos do formulário de contato com a seleção de oito. Estou procurando por um bloco de formulários. Agora, esse registro de formulário é criado dentro desse pacote de campos do formulário de contato por padrão, neste intervalo de formulário, temos o modelo de nome, endereço de e-mail e o botão de envio. Ou expandindo esse envoltório de campos do formulário de contato, poderíamos encontrar esse bloco de formulários. Novamente, ao expandi-lo, pudemos encontrar um formulário do bloco, uma mensagem de sucesso e uma mensagem de erro. Esse é o modelo padrão para esse bloco de formulários. Agora estou acessando o formulário e o expandindo aqui. Conseguimos encontrar um rótulo de campo e um campo de texto. E junto com o botão enviar, agora vimos quais são todas as coisas que estão aqui dentro do formulário. Vou criar um diblock onde ele contém esse campo de texto. Agora estou arrastando o diblock na parte superior. Agora estou colocando o rótulo do campo e o campo de texto dentro desse blog recém-criado. Vamos dar a ele um nome de classe para esse wrapper de entrada do formulário div log S. Agora estou expandindo esse invólucro de entrada de formulário. Aqui. Estou escolhendo esse campo de texto. Vamos dar a ele um nome de classe para esse campo de texto como campo de entrada no design, não temos o rótulo. Então, estou excluindo esse rótulo de campo. O mesmo estilo será seguido para todos os outros textos preenchidos. Então, estou duplicando o invólucro de entrada do formulário até que eu precise. Portanto, as mudanças que estamos fazendo dentro desse campo de entrada serão afetadas em todos os outros campos de entrada. Agora estou escolhendo o primeiro invólucro de entrada do formulário e estou selecionando esse campo de entrada. Agora vou atravessar as fronteiras. Precisamos de um resultado final. Então, estou escolhendo o resultado final e estou escolhendo o estilo como sólido. Estou dando a cor como em nosso design. Então, na tela, você poderia ver o estilo aplicado em todos os outros campos de entrada. Na verdade, não precisamos de uma caixa. Portanto, precisamos selecionar todas as outras bordas, exceto a parte inferior. Eu preciso escolher o estilo de forma inigualável. Então, no começo, estou selecionando a borda direita e escolhendo o estilo como nenhum. O mesmo se aplica a outros modelos. Agora, a linha inferior é criada na tela. Agora, precisamos dar a ele um espaço reservado para esses campos de entrada. Com a seleção do testamento de entrada, vou para as configurações abaixo das configurações do campo de texto, estou dando o espaço reservado como nome. Vamos explicar a tipografia desse espaço reservado. Sob a tipografia, estou escolhendo a fonte, pois o couro Poppins espera antes do normal e o tamanho é de 20 pixels e a altura é de 1,2 hífen. Agora vamos dar a cor da fonte para essa cor de conteúdo S a partir dessa cunha. O mesmo processo será aplicado para todos os outros campos de texto. Preciso fazer com que todos os espaços reservados estejam voltados para a esquerda. Então, no espaçamento, estou atribuindo o valor de preenchimento esquerdo a zero. O espaçamento entre esses textos preenchidos não é suficiente. Então, estou selecionando todo esse encapsulamento de entrada do formulário e estou dando o valor da margem na parte inferior como 40 pixels. Agora estou selecionando o botão enviar. Agora, no seletor, darei o nome da classe para o botão de envio como o botão de classe existente. O estilo, que é armazenado nesse botão de nome de classe, será herdado para o botão enviar. No design, não temos uma largura total off-line para cada uma das falhas de texto. Então, precisamos reduzi-lo para a metade. Então, estou selecionando essa entrada do formulário junto com a classe existente. Estou criando uma nova classe com o nome half width. Agora, abaixo do tamanho, estou dando o valor da largura como 50 por cento. A linha fica mais curta para 50 por cento. Agora estou selecionando o segundo invólucro de entrada do formulário e estou usando o nome da classe existente para isso . O estilo será aplicado a este formulário input grep. O mesmo processo será aplicado para esta empresa e um telefone. Precisamos de uma linha completa para esta mensagem, então não vou alterá-la. Precisamos fazer com que esse campo de entrada fique um ao lado do outro no formulário e crie um diblock. Estou arrastando o diblock na parte superior. Agora estou dando o nome da classe para isso medida que os campos de entrada se separam. Agora estou arrastando o primeiro para formar o invólucro de entrada dentro desse representante de campos de entrada. poderíamos fazer as alterações conforme desejássemos. Agora, a seleção dos campos de entrada está sob o layout. Estou escolhendo flex sob o Display. O mesmo processo será aplicado para outros dois campos de texto. Agora, no formulário , crie um cachorro, cachorro e arraste-o abaixo dos campos de entrada rep. Agora, no seletor, estou dando o nome da classe para esse diblock como de campos de entrada de classe existente representante de campos de entrada de classe existente. Agora vamos arrastar os próximos dois campos, ou seja, empresa e telefone. Precisamos fazer o espaçamento à esquerda para todos os campos de entrada. Estou selecionando este invólucro de entrada de formulário abaixo do espaçamento. Estou dando o valor da margem para a esquerda como 40 pixels. Portanto, as mudanças que fazemos aqui também serão afetadas em todos os outros campos. Agora, o botão não está alinhado corretamente, então estou selecionando o botão Enviar. Se eu fizer alguma alteração nessa classe de botão, ela será afetada nos outros botões. Então, estou avaliando e outro nome de classe, botão do formulário. Agora estou dando o valor da margem esquerda para esse botão como 40 pixels. Agora está alinhado corretamente. Teremos muitas palavras para esta mensagem. Portanto, esse livro didático em particular não é suficiente. Então, sob esse invólucro de entrada de formulário, estou criando uma área de texto do elemento. Agora estou dando o texto do espaço reservado como uma mensagem. Criamos a área de texto, então ele não precisa que essa mensagem recebida quando eu a excluo. Agora, vamos dar a ela um nome de classe para essa área de texto como campo de entrada de nome de classe existente. Portanto, o estilo será aplicado a essa área de texto. Como precisamos de um pouco mais de altura para essa área de mensagem, estou criando outro nome de classe junto com o campo de entrada como área de texto. Deixe-me dar o valor da altura como 110 pixels. Mas eu preciso de um pouco mais de altura, então estou alterando o valor de 240 pixels. Já fizemos isso. Mas em todo o preenchimento de entrada, o texto do espaço reservado está muito próximo da linha. Para isso, precisamos fazer um espaçamento entre a linha e o texto do espaço reservado. Então, estou selecionando esse campo de entrada, estou fornecendo o valor de preenchimento ou o S 15 pixel inferior, mas preciso de um pouco mais de espaçamento. Então, novamente, estou alterando o valor para 20 pixels. Então, nesta lição, preenchemos o formulário de contato junto com um estilo desnecessário em todos os campos. Na próxima lição, veremos como criar uma cor de fundo para esse detalhe do formulário de contato e um campo do formulário de contato junto com o alinhamento desses dois, como no design. E, finalmente, veremos a mensagem de sucesso, uma mensagem de erro para este formulário Vamos mergulhar nela. 36. Seção de formulário de contato - Parte 3: Nas duas lições anteriores, preenchemos os detalhes do formulário de contato e os campos do formulário de contato. Nesta lição, concluiremos todo o desenvolvimento como em nosso design, junto com a cor e o alinhamento do plano de fundo, mensagem de erro e uma mensagem de sucesso. Vamos ver como vamos fazer isso. Os detalhes do formulário de contato e os campos do formulário de contato não estão alinhados centralmente. Então, estou selecionando essa grade do formulário de contato, outra camada, estou selecionando a linha central. Precisamos fornecer a cor de fundo para esse detalhe do formulário de contato. Então, vou ficar em segundo plano e escolher a cor como design de intervalo de figma. Para fazer os cantos arredondados, estou dando o valor de 40 pixels para o raio sob as bordas. Então, com a seleção desse preenchimento do formulário de contato, vou usar outro plano de fundo e estou dando a mesma cor que no Formulário de Contato D. E vamos dar a ele um valor de raio 40 pixels abaixo das bordas, todos os campos de entrada têm uma cor de fundo em branco, mas precisamos criar a cor como no plano de fundo. Então, com a seleção desse campo de entrada, vou para o fundo, abaixo da cor, estou escolhendo o transplante S. Então, agora o campo de entrada, cor de fundo, será transplantado. E também tira a cor do fundo. O espaçamento para essa lista de detalhes do formulário de contato não é suficiente para a seleção da dívida. Estou usando outro espaçamento e estou dando o valor de preenchimento da área de trabalho como 90 pixels. O mesmo se aplica à parte inferior. Estou dando o valor de preenchimento para a esquerda e para a direita como 80 pixels. Vamos fornecer os mesmos valores de preenchimento para o campo do formulário de contato. Mas ainda assim, o espaçamento dos campos do formulário de contato não é o mesmo do envoltório de detalhes do formulário de contato. Estou selecionando a grade, que é a grade do formulário de contato. Outra camada que estou escolhendo é esticada na alinhada. Pudemos ver no formulário de contato os detalhes do espaçamento e a parte superior é maior. Então, estou alterando o valor do preenchimento superior para 70 pixels. Para obter o espaçamento entre cada um dos campos de entrada, estou selecionando o invólucro de entrada do formulário ao fornecer as alterações nessa classe. Esse valor será herdado para todos os outros campos de entrada. Agora, com a seleção do invólucro de entrada do formulário, estou dando o valor da margem na parte inferior como 60 pixels em cada item de detalhes de contato, o espaçamento parece maior. Então, com a seleção desse item de detalhes de contato, estou fazendo com que o valor de preenchimento inferior seja de dez pixels, com espaçamento reduzido para todos os outros itens de detalhes. Vamos publicar isso para ver como funciona. A transição para o botão de envio está funcionando perfeitamente, e a transição para o homem e o telefone também está funcionando na grade. Agora vamos voltar. Sob o Bloco de Formulário. Temos outro log div com a mensagem de sucesso do nome. Ao enviar o formulário com sucesso, precisamos receber uma mensagem de sucesso. E deixe o design funcionar. Eu selecionei a mensagem de sucesso, o registro. Agora vou descer e ficar embaixo do Bloco de Formulários. Agora eu preciso fazer o estado para o sucesso. Agora vou voltar a esse ladrilho com sua eleição. Deixe-me mudar a tipografia desse conteúdo. Estou escolhendo o telefone como Poppins. A cor com uma cor secundária da amostra. Deixe o tamanho entre os pixels. Agora, para mudar a cor de fundo, estou fazendo outros planos de fundo e estou escolhendo a cor como cor primária deste relógio. O preto não, parece bom. Então, estou mudando a cor da fonte para branco. Terminamos a mensagem de sucesso. Vamos passar para a mensagem de erro no navegador. Estou selecionando a mensagem de erro. E sob a configuração, estou configurando o cenário para erro. Portanto, se houver algum erro ao enviar o formulário, receberemos a mensagem de erro. Vamos fazer esse mosaico para essa mensagem de erro. Agora, vamos dar o tipo de fonte para esse conteúdo como Poppins e um tamanho com 20 pixels. Para obter todo o nosso espaçamento para essa mensagem de erro, estou fornecendo o valor de preenchimento na parte superior e inferior como 20 pixels. E no valor de preenchimento esquerdo, estou atribuindo 20 pixels para obter o espaçamento entre o botão de envio e a mensagem de erro, preciso fornecer um valor de margem. Então, vamos dar a ele um valor de margem na parte superior de 20 pixels. Agora estou atribuindo a cor da fonte dessa mensagem de erro à cor secundária da amostra. Para fazer o alinhamento correto para essa mensagem de erro, como no botão Enviar e nos campos de entrada. Com uma seleção de mensagens de erro, estou dando o valor da margem à esquerda como 40 pixels. Concluímos o alinhamento agora, mas para o campo de entrada, não especificamos o tipo desse ajuste de entrada. Então, vamos fazer isso também. Para a entrada do nome, temos o tipo como plano. Vamos pular para o e-mail. Estou dando o tipo de e-mail. E também na configuração do formulário, estou dando o nome a ser emitido nas configurações do campo de texto. Novamente, estou dando o nome como e-mail. Agora, a empresa fracassou. Vamos dar o plano tipo S, o nome das configurações do formulário e o texto pulsante. Estou dando isso como companhia. Agora, para o telefone, Phil, estou dando o nome como telefone na configuração do formulário e também as configurações do campo de texto. E vamos dar o telefone tipo S. Agora estou selecionando o campo da mensagem e estou dando o nome na configuração do formulário S message. Usamos a área de texto. Então, aqui não temos nenhum desse tipo. Agora vou publicar isso. Então, agora desenvolvemos tudo como em nosso design e também está ótimo. Na próxima lição, veremos a seção de rodapé. 37. Seção de rodapé - Parte 1: Nesta lição, veremos uma dissecação de alimentos de boda. Antes disso, vamos ver primeiro o cabeçalho do planejamento, um nome do autor que estará no centro. Nós precisamos disso. Estaremos criando um diblock para manter todas as mídias sociais. Para cada uma das mídias sociais, criaremos um diblock separado. Novamente dentro dela. Esse é um logotipo diblock to hold. E outro desenvolvimento para o nome da mídia social e o link para ela. O mesmo procedimento será seguido para os demais. É assim que vamos fazer. Vamos ver como vamos desenvolver isso. Antes de entrar na aula. Vamos ver o modelo de caixa comum, que será aplicado a todas as seções dentro do corpo. Precisamos adicionar uma seção e fornecer o nome de classe apropriado para essa seção. seguir está o espaçamento desta seção. Ou seja, precisamos fornecer o valor de preenchimento superior e inferior para ele. Depois de criar uma seção dentro dela, precisamos adicionar um contêiner e o nome da classe deve ser fornecido para esse contêiner. Agora podemos adicionar o elemento dentro do contêiner, que é apropriado para a seção necessária. Agora, embaixo do corpo, com a ajuda da seção de classificação rápida de vinhos, precisamos fornecer o nome da classe para esta seção. Deixe administrá-lo como seção de dose alimentar. Agora precisamos criar um contêiner. Agora estou atribuindo o contêiner de classe existente. Esse contêiner. Agora, dentro desse contêiner, estou criando o blog. Deixe o nome da classe para o bloco de aço B Photo Grab. Para saber isso como foto, precisamos adicionar uma linha na parte superior. Então, com a seleção de comida ou rap, vou até as bordas e seleciono a borda superior, e estou escolhendo esse ladrilho como sólido, então estou dando a cor em um valor hexadecimal, como em nosso design figma. Não especificamos o espaçamento para esta seção. Então, estou selecionando esta seção de fotos e dando o valor de preenchimento na parte superior e inferior como 100 pixels para que possamos ver o espaçamento na parte superior e inferior. Agora, voltando à captura de pasta, vamos adicionar o título. Deixe o cabeçalho digitar B, H2. Precisamos fazer com que esse título seja o centro. Então, sob a tipografia, estou escolhendo o alinhamento central. Estou alterando o conteúdo desse título para ficar conectado, para mudar a topografia dele. Vou usar outra tipografia. Estou escolhendo a fonte como Poppins. Peso com 500, tamanho médio com 30 pixels e altura largura, 1,5 hífen. Precisamos mudar a cor da fonte. Então, vou escolher outra cor que estou escolhendo como cor secundária. Vamos capitalizar todas as letras. Precisamos renomear o nome da classe para esse título, que o nome da classe seja photo connect title. Precisamos desse título. Precisamos adicionar o nome do autor. Então, estou criando uma imagem. Ao clicar em Escolher imagem. Estou selecionando o nome do autor do ativo para torná-lo central. Estou escolhendo alinhamento central e outro tipo de grafeno. Concluímos a seção de cabeçalho junto com o pedido. E então precisamos criar todos os itens de mídia social. Logo abaixo disso. Criamos uma capa de rodapé para esse título. Sob esse contêiner, estamos criando uma lei div com o nome photo social rep. Novamente, dentro dela. Estamos criando outro item social de rodapé diblock. Para cada item social, precisamos criar um diblock. Então, sob os alimentos ou itens sociais, estamos criando um diblock com o nome Itens sociais. Dentro de cada item social, temos um ícone que é um logotipo e um nome de item social. E junto com esse link. Então, primeiro, vamos criar uma aparência div para segurar o ícone e outros itens sociais. Eu dei o nome da classe para isso ou o blog como ícone social. Embrulhe. Dentro deste ícone, pegue. Estou criando uma imagem. Agora estou escolhendo a imagem do ácido, que é um ícone do Facebook. Agora precisamos definir o tamanho para restringir esse logotipo. Então, estou selecionando esse ícone social e estou diminuindo o tamanho. Estou dando a largura como 60 pixels e a altura com 60 pixels. Para dar a cor de fundo. Estou dando a cor e hexadecimal, como no desenho da figma, precisamos torná-lo como ao redor. Então, abaixo das bordas, estou dando o valor do raio como 100 pixels. Precisamos colocar esse logotipo no centro. Estou escolhendo um flex como tela abaixo do layout, alinhando-o ao centro e justificando-o ao centro. Terminamos o embrulho de ícones sociais. Agora, dentro do item social, precisamos dar nome ao item social com uma seleção de item social e criar outro diblock. Vamos dar a ele um nome de classe para esse diblock S Social Text Wrap dentro deste representante, vamos criar um título que seja para o nome da mídia social e deixar o título do tipo B tenha três. Agora eu mudei o conteúdo do título para o Facebook. Agora, sob a tipografia, estou escolhendo a fonte como Poppins. Peso de 500, tamanho médio com fonte de 18 pixels, cor com cor secundária da amostra e altura largura 1,3 hífen. Adicionamos o nome da mídia social. Agora precisamos adicionar um link. Sob o contorno de texto social. Estou adicionando um link de texto. Agora. Estou mudando esse link de texto. Estou acessando a tipografia deste link de texto. Vamos dar o tipo de fonte como Poppins, peso como identificador de arquivo Médio, sites com 16 pixels e altura com um hífen. Vamos dar a ele uma cor em um valor hexadecimal como design de intervalo figma, não precisamos de nenhum hiperlink. Então, estou escolhendo o estilo como nenhum, para o espaçamento de rádio na parte superior desses textos de mídia social, estou escolhendo esse título. Estou atribuindo o valor da margem a zero pixel, que está na parte superior. E agora precisamos renomear nome da classe de título como título social. Novamente, vou reduzir o espaçamento, a parte inferior. Então, com a seleção do título social abaixo do espaçamento, estou dando o valor zero na margem inferior, precisamos fazer o logotipo e o título social, ou seja, ficarem próximos um do outro. Já sabemos que esses dois itens estão dentro do item social. Então, estou selecionando o item social, faço um blog e estou escolhendo um flexbox. Estou alinhando-o ao centro para criar um espaçamento entre o ícone e o texto. Estou selecionando a captura de texto social. Estou dando o valor de preenchimento, que está à esquerda, como 20 pixels, para criar um espaçamento entre o Facebook e o link. Estou selecionando o título social. Estou fazendo o valor da margem na parte inferior como phi pixel. Parece que o espaçamento entre o ícone social e os textos sociais é maior. Então, estou selecionando esse contorno de texto social e estou dando o valor de preenchimento, que está à esquerda, para 15 pixels. Mas acho que o espaçamento entre esses Facebook e o deslink parece maior. Então. Novamente, estou alterando o valor da margem para zero. Novamente. O mesmo design será seguido para lembrar o item social. Com a seleção do item social, estou duplicando-o. Fazer com que todos os itens sociais fiquem próximos uns dos outros com a seleção de alimentos ou itens sociais onde estão todos os itens sociais. Agora estou escolhendo o flex sob o layout. Estou alinhando-o ao centro. Precisamos criar o espaçamento entre cada item social. Então, estou selecionando o item social e estou dando o valor da margem que está à direita para 60 pixels. Precisamos de itens sociais. E, novamente, estou duplicando. Até agora, terminamos a comida que combina com o nome do autor em todos os outros itens de mídia social. Na próxima lição, concluiremos uma seção inteira de rodapé, como no web design. 38. Seção de rodapé - Parte 2: Nesta lição, concluiremos a comida ou o mal, como em nosso design. Ou seja, alterando os itens sociais e os ícones e também os links. Então, vamos terminar isso. No início, selecionei os itens sociais fotográficos. Como ele ocupou toda a largura, preciso consertá-lo com a seleção do item associado ao alimento. Abaixo do tamanho, estou dando o valor da largura S mil e cem pixels. E para chegar ao centro, abaixo do espaçamento, estou escolhendo o centro e também o estou justificando para o centro. Agora precisamos definir a cor de fundo para os itens sociais. Então, sob os planos de fundo, estou dando o valor da cor em hexadecimal. Precisamos tornar todos os quatro cantos mais redondos. Então, sob as bordas, estou dando o valor do raio S, 20 pixels. Agora vamos dar o espaçamento na parte superior e inferior dos alimentos ou itens sociais. Então, estou abaixo do espaçamento e estou dando o valor de preenchimento na parte superior como 40 pixels. Novamente, estou dando o valor de preenchimento na parte inferior S, 40 pixels. Fizemos a configuração básica necessária para o representante social de fotos. Agora precisamos alterar os textos e links dos ícones para cada um dos itens sociais. Para o segundo item social, vou mudá-lo como representante de drogas. Para isso, preciso mudar o plano de fundo e um ícone, um texto e também um link. Então, primeiro, estou selecionando o envoltório de ícones sociais. Este rap de ícones sociais foi usado para todos os itens sociais. Então, se eu fizer alguma das mudanças, isso afetará as outras. Então, junto com a aula de rap com ícones sociais, vou criar um Instagram de qualquer vidro. Então, agora podemos dar a ele uma cor de fundo. Agora vou para o plano de fundo e estou dando a cor adequada para o Instagram. Criamos a cor de fundo para o Instagram. Agora precisamos mudar o ícone que está dentro dele. Então, estou selecionando essa imagem que está sob o botão de arrastar do ícone social e vou substituir a imagem que é o Instagram. Agora vamos mudar o título social para Instagram. Agora, estou escolhendo o link para cada um dos itens sociais. Precisamos de um link separado. Antes disso, vamos mudar o nome da classe para social. Junto com a classe social vinculada existente. Vou adicionar outra classe, pois usaremos um link separado para cada item social. Vamos uma nova turma chamada B Instagram. Agora estou mudando a cor que é adequada para o Instagram. Agora estou passando para o terceiro item social, que é para o Twitter. Agora, precisamos mudar a cor do envoltório do ícone social. Então, junto com a classe existente, estou adicionando uma subclasse com um nome twiddle. Agora estou mudando a cor de fundo, que é adequada para essa janela. Agora vamos mudar a imagem do ícone do Twitter. Vamos mudar o título social desse S para Edo. Agora eu selecionei o complemento do link social para o link social. Estou adicionando outra classe, viúva, e estou mudando a cor dela. Agora eu selecionei o item social completo que é para o u du. Agora, com a seleção do ícone social, estou adicionando uma nova classe junto com a classe existente. E sob o fundo, estou mudando a cor. Agora, vamos substituir a imagem existente. Você faz imagem? Agora estou mudando o texto do título social para o YouTube. Agora estou selecionando o link social. Junto com o link social existente estou adicionando uma aula do YouTube. Outra cor e mudança da cor adequada para o ano. Precisamos criar o espaçamento e a parte inferior desse conteúdo, seja na seleção do conteúdo do rodapé estou atribuindo o valor de preenchimento inferior a dez pixels. Precisamos do espaçamento entre esse envoltório de rodapé e os itens sociais de um rodapé. Então, vou alterar o valor da margem na parte superior para 40 pixels. Portanto, temos um espaçamento considerável entre esses dois. Agora eu sinto que há muito espaço dentro desses representantes fotográficos. Então, novamente, estou redefinindo isso. Agora eu selecionei a seção de rodapé. Agora vamos deduzir um pouco o topo desse valor de preenchimento. Então, estou ensinando o valor do pixel a 60 pixels. Agora estou publicando para ver como fica. Esse caminho de pasta parece ótimo. Concluímos todo o processo, mas na próxima lição veremos sobre a seção de direitos autorais. Vamos passar para a próxima lição. 39. Seção de rodapé - Parte 3: Nesta lição, veremos sobre a seção de direitos autorais. Vamos ver o planejamento desta seção de direitos autorais. Agora, usaremos uma seção que consiste em dois blocos de cada lado e, em seguida, eles bloqueiam no lado esquerdo. Haverá um link para projetos residenciais sobre preços e contato. E dentro do trabalho div no lado direito, isso será um conteúdo protegido por direitos autorais. É assim que vamos fazer isso. Vamos ver como vamos desenvolver isso. Agora, vamos adicionar um diblock e outro contêiner. Vamos dar o nome da classe para esse bloco de documentos como seção de direitos autorais. Dentro da seção de direitos autorais, vamos adicionar outro diblock para manter os menus. Vamos criar o bloco d. E estou dando o nome da classe como embalagem do menu de direitos autorais. Precisamos de outro diblock para o conteúdo protegido por direitos autorais. Então, novamente, na seção de direitos autorais e criando um diblock, estou dando o nome da classe para isso desenvolvido como embalagem de conteúdo de direitos autorais. Voltando ao invólucro do menu de direitos autorais, precisamos adicionar os links. O link será criado dentro do representante do menu de direitos autorais. Vamos mudar a tipografia desse link de texto. Não precisamos de nenhum hiperlink, então não estou escolhendo nenhum para o estilo. Vamos dar a ele um nome de classe para este link de texto como link de dominó de comida. Totalmente, estamos tendo fight x lnx. Então, estou duplicando esse link do menu da pasta quatro vezes. Precisamos adicionar o espaçamento entre esses links de textos. Então, estou selecionando essa linha de dominó de pés e, em seguida, dando o valor moderno à direita como 40 pixels. Vamos mudar cada um dos links de texto como página inicial. Projetos sobre preços e contato. Por enquanto, finalizamos os direitos autorais Minnow. Vamos examinar o conteúdo de direitos autorais dentro desse pacote de conteúdo de direitos autorais Estou adicionando um parágrafo. Vamos mudar o conteúdo do parágrafo como conteúdo protegido por direitos autorais em nosso design. Agora, precisamos alinhar o menu de direitos autorais e o conteúdo de direitos autorais em uma linha. Então, estou selecionando a dissecção n, que é a seção de direitos autorais. Agora vamos escolher um fluxo na tela abaixo do layout. Estou alinhando e fazendo a mesma coisa para fazer com que os menus fiquem no canto esquerdo e o conteúdo dos direitos autorais fique no canto direito. Estou escolhendo um espaço entre outro justificado. Não alteramos o nome da classe desse parágrafo. Então, estou selecionando esse parágrafo e, em seguida, dando o nome da classe como direitos autorais. Os textos de direitos autorais não estão perfeitamente centralizados e alinhados, como no menu. Então, estou abaixo do espaçamento e estou mudando o valor moderno na parte inferior para zero. Agora, tanto os menus quanto o texto dos direitos autorais estão alinhados centralmente para obter o espaço entre o representante social do rodapé e a seção de direitos autorais. E estou selecionando a seção de direitos autorais agora e estou indicando que o valor da margem é o máximo de 240 pixels. A parte com os pés estará no final do lado positivo. Portanto, não precisamos de muito espaçamento no final. Então, estou selecionando essa seção de rodapé e estou dando o valor de preenchimento ou os 40 pixels inferiores. Vamos publicar isso para ver como fica. O espaçamento e a parte superior da seção corporativa não são suficientes. Então, com a seleção da seção corporativa e dando o valor da margem na parte superior a 90 pixels. Agora, concluímos a seção de fotos com uma pasta com o título do nome, comida ou rap social e uma seção de direitos autorais. Na próxima lição, veremos o ajuste de espaçamento que é necessário para cada uma dessas seções. 40. Ajustes de espaçamento: Nesta lição, faremos um ajuste fino do espaçamento em cada uma das seções como desenho de intervalo de figma. Vamos ver nesta lição como vamos fazer o ajuste do espaçamento. Inicialmente, eu escolhi esta seção, o valor de preenchimento para a parte superior e inferior desta seção, eu a atribuí como 100 na parte superior e 140 na parte inferior. Agora acho que preciso dar um pouco de espaçamento na parte superior e inferior para o valor do preenchimento superior, estou alterando-o para 110. Agora estou chegando ao espaçamento da parte inferior. Novamente, preciso de mais espaçamento. Então, estou alterando o valor do preenchimento inferior de 140 pixels para 160 pixels. Eu terminei a seção de serviços. Agora estou escolhendo a seção da galeria. Novamente, para o valor de preenchimento superior. Estou mudando para 110. Agora estou chegando ao final desta seção. Pudemos notar visivelmente que o espaçamento não é suficiente. Parece que está muito perto do final desta seção. Agora estou alterando o valor do preenchimento inferior para ele. Deixe o valor ser 140 pixels. Parece bom no topo. Mas, para o fundo, acho que precisa de mais espaçamento. Então, estou alterando o valor para 160 pixels. Agora estou indo para a seção do workshop para obter mais espaçamento. Na parte superior, dentro da seção do workshop, vou até o valor da rebatida e estou alterando o valor como um pixel na parte superior. Agora estou chegando ao fundo, pois sinto que preciso reduzir o espaçamento. Então, estou alterando o valor para 80 pixels. Novamente, sinto que preciso reduzir o espaçamento. Então, estou alterando o valor para 60 pixels. Concluímos a seção do workshop. Agora estou passando para a seção da guia de licenciamento. Nesta seção, sinto que preciso reduzir o espaçamento na parte superior. Então, estou alterando o valor para 80 pixels. O espaçamento na parte inferior desta seção da guia de licenciamento parece bom. Então, vou embora desse jeito. E agora estou indo para a seção de depoimentos. O espaçamento e a banheira parecem um pouco altos. Então, estou mudando o valor para dois pixels. Agora, com um exame chegando à seção de preços, vamos aumentar o espaçamento na parte superior. Então, estou dando um valor de preenchimento para isso como 110 pixels. Chegando ao fundo, precisamos de muito espaçamento, então vou deixar como está. Depois disso, estou escolhendo esta seção do blog para aumentar o espaçamento na parte superior. Novamente, estou dando o valor de preenchimento 210 pixels na parte inferior desta seção do blog, que não precisa disso muito espaçamento. Então, estou reduzindo o espaçamento para dois pixels, que está na parte inferior. Agora estou indo para a seção de perguntas frequentes. Deixe-me alterar o valor do preenchimento na parte superior para 80 pixels. Em comparação com o design da figma, não precisamos de muito espaçamento na parte inferior. Então, estou alterando o valor do preenchimento na parte inferior para 20 pixels. Mas, novamente, sinto que não preciso de nenhum espaçamento e da parte inferior, então estou alterando o valor para zero. Agora, acessando o formulário de inscrição, deixe-me aumentar o valor do preenchimento na parte superior para 120 pixels. E para reduzir o espaçamento na parte inferior, estou alterando o valor para 60 pixels. Mas, novamente, sinto que preciso reduzir o espaçamento, então estou alterando o valor para 40 pixels. Em seguida, estou selecionando a seção do formulário de contato. O espaçamento na parte superior para isso parece bom. Então, vou até o fundo da questão. Agora estou alterando o valor de 210 pixels. Mas, novamente, sinto que preciso aumentar o espaçamento. Então, estou alterando o valor de 220 pixels. Em seguida, estou selecionando esta seção de fotos. Aqui. Sinto que preciso aumentar o valor do preenchimento. Então, estou mudando o valor para 80 pixels, mas acho que os 70 pixels parecem bons. Então, estou mudando isso. Vamos publicá-lo para ver como fica. Vamos analisar todo o espaçamento a partir da casa. A seção Serviços tem boa aparência, assim como a seção de galeria, seção de workshops, licenciamento, guia, seção de depoimentos, seção preços e seção de blog. Tudo parece estar bem , como em nosso design. 41. Página de publicação única - Parte 1: Fizemos a listagem do blog na seção de histórias do nosso blog. Nesta lição, criaremos uma única postagem de blog ao clicar nessa lista de blogs individual. Vamos ver como vamos duplicar isso como uma página de postagem no blog. Então, estou escolhendo o painel de páginas abaixo dele. Você pode encontrar uma página estática, uma página coleção de CMS, excluir a página e a renda da fala. Vamos usar uma página de coleção do CMS. Aqui dentro. Já criamos os modelos de postagens do blog. Então, estou selecionando esse modelo de postagem de blog. Usamos as páginas da coleção porque vamos extrair o conteúdo do blog a partir dessa coleção do EMS. Agora, a página foi criada. No navegador. Você pode ver todas as seções que criamos até agora. A partir desse navegador, usaremos a seção do cabeçalho e a dissecação de alimentos. Como já sabemos, vamos criar uma única página de postagem no blog. Dentro da página de postagem do blog, precisamos adicionar uma seção de cabeçalho e o conteúdo principal do blog e uma seção de rodapé. A seção de cabeçalho que vamos usar aqui é do nosso projeto duplo, pois poderíamos copiar a seção do cabeçalho e colocá-la na página. Mas se fizermos alguma das alterações dentro do poço, isso não afetará o conteúdo principal. Além disso, se fizermos alguma alteração no conteúdo principal, isso não afetará o pH. Então, o que vamos fazer agora, precisamos usar o símbolo. O símbolo é usado para transformar qualquer elemento e seus elementos secundários em um componente reutilizável. Portanto, esse símbolo pode ser usado em qualquer lugar do nosso projeto. Ou seja, os elementos específicos com todo o estilo podem ser usados em qualquer lugar do projeto. Então, vamos um símbolo maior. Agora. O elemento necessário é selecionado. Agora, esse é o representante do cabeçalho. Agora escolha os símbolos. Estou dando o nome do símbolo do pato como área do cabeçalho. Agora, digamos, o símbolo da área do cabeçalho ou temos os elementos de quebra de cabeçalho. Agora, precisamos de uma seção de fotos dentro da página de postagem do nosso blog. Então, estou selecionando a seção de rodapé do elemento com o seletor de elementos. Vou montar e criar um símbolo com uma área de rodapé de nome. Agora vou voltar para a instância na página abaixo da página de coleção do CMS. Estou selecionando o modelo de postagens do blog. Então, na página que criamos, conforme mostrado no Canvas no navegador, você pode ver o corpo de um litro. Como discutimos anteriormente, desenvolveremos esta página com a seção de cabeçalho e o conteúdo principal e uma seção de rodapé. No início, teremos uma seção de cabeçalho. Então, vou até o símbolo e seleciono a área do cabeçalho. Nesta página, a área do cabeçalho é criada. Precisamos dessa seção de cabeçalho. Vamos criar um elemento de seção. Vamos dar o nome da classe para esta seção como seção de detalhes do blog. Dentro dele, vamos criar um recipiente e usar o recipiente de vidro existente. Sob o contêiner, vamos criar uma duplicata e nomear que os detalhes do bloco log S envolvam. Precisamos criar uma imagem sob esse bloco de detalhes. Como já sabemos, usamos a página de coleção do CMS. Portanto, na configuração da imagem, você pode ver a caixa de seleção com um nome e obter imagens da coleção de postagens do blog. Basta selecionar isso e adicioná-lo. Você pode encontrar o campo selecionado. No campo de seleção, escolha uma imagem principal para que a imagem seja repetida na publicação do blog da coleção. Faça com que esteja alinhado ao centro. Nós adicionamos a imagem principal. Precisamos disso, precisamos adicionar o título dessa postagem do blog. Então, dentro dos detalhes do bloco, Brad, estou procurando por um título. Agora, não é possível obter textos da postagem do blog abaixo dela, selecione o nome do campo S. O título da postagem do blog será exibido aqui em nossa coleção de postagens do blog. Vamos mudar a fonte para Poppins. E tamanhos de 40 pixels. Precisamos dar o nome da classe para esse título. Então, estou ensinando o nome da classe para este título, cabeçalho detalhes do blog S. Agora precisamos desse título desta postagem do blog. Precisamos adicionar a data e o autor desta postagem no blog. Então, para isso, outro resumo de detalhes do blog, estou adicionando outro blog masculino para conter a data e o nome do autor. Vamos dar a ele um nome de classe para esse metal detalhado do bloco S diblock sob a meta da agulha do blog. Vamos adicionar um bloco de texto. Permita que receba textos da postagem do blog. Sob o campo de seleção. Estou selecionando o campo de data de publicação. Então, agora os dados foram adicionados sob o título da postagem do blog. Vamos dar a fonte como Poppins, com peso de 500, tamanho médio de 18 pixels e ocultar com 1,2 hífen. E estou escolhendo a cor da fonte como cor do conteúdo da amostra. Precisamos mudar o nome da classe para o próximo bloco como detalhe do blog. Fez. Precisamos adicionar outro nome para esta postagem do blog, outro detalhe do blog, Mehta, estou adicionando outro bloco de texto para habilitar a obtenção de texto das postagens do blog. Agora estou selecionando o campo estranho que o nome do autor tenha sido recuperado da coleção. Agora estou mudando a fonte para Poppins. Espere até quinhentos, tamanho médio de 18 pixels e altura de largura 1,2 hífen. Vamos mudar a cor para a cor do conteúdo. Precisamos fazer com que a data de publicação e nome de um autor estejam próximos um do outro. Então, estou selecionando todos os detalhes do blog, Mehta. E eu estou escolhendo o fluxo na tela. Para colocar esses dois no centro, estou justificando isso no centro. Estou renomeando o nome da classe como ordem de detalhes do blog. Para criar o espaçamento entre a data de publicação e o nome do autor. Estou selecionando a data de detalhes do blog e estou dando o valor de preenchimento para a esquerda e para a direita como dez pixels. Vamos aplicar o mesmo valor para o autor de detalhes do blog dois. Agora vou voltar para a seção de detalhes do blog. E precisamos fornecer o espaçamento e o fundo. Então, estou dando o valor de preenchimento na parte inferior como 100 pixels. À medida que classificamos a seção do cabeçalho e a imagem principal no título, data de publicação e no nome do autor. Agora, tudo o que precisamos é adicionar todo o conteúdo do bloco e a embalagem detalhada que vamos adicionar ao bloco. Isso é para manter o conteúdo desta postagem do blog. Vamos dar a ela um nome de classe para esse conteúdo detalhado do bloco S diblock. Estou adicionando um elemento Rich Text. Agora, habilite a obtenção de textos das postagens do blog. E estou selecionando o corpo do post de campo. Assim, todo o conteúdo que salvamos na coleção será testado novamente e exibido na tela. Agora, precisamos criar o espaçamento apropriado para o conteúdo desta postagem. Então, estou selecionando o conteúdo detalhado deste blog e estou dando o valor de preenchimento S 60 pixels. Tem muito espaçamento na parte superior. Então, novamente, estou alterando o valor para 40 pixels. Sinto que preciso adicionar o espaçamento de preenchimento para o título. Então, estou selecionando o título de detalhes do blog e estou dando o valor de preenchimento S, 20 pixels na parte superior dez pixels na parte inferior. Concluímos o conteúdo do bloco. Agora, precisamos adicionar a área do rodapé. Então, estou selecionando o corpo. Vou voltar aos símbolos e selecionar a área de alimentação. Então, agora a comida dessa área é adicionada na parte inferior. Vamos publicá-lo para ver como fica. Estou recarregando a página. A cabeça, essa área, o conteúdo principal e a área do rodapé, tudo está perfeitamente posicionado. Na próxima lição, finalizaremos nossa seção de blog. 42. Página de publicação única - Parte 2: Nesta lição, finalizaremos toda a seção do bloco. Então, digamos, na seção de blocos, temos a lista do blog ao clicar na imagem, no título, que deve nos redirecionar para a única postagem do blog. Então eu vou até o navegador. E na seção do blog, estou selecionando a respiração da imagem do blog. E estou criando elementos de bloco de links, pois precisamos redirecioná-los para a única postagem do blog. Então, estou avaliando esse bloco de links e colocando a imagem dentro do bloco de links. Portanto, se colocarmos a imagem dentro do link do blog, sempre que clicarmos na imagem, ela nos redirecionará para a única postagem do blog. Com a seleção do link do blog, vou acessar as configurações. Nas configurações do link, estou selecionando a página porque ao clicar na imagem e no título, ela deve ser redirecionada para a página de postagem do blog. Estou selecionando a página e outro escolhe uma página de coleção. Estou selecionando a postagem atual do blog. Da página atual da coleção de postagens do blog. A postagem de blog apropriada, ou seja, uma única postagem no blog, será exibida. Criamos um blog com links para a imagem. Agora, tudo o que precisamos é sentar no título abaixo da área de conteúdo do blog. Estou adicionando um link para o blog. Vamos arrastar o bloco de links sobre o título do blog e colocar o título do blog dentro desse link. Portanto, sempre que clicarmos no título, ele deve ser redirecionado para a única postagem do blog. Agora, com a seleção do bloco vinculado, precisamos ir para a configuração. Na configuração do link, estou escolhendo a página, abaixo da página da coleção, estou selecionando a postagem atual do blog. Agora precisamos mudar o estilo do título que está dentro de um link de blog. Agora, com a seleção do link do blog, vou entrar na topografia e não estou escolhendo nenhum para o estilo, a fim de evitar o hiperlink e, para a cor da fonte, estou escolhendo a cor secundária de essa cunha. Vamos renomear a classe do bloco de links como bloco de link único. Precisamos definir a transição para o título do bloco. Então, vou seguir outra ética e estou escolhendo a transição, pois uma transição deve ocorrer para a cor da fonte. Então, estou escolhendo a cor da fonte. Agora precisamos mudar esse estado. Estou selecionando o estado como Hobo. Como eu já defini, a cor da fonte deve mudar no estado de pairar. Estou usando outro tipo de gráfico e estou escolhendo a cor como cor primária. Vamos publicar isso para ver como funciona. Vamos recarregá-lo. Estou passando o mouse sobre o título. A transição está funcionando perfeitamente. Agora eu cliquei nele. Então, desclicar nele nos leva para outra página. Na nova página, pudemos ver a única postagem do blog. Vamos pegar um cenário. No campo de coleta. Se uma imagem em miniatura, a data de publicação, o autor não estiver disponível. Portanto, na ausência do valor no campo, todo o estilo da lista de bloqueios será afetado. Para evitar isso, precisamos definir a visibilidade condicional. Vamos ver como fazer isso. Agora, estou selecionando o blog Metal Value. Agora vou entrar no cenário. Abaixo dela, você pode ver a visibilidade condicional abaixo dela. Vamos adicionar uma condição. No pop-up. Você pode ver que o elemento está visível. Uma licença quando a condição que vamos aplicar for verdadeira. Primeiro, preciso escolher o campo. Aqui. É uma data de publicação. Então, estou selecionando o campo como data de publicação e, em seguida, defino a condição S para que o elemento fique visível. Um Lee publicou um conjunto de dados dentro do campo. Vamos fazer isso de novo com o nome do autor. Para isso, novamente, estou escolhendo o valor médio do blog. E eu estou usando a visibilidade condicional e estou adicionando a condição. Agora eu preciso escolher o campo. Então, estou escolhendo o campo como automático e estou escolhendo a condição S definida. Portanto, o elemento é visível quando Lee, quando a ordem é definida dentro do campo. Vamos fazer o mesmo com o separador. Esse é o separador de meta do blog. Estou escolhendo o campo como ADA e estou definindo a condição S definida. Agora estou escolhendo o bloco , exceto que vamos adicionar a condição para isso também. Vamos escolher o campo como resumo da postagem e deixar que a condição b seja definida. Esse elemento só é visível quando o resumo da postagem é definido dentro do campo. Vamos novamente fazer a visibilidade condicional dessa imagem de bloco. Para isso, estou escolhendo quebra de imagem do blog, permitindo que o nome do campo seja uma imagem em miniatura. E a condição b está definida. Até agora, na lição, criamos um blog com links para a imagem em miniatura e o título do blog. Além disso, criamos a visibilidade condicional para a data de publicação ou para o blog , exceto para a imagem em miniatura do bloco. Então, na próxima lição, veremos como fazer a rolagem suave ao clicar nos links do menu. 43. Menu de uma página - Scroll suave: Nesta lição, veremos como fazer a rolagem suave ao clicar nos links do menu. Ou seja, vamos atribuir a seção a cada uma delas e decisões. Vamos ver como vamos fazer isso. No início do desenvolvimento. Começamos com a navegação do cabeçalho. Usamos o agora Vo, que consiste em links de navegação. Portanto, ao clicar nesse link, ele deve redirecionar para a seção atribuída. Primeiro, vamos trabalhar no link home now. Estou clicando neste link inicial. Isso deve nos levar a esta seção de halo. Vamos ver como atribuir essa seção de heróis a esta casa agora, vinculada. Primeiro, precisamos atribuir um ID a esse elemento em R para definir o ID Vou usar a configuração e fornecer o nome do ID como home. Agora, atribuímos o nome de ID para esse elemento. Agora, vamos para a página inicial nivelando as configurações de outro link. Estou fornecendo o URL como hash home. Nós especificamos o URL para este link inicial agora. Ao marcar esse link inicial, ele pesquisará o item dentro do URL, conforme especificamos como HOH. Portanto, ele procurará um elemento que tenha esse ID e nos levará a esse elemento. Concluímos o link inicial. Vamos abordar os projetos forma restrita clicando no link deste projeto agora. Ele deve ir para a seção da galeria. Então, estou selecionando essa seção da galeria e atribuindo o ID desse elemento como projetos. Agora vamos voltar ao link de navegação do projeto. Agora, na configuração do link, precisamos especificar o URL à medida que criamos o id como projetos. Então, estou dando esse nome dentro do URL como projetos de hash. Ao clicar nesses projetos, ele nos levará à seção da galeria. Vamos publicá-lo para ver como funciona. Vamos clicar no projeto. Marilyn's, ela nos leva para a seção da galeria, voltando para casa agora. Tem a cor azul, mas precisamos mudar essa cor. Sempre carregando o site. Estará em uma página inicial. Portanto, esse link inicial estará sempre em preto abaixo. Então, precisamos mudar a cor para preto. Então, estou selecionando o link home. Vamos fazer o estilo para isso. Então, sob a tipografia, estou escolhendo a cor secundária do envio. Concluímos os dois primeiros links, home e projetos. Vamos ver o link sobre. Então, ao clicar neste link , devemos ver minha seção de trabalho. Então, vamos dar o nome do ID a esse elemento. Agora, vou fazer outra configuração e estou fornecendo o IDS aproximadamente como fornecemos o nome do ID para esse elemento. Agora estou voltando ao assunto sobre o naftaleno. Agora, dentro dessa configuração de link, precisamos fornecer o URL conforme fornecemos o nome do ID portanto, esse nome deve ser especificado aqui. Agora estou dando o hash about dos URLS. Agora, vamos acessar o link de preços agora. Então, estou clicando neste link, ele deve nos levar para a seção de preços. Então, estou selecionando esse elemento e, em seguida, dando o nome de ID S pricing. Agora, vamos dar a ele um URL para este link de preços agora. Estou fornecendo os preços de hash dos URLS. Agora vou para o link de contato agora e estou fornecendo o URL como contato hash. Ao desclicar nesse contato , devemos nos levar à seção do formulário de contato sobre como selecionar esse elemento. Vou dar a identificação como contato. Vamos publicá-lo para ver como os links funcionam. Agora estou carregando esta página ao clicar no projeto. Isso nos leva à seção da galeria sobre como marcar esse Ebert. Isso nos leva à seção de trabalho do CMA Ao clicar nos preços. Agora, leve-nos para a seção de preços. Agora precisamos nos concentrar nos links que estão na seção de fotos. Como sabemos, esses são todos os links. O mesmo processo será aplicado para este link. Eu selecionei esse link inicial? E vou usar outro link e dar ao hash de URLS o mesmo que estou fazendo com os projetos sobre preços e contatos. Agora estou clicando no link Início, que está na seção de rodapé. Isso nos leva até a casa. Estou clicando no link. Isso nos leva à seção apropriada. Então, todos os vinculadores estão funcionando muito bem. Agora estou passando para a seção do blog. Dentro de cada bloco, temos uma seção de cabeçalho e uma seção de rodapé. Vamos ver se os links dentro desse bloco estão funcionando ou não. Agora estamos dentro de uma bolha separada. Concentre-se no endereço URL. Agora. Agora estou clicando nos links do projeto, mas não funciona. Porque no endereço da URL, você pode perceber que não há uma barra entre o nome do blog, o ID do elemento. Portanto, precisamos fazer as alterações no URL e, em seguida, nos links de navegação. Agora vou voltar para a tela. Agora estou selecionando este projeto e agora vinculo outras configurações de nivelamento. Estou fornecendo o URL como projetos de corte. Portanto, precisamos adicionar uma barra no quadro do URL para cada link de navegação. Vamos verificar se funciona ou não. Estou recarregando a página e estou clicando neste blog. Agora estou clicando nesses projetos, pois agora eles nos levam para a seção da galeria. Agora estou clicando em “Sobre ” para nos levar perfeitamente à seção necessária, como ele pode ver no endereço da URL. Está perfeitamente bem. Na próxima lição, vamos salvar nosso ícone de arquivo e um ícone de clipe da web. 44. Ícones de fav e WebClip do site: Nesta lição, veremos como definir o Fab Icon, um ícone para um site. Antes de começar a aula, vamos ver o que é o fairway gone e o ícone do clipe web. E um tecido como um pequeno ícone que funciona como uma marca para o nosso site. Seu principal objetivo é ajudar os visitantes a localizar nossa página com mais facilidade quando têm várias guias abertas. No Webflow, usaremos 32 por 32 pixels para esse fairway perdido. Agora vamos ver mais sobre o ícone do web Clip. Flip se assemelha a um ícone de aplicativo. Mas, em vez de lançar um aplicativo, uma alça na web leva o usuário diretamente ao seu site. Usaremos uma imagem de 56 por 256 pixels para configurar um ícone de flip. Preciso de um arquivo com a extensão P que estou usando no Cloud convert.com. Para converter o arquivo JPEG. Primeiro, preciso selecionar o necessário. Eu tenho o arquivo JPEG com o nome, tem gosto de clipe web. Então, estou selecionando isso porque é um arquivo JPEG. Preciso converter esse arquivo em uma página da web. Antes de converter isso, preciso definir a largura e a altura dessa imagem. Portanto, nas configurações, forneça a largura e a altura 256, pois essa é a resolução necessária para o ícone do nosso globo da web. Agora nosso arquivo JPEG é convertido em arquivo de página da web. Vamos baixar isso. Estou salvando esse arquivo como o hífen mais estranho de um clipe da web. Vamos voltar ao nosso projeto. Clique no projeto abaixo da configuração geral, você poderá ver os ícones. Vamos fazer o upload do Fab Icon primeiro. O ícone do arquivo deve ter a resolução de 32 pixels por 32 pixels, pois eu já tenho esse arquivo com essa resolução. Então, estou selecionando esse arquivo na descrição, você pode ver o arquivo PNG ou JPEG é suficiente para o ícone fabuloso. Agora, o ícone do fairway foi carregado. Agora vamos fazer o upload do ícone do web Clip. Para este ícone de clipe da web, precisamos fazer o upload do arquivo da página da web, pois já convertemos o arquivo. Vamos selecionar esse arquivo. Fizemos o upload do webclipe de both fairway con Anna. Vamos publicar isso para ver se o fairway Kahn é carregado. Estou recarregando o site. Então, sim, pudemos ver o ícone fabuloso aqui. Na próxima lição, veremos como tornar nosso site responsivo ao tablet, celular e desktop. 45. Bases de resposta ao Webflow: Nesta lição, veremos como fazer com que nosso site responda ao desktop, tablet, celular em paisagem e a entrada móvel aqui, na parte superior da tela, você poderá ver as janelas de visualização. Ou seja, os pontos de interrupção. A área de trabalho com uma estrela é um ponto de interrupção básico. partir de agora, concluímos o desenvolvimento nesse ponto de interrupção básico. Portanto, todos os elementos que usamos neste ponto de interrupção básico serão passados para os pontos de interrupção do Lloyd. Portanto, não precisamos recriar esse elemento repetidamente. Pois são os pontos de interrupção mais baixos. Um dia, precisamos ajustar todos os elementos de acordo com seus pontos de interrupção. E1, um fim de semana, e obtenha os pontos de interrupção mais altos do que o ponto de interrupção básico. Para criar o ponto de interrupção mais alto, clique nos três pontos da marionete. Pudemos ver o maior ponto de interrupção com um valor em pixel AD, mil por 40 pixels e mil 920 pixels. Aqui, estou escolhendo esses e 920 pixels. Agora, recebemos a mensagem pop-up. Para criar. Os pontos de interrupção não são. Então clique em Criar para que o ponto de interrupção mais alto seja criado. Agora, pudemos ver a diferença entre a do ponto de interrupção mais alto e a vista do ponto de interrupção básico. Esse ponto de interrupção mais alto será usado se tivermos um desktop maior que o ponto de interrupção básico. Agora estou voltando ao ponto de interrupção básico e estou clicando na grade da área do cabeçalho. No layout, você pode ver as duas cores. Esse é um com o laranja e outro com o azul. A cor laranja indica que o estilo dos elementos selecionados é herdado de uma tag ou classe base. Se o indicador de estilo for azul, significa que os estilos desse elemento vêm da classe atual. Ou seja, se fizermos alguma alteração nesse elemento , o indicador ficará azul. Deixe-me explicar em detalhes qual outro exemplo. Agora eu selecionei a seção de serviços. Sob o espaçamento, você pode ver o indicador em azul. Isso significa que fizemos as mudanças nessa classe de seção e também nesse ponto de interrupção básico. Agora vou para o ponto de interrupção mais alto que criamos agora na seção de pesquisa desse ponto de interrupção mais alto Abaixo do espaçamento, podemos ver que o indicador de cor é laranja. Agora, como esse valor é herdado do ponto de interrupção básico, se fizermos as alterações aqui , o valor mudará para azul. Somente se fizermos as alterações no ponto de interrupção básico, ele será afetado no ponto de interrupção mais alto e também no ponto de interrupção mais baixo. Mas se você fizer alguma das alterações no ponto de interrupção mais alto, isso não afetará o ponto de interrupção básico. Portanto, sempre tenha cuidado com isso. Até agora, vimos o ponto de interrupção básico e o ponto de interrupção mais baixo, e também criamos o ponto de interrupção mais alto. Na próxima lição, veremos como fazer com que nosso site responda ao tablet. 46. Vista de tablet Responsivo - Parte 1: Nesta lição, veremos como tornar nosso site responsivo ao tablet. Ou seja, estilizaremos todo o nosso site com base na visualização do tablet. Vamos ver como vamos fazer isso. No início, estou verificando todos os elementos que desenvolvemos no ponto de interrupção mais alto. Então, tudo o que criamos está perfeitamente alinhado e agora, vamos passar para o ponto de interrupção básico. Novamente. No ponto de interrupção básico, desmarcando todos os elementos. Agora vamos passar para a visualização do tablet. Portanto, nessa visualização do tablet, todo o elemento não está alinhado corretamente, pois os valores que criamos no ponto de interrupção básico são herdados para o tablet. Então, precisamos ajustar os valores de acordo com o tablet. Sempre mantenha uma coisa em sua mente. Se você fizer alguma das alterações no tablet, isso afetará o cenário móvel e a porta móvel, certo? Mas isso também não afetará o ponto de interrupção básico. Se você fizer alguma das alterações no celular, isso não afetará o tablet e o ponto de interrupção básico. Portanto, mantenha essas coisas em sua mente. Vamos começar a fazer esse mosaico e a visualização do tablet. Na área do cabeçalho, estou escolhendo o contêiner que está sob o representante do cabeçalho. Aqui, pudemos ver que o conteúdo está tão próximo da borda dessa visualização em tablet. No início, estou alterando o tamanho máximo da largura desse contêiner 100 por cento, para que ele ocupe 100 por cento de uma largura. Agora vou para o espaçamento e estou dando o valor de preenchimento à esquerda como 30 pixels. Agora, na tela, você pode ver que os outros elementos também são afetados porque em toda a seção, estamos usando o contêiner com o mesmo nome de classe, container. Portanto, se fizermos alguma alteração nesse contêiner, isso também afetará todos os outros elementos que estão usando o contêiner do nome da classe. Ok, voltando ao estilo, agora precisamos dar o espaçamento e a direita. Então, estou dando o valor de preenchimento ou o direito como 30 pixels. Ajudamos a criar o espaçamento. Agora, na barra de navegação, estou escolhendo um contêiner. Não precisamos de muito espaçamento em cada n. Agora, preciso alterar o valor. Mas observe que aqui também estamos usando o contêiner de nome de classe existente. Se você fizer alguma das alterações aqui, isso afetará os outros elementos que estão todos usando esse contêiner ClassName. Para evitar isso, estou criando outro nome de classe como preenchimento mínimo do cabeçalho. Agora vamos alterar o valor do preenchimento para zero à esquerda e zero à direita. Agora, isso não afeta os outros elementos que estão usando a classe de contêiner. Terminamos a área do cabeçalho. Agora estou passando para a seção Hero Wrap. Na seção de heróis, eu escolhi a grade da área do herói. Então, aqui, se usarmos as colunas, os elementos dentro delas parecem ser muito pequenos. Para evitar isso, preciso excluir uma das colunas. Portanto, o conteúdo será parecido com um por um. Para fazer isso, vou até a grade de edição e excluo uma das colunas. Agora, vamos ajustar o tamanho da coluna para um para que ela ocupe a largura da tela inteira. Agora estou selecionando a seção de heróis ao vivo. Agora, você pode ver que há muito espaçamento à esquerda. Então, abaixo do espaçamento, estou dando o valor de preenchimento ou a esquerda como zero. Para fazer com que o conteúdo fique no centro, estou justificando-o para o centro. Além disso, não precisamos de um tamanho tão grande para o título da área de heróis. Com uma seleção do título da área do herói, estou mudando o tamanho para 50 pixels, mas parece muito pequeno. Então, novamente, estou alterando o valor para 55 pixels. O conteúdo da seção de heróis e da imagem parecem muito próximos um do outro. Precisamos criar um espaçamento entre esses dois. Então, estou selecionando esta seção de elevação de heróis. Então, no espaçamento, estou dando o valor da margem na parte inferior como 40 pixels. Agora, acho que o conteúdo da seção de heróis no lado esquerdo com um pouco do espaçamento. Com a seleção da seção esquerda do herói. Estou escolhendo a esquerda no depoimento. E então vou para o espaçamento e dou o valor de preenchimento à esquerda como 40 pixels. Então, terminamos a área do cabeçalho e a seção de representação do herói. Vamos passar para a seção B. Na seção Serviços, precisamos fazer os ajustes no conteúdo soviético. Aqui, vamos fazer com que o conteúdo da grade de serviço seja S com os dois primeiros conteúdos próximos um do outro e o último conteúdo abaixo dos dois primeiros conteúdos. Para isso, estou escolhendo isso sempre como grade. Estou acessando a grade de edição. Como dissemos, precisamos de um líder para continuar no topo. Então, estou excluindo uma das colunas. A terceira coluna estará abaixo dos dois primeiros conteúdos. Agora, pudemos ver que o segundo conteúdo é pouco mais aplicativo do que o primeiro conteúdo. Precisamos fazer um alinhamento correto com o primeiro e o segundo conteúdo. Estou escolhendo a segunda e vou ficar abaixo da posição , pois recebemos o valor dela como -100 ou o topo. Deixe-me mudar o valor para zero. Agora, voltando ao terceiro conteúdo, vou para a posição e estou alterando o valor da posição como zero novamente. Portanto, omitimos a grade de serviços de forma clara. Agora estou pulando para o título da seção. Aqui. Vou mudar o tamanho desse título. Vamos saltar 45 pixels para a legenda da seção, seja, um serviço, estou mudando o tamanho para 30 pixels. Então, agora concluímos o estilo da seção Serviços. Agora vamos pular para a seção da galeria. Na seção da galeria, não conseguimos ver o conteúdo que está dentro da grade. Então, vamos fazer com que cada um de seus conteúdos fique um abaixo dos outros quatro para os quais, a princípio , estou selecionando diretamente a galeria. Agora, estou selecionando a grade de edição e excluindo uma das colunas para fazer com que o conteúdo tenha sua largura total Deixe-me ajustar o tamanho da coluna em um esforço. Concluímos a primeira grade. Agora vamos selecionar a segunda grade da galeria. Com uma seleção de grade de edição. Estou excluindo uma das colunas. Agora vou voltar para a seção Serviços. No topo desta seção, podemos ver que há muito espaçamento. O espaçamento, estou alterando o valor do preenchimento ou a parte superior como 80 pixels, a parte inferior como cem pixels. Agora vou voltar para a seção da galeria. Mesmo aqui, temos muito espaçamento na parte superior. Então, deixe-me alterar o valor do preenchimento do cachorro como 80 pixels e para a parte inferior como 100 pixels. Agora vamos para a seção do workshop. Há muito espaçamento na parte superior, então estou alterando o valor do preenchimento de 200 pixels agora para criar o conteúdo e, um abaixo do outro, estou selecionando esta grade do workshop e excluindo uma das a coluna. E vamos mudar o tamanho da coluna para um FOR para criar o espaçamento entre o conteúdo do workshop e a imagem do workshop. Estou selecionando este envoltório de imagem do workshop. Estou abaixo do espaçamento e estou dando o valor da margem na parte superior como 40 pixels. Concluímos a seção do workshop. Vamos ao trabalho do CMI, que é a média do modo. Eu também selecionei o embrulho de trabalho do CMA aqui. Vou fazer com que cada conteúdo fique abaixo de dois. E então, para isso, estou selecionando sua grade. Vou para a grade de edição , pois ela tem três colunas. Então, estou excluindo duas colunas para obter a largura total. Estou ajustando o tamanho da coluna para um. Esta seção tem muito espaçamento na parte superior e inferior. Então, estou selecionando uma quebra de palavras CMA e estou alterando o valor de preenchimento dela para os 200 pixels superior e inferior. Agora precisamos criar um pequeno espaçamento entre o autor ao desenhar uma biografia do autor. Para isso, estou selecionando outro representante biográfico. E eu vou para o espaçamento. Estou dando o valor da margem para 20 pixels na parte superior e 40 pixels na parte inferior. Para reduzir o espaçamento. E na parte inferior desta seção, eu estou selecionando, veja minha seção de trabalho, que é a dissecação final. Vou até o espaçamento e deixe-me alterar o valor do preenchimento na parte inferior para 60 pixels. Novamente, vamos alterar o valor do preenchimento na parte superior para 80 pixels. Nós terminamos esta seção. Vamos passar para a seção da guia de licenciamento. Também na seção da guia de licenciamento, usamos o modelo de grade. Aqui também. Vamos fazer com que cada conteúdo fique abaixo um do outro. Para isso, com uma seleção de grade de licenciamento, vou para a grade Editar e excluí-la da coluna. E vamos atribuir o valor da coluna a um para criar o espaçamento entre a imagem e o conteúdo. Estou selecionando o pacote de conteúdo de licenciamento e estou dando o valor da margem na parte superior para ele como 60 pixels. Pudemos ver que precisamos editar o espaçamento do conteúdo da guia. Para isso. Estou selecionando a aba incorretamente e vou para o espaçamento. Vamos ajustar um valor de preenchimento para ele. No topo, estou dando 70 pixels. Para os dois últimos, estou dando o valor como 70 pixels. Então, agora podemos ver tudo o que o espaçamento é uniforme. Mas eu sinto que o espaçamento à esquerda e à direita deve ser reduzido. Então, estou dando o valor de preenchimento para a esquerda e para a direita como 50 pixels cada. Agora estou escolhendo o título do conteúdo da guia. Estou diminuindo o tamanho para reduzir o valor do tamanho. Deixe-me dar o valor do tamanho como 40 pixels. Agora estou escolhendo o parágrafo. E no seletor, estou escolhendo todos os parágrafos e alterando o valor do tamanho para 18 pixels. Concluímos a seção da guia de licenciamento. Agora vou para a seção de depoimentos. Nesta seção dois, estamos usando o modelo de grade. Para isso, precisamos fazer com que cada conteúdo esteja abaixo de um antídoto. Para isso, estou escolhendo a grade de depoimentos com a seleção da grade de edição e excluindo uma das colunas, pois ela tem muito espaçamento e a parte superior. Então, estou selecionando a seção de depoimentos. Estou alterando o valor do preenchimento na parte superior para 60 pixels. Como dentro do item do depoimento, ele tem muito espaçamento. Com a seleção do item testemunhal. Estou alterando o valor do preenchimento à esquerda, 250 pixels. E para o direito de, estou dando o valor como 50 pixels. Agora, novamente, estou alterando o valor de preenchimento dos 250 pixels superior e inferior para que o conteúdo dentro do item do depoimento seja distribuído uniformemente. O conteúdo do depoimento parece estar pronto. Com uma seleção de conteúdo de depoimento. Estou mudando o tamanho da topografia para 25 pixels. Agora, desfazendo as alterações no primeiro item do depoimento, ele será herdado para outros itens do depoimento. Agora, para reduzir o espaçamento e a parte inferior desta seção de depoimentos, estou selecionando essa seção de depoimentos. Estou alterando o valor inferior do preenchimento como 80. Agora vamos entrar na seção de preços. Como na seção de preços na parte superior, o espaçamento é maior. Então, estou considerando o valor de preenchimento no topo como seção de preços de 80 pixels. Usamos um modelo de grade. Então, estou selecionando essa grade de preços. Sob a grade de edição. Estou excluindo um da coluna. Como precisamos ajustar o embrulho da lista de preços. Então, estou selecionando esse pacote de lista de preços e estou mudando a posição de absoluta para relativa. conteúdo da lista de preços foi compreendido. Agora pudemos ver que há muito espaçamento e vida. Então, novamente, na posição, estou alterando o valor para 0% à esquerda. O mesmo que estou fazendo, certo? Agora precisamos ajustar o tamanho do título do preço. Estou mudando o tamanho para 45 pixels. Novamente, vamos mudar o tamanho do preço para 60 pixels. Para criar o espaçamento entre esses itens de preço. Estou selecionando a taxa de preço. Vou para a grade de edição. E estou dando o valor da lacuna entre linhas para 50 pixels. Na seção de preços, há muito espaçamento na parte inferior. Portanto, com a seleção da seção de preços, estou alterando o valor do preenchimento na parte inferior para 140 pixels. Concluímos a seção de preços. Na próxima lição, concluiremos a seção restante. Só precisamos dele para o ponto de interrupção do tablet. 47. Vista de tablet Responsivo - Parte 2: Nesta lição, finalizaremos todo o estilo necessário para o ponto de interrupção do tablet na seção de blocos Vamos fazer o estilo do item do blog. Como aqui, usamos a lista de coleta de dados. Portanto, ao fazer as alterações em um dos itens do blog, isso afetará automaticamente os outros itens sem necessidade de cuidar individualmente. Agora estou selecionando este item do blog. Agora vou fazer o estilo para isso. Por padrão, a direção desse layout está na horizontal. Vamos torná-lo vertical. Agora estou selecionando a área de conteúdo do blog , pois há mais espaço ou à esquerda. Agora, abaixo do espaçamento, estou dando o valor zero de pixel para o preenchimento esquerdo. Aqui podemos notar que um dos itens do blog está pressionado para baixo. Portanto, precisamos fazer com que o item antigo do blog esteja alinhado corretamente com o título do blog selecionado. Vou reduzir o tamanho, pois parece muito maior. Vamos mudar o tamanho para 28 pixels. Pudemos ver no Canvas que todos os itens do blog estão alinhados. Agora, precisamos fazer o estilo da data de publicação e do nome do pedido. Então, estou selecionando o envoltório metálico em bloco. E deixe-me dar a direção do layout para vertical masculino, alinhado à esquerda, alinhado como aqui, não precisamos de um separador. Então, estou configurando o separador de metal do blog e não estou escolhendo nenhum embaixo da tela para que todos os elementos fiquem ocultos. Para criar o espaçamento entre data de publicação e o nome do autor, estou selecionando este valor metálico do blog. Vou fazer o valor de preenchimento na parte inferior, S, N pixels. Agora vamos reduzir o espaçamento entre embalagem metálica do blog e a capa extra do blog. Então, estou selecionando este blog metal wrap. E eu vou mudar o valor da margem na parte inferior para dez pixels. E deixe-me alterar o valor do preenchimento no pixel inferior. Agora vamos deduzir o espaçamento na parte inferior da seção do bloco. Para fazer isso, estou reduzindo o valor do preenchimento inferior para 40 pixels. Concluímos a seção de blocos. Vamos passar para a seção de perguntas frequentes. Na seção de perguntas frequentes, usamos o modelo de grade. Dentro da grade, temos um título de seção e uma área de conteúdo. Precisamos fazer com que a área de conteúdo fique na parte inferior do título. Então, para isso, estou escolhendo uma grade de perguntas frequentes e excluindo uma das colunas. E vamos mudar o tamanho para um. Em geral, isso é muito espaçamento nesta seção de perguntas frequentes. Então eu preciso reduzir o espaçamento. Então, com a seleção do pacote de conteúdo do FAQ, estou reduzindo o valor do preenchimento esquerdo para 40 pixels. Desdobre a direita para 40 pixels. E vamos alterar o valor do preenchimento na parte superior e inferior, 260 pixels. Agora, vamos mudar o tamanho disso de acordo com os itens. Mas na questão da seleção do acordeão, já estou usando o tamanho dela para 28 pixels. Usamos o mesmo nome de classe para os itens restantes. Então, automaticamente, eu esqueço todos os outros itens. Concluímos a seção de perguntas frequentes. Vamos passar para o formulário de inscrição. No subgráfico, há muito espaçamento na parte superior. Então, vou reduzir o valor de preenchimento ou o torque do pixel JHU AT. O conteúdo dentro do formulário de inscrição parece ser bom, então estou saindo como está. Vamos pular para a seção do formulário de contato para reduzir o espaçamento na parte superior. Deixe-me alterar o valor do preenchimento nos 280 pixels superiores para fazer com que o conteúdo dentro da grade fique em uma coluna. Estou selecionando a grade do formulário de contato na grade Editar, estou excluindo uma das colunas. E vamos mudar o tamanho para um para ocupar toda a largura. Agora estou selecionando o Formulário de Contato D Delbruck para reduzir o espaçamento na parte superior e inferior. Deixe-me alterar o valor do preenchimento e os 250 pixels superiores. E para o valor inferior como 70 pixels. Agora, precisamos reduzir os tamanhos de correspondência, telefone e endereço. Então, estou selecionando a maré detalhada , usando outra tipografia. Vamos mudar o tamanho para 28 pixels. Agora, vamos criar o estilo para o representante de campos do formulário de contato Com a seleção dos campos do formulário de contato em branco, vou ajustar o espaçamento ou diminuir dentro do representante. Agora estou alterando o valor do preenchimento da esquerda para 40 pixels. Agora estou alterando o valor do preenchimento na parte superior e inferior para 60 pixels. Como há muito espaçamento entre a seção do formulário de contato e a área do rodapé. Portanto, com a seleção do contato da seção, deixe-me alterar o valor do preenchimento na parte inferior para 80 pixels. Entre o formulário de contato, preencha um detalhe e um formulário de contato. O espaçamento é menor. Com uma seleção de grade de formulários de contato. Vou para a grade de edição e estou alterando a lacuna das linhas para 30 pixels. Para a lacuna da coluna, estou mudando para 16 pixels. Agora vamos ver a seção de rodapé. Dentro da seção de rodapé, temos frutas ou itens sociais. Como alguns itens sociais estão ultrapassando o limite com a seleção de alimentos ou itens sociais. Estou diminuindo o tamanho e estou dando a largura para 100%. Assim, esse conteúdo dentro dos itens sociais ocupará toda a largura do ponto de interrupção do tablet. Agora vamos fazer com que todos os itens sociais estejam em uma ordem vertical. Para isso, com a seleção do item associado à comida, estou mudando a direção para uma vertical. Agora precisamos criar o espaçamento entre cada um dos itens sociais. Então, estou selecionando o diblock com o nome de item Social. Abaixo do espaçamento, estou dando o valor da margem na parte inferior como 20 pixels. Dentro da seção de rodapé, temos a seção de direitos autorais. Então, vamos selecionar essa seção de direitos autorais, pois o conteúdo dentro da seção de direitos autorais está na posição horizontal. Agora, precisamos torná-lo vertical. Então, com a seleção da seção de direitos autorais, estou mudando a direção duas verticais para criar o espaçamento entre o invólucro do menu e o conteúdo. Estou selecionando o invólucro do menu de direitos autorais. Estou abaixo do espaçamento. Estou dando o valor da margem principal para 20 pixels. No topo da restrição alimentar, há muito espaço. Então, estou dando o valor de preenchimento ou o torque para 50 pixels. Vamos ver se cada seção está alinhada corretamente. Agora vamos fazer o estilo do botão central lá dentro, mas para o botão de menu, vou fazer as bordas. Então, vou ultrapassar as fronteiras. Escolhendo este ladrilho, faça uma linha sólida. E vamos mudar a cor da borda para a cor primária a partir dessa amostra. Agora vamos criar o espaçamento entre o nome e o botão Menu. Abaixo do espaçamento, deixe-me dar o valor da margem esquerda para 20 pixels. Agora estou selecionando a configuração do botão de menu para mostrar os menus mais antigos dentro do botão de menu, deixe-me ativar a exibição sob o menu. Assim, todos os itens do menu serão exibidos na tela. Agora precisamos mudar a cor de fundo desse agora amino. Então, com a seleção de agora Minow, e eu estou escolhendo a cor para branco. Isso é muito espaçamento à esquerda para o nominal. Então, estou alterando o valor do preenchimento ou o da esquerda para zero. Agora, precisamos alterar a cor de fundo do botão de menu no estado aberto. Então, agora vou ver os planos de fundo e estou mudando a cor da amostra para a cor primária. Agora, precisamos ocultar o conteúdo dentro do botão de menu com uma seleção mínima de Dann, passando pela configuração e ativando a opção Ocultar. Portanto, nesta lição, concluímos todos os estilos necessários para o ponto de interrupção do tablet. Na próxima lição, faremos o estilo do ponto de interrupção da paisagem do telefone. 48. Vista de paisagem móvel: Nesta lição, criaremos um site respondido ao telefone celular, que está em paisagem. Vamos fazer isso. Primeiro. Vamos fazer o estilo na área do cabeçalho. Na área do cabeçalho, criaremos a marca e o botão no lado esquerdo, o botão de menu e o número de telefone no lado direito. Vamos ver como vamos fazer essa parte. Primeiro, estou selecionando e depois externamente. E há muito espaçamento na parte superior. Então, estou aumentando o valor do preenchimento na parte superior para 20 pixels. E, novamente, estou alterando o valor do preenchimento na parte inferior para 20 pixels. Precisamos criar o espaçamento entre o novo botão de menu e o botão e o número de telefone. Então, estou selecionando a seção esquerda do cabeçalho. Estou atribuindo o valor da margem na parte inferior a dez pixels para criar a marca ou a esquerda e o botão Menu. À direita, estou escolhendo a largura total do cabeçalho. Vou para outra camada. Estou escolhendo o alinhamento elástico para que os itens sejam esticados em toda a largura do contêiner. Agora precisamos fazer o botão de inscrição à esquerda e o número de telefone à direita. Então, estou selecionando a seção do cabeçalho e indo até o layout e escolhendo o espaço entre elas para justificar que os itens dentro dela sejam distribuídos uniformemente de ponta a ponta. Então, agora criamos o estilo na parte do cabeçalho. Agora vamos nos concentrar na seção de envoltórios de heróis. Aqui, precisamos reduzir o tamanho do título e do subtítulo. Então, estou escolhendo o título da área de heróis. Estou ajustando o tamanho à vontade. Estou finalizando com 40 pixels. Vamos selecionar a legenda da área do herói e reduzir o tamanho para 30 pixels. Estou indo até o botão. Tem muito espaço por toda parte. Então, estou selecionando o botão e vou para o espaçamento. Estou alterando o valor do preenchimento na parte superior e inferior para 20 pixels. Para a esquerda e para a direita, estou alterando o valor para 40 pixels. Agora obtemos o estilo desejado. A seção de representação do herói está concluída. Vamos pular para esta seção OB, aqui o tamanho do título deve ser reutilizado. Então, estou selecionando o título da seção e ajustando o tamanho até obtermos o tamanho desejado. Agora estou selecionando a legenda da seção e ajustando o tamanho dela. No ponto de interrupção do cenário móvel, faremos com que o item de serviço seja exibido um por um, para que eu selecione a grade soviética em Editar. Estou excluindo uma das colunas e estou dando às linhas espaço de 30 pixels para que tenhamos feito cada item de serviço seja amado um por um, tenha dentro do item de serviço muito espaçamento ou menos . Então, vamos mudar o valor do preenchimento ou a elevação para 40 pixels. E o mesmo se aplica à direita. Vamos dar o mesmo valor de preenchimento para a parte superior e inferior de 40 pixels. Para reduzir o espaçamento entre o ícone e o título do serviço. Estou selecionando o envoltório do ícone do serviço e estou atribuindo a eles o valor do Audion na parte inferior para 20 pixels e, chegando ao título do serviço, ele alterou o valor da margem na parte inferior para dez pixels. E também, vamos ajustar o tamanho dela. Vamos fazer o estilo do parágrafo no seletor. Estou escolhendo as etiquetas de parágrafo antigas. Estou mudando o tamanho para 17 pixels. Agora vamos fazer o estilo para a seção da galeria. Dentro dela, temos um item de galeria. Dentro do item da galeria, o título está sobreposto à imagem e também não está visível. Então, aqui vamos remover a imagem de fundo e fazer o estilo do conteúdo que está dentro dela. Aqui, selecionei o item da galeria no seletor, pudemos ver que há duas classes como item de galeria e galeria para. Se fizermos alguma das alterações, ela será aplicada a um segundo item de galeria de um litro. Agora vou ver os planos de fundo na imagem e no gradiente. Estou escolhendo Hide. Em vez da cor do transplante. Estou dando a cor em hexadecimal. Agora eu selecionei a galeria intitulada wrapper. Dentro dela, há muito espaçamento na parte inferior. Então, abaixo do espaçamento, estou aumentando o valor do preenchimento inferior para 40 pixels. Então, agora temos um espaçamento considerável. Agora precisamos reduzir a altura desse item da galeria. Abaixo desse tamanho. Estou dando a eles uma altura mínima 400 pixels para reduzir o espaçamento geral dentro do item da galeria. Vamos ver os valores de preenchimento. No topo, estou mudando para 50. À esquerda, estou pegando o asfalto. E na parte inferior eu estou mudando para 50 pixels. Mas, novamente, há muito espaçamento. Então, agora vou alterar o valor mínimo da altura. Vamos criar o mesmo estilo para o outro item da galeria. Aqui, estou selecionando o terceiro item da galeria e estou dando o valor mínimo de altura, de 300 pixels. Agora vamos esconder a imagem de fundo. Então, sob os planos de fundo e abaixo da imagem e do gradiente, estou escolhendo a altura da imagem de fundo e vamos dar a ela uma cor de fundo. Agora estou selecionando o quarto item da galeria. Para isso, vou esconder a imagem de fundo. E, novamente, vamos fazer com que o valor mínimo da altura seja 300 pixels. Vamos dar a ele uma cor de fundo para ele. O conteúdo dentro do item da galeria está na posição horizontal. Precisamos torná-lo o mais vertical. Então, estou selecionando o alinhamento de maré da galeria e vou ver o layout. Estou mudando a direção para vertical. Vamos alinhá-lo à esquerda. Finalizamos o estilo dos três itens da Galeria. Vamos passar para o primeiro item da galeria. Aqui, vamos esconder a imagem de fundo. E definiremos a altura mínima para 300 pixels. E também vamos dar a ele uma cor de fundo. Agora vamos ajustar o espaçamento geral no primeiro item da galeria. Espaçamento, estou alterando o valor do preenchimento superior para 50 pixels. O mesmo vale para a parte inferior. Para a esquerda, estou mudando para 40 pixels. Então, agora concluímos a seção da galeria. Vamos passar para a seção do workshop. Na seção do workshop, esse é o espaçamento na parte superior. Então, deixe-me reduzir o valor de preenchimento na parte superior para o pixel AD . O conteúdo dentro da seção do workshop parece estar bem. Vamos entrar na seção de trabalho do CMA. Essa é a seção Sobre mim. Nesta seção, vou reduzir o espaçamento na parte superior. Vamos alterar o valor do preenchimento nos 280 pixels superiores. E, novamente, vou reduzir o espaçamento e a mortem para reduzir o espaçamento à esquerda. Deixe-me alterar o valor para 60. Agora estou passando para a seção da guia de licenciamento. Dentro dela. Estou escolhendo a curva de toque do conteúdo da guia. E vamos reduzir o valor geral de preenchimento da turbina. Aqui, precisamos reduzir o tamanho do título do conteúdo da guia. Deixe-me dar o valor do tamanho para 35 pixels. Agora eu selecionei, porém, para o encerramento pessoal, essa direção de rap está na horizontal. Mas aqui precisamos fazer com que o conteúdo fique na vertical. Então, sob o layout, estou escolhendo a direção S em vez da ética, e vamos alinhá-la à esquerda. Agora precisamos fazer com que o conteúdo da oferta se arraste para ficar à esquerda. Então, digamos que o valor de preenchimento à esquerda seja zero para reduzir o espaçamento entre o valor da oferta e o conteúdo da oferta, estou fornecendo o valor da margem na parte superior. Faça 20 pixels para este representante de conteúdo da oferta. Agora, passei para a seção de depoimentos. Vamos reduzir o valor do preenchimento superior para 40 pixels. Agora, passando ao item de depoimento, quanto à visualização da paisagem móvel, designamos esse grande item de depoimento. Portanto, precisamos reduzir o espaçamento em toda parte. Para isso, estou reduzindo o valor de preenchimento nos 230 pixels à esquerda. Estou dando o espaçamento ou menos para 30 pixels. Chegando ao conteúdo do depoimento, precisamos reduzir o espaçamento e o dedo do pé. E também precisamos reduzir o tamanho da fonte para isso. Então, sob a tipografia, estou dando o valor do tamanho para fazer o pixel. Como isso está na visualização móvel, precisamos fazer com que esse depoimento inclinado para estar em uma escada vertical. Então, estou fazendo a direção vertical e alinhando à esquerda. Além disso, precisamos de um espaçamento entre a detalhes do cliente e a embalagem de espera do cliente. Então, com a seleção do cliente escrevendo rap e dando o valor de preenchimento na parte superior para dez pixels. Agora, voltando ao conteúdo do depoimento, precisamos reduzir o espaçamento no modelo. Então, estou dando o valor de preenchimento e a parte inferior para dez pixels. Você pode perceber que há muito espaçamento entre os itens do depoimento. Então, estou mudando o valor da margem da água, faça 40 pixels. Não precisamos obter cada item de depoimento porque usamos o mesmo nome de classe para cada um dos isqueiros de depoimentos. Terminamos a seção de depoimentos. Agora estou passando para a seção de preços. Na seção de preços, estou selecionando a maré de preços e preciso reduzir o tamanho dela. Então, estou dando o valor como 30 pixels. O mesmo será aplicado ao preço. Estou mudando o tamanho para 40 pixels. Em seguida, chegando ao item de preço que é todo o bloco circular, precisamos reduzir o espaçamento à esquerda e à direita. Estou tornando o valor de preenchimento à esquerda e à direita como 50 pixels. A mesma coisa que precisamos fazer na parte superior e inferior. Então, estou alterando o valor do preenchimento para 30 pixels na parte superior e também na parte inferior, precisamos reduzir o espaçamento. Então, estou dando o valor como 50 pixels. Agora, chegando à lista de preços RAB, vamos alterar o valor da margem ou o D2, 20 pixels. Agora vou reduzir o valor de preenchimento, Oliver, para o representante da lista de preços. O envoltório do botão de preços está bem na parte inferior, então precisamos reduzir o espaçamento na parte superior. Então, estou ensinando o valor de preenchimento do cachorro a 20 pixels. Para cada item da lista, estou reduzindo o tamanho para 18 pixels. Vamos ver o valor da margem desse item da lista de cima para baixo até 20 pixels. Fizemos as alterações no item de preço. Ele será herdado automaticamente para o próximo item de preço porque usa o mesmo nome de classe. Agora estou passando para a seção do blog. Outra seção do blog, eu selecionei o título do blog. O tamanho do título deste blog parece ser um pouco pequeno, então eu costumo aumentar seu tamanho para 30 pixels. Vamos aumentar o espaçamento que estamos fazendo no blog metal wrap e no blog extra. Então, com a seleção do blog Mehta, estou dando o valor moderno na parte inferior para 20 pixels. As alterações que fizemos serão herdadas automaticamente para os outros itens do blog. Agora, chego à seção de perguntas frequentes aqui. Vou reduzir o valor de preenchimento na parte superior da seção de 240 pixels e, chegando ao RAB do conteúdo de perguntas frequentes, vamos alterar o valor do preenchimento. Aqui eu criei o mesmo valor ou nível. E no início, a seção intitulada tamanho parece estar boa. Vamos pular para o acordeão duplo. Precisamos reduzir o tamanho dessa questão que está dentro. Então, eu selecionei a pergunta de acordo. Vou entrar na topografia e reduzir o tamanho para 20 pixels, isso afetará automaticamente as outras questões. Fizemos as alterações na seção de perguntas frequentes? Agora chego ao formulário de inscrição. O formulário está muito próximo da borda. Precisamos fazer o estilo apropriado para esse formulário. No início, estou criando um espaçamento entre o formulário de inscrição, uma seção de perguntas frequentes. Então, estou dando o valor da margem na parte superior para 40 pixels. Agora eu selecionei os flocos do formulário de inscrição. Precisamos fazer com que o conteúdo que está dentro uma assinatura do flex seja incluído no artigo. Então, com a seleção dos flocos do formulário de inscrição, estou escolhendo a direção para ir para a vertical e vamos alinhá-la à esquerda para criar um espaçamento entre o campo de entrada e um botão de inscrição e selecionando o invólucro de entrada do formulário de subscrição. E estou dando o valor da margem na parte inferior para 20 pixels. A base desse campo de entrada está muito próxima da borda. Precisamos fazer as mudanças. Para fazer isso com uma seleção de blocos de formulários de inscrição, vou usar o tamanho abaixo dele. Estou alterando a largura para 100% ao torná-la em 100%, o conteúdo dentro dela estará dentro da largura de 100%. Esta seção é a palavra L. Vamos passar para a seção, seção do formulário de contato. Para isso, estou alterando o valor do preenchimento do cachorro para 40 pixels. E agora eu escolhi os detalhes do formulário de contato. Rob, estou mudando o valor do preenchimento, 60 pixels para a esquerda e para a direita. E para a palestra, estou mudando o valor para 40 pixels. Precisamos reduzir o tamanho do endereço de telefone postal. Então, selecionei o título detalhado e estou alterando o tamanho abaixo da tipografia para 25 pixels. Agora precisamos alterar o tamanho do e-mail, ID, número de telefone e endereço, que são tudo o que precisamos desse título detalhado. Então, selecionei o link de contato e vou usar outra tipografia e estou alterando o valor para ajudar no pixel. Precisamos fazer com que todos os campos de entrada estejam em uma ordem vertical. Eu selecionei a quebra do campo de entrada e estou escolhendo a direção vertical. Então, todos os campos de entrada vêm na direção vertical. Para reduzir o espaçamento. À esquerda, selecionei o invólucro de entrada do formulário e estou fazendo com que o valor da margem à esquerda seja zero. Precisamos fazer a mesma coisa com o invólucro de entrada do formulário, ou seja, para a mensagem. Então, estou dando a maior desvalorização à esquerda para zero. Novamente. É, novamente, fazer com que esse botão de administrador fique à esquerda. Então, estou alterando o valor da margem à esquerda para zero. Agora, tornamos nosso site responsivo ao cenário móvel. Na próxima lição, faremos isso brilhando no código móvel, certo? 49. Vista de retrato móvel Responsivo: Nesta lição, vamos definir o estilo para a porta móvel, certo? Ponto de interrupção. No início, estou começando pela área do cabeçalho, que é o número inteiro do envoltório do cabeçalho. Preciso fazer com que o botão de inscrição e o número de telefone estejam nos artigos. Então, estou selecionando a seção do cabeçalho e estou escolhendo a direção vertical. Vamos dar o espaçamento para o botão de cabeçalho, para a parte superior e inferior. Com uma seleção do botão de cabeçalho, estou fazendo o valor moderno na parte superior de dez pixels. Novamente, estou dando o valor de dez pixels para a parte inferior. Na área do cabeçalho, podemos notar que é um espaçamento um pouco maior à esquerda e à direita. Precisamos reduzir um pouco a seleção do contêiner sob o invólucro do cabeçalho Estou alterando o valor do preenchimento para a esquerda e para a direita. O valor superou 20 pixels. Usamos a mesma classe de contêiner em todos os contêineres a seguir, que estão dentro desta seção. Portanto, se fizermos alguma das alterações nessa classe específica, ela será automaticamente uma dívida com todos os outros contêineres. Agora, selecionei o envoltório de contato do cabeçalho para fazer com que esse envoltório de contato do cabeçalho fique no centro, fazendo com que o valor do preenchimento à esquerda seja zero. Concluímos a seção do cabeçalho. Agora vou para a seção de representantes de heróis. Dentro dela, temos o herói masculino Grab. O malato está tão perto da borda. Portanto, precisamos fazer com que o ícone e o ID do e-mail estejam no artigo. Eu selecionei este envoltório principal de herói. Eu faço a direção vertical sob a camada. Para alinhá-lo corretamente, estou alinhando-o à esquerda para fornecer um espaçamento leve. Fazer o ícone de e-mail em um ID de e-mail com uma seleção de heróis pode ser um link. Estou atribuindo o valor de preenchimento na parte superior para cinco pixels indo para o título da área do herói Vamos reduzir o tamanho para 35 pixels. Terminamos a seção de representação de heróis. Agora eu vim para a seção de serviços. Nele. Eu selecionei o título da seção e estou alterando o tamanho para 30 pixels da mesma forma. Estou reduzindo o tamanho da legenda da seção. Agora passei para o item soviético que tem muito espaço em todo o item de serviço. Sob o espaçamento, estou reduzindo o tamanho da encadernação ou diminuindo o valor beta D pixel. Todos os itens de serviços dentro da seção Serviços parecem estar bem. Vamos passar para a seção da galeria. Na seção da galeria, selecionei o primeiro item da galeria dentro dela ou o deixamos inativo. Vamos reduzir o tamanho. Ao mesmo tempo, reduzindo o tamanho do título da categoria da galeria. Agora pudemos ver que o conteúdo dentro do item da galeria não está alinhado corretamente. Então, vamos fazer com que o valor de preenchimento à esquerda do pixel seja o mesmo para o preenchimento direito. E também há muito espaçamento e o fundo. Então, vou reduzir o tamanho dando a eles um valor mínimo de altura. Deixe o valor ser 250 pixels. Agora que selecionei o segundo item da galeria nesta ferramenta para alinhá-lo corretamente, estou alterando o valor do preenchimento e o esquerdo para o pixel. Vamos reduzir a altura do item da galeria dando ele uma altura mínima de 250 pixels e outros sites. Como fizemos antes, precisamos alterar o tamanho do título da galeria e do bloco de texto da galeria. E precisamos reduzir o espaçamento na parte inferior deste parágrafo. Então, selecionei toda a linha do título da galeria e estou alterando o valor dela para 20 pixels, que está na parte inferior. Vamos repetir o processo para o item da galeria com um valor mínimo de altura de 50 pixels. Concluímos a seção da galeria. Agora, passei para a seção do workshop. Dentro dele, selecionei a execução do código QR. Precisamos criar o conteúdo que está dentro desse rap. Sabemos quais diáconos, então selecionamos a direção vertical, outra camada, e vamos alinhá-la à esquerda. Precisamos fornecer o espaçamento para a meta ou a repetição. Então, com a seleção do código ou do representante, estou atribuindo o valor da margem na parte superior e inferior para dez pixels. Agora eu passei para a cena, minha seção de trabalho. Dentro dele, pudemos notar o conteúdo dentro dele e, tão próximo ao h, ele não está centralizado. Para isso, selecionei o CMA. What Grab, que o valor do pixel seja 20 pixels à esquerda. E agora, novamente, vamos dar o valor ou o direito a 20 pixels. Agora chego ao vídeo alinhado, pegue-o, parece que está muito esticado. Então, estou alterando o valor do preenchimento na parte superior e inferior, 200 pixels. Agora eu sinto que preciso fazer as mudanças no autor ou no rap com a seleção deles. Eu vou usar outro tamanho e estou dando a largura e a altura dele. E deixe o valor ser 200 pixels cada. Mas acho que preciso alterar o valor da largura e da altura. Então, estou alterando o valor para 220 pixels cada. Agora, passei para o representante biográfico do autor. Como eu sinto que preciso reduzir o espaçamento na parte superior. Então, vamos mudar o valor da margem na parte superior para zero. Agora estou passando para a seção de toque de licenciamento. Dentro dela. Vamos reduzir o tamanho do título do conteúdo da guia. Agora podemos ver que o design é ajustado de acordo com nossa necessidade. Além disso, há mais espaçamento para a esquerda e para a direita dentro de um painel de abas. Então, selecionei a guia Ben e estou alterando o valor do preenchimento à esquerda e à direita para 20 pixels. Agora estou alterando o tamanho da legenda da oferta, pois ela deve ser menor do que o título do conteúdo da guia. Não há espaçamento entre o licenciamento de arte e a comissão. Isso é uma torneira. Então, precisamos fazer o espaçamento. Então, estou selecionando o dabbling e estou dando o valor da margem dos dez pixels principais, então o espaço é criado. Agora, novamente, estou alterando o tamanho do título do conteúdo da guia. Com a conclusão da seção de toque de licenciamento, vou passar para a seção de depoimentos. Agora eu selecionei a seção de depoimentos. Vamos reduzir o espaçamento na parte superior. Então, estou alterando o valor do preenchimento na parte superior para 20 pixels. Agora vou reduzir o tamanho do título da seção. Agora parece bom. Agora estou passando para a pergunta cega: preciso fazer com que o conteúdo dentro dessa linha não seja um artigo. Então, estou escolhendo uma vertical na direção, outro layout. Para ficar à esquerda, estou alinhando-o com o elevador. Chegando ao cliente, toque em detalhes, pois não está diretamente relacionado à imagem e à leitura. Então, com a seleção do revestimento detalhado Klein, estou alterando o valor do preenchimento dele. Agora vamos reduzir o tamanho do conteúdo do depoimento. E também estou alterando o valor do preenchimento na parte superior. Agora sinto que preciso mudar o tamanho do nome do cliente e do cargo do cliente. Então, estou mudando o tamanho. Dentro da seção de preços. Preciso fazer com que o representante do título de preço não seja um artigo. Estou escolhendo uma vertical para a seção de dados. Além disso, o item de preço parece estar se sobrepondo à borda, então precisamos alinhá-lo adequadamente. Estou mudando o preenchimento direito e esquerdo enquanto você faz 20 pixels. Depois disso, estou selecionando o representante da lista de preços, pois isso é muito espaçamento de Oliver dentro do invólucro da lista de preços. Portanto, precisamos alterar o valor do preenchimento e deixar o valor entre dois pixels à esquerda e à direita. Agora eu sinto que o conteúdo dentro do representante do título do anúncio agora é um decalque. Ou seja, o MOG deve estar sob o título. E eu estou escolhendo a vertical para a direção. Em seguida, vamos alinhá-lo à esquerda. E vamos criar o espaçamento entre esses dois. Então, estou dando o valor da margem na parte inferior do título da lista. Agora vamos reduzir o tamanho do item da lista. Além disso, precisamos reduzir o tamanho do botão. Ao concluir esta seção de preços, vou passar para a seção do blog. Em vez da seção de bloqueio, selecionei o item do blog. Dentro deste item do blog, precisamos reduzir o espaçamento desnecessário em todo o conteúdo. Então, estou mudando o valor do rolamento para 20 pixels. Para todos os lugares. Depois disso, estou selecionando o título do blog e estou dando a altura como 1,2 hífen e o tamanho para 28 pixels. Agora vamos para a seção de perguntas frequentes. Dentro da seção de perguntas frequentes, todo o conteúdo está sobreposto à borda. Então, primeiro, estou selecionando o pacote de conteúdo do FAQ. E eu já estou usando um valor de preenchimento à esquerda de dez pixels. De certa forma, o conteúdo vem dentro dele. Agora estou alterando o valor do preenchimento direito para dez pixels na parte superior e inferior para 20 pixels. Já reduzi o tamanho da pergunta do acordeão com uma seleção da pergunta em si. Eu vou escolher outra opção de tipo. Com a seleção da quebra. Estou escolhendo o normal. Novamente, estou mudando o tamanho para 16 pixels. Agora precisamos ajustar o tamanho que está dentro da lista suspensa. O conteúdo da lista suspensa estará dentro do jardim duplo. Então, estou selecionando a campainha do acordeão e vou até a configuração dela. Abaixo dela, podemos encontrar a configuração suspensa. E eu estou escolhendo o programa. Agora, com a seleção do parágrafo, estou mudando o tamanho para 14 pixels. Agora vou voltar ao cenário. Estou escolhendo a opção Ocultar. O formulário de inscrição parece estar bom, então estou ignorando-o e estou passando para o contrato da Seção oito Vamos reduzir o espaçamento com a seleção de um envoltório de detalhes do formulário de contato. Estou pronto para usar o valor de preenchimento de 20 pixels. Vamos mudar o tamanho do telefone e do endereço masculinos. Então, com a seleção de um título detalhado, estou dando o tamanho S 22 pixels. Agora estou escolhendo o membro de contato, que será aplicável à área de e-mail e ao número de telefone. E estou dando o tamanho S 16 pixels com uma seleção de campos de formulário de contato marcados. Vamos reduzir o espaçamento alterando o valor do preenchimento por toda parte. E também precisamos reduzir o tamanho dos campos de entrada. Então, estou alterando o valor do tamanho para 18 pixels. E chegando ao espaçamento entre cada preenchimento de entrada, estou escolhendo o invólucro de entrada do formulário. E estou alterando o valor da margem na parte inferior para 40 pixels. Aplausos. Estamos chegando à área do rodapé. Nele. Estou escolhendo a seção de direitos autorais. As restrições de direitos autorais estão se sobrepondo às bordas. Então, estou selecionando a embalagem do menu corporativo, digamos, a embalagem do menu de direitos autorais e escolhendo o link do dominó de comida. E estou escolhendo o bloco S e outra tela. Então, tudo estará em um bloco. E com a seleção de todo o menu de direitos autorais, estou escolhendo o centro no alinhado abaixo da tipografia. Para criar o espaçamento entre cada um dos links do menu, estou dando ao valor de preenchimento os 210 pixels superiores. Na parte inferior, faça dez pixels. Agora estou escolhendo os textos de direitos autorais e estou escolhendo o centro na tipografia alinhada e outra tipográfica para reduzir o espaçamento entre a seção de direitos autorais e o item social do rodapé. Com uma seleção da seção de direitos autorais, estou reduzindo o valor da margem na parte superior para 20 pixels. E agora vamos reduzir o tamanho do conteúdo do rodapé Tidal para 26 pixels. Ao tirar a seção de fotos, descobrimos que o tamanho dos detalhes do endereço deve ser reduzido. Então, estou mudando o tamanho para 17 pixels. E também precisamos reduzir o espaçamento na parte inferior. Então, selecionei um envoltório de detalhes do formulário de contato e estou atribuindo o valor de preenchimento inferior para 40 pixels. Chegando à seção do blog, precisamos reduzir a altura da linha. Então, estou selecionando o título do blog e atribuindo o valor da altura a 1,1 hífen. E estou mudando o tamanho com 26 pixels. Ao voltar para a seção de depoimentos, há muito espaço na parte inferior. Então, selecionei esta seção e , em seguida, alterei o valor do preenchimento inferior para 60 pixels. Estou voltando para verificar se tudo está indo bem ou não. Então, nesta lição, fizemos tudo o que é necessário para o código móvel, certo? Na próxima lição, completaremos todo o estilo necessário uma agulha para a porta móvel, certo? E também faremos o estilo para a única página de postagem do blog. Em cada um dos pontos de interrupção. 50. Finalize responsivos e única página de postagem Responsiva: Nesta lição, concluiremos o antigo estilo desnecessário necessário para os pontos de interrupção do retrato móvel. Além disso, concluiremos o estilo necessário para a única página de postagem do blog. Em cada um dos pontos de interrupção. Vamos ver como vamos fazer isso. Novamente, estou começando do primeiro nesta grade da área de heróis. Acho que precisamos reduzir o raio da fronteira. Então, vou ultrapassar as fronteiras e estou pronto para usar o valor do raio de 20 pixels. Vamos fazer o mesmo com o item de serviço para que ele seja aplicado para lembrar ainda mais esses itens Vamos alterar o valor do raio do item 123.4 da galeria. Dentro da seção do workshop, parece estar tudo bem. Vamos seguir em frente. Agora, selecionei esse e-mail ou gráfico e estou alterando o valor do raio. Eu selecionei o rap alinhado ao vídeo, mas no gerenciador Stein não há valor de raio. Demos o valor do raio em alguns outros desenvolvidos. Essa coisa está dentro da linha do vídeo de trabalho. Aqui, fornecemos o valor do raio, então vamos alterá-lo. Em seguida, selecionei a imagem do modelo de licenciamento. Aqui, fornecemos o valor do raio. Então, vamos alterá-lo em um toque e eu estou alterando o valor do raio. Mesmo para a taxa de oferta, preciso alterar o valor do raio para 20 pixels. Agora estou mudando para o item do depoimento. Em seguida, na seção de preços, selecionei os itens de preço e estou alterando o valor do raio para fazer o pixel. Ele até mesmo vamos alterar o valor do raio do representante da lista de preços, certo? Deve ser semelhante ao raio do item de preço que chega ao item do blog. Vamos mudar o valor do raio aqui. Até mesmo para o pacote de conteúdo do FAQ. E a seguir, um envoltório de detalhes do formulário de contato. E, finalmente, para o pacote de campos do formulário de contato, concluímos o estilo no ponto de interrupção correto da porta móvel. Agora chego à página da coleção. Existe para uma única página de postagem do blog. Já projetamos o ponto de interrupção básico. Vamos passar para o ponto de interrupção do tablet. Aqui, precisamos reduzir o tamanho do cabeçalho da agulha do blog. Aqui, estou alterando o valor do tamanho para 35 pixels. Agora chego ao último ponto de interrupção, que é o produto móvel, certo? Ponto de interrupção. Porque em todos os outros pontos de interrupção, o estilo parece estar bem. Então, chego à última coisa. Agora eu selecionei o título de detalhes do blog porque precisamos reduzir o tamanho dele. Então, estou mudando o tamanho para 30 pixels. Agora eu selecionei o Meta de detalhes do bloco porque ele contém a data de publicação e nossa tônica. Eu preciso fazer com que isso fique na vertical. Então eu fui para a direção e estou selecionando a vertical. Então, vamos espaçar a grade entre esses dois. Então, estou selecionando o autor dos detalhes do blog e estou dando o valor de preenchimento em D2. Então o pixel, como no blog, precisa de um título. Eu sinto que há uma maior altura de linha. Então, estou ensinando a altura a 1,2 hífen. Vamos fazer o espaçamento na parte superior do rack Broglie Dell. Então, estou atribuindo o valor de preenchimento do encaixe para 40 pixels. Isso é mais espaçamento na parte inferior da seção de detalhes do blog. Então, estou alterando o valor para 60 pixels. Portanto, em todos os pontos de interrupção, uma única página de postagem do blog parece estar bem. Então, na próxima lição, finalizaremos nosso site corrigindo o nome da turma. Resultados da auditoria do fluxo de trabalho. O site é EL, vendo o desempenho do site. E, finalmente, tornaremos o formulário de contato viável. Vamos ver tudo sobre isso nas próximas aulas. 51. Corrigir nomes de curso e limpar: Nesta lição, vamos curvar o nome da classe e também limpar o nome da classe não utilizada. Vamos mergulhar na lição. No seu lado direito, você pode ver as três gotas em forma de estrutura. Isso é menos gerente de crianças. Dentro dela. Pudemos ver várias classes que criamos até agora. Agora estou percorrendo todas as classes para verificar se criamos corretamente com a primeira letra em gatos. Então eu encontrei aquela seção de blocos que se agarra nela. Precisamos fazer um W nas lacunas. Agora estou clicando no ícone da chave inglesa, que corresponde ao nome dessa classe. Aqui, poderíamos renomeá-lo. Agora estou alterando a letra W2 maiúscula W para que possamos ver que o nome da classe foi atualizado. Vamos verificar as classes restantes se está tudo bem. Agora, vou fazer a opção de limpeza para limpar o que não está acostumado com aulas ou estilos. Aqui eu encontrei aquele que tinha esse filho em particular ou não associado a nenhum elemento da página. Então, vou remover isso. Em seguida, estou escolhendo a interação. Aqui, temos nosso elemento, Rico e uma pastelaria. Agora estou clicando na limpeza para apagar os elementos não utilizados e a massa pronta. Mas aqui não temos nenhum dos gatilhos e animações não utilizados. Temos Garreta, o nome da classe, e também excluímos o detalhe não utilizado. Na próxima lição, vamos ver os resultados da auditoria do fluxo de trabalho. 52. Resultados de auditoria de Webflow: Nesta lição, veremos os resultados da auditoria no Webflow. Podemos encontrar e corrigir problemas de acessibilidade no painel de auditoria. No canto inferior esquerdo, temos o painel Auditoria com formato quadrado. Ao clicar nisso, podemos encontrar vários resultados de auditoria. Esse planeta de auditoria resolverá os problemas comuns relacionados à acessibilidade para que possamos resolvê-los antes de publicarmos nosso site. Aqui temos erros críticos e erros moderados. Os erros críticos ou o painel de auditoria, o quadrado vermelho, os erros moderados ou o painel de auditoria com o triângulo amarelo. Então, agora vou ver os resultados da auditoria do nosso site. Nessas auditorias, temos 29 erros críticos, ou seja, com o quadrado vermelho e erros moderados com os triângulos. Chegando ao primeiro, obtemos os resultados da auditoria com texto alternativo ausente , para que tenhamos que corrigir isso. Antes disso, queremos saber o que é texto alternativo. Podemos ter o cenário, as pessoas, aqueles que são cegos com baixa visão ou podem ter uma deficiência visual. Usaremos a opção de leitor de tela para conhecer a função do nosso conteúdo de imagem no site. Os leitores de tela renderizarão o conteúdo do texto e da imagem como discurso para essas pessoas. texto alternativo ausente significa que incluímos a imagem sem texto alternativo descritivo. Se uma imagem transmitir informações essenciais que não estão disponíveis em nenhum outro lugar da página, uma pessoa que não consegue ver a imagem perderá as informações às quais precisamos fornecer os textos alternativos cada uma das imagens que criamos neste site. Agora eu selecionei os textos alternativos que faltam, que estão nos 24 lugares. Se clicarmos na seta , ela nos levará até onde precisamos fazer as alterações. Na seção de heróis, não fornecemos o texto alternativo para essa imagem. Então, estou clicando nessa imagem e escolhendo a descrição personalizada sob o texto alternativo . E estou dando o texto alternativo S para mulheres da área de heróis. Novamente, vou voltar ao painel de Auditoria e escolher o próximo erro crítico. Não fizemos o texto alternativo para esse ícone de e-mail. Então, estou escolhendo o texto alternativo como descrição personalizada e estou dando o texto alternativo como ícone de e-mail do herói. Em seguida, selecionei outro erro. Isso nos levou a esta seção de obstetrícia. Eu não tenho uma Gilda perfeita para cada um dos ícones do serviço. Então, selecionei o primeiro ícone e estou dando o S. do Ártico. Então, com o ícone, estou fazendo o mesmo processo para as outras duas imagens. Vamos fazer o mesmo processo para todo o texto alternativo ausente. Então, finalmente, concluímos todos os erros críticos. Vamos passar para os erros moderados. Ou seja, com o ícone do triângulo amarelo. Os erros desse modelo mostram o erro com um nível de cabeçalho ignorado. Vamos ver qual é o nível de cabeçalho ignorado. Três níveis de cabeçalho significam nossos elementos de cabeçalho, seja, H1, H2, H3, etc. Não use a hierarquia de cabeçalho adequada. Qual é o título mais importante. A direção de To cairia abaixo do H1. Então por diante. Então, a hierarquia do cabeçalho é interrompida. Se pularmos um nível de título que precisamos corrigir isso, pulamos um nível de cabeçalho. Agora eu selecionei o erro. Isso nos levará para a seção de serviços. No subtítulo desta seção, precisamos alterar a tag do título. Na mensagem pop-up. Mostra qual erro foi bom, vamos lê-lo. O nível de título anterior é H1, então o próximo especialista ou nível é H2. Portanto, espera-se que mudemos o nível dois do título, H2. E também teremos a opção de corrigir esse erro. Podemos escolher a opção desnecessária que é apropriada para nós. Agora eu selecionei esse oásis e vou para as Configurações e estou mudando o tipo de título para a ferramenta de cobertura. Agora estou selecionando a próxima era. Está nos levando para a seção de depoimentos. Nisso, está mostrando o nome do cliente. Aqui. Está nos instruindo a mudar o título de nível dois, cobertura três. Então, vou mudar o tipo de título do histórico. Agora temos outra flecha no trabalho do cliente. Está nos orientando a mudar o nível dois do título, h4. Temos outro erro que está no valor da classificação, esperando que alteremos o título de nível dois hedge phi. Então, vamos mudar o título de nível dois hedge phi. Agora, concluímos todos os erros, então recebemos a mensagem como fazenda de problemas conhecidos. Na próxima lição, veremos as configurações de SEO de um site. 53. Configurações de site de SEO: Nesta lição, vamos fazer a tag de título e a meta-descrição, que são essenciais para a otimização de mecanismos de busca de SEO. Então, vamos ver como fazer isso. Tags de título e descrição meta para este site. Chegando ao nosso projeto aqui, não temos uma tag de título. Precisamos adicionar uma tag de título a ela. Nossas tags de título e descrição meta ou exibidas nos resultados dos mecanismos de pesquisa. O provedor de tags de título e descrição pré-visualiza o conteúdo da nossa página e precisamos adicionar uma tag de título a ela. Vamos ver como adicionar uma tag de título ao site. Para acrescentar isso, vou até a página para dizer coisas e passar para as configurações de SEO. Nele, conseguimos encontrar um título dessa meta descrição na tag de título. Vou lhe dar um título. Eu o dei como artista, Webflow, HTML, modelo de site. Também precisamos fornecer a eles uma meta-descrição. A cópia convincente da meta descrição pode ajudar a gerar mais cliques. Eu lhes dei uma descrição meta. Vamos eliminar os erros e dizer que precisamos. Agora vou publicá-lo para ver como funciona. Agora estou carregando esse lado para que agora possamos ver a dívida do título. Agora, na página, estou selecionando esse modelo de postagem de blog porque ele nos levará para outra página. Como esta é uma página separada, precisamos verificar se ela tem tags de título e meta-descrição. Então, aqui podemos ver que não é uma tag de título. Vou usar esse título de blog como a tag de título. Então, selecionei o modelo de postagem do blog abaixo da configuração de SEO. Eu vou até a tag de título. No lado direito. Podemos descobrir que, no campo Adicionar nome, estou escolhendo o nome, pois ao fornecer o nome do campo, ele recuperará o título do blog do complemento da coleção para o campo. Estou adicionando um Webflow, modelo de site HTML. Estou guardando isso. Vamos publicar isso. Estou recarregando esta página. Agora eu posso ver a dívida do título. Então, nesta lição, fornecemos a tag de título e a descrição meta para este site. Na próxima lição, veremos qual é o desempenho do site que criamos. 54. Desempenho do site: Nesta lição, vamos ver qual é o desempenho do nosso site. Primeiro, precisamos minimizar o CSS. Isso reduzirá o tamanho do arquivo sem alterar a forma como o arquivo CSS é executado na linha. Portanto, ao retirar os dados desnecessários do código CSS, essa amonificação ajuda o navegador a baixar e processar os arquivos mais rapidamente e a aumentar o desempenho da página. Vamos ver como modificar o CSS. Eu posto. Estou selecionando a opção abaixo dela. Estou escolhendo a opção avançada aqui. Estou habilitando o Minify CSS. Agora vamos publicar isso. Agora estou carregando a página. Vamos ver como tudo vale. Então, tudo parece bom. Até mesmo conseguimos rolar a página sem problemas. Agora, para ver o desempenho do lado no navegador, carrego nosso site. Com o botão direito do mouse. Nós inspecionamos a opção. Teremos várias opções nele. Estou escolhendo um farol. Agora vamos clicar em gerar relatório. No relatório, teremos a pontuação. Obtemos a pontuação do desempenho junto com os detalhes sobre ele. Os detalhes e a pontuação da acessibilidade. O mesmo vale para as melhores práticas e SEO. Na próxima lição, veremos enviar o formulário de contato e forneceremos ao homem uma notificação sobre o envio do formulário de contato. E também veremos formas fronteiriças de dados da missão. 55. Formulário de contato - Obtendo e-mails adequados: Nesta lição, veremos enviar o formulário de contato e como configurar o e-mail para receber uma notificação ao enviar o formulário de contato. Para começar, vou às configurações do projeto. Vamos agora passar para a etapa do formulário. E isso nos dará todas as opções relacionadas ao que é feito com os dados que residem em um envio bem-sucedido. Agora, os dados do personagem serão enviados por e-mail por padrão. A opção começa com o nome da empresa. O e-mail foi enviado. Qual nome da empresa você quer que seja exibido? Em seguida, temos o endereço de e-mail ou endereços de e-mail. Você quer que os envios sejam iguais devido à adição de mais endereços de e-mail. Basta usar uma vírgula no final do endereço de e-mail e adicionar outro endereço de e-mail. Em seguida, a linha de assunto desse e-mail, a repetição para tratar dessa fatura com o endereço de e-mail usado. Se você receber um formulário de e-mail do paciente e clicar em reproduzir, você pode copiar o nome e as variáveis de e-mail à direita desse campo e colá-las e eu responderei ao endereço. E isso garantirá que as respostas a esse e-mail diretamente para o endereço de e-mail capturado no telefone. E, finalmente, temos o modelo de e-mail. Você pode deixar isso como está, ou você pode escrever seu próprio movimento usando qualquer uma das variáveis à direita e pode até mesmo colocar HTML personalizado aqui. Então, agora vamos enviar o formulário de contato e vamos ver como ele funciona. Então, no nome, estou dando isso como um Webflow. E vamos fornecer o ID de e-mail como gmail.com. Para a empresa. Estou verificando nosso fluxo de trabalho. Estou dando alguns números para o número de telefone e estou inserindo algumas das mensagens aqui. Vamos enviá-lo. Agora eu recebo a mensagem de sucesso. Portanto, quando o formulário for enviado, esses dados de envio serão listados abaixo. E outras formas de dados de visão. Então, agora vimos o que acontece quando um usuário envia o formulário, por que os dados são armazenados e como receber notificações por e-mail. Então, concluímos tudo o que é necessário para o modelo de site do nosso artista. Como desenvolvemos com o modelo, precisamos saber como alterar a cor do conteúdo e fazer algumas das edições necessárias. Vamos ver isso na próxima lição. 56. Personalize seu site com base em suas necessidades: Concluímos o modelo do site do artista. Os usuários que usam nosso modelo podem querer mudar a cor desse conteúdo e também alterarão seu conteúdo para que precisemos verificar se estamos funcionando corretamente ou não. Vamos verificar essa mudança de conteúdo e cor. Então, agora vou verificar o conteúdo que tem a cor laranja. Usamos essa cor primária para os links de navegação e para a legenda da área de heróis para os serviços, para a galeria. Comandos de valor percentual, preços e algumas das palavras no item da lista do blog e do boletim informativo de suporte. Entre em contato comigo. Então, tudo isso está usando as cores primárias. Agora vou usar outro tipo de gráfico, G. Estou escolhendo a cor. Usamos a cor primária da amostra. Agora vou mudar a cor para mudar a cor da cor primária. Então, agora pudemos notar que a cor foi alterada. Para editar o conteúdo que temos. E nossa outra opção, que é editar automaticamente, poderíamos acessar esse editor na configuração do projeto. Neste editor, vamos pedir atualize o conteúdo de um anúncio em uma interface simples, que é ótima para clientes ou colegas de equipe que não precisam da complexidade do designer. Então, isso é usado principalmente para adicionar ou atualizar o conteúdo. Agora estamos no editor. Desejo alterar a legenda que é permitida. Minha paixão como desenho é minha paixão. Mesmo que eu esteja mudando o título para arte digital, crie mais gradientes. Vamos supor que, se conseguirmos mudar a imagem, estou clicando duas vezes nela. Vou escolher outra imagem para que ela seja atualizada. Agora vou publicá-lo. Temos um objetivo definitivo de alcançar isso aqui. Para marcar um esporo em uma nova guia, estou carregando nosso modelo de site para que possamos ver as mudanças que fizemos. Se quisermos fazer mais edições, basta clicar neste site de edição. 57. Conclusão, obrigado!: Parabéns por terminar o curso com sucesso. Foi uma longa jornada para nós dois. Agora, você pode criar sites incríveis. Espero que você tenha gostado dessa aula e eu agradeceria. Se você pudesse deixar uma resenha desta aula. Se você tiver alguma dúvida, não se esqueça de me perguntar na seção de discussão. Tenho causas sobre a ilustração e o design gráfico. Se você estiver interessado, pode começar. Não foi usado para ser seu instrutor. E desejo a você tudo de bom. Obrigada.