chore(i18n,curriculum): update translations (#42659)
This commit is contained in:
camperbot
GitHub
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: Adjust the background-color Property of Text
|
||||
title: Ajustar a propriedade background-color (cor de fundo) de textos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
forumTopicId: 301032
|
||||
@@ -9,23 +9,23 @@ dashedName: adjust-the-background-color-property-of-text
|
||||
|
||||
# --description--
|
||||
|
||||
Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a `background-color` to the element holding the text you want to emphasize. This challenge uses `rgba()` instead of `hex` codes or normal `rgb()`.
|
||||
Em vez de ajustar o fundo geral ou a cor do texto para tornar o primeiro plano facilmente legível, você pode adicionar a propriedade `background-color` ao elemento que contém o texto que deseja enfatizar. Este desafio usa a função `rgba()` em vez de códigos `hex` ou `rgb()` normal.
|
||||
|
||||
<blockquote>rgba stands for:<br> r = red<br> g = green<br> b = blue<br> a = alpha/level of opacity</blockquote>
|
||||
<blockquote>rgba significa:<br>r = red (vermelho)<br>g = green (verde)<br>b = blue (azul)<br> a = alpha (nível de opacidade)</blockquote>
|
||||
|
||||
The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. `rgba()` is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.
|
||||
Os valores RGB podem variar de 0 a 255. O valor alpha (nível de transparência) pode variar de 1, que é totalmente opaco ou de cor sólida, a 0, que é totalmente transparente. Utilizar `rgba()` neste caso é ótimo, pois permite que você ajuste a opacidade. Isso significa que você não precisa eliminar completamente o fundo.
|
||||
|
||||
You'll use `background-color: rgba(45, 45, 45, 0.1)` for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.
|
||||
Você usará a propriedade `background-color: rgba(45, 45, 45, 0.1)` para este desafio. Estes valores produzem uma cor cinza escuro que é quase transparente devido ao baixo valor da opacidade - 0.1.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To make the text stand out more, adjust the `background-color` of the `h4` element to the given `rgba()` value.
|
||||
Para fazer o texto se destacar mais, ajuste a propriedade `background-color` do elemento `h4` para o valor `rgba()` fornecido anteriormente.
|
||||
|
||||
Also for the `h4`, remove the `height` property and add `padding` of 10px.
|
||||
Também para o `h4`, remova a propriedade `height` e adicione `padding` de 10px.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should add a `background-color` property to the `h4` element set to `rgba(45, 45, 45, 0.1)`.
|
||||
O código deve adicionar uma propriedade `background-color` ao elemento `h4` com o valor de `rgba(45, 45, 45, 0.1)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your code should add a `padding` property to the `h4` element and set it to 10 pixels.
|
||||
O código deve adicionar uma propriedade `padding` ao elemento `h4` e configurá-lo para 10 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -46,7 +46,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `height` property on the `h4` element should be removed.
|
||||
A propriedade `height` do elemento `h4` deve ser removida.
|
||||
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: Adjust the Color of Various Elements to Complementary Colors
|
||||
title: Ajustar a cor de vários elementos para cores complementares
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
forumTopicId: 301033
|
||||
@@ -9,33 +9,33 @@ dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||
|
||||
# --description--
|
||||
|
||||
The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.
|
||||
O desafio das Cores Complementares mostrou que cores opostas no círculo cromático podem fazer as demais cores parecerem mais vibrantes quando colocadas lado a lado. No entanto, o forte contraste visual pode ser chocante se for usado demais em um site e, às vezes, pode tornar o texto mais difícil de ler se for colocado em um fundo de cores complementares. Na prática, uma das cores geralmente é dominante e o complemento é usado para chamar a atenção visual para determinado conteúdo da página.
|
||||
|
||||
# --instructions--
|
||||
|
||||
This page will use a shade of teal (`#09A7A1`) as the dominant color, and its orange (`#FF790E`) complement to visually highlight the sign-up buttons. Change the `background-color` of both the `header` and `footer` from black to the teal color. Then change the `h2` text `color` to teal as well. Finally, change the `background-color` of the `button` to the orange color.
|
||||
Esta página usará um tom de azul-petróleo (`#09A7A1`) como cor dominante Seu complemento laranja (`#FF790E`) será usado para destacar visualmente os botões de inscrição. Altere a propriedade `background-color` do `header` e do `footer` de preto para azul-petróleo. Em seguida, altere a propriedade `color` do `h2` para azul-petróleo também. Finalmente, mude a propriedade `background-color` do `button` para a cor laranja.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `header` element should have a `background-color` of #09A7A1.
|
||||
O elemento `header` deve ter uma propriedade `background-color` com o valor de #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
The `footer` element should have a `background-color` of #09A7A1.
|
||||
O elemento `footer` deve ter uma propriedade `background-color` com o valor de #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
The `h2` element should have a `color` of #09A7A1.
|
||||
O elemento `h2` deve ter uma propriedade `color` com o valor de #09A7A1.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
The `button` element should have a `background-color` of #FF790E.
|
||||
O elemento `button` deve ter uma propriedade `background-color` com o valor de #FF790E.
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: Adjust the Height of an Element Using the height Property
|
||||
title: Ajustar a altura de um elemento usando a propriedade height
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
forumTopicId: 301034
|
||||
@@ -9,7 +9,7 @@ dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||
|
||||
# --description--
|
||||
|
||||
You can specify the height of an element using the `height` property in CSS, similar to the `width` property. Here's an example that changes the height of an image to 20px:
|
||||
Você pode especificar a altura de um elemento usando a propriedade `height` no CSS, semelhante à propriedade `width`. Aqui está um exemplo que muda a altura de uma imagem para 20px:
|
||||
|
||||
```css
|
||||
img {
|
||||
@@ -19,13 +19,13 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `height` property to the `h4` tag and set it to 25px.
|
||||
Adicione a propriedade `height` à tag `h4` e defina-a com um valor de 25px.
|
||||
|
||||
**Note:** You may need to be at 100% zoom to pass the test on this challenge.
|
||||
**Observação:** talvez você precise estar com 100% de zoom para passar no teste neste desafio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should change the `h4` `height` property to a value of 25 pixels.
|
||||
O código deve alterar a propriedade `height` da tag `h4` para um valor de 25 pixels.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: Adjust the Hover State of an Anchor Tag
|
||||
title: Mudar o estilo de um link ao passar o mouse
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
forumTopicId: 301035
|
||||
@@ -9,9 +9,9 @@ dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||
|
||||
# --description--
|
||||
|
||||
This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.
|
||||
Este desafio abordará o uso de pseudo-classes. Uma pseudo-classe é uma palavra-chave que pode ser adicionada a seletores, a fim de selecionar um estado específico do elemento.
|
||||
|
||||
For example, the styling of an anchor tag can be changed for its hover state using the `:hover` pseudo-class selector. Here's the CSS to change the `color` of the anchor tag to red during its hover state:
|
||||
Por exemplo, o estilo de um link pode ser alterado quando o cursor do mouse está sobre ele usando o seletor de pseudo-classe `:hover`. O código CSS para alterar a propriedade `color` de um link para vermelho quando o mouse está sobre ele é este:
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
@@ -21,17 +21,17 @@ a:hover {
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a CSS rule to style all `a` tags black. Add a rule so that when the user hovers over the `a` tag, the `color` is blue.
|
||||
O editor de código tem uma declaração de estilo CSS que estiliza todas as tags `a` com a cor preta. Adicione uma declaração de estilo para que, quando o usuário passar o mouse sobre a tag `a`, a propriedade `color` mude para azul.
|
||||
|
||||
# --hints--
|
||||
|
||||
The anchor tag `color` should remain black, only add CSS rules for the `:hover` state.
|
||||
A propriedade `color` do link deve permanecer preta. A cor do texto deve mudar apenas no estado `:hover`.
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
The anchor tag should have a `color` of blue on hover.
|
||||
O link deve ter a propriedade `color` de valor azul ao passar o mouse sobre ele.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: Adjust the Hue of a Color
|
||||
title: Ajustar a tonalidade de uma cor
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
forumTopicId: 301036
|
||||
@@ -9,55 +9,55 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` property as an alternative way to pick a color by directly stating these characteristics.
|
||||
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.
|
||||
|
||||
**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
|
||||
**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.
|
||||
|
||||
**Saturation** is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.
|
||||
**Saturação** é a quantidade de cinza em uma cor. Uma cor totalmente saturada não contém cinza e uma cor minimamente saturada é quase totalmente cinza. Essa característica é definida usando porcentagem, onde 100% é totalmente saturado.
|
||||
|
||||
**Lightness** is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.
|
||||
**Luminosidade** é a quantidade de branco ou preto em uma cor. Um valor válido, em porcentagem, varia de 0% (preto) a 100% (branco), onde 50% é a cor normal.
|
||||
|
||||
Here are a few examples of using `hsl()` with fully-saturated, normal lightness colors:
|
||||
Aqui estão alguns exemplos de uso do `hsl()` com cores totalmente saturadas e luminosidade normal:
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>red</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>yellow</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>green</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cyan</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blue</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
<table class='table table-striped'><thead><tr><th>Cor</th><th>HSL</th></tr></thead><tbody><tr><td>vermelho</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>amarelo</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>verde</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>ciano</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>azul</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Change the `background-color` of each `div` element based on the class names (`green`, `cyan`, or `blue`) using `hsl()`. All three should have full saturation and normal lightness.
|
||||
Altere a propriedade `background-color` de cada elemento `div` com base nos nomes das classes (`green`, `cyan` ou `blue`) usando `hsl()`. Todos as três devem estar totalmente saturadas e ter luminosidade normal.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `green`.
|
||||
Você deve usar a função `hsl()` para declarar a cor `green` (verde).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `cyan`.
|
||||
Você deve usar a função `hsl()` para declarar a cor `cyan` (ciano).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
Your code should use the `hsl()` property to declare the color `blue`.
|
||||
Você deve usar a função `hsl()` para declarar a cor `blue` (blue).
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
The `div` element with class `green` should have a `background-color` of green.
|
||||
O elemento `div` com a classe `green` deve ter apropriedade `background-color` com o valor green (verde).
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
The `div` element with class `cyan` should have a `background-color` of cyan.
|
||||
O elemento `div` com a classe `cyan` deve ter apropriedade `background-color` com o valor cyan (ciano).
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
The `div` element with class `blue` should have a `background-color` of blue.
|
||||
O elemento `div` com a classe `blue` deve ter apropriedade `background-color` com o valor blue (azul).
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: Adjust the Size of a Header Versus a Paragraph Tag
|
||||
title: Contrastar o tamanho de um título com o de um parágrafo
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
forumTopicId: 301037
|
||||
@@ -9,15 +9,15 @@ dashedName: adjust-the-size-of-a-header-versus-a-paragraph-tag
|
||||
|
||||
# --description--
|
||||
|
||||
The font size of header tags (`h1` through `h6`) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the `font-size` property to adjust the size of the text in an element.
|
||||
O tamanho da tipografia das tags de títulos (`h1` a `h6`) geralmente deve ser maior do que o tamanho da tipografia das tags de parágrafo. Isso torna mais fácil para o usuário entender visualmente o layout e o nível de importância de tudo na página. Você pode usar a propriedade `font-size` para ajustar o tamanho do texto de um elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To make the heading significantly larger than the paragraph, change the `font-size` of the `h4` tag to 27 pixels.
|
||||
Para tornar o título significativamente maior do que o parágrafo, altere a propriedade `font-size` da tag `h4` para 27 pixels.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should add a `font-size` property to the `h4` element set to 27 pixels.
|
||||
Adicione ao elemento `h4` a propriedade `font-size` com o valor de 27 pixels.
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: Adjust the Tone of a Color
|
||||
title: Ajustar o tom de uma cor
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
forumTopicId: 301038
|
||||
@@ -9,15 +9,15 @@ dashedName: adjust-the-tone-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
The `hsl()` option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of `hsl()` stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
|
||||
A função `hsl()` no CSS também facilita o ajuste do tom de uma cor. A mistura de branco com uma tonalidade pura cria uma cor igual à cor que foi misturada com o branco e a adição de preto cria uma tonalidade mais escura. Como alternativa, um tom é produzido adicionando cinza ou matizando e sombreando. Lembre-se de que o 's' e 'l' de `hsl()` representam saturação e luminosidade, respectivamente. A porcentagem de saturação altera a quantidade de cinza e a porcentagem de luminosidade determina quanto de branco ou preto há na cor. Isso é útil quando você tem uma tonalidade básica de que gosta, mas precisa de diferentes variações.
|
||||
|
||||
# --instructions--
|
||||
|
||||
All elements have a default `background-color` of `transparent`. Our `nav` element currently appears to have a `cyan` background, because the element behind it has a `background-color` set to `cyan`. Add a `background-color` to the `nav` element so it uses the same `cyan` hue, but has `80%` saturation and `25%` lightness values to change its tone and shade.
|
||||
Todos os elementos, por padrão, têm a propriedade `background-color` com o valor de `transparent`. O elemento `nav` atualmente parece ter um fundo `cyan`, porque o elemento por trás dele tem uma propriedade `background-color` definida com o valor `cyan`. Adicione a propriedade `background-color` ao elemento `nav` para que este elemento tenha a cor `cyan`, mas com saturação de `80%` e luminosidade de `25%` para alterar seu tom e sombreamento.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `nav` element should have a `background-color` of the adjusted cyan tone using the `hsl()` property.
|
||||
O elemento `nav` deve ter a propriedade `background-color` de tom ciano usando a função `hsl()`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: Adjust the Width of an Element Using the width Property
|
||||
title: Ajustar a largura de um elemento usando a propriedade width
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
forumTopicId: 301039
|
||||
@@ -9,7 +9,7 @@ dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
|
||||
# --description--
|
||||
|
||||
You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as `em`), absolute length units (such as `px`), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
|
||||
Você pode especificar a largura de um elemento usando a propriedade `width` no CSS. Os valores podem ser fornecidos em unidades de comprimento relativo (como `em`), unidades de comprimento absoluto (como `px`) ou como uma porcentagem do elemento pai que o contém. Aqui está um exemplo que altera a largura de uma imagem para 220px:
|
||||
|
||||
```css
|
||||
img {
|
||||
@@ -19,11 +19,11 @@ img {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `width` property to the entire card and set it to an absolute value of 245px. Use the `fullCard` class to select the element.
|
||||
Adicione a propriedade `width` com um valor absoluto de 245px ao cartão. Use a classe `fullCard` para selecionar o elemento.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should change the `width` property of the card to 245 pixels by using the `fullCard` class selector.
|
||||
Na classe `fullCard`, defina a propriedade `width` com um valor de 245 pixels.
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: Animate Elements at Variable Rates
|
||||
title: Animar elementos em diferentes momentos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
forumTopicId: 301040
|
||||
@@ -9,17 +9,17 @@ dashedName: animate-elements-at-variable-rates
|
||||
|
||||
# --description--
|
||||
|
||||
There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules.
|
||||
Existem várias maneiras de alterar o momento de uma animação de um elemento. Até agora, isso foi realizado aplicando a propriedade `animation-iteration-count` e definindo regras `@keyframes`.
|
||||
|
||||
To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates.
|
||||
Para ilustrar, a animação à direita consiste em duas estrelas, cada uma diminuindo em tamanho e opacidade na marca de 20% na regra `@keyframes`. Você pode alterar a regra `@keyframes` em um dos elementos para que as estrelas cintilem em momentos diferentes.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Alter the animation rate for the element with the class name of `star-1` by changing its `@keyframes` rule to 50%.
|
||||
Altere o momento da animação do elemento que possui a classe `star-1` trocando a regra `@keyframes` para 50%.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `@keyframes` rule for the `star-1` class should be 50%.
|
||||
A regra `@keyframes` para a classe `star-1` deve ter o valor de 50%.
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: Animate Elements Continually Using an Infinite Animation Count
|
||||
title: Animar elementos infinitamente
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
forumTopicId: 301041
|
||||
@@ -9,21 +9,21 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
|
||||
# --description--
|
||||
|
||||
The previous challenges covered how to use some of the animation properties and the `@keyframes` rule. Another animation property is the `animation-iteration-count`, which allows you to control how many times you would like to loop through the animation. Here's an example:
|
||||
Os desafios anteriores cobriram como usar algumas das propriedades de animação e a regra `@keyframes`. Outra propriedade da animação é `animation-iteration-count`, que permite controlar quantas vezes você gostaria de repetir a animação. Um exemplo:
|
||||
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`.
|
||||
Neste caso, a animação irá parar depois de repetir 3 vezes, mas é possível fazer a animação rodar infinitamente definindo esse valor para `infinite`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To keep the ball bouncing on the right on a continuous loop, change the `animation-iteration-count` property to `infinite`.
|
||||
Para manter a bola quicando à direita em um loop contínuo, altere a propriedade `animation-iteration-count` para `infinite`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animation-iteration-count` property should have a value of `infinite`.
|
||||
A propriedade `animation-iteration-count` deve ter um valor de `infinite`.
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: Animate Multiple Elements at Variable Rates
|
||||
title: Animar múltiplos elementos em diferentes momentos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
forumTopicId: 301042
|
||||
@@ -9,29 +9,29 @@ dashedName: animate-multiple-elements-at-variable-rates
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements.
|
||||
No desafio anterior, você mudou o momento da animação de dois elementos com a mesma animação ao alterar a regra `@keyframes`. Você pode alcançar o mesmo resultado manipulando a propriedade `animation-duration` de vários elementos.
|
||||
|
||||
In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element.
|
||||
Na animação sendo executada no editor de código, há três estrelas no céu que cintilam ao mesmo instante infinitamente. Para fazê-las brilhar com ritmos diferentes, você pode definir a propriedade `animation-duration` com valores diferentes para cada elemento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Set the `animation-duration` of the elements with the classes `star-1`, `star-2`, and `star-3` to 1s, 0.9s, and 1.1s, respectively.
|
||||
Defina a propriedade `animation-duration` dos elementos com as classes `star-1`, `star-2`, e `star-3` para 1s, 0.9s, e 1.1s, respectivamente.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `animation-duration` property for the star with class `star-1` should remain at 1s.
|
||||
O valor da propriedade `animation-duration` da estrela com a classe `star-1` deve permanecer em 1s.
|
||||
|
||||
```js
|
||||
assert($('.star-1').css('animation-duration') == '1s');
|
||||
```
|
||||
|
||||
The `animation-duration` property for the star with class `star-2` should be 0.9s.
|
||||
O valor da propriedade `animation-duration` da estrela com a classe `star-2` deve ser 0.9s.
|
||||
|
||||
```js
|
||||
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
```
|
||||
|
||||
The `animation-duration` property for the star with class `star-3` should be 1.1s.
|
||||
O valor da propriedade `animation-duration` da estrela com a classe `star-3` deve ser 1.1s.
|
||||
|
||||
```js
|
||||
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: Center an Element Horizontally Using the margin Property
|
||||
title: Centralizar um elemento horizontalmente usando a propriedade margin
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
forumTopicId: 301043
|
||||
@@ -9,17 +9,17 @@ dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
|
||||
# --description--
|
||||
|
||||
Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto.
|
||||
Outra técnica de posicionamento é centralizar um elemento de bloco horizontalmente. Uma maneira de fazer isso é definir a propriedade `margin` para o valor "auto".
|
||||
|
||||
This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to `block`.
|
||||
Esse método também funciona para imagens. Imagens são elementos inline por padrão, mas podem ser alterados para elementos de bloco caso você defina o valor da propriedade `display` para `block`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Center the `div` on the page by adding a `margin` property with a value of `auto`.
|
||||
Centralize a `div` na página adicionando a propriedade `margin` com o valor `auto`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `div` should have a `margin` set to `auto`.
|
||||
Esta `div` deve conter a propriedade `margin` definida com o valor `auto`.
|
||||
|
||||
```js
|
||||
assert(code.match(/margin:\s*?auto;/g));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08808
|
||||
title: Specify How Fonts Should Degrade
|
||||
title: O que fazer quando uma tipografia não estiver disponível
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cpVKBfQ'
|
||||
forumTopicId: 18304
|
||||
@@ -9,11 +9,11 @@ dashedName: specify-how-fonts-should-degrade
|
||||
|
||||
# --description--
|
||||
|
||||
There are several default fonts that are available in all browsers. These generic font families include `monospace`, `serif` and `sans-serif`.
|
||||
Por padrão, existem várias tipografias disponíveis em todos os navegadores. As tipografias padrão são: `monospace`, `serif` e `sans-serif`.
|
||||
|
||||
When one font isn't available, you can tell the browser to "degrade" to another font.
|
||||
Quando uma tipografia não estiver disponível, você pode dizer ao navegador para usar outra tipografia.
|
||||
|
||||
For example, if you wanted an element to use the `Helvetica` font, but degrade to the `sans-serif` font when `Helvetica` isn't available, you will specify it as follows:
|
||||
Por exemplo, se um elemento usa a tipografia `Helvetica`, mas você quer que ele use `sans-serif` quando a `Helvetica` não estiver disponível, você pode fazer assim:
|
||||
|
||||
```css
|
||||
p {
|
||||
@@ -21,19 +21,19 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
|
||||
O nome dessas tipografias não diferenciam maiúsculas de minúsculas. Além disso, eles não precisam de aspas porque são palavras-chave do CSS.
|
||||
|
||||
# --instructions--
|
||||
|
||||
To begin, apply the `monospace` font to the `h2` element, so that it now has two fonts - `Lobster` and `monospace`.
|
||||
Para começar, aplique a tipografia `monospace` ao elemento `h2`, fazendo com que o elemento tenha duas tipografias - `Lobster` e `monospace`.
|
||||
|
||||
In the last challenge, you imported the `Lobster` font using the `link` tag. Now comment out that import of the `Lobster` font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your `h2` element degrades to the `monospace` font.
|
||||
No desafio anterior, você importou a tipografia `Lobster` usando a tag `link`. Comente a importação da tipografia `Lobster` (usando os comentários HTML que você aprendeu antes) do Google Fonts para que ela não esteja mais disponível. Note como o elemento `h2` muda para a tipografia `monospace`.
|
||||
|
||||
**Note:** If you have the `Lobster` font installed on your computer, you won't see the degradation because your browser is able to find the font.
|
||||
**Observação:** se você tiver a tipografia `Lobster` instalada em seu computador, não verá a mudança porque seu navegador é capaz de encontrá-la.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your h2 element should use the font `Lobster`.
|
||||
O elemento h2 deve usar a tipografia `Lobster`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your h2 element should degrade to the font `monospace` when `Lobster` is not available.
|
||||
O elemento h2 deve mudar para a tipografia `monospace` quando `Lobster` não estiver disponível.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -53,13 +53,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
You should comment out your call to Google for the `Lobster` font by putting `<!--` in front of it.
|
||||
Você deve comentar a importação da tipografia `Lobster` usando `<!--`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('<!--[^fc]', 'gi').test(code));
|
||||
```
|
||||
|
||||
You should close your comment by adding `-->`.
|
||||
Você deve fechar o comentário usando `-->`.
|
||||
|
||||
```js
|
||||
assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
@@ -141,9 +141,9 @@ assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@@ -158,7 +158,7 @@ assert(new RegExp('[^fc]-->', 'gi').test(code));
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aefe08806
|
||||
title: Style Multiple Elements with a CSS Class
|
||||
title: Estilizar vários elementos com apenas uma classe CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkVbsQ'
|
||||
forumTopicId: 18311
|
||||
@@ -9,29 +9,29 @@ dashedName: style-multiple-elements-with-a-css-class
|
||||
|
||||
# --description--
|
||||
|
||||
Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your `red-text` class to the first `p` element.
|
||||
As classes permitem que você use os mesmos estilos CSS em diferentes elementos HTML. Você pode ver isso aplicando a classe `red-text` ao primeiro elemento `p`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should be red.
|
||||
O elemento `h2` deve ser vermelho.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `red-text`.
|
||||
O elemento `h2` deve ter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Your first `p` element should be red.
|
||||
O primeiro elemento `p` deve ser vermelho.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your second and third `p` elements should not be red.
|
||||
O segundo e terceiro elementos `p` não devem ser vermelhos.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,7 +40,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your first `p` element should have the class `red-text`.
|
||||
O primeiro elemento `p` deve ter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('p:eq(0)').hasClass('red-text'));
|
||||
@@ -102,9 +102,9 @@ assert($('p:eq(0)').hasClass('red-text'));
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@@ -119,7 +119,7 @@ assert($('p:eq(0)').hasClass('red-text'));
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08736
|
||||
title: Style the HTML Body Element
|
||||
title: Estilizar o elemento HTML body
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB77PHW'
|
||||
forumTopicId: 18313
|
||||
@@ -9,15 +9,15 @@ dashedName: style-the-html-body-element
|
||||
|
||||
# --description--
|
||||
|
||||
Now let's start fresh and talk about CSS inheritance.
|
||||
Vamos começar do início e falar sobre o conceito de herança dentro do CSS.
|
||||
|
||||
Every HTML page has a `body` element.
|
||||
Toda página HTML possui um elemento `body`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
We can prove that the `body` element exists here by giving it a `background-color` of black.
|
||||
Podemos provar que o elemento `body` existe aqui definindo a propriedade `background-color` com o valor black (preto).
|
||||
|
||||
We can do this by adding the following to our `style` element:
|
||||
Para fazer isso, adicione ao elemento `style` o seguinte código:
|
||||
|
||||
```css
|
||||
body {
|
||||
@@ -27,13 +27,13 @@ body {
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` element should have the `background-color` of black.
|
||||
O elemento `body` deve ter a propriedade `background-color` com o valor de preto (black).
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
Your CSS rule should be properly formatted with both opening and closing curly brackets.
|
||||
O código CSS deve ser formatado corretamente, contendo chaves de abertura e fechamento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -41,7 +41,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your CSS rule should end with a semi-colon.
|
||||
A declaração do estilo CSS deve terminar com um ponto e vírgula.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad82fee1322bd9aedf08721
|
||||
title: Understand Absolute versus Relative Units
|
||||
title: Diferenças entre unidades absolutas e relativas
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
forumTopicId: 301089
|
||||
@@ -9,21 +9,21 @@ dashedName: understand-absolute-versus-relative-units
|
||||
|
||||
# --description--
|
||||
|
||||
The last several challenges all set an element's margin or padding with pixels (`px`). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to `px`, CSS has a number of different length unit options that you can use.
|
||||
Todos os últimos desafios definiram a margem ou preenchimento de um elemento usando pixels (`px`). Pixels são um tipo de unidade de comprimento, que informa ao navegador como dimensionar ou espaçar um item. Além do `px`, o CSS possui outras opções de unidades de comprimento que você pode usar.
|
||||
|
||||
The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, `in` and `mm` refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.
|
||||
Os dois principais tipos de unidades de comprimento são: absoluto e relativo. As unidades absolutas estão vinculadas às unidades físicas de comprimento. Por exemplo, `in` e `mm` referem-se a polegadas e milímetros, respectivamente. As unidades de comprimento absoluto aproximam-se da medida real em uma tela, mas existem algumas diferenças dependendo da resolução da tela.
|
||||
|
||||
Relative units, such as `em` or `rem`, are relative to another length value. For example, `em` is based on the size of an element's font. If you use it to set the `font-size` property itself, it's relative to the parent's `font-size`.
|
||||
Unidades relativas, como `em` ou `rem`, são relativas a outro valor de comprimento. Por exemplo, `em` é baseado no tamanho da tipografia de um elemento. Se você usá-la para definir o valor da propriedade `font-size`, esse valor será relativo a propriedade `font-size` do elemento pai.
|
||||
|
||||
**Note:** There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.
|
||||
**Observação:** existem diversas unidades do tipo relativo que são vinculadas ao tamanho da janela do navegador (viewport). Elas serão abordadas na seção Princípios de Web Design Responsivo.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `padding` property to the element with class `red-box` and set it to `1.5em`.
|
||||
No elemento que possui a classe `red-box`, adicione a propriedade `padding` com o valor `1.5em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `red-box` class should have a `padding` property.
|
||||
A classe `red-box` deve ter a propriedade `padding`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Your `red-box` class should give elements 1.5em of `padding`.
|
||||
A classe `red-box` deve dar aos elementos 1.5em de `padding`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08806
|
||||
title: Use a CSS Class to Style an Element
|
||||
title: Usar uma classe para definir o estilo de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MvDtV'
|
||||
forumTopicId: 18337
|
||||
@@ -9,9 +9,9 @@ dashedName: use-a-css-class-to-style-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Classes are reusable styles that can be added to HTML elements.
|
||||
As classes são declarações de estilos que podem ser reutilizadas em elementos HTML.
|
||||
|
||||
Here's an example CSS class declaration:
|
||||
Aqui está um exemplo de como criar uma classe CSS:
|
||||
|
||||
```html
|
||||
<style>
|
||||
@@ -21,35 +21,35 @@ Here's an example CSS class declaration:
|
||||
</style>
|
||||
```
|
||||
|
||||
You can see that we've created a CSS class called `blue-text` within the `<style>` tag. You can apply a class to an HTML element like this: `<h2 class="blue-text">CatPhotoApp</h2>`. Note that in your CSS `style` element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.
|
||||
Você pode ver que criamos uma classe CSS chamada `blue-text` dentro da tag `<style>`. Você pode aplicar uma classe a um elemento HTML da seguinte forma: `<h2 class="blue-text">CatPhotoApp</h2>`. Observe que no elemento `style` o nome da classe começa com um ponto. Já no atributo de classe do elemento HTML, o nome da classe não inclui o ponto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Inside your `style` element, change the `h2` selector to `.red-text` and update the color's value from `blue` to `red`.
|
||||
Dentro do elemento `style`, altere o seletor `h2` para `.red-text` e atualize o valor da cor de `blue` para `red`.
|
||||
|
||||
Give your `h2` element the `class` attribute with a value of `red-text`.
|
||||
Dê ao elemento `h2` o atributo `class` com o valor de `red-text`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h2` element should be red.
|
||||
O elemento `h2` deve ser vermelho.
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Your `h2` element should have the class `red-text`.
|
||||
O elemento `h2` deve ter a classe `red-text`.
|
||||
|
||||
```js
|
||||
assert($('h2').hasClass('red-text'));
|
||||
```
|
||||
|
||||
Your stylesheet should declare a `red-text` class and have its color set to `red`.
|
||||
No código CSS, declare uma classe `red-text` e defina a cor como `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
|
||||
```
|
||||
|
||||
You should not use inline style declarations like `style="color: red"` in your `h2` element.
|
||||
Você não deve usar declarações de estilo inline como, por exemplo, `style="color: red"` no elemento `h2`.
|
||||
|
||||
```js
|
||||
assert($('h2').attr('style') === undefined);
|
||||
@@ -111,9 +111,9 @@ assert($('h2').attr('style') === undefined);
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@@ -128,7 +128,7 @@ assert($('h2').attr('style') === undefined);
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d727a424fe3d0e10cad12
|
||||
title: Use a custom CSS Variable
|
||||
title: Usar variáveis CSS
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM989ck'
|
||||
forumTopicId: 301090
|
||||
@@ -9,21 +9,21 @@ dashedName: use-a-custom-css-variable
|
||||
|
||||
# --description--
|
||||
|
||||
After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.
|
||||
Depois de criar a variável, você pode atribuir o valor dela a outras propriedades CSS, referenciando o nome que você deu a ela.
|
||||
|
||||
```css
|
||||
background: var(--penguin-skin);
|
||||
```
|
||||
|
||||
This will change the background of whatever element you are targeting to gray because that is the value of the `--penguin-skin` variable. Note that styles will not be applied unless the variable names are an exact match.
|
||||
O código acima mudará o fundo de qualquer elemento para cinza, porque esse é o valor da variável `--penguin-skin`. Tenha em mente que os estilos não serão aplicados a menos que o nome da variável que está sendo chamada seja igual ao nome da variável declarada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Apply the `--penguin-skin` variable to the `background` property of the `penguin-top`, `penguin-bottom`, `right-hand` and `left-hand` classes.
|
||||
Aplique a variável `--penguin-skin` à propriedade `background` das classes `penguin-top`, `penguin-bottom`, `right-hand` e `left-hand`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `penguin-top`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `penguin-bottom`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -43,7 +43,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `right-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class.
|
||||
A variável `--penguin-skin` deve ser aplicada à propriedade `background` da classe `left-hand`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d72ad424fe3d0e10cad16
|
||||
title: Use a media query to change a variable
|
||||
title: Usar media queries para mudar o valor de uma variável
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmL8UP'
|
||||
forumTopicId: 301091
|
||||
@@ -9,17 +9,17 @@ dashedName: use-a-media-query-to-change-a-variable
|
||||
|
||||
# --description--
|
||||
|
||||
CSS Variables can simplify the way you use media queries.
|
||||
As variáveis CSS podem simplificar o modo como você usa media queries.
|
||||
|
||||
For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used.
|
||||
Por exemplo, quando sua tela for menor ou maior do que o media query definido, você pode alterar o valor de uma variável e ela aplicará o estilo atribuído a ela onde quer que ela seja usada.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `:root` selector of the `media query`, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action.
|
||||
Dentro da `media query` existe um seletor `:root`. Mude-o de forma que a variável `--penguin-size` seja redefinida e receba o valor de `200px`. Além disso, redefina a variável `--penguin-skin` e atribua a ela o valor `black`. Em seguida, redimensione a tela de visualização para ver a mudança.
|
||||
|
||||
# --hints--
|
||||
|
||||
`:root` should reassign the `--penguin-size` variable to `200px`.
|
||||
`:root` deve reatribuir o valor da variável `--penguin-size` para `200px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`:root` should reassign the `--penguin-skin` variable to `black`.
|
||||
`:root` deve reatribuir o valor da variável `--penguin-skin` para `black`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 58c383d33e2e3259241f3076
|
||||
title: Use Attribute Selectors to Style Elements
|
||||
title: Usar seletores de atributo para estilizar elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpymfJ'
|
||||
forumTopicId: 301092
|
||||
@@ -9,11 +9,11 @@ dashedName: use-attribute-selectors-to-style-elements
|
||||
|
||||
# --description--
|
||||
|
||||
You have been adding `id` or `class` attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.
|
||||
Você tem adicionado atributos de `id` ou `class` aos elementos que você deseja especificamente estilizar. Eles são conhecidos como ID e seletores de classe. Existem outros seletores CSS que você pode usar para selecionar grupos de elementos para estilizar.
|
||||
|
||||
Let's bring out CatPhotoApp again to practice using CSS Selectors.
|
||||
Vamos usar o CatPhotoApp novamente para praticar o uso de seletores CSS.
|
||||
|
||||
For this challenge, you will use the `[attr=value]` attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute `type` and a corresponding value of `radio`:
|
||||
Para este desafio, você usará o seletor de atributo `[attr=value]` para estilizar as caixas de seleção (checkboxes) no CatPhotoApp. Este seletor busca e estiliza elementos que possuam um atributo e valor específico. Por exemplo, o código abaixo altera as margens de todos os elementos com o atributo `type` que possua o valor `radio`:
|
||||
|
||||
```css
|
||||
[type='radio'] {
|
||||
@@ -23,11 +23,11 @@ For this challenge, you will use the `[attr=value]` attribute selector to style
|
||||
|
||||
# --instructions--
|
||||
|
||||
Using the `type` attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px.
|
||||
Selecione todo elemento que possua o atributo `type` e tente dar às caixas de seleção no CatPhotoApp uma margem superior de 10px e uma margem inferior de 15px.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `type` attribute selector should be used to select the checkboxes.
|
||||
Você deve selecionar as caixas de seleção (checkboxes) usando o seletor de atributo do tipo `type`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -37,7 +37,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The top margins of the checkboxes should be 10px.
|
||||
As margens superiores das caixas de seleção devem ter 10px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The bottom margins of the checkboxes should be 15px.
|
||||
As margens inferiores das caixas de seleção devem ter 15px.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -179,9 +179,9 @@ assert(
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
@@ -196,7 +196,7 @@ assert(
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9afdf08726
|
||||
title: Use Clockwise Notation to Specify the Margin of an Element
|
||||
title: Usar a notação no sentido horário para especificar a margem de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpybAd'
|
||||
forumTopicId: 18345
|
||||
@@ -9,47 +9,47 @@ dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Let's try this again, but with `margin` this time.
|
||||
Vamos tentar de novo, mas com `margin` desta vez.
|
||||
|
||||
Instead of specifying an element's `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties individually, you can specify them all in one line, like this:
|
||||
Em vez de especificar as propriedades `margin-top`, `margin-right`, `margin-bottom`, e `margin-left` individualmente, você pode especificá-las todas em uma linha, como esta:
|
||||
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
|
||||
Esses quatro valores funcionam como em um relógio: acima, à direita, abaixo, à esquerda. Eles produzirão exatamente o mesmo resultado como quando usamos as propriedades específicas para cada margem.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Clockwise Notation to give the element with the `blue-box` class a margin of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
Use a notação no sentido horário para dar ao elemento com a classe `blue-box` uma margem de `40px` nos lados superior e esquerdo, mas apenas `20px` nos lados inferior e direito.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give the top of elements `40px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) superior de `40px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-top') === '40px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the right of elements `20px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) à direita de `20px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-right') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the bottom of elements `20px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) inferior de `20px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-bottom') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the left of elements `40px` of `margin`.
|
||||
A classe `blue-box` deve dar aos elementos uma margem (`margin`) à esquerda de `40px`.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('margin-left') === '40px');
|
||||
```
|
||||
|
||||
You should use the clockwise notation to set the margin of `blue-box` class.
|
||||
Você deve usar a notação no sentido horário para definir a margem da classe `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08826
|
||||
title: Use Clockwise Notation to Specify the Padding of an Element
|
||||
title: Usar a notação de sentido horário para especificar o preenchimento (padding) de um elemento
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cB7mBS9'
|
||||
forumTopicId: 18346
|
||||
@@ -9,45 +9,45 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Instead of specifying an element's `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties individually, you can specify them all in one line, like this:
|
||||
Em vez de especificar as propriedades `padding-top`, `padding-right`, `padding-bottom` e `padding-left` individualmente, você pode especificar todas elas em uma única linha, assim:
|
||||
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
|
||||
Esses quatro valores funcionam como em um relógio: acima, à direita, abaixo, à esquerda. Eles produzirão exatamente o mesmo resultado como quando usamos as propriedades específicas para cada preenchimento.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
|
||||
Use a notação no sentido horário para dar à classe `.blue-box` um preenchimento (`padding`) de `40px` nos lados superior e esquerdo, mas apenas `20px` nos lados inferior e direito.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `blue-box` class should give the top of elements `40px` of `padding`.
|
||||
A classe `blue-box` deve dar `40px` de preenchimento (`padding`) no lado superior dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-top') === '40px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the right of elements `20px` of `padding`.
|
||||
A classe `blue-box` deve dar `20px` de preenchimento (`padding`) no lado direito dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-right') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the bottom of elements `20px` of `padding`.
|
||||
A classe `blue-box` deve dar `20px` de preenchimento (`padding`) no lado inferior dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-bottom') === '20px');
|
||||
```
|
||||
|
||||
Your `blue-box` class should give the left of elements `40px` of `padding`.
|
||||
A classe `blue-box` deve dar `40px` de preenchimento (`padding`) no lado esquerdo dos elementos.
|
||||
|
||||
```js
|
||||
assert($('.blue-box').css('padding-left') === '40px');
|
||||
```
|
||||
|
||||
You should use the clockwise notation to set the padding of `blue-box` class.
|
||||
Você deve usar a notação no sentido horário para definir o padding dos elementos da classe `blue-box`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a9d725e424fe3d0e10cad10
|
||||
title: Use CSS Variables to change several elements at once
|
||||
title: Usar variáveis CSS para alterar vários elementos de uma só vez
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bDECm'
|
||||
forumTopicId: 301093
|
||||
@@ -9,17 +9,17 @@ dashedName: use-css-variables-to-change-several-elements-at-once
|
||||
|
||||
# --description--
|
||||
|
||||
<dfn>CSS Variables</dfn> are a powerful way to change many CSS style properties at once by changing only one value.
|
||||
As <dfn>variáveis CSS</dfn> são uma maneira poderosa de alterar várias propriedades no CSS ao mesmo tempo alterando apenas um valor.
|
||||
|
||||
Follow the instructions below to see how changing just three values can change the styling of many elements.
|
||||
Siga as instruções abaixo para ver como a alteração de apenas três valores podem alterar o estilo de muitos elementos.
|
||||
|
||||
# --instructions--
|
||||
|
||||
In the `penguin` class, change the `black` value to `gray`, the `gray` value to `white`, and the `yellow` value to `orange`.
|
||||
Na classe `penguin`, altere o valor `black` para `gray`, o valor `gray` para `white` e o valor `yellow` para `orange`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
|
||||
A classe `penguin` deve declarar a variável `--penguin-skin` e atribuí-la ao valor `gray`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class should declare the `--penguin-belly` variable and assign it to `white`.
|
||||
A classe `penguin` deve declarar a variável `--penguin-belly` e atribuí-la ao valor `white`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`penguin` class should declare the `--penguin-beak` variable and assign it to `orange`.
|
||||
A classe `penguin` deve declarar a variável `--penguin-beak` e atribuí-la ao valor `orange`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08721
|
||||
title: Use Hex Code to Mix Colors
|
||||
title: Usar código hexadecimal para misturar cores
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cK89PhP'
|
||||
forumTopicId: 18359
|
||||
@@ -9,67 +9,67 @@ dashedName: use-hex-code-to-mix-colors
|
||||
|
||||
# --description--
|
||||
|
||||
To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.
|
||||
Para revisar, os códigos hexadecimais usam 6 dígitos hexadecimais para representar as cores, dois para cada componente vermelho (R), verde (G) e azul (B).
|
||||
|
||||
From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!
|
||||
A partir dessas três cores puras (vermelho, verde e azul), podemos variar as quantidades de cada uma para criar mais de 16 milhões de outras cores!
|
||||
|
||||
For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being `#FFA500`.
|
||||
Por exemplo, laranja é vermelho puro, misturado com um pouco de verde e sem azul. Em código hexadecimal, essa cor se traduz em `#FFA500`.
|
||||
|
||||
The digit `0` is the lowest number in hex code, and represents a complete absence of color.
|
||||
O dígito `0` é o número mais baixo em código hexadecimal e representa uma ausência completa de cor.
|
||||
|
||||
The digit `F` is the highest number in hex code, and represents the maximum possible brightness.
|
||||
O dígito `F` é o número mais alto em código hexadecimal e representa o brilho máximo possível.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Replace the color words in our `style` element with their correct hex codes.
|
||||
Substitua as palavras que representam cores no elemento `style` por seus códigos hexadecimais corretos.
|
||||
|
||||
<table class='table table-striped'><tbody><tr><th>Color</th><th>Hex Code</th></tr><tr><td>Dodger Blue</td><td><code>#1E90FF</code></td></tr><tr><td>Green</td><td><code>#00FF00</code></td></tr><tr><td>Orange</td><td><code>#FFA500</code></td></tr><tr><td>Red</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
<table class='table table-striped'><tbody><tr><th>Cor</th><th>Código hexadecimal</th></tr><tr><td>Azul dodger</td><td><code>#1E90FF</code></td></tr><tr><td>Verde</td><td><code>#00FF00</code></td></tr><tr><td>Laranja</td><td><code>#FFA500</code></td></tr><tr><td>Vermelho</td><td><code>#FF0000</code></td></tr></tbody></table>
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element with the text `I am red!` should be given the `color` red.
|
||||
O elemento `h1` com o texto `I am red!` deve receber a propriedade `color` com um valor de vermelho.
|
||||
|
||||
```js
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color red should be used instead of the word `red`.
|
||||
O código hexadecimal (`hex code`) para a cor vermelha deve ser usado em vez da palavra `red`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am green!` should be given the `color` green.
|
||||
O elemento `h1` com o texto `I am green!` deve receber a propriedade `color` com um valor de verde.
|
||||
|
||||
```js
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color green should be used instead of the word `green`.
|
||||
O código hexadecimal (`hex code`) para a cor verde deve ser usado em vez da palavra `green`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue.
|
||||
O elemento `h1` com o texto `I am dodger blue!` deve receber a propriedade `color` com um valor de azul dodger.
|
||||
|
||||
```js
|
||||
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
|
||||
```
|
||||
|
||||
The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`.
|
||||
O código hexadecimal (`hex code`) para a cor azul dodger deve ser usado em vez da palavra `dodgerblue`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
|
||||
```
|
||||
|
||||
Your `h1` element with the text `I am orange!` should be given the `color` orange.
|
||||
O elemento `h1` com o texto `I am orange!` deve receber a propriedade `color` com um valor de laranja.
|
||||
|
||||
```js
|
||||
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
The `hex code` for the color orange should be used instead of the word `orange`.
|
||||
O código hexadecimal (`hex code`) para a cor laranja deve ser usado em vez da palavra `orange`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08718
|
||||
title: Use RGB values to Color Elements
|
||||
title: Usar valores RGB para colorir elementos
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cRkp2fr'
|
||||
forumTopicId: 18369
|
||||
@@ -9,25 +9,25 @@ dashedName: use-rgb-values-to-color-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Another way you can represent colors in CSS is by using `RGB` values.
|
||||
Outra maneira de representar cores em CSS é usando valores `RGB`.
|
||||
|
||||
The `RGB` value for black looks like this:
|
||||
O valor `RGB` para cor preta é assim:
|
||||
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
The `RGB` value for white looks like this:
|
||||
O valor `RGB` para cor branca é assim:
|
||||
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
Instead of using six hexadecimal digits like you do with hex code, with `RGB` you specify the brightness of each color with a number between 0 and 255.
|
||||
Em vez de usar seis dígitos hexadecimais como você usa com código hexadecimal com `RGB`, você especifica o brilho de cada cor com um número entre 0 e 255.
|
||||
|
||||
If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So `RGB`, which starts counting from zero, has the exact same number of possible values as hex code.
|
||||
Se fizer as contas, os dois dígitos para uma cor são iguais a 16 vezes 16, o que nos dá um total de 256 valores. Então, `RGB`, que começa a contar de zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.
|
||||
|
||||
Here's an example of how you'd change the `body` background to orange using its RGB code.
|
||||
Aqui está um exemplo de como você alteraria o fundo da `body` para laranja usando código RGB.
|
||||
|
||||
```css
|
||||
body {
|
||||
@@ -37,17 +37,17 @@ body {
|
||||
|
||||
# --instructions--
|
||||
|
||||
Let's replace the hex code in our `body` element's background color with the RGB value for black: `rgb(0, 0, 0)`
|
||||
Vamos substituir o código hexadecimal na cor de fundo do elemento `body` pelo valor RGB de preto: `rgb(0, 0, 0)`
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `body` element should have a black background.
|
||||
O elemento `body` deve ter um fundo preto.
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
You should use `rgb` to give your `body` element a background of black.
|
||||
Você deve usar `rgb` para dar ao elemento `body` um fundo preto.
|
||||
|
||||
```js
|
||||
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
|
||||
|
||||
Reference in New Issue
Block a user