gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,learn): processed translations (#45504)

Browse Source
This commit is contained in:
camperbot
2022-03-23 19:52:04 +05:30
committed by GitHub
parent dbb7f309a7
commit 3add6077ad
162 changed files with 2383 additions and 826 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
View File

@@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
A propriedade `box-shadow` aplica uma ou mais sombras a um elemento.
A propriedade `box-shadow` recebe valores para
A propriedade `box-shadow` recebe os seguintes valores em ordem:
<ul>
<li><code>offset-x</code> (determina a distância que você quer "empurrar" a sombra na horizontal),</li>
<li><code>offset-y</code> (determina a distância que você quer "empurrar" a sombra na vertical),</li>
<li><code>blur-radius</code> (faz com que a sombra fique mais borrada),</li>
<li><code>spread-radius</code> (faz com que a sombra se espalhe mais) e</li>
<li><code>color</code> (cor), nessa ordem.</li>
<li><code>offset-x</code> (determina a distância que você quer "empurrar" a sombra na horizontal)</li>
<li><code>offset-y</code> (determina a distância que você quer "empurrar" a sombra na vertical)</li>
<li><code>blur-radius</code></li>
<li><code>spread-radius</code></li>
<li><code>color</code></li>
</ul>
Os valores `blur-radius` e `spread-radius` são opcionais.

4
curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
View File

@@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
# --description--
As cores têm várias características, incluindo tonalidade, saturação e luminosidade. CSS3 introduziu a função `hsl()` como uma forma alternativa de escolher uma cor informando diretamente essas características.
As cores têm várias características, incluindo tonalidade, saturação e luminosidade. O CSS3 introduziu a função `hsl()` como uma forma alternativa de escolher uma cor informando diretamente essas características.
**Tonalidade** é o que as pessoas geralmente chamam de 'cor'. Se você imaginar um espectro de cores começando com o vermelho à esquerda, passando pelo verde no meio e pelo azul à direita, a tonalidade é qualquer cor que esteja dentro deste espectro. No `hsl()`, a tonalidade é definida usando o conceito de círculo cromático em vez de um espectro, onde o ângulo da cor no círculo é um valor entre 0 e 360.
@@ -39,7 +39,7 @@ Você deve usar a função `hsl()` para declarar a cor `cyan` (ciano).
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
```
Você deve usar a função `hsl()` para declarar a cor `blue` (blue).
Você deve usar a função `hsl()` para declarar a cor `blue` (azul).
```js
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));

6
curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
View File

