diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.portuguese.md b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.portuguese.md index 80058dc143..8e6805d6f4 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.portuguese.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.portuguese.md @@ -7,7 +7,7 @@ localeTitle: Crie uma forma mais complexa usando CSS e HTML --- ## Description -
Uma das formas mais populares do mundo é a forma do coração, e neste desafio você criará um usando CSS puro. Mas primeiro, você precisa entender os pseudo-elementos ::before e ::after . Esses pseudo-elementos são usados ​​para adicionar algo antes ou depois de um elemento selecionado. No exemplo a seguir, um pseudoelemento ::before é usado para adicionar um retângulo a um elemento com o heart da classe:
.heart :: before {
conteúdo: "";
cor de fundo: amarelo;
raio de fronteira: 25%;
posição: absoluta;
altura: 50 px;
largura: 70px;
top: -50px;
esquerda: 5px;
}
Para que os pseudo-elementos ::before e ::after funcionem corretamente, eles devem ter uma propriedade de content definida. Essa propriedade geralmente é usada para adicionar itens como uma foto ou texto ao elemento selecionado. Quando os pseudoelementos ::before e ::after são usados ​​para criar formas, a propriedade content ainda é necessária, mas é definida como uma string vazia. No exemplo acima, o elemento com a classe heart possui um pseudoelemento ::before que produz um retângulo amarelo com height e width de 50px e 70px, respectivamente. Este retângulo tem cantos arredondados devido ao seu raio de 25% e está posicionado absolutamente a 5px da left e 50px acima da top do elemento.
+
Uma das formas mais populares do mundo é a forma do coração, e neste desafio você criará um usando CSS puro. Mas primeiro, você precisa entender os pseudo-elementos ::before e ::after. Esses pseudo-elementos são usados para adicionar algo antes ou depois de um elemento selecionado. No exemplo a seguir, um pseudoelemento ::before é usado para adicionar um retângulo a um elemento com o heart da classe:
.heart :: before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}
Para que os pseudo-elementos ::before e ::after funcionem corretamente, eles devem ter uma propriedade de content definida. Essa propriedade geralmente é usada para adicionar itens como uma foto ou texto ao elemento selecionado. Quando os pseudoelementos ::before e ::after são usados para criar formas, a propriedade content ainda é necessária, mas é definida como uma string vazia. No exemplo acima, o elemento com a classe heart possui um pseudoelemento ::before que produz um retângulo amarelo com height e width de 50px e 70px, respectivamente. Este retângulo tem cantos arredondados devido ao seu raio de 25% e está posicionado absolutamente a 5px da left e 50px acima da top do elemento.
## Instructions
Transforme o elemento na tela em um coração. No heart::after selector, mude a background-color para pink e o border-radius para 50%. Em seguida, segmente o elemento com o heart da classe (apenas heart ) e preencha a propriedade transform . Use a função rotate() com -45 graus. ( rotate() funciona da mesma forma que skewX() e skewY() ). Finalmente, no heart::before selector, defina sua propriedade content para uma string vazia.