O maior curso de Webflow para iniciantes — aprenda a construir um site de portfólio do zero no Webflow.

1. Visão geral do curso: E se eu dissesse que você pode construir um site totalmente funcional do zero sem usar uma única linha de tribunal e completamente de graça? Você pode projetá-lo do jeito que quiser. Você pode adicionar animações. Você poderia ter interações. Você poderia fazer um responsivo para outro dispositivo, grandes pontos e até mesmo hospedado vir para mim de graça. Olá, sou campeão e bem-vindo ao meu Magal. Mas é claro, por grandeza neste curso eu vou te ensinar como pegar este site de portfólio de uma página que eu projetei do zero em figo MMA e construir-nos dentro de nós. Bem, flui completamente do zero novamente. Sinta-se livre para usar seu design para seus próprios quatro para o seu site. Vá em frente e faça alterações. Como quiser, se precisar. Tudo bem. Então vamos falar sobre o que eu vou te ensinar neste curso na pontuação vai te ensinar o básico e os fundamentos do desenvolvimento. E o que é que você precisa saber antes de começar a construir um site e eu vou te ensinar coisas sobre caixa Moderna responsividade, grades, layout, elementos, animações, interação, componentes de facadas e muito mais e quero perturbar está pronto que você poderia até mesmo hospedado completamente de graça, mas até mesmo anexado. Domínio personalizado. Mas o fim das contas. Você sabe tudo o que você precisa saber para ir em frente e construir qualquer tipo de site a partir do zero. Então espero que você está animado e pronto para aprender a sua gripe. Se você é um terno, caras no próximo vídeo. 2. Baixando os links e visualização: Tudo bem caras. Então, antes de começarmos, apenas um dedo compartilhe algumas coisas antes da mão e deixe-vos saber algumas informações. Agora, este é o último site que eu criei dentro. Onde, Flo E o que eu vou fazer é eu vou compartilhar um link de pré-visualização na descrição onde você pode realmente verificar este site dentro do fluxo de trabalho. Agora você não será capaz de fazer nenhuma edição ou alteração porque, como você vê aqui, ele diz que é apenas como você pode ver. Ele diz apenas ler apenas mais alterações não serão salvas. Mas sinta-se livre para ir ou como ir ao redor e verificar como eu construí isso. Você pode verificar toda a minha estrutura que eu tenho melhor. Você pode verificar nossas informações sobre as aulas, tudo o que você precisa saber. Se você ficar preso, vá em frente e volte com isso e tipo de verificar. Se você ficar preso em qualquer lugar, isso é o que prevalece. Então, se você mesmo que você vá em frente e faça quaisquer alterações, isso não terá efeito porque esta é apenas a pré-visualização. E se você realmente quer ver o site em toda a sua glória totalmente funcional. Você pode conferir isso. Você está de novo. Link estará na descrição onde você pode rolar e verificar e jogar ao redor. Temos muitas interações. Tenho muitas animações que vamos fazer coisas super divertidas. Você pode verificar isso também. E por último, mas não menos importante, eu projetei todo este site na Fig MMA, então você pode ir para o Lincoln a descrição do vídeo e conferir e Donna os ativos que vai ter as imagens que vai ter os ícones nele vai ter o arquivo de estigma, que projetou e nós realmente referenciando esse arquivo de figura. E então estaremos construindo esse design dentro do fluxo de trabalho. Então, três coisas é o link de pré-visualização, e então você tem o próprio site, e então você tem os ativos que você precisa baixar, então certifique-se de verificar tudo isso para que você esteja pronto. E na próxima semana, vamos começar. Então eu vejo vocês no próximo vídeo 3. Entendendo o modelo de caixa: Tudo bem, cara. Então, finalmente é hora de começar. Agora, antes de entrarmos na Web float e começarmos a construí-la, há muitos fundamentos e fundamentos que precisam ser entendidos. Então o que eu vou fazer é dividir esses fundamentos em partes diferentes e explicá-los quando surgir a necessidade é quando estamos construindo uma certa seção fora do lado positivo . Primeiro de tudo, neste vídeo, vamos falar sobre algo chamado modelo Box, que é o conceito mais básico e fundamental que você precisa entender sobre web design e desenvolvimento web. Tudo bem, como os sites são realmente construídos? Tudo bem, como eles são estruturados? Isso é alguma moda em particular ou é apenas um aleatório ou como é que tudo funciona? E temos tantos tipos diferentes fora da inteligência do dispositivo. Temos profissionais de livros Mac. Temos mostradores de retina. Temos laptops ou janelas. Você tem comprimidos. Temos dispositivos móveis, temos monitores Foca. Como funciona o site em todos esses três tamanhos diferentes? Vamos falar sobre isso. Então, na invenção, arquivado como uma página chamada é a caixa mortal. E se você clicar nisso, você vai ver algo parecido com isso. Tudo bem, então deixe-me explicar o que temos. Você é alguém para vir aqui para este, hum, quadro, que é de 14 40 pixels de largura. E o padrão geral da indústria é sempre projetar e fazer interface no menor tamanho de tela . Tudo bem, e quando você está projetando um site, você sempre quer começar com o menor tamanho de tela, que é basicamente o Mac Book Pro neste lugar. Então, se eu realmente ir e você sabe, clicar no ícone do quadro, você pode realmente ver que nós temos 14. 40. Temos um livro para Mac, que é de 11 e 50 dedos. Tenho um Mac Book Pro cadelas. 14 e 40. Temos que vender Facebook, que é 1500 mais em I 'm médias 12 80 Agora, Mesmo que o livro Mac eo Mac são menores do que 14 40 é sempre um bom padrão para realmente projetar em um 14 40 pixel com dimensões, porque Não é o grande, não é um pequeno, é o tamanho ideal, tudo bem. E isso é um básico que você precisa entender. A próxima coisa é essa estrutura fora de um site. Tudo bem, então se olhar para aqui, nós temos cores de árvore, nós temos esta laranja, e então nós temos esta laranja mais clara. E então temos uma cor amarela. Mesma coisa aqui e algo aqui. Mas a nota diferente aqui é que esta laranja é realmente mais larga em um para exibir, o que significa que está ocupando todo o britânico. Mas esse conteúdo está lá dentro. Digamos que este, este tem 1311 pixels de largura. Isto é 1311 pixels enquanto. E isso é 131 em pixels enquanto. E isso significa que o conteúdo vai ficar no centro da tela, não importa o tamanho fora do monitor. Tudo bem. E para fazer isso, precisamos definir um molhado em particular. Então aqui eu estou realmente definindo consciente dizendo 1319 pixels de largura e respectivos, fora do tamanho da tela, a tela vai ser 1311 correções. Tudo bem, agora, os outros tamanhos de tela? Que nós tivemos o 1152 e 120 Agora estes são menores, você sabe. Então 1311 Sim, isso é verdade. Então, como é que essa boa aparência, vai parecer estranha? Bem, não. Se você gerenciou seu prédio, seu site, você pode definir dizer isso. Olha, eu quero um máximo. Era para ser 1311 Mas se as peles ficarem menores, você pode ir em frente e encolher a inteligência. Tudo bem, mas no máximo. Eu queria ser 1311 Eu não quero que ele vá além de 1311 Tudo bem. Essa é uma condição que você pode definir quando você está construindo uma arma. E é assim que praticamente tem livros em desenvolvimento. Então deixe-me realmente vir para o lado esquerdo e podemos ver algum tipo off e index. Então a coisa ordens que vemos esta chamada é uma seção que significa que ele ocupa toda a tela vale tudo bem. Ele toca as bordas da tela. E então temos algo chamado como um rapper que define esse tamanho final fora do nosso conteúdo, a e última palavra do nosso conteúdo. Tudo bem. E o próximo é os blocos internos é onde temos conteúdo que pode ser texto ou imagens, e eles podem ser estruturados de qualquer maneira que eles quiserem e estes vão caber dentro do rapper, tudo bem. E finalmente, temos uma imagem, e isso é para o segundo exemplo. Então, digamos, por exemplo, que você tem uma imagem ou você tem alguma textura. Você tem algumas informações que você deseja exibir, mas você quer tirar todo o valor da tela, certo? Você pode fazer isso. Você pode definitivamente fazer isso. Você gostaria de colocá-lo em uma seção e você não. E você não tem que colocá-lo em um rapper porque se você colocá-lo em um rapper, ele vai acabar se confinando. O trabalho que você deu para que você realmente não pode usar o rapper eo conteúdo vai abranger todo o mundo. Tudo bem. Agora, há outra coisa que você pode fazer neste caso, se você tem Look, este é 1035 que é menor do que 1311 Agora você pode ter várias apostas, certo? Digamos que você não queira que isso ocupe 1311 espaço. Talvez você não encolher isso um pouco. Bem, você pode definitivamente fazer isso para que você possa realmente ter vários Ritz para vários elementos. E não importa o tamanho da tela, que será sempre o mesmo. 1035 aqui, 1035 aqui e 1035 aqui. Então é assim que os sites um pouco. Então, só para recapitular, você sempre tem uma seção que é o contêiner mais externo, e que vai ocupar todo o mundo da tela. E então você tem algo chamado rapper, onde você define um certo britânico e a próxima coisa você tem blocos internos onde tudo está dentro desse rapper e esse corte e isso definido com tudo certo. E se você quiser mudar o mundo por outro rapper, você pode definitivamente ir em frente e fazer isso. Então, isso é basicamente sobre o modelo da caixa. Na próxima semana, vamos falar sobre os três tipos principais de elementos de layout, que usaremos para construir todo o nosso conteúdo dentro de armas. Então eu vou ver vocês no próximo vídeo 4. Tipos Tipos de elementos de layout: Ei, pessoal, bem-vindos de volta. Então, neste vídeo, vamos dar uma olhada nos três tipos principais fora de elementos de layout. Essa arma Oh, fornece. Agora há um pouco mais. Eu vou dizer que são 6 a 7. Mas esses são os que temos que prestar muita atenção, porque isso é o que vamos usar a maior parte do tempo agora, há três coisas principais contêiner de seção e um impasse. Então, como eu mencionei no vídeo anterior que a parte laranja fora da tela que ocupa toda a largura é chamada como uma seção e que exatamente é esta seção. Ele ocupa o todo com fora da tela. O próximo é um contêiner. Agora, o segundo passo foi criar ah, recipiente ou um invólucro fora alguns tipos que tipo off fornece um definir com em onde, Flo, Você tem um recipiente de qualidade elemento. Mas o problema é, o recipiente restringe-se a uma leitura máxima de 9 40 pixels na área de trabalho e e para outros pontos de quebra, que s paisagem móvel tablet e mais relatado. Ele ocupa o 100%. Então é basicamente age como uma seção. Agora teremos outro elemento chamado de bloco da morte. Agora, um bloco div, se você vai saber, você sabe, considerado em termos reais. É como um balão. Tudo bem, quando você olha para um balão, você sabe, quando não há ar, apenas parece, você sabe, um objeto completamente plano. Mas quanto mais fora de ar você soprar dentro do balão, maior será o balão. E você pode realmente definir quanto tamanho ele quer ser. Se você soprar mais, vai se tornar maior. Se soprar menos, vai ser menor, certo? Então não olhe, é algo que é realmente, muito flexível. Quando você está construindo um site, então minha preferência pessoal é nunca usar um contêiner,e é por isso que eu não uso. Quando você está construindo um site, então minha preferência pessoal é nunca usar um contêiner, Coloquei um ponto de exclamação ao lado do recipiente. Agora não há nada de errado e usando um recipiente, Mas eu acho que recipiente apenas tira esse controle completo de você como um designer e como uma pessoa que está queimando em onde fluxo. Então eu prefiro manter seções e desenvolver porque você tem total flexibilidade. Agora mesmo. Há também outra chamada elemento é o bloco de link. Agora, o bloco de ligação é basicamente o mesmo que o bloco da morte. Mas a diferença é que você não pode clicar em um bloco de diferenças, mas você pode clicar em um bloco de links, certo? Então este ponto de marca mundial também. Então agora que nós meio que entendemos o modelo de caixa e sabemos quais são os três tipos de elementos principais , agora podemos finalmente começar a construir nosso site e quem chorou flutuar. Então, como vocês no próximo vídeo 5. Informações de hospedagem Webflow: Uma última coisa antes de entrarmos nesse fluxo, quero explicar como os preços funcionam em onde, Flo. Então, obviamente, você vai construir um site e você pode querer hospedar mais tarde. Vai ser um portfólio ou o site da sua empresa, nossa página de destino, seja lá o que for, pensei que seria interessante explicar como funciona o preço. Então, quando você começa e cria um fluxo do Canadá, você começa a fazer projetos gratuitos, e isso é o que você pode ver aqui. Diz que você começa com dois projetos gratuitos, certo? E você pode fazer o que quiser com esses dois projetos. Agora, existem três opções. Um, você pode hospedá-lo em fluxos Web subdomínio, que termina com o Florida Ohio, e isso é completamente gratuito, tudo bem. O segundo 1 é que você pode realmente hospedá-lo com seu próprio domínio personalizado em um fluxo de Web Silverware fluxo usa Amazon Web services para que você possa hospedar, desvendar completamente e é puro, e ele e seus amigos. E é muito seguro para que você possa vincular seu domínio personalizado. Mas isso requer um plano pago. E o terceiro 1 é, você pode realmente exportar o cabo de fluxo da Web que você tem e hospedado em outra plataforma diferente ou juntos. Então vamos realmente dar uma olhada. Dê uma olhada nisso com muito mais detalhes. Portanto, existem dois tipos de plantas. Um é o plano do site, e o outro é o plano da conta. Vamos começar com o plano da conta. Então, como eu disse, o plano inicial é o plano livre, onde você começa a três projetos e se você quer mais de dois projetos e quando eu digo projeto, eu quero dizer site individual e se você quiser, se você quiser mais de dois, você pode atualizar isso para 10 projetos com US $16 por mês se você construir anualmente ou US $24 por mês. Se você escolher. Como um sábio mensal, você também pode ir em frente e exportar cordão, tudo bem, e se você quiser exportá-lo para uma plataforma de hospedagem diferente, você pode realmente exportar bonito Córdoba. O fluxo fornece. Você pode fazer transferências de projeto e praticamente isso. E se você quiser ir para mais de 10 projetos, você pode ir para o plano pro. Tudo bem, agora vamos passar para o são pagos, decidir planta. E quando eu digo plantas laterais, isso significa o plano para cada site individual ou cada projeto individual em sua conta . Certo, então vamos ver qual é a diferença. Agora, se você ir para o plano básico e quando você chegar ao plano básico, obviamente você pode vincular caro seu domínio personalizado que você compra de outra plataforma de hospedagem , e você pode conectar esse domínio. Para fazer isso, você terá que usar um plano pago que você pode ter 100 páginas. Você pode ter visitas mensais de 25.000 e você pode ter zero itens CMS. Tudo bem, parece um sentido para o sistema de gerenciamento de conteúdo, que é praticamente uma coisa de nível avançado ou intermediário onde você cria algum tipo de volta no painel fora. Todo o seu conteúdo e fluxo molhado automaticamente leva esse conteúdo e coloca isso em seu site com menos esforço em Ben, você tem um nível de negócio se você quiser seu site. Se você está chateado, tem mais do que você sabe um milhão de visitas ou você quer 10.000 itens CMS ou você quer no formulário de Madrid, enviar uma vez que você pode ter que verificar estes planos, dependendo de sites quintal requisitos. Tudo bem, então é assim que a diferenciação é entre o plano do site no plano da conta. Espero que tenham uma ideia básica. Mas para este curso, obviamente você pode começar completamente de graça sem restrições. Então, agora que sabemos disso, vamos em frente e montar um projeto de réptil onde Flo e começar. Então são vocês no próximo vídeo. 6. Configurando seu projeto de fluxo web: Tudo bem, pessoal. Então, neste vídeo, vamos configurar nosso projeto de fluxo. Certifique-se de que temos tudo o que precisamos antes de começar realmente a construir cada elemento dentro do fluxo web. Então, obviamente, você pode criar uma nova conta sobre o fluxo, e você vai ter dois projetos gratuitos com os quais você pode trabalhar. E uma vez que você tem esses 23 projetos, onde você pode fazer é você pode começar com o novo projeto. E eu vou escolher este espaço em branco quando você também tem um monte de modelos gratuitos e modelos de pagamento que você pode escolher. Mas vamos começar. É um grande espaço em branco, porque obviamente queremos começar do zero. Então eu vou seguir em frente e escolher em selecionar, e você pode escolher qualquer nome que você quiser. Um búfalo dá-te um nome muito fixe e peculiar. Vou ligar para isso, uh, uh, parte da escola. Vou ligar para este conselho para você. Claro que sim. Tudo bem. Apenas em nome aleatório. Ah, tudo bem. Lá vamos nós. Ok, então agora estamos lá dentro. Estamos cheios agora. Eles interface parece bastante intimidante e assustador. E isso é um monte de opções, mas vamos resolver. Olhe para este um por um enquanto progredimos através do curso, e espero que você tipo de entender cada elemento que fora dele. Mas, por enquanto, só queremos ir em frente e montar nosso projeto. Apenas certifique-se de que temos tudo, certo. Então, a primeira coisa a fazer é ir aqui no topo, à esquerda. Você tem o logotipo da arma, e eu vou em frente e escolher as configurações do projeto. Tudo bem, então nós vamos revisitar isso um pouco mais tarde no final do curso está bem, mas há apenas algumas coisas que queremos configurar. Então a primeira coisa, obviamente o nome do curso, este é o sub Dominion onde você pode hospedá-lo em fluxos web, sub-domínio livre. E, você sabe, apenas faça. Vai ser como uma área de encenação onde você pode apenas verificar como a perturbação. Olha, eu só vou remover essa aposta extra, porque vai ser mais fácil. Tudo bem. Hum, e podemos dizer curso de portfólio, hum, 01 ou algo assim. Hum, o próximo é. Você tem esses Farrakhan meu país, Israel. Coloque mais tarde. Qualquer coisa é que você quer escolher o seu fuso horário. Certifique-se de que é isso, hum e sim, é basicamente isso. A próxima coisa é, queremos ir para a queremos ir para aseção de fundos porque vamos usar uma fachada Agora vamos usar agora, há três maneiras de você ter telefones. seção de fundos porque vamos usar uma fachada Agora vamos usar agora, Você tem fundos do Google, você tem telefones personalizados e eu tenho telefones da Adobe. Se você tem uma assinatura adobe, você pode obviamente obter a chave token do FBI. Vai estar lá nas configurações da sua conta. Tudo o que puder vir aqui e descobrir como conseguir isso e colocar a chave A P I e você estiver nos telefones iniciais será isso em Buffalo. Em seguida, você pode fazer upload de arquivos de fonte personalizados. Você sabe qual. Você sabe, bacon upload TTF ot f d r perfis, e eles devem estar funcionando muito bem. O próximo está usando um telefone do Google. Agora, para este curso, estaremos usando um telefone do Google. É um telefonema muito bonito. Subida e tudo o que tem que fazer é apenas ir para o drop down. Você tem todos os telefones de regras disponíveis. Alberto é apenas procurar os 40 queremos algo chamado cheiro. Então, está bem. E essa é a diversão. Isso tem apenas três bilhões. Então, vamos escolher toda a árvore por enquanto. Hum, e você sabe o idioma no pulo. Se você não incluir isso ou não, eu vou simplesmente deixar isso. Só vou escolher aquele sem extensão latina. Seja qual for. E sapatos às quatro. Ok, então agora você pode ver que estes são os fundos que foram adicionados, e isso é muito bom. A próxima coisa é, queremos ir para o tribunal alfandegário. Agora, Veterano também lhe dá a habilidade de agir em algum tipo de corte personalizado. Se você quiser realmente personalizar alguns elementos, qual piso de cama não permite que você faça? Agora, isso é bastante para usuários avançados, então não usaremos nenhum tribunal personalizado em tudo. Mas a única coisa que eu vou notar corrigir aqui é que nas configurações avançadas, eu seria eu quero adicionar o carro idioma, então eu vou dizer e en para Inglês. Bem, isso é o que vai acontecer é quando alguém abrir seu site na região como a Alemanha ou qualquer outro país. Seu navegador vai identificar que este é um site em inglês, e ele vai perguntar se você deseja traduzi-lo do inglês para o respectivo idioma do país. E você quer que o Google forneça esse tipo de funcionalidade. Então você quer apenas verificar isso e nós escolheremos salvar as alterações, Tudo bem. E a próxima coisa a fazer é voltar para o nosso designer e designer é o nosso espaço de trabalho onde vamos projetar e construir o site, tudo bem. E o que vou fazer é ir a este painel de navegação, que é o navegador onde temos muitas camadas. O que eu vou fazer é eu vou escolher este elemento chama o corpo eo corpo é o enorme elemento pai que, que tipo fora, uma vez que tudo é uma vez que tudo está dentro de uma caixa e tudo está em um corpo recipiente é um pago em A maioria dos elementos, ou eu vou fazer é clicar no corpo e eu vou descer na seção telefônica e eu vou em frente e escolher a fonte que nós escolhemos, e isso vai ser enviado tudo bem, e é isso. Então, toda vez que carregamos, cada vez que inserimos um texto dentro da área da tela, a fonte será escolhida para enviar. Então não temos que mudar o telefone toda vez. Tudo bem, então isso é uma coisa que você quer fazer. Então agora é praticamente isso. No minuto seguinte, podemos finalmente ir em frente e começar a construir nosso primeiro componente e começaremos construindo a barra de navegação. Vejo vocês no próximo vídeo. 7. Construindo a barra de navegação: Certo, finalmente estamos prontos para começar a construir o primeiro componente, e vamos começar a criar com a barra de valete, a barra de navegação que temos aqui neste vídeo. Tudo bem, então isso é realmente saltar para a FTL e ver como esta coisa está disponível. Tudo bem, então, como você pode ver, a primeira coisa que temos é esta grande tela branca que é o corpo de todo o site. Então só rola para baixo até encontrarmos a seção de fundo e da seção de fundo, vou mudar isso de branco para preto. E não clique neste ícone de adição, que vai adicionar uma amostra global, que significa que sempre que eu aplicar o estudioso a um elemento, eu posso mudar a cor de todos os elementos que têm a mesma cor aplicada, certo? ? Vou em frente e clicar em criar. E agora cada elemento que eu adicionei tem uma cor preta vai mudar para o respeito da cor. Se eu mudar a cor da amostra global. Ok. Ótima. Agora, onde Flo só te dá algum tipo de elementos pré-definidos, certo? E você condena finitamente, usá-los como eles são, tudo o que você pode personalizá-lo ao seu gosto. Então, se eu clicar no ícone de mais, você pode ver que estes são todos os elementos. Aquele proprietário. E como eu lhe disse, temos esta seção. Temos um contentor e temos o bloco. Agora também temos coisas como bloco de link e botões e colunas e grande, que provavelmente vai dar uma olhada um pouco mais tarde. Mas, por enquanto, o que queremos é uma chamada de elemento como barra de navegação. Muito bem, temos aqui o bar de valete. Tudo bem. Agora, na seção esquerda, você também tem algum tipo de elementos pré-definidos, como barra adesiva aqui, sobre o conteúdo principal do lago chamada para ação coisas. Ave de couro. Para este curso infantil, não vamos usar nada disso porque queremos construir tudo do zero. Mas se você quiser, você pode definitivamente ir em frente e usar esses layouts personalizados. Tudo bem, então quando você descer e eu vou em frente e escolher este elemento Nabbout, e eu vou rastrear isso e eu vou deixar isso dentro, ok? Agora, você sempre quer fazer é prestar atenção. para esta navegação que temos à esquerda. Tudo bem, agora, se eu abrir isso, você vê, nós temos alguns itens. Tudo bem? Temos uma grande lista de itens, então deixe-me explicar. uma grande lista de itens, Explique como é o que está acontecendo agora. Bem, veja, aqui está o corpo, e aí dentro temos um elemento que as cores não tinham, mas dentro do valete. Mas temos algo chamado “contentor”. E dentro de um recipiente, temos três elementos. Temos a marca. Temos o menu de navegação, e você tem a parte inferior do menu. E dentro do menu do valete, temos três elementos, que é o elo do valete. Quero o valete Ling para valer Link três. E também temos um ícone de menu. Tudo bem, então onde Flo usa essa terminologia causa o pai e o filho, neste caso, o corpo é o pai, e a barra de valete é a criança. O contêiner é uma criança fora do nab. Nosso na barra de valete é um pai fora do contêiner. Agora, o recipiente tem três Crianças menu de navegação marca e muitos, mas à direita. O menu do valete é aparente. Isso tem três filhos. Tudo bem agora Há outra coisa que você poderia olhar para o menu de valete marca e muitos botões são todos irmãos porque eles são Crianças fora do recipiente e irmãos é realmente um termo que é usado quando você está construindo coisas fluxo web inteiro. Então, pai filho e Sibley, essas três coisas que você precisa ser atenção, dedo do pé. Então, como eu mencionei antes, a primeira coisa que queremos fazer é criar a seção direita que ocupa toda a direita fora da tela. E o que vemos aqui é que este bar de valete está tirando todo o trabalho da tela. Tudo bem, então o agora. Mas se você ver se eu clicar nele, você pode ver que ele está tirando todo o valor da tela. Então o que você quer fazer é que você pode brincar com este número que é basicamente define. Você sabe como um design específico ficará em um trabalho de tela específico. Então, se eu mudar isso para 14 40 você pode ver que tudo está no centro como nós discutimos , tudo bem, mas tudo menos a barra de valete, que está agindo como nossa seção, está tomando o O mundo inteiro. Se eu mudar isso para 1920 você pode ver que isso fica no centro, mas a seção está ocupando todo o valor. Vamos mudar para 38 40, que é a nossa resolução de quatro K. É assim que vai parecer e isto está no centro. Então você sempre quer manter isso no 14. 40 para que tenhamos uma boa representação visual de como ele combina com o nosso design e figo MMA. Então, porque nós o projetamos em 14 40 é justo manter sempre isso em 14 40 também . O problema é que temos este contentor como uma cela que tem um rapper, e isto está a ter uma semana de folga. 940 picaretas é e nós não queremos usar isso, porque se você ver, nós temos um trabalho máximo fora 1920 pixels, tudo bem. E temos uma separação 40 e 72. Então o que eu vou fazer é, na verdade, ir em frente e criar um elemento causou o bloqueio mortal agora, quando você brinca elementos, certifique-se de selecionar o elemento aparente para que o elemento filho que você está criando quedas como um filho fora do elemento pai. Então olhe, como no NAFTA, e eu vou pressionar o controle E que é um atalho ou comando e em um Mac para limpar a barra de pesquisa onde você pode procurar elementos. Ou você pode realmente simplesmente clicar no ícone de adição e procurar o trabalho elementar. Eu quero usar esses cortes afiados, por isso é muito mais fácil e muito mais rápido. Tão impressionado. Controle E. E eu vou escolher o bloco deles, querida. E nós temos esse impasse, e eu vou colocar esse bloco de morte lá dentro, ok? E eu vou pegar este elemento de marca. Vou colocar isso dentro do bloco mortal. Quero pegar o menu de navegação. Coloque isso dentro do bloco da morte e o botão do menu e coloque dentro do bloco da morte. Tudo bem, então certifique-se que eles são todos chillin, que você possa desmoroná-los para ver se está tudo dentro dos pais. Eu não pego o recipiente e apago. Certo, agora vamos dar uma olhada. Você pode ver que tudo está se movendo para a esquerda e para a direita. Eles estão se alongando. Tudo bem. Então, se eu mudar isso para 1920 você pode ver que eles estão tipo de tocar as bordas da tela porque nós não definimos esse máximo de grão. Tudo bem, então vamos em frente e fazer isso. Então o que vamos fazer é mandar isto de volta para o 14. 40 correcções, está bem? E eu vou escolher esse impasse que criamos. Você também pode clicar aqui na navegação inferior e a primeira imunidade vai dar uma aula. O que é exatamente uma aula? Tudo bem. Ah. Classe é um nome que é dado, e você pode realmente chamar qualquer elemento qualquer coisa que você quer. Mas o que acontece é quando você dá uma determinada classe a algo, você pode atribuir certas propriedades a ele, e essa classe será nomeada nessa classe será especial porque tem uma certa quantidade de propriedades. E o que tudo isso significa? Bem, na verdade, crie um, e nós meio que entendemos isso um por um. Ok, então o que eu vou fazer é chamar isso de rapper, ok? Pode chamar isso do que quiser, mas vou chamá-lo de Rapper por enquanto. Ok? E no trabalho, o que eu vou dizer é, eu vou dizer 100%. Ok. O que isso significa? Eu lhe digo, e também no valor máximo. Eu vou dizer 1920. Ótima. Agora o que está acontecendo aqui é que eu estou dizendo fluxo de trabalho que Ei, olha para este rapper. Tudo bem? Quero que este rapper ocupe 100% da largura. Tudo bem? 100% de desconto no molhado, fora do tamanho da tela. Mas eu quero que você restrinja a 1920 picaretas é o que significa que se eu for 12 40 pixels, tudo bem, ele satisfaz ambas as condições. O trabalho é 100% que é por isso que os elementos estão tocando as bordas da tela e o máximo com seu 9 20 O que significa que se eu ir para 38. 40 você pode ver que isso é meio restrito ou, você sabe, digamos que para 2000 para tornar mais fácil de entender. Tudo bem, você pode ver que isso está tocando a borda esquerda da tela, mas aqui, isso está confinado a 1920 pixels. Temos esta lacuna extra fora 80 picaretas é certo para responder a pergunta fora do redesenho em 14. 40. Mas como vai parecer em pontos de quebra menores. Usamos esta condição. Então, vamos dizer, tome 100% do molhado, mas restrito a 1920. Agora, eu sei o que você está pensando. Temos este espaço extra à esquerda e à direita, mesmo no 14. 40 pixels. Como é que conseguimos isso? É bem simples. Então vamos para o 14. 40 correções. Ok. E o que há com o seletor de rapper? Vou adicionar espaçamento à esquerda e à direita. Então, se eu selecionar este elemento, você pode ver que você pode realmente selecionado o elemento Você pode segurar o controle e clicar em um elemento se ele está dentro de um grupo e também segurar opção ou arte e apenas passar o mouse sobre para ver a distância. Então temos 72 pixels à esquerda, tudo bem, e 72 seleções à direita. Então o que vamos fazer é selecionar a barra Valete, que está agindo como uma seção, e vou dar uma aula. Carlos de Navarra. Tudo bem. E vou dar-lhe um estofamento interior. Então, o que? Enchendo isso? Ele meio que empurra elementos para dentro. Você sempre deseja dar preenchimento para o elemento pai para que ele empurre elementos para dentro. Então o planejamento vai ser 72 fotos sobre isso. Então você pode ver que se eu passar o mouse sobre, você pode ver essa seção verde, que é tipo fora do preenchimento, que é a distância entre o elemento esquerdo e direito. E também, eu poderia fazer a mesma coisa do lado direito e dizer 72. Então isso empurra isso também. Então vocês podem ver que temos esse espaçamento interno que queríamos. Então, como vai ficar em uma tela menor? Vamos dar uma olhada no 12. 46 está tudo bem. Você pode ver isso. Isso está se baseando em 72 escolhas. Nós também é respeitado em um tamanho de tela menor. Agora, se você for para 1920, como vai parecer? Tem um 1920 em 1920 também. Temos que 72 extras escolhem uma festa. Ok, se você for, digamos 2500. Muito bem, temos aquele preenchimento de 72 pixels à esquerda e à direita. Mas aqui, realmente, não importa porque nossa inteligência foi restrita a 1920 pixels. Agora você vê, nós temos um problema aqui onde os elementos estão meio fora para a esquerda, mas eles são você sabe que eles precisam estar no centro. Como é que fazemos isso? Muito simples. Então vamos eleger o rapper. Certo, por que temos que selecionar o rapper? Tudo bem, porque podemos selecionar o rapper só porque podemos definir isto como o centro. Então, se eu clicar neste botão, você pode dizer que o elemento central horizontalmente requer um trabalho fixo. Então nós realmente definimos um valor fixo fora 1920 pixel, que é o nosso máximo com então tudo depois de fazer é clicar neste botão, e isso vai centrar isso em toda a tela. Então, se eu disse isso a 2000 pixels, você pode ver que ele está no centro fora da tela, tudo bem, e isso é o que nós queremos. Então este botão pode ser aplicado em Lee quando definimos uma certa largura. Fantástico. Então vamos voltar e dizer isso para 1440. Ótima. Agora vamos em frente e personalizar esses links. Mas antes disso, vamos realmente selecionar essa navegação. Mas porque queremos tornar isso transparente porque agora é Você pode ver que é transparente. Esta barra de navegação está sendo transferida. Eu vou descer e aqui nas configurações de fundo, ele tem algum tipo de cor aleatória, na verdade. Vamos em frente e clicar neste botão Faça com que seja transparente para que não vejamos nada. Ok? E agora temos esses três elementos. Então o que eu quero fazer é o meu filho no 1º 1. Vou dar-lhe uma aula e chamar este link de valete. Este é um nome que eu estou dando a ele, ok? E agora você vai entender o significado do que uma classe encontra. Ok, então vamos em frente e realmente personalizar isso com nossas configurações. Então eles vêm aqui, você pode clicar em um dos elementos que temos, e você pode ver que temos um certo valor aqui. Alguém clique neste link botão do dedo do pé, e ah, eu meio que esqueci de instalar os telefones porque eu estava trabalhando no Mac Book Pro, Então eu vou de qualquer maneira fazer isso no próximo vídeo. Então, mas por enquanto, você pode ver que o tamanho da fonte é 16 e nós temos ah, altura de 1 50%. Tudo bem, então vamos fazer é eu vou em frente e mudar o tamanho da fonte para 16. Ok, a altura vai ser de 1 50% para garantir que você adicione o valor percentual, e então nós também vamos mudar a cor para branco. Mas tem uma capacidade de 70%, como você pode dizer aqui. Então eu vou clicar neste botão e então clicar nele para torná-lo branco. E eu também vou clicar no Plus para torná-lo uma amostra e, em seguida, clicar em Criar. E então vamos mudar o Alfa, que é oito, que também é chamado de capacidade para 70%. Então agora temos algo. Parece com isto. E, obviamente, isso é experiência. Temos que trabalhar, temos fotografia e você tem contato. Então faremos. É que eu quero clicar duas vezes sobre isso e apenas mudar isso para a experiência. Ok, ótimo. Agora você também pode ver que temos esse tipo de distância, que é 24 pixels no topo, e Tito pixel estudo 24 pixels na esquerda e direita, e 32 pixels no topo. Então eu vou adicionar o avistamento alguém venha até aqui. E como você pode ver, queremos definir isso para 32 no topo 32 na parte inferior, 24 na esquerda e 24 na direita. Ok, então agora se você pode ver que nós temos tipo de estrutura do jeito que realmente se parece com isso. Ok, ótimo. Agora nós também temos é esses dois elementos. O que fazemos conosco? É óbvio que também temos de os fazer ficar assim. Então o que eu posso fazer é você pode ver que nós damos a ele o nosso clássico é o elo do valete. Vou vendê-lo este link de valete e dar-lhe uma classe chamada Valete Link e você pode ver as classes existentes. Nós também temos as classes que nomeamos com sua imprensa enter. E isso vai aplicar isso. É a mesma coisa aqui. Ligação valete e fantástico. Vamos em frente e renomear isso para trabalhar para geografia, para trabalhar e fotografia. Ok. E depois vou continuar e duplicar isto, está bem? E isso vai ser contato com Greater agora. Como pode ver, contato parece diferente, certo? Então, se eu for em frente e mudar a cor disso para ser outra coisa. Tudo bem, então se você for para o fundo, cada uma é alguma cor de fundo que você considera que aplica esta outra cor também. Mas não é isso que queremos tanto. Se fizermos isso de duas maneiras, podemos criar uma nova classe. Tudo bem? Então eu posso realmente remover essa classe, e eu posso criar uma nova classe, mas isso vai levar muito tempo, certo? Vai levar muitos passos a mais. Então o que eu posso fazer é eu posso e você pode pressionar o controle Z, a propósito, você sabe, para você sabe, desfazer e refazer o controle. Por que o controle de refazer Z é dois abaixo? O que eu posso fazer é adicionar algo chamado É classe combo? Então, se eu clicar aqui, eu posso adicionar algo que tem uma nova classe de combinação. E o quê? Eu vou dizer isso. Vou chamar este botão, está bem? Qualquer nome, o que quiser. Pode chamá-lo de qualquer outra coisa. Então, quando eu vou clicar no fundo, o que vai acontecer é que eu vou descer para o fundo em torno de cores e vamos realmente escolher esta cor que temos esta cor roxa. Vou copiar a quadra de cores, está bem? E, um, um, um casal aqui, e eu vou fazer isso. Ok? E também, vou adicionar isto a uma amostra, e chama-se Blue aqui, mas que seja, deve estar tudo bem. Ok, agora, o que aconteceu aqui é que por causa desta classe de combinação, você pode ver que estes três da Narcóticos, afetaram apenas este fator Carter. E se virem a cor aqui, isto é laranja. E isto é azul. Porque esta classe de combinação tem apenas esta propriedade fora deste valor de cor extra que adicionamos. Então, se eu for a conveniência e provavelmente digamos que eu mude o tamanho estrangeiro, você pode ver que o tamanho da fonte muda para isso também, porque isso tem essa classe baseada chamada link knave. Tudo bem, eu vou em frente e colocar isso de volta no dedo 16, certo? E porque tem uma ligação base, está a mudar. Mas como adicionamos uma classe de combate, que é um efeito adicional, está afetando apenas o elemento que tem essa classe de combinação. Agora, a outra coisa que precisamos notar aqui é que isso está realmente em menino rxf um olhar para aqui. É em Boyd. Então o que eu posso fazer é aqui pelo botão. Posso mudar a fonte. Espere. Também para ficar entediado, certo? E isto vai ser branco puro. Vou mudar isso também para branco puro. Ok, então este é Element, na verdade, tem três novas propriedades são diferentes. Peso são cores diferentes em cores de fundo diferentes também. Então esse é o significado de um combo perto. Tudo bem. O próximo passo é ir em frente e adicionar em outro logotipo que temos aqui, e o que você pode fazer é você perdoar, ou os ativos que estão lá no ativo nos arquivos do projeto e você pode vir aqui e clicar no botão ativos, e você pode realmente importar todo o ativo. Então, vou fazer isso agora mesmo. Ok. Então, como podem ver, eu fui em frente e importei todas as imagens de todos os ativos que precisamos. Agora, o que vamos fazer é observar essa seção, certo? Então temos algo chamado como a marca, e a marca tem esse link como ligado, que significa que é um bloqueio de link certo. Como você pode ver, é um bloco. É um bloco de ligação. Então vai em frente e chamar essa marca. Ok? Agora, o que vamos fazer é ir em frente e selecionar este logotipo que temos, que é um SVG e foram arrastados isso, e eu quero deixar isso dentro da marca. Tudo bem? Deve estar dentro do marrom. Ok? Eu não sei. Chame este logótipo. Ok. Agora vamos desafiar a altura e a largura. Agora, isso aqui é 24 pixel stall. E aqui, você pode realmente ver que os valores que definem qual é 79 pixels com e 24 escolhas de estilo, que é exatamente o que precisamos. E isso é de qualquer maneira e svg, então não temos que nos preocupar muito com escala, então vamos deixar isso como está. Ótima. Agora, o problema é ele aqui é que tudo aqui está meio no centro, mas isso está alinhado com o topo, então apresse-se, então apresse-se, meio que no centro, Linus. Então o que podemos fazer é se você ver ou ouvir, temos uma margem máxima de 30 dedos. Eu posso realmente ir e adicionar uma margem de 30 dedos. Faça este elemento em particular. Agora, você terá cuidado sobre qual elemento você está adicionando, deslocando para escrever. Porque o que queremos fazer é, você sabe, adicioná-lo. Esse link bloqueia direito? Queremos adicionar ao bloco de links porque ele mesmo contém todo o Robin local. Vou adicionar uma margem no topo e chamá-lo de 32. Então, agora a marca, tudo bem e no logotipo estão dentro do logotipo está dentro da marca e da marca, O estudo duas fotos de distância do topo. E isso parece muito bem, você sabe, no centro. E parece muito bom. Então, isso é basicamente sobre como criamos essa barra de navegação. Se você mudar para um ponto de ruptura diferente, como 1920, você pode ver que ele meio que se expande, mas mantém a margem de 72 pixels que tínhamos mantido. E isso parece fantástico. Ótima. Então, no próximo vídeo, vamos em frente e realmente adicionar algumas interações sobre isso e talvez até fazer isso responsivo para tablets e peças de freio móveis. Então são vocês no próximo vídeo 8. Adição de interações à barra de navegação: Certo. Então, neste vídeo, o que vamos fazer é ir em frente e adicionar um pouco fora de interações divertidas sobre cada um desses elementos. Vamos lá fora um pouco mais brincalhão e animado. Então, como fazemos isso agora? São dois tipos de interações em Napa. Um deles são interações simples, e um são interações complexas. Se você criar interações complexas e animações, você provavelmente terá que ir para a interação, esfaquear e fazê-lo aqui, que faremos um pouco mais tarde. Mas, por enquanto, o que vamos criar é uma interação muito simples. Então não temos que ir para o degrau. Como estamos fazendo isso é usando classes e vamos ver como fazer isso. Vou em frente e selecionar o primeiro valete que temos, e vou descer a essa lista que tenho, e vou escolher uma faculdade estadual. O estado de pairar. Agora você tem quatro estados diferentes pairar, pressionado, focado e visitado ST Agora, Às vezes você gostaria de usar isso para caixas de entrada ou botões ou escada material. Mas neste caso, nós apenas nos preocupamos usar o mouse, clique em pairar. Quero dizer, se você pode ter o que vai acontecer, vai criar um combate mais, que significa que qualquer efeito que você criar nosso anúncio será afetado apenas nesta classe de combinação , certo? Assim como criamos uma classe de combinação para este botão de navegação, alguém descer e vamos fazer é nas configurações de cor. Eu estou realmente indo para limpar uma nova cor, estão em física, você sabe, como Harvard um pouco e provavelmente escolher uma cor agradável e talvez disse a capacidade para 100%. Agora isso parece uma cor brilhante muito agradável. E talvez você possa ter algo derramado no lado azul e eu vou em frente e criar uma amostra de cor, certo e corretamente pode criar. Fantástico. E agora o que eu vou fazer é eu vou voltar para o estado não para que nós tenhamos certeza que é padrão e nosso diretamente verificar se este trabalho o que podemos fazer é você pode clicar nesta garrafa de pré-visualização que tipo off comentários como nosso site foram realmente olhar . E se eu passar o mouse, você pode ver que a cor muda para a direita e eu também posso passar o mouse sobre isso. Mas como funciona para isso? Está funcionando porque esses três têm a mesma classe. Certo? E como ele vai por aqui? Realmente não funciona porque há uma classe vírgula. Isso é meio que substituí-lo. Ok, então certo. E a questão é, não, isto é uma luta de trabalho, mas podemos ter vontade de ter alguma flexibilização. Não queremos que mude imediatamente. Vamos ter uma serra. Pequena transição entre as cores. Então, como fazemos isso? Então eu vou selecionar isso. E no estado não, eu vou descer para a seção onde temos algo chamado Transições. E onde você é aqui que você pode adicionar flexibilização. Então o primeiro a fazer é eu vou selecionar a propriedade, que é dois, que é a cor da fonte. E o segundo é a duração. Agora, alguns. Eu geralmente prefiro um intervalo entre 304 100 milissegundos. Por enquanto, vou escolher 350. Você também pode para o tipo de atenuação. E você tem muitos tipos diferentes de atenuação. De preferência, prefiro aquele que diz que ele está fora do tribunal. Isso é um estilo. E eu gosto do que você pode definitivamente escolher o que você quiser, e você pode brincar com ele, e isso é praticamente tudo. Então, agora, se você ir e verificar isso, você pode ver que, você sabe, você pode ver a ligeira transição entre a cor antiga e a nova cor. Tudo bem, e isso é muito melhor. Ok, agora, o que você faz para este? Então o que podemos fazer é fazer algumas coisas que eu quero fazer é ir em frente e adicionar um pairar. E desta vez eu vou apenas para o fundo, e eu vou fazer isso um pouco escuro, certo? Só um pouco escuro, tudo bem. E então eu vou deixar assim. Vamos voltar para o estado e podemos adicionar uma nova transição. E aqui na transição, eu vou escolher a cor de fundo e definir isso para 350 milissegundos. E também, a flexibilização vai ser facilmente tribunal. Tudo bem, então agora vamos dar uma olhada. Tudo bem, você pode ver que parece muito bom. Fantástico. Então, na verdade, o que vamos fazer é ir em frente e tornar isso uma resposta para outros pontos de quebra tão estabelecidos mais skcape e retrato móvel. Então são vocês no próximo vídeo. 9. Tornando a barra de navegação: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e aprender como fazer essa barra de naff responsiva. Pode ser muito divertido porque a capacidade de resposta é um tópico muito importante sobre o conceito que você sabe quando você precisa aprender quando você está construindo um site, então é provável que seja como fazer isso. Agora temos três pontos de ruptura diferentes. Você tem tablet, você tem mais por paisagem e você tem móvel Portrait tablet pequeno primeiro. Agora o que vemos aqui é que temos este novo ícone de menu que está lá. Então, de onde está esse dinheiro que eu posso realmente vir? Se você realmente olhar para a navegação, nós temos a marca. Certo, temos o menu do Naff. Nunca recebi o botão do menu. Agora, no ponto de quebra da área de trabalho, tínhamos o menu do valete e o botão do menu não estava lá. Então, se você realmente olhar para o que aqui na configuração deslocada, você pode realmente ver que a tela está realmente definida ou não. Mas preciso de outro ponto de quebra do tablet. Podemos ver que o botão do menu, tudo bem, está na verdade no bloco. exibição no menu do valete está realmente escondida. Tudo bem, então é feliz que o búfalo tenha feito automaticamente. Agora, se você realmente quer ter certeza de que você quer ter os links de navegação no tablet também, como fazer isso? É bem simples. Se você selecionar a barra de valete e nós viemos aqui para o painel Elementos, que é o segundo topo, você pode ver que temos a opção de mostrar o ícone de menu para tablet e abaixo. O que eu vou fazer é eu vou dizer mostrar muitos ícone para paisagem por paisagem móvel e abaixo. Ok, o que significa que quando eu for para a paisagem móvel, nós temos o ícone do menu. Quando eu venho aqui fora do valete lambe tudo bem, ótimo. Agora você pode ver que há isso. Nós sentimos que isso é que há muito espaço ou aqui na área de trabalho. Eu estava bem, mas em um tablet, parece que, você sabe, parece estranho e você também pode ver que nós temos vários pontos de quebra aqui, certo? E quando eu digo ponto de ruptura, quero dizer, neste contexto, ponto de quebra para diferentes dispositivos tablet. Então nós temos o iPad Pro, que é 768 e então temos 808 34, então, você sabe, você sabe, 912 e você sabe assim por diante e assim por diante. Então vamos começar com o menor porque vai fazer sentido. Agora eu vou fazer é eu vou vir aqui e selecionar o NAB nosso e nós adicionamos 72 ou eu quero fazê-lo já. Isso é para 40? Ok, então parece muito melhor. Nós mudamos, os 40 estavam aqui. Mas quando você voltar aqui, você também pode. Continua a ser 72. Como é que isso funciona? Porque isso é o que um CSS folhas de estilo em cascata. O que está acontecendo aqui? Isso é alguma mudança que você faz em cascata para baixo no ponto de ruptura? Então, o que significa que o 72 vai ser aplicado com isto e isto. Mas agora, uma vez que fizemos uma mudança para tablet fora 40 este 40 vai ser transmissor para a paisagem , bem como, onde você pode ver que é 40 e não 72. E para retrato móvel, que é 40 que não era 72 antes. Então nós realmente temos esse controle onde podemos alterar as propriedades fora de um ponto de interrupção e não afetar os outros pontos de quebra. E isso é fantástico. E isso torna muito mais fácil projetar e construir coisas agora. Vamos para o ponto de ruptura da paisagem. Mas agora, se você realmente ver que nós temos o design para o celular também. Agora, o retrato móvel e a paisagem móvel se comportam da mesma maneira. Então, podemos realmente usar as mesmas configurações para retrato móvel. Certo? Então, se você ver ou ouvir, eu fui em frente e mudar a distância fora. Os elementos devem ser 16 picaretas está à esquerda e 16. Eu sou bonita para tudo bem. Na verdade, isso precisa ser 20. Isso precisa ser 20 também. Por isso, vou certificar-me de que tenho os números certos, está bem? E no topo, você tem 24 que ele tinha também no topo do carro 24. Podemos ver que o topo aqui é 24 picaretas é a nossa margem. Então eu vou definir isso. Isso é dois de 24? Está bem, parece bom. E no fundo. Também no fundo. Você pode deixar como está. então Eentãoo que podemos fazer aqui é por tantos, mas eu ia chamar isso de botão de menu. Certo, já que já temos esse pixel 2020 à esquerda, o que quero fazer é maravilhoso o suficiente, mas vou removê-lo do lado esquerdo, do lado direito. Então, a maneira como vamos criar espaçamento de 20 pixels é adicionando preenchimento de 20 pixels ao botão de menu e também 20 aqui e 24 na parte superior e 24 na parte inferior. Tudo bem, então agora isso parece muito longe. Agora, a próxima coisa aqui é que nós temos realmente um ícone diferente aqui, tudo bem, e aqui nós temos um ícone diferente. Agora, este é o padrão. Eu conduzo presentes de fluxo de ar e podemos chamar este ícone de menu, e você pode realmente ir em frente e brincar com isso adicionando suas próprias configurações personalizadas . Então, se eu for, posso mudar a cor para ser branca. E o que vai acontecer é que vai mudá-lo. O branco. Agora, a próxima coisa é, como você realmente vê o item do menu? Se você vai para uma visualização de destino, você pode realmente clicar sobre ele e isso vai abrir este tipo fora A Você sabe, muitos onde você pode realmente passar e tocar em cada um dos links. É aqui que estão os nossos links de navegação. Este é o menu do Naff , mas por enquanto, o que vou fazer é substituir o ícone que temos. Então eu vou importar este ícone de menu que eu tenho dos ativos para que você possa realmente ver que eu tenho o ícone aqui, então eu não quero ir para o Navegador, na verdade, e nós vamos abrir este botão de menu agora . Este é o botão de menu que temos. Eu vou arrastar isso e colocar isso dentro de tantos, mas eu posso realmente ir em frente e deletar o outro porque não precisamos dele. Está bem? E agora isso está em um grande e isso parece muito bom. Tudo bem. Se você olhar para mais por paisagem, isso é praticamente como ele se parece no design. E quando clicamos nele, ele abre este menu. Fantástico. Agora, obviamente, este menu também precisa de algum trabalho, então vamos consertar isso. Então vamos para o cenário móvel em. Você pode realmente alternar que, escolhendo esta seleção no botão de menu, e você pode escolher configurações de barra naff e você pode escolher menu aberto. E agora você tem isso. E agora qualquer alteração que você fizer a isso, é meio que vai afetar o estilo visual. Então, a primeira coisa a fazer é eu quero fazer este botão de menu e o fundo. Vou mudar isso para ser preto, certo? Esse é o número um. O próximo é o link de navegação são realmente transparentes. Mas o menu do valete é aquele que tem algum tipo de cores. Primeiro de tudo, vou dar uma aula a isto e chamar este menu de naff, está bem? E eu vou mudar a cor. Esta é uma das cores que temos no arquivo da invenção, que é esta. uma das cores que temos no arquivo da invenção, Tudo bem. O tipo de uma cor roxa escura. Só vou copiar esse código de cor. Está bem. E eu vou voltar aqui e apenas baseado nisso, e então eu vou ir em frente e adicionar isso à amostra de cores, e eu vou chamar este nível um. Tudo bem. Isto é isto, isto é porque estamos a chamar este nível um, está bem? E talvez o que podemos fazer é para o menu de valete para 30 para o link do valete. O que posso fazer é adicionar uma espécie de borda inferior. Então eu vou clicar na seção de borda e clicar neste botão, que vai adicionar uma borda inferior. E vou dar uma palavra a um, está bem? E que eu vou mudar a cor de preto para uma espécie de fora. Ah, você sabe, como uma luz. Ou vamos ser editora actriz branca. E é a opacidade para, tipo, tipo, 12% ou algo assim. Sim, parece muito melhor. E, ah, isso é praticamente o que vai parecer e o contato. Mas vai ser uma palavra completa, então isso parece ótimo. Então se você abrir o submarino, isso é o que nós temos. Parece bom. E podemos fechar isto. Tudo bem, vamos ver o celular. Parece fantástico. Ótima. Agora que outra coisa que você pode fazer agora, você também pode optar por abrir o menu como uma lista suspensa ou sobrescrever ou sobre a esquerda Se você escolher sobre. Certo, Onda, abrimos isso. Você pode ver que vem da direita lá um monte de maneiras diferentes que você pode manter isso onde eu prefiro escolher um drop down. E se você estiver olhando para outro link, você pode brincar com a flexibilização, certo? Alguns recursos ou funcionalidades. Então, aqui. Mas vamos manter isto simples. Então, se você verificar nosso visual de paisagem, as coisas parecem muito bem. E sim, isso parece muito bom. Tudo bem, ótimo. Então agora a única coisa que deixamos o estúdio é tipo de adicionar links para cada um desses, porque de qualquer maneira, esses são links. Como podemos estar? Acha que vamos entender essa opção de configurações de link que temos aqui. Então, como vocês no próximo vídeo 10. Adição de links: Certo, então vai haver um vídeo muito curto porque eles vão entender rapidamente como adicionar links. Agora, quando você clica em um elemento de link e como você sabe se algo é link ou não é olhando para este ícone de link. Se tem algo assim, significa que é um elemento de ligação. Você pode aplicar propriedades a ele. Então você pode clicar neste ícone de engrenagem realmente tem, tipo, seis propriedades. Tudo o que você, você tem, hum, você sabe, você pode conferir na configuração de elementos que se estende por aqui. Então, um par de coisas é, obviamente, cada elemento pode ter um link para um site externo . E você pode clicar na caixa de seleção se quiser abri-lo com um novo toque. Tudo bem, então você tem uma página. Então, se o seu site tem várias páginas ou você pode fazer é você pode você pode tipo de ligá-lo, fazer isso pago. Então, neste caso, não temos várias páginas. Então o que vou fazer é deixar isto como está. Vamos usar o próximo, que é uma seção, mas chegando ao discurso onde podemos realmente fazê-lo. Se você selecionar este logotipo e podemos escolher o elemento marca, direita, se você selecionar o elemento marca, podemos realmente ir para a página e na página. Você pode escolher a página inicial. Então, qualquer um que clique no logotipo do Robin vai cair na página inicial , e nós podemos ter certeza de tê-lo apenas na parte superior. Não vamos abri-lo em uma nova aba voltando. Então aqui temos algo que é uma seção de página. Isso é algo que vamos implementar um pouco mais tarde. Mas basicamente o que vai acontecer é quando eu clicar na seção de experiência, é tipo fora da página vai rolar para a seção de experiência fora do site para que possamos realmente definir isso. Vai ser muito fixe. A próxima é se você quiser alguém para resolver, hum, meio hum, . Então, quando você clicar neste botão, ele vai abrir o cliente de e-mail fora dessa pessoa em particular, e você pode ter ah, você pode. Você pode inserir sua imunidade e também, você sabe, no assunto prefixo, se você quiser. Em seguida é um número de telefone, como você pode ver links estrangeiros links telefônicos, apenas dispositivos de trabalho que podem fazer chamada telefônica. Então isso é algo que você pode fazer apenas em um ponto de interrupção móvel. E o último é o anexo, que significa que você pode anexar qualquer imagem que quiser no painel de ativos, e quando você clicar nele, ela abrirá essa imagem. Você sabe, ou em uma nova guia se você clicar no botão ou ele vai abrir seu que onde América está certa. Então isso é realmente o que há sobre links de navegação? A coisa deve fazê-lo. Qualquer item de link vai ter essas opções ou se usar um bloco de link, ele vai ter essas opções, então é praticamente isso. E na próxima semana, vamos saltar para a seção do aquecedor e construir a seção do herói. Então eu vou ver vocês no próximo vídeo 11. Construindo a seção de heróis: Tudo bem, pessoal. Então, neste vídeo, vamos construir a seção de heróis, que é esta seção. E antes de fazermos isso, nós sempre entendemos como os elementos são estrutura e a forma como eles são construídos. Então o que vamos fazer é ver quantos elementos temos. Você é tão pequena imagem à esquerda. Temos de elementos de texto e depois temos esta decorações de borda de fundo ou algo assim. Certo? Então, como é que nós construtores? Então eu criei esse tipo de uma estrutura de arame modelo de caixa simples onde podemos entender como ele funciona. Vamos começar criando uma seção que é o Partido Laranja, certo? Vou criar uma grande seção e aí dentro vou criar um rapper. Como você pode ver aqui, esta é a nossa cor wrapper ali à esquerda, nós temos uma imagem, e à direita, nós vamos criar um bloco de que vai segurar fazer os próximos elementos. Então é assim que você não pode querer a estrutura dos dedos, tudo e muitos componentes. Agora podemos ver que este texto está sobrepondo a imagem que é bom. Mas isso é apenas para explicar como estruturar e quais componentes usar. E como é que ele realmente parece lá atrás? É certo. E a outra coisa de nota escrita aqui é que a altura da imagem vai ter Ah, altura fora 45 v hetch na imagem vai ser 55 www. Tudo bem, então somos um pouco malvados. Então vamos pular no chão molhado e ver como tudo isso funciona. Tudo bem, então aqui, quero dizer rep baixo e o que fazer de novo. Vou começar criando uma seção e certifique-se de selecionar o corpo porque a seção precisa ser uma criança do corpo. Eu sou uma imprensa controlada comer e procurar por seção. E esse é o elemento que éramos. Então nós temos um elemento de seção. Vou largar essa visão. E a primeira coisa que você sempre quis foi dar uma aula. Vou chamar isto de calor ou secção. Ok, isso é um Agora o que queremos fazer é adicionar um rapper, então eu vou criar outro bloco div, ok? E este vai ser o nosso invólucro. Já temos uma aula que diz “Rapper “, então podemos acrescentar isso. Já temos uma aula que diz “Rapper “, então podemos acrescentar isso E se você ver ou ouvir isso, há praticamente nada à esquerda e você sabe, o imposto ou aqui tem gastos fora 40 pixels no lado direito. Então vamos fazer é eu vou para a seção porque se você olhar para o valete Mas nós adicionamos isso em uma margem no Nabaa, que acessam a seção nós adicionamos 72 porque pixels à esquerda e 72 pixels à direita . Eu me pergunto a mesma coisa para esta seção aquecedor é, mas então deixe-me ir e pegar essa seção aqui e para a seção herói, eu vou adicionar um preenchimento fora 40 pixels à direita. Tudo bem, é isso. Apenas 40 picaretas estão à direita. Agora. A razão pela qual atualmente qualquer coisa é porque no momento em que somos propriedades, o tipo de colapso porque não há conteúdo dentro dela, certo? Então, vamos realmente adicionar algum conteúdo. Então nós adicionamos a seção que adicionamos o rapper, e agora temos que adicionar esses dois elementos, certo? Então, idealmente você gostaria de adicionar um bloqueio para isso e um impasse para isso, certo? Mas antes de fazermos isso, vamos fazer algo novo. E algo diferente que uma pessoa vai fazer é ir em frente e selecionar o rapper que temos , ok? E eu vou adicionar um combo perto. Tudo bem. E por que estou ouvindo essa aula de vírgula? Permita-me explicar. Então eu sou apenas tipo na grade, certo? O que agora significa que qualquer mudança que eu faça efeito, apenas esta combinação mais e tudo o resto permanecem iguais. O que eu vou fazer é cada olhar, vir até aqui para as propriedades de exibição, e nós temos seis propriedades de exibição, certo? E nós estávamos indo para entender o que estes +21 por um. Mas por agora eu vou fazer é eu vou clicar no terceiro 1 que diz Bom permite que você coloque itens dele em linhas e colunas. Vou clicar sobre isso animado. Você pode ver que temos essa estrutura de grade que temos. Ok. E nós vamos fazer é eu vou escolher e personalizar as grades de colunas de harmonia e linhas. Eu quero, obviamente, eu preciso apenas de um dro, então eu vou deletar aqui apenas pairando por aqui e você pode acreditar. E precisamos de colunas, o que é bom. É disso que precisamos. Tudo bem, ótimo. Alguém vá em frente e clique em. Feito. Então agora temos uma espécie de uma grande camada, e tudo o que temos a fazer agora é elementos de entrada. Tudo bem, então vamos começar criando um bloqueio para a imagem e um impasse para o texto. Ok, então eu vou pressionar o controle E, e eu vou trazer um elemento que causou o bloqueio, ok? E o que realmente acontece se você olhar para a navegação, nós temos o calor ou seção, e então nós temos o rapper, que agora está na forma de uma grade, que antes era um bloco de pombas. E agora dentro disso temos este bloco. Vou duplicar isto pressionando o controle, digamos país. Vou duplicar isto pressionando o controle, E o que isso vai fazer é isso vai para uma segunda cela porque este é o segundo filho. E o 1º 1 vai ocupar o primeiro porque na primeira viagem, eu vou salvar o 1º 1 e eu vou adicionar uma classe, e eu vou chamar este herói imagem rapper ok, bem, bem, nós poderíamos apenas chamar esta caixa de imagem herói. Acho que seria um nome melhor. Ok. E para o 2º 1, vou deixar assim e muita aula mais tarde, e eu vou te dizer o porquê. Então vamos começar com esta caixa de imagem de herói. Agora que criamos essa caixa de imagem do aquecedor, o que vou fazer é pegar a imagem do herói, que é aqui, certo? E eu vou selecionar isso, e eu vou ir em frente e deixar isso lá dentro. Agora, o problema é que não vai cair exatamente no elemento que queremos. Então a melhor maneira de ir é realmente ir aqui para a navegação em. Largue isso ali. Ok. Agora, ele ainda não andou rapidamente muito bem. Então só nos certificamos de que fizemos da maneira certa. Então o que eu vou fazer é selecionar esta imagem e colocar esta imagem dentro desta imagem de herói para bloquear bem ali. Vá agora. Esta imagem é muito grande e enorme, certo? Então, o que você vai fazer? Um estranho é a primeira coisa é clicar no ícone de engrenagem e eu vou em frente e não nesta imagem. Diz que a imagem é H I D p. Eu vou chutar sobre isso. Certo, e nada muda. E eu vou explicar o que isso h eu v p I significa no próximo vídeo. Então você tem contexto. Mas, por enquanto, não vamos fazer isso. Tudo bem, e isso é ótimo. E agora vamos ter esse impasse, e eu não vou dar uma classe ainda. Eu estou indo para ir. E eu não fiz elementos de texto. Tudo bem, então um vai ser este título, e o outro vai ser este. Então, temos alguns próximos elementos. Se você olhar para o painel de elementos na tipografia, temos parágrafo de cabeçalho, link de texto, bloco de texto, aspas de bloco e rich text. Então, neste caso, vamos usar e 11 título de qualidade. Tudo bem, vou arrastar isso e largar essa visão. E por que temos que usar um título? Então a coisa com sites é que a forma como eles são classificados no Google é através do fato que se seu site tem palavras que correspondem à pesquisa de descrição feita pelo usuário navega no Google, então você está chateado vai ficar ranqueado. Então, como você define essas palavras-chave em um site? E isso é usando este elemento de qualidade rubrica imposto. Então eu clico neste ícone de engrenagem. Tenho seis etiquetas de cabeçalho de ajuda diferentes, e estas devem ser colocadas com base no nível fora da hierarquia. Neste caso, temos Robin Williams, um designer de produtos com sede na Itália. Isso é bastante grande, e esta é a informação mais importante no site. Certo, isso é o mais importante em termos de hierarquia. Então isso vai ser cada um. Ok, então o que eu vou fazer é ir em frente e chamar este H1, certo? Hum, ou podemos apenas chamá-lo Você sabe, título e sublinhado. Hum, e nós temos dado alguns valores, como 76 picaretas é então eu vou dizer, indo sob a escola 76 pixels. Tudo bem. E vamos em frente e realmente adicionar esses valores. Então nós temos Oh, eu esqueci de instalar os telefones. Vou fazer isso de novo. Então temos sen bowled 76 100% altura da linha. Certo, então vamos fazer isso. Então, também temos essa margem no topo. Eu realmente vou remover isso e disse que 20 no topo na parte inferior porque nós não precisamos disso. Hum, 76. Tudo bem, altura vai ser 100% cor vai ser branco. Ok? E, uh, eu acho que eu vou definir este 210%. Tudo bem, isso deve ficar bem. E parece bom. Todas as notícias vão copiar isto. Então eu vou dizer que eu sou Robin Williams, ele designer de produtos com sede na Itália. Agora, isso parece pronto, diferente do que temos. Então a primeira coisa que você faz é definir isso para 14 40 pixels. Então agora você pode realmente ver isso, e então nós vamos fazer é eu vou selecionar, você sabe, o elemento de grade, que é o rapper neste caso. E se eu clicar neste ícone, podemos editar o grande. O que vamos fazer é antes de tudo, eu vou remover a lacuna da coluna e disse que zero porque queremos que eles sejam cortados, tocando um ao outro. E isso parece muito bom. Agora o que não acontece aqui é que esta imagem é realmente bastante longa. Tudo bem? Isso é, tipo, muito grande se você olhar para ele, é ele está rastejando muito. Certo? Mas aqui, vai restringi-la à altura da escotilha 45 V. Ok. E isso é algo que podemos definir, certo, porque nós não queremos que ele seja tão grande, e você pode ter uma imagem que é maior do que isso, ou menor que seja. E como você vai fazer isso funcionar? Certo. Então o que fazemos é eu vou selecionar o primeiro de tudo, vamos dar uma aula a isso, e eu vou chamar a imagem de imagem de herói, ok? E eu vou escolher o elemento pai, que é a caixa de imagem do herói. E eu vou dizer que eu quero que você tome uma altura acima de 45. Nós chocamos. Tudo bem. Agora, nós ainda podemos ver que praticamente nada aconteceu, e isso não está fazendo nenhuma diferença. Então, assim, a primeira coisa a fazer é promover queda contra isso de volta para 14. 40. Tudo bem. E então o que eu vou fazer é já que isso está se sobrepondo. O que posso fazer é selecionar o bloco de desenvolvimento. Ok? Que é aqui e no bloco da morte. Eu vou realmente agora, dar-lhe uma aula e chamar este bloco de texto herói. Ok? E eu vou dar uma margem negativa. O desligamento cirúrgico sobrepõe-se a este. E quanto temos que dar? Acho que vou dar em algum lugar em torno de 64 pixels. Certo. Então, vou dizer margem negativa. 64 picaretas é tão agora que é uma espécie de sobreposição. Ela ainda não está totalmente sobreposta à imagem, porque a imagem não está ocupando toda a largura. Tudo bem, então se você olhar para o bloco de imagem de herói, você pode ver que isso é o quanto ele está ocupando, mas a imagem não está realmente ocupando tanto. Certo? Então vamos fazer é eu vou realmente apagar a imagem do herói. Vamos acreditar nisso. E eu estou ouvindo a caixa de imagem de herói. E ao invés de adicionar um elemento de imagem, o que eu vou fazer é eu vou descer para os fundos e ingrediente de imagem seção aqui, e eu vou clicar no mais e eu vou escolher escolher imagem e então eu vou e escolher o meu calor ou imagem. Então agora isso funciona como um pano de fundo. Agora, a próxima coisa que vai fazer é eu vou colocar isso para cobrir, e eu vou colocar na Tailândia nenhuma. E também a posição de mais para o centro. Então agora o que isso vai fazer é ir em frente e colocar a imagem no centro. Agora, você pode obviamente brincar com esses valores para ver o que você quer, mas isso está parecendo muito bom agora. Ainda não parece perfeito. Parece bem grande e grande aqui. Mas, sabe, vamos consertar isso devagar. A próxima coisa a fazer é adicionar nesta imagem. Desculpe. Vamos adicionar neste elemento de texto. Então agora eu vou ir em frente e copiar isso, então eu vou criar este parágrafo 18 pixels, uma cópia. Isso E agora, Agora isso importante, esta informação pode não ser muito importante porque é baixo importante em termos de hierarquia, você sabe, se você olhar para a página inteira então eu vou usar um elemento chamado como os parágrafos e controle reprimido profundo e procurar um parágrafo. Ok, e eu vou clicar duas vezes e colar isso à vista. E vamos chamar este gráfico PATA de sublinhar 18 pixels. Porque este é o nosso parágrafo 18 pixels. Se você olhar para a configuração, temos 18 regulares e 1 50%. Ok, então eu vou e definir a fonte da cor para branco. Certo, comer palhetas é e 50%. Certo, então é assim que vai parecer. E também temos algum espaçamento, você sabe, abaixo do caminho profundo. Então isso é em torno de pixels de Toledo. Então o que fazemos é selecionar este título de herói e na margem inferior. Eu vou dizer 32 misturadores e isso parece muito bom. Agora, as coisas ainda não estão perfeitas do jeito que deveriam ser. Então o que vamos fazer agora é eu vou realmente ir e selecionar, na verdade, deixe-me colocar isso direito aqui, e eu vou adicionar outra linha, e eu vou dizer que esta seção de couro é 100 Veatch. Ok, então o que isso significa mesmo? Vamos dar uma olhada. Vou a estas secções, está bem? E na seção de heróis, eu vou dizer, pegue uma altura acima de 100. Nós engatamos. Ok, então agora se você pode ver que eu sou capaz de rolar porque ele está ocupando 100 fora da altura da porta de visão . Onde é que isso significa? Segure em. Deixe-me explicar isso um por um. Agora, a única coisa que aconteceu foi que a altura mudou. Mas, você sabe, isso ainda está no topo, você sabe , não está no centro. Então, o que posso fazer é selecionar o rapper . E o que eu vou fazer agora é não quero fazer nenhuma mudança neste rapper de grade de heróis. Então eu vou clicar sobre isso que diz, herdar três seletores, e eu vou escolher o nível mais baixo um, então eu vou clicar apenas no rapper. Então agora qualquer mudança Emmick está afetando apenas o rapper. E aqui na altura, eu vou ver por que você não toma 100% certo? 100% de desconto o pai e 100% do pai é 100 v escotilha. Agora, a razão pela qual eu não estou dizendo 100 sebes V aqui é porque nós vamos usar este rapper várias vezes e eu não quero que tudo seja 100. A cerca, tudo bem. Só neste caso, eu queria ser 100 v hedge, então eu estou realmente aplicá-lo. Reparação do dedo do pé e elemento, que é esta seção. Ok, então aqui vou eu dizer 100%. E agora isso vai para você pode ver que o rapper também está ocupando, você sabe, todo o espaço. Mas se você ver que as coisas não estão se alinhando corretamente novamente, precisamos que elas estejam no centro. Certo? Então por que eles não estão no centro? Isso é porque somos totalmente automatizados, empurra tudo para o lado superior e superior esquerdo. E pensar que teríamos que fazer algumas mudanças manualmente. Então o primeiro a fazer é aqui neste impasse, que estamos chamando de calor ou bloco extra. Quando você cria um ótimo quando você cria um ótimo, você pode realmente definir como os elementos filho serão vistos. Então essa é uma ótima criança, certo? Então eu vou dizer um centro de linha para isso e nós fazemos a mesma coisa aqui, que é herói Image Block é uma grande criança, certo, porque é uma criança fora do radar, ok? E eu quero dizer “Centro da Aliança”. Então agora isso é praticamente o que parece. Tudo bem, mas se você olhar para ele, realmente não é, você sabe, exatamente como este. Então eu posso fazer é aqui para esta caixa de imagem herói, em vez de definir uma altura de 45 que eu posso mudá-lo para algo maior. Então algo como 65 anos tudo bem, em que parece muito melhor. Tudo bem. E agora esse valor pode ser alterado. Então, a partir de 45 você pode fazer 65 anos, dependendo de como você quer que seja. Agora, deixe-me explicar o que realmente está acontecendo. Se eu ir e clicar neste projeto publicado e eu posso escolher publicado para selecionar os domínios, eu posso clicar no site real e ver como isso parece. Tudo bem, então agora é assim que parece certo. E temos esta seção ocupando 100% da altura da porta de visão. E no meu caso, altura da minha porta de visualização é uma vez que estou em uma tela do Windows, é 10 IGP. Mas como você verifica se há outros pontos de quebra, certo? Então você O que você pode fazer é clicar com o botão direito do mouse. E ela foi inspecionada, certo? E eu ia conseguir esse tipo de coisa. E o que esconder aqui é, como eu aumentar a altura, você pode ver que a altura fora isso também está mudando porque nós definimos uma propriedade dizendo 100 v hedge, que significa que ele está ficando de 100% fora do quadro de visão Altura. Tudo bem? E vemos que temos tanto espaço e espaço no topo. Então, por que isso está acontecendo? Isso porque, primeiro lugar, eu acho que a altura da imagem do herói é muito pequena. Então talvez pudéssemos fazer esta cobertura de sete TV e também a seção em vez de dizer 100 que atingimos . Isso é realmente usar que até 90 v hedge, certo? E isso o traz um pouco mais perto de como ele parece em nosso design. Acho que temos que fazer muito mais do que dizer 70 nós cabeça, eu vou para 85 nós engatamos e que isso parece um pouco melhor. Talvez eu ache que uma cobertura de TV seria um bom trabalho, então eu vou em frente e definir esta altura para ser uma escotilha TV. Ok, isso parece bom. E isso parece muito mais perto. Faça o que temos. Podemos realmente clicar em Publicar os domínios selecionados novamente. Isso vai publicá-lo no nosso subdomínio, que é de graça. E eu posso ir em frente e apenas recarregar isso e você pode ver que parece um pouco melhor. Como eu diria, muito melhor se ele dissesse isso aos 14. 40 correções. Hum e, você sabe, vamos ajustar isso de volta para 25%. É assim que vai parecer. Tudo bem? 14 e 40 fotos. Isto está parecendo muito bom. Tudo bem, tudo bem. Agora, a última coisa que queremos fazer é adicionar este, você sabe, elemento de fundo. Tudo bem? E eu vou adicionar um par de propriedades a isso aqui também. Então, você sabe, apenas crie uma cópia, ok? E eu vou chamar isso de Hito BG Oh, nós temos que duplicar um herói de elite BG e perguntamos quem é para a altura. Tudo bem, eu vou dizer 100 V escotilha. Certo, talvez mudemos isso um pouco mais tarde, mas não temos certeza. E para a imagem que valha a pena armada para o mundo, eu vou dizer 65%. Ok, que é 65 VW e vamos remover a altura da seção. Certo, isso é o que vamos fazer. Então vamos em frente e fazer isso. Então, agora isso em si é um elemento. É um bloco de bloqueio porque é apenas uma forma aleatória. Então o que vamos fazer é eu ir em frente e ter certeza que estamos dentro da seção de heróis , certo? E vou pressionar o controle de qualquer um. Adam comeu o bloco. Agora este impasse, vou chamá-lo de Keitel BG Ok. E vou adicionar esta cor que temos. Tudo bem? Nós já adicionamos essa cor. Então eu vou para o aquecedor BG e no Grady em configurações eu vou escolher estudioso. E aqui nas configurações de cores escolheria este, que é o nosso nível um. E porque isso parece muito bom. Ótima. Agora, como vamos fazer isso caber no topo, certo? Como é que fazemos isso agora? Aqui nós definimos 19 900 por 900 que, que parece ok no design. Mas poderia, mas nós realmente queríamos seguir essas propriedades, que são 100 v. Hatch e 65 VW. Então vou começar por ver o Tito. Por que você não toma 100% da altura da porta de visão e eu vou dizer 100 V escotilha, ok? E agora que vai ocupar 100% da altura da porta de vista e para o Mas eu vou dizer 65 nós w direita, E isso é 65%. Agora, isso realmente precisa ir crescer no topo. Agora, aqui está uma nova funcionalidade que vamos entender. Vamos entender algo sobre absoluto e relativo. Agora, quando temos elementos que estão se sobrepondo uns aos outros, como você pode ver ou ouvir, isso está no topo. Isto está na parte inferior, mas depois temos o texto e a imagem no topo. Mas você sabe, este elemento está no fundo. Então nós temos camadas, camadas dificilmente definidas em sites. Então nós vamos fazer vai gostar deste herói, B G, B G, e eu vou descer aqui para se posicionar, ok? E eu vou escolher a posição. Absoluto. Ok, agora, nada aconteceu, mas se eu realmente pairar sobre ele. Você pode ver que há algum texto que diz posições absolutas um elemento relativo à posição mais próxima pai, fazer o corpo se nenhum pai for selecionado, Então, o que isso tudo significa? Então, se eu escolher uma dessas predefinições e eu vou dizer este lugar, aquele que é o topo, certo, ele vai e se pendurar no lado superior direito de todo o site, que é todo o corpo em Neste caso. OK, mas o problema é, você pode ver que está se sobrepondo a tudo. Então o que eu vou fazer é aqui temos algo chamado índice Z, que tipo de define um número, e esse número é o nível fora da hierarquia estão se sobrepondo ou espaço da doença. E vamos em frente e apenas disse isso para menos um. Ok, então agora que eu tenho senador menos um, está por trás de tudo o resto porque tudo começa naquele nível zero. Eu estou indo um nível para trás e definindo para menos um. Ok, ótimo. Agora, mais uma coisa que eu gostaria de explicar é sobre aqui. A posição é definida como absoluta e é relativa ao corpo, o que significa que ele está sendo posicionado na parte superior direita do corpo. Certo, agora vamos ver o que acontece quando eu mudar. Faz outra coisa. O que? Quero dizer, o mesmo é que aqui. Se eu vir para a seção herói, que é o pai, e se eu ir em frente e disse que a posição fora deste para relativo, você pode ver que esta caixa Tudo bem, que é este herói B g é uma posição absoluta que é posicionado na parte superior direita da seção de heróis. Ok, essa é a diferença entre relativo e absoluto, e você quer ir em frente. E se eu mudar isso para o canto superior esquerdo, ele vai para o canto superior esquerdo da seção de heróis, porque agora ele é relativo à seção de heróis. Então, se eu quiser remover isso e torná-lo padrão, o que eu posso fazer é voltar para a seção de heróis, que é o pai, e em repará-lo, eu vou definir esse padrão de guardião estático. Então, agora. Então agora este elemento, que é o herói BG BG é relativo ao corpo e queremos que seja para o canto superior direito . Então eu vou dizer que no canto superior direito. E agora vamos em frente e rapidamente dar a isso uma publicação e ver como isso parece. Certo, vamos fechar isso e atualizar. Tudo bem. Acabei de recarregar. E é assim que se parece. Isto está parecendo muito bom. Agora, você também pode ver aqui que você conhece o espaço aqui. É bem grande. Brincar com este valores um pouco mais então aqui dissemos, a altura de 100 v hedge ou eu posso fazer é provavelmente disse isso para 100 10 v h. tudo bem, talvez isso parece bom. Vamos dar uma chance. Vamos ver como isso parece. Podemos selecionar a imagem de fundo que temos. Ah, herói BGE. E aqui no Heideman disse que 110 engate v e que dá um pouco mais de espaço. Acho que isto parece muito bom. Parece justo o suficiente. Hum, então vamos dar uma olhada rapidamente. Tudo bem? E vamos recarregar isto. Tudo bem? E nós vamos, Sim, parece muito melhor. Temos um espaço extra no fundo, está bem? Você também pode ver que este texto aqui está meio fora, você sabe, se movendo para o lado direito. Eso o que podemos fazer Você não é uma boa maneira de consertar isso é que podemos, na verdade, apenas , seção 40 e 40. E o que podemos fazer é quebrar isso em outra linha. Tudo bem, então agora se ele disse isso em 1920 Tudo bem, você pode ver que ele meio que entra em outra linha que poderíamos fazer. A mesma coisa também está aqui, pode-se dizer, com base na Itália em uma linha diferente. Tudo bem, então, você sabe, meio que parece melhor. Ótima. Agora, uma última coisa que queremos fazer é se você ver ou ouvir o texto que diz baseado na Itália é uma espécie de opacidade inferior. Então, como vamos em frente e fazer isso agora? Obviamente, você pode ir em frente e criar outro elemento de texto em si e dar-lhe uma classe diferente e mudar a cor, mas vamos tornar isso um pouco mais simples. Então o que fazemos é que voltarei aqui aos 14. 40 e eu vou em frente e selecionar toda esta seção que diz baseado na Itália. E quando selecionamos isso, obtemos essas cinco opções, que são negrito itálico, extensão de link e formatação clara. O que queremos fazer é escolher rápido com espaço. Ok? E uma vez que você escolher o intervalo rápido, vamos ver como ele fica na navegação. Então começamos com o calor. Oh, seção. E então tivemos um herói rapper. Certo, qual era a nossa rede? E lá dentro, à esquerda, tínhamos a caixa de imagem de herói. E no lado direito, temos este bloco, que é chamado de bloco de calor ou texto. Não sei por que não está atualizando esse nome aqui. Ah, bom. Ele bloco de texto do dedo. Tudo bem, de qualquer maneira. E dentro desse bloco de texto de herói, temos um título, que é o principal, e então temos um parágrafo. Agora, o título, que é um elemento de texto, tem outro filho, que é a extensão de texto de Carla. Tudo bem, agora, vou dar uma aula, e já que isso é realmente 50% de capacidade, vamos chamar este quinto branco sublinhado 50. Ok? E então eu vou e rádios a fonte dessa para a cor da fonte para 50% de capacidade, então ele só muda a cor da fonte. Agora, tudo o resto permanece igual. Se eu aumentar isso ou diminuir para 24 você pode ver que ele também diminui para 24. Mas a única coisa é que, como adicionamos uma classe diferente a isso, todas as propriedades permanecem iguais, exceto a cor da fonte. Tudo bem, então é basicamente assim que fazemos. Ótima. Então, no próximo vídeo, vamos avançar e fazer disso um ponto de interrupção móvel. Mais pontos de pausa, e vai ser muito divertido. Vejo vocês no próximo vídeo. 12. Tornando a seção de heranças: Tudo bem caras. Então agora é hora de fazer isso responsivo para os pontos de quebra. Então vamos ver como fazer isso. Se você olhar para o design em fig mob, Eu realmente fiz você saber, o ponto de ruptura apenas a partir de Mobile, certo, porque praticamente paisagem móvel no retrato móvel são semelhantes e desktop e tablet são bastante semelhante. Então é por isso que eu decidi fazer apenas dois e não mais do que dois. Então vamos fazer isso. Então vamos realmente saltar para o ponto de quebra do tablet e vemos que temos algo que parece com isso e se você brincar com ele, ele meio que se parece com isso. E honestamente, eu acho que isso parece OK. Não parece tão ruim, mas uma coisa que poderíamos fazer, que eu provavelmente você sabe, isso é meio que rádios com o tamanho do telefone fora disso um pouco. Tudo bem, então o que podemos fazer é provavelmente inserir fazendo o 76. Isso é o que reduzimos a algo como 56. Tudo bem? E isso deve, você sabe, parecer muito melhor. Talvez também pudéssemos ir e rádios pelo espaçamento. Então, a partir de 40, podemos definir que seja 32 à esquerda e 32 à direita para que pudéssemos fazer a mesma coisa aqui na seção aqui também. Frente dos rádios. Aqueles 32 talvez faça diferença. Talvez não, mas eu acho que isso está parecendo bem, e quero dizer, parece muito melhor, você sabe, se olharmos em uma tela ampla, mas, você sabe, Os curtos também, você sabe, parecem muito bem, na minha opinião. Tudo bem, agora, vamos para a paisagem móvel. Tudo bem? Então, paisagem imóvel, isto é o que temos. E o que eu fiz aqui foi mudar todo o layout para parecer diferente, certo? Então temos a imagem e o topo, e temos algumas informações aqui na parte inferior. Assim, a fertilidade não altera o tamanho da fonte deste para 32 alguém para selecionar o título . E eu vou definir isso para 32. Ok. E isso deve ser muito bom mesmo nas distâncias. 16. Estou me perguntando, isso é de 32 a 60. Ótimo. Agora, a próxima coisa que eu vou fazer é selecionar o fundo BG o elemento herói BG que nós temos, que é isso OK, e o que eu vou fazer é realmente eu vou esconder isso. Tudo bem? Não quero ver isso no ponto de ruptura da paisagem. Então, para fazer isso, o que eu posso fazer isso pode clicar neste ícone que está escondendo os elementos que exibem definido como nenhum. Tudo bem. E quando eu faço isso, tudo se foi. Mas quando eu voltar para tablet ponto de quebra, ele ainda está lá, e chegamos ao ponto de interrupção da área de trabalho. Isso ainda está lá, certo? Para garantir que, você sabe que as coisas estão funcionando bem. Então aqui, o que eu vou fazer é ir e agora selecionar o herói ou rapper, e agora nós vamos mudar a estrutura fora da grade. Ok, então o que vamos fazer é eu realmente vou ir e clicar em editar. Tudo bem? E agora entre fazendo duas colunas e uma gota. Vamos fazer uma coluna e parabéns, tudo bem. E o segundo automaticamente é gerado automaticamente, então tudo bem. E nós clicamos em feito. Também temos o espaçamento à esquerda, que realmente não precisamos. Então eu vou definir o dedo do pé como zero, ok? E isso é muito bonito como queremos. Ok? E a próxima coisa é esse elemento. Agora isso eu dei uma altura fora 288. Agora, o que podemos fazer é dar a ele eu estou de altura 50 picaretas, 50 Veatch ou para TV Hitch. Podemos definir isso. Então eu vou para a imagem do aquecedor aqui. Tínhamos dado 80. Provavelmente isso já vai sair. Isso é uns 50? talvez Outalvezaté 45. Eu não sei. O que funcionar, tudo bem. Olhando bem. A próxima coisa que faremos é pela seção de heróis. Dissemos 9 TV Hitch. Eu estou realmente indo para remover isso e disse que para auto, porque eu não quero que ele tome 90 v hedge. Eu vou colocar o dedo do pé auto, e isso parece muito melhor. Ok, então. A próxima coisa aqui é que temos um pouco de espaçamento à esquerda e à direita, certo? E o espaçamento é 20 picaretas é então eu vou e vou selecionar o bloco de morte, que é o bloco de calor ou texto. E aqui nós tínhamos dado uma margem negativa. 64. Vou dizer isso para ser um Zito, está bem? Queríamos ser normais. E em seguida, eu vou dar um dedo interno acolchoado isso fora 20 pixels, então ele empurra as coisas, você sabe, tipo, assim. Tudo bem, lá vamos nós. O que vem a seguir? Portanto, temos uma distância de 48 pixels na parte superior e 48 pixels na parte inferior. Então o que eu vou fazer é se você olhar para a grade. Tudo bem, nós temos este lance de baixo fora 16 correções. Eu vou ir em frente e definir isso para ser zero, porque eu quero que eles se toquem. Não quero nenhuma lacuna. E para dar essa lacuna de 48 pixels, eu vou selecionar. Isso bloqueou, e no topo batendo, eu vou dizer 48 o preenchimento inferior, eu vou dizer 48, certo? E a próxima coisa é, nós também temos essa imagem de fundo, cor de fundo, então eu vou para a seção de fundo e apenas Adam, aquela cor que nós tínhamos rituais nível um, tudo bem. E é assim que vai parecer, vamos voltar ao tablet para ver que está tudo bem e parece perfeitamente bem. Não há nada de errado com a mesma coisa aqui, mas para a paisagem, parece muito diferente, tudo bem. E se eu quiser, eu posso ir em frente e mostrar isso para ver como ele fica em outros pontos de quebra, o que parece bom. Tudo bem. E agora vamos para o celular. E parece muito bom no celular também. Adapta-se perfeitamente e parece fantástico. Então descemos em uma tela de resolução 360. Então é assim que vai parecer. E acho que está ótimo. Certo, vamos ver se está tudo bem. Nós clicamos no menu suspenso, nós pegamos esse menu, apenas a escola, e, sim, eles estão parecendo muito bem. Tudo bem, então isso é muito sobre como você faz a seção de heróis responsiva. Se vocês se confundiram, recomendo que vejam o vídeo de novo e vejo vocês no próximo vídeo 13. Construindo a seção de experiência: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e criar a próxima seção. Isso deve ser muito simples e muito simples de fazer. Não é nada complicado. E eu estou indo em frente e apenas criador, como um quadro de arame para tipo de explicar como isso funciona. Então, obviamente, começamos com a seção rica, ocupa todo o espaço, e então temos um contêiner dentro que vai seguir as mesmas propriedades que este Onde temos 40 ou 72 picaretas está batendo em ambos os lados e eles estão vai margem 1920 pixels, a mesma coisa que refez para o Naff, mas e a seção do aquecedor também. E então temos dois conjuntos de elementos. Uma é a seção superior, e depois temos uma é a seção inferior. Então eu vou criar um bloco de para o topo em vai ter que elementos de texto. Deixe-me realmente apenas duplicar isso agora, então vai haver o nosso elemento de texto número um e vai ser o nosso elemento de texto número dois e faz bastante grande. Então é assim que vai parecer e então nós temos um para o fundo e este vai ser Este vai segurar três eles bloquearam. Então, o bloco um bloco para o bloco três. Então esta é basicamente a estrutura de como isso vai funcionar. Então vamos em frente e fazer isso. Então aqui estamos em Buffalo e Leicester criando uma nova seção. Então, toda vez que você quiser criar uma nova seção, selecione o elemento corpo e, em seguida, pressione o controle e e em uma seção Então agora que a seção é um filho do corpo então você pode realmente ver agora nós temos o nab nosso nós temos a seção herói e, em seguida, temos esta seção. Então, para esta seção, Ramadan, vá em frente e chame este carro de seção de trabalho. Digamos que seção conveniente, ok, isso faz mais sentido. Seção expediente uh, chamado de Deus, esta seção em primeiro lugar, o 14 vai fazer vai adicionar neste espaçamento à esquerda e à direita, que é em torno de 72 pixels à esquerda e 72 pixels à direita. Eu vou para a seção e dizer, preenchendo 72 correções e preenchendo 72 fotos. Tudo bem, lá vamos nós. A próxima coisa que eu vou fazer é adicionar um são rapper em algum lugar no novo desenvolvimento, e vamos chamar isso de rapper, tudo bem. E só para ter certeza de que um rapper configurações temos 100% com e um máximo com off 1920 pixels, eu vou ir em frente e disse isso para 14. 40 Tudo bem? E agora também queremos adicionar essa margem no topo da parte inferior. Então, 120 pixels no topo e cerca de 120 pixels no fundo para que eu possa ir e selecionar a seção, certo? E na seção, eu vou dizer, preenchendo 20% no topo e no fundo 20%. Tudo bem, então é meio que parecido com isso, certo? Isto parece bom. E agora temos o interior. Temos o rapper. Ok, como você pode ver, aquela maçã está sentada no meio, você sabe, os 120 em cima e os 12 em baixo. Tudo bem. E vamos criar nosso primeiro bloco surdo, certo, e esse bloco vai manter nossos elementos de texto, então eu vou começar criando um impasse, certo? E eu só não vou nomeá-lo no momento porque eu quero começar a dar um novo tipo fora estrutura de nomeação. Dois elementos. Então nós olhamos para como fazer isso. Os 40 minutos estavam lá dentro. Este dia, Block. Vou criar um bloco de texto. Este é um novo elemento que estamos adicionando. Muito bem, agora, Bloco de Texto é algo que eu uso quando não é um parágrafo, mas é apenas uma única linha de texto. E aqui está a experiência de trabalho. Vou copiar isso. E eu vou vir aqui e basear isso. Agora, vamos em frente e dar um fim a isto. Então isso é isso está sobrepondo 16 pixels para que possamos ver as propriedades. 16 fotos, 50% garoto. Tudo bem, então eu vou ir em frente e chamar este sublinhado overline 16 correções. Tudo bem. E vamos em frente para as propriedades para que o tamanho vai ser 16. A altura vai ser de 150%. A taxa do fundo vai ser negrito, e a cor está aqui. É isso? A cor aqui diz leve aderência na luz verde? Isto é um novo campo de cores? Vou copiar isso. Tudo bem. E, hum, eu vou vir aqui para a cor, e eu vou juntar isso. Tudo bem. E também podemos adicionar isso como uma amostra de cores. Então nós temos essa luz grande. Você sabe, você sabe, basta clicar em criar e tem sido muito bom. Ok, então agora eu sinto ver ou ouvir que esta sobreposição de 16 pixels é meio que tomar toda essa grande direita, mas isso não é o que nós queremos. O que podemos fazer é se formos aqui para as propriedades de exibição, temos algo chamado em bloco de linha, e temos algo cores na linha. Eu vou clicar na linha, bloqueado, e tudo o que vai fazer é que vai tipo fora restringir isso para ser para ocupar apenas o espaço fora do elemento Já o espaço, o comprimento fora do texto neste caso. Ok. E agora, apresentando, Você sabe, adicione nesta próxima seção. Agora, isso vai ser um título porque esta é a segunda informação mais importante em termos de hierarquia. Este era cada um. Isso seria hte também. Então eu vou pressionar o controle, comer e pegar uma direção, ok? E eu vou clicar aqui, que vai fazer isso e hedge para. E isso de novo, eu vou em frente e em uma aula e chamar este título. Hum, sublinhar. Haverá 55 picaretas, então vamos chamar este título. Sublinhar 55 correções. Certo, agora temos esse estofamento de cima e de baixo. Eu quero apenas o acolchoamento inferior, que é 40. Eu não quero o estofamento de cima. Ok, agora isso vai significar que isso vai ficar unido. Então, em vez disso, eu vou adicionar a margem de preenchimento inferior a isso, que é oito pixels. Então nós viemos aqui e dizemos Margin it. Ok, então agora isso dá esse espaçamento. E vamos em frente e copiar esta informação, este texto e base que estamos aqui e vamos em frente e ver as configurações. Então temos 50. Temos 55 pixels e placa. Isso é muito certo. Então vamos em frente e definir o tamanho da fonte para 55. Altura vai ser 100% e poderíamos ir em frente e definir a cor do dedo do pé estrangeiro para ser branco. Certo? Isso está cheio. Pense ótimo. Agora o que queremos fazer é que vocês podem ver aqui que isso é meio que restrito a um certo limite. E eu vou realmente ir em frente, pegar essa informação e fazer uma cópia. Eu vou chamar isso de mais apertado com tudo certo, e eu vou dizer que vale a pena ser 60%. Ok, então o que eu quero dizer, é que este texto. Ok, então agora eu vou ir em frente e disse isso para ser em bloco de linha, o que significa que ele ocupa todo o espaço e a leitura de fixo. Isto é que vamos usar flex. Tudo bem, então o que é flex? Então, se eu selecionar o impasse, tudo bem. E o que eu me pergunto vai fazer é eu vou clicar nesta segunda opção de exibição que diz flex. E quando eu clico nisso, algo acontece. Tudo bem, nós temos este novo conjunto de propriedades e flex permite que você organize elementos de qualquer maneira que você quiser de forma muito flexível. Então vamos realmente olhar para 33 propriedades que temos com sua direção. Nós temos alinhamento e nós temos justificado, ou eu vou fazer é eu vou dizer que eu quero o elemento, Toby um abaixo do outro. E uma coisa que você precisa notar aqui é que a propriedade está fora. Atribuir dois frascos precisa ser para o elemento pai. Tudo bem. E como você pode ver, De Block aqui é o elemento pai, e nós temos que elementos de texto dentro. Quando você flexiona os pais, você pode reordenar o arranjo das crianças, certo? E é isso que vou fazer. Eu quero que a direção do alinhamento, tudo bem, seja vertical porque eu quero que os elementos sejam um abaixo do outro. Então eu vou assumir a vertical, ok? E eu tenho um par de configurações. Temos ah, linha esquerda. Centro de linha alinhado, certo. Se eu clicar em um centro de linha, é assim que ele vai olhar para clique em um drive de linha. É assim que vai parecer se eu escolher o espaço entre isto, como vai parecer. Tudo bem, então o que eu vou fazer é ir para a que diz uma linha esquerda ou direita, porque nós meio que queremos que os elementos sejam alinhados à esquerda. E também, podemos dizer, justificado para o topo, como você pode escolher, justificar no centro, justificar o fundo. Neste caso, é realmente não importa porque não há espaço suficiente para isso para mais. Então vamos deixar isso para justificar o topo e ouvir. O que eu vou fazer é eu vou dar este bloqueio de porta se uma nova classe e eu vou chamar isso flex vertical, certo? E eu vou ver sublinhado à esquerda e sublinhar Top. Tudo bem, então esta é a aula que vou dar agora vai acontecer. É cada vez que eu quero flexionar elementos desta certa maneira, eu posso apenas aplicar esta classe que temos e que torna mais fácil para a organização. Quando você está construindo um site, nós realmente temos esse valor inferior fora de 40 que eu dou ao México para remover isso por enquanto. Certo, porque este cabeçalho pode nem sempre ter 40 pixels espaçamento entre outros elementos em que vai dizer que zero por enquanto. Tudo bem. E agora o problema aqui é que você pode ver que aqui o com é na verdade 60% de desconto em todo o trabalho que temos. Então o que fazemos é selecionar este título 55 correções e no trabalho, eu vou dizer 60%. Ok, então agora não vai acontecer. Ele vai ir em frente e restrito a 60% fora da porta View com Tudo certo, então se eu disse isso para 12 40 vai ser 60% disso. E se ele disse isso para um número menor, digamos 1100 será 60% disso. Disseram isso a 1920. Vai ser 60% disso agora. Obviamente, isso parece um pouco estranho porque em 1920 está ocupando 60%, mas não parece bom . Então o que podemos fazer é, você sabe, em vez de ter isso para ser 61ª pessoa, vamos realmente clicar sobre isso e redefinir. O que podemos fazer é enfraquecer. Quebre a linha aqui e podemos livrar-nos disto. Então vamos em frente. E, uh, mas eu digo porque eu tenho olhar, eu posso remover a linha para e colocar em uma linha separada. Ok, isso parece muito melhor agora, eu acho que para o título, eu gostaria de adicionar um pouco fora Heizo Nets 110%. Às vezes, a altura da linha no desenvolvimento Web funciona em liberdade do que na Fig. Marceau na fig. Meu, se parece bem. Talvez queiramos aumentar um pouco aqui. Ótimo. Agora você pode ver que nós temos um problema agora nesta seção de experiência, mesmo que nós adicionamos uma parte superior fora 120 Tudo bem, eles estão realmente começando do fim desta linha, porque aqui ele está realmente começando. Esta seção está começando a partir do final, mas aqui não está. E a razão é porque este corpo BG que criamos está na verdade por trás de tudo o resto. Não está afetando o espaçamento entre a seção conveniente do calor. A seção da seção do aquecedor e as seções da experiência são, você sabe, próximas. A seção da seção do aquecedor e as seções da experiência são, você sabe, Eles estão se tocando e o fundo do corpo que criamos não está tendo nenhum efeito. Então a única maneira de corrigir isso é que podemos realmente clicar sobre isso e segurar ou para ver a distância. E isso é em torno de 245 picaretas é porque esta seção está meio que terminando aqui. Tudo bem, então nós podemos realmente selecionar isso e em vez de 120 talvez poderíamos dizer 240. Eu acho que é provavelmente um bom número ou 200 podemos não saber o tamanho exato por causa do fato de que esta seção é baseada em 90% ver port, certo? E você sabe, isso difere de cada ponto de ruptura fazer o design porque nós o projetamos em 14. 40. Então o que eu posso fazer é como, a seção de experiência e dar-lhe um número off, digamos, 265 e eu acho que isso parece muito bom. Então vamos ajustar isso de volta para 14. 40 e sim, isso parece muito bom. Tudo bem. Ok, então o próximo passo é ir em frente e criar Thies segundo bloco dia e dentro que nós vamos ter três elementos. Então o que vamos fazer é ir em frente e certificar-me de que escolhemos o rapper. Vou pressionar “coma controlado “, e vou dizer “o quarteirão”. E desta vez eu vou realmente obter um elemento de grade. Então eu vou apenas obter diretamente um grande ok e vamos definir então nós queremos três colunas e maravilha. Oh, então remova Anro e deixe nossas três colunas Nós temos três colunas. Fantástico. E nós também podemos ver que aqui naquela semana adicionou um clique de pesquisa em grade no quadro e, você sabe, alternar olhar grande em você pode ver que nós temos. Ah, grande espaçamento fora 24 pixels. Certo. Então, queremos ter certeza de que adicionamos isso. Então eu vou em frente e na lacuna da coluna. Eu vou dizer 24 picaretas é e isso deve ser bom. Agora, este tipo está a tocar na secção superior, por isso vou adicionar uma margem superior de 40. E aqui neste grande. Agora, podemos não estar reaproveitando os meus momentos mais profundos, então podemos dar uma aula, e podemos chamar isso de experiência de grande. Ok. E bom. Então agora tudo o que temos a fazer é que temos que Adam desenvolveu para cada caixa e, em seguida, começar a adicionar os elementos dentro. Então eu vou criar um bloco, ok? E aqui dentro deste bloco, vou ligar para isto. Podemos dar um nome diferente depois. Tudo bem? Vou começar adicionando este. Agora, isso novamente não é importante para a hierarquia, mas isso é apenas um rótulo triste, então eu vou adicionar um bloco de texto, certo? E eu vou ligar para este número, ok. E vamos ver as propriedades. Sua 117 e 1 20% de altura da linha. Então eu vou apenas clicar duas vezes sobre isso. Mude este 201. E aqui nas propriedades, o tamanho vai ser 117 A altura da linha vai ser de 1 20%. Tudo bem, você sabe, nós poderíamos apenas dizer isso a 100%. Neste caso, deve estar tudo bem. E nós provavelmente poderíamos dizer isso muito ousado. Tudo bem, acho que é normal. Então vamos nos ater ao normal. Então eu vou em frente e fazer isso um regular, e a cor vai ser nosso grau de luz. Certo? Ótimo. A próxima coisa é, nós temos isso. Agora, este vai ser o nosso H três, certo? Porque cada um tem duas horas e vai ser na Rua Oitava. Tudo bem, então eu vou adicionar um novo elemento de cabeçalho, ok? E aqui no elemento de título, eu vou dizer que eu realmente vou ir em frente e copiar isso. Tudo bem? E colar. E vamos certificar-nos de que isto é um cada três, está bem? E eu vou ver o título sublinhado e isto é 24 escolhas de direitos ou 24 negrito. Ok, então isso vai ser cabeçalho sublinhado 24 correções, e isso deve ser bom. Então vamos em frente e mudar o tamanho para 24 que já é esconder linha. Weaken disse que sim. Talvez 1 20% realmente não deva importar, porque é apenas uma linha e a cor vai ser branca. E, no entanto, isso parece muito bom. Agora, se você ir em frente e selecionar o número e rádios que estão no bloco de linha, parece bom. Tudo bem, podemos deixar para bloquear neste caso. Realmente não importa. Ok. E agora para isso bloquear, vamos em frente e dar uma aula, e podemos chamar isso de bloqueio de experiência, ok? E agora vamos em frente, e temos muito espaçamento aqui no topo na parte inferior. Então, isto é Primeiro de tudo, não temos espaçamento. E na parte inferior, temos, tipo, 16 pixels. Então aqui, o que eu vou fazer é eu vou rádios isso de 22 b zero. Tudo bem? E talvez pudéssemos ficar um pouco, mesmo que pareça um pouco diferente. E o design que provavelmente poderíamos adicionar em oito pixels no topo. Na parte inferior, você pode ver 16 fotos. Ok, eu acho que vou fazer é eu vou remover esta margem no topo do século disse isso e para o número, eu vou dar-lhe uma margem inferior fora dele. Acho que isso deveria marcar. E por isso vai voltar a ser CEO. Ok, isso parece muito melhor. E agora vamos adicionar um parágrafo e isto é 16. Corrige alguns ardente no novo parágrafo. Ok? E copie isto e cole. Agora, já temos um parágrafo 16? Correções? Não, não temos. Temos um parágrafo de 18 pixels. Então o que fazemos é garantir o seu novo truque. Vou aplicar este parágrafo de 18 pixels, está bem? E então eu realmente vou vir aqui nesta lista. Vou escolher classe duplicada. Então agora ele faz uma cópia dessa classe, e tem exatamente as mesmas propriedades, mas um nome diferente, tudo bem. E então eu estou realmente indo para ir em frente e renomear isso para 16 picaretas é e todas as propriedades já estão lá. Então, poupa-me alguns cliques, e eu posso ir e definir a margem inferior para zero. E também, eu posso mudar o tamanho da fonte para 18 para 16. Tudo bem, isso parece muito bom. Agora, também temos a palavra Google, que está em verde. Então, como fazemos isso? Como eu mencionei que mudamos a cor aqui usando uma extensão de rap. Podemos fazer a mesma coisa aqui, alguém ou clicar duas vezes no Google. Selecione essa alteração para abranger. E podemos selecionar isso. Aplicar uma classe verde coalesce, e podemos aplicar uma cor verde simples que temos. Então vou copiar este cordão de cor, tudo bem. E eu vou vir aqui e mudar a cor para ser verde. E, você sabe, podemos adicionar isso como uma amostra se não fôssemos. E parece muito bom. Ótimo. Agora o que podemos fazer é selecionar este bloco de experiência e eu vou pressionar controle C controle V e controlar nós para colá-lo duas vezes. E é isso que vamos ter. E o que eu ia selecionar isso e disse isso para e selecionar isso e mudar isso para três. E podemos ir e rapidamente. Vá em frente. Copie estes elementos. Tudo bem, Besta e ah, Copie Besta e copie e copie peças. Espere. Mas o problema aqui é que você sabe, nós aplicamos um bilhete de classe diferente. Então, se você olhar para a navegação, nós meio que vemos que as coisas estão um pouco confusas. Então o que eu vou fazer é ir em frente e apagar isto e apagar isto. E podemos selecionar este título 24 que criamos e despertar o ritmo que aqui. Então nós não temos nenhuma confusão, e então nós podemos apenas ir em frente e mudar isso para designer de dutos de prod. E agora aqui podemos ligar para aqui e podemos dizer designer gráfico, ok. E isso podemos mudar o nosso para driblar. E aqui podemos mudar isso para B. Facebook. Ok, agora, o próximo ano ou dois está aqui. Dissemos verde, certo? Então, em vez de vermos verde, podemos aplicar esta nova quadra de cores. Então eu vou copiar este cordão de cor. Tudo bem? E eu vou remover esta etiqueta verde. Eu vou chamar isso de azul, e eu vou vir aqui para a cor. E naquele colarinho azul animais fazem a mesma coisa aqui para driblar. Vou deletar essa aula, e quero dizer que acho, certo, certo, e uma cópia desse núcleo cor-de-rosa que temos. E eu vou vir aqui para a cor e mudar esse rosa e também talvez em uma amostra. Mas não acho que usaremos essas cores para que possamos deixar como está. Então agora isso é praticamente o que parece. Ok, a próxima coisa que eu quero fazer é se você ver ou ouvir, mesmo que as distâncias 24 eu tenha adicionado um pouco fora de espaçamento aqui, que está fora 48 correções, certo? E isso é algo que eu fiz intencionalmente. Porque se eu empurrar para a direita, você sabe, parece um pouco estranho porque há muito menos distância. Então eu adicionei intencionalmente 48 pixels. Então eu vou selecionar essa experiência, bloquear que nós criador, e eu vou em frente para a mordida e disse que eu quase 40 isso. Então, o que? Isso vai perder que vai ir em frente e nosso 48 pixels batendo. E isso vai se aplicar a todos os outros t como outros dois também porque eles têm a mesma classe que diz Experience Block. Então 48 0 aqui também e isso está parecendo muito bom. Isso é exatamente o que tínhamos em mente. Ah, enfraquecer, quero pensar que podemos ir para 1920 pixels e ver como isso parece e isso parece muito bom. Agora, no próximo vídeo, vamos em frente e fazer isso responsivo, então eu vou ver vocês no próximo vídeo. 14. Tornando a seção de experiência: Tudo bem. Portanto, deve haver um vídeo bastante simples e uma maneira de rádio muito rápida. Nós só vamos fazer isso responsivo, então vamos ver como fazer isso. Vamos como ir para o ponto de quebra tablet e ver o que está acontecendo? Mini tablet, Brick Boynes. As coisas parecem bem. Eles parecem bem. Mas o problema é que podemos ver isso. Você sabe, o espaçamento é muitas vezes que parecia. Não parece perfeito. Então resolvemos isso agora. O que fizemos aqui foi quebrar esta linha aqui, certo? Então mudamos a palavra para longe no passado em uma segunda linha. E essa é a razão é que quando isso está encolhendo, você sabe, já que no passado já está em uma segunda linha, nós temos esse espaço desnecessário. Então, como vamos consertar isso para que pareça bom? Agora, a primeira coisa que você tentou foi realmente adicionar um valor fixo fora 60 V escotilha ou outra coisa que preferiria o que podemos fazer é realmente ir em frente e, você sabe, ter certeza de que isso está em uma linha, e para tornar isso um pouco melhor, podemos realmente ir. E no arquivo da invenção. Você pode realmente definir um determinado valor. Então eu defini o valor de 778 correções. Eu posso arredondar isso fora 780 Tudo bem? E podemos realmente definir um valor de 7 80 pixels como um valor máximo off. 7 80 picaretas é Então agora o que vai acontecer é que se eu ir tablet ponto de quebra, vai ser 7 80 picaretas é O problema é que você pode ver que eu sou capaz de tipo de rolar para a esquerda porque fora isso então o que nós poderíamos o que devemos fazer é não configurá-lo para 70 correções . Vamos definir um valor fora 100% e um valor máximo fora. 780 picaretas está tudo bem. Então agora o máximo será de 780 pixels, tudo bem, mas será restrito a 100% de desconto no espaço. E aqui, você pode ver que, você sabe, o espaço é um pouco demais. Então, de 70 para o México, traga isso para algo como 40 à esquerda e 40 à direita. E também, o espaço no topo também é muito em algum lugar. Rádios que baixam para um pouco menor. Diga algo como 150. Isso parece muito bom. E a próxima coisa aqui é que nós adicionamos este estofamento interno fora 40 It, eu diria Basta torná-lo zero, porque ele deve estar bem. E isso também parece muito bom. Não parece tão ruim assim. E agora este é o menor coincide com a escala dele, você parece ainda melhor. Então, sim, acho que o que podemos fazer é irradiar completamente. Talvez pudéssemos dar um pequeno valor de 16 picaretas na promotoria. Sim, acho que deve ser muito bom, certo? Parece muito bom. Agora vamos para o cenário móvel na paisagem móvel. Vou fazer uma abordagem completamente diferente. Primeiro de tudo, esse espaçamento que temos no topo na parte inferior vai ser diferente, e isso é na verdade 64 pixels. Então, essa é a margem ou partida que vamos estar usando tudo através de um disse o topo para 64 o fundo também para 64. E como você pode ver nos lados, nós ajustamos para 20. Então eu vou definir isso para 20 e o vento. E a próxima coisa aqui é que este tamanho estrangeiro também deve ser reduzido para 32 pixels. Então eu vou selecionar isso. Isso vai se tornar a partir de 55 rádios. Isto para 32 picaretas está tudo bem. Isso parece muito bom. E agora para esta grelha, não quero que isto seja um ao lado do outro. Eu quero que eles estejam um abaixo do outro, então eu realmente vou remover as colunas, certo? E isso cria automaticamente grades automáticas para nós. Tudo bem, então parece com isso, e então vamos fazer é vir aqui e esse espaçamento, vamos aumentar para 40. Podemos ver que o espaçamento ou ouvir este 40. Então o Ro Gap vai ter 40 pixels, e isso parece muito melhor. Vamos para a visão de retrato móvel, e vamos definir isto para 360. Está bem? E eu acho que isso parece muito bom. Meio que estou gostando. Sim, é interessante. Vamos verificar isso. E ainda assim, isso parece muito bom. E acho que outra coisa que podemos fazer é adicionar este tipo de estofamento à esquerda 16 misturas. Eu meio que já é esse 20 porque eu queria tomar conta de todo o espaço. Tudo bem, então acho que isso parece muito bom, e nós estamos aqui também. O que podemos fazer é, hum, sim, poderíamos para que zero seja carregado foto aqui, e eu acho que isso parece muito bom. Tudo bem. Sim, Sim, acho que isto parece muito interessante. Então isso é praticamente tudo para este vídeo baseado. E vejo vocês na próxima. 15. Construindo a seção média: direito neste vídeo. Nós vamos em frente e criar esta seção, e isso vai ser muito simples e direto e ah, um par off spat omitido que definiu. E estas são decisões projetadas que eu tomei. Mas estou dizendo que quero que a altura seja de 600 pixels. Eu quero que o com fora de cada elemento para ocupar 50% você sabe, muito simples. Então vamos ler, fluir e fazer isso. Vai começar clicando no corpo e criar uma nova seção e chamar esta seção e nós temos uma seção aqui, e o que fazemos vai chamar isso de seção intermediária. E como eu mencionei, eu quero que a altura disto seja 600 pixels, então eu vou dar-lhe uma altura de 600 correções. Certo, então temos uma grande altura. Próxima coisa, Eu só quero limpar os rappers em uma imprensa controlada comer e adicionando um aros e e obviamente, o próximo episódio em um rápido alguém pressionar controle e e 1/2 bloco e acrescentou, A classe rapper que criamos, Então, o máximo de 1920 altura é 100% E com aqueles 100 pessoas. Fantástico. Tudo bem. Agora, nós também queremos adicionar um grande aqui. Ok? Agora, a coisa é, se você for agora, se você lembrar, nós adicionamos uma chamada de classe vírgula é ótimo. E o que podemos fazer é aplicar o mesmo, tudo bem. E até mesmo o número de colunas, as regras e tudo o que queremos é praticamente o mesmo. Então isso é perfeito, certo? Então vamos fazer agora é eu vou adicionar um impasse. Tudo bem? Um para este. E o outro vai ser para este, que vai estar lá para as imagens. Então, para o 1º 1 o primeiro do bloco, eu vou dar uma aula um pouco mais tarde porque eu quero aplicar uma propriedade flex a isso. Mas primeiro vamos fazer é adicionar uma cor de fundo. Então eu vou ir em frente e adicionar uma cor, que é essa cor que temos a cor da fala com uma cópia. Tudo bem, na minha cara isso em cima de você? Fantástico. Em seguida, vamos adicionar três elementos. 12 e 3 o 1º 1 vai ser o nosso H dois, que é o mesmo em termos de hierarquia. Tem isso durante uma imprensa controlada comer, vamos adicionar no título. Vamos mudar isto para dois anos, está bem? E então vamos adicionar no título que classificamos cada criador, que está dirigindo 55 fotos. Certo, agora, o problema é que porque isso foi usado aqui, quero dizer, aqui, onde estava em um fundo preto e as texturas certas, a mesma coisa está acontecendo aqui porque eles têm a mesma classe. Então o que podemos fazer é adicionar uma classe de combinação, e podemos chamar isso de preto, certo? E só a única coisa a fazer é mudar a cor, e escolheremos a cor do nível um que criamos. E agora ambos têm as mesmas propriedades. Mas isso tem uma classe extra de preto, é por isso que está em preto. Então vá em frente e copie essa filosofia e valores Vá em frente e baseie isso. Tudo bem. A próxima coisa é, nós temos este texto, este parágrafo, então eu vou ir em frente e realmente copiar o mesmo porque é praticamente a mesma coisa. Vai copiar isso. E colar aqui com um problema aqui é que esta é uma cor diferente. É uma cor cinza escuro. E novamente, o que gostaríamos de fazer é vender isto e adicionar uma nova classe de combate. Chame de escuro, ótimo, ou copiaremos o esqueleto que temos. Copiar. E nós vamos descer aqui para a cor e uma pasta. Tudo bem, então agora nós também podemos adicionar este relógio. Acho que já adicionei isso, então podemos acrescentar isso. Então temos isto aqui, e isto ainda permanece branco. Fantástico. Vou copiar esta mensagem na base. Essa visão. Agora, a coisa é, nós temos este espaçamento, que está fora 24 picaretas é agora. Ou podemos adicionar uma margem inferior a isso, ou podemos adicionar um preenchimento superior ou uma margem superior a isso. O que eu quero fazer é adicioná-lo ao título em si. Então eu vou adicionar uma nova classe de combate. Podemos adicionar 1/3 classe vírgula e podemos chamar isso 24 Fixer dump. Ok, desculpe. Borda de 24 pixels. E no fundo, eu vou adicionar um novo valor fora 24. Então agora este recém-de 24 aplica-se a apenas 24 pixels inferior. Dicle a black é apenas para este retorno. Além disso, e tudo o resto é para dirigir 55 correções, certo? Ótima. Agora vou em frente e selecionei isto e depois vamos adicionar uma palestra. Vamos adicionar algumas manchas lá dentro porque, como você pode ver, 120 pixels do topo e 72 imagens da esquerda e da direita, então vamos em frente e fazer isso. Eu vou em frente e na margem no estofamento para isso fez bloqueio. Vou em frente e dizer 120 no topo, 120 no fundo, 72 pixels à esquerda, e então vocês são pixels à direita. Certo? Eu estava muito bem. Agora temos este elemento, certo? E isto vai ser um elemento muito fixe, porque vamos, isto vai ser um elemento animador muito bonito . Então o que vamos fazer é ir em frente e criar um link de texto, OK? Então nós estamos pressionando controle e criar um texto para vincular porque queremos que isso seja animador sobre isso e porque queremos que este seja um link que você pode, que pode ser clicado em então basicamente não pode entrar. E isso vai adicionar este pequeno link de texto, OK, e eu vou chamar isso de fundo de link animado. Ok, agora vamos em frente e adicionar as configurações. Temos 16 escolhas é, um, você sabe, e cor preta e você sabe, a estética regular. Então eu vou selecionar este link de texto. Quero definir o tamanho da fonte para 60. Vou definir a altura para algo interessante, mas deixe-me explicar o que vou fazer com ela. Vou definir a altura para algo interessante, Queremos que a cor seja esta cor preta de nível um, que é uma espécie de como um adequado E uma vez que é um link onde para automática adiciona este sublinhado. Mas podemos remover isso vindo aqui nas configurações de decoração. Podemos definir isso para nenhum. Tudo bem. Parece muito bom. - Tudo bem. E a próxima coisa é que queremos adicionar este tipo de underlay. Então o que eu vou fazer é que eles querem definir a altura para um grande número. Tudo bem, então vamos dizer algo como, você sabe, 40, certo? E também, eu vou vir aqui ou aqui para o topo e nas opções de exibição. Vou escolher este que diz em bloco de linha, certo, certo, valor de bloco. E talvez eu pudesse ir em frente e dizer isso até para algo como 50. Ok. E então eu posso ir até a seção de bardos e ter certeza de que você verifica a borda inferior primeiro. Ok? E então você adiciona um valor de cor do que queremos. Tudo bem. E a ordem são automaticamente conjuntos dele para um. Então isso é praticamente o que temos agora, talvez 50 seja demais, então eu provavelmente posso reduzir isso para 40. Eu acho que 40 é um número bastante decente, tudo bem. E podemos ir em frente e chamar isso. O que você quer? Podemos chamar isso de “ah “, mais sobre você. E a melhor parte é que a linha muda de acordo com a altura fora do de acordo com o com fora do texto. Agora, a próxima coisa é que isso não é realmente preto. É um cinzento escuro. Então eu quero mudar rapidamente a cor para o nível um para atracar, uva. Tudo bem, isso é fantástico. Agora este botão é na verdade para a parte inferior. Agora, a maneira ideal é selecionar esse elemento e, você sabe, movê-lo. 133 pixels abaixo na parte inferior. A margem nisso vem aqui. Mas você quer fazer algo diferente, ok? Agora, a razão é, porque se eu mudar isso para provavelmente duas linhas, eu ainda quero que isso seja aqui embaixo. Tudo bem? Quero que isso toque a borda inferior. Agora, quando eu digo sobre imagem, eu estou dizendo, depois que nós adicionamos este 120 pixels fora da margem. Como você pode ver, nós adicionamos uma margem de 20 pixels na parte inferior. Eu queria ficar com esse fundo. Tudo bem, então como fazemos isso? Bastante simples. O que vamos fazer é ir em frente e criar selecionar este impasse, e eu quero adicionar uma propriedade flex. Ok. Ora, obviamente, não queremos que as coisas sejam horizontais. Queremos que sejam verticais. Alguém escolha a direção para ser vertical. Hoje, a próxima coisa é que queremos que tudo esteja alinhado à esquerda. Semelhante. Escolha uma linha à esquerda. A próxima é eu quero escolher esta bobina como espaço entre. Ok, agora, o que vai acontecer é que isso vai para o espaço, esses três elementos igualmente. Mas não é isso que eu quero. Eu quero que esses dois fiquem juntos, e eu queria que isso fosse um jeito. Então o que vamos fazer é selecionar este bloco de dia, e primeiro dar-lhe uma aula e podemos chamar isso de meio esquerdo bloco esquerdo. Ok. E lá dentro, o alguém está no bloco New Dev, certo? E este impasse vai conter este título e este subtítulo. Tudo bem, vamos realmente consertar o navegador, ok? E queremos que o topo do quarteirão fique no topo e este seja no fundo. Então agora, se você ver o que está acontecendo é este bloco intermediário, que é o pai está espaçamento. O primeiro desenvolvido para o topo fora do recipiente sobre o animado para o fundo fora do recipiente. Na verdade, colocamos esses dois. Nós colocamos esses dois elementos em um desenvolvido porque queremos que isso faça esses dois itens como um separado esses dois elementos porque queremos que esses dois elementos sejam efetivados como, ah, um único bloco. E queremos que isto seja como um bloco separado. Tudo bem, então foi assim que fizemos. E para isso o quarteirão. Eu posso chamar isso de rapper normal porque ele está apenas adicionando como um contêiner ou um caçador normal . E nós não estamos definindo nenhum valor para isso, certo? Vai ser assim. E é assim que se faz isto. Agora, o próximo é este em que vamos adicionar a imagem um anúncio no bloco D, certo? E que o quarteirão vai sentar aqui e eu vou chamar isso de imagem média, ok? E nós vamos fazer é ir em frente e selecionar uma imagem de fundo. Certo, então vamos para a capa e depois escolhemos a imagem e vamos fazer é adicionar a imagem,o imagem, que está tudo bem? E bem disse que a posição para o centro e que está olhando muito bom. Ótima. Então, agora, como isso parece quando vamos para 1920 correções? Tudo bem. Isso eu ficaria muito bem. Vamos ver como fica quando for para 38. 40. Tudo bem, isso também parece muito bom. Tipo, este é o tipo de olhar que estamos procurando, certo? E isso parece muito bom, na minha opinião. Ótima. Então agora isso está feito. Vamos animar este fundo para que pareça super incrível. Vejo vocês no próximo vídeo. 16. Criando um botão de link animado: Tudo bem, pessoal. Então, neste, eu ou o que vamos fazer está acontecendo, acasalar este botão para torná-lo super divertido e interessante. Então vamos ver como fazer isso. Agora, isso vai ser uma interação simples novamente. Então vamos ficar com tudo. Vamos enfiar os pés nesta seção, e não vamos para a aba do pé ainda. Então o que eu vou fazer é obviamente queremos que isso seja acionado, e eu pairarei sobre ele, certo? Então eu vou, e no menu suspenso, eu vou escolher pairar. E agora estamos em estado flutuante. Portanto, quaisquer alterações que fizermos afetam apenas o estado oco. Ok, então o que nós queremos fazer seu primeiro ir começar adicionando uma cor de fundo e a um escolher é este tipo de alerta público que temos? Tudo bem, agora, você pode escolher isso para qualquer cor que você quiser, mas eu vou definir isso para roxo por enquanto, porque estamos usando roxo para todos os outros botões. E essa é a nossa cor primária. E a próxima coisa a fazer é mudar a cor do texto para ser branco Ok, agora parece bem fora, certo? E ah, quero fazer é dar um pouco de espaçamento à esquerda ou à direita. Eu vou vir aqui para a rebatida, e eu vou dizer uma separação de 24 pixels à esquerda e 24 pixels à direita. Tudo bem, e então nós podemos realmente voltar para o nosso estado nenhum. Certo? Certifique-se de volta no estado não e vamos ver como isso parece. Tudo bem, então pode parecer bom, mas realmente não parece legal. Quero dizer, a interação funciona, mas meio que não parece legal. Então, como vamos? que vamos fazer é, obviamente, vir até aqui para a seção de transição, e adicionamos três propriedades. Uma era a cor do texto. Um era a cor de fundo, e outro era o preenchimento de ambos os lados. Então vamos aplicar propriedades a cada um para começar sobre as transições, e o 1º 1 vai ser a cor de fundo. E eu vou definir isso para 3 15 milissegundos, e que nós vamos escolher é o nosso tribunal. Tudo bem. E vamos selecionar outro. Vamos lá. E escolher a cor da fonte desta vez 3 50 milissegundos e flexibilização vai ser fácil fora tribunal. Vamos lá outra palavra. E desta vez vai ser o preenchimento de rebatidas, e vamos escolher 3 50 milissegundos novamente. E flexibilizar vai ser mais fácil tribunal. Certo? Então agora nós tomamos todas as três propriedades e também adicionamos as mesmas animações de atenuação, por isso deve parecer muito bom. Tudo bem, lá vai você. Tudo bem. E isso parece super fofo. Agora, eu acho que o estofamento pode ser demais. Então, o que posso fazer? Muito como eu posso fazer isso. Vamos voltar ao estado flutuante e talvez reduzi-lo de 24 para 16 e você sabe 16 para que fique bem. E agora, vamos em frente. Volte para o estado das freiras. Tudo bem, vamos verificar aqui à direita, isso é que está parecendo muito bom. Tudo bem, então é basicamente isso sobre como você limpou este lindo botão. É muito divertido e interativo para brincar. Então, na próxima semana, vamos fazer isso uma resposta. Vejo vocês no próximo vídeo. 17. Tornando a seção média responsiva: Tudo bem, então neste vídeo, vamos em frente e fazer isso responsivo. Então, se você pudesse olhar para o design para o ponto de ruptura móvel, como ele parece é muito simples assim, e ele teria definido é que eu defini, Ah, altura fora 450 picaretas é então essa é a altura que estamos indo para. E queremos que tudo isso seja para fotos bonitas, e queremos que isso também seja de 4 50 pixels. Tudo bem, então esse é o valor que estamos projetando e realmente pode ir em frente e obter isso rapidamente. E, você sabe, coloque isso aqui também para que tenhamos contexto, tudo bem. E eu vou dizer que a altura é de 50 Xers cada. Tudo bem, vá em frente e que podemos governar esta seção. Então vamos saltar para uma arma e vamos para o ponto de quebra do tablet. Agora, o ponto de ruptura do Talibã é que está tudo bem, eu diria , não há muito problema aqui parece. Está bem. Tudo bem. Agora temos um problema onde, você sabe, você sabe, porque apesar de termos dito 50%, temos muito espaçamento à esquerda e à direita, e essa é a razão pela qual isso está ficando encolhido. Então o que podemos fazer é para estes, para o bloco esquerdo são inter de ter um estofamento off 70. Provavelmente podemos reduzir isso para 40 à esquerda e uma piada à direita. E agora isso deve fazer isso. Você deveria nos dar muito mais espaço para respirar, e você deve fazer com que pareça muito melhor. E talvez até mesmo sobre o assunto de provavelmente é que até, tipo, 80 e 80. Acho que é um número que funciona bem, mas vamos passar pela paisagem. Então, na paisagem do momento, nós meio que queremos mudá-lo. E já mudou, tudo bem. É tão estranho que já tenha mudado por causa do fato de que tivemos que usar esse mesmo grande elemento, certo, porque se você olhar para aqui, você sabe, nós adicionamos o rapper e ele adicionou a grade e que Grid Orderly está neste formato , e parece muito bom já. Agora, obviamente, queremos definir a altura destes dois para 50 pixels. Então eu disse os dois altos para 50 fotos e isso parece muito bom. Tudo bem? Como se eu fosse para a paisagem móvel uma urgência, parece bem. Mas aqui, não saberemos. Meio fora. Certifique-se de que isso também é para 50. Mas antes de fazermos isso, vou em frente e certificar-me que a partida à esquerda e à direita é 20. Tudo bem. E no topo é, hum, é em torno de 64. Está em 46 picaretas. É que eu acho que precisa ser 48 de qualquer maneira. Então, quando eu definir o acolchoamento superior para 48 o acolchoamento inferior para 48 tudo bem. E você na altura para ser 450 pixels foram a altura e disse que fazer 450 picaretas é e que parece muito bom para 50. Sim, isso parece bom. E vamos para o retrato móvel. E isso parece fantástico também. A aparência parece ótima. Então, se você ir em frente e disse isso fazer 360 Hum, tudo bem, é assim que vai parecer. E eu acho que está ótimo, certo? E você sabe, as mesmas interações funcionam aqui também. Então, na próxima semana, vamos para a próxima seção do site e aprenderemos algo novo. Então, como vocês no próximo vídeo, 18. Construindo a seção de habilidades: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e criar esta seção. Vamos aprender um novo conceito no que diz respeito à grade. Está indo bem simples. Agora, como construímos isso? Muito simples. Começamos com uma seção como de costume e depois começamos com um rapper e insider up. Mas nós temos uma grade e nós vamos ter uma a três colunas e vai ter fazer faz um e dois, certo, certo, Se você olhar para ele que esta seção, que é a camisa da escola, o conjunto de habilidades e o descrição é uma espécie de ocupar esta coluna inteira. Mas estes dois estão ocupando, você sabe, são quatro por quatro colunas. Então, como organizamos isso em Buffalo? Está indo bem interessante. Vamos saltar para a web devagar. Então eu vou começar definindo isso para 14 40 pixels. Então, queremos começar com isso. Vamos criar selecionar o corpo e que é uma nova seção. Então vamos selecionar em sua seção e aqui vamos seguir em frente e vamos chamar essa seção de habilidades, e vamos ir em frente e adicionar um pouco de preenchimento na parte superior e inferior. Então, no topo. Temos, tipo, 120 pixels. mesmo aqui na parte inferior de 120 fotos e 72 à esquerda e à direita. Então, com o Senado com o seletor de seção, vou em frente e dizer, rebatendo 20 pixels do topo em 20 pixels na parte inferior e 70 pixels na esquerda e 72 pixels na direita. Ok. Eu pareço fazer uma imprensa controlada Ito. Adicione um bloco de diferenças. E é aqui que vamos adicionar um rapper. Então vou em frente e escolher o Rapper. Ok, então nossas configurações padrão de rapper são 100% com 1920 pixels, máximo com e uma altura fora de 100%. Coisas muito simples. Tudo bem, seguir vamos fazer é criar um ótimo agora que já temos uma classe de vírgula chamada Grid. Agora, tudo bem, mas o problema é, este ótimo é apenas duas colunas, mas queremos uma grade de três colunas, então eu vou criar uma nova classe e chamar essa grade três coluna. Tudo bem. Só vou dizer “bom”. Três C o l macio. Sabe, três colunas, eu diria que talvez sublinhado. Faça parecer melhor. Ok, então esta é a minha nova turma. E agora eu vou transformar este invólucro em uma grade clicando neste botão. Tudo bem? E agora vamos ter três colunas e eu vou ter que subir, que é o que temos. Tudo bem, ótimo. Então agora praticamente não podemos ver nada porque não há conteúdo, mas vamos começar a adicionar conteúdo um por um. Agora, a outra coisa que eu quero fazer é ter certeza de que a margem é de 24 pixels porque é uma espécie de alinhamento. Fazer o 24 picaretas de margem que temos em nosso grande Alguém disse isso para 24 podemos definir o fundo também para o fundo é realmente assim que a lacuna linha é realmente 40 ele. Então podemos definir a lacuna da linha inferior para 48 pixels, e isso deve ser muito bom desde o início, um surdo normal, algum controle de pressão e e criou o bloco, e isso vai ocupar, você sabe, a primeira seção. E poderíamos chamar esse rapper nominativo normal, eu diria, porque ele não tem propriedades designadas. O que vamos fazer é ir em frente e pressionar o controle, comer e adicionar estão indo bem. E vai ser o mesmo rumo deste conjunto de habilidades. Então eu vou selecionar isso. Ela era para ser uma história, e nós vamos pedir desculpa, cada um não faz cada três. E eu vou dizer que dirigindo 55 picaretas está tudo bem, e vamos em frente e chamar essa seita habilidade. Em seguida, vamos adicionar este parágrafo, que é 18 picaretas é alguém selecionar o rapper normal porque nós queremos que os insights de texto sobre um controle de imprensa comam, e nós vamos escolher uma fotografia, ok? E nós vamos seguir em frente e escolher o parágrafo 18 escolhas é o que temos, Criador. Tudo bem, parece bom. Então vou copiar isso e eu vou vender assim e besta. Agora, a cor disto é diferente. Na verdade, é um acordo leve. Então eu vou adicionar uma aula cinza claro vírgula. Temos um doutorado, vírgula perto. Não temos um complexo cinza claro. Alguém crie uma nova vírgula e chame isso de luz. Ótima. Então, podemos adicionar apenas essa cor cinza claro. Então eu vou ir em frente, copiar o valor e vir até aqui e nós vamos em frente e mudar. Oh, realmente? Pegue o cinza claro. Então eu sou. Só substitua isso. Agora temos alguma margem do fundo, que é imagem 24. Então o que posso fazer é pelo título. Eu posso adicionar uma nova classe de combate são para o parágrafo. Eu posso adicionar um recém-chegado Close. Então eu acho que vou com o título. Tudo bem? E eu vou dizer 24 pixels. Margem inferior. Você vai ficar? 24 picaretas de fronteira. Ok. E tudo que você tem que fazer é adicionar este 24 pixels ao fundo. Portanto, afeta apenas este elemento em particular. Porque este é o único elemento que tem esta classe muda rapidamente para ser X grande aparência boa, você poderia? A próxima coisa vai criar este bloco, por isso impressionar o controlo, comer. Vamos adicionar um bloco, e vamos chamar isso de novo de rapper normal. Ok. E aqui nós vamos adicionar no ícone, você vai adicionar um subtexto. Qualquer um em um parágrafo, certo. Então vamos ao painel de ativos, e temos nossos ícones, então vou começar com os primeiros 100 dias. O ícone do design do produto eu vou rastrear isso e deixar isso lá dentro. Ok? Agora, se você olhar para a largura e a altura, eles são praticamente iguais. Isso é 70 fazer pixels por 72. E eu os exportei como um SPG neste formato em si, por isso deve estar totalmente bem. Oh, a próxima coisa é, nós vamos chamar isso de, hum, ícone de habilidade, ok? E nós vamos adicionar uma margem inferior de 24 pixels, então é como o ícone e vai dizer 24 pixels. Ok. E agora nós vamos adicionar em nosso elemento, que é o controle de cada três pequenas prensa E. E em um título, lá vai B e r h três. Ok. E este vai ser o que temos é 24 picaretas. Eu acho que este é um novo. Então nós vamos escolher h três e vai dizer título ou nós só temos ah, cabeçalho 24 pixels. Então isso é bom. Tudo bem. E vamos copiar isso e enfraquecer Feaster e aqui, aqui, as distâncias. 12. Mas aqui nós já temos a margem inferior de 16 e eu acho que está tudo bem. Nós não temos que mudar para 12 você pode mantê-lo como está. Então eu vou copiar isso, e vamos criar um novo parágrafo 16. Certo? Então crie um novo texto. Podemos chamar um parágrafo em si. Podemos chamar um parágrafo em si E eu vou acelerar essa informação, e isso vai ser o parágrafo 16 correções, e vai haver luz concordar. Então eu vou adicionar uma nova classe de combate, e eu vou chamar isso de luz. Ótima. Só pela cor. Quero mudar a cor deste para ser levemente. Tudo bem, vamos. Isso parece muito bom. Neste momento, também temos essa margem interna de 48 pixels. Podemos fazer isso também agora. Mas o problema é que, se eu fizer isso com o rapper normal, vai adicionar tudo. Então o que eu vou fazer é ir em frente e remover essa aula, e eu vou criar uma nova classe, e eu vou chamar isso de habilidades. Ah, caixa. Tudo bem. E faça isso. Vou adicionar uma batida interna fora 40. Ótimo. Agora o que eu estou fazendo, eu vou copiar isso e colá-lo e nós podemos ir em frente e mudar a informação. Design visual design visual, e você pode copiar todas essas informações e casos aqui e também vai mudar o ícone para que você possa realmente clicar no ícone em si e clicar no ícone de engrenagem e escolher substituir imagem. E você pode clicar nisso para substituir a imagem, tudo bem. E ótimo. Então agora o que podemos fazer é se ele duplicar o segundo, isso vai para esta caixa, certo? E não podemos mudar isso para uma caixa diferente, certo? E isso é porque você pode ver aqui que a posição é uma espécie de conjunto, dedo do pé ou dedo, e nós podemos configurar o manual. Mas o que vamos fazer vai apagar isto. O que fazemos é selecionar esse rapper normal que temos, certo? E eu vou realmente escalar isso para que ele pegue duas caixas. Tudo bem, então agora se você realmente olhar para alguns valores aqui, a extensão da coluna é um, que significa que está abrangendo uma coluna, mas está ocupando dois da rosa. Tudo bem, então se eu clicar neste ícone, você pode realmente ver isso agora. Você ainda não consegue ver. Tipo de ver O que vamos fazer é selecionar isso, copiar e colar. Certo, agora isso fica na terceira caixa. Mas aqui, você pode ver que esse rapper normal está realmente ocupando todo esse quarteirão. Portanto, esta é uma flexibilidade muito legal que o fluxo de trabalho oferece a você. Ok. Vou copiar isto e baseá-lo de novo aqui. E tudo o que temos que fazer é ir em frente e mudar o texto aqui. Tudo bem, entendido. E cole e copie esse Pedaço. Copie isso e baseado. Certo? E também, obviamente, queremos ir em frente e mudar o ícone. Então vamos em frente e mudar isso para ser design de movimento. Vamos mudar este para ser fotografia, e tudo bem, este não mudou. Por alguma razão, alguém vai copiar isso, Besta Copiar e baseado. E isso nós vamos em frente e mudar isso para ser este. Certo? Então agora é assim que parece, e parece muito bom. Agora, nós também temos um interior um corte fora 48 pixels. Então o que eu quero fazer é agora este é o evaporar normal. Então o que podemos realmente fazer agora, já que vamos usar isso várias vezes, vou adicionar uma classe de combinação de 48 pixels. Certo, festa, festa, conserta, certo? E então nós vamos adicionar um, você sabe, preenchimento normal de 48 pixels para que possamos fazer a mesma coisa aqui. Então, ao invés de usar a classe caixa de habilidades, podemos realmente adicionar o mesmo que é o nosso rapper normal e também na classe Kama 48 pixels. Certo. E poderíamos fazer a mesma coisa. Estamos aqui para que possamos chamar esse rapper normal e classe combo de 48 pixels para mover isso para a chamada certa este rapper normal e classe comum de 48 pixels para a direita. Mesma coisa. Aqui chamamos isso de rapper normal e em uma separação de 48 pixels para dirigir. Tudo bem, isso parece muito bom. Hum, sim, é basicamente isso. No próximo vídeo, vamos em frente e fazer disso uma resposta para outros pontos de quebra. Vejo vocês no próximo vídeo. 19. Tornando a seção de habilidades: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e fazer essa parte fora do lado da web, a seção responsiva. Então vamos começar. Tão certamente super simples. Isso está fora da visão do tablet. E no tablet, você parece tudo bem. E nós só queremos ter certeza de que usamos as mesmas configurações. Então temos 80 pixels no topo. Hum, e ah, tudo bem, então nós temos 1551 20 Eu acho que eu vou ir em frente e definir isso para 80 bem, só para ter certeza de que tudo é consistente e o que fazer a mesma coisa que estamos aqui. Vamos fazer este 80 e 80 no fundo e na esquerda vamos definir isto para 40 e no lado direito, também para 40. Tudo bem, isso parece muito bom. Agora, uma coisa que podemos fazer é brincar com o layout um pouco. E o que eu realmente quero fazer é mudar isso um pouco. O que eu quero é que eu quero que a seção de cima ocupe. Você sabe, toda esta seção para o conjunto de habilidades e este parágrafo e então nós queremos um também, e queremos. Então, basicamente, eu estou tentando dizer é que se eu for para isso, eu vou ter apenas duas colunas, certo? E teremos três filas, certo? Então, 12 e três e quero fazer é que eu quero selecionar este rapper normal, que agora está abrangendo duas linhas. Eu queria gastar duas colunas, mas abranger um dro. Tudo bem, então, faca, olhe para ele. Nós meio que temos isso desencadeou um layout agradável e a lacuna de rolagem é de 48 pixels, que é totalmente bom e tem tipo fora do estilo que estamos indo para. E eu acho que isso parece muito bom a seguir. Vamos para a paisagem e as coisas aqui. Parece um pouco estranho, mas vamos tentar consertar. O primeiro é que quero transformar tudo em uma fila. Eu não quero colunas, então eu vou começar reduzindo o preenchimento superior e inferior para 40 devido a ser 64 porque esse é o número que estamos usando. Então 64 no topo e cidade a partir de baixo e 20 à esquerda e 20 à direita, direita indo para selecionar o rapper normal e aqui vamos fazer vai definir isso para ser uma coluna cada, tudo bem. E nós queremos ir para a grade e nós queremos ter certeza de que temos apenas uma única coluna. Então agora tudo parece com isso agora, os problemas. Podemos ver que algo está errado. Vemos que algo está se sobrepondo. Então, se quiser checar, qual é o problema? O que podemos fazer é começar escondendo essas seções. Então, se eu selecionar a seção intermediária e escondê-la por enquanto, podemos ver que tudo está funcionando muito bem. Tudo parece ótimo. Hum, mas tudo parece ótimo. Então, algo está errado com o meio da seção. E se ele realmente começar olhando para essas partes uma a uma, podemos ver que a seção central realmente tem uma altura de 600 pixels. Mas esse não é o caso aqui. 600 pixels waas para o ponto de quebra do tablet. Então estamos aqui para a seção que vamos remover esta altura, definindo-o como automático. Está bem. E quando fazemos isso agora é consertado, certo? Porque estávamos definindo 600 picaretas está fora da seção, Toby aquilo. Mas esse conteúdo era realmente mais de 600 pixels. Então essa é uma pequena mudança que tivemos que fazer. Tudo bem. E isso está parecendo um bom começo por gostar. Podemos ir para o de pontode ruptura longe do celular na única coisa que quero fazer é mudar. Hum, você sabe, esta seção aqui, que é um extra, você sabe, naquele forte 48 semanas de luta que eu não posso querer pronto. Isso é zero? Tudo bem. E agora tudo parece muito bom. Vamos voltar aqui e verificar. E ah, isso parece bem. Tudo bem, então isso é praticamente tudo para este vídeo. E no próximo vídeo, vamos em frente e projetar este gato é er er up esta barra horizontal fora logotipos, e nós também vamos adicionar uma interação super legal e animação a isso. Então eu vou ver vocês no próximo vídeo 20. Construindo o despertar de logotipos: Os nossos rapazes. Então, neste vídeo, vamos em frente e criar esta seção fora do site, que é essa barra de logotipo e fora para encontrar alguns valores aqui. Então eu defini que a altura fora isso vai ser 140 pixels, e a inteligência vai realmente ser 24 VW. Agora. Eu poderia ter usado, você sabe, o com e dito que Toby 340 Mas a razão pela qual eu comecei a 24 VW, você sabe, o que depende do trabalho da porta de visão é porque a interação que vamos criar Não funciona de verdade. Bem, se adicionarmos valores de pixel, tudo bem. E você não pode explicar por que quando eu vou em frente e na interação. Mas, por enquanto, neste vídeo, vamos apenas ir em frente e nos construir em fluxo web. Então aqui estou eu em Ruffalo, e eu vou começar criando uma nova seção em Selecionar o corpo e impressionar Control Eat e eu vou adicionar uma seção. Tudo bem. E agora que temos uma secção, vou chamar esta secção de secção de barra de logótipos. Está bem. Neste caso,não vou usar um rapper porque existe. Neste caso, Não queremos que nada seja restringido ao peso da porta de visão. O que nós meio que queremos fazer é apenas ter certeza de que ele toca ou fora das bordas. Então eu vou apenas ir em frente e começar criando um elemento de grade porque nós queremos que todos estes para ser um grande e eu vou ter seis colunas. Então, porque temos seis habitantes locais, então quando eu clicar nisso e eu vou escolher seis, hum, hum, seis colunas e me pergunto. Tudo bem, aqui vamos nós. E eu vou chamar isso de “Leitura Um de Sonhos”. Bom. Vou chamar este logótipo. Ótima. Está bem. E vamos começar. Outra coisa que eu quero fazer é reduzir a coluna. Gap disse isso a zero porque queremos que eles se toquem. Vou começar criando minha primeira série. Tudo bem, eu vou adicionar um bloco A D, e, uh, dentro disso, eu vou ligar para esta caixa local. Tudo bem? Você pode chamá-lo do que quiser e apenas começar dando-lhe uma altura de 140 pixels. Esse é o valor que podemos ter definido. E o com vai ser 24 v W, que é 24 vista Port Worth. Tudo bem, senhor, disse 24 B W. Que é vista entediada com ele. Tudo bem, isso parece muito bom. Agora, eu vou pegar o logotipo do nosso painel de ativos. Alguém foi pego no primeiro mais baixo. Vou pôr isso dentro do bloco de logótipos, está bem? E nós só poderíamos chamar esse logotipo do cliente. Ok? Agora, a fim de fazer isso no centro, podemos selecionar o elemento pai, que é a caixa local, e ah, lá. Nós vamos em frente e escolher display para ser flexível, e então eu vou dizer um centro de linha e justificar o meio, então esse logotipo entra no centro exato. Agora, o que eu vou fazer é não copiar isso e está tudo bem, e podemos ir em frente e selecionar o logotipo do cliente. Ou uma coisa que queríamos fazer era selecionar a caixa local e você poderia ver que temos esse tipo fora da fronteira, certo? Alguém vai descer e aqui na seção da fronteira, vou mudar a cor para ser a que queremos, que é o nível um que é a cor e o médico. América. Nós nos certificamos de que a largura é um no estilo é, você sabe, com a linha sólida. Tudo bem. Uma cópia nominal esta e base e um Selecione o logotipo. E aqui eu posso clicar neste ícone de engrenagem onde eu posso ir em frente e substituir uma imagem, e eu vou escolher o 2º 1 Copiar isso novamente. Certo, selecione o logotipo e mude para este. Copiar colar. Selecione este. Altere o logotipo para outro e, em seguida, copie com base. Tudo bem. E agora você pode ver que nós somos capazes de rolar para longe e, você sabe, fora da zona real fora do nosso Uber. E essa é uma experiência ruim. Mas vamos consertar isso. Eu vou selecionar esta escolha substituir imagem, e vamos escolher este e um último logotipo. Copiar colar. Deve selecionar esta a imagem do lugar neste. Ok, então se você não pode ter um olhar que o nosso site tosse rola horizontalmente, que nunca é uma boa experiência, você nunca deve estar fazendo isso então o que nós vamos fazer é quando nós adicionarmos uma nova propriedade, certo, Então nós vamos fazer é eu vou selecionar a seção de bar local, certo? A seção inferior da barra ocupa todo o molhado da porta de visualização. Tudo bem, então está ocupando. Se ele disse isso a 1440, está realmente ocupando. 14. 40 picaretas é agora. Há um estouro de cores de propriedade, e agora o estouro é definido como visível, que significa visível mostra o conteúdo que transborda seu contêiner. Ok, então agora o elemento filho, que é esse logotipo grande, está meio que transbordando a seção local da barra porque eles o setor de transbordamento visível. Mas se você for em frente e definir esse batedor dois, o que significa oculto esconde conteúdo transbordando sem adicionar uma barra de rolagem, ele vai clicar nisso. E agora, se você tentar rolar horizontalmente, você não pode fazer isso porque o que está sendo transbordado, é um tipo de escondido e está sendo deve e cortado direto para o veterinário da tela. Então, se eu ir em frente e dizer isso a 1920 você pode ver que ele está sendo cortado, e ele está tomando o tamanho fora, e cada elemento está ocupando o tamanho fora da porta de visualização. Está calculando o trabalho com base no tamanho da porta de visualização. Então dissemos 24 VW. Então isso é basicamente 1920 em 24%. Tudo bem, crédito para a pessoa do porto de vista com tudo certo. E, no entanto, basicamente, sobre como você constrói isso em referência e no próximo vídeo, vamos em frente e na interação para torná-lo muito divertido e divertido. Vejo vocês no próximo vídeo. 21. Animação do logotipo: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e animar esse lindo bar e vai ser super divertido. E é muito bom quando você interage com ele. Então estão super entusiasmados. Então, vamos começar agora. A coisa a notar é que esta é uma interação complexa que ele precisa. Não é tão simples como você sabe, ir até aqui e fazer qualquer um desses porque estes realmente não ajudam. Temos que usar a guia de interações. Ok, agora que você quer fazer é quando você está começando, você tem que identificar o gatilho que você quer ter a animação com. Quando eu digo gatilho, quero dizer, que tipo de ação vai começar ou começar a animação? E se você vê aqui, nós temos dois tipos. Temos elemento gatilho. E nesta página, acionar agora no gatilho elemento, temos um par de opções, como a maioria parar, quase clicar, Most hover. A maioria se move sobre elemento Moskal entrevista ao rolar em vista, você sabe, assim por diante e assim por diante. E também temos coisas como gatilhos de página e página Senhor movendo Vieux Port pagas rolagens e páginas selvagens rolando agora dependendo do tipo de animação ou interação que você deseja criar. Você tem que escolher o gatilho apropriado. No nosso caso, vamos escolher este que diz, maioria se move em View Port. Se você olhar para as informações que você sabe que ele diz animar enquanto o mouse se move sobre a porta de exibição ao longo do X e acesso branco, então vai acontecer é começa. Clique nisso e vamos começar criando uma nova animação. Ok, então eu vou clicar em Iniciar Uma nova animação vai escolher jogar animação do mouse. Tudo bem. E agora, eu já tinha criado uma vez que eu vou acreditar nisso. Então vamos criar um do zero, certo? E vamos começar criando o plástico clicando no segundo mais, e eu vou dizer animação barra de logotipo. Ok, então agora basicamente, temos quatro propriedades que podemos definir. O eixo X tem duas propriedades. Aquele para a esquerda e quer está à direita e por que o acesso é um na parte superior e outro na parte inferior. No nosso caso, nós só queremos fazer a animação se mover ao longo do eixo X. Nós realmente não nos importamos com o eixo Y nesta animação em particular. Então o que eu vou fazer é clicar em mais direito, e eu vou escolher qual propriedade eu quero? Dois inimigos que eu quero animar o movimento, a escala, a rotação, a capacidade, o filtro. O que é que eu quero, Animal? Neste caso, eu quero animar a propriedade move. Então, clique em movimento. Tudo bem. E agora vemos que procuramos esses dois quadros-chave. A outra coisa nota é que nós temos este ponto de exclamação agora que não está recebendo o ponto de exclamação é porque nós ainda não definimos nenhum valor para isso. Quanto deve se mover? Certo. Isso é o que queremos. Mas antes de fazermos isso, a primeira coisa que você quer fazer é ter certeza de que você está movendo o elemento certo . Nesse caso, não queremos mover a caixa de elemento. Queremos mover a grade do logotipo para a direita. Esta grade inteira, queremos que nos movamos, sabe, de fora e de dentro da tela. Então o que vou fazer é, já que neste caso, escolhemos a caixa local. Na verdade, isso é errado. Então o que podemos fazer é clicar com o botão direito, e podemos dizer mudar de alvo e eu estou indo. Eu vou até o navegador e vou escolher a grade do logotipo. Ok, então agora você pode ver que o grande local agora é o elemento que vai ser movido quando eu adicionar alguns valores vai fazer a mesma coisa aqui, certo? Clique em alterar, tigre e grade de logotipo. Então, às vezes, se não funcionar, o que podemos fazer é fechar isso, e podemos selecioná-lo aqui, alguém clicar nisso, e então isso se aplicará a isso, Certo? Então, há duas maneiras de fazer isso. E aqui, vamos começar a definir os valores Agora, em um ponto zero quando eles quando o mouse está sobre a esquerda da tela, nós poderíamos ter desejado olhar exatamente como ele sabe. Então eu vou definir um valor fora do X para ser zero. Tudo bem? Porque queríamos ser o que não quiséssemos nenhum movimento. Para onde você se mudou? Quando mudamos os 100, quando você vier para o lado, nós queríamos mudar, então eu não sei se eu vou ir em frente e definir. Mova este controle deslizante. Tudo bem, então agora você pode ver que todo o logotipo grande está se movendo. Mas quanto vamos movê-lo? Certo? Porque se eu definir um valor de pixel, o que vai acontecer? Esse inspetor fora da tela vale a pena? Ele vai mover apenas 500 pixels, e isso pode não estar certo. Muito bem, deixa-me dar-te um exemplo. Então vamos em frente e manter o aumento. Então vamos dizer isso a menos 800. Ok, então agora está na borda certa fora da tela, certo? Então, se ele realmente ir para 14 40 picaretas está tudo bem e você olhar para ele, tudo bem, e vamos jogar este fora. Considere isso à esquerda. Parece bom, mas sob escrevê-lo bastante não, você sabe, porque temos este espaço extra porque a coisa toda está se movendo 500 escolher 800 pixels, independentemente fora da tela molhada. Então, como nos certificamos de que ele se alinha corretamente, você sabe, para o oeste fora da tela. Então aqui vai um truque legal. O que eu quero fazer é, em vez de ver 800 fotos. Vou definir uma porcentagem. Alice, vou dizer, vamos menos 30%. Ok, é a eleição rolou para fora. Vou aumentar um pouco até o gelo até que ele se alinhe perfeitamente. E eu acho que em 44% parece muito bom. Ok, agora, a outra coisa que precisamos fazer é que você pode ver que o ponto de exclamação ainda está lá, mesmo que definamos valores. E a razão para tocar é porque um é em termos de porcentagem no outro é em termos de pixels. Então, este, eu vou definir para porcentagem. Ok, ótimo. Então, agora vamos dar uma olhada. Tudo bem, então vamos tipo de retirada 40. O menor tamanho de tela e tudo bem. Ele parece muito bem, certo? Parece ótimo. Você pode ver isso. Está respeitando os valores percentuais. Muito bem, vamos passar para 14. 40. Tudo bem? Sim. Parece o mesmo. Parece que parece. Parece muito bom. Vamos tentar em 1920. Tudo bem. E, no entanto, isso também parece muito bom, e funciona muito bem. Incrível. Então é basicamente isso. Agora, se você quiser, você pode ir em frente e mudar isso para 38 44 2 sementes Ana, Foco. Resolução sobre a Procuradoria. Sim, vai parecer muito bom. Tão certo. Hum, sim, isso parece ótimo. Incrível. Certo. Então vamos voltar para 1914 40 como então é muito isso sobre como você vai em frente e criar essa bela interação para este bar local e para este local, mas e é super simples. Se você não entendeu, eu sugiro que você assista o vídeo novamente lentamente, um por um. E vai funcionar para vocês. Então isso é praticamente tudo para este vídeo, e eu vou ver vocês no próximo vídeo. 22. Tornando o logotipo: Tudo bem, pessoal. Então, neste vídeo, vamos avançar e fazer com que esta seção de barra de logotipo arrisque outros pontos de quebra . Agora que vamos pensar nisso é se você realmente olhar para ele, a interação que criamos no vídeo anterior estava realmente acontecendo, você sabe, porque estávamos usando um mouse e um cursor, certo? E é por isso que eu estava trabalhando. Mas em um tablet e em uma paisagem e um retrato móvel retrato, ponto de ruptura, esse tipo de interação não seria possível. Então, infelizmente, teríamos que remover essa interação para os outros pontos de quebra. Mas você ainda pode tê-lo na área de trabalho porque é super divertido de ter, certo? Então vamos em frente e fazer isso. O que vou fazer é aqui nas configurações de animação. Isso aciona opções bem ali? Eu posso escolher. Não decidir gatilho sobre a parada acima tablet para paisagem Importante. Vou desmarcar para os outros três porque ele queria apenas para a área de trabalho e acima, certo? Isso é o que queremos. Agora, se eu for para a parte do tablet, o que vamos fazer é ir em frente e mudar isso e vamos torná-lo semelhante ao que temos aqui. Tudo bem, então vamos para isso. Então vamos pegar o logotipo. Ótima. E aqui na parte inferior, basicamente. Mas queremos é colunas. Tudo bem, eu vou remover todas as colunas extras, então certifique-se que eu tenho certeza que nós apenas temos colunas, tudo bem. E, hum, você sabe, nós podemos apenas ir em frente e nós também podemos adicionar Ah, então a diferença pode ser zero até mesmo na rosa. Podemos dizer isso a zero e conduzir. Agora, a razão é não tomar todo o espaço é por causa do fato de que nós tínhamos definido um, hum fora 24 nós w O que eu vou fazer é ir em frente e apenas dizer isso ou fazer tudo certo, então isso ocupa o inteiro com isso é dado. Então isso é praticamente como vai parecer, e este é o estilo que estamos indo para agora. Se você olhar para o ponto de ruptura da paisagem, ele deve ser praticamente o mesmo. E eu acho que isso está olhando menina bonita e para tablet break e para mobile break point, vai parecer algo como isso. E eu acho que isso também está parecendo muito bom, certo? Eles vão, então é basicamente isso. Mas se você voltar para nossas mortes Tropic Point, ainda podemos ter o efeito de animação que está acontecendo. Parece fantástico. Então isso é praticamente tudo para este vídeo. E no próximo vídeo, vamos em frente e criar a próxima seção fora estão chateados, então vamos ver vocês no próximo vídeo. 23. Construindo a seção de projetos: Tudo bem, pessoal. Então, nesta guerra de vídeo, Granado vai criar esta seção. Agora, isso parece um pouco complicado de construir, e você pode ver que esse oficial guarda algum tipo de arame daqui para explicar como é. Mas é bastante simples, para ser honesto. Então vamos entender como isso funciona. A primeira coisa é, você quer começar, obviamente, criando uma seção que é o nosso passo habitual. Começamos com uma seção, e dentro dessa seção, vou criar um rapper, certo? E esta volta vai ser a minha grade, tudo bem, porque eu vou ter que segurar a coluna. E como você pode ver, eu criei um bloco Ded, que é esta cor amarela o bloco para o interior esquerdo quer, e vai ser para o interior direito. Então nós temos duas colunas agora na primeira coluna, eu vou adicionar Wonder Block para este texto, certo? E para esta imagem e o subtexto, vou criar outro desenvolvimento e colocar a imagem aqui e os elementos de texto. Ou aqui. Certo. Então, basicamente, temos 1232 blocos no lado esquerdo, e temos 123 no lado direito, e este vai ser para o nosso botão. E isso vai ser para o nosso texto, e você tem um texto de imagem, imagem, texto, imagem, texto e imagem e texto. Eu acho que talvez seria muito mais fácil se eu fosse em frente e mudar a cor fora disso para outra cor lá. Vá. Acho que isso faz muito mais sentido. Então é assim que vamos seguir em frente e estruturar. Então vamos começar. Então aqui estou eu em Buffalo. Eu vou ir em frente e fechar isso, e nós vamos selecionar o corpo e vamos começar criando uma nova seção controle de imprensa e digite seção. E vai haver uma nova seção onde vamos chamá-la de nossa seção de projetos. Tudo bem, agora aqui vamos começar, obviamente, criando uma pilha à esquerda e à direita de 72 fotos e 72 correções, certo? E seu bloco nuclear de div, que vai ser nosso rapper, vai criar um impasse, e vamos chamar este ladrão de direita rapper tem as mesmas propriedades de costume com o 100 altura fora de 100 Maxwell de 1926 é Agora mesmo. Queremos criar uma grade. Queremos transformar este rápido integra e digitar. Ótimo. Agora já temos dois tipos de grande nesta nota. Tudo bem, é um pão de duas colunas, mas eu acho que isso pode ser diferente quando nós torná-lo responsivo. Então, de preferência, o que eu vou fazer é remover este grande, e eu vou dizer projetos. Ótimo. Vou criar uma turma nova, e vou fazer dela um novo item de grade para que não cometamos erros. E eu vou em frente e clicar em ótimo, e nós vamos em frente e nós vamos ter apenas duas colunas e pensar. Ok, eu não pego agora. Nós ainda não conseguimos ver nada porque nós definimos valores e para tudo, é tipo fora, você sabe, colapso juntos. Mas está tudo bem. Vamos começar criando nosso primeiro elemento de texto, que é este desenvolvido. Então eu vou criar um desenvolvido primeiro, e poderíamos chamar esse bloco normal. Certo, porque não temos propriedades atribuindo a isso. É só para agir como um contêiner para todos os outros itens que temos aqui, certo? Rapper tão normal. Ok, agora, dentro disso, eu vou criar um novo bloqueio, ok? E isso também vai ser normal, caçador. Ok? E vai haver dinheiro para a parada na próxima área e vamos fazer é ir em frente e ah, procurar por esta seção que criamos, certo? Então vamos copiar este texto sobrenadante. Copie isso e baseado aqui, e vamos copiar isto e basear isto aqui. Tudo bem, então agora vai ficar assim, e tudo que eu vou fazer é ir em frente, clicar duas vezes, copiar isso e colar. Tudo bem. Muito bom. Agora, no que diz respeito ao grande, a outra coisa que queremos fazer é dizer a lacuna da coluna para 24. Desculpe. Não para 40 24 cão Africano. Deixe assim. Agora vamos em frente e disse isso para 14. 40 pixels. Eso agora que podemos realmente ver como ele se parece no design, e ele se parece muito com isso. Eu fui em frente e dei alguma distância em 48 pixels da esquerda. Agora aqui é um 72. Mas este 72 é depois de considerar os 24 pixels batendo aqui. Então 70 a 70 a menos. estagiário quatro é 48. Então eu vou adicionar Não, nós já temos essa classe mais calma, mas temos 48 pixels para a direita. Vou aplicar isso. Então agora parece perfeito. E também, você pode ver que, você sabe, nós temos alguma distância no topo, que é em torno de 120 picaretas é e aqui nós não temos nenhuma distância. Então eu vou selecionar a seção de projetos de seção, você sabe, o elemento mais paciente. E para a seção eu vou dizer sob qualquer correção na parte superior e 120 pixels na parte inferior. Então nós damos isso, nós temos este bom espaçamento. Perfeito. Agora, para o rapper normal, basta encontrar. E vamos ter um preenchimento inferior de 80 pixels? Sobre a margem de 80 picaretas é então vamos fazer é eu vou criar uma nova calma através, tudo bem, tudo bem, porque nós não fazemos, porque nós estamos adicionando várias novas propriedades que a mesma classe existente, então nós criamos um novo Um. Chamada s 80 escolhe um fundo e eu vou dizer sublinhado M para margens. E eu vou até aqui e vou aprofundar isto, está bem? E você pode realmente renomear isso de 48 pixels, direita para 48 Escolhas é batida certa para tapinhas. Tudo bem, então é muito mais compreensível. Tudo bem, e ótimo. Então agora o que podemos fazer é criar outro bloco, que vai ser o nosso trabalho. Bloqueie algum controle reprimido. Coma adicionando um bloco. Ok. E só para ter certeza de que este é o bloco é a criança fora deste rapper normal, então este é para todo o bloco esquerdo. Isso é para o texto, e isso é para, você sabe, a área de trabalho. Certo? Ótimo. Então o que vamos fazer é ir em frente e voltar a chamar-nos em normal, rapper. Tudo bem? Porque não temos nenhuma propriedade que vamos atribuir a isto. Ok, agora eu vou trazer a imagem alguns ir em frente e começar por entrar em nosso elemento de imagem , então eu vou em frente e pegar uma imagem. Agora, até agora o quê? Vimos que usamos uma imagem de fundo para ser criado um bloco Duke, e adicionamos uma imagem. Faça isso. Agora, essa é definitivamente uma maneira de fazer isso. Mas há várias maneiras de fazer isso. Isso nunca vai usar um elemento de imagem. Então uma imprensa controlou E e busca por imagem. Você pode ver que a imagem é um elemento real. Então isso é o que eu vou fazer é ir em frente e adicionar a imagem para que ele vai ser chamado como o Projeto Um vai arrastar isso e soltar essa visão. Tudo bem, muito bem. Agora eu vou ligar a opção A diz que eu D p I. E o que isso vai fazer é isso vai evitar picaretas. A exaltação em uma escrita são deslocados. Então, se você tem um arquivo de invenção, o que nós definimos aqui é que nós fomos, mas nós mesmos, uma certa altura fora 626 está tudo bem, eu vou em frente e ter certeza que isso fala perfeitamente. Mas mais tarde, Mas agora a altura é definida para 620 pixels. Então o que? Ia vender esta imagem, e vou chamar este projecto de imagem de projecto um, e vou até à altura. 610 correções 620. Ok, se você ver, nós ouvimos que o problema é que ele é meio pixelado, certo? É uma espécie de alongamento, e parece estranho. Então, a verdadeira solução é que temos uma opção aqui. Chame-nos em forma. Agora mesmo. Isto é super útil. O que podemos fazer é certo. Clique nele. Eu tenho cinco opções que tenho, Phil, eu tenho conter. Tenho um disfarce que já fiz. Fui reduzido. Vou em frente e escolher o disfarce. O que o disfarce vai fazer é ir para o pé. Vá em frente e cubra todo o espaço fora do recipiente em anarquista. É a altura de 620 fotos, tudo bem. E o trabalho que é definido com base no nosso invólucro. Então, qualquer espaço que tenha, vai em frente e cobri-lo. Então, vai aumentar a escala, mas vai fazer com que pareça bonito. Tudo bem? Vai cortá-la, certificando-se de que as proporções são as mesmas. Mas é assim que vai funcionar. Ótimo. Agora isto está feito. Então a próxima coisa que você faz é criar outro bloco para este. Ok, então vamos em frente e criar um novo bloco. Então vou pressionar o país e dizer que eles bloquearam. Tudo bem? Agora, por isso, não vou dar uma aula normal. Nós vamos dar-lhe classe diferente porque temos algumas pessoas adicionando e vamos atualizar interações em animações para este eso Vamos realmente ir em frente. E com isso para bloquear, , vou dar uma aula, e vou chamar essa descrição do projeto. Tudo bem? Descrição do projeto. E vamos em frente e começar adicionando um pouco de preenchimento à esquerda e à direita. Então temos 40 pixels no topo. Temos 32 à esquerda e à direita, então vou começar adicionando 32 pixels à esquerda. 32 picaretas está à direita. 40 picaretas estão no topo, e 40 picaretas estão à direita. Ok, então isso é o que temos agora. A próxima coisa é, as mulheres adicionaram uma imagem de fundo para a cor de fundo. Então eu vou selecionar o sculler, e eu vou escolher o nível um. Então temos essa cor. A próxima coisa vai acrescentar a isto, que vai ser o nosso elemento H três. Então, vou pressionar o controle. E. Desculpe-me por ir agora. Queremos usar título porque este é o nosso título fora do título do site do projeto. E isso pode ser importante para propósitos Seo. Então vá em frente e diga isso a cada três e aqui. Vou escolher a posição 24. Certo. Parece ótimo. Alguém copie isso na sua cabeça e encare isso. Tudo bem. Agora vamos ver a distância entre estes dois que temos em torno de 18 picaretas é que eu acho que eles devem ter 16. Tudo bem, então você realmente se trocou em 216, certo? E ah, agora temos 16 picaretas, está na parte inferior, o que é perfeito. E fantásticos em uma imprensa controlada comer. Tudo bem. E eu vou adicionar um parágrafo, e este parágrafo será nossa descrição, então haverá parágrafos de 18 pixels. Vou copiar isto e baseá-lo. Então por aqui. Mas podemos fazer é aplicar o parágrafo 18 correções que parece bom. E a fonte também é a cor do telefone é luz. Ótimo. Então vamos adicionar isso também. Então nós já temos a classe de combinação existente que usamos assim em applique em que em. É isso. E isso parece muito bom agora. Tudo o que temos que fazer é ir em frente e selecionar este trapper normal ou oito, que contém a imagem. Então, basicamente, estou selecionando aquele que contém a imagem e a descrição do projeto. Vou selecionar isto, está bem? E eu vou adicionar um pouco fora de preenchimento na parte inferior, que é que é em torno de 24 pixels. Então eu vou adicionar um estofamento inferior fora 24 agora, porque este é o rapper normal. Não podemos querer ter cuidado com isto porque já temos demasiadas classes de combinação. Então eu vou adicionar um novo combate mais e chamar este 24 reparador, bloqueá-lo M de margem. Então nós temos uma nova classe de combinação para isso, e eu quero dizer 24 pixels do fundo. Tudo bem, então agora vou em frente e selecionar o rapper normal. Vou fazer uma cópia do controle pressionado, ver Contrave, e isso vai acabar com isso. Agora a única coisa que temos que fazer selecione esta imagem. Podemos clicar no ícone de engrenagem. Podemos escolher. Substitua a imagem e podemos escolher o nosso projeto número dois, que é por aqui. Tudo bem, tudo bem. E nós poderíamos rapidamente ir em frente e mudar os detalhes. Copiado isso e pedaços. Agora, eu não fui em frente e mudei. Eu sei que eu não alterei os textos fora destes, mas quando eu quando você tem o novo arquivo, você terá as novas descrições para que você possa se referir que na minha versão. Eu não, uh é a mesma coisa, então eu não fiz nenhuma mudança. Tudo bem, isso parece muito bom. Certo? Ok, então o próximo não vai é Oh, aqui nós temos este estofamento extra fora de margem extra de 24 agora, nós não queremos isso para este bloco. Tudo bem? Queríamos isso só por isso. Vou escolher o rapper normal para esta secção, está bem? E eu vou seguir em frente e acreditar nisso, certo? Porque não queremos isso para este elemento. Nós só queríamos esse elemento, certo? Só queríamos isto por isto. Não precisamos dessa parte de baixo. Vou remover a classe de combate A Z pode ver que há um rapper normal, certo? Então eu vou selecionar isso o todo rápido não normal, que atua como um que é o que está à esquerda. Eu vou copiar isso, e eu vou prová-lo para que ele venha para a direita. Ok, agora, muito simples. O que eu vou fazer é selecionar o rapper normal parar e excluí-lo para que esta estrela para o início e quero vendê-lo. Eu sou a mesma imagem Substituir, e eu vou descer e escolher o projeto número três, ok? E não vou mudar o Thetacticsroom. Copie isso e vá em frente e mijou isso e ah, nós crescemos, selecionamos, copiamos e andamos. Eu vou mudar a imagem disso também para que você possa obter ícone, escolher, substituir imagem e nós vamos e escolher o projeto número quatro, que é aqui. Então vamos olhar rapidamente para isso. Como isso parece no celular em outros pontos de interrupção. Então é assim que parece em 1920 picaretas é e eu acho que parece bastante bom. Não parece tão ruim assim. Eu meio que estou gostando. Ótimo. Então vamos voltar a um 1440. Incrível. Agora temos outro, que é a vista. Todos os projetos manteiga. Então nós vamos fazer é eu vou ir em frente e criar um novo bloqueio, ok? E vou chamar esse rapper de botão. Certo, então temos um botão, caçador. O que vou fazer é nesta garrafa. Largue isso. Eu vou dizer, por que você não toma 100% fora da altura, ok, ok, que você que você que é o que resta. Tudo bem, então agora ocupa 100%. Mas o problema é que ocupa 100% de desconto em toda a página, que não é o que queremos. Então, em vez de dizer 100% eu vou ir em frente e realmente calcular o manual que eu vou pressionar estão no meu teclado para pegar, hum, a porta do médico raiva, e eu vou ir em frente e apenas meio que tentar descobrir a altura. Então nós saímos em 244 picaretas é altura, então eu vou dizer este rapper botão. Eu queria ser 244 pés x para fotos, e nós temos algo. Parece com isto. Talvez queiras encolher isto um pouco. Tudo bem, então parece perfeito. Hum Yep. Tudo bem. Acho que isso parece muito bom. Agora, obviamente, isso será perfeito quando vocês tiverem o design. Mas, por enquanto, tenho de ter a certeza de que é perfeito para o pixel. Eu cometi alguns erros, , quando eu estava projetando. De qualquer forma, este é o nosso rapper de botões. Agora, neste, eu vou adicionar este botão para que ele vai estar no centro, fora da tela, no centro, fora desta caixa, não importa quadro. Assim localizado no novo componente em um novo elemento colares botões em um país de imprensa e digite botão. Então você tem três tipos de armas no normal, mas um botão de rádio no fundo da fazenda escolherá o normal. Mas neste caso, tudo bem. E vou ligar para este CD, certo? Este vai ser o nosso nome fora do nosso fundo, que vai ser chamado à acção. Tudo bem. E o que vou fazer é selecionar o caçador de baixo. E já que queremos que o elemento filho esteja no centro, sou como o pai, e vou flexionar o pai, e vou dizer o nosso centro de linha e justificar o meio. Então agora está no centro fora desta área. Ok, vamos em frente e verificar as propriedades. Então o primeiro 1 é que vamos olhar para a frente. É o botão 18 pixels e seu barco. Tudo bem, então eu vou definir aumentar o tamanho da varanda. 18 fotos começaram a ferver. Ah, a cor da fonte vai ser branca, preta sobre branca, e nós não queremos nenhum fundo. Então eu vou remover isso e disse que 20 a capacidade ou o Alfa vai ser zero. Em vez disso, vamos ter um valor, e a cor vai ser o nível um. Tudo bem, deixe-me ver a cor. Oh, é uma bolha. Então vamos selecionar isso e mudar a cor para a cor roxa que temos. Tudo bem. E agora vamos olhar para o espaçamento. Então, se selecionarmos o elemento caixa, podemos ver que ele tem 2032 pixels à esquerda e à direita e 24 na parte superior e inferior. Então vamos adicionar esse preenchimento aqui em um seleto da cidade e aqui em vez de 15 analistas no estudo, também. E isso você faz e 24 e 24. E agora podemos salvar todos os projetos. Então eu vou clicar duas vezes sobre isso e chamar isso de vista. Todos os projetos, certo? Tudo bem. Então, agora, se você for e olhar para isso em outro ponto de ruptura, vamos em 19 treinamentos. Você ainda pode ver que, você sabe, é meio que no centro, e parece muito legal. Oh, talvez você, vamos para 38. 40, certo? As coisas estão muito boas, e estou gostando muito. Tudo bem, então isso é praticamente tudo para este vídeo. No próximo vídeo, vamos em frente e adicionar algumas interações sobre os elementos. Então, como vocês no próximo vídeo 24. Animação de projetos: Tudo bem, então neste vídeo, vamos em frente e adicionar algumas interações agradáveis e divertidas fazer esses elementos agora, há praticamente qualquer coisa que você pode fazer, mas eu vou mostrar a vocês apenas alguns deles para que vocês tenham um Idéia fora. O que é que estamos procurando? Então vamos começar com a cidade agora. A animação que vamos fazer isto vai ser no estado pairar vai em frente e não pairar, o que vai ser uma combinação perto. Agora, aqui estão algumas coisas que eu quero primeiro. Quero mudar a cor, por isso vai ser bolha. A próxima é que eu quero ir em frente e adicionar um pouco off drop shadow foram ativados nesta configuração de sombras caixa . E aqui eu vou definir a direção para 180 para que a sombra fique em direção ao fundo. Eu mudaria a cor. Isto para ser bolha. Tudo bem. Os animais disseram que a distância era algo como 50 e talvez isso seja demais. Talvez tenhamos considerado 20 e o sangue podemos dizer isso a 60. Agora, isso parece bem forte. Então o que podemos fazer é ir para a cor e reduzir a opacidade para dizer alguns, como 50% talvez até mais talvez, tipo, 30%. Acho que é um bom número. A outra coisa que eu quero fazer é que eu posso Eu quero movê-lo um pouco para cima quando eu tenho ele sobre ele. Então o que podemos fazer é aqui temos o efeito de propriedades transformadas. A Locanda. Temos quatro propriedades mover, habilidade, rotação e habilidade. Vou escolher o White, que é a posição branca, e vou dar um número negativo de dizer negativo, Fife. Tudo bem. E isso vai mover isso para cima. Cinco consertos, e isso é praticamente tudo. Então o que precisamos fazer é ter certeza de que aplicamos as transições que está facilitando, fazer a sombra caixa de cor e transformar. Então, vamos voltar para o “não-estado”. Certo? E aqui vamos nós para a transição vai começar escolhendo a transformação. Tudo bem, quando eu disse isso para 350 milissegundos, nós vamos dizer que ele está fora do tribunal e eles vão ir em frente e escolher o próximo, que é a cor de fundo, a cor de fundo definir isso para 350 e flexibilizar é vai ser Estes são tribunal. E a próxima coisa vai ser, hum, hum, a sombra da caixa. Tudo bem, então eu vou definir isso também para 350 e aliviar o dedo do pé é a nossa quadra. Então, se você ir em frente e dar uma olhada na maioria dos pavimentos Oh, não. Então, agora, se você ir em frente e dar uma olhada na interação, podemos ver que parece muito bom, certo? Parece legal. Sim. Ótima. Agora vou em frente e adicionar algumas interações. Faça esta seção também. Tudo bem, faça essas seções. Então vamos fazer isso agora. Uma coisa que eu esqueci de fazer é que eu queria fazer cada um desses itens ligados bloco porque agora, você pode ver que rapper normal como este é um bloco div, que significa que eu não posso realmente clicar nele agora. Isso vai ser um problema para mim, porque eu quero clicar em cada um desses ativos. Então o que eu vou fazer é um mexicano ou clique direito, e eu vou mudar, digamos, digamos, este convertido para bloco de links. Tudo bem, então agora esse rapper normal agora é na verdade um bloco de links que eu posso clicar, certo é a mesma coisa. Estamos aqui, vamos selecionar o rapper normal. Eu vou clicar com o botão direito, e eu vou dizer converter para link Block. Ok. Sob a mesma coisa aqui. Quero dizer rapper normal. Eu vou gostar de clique e devo dizer, convertido bloco link na mesma coisa ou aqui vendendo o rapper. Ok, certo. Clique e diga converter para bloco de link. Ótima. Agora o que eu quero fazer é que eu meio que quero mudar o nome disso. Eu meio que quero removê-lo e dar-lhe uma classe diferente porque só esses quatro elementos estão indo dedo do pé tem que vai ter uma interação particular sobre. Vou fazer isso com base na turma. Então, cada classe, cada elemento que tem uma classe em particular vai ter na animação. E nós usamos esse rapper normal de classe em tantos lugares diferentes, então eu não quero afetar todos esses elementos diferentes. Alguém remova isso e eu vou criar um novo número de turma. Chame este bloco de projeto nosso rapper projeto. Acho que é um bom nome. Então vai ser o Project Rapper. Tudo bem? Este também vai ser o Projecto Crapper. Ok, aqui. O que fizemos é que temos uma aula de combate, então vou apagar os dois. Eu quero ver o Projeto soltá-lo e eu vou criar uma nova classe de combate, e eu vou chamar isso de fundo 24 fixador sublinhado m para margem. E eu vou dizer 24 correções ou aqui então temos 24 escolhas é e a outra coisa que eu quero fazer é selecionar este, o rapper normal. Tirá-lo desta chamada este projeto rapper e foi 24 pixel parte de marcha. Agora eles querem fazer é que você pode ver que nós temos esse tipo de direito subjacente. E se você olhar para o texto real direito, nós não olhamos. Nós temos o tipo de para decoração, e se você clicar nele, você pode dizer que ele está dizendo que o valor está sendo herdado de todos os links. Agora, se eu desmarcar isso, ele ainda não o remove. Tudo bem? Porque o que está acontecendo é que isso não está vindo disso. Se eu selecionar o link bloquear nosso rapper projeto religioso que tem este sublinhado e que está sendo encaminhado sobre o dedo do pé o elemento chili, que é o texto. Então eu vou falar com o pai, que é o rapper do projeto, e eu vou desmarcar. E agora isso vai em frente e remover que estão na linha todos os outros lugares vão nos colocar de volta para 14. 40 pixels. Eu acho que uma coisa que eu realmente quero fazer é que eu acho que eu já tinha o tamanho deste. Eu sinto que 620 pixels é bastante longo. Então vamos em frente e mudar isso. Faça algo como 400. Acho que é mais fácil para o gelo escanear e olhar. Acho que sim, sim, é um número melhor. Tudo bem. Poderia Então você não tem, Vamos em frente e adicionar a interação. Então vamos começar selecionando o rapper do projeto porque quando eu passar o mouse sobre o rapper do projeto quero que alguma interação aconteça. Eu vou para o material de interação e eu vou clicar no elemento maior e eu vou escolher a maioria pairar. Então temos que definir o que acontece quando escolhemos em pairar. E o que acontece quando ele mastiga em pairar para fora pesquisa escolhendo o que acontece em pairar. Eu realmente vou começar uma animação clara em nova animação, e eu vou chamar este projeto pairar. Ok, então uma coisa que eu faço é eu quero escalar este quarteirão inteiro. Isso vai ser o número um. E a interação do ciclo é que eu quero mudar a cor disso. Esse é o número dois. E o número três é que eu quero mover isso um pouco para o lado direito. Tudo bem? Só para dar, tipo, um bom efeito divertido. Tudo bem, então vamos em frente e fazer isso. Começará escolhendo a propriedade que queremos mudar. Então queremos escalar porque queremos escalar o projeto. Rapper. Ok, agora, aqui temos três propriedades de seleção, classe de elemento ou interação acionada neste caso. A classe e o gatilho de interação são praticamente a mesma coisa, porque o gatilho de interação é Projeto Rapper e a classe também é projeto Rapper. Porque queremos que esta animação seja aplicada a todas as outras três classes também. Ok. E vamos escolher o gatilho de interação. Ok. E o que eu vou fazer é ir em frente e apenas aumentar a escala em 1.2 Ok, Agora, escala obviamente é, na verdade, nós fora de um. Então não começa com zero. Não começa. Ele se corrige na forma de para porta positiva. Então um é o nosso normal, e 1.2 é, você sabe, 2% maior do que o que é. Então vamos deixar isso como está. A próxima coisa que fazemos é ir em frente e escolher a cor do texto. E agora não queremos mudar a cor do texto fora do projeto de rapper porque não há texto. Queremos escrever, como mudança, como mudança, alvejar qualquer um para escolher a posição 24. Este é o painel móvel. Agora queremos ir em frente e dizer aula de efeito, ok? E você também quer dizer efeito apenas Crianças com esta classe. O que? Quero dizer que quando isso se tornar um gatilho, tudo bem, não precisamos criar uma nova animação. Podemos aplicar a mesma animação a isso, e ele irá em frente e animar este título porque é uma criança fora deste elemento particular que estava pairando sobre. Certo, então vamos dizer apenas chillin com essa aula, certo? E agora temos que definir cor. Então eu vou escolher este tipo de uma cor ciana que nós temos. Ok, você pode ver isso aqui. O próximo assassino vai seguir em frente e escolher movimento. Ok. E agora eu vou em frente, certo? Clique em, altere o alvo e escolha-o para este. E aqui em movimento, eu vou movê-lo através do X por alguns pixels. Então vamos dizer que apenas comprar 10 picaretas está bem? E agora o que vai acontecer é que se jogarmos isso, você pode ver que tudo aconteceu são três vezes diferentes. Ok? Mas queremos que todos eles tenham que acontecer ao mesmo tempo. Então o que eu vou fazer é selecionar este que você poderia ter arrastado e combiná-lo com aquele. Selecione este e combine-o para enfrentar. Agora, você também pode ver que você pode adicionar um mortal a cada um dos elementos. E você também tem uma opção onde você pode começar com ou começar após uma ação anterior. Neste caso, queremos que isso comece com a ação anterior. Também queríamos que isto começasse com a acção anterior e não queremos levar tarde. Ok, Então, se eu ir em frente e dizer após a ação anterior, você pode ver que ele meio que empurra isso para fora porque isso está começando após a ação anterior e não com a ação anterior. Então, queremos enviar isto para a acção anterior, está bem? E você pode selecionar todos esses três mantendo pressionado o turno, e então podemos vir para o alívio e você pode dizer que ele está fora do tribunal. Eu não posso querer que o dedo faça este ponto de cedro quarto segundo. Agora vamos dar uma olhada. Então, quando eu passar o mouse, você pode ver que ele escala e a cor muda. Mas quando um pairar para fora, nada realmente acontece. Certo, então temos que definir isso também. Então aqui nós definimos o pairado em. Eu vou escolher pairado para fora, e eu vou dizer que começa em animação e nós já temos este projeto coberto. O que vou fazer é vir aqui e duplicar isto, está bem? Porque eu não quero ir em frente e criar e começar de novo. Eu sou capaz de duplicar isso. Vou selecionar o 2º 1 para habitar. Você está vendendo o 2º 1 e em Hovered em. Você disse “Concordo”. 1º 1 Ok, eu quero selecionar isso. E mudei o nome só para ter certeza de que não ficaremos confusos. Eu quero dizer, no entanto, fora OK, e agora vamos enviar de volta os valores. Dois dos originais. Então este vai ser um. A cor do texto será branca, e o movimento será zero. Ok, então lá vai você. Então, agora, se você der uma olhada direito, você pode ver que nós temos essa bela animação de hábitos e, você sabe , por causa disso agora, não funciona para os outros. Tudo bem, porque eu não estou definido. Agora. Nós não temos que ir em frente e fazê-lo para cada off Estes. Tudo o que temos que fazer é se você ir em frente e selecionar o rapper do projeto pai. Ok, nós podemos realmente vir aqui para as configurações de gatilho e dizer gatilho apenas no elemento selecionado , certo? Isto é o que está acontecendo. Queremos dizer “acionar a classe”. E o que é um rapper de projeto de classe? Ok, então agora cada elemento que tem a classe chamada Project Rapper vai começar a animação. Então, se eu tenho isso nisso, isso funciona mais sobre isso. Isso funciona a mesma coisa aqui, certo? Muito legal. E isso é muito sobre como você cria essa bela interação divertida. Espero que vocês gostem. E no próximo vídeo não iria em frente e realmente próxima seção. Vejo vocês no próximo vídeo. 25. Tornando a seção de projetos: Tudo bem caras. Então, indústria, vamos em frente e tornar isso um responsivo seria super rápido, super fácil e super fundo. Então vamos em frente e fazer isso. Eu vou para o ponto de quebra do tablet, e então os pontos de quebra do tablet pensam que estão parecendo um pouco apertados. O pai vai fazer é eu vou ir em frente e definir isso para 80 no topo e 80 no fundo. Sem mudanças para 40 à esquerda e 40 à direita, certo? E 40 e certo, isso é o que nós meio que estamos indo para. Agora, isso parece bem, mas eu acho que na minha opinião, seria muito melhor se ele colocasse esses separadamente. Então o que eu vou fazer é ir em frente e temos o rapper, certo? E o rápido não é um grande Eu vou ir em frente e remover duas colunas para que ele se torne uma única coluna e agora isso parece muito melhor. Então você sabe, nós temos uma boa distinção e teoria de diferenciação coisa que podemos fazer é se você for em frente e selecionar o caçador, podemos ir em frente e aumentar a diferença de crescimento para 48 ou 32. O que você pensa. Parece bom. Ok, hum, eu não acho que nós fizemos isso. Sim, 48. Isso só se aplica a isso. Mas gostaríamos de aumentar aqui também, porque agora, aqui no Project Rapper, temos o editor 24. Não podemos querer aumentar isto para 40. Isso e, uh, isso está parecendo muito bom. E eu acho que isso é praticamente certo. E, ah, vamos para o ponto de quebra de paisagem na quebra de paisagem quando nós meio que queremos rádios este 2 42 64 no topo, 64 na parte inferior e 20 na esquerda e 20 na direita. Certo? A Andi? Sim, isso parece muito bom. Tudo bem, então isso é muito sobre como fazer isso responsivo. E como vocês no próximo vídeo 26. Noções básicas de Resoluções de imagem: neste próprio proprietário, explique um conceito simples sobre resoluções de imagem. Tudo bem, agora, preste atenção nisso, porque este é um conceito muito importante para entender. Então você não tem uma tela, que é 1920 por 10 80 pixels sobre isso é praticamente o que você obtém em um laptop Windows. E a maioria das telas não são retina. Você tem monitores e laptops Windows, que têm uma tela retina. Mas vamos tomar ah, situação em que a maioria dos laptops que estão lá fora não têm retorno são deslocados ou uma tela não retina. Agora, aqui tenho uma imagem. E agora o tamanho desta moldura é 1920 por Kennedy. E eu tenho uma imagem aqui, que é 1002 100 por 600. momento, Nestemomento,é assim que esta imagem vai ficar nesta tela. Ok, agora, se eu estiver olhando para a mesma imagem na tela de um livro Mac? Tudo bem, então se eu vier aqui para a esquerda, vemos que temos um Mac Book Pro. Só me deixe passar para o lado. Tudo bem? A tela do livro Mac realmente tem um lado fora 14 40 por 909 100 é a altura, mas o número de imagens são realmente duas vezes certo. Isso é porque ele é chamado de nossa tela de retina, o que significa que ele tem que x a quantidade de fotos. Agora, mesmo que o tamanho seja menor, você sabe, até o 1440 é menor que 1920. O número de pixels tem é duas vezes. Então, se nós realmente pegarmos essa imagem e olharmos para isso, isso realmente vai ser o tamanho dela. Vai ser muito pequeno. Não vai ser do mesmo tamanho de 1200 por 600 porque estes têm duas vezes o número de fotos. Isto vai realmente ser metade do tamanho, que é 600 por 300 o original é 1002 100 por 600. Mas se você for em frente e escalarmos isso para ser desse tamanho, tudo bem, nós estamos realmente esticando as fotos, certo? Porque na realidade, ele pode ocupar apenas estes muitos picaretas é porque isso é o quanto é isso. O número de pixels é realmente o dobro. Então, se vocês estão entendendo o ponto, então se eu realmente ir em frente e fazer um quadro de arte, que é este grande você sabe, que é 28 80 por 1800 que tem todas as imagens, então esta imagem vai ser o mesmo tamanho, que é 1200 por 600. Tudo bem. ecrãs Retina têm sempre duas vezes o número de imagens. E essa é a razão pela qual qualquer imagem que esteja em uma tela do Windows será metade do tamanho de um MacBook. Outra tela de retina, certo? Então, quando você está sempre adicionando imagens, você quer ter certeza de que sua vez em H I.D P I para que o lançamento de rep saiba que isso é suposto ser metade do tamanho na tela de retina. Então, no final, a linha inferior é sempre que você adicionar uma imagem, certifique-se de que a imagem é H I.D I.D I.D . E se não funcionar bem ou se não parece bem, isso provavelmente significa que sua imagem não é grande o suficiente. Sua imagem não é, não tem uma boa resolução o suficiente, certo? Então H I V p. Eu liguei-o para cada imagem, então isso é praticamente sobre o que eu tinha que explicar sobre resolução de imagem. E eu vejo vocês no próximo vídeo 27. Construirão a seção Dribbble: Tudo bem, pessoal. Então nesta cidade, vamos recriar a seção de drible. Mas também temos essa seção do Instagram, e a única coisa que precisamos fazer é fazer uma cópia baseada nisso e deve funcionar. Então podemos terminar isso rapidamente e depois ir para a seção de drible vai ser, ah, interação muito divertida. E eu vou mostrar a vocês como fazer isso porque nós tipo do que nós estávamos indo rolar esta imagem vai ter uma interação muito agradável enquanto nós rolamos a página. Então aqui estou eu no fluxo de trabalho. E, claro, obviamente, estou flutuando. E o que fazemos é ir em frente e começar duplicando esta seção, então certifique-se primeiro de tudo, vamos adicionar isso a 14. 40 está bem? E certifique-se de que selecionamos toda a seção intermédia. Eu vou copiar essa seção, e eu vou vir aqui fechar tudo e ah, que eu iria em frente e apenas basear isso. E então eu vou pegar essa seção central e meio que movê-la para baixo. Então nós temos um aqui, e nós vamos em frente e apenas substituir o texto e as imagens. Então eu vou dizer, hum certo, eu vou dizer copiar este duplo clique neste instagram e eu quero copiar isso e festá-lo . Tudo bem. E aqui vamos dizer Siga-me no Instagram. Então eu vou dizer, siga-me no I G ok. E mudaremos essa imagem também. Agora, a coisa é, o que vai acontecer é deixar-me mostrar-te o que vai acontecer quando mudares a imagem, certo? Então eles vêm aqui para a filosofia da fotografia, e eu escolho mudar a imagem em eu vou em frente e mudar a imagem para esta, que é a que nós queremos. Você pode ver que isso muda aqui também, porque tecnicamente, ambos têm a mesma classe. E a imagem de fundo é uma propriedade desligada. Então, prefiro pressionar o controle Z para reiniciá-lo de volta. Ok? E isso eu vou realmente ir em frente e adicionar uma classe de combinação, e eu vou dizer este Instagram tudo bem? Ou você pode ir em frente e criar uma nova classe em si. Tudo bem? Mas eu vou em frente e aula de Atacama, porque é um pouco mais fácil, ok? E agora eu posso ir em frente e mudar isso e nós podemos escolher isso, OK? E eu vou escolher derrubar, certo, porque eu não posso querer ver essa parte. Então, se voltarmos para cima, podemos ver que isto permanece como está. A outra coisa é que isso tem uma cor diferente. Então eu vou ir em frente e copiar este tribunal de cores, copiar isso e vir aqui e aqui. Nós vamos adicionar uma nova classe, e eu vou chamar isso de Instagram porque nós mudamos os valores novamente. Então eu vou seguir em frente e acelerar isso. Ok, eles vão. Não, não. Agora, vamos em frente e criar os próximos almoços são seção drible. Então eu vou começar selecionando o corpo e uma prensa controlada. Eu quero dizer seção. Ok, então nós temos eu não quero nenhuma foto em cima, e nós temos cerca de 1330 fotos em baixo. Ok, então eu vou chamar essa seção de drible, Ok, então vai ter 120 correções no topo e me pergunto se há pixels na parte inferior. Tudo bem, ótimo. Vou acrescentar um rapper a dizer um bloco de, que vai ser o nosso rápido. Ok, então eu quero dizer um rapper, e nós sabemos o que fazer. Agora é isso, na verdade, se você olhar para isso, isso realmente tem uma inteligência diferente. Tudo bem, este é um pequeno contêiner enquanto isso não está bem. Agora, este é o normal, que meio que se expande para 1920 72. Mas esta é uma seção que eu quero dizer e definir dizendo que eu quero que esta seção esteja no centro o tempo todo. Não preciso expandir. Eu queria ser deste tamanho. Então, qual é o tamanho? Na verdade, vamos verificar. Isto é, na verdade, 1076 seis, e eu vou realmente ir em frente e pegar, você sabe, o Colorado aqui, e eu vou dizer drible. Vou ver com tudo bem, qual era o valor? Era 1076 C uma semente ou 76 pixels. Tudo bem. Ótima. Então o que significa é que vou continuar e duplicar este rapper, está bem? Ok. Vou ligar para este rapper versão dois, está bem? E este vai ser Maxwell off 1076 Ok. Agora, independentemente do tamanho da tela, isso vai ser 1076 Agora, esta é uma decisão de design que eu tomei, e eu escolhi alguém Vá em frente e faça isso. Então agora vamos ter esses três elementos, e acho que já temos isso em algum lugar por aqui. Então eu acho que eu poderia ir em frente e apenas copiar toda essa informação. Então vamos começar adicionando um bloco, e isso vai ser para o nosso contêiner. E eu vou ir em frente e chamar isso de normal. E aqui nós vamos começar adicionando nosso texto estão indo Ah, parágrafo. E você sabe, a parte inferior do link do animador começou adicionando o título que isso vai estar indo para Ok. E eu quero dizer que dirigindo nossas 55 escolhas está tudo bem, e nós vamos apenas copiar isso e chamar isso de meu drible. O próximo vai ser este parágrafos e reprimir controle E procurar um parágrafo. Tudo bem. E eu vou copiar isso e base aqui. E isso é 18 picaretas é para que possamos adicionar a classe de parágrafo de 18 pixels. Então, o parágrafo 18 nos escolhe bem. E a outra coisa que queremos fazer é queremos ter um espaçamento de 24 pixels na parte inferior. Então você seleciona o título, e nós vamos adicionar essa classe de combinação que já temos. Criador. Então isso vai mover isso para baixo. Nós também temos este, que é 18 pixels e levemente. Então eu vou adicionar a luz. Ótima aula de combo. Isso parece bem. E nós também temos, tipo, 40 picaretas está montando na margem do fundo. Então vamos selecionar isso e nós vamos adicionar uma nova classe desta vez e nós chamamos isso de 40 fixer margem inferior. Tudo bem, eu estou bem, e vamos dizer isso aos 40. Ótima. E agora precisamos desses botões animados. Então eu vou apenas ir em frente e copiar isso e baseado em, eu vou dizer, me siga em impulsionado. Ok, agora, nós não podemos realmente ver nada, você sabe, porque é sobre uma superfície preta. Então eu vou adicionar uma nova classe de combate e chamar isso de branco, tudo bem, porque nós meio que queremos que isso seja de cor branca, então vamos em frente e mudar a cor para ser branco, certo? E isso deve ser bom o suficiente. Tudo bem, isso livros. Agora, se você olhar para aqui que isso é realmente meio quebrado em duas linhas para que eu possa ir frente e aqui, eu posso apenas mover isso para uma segunda linha, ok? E isso está parecendo muito bom. Ótima. Só estamos aqui agora. A próxima coisa é criar esta seção. Ok, agora, deixe-me explicar o que vai acontecer aqui. Temos uma imagem. Tudo bem. Você pode ver que esta é uma imagem. E nós também temos esse tipo de off. Sabe, como essa ilustração do navegador. Agora vamos construir isto do zero dentro de uma arma. Oh, ok. Então, como vamos fazer isso agora? Não é uma condição que eu queira. Menção é sobre a altura. Agora, este é 6 40 picaretas é então eu vou em frente e aqui no com. Agora você pode realmente adicionar Ah, altura com base no estado como 77 TV, hedge ou uma cabeça de TV são 50. Nós eclodimos. Mas neste caso, vou escolher algo assim e sabe? Ah, valor fixo um valor absoluto. E eu vou ir em frente e copiar isso, e eu vou dizer 640 escolhas é que eu vou fazer isso a altura. Ok, então isso é o que vamos rebocar agora para isso. Vamos em frente e construir rapidamente este fluxo de trabalho interno. Podemos adicionar todos esses três botões, todos esses três dardos. Vai ser divertido. Então vamos em frente e fazer isso, certo? Então, quando começar, já temos um coelho normal. Vou criar um novo bloco, está bem? E este também vai ser o nosso filme de embrulho, também. Ok, agora, queremos adicionar algum espaçamento aqui, que é que 120 correções. Então eu vou selecionar esse rápido normal que temos. E no eu vou criar em nova classe e eu vou chamar este 60 pixels sublinhado inferior M para margem são Bem, foi 120 Ok, então vamos fazer este 120 e então vamos em frente e dar uma margem inferior de 120. Ok, então nós temos isso e eu vou criar agora e agora nós temos o segundo rapper normal que nós temos. Então temos uma seção para a qual temos Rapper, que é para isso. E então temos outro rapper aqui, que é um dedão de rapper, e vai manter esta ilustração, então vamos começar criando isso. Agora, este é um bloco muito simples, e tem uma altura de 37 pixels. Então eu vou criar um novo bloqueio, e eu vou ligar para essa barra de navegador, ok? E eu vou ajustar a altura disto para 37 correcções no dia. Vamos mudar a cor de fundo para ser um, ok? E também adicionamos raio agora com o mais recente. O que eu posso fazer é clicar neste botão dedo individualmente adicionar raio para o canto superior esquerdo e superior. Certo. Ok. Então, eleitorado faca, temos um ambiente agradável, o que parece muito bom. E nós temos foram adicionados que arredondando oito pixels aqui também. Então isso é muito bom. E agora você adiciona esses três pontos, então eu vou criar um novo bloco diurno, certo? E esse impasse, vamos chamar isso de pontos. Ok? Ok. E aqui os tamanhos escuros 12 pixels por 12 pixels. Então eu vou ir a largura e a altura e disse que os 12 pixels por 12 pixels e eu vou para o raio e dado, tipo, um grande número de 100. Então, fica completamente ao redor e vamos usar a luz de cor. Ótima. Alguém ir para o fundo e int ganancioso e que poderíamos escolher a cor. Oh. Oh, desculpe. Nós vamos escolher essa cor, e isso vai ser, tipo, ótimo. Certo, então lá vamos nós. Tudo bem, agora para isso. Mas eu estava sobre o que eu quero fazer é eu quero fazer este um item flexível, e eu quero dizer flexão centro tudo bem. E justificar esquerda, direita, para que tenhamos tudo no centro. Agora, há um pouco de espaçamento à esquerda, que é em torno de 16 correções. Então eu vou dar um preenchimento interno para a barra do navegador fora de 16 pixels para que os médicos aqui e também o ponto tem um espaçamento de seis imagens, então eu vou dar uma margem direita fora de seis pixels, e eu quero duplicar isso ponto duas vezes. Então agora vai ficar assim e agora, nós meio que temos esta seção perfeita. Próximo. Queremos criar este bloco diurno, e este bloco vai ser o nosso contentor para a imagem. Então o que vamos fazer é criar novos blocos. Vou chamar a isto o quarteirão, está bem? E isso queríamos estar dentro do rapper de novo. Então, reportamos, certificamo-nos de que está dentro do rapper. Muito bem, então vamos empurrar isto à vista. Agora entrou no rapper. Agora, esta vai ser a nossa imagem de drible. Ok? E agora a altura é 6 40 picaretas é então vamos em frente para a altura e dizer 6 40 picaretas é e isso é o que temos são agora. Quero ir em frente e importante a imagem deste tiro duplo. Então, se você for ao nosso painel de ativos, nós temos a nossa imagem, que é a nossa imagem drible. Agora, há duas maneiras. Ou podemos importar isso como um elemento de imagem já poderia usá-lo como uma imagem de fundo. O que eu vou fazer é ir em frente e clicar nisso, e eu vou dizer, escolha uma imagem de fundo. Então, quando você diz escolha imagem, e eu vou escolher Ah, a imagem drible que nós temos. Tudo bem. E eu vou ir em frente e dizer: “ Não estilize”. Ok, em. Quero dizer o dobro. Ok, ótimo. Agora vamos realmente dar uma olhada e ver como isso funciona. Tudo bem? Então, quando você rolar, parece bom. Parece perfeito. Parece absolutamente normal, tudo bem. Não parece nada diferente. Uma coisa que eu quero fazer é selecionar esta parte inferior da imagem dupla inferior fez bloco. E o que eu quero fazer é ir em frente e dar a isto um arredondamento inferior na parte inferior. Então faça isso, tipo, oito pixels e oito pixels na parte inferior. Então, você sabe, é meio que 400. - Legal. Ok. E agora aqui vai um truque legal. O que vamos fazer é aqui. Temos uma opção que diz “consertado”. Está bem, vou clicar nisso, está bem? E quando eu fizer isso, o que vai acontecer é que você pode ver que meio que dá esse efeito. Tudo bem, Street , vai consertar. Tudo bem. E o que queremos fazer é ter certeza de que vamos realmente dizer isso para 40 e nós podemos realmente ir e dizer isso para ser topo, então ele se alinha para o topo. OK, mas o único problema é que ele meio que é cortado aqui à esquerda e à direita porque está sendo corrigido para toda a página. E isso também está mudando, dependendo do tamanho da tela. Então, você sabe, isso também vai ser um problema. Então, se eu disser isso a 1920, vai parecer um pouco diferente. Vai parecer um pouco diferente para que nós vamos consertar isso é o que podemos fazer é aqui . Em vez de dizer disfarce, vou dizer costume, e vou dar-lhe um valor fixo. Neste caso, é 1076 que vale a pena. E eu vou dizer que eu quero que você seja 1076 picaretas é branco, certo? E eu vou dizer top para que ele se alinhe com o topo, ou podemos escolher o centro ou o topo que você quiser, certo? Neste caso, podemos configurá-lo para o centro, se você quiser. Isso deve ficar bem. E agora se você der uma olhada, tudo bem. Parece muito melhor. Parece muito legal e interessante. Ok? E a outra coisa é que se você ir em frente e mudar o tamanho fora, digamos, 1920 é meio que vai se adaptar a um vários, 76 pixels. Tudo bem, vai mudar para 1076 se você for para provavelmente 12. 40 você pode ver que ele meio que se adapta a esse 1076 pixel com tudo certo, e isso é fantástico. Ótima. Então isso é basicamente sobre como criamos essa animação muito divertida, certo? E no próximo vídeo, vamos fazer disso um patrocinador para outros pontos de pausa. Então são vocês no próximo vídeo. 28. Tornando a seção de Dribbble responsive: Então, neste vídeo, vamos em frente e fazer isso responsivo. Então vamos para o ponto de quebra do tablet no registro do tablet, podemos ver que as coisas fora. Então vamos começar selecionando a seção de drible. Eu vou reduzir a altura deste para 80 pixels no topo 80 pixels na parte inferior e também vou adicionar preenchimento à esquerda, que é em torno de 40. Escolhas é e 40 picaretas é agora. Nós vemos um pequeno problema é que você sabe, quando você aumenta isso, nós estamos meio fora. Você sabe, mudar isso agora. Nós definimos um valor fora, você sabe, 1076 mas, você sabe, em pontos de quebra de tablet, eles parecem ser um pouco diferentes. Então eu acho que uma coisa que podemos fazer é configurá-lo para conter Andi. Acho que o que isso vai fazer é meio estranho. Quero dizer, conter não funciona de novo. Queremos escolher o disfarce, e acho que a capa faz um trabalho decente. Não diria que é a melhor, mas acho que é a melhor alternativa que temos. E talvez eu acho que para tablet poderíamos usar a altura disso porque isso pode ser demais . Então, de seleções, definindo-o para 6 40 talvez você poderia reduzi-lo para 4 80 E eu acho que isso parece Ah, um pouco melhor. Tudo bem, isso parece muito bom. Tudo bem, vamos para a paisagem móvel. Ponto de ruptura. E aqui na paisagem móvel, você meio que quer mudar isso de 80 para 64 no topo 64 na parte inferior, , 30 20 na esquerda e 20 na direita. E sim, acho que até essa distância, acho que pode ser demais. Então, a Internet 120 que poderíamos preparar é para 64. E eu acho que isso parece muito bom. Vamos voltar aqui também. E eu acho que, , você sabe, eles devem ficar bem. Essa não é uma maneira perfeita de consertar isso. Então eu acho que isso deve ser decente o suficiente. Deve ser. Deve ficar tudo bem. Não tão ruim assim. Tudo bem, vamos. Mas isso deve ser justo o suficiente. Isso deve ser muito bom. Tudo bem, então isso é praticamente tudo para este vídeo e vejo vocês no próximo vídeo 29. Construindo a seção de depoimentos: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e criar esta seção fora do site e vai ser muito divertido em porque o quê? Porque o que vamos fazer é fazer esta parte ficar no topo da página enquanto esta rolagem para que o lado esquerdo da página não esteja rolando enquanto o lado direito da página está rolando. É uma interação muito divertida que não podemos ver em muitos tipos diferentes de sites. Então vamos em frente e fazer isso. Agora. Eu fui em frente e fiz uma demonstração rápida e uma armação de como vai parecer , então vamos começar com uma seção como de costume, e então eu vou criar um rapper dentro que vai ocupar toda a altura aqui e dentro disso eu vou conseguir. Eu vou fazer isso um embrulhá-lo em um grande Então nós temos duas colunas. Então temos um aqui e um aqui e na primeira coluna. Só vou me certificar de que ocupa todo o espaço e vou adicionar um bloco aqui. Isto é para o texto e as informações sobre os links. E nós estamos aqui. Vamos criar três blocos três blocos D, um para cada um. As composições têm uma imagem. Nós temos uma mensagem e você sabe que ele tem subtexto ou aqui. Então, é assim que vamos fazer. Então vamos entrar no fluxo de rep, certo? Quer começar selecionando o corpo, vamos começar criando uma nova seção, Pressione o controle e. E estamos digitando seção. Está bem. E eu vou em frente e chamar isso de Metro. O que? Isto é, na verdade, está tudo bem. Então este é um surfista como depoimentos. Sr. Vá em frente e ligue para isso, hum, seção de amônia irritante sobre ele, e nós temos alguns estofamento no topo do fundo. Então temos cerca de 120 pixels no topo e cerca de 1 30 na parte inferior. Vou começar criando um tapinha de 20 no topo, 120 no fundo 72 na esquerda, 72 na 72 na direita. Acho que temos uma grande seção e eu vou começar criando nosso primeiro bloco div, que vai ser um rapper, bloco criativo. E eu vou dizer Rapper, então arranje outro rapper. Está bem? E agora o quê? Aulas de combinação. Então temos ótimo. Temos grandes três colunas e você tem projetos criar. Acho que vamos em frente e criar um novo ótimo para isso porque eu não quero ter certeza que eu não quero ter certeza de que eu não estrago nada. Então vamos em frente e, hum, hum, dar uma aula a isso e chamá-lo de, hum, hum, pegajoso. Bom. Está bem. Tão pegajoso. Ótima. Então eu vou transformar isso em uma grade clicando neste botão. E agora vamos começar por ter uma lacuna na coluna 24 no Just Wonder. Tudo bem, só precisamos de uma gota. Agora vamos começar criando um novo bloco, que será o nosso rapper esquerdo. Então isso vai chamar esse caçador normal, porque ele vai ser à esquerda, e aqui nós podemos criar esses três elementos, então nós temos um h dois. Temos um parágrafo, e temos isto. Então eu acho que o que eu vou fazer é ir em frente e pegar, você sabe, tudo o que eu vou pegar este bloco inteiro, que diz rapper normal. Vou copiar isso e trazer para cá e baseá-lo. Ok, muito bom. Isso disse isso a 14. 40. Está bem. E eu vou em frente e apenas copiar esta informação. Copie isso e baseado e copie e com base. E aqui podemos vê-lo. Diz, veja, todos os testemunhos vão copiar isso e colar. Tudo bem, então isso praticamente não... Ah, isso é fantástico. E o que vamos agora selecionar o próximo, e eu vou criar um bloco div, e eu vou chamar este rapper normal novamente porque vai ser o nosso lado direito fora do bloco. E aqui o que vamos fazer é criar o Bloco Maravilha para cada um deles. OK, eu vou criar em New Delhi bloco e eu quero dar isso em nome específico para isso porque eu não quero confundi-lo com qualquer outra coisa, e nós podemos criar nossa própria classe para isso. Alguém chame este testi mony bloco de distância. Está bem. E então vamos ver como construí-lo. Então nós temos uma imagem, e então nós temos outro de bloco. Então, basicamente, nós temos dois elementos Quando vai ser uma imagem e quando vai ser um bloco surdo com esta informação e o que eu posso fazer é tão alto para set de 360 E isso é algo que eu não posso querer definir o verão. Não, agarre isso traz para baixo sobre isso. Precisa ser três letras, certo? Certo. Ah, eu vou ligar. Eu só vou dizer imagem, e eu vou dizer a altura da imagem vai ser 3 60 Picks está em reconhecimento porque é para cima. Muito bem, tão entusiasmado. Ah, você pode ver que são 360 correções. Então vamos em frente e importar nossa imagem primeiro. Então nós já criamos um bloco empoeirado matinal em uma imprensa controlada ou podemos realmente ir em frente e pegá-lo no painel de ativos, então será um testemunho. Eu vou pegar isso, e eu vou deixar cair isso lá dentro, e eu vou ligar h I D p. E eu vou chamar essa imagem de Monia irritante, ok? E eu vou adicionar uma altura de 360 pixels. Agora isso vai ir em frente e esmagar isso que nós não queremos ir em frente e definir isso para cobrir então Tudo bem, ele meio que ocupa 3 60 pixels da altura sobre ele cobre quanto de um espaço que tem tipo. Isso é muito bom. Não, a próxima coisa que vou fazer é remover esta margem inferior que temos. Então eu não quero isso porque nós somos finais. Não é cedo. Vá em frente e apague esta classe. Alguém vai para trás, e deve ser isso. Certo, agora temos esse bloco de depoimentos lá dentro. Eu vou criar um novo bloqueio, e eu vou ligar para esta DST Monia em seguida. Está bem? Agora, o que temos aqui é um pouco fora de texto. E se você olhar para este lado, temos 64 pixels em ambos os sites. Então eu vou em frente e adicionar um preenchimento de 64 pixels em ambos os lados. NYT 64 no topo. Esquerda direita, em baixo. Duh. Certo. Ok, ótimo. Então agora vamos adicionar este texto. Agora, isso pode ser um bloco de texto porque ele não precisa, você sabe que não importa para problema, então eu vou apenas usar um bloco de texto em vez de um título. E eu acho que nós já temos um rumo para isso Então este é o número 24 picaretas é, hum certo. Lá vamos nós. Vou copiar isto, e colá-lo. Está bem, não vamos. Vamos em frente e certificar-nos de que este é o 24. Houve uma falha, eu acho. Enfim, Onda, queremos ir em frente e fazer esta tigela. Tudo bem? Então parece bom e ousado. Está bem? E agora se você meio que observar o que estamos fazendo aqui é que a distância entre isso é reta Se 64 escolhas é e esse é o tipo de estilo que eu estou seguindo independentemente. Então, o que basicamente significa é que a altura está mudando com base na altura do recipiente. Não é uma altura fixa, pois, neste caso, estamos a explicar , certo? Isto foi Você sabe, mesmo que isso seja 56 linhas, a altura disso vai ser a mesma fora 600 porque eu tinha definido para ser 600 pixels de altura. Mas, neste caso, não quero que seja uma altura definida. Eu quero esconder o troco dependendo do tamanho fora. Você conhece este texto. Então o que estamos fazendo é, já que temos como, 64 picaretas é Onda. Já temos 16. Vou criar uma nova classe de vírgula e chamar isso de 64 fixador inferior Underscore m. E eu vou dizer que isto tem 64 pixels. Então agora temos 64. Então, da próxima vez que você for esse pequeno pedaço de vida, então eu vou adicionar um novo bloco de texto, certo? E este bloco de texto vai estar dirigindo 18 pixels. Eu só vou dizer que dirigindo, hum nós não temos um título 18 picaretas é ok, então essa é uma nova classe. Então vamos em frente e criar este. Dificilmente 24 e depois vamos duplicar a classe para que todas as propriedades permaneçam iguais . E eu vou apenas ir em frente e renomear isso para 18 correções, e então eu vou realmente era o tamanho estranho para baixo para ele em pixels. E nós também precisamos de uma cor. E eu acho que esta cor, eu acredito que é uva leve. Então eu vou criar uma nova turma e chamar isso de uva leve, e eles iriam aplicar a luz. Ótima aula deve ser boa. Ótima. Agora este vai ser o parágrafo 16. Então, vamos continuar e copiar isso. E isso vai ser Ah, parágrafo 16 picaretas é E novamente, isso vai ser, tipo, grande cor. Vá em frente e copie a informação e a besta e uma cópia e uma besta. Agora, a distância é muito menor, que é como quatro picaretas é. Mas aqui, isso tem cerca de 16 pixels. Então eu vou criar uma nova classe de vírgula e chamar essa margem de quatro pixels, ok? E o que está acontecendo é isso para, você sabe, para correções? E aqui também não temos nada, que temos margem de pixel zero. Então, isso é muito bom. Você também pode ver que nós temos essa fronteira, você sabe, e nós meio que queremos aplicar isso também. Então esta borda é na verdade cor cinza mais escura. Então, quando ele estava indo para selecionar o bloco de texto de testemunho e ah, eu vou descer para a seção de bordas e eu vou escolher estes três a esquerda, a parte inferior ou vamos para a esquerda. E eu mudei a cor para ser cinza escuro, que é isso? Ok em. Eu vou clicar nisso também e mudar isso para Dr. e eu vou escolher o caminho certo e vender isso muito escuro. Então, basicamente, eu estou aplicando fronteiras apenas em você sabe, esses três lados, tudo bem, e não no topo agora. Você pode ir em frente e adicionar no topo do seu próprio, mas eu vou deixar como está, certo? E é basicamente isso. Agora precisamos deste espaçamento de 120 pixels. Então o que eu posso fazer é ir e selecionar o próprio bloco de depoimentos, a coisa toda. Vou adicionar uma nova classe de vírgula e chamar isso de sublinhado de 20 pixels. Eu também me pergunto se conserta fundo sublinhado m para margem, e eu vou descer aqui e eu vou definir isso para 120 escolhas está tudo bem. E agora temos este 1 26 é. Então a única coisa que vou fazer é selecionar este testemunho de rock e baseá-lo três vezes. Então 123 básico duas vezes, na verdade. E eu vou vir aqui e rapidamente mudar essa informação vai selecionar isso e colar e , como você pode ver, porque nós não definimos uma certa altura. A altura ocupa, a altura é definida pelo conteúdo. Está bem. E vou começar selecionando essa Emily Parker. Copie isso baseado em tudo aqui. E vai ser a companhia número dois. Está bem. E vamos descer. Ou aqui. Ah, vamos copiar esta cópia e pedaços. E vai haver Vin Cent Rod, e essa vai ser a empresa número três. Está bem. E agora vamos em frente e apenas mudar as imagens para selecionar a imagem. Clique no ícone de engrenagem, escolha substituir imagem, e eu vou descer e escolher, hum, Testemunho três, que é por aqui. Está bem. E isso vai ser um testemunho. Só um. Selecione que substituir a imagem e, ah, depoimento para Tudo bem, então isso é muito. Agora, vamos dar uma olhada e ver como isso se sente, tipo, tudo bem, eu vou definir apenas como 40 e 40 correções. E agora se eu estragar tudo, tudo bem. Hum, certo. E funciona. - Tudo bem. Agora, a ideia é enfiar isto no topo. Agora, antes de fazer isso, eu só quero ter certeza de que temos para que, como você pode ver, eu tenho algum espaçamento à esquerda bem aqui e você sabe, porque eu não quero que ele fique tão perto. Então, e também o espaçamento de 64, na verdade. Então eu vou mudar isso rapidamente para 64. Seleccione isto. E no Gapen disse isso para 64. Ok, então este é praticamente o lugar onde estamos procurando agora. O que fazemos não é apenas selecionado este rapper normal que temos, ok? E, na verdade, o que vou fazer é dar uma nova aula a isto, porque este é o único elemento que vai ficar preso lá vai ser pegajoso. E como muitos outros elementos têm o rapper normal de classe, não queremos aplicar nenhuma propriedade. Não vamos aplicar apenas isto. Então eu vou em frente e apenas remover esta classe e dar uma nova classe e chamar este teste. Quanto mais Nhial bloco pegajoso, ok? E o que sabemos, eu vou vir aqui. Não faça posições agora. Aqui nas posições, temos estática. Temos um parente. Temos absoluta. Temos consertado e temos pegajoso. O que vou fazer é dizer “pegajoso”. E se você realmente olhar Ele diz que sticky corrige um elemento para a tela somente depois que o usuário passa por um local específico na página. Agora, o que acontece é que quando eu jogo tudo bem, nada acontece. Ainda está tudo igual, certo? Mas o que eu quero fazer é ir em frente e dizer pegajoso e definir um valor de zero. O que eu quero dizer é que quando a distância entre este elemento na parte superior da tela é zero stick. Ok, então o que eu vou fazer é agora você pode ver que há alguma distância. Certo? Mas quando a distância que usa 20 isso fica preso ao esquema, certo? Porque a distância agora é zero. E agora eu posso continuar rolando, continuar rolando e continuar. O da esquerda vai ficar bem ali. Ok, agora, eu não quero tocar em toda a seção de cima. Então o que eu vou fazer é dar um pouco de espaçamento fora. Vamos 100 e 20 picaretas é Ok, Então este 120 picaretas é desta distância desta distância, e agora isso é não. Agora, inicialmente vai parecer assim quando eu rolar, vai ficar preso. E é assim que vai parecer agora. Poderíamos reduzir isto para 64, 48 ou 18. Vou ajustá-lo para 64. Acho que 64 é um bom número. Sim, é basicamente isso. Certo. E é assim que você cria um efeito bonito e pegajoso. Então, a próxima vamos em frente e fazer isso um responsivo. Vejo vocês no próximo vídeo. 30. Tornando a seção de depoimentos: Tudo bem. Então, neste realmente, vamos em frente e fazer disso um patrocinador para outros pontos de pausa. Então vamos realmente começar pulando para a visualização do tablet agora no tablet, você obviamente quer começar selecionando, você sabe, os elementos, e eles estão usando o preenchimento no topo. Isto estava acabado. 80 pixels farão a mesma coisa aqui. 80 pixels no topo, você sabe, 80 pixels na parte inferior e à esquerda. E aqui você pode já é que para 40 e 40. E também o espaçamento aqui é pode ser um pouco demais. Então podemos rádios que de 64 para 24 que deve estar bem. o estofamento Atéo estofamentoaqui é um pouco demais, então provavelmente não vamos estar prontos. Isto é 32 32 32 32 e ah, 30. Faça chumbo. Isso parece ruim o suficiente. Mesmo a distância aqui, Mi pode querer o dedo do pé, você sabe, mudar isso. Então, se eu dissesse como o bloco de depoimentos, nós já temos 1 21. Isso é baixo para 64? E acho que é um bom número. E sim, acho que estava muito bem. Agora, o problema é que quando se trata do ponto de ruptura da paisagem, ele meio que não parece realmente bom. Então o que temos que fazer é nos livrar do elemento pegajoso, da funcionalidade. Então o que você faz com o primeiro de tudo é que o rapper de Cynthia é uma coluna de duas. Ótima. Certo, vou deletar essa coluna e torná-la uma única grade de coluna. Então agora é assim que parece, e eu também vou mudar a lacuna aqui. A diferença de estrada de 16 para 48. Certo, então temos algo. Parece que isso, e ah, podemos fazer isso não vai mais ser um bloco pegajoso. Eu vou definir a posição deste muito pegajoso de pegajoso para estático. Então é normal e nossos pergaminhos normalmente E também queremos que a distância aqui no topo seja 64 no topo 64 na parte inferior e, você sabe, na esquerda e na direita. Não podemos querer que isto seja ... 20 reparações à esquerda e 20 picaretas à direita e vai ser um bloco muito simples e simples, certo? A mesma coisa se aplica para mais por paisagem, para ponto de interrupção móvel. E sim, eu acho que para móveis, plantas pobres, eu acho que para retrato móvel ou que podemos fazer é provavelmente rádios para baixo este de 30 para 24 na mão esquerda. À direita em que podemos manter 32 no topo não deve ser um problema. E eu acho que isso parece muito bom, certo? Isso é muito. Nada muito complicado. É complexo sobre isso? Então, a menos que vocês no próximo vídeo 31. Construindo o seção de abas: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e criar esta seção e vai ser muito divertido porque vamos estar usando um novo componente chamado uma facada porque queremos que isso seja uma estrutura de guias e entender como os taps funcionam antigos. Então, antes de começarmos, vamos entender rapidamente a estrutura. Então vamos começar com uma seção e então teremos um rapper dentro, e então teremos um bloco def, que será para o título e o texto, e o outro desenvolvido será para as próprias abas. Certo? Então essa coisa toda vai ser a estrutura de guias, e é basicamente isso. E eu também defini a altura de 420 picaretas é para cada uma dessas imagens. Então vamos saltar para o fluxo de ar. Então aqui eu vou eu vou começar selecionando o corpo, e eu vou começar lendo na nova seção Animal chamar esta seção seção abas porque ele apunhala Aziz realmente quer ter empilhando fora 120 pixels de cada lado para começar com preenchimento colocando com ah planejamento à esquerda e estofamento à direita. Certo? Então vamos começar criando um impasse. E este impasse vai ser o nosso invólucro que temos tão ponto Ah, a próxima coisa vai ir em frente e criar esta seção. Então, o que impressiona o controle e entra no quarteirão? Este vai ser o meu rapper normal. E o que podemos fazer é pegar essas coisas também a mesma coisa. Copie isso. Baseado na cópia e no melhor. Tudo bem, deve ser a mesma coisa. E eu vou mudar isso para fotografia, e podemos ter um pouco de Dexter aqui. Eu vou copiar isso e um de beisebol aqui e o que eu posso fazer é quebrar a linha e dizer enquanto viajo para que eu possa ir em frente e quebrar isso em duas linhas, e isso deve ser muito bom. Agora nós adicionamos este rapper normal dentro, mas eu realmente não acho que nós precisamos da parte superior normal. Então o que eu posso fazer é realmente, vamos fechar tudo isso e nós poderíamos realmente ter o título por conta própria e o parágrafo por conta própria e você sabe, enfraquecer excluir o rapper normal porque tudo vai estar em uma linha vertical direita lá, porque assim e então nós temos alguma margem de rebatidas aqui e aqui. Nós meio que queríamos ter 64 anos. Então, o que? Ia continuar e duplicar esta aula, está bem? E ao invés de chamá-lo de fundo de 40 pixels, vou chamá-lo de 64 picaretas de Baden e mudei isso para 64. Está bem. E agora vamos usar um novo elemento. Bastante guia. Então, se você vai para o painel de elementos, você pode realmente ver que nós temos. E Lemon chamou de facadas não levaria isso e colocaria dentro do rapper, certo? Então agora é isso que temos, e eu vou continuar e chamá-lo de esfaqueamento, certo? Agora, antes de editar ou fazer qualquer coisa que tenha compreensão da estrutura fora disso Ok, então quando você abre as abas, vemos que nós temos, tipo, o pai principal, que é chamado de taps. E então para que tenhamos dois filhos. Um menu de guias de escolta. E quando as facadas entrarem em contato, onde está? Um menu de guias verdes completo e menu de guias de conteúdo de traps. São estes três botões? Certo? E se você olhar para aqui, se você abrir, vemos que você tem bloco de link guia, e você tem uma guia. Texto. Você tem um bloco de link guia, e você tem um texto e, em seguida, você tem um bloco de link e, em seguida, você tem um texto. Certo? Então este elemento ou este pai, é basicamente o recipiente para três torneiras, certo? Só levou ter mais top. Então, neste caso, queremos mais vezes porque temos quatro gatos quando uma cópia descida baseou isso. Certo. E isso acrescenta um novo top. Tudo bem, então isso é o que temos agora. Abas. Continente é a área onde temos quatro Crianças. Ok, agora, estes basicamente definem o que está acontecendo Toby dentro de uma guia particular. Direita em. No nosso caso, temos estas quatro imagens. Assim como quatro imagens é o que vai ser aqui nesta cabana. Certo? Então é isso que é como sua estrutura. Então vamos começar personalizando esses esfaqueamentos. Ok? Agora, quando eu clicar na parada, o que eu vou fazer é ir em frente e chamar esta conta, ok? Você pode ver isso em ordem. Ele adiciona automaticamente uma chamada de classe combo s atual. Tudo bem? Mas se eu vier aqui e vou em frente e chamar a facada, está bem? Nada vai acontecer. Não há aula de vírgula, mas quando eu clico aqui, há uma classe de vírgula. A razão é porque quando você olha para uma página que tem facadas algum topo vai ser selecionado automaticamente direito, Isso vai ser algum momento que vai ser selecionado. Não pode haver um ataque que não esteja selecionado, certo. Então essa é a razão pela qual estamos fluxo automaticamente adiciona um estado atual a isso. Agora, quando você quer editar isso agora nós sabemos que obviamente queremos ir em frente e editar o Stein porque isso parece completamente diferente do que temos como padrão. Então, se você quiser ir em frente e personalizar isso, não comece com a guia que tem este estado atual ok, não, porque quaisquer alterações que você fizer efeito o estado atual direito, queremos começar com isso, que não está no estado atual, e então queremos ir em frente e personalizar o estado atual. Ok, Agora, se você vai para essas configurações quando você também pode ver um monte de configurações onde você pode decidir qual é o tableau ativo. Obviamente, você pode escolher nenhum também como a guia ativa. Mas isso realmente não faz sentido. Então, você pode ir em frente e escolher um esfaqueado ou tocar em três ou tocar para escolher entre . Você não será o primeiro a subir. No meu caso, vou marcar a primeira para ser a quarta parada, certo? Bastante simples. Tudo bem, então vamos em frente e realmente renomear isso agora, Renomear não tem nada a ver com classe. Então, vou ligar para a Itália. Vou ligar para a Austrália. Isto vai ser a Índia e depois o Deus do Brasil, certo? Isto vai ser a Índia e depois o Deus do Brasil, Correto. Agora vou definir o elemento de facada. Eu também vou ter uma aula chamada facada a seguir, tudo bem, porque esse é o nosso texto principal, e eu vou começar com o último elemento e garantir que aplicamos as mesmas classes a tudo. Então o pai vai ser a guia, e então o texto vai ser o texto de toque. Isto vai ser tabulação e, em seguida, este vai ser dab a seguir. Oh, saudita quando seria esta conta. Em seguida, hum, isso vai ser dab, e outro vai ser o DOB em seguida, e vai haver novamente dab em seguida. Muito bem, agora que estamos a bisectar isto, temos a facada. E o que você faz é ver que temos uma fronteira aqui, certo? E é roxo, e é só o quê? É muito simples. Então vamos em frente. E com o seletor superior, você pode ver que temos essa imagem e backer e tem uma cor de fundo. Não preciso de nada disso. Eu vou ir em frente e disse a AL longe a zero porque nós queremos que a capacidade seja zero certo? E como você pode ver, ele muda para todas as guias, exceto a facada, porque isso tem uma combinação próxima. Vamos lidar com isso mais tarde e também com o próximo aqui dentro. Mas primeiro, vamos em frente e adicionar uma borda. Então vá em frente e mude a cor destes dois roxos. Então temos uma bela fronteira. Isso é bom. E agora temos a estrutura dentro, que é de 6 a 18 picaretas é então eu vou em frente e mudar o tamanho da fonte para ser 18 correções. E eu disse isso muito ousado. E também a cor vai ser branca. Ok, agora, nós também temos alguma quantidade fora espaçamento na parte superior e inferior, que é Dr Pixels no topo e 16 picaretas na esquerda e na direita. Mesmo a selecionar a guia aqui no preenchimento. Eu vou definir isso para 12 e twas e ah, você sabe, na esquerda e direita é 16 e 16 uma vez disse isso para 16 em 60. Tudo bem. Muito legal. Nós também temos uma distância aqui entre duas guias, que é, como 24 picaretas é então eu também vou selecionar a guia no lado direito. Vou dar uma aula a ele. Eu vou dar-lhe uma margem de 24 pixels, então isso meio que empurra as coisas para fora. Tudo bem, agora, isso está parecendo muito bom. Agora queremos selecionar este material, que tem a classe de combinação chamada atual, e agora queremos personalizá-lo para olhar como ele vai ficar quando for selecionado. Quando está no estado ativo ou eles cortam em estado. Vamos começar indo em frente e mudando a cor de fundo para o papai. Desculpe, não é a mensagem. Mudança urbana, a cor de fundo para ser roxo, certo, e isso é praticamente tudo. Então, agora, se formos visualizar, você pode realmente clicar nele, e você pode ver que você sabe, eles têm esse efeito e ele olhou para você. Parece perfeito. Agora, se você quiser, você também pode ir em frente e levar isso para um próximo nível. Digamos que temos uma torneira. Vamos em frente e adicionar um estado de porto direito no ter um estado. Vou em frente e temos esta cor. Eu vou escolher roxo, e eu já estou é a capacidade de gostar de 20%. Então, só temos, tipo, tipo, um ligeiro efeito de pairar. Ok? Nisso, vou voltar para o estado das freiras, e obviamente queremos transição. Então eu vou fazer as transições para cima e nós vamos escolher de volta em torno de cor, e nós vamos definir a duração para 350 milissegundos e flexibilizar vai ser cavalete corte. Tudo bem, então agora vamos dar uma olhada rapidamente. Então agora você pode ver que quando você tem isso nas guias, você tem esse efeito agradável, e então você clica em seu direito, Você pode ver que ele meio que muda, e parece muito bom. - Sim. Ok, Ok, rapidamente quer mudanças. Font ortografia deste e l I Tudo agora o menu abas. Nós temos, como, espaçamento fora 40 pixels, indo para selecionar o menu abas. Certo? Vamos chamar este menu de abas, está bem? E nós vamos em frente e quebrar na margem inferior de 40 pixels, então isso empurra o bastão. Tudo bem, vamos em frente e chamar este conteúdo de guia, porque este vai ser o nosso país de torneira. E o que vamos fazer é ir em frente e criar um novo bloqueio feito, certo? E esse impasse, vamos chamar isso de grade de tabulação. Ok, então o que sabemos é que eu vou continuar e dar um hype a isto, certo? Queremos que esta seja uma altura de 4 20 pixels. Quer ir em frente para os dois mais altos por 20 pixels? Parece bom. E eu não vou clicar nisso para torná-lo em uma grade. Está bem. E vamos em frente, adicionar 232 colunas e apagar maravilhas. Oh, ok, então vai ficar assim. E também, o espaçamento será 24 entre os dois. Então a lacuna da coluna será de 24 saídas, e isso parece muito bom. Agora, tudo o que temos que fazer é ir para as imagens, e você quer pegar nossas imagens para que possamos começar com as que marcaram a viagem. Então vai ser viajado um, arrastar isso e soltar essa visão. E você disse isso para H I D p. Eu ok, e vou selecionar o próximo, que vai ser por aqui, que vai ser viajado. Do disse isso fazer h i d p i. e, em seguida, o próximo vai ser viajado. Três. Certo, exceto por Hi V P O então pegamos a imagem errada. Vou substituir isso pelo correto, que éo que é 3 viajado, que é aqui. 3 viajado, a Eapróxima será a imagem de viagem número quatro. E Deus disse isso a ele. Fique bem. Agora o problema é que você sabe, não está ocupando toda a altura. E também, o fato de que decide é que são diferentes. Então, como consertamos isso? Muito simples. Para ir em frente e selecionar a imagem. Vou dar uma aula e chamar essa imagem de facada. Ok, agora, o que eu vou fazer é que nós já definimos a altura, que é de 4.20 pixels. Então, aqui no ataque, vou mudar de Phil. E eu disse isso para cobrir. Ok? E também disse que a altura para ser 100% de modo que ocupa toda a altura. Se eu controlar o que, você pode ver que ele está escalando enquanto mantém a proporção. Então isso é muito bom. Então queríamos manter a questão do aspecto, e para a imagem será Candle é que podemos chamar a mesma coisa. Então vamos chamar essa imagem de guia para que habilidades e mantém a proporção. Chame esta imagem de facada. Lá vamos nós e construções também e chamar esta imagem guia direita. Eles têm um muito bom Agora vamos em frente e dar uma olhada e ver como isso e isso está parecendo muito bom. E se eu tocar na Austrália. Você pode ver que ele colapsa porque não há conteúdo no topo da Austrália e presidente indiano . Coisa acontece. Então, o que? Temos a Austrália aqui, e vamos ver isto. que parece em uma exibição de 1920 parece muito bom. Parece agradável e interessante. OK, agora você pode ver que em uma tela de 1920, você pode ver que a altura tipo fora, você sabe, torna-se como uma proporção quadrada quase. E enquanto isso é bom, mas assumindo que vamos dizer que sempre quisemos ser, você sabe, como esta altura vertical. O que podemos fazer é selecionar a aba. Ótima. E aqui nós definimos a altura para 20 pixels. Agora queremos que o alto seja alterado com base na porta de exibição com ele. Tudo bem, ver quadro. Não estamos a ver a altura do porto. Ok, então eu vou ver 30 v w. Ok, agora o que vai fazer é ir para o pé. Defina a altura com base na porta de exibição com, Então, se o peso da porta de exibição aumenta, a altura também aumenta. Eu provavelmente vou dizer isso para 35 ou talvez 30. 30 para, Eu acho que eu acho que era um bom número. E agora, se você realmente ir em frente e olhar para isso, vamos para 1440. Você pode ver que ele ainda é vertical, você sabe, como a taxa de esporte de você, porque a altura é dependendo da porta vista Worth. Ok, se eu descer aqui na pré-visualização, podemos ver isso. E se eu for para 1920 você pode ver agora que o manípulo de altura é a altura é baseada na palavra fora da tela, e isso é exatamente o que você quer. E se você ir em frente e dizer isso para 38 40 você pode ver que nós conseguimos isso, o que é enorme. Então não queremos isso direito. Não queremos que o tipo de coisa aconteça. Então o que podemos fazer é dizer, OK, OK, eu não quero que você vá tão grande. Quero que conheças o Max a um determinado valor de pixel. Então vamos dizer que nós dizemos 500 correções são Digamos ser, digamos que 600 correções são Digamos que dizemos 6 40 escolhas é ou eu 600 é um bom número, então vamos dizer, continue aumentando a altura, mas pare quando atingir 600 pixels, talvez considere 620 0 R. 630. Ok, então isso é o que nós meio que queremos ir com. Eu vou em frente e disse isso para 14. 40 de novo. Então isso é o que temos, e isso parece muito bom. Agora, o que nós agimos que ele pode fazer é se eu vir aqui para as imagens, começar para o navegador, e vamos para o conteúdo das abas para que você possa ver isso no conteúdo das abas. Temos uma conta. Bom. E por dentro que temos. Essas quatro imagens que podemos fazer é copiar isso e enfraquecer com base nisso em todas as outras também. E podemos ir em frente e mudar as imagens mais tarde. E também, eu vou ir em frente e rapidamente nomeá-los e chamar este conteúdo dab, conteúdo trabalho e conduta de trabalho. Certo. E vai rever isto. Então, se ele vir isso, se você clicar em diferentes guias, você pode ver que as imagens meio que mudam. E agora todas as imagens são iguais. Então vai ser o mesmo, então você pode ir em frente e mudá-lo e vai ficar muito bom. Tudo bem, então há algo que está parecendo muito legal e realmente incrível. Então, agora no próximo vídeo, vamos em frente e fazer isso responsivo e mostrar e ver como isso parece responsivo. Então, como vocês no próximo vídeo. 32. Tornando a seção de tabs: Certo, pessoal. Então, no vídeo anterior, onde eu fui em frente e fiz esta seção de aba e neste nós não vamos em frente e fazer isso responsivo para no ponto de ruptura. Então vamos fazer isso. Vamos por todo o ponto de quebra do tablet em def. Você tem um local aqui. Depende de como você quer mostrar é agora. Uma vez que estas são imagens que gostaríamos de ter Ah, boa quantidade fora do espaço para isso. Então, obviamente, vai começar usando o tamanho da fonte fora deste estudo? O em uma separação deste para 80 80 você sabe, 40 e 40. Hum, qualquer coisa. O que eu gostaria de fazer é, vez que este é um tablet, eu posso eu quero mudar a grade. Então, para transformar isso em uma nota de duas por duas colunas, então para comprar notas turo tão gentis, configurá-lo assim na promotoria Você sabe, nós poderíamos talvez até reduzir o aumento da lacuna do presente de estrada para 24 feito. E agora esse tipo de parece estranho. Mas pense é que desde que definimos o estudo de altura, vamos olhar para a grade. A altura deste para ser 32 VW em um máximo fora 6 30 Nós meio que queremos mudar isso, certo, porque agora o tablet vai ser menor. Não vai ser muito grande, e assim podemos definir um valor fixo. Então eu vou em frente e remover o máximo molhado. Só vou dizer “nenhuma”. Está bem? E para a altura, vou defini-la em termos de pixels. Então provavelmente algo como 3 60 correções. Uh, talvez eu acho que nós poderíamos aumentar isso até 6 40 picaretas é mesmo se você quisesse ser um pouco mais, nós poderíamos ir em frente e pular isso até, você sabe, 808 100 alguma coisa. Isso é algo que vocês têm que decidir. 840 Direita. Então isso parece muito bom e decente o suficiente. Nós poderíamos ir para o ponto de quebra da paisagem, e isso será Pode fazer é usar a margem superior para 64. Acolchoamento inferior para 64. 20 à esquerda e 20 à direita. E isso está parecendo muito bom. Agora, uma coisa que podemos fazer aqui algo interessante é que podemos realmente remover as rebatidas que tivemos para cada um desses elementos, certo? Então, podemos ajustar a rebatida fora para automático. E agora o que podemos fazer é, já que este é um menu de abas, podemos mudar isso para uma caixa flexível, certo? E uma vez que eu mudá-lo ou caixa flexível, eu posso realmente dizer justificar espaço entre para que os elementos tipo fora espaço estes fora. Agora, a razão agora, a razão pela qual não é o Brasil não está tocando a borda é por causa do fato de que nós o definimos para auto. Queremos definir o dedo zero, e é assim que vai parecer. Então, agora temos essas guias que estão ocupando espaço igual, e essas imagens também parecem, mas eu acho que isso parece um pouco estranho porque não é, eu quero dizer, ele se encaixa muito espaçado. Então eu acho que quando um controle de imprensa Z apenas para tipo de, você sabe, trazê-lo de volta ao seu estado original, Tudo bem, Tudo bem, Semelhante. Como este. Eu acho que isso é o que isso estava muito bonito. Então, vou deixar assim. Temos um pequeno problema em que este tipo de passa para a próxima linha. Então o que poderíamos fazer é provavelmente reduzir o com. Quero dizer, o estofamento de 24 a 20 talvez até 16 são. Vamos tentar. Acho que temos rádios para zero. Isso funciona? Tudo bem, então funciona com zeros de talvez, digamos ao máximo, eu acho, um ou seis. Certo, temos que ficar cheios. Sim, muito parecido com isto. E, hum, eu acho que seria uma boa opção é selecionar o menu abas e realmente dizer isso em uma grade. E então nós temos que comprar para colaborar, e isso é o que nós temos. E eu acho que esta é uma maneira muito melhor de representar isso. E o que poderíamos fazer é esta aba que poderíamos dizer flexionar, dizemos um centro de linha e justificar o meio para que o texto esteja no centro. Acho que esta é uma representação muito melhor. E se você for para o retrato móvel, nós pegamos isso. E eu acho que isso também parece muito bom para 40 é muito pequeno. Então eu acho que podemos ficar com 3 60 que é o padrão. E nós temos que ir para a primeira série é porque isso é muito apertado. Vou remover essas duas colunas e torná-las uma única coluna, e elas devem ficar muito boas. E nós podemos tirar a altura de cada um dos itens significativamente e em vez , você sabe, você sabe, adicionar uma altura à grade de abas. E aqui também, acho que adicionamos uma altura à nota da tabulação. O que eu vou fazer é eu vou remover a altura para o tablet em disse que auto e nós vamos fazer é que eu vou chegar a cada um dos elementos. Essa é a imagem da aba e dar a ela uma altura. Agora, nós tinhamos dado 100%, mas 100% de desconto. O que? Agora é 100% de Zito, certo? Porque nós não temos ah altura dada para a conta. Ótima. Então podemos dizer é que podemos dizer que 840 nos escolhe certo? E talvez isso seja demais. Digamos que 6 40 picaretas está certo. Ou talvez seja verdade, mas digamos 6 e 30 pixels, certo? Eu acho que este é um bom número, e agora estamos dando uma altura para a guia individual e não o grande. E vamos voltar para a visão móvel, e eu acho que isso também parece muito bom. E eu acho que está muito bonito. Então isso é basicamente sobre como fazer isso responsivo. Acho que uma coisa legal que poderíamos fazer é talvez pela paisagem. Poderíamos remover a lacuna para que, você sabe, eles meio que se toquem. Tudo bem. E talvez essa seja uma direção legal que possamos tomar. Não tenho certeza, mas acho que vou continuar e mantê-los como sempre. E sim, isso parece muito bom. Então é isso para este vídeo e um PSA. Vocês estão no próximo vídeo? 33. Construindo a seção de formulários: Tudo bem, pessoal. Então, neste vídeo, vamos em frente e criar esta seção de formulário. Basicamente, o que acontece é que as pessoas que visitam seu site podem realmente digitar o nome, endereço de e-mail e uma mensagem e eles podem enviar um formulário para você. E quando isso terminou, você recebe um e-mail e você recebe informações sobre ele. É meio que armazenado de volta na web flow silver, e eu vou te mostrar onde ele vai ser armazenado e como você pode configurá-lo e parar agora. Mais uma coisa a notar aqui, é que o tamanho fora deste o recipiente é realmente menor do que o que temos usado semelhante ao que usamos no drible, certo, certo, Então ele outro com é 1076 Isso é o recipiente com o qual é diferente de todos os outros que temos vindo a criar até agora, porque todos estes têm um pouco de 1920 max, mas este é limitado 21076 Então o formulário também vai estar nesse formato, certo? Então vamos em frente e sangue flui, certo? Então, primeiro de tudo, vamos em frente e disse isso a 14 40. E eu vou selecionar o corpo e pressionar o controle E e digitar a seção e vai ser a seção de formulários. Ok. Vou ter um estofamento de 120 no topo, 120 no fundo. Agora a palmada esquerda e direita. OK, vamos em frente e adicionar isso, mas realmente não importaria. Neste caso, digamos 72. Ok. E o que podemos fazer é que estou em um E. controlado pela imprensa. Vamos ter um impasse, que vai ser um rapper. E eu vou dizer rapper V dois porque o V dois tem um máximo com um 1076 porque é isso que queremos. Ok, então agora, basicamente, é muito simples. Tudo o que você tem que fazer é criar uma grande coluna de dois. Ótima. Então vai haver a coluna um e vai ser coluna para, e nós temos a distância de 24 pixels fora da coluna. Sogard Spacing off 24 picaretas é entre estes dois, então podemos ir em frente e usar isso também. Certo? Então vamos começar criando. Então o que podemos fazer é realmente um bom e eu vou chamar isso de grade de formulários, ok? e eu vou dizer, você sabe, transformar isso em uma grade e nós vamos remover duas linhas porque nós só precisamos saber e teremos duas colunas. Tudo bem, muito bom. E nós vamos em frente e eu vou copiar este bloco normal. Ou podemos copiar este título. Copie isso e nosso enfraquecimento lexical aqui e selecione o rapper. E em curso, Primeiro de tudo, meu bloqueio criativo. Certo, porque precisamos que este seja o primeiro bloco esquerdo e queiramos chamar essa porcaria normal e impressionar o controle de veto. Então eles têm isso, e eu vou copiar este texto de parágrafo, e vamos em frente e colocar isso também. Então é assim que parece. Tudo bem, agora temos um monte de aulas de combate. Vou deletar tudo isso. Não precisamos de tudo isso. Só precisamos do que diz como uva porque a cor da fonte é provável. E copie este texto, e eu vou ir em frente e baseá-lo, e eu vou copiar isso e um ir em frente e basear isso também. Certo? Então a próxima coisa é ter certeza de que sabemos é que a grade precisa ser 24 picaretas é branco. Alguém disse colunas 24 coluna Gap pecan feito. E aqui nós vamos em frente e adicionar uma nova faculdade elemento, as fazendas, imprensa de leitura, país e pesquisa para formulários. Então temos um bloco de Nicholas Reform. Vou ir em frente e arrastar isso para dentro, e agora é assim que vai parecer. Ok, então a primeira coisa é que vamos em frente e, você sabe, apenas chamar este bloco de fazenda, ok? E podemos ir em frente e começar a personalizar isso imediatamente. Então esse tipo de com o nome e, uh, se você olhar para as configurações um parágrafo de 16 pixels, certo. Então eu vou selecionar o nome e eu vou dizer 16 escolhas de parágrafo. É assim que temos usado. Vamos fazer a mesma coisa para o e-mail e a mensagem, então eu vou dizer endereço de e-mail 16 escolhas de parágrafo. E a coisa aqui é que a cor é de uva clara, mas queremos que seja branca. Vou adicionar uma aula de combinação e nos chamou de branco. Então queríamos que isto fosse branco. Vá em frente e diga isso, Dwight, e vá em frente. E eu disse isso para esperar. Certo? Excelente. Agora há um pouco de distância, que é em torno de oito pixels. Então eu vou selecionar o campo de texto. Vou ligar para cada um desses campos de texto, e vou ter uma margem superior de oito pixels. Então, temos algum espaçamento que fará a mesma coisa aqui. Chamamos este campo de texto, está bem? E este campo de texto tem uma cor diferente fora l um. Então eu vou selecionar isso e adicionei a cor que queremos, que é L um. Tudo bem. E isso, em última análise, muda você. Isso também tem uma fronteira. Você pode ver isso aqui. Nada está lá tão às vezes como um inseto. Então tudo que você tem que fazer é selecionar o campo de texto e adicionar um e, em seguida, apenas excluí-lo para E, você sabe, nós podemos definir a largura deste para ser zero, então apenas remova isso e está parecendo muito bom. Agora temos chá, que é nome de e-mail, e temos mensagem e a distância entre e-mail e mensagens é de 40 pixels. Eu vou vender o campo de texto, e eu vou adicionar uma margem inferior de 40 escolhas está certo. É assim que vai ser e eu vou selecionar o parágrafo ah. Vou copiar isso e colar. E quando eu mover isso para baixo e eu vou selecionar este também, copie isso e colá-lo e vamos mover este para cima, ok? E vai haver uma mensagem, está bem? E estamos aqui em baixo agora com Gordon. Personalize isso e adicione as propriedades. Então nós temos um campo de texto aqui, e quando eu venho aqui nas configurações, nós temos algumas opções. Então, em primeiro lugar, qual é o nome que iríamos deixar isso? Vamos chamar isso de nome de pessoa, certo? E se você quiser adicionar um espaço reservado bifes, você pode adicionar isso para que você possa ver coisas como inserir seu nome para que possa ser um texto de espaço reservado . E que tipo de texto sente é é É uma senha de e-mail simples para número número. Poderíamos apenas dizer que é um baço e você é você quer decidir sobre o seu Este é um campo de texto obrigatório e você pode dizer sim. Queremos que este seja um perito obrigatório. Bastante simples. Vamos para o próximo. Ah, aqui podemos ver entrar e-mail quintal e podemos ir em frente e visivelmente exigir novamente. Podemos ver o tipo de texto para ser e-mail. Vai haver uma mensagem, e esta vai ser uma mensagem. E, uh, o que nós vamos fazer é ir em frente e mudar isso para um texto simples porque isso vai ser, tipo, tipo, texto enorme e simples onde as pessoas podem digitar coisas e nós podemos realmente ir em frente e fazer isso bastante grande, que está em 100 pixels. Então eu vou adicionar uma classe vírgula e dizer isto 100 pixels apenas por precaução, e então vamos para dentro da altura destes 200 pixels, certo? Ah, é basicamente isso. Agora nós temos este botão, que é muito grande e grande, então nós temos o botão enviar e eu vou adicionar a classe botão. Acho que chamamos de CD, e quando faço isso, é isso que temos. Mas o que eu vou fazer é ir em frente e criar uma nova classe e chamar esse botão de formulário porque isso é bem diferente de todos os outros botões que estão mortos. Eso o 1º 1 Eu vou disse o com fora disso para 100%. Então ele ocupa toda a inteligência, então nós temos o texto, que é 18 pixels. Então eu vou selecionar o texto e nós vamos e definir isso para 18 picaretas é vamos definir o peso frontal fervido. E também vamos dizer, vamos começar para que possamos clicar nisso. E quando você clica no botão, você realmente tem que editar informações aqui. Então, vamos dizer, vamos começar e quando você usar o botão você pode ter algum estado senhorio e enfraquecer. Então agora, ele diz: “ Por favor, espere, nós podemos essa coisa como se submeter tudo bem. E os três pontos que devem funcionar. E também temos algum preenchimento superior e inferior de 24 para que possamos selecionar a fazenda. Burton e Weaken dizem, 24 no topo e 24 no fundo. Certo. E também, a cor, é claro, tem que ser mudada para o nosso Este agora parece muito bom para este caso. O que eu vou fazer é eu vou apenas remover o texto do espaço reservado porque o design não tem nenhum, então eu só quero ir em frente e remover isso por enquanto. E isso é praticamente o que parece. E se você seguir em frente e tocar no botão de pré-visualização e clicar nele, você pode ver que ele diz, por favor preencha os campos e ele vai seguir em frente e digitar aleatoriamente algum texto. Agora, você pode ver isso quando eu aleatoriamente até que você possa ver que há algum texto que está aqui . Então vamos em frente e dizer Chilton, KBS e agora nós meio que formamos editar essa tecnologia. Então o que você quer fazer é digitar o texto, então você quer voltar para o fluxo da Web. Então o que vamos fazer é ir em frente e apenas mudar a cor do branco. E esta é a cor da tipografia. E agora isso deve funcionar. Então vamos em frente e apenas dizer Crianças, KBS e obras. Isso é que no e-mail, eu d direito e não muito certo o que esse status e vamos adicionar em alguma mensagem, eu só vou dizer olá agora se você vê aqui, o problema aqui é que este texto sente seu tipo de começar por aqui e que que queremos fazer é ir em frente e usar um novo componente que é área de texto em espiral, certo? Vamos pegar isso e trazer isso para cá. E eu acho que esta é uma representação muito melhor. E aqui podemos ver em um texto de espaço reservado e podemos dizer que é necessário. E podemos excluir esse campo de texto. E para isso eu vou apenas dizer, Ah, Ah, campo de texto e dar a isso uma altura fora 100 pixels classe ritual dicamba que nós adicionamos. E isto deve ficar bem. E o texto de espaço reservado um ir em frente e o líder que não precisamos de nenhum texto de espaço reservado tão rapidamente. Vamos em frente e adicionar algumas informações. Eu só vou dizer que mesmo eu vou dizer ABC no Gmail Dot com, certo? E eu quero dizer olá é a mensagem. E quando eu ir em frente e tocar em que começar, você considera que diz tentar o formulário em seu lado publicado. Então eu fiz. Esqueci de mencionar que vamos em frente e publicar isso em domínios selecionados e sua ir em frente e visualizar este direito. Vamos rapidamente para o assunto. Vou dizer algumas coisas aleatórias ABC no ponto de refeição e podemos dizer oi, certo? Então agora vamos em frente e começar a conter diz submissão. E diz: “ Obrigado”. Sua submissão recebeu Bean. Neste momento, há outra coisa. Algumas coisas que podemos fazer é ir selecionar o bloco de formulário e vamos clicar em. Então, quando você clica no ícone de engrenagem, temos três estados, ficamos normais. Nós temos sucesso e temos melhor clique sobre o sucesso que e nós podemos tipo de personalizar como esta coisa toda parece. Então, por exemplo, podemos adicionar uma nova classe e chamar isso de sucesso e o que eu gostaria de fazer com olhos que eu meio que quero adicionar uma cor verde ao fundo. Então, parece com isso e até mesmo o texto que eu posso dizer texto de sucesso. E nós poderíamos ir em frente e fazer isso, você sabe, como, você sabe, como, você sabe, ousado e que você pode dizer o que quiser e até mesmo mudar a cor para isso como algo assim deve funcionar agora. Nós também podemos ir em frente e ir para a interestadual e a interestadual parece algo assim . Então aqui novamente você pode ir em frente e adicionar a classe personalizada da maneira que você quiser. Talvez pudéssemos ir em frente e fazer isso. Vamos selecionar a mensagem do editor. E digamos que somos como uma espécie de cor vermelha escura. Tudo bem, algo assim. E podemos definir o texto e mudar a cor para branco. Então algo assim agora você pode voltar e voltar para o estado normal. E isso é praticamente o que parece. Então, basicamente para este vídeo no próximo vídeo, vamos em frente e fazer isso um responsivo. Então são vocês no próximo vídeo. 34. Tornando a seção de formulários: Certo. Então, neste vídeo, devemos ir em frente e tornar este formulário responsivo, certamente super simples. Então vamos começar. Então vá para a visualização do tablet, e é isso que temos. E, sim, então comece. Obviamente, reduzindo o tamanho daqui. Então eu vou definir isso para 60 ou 80 no topo 80 na parte inferior, 40 na esquerda e 40 na direita. Eu acho que isso deve ser bom para a visualização do tablet. Acho que este é o menor, e à medida que aumentamos, acho que devem ficar bem, , na minha opinião. Então vamos para a paisagem. E é aqui que podemos. Quero mudar as coisas por aí. O primeiro de tudo, vamos pronto é isto para 64 no topo 64 na parte inferior 20 à esquerda e virando à direita . Agora, eu pessoalmente quero fazer disso uma única coluna. O maior. Vou em frente e remover a coluna para que tenhamos tudo em uma gota. Vamos ter uma lacuna? 48 picaretas é para a rosa para que você saiba, temos alguma boa distância e eu acho que isso já parece muito grande. Sempre procure um retrato móvel. E, hum, eu acho que isso parece ótimo. Nada com o que se preocupar. Isso é muito bonito para este vídeo no próximo futuro. Quando você for em frente e projetar, construa o pé, então são vocês no próximo vídeo. 35. Construindo o Footer: Certo, pessoal. Então, neste vídeo, vamos em frente e construir o rodapé. Agora, este não é o fim do curso, porque você vai criar um monte de interações divertidas e fazer este site se sentir muito animado. Então esta é a última parte que vamos estar construindo coisas e provavelmente nos próximos vai realmente ir em frente e adicionar interações e animações e fazer o site parecer muito mais divertido. Então, como estruturamos isso? Vamos começar do básico. Obviamente, teremos uma seção, e nesta seção teremos um rodapé e haverá um rapper que será novamente nosso rapper padrão. E a outra coisa que não aqui é que se você virar as notas direito, isso foi estruturado de uma certa maneira. Certo? Então temos 123456789 10 11 12 Temos 12 colunas agora. Cinco dessas colunas estão ocupando espaço para, você sabe, os links de navegação e o resto é para o nome E você sabe, os ícones e alguns têxteis aqui agora, nós poderíamos ir em frente e construir esta coluna 12. Ótimo. Tudo bem, o que é totalmente possível. Ou o que podemos fazer é que você pode ter duas colunas, mas mudar a proporção se estiver certo, então temos 12 e cinco por 12 é cerca de 40% certo? É 41,6, mas é como 40%. Então podemos dizer que isso pode ocupar 46 40% e este kit de lata pode ocupar 60%. Então, há duas maneiras de fazer isso. Ou use 12 colunas ou use duas colunas e dê uma proporção diferente, certo? Então vamos em frente e construir o nosso fluxo de trabalho. Então eu vou para um flutuador da Web e vamos voltar. Então vamos dizer isso a 14. 41º está bem? E vamos selecionar exigente Osama pressionando, criando uma nova seção chamada essa seção, e eu vou ir em frente e chamar isso de fota. Ok, Agora, a outra coisa a notar é que eu fui em frente e dado isso uma altura fixa ou 422 picaretas é ok, então eu vou e obter um fixo apertado off 422 picaretas está tudo bem. E também queremos um pouco de estofamento na parte superior e inferior. Então é 80 no topo. O mesmo. Não são 120, são 80 no topo. São 80 no fundo de novo. 72 à esquerda, 72 à direita. Além disso, a cor é diferente. A cor de fundo é, hum, você sabe isso fora de um, uh, cor roxa de nível um que temos usado. E agora vamos criar um rapper para os preservativos internos. Então você cria um bloco. Se alguém chamar este rapper, vai haver o nosso rapper de anulação regular, certo? Parece fantástico. E agora vamos em frente e transformar isso em uma grade, certo? Alguém crie uma nova turma e chame esta fotografia. Tudo bem, então no pé, concordou. Vou em frente e transformar isso em uma cenoura, e é óbvio que só queremos Maravilha fora de duas colunas e maravilha e o espaçamento entre será 24. Agora, você ouviu isso? Temos algo chamado fr, que é basicamente fração. O que eu posso fazer é que eu posso realmente mudar isso de 0,1 fr e disse isso para 0,4 esforço. Tudo bem, e quando eu digo zero ponto para isso significa que este é um f r e 0.4. Mas eu meio que quero que isso seja 0,6 fr para que este seja um ponto para um longe no final, F r significa fração, e no final, queremos que tudo seja um. Então 0,6 mais 0,4 é um. Então, basicamente, estamos dividindo na proporção de 40 60. Tudo bem? Poderia ter feito. Agora, vamos em frente e criar um bloco, certo? E vamos chamar esse bloco normal de Brock Normal de rapper normal. E aqui vamos começar trazendo o logotipo que tínhamos. Então eu vou pegar o logotipo certo sobre este SVG local. Agora queremos que este logotipo esteja dentro de um bloco de links, porque quando eu clico nisso, eu meio que quero navegar até o topo do campo. Então vou pressionar o controle, comer e criar um bloco. Desculpe. Link bloco e eu vou colocar esta imagem dentro do bloco de link. Ok? E eu quero selecionar o bloco de links, e eu vou chamar este logotipo foto. Ok? Agora, vamos ver o tamanho disso em fig. MMA, tem cerca de 40 pixels de altura. Então eu vou definir, hum, hum, a altura da imagem fazer 40 picaretas está tudo bem. Isso parece muito bom. Nós também temos esses ícones na parte inferior, então eu vou criar um novo bloqueio, certo? E vai haver para o vai chamar normal, Rapid. E isto vai ser para os ícones. Então vamos em frente e pegar os ícones. Então temos que ir a Witter. Temos o LinkedIn e temos um drible. Vamos em frente e drible. Lá vai você. Agora, vamos em frente. E rapidamente, vou chamar isso de ícones sociais. Agora, há um espaçamento aqui, que está por aí comendo, que está em 16 fotos. Então eu vou adicionar uma margem de 16 pixels, e eu estava na mesma classe para os outros dois também para chamar esses ícones sociais e ir em frente e selecionar não é chamado de ícones sociais. Tudo bem, agora, aqui, nós também temos algum espaçamento do fundo, que está em 32 pixels do logotipo. Então eu vou selecionar o bloco de links, que é o logotipo da foto e em uma margem inferior fora dos pixels Reto. Certo? E isso parece muito bom. Tudo bem, agora vamos adicionar este texto também, então eu vou criar para começar criando um novo bloco de texto. Então eu vou criar um novo bloco de texto, e aqui nós vamos apenas copiar esta informação, e então vamos em frente e baseá-lo e ouvir o que eu vou fazer é que isto são parágrafos de 16 pixels . Eu vou dizer parágrafo 16 pixels, e nós queremos que ele seja cor, para ser como uva, e isso é muito parecido com isso. Tudo bem. Outra coisa é que podemos ver que essas duas seções são meio que forçadas para o topo, e essas duas são, felizmente, inferior. Então vamos usar a propriedade flex para meio que uniformemente espaçados amanhã. Então, obviamente, quer selecionar o elemento pai, que é o rapper normal. E agora eu quero dar uma aula flexível. Então, se eu disser flex, você pode ver que temos flex vertical esquerda superior. Foi a única coisa que fizemos. Mas vamos usar outro. Vamos usar um diferente. Alguém chamou este flex vertical grande. E eu vou dizer esquerda e eu vou dizer espaço entre, certo? O que tudo isso significa? Então eu vou começar indo em frente e mudando isso para uma caixa flexível, ok? E queremos que a direção seja vertical, certo? E obviamente queremos que o alinhamento para a esquerda na justificativa vai ser espaço entre, que significa que vai para o espaço. Cada um dos elementos, você sabe, em direção à borda da pele vai empurrá-lo para a borda fora da tela. Agora, a coisa é, nós não queremos que esses ícones também sejam empurrados. Então nós meio que clube esses dois. Então, outro clube, esses dois, vou criar um novo bloco de desenvolvimento, certo? E vai haver umrapper simples e normal, rapper simples e normal, e nós vamos pegar Vamos realmente olhar para a navegação para entender isso melhor. Então você tem um pé para cima, que é uma seção, e então nós temos um rapper normal, e então nós dentro que nós temos o rapper esquerdo, que é o rapper normal, e que tem o espaço entre propriedade flex e para baixo contra. Então temos o logotipo da foto. Agora, vez que este rapper normal sesta tem uma flexão entre a propriedade, ele vai flexionar as crianças imediatas e crianças imediatas que queremos é o logotipo da comida A ? Tudo bem, nos ícones de mídia social em um e parágrafo para ser o segundo filho. Então temos o normal. Rapper. O Imediatamente para Crianças é o rápido normal por aqui. Que tem estes dois bem ali. Você pode ver que um no outro é este. E agora o que está acontecendo é que desde essas duas outras crianças da mídia, está empurrando essas duas crianças imediatas em direção à borda do contêiner. Certo? Isto é basicamente o que queremos. Ótimo. Então, outro, isso está feito. Nós também queremos ter certeza de que esses ícones são clicáveis. Então o que temos que fazer de novo é adicionar um bloco de links, certo? E vamos colocar esses ícones dentro do bloco de links. Certo? E vamos criar um novo bloco de links. Vamos colocar este ícone dentro do bloco de link e temos que precisamos de outro bloco de link. E colocamos isso, uh, Linda Nikon dentro, e podemos selecionar cada um desses blocos de links e dar uma classe, podemos dizer bloco de link social. E para isso, podemos dizer que os esforços de bloqueio de vínculo social. Além disso, podemos dizer bloco de ligação social apenas para ter certeza de que temos um nome para tudo. Está bem, muito bom. Então agora tudo o que você tem a fazer é se você não dar-lhe um link, você pode simplesmente clicar nas configurações do elemento, e você pode adicionar o link depois que você está sozinho aqui. Tudo bem, então para o próximo, hum, nós temos dois elementos agora. A instrução valiosa vai dar 50% de espaço para isso e 50% de espaço para isso. Ok, agora, se você olhar para ele o link, você pode ver que este link está ocupando todo este espaço. E o que está acontecendo é que quando eu passasse sobre esta área, eu gostaria que o link estivesse ativo também. Eu só não quero que ele fique ativo quando eu tenho no texto. Não posso querer que esteja ativo. E eu pairei sobre toda esta seção. Certo. Então o que podemos fazer é criar vários blocos de link e colocar o texto dentro. Certo? Então vamos em frente e fazer isso. Eles vão começar criando um novo bloco, que será a seção certa. E eu vou dizer “Rapid normal “, porque é uma aula normal que estamos dando. E por dentro, vou criar um bloco de ligação. Tudo bem? E isso vai ser um bloco de links de fotos. Ok? E o que está prestes a fazer é eu vou começar adicionando um link de texto. Primeiro alguém pressione o controle E e adicione um link de texto. Oh, nós podemos apenas dizer um bloco de texto nesse caso porque, uh, ok, e aqui o que eu vou fazer é eu vou chamar este link foto, ok? Este é um pé um link, então podemos selecionar para que possamos ver que temos algum preenchimento na parte superior e inferior, que é em torno de oito pixels para que possamos ir e definir o preenchimento fora isso para ser oito pixels no topo em oito pixels na parte inferior . Acho que vamos em frente e fazer deste um 12. Vamos fazer um 16 na parte superior e 16 na parte inferior 16 na parte superior e 16 na parte inferior. Parece muito bom. E também para o bloco de link de fotos o que podemos fazer é remover esta declaração ou aqui para que não se pareça com isso. E também para o pé um link. Vamos em frente e ver esta configuração. Então é branco. 16 pixels, parágrafo pronto, Simples. Então nós podemos ir em frente e mudar o tamanho da fonte fora deste para ser 16 on, nós podemos ir em frente e fazer isso para ser branco, certo Eles vão, vamos em frente e apenas fazer quatro cópias para que possamos selecionar o pé um link para que possamos dizer copiar Colar baseado e baseado, certo? Então vamos em frente e mudar isso. Vamos ver a casa. Vai haver sobre isso vai ser trabalho. E a seguir temos o processo. Ótimo. Então, se você tipo de olhar para a estrutura, o que nós temos é então você tem um rapper normal e dentro que nós temos esses quatro links agora, o problema aqui é que nós queremos definir. Então o que eu vou fazer é ir em frente e selecionar este bloco de links e duplicar agora mesmo . Isto é o que temos agora para mim. Eu não quero ser o último Link Block alguém Vá em frente e apague isso por enquanto. Só precisamos de um bloco de loja e lista de leitura. Vou dizer loja que vou ver em Blawg. Vou ver a lista de leitura. Certo, agora vemos alguns problemas, certo? Então vamos em frente e corrigi-lo. A primeira coisa é que temos este bloco de link de foto certo, que tem, você sabe, quatro links que vamos fazer é eu vou ir em frente e dar-lhe um molhado fora 50% certo? O que significa que vai ocupar 50% de desconto no espaço. E a mesma coisa vai acontecer aqui é que vai ocupar 50% de desconto no espaço, que é exatamente o que queremos. Agora, a coisa é, isso é meio que no centro, certo? Mas queremos que isto fique no topo. Então o que eu posso fazer é adicionar uma classe vírgula e podemos ver seleções. Muito bem, agora temos esta cláusula comum que diz flexão vertical esquerda para cima, mas queremos uma nova classe de combate porque flex vertical vai colocá-los um abaixo do outro. Precisamos que eles fiquem um ao lado do outro, certo? Vou começar um novo e chamar isso de flexão horizontal, certo? E sublinhado. Queremos que o Toby saia e queríamos estar no topo, certo? Então vá em frente e flexione isso. Tudo bem? E então nós vamos dizer flex horizontal vai dizer top on-line e vai dizer justificar esquerda, direita, direita, Isto é o que nós queremos. E agora isso está praticamente feito. Então o que eu estou tentando dizer é, se eu for para a pré-visualização e se eu passar o mouse sobre qualquer uma dessas áreas, certo, você pode ver que mesmo que eu não esteja acontecendo no texto porque toda esta seção é uma área de link, Sou capaz de activar isto. Ok, agora, uma coisa rápida que podemos fazer é adicionar um estado flutuante a isso. Então, vamos realmente selecionar o pé um link. Ok? Vamos entrar em um estado flutuante e na predição. O que eu vou fazer é ir em frente, fazer a cor e mudar essa cor ciana que temos, certo? E nós vamos em frente e eu vou voltar para o não-estado e rapidamente ir para as transições definir isso para 350 e na flexibilização, eu vou ir em frente e definir isso para ser fácil ou judicial. E também vamos para a opacidade. Onda, mude essa propriedade. Faça a cor da fonte, certo? E agora deve olhar o que estávamos perfeitamente. Então, quando eu passar o mouse, você pode ver que estes não podem ser destacados. Certo? E, uh, isso é muito legal, certo? Então agora temos algo que se parece com isso. Então, no próximo vídeo, vamos em frente e fazer isso responsivo. Vejo vocês no próximo vídeo. 36. Tornando o Footer responsivo: Certo. Então, neste vídeo, vamos em frente e fazer este pé responsivo para outros pontos de quebra. Então vamos começar. Está indo para o ponto de quebra tablet primeiro, e isso é o que temos. Agora isso parece muito OK, eu diria, mas talvez nós pudéssemos ir em frente e apenas garantir que nossos padrões regulares em ambos os lados são os mesmos. Hum, oitenta. Tudo bem, pois isso deve ser bom o suficiente. Acho que o que eu gostaria de fazer é, neste caso, o rapper que tínhamos, tipo, uma grade de 60 40. Acho que o que eu gostaria de fazer é, neste caso, o rapper que tínhamos, tipo, tipo, Posso fazer com que um fr e um fr ou desculpe, um longe e Europa ou em seis fr para que tenhamos algum espaçamento como este. Thea, outra coisa que poderíamos fazer é dizer isso a uma distância de novo. Então nós meio que aceleramos isso para 1/2. Certo? Se você ir em frente e escalar isso para os outros grandes clientes, vemos que temos algo assim, tudo bem. Acho que dependendo de como queremos que isso seja, você pode ir em frente e estruturá-lo. Você poderia manter o mesmo. Uma proporção de 60 40 em si tocar o trabalho. Vá para o ponto de paisagem móvel aqui. Queremos fazer algo diferente. Vamos criar algo que se parece com o ponto de ruptura móvel que criamos , que tipo de se parece com isso porque a seção superior e então nós temos links, e então nós temos essa informação. Então vamos em frente e disse que assim aqui, ou o que podemos fazer é supostamente cair. Vamos remover o rapper e torná-lo uma única grade de coluna. Tudo bem. E é isso que temos. E agora o aqui, se você olhar para ele. Mas também, nós queremos ter certeza de que o não é altura fixa porque nós demos uma altura em algum lugar Teoh o eu acho que nós dá-lo para o pé, Eu acredito que sim. Vou remover esta altura e disse que “Faça auto”. Tudo bem, então nós sabemos, nós ficamos bem no espaço agora. O problema aqui é o fato de que estes três são clubes juntos, o que provavelmente significa que queremos que a ordem seja diferente. Certo? Então, como vamos consertar isso? Para que nós temos que corrigi-lo é através da estrutura fora dos elementos. Então, se você olhar para a navegação aqui, então nós temos o rapper normal, que é o rápido normal. E então nós temos isso, que vai ser para todos os links agora, aqui, aqui, estes três estão juntos, mas isso realmente tem que ser um item separado. Certo? Então o que podemos fazer é voltar para o ponto de interrupção da área de trabalho, porque queremos ter certeza de que fazemos as alterações lá. Aqui temos este invólucro normal agora. Incidente fora disso. É colocar este elemento dentro do rapper normal. Podemos colocá-lo lá fora, certo? E quando o colocarmos lá fora, quero dizer, deixe-me ir em frente e fazer isso corretamente se eu tomar o Romero normal aqui. Então aqui temos o terreno fértil. Recebemos uma mensagem. Vou fazer isto sair, está bem? E eu vou colocar isso aqui fora também. Tudo bem? E agora o que aconteceu é que nós meio que criamos esta nota 22 por duas colunas. Agora. Parece perfeito, certo? Parece bem. Então você voltar para tablet ponto de quebra que você pode ver que ele parece bem. Temos um ponto de ruptura paisagística . E agora vemos que conseguimos o que queríamos, certo? Porque o problema é que este é um elemento. Esta coisa toda é outro elemento. E este é outro elemento, certo? Então era isso que tínhamos que fazer. E quando você vai para a capacidade de resposta, quando você vai quando você faz alterações, essa responsividade, eles não afetam a estrutura fora da navegação. A estrutura de navegação continua a ser a mesma. E essa coisa que você estava mantendo meu Agora, vamos olhar para o espaçamento. Então, temos um pouco de espaçamento sobre os tópicos que são 40 pixels na parte superior e 40 pixels na parte inferior. Então eu vou fazer isso com a ajuda fora da coluna são os Roberts. Vou definir isto para 40 e vamos ter algo parecido com isto. Tudo bem, isso está ficando bem. Obviamente, queremos mudar isso. Faça 20 à esquerda, treinando à direita, , 64. Ou podemos dizer 48 no topo e todos os 30 64 no topo. Eu meio que esqueci o que estávamos usando. Sim, estávamos usando 64 64 no topo e 64 no fundo. E isso parece praticamente vai ser muito bonito vai olhar o mesmo no ponto de interrupção móvel também. Uma outra coisa que poderíamos fazer é realmente ir em frente e adicionar todos esses links em uma linha. Essa é uma preferência pessoal em beijo, se você vê ou ouve aqui, nós não fizemos isso. Mas no caso de você querer ter tudo um abaixo do outro, tudo o que você tem a fazer é, já que nós temos apenas essa classe extra, eu posso ir em frente e dizer o banco vertical sobre. Você sabe, nós deveríamos obter algo que se pareça com isso, e ele vai ser praticamente o mesmo em todos os outros pontos de quebra porque nós estamos fazendo as mudanças apenas para digerir o retrato móvel grande ponto de ruptura. Mas vou ficar com ele. Quanto ao design e controle Z, vamos conseguir algo parecido com isso, certo? Então é basicamente isso para isso, sabe? E eu vejo vocês no próximo vídeo 37. Criando uma animação de rolagem de seção: Tudo bem, então nós praticamente fomos em frente e construímos todo o site, e parece fenomenal. E parece ótimo. Temos um par legal de interações aqui e ali, e vamos tornar isso ainda mais divertido e interativo, e vai ser realmente incrível. Então, como você pode ver, parece fantástico. Você pode realmente, você sabe, publicar isso no domínio selecionado. E, você sabe, você pode até ver isso em seu dispositivo móvel. Ou se você tem um iPad ou tablet, você pode ver isso e verificar, como ele parece, porque este é um site real. Tudo bem, este é um site fantasticamente área. Agora. O que vamos fazer é ir em frente e começar a adicionar algumas interações e animações e torná-lo divertido. A primeira coisa a fazer é adicionar links, fazer esses links para que eles tipo de rolar para uma seção particular fora do site. O que eu quero dizer com isso? Então vamos fazer se temos três links ou aqui, certo? Éramos experiência. Temos trabalho, e depois temos fotografia. O que vai acontecer é que quando eu clicar na experiência, a página vai rolar por esta seção, certo? E eu vou selecionar essa seção de conveniência que temos, tudo bem, e eu vou vir aqui e aqui. Tenho uma coisa chamada identificação . Isso é como um consenso para links de página. Vou em frente e chamar isso de “E X P “por experiência, ok? E eu quero entrar no link de navegação de experiência, e aqui nós vamos escolher este que diz grande seção, e eu vou escolher uma seção paga e eu vou escolher E XP. Então o que vai acontecer é quando eu ir para a pré-visualização mais e quando eu tocar na conveniência, você pode ver que as escolas página para a seção expediente. Certo? E isso é e isso é muito legal. Vamos fazer a mesma coisa pelo trabalho e pela fotografia. Então, para trabalhar, eu vou escolher a seção de projetos, e eu vou chamar isso de trabalho, ok? E eu vou descer aqui para a seção de fotografia e selecionar esta seção e chamar esta foto apenas fora da foto da faculdade. Agora mesmo. Vamos voltar para cima e vamos selecionar o link de trabalho valete e vir para a seção de página, e aqui na seção paga, eu vou escolher trabalho e para fotografia. Eu vou em frente e escolher fotografia agora mesmo para contato. Você pode ter uma idéia de e-mail, um número de telefone que os leve, ou você pode realmente fazê-los ferrar todo o caminho para baixo. Faça a seção de negócios “Vamos Falar”. Então vamos em frente e fazer isso na seção de formulários. Vamos ligar para esse contato bem, e podemos voltar e ir para a seção de contatos, e aqui podemos clicar na seção paga e você pode salvar Paige contato e então vamos para a direita. Então, se você ir em frente e visualizar isso, você pode ver que quando eu clicar em conveniência, ele pode ir para a seção expediente. Quando eu clico no trabalho, ele está perto da seção de trabalho em. Quando eu clico em Fort of Photography, é perto para baixo para a seção de fotografia, a menos que e isso é muito legal e incrível. Você também pode ir em frente e fazer a mesma coisa para esses links inferiores também. Então, quando eu clicar em casa, ele vai me levar para a tela inicial para o sobre o processo de trabalho seção sobre. Mas eu vou deixar como está, porque quando você está construindo isso, você pode ter suas próprias páginas. Você pode ter seus próprios links diferentes e seções do seu site, então eu quero deixar que como que IHS Agora, a outra coisa é que nós temos este logotipo sobre este Obviamente, Eu quero que ele toe re senhor toe a página inicial. Então eu vou ir e clicar em um link são então eu vou clicar em páginas e eu vou dizer Escolher página e eu vou escolher casa. Então, toda vez que eu clicar sobre isso, você pode ver que ele tipo de recarrega ele atualiza o navegador e levá-lo de volta para a página inicial . Certo? Isto é o que queremos, certo? Então, isso é muito sobre a adição da página da seção como seções, links crédulos. No próximo vídeo, vamos sair, ir em frente e fazer alguns elementos. Animador. Então são vocês no próximo vídeo 38. Como usar símbolos: Certo, pessoal, antes de entrarmos nas interações, eu só quero explicar um novo conceito rapidamente. Só vou levar alguns minutos e isso é sobre a criação de componentes. Agora, por exemplo, digamos que você tem várias páginas em um site e você tem, tipo, 10 páginas diferentes em seu site. E primeiro de tudo, a maneira de adicionar uma página é ir para a página aqui e você pode clicar em Criar nova página e isso vai criar todas as páginas que você tem. Agora vamos dizer que você tem essa barra de navegação e até mesmo, você sabe, o rodapé bem na parte inferior, você sabe, que vai ser a mesma em todo o site. Mas no caso de você decidir fazer uma mudança em particular, o problema é que você terá que ir em frente e fazer essa mudança em todas as outras 10 páginas. E isso é realmente um grande incômodo. E isso é um grande problema. Então, onde Flo tem algo chamado como componentes e nós podemos ir em frente e criar algo como um componente, eu vou entrar assim agora, mas oh, aqui e eu vou ir em frente e clique direito e eu vou dizer criar símbolo agora, simples e componente são praticamente termos que são usados de forma intercambiável. Mas eu só vou dizer criar símbolo e isso vai fazer é ele vai nos dizer para Neymar semelhante. Vamos chamar essa barra Na'vi Gatien, e eu vou em frente e clicar em Criar símbolo. Então agora você pode ver que estamos dentro do componente mais onde podemos ir em frente e fazer as alterações que quisermos. Então eu vou ir em frente e clicar em Concluído, e isso vai criar isso no tipo de barra de cor verde, que significa que é um símbolo e eu vou fazer a mesma coisa aqui em baixo também. Eu vou em frente e selecionar o pé para cima e eu vou ir em frente e clique direito, e ele vai dizer, criar símbolo e nós vamos chamar este pé para cima e você sabe que nós temos um símbolo. Agora, todos os seus símbolos podem ser acessados no, você sabe , no painel de anúncios , onde temos elementos, temos layouts, e então temos símbolos. É aí que todos os seus símbolos saem. E também mostra o número de instâncias que um símbolo específico foi usado, então isso é muito bom. Indo honestamente, não posso fazer isso agora. Isto também não é uma espécie de caixa verde. Então, da próxima vez que você criar uma nova página, toda a sua foto é apenas arrastar e soltar este símbolo que você tem na página e você sabe que está pronto para ir. Então, isso é muito sobre símbolos, e vejo vocês no próximo vídeo. 39. Criando uma animação de carga de página: Tudo bem, pessoal. Então, neste ser capaz de ir em frente e animar a seção de heróis em algumas animações divertidas muito legal . Então vamos começar. E a coisa é, é super simples de fazer. Tudo o que têm que fazer é entender a lógica de como as interações funcionam. Vou começar por me certificar de que isto é 14 40 pixels, porque eu gostaria de mantê-lo em 14. 40 correções. E o que vamos fazer agora é começar decidindo como a animação quer acontecer. A primeira coisa é esta barra de navegação que temos eu quero ir em frente e falhou isso de 0% capacidade para 100% capacidade. E a propósito, estamos fazendo isso quando o Senhor da Página. Então, o que vai acontecer quando os Page Lords, quando os Page Lords, eu quero que a barra de navegação desapareça de 0% de capacidade para 100% de capacidade. Eu quero que esta caixa de imagem herói para mover do lado esquerdo da tela para o lado direito da tela e eu quero este texto que diz que eu sou Robin Williams e nós temos os gráficos espanhóis para mover dentro do lado direito da tela para o lado esquerdo de isto. Então é assim que queremos ir em frente e estruturar nossa animação. Então vamos começar agora. Poderíamos estar lidando muito com o topo da interação, e espero que vocês entendam o justo e a lógica de como tudo funciona. Primeiro de tudo, temos que seletor gatilho saber o que é um artigo gatilho é basicamente uma ação que aciona a animação principal, certo. E neste caso, queremos carregar a página do Toby. Então, quando os senhores da página estavam indo para desencadear algum tipo fora de uma animação que temos que com a gente quando pago, começa a carregar. E quando a página terminar de aprender, agora vamos escolher a página do evento termina de carregar. Eu vou em frente, selecionar a ação e dizer, Iniciar uma animação, Ok. E agora já excedemos a animação existente que temos. Eu vou ir em frente e clicar no ícone de mais, que está indo toe criar uma nova animação. Vou chamar essa idade, Lord Animation. Tudo bem. E aqui o que vou fazer é começar a definir os elementos. 1º 1 vai escolher o elemento neste caso. Queremos pegar a navegação, mas e clique no plus. Mas a coisa infeliz é que não podemos adicionar animações aos símbolos no momento. Então o que você teria que fazer é clicar duas vezes para entrar nisso e então clicar no ícone de mais e então eu vou escolher a capacidade para o NAFTA, ok? E nós podemos apenas ir em frente e clicar no símbolo mestre de edição feito para que possamos voltar. Então vamos voltar para nossa página, nossa animação. Então, temos a nossa capacidade agora sobre as outras interações. O que fizemos foi criar um estado, que é o instante em que estamos neste caso. Precisamos criar dois estados. Um é o estado inicial e o outro é o próximo oito. Por que temos que fazer isso? A razão é porque neste caso, desde que o meu primeiro estado inicial vai ser 0% de opacidade, este valete estão na tela já é 100%. Então eu tenho toe substituir esta propriedade vendo fluxo de web. Ouve, quando baixei o site, quero que isto seja 0% de opacidade quando começar. Certo? Então o que eu vou fazer é selecionar essa nova capacidade, e eu estou olhando para o interruptor que diz definir como estado inicial. Então, mesmo que no designer isso seja 100% de opacidade quando as armas da página vão assumir que isso era 0% de capacidade o tempo todo, certo? Severamente. Vá em frente e defina essa capacidade para ser zero. Agora, você não pode ver a alteração porque a alteração não afeta símbolos, mas quando recarregamos a página, você pode vê-la. Certo, então vamos em frente e definir o estado inicial para zero. Agora, vamos continuar e duplicar isto, está bem? E aqui, vamos em frente e disse que a capacidade para 100% porque queríamos passar de 0% para 100% sobre. Podemos ir em frente e mudar a duração para dizer algo como três segundos e também mudar o dedo do pé mais fácil é a nossa quadra, certo? Isto é basicamente o que queremos. Agora, se você seguir em frente e jogar isso, você pode ver que leva três segundos para desaparecer. Certo. Lá vamos nós. Agora. A próxima coisa é, queremos animar a caixa de imagem do aquecedor. Então vamos, infelizmente, ele estragou a caixa. Vamos aqui para as ações. Clique no ícone de adição e queremos escolher Mover. OK, agora, eu poderia ter um link esse movimento junto com isso porque eu quero que esses dois comecem ao mesmo tempo, certo? E a primeira coisa que fazemos é para a mudança. Eu vou adicionar o valor X agora o valor X basicamente a posição esquerda e direita porque ele está no eixo esquerdo. Agora, eu não vou usar um valor de pixel porque a coisa é com valor de pixel, vai parecer estranho em diferentes pontos de quebra. Porque se eu disser, por exemplo, 100 pixels vai ser 100 imagens em para 14 40 picaretas de quebra 400.1920 pixels relatório e os outros grandes pontos, que não é algo que queremos. Então o que eu quero fazer é ir em frente e definir o valor X para negativo 100% certo? Então, quando eu digo posit, ele se afasta 100% de sua posição inicial. Certo? Então ele está se movendo basicamente duas vezes essa inteligência ok, e nós vamos configurá-lo 100% para que ele esteja exatamente fora da porta de exibição da tela. E eu iria em frente e duplicar isso uma vez por duplicata. E vou fundir isto com isto. Certo, porque queríamos que o NAB fosse o e a caixa de imagem começasse ao mesmo tempo. E você meio que também quer e ao mesmo tempo o que todos precisam ser animados ao mesmo tempo. Agora, para a caixa de imagem de herói, o que vai acontecer é que eu vou voltar e definir isso para ser zero pessoa porque nós queremos que ele seja o estado padrão. Ok, então zero pessoa e a duração, eu provavelmente vou definir para 1.5. Ok. E também mudar a flexibilização para facilitar o tribunal. Ok, agora, vamos rapidamente dar uma olhada. Certo. Isso parece muito legal, certo? Parece fantástico. Vamos tocar isso de novo. Fantástico. Parece bom. Agora, a outra coisa que eu quero fazer é ir em frente e também aumentar a capacidade. Eu poderia querer desaparecer e me mover ao mesmo tempo. Então sobre monitor vai começar selecionando o número um clique no ícone de mais e eu vou escolher a capacidade. Vou fundir isto com isto porque queremos que o movimento e a capacidade comecem aomesmo tempo. Vou fundir isto com isto porque queremos que o movimento e a capacidade comecem aomesmo tempo. Vou fundir isto com isto porque queremos que o movimento e a capacidade comecem ao E obviamente não vai ser definido para nós estado inicial, e eu vou ler usar a opacidade abaixo de 0%. Ok? E eu vou continuar e duplicar isso. Isso vai ser muito com isso, e vai ser o estado final, mas eu vou dizer opacidade, você está 100% bem? E também a duração. Desta vez vou voltar a um. Eu não quero que seja 11.5 e a flexibilização vai ser fácil fora do tribunal, como sempre. Então agora vamos jogar isso rapidamente e dar uma olhada. Certo. Então isso parece super. Poderia ele meio que se desvanece e se move. E no mesmo dia agora, vamos fazer a mesma coisa por estes também. Rápido. Quilômetros, vá em frente e disse isso para 14. 40. Agora, vamos em frente e mudar estes também. Então agora tudo já está definido, certo? Mas a única coisa é que precisamos mudar o movimento. Então, em vez de criar o seu trunfo. Vou em frente e selecionar esses dois elementos, que é a caixa de imagem de herói. Vou duplicar isto, e vou fundi-lo com isto, está bem? E a única coisa que temos que fazer é ir em frente e a partir de 100% eu vou fazer isso o 100% positivo e eu vou em frente, certo? Clique e altere Destino para o cabeçalho. Ok. Agora, a coisa é que ele se moveu exatamente 100%, mas nós meio que queríamos mover um pouco mais, que é 110 mais ele. Está um pouco lá fora, está bem? E também, vamos em frente e mudar a opacidade. O alvo construiu certo? Clique em mudança, tigre. Agora, isto está fora dos meus portos de vista. Eu não sou capaz de selecioná-lo, então pode ir para o navegador e clicar no cabeçalho. E isso também vai mudar isso. Ótimo. Perfeito. Agora vou selecionar estes para clicar com o botão direito do mouse duplicado e mesclá-lo com isso. E todas as propriedades são iguais. A única coisa depois de fazer é ir em frente e alterar alvos ou clicar com o botão direito do mouse. Cabeçalho do alvo clique direito, alterar, alvo e pesado. Ok, então agora, vamos em frente e acreditar nisso, certo? Então é isso que temos, certo? Parece bem legal agora. Queremos também que este seja também um animador. Então, a única coisa que perdemos eu vou ir em frente e selecionar estes para tentar clique Duplicar combinado. Isso e as propriedades são novamente as mesmas. A única coisa é, o é mudar o elemento alguém clique com o botão direito, alterar o alvo e alterá-lo para o parágrafo 18. Clique com o botão direito do mouse em Agora o parágrafo 18 se foi porque está fora da tela. Então eu vou seguir em frente e clicar aqui, certo? É a mesma coisa aqui. Dirigindo. Vamos clicar com o botão direito Duplicar. Traga isso e clique com o botão direito do mouse Alterar destino. Ponto 18. Clique com o botão direito do mouse Alterar parágrafo 80. Agora vamos jogar isso. Agora está atrasando um pouco porque isso é por causa do afundamento e da Internet Mas se você publicar isso e vê-lo aqui, você pode ver a diferença, e nós faremos isso. Agora. Uma coisa que eu quero mudar, você sabe, para torná-lo um pouco mais divertido é que todos eles estão animando ao mesmo tempo , certo? Mas vamos ter um pouco de atraso. Então o que eu quero fazer é lutar contra este rumo. Tudo bem? Agora nós Ele diz que ele começa com a ação anterior, que é esta. Mas mesmo que comece com a ação anterior, queremos um pouco de atraso. Vou dar um atraso de 0,2. Ok. E para o parágrafo. Tudo bem, vou dar um atraso de 0,4. Certo. Então começa com aqui. Então daqui até aqui, há um atraso de 0,4. E então essas animações acontecem. E para o título, começamos zero e há um atraso de 20,2 segundos. E então a animação aconteceu. Então, agora, se você jogar isso, você vê que os elementos vêm em um após o outro, e isso é muito legal. Então podemos ir em frente e publicar isso para o nosso presságio selecionado e vamos para o site e controle de imprensa são ou arte de comando de recarga. E vamos dar uma olhada em como isso parece certo. Isto parece super suave. E Sivarasa, vamos em frente e recarregar isso de novo. E parece fenomenal, certo? Isto parece muito, muito bom. Agora, uma coisa que eu quero mencionar é que neste caso, todos os elementos que nós animadores só estavam sendo animados quando o Page Lord Neste momento estes são os únicos elementos estão ficando animados. Agora, elementos como o cabeçalho 76 pixel e o parágrafo 18 pixel estão sendo usados em vários lugares fora do site. Então não queremos que eles também sejam eficazes. Então nós queremos fazer vai selecionar tudo isso e ter certeza de que o seu efeito é o elemento selecionado . Porque se formos em frente e, por exemplo , mudanças na classe, isso afetará todos os elementos que estavam lá na página que têm a mesma classe. Mas não é isso que queremos. Queremos animar apenas esses elementos selecionados. Então eu vou em frente e escolher o elemento selecionado. Certifique-se de que é isso, tudo bem, e isso é praticamente tudo. E no próximo vídeo, vamos em frente. E se você voltar para o designer disse, tudo se torna normal e o que vamos fazer é no próximo vídeo, vamos em frente e animar esta seção. Então, quando eu percorri através desta seção. Nós temos esses, você sabe, esses que tipo de animação. Então são vocês no próximo vídeo. 40. Animação da seção de experiência: Certo, pessoal. Tudo bem, pessoal. Então, neste vídeo, vamos em frente e animar esta seção do site. Então, obviamente, vou começar com um gatilho. Qual é o gatilho para nós? Temos um gatilho que se eu vir aqui para o elemento gatilho, hum, eu tenho uma opção que diz rolar para a vista. Então, para explicar isso. Então, quando eu rolar e essa seção de experiência aparecer, eu quero que você vá em frente animar algo, certo? Esse é o gatilho. Então, quando a seção Experiência rola entrevista, você deseja animar elementos, então vamos em frente e escolher rolado para exibição. Agora, temos duas opções quando a entrevista de rolagem e uma foi ferrado fora de você, certo, então estamos através do 1º 1 que é quando rolado para a vista. Então vamos clicar em iniciar uma animação, e temos toda a nossa animação. Lister criará uma nova animação, e chamaremos isso de rolagem de seção de conveniência. Ok, então nós vamos fazer é você quer animar essas três caixas, que é este bloco de experiência. Queremos que eles animem, sabe, da esquerda para a direita. Semelhante à maneira que fizemos isso, mas vai parecer. Vai parecer muito divertido. Então o que eu vou fazer é ir em frente e começar uma animação. Então vamos começar com o 1º 1 é o movimento, obviamente. E vamos começar por definir isto para o estado inicial porque este não é o estado inicial , certo? Este é o estado final. Então eu vou selecionar o 1º 1 e dizer nações de sábado aqui. E para isso, o que vou fazer é usar valores de pixel para isso, certo? Porque para mim, não quero que isto saia da tela. Totalmente. Porque eu quero que isso para animar com base em um pouco de valor de pixel, não algo que deve ser dependente da tela com. Mas antes de fazermos isso, vamos em frente e dizer isso a 14. 40 e a única coisa é, obviamente, vamos mover isto para a saída. Vamos adicionar valor negativo. Ok, agora, o que você vê aqui? É que todos os elementos estão se movendo e a razão é porque aqui estavam realizando a classe agora, devemos usar isso? Não deveria ser. Vamos ver sobre isso. Mas por enquanto, eu vou ir em frente e disse isso para selecionar elemento. E eu vou ir em frente e resolver, mover isso para o lado. Então diga algo como 70 pixels negativos. Tudo bem? Ok. E o que nós vamos fazer é talvez você poderia ir em frente e dizer que talvez talvez fazer este negativo 100 escolhas é totalmente bom. Vamos continuar e duplicar isso. E esta vai ser a nossa interestadual onde vamos definir a duração disto para ser um segundo. E vai ser fácil para fora quart, como de costume. E o valor será zero, certo, porque voltamos à atenção State. Isto parece bem. Agora vamos em frente e capacidade animada também. Então vamos em frente e adicionar a opacidade. Vou adicionar a opacidade com a inicial. Eu vou definir isso como o estado inicial e eles deixam a capacidade para zero e, em seguida, clique direito direito QI mudou uma duplicata, e nós vamos combinar este com o segundo set ligado. Haverá 100% e a duração vai ser de um segundo e a predefinição vai ser comer fora do tribunal. Certo. Então agora vamos dar uma olhada rapidamente. Então eu vou voltar ao início e teremos essa animação ligada. Vamos em frente e rolar. Certo. Então, quando eu rolar, não vemos nada. Certo? Porque o que está acontecendo é me deixar mostrar se eu tocar isso de novo e se eu rolar um pouco mais rápido, você pode ver que as animações resultaram, certo? Onde? A coisa é que a seção é assim que aqui começa bem aqui. Como um pouco de pergaminho. Começa, certo, e a animação já começou. Mas nós não vemos isso, porque no momento é rolar para baixo a animação acabou. Então, como nos certificamos de que podemos ver a animação? Então o que vamos fazer é ir em frente na parada, voltar a fazer. E aqui temos algo que Torres compensou. Certo? Então eu vou ir em frente e disse o deslocamento para algo como 50%. Então o que significa é, mesmo que essa seção tenha sido visível, que rolou para a porta de exibição, eu quero que a animação comece depois que eu rolou 50% depois que o elemento é cruel. na vista, per Então o que eu quero dizer é que agora, se formos em frente, e se nos movermos lentamente para baixo agora, você pode ver a animação realmente acontece. Porque depois de rolar 50% fomos capazes de vê-lo. Agora podemos ir em frente e aumentar isso um pouco. Poderíamos ir em frente e fazer isso 75%. Tudo bem, e vamos ver como isso parece. Tudo bem, então nós temos isso e eu vou estragar tudo. E você vai, Dave. Oh, nós podemos ver isso, certo? Se você quer torná-lo ainda mais melhor, vamos em frente e fazer isso para 85%. Tudo bem, vamos em frente e dar uma olhada agora. Lá vai você. Agora, talvez se eu tanto eu provavelmente vou dizer isso para 75%. É um número que eu gosto. Ótimo. Agora, a outra coisa é que queremos que estes também sejam animados. Então, o que ele poderia fazer, Podemos selecionar o primeiro para e podemos selecionar o 1º 1 em enfraquecer dizer classe efeito. E isso deve funcionar. Certo? Então vamos em frente e dar uma olhada agora. Mas o problema aqui é que eu quero que eles tenham seu próprio atraso. Certo. Quero que isto comece um pouco depois do outro. Como se eu quisesse que isso acontecesse. E depois quero que a gente vá. E então eu quis vir. Isso faz com que seja um pouco mais divertido. Então o que vamos fazer é usar aula, certo? Porque todos eles serão ativados ao mesmo tempo. Então eu vou ir em frente e dizer, elemento selecionado, e eu vou ir e duplicar estes para dizer mudança de alvo. Ok, eu vou combinar estes dois e aqui eu vou dizer mudar de alvo, e eu vou escolher este conjunto, que é o bloco de experiência número dois. Certo. E temos que escolher o errado. Então eu vou escrever, como, como, mudar de alvo no DA escolher bloco Experiência. Agora, de novo, não queremos que isto afecte a turma. Queremos afetar apenas esse elemento selecionado. Ok, legal. Vamos duplicar isto de novo, está bem? E estes dois vão ser para o 3º 1, que é o bloqueio da experiência dele, certo? E de novo, não queremos que seja classe. Queremos que ele seja elemento selecionado agora. Então, basicamente, definimos o estado inicial para tudo isso. Agora precisamos definir o estado final para tudo isso. Alguém selecione duplicado. Combine isso e vá em frente e duplique e combinou isso. Ok, então eu vou selecioná-los para clicar com o botão direito do mouse alterar destino e escolher este bloco de experiência, selecioná-los para clicar com o botão direito alterar destinos e selecionar este bloco de experiência. Agora, todos estes nós não queremos que eles sejam classe. Vou em frente e dizer elemento selecionado. Este também vai ser um elemento sexual. OK, agora, vamos em frente e jogar isso. Você pode ver que todas elas acontecem ao mesmo tempo. Então o que temos que fazer é criar um atraso menor. Então, quando eu selecionar essa opacidade móvel e eu vou dizer Delay zero ponto fazer e o terceiro conjunto, que são esses dois, certo? Eu vou definir isso para ser visto como um ponto para Ok, então agora, se você tocar isso, esta é a animação que nós temos. Outros olhares super poderiam. Agora, vamos em frente e publicar isso em nosso site e vamos vê-lo vida. Ok, então vamos para o nosso portfólio. Claro que sim. E isso é recarregar a praia. Certo? Isto parece fantástico. Vou rolar devagar. Tudo bem, nós temos isso. E agora isso vai começar. Noite. Isto parece incrível. Agora, vamos voltar para cima, está bem? E só voltar para baixo. A animação já aconteceu, certo? Aconteceu tudo. Mas digamos que você queira redefini-lo para que cada vez que você rolar, você sabe, a animação substitua. Como fazemos isso? Certo. Então é com nós temos essa coisa, esta outra opção com um clique em feito, você pode vê-lo diz quando rolar fora de você. O que acontece quando eu sair de você? Certo, podemos redefinir toda essa animação, então vou começar iniciando uma animação, certo? E agora já temos esse 1º, certo? Na verdade, vou duplicar isto, está bem? Então não temos que limpar tudo de novo. Certifique-se de que você selecionou o 2º 1 Porque para o 1º 1 nós selecionamos o top e para este vendendo o 2º 1 E aqui, vamos em frente e dizer rolagem para fora. Ok? agora nós já temos um monte desses. Agora vamos fazer é tipo de redefinir tudo agora, uma vez que todos estes são os que não podemos garantir toe reset. Como porque todos esses são 0% de capacidade e, você sabe, movendo 100 correções para a esquerda. Poderíamos querer trazê-lo de volta à disposição. Então o que fazer? Vou em frente e selecionar todos esses deletar repressivo. Agora somos sempre um estado inicial. Vou remover estes do estado inicial. Ok? E para este, duração do centro está fora. Zero. Porque eu queria tornar-se imediatamente 0% de opacidade e mover 100 pixels para a esquerda assim que eu rolar para fora de você. Ok, então o que eu quero dizer com isso? Vamos publicar isso e então podemos entender. Então você realmente portfólio curso. Vamos recarregar o discurso. Ok, então agora isso aconteceu, certo? Então, quando você voltar aqui e nós tivermos essa animação, certo, é perfeito. É fantástico. Agora, em um pergaminho fora de você. Então agora é um pergaminho fora de você. que significa que agora todos os elementos deveriam ter sido 0% de capacidade e deveriam ter sido 100 pixels com esquerda eles são? Vamos verificar. Porque quando eu rolar de volta para a vista novamente, eles são visíveis. Certo? Então você rolar para fora um novo pergaminho em que tudo que você rolar para fora o reset, voltar, eles rolar para a direita. Vamos voltar novamente. Quem está aqui? Certo. É disso que estamos falando, certo? Então vamos voltar e você pode ver isso. Isso parece fantástico. Certo? Então isso é praticamente como você tipo de redefinir a animação. Então, passando para as próximas seções fora do curso, estamos bem. Nós não queremos adicionar nenhuma interação porque nós já temos essa bela interação que está lá. Poderíamos adicionar uma interação semelhante à seção do conjunto de habilidades também. Ok, mas para a escola disse, eu vou adicionar um tipo diferente fora animação. Então, no próximo vídeo, vamos em frente e animar isso. Então são vocês no próximo vídeo 41. Animação da seção de habilidades: Ok, então neste vídeo, vamos em frente e simplesmente adicionar uma interação muito simples a isso Não muito chique. Então, vamos começar. Então vamos voltar ao nosso Oh, aqui está um pouco de volta para onde estávamos inicialmente e chegamos aqui. Agora o que eu quero fazer é quando eu pairar sobre este elemento, certo? Quero acionar uma animação em escala simples para o ícone que temos aqui, certo? Então eu vou em frente e começar selecionando o candidato. Rapper. Então outra coisa é que este rápido normal tem sido usado em todo o site, e nós não queremos resolver, você sabe, quaisquer outros elementos. Então, só para estar seguro do que vou fazer é que estou honrado, na verdade, na verdade, basta ir em frente e duplicar a aula, e é de cor normal, mas eu vou chamar esse rapper escasso, ok, Só para estar no cofre, um tamanho dois que nos certificamos de que não fazemos as alterações necessárias nas animações qualquer outro componente. Certo? Então vamos ter que selecionar essa lacuna de habilidades, e eu vou entrar aqui na etapa de interação e agora vamos precisar de uma interação simples . Então, se você chamar o ícone de mais e escolher e mouse Olá, Então eu vou clicar em selecionar Ação em Indo para Iniciar uma nova animação E estas são todas as animações existentes Não clique, crie um novo E nós chamamos essa escala de ícone desculpa em OK e clique em Plus e estamos apenas clique na propriedade habilidade E, obviamente, não queremos acionar a escala Rapper queremos clicar com o botão direito, Alterar alvo e você é efeito o ícone de habilidade. Ok, e agora o que você quer fazer é ter certeza de que você afeta a classe, ok? E qual é o ícone de habilidade da classe, certo? E você também quer afetar apenas Crianças com esta classe. Então, basicamente, se este ícone matar é uma criança fora de qualquer elemento pai, então vá em frente e afete isso agora mesmo. Aqui nós não queremos ir em frente e adicionar um estado inicial porque o estado inicial no estado original fora da animação vai ser o mesmo. Então eu vou seguir em frente e apenas clicar sobre isso e eu vou digitar um. Então você sabe, um é o estado normal, e eu vou mudar isso de 1 para 0.2. Ok, talvez até 0,1. Vamos em frente e dizer 0.2. Ok, então isso assusta um pouco grande, e eu vou clicar na direita. Isso é praticamente tudo. OK? E eu não sei por que você não pegou o nome de alguém. Está bem. Lá vai você. E para pairar, o que eu quero fazer é ir em frente e escolher começar uma animação, e vamos continuar e duplicar isso porque não queremos repetir o mesmo passo novamente. Certifique-se de selecionar o 2º 1 Em seguida, vá em frente e defina isso para dimensionar horizontalmente. Está bem? E ele tinha a habilidade que posso. Vou voltar e usar isso de volta para quê? Está bem. Agora, uma vez que eu me esqueci vai mudar a duração. Então eu vou definir isso para 0,4 e disse isso para aliviar o quarto. Vamos voltar e fazer a mesma coisa para a escala também. Então, como isso disse a duração para zero ponto cheio. E também a flexibilização vai ser fácil ou tribunal. OK, então agora vamos em frente e dar uma olhada. Tudo bem? Então, quando você tem um, nós temos uma simples e divertida interação Howard, certo? Como um louco funciona. Agora, eu acho que a flexibilização precisa de um pouco mais de conserto. Alguém disse que a duração até o ponto zero faz. Oh, isso tem que ser aliviado. Tribunal. Lá vamos nós. Esse é o problema. Então, isto para o relatório de novo está fora do tribunal Onda para escala out. Queremos ter certeza de que é mais fácil tribunal. Tudo bem, então vamos dar uma olhada. Sim, olha, parece ótimo. Ok, agora, a coisa é, não está afetando nenhum desses, certo? Porque nós temos. Então, se você realmente olhar para ele, a animação Ok, esta animação pairar está sendo um fator. Só pegue esse elemento em particular se você mudar essa aula, que significa que vai afetar todos os elementos e vamos escolher habilidades Rapper, certo? Essa é a classe base, certo? Nem aquele com uma classe de combo. Bem, isso vai afetar apenas os que têm a classe combo, mas nós não queremos que isso aconteça. Queríamos fazer habilidades. O rapper, certo? Essa é a classe base. Então, se eu ir em frente e pairar sobre qualquer um dos outros elementos ainda nada acontece. Isso é porque esta tem uma classe completamente diferente. Isso ainda é chamado de rappers normais. Então eu vou me livrar disso e eu vou ir em frente e dizer Skills, Trapper. E também queremos adicionar os 48 pixels. Certo? A despedida. Isso é assim. Vamos em frente e chamar isso de habilidades rápido e, em seguida, ir em frente e dizer 48 pixels, margem direita e também selecionar este e chamar este rapper habilidades em Vá em frente e sobre os 40 pixels. Certo rebatendo agora. Vamos dar uma olhada nos escritórios. Sim, agora funciona em tudo o resto. É uma interação muito simples, legal e divertida. Não há nada de bom para vestir. Só faz com que seja mais animado e divertido de continuar. Então, sim, então isso é praticamente tudo para este vídeo. E no próximo vídeo, vamos em frente. E já fizemos isso, o que é bom. Ah, nós já animamos esses também. Certo, mas o que eu vou fazer é que eu meio que quero quando eu cobrir aqui quando eu rolar para cá , eu meio que quero adicionar uma simples animação de desvanecimento a cada um desses. Então vamos fazer isso no próximo ano. Então são vocês no próximo vídeo. 42. Animação de projetos: Certo pessoal, então poderíamos criar uma interação legal para isso. Onde o que acontece é quando cada um desses cartões são visíveis na porta de visualização ou quando eles são entrevista escolar, vamos tipo de escalá-los de pequeno para grande. Agora, nós só fizemos uma interação semelhante aqui, certo? - Onde? Quando esta seção percorrer a entrevista, vamos animar isto e isto e isto, certo? Mas e se houver uma maneira melhor é uma maneira mais fácil de fazer isso? Porque toda vez que eu vou em frente e eu escolho um elemento, eu não quero que ele seja baseado na seção. E se há um elemento que está apenas lá e quando rola entrevista, eu quero animador, eu posso realmente definir isso sem sequer adicionar o gatilho. Faça a seção certa. Então, o que? Quero dizer, vamos em frente e descobrir isso. Vamos em frente e disse isso para 14. 40. Tudo bem? Só para entender e o que eu vou fazer, ele deve selecionar projeto Thebe embrulhado. Ok, então para o Project Rapper, que é todo este bloco, eu vou em frente e criar uma interação e isso vai ser uma entrevista de rolagem então quando a entrevista do Project Rapper Scrolls, então para o Project Rapper, que é todo este bloco, eu vou em frente e criar uma interação e isso vai ser uma entrevista de rolagem então quando a entrevista do Project Rapper Scrolls, vai criar uma animação. Vou em frente e dizer: “ Comece uma animação. Ótimo.” Agora em todos os lugares e criar uma nova animação. E vou chamar isso de pele na Global. Ok, agora eu vou fazer é um must selecionar a propriedade scale, ok? E queremos que a escala fora disso tenha um estado inicial. Ok? E eu vou dizer algo como 0,7. Ok, talvez vamos em frente e fazer um 0,85 Ok, algo assim. Ok, vamos em frente e duplicar isso, e eu vou ir em frente e ajustar isso de volta para um. Agora, isso vai ser qualquer pau de bosta e isso vai ser que nós fazemos este pequeno 0,5 e nós dizemos que ele está fora do tribunal. Ok? Agora, também queremos animar a opacidade porque vai parecer estranho se for muito pequeno quando começar. Então eu vou selecionar isso. Eu vou em frente e eu vou dizer capacidade. Está bem. Vamos em frente e aplicamos esta porta aqui. Agora, isso obviamente vai ser um problema, então eu vou voltar para zero. Vou continuar e duplicar isto e vou trazer a opacidade. E, uh, a escala vai ser em um 1. A opacidade vai ser 100% e a predefinição vai ser. Ele está fora de quart e 0,5. OK, então agora vamos dar uma olhada e meio que entender. Se você ver aqui que cada um desses elementos está afetando o gatilho de interação neste momento , é um projeto rápido. Mas o que você quer dizer com gatilho de interação? O que significa que se eu adicionar essa escala e propriedade global ao próprio elemento, e eu estou animando o elemento, eu não tenho que limpar várias cópias. Eu só tenho que fazer isso uma vez, apenas uma vez, e isso vai afetar qualquer elemento. Eu adiciono este dedo interação porque o que aconteceu antes foi aqui O gatilho foi a seção direita, mas o elementar, se infectar ou outra coisa, mas aqui, o gatilho eo elemento que está sendo infectado são exatamente as mesmas coisas. Então vamos dar uma olhada rapidamente e ver como isso funciona. Tudo bem, então quando eu escalar a entrevista, você pode ver que esse tipo de habilidades é certo, mas não funciona aqui porque nós não nos aplicamos a isso. Então o que podemos fazer é tudo o que tenho que fazer é agora, já que isto é tudo da mesma classe, certo? Porque todos estes são o Project Rapper. Ok, eu vou. E na entrevista de pergaminho, vou dizer aula de efeito. Ok, então agora cada elemento, ok, que tem essa classe, certo? E podemos dizer Project rapper, porque essa é a classe base vai se tornar eficaz com essa escala e animação global . Certo, então todo esse elemento vai assustar, certo? Porque isso em si é o gatilho sobre isso em si é o elemento que está sendo afetado. Tudo bem, agora vamos em frente e dar uma olhada nisso. Então agora você pode ver que este assustado e este garoto agora eu vou transar um pouco mais. Você pode ver isso também assustado. E isso também assustou que começou. Agora, mesmo se você olhar para aqui que definimos o Projeto Rapper, eu posso realmente selecionar até mesmo este elemento. Tudo bem, o rapper de habilidades. E eu posso adicionar Vamos em frente e selecionar isso novamente. Rapper de habilidades. Eu posso selecionar rolado para a exibição, ok? E quando eu disser entrevista de pergaminho, começar uma animação. Eu posso escolher isso. O mesmo, certo? E agora, quando eu entrar nela, você pode ver que a classe mudou. Ele mudou automaticamente porque estou afetando o gatilho de interação. Certo, então isso muda automaticamente. Esta é uma maneira muito legal de duplicar animações em todo o seu site. Então, agora, se eu der uma olhada, tudo bem. E a outra coisa é que eu também quero afetar a classe. Ok, então vamos rolar para baixo, e você pode ver que este tipo de animação direita, Vamos dar uma olhada novamente. Eu vou voltar para cima e eu vou pré-visualizar novamente, e você pode ver que está meio escalando. Mas queríamos afetar todos os outros como mas certo. Assim como nós. Faça isso bem simples. Temos o Howard Mouse. No entanto, desculpe. Não é a maior parte do que queremos para a entrevista da escola. E eu nem sou uma compensação liberal. Tudo bem, eu vou com uma compensação fora, digamos 20% certo? E eu posso ir e dizer aula de efeito. Então agora e eu posso escolher uma classe para ser rapper habilidades agora cada um desses elementos vai se animar . Isto em si é um gatilho, e esta é a animação que vai ser afetada. Então vá em frente e visualize isso direito. Você pode ver que isso é afetado agora. Mesmo quando estávamos montando a animação, nós adicionamos essa classe, certo? Mas agora ainda está afetando essa classe porque o gatilho de interação é o mesmo que o elemento que está sendo animado, certo? Certo. Agora, o que acontece se sairmos de você, certo? Queremos ter uma animação para isso também. Então vamos em frente e fazer isso. Então, quando nós rolamos para fora, se você vai dizer, começar uma animação e aqui, eu vou duplicar isso Ok on, eu vou dizer escala, e eu estou vendendo o 2º 1 e eu vou dizer escala global e ele vai ser expandido globalmente, certo? Está bem. E agora nós queríamos padrão para seu estado original, que vai ser este, que é 0.85 e zero. Ok, então eu vou em frente e deletar esses dois. E para esses dois, eu vou remover o estado inicial, e eu vou ir em frente e definir a duração para zero. Porque assim que estes pergaminhos saírem de ti, quero os dedos dos pés. Quero os dedos do pé imediatamente. Vá em frente e volte a ser 85% e volte a ser 0% de opacidade. Certo. Então vamos dar uma olhada. Ok, então aqui vamos nós. OK, Isto anima neste anima em Fantástico. Tudo bem. Quer dizer, eu escalo fora de você. Nada acontece. Não tenho certeza de qual elemento. Eu adicionei para fazê-lo Waas para este elemento, certo? Então vamos em frente e aqui eu vou dizer aula, o que é bom. Eu vou descer aqui também e selecionar o projeto Rapid. E aqui está o pergaminho para fora de você. Eu vou dizer começar uma animação e vamos escolher a escala fora do global. E agora deve funcionar perfeitamente. Certo. Então agora esse trabalho, quando eu voltar e voltar na animação novamente, eu volto e volto e nunca mais me encontro. A mesma coisa com isto. Então, agora, perguntando-nos estes vindo para a porta de visão eles escalam em Tudo bem. E se eu voltar, haverá mortes de novo. Certo. Então eu vou lá fora, reiniciei, e eles voltam agora mesmo. Uma coisa que eu quero fazer aqui é que para isso eu quero contra set 20 como o deslocamento e novamente para aqui. Eu provavelmente quero definir 10 como o oficial para escala out. Também para escala horizontal. Eu queria ser zero, certo, porque eu queria acionar instantaneamente para isso. Podemos vendê-lo por 20. Então vamos rapidamente dar uma olhada novamente. Tudo bem, aqui vamos nós. Fantástico. Vamos voltar para cima. Sim. Aqui vamos nós. Direto sobre isso. Mas neste achado ainda? Tudo bem. Então, isso está muito bem feito. Em seguida, temos isso também, que foi praticamente feito. Temos isso de novo, o que também está muito bem feito. Não quero adicionar animações a isso. Você sabe o que? Poderíamos fazer isso. Vamos selecionar a imagem do testemunho, está bem? Quero dizer, o bloqueio do depoimento e vamos em frente e adicionar o gatilho da entrevista de pergaminho. E nós vamos selecionar a escala em global, e vamos definir para isso para ser 20 e eu vou descer. Talvez eu vá definir este 1 para 10 na verdade. Está bem. E a rolagem para fora para você em um seleto, selecione animação e escolha escala horizontal global. E não afetaremos a turma também. Para que todos os outros elementos com o testemunho do cara da turma no bloco tenham um fator. Então vamos ver como isso parece. Certo. Então, eu vou rolar, e você poderia vê-lo meio visível bem na direita. Este também vem à vista. Porto e seu caso. Certo. Fantástico. Agora queremos o dedo do pé. Certifique-se de que ele funciona corretamente. Não sei por que isso não está sendo afetado. Precisamos da razão pela qual não está funcionando porque precisamos escolher a classe base. E agora vai funcionar porque isso não tem a combinação Plus Então vamos rapidamente dar uma olhada novamente. Então nós vamos rolar vai rolar, e isso é visível. Isto era visível. E isso também se torna visível agora para a fotografia novamente. Acho que não quero mudar nada. Parece muito bem. Isso também parece ótimo. E isso também parece ótimo. Agora que fizemos os que estão lá vai criar um pouco mais interações e animações, e vamos adicionar mais elementos para torná-lo muito melhor. Vejo vocês no próximo vídeo. 43. Criando uma animação de barra de progresso: Tudo bem, pessoal. Então, desta forma, você vai em frente e criar são muito legal e divertido progresso. Mas o que basicamente acontece é como os pergaminhos pagos que você pode ver uma parte de progresso na parte superior da tela que se move da esquerda para a direita. Certo. Então vamos em frente e construir. Então vamos dar a barra de progresso primeiro e o progresso, mas é um bloco surdo muito simples, certo? É isso. Não há nada. Morteiros querem ir em frente e selecionar o você sabe, o corpo. Tudo bem, vou derrubar tudo e criar um novo bloco div, certo? E eu só vou mover este impasse direto para o topo porque eu queria estar em cima de tudo, na verdade, realmente não importa. Muito tous off americano apenas por baixo da barra de navegação, porque vamos movê-lo na base ZIS. Então primeiro eu vou em frente e ligar para essa barra de progresso, e eu vou dar um com 100% de desconto. Então ele tira um 100% do valor fora da tela e eles estavam dando uma altura fora cinco picaretas é apenas um valor de pixel muito pequeno e eu vou ir em frente e adicionar uma cor. E neste caso, vou adicionar esta cor da CNN. Se é um $2 talvez você poderia ir para o cinza claro ou o médico. O que quer que pense, Werksman, é isso. Uma barra de progresso está feita. Agora, o que vou fazer é ir e escolher a posição. E temos cinco propriedades. Nós olhamos para o Sticky. Vamos dar uma olhada em posições fixas fixas e elemento relativo à janela do navegador. Então ele permanece no lugar como as páginas ferrou algum bom à frente e só dizer fixo. Ok, então eu ia fazer isso é que ele vai remover isso do para a superfície e vai colocar em um plano três D. Tudo bem, o que significa que está em cima dos outros elementos. Mas antes de fazermos isso, precisamos definir onde ele vai ser colocado. Agora, fluxo de ar nos dá oito predefinições. Vou escolher o que diz em cima. Então agora isso vai para cima do campo direito, como uma boa ação diz, a posição é fixa em relação ao corpo. Está bem. E o que significa esse endereço, Cruel. Você pode ver que o seu progresso. Mas isso é no topo para torná-lo muito mais visível? O que eu vou fazer é ir em frente e mudar a cor Teoh esta cor pública para que possamos ver melhor. Você também pode adicionar ingrediente se quiser, mas neste caso, eu vou fazer uma cor sólida, ok? E sim, isso parece muito bom. Agora, o que você tem que fazer é adicionar um gatilho. Tudo bem? Temos que ser inimigos. Então vamos para a equipe de interação. E depois vou dizer “Page Gatilho”, está bem? E eu vou escolher o que diz enquanto a página está rolando. Então, enquanto esta página rolando, eu quero que a barra de progresso para animar. OK, então quando eu clicar em páginas selvagens rolando agora vamos escolher uma ação em Foram seguramente rolar animação em. Nós não temos nenhuma animação de rolagem. Então vá em frente e escolha um, e eu vou dizer habilidade. Ok, então obviamente nós, como você pode ver, nós temos 0% de desconto na página e então nós temos 100% de desconto na página. Você pode ir em frente, ir em frente e adicionar qualquer fora deles no meio, se você realmente quiser. Mas o que eu vou fazer é ir em frente e escolher zero e 100 porque isso é praticamente o que precisamos agora para o progresso. Mas 0%. Como é que vai ser assim? Como você pode ver Oh, aqui temos o X e y e Z no X e y são muitas vezes pode ligado, certo, Porque temos este link, o primeiro desligado reutilizável. Está bem. E depois vou para o valor X, está bem? E eu vou definir isso para zero e para o progresso. Mas eu vou verificar novamente, e eu vou definir o valor X para quê? Ok, então agora vamos ver como isso parece. Então, quando eu começar, não há nada lá. E como uma escola você pode ver que temos esse progresso, mas, você sabe, isso é meio que isso. Mas a coisa é, você pode ver que a promessa, mas está meio que se escondendo, certo? É meio que está sendo escondido pelos elementos ou que, como você pode ver, está por trás dessa foto. Então esse é um problema que temos que resolver. A segunda coisa é que está escalando a partir do centro. Mas como você faz uma escala da esquerda para a direita. Certo. Como é que fazemos isso? OK, então como você pode ver, aqui vai atrás de todos esses elementos. Ok, então como você conserta isso? Então vamos em frente e corrigir o valor Z primeiro. A primeira coisa que você quer fazer é aqui nas propriedades. Temos essa opção chamada Valor Z. Neste momento, está definido Índice. O que queremos fazer é realmente dar-lhe um número muito alto. Por isso, está em cima de todos os elementos. Então, digamos que dissemos isso até 100. Neste momento, 100 é um número de valor Z, que é bastante alto, e está acima de todos os outros elementos. Aquela vara. Olhe. Tudo bem, então ele começou isso, e agora você pode ver que está sobrepondo a imagem porque está no topo, tudo bem. E está sobrepondo todos os outros elementos porque é bastante alto no valor Z noite . Então lá vamos nós. Está parecendo perfeito. Agora. Queríamos escalar a partir da esquerda, certo? Não queremos que ele escale a partir do centro. Então, como é que fazemos isso? Nós vamos, podemos descer aqui, fazer as opções, Corliss transformar. E eu posso clicar neste ícone e na estética de origem de transformação eu vou escolher aquele que diz esquerda, Tudo bem, Tudo bem, porque eu quero o ponto de ancoragem Toby esquerda. E agora o que vai acontecer é que ele vai começar a partir da borda esquerda da tela, certo? Lá vamos nós, e ele vai ferrar todo o caminho até o fundo da tela, certo? E vai continuar a andar, está bem? E temos algo assim, certo? E isso basicamente sobre como limpamos essa parte do progresso chique, certo? No próximo ano, vamos adicionar outra interação. Então são vocês no próximo vídeo 44. Criando uma interação de foco do projeto: Tudo bem, pessoal. Então neste vídeo, o que vamos fazer vai entender um conceito muito importante. Agora, faça este projeto. Eu fui em frente e fez uma mudança menor onde eu apenas localizar esta interação onde quando eu pairava sobre cada um desses cartões, esta caixa classificar fora aparece e ele tem esta seta. Eu entendi direito. E queremos ter isto para qualquer elemento. Poderíamos tê-lo em todos esses cartões. Podemos tê-lo provavelmente neste cartão também. Não sei onde quer usá-lo, mas coloquei aqui, só por precaução. Certo. E vamos explicar um conceito muito simples. Agora. Uma coisa que você anunciou uma coisa que não estamos aqui é que, como você pode ver, esses elementos de texto que estão lá dentro têm um, você sabe, um espaçamento apropriado fora 40 pixels no laptop e 32 na parte inferior. Mas este elemento, ou não, desafia tudo isso. Tudo bem. Está a ir contra tudo isto contra as regras que foram aplicadas à caixa. Certo, qual é esse batendo tão duro? Nós realmente vamos em frente e desafiamos isso e também decidimos onde decidir onde queremos colocar isso, certo? Então vamos seguir em frente e descobrir, e vamos estar aprendendo um conceito muito novo, que é super importante. Então vamos entrar nisso. Então, um búfalo romano e o que fazemos é então eu vou selecionar esta caixa de descrição do projeto que temos, certo? E é aqui que queremos colocar nesse elemento. Tão impressionado. Controle, Ian. Criador bloqueou primeiro. Ok. E este é o quarteirão é 48 por 48. O sistema de escolha vai dizer, você sabe, morte de Adul, certo? E eu vou fazer esta largura e altura de 48 por 48, ok? E eu vou em frente e mudar a cor de fundo para ser isso. Certo, agora temos isso, Adam. Agora, esta caixa está claramente seguindo os valores sobre as propriedades fora deste fora, você sabe, tendo aquela rebatida inferior e superior. E agora eu vou em frente e pegar o ícone de seta, que é eu tenho um quarto que vai pegar este SVG de arte adulto e para ele dentro. Obviamente, nós queremos centralizar isso, então eu vou em frente e selecionar o adulto surdo, e eu vou flexionar isso para que tudo esteja no centro e a aparência seja muito boa. Agora vamos fazer é eu vou selecionar a seta, Dev. Ok? E eu vou descer aqui para me posicionar agora eu vou criar na posição primeiro, e então eu vou ir em frente e explicar o que isso significa. Então eu vou ir em frente e selecionar Absolute ok, Quando eu digo absolutamente pode ver algo aconteceu que este adulto de bloco está agora no espaço Z , que significa que ele não está se limitando a nenhuma das propriedades desta caixa. Ok, agora, o que eu vou fazer é escolher uma dessas propriedades em 1/2. Agora, eu quero que isso fique no fundo, certo? Parte inferior significativa. Certo. Ok, agora o que aconteceu? Desapareceu completamente. Na verdade , não foi. Então vamos realmente ver onde é isso, certo? Então nós vamos para aqui e nós vamos ver em sua tem ido para algum lugar. É que está tudo aqui, como a palavra que está fazendo aqui? Se eu disser para o canto superior esquerdo, vai para o canto superior esquerdo. Se eu disser em baixo à esquerda, ele vem para o canto inferior esquerdo O que vamos fazer é eu ir e ver a informação ou aqui. Então, como você pode ver, diz posição. Então, a seta surda ok, está sendo posicionada para a parte inferior esquerda do corpo porque diz relativa ao corpo. Certo, agora, o que queremos fazer é mudar isso. Um objeto relativo. Então o que vamos fazer é ir para o elemento período, que é esta descrição do projeto, e eu vou mudar a posição disso de estática para relativa. Agora, esta seta def agora está sendo posicionada para a parte inferior esquerda absoluta fora do bloco de descrição do projeto porque ele diz que é um relativo a. E como fizemos isso? Fazendo a descrição do projeto noite relativa. Então, o pai deve sempre ser relativo à criança. Neste caso, que é este bloco narrativo precisa ser absoluto. Agora queremos que isto fique no topo em baixo, certo? Clique em baixo, certo? Certo. situação que vou fazer é ir em frente, copiar isto e baseá-lo em cada um destes. Tudo bem, vá rebaixá-lo e baseá-lo. Agora mesmo. O problema é que não queremos ver esse adulto surdo nisso o tempo todo. Queríamos estar lá quando pairássemos sobre ele. Então, como criamos a animação? Podemos ir à interação, certo? Então realmente pairava a interação. Agora, se você der uma olhada no rapper normal, desculpe, não o rapper normal, o Project Rapper. Nós adicionamos, você sabe, algumas animações nisso. Ok, agora vamos ter uma nova animação. Isso é um mouse sobre o mouse. Ok, então aqui é que quando vamos selecionar e dizer, começar uma animação, ok? E eu vou criar um novo. Vou chamar isso de animação addle. Ok, você tem mais ícone. E agora eu vou dizer mova-se porque eu quero mover isso para que eles se movam. E, obviamente, não queremos animar o rapper do projeto. Queremos escrever, tipo, tipo, mudar de alvo, e queremos animar a seta, def. Ok, agora vamos criar dedo para fora deles porque um vai estar fora de você e um vai estar dentro deste direito, então o estado inicial vai ser diferente, então nós precisamos ir em frente e dizer set como inicial estado e quero fazer é que eu vou mover o X por 48 correções ok, no Y também por 48 picaretas é agora certo, e eu vou ir em frente e duplicar isso, ok? E isso agora vai ser normal, que vai ser zero, e vai ser zero, certo? E vamos adicionar uma transição. Ele está fora, certo? E, você sabe, apenas dado um raio normal distanciado agora. Vamos jogar isto. Tudo bem? Você pode ver que é 48 picaretas é bom, e ele tipo de encaixe dentro. Certo. Vamos dar uma olhada de novo. Tudo bem, então é lá fora. Está lá fora. Então, como você se certifica de que não é? Não é visível. Se você se lembra, usamos um estouro de faculdade que vamos fazer é eu vou selecionar este projeto. Rapper, venha aqui e aqui. Queremos ver o dedo do pé transbordante. Bata nele. Ok, agora, a coisa é, nós temos uma aula de combo, certo? E queremos afetar apenas o rapper do projeto. Não queremos que caia no fundo do pixel se separe. Tenha esta propriedade de estouro. Então, quando eu clicar neste botão que diz herdar quatro seletores e eu vou escolher Projeto Rapper e agora, quaisquer mudanças que eu fizer afetam apenas o projeto rapper. Então vamos em frente e dizer Overflow escondido. Tudo bem, e depois voltamos para trás. E agora este rapper projeto tem apenas o fluxo de óleo no fundo de 24 pixels. Arjun só tem isso agora. Vamos dar uma olhada. Então agora isso é realmente Deus. Vou pô-lo dentro. Você pode ver que esse botão entra lindamente. Ótima. Agora vamos em frente e reverter isso também. Então eu vou para Mouse hover e eu vou escolher pairar para fora e eu vou dizer que começou animação. E aqui em Hubbard, não faço animação em Amã para duplicar esta animação. Tudo bem. E agora vamos apagar este, está bem? E vamos remover isso como estado inicial. Agora isto outra vez. Queríamos redefinir para 48 48 Eu quero definir a duração deste para ser zero, porque eu quero que você instantaneamente animado para 48 40 que está fora da caixa. Então, agora se você der uma olhada bem, quando você tem e você pode ver isso, e quando você vai, ele vai para fora agora, eu acho que o que nós fizemos foi, uh eu não deveria ter feito este zero ponto zero. Eu deveria fazer 0,5 novamente e também dizer que ele é nosso tribunal. Ok, agora, vamos dar uma olhada. Tudo bem? Tudo bem. Parece incrível. Agora, a coisa é, não funciona em nenhum dos outros, porque precisamos definir isso. Então o que vamos fazer é seguir em frente desde que definimos isso. Queremos mudar essa aula do dedo do pé, certo? E a turma deve ser o Project Rapper. E agora, se você der uma olhada, deve funcionar na direita. Certo? E isso é muito, muito legal, uma emissão. Agora, o que poderíamos fazer é selecionar esta seta, bloco Dev, certo. E podemos ir em frente e levar isso para o topo, certo? Também, se quiser. Certo, então vai estar no topo, certo? Tudo o que precisar. Mas neste caso vai dizer o canto inferior direito, certo, certo, e isso meio que move tudo para o fundo, certo? Então isso é praticamente tudo sobre absoluto e relativo. E vamos publicar isso rapidamente. E vamos dar uma olhada em como isso parece em seu site completamente carregado. Eu quero ir para o porto para o seu curso e controle é para o senhor direito e descer. E depois vamos. Então, quando eu passar o mouse, você pode vê-lo lindamente, entra e sai, e parece super legal, como você pode apenas sentir as animações e é super incrível. Tudo bem, então é isso para este vídeo, e eu vejo vocês no próximo vídeo. 45. Wrapping o site: Tudo bem, pessoal. Então, neste vídeo, vamos finalmente encerrar o projeto. Vou mostrar-vos algumas coisas que podem ter perdido ou algo que possam precisar de usar quando estão a construir o vosso website. Então eu vou em frente e não posso explicar e apenas encerrar este vídeo. Então a primeira coisa aqui é que temos quatro torneiras, certo? Temos as propriedades. Qual da guia de estilo? Então nós temos essas configurações e então nós temos este que é chamado de gerenciador de estilo, que basicamente tem uma lista de todas as suas classes, certo. E alguns dias depois da criação, você pode não ter usado algumas classes para alguns elementos. Então é por isso que temos este botão onde você pode limpar. Então, como você pode ver, ter 12 aulas que eu não usei. E o que muitos desses diferentes, que eu não usei então você quer fazer vai ir em frente e primeiro remover todas essas classes porque você pode não estar usando estes escritos irá em frente e escolher remover classe, Tudo bem, e agora tudo vai ficar bem. porque árbitros em última análise vai ver o que não acrescentou. E qual é a classe extra e ele vai remover tudo o que grande incrível. Então esse é o número um. O número dois está aqui. Podemos dizer “publicar”. E se você quiser adicionar um domínio personalizado, você canaliza um domínio personalizado e também tem configurações avançadas e essas são as configurações padrão . Eu sugiro que você deixe como está e não o que você muito sobre ele. Mas certifique-se de que se você quiser em um domínio personalizado, nós vamos clicar aqui. Vamos até lá e ver como a caixa de de seçãode domínio está bem. A próxima é Você pode compartilhar seu projeto, que significa que se você quiser mostrar este projeto em particular para alguém, tudo bem, e eles meio que querem ver como ele parece, você pode realmente enviar-lhes um link, Certo? Se você ativar isso, então você pode copiar este fluxo web. Agora eles serão capazes de outras coisas. Mas as mudanças que eles fazem não serão salvas, certo? Quaisquer alterações que você fizer em seu projeto serão compartilhadas. Tudo o resto não é assim, se você quiser mostrar o seu trabalho são o progresso que você pode realmente compartilhar este link com eles. Tudo bem. Em seguida, se você acabar indo para o plano de isca e eu tiver um plano de ajuda profunda, você pode ir em frente e exportar a esquina. O fluxo da Web dá-lhe CSS HTML bonito, JavaScript e os ativos , que , que são , você sabe, cuidadosamente colocados juntos e você pode realmente preparar, é luta que você começa um zip e você pode hospedá-lo em qualquer outra plataforma fora de sua escolha. Se você não quer hospedar em níveis que isso é muito você exportar o tribunal. Tudo bem. Chegando ao próximo é que temos vários pontos de interrupção agora. Nós olhamos para quatro pontos de interrupção, que é apenas parar paisagem mob tablet por paisagem e mais trimestre onde também lhe dá três pontos de interrupção adicionais para o esfregão para o próprio ponto de interrupção da área de trabalho. Certo. Então você tem por 10. 80 você tem para 12. 80. Temos um 14 40 final do jardim 1920. Agora você pode ir em frente e personalizar a aparência de cada um desses pontos de interrupção, mesmo que eles sejam todos a mesma parte de quebra de área de trabalho, certo? Porque quaisquer mudanças que não fizemos que fizemos até agora estão afetando todos esses três pontos de interrupção. Certo, porque esses são pontos de quebra de laptop. Mas se você quiser ir em frente e mudá-los para esses dois pontos de pausa, talvez 1920 14 40 tenham um estilo particular, mas 1920 terá um tempo diferente. Talvez você tenha cinco colunas em 1920 14 40 onde você está. 10 colunas em 1920. Você pode fazer isso, certo? Então isso é outra coisa legal. Ótima. Agora a outra coisa é que aqui no painel de ativos, se você clicar no ícone, nosso ícone de engrenagem, vamos ver que temos algo chamado ou texto Agora os professores Aleka terminaram uma descrição desta imagem para leitores de tela ou se a imagem não conseguir atrair. Então, basicamente, o que acontece é que às vezes há pessoas que são cegas e não seria capaz de ler site. Então, há uma tecnologia chamada leitores de tela, que vai ler este texto que você atribui para que as pessoas entendam o que este objeto ou o que este elemento ou o que esta imagem é. Então você sempre quer adicionar nossos técnicos, e isso é extremamente bom para um CEO também ir em frente e adicionar em todos os Então, por exemplo, eu diria que eu diria projeto em um link. É onde eu chamaria isso. Tudo bem. E por isso eu diria logo épico, certo. Então, você sabe, vá em frente e adicione um texto oleado a cada imagem que você tem e isso vai tornar seu site muito melhor em termos de CEO e em termos de usabilidade também. Tudo bem, Fantástico. Agora aqui você tem todas as suas páginas. Agora não vamos cobrir CMS ou páginas de comércio. Então vamos viver isso por enquanto, e você pode escolher. E se você clicar no ícone de configurações, você vai obter um monte de configurações. E isso é o que você quer fazer, certo? Então, aqui no ASIO, definindo a ordem especificada informações, Então tags título. Então eu vou chamar esse Robin Williams Robin Williams e dizer, designer de produtos, é assim que vai ficar em seu site no Google e alguém tão desesperado, e você pode adicionar uma meta descrição dizendo que Robin Williams é um designer de produtos de Milão, Itália, e você sabe que você pode dizer o que quiser, lá vamos nós. Em seguida, temos imagem de gráfico aberto títulos de gráfico aberto são que poderíamos. Se você não sabe o que é, está tudo bem. Você pode tê-lo, você pode dizer o mesmo que tag título CEO, e você pode dizer Samos como sua descrição assunto. Então, basicamente, o que configurações de gráfico aberto significa é que quando você deve, quando alguém compartilha isso no WhatsApp ou Facebook ou Instagram ou qualquer coisa, esta forma, como um link com a imagem de uma empresa, Certo? E nós temos essa imagem de gráfico aberto. Certifique-se de que suas imagens têm 1200 pixels por 6 30 pixels e têm uma taxa de proporção 19,1 é para uma . Agora eu fui em frente e criei um, mas você pode ir em frente e criar qualquer coisa que você quiser. Então deixe-me mostrar como parece retal. Aqui. Eu estou em figo MMA, e esta é a imagem de gráfico aberto que eu fiz. Nós também vamos precisar desses tecidos em ícones e ícones de clique na Web, mas eu vou falar sobre isso mais tarde, mas para Agora, esta é a imagem de gráfico aberto que você deseja, obviamente, como você pode ver que tamanho 6200 por 630 então queremos fazer é uma vez que você exportá-lo, você pode colocar o que quiser neste. Você quer voltar para o fluxo da Web e você virá aqui para a seção de imagens e, em seguida, clique no upload e vamos em frente e carregar a imagem do gráfico aberto. E como você pode ver, ele está sendo carregado agora. Agora vamos fazer é clicar no ícone de engrenagem e aqui ao lado do nome. Você tem uma ligação, certo? É exatamente onde a imagem está sendo armazenada. Então, você sabe, copie isso e volte para as configurações da página. E aqui nas configurações de imagem de gráfico aberto que você deseja, basta ir em frente e basear essa direita. E agora você também tem as configurações de pesquisa do site, que, e se quiser, você pode excluir a pá dos resultados da pesquisa. Então, o Google excluirá este campo específico se isso é algo que você precisa. Mas acho que ele nunca faria isso. E você também tem um código personalizado, qual não vamos falar. Então, tudo o que vou fazer é conceber, e isso vai continuar e salvá-lo. Não, vamos dar uma olhada rapidamente. Howard, olha. Então era assim que as visualizações do gráfico aberto eram. Olhe onde você tem algum texto ou informação e você tem três. Você está baixo aqui. E, você sabe, você também tem a imagem de gráfico aberto, certo? Então, isso é praticamente tudo sobre as configurações de casa. Agora, uma vez que isso é feito, nós não vamos para a seção de avanço, vamos para dentro das configurações do projeto, certo? E aqui, vamos fazer algumas outras coisas. Tudo bem, então nós temos o 1º 1 isso é tudo, General, eu fui em frente e apenas mudei o assunto para o curso RW portfólio para Robin Williams . E você pode mudar para o que quiser. E você pode hospedá-lo no chão e também tem tecido em e Replicants Award. O que? Basicamente estes são estes pequenos ícones que você vê aqui, certo? E estas são as pilhas de ícones. Você quer ter. Então eu vou ir em frente e exportar esses também e carregado, e eu fui em frente e apenas carregue estes direito e obviamente você tem tempos. E aqui agora, você também tem essa marca de fluxo de trabalho. E o que melhor queima é basicamente essa etiqueta que diz feito em Buffalo. Agora, uma vez que você vá para um plano pago, você pode desligar isso certo? E isso não estará mais lá. Mas se você estiver usando Web close abdômen do que isso estará lá, certo? Excelente. Ok, agora vamos para a hospedagem para baixo Agora, aqui na guia de hospedagem. Obviamente, onde você quer fazer é ir em frente e escolher o seu plano específico que você quer um negócio CMS básico ou empresa. E uma vez que isso é feito, você vai ter um monte de configurações aqui. Agora, eu realmente recomendo verificar cada um desses links que não estão lá, porque cada serviço, cada plataforma de hospedagem tem uma questão diferente fora de vinculação com fluxo de poço. Então você meio que quer verificar a documentação ou isso e verificar a documentação aqui onde Flo tem um par de tutoriais e eu tenho certeza que esses links definitivamente irão ajudá-lo a obtê-los optronics ou definitivamente fazer isso para fora se isso é respeito e se você tem alguma dúvida sobre hospedagem tudo bem, então você tem o editor editor é um lugar onde você pode adicionar colaboradores para que duas pessoas possam ter acesso a um único projeto. Nada demais para ele. E então você tem que construir. Agora mesmo. Isto é algo que realmente não queremos dar uma olhada porque não tem nada a ver com o nosso portfólio. Sim, você como seu é importante agora. Agora já fizemos um monte de coisas com relação ao CEO, e eu quero você fora do plano de vista. Você pode ter algumas configurações e você pode simplesmente preenchê-las. Vai ser muito simples por aqui. E como você pode ver, você pode definir meta tags e descrições que já fizemos e abrir imagens de gráfico, o que já fizemos. Então, isso está muito bem feito. A próxima coisa são as fazendas. Agora, nós fomos em frente e realmente criamos uma fazenda. Certo? E você pode realmente adicionar todas as configurações estão aqui agora você admite diz quando um farm é enviado para um site editor onde fluxo recolhe automaticamente o envio e exibi-lo aqui, e-mail ou defecação é pode opcionalmente ser habilitar e virá de uma marca-lo um monte de e-mail. O que significa que quando alguém se submete, quando alguém envia algo em seu site, você recebe um e-mail ou defecação para que você possa escolher definir toda essa informação aqui, certo? E você tem muitas outras coisas que você pode fazer agora. Estas são coisas bastante avançadas, para que você possa conferir todos os vídeos que estão relacionados a fazendas. Tudo bem. Todos os links estarão lá na descrição fora do vídeo para que você possa conferir . Você também tem, como, como, envios de formulários onde você pode esconder submissões de fazenda e todos os envios que significam que virão para cá. Então, como você pode ver, nós fizemos algo onde nós adicionamos um nome de post que humildade eo sentimento particular que diz oi luz. Então, toda essa informação é o abade que você e você perdoam ou os Cs. Nós tiramos tudo isso se você precisar. Então, todas essas inscrições de formulário vão estar aqui. Você pode clicar em mostrar mais, mas nós não temos nenhum. Então, isso é muito. Não, já vamos ver o fundo, por isso não queremos ir lá. Vamos para backups em backups novamente. Nós temos que estamos no chão automaticamente. É um monte de reforços. Então, no caso de você ter cometido algum erro, você pode ir em frente e visualizá-los ou restaurá-los. Então você tem integrações e integrações é bastante complexo. No caso de você estar usando alguma dessas coisas que agarram Papa A ser eu acessar quantidades e coisas essas coisas bastante avançadas. Então não vamos nos preocupar com isso também. E se Deus, você se acostumou. Então uma vez, você tem praticamente tudo isso feito, você basicamente fez. Tudo o que você tem a fazer é apenas ir para publicar e dizer, Publicar para o domínio ref Low em um domínio personalizado e você é praticamente bom para ir. Então isso é muito para este vídeo. E são vocês no próximo vídeo. 46. O que vem a seguir?: Oh, ei, Oi. O estudo não te viu que não esperava que ninguém chegasse ao fim. Claro que sim. Ok, aqui está você. Isso é ótimo. Isso é fantástico. Você passou por todo o curso. Sei que tem sido uma longa jornada. Tem sido uma longa viagem em Finalmente chegou ao fim. Não há muitas pessoas a fazer isso. Então, bom trabalho. Vamos falar sobre o que vem a seguir. Agora estamos através de ofertas muito mais do que apenas água curta no curso. Há tantas coisas que eu não falei sobre uma caixa de luz, como vídeos para vídeo do YouTube. Tanta coisa. A animação, uma tonelada de coisas que eram cloretos de fluxo, que não são cobertos nesta figura porque eu não queria fazer com que parecesse um tipo de manual para fluir. Em vez disso, isso lhe daria uma boa compreensão do básico e, você sabe, certifique-se de que sua fundação forte. Sempre que você quiser construir algo diferente do que você deveria ser capaz de ir em frente e fazer isso, você deve entender como ele funciona. Agora. Recomendo vivamente verificar o escuro da Universidade da Flórida. Desculpe, Desculpe, doutor universitário sobre Flora que eu ligo estaria na descrição fora do curso de qualquer maneira. Você pode conferir, e Web slow fornece tutoriais para cada aspecto e componente fora. Praticamente tudo sobre fluxo de trabalho acabou que é muito parecido com um manual maciço, e eu recomendo que você confira se você quiser. Você sabe, design é muito algo que realmente sabia que algo que eu não cobriu no curso. Neste momento, a gripe também tem o tipo fora. Muitos cursos, que são como 5 a 6 vídeos e eles Digital Bill, um site de página única são muito simples, você sabe, que são muito complexos e tal, então você pode conferir esses também. E, claro, que uma tonelada fora de tutoriais do YouTube on-line onde sua gripe ensina você a fazer um monte de coisas divertidas . Eu tenho alguns Pretória regular fora do meu próprio, relativamente difícil criar certos tipos de animações e interações muito estressado, corrigido para que você possa verificar aqueles no meu site mais tarde. Então isso é praticamente tudo para esta base de vídeo. 10 anos. Tanta coisa para vir e assistir todo o meu curso. Parabéns mais uma vez pelo final do curso sobre Vocês no meu próximo vídeo sentam-se na creche e adeus?