@@ -15,11 +15,11 @@ Você criará um objeto redondo e transparente com uma sombra nítida ligeiramen
Para criar um objeto redondo, a propriedade `border-radius` deve ter um valor de 50%.
Você deve se lembrar de um desafio anterior que a propriedade `box-shadow` recebe valores para o eixo horizontal (`offset-x`), eixo vertical (`offset-y`), `blur-radius`, `spread-radius` e um valor de cor, nessa ordem. Os valores `blur-radius` e `spread-radius` são opcionais.
Você deve se lembrar de um desafio anterior que a propriedade `box-shadow` recebe valores para o eixo horizontal (`offset-x`), eixo vertical (`offset-y`), `blur-radius`, `spread-radius` e um valor de `color`, nessa ordem. Os valores `blur-radius` e `spread-radius` são opcionais.
# --instructions--
Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a propriedade `background-color` para `transparent` e, em seguida, defina a propriedade `border-radius` para 50% para fazer a forma circular. Finalmente, altere a propriedade `box-shadow` e defina o `offset-x` para 25px, o `offset-y` para 10px, `blur-radius` para 0, `spread-radius` para 0 e cor para azul (`blue`).
Manipule o elemento quadrado no editor para criar a forma da lua. Primeiro, altere a propriedade `background-color` para `transparent` e, em seguida, defina a propriedade `border-radius` para 50% para fazer a forma circular. Finalmente, altere a propriedade `box-shadow` e defina o `offset-x` para 25px, o `offset-y` para 10px, `blur-radius` para 0, `spread-radius` para 0 e `color` para azul (`blue`).
# --hints--
@@ -35,7 +35,7 @@ A propriedade `border-radius` deve ter o valor de `50%`.
assert(code.match(/border-radius:\s*?50%;/gi));
```
A propriedade `box-shadow` deve receber 25px para o eixo horizontal (`offset-x`), 10px para o eixo vertical (`offset-y`), 0 para `blur-radius`, 0 para `spread-radius` e, finalmente, azul (`blue`) para a cor.
A propriedade `box-shadow` deve receber 25px para o eixo horizontal (`offset-x`), 10px para o eixo vertical (`offset-y`), 0 para `blur-radius`, 0 para `spread-radius` e, finalmente, azul (`blue`) para `color`.
```js
assert(

10
curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
View File

@@ -28,15 +28,15 @@ Para que os pseudo-elementos `::before` e `::after` funcionem corretamente, eles
# --instructions--
Transforme o elemento em tela em um coração. No seletor `heart::after`, altere a propriedade `background-color` para `pink` e `border-radius` para 50%.
Transforme o elemento em tela em um coração. No seletor `.heart::after`, altere a propriedade `background-color` para `pink` e `border-radius` para 50%.
Em seguida, adicione a propriedade `transform` no elemento com a classe `heart` (apenas `heart`). Use a função `rotate()` com o valor de -45 graus.
Finalmente, no seletor `heart::before`, a propriedade `content` deve possuir um valor vazio.
Finalmente, no seletor `.heart::before`, a propriedade `content` deve possuir um valor vazio.
# --hints--
A propriedade `background-color` do seletor `heart::after` deve ter o valor `pink`.
A propriedade `background-color` do seletor `.heart::after` deve ter o valor `pink`.
```js
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
@@ -45,7 +45,7 @@ assert(
);
```
A propriedade `border-radius` do seletor `heart::after` deve ter um valor de 50%.
A propriedade `border-radius` do seletor `.heart::after` deve ter um valor de 50%.
```js
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
@@ -57,7 +57,7 @@ A propriedade `transform` da classe `heart` deve usar a função `rotate()` com
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
```
A propriedade `content` do seletor `heart::before` deve ter um valor vazio.
A propriedade `content` do seletor `.heart::before` deve ter um valor vazio.
```js
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));

2
curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
View File

@@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
Em um desafio anterior, tratamos da palavra-chave `ease-out`, que descreve uma mudança de animação que começa acelerando e desacelera ao final da animação. À direita, a diferença entre a palavra-chave `ease-out` (para o elemento azul) e a palavra-chave `linear` (para o elemento vermelho) é demonstrada. Progressões de animação semelhantes à palavra-chave `ease-out` podem ser alcançadas usando a função de curva de Bézier cúbica.
Em geral, alterar os pontos de ancoragem `p1` (ponto 1) e `p2` (ponto 2) leva à criação de diferentes curvas de Bézier, que controlam como a animação progride ao longo do tempo. Aqui está um exemplo de curva de Bézier usando valores para imitar o estilo ease-out:
Em geral, alterar os pontos de ancoragem `p1` (ponto 1) e `p2` (ponto 2) leva à criação de diferentes curvas de Bézier, que controlam como a animação progride ao longo do tempo. Aqui está um exemplo de curva de Bézier usando valores para imitar o estilo `ease-out`:
```css
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);

2
curriculum/challenges/portuguese/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
View File

@@ -47,7 +47,7 @@ A interrupção de cor em 0 pixels deve ser `yellow`.
assert(code.match(/yellow\s+?0(px)?/gi));
```
A interrupção de cor em 40 pixels deve ser `yellow`.
A primeira interrupção de cor em 40 pixels deve ser `yellow`.
```js
assert(code.match(/yellow\s+?40px/gi));