diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 2a5a417532..4df29778cf 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -56,7 +56,7 @@ "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).", "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.", "Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"." - ], + ] "type": "waypoint" }, { @@ -104,7 +104,7 @@ "Este elemento indica ao navegador a forma de mostrar o texto que contém.", "Os elementos h2 são ligeiramente menores que os elementos h1. Há também os elementos h3, h4, h5 e h6.", "Adicione uma tag h2 que diga \"CatPhotoApp\" para criar um segundo elemento HTML abaixo de seu elemento h1 chamado \"Hello World\"." - ], + ] "type": "waypoint" }, { @@ -144,7 +144,7 @@ "Você pode criar um elemento p assim:", "<p>Sou uma tag p!</p>", "Crie um elemento p abaixo de seu elemento h2, e dê a ele o texto \"Hello Paragraph\"." - ], + ] "type": "waypoint" }, { @@ -192,7 +192,7 @@ "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.", "Você pode iniciar um comentário com <!-- e terminar seu comentário com -->.", "Remova o comentário dos elementos h1, h2 e p." - ], + ] "type": "waypoint" }, { @@ -236,7 +236,7 @@ "Lembre-se que para iniciar um comentário você precisa utilizar <!--, e para terminar um comentário é necessário usar -->.", "Aqui, você deverá terminar o comentário antes que seu elemento h2 inicie.", "Comente o elemento h1 e o elemento p, e deixe o elemento h2 sem nenhum comentário." - ], + ] "type": "waypoint" }, { @@ -280,7 +280,7 @@ "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.", "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado Kitty Ipsum.", "Substitua o texto dentro do seu elemento p pelas primeiras palavras deste texto Kitty Ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." - ], + ] "type": "waypoint" }, { @@ -321,7 +321,7 @@ "Nosso celular não possui muito espaço vertical.", "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.", "Apague o elemento h1 para simplificar o nosso espaço." - ], + ] "type": "waypoint" }, { @@ -367,7 +367,7 @@ "Você pode mudar a cor do texto de seu elemento h2 para azul assim:", "<h2 style=\"color: blue\">CatPhotoApp</h2>", "Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha." - ], + ] "type": "waypoint" }, { @@ -432,7 +432,7 @@ "</style>", "Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.", "Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul." - ], + ] "type": "waypoint" }, { @@ -509,7 +509,7 @@ "Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.", "Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.", "Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2." - ], + ] "type": "waypoint" }, { @@ -568,7 +568,7 @@ "Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:", "<h2 class=\"blue-text\">CatPhotoApp<h2>", "Adicione a classe red-text aos seus elementos h2 e p." - ], + ] "type": "waypoint" }, { @@ -623,7 +623,7 @@ "}", "Crie um segundo elemento p que tenha o seguinte texto Kitty Ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", "Dentro da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)." - ], + ] "type": "waypoint" }, { @@ -678,7 +678,7 @@ "  font-family: Sans-serif;", "}", "Faça com que todos os elementos p utilizem o estilo de fonte Monospace." - ], + ] "type": "waypoint" }, { @@ -739,7 +739,7 @@ "Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Agora, estableça Lobster como o valor para font-family em seu elemento h2." - ], + ] "type": "waypoint" }, { @@ -808,7 +808,7 @@ "  font-family: Helvetica, Sans-Serif;", "}", "Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace." - ], + ] "type": "waypoint" }, { @@ -873,7 +873,7 @@ "Observe que na maior parte dos casos, os elementos img são de fechamento automático.", "Agora, tente fazer isso com essa imagem:", "https://bit.ly/fcc-relaxing-cat" - ], + ] "type": "waypoint" }, { @@ -942,7 +942,7 @@ "  }", "</style>", "Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura." - ], + ] "type": "waypoint" }, { @@ -1027,7 +1027,7 @@ "Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.", "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:", "<img class=\"clase1 clase2\">" - ], + ] "type": "waypoint" }, { @@ -1103,7 +1103,7 @@ "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.", "Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.", "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image." - ], + ] "type": "waypoint" }, { @@ -1168,7 +1168,7 @@ "descriptionPtBR": [ "Assim como pixels, você também pode usar o border-radius com porcentagens.", "Dê para a sua foto de gato um border-radius de 50%." - ], + ] "type": "waypoint" }, { @@ -1247,7 +1247,7 @@ "Veja um exemplo:", "<p>Aqui está um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", "Crie um elemento a que esteja ligado ao site http://freecatphotoapp.com e tenha como texto de âncora \"fotos de gatos\"." - ], + ] "type": "waypoint" }, { @@ -1332,7 +1332,7 @@ "<p>Este é um <a href=\"http://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>", "Aninhamento significa ter um elemento no interior de outro elemento.", "Agora, aninhe o elemento a existente dentro de um novo elemento p de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum." - ], + ] "type": "waypoint" }, { @@ -1402,7 +1402,7 @@ "As vezes você pode querer adicionar elementos a em sua página web antes de saber o link que as ligará.", "Isso também é útil quando você desejar mudar o comportamento de um link utilizando jQuery, o que vamos aprender mais adiante.", "Substitua o atributo href de seu elemento a por um #, também conhecido como símbolo de hash ou hashtag. Isso o transformará em um link inativo." - ], + ] "type": "waypoint" }, { @@ -1480,7 +1480,7 @@ "Aninhe sua imagem dentro de um elemento a. Temos aqui um exemplo.", "<a href=\"#\"><img src=\"http://bit.ly/fcc-running-cats\"/></a>", "Lembre de usar # como atributo href de seu elemento a para tornar o link inativo." - ], + ] "type": "waypoint" }, { @@ -1557,7 +1557,7 @@ "Você pode adicionar um atributo alt já no elemento img assim:", "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">", "Adicione um atributo alt com o texto A cute orange cat lying on its back para a nossa foto com o gato." - ], + ] "type": "waypoint" }, { @@ -1645,7 +1645,7 @@ "</ul>", "Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".", "Apague os dois últimos elementos p e no final da página crie uma lista não ordenada com três coisas que os gatos adoram." - ], + ] "type": "waypoint" }, { @@ -1741,7 +1741,7 @@ "</ol>", "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".", "Crie uma lista ordenada com as três coisas que os gatos mais odeiam." - ], + ] "type": "waypoint" }, { @@ -1829,7 +1829,7 @@ "<input type=\"text\">", "Note que os elementos input são de fechamento automático.", "Crie um elemento input de tipo text abaixo de suas listas." - ], + ] "type": "waypoint" }, { @@ -1913,7 +1913,7 @@ "Você pode criar um texto indicativo assim:", "<input type=\"text\" placeholder=\"isso é um texto indicativo\">", "Estabeleça o valor do texto indicativo do seu campo de texto como \"cat photo URL\"." - ], + ] "type": "waypoint" }, { @@ -2086,7 +2086,7 @@ "Aqui está um exemplo de um botão de enviar:", "<button type=\" submit\">este botão enviará o formulário</button>", "Adicione um botão de enviar ao seu elemento form com o tipo submit e com o texto \"Submit\"." - ], + ] "type": "waypoint" }, { @@ -2173,7 +2173,7 @@ "Por exemplo, se você quiser tornar obrigatório um campo de texto, basta adicionar a palavra required dentro de seu elemento input assim: <input type=\"text\" required>", "Faça com que seu campo de texto seja obrigatório, de forma que o usuário não possa enviar o formulário sem ter completado esse campo.", "Após isso, tente enviar o formulário sem digitar nenhum texto no campo. Percebe como seu formulário HTML5 mostra que o campo é obrigatório?" - ], + ] "type": "waypoint" }, { @@ -2276,7 +2276,7 @@ "Temos aqui um exemplo de um botão de seleção/rádio:", "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", "Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção indoor enquanto o outro deve ter a opção outdoor." - ], + ] "type": "waypoint" }, { @@ -2376,7 +2376,7 @@ "Veja aqui um exemplo de uma caixa de verificação:", "<label><input type=\"checkbox\" name=\"personality\"> Carinhoso</label>", "Adicione ao seu formulário um conjunto de três caixas de verificação. Cada uma delas deve estar aninhada dentro de seu próprio elemento label. As três devem compartilhar o atributo name." - ], + ] "type": "waypoint" }, { @@ -2568,7 +2568,7 @@ "Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag div com <div> e fechá-la em outra linha com </div>.", "Tente colocar sua tag de abertura div acima do elemento p \"Things cat love\", e sua tag de fechamento de div depois da tag de fechamento do ol, para que cada uma de suas listas esteja dentro de um div.", "Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento div." - ], + ] "type": "waypoint" }, { @@ -2861,7 +2861,7 @@ "}", "Note que dentro de seu elemento style, você deve sempre referenciar uma classe colocando um . logo antes de seu nome. Já com uma id, você deve referenciar colocando um # antes de seu nome.", "Dê ao seu formulário, que agora possui o atributo code>id em cat-photo-form, um fundo verde." - ], + ] }, { "id": "bad88fee1348bd9aedf08825", @@ -2941,7 +2941,7 @@ "Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (padding) que o quadro verde.", "Quando você aumenta o preenchimento da caixa verde, a distância entre o texto padding e a borda ao seu redor também será maior.", "Mude o preenchimento (padding) da caixa verde para que coincida com a de seu quadrado vermelho." - ], + ] "type": "waypoint" }, { @@ -3012,10 +3012,10 @@ "namePtBR": "Ajuste a Margem de um Elemento", "descriptionPtBR": [ "A margem (margin) de um elemento controla a quantidade de espaço entre a borda (border) e os elementos ao seu redor.", - "Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor." + "Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.", "Quando você aumenta a margem (margin) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.", "Mude a margem (margin) da caixa verde para que coincida com a margem da caixa vermelha." - ], + ] "type": "waypoint" }, { @@ -3161,7 +3161,7 @@ "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (padding) diferente em cada um de seus lados.", "O CSS permite controlar o preenchimento (padding) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades padding-top, padding-right, padding-bottom e padding-left.", "Dê para a caixa verde um preenchimento (padding) de 40px nas partes superior e esquerda, e de apenas 20px em suas partes inferior e direita." - ], + ] "type": "waypoint" }, { @@ -3231,9 +3231,9 @@ "namePtBR": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento", "descriptionPtBR": [ "Talvez você queira personalizar um elemento para que possua uma margem (margin) diferente em cada um de seus lados.", - "O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades margin-top, margin-right, margin-bottom e margin-left. ", + "O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades margin-top, margin-right, margin-bottom e margin-left.", "Dê para a caixa verde uma margem (margin) de 40px nas partes superior e esquerda, e de apenas 20px nas partes inferior e direita." - ], + ] "type": "waypoint" }, { @@ -3306,7 +3306,7 @@ "padding: 10px 20px 10px 20px;", "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.", "Use a notação em sentido horário para dar para a classe \".green-box\" um preenchimento de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." - ], + ] "type": "waypoint" }, { @@ -3382,7 +3382,7 @@ "margin: 10px 20px 10px 20px;", "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.", "Use a notação em sentido horário para dar para a classe \".green-box\" uma margem de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." - ], + ] "type": "waypoint" }, { @@ -3425,7 +3425,7 @@ "body {", "  background-color: black;", "}" - ], + ] }, { "id": "bad87fee1348bd9aedf08746", @@ -3471,7 +3471,7 @@ "Em primeiro lugar, crie um elemento h1 com o texto Hello World", "Depois, dê a todos os elementos de sua página uma cor verde (green) adicionando color: green; na declaração de estilo de seu elemento body.", "Por último, dê ao seu elemento body o tipo de fonte Monospace adicionando font-family: Monospace; na declaração de estilo de seu elemento body." - ], + ] }, { "id": "bad87fee1348bd9aedf08756", @@ -3571,7 +3571,7 @@ "class=\"class1 class2\"", "Nota: A ordem em que as classes são listadas em HTML não tem importância.", "Contudo, a ordem de declarações de classe no <style> é importante. A segunda declaração sempre terá precedência pela primeira. Já que .blue-text é declarado depois, ele irá sobrepor os atributos de .pink-text." - ], + ] }, { "id": "bad87fee1348bd8aedf06756", @@ -3637,7 +3637,7 @@ "  color: brown;", "}", "Nota: Não importa se você declara este CSS acima ou abaixo da classe de texto cor de rosa, já que atributos id sempre terão prioridade." - ], + ] }, { "id": "bad87fee1348bd9aedf06756", @@ -3692,7 +3692,7 @@ "Use um estilo inline para tentar fazer com que nosso elemento h1 tenha a cor branca. Relembre que estilos inline são assim:", "<h1 style=\"color: green\">", "Deixe as classes blue-text e pink-text em seu elemento h1." - ], + ] }, { "id": "bad87fee1348bd9aedf07756", @@ -3754,7 +3754,7 @@ "Vamos adicionar nossa palavra-clave !important para sua declaração de cor de pink-text para que possamos estar 100% seguros que seu elemento h1 será sempre cor de rosa.", "Um exemplo para fazer isso é:", "color: red !important;" - ], + ] }, { "id": "bad87fee1348bd9aedf08726", @@ -3791,7 +3791,7 @@ "O sistema Decimal nos permite representar quantidades numéricas com os dígitos de zero a nove - assim como nós os utilizamos durante o nosso dia a dia. Já o sistema Hexadecimal inclui estes 10 dígitos e também as letras A, B, C, D, E e F. Isso significa que o Hexadecimal possui um total de 16 dígitos possíveis, ao invés dos 10 possíveis que podemos usar com nosso sistema numérico normal de base 10.", "No CSS, utilizamos 6 dígitos hexadecimais para representar as cores. Por exemplo, #000000 é o valor mais baixo possível, e representa a cor preta.", "Substitua a palavra black na cor de fundo (background-color) de nosso elemento body pela sua representação hexadecimal #000000." - ], + ] }, { "id": "bad87fee1348bd9aedf08725", @@ -3825,7 +3825,7 @@ "0 é o dígito mais baixo em código hexadecimal, e representa a completa ausência de cor.", "F é o dígito mais alto em código hexadecimal, e representa o máximo de claridade possível.", "Vamos fazer com que a cor de fundo (background-color) em nosso elemento body seja branca, mudando seu código hexadecimal para #FFFFFF." - ], + ] }, { "id": "bad87fee1348bd9aedf08724", @@ -3865,7 +3865,7 @@ "Os códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", "Sendo assim, para conseguir um vermelho brilhante, basta que você use F (o dígito mais alto possível) para o primeiro e o segundo dígitos, e 0 (o dígito mais baixo possível) para o terceiro, quarto, quinto e sexto dígito.", "Faça com que a cor de fundo (background-color) do elemento body seja vermelho, ao dar o código hexadecimal #FF0000." - ], + ] }, { "id": "bad87fee1348bd9aedf08723", @@ -3933,7 +3933,7 @@ "Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", "Para conseguir o azul mais brilhante, utilizamos F (o dígito mais alto possível) no quinto e no sexto dígito, e 0 (o dígito mais baixo possível) para todos os outros dígitos.", "Faça com que a cor de fundo (background-color) do elemento body seja azul usando o código hexadecimal #0000FF." - ], + ] }, { "id": "bad87fee1348bd9aedf08721", @@ -4001,7 +4001,7 @@ "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", "Também podemos criar tons de cinza diferentes ao misturar essas três cores.", "Faça com que a cor de fundo do elemento body seja cinza, usando o código hexadecimal #808080." - ], + ] }, { "id": "bad87fee1348bd9aedf08720", @@ -4069,7 +4069,7 @@ "Por exemplo, o vermelho que é #FF0000 em código hexadecimal pode ser abreviado a #F00. Isso quer dizer que podemos usar um dígito para vermelho, um dígito para verde e um dígito para azul.", "Fazer isso reduz o número total de possíveis cores para ao redor de 4.000. Apesar disso, os navegadores interpretarão #FF0000 e #F00 exatamente como a mesma cor.", "Continue, tente usar #F00 para fazer com que a cor de fundo do elemento body seja vermelha." - ], + ] }, { "id": "bad87fee1348bd9aede08718", @@ -4118,7 +4118,7 @@ "Ao invés de utilizar 6 dígitos hexadecimais, com rgb você especifica o brilho de cada cor com um número entre 0 e 255.", "Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o rgb, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.", "Vamos substituir o código hexadecimal da cor de fundo do nosso elemento body pelo valor RGB para preto: rgb(0, 0, 0)." - ], + ] }, { "id": "bad88fee1348bd9aedf08726", @@ -4161,7 +4161,7 @@ "rgb(255, 255, 255)", "Ao invés de utilizar 6 dígitos hexadecimais, com rgb você especifica o brilho de cada cor com um número entre 0 e 255.", "Substitua o código hexadecimal da cor de fundo do nosso elemento body que possui o valor RGB para preto, pelo valor rgb para branco: rgb(255, 255, 255)." - ], + ] }, { "id": "bad89fee1348bd9aedf08724", @@ -4195,7 +4195,7 @@ "Da mesma forma que com códigos em hexadecimal, você pode representar cores diferentes em RGB através do uso de combinações com diferentes valores.", "Esses valores seguem o padrão de RGB: O primeiro número representa vermelho, o segundo representa verde, e o terceiro representa azul.", "Mude a cor de fundo do elemento body para vermelho usando seu valor RGB: rgb(255, 0, 0)." - ], + ] }, { "id": "bad80fee1348bd9aedf08723", @@ -4223,7 +4223,7 @@ "namePtBR": "Use Valores RBG para Dar a Cor Verde a Elementos", "descriptionPtBR": [ "Agora, mude a cor de fundo do elemento body para verde usando seu valor RGB: rgb (0, 255, 0)." - ], + ] }, { "id": "bad81fee1348bd9aedf08722", @@ -4278,11 +4278,11 @@ "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", "Cambia el color de fondo del elemento body a anaranjado usando su valor RGB: rgb(255, 165, 0)" ], - "namePtBR": "Use Valores RBG Misturar Cores", + "namePtBR": "Use Valores RBG para Misturar Cores", "descriptionPtBR": [ "Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.", "Mude a cor de fundo do elemento body para alaranjado usando seu valor RGB: rgb(255, 165, 0)." - ], + ] } ] }