Oi pessoal, nesta aula vamos ver como a gente vai mostrar uma bola ou cheese na encada espaço dessa grade aqui do jogo da vela. Em várias maneiras de fazer isso você poderia fazer, por exemplo, usar uma imagem com o círculo e imagem com cheese, poderia usar um ícone, SVG, poderia fazer várias coisas. Então vou usar só um texto mesmo, vou usar um símbolo de unicode para o círculo e para a cheese, a cruz. Então eu já peço que você aqui, se você buscar pelo unicode white circle, que é o círculo branco, você acha esse cara que tem esse símbolo de unicode que a gente pode usar. Aí eu vou só copiar e colar esse cara aqui, se eu ir aqui embaixo eu posso copiar esse aqui da... O símbolo, né? Mesma coisa para o cheese, eu acho esse símbolo unicode cross mark, tá? Eu posso copiar esse cara, até em mode copiar aqui, tá? E cara, eu posso copiar. Então como a gente vai mostrar esse cara aqui nesse grade? Então se o espaço aqui, cada espaço, se você adicionar uma classe, acho que eu vou chamar classe de marcador, essa classe vai adicionar o símbolo ao espaço usando CSS, tá? Vai ser bem simples, tudo vai ser feito pelos classes de CSS. Por exemplo, primeiro aqui, aí eu vou fazer o seguinte, se eu quiser que esse cara seja marcada, eu vou adicionar uma nova classe chamando marcador e pode ser marcador x, traço x ou bola, tá? Se eu for x, vai mostrar x dentro dessa div, tá? Dessa div aqui. E se for bola, vai mostrar o símbolo bola dentro dessa div. Nós vamos aumentar o tamanho da fonte para poder deixar o circo maior e aparecer legal, tá? A gente vai usar o seletor de... O sul do seletor, tá? Pisseu do seletor, chamado dois pontos, dois pontos after, tá? Para a gente poder injetar conteúdo nessa div usando CSS. Então vamos dar uma olhada aqui, te mostrar. Vamos voltar no código. Então há um espaço aqui, depois desse cara, se você tiver uma div que tem a classe espaço e também tem outra classe chamada marcador x, tá? Isso significa que tem um elemento que tem a classe espaço e também tem a classe marcador x. Eu e tem que ser também o pisseu do seletor after, tá? O que vai acontecer? Você vai... Se o espaço adiv que tem a classe espaço e também tem a classe marcador x, você vai adicionar dentro da div, tá? Depois do conteúdo da div, por isso é after, mas a gente não tem nada dentro da div, por isso não vai portar a ser after ou before. Então eu vou usar after quando você usa esse seletor e você pode injetar conteúdo, tá? Que vai aparecer dentro da div, tá certo? Não é fora, dentro dessa div, mas no final, depois do conteúdo, se é div que tiver algum conteúdo, tá? Então eu vou dizer display block. Vou botar content aqui, vou copiar o símbolo do x. Vou lá naquele site, vou copiar esse caractere, voltando no texto editor, vou colar dentro de aspas, tá? Dentro de aspas, o ponto de vírgula. Essa propriedade é de conteúdo, tá? Você pode injetar esse caractere dentro da div, no final, depois do conteúdo, se tiver algum. Vou salvar. Então se eu adicionar a classe, essa div chamada marcador x, tá? Olha aqui, adicionei outra classe, olha o espaço, depois do espaço, né? Apareceu aquela bola ali. Tá bom? Tá bom? Então é assim que a gente vai fazer. Aí a gente vai pegar aquela bola que você note aqui, olha aqui, o lado direito, se eu abrir essa div, você tem esse dois pontos, dois pontos after, que é esse cara, tá? Então nós podemos fazer o seguinte, nós podemos aumentar o tamanho da fonte aqui, ó, fonte size, vou botar 128 pixels, tá? Então você pode copiar esse cara lá para a sua folha de shields. Agora, para poder centralizar esse cara, nós vamos na div despasta e vamos adicionar display, vai virar flex para usar flexbox e vou usar o justify content, tá? Para centralizar esse cara. Deixa eu adicionar o marcador x aqui no index para você ficar vendo enquanto a gente está digitando o estilo, só adicionei aqui temporariamente, tá? Então o justify content serve para alinhar os itens dentro desse container flex, no caso ao longo do eixo principal, que nesse caso vai ser por padrão no navegador web, a direção flex, flex direction é row, da esquerda para a direita, então esse cara vai centralizar da esquerda para a direita, que é o eixo principal nesse caso. Agora para centralizar de cima para baixo, nesse caso o eixo transversal perpendicular, você vai usar o align items e usar center. Ah, bom? Então está aí. Agora para o marcador, eu usei a bola, né? Não é x, desculpa, esse é o marcador bola. Então para o x seria a mesma coisa, desculpa que eu errei. Marcador x, 2 pontos, 2 pontos after, display block, conteúdo vai ser o x que a gente vai copiar lá daquele site, copiar esses x, essa cruz, tá? Vou colocar aqui dentro das aspas. E eu vou dizer font size 128 pixels, px, px, tá? Agora vai dar certo. Tá bom? Opa, fica feio esse x, será que tem outro caractere? Unicode cross. Deixa eu procurar aqui. Vamos ver se aqui, eu achei, né, o que pede. Isso parece ser melhor. Tá bom? Então você pode procurar qualquer caractere que você gosta aí, tá? Eu vou usar esse. Então se a classe foi marcada o, né? Eu botei o, eu escrevi o, tá? Que vai ser a bola, vai aparecer assim. Se for x, vai aparecer assim, tá? Então é isso, deixa eu voltar aqui e remover essa classe daqui. Tá bom? Então é só adicionar a classe marcada o x ou marcada o para poder aparecer lá na dev. Tá bom? A gente aprendeu a fazer isso usando o piseu do selector after que ele injeta algum conteúdo dentro da dev no final, depois do conteúdo se tiver algum conteúdo. Nesse caso não tem conteúdo, então não faz diferença com o VIFO, tá? Então usou o counter para injetar o conteúdo desse caractere e aumentou o número da fonte para ficar melhor de ver. E usou o flexbox, o container do próprio quadrado do espaço, virou o container flex. Usamos justify counter para centralizar horizontalmente a line items para centralizar verticalmente. Tá bom? Por essa aula é só e até a próxima.