6002 lines
327 KiB
JSON
6002 lines
327 KiB
JSON
{
|
||
"name": "Basic CSS",
|
||
"order": 1,
|
||
"time": "5 hours",
|
||
"helpRoom": "Help",
|
||
"challenges": [
|
||
{
|
||
"id": "bad87fee1348bd9aedf08803",
|
||
"title": "Change the Color of Text",
|
||
"description": [
|
||
"Now let's change the color of some of our text.",
|
||
"We can do this by changing the <code>style</code> of your <code>h2</code> element.",
|
||
"The property that is responsible for the color of an element's text is the <code>color</code> style property.",
|
||
"Here's how you would set your <code>h2</code> element's text color to blue:",
|
||
"<code><h2 style=\"color: blue;\">CatPhotoApp</h2></code>",
|
||
"Note that it is a good practice to end inline <code>style</code> declarations with a <code>;</code> .",
|
||
"<hr>",
|
||
"Change your <code>h2</code> element's style so that its text color is red."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h2</code> element should be red.",
|
||
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
|
||
},
|
||
{
|
||
"text": "Your <code>style</code> declaration should end with a <code>;</code> .",
|
||
"testString": "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),' Your <code>style</code> declaration should end with a <code>;</code> .');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Lass uns jetzt die Farbe von unserem Text ändern.",
|
||
"Wir können das bewerkstelligen, indem wir den <code>style</code> des <code>h2</code> Elements ändern.",
|
||
"Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.",
|
||
"So könntest du die Textfarbe des <code>h2</code> Elements in Blau ändern:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"<hr>",
|
||
"Ändere den Style des <code>h2</code> Elements, damit die Textfarbe rot (\"red\") ist."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Changer la couleur du texte",
|
||
"description": [
|
||
"Changeons maintenant la couleur de quelques-uns de nos textes.",
|
||
"Nous pouvons le faire en changeant le <code>style</code> de votre élément <code>h2</code>.",
|
||
"Le style responsable de la couleur de texte d'un élément est \"color\".",
|
||
"Voici comment changer en bleu la couleur du texte de votre élément <code>h2</code> :",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"<hr>",
|
||
"Changez le style de votre élément <code>h2</code> pour que son texte soit de couleur rouge."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Substitua a Cor do Texto",
|
||
"description": [
|
||
"Agora vamos substituir a cor de parte do nosso texto.",
|
||
"Podemos fazer isso mudando o <code>style</code> do elemento <code>h2</code>.",
|
||
"A propriedade de estilo responsável pela cor do texto se chama \"color\".",
|
||
"Você pode mudar a cor do texto de seu elemento <code>h2</code> para azul assim:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"<hr>",
|
||
"Mude o estilo do elemento <code>h2</code> para que seu texto fique com a cor vermelha."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Измените цвет текста",
|
||
"description": [
|
||
"Теперь давайте изменим цвет части нашего текста.",
|
||
"Мы можем сделать это изменив <code>style</code> нашего элемента <code>h2</code>.",
|
||
"Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".",
|
||
"Вот как вы могли бы установить цвет текста вашего элемента <code>h2</code> синим:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"<hr>",
|
||
"Измените стиль вашего элемента <code>h2</code> таким образом, чтобы текст элемента стал красным."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<h2>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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08805",
|
||
"title": "Use CSS Selectors to Style Elements",
|
||
"description": [
|
||
"With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
|
||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
|
||
"That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.",
|
||
"At the top of your code, create a <code>style</code> block like this:",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"Inside that style block, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.",
|
||
"<hr>",
|
||
"Delete your <code>h2</code> element's style attribute, and instead create a CSS <code>style</code> block. Add the necessary CSS to turn all <code>h2</code> elements blue."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Remove the style attribute from your <code>h2</code> element.",
|
||
"testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.');"
|
||
},
|
||
{
|
||
"text": "Create a <code>style</code> element.",
|
||
"testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h2</code> element should be blue.",
|
||
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.');"
|
||
},
|
||
{
|
||
"text": "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.",
|
||
"testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');"
|
||
},
|
||
{
|
||
"text": "Make sure all your <code>style</code> elements are valid and have a closing tag.",
|
||
"testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"CSS liefert dir hunderte Attribute oder <code>properties</code> um HTML Elemente auf deiner Seite zu gestalten.",
|
||
"Mit <code><h2 style=\"color: red\">CatPhotoApp</h2></code> hast du dem einzelnen <code>h2</code> Element einen sogenannten <code>inline style</code> gegeben.",
|
||
"Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser <code>CSS</code>, was für <code>Cascading Style Sheets</code> steht, zu benutzen.",
|
||
"Erstelle über deinem Code ein <code>style</code> Element:",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"Innerhalb des Style Elements kannst du einen <code>CSS selector</code> für alle <code>h2</code> Elemente erstellen. Wenn du zum Beispiel alle <code>h2</code> Elemente rot färben willst, schreibst du:",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Beachte, dass du öffnende und schließende geschwungene Klammern (<code>{</code> und <code>}</code>) um jeden Style setzen musst. Außerdem musst du sichergehen, dass deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon.",
|
||
"<hr>",
|
||
"Lösche das Style Attribute deines <code>h2</code> Elements und erstelle stattdessen ein CSS <code>style</code> Element. Füge das notwendige CSS hinzu, um alle <code>h2</code> Elemente Blau zu färben."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Utiliser les sélecteurs CSS pour styliser des éléments",
|
||
"description": [
|
||
"Avec CSS, il y a des centaines de <code>propriétés</code> que vous pouvez utliser pour changer l'apparence d'un élément dans votre page.",
|
||
"Quand vous avez entré <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, vous donniez à cet élément <code>h2</code> uniquement, un style <code>inline</code>.",
|
||
"C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser <code>CSS</code>, acronyme de <code>Cascading Style Sheets</code>.",
|
||
"Au sommet de votre code, créez un élément <code>style</code> comme ceci :",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"À l'intérieur de cet élément style, vous pouvez créer des <code>sélecteurs CSS</code> pour tous les éléments <code>h2</code>. Par exemple, si vous voulez que tous les éléments <code>h2</code> soient en rouge, votre élément style ressemblerait à ceci :",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes (<code>{</code> and <code>}</code>) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.",
|
||
"<hr>",
|
||
"Supprimez les attributs de styles de votre élément <code>h2</code> et créez plutôt un élément de <code>style</code> CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments <code>h2</code> de couleur bleu."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Seletores CSS para Estilizar Elementos",
|
||
"description": [
|
||
"Com o CSS, existem centenas de <code>propriedades</code> que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.",
|
||
"Quando você usou o <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, você deu ao elemento <code>h2</code> um <code>estilo inline</code>.",
|
||
"Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar <code>Folhas de Estilo em Cascata (Cascading Style Sheets, CSS)</code>.",
|
||
"Acima de seu código, crie um elemento <code>style</code> como esse: <code><style></style></code>",
|
||
"Dentro do elemento style, é possível criar um <code>seletor CSS</code> para todos os elementos <code>h2</code>. Por exemplo, se você quiser que todos os elementos <code>h2</code> tenham a cor vermelha, seu elemento style será assim:",
|
||
"<code><style></code>",
|
||
" <code>h2 {color: red;}</code>",
|
||
"<code></style></code>",
|
||
"Observe que é importante utilizar as chaves de abertura e de fechamento (<code>{</code> e <code>}</code>) 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.",
|
||
"<hr>",
|
||
"Apague o atributo <code>style</code> de seu elemento <code>h2</code> e então crie um elemento <code>style</code> CSS. Adicione o CSS necessário para fazer com que todos os elementos <code>h2</code> tenham a cor azul."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте CSS-селекторы для стилизации элементов",
|
||
"description": [
|
||
"В CSS существуют сотни CSS-<code>свойств</code>, которые вы можете использовать для изменения внешнего вида элементов вашей страницы.",
|
||
"Когда вы вводите <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, вы присваиваете определённому <code>h2</code> элементу <code>встроенный стиль</code>.",
|
||
"Это один из способов добавления стиля к элементу, но лучший способ - использование <code>CSS</code>, который является сокращением от <code>Cascading Style Sheets (Каскадные таблицы стилей)</code>.",
|
||
"Вверху вашего кода создайте элемент <code>style</code> следующим образом:",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"Внутри этого элемента <code>style</code> вы можете создать <code>CSS-селектор</code> для всех элементов <code>h2</code> в документе. Например, если бы вы хотели, чтобы все элементы <code>h2</code> были красными, ваш элемент <code>style</code> выглядел бы следующим образом:",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок (<code>{</code> и <code>}</code>) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента <code>style</code>. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.",
|
||
"<hr>",
|
||
"Удалите атрибут стиль вашего элемента <code>h2</code> и взамен создайте CSS-элемент <code>style</code>. Добавьте необходимый CSS, чтобы все элементы <code>h2</code> стали синими."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<h2 style=\"color: red\">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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aecf08806",
|
||
"title": "Use a CSS Class to Style an Element",
|
||
"description": [
|
||
"Classes are reusable styles that can be added to HTML elements.",
|
||
"Here's an example CSS class declaration:",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"You can see that we've created a CSS class called <code>blue-text</code> within the <code><style></code> tag.",
|
||
"You can apply a class to an HTML element like this:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Note that in your CSS <code>style</code> element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.",
|
||
"<hr>",
|
||
"Inside your <code>style</code> element, change the <code>h2</code> selector to <code>.red-text</code> and update the color's value from <code>blue</code> to <code>red</code>.",
|
||
"Give your <code>h2</code> element the <code>class</code> attribute with a value of <code>'red-text'</code>."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h2</code> element should be red.",
|
||
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
|
||
"testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.",
|
||
"testString": "assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'Your stylesheet should declare a <code>red-text</code> class and have its color set to red.');"
|
||
},
|
||
{
|
||
"text": "Do not use inline style declarations like <code>style=\"color: red\"</code> in your <code>h2</code> element.",
|
||
"testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color: red\"</code> in your <code>h2</code> element.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.",
|
||
"So sieht eine CSS Klasse aus:",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"Du siehst, dass wir die CSS Klasse <code>blue-text</code> innerhalb von <code><style></code> geschrieben haben.",
|
||
"Du kannst eine Klasse folgendermaßen einem HTML Element beifügen:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Beachte, dass Klassen in deinem CSS <code>style</code> Element mit einem Punkt beginnen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.",
|
||
"<hr>",
|
||
"Ändere deinen <code>h2</code> Selektor innerhalb deines <code>style</code> Elements zu <code>.red-text</code> und ändere den Farbwert von <code>blue</code> zu <code>red</code>.",
|
||
"Gib deinem <code>h2</code> Element das <code>class</code> Attribut mit dem Wert <code>'red-text'</code>."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Utiliser les classes CSS pour styler un élément",
|
||
"description": [
|
||
"Les classes sont des styles réutilisables qui peuvent être ajoutées à des éléments HTML.",
|
||
"Voici un exemple de déclaration de classe CSS :",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"Remarquez que nous avons créer une classe CSS nommée <code>blue-text</code> à l'intérieur de notre balise <code><style></code>.",
|
||
"Vous pouvez appliquer une classe à un élément HTML comme ceci :",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Prenez note que que dans votre élément CSS <code>style</code>, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.",
|
||
"<hr>",
|
||
"À l'intérieur de votre élément <code>style</code>, changez le sélecteur du <code>h2</code> pour <code>.red-text</code> et changez la couleur, passant de <code>blue</code> à <code>red</code>.",
|
||
"Donnez à votre élément <code>h2</code> l'attribut de classe la valeur de <code>red-text</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Classes CSS para Estilizar Elementos",
|
||
"description": [
|
||
"As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.",
|
||
"Aqui está um exemplo de como declarar uma classe com CSS:",
|
||
"<code><style></code>",
|
||
"<code> .blue-text {</code>",
|
||
"<code> color: blue;</code>",
|
||
"<code> }</code>",
|
||
"<code></style></code>",
|
||
"Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <code><style></code>.",
|
||
"Você pode aplicar uma classe a um elemento HTML assim:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Note que em seu elemento <code>style</code> 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.",
|
||
"<hr>",
|
||
"Ao invés de criar um novo elemento <code>style</code>, tente eliminar a declaração de estilo de <code>h2</code> dos elementos de estilo existentes, e troque ela pela declaração de classe <code>.red-text</code>.",
|
||
"Crie uma classe CSS chamada <code>red-text</code> e então a aplique em seu elemento <code>h2</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте CSS-класс для стилизации элемента",
|
||
"description": [
|
||
"Классы являются повторно применяемыми стилями, которые могут быть добавлены к HTML-элементам.",
|
||
"Вот пример объявления CSS-класса:",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"Вы можете увидеть, что мы создали CSS-класс названный <code>blue-text</code> внутри элемента <code><style></code>.",
|
||
"Вы можете применить класс к HTML-элементу следующим образом:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Обратите внимание, что в вашем CSS-элементе <code>style</code> названию классов следует начинаться с точки. При присваивании классов HTML-элементам названия классов не должны начинаться с точки.",
|
||
"<hr>",
|
||
"Внутри вашего элемента <code>style</code>, замените селектор <code>h2</code> на <code>.red-text</code> и измените значение цвета с <code>blue</code> на <code>red</code>.",
|
||
"Присвойте вашему элементу <code>h2</code> атрибут <code>class</code> со значением <code>'red-text'</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" h2 {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2>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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aefe08806",
|
||
"title": "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 <code>red-text</code> class to the first <code>p</code> element."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h2</code> element should be red.",
|
||
"testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
|
||
"testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your first <code>p</code> element should be red.",
|
||
"testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first <code>p</code> element should be red.');"
|
||
},
|
||
{
|
||
"text": "Your second and third <code>p</code> elements should not be red.",
|
||
"testString": "assert(!($(\"p:eq(1)\").css(\"color\") === \"rgb(255, 0, 0)\") && !($(\"p:eq(2)\").css(\"color\") === \"rgb(255, 0, 0)\"), 'Your second and third <code>p</code> elements should not be red.');"
|
||
},
|
||
{
|
||
"text": "Your first <code>p</code> element should have the class <code>red-text</code>.",
|
||
"testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first <code>p</code> element should have the class <code>red-text</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel <code>class=\"deine-klasse\"</code> innerhalb des öffnenden Tags schreibst.",
|
||
"Vergiss nicht dass CSS Klassenselektoren einen Punkt am Anfang brauchen:",
|
||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||
"Aber Klassen-Deklarationen brauchen keinen Punkt:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"<hr>",
|
||
"Füge die <code>red-text</code> Klasse dem ersten <code>p</code> Element hinzu."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Stylez plusieurs éléments avec une classe CSS",
|
||
"description": [
|
||
"Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant <code>class=\"votre-classe-ici\"</code> à l'intérieur de la balise ouvrante correspondante.",
|
||
"Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :",
|
||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||
"Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"<hr>",
|
||
"Appliquez la classe <code>red-text</code> à votre premier élément <code>p</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Estilize Múltiplos Elementos com uma Classe CSS",
|
||
"description": [
|
||
"Lembre-se que é possível adicionar classes a elementos HTML ao utilizar <code>class=\"sua-classe-aqui\"</code> dentro da tag de abertura do elemento.",
|
||
"Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:",
|
||
"<code>.blue-text {</code>",
|
||
"<code> color: blue;</code>",
|
||
"<code>}</code>",
|
||
"Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp<h2></code>",
|
||
"<hr>",
|
||
"Adicione a classe <code>red-text</code> ao seu primeiro elemento <code>p</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Стилизуйте множество элементов с помощью CSS-класса",
|
||
"description": [
|
||
"Помните, что вы можете присваивать классы HTML-элементам используя <code>class=\"ваш-класс-тут\"</code> внутри открывающей метки соответствующего элемента.",
|
||
"Помните, что селекторы CSS-классов должны начинаться с точки, например:",
|
||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||
"Но также не забывайте, что присваивание классов не использует точку, например:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"<hr>",
|
||
"Примените класс <code>red-text</code> к вашим элемент первые <code>p</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08806",
|
||
"title": "Change the Font Size of an Element",
|
||
"description": [
|
||
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Inside the same <code><style></code> tag that contains your <code>red-text</code> class, create an entry for <code>p</code> elements and set the <code>font-size</code> to 16 pixels (<code>16px</code>)."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.",
|
||
"testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Schriftgröße wird von dem CSS Attribut <code>font-size</code> kontrolliert:",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Erstelle dann innerhalb deines <code><style></code> Elements, das auch deine <code>red-text</code> Klasse enthält, einen Eintrag für <code>p</code> Elemente und setzte <code>font-size</code> auf 16 Pixel (<code>16px</code>)."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Changez la taille de police d'un élément",
|
||
"description": [
|
||
"La taille de police est contrôlée par la propriété CSS <code>font-size</code>, comme ceci :",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"<hr>",
|
||
"À l'intérieur de la même balise <code><style></code> qui contiens votre classe <code>.red-text</code>, créez une nouvelle entrée pour les éléments <code>p</code> et paramétrer le <code>font-size</code> à 16 pixels (<code>16px</code>)."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Mude o Tamanho da Fonte de um Elemento",
|
||
"description": [
|
||
"O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:",
|
||
"<code>h1 {</code>",
|
||
"<code> font-size: 30px;</code>",
|
||
"<code>}</code>",
|
||
"<hr>",
|
||
"Dentro da mesma tag <code><style></code> que criamos para sua classe <code>red-text</code>, modifique o <code>font-size</code> dos elementos <code>p</code> para que tenha um tamanho de 16 pixels (<code>16px</code>)."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Измените размер шрифта элемента",
|
||
"description": [
|
||
"Размером шрифта управляют с помощтю CSS-своайства <code>font-size</code>, например:",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Внутри того же элемента <code><style></code>, который содержит ваш класс <code>red-text</code>, создайте вхождение для элементов <code>p</code> и установите свойство <code>font-size</code> равным 16 пикселей (<code>16px</code>)."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08807",
|
||
"title": "Set the Font Family of an Element",
|
||
"description": [
|
||
"You can set which font an element should use, by using the <code>font-family</code> property.",
|
||
"For example, if you wanted to set your <code>h2</code> element's font to <code>sans-serif</code>, you would use the following CSS:",
|
||
"<blockquote>h2 {<br> font-family: sans-serif;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Make all of your <code>p</code> elements use the <code>monospace</code> font."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>p</code> elements should use the font <code>monospace</code>.",
|
||
"testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>monospace</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Du kannst einem Element mit <code>font-family</code> eine Schriftart zuweisen.",
|
||
"Wenn du zum Beispiel deinem <code>h2</code> Element die Schriftart <code>sans-serif</code> zuweisen willst, kannst du das mit dem folgenden CSS tun:",
|
||
"<blockquote>h2 {<br> font-family: sans-serif;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Definiere für alle <code>p</code> Elemente die Schriftart <code>monospace</code>."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Paramétrer la famille de police d'un élément",
|
||
"description": [
|
||
"Vous pouvez paramétrer la police d'un élément en utilisant la propriété <code>font-family</code>.",
|
||
"Par exemple, si vous voulez paramétrer la police de votre élément <code>h2</code> à <code>sans-serif</code>, vous devez utiliser le CSS suivant :",
|
||
"<blockquote>h2 {<br> font-family: sans-serif;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Faites en sorte que tous vos éléments <code>p</code> aient la police <code>monospace</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Defina a Fonte para um Elemento",
|
||
"description": [
|
||
"Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade <code>font-family</code>.",
|
||
"Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento <code>h2</code> como <code>sans-serif</code>, você poderá utilizar o seguinte código em CSS:",
|
||
"<code>h2 {</code>",
|
||
"<code> font-family: sans-serif;</code>",
|
||
"<code>}</code>",
|
||
"<hr>",
|
||
"Faça com que todos os elementos <code>p</code> utilizem o estilo de fonte <code>monospace</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Установите семейство шрифтов для элемента",
|
||
"description": [
|
||
"Вы можете установить семейство шрифтов для элемента используя свойство <code>font-family</code>.",
|
||
"Например, если бы вы хотели установить семейство шрифтов <code>sans-serif</code> для вашего элемента <code>h2</code>, вы бы использовали следующий CSS:",
|
||
"<blockquote>h2 {<br> font-family: sans-serif;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Присвойте шрифт <code>monospace</code> всем вашим элементам <code>p</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08807",
|
||
"title": "Import a Google Font",
|
||
"description": [
|
||
"In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are various sources for web fonts on the internet but, for this example we will focus on the Google Fonts library.",
|
||
"<a href='https://fonts.google.com/' target='_blank'>Google Fonts</a> is a free library of web fonts that you can use in your CSS by referencing the font's URL.",
|
||
"So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
|
||
"To import a Google Font, you can copy the font(s) URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the <code>Lobster</code> font. To do this, copy the following code snippet and paste it into the top of your code editor(before the opening <code>style</code> element):",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Now you can use the <code>Lobster</code> font in your CSS by using <code>Lobster</code> as the FAMILY_NAME as in the following example:<br><code>font-family: FAMILY_NAME, GENERIC_NAME;</code>.",
|
||
"The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.",
|
||
"Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the <code>\"Open Sans\"</code> font, but not to use the <code>Lobster</code> font.",
|
||
"<hr>",
|
||
"Create a <code>font-family</code> CSS rule that uses the <code>Lobster</code> font, and ensure that it will be applied to your <code>h2</code> element."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Import the <code>Lobster</code> font.",
|
||
"testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the <code>Lobster</code> font.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h2</code> element should use the font <code>Lobster</code>.",
|
||
"testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.');"
|
||
},
|
||
{
|
||
"text": "Use an <code>h2</code> CSS selector to change the font.",
|
||
"testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an <code>h2</code> CSS selector to change the font.');"
|
||
},
|
||
{
|
||
"text": "Your <code>p</code> element should still use the font <code>monospace</code>.",
|
||
"testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>monospace</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Lass uns jetzt eine Google Font importieren und verwenden. (Beachte dass du diese Challenge überspringen musst, falls Google in deinem Land blockiert wird)",
|
||
"Zuerst musst du einen <code>call</code> (Anfrage) an Google machen um um auf <code>Lobster</code> zugreifen und in dein HMTL einbinden zu können.",
|
||
"Kopiere den folgenden Code und füge diesen in deinen Editor oben ein:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem <code>h2</code> Element hinzufügen.",
|
||
"<hr>",
|
||
"Füge dem <code>h2</code> Element die Schriftart oder <code>font-family</code> <code>Lobster</code> hinzu."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Importer une police de Google",
|
||
"description": [
|
||
"Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).",
|
||
"Premièrement, vous devrez faire un <code>appel</code> vers Google pour prendre la police <code>Lobster</code> et la charger dans votre HTML.",
|
||
"Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :",
|
||
"Maintenant vous pouvez paramétrer <code>Lobster</code> comme valeur de police de votre élément <code>h2</code>.",
|
||
"<hr>",
|
||
"Appliquer la valeur <code>Lobster</code> à la <code>font-family</code> de votre élément <code>h2</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Importe uma Fonte a Partir do Google Fonts",
|
||
"description": [
|
||
"Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.",
|
||
"Primeiro, faça um <code>chamado</code> ao Google Fonts para poder utilizar a fonte chamada <code>Lobster</code> e carregá-la em seu HTML.",
|
||
"Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"<hr>",
|
||
"Agora, estableça <code>Lobster</code> como o valor para font-family em seu elemento <code>h2</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Импортируйте шрифт Google",
|
||
"description": [
|
||
"Теперь давайте импортируем и применим шрифт Google (обратите внимание, что если Google заблокирован в ваней стране, вам нужно будет пропустить это испытание).",
|
||
"Сначала вам понадобится сделать <code>запрос</code> к Google для получения шрифта <code>Lobster</code> и загрузить его в ваш HTML.",
|
||
"Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Теперь вы можете установить шрифт <code>Lobster</code> в качестве значения семейства шрифтов для вашего <code>h2</code>.",
|
||
"<hr>",
|
||
"Примените свойство <code>font-family</code> со значением <code>Lobster</code> к вашему элементу <code>h2</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08808",
|
||
"title": "Specify How Fonts Should Degrade",
|
||
"description": [
|
||
"There are several default fonts that are available in all browsers. These generic font families include <code>monospace</code>, <code>serif</code> and <code>sans-serif</code>",
|
||
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
|
||
"For example, if you wanted an element to use the <code>Helvetica</code> font, but degrade to the <code>sans-serif</code> font when <code>Helvetica</code> wasn't available, you will specify it as follows:",
|
||
"<blockquote>p {<br> font-family: Helvetica, sans-serif;<br>}</blockquote>",
|
||
"Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.",
|
||
"<hr>",
|
||
"To begin with, apply the <code>monospace</code> font to the <code>h2</code> element, so that it now has two fonts - <code>Lobster</code> and <code>monospace</code>.",
|
||
"In the last challenge, you imported the <code>Lobster</code> font using the <code>link</code> tag. Now comment out that import of the <code>Lobster</code> font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your <code>h2</code> element degrades to the <code>monospace</code> font.",
|
||
"<strong>Note</strong><br>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."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your h2 element should use the font <code>Lobster</code>.",
|
||
"testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.');"
|
||
},
|
||
{
|
||
"text": "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.",
|
||
"testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?,\\s*monospace\\s*;\\s*\\}/gi.test(code), 'Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.');"
|
||
},
|
||
{
|
||
"text": "Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.",
|
||
"testString": "assert(new RegExp(\"<!--[^fc]\", \"gi\").test(code), 'Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.');"
|
||
},
|
||
{
|
||
"text": "Be sure to close your comment by adding <code>--></code>.",
|
||
"testString": "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), 'Be sure to close your comment by adding <code>--></code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem <code>monospace</code>, <code>serif</code> und <code>sans-serif</code>.",
|
||
"Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.",
|
||
"Wenn du zum Beispiel einem Element die Schriftart <code>Helvetica</code> geben möchtest, aber gleichzeitig als Alertnative die Schrift <code>sans-serif</code> laden willst, falls <code>Helvetica</code> nicht verfügbar ist, kannst du diesen CSS Style verwenden:",
|
||
"<blockquote>p {<br> font-family: Helvetica, sans-serif;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Kommentiere jetzt den Aufruf an Google Fonts aus, sodass <code>Lobster</code> nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart <code>monospace</code> geladen wird."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Spécifier comment vos polices devraient dégrader",
|
||
"description": [
|
||
"Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend <code>monospace</code>, <code>serif</code> et <code>sans-serif</code>.",
|
||
"Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.",
|
||
"Par exemple, si vous voulez qu'un élément utilise la police <code>Helvetica</code>, mais également dégrader vers <code>sans-serif</code> lorsque la police <code>Helvetica</code> n'est pas disponible, vous pouvez utiliser le style CSS suivant :",
|
||
"<blockquote>p {<br> font-family: Helvetica, sans-serif;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Maintenant, commenter votre appel vers les polices de Google, pour que la police <code>Lobster</code> ne soit pas disponible. Regardez comment la police se dégrade vers <code>monospace</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Especifique como as Fontes Devem se Degradar",
|
||
"description": [
|
||
"Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo <code>monospace</code>, <code>serif</code> e <code>sans-serif</code>.",
|
||
"No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.",
|
||
"Por exemplo, se você deseja que um elemento use a fonte <code>Helvetica</code>, e que degrade para a fonte <code>sans-serif</code> quando a <code>Helvetica</code> não estiver disponível, você pode utilizar o seguinte CSS:",
|
||
"<code>p {</code>",
|
||
"<code> font-family: Helvetica, sans-serif;</code>",
|
||
"<code>}</code>",
|
||
"<hr>",
|
||
"Agora, comente o seu chamado para a fonte do Google, para que a fonte <code>Lobster</code> não esteja disponível. Note como a fonte degrada para <code>monospace</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Укажите порядок деградации шрифтов",
|
||
"description": [
|
||
"Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них <code>monospace</code>, <code>serif</code> и <code>sans-serif</code>",
|
||
"Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.",
|
||
"Например, если бы вы хотели, чтобы элемент использовал шрифт <code>Helvetica</code>, но также деградировал до шрифта <code>sans-serif</code>, когда <code>Helvetica</code> недоступен, вы могли бы использовать этот CSS-стиль:",
|
||
"<blockquote>p {<br> font-family: Helvetica, sans-serif;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт <code>Lobster</code> становится недоступен. Обратите внимание как происходит деградация до шрифта <code>monospace</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9acdf08812",
|
||
"title": "Size Your Images",
|
||
"description": [
|
||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
|
||
"<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>img</code> element should have the class <code>smaller-image</code>.",
|
||
"testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
|
||
},
|
||
{
|
||
"text": "Your image should be 100 pixels wide. Browser zoom should be at 100%.",
|
||
"testString": "assert($(\"img\").width() === 100, 'Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Die Breite eines Elements wird mit dem CSS Attribut <code>width</code> kontrolliert. Wie bei Schriftarten verwenden wir Pixel <code>px</code> um die Größe zu definieren.",
|
||
"Wenn wir also die CSS Klasse <code>larger-image</code> erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Erstelle eine Klasse mit dem Namen <code>smaller-image</code> und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
|
||
"<strong>Notiz</strong><br>Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Redimensionner vos images",
|
||
"description": [
|
||
"Le CSS a une propriété nommé <code>width</code> qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons <code>px</code> (pixels) pour déterminer la largeur d'une image.",
|
||
"Par exemple, si nous voulons créer une classe CSS nommée <code>larger-image</code> qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Créez une classe nommée <code>smaller-image</code> et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
|
||
"<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Dê um Tamanho para suas Imagens",
|
||
"description": [
|
||
"O CSS possui uma propriedade chamada <code>width</code>, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar <code>px</code> (pixels) como medida para especificar a largura de nossa imagem.",
|
||
"Por exemplo, se queremos criar uma classe CSS chamada <code>larger-image</code> que dê aos elementos HTML uma largura de 500px, vamos usar:",
|
||
"<code><estilo></code>",
|
||
"<code> .larger-image{</code>",
|
||
"<code> width: 500px;</code>",
|
||
"<code> }</code>",
|
||
"<code></style></code>",
|
||
"<hr>",
|
||
"Crie uma classe chamada <code>smaller-image</code> e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Установите размер ваших изображений",
|
||
"description": [
|
||
"В CSS есть свойтсво, называемое <code>width</code>, которе управляет шириной элемента. По аналогии со шрифтами, мы используем <code>px</code> (пиксели) для указания ширины изображения.",
|
||
"Например, если бы мы хотели создать CSS-класс <code>larger-image</code>, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображений до 100 пикселей в ширину.",
|
||
"<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9bedf08813",
|
||
"title": "Add Borders Around Your Elements",
|
||
"description": [
|
||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
|
||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Create a class called <code>thick-green-border</code>. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.",
|
||
"Remember that you can apply multiple classes to an element using its <code>class</code> attribute, by separating each class name with a space. For example:",
|
||
"<code><img class=\"class1 class2\"></code>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>img</code> element should have the class <code>smaller-image</code>.",
|
||
"testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>img</code> element should have the class <code>thick-green-border</code>.",
|
||
"testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your image a border width of <code>10px</code>.",
|
||
"testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of <code>10px</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your image a border style of <code>solid</code>.",
|
||
"testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.');"
|
||
},
|
||
{
|
||
"text": "The border around your <code>img</code> element should be green.",
|
||
"testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"CSS Rahmen haben Attribute wie <code>style</code>, <code>color</code> und <code>width</code>",
|
||
"Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Erstelle die Klasse <code>thick-green-border</code>, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style <code>solid</code> um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.",
|
||
"Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im <code>class</code> Attribut trennst. Zum Beispiel:",
|
||
"<code><img class=\"class1 class2\"></code>"
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Ajouter des bordures autour de vos éléments",
|
||
"description": [
|
||
"Les bordures CSS ont des propriétés comme <code>style</code>, <code>color</code> et <code>width</code>",
|
||
"Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Créer une classe nommée <code>thick-green-border</code> qui ajoute une bordure verte de 10 pixel avec un style <code>solid</code> autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
|
||
"Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut <code>class</code> de l'élément. Par exemple :",
|
||
"<code><img class=\"class1 class2\"></code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Adicione Bordas ao Redor de seus Elementos",
|
||
"description": [
|
||
"As bordas em CSS possuem propriedades como <code>style</code>, <code>color</code> e <code>width</code>",
|
||
"Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:",
|
||
"<code><style></code>",
|
||
"<code> .thin-red-border {</code>",
|
||
"<code> border-color: red;</code>",
|
||
"<code> border-width: 5px;</code>",
|
||
"<code> border-style: solid;</code>",
|
||
"<code> }</code>",
|
||
"<code></style></code>",
|
||
"<hr>",
|
||
"Crie uma classe chamada <code>thick-green-border</code> que insira uma borda verde de 10 pixels de largura com um estilo <code>solid</code> 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 <code>class</code>. Por exemplo:",
|
||
"<code><img class=\"clase1 clase2\"></code>"
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Дбавьте границы вокруг ваших элементов",
|
||
"description": [
|
||
"CSS-границы имеют свойства: <code>style</code>, <code>color</code> и <code>width</code>",
|
||
"Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"<hr>",
|
||
"Создайте класс <code>thick-green-border</code>, который добавляет зелёную границу шириной в 10 пикселей со стилем <code>solid</code> вокруг HTML-элемента и примените этот класс к вашему фото кота.",
|
||
"Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута <code>class</code>. Например:",
|
||
"<code><img class=\"class1 class2\"></code>"
|
||
]
|
||
}
|
||
},
|
||
"guideUrl": "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements",
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <div>",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08814",
|
||
"title": "Add Rounded Corners with border-radius",
|
||
"description": [
|
||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
|
||
"<hr>",
|
||
"You can specify a <code>border-radius</code> with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.",
|
||
"Note: this challenge allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or the <code>.smaller-image</code> class."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your image element should have the class \"thick-green-border\".",
|
||
"testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".');"
|
||
},
|
||
{
|
||
"text": "Your image should have a border radius of <code>10px</code>",
|
||
"testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Füge abgerundete Ecken mit border-radius hinzu",
|
||
"description": [
|
||
"Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut <code>border-radius</code> abrunden.",
|
||
"<hr>",
|
||
"Du kannst einen <code>border-radius</code> mit Pixeln deklarieren. Gib deinem Katzenfoto einen <code>border-radius</code> von <code>10px</code>.",
|
||
"Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen <code>border-radius</code> zu der <code>.thick-green-border</code> oder <code>.smaller-image</code> Klasse hinzufügen."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Agrega esquinas redondeadas usando border-radius",
|
||
"description": [
|
||
"Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>.",
|
||
"<hr>",
|
||
"Puedes especificar <code>border-radius</code> usando pixeles. Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>.",
|
||
"Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar <code>border-radius</code> ya sea a la clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Insira Bordas Arredondadas com o border-radius",
|
||
"description": [
|
||
"Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado <code>border-radius</code>.",
|
||
"<hr>",
|
||
"Você pode especificar um <code>border-radius</code> com pixels. Adicione um <code>border-radius</code> de <code>10px</code> para a sua foto.",
|
||
"Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o <code>border-radius</code> tanto para a classe <code>.thick-green-border</code> como para a classe <code>.smaller-image</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Добавьте скруглённые углы с помощью радиуса границы",
|
||
"description": [
|
||
"У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство <code>border-radius</code>.",
|
||
"<hr>",
|
||
"Вы можете указать значения <code>border-radius</code> в пикселях. Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>10px</code>.",
|
||
"Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить <code>border-radius</code> как к классу <code>.thick-green-border</code>, так и к классу <code>.smaller-image</code>."
|
||
]
|
||
}
|
||
},
|
||
"guideUrl": "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius",
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08815",
|
||
"title": "Make Circular Images with a border-radius",
|
||
"description": [
|
||
"In addition to pixels, you can also specify the <code>border-radius</code> using a percentage.",
|
||
"<hr>",
|
||
"Give your cat photo a <code>border-radius</code> of <code>50%</code>."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your image should have a border radius of <code>50%</code>, making it perfectly circular.",
|
||
"testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.');"
|
||
},
|
||
{
|
||
"text": "Be sure to use a percentage value of <code>50%</code>.",
|
||
"testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of <code>50%</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erstelle runde Bilder mit einem border-radius",
|
||
"description": [
|
||
"Du kannst einem <code>border-radius</code> neben Pixeln auch Prozentwerte zuweisen.",
|
||
"<hr>",
|
||
"Gib deinem Katzenfoto einen <code>border-radius</code> von <code>50%</code>."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Crea imágenes circulares usando border-radius",
|
||
"description": [
|
||
"Además de pixeles, puedes especificar un <code>border-radius</code> usando porcentajes.",
|
||
"<hr>",
|
||
"Dale a tu foto del gato un <code>border-radius</code> de <code>50%</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Deixe as Imagens Circulares com o border-radius",
|
||
"description": [
|
||
"Assim como pixels, você também pode usar o <code>border-radius</code> com porcentagens.",
|
||
"<hr>",
|
||
"Dê para a sua foto de gato um <code>border-radius</code> de <code>50%</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Сделайте круглые изображения с помощью радиуса границы",
|
||
"description": [
|
||
"В дополнение к пикселям, вы также может использовать проценты для указания значения свойства <code>border-radius</code>.",
|
||
"<hr>",
|
||
"Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>50%</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 10px;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fed1348bd9aede07836",
|
||
"title": "Give a Background Color to a div Element",
|
||
"description": [
|
||
"You can set an element's background color with the <code>background-color</code> property.",
|
||
"For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Create a class called <code>silver-background</code> with the <code>background-color</code> of silver. Assign this class to your <code>div</code> element."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>div</code> element the class <code>silver-background</code>.",
|
||
"testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your <code>div</code> element the class <code>silver-background</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>div</code> element should have a silver background.",
|
||
"testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your <code>div</code> element should have a silver background.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Gib einem div Element eine Hintergrundfarbe",
|
||
"description": [
|
||
"Du kannst die Hintergrundfarbe von einem Element mit dem <code>background-color</code> Attribut setzen",
|
||
"Wenn du zum Beispiel die Hintergrundfarbe von einem Element <code>green</code> machen willst, schreibe dies in dein <code>style</code> Element:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Erstelle eine Klasse namens <code>silver-background</code> mit der <code>background-color</code> grau (silver). Füge diese Klasse deinem <code>div</code> Element hinzu"
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Da un color de fondo a un elemento div",
|
||
"description": [
|
||
"Puedes fijar el color de fondo de un elemento con la propiedad <code>background-color</code>.",
|
||
"Por ejemplo, si quieres que el color de fondo de un elemento sea verde (<code>green</code>), dentro de tu elemento <code>style</code> pondrías:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Crea una clase llamada <code>silver-background</code> con la propiedad <code>background-color</code> en gris (<code>silver</code>). Asigna esta clase a tu elemento <code>div</code> ."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Dê uma Cor de Fundo a um Elemento div",
|
||
"description": [
|
||
"Você pode acrescentar uma cor de fundo de um elemento com a propriedade <code>background-color</code>.",
|
||
"Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (<code>green</code>), dentro de seu elemento <code>style</code> seria assim:",
|
||
"<code>.green-background {</code>",
|
||
"<code> background-color: green;</code>",
|
||
"<code>}</code>",
|
||
"<hr>",
|
||
"Crie uma classe chamada <code>silver-background</code> com a propriedade <code>background-color</code> em cinza (<code>silver</code>). Depois, adicione essa classe ao seu elemento <code>div</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Присвойте цвет фона элементу div",
|
||
"description": [
|
||
"Вы можете установить цвет фона элемента с помощью свойства <code>background-color</code>.",
|
||
"Например, если бы вы хотели установить цвет фона элемента <code>зелёным</code>, вы бы использовали следующий стиль внутри вашего элемента <code>style</code>:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Создайте класс <code>silver-background</code> со значением свойства <code>background-color</code> равным <code>silver</code>. Назначьте этот класс вашему элементу <code>div</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87eee1348bd9aede07836",
|
||
"title": "Set the id of an Element",
|
||
"description": [
|
||
"In addition to classes, each HTML element can also have an <code>id</code> attribute.",
|
||
"There are several benefits to using <code>id</code> attributes: You can use an <code>id</code> to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.",
|
||
"<code>id</code> attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same <code>id</code> attribute.",
|
||
"Here's an example of how you give your <code>h2</code> element the id of <code>cat-photo-app</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"<hr>",
|
||
"Give your <code>form</code> element the id <code>cat-photo-form</code>."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
|
||
"testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Setze die ID von einem Element",
|
||
"description": [
|
||
"Zusätzlich zu Klassen, kann jedes HTML Element auch ein <code>id</code> Attribut haben.",
|
||
"Es hat mehrere Vorteile <code>id</code> Attribute zu verwenden und du wirst mehr über diese erfahren wenn du anfängst mit jQuery zu arbeiten.",
|
||
"<code>id</code> Attribute sollten eindeutig sein. Browser werden das nicht durchsetzen, aber es ist eine weit verbreitete und erprobte Herangehensweise. Also gib bitte nie mehr als einem Element das gleiche <code>id</code> Attribut.",
|
||
"Hier ist ein Beispiel wie du deinem <code>h2</code> Element die Id <code>cat-photo-app</code> gibst:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"<hr>",
|
||
"Gib deinem <code>form</code> Element die Id <code>cat-photo-form</code>."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Establecer el ID de un elemento",
|
||
"description": [
|
||
"Además de las clases, cada elemento HTML también puede tener un atributo de identificación <code>id</code>.",
|
||
"Hay varias ventajas al usar atributos <code>id</code>, y aprenderás más sobre estas cuando comiences a usar jQuery.",
|
||
"Los atributos <code>id</code> deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le des a más de un elemento un mismo atributo <code>id</code>. ",
|
||
"He aquí un ejemplo de cómo le das la identificación <code>cat-photo-app</code> a tu elemento <code>h2</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"<hr>",
|
||
"Dale a tu elemento <code>form</code> la id <code>cat-photo-form</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Estabeleça a ID de um Elemento",
|
||
"description": [
|
||
"Além das classes, cada elemento HTML também pode ter um atributo de identificação chamado <code>id</code>.",
|
||
"Existem várias vantagens ao utilizar atributos <code>id</code>, e você aprenderá mais sobre elas quando começar a utilizar jQuery.",
|
||
"Os atributos <code>id</code> devem ser únicos. Os navegadores não o obrigarão a isso, mas isso é amplamente reconhecido como uma boa prática. Assim, não dê um mesmo atributo <code>id</code> a mais de um elemento.",
|
||
"Veja aqui um exemplo de como dar a id <code>cat-photo-app</code> ao seu elemento code>h2</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"<hr>",
|
||
"Dê ao seu elemento <code>form</code> a id <code>cat-photo-form</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Установите id элемента",
|
||
"description": [
|
||
"В дополнение к классам, каждый HTML-элемент может также иметь атрибут <code>id</code>.",
|
||
"Есть некоторые преимущества использования атрибутов <code>id</code>, вы узнаете о них больше, когда начнёте использовать jQuery.",
|
||
"Атрибутам <code>id</code> следует быть уникальными. Браузеры не принуждают к этому, но широкой общественностью это признано лучшей практикой. Поэтому, пожалуйста, не присваивайте множеству элементов одинаковое значение атрибута <code>id</code>.",
|
||
"Вот пример того, как вы можете присвоить вашему элементу <code>h2</code> значение атрибута <code>id</code> равное <code>cat-photo-app</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"<hr>",
|
||
"Присвойте вашему элементу <code>form</code> атрибут <code>id</code> со значением <code>cat-photo-form</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"",
|
||
" .silver-background {",
|
||
" background-color: silver;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87dee1348bd9aede07836",
|
||
"title": "Use an id Attribute to Style an Element",
|
||
"description": [
|
||
"One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
|
||
"However, an <code>id</code> is not reusable and should only be applied to one element. An <code>id</code> also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the <code>id</code> will be applied.",
|
||
"Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.",
|
||
"<hr>",
|
||
"Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
|
||
"testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>form</code> element should have the <code>background-color</code> of green.",
|
||
"testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the <code>background-color</code> of green.');"
|
||
},
|
||
{
|
||
"text": "Make sure your <code>form</code> element has an <code>id</code> attribute.",
|
||
"testString": "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.');"
|
||
},
|
||
{
|
||
"text": "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.",
|
||
"testString": "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Benutze ein ID Attribute um ein Element zu stylen",
|
||
"description": [
|
||
"Eine coole Eigenschaft von <code>id</code> Attributen ist, dass du sie, genauso wie Klassen, mit CSS stylen kannst.",
|
||
"Hier ist ein Beispiel wie du einem Element mit dem <code>id</code> Attribut <code>cat-photo-element</code> eine grüne Hintergrundfarbe geben kannst. In deinem <code>style</code> Element:",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Beachte, dass du in deinem <code>style</code> Element Klassen immer mit einem <code>.</code> vor deren Namen ansprichst. Ids sprichst du immer mit <code>#</code> vor deren Namen an.",
|
||
"<hr>",
|
||
"Versuche deinem Formular, das jetzt das <code>id</code> Attribut <code>cat-photo-form</code> hat, einen grünen Hintergrund zu geben."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Usa un atributo ID para dar estilo a un elemento",
|
||
"description": [
|
||
"Una cosa buena sobre los atributos <code>id</code> es que, al igual que con clases, puedes darles estilo usando CSS.",
|
||
"He aquí un ejemplo de cómo puedes tomar tu elemento con atributo <code>id</code> de <code>cat-photo-element</code> y ponerle el color de fondo verde. En tu elemento <code>style</code>: ",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Ten en cuenta que dentro de tu elemento <code>style</code>, siempre referencias clases poniendo un <code>.</code> en frente de sus nombres. Y siempre referencias identificaciones poniendo un <code>#</code> frente a sus nombres. ",
|
||
"<hr>",
|
||
"Trata de darle a tu formulario, que ahora tiene el atributo <code>id</code> en <code>cat-photo-form</code>, un fondo verde."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use um Atributo ID para Estilizar um Elemento",
|
||
"description": [
|
||
"Algo interessante sobre os atributos <code>id</code> é que, da mesma forma que com as classes, é possível dar estilos a eles usando CSS.",
|
||
"Aqui está um exemplo de como você pode usar seu elemento com atributo <code>id</code> em <code>cat-photo-element</code> e dar a ele a cor de fundo verde.",
|
||
"<code>#cat-photo-element {</code>",
|
||
"<code> background-color: green;</code>",
|
||
"<code>}</code>",
|
||
"Note que dentro de seu elemento <code>style</code>, você deve sempre referenciar uma classe colocando um <code>.</code> logo antes de seu nome. Já com uma id, você deve referenciar colocando um <code>#</code> antes de seu nome.",
|
||
"<hr>",
|
||
"Dê ao seu formulário, que agora possui o atributo code>id</code> em <code>cat-photo-form</code>, um fundo verde."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте атрибут id для стилизации элемента",
|
||
"description": [
|
||
"Одной из замечательных вещей в отношении атрибута <code>id</code> является то, что, как и с классами, вы можете стилизовать их с помощью CSS.",
|
||
"Вот пример того как вы можете присвоить вашему элементу со значением атрибута <code>id</code> равным <code>cat-photo-element</code> зелёный цвет фона. В вашем элементе <code>style</code>:",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Обратите внимание, что внутри вашего элемента <code>style</code> вы ссылаетесь на классы используя <code>.</code> перед их именами. При этом вы всегда ссылаетесь на идентификаторы вставляя <code>#</code> перед их именами.",
|
||
"<hr>",
|
||
"Попробуйте установить для своей формы, которая теперь имеет атрибут <code>id</code> равный <code>cat-photo-form</code>, зелёный в качестве цвета фона."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"",
|
||
" .silver-background {",
|
||
" background-color: silver;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/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>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad88fee1348bd9aedf08825",
|
||
"title": "Adjust the Padding of an Element",
|
||
"description": [
|
||
"Now let's put our Cat Photo App away for a little while and learn more about styling HTML.",
|
||
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
|
||
"Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
|
||
"An element's <code>padding</code> controls the amount of space between the element's content and its <code>border</code>.",
|
||
"Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the blue box.",
|
||
"When you increase the blue box's <code>padding</code>, it will increase the distance(<code>padding</code>) between the text and the border around it.",
|
||
"<hr>",
|
||
"Change the <code>padding</code> of your blue box to match that of your red box."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Justiere den Innenabstand eines Elements",
|
||
"description": [
|
||
"Lass uns jetzt mal unsere Katzenfoto App kurz beiseite legen um mehr über HTML Styling zu lernen",
|
||
"Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.",
|
||
"Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: <code>padding</code>, <code>margin</code> und <code>border</code>.",
|
||
"<code>padding</code> kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – <code>border</code>",
|
||
"Wir sehen in diesem Beispiel, dass sich die blaue Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>padding</code> hat als die blaue Box.",
|
||
"<hr>",
|
||
"Ändere das <code>padding</code> der blauen Box um es an die rote Box anzugleichen."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Ajusta el relleno de un elemento",
|
||
"description": [
|
||
"Ahora vamos a dejar de lado nuestra aplicación de fotos de gatos por un tiempo, y aprenderemos más sobre dar estilo a HTML",
|
||
"Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.",
|
||
"Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (<code>padding</code>), margen (<code>margin</code>) y borde (<code>border</code>)",
|
||
"El relleno (<code>padding</code>) de un elemento controla la cantidad de espacio entre el elemento y su borde (<code>border</code>).",
|
||
"Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (<code>padding</code>) que el cuadro verde. ",
|
||
"Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto <code>padding</code> y el borde alrededor de este.",
|
||
"<hr>",
|
||
"Cambia el relleno (<code>padding</code>) de la caja verde para que coincida con el de tu cuadro rojo."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Ajuste o Preenchimento de um Elemento",
|
||
"description": [
|
||
"Agora vamos deixar nosso aplicativo de fotos de gatos um pouco de lado, e aprender mais sobre dar estilos em HTML.",
|
||
"Você provavelmente já deve ter notado, mas todos os elementos HTML são, essencialmente, pequenos retângulos.",
|
||
"Três propriedades importantes controlam o espaço ao redor de cada elemento HTML: preenchimento (<code>padding</code>), margem (<code>margin</code>) e borda (<code>border</code>).",
|
||
"O preenchimento (<code>padding</code>) de um elemento controla a quantidade de espaço entre o elemento e sua borda (<code>border</code>).",
|
||
"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 (<code>padding</code>) que o quadro verde.",
|
||
"Quando você aumenta o preenchimento da caixa verde, a distância entre o texto <code>padding</code> e a borda ao seu redor também será maior.",
|
||
"<hr>",
|
||
"Mude o preenchimento (<code>padding</code>) da caixa verde para que coincida com a de seu quadrado vermelho."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Настройка отступа содержимого для элемента",
|
||
"description": [
|
||
"Теперь давайте отложим наше фото кота на некоторое время и изучим стилизацию HTML.",
|
||
"Вы могли уже заметить это, но все HTML-элеметы в приницпе являются небольшими прямоугольниками.",
|
||
"Пространство вокруг каждого HTML-элемента контролируют три важных свойства: <code>padding</code>, <code>margin</code>, <code>border</code>.",
|
||
"Свойство элемента <code>padding</code> управляет размером пространства между элементом и его границей <code>border</code>.",
|
||
"Тут мы можем видеть, что зелёный и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ содержимого <code>padding</code>, чем зелёный прямоугольник.",
|
||
"Когда вы увеличиваете <code>padding</code> зелёного прямоугольника, увеличивается расстояние между границей содержимого и границей самого элемента <code>border</code>.",
|
||
"<hr>",
|
||
"Измените значение свойства <code>padding</code> вашего зелёного прямоугольника, чтобы он был равен соответствующему значению красного прямоугольника."
|
||
]
|
||
}
|
||
},
|
||
"guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element",
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: crimson;",
|
||
" color: #fff;",
|
||
" padding: 20px;",
|
||
" }",
|
||
"",
|
||
" .blue-box {",
|
||
" background-color: blue;",
|
||
" color: #fff;",
|
||
" padding: 10px;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box blue-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08822",
|
||
"title": "Adjust the Margin of an Element",
|
||
"description": [
|
||
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
|
||
"Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger <code>margin</code> than the blue box, making it appear smaller.",
|
||
"When you increase the blue box's <code>margin</code>, it will increase the distance between its border and surrounding elements.",
|
||
"<hr>",
|
||
"Change the <code>margin</code> of the blue box to match that of the red box."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Passe den Außenabstand eines Elements an",
|
||
"description": [
|
||
"<code>margin</code> kontrolliert den Abstand zwischen dem Rahmen - <code>border</code> - eines Elements und den benachbarten Elementen.",
|
||
"In diesem Beispiel sehen wir die blaue und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>margin</code> aufweist als die blaue Box, wodurch sie kleiner wirkt.",
|
||
"Wenn du den Außenabstand – <code>margin</code> – der blauen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.",
|
||
"<hr>",
|
||
"Gleiche den Außenabstand – <code>margin</code> der blauen Box dem der roten Box an."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Ajusta el margen de un elemento",
|
||
"description": [
|
||
"El margen (<code>margin</code>) de un elemento controla la cantidad de espacio entre el borde (<code>border</code>) y los elementos alrededor.",
|
||
"Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (<code>margin</code>) que la caja verde, haciendo que parezca más pequeña. ",
|
||
"Cuando aumentes el margen (<code>margin</code>) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
|
||
"<hr>",
|
||
"Cambia el margen (<code>margin</code>) de la caja verde para que coincida con el de la caja roja."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Ajuste a Margem de um Elemento",
|
||
"description": [
|
||
"A margem (<code>margin</code>) de um elemento controla a quantidade de espaço entre a borda (<code>border</code>) 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.",
|
||
"Quando você aumenta a margem (<code>margin</code>) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.",
|
||
"<hr>",
|
||
"Mude a margem (<code>margin</code>) da caixa verde para que coincida com a margem da caixa vermelha."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Настройка отступа элемента",
|
||
"description": [
|
||
"Значение свойства <code>margin</code> контролирует размер отступа между границей <code>border</code> элемента и его окружением.",
|
||
"Тут мы можем видеть, что зелёный прямоугольник и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ <code>margin</code>, чем зелёный прямоугольник, что делает его визуально меньше.",
|
||
"Когда вы увеличиваете отступ <code>margin</code> зелёного прямоугольника, увеличивается расстояние между его границей и окружающими элементами.",
|
||
"<hr>",
|
||
"Измените значение отступа <code>margin</code> зелёного прямоугольника так, чтобы оно равнялось соответствующему значению красного прямоугольника."
|
||
]
|
||
}
|
||
},
|
||
"guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element",
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: crimson;",
|
||
" color: #fff;",
|
||
" padding: 20px;",
|
||
" margin: 20px;",
|
||
" }",
|
||
"",
|
||
" .blue-box {",
|
||
" background-color: blue;",
|
||
" color: #fff;",
|
||
" padding: 20px;",
|
||
" margin: 10px;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box blue-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08823",
|
||
"title": "Add a Negative Margin to an Element",
|
||
"description": [
|
||
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
|
||
"If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
|
||
"<hr>",
|
||
"Try to set the <code>margin</code> to a negative value like the one for the red box.",
|
||
"Change the <code>margin</code> of the blue box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Füge einem Element negativen Außenabstand hinzu",
|
||
"description": [
|
||
"<code>margin</code> kontrolliert den Abstand zwischen dem Rahmen - <code>border</code> - eines Elements und den benachbarten Elementen.",
|
||
"Wenn du dem Außenabstand - <code>margin</code> - eines Elements einen negativen Wert zuweist, wird das Element größer.",
|
||
"<hr>",
|
||
"Versuche den Außenabstand - <code>margin</code> - auf einen negativen Wert, wie bei der roten Box, zu setzen.",
|
||
"Ändere den Außenabstand – <code>margin</code> – der blauen Box auf <code>-15px</code>, damit sie die gelbe Box horizontal ausfüllt."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Agregar un margen negativo a un elemento",
|
||
"description": [
|
||
"El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.",
|
||
"Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.",
|
||
"<hr>",
|
||
"Trata de establecer el margen (<code>margin</code>) a un valor negativo como el de la caja roja.",
|
||
"Cambia el margen (<code>margin</code>) de la caja verde a <code>-15px</code>, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Adicione uma Margem Negativa a um Elemento",
|
||
"description": [
|
||
"A margem de um elemento controla a quantidade de espaço entre a borda do elemento e os elementos ao seu redor.",
|
||
"Se você estabelece a margem de um elemento com um valor negativo, o elemento ficará maior.",
|
||
"<hr>",
|
||
"Tente estabelecer a margem (<code>margin</code>) a um valor negativo como o da caixa vermelha.",
|
||
"Mude a margem (<code>margin</code>) da caixa verde para <code>-15px</code>, de forma que ocupe toda a largura horizontal da caixa amarela que a rodeia."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Добавьте отрицательный отступ к элементу",
|
||
"description": [
|
||
"Значение свойства <code>margin</code> контролирует размер отступа между границей <code>border</code> элемента и его окружением.",
|
||
"Если вы установите значение свойства <code>margin</code> элемента отрицательным, то элемент будет становиться больше.",
|
||
"<hr>",
|
||
"Попробуйте установить значение свойства <code>margin</code> зелёного прямоугольника отрицательным, по аналогии с красным прямоугольником.",
|
||
"Измените значение свойства <code>margin</code> зелёного прямоугольника на <code>-15px</code>, таким образом он занимает всю ширину окружающего жёлтого прямоугольника."
|
||
]
|
||
}
|
||
},
|
||
"guideUrl": "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element",
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: crimson;",
|
||
" color: #fff;",
|
||
" padding: 20px;",
|
||
" margin: -15px;",
|
||
" }",
|
||
"",
|
||
" .blue-box {",
|
||
" background-color: blue;",
|
||
" color: #fff;",
|
||
" padding: 20px;",
|
||
" margin: 20px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box blue-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08824",
|
||
"title": "Add Different Padding to Each Side of an Element",
|
||
"description": [
|
||
"Sometimes you will want to customize an element so that it has different amounts of <code>padding</code> on each of its sides.",
|
||
"CSS allows you to control the <code>padding</code> of all four individual sides of an element with the <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
|
||
"<hr>",
|
||
"Give the blue box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
|
||
"description": [
|
||
"Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also <code>padding</code> – geben wollen.",
|
||
"CSS erlaubt dir den Innenabstand - <code>padding</code> - eines Elements auf allen Seiten einzeln mit den Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu steuern.",
|
||
"<hr>",
|
||
"Verleihe der blauen Box einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Añade relleno diferente a cada lado de un elemento",
|
||
"description": [
|
||
"A veces querrás personalizar un elemento para que tenga diferente relleno (<code>padding</code>) en cada uno de sus lados.",
|
||
"CSS te permite controlar el relleno (<code>padding</code>) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code>. ",
|
||
"<hr>",
|
||
"Da a la caja verde un relleno (<code>padding</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en sus partes inferior y derecha."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
|
||
"description": [
|
||
"As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (<code>padding</code>) diferente em cada um de seus lados.",
|
||
"O CSS permite controlar o preenchimento (<code>padding</code>) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code>.",
|
||
"<hr>",
|
||
"Dê para a caixa verde um preenchimento (<code>padding</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> em suas partes inferior e direita."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Добавьте разный отступ содердимого с каждой стороны элемента",
|
||
"description": [
|
||
"Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого <code>padding</code> с каждой из сторон был разным.",
|
||
"CSS позволяет вам контролировать значение свойства <code>padding</code> элемента со всех сторон с помощью свойств: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>.",
|
||
"<hr>",
|
||
"Присвойте зелёному прямоугольнику <code>padding</code> равный <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
]
|
||
}
|
||
},
|
||
"guideUrl": "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element",
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: crimson;",
|
||
" color: #fff;",
|
||
" padding-top: 40px;",
|
||
" padding-right: 20px;",
|
||
" padding-bottom: 20px;",
|
||
" padding-left: 40px;",
|
||
" }",
|
||
"",
|
||
" .blue-box {",
|
||
" background-color: blue;",
|
||
" color: #fff;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box blue-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1248bd9aedf08824",
|
||
"title": "Add Different Margins to Each Side of an Element",
|
||
"description": [
|
||
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
|
||
"CSS allows you to control the <code>margin</code> of all four individual sides of an element with the <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties.",
|
||
"<hr>",
|
||
"Give the blue box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
|
||
"description": [
|
||
"Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - <code>margin</code> - geben wollen.",
|
||
"CSS erlaubt dir ebenfalls den Außenabstand - <code>margin</code> - eines Elements auf jeder Seite einzeln mit den Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu steuern.",
|
||
"<hr>",
|
||
"Gib der blauen Box einen Außenabstand – <code>margin</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Añade márgenes diferentes a cada lado de un elemento",
|
||
"description": [
|
||
"A veces querrás personalizar un elemento para que tenga un margen (<code>margin</code>) diferente en cada uno de sus lados.",
|
||
"CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> y <code>margin-left</code>. ",
|
||
"<hr>",
|
||
"Da a la caja verde un margen (<code>margin</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento",
|
||
"description": [
|
||
"Talvez você queira personalizar um elemento para que possua uma margem (<code>margin</code>) 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 <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> e <code>margin-left</code>.",
|
||
"<hr>",
|
||
"Dê para a caixa verde uma margem (<code>margin</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> nas partes inferior e direita."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Добавьте разный отступ для элемента",
|
||
"description": [
|
||
"Иногда вам может потребоваться изменить элемент, установив разный отступ <code>margin</code> с каждой из его сторон.",
|
||
"CSS позволяет вам контролировать отступ <code>margin</code> элемента с каждой из его сторон с помощью свойств: <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>.",
|
||
"<hr>",
|
||
"Присвойте красному прямоугольнику значение <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: crimson;",
|
||
" color: #fff;",
|
||
" margin-top: 40px;",
|
||
" margin-right: 20px;",
|
||
" margin-bottom: 20px;",
|
||
" margin-left: 40px;",
|
||
" }",
|
||
"",
|
||
" .blue-box {",
|
||
" background-color: blue;",
|
||
" color: #fff;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box blue-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08826",
|
||
"title": "Use Clockwise Notation to Specify the Padding of an Element",
|
||
"description": [
|
||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties individually, you can specify them all in one line, like this:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"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.",
|
||
"<hr>",
|
||
"Use Clockwise Notation to give the \".blue-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');"
|
||
},
|
||
{
|
||
"text": "You should use the clockwise notation to set the padding of <code>blue-box</code> class.",
|
||
"testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of <code>blue-box</code> class.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
|
||
"description": [
|
||
"Anstatt die Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu verwenden, kannst du sie alle in einer Zeile schreiben:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.",
|
||
"<hr>",
|
||
"Gib der Klasse \".blue-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
|
||
"description": [
|
||
"En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sóla línea, así: ",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
|
||
"<hr>",
|
||
"Usa la notación en sentido horario para dar a la clase \"<code>.blue-box</code>\" un relleno de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
|
||
"description": [
|
||
"Ao invés de especificar as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code> de um elemento, você pode especificar todas elas em uma só linha, assim:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"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.",
|
||
"<hr>",
|
||
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.blue-box</code>\" um preenchimento de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
|
||
"description": [
|
||
"Вместо указания свойств элемента: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>, вы можете указать их в строку, например:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
|
||
"<hr>",
|
||
"Используйте систему ссылок по часовой стрелке для установки для класса \".blue-box\" значения отступа содержимого <code>padding</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: crimson;",
|
||
" color: #fff;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
"",
|
||
" .blue-box {",
|
||
" background-color: blue;",
|
||
" color: #fff;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box blue-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9afdf08726",
|
||
"title": "Use Clockwise Notation to Specify the Margin of an Element",
|
||
"description": [
|
||
"Let's try this again, but with <code>margin</code> this time.",
|
||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties individually, you can specify them all in one line, like this:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"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.",
|
||
"<hr>",
|
||
"Use <code>Clockwise Notation</code> to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
|
||
"testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
|
||
"description": [
|
||
"Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also <code>margin</code>.",
|
||
"Anstatt die Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu verwenden, kannst du alle in eine Zeile schreiben:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.",
|
||
"<hr>",
|
||
"Nutze die Notation im Uhrzeigersinn – auch <code>Clockwise Notation</code> genannt – um dem Element mit der Klasse <code>blue-box</code> <code>40px</code> Außenabstand auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite zu verleihen."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Utiliza notación en sentido horario para especificar el margen de un elemento",
|
||
"description": [
|
||
"Vamos a intentar esto de nuevo, pero esta vez con el margen (<code>margin</code>).",
|
||
"En lugar de especificar las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, y <code>margin-left</code> de un elemento, puedes especificarlas en una sóla línea así: ",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
|
||
"<hr>",
|
||
"Usa <code>notación en sentido horario</code> para dar al elemento con la clase <code>blue-box</code> un margen de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
|
||
"description": [
|
||
"Vamos praticar isso outra vez, mas desta vez será com a margem (<code>margin</code>).",
|
||
"Ao invés de especificar as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, e <code>margin-left</code> de um elemento, você pode especificar todas elas em apenas uma linha assim:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"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.",
|
||
"<hr>",
|
||
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.blue-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
|
||
"description": [
|
||
"Давайте попробуем то же самое, но со свойством <code>margin</code> на этот раз.",
|
||
"Вмето указания свойств элемента: <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>, вы можете указать их в строку, например:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
|
||
"<hr>",
|
||
"Используйте систему ссылок по часовой стрелке для установки для класса <code>blue-box</code> значения отступа <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: crimson;",
|
||
" color: #fff;",
|
||
" margin: 20px 40px 20px 40px;",
|
||
" }",
|
||
"",
|
||
" .blue-box {",
|
||
" background-color: blue;",
|
||
" color: #fff;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box blue-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "58c383d33e2e3259241f3076",
|
||
"title": "Use Attribute Selectors to Style Elements",
|
||
"description": [
|
||
"You have been giving <code>id</code> or <code>class</code> 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.",
|
||
"Let's bring out CatPhotoApp again to practice using CSS Selectors.",
|
||
"For this challenge, you will use the <code>[attr=value]</code> 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 <code>type</code> and a corresponding value of <code>radio</code>:",
|
||
"<blockquote>[type='radio'] {<br> margin: 20px 0px 20px 0px;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Using the <code>type</code> attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "The <code>type</code> attribute selector should be used to select the checkboxes.",
|
||
"testString": "assert(code.match(/<style>[\\s\\S]*?\\[type=(\"|')checkbox\\1\\]\\s*?{[\\s\\S]*?}[\\s\\S]*?<\\/style>/gi),'The <code>type</code> attribute selector should be used to select the checkboxes.');"
|
||
},
|
||
{
|
||
"text": "The top margins of the checkboxes should be 10px.",
|
||
"testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'The top margins of the checkboxes should be 10px.');"
|
||
},
|
||
{
|
||
"text": "The bottom margins of the checkboxes should be 15px.",
|
||
"testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'The bottom margins of the checkboxes should be 15px.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Feb 17, 2017",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"",
|
||
" .silver-background {",
|
||
" background-color: silver;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" </div>",
|
||
" ",
|
||
" <form action=\"/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>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad82fee1322bd9aedf08721",
|
||
"title": "Understand Absolute versus Relative Units",
|
||
"description": [
|
||
"The last several challenges all set an element's margin or padding with pixels (<code>px</code>). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to <code>px</code>, CSS has a number of different length unit options that you can use.",
|
||
"The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, <code>in</code> and <code>mm</code> 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.",
|
||
"Relative units, such as <code>em</code> or <code>rem</code>, are relative to another length value. For example, <code>em</code> is based on the size of an element's font. If you use it to set the <code>font-size</code> property itself, it's relative to the parent's <code>font-size</code>.",
|
||
"<strong>Note</strong><br>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.",
|
||
"<hr>",
|
||
"Add a <code>padding</code> property to the element with class <code>red-box</code> and set it to <code>1.5em</code>."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>red-box</code> class should have a <code>padding</code> property.",
|
||
"testString": "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'Your <code>red-box</code> class should have a <code>padding</code> property.');"
|
||
},
|
||
{
|
||
"text": "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.",
|
||
"testString": "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
"",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" margin: 20px 40px 20px 40px;",
|
||
" ",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" margin: 40px 20px 20px 40px;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08736",
|
||
"title": "Style the HTML Body Element",
|
||
"description": [
|
||
"Now let's start fresh and talk about CSS inheritance.",
|
||
"Every HTML page has a <code>body</code> element.",
|
||
"<hr>",
|
||
"We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.",
|
||
"We can do this by adding the following to our <code>style</code> element:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>body</code> element the <code>background-color</code> of black.",
|
||
"testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.');"
|
||
},
|
||
{
|
||
"text": "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.",
|
||
"testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');"
|
||
},
|
||
{
|
||
"text": "Make sure your CSS rule ends with a semi-colon.",
|
||
"testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule ends with a semi-colon.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Style das HTML Body Element",
|
||
"description": [
|
||
"Lass uns jetzt frisch beginnen und über CSS Vererbung reden.",
|
||
"Jede HTML Seite hat ein <code>body</code> Element.",
|
||
"<hr>",
|
||
"Wir können sehen dass es das <code>body</code> Element gibt wenn wir ihm eine schwarze (black) <code>background-color</code> geben",
|
||
"Das bewerkstelligen wir indem wir folgendes unserem <code>style</code> Element hinzufügen:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Da estilo en HTML al elemento cuerpo",
|
||
"description": [
|
||
"Ahora vamos a empezar de nuevo y hablaremos de herencia CSS.",
|
||
"Cada página HTML tiene un cuerpo (<code>body</code>).",
|
||
"<hr>",
|
||
"Podemos demostrar que el elemento (<code>body</code>) existe aquí, dandole un color de fondo (<code>background-color</code>) negro.",
|
||
"Podemos hacer esto añadiendo lo siguiente a nuestro elemento <code>style</code>:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Dê Estilo ao Elemento Body em HTML",
|
||
"description": [
|
||
"Agora vamos recomeçar e falar sobre herança em CSS.",
|
||
"Cada página HTML possui um corpo (<code>body</code>).",
|
||
"<hr>",
|
||
"Podemos demonstrar que o elemento (<code>body</code>) existe aqui, ao dar a ele uma cor de fundo (<code>background-color</code>) preta.",
|
||
"Podemos fazer isso adicionando o seguinte ao nosso elemento <code>style</code>:",
|
||
"<code>body {</code>",
|
||
"<code> background-color: black;</code>",
|
||
"<code>}</code>"
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Стилизуйте HTML-элемент body",
|
||
"description": [
|
||
"Теперь давайте начнём с нуля и поговорим о наследовании в CSS.",
|
||
"Каждая HTML-страница имеет элемент <code>body</code>.",
|
||
"<hr>",
|
||
"Мы можем доказать существование элемента <code>body</code> тут, присвоив его свойству <code>background-color</code> значение <code>black</code>.",
|
||
"Мы можем это сделать добавлением следующего к нашему элементу <code>style</code>:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
"",
|
||
"</style>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08746",
|
||
"title": "Inherit Styles from the Body Element",
|
||
"description": [
|
||
"Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.",
|
||
"Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
|
||
"<hr>",
|
||
"First, create a <code>h1</code> element with the text <code>Hello World</code>",
|
||
"Then, let's give all elements on your page the color of <code>green</code> by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
|
||
"Finally, give your <code>body</code> element the font-family of <code>monospace</code> by adding <code>font-family: monospace;</code> to your <code>body</code> element's style declaration."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Create an <code>h1</code> element.",
|
||
"testString": "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the text <code>Hello World</code>.",
|
||
"testString": "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.');"
|
||
},
|
||
{
|
||
"text": "Make sure your <code>h1</code> element has a closing tag.",
|
||
"testString": "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.",
|
||
"testString": "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.",
|
||
"testString": "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.",
|
||
"testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.",
|
||
"testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erbe Styles vom Body Element",
|
||
"description": [
|
||
"Jetzt haben wir bewiesen dass jede HTML Seite ein <code>body</code> Element besitzt und dass dieses <code>body</code> Element ebenfalls mit CSS gestylt werden kann.",
|
||
"Vergiss nicht, dass du dein <code>body</code> Element wie jedes andere HTML Element stylen kannst und dass alle anderen Elemente von deinem <code>body</code> Element Styles erben werden.",
|
||
"<hr>",
|
||
"Erstelle zuerst ein <code>h1</code> Element mit dem Text <code>Hello World</code>",
|
||
"Dann gib allen Elementen auf deiner Seite die Farbe <code>green</code> indem du <code>color:green;</code> deinen <code>body</code> Element Styles hinzufügst.",
|
||
"Gib deinem <code>body</code> Element abschließend die Schriftart <code>monospace</code> indem du <code>font-family: monospace;</code> deinen <code>body</code> Element Styles hinzufügst."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Hereda estilos del elemento cuerpo",
|
||
"description": [
|
||
"Ya hemos demostrado que cada página HTML tiene un cuerpo (<code>body</code>), y que puede dársele estilo CSS.",
|
||
"Recuerda que puedes dar estilo de tu elemento <code>body</code> como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento <code>body</code>.",
|
||
"<hr>",
|
||
"En primer lugar, crea un elemento <code>h1</code> con el texto <code>Hello World</code>",
|
||
"Después, vamos a darle a todos los elementos de tu página el color verde (<code>green</code>) añadiendo <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code>.",
|
||
"Por último, da a tu elemento <code>body</code> el tipo de letra <code>monospace</code> añadiendo <code>font-family: monospace;</code> a la declaración del estilo de tu elemento <code>body</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Herde Estilos do Elemento Body",
|
||
"description": [
|
||
"Já demonstramos que cada página HTML possui um corpo (<code>body</code>), e que podemos dar estilo a ele através do CSS.",
|
||
"Observe que você pode dar estilo ao seu elemento <code>body</code> como a qualquer outro elemento HTML, e que todos os outros elementos herdarão os estilos de seu elemento <code>body</code>.",
|
||
"<hr>",
|
||
"Em primeiro lugar, crie um elemento <code>h1</code> com o texto <code>Hello World</code>",
|
||
"Depois, dê a todos os elementos de sua página uma cor verde (<code>green</code>) adicionando <code>color: green;</code> na declaração de estilo de seu elemento <code>body</code>.",
|
||
"Por último, dê ao seu elemento <code>body</code> o tipo de fonte <code>monospace</code> adicionando <code>font-family: monospace;</code> na declaração de estilo de seu elemento <code>body</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Наследование стилей от элемента Body",
|
||
"description": [
|
||
"Мы доказали наличие у каждой HTML-страницы элемента <code>body</code> и то, что этот элемент <code>body</code> можно стилизовать с помощью CSS.",
|
||
"Не забывайте, что вы можете стилизовать ваш элемент <code>body</code> так же как и любой другой HTML-элемент, а все остальные элементы унаследуют стили элемента <code>body</code>.",
|
||
"<hr>",
|
||
"Для начала, создайте элемент <code>h1</code> с текстом <code>Hello World</code>",
|
||
"Затем присвойте всем элементам на вашей странице <code>зелёный</code> цвет путём добавления <code>color: green;</code> к свойствам, указанным в объявлении стилей для элемента <code>body</code>.",
|
||
"В завершении, присвойте вашему элементу <code>body</code> свойство семейства шрифтов равное <code>monospace</code> путём добавления <code>font-family: monospace;</code> к свойствам, указанным в объявлении стилей для элемента <code>body</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" }",
|
||
"",
|
||
"</style>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08756",
|
||
"title": "Prioritize One Style Over Another",
|
||
"description": [
|
||
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
|
||
"For example, your <code>h1</code> element can't be both green and pink at the same time.",
|
||
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <em>override</em> the <code>body</code> element's <code>color: green;</code> CSS property?",
|
||
"<hr>",
|
||
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
|
||
"Give your <code>h1</code> element the class of <code>pink-text</code>."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.",
|
||
"testString": "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'Your <code><style></code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should be pink.",
|
||
"testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Ziehe einen Style einem Anderen vor",
|
||
"description": [
|
||
"Manchmal werden deine HTML Elemente mehrere Styles erhalten die sich gegenseitig widersprechen.",
|
||
"Zum Beispiel könnte dein <code>h1</code> Element nicht gleichzeitig grün und pink sein.",
|
||
"<hr>",
|
||
"Schauen wir uns an was passiert wenn wir eine Klasse erstellen die Text pink macht und dann einem Element hinzufügen. Wird unsere Klasse die <code>color:green;</code> Eigenschaft unseres <code>body</code> Elements überschreiben - <em>override</em> - ?"
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Priorizar un estilo sobre otro",
|
||
"description": [
|
||
"A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.",
|
||
"Por ejemplo, el elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo.",
|
||
"Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (<em>override</em>) nuestra clase la propiedad CSS <code>color: green</code> del elemento <code>body</code>?",
|
||
"<hr>",
|
||
"Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosado.",
|
||
"Ponle a tu elemento <code>h1</code> la clase de <code>pink-text</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Priorize um Estilo Sobre o Outro",
|
||
"description": [
|
||
"As vezes os elementos HTML recebem múltiplos estilos que entram em conflito entre si.",
|
||
"Por exemplo, o elemento <code>h1</code> não pode ser verde e rosa ao mesmo tempo.",
|
||
"Vamos ver o que acontece quando criamos uma classe que faz com que o texto seja rosa e então o aplicamos a um elemento. Isso irá sobrepor (<em>override</em>) a propriedade CSS <code>color: green</code> do elemento <code>body</code> de nossa classe?",
|
||
"<hr>",
|
||
"Crie uma classe CSS chamada <code>pink-text</code>, que dê a cor rosa a um elemento.",
|
||
"Depois, adicione a classe <code>pink-text</code> ao seu elemento <code>h1</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Установите приоритет одного стиля над другим",
|
||
"description": [
|
||
"Иногда вашим HTML-элементам будут присвоены множественные стили, конфликтующие друг с другом.",
|
||
"Например, ваш элемент <code>h1</code> не может быть одновременно зелёным и розовым.",
|
||
"Давайте посмотрим, что произойдёт, когда мы создадим класс, который делает текст розовым, затем присвоим его элементу. <em>Переопределит</em> ли наш класс значение CSS-свойства элемента <code>body</code> равное <code>color: green;</code>?",
|
||
"<hr>",
|
||
"Создайте CSS-класс <code>pink-text</code>, который назначает элементу розовый в качестве цвета.",
|
||
"Назначьте вашему элементу <code>h1</code> класс <code>pink-text</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: monospace;",
|
||
" color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h1>Hello World!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf04756",
|
||
"title": "Override Styles in Subsequent CSS",
|
||
"description": [
|
||
"Our \"pink-text\" class overrode our <code>body</code> element's CSS declaration!",
|
||
"We just proved that our classes will override the <code>body</code> element's CSS. So the next logical question is, what can we do to override our <code>pink-text</code> class?",
|
||
"<hr>",
|
||
"Create an additional CSS class called <code>blue-text</code> that gives an element the color blue. Make sure it's below your <code>pink-text</code> class declaration.",
|
||
"Apply the <code>blue-text</code> class to your <code>h1</code> element in addition to your <code>pink-text</code> class, and let's see which one wins.",
|
||
"Applying multiple class attributes to a HTML element is done with a space between them like this:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Note: It doesn't matter which order the classes are listed in the HTML element.",
|
||
"However, the order of the <code>class</code> declarations in the <code><style></code> section are what is important. The second declaration will always take precedence over the first. Because <code>.blue-text</code> is declared second, it overrides the attributes of <code>.pink-text</code>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.",
|
||
"testString": "assert($(\".pink-text\").hasClass(\"blue-text\"), 'Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should be blue.",
|
||
"testString": "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h1</code> element should be blue.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Überschreibe Styles mit nachträglichen CSS",
|
||
"description": [
|
||
"Unsere \"pink-text\" Klasse hat unsere CSS Angaben des <code>body</body> Elements überschrieben!",
|
||
"Wir haben gerade bewiesen, dass unsere Klassen das CSS des <code>body</body> Elements überschreiben. Die logische nächste Frage ist also was wir tun können um unsere <code>pink-text</code> Klasse zu überschreiben?",
|
||
"<hr>",
|
||
"Erstelle eine weitere CSS Klasse namens <code>blue-text</code>, die deinem Element eine blaue Farbe gibt. Stelle sicher dass sie unter deiner <code>pink-text</code> Klassen-Deklaration steht.",
|
||
"Füge die <code>blue-text</code> Klasse deinem <code>h1</code> Element zusätzlich zur <code>pink-text</code> Klasse hinzu und schau welche gewinnt.",
|
||
"Einem HTML Element mehrere Klassen Attribute zu geben funktioniert mit einem Leerzeichen dazwischen:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Notiz: Es ist egal in welcher Reihenfolge die Klassen in einem HTML Element angeordnet sind.",
|
||
"Allerdings ist die Reihenfolge der <code>class</code> Deklarationen im <code><style></code> Abschnitt durchaus wichtig. Die zweite Deklaration wird immer Vorzug gegenüber der Ersten erhalten. Weil <code>.blue-text</code> als zweites deklariert wird, überschreibt es die Attribute von <code>.pink-text</code>"
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Anula estilos con CSS posterior",
|
||
"description": [
|
||
"¡Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento <code>body</code>!",
|
||
"Acabamos de demostrar que nuestras clases anularán el CSS del elemento <code>body</code>. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase <code>pink-text</code>?",
|
||
"<hr>",
|
||
"Crea una clase CSS adicional llamada <code>texto-azul</code> que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase <code>pink-text</code>. ",
|
||
"Aplica la clase <code>blue-text</code> a tu elemento <code>h1</code> además de tu clase <code>pink-text</code> y veamos cuál gana.",
|
||
"La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:",
|
||
"<code>class=\"clase1 clase2\"</code>",
|
||
"Nota: No importa el orden en que las clases aparecen en el HTML.",
|
||
"Sin embargo, el orden de las declaraciones <code>class</code> en la sección <code><style></code> sí son importantes. La segunda declaración siempre precederá a la primera. Debido a que <code>.blue-text</code> es declarada después, esta anula los atributos de <code>.pink-text</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Sobreponha Estilos com CSS Posterior",
|
||
"description": [
|
||
"Nossa classe \"pink-text\" anulou a declaração CSS de nosso elemento <code>body</code>!",
|
||
"Acabamos de demonstrar que nossas classes irão sobrepor o CSS do elemento <code>body</code>. Sendo assim, nossa seguinte pergunta lógica é: O que podemos fazer para sobrepor a nossa classe <code>pink-text</code>?",
|
||
"<hr>",
|
||
"Crie uma classe tradicional com CSS chamada <code>texto-azul</code>, que possa dar a um elemento a cor azul. Tenha a certeza de deixá-la abaixo de sua declaração da classe <code>pink-text</code>.",
|
||
"Aplique a classe <code>blue-text</code> ao seu elemento <code>h1</code>, além da classe <code>pink-text</code>, e vamos ver qual delas ganhará.",
|
||
"Lembre que a adição de vários atributos de classe a um elemento HTML se faz utilizando espaços entre ambos, assim:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Nota: A ordem em que as classes são listadas em HTML não tem importância.",
|
||
"Contudo, a ordem de declarações de <code>classe</code> no <code><style></code> é importante. A segunda declaração sempre terá precedência pela primeira. Já que <code>.blue-text</code> é declarado depois, ele irá sobrepor os atributos de <code>.pink-text</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Преопределите стили последующим CSS",
|
||
"description": [
|
||
"Наш класс \"pink-text\" переопределил объявленное CSS-свойство элемента <code>body</code>!",
|
||
"Мы только что доказали, что наши классы переопределяют CSS-свойства, обявленные в элементе <code>body</code>. Следующим вопросом по логике дожно быть: можем ли мы переопределить наш класс <code>pink-text</code> class?",
|
||
"<hr>",
|
||
"Создайте дополнительный CSS-класс <code>blue-text</code>, который присваивает элементу синий цвет. Убедитесь, что он расположен ниже объявления вашего класса <code>pink-text</code>.",
|
||
"Примените класс <code>blue-text</code> к вашему элементу <code>h1</code> в дополнение к вашему классу <code>pink-text</code>, и давайте посмотрим какой выиграет.",
|
||
"Применение множественных классов к атрибуту <code>class</code> HTML-элемента осуществляется через пробел:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Внимание: порядок, в котором указаны классы HTML-элемента неважен.",
|
||
"Однако, порядок, в котором <code>классы</code> указаны в элементе <code><style></code> важен. Последующее объявление будет всегда иметь приоритет над предшествующим. Поскольку <code>.blue-text</code> объявлен последним, он переопрпделяет значения заданные атрибутом <code>.pink-text</code>"
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 class=\"pink-text\">Hello World!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd8aedf06756",
|
||
"title": "Override Class Declarations by Styling ID Attributes",
|
||
"description": [
|
||
"We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.",
|
||
"But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?",
|
||
"Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.",
|
||
"<hr>",
|
||
"Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this:",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
|
||
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element the id of <code>orange-text</code>.",
|
||
"testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.');"
|
||
},
|
||
{
|
||
"text": "There should be only one <code>h1</code> element.",
|
||
"testString": "assert(($(\"h1\").length === 1), 'There should be only one <code>h1</code> element.');"
|
||
},
|
||
{
|
||
"text": "Create a CSS declaration for your <code>orange-text</code> id",
|
||
"testString": "assert(code.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id');"
|
||
},
|
||
{
|
||
"text": "Do not give your <code>h1</code> any <code>style</code> attributes.",
|
||
"testString": "assert(!code.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should be orange.",
|
||
"testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Überschreibe Klassen Deklarationen mit Styling von ID Attributen",
|
||
"description": [
|
||
"Wir haben gerade bewiesen, dass der Browser CSS von oben nach unten liest. Das bedeuted, dass im Falle eines Konflikts der Browser immer die letzte CSS Deklaration verwenden wird.",
|
||
"Aber damit sind wir noch nicht fertig. Es gibt andere Wege um CSS zu überschreiben. Erinnerst du dich an Id Attribute?",
|
||
"Überschreiben wir jetzt unsere <code>pink-text</code> und <code>blue-text</code> Klasse und machen unser <code>h1</code> Element orange, indem wir dem <code>h1</code> Element eine Id geben und diese dann stylen.",
|
||
"<hr>",
|
||
"Gib deinem <code>h1</code> Element das <code>id</code> Attribute <code>orange-text</code>. Vergiss nicht, Id Styles sehen so aus:",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Erstelle eine CSS Deklaration für deine <code>orange-text</code> Id in deinem <code>style</code> Element. Hier siehst du ein Beispiel wie sowas aussieht:",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Notiz: Es ist egal ob du dies vor oder nach deiner \"pink-text\" Klasse schreibst, da Id Attribute immer bevorzugt werden."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Anula la declaración de clases dando estilo a los atributos ID",
|
||
"description": [
|
||
"Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ",
|
||
"Pero no hemos terminado todavía. Hay otras maneras con las que puedes anular CSS. ¿Te acuerdas de los atributos id?",
|
||
"Anulemos tus clases <code>pink-text</code> y <code>blue-text</code>, y pongamos anaranjado tu elemento <code>h1</code>, dándole una identificación al elemento <code>h1</code> y poniéndole estilo a esa identificación (<code>id</code>).",
|
||
"<hr>",
|
||
"Dale a tu elemento <code>h1</code> el atributo <code>id</code> con valor <code>orange-text</code>. Recuerda, los atributos id se ven así: ",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Deja las clases <code>blue-text</code> y <code>pink-text</code> de tu elemento <code>h1</code>.",
|
||
"Crea una declaración CSS para tu identificación <code>orange-text</code> en tu elemento <code>style</code>. He aquí un ejemplo de como se ve esto: ",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Nota: No importa si usted declara este CSS encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Sobreponha a Declaração de Classes Estilizando Atributos ID",
|
||
"description": [
|
||
"Acabamos de demonstrar que os navegadores fazem a leitura do CSS de cima para baixo. Isso significa que, em caso de um conflito, o navegador utilizará a última declaração CSS.",
|
||
"Mas ainda não terminamos, pois existem outras formas para sobrepor CSS. Você se lembra dos atributos <code>id</code>?",
|
||
"Vamos sobrepor suas classes <code>pink-text</code> e <code>blue-text</code>, e fazer com que seu elemento <code>h1</code> seja laranja. Faremos isso aplicando uma <code>id</code> para o elemento <code>h1</code> e então estilizando essa <code>id</code>.",
|
||
"<hr>",
|
||
"Dê ao seu elemento <code>h1</code> o atributo <code>id</code> de nome <code>orange-text</code>. Relembre que os atributos id são assim:",
|
||
"<code>#brown-text {</code>",
|
||
"<code> color: brown;</code>",
|
||
"<code>}</code>",
|
||
"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."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Переопределите значения свойств классов стилизацией атрибутов id",
|
||
"description": [
|
||
"Мы только что доказали, что браузеры читают CSS сверху-вниз. Это значит, что в случае конфликта значений будет установлено то, которое было объявлено в последнюю очередь.",
|
||
"Но мы ещё не закончилил. Есть и другие способы переопределения CSS. Помните атрибуты id?",
|
||
"Давайте переопределим ваши классы <code>pink-text</code> и <code>blue-text</code>, и сделаем ваш элемент <code>h1</code> оранжевым, назначив элементу <code>h1</code> зна<D0BD><D0B0>ение атрибута <code>id</code> и его последующей стилизацией.",
|
||
"<hr>",
|
||
"Назначьте вашему элементу <code>h1</code> значение атрибута <code>id</code> равное <code>orange-text</code>. Помните, что стилизация атрибута <code>id</code> выглядит так:",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Оставьте классы <code>blue-text</code> и <code>pink-text</code> присвоенными вашему элементу <code>h1</code>.",
|
||
"Объявите свойства вашего атрибута <code>id</code> с названием <code>orange-text</code> в вашем элементе <code>style</code>. Вот пример того, как это выглядит:",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Внимание: Не имеет значения объявите ли вы стиль выше или ниже класса <code>pink-text</code>, так как атрибут <code>id</code> всегда имеет приоритет."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
" .blue-text {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 class=\"pink-text blue-text\">Hello World!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf06756",
|
||
"title": "Override Class Declarations with Inline Styles",
|
||
"description": [
|
||
"So we've proven that id declarations override class declarations, regardless of where they are declared in your <code>style</code> element CSS.",
|
||
"There are other ways that you can override CSS. Do you remember inline styles?",
|
||
"<hr>",
|
||
"Use an <code>inline style</code> to try to make our <code>h1</code> element white. Remember, in line styles look like this:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
|
||
"testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element an inline style.",
|
||
"testString": "assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should be white.",
|
||
"testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'Your <code>h1</code> element should be white.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Überschreibe deine Klassen Deklarationen mit Inline Styles",
|
||
"description": [
|
||
"Wir haben also gesehen dass Id Deklarationen die von Klassen überschreiben, egal wo sie in deinem <code>style</code> Element CSS stehen.",
|
||
"Es gibt noch andere Wege CSS zu überschreiben. Erinnerst du dich an Inline Styles?",
|
||
"<hr>",
|
||
"Benutze <code>inline style</code> um dein <code>h1</code> Element weiß zu machen. Vergiss nicht, Inline Styles sehen so aus:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Lasse die <code>blue-text</code> und <code>pink-text</code> Klassen auf deinem <code>h1</code> Element."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Anula declaraciones de clase con estilos en línea",
|
||
"description": [
|
||
"Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS <code>style</code>.",
|
||
"Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?",
|
||
"<hr>",
|
||
"Utiliza un <code>estilo en línea</code> para tratar de hacer blanco nuestro elemento <code>h1</code>. Recuerda, los estilos en línea se ven así: ",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Deja las clases <code>blue-text</code> y <code>pink-text</code> en tu elemento <code>h1</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Sobreponha a Declaração de Classes com Estilos Inline",
|
||
"description": [
|
||
"Certo, nós demonstramos que declarações de id sobrepoem as declarações de classe, independente do lugar onde são declarados em seu elemento <code>style</code> no CSS.",
|
||
"Existem outras formas em que você pode sobrepor CSS. Você se lembra de estilos inline?",
|
||
"<hr>",
|
||
"Use um estilo <code>inline</code> para tentar fazer com que nosso elemento <code>h1</code> tenha a cor branca. Relembre que estilos inline são assim:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Deixe as classes <code>blue-text</code> e <code>pink-text</code> em seu elemento <code>h1</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Переопределите значения свойств классов встроенными стилями",
|
||
"description": [
|
||
"Итак, мы доказали, что объявление атрибута <code>id</code> переопределяет значения свойств, определённые в значениях атрибута <code>class</code>, независимо от того, были ли они объявлены в вашем элементе <code>style</code>.",
|
||
"Есть и другие способы переопределения CSS. Помните встроенные стили?",
|
||
"<hr>",
|
||
"Используйте <code>встроенный стиль</code>, чтобы попробовать сделать наш элемент <code>h1</code> белым. Помните, что встроенные стили выглядят следующим образом:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Оставьте классы <code>blue-text</code> и <code>pink-text</code> назначенными вашему элементу <code>h1</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" #orange-text {",
|
||
" color: orange;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
" .blue-text {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 id=\"orange-text\" class=\"pink-text blue-text\">Hello World!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf07756",
|
||
"title": "Override All Other Styles by using Important",
|
||
"description": [
|
||
"Yay! We just proved that inline styles will override all the CSS declarations in your <code>style</code> element.",
|
||
"But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
|
||
"In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>",
|
||
"Let's go all the way back to our <code>pink-text</code> class declaration. Remember that our <code>pink-text</code> class was overridden by subsequent class declarations, id declarations, and inline styles.",
|
||
"<hr>",
|
||
"Let's add the keyword <code>!important</code> to your pink-text element's color declaration to make 100% sure that your <code>h1</code> element will be pink.",
|
||
"An example of how to do this is:",
|
||
"<code>color: red !important;</code>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
|
||
"testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
|
||
"testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should have the inline style of <code>color: white</code>.",
|
||
"testString": "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color: white</code>.');"
|
||
},
|
||
{
|
||
"text": "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.",
|
||
"testString": "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');"
|
||
},
|
||
{
|
||
"text": "Your <code>h1</code> element should be pink.",
|
||
"testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Überschreibe alle anderen Styles mit Important",
|
||
"description": [
|
||
"Juhu! Wir haben bewiesen dass Inline Styles alle CSS Deklarationen aus deinem <code>style</code> Element überschreiben.",
|
||
"Aber warte. Es gibt eine letzte Art CSS zu überschreiben. Dabei handelt es sich um die mächtigste Methode von allen. Aber bevor wir dazu kommen, sehen wir uns an warum du überhaupt CSS überschreiben wollen würdest.",
|
||
"In vielen Situationen wirst du sogenannte \"CSS libraries\" (CSS Bibliotheken) verwenden. Diese könnten versehentlich dein eigenes CSS überschreiben. Wenn du also absolut sicher sein musst dass ein Element einen bestimmten Style hat, kannst du <code>!important</code> verwenden.",
|
||
"Gehen wir zurück zu unserer <code>pink-text</code> Klassendeklaration. Wie du dich vielleicht erinnerst wurde unsere <code>pink-text</code> Klasse von darauffolgenden Klassen, Ids und Inline Styles überschrieben.",
|
||
"<hr>",
|
||
"Füge das Schlüsselwort <code>!important</code> zu der Farbe deines \"pink-text\" Elements hinzu um 100% sicher zu gehen dass das <code>h1</code> Element pink ist.",
|
||
"Hier ist ein Beispiel wie man das macht:",
|
||
"<code>color: red !important;</code>"
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Anula todos los demás estilos utilizando Important",
|
||
"description": [
|
||
"¡Hurra! Demostramos que los estilos en línea anularán todas las declaraciones CSS de tu elemento <code>style</code>. ",
|
||
"¡Pero espera! Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, vamos a hablar de por qué puedes querer anular CSS. ",
|
||
"En muchas situaciones, usarás bibliotecas CSS. Estas pueden anular accidentalmente tu propio CSS. Por eso, cuando necesitas estar seguro de que un elemento tiene un CSS específico puedes usar <code>!important</code>",
|
||
"Regresemos a nuestra declaración de clase <code>pink-text</code>. Recuerda que nuestra clase <code>pink-text</code> fue anulada por declaraciones de clases posteriores, declaraciones id, y estilos en línea. ",
|
||
"<hr>",
|
||
"Vamos a añadir la palabra clave <code>!important</code> a tu declaración del color de <code>pink-text</code> para estar 100% seguros que tu elemento <code>h1</code> será rosado.",
|
||
"Un ejemplo de cómo hacer esto es:",
|
||
"<code>color: red !important;</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Sobreponha Todos os Outros Elementos Utilizando Important",
|
||
"description": [
|
||
"Isso! Demonstramos que os estilos inline irão sobrepor todas as declarações CSS de seu elemento <code>style</code>.",
|
||
"Mas, espere! Há uma última forma de sobrepor com CSS. Este é o método mais poderoso de todos. Contudo, antes de colocá-lo em prática, vamos falar sobre os motivos que podem fazer você querer sobrepor CSS.",
|
||
"Em diversas situações, você usará bibliotecas CSS. Pode ser que essas bibliotecas sobreponham acidentalmente o seu próprio CSS. Por isso, quando você precisar estar seguro de que um elemento possui um CSS específico, você poderá utilizar <code>!important</code>.",
|
||
"Certo, vamos voltar para a nossa declaração de classe <code>pink-text</code>. Relembre que nossa classe <code>pink-text</code> foi sobreposta pelas declarações de classe posteriores, por declarações id e por estilos inline.",
|
||
"<hr>",
|
||
"Vamos adicionar nossa palavra-clave <code>!important</code> para sua declaração de cor de <code>pink-text</code> para que possamos estar 100% seguros que seu elemento <code>h1</code> será sempre cor de rosa.",
|
||
"Um exemplo para fazer isso é:",
|
||
"<code>color: red !important;</code>"
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Переопределите все другие стили применив important",
|
||
"description": [
|
||
"Ура! Мы только что доказали, что встроенные стили переопределяют все другие объявления CSS-свойств в вашем элементе <code>style</code>.",
|
||
"Но подождите. Есть ещё один последний способ переопределения CSS. Это наиболее существенный способ из всех. Но перед тем, как мы его попробует, давайте поговорим о том, зачем вам может понадобиться переопрелить CSS.",
|
||
"Во множестве ситуаций вы будете использовать CSS-библиотеки. Это может переопределить ваш собственный CSS. Таким образом, когда вам требуется быть абсолютно уверенными в том, что элемент будет обладать определёнными CSS-свойствами, вы можете использовать <code>!important</code>",
|
||
"Давайте вернёмся к объявлению нашего класса <code>pink-text</code>. Помните, что наш класс <code>pink-text</code> был переопределён последующим классом, стилизацией атрибута <code>id</code>, встроенным стилем.",
|
||
"<hr>",
|
||
"Давайте добавим ключевое слово <code>!important</code> к вашему объявлению текста розовым, чтобы убедиться на 100%, что ваш элемент <code>h1</code> будет розовый.",
|
||
"Пример того, как это можено сделать:",
|
||
"<code>color: red !important;</code>"
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" #orange-text {",
|
||
" color: orange;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
" .blue-text {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 id=\"orange-text\" class=\"pink-text blue-text\" style=\"color: white\">Hello World!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08726",
|
||
"title": "Use Hex Code for Specific Colors",
|
||
"description": [
|
||
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.",
|
||
"We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.",
|
||
"In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.",
|
||
"<blockquote>body {<br> color: #000000;<br>}</blockquote>",
|
||
"<hr>",
|
||
"Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>body</code> element the background-color of black.",
|
||
"testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.');"
|
||
},
|
||
{
|
||
"text": "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.",
|
||
"testString": "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Verwende hexadezimal Code für spezifische Farben",
|
||
"description": [
|
||
"Wusstest du dass es andere Möglichkeiten gibt Farben in CSS darzustellen? Eine dieser Möglichkeiten ist \"Hexadezimal Code\" genannt, oder kurz <code>hex code</code>.",
|
||
"Wir verwenden üblicherweise <code>decimals</code> (Dezimalen), oder Zehnersystem, das für jede Ziffer eine Symbol von 0 bis 9 verwendet. <code>Hexadecimals</code> (Hexadezimalzahlen oder <code>hex</code>) beruhen auf einer 16er Basis. Das bedeuted dass sie 16 verschiedene Symbole verwenden. Wie auch Dezimalzahlen, repräsentiern die Symbole \"0\"-\"9\" Null bis Neun. Dann allerdings geht es weiter mit A,B,C,D,E,F für die Zahlen 10-15. Alles in Allem kann eine einzige Ziffer, mit 0 bis F, in <code>hexadecimal</code> 16 mögliche Werte ausdrücken. Mehr Informationen über das Hexadezimalsystem kannst du <a target='_blank' href='https://de.wikipedia.org/wiki/Hexadezimalsystem'>hier</a> finden.",
|
||
"In CSS können wir 6 Hexadezimalziffern verwenden um eine Farbe auszudrücken, je zwei für den Rot- (R), Grün (G)- und Blauanteil (B). <code>#000000</code> ist zum Beispiel schwarz und der niedrigst mögliche Wert. Mehr Information über den RGB Farbraum findest du <a target:'_blank' href='https://de.wikipedia.org/wiki/RGB-Farbraum'>hier</a>.",
|
||
"<hr>",
|
||
"Ersetzte das Wort <code>black</code> in der Hintergrundfarbe deines <code>body</code> Elements mit dem <code>hex code</code> <code>#000000</code>."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Usa el código hexadecimal para especificar colores",
|
||
"description": [
|
||
"¿Sabías que hay otras maneras de representar los colores en CSS? Una de estas formas es llamada código hexadecimal o <code>código hex</code> para abreviar. ",
|
||
"El sistema <code>Decimal</code> se refiere al que nos permite representar cantidades empleando los dígitos del cero al nueve - los números que la gente usa en la vida cotidiana. El sistema <code>Hexadecimal</code> incluye estos 10 dígitos más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 dígitos posibles, en lugar de las 10 posibles que nos da nuestro sistema numérico normal en base 10. ",
|
||
"Con CSS, utilizamos 6 dígitos hexadecimales para representar los colores. Por ejemplo, <code>#000000</code> es el valor más bajo posible, y representa el color negro. ",
|
||
"<hr>",
|
||
"Reemplaza la palabra <code>black</code> en el color de fondo (<code>background-color</code>) de nuestro elemento <code>body</code> por su representación hexadecimal <code>#000000</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Código Hexadecimal para Especificar Cores",
|
||
"description": [
|
||
"Você sabia que existem outras formas para representar as cores em CSS? Uma dessas formas é com o que chamamos de código hexadecimal, ou <code>código hex</code> para abreviar.",
|
||
"O sistema <code>Decimal</code> 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 <code>Hexadecimal</code> 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, <code>#000000</code> é o valor mais baixo possível, e representa a cor preta.",
|
||
"<hr>",
|
||
"Substitua a palavra <code>black</code> na cor de fundo (<code>background-color</code>) de nosso elemento <code>body</code> pela sua representação hexadecimal <code>#000000</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте hex-цвета для выбора определённых цветов",
|
||
"description": [
|
||
"Знали ли вы, что существуют другие способы представления цветов в CSS? Одним из этих способов является шестнадцатиричный код, <code>hex-код</code>, если короче.",
|
||
"Обычно мы используем <code>десятки</code>, или десятичную систему счисления, в основе которой лежит число 10, которая использует символы от 0 до 9 для каждого числа. В основе <code>Шестнадцатиричной</code> системы лежит число 16. Это значит, что она использует шестнадцать различных символов. Как в десятичной, символы 0-9 соответствуют значениям от нуля до девяти. Далее A,B,C,D,E,F соответствуют значениям от десяти до пятнадцати. Вместе, от 0 до F, с их помощью можно представить число в <code>шестнадцатиричной</code> системе счисления, что даёт нам в целом 16 возможных значений. Вы можете найти больше информации о <a target='_blank' href='https://ru.wikipedia.org/wiki/%D0%A8%D0%B5%D1%81%D1%82%D0%BD%D0%B0%D0%B4%D1%86%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D1%87%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%81%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F'>шестнадцатиричной системе счисления тут</a>.",
|
||
"В CSS, мы можем использовать 6 шестнадцатиричных чисел для представления цвета, по два на каждый компонент: красный (R), зелёный (G), синий (B). Например, <code>#000000</code> - черный цвет и минимальное значение. Вы можете найти больше информации о <a target='_blank' href='https://ru.wikipedia.org/wiki/RGB'>цветовой модели RGB</a>.",
|
||
"<hr>",
|
||
"Замените слово <code>black</code> в свойстве <code>background-color</code> нашего элемента <code>body</code> на представление в виде <code>hex-кода</code>, <code>#000000</code>."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08721",
|
||
"title": "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.",
|
||
"From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!",
|
||
"For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being <code>#FFA500</code>.",
|
||
"The digit <code>0</code> is the lowest number in hex code, and represents a complete absence of color.",
|
||
"The digit <code>F</code> is the highest number in hex code, and represents the maximum possible brightness.",
|
||
"<hr>",
|
||
"Replace the color words in our <code>style</code> element with their correct hex codes.",
|
||
"<table class='table table-striped'><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></table>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
|
||
"testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
|
||
},
|
||
{
|
||
"text": "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.",
|
||
"testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
|
||
"testString": "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
|
||
},
|
||
{
|
||
"text": "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.",
|
||
"testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.",
|
||
"testString": "assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', 'Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.');"
|
||
},
|
||
{
|
||
"text": "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.",
|
||
"testString": "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.",
|
||
"testString": "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.');"
|
||
},
|
||
{
|
||
"text": "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.",
|
||
"testString": "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Verwende Hexadezimal Code um Farben zu mischen",
|
||
"description": [
|
||
"Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.",
|
||
"Orange, zum Beispiel, ist pures Rot, gemischt mit ein bisschen Grün und keinem Blau",
|
||
"<hr>",
|
||
"Gib dem <code>body</code> Element eine orange Hintergrundfarbe indem du den Hexadezimal Code <code>#FFA500</code> verwendest."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Usa código hex para mezclar colores",
|
||
"description": [
|
||
"A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.",
|
||
"Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.",
|
||
"<hr>",
|
||
"Haz que el color de fondo del elemento <code>body</code> sea anaranjado, dándole el código hexadecimal <code>#FFA500</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Código Hexadecimal para Misturar Cores",
|
||
"description": [
|
||
"A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.",
|
||
"Por exemplo, o laranja é vermelho puro misturado com um pouco de verde, e sem nada de azul.",
|
||
"<hr>",
|
||
"Faça com que a cor de fundo do elemento <code>body</code> seja alaranjada, usando o código hexadecimal <code>#FFA500</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте hex-код, чтобы смешивать цвета",
|
||
"description": [
|
||
"Из этих трёх чистых цветов (красного, зелёного и синего), мы можем создать 16 миллионов других цветов.",
|
||
"Например, оранжевый - смесь чистого красного с примесью зелёного, но без синего.",
|
||
"<hr>",
|
||
"Сделайте цвет фона элемента <code>body</code> оранжевым, присвоив его соответствующему свойству значение hex-кода равное <code>#FFA500</code>"
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: black;",
|
||
" }",
|
||
" .green-text {",
|
||
" color: black;",
|
||
" }",
|
||
" .dodger-blue-text {",
|
||
" color: black;",
|
||
" }",
|
||
" .orange-text {",
|
||
" color: black;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h1 class=\"red-text\">I am red!</h1>",
|
||
"",
|
||
"<h1 class=\"green-text\">I am green!</h1>",
|
||
"",
|
||
"<h1 class=\"dodger-blue-text\">I am dodger blue!</h1>",
|
||
"",
|
||
"<h1 class=\"orange-text\">I am orange!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08719",
|
||
"title": "Use Abbreviated Hex Code",
|
||
"description": [
|
||
"Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.",
|
||
"For example, red's hex code <code>#FF0000</code> can be shortened to <code>#F00</code>. This shortened form gives one digit for red, one digit for green, and one digit for blue.",
|
||
"This reduces the total number of possible colors to around 4,000. But browsers will interpret <code>#FF0000</code> and <code>#F00</code> as exactly the same color.",
|
||
"<hr>",
|
||
"Go ahead, try using the abbreviated hex codes to color the correct elements.",
|
||
"<table class='table table-striped'><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></table>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
|
||
"testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
|
||
},
|
||
{
|
||
"text": "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.",
|
||
"testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
|
||
"testString": "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
|
||
},
|
||
{
|
||
"text": "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.",
|
||
"testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.",
|
||
"testString": "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.');"
|
||
},
|
||
{
|
||
"text": "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.",
|
||
"testString": "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.",
|
||
"testString": "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.');"
|
||
},
|
||
{
|
||
"text": "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.",
|
||
"testString": "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Verwende abgekürzten Hexadezimal Code",
|
||
"description": [
|
||
"Viele Leute fühlen sich mit der Auswahl aus über 16 Millionen Farben überfordert. Außerdem ist es schwierig sich Hexadezimal Codes zu merken. Zum Glück kannst du sie abkürzen.",
|
||
"Rot, zum Beispiel, mit dem Hexadezimal Code von <code>#FF0000</code> kannst du mit <code>#F00</code> abkürzen. Das bedeuted eine Ziffer für Rot, eine für Grün und eine für Blau",
|
||
"Das reduziert die Gesamtsumme an möglichen Farben auf ungefähr 4.000. Aber Browser interpretieren <code>#FF0000</code> und <code>#F00</code> als exakt die gleiche Farbe.",
|
||
"<hr>",
|
||
"Probiere <code>#F00</code> aus um die Hintergrundfarbe des <code>body</code> Elements rot zu färben."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Uso código hex abreviado",
|
||
"description": [
|
||
"Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente puedes acortarlo. ",
|
||
"Por ejemplo, el rojo, que es <code>#FF0000</code> en código hexadecimal, se puede abreviar a <code>#F00</code>. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ",
|
||
"Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán <code>#FF0000</code> y <code>#F00</code> como exactamente el mismo color. ",
|
||
"<hr>",
|
||
"Adelante, intenta usar <code>#F00</code> para volver rojo el color de fondo del elemento <code>body</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Código Hexadecimal Abreviado",
|
||
"description": [
|
||
"Muitas pessoas se sentem confusas com as possibilidades de mais de 16 milhões de cores. Além disso, é difícil lembrar de códigos hexadecimais. Por sorte, podemos abreviá-lo.",
|
||
"Por exemplo, o vermelho que é <code>#FF0000</code> em código hexadecimal pode ser abreviado a <code>#F00</code>. 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 <code>#FF0000</code> e <code>#F00</code> exatamente como a mesma cor.",
|
||
"<hr>",
|
||
"Continue, tente usar <code>#F00</code> para fazer com que a cor de fundo do elemento <code>body</code> seja vermelha."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте аббревиатуры hex-кода",
|
||
"description": [
|
||
"Множество людей обременяет возможность применения более 16-ти миллионов цветов. И hex-коды достаточно сложно запоминать. К счастью, вы можете использовать укороченные выражения.",
|
||
"Например, красный, который имеет значение <code>#FF0000</code> в виде hex-кода, может быть укорочен до <code>#F00</code>. В укороченном виде: одна цифра представляет красный, одна - зелёный, одна - синий.",
|
||
"Это уменьшает общее количество возможных цветов до порядка 4,000. Но браузеры будут интерпретировать <code>#FF0000</code> и <code>#F00</code> как один и тот же цвет.",
|
||
"<hr>",
|
||
"Вперёд, попробуйте применить значение <code>#F00</code>, чтобы сделать цвет фона элемента <code>body</code> красным."
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
" .fuchsia-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
" .cyan-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
" .green-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h1 class=\"red-text\">I am red!</h1>",
|
||
"",
|
||
"<h1 class=\"fuchsia-text\">I am fuchsia!</h1>",
|
||
"",
|
||
"<h1 class=\"cyan-text\">I am cyan!</h1>",
|
||
"",
|
||
"<h1 class=\"green-text\">I am green!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08718",
|
||
"title": "Use RGB values to Color Elements",
|
||
"description": [
|
||
"Another way you can represent colors in CSS is by using <code>RGB</code> values.",
|
||
"The RGB value for black looks like this:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"The RGB value for white looks like this:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Instead of using six hexadecimal digits like you do with hex code, with <code>RGB</code> you specify the brightness of each color with a number between 0 and 255.",
|
||
"If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So <code>RGB</code>, which starts counting from zero, has the exact same number of possible values as hex code.",
|
||
"Here's an example of how you'd change the body background to orange using its RGB code.",
|
||
"<blockquote>body {<br> background-color: rgb(255, 165, 0);<br>}</blockquote>",
|
||
"<hr>",
|
||
"Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Your <code>body</code> element should have a black background.",
|
||
"testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Your <code>body</code> element should have a black background.');"
|
||
},
|
||
{
|
||
"text": "Use <code>rgb</code> to give your <code>body</code> element a color of black.",
|
||
"testString": "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element a color of black.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Verwende RGB Werte um Elemente zu färben",
|
||
"description": [
|
||
"Ein anderer Weg um Farben in CSS darzustellen ist <code>rgb</code> Werte zu verwenden.",
|
||
"Der RGB Wert für Schwarz sieht so aus:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"Der RGB Wert für Weiß sieht so aus:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit <code>rgb</code> die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.",
|
||
"Wenn du nachrechnest, 16 mal 16 ist 256 Werte. Also hat <code>rgb</code>, das mit Null hochzuzählen beginnt, die gleiche Anzahl an möglichen Farben wie Hexadezimal Code.",
|
||
"<hr>",
|
||
"Ersetzte jetzt den Hexadezimal Code der Hintergrundfarbe deines <code>body</code> Elements mit dem RGB Wert für Schwarz: <code>rgb(0, 0, 0)</code>"
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Usa RGB para colorear elementos",
|
||
"description": [
|
||
"Otra forma en la que puedes representar colores en CSS es usando valores <code>rgb</code>.",
|
||
"El valor RGB para el negro, luce así:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"El valor RGB para el blanco, se ve así:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"En lugar de utilizar seis dígitos hexadecimales, con <code>rgb</code> especificas el brillo de cada color con un número entre 0 y 255.",
|
||
"Si haces la matemática, 16 veces 16 es 256 valores totales. Así que <code>rgb</code>, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.",
|
||
"<hr>",
|
||
"Remplacemos el código hexadecimal del color de fondo de nuestro elemento <code>body</code> por el valor RGB para el negro: <code>rgb(0, 0, 0)</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Valores RBG para Colorir Elementos",
|
||
"description": [
|
||
"Outra forma em que você pode representar cores em CSS é utilizando valores <code>rgb</code>.",
|
||
"O valor RGB para preto é assim:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"O valor RGB para branco é assim:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> 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 <code>rgb</code>, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.",
|
||
"<hr>",
|
||
"Vamos substituir o código hexadecimal da cor de fundo do nosso elemento <code>body</code> pelo valor RGB para preto: <code>rgb(0, 0, 0)</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте формат RGB для придания цвета элементам",
|
||
"description": [
|
||
"Другим способом представления цветов в CSS является применение значений <code>rgb</code>.",
|
||
"Значение RGB для чёрного цвета выглядит следующим образом:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"Значение RGB для белого выглядит так:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Вместо использования шести шестнадцатиразрядных цифр, как вы делаете, когда применяете hex-код, применяя <code>rgb</code> вы указываете значение яркости каждого цвета в диапазоне от 0 до 255.",
|
||
"Если вы посчитаете, 16 раз по 16 - это 256 различных значений. Таким образом <code>rgb</code>, где счёт начинается с нуля, имеет ровно то же число возможных значений, что и hex-код.",
|
||
"<hr>",
|
||
"Давайте заменим hex-код в цвете фона нашего элемента <code>body</code> на значение в формате RGB для получения чёрного: <code>rgb(0, 0, 0)</code>"
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #F00;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad82fee1348bd9aedf08721",
|
||
"title": "Use RGB to Mix Colors",
|
||
"description": [
|
||
"Just like with hex code, you can mix colors in RGB by using combinations of different values.",
|
||
"<hr>",
|
||
"Replace the hex codes in our <code>style</code> element with their correct RGB values.",
|
||
"<table class='table table-striped'><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></table>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
|
||
"testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
|
||
},
|
||
{
|
||
"text": "Use <code>rgb</code> for the color red.",
|
||
"testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color red.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.",
|
||
"testString": "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.');"
|
||
},
|
||
{
|
||
"text": "Use <code>rgb</code> for the color orchid.",
|
||
"testString": "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color orchid.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.",
|
||
"testString": "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.');"
|
||
},
|
||
{
|
||
"text": "Use <code>rgb</code> for the color blue.",
|
||
"testString": "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color blue.');"
|
||
},
|
||
{
|
||
"text": "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.",
|
||
"testString": "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.');"
|
||
},
|
||
{
|
||
"text": "Use <code>rgb</code> for the color sienna.",
|
||
"testString": "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color sienna.');"
|
||
}
|
||
],
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Verwende RGB um Farben zu mischen",
|
||
"description": [
|
||
"Wie auch mit Hexadezimal Code, kannst du Farben in RGB mischen indem du Kombination von verschiedenen Werten nimmst.",
|
||
"<hr>",
|
||
"Ändere die Hintergrundfarbe des <code>body</code> Elements zum RGB Wert von Orange: <code>rgb(255, 165, 0)</code>"
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Usa RGB para mezclar colores",
|
||
"description": [
|
||
"Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.",
|
||
"<hr>",
|
||
"Cambia el color de fondo del elemento <code>body</code> a anaranjado usando su valor RGB: <code>rgb(255, 165, 0)</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use Valores RBG para Misturar Cores",
|
||
"description": [
|
||
"Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.",
|
||
"<hr>",
|
||
"Mude a cor de fundo do elemento <code>body</code> para alaranjado usando seu valor RGB: <code>rgb(255, 165, 0)</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Используйте формат RGB, чтобы смешивать цвета",
|
||
"description": [
|
||
"Так же как и с hex-кодом, вы можете смешивать цвета в формате RGB, используя комбинации различных значений.",
|
||
"<hr>",
|
||
"Измените цвет фона элемента <code>body</code> на значение в формате RGB соответствующее оранжевому: <code>rgb(255, 165, 0)</code>"
|
||
]
|
||
}
|
||
},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
" .orchid-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
" .sienna-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
" .blue-text {",
|
||
" color: #000000;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h1 class=\"red-text\">I am red!</h1>",
|
||
"",
|
||
"<h1 class=\"orchid-text\">I am orchid!</h1>",
|
||
"",
|
||
"<h1 class=\"sienna-text\">I am sienna!</h1>",
|
||
"",
|
||
"<h1 class=\"blue-text\">I am blue!</h1>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "5a9d725e424fe3d0e10cad10",
|
||
"title": "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.",
|
||
"Follow the instructions below to see how changing just three values can change the styling of many elements.",
|
||
"<hr>",
|
||
"In the <code>penguin</code> class, change the <code>black</code> value to <code>gray</code>, the <code>gray</code> value to <code>white</code>, and the <code>yellow</code> value to <code>orange</code>."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
|
||
"testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
|
||
},
|
||
{
|
||
"text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.",
|
||
"testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.');"
|
||
},
|
||
{
|
||
"text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.",
|
||
"testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Mar 15, 2018",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .penguin {",
|
||
" ",
|
||
" /* change code below */",
|
||
" --penguin-skin: black;",
|
||
" --penguin-belly: gray;",
|
||
" --penguin-beak: yellow;",
|
||
" /* change code above */",
|
||
" ",
|
||
" position: relative;",
|
||
" margin: auto;",
|
||
" display: block;",
|
||
" margin-top: 5%;",
|
||
" width: 300px;",
|
||
" height: 300px;",
|
||
" }",
|
||
" ",
|
||
" .penguin-top {",
|
||
" top: 10%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 50%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-bottom {",
|
||
" top: 40%;",
|
||
" left: 23.5%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 53%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-hand {",
|
||
" top: 0%;",
|
||
" left: -5%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 120% 30%;",
|
||
" transform: rotate(45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .left-hand {",
|
||
" top: 0%;",
|
||
" left: 75%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 30% 120%;",
|
||
" transform: rotate(-45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .right-cheek {",
|
||
" top: 15%;",
|
||
" left: 35%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .left-cheek {",
|
||
" top: 15%;",
|
||
" left: 5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .belly {",
|
||
" top: 60%;",
|
||
" left: 2.5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 95%;",
|
||
" height: 100%;",
|
||
" border-radius: 120% 120% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-feet {",
|
||
" top: 85%;",
|
||
" left: 60%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(-80deg);",
|
||
" z-index: -2222; ",
|
||
" }",
|
||
" ",
|
||
" .left-feet {",
|
||
" top: 85%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(80deg);",
|
||
" z-index: -2222; ",
|
||
" }",
|
||
" ",
|
||
" .right-eye {",
|
||
" top: 45%;",
|
||
" left: 60%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .left-eye {",
|
||
" top: 45%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .sparkle {",
|
||
" top: 25%;",
|
||
" left: 15%;",
|
||
" background: white;",
|
||
" width: 35%;",
|
||
" height: 35%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .blush-right {",
|
||
" top: 65%;",
|
||
" left: 15%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .blush-left {",
|
||
" top: 65%;",
|
||
" left: 70%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .beak-top {",
|
||
" top: 60%;",
|
||
" left: 40%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 20%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .beak-bottom {",
|
||
" top: 65%;",
|
||
" left: 42%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 16%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" body {",
|
||
" background:#c6faf1;",
|
||
" }",
|
||
" ",
|
||
" .penguin * {",
|
||
" position: absolute;",
|
||
" }",
|
||
"</style>",
|
||
"<div class=\"penguin\">",
|
||
" <div class=\"penguin-bottom\">",
|
||
" <div class=\"right-hand\"></div>",
|
||
" <div class=\"left-hand\"></div>",
|
||
" <div class=\"right-feet\"></div>",
|
||
" <div class=\"left-feet\"></div>",
|
||
" </div>",
|
||
" <div class=\"penguin-top\">",
|
||
" <div class=\"right-cheek\"></div>",
|
||
" <div class=\"left-cheek\"></div>",
|
||
" <div class=\"belly\"></div>",
|
||
" <div class=\"right-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"left-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"blush-right\"></div>",
|
||
" <div class=\"blush-left\"></div>",
|
||
" <div class=\"beak-top\"></div>",
|
||
" <div class=\"beak-bottom\"></div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "5a9d726c424fe3d0e10cad11",
|
||
"title": "Create a custom CSS Variable",
|
||
"description": [
|
||
"To create a CSS Variable, you just need to give it a <code>name</code> with <code>two dashes</code> in front of it and assign it a <code>value</code> like this:",
|
||
"<blockquote>--penguin-skin: gray;</blockquote>",
|
||
"This will create a variable named <code>--penguin-skin</code> and assign it the value of <code>gray</code>.",
|
||
"Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.",
|
||
"<hr>",
|
||
"In the <code>penguin</code> class, create a variable name <code>--penguin-skin</code> and give it a value of <code>gray</code>"
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
|
||
"testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Mar 15, 2018",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .penguin {",
|
||
" ",
|
||
" /* add code below */",
|
||
" ",
|
||
" /* add code above */",
|
||
" position: relative;",
|
||
" margin: auto;",
|
||
" display: block;",
|
||
" margin-top: 5%;",
|
||
" width: 300px;",
|
||
" height: 300px;",
|
||
" }",
|
||
" ",
|
||
" .penguin-top {",
|
||
" top: 10%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 50%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-bottom {",
|
||
" top: 40%;",
|
||
" left: 23.5%;",
|
||
" background: black;",
|
||
" width: 53%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-hand {",
|
||
" top: 0%;",
|
||
" left: -5%;",
|
||
" background: black;",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 120% 30%;",
|
||
" transform: rotate(45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .left-hand {",
|
||
" top: 0%;",
|
||
" left: 75%;",
|
||
" background: black;",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 30% 120%;",
|
||
" transform: rotate(-45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .right-cheek {",
|
||
" top: 15%;",
|
||
" left: 35%;",
|
||
" background: white;",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .left-cheek {",
|
||
" top: 15%;",
|
||
" left: 5%;",
|
||
" background: white;",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .belly {",
|
||
" top: 60%;",
|
||
" left: 2.5%;",
|
||
" background: white;",
|
||
" width: 95%;",
|
||
" height: 100%;",
|
||
" border-radius: 120% 120% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-feet {",
|
||
" top: 85%;",
|
||
" left: 60%;",
|
||
" background: orange;",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(-80deg);",
|
||
" z-index: -2222; ",
|
||
" }",
|
||
" ",
|
||
" .left-feet {",
|
||
" top: 85%;",
|
||
" left: 25%;",
|
||
" background: orange;",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(80deg);",
|
||
" z-index: -2222; ",
|
||
" }",
|
||
" ",
|
||
" .right-eye {",
|
||
" top: 45%;",
|
||
" left: 60%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .left-eye {",
|
||
" top: 45%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .sparkle {",
|
||
" top: 25%;",
|
||
" left: 15%;",
|
||
" background: white;",
|
||
" width: 35%;",
|
||
" height: 35%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .blush-right {",
|
||
" top: 65%;",
|
||
" left: 15%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .blush-left {",
|
||
" top: 65%;",
|
||
" left: 70%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .beak-top {",
|
||
" top: 60%;",
|
||
" left: 40%;",
|
||
" background: orange;",
|
||
" width: 20%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .beak-bottom {",
|
||
" top: 65%;",
|
||
" left: 42%;",
|
||
" background: orange;",
|
||
" width: 16%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" body {",
|
||
" background:#c6faf1;",
|
||
" }",
|
||
" ",
|
||
" .penguin * {",
|
||
" position: absolute;",
|
||
" }",
|
||
"</style>",
|
||
"<div class=\"penguin\">",
|
||
" <div class=\"penguin-bottom\">",
|
||
" <div class=\"right-hand\"></div>",
|
||
" <div class=\"left-hand\"></div>",
|
||
" <div class=\"right-feet\"></div>",
|
||
" <div class=\"left-feet\"></div>",
|
||
" </div>",
|
||
" <div class=\"penguin-top\">",
|
||
" <div class=\"right-cheek\"></div>",
|
||
" <div class=\"left-cheek\"></div>",
|
||
" <div class=\"belly\"></div>",
|
||
" <div class=\"right-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"left-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"blush-right\"></div>",
|
||
" <div class=\"blush-left\"></div>",
|
||
" <div class=\"beak-top\"></div>",
|
||
" <div class=\"beak-bottom\"></div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "5a9d727a424fe3d0e10cad12",
|
||
"title": "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.",
|
||
"<blockquote>background: var(--penguin-skin);</blockquote>",
|
||
"This will change the background of whatever element you are targeting to gray because that is the value of the <code>--penguin-skin</code> variable.",
|
||
"Note that styles will not be applied unless the variable names are an exact match.",
|
||
"<hr>",
|
||
"Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code>, <code>penguin-bottom</code>, <code>right-hand</code> and <code>left-hand</code> classes."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.",
|
||
"testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.');"
|
||
},
|
||
{
|
||
"text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.",
|
||
"testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.');"
|
||
},
|
||
{
|
||
"text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.",
|
||
"testString": "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.');"
|
||
},
|
||
{
|
||
"text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.",
|
||
"testString": "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Mar 15, 2018",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .penguin {",
|
||
" --penguin-skin: gray;",
|
||
" position: relative;",
|
||
" margin: auto;",
|
||
" display: block;",
|
||
" margin-top: 5%;",
|
||
" width: 300px;",
|
||
" height: 300px;",
|
||
" }",
|
||
" ",
|
||
" .penguin-top {",
|
||
" top: 10%;",
|
||
" left: 25%;",
|
||
" ",
|
||
" /* change code below */",
|
||
" background: black;",
|
||
" /* change code above */",
|
||
" ",
|
||
" width: 50%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-bottom {",
|
||
" top: 40%;",
|
||
" left: 23.5%;",
|
||
" ",
|
||
" /* change code below */",
|
||
" background: black;",
|
||
" /* change code above */",
|
||
" ",
|
||
" width: 53%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-hand {",
|
||
" top: 0%;",
|
||
" left: -5%;",
|
||
" ",
|
||
" /* change code below */",
|
||
" background: black;",
|
||
" /* change code above */",
|
||
" ",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 120% 30%;",
|
||
" transform: rotate(45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .left-hand {",
|
||
" top: 0%;",
|
||
" left: 75%;",
|
||
" ",
|
||
" /* change code below */",
|
||
" background: black;",
|
||
" /* change code above */",
|
||
" ",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 30% 120%;",
|
||
" transform: rotate(-45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .right-cheek {",
|
||
" top: 15%;",
|
||
" left: 35%;",
|
||
" background: white;",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .left-cheek {",
|
||
" top: 15%;",
|
||
" left: 5%;",
|
||
" background: white;",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .belly {",
|
||
" top: 60%;",
|
||
" left: 2.5%;",
|
||
" background: white;",
|
||
" width: 95%;",
|
||
" height: 100%;",
|
||
" border-radius: 120% 120% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-feet {",
|
||
" top: 85%;",
|
||
" left: 60%;",
|
||
" background: orange;",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(-80deg);",
|
||
" z-index: -2222; ",
|
||
" }",
|
||
" ",
|
||
" .left-feet {",
|
||
" top: 85%;",
|
||
" left: 25%;",
|
||
" background: orange;",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(80deg);",
|
||
" z-index: -2222; ",
|
||
" }",
|
||
" ",
|
||
" .right-eye {",
|
||
" top: 45%;",
|
||
" left: 60%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%; ",
|
||
" }",
|
||
" ",
|
||
" .left-eye {",
|
||
" top: 45%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .sparkle {",
|
||
" top: 25%;",
|
||
" left: 15%;",
|
||
" background: white;",
|
||
" width: 35%;",
|
||
" height: 35%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-right {",
|
||
" top: 65%;",
|
||
" left: 15%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-left {",
|
||
" top: 65%;",
|
||
" left: 70%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-top {",
|
||
" top: 60%;",
|
||
" left: 40%;",
|
||
" background: orange;",
|
||
" width: 20%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-bottom {",
|
||
" top: 65%;",
|
||
" left: 42%;",
|
||
" background: orange;",
|
||
" width: 16%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" body {",
|
||
" background:#c6faf1;",
|
||
" }",
|
||
" ",
|
||
" .penguin * {",
|
||
" position: absolute;",
|
||
" }",
|
||
"</style>",
|
||
"<div class=\"penguin\">",
|
||
" <div class=\"penguin-bottom\">",
|
||
" <div class=\"right-hand\"></div>",
|
||
" <div class=\"left-hand\"></div>",
|
||
" <div class=\"right-feet\"></div>",
|
||
" <div class=\"left-feet\"></div>",
|
||
" </div>",
|
||
" <div class=\"penguin-top\">",
|
||
" <div class=\"right-cheek\"></div>",
|
||
" <div class=\"left-cheek\"></div>",
|
||
" <div class=\"belly\"></div>",
|
||
" <div class=\"right-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"left-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"blush-right\"></div>",
|
||
" <div class=\"blush-left\"></div>",
|
||
" <div class=\"beak-top\"></div>",
|
||
" <div class=\"beak-bottom\"></div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "5a9d7286424fe3d0e10cad13",
|
||
"title": "Attach a Fallback value to a CSS Variable",
|
||
"description": [
|
||
"When using your variable as a CSS property value, you can attach a fallback value that your page will revert to if for some reason it can't get your variable to work.",
|
||
"It could be that someone is using an older browser that hasn't yet adopted CSS Variables, or perhaps their device doesn't support the value you gave the variable. Here's how you do it:",
|
||
"<blockquote>background: var(--penguin-skin, black);</blockquote>",
|
||
"This will set background to black if there is a problem with your variable.",
|
||
"Note that this can be useful for debugging.",
|
||
"<hr>",
|
||
"Add a fallback value of <code>black</code> to the <code>background</code> property of <code>penguin-top</code> and <code>penguin-bottom</code> classes. This style will be applied because of a typo in the variable name."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.",
|
||
"testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.');"
|
||
},
|
||
{
|
||
"text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.",
|
||
"testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Mar 15, 2018",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" .penguin {",
|
||
" --penguin-skin: gray;",
|
||
" --penguin-belly: white;",
|
||
" --penguin-beak: orange;",
|
||
" position: relative;",
|
||
" margin: auto;",
|
||
" display: block;",
|
||
" margin-top: 5%;",
|
||
" width: 300px;",
|
||
" height: 300px;",
|
||
" }",
|
||
" ",
|
||
" .penguin-top {",
|
||
" top: 10%;",
|
||
" left: 25%;",
|
||
" ",
|
||
" /* change code below */",
|
||
" background: var(--pengiun-skin);",
|
||
" /* change code above */",
|
||
" ",
|
||
" width: 50%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-bottom {",
|
||
" top: 40%;",
|
||
" left: 23.5%;",
|
||
" ",
|
||
" /* change code below */",
|
||
" background: var(--pengiun-skin);",
|
||
" /* change code above */",
|
||
" ",
|
||
" width: 53%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-hand {",
|
||
" top: 0%;",
|
||
" left: -5%;",
|
||
" background: var(--penguin-skin, black);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 120% 30%;",
|
||
" transform: rotate(45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .left-hand {",
|
||
" top: 0%;",
|
||
" left: 75%;",
|
||
" background: var(--penguin-skin, black);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 30% 120%;",
|
||
" transform: rotate(-45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .right-cheek {",
|
||
" top: 15%;",
|
||
" left: 35%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .left-cheek {",
|
||
" top: 15%;",
|
||
" left: 5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .belly {",
|
||
" top: 60%;",
|
||
" left: 2.5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 95%;",
|
||
" height: 100%;",
|
||
" border-radius: 120% 120% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-feet {",
|
||
" top: 85%;",
|
||
" left: 60%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(-80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .left-feet {",
|
||
" top: 85%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .right-eye {",
|
||
" top: 45%;",
|
||
" left: 60%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .left-eye {",
|
||
" top: 45%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .sparkle {",
|
||
" top: 25%;",
|
||
" left: 15%;",
|
||
" background: white;",
|
||
" width: 35%;",
|
||
" height: 35%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-right {",
|
||
" top: 65%;",
|
||
" left: 15%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-left {",
|
||
" top: 65%;",
|
||
" left: 70%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-top {",
|
||
" top: 60%;",
|
||
" left: 40%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 20%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-bottom {",
|
||
" top: 65%;",
|
||
" left: 42%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 16%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" body {",
|
||
" background:#c6faf1;",
|
||
" }",
|
||
" ",
|
||
" .penguin * {",
|
||
" position: absolute;",
|
||
" }",
|
||
"</style>",
|
||
"<div class=\"penguin\">",
|
||
" <div class=\"penguin-bottom\">",
|
||
" <div class=\"right-hand\"></div>",
|
||
" <div class=\"left-hand\"></div>",
|
||
" <div class=\"right-feet\"></div>",
|
||
" <div class=\"left-feet\"></div>",
|
||
" </div>",
|
||
" <div class=\"penguin-top\">",
|
||
" <div class=\"right-cheek\"></div>",
|
||
" <div class=\"left-cheek\"></div>",
|
||
" <div class=\"belly\"></div>",
|
||
" <div class=\"right-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"left-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"blush-right\"></div>",
|
||
" <div class=\"blush-left\"></div>",
|
||
" <div class=\"beak-top\"></div>",
|
||
" <div class=\"beak-bottom\"></div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "5a9d7295424fe3d0e10cad14",
|
||
"title": "Cascading CSS variables",
|
||
"description": [
|
||
"When you create a variable, it becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as <dfn>cascading</dfn>.",
|
||
"Because of cascading, CSS variables are often defined in the <dfn>:root</dfn> element.",
|
||
"You can think of the <code>:root</code> element as a container for your entire HTML document, in the same way that an <code>html</code> element is a container for the <code>body</code> element.",
|
||
"By creating your variables in <code>:root</code>, they will be available throughout the whole web page.",
|
||
"<hr>",
|
||
"Define a variable named <code>--penguin-belly</code> in the <code>:root</code> selector and give it the value of <code>pink</code>. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.",
|
||
"testString": "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Mar 15, 2018",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" :root {",
|
||
" ",
|
||
" /* add code below */",
|
||
" ",
|
||
" /* add code above */",
|
||
" }",
|
||
" ",
|
||
" body {",
|
||
" background: var(--penguin-belly, #c6faf1);",
|
||
" }",
|
||
" ",
|
||
" .penguin {",
|
||
" --penguin-skin: gray;",
|
||
" --penguin-beak: orange;",
|
||
" position: relative;",
|
||
" margin: auto;",
|
||
" display: block;",
|
||
" margin-top: 5%;",
|
||
" width: 300px;",
|
||
" height: 300px;",
|
||
" }",
|
||
" ",
|
||
" .right-cheek {",
|
||
" top: 15%;",
|
||
" left: 35%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .left-cheek {",
|
||
" top: 15%;",
|
||
" left: 5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .belly {",
|
||
" top: 60%;",
|
||
" left: 2.5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 95%;",
|
||
" height: 100%;",
|
||
" border-radius: 120% 120% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-top {",
|
||
" top: 10%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 50%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-bottom {",
|
||
" top: 40%;",
|
||
" left: 23.5%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 53%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-hand {",
|
||
" top: 0%;",
|
||
" left: -5%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 120% 30%;",
|
||
" transform: rotate(45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .left-hand {",
|
||
" top: 0%;",
|
||
" left: 75%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 30% 120%;",
|
||
" transform: rotate(-45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .right-feet {",
|
||
" top: 85%;",
|
||
" left: 60%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(-80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .left-feet {",
|
||
" top: 85%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .right-eye {",
|
||
" top: 45%;",
|
||
" left: 60%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .left-eye {",
|
||
" top: 45%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .sparkle {",
|
||
" top: 25%;",
|
||
" left: 15%;",
|
||
" background: white;",
|
||
" width: 35%;",
|
||
" height: 35%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-right {",
|
||
" top: 65%;",
|
||
" left: 15%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-left {",
|
||
" top: 65%;",
|
||
" left: 70%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-top {",
|
||
" top: 60%;",
|
||
" left: 40%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 20%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-bottom {",
|
||
" top: 65%;",
|
||
" left: 42%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 16%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .penguin * {",
|
||
" position: absolute;",
|
||
" }",
|
||
"</style>",
|
||
"<div class=\"penguin\">",
|
||
" <div class=\"penguin-bottom\">",
|
||
" <div class=\"right-hand\"></div>",
|
||
" <div class=\"left-hand\"></div>",
|
||
" <div class=\"right-feet\"></div>",
|
||
" <div class=\"left-feet\"></div>",
|
||
" </div>",
|
||
" <div class=\"penguin-top\">",
|
||
" <div class=\"right-cheek\"></div>",
|
||
" <div class=\"left-cheek\"></div>",
|
||
" <div class=\"belly\"></div>",
|
||
" <div class=\"right-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"left-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"blush-right\"></div>",
|
||
" <div class=\"blush-left\"></div>",
|
||
" <div class=\"beak-top\"></div>",
|
||
" <div class=\"beak-bottom\"></div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "5a9d72a1424fe3d0e10cad15",
|
||
"title": "Change a variable for a specific area",
|
||
"description": [
|
||
"When you create your variables in <code>:root</code> they will set the value of that variable for the whole page.",
|
||
"You can then over-write these variables by setting them again within a specific element.",
|
||
"<hr>",
|
||
"Change the value of <code>--penguin-belly</code> to <code>white</code> in the <code>penguin</code> class."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.",
|
||
"testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Mar 15, 2018",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" :root {",
|
||
" --penguin-skin: gray;",
|
||
" --penguin-belly: pink;",
|
||
" --penguin-beak: orange;",
|
||
" }",
|
||
" ",
|
||
" body {",
|
||
" background: var(--penguin-belly, #c6faf1);",
|
||
" }",
|
||
" ",
|
||
" .penguin {",
|
||
" ",
|
||
" /* add code below */",
|
||
" ",
|
||
" /* add code above */",
|
||
" ",
|
||
" position: relative;",
|
||
" margin: auto;",
|
||
" display: block;",
|
||
" margin-top: 5%;",
|
||
" width: 300px;",
|
||
" height: 300px;",
|
||
" }",
|
||
" ",
|
||
" .right-cheek {",
|
||
" top: 15%;",
|
||
" left: 35%;",
|
||
" background: var(--penguin-belly, pink);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .left-cheek {",
|
||
" top: 15%;",
|
||
" left: 5%;",
|
||
" background: var(--penguin-belly, pink);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .belly {",
|
||
" top: 60%;",
|
||
" left: 2.5%;",
|
||
" background: var(--penguin-belly, pink);",
|
||
" width: 95%;",
|
||
" height: 100%;",
|
||
" border-radius: 120% 120% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-top {",
|
||
" top: 10%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 50%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-bottom {",
|
||
" top: 40%;",
|
||
" left: 23.5%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 53%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-hand {",
|
||
" top: 0%;",
|
||
" left: -5%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 120% 30%;",
|
||
" transform: rotate(45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .left-hand {",
|
||
" top: 0%;",
|
||
" left: 75%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 30% 120%;",
|
||
" transform: rotate(-45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .right-feet {",
|
||
" top: 85%;",
|
||
" left: 60%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(-80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .left-feet {",
|
||
" top: 85%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .right-eye {",
|
||
" top: 45%;",
|
||
" left: 60%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .left-eye {",
|
||
" top: 45%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .sparkle {",
|
||
" top: 25%;",
|
||
" left: 15%;",
|
||
" background: white;",
|
||
" width: 35%;",
|
||
" height: 35%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-right {",
|
||
" top: 65%;",
|
||
" left: 15%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-left {",
|
||
" top: 65%;",
|
||
" left: 70%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-top {",
|
||
" top: 60%;",
|
||
" left: 40%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 20%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-bottom {",
|
||
" top: 65%;",
|
||
" left: 42%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 16%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .penguin * {",
|
||
" position: absolute;",
|
||
" }",
|
||
"</style>",
|
||
"<div class=\"penguin\">",
|
||
" <div class=\"penguin-bottom\">",
|
||
" <div class=\"right-hand\"></div>",
|
||
" <div class=\"left-hand\"></div>",
|
||
" <div class=\"right-feet\"></div>",
|
||
" <div class=\"left-feet\"></div>",
|
||
" </div>",
|
||
" <div class=\"penguin-top\">",
|
||
" <div class=\"right-cheek\"></div>",
|
||
" <div class=\"left-cheek\"></div>",
|
||
" <div class=\"belly\"></div>",
|
||
" <div class=\"right-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"left-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"blush-right\"></div>",
|
||
" <div class=\"blush-left\"></div>",
|
||
" <div class=\"beak-top\"></div>",
|
||
" <div class=\"beak-bottom\"></div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "5a9d72ad424fe3d0e10cad16",
|
||
"title": "Use a media query to change a variable",
|
||
"description": [
|
||
"CSS Variables can simplify the way you use 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.",
|
||
"<hr>",
|
||
"In the <code>:root</code> selector of the <code>media query</code>, change it so <code>--penguin-size</code> is redefined and given a value of <code>200px</code>. Also, redefine <code>--penguin-skin</code> and give it a value of <code>black</code>. Then resize the preview to see this change in action."
|
||
],
|
||
"tests": [
|
||
{
|
||
"text": "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.",
|
||
"testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-size\\s*?:\\s*?200px\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.');"
|
||
},
|
||
{
|
||
"text": "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.",
|
||
"testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.');"
|
||
}
|
||
],
|
||
"solutions": [],
|
||
"hints": [],
|
||
"releasedOn": "Mar 15, 2018",
|
||
"challengeType": 0,
|
||
"translations": {},
|
||
"files": {
|
||
"indexhtml": {
|
||
"key": "indexhtml",
|
||
"ext": "html",
|
||
"name": "index",
|
||
"contents": [
|
||
"<style>",
|
||
" :root {",
|
||
" --penguin-size: 300px;",
|
||
" --penguin-skin: gray;",
|
||
" --penguin-belly: white;",
|
||
" --penguin-beak: orange;",
|
||
" }",
|
||
" ",
|
||
" @media (max-width: 350px) {",
|
||
" :root {",
|
||
" ",
|
||
" /* add code below */",
|
||
" ",
|
||
" /* add code above */",
|
||
" ",
|
||
" }",
|
||
" }",
|
||
" ",
|
||
" .penguin {",
|
||
" position: relative;",
|
||
" margin: auto;",
|
||
" display: block;",
|
||
" margin-top: 5%;",
|
||
" width: var(--penguin-size, 300px);",
|
||
" height: var(--penguin-size, 300px);",
|
||
" }",
|
||
" ",
|
||
" .right-cheek {",
|
||
" top: 15%;",
|
||
" left: 35%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .left-cheek {",
|
||
" top: 15%;",
|
||
" left: 5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 60%;",
|
||
" height: 70%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .belly {",
|
||
" top: 60%;",
|
||
" left: 2.5%;",
|
||
" background: var(--penguin-belly, white);",
|
||
" width: 95%;",
|
||
" height: 100%;",
|
||
" border-radius: 120% 120% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-top {",
|
||
" top: 10%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 50%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 60% 60%;",
|
||
" }",
|
||
" ",
|
||
" .penguin-bottom {",
|
||
" top: 40%;",
|
||
" left: 23.5%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 53%;",
|
||
" height: 45%;",
|
||
" border-radius: 70% 70% 100% 100%;",
|
||
" }",
|
||
" ",
|
||
" .right-hand {",
|
||
" top: 5%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-skin, black);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 120% 30%;",
|
||
" transform: rotate(130deg);",
|
||
" z-index: -1;",
|
||
" animation-duration: 3s;",
|
||
" animation-name: wave;",
|
||
" animation-iteration-count: infinite;",
|
||
" transform-origin:0% 0%;",
|
||
" animation-timing-function: linear;",
|
||
" }",
|
||
" ",
|
||
" @keyframes wave {",
|
||
" 10% {",
|
||
" transform: rotate(110deg);",
|
||
" }",
|
||
" 20% {",
|
||
" transform: rotate(130deg);",
|
||
" }",
|
||
" 30% {",
|
||
" transform: rotate(110deg);",
|
||
" } ",
|
||
" 40% {",
|
||
" transform: rotate(130deg);",
|
||
" } ",
|
||
" }",
|
||
" ",
|
||
" .left-hand {",
|
||
" top: 0%;",
|
||
" left: 75%;",
|
||
" background: var(--penguin-skin, gray);",
|
||
" width: 30%;",
|
||
" height: 60%;",
|
||
" border-radius: 30% 30% 30% 120%;",
|
||
" transform: rotate(-45deg);",
|
||
" z-index: -1;",
|
||
" }",
|
||
" ",
|
||
" .right-feet {",
|
||
" top: 85%;",
|
||
" left: 60%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(-80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .left-feet {",
|
||
" top: 85%;",
|
||
" left: 25%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 15%;",
|
||
" height: 30%;",
|
||
" border-radius: 50% 50% 50% 50%;",
|
||
" transform: rotate(80deg);",
|
||
" z-index: -2222;",
|
||
" }",
|
||
" ",
|
||
" .right-eye {",
|
||
" top: 45%;",
|
||
" left: 60%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .left-eye {",
|
||
" top: 45%;",
|
||
" left: 25%;",
|
||
" background: black;",
|
||
" width: 15%;",
|
||
" height: 17%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .sparkle {",
|
||
" top: 25%;",
|
||
" left:-23%;",
|
||
" background: white;",
|
||
" width: 150%;",
|
||
" height: 100%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-right {",
|
||
" top: 65%;",
|
||
" left: 15%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .blush-left {",
|
||
" top: 65%;",
|
||
" left: 70%;",
|
||
" background: pink;",
|
||
" width: 15%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-top {",
|
||
" top: 60%;",
|
||
" left: 40%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 20%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" .beak-bottom {",
|
||
" top: 65%;",
|
||
" left: 42%;",
|
||
" background: var(--penguin-beak, orange);",
|
||
" width: 16%;",
|
||
" height: 10%;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
" ",
|
||
" body {",
|
||
" background:#c6faf1;",
|
||
" }",
|
||
" ",
|
||
" .penguin * {",
|
||
" position: absolute;",
|
||
" }",
|
||
"</style>",
|
||
"<div class=\"penguin\">",
|
||
" <div class=\"penguin-bottom\">",
|
||
" <div class=\"right-hand\"></div>",
|
||
" <div class=\"left-hand\"></div>",
|
||
" <div class=\"right-feet\"></div>",
|
||
" <div class=\"left-feet\"></div>",
|
||
" </div>",
|
||
" <div class=\"penguin-top\">",
|
||
" <div class=\"right-cheek\"></div>",
|
||
" <div class=\"left-cheek\"></div>",
|
||
" <div class=\"belly\"></div>",
|
||
" <div class=\"right-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"left-eye\">",
|
||
" <div class=\"sparkle\"></div>",
|
||
" </div>",
|
||
" <div class=\"blush-right\"></div>",
|
||
" <div class=\"blush-left\"></div>",
|
||
" <div class=\"beak-top\"></div>",
|
||
" <div class=\"beak-bottom\"></div>",
|
||
" </div>",
|
||
"</div>"
|
||
],
|
||
"head": [],
|
||
"tail": []
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|