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 